1

guanqb

2023-02-11 cf0f0e6b4d276df0a5d91c23dad438bf2e92fa1d

1

 src/components/map/index.vue

@@ -218,15 +218,15 @@
            that.switchImg()

            // 外网
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            //         url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
            //         subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            //         format: 'image/jpeg',
            //         show: true,
            //         maximumLevel: 18
            //     })
            // )

            // 设置地图初始位置，角度等
            global.viewer.camera.setView({

 src/styles/base/index.scss

@@ -774,6 +774,35 @@
    }
}

.edit-line-box {
    .el-dialog {
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 340px;
        height: 200px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);

        .el-dialog__body {
            .el-button {
                padding: 0;
                background-color: #409eff;
                color: #fff;
                width: 60px;
                height: 30px;
                text-align: center;
            }

            &>div {
                display: flex;
                justify-content: space-around;
                margin-bottom: 10px;
            }
        }
    }
}

.select-on-tab {
    box-shadow: 0 2px 2px $menu-tab-shadow;

 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,6 +1312,14 @@
        },

        drawArrow (type) {
            if (type == 'polygon') {
                plot && plot.draw(type, overlay => {
                    if (overlay) {
                        drawArrowLayers.addOverlay(overlay)
                        plot.edit(overlay)
                    }
                })
            } else {
            arrowPlot && arrowPlot.draw(type, overlay => {
                if (overlay) {
                    let plotType = ''
@@ -1309,6 +1343,7 @@
                    })
                }
            })
            }
        },

        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) {
                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
                }

            }
        },

        // 保存活动标绘箭头
@@ -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>

 src/views/video/region.vue

@@ -639,7 +639,7 @@
                let lat = item.split(' ')[1]
                positionNewStr += lng + ',' + lat + ';'
            })
            getRegionList(1, 150, positionNewStr).then(res => {
            getRegionList(1, 15, positionNewStr).then(res => {
                let monitorData = res.data.data.list
                console.log(res.data.data.list, 123)
                this.monitoringList = res.data.data.list
@@ -1079,7 +1079,8 @@
        width: 60px;
        height: 26px;
        line-height: 26px;
        background-color: #eee;
        color: #fff;
        background-color: $bg-color;
        left: calc(1480 / 1920 * 100vw);
        top: calc(70 / 1080 * 100vh);
        cursor: pointer;