~admin/srs-police-affairs.git

parent: 992c026d | patch | commit | ignore whitespace

guanqb

2022-12-02 7a4161f1e6cf6d5bf93d64a23d669182f4e7cf90

12 files modified

4 files added

1 files deleted

	package-lock.json	20925 ●●●●● patch \| view \| raw \| blame \| history
	public/img/icon/monitor.png	patch \| view \| raw \| blame \| history
	public/img/icon/pCar.png	patch \| view \| raw \| blame \| history
	public/img/icon/pPhone.png	patch \| view \| raw \| blame \| history
	public/img/icon/recorder.png	patch \| view \| raw \| blame \| history
	public/img/policeCar.png	patch \| view \| raw \| blame \| history
	src/styles/dc/index.scss	13 ●●●●● patch \| view \| raw \| blame \| history
	src/styles/element-ui/element-ui.scss	17 ●●●●● patch \| view \| raw \| blame \| history
	src/views/activity/index.vue	87 ●●●●● patch \| view \| raw \| blame \| history
	src/views/home/components/bottomContainer.vue	4 ●●●●● patch \| view \| raw \| blame \| history
	src/views/home/components/rightContainer.vue	201 ●●●●● patch \| view \| raw \| blame \| history
	src/views/home/index.vue	3 ●●●●● patch \| view \| raw \| blame \| history
	src/views/house/index.vue	379 ●●●●● patch \| view \| raw \| blame \| history
	src/views/lyout/index.vue	87 ●●●●● patch \| view \| raw \| blame \| history
	src/views/police/index.vue	221 ●●●●● patch \| view \| raw \| blame \| history
	src/views/video/list.vue	70 ●●●●● patch \| view \| raw \| blame \| history
	src/views/video/region.vue	224 ●●●●● patch \| view \| raw \| blame \| history

 package-lock.json

Diff too large

 public/img/icon/monitor.png


 public/img/icon/pCar.png


 public/img/icon/pPhone.png


 public/img/icon/recorder.png


 public/img/policeCar.png

Binary files differ

 src/styles/dc/index.scss

@@ -134,7 +134,7 @@
    background: #fff;
    border-radius: 5px;
    z-index: 97;
    background-color: $bg-color !important;
    // background-color: $table-header-bg-color !important;
    cursor: pointer;

    .img,
@@ -144,7 +144,7 @@
        background-size: 100% 100%;
        width: 80px;
        height: 60px;
        border: 2px solid #1a6bae;
        border: 2px solid  $table-header-bg-color;

        span {
            position: absolute;
@@ -155,13 +155,14 @@
        }

        &>.on {
            background-color: #1a6bae;
            background-color: $table-header-bg-color;
        }
    }

    .img:hover,
    .elec:hover {
        border: 2px solid #fff;
    .img:hover span,
    .elec:hover span {
        // border: 2px solid #eee;
        font-weight: 700;
    }

    .elec {

 src/styles/element-ui/element-ui.scss

@@ -74,18 +74,20 @@
.el-input__inner {
    background-color: $table-body-tr-2n-color;
    color: #fff;
    border: 1px solid rgba(0, 92, 169, 1.0);
    // border: 1px solid rgba(0, 92, 169, 1.0);
    border: 1px solid $table-body-tr-n-color;
}

.el-select-dropdown {
    border: 1px solid rgba(0, 92, 169, 1.0);
    // border: 1px solid rgba(0, 92, 169, 1.0);
    border: 1px solid $table-body-tr-n-color;
}

.el-select-dropdown__item {
    font-size: 12px;
    color: #fff;
    font-weight: 200;
    background-color: #26426a !important;
    background-color: $table-body-tr-n-color!important;
}

.el-select-dropdown__list {
@@ -106,7 +108,8 @@
}

.el-select-dropdown__item:onBlur {
    background-color: rgba(0, 92, 169, 0.3);
    // background-color: rgba(0, 92, 169, 0.3);
    background-color: $table-body-tr-n-color;
}


@@ -204,7 +207,8 @@
}

.el-date-editor .el-range-input {
    background-color: #1b3e6f;
    // background-color: #1b3e6f;
    background-color: transparent;
    color: #fff;
    height: 32px;
}
@@ -226,7 +230,8 @@

.el-picker-panel [slot=sidebar],
.el-picker-panel__sidebar {
    background-color: #1b3e6f;
    // background-color: #1b3e6f;
    background-color: transparent;
}

.el-picker-panel__shortcut {

 src/views/activity/index.vue

@@ -18,8 +18,12 @@
                    <div class="category">活动类型：</div>
                    <div class="category-value">
                        <el-select size="small" v-model="activityType" placeholder="请选择">
                            <el-option v-for="item in activityOptions" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                            <el-option
                                v-for="item in activityOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </div>
                </div>
@@ -33,16 +37,25 @@
                <div>
                    <div class="category">选择时间：</div>
                    <div class="category-value">
                        <el-date-picker size="small" v-model="selectTime" type="date" placeholder="选择日期"
                            style="width:268px"></el-date-picker>
                        <el-date-picker
                            size="small"
                            v-model="selectTime"
                            type="date"
                            placeholder="选择日期"
                            style="width:268px"
                        ></el-date-picker>
                    </div>
                </div>
            </div>
            <div class="result-content">
                <div class="table-box">
                    <div class="row-box" :class="{ on: currentClickIndex === index }"
                    <div
                        class="row-box"
                        :class="{ on: currentClickIndex === index }"
                        v-for="(item, index) in activityList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        :key="index" @click="activityListClick(item, index)">
                        :key="index"
                        @click="activityListClick(item, index)"
                    >
                        <div class="row-title">常规安保</div>
                        <div class="row-content">
                            <div>
@@ -51,7 +64,9 @@
                            </div>
                            <div>
                                <div class="category">活动时间：</div>
                                <div class="category-value">{{ item.startTime }} 至 {{ item.updateTime }}</div>
                                <div
                                    class="category-value"
                                >{{ item.startTime }} 至 {{ item.updateTime }}</div>
                            </div>
                            <div>
                                <div class="category">活动详情：</div>
@@ -61,9 +76,15 @@
                    </div>
                </div>
                <div class="pages">
                    <el-pagination background layout="prev, pager, next" :total="activityList.length"
                        :page-size="pagesize" pager-count="3" :current-page="currentPage"
                        @current-change="handleCurrentChange"></el-pagination>
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="activityList.length"
                        :page-size="pagesize"
                        pager-count="3"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                </div>
            </div>
        </div>
@@ -165,16 +186,24 @@
            <div class="row-box">
                <div class="category">应急预案：</div>
                <div class="category-value">
                    <el-switch v-model="polylineSwitch" @change="switchChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                    <el-switch
                        v-model="polylineSwitch"
                        @change="switchChange"
                        active-color="#13ce66"
                        inactive-color="#ccc"
                    ></el-switch>
                </div>
            </div>

            <div class="row-box">
                <div class="category">开启轨迹：</div>
                <div class="category-value">
                    <el-switch v-model="polylineBtnSwitch" @change="switchBtnChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                    <el-switch
                        v-model="polylineBtnSwitch"
                        @change="switchBtnChange"
                        active-color="#13ce66"
                        inactive-color="#ccc"
                    ></el-switch>
                </div>
            </div>

@@ -218,12 +247,22 @@
            </ul>
        </div>

        <el-dialog :title="policeChooseTitle" :modal="true" :visible.sync="policeChooseVisible"
            :before-close="policeChooseBeforeClose" :close-on-click-modal="true" class="choose-police-box">
        <el-dialog
            :title="policeChooseTitle"
            :modal="true"
            :visible.sync="policeChooseVisible"
            :before-close="policeChooseBeforeClose"
            :close-on-click-modal="true"
            class="choose-police-box"
        >
            <div>
                <el-select size="small" v-model="policeType" placeholder="请选择">
                    <el-option v-for="item in policeOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                    <el-option
                        v-for="item in policeOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
                <el-button @click="determine">确定</el-button>
                <el-button @click="cancel">取消</el-button>
@@ -943,11 +982,11 @@
        .search-box {
            padding: 0 10px;

            &>div:first-child {
            & > div:first-child {
                margin-top: 0;
            }

            &>div {
            & > div {
                margin-top: 10px;
                display: flex;
                align-items: center;
@@ -985,7 +1024,7 @@
                    font-weight: 700;
                    width: 60px;
                    height: 32px;
                    background-color: rgb(0, 92, 169);
                    background-color: $table-body-tr-2n-color;
                    color: #fff;
                    border: 1px solid rgb(0, 92, 169);
                    cursor: pointer;
@@ -994,7 +1033,7 @@
                }

                button:active {
                    background-color: rgb(0, 92, 169);
                    background-color: $table-body-tr-2n-color;
                    border: 1px solid rgb(0, 92, 169);
                    color: rgb(189, 185, 185) !important;
                }
@@ -1021,7 +1060,7 @@
                    font-size: 14px;

                    .row-content {
                        &>div {
                        & > div {
                            display: flex;
                            line-height: 28px;

@@ -1163,7 +1202,7 @@
            line-height: 28px;
            display: flex;

            &>div {
            & > div {
                text-align: left;
            }


 src/views/home/components/bottomContainer.vue

@@ -361,12 +361,12 @@
            }

            li:nth-child(2n) {
                background: rgba(20, 50, 123, 1);
                background: $table-body-tr-2n-color;
                color: #fff !important;
            }

            li:nth-child(2n-1) {
                background: rgba(29, 38, 105, 1);
                background: $table-body-tr-n-color;
                color: #fff;
            }
        }

 src/views/home/components/rightContainer.vue

@@ -4,9 +4,16 @@
            <div class="title">
                案件统计
                <div class="timer">
                    <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                    </el-date-picker>
                    <el-date-picker
                        v-model="eventTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </div>
            </div>
            <div id="EventChangeEcharts" class="echarts-box"></div>
@@ -14,20 +21,24 @@

        <div class="alert-box" ref="alertBox">
            <div class="title" ref="alertBoxTitle">
                <div>
                    安保活动
                </div>
                <div>安保活动</div>
                <div class="title-tab">
                    <span :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>/<span
                        :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
                    <span :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>/
                    <span :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
                </div>
            </div>
            <div id="peopleList" class="echarts-box">
                <el-table size="small" :height="tableHeight" :data="acttype == 0 ? underwayArr : historyArr"
                <el-table
                    size="small"
                    :height="tableHeight"
                    :data="acttype == 0 ? underwayArr : historyArr"
                    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" ref="activityTable" @row-click="activityRowClick">
                    :row-class-name="tableRowClassName"
                    ref="activityTable"
                    @row-click="activityRowClick"
                >
                    <el-table-column prop="activityName" label="活动名称"></el-table-column>
                    <el-table-column prop="startTime" label="开始时间"></el-table-column>
                    <el-table-column prop="endTime" label="结束时间"></el-table-column>
@@ -38,12 +49,31 @@

        <div class="crowd-box" ref="crowdBox">
            <div class="title">
                <div>
                    现有设备
                </div>
                <div>现有设备</div>
                <div class="title-tab">
                    <span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/<span
                        :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
                    <span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/
                    <span :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
                </div>
                <div class="legend">
                    <ul>
                        <li>
                            <div>
                                <img src="/img/icon/pCar.png" alt />
                            </div>车辆
                        </li>
                        <li>
                            <img src="/img/icon/monitor.png" alt />
                            <div></div>摄像头
                        </li>
                        <li>
                            <img src="/img/icon/recorder.png" alt />
                            <div></div>执法记录仪
                        </li>
                        <li>
                            <img src="/img/icon/pPhone.png" alt />
                            <div></div>手台
                        </li>
                    </ul>
                </div>
            </div>
            <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div>
@@ -171,30 +201,32 @@
                            tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#00fe01">运行：${params.data.working}台</span><span style="margin-left:10px;color:#949494">备用：${params.data.spare}台</span><br /><span style="color:#fe2929">检修：${params.data.overhaul}台</span><span style="margin-left:10px;color:#69a9ff">禁用：${params.data.disable}台</span>`
                        }
                        return tipHtml
                    }
                },
                legend: {
                    left: '60%',
                    y: '25%',
                    itemGap: 20,
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: function (name) {
                        let tarValue
                        for (let i = 0; i < dataArr.length; i++) {
                            if (dataArr[i].name == name) {
                                tarValue = dataArr[i].value
                            }
                        }
                        let v = tarValue
                        return `${name}     ${v} 台    `
                    },
                    backgroundColor: 'rgba(0,0,0,0.8)',
                    borderColor: 'rgba(0,0,0,0.7)',
                },
                // legend: {
                //     left: '60%',
                //     y: '25%',
                //     itemGap: 20,
                //     textStyle: {
                //         color: '#fff'
                //     },
                //     formatter: function (name) {
                //         let tarValue
                //         for (let i = 0; i < dataArr.length; i++) {
                //             if (dataArr[i].name == name) {
                //                 tarValue = dataArr[i].value
                //             }
                //         }
                //         let v = tarValue
                //         return `${name}     ${v} 台    `
                //     },
                // },
                graphic: {
                    type: "text",
                    left: "16.5%",
                    top: "45%",
                    left: "36.5%",
                    top: "48%",
                    style: {
                        text: "设备总数",
                        textAlign: "center",
@@ -205,7 +237,7 @@
                },
                title: {
                    text: `${this.regionTotal}`,
                    left: "22%",
                    left: "42%",
                    top: "56%",
                    textStyle: {
                        color: "#27D9C8",
@@ -219,31 +251,37 @@
                        name: '',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['27%', '57%'],
                        center: ['47%', '57%'],
                        avoidLabelOverlap: false,
                        labelLine: {
                            normal: {
                                length: 15,
                                lineStyle: {
                                    width: 3
                                }
                            }
                        },
                        label: {
                            show: false,
                            position: 'center',
                            // normal: {
                            //     formatter: function (params) {
                            //         // return params.name + "\n\n" + params.percent + "%"
                            //         console.log(params, 22222)
                            //         let tipHtml = ``
                            //         if ('carCount' in params.data) {
                            //             tipHtml = `${params.data.name}${params.data.value}台${params.percent}%警车：${params.data.carCount}台\n\n监控：${params.data.monitorCount}台手台：${params.data.phoneCount}台手持记录仪：${params.data.recorderCount}台`
                            //         } else {
                            //             tipHtml = `${params.data.name}${params.data.value}台${params.percent}%运行：${params.data.working}台\n\n备用：${params.data.spare}台检修：${params.data.overhaul}台禁用：${params.data.disable}台`
                            //         }
                            //         return tipHtml
                            //     },
                            //     textStyle: {
                            //         color: '#fff',
                            //         fontSize: 14
                            //     }
                            // }
                        },
                        labelLine: {
                            show: false
                            normal: {
                                formatter: '{b}',
                                // formatter: function (params) {
                                //     // return params.name + "\n\n" + params.percent + "%"
                                //     console.log(params, 22222)
                                //     let tipHtml = ``
                                //     if ('carCount' in params.data) {
                                //         tipHtml = `${params.data.name}${params.data.value}台${params.percent}%警车：${params.data.carCount}台\n\n监控：${params.data.monitorCount}台手台：${params.data.phoneCount}台手持记录仪：${params.data.recorderCount}台`
                                //     } else {
                                //         tipHtml = `${params.data.name}${params.data.value}台${params.percent}%运行：${params.data.working}台\n\n备用：${params.data.spare}台检修：${params.data.overhaul}台禁用：${params.data.disable}台`
                                //     }
                                //     return tipHtml
                                // },
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14
                                }
                            }
                        },
                        data: dataArr,
                        itemStyle: {
@@ -282,12 +320,12 @@
                equipmentmyChart.dispatchAction({
                    type: 'highlight', seriesIndex: 0, dataIndex: curIndex
                })
                equipmentmyChart.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                    // position: ['5%', '5%'],
                })
                // equipmentmyChart.dispatchAction({ select
                //     type: "showTip",
                //     seriesIndex: 0,
                //     dataIndex: curIndex,
                //     // position: ['5%', '5%'],
                // })
            }, 1000)
            equipmentmyChart.on('mouseover', function (param) {
                clearInterval(timer)
@@ -314,12 +352,12 @@
                    equipmentmyChart.dispatchAction({
                        type: 'highlight', seriesIndex: 0, dataIndex: curIndex
                    })
                    equipmentmyChart.dispatchAction({
                        type: "showTip",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                        // position: ['5%', '5%'],
                    })
                    // equipmentmyChart.dispatchAction({
                    //     type: "showTip",
                    //     seriesIndex: 0,
                    //     dataIndex: curIndex,
                    //     // position: ['5%', '5%'],
                    // })
                }, 1000)
            })
        },
