<template>
|
<div class="app-container">
|
<div class="tree-view">
|
<div class="tree-list">
|
<school ref="schoolRef" @schoolChange="schoolChange"></school>
|
</div>
|
<div class="right-view custom-el-tabs" v-loading="loading">
|
<el-tabs v-model="activeName" style="flex: 1;" @tab-click="handleClick">
|
<el-tab-pane label="施工概况" name="first">
|
<el-empty description="正在开发中..."></el-empty>
|
</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">
|
<exchange v-if="activeName === 'six'" :schoolId="schoolId"></exchange>
|
</el-tab-pane>
|
<el-tab-pane label="服务器" name="seven">
|
<server v-if="activeName === 'seven'" :schoolId="schoolId"></server>
|
</el-tab-pane>
|
<el-tab-pane label="软件系统" name="eight">
|
<system v-if="activeName === 'eight'" :schoolId="schoolId"></system>
|
</el-tab-pane>
|
</el-tabs>
|
<div class="right-view-title-icon">
|
<img alt="" title="施工批次" src="@/assets/images/batch-icon.png" @click="batchOpen = true" class="right-view-title-icon-item" />
|
<img alt="" title="预留IP" src="@/assets/images/ip-icon.png" @click="ipOpen = true" class="right-view-title-icon-item" />
|
</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'
|
import exchange from '../exchange'
|
import server from '../server'
|
import system from '../system'
|
|
export default {
|
name: "constructionList",
|
components: {
|
school,
|
constructionBatch,
|
reserveIp,
|
nvr,
|
ipc,
|
iot,
|
ai,
|
exchange,
|
server,
|
system
|
},
|
data() {
|
return {
|
loading: true,
|
activeName: 'first',
|
batchOpen: false,
|
ipOpen: false,
|
schoolId: undefined
|
}
|
},
|
methods: {
|
// 选择高校
|
schoolChange(v) {
|
this.schoolId = v;
|
this.activeName = 'second';
|
this.loading = false;
|
},
|
handleClick(tab, event) {
|
console.log(tab, event);
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.tree-view {
|
display: flex;
|
flex-direction: row;
|
width: 100%;
|
}
|
|
.tree-list {
|
margin-right: 10px;
|
}
|
|
.right-view {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
width: calc(100% - 280px);
|
position: relative;
|
box-sizing: border-box;
|
}
|
|
.right-view-title-icon {
|
display: flex;
|
flex-direction: row;
|
height: 40px;
|
align-items: center;
|
position: absolute;
|
top: 0;
|
right: 0;
|
}
|
.right-view-title-icon-item {
|
width: 20px;
|
height: 20px;
|
margin-left: 15px;
|
cursor: pointer;
|
}
|
</style>
|
