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

<template>
  <Layout>
    <template #left>
      <div class="left">
        <div class="left-top">
          <Box
            v-for="(item, index) in leftContent.tCharts"
            :key="index"
            :width="680"
            :height="406"
            :name="item.name"
          >
            <Echart :option="item.option" />
          </Box>
        </div>
        <Box
          class="left-bottom"
          :width="1370"
          :height="818"
          :name="'近期调整线路'"
        >
          <div class="content">
            <div class="control">
              <SelectDate
                @date-change="selectDatechange"
              />
              <n-date-picker
                v-model:value="lineAdjustData.range"
                :bordered="false"
                type="daterange"
                style="width: 260px;"
              />
            </div>
            <div class="content-top">
              <div class="title">
                <icon
                  :name="'1-6'"
                  :size="30"
                />
                <div>线路调整总览</div>
              </div>
              <div class="overview">
                <div
                  v-for="item,key in lineAdjustData.overview"
                  :key="key"
                  class="item"
                >
                  <icon
                    :name="'1-6'"
                    :size="40"
                  />
                  <div class="name">
                    {{ lineAdjustData.map[key] }}
                  </div>
                  <div class="num">
                    {{ item }}
                  </div>
                  条
                </div>
              </div>
            </div>
            <div class="content-bottom">
              <div class="title">
                <icon
                  :name="'1-6'"
                  :size="30"
                />
                <div>线路调整详情</div>
              </div>
              <n-table
                striped
                size="large"
                :bordered="false"
                single-column
                :bottom-bordered="false"
                class="table"
              >
                <thead>
                  <tr>
                    <th> 序号 </th>
                    <th> 措施 </th>
                    <th> 区域 </th>
                    <th> 线路 </th>
                    <th> 线路类型 </th>
                    <th> 时间 </th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="item,index in lineAdjustData.tableData"
                    :key="item"
                  >
                    <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>
            </div>
          </div>
        </Box>
      </div>
    </template>
    <template #right>
      <div class="right">
        <div class="right-top">
          <Box
            v-for="(item, index) in rightContent.tCharts"
            :key="index"
            :width="680"
            :height="406"
            :name="item.name"
          >
            <Echart :option="item.option" />
          </Box>
        </div>
        <Box
          class="right-center"
          :width="1370"
          :height="406"
          :name="'线路运行速度'"
        >
          <Echart :option="rightContent.center" />
          <div class="control">
            <SelectDate
              @date-change="rankDatechange"
            />
            <n-date-picker
              v-model:value="rankRange"
              :bordered="false"
              type="daterange"
              style="width: 260px;"
            />
          </div>
        </Box>
        <Box
          class="right-bottom"
          :width="1370"
          :height="406"
          :name="'站点客流排名'"
        >
          <Echart :option="rightContent.bottom" />
          <div class="control">
            <SelectDate
              @date-change="stationRankchange"
            />
            <n-date-picker
              v-model:value="stationRankRange"
              :bordered="false"
              type="daterange"
              style="width: 260px;"
            />
          </div>
        </Box>
      </div>
    </template>
  </Layout>
</template>

