活动修改巡逻范围宽度、轨迹对应播放

guanqb

2023-02-13 7a2be276a3fc8dd28d09dfd070500739eb13d17a

活动修改巡逻范围宽度、轨迹对应播放

 src/api/activity/index.js

@@ -75,13 +75,15 @@
 * @param {*} id 数据唯一标识
 * @returns
 */
export const updateActivityCar = (id, carId) => {
export const updateActivityCar = (id, carId, color, width) => {
    return request({
        url: `/api/securityManageCar/securityManageCar/update`,
        method: 'post',
        params: {
            id,
            carId,
            color,
            width
        }
    })
}

 src/styles/base/index.scss

@@ -770,7 +770,7 @@
        display: flex;
        flex-direction: column;
        width: 300px;
        height: 170px;
        height: 190px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);
@@ -791,6 +791,65 @@
                justify-content: center;
                margin-bottom: 10px;
            }

            .input-width-box {
                input {
                    outline: none;
                    width: 140px;
                    height: 28px;
                    background-color: rgba(8, 56, 185, 0.5);
                    border: none;
                    color: #fff;
                    border-radius: 4px;
                    padding-left: 15px;
                }

                input:focus {
                    border-color: #409EFF;
                    border: 1px solid #409EFF;
                }
            }

            .value-name-box {
                height: 32px;
                line-height: 32px;
            }

            .color-box {
                display: flex;
                width: 140px;
                height: 32px;
                background-color: rgba(8, 56, 185, 0.5);
                padding: 6px;


                &>div {
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    border: 1px solid #409EFF;
                    margin-right: 10px;
                    cursor: pointer;
                    user-select: none;
                }

                &>div:hover {
                    border: 1px solid #eee;
                }

                .red-color {
                    background-color: red;
                }

                .green-color {
                    background-color: green;
                }

                .blue-color {
                    background-color: blue;
                }
            }

        }
    }
}

 src/views/activity/index.vue

@@ -289,7 +289,7 @@
            </div>
        </div>

        <div class="btn-box" v-show="isTrackBtnShow&&polylineBtnSwitch">
        <div class="btn-box" v-show="videoShow">
            <ul>
                <li>
                    <button @click="play()">播放</button>
@@ -488,15 +488,26 @@
            class="edit-line-box"
        >
            <div>
                <div>设置宽度:</div>
                <div>
                    <input type="text" />
                <div class="value-name-box">设置宽度：</div>
                <div class="input-width-box">
                    <input type="text" v-model="lineWidth" placeholder="请输入..." />
                </div>
            </div>
            <div>
                <div>选择颜色:</div>
                <div>
                    <input type="text" />
                <div class="value-name-box">选择颜色：</div>
                <div class="color-box">
                    <div
                        class="red-color"
                        @click="changeLineColor('#FF0000')"
                    >{{ chooseColor == '#FF0000'?'√':'' }}</div>
                    <div
                        class="green-color"
                        @click="changeLineColor('#00FF00')"
                    >{{ chooseColor == '#00FF00'?'√':'' }}</div>
                    <div
                        class="blue-color"
                        @click="changeLineColor('#0000FF')"
                    >{{ chooseColor == '#0000FF'?'√':'' }}</div>
                </div>
            </div>
            <div>
