完成设备模块搬迁

licp

2025-01-06 efad6058c9c9ee6ba754dc9cc61c8d744cd199b8

 src/components/view/a6-device.vue

@@ -1,40 +1,284 @@
<template>
  <div class="device-page">
    <div class="device-left">
      <el-input placeholder="输入设备名称" suffix-icon="el-icon-search" v-model="search" size="small"
      style="margin-bottom: 5px;" clearable></el-input>
      <el-input v-model="deviceName" class="div_left_input" clearable placeholder="输入设备名称"
        size="small" suffix-icon="el-icon-search" @blur="searchFilter" @clear="searchFilter"
        @keyup.enter.native="searchFilter"></el-input>
      <el-tree ref="tree" v-loading="loading" :data="list" :expand-on-click-node="false"
        :filter-node-method="filterNode" :props="{ children: 'children', label: 'label' }" highlight-current node-key="id"
        style="height:calc(100% - 46px);
        overflow-y: scroll;
        scrollbar-width: none;" @node-click="handleNodeClick" @node-expand="nodeOpen" @node-collapse="nodeClose">
        <div slot-scope="{ node, data }" class="custom-tree-node">
          <el-row style="width: 100%;">
            <el-col :span="21" :title="data.label">
              <span class="single-line-ellipsis" style="width: 100%;display: inline-block;">
                <i :class="`node_i ${data.children != undefined
                  ? data.code === '[1]'
                    ? 'el-icon-folder-opened'
                    : 'el-icon-folder'
                  : 'el-icon-tickets'
                  }`
                  "></i>
                {{ data.label }}
              </span>
            </el-col>
          </el-row>
        </div>
      </el-tree>
    </div>
    <div class="device-right"></div>
    <div class="device-right">
      <div v-if="isShowAll">
        <el-tabs v-model="menuListActiveName" class="main_right" type="border-card">
          <el-tab-pane label="设备总览" name="设备总览">
            <overview v-if="menuListActiveName == '设备总览'" :clickNodeVal="clickNodeVal" />
          </el-tab-pane>
          <el-tab-pane label="设备工具明细" name="设备工具明细">
            <management v-if="menuListActiveName == '设备工具明细'" :clickNodeVal="clickNodeVal" />
          </el-tab-pane>
<!--          <el-tab-pane label="资源预定" name="资源预定">-->
<!--            <resourceReservation v-if="menuListActiveName == '资源预定'" :clickNodeVal="clickNodeVal"/>-->
<!--          </el-tab-pane>-->
          <el-tab-pane label="设备校准计划" name="设备校准计划">
            <equipment-calibration-plan v-if="menuListActiveName == '设备校准计划'" :clickNodeVal="clickNodeVal"></equipment-calibration-plan>
          </el-tab-pane>
          <el-tab-pane label="设备核查计划" name="设备核查计划">
            <equipment-verification-plan v-if="menuListActiveName == '设备核查计划'" :clickNodeVal="clickNodeVal"></equipment-verification-plan>
          </el-tab-pane>
          <el-tab-pane label="设备保养计划" name="设备保养计划">
            <equipment-maintenance-plan v-if="menuListActiveName == '设备保养计划'" :clickNodeVal="clickNodeVal"></equipment-maintenance-plan>
          </el-tab-pane>
          <el-tab-pane label="量值溯源计划" name="量值溯源计划">
            <quantity-value-traceability-plan v-if="menuListActiveName == '量值溯源计划'" :clickNodeVal="clickNodeVal"></quantity-value-traceability-plan>
          </el-tab-pane>
          <el-tab-pane label="利用外部仪器设备" name="利用外部仪器设备">
            <using-external-instruments v-if="menuListActiveName == '利用外部仪器设备'" :clickNodeVal="clickNodeVal"></using-external-instruments>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-if="!isShowAll">
        <el-tabs v-model="tabListActiveName" class="main_right" type="border-card" @tab-click="handleClick">
<!--          <el-tab-pane label="设备运行总览" name="设备运行总览">-->
<!--            <operationOverview v-if="tabListActiveName == '设备运行总览'" :clickNodeVal="clickNodeVal"/>-->
<!--          </el-tab-pane>-->
          <el-tab-pane label="设备档案" name="设备档案">
            <files v-if="tabListActiveName == '设备档案'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="设备验收" name="设备验收">
<!--            <checkAndAccept v-if="tabListActiveName == '设备验收'" :clickNodeVal="clickNodeVal"/>-->
            <equipment-acceptance v-if="tabListActiveName == '设备验收'" :clickNodeVal="clickNodeVal"></equipment-acceptance>
          </el-tab-pane>
          <el-tab-pane label="设备校准" name="设备校准">
            <calibration v-if="tabListActiveName == '设备校准'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
<!--          <el-tab-pane label="设备核查" name="设备核查">-->
<!--            <check v-if="tabListActiveName == '设备核查'" :clickNodeVal="clickNodeVal"/>-->
<!--          </el-tab-pane>-->
          <el-tab-pane label="设备维护" name="设备维护">
            <maintenance v-if="tabListActiveName == '设备维护'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="设备借用" name="设备借用">
            <borrow v-if="tabListActiveName == '设备借用'" :clickNodeVal="clickNodeVal" />
          </el-tab-pane>
<!--          <el-tab-pane label="设备故障" name="设备故障">-->
<!--            <fault v-if="tabListActiveName == '设备故障'" :clickNodeVal="clickNodeVal" />-->
<!--          </el-tab-pane>-->
          <el-tab-pane label="使用记录" name="使用记录">
            <record v-if="tabListActiveName == '使用记录'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="设备停用/启用" name="设备停用/启用">
            <state v-if="tabListActiveName == '设备停用/启用'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="设备报废" name="设备报废">
            <equipment-scrap v-if="tabListActiveName == '设备报废'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="设备故障与维修" name="设备故障与维修">
            <equipment-failure v-if="tabListActiveName == '设备故障与维修'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="设备点检" name="设备点检">
            <inspection-of-equipment v-if="tabListActiveName == '设备点检'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="设备事故" name="设备事故">
            <equipment-accident v-if="tabListActiveName == '设备事故'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="作业指导书" name="作业指导书">
            <operationInstruction v-if="tabListActiveName == '作业指导书'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import operationOverview from "../do/a6-device/operation-overview.vue";
import files from "../do/a6-device/files.vue";
import checkAndAccept from "../do/a6-device/check-and-accept.vue";
import calibration from "../do/a6-device/calibration.vue";
import check from "../do/a6-device/check.vue";
import maintenance from "../do/a6-device/maintenance.vue";
import borrow from "../do/a6-device/borrow.vue";
import fault from "../do/a6-device/fault.vue";
import record from "../do/a6-device/record.vue";
import state from "../do/a6-device/state.vue";
import management from "../do/a6-device/management.vue";
import overview from "../do/a6-device/device-overview.vue";
import resourceReservation from "../do/a6-device/resource-reservation.vue";
import operationInstruction from "../do/a6-device/operation-instruction.vue";
import EquipmentCalibrationPlan from "../equipment/equipment-calibration-plan.vue";
import EquipmentVerificationPlan from "../equipment/equipment-verification-plan.vue";
import UsingExternalInstruments from "../equipment/using-external-instruments.vue";
import EquipmentScrap from "../equipment/equipment-scrap.vue";
import EquipmentFailure from "../equipment/equipment-failure.vue";
import InspectionOfEquipment from "../equipment/inspection-of-equipment.vue";
import EquipmentAccident from "../equipment/equipment-accident.vue";
import EquipmentMaintenancePlan from "../equipment/equipment-maintenance-plan.vue";
import EquipmentAcceptance from "../equipment/equipment-acceptance.vue";
import QuantityValueTraceabilityPlan from "../equipment/quantity-value-traceability-plan.vue";
export default {
  data(){
  components: {
    QuantityValueTraceabilityPlan,
    EquipmentAcceptance,
    EquipmentMaintenancePlan,
    EquipmentAccident,
    InspectionOfEquipment,
    EquipmentFailure,
    EquipmentScrap,
    UsingExternalInstruments,
    EquipmentVerificationPlan,
    EquipmentCalibrationPlan,
    operationOverview,
    files,
    checkAndAccept,
    calibration,
    check,
    maintenance,
    borrow,
    fault,
    record,
    state,
    management,
    overview,
    resourceReservation,
    operationInstruction
  },
  data() {
    return {
      search:''
    }
      isShowAll: true,
      deviceName: "", // 侧边栏搜索
      loading: false,
      tabListActiveName: '设备档案',
      menuListActiveName: '设备总览',
      list: [],
      clickNodeVal: {}
    };
  },
  mounted() {
    // 初始化调用
    this.geList();
  },
  methods: {
    handleClick(tab, event) {
    },
    searchFilter() {
      this.$refs.tree.filter(this.deviceName)
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 父级
    geList() {
      this.loading = true;
      this.$axios.get(
        this.$api.deviceScope.treeDevice
      ).then(res => {
        let data = res.data;
        this.list = data;
        this.loading = false
      });
    },
    handleNodeClick(val, node, el) {
      // 点击临时缓存
      this.clickNodeVal = val;
      // 存储父级节点级数
      this.clickNodeVal.level = node.level
      this.clickNodeVal.parent = node.parent.data
      // 是否显示设备详情
      if (!val.value) {
        this.isShowAll = true
      } else {
        this.isShowAll = false
      }
    },
    nodeOpen(data, node, el) {
      $($(el.$el).find(".node_i")[0]).attr(
        "class",
        "node_i el-icon-folder-opened"
      );
    },
    nodeClose(data, node, el) {
      $($(el.$el).find(".node_i")[0]).attr("class", "node_i el-icon-folder");
    },
  }
}
};
</script>

<style scoped>
.device-page{
.device-page {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  width: 100%;
}
.device-left{
  width: 200px;

.device-left {
  width: 250px;
  height: 100%;
  background: #fff;
  margin-right: 10px;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 10px 16px;
  flex-shrink: 0;
}
.device-right{

.device-right {
  background: #fff;
  flex: 1;
  width: calc(100% - 260px);
  height: 100%;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 10px 16px;
}

.showLargeCategory {
  width: 100%;
  height: 100%;
}

.device-right-content {
  /* margin-top: 10px; */
  height: calc(100% - 42px);
  width: 100%;
}
.custom-tree-node {
  width: 100%;
  /* line-height: 32px; */
  font-size: 14px;
}

.node_i {
  color: orange;
  font-size: 18px;
}

.main_right {
  height: calc(100% - 5px);
  overflow: hidden;
}
>>>.el-tabs__content {
  padding-top: 0;
}
</style>