From 2ff5adf92570c9f8d3cb8105ad8520ab9ee11834 Mon Sep 17 00:00:00 2001
From: zhoule <zz221011@163.com>
Date: Mon, 29 Jan 2024 17:07:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=84=9F=E7=9F=A5=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/FormConfig/index.vue           |   14 +-
 .../components/RoadStateCard/index.vue        |   12 +-
 .../components/TimeLine/TimeLine1/index.vue   |    2 +-
 .../components/TimeLine/TimeLine2/index.vue   |    2 +-
 .../event/event/EventDetailDialog/data.js     |   66 +-
 .../event/event/EventDetailDialog/index.vue   |   88 +-
 .../event/event/FormEvent/PresetFormItems.js  |    4 +
 .../pages/control/event/event/index.vue       |   67 +-
 .../statisticalAnalysis/index.vue             | 1655 ++++++++---------
 9 files changed, 1022 insertions(+), 888 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
index def75814..d0f92ec8 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
@@ -60,6 +60,10 @@ export default {
      *  options?: {}
      * }[]
      */
+    dFormData: {
+      type: Object,
+      default: () => {}
+    },
     formList: {
       type: Array,
       default: () => []
@@ -95,10 +99,12 @@ export default {
       }
     },
   },
-  // created() {
-  //   this.reset(true);
-  //   console.log("%c [ this.formData ]-82-「index.vue」", "font-size:15px; background:#9c7eed; color:#e0c2ff;", this.formData);
-  // },
+  created() {
+    this.reset(true);
+    if(this.dFormData) {
+      this.modelFormData = this.dFormData;
+    }
+  },
   computed: {
     modelFormData: {
       get() {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/RoadStateCard/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/RoadStateCard/index.vue
index 182542e1..dfa86fd5 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/RoadStateCard/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/RoadStateCard/index.vue
@@ -12,10 +12,10 @@
         </p>
       </div>
       <div class="controls">
-        <Button :style="{ background: firstBtnColor }" @click.native="$emit('firstBtnClick', $event)">{{
+        <Button :style="{ background: firstBtnColor,width: '50%' }" @click.native="$emit('firstBtnClick', $event)">{{
           firstBtnText
         }}</Button>
-        <Button :style="{ background: lastBtnColor }" @click.native="$emit('lastBtnClick', $event)">{{ lastBtnText
+        <Button v-if="cardData.state != 3" :style="{ background: lastBtnColor,width: '50%' }" @click.native="$emit('lastBtnClick', $event)">{{ lastBtnText
         }}</Button>
       </div>
     </div>
@@ -61,11 +61,11 @@ export default {
       type: Array,
       default: () => ([
         {
-          key: "source",
+          key: "stringEventSource",
           label: "来源"
         },
         {
-          key: "location",
+          key: "stakeMark",
           label: "位置"
         },
         {
@@ -73,7 +73,7 @@ export default {
           label: "方向"
         },
         {
-          key: "time",
+          key: "startTime",
           label: "时间"
         },
       ])
@@ -141,7 +141,7 @@ export default {
       gap: 9px;
 
       >div {
-        flex: 1;
+        // flex: 1;
       }
     }
   }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine1/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine1/index.vue
index c47194dc..007853cb 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine1/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine1/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class='["TimeLine1", { "auto-size": autoSize }]' ref="TimeLine1Ref">
     <!-- 节点 -->
-    <div class="node" v-for="(item, index) in data" ref="nodeRefs">
+    <div class="node" v-for="(item, index) in data" :key="index" ref="nodeRefs">
       <span class="top-label keep-ratio-bottom">
         <slot name="bottom-label" :data="item">
           {{ item.time }}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine2/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine2/index.vue
index 3cb6cf82..2fdac3dc 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine2/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine2/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class='TimeLine2'>
-    <div class="node" v-for="(item, index) in data">
+    <div class="node" v-for="(item, index) in data" :key="index">
       <div class="content" v-if="direction != 'right'">
         <!-- <template v-if="direction === 'auto' ? !!((index + 1) & 1) : true"> -->
         <template v-if="getDirection(item, index, 'left')">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/data.js
index 6a701c4e..a8346586 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/data.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/data.js
@@ -1,54 +1,94 @@
 export const formList = [
   {
     label: "事件源:",
-    key: "事件源",
+    key: "stringEventSource",
     type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
   },
   {
     label: "桩号:",
-    key: "桩号:",
+    key: "stakeMark",
     type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
   },
   {
     label: "行驶方向:",
-    key: "行驶方向",
+    key: "direction",
     type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
   },
   {
     label: "事件类型:",
-    key: "事件类型",
+    key: "stringEventType",
     type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
   },
   {
     label: "事件原因:",
-    key: "事件原因",
+    key: "eventCause",
     type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
   },
   {
     label: "事件状态:",
-    key: "事件状态",
+    key: "eventState",
     type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
   },
   {
     label: "操作员:",
-    key: "操作员",
+    key: "createBy",
     type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
   },
   {
     label: "发生时间:",
-    key: "发生时间",
+    key: "startTime",
     type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
   },
   {
     label: "完结时间:",
-    key: "完结时间",
+    key: "endTime",
     type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
   },
   {
     label: "事件描述:",
-    key: "事件描述",
+    key: "direction",
     type: "input",
     gridColumn: 3,
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
   },
 ];
 
@@ -56,17 +96,17 @@ export const timeLine1List = [
   {
     time: "16.36",
     label: "接警记录",
-    isActive: true,
+    isActive: false,
   },
   {
     time: "16.36",
     label: "指令下达",
-    isActive: true,
+    isActive: false,
   },
   {
     time: "16.36",
     label: "清障到达",
-    isActive: true,
+    isActive: false,
   },
   {
     time: "",
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
index 20002f99..44694e29 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
@@ -1,7 +1,7 @@
 <template>
   <Dialog v-model="modelVisible" title="事件详情">
     <div class="EventDetail">
-      <Form :formList="formList" />
+      <Form :formList="formList" :dFormData="formData" label-width="100px" />
 
       <div class="video-pic">
         <Video style="height: 100%;" />
@@ -14,8 +14,8 @@
 
     </div>
     <template #footer>
-      <Button style="padding: 0 24px;">确认</Button>
-      <Button :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }"> 取消</Button>
+      <Button style="padding: 0 24px;" @click.native="modelVisible = false">确认</Button>
+      <Button :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }" @click.native="modelVisible = false"> 取消</Button>
     </template>
   </Dialog>
 </template>
@@ -25,11 +25,13 @@ import Dialog from "@screen/components/Dialog/index";
 import TimeLine1 from "@screen/components/TimeLine/TimeLine1/index";
 import TimeLine2 from "@screen/components/TimeLine/TimeLine2/index";
 import Form from '@screen/components/FormConfig';
-import { formList, timeLine1List } from "./data"
-import { timeLine2List } from "@screen/pages/control/event/commandDispatch/Cards/DisposalProcess/data.js"
+import { formList } from "./data"
+// import { timeLine2List } from "@screen/pages/control/event/commandDispatch/Cards/DisposalProcess/data.js"
 import Video from "@screen/components/Video";
 import Carousel from "./Carousel/index.vue"
 import Button from '@screen/components/Buttons/Button.vue';
+import request from "@/utils/request";
+var moment = require("moment");
 
 export default {
   name: 'EventDetail',
@@ -47,24 +49,94 @@ export default {
     event: 'update:value'
   },
   props: {
-    visible: Boolean
+    visible: Boolean,
+    formData: {
+      type: Object,
+      default: () => { }
+    }
   },
   data() {
     return {
       formList,
-      timeLine1List,
-      timeLine2List,
+      timeLine1List: [{
+        time: "",
+        label: "",
+        isActive: false,
+      }],
+      timeLine2List: [
+        {
+          time: "",
+          name: "",
+          desc: '',
+          posts: "",
+          direction: "left",
+        }
+      ],
     }
   },
   computed: {
     modelVisible: {
       get() {
+        if (this.visible) {
+          this.getProcess();
+        }
         return this.visible;
       },
       set(val) {
         this.$emit('update:value', val)
       }
     }
+  },
+  methods: {
+    getProcess() {
+
+      let directionFlg = true;
+
+      request({
+        url: `/system/process/list`,
+        method: "get",
+        params: { eventId: this.formData.id }
+      }).then(result => {
+        if (result.code != 200) return Message.error(result?.msg);
+        const rows = result.rows;
+        this.timeLine1List = [];
+        this.timeLine2List = [];
+
+        this.formData?.processConfigList.forEach(it => {
+          const process = rows.find(row => it.nodeNode == row.processId);
+
+          if (process) {
+            this.timeLine1List.push(
+              {
+                time: moment(process.operationTime || new Date()).format('HH:mm'),
+                label: it.processNode,
+                isActive: true,
+              }
+            );
+            this.timeLine2List.push({
+              time: moment(process.operationTime || new Date()).format('yyyy-MM-DD HH:mm:ss'),
+              name: process.operator,
+              desc: process.context,
+              posts: "",
+              direction: directionFlg ? 'left' : 'right',
+            })
+            directionFlg = !directionFlg;
+
+          } else {
+            this.timeLine1List.push(
+              {
+                time: "",
+                label: it.processNode,
+                isActive: false,
+              }
+            )
+          }
+        })
+
+
+      })
+
+    }
   }
 }
 </script>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
index ea66b9c7..bec2cf71 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
@@ -179,6 +179,7 @@ export const startTime = {
   isAlone: true,
   type: "datePicker",
   options:{
+    type: "datetime",
     format: 'yyyy-MM-dd HH:mm:ss',
     valueFormat: 'yyyy-MM-dd HH:mm:ss'
   }
@@ -190,6 +191,7 @@ export const expectedEndTime = {
   isAlone: true,
   type: "datePicker",
   options:{
+    type: "datetime",
     format: 'yyyy-MM-dd HH:mm:ss',
     valueFormat: 'yyyy-MM-dd HH:mm:ss'
   }
@@ -716,6 +718,7 @@ export const eventHappenTime = {
   required: true,
   type: "datePicker",
   options:{
+    type: "datetime",
     format: 'yyyy-MM-dd HH:mm:ss',
     valueFormat: 'yyyy-MM-dd HH:mm:ss'
   }
@@ -726,6 +729,7 @@ export const aEstimatedReleaseTime = {
   key: "estimatedEndTime",
   type: "datePicker",
   options:{
+    type: "datetime",
     format: 'yyyy-MM-dd HH:mm:ss',
     valueFormat: 'yyyy-MM-dd HH:mm:ss'
   }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue
index 815ad466..8f3f7d5a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue
@@ -11,7 +11,7 @@
           </template>
           新增
         </ButtonGradient>
-        <ButtonGradient>
+        <ButtonGradient @click="onExport">
           <template #prefix>
             <img src="./images/export.svg" />
           </template>
@@ -43,7 +43,7 @@
     </div>
 
     <!-- "详情"弹出框 -->
-    <EventDetailDialog :visible="eventDetailDialogVisible" @update:value="handleClose" />
+    <EventDetailDialog :visible="eventDetailDialogVisible" :formData="detailDialogFormData" @update:value="handleClose" />
     <!-- "新增"弹出框 -->
     <FormEvent :visible="isShowAddNew" @close="onCloseAddNew" />
 
@@ -115,7 +115,8 @@ export default {
         pageSize: 12,
         pageNum: 1,
         eventState: null
-      }
+      },
+      detailDialogFormData: {}
     }
   },
   created() {
@@ -127,7 +128,7 @@ export default {
 
       this.searchData.eventState = activeName == '-1' ? null : activeName;
 
-      // this.data = getMockData();
+      this.getData();
     },
     getStateCardBind(item) {
       const { state, textColor, text } = tabMap[this.activeName]
@@ -162,24 +163,58 @@ export default {
     onAddNew() {
       this.isShowAddNew = true;
     },
+    onExport() {
+      let loadingInstance = Loading.service({ fullscreen: true, background: "#00000052", text: "文件正在下载..." });
+      request({
+        url: '/dc/system/event/export',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        responseType: 'blob'
+      }).then((res) => {
+        console.log(res);
+        const url = window.URL.createObjectURL(new Blob([res]))
+        let link = document.createElement('a')
+        link.style.display = 'none'
+        link.href = url
+        link.setAttribute('download', '事件信息列表.xlsx')
+        document.body.appendChild(link)
+        link.click()
+        URL.revokeObjectURL(link.href) // 释放URL 对象
+        document.body.removeChild(link)
+        link = null
+        loadingInstance.close();
+      }).catch(err => {
+        Message.error(err);
+        loadingInstance.close();
+      })
+    },
     onCloseAddNew() {
       this.isShowAddNew = false;
     },
-    firstBtnClick() {
-      this.eventDetailDialogVisible = true
+    firstBtnClick(id) {
+      console.log('id', id)
+      request({
+        url: `/dc/system/event/${id}`,
+        method: "get",
+      }).then(result => {
+        if (result.code != 200) return Message.error(result?.msg);
+        this.detailDialogFormData = result.data;
+
+        this.eventDetailDialogVisible = true
+      })
+
     },
     handleClose() {
       this.eventDetailDialogVisible = false;
     },
     handleSearch(data) {
-      console.log('data',data);
+      console.log('data', data);
       let daterange = data.daterange;
 
       let dStakeMark = data.stakeMark;
       let dendStakeMark = data.endStakeMark;
 
       let stakeMark = `K${dStakeMark[0]}+${dStakeMark[1]}`
-      let  endStakeMark = `K${dendStakeMark[0]}+${dendStakeMark[1]}`
+      let endStakeMark = `K${dendStakeMark[0]}+${dendStakeMark[1]}`
 
       this.searchData = {
         ...this.searchData,
@@ -192,7 +227,21 @@ export default {
       }
       this.getData();
 
-    }
+    },
+    resultMapping(type, value) {
+      const keyMap = {
+        'eventSource': {
+          1: '96659',
+          2: '交警转接',
+          3: '道路巡查',
+          4: '视频巡查',
+          5: '视频AI',
+          6: '一键救援',
+          7: '其他',
+        }
+      }
+      return keyMap[type][value];
+    },
   }
 }
 </script>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
index ccbe545e..adb35566 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
@@ -1,653 +1,609 @@
 <template>
-    <div class='TrafficFlow'>
-      <section class="foot">
-        <el-tabs class="footTabs" v-model="activeName"  @tab-click="changeTabs">
-            <el-tab-pane label="设备分析" name="first">
-              <div class="topTabs" >
-                 <div class="item" v-for=" item in equipments" >
-                   <div class="title-tool" >
-                     <span class="text" >{{ item.text }}</span>
-                   </div>
-                   <div class="item-body" >
-                      <div class="left-body" >
-                        <img src="./assets/shexiangtou.png"  />
-                        <span class="num" >{{ item.num }} <span class="unit">套</span></span>
-                      </div>
-                      <div class="line" ></div>
-                      <div class="right-list" >
-                         <div class="list-text" >
-                          <span>在线：</span>
-                            <div class="show-text1" >
-                              {{ item.sucessRate }}
-                            </div>
-                         </div>
-                         <div class="list-text" ><span>离线：</span>
-                              <div class="show-text2" >
-                                {{ item.failRate }}
-                              </div>
-                         </div>
-                         <div class="list-text"  >
-                              <span>丢包：</span>
-                              <div class="show-text3" >
-                                {{ item.lostRate }}
-                              </div>
-                         </div>
-                      </div>
-                   </div>
-                 </div>
+  <div class='TrafficFlow'>
+    <section class="foot">
+      <el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs">
+        <el-tab-pane label="设备分析" name="first">
+          <div class="topTabs">
+            <div class="item" v-for=" (item, index) in equipments" :key="index">
+              <div class="title-tool">
+                <span class="text">{{ item.text }}</span>
               </div>
-              <div class="bottomTabs" >
-                <DeviceUptime  :dataList="equipments" class="tabs-lo" />
-                <MonthlyEquipment class="tabs-mo" />
-              </div>
-            </el-tab-pane>
-            <el-tab-pane label="设备查询" name="second">
-              <div class="topdiv" >
-                <div class="left-div" >
-                    <el-button size="mini" icon="el-icon-refresh-left" class="btnSearch" >刷新</el-button>
-                    <el-button size="mini" icon="el-icon-download" class="btnSearch" @click="SystemStatusExport" >导出Excel</el-button>
-                </div>
-                <div class="right-div" >            
-                      <InputSearch style="width: 402px;" :formList="searchFormList" @handleSearch="handleSearch" />
+              <div class="item-body">
+                <div class="left-body">
+                  <img src="./assets/shexiangtou.png" />
+                  <span class="num">{{ item.num }} <span class="unit">套</span></span>
                 </div>
-              </div>
-              <div class="middleDiv" >
-                <div id="chart1" class="keep-ratio" >
-
+                <div class="line"></div>
+                <div class="right-list">
+                  <div class="list-text">
+                    <span>在线：</span>
+                    <div class="show-text1">
+                      {{ item.sucessRate }}
+                    </div>
+                  </div>
+                  <div class="list-text"><span>离线：</span>
+                    <div class="show-text2">
+                      {{ item.failRate }}
+                    </div>
+                  </div>
+                  <div class="list-text">
+                    <span>丢包：</span>
+                    <div class="show-text3">
+                      {{ item.lostRate }}
+                    </div>
+                  </div>
                 </div>
               </div>
-              <div >
-                <el-table
-                    :border="false"
-                    :data="tableData"
-                    height="480"
-                    style="width: 100%">
-                    <el-table-column
-                    prop="nem"
-                    label="序号"
-                    width="80">
-                    </el-table-column>
-                    <el-table-column
-                      prop="deviceName"
-                      label="设备名称"
-                    ></el-table-column>
-                    <el-table-column
-                    prop="deviceNo"
-                    label="设备桩号"
-                    width="">
-                    </el-table-column>
-                    <el-table-column
-                    prop="direction"
-                    label="方向"
-                    class-name="showClass"
-                    width="">
-                    </el-table-column>
-                    <el-table-column
-                    prop="deviceIp"
-                    label="设备IP"
-                    width=""
-                    >
-                    </el-table-column>
-                    <el-table-column
-                    prop="production"
-                    label="厂家"
-                    width=""
-                    >
-                    </el-table-column>
-                    <el-table-column
-                    prop="type"
-                    label="型号"
-                    width=""
-                    >
-                    <template slot-scope="scope">
-                      <div v-if="scope.row.type == 1" >高清网络枪型固定摄像机</div>
-                      <div v-if="scope.row.type == 2" >高清网络球形摄像机</div>
-                      <div v-if="scope.row.type == 3" >桥下高清网络球形摄像机</div>
-                      <div v-if="scope.row.type == 4" >360°全景摄像机</div>
-                      <div v-if="scope.row.type == 5" >180°全景摄像机</div>
-                      <div v-if="scope.row.type == 6" >门架式可变信息标志</div>
-                      <div v-if="scope.row.type == 7" >雨棚可变信息标志</div>
-                      <div v-if="scope.row.type == 8" >站前悬臂式可变信息标志</div>
-                      <div v-if="scope.row.type == 9" >气象检测器</div>
-                      <div v-if="scope.row.type == 10" >路段语音广播系统</div>
-                      <div v-if="scope.row.type == 11" >护栏碰撞预警系统</div>
-                      <div v-if="scope.row.type == 12" >毫米波雷达</div>
-                      <div v-if="scope.row.type == 13" >合流区预警系统</div>
-                      <div v-if="scope.row.type == 14" >激光疲劳唤醒</div>
-                      <div v-if="scope.row.type == 15" >一类交通量调查站</div>
-                      <div v-if="scope.row.type == 16" >智能行车诱导系统</div>
-                      <div v-if="scope.row.type == 17" >智能设备箱</div>
-                    </template>
-                    </el-table-column>
-                    <el-table-column
-                    prop="network"
-                    label="网段"
-                    width=""
-                    >
-                    </el-table-column>
-                    <el-table-column
-                    prop="time"
-                    label="监测时间"
-                    width=""
-                    >
-                    </el-table-column>
-                    <el-table-column
-                    prop="deviceStatus"
-                    label="操作"
-                    width=""
-                    >
-                    <template slot-scope="scope">
-                      <div v-if="scope.row.deviceStatus == 1" >在线</div>
-                      <div v-if="scope.row.deviceStatus == 0" >离线</div>
-                    </template>
-                    </el-table-column>
-                </el-table>
-                <div class="foot" >
-                <Pagination
-                 @current-change="changePage"
-                  width="'100%'"
-                  :page-size="pageSize"
-                  :current-page.sync="pageIndex"
-                  layout="total, sizes, prev, pager, next"
-                  :total="pageTotal">
-                </Pagination>
-              </div>
-              </div>
-            </el-tab-pane>
-        </el-tabs>
-      </section>
-    </div>
-  </template>
+            </div>
+          </div>
+          <div class="bottomTabs">
+            <DeviceUptime :dataList="equipments" class="tabs-lo" />
+            <MonthlyEquipment class="tabs-mo" />
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="设备查询" name="second">
+          <div class="topdiv">
+            <div class="left-div">
+              <el-button size="mini" icon="el-icon-refresh-left" class="btnSearch">刷新</el-button>
+              <el-button size="mini" icon="el-icon-download" class="btnSearch"
+                @click="SystemStatusExport">导出Excel</el-button>
+            </div>
+            <div class="right-div">
+              <InputSearch style="width: 402px;" :formList="searchFormList" @handleSearch="handleSearch" />
+            </div>
+          </div>
+          <div class="middleDiv">
+            <div id="chart1" class="keep-ratio">
+
+            </div>
+          </div>
+          <div>
+            <el-table :border="false" :data="tableData" height="480" style="width: 100%">
+              <el-table-column prop="nem" label="序号" width="80">
+              </el-table-column>
+              <el-table-column prop="deviceName" label="设备名称"></el-table-column>
+              <el-table-column prop="deviceNo" label="设备桩号" width="">
+              </el-table-column>
+              <el-table-column prop="direction" label="方向" class-name="showClass" width="">
+              </el-table-column>
+              <el-table-column prop="deviceIp" label="设备IP" width="">
+              </el-table-column>
+              <el-table-column prop="production" label="厂家" width="">
+              </el-table-column>
+              <el-table-column prop="type" label="型号" width="">
+                <template slot-scope="scope">
+                  <div v-if="scope.row.type == 1">高清网络枪型固定摄像机</div>
+                  <div v-if="scope.row.type == 2">高清网络球形摄像机</div>
+                  <div v-if="scope.row.type == 3">桥下高清网络球形摄像机</div>
+                  <div v-if="scope.row.type == 4">360°全景摄像机</div>
+                  <div v-if="scope.row.type == 5">180°全景摄像机</div>
+                  <div v-if="scope.row.type == 6">门架式可变信息标志</div>
+                  <div v-if="scope.row.type == 7">雨棚可变信息标志</div>
+                  <div v-if="scope.row.type == 8">站前悬臂式可变信息标志</div>
+                  <div v-if="scope.row.type == 9">气象检测器</div>
+                  <div v-if="scope.row.type == 10">路段语音广播系统</div>
+                  <div v-if="scope.row.type == 11">护栏碰撞预警系统</div>
+                  <div v-if="scope.row.type == 12">毫米波雷达</div>
+                  <div v-if="scope.row.type == 13">合流区预警系统</div>
+                  <div v-if="scope.row.type == 14">激光疲劳唤醒</div>
+                  <div v-if="scope.row.type == 15">一类交通量调查站</div>
+                  <div v-if="scope.row.type == 16">智能行车诱导系统</div>
+                  <div v-if="scope.row.type == 17">智能设备箱</div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="network" label="网段" width="">
+              </el-table-column>
+              <el-table-column prop="time" label="监测时间" width="">
+              </el-table-column>
+              <el-table-column prop="deviceStatus" label="操作" width="">
+                <template slot-scope="scope">
+                  <div v-if="scope.row.deviceStatus == 1">在线</div>
+                  <div v-if="scope.row.deviceStatus == 0">离线</div>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="foot">
+              <Pagination @current-change="changePage" width="'100%'" :page-size="pageSize" :current-page.sync="pageIndex"
+                layout="total, sizes, prev, pager, next" :total="pageTotal">
+              </Pagination>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </section>
+  </div>
+</template>
   
-  <script> 
+<script>
 
 import * as echarts from "echarts";
-  import chartsStatistics from "./assets/charts";
-  import DeviceUptime from './components/deviceUptime';
-  import MonthlyEquipment from './components/monthlyEquipment';
-  import { getSystemStatusList, getSystemStatusTabList, getSystemStatusType, getSystemStatusExport } from "../../../../../api/MonthlyEquipment";
-  import { download } from '../../../../../utils/request.js';
-  import Pagination from '@screen/components/Pagination.vue';
-  import InputSearch from '@screen/components/InputSearch/index.vue';
-  import {  searchFormList } from "./data";
-  import { Loading } from 'element-ui';
-
-  export default {
-    name: 'publicService',
-    components: {
-      DeviceUptime,
-      MonthlyEquipment,
-      Pagination,
-      InputSearch
-    },
-    data(){
-        return {
-          startTime: "2024-01-01 00:00:00",
-          time: "2024-01-31 00:00:00",
-          typeQuery:1, //高清网络枪型固定摄像机
-          pageTotal:0,
-          pageIndex:1,
-          pageSize:10,
-          searchFormList,
-          equipments:[
-          {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-            {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-            {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-            {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-            {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-            {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-            {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-            {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-            {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-            {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-            {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-            {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-            {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-            {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-            {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-            {
-              num : 315,
-              online: 30,
-              outline: 30,
-              lost: 40
-            },
-          ],
-            activeName:"first",
-            tableData: [{
-          date: '2023-12-31 13:00:00',
-          name: '高清网络球形摄像机',
-          address: 'K234+235',
-          root:"中央分隔带",
-          ip:"10.0.61.43",
-          cj:"海康威视",
-          xh:"XXX",
-          wd:"梁山收费站监控网段",
-          jcsj:"2024-01-17",
-          cz:"在线",
-        },{
-          date: '2023-12-31 13:00:00',
-          name: '高清网络球形摄像机',
-          address: 'K234+235',
-          root:"中央分隔带",
-          ip:"10.0.61.43",
-          cj:"海康威视",
-          xh:"XXX",
-          wd:"梁山收费站监控网段",
-          jcsj:"2024-01-17",
-          cz:"在线",
+import chartsStatistics from "./assets/charts";
+import DeviceUptime from './components/deviceUptime';
+import MonthlyEquipment from './components/monthlyEquipment';
+import { getSystemStatusList, getSystemStatusTabList, getSystemStatusType, getSystemStatusExport } from "../../../../../api/MonthlyEquipment";
+import { download } from '../../../../../utils/request.js';
+import Pagination from '@screen/components/Pagination.vue';
+import InputSearch from '@screen/components/InputSearch/index.vue';
+import { searchFormList } from "./data";
+import { Loading } from 'element-ui';
+
+export default {
+  name: 'publicService',
+  components: {
+    DeviceUptime,
+    MonthlyEquipment,
+    Pagination,
+    InputSearch
+  },
+  data() {
+    return {
+      startTime: "2024-01-01 00:00:00",
+      time: "2024-01-31 00:00:00",
+      typeQuery: 1, //高清网络枪型固定摄像机
+      pageTotal: 0,
+      pageIndex: 1,
+      pageSize: 10,
+      searchFormList,
+      equipments: [
+        {
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
         },
         {
-          date: '2023-12-31 13:00:00',
-          name: '高清网络球形摄像机',
-          address: 'K234+235',
-          root:"中央分隔带",
-          ip:"10.0.61.43",
-          cj:"海康威视",
-          xh:"XXX",
-          wd:"梁山收费站监控网段",
-          jcsj:"2024-01-17",
-          cz:"在线",
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
         },
         {
-          date: '2023-12-31 13:00:00',
-          name: '高清网络球形摄像机',
-          address: 'K234+235',
-          root:"中央分隔带",
-          ip:"10.0.61.43",
-          cj:"海康威视",
-          xh:"XXX",
-          wd:"梁山收费站监控网段",
-          jcsj:"2024-01-17",
-          cz:"在线",
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
         },
         {
-          date: '2023-12-31 13:00:00',
-          name: '高清网络球形摄像机',
-          address: 'K234+235',
-          root:"中央分隔带",
-          ip:"10.0.61.43",
-          cj:"海康威视",
-          xh:"XXX",
-          wd:"梁山收费站监控网段",
-          jcsj:"2024-01-17",
-          cz:"在线",
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
         },
         {
-          date: '2023-12-31 13:00:00',
-          name: '高清网络球形摄像机',
-          address: 'K234+235',
-          root:"中央分隔带",
-          ip:"10.0.61.43",
-          cj:"海康威视",
-          xh:"XXX",
-          wd:"梁山收费站监控网段",
-          jcsj:"2024-01-17",
-          cz:"在线",
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
         },
         {
-          date: '2023-12-31 13:00:00',
-          name: '高清网络球形摄像机',
-          address: 'K234+235',
-          root:"中央分隔带",
-          ip:"10.0.61.43",
-          cj:"海康威视",
-          xh:"XXX",
-          wd:"梁山收费站监控网段",
-          jcsj:"2024-01-17",
-          cz:"在线",
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
         },
         {
-          date: '2023-12-31 13:00:00',
-          name: '高清网络球形摄像机',
-          address: 'K234+235',
-          root:"中央分隔带",
-          ip:"10.0.61.43",
-          cj:"海康威视",
-          xh:"XXX",
-          wd:"梁山收费站监控网段",
-          jcsj:"2024-01-17",
-          cz:"在线",
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
         },
         {
-          date: '2023-12-31 13:00:00',
-          name: '高清网络球形摄像机',
-          address: 'K234+235',
-          root:"中央分隔带",
-          ip:"10.0.61.43",
-          cj:"海康威视",
-          xh:"XXX",
-          wd:"梁山收费站监控网段",
-          jcsj:"2024-01-17",
-          cz:"在线",
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
         },
         {
-          date: '2023-12-31 13:00:00',
-          name: '高清网络球形摄像机',
-          address: 'K234+235',
-          root:"中央分隔带",
-          ip:"10.0.61.43",
-          cj:"海康威视",
-          xh:"XXX",
-          wd:"梁山收费站监控网段",
-          jcsj:"2024-01-17",
-          cz:"在线",
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
         },
         {
-          date: '2023-12-31 13:00:00',
-          name: '高清网络球形摄像机',
-          address: 'K234+235',
-          root:"中央分隔带",
-          ip:"10.0.61.43",
-          cj:"海康威视",
-          xh:"XXX",
-          wd:"梁山收费站监控网段",
-          jcsj:"2024-01-17",
-          cz:"在线",
-        }
-        ]
-        }
-    },
-    methods:{
-      changePage(page){
-          
-          this.queryTabList(page);
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
+        },
+        {
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
+        },
+        {
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
+        },
+        {
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
+        },
+        {
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
+        },
+        {
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
+        },
+        {
+          num: 315,
+          online: 30,
+          outline: 30,
+          lost: 40
+        },
+      ],
+      activeName: "first",
+      tableData: [{
+        date: '2023-12-31 13:00:00',
+        name: '高清网络球形摄像机',
+        address: 'K234+235',
+        root: "中央分隔带",
+        ip: "10.0.61.43",
+        cj: "海康威视",
+        xh: "XXX",
+        wd: "梁山收费站监控网段",
+        jcsj: "2024-01-17",
+        cz: "在线",
+      }, {
+        date: '2023-12-31 13:00:00',
+        name: '高清网络球形摄像机',
+        address: 'K234+235',
+        root: "中央分隔带",
+        ip: "10.0.61.43",
+        cj: "海康威视",
+        xh: "XXX",
+        wd: "梁山收费站监控网段",
+        jcsj: "2024-01-17",
+        cz: "在线",
       },
-      formatDate(val){
-        let year = val.getFullYear();
-        var m = val.getMonth() + 1;
-        var day = val.getDate();
-
-        m = m < 10?"0"+m:""+m;
-        day = day < 10?"0"+day:""+day;
-
-        return year+"-"+m+"-"+day+" 00:00:00";
+      {
+        date: '2023-12-31 13:00:00',
+        name: '高清网络球形摄像机',
+        address: 'K234+235',
+        root: "中央分隔带",
+        ip: "10.0.61.43",
+        cj: "海康威视",
+        xh: "XXX",
+        wd: "梁山收费站监控网段",
+        jcsj: "2024-01-17",
+        cz: "在线",
       },
-      handleSearch(data) {
-       console.log(data);
-       this.typeQuery = data.type;
-       this.startTime = this.formatDate(data.time[0]);
-       this.time = this.formatDate(data.time[1]);
-       this.queryChartList();
-       this.queryTabList(1);
+      {
+        date: '2023-12-31 13:00:00',
+        name: '高清网络球形摄像机',
+        address: 'K234+235',
+        root: "中央分隔带",
+        ip: "10.0.61.43",
+        cj: "海康威视",
+        xh: "XXX",
+        wd: "梁山收费站监控网段",
+        jcsj: "2024-01-17",
+        cz: "在线",
       },
-      changeTabs(){
-        console.log("======================", this.myChart);
-        this.$nextTick(() => {
-            this.myChart.resize();
-        });
+      {
+        date: '2023-12-31 13:00:00',
+        name: '高清网络球形摄像机',
+        address: 'K234+235',
+        root: "中央分隔带",
+        ip: "10.0.61.43",
+        cj: "海康威视",
+        xh: "XXX",
+        wd: "梁山收费站监控网段",
+        jcsj: "2024-01-17",
+        cz: "在线",
       },
-      //导出
-      SystemStatusExport(){
-          let loadingInstance = Loading.service({fullscreen:true,background:"#00000052",text:"文件正在下载..."});
-        getSystemStatusExport({
-          startTime:this.startTime,
-          time:this.time,
-          type:this.typeQuery,
-        }).then((res)=>{
-          console.log(res);
-          const url = window.URL.createObjectURL(new Blob([res]))
-          let link = document.createElement('a')
-          link.style.display = 'none'
-          link.href = url
-          link.setAttribute('download', '设备统计信息.xlsx')
-          document.body.appendChild(link)
-          link.click()
-          URL.revokeObjectURL(link.href) // 释放URL 对象
-          document.body.removeChild(link)
-          link = null
-          loadingInstance.close();
-        })
+      {
+        date: '2023-12-31 13:00:00',
+        name: '高清网络球形摄像机',
+        address: 'K234+235',
+        root: "中央分隔带",
+        ip: "10.0.61.43",
+        cj: "海康威视",
+        xh: "XXX",
+        wd: "梁山收费站监控网段",
+        jcsj: "2024-01-17",
+        cz: "在线",
       },
-      queryChartList(){
-
-
-        getSystemStatusList({
-          startTime:this.startTime,
-          time:this.time,
-          type:this.typeQuery,
-        }).then((res)=>{
-          if ( res.code == 200 ) {
-              let data = res.data;
-              let startTime = new Date(this.startTime);
-              let month = startTime.getMonth() + 1;
-              let dayS = startTime.getDate();
-              let backCooDatas = [];
-              let dayArr = [];
-              for (var i = 1 ;i < 31;i++){
-                let daystr = startTime.getFullYear() + "-" + month + "-"+ i;
-                let dataObj = data[daystr] ? parseFloat(data[daystr]):0;
-                dayArr.push(daystr);
-                backCooDatas.push(dataObj);
-              }
-              console.log("===================",backCooDatas);
-              chartsStatistics.series[0].data = backCooDatas;
-              this.$nextTick(() => {
-                this.myChart.setOption(chartsStatistics);
-              }); 
-          }
-
-        })
+      {
+        date: '2023-12-31 13:00:00',
+        name: '高清网络球形摄像机',
+        address: 'K234+235',
+        root: "中央分隔带",
+        ip: "10.0.61.43",
+        cj: "海康威视",
+        xh: "XXX",
+        wd: "梁山收费站监控网段",
+        jcsj: "2024-01-17",
+        cz: "在线",
       },
-      queryTypes(){
-          getSystemStatusType().then((res)=>{
-             console.log("===========================",res);
-             this.equipments = [];
-             let allList = [];
-             let data = res.data;
-             let i = 0;
-             for (var it in data){
-                let item = {
-                  text:it,
-                  num:data[it].sum,
-                  sucessRate:data[it].sucessRate,
-                  lostRate:data[it].lostRate,
-                  failRate:data[it].failRate
-                }
-                console.log(it,i);
-                i+= 1;
-                if ( it == "全部设备" ) {
-                  allList.splice(0,0,item);
-                } else 
-                allList.push(item);
-             }
-             console.log(allList);
-            this.equipments = allList;
-          })
-
+      {
+        date: '2023-12-31 13:00:00',
+        name: '高清网络球形摄像机',
+        address: 'K234+235',
+        root: "中央分隔带",
+        ip: "10.0.61.43",
+        cj: "海康威视",
+        xh: "XXX",
+        wd: "梁山收费站监控网段",
+        jcsj: "2024-01-17",
+        cz: "在线",
       },
-      //查询列表
-      queryTabList(pageIndex,pageSize = 30){
-        getSystemStatusTabList({
-          startTime:this.startTime,
-          time:this.time,
-          type:this.typeQuery, 
-          pageNum:pageIndex,
-          pageSize:pageSize,
-        }).then((res)=>{
-          console.log(res);
-          if ( res.code == 200 ) {
-            this.pageIndex = pageIndex;
-            this.pageSize = pageSize;
-            this.pageTotal = res.total;
-            this.tableData = res.rows;
-
-            this.tableData.forEach((it,index)=>{
-                it.nem = (pageIndex - 1 ) * ( pageSize ) + index + 1;
-            })
-          }
-        })
+      {
+        date: '2023-12-31 13:00:00',
+        name: '高清网络球形摄像机',
+        address: 'K234+235',
+        root: "中央分隔带",
+        ip: "10.0.61.43",
+        cj: "海康威视",
+        xh: "XXX",
+        wd: "梁山收费站监控网段",
+        jcsj: "2024-01-17",
+        cz: "在线",
+      },
+      {
+        date: '2023-12-31 13:00:00',
+        name: '高清网络球形摄像机',
+        address: 'K234+235',
+        root: "中央分隔带",
+        ip: "10.0.61.43",
+        cj: "海康威视",
+        xh: "XXX",
+        wd: "梁山收费站监控网段",
+        jcsj: "2024-01-17",
+        cz: "在线",
+      },
+      {
+        date: '2023-12-31 13:00:00',
+        name: '高清网络球形摄像机',
+        address: 'K234+235',
+        root: "中央分隔带",
+        ip: "10.0.61.43",
+        cj: "海康威视",
+        xh: "XXX",
+        wd: "梁山收费站监控网段",
+        jcsj: "2024-01-17",
+        cz: "在线",
       }
+      ]
+    }
+  },
+  methods: {
+    changePage(page) {
+
+      this.queryTabList(page);
     },
-    mounted() {
-      setTimeout(() => {
-        this.$nextTick(() => {
-          var myChart = echarts.init(document.getElementById('chart1'));
-          myChart.setOption(chartsStatistics);
-          this.myChart = myChart;
-        });
-        this.queryTypes();
-        this.queryTabList(1);
-        this.queryChartList();
-      
+    formatDate(val) {
+      let year = val.getFullYear();
+      var m = val.getMonth() + 1;
+      var day = val.getDate();
+
+      m = m < 10 ? "0" + m : "" + m;
+      day = day < 10 ? "0" + day : "" + day;
 
+      return year + "-" + m + "-" + day + " 00:00:00";
+    },
+    handleSearch(data) {
+      console.log(data);
+      this.typeQuery = data.type;
+      this.startTime = this.formatDate(data.time[0]);
+      this.time = this.formatDate(data.time[1]);
+      this.queryChartList();
+      this.queryTabList(1);
+    },
+    changeTabs() {
+      console.log("======================", this.myChart);
+      this.$nextTick(() => {
+        this.myChart.resize();
       });
     },
-  }
-  </script>
-  
-  <style lang='scss' scoped>
-
+    //导出
+    SystemStatusExport() {
+      let loadingInstance = Loading.service({ fullscreen: true, background: "#00000052", text: "文件正在下载..." });
+      getSystemStatusExport({
+        startTime: this.startTime,
+        time: this.time,
+        type: this.typeQuery,
+      }).then((res) => {
+        console.log(res);
+        const url = window.URL.createObjectURL(new Blob([res]))
+        let link = document.createElement('a')
+        link.style.display = 'none'
+        link.href = url
+        link.setAttribute('download', '设备统计信息.xlsx')
+        document.body.appendChild(link)
+        link.click()
+        URL.revokeObjectURL(link.href) // 释放URL 对象
+        document.body.removeChild(link)
+        link = null
+        loadingInstance.close();
+      }).catch(err => {
+        Message.error(err);
+        loadingInstance.close();
+      })
+    },
+    queryChartList() {
+
+
+      getSystemStatusList({
+        startTime: this.startTime,
+        time: this.time,
+        type: this.typeQuery,
+      }).then((res) => {
+        if (res.code == 200) {
+          let data = res.data;
+          let startTime = new Date(this.startTime);
+          let month = startTime.getMonth() + 1;
+          let dayS = startTime.getDate();
+          let backCooDatas = [];
+          let dayArr = [];
+          for (var i = 1; i < 31; i++) {
+            let daystr = startTime.getFullYear() + "-" + month + "-" + i;
+            let dataObj = data[daystr] ? parseFloat(data[daystr]) : 0;
+            dayArr.push(daystr);
+            backCooDatas.push(dataObj);
+          }
+          console.log("===================", backCooDatas);
+          chartsStatistics.series[0].data = backCooDatas;
+          this.$nextTick(() => {
+            this.myChart.setOption(chartsStatistics);
+          });
+        }
 
-  .bottomTabs {
-    position: relative;
-    display: inline-flex;
-    width: 100%;
-    flex-direction: row;
-    height: 100%;
+      })
+    },
+    queryTypes() {
+      getSystemStatusType().then((res) => {
+        console.log("===========================", res);
+        this.equipments = [];
+        let allList = [];
+        let data = res.data;
+        let i = 0;
+        for (var it in data) {
+          let item = {
+            text: it,
+            num: data[it].sum,
+            sucessRate: data[it].sucessRate,
+            lostRate: data[it].lostRate,
+            failRate: data[it].failRate
+          }
+          console.log(it, i);
+          i += 1;
+          if (it == "全部设备") {
+            allList.splice(0, 0, item);
+          } else
+            allList.push(item);
+        }
+        console.log(allList);
+        this.equipments = allList;
+      })
 
-    .tabs-lo {
-      display: inline-flex;
-      width:30%;
-      margin-right:15px;
+    },
+    //查询列表
+    queryTabList(pageIndex, pageSize = 30) {
+      getSystemStatusTabList({
+        startTime: this.startTime,
+        time: this.time,
+        type: this.typeQuery,
+        pageNum: pageIndex,
+        pageSize: pageSize,
+      }).then((res) => {
+        console.log(res);
+        if (res.code == 200) {
+          this.pageIndex = pageIndex;
+          this.pageSize = pageSize;
+          this.pageTotal = res.total;
+          this.tableData = res.rows;
+
+          this.tableData.forEach((it, index) => {
+            it.nem = (pageIndex - 1) * (pageSize) + index + 1;
+          })
+        }
+      })
     }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$nextTick(() => {
+        var myChart = echarts.init(document.getElementById('chart1'));
+        myChart.setOption(chartsStatistics);
+        this.myChart = myChart;
+      });
+      this.queryTypes();
+      this.queryTabList(1);
+      this.queryChartList();
 
-    .tabs-mo {
-      display: inline-flex;
-      width:70%;
-    }
+
+    });
+  },
+}
+</script>
+  
+<style lang='scss' scoped>
+.bottomTabs {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  flex-direction: row;
+  height: 100%;
+
+  .tabs-lo {
+    display: inline-flex;
+    width: 30%;
+    margin-right: 15px;
   }
 
+  .tabs-mo {
+    display: inline-flex;
+    width: 70%;
+  }
+}
 
 
-  .topTabs {
-    display: inline-flex;
-    width: 100%;
-    height: 100%;
-    min-height: 300px;
-    position: relative;
-    flex-direction: row;
-    flex-wrap: wrap;
 
+.topTabs {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+  position: relative;
+  flex-direction: row;
+  flex-wrap: wrap;
 
-    >.item {
-      display: inline-flex;
+
+  >.item {
+    display: inline-flex;
+    position: relative;
+    flex-direction: column;
+    width: calc(100% /9 - 15px);
+    height: 175px;
+    margin-right: 15px;
+    margin-bottom: 15px;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425868 93%);
+    border-radius: 3px 3px 3px 3px;
+
+    .item-body {
       position: relative;
-      flex-direction: column;
-      width: calc(100% /9 - 15px);
-      height:175px;
-      margin-right:15px;
-      margin-bottom:15px;
-      background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #06425868 93%);
-      border-radius: 3px 3px 3px 3px;
-
-      .item-body {
-        position: relative;
-        display: inline-flex;
-        flex-direction: row;
-        width:100%;
-        height:100%;
+      display: inline-flex;
+      flex-direction: row;
+      width: 100%;
+      height: 100%;
 
-        img {
-          display: inline-flex;
-          width: 34px;
-          height: 34px;
-          border-radius: 50%;
-          border: 1px solid #00D1FF;
-        }
+      img {
+        display: inline-flex;
+        width: 34px;
+        height: 34px;
+        border-radius: 50%;
+        border: 1px solid #00D1FF;
+      }
 
-        .left-body {
-          display:inline-flex;
-          position: relative;
-          width:30%;
-          height:100%;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          margin:0 10px;
+      .left-body {
+        display: inline-flex;
+        position: relative;
+        width: 30%;
+        height: 100%;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin: 0 10px;
 
-          .num {
+        .num {
           display: inline-flex;
           font-size: 19px;
           font-family: PangMenZhengDao;
           font-weight: 400;
           color: #00D1FF;
-          margin:0 10px;
-          margin-top:20px;
+          margin: 0 10px;
+          margin-top: 20px;
         }
 
 
@@ -657,312 +613,319 @@ import * as echarts from "echarts";
           font-weight: 500;
           color: #FFFFFFF0;
           position: relative;
-          top:5px;
-          left:5px;
-        }  
-
+          top: 5px;
+          left: 5px;
         }
 
-        .line {
-          display: inline-flex;
-          width:2px;
-          height:100px;
-          background:linear-gradient(180deg, rgba(3, 60, 81, 0), rgba(0, 100, 137, 1), rgba(3, 60, 81, 0));
-          position: relative;
-          top:30px;
-        }
+      }
+
+      .line {
+        display: inline-flex;
+        width: 2px;
+        height: 100px;
+        background: linear-gradient(180deg, rgba(3, 60, 81, 0), rgba(0, 100, 137, 1), rgba(3, 60, 81, 0));
+        position: relative;
+        top: 30px;
+      }
+
+      .right-list {
+        display: inline-flex;
+        position: relative;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
 
-        .right-list {
+        .list-text {
           display: inline-flex;
           position: relative;
-          flex-direction: column;
+          width: 100%;
+          height: 40px;
+          font-size: 12px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          color: #FFFFFF;
           justify-content: center;
           align-items: center;
-          width:100%;
-          height:100%;
 
-          .list-text {
+          >span:first-child {
             display: inline-flex;
-            position: relative;
-            width:100%;
-            height:40px;
-            font-size: 12px;
-            font-family: PingFang SC, PingFang SC;
-            font-weight: 400;
-            color: #FFFFFF;
-            justify-content: center;
-            align-items: center;
-
-            > span:first-child {
-               display: inline-flex;
-               width:40px;
-            }
-
-            .show-text1 {
-              width:100px;
-               color:#00EBC1ee;
-               font-size: 14px;
-              font-family: PangMenZhengDao;
-              font-weight: 800;
-            }
-
-            .show-text2 {
-              width:100px;
-               color:#FFFFFFee;
-               font-size: 14px;
-              font-family: PangMenZhengDao;
-              font-weight: 800;               
-            }
-
-            .show-text3 {
-              width:100px;
-               color:#FFD15Cee;
-               font-size: 14px;
-              font-family: PangMenZhengDao;
-              font-weight: 800;              
-            }
+            width: 40px;
+          }
+
+          .show-text1 {
+            width: 100px;
+            color: #00EBC1ee;
+            font-size: 14px;
+            font-family: PangMenZhengDao;
+            font-weight: 800;
           }
-          
-        }
 
+          .show-text2 {
+            width: 100px;
+            color: #FFFFFFee;
+            font-size: 14px;
+            font-family: PangMenZhengDao;
+            font-weight: 800;
+          }
+
+          .show-text3 {
+            width: 100px;
+            color: #FFD15Cee;
+            font-size: 14px;
+            font-family: PangMenZhengDao;
+            font-weight: 800;
+          }
+        }
 
       }
 
-      .title-tool {
-        position: relative;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        width:100%;
-        height: 36px;
-        background: linear-gradient(180deg, rgba(1,139,182,0) 0%, #1FCAF160 100%);
-        border-radius: 3px 3px 0px 0px;
 
-        .text {
-          font-size: 17px;
-          font-family: PangMenZhengDao;
-          font-weight: 400;
-          color: #FFFFFF;
-        }
+    }
+
+    .title-tool {
+      position: relative;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 36px;
+      background: linear-gradient(180deg, rgba(1, 139, 182, 0) 0%, #1FCAF160 100%);
+      border-radius: 3px 3px 0px 0px;
+
+      .text {
+        font-size: 17px;
+        font-family: PangMenZhengDao;
+        font-weight: 400;
+        color: #FFFFFF;
+      }
 
 
 
-      
 
 
-      }
 
-      .title-tool::after {
-        content: "";
-        position: absolute;
-        bottom:1px;
-        width:100%;
-        height: 1px;
-        background: linear-gradient(90deg, rgba(81,181,255,0) 3%, #51B5FF 49%, rgba(81,181,255,0) 100%);
-      }
     }
-  }
 
-.btnSearch{
-      background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
-      margin-left: 10px;
-      border-color: transparent;
-      color:#fff;
+    .title-tool::after {
+      content: "";
+      position: absolute;
+      bottom: 1px;
+      width: 100%;
+      height: 1px;
+      background: linear-gradient(90deg, rgba(81, 181, 255, 0) 3%, #51B5FF 49%, rgba(81, 181, 255, 0) 100%);
     }
-  
-::v-deep .el-table .cell {
-    padding-left:0px !important;
   }
+}
 
-  ::v-deep .el-table .el-table__header-wrapper th {
-    background-color: #064258 !important;
-    color:#00D1FF;
-    border-color: #064258 !important;
-    border:0px !important;
-    font-size: 14px;
-    font-family: PingFang SC, PingFang SC;
-    font-weight: 500;
-  }
+.btnSearch {
+  background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+  margin-left: 10px;
+  border-color: transparent;
+  color: #fff;
+}
 
-  ::v-deep .el-table {
-    border:0px !important;
-    background-color: transparent;
-    font-size:12px !important;
+::v-deep .el-table .cell {
+  padding-left: 0px !important;
+}
+
+::v-deep .el-table .el-table__header-wrapper th {
+  background-color: #064258 !important;
+  color: #00D1FF;
+  border-color: #064258 !important;
+  border: 0px !important;
+  font-size: 14px;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500;
+}
+
+::v-deep .el-table {
+  border: 0px !important;
+  background-color: transparent;
+  font-size: 12px !important;
+}
+
+::v-deep .el-table__body-wrapper {
+  background-color: #064258;
+  color: #fff;
+}
+
+::v-deep .el-table .el-table__cell {
+  height: 47px;
+  font-size: 14px;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500;
+  color: #FFFFFF;
+}
+
+::v-deep .el-table tr:hover td {
+  background: #1b2528 !important;
+  color: #00D1FF;
+  height: 47px;
+}
+
+::v-deep .el-table tr:nth-child(odd) td {
+  background-color: #13272F;
+  border: 0px !important;
+}
+
+::v-deep .el-table tr:nth-child(even) td {
+  border: 0px !important;
+}
+
+::v-deep .el-table tr {
+  background-color: #133242 !important;
+  border-collapse: 0;
+  border: 0px !important;
+  background-color: transparent !important;
+}
+
+::v-deep .el-tabs__item {
+  display: inline-flex;
+  justify-content: center;
+  font-size: 16px;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500;
+  color: #FFFFFF;
+  min-width: 128px;
+  position: relative;
+  left: 10px;
+}
+
+::v-deep .el-tabs__active-bar {
+  min-width: 128px;
+}
+
+::v-deep .el-tabs__nav-wrap::after {
+  background-color: #133242;
+  opacity: 0.1;
+}
+
+.footTabs {
+  display: inline;
+  width: 100%;
+
+}
+
+.topdiv {
+  display: inline-flex;
+  position: relative;
+  width: 100%;
+  height: 40px;
+  justify-content: space-between;
+  align-items: center;
+
+  .right-div {
+    display: inline;
+    width: 450px;
   }
+}
 
-  ::v-deep .el-table__body-wrapper {
-    background-color: #064258;
-    color: #fff;
-  }
- ::v-deep .el-table .el-table__cell {
-    height:47px;
-    font-size: 14px;
-    font-family: PingFang SC, PingFang SC;
-    font-weight: 500;
-    color: #FFFFFF;
- }
-
-  ::v-deep .el-table tr:hover td {
-    background: #1b2528 !important;
-    color:#00D1FF;
-    height: 47px;
-  }
+.TrafficFlow {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 6;
+  color: white;
 
-  ::v-deep .el-table tr:nth-child(odd) td{
-    background-color: #13272F ;
-    border:0px !important; 
-  }
-  ::v-deep .el-table tr:nth-child(even) td{
-    border:0px !important; 
-  }
+  .header-shot {
+    width: 98%;
+    margin: auto;
+    margin-top: 15px;
+    height: 160px;
 
-  ::v-deep .el-table tr {
-    background-color: #133242 !important;
-    border-collapse:0;
-    border:0px !important;
-    background-color: transparent !important;
   }
 
-   ::v-deep .el-tabs__item{
+  .middleDiv {
     display: inline-flex;
-    justify-content: center;
-    font-size: 16px;
-    font-family: PingFang SC, PingFang SC;
-    font-weight: 500;
-    color: #FFFFFF;
-    min-width:128px;
-    position: relative;
-    left:10px;
-   }
+    width: 100%;
+    height: 343px;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425860 100%);
+    margin-bottom: 30px;
+
+    >div {
+      display: inline-flex;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .content {
+    width: 100%;
+    margin: auto;
+    display: flex;
+    flex: 1;
+    pointer-events: none;
+    margin-top: 19px;
+
+    >div {
+      pointer-events: auto;
+    }
 
-   ::v-deep .el-tabs__active-bar {
-    min-width:128px;
-   }
+    .content-l {
+      width: calc(25%);
 
-   ::v-deep .el-tabs__nav-wrap::after {
-    background-color: #133242;
-    opacity: 0.1;
-   }
+      margin-right: 20px;
 
-   .footTabs {
-     display: inline;
-     width:100%;
-    
-   }
+    }
 
-   .topdiv {
-    display: inline-flex;
-    position: relative;
-    width:100%;
-    height:40px;
-    justify-content: space-between;
-    align-items: center;
+    .content-mi {
+      width: calc(50%);
 
-    .right-div {
-      display: inline;
-      width:450px;
+      margin-right: 20px;
     }
-   }
 
-  .TrafficFlow {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    z-index: 6;
-    color: white;
-  
-    .header-shot{
-      width: 98%;
-      margin: auto;
-      margin-top: 15px;
-      height:160px;
 
+    .content-m {
+      display: inline-flex;
+      flex-direction: column;
+      width: calc(100% / 4);
+      margin-right: 20px;
+
+      .content-m-t {
+        width: 100%;
+        height: 240px;
+        margin-bottom: 20px;
+      }
     }
 
-    .middleDiv {
-        display: inline-flex;
-        width:100%;
-        height:343px;
-        background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #06425860 100%);
-        margin-bottom:30px;
+    .content-r {
+      width: 49.4%;
+    }
+  }
 
-        > div {
-            display: inline-flex;
-            width:100%;
-            height:100%;
-        }
+  .foot {
+    width: 98%;
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+    pointer-events: none;
+    margin-top: 8px;
+
+    >div {
+      pointer-events: auto;
     }
 
-    .content {
+    .foot-w {
       width: 100%;
-      margin: auto;
-      display: flex;
-      flex: 1;
-      pointer-events: none;
-      margin-top: 19px;
-
-      >div {
-        pointer-events: auto;
-      }
-  
-      .content-l {
-        width: calc(25%);
-     
-        margin-right:20px;
-
-      }
 
-      .content-mi {
-        width: calc(50%);
-     
-        margin-right:20px;
-      }
-  
-  
-      .content-m {
-        display: inline-flex;
-        flex-direction: column;
-        width: calc(100% / 4 );
-        margin-right:20px;
+    }
 
-        .content-m-t {
-            width:100%;
-            height:240px;
-            margin-bottom: 20px;
-        }
-      }
-      .content-r {
-        width: 49.4%;
-      }
+    .foot-l {
+      width: 726px;
     }
-    .foot{
-      width: 98%;
-      margin: auto;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex: 1;
-      pointer-events: none;
-      margin-top: 8px;
-      >div {
-        pointer-events: auto;
-      }
 
-      .foot-w {
-        width:100%;
+    .foot-m {
+      width: 613px;
+    }
 
-      }
-  
-      .foot-l {
-        width: 726px;
-      }
-      .foot-m {
-        width: 613px;
-      }
-      .foot-r {
-        width: 493px;
-      }
+    .foot-r {
+      width: 493px;
     }
   }
-  </style>
+}
+</style>
   
\ No newline at end of file