[Feat 0000]需求修改

pages/filecenter/filecenter.vue

@@ -7,13 +7,13 @@
       :safeAreaInsetTop="true"
       @leftClick="fileTreeShow"
     >
-      <!-- <view class="u-nav-slot" slot="left">
+      <view class="u-nav-slot" slot="left">
         <u-icon name="list" size="20"> </u-icon>
-      </view> -->
+      </view>
     </u-navbar>
-    <!-- <view v-if="menushow" class="menupage">
+    <view v-if="menushow" class="menupage">
       <FileTreeMenu @menuClick="menuClick"></FileTreeMenu>
-    </view> -->
+    </view>
     <view v-if="!menushow" class="container">
       <view class="main">
         <view class="fileArea" style="margin-top: 15px">
@@ -266,11 +266,11 @@
 <script>
 import api from "@/api/api";
 import configService from "../../common/service/config.service";
-// import FileTreeMenu from "./treeMenu/fileTreeMenu.vue";
+import FileTreeMenu from "./treeMenu/fileTreeMenu.vue";
 export default {
-  // components: {
-  //   FileTreeMenu,
-  // },
+  components: {
+    FileTreeMenu,
+  },
   name: "filecenter",
   watch: {},
   data() {

pages/filecenter/treeMenu/fileTreeMenu.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <ul>
+      <tree-node
+        v-for="node in treeData"
+        :key="node.id"
+        :node="node"
+      ></tree-node>
+    </ul>
+  </div>
+</template>
+
+      <script>
+const TreeNode = {
+  props: ["node"],
+};
+
+export default {
+  name: "FileTreeMenu",
+  components: {
+    TreeNode,
+  },
+  data() {
+    return {
+      treeData: [
+        {
+          id: 1,
+          name: "Node 1",
+          children: [
+            {
+              id: 2,
+              name: "Node 1.1",
+              children: [],
+            },
+            {
+              id: 3,
+              name: "Node 1.2",
+              children: [],
+            },
+          ],
+        },
+        {
+          id: 4,
+          name: "Node 2",
+          children: [],
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+ul {
+  list-style-type: none;
+  padding-left: 20px;
+}
+</style>

pages/warndata/components/device-detail.vue

@@ -1,28 +1,67 @@
 <template>
   <view class="device-detail">
-    <u-tabs class="devic-box-tab" :current="PageCur" :list="tabList" @click="NavChange"></u-tabs>
+    <u-tabs
+      class="devic-box-tab"
+      :current="PageCur"
+      :list="tabList"
+      @click="NavChange"
+    ></u-tabs>
     <view class="device-content">
       <view class="top-area">
-        <view class="date-box" style="margin-bottom: 10px;">
+        <view class="date-box" style="margin-bottom: 10px">
           <view class="date-text">开始时间:</view>
-          <uni-datetime-picker :clear-icon="false" placeholder="请选择开始时间..." :disabled="isDisabled" type="datetime"
-            v-model="datetimeStart" @change="changeStart" />
-          <u-button type="primary" size="small" :disabled="isDisabled" @click="getSearch">查询</u-button>
+          <uni-datetime-picker
+            :clear-icon="false"
+            placeholder="请选择开始时间..."
+            :disabled="isDisabled"
+            type="datetime"
+            v-model="datetimeStart"
+            @change="changeStart"
+          />
+          <u-button
+            type="primary"
+            size="small"
+            :disabled="isDisabled"
+            @click="getSearch"
+            >查询</u-button
+          >
         </view>
         <view class="date-box">
           <view class="date-text">结束时间:</view>
-          <uni-datetime-picker :clear-icon="false" placeholder="请选择结束时间..." :disabled="isDisabled" type="datetime"
-            v-model="datetimeEnd" @change="changeEnd" />
-          <u-button type="primary" size="small" :disabled="isDisabled" @click="getReset">重置</u-button>
+          <uni-datetime-picker
+            :clear-icon="false"
+            placeholder="请选择结束时间..."
+            :disabled="isDisabled"
+            type="datetime"
+            v-model="datetimeEnd"
+            @change="changeEnd"
+          />
+          <u-button
+            type="primary"
+            size="small"
+            :disabled="isDisabled"
+            @click="getReset"
+            >重置</u-button
+          >
         </view>
       </view>
       <view class="bot-area">
         <view class="h-table">
           <view class="table-head" v-if="isDisabled">
-            <view class="head-item" v-for="(item, index) in headList" :key="index">{{ item.title }}</view>
+            <view
+              class="head-item"
+              v-for="(item, index) in headList"
+              :key="index"
+              >{{ item.title }}</view
+            >
           </view>
           <view class="table-headHis" v-else>
-            <view class="head-item" v-for="(item, index) in headListHis" :key="index">{{ item.title }}</view>
+            <view
+              class="head-item"
+              v-for="(item, index) in headListHis"
+              :key="index"
+              >{{ item.title }}</view
+            >
           </view>
           <view class="table-content" v-if="isDisabled">
             <view class="content-tr" v-for="(ite, ind) in tableData" :key="ind">
@@ -34,7 +73,11 @@
             </view>
           </view>
           <view class="table-contentHis" v-else>
-            <view class="content-tr" v-for="(ite, ind) in tableDataHis" :key="ind">
+            <view
+              class="content-tr"
+              v-for="(ite, ind) in tableDataHis"
+              :key="ind"
+            >
               <view class="content-td td">{{ ite.devicename }}</view>
               <view class="content-td td1">{{ ite.nwartype_dictText }}</view>
               <view class="content-td td2">{{ ite.starttime }}</view>
@@ -44,21 +87,17 @@
           </view>
         </view>
       </view>
-
-
-
     </view>
-
   </view>
 </template>
 
 <script>
 import api from "@/api/api";
-import uniDatetimePicker from '../../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue';
+import uniDatetimePicker from "../../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
 export default {
-  name: 'deviceDetail',
+  name: "deviceDetail",
   components: {
-    uniDatetimePicker
+    uniDatetimePicker,
   },
   props: {},
   watch: {},
@@ -68,52 +107,48 @@ export default {
       datetimeStart: null,
       datetimeEnd: null,
       PageCur: "0",
-      tabList: [
-        { name: '实时预警' },
-        { name: '报警历史' },
-      ],
+      tabList: [{ name: "实时预警" }, { name: "报警历史" }],
       headList: [
-        { title: '设备名称' },
-        { title: '报警类型' },
-        { title: '报警开始时间' },
+        { title: "设备名称" },
+        { title: "报警类型" },
+        { title: "报警开始时间" },
         // { title: '报警持续时间' },
-        { title: '报警描述' },
+        { title: "报警描述" },
       ],
       headListHis: [
-        { title: '设备名称' },
-        { title: '报警类型' },
-        { title: '开始时间' },
-        { title: '持续时间' },
-        { title: '报警描述' },
+        { title: "设备名称" },
+        { title: "报警类型" },
+        { title: "开始时间" },
+        { title: "持续时间" },
+        { title: "报警描述" },
       ],
       tableData: [],
       tableDataHis: [],
     };
   },
   mounted() {
-    this.getTableList()
-
+    this.getTableList();
   },
   methods: {
     NavChange: function (item) {
       this.PageCur = item.index;
-      this.isDisabled = item.index ? false : true
+      this.isDisabled = item.index ? false : true;
       if (item.index) {
-        this.datetimeStart= Date.now() - 1 * 24 * 3600 * 1000,
-        this.datetimeEnd= Date.now(),
-        this.getHistoryList()
+        (this.datetimeStart = Date.now() - 1 * 24 * 3600 * 1000),
+          (this.datetimeEnd = Date.now()),
+          this.getHistoryList();
       } else {
-        this.getTableList()
+        this.getTableList();
       }
     },
     //开始时间选项切换
     changeStart(date) {
-      console.log(date, 'date------------')
-      this.datetimeStart = date
+      console.log(date, "date------------");
+      this.datetimeStart = date;
     },
     //结束时间选项切换
     changeEnd(date) {
-      this.datetimeEnd = date
+      this.datetimeEnd = date;
     },
     //获取实时监测列表数据
     getTableList() {
@@ -122,9 +157,9 @@ export default {
           .warningList({ isok: 0 })
           .then((response) => {
             if (response.data.code == 200) {
-              console.log(response.data, '设备详情数据-------')
-              let data = response.data.result
-              this.tableData = data.list
+              console.log(response.data, "设备详情数据-------");
+              let data = response.data.result;
+              this.tableData = data.list;
             } else {
               reject(response);
             }
@@ -139,12 +174,17 @@ export default {
     getHistoryList() {
       new Promise((resolve, reject) => {
         api
-          .historyList({ pages: 1, size: 200, starttime_begin: this.datetimeStart, starttime_end: this.datetimeEnd })
+          .historyList({
+            pages: 1,
+            size: 200,
+            starttime_begin: this.datetimeStart,
+            starttime_end: this.datetimeEnd,
+          })
           .then((response) => {
             if (response.data.code == 200) {
-              console.log(response.data, '设备历史详情数据-------')
-              let data = response.data.result
-              this.tableDataHis = data.records
+              console.log(response.data, "设备历史详情数据-------");
+              let data = response.data.result;
+              this.tableDataHis = data.records;
             } else {
               reject(response);
             }
@@ -157,14 +197,14 @@ export default {
     },
     //查询列表数据
     getSearch() {
-      this.getHistoryList()
+      this.getHistoryList();
     },
     //重置列表数据
     getReset() {
-      this.datetimeStart = Date.now() - 1 * 24 * 3600 * 1000
-      this.datetimeEnd = Date.now()
-      this.getHistoryList()
-    }
+      this.datetimeStart = Date.now() - 1 * 24 * 3600 * 1000;
+      this.datetimeEnd = Date.now();
+      this.getHistoryList();
+    },
   },
   computed: {},
 };
@@ -180,7 +220,6 @@ export default {
   }
 
   .device-content {
-    height: 704px;
     box-sizing: border-box;
     overflow-y: auto;
 
@@ -188,7 +227,7 @@ export default {
       width: 100%;
       padding: 10px;
       box-sizing: border-box;
-      background-color: #FFF;
+      background-color: #fff;
       margin-bottom: 2px;
 
       .date-box {
@@ -258,8 +297,6 @@ export default {
             &:nth-child(4) {
               width: 25%;
             }
-
-
           }
         }
 
@@ -346,8 +383,6 @@ export default {
             .td3 {
               width: 25%;
             }
-
-
           }
         }
 
@@ -399,8 +434,6 @@ export default {
             .td4 {
               width: 20%;
             }
-
-
           }
         }
       }

pages/warndata/components/dust-detail.vue

@@ -1,77 +1,95 @@
 <template>
   <view class="dust-detail">
-    <u-tabs class="devic-box-tab" :current="PageCur" :list="tabList" @click="NavChange"></u-tabs>
+    <u-tabs
+      class="devic-box-tab"
+      :current="PageCur"
+      :list="tabList"
+      @click="NavChange"
+    ></u-tabs>
     <view class="dust-content">
       <view class="top-area" v-for="(item, index) in topList" :key="index">
         <view class="top-title">
-          <view style="font-weight: bold;">{{ item.label }}</view>
+          <view style="font-weight: bold">{{ item.label }}</view>
         </view>
         <view class="top-card">
           <view class="card-item card-item1">
             <view class="item-box item-box1">
-              <view class="box-val">{{ item.temperature || '--' }}</view>
+              <view class="box-val">{{ item.temperature || "--" }}</view>
               <view class="box-name">温度(℃)</view>
             </view>
           </view>
           <view class="card-item card-item1">
             <view class="item-box item-box2">
-              <view class="box-val">{{ item.dustval || '--' }}</view>
+              <view class="box-val">{{ item.dustval || "--" }}</view>
               <view class="box-name">粉尘浓度(mg/m³)</view>
             </view>
           </view>
           <view class="card-item">
             <view class="item-box item-box3">
-              <view class="box-val">{{ item.waterPressure || '--' }}</view>
+              <view class="box-val">{{ item.waterPressure || "--" }}</view>
               <view class="box-name">喷雾水压(MPa)</view>
             </view>
           </view>
           <view class="card-item">
             <view class="item-box item-box4">
-              <view class="box-val">{{ item.atomizingState || '--' }}</view>
+              <view class="box-val">{{ item.atomizingState || "--" }}</view>
               <view class="box-name">喷雾状态</view>
             </view>
           </view>
         </view>
         <view class="top-echart">
-          <canvas :id="`myChart${index}`" :style="{ width: '100%', height: '220px' }"></canvas>
+          <canvas
+            :id="`myChart${index}`"
+            :style="{ width: '100%', height: '220px' }"
+          ></canvas>
         </view>
       </view>
       <view class="bot-area">
         <view class="bot-title">
-          <view style="font-weight: bold;">粉尘监控测点信息</view>
+          <view style="font-weight: bold">粉尘监控测点信息</view>
         </view>
         <view class="bot-content">
-          <view class="card-b" v-for="(item, index) in cardListDust" :key="index">
+          <view
+            class="card-b"
+            v-for="(item, index) in cardListDust"
+            :key="index"
+          >
             <div class="item-l">
-              <div class="label-l">{{ item.label || '--' }}</div>
-              <div class="value-l">{{ item.value || '--' }}</div>
+              <div class="label-l">{{ item.label || "--" }}</div>
+              <div class="value-l">{{ item.value || "--" }}</div>
             </div>
             <div class="item-r">
-              <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
+              <div
+                class="content-r"
+                v-for="(items, ind) in item.listR"
+                :key="ind"
+              >
                 <span>{{ `${items.label} : ` }}</span>
-                <span :class="{
-                  'status-f': items.value == 1,
-                  'status-l': items.value == 0,
-                }">{{ `${items.value}${items.dw}` || '--' }}</span>
+                <span
+                  :class="{
+                    'status-f': items.value == 1,
+                    'status-l': items.value == 0,
+                  }"
+                  >{{ `${items.value}${items.dw}` || "--" }}</span
+                >
               </div>
             </div>
           </view>
         </view>
       </view>
     </view>
-
   </view>
 </template>
 
 <script>
 import api from "@/api/api";
 export default {
-  name: 'dustDetail',
+  name: "dustDetail",
   props: {},
   watch: {},
   data() {
     return {
-      timer: '',
+      timer: "",
       PageCur: "0",
       tabList: [],
       //喷粉选项数据
@@ -84,30 +102,30 @@ export default {
       yDataY: [],
       yDataS: [],
       maxY: 0,
-      cardListDust: []
+      cardListDust: [],
     };
   },
   beforeDestroy() {
-    this.myChart.clear()
-    this.myChart.dispose()
-    this.timer = null
-    clearTimeout(this.timer)
+    this.myChart.clear();
+    this.myChart.dispose();
+    this.timer = null;
+    clearTimeout(this.timer);
   },
   mounted() {
-    this.getTabList()
-    this.getWindDeviceList()
+    this.getTabList();
+    this.getWindDeviceList();
   },
   methods: {
     NavChange: function (item) {
-      clearTimeout(this.timer)
+      clearTimeout(this.timer);
       this.PageCur = item.index;
       this.getMonitor(this.tabList[this.PageCur].deviceID, true);
     },
     getMonitor(deviceID, flag) {
-      let than = this
+      let than = this;
       than.timer = setTimeout(
         async () => {
-          await than.getSysWarnList(deviceID, 'dust');
+          await than.getSysWarnList(deviceID, "dust");
           if (than.timer) {
             than.timer = null;
           }
@@ -119,18 +137,18 @@ export default {
 
     //获取顶部tab选项数据
     getTabList() {
-      this.tabList = []
+      this.tabList = [];
       new Promise((resolve, reject) => {
         api
-          .sysTypeWarn({ type: 'dust' })
+          .sysTypeWarn({ type: "dust" })
           .then((response) => {
             if (response.data.code == 200 && response.data.result.length != 0) {
-              let result = response.data.result
-              console.log(result, '粉尘菜单---------')
+              let result = response.data.result;
+              console.log(result, "粉尘菜单---------");
               result.forEach((el) => {
                 this.tabList.push({
                   name: el.systemname,
-                  warn: '低风险',
+                  warn: "低风险",
                   deviceID: el.id,
                   strtype: el.strtype,
                 });
@@ -148,46 +166,64 @@ export default {
     },
     //获取喷粉选项数据
     getSysWarnList(id, type) {
-      let that = this
+      let that = this;
       new Promise((resolve, reject) => {
         api
           .sysWarn({ sysid: id, type: type })
           .then((response) => {
             if (response.data.code == 200) {
-              console.log(response.data, '喷粉选项数据---------')
-              let data = response.data.result.dust
+              console.log(response.data, "喷粉选项数据---------");
+              let data = response.data.result.dust;
               if (data.length != 0) {
-                that.topList = data.map(el => {
-                  return { label: el.strinstallpos, temperature: el.readData.temperature, dustval: el.readData.dustval, waterPressure: el.readData.waterPressure, atomizingState: el.readData.atomizingState }
-                })
+                that.topList = data.map((el) => {
+                  return {
+                    label: el.strinstallpos,
+                    temperature: el.readData.temperature,
+                    dustval: el.readData.dustval,
+                    waterPressure: el.readData.waterPressure,
+                    atomizingState: el.readData.atomizingState,
+                  };
+                });
 
                 data.forEach((v, index) => {
                   if (that.flag) {
-                    that.echartNow = JSON.parse(v.readData.expectInfo)['list']
-                    that.flag = false
+                    that.echartNow = JSON.parse(v.readData.expectInfo)["list"];
+                    that.flag = false;
                   }
-                  that.echartYc.push({ time: JSON.parse(v.readData.expectInfo)['nowTime'], value: JSON.parse(v.readData.expectInfo)['nowVal'] })
-                  let setData = [...that.echartNow, ...that.echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)))
-                  that.xData = []
-                  that.yDataS = []
-                  that.yDataY = []
-                  that.yDataN = []
-                  setData.forEach(el => {
-                    if (el.value && el.value != '0') {
+                  that.echartYc.push({
+                    time: JSON.parse(v.readData.expectInfo)["nowTime"],
+                    value: JSON.parse(v.readData.expectInfo)["nowVal"],
+                  });
+                  let setData = [...that.echartNow, ...that.echartYc].sort(
+                    (a, b) =>
+                      Date.parse(new Date(a.time)) -
+                      Date.parse(new Date(b.time))
+                  );
+                  that.xData = [];
+                  that.yDataS = [];
+                  that.yDataY = [];
+                  that.yDataN = [];
+                  setData.forEach((el) => {
+                    if (el.value && el.value != "0") {
                       that.xData.push(el.time);
                       that.yDataS.push(el.value);
-                      that.yDataY.push(JSON.parse(v.readData.expectInfo)['aveVal']);
-                      that.yDataN.push(JSON.parse(v.readData.expectInfo)['fmin'] ? JSON.parse(v.readData.expectInfo)['fmin'] : 0);
+                      that.yDataY.push(
+                        JSON.parse(v.readData.expectInfo)["aveVal"]
+                      );
+                      that.yDataN.push(
+                        JSON.parse(v.readData.expectInfo)["fmin"]
+                          ? JSON.parse(v.readData.expectInfo)["fmin"]
+                          : 0
+                      );
                     }
-                  })
+                  });
                   let max = that.yDataS.reduce((acr, cur) => {
                     return acr > cur ? acr : cur;
                   });
                   that.maxY = that.formatRoundNum(max * 1.5);
                   // console.log(that.xData, that.yDataS, that.yDataY, that.yDataN, '000')
-                  that.initChart(index)
-                })
-
+                  that.initChart(index);
+                });
               }
             } else {
               reject(response);
@@ -203,27 +239,60 @@ export default {
     getWindDeviceList() {
       new Promise((resolve, reject) => {
         api
-          .getDeviceVent({ devicetype: 'dusting', pagetype: 'normal' })
+          .getDeviceVent({ devicetype: "dusting", pagetype: "normal" })
           .then((response) => {
             if (response.data.code == 200) {
-              let data = response.data.result
+              let data = response.data.result;
               if (data.msgTxt[0].datalist.length != 0) {
                 let list = data.msgTxt[0].datalist;
                 if (list.length > 0) {
-                  this.cardListDust = list.map((el) => {//lxh
+                  this.cardListDust = list.map((el) => {
+                    //lxh
                     const readData = el.readData;
                     el = Object.assign(el, readData);
                     return {
-                      label: '通信状态',
-                      value: el.netStatus == '0' ? '断开' : '连接',
+                      label: "通信状态",
+                      value: el.netStatus == "0" ? "断开" : "连接",
                       listR: [
-                        { id: 0, label: '安装位置', dw: '', value: el.strinstallpos },
-                        { id: 1, label: '粉尘浓度', dw: '(mg/m³)', value: el.dustval },
-                        { id: 2, label: '巷道湿度', dw: '(RH)', value: el.humidity },
-                        { id: 4, label: '巷道温度', dw: '(℃)', value: el.temperature },
-                        { id: 3, label: '是否报警', dw: '', value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测' },
+                        {
+                          id: 0,
+                          label: "安装位置",
+                          dw: "",
+                          value: el.strinstallpos,
+                        },
+                        {
+                          id: 1,
+                          label: "粉尘浓度",
+                          dw: "(mg/m³)",
+                          value: el.dustval,
+                        },
+                        {
+                          id: 2,
+                          label: "巷道湿度",
+                          dw: "(RH)",
+                          value: el.humidity,
+                        },
+                        {
+                          id: 4,
+                          label: "巷道温度",
+                          dw: "(℃)",
+                          value: el.temperature,
+                        },
+                        {
+                          id: 3,
+                          label: "是否报警",
+                          dw: "",
+                          value:
+                            el.warnFlag == "0"
+                              ? "正常"
+                              : el.warnFlag == 1
+                              ? "报警"
+                              : el.warnFlag == 2
+                              ? "断开"
+                              : "未监测",
+                        },
                       ],
-                    }
+                    };
                   });
                 }
               }
@@ -236,76 +305,76 @@ export default {
             reject(error);
           });
       });
-
-
     },
     formatRoundNum(num) {
       let interger = Math.ceil(num);
       let leng = String(interger).length;
-      return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1);
+      return (
+        Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1)
+      );
     },
     //初始化echarts实例
     initChart(index) {
       let canvas = document.getElementById(`myChart${index}`);
-      this.myChart = this.$echarts.init(canvas)
+      this.myChart = this.$echarts.init(canvas);
       let option = {
         grid: {
-          top: '20%',
-          left: '2%',
-          bottom: '4%',
-          right: '2%',
+          top: "20%",
+          left: "2%",
+          bottom: "4%",
+          right: "2%",
           containLabel: true,
         },
         tooltip: {
-          trigger: 'item',
-          backgroundColor: 'rgba(0, 0, 0, .6)',
+          trigger: "item",
+          backgroundColor: "rgba(0, 0, 0, .6)",
           textStyle: {
-            color: '#fff',
+            color: "#fff",
             fontSize: 12,
           },
         },
         legend: {
           // align: 'center',
-          right: '0%',
-          top: '0%',
-          type: 'plain',
+          right: "0%",
+          top: "0%",
+          type: "plain",
           textStyle: {
-            color: '#0eb4fc',
+            color: "#0eb4fc",
             fontSize: 12,
           },
           // icon:'rect',
           itemGap: 25,
           itemWidth: 20,
-          icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+          icon: "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
           data: [
             {
-              name: '实时值',
+              name: "实时值",
             },
             {
-              name: '预测值',
+              name: "预测值",
             },
 
             {
-              name: '最新值'
-            }
+              name: "最新值",
+            },
           ],
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             boundaryGap: false,
             axisLabel: {
               // formatter: '{value}',
               fontSize: 12,
               margin: 10,
               textStyle: {
-                color: '#b3b8cc',
+                color: "#b3b8cc",
               },
               formatter: function (params) {
-                let newParamsName = ''  // 最终拼接成的字符串
-                let paramsNameNumber = params.length // 实际标签的个数
-                let provideNumber = 10  // 每行能显示的字的个数
-                let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
+                let newParamsName = ""; // 最终拼接成的字符串
+                let paramsNameNumber = params.length; // 实际标签的个数
+                let provideNumber = 10; // 每行能显示的字的个数
+                let rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                 /**
                  * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                  */
@@ -313,30 +382,30 @@ export default {
                 if (paramsNameNumber > provideNumber) {
                   /** 循环每一行,p表示行 */
                   for (var p = 0; p < rowNumber; p++) {
-                    var tempStr = '' // 表示每一次截取的字符串
-                    var start = p * provideNumber // 开始截取的位置
-                    var end = start + provideNumber // 结束截取的位置
+                    var tempStr = ""; // 表示每一次截取的字符串
+                    var start = p * provideNumber; // 开始截取的位置
+                    var end = start + provideNumber; // 结束截取的位置
                     // 此处特殊处理最后一行的索引值
                     if (p == rowNumber - 1) {
                       // 最后一次不换行
-                      tempStr = params.substring(start, paramsNameNumber)
+                      tempStr = params.substring(start, paramsNameNumber);
                     } else {
                       // 每一次拼接字符串并换行
-                      tempStr = params.substring(start, end) + '\n'
+                      tempStr = params.substring(start, end) + "\n";
                     }
-                    newParamsName += tempStr // 最终拼成的字符串
+                    newParamsName += tempStr; // 最终拼成的字符串
                   }
                 } else {
                   // 将旧标签的值赋给新标签
-                  newParamsName = params
+                  newParamsName = params;
                 }
                 //将最终的字符串返回
-                return newParamsName
-              }
+                return newParamsName;
+              },
             },
             axisLine: {
               lineStyle: {
-                color: '#f1f5f6',
+                color: "#f1f5f6",
               },
             },
             axisTick: {
@@ -348,29 +417,29 @@ export default {
         yAxis: [
           {
             boundaryGap: false,
-            type: 'value',
+            type: "value",
             max: this.maxY,
             axisLabel: {
               textStyle: {
-                color: '#b3b8cc',
+                color: "#b3b8cc",
               },
-              formatter: '{value}'
+              formatter: "{value}",
             },
-            name: '(m³/min)',
+            name: "(m³/min)",
             nameTextStyle: {
-              color: '#b3b8cc',
+              color: "#b3b8cc",
               fontSize: 12,
               lineHeight: 0,
             },
             splitLine: {
               lineStyle: {
-                color: '#f1f5f6',
+                color: "#f1f5f6",
               },
             },
             axisLine: {
               show: true,
               lineStyle: {
-                color: '#f1f5f6',
+                color: "#f1f5f6",
               },
             },
             axisTick: {
@@ -379,29 +448,29 @@ export default {
           },
           {
             boundaryGap: false,
-            type: 'value',
+            type: "value",
             max: this.maxY,
             axisLabel: {
               textStyle: {
-                color: '#b3b8cc',
+                color: "#b3b8cc",
               },
-              formatter: '{value}'
+              formatter: "{value}",
             },
-            name: '(m³/min)',
+            name: "(m³/min)",
             nameTextStyle: {
-              color: '#fff',
+              color: "#fff",
               fontSize: 12,
               lineHeight: 10,
             },
             splitLine: {
               lineStyle: {
-                color: '#f1f5f6',
+                color: "#f1f5f6",
               },
             },
             axisLine: {
               show: true,
               lineStyle: {
-                color: '#f1f5f6',
+                color: "#f1f5f6",
               },
             },
             axisTick: {
@@ -411,58 +480,58 @@ export default {
         ],
         series: [
           {
-            name: '实时值',
-            type: 'line',
+            name: "实时值",
+            type: "line",
             smooth: true,
             showSymbol: true,
             symbolSize: 8,
             zlevel: 3,
             itemStyle: {
-              color: '#19a3df',
-              borderColor: '#a3c8d8',
+              color: "#19a3df",
+              borderColor: "#a3c8d8",
             },
             lineStyle: {
               normal: {
                 width: 2,
-                color: '#19a3df',
+                color: "#19a3df",
               },
             },
             data: this.yDataS || [],
           },
           {
-            name: '预测值',
-            type: 'line',
+            name: "预测值",
+            type: "line",
             smooth: true,
             showSymbol: true,
             symbolSize: 8,
             zlevel: 3,
             itemStyle: {
-              color: '#4fffad',
-              borderColor: '#a3c8d8',
+              color: "#4fffad",
+              borderColor: "#a3c8d8",
             },
             lineStyle: {
               normal: {
                 width: 2,
-                color: '#4fffad',
+                color: "#4fffad",
               },
             },
             data: this.yDataY || [],
           },
           {
-            name: '最新值',
-            type: 'line',
+            name: "最新值",
+            type: "line",
             smooth: true,
             showSymbol: true,
             symbolSize: 8,
             zlevel: 3,
             itemStyle: {
-              color: '#fc8452',
-              borderColor: '#a3c8d8',
+              color: "#fc8452",
+              borderColor: "#a3c8d8",
             },
             lineStyle: {
               normal: {
                 width: 2,
-                color: '#fc8452',
+                color: "#fc8452",
               },
             },
 
@@ -470,16 +539,13 @@ export default {
           },
         ],
       };
-      this.myChart.setOption(option)
-      window.addEventListener('resize', () => {
-        this.myChart.resize()
-      })
+      this.myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        this.myChart.resize();
+      });
     },
-
-  },
-  computed: {
-
   },
+  computed: {},
 };
 </script>
 
@@ -498,7 +564,7 @@ export default {
     // padding: 0px 10px;
     // box-sizing: border-box;
     // overflow-y: auto;
-    height: 704px;
+    //height: 704px;
     box-sizing: border-box;
     overflow-y: auto;
 
@@ -506,7 +572,7 @@ export default {
       width: 100%;
       padding: 10px;
       box-sizing: border-box;
-      background-color: #FFF;
+      background-color: #fff;
       margin-bottom: 2px;
 
       .top-title {
@@ -529,7 +595,12 @@ export default {
           width: calc(50% - 5px);
           height: 60px;
           border-radius: 5px;
-          background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
+          background: linear-gradient(
+            to right,
+            rgba(55, 135, 254, 0.08),
+            rgba(4, 184, 255, 0.08),
+            rgba(60, 161, 237, 0.08)
+          );
 
           .item-box {
             display: flex;
@@ -550,26 +621,25 @@ export default {
             .box-name {
               font-size: 12px;
             }
-
           }
 
           .item-box1 {
-            background: url('/static/wd.png') no-repeat right;
+            background: url("/static/wd.png") no-repeat right;
             background-size: 30% 80%;
           }
 
           .item-box2 {
-            background: url('/static/dust.png') no-repeat right;
+            background: url("/static/dust.png") no-repeat right;
             background-size: 30% 80%;
           }
 
           .item-box3 {
-            background: url('/static/pwsy.png') no-repeat right;
+            background: url("/static/pwsy.png") no-repeat right;
             background-size: 30% 80%;
           }
 
           .item-box4 {
-            background: url('/static/pwzt.png') no-repeat right;
+            background: url("/static/pwzt.png") no-repeat right;
             background-size: 30% 80%;
           }
         }
@@ -588,7 +658,7 @@ export default {
       width: 100%;
       padding: 10px;
       box-sizing: border-box;
-      background-color: #FFF;
+      background-color: #fff;
       margin-bottom: 2px;
 
       .bot-title {
@@ -610,14 +680,18 @@ export default {
           justify-content: space-between;
           padding: 5px;
           margin-bottom: 5px;
-          background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
-
+          background: linear-gradient(
+            to right,
+            rgba(55, 135, 254, 0.08),
+            rgba(4, 184, 255, 0.08),
+            rgba(60, 161, 237, 0.08)
+          );
 
           .item-l {
             position: relative;
             width: 80px;
             height: 100%;
-            background: url('/static/bot-area.png') no-repeat center;
+            background: url("/static/bot-area.png") no-repeat center;
             background-size: 100% 100%;
 
             .label-l {

pages/warndata/components/fire-detail.vue

@@ -1,6 +1,11 @@
 <template>
   <view class="fire-detail">
-    <u-tabs class="devic-box-tab" :current="PageCur" :list="tabList" @click="NavChange"></u-tabs>
+    <u-tabs
+      class="devic-box-tab"
+      :current="PageCur"
+      :list="tabList"
+      @click="NavChange"
+    ></u-tabs>
     <view class="fire-content-box">
       <view class="search-area" v-if="PageCur != 2">
         <view class="search-l">
@@ -8,12 +13,22 @@
           <view class="search-select" @click="changeSelect">
             <view class="select-val">{{ searchText }}</view>
             <view class="select-icon">
-              <u-icon v-if="isShowSelect" name="arrow-down" color="#0eb4fc" size="14"></u-icon>
+              <u-icon
+                v-if="isShowSelect"
+                name="arrow-down"
+                color="#0eb4fc"
+                size="14"
+              ></u-icon>
               <u-icon v-else name="arrow-up" color="#0eb4fc" size="14"></u-icon>
             </view>
           </view>
           <view class="select-item" v-if="!isShowSelect">
-            <view class="item-box" v-for="(ite, ind) in selectList" :key="ind" @click="choiceSelect(ite)">{{ ite.name }}
+            <view
+              class="item-box"
+              v-for="(ite, ind) in selectList"
+              :key="ind"
+              @click="choiceSelect(ite)"
+              >{{ ite.name }}
             </view>
           </view>
         </view>
@@ -45,94 +60,93 @@
 
 <script>
 import api from "@/api/api";
-import fireDetailMb from './fire-detail-mb.vue'
-import fireDetailCkq from './fire-detail-ckq.vue'
-import fireDetailOut from './fire-detail-out.vue'
-import fireDetailZb from './fire-detail-zb.vue'
+import fireDetailMb from "./fire-detail-mb.vue";
+import fireDetailCkq from "./fire-detail-ckq.vue";
+import fireDetailOut from "./fire-detail-out.vue";
+import fireDetailZb from "./fire-detail-zb.vue";
 export default {
-  name: 'fireDetail',
+  name: "fireDetail",
   components: {
     fireDetailMb,
     fireDetailCkq,
     fireDetailOut,
-    fireDetailZb
+    fireDetailZb,
   },
   props: {},
   watch: {},
   data() {
     return {
-      timer: '',
+      timer: "",
       isShow: false,
       PageCur: "0",
       tabList: [
-        { name: '内因火灾' },
-        { name: '外因火灾' },
-        { name: '火灾指标' },
+        { name: "内因火灾" },
+        { name: "外因火灾" },
+        { name: "火灾指标" },
       ],
-      searchText: '',
+      searchText: "",
       isShowSelect: true,
       selectList: [],
       menuList: [],
-      detailData: {}
-
+      detailData: {},
     };
   },
   beforeDestroy() {
-    this.timer = null
-    clearTimeout(this.timer)
+    this.timer = null;
+    clearTimeout(this.timer);
   },
   mounted() {
-    this.getTabList()
+    this.getTabList();
   },
   methods: {
     NavChange: function (item) {
-    clearTimeout(this.timer)
+      clearTimeout(this.timer);
       this.PageCur = item.index;
       if (this.PageCur == 1) {
         this.selectList = this.menuList.external.map((el) => {
           return {
             name: el.systemname,
-            warn: '低风险',
+            warn: "低风险",
             deviceID: el.id,
             strtype: el.strtype,
           };
         });
-        this.searchText = this.selectList[0].name
+        this.searchText = this.selectList[0].name;
         this.getMonitor(this.selectList[0].deviceID, true);
       } else if (this.PageCur == 0) {
         this.selectList = this.menuList.internal.map((el) => {
           return {
             name: el.systemname,
-            warn: '低风险',
+            warn: "低风险",
             deviceID: el.id,
             strtype: el.strtype,
           };
         });
-        this.searchText = this.selectList[0].name
+        this.searchText = this.selectList[0].name;
         this.getMonitor(this.selectList[0].deviceID, true);
       } else {
-        this.selectList = []
+        this.selectList = [];
       }
     },
     changeSelect() {
-      this.isShowSelect = !this.isShowSelect
+      this.isShowSelect = !this.isShowSelect;
     },
     choiceSelect(val) {
-      clearTimeout(this.timer)
-      this.searchText = val.name
-      this.isShowSelect = true
-      if (this.searchText.indexOf('采空') != -1) {
-        this.isShow = false
+      clearTimeout(this.timer);
+      this.searchText = val.name;
+      this.isShowSelect = true;
+      if (this.searchText.indexOf("采空") != -1) {
+        this.isShow = false;
       } else {
-        this.isShow = true
+        this.isShow = true;
       }
       this.getMonitor(val.deviceID, true);
     },
     getMonitor(deviceID, flag) {
-      let than = this
+      let than = this;
       than.timer = setTimeout(
         async () => {
-          await than.getSysWarnList(deviceID, 'fire');
+          await than.getSysWarnList(deviceID, "fire");
           if (than.timer) {
             than.timer = null;
           }
@@ -145,21 +159,21 @@ export default {
     getTabList() {
       new Promise((resolve, reject) => {
         api
-          .sysTypeWarn({ type: 'fire' })
+          .sysTypeWarn({ type: "fire" })
           .then((response) => {
             if (response.data.code == 200 && response.data.result.length != 0) {
-              let result = response.data.result
-              console.log(result, 'result-------')
-              this.menuList = result
+              let result = response.data.result;
+              console.log(result, "result-------");
+              this.menuList = result;
               this.selectList = result.internal.map((el) => {
                 return {
                   name: el.systemname,
-                  warn: '低风险',
+                  warn: "低风险",
                   deviceID: el.id,
                   strtype: el.strtype,
                 };
               });
-              this.searchText = this.selectList[0].name
+              this.searchText = this.selectList[0].name;
               this.getMonitor(this.selectList[0].deviceID, true);
             } else {
               reject(response);
@@ -178,9 +192,9 @@ export default {
           .sysWarn({ sysid: id, type: type })
           .then((response) => {
             if (response.data.code == 200) {
-              let data = response.data.result
-              this.detailData = data
-              console.log(this.detailData, '火灾详情数据----------')
+              let data = response.data.result;
+              this.detailData = data;
+              console.log(this.detailData, "火灾详情数据----------");
             } else {
               reject(response);
             }
@@ -191,12 +205,8 @@ export default {
           });
       });
     },
-
-
-  },
-  computed: {
-
   },
+  computed: {},
 };
 </script>
 
@@ -210,7 +220,6 @@ export default {
   }
 
   .fire-content-box {
-    height: 704px;
     box-sizing: border-box;
     overflow-y: auto;
 
@@ -221,7 +230,7 @@ export default {
       justify-content: center;
       align-items: center;
       box-sizing: border-box;
-      background-color: #FFF;
+      background-color: #fff;
       margin-bottom: 2px;
 
       .search-l {
@@ -263,7 +272,6 @@ export default {
             line-height: 20px;
             font-size: 14px;
           }
-
         }
       }
 
@@ -286,12 +294,8 @@ export default {
           font-weight: bold;
           color: #0eb4fc;
         }
-
       }
     }
-
   }
-
-
 }
 </style>

pages/warndata/components/vent-detail.vue

@@ -1,737 +1,793 @@
 <template>
-    <view class="vent-detail">
-        <u-tabs class="devic-box-tab" :current="PageCur" :list="tabList" @click="NavChange"></u-tabs>
-        <view class="vent-content">
-            <view class="top-area">
-                <view class="top-title">
-                    <view style="font-weight: bold;">{{ mainTitle || '--' }}</view>
-                    <view class="title-icon">
-                        <image src="/static/model/alarmTrue.svg" alt="" class="icon-style" />
-                        <text class="icon-text">低风险</text>
-                    </view>
-                </view>
-                <view class="top-card">
-                    <view class="card-box" v-for="(item, index) in cardList" :key="index">
-                        <view class="box-item">
-                            <view class="box-val">{{ item.value }}</view>
-                            <view class="box-name">{{ item.name }}</view>
-                        </view>
-                    </view>
-                </view>
-                <view class="top-card1">
-                    <view class="card-box" v-for="(item, index) in cardList1" :key="index">
-                        <view class="box-item">
-                            <view class="box-val">{{ item.value }}</view>
-                            <view class="box-name">{{ item.name }}</view>
-                        </view>
-                    </view>
-                </view>
-            </view>
-            <view class="center-area">
-                <view class="top-title">
-                    <view style="font-weight: bold;">通风信息状态监测</view>
-                </view>
-                <view class="echartBox">
-                    <canvas id="myChart" :style="{ width: '100%', height: '180px' }"></canvas>
-                </view>
+  <view class="vent-detail">
+    <u-tabs
+      class="devic-box-tab"
+      :current="PageCur"
+      :list="tabList"
+      @click="NavChange"
+    ></u-tabs>
+    <view class="vent-content">
+      <view class="top-area">
+        <view class="top-title">
+          <view style="font-weight: bold">{{ mainTitle || "--" }}</view>
+          <view class="title-icon">
+            <image
+              src="/static/model/alarmTrue.svg"
+              alt=""
+              class="icon-style"
+            />
+            <text class="icon-text">低风险</text>
+          </view>
+        </view>
+        <view class="top-card">
+          <view class="card-box" v-for="(item, index) in cardList" :key="index">
+            <view class="box-item">
+              <view class="box-val">{{ item.value }}</view>
+              <view class="box-name">{{ item.name }}</view>
             </view>
-            <view class="bot-area">
-                <view class="top-title">
-                    <view style="font-weight: bold;">通风监控测点信息</view>
-                </view>
-                <view class="bot-content">
-                    <view class="card-b" v-for="(item, index) in cardListTf" :key="index">
-                        <div class="item-l">
-                            <div class="label-l">{{ item.label }}</div>
-                            <div class="value-l">{{ item.value }}</div>
-                        </div>
-                        <div class="item-r">
-                            <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
-                                <span>{{ `${items.label} : ` }}</span>
-                                <span :class="{
-                                    'status-f': items.value == 1,
-                                    'status-l': items.value == 0,
-                                }">{{ `${items.value}${items.dw}` }}</span>
-                            </div>
-                        </div>
-                    </view>
-                </view>
+          </view>
+        </view>
+        <view class="top-card1">
+          <view
+            class="card-box"
+            v-for="(item, index) in cardList1"
+            :key="index"
+          >
+            <view class="box-item">
+              <view class="box-val">{{ item.value }}</view>
+              <view class="box-name">{{ item.name }}</view>
             </view>
+          </view>
+        </view>
+      </view>
+      <view class="center-area">
+        <view class="top-title">
+          <view style="font-weight: bold">通风信息状态监测</view>
+        </view>
+        <view class="echartBox">
+          <canvas
+            id="myChart"
+            :style="{ width: '100%', height: '180px' }"
+          ></canvas>
+        </view>
+      </view>
+      <view class="bot-area">
+        <view class="top-title">
+          <view style="font-weight: bold">通风监控测点信息</view>
         </view>
+        <view class="bot-content">
+          <view class="card-b" v-for="(item, index) in cardListTf" :key="index">
+            <div class="item-l">
+              <div class="label-l">{{ item.label }}</div>
+              <div class="value-l">{{ item.value }}</div>
+            </div>
+            <div class="item-r">
+              <div
+                class="content-r"
+                v-for="(items, ind) in item.listR"
+                :key="ind"
+              >
+                <span>{{ `${items.label} : ` }}</span>
+                <span
+                  :class="{
+                    'status-f': items.value == 1,
+                    'status-l': items.value == 0,
+                  }"
+                  >{{ `${items.value}${items.dw}` }}</span
+                >
+              </div>
+            </div>
+          </view>
+        </view>
+      </view>
     </view>
+  </view>
 </template>
 
 <script>
 import api from "@/api/api";
 export default {
-    name: 'ventDetail',
-    props: {},
-    watch: {},
-    data() {
-        return {
-            mainTitle: '',
-            myChart: null,
-            timer: '',
-            PageCur: "0",
-            tabList: [],
-            cardList: [
-                { name: '进风量(m³/min)', value: 0 },
-                { name: '回风量(m³/min)', value: 0 },
-                { name: '需风量(m³/min)', value: 0 },
-            ],
-            cardList1: [
-                { name: 'O₂(%)', value: 0 },
-                { name: 'CO(%)', value: 0 },
-            ],
-            //echarts图表数据
-            maxY: 0,
-            xData: [],
-            yDataJ: [],
-            yDataH: [],
-            yDataX: [],
-            cardListTf: [],
-        };
+  name: "ventDetail",
+  props: {},
+  watch: {},
+  data() {
+    return {
+      mainTitle: "",
+      myChart: null,
+      timer: "",
+      PageCur: "0",
+      tabList: [],
+      cardList: [
+        { name: "进风量(m³/min)", value: 0 },
+        { name: "回风量(m³/min)", value: 0 },
+        { name: "需风量(m³/min)", value: 0 },
+      ],
+      cardList1: [
+        { name: "O₂(%)", value: 0 },
+        { name: "CO(%)", value: 0 },
+      ],
+      //echarts图表数据
+      maxY: 0,
+      xData: [],
+      yDataJ: [],
+      yDataH: [],
+      yDataX: [],
+      cardListTf: [],
+    };
+  },
+  mounted() {
+    this.getTabList();
+    // than.initChart();
+    this.getWindDeviceList();
+  },
+  beforeDestroy() {
+    this.myChart.clear();
+    this.myChart.dispose();
+    this.timer = null;
+    clearTimeout(this.timer);
+  },
+  methods: {
+    NavChange: function (item) {
+      clearTimeout(this.timer);
+      this.PageCur = item.index;
+      this.mainTitle = this.tabList[this.PageCur].name;
+      this.getMonitor(this.tabList[this.PageCur].deviceID, true);
     },
-    mounted() {
-        this.getTabList()
-        // than.initChart();
-        this.getWindDeviceList()
+    getMonitor(deviceID, flag) {
+      let than = this;
+      than.timer = setTimeout(
+        async () => {
+          await than.getSysWarnList(deviceID, "vent");
+          if (than.timer) {
+            than.timer = null;
+          }
+          than.getMonitor(deviceID);
+        },
+        flag ? 0 : 3000
+      );
     },
-    beforeDestroy() {
-        this.myChart.clear()
-        this.myChart.dispose()
-        this.timer = null
-        clearTimeout(this.timer)
+    //获取顶部tab选项数据
+    getTabList() {
+      new Promise((resolve, reject) => {
+        api
+          .sysTypeWarn({ type: "vent" })
+          .then((response) => {
+            if (response.data.code == 200 && response.data.result.length != 0) {
+              let result = response.data.result;
+              this.tabList = result.map((el) => {
+                //lxh
+                return {
+                  name: el.deviceName,
+                  warn: "低风险",
+                  deviceID: el.deviceID,
+                  strtype: el.deviceType,
+                };
+              });
+              this.mainTitle = this.tabList[0].name;
+              this.getMonitor(this.tabList[0].deviceID, true);
+            } else {
+              reject(response);
+            }
+          })
+          .catch((error) => {
+            console.log("catch===>response", response);
+            reject(error);
+          });
+      });
     },
-    methods: {
-        NavChange: function (item) {
-            clearTimeout(this.timer)
-            this.PageCur = item.index;
-            this.mainTitle = this.tabList[this.PageCur].name
-            this.getMonitor(this.tabList[this.PageCur].deviceID, true);
-        },
-        getMonitor(deviceID, flag) {
-            let than = this
-            than.timer = setTimeout(
-                async () => {
-                    await than.getSysWarnList(deviceID, 'vent');
-                    if (than.timer) {
-                        than.timer = null;
-                    }
-                    than.getMonitor(deviceID);
-                },
-                flag ? 0 : 3000
-            );
+    formatRoundNum(num) {
+      let interger = Math.ceil(num);
+      let leng = String(interger).length;
+      return (
+        Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1)
+      );
+    },
+    //初始化echarts实例
+    initChart() {
+      let canvas = document.getElementById("myChart");
+      this.myChart = this.$echarts.init(canvas);
+      let option = {
+        grid: {
+          top: "24%",
+          left: "0%",
+          bottom: "6%",
+          right: "2%",
+          containLabel: true,
         },
-        //获取顶部tab选项数据
-        getTabList() {
-            new Promise((resolve, reject) => {
-                api
-                    .sysTypeWarn({ type: 'vent' })
-                    .then((response) => {
-                        if (response.data.code == 200 && response.data.result.length != 0) {
-                            let result = response.data.result
-                            this.tabList = result.map((el) => {//lxh
-                                return {
-                                    name: el.deviceName,
-                                    warn: '低风险',
-                                    deviceID: el.deviceID,
-                                    strtype: el.deviceType,
-                                };
-                            });
-                            this.mainTitle = this.tabList[0].name
-                            this.getMonitor(this.tabList[0].deviceID, true);
-                        } else {
-                            reject(response);
-                        }
-                    })
-                    .catch((error) => {
-                        console.log("catch===>response", response);
-                        reject(error);
-                    });
-            });
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(0, 0, 0, .6)",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
         },
-        formatRoundNum(num) {
-            let interger = Math.ceil(num)
-            let leng = String(interger).length
-            return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1)
+        legend: {
+          // align: 'center',
+          right: "0%",
+          top: "0%",
+          type: "plain",
+          textStyle: {
+            color: "#0eb4fc",
+            fontSize: 12,
+          },
+          // icon:'rect',
+          itemGap: 25,
+          itemWidth: 20,
+          icon: "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
+          data: [
+            {
+              name: "进风量",
+            },
+            {
+              name: "回风量",
+            },
+
+            {
+              name: "需风量",
+            },
+          ],
         },
-        //初始化echarts实例
-        initChart() {
-            let canvas = document.getElementById('myChart');
-            this.myChart = this.$echarts.init(canvas)
-            let option = {
-                grid: {
-                    top: '24%',
-                    left: '0%',
-                    bottom: '6%',
-                    right: '2%',
-                    containLabel: true,
-                },
-                tooltip: {
-                    trigger: 'item',
-                    backgroundColor: 'rgba(0, 0, 0, .6)',
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 12,
-                    },
-                },
-                legend: {
-                    // align: 'center',
-                    right: '0%',
-                    top: '0%',
-                    type: 'plain',
-                    textStyle: {
-                        color: '#0eb4fc',
-                        fontSize: 12,
-                    },
-                    // icon:'rect',
-                    itemGap: 25,
-                    itemWidth: 20,
-                    icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
-                    data: [
-                        {
-                            name: '进风量',
-                        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              // formatter: '{value}',
+              fontSize: 12,
+              margin: 10,
+              textStyle: {
+                color: "#b3b8cc",
+              },
+              // formatter: function (params) {
+              //     let newParamsName = ref('')  // 最终拼接成的字符串
+              //     let paramsNameNumber = ref(params.length) // 实际标签的个数
+              //     let provideNumber = ref(10)  // 每行能显示的字的个数
+              //     let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value) // 换行的话，需要显示几行，向上取整
+              //     /**
+              //      * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+              //      */
+              //     // 条件等同于rowNumber>1
+              //     if (paramsNameNumber.value > provideNumber.value) {
+              //         /** 循环每一行,p表示行 */
+              //         for (var p = 0; p < rowNumber; p++) {
+              //             var tempStr = '' // 表示每一次截取的字符串
+              //             var start = p * provideNumber.value // 开始截取的位置
+              //             var end = start + provideNumber.value // 结束截取的位置
+              //             // 此处特殊处理最后一行的索引值
+              //             if (p == rowNumber - 1) {
+              //                 // 最后一次不换行
+              //                 tempStr = params.substring(start, paramsNameNumber.value)
+              //             } else {
+              //                 // 每一次拼接字符串并换行
+              //                 tempStr = params.substring(start, end) + '\n'
+              //             }
+              //             newParamsName.value += tempStr // 最终拼成的字符串
+              //         }
+              //     } else {
+              //         // 将旧标签的值赋给新标签
+              //         newParamsName.value = params
+              //     }
+              //     //将最终的字符串返回
+              //     return newParamsName.value
+              // }
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#f1f5f6",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            data: this.xData || [],
+          },
+        ],
+        yAxis: [
+          {
+            boundaryGap: false,
+            type: "value",
+            max: this.maxY,
+            axisLabel: {
+              textStyle: {
+                color: "#b3b8cc",
+              },
+              formatter: "{value}",
+            },
+            name: "(m³/min)",
+            nameTextStyle: {
+              color: "#b3b8cc",
+              fontSize: 12,
+              lineHeight: 0,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#f1f5f6",
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#f1f5f6",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          {
+            boundaryGap: false,
+            type: "value",
+            max: this.maxY,
+            axisLabel: {
+              textStyle: {
+                color: "#b3b8cc",
+              },
+              formatter: "{value}",
+            },
+            name: "(m³/min)",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: 12,
+              lineHeight: 10,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#f1f5f6",
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#f1f5f6",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "进风量",
+            type: "line",
+            smooth: true,
+            showSymbol: true,
+            symbolSize: 8,
+            zlevel: 3,
+            itemStyle: {
+              color: "#19a3df",
+              borderColor: "#a3c8d8",
+            },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "#19a3df",
+              },
+            },
+            data: this.yDataJ || [],
+          },
+          {
+            name: "回风量",
+            type: "line",
+            smooth: true,
+            showSymbol: true,
+            symbolSize: 8,
+            zlevel: 3,
+            itemStyle: {
+              color: "#4fffad",
+              borderColor: "#a3c8d8",
+            },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "#4fffad",
+              },
+            },
+            data: this.yDataH || [],
+          },
+          {
+            name: "需风量",
+            type: "line",
+            smooth: true,
+            showSymbol: true,
+            symbolSize: 8,
+            zlevel: 3,
+            itemStyle: {
+              color: "#fc8452",
+              borderColor: "#a3c8d8",
+            },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "#fc8452",
+              },
+            },
+
+            data: this.yDataX || [],
+          },
+        ],
+      };
+      this.myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        this.myChart.resize();
+      });
+    },
+    //获取选项详情数据
+    getSysWarnList(id, type) {
+      new Promise((resolve, reject) => {
+        api
+          .sysWarn({ sysid: id, type: type })
+          .then((response) => {
+            if (response.data.code == 200) {
+              this.xData = [];
+              this.yDataH = [];
+              this.yDataJ = [];
+              this.yDataX = [];
+              let data = response.data.result;
+              this.cardList[0].value = data.jin || "--";
+              this.cardList[1].value = data.hui || "--";
+              this.cardList[2].value = data.xufengliang || "--";
+              if (data.history.length != 0) {
+                data.history.forEach((v) => {
+                  //lxh
+                  this.yDataJ.push(parseFloat(v.jin));
+                  this.yDataH.push(parseFloat(v.hui));
+                  if (
+                    this.cardList[2].value &&
+                    this.cardList[2].value != "--"
+                  ) {
+                    this.yDataX.push(this.cardList[2].value);
+                  } else {
+                    this.yDataX.push(0);
+                  }
+                  this.xData.push(v.time);
+                });
+              }
+              let max1 = this.yDataJ.reduce((acr, cur) => {
+                return acr > cur ? acr : cur;
+              });
+              let max2 = this.yDataH.reduce((acr1, cur1) => {
+                return acr1 > cur1 ? acr1 : cur1;
+              });
+              this.maxY =
+                max1 >= max2
+                  ? this.formatRoundNum(max1 * 1.5)
+                  : this.formatRoundNum(max2 * 1.5);
+              this.initChart();
+            } else {
+              reject(response);
+            }
+          })
+          .catch((error) => {
+            console.log("catch===>response", response);
+            reject(error);
+          });
+      });
+    },
+    //获取通风监控测点信息
+    getWindDeviceList() {
+      new Promise((resolve, reject) => {
+        api
+          .getDeviceVent({ devicetype: "windrect", pagetype: "normal" })
+          .then((response) => {
+            if (response.data.code == 200) {
+              let data = response.data.result;
+              if (data.msgTxt[0].datalist.length != 0) {
+                let list = data.msgTxt[0].datalist;
+                if (list.length > 0) {
+                  this.cardListTf = list.map((el) => {
+                    //lxh
+                    const readData = el.readData;
+                    el = Object.assign(el, readData);
+                    return {
+                      label: "通信状态",
+                      value: el.netStatus == "0" ? "断开" : "连接",
+                      listR: [
                         {
-                            name: '回风量',
+                          id: 0,
+                          label: "安装位置",
+                          dw: "",
+                          value: el.strinstallpos,
                         },
-
+                        { id: 1, label: "风量", dw: "(m³/min)", value: el.m3 },
+                        { id: 2, label: "风速", dw: "(m/s)", value: el.va },
+                        { id: 4, label: "时间", dw: "", value: el.readTime },
                         {
-                            name: '需风量'
-                        }
-                    ],
-                },
-                xAxis: [
-                    {
-                        type: 'category',
-                        boundaryGap: false,
-                        axisLabel: {
-                            // formatter: '{value}',
-                            fontSize: 12,
-                            margin: 10,
-                            textStyle: {
-                                color: '#b3b8cc',
-                            },
-                            // formatter: function (params) {
-                            //     let newParamsName = ref('')  // 最终拼接成的字符串
-                            //     let paramsNameNumber = ref(params.length) // 实际标签的个数
-                            //     let provideNumber = ref(10)  // 每行能显示的字的个数
-                            //     let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value) // 换行的话，需要显示几行，向上取整
-                            //     /**
-                            //      * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-                            //      */
-                            //     // 条件等同于rowNumber>1
-                            //     if (paramsNameNumber.value > provideNumber.value) {
-                            //         /** 循环每一行,p表示行 */
-                            //         for (var p = 0; p < rowNumber; p++) {
-                            //             var tempStr = '' // 表示每一次截取的字符串
-                            //             var start = p * provideNumber.value // 开始截取的位置
-                            //             var end = start + provideNumber.value // 结束截取的位置
-                            //             // 此处特殊处理最后一行的索引值
-                            //             if (p == rowNumber - 1) {
-                            //                 // 最后一次不换行
-                            //                 tempStr = params.substring(start, paramsNameNumber.value)
-                            //             } else {
-                            //                 // 每一次拼接字符串并换行
-                            //                 tempStr = params.substring(start, end) + '\n'
-                            //             }
-                            //             newParamsName.value += tempStr // 最终拼成的字符串
-                            //         }
-                            //     } else {
-                            //         // 将旧标签的值赋给新标签
-                            //         newParamsName.value = params
-                            //     }
-                            //     //将最终的字符串返回
-                            //     return newParamsName.value
-                            // }
-                        },
-                        axisLine: {
-                            lineStyle: {
-                                color: '#f1f5f6',
-                            },
-                        },
-                        axisTick: {
-                            show: false,
-                        },
-                        data: this.xData || [],
-                    },
-                ],
-                yAxis: [
-                    {
-                        boundaryGap: false,
-                        type: 'value',
-                        max: this.maxY,
-                        axisLabel: {
-                            textStyle: {
-                                color: '#b3b8cc',
-                            },
-                            formatter: '{value}'
-                        },
-                        name: '(m³/min)',
-                        nameTextStyle: {
-                            color: '#b3b8cc',
-                            fontSize: 12,
-                            lineHeight: 0,
+                          id: 3,
+                          label: "是否报警",
+                          dw: "",
+                          value:
+                            el.warnFlag == "0"
+                              ? "正常"
+                              : el.warnFlag == 1
+                              ? "报警"
+                              : el.warnFlag == 2
+                              ? "断开"
+                              : "未监测",
                         },
-                        splitLine: {
-                            lineStyle: {
-                                color: '#f1f5f6',
-                            },
-                        },
-                        axisLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#f1f5f6',
-                            },
-                        },
-                        axisTick: {
-                            show: false,
-                        },
-                    },
-                    {
-                        boundaryGap: false,
-                        type: 'value',
-                        max: this.maxY,
-                        axisLabel: {
-                            textStyle: {
-                                color: '#b3b8cc',
-                            },
-                            formatter: '{value}'
-                        },
-                        name: '(m³/min)',
-                        nameTextStyle: {
-                            color: '#fff',
-                            fontSize: 12,
-                            lineHeight: 10,
-                        },
-                        splitLine: {
-                            lineStyle: {
-                                color: '#f1f5f6',
-                            },
-                        },
-                        axisLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#f1f5f6',
-                            },
-                        },
-                        axisTick: {
-                            show: false,
-                        },
-                    },
-                ],
-                series: [
-                    {
-                        name: '进风量',
-                        type: 'line',
-                        smooth: true,
-                        showSymbol: true,
-                        symbolSize: 8,
-                        zlevel: 3,
-                        itemStyle: {
-                            color: '#19a3df',
-                            borderColor: '#a3c8d8',
-                        },
-                        lineStyle: {
-                            normal: {
-                                width: 2,
-                                color: '#19a3df',
-                            },
-                        },
-                        data: this.yDataJ || [],
-                    },
-                    {
-                        name: '回风量',
-                        type: 'line',
-                        smooth: true,
-                        showSymbol: true,
-                        symbolSize: 8,
-                        zlevel: 3,
-                        itemStyle: {
-                            color: '#4fffad',
-                            borderColor: '#a3c8d8',
-                        },
-                        lineStyle: {
-                            normal: {
-                                width: 2,
-                                color: '#4fffad',
-                            },
-                        },
-                        data: this.yDataH || [],
-                    },
-                    {
-                        name: '需风量',
-                        type: 'line',
-                        smooth: true,
-                        showSymbol: true,
-                        symbolSize: 8,
-                        zlevel: 3,
-                        itemStyle: {
-                            color: '#fc8452',
-                            borderColor: '#a3c8d8',
-                        },
-                        lineStyle: {
-                            normal: {
-                                width: 2,
-                                color: '#fc8452',
-                            },
-                        },
-
-                        data: this.yDataX || [],
-                    },
-                ],
-            };
-            this.myChart.setOption(option)
-            window.addEventListener('resize', () => {
-                this.myChart.resize()
-            })
-
-
-        },
-        //获取选项详情数据
-        getSysWarnList(id, type) {
-            new Promise((resolve, reject) => {
-                api
-                    .sysWarn({ sysid: id, type: type })
-                    .then((response) => {
-                        if (response.data.code == 200) {
-                            this.xData = []
-                            this.yDataH = []
-                            this.yDataJ = []
-                            this.yDataX = []
-                            let data = response.data.result
-                            this.cardList[0].value = data.jin || '--'
-                            this.cardList[1].value = data.hui || '--'
-                            this.cardList[2].value = data.xufengliang || '--'
-                            if (data.history.length != 0) {
-                                data.history.forEach((v) => {//lxh
-                                    this.yDataJ.push(parseFloat(v.jin));
-                                    this.yDataH.push(parseFloat(v.hui));
-                                    if (this.cardList[2].value && this.cardList[2].value != '--') {
-                                        this.yDataX.push(this.cardList[2].value);
-                                    } else {
-                                        this.yDataX.push(0);
-                                    }
-                                    this.xData.push(v.time);
-                                });
-                            }
-                            let max1 = this.yDataJ.reduce((acr, cur) => {
-                                return acr > cur ? acr : cur
-                            })
-                            let max2 = this.yDataH.reduce((acr1, cur1) => {
-                                return acr1 > cur1 ? acr1 : cur1
-                            })
-                            this.maxY = max1 >= max2 ? this.formatRoundNum(max1 * 1.5) : this.formatRoundNum(max2 * 1.5)
-                            this.initChart()
-                        } else {
-                            reject(response);
-                        }
-                    })
-                    .catch((error) => {
-                        console.log("catch===>response", response);
-                        reject(error);
-                    });
-            });
-        },
-        //获取通风监控测点信息
-        getWindDeviceList() {
-            new Promise((resolve, reject) => {
-                api
-                    .getDeviceVent({ devicetype: 'windrect', pagetype: 'normal' })
-                    .then((response) => {
-                        if (response.data.code == 200) {
-                            let data = response.data.result
-                            if (data.msgTxt[0].datalist.length != 0) {
-                                let list = data.msgTxt[0].datalist;
-                                if (list.length > 0) {
-                                    this.cardListTf = list.map((el) => {//lxh
-                                        const readData = el.readData;
-                                        el = Object.assign(el, readData);
-                                        return {
-                                            label: '通信状态',
-                                            value: el.netStatus == '0' ? '断开' : '连接',
-                                            listR: [
-                                                { id: 0, label: '安装位置', dw: '', value: el.strinstallpos },
-                                                { id: 1, label: '风量', dw: '(m³/min)', value: el.m3 },
-                                                { id: 2, label: '风速', dw: '(m/s)', value: el.va },
-                                                { id: 4, label: '时间', dw: '', value: el.readTime },
-                                                { id: 3, label: '是否报警', dw: '', value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测' },
-                                            ],
-                                        }
-                                    });
-                                }
-                            }
-                        } else {
-                            reject(response);
-                        }
-                    })
-                    .catch((error) => {
-                        console.log("catch===>response", response);
-                        reject(error);
-                    });
-            });
-
-
-        }
+                      ],
+                    };
+                  });
+                }
+              }
+            } else {
+              reject(response);
+            }
+          })
+          .catch((error) => {
+            console.log("catch===>response", response);
+            reject(error);
+          });
+      });
     },
-    computed: {},
+  },
+  computed: {},
 };
 </script>
 
 <style lang="scss" scoped>
 .vent-detail {
-    position: relative;
-    box-sizing: border-box;
+  position: relative;
+  box-sizing: border-box;
 
-    .devic-box-tab {
-        padding: 0px 10px !important;
-    }
+  .devic-box-tab {
+    padding: 0px 10px !important;
+  }
 
-    .vent-content {
-        height: 704px;
-        box-sizing: border-box;
-        overflow-y: auto;
+  .vent-content {
+    box-sizing: border-box;
+    overflow-y: auto;
+
+    .top-area {
+      width: 100%;
+      padding: 10px;
+      box-sizing: border-box;
+      background-color: #fff;
+      margin-bottom: 2px;
+
+      .top-card {
+        width: 100%;
+        height: 60px;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .card-box {
+          width: 32%;
+          height: 100%;
+          border-radius: 5px;
+          background: linear-gradient(
+            to right,
+            rgba(55, 135, 254, 0.08),
+            rgba(4, 184, 255, 0.08),
+            rgba(60, 161, 237, 0.08)
+          );
+        }
 
-        .top-area {
-            width: 100%;
-            padding: 10px;
-            box-sizing: border-box;
-            background-color: #FFF;
-            margin-bottom: 2px;
-
-            .top-card {
-                width: 100%;
-                height: 60px;
-                margin-bottom: 10px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .card-box {
-                    width: 32%;
-                    height: 100%;
-                    border-radius: 5px;
-                    background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
+        .card-box:nth-child(1) .box-item {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: flex-start;
+          width: 100%;
+          height: 100%;
+          padding: 0px 15px;
+          background: url("/static/jinfeng.png") no-repeat center;
+          background-size: 75% 70%;
+        }
 
-                }
+        .card-box:nth-child(2) .box-item {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: flex-start;
+          width: 100%;
+          height: 100%;
+          padding: 0px 15px;
+          background: url("/static/huifeng.png") no-repeat center;
+          background-size: 75% 70%;
+        }
 
-                .card-box:nth-child(1) .box-item {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    align-items: flex-start;
-                    width: 100%;
-                    height: 100%;
-                    padding: 0px 15px;
-                    background: url('/static/jinfeng.png') no-repeat center;
-                    background-size: 75% 70%;
-                }
+        .card-box:nth-child(3) .box-item {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: flex-start;
+          width: 100%;
+          height: 100%;
+          padding: 0px 15px;
+          background: url("/static/xufeng.png") no-repeat center;
+          background-size: 75% 70%;
+        }
+      }
+
+      .top-card1 {
+        width: 100%;
+        height: 60px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .card-box {
+          width: 49%;
+          height: 100%;
+          border-radius: 5px;
+          background: linear-gradient(
+            to right,
+            rgba(55, 135, 254, 0.08),
+            rgba(4, 184, 255, 0.08),
+            rgba(60, 161, 237, 0.08)
+          );
+        }
 
-                .card-box:nth-child(2) .box-item {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    align-items: flex-start;
-                    width: 100%;
-                    height: 100%;
-                    padding: 0px 15px;
-                    background: url('/static/huifeng.png') no-repeat center;
-                    background-size: 75% 70%;
-                }
+        .card-box:nth-child(1) .box-item {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: flex-start;
+          width: 100%;
+          height: 100%;
+          padding: 0px 15px;
+          background: url("/static/O₂.png") no-repeat right;
+          background-size: 40% 80%;
+        }
 
-                .card-box:nth-child(3) .box-item {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    align-items: flex-start;
-                    width: 100%;
-                    height: 100%;
-                    padding: 0px 15px;
-                    background: url('/static/xufeng.png') no-repeat center;
-                    background-size: 75% 70%;
-                }
-            }
+        .card-box:nth-child(2) .box-item {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: flex-start;
+          width: 100%;
+          height: 100%;
+          padding: 0px 15px;
+          background: url("/static/CO.png") no-repeat right;
+          background-size: 40% 80%;
+        }
+      }
+    }
 
-            .top-card1 {
-                width: 100%;
-                height: 60px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
+    .center-area {
+      width: 100%;
+      height: 220px;
+      padding: 0px 10px;
+      box-sizing: border-box;
+      background-color: #fff;
+      margin-bottom: 2px;
+    }
 
-                .card-box {
-                    width: 49%;
-                    height: 100%;
-                    border-radius: 5px;
-                    background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
+    .bot-area {
+      width: 100%;
+      padding: 0px 10px;
+      box-sizing: border-box;
+      background-color: #fff;
+      margin-bottom: 2px;
 
-                }
+      .bot-content {
+        overflow-y: auto;
 
-                .card-box:nth-child(1) .box-item {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    align-items: flex-start;
-                    width: 100%;
-                    height: 100%;
-                    padding: 0px 15px;
-                    background: url('/static/O₂.png') no-repeat right;
-                    background-size: 40% 80%;
-                }
+        .card-b {
+          width: 100%;
+          height: 100px;
+          display: flex;
+          justify-content: space-between;
+          padding: 5px;
+          margin-bottom: 5px;
+          background: linear-gradient(
+            to right,
+            rgba(55, 135, 254, 0.08),
+            rgba(4, 184, 255, 0.08),
+            rgba(60, 161, 237, 0.08)
+          );
+
+          .item-l {
+            position: relative;
+            width: 80px;
+            height: 100%;
+            background: url("/static/bot-area.png") no-repeat center;
+            background-size: 100% 100%;
+
+            .label-l {
+              width: 100%;
+              position: absolute;
+              top: 7px;
+              font-size: 12px;
+              text-align: center;
+            }
 
-                .card-box:nth-child(2) .box-item {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    align-items: flex-start;
-                    width: 100%;
-                    height: 100%;
-                    padding: 0px 15px;
-                    background: url('/static/CO.png') no-repeat right;
-                    background-size: 40% 80%;
-                }
+            .value-l {
+              width: 100%;
+              position: absolute;
+              top: 50px;
+              color: #0eb4fc;
+              text-align: center;
             }
+          }
 
-        }
+          .item-r {
+            width: calc(100% - 100px);
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
 
-        .center-area {
-            width: 100%;
-            height: 220px;
-            padding: 0px 10px;
-            box-sizing: border-box;
-            background-color: #FFF;
-            margin-bottom: 2px;
-        }
+            .content-r {
+              display: flex;
 
-        .bot-area {
-            width: 100%;
-            padding: 0px 10px;
-            box-sizing: border-box;
-            background-color: #FFF;
-            margin-bottom: 2px;
-
-            .bot-content {
-                overflow-y: auto;
-
-                .card-b {
-                    width: 100%;
-                    height: 100px;
-                    display: flex;
-                    justify-content: space-between;
-                    padding: 5px;
-                    margin-bottom: 5px;
-                    background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
-
-
-                    .item-l {
-                        position: relative;
-                        width: 80px;
-                        height: 100%;
-                        background: url('/static/bot-area.png') no-repeat center;
-                        background-size: 100% 100%;
-
-                        .label-l {
-                            width: 100%;
-                            position: absolute;
-                            top: 7px;
-                            font-size: 12px;
-                            text-align: center;
-                        }
-
-                        .value-l {
-                            width: 100%;
-                            position: absolute;
-                            top: 50px;
-                            color: #0eb4fc;
-                            text-align: center;
-                        }
-                    }
-
-                    .item-r {
-                        width: calc(100% - 100px);
-                        height: 100%;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-around;
-
-                        .content-r {
-                            display: flex;
-
-                            span {
-                                font-size: 12px;
-
-                                &:first-child {
-                                    display: inline-block;
-                                    width: 68px;
-                                }
-
-                                &:last-child {
-                                    display: inline-block;
-                                    width: calc(100% - 68px);
-                                    overflow: hidden;
-                                    white-space: nowrap;
-                                    /* 不换行 */
-                                    /* 超出部分隐藏 */
-                                    text-overflow: ellipsis;
-                                    /* 使用省略符号 */
-                                }
-                            }
-
-                            .status-f {
-                                color: #ff0000;
-                            }
-
-                            .status-l {
-                                color: #3df6ff;
-                            }
-                        }
-                    }
+              span {
+                font-size: 12px;
+
+                &:first-child {
+                  display: inline-block;
+                  width: 68px;
                 }
-            }
-        }
 
-        .top-title {
-            height: 28px;
-            margin-bottom: 10px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .title-icon {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                width: 90px;
-                height: 28px;
-                padding: 0px 10px;
-                border-radius: 5px;
-                background: #d4ecff;
-
-                .icon-text {
-                    font-size: 12px;
-                    font-weight: bold;
-                    color: #0eb4fc;
+                &:last-child {
+                  display: inline-block;
+                  width: calc(100% - 68px);
+                  overflow: hidden;
+                  white-space: nowrap;
+                  /* 不换行 */
+                  /* 超出部分隐藏 */
+                  text-overflow: ellipsis;
+                  /* 使用省略符号 */
                 }
+              }
+
+              .status-f {
+                color: #ff0000;
+              }
+
+              .status-l {
+                color: #3df6ff;
+              }
             }
+          }
         }
+      }
+    }
 
-        .box-item .box-val {
-            height: 28px;
-            line-height: 28px;
-            color: #0eb4fc;
-            font-weight: bold;
+    .top-title {
+      height: 28px;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .title-icon {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 90px;
+        height: 28px;
+        padding: 0px 10px;
+        border-radius: 5px;
+        background: #d4ecff;
+
+        .icon-text {
+          font-size: 12px;
+          font-weight: bold;
+          color: #0eb4fc;
         }
+      }
+    }
 
-        .box-item .box-name {
-            font-size: 12px;
-        }
+    .box-item .box-val {
+      height: 28px;
+      line-height: 28px;
+      color: #0eb4fc;
+      font-weight: bold;
+    }
 
-        .icon-style {
-            width: 14px;
-            height: 14px;
-        }
+    .box-item .box-name {
+      font-size: 12px;
     }
 
+    .icon-style {
+      width: 14px;
+      height: 14px;
+    }
+  }
 }
 </style>