From 1f726c42f098bb7bf55f7a2a7de957edc54b6784 Mon Sep 17 00:00:00 2001
From: wangzenghua <1048523306@qq.com>
Date: Mon, 24 Mar 2025 09:55:44 +0100
Subject: [PATCH] =?UTF-8?q?feat:=E6=94=BF=E5=8A=A1=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/custom-echart-radar/index.vue  |  92 ++++
 .../components/custom-table-tree/index.vue    |  75 ++-
 main/src/components/index.js                  |   2 +
 .../src/views/home/index.vue                  | 453 +++++++++++++++++-
 4 files changed, 605 insertions(+), 17 deletions(-)
 create mode 100644 main/src/components/custom-echart-radar/index.vue

diff --git a/main/src/components/custom-echart-radar/index.vue b/main/src/components/custom-echart-radar/index.vue
new file mode 100644
index 0000000..3efd034
--- /dev/null
+++ b/main/src/components/custom-echart-radar/index.vue
@@ -0,0 +1,92 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script>
+import { ref, reactive, watchEffect } from 'vue';
+import { cloneDeep } from 'lodash';
+import { useEcharts } from '../../hooks/useEcharts';
+
+export default {
+  name: 'CustomEchartRadar',
+  props: {
+    chartData: {
+      type: Array,
+      default: () => [],
+      required: true,
+    },
+    option: {
+      type: Object,
+      default: () => ({}),
+    },
+    type: {
+      type: String,
+      default: 'radar',
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: 'calc(100vh - 78px)',
+    },
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const chartRef = ref(null);
+    const { setOptions, getInstance } = useEcharts(chartRef);
+    const option = reactive({
+      title: {
+        text: '',
+      },
+      legend: {},
+      radar: {},
+      tooltip: {},
+      series: [
+        {
+          type: 'radar',
+          data: [],
+        },
+      ],
+    });
+
+    watchEffect(() => {
+      props.chartData && initCharts();
+    });
+
+    function initCharts() {
+      if (props.option) {
+        Object.assign(option, cloneDeep(props.option));
+      }
+      let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
+      let indicator = Array.from(
+        new Set(
+          props.chartData.map((item) => {
+            let { name, max } = item;
+            return { name, max };
+          })
+        )
+      );
+      let data = [];
+      typeArr.forEach((type) => {
+        const radarStyle = props.option?.radarStyle ?? {};
+        let obj = { name: type, ...radarStyle };
+        let chartArr = props.chartData.filter((item) => type === item.type);
+        obj['value'] = chartArr.map((item) => item.value);
+        data.push(obj);
+      });
+      option.radar.indicator = indicator;
+      option.series[0]['data'] = data;
+      setOptions(option);
+      getInstance()?.off('click', onClick);
+      getInstance()?.on('click', onClick);
+    }
+
+    function onClick(params) {
+      emit('click', params);
+    }
+
+    return { chartRef };
+  },
+};
+</script>
diff --git a/main/src/components/custom-table-tree/index.vue b/main/src/components/custom-table-tree/index.vue
index 8a971cd..b891761 100644
--- a/main/src/components/custom-table-tree/index.vue
+++ b/main/src/components/custom-table-tree/index.vue
@@ -1,25 +1,34 @@
 <template>
   <div :class="`custom-table-tree ${shadow ? 'custom-table-tree__shadow' : ''}`">
     <div v-if="title" class="title">{{ title }}</div>
-    <el-tree
-      :data="data"
-      :node-key="option.nodeKey"
-      :show-checkbox="option.showCheckbox"
-      :default-expanded-keys="option.defaultExpandedKeys"
-      :default-checked-keys="option.defaultCheckedKeys"
-      :props="option.props ?? option.defaultProps"
-      @node-click="handleNodeClick"
-    >
-      <template #default="{ data: rows }">
-        <slot :data="rows"></slot>
-      </template>
-    </el-tree>
+    <div class="panel">
+      <el-input v-if="filter" v-model="state.keyword" clearable placeholder="请输入关键字筛选" class="panel-filter" />
+      <el-tree
+        ref="treeRef"
+        :data="state.list"
+        :node-key="option.nodeKey"
+        :show-checkbox="option.showCheckbox"
+        :default-expanded-keys="option.defaultExpandedKeys"
+        :default-checked-keys="option.defaultCheckedKeys"
+        :default-expand-all="option.defaultExpandAll"
+        :props="option.props ?? option.defaultProps"
+        :filter-node-method="filterNodeMethod"
+        @node-click="handleNodeClick"
+      >
+        <template #default="{ data: rows }">
+          <slot :data="rows"></slot>
+        </template>
+      </el-tree>
+    </div>
   </div>
 </template>
 <script setup name="custom-table-tree">
