村社区界面完成

project/biaopin/dv/weiyang/AppDvWeiyang.vue

@@ -108,8 +108,8 @@ const residentDistribution = {
     encode: {x: 'name', y: 'c'}
   },
   yAxis: {type: "value", axisLine: hide, splitLine: {lineStyle: {type: 'dashed', color: 'rgba(61,82,102,0.65)'}}},
-  xAxis: {type: "category", axisTick: hide, axisLabel: {rotate: 45}},
+  xAxis: {type: "category", axisTick: hide, axisLabel: {rotate: 35}},
-  grid: {left: 12, right: 12, top: 20, bottom: 0, containLabel: true},
+  grid: {left: 12, right: 12, top: 10, bottom: 0, containLabel: true},
   legend: {show: false},
 }
 const spDistribution = {
@@ -132,6 +132,19 @@ const wotDistribution = {
   tooltip: {formatter: params => `${params.marker} ${params.name} ${params.percent}%`},
   legend: hide,
 }
+const residentGroupTrend = {
+  series: [
+    {type: "line", name: "人数", itemStyle: {color: "#1EE7E7"}, encode: {x: 'ymd', y: 'memberCount'}},
+    {type: "line", name: "群数量", itemStyle: {color: "#1890FF"}, encode: {x: 'ymd', y: 'groupCount'}, yAxisIndex: 1},
+  ],
+  yAxis: [
+    {type: "value", axisLine: hide, splitLine: {lineStyle: {type: 'dashed', color: 'rgba(61,82,102,0.65)'}}, position: 'right'},
+    {type: "value", axisLine: hide, splitLine: {lineStyle: {type: 'dashed', color: 'rgba(61,82,102,0.65)'}}}
+  ],
+  xAxis: {type: "category", axisTick: hide, axisLabel: {rotate: 35, fontSize: 10}},
+  grid: {left: 12, right: 12, top: 10, bottom: 20, containLabel: true},
+  legend: {show: true, bottom: 0, textStyle: {color: '#fff'}, icon: 'rect', itemWidth: 8, itemHeight: 8},
+}
 export default {
   name: "AppDvWeiyang",
   components: {NavTabs, AiEchart, ChargingPercent, ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
@@ -146,19 +159,25 @@ export default {
       areaId: "",
       integralOrderType: "",
       sta: {},
+      chart: {aiTrend, workChain, residentDistribution, spDistribution, wotDistribution, integralOrder, residentGroupTrend},
       chartData: {},
       tableData: {}
     }
   },
   computed: {
     ...mapState(["user"]),
-    currentAreaId: v => v.areaId || v.user.info.areaId,
+    currentAreaId: v => "610112010017" || v.areaId || v.user.info.areaId,
     isLastAreaLevel: v => !/0{3}$/.test(v.currentAreaId),
     areaSta: v => [
       {label: "社区数", icon: "66d80346ec1ea", prop: "communityCount", unit: "个"},
       {label: "小区数", icon: "66d7fd4c0445d", prop: "residentialQuartersCount", unit: "个"},
       {label: "村数", icon: "66d7fd4d28f1b", prop: "villageCount", unit: "个"},
     ].map(e => ({...e, label: v.getLabel(e.prop), value: v.sta[e.prop] || 0, icon: `https://cdn.sinoecare.com/i/2024/09/04/${e.icon}.png`})),
+    gridSta: v => [
+      {label: "网格长", icon: "66e3dfde22b10", prop: "girdManager", unit: "人"},
+      {label: "网格员", icon: "66e3dfdfd0252", prop: "girdMember", unit: "人"},
+      {label: "楼栋长", icon: "66e3dfe1280a6", prop: "buildingManager", unit: "人"},
+    ].map(e => ({...e, label: v.getLabel(e.prop), value: v.sta[e.prop] || 0, icon: `https://cdn.sinoecare.com/i/2024/09/13/${e.icon}.png`})),
     workorderSta: v => [
       {label: "已处理", prop: 'workOrderCountFinishNowMonth', unit: "个"},
       {label: "办理中", prop: 'workOrderCountProcessingNowMonth', unit: "个"},
@@ -169,7 +188,7 @@ export default {
       header: ['时间', '状态', '事件描述'],
       headerBGC: '#21b4fd1a', oddRowBGC: "transparent", evenRowBGC: "transparent",
       columnWidth: [160, 100,], align: [, 'center',],
-      rowNum: 9,
+      rowNum: 10,
       data: v.tableData.wotDistribution?.map(e => {
         const color = v.$dict.getColor('clapEventStatus', e.eventStatus)
         return [e.createTime,
@@ -177,6 +196,15 @@ export default {
           e.content]
       })
     }),
+    residentGroupListTable: v => ({
+      header: ['居民群', '群主', '群人数'],
+      headerBGC: '#21b4fd1a', oddRowBGC: "transparent", evenRowBGC: "transparent",
+      columnWidth: [300], align: ['left', 'center', 'right'],
+      rowNum: 16,
+      data: v.tableData.residentGroupList?.map(e => {
+        return [e.name, e.ownerName, e.memberCount]
+      })
+    }),
     tabs: v => v.$dict.getDict("wyIntegralOrderType").map(e => {
       return {
         label: e.dictName,
@@ -186,9 +214,6 @@ export default {
     monthOnMonth: v => calcComparePercent(v.sta.residentCountLastMonth, v.sta.residentCount),
     yearOnYear: v => calcComparePercent(v.sta.residentCountLastYear, v.sta.residentCount),
     workorderFinishedPercent: v => handlePercent(v.sta.workOrderCountFinish / v.sta.workOrderCount * 100),
-    chart: () => {
-      return {aiTrend, workChain, residentDistribution, spDistribution, wotDistribution, integralOrder}
-    },
     spDistributionTotal: v => v.chartData.spDistribution?.reduce((a, b) => a.c + b.c, 0) || 0,
     wotDistributionTotal: v => v.chartData.wotDistribution?.reduce((a, b) => a.c + b.c, 0) || 0,
   },
@@ -203,7 +228,7 @@ export default {
   methods: {
     getData() {
       const {instance: http, currentAreaId: areaId} = this
-      return Promise.all([
+      const list = [
         http.post("/app/wyDiy/pvr", null, {params: {areaId}}).then(res => {
           if (res?.data) {
             this.sta = res.data
@@ -215,38 +240,64 @@ export default {
           }
         }),
         this.getIntegralOrder(),
-        http.post("/app/wyDiy/residentDistribution", null, {params: {areaId}}).then(res => {
-          if (res?.data) {
-            this.$set(this.chartData, "residentDistribution", res.data)
-          }
-        }),
         http.post("/app/wyDiy/spDistribution", null, {params: {areaId}}).then(res => {
           if (res?.data) {
             this.$set(this.chartData, "spDistribution", res.data)
           }
         }),
-        http.post("/app/wyDiy/workChain", null, {params: {areaId}}).then(res => {
-          if (res?.data) {
-            this.$set(this.chartData, "workChain", res.data.map(e => ['name', ...workChainSeries].map(k => e[k] ?? 0)))
-          }
-        }),
-        http.post("/app/wyDiy/wotDistribution", null, {params: {areaId}}).then(res => {
-          if (res?.data) {
-            this.$set(this.chartData, "wotDistribution", res.data)
-          }
-        }),
         http.post("/app/wyDiy/reportInfoList", null, {params: {areaId, size: 999}}).then(res => {
           if (res?.data) {
             this.$set(this.tableData, "wotDistribution", res.data.records)
           }
         }),
-      ])
+      ]
+      if (this.isLastAreaLevel) {
+        list.concat([
+          http.post("/app/wyDiy/residentGroupList", null, {params: {areaId, size: 999}}).then(res => {
+            if (res?.data) {
+              this.$set(this.tableData, "residentGroupList", res.data)
+            }
+          }),
+          http.post("/app/wyDiy/residentAge", null, {params: {areaId}}).then(res => {
+            if (res?.data) {
+              this.$set(this.chartData, "residentDistribution", res.data)
+            }
+          }),
+          http.post("/app/wyDiy/residentGroupTrend", null, {params: {areaId}}).then(res => {
+            if (res?.data) {
+              this.$set(this.chartData, "residentGroupTrend", res.data)
+            }
+          }),
+        ])
+      } else {
+        list.concat([
+          http.post("/app/wyDiy/residentDistribution", null, {params: {areaId}}).then(res => {
+            if (res?.data) {
+              this.$set(this.chartData, "residentDistribution", res.data)
+            }
+          }),
+          http.post("/app/wyDiy/workChain", null, {params: {areaId}}).then(res => {
+            if (res?.data) {
+              this.$set(this.chartData, "workChain", res.data.map(e => ['name', ...workChainSeries].map(k => e[k] ?? 0)))
+            }
+          }),
+          http.post("/app/wyDiy/wotDistribution", null, {params: {areaId}}).then(res => {
+            if (res?.data) {
+              this.$set(this.chartData, "wotDistribution", res.data)
+            }
+          })
+        ])
+      }
+      return Promise.all(list)
     },
     getLabel(key) {
       return this.dict.getLabel("wyBasicCount", key) || key
     },
     getIntegralOrder() {
-      const {instance: http, currentAreaId: areaId, integralOrderType} = this
+      let {instance: http, currentAreaId: areaId, integralOrderType, isLastAreaLevel} = this
+      if (isLastAreaLevel) {
+        integralOrderType = 3
+      }
       return http.post("/app/wyDiy/integralOrder", null, {params: {areaId, type: integralOrderType}}).then(res => {
         if (res?.data) {
           this.$set(this.chartData, "integralOrder",
@@ -273,23 +324,61 @@ export default {
 <template>
   <section class="AppDvWeiyang" :class="{isLastAreaLevel}">
     <template v-if="isLastAreaLevel">
-      <icon-sta-panel class="a" :label="getLabel('党组织数')" :value="0" unit="人" icon=""/>
+      <div class="a pad-v10 pad-h20">
-      <div class="a1"></div>
+        <icon-sta-panel :label="getLabel('residentCount')" :value="sta.residentCount" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd083a9b0.png"/>
-      <div class="b"></div>
+        <div class="flex staPercent">
+          <div class="flex fill">月环比<p :class="{minus:monthOnMonth<0}" v-text="monthOnMonth"/></div>
+          <div class="flex fill">年同比<p :class="{minus:yearOnYear<0}" v-text="yearOnYear"/></div>
+        </div>
+      </div>
+      <icon-sta-panel class="a1 pad-24" :label="getLabel('residentGroupCount')" :value="sta.residentGroupCount" unit="个" icon="https://cdn.sinoecare.com/i/2024/09/13/66e3b730b524d.png"/>
+      <div class="b flex column center">
+        <div class="font-18 mar-b16" v-text="getLabel('workOrderCountNowMonth')"/>
+        <value-unit :value="sta.workOrderCountNowMonth" unit="个" size="large"/>
+      </div>
       <div class="bb grid">
-        <div class="item" v-for="(e,i) in Array(4)" :key="i"></div>
+        <div class="item pad-v8 flex column center" v-for="(e,i) in workorderSta" :key="i" :class="{isRed:e.isRed}">
+          <div v-text="e.label"/>
+          <value-unit :value="e.value" :unit="e.unit" size="mini"/>
+        </div>
+      </div>
+      <div class="b2 pad-v8 pad-h12 flex column normal font-12">
+        <div v-text="getLabel('aiCount')"/>
+        <value-unit :value="sta.aiCount" unit="次" color="#fff"/>
+        <ai-echart :ops="chart.aiTrend" :data="chartData.aiTrend"/>
+        <div class="flex">
+          {{ getLabel('aiCountLastDay') }}
+          <value-unit class="mar-l8" :value="sta.aiCountLastDay" unit="次" size="mini"/>
+        </div>
       </div>
-      <div class="b2"></div>
       <div class="cc grid">
-        <div class="item" v-for="(e,i) in Array(3)" :key="i"></div>
+        <icon-sta-panel class="item flex" v-for="(e,i) in gridSta" :key="i" v-bind="e" size="small"/>
       </div>
-      <div class="d"></div>
+      <sub-header class="e" title="居民统计">
-      <div class="e"></div>
+        <div class="info pad-r8" slot="right" v-text="`按街道进行汇总统计`"/>
-      <div class="f"></div>
+        <ai-echart :ops="chart.residentDistribution" :data="chartData.residentDistribution"/>
-      <div class="g"></div>
+      </sub-header>
-      <div class="h"></div>
+      <sub-header class="j" title="特殊人群数量统计">
-      <div class="i"></div>
+        <ai-echart :ops="chart.spDistribution" :data="chartData.spDistribution">
-      <div class="j"></div>
+          <div class="summary flex column">
+            <span v-text="`总数`"/>
+            <value-unit :value="spDistributionTotal" unit="人" size="mini"/>
+          </div>
+        </ai-echart>
+      </sub-header>
+      <div class="f">
+        <dv-scroll-board :config="workorderTable"/>
+      </div>
+      <sub-header class="g" title="居民群列表">
+        <dv-scroll-board class="pad-h12" :config="residentGroupListTable"/>
+      </sub-header>
+      <sub-header class="h" title="居民群统计">
+        <ai-echart :ops="chart.residentGroupTrend" :data="chartData.residentGroupTrend"/>
+      </sub-header>
+      <sub-header class="i" title="社区积分排名(前10)">
+        <div class="info pad-r8" slot="right" v-text="`网格员积分排名`"/>
+        <ai-echart :ops="chart.integralOrder" :data="chartData.integralOrder"/>
+      </sub-header>
     </template>
     <template v-else>
       <icon-sta-panel class="a pad-24" :label="getLabel('partyOrgCount')" :value="sta.partyOrgCount" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd06f269b.png"/>
@@ -324,12 +413,13 @@ export default {
           <value-unit :value="e.value" :unit="e.unit" size="mini"/>
         </div>
       </div>
-      <div class="d"></div>
       <div class="e flex column normal">
         <sub-header title="五条工作链"/>
         <ai-echart :ops="chart.workChain" :data="chartData.workChain"/>
       </div>
-      <div class="f"></div>
+      <div class="f">
+
+      </div>
       <div class="g flex column normal">
         <sub-header title="工单分类"/>
         <ai-echart class="wotDistribution" :ops="chart.wotDistribution" :data="chartData.wotDistribution">
@@ -374,6 +464,10 @@ export default {
     }
   }
 }
+@font-face {
+  font-family: "DINAlternate-Bold";
+  src: url("https://cdn.cunwuyun.cn/fonts/D-DIN-PRO-700-Bold.otf");
+}
 </style>
 <style scoped lang="scss">
 .AppDvWeiyang {
@@ -487,7 +581,7 @@ export default {
     }
   }
 
-  @each $s in (12, 14, 16, 20, 24, 36) {
+  @each $s in (12, 14, 16, 18, 20, 24, 36) {
     .font-#{$s} {
       font-size: #{$s}px;
     }

project/biaopin/dv/weiyang/comps/iconSmallPanel.vue

@@ -4,12 +4,12 @@ import ValueUnit from "./valueUnit.vue";
 export default {
   name: "iconSmallPanel",
   components: {ValueUnit},
-  props: ["icon", "label", "value", "unit"]
+  props: ["icon", "label", "value", "unit", "vertical"]
 }
 </script>
 
 <template>
-  <section class="iconSmallPanel">
+  <section class="iconSmallPanel" :class="{vertical}">
     <img v-if="icon" class="icon" :src="icon">
     <div class="fill" v-text="label"/>
     <value-unit :value="value" :unit="unit"/>
@@ -25,6 +25,11 @@ export default {
   align-items: center;
   gap: 13px;
 
+  &.vertical {
+    flex-direction: column;
+    gap: 16px;
+  }
+
   .icon {
     width: 34px;
     height: 34px;

project/biaopin/dv/weiyang/comps/iconStaPanel.vue

@@ -4,16 +4,19 @@ import ValueUnit from "./valueUnit.vue";
 export default {
   name: "iconStaPanel",
   components: {ValueUnit},
-  props: ["icon", "label", "value", "unit"]
+  props: ["icon", "label", "value", "unit"],
+  computed: {
+    valueSize: v => v.$attrs.size ?? 'large'
+  }
 }
 </script>
 
 <template>
-  <section class="iconStaPanel">
+  <section class="iconStaPanel" :class="[$attrs.size]">
     <div class="block">
       <img class="icon" :src="icon">
       <div v-text="label"/>
-      <value-unit :value="value" :unit="unit" size="large"/>
+      <value-unit :value="value" :unit="unit" :size="valueSize"/>
     </div>
   </section>
 </template>
@@ -24,7 +27,6 @@ export default {
   font-size: 18px;
   color: #FFFFFF;
 
-
   .block {
     padding-left: 96px;
     position: relative;
@@ -36,5 +38,23 @@ export default {
       width: 144px;
     }
   }
+
+  &.small {
+    font-size: 14px;
+
+    .block {
+      padding-left: 90px;
+
+      .icon {
+        position: absolute;
+        top: 50%;
+        left: 16px;
+        transform: translateY(-50%);
+        width: 64px;
+      }
+    }
+
+  }
+
 }
 </style>

project/biaopin/dv/weiyang/comps/subHeader.vue

@@ -62,8 +62,8 @@ export default {
   }
 
   .slot {
-    height: calc(100% - 75px);
+    height: calc(100% - 60px);
-    padding-top: 19px;
+    padding-top: 12px;
   }
 }
 </style>

project/biaopin/dv/weiyang/comps/valueUnit.vue

@@ -7,7 +7,7 @@ export default {
 
 <template>
   <section class="valueUnit" :class="[$attrs.size]" :style="{color:$attrs.color}">
-    {{ value }}<p v-text="unit"/>
+    {{ value || 0 }}<p v-text="unit"/>
   </section>
 </template>