From 20380c54da6d738de3eae0468b360334b3c853dd Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Mon, 18 Mar 2024 17:58:40 +0800
Subject: [PATCH] =?UTF-8?q?bug=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/topComponent/index.vue         | 558 +++++++++---------
 .../statisticalAnalysis/assets/charts.js      |   3 +
 .../statisticalAnalysis/index.vue             |  30 +-
 .../components/nucleusThrough/index.vue       |   6 +-
 .../components/postTrendsMonth/index.vue      |  13 +-
 .../components/topComponent/index.vue         | 468 +++++++--------
 6 files changed, 536 insertions(+), 542 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/index.vue
index 79561e37..d330a05a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/index.vue
@@ -1,319 +1,309 @@
 <template>
-    <div class='TrafficFlow'>
-        <section class="foot">
-
-            <div class="item keep-ratio" v-for="(item, index) in topDatas">
-                <div class="line">
-                </div>
-                <div class="item-title">
-                    <span> {{ item.eventName }} <span class="num">{{ item.total }}</span>起</span>
-                </div>
-                <div class="item-body">
-                    <div class="icon-left"
-                        :style="{ backgroundImage: `url(${require(`@screen/images/layer/${active}/${item.eventName}.svg`)})`, '--bgColor': `rgba(0, 209, 255, 10%)` }">
-                    </div>
-
-                    <div class="text-right">
-                        <div class="text">
-                            已处理 <span class="num">{{ item.finished }}</span> 起
-                        </div>
-                        <div class="text">
-                            处理中 <span class="num">{{ item.processing }}</span> 起
-                        </div>
-                        <div class="text">
-                            待处理 <span class="num">{{ item.unconfirmed }}</span> 起
-                        </div>
-                    </div>
-                </div>
+  <div class="TrafficFlow">
+    <section class="foot">
+      <div class="item keep-ratio" v-for="(item, index) in topDatas">
+        <div class="line"></div>
+        <div class="item-title">
+          <span>
+            {{ item.eventName }} <span class="num">{{ item.total }}</span
+            >起</span
+          >
+        </div>
+        <div class="item-body">
+          <div
+            class="left"
+            :style="{
+              backgroundImage: `url(${require(`@screen/images/layer/${active}/${item.eventName}.svg`)})`,
+              '--bgColor': `rgba(0, 209, 255, 10%)`,
+            }"
+          ></div>
+
+          <div class="text-right">
+            <div class="text">
+              已处理 <span class="num">{{ item.finished }}</span> 起
+            </div>
+            <div class="text">
+              处理中 <span class="num">{{ item.processing }}</span> 起
             </div>
-        </section>
-    </div>
+            <div class="text">
+              待处理 <span class="num">{{ item.unconfirmed }}</span> 起
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
 </template>
-  
+
 <script>
