更改在线率统计

ruoyi-ui/src/api/equipment/type/api.js

@@ -6,141 +6,146 @@
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \TunnelPlatform-V3\src\api\equipment\type\api.js
  */
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 查询设备类型列表
 export function listType(query) {
   return request({
-    url: '/type/list',
+    url: "/type/list",
-    method: 'get',
+    method: "get",
-    params: query
+    params: query,
-  })
+  });
 }
 
 // 查询存在设备的设备类型列表
 export function listHasType(tunnelId) {
   return request({
-    url: '/type/hasList?tunnelId=' + tunnelId,
+    url: "/type/hasList?tunnelId=" + tunnelId,
-    method: 'get',
+    method: "get",
-  })
+  });
 }
 export function hasListByBigType(bigType) {
   return request({
-    url: '/type/hasListByBigType?bigType=' + bigType,
+    url: "/type/hasListByBigType?bigType=" + bigType,
-    method: 'get',
+    method: "get",
-  })
+  });
 }
 // 查询存在设备的设备类型列表
 export function groupByBigType(tunnelId) {
   return request({
-    url: '/type/hasListGroupByBigType',
+    url: "/type/hasListGroupByBigType",
-    method: 'get',
+    method: "get",
-  })
+  });
 }
 
 // 查询设备类型列表
 export function eqTypeList(data) {
   return request({
-    url: '/type/eqTypeList',
+    url: "/type/eqTypeList",
-    method: 'get',
+    method: "get",
-    params: data
+    params: data,
-  })
+  });
 }
 
 // 查询设备类型详细
 export function getType(typeId) {
   return request({
-    url: '/type/' + typeId,
+    url: "/type/" + typeId,
-    method: 'get'
+    method: "get",
-  })
+  });
 }
 
 // 新增设备类型
 export function addType(data) {
   return request({
-    url: '/type',///addEquipmentType
+    url: "/type", ///addEquipmentType
-    method: 'post',
+    method: "post",
-    data: data
+    data: data,
-  })
+  });
 }
 
 // 修改设备类型
 export function updateType(data) {
   return request({
-    url: '/type',
+    url: "/type",
-    method: 'put',
+    method: "put",
-    data: data
+    data: data,
-  })
+  });
 }
 
 // 删除设备类型
 export function delType(typeId) {
   return request({
-    url: '/type/' + typeId,
+    url: "/type/" + typeId,
-    method: 'delete'
+    method: "delete",
-  })
+  });
 }
 
 //加载图片
 export function loadPicture(data) {
   return request({
-    url: '/type/loadPicture',
+    url: "/type/loadPicture",
-    method: 'post',
+    method: "post",
-    params: data
+    params: data,
-  })
+  });
 }
 
 // 查询自动触发设备类型列表
 export function autoEqTypeList(data) {
   return request({
-    url: '/type/getHasItemEqTypeList',
+    url: "/type/getHasItemEqTypeList",
-    method: 'get',
+    method: "get",
-    params: data
+    params: data,
-  })
+  });
 }
 
-
 // 查询设备需要执行的操作
 export function getStateTypeId(data) {
   return request({
-    url: '/eqTypeState/getDataTypeList',
+    url: "/eqTypeState/getDataTypeList",
-    method: 'get',
+    method: "get",
-    params: data
+    params: data,
-  })
+  });
 }
 
 // 回显自动触发的接口
 export function getTriggersByRelateId(data) {
   return request({
-    url: '/strategy/trigger/getTriggersByRelateId',
+    url: "/strategy/trigger/getTriggersByRelateId",
-    method: 'get',
+    method: "get",
-    params: data
+    params: data,
-  })
+  });
 }
 
 // 相关策略查询
 export function getTypeAndStrategy(data) {
   return request({
-    url: '/type/getTypeAndStrategy',
+    url: "/type/getTypeAndStrategy",
-    method: 'get',
+    method: "get",
-    params: data
+    params: data,
-  })
+  });
 }
 
