格式化方案更换

shuishen

2023-02-11 f299440f2eeaa07e77dd3ed4e22678e6e9af95b3

格式化方案更换

 src/App.vue

@@ -2,17 +2,20 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 15:58:10
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-01-02 11:43:05
 * @LastEditTime: 2023-02-11 15:24:58
 * @FilePath: \srs-police-affairs\src\App.vue
 * @Description: app.vue
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->
<template>
    <div id="app" :style="{
    <div
        id="app"
        :style="{
        width: (useSceen == true ? currentWidth + 'px' : '100%'),
        height: (useSceen == true ? currentHeight + 'px' : '100%')
    }">
    }"
    >
        <router-view></router-view>
    </div>
</template>

 src/components/map/index.vue

@@ -15,20 +15,37 @@
        <!-- 全屏控制按钮 -->
        <div class="screen-full-btn">
            <el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark">
                <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
                <i
                    class="fa fa-compress"
                    style="vertical-align: middle; cursor: pointer"
                    @click="fullscreenchange"
                ></i>
            </el-tooltip>
            <el-tooltip v-if="!isFullscreen" content="全屏" placement="bottom" effect="dark">
                <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
                <i
                    class="fa fa-expand"
                    style="vertical-align: middle; cursor: pointer"
                    @click="fullscreenchange"
                ></i>
            </el-tooltip>
        </div>
        <!-- 切换矢量图按钮 -->
        <div class="image-switch-icon-btn" title="切换影像" @mouseover="showImgBtn = true" @mouseleave="showImgBtn = false">
        <div
            class="image-switch-icon-btn"
            title="切换影像"
            @mouseover="showImgBtn = true"
            @mouseleave="showImgBtn = false"
        >
            <div class="icon-box">
                <img src="/img/base_map.png" alt />
            </div>

            <div class="image-switch-img-btn" v-show="showImgBtn" @mouseover="showImgBtn = true"
                @mouseleave="showImgBtn = false">
            <div
                class="image-switch-img-btn"
                v-show="showImgBtn"
                @mouseover="showImgBtn = true"
                @mouseleave="showImgBtn = false"
            >
                <div class="img" @click="switchImg">
                    <span :class="{ on: imgtype == 0 }">影像</span>
                </div>

 src/views/home/components/bottomContainer.vue

@@ -14,34 +14,81 @@
            <div class="header">
                <div class="bottom-title">警情动态</div>
                <div class="timeTab" v-show="historytype">
                    <span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span>
                    <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span>
                    <span class="beforetime" :class="{ choosed: timetype == 2 }" @click="timeTabClick(2)">自定义</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: timetype == 0 }"
                        @click="timeTabClick(0)"
                    >周</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: timetype == 1 }"
                        @click="timeTabClick(1)"
                    >月</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: timetype == 2 }"
                        @click="timeTabClick(2)"
                    >自定义</span>
                </div>

                <div class="timeSeclect" v-show="historytype">
                    <el-date-picker v-show="timetype == 0" v-model="currentWeekTime" @change="datePickerChange"
                        type="week" align="center" format="yyyy 第 WW 周" placeholder="选择周"
                        popper-class="date-week-style"></el-date-picker>
                    <el-date-picker
                        v-show="timetype == 0"
                        v-model="currentWeekTime"
                        @change="datePickerChange"
                        type="week"
                        align="center"
                        format="yyyy 第 WW 周"
                        placeholder="选择周"
                        popper-class="date-week-style"
                    ></el-date-picker>

                    <el-date-picker v-show="timetype == 1" v-model="currentMonthTime" @change="datePickerChange"
                        type="month" align="center" placeholder="选择月" popper-class="date-mouth-style"></el-date-picker>
                    <el-date-picker
                        v-show="timetype == 1"
                        v-model="currentMonthTime"
                        @change="datePickerChange"
                        type="month"
                        align="center"
                        placeholder="选择月"
                        popper-class="date-mouth-style"
                    ></el-date-picker>

                    <el-date-picker v-show="timetype == 2" :clearable="false" v-model="currentTime" type="daterange"
                        align="center" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        @change="datePickerChange" :picker-options="pickerOptions"
                        popper-class="date-day-style"></el-date-picker>
                    <el-date-picker
                        v-show="timetype == 2"
                        :clearable="false"
                        v-model="currentTime"
                        type="daterange"
                        align="center"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="datePickerChange"
                        :picker-options="pickerOptions"
                        popper-class="date-day-style"
                    ></el-date-picker>
                </div>

                <div class="history-tab">
                    <span class="beforetime" :class="{ choosed: historytype == 0 }"
                        @click="historyTabClick(0)">实时</span>
                    <span class="beforetime" :class="{ choosed: historytype == 1 }"
                        @click="historyTabClick(1)">历史</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: historytype == 0 }"
                        @click="historyTabClick(0)"
                    >实时</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: historytype == 1 }"
                        @click="historyTabClick(1)"
                    >历史</span>
                </div>
            </div>

            <div class="body" v-if="historytype == 0" ref="tableBox" @click="handleSelectClick($event)">
            <div
                class="body"
                v-if="historytype == 0"
                ref="tableBox"
                @click="handleSelectClick($event)"
            >
                <ul class="title-header">
                    <li>
                        <span class="num">序号</span>
