forked from srs-police-affairs
| src/components/map/index.vue | ●●●●● patch | view | raw | blame | history | |
| src/styles/media/index.scss | ●●●●● patch | view | raw | blame | history | |
| src/views/activity/index.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/home/components/leftContainer.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/home/index.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/components/map/index.vue
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2022-08-18 17:00:30 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2022-12-26 09:18:51 * @LastEditTime: 2022-12-28 10:19:11 * @FilePath: \srs-police-affairs\src\components\map\index.vue * @Description: 公用地图组件 * @@ -10,6 +10,8 @@ --> <template> <div class="viewer-box" id="viewer-container"> <slot ref="mainContent" name="mainContent"></slot> <slot name="showButton"></slot> <!-- 全屏控制按钮 --> <div class="screen-full-btn"> <el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark"> src/styles/media/index.scss
@@ -61,8 +61,6 @@ } .main-content { top: countSizeVh(60); height: calc(100% - countSizeVh(60)); .home-page { @@ -278,7 +276,7 @@ } .region-select { top: countSizeVh(20); top: countSizeVh(80); width: countSizeVw(640, 1920); height: countSizeVh(36); @@ -2092,7 +2090,11 @@ } .main-content.spread { position: absolute; top: countSizeVh(60); width: countSizeVw(400, 1920); height: calc(100% - countSizeVh(60)); z-index: 99; } .flexible-btn { @@ -2386,8 +2388,6 @@ } .main-content { top: maxCountSizeVh(60); height: calc(100% - maxCountSizeVh(60)); .left-container, .right-container { @@ -2441,7 +2441,7 @@ } .region-select { top: maxCountSizeVh(20); top: maxCountSizeVh(80); } } } src/views/activity/index.vue
@@ -475,7 +475,7 @@ mounted () { this.$parent.resize('400px', true) this.$parent.$parent.resize('400px', true) this.$nextTick(() => { if (analyseLayer == null) { @@ -1073,7 +1073,7 @@ this.removeAll() tc.clear() this.$parent.resize('0px') this.$parent.$parent.resize('0px') } } </script> src/views/home/components/leftContainer.vue
@@ -13,38 +13,21 @@ </div> </div> <div class="sub-tab" v-show="peopletype == 0"> <div class="tab3" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)" > <div class="tab3" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)"> <div class="num">164.57万人</div> <div class="type">户籍人口</div> </div> <div class="tab3" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)" > <div class="tab3" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)"> <div class="num">17.52万人</div> <div class="type">流动人口</div> </div> <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)" > <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)"> <div class="num">91995人</div> <div class="type">境外人口</div> </div> </div> <div id="PersonEcharts" class="echarts-box"></div> <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin" ></div> <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div> <!-- <svg viewBox="0 0 384 329" width="100%" height="100%" style="position: absolute; top: 0; left: 0;"> <defs> @@ -65,19 +48,11 @@ <div class="house-box" style="position: relative;"> <div class="title">现有房屋</div> <div class="sub-tab"> <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)" > <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)"> <div class="tab-title-small">实有房屋:</div> <div class="tab-title-small">182万户</div> </div> <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)" > <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)"> <div class="tab-title-small">关注场所:</div> <div class="tab-title-small">634个</div> </div> @@ -95,19 +70,11 @@ <div class="land-box" style="position: relative;"> <div class="title">现有地</div> <div class="sub-tab"> <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)" > <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)"> <div class="tab-title-small">小区:</div> <div class="tab-title-small">634个</div> </div> <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)" > <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)"> <div class="tab-title-small">责任区:</div> <div class="tab-title-small">634个</div> </div> @@ -1032,7 +999,7 @@ color: #fff; } & > div:nth-of-type(2) { &>div:nth-of-type(2) { font-size: 14px; } } @@ -1056,7 +1023,7 @@ border-radius: 8px; cursor: pointer; & > div { &>div { height: 22px; line-height: 22px; } src/views/home/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-12-13 15:10:42 * @LastEditTime: 2022-12-28 10:02:27 * @FilePath: \srs-police-affairs\src\views\home\index.vue * @Description: 小区-栋-层-房屋 * @@ -1518,7 +1518,7 @@ .left-container { display: flex; flex-direction: column; position: fixed; position: absolute; top: 60px; left: 0; width: 400px; @@ -1529,7 +1529,7 @@ .right-container { display: flex; flex-direction: column; position: fixed; position: absolute; top: 60px; right: 0; width: 400px; @@ -1540,7 +1540,7 @@ .center-container { display: flex; position: fixed; position: absolute; left: 50%; bottom: 318px; transform: translate(-50%, 0); @@ -1661,7 +1661,7 @@ } .bottom-container { position: fixed; position: absolute; left: 400px; bottom: 8px; height: 300px; @@ -1673,7 +1673,7 @@ .region-select { display: flex; position: absolute; top: 20px; top: 80px; width: 640px; height: 36px; z-index: 99; src/views/house/index.vue
@@ -597,7 +597,7 @@ // this.getUnitbuild('6E513C5E5D1611EAB6183C15FB00027B', '361102') }, mounted () { this.$parent.resize('400px', true) this.$parent.$parent.resize('400px', true) this.$nextTick(() => { this.searchHouse = this.$route.query.searchName @@ -867,7 +867,7 @@ // titlesetName: 'sdTilesetLayer' // }) this.$parent.resize('0px') this.$parent.$parent.resize('0px') } } </script> 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-27 09:33:59 * @LastEditTime: 2022-12-28 10:08:37 * @FilePath: \srs-police-affairs\src\views\lyout\index.vue * @Description: * @@ -17,9 +17,7 @@ <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span> <div class="sub-nav-list" v-show="item.children && item.childrenFlag"> <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)"> {{ subItem.menuName }} {{ subItem.menuName }} </div> </div> </div> @@ -36,9 +34,7 @@ <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span> <div class="sub-nav-list" v-show="item.children && item.childrenFlag"> <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)"> {{ subItem.menuName }} {{ subItem.menuName }} </div> </div> </div> @@ -76,18 +72,18 @@ <div class="main-container"> <!-- 地图区域 --> <mapBox ref="modalForm" /> <map-box ref="modalForm"> <!-- 主体内容区域 --> <div slot="mainContent" class="main-content" id="MainContent" :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"> <router-view ref="target-name"></router-view> </div> <!-- 主体内容区域 --> <div class="main-content" id="MainContent" :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"> <router-view ref="target-name"></router-view> </div> <el-button v-show="leftShow" class="flexible-btn" :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }" :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary" @click="flexibelClick"></el-button> <el-button slot="showButton" v-show="leftShow" class="flexible-btn" :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }" :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary" @click="flexibelClick"></el-button> </map-box> </div> </div> </template> @@ -154,7 +150,7 @@ created () { this.currentUrl = this.$route.path this.init(); this.init() }, watch: { @@ -183,8 +179,8 @@ }, methods: { init(){ this.user = this.$store.state.user.userInfo; init () { this.user = this.$store.state.user.userInfo }, //登出 goTOLogout () { @@ -514,12 +510,6 @@ position: relative; width: 100%; height: 100%; .main-content { position: absolute; top: 60px; height: calc(100% - 60px); } .main-content.spread { width: 400px; 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-12-15 10:33:21 * @LastEditTime: 2022-12-28 10:21:32 * @FilePath: \srs-police-affairs\src\views\police\index.vue * @Description: 辖区管理 * @@ -13,48 +13,28 @@ <div class="police-page container"> <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%"> @@ -65,20 +45,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> @@ -86,25 +56,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%"> @@ -115,20 +78,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> @@ -136,26 +89,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%"> @@ -166,20 +111,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> @@ -187,26 +122,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%"> @@ -217,20 +144,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> @@ -238,15 +155,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> @@ -277,15 +188,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> @@ -318,15 +223,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,33 +236,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> @@ -453,7 +333,7 @@ }, mounted () { this.$parent.resize('400px', true) this.$parent.$parent.resize('400px', true) this.navClick(1) @@ -809,7 +689,7 @@ window.removeEventListener('resize', this.setTableHeight) this.$parent.resize('0px') this.$parent.$parent.resize('0px') } } </script> @@ -834,7 +714,7 @@ display: flex; justify-content: space-around; & > div { &>div { flex: 1; } } @@ -901,7 +781,7 @@ border-radius: 10px; overflow-y: auto; & > div { &>div { height: 100%; padding: 0 10px; line-height: 36px; @@ -981,18 +861,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
@@ -149,7 +149,7 @@ }, mounted () { this.$parent.$parent.resize('400px', true) this.$parent.$parent.$parent.resize('400px', true) graphicLayer = new EntityDraw() }, @@ -440,7 +440,7 @@ graphicLayer.destroy() this.$parent.$parent.resize('0px') this.$parent.$parent.$parent.resize('0px') if (this.flvPlayer != null) { this.flvPlayer.pause() src/views/video/region.vue
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2022-08-18 16:18:17 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2022-12-01 15:43:56 * @LastEditTime: 2022-12-28 10:22:01 * @FilePath: \srs-police-affairs\src\views\video\region.vue * @Description: 辖区管理 * @@ -14,33 +14,22 @@ <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%" <el-table :data="saveRangeList" 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 +39,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 +51,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 +61,104 @@ </div> <div class="item video1" v-show="isShowVideo1"> <div class="select" v-show="isShowSelect.video1" @mouseenter="enterSelectBox(1)"> <el-select size="small" v-model="monitorType1" @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="monitorType1" @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" @mouseenter="enterVideoBox(1)" @mouseleave="leaveVideoBox(1)"> <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="isShowVideo2"> <div class="select" v-show="isShowSelect.video2" @mouseenter="enterSelectBox(2)"> <el-select size="small" v-model="monitorType2" @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="monitorType2" @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" @mouseenter="enterVideoBox(2)" @mouseleave="leaveVideoBox(2)"> <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="isShowVideo3"> <div class="select" v-show="isShowSelect.video3" @mouseenter="enterSelectBox(3)"> <el-select size="small" v-model="monitorType3" @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="monitorType3" @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" @mouseenter="enterVideoBox(3)" @mouseleave="leaveVideoBox(3)"> <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="isShowVideo4"> <div class="select" v-show="isShowSelect.video4" @mouseenter="enterSelectBox(4)"> <el-select size="small" v-model="monitorType4" @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="monitorType4" @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" @mouseenter="enterVideoBox(4)" @mouseleave="leaveVideoBox(4)"> <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="isShowVideo5"> <div class="select" v-show="isShowSelect.video5" @mouseenter="enterSelectBox(5)"> <el-select size="small" v-model="monitorType5" @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="monitorType5" @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" @mouseenter="enterVideoBox(5)" @mouseleave="leaveVideoBox(5)"> <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="isShowVideo6"> <div class="select" v-show="isShowSelect.video6" @mouseenter="enterSelectBox(6)"> <el-select size="small" v-model="monitorType6" @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="monitorType6" @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" @mouseenter="enterVideoBox(6)" @mouseleave="leaveVideoBox(6)"> <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="isShowVideo7"> <div class="select" v-show="isShowSelect.video7" @mouseenter="enterSelectBox(7)"> <el-select size="small" v-model="monitorType7" 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="monitorType7" 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" @mouseenter="enterVideoBox(7)" @mouseleave="leaveVideoBox(7)"> <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="isShowVideo8"> <div class="select" v-show="isShowSelect.video8" @mouseenter="enterSelectBox(8)"> <el-select size="small" v-model="monitorType8" @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="monitorType8" @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" @mouseenter="enterVideoBox(8)" @mouseleave="leaveVideoBox(8)"> <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="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> @@ -400,7 +232,7 @@ }, mounted () { this.$parent.$parent.resize('400px', true) this.$parent.$parent.$parent.resize('400px', true) graphicLayer = new EntityDraw() }, @@ -742,7 +574,7 @@ graphicLayer.destroy() this.$parent.$parent.resize('0px') this.$parent.$parent.$parent.resize('0px') if (this.flvPlayer != null) { this.flvPlayer.pause() @@ -833,7 +665,7 @@ border-radius: 10px; overflow-y: auto; & > div { &>div { height: 100%; padding: 0 10px; line-height: 36px; @@ -844,7 +676,7 @@ .list-show { flex: 1; & > div { &>div { height: 100%; display: flex; flex-direction: column; @@ -899,12 +731,15 @@ padding: 1%; } } .video1 { left: calc(1540 / 1920 * 100vw); } .video2 { left: calc(400 / 1920 * 100vw); } .video3 { left: calc(400 / 1920 * 100vw); top: calc(340 / 1080 * 100vh); @@ -914,18 +749,22 @@ left: calc(1540 / 1920 * 100vw); top: calc(340 / 1080 * 100vh); } .video5 { left: calc(400 / 1920 * 100vw); top: calc(680 / 1080 * 100vh); } .video6 { left: calc(1540 / 1920 * 100vw); top: calc(680 / 1080 * 100vh); } .video7 { left: calc(780 / 1920 * 100vw); top: calc(680 / 1080 * 100vh); } .video8 { left: calc(1160 / 1920 * 100vw); top: calc(680 / 1080 * 100vh); @@ -939,9 +778,11 @@ padding-bottom: 0; } } .video7 .video { padding: 1% 0; } .video8 .video { padding: 1% 0 1% 1%; }
