From c895d830b018a12c349703164618a136717700f6 Mon Sep 17 00:00:00 2001
From: lankuixing <799745985@qq.com>
Date: Wed, 28 Feb 2024 23:21:07 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E5=A2=9E=E5=8A=A0=E5=85=AC=E5=85=B1t?=
 =?UTF-8?q?able?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/CustomTable.vue    | 193 ++++++++++++++++++++++++++++
 pages/visual/PeakCoalView.vue |   2 +
 pages/visual/table/index.vue  | 229 ++++++++++++++++++++++++++++++++++
 3 files changed, 424 insertions(+)
 create mode 100644 components/CustomTable.vue
 create mode 100644 pages/visual/table/index.vue

diff --git a/components/CustomTable.vue b/components/CustomTable.vue
new file mode 100644
index 0000000..0fd5a16
--- /dev/null
+++ b/components/CustomTable.vue
@@ -0,0 +1,193 @@
+<!--自定义table-->
+<template>
+  <div class="custom-table">
+    <div class="check-data-info">
+      <div class="table-info">
+        <div class="table-header">
+          <span class="table-header-item" v-for="(item,index) of tableTitle"
+                :style="`width:${item.width};`">
+            {{ item.title }}
+          </span>
+        </div>
+        <div class="table-body">
+          <div class="table-item-body" v-for="item of dataSource">
+            <span class="data-content" v-for="dataIndex of tableTitle" :style="`width:${dataIndex.width};`">
+              <div class="_content">
+                <div class="point-name">
+              {{ item[dataIndex.dataIndex] }}
+                </div>
+
+            <div class="_icon" :class="getOddsRatioIcon(item[dataIndex.dataIndex],dataIndex.dataIndex)">
+
+            </div>
+              </div>
+
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CustomTable",
+  props: {
+    tableTitle: {
+      type: Array,
+      default: () => []
+    },
+    standardValue: {
+      type: Object,
+      default: () => {
+      }
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    //判断数值是上升还是下降
+    getOddsRatioIcon(val, valType) {
+      if (this.standardValue != null && this.standardValue[valType]) {
+        if (val > this.standardValue[valType]) {
+          return 'odds-ratio-up-icon'
+        } else if (val < this.standardValue[valType]) {
+          return 'odds-ratio-reduction-icon'
+        }
+      }
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.custom-table {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+
+  .check-data-info {
+    height: 100%;
+    width: 100%;
+    padding: 30px 20px 0 20px;
+
+    .table-info {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+
+      .table-header {
+        position: sticky;
+        top: 0;
+        height: 77px;
+        white-space: nowrap;
+        background-color: rgba(255, 255, 255, 1);
+        .table-header-item {
+          background-color: rgba(35, 140, 255, 0.2);
+          display: inline-block;
+          font-family: MicrosoftYaHei-Bold;
+          font-size: 29.97px;
+          color: #37EAFF;
+          letter-spacing: 0;
+          text-align: center;
+          line-height: 77px;
+          font-weight: 700;
+        }
+      }
+
+      .table-body {
+        height: calc(100% - 77px);
+
+        .table-item-body {
+          height: 77px;
+          margin-top: 20px;
+          width: 100%;
+          white-space: nowrap;
+
+          .data-content {
+            display: inline-block;
+            height: 77px;
+            background: rgba(21, 77, 160, 0.20);
+
+            ._content {
+              height: 100%;
+              width: 100%;
+              .flex-row;
+              justify-content: center;
+            }
+
+            .point-name {
+              font-family: MicrosoftYaHei-Bold;
+              font-size: 29.97px;
+              color: #FFFFFF;
+              letter-spacing: 0;
+              font-weight: 700;
+              text-align: center;
+              .text-ellipsis;
+            }
+
+            ._icon {
+            }
+          }
+
+          .odds-ratio-up-icon {
+            width: 23px;
+            height: 25px;
+            background: url("assets/peakCoalImages/left/odds-ratio-up-icon.png") no-repeat;
+            padding-left: 20px;
+          }
+
+          .odds-ratio-reduction-icon {
+            width: 22px;
+            height: 26px;
+            background: url("assets/peakCoalImages/left/odds-ratio-reduction-icon.png") no-repeat;
+            padding-left: 20px;
+          }
+
+
+          .data-value {
+            .flex-row;
+            justify-content: center;
+
+            ._value {
+              font-family: MicrosoftYaHei-Bold;
+              font-size: 29.97px;
+              color: #FFFFFF;
+              letter-spacing: 0;
+              text-align: center;
+              font-weight: 700;
+            }
+          }
+        }
+      }
+    }
+  }
+
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background-color: rgba(21, 77, 160, 0.20);;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  background-color: #d3dce6;
+}
+</style>
diff --git a/pages/visual/PeakCoalView.vue b/pages/visual/PeakCoalView.vue
index 80de90f..285c114 100644
--- a/pages/visual/PeakCoalView.vue
+++ b/pages/visual/PeakCoalView.vue
@@ -470,6 +470,7 @@ body, html, #__nuxt, #__layout {
 
 
   .left-icon {
+    z-index: 2;
     position: absolute;
     left: 0px;
     width: 531px;
@@ -478,6 +479,7 @@ body, html, #__nuxt, #__layout {
   }
 
   .right-icon {
+    z-index: 2;
     position: absolute;
     right: 0px;
     width: 531px;
diff --git a/pages/visual/table/index.vue b/pages/visual/table/index.vue
new file mode 100644
index 0000000..99ce562
--- /dev/null
+++ b/pages/visual/table/index.vue
@@ -0,0 +1,229 @@
+<template>
+  <div class="table-content">
+    <custom-table :table-title="tableTitle" :standard-value="standardValue" :data-source="dataSource"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "index",
+  data(){
+    return{
+      tableTitle: [
+        {
+          title: '监测设备',
+          dataIndex: 'pointName',
+          width: '160px'
+        },
+        {
+          title: '一氧化碳[0.5%VOL]',
+          dataIndex: 'COValue',
+          width: '160px'
+        },
+        {
+          title: '二氧化硫[30mg/m³]',
+          dataIndex: 'SO2Value',
+          width: '160px'
+        },
+        {
+          title: '氮氧化物[10mg/L]',
+          dataIndex: 'NOValue',
+          width: '160px'
+        },
+        {
+          title: '臭氧[80⏜ppm]',
+          dataIndex: 'O3Value',
+          width: '160px'
+        },
+        {
+          title: 'PM10[50μg/m³]',
+          dataIndex: 'PM10Value',
+          width: '160px'
+        }
+      ],
+      standardValue: {
+        COValue: 0.5,
+        SO2Value: 30,
+        NOValue: 10,
+        O3Value: 80,
+        PM10Value: 50
+      },
+      dataSource: [
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        }
+      ]
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.table-content {
+  height: 800px;
+  width: 1000px;
+}
+</style>