<template>
  <view class="statistics">
    <!-- 行政区划下拉选择卡片 -->
    <view class="cc-header">
      <view class="cc-query-dropdowns">
        <!-- <picker mode="selector" :range="districts" v-model="selectedDistrict">
          <view class="dropdown">
            行政区划
            <image src="/static/images/icon/down.png" />
          </view>
        </picker> -->
        <region-picker @trigge-method="handleRegionParams" />
      </view>
    </view>

    <view class="chart-list">
    <!-- <view class="chart-list">
      <view class="cc-card card">
        <view class="card-header">项目投资统计</view>
        <echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
      </view> -->

      <!-- 项目投资统计柱形图卡片 -->
      <view class="cc-card card">
        <view class="card-header">项目投资统计</view>
        <echarts ref="investmentChart" :option="investmentChartOption" canvasId="investmentChart"></echarts>
        <!-- <canvas id="investmentChart"></canvas> -->
      </view>
  
      <!-- 项目分类统计柱形图卡片 -->
      <view class="cc-card card">
        <view class="card-header">项目分类统计</view>
        <echarts ref="categoryChart" :option="categoryChartOption" canvasId="categoryChart"></echarts>
        <!-- <canvas id="categoryChart"></canvas> -->
      </view>
  
      <!-- 项目类型统计饼图卡片 -->
      <view class="cc-card card">
        <view class="card-header">项目类型统计</view>
        <echarts ref="typeChart" :option="typeChartOption" canvasId="typeChart"></echarts>
        <!-- <canvas id="typeChart"></canvas> -->
      </view>
  
      <!-- 项目状态统计饼图卡片 -->
      <view class="cc-card card">
        <view class="card-header">项目状态统计</view>
        <echarts ref="statusChart" :option="statusChartOption" canvasId="statusChart"></echarts>
        <!-- <canvas id="statusChart"></canvas> -->
      </view>
  
      <!-- 项目行政区划分布统计饼图卡片 -->
      <view class="cc-card card">
        <view class="card-header">项目行政区划分布统计</view>
        <echarts ref="districtChart" :option="districtChartOption" canvasId="districtChart"></echarts>
        <!-- <canvas id="districtChart"></canvas> -->
      </view>
  
      <!-- 项目预警统计饼图卡片 -->
      <view class="cc-card card">
        <view class="card-header">项目预警统计</view>
        <echarts ref="warningChart" :option="warningChartOption" canvasId="warningChart"></echarts>
        <!-- <canvas id="warningChart"></canvas> -->
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="cc-operation-buttons">
      <view class="buttons-group">
        <view class="primary-button button" @click="handleGenerateProject()">生成报告</view>
      </view>
    </view>
  </view>
</template>