-
-
 // 导出设备图标
 export function exportDeviceIcon(query) {
   return request({
-    url: '/type/export',
+    url: "/type/export",
-    method: 'get',
+    method: "get",
-    params: query
+    params: query,
-  })
+  });
 }
 
 export function listDevicesType() {
   return request({
-    url: '/type/list',
+    url: "/type/list",
-    method: 'get',
+    method: "get",
-  })
+  });
+}
+
+// 设备在线率统计
+export function deviceStatusList(id) {
+  return request({
+    url: "/system/status/deviceStatusList?deviceld=" + id,
+    method: "get",
+  });
 }

ruoyi-ui/src/api/event/perceiveEvent.js

@@ -1,174 +1,171 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
-import { download } from '../../utils/request'
+import { download } from "../../utils/request";
 // 全景数据 - 运行环境接口
 
-
 //查询预警表与历史表所有感知事件的数量
 export function geTwarningTotal(query) {
-    return request({
+  return request({
-      url: '/perceivedEvents/warning/warningTotal',
+    url: "/perceivedEvents/warning/warningTotal",
-      method: 'post',
+    method: "post",
-      params: {
+    params: {
-        ...query,
+      ...query,
-      }
+    },
-    })
+  });
-  }
+}
 
-  //查询全部的感知事件类型
+//查询全部的感知事件类型
-  export function getSystemStatusTabList(query) {
+export function getSystemStatusTabList(query) {
-    //system/status/tablist
+  //system/status/tablist
-    return request({
+  return request({
-        url: '/system/status/tablist',
+    url: "/system/status/tablist",
-        method: 'post',
+    method: "post",
-        params: {
+    params: {
-          ...query,
+      ...query,
-        }
+    },
-      })
+  });
-  }
+}
 
-   //根据事件主子类查询事件列表
+//根据事件主子类查询事件列表
-   export function getPerceivedEventsList(query) {
+export function getPerceivedEventsList(query) {
-    //system/status/tablist
+  //system/status/tablist
-    return request({
+  return request({
-        url: '/perceivedEvents/warning/perceivedEventsList',
+    url: "/perceivedEvents/warning/perceivedEventsList",
-        method: 'post',
+    method: "post",
-        params: {
+    params: {
-          ...query,
+      ...query,
-        }
+    },
-      })
+  });
-  }
+}
 
-     //路段感知事件排名
+//路段感知事件排名
-     export function getSectionPerceivedList(query) {
+export function getSectionPerceivedList(query) {
-        //system/status/tablist
+  //system/status/tablist
-        return request({
+  return request({
-            url: '/perceivedEvents/warning/sectionPerceivedList',
+    url: "/perceivedEvents/warning/sectionPerceivedList",
-            method: 'post',
+    method: "post",
-            params: {
+    params: {
-              ...query,
+      ...query,
-            }
+    },
-          })
+  });
-      }
+}
 
- 
+//路段日感知事件
-     //路段日感知事件
+export function getSectionPerceivedNumber(query) {
-     export function getSectionPerceivedNumber(query) {
+  //system/status/tablist
-        //system/status/tablist
+  return request({
-        return request({
+    url: "/perceivedEvents/warning/sectionPerceivedNumber",
-            url: '/perceivedEvents/warning/sectionPerceivedNumber',
+    method: "post",
-            method: 'post',
+    params: {
-            params: {
+      ...query,
-              ...query,
+    },
-            }
+  });
-          })
+}
-      }     
 
-      //日累计感知事件
+//日累计感知事件
-      export function getDailyCumulative(query) {
+export function getDailyCumulative(query) {
-        //system/status/tablist
+  //system/status/tablist
-        return request({
+  return request({
-            url: '/perceivedEvents/warning/dailyCumulative',
+    url: "/perceivedEvents/warning/dailyCumulative",
-            method: 'post',
+    method: "post",
-            params: {
+    params: {
-              ...query,
+      ...query,
-            }
+    },
-          })
+  });
-      }          
+}
 
