From 315e3900fef3b5d99f4d443a46ede68bfca05c65 Mon Sep 17 00:00:00 2001
From: yyl <279235553@qq.com>
Date: Wed, 17 Jan 2024 17:15:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E6=9C=80=E6=96=B0=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../statisticalAnalysis/assets/charts.js      |   2 +-
 .../components/deviceUptime/assets/charts.js  |   3 +-
 .../components/deviceUptime/index.vue         |  70 +++++
 .../monthlyEquipment/assets/charts.js         | 182 ++++++++++++
 .../components/monthlyEquipment/index.vue     | 274 ++++++++++++++++++
 .../statisticalAnalysis/index.vue             |  29 +-
 6 files changed, 556 insertions(+), 4 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/assets/charts.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js
index 3686c892..a7d54ec2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js
@@ -2,7 +2,7 @@ import * as echarts from "echarts";
 
 var data1 = [50, 32, 41, 61, 70, 39, 40, 55, 63, 55, 36, 45, 62, 74, 46, 73, 92, 60, 45, 33, 45,66,55, 32, 46, 36, 67, 49, 60, 55, 33, 35, 66]
 var data2 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15,12, 4, 6, 7, 9, 10, 15, 3, 5, 6,5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6]
-var options = {
+let options = {
   tooltip: {
     trigger: 'axis',
     backgroundColor: 'rgba(17,95,182,0.5)',
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/assets/charts.js
index c955c485..c10c506b 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/assets/charts.js
@@ -1,4 +1,3 @@
-import { options } from "runjs";
 
 let data = [100, 0, 0, 0, 40, 40,40, 64,40, 64,40, 64]
 let indicator = [
@@ -22,7 +21,7 @@ let indicator = [
 ]
 
 let options = {
-    backgroundColor: '#000928',
+  
     tooltip: {},
     radar: {
         center: ['50%', '50%'],
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/index.vue
index e69de29b..2371dd10 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/index.vue
@@ -0,0 +1,70 @@
+<template>
+    <div class='congestion'>
+      <WgtTitle :title="'设备在线率'"></WgtTitle>
+      <div class="board">
+        <div class="charts" id="deviceUptime"></div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  import WgtTitle from "../../../../perception/widgets/title";
+  import * as echarts from "echarts";
+  import chartsStatistics from "./assets/charts";
+  export default {
+    name: 'DeviceUptime',
+    components: {
+        WgtTitle
+    },
+    data() {
+      return {
+       
+      }
+    },
+  
+    created() {
+        
+    },
+    methods: {
+        
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          var myChart = echarts.init(document.getElementById('deviceUptime'));
+          myChart.setOption(chartsStatistics);
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .board{
+      height:510px;
+      width: 100%;
+      padding: 0px 20px;
+      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+      border-radius: 5px 5px 5px 5px;
+        opacity: 0.8;
+        border: 1px solid;
+        border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: column;
+     
+    }
+  }
+      .charts {
+        height:100%;
+        width: 100%;
+      }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/assets/charts.js
new file mode 100644
index 00000000..c10c506b
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/assets/charts.js
@@ -0,0 +1,182 @@
+
+let data = [100, 0, 0, 0, 40, 40,40, 64,40, 64,40, 64]
+let indicator = [
+
+    { name: '智能设备箱', max: 100 },
+    { name: '智能行车诱导系统', max: 100 },
+    { name: '一类交通量调查站', max: 100 },
+    { name: '激光疲劳唤醒系统', max: 100 },
+    { name: '合流区预警系统', max: 100 },
+    { name: '毫米波雷达', max: 100 },
+    { name: '护碰撞预警系统', max: 100 },
+    { name: '路段语音广播系统', max: 100 },
+    { name: '气象检测器', max: 100 },
+    { name: '站前悬臂式可变信息标志', max: 100 },
+    { name: '雨棚可变信息标志', max: 100 },
+    { name: '门架式可变信息标志', max: 100 },
+    { name: '180°全景摄像机', max: 100 },
+    { name: '360°全景摄像机', max: 100 },
+    { name: '高清网络枪型固定摄像机', max: 100 },
+    { name: '高清网络球形摄像机', max: 100 },
+]
+
+let options = {
+  
+    tooltip: {},
+    radar: {
+        center: ['50%', '50%'],
+        radius: '75%',
+        nameGap: 0,
+        indicator: indicator,
+        splitLine: {
+            show: false
+
+        },
+        splitArea: {
+            show: false
+        },
+        axisLine: {
+            show: true
+        },
+        name: {
+            textStyle: {
+                color: '#F2F3F5',
+                fontSize: '20',
+                borderRadius: 3,
+                padding: [3, 5]
+            }
+        },
+    },
+    series: [{
+        type: 'radar',
+        data: [data],
+        name: '安全作业',
+        label: {
+            show: true,
+            formatter: function (params) {
+                console.log(params)
+                return params.value;
+            },
+            color: '#fff',
+            // position:[-20,-10,-10,-10],
+            align: 'right',
+            distance: 10,
+            align: 'right'
+        },
+        symbolSize: 10,
+        lineStyle: { //边缘颜色
+            width: 2,
+            color: '#2287FE'
+        },
+        itemStyle: {
+            borderWidth: 0,
+            color: '#ffffff00',
+            borderColor: '#2287F00',
+        },
+        areaStyle: {
+            color: '#2287FE60',
+            opacity: 1
+        }
+    },
+    {
+        type: 'radar',
+        name: '安全作业',
+        data: [
+            [100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100, 100, 100, 100, 100],
+        ],
+     
+        symbol: 'none',
+        lineStyle: {
+            width: 1
+        },
+        itemStyle: {
+            color: '#2AD1BC'
+        },
+
+        areaStyle: {
+             color: '#2AD1BC29',
+             opacity: 0.1
+        }
+    },
+    {
+        type: 'radar',
+        name: '安全作业',
+        data: [
+            [80, 80, 80, 80, 80, 80, 80, 80,80, 80, 80, 80, 80, 80, 80, 80]
+        ],
+
+        symbol: 'none',
+        lineStyle: {
+            width: 1
+        },
+        itemStyle: {
+            color: '#2AD1BC'
+        },
+
+        areaStyle: {
+             color: '#2AD1BC29',
+             opacity: 0.2
+        }
+    },
+    {
+        type: 'radar',
+        name: '安全作业',
+        data: [
+            [60, 60, 60, 60, 60, 60, 60, 60,60, 60, 60, 60, 60, 60, 60, 60],
+        ],
+
+          symbol: 'none',
+        lineStyle: {
+            width: 1
+        },
+        itemStyle: {
+            color: '#2AD1BC'
+        },
+
+        areaStyle: {
+             color: '#2AD1BC29',
+             opacity: 0.1
+        }
+    },
+    {
+        type: 'radar',
+        name: '安全作业',
+        data: [
+            [40, 40, 40, 40, 40, 40, 40, 40,40, 40, 40, 40, 40, 40, 40, 40],
+        ],
+       symbol: 'none',
+        lineStyle: {
+            width: 1
+        },
+        itemStyle: {
+            color: '#2AD1BC'
+        },
+
+        areaStyle: {
+             color: '#2AD1BC29',
+             opacity: 0.1
+        }
+    },
+    {
+        type: 'radar',
+        name: '安全作业',
+        data: [
+            [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
+        ],
+       symbol: 'none',
+        lineStyle: {
+            width: 1
+        },
+        itemStyle: {
+            color: '#2AD1BC'
+        },
+
+        areaStyle: {
+             color: '#2AD1BC29',
+             opacity: 0.1
+        }
+    },
+    ]
+};
+
+export default options;
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue
new file mode 100644
index 00000000..4c3ea3a1
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue
@@ -0,0 +1,274 @@
+<template>
+    <div class='congestion'>
+      <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-num" :style="{color:item.color}" >
+                {{ item.num }}%
+             </div>
+             <div class="round-text" >
+                {{ item.text }}
+             </div>
+          </div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  import WgtTitle from "../../../../perception/widgets/title";
+  import * as echarts from "echarts";
+  
+  export default {
+    name: 'MonthlyEquipment',
+    components: {
+        WgtTitle
+    },
+    data() {
+      return {
+        dataList:[
+            {
+                num:40,
+                text:"高清网络球形摄像机",
+                color:"#17A2FF",
+                top:200,
+                left:100,
+            },
+            {
+                num:30,
+                text:"360°全景摄像机",
+                color:"#1C7C3A",
+                top:100,
+                left:100,
+            },
+            {
+                num:80,
+                text:"门架式可变信息标志",
+                color:"#17A2FF",
+                top:130,
+                left:300,
+            },
+            {
+                num:70,
+                text:"站前悬臂式可变信息标志",
+                color:"#17E3FF",
+                top:230,
+                left:500,
+            },
+            {
+                num:60,
+                text:"气象检测器",
+                color:"#17A2FF",
+                top:330,
+                left:250,
+            },
+            {
+                num:70,
+                text:"合流区预警系统",
+                color:"#17A2FF",
+                top:330,
+                left:550,
+            },
+            {
+                num:40,
+                text:"高清网络枪型固定摄像机",
+                color:"#17E3FF",
+                top:30,
+                left:250,
+            },
+            {
+                num:40,
+                text:"雨棚可变信息标志",
+                color:"#17A2FF",
+                top:230,
+                left:280,
+            },
+            {
+                num:80,
+                text:"毫米波雷达",
+                color:"#FFCE85",
+                top:100,
+                left:680,
+            },
+            {
+                num:80,
+                text:"路段语音广播系统",
+                color:"#17A2FF",
+                top:250,
+                left:820,
+            },
+            {
+                num:60,
+                text:"护碰撞预警系统",
+                color:"#17A2FF",
+                top:170,
+                left:920,
+            },{
+                num:70,
+                text:"激光疲劳唤醒系统",
+                color:"#17E3FF" ,
+                top:70,
+                left:1020,
+            },{
+                num:40,
+                text:"180°全景摄像机" ,
+                color:"#1C7C3A",
+                top:20,
+                left:820,
+            },{
+                num:50,
+                text:"一类交通量调音站" ,
+                color:'#17A2FF',
+                top:20,
+                left:520,
+            },{
+                num:50,
+                text:"智能行车诱导系统" ,
+                color:'#17E3FF',
+                top:350,
+                left:920,
+            },{
+                num:60,
+                text:"智能设备箱" ,
+                color:"#FFCE85",
+                top:430,
+                left:320,
+            }
+        ]
+      }
+    },
+  
+    created() {
+        
+    },
+    methods: {
+        
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .board{
+        position: relative;
+      height:510px;
+      width: 100%;
+      padding: 0px 20px;
+      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+      border-radius: 5px 5px 5px 5px;
+        opacity: 0.8;
+        border: 1px solid;
+        border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: column;
+
+      .round-div:nth-child(5n + 1) {
+        animation:mymove 6.5s infinite;
+	   -webkit-animation:mymove 1.5s infinite;
+      }
+
+      .round-div:nth-child(4n + 1){
+        animation:mymove_dow 5.5s infinite;
+        animation-delay: 3s;
+      }
+
+      .round-div:nth-child(3n + 1){
+        animation:mymove 4.5s infinite;
+        animation-delay: 2s;
+      }
+
+      .round-div:nth-child(2n + 1){
+        animation:mymove 3.5s infinite;
+        animation-delay: 1s;
+      }
+
+      .round-div:nth-child(n + 1){
+        animation:mymove 2.5s infinite;
+        animation-delay: 0s;
+      }
+
+      .round-div {
+        position: absolute;
+        flex-direction: column;
+        display: inline-flex;
+        width: 182px;
+        height: 69px;
+        background: linear-gradient(80deg, rgba(23,162,255,0.6) 0%, rgba(23,162,255,0) 100%);
+        border-radius: 0px 0px 0px 0px;
+        opacity: 1;
+        border-radius: 50%;
+        border: 2px solid;
+        border: rgba(23, 162, 255, 0.2);
+       
+
+        > .round-num {
+            width:100%;
+            height:30px;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 18px !important;
+            font-family: PangMenZhengDao, PangMenZhengDao;
+            font-weight: 400;
+            color: #2CA7F7;
+        }
+
+        .round-text {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;    
+            width: 100%;
+            height: 21px;
+            font-size: 14px;
+            font-family: Hiragino Sans GB, Hiragino Sans GB;
+            font-weight: normal;
+            color: #FFFFFF;
+        }
+      }
+     
+    }
+  }
+      .charts {
+        height:100%;
+        width: 100%;
+      }
+
+
+@keyframes mymove{
+	0% {transform: translate(0px, 0px);}
+    50% {transform: translate(0px, -10px);}
+	100% {transform: translate(0px, 0px);}
+	
+}
+
+@keyframes mymove_dow{
+	0% {transform: translate(0px, 0px);}
+    50% {transform: translate(0px, 20px);}
+	100% {transform: translate(0px, 0px);}
+	
+}
+
+/*Safari 和 Chrome:*/
+@-webkit-keyframes mymove
+{
+	0% {transform: translate(0px, 0px);}
+    50% {transform: translate(0px, -10px);}
+	100% {transform: translate(0px, 0px);}
+}
+
+  
+  </style>
+  
\ No newline at end of file
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 97a22e8b..05e74d28 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
@@ -39,6 +39,10 @@
                    </div>
                  </div>
               </div>
+              <div class="bottomTabs" >
+                <DeviceUptime class="tabs-lo" />
+                <MonthlyEquipment class="tabs-mo" />
+              </div>
             </el-tab-pane>
             <el-tab-pane label="设备查询" name="second">
               <div class="topdiv" >
@@ -125,10 +129,14 @@
 
 import * as echarts from "echarts";
   import chartsStatistics from "./assets/charts";
+  import DeviceUptime from './components/deviceUptime';
+  import MonthlyEquipment from './components/monthlyEquipment';
+
   export default {
     name: 'publicService',
     components: {
- 
+      DeviceUptime,
+      MonthlyEquipment
     },
     data(){
         return {
@@ -387,6 +395,25 @@ import * as echarts from "echarts";
   
   <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%;