报警组件化

src/assets/styles/lend-manage.scss

@@ -112,8 +112,9 @@
   }
 }
 
-::v-deep .el-table__header-wrapper {
-  background: url('~@/assets/images/table_head_bg.png') no-repeat !important;
+.warehose-el-table ::v-deep .el-table__header-wrapper {
+  box-shadow: inset 0px 0px 6px 1px #339cff;
+  background: none !important;
 }
 
 ::v-deep .warehose-el-table .el-table__header .el-table__cell {

src/views/components/WarehouseWarning.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="warehouse-right container-wrap">
+    <span class="right-top-line" />
+    <span class="left-bottom-line" />
+    <h3 class=" table-title">
+      <p class="title-arrow">
+        <svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录
+      </p>
+    </h3>
+    <!--表格渲染-->
+    <el-table ref="table" style="min-width: 100%;" :width="width" :height="height" :data="tableData" class="warehose-el-table" :row-class-name="rowBgColor">
+      <el-table-column prop="time" label="时间" align="center" min-width="60" />
+      <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
+      <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
+    </el-table>
+  </div>
+</template>
+<script>
+import data1 from './data1.json'
+export default {
+  name: 'WarehouseWarning',
+  props: {
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      tableData: []
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      this.tableData = data1.rows
+    },
+    // 表格隔行变色
+    rowBgColor({ row, rowIndex }) {
+      if (rowIndex % 2 === 1) {
+        return 'light-blue'
+      } else {
+        return ''
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
+.warehouse-left{
+  position: relative;
+  h2{
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+    color: #fff;
+    font-size: 16px;
+  }
+}
+</style>

src/views/components/data1.json

@@ -0,0 +1,100 @@
+{
+  "rows":[
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    }
+
+  ]
+}

src/views/home.vue

@@ -120,20 +120,7 @@
         </el-col>
         <el-col :xs="24" :sm="24" :lg="8">
           <!-- 报警记录 -->
-          <div class="container-wrap">
-            <span class="right-top-line" />
-            <span class="left-bottom-line" />
-            <h3 class="table-title">
-              <p class="title-arrow">
-                <svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录
-              </p>
-            </h3>
-            <el-table ref="table" style="min-width: 100%;" height="100%" :data="tableData" class="warehose-el-table" stripe>
-              <el-table-column prop="time" label="时间" align="center" min-width="60" />
-              <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
-              <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
-            </el-table>
-          </div>
+          <warehouse-warning />
         </el-col>
       </el-row>
       <el-row :gutter="20" style="height: calc(50vh - 251px);">
@@ -192,6 +179,7 @@ import lendAcross from '@/views/components/echarts/lendAcross.vue'
 import catePie from '@/views/components/echarts/catePie.vue'
 import typePie from '@/views/components/echarts/typePie.vue'
 import data1 from './data1.json'
+import WarehouseWarning from '@/views/components/WarehouseWarning'
 
 // const lineChartData = {
 //   newVisitis: {
@@ -216,6 +204,7 @@ export default {
   name: 'Dashboard',
   components: {
     // GithubCorner,
+    WarehouseWarning,
     PanelGroup,
     // LineChart,
     // RadarChart,

src/views/storeManage/warehouse3D/collateRoom/index.vue

@@ -12,43 +12,20 @@
           scrolling="no"
         />
       </div>
-
-    </div>
-    <div class="warehouse-right container-wrap">
-      <span class="right-top-line" />
-      <span class="left-bottom-line" />
-      <h3 class=" table-title">
-        <p class="title-arrow"><svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录</p>
-      </h3>
-      <!--表格渲染-->
-      <el-table
-        ref="table"
-        style="min-width: 100%;"
-        height="calc(100vh - 235px)"
-        :data="tableData"
-        class="warehose-el-table"
-        :row-class-name="rowBgColor"
-      >
-        <el-table-column prop="time" label="时间" align="center" min-width="60" />
-        <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
-        <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
-      </el-table>
     </div>
+    <warehouse-warning :height="'calc(100vh - 235px)'" />
   </div>
 </template>
 
 <script>
-import data1 from '../data1.json'
+import WarehouseWarning from '@/views/components/WarehouseWarning'
 export default {
   name: 'CollateRoom',
+  components: { WarehouseWarning },
   data() {
     return {
-      tableData: []
     }
   },
-  created() {
-    this.getData()
-  },
   mounted() {
     const _this = this
     this.iframeWin = this.$refs.myIframe.contentWindow
@@ -71,7 +48,7 @@ export default {
           }
         ]
       }, '*')
-    },
+    }
     // 点击查看设备状况
     // handleMessageDevice(event) {
     //   const _this = this
@@ -87,17 +64,6 @@ export default {
     //     console.log(_this.deviceId)
     //   }
     // },
-    getData() {
-      this.tableData = data1.rows
-    },
-    // 表格隔行变色
-    rowBgColor({ row, rowIndex }) {
-      if (rowIndex % 2 === 1) {
-        return 'light-blue'
-      } else {
-        return ''
-      }
-    }
   }
 }
 </script>

src/views/storeManage/warehouse3D/fullView/index.vue

@@ -14,43 +14,20 @@
         />
       </div>
     </div>
-    <div class="warehouse-right container-wrap">
-      <span class="right-top-line" />
-      <span class="left-bottom-line" />
-      <h3 class=" table-title">
-        <p class="title-arrow"><svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录</p>
-      </h3>
-      <!--表格渲染-->
-      <el-table
-        ref="table"
-        style="min-width: 100%;"
-        height="100%"
-        :data="tableData"
-        class="warehose-el-table"
-        :row-class-name="rowBgColor"
-      >
-        <el-table-column prop="time" label="时间" align="center" min-width="60" />
-        <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
-        <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
-      </el-table>
-    </div>
+    <warehouse-warning :width="'458px'" />
   </div>
 </template>
 
 <script>
-import data1 from '../data1.json'
+import WarehouseWarning from '@/views/components/WarehouseWarning'
 export default {
   name: 'FullView',
+  components: { WarehouseWarning },
   data() {
     return {
-      tableData: [],
       cameraNameId: null
-
     }
   },
-  created() {
-    this.getData()
-  },
   mounted() {
     // 监听'全景图' iframe 获取摄像头name得id
     // window.addEventListener('message', this.handleMessageCamera)
@@ -63,17 +40,6 @@ export default {
     //     _this.cameraNameId = data
     //   }
     // },
-    getData() {
-      this.tableData = data1.rows
-    },
-    // 表格隔行变色
-    rowBgColor({ row, rowIndex }) {
-      if (rowIndex % 2 === 1) {
-        return 'light-blue'
-      } else {
-        return ''
-      }
-    },
     destroyed() {
       window.removeEventListener('message', this.handleMessageCamera)
     }

src/views/storeManage/warehouse3D/readRoom/index.vue

@@ -13,43 +13,21 @@
           scrolling="no"
         />
       </div>
-
-    </div>
-    <div class="warehouse-right container-wrap">
-      <span class="right-top-line" />
-      <span class="left-bottom-line" />
-      <h3 class=" table-title">
-        <p class="title-arrow"><svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录</p>
-      </h3>
-      <!--表格渲染-->
-      <el-table
-        ref="table"
-        style="min-width: 100%;"
-        height="calc(100vh - 235px)"
-        :data="tableData"
-        class="warehose-el-table"
-        :row-class-name="rowBgColor"
-      >
-        <el-table-column prop="time" label="时间" align="center" min-width="60" />
-        <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
-        <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
-      </el-table>
     </div>
+    <warehouse-warning :height="'calc(100vh - 235px)'" />
   </div>
 </template>
 
 <script>
-import data1 from '../data1.json'
+import WarehouseWarning from '@/views/components/WarehouseWarning'
 export default {
   name: 'ReadRoom',
+  components: { WarehouseWarning },
   data() {
     return {
       tableData: []
     }
   },
-  created() {
-    this.getData()
-  },
   mounted() {
     const _this = this
     this.iframeWin = this.$refs.myIframe.contentWindow
@@ -72,7 +50,7 @@ export default {
           }
         ]
       }, '*')
-    },
+    }
     // 点击查看设备状况
     // handleMessageDevice(event) {
     //   const _this = this
@@ -81,24 +59,12 @@ export default {
     //     _this.deviceId = data
     //   }
     // },
-    getData() {
-      this.tableData = data1.rows
-    },
-    // 表格隔行变色
-    rowBgColor({ row, rowIndex }) {
-      if (rowIndex % 2 === 1) {
-        return 'light-blue'
-      } else {
-        return ''
-      }
-    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '~@/assets/styles/lend-manage.scss';
-
   .warehouse-left{
     position: relative;
     h2{