-         //感知事件源分析
+//感知事件源分析
-         export function getWarningSourceGroup(query) {
+export function getWarningSourceGroup(query) {
-            return request({
+  return request({
-                url: '/perceivedEvents/warning/warningSourceGroup',
+    url: "/perceivedEvents/warning/warningSourceGroup",
-                method: 'post',
+    method: "post",
-                // url: '/business/warning/list',
+    // url: '/business/warning/list',
-                // method: 'get',
+    // method: 'get',
-                params: {
+    params: {
-                  ...query,
+      ...query,
-                }
+    },
-              })
+  });
-          }          
+}
 
-         //日事件处置情况占比
+//日事件处置情况占比
-         export function getWarningStateDay(query) {
+export function getWarningStateDay(query) {
-            //system/status/tablist
+  //system/status/tablist
-            return request({
+  return request({
-                url: '/perceivedEvents/warning/warningStateDay',
+    url: "/perceivedEvents/warning/warningStateDay",
-                method: 'post',
+    method: "post",
-                params: {
+    params: {
-                  ...query,
+      ...query,
-                }
+    },
-              })
+  });
-          }  
+}
 
-         //近一月感知事件时段分布统计
+//近一月感知事件时段分布统计
-         export function getDailyCumulativeMonth(query) {
+export function getDailyCumulativeMonth(query) {
-            //system/status/tablist
+  //system/status/tablist
-            return request({
+  return request({
-                url: '/perceivedEvents/warning/dailyCumulativeMonth',
+    url: "/perceivedEvents/warning/dailyCumulativeMonth",
-                method: 'post',
+    method: "post",
-                params: {
+    params: {
-                  ...query,
+      ...query,
-                }
+    },
-              })
+  });
-          }  
+}
 
-         //感知事件类型分析
+//感知事件类型分析
-         export function getWarningTypeDay(query) {
+export function getWarningTypeDay(query) {
-            //system/status/tablist
+  //system/status/tablist
-            return request({
+  return request({
-                url: '/perceivedEvents/warning/warningTypeDay',
+    url: "/perceivedEvents/warning/warningTypeDay",
-                method: 'post',
+    method: "post",
-                params: {
+    params: {
-                  ...query,
+      ...query,
-                }
+    },
-              })
+  });
-          }  
+}
 
-         //感知事件查询-感知事件趋势
+//感知事件查询-感知事件趋势
-         export function getWarningTrend(query) {
+export function getWarningTrend(query) {
-            //system/status/tablist
+  //system/status/tablist
-            return request({
+  return request({
-                url: '/perceivedEvents/warning/warningTrend',
+    url: "/perceivedEvents/warning/warningTrend",
-                method: 'post',
+    method: "post",
-                data: {
+    data: {
-                  ...query,
+      ...query,
-                }
+    },
-              })
+  });
-          }  
+}
 
-         //感知事件查询-类型占比
+//感知事件查询-类型占比
-         export function getWarningSectionType(query) {
+export function getWarningSectionType(query) {
-            //system/status/tablist
+  //system/status/tablist
-            return request({
+  return request({
-                url: '/perceivedEvents/warning/warningSectionType',
+    url: "/perceivedEvents/warning/warningSectionType",
-                method: 'post',
+    method: "post",
-                data: {
+    data: {
-                  ...query,
+      ...query,
-                }
+    },
-              })
+  });
-          }  
+}
 
-         //感知事件查询-路段范围内桩号分布
+//感知事件查询-路段范围内桩号分布
-         export function getSectionMarkNumber(query) {
+export function getSectionMarkNumber(query) {
-            //system/status/tablist
+  //system/status/tablist
-            return request({
+  return request({
-                url: '/perceivedEvents/warning/sectionMarkNumber',
+    url: "/perceivedEvents/warning/sectionMarkNumber",
-                method: 'post',
+    method: "post",
-                data: {
+    data: {
-                  ...query,
+      ...query,
-                }
+    },
-              })
+  });
-          }  
+}
 
-///
+//查询辖区路段列表
-    //查询辖区路段列表
+export function getRoadSectionList(query) {
-    export function getRoadSectionList(query) {
+  //system/status/tablist
-      //system/status/tablist
+  return request({
-      return request({
+    url: "/business/roadSection/listAll",
-          url: '/business/roadSection/listAll',
+    method: "get",
-          method: 'get',
+    params: {
-          params: {
+      ...query,
-            ...query,
+    },
-          }
+  });
-        })
+}
-    }  

