"资源台账"

src/views/screen/official/terminalDataDialog.vue

@@ -2,7 +2,7 @@
   <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" />-->
@@ -113,79 +113,205 @@
              </div>
            </div>
          </div>
-          <div class="content-right">
+          <div class="contentr-left"  >
             <div class="dialog-item wid100">
               <div class="content-title">
-                <span class="title">公务车年度车辆数</span>
+                <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="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 class="desc">整体在线率</div>
+                    </div>
+                    <div class="">
+
+                      <div class="names">56<span class="nums">万辆</span></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 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 class="desc">整体在线率</div>
+                    </div>
+                    <div class="">
+
+                      <div class="names">56<span class="nums">万两</span></div>
                     </div>
                   </div>
                 </div>
               </div>
+            </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 class="dialog-list">
-          <div class="dialog-item wid100">
-            <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="content">
-              <div class="list-area">
-                <div class="list-item list-title">
-                  <div class="item item-1">序号</div>
-                  <div class="item item-2">单位名称</div>
-                  <div class="item item-3">预警总数</div>
-                  <div class="item item-4">未带工单</div>
-                  <div class="item item-5">超速行驶</div>
-                  <div class="item item-6">节假日车辆异动</div>
-                  <div class="item item-7">封存车辆异动</div>
-                </div>
-                <div
-                  v-for="(item, index) in warningList"
-                  :key="index"
-                  class="list-item"
-                >
-                  <div class="item item-1">{{ index + 1 }}</div>
-                    <div class="item item-2">{{ item.name }}</div>
-                  <div class="item item-3">{{ item.data1 }}</div>
-                  <div class="item item-4">{{ item.data2 }}</div>
-                  <div class="item item-5">{{ item.data3 }}</div>
-                  <div class="item item-6">{{ item.data4 }}</div>
-                  <div class="item item-7">{{ item.data5 }}</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>
+      </div>
     </div>
 </template>
 
@@ -718,14 +844,11 @@ export default {
 
   .content {
     .title-format {
+      width: 150px;
+      height: 80px;
       display: flex;
       flex-direction: row;
       align-items: center;
-      img {
-        width: 6px;
-        height: 24px;
-        margin-right: 6px;
-      }
       .title-info {
         display: flex;
         flex-direction: column;
@@ -742,15 +865,16 @@ export default {
     .rate-area {
       position: relative;
       img {
-        width: 198px;
-        height: 114px;
+        width: 150px;
+        height: 80px;
       }
       .rate {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        width: 100%;
+        width: 150px;
+        height: 60px;
         position: absolute;
         top: 0;
         left: 0;
@@ -813,12 +937,13 @@ export default {
     }
 
     .rate-area {
+      width: 150px;
+      height: 80px;
       position: relative;
-      margin-left: 35px;
-      margin-top: 25px;
+
       img {
-        width: 168px;
-        height: 97px;
+        width: 150px;
+        height: 90px;
       }
       .rate {
         display: flex;
@@ -828,7 +953,7 @@ export default {
         width: 100%;
         position: absolute;
         top: 0;
-        left: -10px;
+
         color: #fff;
         .rate-data {
           display: flex;
@@ -1088,7 +1213,7 @@ export default {
     //align-items: center;
     .img-car{
       width: 105px;
-      height: 81px;
+      height: 60px;
     }
     .content-two{
       width: 181.5px;
@@ -1121,27 +1246,31 @@ export default {
   }
   .content-area {
     display: flex;
+    height: 220px;
     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-one{
+      display: flex;
+      padding-top: 5px;
+      justify-content: center; /* 水平居中 */
+      align-items: center;    /* 垂直居中 */
+      height: 100%;           /* 确保父容器有高度 */
+    }
   }
   .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;
@@ -1156,6 +1285,41 @@ export default {
     }
 
   }
+
+  .img-cry{
+    width: 120px;
+    height: 70px;
+  }
+  .content-maper{
+
+  }
+  .rate-data{
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+}
+  .breaker{
+    color:#FEC72F ;
+    display: flex; /* 使用 Flexbox */
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+  }
+  .said{
+    width: 1px;
+    height: 13px;
+    background-color: #00FFFF;
+  }
+  .content-ear{
+    margin-top: 10px;
+    height: 115px;
+  }
+  .table-roll{
+    height: 50px;
+    overflow:auto;
+  }
+  .witeh{
+    color: #018989;
+  }
   .namer{
     color: white;
     font-size: 10px;