@@ -706,7 +744,7 @@
            // background-image: linear-gradient(to right, #2e4aba, #010d3e);

            .title-tab {
                color: #99CCCC;
                color: #99cccc;

                span {
                    cursor: pointer;
@@ -730,6 +768,27 @@
                margin-left: 50%;
                letter-spacing: 1px;
            }
            .legend {
                position: absolute;
                width: calc(100% - 36px);
                height: 70%;
                top: 100%;
                ul {
                    display: flex;
                    height: 100%;
                    li {
                        height: 100%;
                        display: flex;
                        line-height: 100%;
                        img {
                            height: 80%;
                        }
                        // div::before {
                        //     content: '';
                        // }
                    }
                }
            }
        }

        .sub-title {
@@ -748,7 +807,7 @@
                background: $sub-tab-bg-color;
                cursor: pointer;

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

 src/views/home/index.vue

@@ -1832,10 +1832,9 @@
            .others {
                width: 100%;
                height: 495px;
                background-color: red;

                .pages {
                    background-color: #14327b;
                    background-color: transparent;
                    padding-bottom: 3px;
                    padding-top: 10px;
                }

 src/views/house/index.vue

@@ -11,33 +11,56 @@

<template>
    <div class="container">
        <div v-show='boxShow' class="container-content">

        <div v-show="boxShow" class="container-content">
            <div v-show="contentShow" class="search-box">
                <!-- <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                <button @click="searchClick" class="el-icon-search"></button> -->
                <button @click="searchClick" class="el-icon-search"></button>-->

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

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

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

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

                <div class="nav-tab">
                    <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 == 2 ? 'choosed' : ''" @click="navClick" data-type="2">预警信息
                    </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
                        class="nav"
                        :class="navType == 2 ? 'choosed' : ''"
                        @click="navClick"
                        data-type="2"
                    >预警信息</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">
@@ -94,13 +145,22 @@
                                <i class="el-icon-caret-left"></i>
                            </div>
                            <div class="build-outBox">
                                <div class="build-box" style="left: 0px;"
                                    :style="{ width: Math.ceil(villageHousesList.length / 10) * 356 + 'px' }">
                                    <div class="ridgepole-list"
                                        v-for="index of Math.ceil(villageHousesList.length / 10)" :key="index">
                                        <div v-for="(item, index) in villageHousesList.slice((index - 1) * 10, index * 10)"
                                            :key="index" @click="buildingClick(item)"
                                            :class="{ on: ridgepoleNum.name == item.name }">{{ item.name }}</div>
                                <div
                                    class="build-box"
                                    style="left: 0px;"
                                    :style="{ width: Math.ceil(villageHousesList.length / 10) * 356 + 'px' }"
                                >
                                    <div
                                        class="ridgepole-list"
                                        v-for="index of Math.ceil(villageHousesList.length / 10)"
                                        :key="index"
                                    >
                                        <div
                                            v-for="(item, index) in villageHousesList.slice((index - 1) * 10, index * 10)"
                                            :key="index"
                                            @click="buildingClick(item)"
                                            :class="{ on: ridgepoleNum.name == item.name }"
                                        >{{ item.name }}</div>
                                    </div>
                                </div>
                            </div>
@@ -185,10 +245,18 @@
                            <div class="condo">
                                <div class="type">选择单元</div>
                                <div class="type-select">
                                    <el-select size="small" v-model="apartmentValue" placeholder="请选择"
                                        @change="chooseUnit">
                                        <el-option v-for="item in ridgepoleNum1.unit" :key="item.value"
                                            :label="item.label" :value="item.value"></el-option>
                                    <el-select
                                        size="small"
                                        v-model="apartmentValue"
                                        placeholder="请选择"
                                        @change="chooseUnit"
                                    >
                                        <el-option
                                            v-for="item in ridgepoleNum1.unit"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </div>
                            </div>
@@ -197,17 +265,20 @@
                                <div class="type-val">
                                    <div>
                                        <span
                                            style="width: 10px; height: 10px; background: #0E88FF; border-radius: 50%;"></span>
                                            style="width: 10px; height: 10px; background: #0E88FF; border-radius: 50%;"
                                        ></span>
                                        流动人口
                                    </div>
                                    <div>
                                        <span
                                            style="width: 10px; height: 10px; background: #FF796C; border-radius: 50%;"></span>
                                            style="width: 10px; height: 10px; background: #FF796C; border-radius: 50%;"
                                        ></span>
                                        重点人员
                                    </div>
                                    <div>
                                        <span
                                            style="width: 10px; height: 10px; background: #FEAC04; border-radius: 50%;"></span>
                                            style="width: 10px; height: 10px; background: #FEAC04; border-radius: 50%;"
                                        ></span>
                                        境外人口
                                    </div>
                                </div>
@@ -216,19 +287,27 @@
                                <div class="type">房屋图例</div>
                                <div class="type-val">
                                    <div>
                                        <span style="width: 14px; height: 8px; border: 1px solid #3A8B3A;"></span>
                                        <span
                                            style="width: 14px; height: 8px; border: 1px solid #3A8B3A;"
                                        ></span>
                                        出租
                                    </div>
                                    <div>
                                        <span style="width: 14px; height: 8px; border: 1px solid #2C77BB;"></span>
                                        <span
                                            style="width: 14px; height: 8px; border: 1px solid #2C77BB;"
                                        ></span>
                                        自住
                                    </div>
                                    <div>
                                        <span style="width: 14px; height: 8px; border: 1px solid #5C6169;"></span>
                                        <span
                                            style="width: 14px; height: 8px; border: 1px solid #5C6169;"
                                        ></span>
                                        空置
                                    </div>
                                    <div>
                                        <span style="width: 14px; height: 8px; border: 1px solid #CC9456;"></span>
                                        <span
                                            style="width: 14px; height: 8px; border: 1px solid #CC9456;"
                                        ></span>
                                        商业
                                    </div>
                                </div>
@@ -239,31 +318,67 @@
                                </div>
                                <div class="floor-box">
                                    <div class="floor-num" style="left: 0">
                                        <div :class="{ on: floorsType == 1 }" @click="floorsType = 1">1~5层</div>
                                        <div :class="{ on: floorsType == 2 }" @click="floorsType = 2">6~10层</div>
                                        <div :class="{ on: floorsType == 3 }" @click="floorsType = 3">11~15层</div>
                                        <div :class="{ on: floorsType == 4 }" @click="floorsType = 4">16~20层</div>
                                        <div :class="{ on: floorsType == 5 }" @click="floorsType = 5">21~25层</div>
                                        <div :class="{ on: floorsType == 6 }" @click="floorsType = 6">26~30层</div>
                                        <div
                                            :class="{ on: floorsType == 1 }"
                                            @click="floorsType = 1"
                                        >1~5层</div>
                                        <div
                                            :class="{ on: floorsType == 2 }"
                                            @click="floorsType = 2"
                                        >6~10层</div>
                                        <div
                                            :class="{ on: floorsType == 3 }"
                                            @click="floorsType = 3"
                                        >11~15层</div>
                                        <div
                                            :class="{ on: floorsType == 4 }"
                                            @click="floorsType = 4"
                                        >16~20层</div>
                                        <div
                                            :class="{ on: floorsType == 5 }"
                                            @click="floorsType = 5"
                                        >21~25层</div>
                                        <div
                                            :class="{ on: floorsType == 6 }"
                                            @click="floorsType = 6"
                                        >26~30层</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 levelList.slice((floorsType - 1) * 5, floorsType * 5)"
                                    :key="index">
                                <div
                                    v-for="(item, index) in levelList.slice((floorsType - 1) * 5, floorsType * 5)"
                                    :key="index"
                                >
                                    <div class="title">{{ index + 1 + (floorsType - 1) * 5 }}层：</div>
                                    <div class="detail">
                                        <div v-for="(value, index) in item" :key="index"
                                        <div
                                            v-for="(value, index) in item"
                                            :key="index"
                                            @click="residentDetailsClick(value)"
                                            :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]">
                                            :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]"
                                        >
                                            {{ value.Doorplate }}
                                            <div class="flow" v-show="isHaveLiudong(value.householdsDate)"></div>
                                            <div class="focus" v-show="isHaveZhongdian(value.householdsDate)"></div>
                                            <div class="warning" v-show="isHaveJingwai(value.householdsDate)"></div>
                                            <div
                                                class="flow"
                                                v-show="isHaveLiudong(value.householdsDate)"
                                            ></div>
                                            <div
                                                class="focus"
                                                v-show="isHaveZhongdian(value.householdsDate)"
                                            ></div>
                                            <div
                                                class="warning"
                                                v-show="isHaveJingwai(value.householdsDate)"
                                            ></div>
                                        </div>
                                    </div>
                                </div>
