forked from srs-police-affairs
public/img/box - 副本/2.png
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2022-08-18 17:00:30 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2022-11-08 14:25:31 * @LastEditTime: 2022-12-08 10:02:24 * @FilePath: \srs-police-affairs\src\components\map\index.vue * @Description: 公用地图组件 * @@ -13,40 +13,23 @@ <!-- 全屏控制按钮 --> <div class="screen-full-btn"> <el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark"> <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange" ></i> <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i> </el-tooltip> <el-tooltip v-if="!isFullscreen" content="全屏" placement="bottom" effect="dark"> <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange" ></i> <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i> </el-tooltip> </div> <!-- 切换矢量图按钮 --> <div class="image-switch-icon-btn" title="切换影像" @mouseover="showImgBtn = true" @mouseleave="showImgBtn = false" > <div class="image-switch-icon-btn" title="切换影像" @mouseover="showImgBtn = true" @mouseleave="showImgBtn = false"> <img src="/img/base_map.png" alt /> </div> <div class="image-switch-img-btn" v-show="showImgBtn" @mouseover="showImgBtn = true" @mouseleave="showImgBtn = false" > <div class="image-switch-img-btn" v-show="showImgBtn" @mouseover="showImgBtn = true" @mouseleave="showImgBtn = false"> <div class="img" @click="switchImg"> <span :class="{on:imgtype == 0}">影像</span> <span :class="{ on: imgtype == 0 }">影像</span> </div> <div class="elec" @click="switchElec"> <span :class="{on:imgtype == 1}">矢量</span> <span :class="{ on: imgtype == 1 }">矢量</span> </div> </div> @@ -192,7 +175,7 @@ // 上饶部署，内网使用的 // global.viewer.imageryLayers.addImageryProvider( // new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({ // url: "http://36.14.131.101:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326", // url: "http://192.168.0.112:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326", // layer: "wmts_4326_361100", // style: "default", // format: "image/png", src/styles/dc/index.scss
@@ -144,11 +144,10 @@ background-size: 100% 100%; width: 80px; height: 60px; border: 2px solid $table-header-bg-color; border: 2px solid $table-header-bg-color; span { position: absolute; font-size: 16px; right: 2px; bottom: 2px; padding: 0 2px; @@ -176,6 +175,6 @@ } .image-switch-img-btn.shrink-btn { left: 448px !important; bottom: 176px!important; left: 448px; bottom: 176px; } src/styles/element-ui/element-ui.scss
@@ -88,7 +88,7 @@ color: #fff; font-weight: 200; // background-color: $table-body-tr-n-color!important; background-color:rgba(9, 53, 182,0.93)!important; background-color: rgba(9, 53, 182, 0.93) !important; } .el-select-dropdown__list { @@ -243,7 +243,8 @@ line-height: 27px; } .el-year-table td .cell,.el-month-table td .cell { .el-year-table td .cell, .el-month-table td .cell { color: #fff; } @@ -277,7 +278,7 @@ border-top: 2px solid #293f6f !important; } .el-date-picker__header-label{ .el-date-picker__header-label { color: #fff !important; } @@ -356,7 +357,7 @@ .el-table, .el-table__expanded-cell { background-color: $table-body-tr-2n-color !important; background-color: $table-body-bg-color !important; } .tree-search-popup { src/styles/index.scss
@@ -3,4 +3,4 @@ @import "./icon/index.scss"; @import "./tool/index.scss"; @import "./element-ui/element-ui.scss"; // @import "./media/index.scss"; @import "./media/index.scss"; src/styles/media/index.scss
@@ -40,76 +40,317 @@ } } .main-content { top: countSizeVh(60); height: calc(100% - countSizeVh(60)); .main-containter { .left-container, .right-container { .main-content { top: countSizeVh(60); width: countSizeVw(400, 1920); height: calc(100% - countSizeVh(60)); .person-box, .land-box, .case-box, .crowd-box { height: countSizeVh(320); } .home-page { .person-box, .house-box, .land-box, .case-box, .alert-box, .crowd-box { .left-container, .right-container { top: countSizeVh(60); width: countSizeVw(400, 1920); height: calc(100% - countSizeVh(60)); .title { padding: 0 countSizeVw(18, 1920) 0 countSizeVw(18, 1920); height: countSizeVh(54); line-height: countSizeVh(54); font-size: countSizeVh(16); } .person-box, .land-box, .case-box, .crowd-box { height: countSizeVh(320); } .sub-title { line-height: countSizeVh(36); } .person-box, .house-box, .land-box, .case-box, .alert-box, .crowd-box { .sub-tab { padding: countSizeVh(10); .title { padding: 0 countSizeVw(18, 1920) 0 countSizeVw(18, 1920); height: countSizeVh(58); line-height: countSizeVh(58); font-size: countSizeVh(16); } .tab { .sub-title { line-height: countSizeVh(36); } &>div { height: countSizeVh(22); line-height: countSizeVh(22); .sub-tab { padding: countSizeVh(10); .tab { &>div { height: countSizeVh(22); line-height: countSizeVh(22); } } } } .house-box, .alert-box { .title { height: countSizeVh(62); line-height: countSizeVh(62); } } } } .bottom-container { left: countSizeVw(400, 1920); width: calc(100% - countSizeVw(400, 1920) * 2); height: countSizeVh(320); } .house-box { .region-select { top: countSizeVh(20); } .title { height: countSizeVh(54); line-height: countSizeVh(54); .center-container { bottom: countSizeVh(340); .layers-control-btn { width: countSizeVw(96, 1920); height: countSizeVh(40); border-radius: countSizeVh(20) } } .el-checkbox__inner { width: countSizeVh(20); height: countSizeVh(20); } .el-checkbox__label { font-size: countSizeVh(16) !important; } } .house-page { .container-content { .search-box { height: countSizeVh(48); input { font-size: countSizeVh(18); } button { width: countSizeVw(80, 1920); font-size: countSizeVh(24); } } .search-val-box { top: countSizeVh(48); left: countSizeVw(6, 1920); width: calc(100% - 2 * countSizeVw(6, 1920)); max-height: countSizeVh(160); border-radius: countSizeVh(10); &>div { div { padding: 0 countSizeVw(10, 1920); line-height: countSizeVh(36); cursor: pointer; } } } .result-content { height: calc(100% - countSizeVh(48)); .housing-estate-info { .housing-title { padding: 0 countSizeVw(10, 1920); height: countSizeVh(40); line-height: countSizeVh(40); font-size: countSizeVh(28); &::after { top: countSizeVh(18); left: countSizeVw(10, 1920); right: countSizeVw(10, 1920); top: countSizeVh(4); } } .housing-bg { margin-top: countSizeVh(6); height: countSizeVh(200); } .housing-introduce { &>div { padding: 0 countSizeVw(10, 1920); .l { width: countSizeVw(80, 1920); line-height: countSizeVh(40); } .r { line-height: countSizeVh(40); } } } } .nav-tab { .nav { height: countSizeVh(40); line-height: countSizeVh(40); border-bottom: countSizeVh(1) solid #33566c; } } .base-info { .sub-nav-list { padding: countSizeVw(14, 1920) 0; .sub-nav { width: countSizeVw(76, 1920); height: countSizeVh(26); line-height: countSizeVh(26); border-radius: countSizeVh(13); } .on { border: countSizeVh(1) solid #fff; } } } } } } } .bottom-container { left: countSizeVw(400, 1920); width: calc(100% - countSizeVw(400, 1920) * 2); height: countSizeVh(320); } .region-select { top: countSizeVh(20); .main-content.spread { width: countSizeVw(400, 1920); } } .flexible-btn { padding: 0 countSizeVw(2, 1920); width: countSizeVw(32, 1920); height: countSizeVh(64); line-height: countSizeVh(32); border-radius: 0 countSizeVh(5) countSizeVh(5) 0; box-shadow: countSizeVh(1) 0px countSizeVh(4) countSizeVh(1) $bg-color; } .flexible-btn.spread { left: countSizeVw(400, 1920); } } } // 地图，控制按钮 .screen-full-btn { left: countSizeVh(10); bottom: countSizeVh(10); width: countSizeVh(36); height: countSizeVh(36); font-size: countSizeVh(20); } .screen-full-btn.homebottom { left: countSizeVw(402, 1920) !important; bottom: countSizeVh(340); } .screen-full-btn.shrink-btn { left: countSizeVw(410, 1920) !important; } .dc-zoom-controller { left: countSizeVh(10) !important; bottom: countSizeVh(56) !important; width: countSizeVh(36) !important; &>div { width: countSizeVh(36) !important; height: countSizeVh(36) !important; svg { width: countSizeVh(20) !important; height: countSizeVh(20) !important; } } } .dc-zoom-controller.homebottom { left: countSizeVw(402, 1920) !important; bottom: countSizeVh(386) !important; } .dc-zoom-controller.shrink-btn { left: countSizeVw(410, 1920) !important; } .image-switch-icon-btn { left: countSizeVh(10); bottom: countSizeVh(178); width: countSizeVh(36); height: countSizeVh(36); font-size: countSizeVh(20); } .image-switch-icon-btn.iconbottom { left: countSizeVw(402, 1920) !important; bottom: countSizeVh(506) !important; } .image-switch-icon-btn.shrink-btn { left: countSizeVw(410, 1920) !important; } .dc-location-bar.homebottom { bottom: countSizeVh(390) !important; } .image-switch-img-btn { left: countSizeVw(46, 1920); bottom: countSizeVh(190); font-size: countSizeVh(20); border-radius: countSizeVh(5); .img, .elec { width: countSizeVh(80); height: countSizeVh(60); border: countSizeVh(2) solid $table-header-bg-color; span { right: countSizeVh(2); bottom: countSizeVh(2); padding: 0 countSizeVh(2); } } } .image-switch-img-btn.imgbottom { left: countSizeVw(446, 1920); bottom: countSizeVh(480); } .image-switch-img-btn.shrink-btn { left: countSizeVw(454, 1920); bottom: countSizeVh(154); } } } src/styles/scssFile.scss
@@ -1,4 +1,6 @@ $bg-color: rgba(9, 40, 199, 0.8); $bg-one-color: rgba(35, 50, 167, 0.8); $bg-color: $bg-one-color; $tree-search-bg-color: rgba(9, 40, 199, 0.9); @@ -16,13 +18,18 @@ $menu-tab-shadow: rgba(144, 202, 249, 0.8); $table-header-bg-color: rgba(9, 40, 199, 0.8); $table-body-bg-color: rgba(9, 40, 199, 0.8); $table-body-tr-n-color: rgba(17, 38, 163, 0.7); $table-body-tr-2n-color: rgba(8, 56, 185, 0.7); // 表格使用的颜色 $table-header-bg-color: rgba(9, 40, 199, 0.5); $table-body-bg-color: rgba(9, 40, 199, 0.5); $table-body-tr-n-color: rgba(17, 38, 163, 0.5); $table-body-tr-2n-color: rgba(8, 56, 185, 0.5); @function countSizeVw($size, $vw) { src/views/home/index.vue
@@ -10,32 +10,19 @@ --> <template> <div class="container"> <left-container class="left-container" @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail" @showkeypersondetail="showkeypersondetail" ref="leftContainer" ></left-container> <div class="home-page container"> <left-container class="left-container" @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail" @showkeypersondetail="showkeypersondetail" ref="leftContainer"></left-container> <right-container class="right-container" @showequimentdetail="showequimentdetail" @selectPoliceChangeEventData="selectPoliceChangeEventData" @changeActivityType="changeActivityType" @activityChange="activityChange" ref="rightContainer" ></right-container> <right-container class="right-container" @showequimentdetail="showequimentdetail" @selectPoliceChangeEventData="selectPoliceChangeEventData" @changeActivityType="changeActivityType" @activityChange="activityChange" ref="rightContainer"></right-container> <bottom-container class="bottom-container" ref="bottomContainer" <bottom-container class="bottom-container" ref="bottomContainer" @changePoliceSituationHistoryType="changePoliceSituationHistoryType" @changePoliceSituationTimeType="changePoliceSituationTimeType" @policeSituationChange="policeSituationChange" @policeSituationSiteClick="policeSituationSiteClick" ></bottom-container> @policeSituationSiteClick="policeSituationSiteClick"></bottom-container> <div class="center-container"> <div class="layers-control-btn house"> @@ -62,69 +49,30 @@ </div> <div ref="RegionSelect" style="left: 0;" class="region-select"> <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue" :options="policeStationOptions" :optionsName="'policeStationName'" ></map-select> <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue" :options="policeStationOptions" :optionsName="'policeStationName'"></map-select> <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions" :optionsName="'areaCheckName'" ></map-select> <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions" :optionsName="'areaCheckName'"></map-select> <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue" :options="housingOptions" :optionsName="'housingsName'" ></map-select> <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue" :options="housingOptions" :optionsName="'housingsName'"></map-select> </div> <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :close-on-click-modal="true" > <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"> <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" style="object-fit: fill"></video> </el-dialog> <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible" :before-close="panoramaBeforeClose" :close-on-click-modal="true" class="panorama-details-box" > <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible" :before-close="panoramaBeforeClose" :close-on-click-modal="true" class="panorama-details-box"> <!-- <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0"></iframe>--> <iframe :src="panoramaVrUrl" style="width: 100%; height: 100%;" frameborder="0" /> </el-dialog> <el-dialog :title="activityTitle" :modal="true" :visible.sync="activityVisible" :before-close="activityBeforeClose" :close-on-click-modal="true" class="activity-details-box" > <el-dialog :title="activityTitle" :modal="true" :visible.sync="activityVisible" :before-close="activityBeforeClose" :close-on-click-modal="true" class="activity-details-box"> <div class="item"> <div>活动名称:</div> <div>{{ activityDetailArr.activityName }}</div> @@ -159,14 +107,8 @@ </div> </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> @@ -185,14 +127,8 @@ </div> </el-dialog> <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="peopleBeforeClose" :close-on-click-modal="true" class="area-details-box" > <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="peopleBeforeClose" :close-on-click-modal="true" class="area-details-box"> <div class="item"> <div>责任区负责人：</div> <div>王某某</div> @@ -211,58 +147,30 @@ </div> </el-dialog> <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible" :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box" > <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible" :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box"> <div class="equiment-detail"> <div class="left"> <el-tree :data="jurisdictionData" :props="defaultProps" @node-click="jurisdictionNodeClick" ref="tree" node-key="id" ></el-tree> <el-tree :data="jurisdictionData" :props="defaultProps" @node-click="jurisdictionNodeClick" ref="tree" node-key="id"></el-tree> </div> <div class="right"> <div class="monitor" v-if="monitorContent"> <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" style="object-fit: fill" ></video> <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" style="object-fit: fill"></video> </div> <div class="others" v-if="othersContent"> <el-table :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)" <el-table :data="showArr.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' }" :row-class-name="tableRowClassName" > :row-class-name="tableRowClassName"> <el-table-column prop="carID" label="车牌号" v-if="carArrShow"></el-table-column> <el-table-column prop="carType" label="车型" v-if="carArrShow"></el-table-column> <el-table-column prop="phoneID" label="手台号" v-if="phoneArrShow"></el-table-column> <el-table-column prop="phoneType" label="手台机型" v-if="phoneArrShow"></el-table-column> <el-table-column prop="recorderID" label="执法记录仪号" v-if="recorderArrShow" ></el-table-column> <el-table-column prop="recorderType" label="记录仪机型" v-if="recorderArrShow" ></el-table-column> <el-table-column prop="recorderID" label="执法记录仪号" v-if="recorderArrShow"></el-table-column> <el-table-column prop="recorderType" label="记录仪机型" v-if="recorderArrShow"></el-table-column> <el-table-column prop="id" label="设备号" v-if="stateArrShow"></el-table-column> <el-table-column prop="equimentType" label="设备类型" v-if="stateArrShow"></el-table-column> <el-table-column prop="policeStation" label="所属派出所"></el-table-column> @@ -270,35 +178,20 @@ <el-table-column prop="state" label="状态"></el-table-column> </el-table> <div class="pages"> <el-pagination background layout="prev, pager, next" :total="showArr.length" :page-size="pagesize" pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange" ></el-pagination> <el-pagination background layout="prev, pager, next" :total="showArr.length" :page-size="pagesize" pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination> </div> </div> </div> </div> </el-dialog> <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose" :close-on-click-modal="true" class="land-details-box" > <el-table :data="landDetailArr" style="width: 100%" <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose" :close-on-click-modal="true" class="land-details-box"> <el-table :data="landDetailArr" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }" > :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"> <el-table-column prop="housingEastate" label="小区名称" width="100"></el-table-column> <el-table-column prop="location" label="位置" width="140"></el-table-column> <el-table-column prop="area" label="面积" width="120"></el-table-column> @@ -307,20 +200,11 @@ </el-table> </el-dialog> <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible" :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box" > <el-table :data="keyPersonDetailArr" style="width: 100%" <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible" :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box"> <el-table :data="keyPersonDetailArr" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }" > :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"> <el-table-column prop="type" label="重点人员类型"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="sex" label="性别"></el-table-column> @@ -331,14 +215,8 @@ </el-table> </el-dialog> <el-dialog :title="policeSituationTitle" :modal="true" :visible.sync="policeSituationVisible" :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box" > <el-dialog :title="policeSituationTitle" :modal="true" :visible.sync="policeSituationVisible" :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box"> <div class="item"> <div>所属派出所:</div> <div>{{ policeSituationDetailArr.policeName }}</div> @@ -1807,9 +1685,7 @@ background-color: #66b1ff87; } :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) { :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) { background: #454545; }
@@ -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:39 * @LastEditTime: 2022-12-07 14:53:21 * @FilePath: \srs-police-affairs\src\views\house\index.vue * @Description: 小区-栋-层-房屋 * @@ -10,56 +10,32 @@ --> <template> <div class="container"> <div class="house-page container"> <div v-show="boxShow" class="container-content"> <div v-show="contentShow" class="search-box"> <!-- <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" /> <button @click="searchClick" class="el-icon-search"></button>--> <el-popover ref="popover" placement="bottom" trigger="click" :visible-arrow="false" popper-class="tree-search-popup" > <el-popover ref="popover" placement="bottom" trigger="click" :visible-arrow="false" popper-class="tree-search-popup"> <el-input placeholder="请输入搜索条件" v-model="filterText"></el-input> <el-tree style="width: 360px; height: 400px; overflow: auto;" class="select-tree-box" :data="testData" :props="defaultProps" ref="popupTree" @current-change="currentChangeHandle" :default-expand-all="defaultExpandAll" :accordion="accordion" :highlight-current="highlightCurrent" :expand-on-click-node="true" check-strictly :filter-node-method="filterNode" ></el-tree> <el-tree style="width: 360px; height: 400px; overflow: auto;" class="select-tree-box" :data="testData" :props="defaultProps" ref="popupTree" @current-change="currentChangeHandle" :default-expand-all="defaultExpandAll" :accordion="accordion" :highlight-current="highlightCurrent" :expand-on-click-node="true" check-strictly :filter-node-method="filterNode"></el-tree> </el-popover> <el-input slot="reference" v-model="prop" v-popover:popover :readonly="true" placeholder="请输入搜索条件" style="cursor: pointer;" ></el-input> <el-input slot="reference" v-model="prop" v-popover:popover :readonly="true" placeholder="请输入搜索条件" style="cursor: pointer;"></el-input> </div> <div v-show="searchValBoxShow" class="search-val-box"> <div> <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index" > <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index"> {{ item.name item.name }} </div> </div> @@ -95,48 +71,17 @@ </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 == 4 }" @click="subNavType = 4" >商业</div> <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 == 4 }" @click="subNavType = 4">商业</div> </div> <div class="floor-content" v-show="subNavType == 1"> @@ -145,22 +90,13 @@ <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> @@ -245,18 +181,10 @@ <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> @@ -265,20 +193,17 @@ <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> @@ -287,27 +212,19 @@ <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> @@ -318,67 +235,31 @@ </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> @@ -386,39 +267,30 @@ </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> @@ -427,14 +299,10 @@ </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> @@ -442,14 +310,10 @@ </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> @@ -462,14 +326,8 @@ </transition>--> <el-dialog title="信息详情" :modal="true" :visible.sync="dialogVisible" :before-close="handleClose" :close-on-click-modal="true" class="police-affairs-details-box" > <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> @@ -504,21 +362,12 @@ </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> @@ -1006,7 +855,7 @@ border-radius: 10px; overflow: hidden; & > div { &>div { height: 100%; overflow-y: auto; @@ -1041,11 +890,9 @@ 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; } } @@ -1056,7 +903,7 @@ } .housing-introduce { & > div { &>div { padding: 0 10px; display: flex; @@ -1119,7 +966,7 @@ } } & > .floor-content { &>.floor-content { .build-info { display: flex; position: relative; @@ -1168,7 +1015,7 @@ flex-wrap: wrap; width: 356px; & > div { &>div { display: flex; align-items: center; justify-content: center; @@ -1192,7 +1039,7 @@ .content { display: flex; & > div { &>div { height: 26px; line-height: 26px; flex: 1; @@ -1200,7 +1047,7 @@ justify-content: center; border-right: 1px solid #50555f; & > div:last-child { &>div:last-child { margin-left: 14px; font-size: 18px; font-weight: bold; @@ -1208,11 +1055,11 @@ } } & > div:first-child { &>div:first-child { width: 30%; } & > div:last-child { &>div:last-child { border: none; } } @@ -1229,10 +1076,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; @@ -1240,7 +1087,7 @@ color: #499d99; } & > div:last-child { &>div:last-child { height: 26px; line-height: 26px; } @@ -1254,8 +1101,8 @@ display: flex; justify-content: space-around; & > div { & > div:first-child { &>div { &>div:first-child { height: 30px; line-height: 30px; font-size: 18px; @@ -1283,6 +1130,7 @@ } .house-element-info { .condo, .legend { display: flex; @@ -1305,12 +1153,12 @@ display: flex; flex: 1; & > div { &>div { flex: 1; display: flex; align-items: center; & > span { &>span { margin: 0 10px; } } @@ -1359,7 +1207,7 @@ left: 0; transition: all 1s; & > div { &>div { margin: 0 4px; display: flex; justify-content: center; @@ -1371,7 +1219,7 @@ cursor: default; } & > .on { &>.on { border: 1px solid orange; color: orange; } @@ -1382,7 +1230,7 @@ .floor-detail { margin-top: 14px; & > div { &>div { margin: 8px; height: 36px; line-height: 36px; @@ -1396,7 +1244,7 @@ flex: 1; display: flex; & > div { &>div { margin: 0 4px; position: relative; width: 68px; @@ -1420,33 +1268,29 @@ } .focus { top: calc( (100% - 18px) / 4 * 2 + 6px ); top: calc((100% - 18px) / 4 * 2 + 6px); background: rgb(255, 121, 108); } .warning { top: calc( (100% - 18px) / 4 * 3 + 12px ); top: calc((100% - 18px) / 4 * 3 + 12px); background: rgb(254, 172, 4); } } & > .chuzu { &>.chuzu { border: 1px solid #3a8b3a; } & > .zizhu { &>.zizhu { border: 1px solid #2c77bb; } & > .kongzhi { &>.kongzhi { border: 1px solid #5c6169; } & > .shangye { &>.shangye { border: 1px solid #cc9456; } } @@ -1490,11 +1334,9 @@ 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; }
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2022-08-18 16:18:24 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2022-12-01 15:48:04 * @LastEditTime: 2022-12-07 08:49:30 * @FilePath: \srs-police-affairs\src\views\lyout\index.vue * @Description: * @@ -13,23 +13,13 @@ <div class="main-header"> <!-- <div class="title"></div> --> <div class="menu-list left"> <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list" @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index" > <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list" @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index"> <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span> <div class="sub-nav-list" v-show="item.children && item.childrenFlag"> <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)" > <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)"> {{ subItem.menuName subItem.menuName }} </div> </div> @@ -43,23 +33,13 @@ <!-- 菜单导航 --> <div class="menu-list right"> <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list" @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index" > <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list" @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index"> <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span> <div class="sub-nav-list" v-show="item.children && item.childrenFlag"> <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)" > <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)"> {{ subItem.menuName subItem.menuName }} </div> </div> @@ -79,23 +59,15 @@ <mapBox ref="modalForm" /> <!-- 主体内容区域 --> <div class="main-content" id="MainContent" :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }" > <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" <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> :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary" @click="flexibelClick"></el-button> </div> </div> </template> @@ -289,7 +261,7 @@ background-size: 100% 100%; background-repeat: no-repeat; z-index: -1; opacity: 0.8; opacity: 0.85; } .title { @@ -308,7 +280,7 @@ overflow: hidden; letter-spacing: 6px; & > img { &>img { // width: 100%; height: 80%; margin: 0 10px 0 10px; @@ -324,7 +296,7 @@ // border-radius: 10px 16px 10px 16px; transform: skew(58deg); & > span { &>span { transform: skew(-58deg); } } @@ -338,7 +310,7 @@ // border-radius: 16px 10px 16px 10px; transform: skew(-58deg); & > span { &>span { transform: skew(58deg); } } @@ -348,10 +320,11 @@ display: flex; align-items: center; & > .nav-list { &>.nav-list { // color: rgba(32, 106, 181, 1); // border-bottom: 2px solid #409eff; & > span.on { &>span.on { color: rgba(252, 189, 86, 1); } }
