From 9b3f59ebe897d76b3a6108781e232d6e3967ca0f Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期二, 10 五月 2022 14:54:23 +0800 Subject: [PATCH] 四色图 --- src/components/Tab/index.vue | 19 +++-- public/data/plots_namisuo.geojson | 4 src/components/Tab/Plot.vue | 57 +++++++++++++++---- src/views/doublePreventAction/riskLevelManage/fourColorMap/sixty/index.vue | 18 ++++- src/views/doublePreventAction/hiddenDanger/inspectionRecord/index.vue | 6 +- src/components/Tab/Model.vue | 4 src/views/doublePreventAction/riskLevelManage/fourColorMap/oneHundredAndThirty/index.vue | 29 ++++++++- src/api/fourColorMap.js | 11 +++ 8 files changed, 111 insertions(+), 37 deletions(-) diff --git a/public/data/plots_namisuo.geojson b/public/data/plots_namisuo.geojson index 9a882b5..a19bf6e 100644 --- a/public/data/plots_namisuo.geojson +++ b/public/data/plots_namisuo.geojson @@ -8,7 +8,7 @@ "style": { "text": "F号楼", "clampToGround": true }, "attr": { "name": "F号楼", - "id": "1" + "id": "cabe679c-373b-4890-ae0c-7a7061f89dfd" } }, "geometry": { @@ -57,7 +57,7 @@ "type": "Feature", "properties": { "type": "polygon", - "style": { "text": "E号楼", "clampToGround": true }, + "style": { "text": "E号楼", "clampToGround": true, "color": "#ff0000" }, "attr": { "name": "E号楼", "id": "7a3094db-d227-4b3f-bf35-1ce64c365e42" diff --git a/src/api/fourColorMap.js b/src/api/fourColorMap.js index e21e91e..fc57bfa 100644 --- a/src/api/fourColorMap.js +++ b/src/api/fourColorMap.js @@ -21,4 +21,15 @@ method: 'post', params:params?params:{} }); +} + +export function deleteColorMap(data) { + return request({ + headers:{ + 'Authorization': getToken() + }, + url: process.env.BASE_API+'/fourColorMap/del2', + method: 'post', + data + }); } \ No newline at end of file diff --git a/src/components/Tab/Model.vue b/src/components/Tab/Model.vue index 4b62e25..7764f68 100644 --- a/src/components/Tab/Model.vue +++ b/src/components/Tab/Model.vue @@ -10,14 +10,14 @@ > 添加 </el-button> - <el-button + <!-- <el-button icon="el-icon-delete" size="small" type="danger" @click="clearHandle" > 清空 - </el-button> + </el-button> --> <el-button icon="el-icon-view" size="small" diff --git a/src/components/Tab/Plot.vue b/src/components/Tab/Plot.vue index 15a6b1b..d062258 100644 --- a/src/components/Tab/Plot.vue +++ b/src/components/Tab/Plot.vue @@ -12,7 +12,7 @@ 创建 </el-button> </el-col> - <el-col :span="6"> + <!-- <el-col :span="6"> <el-button icon="el-icon-delete" size="small" @@ -21,7 +21,7 @@ > 清空 </el-button> - </el-col> + </el-col> --> <el-col :span="6"> <el-button icon="el-icon-view" @@ -55,7 +55,7 @@ type="danger" size="mini" circle - @click="() => removeHandle(label.attr.id)" + @click="() => removeHandle(label)" /> </el-col> </el-row> @@ -70,6 +70,15 @@ > <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> @@ -79,7 +88,7 @@ </template> <script> - import { addMap } from '@/api/fourColorMap' + import { addMap , deleteColorMap} from '@/api/fourColorMap' import { global } from '../../global'; // 默认样式 @@ -98,6 +107,7 @@ }; export default { + props:['type','colorMapList'], components: {}, data() { return { @@ -105,6 +115,8 @@ 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:{ @@ -113,10 +125,10 @@ "type": "Feature", "properties": { "type": "polygon", - "style": { "text": "D号楼", "clampToGround": true }, + "style": { "text": "D号楼", "clampToGround": true ,color:'',}, "attr": { - "name": "D号楼", - "id": "8a65b4df-2450-4dab-958d-fbd182cfd92d" + "name": "", + "id": "" } }, "geometry": { @@ -162,10 +174,27 @@ }; this.showCreatePanel = true; }, - removeHandle(id) { + removeHandle(label) { if (!global.map) return; - global.map.deletePlot(id); - this.$store.dispatch('map/updateTimestamp'); + debugger + 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; @@ -198,17 +227,18 @@ map.startDraw( { type: 'polygon', - style: { text: name }, + style: { text: name ,color:this.color}, attr: { name, }, }, (entity) => { + debugger this._initLabel(); this.$store.dispatch('map/updateTimestamp'); this.form = { id:'', - etype:1, + etype:this.type, "type": "Feature", "properties": JSON.stringify(entity.attribute), @@ -221,8 +251,11 @@ ] }) } + // 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, diff --git a/src/components/Tab/index.vue b/src/components/Tab/index.vue index 317b4f8..4198424 100644 --- a/src/components/Tab/index.vue +++ b/src/components/Tab/index.vue @@ -16,26 +16,26 @@ <el-tab-pane label="模型" name="model"> <model-panel /> </el-tab-pane> - <el-tab-pane label="标注" name="label"> + <!-- <el-tab-pane label="标注" name="label"> <label-panel /> - </el-tab-pane> + </el-tab-pane> --> <el-tab-pane label="电子围栏" name="plot"> - <plot-panel /> + <plot-panel :type='type' :colorMapList='colorMapList'/> </el-tab-pane> - <el-tab-pane label="图标" name="marker"> + <!-- <el-tab-pane label="图标" name="marker"> <marker-panel /> - </el-tab-pane> + </el-tab-pane> --> <!-- <el-tab-pane label="波动圈" name="wave"> <wave-panel /> </el-tab-pane> <el-tab-pane label="光柱" name="beam"> <beam-panel /> </el-tab-pane> --> - <el-tab-pane label="动画轨迹" name="line"> + <!-- <el-tab-pane label="动画轨迹" name="line"> <animate-line-panel /> - </el-tab-pane> + </el-tab-pane> --> </el-tabs> - <tool-panel /> + <!-- <tool-panel /> --> </div> </div> </template> @@ -51,6 +51,7 @@ import AnimateLinePanel from './AnimateLine'; export default { + props:['type','colorMapList'], components: { LabelPanel, PlotPanel, @@ -67,6 +68,8 @@ showTab: true, }; }, + methods : { + } }; </script> diff --git a/src/views/doublePreventAction/hiddenDanger/inspectionRecord/index.vue b/src/views/doublePreventAction/hiddenDanger/inspectionRecord/index.vue index 34e3041..9586da1 100644 --- a/src/views/doublePreventAction/hiddenDanger/inspectionRecord/index.vue +++ b/src/views/doublePreventAction/hiddenDanger/inspectionRecord/index.vue @@ -119,11 +119,11 @@ </el-table-column> <el-table-column label="巡检人" prop="execUname" align="center"> </el-table-column> - <el-table-column label="巡检开始时间" prop="execUname" align="center"> + <el-table-column label="巡检开始时间" prop="expTime" align="center"> </el-table-column> - <el-table-column label="巡检结束时间" prop="execUname" align="center"> + <el-table-column label="巡检结束时间" prop="endTime" align="center"> </el-table-column> - <el-table-column label="巡检提交时间" prop="execUname" align="center"> + <el-table-column label="巡检提交时间" prop="execTime" align="center"> </el-table-column> <el-table-column label="任务状态" prop="status" align="center"> <template slot-scope="scope"> diff --git a/src/views/doublePreventAction/riskLevelManage/fourColorMap/oneHundredAndThirty/index.vue b/src/views/doublePreventAction/riskLevelManage/fourColorMap/oneHundredAndThirty/index.vue index 4920741..4a1b871 100644 --- a/src/views/doublePreventAction/riskLevelManage/fourColorMap/oneHundredAndThirty/index.vue +++ b/src/views/doublePreventAction/riskLevelManage/fourColorMap/oneHundredAndThirty/index.vue @@ -2,7 +2,7 @@ <div class="map-layout"> <Map @init="init" :option="option" v-if="option" /> - <Tab v-if="loaded" /> + <Tab v-if="loaded" :type='type' :colorMapList='colorMapList'/> </div> @@ -16,7 +16,7 @@ getCatesian3FromPX, Cartesian3_to_WGS84, } from '../../../../../components/Map/libs/Point'; - + import { getMap } from '@/api/fourColorMap' export default { name: 'App', components: { @@ -31,6 +31,8 @@ option: null, heatLayer: null, shineishiwai: true, + colorMapList:[], + type:2, }; }, mounted() { @@ -115,9 +117,26 @@ testLoadedData() { const map = global.map; if (!map) return; - $.get('./public/data/plots_namisuo.geojson', res => { - map.loadGeoJSON(res); - }); + let params = {} + params['eType'] = 2 + getMap(params).then(res =>{ + this.colorMapList = res.data.result + const list = res.data.result.map(item =>{ + return{ + type:item.type, + geometry:JSON.parse(item.geometry), + properties:JSON.parse(item.properties) + } + }) + const fourMapList = { + "type": "FeatureCollection", + "features": list + } + map.loadGeoJSON(fourMapList) + }) + // $.get('./public/data/plots_namisuo.geojson', res => { + // map.loadGeoJSON(res); + // }); }, initEvent(map) { let popup = null; diff --git a/src/views/doublePreventAction/riskLevelManage/fourColorMap/sixty/index.vue b/src/views/doublePreventAction/riskLevelManage/fourColorMap/sixty/index.vue index 18f51e6..3cf2945 100644 --- a/src/views/doublePreventAction/riskLevelManage/fourColorMap/sixty/index.vue +++ b/src/views/doublePreventAction/riskLevelManage/fourColorMap/sixty/index.vue @@ -2,7 +2,7 @@ <div class="map-layout"> <Map @init="init" :option="option" v-if="option" /> - <Tab v-if="loaded" /> + <Tab v-if="loaded" :type='type' :colorMapList='colorMapList'/> </div> @@ -31,6 +31,8 @@ option: null, heatLayer: null, shineishiwai: true, + colorMapList:[], + type:1, }; }, mounted() { @@ -115,22 +117,28 @@ testLoadedData() { const map = global.map; if (!map) return; - let params = {} + const params = {} + params['eType'] = 1 getMap(params).then(res =>{ - const list = res.data.result.map(item =>{ + let list = [] + let fourMapList = [] + this.colorMapList = res.data.result + list = res.data.result.map(item =>{ return{ type:item.type, geometry:JSON.parse(item.geometry), properties:JSON.parse(item.properties) } }) - const fourMapList = { + fourMapList = { "type": "FeatureCollection", "features": list } - debugger map.loadGeoJSON(fourMapList) + // $.get('./public/data/plots_namisuo.geojson', res => { + // map.loadGeoJSON(res); + // }); }) }, initEvent(map) { -- Gitblit v1.9.2