From efad6058c9c9ee6ba754dc9cc61c8d744cd199b8 Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期一, 06 一月 2025 10:30:31 +0800
Subject: [PATCH] 完成设备模块搬迁
---
src/components/view/a6-device.vue | 324 +++++++++++++++++++++++++++++++++--------------------
1 files changed, 203 insertions(+), 121 deletions(-)
diff --git a/src/components/view/a6-device.vue b/src/components/view/a6-device.vue
index b904515..168f9ef 100644
--- a/src/components/view/a6-device.vue
+++ b/src/components/view/a6-device.vue
@@ -1,18 +1,25 @@
<template>
<div class="device-page">
<div class="device-left">
- <el-input placeholder="杈撳叆璁惧鍚嶇О" suffix-icon="el-icon-search" v-model="deviceName" size="small"
- @keyup.enter="geList"
- style="margin-bottom: 5px;" clearable @change="geList"></el-input>
- <el-tree :data="list" ref="tree" :props="{ children: 'children', label: 'label' }" node-key="id" @node-click="handleNodeClick" highlight-current @node-expand="nodeOpen"
- @node-collapse="nodeClose" v-loading="loading" :expand-on-click-node="false"
- :default-expanded-keys="expandedKeys"
- style="height:calc(100% - 46px);overflow-y: scroll;scrollbar-width: none;">
- <div class="custom-tree-node" slot-scope="{ node, data }">
+ <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>
+ <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>
@@ -21,30 +28,125 @@
</el-tree>
</div>
<div class="device-right">
- <el-radio-group v-model="currentPage" size="small">
- <el-radio-button :label="item.id" v-for="(item,index) in tabList" :key="index"
- size="small">{{ item.title }}</el-radio-button>
- </el-radio-group>
- <div class="device-right-content">
- <component :is="currentPage"></component>
+ <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 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 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 {
- components:{
+ components: {
+ QuantityValueTraceabilityPlan,
+ EquipmentAcceptance,
+ EquipmentMaintenancePlan,
+ EquipmentAccident,
+ InspectionOfEquipment,
+ EquipmentFailure,
+ EquipmentScrap,
+ UsingExternalInstruments,
+ EquipmentVerificationPlan,
+ EquipmentCalibrationPlan,
operationOverview,
files,
checkAndAccept,
@@ -55,137 +157,109 @@
fault,
record,
state,
+ management,
+ overview,
+ resourceReservation,
+ operationInstruction
},
- data(){
+ data() {
return {
- deviceName:'',
- loading:false,
- tabList:[
- {
- id:'operationOverview',
- title:'璁惧杩愯鎬昏',
- },
- {
- id:'files',
- title:'璁惧妗ｆ',
- },
- {
- id:'checkAndAccept',
- title:'璁惧楠屾敹',
- },
- {
- id:'calibration',
- title:'璁惧鏍″噯',
- },
- {
- id:'check',
- title:'璁惧鏍告煡',
- },
- {
- id:'maintenance',
- title:'璁惧缁存姢',
- },
- {
- id:'borrow',
- title:'璁惧鍊熺敤',
- },
- {
- id:'fault',
- title:'璁惧鏁呴殰',
- },
- {
- id:'record',
- title:'浣跨敤璁板綍',
- },
- {
- id:'state',
- title:'璁惧鍋滅敤/鍚敤',
- },
- ],
- currentPage:'operationOverview',
- expandedKeys:[],
- selectTree:'',
- list:[]
- }
+ isShowAll: true,
+ deviceName: "", // 渚ц竟鏍忔悳绱�
+ loading: false,
+ tabListActiveName: '璁惧妗ｆ',
+ menuListActiveName: '璁惧鎬昏',
+ list: [],
+ clickNodeVal: {}
+ };
},
- mounted(){
- this.geList()
+ mounted() {
+ // 鍒濆鍖栬皟鐢�
+ this.geList();
},
- methods:{
- 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+'?deviceName='+this.deviceName).then(res => {
- this.loading = false;
- let data = res.data
- data.forEach((item,index) => {
- item.id = index +1
- item.label = item.largeCategory
- item.children.forEach((m,i)=>{
- m.label = m.deviceName
- })
- })
- this.list = data
- })
+ this.$axios.get(
+ this.$api.deviceScope.treeDevice
+ ).then(res => {
+ let data = res.data;
+ this.list = data;
+ this.loading = false
+ });
},
- handleNodeClick(val, node, el) { //鏍戠殑鍊�
- this.selectTree = ''
- this.getNodeParent(node)
- this.selectTree = this.selectTree.replace(' - ', '')
- let data = this.selectTree.split(' - ')
- let data2 = ''
- for (let index = data.length - 1; index >= 0; index--) {
- data2 += " - " + data[index]
- }
- this.selectTree = data2.replace(' - ', '')
-
- this.currentPage = 'operationOverview';
- },
- getNodeParent(val) {
- if (val.parent != null) {
- if(val.data.children === null){
- this.selectTree += ' - ' + val.label + ' - ' + 'null'
- }else{
- this.selectTree += ' - ' + val.label
- }
- this.getNodeParent(val.parent)
+ 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')
+ $($(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')
+ $($(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;
}
-.device-right-content{
- margin-top: 10px;
+
+.showLargeCategory {
+ width: 100%;
+ height: 100%;
+}
+
+.device-right-content {
+ /* margin-top: 10px; */
height: calc(100% - 42px);
width: 100%;
}
@@ -199,4 +273,12 @@
color: orange;
font-size: 18px;
}
+
+.main_right {
+ height: calc(100% - 5px);
+ overflow: hidden;
+}
+>>>.el-tabs__content {
+ padding-top: 0;
+}
</style>
--
Gitblit v1.9.3