emm...

src/views/screen/engineering/currentArea.vue

@@ -56,7 +56,7 @@
             <div class="snd">标题</div>
             <div class="thd">问题状况</div>
           </div>
-          <div class="table-roll">
+          <div class="table-roll" @click="choose">
             <div class="table-bot">
               <div class="table-list">
                 <div class="said"></div>
@@ -271,6 +271,9 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
+    choose(){
+      this.$emit('choose')
+    }
   }
 }
 

src/views/screen/engineering/main.vue

@@ -143,7 +143,7 @@
             <div class="cont-title">现场远程检查情况</div>
           </div>
           <div class="components-item">
-            <current-area @chooseMonitor="onChooseMonitor" :monitorName="monitorName" :key="appOrg"></current-area>
+            <current-area @chooseMonitor="onChooseMonitor" @choose="onChooseIssueList" :monitorName="monitorName" :key="appOrg"></current-area>
           </div>
         </div>
       </div>
@@ -328,23 +328,40 @@ export default {
       this.showCameraScreen = 0;
       this.showCamera = 1;
     },
+    //入口
     onChooseIssue(){
+      this.flag = 1
       this.showCameraScreen = 0;
-      this.showIssue = 1;
+      this.showIssueSub = 1;
     },
 
+    onChooseIssueList(){
+      this.showC = true
+      this.showIssue = 1
+    },
     onCloseIssue(){
-      this.showCameraScreen = 1
+      this.showC = false
       this.showIssue = 0
     },
+
+    //入口
     onSubIssue(){
+      this.flag = 2
       this.showIssueSub = 1
       this.showIssue = 0
     },
-
     onCloseIssueSub(){
       this.showIssueSub = 0
-      this.showIssue = 1
+      if (this.flag === 1){
+        this.showCameraScreen = 1
+      }
+      else if (this.flag === 2){
+        this.showIssue = 1
+      }
+      else {
+
+      }
+      this.flag = 0
     },
 
 

src/views/screen/engineering/resourceList.vue

@@ -1,11 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped lang="scss">
-
-</style>

src/views/screen/logistics/car/carTerminal.vue

@@ -2,51 +2,97 @@
   <div class="main-data car-resource-area">
     <!-- <div class="title-area">车辆终端安装情况</div> -->
     <div class="content-area flex-column">
-      <div class="data-list">
-        <div v-for="(item, index) in dataList" :key="index" class="data-item">
-          <div class="title-format">
-            <img src="@/assets/images/main/blue.png" class="icon" alt="" />
-            <div class="title-info">
-              <span style="font-size:14px;">{{ item.name }}</span>
-            </div>
+      <div class="content wid100" style="margin: 10px 0">
+        <div class="content-title" style="width: 100%;">
+          <span class="title" style="transform: translate(0,-4px);">成本概况</span>
+        </div>
+      </div>
+      <div style="display: flex;justify-content: space-between;color: #00fdeb;width: 100%">
+        <div>
+          <div style="display: flex;align-items: center;justify-content: center;font-size: 12px">
+            <img src="@/assets/camera/car_cost.png" width="45">公务车总成本
           </div>
-          <div class="data-detail">
-            <div class="data">{{ item.data }}</div>
-            <div class="unit">{{ item.unit }}</div>
+          <div style="font-size: 40px;font-family: 'electronicFont';text-align: center">
+            56
+            <span style="font-size: 10px;">万元</span>
           </div>
         </div>
