From 08bf6da5e3164a1b3ee5c79bb5d666e6385b4653 Mon Sep 17 00:00:00 2001
From: lyfO_o <764716047@qq.com>
Date: 星期一, 23 五月 2022 18:33:42 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master' into master
---
src/components/Tab/Marker.vue | 542 +++++++++++++++++++++++++++---------------------------
1 files changed, 271 insertions(+), 271 deletions(-)
diff --git a/src/components/Tab/Marker.vue b/src/components/Tab/Marker.vue
index f3149da..71b0322 100644
--- a/src/components/Tab/Marker.vue
+++ b/src/components/Tab/Marker.vue
@@ -1,290 +1,290 @@
<template>
- <div class="container">
- <div class="images">
- <img
- v-for="image in images"
- :key="image.url"
- :src="image.url"
- @click="clickCreateHandle(image.url)"
- />
- </div>
- <div class="model-panel-list">
- <el-row :gutter="10">
- <el-col :span="6">
- <el-button
- icon="el-icon-plus"
- size="small"
- type="primary"
- @click="showCreateHandle"
- >
- 创建
- </el-button>
- </el-col>
- <el-col :span="6">
- <el-button
- icon="el-icon-delete"
- size="small"
- type="danger"
- @click="clearHandle"
- >
- 清空
- </el-button>
- </el-col>
- <el-col :span="6">
- <el-button
- icon="el-icon-view"
- size="small"
- :type="showPlot ? 'success' : 'info'"
- @click="toggleVisible"
- >
- {{ showPlot ? '隐藏' : '显示' }}
- </el-button>
- </el-col>
- </el-row>
- <el-row :gutter="10" v-for="marker in markers" :key="marker.attr.id">
- <el-col :span="2">
- <img :src="marker.style.image" style="width:22px;height:22px;" />
- </el-col>
- <el-col :span="12">
- {{ marker.attr.name || ' ' }}
- </el-col>
- <el-col :span="10" style="textAlign:right">
- <el-button
- icon="el-icon-s-promotion"
- size="mini"
- circle
- @click="() => focusHandle(marker.attr.id)"
- />
- <el-button
- icon="el-icon-edit"
- size="mini"
- circle
- @click="() => editHandle(marker)"
- />
- <el-button
- icon="el-icon-delete"
- type="danger"
- size="mini"
- circle
- @click="() => removeHandle(marker.attr.id)"
- />
- </el-col>
- </el-row>
- </div>
- <el-dialog
- :visible="showCreatePanel"
- width="380px"
- title="创建图标"
- :append-to-body="true"
- :close-on-click-modal="false"
- :before-close="closeCreateHandle"
- >
- <p>请输入内容：</p>
- <el-input v-model="marker.name" placeholder="请输入内容" />
- <div class="image-list">
- <ul>
- <li
- v-for="item in images"
- :key="item.url"
- @click="marker.image = item.url"
- :class="marker.image === item.url ? 'active' : ''"
- >
- <img :src="item.url" />
- </li>
- </ul>
- </div>
- <span slot="footer" class="dialog-footer">
+ <div class="container">
+ <div class="images">
+ <!-- <img-->
+ <!-- v-for="image in images"-->
+ <!-- :key="image.url"-->
+ <!-- :src="image.url"-->
+ <!-- @click="clickCreateHandle(image.url)"-->
+ <!-- />-->
+ </div>
+ <div class="model-panel-list">
+ <el-row :gutter="10">
+ <el-col :span="6">
+ <el-button
+ icon="el-icon-plus"
+ size="small"
+ type="primary"
+ @click="showCreateHandle"
+ >
+ 创建
+ </el-button>
+ </el-col>
+ <el-col :span="6">
+ <el-button
+ icon="el-icon-delete"
+ size="small"
+ type="danger"
+ @click="clearHandle"
+ >
+ 清空
+ </el-button>
+ </el-col>
+ <el-col :span="6">
+ <el-button
+ icon="el-icon-view"
+ size="small"
+ :type="showPlot ? 'success' : 'info'"
+ @click="toggleVisible"
+ >
+ {{ showPlot ? '隐藏' : '显示' }}
+ </el-button>
+ </el-col>
+ </el-row>
+ <el-row :gutter="10" v-for="marker in markers" :key="marker.attr.id">
+ <el-col :span="2">
+ <img :src="marker.style.image" style="width:22px;height:22px;" />
+ </el-col>
+ <el-col :span="12">
+ {{ marker.attr.name || ' ' }}
+ </el-col>
+ <el-col :span="10" style="textAlign:right">
+ <el-button
+ icon="el-icon-s-promotion"
+ size="mini"
+ circle
+ @click="() => focusHandle(marker.attr.id)"
+ />
+ <el-button
+ icon="el-icon-edit"
+ size="mini"
+ circle
+ @click="() => editHandle(marker)"
+ />
+ <el-button
+ icon="el-icon-delete"
+ type="danger"
+ size="mini"
+ circle
+ @click="() => removeHandle(marker.attr.id)"
+ />
+ </el-col>
+ </el-row>
+ </div>
+ <el-dialog
+ :visible="showCreatePanel"
+ width="380px"
+ title="创建图标"
+ :append-to-body="true"
+ :close-on-click-modal="false"
+ :before-close="closeCreateHandle"
+ >
+ <p>请输入内容：</p>
+ <el-input v-model="marker.name" placeholder="请输入内容" />
+ <div class="image-list">
+ <ul>
+ <li
+ v-for="item in images"
+ :key="item.url"
+ @click="marker.image = item.url"
+ :class="marker.image === item.url ? 'active' : ''"
+ >
+ <img :src="item.url" />
+ </li>
+ </ul>
+ </div>
+ <span slot="footer" class="dialog-footer">
<el-button @click="closeCreateHandle">取 消</el-button>
<el-button type="primary" @click="createHandle">确 定</el-button>
</span>
- </el-dialog>
- </div>
+ </el-dialog>
+ </div>
</template>
<script>
-import { global } from '@/global';
+ import { global } from '@/global';
-export default {
- components: {},
- data() {
- return {
- images: [
- { url: '../../../public/images/icon/1.png', type: '消防预警' },
- { url: '../../../public/images/icon/2.png', type: '风险预警' },
- { url: '../../../public/images/icon/3.png', type: '监控' },
- { url: '../../../public/images/wet.png', type: '车辆1' },
- { url: '../../../public/images/dry.png', type: '车辆2' },
- { url: '../../../public/images/alarm1.png', type: '告警' },
- { url: '../../../public/images/police.png', type: '警察' },
- ],
- marker: {
- id: null,
- name: '',
- image: null,
- scale: 0.25,
- },
- showCreatePanel: false,
- showPlot: true,
- };
- },
- computed: {
- timestamp() {
- return this.$store.state.map.timestamp;
- },
- markers() {
- return this.entities.map(entity => entity.attribute);
- },
- entities() {
- let entities =
- this.timestamp && global.map
- ? global.map.plotDrawTool.getEntitys()
- : [];
- return entities.filter(entity => entity.attribute.type === 'billboard');
- },
- },
- methods: {
- editHandle(marker) {
- if (!global.map) return;
- this.marker = {
- id: marker.attr.id,
- name: marker.attr.name,
- image: marker.style.image,
- scale: 0.5,
- };
- this.showCreatePanel = true;
- },
- removeHandle(id) {
- if (!global.map) return;
- global.map.deletePlot(id);
- this.$store.dispatch('map/updateTimestamp');
- },
- closeCreateHandle() {
- this.showCreatePanel = false;
- },
- showCreateHandle() {
- this.showCreatePanel = true;
- },
- _initMarker() {
- this.marker = {
- id: null,
- name: '',
- image: '',
- scale: 0.25,
- };
- },
- createHandle() {
- if (!global.map) return;
- let map = global.map;
- const { id, image, scale, name } = this.marker;
- const entity = id && map.getPlotById(id);
- this.closeCreateHandle();
- if (entity) {
- map.updatePlotStyle(id, { image, scale });
- map.updatePlotAttribute(id, { name });
- this._initMarker();
- this.$store.dispatch('map/updateTimestamp');
- } else {
- map.startDraw(
- {
- type: 'billboard',
- style: {
- image,
- scale,
- },
- attr: {
- name,
- },
- },
- () => {
- this._initMarker();
- }
- );
- }
- },
- toggleVisible() {
- this.showPlot = !this.showPlot;
- if (global.map) {
- this.entities.forEach(entity => {
- entity.show = this.showPlot;
- });
- }
- this.$store.dispatch('map/updateTimestamp');
- },
- focusHandle(markerId) {
- if (global.map) {
- const entity = global.map.getPlotById(markerId);
- if (entity) {
- global.map.viewer.flyTo(entity, { duration: 1 });
- }
- }
- },
- clickCreateHandle(url) {
- if (!global.map) return;
- global.map.startDraw(
- {
- type: 'billboard',
- style: {
- image: url,
- scale: 0.25,
- },
+ export default {
+ components: {},
+ data() {
+ return {
+ images: [
+ { url: '../../../public/images/icon/1.png', type: '消防预警' },
+ { url: '../../../public/images/icon/2.png', type: '风险预警' },
+ { url: '../../../public/images/icon/3.png', type: '监控' },
+ { url: '../../../public/images/wet.png', type: '车辆1' },
+ { url: '../../../public/images/dry.png', type: '车辆2' },
+ { url: '../../../public/images/alarm1.png', type: '告警' },
+ { url: '../../../public/images/police.png', type: '警察' },
+ ],
+ marker: {
+ id: null,
+ name: '',
+ image: null,
+ scale: 0.25,
+ },
+ showCreatePanel: false,
+ showPlot: true,
+ };
},
- () => {
- this.$store.dispatch('map/updateTimestamp');
- }
- );
- },
- clearHandle() {
- if (global.map) {
- this.entities.forEach(entity => {
- global.map.plotDrawTool.deleteEntity(entity);
- });
- }
- this.$store.dispatch('map/updateTimestamp');
- },
- },
-};
+ computed: {
+ timestamp() {
+ return this.$store.state.map.timestamp;
+ },
+ markers() {
+ return this.entities.map(entity => entity.attribute);
+ },
+ entities() {
+ let entities =
+ this.timestamp && global.map
+ ? global.map.plotDrawTool.getEntitys()
+ : [];
+ return entities.filter(entity => entity.attribute.type === 'billboard');
+ },
+ },
+ methods: {
+ editHandle(marker) {
+ if (!global.map) return;
+ this.marker = {
+ id: marker.attr.id,
+ name: marker.attr.name,
+ image: marker.style.image,
+ scale: 0.5,
+ };
+ this.showCreatePanel = true;
+ },
+ removeHandle(id) {
+ if (!global.map) return;
+ global.map.deletePlot(id);
+ this.$store.dispatch('map/updateTimestamp');
+ },
+ closeCreateHandle() {
+ this.showCreatePanel = false;
+ },
+ showCreateHandle() {
+ this.showCreatePanel = true;
+ },
+ _initMarker() {
+ this.marker = {
+ id: null,
+ name: '',
+ image: '',
+ scale: 0.25,
+ };
+ },
+ createHandle() {
+ if (!global.map) return;
+ let map = global.map;
+ const { id, image, scale, name } = this.marker;
+ const entity = id && map.getPlotById(id);
+ this.closeCreateHandle();
+ if (entity) {
+ map.updatePlotStyle(id, { image, scale });
+ map.updatePlotAttribute(id, { name });
+ this._initMarker();
+ this.$store.dispatch('map/updateTimestamp');
+ } else {
+ map.startDraw(
+ {
+ type: 'billboard',
+ style: {
+ image,
+ scale,
+ },
+ attr: {
+ name,
+ },
+ },
+ () => {
+ this._initMarker();
+ }
+ );
+ }
+ },
+ toggleVisible() {
+ this.showPlot = !this.showPlot;
+ if (global.map) {
+ this.entities.forEach(entity => {
+ entity.show = this.showPlot;
+ });
+ }
+ this.$store.dispatch('map/updateTimestamp');
+ },
+ focusHandle(markerId) {
+ if (global.map) {
+ const entity = global.map.getPlotById(markerId);
+ if (entity) {
+ global.map.viewer.flyTo(entity, { duration: 1 });
+ }
+ }
+ },
+ clickCreateHandle(url) {
+ if (!global.map) return;
+ global.map.startDraw(
+ {
+ type: 'billboard',
+ style: {
+ image: url,
+ scale: 0.25,
+ },
+ },
+ () => {
+ this.$store.dispatch('map/updateTimestamp');
+ }
+ );
+ },
+ clearHandle() {
+ if (global.map) {
+ this.entities.forEach(entity => {
+ global.map.plotDrawTool.deleteEntity(entity);
+ });
+ }
+ this.$store.dispatch('map/updateTimestamp');
+ },
+ },
+ };
</script>
<style scoped>
-.images img {
- width: 36px;
- height: auto;
- margin: 0px 5px;
- cursor: pointer;
-}
+ .images img {
+ width: 36px;
+ height: auto;
+ margin: 0px 5px;
+ cursor: pointer;
+ }
-.model-panel-list > div {
- margin-bottom: 5px;
- padding: 5px 0 5px 0;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
+ .model-panel-list > div {
+ margin-bottom: 5px;
+ padding: 5px 0 5px 0;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ }
-.image-list {
- margin: 20px 0;
-}
+ .image-list {
+ margin: 20px 0;
+ }
-.image-list ul,
-.image-list li {
- margin: 0;
- padding: 0;
- list-style: none;
-}
+ .image-list ul,
+ .image-list li {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
-.image-list li {
- display: inline-block;
- margin: 0 5px 5px 5px;
- cursor: pointer;
- padding: 5px 8px;
- border-radius: 3px;
-}
+ .image-list li {
+ display: inline-block;
+ margin: 0 5px 5px 5px;
+ cursor: pointer;
+ padding: 5px 8px;
+ border-radius: 3px;
+ }
-.image-list li img {
- width: 32px;
- height: 32px;
-}
+ .image-list li img {
+ width: 32px;
+ height: 32px;
+ }
-.image-list li:hover,
-.image-list li.active {
- box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
-}
+ .image-list li:hover,
+ .image-list li.active {
+ box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
+ }
</style>
--
Gitblit v1.9.2