1

src/views/screen/official/carWarning.vue

@@ -8,7 +8,7 @@
         <div style="display: flex;align-items: center">
           <img src="../../../assets/zhang/public_car.png" width="58" style="margin: 0 5px 0 33px">
           <div style="width: 108px;height: 24px;color: #00FFFF;font-size: 34px;margin-bottom: 10px">
-            <span style="font-family: 'electronicFont'">5566</span>
+            <span style="font-family: 'electronicFont'">{{ manageTopHalf.pcdNum }}</span>
             <span style="width: 15px;height: 24px;font-size: 14px;align-content: end">单</span>
           </div>
         </div>
@@ -22,7 +22,7 @@
         <div style="display: flex;align-items: center">
           <img src="../../../assets/zhang/public_car.png" width="58" style="margin: 0 5px 0 33px">
           <div style="width: 108px;height: 24px;color: #00FFFF;font-size: 34px;margin-bottom: 10px">
-            <span style="font-family: 'electronicFont'">5566</span>
+            <span style="font-family: 'electronicFont'">{{ Math.round(manageTopHalf.avgPcdNum) }}</span>
             <span style="width: 15px;height: 24px;font-size: 14px;align-content: end">单</span>
           </div>
         </div>
@@ -35,7 +35,7 @@
         <div style="display: flex;align-items: center">
           <img src="../../../assets/zhang/public_car.png" width="58" style="margin: 0 5px 0 33px">
           <div style="width: 108px;height: 24px;color: #00FFFF;font-size: 34px;margin-bottom: 10px">
-            <span style="font-family: 'electronicFont'">5566</span>
+            <span style="font-family: 'electronicFont'">{{ manageTopHalf.mileCount }}</span>
             <span style="width: 15px;height: 24px;font-size: 14px;align-content: end">公里</span>
           </div>
         </div>
@@ -48,7 +48,7 @@
         <div style="display: flex;align-items: center">
           <img src="../../../assets/zhang/public_car.png" width="58" style="margin: 0 5px 0 33px">
           <div style="width: 108px;height: 24px;color: #00FFFF;font-size: 34px;margin-bottom: 10px">
-            <span style="font-family: 'electronicFont'">5566</span>
+            <span style="font-family: 'electronicFont'">{{ Math.round(manageTopHalf.avgMile) }}</span>
             <span style="width: 15px;height: 24px;font-size: 14px;align-content: end">公里</span>
           </div>
         </div>
@@ -64,8 +64,8 @@
           <div style="position: absolute;left: 20px;top: 8px;color: #FFFFFF;font-size: 12px;">前三名单位情况</div>
         </div>
         <bar-chart
-          :chart-data="barData"
-          :x-axis="barAxis"
+          :chart-data="barDataTop"
+          :x-axis="barAxisTop"
           :y-axis="barYAxis"
           :grid="barGrid"
           :legend="legend"
@@ -81,8 +81,8 @@
           <div style="position: absolute;left: 20px;top: 8px;color: #FFFFFF;font-size: 12px;">后三名单位情况</div>
         </div>
         <bar-chart
-          :chart-data="barData"
-          :x-axis="barAxis1"
+          :chart-data="barDataLast"
+          :x-axis="barAxisLast"
           :y-axis="barYAxis"
           :grid="barGrid"
           :legend="legend"
@@ -100,15 +100,15 @@
     <div style="width: 100%;padding: 0 15px 0 15px">
       <div class="flex-container">
         <div class="header" style="margin-bottom: 10px">
-          <div class="flex-column" style="width: 60%">单位名称</div>
+          <div class="flex-column" style="width: 50%">单位名称</div>
           <div class="flex-column">车牌号码</div>
           <div class="flex-column">派车单数</div>
         </div>
         <div class="dataBody">
-          <div class="flex-row" style="margin-bottom: 10px" v-for="(item,index) in dataList" :key="index" @click="choose()">
-            <div class="flex-column" style="width: 60%">{{item.unit}}</div>
-            <div class="flex-column">{{item.car}}</div>
-            <div class="flex-column">{{item.order}}</div>
+          <div class="flex-row" style="margin-bottom: 10px" v-for="(item,index) in manageLastHalf.list" :key="index" @click="choose()">
+            <div class="flex-column" style="width: 50%">{{item.appName}}</div>
+            <div class="flex-column">{{item.vechileNum}}</div>
+            <div class="flex-column">{{item.pcdCount}}</div>
           </div>
         </div>
       </div>