@@ -271,30 +386,39 @@
                        </div>
                    </div>
                    <div class="come-out-content" v-show="subNavType == 2">
                        <el-table :data="comeoutArr" style="width: 100%"
                        <el-table
                            :data="comeoutArr"
                            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-class-name="tableRowClassName"
                        >
                            <el-table-column prop="name" label="名称" width="130"></el-table-column>
                            <el-table-column prop="position" label="位置" width="150"></el-table-column>
                            <el-table-column prop="type" label="类别" width="120"></el-table-column>
                        </el-table>
                    </div>
                    <div class="park-content" v-show="subNavType == 3">
                        <el-table :data="parkArr" style="width: 100%"
                        <el-table
                            :data="parkArr"
                            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-class-name="tableRowClassName"
                        >
                            <el-table-column prop="name" label="名称" width="130"></el-table-column>
                            <el-table-column prop="position" label="位置" width="150"></el-table-column>
                            <el-table-column prop="type" label="类别" width="120"></el-table-column>
                        </el-table>
                    </div>
                    <div class="business-content" v-show="subNavType == 4">
                        <el-table :data="businessArr" style="width: 100%"
                        <el-table
                            :data="businessArr"
                            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-class-name="tableRowClassName"
                        >
                            <el-table-column prop="name" label="名称" width="130"></el-table-column>
                            <el-table-column prop="position" label="位置" width="150"></el-table-column>
                            <el-table-column prop="type" label="类别" width="120"></el-table-column>
@@ -303,10 +427,14 @@
                </div>

                <div class="police-info" v-show="navType == 1">
                    <el-table :data="arr" style="width: 100%"
                    <el-table
                        :data="arr"
                        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="clickData">
                        :row-class-name="tableRowClassName"
                        @row-click="clickData"
                    >
                        <el-table-column prop="name" label="名称" width="130"></el-table-column>
                        <el-table-column prop="time" label="时间" width="150"></el-table-column>
                        <el-table-column prop="type" label="类别" width="120"></el-table-column>
@@ -314,25 +442,34 @@
                </div>

                <div class="warning-info" v-show="navType == 2">
                    <el-table :data="warningArray" style="width: 100%"
                    <el-table
                        :data="warningArray"
                        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="clickData">
                        :row-class-name="tableRowClassName"
                        @row-click="clickData"
                    >
                        <el-table-column prop="name" label="名称" width="130"></el-table-column>
                        <el-table-column prop="time" label="时间" width="150"></el-table-column>
                        <el-table-column prop="type" label="类别" width="120"></el-table-column>
                    </el-table>
                </div>
            </div>

        </div>
        <!-- 
        <transition name="special-animal">

        </transition> -->
        </transition>-->

        <el-dialog title="信息详情" :modal="true" :visible.sync="dialogVisible" :before-close="handleClose"
            :close-on-click-modal="true" class="police-affairs-details-box">
        <el-dialog
            title="信息详情"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            :close-on-click-modal="true"
            class="police-affairs-details-box"
        >
            <div class="item">
                <div>名称：</div>
                <div>{{ JWdetails.name }}</div>
@@ -367,12 +504,21 @@
            </div>
        </el-dialog>

        <el-dialog :title="residentDetailsTitle" :modal="true" :visible.sync="residentDetailsShow"
            :before-close="residentDetailsClose" :close-on-click-modal="true" class="resident-details-box" width="30%">
        <el-dialog
            :title="residentDetailsTitle"
            :modal="true"
            :visible.sync="residentDetailsShow"
            :before-close="residentDetailsClose"
            :close-on-click-modal="true"
            class="resident-details-box"
            width="30%"
        >
            <h3 style="text-align:left;margin:10px 0 10px 0">户主信息</h3>
            <el-table :data="houseDate.householdsDate"
            <el-table
                :data="houseDate.householdsDate"
                :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="name" label="姓名"></el-table-column>
                <el-table-column prop="peopleType" label="重点人员"></el-table-column>
                <el-table-column prop="nation" label="民族"></el-table-column>
@@ -860,7 +1006,7 @@
            border-radius: 10px;
            overflow: hidden;

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

@@ -895,9 +1041,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;
                    }
                }
@@ -908,7 +1056,7 @@
                }

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

@@ -942,7 +1090,8 @@
                }

                .choosed {
                    background-color: rgba(0, 92, 169, 1);
                    // background-color: rgba(0, 92, 169, 1);
                    background-color: #3d5ad5;
                }
            }

@@ -957,19 +1106,20 @@
                        height: 26px;
                        line-height: 26px;
                        border-radius: 13px;
                        background: #0158a2;
                        // background: #0158a2;
                        cursor: pointer;
                        color: rgb(223, 219, 219);
                    }

                    .on {
                        border: 1px solid #fff;
                        background-color: #0158a2;
                        // background-color: #0158a2;
                        background-color: #3d5ad5;
                        color: #fff;
                    }
                }

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

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

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

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

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

                            &>div:last-child {
                            & > div:last-child {
                                border: none;
                            }
                        }
@@ -1079,10 +1229,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;
@@ -1090,7 +1240,7 @@
                                        color: #499d99;
                                    }

                                    &>div:last-child {
                                    & > div:last-child {
                                        height: 26px;
                                        line-height: 26px;
                                    }
@@ -1104,8 +1254,8 @@
                            display: flex;
                            justify-content: space-around;

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

                    .house-element-info {

                        .condo,
                        .legend {
                            display: flex;
@@ -1156,12 +1305,12 @@
                                display: flex;
                                flex: 1;

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

                                    &>span {
                                    & > span {
                                        margin: 0 10px;
                                    }
                                }
@@ -1210,7 +1359,7 @@
                                    left: 0;
                                    transition: all 1s;

                                    &>div {
                                    & > div {
                                        margin: 0 4px;
                                        display: flex;
                                        justify-content: center;
@@ -1222,7 +1371,7 @@
                                        cursor: default;
                                    }

                                    &>.on {
                                    & > .on {
                                        border: 1px solid orange;
                                        color: orange;
                                    }
@@ -1233,7 +1382,7 @@
                        .floor-detail {
                            margin-top: 14px;

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

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

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

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

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

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

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

                                    &>.shangye {
                                    & > .shangye {
                                        border: 1px solid #cc9456;
                                    }
                                }
@@ -1337,9 +1490,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/lyout/index.vue

@@ -13,15 +13,25 @@
        <div class="main-header">
            <!-- <div class="title"></div> -->
            <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">
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">
                        {{ item.menuName }}
                    </span>
                <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)">{{
                                subItem.menuName
                        }}</div>
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                            {{
                            subItem.menuName
                            }}
                        </div>
                    </div>
                </div>
            </div>
@@ -33,15 +43,25 @@

            <!-- 菜单导航 -->
            <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">
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">
                        {{ item.menuName }}
                    </span>
                <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)">{{
                                subItem.menuName
                        }}</div>
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                            {{
                            subItem.menuName
                            }}
                        </div>
                    </div>
                </div>
            </div>
@@ -59,15 +79,23 @@
            <mapBox ref="modalForm" />

            <!-- 主体内容区域 -->
            <div class="main-content" id="MainContent"
                :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
            <div
                class="main-content"
                id="MainContent"
                :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
            >
                <router-view ref="target-name"></router-view>
            </div>

            <el-button v-show="leftShow" class="flexible-btn"
            <el-button
                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>
        </div>
    </div>
</template>
@@ -280,7 +308,7 @@
            overflow: hidden;
            letter-spacing: 6px;

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

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

                &>span {
                & > span {
                    transform: skew(58deg);
                }
            }
@@ -320,11 +348,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);
                }
            }
@@ -357,7 +384,8 @@
                        text-align: center;
                        line-height: 36px;
                        font-size: 18px;
                        background: $bg-blue;
                        // background: $bg-blue;
                        background: $table-body-tr-n-color;
                        cursor: pointer;
                        box-sizing: content-box;
                    }
@@ -369,6 +397,9 @@
                    div:last-child {
                        padding-bottom: 10px;
                    }
                    div:hover {
                        text-shadow: 0px 1px 1px #fff;
                    }
                }
            }
        }

 src/views/police/index.vue

@@ -14,28 +14,42 @@
        <div v-show="boxShow" class="container-content">
            <div class="switch-box">
                <el-select v-model="typeValue" @change="navClick" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>

            <div class="list-show" ref="tableBox" v-show="!detailFlag">
                <div class="search-box">
                    <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                    <input
                        v-model="searchValue"
                        @input="searchChange"
                        type="text"
                        placeholder="请输入搜索条件"
                    />
                    <button @click="searchClick" class="el-icon-search"></button>
                </div>

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

                <div class="list" v-show="navType == 1">
                    <el-table :data="carList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table
                        :data="carList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight">
                        :height="currentTableHeight"
                    >
                        <el-table-column prop="serialNumber" label="编号" min-width="25%"></el-table-column>
                        <el-table-column prop="carType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="status" label="状态" min-width="25%">
