增加动态维保

src/assets/naive-theme.ts

@@ -82,6 +82,38 @@ const themeOverrides: GlobalThemeOverrides = {
     tdColorStriped: '#0f2239',
     tdTextColor: '#81D3F8',
     fontSizeLarge: 18
+  },
+  DataTable: {
+    thColor: '#1f426b',
+    thTextColor: '#fff',
+    tdColor: '#07132b',
+    tdPaddingLarge: '10px',
+    tdColorStriped: '#0f2239',
+    tdTextColor: '#81D3F8',
+    fontSizeLarge: '18px',
+    borderColor: 'transparent',
+    thColorHover: 'transparent',
+    tdColorHover: '#0f2239'
+  },
+  Pagination: {
+    buttonColor: 'rgba(21,84,107,0.4)',
+    buttonColorHover: 'rgba(21,84,107,0.4)',
+    buttonColorPressed: 'rgba(21,84,107,0.4)',
+    buttonBorder: '1px solid rgba(21,84,107,0.4)',
+    buttonBorderHover: '1px solid rgba(21,84,107,0.4)',
+    buttonBorderPressed: '1px solid rgba(21,84,107,0.4)',
+    buttonIconColor: '#fff',
+    buttonIconColorHover: '#fff',
+    buttonIconColorPressed: '#fff',
+    itemTextColor: '#fff',
+    itemTextColorHover: '#fff',
+    itemTextColorPressed: '#fff',
+    itemTextColorActive: '#fff',
+    itemColorDisabled: 'rgba(21,84,107,0.8)',
+    itemBorderActive: '1px solid rgba(21,84,107,1)',
+    itemBorderDisabled: '1px solid rgba(21,84,107,1)',
+    itemTextColorDisabled: 'rgba(26, 223, 180, 0.1)',
+    jumperTextColor: '#fff'
   }
 }
 export default themeOverrides

src/assets/native-plugin.ts