<script setup lang='ts'>
import Layout from '@/components/layout.vue'
import Box from '@/components/box.vue'
import Echart from '@/components/chart.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: [
    {
      name: '线路类型',
      option: {
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },

        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: '60%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              show: true,
              formatter: '{b}： {c}条',
              color: 'white'
            },
            data: [
              { key: 2, name: '常规', value: 130 },
              { key: 2, name: '快线', value: 50 },
              { key: 2, name: '特色线路', value: 50 }
            ]
          }
        ]
      }
    },
    {
      name: '区域里程',
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 20,
          left: 20,
          bottom: 20,
          right: 20,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 18
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          data: [ '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区' ],
          axisLabel: {
            fontSize: 18,
            color: '#fff',
            margin: 10,
            rich: {
              a1: {
                backgroundColor: '#FFFF0050',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#FFFF00',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              a2: {
                backgroundColor: '#F2F2F250',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#F2F2F2',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              a3: {
                backgroundColor: '#FAAD0E50',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#FAAD0E',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              b: {
                backgroundColor: '#00FFFF50',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#00FFFF',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              }
            },
            formatter: (params: string, _id: number) => {
              const id = _id + 1
              if (_id < 3) {
                return `{a${id}|${id}}  ${params}`
              }
              return `{b|${id}}  ${params}`
            }
          }
        },
        series: [
          {
            z: 2,
            name: 'value',
            type: 'bar',
            barWidth: 25,
            zlevel: 1,
            data: [ '80', '70', '60', '50', '40', '30', '20', '10' ],
            itemStyle: {
              borderRadius: [ 0, 16, 16, 0 ],
              color: new graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(20,167,250,0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(0,255,209,1)'
                }
              ])
            },
            label: {
              position: 'inside',
              color: '#fff',
              fontSize: 16
            }
          }
        ]
      }
    }
  ]
})
const rightContent = ref({
  tCharts: [
    {
      name: '线路长度分布',
      option: {
        title: {
          text: '总', // 图标内容文本
          subtext: '200',
          left: 'center', // 图标内容水平居中
          top: 'center', // 图标内容垂直居中
          // 文本样式
          textStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          }
        },
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },

        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: [ '45%', '65%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              show: true,
              formatter: '{b} :  {d}%',
              color: 'white'
            },
            data: [
              { key: 2, name: '5km', value: 180 },
              { key: 2, name: '5-10km', value: 50 },
              { key: 2, name: '10-15km', value: 30 },
              { key: 2, name: '15-20km', value: 20 },
              { key: 2, name: '20km', value: 10 }
            ]
          }
        ]
      }
    },
    {
      name: '线路占据分布',
      option: {
        title: {
          text: '总', // 图标内容文本
          subtext: '190',
          left: 'center', // 图标内容水平居中
          top: 'center', // 图标内容垂直居中
          // 文本样式
          textStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          }
        },
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },

        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: [ '45%', '65%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              show: true,
              formatter: '{b} :  {d}%',
              color: 'white'
            },
            data: [
              { key: 2, name: '<300m', value: 180 },
              { key: 2, name: '300-500m', value: 50 },
              { key: 2, name: '300-1000m', value: 30 },
              { key: 2, name: '>1000m', value: 20 }
            ]
          }
        ]
      }
    }
  ],
  center: {
    grid: {
      containLabel: true,
      right: 30,
      left: 50,
      bottom: '25%',
      top: '20%'
    },
    legend: {
      show: true,
      left: 'center',
      bottom: '15%',
      itemWidth: 15,
      itemHeight: 10,
      textStyle: {
        color: '#646464',
        fontSize: 18
      }
    },
    xAxis: [ {
      type: 'category',
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        fontSize: 18
        // formatter: (value: number) => format( 1'时')
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      data: [ '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时' ]
    } ],
    yAxis: [ {
      name: 'km/h',
      nameLocation: 'center',
      nameGap: 50,
      nameTextStyle: {
        color: '#fff',
        fontSize: 18
      },
      padding: 5,
      // max: 1000,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#A1A7B3'
          // type: 'dashed'
        }
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        margin: 10,
        textStyle: {
          color: '#fff'

        }
      },
      axisTick: {
        show: false
      }
    }
    ],
    series: [ {
      name: '常规',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      itemStyle: {
        normal: {
          // color: '#4293FD',
          lineStyle: {
            // color: '#4293FD',
            width: 2
          }
        }
      },
      data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
    },
    {
      name: '快线',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      itemStyle: {
        normal: {
          // color: '#23D0C4',
          lineStyle: {
            // color: '#23D0C4',
            width: 2
          }
        }
      },
      data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
    },
    {
      name: '特色线路',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      itemStyle: {
        normal: {
          // color: '#23D0C4',
          lineStyle: {
            // color: '#23D0C4',
            width: 2
          }
        }
      },
      data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
    }
    ],
    dataZoom: {}
  },
  bottom: {
    grid: {
      containLabel: true,
      top: '35%',
      right: 30,
      left: 50,
      bottom: 0
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      top: 70,
      left: '50%',
      itemWidth: 18,
      itemHeight: 18,
      itemGap: 30,
      textStyle: {
        fontSize: 18,
        color: '#C9D2FA'
      }
    },
    xAxis: {
      // name: "班级",
      triggerEvent: true,
      data: [
        '雨城区',
        '芦山县',
        '名山县',
        '天全县',
        '宝兴县',
        '汉源县',
        '雨城区',
        '芦山县',
        '名山县',
        '天全县',
        '宝兴县',
        '汉源县'
      ],
      axisLabel: {
        interval: 0,
        show: true,
        fontSize: 18,
        color: '#C9D2FA'
      },
      axisLine: {
        show: false,
        lineStyle: {
          show: false,
          color: '#F3F3F3',
          width: 2
        }
      },

      axisTick: {
        show: false
      }
    },
    yAxis: [
      {
        name: '人数',
        nameLocation: 'center',
        nameGap: 50,
        nameTextStyle: {
          color: '#fff',
          fontSize: 18
        },
        splitNumber: 2,
        axisLabel: {
          show: true,
          fontSize: 18,
          color: '#C9D2FA'
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#3E4A82'
          }
        }
      }
    ],
    series: [
      {
        name: '客流量',
        type: 'bar',
        silent: true,
        itemStyle: {
          normal: {
            color: new graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#FFD35D'// 0% 处的颜色
                },
                {
                  offset: 0.5,
                  color: '#7ec2f382'// 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#1890ff21' // 100% 处的颜色
                }
              ],
              false
            )
          }
        },
        barWidth: 30,
        data: [ 200, 108, 200, 40, 210, 100, 200, 108, 200, 40, 210, 100 ]
      }
    ]
  }
})

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)
}, { immediate: true })

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>
.left {
  &-top {
    display: flex;
    justify-content: space-between;
  }

  &-bottom {
    .content {
      width: 100%;
      padding: 35px;
      position: relative;

      .title {
        display: flex;
        gap: 10px;
        color: #FFFFFF;
        text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.7);
        font-size: 20px;

        .icon {
          width: 30px;
          height: 30px;
          background: #000;
        }
      }
      .overview {
          display: flex;
          padding: 34px;
          justify-content: space-between;

          .item {
            width: 375px;
            height: 65px;
            background: rgba(27, 175, 255, 0.298);
            border: 1px solid #00FFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            font-size: 20px;
            gap: 10px;

            .icon {
              width: 30px;
              height: 30px;
              background: #000;
            }

            .num {
              color: #00FFFF;
              font-size: 30px;
              font-family: Impact Normal;
            }
          }
        }
      .table{
          margin-top: 30px;
          text-align: center;
          th{
            border: 0;
          }
        }

        .control{
          position: absolute;
          top: 30px;
          right: 125px;
          .selectDate{
            top: 0px;
            left: -300px;
          }
        }
    }

  }
}
.right{
  &-top {
    display: flex;
    justify-content: space-between;
  }
  &-center,&-bottom {
    position: relative;
    .control{
          position: absolute;
          top: 60px;
          right: 110px;
          .selectDate{
            top: 0px;
            left: -300px;
          }
        }
  }
}
</style>