1

guanqb

2023-02-11 cf0f0e6b4d276df0a5d91c23dad438bf2e92fa1d

 src/views/activity/index.vue

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

        <div v-show="dialogVisible&&!polylineBtnSwitch" class="draw-btn-box">
        <div v-show="dialogVisible" class="draw-btn-box">
            <div class="left">
                <h3>预案布置</h3>
                <div>
@@ -166,6 +166,9 @@
                        </li>
                        <li>
                            <button @click="drawArrow('tailed_attack_arrow')" title="燕尾箭头">燕尾箭头</button>
                        </li>
                        <li>
                            <button @click="drawArrow('polygon')" title="多边形">多边形</button>
                        </li>
                    </ul>
                </div>
@@ -335,7 +338,7 @@
            </div>
        </div>

        <div class="item video5" v-show="polylineBtnSwitch&&videoShow">
        <div class="item video5" v-show="videoShow">
            <div class="select" v-show="isShowSelect.video5&&isHaveMonitor.video5">
                <el-select
                    size="small"
@@ -364,7 +367,7 @@
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video5">暂无数据</div>
        </div>
        <div class="item video6" v-show="polylineBtnSwitch&&videoShow">
        <div class="item video6" v-show="videoShow">
            <div class="select" v-show="isShowSelect.video6&&isHaveMonitor.video6">
                <el-select
                    size="small"
@@ -393,7 +396,7 @@
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video6">暂无数据</div>
        </div>
        <div class="item video7" v-show="polylineBtnSwitch&&videoShow">
        <div class="item video7" v-show="videoShow">
            <div class="select" v-show="isShowSelect.video7&&isHaveMonitor.video7">
                <el-select
                    size="small"
@@ -424,7 +427,7 @@
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video7">暂无数据</div>
        </div>
        <div class="item video8" v-show="polylineBtnSwitch&&videoShow">
        <div class="item video8" v-show="videoShow">
            <div class="select" v-show="isShowSelect.video8&&isHaveMonitor.video8">
                <el-select
                    size="small"
@@ -453,7 +456,7 @@
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video8">暂无数据</div>
        </div>
        <div class="deleteVideo" v-show="polylineBtnSwitch&&videoShow" @click="videoShow = false">关闭</div>
        <div class="deleteVideo" v-show="videoShow" @click="videoShow = false">关闭</div>

        <el-dialog
            :title="policeChooseTitle"
@@ -474,6 +477,32 @@
                </el-select>
                <el-button @click="determine">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog
            :title="lineEditTitle"
            :modal="false"
            :visible.sync="lineEditVisible"
            :before-close="lineEditBeforeClose"
            :close-on-click-modal="true"
            class="edit-line-box"
        >
            <div>
                <div>设置宽度:</div>
                <div>
                    <input type="text" />
                </div>
            </div>
            <div>
                <div>选择颜色:</div>
                <div>
                    <input type="text" />
                </div>
            </div>
            <div>
                <el-button>查看视频</el-button>
                <el-button>保存</el-button>
            </div>
        </el-dialog>
    </div>
