客流分析接入数据

src/components/selectDate.vue

@@ -18,10 +18,10 @@ const emit = defineEmits<{(evt: 'dateChange', type: number): void
 }>()
 const checkId = ref(1)
 const btns = [
-  { val: 3, label: '总', disabled: true },
-  { val: 2, label: '年', disabled: false },
-  { val: 1, label: '月', disabled: false },
-  { val: 0, label: '日', disabled: true }
+  { val: 4, label: '总', disabled: true },
+  { val: 3, label: '年', disabled: false },
+  { val: 2, label: '月', disabled: false },
+  { val: 1, label: '日', disabled: false }
 ]
 function changeFn(id: number) {
   checkId.value = id

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

@@ -17,9 +17,19 @@
           class="left-bottom"
           :width="1370"
           :height="818"
-          :name="'近期线路调整'"
+          :name="'近期调整线路'"
         >
           <div class="content">
+            <div class="control">
+              <SelectDate
+                @date-change="selectDatechange"
+              />
+              <n-date-picker
+                v-model:value="lineAdjustData.range"
+                type="daterange"
+                style="width: 260px;"
+              />
+            </div>
             <div class="content-top">
               <div class="title">
                 <div class="icon" />
@@ -27,16 +37,16 @@
               </div>
               <div class="overview">
                 <div
-                  v-for="item in leftContent.bData.overview"
-                  :key="item.name"
+                  v-for="item,key in lineAdjustData.overview"
+                  :key="key"
                   class="item"
                 >
                   <div class="icon" />
                   <div class="name">
-                    {{ item.name }}
+                    {{ lineAdjustData.map[key] }}
                   </div>
                   <div class="num">
-                    {{ item.value }}
+                    {{ item }}
                   </div>
                   条
                 </div>
@@ -67,15 +77,15 @@
                 </thead>
                 <tbody>
                   <tr
-                    v-for="item in 10"
+                    v-for="item,index in lineAdjustData.tableData"
                     :key="item"
                   >
-                    <td>  {{ item }} </td>
-                    <td>  调整 </td>
-                    <td>  雨城区 </td>
-                    <td>  1路 </td>
-                    <td>  常规 </td>
-                    <td>  2023-01-01 </td>
+                    <td>  {{ index+1 }} </td>
+                    <td>  {{ lineAdjustData.map[item.measure] }} </td>
+                    <td>  {{ item.region }}  </td>
+                    <td>  {{ item.lineName }} </td>
+                    <td>  {{ item.lineType }} </td>
+                    <td>   {{ item.time }}</td>
                   </tr>
                 </tbody>
               </n-table>
@@ -104,6 +114,16 @@
           :name="'线路运行速度'"
         >
           <Echart :option="rightContent.center" />
+          <div class="control">
+            <SelectDate
+              @date-change="rankDatechange"
+            />
+            <n-date-picker
+              v-model:value="rankRange"
+              type="daterange"
+              style="width: 260px;"
+            />
+          </div>
         </Box>
         <Box
           class="right-bottom"
@@ -112,6 +132,16 @@
           :name="'站点客流排名'"
         >
           <Echart :option="rightContent.bottom" />
+          <div class="control">
+            <SelectDate
+              @date-change="stationRankchange"
+            />
+            <n-date-picker
+              v-model:value="stationRankRange"
+              type="daterange"
+              style="width: 260px;"
+            />
+          </div>
         </Box>
       </div>
     </template>
@@ -122,8 +152,12 @@
 import Layout from '@/components/layout.vue'
 import Box from '@/components/box.vue'
 import Echart from '@/components/chart.vue'
-import { ref } from 'vue'
+import SelectDate from '@/components/selectDate.vue'
+
+import { ref, watch } from 'vue'
 import { graphic } from 'echarts'
+import LineAnalysisService from '../services/lineAnalysis.service'
+import { format, subDays } from 'date-fns'
 
 const leftContent = ref({
   tCharts: [
@@ -307,23 +341,7 @@ const leftContent = ref({
         ]
       }
     }
-  ],
-  bData: {
-    overview: [
-      {
-        name: '新辟线路',
-        value: 10
-      },
-      {
-        name: '撤销线路',
-        value: 10
-      },
-      {
-        name: '调整线路',
-        value: 10
-      }
-    ]
-  }
+  ]
 })
 const rightContent = ref({
   tCharts: [
@@ -524,7 +542,7 @@ const rightContent = ref({
     }
     ],
     series: [ {
-      name: '当前',
+      name: '常规',
       type: 'line',
       smooth: true,
       symbolSize: 0,
@@ -540,7 +558,7 @@ const rightContent = ref({
       data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
     },
     {
-      name: '环比',
+      name: '快线',
       type: 'line',
       smooth: true,
       symbolSize: 0,
@@ -556,7 +574,7 @@ const rightContent = ref({
       data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
     },
     {
-      name: '同比',
+      name: '特色线路',
       type: 'line',
       smooth: true,
       symbolSize: 0,
@@ -577,6 +595,7 @@ const rightContent = ref({
   bottom: {
     grid: {
       containLabel: true,
+      top: '35%',
       right: 30,
       left: 50,
       bottom: 0
@@ -588,7 +607,7 @@ const rightContent = ref({
       }
     },
     legend: {
-      top: 10,
+      top: 70,
       left: '50%',
       itemWidth: 18,
       itemHeight: 18,
@@ -699,6 +718,213 @@ const rightContent = ref({
     ]
   }
 })
+
+const lineAnalysisService = new LineAnalysisService()
+
+async function getAnalysisLineType() {
+  const res = await lineAnalysisService.getAnalysisLineType()
+  leftContent.value.tCharts[0].option.series[0].data = res.map((item:any) => ({
+    name: item.type,
+    value: item.number
+  }))
+}
+getAnalysisLineType()
+
+async function getAnalysisRegionFlow() {
+  const res = await lineAnalysisService.getAnalysisRegionFlow()
+  const yData = []
+  const seriesData = []
+
+  for (let i = 0; i < res.length; i++) {
+    const item = res[i]
+    yData.push(item.region)
+    seriesData.push(item.flow)
+  }
+
+  leftContent.value.tCharts[1].option.yAxis.data = yData
+  leftContent.value.tCharts[1].option.series[0].data = seriesData
+}
+getAnalysisRegionFlow()
+
+const lineAdjustData = ref({
+  range: [ subDays(Date.now(), 7), Date.now() ],
+  type: 1,
+  tableData: [] as any[],
+  overview: {
+    // 新辟
+    1: 0,
+    // 撤销
+    2: 0,
+    // 调整
+    3: 0
+  },
+  map: {
+    1: '新辟',
+    2: '撤销',
+    3: '调整'
+  }as any
+})
+async function getAnalysisLineAdjust(params:any) {
+  const res = await lineAnalysisService.getAnalysisLineAdjust(params)
+  let total1 = 0
+  let total2 = 0
+  let total3 = 0
+  for (let i = 0; i < res.length; i++) {
+    const item = res[i]
+    if (item.measure === 1) {
+      total1++
+    }
+    if (item.measure === 2) {
+      total2++
+    }
+    if (item.measure === 3) {
+      total3++
+    }
+  }
+  lineAdjustData.value.overview[1] = total1
+  lineAdjustData.value.overview[2] = total2
+  lineAdjustData.value.overview[3] = total3
+
+  lineAdjustData.value.tableData = res
+}
+
+function selectDatechange(type: number) {
+  lineAdjustData.value.type = type
+  const params = {
+    type: lineAdjustData.value.type
+  }
+  getAnalysisLineAdjust(params)
+}
+watch(() => lineAdjustData.value.range, () => {
+  const params = {
+    startTime: format(lineAdjustData.value.range[0], 'yyyy-MM-dd'),
+    endTime: format(lineAdjustData.value.range[1], 'yyyy-MM-dd')
+  }
+  getAnalysisLineAdjust(params)
+})
+
+async function getAnalysisLineLength() {
+  const res = await lineAnalysisService.getAnalysisLineLength()
+  const seriesData = []
+  let total = 0
+
+  for (let i = 0; i < res.length; i++) {
+    const item = res[i]
+    seriesData.push({
+      name: item.lengthType,
+      value: item.proportion
+    })
+    total += +item.proportion
+  }
+  rightContent.value.tCharts[0].option.series[0].data = seriesData
+  rightContent.value.tCharts[0].option.title.subtext = total
+}
+getAnalysisLineLength()
+
+async function getAnalysisLineDistance() {
+  const res = await lineAnalysisService.getAnalysisLineDistance()
+  const seriesData = []
+  let total = 0
+
+  for (let i = 0; i < res.length; i++) {
+    const item = res[i]
+    seriesData.push({
+      name: item.distanceType,
+      value: item.proportion
+    })
+    total += +item.proportion
+  }
+  rightContent.value.tCharts[1].option.series[0].data = seriesData
+  rightContent.value.tCharts[1].option.title.subtext = total
+}
+getAnalysisLineDistance()
+
+const rankRange = ref([ subDays(Date.now(), 7), Date.now() ])
+async function getAnalysisLineOperate(params:any) {
+  const res = await lineAnalysisService.getAnalysisLineOperate(params)
+
+  const xAxisData = []
+  const seriesData1 = []
+  const seriesData2 = []
+  const seriesData3 = []
+
+  for (let i = 0; i < res.length; i++) {
+    const item = res[i]
+    xAxisData.push(item.time)
+    seriesData1.push(item.conventionLine)
+    seriesData2.push(item.expressLine)
+    seriesData3.push(item.characteristicLine)
+  }
+
+  rightContent.value.center.xAxis[0].data = xAxisData
+  rightContent.value.center.series[0].data = seriesData1
+  rightContent.value.center.series[1].data = seriesData2
+  rightContent.value.center.series[2].data = seriesData3
+}
+
+function rankDatechange(type: number) {
+  const params = {
+    type
+  }
+  getAnalysisLineOperate(params)
+}
+watch(() => rankRange.value, () => {
+  const params = {
+    startTime: format(rankRange.value[0], 'yyyy-MM-dd'),
+    endTime: format(rankRange.value[1], 'yyyy-MM-dd')
+  }
+  getAnalysisLineOperate(params)
+}, { immediate: true })
+
+const stationRankRange = ref([ subDays(Date.now(), 7), Date.now() ])
+async function getAnalysisStationRank(params:any) {
+  const res = await lineAnalysisService.getAnalysisStationRank(params)
+  const groupData = groupBy(res, 'stationName')
+  console.log(groupData, 'groupData')
+  const xAxisData = []
+  const seriesData1 = []
+
+  for (const key in groupData) {
+    const item = groupData[key]
+    xAxisData.push(key)
+    const total = item.reduce((prev: any, item: { flow: number }) => {
+      prev += item.flow
+      return prev
+    }, 0)
+    seriesData1.push(total)
+  }
+
+  rightContent.value.bottom.xAxis.data = xAxisData
+  rightContent.value.bottom.series[0].data = seriesData1
+}
+
+function stationRankchange(type: number) {
+  const params = {
+    type
+  }
+  getAnalysisStationRank(params)
+}
+watch(() => stationRankRange.value, () => {
+  const params = {
+    startTime: format(stationRankRange.value[0], 'yyyy-MM-dd HH:mm:ss'),
+    endTime: format(stationRankRange.value[1], 'yyyy-MM-dd HH:mm:ss')
+  }
+  getAnalysisStationRank(params)
+}, { immediate: true })
+
+function groupBy(array: any[], id: string) {
+  const groups:any = {}
+  array.forEach((o) => {
+    let group = JSON.stringify(o[id])
+    if (typeof o[id] === 'string') {
+      group = o[id]
+    }
+    groups[group] = groups[group] || []
+    groups[group].push(o)
+  })
+  // return Object.values(groups);
+  return groups
+}
 </script>
 
 <style lang="scss" scoped>
@@ -712,6 +938,7 @@ const rightContent = ref({
     .content {
       width: 100%;
       padding: 35px;
+      position: relative;
 
       .title {
         display: flex;
@@ -763,6 +990,21 @@ const rightContent = ref({
             border: 0;
           }
         }
+
+        .control{
+          position: absolute;
+          top: 30px;
+          right: 125px;
+          z-index: 9999;
+          .selectDate{
+            top: 0px;
+            left: -300px;
+          }
+          .n-date-picker{
+            position: absolute;
+
+          }
+        }
     }
 
   }
@@ -772,5 +1014,17 @@ const rightContent = ref({
     display: flex;
     justify-content: space-between;
   }
+  &-center,&-bottom {
+    position: relative;
+    .control{
+          position: absolute;
+          top: 60px;
+          right: 110px;
+          .selectDate{
+            top: 0px;
+            left: -300px;
+          }
+        }
+  }
 }
 </style>

src/pages/views/home/index.vue

@@ -327,7 +327,7 @@ const menus = [
     }
   }
 ]
-const active = ref(5)
+const active = ref(6)
 const currentComponent = ref(menus[active.value].component)
 const weather = computed(() => store.weather)
 const warningMsg = ref({

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

@@ -0,0 +1,82 @@
+import NetService from '@/services/net.service'
+import { injectable, Service } from '@/services/service'
+
+@injectable
+export default class LineAnalysisService extends Service {
+  private netService = new NetService()
+
+  /** 线路类型  /getAnalysisLineType   */
+  async getAnalysisLineType() {
+    const { success, data } = await this.netService.get('/getAnalysisLineType')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 区域里程  /getAnalysisRegionFlow   */
+  async getAnalysisRegionFlow() {
+    const { success, data } = await this.netService.get('/getAnalysisRegionFlow')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 近期调整线路  /getAnalysisLineAdjust   */
+  async getAnalysisLineAdjust(params:any) {
+    const { startTime = '', endTime = '', type = '' } = params
+    const { success, data } = await this.netService.get(`/getAnalysisLineAdjust?startTime=${startTime}&endTime=${endTime}&type=${type}`)
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 线路长度分布  /getAnalysisLineLength   */
+  async getAnalysisLineLength() {
+    const { success, data } = await this.netService.get('/getAnalysisLineLength')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 线路站距分布  /getAnalysisLineDistance   */
+  async getAnalysisLineDistance() {
+    const { success, data } = await this.netService.get('/getAnalysisLineDistance')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 线路运行速度  /getAnalysisLineOperate   */
+  async getAnalysisLineOperate(params:any) {
+    const { startTime = '', endTime = '', type = '' } = params
+    const { success, data } = await this.netService.get(`/getAnalysisLineOperate?startTime=${startTime}&endTime=${endTime}&type=${type}`)
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 站点客流排名  /getAnalysisStationRank   */
+  async getAnalysisStationRank(params:any) {
+    const { startTime = '', endTime = '', type = '' } = params
+    const { success, data } = await this.netService.get(`/getAnalysisStationRank?startTime=${startTime}&endTime=${endTime}&type=${type}`)
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 线路分析地图数据统计  /getAnalysisLineStatistics   */
+  async getAnalysisLineStatistics() {
+    const { success, data } = await this.netService.get('/getAnalysisLineStatistics')
+    if (success) {
+      return data || {}
+    }
+    return {}
+  }
+}