enteprise-ui/src/views/dashboard/sandianscore.vue

<template>
  <!-- 得分水平分布-企业水平分析 - littlegreen - 补充form和label -->
  <div
    :class="className"
    :style="{ height: '100%', width: width, padding: '20px' }"
  >
    <div class="select-container">
      <el-form
        style="
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          align-items: center;
          grid-gap: 20px;
        "
        label-width="100px"
      >
        <el-form-item label="评估指标" style="margin-bottom: 0">
          <el-select v-model="selectedDataKey" style="width: 100%">
            <el-option
              v-for="key in dataKeys"
              :key="key"
              :value="key"
              :label="keyToChinese[key]"
            >
              {{ keyToChinese[key] }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年度" style="margin-bottom: 0"
          ><el-select v-model="selectedYear" style="width: 100%">
            <el-option v-for="year in availableYears" :key="year" :value="year">
              {{ year }}
            </el-option>
          </el-select></el-form-item
        >
        <el-form-item label="行业代码" style="margin-bottom: 0"
          ><el-input
            v-model="selectedCode"
            placeholder="请输入行业代码"
            clearable
            style="width: 100%"
        /></el-form-item>
        <el-form-item label="检测区间" style="margin-bottom: 0">
          <div style="display: flex">
            <el-input v-model="detectMin" placeholder="最小值" clearable />
            <span style="margin: 0 10px">~</span>
            <el-input v-model="detectMax" placeholder="最大值" clearable />
          </div>
        </el-form-item>
        <!-- <el-form-item label="数据分布区间"  style="margin-bottom:0"
          ><el-input
            v-model="selectedRange"
            placeholder="请设置数据分布区间"
            clearable
            style="width: 240px"
        /></el-form-item> -->
        <div style="display: inline; padding-left: 10px">
          当前行业: {{ industryMap.get(selectedCode) }}
        </div>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="updateChart"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div ref="chart" :style="{ height: height, width: width }"></div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        prop="industryName"
        label="行业名称"
        width="200"
      ></el-table-column>
      <el-table-column prop="year" label="年度" width="200"> </el-table-column>
      <el-table-column prop="enterpriseId" label="企业ID"></el-table-column>
      <el-table-column
        prop="value"
        label="Z-score得分"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="level"
        label="水平评价"
        width="200"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { listScore } from "@/api/score/score"; // 导入得分数据的接口
import { listIndustry } from "@/api/industry/industry"; // 导入行业数据的接口
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "400px",
    },
  },
  data() {
    return {
      chart: null,
      chartData: [],
      industryData: [],
      industryMap: new Map(),
      selectedDataKey: "totalIndustrialValueScore", // 默认选择的字段
      selectedCode: null,
      dataKeys: [
        // 'mainBusinessScore',
        // 'landAreaScore',
        "totalIndustrialValueScore",
        // 'gdpScore',
        "taxableIncomeScore",
        "paidTaxScore",
        // 'mainBusinessIncomeScore',
        // 'employeeNumberScore',
        // 'profitScore',
        // 'ownerEquityScore',
        "fundingScore",
        "energyConsumeScore",
        "powerConsumeScore",
        // 其他得分字段...
      ], // 可选项
      keyToChinese: {
        mainBusinessScore: "主营业务活动得分",
        landAreaScore: "用地面积得分",
        totalIndustrialValueScore: "工业总产值得分",
        gdpScore: "工业增加值得分",
        taxableIncomeScore: "应税收入得分",
        paidTaxScore: "实缴税金得分",
        mainBusinessIncomeScore: "主营业务收入得分",
        employeeNumberScore: "从业人员数得分",
        profitScore: "利润总额得分",
        ownerEquityScore: "所有者权益得分",
        fundingScore: "研发经费得分",
        energyConsumeScore: "能源消费量得分",
        powerConsumeScore: "电力消费量得分",
      },
      keyToLevel: {
        totalIndustrialValueScore: "totalIndustrialValueLevel",
        taxableIncomeScore: "taxableIncomeLevel",
        paidTaxScore: "paidTaxLevel",
        fundingScore: "fundingLevel",
        energyConsumeScore: "energyConsumeLevel",
        powerConsumeScore: "powerConsumeLevel",
      },
      selectedYear: null,
      queryParams: {
        pageNum: 1,
        pageSize: 2000000, // 默认 2000000 条(全部一次性数据)
        enterpriseName: null,
        location: null,
        code: null,
        mainBusiness: null,
        landArea: null,
        totalIndustrialValue: null,
        gdp: null,
        taxableIncome: null,
        paidTax: null,
        mainBusinessIncome: null,
        employeeNumber: null,
        profit: null,
        ownerEquity: null,
        funding: null,
        energyConsume: null,
        year: null,
        month: null,
      },
      industryQueryParams: {
        pageNum: 1,
        pageSize: 2000000,
        industryName: null,
        code: null,
      }, //  查询行业信息
      availableYears: [],
      selectedRange: 0.1, // 不能为 0， - littlegreen - 固定0.1
      // littlegreen - 检测区间 和 表格数据
      detectMin: null,
      detectMax: null,
      tableData: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.fetchData();
    });
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    fetchData() {
      listScore(this.queryParams)
        .then((response) => {
          this.chartData = response.rows;
          this.availableYears = [
            ...new Set(this.chartData.map((item) => item.year)),
          ];
          this.selectedYear = this.availableYears[0] || null;
          // this.selectedCode = [
          //   ...new Set(this.x.map((item) => item.code)),
          // ][0];
          // littlegreen - 解决报错
          if (Array.isArray(this.chartData)) {
            this.selectedCode = [
              ...new Set(this.chartData.map((item) => item.code)),
            ][0];
          } else {
            console.warn("this.x is not an array or is undefined.");
            this.selectedCode = null; // 或根据需求设置一个默认值
          }
          this.initChart();
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });

      listIndustry(this.industryQueryParams)
        .then((response) => {
          this.industryData = response.rows;
          // console.log("industry_info" + this.industryData);
          this.industryMap = this.industryData.reduce((map, item) => {
            const key = `${item.code}`; // 键是行业代码
            map.set(key, item.industryName); // 将键和对应的行业名称存储到Map中
            return map;
          }, new Map());
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
    initChart() {
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(this.$refs.chart, "macarons");
      this.updateChart();
    },
    updateChart() {
      const that = this;
      if (!this.chart) {
        return;
      }
      let flag = this.checkNumber();
      if (flag == 2) {
        return;
      }
      // console.log(flag);
      let filteredData = this.chartData;
      if (this.selectedYear) {
        filteredData = filteredData.filter(
          (item) =>
            item.year === this.selectedYear && item.code === this.selectedCode
        );
      }
      const values = filteredData.map((item) => item[this.selectedDataKey]);
      console.log(filteredData, values, "filteredData")
      const minVal = Math.min(...values).toFixed(2);
      const maxVal = Math.max(...values).toFixed(2);
      // console.log(minVal, maxVal)
      // console.log(
      //   filteredData,
      //   "filteredData",
      //   this.selectedDataKey,
      //   values,
      //   "values"
      // );
      // console.log(filteredData, "filteredData");
      if (
        this.selectedRange === null ||
        this.selectedRange === "" ||
        isNaN(+this.selectedRange)
      )
        this.selectedRange = "0.1";
      else if (Number(this.selectedRange) <= 0) this.selectedRange = "0.1";

      const binCount = Math.ceil(
        (maxVal - minVal) / Number(this.selectedRange)
      );
      let maxNum = -1;
      // littlegreen - 传入最大值、最小值、间隔，获得区间列表
      function generateRangeArray(x1, x2, interval) {
        // 确保输入为浮点数
        x1 = parseFloat(x1);
        x2 = parseFloat(x2);
        interval = parseFloat(interval);

        const result = [];

        // 从最接近 x1 的更小的值开始
        let current = x1;
        // console.log(current)
        while (current < x2) {
          let next = parseFloat((current + interval).toFixed(2));

          // 保留两位小数，并添加区间到结果
          result.push({
            name: `${current.toFixed(2)}-${next.toFixed(2)}`,
            min: current,
            max: next,
          });
          current = next;
        }

        // 如果最后一个区间包含最大值，则加入
        if (current < x2) {
          result.push({
            name: `${current.toFixed(2)}-${x2.toFixed(2)}`,
            min: current,
            max: x2,
          });
        }

        return result;
      }
      // function generateRangeArray(x1, x2, interval) {
      //   x1 = parseFloat(x1);
      //   x2 = parseFloat(x2);
      //   interval = parseFloat(interval);
      //   const result = [];
      //   let current = x1 - (x2 - x1);
      //   while (current < x2) {
      //     let next;
      //     if (current == x1) {
      //       current = Math.floor(current * 10) / 10;
      //     }
      //     next = parseFloat((current + interval).toFixed(2));
      //     // 保留两位小数
      //     result.push({
      //       name: `${current}-${next}`,
      //       min: current,
      //       max: next,
      //     });
      //     current = next;
      //   }
      //   // 最后一个区间
      //   if (current <= x2) {
      //     result.push({
      //       name: `${current}-${x2}`,
      //       min: current,
      //       max: x2,
      //     });
      //   }
      //   return result;
      // }
      // 生成区间标签和频次
      const histogramData = [];
      let result = generateRangeArray(minVal, maxVal, 0.1);
      // littlegreen - 获取不同区间的数据
      result.forEach((item) => {
        let count = 0;
        count += values.filter(
          (value) => value >= item.min && value < item.max
        ).length;
        // console.log(item.max, maxVal)
        if (item.max == maxVal) {
          count += values.filter((value) => value === item.max).length;
        }
        histogramData.push({ name: item.name, value: count });
      });

      const maxHistogramValue = Math.max(
        ...histogramData.map((item) => item.value)
      );
      const totalHistogramValue = histogramData.reduce(
        (sum, item) => sum + item.value,
        0
      );

      //--------------------------正态分布----------------------------------
      // 计算均值
      const mean = values.reduce((acc, val) => acc + val, 0) / values.length;
      // console.log(mean.toFixed(2),"mean")
      // 计算标准差
      const stdDev = Math.sqrt(
        values.reduce((acc, val) => acc + Math.pow(val - mean, 2), 0) /
          values.length
      );

      // 创建间隔为0.1的区间
      const center = mean.toFixed(2)
      const interval = 0.1;
      let minLimit = Math.floor(Math.min(...values) * 10) / 10; // 向下取整到最近的0.1
      let maxLimit = Math.ceil(Math.max(...values) * 10) / 10; // 向上取整到最近的0.1
      console.log("中心", center,minLimit,maxLimit) 
      if(center-minLimit != maxLimit-center){
        minLimit = Math.floor(minLimit - (maxLimit-center - (center-minLimit)))
      }
      const intervals = [];
      console.log(minLimit,maxLimit, interval)
      // 乘以1000 是将小数变成整数去计算，小数计算会有误差
      for (let i = minLimit * 1000 ; i <= maxLimit*1000 ; i += (interval*1000)) {
        intervals.push(parseFloat((i/1000).toFixed(2)))
      }
      // 计算每个间隔的频次
      const frequency = new Array(intervals.length - 1).fill(0); // 初始化频次数组

      let intervalArr = intervals.slice(0,-1)
      const intervalStrings = [];
      for (let i = 0; i < intervalArr.length; i++) {
          const start = intervalArr[i].toFixed(1); // 保留一位小数
          const end = ((intervalArr[i]*1000 + interval*1000)/1000).toFixed(1); // 保留一位小数
          intervalStrings.push({
            name: `${start}-${end}`,
            max: end,
            min: start
          }); // 构建区间字符串
      }
      console.log(intervals,intervalArr)
      values.forEach((value) => {
        for (let j = 0; j < intervalStrings.length - 1; j++) {
          // console.log(value)
          // 保证包含右边界
          // console.log(intervals[j].min, intervals[j].max)
          if (value >= intervalStrings[j].min && value < intervalStrings[j].max) {
            // console.log(intervals[j],intervals[j + 1])
            frequency[j]++;
            break; // 找到对应区间后可以跳出循环
          }
        }
      });

      // 确保处理最大值等于maxLimit的情况
      if (values.some((value) => value == maxLimit)) {
        frequency[frequency.length - 1]++;
      }

      // 计算正态分布值
      const normalDistributionValues = intervals
        .slice(0, -1)
        .map((intervalStart, index) => {
          const intervalEnd = intervals[index + 1];
          const midpoint = (intervalStart + intervalEnd) / 2; // 每个区间的中点
          return (
            (1 / (stdDev * Math.sqrt(2 * Math.PI))) *
            Math.exp(-0.5 * Math.pow((midpoint - mean) / stdDev, 2))
          );
        });
      // 输出结果
      // console.log("Intervals:", intervals.slice(0, -1)); // 显示间隔
      // console.log("Frequencies:", frequency);
      // console.log("Normal Distribution Values:", normalDistributionValues);
      //---------------------------------正态分布end---------------------------
      // const quadraticData = this.generateQuadraticData(binCount, maxHistogramValue, totalHistogramValue);
      // littlegreen - 去掉line和scatter，增加x轴拖动，根据检测区间修改柱状的颜色
      const option = {
        color: ["rgba(245,0,0,0.6)"],
        dataZoom: [
          {
            type: "inside", // 内置于坐标系中
            start: 0,
            end: 100,
            xAxisIndex: [0],
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: (params) => {
            // 使用箭头函数来保持 this 的上下文
            const seriesName = params[0].name; // 系列名称
            const dataIndex = params[0].dataIndex; // 数据索引
            const value = params[0].data; // 实际的数据值
            const xAxisLabel = params[0].axisValueLabel; // x轴的标签
            const yAxisLabel = params[0].seriesName;
            // 构建自定义的 tooltip 内容，包含年份
            return `${xAxisLabel}</br> ${yAxisLabel}： ${value} `;
          },
        },
        legend: {
          data: [
            `${this.selectedYear}年 ${
              this.keyToChinese[this.selectedDataKey]
            }企业数统计`,
            "正态分布"
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "50px",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "分布区间",
          // data: histogramData.map((item) => item.name),
          data: intervalStrings.map(item=>item.name),
          axisLabel: {
            fontSize: 12,
            interval: 0,
            rotate: 20,
            // padding: [0, 0, 0, -200]
          },
        },
        yAxis: [{
          name: "企业数",
          type: "value",
          minInterval: 1,
        },{
          name: '正态分布',
          type: 'value'

        }],
        series: [
          {
            name: `${this.selectedYear}年 ${
              this.keyToChinese[this.selectedDataKey]
            }企业数统计`,
            type: "bar",
            barWidth: "30%",
            itemStyle: {
              // color: "rgba(245,0,0,0.6)",
              normal: {
                color: function (params) {
                  const value = params.dataIndex; // 获取当前柱子在数据中的索引
                  if (flag == 1) {
                    let min = parseFloat(intervalStrings[value].min)*1000
                    let max = parseFloat(intervalStrings[value].max)*1000
                    const detectMin = parseFloat(that.detectMin)*1000
                    const detectMax = parseFloat(that.detectMax)*1000
                    if (
                      min >= detectMin &&
                      max <= detectMax
                    ) {
                      return "#ffcc00"; // 变更颜色为黄色
                    }else if(min == detectMax){
                      return "#ffcc00";
                    }
                    return "rgba(245,0,0,0.6)";
                  }
                  return "rgba(245,0,0,0.6)";
                  // 默认颜色
                },
              },
            },
            // data: histogramData.map((item) => item.value),
            data: frequency,
            label: {
              show: false, // 将show属性设置为false，去掉柱子上的数字
            },
          },
          {
            name:"正态分布",
            yAxisIndex: 1,
            type: "line",
            data: normalDistributionValues,
            lineStyle: {
              color: "#1a7cc8",
            },
            symbol: "none",
          },
        ],
      };
      this.isChartShow = true;
      this.chart.setOption(option);
      this.chart.on("click", function (param) {
        // console.log(param.dataIndex, intervalStrings)
        if(typeof param.dataIndex === "number" &&
          param.dataIndex >= 0 &&
          param.dataIndex < intervalStrings.length
        ){
          let dataIndexValue = intervalStrings[param.dataIndex];
          const filteredArray = filteredData.filter((item)=>{
            const isMaxValEqual = parseFloat(dataIndexValue.max) == parseFloat(maxVal);
            const lowerBoundCheck = item[that.selectedDataKey] >= dataIndexValue.min;
            const upperBoundCheck  = isMaxValEqual
              ? item[that.selectedDataKey] <= dataIndexValue.max
              : item[that.selectedDataKey] < dataIndexValue.max;
            return lowerBoundCheck && upperBoundCheck;
          })
          // console.log(filteredData,filteredArray,that.selectedDataKey)
          that.tableData = filteredArray.map((item) => {
            return {
              industryName: item.code,
              enterpriseId: item.enterpriseName,
              year: item.year,
              value: item[that.selectedDataKey],
              level: item[that.keyToLevel[that.selectedDataKey]],
            };
          });
        }
        // if (
        //   typeof param.dataIndex === "number" &&
        //   param.dataIndex >= 0 &&
        //   param.dataIndex < intervalStrings.length
        // ) {
        //   let dataIndexValue = intervalStrings[param.dataIndex];
        //   const filteredArray = filteredData.filter((item) => {
        //     const isMaxValEqual = intervalStrings[1] === maxVal;
        //     const lowerBoundCheck =
        //       item[that.selectedDataKey] >= dataIndexValue.min;
        //     const upperBoundCheck = isMaxValEqual
        //       ? item[that.selectedDataKey] <= dataIndexValue.max
        //       : item[that.selectedDataKey] < dataIndexValue.max;

        //     return lowerBoundCheck && upperBoundCheck;
        //   });
        //   that.tableData = filteredArray.map((item) => {
        //     return {
        //       industryName: item.code,
        //       enterpriseId: item.enterpriseName,
        //       year: item.year,
        //       value: item[that.selectedDataKey],
        //       level: "高",
        //     };
        //   });
        // }
        // const filteredArray = filteredData.filter((item) => {
        //     const isMaxValEqual = result[1] === maxVal;
        //     const lowerBoundCheck = item[that.selectedDataKey] >= dataIndexValue.min;
        //     const upperBoundCheck = isMaxValEqual
        //         ? item[that.selectedDataKey] <= dataIndexValue.max
        //         : item[that.selectedDataKey] < dataIndexValue.max;

        //     return lowerBoundCheck && upperBoundCheck;
        // })
        // that.tableData = filteredArray.map(item => {
        //   return {
        //     industryName: item.code,
        //     enterpriseId: item.enterpriseName,
        //     year: item.year,
        //     value: item[that.selectedDataKey]
        //   }
        // })
      });
    },
    generateQuadraticData(binCount, maxHistogramValue, totalHistogramValue) {
      const a = -0.01;
      const h = binCount / 2;
      const k = maxHistogramValue * 0.75;
      const sideValue = (maxHistogramValue * 0.15) / 2;

      const data = [];
      for (let i = 0; i < binCount; i++) {
        const x = i;
        const y = a * (x - h) ** 2 + k;

        // 调整两侧的值
        if (i === 0 || i === binCount - 1) {
          data.push([x, sideValue]);
        } else {
          data.push([x, y]);
        }
      }
      return data;
    },
    // littlegreen - 检测检测区间是否填写正确
    checkNumber() {
      const maxInput = parseFloat(this.detectMax);
      const minInput = parseFloat(this.detectMin);
      let flag;
      if (!this.detectMin && !this.detectMax) {
        return (flag = 0);
      }
      if (isNaN(maxInput) || isNaN(minInput)) {
        this.$message({
          message: "请输入有效的数字。",
          type: "error",
        });
        return (flag = 2);
      }
      // 检查 minInput 是否大于 maxInput
      if (minInput >= maxInput) {
        this.$message({
          message: "监测区间最大值不可小于或等于最小值",
          type: "error",
        });
        return (flag = 2);
      }
      return (flag = 1);
    },
  },
  watch: {
    // selectedDataKey() {
    //   this.updateChart();
    // },
    // selectedYear() {
    //   this.updateChart();
    // },
    // selectedRange() {
    //   setTimeout(this.updateChart, 2500);
    // },
    // selectedCode() {
    //   this.updateChart();
    // },
  },
};
</script>

<style scoped>
.select-container {
  margin: 10px 0;
  font-size: 16px; /* 调整字号大小 */
}

.select-container select {
  padding: 10px 20px; /* 增加内边距 */
  margin-right: 10px; /* 增加右边距 */
  border: 1px solid #121315; /* 蓝色边框 */
  border-radius: 4px; /* 圆角边框 */
  background-color: white; /* 背景色 */
  color: #121315; /* 文字颜色 */
  font-size: 16px; /* 调整字号大小 */
  cursor: pointer; /* 鼠标悬停时的指针样式 */
  outline: none; /* 移除焦点时的轮廓 */
}

.select-container select:hover {
  border-color: #1a7cc8; /* 鼠标悬停时的边框颜色 */
}

.select-container select:focus {
  border-color: #121315; /* 焦点时的边框颜色 */
  box-shadow: 0 0 0 2px rgba(64, 159, 255, 0.2); /* 焦点时的阴影效果 */
}
</style>