新增组态展示

.env.development

 # just a flag
 ENV = 'development'
 
-
+port= 8080
 # base api
 VUE_APP_BASE_API = '/dev-api'
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/views/index/index.vue

 <template>
   <div>
-      <div class="pageindex">
-          <div class="index-top">
-            <div class="top-left">图</div>
-            <div class="top-right">状态</div>
-          </div>
-          <div class="index-bottom">
-            冷却器状态
-          </div>
+    <div class="left-bar">
+      <el-button :type="type == 1" @click="getType(1)">第一视角</el-button>
+      <el-button :type="type == 2" @click="getType(2)">第二视角</el-button>
+      <el-button :type="type == 3" @click="getType(3)">第三视角</el-button>
+      <el-button :type="type == 4" @click="getType(4)">第四视角</el-button>
+      <el-button :type="type == 5" @click="getType(5)">第五视角</el-button>
+      <el-button :type="type == 6" @click="getType(6)">第六视角</el-button>
     </div>
+    <pie> </pie>
   </div>
 </template>
 <script>
+import pie from '@/views/makePie/index.vue'
 export default {
+  components: {
+    pie: pie
+  },
   data() {
     return {
-      name: '特变电压器'
+      name: '特变电压器',
+      type: 1
     }
+  },
+  getType(e) {
+    console.log(e)
+    this.type = e
   }
 }
 </script>
 <style lang="scss" scoped>
-.pageindex{
-  
+.pageindex {
   width: 100%;
   height: 100%;
-  .index-top{
+  .index-top {
     display: flex;
-    .top-left{
+    .top-left {
       display: flex;
       width: 40%;
-      align-items:center;
+      align-items: center;
       justify-content: center;
       height: 400px;
-      border: 1px solid #EEE;
+      border: 1px solid #eee;
     }
-    .top-right{
+    .top-right {
       display: flex;
       width: 60%;
-      align-items:center;
+      align-items: center;
       justify-content: center;
       height: 400px;
-      border: 1px solid #EEE;
+      border: 1px solid #eee;
     }
   }
-  .index-bottom{
+  .index-bottom {
     display: flex;
-    align-items:center;
+    align-items: center;
 
     justify-content: center;
     height: 300px;
-      border: 1px solid #EEE;
+    border: 1px solid #eee;
   }
 }
 </style>