daimp-front/sub-government-affairs-service/src/views/home/index.vue

<template>
  <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" />
              <em>万人</em>
            </el-col>
            <el-col :span="8" class="text-center">
              <p>耕地面积</p>
              <avue-count-up end="103.88" :decimals="2" class="text-warning" />
              <em>万亩</em>
            </el-col>
            <el-col :span="8" class="text-center">
              <p>农业总产值</p>
              <avue-count-up end="92.88" :decimals="2" class="text-danger" />
              <em>亿元</em>
            </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" />
              <em>亿元</em>
            </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>
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: 19px;
    font-weight: bold;
    font-family: '黑体';
    color: #333;
    flex: 1;
  }

  &-data {
    height: 440px;
    font-size: 18px;

    p {
      margin-bottom: 30px;
    }

    span {
      font-size: 30px;
      font-weight: bolder;
    }

    em {
      font-style: normal;
      font-size: 14px;
      margin-left: 5px;
    }
  }

  &-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>