| | |
| | | <div slot-scope="{ node, data }" class="custom-tree-node"> |
| | | <el-row style="width: 100%;"> |
| | | <el-col :span="24"> |
| | | <p class="single-line-ellipsis" style="width: 100%"> |
| | | <p class="single-line-ellipsis" style="width: 100%" :style="{ |
| | | color: isLeafNode(data) && shouldHighlight(data) ? 'red' : '' |
| | | }"> |
| | | <i :class="`node_i ${data.children != undefined |
| | | ? data.code === '[1]' |
| | | ? 'el-icon-folder-opened' |
| | |
| | | "></i> |
| | | {{ data.label }} |
| | | </p> |
| | | <p> |
| | | <p :style="{ |
| | | color: isLeafNode(data) && shouldHighlight(data) ? 'red' : '' |
| | | }"> |
| | | {{ data.managementNumber === undefined ? '' : data.managementNumber }} |
| | | </p> |
| | | </el-col> |
| | |
| | | <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="设备校准计划"> |
| | | <!-- 完成接口 --> |
| | | <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="设备使用授权"> |
| | | <usage-authorization v-if="menuListActiveName == '设备使用授权'" |
| | | :clickNodeVal="clickNodeVal"></usage-authorization> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="利用外部仪器设备" name="利用外部仪器设备"> |
| | | <!-- 完成接口 --> |
| | | <using-external-instruments v-if="menuListActiveName == '利用外部仪器设备'" |
| | | :clickNodeVal="clickNodeVal"></using-external-instruments> |
| | | <using-external-instruments v-if="menuListActiveName == '利用外部仪器设备'" :clickNodeVal="clickNodeVal"></using-external-instruments> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="使用记录" name="使用记录"> |
| | | <!-- 完成接口 --> |
| | | <record v-if="menuListActiveName == '使用记录'" :isMenuList="1" /> |
| | | </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 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="设备验收"> |
| | | <!-- 完成接口 --> |
| | | <equipment-acceptance v-if="tabListActiveName == '设备验收'" |
| | | :clickNodeVal="clickNodeVal"></equipment-acceptance> |
| | | <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 label="设备维护保养" name="设备维护保养"> |
| | | <equipmentMaintenance 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> |
| | |
| | | import files from "./component/files.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 EquipmentMaintenancePlan from "./component/equipmentMaintenancePlan.vue"; |
| | | import EquipmentAcceptance from "./component/equipmentAcceptance.vue"; |
| | | import QuantityValueTraceabilityPlan from "./component/quantityValueTraceabilityPlan.vue"; |
| | | import equipmentMaintenance from "./component/equipmentMaintenance.vue"; |
| | | import usageAuthorization from "./component/usageAuthorization.vue"; |
| | | import { |
| | | treeDevice, |
| | | } from '@/api/cnas/resourceDemand/device.js' |
| | | export default { |
| | | name: 'Device', |
| | | components: { |
| | | QuantityValueTraceabilityPlan, |
| | | EquipmentAcceptance, |
| | |
| | | files, |
| | | calibration, |
| | | check, |
| | | maintenance, |
| | | borrow, |
| | | fault, |
| | | record, |
| | |
| | | management, |
| | | overview, |
| | | resourceReservation, |
| | | operationInstruction |
| | | operationInstruction, |
| | | equipmentMaintenance, |
| | | usageAuthorization, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | treeDevice().then(res => { |
| | | let data = res.data; |
| | | this.list = data; |
| | | console.log('this.list--', this.list) |
| | | this.loading = false |
| | | }); |
| | | }, |
| | | // 判断是否是叶子节点 |
| | | isLeafNode(data) { |
| | | return !data.children || data.children.length === 0; |
| | | }, |
| | | // 判断是否需要标红 |
| | | shouldHighlight(data) { |
| | | if (!data.activationDate) return false; |
| | | const today = new Date(); |
| | | const targetDate = new Date(data.activationDate); |
| | | const fiveDaysBeforeTarget = new Date(targetDate); |
| | | // 计算前五天的日期 |
| | | fiveDaysBeforeTarget.setDate(targetDate.getDate() - 5); |
| | | |
| | | return today > fiveDaysBeforeTarget; |
| | | }, |
| | | handleNodeClick(val, node, el) { |
| | | // 点击临时缓存 |
| | |
| | | |
| | | >>>.el-tabs__content { |
| | | padding-top: 0; |
| | | max-height: 95%; /* 根据需求调整高度 */ |
| | | overflow-y: auto; /* 垂直方向超出时显示滚动条 */ |
| | | } |
| | | |
| | | >>>.single-line-ellipsis { |