From 99035941964810509e5037c7d9627b1801213335 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期三, 26 十月 2022 14:00:48 +0800
Subject: [PATCH] 默认更改列表
---
src/components/Tab/Marker.vue | 568 +++++++++++++++++++++++++++++---------------------------
1 files changed, 297 insertions(+), 271 deletions(-)
diff --git a/src/components/Tab/Marker.vue b/src/components/Tab/Marker.vue
index 37f2391..8817dfe 100644
--- a/src/components/Tab/Marker.vue
+++ b/src/components/Tab/Marker.vue
@@ -1,290 +1,316 @@
<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-row :gutter="10" v-for="item in labels" :key="item.id">
+ <el-col :span="18">
+ <img :src="item.url" style="width:30px;height:30px;" />
+ </el-col>
+ <el-col :span="6">
+ {{ item.name || ' ' }}
+ </el-col>
+<!-- <el-col :span="20">-->
+<!-- <img :src="marker.style.image" style="width:22px;height:22px;" />-->
+<!-- </el-col>-->
+<!-- <el-col :span="4">-->
+<!-- {{ 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';
+ const img1 = require('@/assets/icon_donghuo_s.png')
+ const img2 = require('@/assets/icon_diaozhuang_s.png')
+ const img3 = require('@/assets/icon_gaochu_s.png')
+ const img4 = require('@/assets/icon_kongjian_s.png')
+ const img5 = require('@/assets/icon_mangban_s.png')
+ const img6 = require('@/assets/icon_yongdian_s.png')
+ const img7 = require('@/assets/icon_wajue_s.png')
+ const img8 = require('@/assets/sidebar_icon4.png')
-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 {
+ labels:[
+ {id:1,url:img1,name:'动火作业'},
+ {id:2,url:img2,name:'吊装作业'},
+ {id:3,url:img3,name:'高处作业'},
+ {id:4,url:img4,name:'受限空间'},
+ {id:5,url:img5,name:'盲板抽堵'},
+ {id:6,url:img6,name:'临时用电'},
+ {id:7,url:img7,name:'动土作业'},
+ {id:8,url:img8,name:'断路作业'},
+ ],
+ 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