@@ -3,7 +3,9 @@ import {
   NConfigProvider,
   NNotificationProvider,
   NProgress,
-  NTable
+  NTable,
+  NDataTable,
+  NPagination
 } from 'naive-ui'
 
 const naive = create({
@@ -11,7 +13,9 @@ const naive = create({
     NConfigProvider,
     NNotificationProvider,
     NProgress,
-    NTable
+    NTable,
+    NDataTable,
+    NPagination
   ]
 })
 

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

@@ -366,7 +366,7 @@ const leftContent = ref({
         grid: {
           containLabel: true,
           top: 100,
-          bottom: 100
+          bottom: 50
         },
         tooltip: {
           trigger: 'axis',
@@ -438,7 +438,20 @@ const leftContent = ref({
             type: 'bar',
             silent: true,
             itemStyle: {
-              color: '#2F8FFF'
+              color: new graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#FFD35D'
+                },
+                {
+                  offset: 0.5,
+                  color: '#7ec2f3'
+                },
+                {
+                  offset: 1,
+                  color: '#1890ff'
+                }
+              ])
             },
             barWidth: 30,
             data: [ 200, 108, 200, 40, 210, 100 ]
@@ -448,11 +461,26 @@ const leftContent = ref({
             type: 'line',
             yAxisIndex: 1, // 与第二个 y 轴关联
             itemStyle: {
-              color: 'yellow' // 设置折线颜色为黄色
+              color: '#FEB74D' // 设置折线颜色为黄色
             },
             data: [ 100, 80, 120, 60, 90, 70 ] // 折线图的数据
           }
-        ]
+        ],
+        dataZoom: {
+          type: 'slider',
+          height: 20,
+          bottom: 8,
+          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+          handleSize: '100%',
+          handleStyle: {
+            color: '#409eff'
+          },
+          textStyle: {
+            color: '#666'
+          },
+          fillerColor: 'rgba(255,255,255,0.2)',
+          borderColor: 'rgba(64,158,225,0.3)'
+        }
       },
       btns: [ '总', '年', '月', '日' ],
       checkId: 0
@@ -635,11 +663,11 @@ const leftContent = ref({
                 color: new graphic.LinearGradient(0, 0, 1, 0, [
                   {
                     offset: 0,
-                    color: 'rgba(24, 103, 222, 0.4)'
+                    color: 'rgba(20,167,250,0.3)'
                   },
                   {
                     offset: 1,
-                    color: 'rgba(231, 185, 44, 1)'
+                    color: 'rgba(0,255,209,1)'
                   }
                 ])
               }
@@ -775,7 +803,7 @@ const leftContent = ref({
                 color: new graphic.LinearGradient(0, 0, 1, 0, [
                   {
                     offset: 0,
-                    color: 'rgba(24, 103, 222, 0.4)'
+                    color: 'rgba(20,167,250,0.3)'
                   },
                   {
                     offset: 1,
@@ -969,7 +997,6 @@ function changeFn(id: number, item: any) {
 
       .dateChange {
         position: absolute;
-        width: 360px;
         height: 30px;
         border-radius: 30px;
         border: solid 1px #2185E8;

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

@@ -10,6 +10,7 @@
             :width="662"
             :height="400"
             :name="item.name"
+            style="position: relative;"
           >
             <div
               v-if="item.icon"
@@ -17,7 +18,7 @@
             >
               <Icon
                 :name="item.icon"
-                :size="96"
+                :size="81"
                 style="margin-right: 20px;"
               />
               <div
@@ -26,9 +27,25 @@
               >
                 {{ itm }}
               </div>
-              辆
+              <div>辆</div>
             </div>
-            <!-- <Echart v-else :option="item.option" /> -->
+            <div
+              v-if="item.btns"
+              class="dateChange"
+            >
+              <div
+                v-for="(itm, index) in item.btns"
+                :key="index"
+                :class="{ active: index === item.checkId }"
+                @click="changeFn(index, item)"
+              >
+                {{ itm }}
+              </div>
+            </div>
+            <Echart
+              v-if="item.option"
+              :option="item.option"
+            />
           </Box>
         </template>
       </div>
@@ -42,7 +59,18 @@
           :columns="leftContent.bottom.head"
           :data="leftContent.bottom.body"
           :bordered="false"
+          single-column
+          striped
+          size="large"
         />
+        <div class="left-bottom">
+          <n-pagination
+            v-model:page="leftContent.bottom.page.num"
+            :page-size="leftContent.bottom.page.size"
+            :item-count="leftContent.bottom.page.total"
+            size="large"
+          />
+        </div>
       </Box>
     </template>
     <template #right>
@@ -93,6 +121,7 @@
 import Layout from '@/components/layout.vue'
 import Box from '@/components/box.vue'
 import { ref } from 'vue'
+import Echart from '@/components/chart.vue'
 
 const leftContent = ref({
   top: [
@@ -103,15 +132,215 @@ const leftContent = ref({
     },
     {
       name: '维修保养统计',
-      option: ''
+      option: {
+        grid: {
+          containLabel: true,
+          right: 30,
+          left: 50,
+          bottom: '25%',
+          top: '20%'
+        },
+        legend: {
+          show: true,
+          left: 'center',
+          bottom: 30,
+          itemWidth: 15,
+          itemHeight: 10,
+          textStyle: {
+            color: '#646464',
+            fontSize: 18
+          }
+        },
+        xAxis: [ {
+          name: '日期',
+          nameLocation: 'center',
+          nameTextStyle: {
+            fontSize: 18,
+            color: 'white',
+            padding: [ 20, 0 ]
+          },
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            color: '#fff',
+            fontSize: 18
+            // formatter: (value: number) => format( 1'时')
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: true,
+            alignWithLabel: true
+          },
+          data: [ '3月26日', '3月27日', '3月28日', '3月29日', '3月30日', '4月1日' ]
+        } ],
+        yAxis: [ {
+          name: '维保量/台',
+          nameLocation: 'center',
+          nameGap: 50,
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 18
+          },
+          padding: 5,
+          // max: 1000,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#A1A7B3'
+              // type: 'dashed'
+            }
+          },
+          axisLabel: {
+            show: true,
+            margin: 10,
+            textStyle: {
+              color: '#fff'
+
+            }
+          }
+        }
+        ],
+        series: [
+          {
+            name: '维保车辆',
+            type: 'line',
+            symbolSize: 0,
+            itemStyle: {
+              normal: {
+                // color: '#4293FD',
+                lineStyle: {
+                  // color: '#4293FD',
+                  width: 2
+                }
+              }
+            },
+            data: [ 120, 132, 101, 134, 90, 230 ]
+          }
+        ],
+        dataZoom: {
+          type: 'slider',
+          height: 20,
+          bottom: 8,
+          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+          handleSize: '100%',
+          handleStyle: {
+            color: '#409eff'
+          },
+          textStyle: {
+            color: '#666'
+          },
+          fillerColor: 'rgba(255,255,255,0.2)',
+          borderColor: 'rgba(64,158,225,0.3)'
+        }
+      },
+      btns: [ '总', '年', '月' ],
+      checkId: 0
     },
     {
       name: '车辆运营状态分布',
-      option: ''
+      option: {
+        title: {
+          text: '总166', // 图标内容文本
+          left: 'center', // 图标内容水平居中
+          top: 'center', // 图标内容垂直居中
+          // 文本样式
+          textStyle: {
+            color: '#fff', // 图标内容文字颜色
+            fontSize: '18px', // 图标内容文字大小
+            fontWeight: 'normal'
+          }
+        },
+        grid: {
+          containLabel: true
+        },
+        // 图表图例
+        legend: {
+          type: 'scroll',
+          orient: 'horizontal', // 图例排列方向
+          icon: 'circle', // 图例样式为圆形
+          itemWidth: 10, // 图例图形的宽度
+          itemHeight: 16, // 图例图形的高度
+          itemGap: 10, // 图例项之间的间隔
+          left: 'center', // 图例距离容器右侧的距离
+          bottom: 0, // 图例垂直居中
+          textStyle: {
+            color: 'white', // 图例文字颜色
+            fontSize: 20
+          }
+        },
+        series: [
+          {
+            type: 'pie', // 图表类型为饼图
+            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
+            label: {
+              formatter: '{b}\n{d}%',
+              color: 'white'
+            },
+            data: [
+              { name: '运营中', value: 30619 },
+              { name: '维保中', value: 5921 },
+              { name: '报废', value: 1153 }
+            ]
+          }
+        ]
+      }
     },
     {
       name: '车辆维保状态分别',
-      option: ''
+      option: {
+        title: {
+          text: '总166', // 图标内容文本
+          left: 'center', // 图标内容水平居中
+          top: 'center', // 图标内容垂直居中
+          // 文本样式
+          textStyle: {
+            color: '#fff', // 图标内容文字颜色
+            fontSize: '18px', // 图标内容文字大小
+            fontWeight: 'normal'
+          }
+        },
+        grid: {
+          containLabel: true
+        },
+        // 图表图例
+        legend: {
+          type: 'scroll',
+          orient: 'horizontal', // 图例排列方向
+          icon: 'circle', // 图例样式为圆形
+          itemWidth: 10, // 图例图形的宽度
+          itemHeight: 16, // 图例图形的高度
+          itemGap: 10, // 图例项之间的间隔
+          left: 'center', // 图例距离容器右侧的距离
+          bottom: 0, // 图例垂直居中
+          textStyle: {
+            color: 'white', // 图例文字颜色
+            fontSize: 20
+          }
+        },
+        series: [
+          {
+            type: 'pie', // 图表类型为饼图
+            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
+            label: {
+              formatter: '{b}\n{d}%',
+              color: 'white'
+            },
+            data: [
+              { name: '隔日留交车辆', value: 30619 },
+              { name: '保养中车辆', value: 5921 },
+              { name: '维修中车辆', value: 1153 }
+            ]
+          }
+        ]
+      }
     }
   ],
   bottom: {
@@ -143,7 +372,12 @@ const leftContent = ref({
       {
         num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
       }
-    ]
+    ],
+    page: {
+      size: 5,
+      total: 10,
+      num: 1
+    }
   }
 })
 
@@ -158,16 +392,86 @@ const rightContent = ref({
     { name: '维保执行情况', option: '' }
   ]
 })
+
+function changeFn(id: number, item: any) {
+  item.checkId = id
+}
 </script>
 
 <style lang="scss" scoped>
 .left-top {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  &-count {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+    font-family: 'Impact Normal', 'Impact', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    text-align: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+
+    &>div:not(:last-child) {
+      width: 84px;
+      height: 110px;
+      background-color: rgba(33, 133, 232, 0.298039215686275);
+      border: solid 2px rgba(33, 133, 232, 1);
+      border-radius: 10px;
+      line-height: 110px;
+      font-size: 70px;
+      color: #FFFFFF;
+      margin-right: 16px;
+    }
+
+    &>div:last-child {
+      font-size: 24px;
+      color: #80FFFF;
+      height: 110px;
+      line-height: 145px;
+    }
   }
-  .right-bottom,
-.right-top{
+
+  .dateChange {
+    position: absolute;
+    height: 30px;
+    border-radius: 30px;
+    border: solid 1px #2185E8;
+    left: 50%;
+    transform: translate(-50%, 0);
+    top: 50px;
+    z-index: 2;
+    display: flex;
+
+    &>div {
+      width: 90px;
+      color: white;
+      font-size: 16px;
+      text-align: center;
+      cursor: pointer;
+      line-height: 30px;
+
+      &:not(:first-child) {
+        border-left: solid 1px #2185E8;
+      }
+    }
+
+    .active {
+      background: #2185e860;
+    }
+  }
+}
+.left-bottom{
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+.right-bottom,
+.right-top {
   display: flex;
   justify-content: space-between;
 }

src/pages/views/home/index.vue

@@ -20,7 +20,7 @@ const menus = [
   { name: '场站管理', component: markRaw(stationManagement) },
   { name: '线路分析', component: markRaw(lineAnalysis) }
 ]
-const active = ref(6)
+const active = ref(0)
 const currentComponent = ref(menus[active.value].component)
 const weather = ref()