ruoyi-ui/src/components/eventDialogTable/video.vue

@@ -46,7 +46,7 @@
         size="mini"
         style="padding: 0 15px 15px 15px"
       >
-        <el-tabs class="videoTabs" v-model="videoActive">
+        <el-tabs class="videoTabs" v-model="videoActive" @tab-click="handleClick">
           <el-tab-pane label="详细信息" name="information">
             <el-row>
               <el-col :span="13">
@@ -142,7 +142,13 @@
               </el-col>
             </el-row>
           </el-tab-pane>
-          <el-tab-pane label="在线率统计" name="third">在线率统计</el-tab-pane>
+          <el-tab-pane label="在线率统计" name="third">
+            <!-- <LineChart
+            v-if="activeName === 'third'"
+            :productId="dialogData.productId"
+            style="height: 222px"
+          /> -->
+          </el-tab-pane>
         </el-tabs>
       </el-form>
       <div slot="footer">
@@ -372,9 +378,11 @@
 <script>
 import { displayH5sVideoAll } from "@/api/icyH5stream";
 import { getDeviceById,videoStreaming } from "@/api/equipment/eqlist/api.js"; //查询弹窗信息
+import {deviceStatusList} from "@/api/equipment/type/api.js"
 import { getInfo } from "@/api/equipment/tunnel/api.js"; //查询设备当前状态
 import bus from "@/utils/bus";
 import videoPlayer from "@/views/event/vedioRecord/myVideo.vue";
+// import LineChart from "../";
 
 export default {
   // props: ["eqInfo", "brandList", "directionList", "eqTypeDialogList"],
@@ -523,6 +531,15 @@ export default {
           displayH5sVideoAll(res.data.secureKey);
         });
     },
