1

guanqb

2022-12-01 992c026d02e874c4049d941995cf3b76f8493344

1

 src/styles/base/index.scss

@@ -517,4 +517,9 @@
            }
        }
    }
}


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

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

@@ -1,21 +1,17 @@
// 表格  el-table!
// ------------------------------------------------------------------
.el-table tr th {
    // background: rgb(1, 76, 137) !important;
    background: rgba(7, 67, 220, 1)!important;
    background: $table-header-bg-color !important;
    color: #fff !important;
}

.el-table tr:nth-child(2n) {
    // background: rgba(20, 50, 123, 1.0);
    background: rgba(7, 67, 220, 0.45);
    background: $table-body-tr-2n-color;
    color: #fff !important;
}

.el-table tr:nth-child(2n-1) {
    // background: rgba(29, 38, 105, 1.0);
    background: rgba(7, 67, 220, 0.6);

    background: $table-body-tr-n-color;
    color: #fff;
}

@@ -49,7 +45,7 @@
// ------------------------------------------------------------------

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: rgba(29, 38, 105, 1.0);
    background-color: $table-body-tr-n-color;
    color: #ffffff !important;
}

@@ -76,7 +72,7 @@
}

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

/* 日历样式 */
.el-picker-panel {
    background-color: rgba(20, 50, 123, 1.0);
    background-color: $table-body-tr-2n-color;
    color: #ffffff;
    border: 1px solid #93bee7 !important;
}
@@ -283,7 +279,7 @@
    align-items: center;

    .el-checkbox__input.is-focus .el-checkbox__inner {
        border-color: rgba(20, 50, 123, 1.0) !important;
        border-color: $table-body-tr-2n-color !important;
        font-size: 16px;
    }

@@ -346,12 +342,12 @@

.el-table,
.el-table__expanded-cell {
    background-color: rgba(20, 50, 123, 1.0) !important;
    background-color: $table-body-tr-2n-color !important;
}

.tree-search-popup {
    top: 135px !important;
    background: rgb(20, 50, 123);
    background: $tree-search-bg-color;
    border: 1px solid rgb(0, 92, 169);
    color: #fff;


 src/styles/scssFile.scss

@@ -1,6 +1,8 @@
$bg-color: rgba(9, 40, 199, 0.8);

$el-dialog-bg-color: rgba(16, 29, 74, 1);
$tree-search-bg-color: rgba(9, 40, 199, 0.9);

$el-dialog-bg-color: rgba(9, 40, 199, 1);

$select-box-bg-color: rgba(9, 40, 199, 0.8);

@@ -14,6 +16,10 @@

$menu-tab-shadow: rgba(144, 202, 249, 0.8);

.select-on-tab {
    box-shadow: 0 0 10px $menu-tab-shadow;
}
$table-header-bg-color: rgba(9, 40, 199, 0.8);

$table-body-bg-color: rgba(9, 40, 199, 0.8);

$table-body-tr-n-color: rgba(17, 38, 163, 0.8);

$table-body-tr-2n-color: rgba(8, 56, 185, 0.8);

 src/views/activity/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-14 14:12:46
 * @LastEditTime: 2022-12-01 15:26:21
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 安保活动
 * 
@@ -18,12 +18,8 @@
                    <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>
@@ -37,52 +33,37 @@
                <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>
                                <div class="category">活动名称：</div>
                                <div class="category-value">{{item.name}}</div>
                                <div class="category-value">{{ item.name }}</div>
                            </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>
                                <div class="category-value">{{item.content}}</div>
                                <div class="category-value">{{ item.content }}</div>
                            </div>
                        </div>
                    </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>
@@ -184,24 +165,16 @@
            <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>

@@ -245,22 +218,12 @@
            </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>
@@ -980,11 +943,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;
@@ -1058,7 +1021,7 @@
                    font-size: 14px;

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

@@ -1077,11 +1040,11 @@
                }

                .row-box:hover {
                    background-color: rgb(1, 76, 137);
                    background-color: $table-header-bg-color;
                }

                .row-box.on {
                    background: rgb(1, 76, 137);
                    background: $table-header-bg-color;
                }

                :deep(.el-dialog) {
@@ -1200,7 +1163,7 @@
            line-height: 28px;
            display: flex;

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


 src/views/home/components/bottomContainer.vue

@@ -29,8 +29,8 @@
        </div>

        <div class="body" ref="tableBox" @click="handleSelectClick($event)">
            <ul>
                <li style="color: #fff; background: rgba(7, 67, 220, 0.2);">
            <ul class="title-header">
                <li>
                    <span class="num">序号</span>
                    <span class="type">警情类别</span>
                    <span class="dealTime">接警时间</span>
@@ -301,6 +301,13 @@
        width: calc(100% - 24px);
        height: calc(100% - 80px);

        .title-header {
            li {
                color: #fff !important;
                background: $table-header-bg-color !important;
            }
        }

        /* 解决自定义滚动条 x 轴显示问题 */
        .warp {
            margin: 0 auto;
@@ -354,16 +361,12 @@
            }

            li:nth-child(2n) {
                // background: rgba(20, 50, 123, 1);
                background: rgba(7, 67, 220, 0.2);

                background: rgba(20, 50, 123, 1);
                color: #fff !important;
            }

            li:nth-child(2n-1) {
                // background: rgba(29, 38, 105, 1);
                background: rgba(7, 67, 220, 0.2);

                background: rgba(29, 38, 105, 1);
                color: #fff;
            }
        }

 src/views/house/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-14 15:22:41
 * @LastEditTime: 2022-12-01 15:43:39
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -855,7 +855,7 @@
            max-height: 160px;
            text-align: left;
            color: #fff;
            background: rgba(16, 29, 74, 0.9);
            background: $el-dialog-bg-color;
            z-index: 1111;
            border-radius: 10px;
            overflow: hidden;

 src/views/lyout/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-12-01 09:29:17
 * @LastEditTime: 2022-12-01 15:48:04
 * @FilePath: \srs-police-affairs\src\views\lyout\index.vue
 * @Description: 
 * 
