<script lang="ts">
export default {
  name: 'maintenancePlan'
};
</script>
<script setup lang="ts">
// 制定检修计划
import { ref, onMounted, nextTick } from 'vue';
import { ElMessageBox, ElMessage, ElTable } from 'element-plus';
import { getTreelist } from '@/api/linksignal';
import { getTreefirst } from '@/api/device';
import { stationOnline } from '@/api/substation';
import { useAppStore } from '@/store/modules/app';
import {
  getTaskList,
  addExaminePlan,
  updateExaminePlan,
  deleteExaminePlan,
  getBindInfoById,
  setExaminePlanStatus,
  getSubstationBayByArea,
  getComponentByBayId,
  getBindExamineDevice
} from '@/api/task';
import { getRobotAndUavList, getBayTree } from '@/api/makeTask';
import { getdevicedata } from '@/api/device';
import { getTreeList } from '@/api/linksignal';
import { getDeviceByType, getaccType, getMainEquipment } from '@/api/device';
import Page from '@/components/Pagination/page.vue';
import Eldialog from '@/components/seccmsdialog/eldialog.vue';

// 列表页面方法和变量
//时间转换
function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month =
      date.getMonth() + 1 < 10
        ? '0' + (date.getMonth() + 1)
        : date.getMonth() + 1;
    date.getMonth() + 1 < 10
      ? '0' + (date.getMonth() + 1)
      : date.getMonth() + 1;
    var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
    var minutes =
      date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
    var seconds =
      date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    // 拼接
    return (
      year +
      '-' +
      month +
      '-' +
      day +
      ' ' +
      hours +
      ':' +
      minutes +
      ':' +
      seconds
    );
  }
}
//表格多选禁用
function checkSelectable(row: any) {
  return row.enable == 0;
}
const loading = ref(false);
const planLoading = ref(false);

const tableData: any = ref();
const StatusData: any = ref();
StatusData.value = [
  {
    value: '0',
    label: '未关联'
  },
  {
    value: '1',
    label: '已关联'
  }
];
const paramstable = ref({
  // 列表查询参数+页码
  size: 10,
  current: 1,
  configName: '',
  bindStatus: ''
});
const total = ref(); // 总页数
function getData() {
  // 获取列表方法
  const params = {
    size: paramstable.value.size,
    current: paramstable.value.current,
    configName: paramstable.value.configName,
    bindStatus: paramstable.value.bindStatus
  };
  planLoading.value = true;
  getTaskList(params)
    .then((res: any) => {
      planLoading.value = false;
      tableData.value = res.data.records;
      tableData.value.forEach((row: any) => {
        row.enable = row.enable.toString();
      });
      total.value = res.data.total;
      paramstable.value.size = res.data.size;
      paramstable.value.current = res.data.current;
    })
    .catch(() => {
      planLoading.value = false;
    });
}
//重置
function resetting() {
  paramstable.value = {
    size: 10,
    current: 1,
    configName: '',
    bindStatus: ''
  };
  getData();
}

