"资源台账"

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

@@ -1,32 +1,202 @@
 <template>
   <div class="main-data assets-stock-operation">
     <!-- <div class="title-area">公务用车资源情况</div> -->
-    <div class="content-area flex-column">
-      <div class="chart-item">
-        <line-chart
-        v-if="show"
-                :chart-data="yearLineData"
-                :x-axis="yearLineAxis"
-                :yAxis="yearLineYAxis"
-                :legend="lineLegend"
-                y-color="#FFF"
-                l-color="#FFF"
-                width="515px"
-                height="160px"
-              />
-      </div>
-      <div class="chart-item">
-        <line-chart
-        v-if="show"
-                :chart-data="monthLineData"
-                :x-axis="monthLineAxis"
-                :yAxis="monthLineYAxis"
-                :legend="lineLegend"
-                y-color="#FFF"
-                l-color="#FFF"
-                width="515px"
-                height="160px"
-              />
+    <div class="dialog-cont">
+      <div class="dialog-left">
+        <div class="dialog-list">
+          <div class="dialog-item wid100">
+            <div class="content-title long">
+              <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 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">
+
+            <div>
+              <div class="lift-seat wid100">
+                <div class="asjdjfkaf">
+                  <div class="content-tenter">
+                    <span class="title">行驶总里程</span>
+                  </div>
+                  <div class="sdient">
+                    <div class="car-rite">
+                      <img src="@/assets/images/main/choose_bg10.png"/>
+                    </div>
+                    <div class="num">5656<span class="nim">公里</span></div>
+                  </div>
+                </div>
+                <div class="asjdjfkaf">
+                  <div class="content-tenter">
+                    <span class="title">均车行驶里程</span>
+                  </div>
+                  <div class="sdient">
+                    <div class="car-rite">
+                      <img src="@/assets/images/main/choose_bg10.png"/>
+                    </div>
+                    <div class="num">5656<span class="nim">公里</span></div>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        <div class="dialog-list">
+          <div class="dialog-item wid100">
+            <div class="content-title long">
+              <span class="title">驾驶接单排名</span>
+            </div>
+            <div class="content">
+              <div class="table-cont">
+                <div class="table-top">
+                  <div class="fir">驾驶员姓名</div>
+                  <div class="snd">所属单位</div>
+                  <div class="thd">今日接单数</div>
+                  <div class="frt">累计数</div>
+                </div>
+                <div class="table-bot">
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
       </div>
     </div>
   </div>
