emm...

src/views/screen/engineering/currentArea.vue

@@ -264,6 +264,9 @@ export default {
   watch:{
   },
   data() {
+    return{
+
+    }
   },
   created() {
   },

src/views/screen/engineering/issueListDia.vue

@@ -11,24 +11,22 @@
       </div>
       <i class="el-icon-circle-close" style="position: absolute;right: 10px;color: #00ffff;font-size: 25px;cursor: pointer" @click="close"></i>
     </div>
-    <div class="table-cont">
-      <div class="table-top">
-        <div class="fir">时间</div>
-        <div class="snd">标题</div>
-        <div class="fir">问题内容</div>
-        <div class="snd">发起人</div>
-        <div class="fir">问题状态</div>
-        <div class="snd">操作</div>
+    <div class="flex-container">
+      <div class="header">
+        <div class="flex-column">时间</div>
+        <div class="flex-column">标题</div>
+        <div class="flex-column">问题内容</div>
+        <div class="flex-column">发起人</div>
+        <div class="flex-column">问题状态</div>
+        <div class="flex-column">操作</div>
       </div>
-      <div class="table-bot">
-        <div class="table-list" v-for="(item,index) in dataList" :key="index" @click="choose()">
-          <div class="fir"><div class="said"></div>{{item.a}}</div>
-          <div class="snd">{{item.b}}</div>
-          <div class="snd">{{item.c}}</div>
-          <div class="snd">{{item.d}}</div>
-          <div class="snd">{{item.e}}</div>
-          <div class="snd">{{item.f}}</div>
-        </div>
+      <div class="flex-row" v-for="(item,index) in dataList" :key="index" @click="choose()">
+        <div class="flex-column">{{item.a}}</div>
+        <div class="flex-column">{{item.b}}</div>
+        <div class="flex-column">{{item.c}}</div>
+        <div class="flex-column">{{item.d}}</div>
+        <div class="flex-column">{{item.e}}</div>
+        <div class="flex-column">{{item.f}}</div>
       </div>
     </div>
     <div style="width: 100%;display: flex;justify-content: center;align-items: center;margin-top: 10px;">
@@ -83,12 +81,42 @@ export default {
 .me::-webkit-scrollbar {
   display: none;
 }
-.said{
-  width: 2px;
-  margin-right: 8px;
-  height: 16px;
-  background-color: #00FFFF;
+
+.flex-container {
+  width: 100%;
+}
+
+.header{
+  display: flex;  /* 每行使用 flexbox 布局 */
+  position: relative;
+  background-color: rgba(21, 105, 107, 0.5);
+}
+
+.flex-row {
+  display: flex;  /* 每行使用 flexbox 布局 */
+  position: relative;
+}
+
+.flex-row::before{
+  content: "";
+  height: 15px;
+  border-left: 2px #00FFFF solid;
+  position: absolute;
+  left: 0;
+  top: 10px
 }
+
+.flex-column {
+  flex: 1;  /* 每列均分可用空间 */
+  padding: 8px 12px;
+  text-align: left;  /* 左对齐文本 */
+  color: white;
+}
+
+.header .flex-column {
+  color: #00ffff;
+}
+
 .table-cont{
   width:100%;
 
@@ -177,7 +205,6 @@ export default {
   padding-top: 5px;
   width: 668px;
   height: 432px;
-  background-color: rgba(21, 105, 107, 0.5);
   box-shadow: 0 0 15px 5px rgba(21, 105, 107, 1); /* 发光效果 */
 }
 </style>

src/views/screen/engineering/main.vue

@@ -47,11 +47,6 @@
           <div class="desc">{{ item.name }}</div>
         </div>
       </div> -->
-      <province
-        v-if="showMap"
-        ref="province"
-        @mapClick="onMapClick"
-      ></province>
       <div
         v-if="showLocal"
         class="img-area flex-row align-items-center flex-center"
@@ -507,6 +502,7 @@ export default {
     }
   }
   .middle {
+    background: url('../../../assets/camera/project_map.png') no-repeat center;
     display: flex;
     flex: 1;
     align-items: center;

src/views/screen/official/carCost.vue

@@ -4,40 +4,38 @@
     <div class="close-btn" @click="close"></div>
     <div class="content-area">
       <div class="content">
-        <div class="table-cont">
-          <div class="table-top">
-            <div class="fir">配置使用单位</div>
-            <div class="snd">总车辆数</div>
-            <div class="fir">总成本</div>
-            <div class="snd">单车平均成本</div>
-            <div class="fir">超出平均成本车辆</div>
-            <div class="snd">油费</div>
-            <div class="fir">单车最高成本</div>
-            <div class="snd">充电费</div>
-            <div class="fir">保险费</div>
-            <div class="snd">年检费</div>
-            <div class="snd">过路过桥费</div>
-            <div class="snd">维修保养费</div>
-            <div class="snd">车装车饰费</div>
-            <div class="snd">其他费用</div>
+        <div class="flex-container">
+          <div class="header">
+            <div class="flex-column">配置使用单位</div>
+            <div class="flex-column">总车辆数</div>
+            <div class="flex-column">总成本</div>
+            <div class="flex-column">单车平均成本</div>
+            <div class="flex-column">超出平均成本车辆</div>
+            <div class="flex-column">油费</div>
+            <div class="flex-column">单车最高成本</div>
+            <div class="flex-column">充电费</div>
+            <div class="flex-column">保险费</div>
+            <div class="flex-column">年检费</div>
+            <div class="flex-column">过路过桥费</div>
+            <div class="flex-column">维修保养费</div>
+            <div class="flex-column">车装车饰费</div>
+            <div class="flex-column">其他费用</div>
           </div>
-          <div class="table-bot">
-            <div class="table-list" v-for="(item,index) in unitDataList" :key="index" @click="choose()">
-              <div class="fir"><div class="said"></div>{{item.a}}</div>
-              <div class="snd">{{item.b}}</div>
-              <div class="snd">{{item.c}}</div>
-              <div class="snd">{{item.d}}</div>
-              <div class="snd">{{item.e}}</div>
-              <div class="snd">{{item.f}}</div>
-              <div class="snd">{{item.g}}</div>
-              <div class="snd">{{item.h}}</div>
-              <div class="snd">{{item.i}}</div>
-              <div class="snd">{{item.j}}</div>
-              <div class="snd">{{item.k}}</div>
-              <div class="snd">{{item.l}}</div>
-              <div class="snd">{{item.m}}</div>
-              <div class="snd">{{item.n}}</div>
-            </div>
+          <div class="flex-row" v-for="(item,index) in dataList" :key="index" @click="choose()">
+            <div class="flex-column">{{item.a}}</div>
+            <div class="flex-column">{{item.b}}</div>
+            <div class="flex-column">{{item.c}}</div>
+            <div class="flex-column">{{item.d}}</div>
+            <div class="flex-column">{{item.e}}</div>
+            <div class="flex-column">{{item.f}}</div>
+            <div class="flex-column">{{item.g}}</div>
+            <div class="flex-column">{{item.h}}</div>
+            <div class="flex-column">{{item.i}}</div>
+            <div class="flex-column">{{item.j}}</div>
+            <div class="flex-column">{{item.k}}</div>
+            <div class="flex-column">{{item.l}}</div>
+            <div class="flex-column">{{item.m}}</div>
+            <div class="flex-column">{{item.n}}</div>
           </div>
         </div>
       </div>
@@ -63,7 +61,7 @@ export default {
   },
   data() {
     return {
-      unitDataList: [
+      dataList: [
         {
           a: "国网山西省电力公司",
           b: 56,
@@ -193,76 +191,42 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.said{
-  width: 2px;
-  margin-right: 8px;
-  height: 16px;
-  background-color: #00FFFF;
+.flex-container {
+  width: 100%;
 }
-.table-cont{
-  width:100%;
 
-  .table-top{
-    width:100%;
-    height: 26px;
-    background: url("../../../assets/images/building_guarantee/img_11.png") no-repeat;
-    background-size: 100% 100%;
-    padding:0 4px 0 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size:14px;
-    color:#00FFFF;
-  }
-  .table-bot{
-    width:100%;
-    height: 300px;
-    overflow: auto;
-    .table-list{
-      margin-bottom: 10px;
-      align-items: center;
-      background: radial-gradient(
-          190% 71% at 50% 49%,
-          rgba(21, 105, 107, 0.54) 0%,
-          rgba(27, 95, 97, 0) 100%
-      );
-      width:100%;
-      height:30px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size:14px;
-      color:#FFFFFF;
-      font-weight: 500;
-    }
-    .table-list:hover{
-      background: radial-gradient(
-          190% 71% at 50% 49%,
-          rgba(47, 204, 208, 0.74) 0%,
-          rgba(27, 95, 97, 0) 100%
-      );
-      cursor: pointer;
-    }
-  }
-  .table-bot::-webkit-scrollbar {
-    display: none; /* 隐藏滚动条 */
-  }
+.header{
+  display: flex;  /* 每行使用 flexbox 布局 */
+  position: relative;
+  background-color: rgba(21, 105, 107, 0.5);
+}
 
-  .fir{
-    width:40%;
-    text-align: left;
-    display: flex;
-  }
-  .snd{
-    width:30%;
-    text-align: left;
-  }
-  .thd{
-    width:30%;
-    text-align: left;
-  }
+.flex-row {
+  display: flex;  /* 每行使用 flexbox 布局 */
+  position: relative;
 }
 
+.flex-row::before{
+  content: "";
+  height: 15px;
+  border-left: 2px #00FFFF solid;
+  position: absolute;
+  left: 0;
+  top: 10px
+}
+
+.flex-column {
+  flex: 1;  /* 每列均分可用空间 */
+  padding: 8px 12px;
+  text-align: left;  /* 左对齐文本 */
+  color: white;
+}
+
+.header .flex-column {
+  color: #00ffff;
+}
+
+
 .el-scrollbar {
   background: #15696b;
   border: 1px solid #00ffff;
@@ -285,8 +249,8 @@ export default {
 }
 .data-weeks-foods {
   position: relative;
-  width: 668px;
-  height: 432px;
+  width: 1336px;
+  height: 864px;
   background: url("../../../assets/images/main/dialog-bg.png") no-repeat;
   background-size: cover;
   .close-btn {
@@ -336,6 +300,11 @@ export default {
   }
 
   .content {
+    background: radial-gradient(
+        190% 71% at 50% 49%,
+        rgba(21, 105, 107, 0.54) 0%,
+        rgba(27, 95, 97, 0) 100%
+    );
     width: 100%;
     display: flex;
     flex-direction: row;

src/views/screen/official/carHealth.vue

@@ -0,0 +1,401 @@
+<template>
+  <div class="main-data data-weeks-foods">
+    <div class="title-area">单位列表分析</div>
+    <div class="close-btn" @click="close"></div>
+    <div class="content-area">
+      <div class="content">
+        <div class="flex-container">
+          <div class="header">
+            <div class="flex-column">单位名称</div>
+            <div class="flex-column">车辆总数</div>
+            <div class="flex-column">健康得分</div>
+            <div class="flex-column">品牌平均得分</div>
+            <div class="flex-column">车龄平均得分</div>
+            <div class="flex-column">里程(万公里)</div>
+            <div class="flex-column">里程平均得分</div>
+            <div class="flex-column">维修费用(元)</div>
+            <div class="flex-column">维修费用平均得分</div>
+            <div class="flex-column">车况平均得分</div>
+          </div>
+          <div class="flex-row" v-for="(item,index) in dataList" :key="index" @click="choose()">
+            <div class="flex-column">{{item.a}}</div>
+            <div class="flex-column">{{item.b}}</div>
+            <div class="flex-column">{{item.c}}</div>
+            <div class="flex-column">{{item.d}}</div>
+            <div class="flex-column">{{item.e}}</div>
+            <div class="flex-column">{{item.f}}</div>
+            <div class="flex-column">{{item.g}}</div>
+            <div class="flex-column">{{item.h}}</div>
+            <div class="flex-column">{{item.i}}</div>
+            <div class="flex-column">{{item.j}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getFoodsList } from "@/api/screen/service";
+import pinyin from "../data/pinyin.js";
+
+export default {
+  name: "CarCost",
+  props: {
+    week: {
+      type: String,
+      default: "",
+    },
+    appOrg: {
+      type: String,
+      default: "10001",
+    },
+  },
+  data() {
+    return {
+      dataList: [
+        {
+          a: "国网山西省电力公司",
+          b: 56,
+          c: 46,
+          d: 11,
+          e: 56,
+          f: 46,
+          g: 11,
+          h: 56,
+          i: 46,
+          j: 11,
+          k: 56,
+          l: 46,
+          m: 11,
+          n: 55
+        },
+        {
+          a: "国网山西省电力公司",
+          b: 56,
+          c: 46,
+          d: 11,
+          e: 56,
+          f: 46,
+          g: 11,
+          h: 56,
+          i: 46,
+          j: 11,
+          k: 56,
+          l: 46,
+          m: 11,
+          n: 55
+        },
+        {
+          a: "国网山西省电力公司",
+          b: 56,
+          c: 46,
+          d: 11,
+          e: 56,
+          f: 46,
+          g: 11,
+          h: 56,
+          i: 46,
+          j: 11,
+          k: 56,
+          l: 46,
+          m: 11,
+          n: 55
+        },
+        {
+          a: "国网山西省电力公司",
+          b: 56,
+          c: 46,
+          d: 11,
+          e: 56,
+          f: 46,
+          g: 11,
+          h: 56,
+          i: 46,
+          j: 11,
+          k: 56,
+          l: 46,
+          m: 11,
+          n: 55
+        },
+        {
+          a: "国网山西省电力公司",
+          b: 56,
+          c: 46,
+          d: 11,
+          e: 56,
+          f: 46,
+          g: 11,
+          h: 56,
+          i: 46,
+          j: 11,
+          k: 56,
+          l: 46,
+          m: 11,
+          n: 55
+        },
+        {
+          a: "国网山西省电力公司",
+          b: 56,
+          c: 46,
+          d: 11,
+          e: 56,
+          f: 46,
+          g: 11,
+          h: 56,
+          i: 46,
+          j: 11,
+          k: 56,
+          l: 46,
+          m: 11,
+          n: 55
+        },
+        {
+          a: "国网山西省电力公司",
+          b: 56,
+          c: 46,
+          d: 11,
+          e: 56,
+          f: 46,
+          g: 11,
+          h: 56,
+          i: 46,
+          j: 11,
+          k: 56,
+          l: 46,
+          m: 11,
+          n: 55
+        },
+      ],
+    };
+  },
+  mounted() {},
+  methods: {
+    choose(){
+      this.$emit("choose");
+    },
+
+    close() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.flex-container {
+  width: 100%;
+}
+
+.header{
+  display: flex;  /* 每行使用 flexbox 布局 */
+  position: relative;
+  background-color: rgba(21, 105, 107, 0.5);
+}
+
+.flex-row {
+  display: flex;  /* 每行使用 flexbox 布局 */
+  position: relative;
+}
+
+.flex-row::before{
+  content: "";
+  height: 15px;
+  border-left: 2px #00FFFF solid;
+  position: absolute;
+  left: 0;
+  top: 10px
+}
+
+.flex-column {
+  flex: 1;  /* 每列均分可用空间 */
+  padding: 8px 12px;
+  text-align: left;  /* 左对齐文本 */
+  color: white;
+}
+
+.header .flex-column {
+  color: #00ffff;
+}
+
+
+.el-scrollbar {
+  background: #15696b;
+  border: 1px solid #00ffff;
+  ul {
+    li {
+      color: #fff;
+    }
+  }
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background: #15696b;
+  color: #00ffff;
+}
+.el-select-dropdown__item.selected {
+  color: #00ffff;
+}
+.el-select .el-input .el-select__caret {
+  display: none;
+}
+.data-weeks-foods {
+  position: relative;
+  width: 1336px;
+  height: 864px;
+  background: url("../../../assets/images/main/dialog-bg.png") no-repeat;
+  background-size: cover;
+  .close-btn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+  }
+  .choose-area {
+    position: absolute;
+    right: 100px;
+    top: 7px;
+    width: 80.05px;
+    height: 30px;
+    line-height: 30px;
+    padding-left: 15px;
+    font-size: 14px;
+    color: #00ffff;
+    background: url("../../../assets/images/main/choose_short.png") no-repeat;
+    cursor: pointer;
+  }
+  .choose-area.choose-week{
+    right: 200px;
+  }
+  .content-area {
+    display: flex;
+    flex-direction: column;
+    padding: 15px 20px 0 15px;
+    padding-top: 0 !important;
+  }
+
+  .content-title {
+    width: 515px;
+    height: 26px;
+    background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
+    background-size: 100% 100%;
+    font-family: "PingFangSC";
+    font-size: 16px;
+    font-weight: bold;
+    color: #00ffff;
+    padding-left: 17px;
+    .title {
+      display: block;
+    }
+  }
+
+  .content {
+    background: radial-gradient(
+        190% 71% at 50% 49%,
+        rgba(21, 105, 107, 0.54) 0%,
+        rgba(27, 95, 97, 0) 100%
+    );
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .data-list {
+      background: radial-gradient(
+          190% 71% at 50% 49%,
+          rgba(21, 105, 107, 0.54) 0%,
+          rgba(27, 95, 97, 0) 100%
+      );
+      width: 100%;
+      height: 492px;
+      padding: 20px;
+      overflow: auto;
+      white-space: pre-wrap;
+      .data-item {
+        display: inline-block;
+        color: #00ffff;
+        font-weight: bold;
+        margin: 0 20px 20px 0;
+        font-size: 14px;
+        img {
+          width: 80px;
+          height: 80px;
+          object-fit: cover;
+        }
+        .name {
+          width: 80px;
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .title-format {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    img {
+      width: 6px;
+      height: 24px;
+      margin-right: 6px;
+    }
+    .title-info {
+      display: flex;
+      flex-direction: column;
+      font-size: 12px;
+      color: #ffffff;
+      .title-en {
+        font-size: 8px;
+        color: #ffffff;
+        opacity: 0.4;
+      }
+    }
+  }
+
+  .choose-area {
+    .el-select {
+      width: 90%;
+    }
+    .el-input {
+      input {
+        background: rgba(255, 255, 255, 0);
+        color: #00ffff;
+        border: none;
+        padding: 0;
+        width: 30px;
+      }
+    }
+  }
+
+  .no-data{
+    text-align: center;
+    color: #62ffe5;
+    font-size: 25px;
+    margin-top: 150px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    //滑块部分
+    // border-radius: 5px;
+    background-color: #58cbbb;
+  }
+
+  ::-webkit-scrollbar-track {
+    //轨道部分
+    // box-shadow: inset 0 0 5px #ddd;
+    background: #ddd;
+    // border-radius: 5px;
+  }
+}
+</style>
+

src/views/screen/official/carWarningDialog.vue

@@ -73,23 +73,43 @@
               <span class="title" style="transform: translate(0,-4px);">单位成本分布情况</span>
             </div>
           </div>
-          <div style="overflow: auto;width: 100%;display: flex;flex-direction: column">
-            <div style="background: url('../../../assets/images/building_guarantee/img_11.png') no-repeat;width: 750px;display: flex;justify-content: space-between;color: #00FFFF;margin-bottom: 20px">
-              <div class="row"><span style=" width: 2px;margin-right: 8px;"></span>配置使用单位</div>
-              <div class="row">总车辆数</div>
-              <div class="row">总成本</div>
-              <div class="row">单车平均成本</div>
-              <div class="row">单位使用数量</div>
-              <div class="row">操作</div>
-            </div>
-            <div style="display: flex;justify-content: space-between;color: white;margin-bottom: 10px" v-for="(item,index) in dataList" :key="index" @click="choose()">
-              <div class="row"><span class="said"></span>{{item.a}}</div>
-              <div class="row">{{item.b}}</div>
-              <div class="row">{{item.c}}</div>
-              <div class="row">{{item.d}}</div>
-              <div class="row">{{item.e}}</div>
-              <div class="row">{{item.f}}</div>
+
+          <div style="overflow: auto;width: 100%;display: flex;">
+            <div class="flex-container">
+              <div class="header">
+                <div class="flex-column">配置使用单位</div>
+                <div class="flex-column">总车辆数</div>
+                <div class="flex-column">总成本</div>
+                <div class="flex-column">单车平均成本</div>
+                <div class="flex-column">超出平均成本车辆</div>
+                <div class="flex-column">油费</div>
+                <div class="flex-column">单车最高成本</div>
+                <div class="flex-column">充电费</div>
+                <div class="flex-column">保险费</div>
+                <div class="flex-column">年检费</div>
+                <div class="flex-column">过路过桥费</div>
+                <div class="flex-column">维修保养费</div>
+                <div class="flex-column">车装车饰费</div>
+                <div class="flex-column">其他费用</div>
+              </div>
+              <div class="flex-row" v-for="(item,index) in dataList" :key="index" @click="choose()">
+                <div class="flex-column">{{item.a}}</div>
+                <div class="flex-column">{{item.b}}</div>
+                <div class="flex-column">{{item.c}}</div>
+                <div class="flex-column">{{item.d}}</div>
+                <div class="flex-column">{{item.e}}</div>
+                <div class="flex-column">{{item.f}}</div>
+                <div class="flex-column">{{item.g}}</div>
+                <div class="flex-column">{{item.h}}</div>
+                <div class="flex-column">{{item.i}}</div>
+                <div class="flex-column">{{item.j}}</div>
+                <div class="flex-column">{{item.k}}</div>
+                <div class="flex-column">{{item.l}}</div>
+                <div class="flex-column">{{item.m}}</div>
+                <div class="flex-column">{{item.n}}</div>
+              </div>
             </div>
+
           </div>
         </div>
       </div>
@@ -115,14 +135,118 @@ export default {
     return {
       // 公务用车资源情况
       dataList: [
-        {a:1,b:1,c:1,d:1,f:1,e:1},
-        {a:1,b:1,c:1,d:1,f:1,e:1},
-        {a:1,b:1,c:1,d:1,f:1,e:1},
-        {a:1,b:1,c:1,d:1,f:1,e:1},
-        {a:1,b:1,c:1,d:1,f:1,e:1},
-        {a:1,b:1,c:1,d:1,f:1,e:1},
-        {a:1,b:1,c:1,d:1,f:1,e:1},
-        {a:1,b:1,c:1,d:1,f:1,e:1},
+        {
+          a: "国网山西省电力公司",
+          b: 56,
+          c: 46,
+          d: 11,
+          e: 56,
+          f: 46,
+          g: 11,
+          h: 56,
+          i: 46,
+          j: 11,
+          k: 56,
+          l: 46,
+          m: 11,
+          n: 55
+        },
+        {
+          a: "国网山西省电力公司",
+          b: 56,
+          c: 46,
+          d: 11,
+          e: 56,
+          f: 46,
+          g: 11,
+          h: 56,
+          i: 46,
+          j: 11,
+          k: 56,
+          l: 46,
+          m: 11,
+          n: 55
+        },
+        {
+          a: "国网山西省电力公司",
+          b: 56,
+          c: 46,
+          d: 11,
+          e: 56,
+          f: 46,
+          g: 11,
+          h: 56,
+          i: 46,
+          j: 11,
+          k: 56,
+          l: 46,
+          m: 11,
+          n: 55
+        },
+        {
+          a: "国网山西省电力公司",
+          b: 56,
+          c: 46,
+          d: 11,
+          e: 56,
+          f: 46,
+          g: 11,
+          h: 56,
+          i: 46,
+          j: 11,
+          k: 56,
+          l: 46,
+          m: 11,
+          n: 55
+        },
+        {
+          a: "国网山西省电力公司",
+          b: 56,
+          c: 46,
+          d: 11,
+          e: 56,
+          f: 46,
+          g: 11,
+          h: 56,
+          i: 46,
+          j: 11,
+          k: 56,
+          l: 46,
+          m: 11,
+          n: 55
+        },
+        {
+          a: "国网山西省电力公司",
+          b: 56,
+          c: 46,
+          d: 11,
+          e: 56,
+          f: 46,
+          g: 11,
+          h: 56,
+          i: 46,
+          j: 11,
+          k: 56,
+          l: 46,
+          m: 11,
+          n: 55
+        },
+        {
+          a: "国网山西省电力公司",
+          b: 56,
+          c: 46,
+          d: 11,
+          e: 56,
+          f: 46,
+          g: 11,
+          h: 56,
+          i: 46,
+          j: 11,
+          k: 56,
+          l: 46,
+          m: 11,
+          n: 55
+        },
       ],
       pieData: [
         { value: 110, name: "燃油费" },
@@ -321,18 +445,48 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .row{
   flex: 1;  /* 每一列均分可用空间 */
   text-align: left;  /* 左对齐文本 */
 }
 
-.said{
-  width: 2px;
-  margin-right: 8px;
-  height: 16px;
-  background-color: #00FFFF;
+.flex-container {
+  width: 700px;
+}
+
+.header{
+  display: flex;  /* 每行使用 flexbox 布局 */
+  position: relative;
+  background-color: rgba(21, 105, 107, 0.5);
+}
+
+.flex-row {
+  display: flex;  /* 每行使用 flexbox 布局 */
+  position: relative;
 }
+
+.flex-row::before{
+  content: "";
+  height: 15px;
+  border-left: 2px #00FFFF solid;
+  position: absolute;
+  left: 0;
+  top: 10px
+}
+
+.flex-column {
+  white-space: nowrap;
+  flex: 1;  /* 每列均分可用空间 */
+  padding: 8px 12px;
+  text-align: left;  /* 左对齐文本 */
+  color: white;
+}
+
+.header .flex-column {
+  color: #00ffff;
+}
+
 .car-warning-dialog-area {
   overflow: hidden;
   width: 580px;

src/views/screen/official/main.vue

@@ -34,8 +34,7 @@
         </div>
       </div>
     </div>
-    <div class="middle">
-      <province v-if="showMap" ref="province" @mapClick="onMapClick"></province>
+    <div class="middle" style="">
       <img
         v-if="showLocal"
         class="build"
@@ -114,7 +113,7 @@
         </div>
       </div>
     </div>
-    <div class="right">
+    <div class="right" @click="chooseCost">
       <div class="right-cont" v-if="rightShow">
         <div
           class="right-top"
@@ -154,6 +153,8 @@
     >
       <terminal-data-dialog
         v-if="dialogType === 1"
+        @choose="chooseRes"
+        @chooseH="chooseHealth"
         @closeDialog="closeDialog"
       ></terminal-data-dialog>
       <car-warning-dialog
@@ -168,12 +169,15 @@
         <resource-list
           v-if="showRes === 1"
           @close="onCloseRes"
-          @choose="onChooseRes"
         ></resource-list>
         <car-cost
           v-if="showCost === 1"
           @close="onCloseCost"
         ></car-cost>
+        <car-health
+          v-if="showHealth === 1"
+          @close="onCloseHealth"
+        ></car-health>
       </div>
     </div>
   </div>
@@ -191,10 +195,12 @@ import CarStock from "../logistics/car/carStock.vue";
 import CarTerminal from "../logistics/car/carTerminal.vue";
 import company from "@/views/screen/data/company.json";
 import CarCost from '@/views/screen/official/carCost.vue'
+import CarHealth from '@/views/screen/official/carHealth.vue'
 
 export default {
   name: "OfficialMain",
   components: {
+    CarHealth,
     CarCost,
     ResourceList,
     Province,
@@ -222,6 +228,7 @@ export default {
       showC:false,
       showRes:0,
       showCost:0,
+      showHealth:0,
       leftShow: true,
       rightShow: true,
       dialogShow: false,
@@ -240,6 +247,16 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
+    chooseRes(){
+      this.closeDialog()
+      this.showC = true
+      this.showRes = 1
+    },
+    onCloseRes(){
+      this.showC = false
+      this.showRes = 0
+    },
+
     chooseCost(){
       this.closeDialog()
       this.showC = true
@@ -250,6 +267,16 @@ export default {
       this.showCost = 0
     },
 
+    chooseHealth(){
+      this.closeDialog()
+      this.showC = true
+      this.showHealth = 1
+    },
+    onCloseHealth(){
+      this.showC = false
+      this.showHealth = 0
+    },
+
     showDialog(type) {
       if (type < 4) {
         this.leftShow = false;
@@ -384,6 +411,7 @@ export default {
     }
   }
   .middle {
+    background: url('../../../assets/camera/public_map.png') no-repeat center;
     display: flex;
     flex: 1;
     align-items: center;
@@ -518,6 +546,19 @@ export default {
     display: flex;
     justify-content: flex-end;
   }
+  .dialog-2 {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.7);
+  }
 
   .build {
     margin: 0 auto;

src/views/screen/official/resourceList.vue

@@ -4,34 +4,32 @@
     <div class="close-btn" @click="close"></div>
     <div class="content-area">
       <div class="content">
-        <div class="table-cont">
-          <div class="table-top">
-            <div class="fir">序号</div>
-            <div class="snd">单位名称</div>
-            <div class="fir">品牌得分</div>
-            <div class="snd">车牌号码</div>
-            <div class="fir">车辆性质</div>
-            <div class="snd">健康得分</div>
-            <div class="fir">里程(万公里)</div>
-            <div class="snd">里程得分</div>
-            <div class="fir">维保费用</div>
-            <div class="snd">维保得分</div>
-            <div class="snd">车况得分</div>
+
+        <div class="flex-container">
+          <div class="header">
+            <div class="flex-column">序号</div>
+            <div class="flex-column">单位名称</div>
+            <div class="flex-column">品牌得分</div>
+            <div class="flex-column">车牌号码</div>
+            <div class="flex-column">车辆性质</div>
+            <div class="flex-column">健康得分</div>
+            <div class="flex-column">里程(万公里)</div>
+            <div class="flex-column">里程得分</div>
+            <div class="flex-column">维保费用</div>
+            <div class="flex-column">维保得分</div>
+            <div class="flex-column">车况得分</div>
           </div>
-          <div class="table-bot">
-            <div class="table-list" v-for="(item,index) in unitDataList" :key="index" @click="choose()">
-              <div class="fir"><div class="said"></div>{{index + 1}}</div>
-              <div class="snd">{{item.a}}</div>
-              <div class="snd">{{item.b}}</div>
-              <div class="snd">{{item.c}}</div>
-              <div class="snd">{{item.d}}</div>
-              <div class="snd">{{item.e}}</div>
-              <div class="snd">{{item.f}}</div>
-              <div class="snd">{{item.g}}</div>
-              <div class="snd">{{item.h}}</div>
-              <div class="snd">{{item.i}}</div>
-              <div class="snd">{{item.j}}</div>
-            </div>
+          <div class="flex-row" v-for="(item,index) in dataList" :key="index" @click="choose()">
+            <div class="flex-column">{{item.a}}</div>
+            <div class="flex-column">{{item.b}}</div>
+            <div class="flex-column">{{item.c}}</div>
+            <div class="flex-column">{{item.d}}</div>
+            <div class="flex-column">{{item.e}}</div>
+            <div class="flex-column">{{item.f}}</div>
+            <div class="flex-column">{{item.g}}</div>
+            <div class="flex-column">{{item.h}}</div>
+            <div class="flex-column">{{item.i}}</div>
+            <div class="flex-column">{{item.j}}</div>
           </div>
         </div>
       </div>
@@ -57,7 +55,7 @@ export default {
   },
   data() {
     return {
-      unitDataList: [
+      dataList: [
         {
           a: "国网山西省电力公司",
           b: 56,
@@ -187,74 +185,39 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.said{
-  width: 2px;
-  margin-right: 8px;
-  height: 16px;
-  background-color: #00FFFF;
+.flex-container {
+  width: 100%;
 }
-.table-cont{
-  width:100%;
 
-  .table-top{
-    width:100%;
-    height: 26px;
-    background: url("../../../assets/images/building_guarantee/img_11.png") no-repeat;
-    background-size: 100% 100%;
-    padding:0 4px 0 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size:14px;
-    color:#00FFFF;
-  }
-  .table-bot{
-    width:100%;
-    height: 300px;
-    overflow: auto;
-    .table-list{
-      margin-bottom: 10px;
-      align-items: center;
-      background: radial-gradient(
-          190% 71% at 50% 49%,
-          rgba(21, 105, 107, 0.54) 0%,
-          rgba(27, 95, 97, 0) 100%
-      );
-      width:100%;
-      height:30px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size:14px;
-      color:#FFFFFF;
-      font-weight: 500;
-    }
-    .table-list:hover{
-      background: radial-gradient(
-          190% 71% at 50% 49%,
-          rgba(47, 204, 208, 0.74) 0%,
-          rgba(27, 95, 97, 0) 100%
-      );
-      cursor: pointer;
-    }
-  }
-  .table-bot::-webkit-scrollbar {
-    display: none; /* 隐藏滚动条 */
-  }
+.header{
+  display: flex;  /* 每行使用 flexbox 布局 */
+  position: relative;
+  background-color: rgba(21, 105, 107, 0.5);
+}
 
-  .fir{
-    width:40%;
-    text-align: left;
-    display: flex;
-  }
-  .snd{
-    width:30%;
-    text-align: left;
-  }
-  .thd{
-    width:30%;
-    text-align: left;
-  }
+.flex-row {
+  display: flex;  /* 每行使用 flexbox 布局 */
+  position: relative;
+}
+
+.flex-row::before{
+  content: "";
+  height: 15px;
+  border-left: 2px #00FFFF solid;
+  position: absolute;
+  left: 0;
+  top: 10px
+}
+
+.flex-column {
+  flex: 1;  /* 每列均分可用空间 */
+  padding: 8px 12px;
+  text-align: left;  /* 左对齐文本 */
+  color: white;
+}
+
+.header .flex-column {
+  color: #00ffff;
 }
 
 .el-scrollbar {
@@ -279,8 +242,8 @@ export default {
 }
 .data-weeks-foods {
   position: relative;
-  width: 668px;
-  height: 432px;
+  width: 1336px;
+  height: 864px;
   background: url("../../../assets/images/main/dialog-bg.png") no-repeat;
   background-size: cover;
   .close-btn {

src/views/screen/official/terminalDataDialog.vue

@@ -201,7 +201,7 @@
           <div class="content-title long">
             <span class="title">单位健康分析</span>
           </div>
-          <div class="table-cont">
+          <div class="table-cont" @click="choose()">
             <div class="table-top">
               <div class="fir">单位名称</div>
               <div class="snd">车辆总数</div>
@@ -258,7 +258,7 @@
           <div class="content-title long">
             <span class="title">单车列表分析</span>
           </div>
-          <div class="table-cont">
+          <div class="table-cont" @click="chooseHealth">
             <div class="table-top">
               <div class="fir">单位名称</div>
               <div class="snd">车牌号码</div>
@@ -620,6 +620,13 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
+    choose(){
+      this.$emit('choose')
+    },
+    chooseHealth(){
+      this.$emit('chooseH')
+    },
+
     //实例化饼图
     handlePie() {
       this.pieData = [