区镇除地图以外都开发完成

project/biaopin/dv/weiyang/AppDvWeiyang.vue

@@ -30,6 +30,55 @@ const aiTrend = {
   legend: {show: false},
   grid: {left: 0, right: 0, bottom: 1, top: 0, containLabel: true},
 }
+const integralOrder = {
+  series: {
+    name: "c", type: "bar", barWidth: 10,
+    label: {position: [390, 0], show: true, color: "#fff"},
+    labelLine: hide,
+    showBackground: !0, backgroundStyle: {color: "rgba(107,126,148,0.4)"},
+    itemStyle: {
+      color: ({dataIndex}) => {
+        const color = {
+          type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [
+            {offset: 0, color: "#00527D1a"}, {offset: 1, color: "#00EFFF"},
+          ]
+        }
+        if (dataIndex === 0) {
+          color.colorStops = [{offset: 0, color: "#DBB36E1a"}, {offset: 1, color: "#F5C26B"}]
+        } else if (dataIndex == 1) {
+          color.colorStops = [{offset: 0, color: "#6070801a"}, {offset: 1, color: "#7AA3CC"}]
+        } else if (dataIndex == 2) {
+          color.colorStops = [{offset: 0, color: "#DB9A6E1a"}, {offset: 1, color: "#DB9A6E"}]
+        }
+        return color
+      }
+    }
+  },
+  yAxis: {
+    type: "category", inverse: true, axisLine: hide, axisTick: hide, axisPointer: hide,
+    axisLabel: {
+      color: "#9CB3C9", formatter: (name, index) => {
+        const icon = {
+          0: "🥇", 1: "🥈", 2: "🥉",
+        }[index] ?? `{div|${index}}`
+        return `${icon} ${name}`
+      },
+      rich: {
+        div: {
+          borderWidth: 2,
+          borderColor: {type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{offset: 0, color: "#00EFFF"}, {offset: 1, color: "#00527D"}]},
+          color: '#fff',
+          borderRadius: 4,
+          padding: [3, 4]
+        }
+      }
+    }
+  },
+  xAxis: hide,
+  grid: {left: 20, right: 40, top: 0, bottom: 0, containLabel: true},
+  legend: hide,
+  tooltip: {trigger: 'axis', backgroundColor: "#33333388", textStyle: {color: '#fff'}}
+}
 const workChainSeries = ['楼栋长', '治安协理员', '业委会', '网格员', '第三方机构']
 const workChain = {
   color: [
@@ -68,8 +117,19 @@ const spDistribution = {
     type: 'pie',
     radius: ['50%', '70%'],
     padAngle: 3,
-    label: {},
+    label: {color: "#9CB3C9", shadowColor: "transparent", formatter: params => `${params.name}\n${params.value.c}; ${params.percent}%`},
   },
+  tooltip: {formatter: params => `${params.marker} ${params.name} ${params.percent}%`},
+  legend: hide,
+}
+const wotDistribution = {
+  series: {
+    type: 'pie',
+    radius: ['50%', '70%'],
+    padAngle: 3,
+    label: {color: "#9CB3C9", shadowColor: "transparent", formatter: params => `${params.name}\n${params.value.c}; ${params.percent}%`},
+  },
+  tooltip: {formatter: params => `${params.marker} ${params.name} ${params.percent}%`},
   legend: hide,
 }
 export default {
@@ -86,7 +146,8 @@ export default {
       areaId: "",
       integralOrderType: "",
       sta: {},
-      chartData: {}
+      chartData: {},
+      tableData: {}
     }
   },
   computed: {
@@ -106,10 +167,15 @@ export default {
     ].map(e => ({...e, label: v.getLabel(e.prop), value: v.sta[e.prop] || 0})),
     workorderTable: v => ({
       header: ['时间', '状态', '事件描述'],
-      headerBGC: '#21b4fd1a',
-      oddRowBGC: "transparent",
-      evenRowBGC: "transparent",
-      data: []
+      headerBGC: '#21b4fd1a', oddRowBGC: "transparent", evenRowBGC: "transparent",
+      columnWidth: [160, 100,], align: [, 'center',],
+      rowNum: 9,
+      data: v.tableData.wotDistribution?.map(e => {
+        const color = v.$dict.getColor('clapEventStatus', e.eventStatus)
+        return [e.createTime,
+          `<span class="eventStatus" style="background-color: ${color}24;color: ${color};">${v.$dict.getLabel('clapEventStatus', e.eventStatus)}</span>`,
+          e.content]
+      })
     }),
     tabs: v => v.$dict.getDict("wyIntegralOrderType").map(e => {
       return {
@@ -120,13 +186,23 @@ 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: v => {
-      return {aiTrend, workChain, residentDistribution, spDistribution}
+    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,
+  },
+  watch: {
+    integralOrderType() {
+      this.getIntegralOrder()
+    },
+    areaId() {
+      this.getData()
+    }
   },
   methods: {
     getData() {
-      const {instance: http, currentAreaId: areaId, integralOrderType} = this
+      const {instance: http, currentAreaId: areaId} = this
       return Promise.all([
         http.post("/app/wyDiy/pvr", null, {params: {areaId}}).then(res => {
           if (res?.data) {
@@ -138,11 +214,7 @@ export default {
             this.$set(this.chartData, "aiTrend", res.data.map(e => [e.d, e.c]))
           }
         }),
-        http.post("/app/wyDiy/integralOrder", null, {params: {areaId, type: integralOrderType}}).then(res => {
-          if (res?.data) {
-
-          }
-        }),
+        this.getIntegralOrder(),
         http.post("/app/wyDiy/residentDistribution", null, {params: {areaId}}).then(res => {
           if (res?.data) {
             this.$set(this.chartData, "residentDistribution", res.data)
@@ -160,17 +232,37 @@ export default {
         }),
         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)
           }
         }),
       ])
     },
     getLabel(key) {
       return this.dict.getLabel("wyBasicCount", key) || key
+    },
+    getIntegralOrder() {
+      const {instance: http, currentAreaId: areaId, integralOrderType} = this
+      return http.post("/app/wyDiy/integralOrder", null, {params: {areaId, type: integralOrderType}}).then(res => {
+        if (res?.data) {
+          this.$set(this.chartData, "integralOrder",
+              // res.data
+              [
+                {name: '张三', c: 997},
+                {name: '李四', c: 667},
+                {name: '钱二', c: 412},
+                {name: '王五', c: 232},
+              ])
+        }
+      })
     }
   },
   created() {
-    this.dict.load("wyBasicCount", "wyIntegralOrderType").then(() => {
+    this.dict.load("wyBasicCount", "wyIntegralOrderType", "clapEventStatus").then(() => {
       this.integralOrderType = this.dict.getDict("wyIntegralOrderType")[0].dictValue
       this.getData()
     })
@@ -239,14 +331,19 @@ export default {
       <div class="f"></div>
       <div class="g flex column normal">
         <sub-header title="工单分类"/>
-        <ai-echart/>
-        <dv-scroll-board class="pad-h12" :config="workorderTable"/>
+        <ai-echart class="wotDistribution" :ops="chart.wotDistribution" :data="chartData.wotDistribution">
+          <div class="summary flex column">
+            <span v-text="`总数`"/>
+            <value-unit :value="wotDistributionTotal" size="mini"/>
+          </div>
+        </ai-echart>
+        <dv-scroll-board class="pad-h12 fill" :config="workorderTable"/>
       </div>
       <div class="h flex column normal">
         <sub-header title="全区积分排名(前10)">
           <nav-tabs class="pad-r8" slot="right" :list="tabs" @click="s=>integralOrderType=s.value"/>
         </sub-header>
-        <ai-echart/>
+        <ai-echart :ops="chart.integralOrder" :data="chartData.integralOrder"/>
       </div>
       <div class="i flex column normal">
         <sub-header title="居民统计">
@@ -256,7 +353,12 @@ export default {
       </div>
       <div class="j flex column normal">
         <sub-header title="特殊人群数量统计"/>
-        <ai-echart :ops="chart.spDistribution" :data="chartData.spDistribution"/>
+        <ai-echart :ops="chart.spDistribution" :data="chartData.spDistribution">
+          <div class="summary flex column">
+            <span v-text="`总数`"/>
+            <value-unit :value="spDistributionTotal" unit="人" size="mini"/>
+          </div>
+        </ai-echart>
       </div>
     </template>
   </section>
@@ -389,5 +491,35 @@ export default {
       font-size: #{$s}px;
     }
   }
+
+  :deep(.j), :deep(.g) {
+    .summary {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-weight: 400;
+      color: #fff;
+      gap: 6px;
+    }
+  }
+
+  .wotDistribution {
+    height: 252px;
+    flex: unset;
+    flex-shrink: 0;
+  }
+
+  :deep(.dv-scroll-board) {
+    .header-item {
+      color: #02FEFF;
+    }
+
+    .eventStatus {
+      font-size: 12px;
+      border-radius: 4px;
+      padding: 4px 8px;
+    }
+  }
 }
 </style>