@@ -57,16 +104,27 @@
                    </li>
                </ul>

                <vue-seamless-scroll v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr"
                    class="warp" :class-option="classOption">
                <vue-seamless-scroll
                    v-if="policeSituationRealtimeArr.length > 0"
                    :data="policeSituationRealtimeArr"
                    class="warp"
                    :class-option="classOption"
                >
                    <ul class="item">
                        <li v-for="(item, index) in policeSituationRealtimeArr" :key="index"
                            :data-obj="JSON.stringify(item)" class="row">
                        <li
                            v-for="(item, index) in policeSituationRealtimeArr"
                            :key="index"
                            :data-obj="JSON.stringify(item)"
                            class="row"
                        >
                            <span class="num" v-text="item.index"></span>
                            <span class="receiving-alarm-unit" v-text="item.JJDWMC"></span>
                            <span class="receiving-alarm-people" v-text="item.JJYXM"></span>
                            <span class="receiving-alarm-time" :title="item.BJSJ"
                                v-text="item.BJSJ.substring(0, 10)"></span>
                            <span
                                class="receiving-alarm-time"
                                :title="item.BJSJ"
                                v-text="item.BJSJ.substring(0, 10)"
                            ></span>
                            <span class="call-people" v-text="item.BJRXM"></span>
                            <span class="call-phone" v-text="item.LXDH"></span>
                            <span class="call-police-content" :title="item.BJNR" v-text="item.BJNR"></span>
@@ -81,67 +139,133 @@
            </div>

            <div class="current-table-body" ref="ElTableBox" v-if="historytype == 1">
                <el-table :data="policeSituationHistoryArr" :key="currentPage" style="width: 100%"
                <el-table
                    :data="policeSituationHistoryArr"
                    :key="currentPage"
                    style="width: 100%"
                    :height="currentTableHeight"
                    :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="index" label="序号"
                        min-width="6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="JJDWMC" label="接警单位"
                        min-width="12.6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="JJYXM" label="接警员"
                        min-width="7.6%"></el-table-column>
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    @cell-click="rowClick"
                >
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="index"
                        label="序号"
                        min-width="6%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="JJDWMC"
                        label="接警单位"
                        min-width="12.6%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="JJYXM"
                        label="接警员"
                        min-width="7.6%"
                    ></el-table-column>
                    <el-table-column label="报警时间" min-width="9.6%">
                        <template slot-scope="scope">
                            <span>{{ scope.row.BJSJ.substring(0, 10) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BJRXM" label="报警人"
                        min-width="7.6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="LXDH" label="联系电话"
                        min-width="10%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BJNR" label="报警内容"
                        min-width="12%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="SFDZ" label="事发地址"
                        min-width="12%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BJLX" label="报警类型"
                        min-width="8%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="MEMO" label="备注"
                        min-width="12%"></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="BJRXM"
                        label="报警人"
                        min-width="7.6%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="LXDH"
                        label="联系电话"
                        min-width="10%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="BJNR"
                        label="报警内容"
                        min-width="12%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="SFDZ"
                        label="事发地址"
                        min-width="12%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="BJLX"
                        label="报警类型"
                        min-width="8%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="MEMO"
                        label="备注"
                        min-width="12%"
                    ></el-table-column>
                </el-table>

                <div class="pages" ref="ElPagination" v-if="policeSituationHistoryArr.length > 0">
                    <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"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                </div>
            </div>
        </div>

        <svg class="border-svg">
            <defs>
                <path id="bottom-box-path" d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
                <path
                    id="bottom-box-path"
                    d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
    c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25
    c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10
    c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" fill="transparent" />
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
                    fill="transparent"
                />
                <radialGradient id="border-box-gradient" cx="50%" cy="50%" r="50%">
                    <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                    <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                </radialGradient>
                <mask id="border-box-mask">
                    <circle cx="0" cy="0" r="150" fill="url(#border-box-gradient)">
                        <animateMotion dur="8s" path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
                        <animateMotion
                            dur="8s"
                            path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
    c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25
    c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10
    c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" rotate="auto" repeatCount="indefinite" />
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
                            rotate="auto"
                            repeatCount="indefinite"
                        />
                    </circle>
                </mask>
            </defs>

            <use stroke-width="2" xlink:href="#bottom-box-path" mask="url(#border-box-mask)" stroke="#4fd2dd">
                <animate attributeName="stroke-dasharray" from="0, 3220" to="3220, 0" dur="8s"
                    repeatCount="indefinite" />
            <use
                stroke-width="2"
                xlink:href="#bottom-box-path"
                mask="url(#border-box-mask)"
                stroke="#4fd2dd"
            >
                <animate
                    attributeName="stroke-dasharray"
                    from="0, 3220"
                    to="3220, 0"
                    dur="8s"
                    repeatCount="indefinite"
                />
            </use>
        </svg>
    </div>

 src/views/home/components/leftContainer.vue

@@ -13,19 +13,27 @@
                    </div>-->
                </div>
                <div class="sub-tab" v-show="peopletype == 0">
                    <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabType == 0 }"
                        @click="personTabClick(0)"
                    >
                        <div class="tab-title-small">户籍人口:</div>
                        <div class="tab-title-small">
                            {{
                                personAll.total ? personAll.total : 0
                            personAll.total ? personAll.total : 0
                            }}人
                        </div>
                    </div>
                    <div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabType == 1 }"
                        @click="personTabClick(1)"
                    >
                        <div class="tab-title-small">重点人员:</div>
                        <div class="tab-title-small">
                            {{
                                personAll.emphasisNum ? personAll.emphasisNum : 0
                            personAll.emphasisNum ? personAll.emphasisNum : 0
                            }}人
                        </div>
                    </div>
