视频修改、登录页修改

guanqb

2023-01-17 83f6a241f2117fc8ca8e3921ec0bce29eb0a8f28

视频修改、登录页修改

 src/styles/media/index.scss

@@ -1699,7 +1699,6 @@
                        }

                        .btn-box {
                            top: countSizeVh(66);
                            min-height: countSizeVh(40);
                            padding: countSizeVh(10) countSizeVw(10, 1920) 0 countSizeVw(10, 1920);
                            border-radius: countSizeVw(10, 1920);
@@ -1721,8 +1720,8 @@
                        }

                        .search-content {
                            // left: countSizeVw(760, 1920);
                            top: countSizeVh(120);
                            left: countSizeVw(760, 1920);
                            top: countSizeVh(100);
                            width: countSizeVw(460, 1920);
                            height: countSizeVh(36);

@@ -1770,6 +1769,21 @@
                                }
                            }
                        }

                        .plan-control {
                            top: countSizeVh(150);
                            right: countSizeVw(450, 1920);
                            width: countSizeVw(180, 1920);
                            padding: countSizeVh(10);
                            border-radius: countSizeVh(8);
                            .row-box {
                                line-height: countSizeVh(28);
                    
                                .category {
                                    width: countSizeVw(96, 1920);
                                }
                            }
                        }
                    }
                }


 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>

 src/views/house/index.vue

@@ -16,25 +16,48 @@
                <!-- <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                <button @click="searchClick" class="el-icon-search"></button>-->

                <el-popover ref="popover" placement="bottom" trigger="click" :visible-arrow="false"
                    popper-class="tree-search-popup">
                <el-popover
                    ref="popover"
                    placement="bottom"
                    trigger="click"
                    :visible-arrow="false"
                    popper-class="tree-search-popup"
                >
                    <el-input placeholder="请输入搜索条件" v-model="filterText"></el-input>

                    <el-tree style="width: 360px; height: 400px; overflow: auto;" class="select-tree-box"
                        :data="testData" :props="defaultProps" ref="popupTree" @current-change="currentChangeHandle"
                        :default-expand-all="defaultExpandAll" :accordion="accordion"
                        :highlight-current="highlightCurrent" :expand-on-click-node="true" check-strictly
                        :filter-node-method="filterNode"></el-tree>
                    <el-tree
                        style="width: 360px; height: 400px; overflow: auto;"
                        class="select-tree-box"
                        :data="testData"
                        :props="defaultProps"
                        ref="popupTree"
                        @current-change="currentChangeHandle"
                        :default-expand-all="defaultExpandAll"
                        :accordion="accordion"
                        :highlight-current="highlightCurrent"
                        :expand-on-click-node="true"
                        check-strictly
                        :filter-node-method="filterNode"
                    ></el-tree>
                </el-popover>

                <el-input slot="reference" v-model="prop" v-popover:popover :readonly="true" placeholder="请输入搜索条件"
                    style="cursor: pointer;"></el-input>
                <el-input
                    slot="reference"
                    v-model="prop"
                    v-popover:popover
                    :readonly="true"
                    placeholder="请输入搜索条件"
                    style="cursor: pointer;"
                ></el-input>
            </div>

            <div v-show="searchValBoxShow" class="search-val-box">
                <div>
                    <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
                    </div>
                    <div
                        @click="searchVlaClick(item)"
                        v-for="(item, index) in searchArray"
                        :key="index"
                    >{{ item.name }}</div>
                </div>
            </div>

@@ -46,8 +69,11 @@
                    </div>
                    <div class="housing-bg">
                        <!-- <img style="height: 100%;" :src="villageInfo.pic_url" alt /> -->
                        <el-image style=" height: 100%" :src="villageInfo.pic_url"
                            :preview-src-list="villageInfo.pic_url_list"></el-image>
                        <el-image
                            style=" height: 100%"
                            :src="villageInfo.pic_url"
                            :preview-src-list="villageInfo.pic_url_list"
                        ></el-image>
                    </div>
                    <div class="housing-introduce">
                        <div>