@@ -56,25 +226,203 @@ export default {
   data() {
     return {
       // 公务用车资源情况
-      yearLineData: [],
-      yearLineAxis: {},
-      yearLineYAxis: {},
-      monthLineData: [],
-      monthLineAxis: {},
-      monthLineYAxis: {},
-      lineLegend: {
-        top: 0,
-        orient: "horizontal",
+      dataList: [
+        {
+          name: "月均车运行天数",
+          data: "56",
+          unit: "天",
+        },
+        {
+          name: "日派车单数",
+          data: "30",
+          unit: "单",
+        },
+        {
+          name: "日行驶里程",
+          data: "26",
+          unit: "公里",
+        },
+      ],
+      pieData: [
+        {
+          value: 30,
+          name: "企业负责人用车",
+          itemStyle: {
+            color: "#00FFFF",
+          },
+        },
+        {
+          value: 26,
+          name: "企业用车",
+          itemStyle: {
+            color: "#2F82FE",
+          },
+        },
+      ],
+      pieCenter: ["27%", "50%"],
+      pieRadius: ["50%", "60%"],
+      pieLegend: {
+        orient: "vertical",
+        top: 50,
         right: 0,
-        itemWidth: 17, // 设置图例标记的宽度
-        itemHeight: 10, // 设置图例标记的高度
+        itemWidth: 8, // 设置图例标记的宽度
+        itemHeight: 8, // 设置图例标记的高度
         textStyle: {
           color: "#FFF",
         },
       },
-      show:true
-
-
+      //各类车型
+      totalPieData: [
+        { value: 110, name: "商务车" },
+        { value: 120, name: "越野车" },
+        { value: 130, name: "小型客车" },
+        { value: 140, name: "大型客车" },
+        { value: 150, name: "小轿车" },
+      ],
+      totalCenter: ["30%", "50%"],
+      totalPieLegend: {
+        top: 20,
+        right: 10,
+        itemWidth: 8,
+        itemHeight: 8,
+        orient: "vertical",
+        textStyle: {
+          color: "#FFF",
+        },
+      },
+      //车辆类型
+      catePieData: [
+        { value: 40, name: "新能源汽车" },
+        { value: 20, name: "燃油汽车" },
+      ],
+      catePieLegend: {
+        orient: "vertical",
+        top: 60,
+        right: 23,
+        itemWidth: 8, // 设置图例标记的宽度
+        itemHeight: 8, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
+      },
+      catePieCenter: ["27%", "50%"],
+      carTypeBarData: [
+        {
+          name: "",
+          type: "bar",
+          itemStyle: {
+            color: "#D9821D",
+          },
+          barWidth: 20,
+          data: [110, 120, 130, 140, 150],
+        },
+      ],
+      carTypeBarAxis: {
+        type: "category",
+        data: ["商务车", "越野车", "小型客车", "大型客车", "小轿车"],
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+          rotate: 25,
+          interval: 0
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#FFF",
+          },
+        },
+        splitArea: false,
+      },
+      carTypeBarYAxis: {
+        type: "value",
+        boundaryGap: [0, 0.01],
+        name: "辆",
+        nameTextStyle: {
+          color: "#fff",
+          padding: [0,30,0,0],
+          fontSize: 14,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      carTypeBarLegend: {
+        show: false,
+      },
+      carTotalData: [
+        {
+          name: "",
+          type: "bar",
+          itemStyle: {
+            color: "#43DCDB"
+          },
+          barWidth: 40,
+          data: [110, 120, 58, 200],
+        },
+      ],
+      carTotalAxis: {
+        type: "category",
+        data: ["本部 ", "直属单位", "市公司", "县公司"],
+        axisLabel: {
+          color: "white" // 设置横坐标轴字体颜色为红色
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#FFF",
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      carTotalYAxis: {
+        type: "value",
+        boundaryGap: [0, 0.01],
+        name: "数量(辆)",
+        nameTextStyle: {
+          color: "#fff",
+          padding: [0,5,0,0],
+          fontSize: 14,
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#465A64",
+          },
+        },
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      carTotalLegend: {
+        show: false,
+      },
+      barGrid: {
+        top: 30,
+        left: "2%",
+        right: "2%",
+        containLabel: true,
+        bottom: 0,
+      },
     };
   },
   created() {
@@ -625,7 +973,171 @@ export default {
     width: 3px;
     height: 3px;
   }
+  .dialog-list {
+    width: 100%;
+    display: flex;
+    justify-content: space-between !important;
+    margin-bottom: 20px;
+
+    .dialog-item {
+      width: 100%;
+    }
+
+    .dialog-item-cont {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 40px;
+    }
+
+    .wid100 {
+      width: 100%;
+
+      .content-title {
+        width: 100%;
+        background: url("../../../../assets/images/main/title_pro_long.png") no-repeat;
+      }
+    }
+  }
+  .dialog-cont {
+    width:100%;
+    height: 850px;
+    padding: 15px;
+    overflow-y: scroll;
+    background: url("../../../../assets/images/main/components_long_bg.png") no-repeat;
+    background-size: cover;
+
+    .dialog-left {
+      width: 520px;
+      float: left;
+    }
+    .dialog-right {
+      width: 520px;
+      float: right;
+    }
+  }
+
+  .dialog-item-cont {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 40px;
+  }
+  .asjdjfkaf{
+    width: 100%;
+  }
+  .content-tenter {
+    width: 100%;
+    height: 26px;
+    background: url("../../../../assets/images/main/title_pro.png") no-repeat;
+    background-size: 100% 100%;
+    font-family: "PingFangSC";
+    font-size: 16px;
+    font-weight: bold;
+    color: #00ffff;
+    padding-left: 25px;
+    .title {
+      display: block;
+      position: relative;
+      top:-5px;
+    }
+  }
+  .sdient{
+
+    display: flex; /* 使用 Flexbox */
+    align-items: center; /* 垂直居中 */
+  }
+  .num{
+    padding-top: 5px;
+    font-size: 32px;
+    color:#00FFFF;
+    font-family: 'electronicFont';
+    .nim{
+      font-size: 10px;
+    }
+  }
+  .lift-seat{
+    width: 244px;
+    height: 104px;
+    display: flex;
+    justify-content: center; /* 水平居中 */
+  }
+  .content-tenter {
+    width: 100%;
+    height: 26px;
+    background: url("../../../../assets/images/main/title_pro.png") no-repeat;
+    background-size: 100% 100%;
+    font-family: "PingFangSC";
+    font-size: 16px;
+    font-weight: bold;
+    color: #00ffff;
+    padding-left: 25px;
+    .title {
+      display: block;
+      position: relative;
+      top:-5px;
+    }
+  }
+  .table-cont {
+    height: 500px;
+    overflow: auto;
+
+    .table-top {
+      width: 100%;
+      height: 26px;
+      background: url("../../../../assets/images/building_guarantee/img_11.png")
+      no-repeat;
+      background-size: 100% 100%;
+      padding: 0 25px 0 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 12px;
+      color: #00ffff;
+    }
+    .table-bot {
+      height: 450px;
+      overflow: auto;
+      .table-list {
+        width: 100%;
+        height: 38px;
+        padding: 0 25px 0 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 12px;
+        color: #ffffff;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .dialog-list {
+    width: 100%;
+    display: flex;
+    justify-content: space-between !important;
+    margin-bottom: 20px;
 
+    .dialog-item {
+      width: 100%;
+    }
+
+    .dialog-item-cont {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 40px;
+    }
+
+    .wid100 {
+      width: 100%;
+
+      .content-title {
+        width: 100%;
+        background: url("../../../../assets/images/main/title_pro_long.png") no-repeat;
+      }
+    }
+  }
   ::-webkit-scrollbar-thumb {
     //滑块部分
     // border-radius: 5px;

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

@@ -0,0 +1,1090 @@
+<template>
+  <div class="main-data car-warning-dialog-area" @click.stop="preventDefault"  @mouseleave="leaveFun">
+    <div class="dialog-title">
+      <img
+        src="@/assets/images/main/cont_title_bg.png"
+      />
+      <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>
+            <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">
+
+            <div>
+              <div class="lift-seat wid100">
+                <div class="asjdjfkaf">
+                  <div class="content-tenter">
+                    <span class="title">行驶总里程</span>
+                  </div>
+                  <div class="sdient">
+                    <div class="car-rite">
+                      <img src="@/assets/images/main/choose_bg10.png"/>
+                    </div>
+                    <div class="num">5656<span class="nim">公里</span></div>
+                  </div>
+                </div>
+                <div class="asjdjfkaf">
+                  <div class="content-tenter">
+                    <span class="title">均车行驶里程</span>
+                  </div>
+                  <div class="sdient">
+                    <div class="car-rite">
+                      <img src="@/assets/images/main/choose_bg10.png"/>
+                    </div>
+                    <div class="num">5656<span class="nim">公里</span></div>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        <div class="dialog-list">
+          <div class="dialog-item wid100">
+            <div class="content-title long">
+              <span class="title">驾驶接单排名</span>
+            </div>
+            <div class="content">
+              <div class="table-cont">
+                <div class="table-top">
+                  <div class="fir">驾驶员姓名</div>
+                  <div class="snd">所属单位</div>
+                  <div class="thd">今日接单数</div>
+                  <div class="frt">累计数</div>
+                </div>
+                <div class="table-bot">
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+                  <div class="table-list" >
+                    <div class="fir">张杰</div>
+                    <div class="snd">国网山西晋源区电力公司</div>
+                    <div class="thd color">80</div>
+                    <div class="frt">80</div>
+                  </div>
+
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LineChart from "@/components/Echarts/LineChart";
+import PieChart from "@/components/Echarts/PieChart";
+import BarChart from "@/components/Echarts/BarChart.vue";
+import echarts from "echarts";
+
+export default {
+  name: "BuildingSaveDialog",
+  components: {
+    BarChart,
+    PieChart,
+    LineChart,
+  },
+  props: {},
+  data() {
+    return {
+      // 公务用车资源情况
+      dataList: [
+        {
+          name: "月均车运行天数",
+          data: "56",
+          unit: "天",
+        },
+        {
+          name: "日派车单数",
+          data: "30",
+          unit: "单",
+        },
+        {
+          name: "日行驶里程",
+          data: "26",
+          unit: "公里",
+        },
+      ],
+      pieData: [
+        {
+          value: 30,
+          name: "企业负责人用车",
+          itemStyle: {
+            color: "#00FFFF",
+          },
+        },
+        {
+          value: 26,
+          name: "企业用车",
+          itemStyle: {
+            color: "#2F82FE",
+          },
+        },
+      ],
+      pieCenter: ["27%", "50%"],
+      pieRadius: ["50%", "60%"],
+      pieLegend: {
+        orient: "vertical",
+        top: 50,
+        right: 0,
+        itemWidth: 8, // 设置图例标记的宽度
+        itemHeight: 8, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
+      },
+      //各类车型
+      totalPieData: [
+        { value: 110, name: "商务车" },
+        { value: 120, name: "越野车" },
+        { value: 130, name: "小型客车" },
+        { value: 140, name: "大型客车" },
+        { value: 150, name: "小轿车" },
+      ],
+      totalCenter: ["30%", "50%"],
+      totalPieLegend: {
+        top: 20,
+        right: 10,
+        itemWidth: 8,
+        itemHeight: 8,
+        orient: "vertical",
+        textStyle: {
+          color: "#FFF",
+        },
+      },
+      //车辆类型
+      catePieData: [
+        { value: 40, name: "新能源汽车" },
+        { value: 20, name: "燃油汽车" },
+      ],
+      catePieLegend: {
+        orient: "vertical",
+        top: 60,
+        right: 23,
+        itemWidth: 8, // 设置图例标记的宽度
+        itemHeight: 8, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
+      },
+      catePieCenter: ["27%", "50%"],
+      carTypeBarData: [
+        {
+          name: "",
+          type: "bar",
+          itemStyle: {
+            color: "#D9821D",
+          },
+          barWidth: 20,
+          data: [110, 120, 130, 140, 150],
+        },
+      ],
+      carTypeBarAxis: {
+        type: "category",
+        data: ["商务车", "越野车", "小型客车", "大型客车", "小轿车"],
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+          rotate: 25,
+          interval: 0
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#FFF",
+          },
+        },
+        splitArea: false,
+      },
+      carTypeBarYAxis: {
+        type: "value",
+        boundaryGap: [0, 0.01],
+        name: "辆",
+        nameTextStyle: {
+          color: "#fff",
+          padding: [0,30,0,0],
+          fontSize: 14,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      carTypeBarLegend: {
+        show: false,
+      },
+      carTotalData: [
+        {
+          name: "",
+          type: "bar",
+          itemStyle: {
+            color: "#43DCDB"
+          },
+          barWidth: 40,
+          data: [110, 120, 58, 200],
+        },
+      ],
+      carTotalAxis: {
+        type: "category",
+        data: ["本部 ", "直属单位", "市公司", "县公司"],
+        axisLabel: {
+          color: "white" // 设置横坐标轴字体颜色为红色
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#FFF",
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      carTotalYAxis: {
+        type: "value",
+        boundaryGap: [0, 0.01],
+        name: "数量(辆)",
+        nameTextStyle: {
+          color: "#fff",
+          padding: [0,5,0,0],
+          fontSize: 14,
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#465A64",
+          },
+        },
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      carTotalLegend: {
+        show: false,
+      },
+      barGrid: {
+        top: 30,
+        left: "2%",
+        right: "2%",
+        containLabel: true,
+        bottom: 0,
+      },
+    };
+  },
+  created() {},
+  destroyed() {},
+  beforeDestroy() {},
+  mounted() {},
+  methods: {
+
+    //鼠标移出
+    leaveFun(){
+      setTimeout(()=>{
+        this.$emit("closeDialog")
+      },200)
+    },
+
+    preventDefault() {
+      console.log(11);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.car-warning-dialog-area {
+  overflow: hidden;
+  width: 580px;
+  height:920px;
+  background: url("../../../../assets/images/main/main_bg.png") no-repeat;
+  background-size: cover;
+  padding: 19px 15px 11px 15px;
+
+  .dialog-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-bottom: 10px;
+    img {
+      width: 284px;
+      height: 32px;
+    }
+    .title {
+      font-size: 20px;
+      font-weight: 900;
+      font-family: "PingFangSC";
+      width: 100%;
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      top: -5px;
+      color: #fff;
+    }
+  }
+
+  .dialog-cont {
+    width:100%;
+    height: 850px;
+    padding: 15px;
+    overflow-y: scroll;
+    background: url("../../../../assets/images/main/components_long_bg.png") no-repeat;
+    background-size: cover;
+
+    .dialog-left {
+      width: 520px;
+      float: left;
+    }
+    .dialog-right {
+      width: 520px;
+      float: right;
+    }
+  }
+
+  .dialog-list {
+    width: 100%;
+    display: flex;
+    justify-content: space-between !important;
+    margin-bottom: 20px;
+
+    .dialog-item {
+      width: 100%;
+    }
+
+    .dialog-item-cont {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 40px;
+    }
+
+    .wid100 {
+      width: 100%;
+
+      .content-title {
+        width: 100%;
+        background: url("../../../../assets/images/main/title_pro_long.png") no-repeat;
+      }
+    }
+  }
+
+  .content-title {
+    width: 100%;
+    height: 26px;
+    background: url("../../../../assets/images/main/title_pro.png") no-repeat;
+    background-size: 100% 100%;
+    font-family: "PingFangSC";
+    font-size: 16px;
+    font-weight: bold;
+    color: #00ffff;
+    padding-left: 25px;
+    .title {
+      display: block;
+      position: relative;
+      top:-5px;
+    }
+  }
+
+  .content {
+    margin-top: 20px;
+    .rate-area {
+      position: relative;
+      img {
+        width: 198px;
+        height: 114px;
+      }
+      .rate {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        color: #fff;
+        .rate-data {
+          display: flex;
+          flex-direction: row;
+          align-items: baseline;
+          color: #ffba44;
+          .data {
+            font-family: "electronicFont";
+            font-size: 30px;
+          }
+          .unit {
+            font-size: 12px;
+          }
+        }
+        .desc {
+          font-size: 12px;
+          width: 58px;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .content-title {
+    width: 230px;
+    height: 26px;
+    background: url("../../../../assets/images/service_new/title_pro.png")
+    no-repeat;
+    background-size: 100% 100%;
+    font-family: "PingFangSC";
+    font-size: 16px;
+    font-weight: bold;
+    color: #00ffff;
+    padding-left: 25px;
+    .title {
+      display: block;
+      position: relative;
+      top: -3px;
+    }
+  }
+  .content-title.long {
+    width: 100%;
+    height: 26px;
+    background: url("../../../../assets/images/service_new/title_pro_long.png")
+    no-repeat;
+    background-size: 100% 100%;
+    font-family: "PingFangSC";
+    font-size: 16px;
+    font-weight: bold;
+    color: #00ffff;
+    padding-left: 25px;
+    .title {
+      display: block;
+      position: relative;
+      top: -3px;
+    }
+  }
+
+  .title-format {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    img {
+      width: 6px !important;
+      height: 24px !important;
+      margin-right: 6px;
+    }
+    .title-info {
+      display: flex;
+      flex-direction: column;
+      font-size: 14px;
+      color: #ffffff;
+      .title-en {
+        font-size: 8px;
+        color: #ffffff;
+        opacity: 0.4;
+      }
+    }
+  }
+
+  .content {
+    margin-top: 20px;
+
+    .total-data {
+      display: flex;
+      align-items: baseline;
+      color: #19fcde;
+      margin-top: 4px;
+      .total {
+        font-size: 35px;
+        font-family: "electronicFont";
+      }
+      .unit {
+        font-size: 12px;
+      }
+    }
+
+    .rate-area {
+      position: relative;
+      margin-left: 35px;
+      margin-top: 25px;
+      img {
+        width: 168px;
+        height: 97px;
+      }
+      .rate {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: -10px;
+        color: #fff;
+        .rate-data {
+          display: flex;
+          flex-direction: row;
+          align-items: baseline;
+          color: #ffba44;
+          .data {
+            font-size: 30px;
+            font-family: "electronicFont";
+          }
+          .unit {
+            font-size: 12px;
+          }
+        }
+        .desc {
+          font-size: 12px;
+          text-align: center;
+        }
+      }
+    }
+    .chart-area {
+      margin-top: 50px;
+    }
+  }
+
+  .other-cont {
+    display: flex;
+
+    .icon {
+      display: block;
+      width: 70px;
+      height: auto;
+    }
+    .other-info {
+      padding-left: 2px;
+
+      .desc {
+        font-size: 12px;
+        color: #ffffff;
+        font-weight: bold;
+      }
+      .num-info {
+        width: 100%;
+        padding-top: 2px;
+        display: flex;
+        align-items: center;
+
+        .num {
+          font-size: 30px;
+          color: #19fcde;
+          font-weight: bold;
+          font-family: "electronicFont";
+        }
+        .unit {
+          font-size: 12px;
+          color: #00ffff;
+          font-weight: 500;
+          position: relative;
+          top: 4px;
+        }
+        .mar {
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+
+  .data-list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 20px 0 20px;
+    .data-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      flex: 1;
+      // border-right: 1px solid rgba(25, 252, 222, 0.2);
+      .data-detail {
+        display: flex;
+        flex-direction: row;
+        align-items: baseline;
+        color: #00ffff;
+        margin-top: 11px;
+        font-size: 12px;
+        .data {
+          font-size: 30px;
+          font-family: "electronicFont";
+        }
+      }
+    }
+    .data-item:last-child {
+      border-right: none;
+    }
+  }
+
+  .mar {
+    margin-bottom: 15px;
+  }
+  .data-left {
+    width: auto;
+
+    .data-item {
+      width: auto;
+      margin-bottom: 23px;
+
+      .data-fir {
+        display: flex;
+        align-items: center;
+
+        .icon {
+          width: 15px;
+          height: 15px;
+          margin-right: 6px;
+        }
+        .name {
+          font-size: 14px;
+          color: #ffffff;
+        }
+      }
+      .data-snd {
+        display: flex;
+        align-items: center;
+        padding-top: 2px;
+
+        .num {
+          font-size: 32px;
+          color: #00ffff;
+          font-family: "electronicFont";
+        }
+        .unit {
+          font-size: 12px;
+          color: #00ffff;
+          font-weight: 500;
+          position: relative;
+          top: 5px;
+          left: 2px;
+        }
+      }
+    }
+  }
+  .data-right {
+    padding-top: 3px;
+
+    .circle {
+      width: 100px;
+      height: 100px;
+      background: url("../../../../assets/images/service_new/circle.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+
+      .value {
+        display: flex;
+        align-items: center;
+        font-size: 32px;
+        color: #00ffff;
+        font-family: "electronicFont";
+        position: relative;
+        top: 15px;
+      }
+      .unit {
+        font-size: 12px;
+        color: #00ffff;
+        font-weight: 500;
+        position: relative;
+        top: 5px;
+        left: 2px;
+      }
+    }
+  }
+
+  .choose-area {
+    margin: 20px 0;
+    .choose-item {
+      width: 104px;
+      height: 30px;
+      line-height: 30px;
+      background: url("../../../../assets/images/main/choose_bg.png") no-repeat;
+      background-size: 100% 100%;
+      margin-right: 16px;
+      padding-left: 12px;
+      color: #00ffff;
+      cursor: pointer;
+    }
+  }
+
+  .table-cont {
+    height: 500px;
+    overflow: auto;
+
+    .table-top {
+      width: 100%;
+      height: 26px;
+      background: url("../../../../assets/images/building_guarantee/img_11.png")
+      no-repeat;
+      background-size: 100% 100%;
+      padding: 0 25px 0 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 12px;
+      color: #00ffff;
+    }
+    .table-bot {
+      height: 450px;
+      overflow: auto;
+      .table-list {
+        width: 100%;
+        height: 38px;
+        padding: 0 25px 0 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 12px;
+        color: #ffffff;
+        font-weight: 500;
+      }
+    }
+  }
+  .list-area {
+    display: flex;
+    flex-direction: column;
+    padding: 0px 15px 0;
+    .list-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 12px;
+      color: #ffffff;
+      margin-bottom: 10px;
+      flex: 1;
+      .item-1 {
+        width: 8%;
+      }
+      .item-2 {
+        width: 18%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .item-3 {
+        width: 15%;
+      }
+      .item-4,
+      .item-5 {
+        width: 13%;
+      }
+      .item-6,
+      .item-7 {
+        width: 22%;
+      }
+    }
+    .list-title {
+      color: #00ffff !important;
+      padding: 4px 0;
+      background: url("../../../../assets/images/main/title_line.png") no-repeat;
+      background-size: 100% 100%;
+      margin-bottom: 10px !important;
+    }
+  }
+  .lift-seat{
+    width: 244px;
+    height: 104px;
+    display: flex;
+    justify-content: center; /* 水平居中 */
+  }
+  .car-rite{
+    margin-top: 10px;
+    margin-left: 10px;
+    width: 58px;
+    height: 56px;
+    img{
+      width: 58px;
+      height: 56px;
+    }
+
+  }
+  .content-tenter {
+    width: 100%;
+    height: 26px;
+    background: url("../../../../assets/images/main/title_pro.png") no-repeat;
+    background-size: 100% 100%;
+    font-family: "PingFangSC";
+    font-size: 16px;
+    font-weight: bold;
+    color: #00ffff;
+    padding-left: 25px;
+    .title {
+      display: block;
+      position: relative;
+      top:-5px;
+    }
+  }
+  .sdient{
+
+    display: flex; /* 使用 Flexbox */
+    align-items: center; /* 垂直居中 */
+  }
+  .num{
+    padding-top: 5px;
+    font-size: 32px;
+    color:#00FFFF;
+    font-family: 'electronicFont';
+    .nim{
+      font-size: 10px;
+    }
+  }
+  .asjdjfkaf{
+    width: 100%;
+  }
+  .table-bot{
+    width:100%;
+
+    .table-list{
+      width:100%;
+      height:30px;
+      margin-top: 3px;
+      padding:5px 25px 0 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size:14px;
+      color:#FFFFFF;
+      font-weight: 500;
+    }
+    .table-list:hover{
+      cursor: pointer;
+    }
+  }
+  .said{
+    width: 1px;
+    height: 13px;
+    background-color: #00FFFF;
+  }
+  .table-list{
+    width:100%;
+    height:30px;
+    margin-top: 3px;
+    padding:5px 25px 0 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size:14px;
+    color:#FFFFFF;
+    font-weight: 500;
+  }
+  .data-left {
+    width: auto;
+
+    .data-item {
+      width: auto;
+      margin-bottom: 23px;
+
+      .data-fir {
+        display: flex;
+        align-items: center;
+
+        .icon {
+          width: 15px;
+          height: 15px;
+          margin-right: 6px;
+        }
+        .name {
+          font-size: 14px;
+          color: #ffffff;
+        }
+      }
+      .data-snd {
+        display: flex;
+        align-items: center;
+        padding-top: 2px;
+
+        .num {
+          font-size: 32px;
+          color: #00ffff;
+          font-family: "electronicFont";
+        }
+        .unit {
+          font-size: 12px;
+          color: #00ffff;
+          font-weight: 500;
+          position: relative;
+          top: 5px;
+          left: 2px;
+        }
+      }
+    }
+  }
+  .data-chart {
+    margin-top: 12px !important;
+    margin-bottom: 10px !important;
+  }
+
+  ::-webkit-scrollbar {
+    display: none;
+    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/main.vue

@@ -13,22 +13,25 @@
               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">
             <terminal-data :key="appOrg"></terminal-data>
           </div>
         </div>
-        <div class="left-bottom">
+        <div class="left-bottom"
+             @click="showDialog(2)"
+             @mouseover="showDialog(2)"
+        >
           <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-stock :key="appOrg"></car-stock>
           </div>
         </div>
@@ -127,7 +130,7 @@
               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">
             <car-warning :key="appOrg"></car-warning>
@@ -140,7 +143,7 @@
               src="@/assets/images/main/cont_title_bg.png"
               alt=""
             />
-            <div class="cont-title">车辆终端安装情况</div>
+            <div class="cont-title">成本管理</div>
           </div>
           <div class="components-item">
             <car-terminal :key="appOrg"></car-terminal>
@@ -161,7 +164,10 @@
       <car-warning-dialog
         v-if="dialogType === 4"
         @closeDialog="closeDialog"
-      ></car-warning-dialog>
+      ></car-warning-dialog><car-stock-dialog
+        v-if="dialogType === 2"
+        @closeDialog="closeDialog"
+      ></car-stock-dialog>
     </div>
   </div>
 </template>
@@ -176,6 +182,8 @@ 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 CarStockDialog from "@/views/screen/logistics/car/carStockDialog.vue";
+
 
 export default {
   name: "OfficialMain",
@@ -188,6 +196,7 @@ export default {
     CarTerminal,
     TerminalDataDialog,
     CarWarningDialog,
+    CarStockDialog,
   },
   props: {
     appOrg: {

src/views/screen/official/terminalData.vue

@@ -1,97 +1,303 @@
 <template>
   <div class="main-data data-terminal-online">
     <!-- <div class="title-area">各单位终端数据</div> -->
-    <div class="content-area">
-      <div class="content-left">
-        <div class="content-title">
-          <span class="title">终端设备整体在线率</span>
+    <div class="dialog-cont">
+      <div class="dialog-left">
+        <div class="content-title long">
+          <span class="title">公务车实有数</span>
         </div>
-        <div class="content">
-          <div class="rate-area">
-            <img src="@/assets/images/main/rate_bg.png" class="icon" alt="" />
-            <div class="rate">
-              <div class="rate-data">
-                <div class="data">56</div>
-                <div class="unit">%</div>
+        <div class="dialog-list">
+          <div class="content-left">
+            <div class="dialog-list">
+              <div class=" content-our">
+                <div class="content-two">
+                  <div class="img-car">
+                    <img src="@/assets/images/main/choose_bg9.png">
+                  </div>
+                  <div class="data-snd">
+                    <div class="names">56<span class="nums">万辆</span></div>
+                  </div>
+                </div>
+              </div>
+              <div class="saddddf">
+                <div class="naw">车辆用途</div>
+                <div class="content">
+                  <div class="charts-cont">
+                    <pie-chart
+                      :chart-data="pieData"
+                      :legend="pieLegend"
+                      :center="pieCenter"
+                      width="220px"
+                      height="140px"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="dialog-list">
+              <div>
+                <div class="naw">车辆类型</div>
+                <div class="content">
+                  <div class="charts-cont">
+                    <pie-chart
+                      :chart-data="totalPieData"
+                      :legend="totalPieLegend"
+                      :center="totalCenter"
+                      width="220px"
+                      height="140px"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div>
+                <div class="naw">动力类型</div>
+                <div class="content">
+                  <div class="charts-cont">
+                    <pie-chart
+                      :chart-data="catePieData"
+                      :legend="catePieLegend"
+                      :center="catePieCenter"
+                      width="220px"
+                      height="140px"
+                    />
+                  </div>
+                </div>
               </div>
-              <div class="desc">整体在线率</div>
             </div>
           </div>
         </div>
       </div>
-      <div class="content-right">
-        <div class="content-title">
-          <span class="title">设备在线数</span>
-        </div>
-        <div class="content">
-          <div class="data-content flex-row align-items-center">
-            <div class="data-left">
-              <div class="data-item">
-                <div class="data-fir">
-                  <img
-                    src="@/assets/images/service_new/img_2.png"
-                    class="icon"
-                  />
-                  <div class="name">离线数</div>
+      <div class="content-area">
+        <div class="contentr-left"  >
+          <div class="dialog-item wid100">
+            <div class="content-title">
+              <span class="title">公务车编制概况</span>
+            </div>
+            <div>
+              <div class="content-maper">
+                <div class="content-one">
+                  <div class="img-car">
+                    <img src="@/assets/images/main/choose_bg9.png">
+                  </div>
+                  <div class="">
+                    <div class="namer">公务车编制数</div>
+                    <div class="names">56<span class="nums">万辆</span></div>
+                  </div>
                 </div>
-                <div class="data-snd">
-                  <div class="num">56</div>
-                  <div class="unit">个</div>
+              </div>
+              <div class="content-maper">
+                <div class="content-one">
+                  <div class="img-car">
+                    <img src="@/assets/images/main/choose_bg9.png">
+                  </div>
+                  <div class="">
+                    <div class="namer">公务车缺勤率</div>
+                    <div class="names">56<span class="nums">%</span></div>
+                  </div>
                 </div>
               </div>
-              <div class="data-item">
-                <div class="data-fir">
-                  <img
-                    src="@/assets/images/service_new/img_1.png"
-                    class="icon"
-                  />
-                  <div class="name">在线数</div>
+            </div>
+          </div>
+        </div>
+        <div class="contentr-left"  >
+          <div class="dialog-item wid100">
+            <div class="content-title">
+              <span class="title">公务车编制概况</span>
+            </div>
+            <div>
+              <div class="content-maper">
+                <div class="content-one">
+                  <div class="content">
+                    <div class="rate-area">
+                      <img src="@/assets/images/main/rate_bg.png" class="img-cry"  />
+                      <div class="rate">
+                        <div class="witeh">年度增加</div>
+                        <div class="witeh">车辆数</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="">
+
+                    <div class="names">56<span class="nums">万辆</span></div>
+                  </div>
                 </div>
-                <div class="data-snd">
-                  <div class="num">56</div>
-                  <div class="unit">个</div>
+              </div>
+              <div class="content-maper">
+                <div class="content-one">
+                  <div class="content">
+                    <div class="rate-area">
+                      <img src="@/assets/images/main/rate_bg.png" class="img-cry"  />
+                      <div class="rate">
+                        <div class="breaker">年度减少</div>
+                        <div class="breaker">车辆数</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="">
+
+                    <div class="names">56<span class="nums">万两</span></div>
+                  </div>
                 </div>
               </div>
             </div>
-            <div class="data-right">
-              <pie-chart
-              v-if="show"
-                :chart-data="pieData"
-                :legend="pieLegend"
-                :center="pieCenter"
-                :radius="pieRadius"
-                width="150px"
-                height="150px"
-              />
+          </div>
+        </div>
+
+
+        <!--          <div class="content-right">-->
+        <!--            <div class="dialog-item wid100">-->
+        <!--              <div class="content-title">-->
+        <!--                <span class="title">公务车年度车辆数</span>-->
+        <!--              </div>-->
+        <!--              <div class="">-->
+        <!--                <div class="content">-->
+        <!--                  <div class="rate-area">-->
+        <!--                    <img src="@/assets/images/main/rate_bg.png" class="img-car" alt="" />-->
+        <!--                    <div class="rate">-->
+        <!--                      <div class="rate-data">-->
+        <!--                        <div class="data">56</div>-->
+        <!--                        <div class="unit">%</div>-->
+        <!--                      </div>-->
+        <!--                      <div class="desc">整体在线率</div>-->
+        <!--                    </div>-->
+        <!--                  </div>-->
+        <!--                </div>-->
+        <!--              </div>-->
+        <!--              <div class="">-->
+        <!--                <div class="content">-->
+        <!--                  <div class="rate-area">-->
+        <!--                    <img src="@/assets/images/main/rate_bg.png" class="img-car" alt="" />-->
+        <!--                    <div class="rate">-->
+        <!--                      <div class="rate-data">-->
+        <!--                        <div class="data">56</div>-->
+        <!--                        <div class="unit">%</div>-->
+        <!--                      </div>-->
+        <!--                      <div class="desc">整体在线率</div>-->
+        <!--                    </div>-->
+        <!--                  </div>-->
+        <!--                </div>-->
+        <!--              </div>-->
+        <!--              </div>-->
+        <!--            </div>-->
+        <!--          </div>-->
+      </div>
+
+      <div class="content-ear">
+        <div class="content">
+          <div class="content-title long">
+            <span class="title">单位健康分析</span>
+          </div>
+          <div class="table-cont">
+            <div class="table-top">
+              <div class="fir">单位名称</div>
+              <div class="snd">车辆总数</div>
+              <div class="thd">健康得分</div>
+            </div>
+            <div class="table-roll">
+              <div class="table-bot">
+                <div class="table-list">
+
+                  <div class="fir">国网山西省晋源区电力公司</div>
+                  <div class="snd">8</div>
+                  <div class="smail"></div>
+                  <div class="thd">61.58</div></div>
+              </div>
+              <div class="table-bot">
+                <div class="table-list">
+
+                  <div class="fir">国网山西省晋源区电力公司</div>
+                  <div class="snd">8</div>
+                  <div class="smail"></div>
+                  <div class="thd">61.58</div></div>
+              </div>
+              <div class="table-bot">
+                <div class="table-list">
+
+                  <div class="fir">国网山西省晋源区电力公司</div>
+                  <div class="snd">8</div>
+                  <div class="smail"></div>
+                  <div class="thd">61.58</div></div>
+              </div>
+              <div class="table-bot">
+                <div class="table-list">
+                  <div class="fir">国网山西省晋源区电力公司</div>
+                  <div class="snd">8</div>
+                  <div class="smail"></div>
+                  <div class="thd">61.58</div></div>
+              </div>
+              <div class="table-bot">
+                <div class="table-list">
+
+                  <div class="fir">国网山西省晋源区电力公司</div>
+                  <div class="snd">8</div>
+                  <div class="smail"></div>
+                  <div class="thd">61.58</div></div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="content-area" style="padding-top: 0;">
-      <div class="content" style="margin-top: 0;">
-        <div class="content-title long">
-          <span class="title">各单位终端设备在线情况</span>
+
+
+      <div class="content-ear">
+        <div class="content">
+          <div class="content-title long">
+            <span class="title">单车列表分析</span>
+          </div>
+          <div class="table-cont">
+            <div class="table-top">
+              <div class="fir">单位名称</div>
+              <div class="snd">车牌号码</div>
+              <div class="thd">健康得分</div>
+            </div>
+            <div class="table-roll">
+              <div class="table-bot">
+                <div class="table-list">
+
+                  <div class="fir">国网山西省晋源区电力公司</div>
+                  <div class="snd">晋C52648</div>
+                  <div class="smail"></div>
+                  <div class="thd">61.58</div></div>
+              </div>
+              <div class="table-bot">
+                <div class="table-list">
+
+                  <div class="fir">国网山西省晋源区电力公司</div>
+                  <div class="snd">晋C52648</div>
+                  <div class="smail"></div>
+                  <div class="thd">61.58</div></div>
+              </div>
+              <div class="table-bot">
+                <div class="table-list">
+
+
+                  <div class="fir">国网山西省晋源区电力公司</div>
+                  <div class="snd">晋C52648</div>
+                  <div class="smail"></div>
+                  <div class="thd">61.58</div></div>
+              </div>
+              <div class="table-bot">
+                <div class="table-list">
+
+
+                  <div class="fir">国网山西省晋源区电力公司</div>
+                  <div class="snd">晋C52648</div>
+                  <div class="smail"></div>
+                  <div class="thd">61.58</div></div>
+              </div>
+              <div class="table-bot">
+                <div class="table-list">
+
+                  <div class="fir">国网山西省晋源区电力公司</div>
+                  <div class="snd">晋C52648</div>
+                  <div class="smail"></div>
+                  <div class="thd">61.58</div></div>
+              </div>
+            </div>
+          </div>
         </div>
-<!--        <div class="choose-area flex-row align-items-center">
-          <div class="choose-item">年度统计</div>
-          <div class="choose-item">2024年</div>
-        </div>-->
-        <bar-chart
-        v-if="show"
-          :chart-data="barData"
-          :x-axis="barAxis"
-          :y-axis="barYAxis"
-          :grid="barGrid"
-          :legend="barLegend"
-          y-color="#FFF"
-          l-color="#FFF"
-          width="500px"
-          height="280px"
-        />
       </div>
     </div>
-    <div class="mask"></div>
   </div>
 </template>
 
@@ -119,32 +325,285 @@ export default {
   },
   data() {
     return {
-      dataList: [
-        {
-          name: "离线数",
-          data: "56",
-          unit: "个",
-        },
-        {
-          name: "在线数",
-          data: "56",
-          unit: "个",
-        },
-      ],
       //在线数
       pieData: [],
+      catePieData: [
+        { value: 40, name: "新能源汽车" },
+        { value: 20, name: "燃油汽车" },
+      ],
+      totalPieData: [
+        { value: 110, name: "商务车" },
+        { value: 120, name: "越野车" },
+        { value: 130, name: "小型客车" },
+        { value: 140, name: "大型客车" },
+        { value: 150, name: "小轿车" },
+      ],
+      catePieLegend: {
+        orient: "vertical",
+        top: 60,
+        right: 23,
+        itemWidth: 8, // 设置图例标记的宽度
+        itemHeight: 8, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
+      },
+      totalPieLegend: {
+        top: 20,
+        right: 10,
+        itemWidth: 8,
+        itemHeight: 8,
+        orient: "vertical",
+        textStyle: {
+          color: "#FFF",
+        },
+      },
       pieLegend: {
-        show: false,
+        orient: "vertical",
+        top: 50,
+        right: 30,
+        itemWidth: 8, // 设置图例标记的宽度
+        itemHeight: 8, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
       },
-      pieCenter: ["50%", "50%"],
+      pieCenter: ["27%", "50%"],
+      totalCenter: ["30%", "50%"],
+      catePieCenter: ["27%", "50%"],
       pieRadius: ["35%", "50%"],
+
       //各单位终端在线
       barData: [],
       barAxis: {},
       barYAxis: {},
       barGrid: {},
       barLegend: {},
-      show:true
+
+      personInOutBarData: [
+        {
+          name: "员工",
+          type: "bar",
+          itemStyle: {
+            color: "#43DCDB",
+            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
+          },
+          barWidth: 10,
+          data: [110, 120, 130, 140, 150, 160, 155, 145, 135, 125, 115, 15],
+        },
+        {
+          name: "访客",
+          type: "bar",
+          itemStyle: {
+            color: "#FFD296",
+            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
+          },
+          barWidth: 10,
+          data: [10, 20, 30, 40, 50, 60, 55, 45, 35, 25, 15, 5],
+        },
+      ],
+      personInOutBarAxis: {
+        type: "category",
+        data: [
+          "01月",
+          "02月",
+          "03月",
+          "04月",
+          "05月",
+          "06月",
+          "07月",
+          "08月",
+          "09月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#08595B",
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      personInOutBarYaxis: {
+        type: "value",
+        boundaryGap: [0, 0.01],
+        name: "人",
+        nameTextStyle: {
+          color: "#fff",
+        },
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      personInOutBarLegend: {
+        top: 0,
+        orient: "horizontal",
+        right: 0,
+        itemWidth: 17, // 设置图例标记的宽度
+        itemHeight: 10, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
+      },
+      barGrid: {
+        top: 30,
+        left: "2%",
+        right: "5%",
+        containLabel: true,
+        bottom: 0,
+      },
+      departmentPersonInOutBarData: [
+        {
+          name: "员工",
+          type: "bar",
+          itemStyle: {
+            color: "#43DCDB",
+            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
+          },
+          barWidth: 10,
+          data: [110, 150, 160, 135, 115, 15],
+        },
+        {
+          name: "访客",
+          type: "bar",
+          itemStyle: {
+            color: "#FFD296",
+            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
+          },
+          barWidth: 10,
+          data: [10, 20, 30, 40, 50, 60, 55, 45, 35, 25, 15, 5],
+        },
+      ],
+      departmentPersonInOutBarAxis: {
+        type: "category",
+        data: ["财务资产部", "离退休工作部", "后勤保障部", "物资管理部", "数字化工作部", "纪委办公室"],
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#08595B",
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      departmentPersonInOutBarYaxis: {
+        type: "value",
+        boundaryGap: [0, 0.01],
+        name: "人",
+        nameTextStyle: {
+          color: "#fff",
+        },
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      departmentPersonInOutBarLegend: {
+        top: 0,
+        orient: "horizontal",
+        right: 0,
+        itemWidth: 17, // 设置图例标记的宽度
+        itemHeight: 10, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
+      },
+      visitorDataList: [
+        {
+          name: "于俊",
+          time: "2024 / 11 / 15 15:01",
+          department: "财务资产部",
+        },
+        {
+          name: "于俊",
+          time: "2024 / 11 / 15 14:58",
+          department: "财务资产部",
+        },
+        {
+          name: "于俊",
+          time: "2024 / 11 / 15 14:55",
+          department: "财务资产部",
+        },
+        {
+          name: "于俊",
+          time: "2024 / 11 / 15 14:01",
+          department: "财务资产部",
+        },
+      ],
+      warningList: [
+        {
+          name: "国网太原供电公司",
+          data1: 356,
+          data2: 100,
+          data3: 56,
+          data4: 67,
+          data5: 133,
+        },
+        {
+          name: "国网临汾供电公司",
+          data1: 324,
+          data2: 80,
+          data3: 95,
+          data4: 63,
+          data5: 86,
+        },
+        {
+          name: "国网晋城供电公司",
+          data1: 286,
+          data2: 80,
+          data3: 65,
+          data4: 46,
+          data5: 95,
+        },
+        {
+          name: "国网长治供电公司",
+          data1: 275,
+          data2: 84,
+          data3: 72,
+          data4: 63,
+          data5: 56,
+        },
+        {
+          name: "国网运城供电公司",
+          data1: 268,
+          data2: 70,
+          data3: 65,
+          data4: 73,
+          data5: 60,
+        },
+      ],
     };
   },
   created() {
@@ -312,11 +771,12 @@ export default {
   }
   .content-title.long {
     width: 100%;
+    margin-left: 15px;
     background: url("../../../assets/images/main/title_pro_long.png") no-repeat !important;
   }
 
   .content {
-    margin-top: 20px;
+
     .title-format {
       display: flex;
       flex-direction: row;
@@ -522,7 +982,143 @@ export default {
         cursor: pointer;
       }
     }
+  .dialog-left {
+    width: 520px;
+    float: left;
+  }
+  .dialog-right {
+    width: 520px;
+    float: right;
+  }
+  .dialog-list {
+    width: 100%;
+    display: flex;
+    justify-content: space-between !important;
+    margin-bottom: 0px;
+
+    .dialog-item {
+      width: calc(50% - 20px);
+    }
+
+    .dialog-item-cont {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 40px;
+    }
+
+    .wid100 {
+      width: 100%;
+
+      .content-title {
+        width: 100%;
+        background: url("../../../assets/images/main/title_pro_long.png")
+        no-repeat;
+      }
+    }
+  }
+  .content-left{
+    width: 520px;
+    height:320px;
+    float: left;
+  }
+  .content-our{
+    width: 50%;
+    height: 130px;
+    display: flex;
+    padding-top: 40px;
+    padding-left: 10px;
+    //align-items: center;
+    .img-car{
+      width: 105px;
+      height: 60px;
+    }
+    .content-two{
+      width: 181.5px;
+      height: 81px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .names{
+      font-size: 32px;
+      color:#00FFFF;
+      font-family: 'electronicFont';
+      .nums{
+        font-size:10px;
+        color:#00FFFF;
+        font-weight: 500;
+        position: relative;
+
+        left:2px;
+      }
+    }
+  }
+  .names{
+    font-size: 32px;
+    color:#00FFFF;
+    font-family: 'electronicFont';
+    .nums{
+      font-size:10px;
+      color:#00FFFF;
+      font-weight: 500;
+      position: relative;
 
+      left:2px;
+    }
+  }
+  .content-title {
+    width: 230px;
+    height: 26px;
+    background: url("../../../assets/images/main/title_pro.png") no-repeat !important;
+    background-size: 100% 100%;
+    font-family: "PingFangSC";
+    font-size: 16px;
+    font-weight: bold;
+    color: #00ffff;
+    padding-left: 20px !important;
+    .title {
+      display: block;
+      position: relative;
+      top: -5px !important;
+    }
+  }
+  .dialog-list {
+    width: 100%;
+    margin-left: 10px;
+    display: flex;
+    justify-content: space-between !important;
+    margin-bottom: 0px;
+
+    .dialog-item {
+      width: calc(50% - 20px);
+    }
+
+    .dialog-item-cont {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 40px;
+    }
+
+    .wid100 {
+      width: 100%;
+
+      .content-title {
+        width: 100%;
+        background: url("../../../assets/images/main/title_pro_long.png")
+        no-repeat;
+      }
+    }
+  }
+  .naw{
+    color: white;
+  }
+  .saddddf{
+    display: flex;
+    flex-direction: column;
+
+  }
   ::-webkit-scrollbar {
     width: 3px;
     height: 3px;

src/views/screen/official/terminalDataDialog.vue

@@ -2,19 +2,12 @@
   <div
     class="main-data terminal-dialog-area"
     @click.stop="preventDefault"
-
+    @mouseleave="leaveFun"
   >
-<!--    <div class="dialog-title">-->
-<!--      <img src="@/assets/images/main/cont_title_bg.png" />-->
-<!--      <div class="title">资源台账</div>-->
-<!--    </div>-->
-<!--    <div class="dialog-cont">-->
-<!--      <div class="dialog-left">-->
-<!--        <div class="dialog-list">-->
-
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
+    <div class="dialog-title">
+      <img src="@/assets/images/main/cont_title_bg.png" />
+      <div class="title">资源台账</div>
+    </div>
     <div class="dialog-cont">
       <div class="dialog-left">
         <div class="content-title long">