Merge branch 'master' of bls-dan/busRoute into master

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "date-fns": "^3.3.1",
     "echarts": "^5.4.3",
     "naive-ui": "^2.36.0",
     "pinia": "^2.1.7",

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/HomePage.vue

@@ -1101,8 +1101,6 @@ async function getClassesPunctualityRate() {
   const yesterdayData = data.filter((item: { type: number }) => item.type === 0)
   rightContent.value[2].content[1][0].body = todayData
   rightContent.value[2].content[1][1].body = yesterdayData
-
-  console.log(data, 'data')
 }
 getClassesPunctualityRate()
 

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,16 +45,24 @@
         :width="1340"
         :height="420"
         name="维保明细"
+        class="left-bottom"
       >
+        <n-date-picker
+          v-model:value="leftContent.bottom.range"
+          type="daterange"
+          style="width: 260px;"
+        />
+
         <n-data-table
           :columns="leftContent.bottom.head"
-          :data="leftContent.bottom.body"
+          :data="tableData"
           :bordered="false"
           single-column
           striped
           size="large"
+          style="height: 300px;"
         />
-        <div class="left-bottom">
+        <div class="page">
           <n-pagination
             v-model:page="leftContent.bottom.page.num"
             :page-size="leftContent.bottom.page.size"
@@ -84,7 +83,6 @@
             :height="408"
             :name="item.name"
           >
-            1111
             <Echart :option="item.option" />
           </Box>
         </template>
@@ -121,12 +119,12 @@
         <Box
           :width="662"
           :height="408"
-          :name="rightContent.bottom.name"
+          name="体检问题情况"
         >
           <div class="checkup">
             <div class="total">
               <div class="num">
-                40
+                {{ checkupProblemTotal }}
               </div>
               <div style="font-size: 24px;">
                 总量
@@ -134,15 +132,15 @@
             </div>
             <div class="list">
               <div
-                v-for="item in 4"
-                :key="item"
+                v-for="item,index in checkupProblem"
+                :key="index"
                 class="item"
               >
                 <div class="num">
-                  10
+                  {{ item.number }}
                 </div>
                 <div class="label">
-                  三电故障
+                  {{ item.problemType }}
                 </div>
               </div>
             </div>
@@ -163,10 +161,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, computed, onMounted, ref, watch
+} from 'vue'
 import Echart from '@/components/chart.vue'
+import MaintenanceDynamicsService from '../services/maintenanceDynamics.Service'
+import { format, subDays } from 'date-fns'
 