-import { eventStatusNum } from "@/api/event/governanceAnalysis"
+import { eventStatusNum } from "@/api/event/governanceAnalysis";
 export default {
-    name: 'publicService',
-    components: {
-
-    },
-    data() {
-        return {
-            active: "事件专题",
-            activeName: "first",
-            topDatas: []
-            // topDatas: [{
-            //     text: "其他事件",
-            //     textEnd: "起",
-            //     textNum: 9,
-            //     icon: require("./assets/其他事件.png"),
-            //     reviewed: 4,
-            //     noReviewed: 5
-            // }, {
-            //     text: "路障清除",
-            //     textEnd: "起",
-            //     textNum: 9,
-            //     icon: require("./assets/路障清除.png"),
-            //     reviewed: 4,
-            //     noReviewed: 5
-            // }, {
-            //     text: "车辆故障",
-            //     textEnd: "起",
-            //     textNum: 9,
-            //     icon: require("./assets/车辆故障.png"),
-            //     reviewed: 4,
-            //     noReviewed: 5
-            // }, {
-            //     text: "服务区异常",
-            //     textEnd: "起",
-            //     textNum: 9,
-            //     icon: require("./assets/服务区异常.png"),
-            //     reviewed: 4,
-            //     noReviewed: 5
-            // }, {
-            //     text: "交通管制",
-            //     textEnd: "起",
-            //     textNum: 9,
-            //     icon: require("./assets/交通管制.png"),
-            //     reviewed: 4,
-            //     noReviewed: 5
-            // }, {
-            //     text: "交通拥堵",
-            //     textEnd: "起",
-            //     textNum: 9,
-            //     icon: require("./assets/交通拥堵.png"),
-            //     reviewed: 4,
-            //     noReviewed: 5
-            // }, {
-            //     text: "施工建设",
-            //     textEnd: "起",
-            //     textNum: 9,
-            //     icon: require("./assets/施工建设.png"),
-            //     reviewed: 4,
-            //     noReviewed: 5
-            // }, {
-            //     text: "异常天气",
-            //     textEnd: "起",
-            //     textNum: 9,
-            //     icon: require("./assets/异常天气.png"),
-            //     reviewed: 4,
-            //     noReviewed: 5
-            // }, {
-            //     text: "交通事故",
-            //     textEnd: "起",
-            //     textNum: 9,
-            //     icon: require("./assets/交通事故.png"),
-            //     reviewed: 4,
-            //     noReviewed: 5
-            // }
-
-            // ]
-        }
-    },
-    methods: {
-        getEventStatusNum() {
-            eventStatusNum().then(response => {
-                this.topDatas = response.data
-            })
-        },
-        changeTabs() {
-
-        }
+  name: "publicService",
+  components: {},
+  data() {
+    return {
+      active: "事件专题",
+      activeName: "first",
+      topDatas: [],
+      // topDatas: [{
+      //     text: "其他事件",
+      //     textEnd: "起",
+      //     textNum: 9,
+      //     icon: require("./assets/其他事件.png"),
+      //     reviewed: 4,
+      //     noReviewed: 5
+      // }, {
+      //     text: "路障清除",
+      //     textEnd: "起",
+      //     textNum: 9,
+      //     icon: require("./assets/路障清除.png"),
+      //     reviewed: 4,
+      //     noReviewed: 5
+      // }, {
+      //     text: "车辆故障",
+      //     textEnd: "起",
+      //     textNum: 9,
+      //     icon: require("./assets/车辆故障.png"),
+      //     reviewed: 4,
+      //     noReviewed: 5
+      // }, {
+      //     text: "服务区异常",
+      //     textEnd: "起",
+      //     textNum: 9,
+      //     icon: require("./assets/服务区异常.png"),
+      //     reviewed: 4,
+      //     noReviewed: 5
+      // }, {
+      //     text: "交通管制",
+      //     textEnd: "起",
+      //     textNum: 9,
+      //     icon: require("./assets/交通管制.png"),
+      //     reviewed: 4,
+      //     noReviewed: 5
+      // }, {
+      //     text: "交通拥堵",
+      //     textEnd: "起",
+      //     textNum: 9,
+      //     icon: require("./assets/交通拥堵.png"),
+      //     reviewed: 4,
+      //     noReviewed: 5
+      // }, {
+      //     text: "施工建设",
+      //     textEnd: "起",
+      //     textNum: 9,
+      //     icon: require("./assets/施工建设.png"),
+      //     reviewed: 4,
+      //     noReviewed: 5
+      // }, {
+      //     text: "异常天气",
+      //     textEnd: "起",
+      //     textNum: 9,
+      //     icon: require("./assets/异常天气.png"),
+      //     reviewed: 4,
+      //     noReviewed: 5
+      // }, {
+      //     text: "交通事故",
+      //     textEnd: "起",
+      //     textNum: 9,
+      //     icon: require("./assets/交通事故.png"),
+      //     reviewed: 4,
+      //     noReviewed: 5
+      // }
+
+      // ]
+    };
+  },
+  methods: {
+    getEventStatusNum() {
+      eventStatusNum().then((response) => {
+        this.topDatas = response.data;
+      });
     },
-    mounted() {
-        this.getEventStatusNum()
-    },
-
-}
+    changeTabs() {},
+  },
+  mounted() {
+    this.getEventStatusNum();
+  },
+};
 </script>