@@ -35,41 +43,68 @@
                    </div>-->
                </div>
                <div id="PersonEcharts" class="echarts-box"></div>
                <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack"
                    @click="backBegin"></div>
                <div
                    class="back"
                    title="返回上一级"
                    v-show="dataDeep == 2 && peopletype == 0 && showBack"
                    @click="backBegin"
                ></div>
            </div>

            <svg class="border-svg">
                <defs>
                    <path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    <path
                        id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                        d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                    c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                    c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                    c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                    c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" fill="transparent" />
                    <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%"
                        r="50%">
                    c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                        fill="transparent"
                    />
                    <radialGradient
                        id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c"
                        cx="50%"
                        cy="50%"
                        r="50%"
                    >
                        <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                        <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                    </radialGradient>
                    <mask id="border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c">
                        <circle cx="0" cy="0" r="150"
                            fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)">
                            <animateMotion dur="8s"
                        <circle
                            cx="0"
                            cy="0"
                            r="150"
                            fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)"
                        >
                            <animateMotion
                                dur="8s"
                                path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                        c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                        c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                        c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                        c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                rotate="auto" repeatCount="indefinite" />
                                rotate="auto"
                                repeatCount="indefinite"
                            />
                        </circle>
                    </mask>
                </defs>

                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                </use>
            </svg>
        </div>
@@ -77,11 +112,19 @@
            <div class="box">
                <div class="title">现有住宅</div>
                <div class="sub-tab">
                    <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeTwo == 0 }"
                        @click="houseTabClick(0)"
                    >
                        <div class="tab-title-small">实有楼栋:</div>
                        <div class="tab-title-small">{{ realHouseNum?realHouseNum: 0 }}栋</div>
                    </div>
                    <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeTwo == 1 }"
                        @click="houseTabClick(1)"
                    >
                        <div class="tab-title-small">关注场所:</div>
                        <div class="tab-title-small">{{ keyPlaceNum?keyPlaceNum: 0 }}栋</div>
                    </div>
@@ -90,10 +133,19 @@
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                </use>
            </svg>
        </div>
@@ -101,11 +153,19 @@
            <div class="box">
                <div class="title">现有地</div>
                <div class="sub-tab" v-show="isAllPoliceStation">
                    <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeThree == 0 }"
                        @click="landTabClick(0)"
                    >
                        <div class="tab-title-small">小区:</div>
                        <div class="tab-title-small">{{ villageNum?villageNum: 0 }}个</div>
                    </div>
                    <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeThree == 1 }"
                        @click="landTabClick(1)"
                    >
                        <div class="tab-title-small">责任区:</div>
                        <div class="tab-title-small">{{ areaNum?areaNum: 0 }}个</div>
                    </div>
@@ -121,10 +181,19 @@
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                </use>
            </svg>
        </div>
@@ -1080,7 +1149,7 @@
                color: #fff;
            }

            &>div:nth-of-type(2) {
            & > div:nth-of-type(2) {
                font-size: 14px;
            }
        }
