维保动态接入数据

src/assets/native-plugin.ts

@@ -9,7 +9,8 @@ import {
   NButton,
   NSelect,
   NCheckboxGroup,
-  NCheckbox
+  NCheckbox,
+  NDatePicker
 } from 'naive-ui'
 
 const naive = create({
@@ -23,7 +24,8 @@ const naive = create({
     NButton,
     NSelect,
     NCheckboxGroup,
-    NCheckbox
+    NCheckbox,
+    NDatePicker
   ]
 })
 

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

@@ -12,6 +12,10 @@
             :name="item.name"
             style="position: relative;"
           >
+            <SelectDate
+              v-if="index === 1"
+              @date-change="selectDatechange"
+            />
             <div
               v-if="item.icon"
               class="left-top-count"
@@ -29,19 +33,6 @@
               </div>
               <div>辆</div>
             </div>
-            <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"
@@ -54,7 +45,15 @@
         :width="1340"
         :height="420"
         name="维保明细"
+        class="left-bottom"
       >
+        <n-date-picker
+          v-model:value="leftContent.bottom.range"
+          type="daterange"
+          clearable
+          style="width: 260px;"
+        />
+
         <n-data-table
           :columns="leftContent.bottom.head"
           :data="leftContent.bottom.body"
@@ -63,7 +62,7 @@
           striped
           size="large"
         />
-        <div class="left-bottom">
+        <div class="page">
           <n-pagination
             v-model:page="leftContent.bottom.page.num"
             :page-size="leftContent.bottom.page.size"
@@ -121,7 +120,7 @@
         <Box
           :width="662"
           :height="408"
-          :name="rightContent.bottom.name"
+          name="体检问题情况"
         >
           <div class="checkup">
             <div class="total">
@@ -163,10 +162,16 @@
 <script setup lang='ts'>
 import Layout from '@/components/layout.vue'
 import Box from '@/components/box.vue'
-import { ref } from 'vue'
+import SelectDate from '@/components/selectDate.vue'
+
+import {
+  Ref, onMounted, ref, watch
+} from 'vue'
 import Echart from '@/components/chart.vue'
+import MaintenanceDynamicsService from '../services/maintenanceDynamicsService'
+import { format, subDays } from 'date-fns'
 
-const leftContent = ref({
+const leftContent:Ref<any> = ref({
   top: [
     {
       name: '车辆总数',
@@ -194,7 +199,7 @@ const leftContent = ref({
             fontSize: 18
           }
         },
-        xAxis: [ {
+        xAxis: {
           name: '日期',
           nameLocation: 'center',
           nameTextStyle: {
@@ -219,8 +224,8 @@ const leftContent = ref({
             alignWithLabel: true
           },
           data: [ '3月26日', '3月27日', '3月28日', '3月29日', '3月30日', '4月1日' ]
-        } ],
-        yAxis: [ {
+        },
+        yAxis: {
           name: '维保量/台',
           nameLocation: 'center',
           nameGap: 50,
@@ -245,25 +250,22 @@ const leftContent = ref({
 
             }
           }
-        }
-        ],
-        series: [
-          {
-            name: '维保车辆',
-            type: 'line',
-            symbolSize: 0,
-            itemStyle: {
-              normal: {
+        },
+        series: {
+          name: '维保车辆',
+          type: 'line',
+          symbolSize: 0,
+          itemStyle: {
+            normal: {
+              // color: '#4293FD',
+              lineStyle: {
                 // color: '#4293FD',
-                lineStyle: {
-                  // color: '#4293FD',
-                  width: 2
-                }
+                width: 2
               }
-            },
-            data: [ 120, 132, 101, 134, 90, 230 ]
-          }
-        ],
+            }
+          },
+          data: [ 120, 132, 101, 134, 90, 230 ]
+        },
         dataZoom: {
           type: 'slider',
           height: 20,
@@ -279,9 +281,7 @@ const leftContent = ref({
           fillerColor: 'rgba(255,255,255,0.2)',
           borderColor: 'rgba(64,158,225,0.3)'
         }
-      },
-      btns: [ '总', '年', '月' ],
-      checkId: 0
+      }
     },
     {
       name: '车辆运营状态分布',
@@ -420,7 +420,8 @@ const leftContent = ref({
       size: 5,
       total: 10,
       num: 1
-    }
+    },
+    range: [ subDays(Date.now(), 7), Date.now() ]
   }
 })
 
@@ -586,32 +587,112 @@ const rightContent = ref({
           fontSize: 18
         }
       },
-      series: [
-        {
-          type: 'pie', // 图表类型为饼图
-          radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
-          avoidLabelOverlap: true, // 是否启用防止标签重叠策略
-          showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
-          label: {
-            show: true,
-            formatter: '{b}: {d}俩',
-            color: 'white',
-            fontSize: 18
-          },
-          data: [
-            { name: '执行', value: 30 },
-            { name: '竣工', value: 20 },
-            { name: '在修', value: 10 }
-          ]
-        }
-      ]
+      series: {
+        type: 'pie', // 图表类型为饼图
+        radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+        avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+        showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
+        label: {
+          show: true,
+          formatter: '{b}: {d}俩',
+          color: 'white',
+          fontSize: 18
+        },
+        data: [
+          { name: '执行', value: 30 },
+          { name: '竣工', value: 20 },
+          { name: '在修', value: 10 }
+        ]
+      }
     }
   }
 })
 
-function changeFn(id: number, item: any) {
-  item.checkId = id
+const maintenanceDynamicsService = new MaintenanceDynamicsService()
+
+async function getMaintenanceCarStatus() {
+  const res = await maintenanceDynamicsService.getMaintenanceCarStatus()
+  leftContent.value.top[3].option!.series[0].data = res.map((item: any) => ({
+    name: item.maintenanceStatus, value: item.number
+  }))
+}
+getMaintenanceCarStatus()
+async function getMaintenanceCarOperate() {
+  const res = await maintenanceDynamicsService.getMaintenanceCarOperate()
+  leftContent.value.top[2].option!.series[0].data = res.map((item: any) => ({
+    name: item.carStatus, value: item.number
+  }))
+}
+getMaintenanceCarOperate()
+
+async function getMaintenanceRidingDistance() {
+  const res = await maintenanceDynamicsService.getMaintenanceRidingDistance()
+  rightContent.value.top[2].option!.series.data = res.map((item: any) => ({
+    name: item.distanceType, value: item.number
+  }))
+}
+getMaintenanceRidingDistance()
+
+async function getMaintenanceLocationNum() {
+  const res = await maintenanceDynamicsService.getMaintenanceLocationNum()
+  rightContent.value.top[0].option!.series.data = res.map((item: any) => ({
+    name: item.location, value: item.number
+  }))
+}
+getMaintenanceLocationNum()
+async function getMaintenanceConsumption() {
+  const res = await maintenanceDynamicsService.getMaintenanceConsumption()
+  rightContent.value.top[1].option!.series.data = res.map((item: any) => ({
+    name: item.consumptionType, value: item.number
+  }))
+}
+getMaintenanceConsumption()
+
+async function getMaintenanceImplementation() {
+  const res = await maintenanceDynamicsService.getMaintenanceImplementation()
+  rightContent.value.bottom.option!.series.data = res.map((item: any) => ({
+    name: item.executeType, value: item.number
+  }))
+}
+getMaintenanceImplementation()
+
+async function getMaintenanceStatistics(type: number) {
+  const res = await maintenanceDynamicsService.getMaintenanceStatistics(type)
+
+  const xData = res.map((item: any) => item.time)
+  const carNumberData = res.map((item: any) => item.carNumber)
+
+  leftContent.value.top[1].option.xAxis!.data = xData
+  leftContent.value.top[1].option.series.data = carNumberData
+}
+
+async function getBusLineDetailAll() {
+  const res = await maintenanceDynamicsService.getBusLineDetailAll()
+  leftContent.value.top[0].num = `${res.reduce((prev: any, item: { totalCar: number }) => {
+    prev += item.totalCar
+    return prev
+  }, 0)}`
+}
+getBusLineDetailAll()
+async function getMaintenanceDetail() {
+  const { range } = leftContent.value.bottom
+  const params = {
+    startTime: format(range[0], 'yyyy-MM-dd HH:mm:ss'),
+    endTime: range[1]
+  }
+  const res = await maintenanceDynamicsService.getMaintenanceDetail(params)
+  console.log(res, 'res')
 }
+getMaintenanceDetail()
+
+watch(() => leftContent.value.bottom.range, getMaintenanceDetail)
+
+function selectDatechange(type: any) {
+  getMaintenanceStatistics(type)
+}
+onMounted(() => {
+  selectDatechange(1)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -649,42 +730,25 @@ function changeFn(id: number, item: any) {
       height: 110px;
       line-height: 145px;
     }
-  }
-
-  .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;
+  :deep(.selectDate){
+      top: 50px;
     }
-  }
 }
 .left-bottom{
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-top: 20px;
+  position: relative;
+  :deep(.n-date-picker){
+    position: absolute;
+    right: 230px;
+    top: 3px;
+  }
+  .page{
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
 }
 .right-bottom,
 .right-top {

src/pages/views/home/services/maintenanceDynamicsService.ts

@@ -0,0 +1,89 @@
+import NetService from '@/services/net.service'
+import { injectable, Service } from '@/services/service'
+
+@injectable
+export default class MaintenanceDynamicsService extends Service {
+  private netService = new NetService()
+
+  /** 车辆维保状态分布  /maintenance/getMaintenanceCarStatus  */
+  async getMaintenanceCarStatus() {
+    const { success, data } = await this.netService.get('/maintenance/getMaintenanceCarStatus')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 车辆运营状态分布  /maintenance/getMaintenanceCarOperate  */
+  async getMaintenanceCarOperate() {
+    const { success, data } = await this.netService.get('/maintenance/getMaintenanceCarOperate')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 乘距分布  /maintenance/getMaintenanceRidingDistance  */
+  async getMaintenanceRidingDistance() {
+    const { success, data } = await this.netService.get('/maintenance/getMaintenanceRidingDistance')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 客流线路分布  /maintenance/getMaintenanceLocationNum  */
+  async getMaintenanceLocationNum() {
+    const { success, data } = await this.netService.get('/maintenance/getMaintenanceLocationNum')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 消费类型  /maintenance/getMaintenanceConsumption  */
+  async getMaintenanceConsumption() {
+    const { success, data } = await this.netService.get('/maintenance/getMaintenanceConsumption')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 维保执行情况  /maintenance/getMaintenanceImplementation  */
+  async getMaintenanceImplementation() {
+    const { success, data } = await this.netService.get('/maintenance/getMaintenanceImplementation')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 维修保养统计 type 1月 2年  /maintenance/getMaintenanceStatistics  */
+  async getMaintenanceStatistics(type: number) {
+    const { success, data } = await this.netService.get(`/maintenance/getMaintenanceStatistics?type=${type}`)
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 获取所有线路  /lineOperate/getBusLineDetailAll  */
+  async getBusLineDetailAll() {
+    const { success, data } = await this.netService.get('/lineOperate/getBusLineDetailAll')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 获取所有线路  /maintenance/getMaintenanceDetail  */
+  async getMaintenanceDetail(params: any) {
+    const { startTime, endTime } = params
+    const { success, data } = await this.netService.get(`/maintenance/getMaintenanceDetail?startTime=${startTime}&endTime=${endTime}`)
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+}