@@ -14,9 +14,8 @@
            <!-- <div class="title"></div> -->
            <div class="menu-list left">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    :class="{ on: currentUrl.indexOf(item.path) != -1 }" @click="goToPath(item)"
                    v-for="(item, index) in menuLeftList" :key="index">
                    <span>
                    @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">
@@ -35,9 +34,8 @@
            <!-- 菜单导航 -->
            <div class="menu-list right">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    :class="{ on: currentUrl.indexOf(item.path) != -1 }" @click="goToPath(item)"
                    v-for="(item, index) in menuRightList" :key="index">
                    <span>
                    @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">
@@ -322,11 +320,13 @@
            display: flex;
            align-items: center;

            &>.nav-list.on {
            &>.nav-list {

                // color: rgba(32, 106, 181, 1);
                // border-bottom: 2px solid #409eff;
                box-shadow: inset 0 0 10px $menu-tab-shadow;
                color: rgba(252, 189, 86, 1);
                &>span.on {
                    color: rgba(252, 189, 86, 1);
                }
            }

            .nav-list {

 src/views/police/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-15 16:12:04
 * @LastEditTime: 2022-12-01 15:43:45
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @Description: 辖区管理
 * 
@@ -14,42 +14,28 @@
        <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%">
@@ -60,20 +46,10 @@

                        <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>
@@ -81,26 +57,18 @@
                    </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%">
@@ -111,20 +79,10 @@

                        <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>
@@ -132,26 +90,18 @@
                    </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%">
@@ -162,20 +112,10 @@

                        <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>
@@ -183,26 +123,18 @@
                    </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%">
@@ -213,20 +145,10 @@

                        <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>
@@ -234,15 +156,9 @@
                    </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>
@@ -273,15 +189,9 @@
                    <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>

@@ -314,15 +224,9 @@
                    <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>

@@ -333,33 +237,14 @@
            </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>
@@ -828,7 +713,7 @@
            display: flex;
            justify-content: space-around;

            & > div {
            &>div {
                flex: 1;
            }
        }
@@ -890,12 +775,12 @@
                max-height: 160px;
                text-align: left;
                color: #fff;
                background: rgba(16, 29, 74, 0.9);
                background: $el-dialog-bg-color;
                z-index: 1111;
                border-radius: 10px;
                overflow-y: auto;

                & > div {
                &>div {
                    height: 100%;
                    padding: 0 10px;
                    line-height: 36px;
@@ -975,18 +860,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

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-24 14:29:33
 * @LastEditTime: 2022-12-01 15:43:51
 * @FilePath: \srs-police-affairs\src\views\video\list.vue
 * @Description: 辖区管理
 * 
@@ -13,12 +13,7 @@
    <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>

@@ -35,67 +30,36 @@
                <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>
@@ -494,12 +458,12 @@
            max-height: 160px;
            text-align: left;
            color: #fff;
            background: rgba(16, 29, 74, 0.9);
            background: $el-dialog-bg-color;
            z-index: 1111;
            border-radius: 10px;
            overflow-y: auto;

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

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

 src/views/video/region.vue

@@ -2,8 +2,8 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-18 10:02:31
 * @FilePath: \srs-police-affairs\src\views\video\list.vue
 * @LastEditTime: 2022-12-01 15:43:56
 * @FilePath: \srs-police-affairs\src\views\video\region.vue
 * @Description: 辖区管理
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
@@ -14,33 +14,23 @@
        <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">
@@ -50,20 +40,11 @@
                                </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>
@@ -71,15 +52,9 @@
                            </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>
@@ -88,184 +63,81 @@
        <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>
@@ -622,6 +494,7 @@
    display: flex;
    width: 100%;
    height: 100%;

    .left-container {
        position: relative;
        width: 400px;
@@ -687,12 +560,12 @@
                max-height: 160px;
                text-align: left;
                color: #fff;
                background: rgba(16, 29, 74, 0.9);
                background: $el-dialog-bg-color;
                z-index: 1111;
                border-radius: 10px;
                overflow-y: auto;

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

                & > div {
                &>div {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
@@ -711,6 +584,7 @@
                    // background-color: #fff;
                    .list-box {
                        flex: 1;

                        .btn {
                            width: 60px;
                            height: 30px;
@@ -720,6 +594,7 @@
                            cursor: pointer;
                            margin-top: 10px;
                        }

                        .btn:active {
                            background-color: rgb(0, 92, 169);
                            border: 1px solid rgb(0, 92, 169);
@@ -736,6 +611,7 @@
            }
        }
    }

    .right-container {
        position: absolute;
        bottom: 0;
@@ -744,24 +620,29 @@
        flex-wrap: wrap;
        height: 50%;
        left: 400px;

        .item {
            width: 25%;
            height: 100%;
            background-color: $bg-color;

            .select {
                height: 16%;
                padding-top: 6%;
            }

            .video {
                height: 75%;
                padding: 0 10px;
            }
        }

        .t-left {
            position: absolute;
            bottom: 100%;
            left: 0;
        }

        .t-right {
            position: absolute;
            bottom: 100%;