Merge branch 'dev' of http://114.132.189.42:9002/r/center-lims-before-ruoyi...

lxp

2025-03-12 952a20f1c005d80e9bf881287c40e6f4e4266a0b

 src/views/CNAS/resourceDemand/device/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,250 @@
<template>
  <div class="device-page">
    <div class="device-left">
      <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 :data="list" ref="tree" :props="{ children: 'children', label: 'label' }" node-key="id"
               @node-click="handleNodeClick" :filter-node-method="filterNode" highlight-current @node-expand="nodeOpen"
               @node-collapse="nodeClose" v-loading="loading" :expand-on-click-node="false" style="height:calc(100% - 46px);
        overflow-y: scroll;
        scrollbar-width: none;">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <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 v-if="isShowAll" style="height: 100%;">
        <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="作业指导书">
            <operationInstruction v-if="menuListActiveName == '作业指导书'" :clickNodeVal="clickNodeVal" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-if="!isShowAll" style="height: 100%;">
        <el-tabs v-model="tabListActiveName" class="main_right" type="border-card" @tab-click="handleClick">
          <el-tab-pane label="设备运行总览" name="设备运行总览">
            <operationOverview view 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"/>
          </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-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import management from "./component/management.vue";
import overview from "./component/device-overview.vue";
import resourceReservation from "./component/resource-reservation.vue";
import operationInstruction from "./component/operationInstruction.vue";
import operationOverview from "./component/operationOverview.vue";
import files from "./component/files.vue";
import checkAndAccept from "./component/check-and-accept.vue";
import calibration from "./component/calibration.vue";
import check from "./component/check.vue";
import maintenance from "./component/maintenance.vue";
import borrow from "./component/borrow.vue";
import fault from "./component/fault.vue";
import record from "./component/record.vue";
import state from "./component/state.vue";

import {
  treeDevice,
} from '@/api/cnas/resourceDemand/device.js'
export default {
  components: {
    checkAndAccept,
    operationOverview,
    files,
    calibration,
    check,
    maintenance,
    borrow,
    fault,
    record,
    state,
    management,
    overview,
    resourceReservation,
    operationInstruction
  },
  data() {
    return {
      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;
      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 {
  display: flex;
  padding-top: 10px;
  box-sizing: border-box;
  width: 100%;
}

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

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

.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;
}

>>>.single-line-ellipsis {
  margin: 0 !important;
}

>>>.el-tree-node__content {
  text-align: left;
  align-items: start;
  margin: 4px;
  height: 100%;
}
</style>