曾加UI

src/assets/naive-theme.ts

@@ -0,0 +1,84 @@
+import { GlobalThemeOverrides } from 'naive-ui'
+const themeOverrides: GlobalThemeOverrides = {
+  common: {
+    primaryColor: '#2791FEFF',
+    primaryColorHover: '#67B2FEFF',
+    primaryColorPressed: '#1F74CBFF',
+    primaryColorSuppl: '#93C8FEFF',
+    errorColorHover: '#EC787BFF',
+    errorColor: '#E8575AFF',
+    errorColorPressed: '#B94548FF',
+    errorColorSuppl: '#EE898BFF',
+    warningColor: '#FAAD38FF',
+    warningColorPressed: '#C88A2CFF',
+    textColorBase: '#17233EFF',
+    textColor1: 'rgba(80, 90, 110, 1)',
+    textColor2: 'rgba(128, 134, 148, 1)',
+    textColor3: 'rgba(196, 200, 206, 1)',
+    placeholderColor: 'rgba(196, 200, 206, 1)',
+    iconColor: 'rgba(196, 200, 206, 1)',
+    iconColorHover: 'rgba(103, 178, 254, 1)',
+    iconColorPressed: 'rgba(31, 116, 203, 1)',
+    iconColorDisabled: 'rgba(196, 200, 206, 1)',
+    dividerColor: 'rgba(220, 222, 226, 1)',
+    borderColor: 'rgba(196, 200, 206, 1)',
+    closeIconColor: 'rgba(80, 90, 110, 1)',
+    closeIconColorHover: 'rgba(103, 178, 254, 1)',
+    closeIconColorPressed: 'rgba(31, 116, 203, 1)',
+    closeColorHover: 'rgba(0, 0, 0, 0.1)',
+    closeColorPressed: 'rgba(0, 0, 0, 0.15)',
+    scrollbarColor: 'rgba(126, 133, 160, 1)',
+    scrollbarColorHover: 'rgba(103, 178, 254, 1)',
+    tagColor: '#F5F5F5FF',
+    inputColorDisabled: 'rgba(233, 234, 236, 1)',
+    fontSize: '14px',
+    fontSizeMini: '12px',
+    fontSizeTiny: '12px',
+    fontSizeSmall: '14px',
+    fontSizeMedium: '14px',
+    fontSizeLarge: '15px',
+    fontSizeHuge: '16px'
+  },
+  Tree: {
+    nodeTextColor: '#fff',
+    nodeColorHover: 'transparent',
+    nodeColorPressed: 'transparent',
+    nodeColorActive: 'transparent'
+  },
+  DatePicker: {
+    panelColor: 'rgba(3,20,26,0.95)',
+    panelTextColor: 'rgba(255,255,255,0.8)',
+    calendarDaysTextColor: 'rgba(255,255,255,0.8)',
+    calendarTitleTextColor: 'rgba(255,255,255,0.8)',
+    calendarTitleColorHover: '#183742',
+    panelHeaderDividerColor: '#164352',
+    calendarDaysDividerColor: '#164352',
+    panelActionDividerColor: '#164352',
+    itemColorActive: '#1AB99B',
+    itemColorHover: '#146371'
+  },
+  TimePicker: {
+    panelColor: 'rgba(3, 20, 26, 0.95)',
+    panelDividerColor: 'rgb(239, 239, 245)',
+    itemTextColor: 'rgba(255, 255, 255, 0.8)',
+    itemTextColorActive: '#1AB99B',
+    itemColorHover: '#146371'
+  },
+  Checkbox: {
+    colorChecked: '#1ab99bFF',
+    textColor: '#fff'
+  },
+  Notification: {
+    iconColorSuccess: '#1AB99BFF',
+    iconColorError: '#E8575AFF',
+    color: '#12363FFF',
+    textColor: 'rgba(255, 255, 255, 1)',
+    descriptionTextColor: 'rgba(255, 255, 255, 1)',
+    closeIconColor: 'rgba(255, 255, 255, 1)',
+    borderRadius: '0'
+  },
+  Progress: {
+    fillColor: 'linear-gradient(to right, white, red);'
+  }
+}
+export default themeOverrides

src/assets/native-plugin.ts

@@ -0,0 +1,16 @@
+import {
+  create,
+  NConfigProvider,
+  NNotificationProvider,
+  NProgress
+} from 'naive-ui'
+
+const naive = create({
+  components: [
+    NConfigProvider,
+    NNotificationProvider,
+    NProgress
+  ]
+})
+
+export default naive

src/pages/App.vue

@@ -1,22 +1,33 @@
 <template>
   <loading v-if="show" />