@@ -124,6 +124,8 @@ export default {
   name: "CarResource",
   components: { BarChart, PieChart },
   props: {
+    manageTopHalf: {},
+    manageLastHalf: {},
     appOrg: {
       type: String,
       default: "0000",
@@ -142,47 +144,47 @@ export default {
       // 公务用车资源情况
       dataList: [
         {
-          unit: "国网山西省电力公司太原供电公司",
+          unit: "国网山西省晋源区电力公司",
           car: "晋C36727",
           order: 200,
         },
         {
-          unit: "国网山西省电力公司太原供电公司",
+          unit: "国网山西省晋源区电力公司",
           car: "晋C36727",
           order: 200,
         },
         {
-          unit: "国网山西省电力公司太原供电公司",
+          unit: "国网山西省晋源区电力公司",
           car: "晋C36727",
           order: 200,
         },
         {
-          unit: "国网山西省电力公司太原供电公司",
+          unit: "国网山西省晋源区电力公司",
           car: "晋C36727",
           order: 200,
         },
         {
-          unit: "国网山西省电力公司太原供电公司",
+          unit: "国网山西省晋源区电力公司",
           car: "晋C36727",
           order: 200,
         },
         {
-          unit: "国网山西省电力公司太原供电公司",
+          unit: "国网山西省晋源区电力公司",
           car: "晋C36727",
           order: 200,
         },
         {
-          unit: "国网山西省电力公司太原供电公司",
+          unit: "国网山西省晋源区电力公司",
           car: "晋C36727",
           order: 200,
         },
         {
-          unit: "国网山西省电力公司太原供电公司",
+          unit: "国网山西省晋源区电力公司",
           car: "晋C36727",
           order: 200,
         },
       ],
-      barData: [
+      barDataTop: [
         {
           name: "公务车总数",
           type: "bar",
@@ -206,7 +208,7 @@ export default {
             }
           },
           barWidth: 10,
-          data: [110, 140, 150],
+          data: this.manageLastHalf.x1,
         },
         {
           name: "派车单数",
@@ -231,32 +233,84 @@ export default {
             }
           },
           barWidth: 10,
-          data: [110, 120, 130],
+          data: this.manageLastHalf.y1,
         },
       ],
-      barAxis:{
+      barAxisTop:{
         type: "category",
-        data: [
-          "国网山西省太原供电公司", "国网山西省运城供电公司", "国网山西省晋城供电公司"
-        ],
+        data: this.manageLastHalf.z1,
         axisLabel: {
           color: "white",
           fontSize: 10,
+          interval: 0,
           rotate: 65,
+          padding: [2, 0, 2, 0]
         },
         axisTick: {
           show: false,
         },
       },
-      barAxis1:{
+      barDataLast: [
+        {
+          name: "公务车总数",
+          type: "bar",
+          itemStyle: {
+            color: {
+              type:'linear',
+              x:0,//右
+              y:0,//下
+              x2:0,//左
+              y2:1,//上
+              colorStops:[
+                {
+                  offset:0,
+                  color:'#FFD296'
+                },
+                {
+                  offset:1,
+                  color:'#D67C15'
+                },
+              ]
+            }
+          },
+          barWidth: 10,
+          data: this.manageLastHalf.x2,
+        },
+        {
+          name: "派车单数",
+          type: "bar",
+          itemStyle: {
+            color: {
+              type:'linear',
+              x:0,//右
+              y:0,//下
+              x2:0,//左
+              y2:1,//上
+              colorStops:[
+                {
+                  offset:0,
+                  color:'#43DCDB'
+                },
+                {
+                  offset:1,
+                  color:'#00576D'
+                },
+              ]
+            }
+          },
+          barWidth: 10,
+          data: this.manageLastHalf.y2,
+        },
+      ],
+      barAxisLast:{
         type: "category",
-        data: [
-          "国网山西省朔州供电公司", "国网山西省阳泉供电公司", "国网山西省忻州供电公司"
-        ],
+        data: this.manageLastHalf.z2,
         axisLabel: {
           color: "white",
           fontSize: 10,
+          interval: 0,
           rotate: 65,
+          padding: [2, 0, 2, 0]
         },
         axisTick: {
           show: false,
@@ -266,6 +320,7 @@ export default {
         type: "value",
         axisLabel: {
           color: "white",
+          fontSize: 8
         },
         splitLine: {
           show: true,
@@ -304,6 +359,7 @@ export default {
         right: 'left',  // 将图例放置在容器的左侧
         top: 'top',    // 将图例放置在容器的顶部
       },
+
       pieCenter: ["25%", "50%"],
       pieRadius: ["50%", "60%"],
       pieLegend: {