@@ -70,16 +96,42 @@
                </div>

                <div class="nav-tab" ref="navTabBox">
                    <div class="nav" :class="navType == 0 ? 'choosed' : ''" @click="navClick" data-type="0">基本信息</div>
                    <div class="nav" :class="navType == 1 ? 'choosed' : ''" @click="navClick" data-type="1">报警信息</div>
                    <div
                        class="nav"
                        :class="navType == 0 ? 'choosed' : ''"
                        @click="navClick"
                        data-type="0"
                    >基本信息</div>
                    <div
                        class="nav"
                        :class="navType == 1 ? 'choosed' : ''"
                        @click="navClick"
                        data-type="1"
                    >报警信息</div>
                </div>

                <div class="base-info" v-show="navType == 0">
                    <div class="sub-nav-list">
                        <div class="sub-nav" :class="{ on: subNavType == 1 }" @click="subNavType = 1">楼栋</div>
                        <div class="sub-nav" :class="{ on: subNavType == 2 }" @click="subNavType = 2">出入口</div>
                        <div class="sub-nav" :class="{ on: subNavType == 3 }" @click="subNavType = 3">停车场</div>
                        <div class="sub-nav" :class="{ on: subNavType == 4 }" @click="subNavType = 4">商业</div>
                        <div
                            class="sub-nav"
                            :class="{ on: subNavType == 1 }"
                            @click="subNavType = 1"
                        >楼栋</div>
                        <div
                            class="sub-nav"
                            :class="{ on: subNavType == 2 }"
                            @click="subNavType = 2"
                        >出入口</div>
                        <div
                            class="sub-nav"
                            :class="{ on: subNavType == 3 }"
                            @click="subNavType = 3"
                        >停车场</div>
                        <div
                            class="sub-nav"
                            :class="{ on: subNavType == 4 }"
                            @click="subNavType = 4"
                        >商业</div>
                    </div>

                    <div class="floor-content" v-show="subNavType == 1">