-  
-<style lang='scss' scoped>
+
+<style lang="scss" scoped>
 ::v-deep .el-tabs__item {
-    display: inline-flex;
-    justify-content: center;
-    font-size: 16px;
-    font-family: PingFang SC, PingFang SC;
-    font-weight: 500;
-    color: #FFFFFF;
-    min-width: 128px;
-    position: relative;
-    left: 10px;
+  display: inline-flex;
+  justify-content: center;
+  font-size: 16px;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+  min-width: 128px;
+  position: relative;
+  left: 10px;
 }
 
 ::v-deep .el-tabs__active-bar {
-    min-width: 128px;
+  min-width: 128px;
 }
 
 ::v-deep .el-tabs__nav-wrap::after {
-    background-color: #133242;
-    opacity: 0.1;
+  background-color: #133242;
+  opacity: 0.1;
 }
 
 .footTabs {
-    display: inline;
-    width: 99%;
-
+  display: inline;
+  width: 99%;
 }
 
 .TrafficFlow {
-    width: 100%;
-    height: 182px;
+  width: 100%;
+  height: 182px;
+  display: inline-flex;
+  position: relative;
+  z-index: 6;
+  color: white;
+  background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425804 93%);
+  border-radius: 0px 0px 0px 0px;
+
+  .item:nth-child(11) .line {
+    display: none;
+  }
+
+  .foot {
     display: inline-flex;
-    position: relative;
-    z-index: 6;
-    color: white;
-    background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425804 93%);
-    border-radius: 0px 0px 0px 0px;
-
-    .item:nth-child(11) .line {
-        display: none;
-    }
-
-    .foot {
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0) 40%, #064258 93%);
+
+    .item {
+      position: relative;
+      display: inline-flex;
+      width: calc(100% / 9);
+      height: 100%;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .item-title {
+        position: relative;
         display: inline-flex;
+        width: 162px;
+        height: 35px;
         flex-direction: row;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(180deg, rgba(6, 66, 88, 0) 40%, #064258 93%);
-
-
-        .item {
-            position: relative;
-            display: inline-flex;
-            width: calc(100% / 9);
-            height: 100%;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-
-            .item-title {
-                position: relative;
-                display: inline-flex;
-                width: 162px;
-                height: 35px;
-                flex-direction: row;
-                justify-content: center;
-                align-items: center;
-                background: linear-gradient(180deg, rgba(3, 60, 82, 0) 0%, #033C52 100%);
-                border-radius: 4px 4px 4px 4px;
-                font-size: 16px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 500;
-                color: #FFFFFF;
-
-                span.num {
-                    font-size: 22px;
-                    font-family: PangMenZhengDao;
-                    font-weight: 400;
-                    color: #E2B066;
-                    position: relative;
-                    display: inline-flex;
-                    top: 2px;
-                    left: -2px;
-                }
-            }
-
-            .item-body {
-                position: relative;
-                display: inline-flex;
-                width: 162px;
-                // height: 100%;
-                flex-direction: row;
-                justify-content: center;
-                align-items: center;
-                font-size: 14px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 400;
-                color: #FFFFFF;
-                margin: 20px 0;
-
-                .icon-left {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    // position: absolute;
-                    // transition: all .15s linear;
-                    // top: 0;
-                    // width: 100%;
-                    width: 47px;
-                    height: 47px;
-                    margin-left: -8px;
-                    margin-right: 10px;
-                    background-repeat: no-repeat;
-                    background-size: auto;
-                    background-position: center;
-                    transition: all .18s linear;
-
-                    &::before {
-                        content: "";
-                        position: absolute;
-                        width: 45px;
-                        height: 45px;
-                        border: 1px solid rgba(0, 209, 255, .5);
-                        background-color: var(--bgColor);
-                        border-radius: 50%;
-                        z-index: -1;
-                    }
-                }
-
-
-
-                .text-right {
-                    display: inline-flex;
-                    flex-direction: column;
-                    align-items: center;
-                    justify-content: space-between;
-
-                    .text {
-                        margin-top: 7px;
-                        // margin: 5px;
-                    }
-                }
-
-
-
-
-                span.num {
-                    font-size: 18px;
-                    font-family: PangMenZhengDao;
-                    font-weight: 400;
-                    color: #E2B066;
-                }
-
-            }
-
+        justify-content: center;
+        align-items: center;
+        background: linear-gradient(
+          180deg,
+          rgba(3, 60, 82, 0) 0%,
+          #033c52 100%
+        );
+        border-radius: 4px 4px 4px 4px;
+        font-size: 16px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+
+        span.num {
+          font-size: 22px;
+          font-family: PangMenZhengDao;
+          font-weight: 400;
+          color: #e2b066;
+          position: relative;
+          display: inline-flex;
+          top: 2px;
+          left: -2px;
         }
+      }
 
-        .line {
+      .item-body {
+        position: relative;
+        display: inline-flex;
+        width: 162px;
+        // height: 100%;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        font-size: 14px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        margin: 20px 0;
+
+        .left {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          // position: absolute;
+          // transition: all .15s linear;
+          // top: 0;
+          // width: 100%;
+          width: 47px;
+          height: 47px;
+          margin-left: -8px;
+          margin-right: 10px;
+          background-repeat: no-repeat;
+          background-size: auto;
+          background-position: center;
+          transition: all 0.18s linear;
+
+          &::before {
+            content: "";
             position: absolute;
-            width: 2px;
-            height: 120px;
-            top: 25px;
-            left: 180px;
-            background: url("~@screen/images/divide.svg");
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
+            width: 45px;
+            height: 45px;
+            border: 1px solid rgba(0, 209, 255, 0.5);
+            background-color: var(--bgColor);
+            border-radius: 50%;
+            z-index: -1;
+          }
         }
 
+        .text-right {
+          display: inline-flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: space-between;
 
+          .text {
+            margin-top: 7px;
+            // margin: 5px;
+          }
+        }
 
-        // .item::after {
-        //     content: "";
-        //     position: absolute;
-        //     display: inline-flex;
-        //     top: 20px;
-        //     right: 0px;
-        //     width: 1px;
-        //     height: 116px;
-        //     background: linear-gradient(90deg, rgba(8, 135, 182, 0.2), rgba(0, 100, 137, 1), rgba(3, 60, 81, 0.2));
-        //     opacity: 1;
-        //     flex-direction: row;
-        //     justify-content: center;
-        //     align-items: center;
-        // }
+        span.num {
+          font-size: 18px;
+          font-family: PangMenZhengDao;
+          font-weight: 400;
+          color: #e2b066;
+        }
+      }
+    }
 
+    .line {
+      position: absolute;
+      width: 2px;
+      height: 120px;
+      top: 25px;
+      left: 180px;
+      background: url("~@screen/images/divide.svg");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
     }
 
+    // .item::after {
+    //     content: "";
+    //     position: absolute;
+    //     display: inline-flex;
+    //     top: 20px;
+    //     right: 0px;
+    //     width: 1px;
+    //     height: 116px;
+    //     background: linear-gradient(90deg, rgba(8, 135, 182, 0.2), rgba(0, 100, 137, 1), rgba(3, 60, 81, 0.2));
+    //     opacity: 1;
+    //     flex-direction: row;
+    //     justify-content: center;
+    //     align-items: center;
+    // }
+  }
 }
 </style>
-  
\ No newline at end of file
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 5aaab11d..6722d795 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
@@ -3,6 +3,9 @@ import * as echarts from "echarts";
 let options = {
   tooltip: {
     trigger: "axis",
+    valueFormatter: (value) => {
+      return value + "%";
+    },
     // backgroundColor: "rgba(17,95,182,0.5)",
     // textStyle: {
     //   color: "#fff",
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 72b79553..a5f44980 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
@@ -65,20 +65,26 @@
               prop="deviceName"
               label="设备名称"
             ></el-table-column>
-            <el-table-column prop="deviceNo" label="设备桩号" width="">
+            <el-table-column prop="deviceNo" label="设备桩号">
             </el-table-column>
             <el-table-column
               prop="direction"
               label="方向"
               class-name="showClass"
-              width=""
             >
+              <template slot-scope="scope">
+                <span>{{
+                  scope.row.direction == "1"
+                    ? "上行"
+                    : scope.row.direction == "2"
+                    ? "中间"
+                    : "下行"
+                }}</span>
+              </template>
             </el-table-column>
-            <el-table-column prop="deviceIp" label="设备IP" width="">
-            </el-table-column>
-            <el-table-column prop="production" label="厂家" width="">
-            </el-table-column>
-            <el-table-column prop="type" label="型号" width="">
+            <el-table-column prop="deviceIp" label="设备IP"> </el-table-column>
+            <el-table-column prop="production" label="厂家"> </el-table-column>
+            <el-table-column prop="type" label="型号">
               <template slot-scope="scope">
                 <div v-if="scope.row.type == '1-1'">高清网络枪型固定摄像机</div>
                 <div v-if="scope.row.type == '1-2'">高清网络球形摄像机</div>
@@ -99,11 +105,9 @@
                 <div v-if="scope.row.type == '13'">智能设备箱</div>
               </template>
             </el-table-column>
-            <el-table-column prop="network" label="网段" width="">
-            </el-table-column>
-            <el-table-column prop="time" label="监测时间" width="">
-            </el-table-column>
-            <el-table-column prop="deviceStatus" label="设备状态" width="">
+            <!-- <el-table-column prop="network" label="网段"> </el-table-column> -->
+            <el-table-column prop="time" label="监测时间"> </el-table-column>
+            <el-table-column prop="deviceStatus" label="设备状态">
               <template slot-scope="scope">
                 <div v-if="scope.row.deviceStatus == 1">在线</div>
                 <div v-if="scope.row.deviceStatus == 0" style="color: #bbb">
@@ -422,7 +426,7 @@ export default {
 .floatEmpty {
   position: absolute;
   z-index: 100;
-  background: rgba($color: #000000, $alpha: 0.2);
+  // background: rgba($color: #000000, $alpha: 0.2);
   left: 0;
   top: 0;
   right: 0;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue
index 42d071a2..139ae313 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue
@@ -11,14 +11,14 @@
           style="width: 140px"
           placeholder="请选择"
         />
-        <el-quarter-picker
+        <!-- <el-quarter-picker
           size="mini"
           class="selectRoad"
           style="width: 180px"
           v-if="year == 'quarter'"
           v-model="quarter"
           aria-placeholder="请选季度"
-        />
+        /> -->
 
         <el-button
           type="primary"
@@ -97,7 +97,7 @@ export default {
       margin-bottom: 10px;
       left: 20px;
       top: 2px;
-      z-index: 0;
+      z-index: 9;
 
       div {
         white-space: nowrap;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue
index aeace05d..cbd48f3a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue
@@ -1,25 +1,16 @@
 <template>
   <div class="congestion">
-    <WgtTitle :title="'月发布渠道趋势分析'"></WgtTitle>
+    <WgtTitle title="月发布渠道趋势分析"></WgtTitle>
     <div class="board">
       <div class="searchPanel_1">
         <el-date-picker
           size="mini"
-          v-if="year != 'quarter'"
           class="selectRoad"
           v-model="dateTime"
           style="width: 140px"
           type="month"
           placeholder="请选择"
         />
-        <el-quarter-picker
-          size="mini"
-          class="selectRoad"
-          style="width: 180px"
-          v-if="year == 'quarter'"
-          v-model="quarter"
-          aria-placeholder="请选季度"
-        />
 
         <el-button
           type="primary"
@@ -99,7 +90,7 @@ export default {
       margin-bottom: 10px;
       left: 20px;
       top: 2px;
-      z-index: 0;
+      z-index: 9;
 
       div {
         white-space: nowrap;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/topComponent/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/topComponent/index.vue
index 5a723a62..38d661a2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/topComponent/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/topComponent/index.vue
@@ -1,246 +1,252 @@
 <template>
-    <div class='TrafficFlow'>
-      <section class="foot">
-        <div class="item keep-ratio" v-for="(item,index) in topDatas" >
-            <div class="item-title" >
-               <span> {{ item.text }} <span class="num">{{ item.textNum }}</span>{{ item.textEnd }}</span>
+  <div class="TrafficFlow">
+    <section class="foot">
+      <div class="item keep-ratio" v-for="(item, index) in topDatas">
+        <div class="item-title">
+          <span>
+            {{ item.text }} <span class="num">{{ item.textNum }}</span
+            >{{ item.textEnd }}</span
+          >
+        </div>
+        <div class="item-body">
+          <div class="">
+            <img :src="item.icon" />
+          </div>
+          <div class="text-right">
+            <div class="topText">
+              已审核 <span class="num">{{ item.reviewed }}</span> 起
             </div>
-            <div class="item-body" >
-                <div class="icon-left" >
-                    <img :src="item.icon"  />
-                </div>
-                <div class="text-right" >
-                    <div class="topText" >
-                        已审核 <span  class="num">{{ item.reviewed }}</span> 起
-                    </div>
-                    <div  class="bottomText"  >
-                        未审核 <span  class="num" >{{ item.noReviewed }}</span> 起
-                    </div>                   
-                </div>
+            <div class="bottomText">
+              未审核 <span class="num">{{ item.noReviewed }}</span> 起
             </div>
+          </div>
         </div>
-      </section>
-    </div>
-  </template>
-  
-  <script> 
- 
-  export default {
-    name: 'publicService',
-    components: {
-     
-    },
-    data(){
-        return {
-            activeName:"first",
-            topDatas:[ {
-                text:"其他事件",
-                textEnd:"起",
-                textNum:9,
-                icon:require("./assets/其他事件.png"),
-                reviewed:4,
-                noReviewed:5
-            },{
-                text:"路障清除",
-                textEnd:"起",
-                textNum:9,
-                icon:require("./assets/路障清除.png"),
-                reviewed:4,
-                noReviewed:5
-            },{
-                text:"车辆故障",
-                textEnd:"起",
-                textNum:9,
-                icon:require("./assets/车辆故障.png"),
-                reviewed:4,
-                noReviewed:5
-            },{
-                text:"服务区异常",
-                textEnd:"起",
-                textNum:9,
-                icon:require("./assets/服务区异常.png"),
-                reviewed:4,
-                noReviewed:5
-            },{
-                text:"交通管制",
-                textEnd:"起",
-                textNum:9,
-                icon:require("./assets/交通管制.png"),
-                reviewed:4,
-                noReviewed:5
-            },{
-                text:"交通拥堵",
-                textEnd:"起",
-                textNum:9,
-                icon:require("./assets/交通拥堵.png"),
-                reviewed:4,
-                noReviewed:5
-            },{
-                text:"施工建设",
-                textEnd:"起",
-                textNum:9,
-                icon:require("./assets/施工建设.png"),
-                reviewed:4,
-                noReviewed:5
-            },{
-                text:"异常天气",
-                textEnd:"起",
-                textNum:9,
-                icon:require("./assets/异常天气.png"),
-                reviewed:4,
-                noReviewed:5
-            },{
-                text:"交通事故",
-                textEnd:"起",
-                textNum:9,
-                icon:require("./assets/交通事故.png"),
-                reviewed:4,
-                noReviewed:5
-            }
-              
-            ]
-        }
-    },
-    methods:{
-      changeTabs(){
-         
-      }
-    }
-    
-  }
-  </script>
-  
-  <style lang='scss' scoped>
-
-   ::v-deep .el-tabs__item{
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "publicService",
+  components: {},
+  data() {
+    return {
+      activeName: "first",
+      topDatas: [
+        {
+          text: "其他事件",
+          textEnd: "起",
+          textNum: 9,
+          icon: require("./assets/其他事件.png"),
+          reviewed: 4,
+          noReviewed: 5,
+        },
+        {
+          text: "路障清除",
+          textEnd: "起",
+          textNum: 9,
+          icon: require("./assets/路障清除.png"),
+          reviewed: 4,
+          noReviewed: 5,
+        },
+        {
+          text: "车辆故障",
+          textEnd: "起",
+          textNum: 9,
+          icon: require("./assets/车辆故障.png"),
+          reviewed: 4,
+          noReviewed: 5,
+        },
+        {
+          text: "服务区异常",
+          textEnd: "起",
+          textNum: 9,
+          icon: require("./assets/服务区异常.png"),
+          reviewed: 4,
+          noReviewed: 5,
+        },
+        {
+          text: "交通管制",
+          textEnd: "起",
+          textNum: 9,
+          icon: require("./assets/交通管制.png"),
+          reviewed: 4,
+          noReviewed: 5,
+        },
+        {
+          text: "交通拥堵",
+          textEnd: "起",
+          textNum: 9,
+          icon: require("./assets/交通拥堵.png"),
+          reviewed: 4,
+          noReviewed: 5,
+        },
+        {
+          text: "施工建设",
+          textEnd: "起",
+          textNum: 9,
+          icon: require("./assets/施工建设.png"),
+          reviewed: 4,
+          noReviewed: 5,
+        },
+        {
+          text: "异常天气",
+          textEnd: "起",
+          textNum: 9,
+          icon: require("./assets/异常天气.png"),
+          reviewed: 4,
+          noReviewed: 5,
+        },
+        {
+          text: "交通事故",
+          textEnd: "起",
+          textNum: 9,
+          icon: require("./assets/交通事故.png"),
+          reviewed: 4,
+          noReviewed: 5,
+        },
+      ],
+    };
+  },
+  methods: {
+    changeTabs() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-tabs__item {
+  display: inline-flex;
+  justify-content: center;
+  font-size: 16px;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+  min-width: 128px;
+  position: relative;
+  left: 10px;
+}
+
+::v-deep .el-tabs__active-bar {
+  min-width: 128px;
+}
+
+::v-deep .el-tabs__nav-wrap::after {
+  background-color: #133242;
+  opacity: 0.1;
+}
+
+.footTabs {
+  display: inline;
+  width: 99%;
+}
+
+.TrafficFlow {
+  width: 100%;
+  height: 182px;
+  display: inline-flex;
+  position: relative;
+  z-index: 6;
+  color: white;
+  background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425804 93%);
+  border-radius: 0px 0px 0px 0px;
+
+  .foot {
     display: inline-flex;
-    justify-content: center;
-    font-size: 16px;
-    font-family: PingFang SC, PingFang SC;
-    font-weight: 500;
-    color: #FFFFFF;
-    min-width:128px;
-    position: relative;
-    left:10px;
-   }
-
-   ::v-deep .el-tabs__active-bar {
-    min-width:128px;
-   }
-
-   ::v-deep .el-tabs__nav-wrap::after {
-    background-color: #133242;
-    opacity: 0.1;
-   }
-
-   .footTabs {
-     display: inline;
-     width:99%;
-
-   }
-
-  .TrafficFlow {
+    flex-direction: row;
     width: 100%;
-    height: 182px;
-    display: inline-flex;
-    position: relative;
-    z-index: 6;
-    color: white;
-    background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #06425804 93%);
-    border-radius: 0px 0px 0px 0px;
-   
-    .foot {
+    height: 100%;
+
+    .item {
+      position: relative;
+      display: inline-flex;
+      width: calc(100% / 9);
+      height: 100%;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .item-title {
+        position: relative;
         display: inline-flex;
+        width: 162px;
+        height: 35px;
         flex-direction: row;
-        width:100%;
-        height:100%;
-
-        .item {
-            position: relative;
-            display: inline-flex;
-            width: calc(100% / 9);
-            height:100%;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-
-            .item-title {
-                position: relative;
-                display: inline-flex;
-                width: 162px;
-                height:35px;
-                flex-direction: row;
-                justify-content: center;
-                align-items: center; 
-                background: linear-gradient(180deg, rgba(3,60,82,0) 0%, #033C52 100%);
-                border-radius: 4px 4px 4px 4px;
-                font-size: 16px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 500;
-                color: #FFFFFF;
-
-                span.num {
-                    font-size: 22px;
-                    font-family: PangMenZhengDao;
-                    font-weight: 400;
-                    color: #E2B066;
-                    display: inline-flex;
-                    position: relative;
-                    left:-2px;
-                    top:1px;
-                }
-            }
-
-            .item-body {
-                position: relative;
-                display: inline-flex;
-                width: 162px;
-                height:100%;
-                flex-direction: row;
-                justify-content: center;
-                align-items: center; 
-                font-size: 14px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 400;
-                color: #FFFFFF;
-                margin-top:15px;
-
-                img {
-                    width:47px;
-                    height:47px;
-                    margin:0 10px;
-                    margin-right:20px;
-                }
-
-                
-                span.num {
-                    font-size: 18px;
-                    font-family: PangMenZhengDao;
-                    font-weight: 400;
-                    color: #E2B066;
-                }
-
-            }
+        justify-content: center;
+        align-items: center;
+        background: linear-gradient(
+          180deg,
+          rgba(3, 60, 82, 0) 0%,
+          #033c52 100%
+        );
+        border-radius: 4px 4px 4px 4px;
+        font-size: 16px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+
+        span.num {
+          font-size: 22px;
+          font-family: PangMenZhengDao;
+          font-weight: 400;
+          color: #e2b066;
+          display: inline-flex;
+          position: relative;
+          left: -2px;
+          top: 1px;
+        }
+      }
 
+      .item-body {
+        position: relative;
+        display: inline-flex;
+        width: 162px;
+        height: 100%;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        font-size: 14px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        margin-top: 15px;
+
+        img {
+          width: 47px;
+          height: 47px;
+          margin: 0 10px;
+          margin-right: 20px;
         }
 
-        .item::after {
-            content: "";
-            position: absolute;
-            display: inline-flex;
-            top:20px;
-            right:0px;
-            width: 1px;
-            height: 116px;
-            background: linear-gradient(90deg, rgba(8, 135, 182, 0.2), rgba(0, 100, 137, 1), rgba(3, 60, 81, 0.2));
-            opacity: 1;
-            flex-direction: row;
-            justify-content: center;
-            align-items: center; 
+        span.num {
+          font-size: 18px;
+          font-family: PangMenZhengDao;
+          font-weight: 400;
+          color: #e2b066;
         }
+      }
+    }
 
+    .item::after {
+      content: "";
+      position: absolute;
+      display: inline-flex;
+      top: 20px;
+      right: 0px;
+      width: 1px;
+      height: 116px;
+      background: linear-gradient(
+        90deg,
+        rgba(8, 135, 182, 0.2),
+        rgba(0, 100, 137, 1),
+        rgba(3, 60, 81, 0.2)
+      );
+      opacity: 1;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
     }
-    
   }
-  </style>
-  
\ No newline at end of file
+}
+</style>