四色图

Your Name

2022-05-10 9b3f59ebe897d76b3a6108781e232d6e3967ca0f

 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,