1.检验项要求值偏差预警数据详情

gaoluyang

2 天以前 33d4704762e72acab707b6633c43521c72b01a10

 src/views/statisticalCharts/inspectionItemWarning/index.vue

@@ -10,12 +10,28 @@
      <el-row>
        <el-col :span="24">
          <div class="inspection-card">
            <div class="title">检验项偏差预警数据详情</div>
            <div class="title">检验项平均值偏差预警数据详情</div>
            <Echarts ref="chart"
                     :chartStyle="chartStyle"
                     :grid="grid"
                     :options="echartsOptions"
                     :series="echartsSeries"
                     :tooltip="tooltip"
                     :xAxis="xAxis"
                     :yAxis="yAxis"
                     style="height: 40vh;"></Echarts>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="inspection-card">
            <div class="title">检验项要求值偏差预警数据详情</div>
            <Echarts ref="chart"
                     :chartStyle="chartStyle"
                     :grid="grid"
                     :options="echartsOptions"
                     :series="echartsSeries1"
                     :tooltip="tooltip"
                     :xAxis="xAxis"
                     :yAxis="yAxis"
@@ -138,6 +154,29 @@
          markPoint: {}
        },
      ],
      echartsSeries1: [
        {
          name: '检测值',
          type: 'line',
          smooth: true,
          tooltip: {
            valueFormatter: function (value) {
              return value;
            }
          },
          label: {
            show: true,
            position: 'top',
            formatter: function (value) {
              return value.value;
            },
            distance: 14
          },
          data: [],
          markArea: {},
          markPoint: {}
        },
      ],
      xAxis: [
        {
          type: 'category',
@@ -186,7 +225,6 @@
    // 查询折线图信息
    rowClick (row) {
      selectDeviationWarning({deviationWarningId: row.deviationWarningId}).then(res => {
        console.log('res---', res)
        if (res.data === null) {
          this.$message.warning('暂无数据')
          return
@@ -194,7 +232,9 @@
        let lineData = []
        let xAxis = []
        let markAreas = []; // 存储 markArea 的数组
        let markAreas1 = [];
        let markPoints = [];
        let markPoints1 = [];
        const sampleCodeCount = {};
        res.data.forEach((item, index) => {
          lineData.push(item.testValue)
@@ -242,6 +282,39 @@
                borderRadius: 4
              }
            });
          }// 如果 isIssueAsked 为 1，则在此索引处添加一个 markAreas1
          if (item.isIssueAsked == 1) {
            const startColumn = index > 0 ? xAxis[index - 1] : xAxis[index]; // 起点：前一列或当前列
            const endColumn = xAxis[index]; // 终点：当前列

            markAreas.push([
              {
                xAxis: startColumn, // 从前一列开始
              },
              {
                xAxis: endColumn, // 到当前列结束
              }
            ]);
            markPoints1.push({
              name: '问题点',
              coord: [item.sampleCode, item.testValue],
              value: item.testValue,
              itemStyle: {
                color: 'rgba(255, 173, 177, 0.8)'
              },
              label: {
                show: true,
                formatter: function(params) {
                  return params.value; // 自定义标签内容
                },
                color: 'black', // 标签文字颜色
                fontSize: 12,
                distance: 5, // 调整标签与气泡的距离
                padding: [0,0],
                backgroundColor: 'rgba(255, 173, 177, 0.8)', // 标签背景色及透明度
                borderRadius: 4
              }
            });
          }
        })
        this.xAxis[0].data = xAxis
@@ -256,6 +329,17 @@
        this.echartsSeries[0].markPoint = {
          data: markPoints
        };
        this.echartsSeries1[0].data = lineData
        // 更新 markAreas1 配置
        this.echartsSeries1[0].markAreas1 = {
          itemStyle: {
            color: 'rgba(255, 173, 177, 0.4)' // 设置背景颜色
          },
          data: markAreas1 // 动态生成的 markAreas1 数据
        };
        this.echartsSeries1[0].markPoint = {
          data: markPoints1
        };
      })
    },
    // 重置