forked from srs-police-affairs
| src/styles/base/index.scss | ●●●●● patch | view | raw | blame | history | |
| src/styles/element-ui/element-ui.scss | ●●●●● patch | view | raw | blame | history | |
| src/styles/scssFile.scss | ●●●●● patch | view | raw | blame | history | |
| src/views/activity/index.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/home/components/bottomContainer.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/house/index.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/lyout/index.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/police/index.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/video/list.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/video/region.vue | ●●●●● patch | view | raw | blame | history |
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,17 +1,17 @@ // 表格 el-table! // ------------------------------------------------------------------ .el-table tr th { background: rgb(1, 76, 137) !important; background: $table-header-bg-color !important; color: #fff !important; } .el-table tr:nth-child(2n) { background: rgba(20, 50, 123, 1.0); background: $table-body-tr-2n-color; color: #fff !important; } .el-table tr:nth-child(2n-1) { background: rgba(29, 38, 105, 1.0); background: $table-body-tr-n-color; color: #fff; } @@ -45,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; } @@ -72,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); } @@ -118,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; } @@ -279,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; } @@ -342,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;
@@ -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> @@ -175,24 +156,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> @@ -236,22 +209,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> @@ -969,11 +932,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; @@ -1047,7 +1010,7 @@ font-size: 14px; .row-content { & > div { &>div { display: flex; line-height: 28px; @@ -1066,11 +1029,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) { @@ -1189,7 +1152,7 @@ line-height: 28px; display: flex; & > div { &>div { text-align: left; }
@@ -13,8 +13,8 @@ </div> <div class="body" ref="tableBox" @click="handleSelectClick($event)"> <ul> <li style="color: #fff; background: rgb(1, 76, 137);"> <ul class="title-header"> <li> <span class="num">序号</span> <span class="type">警情类别</span> <span class="dealTime">接警时间</span> @@ -279,6 +279,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; @@ -332,12 +339,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/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%;