-  <router-view />
+  <n-config-provider
+    preflight-style-disabled
+    inline-theme-disabled
+    :theme-overrides="themeOverrides"
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+  >
+    <n-notification-provider>
+      <router-view />
+    </n-notification-provider>
+  </n-config-provider>
 </template>
 <script setup lang='ts'>
 import loading from '@/components/loading.vue'
 import useStore from './store/index'
 import { computed } from 'vue'
-
+import { zhCN, dateZhCN } from 'naive-ui'
+import Theme from '@/assets/naive-theme'
 const store = useStore()
 const show = computed(() => store.loading)
-
+const themeOverrides = Theme
 </script>
 <style>
-  *{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    user-select: none;
-    font-style: normal;
-  }
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+  font-style: normal;
+}
 </style>

src/pages/main.ts

@@ -7,6 +7,7 @@ import VueAMap, { initAMapApiLoader } from '@vuemap/vue-amap'
 import '@vuemap/vue-amap/dist/style.css'
 import Icon from '@/components/icon.vue'
 import 'virtual:svg-icons-register'
+import naive from '@/assets/native-plugin'
 
 initAMapApiLoader({
   key: 'YOUR_KEY',
@@ -36,6 +37,7 @@ const router = createRouter({
 app.use(store)
   .use(router)
   .use(VueAMap)
+  .use(naive)
   .component('Icon', Icon)
 
 router.isReady().then(() => {

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

@@ -147,7 +147,14 @@
                         </div>
                         <div>{{ item.plan }}/{{ item.pratic }}</div>
                       </div>
-                      <div>jindutiao</div>
+                      <div>
+                        <n-progress
+                          type="line"
+                          :percentage="item.pratic"
+                          :show-indicator="false"
+                          processing
+                        />
+                      </div>
                     </div>
                   </template>
                 </TankSeamlessScroll>
@@ -158,9 +165,35 @@
         <Box
           :width="655"
           :height="622"
-          name="班次准点率"
+          :name="rightContent[2].name"
         >
-          123123
+          <div class="classes">
+            <div class="classes-top">
+              <template
+                v-for="(item, id) in rightContent[2].content[0]"
+                :key="id"
+              >
+                <div>
+                  <n-progress
+                    type="circle"
+                    :percentage="item.num"
+                    :offset-degree="180"
+                    :color="item.color"
+                    :indicator-text-color="item.color"
+                  />
+                  <div>
+                    <p>
+                      {{ item.name }}
+                    </p>
+                    <p>
+                      <span>{{ item.num }}</span>
+                      {{ item.util }}
+                    </p>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
         </Box>
         <Box
           :width="655"
@@ -175,9 +208,18 @@
               >
                 <div>
                   <Icon
+                    v-if="id === 0"
                     :name="item.icon"
                     :size="74"
                   />
+                  <n-progress
+                    v-else
+                    type="circle"
+                    :percentage="item.num"
+                    :offset-degree="180"
+                    :color="item.color"
+                    :indicator-text-color="item.color"
+                  />
                   <div>
                     <p>
                       {{ item.name }}
@@ -195,7 +237,7 @@
                 <span>线路名称</span>
                 <span>
                   班次
-                  <i>计划/实际</i>
+                  <i>已发数/准点数</i>
                 </span>
               </div>
               <div class="scrollBox">
@@ -219,7 +261,14 @@
                         </div>
                         <div>{{ item.plan }}/{{ item.pratic }}</div>
                       </div>
-                      <div>jindutiao</div>
+                      <div>
+                        <n-progress
+                          type="line"
+                          :percentage="item.pratic"
+                          :show-indicator="false"
+                          processing
+                        />
+                      </div>
                     </div>
                   </template>
                 </TankSeamlessScroll>
@@ -324,18 +373,27 @@ const rightContent = ref([
     ]
   },
   {
-    name: '',
-    content: []
+    name: '班次准点率',
+    content: [
+      [
+        {
+          name: '昨日首末班车准点率', num: 70, icon: '26', util: '%', color: '#04FF77'
+        },
+        {
+          name: '昨日中途站准点率', num: 70, icon: '29', util: '%', color: '#04FF77'
+        }
+      ]
+    ]
   },
   {
     name: '发车准点率',
     content: [
       [
         {
-          name: '昨日准点班次数', num: 100, icon: '26', util: '次'
+          name: '昨日准点班次数', num: 70, icon: '26', util: '次', color: '#04FF77'
         },
         {
-          name: '昨日准点率', num: 100, icon: '29', util: '%'
+          name: '昨日准点率', num: 70, icon: '29', util: '%', color: '#04FF77'
         }
       ],
       [
@@ -602,8 +660,7 @@ const rightContent = ref([
 
         &>div:last-child {
           height: 40px;
-          border: solid 1px red;
-          margin: 10px 0 15px 0;
+          padding: 13px 0;
         }
       }
     }
@@ -613,4 +670,5 @@ const rightContent = ref([
       overflow: hidden;
     }
   }
-}</style>
+}
+</style>