function switchChange(row: any) {
  //状态改变-点击是否有效方法
  const elMessage = ref('');
  if (row.enable == '0') {
    elMessage.value = '确定将此检修计划设置为无效吗？';
  } else if (row.enable == '1') {
    elMessage.value = '确定将此检修计划设置为有效吗？';
  }
  ElMessageBox.confirm(elMessage.value, '提示信息', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      if (row.isStationFlag == 1) {
        const paramsa = {
          stationcode: row.stationCode
        };
        stationOnline(paramsa).then((res: any) => {
          if (res == 1) {
            let paramsa = {
              enable: row.enable,
              id: row.id
            };
            setExaminePlanStatus(paramsa).then((res: any) => {
              if (res.code == '0') {
                getData();
                ElMessage({
                  type: 'success',
                  message: '改变成功'
                });
              }
            });
          } else if (res == 0) {
            ElMessage({
              type: 'error',
              message: '当前变电站节点不在线，请稍后重试！'
            });
            getData();
            return false;
          }
        });
      } else {
        let params = {
          enable: row.enable,
          id: row.id
        };
        setExaminePlanStatus(params).then((res: any) => {
          if (res.code == '0') {
            getData();
            ElMessage({
              type: 'success',
              message: '改变成功'
            });
          }
        });
      }
    })
    .catch(() => {
      if (row.enable == "0") {
        row.enable = "1"
      } else {
        row.enable = "0"
      }
      // getData();
    });
}
//列表删除
function handleDelete(row: any) {
  ElMessageBox.confirm('确定删除此检修计划吗？', '删除提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const params = {
      id: row.id
    };
    deleteExaminePlan(params).then((res: any) => {
      if (res.code == '0') {
        getData();
        ElMessage({
          message: '删除成功',
          type: 'success'
        });
      }
    });
  });
}
//多选删除
function delClick() {
  for (let i = 0; i < deviceInfos.value.length; i++) {
    if (deviceInfos.value[i].enable == 1) {
      ElMessage({
        message: '已选择的检修计划中包含有效数据，请重新选择。',
        type: 'warning'
      });
      return false;
    }
  }
  ElMessageBox.confirm('确定删除已选择的检修计划吗？', '删除提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const deviceIds: any = ref([]);
    deviceInfos.value.forEach((res: any) => {
      deviceIds.value.push(res.id);
    });
    const params = {
      id: deviceIds.value.toString()
    };
    deleteExaminePlan(params).then((res: any) => {
      if (res.code == '0') {
        getData();
        deviceIds.value = [];
        ElMessage({
          message: '删除成功',
          type: 'success'
        });
      }
    });
  });
}
//表格多选
const deviceInfos: any = ref([]);
function handleSelectionChange(val: any) {
  deviceInfos.value = val;
}
//form表单ref
const infoForm = ref();
//初始化检修计划对象
const examineInfo: any = ref({
  stationId: '',
  configCode: '',
  configName: '',
  startTime: '',
  endTime: '',
  deviceLevel: '',
  deviceList: '',
  examineComment: '',
  robotCode: '',
});
const startCheckTime = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('开始时间不能为空'));
  }
  if (examineInfo.value.endTime != '') {
    let startDate = new Date(examineInfo.value.endTime).getTime();
    let endDate = new Date(value).getTime();
    if (endDate > startDate) {
      callback(new Error('开始时间不能大于开始时间'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

const endCheckTime = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('结束时间不能为空'));
  }
  if (examineInfo.value.startTime != '') {
    let startDate = new Date(examineInfo.value.startTime).getTime();
    let endDate = new Date(value).getTime();
    if (endDate < startDate) {
      callback(new Error('结束时间不能小于开始时间'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

const rules = ref({
  // 新增或修改检修计划校验
  stationId: [{ required: true, message: '请选择变电站', trigger: 'blur' }],
  configCode: [
    { required: true, message: '检修计划编码不能为空', trigger: 'blur' }, { validator: stringlength1, trigger: 'blur' }
  ],
  configName: [
    { required: true, message: '检修计划名称不能为空', trigger: 'blur' }, { validator: stringlength, trigger: 'blur' }
  ],
  startTime: [{ required: true, validator: startCheckTime, trigger: 'blur' }],
  endTime: [{ required: true, validator: endCheckTime, trigger: 'blur' }]
});
//区域名称长度
function stringlength(rule: any, value: any, callback: any) {
  if (value.length > 100) {
    return callback(new Error('字符最大长度不超过100'))
  }
  callback()
}
function stringlength1(rule: any, value: any, callback: any) {
  if (value.length > 40) {
    return callback(new Error('字符最大长度不超过40'))
  }
  callback()
}
const dialogVisible = ref(false); // 初始化编辑页面是否关闭参数
const title = ref(''); // 初始化编辑页面标题
const isdouble = ref(false); // 防止连击变量
function addClick() {
  getrobotUAV()
  // 弹出新增页面方法
  examineInfo.value = {
    stationId: '',
    configCode: '',
    configName: '',
    startTime: '',
    endTime: '',
    deviceLevel: '',
    deviceList: '',
    examineComment: '',
    robotCode: '',
  };
  title.value = '新增检修计划';
  tabs.value = 0;
  isdouble.value = false;
  dialogVisible.value = true;
}

function handleEdit(row: any, num: any) {
  getrobotUAV()
  // 弹出修改页面方法
  tabs.value = num;
  title.value = '修改检修计划';
  resultData.value = [];
  isdouble.value = false;
  dialogVisible.value = true;
  const infoall = JSON.parse(JSON.stringify(row));
  examineInfo.value = infoall;
  examineInfo.value.lastmodifydate = '';
  const params = {
    id: examineInfo.value.id,
    deviceLevel: examineInfo.value.deviceLevel
  };
  if (
    examineInfo.value.deviceLevel == 0 ||
    examineInfo.value.deviceLevel == undefined ||
    examineInfo.value.deviceLevel == ''
  ) {
    return;
  }
  getBindInfoById(params).then((res: any) => {
    resultData.value = res.data;
  });
  // mainChange(row.mainDeviceId)
}
function confirmClick(formEl: any) {
  //新增或修改点击确认方法
  formEl.validate((valid: any) => {
    if (valid) {
      if (isdouble.value == true) {
        return;
      }
      isdouble.value = true;
      optionSelect.value.forEach((res: any) => {
        if (res.stationId == examineInfo.value.stationId) {
          examineInfo.value.stationId = res.stationId;
          examineInfo.value.stationCode = res.stationCode;
          examineInfo.value.stationName = res.stationName;
        }
      });
      if (examineInfo.value.id) {
        updateExaminePlan(examineInfo.value)
          .then((res: any) => {
            if (res.code == '0') {
              dialogVisible.value = false;
              ElMessage({
                type: 'success',
                message: '修改成功'
              });
              getData();
            } else {
              isdouble.value = false;
            }
          })
          .catch(() => {
            isdouble.value = false;
          });
      } else {
        addExaminePlan(examineInfo.value)
          .then((res: any) => {
            if (res.code == '0') {
              ElMessage({
                type: 'success',
                message: '添加成功'
              });
              dialogVisible.value = false;
              getData();
            } else {
              isdouble.value = false;
            }
          })
          .catch(() => {
            isdouble.value = false;
          });
      }
    }
  });
}

function handleClose() {
  // 关闭编辑页面框
  if (infoForm.value != null) infoForm.value.resetFields();
  dialogVisible.value = false;
}

/*
 **
 **新增编辑页面方法和变量
 **
 **
 */
const resultData: any = ref([]); // 初始化关联结果数组
const tabs = ref(0); // 初始化tab切换变量
function tabClick(num: any) {
  // tab切换方法
  tabs.value = num;
  // getData();
}
function relevanceClick(num: any) {
  // 点击显示关联页面弹出框
  if (examineInfo.value.stationId == '') {
    ElMessage({
      message: '请选择变电站',
      type: 'warning'
    });
    return false;
  }
  deviceLevel.value = num;
  retrievalName.value = '';
  if (num == 1) {
    trendsName.value = '请输入间隔名称';
    publicTitle.value = '关联间隔';
    rowRelevanceKey.value = 'bayId';
    getIntervalTree(examineInfo.value.stationId);
  } else if (num == 2) {
    trendsName.value = '请输入主设备名称';
    publicTitle.value = '关联主设备';
    rowRelevanceKey.value = 'mainDeviceId';
    getTree(examineInfo.value.stationId);
  } else if (num == 4) {
    publicTitle.value = '关联部件';
    trendsName.value = '请输入部件名称';
    rowRelevanceKey.value = 'componentId';
    getTree(examineInfo.value.stationId);
  } else if (num == 3) {
    publicTitle.value = '关联巡视点位';
    trendsName.value = '请输点位名称';
    rowRelevanceKey.value = 'deviceId';
    getTree(examineInfo.value.stationId);
  }

  relevanceVisible.value = true;
  nextTick(() => {
    // getSelect()
    resultData.value = [];
    if (deviceLevel.value == examineInfo.value.deviceLevel) {
      resultData.value.forEach((row: any) => {
        multipleTableRef.value!.toggleRowSelection(row, undefined);
      });
    }
  });
}
function delPublic(index: number) {
  // 删除关联结果列表信息方法
  resultData.value.splice(index, 1);
  const ids: any = ref([]);
  resultData.value.forEach((res: any) => {
    if (deviceLevel.value == 1) {
      ids.value.push(res.bayId);
    }
    if (deviceLevel.value == 2) {
      ids.value.push(res.mainDeviceId);
    }
    if (deviceLevel.value == 4) {
      ids.value.push(res.componentId);
    }
    if (deviceLevel.value == 3) {
      ids.value.push(res.deviceId);
    }
  });
  examineInfo.value.deviceList = ids.value.join(',');
  if (resultData.value.length == 0) {
    examineInfo.value.deviceLevel = 0;
    examineInfo.value.enable = '0';
    examineInfo.value.stationId = '';
    examineInfo.value.stationCode = '';
    examineInfo.value.stationName = '';
  }
}

/*
 **
 **关联页面方法和变量
 **
 **
 */
const isCircuitChanger = ref(true); // 初始化是否是第一次加载
const trendsName = ref(''); // 初始化检索提示变量
const loading3 = ref(false); // 加载列表loading
const rowRelevanceKey = ref(''); // 初始化列表id
interface Tree {
  // 初始化树形控件
  [x: string]: any;
  label: string;
  children?: Tree[];
}
const defaultProps = {
  // 初始化树参数名称
  children: 'children',
  label: 'name'
};
const orgId = ref(''); // 初始化选中树ID变量
function handleNodeClick(data: Tree, node: any) {
  // 导航树点击事件
  if (data.children) {
    node.isCurrent = false;
    currentNodeKey.value = '';
    nextTick(() => {
      currentNodeKey.value = orgId.value;
    });
  } else {
    if (deviceLevel.value == 1) {
      orgId.value = data.areaId;
    } else {
      orgId.value = data.bayId;
    }
    getPublicData();
  }
}
const treedata: any = ref([]); // 初始化树数组
const treeRef = ref(); // 树的ref
const treeloading = ref(true); // 加载树loading
const currentNodeKey = ref(''); // 初始化树节点
const stationId = ref(''); // 初始化变电站id变量
const optionSelect: any = ref([]); // 初始化变电站数组
function getTree(val: any) {
  // 获取区间树的方法
  const params = {
    stationId: val
  };
  publicRelevanceData.value = [];
  getBayTree(params)
    .then((res: any) => {

      treedata.value = res.data;
      if (res.data.length == 0) {
        publicRelevanceData.value = [];
        treeloading.value = false;
        return;
      }
      treeloading.value = false;
      if (
        isCircuitChanger.value == true &&
        resultData.value.length != 0 &&
        examineInfo.value.deviceLevel != 1
      ) {
        orgId.value = resultData.value[0].bayId;
      } else {
        orgId.value = res.data[0].children[0].children[0].bayId;
      }

      nextTick(() => {
        getPublicData();
        treeRef.value?.setCurrentKey(orgId.value);
      });
    })
    .catch((error: any) => {
      treeloading.value = false;
    });
}
function getIntervalTree(val: any) {
  // 获取区域树的方法
  const params = {
    stationId: val
  };
  publicRelevanceData.value = [];
  getTreeList(params)
    .then((res: any) => {
      treedata.value = res.data;
      treeloading.value = false;
      if (res.data.length == 0) {
        publicRelevanceData.value = [];
        treeloading.value = false;
        return;
      }
      if (
        isCircuitChanger.value == true &&
        resultData.value.length != 0 &&
        examineInfo.value.deviceLevel == 1
      ) {
        orgId.value = resultData.value[0].areaId;
      } else {
        orgId.value = res.data[0].children[0].areaId;
      }

      nextTick(() => {
        getPublicData();
        treeRef.value?.setCurrentKey(orgId.value);
      });
    })
    .catch((error: any) => {
      treeloading.value = false;
    });
}
const EquipmentTypeData: any = ref([]); // 初始化主设备选项框数组
function getDict() {
  // 获取数组字典方法
  const params = {
    dictcode: 'EquipmentType'
  };
  getDeviceByType(params).then((res: any) => {
    EquipmentTypeData.value = res.data;
  });
}
//弹出框表格多选
const publicIdArr: any = ref([]); // 初始化列表选中数组对象
function publicSelectionChange(val: any) {
  // 列表选中数组对象方法
  publicIdArr.value = val;
  const flag = ref(false);
  if (resultData.value.length != 0) {
    for (var i = 0; i < resultData.value.length; i++) {
      for (var j = 0; j < val.length; j++) {
        if (resultData.value[i].stationCode == val[j].stationCode) {
          publicIdArr.value = val;
        } else {
          ElMessageBox.confirm(
            '该操作会解除上一变电站所绑定的点位信息，是否继续？',
            '删除提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          )
            .then(() => {
              resultData.value = [];
              publicIdArr.value = val;
            })
            .catch(() => {
              multipleTableRef.value!.clearSelection();
            });
          flag.value = true;
          if (flag.value == true) {
            return false;
          }
        }
      }
    }
  } else {
    publicIdArr.value = val;
  }
}
const publicIds: any = ref([]); // 初始化选中id变量
const deviceLevel: any = ref(''); // 关联设备
function addPublic() {
  // 添加关联列表方法
  if (publicIdArr.value.length == 0) {
    ElMessage({
      message: '请先勾选主设备，否则无法点击添加按钮！',
      type: 'warning'
    });
    return;
  }
  if (
    examineInfo.value.deviceLevel != deviceLevel.value &&
    examineInfo.value.deviceLevel != undefined &&
    examineInfo.value.deviceLevel != 0
  ) {
    let TemporaryName = ['间隔', '主设备', '部件', '巡视点位'];
    ElMessageBox.confirm(
      '当前已有关联的' +
      TemporaryName[Number(examineInfo.value.deviceLevel) - 1] +
      '信息,您确定要替换关联吗？',
      '关联提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(() => {
      publicIds.value = [];
      // resultData.value = []
      // publicIdArr.value.forEach((res: any) => {
      //     if (deviceLevel.value == 1) {
      //         publicIds.value.push(res.bayId)
      //     }
      //     if (deviceLevel.value == 2) {
      //         publicIds.value.push(res.mainDeviceId)
      //     }
      //     if (deviceLevel.value == 4) {
      //         publicIds.value.push(res.componentId)
      //     }
      //     if (deviceLevel.value == 3) {
      //         publicIds.value.push(res.deviceId)
      //     }
      // })
      publicIdArr.value.forEach((res: any) => {
        resultData.value.push(res);
      });
      for (var i = 0; i < resultData.value.length - 1; i++) {
        for (var j = i + 1; j < resultData.value.length; j++) {
          if (deviceLevel.value == 1) {
            if (resultData.value[i].bayId == resultData.value[j].bayId) {
              resultData.value.splice(j, 1);
              j--;
            }
          }
          if (deviceLevel.value == 2) {
            if (
              resultData.value[i].mainDeviceId ==
              resultData.value[j].mainDeviceId
            ) {
              resultData.value.splice(j, 1);
              j--;
            }
          }
          if (deviceLevel.value == 4) {
            if (
              resultData.value[i].componentId ==
              resultData.value[j].componentId
            ) {
              resultData.value.splice(j, 1);
              j--;
            }
          }
          if (deviceLevel.value == 3) {
            if (resultData.value[i].deviceId == resultData.value[j].deviceId) {
              resultData.value.splice(j, 1);
              j--;
            }
          }
        }
      }
      resultData.value.forEach((row: any) => {
        if (deviceLevel.value == 1) {
          publicIds.value.push(row.bayId);
        }
        if (deviceLevel.value == 2) {
          publicIds.value.push(row.mainDeviceId);
        }
        if (deviceLevel.value == 4) {
          publicIds.value.push(row.componentId);
        }
        if (deviceLevel.value == 3) {
          publicIds.value.push(row.deviceId);
        }
      });
      ElMessage({
        type: 'success',
        message: '添加成功'
      });
      // resultData.value = publicIdArr.value
      examineInfo.value.deviceList = publicIds.value.join(',');
      examineInfo.value.deviceLevel = deviceLevel.value;
      multipleTableRef.value!.clearSelection();
      relevanceVisible.value = false;
      publicRelevanceData.value = [];
    });
  } else {
    publicIds.val = [];
    publicIdArr.value.forEach((res: any) => {
      resultData.value.push(res);
    });
    for (var i = 0; i < resultData.value.length - 1; i++) {
      for (var j = i + 1; j < resultData.value.length; j++) {
        if (deviceLevel.value == 1) {
          if (resultData.value[i].bayId == resultData.value[j].bayId) {
            resultData.value.splice(j, 1);
            j--;
          }
        }
        if (deviceLevel.value == 2) {
          if (
            resultData.value[i].mainDeviceId == resultData.value[j].mainDeviceId
          ) {
            resultData.value.splice(j, 1);
            j--;
          }
        }
        if (deviceLevel.value == 4) {
          if (
            resultData.value[i].componentId == resultData.value[j].componentId
          ) {
            resultData.value.splice(j, 1);
            j--;
          }
        }
        if (deviceLevel.value == 3) {
          if (resultData.value[i].deviceId == resultData.value[j].deviceId) {
            resultData.value.splice(j, 1);
            j--;
          }
        }
      }
    }
    resultData.value.forEach((row: any) => {
      if (deviceLevel.value == 1) {
        publicIds.value.push(row.bayId);
      }
      if (deviceLevel.value == 2) {
        publicIds.value.push(row.mainDeviceId);
      }
      if (deviceLevel.value == 4) {
        publicIds.value.push(row.componentId);
      }
      if (deviceLevel.value == 3) {
        publicIds.value.push(row.deviceId);
      }
    });
    // publicIdArr.value.forEach((res: any) => {
    //     if (deviceLevel.value == 1) {
    //         publicIds.value.push(res.bayId)
    //     }
    //     if (deviceLevel.value == 2) {
    //         publicIds.value.push(res.mainDeviceId)
    //     }
    //     if (deviceLevel.value == 4) {
    //         publicIds.value.push(res.componentId)
    //     }
    //     if (deviceLevel.value == 3) {
    //         publicIds.value.push(res.deviceId)
    //     }

    // })
    // resultData.value = publicIdArr.value
    examineInfo.value.deviceList = publicIds.value.join(',');
    examineInfo.value.deviceLevel = deviceLevel.value;
    multipleTableRef.value!.clearSelection();

    ElMessage({
      type: 'success',
      message: '添加成功'
    });
    relevanceVisible.value = false;
    publicRelevanceData.value = [];
  }
}
const deviceName = ref(''); // 初始化部件名称变量
const retrievalName = ref(''); // 初始化检索名称变量
const DeviceType = ref(''); // 初始化设备类型变量
function resetPublic() {
  //重置
  retrievalName.value = '';
  DeviceType.value = '';
  mainDeviceId.value = '';
  componentId.value = '';
  getPublicData();
}
const publicRelevanceData: any = ref(); // 初始化关联列表数组-间隔、住设备、部件、巡视点位
function getPublicData() {
  // 获取关联列表-间隔、住设备、部件、巡视点位
  loading3.value = true;
  if (deviceLevel.value == 1) {
    trendsName.value = '请输入间隔名称';
    const params = {
      areaId: orgId.value,
      bayName: retrievalName.value
    };
    getSubstationBayByArea(params)
      .then((res: any) => {
        publicRelevanceData.value = res.data;
        loading3.value = false;
        if (examineInfo.value.deviceLevel == deviceLevel.value) {
          resultData.value.forEach((row: any) => {
            res.data.forEach((items: any) => {
              if (items.bayId == row.bayId) {
                nextTick(() => {
                  multipleTableRef.value.toggleRowSelection(items, true);
                });
              }
            });
          });
        }
      })
      .catch(() => {
        loading3.value = false;
      });
  }
  if (deviceLevel.value == 2) {
    trendsName.value = '请输入主设备名称';
    const params = {
      bayId: orgId.value,
      mainDeviceName: retrievalName.value,
      deviceType: DeviceType.value
    };
    getMainEquipment(params)
      .then((res: any) => {
        publicRelevanceData.value = res.data;
        loading3.value = false;
        if (examineInfo.value.deviceLevel == deviceLevel.value) {
          resultData.value.forEach((row: any) => {
            res.data.forEach((items: any) => {
              if (items.mainDeviceId == row.mainDeviceId) {
                nextTick(() => {
                  multipleTableRef.value.toggleRowSelection(items, true);
                });
              }
            });
          });
        }
      })
      .catch(() => {
        loading3.value = false;
      });
  }
  if (deviceLevel.value == 4) {
    trendsName.value = '请输入部件名称';

    const params = {
      bayId: orgId.value,
      componentName: retrievalName.value,
      mainDeviceId: mainDeviceId.value
    };

    getaccType(params)
      .then((res: any) => {
        publicRelevanceData.value = res.data;
        loading3.value = false;
        if (examineInfo.value.deviceLevel == deviceLevel.value) {
          resultData.value.forEach((row: any) => {
            res.data.forEach((items: any) => {
              if (items.componentId == row.componentId) {
                nextTick(() => {
                  multipleTableRef.value.toggleRowSelection(items, true);
                });
              }
            });
          });
        }
      })
      .catch(() => {
        loading3.value = false;
      });
  }
  if (deviceLevel.value == 3) {
    trendsName.value = '请输点位名称';
    const params = {
      bayId: orgId.value,
      size: 999,
      current: 1,
      deviceName: retrievalName.value,
      mainDeviceId: mainDeviceId.value,
      componentId: componentId.value
    };

    getdevicedata(params)
      .then((res: any) => {
        publicRelevanceData.value = res.data.records;
        loading3.value = false;
        if (examineInfo.value.deviceLevel == deviceLevel.value) {
          resultData.value.forEach((row: any) => {
            res.data.records.forEach((items: any) => {
              if (items.deviceId == row.deviceId) {
                nextTick(() => {
                  multipleTableRef.value.toggleRowSelection(items, true);
                });
              }
            });
          });
        }
      })
      .catch(() => {
        loading3.value = false;
      });
  }
}
const publicTitle = ref(''); // 初始化关联弹出框名称
const relevanceVisible = ref(false); //初始化关联弹出框变量
const multipleTableRef: any = ref(); // 关联列表的ref
function relevanceClose() {
  //  关闭关联弹出框
  multipleTableRef.value!.clearSelection();
  relevanceVisible.value = false;
  publicRelevanceData.value = [];
  treedata.value = [];
}
const mainEquipmentarr: any = ref([]); // 初始化所属主设备选择框数组
const getacaTypearr: any = ref([]); // 初始化部件选择框数组
const mainDeviceId = ref(''); // 初始化所属主设备选中id
const componentId = ref(''); // 初始化主部件选中id

function notification() {
  // 所属主设备下拉框方法
  // 所属主设备
  const params = {
    bayId: orgId.value
  };
  if (orgId.value == '') {
    mainEquipmentarr.value = [];
    return;
  }
  getMainEquipment(params).then(res => {
    mainEquipmentarr.value = res.data;
  });
}
function partsInfo() {
  // 部件下拉框方法
  //所属部件
  const params = {
    bayId: orgId.value
  };
  if (orgId.value == '') {
    getacaTypearr.value = [];
    return;
  }
  getComponentByBayId(params).then((res: any) => {
    getacaTypearr.value = res.data;
  });
}

function currency(list: any, itemcode: any) {
  // 通过字典显示名称
  let dictname = '';
  list.forEach((element: any) => {
    if (element.itemcode == itemcode) {
      dictname = element.dictname;
    }
  });
  return dictname;
}
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: any
    rowIndex: number
}) => {
    if (rowIndex % 2 === 0) {
        return 'warning-row'
    } else if (rowIndex % 2 === 1) {
        return 'success-row'
    }
    return ''
}
onMounted(() => {
  getData();
  getDict();
  getTreefirst().then((res: any) => {
    optionSelect.value = res.data;
  });
});
//屏蔽掉的巡视点位
const noneShow: any = ref(false);
const deviceData: any = ref([]);
const loading4: any = ref(false);

function deviceShow(row: any) {
  noneShow.value = true;
  loading4.value = true;
  const params = {
    id: row.id
  };
  getBindExamineDevice(params).then((res: any) => {
    deviceData.value = res.data;
    loading4.value = false;
  });
}
function deviceClose() {
  noneShow.value = false;
}
//机器人-无人机
const robotUAV: any = ref([]);
function getrobotUAV() {
  getRobotAndUavList().then((res: any) => {
    robotUAV.value = res.data;
  });
}
</script>

<template>
  <div class="faulttemplate-box">
    <section class="silderBox">
      <div style="
          display: flex;
          display: -webkit-flex;
          justify-content: space-between;
          -webkit-justify-content: space-between;
          margin: 15px 0px;
        ">
        <div style="display: flex; display: -webkit-flex; align-items: center">
          <el-input v-model="paramstable.configName" placeholder="请输入检修计划名称" @keyup.enter="getData()" clearable
            @clear="getData()" style="margin-right: 10px; width: 150px" />
          <el-select v-model="paramstable.bindStatus" placeholder="关联状态" style="margin-right: 10px; width: 120px"
            clearable @change="getData()">
            <el-option v-for="item in StatusData" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-button type="primary" class="searchButton" style="margin-left: 0;" @click="getData()">搜索</el-button>
          <el-button @click="resetting()" class="searchButton">重置</el-button>
        </div>
        <div>
          <el-button v-hasPerm="['add:examine']" class="searchButton" @click="addClick">
            <!-- <svg t="1703213795262" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4420" width="16" height="16"><path d="M896 544H128c-19.2 0-32-12.8-32-32s12.8-32 32-32h768c19.2 0 32 12.8 32 32s-12.8 32-32 32z" fill="currentColor" p-id="4421"></path><path d="M512 928c-19.2 0-32-12.8-32-32V128c0-19.2 12.8-32 32-32s32 12.8 32 32v768c0 19.2-12.8 32-32 32z" fill="currentColor" p-id="4422"></path></svg>  -->
            <span>新增</span></el-button>

          <el-button class="searchButton" v-hasPerm="['del:examine']" @click="delClick"
            :disabled="deviceInfos.length == 0" :type="deviceInfos.length > 0 ? 'primary' : ''">
            <!-- <el-icon>
              <Delete />
            </el-icon> -->
            删除</el-button>
        </div>
      </div>
      <div class="draggable">
        <el-table stripe :header-cell-style="tableBg" v-loading="planLoading" :data="tableData"  :row-class-name="tableRowClassName" style="
            width: 100%;
            height: calc(75vh);
            overflow: auto;
          " row-key="id" @selection-change="handleSelectionChange" default-expand-all>
          <el-table-column type="selection" width="30" align="center" :selectable="checkSelectable" />
          <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
          <el-table-column property="stationName" label="变电站名称">
            <template #default="scope">
              <span>{{ scope.row.stationName }}
                <span style="display: inline-block; color: #409EFF"
                  v-if="scope.row.isStationFlag == '1'">(边缘节点)</span></span>
            </template>
          </el-table-column>
          <el-table-column label="编码" prop="configCode"></el-table-column>
          <el-table-column label="检修计划名称" prop="configName"></el-table-column>
          <el-table-column label="开始时间" prop="startTime" width="180" align="center"></el-table-column>
          <el-table-column label="结束时间" prop="endTime" width="180" align="center"></el-table-column>
          <el-table-column label="屏蔽的巡视点位" prop="endTime" width="140" align="center">
            <template #default="scope">
              <div style="display: flex; justify-content: center">
                <img src="@/assets/tableIcon/ht_hec.png" title="屏蔽的巡视点位" style="cursor: pointer"
                  @click="deviceShow(scope.row)" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="关联状态" align="center" width="120">
            <template #default="scope">
              <div v-if="scope.row.deviceLevel == undefined || scope.row.deviceLevel == '' || scope.row.deviceLevel == 0"
                style=" display: flex; align-items: center; justify-content: center;">
                <div style=" width: 6px; height: 6px; background: #f7b900; border-radius: 50%;"></div>
                <div style="color: #f7b900; margin-left: 5px">未关联</div>
              </div>
              <div v-else style=" display: flex; align-items: center; justify-content: center;">
                <div style=" width: 6px; height: 6px; background: rgb(0, 249, 162); border-radius: 50%;"></div>
                <div style="color: rgb(0, 249, 162); margin-left: 5px">已关联</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="是否有效" width="120" align="center">
            <template #default="scope">
              <el-switch v-model="scope.row.enable" active-value="1" inactive-value="0"
                :disabled="scope.row.deviceList.length == 0" @change="switchChange(scope.row)"
                style="margin-right: 4px"></el-switch>
              <span v-if="scope.row.enable == 1" class="effective">有效</span>
              <span v-else style="color: #d7d7d7">无效</span>
            </template>
          </el-table-column>
          <el-table-column label="最近修改者" prop="lastmodifier" width="120"></el-table-column>
          <el-table-column label="最近修改时间" prop="lastmodifydate" width="180" align="center">
            <template #default="scope">
              {{ dateFormat(scope.row.lastmodifydate) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="110" fixed="right" align="center" style="display: flex;">
            <template #default="scope">
              <span style=" display: flex; justify-content: space-around;">
                <img v-hasPerm="['update:examine']" src="@/assets/newimg/ht_xg.png" title="修改"
                  @click="handleEdit(scope.row, 0)" style="cursor: pointer" />
                <img v-hasPerm="['update:examine']" src="@/assets/tableIcon/ht_gl.png" title="关联设置"
                  @click="handleEdit(scope.row, 1)" style="cursor: pointer" />
                <img v-hasPerm="['del:examine']" src="@/assets/tableIcon/ht_sc.png" title="删除"
                  v-if="scope.row.enable == 0" @click="handleDelete(scope.row)" style="cursor: pointer" />
                <img v-hasPerm="['del:examine']" src="@/assets/tableIcon/ht_sc1.png" v-else title="删除" />
              </span>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: center;margin-top: 5px;">
          <Page style="position: relative;z-index: 100;" :total="total" v-model:size="paramstable.size"
            v-model:current="paramstable.current" @pagination="getData"></Page>
        </div>
      </div>
    </section>

    <Eldialog v-model="dialogVisible" @before-close="handleClose" :title="title" :zIndex="2000" append-to-body
      width="1200px" z>
      <template v-slot:PopFrameContent>
        <el-tabs v-model="tabs" @tab-change="tabClick">
          <el-tab-pane :name="0" label="基本信息">
          </el-tab-pane>
          <el-tab-pane :name="1" label="关联设备">
          </el-tab-pane>
        </el-tabs>
        <!-- <div class="tabbas">
          <div @click="tabClick(0)" :class="tabs == 0 ? 'tabbas1' : ''">
            基本信息
          </div>
          <div style="margin-left:10px ;" @click="tabClick(1)" :class="tabs == 1 ? 'tabbas1' : ''">
            关联设备
          </div>
        </div> -->
        <div v-show="tabs == 0" class="examine-box">
          <el-form ref="infoForm" label-width="120px" style="margin: 5px" class="demo-ruleForm" :model="examineInfo"
            :rules="rules">
            <div style="display: flex">
              <el-form-item label="变电站名称" style="width: 50%" prop="stationId">
                <el-select v-model="examineInfo.stationId" placeholder="" style="
                    width: 100% !important;
                    display: flex;
                    justify-content: center;
                  ">
                  <el-option v-for="item in optionSelect" :key="item.stationId" :label="item.stationName"
                    :value="item.stationId" style="width: 100%" />
                </el-select>
              </el-form-item>
              <el-form-item label="机器人-无人机" style="width: 50%">
                <el-select v-model="examineInfo.robotCode" placeholder="请选择机器人-无人机" style="width: 100%" clearable>
                  <el-option v-for="item in robotUAV" :key="item.patroldeviceId" :label="item.patroldeviceName"
                    :value="item.patroldeviceCode" />
                </el-select>
              </el-form-item>
            </div>
            <div style="display: flex">
              <el-form-item label="检修计划编码" prop="configCode" style="width: 50%">
                <el-input v-model="examineInfo.configCode" placeholder="请输入检修计划编码" />
              </el-form-item>
              <el-form-item label="检修计划名称" prop="configName" style="width: 50%">
                <el-input v-model="examineInfo.configName" placeholder="请输入检修计划名称" />
              </el-form-item>
            </div>
            <div style="display: flex">
              <el-form-item label="开始时间" prop="startTime" style="width: 50%">
                <el-date-picker popper-class="elDatePicker" v-model="examineInfo.startTime" format="YYYY/MM/DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择开始时间" />
              </el-form-item>
              <el-form-item label="结束时间" prop="endTime" style="width: 50%">
                <el-date-picker popper-class="elDatePicker" v-model="examineInfo.endTime" type="datetime"
                  format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" />
              </el-form-item>
            </div>
            <el-form-item label="备注信息">
              <el-input type="textarea" v-model="examineInfo.examineComment" :autosize="{ minRows: 2, maxRows: 8 }"
                placeholder="" rows="6" />
            </el-form-item>
          </el-form>
        </div>
        <div v-show="tabs == 1" class="examine-box">
          <el-button type="primary" class="searchButton" @click="relevanceClick(1)">关联间隔</el-button>
          <el-button type="primary" class="searchButton" @click="relevanceClick(2)">关联主设备</el-button>
          <el-button type="primary" class="searchButton" @click="relevanceClick(4)">关联部件</el-button>
          <el-button type="primary" class="searchButton" @click="relevanceClick(3)">关联巡视点位</el-button>
          <div class="displayflex">
            <div class="publicline"></div>
            <div class="publictitle" style="color:#ffffff;">关联结果</div>
          </div>
          <el-table v-if="resultData.length != 0" :data="resultData" style="width: 100%" row-key="id" :row-class-name="tableRowClassName"
            :header-cell-style="tableBg" stripe :height="'calc(100vh - 400px)'">
            <el-table-column type="index" label="序号" width="50" align="center" />
            <el-table-column v-if="examineInfo.deviceLevel == '' ||
              examineInfo.deviceLevel == 0 ||
              examineInfo.deviceLevel == 1
              " label="间隔名称" prop="bayName" show-overflow-tooltip></el-table-column>
            <el-table-column v-if="examineInfo.deviceLevel == 2" label="主设备名称" prop="mainDeviceName"
              show-overflow-tooltip></el-table-column>
            <el-table-column v-if="examineInfo.deviceLevel == 4" label="部件名称" prop="componentName"
              show-overflow-tooltip></el-table-column>
            <el-table-column v-if="examineInfo.deviceLevel == 3" label="巡视点位名称" prop="deviceName"
              show-overflow-tooltip></el-table-column>
            <el-table-column label="所属变电站" prop="stationName" show-overflow-tooltip></el-table-column>
            <el-table-column label="所属区域" prop="areaName" show-overflow-tooltip></el-table-column>
            <el-table-column v-if="examineInfo.deviceLevel == 2 ||
              examineInfo.deviceLevel == 3 ||
              examineInfo.deviceLevel == 4
              " label="所属间隔" prop="bayName" show-overflow-tooltip></el-table-column>
            <el-table-column v-if="examineInfo.deviceLevel == 3 || examineInfo.deviceLevel == 4" label="所属主设备"
              prop="mainDeviceName" show-overflow-tooltip></el-table-column>
            <el-table-column v-if="examineInfo.deviceLevel == 3" label="所属部件" prop="componentName"
              show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="60" fixed="right" align="center">
              <template #default="scope">
                <div style="
                    display: flex;
                    display: -webkit-flex;
                    justify-content: center;
                  ">
                  <img src="@/assets/MenuIcon/lbcz_sc.png" alt="" title="删除" @click="delPublic(scope.$index)"
                    style="cursor: pointer" />
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="essentialBottom" v-if="resultData.length == 0">
            暂未绑定
          </div>
        </div>
        <span class="dialog-footer" style="
            width: 100%;
            margin: auto;
            display: flex;
            display: -webkit-flex;
            justify-content: flex-end;
            -webkit-justify-content: flex-end;
            margin-top: 20px;
          ">
          <div class="details-button" @click="handleClose">取消</div>
          <div class="details-button" @click="confirmClick(infoForm)">确定</div>
        </span>
      </template>

    </Eldialog>

    <Eldialog v-model="relevanceVisible" @before-close="relevanceClose" :zIndex="2009" :title="publicTitle" append-to-body
      width="1100px" draggable>
      <template v-slot:PopFrameContent>
        <div class="relevanceBox" v-if="relevanceVisible">
          <aside id="silderLeft">
            <div class="displayflex" style="
              margin: 0;
              padding-left: 20px;
              margin-bottom: 10px;
              height: 30px;">
              <div style="font-size: 14px;color: #fff;">数据列表</div>
            </div>
            <el-scrollbar height="calc(100vh - 350px)" style="padding:0px 15px;">
              <el-tree ref="treeRef" :class="useAppStore().size === 'default'
                  ? 'silderLeft-large'
                  : 'silderLeft-default'
                " :node-key="deviceLevel == 1 ? 'areaId' : 'bayId'" default-expand-all :data="treedata"
                :current-node-key="currentNodeKey" :highlight-current="true" :props="defaultProps" v-loading="treeloading"
                @node-click="handleNodeClick">
              </el-tree>
            </el-scrollbar>
          </aside>
          <section class="silderRight">
            <div style="
                display: flex;
                display: -webkit-flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 10px;
              ">
              <div style="display: flex; align-items: center; width: 87%">
                <el-input v-model="retrievalName" :placeholder="trendsName" clearable @clear="getPublicData()"
                  @keyup.enter="getPublicData()" style="margin-right: 15px; width: 25%" />
                <el-select v-if="deviceLevel == 2" v-model="DeviceType" placeholder="主设备类型" style="margin-right: 15px"
                  @change="getPublicData()" clearable>
                  <el-option v-for="item in EquipmentTypeData" :key="item.itemcode" :label="item.dictname"
                    :value="item.itemcode" />
                </el-select>

                <el-select v-if="deviceLevel == 3 || deviceLevel == 4" v-model="mainDeviceId" placeholder="所属主设备"
                  style="margin-right: 15px" clearable @visible-change="notification" @change="getPublicData()">
                  <el-option v-for="item in mainEquipmentarr" :key="item.mainDeviceId" :label="item.mainDeviceName"
                    :value="item.mainDeviceId" />
                </el-select>
                <el-select v-if="deviceLevel == 3" v-model="componentId" placeholder="所属部件" style="margin-right: 15px"
                  clearable @visible-change="partsInfo" @change="getPublicData()">
                  <el-option v-for="item in getacaTypearr" :key="item.componentId" :label="item.componentName"
                    :value="item.componentId" />
                </el-select>

                <el-button type="primary" class="searchButton" @click="getPublicData()">搜索</el-button>
                <el-button class="searchButton" @click="resetPublic()">重置</el-button>
              </div>

              <el-button class="searchButton" type="primary" @click="addPublic()">添加</el-button>
            </div>
            <div class="draggable">
              <el-table :header-cell-style="tableBg" stripe :row-key="rowRelevanceKey" ref="multipleTableRef" :row-class-name="tableRowClassName"
                v-loading="loading3" :data="publicRelevanceData" style="width: 100%"
                @selection-change="publicSelectionChange" :height="'calc(100vh - 360px)'">
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column type="index" label="序号" width="60" align="center" />
                <el-table-column v-if="deviceLevel == 1" label="间隔名称" prop="bayName" min-width="110"></el-table-column>
                <el-table-column v-if="deviceLevel == 2" label="主设备名称" prop="mainDeviceName"
                  min-width="110"></el-table-column>
                <el-table-column v-if="deviceLevel == 2" label="主设备类型" prop="deviceType" min-width="110">
                  <template #default="scope">
                    {{ currency(EquipmentTypeData, scope.row.deviceType) }}
                  </template>
                </el-table-column>

                <el-table-column v-if="deviceLevel == 4" label="部件名称" prop="componentName"
                  min-width="110"></el-table-column>
                <el-table-column v-if="deviceLevel == 3" label="巡视点位名称" prop="deviceName"
                  min-width="110"></el-table-column>
                <el-table-column v-if="deviceLevel == 4 || deviceLevel == 3" label="所属主设备" prop="mainDeviceName"
                  min-width="110"></el-table-column>
                <el-table-column v-if="deviceLevel == 3" label="所属部件" prop="componentName"
                  min-width="110"></el-table-column>
              </el-table>
            </div>
          </section>
        </div>
      </template>

    </Eldialog>

    <Eldialog v-model="noneShow" :close-on-click-modal="false" @before-close="deviceClose" :title="'屏蔽的巡视点位'"
      append-to-body width="1100px" draggable>
      <template v-slot:PopFrameContent>
        <el-table :header-cell-style="tableBg" stripe :row-key="rowRelevanceKey" ref="multipleTableRef" :row-class-name="tableRowClassName"
          v-loading="loading4" :data="deviceData" style="width: 100%;margin-top:10px"
          @selection-change="publicSelectionChange" :height="'calc(100vh - 260px)'">
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column label="间隔名称" prop="bayName"></el-table-column>
          <el-table-column label="主设备名称" prop="mainDeviceName"></el-table-column>
          <el-table-column label="部件名称" prop="componentName"></el-table-column>
          <el-table-column label="巡视点位名称" prop="deviceName" min-width="110"></el-table-column>
        </el-table>
      </template>
    </Eldialog>
  </div>
</template>
<style scoped lang="scss">
.essential {
  width: 95%;
  margin: auto;
  height: calc(80vh - 290px);
  overflow: auto;
}

.faulttemplate-box {
  padding: 0 15px;
  padding-top: 17px;
  height: 100%;

}

#silderLeft {
  width: 300px;
  padding: 5px 0px 10px;
  box-sizing: border-box;
  // background: #fff; 
  background-image: url(@/assets/navigation/sanwei.png);
  background-size: 100% 100%;
  border-radius: 3px;
  position: relative;
  height: calc(100vh - 290px);
  overflow: auto;
}

.silderBox {
  width: 100%;
  height: calc(89vh);
  // background-color: #131a25;
  border: none;
  border-radius: 3px;
  padding: 5px 20px 0px;
  box-sizing: border-box;
  background: url(@/assets/navigation/ty_1614x988.png);
  background-size: 100% 100%;

}

.silderRight {
  flex: 1;
  width: 100%;
  height: calc(100vh - 290px) !important;
  overflow: auto;
  border-radius: 3px;
  padding-bottom: 0px;
  box-sizing: border-box;
  margin-left: 15px;
  background: url(@/assets/newimg/cjrw_1890.png);
  background-size: 100% 100%;
  padding: 10px;
}

.avatar {
  width: 86px;
  height: 86px;
  display: block;
}


.el-message-box {
  width: 300px !important;
}

//tabs
.tabbas {
  width: 100%;
  display: flex;
  margin-bottom: 10px;
  border-bottom: 1px solid #409eff;

  div {
    width: 70px;
    height: 51px;
    line-height: 51px;
    text-align: center;
    cursor: pointer;
  }

  .tabbas1 {
    width: 70px;
    height: 51px;
    text-align: center;
    line-height: 51px;
    box-sizing: border-box;
    cursor: pointer;
    color: #409eff;
    border-bottom: 3px solid #409eff;
  }
}

:deep(.el-form-item) {
  display: flex;
  align-items: center;
}

:deep(.el-form-item__label) {
  width: 110px !important;
}

:deep(.el-form-item__error) {
  margin-left: 10px;
}

.operate {
  display: flex;
  align-items: center;
  justify-content: space-around;

  div {
    width: 40px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
  }
}

:deep(.el-tooltip__trigger) {
  width: 100% !important;
}

.examine-box {
  height: calc(100vh - 300px);
  overflow: auto;
}

.displayflex {
  display: flex;
  align-items: center;
  margin: 20px 0;

}

.relevanceBox {
  height: 100%;
  display: flex;
  display: -webkit-flex;
  padding-top: 15px;
}

.essentialBottom {
  border: 1px solid rgb(228, 228, 228, 0.1);
  background-color: rgb(250, 250, 250, 0.1);
  width: 100%;
  height: calc(100vh - 400px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #949494;
  font-weight: 400;
  margin: auto;
}

:deep(.el-scrollbar) {
  height: calc(100vh - 360px);
}
</style>
