提交设备统计分析界面

ruoyi-ui/src/api/MonthlyEquipment/index.js

@@ -0,0 +1,51 @@
+import request from '@/utils/request'
+import { download } from '../../utils/request'
+// 全景数据 - 运行环境接口
+
+
+// 设备状态柱状图按时间和类型
+export function getSystemStatusList(query) {
+    return request({
+      url: '/system/status/list',
+      method: 'get',
+      params: {
+        ...query,
+      }
+    })
+  }
+
+  //设备状态列表按时间和类型
+  export function getSystemStatusTabList(query) {
+    //system/status/tablist
+    return request({
+        url: '/system/status/tablist',
+        method: 'get',
+        params: {
+          ...query,
+        }
+      })
+  }
+
+
+   //设备状态列表按类型
+   export function getSystemStatusType() {
+    //system/status/tablist
+    return request({
+        url: '/system/status/type',
+        method: 'get',
+        params: {
+        //  ...query,
+        }
+      })
+  }
+  //system/status/type
+
+    //设备状态列表按类型
+   export function getSystemStatusExport(query) {
+    //system/status/export
+   return download('/system/status/export',query,"file.xlsx");
+    // return request.post('/system/status/export',{
+    //     ...query
+    //   },{ headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    //   responseType: 'blob'})
+  }

ruoyi-ui/src/utils/request.js

@@ -19,7 +19,7 @@ const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: process.env.VUE_APP_BASE_API,
   // 超时
-  timeout: 10000
+  timeout: 30000
 })
 
 // request拦截器

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/assets/charts.js

