完成两个柱状图

project/biaopin/dv/weiyang/AppDvWeiyang.vue

@@ -8,6 +8,50 @@ import ChargingPercent from "./comps/chargingPercent.vue";
 import AiEchart from "dui/packages/tools/AiEchart.vue";
 import NavTabs from "./comps/navTabs.vue";
 
+const handlePercent = v => parseFloat(isNaN(v) ? 0 : v.toFixed(2))
+const calcComparePercent = (v = 1, target = 1) => {
+  const value = (v - target) / target * 100
+  return handlePercent(value)
+}
+const hide = {show: false}
+const aiTrend = {
+  series: {
+    type: "bar", barWidth: 12, itemStyle: {
+      color: {
+        type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [
+          {offset: 0, color: "#00EFFF"},
+          {offset: 1, color: "#00527D"},
+        ]
+      }
+    }, encode: {x: 'd', y: 'c'}
+  },
+  yAxis: {type: "value", axisLabel: hide, axisLine: hide, splitLine: hide},
+  xAxis: {type: "category", axisLabel: hide, axisLine: {itemStyle: {color: 'rgba(179,223,255,0.4)'}}},
+  legend: {show: false},
+  grid: {left: 0, right: 0, bottom: 1, top: 0, containLabel: true},
+}
+const workChain = {
+  series: Array(5).fill({type: "bar"}),
+  yAxis: {type: "category"},
+  xAxis: {show: false, type: "value"}
+}
+const residentDistribution = {
+  series: {
+    type: "bar", barWidth: 12, itemStyle: {
+      color: {
+        type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [
+          {offset: 0, color: "#00EFFF"},
+          {offset: 1, color: "#00527D"},
+        ]
+      }
+    },
+    encode: {x: 'name', y: 'c'}
+  },
+  yAxis: {type: "value", axisLine: {show: false}, splitLine: {lineStyle: {type: 'dashed', color: 'rgba(61,82,102,0.65)'}}},
+  xAxis: {type: "category", axisTick: {show: false}, axisLabel: {rotate: 45}},
+  grid: {left: 12, right: 12, top: 20, bottom: 0, containLabel: true},
+  legend: {show: false},
+}
 export default {
   name: "AppDvWeiyang",
   components: {NavTabs, AiEchart, ChargingPercent, ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
@@ -19,7 +63,10 @@ export default {
   },
   data() {
     return {
-      areaId: ""
+      areaId: "",
+      integralOrderType: "",
+      sta: {},
+      chartData: {}
     }
   },
   computed: {
@@ -27,16 +74,16 @@ export default {
     currentAreaId: v => v.areaId || v.user.info.areaId,
     isLastAreaLevel: v => !/0{3}$/.test(v.currentAreaId),
     areaSta: v => [
-      {label: "社区数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d80346ec1ea.png", value: 0, unit: "个"},
+      {label: "社区数", icon: "66d80346ec1ea", prop: "communityCount", unit: "个"},
-      {label: "小区数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d7fd4c0445d.png", value: 0, unit: "个"},
+      {label: "小区数", icon: "66d7fd4c0445d", prop: "residentialQuartersCount", unit: "个"},
-      {label: "村数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d7fd4d28f1b.png", value: 0, 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`})),
     workorderSta: v => [
-      {label: "已处理", value: 0, unit: "个"},
+      {label: "已处理", prop: 'workOrderCountFinishNowMonth', unit: "个"},
-      {label: "办理中", value: 0, unit: "个"},
+      {label: "办理中", prop: 'workOrderCountProcessingNowMonth', unit: "个"},
-      {label: "待受理", value: 0, unit: "个"},
+      {label: "待受理", prop: 'workOrderCountPendingNowMonth', unit: "个"},
-      {label: "延期", value: 0, unit: "个", isRed: !0},
+      {label: "延期", prop: 'workOrderCountExtensionNowMonth', unit: "个", isRed: !0},
-    ],
+    ].map(e => ({...e, label: v.getLabel(e.prop), value: v.sta[e.prop] || 0})),
     workorderTable: v => ({
       header: ['时间', '状态', '事件描述'],
       headerBGC: '#21b4fd1a',
@@ -44,29 +91,70 @@ export default {
       evenRowBGC: "transparent",
       data: []
     }),
-    tabs: v => [
+    tabs: v => v.$dict.getDict("wyIntegralOrderType").map(e => {
-      {label: "楼栋长", value: ""},
+      return {
-      {label: "治安协理员", value: ""},
+        label: e.dictName,
-      {label: "业委会", value: ""},
+        value: e.dictValue
-      {label: "网格员", value: ""},
+      }
-      {label: "第三方机构", value: ""},
+    }),
-    ]
+    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}
+    },
   },
   methods: {
     getData() {
+      const {instance: http, currentAreaId: areaId, integralOrderType} = this
+      return Promise.all([
+        http.post("/app/wyDiy/pvr", null, {params: {areaId}}).then(res => {
+          if (res?.data) {
+            this.sta = res.data
+          }
+        }),
+        http.post("/app/wyDiy/aiTrend", null, {params: {areaId}}).then(res => {
+          if (res?.data) {
+            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) {
 
+          }
+        }),
+        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) {
+
+          }
+        }),
+        http.post("/app/wyDiy/workChain", null, {params: {areaId}}).then(res => {
+          if (res?.data) {
+
+          }
+        }),
+        http.post("/app/wyDiy/wotDistribution", null, {params: {areaId}}).then(res => {
+          if (res?.data) {
+
+          }
+        }),
+      ])
     },
     getLabel(key) {
       return this.dict.getLabel("wyBasicCount", key) || key
     }
   },
   created() {
-    this.dict.load("wyBasicCount")
+    this.dict.load("wyBasicCount", "wyIntegralOrderType")
     this.getData()
   }
 }
 </script>
-
 <template>
   <section class="AppDvWeiyang" :class="{isLastAreaLevel}">
     <template v-if="isLastAreaLevel">
@@ -89,33 +177,33 @@ export default {
       <div class="j"></div>
     </template>
     <template v-else>
-      <icon-sta-panel class="a pad-24" :label="getLabel('党组织数')" :value="0" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd06f269b.png"/>
+      <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"/>
-      <icon-sta-panel class="a1 pad-24" :label="getLabel('党员人数')" :value="0" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd0560bea.png"/>
+      <icon-sta-panel class="a1 pad-24" :label="getLabel('partyCount')" :value="sta.partyCount" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd0560bea.png"/>
       <div class="b pad-l16 pad-r12 pad-v6">
         <icon-small-panel v-for="(e,i) in areaSta" :key="i" v-bind="e"/>
       </div>
       <div class="b1 pad-v10 pad-h20">
-        <icon-sta-panel :label="getLabel('居民人数')" :value="0" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd083a9b0.png"/>
+        <icon-sta-panel :label="getLabel('residentCount')" :value="sta.residentCount" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd083a9b0.png"/>
         <div class="flex staPercent">
-          <div class="flex fill">月环比<p v-text="0"/></div>
+          <div class="flex fill">月环比<p :class="{minus:monthOnMonth<0}" v-text="monthOnMonth"/></div>
-          <div class="flex fill">年同比<p class="minus" v-text="0"/></div>
+          <div class="flex fill">年同比<p :class="{minus:yearOnYear<0}" v-text="yearOnYear"/></div>
         </div>
       </div>
       <div class="b2 pad-v8 pad-h12 flex column normal font-12">
-        <div v-text="`AI咨询服务累计数`"/>
+        <div v-text="getLabel('aiCount')"/>
-        <value-unit :value="0" unit="次" color="#fff"/>
+        <value-unit :value="sta.aiCount" unit="次" color="#fff"/>
-        <ai-echart/>
+        <ai-echart :ops="chart.aiTrend" :data="chartData.aiTrend"/>
         <div class="flex">
-          日服务处理量
+          {{ getLabel('aiCountLastDay') }}
-          <value-unit class="mar-l8" :value="0" unit="次" size="mini"/>
+          <value-unit class="mar-l8" :value="sta.aiCountLastDay" unit="次" size="mini"/>
         </div>
       </div>
       <div class="c flex column center">
         <div class="mar-b40" v-text="'工单处置率'"/>
-        <charging-percent label="已完成工单" :value="80"/>
+        <charging-percent label="已完成工单" :value="workorderFinishedPercent"/>
       </div>
       <div class="c1 grid">
-        <icon-small-panel class="item row pad-h16" :label="getLabel('工单总数')" :value="0" unit="个"/>
+        <icon-small-panel class="item row pad-h16" :label="getLabel('workOrderCountNowMonth')" :value="sta.workOrderCountNowMonth" unit="个"/>
         <div class="item pad-v12 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"/>
@@ -134,7 +222,7 @@ export default {
       </div>
       <div class="h flex column normal">
         <sub-header title="全区积分排名(前10)">
-          <nav-tabs class="pad-r8" slot="right" :list="tabs"/>
+          <nav-tabs class="pad-r8" slot="right" :list="tabs" @click="s=>integralOrderType=s.value"/>
         </sub-header>
         <ai-echart/>
       </div>
@@ -142,7 +230,7 @@ export default {
         <sub-header title="居民统计">
           <div class="info pad-r8" slot="right" v-text="`按街道进行汇总统计`"/>
         </sub-header>
-        <ai-echart/>
+        <ai-echart :ops="chart.residentDistribution" :data="chartData.residentDistribution"/>
       </div>
       <div class="j flex column normal">
         <sub-header title="特殊人群数量统计"/>
@@ -234,23 +322,24 @@ export default {
     margin-top: 9px;
     line-height: 40px;
     font-size: 12px;
+    white-space: nowrap;
 
     p {
-
+      font-size: 14px;
-      font-size: 16px;
       color: #26FF9A;
       display: flex;
       align-items: center;
       font-family: DINAlternate;
 
       &:before {
-        margin-left: 8px;
+        margin-left: 4px;
         margin-right: 2px;
         font-size: 10px;
         content: "▲";
       }
 
       &:after {
+        font-size: 12px;
         content: "%";
       }
 

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

@@ -14,6 +14,11 @@ export default {
       this.active = i
       this.$emit("click", e)
     }
+  },
+  mounted() {
+    if (this.list.length > 0) {
+      this.$emit("click", this.list[0])
+    }
   }
 }
 </script>

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

@@ -20,7 +20,6 @@ export default {
 
 <style lang="scss" scoped>
 .subHeader {
-  height: 100%;
   background: #7583900f;
 
   .subHeader-title {

ui/packages/tools/AiEchart.vue

@@ -16,7 +16,7 @@ export default {
     series: Object,
     theme: {
       default: '0'
-    }
+    },
   },
   components: {
     renderComponent: {
@@ -32,7 +32,6 @@ export default {
       }
     }
   },
-
   data() {
     return {
       chart: null,
@@ -44,10 +43,8 @@ export default {
       if (this.theme === '0') {
         return ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc']
       }
-
+      return this.color || ['#D4380D', '#CF1322', '#D55800', '#FA8C16', '#FFC53D', '#FFA940', '#FFC53D', '#780000']
-      return ['#D4380D', '#CF1322', '#D55800', '#FA8C16', '#FFC53D', '#FFA940', '#FFC53D', '#780000']
     },
-
     chartOptions() {
       let {type, data, ops: options = {}} = this,
           style = this.series ? this.series : this.ops.daemon ? this.ops.daemon : {},
@@ -81,8 +78,6 @@ export default {
           },
           axisLabel: {color: '#fff'}
         },
-        legend, series, ...options,
-        color: colors,
         grid: {
           left: '0%',
           right: '0%',
@@ -90,6 +85,8 @@ export default {
           top: '40px',
           containLabel: true
         },
+        legend, series, ...options,
+        color: colors,
       }
       if (JSON.stringify(this.ops) != JSON.stringify(ops)) this.$emit("update:ops", ops)
       return ops
@@ -130,20 +127,22 @@ export default {
           }
         }, true)
       }
+      this.resize()
     },
     initChart() {
       this.chart = echarts.init(this.$refs.AiEchart)
       this.chart.setOption(this.chartOptions || {})
     },
-    watchResize() {
+    resize() {
-      window.onresize = () => {
+      const {clientHeight, clientWidth} = this.$refs.AiEchart || {},
-        const {clientHeight, clientWidth} = this.$refs.AiEchart || {},
+          h = this.chart?.getHeight(), w = this.chart?.getWidth()
-            h = this.chart?.getHeight(), w = this.chart?.getWidth()
+      if (h != clientHeight || w != clientWidth) {
-        if (h != clientHeight || w != clientWidth) {
+        this.chart?.resize()
-          this.chart?.resize()
-        }
       }
     },
+    watchResize() {
+      window.onresize = this.resize
+    },
     refresh() {
       this.chart.setOption(this.chartOptions || {})
     }