<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>
|
