qingban-SPC/src/views/analysis/process/index.vue

<template>
  <div class="container">
    <div class="infobox">
      <div class="header">
        <div class="text">工序名称：</div>
        <el-select
          v-model="value"
          placeholder="Select"
          ref="selectRef"
          @change="changeSelect"
        >
          <el-option
            v-for="item in opOptions"
            :key="item.value"
            :label="item.dictLabel"
            :value="item.remark"
          />
        </el-select>
      </div>
      <div class="body">
        <div class="text">
          规格上限：{{ value ? JSON.parse(value).up : "-" }}
        </div>
        <div class="text">
          规格下限：{{ value ? JSON.parse(value).down : "-" }}
        </div>
        <div class="text">
          计量单位：{{ value ? JSON.parse(value).unit : "-" }}
        </div>
        <div class="text">
          Xbar-UCL：{{ showData.avgMax ? showData.avgMax : "-" }}
        </div>
        <div class="text">
          Xbar-LCL：{{ showData.avgMin ? showData.avgMin : "0" }}
        </div>
        <div class="text">
          R-UCL：{{ showData.rangeMax ? showData.rangeMax : "-" }}
        </div>
        <div class="text">
          R-LCL：{{ showData.rangeMin ? showData.rangeMin : "0" }}
        </div>
      </div>
    </div>
    <div class="databox">
      <el-scrollbar :style="{ height: Height + 'px' }">
        <div class="box">
          <div class="title">
            <div style="display: flex; align-items: center">
              <div class="bg"></div>
              样本数据录入
            </div>
            <div class="btns">
              <!-- <el-button
                v-if="!editStatus && !addStatus"
                type="primary"
                class="btn"
                @click="changeEditstatus"
                >编辑</el-button
              > -->
              <el-button
                v-if="!addStatus && !editStatus"
                type="primary"
                class="btn"
                @click="changeaddstatus"
                >新增</el-button
              >
              <el-button
                v-if="editStatus || addStatus"
                type="success"
                class="btn"
                @click="submit"
                >确定</el-button
              >
              <el-button
                v-if="editStatus || addStatus"
                type="info"
                class="btn"
                @click="canceleOp"
                >取消</el-button
              ><span v-if="!addStatus && !editStatus" style="margin: 10px"
                >年份：</span
              >
              <el-date-picker
                v-if="!addStatus && !editStatus"
                v-model="year"
                class="btn"
                type="year"
                style="width: 160px"
                placeholder="Pick a year"
                value-format="YYYY"
                :clear-icon="''"
                @change="getTableData"
              />
            </div>
            <!-- 导入代码 -->
            <!-- <div class="btns">
              <el-button
                class="btn"
                :type="disabled ? 'success' : 'primary'"
                @click="changeEdit"
                v-if="importStatus"
                >{{ disabled ? "保存" : "编辑" }}</el-button
              >
              <el-button
                v-if="disabled && importStatus"
                type="info"
                class="btn"
                @click="cancelEdit"
                >取消</el-button
              >
              <el-upload
                class="btn"
                :action="url"
                :show-file-list="false"
                accept=".xlsx, .xls"
                multiple
                :on-success="onSuccess"
                :headers="headers"
              >
                <el-button class="btn" type="primary">导入</el-button>
              </el-upload>
            </div> -->
          </div>
          <!-- <div class="tableTitle">
          调阻精度一致性检测表
          <span style="float: right; right: 30px">2024年</span>
        </div> -->
          <div class="info" v-if="!addStatus">
            <el-table
              :data="tableData"
              border
              :style="{ height: maxHeight - 50 + 'px', width: maxWidth + 'px' }"
              :show-overflow-tooltip="true"
            >
              <el-table-column
                align="center"
                width="100"
                prop="dateStr"
                sortable
                label="日期"
              >
                <template #default="{ row }"
                  ><span>{{ row.dateStr }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                width="100"
                prop="model"
                label="产品型号"
              >
                <template #default="{ row }"
                  ><span>{{ row.model }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                width="100"
                prop="batchNo"
                label="生产批号"
              >
                <template #default="{ row }"
                  ><span>{{ row.batchNo }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :label="title">
                <el-table-column
                  align="center"
                  prop="accuracy1"
                  width="60"
                  label="数值1"
                >
                  <template #default="{ row }"
                    ><span>{{ row.accuracy1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="accuracy2"
                  width="60"
                  label="数值2"
                >
                  <template #default="{ row }"
                    ><span>{{ row.accuracy2 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="accuracy3"
                  width="60"
                  label="数值3"
                >
                  <template #default="{ row }"
                    ><span>{{ row.accuracy3 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="accuracy4"
                  width="60"
                  label="数值4"
                >
                  <template #default="{ row }"
                    ><span>{{ row.accuracy4 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="accuracy5"
                  width="60"
                  label="数值5"
                >
                  <template #default="{ row }"
                    ><span>{{ row.accuracy5 }}</span>
                  </template>
                </el-table-column> </el-table-column
              ><el-table-column
                align="center"
                prop="avg"
                label="平均值"
                width="60"
              /><el-table-column
                align="center"
                prop="range"
                label="极差"
                width="60"
              /><el-table-column
                align="center"
                width="80"
                prop="checkUser"
                label="检测人"
              >
                <template #default="{ row }"
                  ><span>{{ row.checkUser }}</span>
                </template> </el-table-column
              ><el-table-column
                align="center"
                prop="checkDeviceNo"
                label="检查设备编号"
              >
                <template #default="{ row }"
                  ><span>{{ row.checkDeviceNo }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="abnormal"
                width="60"
                label="是否异常"
              >
                <template #default="{ row }"
                  ><span>{{ row.abnormal }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="analyseUser" label="分析人">
                <template #default="{ row }"
                  ><span>{{ row.analyseUser }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="measure" label="处置措施">
                <template #default="{ row }"
                  ><span>{{ row.measure }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" width="160" prop="" label="操作">
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    class="btn"
                    @click="updataItem(row)"
                    style="height: 25px"
                    >修改</el-button
                  >
                  <el-button
                    type="info"
                    class="btn"
                    style="height: 25px"
                    @click="deleteSubmit(row.id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <Pagination
              :total="currentOption.total"
              :page="currentOption.page"
              :limit="currentOption.limit"
              :pageSizes="currentOption.pageSizes"
              v-model:page="currentOption.page"
              @pagination="getTableData"
            />
          </div>
          <div class="info" v-else>
            <!-- <el-table
              :data="addData"
              border
              :style="{ height: 120 + 'px', width: maxWidth + 'px' }"
              :show-overflow-tooltip="true"
            >
              <el-table-column
                align="center"
                width="60"
                prop="dateStr"
                label="日期"
              >
                <template #default="{ row }"
                  >
                  <el-input-number
           
                    v-model="row.accuracy1"
                    :precision="2"
                    :step="0.01"
                    width="60"
                  />
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                width="140"
                prop="model"
                label="产品型号"
              >
                <template #default="{ row }"
                  >
                  <el-input-number
        
                    v-model="row.accuracy1"
                    :precision="2"
                    :step="0.01"
                    width="60"
                  />
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                width="140"
                prop="batchNo"
                label="生产批号"
              >
                <template #default="{ row }"
                  >
                  <el-input-number
     
                    v-model="row.accuracy1"
                    :precision="2"
                    :step="0.01"
                    width="60"
                  />
                </template>
              </el-table-column>
              <el-table-column align="center" :label="showLable + '精度'">
                <el-table-column
                  align="center"
                  prop="accuracy1"
                  width="180"
                  label="精度1"
                >
                  <template #default="{ row }"
                    >
                    <el-input-number
       
                      v-model="row.accuracy1"
                      :precision="2"
                      :step="0.01"
                      width="60"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="accuracy2"
                  width="180"
                  label="精度2"
                >
                  <template #default="{ row }"
                    >
                    <el-input-number
          
                      v-model="row.accuracy2"
                      :precision="2"
                      :step="0.01"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="accuracy3"
                  width="180"
                  label="精度3"
                >
                  <template #default="{ row }"
                    >
                    <el-input-number
              
                      v-model="row.accuracy3"
                      :precision="2"
                      :step="0.01"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="accuracy4"
                  width="180"
                  label="精度4"
                >
                  <template #default="{ row }"
                    >
                    <el-input-number
          
                      v-model="row.accuracy4"
                      :precision="2"
                      :step="0.01"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="accuracy5"
                  width="180"
                  label="精度5"
                >
                  <template #default="{ row }"
                    >
                    <el-input-number
          
                      v-model="row.accuracy5"
                      :precision="2"
                      :step="0.01"
                    />
                  </template>
                </el-table-column> </el-table-column
              ><el-table-column align="center" prop="avg" label="平均值">
                <template #default="{ row }"
                  >
                  <el-input-number
            
                    v-model="row.accuracy1"
                    :precision="2"
                    :step="0.01"
                    width="60"
                  />
                </template> </el-table-column
              ><el-table-column align="center" prop="range" label="极差">
                <template #default="{ row }"
                  >
                  <el-input-number
             
                    v-model="row.accuracy1"
                    :precision="2"
                    :step="0.01"
                    width="60"
                  />
                </template> </el-table-column
              ><el-table-column align="center" prop="checkUser" label="检测人">
                <template #default="{ row }"
                  >
                  <el-input-number
              
                    v-model="row.accuracy1"
                    :precision="2"
                    :step="0.01"
                    width="60"
                  />
                </template> </el-table-column
              ><el-table-column
                align="center"
                prop="checkDeviceNo"
                label="检查设备编号"
              >
                <template #default="{ row }"
                  >
                  <el-input-number
           
                    v-model="row.accuracy1"
                    :precision="2"
                    :step="0.01"
                    width="60"
                  />
                </template>
              </el-table-column>
              <el-table-column align="center" prop="abnormal" label="是否异常">
                <template #default="{ row }"
                  >
                  <el-input-number
    
                    v-model="row.accuracy1"
                    :precision="2"
                    :step="0.01"
                    width="60"
                  />
                </template>
              </el-table-column>
              <el-table-column align="center" prop="analyseUser" label="分析人">
                <template #default="{ row }"
                  >
                  <el-input-number
              
                    v-model="row.accuracy1"
                    :precision="2"
                    :step="0.01"
                    width="60"
                  />
                </template>
              </el-table-column>
              <el-table-column align="center" prop="measure" label="处置措施" />
              <template #empty>
                <div>
                  <span style="color: green; font-size: 16px"
                    >请先导入文件</span
                  >
                </div>
              </template>
            </el-table> -->
            <el-form
              ref="ruleFormRef"
              :model="addData"
              :rules="rules"
              label-width="auto"
              class="formStyle"
            >
              <el-form-item label="日期" prop="dateStr">
                <el-date-picker
                  v-model="addData.dateStr"
                  type="date"
                  aria-label="Pick a date"
                  placeholder="Pick a date"
                  style="width: 100%"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
              <el-form-item label="产品型号" prop="model">
                <el-input v-model="addData.model" />
              </el-form-item>
              <el-form-item label="生产批号" prop="batchNo">
                <el-input v-model="addData.batchNo" />
              </el-form-item>
              <el-form-item label="数值1" prop="accuracy1">
                <el-input-number
                  :precision="2"
                  :step="0.01"
                  style="width: 100%"
                  v-model="addData.accuracy1"
                />
              </el-form-item>
              <el-form-item label="数值2" prop="accuracy2">
                <el-input-number
                  :precision="2"
                  :step="0.01"
                  v-model="addData.accuracy2"
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item label="数值3" prop="accuracy3">
                <el-input-number
                  :precision="2"
                  :step="0.01"
                  style="width: 100%"
                  v-model="addData.accuracy3"
                />
              </el-form-item>
              <el-form-item label="数值4" prop="accuracy4">
                <el-input-number
                  :precision="2"
                  :step="0.01"
                  style="width: 100%"
                  v-model="addData.accuracy4"
                />
              </el-form-item>
              <el-form-item label="数值5" prop="accuracy5">
                <el-input-number
                  :precision="2"
                  style="width: 100%"
                  :step="0.01"
                  v-model="addData.accuracy5"
                />
              </el-form-item>
              <!-- <el-form-item label="平均值" prop="avg">
                <el-input v-model="addData.avg" />
              </el-form-item>
              <el-form-item label="极差" prop="range">
                <el-input v-model="addData.range" />
              </el-form-item> -->
              <el-form-item label="检测人" prop="checkUser">
                <el-input v-model="addData.checkUser" />
              </el-form-item>
              <el-form-item label="检查设备编号" prop="checkDeviceNo">
                <el-input v-model="addData.checkDeviceNo" />
              </el-form-item>
              <!-- <el-form-item label="是否异常" prop="abnormal">
                <el-input v-model="addData.abnormal" />
              </el-form-item> -->
              <el-form-item label="分析人" prop="analyseUser">
                <el-input v-model="addData.analyseUser" />
              </el-form-item>
              <el-form-item label="处置措施" prop="measure">
                <el-input v-model="addData.measure" />
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="box" v-show="!addStatus">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div style="display: flex; align-items: center">
              <div class="bg"></div>
              控制图绘制
            </div>

            <el-button
              type="primary"
              v-print="'#charts'"
              style="margin-left: 10px; height: 25px"
              >打 印</el-button
            >
          </div>
          <div class="info">
            <div id="charts" :style="{ height: maxHeight / 2 + 'px' }"></div>
            <div id="charts1" :style="{ height: maxHeight / 2 + 'px' }"></div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { useDictionaryStore } from "@/store";
import { getData, addDatas, deleteData, updateData } from "@/api/analysis";
const year = ref("0");
const currentOption = reactive({
  total: 0,
  page: 1,
  limit: 12,
  pageSizes: [12],
});
const lableValue = ref("");
const getTableData = async () => {
  const { data, code, msg } = await getData({
    pageNo: currentOption.page,
    pageSize: currentOption.limit,
    yearStr: year.value,
    operation: lableValue.value,
  });
  if (code == "200") {
    tableData.value = data.records;
    showData.value = { ...data, list: null };
    if (tableData.value.length > 0) {
      setChart1();
      setChart2();
    }
    currentOption.total = data.totalCount;
    currentOption.page = data.pageNo;
    oldDataJSON.value = JSON.stringify(data.records);
  }
  disabled.value = false;
};
//编辑状态
const editStatus = ref(false);
const addStatus = ref(false);
const changeEditstatus = () => {
  editStatus.value = !changeEditstatus.value;
  addStatus.value = false;
};
const changeaddstatus = () => {
  addStatus.value = !addStatus.value;
  editStatus.value = false;
};
const canceleOp = () => {
  addStatus.value = false;
  editStatus.value = false;
  reset();
};
const Y1value = ref([]);
const X1array = ref([]);
const setY1value = () => {
  Y1value.value = [];
  tableData.value.forEach((item) => {
    Y1value.value.push(item.avg);
  });
  Y1value.value.unshift("");
  Y1value.value.push("");

  chartsOption1.value.series[0].data = Y1value.value;
};
const setX1array = () => {
  X1array.value = [];
  tableData.value.forEach((item, index) => {
    X1array.value.push(index + 1);
  });
  X1array.value.unshift("");
  X1array.value.push("");
  chartsOption1.value.xAxis[0].data = X1array.value;
};
const { dicts } = useDictionaryStore();
const importStatus = ref(false);
const disabled = ref(false);
const tableData = ref([]);
//Form
const ruleFormRef = ref(null);

const addItem = {
  // abnormal: "",
  accuracy1: 0,
  accuracy2: 0,
  accuracy3: 0,
  accuracy4: 0,
  accuracy5: 0,
  analyseUser: "",
  avg: 0,
  batchNo: "",
  checkDeviceNo: "",
  checkUser: "",
  dateStr: "",
  measure: "",
  model: "",
  range: 0,
};
const rules = {
  dateStr: [
    {
      required: true,
      trigger: "change",
    },
  ],
  model: [
    {
      required: true,

      trigger: "change",
    },
  ],
  batchNo: [
    {
      required: true,

      trigger: "change",
    },
  ],
  accuracy1: [
    {
      required: true,

      trigger: "change",
    },
  ],
  accuracy2: [
    {
      required: true,

      trigger: "change",
    },
  ],
  accuracy3: [
    {
      required: true,

      trigger: "change",
    },
  ],
  accuracy4: [
    {
      required: true,

      trigger: "change",
    },
  ],
  accuracy5: [
    {
      required: true,

      trigger: "change",
    },
  ],
  checkUser: [
    {
      required: true,

      trigger: "change",
    },
  ],
  checkDeviceNo: [
    {
      required: true,

      trigger: "change",
    },
  ],
  // abnormal: [
  //   {
  //     required: true,

  //     trigger: "change",
  //   },
  // ],
  analyseUser: [
    {
      required: true,

      trigger: "change",
    },
  ],
  measure: [
    {
      required: false,

      trigger: "change",
    },
  ],
};
const resItem = {
  // abnormal: "",
  accuracy1: 0,
  accuracy2: 0,
  accuracy3: 0,
  accuracy4: 0,
  accuracy5: 0,
  analyseUser: "",
  avg: 0,
  batchNo: "",
  checkDeviceNo: "",
  checkUser: "",
  dateStr: "",
  measure: "",
  model: "",
  range: 0,
};
const addData = ref({
  // abnormal: "",
  accuracy1: 0,
  accuracy2: 0,
  accuracy3: 0,
  accuracy4: 0,
  accuracy5: 0,
  analyseUser: "",
  avg: 0,
  batchNo: "",
  checkDeviceNo: "",
  checkUser: "",
  dateStr: "",
  measure: "",
  model: "",
  range: 0,
});
const oldDataJSON = ref("");
const showData = ref({});
const url = ref(import.meta.env.VITE_APP_BASE_API + "/api/v1/spc/import");
const headers = { Authorization: `${localStorage.getItem("token")}` };
const opOptions = ref([...dicts.spc_operation]);
const setChart1Info = () => {
  // chartsOption1.value.title[0].text = `上限=${showData.value.avgMax ? showData.value.avgMax : "-"}`;
  // chartsOption1.value.title[0].text = `x̄=${showData.value.avgAvg ? showData.value.avgAvg : "-"}`;
  chartsOption1.value.series[0].markLine.data[0].yAxis = showData.value.avgMax;
  chartsOption1.value.series[0].markLine.data[0].label.formatter = `                          上限=${showData.value.avgMax ? showData.value.avgMax : "0"}`;
  chartsOption1.value.series[0].markLine.data[1].yAxis = showData.value.avgMin
    ? showData.value.avgMin
    : 0;
  chartsOption1.value.series[0].markLine.data[1].label.formatter = `           下限=${showData.value.avgMin ? showData.value.avgMin : "0"}`;
  chartsOption1.value.series[0].markLine.data[2].yAxis = showData.value.avgAvg;
  chartsOption1.value.series[0].markLine.data[2].label.formatter = `x̄=${showData.value.avgAvg}`;
  // chartsOption1.value.title[2].text = `下限=${showData.value.avgMin ? showData.value.avgMin : "0"}`;
};
const setChart2Info = () => {
  // chartsOption2.value.title[0].text = `上限=${showData.value.rangeMax ? showData.value.rangeMax : "-"}`;
  // chartsOption2.value.title[0].text = `R=${showData.value.rangeAvg ? showData.value.rangeAvg : "-"}`;
  chartsOption2.value.series[0].markLine.data[0].yAxis =
    showData.value.rangeMax;
  chartsOption2.value.series[0].markLine.data[0].label.formatter = `                          上限=${showData.value.rangeMax ? showData.value.rangeMax : "0"}`;
  chartsOption2.value.series[0].markLine.data[1].yAxis = showData.value.rangeMin
    ? showData.value.rangeMin
    : 0;
  chartsOption2.value.series[0].markLine.data[1].label.formatter = `           下限=${showData.value.rangeMin ? showData.value.rangeMin : "0"}`;
  chartsOption2.value.series[0].markLine.data[2].yAxis =
    showData.value.rangeAvg;
  chartsOption2.value.series[0].markLine.data[2].label.formatter = `x̄=${showData.value.rangeAvg}`;
  // chartsOption2.value.title[2].text = `下限=${showData.value.rangeMin ? showData.value.rangeMin : "0"}`;
};
const setChart1 = () => {
  setChart1Info();
  setY1value();
  setX1array();
  charts1.value.setOption(chartsOption1.value, true);
};
const setChart2 = () => {
  setChart2Info();
  setY2value();
  setX2array();
  charts2.value.setOption(chartsOption2.value, true);
};
//修改
const updataItem = (row) => {
  editStatus.value = true;
  addData.value = row;
  addStatus.value = true;
};
//导入按钮
const onSuccess = (res) => {
  const { code, msg, data } = res;
  if (code != "200") {
    ElMessage.error(msg);
  } else {
    tableData.value = data.list;
    showData.value = { ...data, list: null };
    setChart1();
    setChart2();
    oldDataJSON.value = JSON.stringify(data.list);
    importStatus.value = true;
    ElMessage.success(msg);
  }
};

const value = ref(opOptions.value[0].remark);
const title = ref("调阻精度");

const showLable = ref("调阻");
const changeSelect = () => {
  setTimeout(() => {
    showLable.value = selectRef.value.currentPlaceholder;
    opOptions.value.forEach((item) => {
      if (item.dictLabel == showLable.value) {
        lableValue.value = item.dictValue;
      }
    });
    switch (showLable.value) {
      case "调阻":
        title.value = "调阻精度";
        break;
      case "粘片":
        title.value = "剪切强度";
        break;
      case "键合":
        title.value = "键合强度";
        break;
      default:
        title.value = "调阻精度";
        break;
    }
    getTableData();
    chartsOption1.value.title[3].text = `${title.value}的Xbar-R控制图`;
    // tableData.value.forEach((item) => {
    //   item.accuracy1 = 0;
    //   item.accuracy2 = 0;
    //   item.accuracy3 = 0;
    //   item.accuracy4 = 0;
    //   item.accuracy5 = 0;
    //   item.avg = 0;
    //   item.range = 0;
    // });
    setChart1();
    setChart2();
  }, 0);
};

// const searchData = computed(() =>
//   tableData.value.filter((item) => item.data.includes(searchValue.value))
// );
const selectRef = ref(null);
//保存
const changeEdit = async () => {
  if (disabled.value == false) {
    disabled.value = true;
  } else {
    const { data, code, msg } = await getHandleData([...tableData.value]);
    if (code == "200") {
      ElMessage.success(msg);
      tableData.value = data.list;
      showData.value = { ...data, list: null };
      setChart1();
      setChart2();
      oldDataJSON.value = JSON.stringify(data.list);
    }
    disabled.value = false;
  }
};
const cancelEdit = () => {
  tableData.value = JSON.parse(oldDataJSON.value);
  disabled.value = false;
};
const maxHeight = ref(null);
const maxWidth = ref(null);
const charts1 = shallowRef(null);
const charts2 = shallowRef(null);
const chartsOption1 = ref({
  title: [
    // {
    //   text: `x̄=${showData.value.avgAvg ? showData.value.avgAvg : "-"}`,
    //   right: "5%",
    //   top: "42%",
    //   textStyle: {
    //     fontSize: 15,
    //     color: "#333",
    //     fontWeight: 100,
    //   },
    // },
    {
      text: `${title.value}的Xbar-R控制图`,
      left: "40%",
    },
    {
      text: "样",
      left: "4%",
      top: "28%",
    },
    {
      text: "本",
      left: "4%",
      top: "35%",
    },
    {
      text: "均",
      left: "4%",
      top: "42%",
    },
    {
      text: "值",
      left: "4%",
      top: "49%",
    },
  ],
  grid: {
    right: "15%",
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  tooltip: {
    show: true,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: [],
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [
    {
      type: "line",
      lineStyle: {
        color: "rgb(26, 122, 240)",
      },
      symbolSize: 13,
      symbol: "circle",
      itemStyle: {
        color: (params) => {
          const dataIndex = params.dataIndex;
          if (dataIndex == 0) {
            return "rgb(26, 122, 240)";
          } else {
            return tableData.value[dataIndex - 1]
              ? tableData.value[dataIndex - 1].abnormal != "否"
                ? "red"
                : "rgb(26, 122, 240)"
              : "rgb(26, 122, 240)";
          }
        },
      },
      markLine: {
        silent: true,
        data: [
          {
            silent: false,
            yAxis: 0,
            label: {
              position: "end",
              formatter: `上限=${showData.value.avgMax ? showData.value.avgMax : "-"}`,
              color: "#333",
            },
            lineStyle: { type: "solid", color: "#333", width: 2 },
          },
          {
            silent: false,
            yAxis: 0,
            label: {
              position: "end",
              formatter: `下限=${showData.value.avgMin ? showData.value.avgMin : "-"}`,
              color: "#333",
            },
            lineStyle: {
              type: "solid",
              color: "#333",
              width: 2,
            },
          },
          {
            yAxis: 0,
            silent: false,
            label: {
              position: "end",
              formatter: ``,
              color: "#333",
            },
            lineStyle: {
              type: "solid",
              color: "#333",
              width: 2,
              type: "dashed",
            },
          },
        ],
      },
    },
  ],
});
const chartsOption2 = ref({
  title: [
    // {
    //   text: `R=${showData.value.rangeAvg ? showData.value.rangeAvg : "-"}`,
    //   right: "5%",
    //   top: "42%",
    //   textStyle: {
    //     fontSize: 15,
    //     color: "#333",
    //     fontWeight: 100,
    //   },
    // },
    {
      text: "样",
      left: "4%",
      top: "28%",
    },
    {
      text: "本",
      left: "4%",
      top: "35%",
    },
    {
      text: "极",
      left: "4%",
      top: "42%",
    },
    {
      text: "值",
      left: "4%",
      top: "49%",
    },
  ],
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: {
    right: "15%",
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: [],
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  tooltip: {
    show: true,
  },
  series: [
    {
      type: "line",
      lineStyle: {
        color: "rgb(26, 122, 240)",
      },
      symbolSize: 13,
      symbol: "circle",
      itemStyle: {
        color: (params) => {
          const dataIndex = params.dataIndex;
          if (dataIndex == 0) {
            return "rgb(26, 122, 240)";
          } else {
            return tableData.value[dataIndex - 1]
              ? tableData.value[dataIndex - 1].abnormal != "否"
                ? "red"
                : "rgb(26, 122, 240)"
              : "rgb(26, 122, 240)";
          }
        },
      },
      markLine: {
        silent: true,
        data: [
          {
            silent: false,
            yAxis: 0,
            label: {
              position: "end",
              formatter: `上限=${showData.value.rangeMax ? showData.value.rangeMax : "-"}`,
              color: "#333",
            },
            lineStyle: { type: "solid", color: "#333", width: 2 },
          },
          {
            silent: false,
            yAxis: 0,
            label: {
              position: "end",
              formatter: `下限=${showData.value.rangeMin ? showData.value.rangeMin : "-"}`,
              color: "#333",
            },
            lineStyle: { type: "solid", color: "#333", width: 2 },
          },
          {
            yAxis: 0,
            silent: false,
            label: {
              position: "end",
              formatter: ``,
              color: "#333",
            },
            lineStyle: {
              type: "solid",
              color: "#333",
              width: 2,
              type: "dashed",
            },
          },
        ],
      },
    },
  ],
});
const Height = ref(0);
const setHeight = () => {
  Height.value = document.querySelector(".databox").clientHeight;
  maxHeight.value = document.querySelector(".info").clientHeight;
  maxWidth.value = document.querySelector(".info").clientWidth;
};
const Y2value = ref([]);
const X2array = ref([]);
const setY2value = () => {
  Y2value.value = [];
  tableData.value.forEach((item) => {
    Y2value.value.push(item.range);
  });
  Y2value.value.unshift("");
  Y2value.value.push("");
  chartsOption2.value.series[0].data = Y2value.value;
};
const setX2array = () => {
  X2array.value = [];
  tableData.value.forEach((item, index) => {
    X2array.value.push(index + 1);
  });
  X2array.value.unshift("");
  X2array.value.push("");
  chartsOption2.value.xAxis[0].data = X2array.value;
};
//当新增或者编辑的确定操作
const submit = () => {
  if (editStatus.value == true) {
    updateSubmit();
  } else {
    addSubmit();
  }
};
const addSubmit = async () => {
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      const { data, code } = await addDatas({
        ...addData.value,
        yearStr: year.value,
        operation: lableValue.value,
      });
      if (code == "200") {
        ElMessage.success("添加成功！");
        reset();
        getTableData();
      }
    } else {
      ElMessage.error("请检查表单信息");
    }
  });
};
const deleteSubmit = async (id) => {
  const { data, code } = await deleteData({
    id,
  });
  if (code == "200") {
    ElMessage.success("删除成功！");
    getTableData();
  }
};
const updateSubmit = async () => {
  const { data, code } = await updateData({
    ...addData.value,
  });
  if (code == "200") {
    ElMessage.success("更新成功！");
    reset();
    getTableData();
  }
};
const reset = () => {
  addStatus.value = false;
  editStatus.value = false;
  addData.value = { ...resItem };
  currentOption.value = {
    total: 0,
    page: 0,
    limit: 12,
    pageSizes: [12],
    operation: value.value,
  };
};
const setView = () => {
  setHeight();
  charts1.value = echarts.init(document.getElementById("charts"));
  charts2.value = echarts.init(document.getElementById("charts1"));
  charts1.value.setOption(chartsOption1.value, true);
  charts2.value.setOption(chartsOption2.value, true);
};
onMounted(() => {
  setHeight();
  year.value = new Date().getFullYear() + "";
  opOptions.value.forEach((item) => {
    if (item.dictLabel == showLable.value) {
      lableValue.value = item.dictValue;
    }
  });
  getTableData();
  nextTick(() => {
    charts1.value = echarts.init(document.getElementById("charts"));
    charts2.value = echarts.init(document.getElementById("charts1"));
    charts1.value.setOption(chartsOption1.value, true);
    charts2.value.setOption(chartsOption2.value, true);
  });
  window.addEventListener("resize", setView);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", setView);
});
</script>

<style lang="scss" scoped>
.formStyle {
  width: 400px;
  margin: 20px auto;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: white;
  .infobox {
    width: 200px;
    .header {
      height: 120px;
      border-bottom: 2px solid #00000010;
      padding: 20px;
    }
    .body {
      padding: 20px;
    }
  }
  .databox {
    flex: 1;
    border-left: 2px solid #00000010;
    .box {
      height: 710px;
      padding: 5px 20px;
      display: flex;
      flex-direction: column;
      .illustrate {
        padding: 20px 60px;
      }
      .tableTitle {
        text-align: center;
        margin: 10px 0;
        padding-right: 40px;
      }
      .title {
        height: 30px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        justify-content: space-between;
        .btns {
          display: flex;
          align-items: center;
          .btn {
            height: 24px;
            font-size: 14px;
            margin: 0 5px;
          }
        }
      }
      .info {
        flex: 1;
        height: 300px;
      }
    }
  }
}
</style>