活动警员添加更新

guanqb

2022-12-01 6c4f405e28acaed23143b87b4619020337da2764

活动警员添加更新

 public/img/policeIcon.png

 src/api/activity/index.js

@@ -1,5 +1,20 @@
import request from "@/router/axios.js"


/**
 * 添加活动
 * @param {*}   
 * @returns 
 */
export const getSecurityList = (params, requestBaseUrl = '') => {
    return request({
        url: `/security/security/all`,
        method: 'get',
        requestBaseUrl,
        params
    })
}

/**
 * 获取警员列表
 * @param {*} params  
@@ -38,14 +53,13 @@

/**
 * 活动添加警员
 * @param {*} policemanId  警车ID
 * @param {*} policemanId  警员ID
 * @param {*} position  坐标
 * @param {*} securityId  活动ID
 * @param {*} deptId  部分ID
 * @param {*} type  范围类型
 * @returns 
 */
export const addActivityPolice = (policemanId, position, securityId, deptId, type, requestBaseUrl = '') => {
export const addActivityPolice = (policemanId, position, securityId, type, requestBaseUrl = '') => {
    return request({
        url: `/securityManage/securityManage/save`,
        method: 'post',
@@ -54,8 +68,58 @@
            policemanId,
            position,
            securityId,
            deptId,
            type
        }
    })
}

/**
 * 活动修改警员
 * @param {*} policemanId  警员ID
 * @param {*} id 数据唯一标识
 * @returns 
 */
export const updateActivityPolice = (id, policemanId, requestBaseUrl = '') => {
    return request({
        url: `/securityManage/securityManage/update`,
        method: 'post',
        requestBaseUrl,
        params: {
            id,
            policemanId,
        }
    })
}

/**
 * 获取活动人员分布信息
 * @param {*} securityId  活动ID
 * @returns 
 */
export const getSecurityPoliceList = (securityId, requestBaseUrl = '') => {
    return request({
        url: `/securityManage/securityManage/all`,
        method: 'get',
        requestBaseUrl,
        params: {
            securityId
        }
    })
}


/**
 * 获取活动警车分布信息
 * @param {*} securityId  活动ID
 * @returns 
 */
export const getSecurityCarList = (securityId, requestBaseUrl = '') => {
    return request({
        url: `/securityManageCar/securityManageCar/all`,
        method: 'get',
        requestBaseUrl,
        params: {
            securityId
        }
    })
}

 src/router/axios.js

@@ -24,7 +24,8 @@
const service = axios.create({
    // baseURL: 'http://36.14.255.242:18080/api',
    // baseURL: 'http://192.168.0.102:1888/api',
    baseURL: 'http://192.168.0.105:8081/api',
    // baseURL: 'http://192.168.0.105:8081/api',
    baseURL: 'http://192.168.0.106:1888/api',
    timeout: 600000 // request timeout
})

@@ -42,7 +43,8 @@

        if (config.requestBaseUrl == 'outside') {
            // config.baseURL = 'http://192.168.0.102:1888/api'
            config.baseURL = 'http://192.168.0.105:8081/api'
            // config.baseURL = 'http://192.168.0.105:8081/api'
            config.baseURL = 'http://192.168.0.106:1888/api'
        }

        // const token = auth.getToken()

 src/views/activity/index.vue

@@ -54,23 +54,21 @@
                        :class="{ on: currentClickIndex === index }"
                        v-for="(item, index) in activityList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        :key="index"
                        @click="goAbDetail(item, index)"
                        @click="activityListClick(item, index)"
                    >
                        <div class="row-title">常规安保</div>
                        <div class="row-content">
                            <div>
                                <div class="category">活动名称：</div>
                                <div class="category-value">xxx活动</div>
                                <div class="category-value">{{item.name}}</div>
                            </div>
                            <div>
                                <div class="category">活动时间：</div>
                                <div
                                    class="category-value"
                                >2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                                <div class="category-value">{{item.startTime}} 至 {{item.updateTime}}</div>
                            </div>
                            <div>
                                <div class="category">活动详情：</div>
                                <div class="category-value">护送某某某到某某某个地方</div>
                                <div class="category-value">{{item.content}}</div>
                            </div>
                        </div>
                    </div>
