From c819024e241b9f7c54cc3786373ad0d2998f2190 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期五, 05 五月 2023 08:55:46 +0800
Subject: [PATCH] 修改
---
src/components/Tab/Plot.vue | 552 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 322 insertions(+), 230 deletions(-)
diff --git a/src/components/Tab/Plot.vue b/src/components/Tab/Plot.vue
index 798c15d..1834109 100644
--- a/src/components/Tab/Plot.vue
+++ b/src/components/Tab/Plot.vue
@@ -1,250 +1,342 @@
<template>
- <div class="container">
- <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="label in labels" :key="label.attr.id">
- <el-col :span="14">
- {{ label.attr.name || ' ' }}
- </el-col>
- <el-col :span="10" style="textalign: right">
- <el-button
- icon="el-icon-s-promotion"
- size="mini"
- circle
- @click="() => focusHandle(label.attr.id)"
- />
- <el-button
- icon="el-icon-edit"
- size="mini"
- circle
- @click="() => editHandle(label)"
- />
- <el-button
- icon="el-icon-delete"
- type="danger"
- size="mini"
- circle
- @click="() => removeHandle(label.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="label.name" placeholder="请输入内容" />
- <span slot="footer" class="dialog-footer">
+ <div class="container">
+ <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="label in labels" :key="label.attr.id">
+ <el-col :span="14">
+ {{ label.attr.name || ' ' }}
+ </el-col>
+ <el-col :span="10" style="textalign: right">
+ <el-button
+ icon="el-icon-s-promotion"
+ size="mini"
+ circle
+ @click="() => focusHandle(label.attr.id)"
+ />
+
+<!-- <el-button-->
+<!-- icon="el-icon-edit"-->
+<!-- size="mini"-->
+<!-- circle-->
+<!-- @click="() => editHandle(label)"-->
+<!-- />-->
+ <el-button
+ icon="el-icon-delete"
+ type="danger"
+ size="mini"
+ circle
+ @click="() => removeHandle(label)"
+ />
+ </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="label.name" placeholder="请输入内容" />
+ <p>请选择风险等级：</p>
+ <el-select v-model="color" placeholder="请选择" >
+ <el-option
+ v-for="item in colorList"
+ :key="item.id"
+ :value="item.name"
+ :label="item.text"
+ ></el-option>
+ </el-select>
+ <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 { addMap , deleteColorMap} from '@/api/fourColorMap'
+ import { global } from '../../global';
-// 默认样式
-const LABEL_STYLE = {
- opacity: 1,
- color: '#FFFFFF',
- font_family: '黑体',
- font_size: 18,
- font_style: 'normal',
- font_weight: 'normal',
- border: false,
- border_color: '#ffffff',
- border_width: 2,
- background: true,
- background_color: 'rgba(0, 0, 0, .8)',
-};
-
-export default {
- components: {},
- data() {
- return {
- label: {
- id: null,
- name: '',
- },
- showCreatePanel: false,
- showPlot: true,
+ // 默认样式
+ const LABEL_STYLE = {
+ opacity: 1,
+ color: '#FFFFFF',
+ font_family: '黑体',
+ font_size: 18,
+ font_style: 'normal',
+ font_weight: 'normal',
+ border: false,
+ border_color: '#ffffff',
+ border_width: 2,
+ background: true,
+ background_color: 'rgba(0, 0, 0, .8)',
};
- },
- computed: {
- timestamp() {
- return this.$store.state.map.timestamp;
- },
- labels() {
- 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 === 'polygon');
- },
- },
- methods: {
- editHandle(label) {
- if (!global.map) return;
- this.label = {
- id: label.attr.id,
- name: label.attr.name,
- };
- 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;
- },
- _initLabel() {
- this.label = {
- id: null,
- name: '',
- };
- },
- createHandle() {
- if (!global.map) return;
- let map = global.map;
- const { id, name } = this.label;
- const entity = id && map.getPlotById(id);
- this.closeCreateHandle();
- if (entity) {
- map.updatePlotStyle(id, { text: name });
- map.updatePlotAttribute(id, { name });
- this._initLabel();
- this.$store.dispatch('map/updateTimestamp');
- } else {
- map.startDraw(
- {
- type: 'polygon',
- style: { text: name },
- attr: {
- name,
+
+ export default {
+ props:['type','colorMapList'],
+ components: {},
+ data() {
+ return {
+ label: {
+ id: null,
+ name: '',
+ },
+ color:'',
+ colorList:[{id:1,name:'blue',text:'低风险'},{id:2,name:'yellow',text:'一般风险'},{id:3,name:'orange',text:'较大风险'},{id:4,name:'red',text:'重大风险'},],
+ showCreatePanel: false,
+ showPlot: true,
+ form:{
+ id:'',
+ etype:1,
+ "type": "Feature",
+ "properties": {
+ "type": "polygon",
+ "style": { "text": "D号楼", "clampToGround": true ,color:'',},
+ "attr": {
+ "name": "",
+ "id": ""
+ }
+ },
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [
+ [120.728524, 31.258178, 0],
+ [120.727911, 31.257992, 0],
+ [120.728024, 31.25772, 0],
+ [120.727986, 31.2577, 0],
+ [120.728039, 31.257535, 0],
+ [120.728759, 31.257714, 0],
+ [120.728524, 31.258178, 0],
+ [120.728524, 31.258178, 0],
+ [120.728524, 31.258178, 0]
+ ]
+ ]
+ }
+ },
+ };
+ },
+ computed: {
+ timestamp() {
+ return this.$store.state.map.timestamp;
},
- },
- () => {
- this._initLabel();
- this.$store.dispatch('map/updateTimestamp');
- }
- );
- }
- },
- 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 });
- }
- }
- },
- clearHandle() {
- if (global.map) {
- this.entities.forEach(entity => {
- global.map.plotDrawTool.deleteEntity(entity);
- });
- }
- this.$store.dispatch('map/updateTimestamp');
- },
- },
-};
+ labels() {
+ 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 === 'polygon');
+ },
+ },
+ methods: {
+ editHandle(label) {
+ if (!global.map) return;
+ this.label = {
+ id: label.attr.id,
+ name: label.attr.name,
+ };
+ this.showCreatePanel = true;
+ },
+ removeHandle(label) {
+ if (!global.map) return;
+ for(let i in this.colorMapList){
+ if(JSON.parse(this.colorMapList[i].properties).attr.id === label.attr.id){
+ deleteColorMap({id:this.colorMapList[i].id}).then(res =>{
+ if(res.data.code === '200'){
+ this.$message({
+ title:'成功',
+ message:'删除成功',
+ duration:2000,
+ type:'success'
+ })
+ global.map.deletePlot(label.attr.id);
+ this.$store.dispatch('map/updateTimestamp');
+ }
+ })
+ }
+ }
+
+
+ },
+ closeCreateHandle() {
+ this.showCreatePanel = false;
+ },
+ showCreateHandle() {
+ this.showCreatePanel = true;
+ },
+ _initLabel() {
+ this.label = {
+ id: null,
+ name: '',
+ };
+ },
+ async createHandle() {
+ // this.form.geometry = JSON.stringify(this.form.geometry)
+ // this.form.properties = JSON.stringify(this.form.properties)
+ // let res = await addMap(this.form)
+ if (!global.map) return;
+ let map = global.map;
+ const { id, name } = this.label;
+ const entity = id && map.getPlotById(id);
+ this.closeCreateHandle();
+ if (entity) {
+ map.updatePlotStyle(id, { text: name });
+ map.updatePlotAttribute(id, { name });
+ this._initLabel();
+ this.$store.dispatch('map/updateTimestamp');
+ } else {
+ map.startDraw(
+ {
+ type: 'polygon',
+ style: { text: name ,color:this.color, clampToGround: true},
+ attr: {
+ name,
+ },
+ },
+ (entity) => {
+ console.log(wutu3d.draw.attr.getCoordinates(entity));
+ this._initLabel();
+ this.$store.dispatch('map/updateTimestamp');
+ this.form = {
+ id:'',
+ etype:this.type,
+ "type": "Feature",
+ "properties":
+ JSON.stringify(entity.attribute),
+ "geometry": JSON.stringify({
+ "type": "Polygon",
+ "coordinates": [
+
+ wutu3d.draw.attr.getCoordinates(entity)
+
+ ]
+ })
+ }
+ // this.form.properties.style.color = this.color
+ // this.form.properties = JSON.stringify(this.form.properties)
+ addMap(this.form).then(res =>{
+ if(res.data.code === '200'){
+ // this.$emit('testLoadedData')
+ this.$message({
+ type:'success',
+ duration:2000,
+ title:'成功',
+ message:'四色图新增成功',
+ })
+ }
+ this.$emit('getList')
+ })
+ }
+ );
+ }
+ },
+ 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 });
+ }
+ }
+ },
+ 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