@@ -46,10 +60,20 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -57,18 +81,26 @@
                    </el-table>

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

                <div class="list" v-show="navType == 2">
                    <el-table :data="phoneList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table
                        :data="phoneList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight">
                        :height="currentTableHeight"
                    >
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="25%">
@@ -79,10 +111,20 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -90,18 +132,26 @@
                    </el-table>

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

                <div class="list" v-show="navType == 3">
                    <el-table :data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table
                        :data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight">
                        :height="currentTableHeight"
                    >
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="dtType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="25%">
@@ -112,10 +162,20 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -123,18 +183,26 @@
                    </el-table>

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

                <div class="list" v-show="navType == 4">
                    <el-table :data="zfList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table
                        :data="zfList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight">
                        :height="currentTableHeight"
                    >
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column label="状态" min-width="25%">
@@ -145,10 +213,20 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -156,9 +234,15 @@
                    </el-table>

                    <div class="pages">
                        <el-pagination background layout="prev, pager, next" :total="zfList.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="zfList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
            </div>
@@ -189,9 +273,15 @@
                    <li>
                        <div>选择时间：</div>
                        <div class="datetime">
                            <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" size="mini" :editable="false"
                                end-placeholder="结束日期"></el-date-picker>
                            <el-date-picker
                                v-model="trackTime"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                size="mini"
                                :editable="false"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                        </div>
                    </li>

@@ -224,9 +314,15 @@
                    <li>
                        <div>选择时间：</div>
                        <div class="datetime">
                            <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" size="mini" :editable="false"
                                end-placeholder="结束日期"></el-date-picker>
                            <el-date-picker
                                v-model="trackTime"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                size="mini"
                                :editable="false"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                        </div>
                    </li>

@@ -237,14 +333,33 @@
            </div>
        </div>

        <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                style="object-fit: fill"></video>
        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                src="/video/sp.mp4"
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                style="object-fit: fill"
            ></video>
        </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>
@@ -713,7 +828,7 @@
            display: flex;
            justify-content: space-around;

            &>div {
            & > div {
                flex: 1;
            }
        }
@@ -752,7 +867,7 @@
                    font-weight: 700;
                    width: 80px;
                    height: 100%;
                    background-color: rgb(0, 92, 169);
                    background-color: $table-body-tr-2n-color;
                    color: #fff;
                    border: 1px solid rgb(0, 92, 169);
                    cursor: pointer;
@@ -760,7 +875,7 @@
                }

                button:active {
                    background-color: rgb(0, 92, 169);
                    background-color: $table-body-tr-n-color;
                    border: 1px solid rgb(0, 92, 169);
                }
            }
