| | |
| | | 创建 |
| | | </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" |
| | |
| | | circle |
| | | @click="() => focusHandle(label.attr.id)" |
| | | /> |
| | | <el-button |
| | | icon="el-icon-edit" |
| | | size="mini" |
| | | circle |
| | | @click="() => editHandle(label)" |
| | | /> |
| | | |
| | | <!-- <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)" |
| | | @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) { |
| | | debugger |
| | | if (!global.map) return; |
| | | global.map.deletePlot(id); |
| | | this.$store.dispatch('map/updateTimestamp'); |
| | | 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, clampToGround: true}, |
| | | attr: { |
| | | name, |
| | | }, |
| | | }, |
| | | (entity) => { |
| | | console.log(wutu3d.draw.attr.getCoordinates(entity)); |
| | | this._initLabel(); |
| | | this.$store.dispatch('map/updateTimestamp'); |
| | | this.form = { |
| | | id:'', |
| | | etype:1, |
| | | etype:this.type, |
| | | "type": "Feature", |
| | | "properties": |
| | | "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, |
| | |
| | | message:'四色图新增成功', |
| | | }) |
| | | } |
| | | this.$emit('getList') |
| | | }) |
| | | } |
| | | ); |