Merge branch 'dev-jichu' of http://git.elinkit.com.cn:7070/r/epmet-oper-gov into dev-jichu

src/assets/scss/modules/visual/basicInfoMain.scss

@@ -237,7 +237,7 @@
     .item {
       background-color: #011168;
       margin-top: 12px;
-      width: 234px;
+      width: 244px;
       height: 190px;
       border: 1px solid #037ddc;
       border-radius: 8px;
@@ -266,11 +266,12 @@
 
       .icon_category {
         position: absolute;
-        bottom: 10px;
+        bottom: 14px;
         left: 9px;
-        margin-left: 9px;
+        // margin-left: 7px;
 
         > img {
+          margin-left: 5px;
           width: 21px;
           height: 20px;
         }

src/assets/scss/modules/visual/warning.scss

@@ -1,17 +1,21 @@
 .warning-box {
   box-sizing: border-box;
-  width: 1881px;
-  height: 914px;
+  // width: 1881px;
+  width: 100%;
+  // height: 100%;
+  min-height: 100%;
   margin: auto;
   color: #fff;
-  background: url('../../../img/modules/visual/warning-box.png') no-repeat center;
+  // background: url("../../../img/modules/visual/warning-box.png") no-repeat center;
   background-size: 100% 100%;
   padding: 45px 21px 35px 24px;
 
   &-top {
     display: flex;
-    justify-content: space-around;
-    height: 190px;
+    // justify-content: space-around;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    min-height: 190px;
 
     .top-item {
       box-sizing: border-box;
@@ -19,9 +23,11 @@
       height: 190px;
       padding: 10px 22px 14px 21px;
       // background: rgba(255, 255, 255, 0);
-      border: 1px solid #1043C0;
+      border: 1px solid #1043c0;
       box-shadow: 0px 83px 150px 0px #002790;
       border-radius: 8px;
+      margin-right: 15px;
+      margin-bottom: 15px;
 
       &-img {
         display: flex;
@@ -31,6 +37,7 @@
           width: 78px;
           height: 78px;
           margin-right: 16px;
+          margin-bottom: 10px;
         }
 
         .top-item-left {
@@ -44,13 +51,13 @@
           span:nth-child(1) {
             font-size: 18px;
             font-weight: 400;
-            color: #FFFFFF;
+            color: #ffffff;
           }
 
           span:nth-child(2) {
             font-size: 28px;
             font-weight: bold;
-            color: #00FFFC;
+            color: #00fffc;
             margin-top: 10px;
           }
         }
@@ -73,13 +80,14 @@
           align-items: center;
           justify-content: space-between;
           padding: 0 10px 0 29px;
+          cursor: pointer;
 
           &::after {
             display: block;
-            content: '';
+            content: "";
             width: 8px;
             height: 8px;
-            background: #F0F3F7;
+            background: #f0f3f7;
             border-radius: 50%;
             position: absolute;
             left: 12px;
@@ -91,7 +99,7 @@
             font-size: 16px;
             font-family: PingFang SC;
             font-weight: 400;
-            color: #FFFFFF;
+            color: #ffffff;
           }
 
           div:nth-child(2) {
@@ -100,7 +108,7 @@
             font-size: 20px;
             font-family: PingFang SC;
             font-weight: 500;
-            color: #FFFFFF;
+            color: #ffffff;
 
             .right-icon {
               width: 10px;
@@ -110,7 +118,7 @@
         }
 
         .num-item-active {
-          background: linear-gradient(0deg, #1A5AFD, #26C4FF);
+          background: linear-gradient(0deg, #1a5afd, #26c4ff);
         }
 
         .num-item:nth-child(2) {
@@ -118,17 +126,15 @@
         }
       }
     }
-
-
   }
 
   &-bottom {
     box-sizing: border-box;
     width: 100%;
     height: calc(100% - 300px);
+    min-height: 300px;
     margin-top: 60px;
 
-
     .pagination {
       box-sizing: border-box;
       margin-top: 20px;
@@ -138,24 +144,21 @@
       justify-content: flex-end;
 
       /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
-        background: #0266D1;
-        color: #000D3F;
+        background: #0266d1;
+        color: #000d3f;
       }
 
       /deep/ .el-pagination .el-pager li {
-        background: #002E74;
+        background: #002e74;
       }
 
       /deep/ .el-pagination .btn-prev {
-        background: #002E74;
+        background: #002e74;
       }
 
       /deep/ .el-pagination .btn-next {
-        background: #002E74;
+        background: #002e74;
       }
     }
   }
-
-
-
-}
+}

src/router/index.js

@@ -218,7 +218,7 @@ router.beforeEach((to, from, next) => {
   //  }else{
 
   http
-    .get("/oper/access/menu/nav")
+    .get("/gov/access/menu/nav")
     .then(({ data: res }) => {
       if (res.code !== 0) {
         // Vue.prototype.$message.error(res.msg)

src/views/modules/visual/basicinfo/basicInfoMain.vue

@@ -37,10 +37,6 @@
              class="map"></div> -->
       </div>
 
-      <div class="popup"
-           ref="popup">
-      </div>
-
       <div class="div_data">
         <div class="div_search">
           <el-input size="mini"
@@ -112,22 +108,18 @@ import Overlay from 'ol/Overlay';
 import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js';
 import { getCenter, boundingExtent } from 'ol/extent.js';
 import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';
-import { toStringHDMS } from 'ol/coordinate'
 
-import { fromLonLat, toLonLat } from "ol/proj";
 import { mapGetters } from "vuex";
 import { Loading } from 'element-ui'; //引入Loading服务
 import { requestPost } from "@/js/dai/request";
 import BasicInfoCommunity from "./basicInfoCommunity";
 import PeopleSearch from "./peopleSearch";
 import People from "./people";
+import cptCard from "@/views/modules/visual/cpts/card";
 
 
 let loading;//加载动画
 
-let x = 1500
-let y = 700
-
 let map;
 let mapView;
 let gaodeMapLayer;//背景地图图层
@@ -587,42 +579,20 @@ const vueGis = {
         zoom: this.zoom,
         minZoom: this.minZoom
       })
-      // 弹窗
-      this.overlay = new Overlay({
-        element: this.$refs.popup, // 弹窗标签，在html里
-        autoPan: true, // 如果弹窗在底图边缘时，底图会移动
-        autoPanAnimation: { // 底图移动动画
-          duration: 250
-        }
-      })
-      console.log(this.overlay)
+
       //初始化map和地图底图
       //创建地图容器
       map = new Map({
         layers: [gaodeMapLayer],
         //加载瓦片图层数据
         view: mapView,
-        target: 'map',
-        overlays: [this.overlay], // 把弹窗加入地图
+        target: 'map'
         //目标加载到map中
       })
 
-      let that = this
       map.on('singleclick', function (e) {
         console.log(e.coordinate)
-        const coordinate = e.coordinate // 获取坐标
-        const hdms = toStringHDMS(toLonLat(coordinate)) // 转换坐标格式
-
-
-        setTimeout(() => {
-          // 设置弹窗位置
-          // 这里要设置定时器，不然弹窗首次出现，底图会跑偏
-          that.currentCoordinate = hdms // 保存坐标点
-          that.overlay.setPosition(coordinate)
-
-        }, 0)
         // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
-
       })
 
       //去除双击放大效果
@@ -755,7 +725,7 @@ const vueGis = {
     ...mapGetters(["clientHeight"])
 
   },
-  components: { BasicInfoCommunity, PeopleSearch, People },
+  components: { BasicInfoCommunity, PeopleSearch, People, cptCard },
 }
 export default vueGis;
 </script>

src/views/modules/visual/basicinfo/cpts/people-more.vue

@@ -323,7 +323,6 @@ export default {
         if (type == "cascader") {
           if (valueArr.length > 0) {
             let level1 = options.find((item) => item.value == valueArr[0]);
-            console.log("----------------------- cascader", options);
             if (level1) {
               if (valueArr.length > 1 && level1.children) {
                 let level2 = level1.children.find(

src/views/modules/visual/warning/Base.js

@@ -0,0 +1,10 @@
+class Base {
+  constructor() {
+    this.a = '3'
+    this.init()
+  }
+  init() {
+    console.log('1')
+  }
+}
+export default Base

src/views/modules/visual/warning/components/screen-loading/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="screen-loading">
+    <svg width="50px"
+         height="50px">
+      <circle cx="25"
+              cy="25"
+              r="20"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="31.415, 31.415"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="0, 25 25;360, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#02bcfe;#3be6cb;#02bcfe"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+
+      <circle cx="25"
+              cy="25"
+              r="10"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="15.7, 15.7"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="360, 25 25;0, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#3be6cb;#02bcfe;#3be6cb"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+    </svg>
+    <div class="loading-tip">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DvLoading'
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .loading-tip {
+    font-size: 14px;
+    color: #fff;
+  }
+}
+</style>

src/views/modules/visual/warning/components/screen-table/index.vue

@@ -7,25 +7,34 @@
         <div class="table-body">
           <div class="table-body-tr" v-for="(value,index) in tableData" :key='index'>
             <div class="td" v-for="(item,indexs) in value" :key="indexs" :style="tableContentStyle[indexs]">{{item}}
-              <span v-if="indexs+1==value.length" class="more" @click="onClickMorePop(index)" ref='morePop'>
+              <span v-if="(indexs+1==value.length) && item.length>8" class="more" @click="onClickMorePop(index)" ref='morePop'>
                 更多>
                 <span class="more-pop" v-if="visiblePopList[index]">
-                  李佳琪、刘阳、赵欣、丁一、嘉敏、李岩、何嘉慧
-                  李易峰、赵敏、何军、曲树惠
+                  <!-- 李佳琪、刘阳、赵欣、丁一、嘉敏、李岩、何嘉慧
+                  李易峰、赵敏、何军、曲树惠 -->
+                  {{item}}
                 </span>
               </span>
             </div>
           </div>
+          <screen-loading v-if="visibleLoading">加载中</screen-loading>
+          <div class="no-data" v-if="tableData.length==0 && !visibleLoading">
+            <img src="../../../../../../assets/img/modules/visual/noData.png" alt="" srcset="" class="no-data-img">
+          </div>
         </div>
       </div>
   </div>
 </template>
 
 <script>
+import ScreenLoading from '../screen-loading/index'
 import Vue from 'vue'
 export default {
 name: 'warning-table',
-  props: {
+components:{
+  ScreenLoading
+},
+props: {
     headerList: {
       type: Array,
       required: false,
@@ -46,15 +55,6 @@ name: 'warning-table',
         return [
         [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
         [2,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [3,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [4,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [5,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [6,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [7,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [8,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [9,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [10,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-    
         ]
       }
     },
@@ -73,7 +73,7 @@ name: 'warning-table',
         ]
       }
     },
-  // 单独给内容设置样式
+    // 单独给内容设置样式
     tableContentStyle: {
       type: Array,
       default: () => {
@@ -88,6 +88,10 @@ name: 'warning-table',
         ]
       }
     },
+    visibleLoading:{
+      type:Boolean,
+      default:true
+    }
     // // 表格平均分的份数
     // ava: {
     //   type: Number,
@@ -133,6 +137,7 @@ mounted () {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .warning-table{
      box-sizing: border-box;
@@ -168,8 +173,8 @@ mounted () {
 
         &-tr {
           width: 100%;
-          // height: 50px;
-          height: calc(100% / 10);
+          height: 50px;
+          // height: calc(100% / 10);
           display: flex;
           justify-content: space-around;
           align-items: center;
@@ -202,20 +207,20 @@ mounted () {
                 color: #FFFFFF;
                 padding:16px 8px 10px 9px;
                 z-index: 1;
-                &::after{
-                  position: absolute;
-                  left: 30%;
-                  top: -30%;
-                  display: flex;
-                  content:'';
-                  width: 0;
-                  height: 0;
-                  border-width: 13px;
-                  border-style: solid;
-                  border-color: transparent transparent rgba(26, 100, 204,0.5) transparent;
-                  // border-color: transparent transparent red transparent;
-                  transform: translate(-50%,0);
-                }
+                // &::after{
+                //   position: absolute;
+                //   left: 30%;
+                //   top: -30%;
+                //   display: flex;
+                //   content:'';
+                //   width: 0;
+                //   height: 0;
+                //   border-width: 13px;
+                //   border-style: solid;
+                //   border-color: transparent transparent rgba(26, 100, 204,0.5) transparent;
+                //   // border-color: transparent transparent red transparent;
+                //   transform: translate(-50%,0);
+                // }
               }
           
             }
@@ -230,6 +235,18 @@ mounted () {
           background: url('../../../../../../assets/img/modules/visual/hover-bac.png') no-repeat center;
           background-size: 100% 100%;
         }
+        // 暂无数据
+        .no-data{
+          width: 100%;
+          height: calc(100% - 50px);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          &-img{
+            width: 249px;
+            height: 172px;
+          }
+        }
       }
 
     }

src/views/modules/visual/warning/index.vue

@@ -1,78 +1,169 @@
 <template>
   <div class="warning-box">
-    <div class="warning-box-top">
-      <div class="top-item" v-for="item in [1, 2, 3, 4, 5, 6]" :key="item">
-        <div class="top-item-img">
-          <img
-            src="../../../../assets/img/modules/visual/shiye.png"
-            alt=""
-            srcset=""
-          />
-          <div class="top-item-left">
-            <span>失业人员</span>
-            <span>1022</span>
-          </div>
-        </div>
-        <div class="top-item-num">
-          <div class="num-item num-item-active" @click="onClickList">
-            <div>5-10人</div>
-            <div>
-              <div>6栋</div>
-              <img
-                src="../../../../assets/img/modules/visual/right-icon.png"
-                alt=""
-                class="right-icon"
-              />
+    <cpt-card>
+      <div class="warning-box-top">
+        <div class="top-item" v-for="(item, index) in warningList" :key="index">
+          <div class="top-item-img">
+            <img :src="item.dataIcon" />
+            <div class="top-item-left">
+              <span>{{ item.label }}</span>
+              <span>{{ item.count }}</span>
             </div>
           </div>
-          <div class="num-item">
-            <div>5-10人</div>
-            <div>
-              <div>6栋</div>
-              <img
-                src="../../../../assets/img/modules/visual/right-icon.png"
-                alt=""
-                class="right-icon"
-              />
+          <div class="top-item-num">
+            <div
+              class="num-item"
+              :class="{
+                'num-item-active': activeIndex == index && activeLevel == '1',
+              }"
+              @click="onClickList(index, '1')"
+            >
+              <div>{{ item.level1 }}-{{ item.level2 }}人</div>
+              <div>
+                <div>{{ item.levelCount1 }}栋</div>
+                <img
+                  src="../../../../assets/img/modules/visual/right-icon.png"
+                  class="right-icon"
+                />
+              </div>
+            </div>
+            <div
+              class="num-item"
+              :class="{
+                'num-item-active': activeIndex == index && activeLevel == '2',
+              }"
+              @click="onClickList(index, '2')"
+            >
+              <div>{{ item.level2 }}人以上</div>
+              <div>
+                <div>{{ item.levelCount2 }}栋</div>
+                <img
+                  src="../../../../assets/img/modules/visual/right-icon.png"
+                  class="right-icon"
+                />
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="warning-box-bottom">
-      <screen-table :headerList='headerList'></screen-table>
-      <div class="pagination">
-      <el-pagination
-        background
-        layout="prev, pager, next"
-        :total="1000">
-      </el-pagination>
+      <div class="warning-box-bottom">
+        <screen-table
+          :headerList="headerList"
+          :tableData="tableData"
+          :visibleLoading="visibleLoading"
+        ></screen-table>
+        <div class="pagination">
+          <el-pagination
+            :current-page="pageNo"
+            :page-size="pageSize"
+            background
+            layout="prev, pager, next"
+            @size-change="pageSizeChangeHandleNew"
+            @current-change="pageCurrentChangeHandleNew"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
       </div>
-    </div>
+    </cpt-card>
   </div>
 </template>
 
 <script>
+import { requestPost } from "@/js/dai/request";
 import screenTable from "./components/screen-table/index";
+import cptCard from "@/views/modules/visual/cpts/card";
+import nextTick from "dai-js/tools/nextTick";
+
 export default {
   name: "warning-box",
   components: {
-    screenTable
+    cptCard,
+    screenTable,
   },
   data() {
     return {
-        headerList:[
-        { title: '序号' },
-        { title: '所属网格'},
-        { title: '所属小区'},
-        { title: '楼号'},
-        { title: '姓名' },
+      warningList: [],
+      headerList: [
+        { title: "序号" },
+        { title: "所属网格" },
+        { title: "所属小区" },
+        { title: "楼号" },
+        { title: "姓名" },
+      ],
+      tableData: [
+        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
       ],
+      visibleLoading: true,
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      activeIndex: 0,
+      activeLevel: "1",
     };
   },
+  async mounted() {
+    await nextTick(100);
+    this.getBuildingwarnlist();
+  },
   methods: {
-  onClickList(){}
-  }
+    onClickList(index, level) {
+      this.activeIndex = index;
+      this.activeLevel = level;
+      this.pageNo = 1;
+      this.getUserwarnlist();
+    },
+    //具体人员列表
+    async getUserwarnlist() {
+      const { activeIndex, activeLevel, warningList } = this;
+      const reqItem = warningList[activeIndex];
+      let tableData = [];
+      const url = "/epmetuser/statsresiwarn/userwarnlist";
+      let params = {
+        configId: reqItem.configId,
+        buildingIdList: reqItem["buildingIdList" + activeLevel],
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        data.list.forEach((item, index) => {
+          tableData.push([
+            index + 1,
+            item.gridName,
+            item.neighborhoodName,
+            item.buildingName,
+            item.residentNames ? item.residentNames : "暂无",
+          ]);
+        });
+        this.tableData = tableData;
+        this.total = data.total;
+      } else {
+      }
+    },
+    // 【人员预警】 楼宇预警数量列表
+    async getBuildingwarnlist() {
+      const url = "/epmetuser/statsresiwarn/buildingwarnlist";
+      let params = {
+        agencyId: this.$store.state.user.agencyId,
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.warningList = data;
+        this.visibleLoading = false;
+        this.getUserwarnlist();
+      } else {
+      }
+    },
+    pageSizeChangeHandleNew(val) {
+      this.pageNo = 1;
+      this.pageSize = val;
+    },
+    pageCurrentChangeHandleNew(val) {
+      this.pageNo = val;
+      this.getUserwarnlist();
+    },
+  },
 };
 </script>