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: "电力消费量得分",
      },
      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]);
      const minVal = Math.min(...values).toFixed(2);
      const maxVal = Math.max(...values).toFixed(2);
      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 = [];
        let current = 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;
        if (item.max === maxVal) {
          count += values.filter((value) => value === item.max).length;
        }
        histogramData.push({ name: item.name, value: count });
      });
      // for (let i = 0; i < binCount; i++) {
      //   const x0 = minVal + i * Number(this.selectedRange);
      //   const x1 = Math.min(x0 + Number(this.selectedRange), maxVal).toFixed(2);

      //   // const label = `${x0}-${x1}`;
      //   // let count = 0;
      //   // count += values.filter((value) => value >= x0 && value < x1).length;
      //   // if (x1 === maxVal) {
      //   //   count += values.filter((value) => value === maxVal).length;
      //   // }

      //   // if (count > 0) {
      //   //   if (count > maxNum) {
      //   //     maxNum = count;
      //   //   }
      //   //   histogramData.push({ name: label, value: count });
      //   // }
      // }

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

      // 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),
          axisLabel: {
            fontSize: 12,
            interval: 0,
            rotate: 20,
          },
        },
        yAxis: {
          name: "企业数",
          type: "value",
          minInterval: 1,
        },
        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) {
                    if (
                      result[value].min >= that.detectMin &&
                      result[value].max <= that.detectMax
                    ) {
                      return "#ffcc00"; // 变更颜色为黄色
                    }
                    return "rgba(245,0,0,0.6)";
                  }
                  return "rgba(245,0,0,0.6)";
                  // 默认颜色
                },
              },
            },
            data: histogramData.map((item) => item.value),
            label: {
              show: false, // 将show属性设置为false，去掉柱子上的数字
            },
          },
          // {
          //   type: "scatter",
          //   symbol: "circle",
          //   symbolSize: 10,
          //   data: histogramData.map((item, index) => [index, item.value]),
          //   itemStyle: {
          //     color: "red",
          //   },
          // },
          // {
          //   type: "line",
          //   data: histogramData.map((item, index) => [index, item.value]),
          //   lineStyle: {
          //     color: "#1a7cc8",
          //   },
          //   symbol: "none",
          // },
        ],
      };
      this.isChartShow = true;
      this.chart.setOption(option);
      this.chart.on("click", function (param) {
        if (
          typeof param.dataIndex === "number" &&
          param.dataIndex >= 0 &&
          param.dataIndex < result.length
        ) {
          let dataIndexValue = result[param.dataIndex];
          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],
              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>