jonhon-mes-web/src/views/recorderList/index.vue

<template>
  <basic-container>
    <!-- 记录仪管理 -->
    <el-tabs v-model="tabPosition" class="demo-tabs" @tab-change="tabPositionChange">
      <el-tab-pane label="记录仪" name="recorder">
        <avue-crud
          :height="460"
          :option="option"
          :table-loading="loading"
          :data="data"
          v-model="form"
          v-model:page="recorderPage"
          ref="crud"
          :before-open="beforeOpen"
          @row-del="rowDel"
          @row-save="rowSave"
          @row-update="rowUpdate"
          @search-change="searchChange"
          @search-reset="searchReset"
          @selection-change="selectionChange"
          @current-change="currentChange"
          @size-change="sizeChange"
          @refresh-change="refreshChange"
          
        >
          <template #menu="{ row, index, size }">
            <el-button type="text" @click="showDetail(row)" v-if="tabPosition == 'recorder'"
              >明细</el-button
            >
            <el-button type="text" @click="rowEdit(row, index)">修改</el-button>
            <el-button type="text" @click="deleteRow(row)" v-if="tabPosition == 'recorder'"
              >删除</el-button
            >
          </template>
          <template #menu-left>
            <!-- <el-button
              type="primary"
              icon="el-icon-plus"
              @click="handleAdd"
              v-if="tabPosition == 'recorderLineSetting'"
              >新增</el-button
            > -->
            <el-button
              type="primary"
              icon="el-icon-setting"
              @click="setCycle"
              v-if="tabPosition == 'recorder'"
              >打包周期配置</el-button
            >
            <el-button
              type="danger"
              @click="handleDelete"
              plain
              v-if="tabPosition == 'recorderLineSetting'"
              >删除</el-button
            >
          </template>
        </avue-crud>
      </el-tab-pane>
      <el-tab-pane label="记录仪曲线配置" name="recorderLineSetting">
        <avue-crud
          :height="460"
          :option="option"
          :table-loading="loading"
          :data="data"
          v-model="form"
          v-model:page="recorderLinePage"
          ref="crud"
          @row-del="rowDel"
          @row-save="rowSave"
          @row-update="rowUpdate"
          @search-change="searchChange"
          @search-reset="searchReset"
          @selection-change="selectionChange"
          @current-change="currentChange"
          @size-change="sizeChange"
          @refresh-change="refreshChange"
        >
          <template #menu="{ row, index, size }">
            <el-button type="text" @click="showDetail(row)" v-if="tabPosition == 'recorder'"
              >明细</el-button
            >
            <el-button type="text" @click="rowEdit(row, index)">修改</el-button>
            <el-button type="text" @click="deleteRow(row)" v-if="tabPosition == 'recorder'"
              >删除</el-button
            >
          </template>
          <template #menu-left>
            <el-button
              type="primary"
              @click="handleAdd"
              v-if="tabPosition == 'recorderLineSetting'"
              >新增</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-setting"
              @click="setCycle"
              v-if="tabPosition == 'recorder'"
              >打包周期配置</el-button
            >
            <el-button
              type="danger"
              @click="handleDelete"
              plain
              v-if="tabPosition == 'recorderLineSetting'"
              >批量删除</el-button
            >
          </template>
        </avue-crud>
      </el-tab-pane>
      <el-tab-pane label="记录仪历史曲线" name="recorderHistoryLine">
        <el-form
          :inline="true"
          :model="searchForm"
          :rules="searchRules"
          ref="searchForm"
          class="demo-form-inline"
        >
          <el-form-item label="设备编码" prop="code">
            <el-input v-model="searchForm.code" placeholder="设备编码"></el-input>
          </el-form-item>
          <el-form-item label="统计日期" prop="queryDate">
            <el-date-picker
              v-model="searchForm.queryDate"
              type="daterange"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <!-- <el-date-picker v-model="form.queryDate" :default-time="['00:00:00', '23:59:59']" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" /> -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <div style="width: 100%; height: 70vh">
          <div style="width: 100%; height: 100%" ref="historyCurve"></div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog append-to-body title="详情" width="80%"  v-model="detailDialog" >
      <avue-crud
        class="detail-crud-option"
        :option="detailOption"
        :table-loading="detailLoading"
        :data="detailData"
        v-model="detailForm"
        v-model:page="detailPage"
        @current-change="detailCurrentChange"
        @size-change="detailSizeChange"
      >
      </avue-crud>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialog = false">取 消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog append-to-body title="打包周期配置" v-model="settingDialog">
      <el-form ref="setForm" :model="setForm" :rules="setRules" label-width="120px">
        <el-form-item label="记录仪打包周期" prop="cpcQuantity">
          <!-- <el-input placeholder="请输入记录仪打包周期" v-model="setForm.cpcQuantity"></el-input> -->
          <el-input-number
            v-model="setForm.cpcQuantity"
            controls-position="right"
            @change="handleChange"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item prop="cpcUnit">
          <el-radio-group v-model="setForm.cpcUnit" size="small">
            <el-radio :label="0" border>年</el-radio>
            <el-radio :label="1" border>月</el-radio>
            <el-radio :label="2" border>日</el-radio>
            <el-radio :label="3" border>时</el-radio>
            <el-radio :label="4" border>分</el-radio>
            <el-radio :label="5" border>秒</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="settingDialog = false">取 消</el-button>
          <el-button type="primary" @click="submitCycle">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog append-to-body title="新增" v-model="addDialog" width="80%">
      <div style="display: flex; align-items: center" v-if="addType == 'add'">
        <span>设备编号</span>
        <!-- <el-input style="width: 300px; margin-left: 10px" v-model="deviceCode" ></el-input> -->
        <el-select 
          style="width: 300px; margin-left: 10px"
          v-model="deviceCode"
          remote
          placeholder="请选择"
          :remote-method="remoteMethod"
          reserve-keyword
          clearable
          filterable
          :loading="selectLoading"
        >
          <el-option
            v-for="item in codeArr"
            :key="item.id"
            :label="item.crtCode"
            :value="item.crtCode"
          />
        </el-select>
      </div>
      <div style="margin: 10px 0" v-if="addType == 'add'">
        <el-button type="primary"  @click="insertEvent()">插入一行</el-button>
        <el-button plain type="danger" @click="remove">删除选择行</el-button>
      </div>
      <el-form 
        ref="tableForm" 
        :model="lineForm"  
        :rules="formRules"
        label-width="0px"
      >
        <!-- 全局错误提示 -->
        <div v-if="formError" class="error-message" style="color: #f56c6c; margin-bottom: 10px;">
          {{ formError }}
        </div>
        <el-table :data="lineForm.settingData" @select="selectChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="参数名称" prop="name" align="center">
            <template #header>
              <span><i style="color: red">*</i>参数名称</span>
            </template>
            <template #default="scope">
              <el-form-item :prop="`settingData[${scope.$index}].name`" :rules="formRules.name">
                <el-input style="margin-top:10px;" v-model="scope.row.name"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="参数显示名称" prop="showName" align="center">
            <template #default="scope">
              <el-form-item :prop="`settingData[${scope.$index}].showName`" :rules="formRules.showName">
                <el-input style="margin-top:10px;" v-model="scope.row.showName"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="是否显示曲线图" prop="showGraph" align="center">
            <template #default="scope">
              <el-form-item :prop="`settingData[${scope.$index}].showGraph`" :rules="formRules.showGraph">
                <div style="width:100%;display:flex;justify-content: center;">
                  <el-switch
                    style="margin-top:10px;"
                    v-model="scope.row.showGraph"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  >
                  </el-switch>
                </div>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="曲线X轴间隔" prop="crcX" align="center">
            <template #default="scope">
              <!-- <el-input v-model="scope.row.crcX"></el-input> -->
              <el-form-item :prop="`settingData[${scope.$index}].crcX`" :rules="formRules.crcX">
                <el-input
                  style="margin-top:10px;"
                  v-model.number="scope.row.crcX"
                  oninput="scope.row.crcX=scope.row.crcX.replace(/[^\d]/g,'')"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSave">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </basic-container>
