视频修改、登录页修改

guanqb

2023-01-17 83f6a241f2117fc8ca8e3921ec0bce29eb0a8f28

 src/views/activity/index.vue

@@ -324,6 +324,121 @@
            </div>
        </div>

        <div class="item video5" v-show="polylineBtnSwitch">
            <div class="select" v-show="isShowSelect.video5">
                <el-select
                    size="small"
                    v-model="monitor.type5"
                    @change="((val) => { navClick(val, 5) })"
                    placeholder="请选择"
                    ref="videoSelect5"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video
                    id="videoElement5"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video6" v-show="polylineBtnSwitch">
            <div class="select" v-show="isShowSelect.video6">
                <el-select
                    size="small"
                    v-model="monitor.type6"
                    @change="((val) => { navClick(val, 6) })"
                    placeholder="请选择"
                    ref="videoSelect6"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video
                    id="videoElement6"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video7" v-show="polylineBtnSwitch">
            <div class="select" v-show="isShowSelect.video7">
                <el-select
                    size="small"
                    v-model="monitor.type7"
                    v-show="isShowSelect.video7"
                    @change="((val) => { navClick(val, 7) })"
                    placeholder="请选择"
                    ref="videoSelect7"
                >
                    <el-option
                        v-show="isShowSelect.video7"
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video
                    id="videoElement7"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video8" v-show="polylineBtnSwitch">
            <div class="select" v-show="isShowSelect.video8">
                <el-select
                    size="small"
                    v-model="monitor.type8"
                    @change="((val) => { navClick(val, 8) })"
                    placeholder="请选择"
                    ref="videoSelect8"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video
                    id="videoElement8"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>

        <el-dialog
            :title="policeChooseTitle"
            :modal="false"
@@ -351,11 +466,13 @@
<script>
import { getSecurityList, getPoliceList, getCarList, addCarAndRange, addActivityPolice, getSecurityPoliceList, getSecurityCarList, updateActivityPolice, updateActivityCar, getServiceDictionary, getActivityType, addSecurityPlot, getSecurityPlotList, updateSecurityPlot } from '@/api/activity/index.js'
import { getSearchExtensively } from '@/api/dept/index.js'
import flvjs from 'flv.js'

let analyseLayer = null
let analysePolygon = null
let drawLayers = null
let drawArrowLayers = null
let polylineAreaLayer = null
let arrowsListLayer = null
let plot = undefined
let arrowPlot = undefined
@@ -547,6 +664,19 @@
            isHaveLine: false,
            //当前登录用户的数据
            userInfo: {},
            monitorOption: [],
            monitor: {
                type5: '',
                type6: '',
                type7: '',
                type8: '',
            },
            isShowSelect: {
                video5: true,
                video6: true,
                video7: true,
                video8: true,
            },
        }
    },
    created () {
@@ -589,6 +719,11 @@
            if (arrowsListLayer == null) {
                arrowsListLayer = new global.DC.VectorLayer('arrowsListLayer')
                global.viewer.addLayer(arrowsListLayer)
            }

            if (polylineAreaLayer == null) {
                polylineAreaLayer = new global.DC.VectorLayer('polylineAreaLayer')
                global.viewer.addLayer(polylineAreaLayer)
            }

            // 轨迹
@@ -753,6 +888,14 @@
                                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
                        }
                        this.$EventBus.$emit('layerPolylineAdd', {
                            layerName: 'newCarDrawLayers',
@@ -1034,8 +1177,17 @@
            this.dialogVisible = false
            this.currentClickIndex = ''
            analyseLayer.clear()
            arrowsListLayer.clear()
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polylineLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'newCarDrawLayers',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'newDrawLayers',
                type: 'VectorLayer'
            })
        },
@@ -1125,6 +1277,7 @@

        // 播放轨迹
        play () {
            // polylineAreaLayer.show = true
            tc.play()
            this.view('1', -20, 100)
        },
@@ -1280,7 +1433,6 @@

        updateSecurityPlot (id, position) {
            updateSecurityPlot(id, position).then(res => {
                console.log(res, 222)
                this.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch)
            })
        },
@@ -1427,7 +1579,12 @@

        this.removeAll()
        this.removeAllArrow()
        tc.clear()
        if (tc) {
            tc.clear()
        }
        if (polylineAreaLayer) {
            polylineAreaLayer.clear()
        }

        this.$parent.$parent.resize('0px')
    }
@@ -1695,7 +1852,6 @@
        right: 10px;
        width: 400px;
        padding: 10px;

        border-radius: 10px;
        color: #fff;
        background: $bg-color;
@@ -1742,13 +1898,14 @@

    .plan-control {
        position: fixed;
        top: 130px;
        top: 150px;
        right: 450px;
        width: 180px;
        padding: 10px;
        color: #fff;
        background-color: $bg-color;

        border-radius: 8px;
        z-index: 98;
        .row-box {
            width: 100%;
            line-height: 28px;
@@ -1770,9 +1927,9 @@

    .btn-box {
        position: fixed;
        top: 66px;
        bottom: calc(360 / 1080 * 100vh);
        left: 50%;
        transform: translate(-50%, 0);
        transform: translate(-40%, 0);
        min-height: 40px;
        padding: 10px 10px 0 10px;
        border-radius: 10px;
@@ -1801,9 +1958,8 @@
        position: absolute;
        position: fixed;
        z-index: 99;
        left: 50%;
        transform: translate(-50%, 0);
        top: 140px;
        left: 760px;
        top: 40px;
        width: 460px;
        height: 36px;

@@ -1884,5 +2040,45 @@
            }
        }
    }

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

        .select {
            position: absolute;
            top: 6%;
            width: 100%;
            z-index: 999;
        }

        .video {
            height: 100%;
            padding: 1%;
        }
    }

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

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

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

    .video8 {
        left: calc(1160 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }
}
</style>