| | |
| | | "style": { "text": "F号楼", "clampToGround": true }, |
| | | "attr": { |
| | | "name": "F号楼", |
| | | "id": "1" |
| | | "id": "cabe679c-373b-4890-ae0c-7a7061f89dfd" |
| | | } |
| | | }, |
| | | "geometry": { |
| | |
| | | "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" |
| | |
| | | method: 'post', |
| | | params:params?params:{} |
| | | }); |
| | | } |
| | | |
| | | export function deleteColorMap(data) { |
| | | return request({ |
| | | headers:{ |
| | | 'Authorization': getToken() |
| | | }, |
| | | url: process.env.BASE_API+'/fourColorMap/del2', |
| | | method: 'post', |
| | | data |
| | | }); |
| | | } |
| | |
| | | > |
| | | 添加 |
| | | </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" |
| | |
| | | 创建 |
| | | </el-button> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <!-- <el-col :span="6"> |
| | | <el-button |
| | | icon="el-icon-delete" |
| | | size="small" |
| | |
| | | > |
| | | 清空 |
| | | </el-button> |
| | | </el-col> |
| | | </el-col> --> |
| | | <el-col :span="6"> |
| | | <el-button |
| | | icon="el-icon-view" |
| | |
| | | type="danger" |
| | | size="mini" |
| | | circle |
| | | @click="() => removeHandle(label.attr.id)" |
| | | @click="() => removeHandle(label)" |
| | | /> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | > |
| | | <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> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { addMap } from '@/api/fourColorMap' |
| | | import { addMap , deleteColorMap} from '@/api/fourColorMap' |
| | | import { global } from '../../global'; |
| | | |
| | | // 默认样式 |
| | |
| | | }; |
| | | |
| | | export default { |
| | | props:['type','colorMapList'], |
| | | components: {}, |
| | | data() { |
| | | return { |
| | |
| | | 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:{ |
| | |
| | | "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": { |
| | |
| | | }; |
| | | 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; |
| | |
| | | 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), |
| | |
| | | ] |
| | | }) |
| | | } |
| | | // 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, |
| | |
| | | <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> |
| | |
| | | import AnimateLinePanel from './AnimateLine'; |
| | | |
| | | export default { |
| | | props:['type','colorMapList'], |
| | | components: { |
| | | LabelPanel, |
| | | PlotPanel, |
| | |
| | | showTab: true, |
| | | }; |
| | | }, |
| | | methods : { |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | |
| | | </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"> |
| | |
| | | |
| | | <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> |
| | | |
| | | |
| | |
| | | getCatesian3FromPX, |
| | | Cartesian3_to_WGS84, |
| | | } from '../../../../../components/Map/libs/Point'; |
| | | |
| | | import { getMap } from '@/api/fourColorMap' |
| | | export default { |
| | | name: 'App', |
| | | components: { |
| | |
| | | option: null, |
| | | heatLayer: null, |
| | | shineishiwai: true, |
| | | colorMapList:[], |
| | | type:2, |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | 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; |
| | |
| | | |
| | | <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> |
| | | |
| | | |
| | |
| | | option: null, |
| | | heatLayer: null, |
| | | shineishiwai: true, |
| | | colorMapList:[], |
| | | type:1, |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | 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) { |