</template>

<script>
import recorderColumnData from './js/recorderColumnData';
import { getRecorderList,addRecorder,updateRecorder,deleteRecorder,getRecorderDetail,addpackCycle,
getpackCycleList,updatepackCycle,getRecorderLineSetting,addRecorderLineSetting,getRecorderLineSettingDetail,
updateRecorderLineSetting,deleteRecorderLineSetting,getRecorderHistoryLine,getRecorderHistoryDetail } from '@/api/equiptManagement/recorderList';
export default {
  data() {
    return {
      searchForm: {},
      searchRules: {
        code: [{ required: true, message: '请输入设备编码', trigger: 'blur' }],
        queryDate: [{ required: true, message: '请选择统计日期', trigger: 'blur' }],
      },
      codeArr:[],
      formError:'',
      deviceCode: '',
      settingData: [],
      tabPosition: 'recorder',
      loading: false,
      data: [],
      form: {},
      lineForm:{
        settingData:[]
      },
      detailDialog: false,
      detailData: [],
      settingDialog: false,
      recorderPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      recorderLinePage: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      addType: 'add',
      addDialog: false,
      setForm: {},
      setRules: {
        cpcQuantity: [{ required: true, message: '请输入记录仪打包周期', trigger: 'blur' }],
      },
      option: {
        columnSort: true,
        tip: false,
        height: 'auto',
        align: 'center',
        calcHeight: 32,
        simplePage: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: false,
        selection: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        addBtnIcon: ' ',
        viewBtnIcon: ' ',
        delBtnIcon: ' ',
        editBtnIcon: ' ',
        addBtn: false,
        labelWidth: 120,
        searchLabelWidth: 120,
        menu: true,
        menuWidth: 200,
        dialogWidth: 600,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: true,
        gridBtn: false,
        searchShowBtn: false,
        showOverflowTooltip: true,
        searchLabelPosition: 'left',
        searchLabelPosition: 'left',
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: 'left',
        gridBtn: false,
        searchMenuPosition: 'right',
        column: [],
      },
      detailOption: {
        columnSort: true,
        tip: false,
        height: 450,
        align: 'center',
        calcHeight: 32,
        simplePage: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: true,
        selection: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        delBtnIcon: ' ',
        addBtn: false,
        labelWidth: 120,
        searchLabelWidth: 120,
        menu: false,
        menuWidth: 200,
        dialogWidth: 600,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: false,
        gridBtn: false,
        refreshBtn:false,
        columnBtn:false,
        searchShowBtn: false,
        showOverflowTooltip: true,
        searchLabelPosition: 'left',
        searchLabelPosition: 'left',
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: 'left',
        gridBtn: false,
        searchMenuPosition: 'right',
        column: [
          {
            label: '记录仪',
            prop: 'recorder',
            span: 24,
            labelWidth: 140,
            addDisplay: false,
            editDisplay: false,
            overflow: true,
          },
          {
            label: '使用时间',
            prop: 'recordDate',
            span: 24,
            labelWidth: 140,
            addDisplay: false,
            editDisplay: false,
            overflow: true,
          },
          {
            label: '数据信息',
            prop: 'memo',
            span: 24,
            labelWidth: 140,
            addDisplay: false,
            editDisplay: false,
            overflow: true,
          },
        ],
      },
      detailPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      lineQuery:{},
      selectLoading:false,
      detailForm: {},
      detailId:null,
      selectionList:[],
      // 统一校验规则：支持数组项校验
      formRules: {
        // 表格数据数组的整体校验（可选：如最少1行数据）
        settingData: [
          { 
            required: true, 
            message: '请至少添加一行数据', 
            trigger: 'submit',
            type: 'array' // 明确类型为数组
          },
          {
            validator: (rule, value, callback) => {
              if (value.length === 0) {
                callback(new Error('请至少添加一行数据'));
              } else {
                callback();
              }
            },
            trigger: 'submit'
          }
        ],

        // 数组中每一项的 name 字段校验
        name: [
          { required: true, message: '请输入参数名称', trigger: ['change', 'submit'] }
        ],
      }
    };
  },
  mounted() {
    this.tabPositionChange('recorder');
    // this.option.column = recorderColumnData[this.tabPosition];
  },
  methods: {
    // 查询
    onSubmit() {
      this.$refs.searchForm.validate(valid => {
        if (valid) {
          let params = {
            code: this.searchForm.code,
            startDate: this.searchForm.queryDate[0],
            endDate: this.searchForm.queryDate[1]
          }
          getRecorderHistoryLine(params).then(res =>{
            console.log('res-----------',res)
            let chartData = {
              yArray:res.data.data.yarray,
              crcX:res.data.data.x,
              xData:res.data.data.xdata
            }
            this.$nextTick(() => {
              this.setEchart(chartData);
            });
          })
          // let chartData = {
          //   yArray: [
          //     {
          //       showName: '压力',
          //       yData: [
          //         11.75, 1.0, 0.15, 1.9, 11.75, 0.15, 1.75, 1.9, 1.0, 1.75, 1.0, 0.15, 0.15, 1.9,
          //         1.0, 1.75, 1.9, 11.75, 1.75, 11.75, 11.75, 1.0, 0.15, 1.9, 11.75, 0.15, 1.75, 1.9,
          //         1.0, 1.75, 1.0, 0.15, 0.15, 1.9, 1.0, 1.75, 1.9, 11.75, 1.75, 11.75, 11.75, 1.0,
          //         0.15, 1.9, 11.75, 0.15, 1.75, 1.9, 1.0, 1.75, 1.0, 0.15, 0.15, 1.9, 1.0, 1.75,
          //         1.9, 11.75, 1.75, 11.75, 11.75, 1.0, 0.15, 1.9, 11.75, 0.15, 1.75, 1.9, 1.0, 1.75,
          //         1.0, 0.15, 0.15, 1.9, 1.0, 1.75, 1.9, 11.75, 1.75, 11.75,
          //       ],
          //       crcY: 0.25,
          //     },
          //     {
          //       showName: '温度',
          //       yData: [
          //         85.0, 500.0, 30.0, 500.0, 85.0, 30.0, 65.0, 500.0, 500.0, 65.0, 500.0, 30.0, 30.0,
          //         500.0, 500.0, 65.0, 500.0, 85.0, 65.0, 85.0, 85.0, 500.0, 30.0, 500.0, 85.0, 30.0,
          //         65.0, 500.0, 500.0, 65.0, 500.0, 30.0, 30.0, 500.0, 500.0, 65.0, 500.0, 85.0,
          //         65.0, 85.0, 85.0, 500.0, 30.0, 500.0, 85.0, 30.0, 65.0, 500.0, 500.0, 65.0, 500.0,
          //         30.0, 30.0, 500.0, 500.0, 65.0, 500.0, 85.0, 65.0, 85.0, 85.0, 500.0, 30.0, 500.0,
          //         85.0, 30.0, 65.0, 500.0, 500.0, 65.0, 500.0, 30.0, 30.0, 500.0, 500.0, 65.0,
          //         500.0, 85.0, 65.0, 85.0,
          //       ],
          //       crcY: 65.0,
          //     },
          //     {
          //       showName: '低真空',
          //       yData: [
          //         12.0, 7.8, 1.0, 7.5, 12.0, 1.0, 6.0, 7.5, 7.8, 6.0, 7.8, 1.0, 1.0, 7.5, 7.8, 6.0,
          //         7.5, 12.0, 6.0, 12.0, 12.0, 7.8, 1.0, 7.5, 12.0, 1.0, 6.0, 7.5, 7.8, 6.0, 7.8,
          //         1.0, 1.0, 7.5, 7.8, 6.0, 7.5, 12.0, 6.0, 12.0, 12.0, 7.8, 1.0, 7.5, 12.0, 1.0,
          //         6.0, 7.5, 7.8, 6.0, 7.8, 1.0, 1.0, 7.5, 7.8, 6.0, 7.5, 12.0, 6.0, 12.0, 12.0, 7.8,
          //         1.0, 7.5, 12.0, 1.0, 6.0, 7.5, 7.8, 6.0, 7.8, 1.0, 1.0, 7.5, 7.8, 6.0, 7.5, 12.0,
          //         6.0, 12.0,
          //       ],
          //       crcY: 1.0,
          //     },
          //     {
          //       showName: '高真空',
          //       yData: [
          //         1.875, 0.875, 0.101, 0.375, 1.875, 0.101, 0.875, 0.375, 0.875, 0.875, 0.875,
          //         0.101, 0.101, 0.375, 0.875, 0.875, 0.375, 1.875, 0.875, 1.875, 1.875, 0.875,
          //         0.101, 0.375, 1.875, 0.101, 0.875, 0.375, 0.875, 0.875, 0.875, 0.101, 0.101,
          //         0.375, 0.875, 0.875, 0.375, 1.875, 0.875, 1.875, 1.875, 0.875, 0.101, 0.375,
          //         1.875, 0.101, 0.875, 0.375, 0.875, 0.875, 0.875, 0.101, 0.101, 0.375, 0.875,
          //         0.875, 0.375, 1.875, 0.875, 1.875, 1.875, 0.875, 0.101, 0.375, 1.875, 0.101,
          //         0.875, 0.375, 0.875, 0.875, 0.875, 0.101, 0.101, 0.375, 0.875, 0.875, 0.375,
          //         1.875, 0.875, 1.875,
          //       ],
          //       crcY: 0.125,
          //     },
          //   ],
          //   xData: [
          //     '2024-03-16 12:01:17.0',
          //     '2024-03-16 12:13:11.0',
          //     '2024-03-16 12:20:12.0',
          //     '2024-03-16 12:20:25.0',
          //     '2024-03-16 12:21:27.0',
          //     '2024-03-16 12:30:00.0',
          //     '2024-03-16 12:30:27.0',
          //     '2024-03-16 12:40:15.0',
          //     '2024-03-16 12:43:10.0',
          //     '2024-03-16 12:50:17.0',
          //     '2024-03-16 16:13:11.0',
          //     '2024-03-16 16:20:12.0',
          //     '2024-03-16 16:30:00.0',
          //     '2024-03-16 16:40:15.0',
          //     '2024-03-16 16:43:10.0',
          //     '2024-03-16 16:50:17.0',
          //     '2024-03-16 17:20:25.0',
          //     '2024-03-16 17:21:27.0',
          //     '2024-03-16 17:30:27.0',
          //     '2024-03-16 17:41:17.0',
          //     '2024-03-17 12:01:17.0',
          //     '2024-03-17 12:13:11.0',
          //     '2024-03-17 12:20:12.0',
          //     '2024-03-17 12:20:25.0',
          //     '2024-03-17 12:21:27.0',
          //     '2024-03-17 12:30:00.0',
          //     '2024-03-17 12:30:27.0',
          //     '2024-03-17 12:40:15.0',
          //     '2024-03-17 12:43:10.0',
          //     '2024-03-17 12:50:17.0',
          //     '2024-03-17 16:13:11.0',
          //     '2024-03-17 16:20:12.0',
          //     '2024-03-17 16:30:00.0',
          //     '2024-03-17 16:40:15.0',
          //     '2024-03-17 16:43:10.0',
          //     '2024-03-17 16:50:17.0',
          //     '2024-03-17 17:20:25.0',
          //     '2024-03-17 17:21:27.0',
          //     '2024-03-17 17:30:27.0',
          //     '2024-03-17 17:41:17.0',
          //     '2024-03-18 12:01:17.0',
          //     '2024-03-18 12:13:11.0',
          //     '2024-03-18 12:20:12.0',
          //     '2024-03-18 12:20:25.0',
          //     '2024-03-18 12:21:27.0',
          //     '2024-03-18 12:30:00.0',
          //     '2024-03-18 12:30:27.0',
          //     '2024-03-18 12:40:15.0',
          //     '2024-03-18 12:43:10.0',
          //     '2024-03-18 12:50:17.0',
          //     '2024-03-18 16:13:11.0',
          //     '2024-03-18 16:20:12.0',
          //     '2024-03-18 16:30:00.0',
          //     '2024-03-18 16:40:15.0',
          //     '2024-03-18 16:43:10.0',
          //     '2024-03-18 16:50:17.0',
          //     '2024-03-18 17:20:25.0',
          //     '2024-03-18 17:21:27.0',
          //     '2024-03-18 17:30:27.0',
          //     '2024-03-18 17:41:17.0',
          //     '2024-03-19 12:01:17.0',
          //     '2024-03-19 12:13:11.0',
          //     '2024-03-19 12:20:12.0',
          //     '2024-03-19 12:20:25.0',
          //     '2024-03-19 12:21:27.0',
          //     '2024-03-19 12:30:00.0',
          //     '2024-03-19 12:30:27.0',
          //     '2024-03-19 12:40:15.0',
          //     '2024-03-19 12:43:10.0',
          //     '2024-03-19 12:50:17.0',
          //     '2024-03-19 16:13:11.0',
          //     '2024-03-19 16:20:12.0',
          //     '2024-03-19 16:30:00.0',
          //     '2024-03-19 16:40:15.0',
          //     '2024-03-19 16:43:10.0',
          //     '2024-03-19 16:50:17.0',
          //     '2024-03-19 17:20:25.0',
          //     '2024-03-19 17:21:27.0',
          //     '2024-03-19 17:30:27.0',
          //     '2024-03-19 17:41:17.0',
          //   ],
          //   crcX: 2,
          // };
          // this.$nextTick(() => {
          //   this.setEchart(chartData);
          // });
        }
      });
    },
    setEchart(data) {
      if (data.xData.length == 0 || data.yArray.length == 0) {
        return this.$message.warning('暂无数据');
      }
      const chart = this.$echarts.init(this.$refs.historyCurve);
      var colors = [
        '#5793f3',
        '#d14a61',
        '#675bba',
        '#C502F3',
        '#0102F3',
        '#FF2366',
        'red',
        'orange',
        'green',
        'blue',
        'purple',
        'pink',
        'orange',
        'blue',
      ];
      const yAxis = [];
      const series = [];

      let offsetArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

      const le = data.yArray.length;
      if (le >= 1 && le <= 2) {
        offsetArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
      } else if (le >= 3 && le <= 4) {
        offsetArr = [70, 70, 10, 10, 0, 0, 0, 0, 0, 0];
      } else if (le >= 5 && le <= 6) {
        offsetArr = [142, 142, 70, 70, 0, 0, 0, 0, 0, 0];
      } else if (le >= 7 && le <= 8) {
        offsetArr = [203, 203, 140, 140, 70, 70, 0, 0, 0, 0];
      } else if (le >= 9 && le <= 10) {
        offsetArr = [273, 273, 203, 203, 130, 130, 60, 60, 0, 0];
      }
      for (var index = 0; index < le; index++) {
        if (index % 2 == 0) {
          yAxis.push({
            type: 'value',
            name: data.yArray[index].showName,
            position: 'left',
            offset: offsetArr[le - index - 1],

            axisLine: {
              lineStyle: {
                color: colors[index],
              },
            },
          });
        } else {
          yAxis.push({
            type: 'value',
            name: data.yArray[index].showName,
            position: 'right',
            offset: offsetArr[le - index],

            axisLine: {
              lineStyle: {
                color: colors[index],
              },
            },
          });
        }
        series.push({
          name: data.yArray[index].showName,
          type: 'line',
          smooth: true,
          showSymbol: false,
          yAxisIndex: index,
          data: data.yArray[index].yData,
        });
      }
      const option = {
        color: colors,
        toolbox: {
          show: true,
          right: '4%',
          top: '-1%',
          feature: {
            saveAsImage: { show: true }, // 保存图表
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' },
        },
        grid: {
          top: '10%',
          right: parseInt((le + 1) / 2) * 5 + '%',
          left: parseInt((le + 1) / 2) * 5 + '%',
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true,
            },
            data: data.xData,
            boundaryGap: false,
            interval: 2, // 步长
            axisLabel: {
              formatter: function (value, index) {
                if (data.crcX > 1) {
                  if (parseInt(index % data.crcX) == 0) {
                    return value;
                  } else {
                    return '';
                  }
                }
                return value;
              },
              rotate: 25,
            },
          },
        ],
        yAxis: yAxis,
        series: series,
      };

      // 使用制定的配置项和数据显示图表
      chart.setOption(option, true);
      // 图表自适应
      window.addEventListener('resize', function () {
        chart.resize();
      });
    },
    searchChange(params, done){
      if (this.tabPosition == "recorder") {
        this.query = params;
        this.query.crtCode = this.query.recorder
        this.recorderPage.currentPage = 1;
        this.getRecorder()
        done()
      }else if(this.tabPosition == 'recorderLineSetting'){
        this.lineQuery = params;
        this.recorderLinePage.currentPage = 1
        this.getRecorderLine()
        done()
      }
    },
    remoteMethod(query) {
      if (query) {
        this.selectLoading = true
        getRecorderList({ crtCode: query }).then(res =>{
          this.codeArr = res.data.data.records
          this.selectLoading = false
        })
      } else {
        getRecorderList({ crtCode: '' }).then(res =>{
          this.codeArr = res.data.data.records
          this.selectLoading = false
        })
        // this.codeArr = []
      }
    },
    searchReset(){
      if (this.tabPosition == "recorder") {
        this.query = {}
        this.getRecorder()
      }else if(this.tabPosition == "recorderLineSetting"){
        this.lineQuery = {}
        this.getRecorderLine()
      }
    },
    handleDelete(){
      if(this.selectionList.length == 0){
        this.$message.error('请至少选择一条数据')
        return
      }
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if(this.tabPosition == "recorderLineSetting"){
          deleteRecorderLineSetting({
            ids:this.selectionList.map(item => item.id).join(',')
          }).then(res =>{
            if(res.data.code == 200){
              this.$message.success('删除成功')
              this.getRecorderLine()
            }
          })
        }
        
      })
      
    },
    selectionChange(list){
      this.selectionList = list
    },
    getRecorder() {
      getRecorderList({
        current: this.recorderPage.currentPage,
        size: this.recorderPage.pageSize,
        ...this.query,
      }).then(res => {
        this.data = res.data.data.records;
        this.recorderPage.total = res.data.data.total;
      });
    },
    getRecorderLine(){
      getRecorderLineSetting({
        current:this.recorderLinePage.currentPage,
        size:this.recorderLinePage.pageSize,
        ...this.lineQuery
      }).then(res =>{
        this.data = res.data.data.records
        this.recorderLinePage.total = res.data.data.total
      })
    },
    // tab切换
    tabPositionChange(val) {
      console.log('val----------------',val);
      console.log('tabPosition----------------',this.tabPosition);
      this.option.column = recorderColumnData[val];
      if (this.tabPosition == 'recorderLineSetting') {
        this.option.addBtn = false;
        this.option.menuAlign = "center"
        this.option.menuWidth = 70
        this.option.selection = true
        this.getRecorderLine()
      } else if (this.tabPosition == 'recorder') {
        this.option.addBtn = true
        this.option.menuWidth = 150
        this.option.selection = false
        this.getRecorder();
      }
    },
    insertEvent() {
      const record = { _select: false };
      this.lineForm.settingData.push(record);
    },
    selectChange(list, row) {
      row._select = !row._select;
    },
    rowSave(row, done, loading){
      if(this.tabPosition == "recorder"){
        let params = {
          crtCode:row.crtCode,
          memo:row.memo
        }
        addRecorder(params).then(res =>{
          if(res.data.code == 200){
            this.$message.success('新增成功')
            done()
            this.getRecorder()
          }
        }).catch(err =>{
          done()
        })
      }
    },
    rowUpdate(row, index, done, loading){
      if(this.tabPosition == "recorder"){
        let params = {
          id:row.id,
          crtCode:row.crtCode,
          memo:row.memo
        }
        updateRecorder(params).then(res =>{
          if(res.data.code == 200){
            this.$message.success('修改成功')
            done()
            this.getRecorder()
          }
        })
      }
    },
    beforeOpen(done, type){
      console.log('type=============',type)
      if (['edit', 'view'].includes(type)) {
        getRecorderDetail({ id: this.form.id }).then(res => {
          this.form = res.data.data;
          done()
        });
      }else if(['add'].includes(type)){
        done()
      }
    },
    remove() {
      let arr = this.lineForm.settingData.filter(item => item._select);
      if (arr.length != 0) {
        this.$confirm('确定将选择数据删除?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          if (this.rowId) {
            let deleteData = this.lineForm.settingData.filter(item => item._select);
            this.deleteTidArr = deleteData.filter(item => item.tidId);
          }
          let deleteArr = this.lineForm.settingData.filter(item => !item._select);
          this.lineForm.settingData = deleteArr;
        });
      } else {
        this.$message.error('请至少选择一条数据进行操作！');
      }
    },
    closeDialog(){
      this.formError = ''
      this.$refs.tableForm?.resetFields();
      this.lineForm.settingData = []
      this.addDialog = false
    },
    handleSave() {
      this.formError = '';
      if(this.deviceCode == '' && this.addType == 'add'){
        this.$message.error('设备编码不能为空')
        return
      }

      // 调用单个 Form 的校验方法
      this.$refs.tableForm.validate((isValid, invalidFields) => {
        if (!isValid) {
          // 校验失败：显示提示并滚动到第一个错误字段
          this.formError = '存在未完善的字段，请检查表格中的红色提示';
          
          this.$nextTick(() => {
            // 找到第一个错误字段并滚动到视图
            const firstError = document.querySelector('.el-form-item.is-error');
            if (firstError) {
              firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
          });
          return;
        }
        this.lineForm.settingData.map(item =>{
          item.code = this.addType == 'add' ? this.deviceCode : item.code
          item.showGraph = item.showGraph == true ? 1 : 0
        })
        if(this.addType == 'add'){
          addRecorderLineSetting({
            code:this.deviceCode, 
            recorderCompareEntities:this.lineForm.settingData
          }).then(res =>{
            if(res.data.code == 200){
              this.$message.success('新增成功')
              this.getRecorderLine()
              this.addDialog = false;
            }
          })
        }else{
          updateRecorderLineSetting({...this.lineForm.settingData[0]}).then(res =>{
            if(res.data.code == 200){
              this.$message.success('修改成功')
              this.getRecorderLine()
              this.addDialog = false;
            }
          })
        }
        
        // this.addDialog = false;
      })
    },
    rowEdit(row, index) {
      if (this.tabPosition == 'recorder') {
        this.$refs.crud.rowEdit(row, index);
      } else if (this.tabPosition == 'recorderLineSetting') {
        this.lineForm.settingData = []
        this.addType = 'edit';
        getRecorderLineSettingDetail({
          id:row.id
        }).then(res =>{
          console.log('res00000000000000000',res)
          res.data.data.showGraph = res.data.data.showGraph == 1 ? true : false
          this.lineForm.settingData[0] = res.data.data
          setTimeout(() =>{
            this.addDialog = true;
          },100)
        })
      }
    },
    showDetail(row) {
      // this.detailId = row.id;
      this.detailId = row.crtCode;
      this.loadData(row);
      // getRecorderDetail({id:row.id}).then(res =>{
      //   console.log('res----------------',res)
      // })
    },
    setCycle() {
      getpackCycleList({
        current:1,
        size:10
      }).then(res =>{
        this.setForm = res.data.data.records.length > 0 ? res.data.data.records[0] : {}
        this.settingDialog = true;
      })
    },
    handleAdd() {
      this.addType = 'add';
      this.addDialog = true;
    },
    deleteRow(row) {
      this.$confirm('确定删除本条数据?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        if(this.tabPosition == 'recorder'){
          deleteRecorder({ids:row.id}).then(res => { 
            if(res.data.code == 200){
              this.$message.success('删除成功')
              this.getRecorder()
            }
          });
        }
      });
    },
    submitCycle() {
      this.$refs.setForm.validate(valid => {
        if (valid) {
          if(!this.setForm.id){
            addpackCycle(this.setForm).then(res => { 
              if(res.data.code == 200){
                this.$message.success('保存成功')
                this.settingDialog = false;
              }
            });
          }else{
            updatepackCycle(this.setForm).then(res =>{
              if(res.data.code == 200){
                this.$message.success('保存成功')
                this.settingDialog = false;
              }
            })
          }
          
        }
      });
    },
    loadData(row) {
      getRecorderHistoryDetail({
        // id:this.detailId,
        recorder:this.detailId,
        current:this.detailPage.currentPage,
        size:this.detailPage.pageSize
      }).then(res =>{
        console.log('res',res)
        this.detailData = res.data.data.records
        this.detailPage.total = res.data.data.total
        this.detailDialog = true;
      })
    },
    detailCurrentChange(currentPage){
      this.detailPage.currentPage = currentPage
      this.loadData()
    },
    detailSizeChange(pageSize){
      this.detailPage.pageSize = pageSize
      this.loadData()
    },
    onLoad() {
      this.data = [
        { crtCode: '001', memo: '' },
        { crtCode: '002', memo: '' },
        { crtCode: '003', memo: '' },
      ];
      this.page.total = this.data.length;
    },
  },
};
</script>

<style lang="scss">
.detail-crud-option{
    .avue-crud__header{
        min-height: 0;
    }
}
</style>