提交最新的样式修改与交通事态分析代码

ruoyi-ui/src/App.vue

@@ -48,3 +48,19 @@ export default {
   },
 };
 </script>
+
+<style>
+
+
+@font-face {
+  font-family: "AdobeHeitiStd-Regular";
+  src: url("/static/fonts/pangmenzhengdao.e6033c0b");
+}
+
+
+@font-face {
+  font-family: "YouSheBiaoTiHei";
+  src: url("/static/fonts/优设标题黑.ttf");
+}
+
+</style>

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js

@@ -1,17 +1,20 @@
 const echartsData = [
-    { value: 40, name: '处理中' },
+    { value: 25, name: '处理中' },
-    { value: 38, name: '已处理' },
+    { value: 32, name: '待处理' },
-    { value: 32, name: '待处理' }]
+    { value: 30, name: '已处理' },]
  
  const colorList = [
-    "#61D8FF",
+   "#FFee0B",
-    "#FFB905",
+   "#61D8FF",
-    "#6AE0BC",]
+   "#6AE0BC",
+    
+    ]
+let count = 0;
+
+    echartsData.forEach((it)=>{
+       count += it.value;
+    })
  
- const colorList1 = [
-    "#61D8FF",
-    "#FFB905",
-    "#6AE0BC",]
  
  var options = {
     color: colorList,
@@ -24,10 +27,27 @@ const echartsData = [
        itemWidth: 8,
        itemHeight: 8,
        textStyle: {
-          color: "#666",
+          color: "#fff",
-          fontSize: 12
+          fontSize: 12,
+          rich:{
+            ast: {
+               align: "left",
+               fontSize: 12,
+            },
+            bst: {
+              align: "left",
+              fontSize: 12,
+              marginLeft:20,
+              color:"#37E7FF"
+           }
+          }
        },
-       data: echartsData?.map(x => x.name),
+       formatter: (params) => {
+         let obj = echartsData.filter(it=>{ return it.name == params})
+         console.log(obj);
+         return `{ast|${obj[0].name}}        {bst|${Math.round(obj[0].value/count* 100) }%}`
+      },
+       data: echartsData?.map(x => x),
     },
     tooltip: {
        trigger: 'item',
@@ -43,18 +63,22 @@ const echartsData = [
           position: 'outside',
           fontSize: 16,
           formatter: (params) => {
-             return `{a|${params.name}}`
+             return `{a|${params.name}} {b|${params.value/count}%}`
           },
           rich: {
              a: {
                 align: "left",
                 fontSize: 12,
-             }
+             },
+             b: {
+               align: "left",
+               fontSize: 12,
+            }
           },
        },
         itemStyle: {
          normal: {
-           shadowColor: "rgba(0, 0, 0, 0.8)",
+           shadowColor: "rgba(0, 0, 0, 0.5)",
            shadowBlur: 50,
          },
        },
@@ -84,7 +108,7 @@ const echartsData = [
           position: 'outside',
           fontSize: 16,
           formatter: (params) => {
-             return `{a|${params.name}}`
+             return `{a|${params.name}} `
           },
           rich: {
              a: {

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-      <WgtTitle :title="'感知事件源分析'"></WgtTitle>
+      <WgtTitle :title="'日事件处置情况占比'"></WgtTitle>
       <div class="board">
         <div class="charts" id="dailyDisposal"></div>
        </div>
@@ -12,6 +12,23 @@
   import WgtTitle from '../../../widgets/title'
   import * as echarts from "echarts";
   import chartsStatistics from "./assets/charts";
+
+  const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => {   
+  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 
+	ctx.beginPath();    
+  ctx.fillStyle = gr;
+	ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);    
+	ctx.lineTo(width - radius + x, y);    
+	ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);    
+	ctx.lineTo(width + x, height + y - radius);    
+	ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);    
+	ctx.lineTo(radius + x, height +y);    
+	ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);    
+	ctx.closePath();    
+  //ctx.stroke();
+  ctx.fill()
+}
+
   export default {
     name: 'dailyDisposal',
     components: {
@@ -34,7 +51,32 @@
         this.$nextTick(() => {
           var myChart = echarts.init(document.getElementById('dailyDisposal'));
           myChart.setOption(chartsStatistics);
-        });
+
+
+          const domMap = document.getElementById("dailyDisposal");
+          let parentDiv = domMap.firstChild; 
+          // 创建canvas
+          let canvas = document.createElement('canvas');
+          canvas.width = parentDiv.offsetWidth;
+          canvas.height =parentDiv.offsetHeight;
+          parentDiv.appendChild(canvas);
+          const context = canvas.getContext('2d'); 
+          
+          // 填充渐变颜色
+          var gr = context.createLinearGradient(230, 0, 360, 0);
+          // 颜色断点
+          gr.addColorStop(1, 'rgba(92,197,255,0)');
+          gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        
+        
+          context.lineWidth = 1; // 设置线段宽度
+        
+          // 绘制圆角矩形
+          drawRoundRect(context, 260, 50, 120, 24, 12,gr)
+          drawRoundRect(context, 260, 78, 120, 24, 12,gr)
+          drawRoundRect(context, 260, 106, 120, 24, 12,gr)
+          
+          });
       });
     },
   }
