人员类别分析

src/assets/scss/modules/visual/personCategory.scss

@@ -0,0 +1,164 @@
+.warning-box {
+  box-sizing: border-box;
+  // 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-size: 100% 100%;
+  padding: 45px 21px 35px 24px;
+
+  &-top {
+    display: flex;
+    // justify-content: space-around;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    min-height: 190px;
+
+    .top-item-active {
+      background: linear-gradient(0deg, #1a5afd86, #26c5ff75);
+    }
+
+    .top-item {
+      box-sizing: border-box;
+      width: 280px;
+      height: 190px;
+      padding: 10px 22px 14px 21px;
+      // background: rgba(255, 255, 255, 0);
+      border: 1px solid #1043c0;
+      box-shadow: 0px 83px 150px 0px #002790;
+      border-radius: 8px;
+      margin-right: 15px;
+      margin-bottom: 15px;
+      cursor: pointer;
+
+      &-img {
+        display: flex;
+        align-items: center;
+
+        img {
+          width: 78px;
+          height: 78px;
+          margin-right: 16px;
+          margin-bottom: 10px;
+        }
+
+        .top-item-left {
+          display: flex;
+          flex-direction: column;
+
+          span {
+            display: inline-block;
+          }
+
+          span:nth-child(1) {
+            font-size: 18px;
+            font-weight: 400;
+            color: #ffffff;
+          }
+
+          span:nth-child(2) {
+            font-size: 28px;
+            font-weight: bold;
+            color: #00fffc;
+            margin-top: 10px;
+          }
+        }
+      }
+
+      &-num {
+        width: 100%;
+        display: flex;
+        position: relative;
+        flex-direction: column;
+        align-items: space-between;
+        // border: 1px solid red;
+
+        .num-item {
+          position: relative;
+          width: 100%;
+          height: 35px;
+          display: flex;
+          border-radius: 4px;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 10px 0 9px;
+
+          // &::after {
+          //   display: block;
+          //   content: "";
+          //   width: 8px;
+          //   height: 8px;
+          //   background: #f0f3f7;
+          //   border-radius: 50%;
+          //   position: absolute;
+          //   left: 12px;
+          //   top: 50%;
+          //   transform: translate(0, -50%);
+          // }
+
+          div:nth-child(1) {
+            font-size: 16px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #ffffff;
+          }
+
+          div:nth-child(2) {
+            // width: 70%;
+            display: flex;
+            font-size: 20px;
+            font-family: PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+
+            .right-icon {
+              width: 10px;
+              height: 14px;
+            }
+          }
+        }
+
+        .num-item:nth-child(2) {
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+
+  &-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;
+      width: 100%;
+      height: 40px;
+      display: flex;
+      justify-content: flex-end;
+
+      /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+        background: #0266d1;
+        color: #000d3f;
+      }
+
+      /deep/ .el-pagination .el-pager li {
+        background: #002e74;
+      }
+
+      /deep/ .el-pagination .btn-prev {
+        background: #002e74;
+      }
+
+      /deep/ .el-pagination .btn-next {
+        background: #002e74;
+      }
+    }
+  }
+}

src/views/modules/visual/basicinfo/personCategory/index.vue

@@ -1,8 +1,40 @@
 <template>
   <div class="warning-box">
     <cpt-card>
+      <div class="title">
+        <img src="@/assets/img/shuju/title-tip.png" />
+        <span>人员类别分析</span>
+
+        <div class="second-select cascader">
+
+          <el-cascader class="customer_cascader"
+                       ref="myCascader"
+                       v-model="agencyIdArray"
+                       :key="iscascaderShow"
+                       :options="casOptions"
+                       :props="optionProps"
+                       :show-all-levels="false"
+                       @change="handleChangeAgency"></el-cascader>
+        </div>
+        <div class="second-select ">
+
+          <el-date-picker v-model="dateIdShow"
+                          type="date"
+                          :clearable="false"
+                          @change="handleChangeDate"
+                          prefix-icon="el-icon-caret-bottom"
+                          placeholder="选择日期"
+                          value-format="yyyy-MM-dd">
+          </el-date-picker>
+
+        </div>
+      </div>
       <div class="warning-box-top">
         <div class="top-item"
+             :class="{
+                'top-item-active': activeIndex == index ,
+              }"
+             @click="onClickList(index)"
              v-for="(item, index) in warningList"
              :key="index">
           <div class="top-item-img">
@@ -13,28 +45,17 @@
             </div>
           </div>
           <div class="top-item-num">
-            <div class="num-item"
+            <div class="num-item">
-                 :class="{
+              <div>较上月</div>
-                'num-item-active': activeIndex == index && activeLevel == '1',
-              }"
-                 @click="onClickList(index, '1')">
-              <div>{{ item.level1 }}-{{ item.level2 }}人</div>
               <div>