@@ -1108,7 +1177,7 @@
                align-items: center;
                justify-content: center;

                &>div {
                & > div {
                    height: 22px;
                    line-height: 22px;
                    white-space: nowrap;

 src/views/home/components/rightContainer.vue

@@ -6,10 +6,15 @@
                    <div>值班信息(当日)</div>
                </div>
                <div class="table-box">
                    <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%"
                    <el-table
                        size="small"
                        :height="tableHeight"
                        :data="schedulingList"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName">
                        :row-class-name="tableRowClassName"
                    >
                        <el-table-column prop="station" label="岗位"></el-table-column>
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="contact" label="联系方式"></el-table-column>
@@ -18,10 +23,19 @@
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                </use>
            </svg>
        </div>
@@ -31,19 +45,37 @@
                <div class="title">
                    案件统计
                    <div class="timer">
                        <el-date-picker :clearable="false" v-model="eventTime" type="daterange" align="right"
                            unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            @change="caseTimeChange" :picker-options="pickerOptions"></el-date-picker>
                        <el-date-picker
                            :clearable="false"
                            v-model="eventTime"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="caseTimeChange"
                            :picker-options="pickerOptions"
                        ></el-date-picker>
                    </div>
                </div>
                <div id="EventChangeEcharts" class="echarts-box"></div>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                </use>
            </svg>
        </div>
@@ -81,18 +113,33 @@
                <div class="title">
                    <div>现有设备</div>
                    <div class="title-tab">
                        <span :class="{ choosed: linetype == 0 }" @click="initEquipmentEcharts(0)">设备种类</span>/
                        <span :class="{ choosed: linetype == 1 }" @click="initEquipmentEcharts(1)">设备状态</span>
                        <span
                            :class="{ choosed: linetype == 0 }"
                            @click="initEquipmentEcharts(0)"
                        >设备种类</span>/
                        <span
                            :class="{ choosed: linetype == 1 }"
                            @click="initEquipmentEcharts(1)"
                        >设备状态</span>
                    </div>
                </div>
                <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                </use>
            </svg>
        </div>
@@ -786,7 +833,7 @@
                background: $sub-tab-bg-color;
                cursor: pointer;

                &>div {
                & > div {
                    height: 26px;
                    line-height: 26px;
                }

 src/views/home/index.vue

@@ -11,17 +11,29 @@

<template>
    <div class="home-page container">
        <left-container class="left-container" @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail" ref="leftContainer"></left-container>
        <left-container
            class="left-container"
            @showpeopledetail="showpeopledetail"
            @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail"
            ref="leftContainer"
        ></left-container>

        <right-container class="right-container" @showequimentdetail="showequimentdetail"
            @selectPoliceChangeEventData="selectPoliceChangeEventData" @changeActivityType="changeActivityType"
            ref="rightContainer"></right-container>
        <right-container
            class="right-container"
            @showequimentdetail="showequimentdetail"
            @selectPoliceChangeEventData="selectPoliceChangeEventData"
            @changeActivityType="changeActivityType"
            ref="rightContainer"
        ></right-container>

        <bottom-container class="bottom-container" ref="bottomContainer"
        <bottom-container
            class="bottom-container"
            ref="bottomContainer"
            @changePoliceSituationHistoryType="changePoliceSituationHistoryType"
            @policeSituationChange="policeSituationChange"
            @policeSituationSiteClick="policeSituationSiteClick"></bottom-container>
            @policeSituationSiteClick="policeSituationSiteClick"
        ></bottom-container>

        <div class="center-container">
            <div class="layers-control-btn house">
@@ -35,7 +47,7 @@
            </div>
            <!-- <div class="layers-control-btn moitor">
                <el-checkbox v-model="monitoringLayerShow" @change="monitoringChange">监控</el-checkbox>
            </div> -->
            </div>-->
            <!-- <div class="layers-control-btn panorama">
                <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
            </div>-->
@@ -45,24 +57,52 @@
        </div>

        <div ref="RegionSelect" style="left: 0;" class="region-select">
            <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue"
                :options="policeStationOptions" :optionsName="'name'" :selectAllClass="selectAllClass"></map-select>
            <map-select
                class="map-select"
                @selectCheck="policeStationSelect"
                :checkValue="policeStationCheckValue"
                :options="policeStationOptions"
                :optionsName="'name'"
                :selectAllClass="selectAllClass"
            ></map-select>

            <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions"
                :optionsName="'name'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="areaSelect"
                :checkValue="areaCheckValue"
                :options="areaOptions"
                :optionsName="'name'"
            ></map-select>

            <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue"
                :options="housingOptions" :optionsName="'name'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="housingSelect"
                :checkValue="housingCheckValue"
                :options="housingOptions"
                :optionsName="'name'"
            ></map-select>
        </div>

        <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose" :close-on-click-modal="true" class="panorama-details-box">
        <el-dialog
            :title="panoramaTitle"
            :modal="true"
            :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose"
            :close-on-click-modal="true"
            class="panorama-details-box"
        >
            <!-- <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0"></iframe>-->
            <iframe :src="panoramaVrUrl" style="width: 100%; height: 100%;" frameborder="0" />
        </el-dialog>

        <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose"
            :close-on-click-modal="true" class="phone-details-box">
        <el-dialog
            :title="phoneTitle"
            :modal="true"
            :visible.sync="phoneVisible"
            :before-close="phoneBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
        >
            <div class="item">
                <div>责任人：</div>
                <div>{{ phoneDetails.person }}</div>
@@ -82,8 +122,14 @@
        </el-dialog>

        <!-- 户籍人口 -->
        <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="personInfoClose"
            :close-on-click-modal="true" class="area-details-box">
        <el-dialog
            :title="peopleTitle"
            :modal="true"
            :visible.sync="peopleVisible"
            :before-close="personInfoClose"
            :close-on-click-modal="true"
            class="area-details-box"
        >
            <div class="header">
                <div>
                    人员名称：
@@ -94,12 +140,19 @@
                    <input type="text" v-model="peopleCallPhone" 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="peopleInfoList" style="width: 100%"
            <el-table
                :data="peopleInfoList"
                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 prop="realName" label="姓名"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
@@ -108,15 +161,26 @@
            </el-table>

            <div class="pages" ref="tablePagination">
                <el-pagination background layout="prev, pager, next, total" :page-size="peoplePage.pageSize"
                    :total="peoplePage.total" :current-page="peoplePage.currentPage"
                    @current-change="handlePeopleCurrentChange"></el-pagination>
                <el-pagination
                    background
                    layout="prev, pager, next, total"
                    :page-size="peoplePage.pageSize"
                    :total="peoplePage.total"
                    :current-page="peoplePage.currentPage"
                    @current-change="handlePeopleCurrentChange"
                ></el-pagination>
            </div>
        </el-dialog>

        <!-- 重点人员 -->
        <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible"
            :before-close="personInfoClose" :close-on-click-modal="true" class="keyPerson-details-box">
        <el-dialog
            :title="keyPersonTitle"
            :modal="true"
            :visible.sync="keyPersonVisible"
            :before-close="personInfoClose"
            :close-on-click-modal="true"
            class="keyPerson-details-box"
        >
            <div class="header">
                <div>
                    人员名称：
@@ -127,12 +191,19 @@
                    <input type="text" v-model="peopleCallPhone" 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="keyPersonDetailArr" style="width: 100%"
            <el-table
                :data="keyPersonDetailArr"
                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 prop="zdryxl" label="重点人员类型"></el-table-column>
                <el-table-column prop="realName" label="姓名"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
@@ -142,14 +213,25 @@
            </el-table>

            <div class="pages" ref="tablePagination">
                <el-pagination background layout="prev, pager, next, total" :page-size="peoplePage.pageSize"
                    :total="peoplePage.total" :current-page="peoplePage.currentPage"
                    @current-change="handlePersonPageChange"></el-pagination>
                <el-pagination
                    background
                    layout="prev, pager, next, total"
                    :page-size="peoplePage.pageSize"
                    :total="peoplePage.total"
                    :current-page="peoplePage.currentPage"
                    @current-change="handlePersonPageChange"
                ></el-pagination>
            </div>
        </el-dialog>

        <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box">
        <el-dialog
            :title="equimentTitle"
            :modal="true"
            :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose"
            :close-on-click-modal="true"
            class="equiment-details-box"
        >
            <div class="header">
                <div>
                    设备名称：
@@ -157,12 +239,20 @@
                </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="equimentTableData" style="width: 100%"
            <el-table
                :data="equimentTableData"
                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">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                :row-class-name="tableRowClassName"
            >
                <el-table-column type="index" :index="indexMethod" label="序号"></el-table-column>
                <el-table-column prop="channelId" label="通道编号"></el-table-column>
                <el-table-column prop="deviceId" label="设备编号"></el-table-column>
@@ -182,14 +272,26 @@
            </el-table>

            <div class="pages">
                <el-pagination background layout="prev, pager, next, total" :total="equimentPagingTotal"
                    :page-size="pagesize" pager-count="3" :current-page="currentPage"
                    @current-change="handleCurrentChange"></el-pagination>
                <el-pagination
                    background
                    layout="prev, pager, next, total"
                    :total="equimentPagingTotal"
                    :page-size="pagesize"
                    pager-count="3"
                    :current-page="currentPage"
                    @current-change="handleCurrentChange"
                ></el-pagination>
            </div>
        </el-dialog>

        <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose"
            :close-on-click-modal="true" class="land-details-box">
        <el-dialog
            :title="landTitle"
            :modal="true"
            :visible.sync="landVisible"
            :before-close="landBeforeClose"
            :close-on-click-modal="true"
            class="land-details-box"
        >
            <div class="header">
                <div>
                    负责人：
@@ -200,12 +302,19 @@
                    <input type="text" v-model="callPhone" placeholder="请输入联系电话" />
                </div>
                <el-button type="primary" icon="el-icon-search" @click="searchLandDetail">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearLandDetailSearchValue">清空</el-button>
                <el-button
                    type="primary"
                    icon="el-icon-delete"
                    @click="clearLandDetailSearchValue"
                >清空</el-button>
            </div>

            <el-table :data="landDetailArr" style="width: 100%"
            <el-table
                :data="landDetailArr"
                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>{{(landPage.currentPage - 1) * landPage.pageSize + scope.$index + 1}}</span>
@@ -218,17 +327,34 @@
            </el-table>

            <div class="pages" ref="tablePagination">
                <el-pagination background layout="prev, pager, next, total" :page-size="landPage.pageSize"
                    :total="landPage.total" :current-page="landPage.currentPage"
                    @current-change="landHandleCurrentChange"></el-pagination>
                <el-pagination
                    background
                    layout="prev, pager, next, total"
                    :page-size="landPage.pageSize"
                    :total="landPage.total"
                    :current-page="landPage.currentPage"
                    @current-change="landHandleCurrentChange"
                ></el-pagination>
            </div>
        </el-dialog>

        <el-dialog title="警情信息" :modal="true" :visible.sync="policeSituationVisible"
            :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box">
        <el-dialog
            title="警情信息"
            :modal="true"
            :visible.sync="policeSituationVisible"
            :before-close="policeSituationBeforeClose"
            :close-on-click-modal="true"
            class="policeSituation-details-box"
        >
            <div class="btn-change">
                <div :class="{ on: policeInformationType == '接警信息' }" @click="alarmOrActAsPolice('接警信息')">接警信息</div>
                <div :class="{ on: policeInformationType == '出警信息' }" @click="alarmOrActAsPolice('出警信息')">出警信息</div>
                <div
                    :class="{ on: policeInformationType == '接警信息' }"
                    @click="alarmOrActAsPolice('接警信息')"
                >接警信息</div>
                <div
                    :class="{ on: policeInformationType == '出警信息' }"
                    @click="alarmOrActAsPolice('出警信息')"
                >出警信息</div>
            </div>

            <div v-show="policeInformationType == '接警信息'" class="box">
@@ -290,7 +416,10 @@
                </div>
            </div>

            <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'" class="box">
            <div
                v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'"
                class="box"
            >
                <div class="item">
                    <div>处警单位编号:</div>
                    <div>{{ CJdata.CJDWBH }}</div>
@@ -347,14 +476,29 @@
                </div>
            </div>

            <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'" class="box no-data">暂无数据
            </div>
            <div
                v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'"
                class="box no-data"
            >暂无数据</div>
        </el-dialog>

        <el-dialog :title="dialogEquimentVideoTitle" :modal="true" :visible.sync="dialogEquimentVideoVisible"
            :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box">
            <video autoplay controls width="100%" height="100%" ref="videoElement" id="videoElement"
                style="object-fit: fill"></video>
        <el-dialog
            :title="dialogEquimentVideoTitle"
            :modal="true"
            :visible.sync="dialogEquimentVideoVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                id="videoElement"
                style="object-fit: fill"
            ></video>
        </el-dialog>
    </div>
</template>
@@ -2012,8 +2156,6 @@
            margin: 0 5px;
            flex: 1;
        }


    }

    .equiment-detail {

 src/views/house/index.vue

@@ -13,21 +13,50 @@
    <div class="house-page container">
        <div v-show="boxShow" class="container-content">
            <div v-show="contentShow" class="search-box">
                <el-popover ref="popover" placement="bottom" trigger="manual" v-model="searchTreeShowFlag"
                    popper-class="tree-search-popup" @mousedown.native="preventFocusLost">
                    <el-tree v-show="searchLazyFlag == true" ref="popupTree" style="overflow: auto;"
                        class="select-tree-box" :load="loadNode" :lazy="true" :props="props"
                        @current-change="currentChangeHandle" @mousedown.native="preventFocusLost"></el-tree>
                <el-popover
                    ref="popover"
                    placement="bottom"
                    trigger="manual"
                    v-model="searchTreeShowFlag"
                    popper-class="tree-search-popup"
                    @mousedown.native="preventFocusLost"
                >
                    <el-tree
                        v-show="searchLazyFlag == true"
                        ref="popupTree"
                        style="overflow: auto;"
                        class="select-tree-box"
                        :load="loadNode"
                        :lazy="true"
                        :props="props"
                        @current-change="currentChangeHandle"
                        @mousedown.native="preventFocusLost"
                    ></el-tree>

                    <el-tree v-show="searchLazyFlag == false" :empty-text="treeEmptyText" ref="popupTree"
                        style="overflow: auto;" class="select-tree-box" :data="searchTreeData" :props="defaultProps"
                        :default-expand-all="true" @current-change="currentChangeHandle"
                        @mousedown.native="preventFocusLost"></el-tree>
                    <el-tree
                        v-show="searchLazyFlag == false"
                        :empty-text="treeEmptyText"
                        ref="popupTree"
                        style="overflow: auto;"
                        class="select-tree-box"
                        :data="searchTreeData"
                        :props="defaultProps"
                        :default-expand-all="true"
                        @current-change="currentChangeHandle"
                        @mousedown.native="preventFocusLost"
                    ></el-tree>
                </el-popover>

                <el-input ref="searchTreeInput" v-model="searchTreeName" @input="searchInputTree"
                    @focus="searchTreeShowFlag = true" @blur="searchTreeShowFlag = false" v-popover:popover
                    placeholder="请输入搜索条件" style="cursor: pointer;"></el-input>
                <el-input
                    ref="searchTreeInput"
                    v-model="searchTreeName"
                    @input="searchInputTree"
                    @focus="searchTreeShowFlag = true"
                    @blur="searchTreeShowFlag = false"
                    v-popover:popover
                    placeholder="请输入搜索条件"
                    style="cursor: pointer;"
                ></el-input>
            </div>

            <div v-show="contentShow" class="result-content" ref="resultContentBox">
@@ -39,9 +68,15 @@
                    <div class="housing-bg">
                        <div class="block">
                            <el-carousel height="150px">
                                <el-carousel-item v-for="(item, index) in villageInfo.pic_url_list" :key="index">
                                    <el-image style=" height: 100%" :src="item"
                                        :preview-src-list="villageInfo.pic_url_list"></el-image>
                                <el-carousel-item
                                    v-for="(item, index) in villageInfo.pic_url_list"
                                    :key="index"
                                >
                                    <el-image
                                        style=" height: 100%"
                                        :src="item"
                                        :preview-src-list="villageInfo.pic_url_list"
                                    ></el-image>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
@@ -67,16 +102,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">
@@ -87,20 +148,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>

@@ -180,9 +251,19 @@
                            <div class="condo" v-show="isShowUnitChoose">
                                <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>
@@ -230,39 +311,60 @@
                                    </div>
                                </div>
                            </div>-->
                            <el-main v-loading="pictLoading" element-loading-background="rgba(17, 38, 163, .1)"
                                element-loading-text="数据正在加载中" element-loading-spinner="el-icon-loading"
                                v-show="isShowHouseBox">
                            <el-main
                                v-loading="pictLoading"
                                element-loading-background="rgba(17, 38, 163, .1)"
                                element-loading-text="数据正在加载中"
                                element-loading-spinner="el-icon-loading"
                                v-show="isShowHouseBox"
                            >
                                <div class="floor-outBox">
                                    <div @click="lastFloorBtn" class="floorBtn" v-show="lastFloorShow">
                                    <div
                                        @click="lastFloorBtn"
                                        class="floorBtn"
                                        v-show="lastFloorShow"
                                    >
                                        <i class="el-icon-caret-left"></i>
                                    </div>
                                    <div class="floor-box">
                                        <div class="floor-num" style="left: 0">
                                            <div :class="{ on: floorsType == index }" @click="floorsType = index"
                                                v-for="index in Math.ceil(unitHouseChoosed.length / 5)" :key="index">
                                            <div
                                                :class="{ on: floorsType == index }"
                                                @click="floorsType = index"
                                                v-for="index in Math.ceil(unitHouseChoosed.length / 5)"
                                                :key="index"
                                            >
                                                {{ unitHouseChoosed[index * 5 - 5].floor_num }}-{{
                                                    unitHouseChoosed[index *
                                                        5
                                                        - 1]? unitHouseChoosed[index * 5
                                                            - 1].floor_num : unitHouseChoosed[unitHouseChoosed.length - 1].floor_num
                                                unitHouseChoosed[index *
                                                5
                                                - 1]? unitHouseChoosed[index * 5
                                                - 1].floor_num : unitHouseChoosed[unitHouseChoosed.length - 1].floor_num
                                                }}层
                                            </div>
                                        </div>
                                    </div>
                                    <div @click="nextFloorBtn" class="floorBtn rightFloorBtn" v-show="nextFloorShow">
                                    <div
                                        @click="nextFloorBtn"
                                        class="floorBtn rightFloorBtn"
                                        v-show="nextFloorShow"
                                    >
                                        <i class="el-icon-caret-right"></i>
                                    </div>
                                </div>

                                <div class="floor-detail">
                                    <div v-for="(item, index) in unitHouseChoosed.slice((floorsType - 1) * 5, floorsType * 5)"
                                        :key="index">
                                    <div
                                        v-for="(item, index) in unitHouseChoosed.slice((floorsType - 1) * 5, floorsType * 5)"
                                        :key="index"
                                    >
                                        <div class="title">{{ item.floor_num }}层：</div>
                                        <div class="detail">
                                            <div v-for="(value, index) in item.floor_house" :key="index"
                                            <div
                                                v-for="(value, index) in item.floor_house"
                                                :key="index"
                                                @click="residentDetailsClick(value)"
                                                :class="{ on: floorChoosed == value.properties.fojcu }">
                                                :class="{ on: floorChoosed == value.properties.fojcu }"
                                            >
                                                <!-- :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]" -->
                                                {{ value.properties.fojcu }}
                                                <!-- <div class="flow"></div>
@@ -277,36 +379,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>
@@ -314,35 +440,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>
@@ -350,13 +503,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>
@@ -417,19 +580,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>
                    姓名：
@@ -440,11 +618,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>
@@ -459,9 +644,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>
@@ -1443,7 +1633,7 @@
            border-radius: 10px;
            overflow: hidden;

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

@@ -1478,9 +1668,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;
                    }
                }
