更新滚动组件，增加完成率，增加准点率

package.json

@@ -14,9 +14,9 @@
     "echarts-gl": "^2.0.9",
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
+    "tank-vue3-seamless-scroll": "^1.0.16",
     "vue": "^3.3.11",
-    "vue-router": "^4.2.5",
-    "vue-seamless-scroll": "^1.1.23"
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@types/node": "^20.10.4",

src/assets/img/29.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="82px" height="82px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -3444 -890 )">
+    <path d="M 3485 890.5  C 3507.68 890.5  3525.5 908.32  3525.5 931  C 3525.5 953.68  3507.68 971.5  3485 971.5  C 3462.32 971.5  3444.5 953.68  3444.5 931  C 3444.5 908.32  3462.32 890.5  3485 890.5  Z " fill-rule="nonzero" fill="#015478" stroke="none" fill-opacity="0.996078431372549" />
+  </g>
+</svg>

src/pages/App.vue

@@ -17,5 +17,6 @@ const show = computed(() => store.loading)
     padding: 0;
     box-sizing: border-box;
     user-select: none;
+    font-style: normal;
   }
 </style>

src/pages/views/home/components/HomePage.vue

@@ -13,7 +13,6 @@
                 :key="id"
               >
                 <div>
-                  <!-- <img :src="it.icon"> -->
                   <Icon
                     :name="it.icon"
                     :size="96"
@@ -73,7 +72,6 @@
                 :key="ids"
               >
                 <div>
-                  <!-- <img :src="item.icon"> -->
                   <Icon
                     :name="item.icon"
                     :size="74"
@@ -95,9 +93,67 @@
         <Box
           :width="655"
           :height="622"
-          name="班次完成率"
+          :name="rightContent[1].name"
         >
-          123123
+          <div class="classes">
+            <div class="classes-top">
+              <template
+                v-for="(item, id) in rightContent[1].content[0]"
+                :key="id"
+              >
+                <div>
+                  <Icon
+                    :name="item.icon"
+                    :size="74"
+                  />
+                  <div>
+                    <p>
+                      {{ item.name }}
+                    </p>
+                    <p>
+                      <span>{{ item.num }}</span>
+                      {{ item.util }}
+                    </p>
+                  </div>
+                </div>
+              </template>
+            </div>
+            <div class="classes-scroll">
+              <div class="classes-scroll-head">
+                <span>线路名称</span>
+                <span>
+                  班次
+                  <i>计划/实际</i>
+                </span>
+              </div>
+              <div class="scrollBox">
+                <TankSeamlessScroll
+                  :step-length="60"
+                  :debug="false"
+                  :reverse="false"
+                >
+                  <template
+                    v-for="(item, index) in rightContent[1].content[1]"
+                    :key="index"
+                  >
+                    <div class="classes-scroll-content">
+                      <div>
+                        <div>
+                          <span>{{ item.name }}<i>{{ item.num }}</i></span>
+                          <span>始</span>
+                          <span>{{ item.start }}</span>
+                          <span>终</span>
+                          <span>{{ item.end }}</span>
+                        </div>
+                        <div>{{ item.plan }}/{{ item.pratic }}</div>
+                      </div>
+                      <div>jindutiao</div>
+                    </div>
+                  </template>
+                </TankSeamlessScroll>
+              </div>
+            </div>
+          </div>
         </Box>
         <Box
           :width="655"
@@ -109,9 +165,67 @@
         <Box
           :width="655"
           :height="622"
-          name="发车准点率"
+          :name="rightContent[3].name"
         >
-          123123
+          <div class="classes">
+            <div class="classes-top">
+              <template
+                v-for="(item, id) in rightContent[3].content[0]"
+                :key="id"
+              >
+                <div>
+                  <Icon
+                    :name="item.icon"
+                    :size="74"
+                  />
+                  <div>
+                    <p>
+                      {{ item.name }}
+                    </p>
+                    <p>
+                      <span>{{ item.num }}</span>
+                      {{ item.util }}
+                    </p>
+                  </div>
+                </div>
+              </template>
+            </div>
+            <div class="classes-scroll">
+              <div class="classes-scroll-head">
+                <span>线路名称</span>
+                <span>
+                  班次
+                  <i>计划/实际</i>
+                </span>
+              </div>
+              <div class="scrollBox">
+                <TankSeamlessScroll
+                  :step-length="60"
+                  :debug="false"
+                  :reverse="false"
+                >
+                  <template
+                    v-for="(item, index) in rightContent[3].content[1]"
+                    :key="index"
+                  >
+                    <div class="classes-scroll-content">
+                      <div>
+                        <div>
+                          <span>{{ item.name }}<i>{{ item.num }}</i></span>
+                          <span>始</span>
+                          <span>{{ item.start }}</span>
+                          <span>终</span>
+                          <span>{{ item.end }}</span>
+                        </div>
+                        <div>{{ item.plan }}/{{ item.pratic }}</div>
+                      </div>
+                      <div>jindutiao</div>
+                    </div>
+                  </template>
+                </TankSeamlessScroll>
+              </div>
+            </div>
+          </div>
         </Box>
       </div>
     </template>