@@ -91,19 +89,22 @@

        <div class="draw-btn-box" v-show="dialogVisible">
            <ul>
                <li>
                <!-- <li>
                    <button @click="draw('point')">点</button>
                </li>
                <li>
                    <button @click="draw('billboard')">图标点</button>
                </li>-->
                <li>
                    <button @click="draw('billboard')">警员</button>
                </li>
                <li>
                    <button @click="draw('polyline')">线</button>
                    <button @click="draw('polyline')">路线</button>
                </li>
                <li>
                    <button @click="draw('polygon')">面</button>
                    <button @click="draw('polygon')">范围</button>
                </li>
                <li>
                <!-- <li>
                    <button @click="draw('circle')">圆</button>
                </li>
                <li>
@@ -126,7 +127,7 @@
                </li>
                <li>
                    <button @click="removeAll()">清除</button>
                </li>
                </li>-->
            </ul>
        </div>

@@ -260,7 +261,7 @@
</template>

<script>
import { getPoliceList, addCarAndRange, addActivityPolice } from '@/api/activity/index.js'
import { getSecurityList, getPoliceList, addCarAndRange, addActivityPolice, getSecurityPoliceList, getSecurityCarList, updateActivityPolice } from '@/api/activity/index.js'

let analyseLayer = null
let analysePolygon = null
@@ -440,56 +441,25 @@
            polylineSwitch: false,
            polylineBtnSwitch: false,
            analyseInput: 100,
            activityList: [
                {
                    name: '1号活动点',
                    lng: 116.022874,
                    lat: 28.685070,
                    alt: 100,
                    url: '/img/icon/activity.png'
                },
                {
                    name: '2号活动点',
                    lng: 116.024714,
                    lat: 28.712694,
                    alt: 100,
                    url: '/img/icon/activity.png'
                },
                {
                    name: '3号活动点',
                    lng: 116.008424,
                    lat: 28.671837,
                    alt: 100,
                    url: '/img/icon/activity.png'
                },
                {
                    name: '4号活动点',
                    lng: 116.017702,
                    lat: 28.675881,
                    alt: 100,
                    url: '/img/icon/activity.png'
                },
                {
                    name: '5号活动点',
                    lng: 116.035375,
                    lat: 28.681407,
                    alt: 100,
                    url: '/img/icon/activity.png'
                }
            ],
            activityList: [],
            activityDetails: {},
            boxShow: true,
            policeChooseTitle: '选择警员',
            policeChooseVisible: false,
            overlayObj1: {},
            overlayObj2: {},
            overlayObj: {},
            isTrackBtnShow: false,
            showingSecurityId: '',
            policeIconIsCreated: false,
            policeIconId: {},
        }
    },
    created () {
        this.getPoliceList()
        // this.addCarAndRange()
        // this.addCarAndRange('1595988751891415042', '1 2,3 4', 1, 1)
        // this.addActivityPolice()
        this.getSecurityList()
        // this.getSecurityPoliceList()
        // this.getSecurityCarList()
    },
    mounted () {

@@ -497,16 +467,6 @@
        this.$parent.resize('400px', true)

        this.$nextTick(() => {
            this.activityList.forEach(item => {
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'activityLayers',
                    type: "billboard",
                    params: item,
                    incident: this.houseSiteClick
                })
            })


            if (analyseLayer == null) {
                analyseLayer = new global.DC.VectorLayer('analyseLayer')
                global.viewer.addLayer(analyseLayer)
@@ -531,6 +491,7 @@
    updated () { },

    methods: {
        // 生成热力图坐标
        generatePosition (num) {
            let list = []
            for (let i = 0; i < num; i++) {
@@ -541,29 +502,107 @@
            return list
        },

        getPoliceList () {
            getPoliceList().then(res => {
                console.log(res.data.data, 7777)
                res.data.data.forEach((item, index) => {
                    this.policeOption.push({ value: `${index}`, label: `${item.name}` })
        // 获取活动警员分布信息
        getSecurityPoliceList (securityId) {
            this.removeAll()
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'newDrawLayers',
                type: 'VectorLayer'
            })
            getSecurityPoliceList(securityId).then(res => {
                res.data.data.forEach(item => {
                    if (item.type == 1) {
                        console.log()
                    } else if (item.type == 2) {
                        console.log()
                    } else if (item.type == 3) {
                        let positionObj = this.convertPositionDate(item.position, 'police', item.id, item.policemanId)
                        this.$EventBus.$emit('layerPointAdd', {
                            layerName: 'newDrawLayers',
                            type: 'billboard',
                            params: positionObj,
                            incident: this.overlayTypeClick
                        })
                    }
                })
            })
        },

        // 获取活动警车分布信息
        getSecurityCarList (securityId) {
            getSecurityCarList(securityId).then(res => {
                console.log('活动警车列表', res.data.data)
            })
        },
        // 获取活动列表
        getSecurityList () {
            getSecurityList().then(res => {
                this.activityList = res.data.data
                this.addActivityPoint()
                console.log('活动列表', res.data.data)
            })
        },

        // 获取警员列表，生成下拉数据
        getPoliceList () {
            getPoliceList().then(res => {
                console.log('警员列表', res.data.data)
                res.data.data.forEach(item => {
                    this.policeOption.push({ value: `${item.id}`, label: `${item.name}` })
                })
            })
        },

        // 修改活动警员
        updateActivityPolice (id, policemanId) {
            updateActivityPolice(id, policemanId).then(res => {
                this.getSecurityPoliceList(this.showingSecurityId)
            })
        },

        // 活动添加警车和范围
        addCarAndRange () {
            addCarAndRange('1595988751891415042', '1 2,3 4', 1, 1).then(res => {
        addCarAndRange (carId, position, securityId, type) {
            addCarAndRange(carId, position, securityId, type).then(res => {
                console.log(res, 2323)
            })
        },

        // 活动添加警员
        addActivityPolice () {
            addActivityPolice('1596389528611971073', '11 22,33 44', 2, 1, 2).then(res => {
                console.log(res, 3333)
        // 添加活动图标
        addActivityPoint () {
            this.activityList.forEach(item => {
                let positionObj = this.convertPositionDate(item.position, 'activity')
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'activityLayers',
                    type: "billboard",
                    params: positionObj,
                    incident: this.houseSiteClick
                })
            })
        },

        // 活动添加警员
        addActivityPolice (policemanId, position, securityId, type) {
            addActivityPolice(policemanId, position, securityId, type).then(res => {
                console.log(res, 3333)
                this.getSecurityPoliceList(securityId)
            })
        },

        // 转换坐标数据
        convertPositionDate (data, iconName, plotId, policemanId) {
            let positionStr = data
            positionStr = data.slice(6, positionStr.length - 1)
            let positionArr = positionStr.split(" ")
            let positionObj = {}
            if (iconName == 'activity') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 100, url: '/img/icon/activity.png' }
            } else {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 100, url: '/img/policeIcon.png', id: plotId, policemanId: policemanId }
            }
            return positionObj
        },

        // 树形控件选中事件
        treeCheckClick (e1, e2) {
            const that = this
            this.$EventBus.$emit('mapRemoveLayer', {
@@ -599,11 +638,18 @@
            }
        },

        goAbDetail (item, index) {
        // 点击活动列表活动
        activityListClick (item, index) {
            this.removeAll()
            this.showingSecurityId = item.id
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'newDrawLayers',
                type: 'VectorLayer'
            })
            this.getSecurityPoliceList(item.id)
            if (this.currentClickIndex !== '' && this.currentClickIndex == index) {
                return
            }

            this.analyseInput = 100

            this.activityDetails = item
@@ -614,10 +660,12 @@
                analyseLayer.clear()
            }

            let point = new global.DC.Point(`${item.lng}, ${item.lat}`)
            let positionObj = this.convertPositionDate(item.position, 'activity')

            let point = new global.DC.Point(`${positionObj.lng}, ${positionObj.lat}`)
            analyseLayer.addOverlay(point)

            let coords = global.DC.GeoTools.pointBuffer(`${item.lng}, ${item.lat}`, 100)
            let coords = global.DC.GeoTools.pointBuffer(`${positionObj.lng}, ${positionObj.lat}`, 100)
            analysePolygon = new global.DC.Polygon(coords)

            analysePolygon.setStyle({
@@ -636,12 +684,13 @@
            this.currentClickIndex = index

            this.$EventBus.$emit('toPosition', {
                siteJd: item.lng,
                siteWd: item.lat,
                siteJd: positionObj.lng,
                siteWd: positionObj.lat,
                siteGd: 1500
            })
        },

        // 切换轨迹路线显示
        switchChange (e) {
            if (e == true) {
                this.$EventBus.$emit('layerPolylineAdd', {
@@ -664,15 +713,12 @@
            }
        },

        // 切换轨迹播放控件
        switchBtnChange (e) {
            // if (e == true) {
            //     this.isTrackBtnShow = true
            // } else {
            //     this.isTrackBtnShow = false
            // }
            this.isTrackBtnShow = e
        },

        // 输入绘制线范围
        analyseChange (e) {
            analyseLayer.removeOverlay(analysePolygon)
            let coords = global.DC.GeoTools.pointBuffer(`${this.activityDetails.lng}, ${this.activityDetails.lat}`, e)
@@ -683,10 +729,12 @@
            analyseLayer.addOverlay(analysePolygon)
        },

        // 分页页码变化事件
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage
        },

        // 关闭活动详情弹窗
        closeActivityDetails () {
            this.dialogVisible = false
            this.currentClickIndex = ''
@@ -698,20 +746,25 @@
            })
        },

        // 地图元素绘制
        draw (type) {
            let flag = false
            const that = this
            this.policeType = ''
            plot && plot.draw(type, overlay => {

                if (type == 'billboard') {
                    overlay.icon = '/img/policeIcon.png'
                }

                if (overlay) {

                    drawLayers.addOverlay(overlay)

                    plot.edit(overlay, (e) => {
                        flag = true
                        overlay.on(global.DC.MouseEventType.CLICK, this.overlayTypeClick)
                        overlay.policeType = this.policeType
                        this.overlayObj1 = overlay
                        overlay.drawType = type
                        this.overlayObj = overlay
                        document.oncontextmenu = function () {
                            if (flag == true) {
                                that.policeChooseVisible = true
@@ -725,23 +778,28 @@
            })
        },

        // 删除所有地图绘制元素
        removeAll () {
            drawLayers.clear()
        },

        // 播放轨迹
        play () {
            tc.play()
            this.view('1', -20, 100)
        },

        // 暂停播放轨迹
        pause () {
            tc.pause()
        },

        // 恢复播放轨迹
        restore () {
            tc.restore()
        },

        // 轨迹视角切换
        view (mode, pitch, range) {
            tc.viewTrack(track, {
                mode: mode,
@@ -755,25 +813,61 @@
            this.boxShow = val
        },

        // 选择警员取消按钮
        cancel () {
            this.policeIconIsCreated = false
            this.policeChooseVisible = false
            this.overlayObj2 = {}
        },

        // 选择警员关闭
        policeChooseBeforeClose () {
            this.policeChooseVisible = false
            this.policeIconIsCreated = false
        },

        // 选择警员确认按钮
        determine () {
            if ('_id' in this.overlayObj2) {
                this.overlayObj2.policeType = this.policeType
            if (!this.policeIconIsCreated) {
                console.log('第一次点击确定！')
                let type = ''
                let position = ''
                if (this.overlayObj.drawType == 'billboard') {
                    type = 3
                    position = this.overlayObj._position._lng + ' ' + this.overlayObj._position._lat
                } else if (this.overlayObj.drawType == 'polyline') {
                    type = 1
                    this.overlayObj._positions.forEach(item => {
                        position += item._lng + ' ' + item._lat + ','
                    })
                    position = position.slice(0, position.length - 1)
                } else if (this.overlayObj.drawType == 'polygon') {
                    type = 2
                    this.overlayObj._positions.forEach(item => {
                        position += item._lng + ' ' + item._lat + ','
                    })
                    position += this.overlayObj._positions[0]._lng + ' ' + this.overlayObj._positions[0]._lat + ','
                    position = position.slice(0, position.length - 1)
                }

                this.addActivityPolice(this.policeType, position, this.showingSecurityId, type)
                this.policeChooseVisible = false
                this.policeIconIsCreated = false
            } else {
                this.overlayObj1.policeType = this.policeType
                console.log('第二+次点击确定！')
                console.log(this.policeIconId)
                this.updateActivityPolice(this.policeIconId, this.policeType)
                this.policeChooseVisible = false
                this.policeIconIsCreated = false
            }
            this.policeChooseVisible = false
        },

        // 地图绘制元素点击事件
        overlayTypeClick (e) {
            this.overlayObj2 = e.overlay
            this.policeType = this.overlayObj2.policeType
            this.policeIconIsCreated = true
            this.policeIconId = e.overlay.attrParams.id
            this.policeType = e.overlay.attrParams.policemanId
            this.policeChooseVisible = true
            this.overlayObj2 = {}
        }
    },


 src/views/video/list.vue

@@ -292,6 +292,7 @@
            const that = this
            graphicLayer.activate(type, (lastEventData) => {
                console.log('数据更新')
                console.log('lastEventData', lastEventData)
                this.drawInfo = lastEventData
                this.getRegionList(type, JSON.stringify(lastEventData))
            })