完成两个柱状图

2024-09-09 17:34:02 +08:00
parent f888c81508
commit c842794d0d
4 changed files with 143 additions and 51 deletions
--- a/project/biaopin/dv/weiyang/AppDvWeiyang.vue
+++ b/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: "https://cdn.sinoecare.com/i/2024/09/04/66d7fd4c0445d.png", value: 0, unit: "个"},
-      {label: "村数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d7fd4d28f1b.png", value: 0, unit: "个"},
-    ],
+      {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`})),
    workorderSta: v => [
-      {label: "已处理", value: 0, unit: "个"},
-      {label: "办理中", value: 0, unit: "个"},
-      {label: "待受理", value: 0, unit: "个"},
-      {label: "延期", value: 0, unit: "个", isRed: !0},
-    ],
+      {label: "已处理", prop: 'workOrderCountFinishNowMonth', unit: "个"},
+      {label: "办理中", prop: 'workOrderCountProcessingNowMonth', unit: "个"},
+      {label: "待受理", prop: 'workOrderCountPendingNowMonth', unit: "个"},
+      {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 => [
-      {label: "楼栋长", value: ""},
-      {label: "治安协理员", value: ""},
-      {label: "业委会", value: ""},
-      {label: "网格员", value: ""},
-      {label: "第三方机构", value: ""},
-    ]
+    tabs: v => v.$dict.getDict("wyIntegralOrderType").map(e => {
+      return {
+        label: e.dictName,
+        value: e.dictValue
+      }
+    }),
+    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="a1 pad-24" :label="getLabel('党员人数')" :value="0" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd0560bea.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('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" v-text="0"/></div>
+          <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>
      <div class="b2 pad-v8 pad-h12 flex column normal font-12">
-        <div v-text="`AI咨询服务累计数`"/>
-        <value-unit :value="0" unit="次" color="#fff"/>
-        <ai-echart/>
+        <div v-text="getLabel('aiCount')"/>
+        <value-unit :value="sta.aiCount" unit="次" color="#fff"/>
+        <ai-echart :ops="chart.aiTrend" :data="chartData.aiTrend"/>
        <div class="flex">
-          日服务处理量
-          <value-unit class="mar-l8" :value="0" unit="次" size="mini"/>
+          {{ getLabel('aiCountLastDay') }}
+          <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: 16px;
+      font-size: 14px;
      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: "%";
      }

--- a/project/biaopin/dv/weiyang/comps/navTabs.vue
+++ b/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>
--- a/project/biaopin/dv/weiyang/comps/subHeader.vue
+++ b/project/biaopin/dv/weiyang/comps/subHeader.vue
@@ -20,7 +20,6 @@ export default {

 <style lang="scss" scoped>
 .subHeader {
-  height: 100%;
  background: #7583900f;

  .subHeader-title {
--- a/ui/packages/tools/AiEchart.vue
+++ b/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 ['#D4380D', '#CF1322', '#D55800', '#FA8C16', '#FFC53D', '#FFA940', '#FFC53D', '#780000']
+      return this.color || ['#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,19 +127,21 @@ export default {
          }
        }, true)
      }
+      this.resize()
    },
    initChart() {
      this.chart = echarts.init(this.$refs.AiEchart)
      this.chart.setOption(this.chartOptions || {})
    },
-    watchResize() {
-      window.onresize = () => {
+    resize() {
      const {clientHeight, clientWidth} = this.$refs.AiEchart || {},
          h = this.chart?.getHeight(), w = this.chart?.getWidth()
      if (h != clientHeight || w != clientWidth) {
        this.chart?.resize()
      }
-      }
+    },
+    watchResize() {
+      window.onresize = this.resize
    },
    refresh() {
      this.chart.setOption(this.chartOptions || {})