update 仪表盘

src/views/data-visible/dashboard/index.vue

 <template>
   <el-card class="container">
-    <el-tabs
-      v-model="activeModel"
-      tab-position="left"
-      @tab-click="onTabClick"
+    <el-row :gutter="20" class="content">
+      <el-col :xs="8" :sm="8" :md="6" :lg="4">
+        <div class="left">
+          <div class="search">
+            <el-select v-model="eModel" style="width: 100%">
+              <el-option
+                v-for="item in eModelList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
               >
-      <el-tab-pane
-        v-for="(model, index) in modelList"
-        :key="index"
-        :label="model.name"
-        :name="model.id.toString()"
+              </el-option>
+            </el-select>
+          </div>
+          <div class="custom-menu">
+            <el-menu
+              ref="customMenu"
+              default-active="1"
             >
-        <div v-if="activeModel === model.id.toString()">
+              <el-menu-item
+                v-for="(model, index) in eInstanceList"
+                :key="'model' + index"
+                :index="model.id.toString()"
+              >{{ model.name }}</el-menu-item>
+            </el-menu>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="16" :sm="16" :md="18" :lg="20">
         <el-form
           :ref="'form'+activeModel"
           :model="chartField"
@@ -79,9 +96,8 @@
             ></e-line>
           </el-col>
         </el-row>
-        </div>
-      </el-tab-pane>
-    </el-tabs>
+      </el-col>
+    </el-row>
   </el-card>
 </template>
 
@@ -108,6 +124,35 @@ export default {
       count: 0,
       instanceList: [],
       propertyList: [],
+      eModel: 1,
+      eModelList: [
+        {
+          value: 1,
+          label: '设备模型一'
+        },
+        {
+          value: 2,
+          label: '设备模型二'
+        }
+      ],
+      eInstanceList: [
+        {
+          id: 1,
+          name: '设备实例一'
+        },
+        {
+          id: 2,
+          name: '设备实例二'
+        },
+        {
+          id: 3,
+          name: '设备实例三'
+        },
+        {
+          id: 4,
+          name: '设备实例四'
+        }
+      ],
       chartData: [],
       chartList: [],
       rules: {
@@ -167,7 +212,7 @@ export default {
     },
     createCharts() {
       const form = `form${this.activeModel}`
-      this.$refs[form][0].validate()
+      this.$refs[form].validate()
         .then(_ => {
           this.chartData = []
           this.chartList = []
@@ -208,6 +253,39 @@ export default {
 
 <style lang="scss" scoped>
 .container{
-  min-height: calc(100vh - 90px);
+  min-height: calc(100vh - 95px);
+  .content{
+    display: flex;
+    min-height: calc(100vh - 135px);
+    .left{
+      width: 100%;
+      height: 100%;
+      .search{
+        height: 40px;
+      }
+      .custom-menu{
+        background-color: #efeff1;
+        height: calc(100% - 40px);
+        .el-menu{
+          background-color: initial;
+          border-right: none;
+          border-top: solid 1px #e6e6e6;
+          border-left: solid 1px #e6e6e6;
+          .el-menu-item.el-menu-item{
+            min-width: initial;
+            background-color: #efeff1;
+          }
+          .el-menu-item.is-active{
+            background-color: #fff;
+            color: #303133;
+          }
+        }
+      }
+    }
+    .top{
+      display: flex;
+      justify-content: space-between;
+    }
+  }
 }
 </style>