From b05640960d38a08def00a44b44aa11ef216f911f Mon Sep 17 00:00:00 2001
From: liuchengxin <13104445455@163.com>
Date: 星期二, 17 五月 2022 16:13:09 +0800
Subject: [PATCH] 样式修改

---
 src/views/construction/constructionList/index.vue |  125 ++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 122 insertions(+), 3 deletions(-)

diff --git a/src/views/construction/constructionList/index.vue b/src/views/construction/constructionList/index.vue
index d0207e0..97929f0 100644
--- a/src/views/construction/constructionList/index.vue
+++ b/src/views/construction/constructionList/index.vue
@@ -1,15 +1,134 @@
 <template>
-  <div>
+  <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"
+  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%;
+}
 
-</style>
\ No newline at end of file
+.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>

--
Gitblit v1.9.1