四色图

Your Name

2022-05-10 9b3f59ebe897d76b3a6108781e232d6e3967ca0f

四色图

 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"

 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
    });
}

 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"

 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,

 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>


 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">

 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;

 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) {