首页下拉数据对接

guanqb

2023-01-11 87f949949a59c05e5aa82fd524106623737c50d7

首页下拉数据对接

 src/components/map/index.vue

@@ -593,6 +593,7 @@
            // let polygon = new global.DC.Polygon(positions)
            // let polygonObj = {}//要在全局定义
            polygonObj[polygonName] = new global.DC.Polygon(positions)
            console.log(layerName, 1212)
            // polygon.setStyle({
            polygonObj[polygonName].setStyle({
                material: material,

 src/components/select/index.vue

@@ -1,17 +1,26 @@
<template>
    <div class="selects-container">
        <!-- 选择框 -->
        <div :class="{ 'selects-box-show': !optionsShow, 'selects-box-hide': optionsShow }" class="selects-box"
            @click="optionsShow = !optionsShow">
        <div
            :class="{ 'selects-box-show': !optionsShow, 'selects-box-hide': optionsShow }"
            class="selects-box"
            @click="optionsShow = !optionsShow"
        >
            <div class="text" v-text="checkValue"></div>
            <i class="el-icon-arrow-down"></i>
        </div>
        <!-- 下拉框大盒子 -->
        <div :class="{ 'options-box-show': !optionsShow, 'options-box-hide': optionsShow, issel: options.length >= 4 }"
            class="select-options" :style="{ height: 35 * options.length + 'px' }">
        <div
            :class="{ 'options-box-show': !optionsShow, 'options-box-hide': optionsShow, issel: options.length >= 4 }"
            class="select-options"
            :style="{ height: 35 * options.length + 'px' }"
        >
            <!-- 下拉框 -->
            <div @click="cutValue(item, index)" v-for="(item, index) in options" :key="index">{{ item[optionsName] }}
            </div>
            <div
                @click="cutValue(item, index)"
                v-for="(item, index) in options"
                :key="index"
            >{{ item[optionsName] }}</div>
        </div>
    </div>
</template>
@@ -46,7 +55,6 @@
        //点击换文字的方法
        cutValue (item, index) {
            this.optionsShow = true

            this.$emit("selectCheck", item, index)
        }
    }
@@ -66,8 +74,8 @@

//点击时改变选择框的边框颜色
.selects-box-show {
    border: 1px solid rgba(0, 246, 255, .5);
    box-shadow: inset 0 0 6px rgba(0, 246, 255, .5);
    border: 1px solid rgba(0, 246, 255, 0.5);
    box-shadow: inset 0 0 6px rgba(0, 246, 255, 0.5);
}

//恢复边框颜色
@@ -124,7 +132,7 @@

        //鼠标移到下拉框时的背景
        div:hover {
            background: rgba(45,92,200, 0.8);
            background: rgba(45, 92, 200, 0.8);
            color: white;
        }


 src/views/home/index.vue

@@ -66,7 +66,7 @@
                @selectCheck="policeStationSelect"
                :checkValue="policeStationCheckValue"
                :options="policeStationOptions"
                :optionsName="'policeStationName'"
                :optionsName="'name'"
            ></map-select>

            <map-select
@@ -74,7 +74,7 @@
                @selectCheck="areaSelect"
                :checkValue="areaCheckValue"
                :options="areaOptions"
                :optionsName="'areaCheckName'"
                :optionsName="'name'"
            ></map-select>

            <map-select
@@ -82,7 +82,7 @@
                @selectCheck="housingSelect"
                :checkValue="housingCheckValue"
                :options="housingOptions"
                :optionsName="'housingsName'"
                :optionsName="'name'"
            ></map-select>
        </div>

@@ -458,10 +458,6 @@
</template>

<script>

import { getPanoramaList } from "@/api/panorama"
import { getResidentialQuartersList } from '@/api/dept/index.js'

let cylinderLayer = null
let circleLayer = null
let treeData = [
@@ -526,56 +522,38 @@
            }]
    }
]