@@ -82,7 +82,7 @@ let options = {
         type: 'radar',
         name: '安全作业',
         data: [
-            [100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100, 100, 100, 100, 100],
+            [100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100],
         ],
      
         symbol: 'none',
@@ -102,7 +102,7 @@ let options = {
         type: 'radar',
         name: '安全作业',
         data: [
-            [80, 80, 80, 80, 80, 80, 80, 80,80, 80, 80, 80, 80, 80, 80, 80]
+            [80, 80, 80, 80, 80, 80, 80, 80,80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80]
         ],
 
         symbol: 'none',
@@ -122,7 +122,7 @@ let options = {
         type: 'radar',
         name: '安全作业',
         data: [
-            [60, 60, 60, 60, 60, 60, 60, 60,60, 60, 60, 60, 60, 60, 60, 60],
+            [60, 60, 60, 60, 60, 60, 60, 60,60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
         ],
 
           symbol: 'none',
@@ -142,7 +142,7 @@ let options = {
         type: 'radar',
         name: '安全作业',
         data: [
-            [40, 40, 40, 40, 40, 40, 40, 40,40, 40, 40, 40, 40, 40, 40, 40],
+            [40, 40, 40, 40, 40, 40, 40, 40,40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40],
         ],
        symbol: 'none',
         lineStyle: {
@@ -161,7 +161,7 @@ let options = {
         type: 'radar',
         name: '安全作业',
         data: [
-            [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
+            [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
         ],
        symbol: 'none',
         lineStyle: {

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/index.vue

@@ -16,12 +16,34 @@
     components: {
         WgtTitle
     },
+    props:{
+      dataList:{
+        type:Array,
+        default:[],
+      }
+    },
     data() {
       return {
        
       }
     },
+    watch:{
+      dataList:(newD,oldD)=>{
+          let data = [];
+          let texts = [];
+          newD.forEach(element => {
+              data.push(parseInt(element.sucessRate,10));
+              texts.push({name:element.text, max: 100 });
+          });
+
+         chartsStatistics.radar.indicator = texts;
+         chartsStatistics.series[0].data = [data];
 
+         //console.log("=====aaa=========",this)
+         var myChart = echarts.init(document.getElementById('deviceUptime'));
+          myChart.setOption(chartsStatistics); 
+      }
+    },
     created() {
         
     },
@@ -33,6 +55,7 @@
         this.$nextTick(() => {
           var myChart = echarts.init(document.getElementById('deviceUptime'));
           myChart.setOption(chartsStatistics);
+          this.myChart = myChart;
         });
       });
     },

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue

@@ -3,9 +3,9 @@
       <WgtTitle :title="'月设备变化曲线'"></WgtTitle>
       <div class="board">
         
-          <div class="round-div"  v-for="(item) in dataList"  :style="{background:'linear-gradient(80deg, '+item.color+'66 0%, '+item.color+'00 100%)',width:'calc('+ item.num / 100 +' * 400px)',top:item.top+'px',left:item.left+'px'}"   >
+          <div class="round-div"  v-for="(item) in dataList"  :style="{background:'linear-gradient(80deg, '+item.color+'66 0%, '+item.color+'00 100%)',width:'calc('+ (100 - parseInt(item.num,10) ) / 100 +' * 250px)',top:item.top+'px',left:item.left+'px'}"   >
              <div class="round-num" :style="{color:item.color}" >
-                {{ item.num }}%
+                {{ item.num }}
              </div>
              <div class="round-text" >
                 {{ item.text }}
@@ -18,6 +18,7 @@
   <script>
   import WgtTitle from "../../../../perception/widgets/title";
   import * as echarts from "echarts";
+  import { getSystemStatusType } from "@/api/MonthlyEquipment";
   
   export default {
     name: 'MonthlyEquipment',
@@ -26,7 +27,8 @@
     },
     data() {
       return {
-        dataList:[
+        dataList:[],
+        copyList:[
             {
                 num:40,
                 text:"高清网络球形摄像机",
@@ -46,14 +48,14 @@
                 text:"门架式可变信息标志",
                 color:"#17A2FF",
                 top:130,
-                left:300,
+                left:500,
             },
             {
                 num:70,
                 text:"站前悬臂式可变信息标志",
                 color:"#17E3FF",
-                top:230,
+                top:200,
-                left:500,
+                left:580,
             },
             {
                 num:60,
@@ -80,8 +82,8 @@
                 num:40,
                 text:"雨棚可变信息标志",
                 color:"#17A2FF",
-                top:230,
+                top:260,
-                left:280,
+                left:320,
             },
             {
                 num:80,
@@ -133,6 +135,12 @@
                 color:"#FFCE85",
                 top:430,
                 left:320,
+            },{
+                num:60,
+                text:"智能设备箱" ,
+                color:"#FFCE85",
+                top:430,
+                left:620,
             }
         ]
       }
@@ -145,9 +153,31 @@
         
     },
     mounted() {
+    
       setTimeout(() => {
         this.$nextTick(() => {
+          let colors = ['#17E3FF',"#FFCE85",'#17A2FF','#1C7C3A'];
+          getSystemStatusType().then((res)=>{
            
+             this.dataList = [];
+             let allList = [];
+             let data = res.data;
+             let i = 0;
+             for (var it in data){
+                let item = {
+                  text:it,
+                  num:data[it].sucessRate,
+                  color: colors[(i + 1)%4],
+                  top: this.copyList[i]?this.copyList[i].top:0, //(i + 1)%4 * 80,
+                  left: this.copyList[i]?this.copyList[i].left:0,
+                }
+                console.log(it,i);
+                i+= 1;
+                allList.push(item);
+             }
+             console.log(allList);
+             this.dataList = allList;
+          })
         });
       });
     },
@@ -232,7 +262,7 @@
             align-items: center;    
             width: 100%;
             height: 21px;
-            font-size: 14px;
+            font-size: 12px;
             font-family: Hiragino Sans GB, Hiragino Sans GB;
             font-weight: normal;
             color: #FFFFFF;

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js

@@ -0,0 +1,119 @@
+import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
+
+export const tabMap = {
+  AlarmEvents: {
+    state: 5,
+    textColor: "#007FF4",
+    text: "去确认",
+  },
+  EventsConfirmed: {
+    state: 5,
+    textColor: "#007FF4",
+    text: "去确认",
+  },
+  DisposingEvents: {
+    state: 4,
+    textColor: "#007FF4",
+    text: "去处置",
+  },
+  IncidentDisposed: {
+    state: 3,
+    textColor: "#007FF4",
+    text: "处置记录",
+  },
+};
+
+export const searchFormList = [
+  {
+    label: "时间范围:",
+    key: "time",
+    required: true,
+    type: "datePicker",
+    options: {
+      format:"yyyy-MM-dd",
+      type: "daterange",
+    },
+  },
+  {
+    label: "型号类型:",
+    key: "type",
+    required: true,
+    type: "select",
+    options: {
+      options: [
+        {
+          value: "",
+          label: "全部",
+        },
+          {
+          value: "1",
+          label: "高清网络枪型固定摄像机",
+        },
+          {
+          value: "2",
+          label: "高清网络球形摄像机",
+        },
+          {
+          value: "3",
+          label: "桥下高清网络球形摄像机",
+        },
+          {
+          value: "4",
+          label: "360°全景摄像机",
+        },
+          {
+          value: "5",
+          label: "180°全景摄像机",
+        },
+          {
+          value: "6",
+          label: "门架式可变信息标志",
+        },
+          {
+          value: "7",
+          label: "雨棚可变信息标志",
+        },
+          {
+          value: "8",
+          label: "站前悬臂式可变信息标志",
+        },
+          {
+          value: "9",
+          label: "气象检测器",
+        },
+          {
+          value: "10",
+          label: "路段语音广播系统",
+        },
+          {
+          value: "11",
+          label: "护栏碰撞预警系统",
+        },
+          {
+          value: "12",
+          label: "毫米波雷达",
+        },
+          {
+          value: "13",
+          label: "合流区预警系统",
+        },
+          {
+          value: "14",
+          label: "激光疲劳唤醒",
+        },
+          {
+          value: "15",
+          label: "一类交通量调查站",
+        },
+          {
+          value: "16",
+          label: "智能行车诱导系统",
+        },
+          {
+          value: "17",
+          label: "智能设备箱",
+        },
+      ],
+    },
+  },
+];

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue

@@ -12,27 +12,27 @@
                    </div>
                    <div class="item-body" >
                       <div class="left-body" >
-                        <img   />
+                        <img src="./assets/shexiangtou.png"  />
-                        <span>枪机</span>
+                        <span>{{ item.text }}</span>
                       </div>
                       <div class="line" ></div>
                       <div class="right-list" >
                          <div class="list-text" >
                             <span>在线：</span>
                             <div class="show-text1" >
-                              {{ item.online }}%
+                              {{ item.sucessRate }}
                             </div>
                          </div>
                          <div class="list-text" >
                             <span>离线：</span>
                               <div class="show-text2" >
-                                {{ item.outline }}%
+                                {{ item.failRate }}
                               </div>
                          </div>
                          <div class="list-text"  >
                               <span>丢包：</span>
                               <div class="show-text3" >
-                                {{ item.lost }}%
+                                {{ item.lostRate }}
                               </div>
                          </div>
                       </div>
@@ -40,7 +40,7 @@
                  </div>
               </div>
               <div class="bottomTabs" >
-                <DeviceUptime class="tabs-lo" />
+                <DeviceUptime  :dataList="equipments" class="tabs-lo" />
                 <MonthlyEquipment class="tabs-mo" />
               </div>
             </el-tab-pane>
@@ -48,7 +48,10 @@
               <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"  >导出Excel</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" >
@@ -68,56 +71,89 @@
                     width="80">
                     </el-table-column>
                     <el-table-column
-                    prop="address"
+                      prop="deviceName"
-                    label="设备类型"
+                      label="设备名称"
+                    ></el-table-column>
+                    <el-table-column
+                    prop="deviceNo"
+                    label="设备桩号"
                     width="">
                     </el-table-column>
                     <el-table-column
-                    prop="root"
+                    prop="direction"
                     label="方向"
                     class-name="showClass"
                     width="">
-                    <template slot-scope="scope">
-                        <span class="showClass">{{scope.row.name}}</span>
-                    </template>
                     </el-table-column>
                     <el-table-column
-                    prop="ip"
+                    prop="deviceIp"
                     label="设备IP"
                     width=""
                     >
                     </el-table-column>
                     <el-table-column
-                    prop="cj"
+                    prop="production"
                     label="厂家"
                     width=""
                     >
                     </el-table-column>
                     <el-table-column
-                    prop="xh"
+                    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="wd"
+                    prop="network"
                     label="网段"
                     width=""
                     >
                     </el-table-column>
                     <el-table-column
-                    prop="jcsj"
+                    prop="time"
                     label="监测时间"
                     width=""
                     >
                     </el-table-column>
                     <el-table-column
-                    prop="cz"
+                    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
+                  width="'100%'"
+                  :page-size="pageSize"
+                  :current-page.sync="pageIndex"
+                  layout="prev, pager, next"
+                  :total="pageTotal">
+                </Pagination>
+              </div>
               </div>
             </el-tab-pane>
         </el-tabs>
@@ -131,15 +167,29 @@ 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";
 
   export default {
     name: 'publicService',
     components: {
       DeviceUptime,
-      MonthlyEquipment
+      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,
@@ -374,11 +424,126 @@ import * as echarts from "echarts";
         }
     },
     methods:{
+      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();
         });
+      },
+      //导出
+      SystemStatusExport(){
+        download(
+        "/fault/list/exportFaultReport",
+        { faultId: row.id },
+        "file.xlsx");
+        // 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
+
+        // })
+      },
+      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);
+              }); 
+          }
+
+        })
+      },
+      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;
+                allList.push(item);
+             }
+             console.log(allList);
+            this.equipments = allList;
+          })
+
+      },
+      //查询列表
+      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;
+          }
+        })
       }
     },
     mounted() {
@@ -388,6 +553,11 @@ import * as echarts from "echarts";
           myChart.setOption(chartsStatistics);
           this.myChart = myChart;
         });
