人口预警

src/assets/scss/dataBoard/renfang/index.scss

@@ -128,7 +128,7 @@
 .m-szsq {
     height: 115px;
 }
-.m-rkfx {
+.m-rkyj {
     height: 253px;
 }
 

src/views/dataBoard/renfang/cpts/fwgl.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="main">
+    <div class="fwgl-main">
       <div class="g-pie">
         <div class="pie-left">
           <screen-echarts-frame class=""
@@ -255,7 +255,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.main {
+.fwgl-main {
   height: 100%;
   width: 100%;
 

src/views/dataBoard/renfang/cpts/jmgl.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="main">
+    <div class="jmgl-main">
       <div class="g-pie">
         <div class="pie-left">
           <screen-echarts-frame class=""
@@ -238,7 +238,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.main {
+.jmgl-main {
   height: 100%;
   width: 100%;
 

src/views/dataBoard/renfang/cpts/rkfx.vue

@@ -1,5 +1,17 @@
 <template>
-  <div>房屋概览</div>
+  <div class="rkyj-main">
+    <div class="title">
+      <div>预警居民类别</div>
+      <div>黄色预警(5-10人)<img class="img"
+             src="@/assets/images/shuju/renfang/remark.png"
+             alt /></div>
+      <div>红色预警(10人以上)<img class="img"
+             src="@/assets/images/shuju/renfang/remark.png"
+             alt /></div>
+
+    </div>
+
+  </div>
 </template>
 
 <script>
@@ -12,10 +24,103 @@ export default {
       default: "",
     },
   },
-  data() {},
-  mounted() {},
+  data () {
+    return {
+      listData: [
+        {
+          type: '低保人员',
+          yellow: 200,
+          red: 5,
+        },
+        {
+          type: '失业人员',
+          yellow: 2,
+          red: 500,
+        },
+        {
+          type: '老年人',
+          yellow: 2000,
+          red: 5,
+        },
+        {
+          type: '空巢老人',
+          yellow: 2,
+          red: 5,
+        },
+        {
+          type: '大病',
+          yellow: 2,
+          red: 5,
+        },
+        {
+          type: '慢病',
+          yellow: 2,
+          red: 5,
+        },
+      ]
+    }
+  },
+  mounted () { },
   methods: {},
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.rkyj-main {
+  .title {
+    margin: 24px 0 24px 24px;
+    display: flex;
+    justify-content: space-between;
+
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+
+    .img {
+      margin-left: 4px;
+      width: 15px;
+      height: 15px;
+    }
+  }
+
+  .list {
+    /deep/ .el-scrollbar__wrap {
+      // width: 100% !important;
+      overflow-x: hidden !important;
+    }
+    .g-scrollar {
+      // width: 100%;
+      height: 168px;
+
+      .item {
+        padding: 12px 20px 12px 24px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .item-title {
+          flex: 0 0 60px;
+        }
+
+        .item-num {
+          flex: 0 0 100px;
+          // text-align: right;
+          .img {
+            width: 32px;
+            height: 32px;
+            margin-right: 8px;
+          }
+        }
+      }
+      .item:nth-child(1) {
+        background: rgba(26, 149, 255, 0.15);
+      }
+    }
+  }
+}
+</style>

src/views/dataBoard/renfang/cpts/rkyj.vue

@@ -1,5 +1,33 @@
 <template>
-  <div>房屋概览</div>
+  <div class="rkyj-main">
+    <div class="title">
+      <div>预警居民类别</div>
+      <div>黄色预警(5-10人)<img class="img"
+             src="@/assets/images/shuju/renfang/remark.png"
+             alt /></div>
+      <div>红色预警(10人以上)<img class="img"
+             src="@/assets/images/shuju/renfang/remark.png"
+             alt /></div>
+
+    </div>
+    <div class="list">
+      <el-scrollbar :style="{height:treeHeight}"
+                    class="g-scrollar">
+
+        <div v-for="(dataitem,index) in listData"
+             :key="index"
+             class="item">
+          <div class="item-title">{{dataitem.type}}</div>
+          <div class="item-num"><img class="img"
+                 src="@/assets/images/shuju/renfang/warning-yellow.png"
+                 alt />{{dataitem.yellow}}栋</div>
+          <div class="item-num"><img class="img"
+                 src="@/assets/images/shuju/renfang/warning-red.png"
+                 alt />{{dataitem.red}}栋</div>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -12,10 +40,103 @@ export default {
       default: "",
     },
   },
-  data() {},
-  mounted() {},
+  data () {
+    return {
+      listData: [
+        {
+          type: '低保人员',
+          yellow: 200,
+          red: 5,
+        },
+        {
+          type: '失业人员',
+          yellow: 2,
+          red: 500,
+        },
+        {
+          type: '老年人',
+          yellow: 2000,
+          red: 5,
+        },
+        {
+          type: '空巢老人',
+          yellow: 2,
+          red: 5,
+        },
+        {
+          type: '大病',
+          yellow: 2,
+          red: 5,
+        },
+        {
+          type: '慢病',
+          yellow: 2,
+          red: 5,
+        },
+      ]
+    }
+  },
+  mounted () { },
   methods: {},
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.rkyj-main {
+  .title {
+    margin: 24px 0 24px 24px;
+    display: flex;
+    justify-content: space-between;
+
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+
+    .img {
+      margin-left: 4px;
+      width: 15px;
+      height: 15px;
+    }
+  }
+
+  .list {
+    /deep/ .el-scrollbar__wrap {
+      // width: 100% !important;
+      overflow-x: hidden !important;
+    }
+    .g-scrollar {
+      // width: 100%;
+      height: 168px;
+
+      .item {
+        padding: 12px 20px 12px 24px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .item-title {
+          flex: 0 0 60px;
+        }
+
+        .item-num {
+          flex: 0 0 100px;
+          // text-align: right;
+          .img {
+            width: 32px;
+            height: 32px;
+            margin-right: 8px;
+          }
+        }
+      }
+      .item:nth-child(1) {
+        background: rgba(26, 149, 255, 0.15);
+      }
+    }
+  }
+}
+</style>

src/views/dataBoard/renfang/cpts/szsq.vue

@@ -1,5 +1,38 @@
 <template>
-  <div>房屋概览</div>
+  <div class="szsq-main">
+    <div class="item">
+      <img class="img"
+           src="@/assets/images/shuju/renfang/szsq-logo.png"
+           alt />
+      <div class="content">
+        <div class="row1">
+          <div class="title">数字社区</div>
+          <div class="line"></div>
+        </div>
+        <div class="row2">
+          <span class="num">521</span>
+          <span class="unit">个</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="item">
+      <img class="img"
+           src="@/assets/images/shuju/renfang/szsq-logo.png"
+           alt />
+      <div class="content">
+        <div class="row1">
+          <div class="title">开通数量</div>
+          <div class="line"></div>
+        </div>
+        <div class="row2">
+          <span class="num">123</span>
+          <span class="unit">个</span>
+        </div>
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <script>
@@ -12,10 +45,71 @@ export default {
       default: "",
     },
   },
-  data() {},
-  mounted() {},
+  data () { },
+  mounted () { },
   methods: {},
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.szsq-main {
+  margin-top: 22px;
+  display: flex;
+  justify-content: space-around;
+
+  .item {
+    display: flex;
+
+    .img {
+      height: 64px;
+      width: 64px;
+    }
+
+    .content {
+      margin-left: 19px;
+
+      .row1 {
+        .title {
+          font-size: 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: rgba(255, 255, 255, 0.65);
+          padding-left: 8px;
+        }
+
+        .line {
+          margin-top: -6px;
+          width: 88px;
+          height: 8px;
+          background: linear-gradient(
+            270deg,
+            rgba(168, 241, 255, 0) 0%,
+            #6fdeff 100%
+          );
+          opacity: 0.25;
+        }
+      }
+
+      .row2 {
+        margin-top: 4px;
+
+        .num {
+          font-size: 24px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+          line-height: 33px;
+        }
+
+        .unit {
+          margin-left: 9px;
+          font-size: 14px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dataBoard/renfang/index.vue

@@ -3,10 +3,8 @@
     <div class="g-left">
       <div class="m-box">
         <div class="box-title">
-          <img
-            src="~@/assets/images/shuju/main/card-title-bg-480.png"
-            class="box-title-bg"
-          />
+          <img src="~@/assets/images/shuju/main/card-title-bg-480.png"
+               class="box-title-bg" />
           <div class="box-title-txt">房屋概览</div>
         </div>
 
@@ -17,10 +15,8 @@
 
       <div class="m-box">
         <div class="box-title">
-          <img
-            src="~@/assets/images/shuju/main/card-title-bg-480.png"
-            class="box-title-bg"
-          />
+          <img src="~@/assets/images/shuju/main/card-title-bg-480.png"
+               class="box-title-bg" />
           <div class="box-title-txt">居民概览</div>
         </div>
 
@@ -34,10 +30,8 @@
       <div class="m-map">
         <div class="m-per">
           <div class="item">
-            <img
-              class="item-icon"
-              src="~@/assets/images/shuju/renfang/index/per/lnr.png"
-            />
+            <img class="item-icon"
+                 src="~@/assets/images/shuju/renfang/index/per/lnr.png" />
             <div class="item-info">
               <div>老年人</div>
               <div>
@@ -47,10 +41,8 @@
             </div>
           </div>
           <div class="item">
-            <img
-              class="item-icon"
-              src="~@/assets/images/shuju/renfang/index/per/qsn.png"
-            />
+            <img class="item-icon"
+                 src="~@/assets/images/shuju/renfang/index/per/qsn.png" />
             <div class="item-info">
               <div>青少年</div>
               <div>
@@ -60,10 +52,8 @@
             </div>
           </div>
           <div class="item">
-            <img
-              class="item-icon"
-              src="~@/assets/images/shuju/renfang/index/per/zyz.png"
-            />
+            <img class="item-icon"
+                 src="~@/assets/images/shuju/renfang/index/per/zyz.png" />
             <div class="item-info">
               <div>志愿者</div>
               <div>
@@ -73,10 +63,8 @@
             </div>
           </div>
           <div class="item">
-            <img
-              class="item-icon"
-              src="~@/assets/images/shuju/renfang/index/per/dy.png"
-            />
+            <img class="item-icon"
+                 src="~@/assets/images/shuju/renfang/index/per/dy.png" />
             <div class="item-info">
               <div>党员</div>
               <div>
@@ -86,10 +74,8 @@
             </div>
           </div>
           <div class="item">
-            <img
-              class="item-icon"
-              src="~@/assets/images/shuju/renfang/index/per/syry.png"
-            />
+            <img class="item-icon"
+                 src="~@/assets/images/shuju/renfang/index/per/syry.png" />
             <div class="item-info">
               <div>失业人员</div>
               <div>
@@ -100,33 +86,25 @@
           </div>
         </div>
 
-        <grid-map
-          v-if="orgData.id"
-          @clickAgency="clickAgencyItem"
-          :srcGridData="orgData"
-        />
+        <grid-map v-if="orgData.id"
+                  @clickAgency="clickAgencyItem"
+                  :srcGridData="orgData" />
       </div>
 
       <div class="m-search">
         <div class="btn">
-          <img
-            src="~@/assets/images/shuju/renfang/index/search/btn-bg.png"
-            class="btn-bg"
-          />
-          <img
-            src="~@/assets/images/shuju/renfang/index/search/btn-bg-hover.png"
-            class="btn-bg-hover"
-          />
+          <img src="~@/assets/images/shuju/renfang/index/search/btn-bg.png"
+               class="btn-bg" />
+          <img src="~@/assets/images/shuju/renfang/index/search/btn-bg-hover.png"
+               class="btn-bg-hover" />
           <span>点击搜索</span>
         </div>
       </div>
 
       <div class="m-box m-cate">
         <div class="box-title">
-          <img
-            src="~@/assets/images/shuju/main/card-title-bg-800.png"
-            class="box-title-bg"
-          />
+          <img src="~@/assets/images/shuju/main/card-title-bg-800.png"
+               class="box-title-bg" />
           <div class="box-title-txt">居民分类分析</div>
 
           <div class="box-title-btn">
@@ -137,11 +115,9 @@
         </div>
 
         <div class="list">
-          <div
-            class="item"
-            :key="item.code"
-            v-for="(item, index) in warningData"
-          >
+          <div class="item"
+               :key="item.code"
+               v-for="(item, index) in warningData">
             <div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
             <div class="item-name">{{ item.name }}</div>
             <div class="item-count">
@@ -152,11 +128,10 @@
             </div>
             <div class="item-per">
               <span>较上月</span>
-              <img
-                v-if="false"
-                src="~@/assets/images/shuju/renfang/index/up.png"
-              />
-              <img v-else src="~@/assets/images/shuju/renfang/index/down.png" />
+              <img v-if="false"
+                   src="~@/assets/images/shuju/renfang/index/up.png" />
+              <img v-else
+                   src="~@/assets/images/shuju/renfang/index/down.png" />
               <b>{{ item.count }}</b>
               <span>人</span>
             </div>
@@ -168,10 +143,8 @@
     <div class="g-right">
       <div class="m-box">
         <div class="box-title">
-          <img
-            src="~@/assets/images/shuju/main/card-title-bg-480.png"
-            class="box-title-bg"
-          />
+          <img src="~@/assets/images/shuju/main/card-title-bg-480.png"
+               class="box-title-bg" />
           <div class="box-title-txt">数字社区</div>
         </div>
 
@@ -179,31 +152,27 @@
           <szsq :orgId="orgData.id"></szsq>
         </div>
       </div>
+
       <div class="m-box">
         <div class="box-title">
-          <img
-            src="~@/assets/images/shuju/main/card-title-bg-480.png"
-            class="box-title-bg"
-          />
-          <div class="box-title-txt">人口分析</div>
+          <img src="~@/assets/images/shuju/main/card-title-bg-480.png"
+               class="box-title-bg" />
+          <div class="box-title-txt">人口预警</div>
         </div>
 
-        <div class="m-subbox m-rkfx">
-          <rkfx :orgId="orgData.id"></rkfx>
+        <div class="m-subbox m-rkyj">
+          <rkyj :orgId="orgData.id"></rkyj>
         </div>
       </div>
-
       <div class="m-box">
         <div class="box-title">
-          <img
-            src="~@/assets/images/shuju/main/card-title-bg-480.png"
-            class="box-title-bg"
-          />
-          <div class="box-title-txt">人口预警</div>
+          <img src="~@/assets/images/shuju/main/card-title-bg-480.png"
+               class="box-title-bg" />
+          <div class="box-title-txt">人口分析</div>
         </div>
 
-        <div class="m-subbox">
-          <rkyj :orgId="orgData.id"></rkyj>
+        <div class="m-subbox ">
+          <rkfx :orgId="orgData.id"></rkfx>
         </div>
       </div>
     </div>
@@ -223,7 +192,7 @@ import getQueryPara from "dai-js/modules/getQueryPara";
 export default {
   components: { gridMap, fwgl, jmgl, rkfx, rkyj, szsq },
 
-  data() {
+  data () {
     return {
       orgData: {}, //当前组织对象
       orgId: "",
@@ -233,7 +202,7 @@ export default {
       warningData: [],
     };
   },
-  async mounted() {
+  async mounted () {
     const queryOrgId = getQueryPara("orgId");
     const queryOrgLevel = getQueryPara("orgLevel");
     console.log("orgId", queryOrgId);
@@ -248,7 +217,7 @@ export default {
   },
   methods: {
     //加载组织数据
-    async getWarningList() {
+    async getWarningList () {
       const url = "/epmetuser/statsresiwarn/list";
       let params = {
         id: this.orgData.id,
@@ -272,7 +241,7 @@ export default {
     },
 
     //加载组织数据
-    async loadOrgData() {
+    async loadOrgData () {
       const url = "/gov/org/agency/maporg";
       let params = {
         orgId: this.orgId,