@@ -49,7 +91,7 @@
       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;
+      opacity: 1;
       border: 1px solid;
       border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
       display: flex;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js

@@ -1,30 +1,30 @@
 import * as echarts from "echarts";
 let data = [{
-    average:30,
+    average:20,
     typeName:'行人',
     percent:0.2
  },{
-    average:25,
+    average:35,
     typeName:'非机动车',
     percent:0.25
  },{
-    average:15,
+    average:23,
     typeName:'抛洒物',
     percent:0.08
  },{
-    average:30,
+    average:20,
     typeName:'烟火',
     percent:0.14
  },{
-  average:30,
+  average:8,
   typeName:'拥堵',
   percent:0.14
 },{
-  average:30,
+  average:5,
   typeName:'逆行',
   percent:0.14
 }]
- let chartData = [],lengData=[], colorList = ['#50EED3', '#5DEF9E', '#29B3FF', '#5F8EFE', '#FB5C38','#FCBB14'];
+ let chartData = [],lengData=[], colorList = ['#50EED3', '#5DEF9E', '#29B3FF', '#FB5C38', '#FB5C38','#FCBB14'];
  for (let i = 0; i < data.length; i++) {
     chartData.push({
        value: data[i].average,
@@ -90,7 +90,7 @@ let data = [{
           color:'#fff'
        },
     },
-    color:['#5973FF', '#00FF00', '#FFC30D', '#61D8FF', '#1DA7FF','#2967EA'],
+    color:['#50EED3', '#5F8EFE','#29B3FF', '#5DEF9E', '#FB5C38', '#FCBB14','#50EED3'],
     legend: {
        top:'20%',
        right: -10,
@@ -141,6 +141,7 @@ let data = [{
      {
        name: '',
        roseType: 'radius',
+       startAngle:-220,
        avoidLabelOverlap: true,//防止标签重叠
        type: 'pie',
        radius: ['63%', '90%'], //大小

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-      <WgtTitle :title="'感知事件类型分析'" ></WgtTitle>
+      <WgtTitle :title="'感知事件查询'" ></WgtTitle>
       <div class="board">
         <div class="searchPanel">
           <el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择">
@@ -260,7 +260,7 @@
             display: inline-flex;
             height:100%;
             width:33%;
-            margin-right:20px;
+            margin-right:px;
             background: linear-gradient(180deg, rgba(6,66,88,0) 0%, rgba(19, 39, 47, 0.9725490196) 93%);
             padding: 10px;
         }

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue

@@ -48,7 +48,7 @@
   .situation {
     width: 100%;
     .board{
-      height: 460px;
+      height: 455px;
       width: 100%;
       padding: 0px 30px;
       background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js

@@ -1,24 +1,31 @@
 const echartsData = [
-   { value: 10, name: '行人' },
+   { value: 100, name: '行人' },
-   { value: 18, name: '非机动车' },
+   { value: 90, name: '非机动车' },
-   { value: 22, name: '拥堵' },
+   { value: 80, name: '拥堵' },
-    { value: 12, name: '逆行' },
+    { value: 60, name: '逆行' },
-     { value: 16, name: '抛洒物' },
+     { value: 50, name: '抛洒物' },
-     { value: 22, name: '烟火' }]
+     { value: 45, name: '烟火' }]
 
 const colorList = [
-   "#078DFF",
+   "#019AFF",
-   "#25ACE9",
+   "#3CC3F0",
-   "#2CBAA6",
+   "#51D5AD",
-   "#DFD18A",
+   "#FFDD69",
-   "#DC893A",
+   "#F6A73C",
-   "#5377F3",]
+   "#7390FD",]
 
 const colorList1 = [
    "#61D8FF",
    "#FFB905",
    "#6AE0BC",]
 
+   let count = 0;
+
+   echartsData.forEach((it)=>{
+      count += it.value;
+   })
+  
+
 var options = {
    color: colorList,
    legend: {
@@ -30,9 +37,27 @@ var options = {
       itemWidth: 8,
       itemHeight: 8,
       textStyle: {
-         color: "#666",
+         color: "#fff",
-         fontSize: 12
+         fontSize: 12,
+         rich:{
+           ast: {
+              align: "left",
+              fontSize: 12,
+              width:30,
+           },
+           bst: {
+             align: "left",
+             fontSize: 12,
+             marginLeft:20,
+             color:"#37E7FF"
+          }
+         }
       },
+      formatter: (params) => {
+        let obj = echartsData.filter(it=>{ return it.name == params})
+        console.log(obj);
+        return `{ast|${obj[0].name}}        {bst|${Math.round(obj[0].value/count* 100) }%}`
+     },
       data: echartsData?.map(x => x.name),
    },
    tooltip: {
@@ -41,9 +66,11 @@ var options = {
    series: [{
       name: '',
       type: 'pie',
-      radius:  '60%',
+      radius:  '80%',
       center: ['40%', '50%'],
+      clockwise:false,
       roseType: 'radius',
+      startAngle1:180,
       label: {
          show: false,
          position: 'outside',
@@ -80,9 +107,10 @@ var options = {
    },{
       name: '',
       type: 'pie',
-      radius: '70%',
+      radius: '90%',
        hoverAnimation: false,
         emphasis: { scale: false },
+        clockwise:false,
       center: ['40%', '50%'],
       roseType: 'radius',
       label: {

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue

@@ -12,6 +12,25 @@
   import WgtTitle from '../../../widgets/title'
   import * as echarts from "echarts";
   import chartsStatistics from "./assets/charts";
+
+  
+  const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => {   
+  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 
+	ctx.beginPath();    
+  ctx.fillStyle = gr;
+	ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);    
+	ctx.lineTo(width - radius + x, y);    
+	ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);    
+	ctx.lineTo(width + x, height + y - radius);    
+	ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);    
+	ctx.lineTo(radius + x, height +y);    
+	ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);    
+	ctx.closePath();    
+  //ctx.stroke();
+  ctx.fill()
+}
+
+
   export default {
     name: 'TypeAnalysis',
     components: {
@@ -34,6 +53,34 @@
         this.$nextTick(() => {
           var myChart = echarts.init(document.getElementById('typeAnalysis'));
           myChart.setOption(chartsStatistics);
+
+
+          
+          const domMap = document.getElementById("typeAnalysis");
+          let parentDiv = domMap.firstChild; 
+          // 创建canvas
+          let canvas = document.createElement('canvas');
+          canvas.width = parentDiv.offsetWidth;
+          canvas.height =parentDiv.offsetHeight;
+          parentDiv.appendChild(canvas);
+          const context = canvas.getContext('2d'); 
+          
+          // 填充渐变颜色
+          var gr = context.createLinearGradient(230, 0, 360, 0);
+          // 颜色断点
+          gr.addColorStop(1, 'rgba(92,197,255,0)');
+          gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        
+        
+          context.lineWidth = 1; // 设置线段宽度
+        
+          // 绘制圆角矩形
+          drawRoundRect(context, 260, 8, 120, 24, 12,gr)
+          drawRoundRect(context, 260, 36, 120, 24, 12,gr)
+          drawRoundRect(context, 260, 64, 120, 24, 12,gr)
+          drawRoundRect(context, 260, 92, 120, 24, 12,gr)
+          drawRoundRect(context, 260, 120, 120, 24, 12,gr)
+          drawRoundRect(context, 260, 148, 120, 24, 12,gr)
         });
       });
     },
@@ -47,11 +94,11 @@
       height:200px;
       width: 100%;
       padding: 0px 20px;
-      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #06425888 100%);
       border-radius: 5px 5px 5px 5px;
-      opacity: 0.8;
+      opacity: 1;
       border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.1), rgba(55, 231, 255, 0)) 1 1;
       display: flex;
       justify-content: space-between;
       align-items: center;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue

@@ -75,7 +75,7 @@
       .content-l {
         width: calc(100% / 4 - 25px * 3);
         min-width:460px;
-        margin-right:20px;
+        margin-right:15px;
 
       }
   
@@ -84,12 +84,12 @@
         display: inline-flex;
         flex-direction: column;
         width: calc(100% / 4 );
-        margin-right:20px;
+        margin-right:15px;
 
         .content-m-t {
             width:100%;
             height:240px;
-            margin-bottom: 20px;
+            margin-bottom: 15px;
         }
       }
       .content-r {

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/index.vue

@@ -2,7 +2,13 @@
     <div class='congestion'>
       <div class="board">
          <div class="queryList" >
-            <Card v-for="(item, index) in data" :cardData="item" :key="index" />
+            <Card v-for="(item, index) in data" :cardData="item" :keyMap="keyMap" :gap="'10px'" :key="index">
+              <template #form-start="{ data }">
+                  <div class="endSpecial">
+                    {{ data.start }} <img  src="./assets/weater.png"  />
+                  </div>
+                </template>
+              </Card>
          </div>
          <div class="queryCharts" >
             <WeateData class="charts-l"  />
@@ -29,12 +35,35 @@
     },
     data() {
       return {
+        keyMap:[
+          {
+            label:"设备名称",
+            key:"name"
+          },
+          {
+            label:"设备位置",
+            key:"name"
+          },
+          {
+            label:"所属方向",
+            key:"rote"
+          },
+          {
+            label:"采集时间",
+            key:"time"
+          },
+          {
+            label:"气象状态",
+            key:"start"
+          }
+        ],
         selectIndex:0,
         data: Array.from({ length: 10 }).map(() => ({
-        source: "济菏运管中心",
+        name: "气象监测器1",
-        location: "长清大学城收费站",
+        rote:"济南方向",
-        direction: "117.123456",
+        arrdeass: "K59+256",
-        direction2: "37.12234",
+        time: "2024.01.04 13:00:00",
+        start: "晴转多云",
       })),
        }
     },
@@ -64,6 +93,17 @@
   </script>
   
   <style lang='scss' scoped>
+
+  .endSpecial {
+    position: relative;
+    top:-10px;
+    
+    >img {
+      display: inline-flex;
+      margin-left:20px;
+    }
+  }
+
   .congestion {
     width: 100%;
     height:100%;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue

@@ -7,13 +7,16 @@
                 <span class="text">当前气象预警信息数：</span>
                 <span class="num" >113</span>
             </div>
-            <div class="buttons" >
+              <div >
-                <div class="allSel" >全部</div>
+                <el-select v-model="colorSelect" size="mini" class="selectRoad" placeholder="请选择">
-                <div class="redSel" >红色</div>
+                    <el-option
-                <div class="yelSel" >黄色</div>
+                        v-for="item in colors"
-                <div class="bluSel" >蓝色</div>
+                        :key="item.value"
-                <div class="orgSel" >橙色</div>
+                        :label="item.label"
-            </div>
+                        :value="item.value">
+                    </el-option>
+            </el-select> 
+        </div>
          </div>
          <div class="warningList" >
             <div class="itemWarning"   v-for="(item,i) in warnings">
@@ -66,8 +69,8 @@
   </template>
   
   <script>
-  import Card from "@screen/components/Card1/index.vue"
+  import { color } from 'echarts';
-  import WgtTitle from '../../../../../widgets/title'
+import WgtTitle from '../../../../../widgets/title'
 
   export default {
     name: 'infoWarning',
@@ -76,6 +79,13 @@
     },
     data() {
       return {
+        colorSelect:"org",
+            colors:[
+              {label:'全部',value:"all"},
+              {label:'橙色',value:"org"},
+              {label:'红色',value:"red"},
+              {label:'蓝色',value:"bule"},
+            ],
           warnings:[
             {
                 type:"org",
@@ -133,6 +143,20 @@
   </script>
   
   <style lang='scss' scoped>
+
+.selectRoad{
+      width:89px;
+      margin-top:5px;
+      margin-left:20px;
+      border:1px solid #00B3CC;
+      ::v-deep{
+        .el-input__inner{
+          background-color: #064258 !important;
+          border-width: 0px !important;
+        }
+      }
+    }
+
   .congestion {
     display: inline-flex;
     width: 100%;
@@ -341,7 +365,7 @@
             >span.text {
                 display: inline-flex;
                 font-size: 16px;
-                font-family: PangMenZhengDao, PangMenZhengDao;
+                font-family: PingFang SC, PingFang SC;
                 font-weight: 400;
                 color: #FFFFFF; 
             }
@@ -351,7 +375,7 @@
                 display: inline-flex;
                 justify-content: center;
             align-items: center;
-            font-size: 16px;
+            font-size: 20px;
                 font-family: PangMenZhengDao, PangMenZhengDao;
                 font-weight: 400;
                 color: #D9001B;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js

@@ -23,7 +23,7 @@ var options = {
    xAxis: [
       {
          type: 'category',
-         data: ['收费站', '费站', '费站', '收费站', '费站', '收费站', '费站', '收费站', '费站', '收费站'],
+         data: ['枢纽', '立交', '立交', '枢纽', '立交', '立交','立交','枢纽','立交','立交','枢纽','立交','立交','枢纽','立交','枢纽'],
          axisLabel:{
             color: "#ffffff"
          },
@@ -39,7 +39,7 @@ var options = {
          gridIndex: 1,
          type: 'category',
          z:10,
-         data: ['大学城', '长清收', '孝里收', '平阴北', '平阴收', '平阴南', '东平收', '梁山东', '梁山收', '嘉祥西'],
+         data: ['殷家林','大学城', '长清', '松竹', '孝里', '安城', '平阴', '孔村', '平阴南', '东平', '东平湖', '韩岗', '梁山', '鄄郓', '嘉祥西', '王官中'],
          position: 'top',
          axisLabel:{
             color: "#ffffff"
@@ -119,7 +119,7 @@ var options = {
             },
          },
          data: [
-            57, 36, 56, 95, 125, 194, 94, 94, 74, 34
+            57, 36, 56, 95, 125, 194, 94, 94, 74, 34,125, 194, 94, 94, 74, 34
          ]
       },
       {
@@ -155,7 +155,7 @@ var options = {
             },
          },
          data: [
-            67, 36, 56, 195, 25, 194, 94, 94, 74, 21
+            67, 36, 56, 195, 25, 194, 94, 94, 74, 21,195, 25, 194, 94, 94, 74, 21
          ]
       }
    ]

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue

@@ -66,7 +66,6 @@ export default {
     width: 98%;
     margin: auto;
     display: flex;
-    justify-content: space-between;
     flex: 1;
     pointer-events: none;
     margin-top: 19px;
@@ -76,6 +75,7 @@ export default {
 
     .content-l {
       width: 49.4%;
+      margin-right:20px;
     }
 
 
@@ -90,7 +90,6 @@ export default {
     width: 98%;
     margin: auto;
     display: flex;
-    justify-content: space-between;
     flex: 1;
     pointer-events: none;
     margin-top: 19px;
@@ -100,9 +99,11 @@ export default {
 
     .foot-l {
       width: 726px;
+      margin-right:20px;
     }
     .foot-m {
       width: 613px;
+      margin-right:20px;
     }
     .foot-r {
       width: 493px;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js

@@ -190,8 +190,8 @@ let xData = [
         },
         symbol:
            "image://data:image/png;base64,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",
-        symbolSize: [26, 26],
+        symbolSize: [20, 20],
-        symbolOffset:['-85%',0],
+        symbolOffset:['-115%',0],
         itemStyle: {
            color: "#FFF",
            shadowColor: "rgba(0, 255, 254, 0.53)",
@@ -274,7 +274,7 @@ let xData = [
   },
   symbol:
      "image://data:image/png;base64,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",
-  symbolSize: [26, 26],
+  symbolSize: [20, 20],
   symbolOffset:['1%',0],
   itemStyle: {
      color: "#FFF",
@@ -355,8 +355,8 @@ let xData = [
   },
   symbol:
      "image://data:image/png;base64,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",
-  symbolSize: [26, 26],
+  symbolSize: [20, 20],
-  symbolOffset:['85%',0],
+  symbolOffset:['110%',0],
   itemStyle: {
      color: "#FCBE39",
      shadowColor: "#FCBE3953",

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue

@@ -0,0 +1,393 @@
+<template>
+    <div class='congestion'>
+        <div  class="buttonbar" >
+            <div class="button" >
+                <i class="el-icon-refresh-right"></i>刷新
+            </div>
+            <div class="button" >
+                <i class="el-icon-upload2"></i>导出Excal
+            </div>
+        </div>
+      <div class="board">
+ 
+         <div class="weaterMain" >
+            <el-table
+                :border="false"
+                :data="tableData"
+                height="670"
+                style="width: 100%">
+                <el-table-column
+                prop="nem"
+                label=""
+                width="30">
+                </el-table-column>
+                <el-table-column
+                prop="address"
+                label="桩号范围"
+               >
+                </el-table-column>
+                <el-table-column
+                prop="name"
+                label="能见度"
+                class-name="showClass"
+                >
+                <template slot-scope="scope">
+                    <span class="showClass">{{scope.row.name}}</span>
+                </template>
+                </el-table-column>
+                <el-table-column
+                prop="date"
+                label="发生时间"
+                >
+                </el-table-column>
+            </el-table>
+            </div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+ 
+  export default {
+    name: 'IndicatorQuery',
+    components: {
+       
+    },
+    data() {
+      return {
+        tableData: [{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },
+        ]
+       }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+      selectItem(index){
+        this.selectIndex = index;
+      },
+    },
+    mounted() {
+   
+      setTimeout(() => {
+        this.$nextTick(() => {
+         
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+
+    .showClass {
+        color:#00EBC1;
+    }
+
+  ::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:12px !important;
+  }
+
+  ::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 tr:hover td {
+    background: #1b2528 !important;
+    color:#00D1FF;
+  }
+
+  ::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;
+  }
+
+  .congestion {
+    display: inline-flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+
+    .buttonbar {
+      display: inline-flex;
+      flex-direction: row;
+
+    }
+
+    .board{
+      height: 880px;
+      width: 100%;
+      padding: 0px 0px;
+      border-radius: 5px 5px 5px 5px;
+      opacity: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: column;
+      margin-top:20px;
+
+  
+
+      .warningList {
+        display: inline-flex;
+        flex-direction: column;
+        width:100%;
+        height:calc(100% - 40px);
+
+        >div {
+            display: inline-flex;
+            width:100%;
+            height:138px;
+            background: #133242;
+            border-radius: 2px 2px 2px 2px;
+            opacity: 1;
+            border: 1px solid;
+            border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1;
+            overflow: hidden;
+            margin-top:20px;
+            padding:23px 29px;
+            font-size: 14px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            color: #37E7FF;  
+
+            >.left-w {
+                display: inline-flex;
+                width:40%;
+                height:100%;
+                flex-direction: column;
+
+                .left-row {
+                    margin:2px;
+                    display: inline-flex;
+                    width:100%;
+                    height:30px;
+                    flex-direction: row;
+
+                    >.value {
+                        color:#fff;
+                    }
+
+                    .org {
+                            font-size: 14px;
+                            font-family: PangMenZhengDao, PangMenZhengDao;
+                            font-weight: 400;
+                            color: #F4A125
+                        }
+
+                }
+            }
+
+            >.right-w {
+                margin-left:30px;
+                display: inline-flex;
+                width:100%;
+                height:100%;
+                flex-direction: column;
+
+                .right-row {
+                    margin-bottom: 10px;
+                }
+                
+                .right-text {
+                    color:#fff;
+                }
+            }
+
+        }
+      }
+
+      .weaterMain {
+        display: inline-flex;
+        flex-direction: row;
+        width:100%;
+        height: 100%;;
+
+       
+        .buttons {
+            width:100%;
+            height:38px;
+            >div {
+                display: inline-flex;
+                width:10%;
+                height:35px;
+                justify-content: center;
+                align-items: center;
+                font-size: 12px;
+                font-family: PangMenZhengDao, PangMenZhengDao;
+                font-weight: 800;
+                color: #FFFFFF;
+                z-index: 9;
+            }
+
+            >div::after {
+                content: "";
+                position: absolute;
+                display: inline-flex;
+                width: 55px;
+                height: 36px;
+                background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%);
+                border-radius: 50%;
+                opacity: 1;  
+                z-index:-1;
+            }
+
+            .redSel::after {
+                background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%);
+            }
+
+            .yelSel::after {
+                background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%);
+            }
+
+            .bluSel::after {
+                background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%);
+            }
+
+            .orgSel::after{
+                background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%);
+            }
+        }
+
+        .weaterTitle::after {
+            content: "";
+            position: absolute;
+            top:0px;
+            left:0px;
+            width:100%;
+            height:2px;
+            background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%);
+            border-radius: 0px 0px 0px 0px;
+            opacity: 1;
+        }
+        .weaterTitle::before {
+            content: "";
+            position: absolute;
+            top:38px;
+            left:0px;
+            width:100%;
+            height:2px;
+            background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%);
+            border-radius: 0px 0px 0px 0px;
+            opacity: 1;
+        }
+
+        .weaterTitle {
+            position: relative;
+            display: inline-flex;
+            width: 277px;
+            height: 38px;
+            background: linear-gradient(269deg, rgba(55,231,255,0) 6%, rgba(55,231,255,0.6) 50%, rgba(55,231,255,0) 92%);
+            border-radius: 0px 0px 0px 0px;
+            opacity: 1;
+            justify-content: center;
+            align-items: center;
+
+            >span.text {
+                display: inline-flex;
+                font-size: 16px;
+                font-family: PangMenZhengDao, PangMenZhengDao;
+                font-weight: 400;
+                color: #FFFFFF; 
+            }
+
+          
+            .num {
+                display: inline-flex;
+                justify-content: center;
+            align-items: center;
+                font-size: 22px;
+                font-family: PangMenZhengDao, PangMenZhengDao;
+                font-weight: 400;
+                color: #D9001B;
+            }
+        }
+      }
+
+    }
+  }
+      .charts {
+        height:180px;
+        width: 100%;
+      }
+  
+  </style>
+  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/index.vue

@@ -5,7 +5,7 @@
               <IndicatorAnalysis />
             </el-tab-pane>
             <el-tab-pane label="综合指标查询" name="second">
-             
+              <IndicatorQuery />
             </el-tab-pane>
         </el-tabs>
     </div>
@@ -13,11 +13,13 @@
   
   <script> 
   import IndicatorAnalysis from './components/IndicatorAnalysis';
+  import IndicatorQuery from './components/IndicatorQuery';
 
   export default {
     name: 'trafficSituation',
     components: {
-      IndicatorAnalysis
+      IndicatorAnalysis,
+      IndicatorQuery
     },
     data(){
         return {