查看装置在线信息

src/views/stritl/index.vue

@@ -3,6 +3,12 @@
     <div class="echart-top">
       <el-card class="box-card" v-loading="numloading">
         <h3>装置数量统计</h3>
+        <el-button
+          class="lookBtn"
+          type="primary"
+          @click="dialogTableVisible = true"
+          >查看</el-button
+        >
         <div class="bottomM">
           <div class="infoBox">
             <p>
@@ -75,6 +81,34 @@
         ></div>
       </el-card>
     </div>
+    <el-dialog
+      class="exportDialog"
+      title="装置列表"
+      width="1020px"
+      :visible.sync="dialogTableVisible"
+    >
+      <div class="exportList">
+        <el-button class="exportbtn" type="primary">导出</el-button>
+        <el-table
+          :data="gridData"
+          stripe
+          tooltip-effect="dark"
+          height="calc(100% - 54px)"
+        >
+          <el-table-column
+            property="date"
+            label="日期"
+            width="150"
+          ></el-table-column>
+          <el-table-column
+            property="name"
+            label="姓名"
+            width="200"
+          ></el-table-column>
+          <el-table-column property="address" label="地址"></el-table-column>
+        </el-table>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -105,6 +139,69 @@ export default {
       barloading: false,
       pie2loading: false,
       zoom: 1,
+      dialogTableVisible: false,
+      gridData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+      ],
     };
   },
   created() {
@@ -422,6 +519,11 @@ export default {
         color: #333;
         line-height: 32px;
       }
+      .lookBtn {
+        position: absolute;
+        right: 20px;
+        top: 20px;
+      }
       .bottomM {
         .infoBox {
           display: flex;
@@ -479,4 +581,17 @@ export default {
     }
   }
 }
+.exportDialog {
+  .el-dialog__body {
+    //height: 400px;
+    height: 620px;
+    .exportList {
+      height: 100%;
+      .exportbtn {
+        margin-bottom: 12px;
+        float: right;
+      }
+    }
+  }
+}
 </style>