@@ -122,6 +236,7 @@
 import Layout from '@/components/layout.vue'
 import { ref } from 'vue'
 import Box from '@/components/box.vue'
+import TankSeamlessScroll from 'tank-vue3-seamless-scroll'
 
 const leftTopCount = ref([
   [
@@ -177,8 +292,72 @@ const rightContent = ref([
         { name: '电池高温', num: 0, icon: '25' }
       ]
     ]
+  },
+  {
+    name: '班次完成率',
+    content: [
+      [
+        {
+          name: '昨日总班次', num: 100, icon: '26', util: '次'
+        },
+        {
+          name: '昨日完成率', num: 100, icon: '27', util: '%'
+        }
+      ],
+      [
+        {
+          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+        },
+        {
+          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+        },
+        {
+          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+        },
+        {
+          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+        },
+        {
+          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+        }
+      ]
+    ]
+  },
+  {
+    name: '',
+    content: []
+  },
+  {
+    name: '发车准点率',
+    content: [
+      [
+        {
+          name: '昨日准点班次数', num: 100, icon: '26', util: '次'
+        },
+        {
+          name: '昨日准点率', num: 100, icon: '29', util: '%'
+        }
+      ],
+      [
+        {
+          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+        },
+        {
+          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+        },
+        {
+          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+        },
+        {
+          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+        },
+        {
+          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+        }
+      ]
+    ]
   }
-])
+] as any)
 </script>
 
 <style lang="scss" scoped>
@@ -296,5 +475,142 @@ const rightContent = ref([
       }
     }
   }
-}
-</style>
+
+  .classes {
+    padding: 20px;
+
+    &-top {
+      display: flex;
+      justify-content: space-between;
+
+      &>div {
+        width: 300px;
+        height: 145px;
+        font-size: 20px;
+        color: #80FFFF;
+        text-align: center;
+        background: rgba(33, 133, 232, 0.098);
+        border: 1px solid rgba(0, 255, 255, 0.298);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &>div {
+          padding-left: 20px;
+          text-align: left;
+
+          &>p:last-child {
+            color: white;
+            font-family: 'Impact Normal', 'Impact', sans-serif;
+
+            &>span {
+              font-size: 34px;
+              font-weight: 400;
+              margin-right: 5px;
+            }
+          }
+        }
+      }
+    }
+
+    &-scroll {
+      &-head {
+        margin-top: 40px;
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 20px;
+        color: #80FFFF;
+
+        &>span:last-child {
+          color: white;
+
+          i {
+            color: #80FFFF;
+          }
+        }
+      }
+
+      &-content {
+        font-family: Arial Normal;
+
+        &>div:first-child {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          &>div:first-child {
+            display: flex;
+            font-size: 18px;
+            align-items: flex-end;
+            text-shadow: none;
+
+            &>span {
+              &:first-child {
+                width: 153px;
+                height: 48px;
+                border-radius: 5px;
+                background: rgba(33, 133, 232, 0.298);
+                border: 3px solid #80FFFF;
+                font-size: 24px;
+                color: white;
+                text-align: center;
+                line-height: 40px;
+                overflow: hidden;
+                margin-right: 10px;
+
+                i {
+                  font-size: 20px;
+                  margin-left: 10px;
+                }
+              }
+
+              &:nth-child(4),
+              &:nth-child(2) {
+                width: 30px;
+                height: 30px;
+                color: #FFFFFF;
+                border-radius: 50%;
+                border: 1px solid #2bb972;
+                background: #2BB97249;
+                text-align: center;
+                line-height: 30px;
+                margin: 0 5px;
+              }
+
+              &:nth-child(4) {
+                border: 1px solid #E73D41;
+                background: #E73D4149;
+                margin-left: 10px;
+              }
+
+              &:nth-child(3),
+              &:last-child {
+                color: #81D3F8;
+                padding-bottom: 5px;
+              }
+            }
+
+          }
+
+          &>div:last-child {
+            font-size: 24px;
+            text-align: right;
+            color: #FFFFFF;
+          }
+        }
+
+        &>div:last-child {
+          height: 40px;
+          border: solid 1px red;
+          margin: 10px 0 15px 0;
+        }
+      }
+    }
+
+    .scrollBox {
+      height: 270px;
+      overflow: hidden;
+    }
+  }
+}</style>

src/vite-env.d.ts

@@ -10,3 +10,4 @@ declare module '*.vue' {
   export default component
 }
 
+declare module 'tank-vue3-seamless-scroll'