<script>
// import * as echarts from 'echarts'; // 引入 echarts 库
// import * as echarts from '../../components/echarts-uniapp/echarts.min.js';
import RegionPicker from '@/components/region-picker/region-picker.vue'
import { getSourceFundsNumApi, getCategoryumApi, getProjectTypeApi, getCityNumApi, getWarningNumApi } from '@/api/system/projectStatistics'
import { addressList } from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/cityData.js'
export default {
  components: {
    RegionPicker,
  },
  data() {
    return {
      // 行政区划数据
      districts: ['请选择', '北京市', '上海市', '广州市', '深圳市'],
      selectedDistrict: 0,

      // 图表配置
      investmentChartOption: null,
      categoryChartOption: null,
      typeChartOption: null,
      statusChartOption: null,
      districtChartOption: null,
      warningChartOption: null,
      option: {},
      // 项目投资统计
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        params: {orderBy: "create_time", sortBy: "desc"},
        data: {
          projectName: ''
        }
      },
      projectInvestInfo: [],
      sourceFound: {},
      adcd: [],
      // 省市区数据
      addressTreeList: addressList,
      addressList: [],
      queryParams: {
        "pageNum": 1,
        "pageSize": 10,
        "ids": null,
        "data": {
            "projectName": null,
            "projectType": null,
            "total": null,
            "projectPhase": null
        }
      },
      categoryData: {},
      projectType: [],
      acc: {},
      zd: {},
      ms: {},
      zd_projectTypeOptions: [],
      ms_projectTypeOptions: [],
      zdTotal: 0,
      msTotal: 0,
      cityData: {},
      newAddressList:[],
      warningData: {}
    }
  },
  // 页面加载完成后，初始化所有图表
  created() {
    this.handleAddressTreeData()
    this.getDicts("major_project").then((response) => {
      this.zd_projectTypeOptions = response.data
    })
    this.getDicts("general_project").then((response) => {
      this.ms_projectTypeOptions = response.data
    })
  },
  mounted() {
    this.getProjectInvestData()
    this.getProjectCategoryData()
    this.getProjectTypeData()
    this.getProjectCityData()
    this.getProjectWarningData()
  },
  methods: {
    // 处理区划请求
    handleRegionParams(adcd) {
      this.queryParams.pageNum = 1
      this.queryParams.data.adcd = adcd
      this.getProjectList('again')
    },

    // 获取项目投资统计数据
    getProjectInvestData() {
      getSourceFundsNumApi({ year: '2024' }).then(res => {
        this.sourceFound = res.data
        this.adcd = Object.keys(this.sourceFound)
        this.barInit()
      })
    },

    // 获取项目分类统计数据
    getProjectCategoryData() {
      getCategoryumApi(this.queryParams).then(res => {
        this.categoryData = res.data
        this.initCategoryChart()
      })
    },

    // 获取项目类型统计数据
    getProjectTypeData() {
      getProjectTypeApi(this.queryParams).then(res => {
        // this.projectTypeData = res.data
        this.zd = res.data.zd;
        this.ms = res.data.ms;
        this.acc = res.data.acc;
        Object.entries(this.zd).forEach(([key, value]) => {
          this.zdTotal = this.zdTotal + Number(value);
          let name = this.zdProjectTypeFormat(key);
          let obj = {
            name: name,
            value: Number(value),
          };
          this.projectType.push(obj);
        });
        Object.entries(this.ms).forEach(([key, value]) => {
          this.msTotal = this.msTotal + Number(value);
          let name = this.msProjectTypeFormat(key);
          let obj = {
            name: name,
            value: Number(value),
          };
          this.projectType.push(obj);
        });
        this.total = Number(this.acc["acc"]) + Number(this.acc["noAcc"]);
        this.initTypeChart(this.projectType)
        this.initStatusChart()
      })
    },

    msProjectTypeFormat(key) {
      return this.selectDictLabel(this.ms_projectTypeOptions, key);
    },
    zdProjectTypeFormat(key) {
      return this.selectDictLabel(this.zd_projectTypeOptions, key);
    },

    // 获取项目城市统计数据
    getProjectCityData() {
      getCityNumApi().then(res => {
        this.cityData = res.data
        this.initDistrictChart()
      })
    },

    // 获取项目投资预警数据
    getProjectWarningData() {
      getWarningNumApi().then(res => {
        this.warningData = res.data
        this.initWarningChart()
      })
    },


    // 将省市区的树状数据分解成列表,并在后面补零
    handleAddressTreeData() {
      let result = [];
      function traverse(node) {
        result.push({ code: node.code, name: node.name, dictLabel: node.name, dictValue: node.code}); // 将当前节点添加到结果中
        if (node.children) {
          node.children.forEach(child => traverse(child)); // 递归遍历子节点
        }
      }
      this.addressTreeList.forEach(node => traverse(node)); // 遍历树的每个根节点
      this.addressList = result
      this.newAddressList = JSON.parse(JSON.stringify(this.addressList))
      this.newAddressList.forEach(item => {
        if (item.code.length===2) {
          item.code = item.code + '0000'
        }
        if (item.code.length===4) {
          item.code = item.code + '00'
        }
      })
    },

    barInit() {
      let keys =  Object.keys(this.sourceFound)
      // for (let i=0; i<keys.length; i++) {
      //   if (keys[i].length===2) {
      //     keys[i] += "0000"
      //   }
      //   if (keys[i].length===4) {
      //     keys[i] += "00"
      //   }
      // }
      // 创建一个城市代码到城市对象的映射
      const cityMap = new Map(this.addressList.map(city => [city.code, city]));
      let filteredData = keys
        .filter(key => cityMap.has(key)) // 根据城市数据筛选
        .map(key => ({ key: Number(key), ...this.sourceFound[key], ...cityMap.get(key) })) // 转换为数组格式
      // 根据 actual 从大到小排序
      filteredData.sort((a, b) => b.actual - a.actual)
      let xData = filteredData.map(item => item.name)
      let yData1 = filteredData.map(item => item.progressPlan)
      let yData2 = filteredData.map(item => item.actual)
      console.log(filteredData)

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow', // 使用阴影指示器
          },
        },
        legend: {
          data: ['年度计划', '实际完成'],
          bottom: '0%', // 将legend显示在下方
          itemWidth: 12, // 设置图例正方形的宽度
          itemHeight: 12, // 设置图例正方形的高度
          itemStyle: {
            borderRadius: 0, // 确保图例为正方形
          },
        },
        grid: {
          left: '2%',
          right: '2%',
          top: '13%',
          bottom: '15%',
          containLabel: true, // 保证标签显示不超出范围
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            interval: 0, // 确保X轴标签不重叠
            rotate: 45, // 旋转X轴标签以适应长文本
          },
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: '#000',
            },
          },
          boundaryGap: true, // 使得柱状图的起点和终点显示
        },
        yAxis: {
          type: 'value',
          name: '金额/万元',
          nameLocation: 'end', // 将标题放在轴的起始位置
          nameGap: 20, // 设置标题与轴的间距
          axisLabel: {
            formatter: '{value}',
            color: '#8C8C8C', // Y轴字体颜色
            fontSize: 12, // Y轴字体大小
          },
          axisLine: {
            lineStyle: {
              color: '#8C8C8C',
            },
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0', // 灰色的分割线
            },
          },
          splitNumber: 5, // 控制Y轴的分割数
          // max: yAxisMax,
          // interval: yAxisMax / 10
        },
        series: [
          {
            name: '年度计划',
            type: 'bar',
            data: yData1,
            barWidth: '35%', // 设置柱状图的宽度
            itemStyle: {
              color: '#00b39d', // 年度计划的柱状图颜色
            },
          },
          {
            name: '实际完成',
            type: 'bar',
            data: yData2,
            barWidth: '35%',
            itemStyle: {
              color: '#00a7ee', // 实际完成的柱状图颜色
            },
          },
        ],
      }
      this.investmentChartOption = option;
    },

    // 初始化项目投资统计柱形图
    initInvestmentChart() {
      // const chart = echarts.init(document.getElementById('investmentChart'));
      
    },

    // 初始化项目分类柱形图
    initCategoryChart() {
      let xData = Object.keys(this.categoryData)
      let yArr = Object.values(this.categoryData)
      let yData1 = yArr.map(item => item.zd)
      let yData2 = yArr.map(item => item.ms)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow', // 使用阴影指示器
          },
        },
        legend: {
          data: ['重大工程', '面上工程'],
          bottom: '0%', // 将legend显示在下方
          itemWidth: 12, // 设置图例正方形的宽度
          itemHeight: 12, // 设置图例正方形的高度
          itemStyle: {
            borderRadius: 0, // 确保图例为正方形
          },
        },
        grid: {
          left: '2%',
          right: '2%',
          top: '13%',
          bottom: '15%',
          containLabel: true, // 保证标签显示不超出范围
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            interval: 0, // 确保X轴标签不重叠
            rotate: 45, // 旋转X轴标签以适应长文本
          },
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: '#000',
            },
          },
          boundaryGap: true, // 使得柱状图的起点和终点显示
        },
        yAxis: {
          type: 'value',
          name: '个',
          nameLocation: 'end', // 将标题放在轴的起始位置
          nameGap: 20, // 设置标题与轴的间距
          axisLabel: {
            formatter: '{value}',
            color: '#8C8C8C', // Y轴字体颜色
            fontSize: 12, // Y轴字体大小
          },
          axisLine: {
            lineStyle: {
              color: '#8C8C8C'
            },
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0', // 灰色的分割线
            },
          },
          splitNumber: 5, // 控制Y轴的分割数
        },
        series: [
          {
            name: '重大工程',
            type: 'bar',
            data: yData1,
            barWidth: '35%', // 设置柱状图的宽度
            itemStyle: {
              color: '#00b39d', // 年度计划的柱状图颜色
            },
          },
          {
            name: '面上工程',
            type: 'bar',
            data: yData2,
            barWidth: '35%',
            itemStyle: {
              color: '#00a7ee', // 实际完成的柱状图颜色
            },
          },
        ],
      };
      this.categoryChartOption = option;
      // chart.setOption(option);
    },

    // 初始化项目类型统计饼状图
    initTypeChart(data) {
      let chartData = data.map((item) => ({
        ...item,
        // name: this.truncateName(item.name),
      }));
      let legendList = chartData.map(item => item.name)
      // const data = [
      //   {
      //     value: 2088,
      //     name: '饮水工程',
      //     itemStyle: {
      //       color: '#00b39d',
      //     },
      //   },
      //   {
      //     value: 1000,
      //     name: '枢纽工程',
      //     itemStyle: {
      //       color: '#0073ee',
      //     },
      //   },
      //   {
      //     value: 1000,
      //     name: '新建水库',
      //     itemStyle: {
      //       color: '#00a7ee',
      //     },
      //   },
      //   {
      //     value: 800,
      //     name: '病险',
      //     itemStyle: {
      //       color: '#00b368',
      //     },
      //   },
      //   {
      //     value: 1000,
      //     name: '灌区',
      //     itemStyle: {
      //       color: '#ecb800',
      //     },
      //   },
      //   {
      //     value: 350,
      //     name: '水保',
      //     itemStyle: {
      //       color: '#ec7000',
      //     },
      //   },
      //   {
      //     value: 350,
      //     name: '其他',
      //     itemStyle: {
      //       color: '#e04040',
      //     },
      //   },
      // ]
      // 计算总量
      const total = data.reduce((sum, item) => sum + item.value, 0)
      const option = {
        tooltip: {
          trigger: 'item',
          show: true, // 去掉提示线
        },
        color: ['#00b39d', '#0073ee', '#00a7ee', '#00b368', '#ecb800', '#ec7000', '#e04040'],
        legend: {
          orient: 'vertical',
          right: '5%', // 图例显示在右边
          top: '15%',  // 调整图例的垂直位置
          // data: ['饮水工程', '枢纽工程', '新建水库', '病险', '灌区', '水保', '其他'],
          data: legendList,
          itemWidth: 12, // 图例宽度
          itemHeight: 12, // 图例高度
          itemStyle: {
            borderRadius: 0, // 确保图例为正方形
          },
          formatter: function(name) {
            const item = data.find(d => d.name === name);
            return `${name} ${item.value}`; // 自定义图例显示内容
          }
        },
        series: [
          {
            name: '项目类别',
            type: 'pie',
            center: ['35%', '50%'], // 设置饼图中心位置
            radius: ['70%', '50%'], // 设置饼图的内外半径
            // avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 1,
            },
            label: {
              show: false,
              position: 'outside', // 标签在外部显示
              formatter: '{b}\n{c} ({d}%)', // 显示标签内容：名称、数值、百分比
            },
            labelLine: {
              show: true,
            },
            data: chartData,
            // 设置饼图的厚度
            roseType: false, // 确保饼图是圆形
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
              },
            },
          }
        ],
        graphic: [
          {
            type: 'text',
            top: '40%',
            left: '30%',
            style: {
              text: '合计', // 显示“合计”
              font: '16px Microsoft YaHei', // 字体样式
              fill: '#333' // 字体颜色
            },
            // 使文本居中
            // textAlign: 'center',
            // textVerticalAlign: 'middle'
          },
          {
            type: 'text',
            top: '53%',
            left: '30%',
            style: {
              text: total, // 显示总量
              font: 'bold 24px Microsoft YaHei', // 字体样式
              fill: '#262626' // 字体颜色
            },
            // 使文本居中
            // textAlign: 'center',
            // textVerticalAlign: 'middle'
            // 使总量文字稍微下移以保持间距
            // silent: true,
            // top: 'center', // 这里可以调整以使其居中
            // style: {
            //   textAlign: 'center',
            //   textVerticalAlign: 'middle',
            // }
          }
        ]
      };

      this.typeChartOption = option;
      // chart.setOption(option);
    },

    // 初始化项目状态统计饼状图
    initStatusChart() {
      const data = [
        {
          value: this.acc.noAcc,
          name: '施工中',
          itemStyle: {
            color: '#00b39d',
          },
        },
        {
          value: this.acc.acc,
          name: '已完工',
          itemStyle: {
            color: '#ec7000',
          },
        }
      ]
      // 计算总量
      const total = Number(this.acc.noAcc) + Number(this.acc.acc)
      const option = {
        tooltip: {
          trigger: 'item',
          show: true, // 去掉提示线
        },
        legend: {
          orient: 'horizontal',
          left: 'center', // 图例显示在右边
          bottom: '0%',  // 调整图例的垂直位置
          data: ['施工中', '已完工'],
          itemWidth: 12, // 图例宽度
          itemHeight: 12, // 图例高度
          itemStyle: {
            borderRadius: 0, // 确保图例为正方形
          },
          formatter: function(name) {
            const item = data.find(d => d.name === name);
            return `${name} ${item.value}`; // 自定义图例显示内容
          }
        },
        series: [
          {
            name: '项目类别',
            type: 'pie',
            // center: ['50%', '50%'], // 设置饼图中心位置
            radius: ['70%', '50%'], // 设置饼图的内外半径
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 1,
            },
            label: {
              show: true,
              position: 'outside', // 标签在外部显示
              formatter: '{b}{c}', // 显示标签内容：名称、数值、百分比
            },
            // labelLine: {
            //   show: true,
            // },
            data,
            // 设置饼图的厚度
            roseType: false, // 确保饼图是圆形
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
              },
            },
          }
        ],
        graphic: [
          {
            type: 'text',
            top: '38%',
            left: 'center',
            style: {
              text: '合计', // 显示“合计”
              font: '16px Microsoft YaHei', // 字体样式
              fill: '#333' // 字体颜色
            },
            // 使文本居中
            // textAlign: 'center',
            // textVerticalAlign: 'middle'
          },
          {
            type: 'text',
            top: '53%',
            left: 'center',
            style: {
              text: total, // 显示总量
              font: 'bold 24px Microsoft YaHei', // 字体样式
              fill: '#262626' // 字体颜色
            }
          }
        ]
      };
      this.statusChartOption = option;
      // chart.setOption(option);
    },

    // 初始化项目行政区划分布统计饼状图
    initDistrictChart() {
      let keys = Object.keys(this.cityData)
      // 创建一个城市代码到城市对象的映射
      const cityMap = new Map(this.newAddressList.map(city => [city.code, city]));
      let filteredData = keys
        .filter(key => cityMap.has(key)) // 根据城市数据筛选
        .map(key => ({ name: cityMap.get(key).name, value: this.cityData[key] })) // 转换为数组格式
        let legendList = filteredData.map(item =>  item.name )
      let data = filteredData
      // const data = [
      //   {
      //     value: 2088,
      //     name: '饮水工程',
      //     itemStyle: {
      //       color: '#00b39d',
      //     },
      //   },
      //   {
      //     value: 1000,
      //     name: '枢纽工程',
      //     itemStyle: {
      //       color: '#0073ee',
      //     },
      //   },
      //   {
      //     value: 1000,
      //     name: '新建水库',
      //     itemStyle: {
      //       color: '#00a7ee',
      //     },
      //   },
      //   {
      //     value: 800,
      //     name: '病险',
      //     itemStyle: {
      //       color: '#00b368',
      //     },
      //   },
      //   {
      //     value: 1000,
      //     name: '灌区',
      //     itemStyle: {
      //       color: '#ecb800',
      //     },
      //   },
      //   {
      //     value: 350,
      //     name: '水保',
      //     itemStyle: {
      //       color: '#ec7000',
      //     },
      //   },
      //   {
      //     value: 350,
      //     name: '其他',
      //     itemStyle: {
      //       color: '#e04040',
      //     },
      //   },
      // ]
      // 计算总量
      const total = filteredData.reduce((sum, item) => sum + item.value, 0);
      const option = {
        tooltip: {
          trigger: 'item',
          show: true, // 去掉提示线
        },
        color: ['#00b39d', '#0073ee', '#00a7ee', '#00b368', '#ecb800', '#ec7000', '#e04040',
          "#FF5733", // 红色
          "#33FF57", // 绿色
          "#3357FF", // 蓝色
          "#F1C40F", // 黄
          "#8E44AD", // 紫色
          "#E67E22", // 橙色
          "#2ECC71", // 亮绿色
          "#3498DB", // 天蓝色
          "#9B59B6", // 淡紫色
          "#34495E", // 深灰色
          "#1ABC9C", // 青色
          "#D35400", // 深橙色
          "#C0392B", // 深红色
          "#F39C12", // 金色
          "#7D3C98", // 深紫色
          "#2980B9", // 深蓝色
          "#27AE60", // 深绿色
          "#8E44AD", // 紫红色
          "#F4D03F", // 浅黄
          "#BDC3C7"  // 浅灰色
        ],
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: '5%', // 图例显示在右边
          top: '15%',  // 调整图例的垂直位置
          // data: ['饮水工程', '枢纽工程', '新建水库', '病险', '灌区', '水保', '其他'],
          data: legendList,
          itemWidth: 12, // 图例宽度
          itemHeight: 12, // 图例高度
          itemStyle: {
            borderRadius: 0, // 确保图例为正方形
          },
          formatter: function(name) {
            const item = data.find(d => d.name === name);
            return `${name} ${item.value}`; // 自定义图例显示内容
          }
        },
        series: [
          {
            name: '项目类别',
            type: 'pie',
            center: ['35%', '50%'], // 设置饼图中心位置
            radius: ['70%', '50%'], // 设置饼图的内外半径
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 1,
            },
            label: {
              show: false,
              position: 'outside', // 标签在外部显示
              formatter: '{b}\n{c} ({d}%)', // 显示标签内容：名称、数值、百分比
            },
            labelLine: {
              show: true,
            },
            data: filteredData,
            // 设置饼图的厚度
            roseType: false, // 确保饼图是圆形
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
              },
            },
          }
        ],
        graphic: [
          {
            type: 'text',
            top: '40%',
            left: '29%',
            style: {
              text: '合计', // 显示“合计”
              font: '16px Microsoft YaHei', // 字体样式
              fill: '#333' // 字体颜色
            },
            // 使文本居中
            // textAlign: 'center',
            // textVerticalAlign: 'middle'
          },
          {
            type: 'text',
            top: '53%',
            left: '28%',
            style: {
              text: total, // 显示总量
              font: 'bold 24px Microsoft YaHei', // 字体样式
              fill: '#262626' // 字体颜色
            },
            // 使文本居中
            // textAlign: 'center',
            // textVerticalAlign: 'middle'
            // 使总量文字稍微下移以保持间距
            // silent: true,
            // top: 'center', // 这里可以调整以使其居中
            // style: {
            //   textAlign: 'center',
            //   textVerticalAlign: 'middle',
            // }
          }
        ]
      };
      this.districtChartOption = option;
      // chart.setOption(option);
    },

    // 初始化项目预警统计饼状图
    initWarningChart() {
      const data = [
        {
          name: '预警',
          value: this.warningData.warn,
          itemStyle: {
            color: '#00b39d',
          }
        },
        {
          name: '提醒',
          value: this.warningData.forewarning,
          itemStyle: {
            color: '#0073ee',
          }
        },
        {
          name: '正常',
          value: this.warningData.normal,
          itemStyle: {
            color: '#00a7ee',
          }
        },
      ]
      // const data = [
      //   {
      //     value: 2088,
      //     name: '饮水工程',
      //     itemStyle: {
      //       color: '#00b39d',
      //     },
      //   },
      //   {
      //     value: 1000,
      //     name: '枢纽工程',
      //     itemStyle: {
      //       color: '#0073ee',
      //     },
      //   },
      //   {
      //     value: 1000,
      //     name: '新建水库',
      //     itemStyle: {
      //       color: '#00a7ee',
      //     },
      //   },
      //   {
      //     value: 800,
      //     name: '病险',
      //     itemStyle: {
      //       color: '#00b368',
      //     },
      //   },
      //   {
      //     value: 1000,
      //     name: '灌区',
      //     itemStyle: {
      //       color: '#ecb800',
      //     },
      //   },
      //   {
      //     value: 350,
      //     name: '水保',
      //     itemStyle: {
      //       color: '#ec7000',
      //     },
      //   },
      //   {
      //     value: 350,
      //     name: '其他',
      //     itemStyle: {
      //       color: '#e04040',
      //     },
      //   },
      // ]
      // 计算总量
      const total = data.reduce((sum, item) => sum + item.value, 0);
      const option = {
        tooltip: {
          trigger: 'item',
          show: true, // 去掉提示线
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: '5%', // 图例显示在右边
          top: '15%',  // 调整图例的垂直位置
          data: ['预警', '提醒', '正常'],
          itemWidth: 12, // 图例宽度
          itemHeight: 12, // 图例高度
          itemStyle: {
            borderRadius: 0, // 确保图例为正方形
          },
          formatter: function(name) {
            const item = data.find(d => d.name === name);
            return `${name} ${item.value}`; // 自定义图例显示内容
          }
        },
        series: [
          {
            name: '项目类别',
            type: 'pie',
            center: ['35%', '50%'], // 设置饼图中心位置
            radius: ['70%', '50%'], // 设置饼图的内外半径
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 1,
            },
            label: {
              show: false,
              position: 'outside', // 标签在外部显示
              formatter: '{b}\n{c} ({d}%)', // 显示标签内容：名称、数值、百分比
            },
            labelLine: {
              show: true,
            },
            data,
            // 设置饼图的厚度
            roseType: false, // 确保饼图是圆形
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
              },
            },
          }
        ],
        graphic: [
          {
            type: 'text',
            top: '40%',
            left: '29%',
            style: {
              text: '合计', // 显示“合计”
              font: '16px Microsoft YaHei', // 字体样式
              fill: '#333' // 字体颜色
            },
            // 使文本居中
            // textAlign: 'center',
            // textVerticalAlign: 'middle'
          },
          {
            type: 'text',
            top: '53%',
            left: '27%',
            style: {
              text: total, // 显示总量
              font: 'bold 24px Microsoft YaHei', // 字体样式
              fill: '#262626' // 字体颜色
            },
            // 使文本居中
            // textAlign: 'center',
            // textVerticalAlign: 'middle'
            // 使总量文字稍微下移以保持间距
            // silent: true,
            // top: 'center', // 这里可以调整以使其居中
            // style: {
            //   textAlign: 'center',
            //   textVerticalAlign: 'middle',
            // }
          }
        ]
      };
      this.warningChartOption = option;
      // chart.setOption(option);
    },

    // 跳转到生成报告页
    handleGenerateProject() {
      this.$tab.navigateTo(`/pages/statistics/generate`);
    }
  }
};
</script>

<style lang="scss" scoped>
.statistics {
  padding-bottom: 80px;
  .chart-list {
    padding: 64px 20px 16px;
    .card {
      canvas {
        width: 100%;
        height: 250px;
      }
    }
  }
}


.card-body {
  padding: 20px;
  font-size: 16px;
  color: #333;
}

.ec-canvas {
  height: 300px;
}
</style>

