Merge branch 'dev' into dev_tides

Crunchy

2025-04-29 e5454b769d44a34af423bf87ac8a740bf8c20341

 src/views/statisticalCharts/inspectionItemWarning/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,290 @@
<template>
  <div class="app-container">
    <div>
      <lims-table :tableData="tableData" :column="column"
                  :height="'calc(100vh - 500px)'" @pagination="pagination"
                  :rowClick="rowClick"
                  :page="page" :tableLoading="tableLoading"></lims-table>
    </div>
    <div>
      <el-row>
        <el-col :span="24">
          <div class="inspection-card">
            <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>
    </div>
    <el-dialog :visible.sync="viewDia" title="查看详情" width="1100px">
      <lims-table :tableData="tableData1" :column="column1"
                  height="570"
                  :tableLoading="tableLoading1"></lims-table>
    </el-dialog>
  </div>
</template>

<script>
import limsTable from "@/components/Table/lims-table.vue";
import {selectDeviationWarning, selectDeviationWarningPage} from "@/api/statisticalCharts/dataAnalysis";
import Echarts from "@/components/echarts/echarts.vue";

export default {
  name: '',
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {Echarts, limsTable},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      viewDia: false,
      queryParams: {},
      tableData: [],
      tableLoading: false,
      column: [
        { label: '样品编号', prop: 'sampleCode',width: 150 },
        { label: '样品名称', prop: 'sampleName'},
        { label: '型号', prop: 'sampleModel',width: 150  },
        { label: '供应商名称', prop: 'supplierName',width: 150 },
        { label: '检验项名称', prop: 'inspectionItemName'},
        {
          label: "偏差值%",
          prop: "deviationValue",
          width: 150,
          dataType: "tag",
          formatType: (params) => {
            return 'danger'
          },
        },
        { label: '检测时间', prop: 'detectionTime',width: 160 },
        {
          dataType: 'action',
          label: '操作',
          operation: [
            {
              name: '查看',
              type: 'text',
              clickFun: (row) => {
                this.openDia(row);
              },
            }
          ]
        }
      ],
      page: {
        total: 0,
        size: 20,
        current: 1
      },
      tableData1: [],
      tableLoading1: false,
      column1: [
        { label: '样品编号', prop: 'sampleCode'},
        { label: '供应商名称', prop: 'supplierName'},
        {
          label: "检测值",
          prop: "testValue",
          width: 150,
          dataType: "tag",
          formatType: (params) => {
            if (this.tableData1.find((m) => m.testValue == params).isIssue == 1) {
              return 'danger'
            } else {
              return 'success'
            }
          },
        },
        { label: '检测时间', prop: 'detectionTime',width: 160 },
      ],
      chartStyle: {
        width: '100%',
        height: '96%' // è®¾ç½®å›¾è¡¨å®¹å™¨çš„高度
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {},
      echartsOptions: {},
      echartsSeries: [
        {
          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',
          data: [],
          boundaryGap: false,
          axisLabel: {
            interval: 0, // å¼ºåˆ¶æ˜¾ç¤ºæ‰€æœ‰æ ‡ç­¾
            rotate: 0,   // ä¸æ—‹è½¬ï¼ˆå¯ä»¥æ ¹æ®éœ€è¦è°ƒæ•´ï¼‰
            formatter: function (value) {
              // æ¯éš”一定长度添加换行符
              const maxLength = 9; // æ¯æ®µæœ€å¤§å­—符数
              let result = '';
              for (let i = 0; i < value.length; i += maxLength) {
                result += value.substring(i, i + maxLength) + '\n';
              }
              return result.trim(); // åŽ»æŽ‰æœ«å°¾å¤šä½™çš„换行符
            },
            margin: 10, // æ ‡ç­¾ä¸Žè½´çº¿çš„距离
          },
        }
      ],
      yAxis: [{
        type: 'value',
        axisLabel: {
          formatter: '{value}'
        }
      }],
    };
  },
  mounted() {
    this.refreshTable()
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æŸ¥è¯¢åˆ—表信息
    refreshTable() {
      this.tableLoading = true
      selectDeviationWarningPage({ ...this.page}).then(res => {
        this.tableLoading = false
        this.tableData = res.data.records
        this.page.total = res.data.total
      }).catch(err => {
        this.tableLoading = false
      })
    },
    // æŸ¥è¯¢æŠ˜çº¿å›¾ä¿¡æ¯
    rowClick (row) {
      selectDeviationWarning({deviationWarningId: row.deviationWarningId}).then(res => {
        console.log('res---', res)
        if (res.data === null) {
          this.$message.warning('暂无数据')
          return
        }
        let lineData = []
        let xAxis = []
        let markAreas = []; // å­˜å‚¨ markArea çš„数组
        let markPoints = [];
        const sampleCodeCount = {};
        res.data.forEach((item, index) => {
          lineData.push(item.testValue)
          // æ·»åŠ ç´¢å¼•ä»¥ç¡®ä¿å”¯ä¸€æ€§
          // æ£€æŸ¥æ˜¯å¦éœ€è¦åŒºåˆ† sampleCode
          if (!sampleCodeCount[item.sampleCode]) {
            sampleCodeCount[item.sampleCode] = 1; // ç¬¬ä¸€æ¬¡å‡ºçŽ°
            xAxis.push(item.sampleCode); // ç›´æŽ¥ä½¿ç”¨åŽŸå§‹ sampleCode
          } else {
            sampleCodeCount[item.sampleCode]++; // å¢žåŠ è®¡æ•°
            const uniqueSampleCode = `${item.sampleCode}-${sampleCodeCount[item.sampleCode]}`;
            xAxis.push(uniqueSampleCode); // æ·»åŠ åŽç¼€ä»¥åŒºåˆ†
          }

          // å¦‚æžœ isIssue ä¸º 1，则在此索引处添加一个 markArea
          if (item.isIssue == 1) {
            const startColumn = index > 0 ? xAxis[index - 1] : xAxis[index]; // èµ·ç‚¹ï¼šå‰ä¸€åˆ—或当前列
            const endColumn = xAxis[index]; // ç»ˆç‚¹ï¼šå½“前列

            markAreas.push([
              {
                xAxis: startColumn, // ä»Žå‰ä¸€åˆ—开始
              },
              {
                xAxis: endColumn, // åˆ°å½“前列结束
              }
            ]);
            markPoints.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
        this.echartsSeries[0].data = lineData
        // æ›´æ–° markArea é…ç½®
        this.echartsSeries[0].markArea = {
          itemStyle: {
            color: 'rgba(255, 173, 177, 0.4)' // è®¾ç½®èƒŒæ™¯é¢œè‰²
          },
          data: markAreas // åŠ¨æ€ç”Ÿæˆçš„ markArea æ•°æ®
        };
        this.echartsSeries[0].markPoint = {
          data: markPoints
        };
      })
    },
    // é‡ç½®
    refresh() {
      // this.resetForm('entity')
      this.refreshTable()
    },
    // åˆ†é¡µåˆ‡æ¢
    pagination(page) {
      this.page.size = page.limit
      this.refreshTable()
    },
    openDia (row) {
      this.viewDia = true
      this.tableLoading1 = true
      selectDeviationWarning({deviationWarningId: row.deviationWarningId}).then(res => {
        this.tableLoading1 = false
        this.tableData1 = res.data
      }).catch(() => {
        this.tableLoading1 = false
      })
    },
  }
};
</script>

<style scoped>
.inspection-card{
  width: 100%;
  margin-top: 10px;
}
</style>