-                <div>{{ item.levelCount1 }}栋</div>
+                <div>{{ "+2000" }}</div>
-                <img src="../../../../../assets/img/modules/visual/right-icon.png"
+
-                     class="right-icon" />
               </div>
             </div>
-            <div class="num-item"
+            <div class="num-item">
-                 :class="{
+              <div>{{"  "}}</div>
-                'num-item-active': activeIndex == index && activeLevel == '2',
-              }"
-                 @click="onClickList(index, '2')">
-              <div>{{ item.level2 }}人以上</div>
               <div>
-                <div>{{ item.levelCount2 }}栋</div>
+                <div>{{ "-2000"}}</div>
-                <img src="../../../../../assets/img/modules/visual/right-icon.png"
-                     class="right-icon" />
               </div>
             </div>
           </div>
@@ -73,6 +94,25 @@ export default {
   },
   data () {
     return {
+      //组织级联
+      casOptions: [],
+      agencyIdArray: [],
+      customerList: [],
+      iscascaderShow: 0,
+
+      optionProps: {
+        multiple: false,
+        value: 'agencyId',
+        label: 'agencyName',
+        orgType: 'orgType',
+        children: 'subAgencyList',
+        checkStrictly: true
+      },
+
+      dateIdShow: '',
+      agencyId: '',
+      dateId: '',
+
       warningList: [],
       headerList: [
         { title: "序号" },
@@ -94,12 +134,24 @@ export default {
   },
   async mounted () {
     await nextTick(100);
-    this.getBuildingwarnlist();
+    this.initData()
+    //获取各类人数
+    this.getCategoryData()
+
   },
   methods: {
-    onClickList (index, level) {
+    initData () {
+      var time = (new Date).getTime() - 24 * 60 * 60 * 1000;
+      var nowdate = new Date(time); // 获取的是前一天日期
+      var y = nowdate.getFullYear();
+      var m = nowdate.getMonth() + 1 < 10 ? "0" + (nowdate.getMonth() + 1) : nowdate.getMonth() + 1;
+      var d = nowdate.getDate() < 10 ? "0" + nowdate.getDate() : nowdate.getDate();
+      this.dateIdShow = y + '-' + m + '-' + d;
+    },
+
+    onClickList (index) {
       this.activeIndex = index;
-      this.activeLevel = level;
+      // this.activeLevel = level;
       this.pageNo = 1;
       this.getUserwarnlist();
     },
@@ -131,9 +183,10 @@ export default {
       } else {
       }
     },
-    // 【人员预警】 楼宇预警数量列表
+    //获取各类人数
-    async getBuildingwarnlist () {
+    async getCategoryData () {
-      const url = "/epmetuser/statsresiwarn/buildingwarnlist";
+      // const url = "/data/aggregator/icuser/category-data";
+      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/icuser/category-data";
       let params = {
         agencyId: this.$store.state.user.agencyId,
       };
@@ -145,6 +198,19 @@ export default {
       } else {
       }
     },
+    async handleChangeDate (value) {
+      this.dateIdShow = value
+      // await this.getPieChart()
+      // this.getPie()
+    },
+
+    async handleChangeAgency (value) {
+      this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
+      this.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
+      await this.getPieChart()
+      this.getPie()
+      console.log(this.agencyIdArray)
+    },
     pageSizeChangeHandleNew (val) {
       this.pageNo = 1;
       this.pageSize = val;
@@ -156,9 +222,13 @@ export default {
   },
 };
 </script>
-
 <style
   lang="scss"
-  src="@/assets/scss/modules/visual/warning.scss"
+  src="@/assets/scss/modules/visual/typeAnalyze.scss"
+  scoped
+></style>
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/personCategory.scss"
   scoped
 ></style>

src/views/modules/visual/communityGovern/typeAnalyze.vue

@@ -153,7 +153,7 @@ export default {
             width: "10%",
           },
         ],
-        header: ["序号", "类别", "反映渠道", "所属网格", "状态", "项目标题", "转成项目时间", "操作"],
+        header: ["序号", "类别", "反映渠道", "所属组织", "状态", "项目标题", "转成项目时间", "操作"],
         list: [],
         pageSize: 10,
         pageNo: 1,
@@ -427,7 +427,7 @@ export default {
               // item.projectCode ? item.projectCode : '',
               item.categoryNames.join(','),
               item.originShow ? item.originShow : '',
-              item.gridName ? item.gridName : '',
+              item.orgName ? item.orgName : '',
               item.statusShow ? item.statusShow : '',
               item.title ? item.title : '',
               item.time ? item.time : '',