<template>
|
<div class="app-container">
|
<div class="tree-view">
|
<div class="tree-list">
|
<school ref="schoolRef" @schoolChange="schoolChange"></school>
|
</div>
|
<div class="right-view">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="施工概况" name="first">施工概况</el-tab-pane>
|
<el-tab-pane label="IPC设备" name="second">
|
<ipc v-if="activeName === 'second'" :schoolId="schoolId"></ipc>
|
</el-tab-pane>
|
<el-tab-pane label="NVR设备" name="third">
|
<nvr v-if="activeName === 'third'" :schoolId="schoolId"></nvr>
|
</el-tab-pane>
|
<el-tab-pane label="IoT设备" name="fourth">
|
<iot v-if="activeName === 'fourth'" :schoolId="schoolId"></iot>
|
</el-tab-pane>
|
<el-tab-pane label="AI设备" name="five">
|
<ai v-if="activeName === 'five'" :schoolId="schoolId"></ai>
|
</el-tab-pane>
|
<el-tab-pane label="交换设备" name="six">交换设备</el-tab-pane>
|
<el-tab-pane label="服务器" name="seven">服务器</el-tab-pane>
|
<el-tab-pane label="软件系统" name="eight">软件系统</el-tab-pane>
|
</el-tabs>
|
<div class="right-view-title-icon">
|
<i class="el-icon-search" @click="batchOpen = true"></i>
|
<i class="el-icon-search" @click="ipOpen = true"></i>
|
</div>
|
</div>
|
</div>
|
<el-drawer title="施工批次" :visible.sync="batchOpen" size="70%" :append-to-body="true" :destroy-on-close="true">
|
<construction-batch :schoolId="schoolId"></construction-batch>
|
</el-drawer>
|
|
<el-drawer title="预留IP" :visible.sync="ipOpen" size="70%" :append-to-body="true" :destroy-on-close="true">
|
<reserve-ip :schoolId="schoolId"></reserve-ip>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import school from '../../components/school'
|
import constructionBatch from '../constructionBatch'
|
import reserveIp from '../reserveIp'
|
import nvr from '../nvr'
|
import ipc from '../ipc'
|
import iot from '../iot'
|
import ai from '../ai'
|
|
export default {
|
name: "constructionList",
|
components: {
|
school,
|
constructionBatch,
|
reserveIp,
|
nvr,
|
ipc,
|
iot,
|
ai
|
},
|
data() {
|
return {
|
activeName: 'first',
|
batchOpen: false,
|
ipOpen: false,
|
schoolId: undefined
|
}
|
},
|
methods: {
|
// 选择高校
|
schoolChange(v) {
|
this.schoolId = v;
|
this.activeName = 'first';
|
},
|
handleClick(tab, event) {
|
console.log(tab, event);
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.tree-view {
|
display: flex;
|
flex-direction: row;
|
flex: 1;
|
}
|
|
.tree-list {
|
margin-right: 10px;
|
}
|
|
.right-view {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
flex: 1;
|
}
|
|
.right-view-title-icon {
|
display: flex;
|
flex-direction: row;
|
height: 40px;
|
align-items: center;
|
}
|
</style>
|