let positionColor = [
    global.DC.Namespace.Cesium.Color.fromBytes(
        3,
        255,
        13,
        100
    ),
    global.DC.Namespace.Cesium.Color.fromBytes(
        102, 176, 255,
        100
    ),
    global.DC.Namespace.Cesium.Color.fromBytes(
        230, 162, 60,
        100
    ),
    global.DC.Namespace.Cesium.Color.fromBytes(
        245, 108, 108,
        100
    ),
    global.DC.Namespace.Cesium.Color.fromBytes(
        139, 195, 74,
        100
    ),
    global.DC.Namespace.Cesium.Color.fromBytes(
        244, 67, 54,
        100
    )
    global.DC.Namespace.Cesium.Color.fromBytes(3, 255, 13, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(102, 176, 255, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(230, 162, 60, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(168, 45, 177, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(245, 108, 108, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(139, 195, 74, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(244, 67, 54, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 127, 80, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(100, 149, 237, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(220, 20, 60, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(0, 0, 139, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(189, 183, 107, 800),
    global.DC.Namespace.Cesium.Color.fromBytes(148, 0, 211, 800),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 20, 147, 800),
    global.DC.Namespace.Cesium.Color.fromBytes(124, 252, 0, 800),
]

let timer = []

import axios from "axios"
import { getPanoramaList } from "@/api/panorama"
import { getResidentialQuartersList } from '@/api/dept/index.js'
import carList from '@/assets/data/car.js'
import phoneList from '@/assets/data/phone.js'
import monitoringList from '@/assets/data/monitoring.js'
// import houseList from '@/assets/data/house.js'
import areaOptionData from '@/assets/data/JurisdictionData/areaOptionData.js'
import policeStationOptions from '@/assets/data/JurisdictionData/policeStationOptions.js'
import housingDate from '@/assets/data/JurisdictionData/housingDate.js'
import leftContainer from './components/leftContainer'
import rightContainer from './components/rightContainer'
import bottomContainer from './components/bottomContainer'
import historyArr from '@/assets/data/activitysData/history.js'
import underwayArr from '@/assets/data/activitysData/underway.js'
import { getPoliceStationList } from "@/api/dept"

import { convertStringToList } from "@/utils/geometryStringTool"

import { getActAsPoliceList } from "@/api/home/index.js"
import { getActAsPoliceList, getPoliceStationTree } from "@/api/home/index.js"

export default {
    data () {
@@ -720,24 +698,20 @@
        this.carList = carList
        this.phoneList = phoneList
        this.monitoringList = monitoringList
        // this.houseList = houseList
        // this.areaOptionData = areaOptionData
        // this.policeStationOptions = policeStationOptions
        // this.housingDate = housingDate
        //获取派出所责任区小区数据
        this.getPoliceStationList()
        this.historyArr = historyArr
        this.underwayArr = underwayArr
        this.getPanoramaList()

        this.getResidentialQuartersList('361102')

        // this.getResidentialQuartersList('361102')

        this.$EventBus.$on('policeSituationSiteClick', (params) => {
            console.log(params)

            that.policeSituationSiteClick(params)
        })
        getPoliceStationTree(1).then(res => {
            console.log(111, res.data.data)
            this.policeStationOptions = res.data.data
        })

    },

    mounted () {
@@ -773,9 +747,6 @@
                    document.querySelector('.image-switch-icon-btn').classList.add('iconbottom')
                    this.setDomStyle()
                })
                // axios.get('/user/getUserList').then((res) => {
                //     console.log(res, 999)
                // }}

                window.addEventListener('resize', this.setDomStyle)
            }
@@ -834,20 +805,20 @@
        },

        policeStationSelect (item) {
            this.policeStationCheckValue = item.policeStationName
            this.policeStationCheckValue = item.name
            if (item.policeStationName == "全部") {
                this.clearPolygonLayer()
                cylinderLayer.clear()
                cylinderLayer.remove()
                cylinderLayer = null
                this.initPoliceStationLayer()
                this.$EventBus.$emit('toPosition', {
                    siteJd: 116.112550,
                    siteWd: 28.196631,
                    siteGd: 50000,
                    siteHeading: 0,
                    sitePitch: -45
                })
                // this.initPoliceStationLayer()
                // this.$EventBus.$emit('toPosition', {
                //     siteJd: 116.112550,
                //     siteWd: 28.196631,
                //     siteGd: 50000,
                //     siteHeading: 0,
                //     sitePitch: -45
                // })
                this.areaOptions = []
                this.housingOptions = []
                this.areaCheckValue = '请选择责任区'
@@ -855,6 +826,10 @@
            } else {
                this.initAreaOptionLayer(item)
                cylinderLayer.clear()
                this.areaCheckValue = '请选择责任区'
                getPoliceStationTree(2, item.id).then(res => {
                    this.areaOptions = res.data.data
                })
            }
            this.policeStaionChecked = item
            this.$refs.leftContainer.selectPoliceChangeData(item.policeStationName)
@@ -867,12 +842,16 @@
        },

        areaSelect (item) {
            this.areaCheckValue = item.areaCheckName
            this.areaCheckValue = item.name
            if (item.areaCheckName == "全部") {
                this.initAreaOptionLayer(this.policeStaionChecked)
                this.housingOptions = []
                this.housingCheckValue = '请选择小区'
            } else {
                this.housingCheckValue = '请选择小区'
                getPoliceStationTree(3, item.id).then(res => {
                    this.housingOptions = res.data.data
                })
                this.areaChecked = item
                this.initHousingLayer(item)
            }
@@ -880,7 +859,7 @@
        },

        housingSelect (item) {
            this.housingCheckValue = item.housingsName
            this.housingCheckValue = item.name
            if (item.housingsName == "全部") {
                this.initHousingLayer(this.areaChecked)
            } else {
@@ -1230,69 +1209,77 @@
            cylinderLayer = new global.DC.PrimitiveLayer('cylinderLayer')
            global.viewer.addLayer(cylinderLayer)
            this.policeStationOptions.forEach((item, index) => {
                console.log(item, 89)
                if (item.position && item.position.length > 0) {
                    let str = ''
                    item.position.forEach(it => {
                        str = str + `${it[0]},${it[1]},${it[2]};`
                    })
                    this.$EventBus.$emit('layerPolygonAdd', {
                        layerName: 'polygonLayer',
                        positions: str,
                        material: positionColor[index],
                    })
                    const center = this.getCenter(item.position)
                        let itPositionStr = it.replace(/MULTIPOLYGON\(\(\(/g, '')
                        itPositionStr = itPositionStr.replace(/\)\)\)/g, '')
                        itPositionStr = itPositionStr.replace(/,/g, ";")
                        itPositionStr = itPositionStr.replace(/ /g, ",")
                        this.$EventBus.$emit('layerPolygonAdd', {
                            layerName: 'polygonLayer',
                            positions: itPositionStr,
                            material: positionColor[index],
                        })

                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'polygonLayer',
                        type: 'label',
                        params: {
                            lng: center[0],
                            lat: center[1] - 0.03,
                            alt: 1200,
                            text: '5656'
                        },
                        distanceDisplayCondition: { "near": 0, "far": 200000 }
                    })
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'polygonLayer',
                        type: 'label',
                        params: {
                            lng: center[0],
                            lat: center[1],
                            alt: 0,
                            text: item.policeStationName,
                        },
                        distanceDisplayCondition: { "near": 0, "far": 200000 }
                    })
                    let cylinder = new global.DC.LightCylinderPrimitive(new global.DC.Position(center[0] + 0.02, center[1] - 0.01), 1200, 1, 600)
                    cylinder.setStyle({
                        color: global.DC.Namespace.Cesium.Color.fromBytes(
                            102, 176, 255,
                            255
                        )
                    })
                    cylinderLayer.addOverlay(cylinder)
                    // item.position.forEach(it => {
                    //     str = str + `${it[0]},${it[1]},${it[2]};`
                    // })

                    // const center = this.getCenter(item.position)

                    // this.$EventBus.$emit('layerPointAdd', {
                    //     layerName: 'polygonLayer',
                    //     type: 'label',
                    //     params: {
                    //         lng: center[0],
                    //         lat: center[1] - 0.03,
                    //         alt: 1200,
                    //         text: '5656'
                    //     },
                    //     distanceDisplayCondition: { "near": 0, "far": 200000 }
                    // })
                    // this.$EventBus.$emit('layerPointAdd', {
                    //     layerName: 'polygonLayer',
                    //     type: 'label',
                    //     params: {
                    //         lng: center[0],
                    //         lat: center[1],
                    //         alt: 0,
                    //         text: item.policeStationName,
                    //     },
                    //     distanceDisplayCondition: { "near": 0, "far": 200000 }
                    // })
                    // let cylinder = new global.DC.LightCylinderPrimitive(new global.DC.Position(center[0] + 0.02, center[1] - 0.01), 1200, 1, 600)
                    // cylinder.setStyle({
                    //     color: global.DC.Namespace.Cesium.Color.fromBytes(
                    //         102, 176, 255,
                    //         255
                    //     )
                    // })
                    // cylinderLayer.addOverlay(cylinder)
                }
            })
            // this.houseChange(true)
        },

        initAreaOptionLayer (item) {
            let center = this.getPoliceStationCenter(item.policeStationName)
            // let center = this.getPoliceStationCenter(item.policeStationName)
            this.clearPolygonLayer()
            this.$EventBus.$emit('toPosition', {
                siteJd: center[0],
                siteWd: center[1],
                siteGd: 60000,
                siteHeading: -3,
                sitePitch: -90
            })
            this.areaOptionData.some((option) => {
                if (item.policeStationName == option.policeStationName) {
                    this.initAreaCheckoptions(option.areaCheckOptions)
                    this.areaOptions = option.areaCheckOptions
                }
            })
            // this.$EventBus.$emit('toPosition', {
            //     siteJd: center[0],
            //     siteWd: center[1],
            //     siteGd: 60000,
            //     siteHeading: -3,
            //     sitePitch: -90
            // })
            // this.areaOptionData.some((option) => {
            //     if (item.policeStationName == option.policeStationName) {
            //         this.initAreaCheckoptions(option.areaCheckOptions)
            //         this.areaOptions = option.areaCheckOptions
            //     }
            // })
        },

        initHousingLayer (item) {
@@ -1628,7 +1615,7 @@
                    this.housingDate = data
                }
            })
        }
        },

    },

@@ -1667,10 +1654,11 @@
            layerName: 'activityLayers',
            type: 'ClusterLayer'
        })

        cylinderLayer.clear()
        cylinderLayer.remove()
        cylinderLayer = null
        if (cylinderLayer != null) {
            cylinderLayer.clear()
            cylinderLayer.remove()
            cylinderLayer = null
        }
        circleLayer.clear()
        circleLayer.remove()
        circleLayer = null