"资源台账"

src/views/screen/official/terminalDataDialog.vue

@@ -4,105 +4,150 @@
     @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-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-cont">
       <div class="dialog-left">
+        <div class="content-title long">
+          <span class="title">公务车实有数</span>
+        </div>
         <div class="dialog-list">
           <div class="content-left">
-            <div class="content-title">
-              <span class="title">终端设备整体在线率</span>
+            <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="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>
+                <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 class="desc">整体在线率</div>
                 </div>
               </div>
             </div>
+            </div>
           </div>
+      </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>
+               <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>
+           </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>
-                    <div class="data-snd">
-                      <div class="num">56</div>
-                      <div class="unit">个</div>
+            <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 class="data-item">
-                    <div class="data-fir">
-                      <img
-                        src="@/assets/images/service_new/img_1.png"
-                        class="icon"
-                      />
-                      <div class="name">在线数</div>
-                    </div>
-                    <div class="data-snd">
-                      <div class="num">56</div>
-                      <div class="unit">个</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 class="data-right">
-                  <pie-chart
-                    position="left"
-                    :chart-data="pieData"
-                    :legend="pieLegend"
-                    :center="pieCenter"
-                    :radius="pieRadius"
-                    width="150px"
-                    height="150px"
-                  />
-                </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="data-chart">
-              <!--              <div class="choose-area flex-row align-items-center">
-                <div class="choose-item">年度统计</div>
-                <div class="choose-item">2024年</div>
-              </div>-->
-              <bar-chart
-                :chart-data="barData"
-                :x-axis="barAxis"
-                :y-axis="barYAxis"
-                :grid="barGrid"
-                :legend="barLegend"
-                y-color="#FFF"
-                l-color="#FFF"
-                width="500px"
-                height="300px"
-              />
+              </div>
             </div>
           </div>
         </div>
@@ -113,11 +158,6 @@
               <span class="title">各单位车辆预警统计列表</span>
             </div>
             <div class="content">
-              <!--              <div class="choose-area flex-row align-items-center">-->
-              <!--                <div class="choose-item">单位</div>-->
-              <!--                <div class="choose-item">异动类型</div>-->
-              <!--                <div class="choose-item">预警排序</div>-->
-              <!--              </div>-->
               <div class="list-area">
                 <div class="list-item list-title">
                   <div class="item item-1">序号</div>
@@ -134,14 +174,7 @@
                   class="list-item"
                 >
                   <div class="item item-1">{{ index + 1 }}</div>
-                  <!-- <el-tooltip
-                    class="item"
-                    effect="dark"
-                    L:content="item.name"
-                    placement="top-start"
-                  > -->
                     <div class="item item-2">{{ item.name }}</div>
-                  <!-- </el-tooltip> -->
                   <div class="item item-3">{{ item.data1 }}</div>
                   <div class="item item-4">{{ item.data2 }}</div>
                   <div class="item item-5">{{ item.data3 }}</div>
@@ -154,7 +187,6 @@
         </div>
       </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -175,10 +207,50 @@ export default {
     return {
       //在线数
       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%"],
 
       //各单位终端在线
@@ -599,7 +671,7 @@ export default {
     width: 100%;
     display: flex;
     justify-content: space-between !important;
-    margin-bottom: 20px;
+    margin-bottom: 0px;
 
     .dialog-item {
       width: calc(50% - 20px);
@@ -645,7 +717,6 @@ export default {
   }
 
   .content {
-    margin-top: 20px;
     .title-format {
       display: flex;
       flex-direction: row;
@@ -706,7 +777,6 @@ export default {
     }
   }
   .content {
-    margin-top: 20px;
     .title-format {
       display: flex;
       flex-direction: row;
@@ -1004,7 +1074,92 @@ export default {
     width: 3px;
     height: 3px;
   }
+  .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: 81px;
+    }
+    .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;
+      }
+    }
+  }
+  .saddddf{
+    display: flex;
+    flex-direction: column;
+
+  }
+  .naw{
+    color: white;
+  }
+  .content-area {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 15px 20px 0 15px;
+  }
+  .contentr-left{
+    width: 520px;
+    height:240px;
+    float: left;
+  }
+  .content-right{
+    width: 520px;
+    height:240px;
+    float: left;
+  }
+  .content-one{
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center;    /* 垂直居中 */
+    height: 100%;           /* 确保父容器有高度 */
+  }
+  .names{
+    font-size: 32px;
+    color:#00FFFF;
+    font-family: 'electronicFont';
+    .nums{
+      font-size:10px;
+      color:#00FFFF;
+      font-weight: 500;
+      position: relative;
+
+      left:2px;
+    }
+
+  }
+  .namer{
+    color: white;
+    font-size: 10px;
+  }
   ::-webkit-scrollbar-thumb {
     //滑块部分
     // border-radius: 5px;
@@ -1019,4 +1174,3 @@ export default {
   }
 }
 </style>
-