forked from srs-police-affairs
| src/styles/base/index.css | ●●●●● patch | view | raw | blame | history | |
| src/styles/base/index.min.css | ●●●●● patch | view | raw | blame | history | |
| src/styles/base/index.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/index.vue | ●●●●● patch | view | raw | blame | history |
src/styles/base/index.css
@@ -66,6 +66,11 @@ .car-video-box .el-dialog .el-dialog__body { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .police-affairs-details-box .el-dialog { @@ -73,14 +78,46 @@ display: flex; flex-direction: column; width: 540px; height: 420px; height: 320px; top: 50%; left: 50% !important; transform: translate(-50%, -50%); } .police-affairs-details-box .el-dialog .el-dialog__header { height: 56px; line-height: 56px; } .police-affairs-details-box .el-dialog .el-dialog__body { flex: 1; display: flex; flex-direction: row; flex-wrap: wrap; justify-self: flex-start; align-content: flex-start; } .police-affairs-details-box .el-dialog .el-dialog__body .item { display: flex; flex-direction: row; width: calc(50% - 20px); height: 36px; line-height: 36px; margin: 0 10px; text-align: left; } .police-affairs-details-box .el-dialog .el-dialog__body .item > div:first-child { width: 100px; text-align: justify; display: inline-block; text-align-last: justify; margin-right: 20px; } .police-affairs-details-box .el-dialog .el-dialog__body .item > div:nth-of-type(2) { width: calc(100% - 120px); } .resident-details-box .el-dialog { src/styles/base/index.min.css
@@ -1 +1 @@ *{margin:0;padding:0;box-sizing:border-box;scrollbar-color:rgba(7,22,37,0.8) rgba(216,216,216,0.2);scrollbar-width:thin}html,body{width:100%;height:100%}ul li{list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:6px;height:6px;background-color:none}::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(7,22,37,0.8);padding-left:2px;padding-right:2px}::-webkit-scrollbar-track{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:window-inactive{background-color:rgba(7,22,37,0.8)}:not(select)::-webkit-scrollbar{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:hover{background-color:rgba(7,22,37,0.8)}.car-video-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:480px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.car-video-box .el-dialog .el-dialog__body{flex:1}.police-affairs-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:540px;height:420px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.police-affairs-details-box .el-dialog .el-dialog__body{flex:1}.resident-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.resident-details-box .el-dialog .el-dialog__body{flex:1}.panorama-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:960px;height:600px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.phone-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.phone-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.phone-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.phone-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.area-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:700px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.area-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.area-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.area-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.area-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.area-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.equiment-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:600px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.equiment-details-box .el-dialog .el-dialog__body{flex:1}.land-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:630px;height:300px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.land-details-box .el-dialog .el-dialog__body{flex:1}.keyPerson-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:700px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.keyPerson-details-box .el-dialog .el-dialog__body{flex:1}.policeSituation-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:800px;height:500px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.policeSituation-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.policeSituation-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.policeSituation-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.policeSituation-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.policeSituation-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content{display:flex;height:36px;line-height:36px;flex-direction:row;text-align:left;margin-left:10px}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content>div:nth-of-type(2){width:calc(100% - 120px)}.activity-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:640px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.activity-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.activity-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.activity-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.activity-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.activity-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)} *{margin:0;padding:0;box-sizing:border-box;scrollbar-color:rgba(7,22,37,0.8) rgba(216,216,216,0.2);scrollbar-width:thin}html,body{width:100%;height:100%}ul li{list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:6px;height:6px;background-color:none}::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(7,22,37,0.8);padding-left:2px;padding-right:2px}::-webkit-scrollbar-track{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:window-inactive{background-color:rgba(7,22,37,0.8)}:not(select)::-webkit-scrollbar{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:hover{background-color:rgba(7,22,37,0.8)}.car-video-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:480px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.car-video-box .el-dialog .el-dialog__body{flex:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.police-affairs-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:540px;height:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.police-affairs-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.police-affairs-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.police-affairs-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.police-affairs-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.police-affairs-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.resident-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.resident-details-box .el-dialog .el-dialog__body{flex:1}.panorama-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:960px;height:600px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.phone-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.phone-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.phone-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.phone-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.area-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:700px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.area-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.area-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.area-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.area-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.area-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.equiment-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:600px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.equiment-details-box .el-dialog .el-dialog__body{flex:1}.land-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:630px;height:300px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.land-details-box .el-dialog .el-dialog__body{flex:1}.keyPerson-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:700px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.keyPerson-details-box .el-dialog .el-dialog__body{flex:1}.policeSituation-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:800px;height:500px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.policeSituation-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.policeSituation-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.policeSituation-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.policeSituation-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.policeSituation-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content{display:flex;height:36px;line-height:36px;flex-direction:row;text-align:left;margin-left:10px}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content>div:nth-of-type(2){width:calc(100% - 120px)}.activity-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:640px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.activity-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.activity-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.activity-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.activity-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.activity-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)} src/styles/base/index.scss
@@ -69,6 +69,11 @@ .el-dialog__body { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } } } @@ -79,13 +84,44 @@ display: flex; flex-direction: column; width: 540px; height: 420px; height: 320px; top: 50%; left: 50% !important; transform: translate(-50%, -50%); .el-dialog__header { height: 56px; line-height: 56px; } .el-dialog__body { flex: 1; display: flex; flex-direction: row; flex-wrap:wrap; justify-self: flex-start; align-content: flex-start; .item { display: flex; flex-direction:row; width: calc(50% - 20px); height: 36px; line-height: 36px; margin: 0 10px; text-align: left; &>div:first-child { width: 100px; text-align: justify; display: inline-block; text-align-last: justify; margin-right: 20px; } &>div:nth-of-type(2) { width: calc(100% - 120px); } } } } } src/views/activity/index.vue
@@ -18,8 +18,12 @@ <div class="category">活动类型：</div> <div class="category-value"> <el-select size="small" v-model="activityType" placeholder="请选择"> <el-option v-for="item in activityOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in activityOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </div> </div> @@ -33,16 +37,25 @@ <div> <div class="category">选择时间：</div> <div class="category-value"> <el-date-picker size="small" v-model="selectTime" type="date" placeholder="选择日期" style="width:268px"></el-date-picker> <el-date-picker size="small" v-model="selectTime" type="date" placeholder="选择日期" style="width:268px" ></el-date-picker> </div> </div> </div> <div class="result-content"> <div class="table-box"> <div class="row-box" :class="{ on: currentClickIndex === index }" <div class="row-box" :class="{ on: currentClickIndex === index }" v-for="(item, index) in activityList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" :key="index" @click="goAbDetail(item, index)"> :key="index" @click="goAbDetail(item, index)" > <div class="row-title">常规安保</div> <div class="row-content"> <div> @@ -51,7 +64,9 @@ </div> <div> <div class="category">活动时间：</div> <div class="category-value">2022-08-01 00:00:00 至 2022-09-01 00:00:00</div> <div class="category-value" >2022-08-01 00:00:00 至 2022-09-01 00:00:00</div> </div> <div> <div class="category">活动详情：</div> @@ -61,9 +76,15 @@ </div> </div> <div class="pages"> <el-pagination background layout="prev, pager, next" :total="activityList.length" :page-size="pagesize" pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination> <el-pagination background layout="prev, pager, next" :total="activityList.length" :page-size="pagesize" pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange" ></el-pagination> </div> </div> </div> @@ -153,8 +174,12 @@ <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> @@ -691,11 +716,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; @@ -769,7 +794,7 @@ font-size: 14px; .row-content { &>div { & > div { display: flex; line-height: 28px; @@ -904,7 +929,7 @@ line-height: 28px; display: flex; &>div { & > div { text-align: left; }
@@ -18,8 +18,11 @@ <div v-show="searchValBoxShow" class="search-val-box"> <div> <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> @@ -53,16 +56,39 @@ </div> <div class="nav-tab"> <div class="nav" :class="navType == 0 ? 'choosed' : ''" @click="navClick" data-type="0">基本信息</div> <div class="nav" :class="navType == 1 ? 'choosed' : ''" @click="navClick" data-type="1">警务信息</div> <div class="nav" :class="navType == 2 ? 'choosed' : ''" @click="navClick" data-type="2">预警信息</div> <div class="nav" :class="navType == 0 ? 'choosed' : ''" @click="navClick" data-type="0" >基本信息</div> <div class="nav" :class="navType == 1 ? 'choosed' : ''" @click="navClick" data-type="1" >警务信息</div> <div class="nav" :class="navType == 2 ? 'choosed' : ''" @click="navClick" data-type="2" >预警信息</div> </div> <div class="base-info" v-show="navType == 0"> <div class="sub-nav-list"> <div class="sub-nav" :class="{ on: subNavType == 1 }" @click="subNavType = 1">楼栋</div> <div class="sub-nav" :class="{ on: subNavType == 2 }" @click="subNavType = 2">出入口</div> <div class="sub-nav" :class="{ on: subNavType == 3 }" @click="subNavType = 3">停车场</div> <div class="sub-nav" :class="{ on: subNavType == 2 }" @click="subNavType = 2" >出入口</div> <div class="sub-nav" :class="{ on: subNavType == 3 }" @click="subNavType = 3" >停车场</div> <div class="sub-nav" :class="{ on: subNavType == 4 }" @click="subNavType = 4">商业</div> </div> @@ -72,13 +98,22 @@ <i class="el-icon-caret-left"></i> </div> <div class="build-outBox"> <div class="build-box" style="left: 0px;" :style="{ width: Math.ceil(villageHousesList.length / 10) * 356 + 'px' }"> <div class="ridgepole-list" v-for="index of Math.ceil(villageHousesList.length / 10)" :key="index"> <div v-for="(item, index) in villageHousesList.slice((index - 1) * 10, index * 10)" :key="index" @click="buildingClick(item)" :class="{ on: ridgepoleNum.name == item.name }">{{ item.name }}</div> <div class="build-box" style="left: 0px;" :style="{ width: Math.ceil(villageHousesList.length / 10) * 356 + 'px' }" > <div class="ridgepole-list" v-for="index of Math.ceil(villageHousesList.length / 10)" :key="index" > <div v-for="(item, index) in villageHousesList.slice((index - 1) * 10, index * 10)" :key="index" @click="buildingClick(item)" :class="{ on: ridgepoleNum.name == item.name }" >{{ item.name }}</div> </div> </div> </div> @@ -163,9 +198,18 @@ <div class="condo"> <div class="type">选择单元</div> <div class="type-select"> <el-select size="small" v-model="apartmentValue" placeholder="请选择" @change="chooseUnit"> <el-option v-for="item in ridgepoleNum1.unit" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-select size="small" v-model="apartmentValue" placeholder="请选择" @change="chooseUnit" > <el-option v-for="item in ridgepoleNum1.unit" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </div> </div> @@ -174,17 +218,20 @@ <div class="type-val"> <div> <span style="width: 10px; height: 10px; background: #0E88FF; border-radius: 50%;"></span> style="width: 10px; height: 10px; background: #0E88FF; border-radius: 50%;" ></span> 流动人口 </div> <div> <span style="width: 10px; height: 10px; background: #FF796C; border-radius: 50%;"></span> style="width: 10px; height: 10px; background: #FF796C; border-radius: 50%;" ></span> 重点人员 </div> <div> <span style="width: 10px; height: 10px; background: #FEAC04; border-radius: 50%;"></span> style="width: 10px; height: 10px; background: #FEAC04; border-radius: 50%;" ></span> 境外人口 </div> </div> @@ -193,16 +240,24 @@ <div class="type">房屋图例</div> <div class="type-val"> <div> <span style="width: 14px; height: 8px; border: 1px solid #3A8B3A;"></span> 出租 <span style="width: 14px; height: 8px; border: 1px solid #3A8B3A;" ></span> 出租 </div> <div> <span style="width: 14px; height: 8px; border: 1px solid #2C77BB;"></span> 自住 <span style="width: 14px; height: 8px; border: 1px solid #2C77BB;" ></span> 自住 </div> <div> <span style="width: 14px; height: 8px; border: 1px solid #5C6169;"></span> 空置 <span style="width: 14px; height: 8px; border: 1px solid #5C6169;" ></span> 空置 </div> <div> <span style="width: 14px; height: 8px; border: 1px solid #CC9456;"></span> 商业 <span style="width: 14px; height: 8px; border: 1px solid #CC9456;" ></span> 商业 </div> </div> </div> @@ -212,31 +267,67 @@ </div> <div class="floor-box"> <div class="floor-num" style="left: 0"> <div :class="{ on: floorsType == 1 }" @click="floorsType = 1">1~5层</div> <div :class="{ on: floorsType == 2 }" @click="floorsType = 2">6~10层</div> <div :class="{ on: floorsType == 3 }" @click="floorsType = 3">11~15层</div> <div :class="{ on: floorsType == 4 }" @click="floorsType = 4">16~20层</div> <div :class="{ on: floorsType == 5 }" @click="floorsType = 5">21~25层</div> <div :class="{ on: floorsType == 6 }" @click="floorsType = 6">26~30层</div> <div :class="{ on: floorsType == 1 }" @click="floorsType = 1" >1~5层</div> <div :class="{ on: floorsType == 2 }" @click="floorsType = 2" >6~10层</div> <div :class="{ on: floorsType == 3 }" @click="floorsType = 3" >11~15层</div> <div :class="{ on: floorsType == 4 }" @click="floorsType = 4" >16~20层</div> <div :class="{ on: floorsType == 5 }" @click="floorsType = 5" >21~25层</div> <div :class="{ on: floorsType == 6 }" @click="floorsType = 6" >26~30层</div> </div> </div> <div @click="nextFloorBtn" class="floorBtn rightFloorBtn" v-show="nextFloorShow"> <div @click="nextFloorBtn" class="floorBtn rightFloorBtn" v-show="nextFloorShow" > <i class="el-icon-caret-right"></i> </div> </div> <div class="floor-detail"> <div v-for="(item, index) in levelList.slice((floorsType - 1) * 5, floorsType * 5)" :key="index"> <div v-for="(item, index) in levelList.slice((floorsType - 1) * 5, floorsType * 5)" :key="index" > <div class="title">{{ index + 1 + (floorsType - 1) * 5 }}层：</div> <div class="detail"> <div v-for="(value, index) in item" :key="index" <div v-for="(value, index) in item" :key="index" @click="residentDetailsClick(value)" :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]"> :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]" > {{ value.Doorplate }} <div class="flow" v-show="isHaveLiudong(value.householdsDate)"></div> <div class="focus" v-show="isHaveZhongdian(value.householdsDate)"></div> <div class="warning" v-show="isHaveJingwai(value.householdsDate)"></div> <div class="flow" v-show="isHaveLiudong(value.householdsDate)" ></div> <div class="focus" v-show="isHaveZhongdian(value.householdsDate)" ></div> <div class="warning" v-show="isHaveJingwai(value.householdsDate)" ></div> </div> </div> </div> @@ -244,30 +335,39 @@ </div> </div> <div class="come-out-content" v-show="subNavType == 2"> <el-table :data="comeoutArr" style="width: 100%" <el-table :data="comeoutArr" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" :row-class-name="tableRowClassName"> :row-class-name="tableRowClassName" > <el-table-column prop="name" label="名称" width="130"></el-table-column> <el-table-column prop="position" label="位置" width="150"></el-table-column> <el-table-column prop="type" label="类别" width="120"></el-table-column> </el-table> </div> <div class="park-content" v-show="subNavType == 3"> <el-table :data="parkArr" style="width: 100%" <el-table :data="parkArr" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" :row-class-name="tableRowClassName"> :row-class-name="tableRowClassName" > <el-table-column prop="name" label="名称" width="130"></el-table-column> <el-table-column prop="position" label="位置" width="150"></el-table-column> <el-table-column prop="type" label="类别" width="120"></el-table-column> </el-table> </div> <div class="business-content" v-show="subNavType == 4"> <el-table :data="businessArr" style="width: 100%" <el-table :data="businessArr" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" :row-class-name="tableRowClassName"> :row-class-name="tableRowClassName" > <el-table-column prop="name" label="名称" width="130"></el-table-column> <el-table-column prop="position" label="位置" width="150"></el-table-column> <el-table-column prop="type" label="类别" width="120"></el-table-column> @@ -276,10 +376,14 @@ </div> <div class="police-info" v-show="navType == 1"> <el-table :data="arr" style="width: 100%" <el-table :data="arr" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" :row-class-name="tableRowClassName" @row-click="clickData"> :row-class-name="tableRowClassName" @row-click="clickData" > <el-table-column prop="name" label="名称" width="130"></el-table-column> <el-table-column prop="time" label="时间" width="150"></el-table-column> <el-table-column prop="type" label="类别" width="120"></el-table-column> @@ -287,10 +391,14 @@ </div> <div class="warning-info" v-show="navType == 2"> <el-table :data="warningArray" style="width: 100%" <el-table :data="warningArray" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" :row-class-name="tableRowClassName" @row-click="clickData"> :row-class-name="tableRowClassName" @row-click="clickData" > <el-table-column prop="name" label="名称" width="130"></el-table-column> <el-table-column prop="time" label="时间" width="150"></el-table-column> <el-table-column prop="type" label="类别" width="120"></el-table-column> @@ -298,51 +406,63 @@ </div> </div> <el-dialog title="信息详情" :modal="true" :visible.sync="dialogVisible" :before-close="handleClose" :close-on-click-modal="true" class="police-affairs-details-box"> <div style="display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; height: 100%;"> <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"> <div>名称：</div> <div>{{ JWdetails.name }}</div> </div> <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"> <div>时间：</div> <div>{{ JWdetails.time }}</div> </div> <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"> <div>类型：</div> <div>{{ JWdetails.type }}</div> </div> <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"> <div>责任警员：</div> <div>{{ JWdetails.person }}</div> </div> <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"> <div>涉案金额：</div> <div>{{ JWdetails.money }}</div> </div> <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"> <div>所属辖区：</div> <div>{{ JWdetails.turnoutArea }}</div> </div> <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"> <div>处理时长：</div> <div>{{ JWdetails.handlingTime }}</div> </div> <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"> <div>案件级别：</div> <div>{{ JWdetails.rank }}</div> </div> <el-dialog title="信息详情" :modal="true" :visible.sync="dialogVisible" :before-close="handleClose" :close-on-click-modal="true" class="police-affairs-details-box" > <div class="item"> <div>名称：</div> <div>{{ JWdetails.name }}</div> </div> <div class="item"> <div>时间：</div> <div>{{ JWdetails.time }}</div> </div> <div class="item"> <div>类型：</div> <div>{{ JWdetails.type }}</div> </div> <div class="item"> <div>责任警员：</div> <div>{{ JWdetails.person }}</div> </div> <div class="item"> <div>涉案金额：</div> <div>{{ JWdetails.money }}</div> </div> <div class="item"> <div>所属辖区：</div> <div>{{ JWdetails.turnoutArea }}</div> </div> <div class="item"> <div>处理时长：</div> <div>{{ JWdetails.handlingTime }}</div> </div> <div class="item"> <div>案件级别：</div> <div>{{ JWdetails.rank }}</div> </div> </el-dialog> <el-dialog :title="residentDetailsTitle" :modal="true" :visible.sync="residentDetailsShow" :before-close="residentDetailsClose" :close-on-click-modal="true" class="resident-details-box" width="30%"> <el-dialog :title="residentDetailsTitle" :modal="true" :visible.sync="residentDetailsShow" :before-close="residentDetailsClose" :close-on-click-modal="true" class="resident-details-box" width="30%" > <h3 style="text-align:left;margin:10px 0 10px 0">户主信息</h3> <el-table :data="houseDate.householdsDate" <el-table :data="houseDate.householdsDate" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"> :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" > <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="peopleType" label="重点人员"></el-table-column> <el-table-column prop="nation" label="民族"></el-table-column> @@ -371,12 +491,8 @@ <script> import { listQuery, accurateSearch } from "@/utils/search.js" import villageHousesList from '@/assets/data/villageHouse.js' import housingData from '@/assets/data/housingData.js' import house from '../../assets/data/house' export default { @@ -538,13 +654,10 @@ clickData (row) { this.dialogVisible = true if (this.navType == 1) { this.JWdetails = this.arr[row.index] } else if (this.navType == 2) { this.JWdetails = this.warningArray[row.index] } }, @@ -734,7 +847,7 @@ border-radius: 10px; overflow: hidden; &>div { & > div { height: 100%; overflow-y: auto; @@ -769,9 +882,11 @@ left: 10px; right: 10px; bottom: 4px; background: linear-gradient(135deg, rgb(33 150 243 / 74%), rgb(254 254 254 / 0%)); background: linear-gradient( 135deg, rgb(33 150 243 / 74%), rgb(254 254 254 / 0%) ); z-index: -1; } } @@ -782,7 +897,7 @@ } .housing-introduce { &>div { & > div { padding: 0 10px; display: flex; @@ -843,7 +958,7 @@ } } &>.floor-content { & > .floor-content { .build-info { display: flex; position: relative; @@ -892,7 +1007,7 @@ flex-wrap: wrap; width: 356px; &>div { & > div { display: flex; align-items: center; justify-content: center; @@ -916,7 +1031,7 @@ .content { display: flex; &>div { & > div { height: 26px; line-height: 26px; flex: 1; @@ -924,7 +1039,7 @@ justify-content: center; border-right: 1px solid #50555f; &>div:last-child { & > div:last-child { margin-left: 14px; font-size: 18px; font-weight: bold; @@ -932,11 +1047,11 @@ } } &>div:first-child { & > div:first-child { width: 30%; } &>div:last-child { & > div:last-child { border: none; } } @@ -953,10 +1068,10 @@ display: flex; justify-content: space-around; &>div { & > div { flex: 1; &>div:first-child { & > div:first-child { height: 30px; line-height: 30px; font-size: 18px; @@ -964,7 +1079,7 @@ color: #499d99; } &>div:last-child { & > div:last-child { height: 26px; line-height: 26px; } @@ -978,8 +1093,8 @@ display: flex; justify-content: space-around; &>div { &>div:first-child { & > div { & > div:first-child { height: 30px; line-height: 30px; font-size: 18px; @@ -1007,7 +1122,6 @@ } .house-element-info { .condo, .legend { display: flex; @@ -1030,12 +1144,12 @@ display: flex; flex: 1; &>div { & > div { flex: 1; display: flex; align-items: center; &>span { & > span { margin: 0 10px; } } @@ -1084,7 +1198,7 @@ left: 0; transition: all 1s; &>div { & > div { margin: 0 4px; display: flex; justify-content: center; @@ -1096,7 +1210,7 @@ cursor: default; } &>.on { & > .on { border: 1px solid orange; color: orange; } @@ -1107,7 +1221,7 @@ .floor-detail { margin-top: 14px; &>div { & > div { margin: 8px; height: 36px; line-height: 36px; @@ -1121,7 +1235,7 @@ flex: 1; display: flex; &>div { & > div { margin: 0 4px; position: relative; width: 68px; @@ -1155,19 +1269,19 @@ } } &>.chuzu { & > .chuzu { border: 1px solid #3a8b3a; } &>.zizhu { & > .zizhu { border: 1px solid #2c77bb; } &>.kongzhi { & > .kongzhi { border: 1px solid #5c6169; } &>.shangye { & > .shangye { border: 1px solid #cc9456; } } @@ -1210,9 +1324,11 @@ height: 100%; overflow: hidden; border-radius: 2px; background: linear-gradient(135deg, rgba(252, 252, 252, 0.108), rgb(254, 254, 254)); background: linear-gradient( 135deg, rgba(252, 252, 252, 0.108), rgb(254, 254, 254) ); animation: prog 3s ease infinite; }
@@ -34,13 +34,11 @@ </div> <div v-show="searchValBoxShow" class="search-val-box"> <div> <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index" >{{ item.name }}</div> </div> <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index" >{{ item.name }}</div> </div> <div class="list" v-show="navType == 1"> @@ -249,11 +247,7 @@ </div> <div class="track-box" v-show="detailFlag"> <div> <el-button @click="goBack" type="text" size="small" title="轨迹"> <i class="el-icon-back"></i> </el-button>详细资料及轨迹查询 </div> <div class="back-btn" @click="goBack" title="轨迹">详细资料及轨迹查询</div> <ul v-show="navType == 1"> <li> <div>车辆型号：</div> @@ -345,19 +339,15 @@ :close-on-click-modal="true" class="car-video-box" > <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;" > <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" style="object-fit: fill" ></video> </div> <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" style="object-fit: fill" ></video> </el-dialog> <el-dialog @@ -368,31 +358,21 @@ :close-on-click-modal="true" class="phone-details-box" > <div style="flex: 1; display: flex; flex-direction: column; width: 100%; height: 100%;"> <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;" > <div>责任人：</div> <div>{{ phoneDetails.person }}</div> </div> <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;" > <div>联系方式：</div> <div>{{ phoneDetails.phoneID }}</div> </div> <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;" > <div>类型：</div> <div>{{ phoneDetails.phoneType }}</div> </div> <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;" > <div>所在地址：</div> <div>{{ phoneDetails.location }}</div> </div> <div class="item"> <div>责任人：</div> <div>{{ phoneDetails.person }}</div> </div> <div class="item"> <div>联系方式：</div> <div>{{ phoneDetails.phoneID }}</div> </div> <div class="item"> <div>类型：</div> <div>{{ phoneDetails.phoneType }}</div> </div> <div class="item"> <div>所在地址：</div> <div>{{ phoneDetails.location }}</div> </div> </el-dialog> </div> @@ -816,17 +796,13 @@ background: rgba(16, 29, 74, 0.9); z-index: 1111; border-radius: 10px; overflow: hidden; overflow-y: auto; & > div { height: 100%; overflow-y: auto; div { padding: 0 10px; line-height: 36px; cursor: pointer; } padding: 0 10px; line-height: 36px; cursor: pointer; } } @@ -848,23 +824,27 @@ height: calc(100% - 50px); background: rgba(20, 50, 123, 1); & > div { .back-btn { position: relative; height: 42px; line-height: 42px; text-align: center; color: #fff; border-bottom: 1px solid #fff; .el-button { padding: 0 !important; position: absolute; top: 4px; left: 4px; width: 42px; height: 28px; line-height: 28px; } cursor: pointer; } .back-btn::before { content: '\e6ea'; font-family: element-icons; height: 28px; line-height: 28px; color: #388ae7; position: absolute; top: 4px; left: 8px; } .back-btn:hover::before { color: #5a9eeb; } ul { src/views/video/index.vue
@@ -22,20 +22,24 @@ <el-button type="primary" size="mini" @click="removeDrawLayer">清除</el-button> </div> <div v-show="searchValBoxShow" class="search-val-box"> <div> <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }} </div> </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> <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 type="index" label="序号" width="50"> <template slot-scope="scope"> <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span> @@ -46,19 +50,36 @@ </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> <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box"> <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"> <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" style="object-fit: fill"></video> </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> </div> </template> @@ -66,7 +87,6 @@ <script> import EntityDraw from "@/utils/EntityDraw.js" import { listQuery, accurateSearch } from "@/utils/search.js" import monitoringList from '@/assets/data/monitoring.js' let graphicLayer = null @@ -84,23 +104,21 @@ searchValBoxShow: false } }, created () { this.monitoringList = monitoringList }, mounted () { this.initMonitoringIcon() graphicLayer = new EntityDraw() }, updated () { }, methods: { handleCurrentChange: function (currentPage) { this.currentPage = currentPage }, initMonitoringIcon () { this.monitoringList.forEach((item, index) => { this.$EventBus.$emit('layerPointAdd', { @@ -130,7 +148,6 @@ siteClick (e) { this.dialogTitle = e.overlay.attrParams.name this.dialogVisible = true if (this.$refs.videoElement && this.$refs.videoElement != null) { this.$refs.videoElement.currentTime = 0 this.$refs.videoElement.play() @@ -249,17 +266,13 @@ background: rgba(16, 29, 74, 0.9); z-index: 1111; border-radius: 10px; overflow: hidden; overflow-y: auto; &>div { & > div { height: 100%; overflow-y: auto; div { padding: 0 10px; line-height: 36px; cursor: pointer; } padding: 0 10px; line-height: 36px; cursor: pointer; } } @@ -279,7 +292,7 @@ .list-show { flex: 1; &>div { & > div { height: 100%; display: flex; flex-direction: column;