+import { reactive, ref, watch } from 'vue';
+
 const props = defineProps({
   title: { type: String, default: '' },
   shadow: { type: Boolean, default: true },
+  filter: { type: Boolean, default: false },
   data: { type: Array, default: () => [] },
   option: {
     type: Object,
@@ -34,12 +43,42 @@ const props = defineProps({
         },
         defaultExpandedKeys: [],
         defaultCheckedKeys: [],
+        defaultExpandAll: false,
       };
     },
   },
 });
 const emit = defineEmits(['node-click']);
 
+const treeRef = ref(null);
+const state = reactive({
+  keyword: '',
+  list: [],
+});
+const label = props.option.props?.label ?? 'label';
+
+watch(
+  () => props.data,
+  (val) => {
+    state.list = val;
+  },
+  {
+    immediate: true,
+  }
+);
+
+watch(
+  () => state.keyword,
+  (val) => {
+    treeRef.value.filter(val);
+  }
+);
+
+const filterNodeMethod = (value, data) => {
+  if (!value) return true;
+  return data[label].includes(value);
+};
+
 const handleNodeClick = (data, node) => {
   emit('node-click', data, node);
 };
@@ -48,6 +87,7 @@ const handleNodeClick = (data, node) => {
 .custom-table-tree {
   width: 100%;
   height: 100%;
+  min-height: 400px;
   min-width: 200px;
   @include flex-column();
 
@@ -65,8 +105,15 @@ const handleNodeClick = (data, node) => {
     background: var(--el-color-primary);
   }
 
-  .el-tree {
+  .panel {
     padding: 16px 10px 10px;
+
+    &-filter {
+      margin-bottom: 10px;
+    }
+  }
+
+  .el-tree {
     box-sizing: border-box;
   }
 }
diff --git a/main/src/components/index.js b/main/src/components/index.js
index 828f07b..2657a8f 100644
--- a/main/src/components/index.js
+++ b/main/src/components/index.js
@@ -8,6 +8,7 @@ import CustomRichEditor from './custom-rich-editor';
 import CustomEchartBar from './custom-echart-bar';
 import CustomEchartPie from './custom-echart-pie';
 import CustomEchartLine from './custom-echart-line';
+import CustomEchartRadar from './custom-echart-radar';
 import CustomEchartMixin from './custom-echart-mixin';
 import customEchartPictorialBar from './custom-echart-pictorial-bar';
 import CustomEchartLineLine from './custom-echart-line-line';
@@ -26,6 +27,7 @@ export {
   CustomEchartBar,
   CustomEchartPie,
   CustomEchartLine,
+  CustomEchartRadar,
   CustomEchartMixin,
   customEchartPictorialBar,
   CustomEchartLineLine,
diff --git a/sub-government-affairs-service/src/views/home/index.vue b/sub-government-affairs-service/src/views/home/index.vue
index dcc062d..ba6c91e 100644
--- a/sub-government-affairs-service/src/views/home/index.vue
+++ b/sub-government-affairs-service/src/views/home/index.vue
@@ -1,6 +1,453 @@
 <template>
-  <div style="width: 100%; height: 100%">
-    <div></div>
+  <div v-loading="state.loading" class="statistic">
+    <el-row :gutter="16" style="margin-bottom: 20px">
+      <el-col :span="12">
+        <el-card shadow="hover" class="statistic-data">
+          <b class="statistic-title">综合数据统计</b>
+          <el-row :gutter="16" style="margin-top: 40px">
+            <el-col :span="8" class="text-center">
+              <p>农村人口（万人）</p>
+              <avue-count-up end="27.88" :decimals="2" class="text-primary" />
+            </el-col>
+            <el-col :span="8" class="text-center">
+              <p>耕地面积（万亩）</p>
+              <avue-count-up end="103.88" :decimals="2" class="text-warning" />
+            </el-col>
+            <el-col :span="8" class="text-center">
+              <p>农业总产值（亿元）</p>
+              <avue-count-up end="92.88" :decimals="2" class="text-danger" />
+            </el-col>
+            <el-col :span="24" class="text-center" style="margin-top: 90px">
+              <p>品牌农产品销售情况</p>
+              <avue-count-up end="17.88" :decimals="2" class="text-success" />
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="hover">
+          <custom-echart-bar :chart-data="state.areaData" height="400px" :option="state.areaOption" />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="16" style="margin-bottom: 20px">
+      <el-col :span="12">
+        <el-card shadow="hover">
+          <custom-echart-bar :chart-data="state.breedingData" height="400px" :option="state.breedingOption" />
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="hover">
+          <custom-echart-radar :chart-data="state.inputsData" height="400px" :option="state.inputsOption" />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="16" style="margin-bottom: 20px">
+      <el-col :span="12">
+        <el-card shadow="hover">
+          <custom-echart-pie :chart-data="state.businessData" height="400px" :option="state.businessOption" />
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="hover">
+          <custom-echart-mixin :chart-data="state.codingData" :option="state.codingOption" height="400px" />
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
-<script setup name="home"></script>
+<script setup>
+import { reactive } from 'vue';
+import { useRouter } from 'vue-router';
+import { useApp } from '@/hooks';
+import { sleep } from '@/utils';
+
+const router = useRouter();
+const app = useApp();
+const state = reactive({
+  areaOption: {
+    // color: ['#fed500'],
+    title: {
+      text: '土地分别数据统计',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    xAxis: {
+      type: 'category',
+      name: '区域',
+    },
+    yAxis: {
+      type: 'value',
+      name: '亩',
+    },
+    tooltip: {
+      formatter: function (params) {
+        return `${params.name}：${params.value}亩`;
+      },
+    },
+    barStyle: {
+      barWidth: 50,
+      showBackground: true,
+      itemStyle: {
+        borderRadius: 20,
+      },
+    },
+  },
+  areaData: [
+    { value: 230, name: '耿马镇' },
+    { value: 165, name: '勐永镇' },
+    { value: 217, name: '勐撒镇' },
+    { value: 200, name: '孟定镇' },
+    { value: 305, name: '大兴乡' },
+  ],
+  breedingOption: {
+    color: ['#41b879', '#fed500'],
+    title: {
+      text: '种养殖综合数据统计',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    tooltip: {
+      formatter: (params) => {
+        const find = state.breedingData.find((item) => item.name === params.name);
+        return `${params.name}：${params.value}${find.unit}`;
+      },
+    },
+    barStyle: {
+      barWidth: 50,
+      showBackground: true,
+      itemStyle: {
+        borderRadius: 20,
+      },
+    },
+  },
+  breedingData: [
+    { value: 230, name: '种植面积', unit: '亩' },
+    { value: 165, name: '养殖面积', unit: '亩' },
+    { value: 217, name: '种植基地', unit: '个' },
+    { value: 200, name: '养殖基地', unit: '个' },
+  ],
+  inputsOption: {
+    color: ['#ffd500'],
+    title: {
+      text: '投入品数据统计',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    legend: { show: false },
+    radar: {
+      indicator: [],
+      center: ['50%', '50%'],
+      radius: 140,
+      startAngle: 90,
+      splitNumber: 4,
+      shape: 'circle',
+      axisName: {
+        formatter: '{value}',
+        // formatter: (params) => {
+        //   const find = state.inputsData.find((item) => item.name === params);
+        //   return `${params}：${find.value}${find.unit}`;
+        // },
+        color: '#333',
+      },
+      splitArea: {
+        areaStyle: {
+          color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
+          shadowColor: 'rgba(0, 0, 0, 0.2)',
+          shadowBlur: 10,
+        },
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(211, 253, 250, 0.8)',
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(211, 253, 250, 0.8)',
+        },
+      },
+    },
+    radarStyle: {
+      areaStyle: {},
+    },
+    tooltip: {
+      formatter: (params) => {
+        let str = params.marker + params.name + '<br/>';
+        state.inputsData.forEach((item) => {
+          str += item.name + '：' + item.value + item.unit + '<br/>';
+        });
+        return str;
+      },
+    },
+  },
+  inputsData: [
+    { value: 75, name: '农药使用', type: '投入品', max: 100, unit: '吨' },
+    { value: 38, name: '农机使用', type: '投入品', max: 100, unit: '台' },
+    { value: 74, name: '种源使用', type: '投入品', max: 100, unit: '万吨' },
+    { value: 55, name: '兽药使用', type: '投入品', max: 100, unit: '千克' },
+    { value: 65, name: '肥料使用', type: '投入品', max: 100, unit: '吨' },
+  ],
+  businessOption: {
+    title: {
+      text: '经营主体分类统计',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    legend: {
+      right: '0',
+      top: 'middle',
+      orient: 'vertical',
+      itemWidth: 10,
+      itemHeight: 10,
+    },
+    label: {
+      color: '#333',
+      // formatter: ({ data }) => {
+      //   return data.name + '：' + data.value;
+      // },
+    },
+    tooltip: {
+      formatter: (params) => {
+        return `${params.name}：${params.value}家`;
+      },
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: [80, 140],
+        itemStyle: {
+          borderRadius: 10,
+        },
+      },
+    ],
+  },
+  businessData: [
+    { value: 28, name: '个体户' },
+    { value: 358, name: '村集体' },
+    { value: 217, name: '合作社' },
+    { value: 128, name: '农资企业' },
+    { value: 22, name: '种源企业' },
+    { value: 41, name: '生产加工企业' },
+  ],
+  codingOption: {
+    color: ['#41b879', '#ffd500'],
+    title: {
+      text: '溯源赋码扫码统计',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    legend: {},
+    yAxis: {
+      type: 'value',
+      name: '次',
+    },
+    barStyle: {
+      barWidth: 50,
+    },
+    // tooltip: {
+    //   formatter: (params) => {
+    //     const arr = state.codingData.filter((item) => item.name === params.name);
+    //     return `${params.name}<br/>
+    //           ${arr[0].type}：${arr[0].value}次<br/>
+    //           ${arr[1].type}：${arr[1].value}次`;
+    //   },
+    // },
+  },
+  codingData: [
+    {
+      name: '一月',
+      value: 40,
+      type: '赋码',
+      seriesType: 'bar',
+    },
+    {
+      name: '一月',
+      value: 60,
+      type: '扫码',
+      seriesType: 'line',
+    },
+    {
+      name: '二月',
+      value: 100,
+      type: '赋码',
+      seriesType: 'bar',
+    },
+    {
+      name: '二月',
+      value: 120,
+      type: '扫码',
+      seriesType: 'line',
+    },
+    {
+      name: '三月',
+      value: 80,
+      type: '赋码',
+      seriesType: 'bar',
+    },
+    {
+      name: '三月',
+      value: 124,
+      type: '扫码',
+      seriesType: 'line',
+    },
+    {
+      name: '四月',
+      value: 200,
+      type: '赋码',
+      seriesType: 'bar',
+    },
+    {
+      name: '四月',
+      value: 220,
+      type: '扫码',
+      seriesType: 'line',
+    },
+  ],
+  loading: false,
+});
+
+// 加载
+const loadData = async () => {
+  state.loading = true;
+  await sleep(500);
+  state.loading = false;
+  // GetEntityList(state.query)
+  //   .then((res) => {
+  //     if (res.code === 200) {
+  //       const { current, size, total, records } = res.data;
+  //       state.data = records;
+  //       state.pageData = {
+  //         currentPage: current || 1,
+  //         pageSize: size || 10,
+  //         total: total,
+  //       };
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     app.$message.error(err.msg);
+  //     state.data = [];
+  //   })
+  //   .finally(() => {
+  //     state.loading = false;
+  //   });
+};
+
+loadData();
+</script>
+<style lang="scss" scoped>
+.statistic {
+  .el-card {
+    border: 0 !important;
+    border-radius: 16px !important;
+  }
+
+  &-title {
+    font-size: 18px;
+    font-weight: bold;
+    font-family: '黑体';
+    color: #333;
+    flex: 1;
+  }
+
+  &-data {
+    height: 440px;
+    font-size: 18px;
+
+    p {
+      margin-bottom: 30px;
+    }
+
+    span {
+      font-size: 30px;
+    }
+  }
+
+  &-display {
+    @include flex-column();
+    background-repeat: no-repeat;
+    background-position: right bottom;
+
+    dt {
+      @include flex-row();
+      align-items: center;
+      margin-bottom: 30px;
+
+      i {
+        display: inline-block;
+        width: 72px;
+        height: 72px;
+        margin-right: 20px;
+      }
+      span {
+        font-size: 18px;
+        font-weight: 400;
+      }
+    }
+
+    dd {
+      span {
+        font-size: 22px;
+        font-weight: 500;
+        color: #000000;
+      }
+    }
+
+    &.d1 {
+      dt span {
+        color: #ff4975;
+      }
+    }
+    &.d2 {
+      dt span {
+        color: #41b879;
+      }
+    }
+    &.d3 {
+      dt span {
+        color: #3685fe;
+      }
+    }
+    &.d4 {
+      dt span {
+        color: #6b66ff;
+      }
+    }
+  }
+
+  &-table {
+    @include flex-row();
+    align-items: center;
+  }
+
+  &-rank {
+    li {
+      @include flex-row();
+      align-items: center;
+      margin-top: 16px;
+
+      i {
+        width: 72px;
+        height: 72px;
+        margin-right: 20px;
+      }
+      span {
+        @include flex-column();
+        flex: 1;
+        font-size: 14px;
+      }
+      em {
+        font-style: normal;
+        color: #999;
+      }
+    }
+  }
+}
+</style>