@@ -744,11 +755,22 @@
            isShowActivityClearBtn: false,
            videoShow: false,
            lineEditVisible: false,
            lineEditTitle: '弹窗',
            lineEditTitle: '修改巡逻路线',
            polygonAddTitle: '新增活动区域',
            polygonAddVisible: false,
            polygonName: '',
            polygonPositionStr: '',
            optionColors: [
                global.DC.Namespace.Cesium.Color.fromBytes(199, 237, 204, 400),
                global.DC.Namespace.Cesium.Color.fromBytes(250, 249, 222, 400),
                global.DC.Namespace.Cesium.Color.fromBytes(255, 242, 226, 400),
                global.DC.Namespace.Cesium.Color.fromBytes(220, 226, 241, 400),
                global.DC.Namespace.Cesium.Color.fromBytes(233, 235, 254, 400),
            ],
            chooseColor: '#FF0000',
            chooseLineData: {},
            lineWidth: 100,
            linePosition: '',
        }
    },
    created () {
@@ -770,7 +792,6 @@
    },
    mounted () {
        this.$parent.$parent.resize('400px', true)

        this.$nextTick(() => {
            if (analyseLayer == null) {
                analyseLayer = new global.DC.VectorLayer('analyseLayer')
@@ -952,44 +973,64 @@
                this.isHaveLine = res.data.data.some(item => {
                    return item.type == 1
                })
                let count = 0
                // let count = 0
                res.data.data.forEach(item => {
                    if (item.type == 1 && polylineShow) {
                        let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
                        count++
                        if (count == 1) {
                            if (tc) {
                                tc.clear()
                            }
                            tc = new global.DC.TrackController(global.viewer)
                            track = new global.DC.Track(positionNewArr, 15)
                            track.setModel('/model/qiche.gltf', {
                                scale: 0.5
                            })
                            tc.addTrack(track)
                            let coords = global.DC.GeoTools.polylineBuffer(positionNewArr, 100)
                            let polygon = new global.DC.Polygon(coords)
                            polygon.setStyle({
                                material: global.DC.Color.RED.withAlpha(0.4)
                            })
                            polylineAreaLayer.addOverlay(polygon)
                            // polylineAreaLayer.show = false
                            let positionStr = ''
                            coords.forEach(item => {
                                positionStr += item[0] + ',' + item[1] + ';'
                            })
                            this.getRegionList(positionStr)
                        item.positionStr = positionNewArr
                        // count++
                        // if (count == 1) {
                        // if (tc) {
                        //     tc.clear()
                        // }
                        // tc = new global.DC.TrackController(global.viewer)
                        // track = new global.DC.Track(positionNewArr, 15)
                        // track.setModel('/model/qiche.gltf', {
                        //     scale: 0.5
                        // })
                        // tc.addTrack(track)
                        let coords = global.DC.GeoTools.polylineBuffer(positionNewArr, item.width != -1 ? item.width : 100)
                        let polygon = new global.DC.Polygon(coords)
                        let color = ''
                        if (item.color == '') {
                            color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
                        } else {
                            let r = parseInt(item.color.slice(1, 3), 16)
                            let g = parseInt(item.color.slice(3, 5), 16)
                            let b = parseInt(item.color.slice(5, 7), 16)
                            color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 150)
                        }
                        let position = ''
                        polygon._positions.forEach(item => {
                            position += item._lng + ',' + item._lat + ';'
                        })
                        // polygon.setStyle({
                        //     material: color
                        // })
                        // polylineAreaLayer.addOverlay(polygon)
                        // polylineAreaLayer.attrParams = item
                        // polylineAreaLayer.on(global.DC.MouseEventType.CLICK, this.lineOverlayTypeClick)
                        this.$EventBus.$emit('layerPolygonAdd', {
                            layerName: 'newCarDrawLayers',
                            positions: position,
                            material: color,
                            params: item,
                            incident: this.lineOverlayTypeClick
                        })
                        // polylineAreaLayer.show = false
                        let positionStr = ''
                        coords.forEach(item => {
                            positionStr += item[0] + ',' + item[1] + ';'
                        })
                        this.getRegionList(positionStr)
                        // }
                        this.$EventBus.$emit('layerPolylineAdd', {
                            layerName: 'newCarDrawLayers',
                            positions: positionNewArr,
                            material: global.DC.Color.RED.withAlpha(0.8),
                            width: 3,
                            params: {
                                id: item.id,
                                carId: item.carId
                            },
                            incident: this.overlayTypeClick
                            params: item,
                            // incident: this.lineOverlayTypeClick
                        })
                    } else if (item.type == 2) {
                        let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
@@ -1067,8 +1108,18 @@
        },

        // 修改活动警车
        updateActivityCar (id, carId) {
            updateActivityCar(id, carId).then(res => {
        updateActivityCar (id, carId, color, width) {
            updateActivityCar(id, carId, color, width).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '保存成功',
                        type: 'warning'
                    })
                } else {
                    this.$message({
                        message: '保存失败'
                    })
                }
                this.getSecurityCarList(this.showingSecurityId, this.policeSwitch, this.polylineBtnSwitch)
            })
        },
@@ -1501,12 +1552,23 @@
                this.policeType = e.overlay.attrParams.policemanId
                this.policeChooseVisible = true
            } else if ('carId' in e.overlay.attrParams) {
                console.log(e.overlay.attrParams, 1111)
                this.policeChooseTitle = '选择警车'
                this.policeOption = this.policecarOption
                this.policeIconId = e.overlay.attrParams.id
                this.policeType = e.overlay.attrParams.carId
                this.policeChooseVisible = true
            }
        },

        lineOverlayTypeClick (e) {
            this.videoShow = false
            this.lineWidth = e.overlay.attrParams.width != -1 ? e.overlay.attrParams.width : 100
            this.chooseColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : '#FF0000'
            this.policeIconId = e.overlay.attrParams.id
            this.linePosition = e.overlay.attrParams.positionStr
            console.log(11, e, e.overlay.attrParams.id)
            this.lineEditVisible = true
        },

        // 保存活动标绘箭头
@@ -1744,11 +1806,21 @@
        // 观看视频
        watchVideo () {
            this.videoShow = true
            if (tc) {
                tc.clear()
            }
            tc = new global.DC.TrackController(global.viewer)
            track = new global.DC.Track(this.linePosition, 15)
            track.setModel('/model/qiche.gltf', {
                scale: 0.5
            })
            tc.addTrack(track)
        },

        // 保存巡逻路线信息
        saveLineInfo () {
            console.log('保存')
            this.updateActivityCar(this.policeIconId, 2, this.chooseColor, this.lineWidth)
            this.lineEditVisible = false
        },

        // 点击区域
@@ -1776,6 +1848,12 @@
            return [center.geometry.coordinates[0], center.geometry.coordinates[1]]
        },

        // 改变巡逻路线颜色
        changeLineColor (color) {
            this.chooseColor = color
        },


    },

    computed: {
@@ -1785,15 +1863,6 @@

    },

    watch: {
        videoShow (val) {
            if (val) {
                document.querySelector('.btn-box').classList.add('btn-box-new-top')
            } else {
                document.querySelector('.btn-box').classList.remove('btn-box-new-top')
            }
        }
    },

    destroyed () {
        this.$EventBus.$emit('mapRemoveLayer', {
@@ -2207,7 +2276,7 @@
        position: fixed;
        // bottom: calc(360 / 1080 * 100vh);
        // position: absolute;
        top: calc(800 / 1080 * 100vh);
        top: calc(680 / 1080 * 100vh);
        // left: 50%;
        left: calc(780 / 1920 * 100vw);
        // transform: translate(-40%, 0);
@@ -2235,10 +2304,6 @@
                }
            }
        }
    }

    .btn-box-new-top {
        top: calc(680 / 1080 * 100vh);
    }

    .search-content {