公务用车...

src/views/screen/official/carHealth.vue

@@ -1,33 +1,25 @@
 <template>
-  <div class="main-data data-weeks-foods">
-    <div class="title-area">单位列表分析</div>
+  <div class="the_dialog">
+    <div class="the_title">
+      <div class="the_title_text">2025年度减少车辆数</div>
+    </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 class="flex-column" style="width: 30%">配置使用单位</div>
+            <div class="flex-column" style="width: 20%">车牌号码</div>
+            <div class="flex-column" style="width: 20%">车辆用途</div>
+            <div class="flex-column" style="width: 30%">处置原因</div>
+            <div class="flex-column" style="width: 20%">处置日期</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" style="width: 30%">{{item.a}}</div>
+            <div class="flex-column" style="width: 20%">{{item.b}}</div>
+            <div class="flex-column" style="width: 20%">{{item.c}}</div>
+            <div class="flex-column" style="width: 30%">{{item.d}}</div>
+            <div class="flex-column" style="width: 20%">{{item.e}}</div>
           </div>
         </div>
       </div>
@@ -55,116 +47,46 @@ export default {
     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: "晋C36727",
+          c: "生产服务用车",
+          d: "使用年数过久",
+          e: "2022-12-15",
         },
         {
-          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: "晋C36727",
+          c: "生产服务用车",
+          d: "发生车祸",
+          e: "2022-12-15",
         },
         {
-          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: "晋C36727",
+          c: "生产服务用车",
+          d: "未通过安全检查",
+          e: "2022-12-15",
         },
         {
-          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: "晋C36727",
+          c: "生产服务用车",
+          d: "不清楚",
+          e: "20224-12-15",
         },
         {
-          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: "晋C36727",
+          c: "生产服务用车",
+          d: "重要零件损坏",
+          e: "2022-12-15",
         },
         {
-          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: "晋C36727",
+          c: "生产服务用车",
+          d: "醉酒驾车",
+          e: "2022-12-15",
         },
       ],
     };
@@ -183,6 +105,45 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.the_dialog {
+  position: relative;
+  width: 1002px;
+  height: 648px;
+  background: rgba(35, 60, 80, 0.37) 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;
+  }
+
+  .the_title {
+    height: 70px;
+    position: relative;
+  }
+
+  .the_title_text {
+    font-family: "PingFangSC" !important;
+    font-size: 20px;
+    font-weight: 900;
+    color: #62ffe5;
+    text-shadow: 0px 2px 24px #00b7ff;
+    position: absolute;
+    left: 40px;
+    top: 15px
+  }
+
+  .content-area {
+    display: flex;
+    flex-direction: column;
+    padding: 15px 20px 0 15px;
+    padding-top: 0 !important;
+  }
+}
 .flex-container {
   width: 100%;
 }

src/views/screen/official/main.vue

@@ -116,7 +116,7 @@
         </div>
       </div>
     </div>
-    <div class="right" @click="chooseCost">
+    <div class="right">
       <div class="right-cont" v-if="rightShow">
         <div class="cont-title-area">
           <img
@@ -139,8 +139,8 @@
     >
       <terminal-data-dialog
         v-if="dialogType === 1"
-        @choose="chooseRes"
-        @chooseH="chooseHealth"
+        @chooseX="chooseCost"
+        @chooseY="chooseHealth"
         @closeDialog="closeDialog"
       ></terminal-data-dialog>
       <car-warning-dialog

src/views/screen/official/terminalDataDialog.vue

@@ -107,7 +107,7 @@
               <div style="position: absolute;left: 20px;top: -5px;">2025年度公务车车辆数</div>
             </div>
             <div style="display: flex;align-items: center;margin-bottom: 20px">
-              <div style="position: relative">
+              <div style="position: relative" @click="chooseX">
                 <img src="../../../assets/zhang/pubicCar/arcBlue.png" width="97" style="margin: 10px 5px 0 33px">
                 <div style="position: absolute;width: 48px;color: #00FFFF;top: 5px;left: 55px;font-size: 12px;text-align: center">年度增加车辆数</div>
               </div>
@@ -117,7 +117,7 @@
               </div>
             </div>
             <div style="display: flex;align-items: center">
-              <div style="position: relative">
+              <div style="position: relative" @click="chooseY">
                 <img src="../../../assets/zhang/pubicCar/arcOrange.png" width="97" style="margin: 10px 5px 0 33px">
                 <div style="position: absolute;width: 48px;color: #FEC72F;top: 5px;left: 55px;font-size: 12px;text-align: center">年度减少车辆数</div>
               </div>
@@ -480,11 +480,11 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
-    choose(){
-      this.$emit('choose')
+    chooseX(){
+      this.$emit('chooseX')
     },
-    chooseHealth(){
-      this.$emit('chooseH')
+    chooseY(){
+      this.$emit('chooseY')
     },
 
     //实例化饼图