@@ -684,10 +713,6 @@
                video8: true,
            },
            flvListPlayer: {
                flvPlayer1: null,
                flvPlayer2: null,
                flvPlayer3: null,
                flvPlayer4: null,
                flvPlayer5: null,
                flvPlayer6: null,
                flvPlayer7: null,
@@ -701,6 +726,8 @@
            },
            isShowActivityClearBtn: false,
            videoShow: false,
            lineEditVisible: false,
            lineEditTitle: '弹窗',
        }
    },
    created () {
@@ -943,7 +970,7 @@
                                id: item.id,
                                carId: item.carId
                            },
                            // incident: this.overlayTypeClick
                            incident: this.overlayTypeClick
                        })
                    } else if (item.type == 2) {
                        let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
@@ -1189,7 +1216,6 @@
        // 切换轨迹播放控件
        switchBtnChange (e) {
            this.isTrackBtnShow = e
            this.videoShow = e
            this.getSecurityCarList(this.showingSecurityId, this.policeSwitch, this.polylineBtnSwitch)
        },

@@ -1286,29 +1312,38 @@
        },

        drawArrow (type) {
            arrowPlot && arrowPlot.draw(type, overlay => {
                if (overlay) {
                    let plotType = ''
                    if (type == 'attack_arrow') {
                        plotType = 1
                    } else if (type == 'double_arrow') {
                        plotType = 2
                    } else if (type == 'fine_arrow') {
                        plotType = 3
                    } else if (type == 'tailed_attack_arrow') {
                        plotType = 4
                    }
                    plot.edit(overlay, (e) => {
                        let position = ''
                        overlay._positions.forEach(item => {
                            position += item._lng + ' ' + item._lat + ','
                        })
                        position = position.slice(0, position.length - 1)
            if (type == 'polygon') {
                plot && plot.draw(type, overlay => {
                    if (overlay) {
                        drawArrowLayers.addOverlay(overlay)
                        this.addSecurityPlot(this.showingSecurityId, position, plotType)
                    })
                }
            })
                        plot.edit(overlay)
                    }
                })
            } else {
                arrowPlot && arrowPlot.draw(type, overlay => {
                    if (overlay) {
                        let plotType = ''
                        if (type == 'attack_arrow') {
                            plotType = 1
                        } else if (type == 'double_arrow') {
                            plotType = 2
                        } else if (type == 'fine_arrow') {
                            plotType = 3
                        } else if (type == 'tailed_attack_arrow') {
                            plotType = 4
                        }
                        plot.edit(overlay, (e) => {
                            let position = ''
                            overlay._positions.forEach(item => {
                                position += item._lng + ' ' + item._lat + ','
                            })
                            position = position.slice(0, position.length - 1)
                            drawArrowLayers.addOverlay(overlay)
                            this.addSecurityPlot(this.showingSecurityId, position, plotType)
                        })
                    }
                })
            }
        },

        removeAllArrow () {
@@ -1345,21 +1380,23 @@
        boxResize (val) {
            this.boxShow = val
            if (!val) {
                // this.isTrackBtnShow = false
                this.polylineBtnSwitch = false
                let videoList = document.querySelectorAll('.item')
                videoList.forEach(item => {
                    item.classList.add('newtop')
                    item.classList.add('item-new-width')
                })
                document.querySelector('.btn-box ').classList.add('btn-box-new-top')
                document.querySelector('.deleteVideo').classList.add('deleteVideo-new-top')
                document.querySelector('.video5').classList.add('video5-new-left')
                document.querySelector('.video6').classList.add('video6-new-left')
                document.querySelector('.video7').classList.add('video7-new-left')
                document.querySelector('.video8').classList.add('video8-new-left')
            } else {
                let videoList = document.querySelectorAll('.item')
                videoList.forEach(item => {
                    item.classList.remove('newtop')
                    item.classList.remove('item-new-width')
                })
                document.querySelector('.btn-box ').classList.remove('btn-box-new-top')
                document.querySelector('.deleteVideo').classList.remove('deleteVideo-new-top')
                document.querySelector('.video5').classList.remove('video5-new-left')
                document.querySelector('.video6').classList.remove('video6-new-left')
                document.querySelector('.video7').classList.remove('video7-new-left')
                document.querySelector('.video8').classList.remove('video8-new-left')
            }
        },

@@ -1420,19 +1457,27 @@

        // 地图绘制元素点击事件
        overlayTypeClick (e) {
            console.log(e)
            this.policeIconIsCreated = true
            if ('policemanId' in e.overlay.attrParams) {
                this.policeChooseTitle = '选择警员'
                this.policeOption = this.policemanOption
                this.policeIconId = e.overlay.attrParams.id
                this.policeType = e.overlay.attrParams.policemanId
                this.policeChooseVisible = true
            } else if ('carId' in e.overlay.attrParams) {
                this.policeChooseTitle = '选择警车'
                this.policeOption = this.policecarOption
                this.policeIconId = e.overlay.attrParams.id
                this.policeType = e.overlay.attrParams.carId
                if (e.overlay.attrParams.carId) {
                    this.policeChooseTitle = '选择警车'
                    this.policeOption = this.policecarOption
                    this.policeIconId = e.overlay.attrParams.id
                    this.policeType = e.overlay.attrParams.carId
                    this.policeChooseVisible = true
                } else {
                    console.log(111)
                    this.lineEditVisible = true
                }

            }
            this.policeChooseVisible = true
        },

        // 保存活动标绘箭头
@@ -1475,7 +1520,6 @@

        // 双击修改箭头
        reeditArrowDbClick (e) {
            console.log(111, e)
            let overlayData = e.overlay
            plot.edit(overlayData, (e) => {
                let position = ''
@@ -1655,6 +1699,16 @@
            return this.isHavePoliceCar || this.isHavePoliceMan
        }

    },

    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 () {
@@ -1891,12 +1945,13 @@
    .draw-btn-box {
        position: fixed;
        display: flex;
        left: 50%;
        // left: 50%;
        left: calc(810 / 1920 * 100vw);
        bottom: 40px;
        color: #fff;
        background: $bg-one-color;
        white-space: nowrap;
        transform: translate(-50%, 0);
        // transform: translate(-50%, 0);

        .left,
        .right {
@@ -2065,10 +2120,10 @@
    }

    .btn-box {
        // position: fixed;
        position: fixed;
        // bottom: calc(360 / 1080 * 100vh);
        position: absolute;
        top: calc(620 / 1080 * 100vh);
        // position: absolute;
        top: calc(800 / 1080 * 100vh);
        // left: 50%;
        left: calc(780 / 1920 * 100vw);
        // transform: translate(-40%, 0);
@@ -2192,10 +2247,12 @@

    .item {
        background-color: $bg-color;
        position: absolute;
        // position: absolute;
        position: fixed;
        z-index: 100;
        width: calc((1920 - 400) / 4 / 1920 * 100vw);
        height: calc((1080 - 60) / 3 / 1080 * 100vh);
        top: calc(740 / 1080 * 100vh);

        .select {
            position: absolute;
@@ -2222,43 +2279,54 @@
        }
    }

    .item-new-width {
        width: 25vw;
    }

    .video5 {
        left: calc(400 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }

    .video6 {
        left: calc(780 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }

    .video7 {
        left: calc(1160 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }

    .video8 {
        left: calc(1540 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }

    .newtop {
        top: calc(740 / 1080 * 100vh);
    .video5-new-left {
        left: 0;
    }

    .video6-new-left {
        left: 25vw;
    }

    .video7-new-left {
        left: 50vw;
    }

    .video8-new-left {
        left: 75vw;
    }

    .deleteVideo {
        position: absolute;
        // position: absolute;
        position: fixed;
        width: 60px;
        height: 26px;
        line-height: 26px;
        background-color: #eee;
        left: calc(1856 / 1920 * 100vw);
        top: calc(650 / 1080 * 100vh);
        color: #fff;
        background-color: $bg-color;
        left: calc(1860 / 1920 * 100vw);
        top: calc(710 / 1080 * 100vh);
        cursor: pointer;
        z-index: 100;
    }
    .deleteVideo-new-top {
        top: calc(710 / 1080 * 100vh);
    }
}
</style>