@@ -780,7 +895,7 @@
                border-radius: 10px;
                overflow-y: auto;

                &>div {
                & > div {
                    height: 100%;
                    padding: 0 10px;
                    line-height: 36px;
@@ -860,18 +975,18 @@
                color: #fff;
                border-bottom: 1px solid #fff;

                &>div {
                & > div {
                    text-align: center;
                }

                &>div:first-child {
                & > div:first-child {
                    flex: 2;
                }

                &>div:last-child {
                & > div:last-child {
                    flex: 6;

                    &>div {
                    & > div {
                        width: 100% !important;
                    }
                }

 src/views/video/list.vue

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

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

            <div class="list-show">
                <div class="car-list">
                    <div class="list-box">
                        <el-table :data="monitoringList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        <el-table
                            :data="monitoringList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            @cell-click="rowClick"
                        >
                            <el-table-column prop="name" label="设备名称" min-width="50%"></el-table-column>
                            <el-table-column prop="manufacture" label="设备类型" min-width="50%"></el-table-column>
                        </el-table>
                    </div>
                    <div class="pages">
                        <el-pagination background layout="prev, pager, next" :total="monitoringList.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="monitoringList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog :title="dialogTitle" :modal="true" :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="true"
            :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="true" :visible.sync="drawDialogVisible"
            :before-close="drawDialogBeforeClose" :close-on-click-modal="true" class="video-draw-box">
        <el-dialog
            :title="drawDialogTitle"
            :modal="true"
            :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>
@@ -435,7 +471,7 @@
                font-weight: 700;
                width: 80px;
                height: 100%;
                background-color: rgb(0, 92, 169);
                background-color: $table-body-tr-n-color;
                color: #fff;
                border: 1px solid rgb(0, 92, 169);
                cursor: pointer;
@@ -443,7 +479,7 @@
            }

            button:active {
                background-color: rgb(0, 92, 169);
                background-color: $table-body-tr-2n-color;
                border: 1px solid rgb(0, 92, 169);
            }
        }
@@ -463,7 +499,7 @@
            border-radius: 10px;
            overflow-y: auto;

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

            &>div {
            & > div {
                height: 100%;
                display: flex;
                flex-direction: column;

 src/views/video/region.vue

@@ -14,23 +14,33 @@
        <div class="left-container">
            <div v-show="boxShow" class="container-content">
                <div class="search-box">
                    <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                    <input
                        v-model="searchValue"
                        @input="searchChange"
                        type="text"
                        placeholder="请输入搜索条件"
                    />
                    <button @click="searchClick" class="el-icon-search"></button>
                </div>

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

                <div class="list-show">
                    <div class="car-list">
                        <div class="list-box">
                            <el-table :data="saveRangeList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                            <el-table
                                :data="saveRangeList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                                style="width: 100%"
                                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                                @cell-click="rowClick">
                                @cell-click="rowClick"
                            >
                                <el-table-column prop="name" label="范围名称" min-width="50%"></el-table-column>
                                <el-table-column prop="type" label="范围类型" min-width="50%">
                                    <template slot-scope="scope">
@@ -40,11 +50,20 @@
                                </el-table-column>
                                <el-table-column prop="id" label="操作" min-width="50%">
                                    <template slot-scope="scope">
                                        <el-button @click="flytoRange(scope.row)" type="text" size="small" title="定位">
                                        <el-button
                                            @click="flytoRange(scope.row)"
                                            type="text"
                                            size="small"
                                            title="定位"
                                        >
                                            <i class="el-icon-location"></i>
                                        </el-button>
                                        <el-button @click="deleteRegionSaveList(scope.row.id)" type="text" size="small"
                                            title="删除">
                                        <el-button
                                            @click="deleteRegionSaveList(scope.row.id)"
                                            type="text"
                                            size="small"
                                            title="删除"
                                        >
                                            <i class="el-icon-delete"></i>
                                        </el-button>
                                    </template>
@@ -52,9 +71,15 @@
                            </el-table>
                        </div>
                        <div class="pages">
                            <el-pagination background layout="prev, pager, next" :total="monitoringList.length"
                                :page-size="pagesize" pager-count="3" :current-page="currentPage"
                                @current-change="handleCurrentChange"></el-pagination>
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="monitoringList.length"
                                :page-size="pagesize"
                                pager-count="3"
                                :current-page="currentPage"
                                @current-change="handleCurrentChange"
                            ></el-pagination>
                        </div>
                    </div>
                </div>
@@ -63,81 +88,184 @@
        <div class="right-container">
            <div class="item">
                <div class="select">
                    <el-select size="small" v-model="monitorType1" @change="navClick1" placeholder="请选择">
                        <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    <el-select
                        size="small"
                        v-model="monitorType1"
                        @change="navClick1"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                    <video id="videoElement1" autoplay controls width="100%" height="100%"
                        style="object-fit: fill"></video>
                    <video
                        id="videoElement1"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            </div>
            <div class="item">
                <div class="select">
                    <el-select size="small" v-model="monitorType2" @change="navClick2" placeholder="请选择">
                        <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    <el-select
                        size="small"
                        v-model="monitorType2"
                        @change="navClick2"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                    <video id="videoElement2" autoplay controls width="100%" height="100%"
                        style="object-fit: fill"></video>
                    <video
                        id="videoElement2"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            </div>
            <div class="item">
                <div class="select">
                    <el-select size="small" v-model="monitorType3" @change="navClick3" placeholder="请选择">
                        <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    <el-select
                        size="small"
                        v-model="monitorType3"
                        @change="navClick3"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                    <video id="videoElement3" autoplay controls width="100%" height="100%"
                        style="object-fit: fill"></video>
                    <video
                        id="videoElement3"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            </div>
            <div class="item">
                <div class="select">
                    <el-select size="small" v-model="monitorType4" @change="navClick4" placeholder="请选择">
                        <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    <el-select
                        size="small"
                        v-model="monitorType4"
                        @change="navClick4"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                    <video id="videoElement4" autoplay controls width="100%" height="100%"
                        style="object-fit: fill"></video>
                    <video
                        id="videoElement4"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            </div>
            <div class="item t-left">
                <div class="select">
                    <el-select size="small" v-model="monitorType5" @change="navClick5" placeholder="请选择">
                        <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    <el-select
                        size="small"
                        v-model="monitorType5"
                        @change="navClick5"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                    <video id="videoElement5" autoplay controls width="100%" height="100%"
                        style="object-fit: fill"></video>
                    <video
                        id="videoElement5"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            </div>
            <div class="item t-right">
                <div class="select">
                    <el-select size="small" v-model="monitorType6" @change="navClick6" placeholder="请选择">
                        <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    <el-select
                        size="small"
                        v-model="monitorType6"
                        @change="navClick6"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                    <video id="videoElement6" autoplay controls width="100%" height="100%"
                        style="object-fit: fill"></video>
                    <video
                        id="videoElement6"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            </div>
        </div>

        <el-dialog :title="dialogTitle" :modal="true" :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="true"
            :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>
    </div>
</template>
@@ -537,7 +665,7 @@
                    font-weight: 700;
                    width: 80px;
                    height: 100%;
                    background-color: rgb(0, 92, 169);
                    background-color: $table-body-tr-n-color;
                    color: #fff;
                    border: 1px solid rgb(0, 92, 169);
                    cursor: pointer;
@@ -545,7 +673,7 @@
                }

                button:active {
                    background-color: rgb(0, 92, 169);
                    background-color: $table-body-tr-2n-color;
                    border: 1px solid rgb(0, 92, 169);
                }
            }
@@ -565,7 +693,7 @@
                border-radius: 10px;
                overflow-y: auto;

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

                &>div {
                & > div {
                    height: 100%;
                    display: flex;
                    flex-direction: column;

			@@ -134,7 +134,7 @@
			background: #fff;
			border-radius: 5px;
			z-index: 97;
			background-color: $bg-color !important;
			// background-color: $table-header-bg-color !important;
			cursor: pointer;

			.img,
			@@ -144,7 +144,7 @@
			background-size: 100% 100%;
			width: 80px;
			height: 60px;
			border: 2px solid #1a6bae;
			border: 2px solid $table-header-bg-color;

			span {
			position: absolute;
			@@ -155,13 +155,14 @@
			}

			&>.on {
			background-color: #1a6bae;
			background-color: $table-header-bg-color;
			}
			}

			.img:hover,
			.elec:hover {
			border: 2px solid #fff;
			.img:hover span,
			.elec:hover span {
			// border: 2px solid #eee;
			font-weight: 700;
			}

			.elec {

			@@ -74,18 +74,20 @@
			.el-input__inner {
			background-color: $table-body-tr-2n-color;
			color: #fff;
			border: 1px solid rgba(0, 92, 169, 1.0);
			// border: 1px solid rgba(0, 92, 169, 1.0);
			border: 1px solid $table-body-tr-n-color;
			}

			.el-select-dropdown {
			border: 1px solid rgba(0, 92, 169, 1.0);
			// border: 1px solid rgba(0, 92, 169, 1.0);
			border: 1px solid $table-body-tr-n-color;
			}

			.el-select-dropdown__item {
			font-size: 12px;
			color: #fff;
			font-weight: 200;
			background-color: #26426a !important;
			background-color: $table-body-tr-n-color!important;
			}

			.el-select-dropdown__list {
			@@ -106,7 +108,8 @@
			}

			.el-select-dropdown__item:onBlur {
			background-color: rgba(0, 92, 169, 0.3);
			// background-color: rgba(0, 92, 169, 0.3);
			background-color: $table-body-tr-n-color;
			}


			@@ -204,7 +207,8 @@
			}

			.el-date-editor .el-range-input {
			background-color: #1b3e6f;
			// background-color: #1b3e6f;
			background-color: transparent;
			color: #fff;
			height: 32px;
			}
			@@ -226,7 +230,8 @@

			.el-picker-panel [slot=sidebar],
			.el-picker-panel__sidebar {
			background-color: #1b3e6f;
			// background-color: #1b3e6f;
			background-color: transparent;
			}

			.el-picker-panel__shortcut {

			@@ -18,8 +18,12 @@
			<div class="category">活动类型：</div>
			<div class="category-value">
			<el-select size="small" v-model="activityType" placeholder="请选择">
			<el-option v-for="item in activityOptions" :key="item.value" :label="item.label"
			:value="item.value"></el-option>
			<el-option
			v-for="item in activityOptions"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			></el-option>
			</el-select>
			</div>
			</div>
			@@ -33,16 +37,25 @@
			<div>
			<div class="category">选择时间：</div>
			<div class="category-value">
			<el-date-picker size="small" v-model="selectTime" type="date" placeholder="选择日期"
			style="width:268px"></el-date-picker>
			<el-date-picker
			size="small"
			v-model="selectTime"
			type="date"
			placeholder="选择日期"
			style="width:268px"
			></el-date-picker>
			</div>
			</div>
			</div>
			<div class="result-content">
			<div class="table-box">
			<div class="row-box" :class="{ on: currentClickIndex === index }"
			<div
			class="row-box"
			:class="{ on: currentClickIndex === index }"
			v-for="(item, index) in activityList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
			:key="index" @click="activityListClick(item, index)">
			:key="index"
			@click="activityListClick(item, index)"
			>
			<div class="row-title">常规安保</div>
			<div class="row-content">
			<div>
			@@ -51,7 +64,9 @@
			</div>
			<div>
			<div class="category">活动时间：</div>
			<div class="category-value">{{ item.startTime }} 至 {{ item.updateTime }}</div>
			<div
			class="category-value"
			>{{ item.startTime }} 至 {{ item.updateTime }}</div>
			</div>
			<div>
			<div class="category">活动详情：</div>
			@@ -61,9 +76,15 @@
			</div>
			</div>
			<div class="pages">
			<el-pagination background layout="prev, pager, next" :total="activityList.length"
			:page-size="pagesize" pager-count="3" :current-page="currentPage"
			@current-change="handleCurrentChange"></el-pagination>
			<el-pagination
			background
			layout="prev, pager, next"
			:total="activityList.length"
			:page-size="pagesize"
			pager-count="3"
			:current-page="currentPage"
			@current-change="handleCurrentChange"
			></el-pagination>
			</div>
			</div>
			</div>
			@@ -165,16 +186,24 @@
			<div class="row-box">
			<div class="category">应急预案：</div>
			<div class="category-value">
			<el-switch v-model="polylineSwitch" @change="switchChange" active-color="#13ce66"
			inactive-color="#ccc"></el-switch>
			<el-switch
			v-model="polylineSwitch"
			@change="switchChange"
			active-color="#13ce66"
			inactive-color="#ccc"
			></el-switch>
			</div>
			</div>

			<div class="row-box">
			<div class="category">开启轨迹：</div>
			<div class="category-value">
			<el-switch v-model="polylineBtnSwitch" @change="switchBtnChange" active-color="#13ce66"
			inactive-color="#ccc"></el-switch>
			<el-switch
			v-model="polylineBtnSwitch"
			@change="switchBtnChange"
			active-color="#13ce66"
			inactive-color="#ccc"
			></el-switch>
			</div>
			</div>

			@@ -218,12 +247,22 @@
			</ul>
			</div>

			<el-dialog :title="policeChooseTitle" :modal="true" :visible.sync="policeChooseVisible"
			:before-close="policeChooseBeforeClose" :close-on-click-modal="true" class="choose-police-box">
			<el-dialog
			:title="policeChooseTitle"
			:modal="true"
			:visible.sync="policeChooseVisible"
			:before-close="policeChooseBeforeClose"
			:close-on-click-modal="true"
			class="choose-police-box"
			>
			<div>
			<el-select size="small" v-model="policeType" placeholder="请选择">
			<el-option v-for="item in policeOption" :key="item.value" :label="item.label"
			:value="item.value"></el-option>
			<el-option
			v-for="item in policeOption"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			></el-option>
			</el-select>
			<el-button @click="determine">确定</el-button>
			<el-button @click="cancel">取消</el-button>
			@@ -943,11 +982,11 @@
			.search-box {
			padding: 0 10px;

			&>div:first-child {
			& > div:first-child {
			margin-top: 0;
			}

			&>div {
			& > div {
			margin-top: 10px;
			display: flex;
			align-items: center;
			@@ -985,7 +1024,7 @@
			font-weight: 700;
			width: 60px;
			height: 32px;
			background-color: rgb(0, 92, 169);
			background-color: $table-body-tr-2n-color;
			color: #fff;
			border: 1px solid rgb(0, 92, 169);
			cursor: pointer;
			@@ -994,7 +1033,7 @@
			}

			button:active {
			background-color: rgb(0, 92, 169);
			background-color: $table-body-tr-2n-color;
			border: 1px solid rgb(0, 92, 169);
			color: rgb(189, 185, 185) !important;
			}
			@@ -1021,7 +1060,7 @@
			font-size: 14px;

			.row-content {
			&>div {
			& > div {
			display: flex;
			line-height: 28px;

			@@ -1163,7 +1202,7 @@
			line-height: 28px;
			display: flex;

			&>div {
			& > div {
			text-align: left;
			}

			@@ -361,12 +361,12 @@
			}

			li:nth-child(2n) {
			background: rgba(20, 50, 123, 1);
			background: $table-body-tr-2n-color;
			color: #fff !important;
			}

			li:nth-child(2n-1) {
			background: rgba(29, 38, 105, 1);
			background: $table-body-tr-n-color;
			color: #fff;
			}
			}

			@@ -4,9 +4,16 @@
			<div class="title">
			案件统计
			<div class="timer">
			<el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
			start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
			</el-date-picker>
			<el-date-picker
			v-model="eventTime"
			type="daterange"
			align="right"
			unlink-panels
			range-separator="至"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			:picker-options="pickerOptions"
			></el-date-picker>
			</div>
			</div>
			<div id="EventChangeEcharts" class="echarts-box"></div>
			@@ -14,20 +21,24 @@

			<div class="alert-box" ref="alertBox">
			<div class="title" ref="alertBoxTitle">
			<div>
			安保活动
			</div>
			<div>安保活动</div>
			<div class="title-tab">
			<span :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>/<span
			:class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
			<span :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>/
			<span :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
			</div>
			</div>
			<div id="peopleList" class="echarts-box">
			<el-table size="small" :height="tableHeight" :data="acttype == 0 ? underwayArr : historyArr"
			<el-table
			size="small"
			:height="tableHeight"
			:data="acttype == 0 ? underwayArr : historyArr"
			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" ref="activityTable" @row-click="activityRowClick">
			:row-class-name="tableRowClassName"
			ref="activityTable"
			@row-click="activityRowClick"
			>
			<el-table-column prop="activityName" label="活动名称"></el-table-column>
			<el-table-column prop="startTime" label="开始时间"></el-table-column>
			<el-table-column prop="endTime" label="结束时间"></el-table-column>
			@@ -38,12 +49,31 @@

			<div class="crowd-box" ref="crowdBox">
			<div class="title">
			<div>
			现有设备
			</div>
			<div>现有设备</div>
			<div class="title-tab">
			<span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/<span
			:class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
			<span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/
			<span :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
			</div>
			<div class="legend">
			<ul>
			<li>
			<div>
			<img src="/img/icon/pCar.png" alt />
			</div>车辆
			</li>
			<li>
			<img src="/img/icon/monitor.png" alt />
			<div></div>摄像头
			</li>
			<li>
			<img src="/img/icon/recorder.png" alt />
			<div></div>执法记录仪
			</li>
			<li>
			<img src="/img/icon/pPhone.png" alt />
			<div></div>手台
			</li>
			</ul>
			</div>
			</div>
			<div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div>
			@@ -171,30 +201,32 @@
			tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#00fe01">运行：${params.data.working}台</span><span style="margin-left:10px;color:#949494">备用：${params.data.spare}台</span><br /><span style="color:#fe2929">检修：${params.data.overhaul}台</span><span style="margin-left:10px;color:#69a9ff">禁用：${params.data.disable}台</span>`
			}
			return tipHtml
			}
			},
			legend: {
			left: '60%',
			y: '25%',
			itemGap: 20,
			textStyle: {
			color: '#fff'
			},
			formatter: function (name) {
			let tarValue
			for (let i = 0; i < dataArr.length; i++) {
			if (dataArr[i].name == name) {
			tarValue = dataArr[i].value
			}
			}
			let v = tarValue
			return `${name} ${v} 台 `
			},
			backgroundColor: 'rgba(0,0,0,0.8)',
			borderColor: 'rgba(0,0,0,0.7)',
			},
			// legend: {
			// left: '60%',
			// y: '25%',
			// itemGap: 20,
			// textStyle: {
			// color: '#fff'
			// },
			// formatter: function (name) {
			// let tarValue
			// for (let i = 0; i < dataArr.length; i++) {
			// if (dataArr[i].name == name) {
			// tarValue = dataArr[i].value
			// }
			// }
			// let v = tarValue
			// return `${name} ${v} 台 `
			// },
			// },
			graphic: {
			type: "text",
			left: "16.5%",
			top: "45%",
			left: "36.5%",
			top: "48%",
			style: {
			text: "设备总数",
			textAlign: "center",
			@@ -205,7 +237,7 @@
			},
			title: {
			text: `${this.regionTotal}`,
			left: "22%",
			left: "42%",
			top: "56%",
			textStyle: {
			color: "#27D9C8",
			@@ -219,31 +251,37 @@
			name: '',
			type: 'pie',
			radius: ['40%', '70%'],
			center: ['27%', '57%'],
			center: ['47%', '57%'],
			avoidLabelOverlap: false,
			labelLine: {
			normal: {
			length: 15,
			lineStyle: {
			width: 3
			}
			}
			},
			label: {
			show: false,
			position: 'center',
			// normal: {
			// formatter: function (params) {
			// // return params.name + "\n\n" + params.percent + "%"
			// console.log(params, 22222)
			// let tipHtml = ``
			// if ('carCount' in params.data) {
			// tipHtml = `${params.data.name}${params.data.value}台${params.percent}%警车：${params.data.carCount}台\n\n监控：${params.data.monitorCount}台手台：${params.data.phoneCount}台手持记录仪：${params.data.recorderCount}台`
			// } else {
			// tipHtml = `${params.data.name}${params.data.value}台${params.percent}%运行：${params.data.working}台\n\n备用：${params.data.spare}台检修：${params.data.overhaul}台禁用：${params.data.disable}台`
			// }
			// return tipHtml
			// },
			// textStyle: {
			// color: '#fff',
			// fontSize: 14
			// }
			// }
			},
			labelLine: {
			show: false
			normal: {
			formatter: '{b}',
			// formatter: function (params) {
			// // return params.name + "\n\n" + params.percent + "%"
			// console.log(params, 22222)
			// let tipHtml = ``
			// if ('carCount' in params.data) {
			// tipHtml = `${params.data.name}${params.data.value}台${params.percent}%警车：${params.data.carCount}台\n\n监控：${params.data.monitorCount}台手台：${params.data.phoneCount}台手持记录仪：${params.data.recorderCount}台`
			// } else {
			// tipHtml = `${params.data.name}${params.data.value}台${params.percent}%运行：${params.data.working}台\n\n备用：${params.data.spare}台检修：${params.data.overhaul}台禁用：${params.data.disable}台`
			// }
			// return tipHtml
			// },
			textStyle: {
			color: '#fff',
			fontSize: 14
			}
			}
			},
			data: dataArr,
			itemStyle: {
			@@ -282,12 +320,12 @@
			equipmentmyChart.dispatchAction({
			type: 'highlight', seriesIndex: 0, dataIndex: curIndex
			})
			equipmentmyChart.dispatchAction({
			type: "showTip",
			seriesIndex: 0,
			dataIndex: curIndex,
			// position: ['5%', '5%'],
			})
			// equipmentmyChart.dispatchAction({ select
			// type: "showTip",
			// seriesIndex: 0,
			// dataIndex: curIndex,
			// // position: ['5%', '5%'],
			// })
			}, 1000)
			equipmentmyChart.on('mouseover', function (param) {
			clearInterval(timer)
			@@ -314,12 +352,12 @@
			equipmentmyChart.dispatchAction({
			type: 'highlight', seriesIndex: 0, dataIndex: curIndex
			})
			equipmentmyChart.dispatchAction({
			type: "showTip",
			seriesIndex: 0,
			dataIndex: curIndex,
			// position: ['5%', '5%'],
			})
			// equipmentmyChart.dispatchAction({
			// type: "showTip",
			// seriesIndex: 0,
			// dataIndex: curIndex,
			// // position: ['5%', '5%'],
			// })
			}, 1000)
			})
			},
			@@ -706,7 +744,7 @@
			// background-image: linear-gradient(to right, #2e4aba, #010d3e);

			.title-tab {
			color: #99CCCC;
			color: #99cccc;

			span {
			cursor: pointer;
			@@ -730,6 +768,27 @@
			margin-left: 50%;
			letter-spacing: 1px;
			}
			.legend {
			position: absolute;
			width: calc(100% - 36px);
			height: 70%;
			top: 100%;
			ul {
			display: flex;
			height: 100%;
			li {
			height: 100%;
			display: flex;
			line-height: 100%;
			img {
			height: 80%;
			}
			// div::before {
			// content: '';
			// }
			}
			}
			}
			}

			.sub-title {
			@@ -748,7 +807,7 @@
			background: $sub-tab-bg-color;
			cursor: pointer;

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

			@@ -1832,10 +1832,9 @@
			.others {
			width: 100%;
			height: 495px;
			background-color: red;

			.pages {
			background-color: #14327b;
			background-color: transparent;
			padding-bottom: 3px;
			padding-top: 10px;
			}

			@@ -11,33 +11,56 @@

			<template>
			<div class="container">
			<div v-show='boxShow' class="container-content">

			<div v-show="boxShow" class="container-content">
			<div v-show="contentShow" class="search-box">
			<!-- <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
			<button @click="searchClick" class="el-icon-search"></button> -->
			<button @click="searchClick" class="el-icon-search"></button>-->

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

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

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

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

			<div class="nav-tab">
			<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 == 2 ? 'choosed' : ''" @click="navClick" data-type="2">预警信息
			</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
			class="nav"
			:class="navType == 2 ? 'choosed' : ''"
			@click="navClick"
			data-type="2"
			>预警信息</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">
			@@ -94,13 +145,22 @@
			<i class="el-icon-caret-left"></i>
			</div>
			<div class="build-outBox">
			<div class="build-box" style="left: 0px;"
			:style="{ width: Math.ceil(villageHousesList.length / 10) * 356 + 'px' }">
			<div class="ridgepole-list"
			v-for="index of Math.ceil(villageHousesList.length / 10)" :key="index">
			<div v-for="(item, index) in villageHousesList.slice((index - 1) * 10, index * 10)"
			:key="index" @click="buildingClick(item)"
			:class="{ on: ridgepoleNum.name == item.name }">{{ item.name }}</div>
			<div
			class="build-box"
			style="left: 0px;"
			:style="{ width: Math.ceil(villageHousesList.length / 10) * 356 + 'px' }"
			>
			<div
			class="ridgepole-list"
			v-for="index of Math.ceil(villageHousesList.length / 10)"
			:key="index"
			>
			<div
			v-for="(item, index) in villageHousesList.slice((index - 1) * 10, index * 10)"
			:key="index"
			@click="buildingClick(item)"
			:class="{ on: ridgepoleNum.name == item.name }"
			>{{ item.name }}</div>
			</div>
			</div>
			</div>
			@@ -185,10 +245,18 @@
			<div class="condo">
			<div class="type">选择单元</div>
			<div class="type-select">
			<el-select size="small" v-model="apartmentValue" placeholder="请选择"
			@change="chooseUnit">
			<el-option v-for="item in ridgepoleNum1.unit" :key="item.value"
			:label="item.label" :value="item.value"></el-option>
			<el-select
			size="small"
			v-model="apartmentValue"
			placeholder="请选择"
			@change="chooseUnit"
			>
			<el-option
			v-for="item in ridgepoleNum1.unit"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			></el-option>
			</el-select>
			</div>
			</div>
			@@ -197,17 +265,20 @@
			<div class="type-val">
			<div>
			<span
			style="width: 10px; height: 10px; background: #0E88FF; border-radius: 50%;"></span>
			style="width: 10px; height: 10px; background: #0E88FF; border-radius: 50%;"
			></span>
			流动人口
			</div>
			<div>
			<span
			style="width: 10px; height: 10px; background: #FF796C; border-radius: 50%;"></span>
			style="width: 10px; height: 10px; background: #FF796C; border-radius: 50%;"
			></span>
			重点人员
			</div>
			<div>
			<span
			style="width: 10px; height: 10px; background: #FEAC04; border-radius: 50%;"></span>
			style="width: 10px; height: 10px; background: #FEAC04; border-radius: 50%;"
			></span>
			境外人口
			</div>
			</div>
			@@ -216,19 +287,27 @@
			<div class="type">房屋图例</div>
			<div class="type-val">
			<div>
			<span style="width: 14px; height: 8px; border: 1px solid #3A8B3A;"></span>
			<span
			style="width: 14px; height: 8px; border: 1px solid #3A8B3A;"
			></span>
			出租
			</div>
			<div>
			<span style="width: 14px; height: 8px; border: 1px solid #2C77BB;"></span>
			<span
			style="width: 14px; height: 8px; border: 1px solid #2C77BB;"
			></span>
			自住
			</div>
			<div>
			<span style="width: 14px; height: 8px; border: 1px solid #5C6169;"></span>
			<span
			style="width: 14px; height: 8px; border: 1px solid #5C6169;"
			></span>
			空置
			</div>
			<div>
			<span style="width: 14px; height: 8px; border: 1px solid #CC9456;"></span>
			<span
			style="width: 14px; height: 8px; border: 1px solid #CC9456;"
			></span>
			商业
			</div>
			</div>
			@@ -239,31 +318,67 @@
			</div>
			<div class="floor-box">
			<div class="floor-num" style="left: 0">
			<div :class="{ on: floorsType == 1 }" @click="floorsType = 1">1~5层</div>
			<div :class="{ on: floorsType == 2 }" @click="floorsType = 2">6~10层</div>
			<div :class="{ on: floorsType == 3 }" @click="floorsType = 3">11~15层</div>
			<div :class="{ on: floorsType == 4 }" @click="floorsType = 4">16~20层</div>
			<div :class="{ on: floorsType == 5 }" @click="floorsType = 5">21~25层</div>
			<div :class="{ on: floorsType == 6 }" @click="floorsType = 6">26~30层</div>
			<div
			:class="{ on: floorsType == 1 }"
			@click="floorsType = 1"
			>1~5层</div>
			<div
			:class="{ on: floorsType == 2 }"
			@click="floorsType = 2"
			>6~10层</div>
			<div
			:class="{ on: floorsType == 3 }"
			@click="floorsType = 3"
			>11~15层</div>
			<div
			:class="{ on: floorsType == 4 }"
			@click="floorsType = 4"
			>16~20层</div>
			<div
			:class="{ on: floorsType == 5 }"
			@click="floorsType = 5"
			>21~25层</div>
			<div
			:class="{ on: floorsType == 6 }"
			@click="floorsType = 6"
			>26~30层</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 levelList.slice((floorsType - 1) * 5, floorsType * 5)"
			:key="index">
			<div
			v-for="(item, index) in levelList.slice((floorsType - 1) * 5, floorsType * 5)"
			:key="index"
			>
			<div class="title">{{ index + 1 + (floorsType - 1) * 5 }}层：</div>
			<div class="detail">
			<div v-for="(value, index) in item" :key="index"
			<div
			v-for="(value, index) in item"
			:key="index"
			@click="residentDetailsClick(value)"
			:class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]">
			:class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]"
			>
			{{ value.Doorplate }}
			<div class="flow" v-show="isHaveLiudong(value.householdsDate)"></div>
			<div class="focus" v-show="isHaveZhongdian(value.householdsDate)"></div>
			<div class="warning" v-show="isHaveJingwai(value.householdsDate)"></div>
			<div
			class="flow"
			v-show="isHaveLiudong(value.householdsDate)"
			></div>
			<div
			class="focus"
			v-show="isHaveZhongdian(value.householdsDate)"
			></div>
			<div
			class="warning"
			v-show="isHaveJingwai(value.householdsDate)"
			></div>
			</div>
			</div>
			</div>
			@@ -271,30 +386,39 @@
			</div>
			</div>
			<div class="come-out-content" v-show="subNavType == 2">
			<el-table :data="comeoutArr" style="width: 100%"
			<el-table
			:data="comeoutArr"
			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-class-name="tableRowClassName"
			>
			<el-table-column prop="name" label="名称" width="130"></el-table-column>
			<el-table-column prop="position" label="位置" width="150"></el-table-column>
			<el-table-column prop="type" label="类别" width="120"></el-table-column>
			</el-table>
			</div>
			<div class="park-content" v-show="subNavType == 3">
			<el-table :data="parkArr" style="width: 100%"
			<el-table
			:data="parkArr"
			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-class-name="tableRowClassName"
			>
			<el-table-column prop="name" label="名称" width="130"></el-table-column>
			<el-table-column prop="position" label="位置" width="150"></el-table-column>
			<el-table-column prop="type" label="类别" width="120"></el-table-column>
			</el-table>
			</div>
			<div class="business-content" v-show="subNavType == 4">
			<el-table :data="businessArr" style="width: 100%"
			<el-table
			:data="businessArr"
			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-class-name="tableRowClassName"
			>
			<el-table-column prop="name" label="名称" width="130"></el-table-column>
			<el-table-column prop="position" label="位置" width="150"></el-table-column>
			<el-table-column prop="type" label="类别" width="120"></el-table-column>
			@@ -303,10 +427,14 @@
			</div>

			<div class="police-info" v-show="navType == 1">
			<el-table :data="arr" style="width: 100%"
			<el-table
			:data="arr"
			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="clickData">
			:row-class-name="tableRowClassName"
			@row-click="clickData"
			>
			<el-table-column prop="name" label="名称" width="130"></el-table-column>
			<el-table-column prop="time" label="时间" width="150"></el-table-column>
			<el-table-column prop="type" label="类别" width="120"></el-table-column>
			@@ -314,25 +442,34 @@
			</div>

			<div class="warning-info" v-show="navType == 2">
			<el-table :data="warningArray" style="width: 100%"
			<el-table
			:data="warningArray"
			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="clickData">
			:row-class-name="tableRowClassName"
			@row-click="clickData"
			>
			<el-table-column prop="name" label="名称" width="130"></el-table-column>
			<el-table-column prop="time" label="时间" width="150"></el-table-column>
			<el-table-column prop="type" label="类别" width="120"></el-table-column>
			</el-table>
			</div>
			</div>

			</div>
			<!--
			<transition name="special-animal">

			</transition> -->
			</transition>-->

			<el-dialog title="信息详情" :modal="true" :visible.sync="dialogVisible" :before-close="handleClose"
			:close-on-click-modal="true" class="police-affairs-details-box">
			<el-dialog
			title="信息详情"
			:modal="true"
			:visible.sync="dialogVisible"
			:before-close="handleClose"
			:close-on-click-modal="true"
			class="police-affairs-details-box"
			>
			<div class="item">
			<div>名称：</div>
			<div>{{ JWdetails.name }}</div>
			@@ -367,12 +504,21 @@
			</div>
			</el-dialog>

			<el-dialog :title="residentDetailsTitle" :modal="true" :visible.sync="residentDetailsShow"
			:before-close="residentDetailsClose" :close-on-click-modal="true" class="resident-details-box" width="30%">
			<el-dialog
			:title="residentDetailsTitle"
			:modal="true"
			:visible.sync="residentDetailsShow"
			:before-close="residentDetailsClose"
			:close-on-click-modal="true"
			class="resident-details-box"
			width="30%"
			>
			<h3 style="text-align:left;margin:10px 0 10px 0">户主信息</h3>
			<el-table :data="houseDate.householdsDate"
			<el-table
			:data="houseDate.householdsDate"
			: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="name" label="姓名"></el-table-column>
			<el-table-column prop="peopleType" label="重点人员"></el-table-column>
			<el-table-column prop="nation" label="民族"></el-table-column>
			@@ -860,7 +1006,7 @@
			border-radius: 10px;
			overflow: hidden;

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

			@@ -895,9 +1041,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;
			}
			}
			@@ -908,7 +1056,7 @@
			}

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

			@@ -942,7 +1090,8 @@
			}

			.choosed {
			background-color: rgba(0, 92, 169, 1);
			// background-color: rgba(0, 92, 169, 1);
			background-color: #3d5ad5;
			}
			}

			@@ -957,19 +1106,20 @@
			height: 26px;
			line-height: 26px;
			border-radius: 13px;
			background: #0158a2;
			// background: #0158a2;
			cursor: pointer;
			color: rgb(223, 219, 219);
			}

			.on {
			border: 1px solid #fff;
			background-color: #0158a2;
			// background-color: #0158a2;
			background-color: #3d5ad5;
			color: #fff;
			}
			}

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

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

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

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

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

			&>div:last-child {
			& > div:last-child {
			border: none;
			}
			}
			@@ -1079,10 +1229,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;
			@@ -1090,7 +1240,7 @@
			color: #499d99;
			}

			&>div:last-child {
			& > div:last-child {
			height: 26px;
			line-height: 26px;
			}
			@@ -1104,8 +1254,8 @@
			display: flex;
			justify-content: space-around;

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

			.house-element-info {

			.condo,
			.legend {
			display: flex;
			@@ -1156,12 +1305,12 @@
			display: flex;
			flex: 1;

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

			&>span {
			& > span {
			margin: 0 10px;
			}
			}
			@@ -1210,7 +1359,7 @@
			left: 0;
			transition: all 1s;

			&>div {
			& > div {
			margin: 0 4px;
			display: flex;
			justify-content: center;
			@@ -1222,7 +1371,7 @@
			cursor: default;
			}

			&>.on {
			& > .on {
			border: 1px solid orange;
			color: orange;
			}
			@@ -1233,7 +1382,7 @@
			.floor-detail {
			margin-top: 14px;

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

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

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

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

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

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

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

			&>.shangye {
			& > .shangye {
			border: 1px solid #cc9456;
			}
			}
			@@ -1337,9 +1490,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;
			}

			@@ -13,15 +13,25 @@
			<div class="main-header">
			<!-- <div class="title"></div> -->
			<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">
			<span :class="{ on: currentUrl.indexOf(item.path) != -1 }">
			{{ item.menuName }}
			</span>
			<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)">{{
			subItem.menuName
			}}</div>
			<div
			v-for="(subItem, subIndex) in item.children"
			:key="subIndex"
			@click="goToPath(subItem)"
			>
			{{
			subItem.menuName
			}}
			</div>
			</div>
			</div>
			</div>
			@@ -33,15 +43,25 @@

			<!-- 菜单导航 -->
			<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">
			<span :class="{ on: currentUrl.indexOf(item.path) != -1 }">
			{{ item.menuName }}
			</span>
			<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)">{{
			subItem.menuName
			}}</div>
			<div
			v-for="(subItem, subIndex) in item.children"
			:key="subIndex"
			@click="goToPath(subItem)"
			>
			{{
			subItem.menuName
			}}
			</div>
			</div>
			</div>
			</div>
			@@ -59,15 +79,23 @@
			<mapBox ref="modalForm" />

			<!-- 主体内容区域 -->
			<div class="main-content" id="MainContent"
			:class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
			<div
			class="main-content"
			id="MainContent"
			:class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
			>
			<router-view ref="target-name"></router-view>
			</div>

			<el-button v-show="leftShow" class="flexible-btn"
			<el-button
			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>
			</div>
			</div>
			</template>
			@@ -280,7 +308,7 @@
			overflow: hidden;
			letter-spacing: 6px;

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

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

			&>span {
			& > span {
			transform: skew(58deg);
			}
			}
			@@ -320,11 +348,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);
			}
			}
			@@ -357,7 +384,8 @@
			text-align: center;
			line-height: 36px;
			font-size: 18px;
			background: $bg-blue;
			// background: $bg-blue;
			background: $table-body-tr-n-color;
			cursor: pointer;
			box-sizing: content-box;
			}
			@@ -369,6 +397,9 @@
			div:last-child {
			padding-bottom: 10px;
			}
			div:hover {
			text-shadow: 0px 1px 1px #fff;
			}
			}
			}
			}

			@@ -14,28 +14,42 @@
			<div v-show="boxShow" class="container-content">
			<div class="switch-box">
			<el-select v-model="typeValue" @change="navClick" placeholder="请选择">
			<el-option v-for="item in options" :key="item.value" :label="item.label"
			:value="item.value"></el-option>
			<el-option
			v-for="item in options"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			></el-option>
			</el-select>
			</div>

			<div class="list-show" ref="tableBox" v-show="!detailFlag">
			<div class="search-box">
			<input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
			<input
			v-model="searchValue"
			@input="searchChange"
			type="text"
			placeholder="请输入搜索条件"
			/>
			<button @click="searchClick" class="el-icon-search"></button>
			</div>

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

			<div class="list" v-show="navType == 1">
			<el-table :data="carList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
			<el-table
			:data="carList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
			style="width: 100%"
			:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
			:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
			:height="currentTableHeight">
			:height="currentTableHeight"
			>
			<el-table-column prop="serialNumber" label="编号" min-width="25%"></el-table-column>
			<el-table-column prop="carType" label="类型" min-width="25%"></el-table-column>
			<el-table-column prop="status" label="状态" min-width="25%">
			@@ -46,10 +60,20 @@

			<el-table-column label="操作" align="center" min-width="25%">
			<template slot-scope="scope">
			<el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
			<el-button
			@click="rowClick(scope.row)"
			type="text"
			size="small"
			title="定位"
			>
			<i class="el-icon-location"></i>
			</el-button>
			<el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
			<el-button
			@click="carDetail(scope.row)"
			type="text"
			size="small"
			title="轨迹"
			>
			<i class="el-icon-position"></i>
			</el-button>
			</template>
			@@ -57,18 +81,26 @@
			</el-table>

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

			<div class="list" v-show="navType == 2">
			<el-table :data="phoneList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
			<el-table
			:data="phoneList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
			style="width: 100%"
			:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
			:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
			:height="currentTableHeight">
			:height="currentTableHeight"
			>
			<el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
			<el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
			<el-table-column prop="state" label="状态" min-width="25%">
			@@ -79,10 +111,20 @@

			<el-table-column label="操作" align="center" min-width="25%">
			<template slot-scope="scope">
			<el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
			<el-button
			@click="rowClick(scope.row)"
			type="text"
			size="small"
			title="定位"
			>
			<i class="el-icon-location"></i>
			</el-button>
			<el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
			<el-button
			@click="carDetail(scope.row)"
			type="text"
			size="small"
			title="轨迹"
			>
			<i class="el-icon-position"></i>
			</el-button>
			</template>
			@@ -90,18 +132,26 @@
			</el-table>

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

			<div class="list" v-show="navType == 3">
			<el-table :data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
			<el-table
			:data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
			style="width: 100%"
			:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
			:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
			:height="currentTableHeight">
			:height="currentTableHeight"
			>
			<el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
			<el-table-column prop="dtType" label="类型" min-width="25%"></el-table-column>
			<el-table-column prop="state" label="状态" min-width="25%">
			@@ -112,10 +162,20 @@

			<el-table-column label="操作" align="center" min-width="25%">
			<template slot-scope="scope">
			<el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
			<el-button
			@click="rowClick(scope.row)"
			type="text"
			size="small"
			title="定位"
			>
			<i class="el-icon-location"></i>
			</el-button>
			<el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
			<el-button
			@click="carDetail(scope.row)"
			type="text"
			size="small"
			title="轨迹"
			>
			<i class="el-icon-position"></i>
			</el-button>
			</template>
			@@ -123,18 +183,26 @@
			</el-table>

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

			<div class="list" v-show="navType == 4">
			<el-table :data="zfList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
			<el-table
			:data="zfList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
			style="width: 100%"
			:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
			:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
			:height="currentTableHeight">
			:height="currentTableHeight"
			>
			<el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
			<el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
			<el-table-column label="状态" min-width="25%">
			@@ -145,10 +213,20 @@

			<el-table-column label="操作" align="center" min-width="25%">
			<template slot-scope="scope">
			<el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
			<el-button
			@click="rowClick(scope.row)"
			type="text"
			size="small"
			title="定位"
			>
			<i class="el-icon-location"></i>
			</el-button>
			<el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
			<el-button
			@click="carDetail(scope.row)"
			type="text"
			size="small"
			title="轨迹"
			>
			<i class="el-icon-position"></i>
			</el-button>
			</template>
			@@ -156,9 +234,15 @@
			</el-table>

			<div class="pages">
			<el-pagination background layout="prev, pager, next" :total="zfList.length"
			:page-size="pagesize" pager-count="3" :current-page="currentPage"
			@current-change="handleCurrentChange"></el-pagination>
			<el-pagination
			background
			layout="prev, pager, next"
			:total="zfList.length"
			:page-size="pagesize"
			pager-count="3"
			:current-page="currentPage"
			@current-change="handleCurrentChange"
			></el-pagination>
			</div>
			</div>
			</div>
			@@ -189,9 +273,15 @@
			<li>
			<div>选择时间：</div>
			<div class="datetime">
			<el-date-picker v-model="trackTime" type="datetimerange" range-separator="至"
			start-placeholder="开始日期" size="mini" :editable="false"
			end-placeholder="结束日期"></el-date-picker>
			<el-date-picker
			v-model="trackTime"
			type="datetimerange"
			range-separator="至"
			start-placeholder="开始日期"
			size="mini"
			:editable="false"
			end-placeholder="结束日期"
			></el-date-picker>
			</div>
			</li>

			@@ -224,9 +314,15 @@
			<li>
			<div>选择时间：</div>
			<div class="datetime">
			<el-date-picker v-model="trackTime" type="datetimerange" range-separator="至"
			start-placeholder="开始日期" size="mini" :editable="false"
			end-placeholder="结束日期"></el-date-picker>
			<el-date-picker
			v-model="trackTime"
			type="datetimerange"
			range-separator="至"
			start-placeholder="开始日期"
			size="mini"
			:editable="false"
			end-placeholder="结束日期"
			></el-date-picker>
			</div>
			</li>

			@@ -237,14 +333,33 @@
			</div>
			</div>

			<el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
			:close-on-click-modal="true" class="car-video-box">
			<video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
			style="object-fit: fill"></video>
			<el-dialog
			:title="dialogTitle"
			:modal="true"
			:visible.sync="dialogVisible"
			:before-close="dialogBeforeClose"
			:close-on-click-modal="true"
			class="car-video-box"
			>
			<video
			src="/video/sp.mp4"
			autoplay
			controls
			width="100%"
			height="100%"
			ref="videoElement"
			style="object-fit: fill"
			></video>
			</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>
			@@ -713,7 +828,7 @@
			display: flex;
			justify-content: space-around;

			&>div {
			& > div {
			flex: 1;
			}
			}
			@@ -752,7 +867,7 @@
			font-weight: 700;
			width: 80px;
			height: 100%;
			background-color: rgb(0, 92, 169);
			background-color: $table-body-tr-2n-color;
			color: #fff;
			border: 1px solid rgb(0, 92, 169);
			cursor: pointer;
			@@ -760,7 +875,7 @@
			}

			button:active {
			background-color: rgb(0, 92, 169);
			background-color: $table-body-tr-n-color;
			border: 1px solid rgb(0, 92, 169);
			}
			}
			@@ -780,7 +895,7 @@
			border-radius: 10px;
			overflow-y: auto;

			&>div {
			& > div {
			height: 100%;
			padding: 0 10px;
			line-height: 36px;
			@@ -860,18 +975,18 @@
			color: #fff;
			border-bottom: 1px solid #fff;

			&>div {
			& > div {
			text-align: center;
			}

			&>div:first-child {
			& > div:first-child {
			flex: 2;
			}

			&>div:last-child {
			& > div:last-child {
			flex: 6;

			&>div {
			& > div {
			width: 100% !important;
			}
			}

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

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

			<div class="list-show">
			<div class="car-list">
			<div class="list-box">
			<el-table :data="monitoringList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
			<el-table
			:data="monitoringList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
			style="width: 100%"
			:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
			:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
			:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
			@cell-click="rowClick"
			>
			<el-table-column prop="name" label="设备名称" min-width="50%"></el-table-column>
			<el-table-column prop="manufacture" label="设备类型" min-width="50%"></el-table-column>
			</el-table>
			</div>
			<div class="pages">
			<el-pagination background layout="prev, pager, next" :total="monitoringList.length"
			:page-size="pagesize" pager-count="3" :current-page="currentPage"
			@current-change="handleCurrentChange"></el-pagination>
			<el-pagination
			background
			layout="prev, pager, next"
			:total="monitoringList.length"
			:page-size="pagesize"
			pager-count="3"
			:current-page="currentPage"
			@current-change="handleCurrentChange"
			></el-pagination>
			</div>
			</div>
			</div>
			</div>

			<el-dialog :title="dialogTitle" :modal="true" :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="true"
			: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="true" :visible.sync="drawDialogVisible"
			:before-close="drawDialogBeforeClose" :close-on-click-modal="true" class="video-draw-box">
			<el-dialog
			:title="drawDialogTitle"
			:modal="true"
			: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>
			@@ -435,7 +471,7 @@
			font-weight: 700;
			width: 80px;
			height: 100%;
			background-color: rgb(0, 92, 169);
			background-color: $table-body-tr-n-color;
			color: #fff;
			border: 1px solid rgb(0, 92, 169);
			cursor: pointer;
			@@ -443,7 +479,7 @@
			}

			button:active {
			background-color: rgb(0, 92, 169);
			background-color: $table-body-tr-2n-color;
			border: 1px solid rgb(0, 92, 169);
			}
			}
			@@ -463,7 +499,7 @@
			border-radius: 10px;
			overflow-y: auto;

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

			&>div {
			& > div {
			height: 100%;
			display: flex;
			flex-direction: column;

			@@ -14,23 +14,33 @@
			<div class="left-container">
			<div v-show="boxShow" class="container-content">
			<div class="search-box">
			<input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
			<input
			v-model="searchValue"
			@input="searchChange"
			type="text"
			placeholder="请输入搜索条件"
			/>
			<button @click="searchClick" class="el-icon-search"></button>
			</div>

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

			<div class="list-show">
			<div class="car-list">
			<div class="list-box">
			<el-table :data="saveRangeList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
			<el-table
			:data="saveRangeList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
			style="width: 100%"
			:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
			:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
			@cell-click="rowClick">
			@cell-click="rowClick"
			>
			<el-table-column prop="name" label="范围名称" min-width="50%"></el-table-column>
			<el-table-column prop="type" label="范围类型" min-width="50%">
			<template slot-scope="scope">
			@@ -40,11 +50,20 @@
			</el-table-column>
			<el-table-column prop="id" label="操作" min-width="50%">
			<template slot-scope="scope">
			<el-button @click="flytoRange(scope.row)" type="text" size="small" title="定位">
			<el-button
			@click="flytoRange(scope.row)"
			type="text"
			size="small"
			title="定位"
			>
			<i class="el-icon-location"></i>
			</el-button>
			<el-button @click="deleteRegionSaveList(scope.row.id)" type="text" size="small"
			title="删除">
			<el-button
			@click="deleteRegionSaveList(scope.row.id)"
			type="text"
			size="small"
			title="删除"
			>
			<i class="el-icon-delete"></i>
			</el-button>
			</template>
			@@ -52,9 +71,15 @@
			</el-table>
			</div>
			<div class="pages">
			<el-pagination background layout="prev, pager, next" :total="monitoringList.length"
			:page-size="pagesize" pager-count="3" :current-page="currentPage"
			@current-change="handleCurrentChange"></el-pagination>
			<el-pagination
			background
			layout="prev, pager, next"
			:total="monitoringList.length"
			:page-size="pagesize"
			pager-count="3"
			:current-page="currentPage"
			@current-change="handleCurrentChange"
			></el-pagination>
			</div>
			</div>
			</div>
			@@ -63,81 +88,184 @@
			<div class="right-container">
			<div class="item">
			<div class="select">
			<el-select size="small" v-model="monitorType1" @change="navClick1" placeholder="请选择">
			<el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
			:value="item.value"></el-option>
			<el-select
			size="small"
			v-model="monitorType1"
			@change="navClick1"
			placeholder="请选择"
			>
			<el-option
			v-for="item in monitorOption"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			></el-option>
			</el-select>
			</div>
			<div class="video">
			<video id="videoElement1" autoplay controls width="100%" height="100%"
			style="object-fit: fill"></video>
			<video
			id="videoElement1"
			autoplay
			controls
			width="100%"
			height="100%"
			style="object-fit: fill"
			></video>
			</div>
			</div>
			<div class="item">
			<div class="select">
			<el-select size="small" v-model="monitorType2" @change="navClick2" placeholder="请选择">
			<el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
			:value="item.value"></el-option>
			<el-select
			size="small"
			v-model="monitorType2"
			@change="navClick2"
			placeholder="请选择"
			>
			<el-option
			v-for="item in monitorOption"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			></el-option>
			</el-select>
			</div>
			<div class="video">
			<video id="videoElement2" autoplay controls width="100%" height="100%"
			style="object-fit: fill"></video>
			<video
			id="videoElement2"
			autoplay
			controls
			width="100%"
			height="100%"
			style="object-fit: fill"
			></video>
			</div>
			</div>
			<div class="item">
			<div class="select">
			<el-select size="small" v-model="monitorType3" @change="navClick3" placeholder="请选择">
			<el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
			:value="item.value"></el-option>
			<el-select
			size="small"
			v-model="monitorType3"
			@change="navClick3"
			placeholder="请选择"
			>
			<el-option
			v-for="item in monitorOption"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			></el-option>
			</el-select>
			</div>
			<div class="video">
			<video id="videoElement3" autoplay controls width="100%" height="100%"
			style="object-fit: fill"></video>
			<video
			id="videoElement3"
			autoplay
			controls
			width="100%"
			height="100%"
			style="object-fit: fill"
			></video>
			</div>
			</div>
			<div class="item">
			<div class="select">
			<el-select size="small" v-model="monitorType4" @change="navClick4" placeholder="请选择">
			<el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
			:value="item.value"></el-option>
			<el-select
			size="small"
			v-model="monitorType4"
			@change="navClick4"
			placeholder="请选择"
			>
			<el-option
			v-for="item in monitorOption"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			></el-option>
			</el-select>
			</div>
			<div class="video">
			<video id="videoElement4" autoplay controls width="100%" height="100%"
			style="object-fit: fill"></video>
			<video
			id="videoElement4"
			autoplay
			controls
			width="100%"
			height="100%"
			style="object-fit: fill"
			></video>
			</div>
			</div>
			<div class="item t-left">
			<div class="select">
			<el-select size="small" v-model="monitorType5" @change="navClick5" placeholder="请选择">
			<el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
			:value="item.value"></el-option>
			<el-select
			size="small"
			v-model="monitorType5"
			@change="navClick5"
			placeholder="请选择"
			>
			<el-option
			v-for="item in monitorOption"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			></el-option>
			</el-select>
			</div>
			<div class="video">
			<video id="videoElement5" autoplay controls width="100%" height="100%"
			style="object-fit: fill"></video>
			<video
			id="videoElement5"
			autoplay
			controls
			width="100%"
			height="100%"
			style="object-fit: fill"
			></video>
			</div>
			</div>
			<div class="item t-right">
			<div class="select">
			<el-select size="small" v-model="monitorType6" @change="navClick6" placeholder="请选择">
			<el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
			:value="item.value"></el-option>
			<el-select
			size="small"
			v-model="monitorType6"
			@change="navClick6"
			placeholder="请选择"
			>
			<el-option
			v-for="item in monitorOption"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			></el-option>
			</el-select>
			</div>
			<div class="video">
			<video id="videoElement6" autoplay controls width="100%" height="100%"
			style="object-fit: fill"></video>
			<video
			id="videoElement6"
			autoplay
			controls
			width="100%"
			height="100%"
			style="object-fit: fill"
			></video>
			</div>
			</div>
			</div>

			<el-dialog :title="dialogTitle" :modal="true" :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="true"
			: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>
			</div>
			</template>
			@@ -537,7 +665,7 @@
			font-weight: 700;
			width: 80px;
			height: 100%;
			background-color: rgb(0, 92, 169);
			background-color: $table-body-tr-n-color;
			color: #fff;
			border: 1px solid rgb(0, 92, 169);
			cursor: pointer;
			@@ -545,7 +673,7 @@
			}

			button:active {
			background-color: rgb(0, 92, 169);
			background-color: $table-body-tr-2n-color;
			border: 1px solid rgb(0, 92, 169);
			}
			}
			@@ -565,7 +693,7 @@
			border-radius: 10px;
			overflow-y: auto;

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

			&>div {
			& > div {
			height: 100%;
			display: flex;
			flex-direction: column;