@@ -1491,7 +1683,7 @@
                }

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

@@ -1554,7 +1746,7 @@
                    }
                }

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

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

                            &>div {
                            & > div {
                                height: 26px;
                                line-height: 26px;
                                flex: 1;
@@ -1645,11 +1837,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;
@@ -1657,11 +1849,11 @@
                                }
                            }

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

                            &>div:last-child {
                            & > div:last-child {
                                border: none;
                            }
                        }
@@ -1686,10 +1878,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;
@@ -1697,7 +1889,7 @@
                                        color: #499d99;
                                    }

                                    &>div:last-child {
                                    & > div:last-child {
                                        height: 26px;
                                        line-height: 26px;
                                    }
@@ -1712,8 +1904,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;
@@ -1751,7 +1943,6 @@
                    }

                    .house-element-info {

                        .condo,
                        .legend {
                            display: flex;
@@ -1774,12 +1965,12 @@
                                display: flex;
                                flex: 1;

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

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

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

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

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

                                    &>div {
                                    & > div {
                                        margin: 0 4px;
                                        position: relative;
                                        width: 68px;
@@ -1909,34 +2100,38 @@
                                        }

                                        .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);
                                        }
                                    }

                                    &>.on {
                                    & > .on {
                                        color: orange;
                                        border-color: orange !important;
                                    }

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

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

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

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

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

@@ -2087,9 +2282,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/layout/index.vue

@@ -12,13 +12,23 @@
    <div class="wrapper">
        <div class="main-header">
            <div class="menu-list left">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuLeftList"
                    :key="index"
                >
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                            {{
                                subItem.menuName
                            subItem.menuName
                            }}
                        </div>
                    </div>
@@ -31,13 +41,23 @@

            <!-- 菜单导航 -->
            <div class="menu-list right">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuRightList"
                    :key="index"
                >
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                            {{
                                subItem.menuName
                            subItem.menuName
                            }}
                        </div>
                    </div>
@@ -78,15 +98,25 @@
            <!-- 地图区域 -->
            <map-box ref="modalForm">
                <!-- 主体内容区域 -->
                <div slot="mainContent" class="main-content" id="MainContent"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
                <div
                    slot="mainContent"
                    class="main-content"
                    id="MainContent"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                >
                    <router-view ref="target-name"></router-view>
                </div>

                <el-button slot="showButton" v-show="leftShow" class="flexible-btn"
                <el-button
                    slot="showButton"
                    v-show="leftShow"
                    class="flexible-btn"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                    :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
                    @click="flexibelClick"></el-button>
                    :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
                    id="FlexibleBtn"
                    type="primary"
                    @click="flexibelClick"
                ></el-button>
            </map-box>
        </div>
    </div>
@@ -330,7 +360,7 @@
            overflow: hidden;
            letter-spacing: 6px;

            &>img {
            & > img {
                // width: 100%;
                height: 80%;
                margin: 0 10px 0 10px;
@@ -346,7 +376,7 @@
                // border-radius: 10px 16px 10px 16px;
                transform: skew(58deg);

                &>span {
                & > span {
                    transform: skew(-58deg);
                }
            }
@@ -360,7 +390,7 @@
                // border-radius: 16px 10px 16px 10px;
                transform: skew(-58deg);

                &>span {
                & > span {
                    transform: skew(58deg);
                }
            }
@@ -370,11 +400,10 @@
            display: flex;
            align-items: center;

            &>.nav-list {

            & > .nav-list {
                // color: rgba(32, 106, 181, 1);
                // border-bottom: 2px solid #409eff;
                &>span.on {
                & > span.on {
                    color: rgba(252, 189, 86, 1);
                }
            }
@@ -503,7 +532,7 @@
                    justify-content: space-around;
                    padding-top: 4px;

                    &>div {
                    & > div {
                        width: 100px;
                        height: 40px;
                        background-color: rgba(168, 222, 255, 0.6);

 src/views/login/index.vue

@@ -35,12 +35,21 @@
            <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> -->

 src/views/video/list.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-11 15:18:52
 * @LastEditTime: 2023-02-11 15:23:52
 * @FilePath: \srs-police-affairs\src\views\video\list.vue
 * @Description: 辖区管理
 * 
@@ -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="请输入搜索条件"
                />
            </div>

            <div class="draw-btn">
@@ -31,33 +36,53 @@
                <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="down-tree">
                <el-scrollbar>
                    <el-tree v-show="searchLazyFlag" :props="props" :load="loadNode" lazy @node-click="treeClick">
                    <el-tree
                        v-show="searchLazyFlag"
                        :props="props"
                        :load="loadNode"
                        lazy
                        @node-click="treeClick"
                    >
                        <span class="custom-tree-node" slot-scope="node">
                            <i v-show="node.data.leaf" class="status-box"
                                :class="{ online: Number(node.data.status) === 1 }"></i>
                            <i
                                v-show="node.data.leaf"
                                class="status-box"
                                :class="{ online: Number(node.data.status) === 1 }"
                            ></i>

                            <span>
                                {{
                                    node.data.name
                                node.data.name
                                }}
                            </span>
                        </span>
                    </el-tree>

                    <el-tree v-show="searchLazyFlag == false" :data="searchTreeData" :props="defaultProps"
                        :default-expand-all="true" @node-click="treeClick">
                    <el-tree
                        v-show="searchLazyFlag == false"
                        :data="searchTreeData"
                        :props="defaultProps"
                        :default-expand-all="true"
                        @node-click="treeClick"
                    >
                        <span class="custom-tree-node" slot-scope="node">
                            <i class="status-box" :class="{ online: Number(node.data.status) === 1 }"></i>
                            <i
                                class="status-box"
                                :class="{ online: Number(node.data.status) === 1 }"
                            ></i>

                            <span>
                                {{
                                    node.data.name
                                node.data.name
                                }}
                            </span>
                        </span>
@@ -68,32 +93,63 @@
            <div class="list-show" v-if="false">
                <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" pager-count="5"
                            @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>
@@ -101,17 +157,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>
@@ -731,7 +809,7 @@
            border-radius: 10px;
            overflow-y: auto;

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

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

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