+    handleClick(){
+      console.log("qiehuantab",this.videoActive)
+    },
+    // 根据id获取在线率统计数据
+    getDeviceStatusList(){
+      deviceStatusList().then((res)=>{
+       console.log("线率统计数据",res)
+      })
+    },
     getDirection(num) {
       for (var item of this.directionList) {
         if (item.dictValue == num) {

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue

@@ -9,7 +9,13 @@
           </Descriptions>
         </ElTabPane>
         <ElTabPane label="设备参数" name="second">设备参数</ElTabPane>
-        <ElTabPane label="在线率统计" name="third">在线率统计</ElTabPane>
+        <ElTabPane label="在线率统计" name="third">
+          <LineChart
+            v-if="activeName === 'third'"
+            :productId="dialogData.productId"
+            style="height: 150px"
+          />
+        </ElTabPane>
       </ElTabs>
 
       <div class="bottom">
@@ -33,6 +39,7 @@ import Button from "@screen/components/Buttons/Button.vue";
 import Descriptions from "@screen/components/Descriptions.vue";
 import BroadcastReleases from "./components/BroadcastReleases.vue";
 import Video from "@screen/components/Video";
+import LineChart from "../../LineChart/index.vue";
 
 import { DeviceTypeEnum } from "@screen/utils/enum.js";
 
@@ -53,6 +60,7 @@ export default {
     Descriptions,
     BroadcastReleases,
     Video,
+    LineChart,
   },
   data() {
     return {

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue

@@ -7,16 +7,30 @@
           <Descriptions :list="list" :data="data" style="gap: 18px">
             <template #content-deviceName>
               <span>{{ dialogData.deviceName || "-" }}</span>
-              <img @click="controlDialogVisible = true" v-if="[0, '0'].includes(
+              <img
-    dialogData.parseOtherConfig &&
+                @click="controlDialogVisible = true"
-    dialogData.parseOtherConfig.ptzCtrl
+                v-if="
-  )
+                  [0, '0'].includes(
-    " src="@screen/images/camera-control-icon.svg" width="18px" height="18px" style="cursor: pointer" />
+                    dialogData.parseOtherConfig &&
+                      dialogData.parseOtherConfig.ptzCtrl
+                  )
+                "
+                src="@screen/images/camera-control-icon.svg"
+                width="18px"
+                height="18px"
+                style="cursor: pointer"
+              />
             </template>
           </Descriptions>
         </ElTabPane>
         <ElTabPane label="摄相机参数" name="second">摄相机参数</ElTabPane>
-        <ElTabPane label="在线率统计" name="third">在线率统计</ElTabPane>
+        <ElTabPane label="在线率统计" name="third">
+          <LineChart
+            v-if="activeName === 'third'"
+            :productId="dialogData.productId"
+            style="height: 180px"
+          />
+        </ElTabPane>
       </ElTabs>
 
       <div class="bottom">
@@ -25,7 +39,10 @@
       </div>
     </div>
 
-    <CameraControlDialog :deviceId="dialogData.iotDeviceId" v-model="controlDialogVisible" />
+    <CameraControlDialog
+      :deviceId="dialogData.iotDeviceId"
+      v-model="controlDialogVisible"
+    />
   </Dialog>
 </template>
 
@@ -35,6 +52,7 @@ import Button from "@screen/components/Buttons/Button.vue";
 import Video from "@screen/components/Video";
 import Descriptions from "@screen/components/Descriptions.vue";
 import CameraControlDialog from "./components/CameraControlDialog.vue";
+import LineChart from "../../LineChart/index.vue";
 
 import {
   getRoadInfoByStakeMark,
@@ -53,6 +71,7 @@ export default {
     Descriptions,
     Video,
     CameraControlDialog,
+    LineChart,
   },
   data() {
     return {
@@ -180,7 +199,7 @@ export default {
     align-items: center;
     justify-content: end;
 
-    >div {
+    > div {
       font-size: 16px;
       padding: 6px 12px;
     }

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue

@@ -8,7 +8,13 @@
           <Descriptions :list="list" :data="data" style="gap: 18px" />
         </ElTabPane>
         <ElTabPane label="设备参数" name="second">设备参数</ElTabPane>
-        <ElTabPane label="在线率统计" name="third">在线率统计</ElTabPane>
+        <ElTabPane label="在线率统计" name="third">
+          <LineChart
+            v-if="activeName === 'third'"
+            :productId="dialogData.productId"
+            style="height: 180px"
+          />
+        </ElTabPane>
       </ElTabs>
 
       <div class="bottom">
@@ -17,7 +23,10 @@
     </div>
 
     <!-- <DeviceControlDialog v-model="deviceControlVisible" :deviceId="dialogData.iotDeviceId || '8697-1'" /> -->
-    <DeviceControlDialog v-model="deviceControlVisible" :deviceId="dialogData.iotDeviceId" />
+    <DeviceControlDialog
+      v-model="deviceControlVisible"
+      :deviceId="dialogData.iotDeviceId"
+    />
   </Dialog>
 </template>
 
@@ -32,11 +41,12 @@ import {
 } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
 import Video from "@screen/components/Video";
 import request from "@/utils/request";
-import { delay } from "@screen/utils/common.js"
+import { delay } from "@screen/utils/common.js";
-import { handle3CResult } from "@screen/utils/deviceControl.js"
+import { handle3CResult } from "@screen/utils/deviceControl.js";
 import { controlModelMap, gzztMap } from "@screen/utils/enum.js";
 import { find } from "lodash";
 import { dialogDelayVisible } from "./../mixin";
+import LineChart from "../../LineChart/index.vue";
 
 // 行车诱导
 export default {
@@ -53,6 +63,7 @@ export default {
     Descriptions,
     DeviceControlDialog,
     Video,
+    LineChart,
   },
   data() {
     return {
@@ -116,7 +127,7 @@ export default {
       .then((data) => {
         this.dialogData.brand = data.brand;
       })
-      .catch((err) => { });
+      .catch((err) => {});
 
     // this.requestURL(52)
     //   .then((result) => {
@@ -129,17 +140,19 @@ export default {
     //     this.data.inWorkStatus = result.inWorkStatus;
     //   })
     //   .catch((err) => { });
-    this.requestURL()
+    this.requestURL().then(async (data) => {
-      .then(async (data) => {
+      await delay(0);
-        await delay(0);
+      const formData = {};
-        const formData = {};
+      formData.controlType = data.mode;
-        formData.controlType = data.mode;
+      await handle3CResult(data, formData, this.requestURL);
-        await handle3CResult(data, formData, this.requestURL);
+
-
+      formData.controlType &&
-        formData.controlType && (this.$set(this.data, "workMode", controlModelMap[formData.controlType]))//(this.data.workMode = controlModelMap[formData.controlType]);
+        this.$set(this.data, "workMode", controlModelMap[formData.controlType]); //(this.data.workMode = controlModelMap[formData.controlType]);
-        formData.inWorkStatus && (this.$set(this.data, "inWorkStatus", gzztMap[formData.inWorkStatus]))//(this.data.inWorkStatus = gzztMap[formData.inWorkStatus]);
+      formData.inWorkStatus &&
-        formData.onWorkStatus && (this.$set(this.data, "onWorkStatus", gzztMap[formData.onWorkStatus]))//(this.data.onWorkStatus = gzztMap[formData.onWorkStatus]);
+        this.$set(this.data, "inWorkStatus", gzztMap[formData.inWorkStatus]); //(this.data.inWorkStatus = gzztMap[formData.inWorkStatus]);
-      });
+      formData.onWorkStatus &&
+        this.$set(this.data, "onWorkStatus", gzztMap[formData.onWorkStatus]); //(this.data.onWorkStatus = gzztMap[formData.onWorkStatus]);
+    });
 
     const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
     console.log(
@@ -206,7 +219,7 @@ export default {
     align-items: center;
     justify-content: end;
 
-    >div {
+    > div {
       font-size: 16px;
       padding: 6px 12px;
     }

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/index.vue

@@ -12,7 +12,13 @@
           />
         </ElTabPane>
         <ElTabPane label="设备参数" name="second">设备参数</ElTabPane>
-        <ElTabPane label="在线率统计" name="third">在线率统计</ElTabPane>
+        <ElTabPane label="在线率统计" name="third">
+          <LineChart
+            v-if="activeName === 'third'"
+            :productId="dialogData.productId"
+            style="height: 180px"
+          />
+        </ElTabPane>
       </ElTabs>
     </div>
 
@@ -37,6 +43,7 @@ import DeviceControlDialog from "./components/DeviceControlDialog.vue";
 
 import request from "@/utils/request";
 import { dialogDelayVisible } from "./../mixin";
+import LineChart from "../../LineChart/index.vue";
 
 // 疲劳唤醒弹窗
 export default {
@@ -48,6 +55,7 @@ export default {
     Video,
     DeviceControlDialog,
     Button,
+    LineChart,
   },
   data() {
     return {
@@ -115,7 +123,7 @@ export default {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding-bottom: 24px;
+  // padding-bottom: 24px;
 
   .camera-video {
     flex: 1.5;

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/index.vue

@@ -18,7 +18,10 @@
           </div>
         </ElTabPane>
         <ElTabPane label="在线率统计" name="third">
-          <LineChart v-if="activeName === 'third'" />
+          <LineChart
+            v-if="activeName === 'third'"
+            :productId="dialogData.productId"
+          />
         </ElTabPane>
       </ElTabs>
     </div>
@@ -30,7 +33,7 @@ import Dialog from "@screen/components/Dialog/index.vue";
 import Button from "@screen/components/Buttons/Button.vue";
 import Descriptions from "@screen/components/Descriptions.vue";
 import Video from "@screen/components/Video";
-import LineChart from "./components/LineChart/index.vue";
+import LineChart from "../../LineChart/index.vue";
 import LineChartForTraffic from "./components/LineChartForTraffic/index.vue";
 import Switcher from "@screen/pages/service/PublishingChannelManagement/components/Switcher.vue";
 

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/LineChart/index.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class='chart LineChart' ref="LineChartRef" />
-</template>
-
-<script>
-import * as echarts from "echarts";
-import { lineChartOption } from "./chart"
-
-export default {
-  name: 'LineChart',
-  mounted() {
-    const chartIns = echarts.init(this.$refs.LineChartRef);
-    chartIns.setOption(lineChartOption);
-  },
-}
-</script>
-
-<style lang='scss' scoped>
-.LineChart {
-  flex: 1;
-  height: 100%;
-}
-</style>

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue

@@ -11,7 +11,11 @@
           <DeviceParams disabled :dialogData="dialogData" />
         </ElTabPane>
         <ElTabPane label="在线率统计" name="third">
-          <LineChart v-if="activeName === 'third'" style="height: 222px" />
+          <LineChart
+            v-if="activeName === 'third'"
+            :productId="dialogData.productId"
+            style="height: 180px"
+          />
         </ElTabPane>
       </ElTabs>
     </div>
@@ -37,7 +41,7 @@ import Dialog from "@screen/components/Dialog/index.vue";
 import Button from "@screen/components/Buttons/Button.vue";
 import Descriptions from "@screen/components/Descriptions.vue";
 import Video from "@screen/components/Video";
-import LineChart from "./components/LineChart/index.vue";
+import LineChart from "../../LineChart/index.vue";
 import DeviceParams from "./components/DeviceParams.vue";
 import DeviceControlDialog from "./components/DeviceControlDialog.vue";
 

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue

@@ -91,9 +91,13 @@
                   <el-tab-pane label="设备参数" name="second"
                     >设备参数</el-tab-pane
                   >
-                  <el-tab-pane label="在线率统计" name="third"
+                  <el-tab-pane label="在线率统计" name="third">
-                    >在线率统计</el-tab-pane
+                    <LineChart
-                  >
+                      v-if="activeTab === 'third'"
+                      :productId="selectedDevice.productId"
+                      style="height: 160px"
+                    />
+                  </el-tab-pane>
                 </el-tabs>
               </div>
               <div class="dialogContent_bottom_btn">
@@ -235,6 +239,8 @@ import testDeviceInfo from "@screen/testData/infoBoard.js";
 import CameraShower from "@screen/components/CameraShower";
 
 import InfoBoard from "@screen/mixins/InfoBoard";
+import LineChart from "../LineChart/index.vue";
+
 export default {
   name: "InfoBoard",
   mixins: [InfoBoard],
@@ -303,6 +309,7 @@ export default {
     },
   },
   components: {
+    LineChart,
     BoardPreview,
     BoardTplPreview,
     BoardInfoEditor,
@@ -751,7 +758,8 @@ export default {
 
 .dialogContent_bottom {
   width: 105%;
-  height: 16.52vh;
+  margin-bottom: 2vh;
+  // height: 16.52vh;
 }
 
 .deviceInfo {

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/LineChart/chart.js → ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/LineChart/chart.js

@@ -35,26 +35,9 @@ export const lineChartOption = {
   },
   tooltip: {
     trigger: "axis",
-    backgroundColor: "rgba(0,0,0,0.36)",
+    valueFormatter: (value) => {
-    borderWidth: 0,
+      return value + "%";
-    textStyle: {
-      color: "#fff",
     },
-    formatter: "{b}：{c}",
-    // formatter: function([axisData]) {
-    //   console.log(axisData)
-    //     let str = axisData.name + ' ' + axisData.data + '辆</br>';
-    //     // params.forEach(item => {
-    //     //     if (item.seriesName === '供温' || item.seriesName === '回温') {
-    //     //         str += item.marker + item.seriesName + ' : ' + item.data.value + ' ℃' + '</br>';
-    //     //     } else if (item.seriesName === '压力值(Mpa)') {
-    //     //         // 柱状图渐变时设置marker
-    //     //         item.marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#6C50F3;"></span>';
-    //     //         str += item.marker + item.seriesName + ' : ' + item.data.value + ' m';
-    //     //     }
-    //     // });
-    //     return str;
-    // }
   },
   yAxis: {
     max: 100,

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/LineChart/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="chart LineChart">
+    <div
+      v-if="datalength.length > 0"
+      class="chart LineChart"
+      ref="LineChartRef"
+    />
+    <Empty v-else text="暂无数据..."></Empty>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import { lineChartOption } from "./chart";
+import { deviceStatusList } from "@/api/equipment/type/api.js";
+import { months } from "moment/moment";
+
+export default {
+  name: "LineChart",
+  props: {
+    productId: {
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      datalength: {},
+    };
+  },
+  methods: {
+    // 根据id获取在线率统计数据
+    getDeviceStatusList() {
+      return deviceStatusList(this.productId).then((res) => {
+        this.datalength = Object.keys(res.data);
+        lineChartOption.xAxis.data = Object.keys(res.data);
+        lineChartOption.series[0].data = Object.values(res.data);
+      });
+    },
+  },
+  async mounted() {
+    await this.getDeviceStatusList();
+    const chartIns = echarts.init(this.$refs.LineChartRef);
+    chartIns.setOption(lineChartOption);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.LineChart {
+  flex: 1;
+  height: 100%;
+}
+</style>

ruoyi-ui/src/views/workbench/config/components/board.vue

@@ -168,9 +168,12 @@
                   </el-col>
                 </el-row>
               </el-tab-pane>
-              <el-tab-pane label="在线率统计" name="third"
+              <el-tab-pane label="在线率统计" name="third">
-                >在线率统计</el-tab-pane
+                <LineChart
-              >
+                  v-if="activeName === 'third'"
+                  :productId="dialogData.productId"
+                  style="height: 160px"
+              /></el-tab-pane>
             </el-tabs>
           </el-form>
           <div
@@ -289,6 +292,8 @@ import {
 import boardData from "@/views/information/board/boardData.json";
 import editInfo from "@/views/information/board/editInfo";
 import addinfo from "@/views/information/board//addinfo";
+import LineChart from "../../LineChart/index.vue";
+
 import Sortable from "sortablejs";
 import {
   getBoardEditInfo,
@@ -321,6 +326,7 @@ export const deepClone = (data) => {
 export default {
   // props: ["eqInfo", "brandList", "directionList", "eqTypeDialogList"],
   components: {
+    LineChart,
     editInfo,
     addinfo,
   },

ruoyi-ui/src/views/workbench/config/components/video.vue

@@ -156,7 +156,12 @@
               </el-col>
             </el-row>
           </el-tab-pane>
-          <el-tab-pane label="在线率统计" name="third">在线率统计</el-tab-pane>
+          <el-tab-pane label="在线率统计" name="third">
+            <LineChart
+              v-if="activeName === 'third'"
+              :productId="dialogData.productId"
+              style="height: 160px"
+          /></el-tab-pane>
         </el-tabs>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -406,6 +411,7 @@ import { getInfo } from "@/api/equipment/tunnel/api.js"; //查询设备当前状
 import flvjs from "flv.js";
 import videoPlayer from "@/views/event/vedioRecord/myVideo.vue";
 import { PTZContro, getCamera } from "@/api/workbench/config.js"; //提交控制信息
+import LineChart from "../../LineChart/index.vue";
 
 // import { getLocalIP } from "@/api/event/vedioRecord";
 
@@ -413,6 +419,7 @@ export default {
   // props: ["eqInfo", "brandList", "directionList", "eqTypeDialogList"],
   components: {
     videoPlayer,
+    LineChart,
   },
   data() {
     return {

ruoyi-ui/vue.config.js

@@ -54,9 +54,9 @@ module.exports = {
         // target: `http://10.168.78.135:8087`,  //王钦
         // target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
         // target: `http://10.168.68.42:8087`, //王思祥
-        // target: `http://10.168.65.194:8087`, //赵祥龙
+        target: `http://10.168.65.194:8087`, //赵祥龙
         // target: `http://10.168.65.156:8097`, //孟
-        target: `http://10.168.76.181:8087`, //王家宝
+        // target: `http://10.168.76.181:8087`, //王家宝
         // target: `http://10.168.65.103:8097`,
         changeOrigin: true,
         pathRewrite: {