@@ -90,20 +142,30 @@
                            <div class="build-outBox" ref="BuildOutBox">
                                <div class="build-box" style="left: 0px;">
                                    <!-- :style="{ width: `calc(${Math.ceil(buildingList.length / 10)} * (356 / 1920) * 100vw` }" -->
                                    <div class="ridgepole-list" v-for="index of Math.ceil(buildingList.length / 10)"
                                        :key="index">
                                        <div v-for="(item, index) in buildingList.slice((index - 1) * 10, index * 10)"
                                            :key="index" @click="buildingClick(item)"
                                            :class="{ on: buildingChoosed.name == item.name }" :title="item.name">
                                    <div
                                        class="ridgepole-list"
                                        v-for="index of Math.ceil(buildingList.length / 10)"
                                        :key="index"
                                    >
                                        <div
                                            v-for="(item, index) in buildingList.slice((index - 1) * 10, index * 10)"
                                            :key="index"
                                            @click="buildingClick(item)"
                                            :class="{ on: buildingChoosed.name == item.name }"
                                            :title="item.name"
                                        >
                                            {{
                                                item.name
                                            item.name
                                            }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="nextBtn rightBtn" @click="nextBtn">
                                <i v-show="buildingList.length > 10 && nextBtnShow" class="el-icon-caret-right"></i>
                                <i
                                    v-show="buildingList.length > 10 && nextBtnShow"
                                    class="el-icon-caret-right"
                                ></i>
                            </div>
                        </div>

@@ -183,9 +245,19 @@
                            <div class="condo">
                                <div class="type">选择单元</div>
                                <div class="type-select">
                                    <el-select size="small" v-model="unitValue" placeholder="请选择" @change="chooseUnit">
                                        <el-option v-for="item in unitOptions" :key="item.value" :label="item.label"
                                            :value="item.value" class="unit-option"></el-option>
                                    <el-select
                                        size="small"
                                        v-model="unitValue"
                                        placeholder="请选择"
                                        @change="chooseUnit"
                                    >
                                        <el-option
                                            v-for="item in unitOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                            class="unit-option"
                                        ></el-option>
                                    </el-select>
                                </div>
                            </div>
@@ -299,36 +371,60 @@
                    </div>

                    <div class="come-out-content" v-show="subNavType == 2">
                        <el-table :data="comeOutData" style="width: 100%"
                        <el-table
                            :data="comeOutData"
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName" @row-click="deepDataRowClick($event, 'comeOut')">
                            <el-table-column prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            :row-class-name="tableRowClassName"
                            @row-click="deepDataRowClick($event, 'comeOut')"
                        >
                            <el-table-column
                                prop="name"
                                label="名称"
                                width="180"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            <el-table-column prop="x" label="经度" width="100"></el-table-column>
                            <el-table-column prop="y" label="纬度" width="100"></el-table-column>
                        </el-table>
                    </div>

                    <div class="park-content" v-show="subNavType == 3">
                        <el-table :data="parkingLotData" style="width: 100%"
                        <el-table
                            :data="parkingLotData"
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName" @row-click="deepDataRowClick($event, 'park')">
                            <el-table-column prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            :row-class-name="tableRowClassName"
                            @row-click="deepDataRowClick($event, 'park')"
                        >
                            <el-table-column
                                prop="name"
                                label="名称"
                                width="180"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            <el-table-column prop="x" label="经度" width="100"></el-table-column>
                            <el-table-column prop="y" label="纬度" width="100"></el-table-column>
                        </el-table>
                    </div>

                    <div class="business-content" v-show="subNavType == 4">
                        <el-table :data="businessData" style="width: 100%"
                        <el-table
                            :data="businessData"
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName" @row-click="deepDataRowClick($event, 'business')">
                            <el-table-column prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            :row-class-name="tableRowClassName"
                            @row-click="deepDataRowClick($event, 'business')"
                        >
                            <el-table-column
                                prop="name"
                                label="名称"
                                width="180"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            <el-table-column prop="x" label="经度" width="100"></el-table-column>
                            <el-table-column prop="y" label="纬度" width="100"></el-table-column>
                        </el-table>
@@ -336,35 +432,62 @@
                </div>

                <div class="police-info" v-if="navType == 1" ref="policeTableBox">
                    <el-table :data="callPoliceData" style="width: 100%" :height="currentTableHeight"
                    <el-table
                        :data="callPoliceData"
                        style="width: 100%"
                        :height="currentTableHeight"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName" @row-click="clickData">
                        <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="接警单位"
                            min-width="34%"></el-table-column>
                        :row-class-name="tableRowClassName"
                        @row-click="clickData"
                    >
                        <el-table-column
                            prop="JJDWMC"
                            :show-overflow-tooltip="true"
                            label="接警单位"
                            min-width="34%"
                        ></el-table-column>
                        <el-table-column label="报警时间" min-width="26%">
                            <template slot-scope="scope">
                                <span>{{ scope.row.BJSJ.substring(0, 10) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="JJYXM" :show-overflow-tooltip="true" label="接警员"
                            min-width="20%"></el-table-column>
                        <el-table-column prop="BJRXM" :show-overflow-tooltip="true" label="报警人"
                            min-width="20%"></el-table-column>
                        <el-table-column
                            prop="JJYXM"
                            :show-overflow-tooltip="true"
                            label="接警员"
                            min-width="20%"
                        ></el-table-column>
                        <el-table-column
                            prop="BJRXM"
                            :show-overflow-tooltip="true"
                            label="报警人"
                            min-width="20%"
                        ></el-table-column>
                    </el-table>

                    <div class="pages" ref="ElPagination">
                        <el-pagination background layout="prev, pager, next" :page-size="callPolicePage.pageSize"
                            :page-count="callPolicePage.count" :current-page="callPolicePage.currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :page-size="callPolicePage.pageSize"
                            :page-count="callPolicePage.count"
                            :current-page="callPolicePage.currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- <transition name="special-animal"></transition>-->
        <div class="search-content">
            <input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus"
                type="text" placeholder="请输入搜索条件" />
            <input
                v-model="searchExtensivelyValue"
                @input="searchExtensivelyChange"
                @focus="searchExtensivelyFocus"
                type="text"
                placeholder="请输入搜索条件"
            />
            <div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
                <img src="../../../public/img/icon/clear.png" alt />
            </div>
@@ -372,13 +495,23 @@
        </div>
        <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
            <div>
                <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray"
                    :key="index">{{ item.name }}</div>
                <div
                    @click="searchExtensivelyVlaClick(item)"
                    v-for="(item, index) in searchExtensivelyArray"
                    :key="index"
                >{{ item.name }}</div>
            </div>
        </div>

        <el-dialog title="报警信息" :modal="true" :visible.sync="policeSituationVisible" :append-to-body="true"
            :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box">
        <el-dialog
            title="报警信息"
            :modal="true"
            :visible.sync="policeSituationVisible"
            :append-to-body="true"
            :before-close="policeSituationBeforeClose"
            :close-on-click-modal="true"
            class="policeSituation-details-box"
        >
            <div class="box">
                <div class="item">
                    <div>接警单位编号:</div>
@@ -439,19 +572,34 @@
            </div>
        </el-dialog>

        <el-dialog :title="residentDetailsTitle" :modal="false" :visible.sync="residentDetailsShow"
            :before-close="residentDetailsClose" :close-on-click-modal="true" class="resident-details-box" width="30%">
            <el-table :data="houseDate"
        <el-dialog
            :title="residentDetailsTitle"
            :modal="false"
            :visible.sync="residentDetailsShow"
            :before-close="residentDetailsClose"
            :close-on-click-modal="true"
            class="resident-details-box"
            width="30%"
        >
            <el-table
                :data="houseDate"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
            >
                <el-table-column prop="realName" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
                <el-table-column prop="cardNo" label="身份证号"></el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog :title="keyPersonTitle" :modal="false" :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box">
        <el-dialog
            :title="keyPersonTitle"
            :modal="false"
            :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose"
            :close-on-click-modal="true"
            class="keyPerson-details-box"
        >
            <div class="header">
                <div>
                    姓名：
@@ -462,11 +610,18 @@
                    <input type="text" v-model="callPhone" placeholder="请输入联系电话" />
                </div>
                <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
                <el-button
                    type="primary"
                    icon="el-icon-delete"
                    @click="clearPeopleDetailSearchValue"
                >清空</el-button>
            </div>
            <el-table :data="personDetailArr" style="width: 100%"
            <el-table
                :data="personDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column label="序号" type="index" width="50" align="center">
                    <template slot-scope="scope">
                        <span>{{(peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index + 1}}</span>
@@ -481,9 +636,14 @@
                <el-table-column prop="areaName" label="所属责任区"></el-table-column>
            </el-table>
            <div class="pages" ref="tablePagination">
                <el-pagination background layout="prev, pager, next" :page-size="peoplePage.pageSize"
                    :total="peoplePage.total" :current-page="peoplePage.currentPage"
                    @current-change="peopleHandleCurrentChange"></el-pagination>
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="peoplePage.pageSize"
                    :total="peoplePage.total"
                    :current-page="peoplePage.currentPage"
                    @current-change="peopleHandleCurrentChange"
                ></el-pagination>
            </div>
        </el-dialog>
    </div>
@@ -649,7 +809,7 @@
                let villageData = res.data.result[0]
                this.villageInfo.name = villageData.name
                this.villageInfo.address = villageData.address
                this.villageInfo.type_name = villageData.type_name
                this.villageInfo.type_name = villageData.type_name.split('|')[0]
                this.villageInfo.pic_url = 'http://192.168.0.112/' + villageData.pic_url.split(';')[0]
                this.villageInfo.pic_url_list = []
                villageData.pic_url.split(';').forEach(item => {
@@ -678,8 +838,8 @@
                })
                this.buildingClick(this.buildingList[0])
                console.log('buildingList', this.buildingList)
                // this.callPolicePage.currentPage = 1
                // this.getAlarmList()
                this.callPolicePage.currentPage = 1
                this.getAlarmList()
            })
        },

@@ -977,7 +1137,7 @@

        // 获取历史接警记录
        getAlarmList () {
            getAlarmList({ current: this.callPolicePage.currentPage, size: this.pagesize, sfdz: this.villageInfo.name }).then(res => {
            getAlarmList({ current: this.callPolicePage.currentPage, size: this.callPolicePage.pagesize, sfdz: this.villageInfo.name }).then(res => {
                this.callPolicePage.count = res.data.data.pages

                this.callPoliceData = []
@@ -997,7 +1157,7 @@
        // 分页选择事件
        handleCurrentChange (currentPage) {
            this.callPolicePage.currentPage = currentPage
            // this.getAlarmList()
            this.getAlarmList()
        },

        peopleHandleCurrentChange (currentPage) {
@@ -1158,7 +1318,7 @@
            border-radius: 10px;
            overflow: hidden;

            &>div {
            & > div {
                height: 100%;
                overflow-y: auto;

@@ -1193,9 +1353,11 @@
                        left: 10px;
                        right: 10px;
                        bottom: 4px;
                        background: linear-gradient(135deg,
                                rgb(33 150 243 / 74%),
                                rgb(254 254 254 / 0%));
                        background: linear-gradient(
                            135deg,
                            rgb(33 150 243 / 74%),
                            rgb(254 254 254 / 0%)
                        );
                        z-index: -1;
                    }
                }
@@ -1206,7 +1368,7 @@
                }

                .housing-introduce {
                    &>div {
                    & > div {
                        padding: 0 10px;
                        display: flex;

@@ -1269,7 +1431,7 @@
                    }
                }

                &>.floor-content {
                & > .floor-content {
                    .build-info {
                        display: flex;
                        position: relative;
@@ -1318,7 +1480,7 @@
                                    flex-wrap: wrap;
                                    width: 356px;

                                    &>div {
                                    & > div {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
@@ -1352,7 +1514,7 @@
                        .content {
                            display: flex;

                            &>div {
                            & > div {
                                height: 26px;
                                line-height: 26px;
                                flex: 1;
@@ -1360,11 +1522,11 @@
                                justify-content: center;
                                border-right: 1px solid #50555f;

                                &>div {
                                & > div {
                                    cursor: pointer;
                                }

                                &>div:last-child {
                                & > div:last-child {
                                    margin-left: 14px;
                                    font-size: 18px;
                                    font-weight: bold;
@@ -1372,11 +1534,11 @@
                                }
                            }

                            &>div:first-child {
                            & > div:first-child {
                                width: 30%;
                            }

                            &>div:last-child {
                            & > div:last-child {
                                border: none;
                            }
                        }
@@ -1401,10 +1563,10 @@
                                display: flex;
                                justify-content: space-around;

                                &>div {
                                & > div {
                                    flex: 1;

                                    &>div:first-child {
                                    & > div:first-child {
                                        height: 30px;
                                        line-height: 30px;
                                        font-size: 18px;
@@ -1412,7 +1574,7 @@
                                        color: #499d99;
                                    }

                                    &>div:last-child {
                                    & > div:last-child {
                                        height: 26px;
                                        line-height: 26px;
                                    }
@@ -1427,8 +1589,8 @@
                            justify-content: space-around;
                            background: rgba(8, 56, 185, 0.5);

                            &>div {
                                &>div:first-child {
                            & > div {
                                & > div:first-child {
                                    height: 30px;
                                    line-height: 30px;
                                    font-size: 18px;
@@ -1466,7 +1628,6 @@
                    }

                    .house-element-info {

                        .condo,
                        .legend {
                            display: flex;
@@ -1489,12 +1650,12 @@
                                display: flex;
                                flex: 1;

                                &>div {
                                & > div {
                                    flex: 1;
                                    display: flex;
                                    align-items: center;

                                    &>span {
                                    & > span {
                                        margin: 0 10px;
                                        width: 14px;
                                        height: 8px;
@@ -1561,7 +1722,7 @@
                                    left: 0;
                                    transition: all 1s;

                                    &>div {
                                    & > div {
                                        margin: 0 4px;
                                        display: flex;
                                        justify-content: center;
@@ -1574,7 +1735,7 @@
                                        border: 0.0925925926vh solid #fff;
                                    }

                                    &>.on {
                                    & > .on {
                                        border: 1px solid orange;
                                        color: orange;
                                    }
@@ -1586,7 +1747,7 @@
                            margin-top: 14px;
                            height: 220px;

                            &>div {
                            & > div {
                                margin: 8px;
                                height: 36px;
                                line-height: 36px;
@@ -1600,7 +1761,7 @@
                                    flex: 1;
                                    display: flex;

                                    &>div {
                                    & > div {
                                        margin: 0 4px;
                                        position: relative;
                                        width: 68px;
@@ -1624,29 +1785,33 @@
                                        }

                                        .focus {
                                            top: calc((100% - 18px) / 4 * 2 + 6px);
                                            top: calc(
                                                (100% - 18px) / 4 * 2 + 6px
                                            );
                                            background: rgb(255, 121, 108);
                                        }

                                        .warning {
                                            top: calc((100% - 18px) / 4 * 3 + 12px);
                                            top: calc(
                                                (100% - 18px) / 4 * 3 + 12px
                                            );
                                            background: rgb(254, 172, 4);
                                        }
                                    }

                                    &>.chuzu {
                                    & > .chuzu {
                                        border: 1px solid #3a8b3a;
                                    }

                                    &>.zizhu {
                                    & > .zizhu {
                                        border: 1px solid #2c77bb;
                                    }

                                    &>.kongzhi {
                                    & > .kongzhi {
                                        border: 1px solid #5c6169;
                                    }

                                    &>.shangye {
                                    & > .shangye {
                                        border: 1px solid #cc9456;
                                    }
                                }
@@ -1767,7 +1932,7 @@
        border-radius: 10px;
        overflow: hidden;

        &>div {
        & > div {
            height: 100%;
            overflow-y: auto;

@@ -1797,9 +1962,11 @@
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: linear-gradient(135deg,
            rgba(252, 252, 252, 0.108),
            rgb(254, 254, 254));
    background: linear-gradient(
        135deg,
        rgba(252, 252, 252, 0.108),
        rgb(254, 254, 254)
    );
    animation: prog 3s ease infinite;
}


 src/views/login/index.vue

@@ -30,17 +30,26 @@
                </el-form>
        </div>-->
        <!-- </div> -->
        <div class="loginTitle">社区警务平台</div>
        <div class="loginTitle">信州公安VR指挥平台</div>
        <div class="layui-form login_content">
            <p>用户登录</p>
            <el-form :model="loginForm" ref="formName" status-icon :rules="rules">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="请输入您的用户名"
                        autocomplete="off"></el-input>
                    <el-input
                        v-model="loginForm.username"
                        prefix-icon="el-icon-user"
                        placeholder="请输入您的用户名"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock"
                        placeholder="请输入您密码" autocomplete="off"></el-input>
                    <el-input
                        type="password"
                        v-model="loginForm.password"
                        prefix-icon="el-icon-lock"
                        placeholder="请输入您密码"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <!-- <el-button type="primary" @click.enter="onLogin()">登&nbsp;录</el-button> -->
@@ -143,7 +152,7 @@

<style scoped lang="scss">
.login-btn {
    background-color: #409EFF;
    background-color: #409eff;
    border-radius: 2px;
    height: 30px;
    cursor: pointer;
@@ -152,10 +161,8 @@
}

.login-btn:hover {
    background-color: #66B1FF;
    background-color: #66b1ff;
}



.auth-page {
    position: fixed;

 src/views/video/list.vue

@@ -14,7 +14,12 @@
        <div v-show="boxShow" class="container-content">
            <div class="search-box">
                设备名称：
                <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                <input
                    v-model="searchValue"
                    @input="searchChange"
                    type="text"
                    placeholder="请输入搜索条件"
                />
                <button @click="searchClick" class="el-icon-search"></button>
            </div>

@@ -32,39 +37,73 @@
                <button @click="changeRange" class="btn">确定</button>
            </div>
            <div v-show="searchValBoxShow" class="search-val-box">
                <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
                </div>
                <div
                    @click="searchVlaClick(item)"
                    v-for="(item, index) in searchArray"
                    :key="index"
                >{{ item.name }}</div>
            </div>

            <div class="list-show">
                <div class="car-list">
                    <div class="list-box">
                        <el-table :data="monitoringList" style="width: 100%"
                        <el-table
                            :data="monitoringList"
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                            <el-table-column :show-overflow-tooltip="true" prop="name" label="设备名称"
                                min-width="35%"></el-table-column>
                            <el-table-column :show-overflow-tooltip="true" prop="pTZTypeText" label="设备类型"
                                min-width="35%"></el-table-column>
                            <el-table-column :show-overflow-tooltip="true" prop="status" label="状态" min-width="30%">
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            @cell-click="rowClick"
                        >
                            <el-table-column
                                :show-overflow-tooltip="true"
                                prop="name"
                                label="设备名称"
                                min-width="35%"
                            ></el-table-column>
                            <el-table-column
                                :show-overflow-tooltip="true"
                                prop="pTZTypeText"
                                label="设备类型"
                                min-width="35%"
                            ></el-table-column>
                            <el-table-column
                                :show-overflow-tooltip="true"
                                prop="status"
                                label="状态"
                                min-width="30%"
                            >
                                <template slot-scope="scope">
                                    <div class="state-box" :class="{ online: scope.row.status == '1' }"></div>
                                    <div
                                        class="state-box"
                                        :class="{ online: scope.row.status == '1' }"
                                    ></div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="pages">
                        <el-pagination background layout="prev, pager, next" :page-size="pagesize"
                            :page-count="pagesCount" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :page-size="pagesize"
                            :page-count="pagesCount"
                            :current-page="currentPage"
                            pager-count="5"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <div class="search-content">
            <input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus"
                type="text" placeholder="请输入搜索条件" />
            <input
                v-model="searchExtensivelyValue"
                @input="searchExtensivelyChange"
                @focus="searchExtensivelyFocus"
                type="text"
                placeholder="请输入搜索条件"
            />
            <div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
                <img src="../../../public/img/icon/clear.png" alt />
            </div>
@@ -72,17 +111,39 @@
        </div>
        <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
            <div>
                <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray"
                    :key="index">{{ item.name }}</div>
                <div
                    @click="searchExtensivelyVlaClick(item)"
                    v-for="(item, index) in searchExtensivelyArray"
                    :key="index"
                >{{ item.name }}</div>
            </div>
        </div>

        <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video id="videoElement" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
        <el-dialog
            :title="dialogTitle"
            :modal="false"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                id="videoElement"
                autoplay
                controls
                width="100%"
                height="100%"
                style="object-fit: fill"
            ></video>
        </el-dialog>
        <el-dialog :title="drawDialogTitle" :modal="false" :visible.sync="drawDialogVisible"
            :before-close="drawDialogBeforeClose" :close-on-click-modal="true" class="video-draw-box">
        <el-dialog
            :title="drawDialogTitle"
            :modal="false"
            :visible.sync="drawDialogVisible"
            :before-close="drawDialogBeforeClose"
            :close-on-click-modal="true"
            class="video-draw-box"
        >
            <input type="text" v-model="drawName" placeholder="请输入绘制线或面的名称" />
            <button @click="saveDrawInfo">保存</button>
        </el-dialog>
@@ -614,7 +675,7 @@
            border-radius: 10px;
            overflow-y: auto;

            &>div {
            & > div {
                height: 100%;
                padding: 0 10px;
                line-height: 36px;
@@ -688,7 +749,7 @@
        .list-show {
            flex: 1;

            &>div {
            & > div {
                height: 100%;
                display: flex;
                flex-direction: column;
@@ -798,7 +859,7 @@
        border-radius: 10px;
        overflow: hidden;

        &>div {
        & > div {
            height: 100%;
            overflow-y: auto;