-const leftContent = ref({
+const leftContent:Ref<any> = ref({
   top: [
     {
       name: '车辆总数',
@@ -194,7 +198,7 @@ const leftContent = ref({
             fontSize: 18
           }
         },
-        xAxis: [ {
+        xAxis: {
           name: '日期',
           nameLocation: 'center',
           nameTextStyle: {
@@ -219,8 +223,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 +249,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 +280,7 @@ const leftContent = ref({
           fillerColor: 'rgba(255,255,255,0.2)',
           borderColor: 'rgba(64,158,225,0.3)'
         }
-      },
-      btns: [ '总', '年', '月' ],
-      checkId: 0
+      }
     },
     {
       name: '车辆运营状态分布',
@@ -388,13 +387,13 @@ const leftContent = ref({
   ],
   bottom: {
     head: [
-      { title: '序号', key: 'num' },
-      { title: '车辆编号', key: 'carNum' },
-      { title: '车牌号', key: 'carNumber' },
+      { title: '序号', render: (rowData: object, rowIndex: number) => rowIndex + 1 },
+      { title: '车辆编号', key: 'code' },
+      { title: '车牌号', key: 'licensePlate' },
       { title: '线路', key: 'line' },
-      { title: '维修类型', key: 'type' },
-      { title: '故障原因', key: 'cause' },
-      { title: '维修点位', key: 'postion' },
+      { title: '维修类型', key: 'maintenanceType' },
+      { title: '故障原因', key: 'faultReason' },
+      { title: '维修点位', key: 'maintenanceLocation' },
       { title: '报修时间', key: 'time' },
       { title: '维保结果', key: 'result' }
 
@@ -420,7 +419,8 @@ const leftContent = ref({
       size: 5,
       total: 10,
       num: 1
-    }
+    },
+    range: [ subDays(Date.now(), 7), Date.now() ]
   }
 })
 
@@ -586,32 +586,129 @@ 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 checkupProblem = ref([] as any[])
+const checkupProblemTotal = ref(0)
+
+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 getMaintenanceCheckupProblem() {
+  const res = await maintenanceDynamicsService.getMaintenanceCheckupProblem()
+  checkupProblem.value = res
+  checkupProblemTotal.value = res.reduce((prev: any, item: { number: number }) => {
+    prev += item.number
+    return prev
+  }, 0)
+}
+getMaintenanceCheckupProblem()
+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()
+const tableData = computed(() => {
+  const { num, size } = leftContent.value.bottom.page
+  return leftContent.value.bottom.body.slice((num - 1) * size, num * size)
+})
+async function getMaintenanceDetail() {
+  const { range } = leftContent.value.bottom
+  const params = {
+    startTime: format(range[0], 'yyyy-MM-dd HH:mm:ss'),
+    endTime: format(range[1], 'yyyy-MM-dd HH:mm:ss')
+  }
+  const res = await maintenanceDynamicsService.getMaintenanceDetail(params)
+  leftContent.value.bottom.body = res
+  leftContent.value.bottom.page.total = res.length
+}
+getMaintenanceDetail()
+
+watch(() => leftContent.value.bottom.range, getMaintenanceDetail)
+
+function selectDatechange(type: any) {
+  getMaintenanceStatistics(type)
 }
+onMounted(() => {
+  selectDatechange(1)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -649,42 +746,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/index.vue

@@ -11,9 +11,15 @@ import Map from '@/components/map/map.vue'
 import useStore from '@/pages/store'
 import HomeService from './services/homepage.service'
 import CehicleOperationService from './services/cehicleOperation.service'
+import MaintenanceDynamicsService from './services/maintenanceDynamics.Service'
+import PassengerFlowService from './services/passengerFlow.service'
+import FacilityManagementService from './services/facilityManagement.service'
 
 const homeService = new HomeService()
 const cehicleOperationService = new CehicleOperationService()
+const passengerFlowService = new PassengerFlowService()
+const maintenanceDynamicsService = new MaintenanceDynamicsService()
+const facilityManagementService = new FacilityManagementService()
 
 const store = useStore()
 const menus = [
@@ -135,7 +141,7 @@ const menus = [
       },
       { label: '满载率', value: 14, util: '%' },
       {
-        label: '免费换成', value: 8, util: '万人次', style: { right: '-40px' }
+        label: '免费换乘', value: 8, util: '万人次', style: { right: '-40px' }
       },
       { label: '分担率 ', value: 0, util: '%' },
       { label: '平均乘距', value: 1400, util: 'km' }
@@ -319,7 +325,7 @@ const menus = [
     }
   }
 ]
-const active = ref(0)
+const active = ref(4)
 const currentComponent = ref(menus[active.value].component)
 const weather = computed(() => store.weather)
 const warningMsg = ref({
@@ -366,6 +372,50 @@ async function getBusLineStatistics() {
   menus[1].count[6].value = res.unloadedRatio
 }
 getBusLineStatistics()
+
+async function getTrafficAnalysis() {
+  const res = await passengerFlowService.getTrafficAnalysis()
+
+  menus[2].count[0].value = res.trafficVolume
+  menus[2].count[1].value = res.fullLoad
+  menus[2].count[2].value = res.freeTransfer
+  menus[2].count[3].value = res.shareRate
+  menus[2].count[4].value = res.avgRidingDistance
+  console.log('getTrafficAnalysis')
+}
+getTrafficAnalysis()
+
+async function getMaintenanceInfo() {
+  const res = await maintenanceDynamicsService.getMaintenanceInfo()
+  menus[3].count[0].value = res.maintenanceSite
+  menus[3].count[1].value = res.maintenanceStation
+  menus[3].count[2].value = res.maintained
+  menus[3].count[3].value = res.repaired
+}
+getMaintenanceInfo()
+
+async function getFacilityStatistics() {
+  const res = await facilityManagementService.getFacilityStatistics()
+  let vehicleNumTotal = 0
+  let stationNumTotal = 0
+  let carWasherNumTotal = 0
+  let chargingStationNumTotal = 0
+  let vehicleComponentsNumTotal = 0
+  for (let i = 0; i < res.length; i++) {
+    const item = res[i]
+    vehicleNumTotal += +item.vehicleNum
+    stationNumTotal += +item.stationNum
+    carWasherNumTotal += +item.carWasherNum
+    chargingStationNumTotal += +item.chargingStationNum
+    vehicleComponentsNumTotal += +item.vehicleComponentsNum
+  }
+  menus[4].count[0].value = vehicleNumTotal
+  menus[4].count[1].value = stationNumTotal
+  menus[4].count[2].value = carWasherNumTotal
+  menus[4].count[3].value = chargingStationNumTotal
+  menus[4].count[4].value = vehicleComponentsNumTotal
+}
+getFacilityStatistics()
 </script>
 <template>
   <div class="home">

src/pages/views/home/services/facilityManagement.service.ts

@@ -0,0 +1,61 @@
+import NetService from '@/services/net.service'
+import { injectable, Service } from '@/services/service'
+
+@injectable
+export default class FacilityManagementService extends Service {
+  private netService = new NetService()
+
+  /** 区域设施统计  /facilityStatistics/getFacilityStatistics   */
+  async getFacilityStatistics() {
+    const { success, data } = await this.netService.get('/facilityStatistics/getFacilityStatistics')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 车型展示  /facilityStatistics/getFacilityVehicleModel   */
+  async getFacilityVehicleModel() {
+    const { success, data } = await this.netService.get('/facilityStatistics/getFacilityVehicleModel')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 电子站牌  /facilityStatistics/getFacilityStation   */
+  async getFacilityStation() {
+    const { success, data } = await this.netService.get('/facilityStatistics/getFacilityStation')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 洗车机  /facilityStatistics/getFacilityCarWasher   */
+  async getFacilityCarWasher() {
+    const { success, data } = await this.netService.get('/facilityStatistics/getFacilityCarWasher')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 充电站  /facilityStatistics/getFacilityChargingStation   */
+  async getFacilityChargingStation() {
+    const { success, data } = await this.netService.get('/facilityStatistics/getFacilityChargingStation')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 车载部件  /facilityStatistics/getFacilityVehicleComponents   */
+  async getFacilityVehicleComponents() {
+    const { success, data } = await this.netService.get('/facilityStatistics/getFacilityVehicleComponents')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+}

src/pages/views/home/services/maintenanceDynamics.Service.ts

@@ -0,0 +1,107 @@
+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?.list || []
+    }
+    return []
+  }
+
+  /** 体检问题情况  /maintenance/getMaintenanceCheckupProblem  */
+  async getMaintenanceCheckupProblem() {
+    const { success, data } = await this.netService.get('/maintenance/getMaintenanceCheckupProblem')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 维保地图信息配置  /maintenance/getMaintenanceInfo  */
+  async getMaintenanceInfo() {
+    const { success, data } = await this.netService.get('/maintenance/getMaintenanceInfo')
+    if (success) {
+      return data || {}
+    }
+    return {}
+  }
+}

src/pages/views/home/services/passengerFlow.service.ts

@@ -67,4 +67,13 @@ export default class PassengerFlowService extends Service {
     }
     return []
   }
+
+  /** 客流分析地图  /trafficAnalysis/getTrafficAnalysis   */
+  async getTrafficAnalysis() {
+    const { success, data } = await this.netService.get('/trafficAnalysis/getTrafficAnalysis')
+    if (success) {
+      return data[0] || {}
+    }
+    return {}
+  }
 }