forked from srs-police-affairs
| src/components/select/index.vue | ●●●●● 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/house/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/components/select/index.vue
@@ -118,13 +118,13 @@ justify-content: flex-start; align-items: center; line-height: 35px; background: rgba(33, 61, 106, 0.8); //下拉框默认背景 background: rgba(35, 50, 167, 0.7); //下拉框默认背景 cursor: pointer; } //鼠标移到下拉框时的背景 div:hover { background: rgba(36, 120, 162, 0.8); background: rgba(45,92,200, 0.8); color: white; }
@@ -38,7 +38,8 @@ .el-table tr:hover { td { cursor: pointer; background-color: rgba(222, 176, 176, 0.2) !important; // background-color: rgba(222, 176, 176, 0.2) !important; background-color: rgba(29, 92, 228, 0.7) !important; } } @@ -116,7 +117,8 @@ color: #fff; font-weight: 200; // background-color: $table-body-tr-n-color!important; background-color: rgba(8, 56, 185, .9) !important; // background-color: rgba(8, 56, 185, .9) !important; background-color: rgba(35, 50, 167, 0.85) !important; } .el-select-dropdown__list { @@ -133,7 +135,7 @@ } .el-select-dropdown__item:hover { background-color: #2d5cc8 !important; background-color: rgba(45,92,200, 0.95)!important; } .el-select-dropdown__item:onBlur { @@ -397,7 +399,7 @@ .tree-search-popup { top: 135px !important; background: $tree-search-bg-color; border: 1px solid rgb(0, 92, 169); border: 1px solid rgba(35, 50, 167, 0.7); color: #fff; .select-tree-box { @@ -424,5 +426,5 @@ border: 10px solid; transform: translate(-50%, -100%); border-color: transparent transparent rgb(0, 92, 169) transparent; border-color: transparent transparent rgba(35, 50, 167, 0.7) transparent; } src/styles/scssFile.scss
@@ -4,7 +4,7 @@ $tree-search-bg-color: rgba(9, 40, 199, 0.9); $tree-search-bg-color: rgba(35, 50, 167, 0.75); $el-dialog-bg-color: $bg-one-color;
@@ -14,7 +14,7 @@ <div v-show="boxShow" class="container-content"> <div class="title">安保活动</div> <div class="search-box"> <div> <!-- <div> <div class="category">活动类型：</div> <div class="category-value"> <el-select @@ -32,7 +32,7 @@ ></el-option> </el-select> </div> </div> </div> --> <div> <div class="category">选择时间：</div> @@ -1347,7 +1347,7 @@ font-size: 12px; text-indent: 1em; color: #ffffff; background-color: transparent; background-color: rgba(24, 79, 202, 0.6);; border: 1px solid rgb(0, 92, 169); border-radius: 5px 0 0 5px; } @@ -1428,11 +1428,11 @@ } .row-box:hover { background-color: rgba(222, 176, 176, 0.2) !important; background-color: rgba(29, 92, 228, 0.7)!important; } .row-box.on { background-color: rgba(222, 176, 176, 0.2) !important; background-color: rgba(29, 92, 228, 0.7) !important; } :deep(.el-dialog) { src/views/house/index.vue
@@ -1466,8 +1466,9 @@ width: 84px; height: 26px; border-radius: 13px; background: #202434; // background: #202434; cursor: default; border: 0.0925925926vh solid #fff; } & > .on { @@ -1586,7 +1587,7 @@ font-size: 18px; text-indent: 1em; color: #ffffff; background-color: $table-body-tr-2n-color; background-color: rgba(24, 79, 202, 0.75); border: 1px solid rgb(0, 92, 169); border-radius: 20px 0 0 20px; vertical-align: top; src/views/police/index.vue
@@ -14,49 +14,29 @@ <div v-show="boxShow" class="container-content"> <div class="switch-box"> 资源类别： <el-select v-model="typeValue" @change="navClick" placeholder="请选择" class="type-select-css" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" class="option-css" ></el-option> <el-select v-model="typeValue" @change="navClick" placeholder="请选择" class="type-select-css"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" class="option-css"></el-option> </el-select> </div> <div class="list-show" ref="tableBox" v-show="!detailFlag"> <div class="search-box" ref="tableSearchBox"> 资源名称： <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" <el-table :data="carList" :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%"> @@ -67,20 +47,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> @@ -88,25 +58,18 @@ </el-table> <div class="pages"> <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="carPagesCount" :current-page="currentPage" @current-change="handleCurrentChange" ></el-pagination> <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="carPagesCount" :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%"> @@ -117,20 +80,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> @@ -138,26 +91,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%"> @@ -168,20 +113,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> @@ -189,26 +124,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%"> @@ -219,20 +146,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> @@ -240,20 +157,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> <div class="track-box" v-show="detailFlag"> <div class="track-box-info"> <div class="back-btn" @click="goBack" title="轨迹">详细资料及轨迹查询</div> <ul v-show="navType == 1"> <li> @@ -279,15 +191,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="daterange" unlink-panels range-separator="至" start-placeholder="开始日期" size="mini" :editable="false" end-placeholder="结束日期"></el-date-picker> </div> </li> @@ -320,15 +226,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> @@ -337,35 +237,18 @@ </li> </ul> </div> </div> </div> <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box" > <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" style="object-fit: fill" ></video> <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box"> <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" style="object-fit: fill"></video> </el-dialog> <el-dialog :title="phoneTitle" :modal="false" :visible.sync="phoneVisible" :before-close="phoneBeforeClose" :close-on-click-modal="true" class="phone-details-box" > <el-dialog :title="phoneTitle" :modal="false" :visible.sync="phoneVisible" :before-close="phoneBeforeClose" :close-on-click-modal="true" class="phone-details-box"> <div class="item"> <div>责任人：</div> <div>{{ phoneDetails.person }}</div> @@ -859,8 +742,9 @@ font-size: 18px; text-indent: 1em; color: #ffffff; background-color: transparent; border: 1px solid rgb(0, 92, 169); background-color: rgba(24, 79, 202, 0.6); // border: 1px solid rgb(0, 92, 169); border: 1px solid rgb(24, 79, 202); border-radius: 20px 0 0 20px; } @@ -943,7 +827,12 @@ .track-box { height: calc(100% - 50px); background: rgba(20, 50, 123, 1); // background: rgba(20, 50, 123, 1); .track-box-info { background: rgba(8, 56, 185, 0.5); } .back-btn { position: relative; @@ -960,14 +849,14 @@ font-family: element-icons; height: 28px; line-height: 28px; color: #388ae7; color: #fff; position: absolute; top: 4px; left: 8px; } .back-btn:hover::before { color: #5a9eeb; color: #fff; } ul { src/views/video/list.vue
@@ -13,16 +13,13 @@ <div class="list 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 class="draw-btn"> 操作名称： <el-button type="primary" size="mini" @click="draw('polygon')">绘制面</el-button> <el-button type="primary" size="mini" @click="draw('polyline')">绘制线</el-button> <el-button type="primary" size="mini" @click="removeDrawLayer">清除</el-button> @@ -35,74 +32,40 @@ <button @click="changeRange" class="btn">确定</button> </div> <div v-show="searchValBoxShow" class="search-val-box"> <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index" >{{ item.name }}</div> <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }} </div> </div> <div class="list-show"> <div class="car-list"> <div class="list-box"> <el-table :data="monitoringList" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick" > <el-table :data="monitoringList" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick"> <el-table-column prop="name" label="设备名称" min-width="35%"></el-table-column> <el-table-column prop="pTZTypeText" label="设备类型" min-width="35%"></el-table-column> <el-table-column prop="status" label="状态" min-width="30%"> <template slot-scope="scope"> <div class="state-box" :class="{ online: scope.row.status == '1' }" ></div> <div class="state-box" :class="{ online: scope.row.status == '1' }"></div> </template> </el-table-column> </el-table> </div> <div class="pages"> <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount" :current-page="currentPage" @current-change="handleCurrentChange" ></el-pagination> <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount" :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination> </div> </div> </div> </div> <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box" > <video id="videoElement" autoplay controls width="100%" height="100%" style="object-fit: fill" ></video> <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box"> <video id="videoElement" autoplay controls width="100%" height="100%" style="object-fit: fill"></video> </el-dialog> <el-dialog :title="drawDialogTitle" :modal="false" :visible.sync="drawDialogVisible" :before-close="drawDialogBeforeClose" :close-on-click-modal="true" class="video-draw-box" > <el-dialog :title="drawDialogTitle" :modal="false" :visible.sync="drawDialogVisible" :before-close="drawDialogBeforeClose" :close-on-click-modal="true" class="video-draw-box"> <input type="text" v-model="drawName" placeholder="请输入绘制线或面的名称" /> <button @click="saveDrawInfo">保存</button> </el-dialog> @@ -466,8 +429,10 @@ .search-box { padding: 6px; height: 52px; height: 46px; display: flex; align-items: center; input { flex: 1; @@ -475,8 +440,9 @@ font-size: 18px; text-indent: 1em; color: #ffffff; background-color: transparent; border: 1px solid rgb(0, 92, 169); background-color: rgba(24, 79, 202, 0.6); // border: 1px solid rgb(0, 92, 169); border: 1px solid rgb(24, 79, 202); border-radius: 20px 0 0 20px; } @@ -540,6 +506,11 @@ .el-button { flex: 1; } :deep(.el-button--primary) { background-color: #1D5CE4; border-color: #1D5CE4; } } .range-input { src/views/video/region.vue
@@ -14,33 +14,23 @@ <div class="region-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" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" <el-table :data="saveRangeList" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick" > @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,14 +52,9 @@ </el-table> </div> <div class="pages"> <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount" :current-page="currentPage" @current-change="handleCurrentChange" ></el-pagination> <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount" :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination> </div> </div> </div> @@ -86,247 +62,104 @@ </div> <div class="item video1" v-show="isShowVideo.video1"> <div class="select" v-show="isShowSelect.video1"> <el-select size="small" v-model="monitor.type1" @change="((val) => { navClick(val, 1) })" placeholder="请选择" ref="videoSelect1" > <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value" ></el-option> <el-select size="small" v-model="monitor.type1" @change="((val) => { navClick(val, 1) })" placeholder="请选择" ref="videoSelect1"> <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 video2" v-show="isShowVideo.video2"> <div class="select" v-show="isShowSelect.video2"> <el-select size="small" v-model="monitor.type2" @change="((val) => { navClick(val, 2) })" placeholder="请选择" ref="videoSelect2" > <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value" ></el-option> <el-select size="small" v-model="monitor.type2" @change="((val) => { navClick(val, 2) })" placeholder="请选择" ref="videoSelect2"> <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 video3" v-show="isShowVideo.video3"> <div class="select" v-show="isShowSelect.video3"> <el-select size="small" v-model="monitor.type3" @change="((val) => { navClick(val, 3) })" placeholder="请选择" ref="videoSelect3" > <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value" ></el-option> <el-select size="small" v-model="monitor.type3" @change="((val) => { navClick(val, 3) })" placeholder="请选择" ref="videoSelect3"> <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 video4" v-show="isShowVideo.video4"> <div class="select" v-show="isShowSelect.video4"> <el-select size="small" v-model="monitor.type4" @change="((val) => { navClick(val, 4) })" placeholder="请选择" ref="videoSelect4" > <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value" ></el-option> <el-select size="small" v-model="monitor.type4" @change="((val) => { navClick(val, 4) })" placeholder="请选择" ref="videoSelect4"> <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 video5" v-show="isShowVideo.video5"> <div class="select" v-show="isShowSelect.video5"> <el-select size="small" v-model="monitor.type5" @change="((val) => { navClick(val, 5) })" placeholder="请选择" ref="videoSelect5" > <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value" ></el-option> <el-select size="small" v-model="monitor.type5" @change="((val) => { navClick(val, 5) })" placeholder="请选择" ref="videoSelect5"> <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </div> <div class="video"> <video id="videoElement5" autoplay controls width="100%" height="100%" style="object-fit: fill" ></video> <video id="videoElement5" autoplay controls width="100%" height="100%" style="object-fit: fill"></video> </div> </div> <div class="item video6" v-show="isShowVideo.video6"> <div class="select" v-show="isShowSelect.video6"> <el-select size="small" v-model="monitor.type6" @change="((val) => { navClick(val, 6) })" placeholder="请选择" ref="videoSelect6" > <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value" ></el-option> <el-select size="small" v-model="monitor.type6" @change="((val) => { navClick(val, 6) })" placeholder="请选择" ref="videoSelect6"> <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </div> <div class="video"> <video id="videoElement6" autoplay controls width="100%" height="100%" style="object-fit: fill" ></video> <video id="videoElement6" autoplay controls width="100%" height="100%" style="object-fit: fill"></video> </div> </div> <div class="item video7" v-show="isShowVideo.video7"> <div class="select" v-show="isShowSelect.video7"> <el-select size="small" v-model="monitor.type7" v-show="isShowSelect.video7" @change="((val) => { navClick(val, 7) })" placeholder="请选择" ref="videoSelect7" > <el-option v-show="isShowSelect.video7" v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value" ></el-option> <el-select size="small" v-model="monitor.type7" v-show="isShowSelect.video7" @change="((val) => { navClick(val, 7) })" placeholder="请选择" ref="videoSelect7"> <el-option v-show="isShowSelect.video7" v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </div> <div class="video"> <video id="videoElement7" autoplay controls width="100%" height="100%" style="object-fit: fill" ></video> <video id="videoElement7" autoplay controls width="100%" height="100%" style="object-fit: fill"></video> </div> </div> <div class="item video8" v-show="isShowVideo.video8"> <div class="select" v-show="isShowSelect.video8"> <el-select size="small" v-model="monitor.type8" @change="((val) => { navClick(val, 8) })" placeholder="请选择" ref="videoSelect8" > <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value" ></el-option> <el-select size="small" v-model="monitor.type8" @change="((val) => { navClick(val, 8) })" placeholder="请选择" ref="videoSelect8"> <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </div> <div class="video"> <video id="videoElement8" autoplay controls width="100%" height="100%" style="object-fit: fill" ></video> <video id="videoElement8" autoplay controls width="100%" height="100%" style="object-fit: fill"></video> </div> </div> <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box" > <video id="videoElement" autoplay controls width="100%" height="100%" style="object-fit: fill" ></video> <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box"> <video id="videoElement" autoplay controls width="100%" height="100%" style="object-fit: fill"></video> </el-dialog> </div> </template> @@ -831,8 +664,9 @@ .search-box { padding: 6px; height: 52px; height: 46px; display: flex; align-items: center; input { flex: 1; @@ -840,8 +674,9 @@ font-size: 18px; text-indent: 1em; color: #ffffff; background-color: transparent; border: 1px solid rgb(0, 92, 169); background-color: rgba(24,79,202,0.6); // border: 1px solid rgb(0, 92, 169); border: 1px solid rgb(24, 79, 202); border-radius: 20px 0 0 20px; }
