消防监测导出

resources/js/views/monitor/fire.vue

@@ -40,6 +40,11 @@
       <el-form-item>
         <el-button type="primary" @click="onSubmit">查询</el-button>
       </el-form-item>
+      <el-form-item>
+        <el-button v-if="device != '' " v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
+          {{ $t('table.export') }}
+        </el-button>
+      </el-form-item>
     </el-form>
     <el-table :key="tableKey" v-loading="loading" :data="device" border fit highlight-current-rows>
       <el-table-column align="center" label="ID" width="80">
@@ -72,6 +77,11 @@
           <span>{{ scope.row.gas }}</span>
         </template>
       </el-table-column>
+      <el-table-column align="center" label="切断装置" width="170">
+        <template slot-scope="scope">
+          <span>{{ shutoffDevice(scope.row.shutoff_type) }}</span>
+        </template>
+      </el-table-column>
       <el-table-column align="center" label="检测值" width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.nd }}</span>
@@ -82,6 +92,13 @@
           <span>{{ scope.row.danwei }}</span>
         </template>
       </el-table-column>
+      <el-table-column align="center" label="切断装置状态" width="120">
+        <template slot-scope="scope">
+          <span>
+            <el-tag :type=" scope.row.shutoff_status==1 ? 'success' : 'warning' " effect="dark">{{ shutoffStatus(scope.row.shutoff_status) }}</el-tag>
+          </span>
+        </template>
+      </el-table-column>
       <el-table-column align="center" label="实时状态" width="120">
         <template slot-scope="scope">
           <span>
@@ -117,11 +134,15 @@ import { control } from '@/api/device';
 import Pagination from '@/components/Pagination'; // 分页
 import websocketurl from '@/api/configurl';
 import clip from '@/utils/clipboard';
+import waves from '@/directive/waves'; // 水波纹效果
+import { parseTime } from '@/utils';
 export default {
   name: 'Devicetype',
+  directives: { waves },
   components: { Pagination },
   data() {
     return {
+      downloadLoading: false,
       tableKey: 0,
       loading: true,
       device: [],
@@ -223,6 +244,21 @@ export default {
   },
 
   methods: {
+    // 切断装置
+    shutoffDevice(id) {
+      const shutoff_types = [];
+      shutoff_types[0] = '未绑定';
+      shutoff_types[1] = '电磁阀';
+      shutoff_types[2] = '机械手';
+      return shutoff_types[id];
+    },
+    shutoffStatus(id) {
+      const shutoff = [];
+      shutoff[0] = '初始化';
+      shutoff[1] = '开启';
+      shutoff[2] = '关闭';
+      return shutoff[id];
+    },
     onSubmit() {
       this.formSearch.page = 1;
       this.devicelist();
@@ -294,6 +330,34 @@ export default {
     handleCopyphone(text, event){
       clip(text, event);
     },
+    // 导出到excel
+    handleDownload() {
+      this.downloadLoading = true;
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['ID', '设备编号', '设备名称', '设备详情', '设备类型', '检测介质', '切断装置', '单位', '切断装置状态', '实时状态', '最后更新时间'];
+        const filterVal = ['id', 'devicenum', 'username', 'deviceinfo', 'tname', 'gas', 'shutoff_type', 'danwei', 'shutoff_status', 'status_name', 'update_time'];
+        const data = this.formatJson(filterVal, this.device);
+        excel.export_json_to_excel({
+          header: tHeader,
+          data,
+          filename: '消防监测',
+        });
+        this.downloadLoading = false;
+      });
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => {
+        if (j === 'shutoff_type') {
+          return this.shutoffDevice(v[j]);
+        } else if (j === 'shutoff_status') {
+          return this.shutoffStatus(v[j]);
+        } else if (j === 'update_time') {
+          return parseTime(v[j]);
+        } else {
+          return v[j];
+        }
+      }));
+    },
   },
 };
 </script>