室外气象数据

src/pages/kb/indoor/index.vue

 <template lang="pug">
 card-warp(title="室内气象数据" height='45px' showBackground )
     div(slot='right')
-        router-link.margin-lr-20(:to="{name:'analysis-indoor'}")
+        router-link(:to="{name:'analysis-indoor'}")
             el-button(size='mini' type='primary') 综合图形
     div(slot="content", style="height: 90%")
         el-tabs.myTabs(v-model="activeName", @tab-click="tabClick")

src/pages/kb/outdoor/index.vue

 <template lang="pug">
 card-warp(title="室外气象数据" height='45px' showBackground )
-    div(slot='right')
-        el-button(size='mini' type='primary') 综合图形
+
     div(slot="content", style="height: 90%")
         el-tabs.myTabs(v-model="activeName", @tab-click="tabClick")
             el-tab-pane(label="候车室区域", name="1")
@@ -17,8 +16,9 @@ card-warp(title="室外气象数据" height='45px' showBackground )
                 p.color-blue
                     span.num mock
                     span.unit 11
-
-        el-table(size="mini" :data='dataList'   stripe v-loading='dataListLoading'  style='width: 100%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }")
+        div.clearfix
+            el-button(size='mini' type='primary' style='float:right;margin-bottom:10px;' @click='toggle') 图形 / 列表
+        el-table( v-if='showList' size="mini" :data='dataList'   stripe v-loading='dataListLoading'  style='width: 100%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }")
             el-table-column(:resizable="false" type="index" header-align='center'  align='center' width="50" label='序号')
             el-table-column(:resizable="false" prop='visitorId' header-align='center'  align='center' width='240' label='设备编号')
             el-table-column(:resizable="false" prop='visitorId' header-align='center'  align='center' width='240' label='设备名称')
@@ -34,8 +34,24 @@ card-warp(title="室外气象数据" height='45px' showBackground )
                 template(slot-scope='scope')
                     el-button(type='text' size='small'  @click='showParams(scope.row)') 历史数据
                     el-button(type='text' size='small'  @click='showParams(scope.row)') 统计图表
-        tablePagination(:pageSize="pageSize" :totalSize="totalPage" @parentMethod='getDataList')
-
+            tablePagination(:pageSize="pageSize" :totalSize="totalPage" @parentMethod='getDataList')
+        .echartsWarp(v-else width="100%", flex)
+            div
+                chart
+            div
+                chart2
+            div
+                chart3
+            div
+                chart4
+            div
+                chart5
+            div
+                chart6
+            div
+                chart7
+            div
+                pie8
 </template>
 
 <script>
@@ -62,6 +78,7 @@ export default {
     },
     data() {
         return {
+            showList: false,
             activeName: '1',
             dataList: [{ id: 1 }],
             dataListLoading: false,
@@ -81,6 +98,9 @@ export default {
         }
     },
     methods: {
+        toggle() {
+            this.showList = !this.showList
+        },
         tabClick(tab, event) {
             console.log(tab, event)
         },
@@ -153,4 +173,41 @@ export default {
         }
     }
 }
+.echartsWarp {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    height: calc(100vh - 380px);
+    margin-bottom: 90px;
+    > div {
+        width: 22%;
+        height: calc(90% / 2);
+        margin: 3px;
+        padding: 13px;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+        .title {
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 600;
+            color: #000000;
+            line-height: 40px;
+            &::before {
+                content: "";
+                display: inline-block;
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                background: #0097ff;
+                margin: 0 10px;
+            }
+        }
+    }
+}
+.clearfix:after{
+    content: '';
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+}
 </style>