-      </div>
-      <div class="list-area">
-        <div class="list-item list-title">
-          <div class="item item-0">车牌号</div>
-          <div class="item item-1">所属单位</div>
-          <div class="item item-2">位置</div>
-          <div class="item item-3">终端安装情况</div>
+        <div>
+          <div style="display: flex;align-items: center;justify-content: center;font-size: 12px">
+            <img src="@/assets/camera/car_cost.png" width="45">单车平均成本
+          </div>
+          <div style="font-size: 40px;font-family: 'electronicFont';text-align: center">
+            56
+            <span style="font-size: 10px;">万元</span>
+          </div>
+        </div>
+        <div>
+          <div style="display: flex;align-items: center;justify-content: center;font-size: 12px">
+            <img src="@/assets/camera/car_cost.png" width="45">单车最高成本
+          </div>
+          <div style="font-size: 40px;font-family: 'electronicFont';text-align: center">
+            56
+            <span style="font-size: 10px;">万元</span>
+          </div>
         </div>
-        <div v-for="(item, index) in dataList2" :key="index" class="list-item">
-          <div class="item item-0">{{ item.car }}</div>
-          <div class="item item-1">国网太原供电公司</div>
-          <div class="item item-2">
-            <el-tooltip class="item" effect="dark" content="山西省太原市杏花岭区杏花岭街道府东街71号" placement="top-start">
-              <span>山西省太原市杏花岭区杏花岭街道府东街71号</span>
-            </el-tooltip>
+        <div>
+          <div style="display: flex;align-items: center;justify-content: center;font-size: 12px">
+            <img src="@/assets/camera/car_cost.png" width="45">单车最低成本
           </div>
-          <div class="item item-3 cur">已安装</div>
+          <div style="font-size: 40px;font-family: 'electronicFont';text-align: center">
+            56
+            <span style="font-size: 10px;">万元</span>
+          </div>
+        </div>
+      </div>
+      <div class="content wid100" style="margin: 40px 0">
+        <div class="content-title" style="width: 100%;">
+          <span class="title" style="transform: translate(0,-4px);">车辆总成本费用分布</span>
+        </div>
+        <div style="display: flex;width: 100%;align-items: center;justify-content: center">
+          <pie-chart
+            :chart-data="pieData"
+            :legend="pieLegend"
+            :title="pieTitle"
+            width="220px"
+            height="180px"
+          />
         </div>