+        this.queryTypes();
+        this.queryTabList(1);
+        this.queryChartList();
+      
+
       });
     },
   }
@@ -428,7 +598,7 @@ import * as echarts from "echarts";
       display: inline-flex;
       position: relative;
       flex-direction: column;
-      width: calc(100% /8 - 15px);
+      width: calc(100% /9 - 15px);
       height:175px;
       margin-right:15px;
       margin-bottom:15px;
@@ -661,6 +831,20 @@ import * as echarts from "echarts";
     
    }
 
+   .topdiv {
+    display: inline-flex;
+    position: relative;
+    width:100%;
+    height:40px;
+    justify-content: space-between;
+    align-items: center;
+
+    .right-div {
+      display: inline;
+      width:450px;
+    }
+   }
+
   .TrafficFlow {
     width: 100%;
     height: 100%;
@@ -736,7 +920,8 @@ import * as echarts from "echarts";
       width: 98%;
       margin: auto;
       display: flex;
-      justify-content: space-between;
+      justify-content: center;
+      align-items: center;
       flex: 1;
       pointer-events: none;
       margin-top: 8px;

ruoyi-ui/vue.config.js

@@ -42,7 +42,8 @@ module.exports = {
         // target: `http://10.0.81.201:8080`,
         // target: `http://10.168.73.36:8080`, // 周乐
         //target: `http://10.168.77.209:8080`, // 刘朋
-        target:'http://10.168.66.196:8080',
+         //target:'http://10.168.66.196:8080',
+         target:'http://10.168.77.88:8087/',
         // target: `http://10.168.66.196:8080`, //刘文阁
         // target: `http://10.168.56.206:8087`, //孟
         changeOrigin: true,