派遣服务地图增加行业筛选

guanqb

2024-01-16 6fa34fcfa86d0a73c95d69c2141275fd793b8d20

派遣服务地图增加行业筛选

 src/api/dispatch/dispatch.js

@@ -121,4 +121,12 @@
            ids,
        }
    })
}

// 派遣单位行业
export const ProfessionList = () => {
    return request({
        url: "/api/blade-system/dict-biz/dictionary?code=dispatchProfession",
        method: "get"
    })
}

 src/views/dispatch/components/OlMapBox.vue

@@ -9,7 +9,7 @@
 * Copyright (c) 2023 by shuishen, All Rights Reserved.
-->
<template>
    <div class="w100 h100">
    <div class="w100 h100" style="position: relative;">
        <div id="OlMapBoxElement" class="w100 h100">
        </div>
        <div id="popup" class="ol-popup" v-show="isShowUnitInfoPopover">
@@ -20,6 +20,12 @@
                <p>派遣保安员数:{{ unitData.num }}</p>
                <p>派遣单位行业:{{ unitData.professionName }}</p>
            </div>
        </div>
        <div class="unit-select">
            <el-select v-model="industryValue" multiple collapse-tags placeholder="请选择行业" @change="industryChange">
                <el-option v-for="item in industryOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
    </div>
</template>
@@ -37,7 +43,7 @@
import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
import { Icon, Style, Fill, Text, Stroke, Circle } from 'ol/style.js'
import { getAlldata } from "@/api/dispatch/dispatch"
import { getAlldata, ProfessionList } from "@/api/dispatch/dispatch"
import { mapGetters } from "vuex"
import { mapState } from "vuex"

@@ -70,7 +76,9 @@
        return {
            publicPath: process.env.BASE_URL,
            unitData: {},
            isShowUnitInfoPopover: false
            isShowUnitInfoPopover: false,
            industryOptions: [],
            industryValue: [],
        }
    },

@@ -109,12 +117,28 @@
                // console.log('mapView地图缩放事件')
            })

            that.getAlldata()
            that.getAlldata()//图标列表
            that.ProfessionList()//行业列表
            that.baseInitLayer(that.mapType)
        })
    },

    methods: {
        // 行业下拉选择值改变
        industryChange () {
            this.getAlldata()
        },

        // 获取派遣单位行业列表
        ProfessionList () {
            ProfessionList().then(res => {
                this.industryOptions = []
                res.data.data.forEach(item => {
                    this.industryOptions.push({ value: item.dictKey, label: item.dictValue })
                })
            })
        },

        // 图标点击事件
        pqfwIconClick (e) {
            this.generateMapPopup(e)
@@ -133,6 +157,7 @@
            } else if (roleName == "公安管理员" || roleName == "administrator" || roleName == "民警") {
                params.jurisdiction = this.userInfo.jurisdiction
            }
            params.profession = this.industryValue.length > 0 ? this.industryValue.join() : ''
            getAlldata(params).then(res => {
                this.$nextTick(() => {
                    this.mapRemoveLayer(['pqfwLayer'])
@@ -425,4 +450,10 @@
.ol-popup-closer:after {
    content: "✖";
}

.unit-select {
    position: absolute;
    top: 10px;
    right: 20px;
}
</style>