-      </div> 
+
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import BarChart from "@/components/Echarts/BarChart.vue";
+import PieChart from '@/components/Echarts/PieChart.vue'
 
 export default {
   name: "CarResource",
-  components: {BarChart},
+  components: { PieChart, BarChart},
   props: {},
   data() {
     return {
+      pieData: [
+        { value: 110, name: "燃油费" },
+        { value: 120, name: "年检费" },
+        { value: 130, name: "清洗费" },
+        { value: 140, name: "保险费" },
+        { value: 150, name: "修理费" },
+        { value: 150, name: "过路过桥费" },
+      ],
+      pieLegend: {
+        top: 8,
+        orient: "vertical",
+        right: 0,
+        itemWidth: 8, // 设置图例标记的宽度
+        itemHeight: 8, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
+      },
+      pieTitle: {},
       // 公务用车资源情况
       dataList: [
         {
@@ -116,7 +162,7 @@ export default {
   .content-title {
     width: 230px;
     height: 26px;
-    background: url("../../../../assets/images/main/title_pro.png") no-repeat;
+    background: url("../../../../assets/images/main/title_pro_long.png") no-repeat;
     background-size: 100% 100%;
     font-family: "PingFangSC";
     font-size: 16px;

src/views/screen/official/carCost.vue

@@ -0,0 +1,440 @@
+<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="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>
+          <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>
+        </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 {
+      unitDataList: [
+        {
+          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>
+.said{
+  width: 2px;
+  margin-right: 8px;
+  height: 16px;
+  background-color: #00FFFF;
+}
+.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; /* 隐藏滚动条 */
+  }
+
+  .fir{
+    width:40%;
+    text-align: left;
+    display: flex;
+  }
+  .snd{
+    width:30%;
+    text-align: left;
+  }
+  .thd{
+    width:30%;
+    text-align: left;
+  }
+}
+
+.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: 668px;
+  height: 432px;
+  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 {
+    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/carWarning.vue

@@ -4,73 +4,61 @@
     <div class="content-area flex-column">
       <div class="content wid100" style="margin: 10px 0;">
         <div class="content-title long">
-          <span class="title">公务用车数据概况</span>
+          <span class="title">公务车终端概况</span>
         </div>
-        <div class="data-list">
-          <div v-for="(item, index) in dataList" :key="index" class="data-item">
-            <div class="title-format">
-              <img src="@/assets/images/main/blue.png" class="icon" alt="" />
-              <div class="title-info">
-                <span>{{ item.name }}</span>
-              </div>
+        <div style="color: #00fdeb;display: flex;">
+          <div style="display: flex;align-items: center">
+            <div style="position: relative">
+              <div style="position: absolute;top: 18%;left: 50%;transform: translate(-50%);text-align: center;padding: 0 5px">公务车终端安装率</div>
+              <img src="@/assets/images/main/rate_bg.png" class="icon" alt="" />
             </div>
-            <div class="data-detail">
-              <div class="data">{{ item.data }}</div>
-              <div class="unit">{{ item.unit }}</div>
+            <div style="font-size: 60px;font-family: 'electronicFont';margin-left: -20px">56<span style="font-size: 20px">%</span></div>
+          </div>
+          <div style="display: flex;align-items: center">
+            <div style="position: relative">
+              <div style="position: absolute;top: 18%;left: 50%;transform: translate(-50%);text-align: center;padding: 0 5px">公务车终端在线率</div>
+              <img src="@/assets/images/main/rate_bg.png" class="icon" alt="" />
             </div>
+            <div style="font-size: 60px;font-family: 'electronicFont';margin-left: -20px">56<span style="font-size: 20px">%</span></div>
           </div>
         </div>
+
       </div>
 
       <div class="content-left flex-row space-between wid100">
         <div>
           <div class="content-title">
-            <span class="title">用车单位分布</span>
+            <span class="title">处置未归档车辆数</span>
           </div>
           <div class="content">
             <div class="charts-cont">
-              <pie-chart
-              v-if="show"
-                :chart-data="pieData"
-                :legend="pieLegend"
-                :center="pieCenter"
-                width="220px"
-                height="150px"
-              />
+              <div style="display: flex;color: #00fdeb;margin: 20px 10px;align-items: center">
+                <img src="@/assets/camera/public_car.png" width="80">
+                <div style="font-size: 40px;font-family: 'electronicFont'">
+                  5566
+                  <span style="font-size: 10px;">辆</span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
         <div>
           <div class="content-title">
-            <span class="title">各类车型比例</span>
+            <span class="title">封存到期车辆</span>
           </div>
           <div class="content">
             <div class="charts-cont">
-              <pie-chart
-              v-if="show"
-                :chart-data="totalPieData"
-                :legend="totalPieLegend"
-                :center="totalCenter"
-                width="220px"
-                height="150px"
-              />
+              <div style="display: flex;color: #00fdeb;margin: 20px 10px;align-items: center">
+                <img src="@/assets/camera/public_car.png" width="80">
+                <div style="font-size: 40px;font-family: 'electronicFont'">
+                  5566
+                  <span style="font-size: 10px;">辆</span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <div v-if="show" class="content-right flex-row space-between wid100">
-        <div>
-          <div class="content-title">
-          <span class="title">车辆类型比例</span>
-        </div>
-        </div>
-        <div>
-          <div class="content-title">
-          <span class="title">各车型数据分析</span>
-        </div>
-        </div>
-
-      </div>
     </div>
   </div>
 </template>

src/views/screen/official/carWarningDialog.vue

@@ -4,142 +4,91 @@
       <img
         src="@/assets/images/main/cont_title_bg.png"
       />
-      <div class="title">公务用车信息概况</div>
+      <div class="title">成本管理</div>
     </div>
     <div class="dialog-cont">
       <div class="dialog-left">
         <div class="dialog-list">
-          <div class="dialog-item wid100">
-            <div class="content-title">
-              <span class="title">公务用车数据概况</span>
+          <div class="dialog-item wid100" style="margin: 10px 0">
+            <div class="content-title" style="width: 100%;">
+              <span class="title" style="transform: translate(0,-4px);">成本概况</span>
             </div>
-            <div class="data-list">
-              <div
-                v-for="(item, index) in dataList"
-                :key="index"
-                class="data-item"
-              >
-                <div class="title-format flex-row align-items-center">
-                  <img
-                    src="@/assets/images/main/blue.png"
-                    class="icon"
-                    alt=""
-                  />
-                  <div class="title-info">
-                    <span>{{ item.name }}</span>
-                  </div>
-                </div>
-                <div class="data-detail">
-                  <div class="data">{{ item.data }}</div>
-                  <div class="unit">{{ item.unit }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="dialog-list">
-          <div class="dialog-item wid100">
-            <div class="content-left flex-row space-between wid100">
+            <div style="display: flex;justify-content: space-between;color: #00fdeb;width: 100%">
               <div>
-                <div class="content-title">
-                  <span class="title">用车单位分布</span>
+                <div style="display: flex;align-items: center;justify-content: center;font-size: 12px">
+                  <img src="@/assets/camera/car_cost.png" width="45">公务车总成本
                 </div>
-                <div class="content">
-                  <div class="charts-cont">
-                    <pie-chart
-                      :chart-data="pieData"
-                      :legend="pieLegend"
-                      :center="pieCenter"
-                      width="220px"
-                      height="150px"
-                    />
-                  </div>
+                <div style="font-size: 40px;font-family: 'electronicFont';text-align: center">
+                  56
+                  <span style="font-size: 10px;">万元</span>
                 </div>
               </div>
               <div>
-                <div class="content-title">
-                  <span class="title">各类车型比例</span>
+                <div style="display: flex;align-items: center;justify-content: center;font-size: 12px">
+                  <img src="@/assets/camera/car_cost.png" width="45">单车平均成本
                 </div>
-                <div class="content">
-                  <div class="charts-cont">
-                    <pie-chart
-                      :chart-data="totalPieData"
-                      :legend="totalPieLegend"
-                      :center="totalCenter"
-                      position="left"
-                      width="220px"
-                      height="150px"
-                    />
-                  </div>
+                <div style="font-size: 40px;font-family: 'electronicFont';text-align: center">
+                  56
+                  <span style="font-size: 10px;">万元</span>
                 </div>
               </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="dialog-list">
-          <div class="dialog-item wid100">
-            <div class="content-left flex-row space-between wid100">
               <div>
-                <div class="content-title">
-                  <span class="title">车辆类型比例</span>
+                <div style="display: flex;align-items: center;justify-content: center;font-size: 12px">
+                  <img src="@/assets/camera/car_cost.png" width="45">单车最高成本
                 </div>
-                <div class="content">
-                  <div class="charts-cont">
-                    <pie-chart
-                      :chart-data="catePieData"
-                      :legend="catePieLegend"
-                      :center="catePieCenter"
-                      width="220px"
-                      height="150px"
-                    />
-                  </div>
+                <div style="font-size: 40px;font-family: 'electronicFont';text-align: center">
+                  56
+                  <span style="font-size: 10px;">万元</span>
                 </div>
               </div>
               <div>
-                <div class="content-title">
-                  <span class="title">各车型数据分析</span>
+                <div style="display: flex;align-items: center;justify-content: center;font-size: 12px">
+                  <img src="@/assets/camera/car_cost.png" width="45">单车最低成本
                 </div>
-                <div class="content">
-                  <div class="charts-cont">
-                    <bar-chart
-                      :chart-data="carTypeBarData"
-                      :x-axis="carTypeBarAxis"
-                      :yAxis="carTypeBarYAxis"
-                      :legend="carTypeBarLegend"
-                      :grid="barGrid"
-                      y-color="#FFF"
-                      l-color="#FFF"
-                      width="220px"
-                      height="180px"
-                    />
-                  </div>
+                <div style="font-size: 40px;font-family: 'electronicFont';text-align: center">
+                  56
+                  <span style="font-size: 10px;">万元</span>
                 </div>
               </div>
             </div>
           </div>
-        </div>
 
-        <div class="dialog-list">
-          <div class="dialog-item wid100">
-            <div class="content-title">
-              <span class="title">各单位的公务车用车总量</span>
+
+          <div class="dialog-item wid100" style="margin: 40px 0">
+            <div class="content-title" style="width: 100%;">
+              <span class="title" style="transform: translate(0,-4px);">车辆总成本费用分布</span>
             </div>
-            <div class="content">
-              <div class="charts-cont">
-                <bar-chart
-                  :chart-data="carTotalData"
-                  :x-axis="carTotalAxis"
-                  :yAxis="carTotalYAxis"
-                  :legend="carTotalLegend"
-                  :grid="barGrid"
-                  y-color="#FFF"
-                  l-color="#FFF"
-                  width="550px"
-                  height="180px"
-                />
-              </div>
+            <div style="display: flex;width: 100%;align-items: center;justify-content: center">
+              <pie-chart
+                :chart-data="pieData"
+                :legend="pieLegend"
+                :title="pieTitle"
+                width="220px"
+                height="180px"
+              />
+            </div>
+          </div>
+          <div class="dialog-item wid100" style="margin: 10px 0">
+            <div class="content-title" style="width: 100%;">
+              <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>
           </div>
         </div>
@@ -166,43 +115,26 @@ export default {
     return {
       // 公务用车资源情况
       dataList: [
-        {
-          name: "公司车辆总量",
-          data: "56",
-          unit: "辆",
-        },
-        {
-          name: "企业负责人用车量",
-          data: "30",
-          unit: "辆",
-        },
-        {
-          name: "其他企业用车量",
-          data: "26",
-          unit: "辆",
-        },
+        {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},
       ],
       pieData: [
-        {
-          value: 30,
-          name: "企业负责人用车",
-          itemStyle: {
-            color: "#00FFFF",
-          },
-        },
-        {
-          value: 26,
-          name: "企业用车",
-          itemStyle: {
-            color: "#2F82FE",
-          },
-        },
+        { value: 110, name: "燃油费" },
+        { value: 120, name: "年检费" },
+        { value: 130, name: "清洗费" },
+        { value: 140, name: "保险费" },
+        { value: 150, name: "修理费" },
+        { value: 150, name: "过路过桥费" },
       ],
-      pieCenter: ["27%", "50%"],
-      pieRadius: ["50%", "60%"],
       pieLegend: {
+        top: 8,
         orient: "vertical",
-        top: 60,
         right: 0,
         itemWidth: 8, // 设置图例标记的宽度
         itemHeight: 8, // 设置图例标记的高度
@@ -210,6 +142,7 @@ export default {
           color: "#FFF",
         },
       },
+      pieTitle: {},
       //各类车型
       totalPieData: [
         { value: 110, name: "商务车" },
@@ -370,6 +303,10 @@ export default {
   mounted() {},
   methods: {
 
+    choose(){
+      this.$emit('choose')
+    },
+
      //鼠标移出
      leaveFun(){
       setTimeout(()=>{
@@ -385,6 +322,17 @@ export default {
 </script>
 
 <style lang="scss">
+.row{
+  flex: 1;  /* 每一列均分可用空间 */
+  text-align: left;  /* 左对齐文本 */
+}
+
+.said{
+  width: 2px;
+  margin-right: 8px;
+  height: 16px;
+  background-color: #00FFFF;
+}
 .car-warning-dialog-area {
   overflow: hidden;
   width: 580px;
@@ -438,7 +386,6 @@ export default {
 
   .dialog-list {
     width: 100%;
-    display: flex;
     justify-content: space-between !important;
     margin-bottom: 20px;
 

src/views/screen/official/main.vue

@@ -118,8 +118,6 @@
       <div class="right-cont" v-if="rightShow">
         <div
           class="right-top"
-          @click="showDialog(4)"
-          @mouseover="showDialog(4)"
         >
           <div class="cont-title-area">
             <img
@@ -127,22 +125,22 @@
               src="@/assets/images/main/cont_title_bg.png"
               alt=""
             />
-            <div class="cont-title">公务用车信息概况</div>
+            <div class="cont-title">监控管理</div>
           </div>
-          <div class="components-item bg2">
+          <div class="components-item">
             <car-warning :key="appOrg"></car-warning>
           </div>
         </div>
-        <div class="right-bottom">
+        <div class="right-bottom" @mouseover="showDialog(4)">
           <div class="cont-title-area">
             <img
               class="cont-title-bg"
               src="@/assets/images/main/cont_title_bg.png"
               alt=""
             />
-            <div class="cont-title">车辆终端安装情况</div>
+            <div class="cont-title">成本管理</div>
           </div>
-          <div class="components-item">
+          <div class="components-item bg2">
             <car-terminal :key="appOrg"></car-terminal>
           </div>
         </div>
@@ -160,13 +158,29 @@
       ></terminal-data-dialog>
       <car-warning-dialog
         v-if="dialogType === 4"
+        @choose="chooseCost"
         @closeDialog="closeDialog"
       ></car-warning-dialog>
     </div>
+
+    <div v-if="showC" class="dialog-2">
+      <div class="dialog-center">
+        <resource-list
+          v-if="showRes === 1"
+          @close="onCloseRes"
+          @choose="onChooseRes"
+        ></resource-list>
+        <car-cost
+          v-if="showCost === 1"
+          @close="onCloseCost"
+        ></car-cost>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import ResourceList from '@/views/screen/official/resourceList.vue'
 import Province from "../map/province.vue";
 import TerminalData from "./terminalData.vue";
 import TerminalDataDialog from "./terminalDataDialog.vue";
@@ -176,10 +190,13 @@ import CarWarningDialog from "./carWarningDialog.vue";
 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'
 
 export default {
   name: "OfficialMain",
   components: {
+    CarCost,
+    ResourceList,
     Province,
     TerminalData,
     TerminalOnline,
@@ -189,12 +206,12 @@ export default {
     TerminalDataDialog,
     CarWarningDialog,
   },
-  props: {
-    appOrg: {
-      type: String,
-      default: "0000",
-    },
-  },
+  // props: {
+  //   appOrg: {
+  //     type: String,
+  //     default: "0000",
+  //   },
+  // },
   watch:{
     appOrg(newValue,oldValue){
       this.resetData();
@@ -202,6 +219,9 @@ export default {
   },
   data() {
     return {
+      showC:false,
+      showRes:0,
+      showCost:0,
       leftShow: true,
       rightShow: true,
       dialogShow: false,
@@ -220,6 +240,16 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
+    chooseCost(){
+      this.closeDialog()
+      this.showC = true
+      this.showCost = 1
+    },
+    onCloseCost(){
+      this.showC = false
+      this.showCost = 0
+    },
+
     showDialog(type) {
       if (type < 4) {
         this.leftShow = false;

src/views/screen/official/resourceList.vue

@@ -0,0 +1,434 @@
+<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="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>
+          <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>
+        </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 {
+      unitDataList: [
+        {
+          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>
+.said{
+  width: 2px;
+  margin-right: 8px;
+  height: 16px;
+  background-color: #00FFFF;
+}
+.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; /* 隐藏滚动条 */
+  }
+
+  .fir{
+    width:40%;
+    text-align: left;
+    display: flex;
+  }
+  .snd{
+    width:30%;
+    text-align: left;
+  }
+  .thd{
+    width:30%;
+    text-align: left;
+  }
+}
+
+.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: 668px;
+  height: 432px;
+  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 {
+    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>
+