Merge branch 'develop' of http://39.106.31.193:9211/mengff/jihe-hs into develop

ruoyi-ui/src/common/menuData.js

@@ -102,6 +102,30 @@ export default [
           },
         ],
       },
+      {
+        title: "扫码报警",
+        name: "controlQR",
+        path: "/control/qrCode",
+        component: "control/qrCode/index.vue"
+      },
+      {
+        title: "非机预警",
+        name: "controlManual",
+        children: [
+          {
+            title: "事件列表",
+            name: "controlManualEvents",
+            path: "/control/manual/events",
+            component: "control/manual/events/index.vue",
+          },
+          {
+            title: "统计分析",
+            name: "controlManualStatistic",
+            path: "/control/manual/statistic",
+            component: "control/manual/statistic/index.vue",
+          }
+        ]
+      }
     ],
   },
   {

ruoyi-ui/src/views/JiHeExpressway/components/CameraShower/CameraController.vue

@@ -126,7 +126,7 @@ export default {
       .compHead{
         display: flex; justify-content: flex-end; padding-bottom: 20px;
         // img{ width: 20px; height: 20px; pointer-events: all;}
-        .iconfont{font-size: 18px; pointer-events: all;}
+        .iconfont{font-size: 18px; pointer-events: all; color: #3DE8FF;}
       }
       .compCon {
         display: flex;

ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardInfoEditor.vue

@@ -374,25 +374,27 @@ export default {
     },
   },
   watch: {
-    screenSize(newV){
-
-      if(newV){
-        let boardH = newV.split("*")[1];
-        let fontSize = "20";
-        if (['64', '48'].includes(boardH)) {
-          this.maxFontSize = +boardH
-          fontSize = boardH + ""
-        } else if (['80'].includes(boardH)) {
-          this.maxFontSize = +boardH / 2
-          fontSize = +boardH / 2 + ""
-        } else if (['160'].includes(boardH)) {
-          this.maxFontSize = +boardH / 2
-          fontSize = +boardH / 4 + ""
+    screenSize:{
+      handler(newV){
+        if(newV){
+          let boardH = newV.split("*")[1];
+          let fontSize = "20";
+          if (['64', '48'].includes(boardH)) {
+            this.maxFontSize = +boardH
+            fontSize = boardH + ""
+          } else if (['80'].includes(boardH)) {
+            this.maxFontSize = +boardH / 2
+            fontSize = +boardH / 2 + ""
+          } else if (['160'].includes(boardH)) {
+            this.maxFontSize = +boardH / 2
+            fontSize = +boardH / 4 + ""
+          }
+          this.deviceCttDefault.fontSize = fontSize
+          this.templateDefault.screenSize = newV;
+          this.templateDefault.fontSize = fontSize;
         }
-        this.deviceCttDefault.fontSize = fontSize
-        this.templateDefault.screenSize = newV;
-        this.templateDefault.fontSize = fontSize;
-      }
+      },
+      immediate:true
     },
     visible: {
       handler(newV) {
@@ -453,10 +455,6 @@ export default {
       // this.templateDefault.fontSize = this.fontSizeList[0].dictValue
       // this.dataForm.FONT_SIZE = res.data[1].dictValue
     });
-
-
-    
-
   },
   methods: {
     initData() {

ruoyi-ui/src/views/JiHeExpressway/index.vue

@@ -113,16 +113,16 @@ export default {
   }
 
   .content {
-    display: flex;
-    flex-direction: row;
+    // display: flex;
+    // flex-direction: row;
     pointer-events: none;
 
     ::v-deep {
       >div {
-        top: -6px;
+        // top: -6px;
         z-index: -1;
         pointer-events: auto;
-        height: calc(100% + 6px);
+        // height: calc(100% + 6px);
       }
     }
 

ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class='comp_box'>
+    <img src="./img.png" />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'InDevelopment',
+  components: {
+  },
+  props: {
+    text: {
+      type: String,
+      default: "暂无数据"
+    }
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.comp_box {
+  // padding-top:160px;
+  width: 100%;
+  height: 100%;
+  color: #8A9EAA;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  img {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class='comp_box'>
+    <img src="./img.png" />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'InDevelopment',
+  components: {
+  },
+  props:{
+    text:{
+      type:String,
+      default:"暂无数据"
+    }
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.comp_box {
+  // padding-top:160px;
+  width: 100%;
+  height: 100%;
+  color: #8A9EAA;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  img{
+    position: absolute;
+    left: 0;
+    top:0;
+    bottom: 0;
+    right: 0;
+  }
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/pages/control/qrCode/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class='comp_box'>
+   <iframe class="iframe" src="http://10.168.56.206:8888/alarm-ui/single?u=pDo/guSkRP8=&p=u4johJJOFTyugiay04vYxQ==&t=za4NgrFfeTdF76uSUrhJuA==&route=/warning/QRCode" frameborder="0"></iframe>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'InDevelopment',
+  components: {
+  },
+  props:{
+    text:{
+      type:String,
+      default:"暂无数据"
+    }
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.comp_box {
+  // padding-top:160px;
+  width: 100%;
+  height: 100%;
+  color: #8A9EAA;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  .iframe {
+    position: absolute;
+    left: 0; top:0; width: 100%; height: 100%;
+  }
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js

@@ -34,7 +34,7 @@ for (var i = 0; i < res.length; i++) {
   });
   if (res[i].name != "") legendData.push(res[i].name);
 }
-
+let decoDelta = 48;
 var options = {
   color: ["#5CC5FF", "#54EFD5", "#FD9666", "#5C8CFE", "#51D5AD"],
   title: [
@@ -154,7 +154,7 @@ var options = {
       coordinateSystem: "none",
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
-        let y0 = api.getHeight() / 2 - 59;
+        let y0 = api.getHeight() / 2 - decoDelta;
         let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
         return {
           type: "circle",
@@ -181,7 +181,7 @@ var options = {
           type: "arc",
           shape: {
             cx: api.getWidth() / 2,
-            cy: api.getHeight() / 2 - 59,
+            cy: api.getHeight() / 2 - decoDelta,
             r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
             startAngle: ((350 + -angle) * Math.PI) / 180,
             endAngle: ((120 + -angle) * Math.PI) / 180,
@@ -201,7 +201,7 @@ var options = {
       coordinateSystem: "none",
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
-        let y0 = api.getHeight() / 2 - 59;
+        let y0 = api.getHeight() / 2 - decoDelta;
         let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
         return {
           type: "circle",
@@ -228,7 +228,7 @@ var options = {
           type: "arc",
           shape: {
             cx: api.getWidth() / 2,
-            cy: api.getHeight() / 2 - 59,
+            cy: api.getHeight() / 2 - decoDelta,
             r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
             startAngle: ((150 + -angle) * Math.PI) / 180,
             endAngle: ((-30 + -angle) * Math.PI) / 180,
@@ -248,7 +248,7 @@ var options = {
       coordinateSystem: "none",
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
-        let y0 = api.getHeight() / 2 - 59;
+        let y0 = api.getHeight() / 2 - decoDelta;
         let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
         return {
           type: "circle",
@@ -275,7 +275,7 @@ var options = {
           type: "arc",
           shape: {
             cx: api.getWidth() / 2,
-            cy: api.getHeight() / 2 - 59,
+            cy: api.getHeight() / 2 - decoDelta,
             r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
             startAngle: ((590 + -angle) * Math.PI) / 180,
             endAngle: ((350 + -angle) * Math.PI) / 180,
@@ -295,7 +295,7 @@ var options = {
       coordinateSystem: "none",
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
-        let y0 = api.getHeight() / 2 - 59;
+        let y0 = api.getHeight() / 2 - decoDelta;
         let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
         return {
           type: "circle",
@@ -322,7 +322,7 @@ var options = {
           type: "arc",
           shape: {
             cx: api.getWidth() / 2,
-            cy: api.getHeight() / 2 - 59,
+            cy: api.getHeight() / 2 - decoDelta,
             r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
             startAngle: ((90 + -angle) * Math.PI) / 180,
             endAngle: ((160 + -angle) * Math.PI) / 180,

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/index.vue

@@ -42,10 +42,10 @@ export default {
 <style lang='scss' scoped>
 .congestion {
   width: 100%;
-
+  display: flex; flex-direction: column;
   .board {
-    height: 346px;
     width: 100%;
+    flex: 1;
     padding: 0px 20px;
     background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     border-radius: 5px 5px 5px 5px;
@@ -60,7 +60,7 @@ export default {
 }
 
 .charts {
-  height: 376px;
+  height: 100%;
   width: 100%;
 }
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js

@@ -36,6 +36,7 @@ for (var i = 0; i < res.length; i++) {
   if (res[i].name != "") legendData.push(res[i].name);
 }
 let angle = 0; //角度，用来做简单的动画效果的
+let decoDelta = 48;
 var options = {
   color: ["#68F4DD", "#FFDD69", "#3CC3F0", "#5C8CFE", "#51D5AD"],
   title: [
@@ -155,7 +156,7 @@ var options = {
       coordinateSystem: "none",
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
-        let y0 = api.getHeight() / 2 - 59;
+        let y0 = api.getHeight() / 2 - decoDelta;
         let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
         return {
           type: "circle",
@@ -182,7 +183,7 @@ var options = {
           type: "arc",
           shape: {
             cx: api.getWidth() / 2,
-            cy: api.getHeight() / 2 - 59,
+            cy: api.getHeight() / 2 - decoDelta,
             r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
             startAngle: ((350 + -angle) * Math.PI) / 180,
             endAngle: ((120 + -angle) * Math.PI) / 180,
@@ -202,7 +203,7 @@ var options = {
       coordinateSystem: "none",
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
-        let y0 = api.getHeight() / 2 - 59;
+        let y0 = api.getHeight() / 2 - decoDelta;
         let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
         return {
           type: "circle",
@@ -229,7 +230,7 @@ var options = {
           type: "arc",
           shape: {
             cx: api.getWidth() / 2,
-            cy: api.getHeight() / 2 - 59,
+            cy: api.getHeight() / 2 - decoDelta,
             r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
             startAngle: ((150 + -angle) * Math.PI) / 180,
             endAngle: ((-30 + -angle) * Math.PI) / 180,
@@ -249,7 +250,7 @@ var options = {
       coordinateSystem: "none",
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
-        let y0 = api.getHeight() / 2 - 59;
+        let y0 = api.getHeight() / 2 - decoDelta;
         let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
         return {
           type: "circle",
@@ -276,7 +277,7 @@ var options = {
           type: "arc",
           shape: {
             cx: api.getWidth() / 2,
-            cy: api.getHeight() / 2 - 59,
+            cy: api.getHeight() / 2 - decoDelta,
             r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
             startAngle: ((590 + -angle) * Math.PI) / 180,
             endAngle: ((350 + -angle) * Math.PI) / 180,
@@ -296,7 +297,7 @@ var options = {
       coordinateSystem: "none",
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
-        let y0 = api.getHeight() / 2 - 59;
+        let y0 = api.getHeight() / 2 - decoDelta;
         let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
         return {
           type: "circle",
@@ -323,7 +324,7 @@ var options = {
           type: "arc",
           shape: {
             cx: api.getWidth() / 2,
-            cy: api.getHeight() / 2 - 59,
+            cy: api.getHeight() / 2 - decoDelta,
             r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
             startAngle: ((90 + -angle) * Math.PI) / 180,
             endAngle: ((160 + -angle) * Math.PI) / 180,

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/index.vue

@@ -42,9 +42,9 @@ export default {
 <style lang='scss' scoped>
 .congestion {
   width: 100%;
-
+  display: flex; flex-direction: column;
   .board {
-    height: 346px;
+    flex: 1;
     width: 100%;
     padding: 0px 20px;
     background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
@@ -60,7 +60,7 @@ export default {
 }
 
 .charts {
-  height: 376px;
+  height: 100%;
   width: 100%;
 }
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js

@@ -51,7 +51,7 @@ for (var i = 0; i < res.length; i++) {
   });
   if (res[i].name != "") legendData.push(res[i].name);
 }
-
+let decoDelta = 48;
 var options = {
   color: [
     "#2867FF",
@@ -180,7 +180,7 @@ var options = {
       coordinateSystem: "none",
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
-        let y0 = api.getHeight() / 2 - 59;
+        let y0 = api.getHeight() / 2 - decoDelta;
         let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
         return {
           type: "circle",
@@ -207,7 +207,7 @@ var options = {
           type: "arc",
           shape: {
             cx: api.getWidth() / 2,
-            cy: api.getHeight() / 2 - 59,
+            cy: api.getHeight() / 2 - decoDelta,
             r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
             startAngle: ((350 + -angle) * Math.PI) / 180,
             endAngle: ((120 + -angle) * Math.PI) / 180,
@@ -227,7 +227,7 @@ var options = {
       coordinateSystem: "none",
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
-        let y0 = api.getHeight() / 2 - 59;
+        let y0 = api.getHeight() / 2 - decoDelta;
         let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
         return {
           type: "circle",
@@ -254,7 +254,7 @@ var options = {
           type: "arc",
           shape: {
             cx: api.getWidth() / 2,
-            cy: api.getHeight() / 2 - 59,
+            cy: api.getHeight() / 2 - decoDelta,
             r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
             startAngle: ((150 + -angle) * Math.PI) / 180,
             endAngle: ((-30 + -angle) * Math.PI) / 180,
@@ -274,7 +274,7 @@ var options = {
       coordinateSystem: "none",
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
-        let y0 = api.getHeight() / 2 - 59;
+        let y0 = api.getHeight() / 2 - decoDelta;
         let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
         return {
           type: "circle",
@@ -301,7 +301,7 @@ var options = {
           type: "arc",
           shape: {
             cx: api.getWidth() / 2,
-            cy: api.getHeight() / 2 - 59,
+            cy: api.getHeight() / 2 - decoDelta,
             r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
             startAngle: ((590 + -angle) * Math.PI) / 180,
             endAngle: ((350 + -angle) * Math.PI) / 180,
@@ -321,7 +321,7 @@ var options = {
       coordinateSystem: "none",
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
-        let y0 = api.getHeight() / 2 - 59;
+        let y0 = api.getHeight() / 2 - decoDelta;
         let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
         return {
           type: "circle",
@@ -348,7 +348,7 @@ var options = {
           type: "arc",
           shape: {
             cx: api.getWidth() / 2,
-            cy: api.getHeight() / 2 - 59,
+            cy: api.getHeight() / 2 - decoDelta,
             r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
             startAngle: ((90 + -angle) * Math.PI) / 180,
             endAngle: ((160 + -angle) * Math.PI) / 180,

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class='congestion '>
+  <div class='congestion'>
     <WgtTitle :title="'今日发布事件类型分析'"></WgtTitle>
     <div class="board">
       <div class="charts  keep-ratio" id="eventTypeAnalysis"></div>
@@ -42,10 +42,10 @@ export default {
 <style lang='scss' scoped>
 .congestion {
   width: 100%;
-
+  display: flex; flex-direction: column;
   .board {
-    height: 346px;
     width: 100%;
+    flex: 1;
     padding: 0px 20px;
     background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     border-radius: 5px 5px 5px 5px;
@@ -60,7 +60,7 @@ export default {
 }
 
 .charts {
-  height: 376px;
+  height: 100%;
   width: 100%;
 }
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue

@@ -2,7 +2,7 @@
   <div class="congestion">
     <WgtTitle :title="'月审核通过趋势分析'"></WgtTitle>
     <div class="board">
-      <div class="searchPanel_1">
+      <div class="searchPanel_1 keep-ratio">
         <el-date-picker
           size="mini"
           type="month"
@@ -66,12 +66,11 @@ export default {
 
 <style lang="scss" scoped>
 .congestion {
-  width: 100%;
+  display: flex; flex-direction: column;
 
   .board {
     position: relative;
-    height: 300px;
-    width: 100%;
+    flex: 1;
     padding: 0px 20px;
     background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     border-radius: 5px 5px 5px 5px;

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsDay/index.vue

@@ -42,10 +42,10 @@ export default {
 <style lang='scss' scoped>
 .congestion {
   width: 100%;
-
+  display: flex; flex-direction: column;
   .board {
-    height: 346px;
     width: 100%;
+    flex: 1;
     padding: 0px 20px;
     background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     border-radius: 5px 5px 5px 5px;
@@ -60,7 +60,7 @@ export default {
 }
 
 .charts {
-  height: 346px;
+  height: 100%;
   width: 100%;
 }
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue

@@ -2,7 +2,7 @@
   <div class="congestion">
     <WgtTitle title="月发布渠道趋势分析"></WgtTitle>
     <div class="board">
-      <div class="searchPanel_1">
+      <div class="searchPanel_1 keep-ratio">
         <el-date-picker
           size="mini"
           class="selectRoad"
@@ -58,12 +58,10 @@ export default {
 
 <style lang="scss" scoped>
 .congestion {
-  width: 100%;
-
+  display: flex; flex-direction: column;
   .board {
+    flex: 1;
     position: relative;
-    height: 300px;
-    width: 100%;
     padding: 0px 20px;
     background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     border-radius: 5px 5px 5px 5px;

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/topComponent/index.vue

@@ -144,7 +144,6 @@ export default {
 
 .TrafficFlow {
   width: 100%;
-  height: 182px;
   display: inline-flex;
   position: relative;
   z-index: 6;
@@ -247,6 +246,7 @@ export default {
       justify-content: center;
       align-items: center;
     }
+    .item:last-child::after{ background: none;}
   }
 }
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/index.vue

@@ -1,25 +1,23 @@
 <template>
-  <div class="TrafficFlow">
-    <section class="foot">
-      <el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs">
-        <el-tab-pane label="公众服务统计分析" name="first">
-          <div class="header-shot">
-            <TopComponent />
+  <div class="public_service_statistic">
+
+      <el-tabs class="content_tab" v-model="activeName" @tab-click="changeTabs">
+        <el-tab-pane label="公众服务统计分析" name="first" class="first_tab">
+          <TopComponent class="line_01"/>
+          <div class="line_02">
+            <ChannelAnalytics class="unit" />
+            <EventTypeAnalysis class="unit" />
+            <AuditAnalytics class="unit" />
+            <PostTrendsDay class="unit" />
           </div>
-          <div class="content">
-            <ChannelAnalytics class="content-l" />
-            <EventTypeAnalysis class="content-l" />
-            <AuditAnalytics class="content-l" />
-            <PostTrendsDay class="content-l" style="margin-right: 0" />
-          </div>
-          <div class="content">
-            <PostTrendsMonth class="content-mi" />
-            <NucleusThrough class="content-mi" style="margin-right: 0" />
+          <div class="line_03">
+            <PostTrendsMonth class="unit" />
+            <NucleusThrough class="unit" />
           </div>
         </el-tab-pane>
         <el-tab-pane label="公众服务统计查询" name="second"> </el-tab-pane>
       </el-tabs>
-    </section>
+
   </div>
 </template>
 
@@ -76,90 +74,41 @@ export default {
   opacity: 0.1;
 }
 
-.footTabs {
-  display: inline;
-  width: 100%;
-}
-
-.TrafficFlow {
+.public_service_statistic {
   width: 100%;
   height: 100%;
-  position: relative;
+  padding: 15px;
+  display: flex; justify-content: stretch; align-items: stretch;
+  // position: relative;
   z-index: 6;
   color: white;
+  overflow: hidden;
 
-  .header-shot {
-    width: 98%;
-    margin: auto;
-    margin-top: 15px;
-    height: 160px;
+  .content_tab{
+    display: flex; flex-direction: column; flex: 1;
+    ::v-deep .el-tabs__header{}
+    ::v-deep .el-tabs__content{ flex: 1;}
   }
 
-  .content {
-    width: 100%;
-    margin: auto;
-    display: flex;
-    flex: 1;
-    pointer-events: none;
-    margin-top: 19px;
-    --keep-ratio: scaleX(1);
-
-    > div {
-      pointer-events: auto;
-    }
-
-    .content-l {
-      width: calc(25%);
-
-      margin-right: 20px;
-    }
-
-    .content-mi {
-      width: calc(50%);
-
-      margin-right: 20px;
-    }
-
-    .content-m {
-      display: inline-flex;
-      flex-direction: column;
-      width: calc(100% / 4);
-      margin-right: 20px;
-
-      .content-m-t {
-        width: 100%;
-        height: 240px;
-        margin-bottom: 20px;
-      }
-    }
-    .content-r {
-      width: 49.4%;
-    }
-  }
-  .foot {
-    width: 98%;
-    margin: auto;
-    display: flex;
-    justify-content: space-between;
-    flex: 1;
-    pointer-events: none;
-    margin-top: 8px;
-    > div {
-      pointer-events: auto;
-    }
-
-    .foot-w {
-      width: 100%;
-    }
-
-    .foot-l {
-      width: 726px;
+  .first_tab{
+    width: 100%; height: 100%; display: flex; flex-direction: column;
+    .line_01 {
+      flex-basis: 140px; margin-bottom: 16px;
     }
-    .foot-m {
-      width: 613px;
+    .line_02{
+      flex: 1;
+      height: 0;
+      display: flex;
+      margin-bottom: 16px;
+      .unit{ margin-right: 16px; flex: 1; width: 0;}
+      .unit:last-child{ margin-right: 0;}
     }
-    .foot-r {
-      width: 493px;
+    .line_03{
+      height: 0;
+      flex: 1;
+      display: flex; align-items: stretch;
+      .unit{ margin-right: 16px; flex: 1; }
+      .unit:last-child{ margin-right: 0;}
     }
   }
 }