busroute/src/pages/views/home/index.vue

<script setup lang="ts">
import { computed, markRaw, ref } from 'vue'
import homePage from './components/HomePage.vue'
import cehicleOperation from './components/CehicleOperation.vue'
import lineAnalysis from './components/LineAnalysis.vue'
import maintenanceDynamics from './components/MaintenanceDynamics.vue'
import facilityManagement from './components/FacilityManagement.vue'
import stationManagement from './components/StationManagement.vue'
import passengerFlow from './components/PassengerFlow.vue'
import ChangeLine from '@/components/changeLine.vue'

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'
import StationManagementService from './services/stationManagement.service'
import LineAnalysisService from './services/lineAnalysis.service'

const homeService = new HomeService()
const cehicleOperationService = new CehicleOperationService()
const passengerFlowService = new PassengerFlowService()
const maintenanceDynamicsService = new MaintenanceDynamicsService()
const facilityManagementService = new FacilityManagementService()
const stationManagementService = new StationManagementService()
const lineAnalysisService = new LineAnalysisService()

const store = useStore()
const menus = [
  {
    name: '主页',
    key: 'homePage',
    component: markRaw(homePage),
    count: [
      { label: '设备车辆', value: 166, util: '辆' },
      { label: '线路', value: 60, util: '条' },
      { label: '场站', value: 100, util: '个' },
      { label: '中途站 ', value: 50, util: '个' },
      { label: '班次数量', value: 300, util: '趟' },
      {
        label: '总里程', value: 100, util: '万公里', style: { right: '-40px' }
      },
      { label: '入场率', value: 100, util: '%' }
    ],
    contrlSelect: {
      title: '显示点位',
      icon: '51',
      option: [
        {
          label: '车辆',
          value: 'bus',
          icon: '39'
        },
        {
          label: '场站',
          value: 'busStation',
          icon: '40'
        },
        {
          label: '线路',
          value: 'line',
          icon: '41'
        },
        {
          label: '充电桩',
          value: 'powerCharge',
          icon: '42'
        },
        {
          label: '维修站',
          value: 'maintenanceStation',
          icon: '43'
        },
        {
          label: '中途站点',
          value: 'station',
          icon: '44'
        }
      ],
      checked: [ 'bus', 'busStation', 'line', 'powerCharge', 'maintenanceStation', 'station' ]
    }
  },
  {
    name: '线路运营',
    key: 'cehicleOperation',
    component: markRaw(cehicleOperation),
    count: [
      { label: '今日客流', value: 2000, util: '人' },
      { label: '计划班次', value: 14, util: '次' },
      { label: '已发班次', value: 8, util: '次' },
      { label: '塌班 ', value: 0, util: '次' },
      {
        label: '计划里程', value: 1400, util: '公里', style: { right: '-18px' }
      },
      {
        label: '当前里程', value: 100, util: '公里', style: { right: '-18px' }
      },
      { label: '空驶率', value: 1, util: '%' }
    ],
    contrlSelect: {
      title: '公交状态',
      icon: '51',
      option: [
        {
          label: '拥挤',
          value: 1,
          icon: '45'
        },
        {
          label: '中等',
          value: 2,
          icon: '46'
        },
        {
          label: '舒适',
          value: 3,
          icon: '47'
        },
        {
          label: '维保',
          value: 4,
          icon: '48'
        },
        {
          label: '充电',
          value: 5,
          icon: '49'
        },
        {
          label: '停驶',
          value: 6,
          icon: '50'
        }
      ],
      checked: [ 1, 2, 3, 4, 5, 6 ]
    }
  },
  {
    name: '客流分析',
    key: 'passengerFlow',
    component: markRaw(passengerFlow),
    count: [
      {
        label: '客运量', value: 10, util: '万人次', style: { right: '-40px' }
      },
      { label: '满载率', value: 14, util: '%' },
      {
        label: '免费换乘', value: 8, util: '万人次', style: { right: '-40px' }
      },
      { label: '分担率 ', value: 0, util: '%' },
      { label: '平均乘距', value: 1400, util: 'km' }
    ],
    contrlSelect: {
      title: '场站分布',
      icon: '51',
      option: [
        {
          label: '线路客流量',
          value: 1,
          icon: ''
        },
        {
          label: '客流热力图',
          value: 2,
          icon: ''
        }
      ],
      checked: [ 1, 2, 3 ]
    }
  },
  {
    name: '维保动态',
    key: 'maintenanceDynamics',
    component: markRaw(maintenanceDynamics),
    count: [
      { label: '维保场', value: 10, util: '个' },
      { label: '运维驿站', value: 14, util: '个' },
      { label: '已保养', value: 8, util: '辆' },
      { label: '已维修 ', value: 0, util: '辆' }
    ],
    contrlSelect: {
      title: '线路类型',
      icon: '51',
      option: [
        {
          label: '维保场',
          value: 'maintenanceStation',
          icon: '43'
        },
        {
          label: '运维驿站',
          value: 'operationStation',
          icon: '43'
        }
      ],
      checked: [ 'maintenanceStation', 'operationStation' ]
    }
  },
  {
    name: '设施管理',
    key: 'facilityManagement',
    component: markRaw(facilityManagement),
    count: [
      { label: '车辆', value: 2000, util: '辆' },
      { label: '电子站牌', value: 14, util: '座' },
      { label: '洗车机', value: 8, util: '座' },
      { label: '充电桩 ', value: 0, util: '台' },
      { label: '车载部件', value: 1400, util: '个' }
    ],
    contrlSelect: {
      title: '维修点分布',
      icon: '51',
      option: [
        {
          label: '车辆',
          value: 'carInfo',
          icon: '39'
        },
        {
          label: '电子站牌',
          value: 'electronicStationSign',
          icon: '43'
        },
        {
          label: '洗衣机',
          value: 'carWasher',
          icon: '43'
        },
        {
          label: '充电桩',
          value: 'powerCharge',
          icon: '42'
        },
        {
          label: '车载部件',
          value: 'vehicleMountedComponents',
          icon: '43'
        }
      ],
      checked: [ 'carInfo', 'electronicStationSign', 'carWasher', 'powerCharge', 'vehicleMountedComponents' ]
    }
  },
  {
    name: '场站管理',
    key: 'stationManagement',
    component: markRaw(stationManagement),
    count: [
      { label: '场站', value: 2000, util: '个' },
      {
        label: '总面积', value: 14, util: '万平方米', style: { right: '-50px' }
      },
      { label: '发车线路', value: 8, util: '条' },
      { label: '入场车辆 ', value: 0, util: '辆' },
      { label: '静态停车', value: 1400, util: '辆' },
      { label: '充电桩', value: 8, util: '辆' },
      { label: '充电 ', value: 0, util: '辆' },
      { label: '维保', value: 1400, util: '辆' }
    ],
    contrlSelect: {
      title: '场站分布',
      icon: '51',
      option: [
        {
          label: '枢纽站',
          value: 'hubStation',
          icon: '43'
        },
        {
          label: '首末站',
          value: 'startEndStation',
          icon: '43'
        },
        {
          label: '停保场',
          value: 'parkingLot',
          icon: '43'
        },
        {
          label: '维保站',
          value: 'maintenanceStation',
          icon: '43'
        }
      ],
      checked: [ 'hubStation', 'startEndStation', 'parkingLot', 'maintenanceStation' ]
    }
  },
  {
    name: '线路分析',
    key: 'lineAnalysis',
    component: markRaw(lineAnalysis),
    count: [
      { label: '线路', value: 2000, util: '条' },
      { label: '站点', value: 14, util: '个' },
      {
        label: '线路长度', value: 8, util: '公里', style: { right: '-18px' }
      },
      {
        label: '线路密度 ', value: 0, util: 'km/km³', style: { right: '-35px' }
      },
      { label: '线路重复率', value: 1400, util: '%' },
      { label: '线路覆盖率', value: 8, util: '%' }
    ],
    contrlSelect: {
      title: '线路类型',
      icon: '51',
      option: [
        {
          label: '常规',
          value: 1,
          icon: ''
        },
        {
          label: '快线',
          value: 2,
          icon: ''
        },
        {
          label: '特色',
          value: 3,
          icon: ''
        }
      ],
      checked: [ 1, 2, 3 ]
    }
  }
]
const active = ref(0)
const currentComponent = ref(menus[active.value].component)
const weather = computed(() => store.weather)
const warningMsg = ref({
  value: '这里是预警提示信息这里是预警提示信息这里是预警提示信息这里是预警提示信息这里是预是预警提示信息这里',
  time: ' 2023-01-01 12:00:00',
  btns: [
    {
      name: '忽略',
      event: '',
      type: 'default'
    },
    {
      name: '立即处理',
      event: '',
      type: 'error'
    }
  ]
})

function changMenu(_id: number) {
  active.value = _id
  currentComponent.value = menus[_id].component
}

async function getBusTotal() {
  const res = await homeService.getBusTotal()
  menus[0].count[0].value = res.busNum
  menus[0].count[1].value = res.lineNum
  menus[0].count[2].value = res.stationNum
  menus[0].count[3].value = res.midwayStationNum
  menus[0].count[4].value = res.classesNum
  menus[0].count[5].value = res.totalMileage
  menus[0].count[6].value = res.admissionRate
}
getBusTotal()
async function getBusLineStatistics() {
  const res = await cehicleOperationService.getBusLineStatistics()
  menus[1].count[0].value = res.passengerFlow
  menus[1].count[1].value = res.planClasses
  menus[1].count[2].value = res.setOutClasses
  menus[1].count[3].value = res.collapseClasses
  menus[1].count[4].value = res.planMileage
  menus[1].count[5].value = res.currentMileage
  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()

async function getStationStatistics() {
  const res = await stationManagementService.getStationStatistics()

  menus[5].count[0].value = res.stationNum
  menus[5].count[1].value = res.totalArea
  menus[5].count[2].value = res.lineNum
  menus[5].count[3].value = res.vehicleNum
  menus[5].count[4].value = res.parkNum
  menus[5].count[5].value = res.chargingNum
  menus[5].count[6].value = res.chargeVehicle
  menus[5].count[7].value = res.maintenanceNum
}
getStationStatistics()
async function getAnalysisLineStatistics() {
  const res = await lineAnalysisService.getAnalysisLineStatistics()

  menus[6].count[0].value = res.lineNum
  menus[6].count[1].value = res.stationNum
  menus[6].count[2].value = res.lineLength
  menus[6].count[3].value = res.lineDensity
  menus[6].count[4].value = res.lineRepetition
  menus[6].count[5].value = res.lineCoverageRate
}
getAnalysisLineStatistics()
</script>
<template>
  <div class="home">
    <div class="home-top">
      <img src="../../../assets/img/6.svg">
      <div class="home-top-user">
        <div>安全运营<span>100</span>天</div>
        <div v-if="weather">
          <img :src="weather.icon">
          {{ weather.weather }}
          <span>{{ weather.temperature }}℃</span>
        </div>
        <div>
          <img src="../../../assets/img/10.svg">
          你的名称
        </div>
      </div>
    </div>
    <div class="home-content">
      <div class="home-content-top">
        <div class="home-content-top-menus">
          <template
            v-for="(item, index) in menus"
            :key="index"
          >
            <div
              :class="{ active: index === active }"
              @click="changMenu(index)"
            >
              {{ item.name }}
            </div>
          </template>
        </div>
      </div>
      <div class="home-content-left" />
      <div class="home-content-right" />
      <div class="home-content-center">
        <Map :Item="(menus[active] as any)" />
      </div>
      <div class="home-content-left-img" />
      <div class="home-content-right-img" />
      <div class="home-content-center-tooltip">
        <Icon
          name="37"
          :size="37"
        />
        <div>{{ warningMsg.value }}</div>
        <div>{{ warningMsg.time }}</div>
        <div>
          <template
            v-for="(item, index) in warningMsg.btns"
            :key="index"
          >
            <n-button
              round
              :type="item.type"
            >
              {{ item.name }}
            </n-button>
          </template>
        </div>
      </div>
      <div class="home-content-bottom-bottom">
        <template
          v-for="(item, index) in menus[active].count"
          :key="index"
        >
          <div>
            <div>{{ item.label }}</div>
            <div>
              <span>{{ item.value }}</span>
              <span :style="item.style">{{ item.util }}</span>
            </div>
          </div>
        </template>
      </div>
      <component :is="currentComponent" />
      <ChangeLine v-show="active===1" />
    </div>
    <div class="home-bottom">
      雅安市公共交通集团有限公司
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home {
  height: 1456px;
  width: 4784px;
  background: #030E25;

  &-top {
    height: 160px;
    background: url(../../../assets//img/2.svg) no-repeat top center;
    background-size: cover;
    text-align: center;
    position: relative;

    &>img {
      width: 900px;
      height: 130px;
    }

    &-user {
      position: absolute;
      display: flex;
      align-items: center;
      right: 30px;
      top: 30px;

      &>div {
        margin: 0 25px;
        font-size: 24px;

        &:first-child {
          font-weight: 400;
          color: #80FFFF;

          span {
            color: white;
            font-weight: 700;
            font-size: 50px;
            margin: 0 5px;
          }
        }

        &:last-child {
          color: white;
          display: flex;
          align-items: center;
          margin-right: 0;

          img {
            border-radius: 50%;
            width: 80px;
            height: 80px;
            overflow: hidden;
            margin-right: 15px;
          }
        }

        &:nth-child(2) {
          display: flex;
          align-items: flex-end;
          color: white;

          img {
            width: 56px;
            height: 56px;
            margin-right: 10px;
          }

          span {
            color: #80FFFF;
            margin-left: 10px;
          }
        }
      }
    }
  }

  &-content {
    height: calc(1456px - 160px - 72px);
    position: relative;

    &-top {
      position: absolute;
      left: 50%;
      top: -30px;
      transform: translate(-50%, 0);
      height: 185px;
      width: calc(100% - 1370px - 1370px);
      background: url(../../../assets//img/5.svg) no-repeat center;
      background-size: cover;
      z-index: 2;

      &-menus {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding: 0 410px;

        &>div {
          text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.698);
          font-family: Arial Normal;
          font-size: 24px;
          text-align: center;
          letter-spacing: 0px;
          color: #D7D7D7;
          cursor: pointer;
          height: 111px;
          width: 175px;
          line-height: 111px;
        }

        .active {
          color: white;
          background: url(../../../assets/img/7.svg) no-repeat center;
          background-size: cover;
        }
      }

    }

    &-left,
    &-right {
      position: absolute;
      height: 110%;
      width: 40px;
      top: -117px;
    }

    &-left {
      left: 7px;
      background: url(../../../assets/img/8.svg) no-repeat left top;
      background-size: cover;

      &-img {
        background: url(../../../assets/img/35.png) no-repeat left top;
        background-size: cover;
        width: 175px;
        position: absolute;
        left: 1396px;
        top: 0;
        height: 103%;
        z-index: 2;
        background-position: -113px 0;
      }
    }

    &-right {
      right: 7px;
      background: url(../../../assets/img/9.svg) no-repeat left top;
      background-size: cover;

      &-img {
        background: url(../../../assets/img/34.png) no-repeat right top;
        background-size: cover;
        width: 175px;
        position: absolute;
        right: 1394px;
        top: 0;
        height: 103%;
        z-index: 2;
        background-position: -203px 0;
      }
    }

    &-center {
      position: absolute;
      left: 50%;
      top: 0;
      width: 1990px;
      height: 100%;
      z-index: 1;
      margin: 0 auto;
      transform: translate(-50%, 0);

      &-tooltip {
        position: absolute;
        top: 90px;
        border: solid 1px red;
        border-radius: 30px;
        z-index: 3;
        left: 50%;
        transform: translate(-50%, 0);
        display: flex;
        align-items: center;
        padding: 8px 10px;
        color: #E73D41;
        font-size: 23px;
        animation: flicker 0.5s infinite alternate;
        background: #e73d4048;

        &>svg {
          margin-right: 10px;
          margin-left: 10px;
        }

        &>div:nth-child(2) {
          max-width: 938px;
          min-width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &>div:nth-child(3) {
          margin: 0 60px;
        }

        & button:last-child {
          margin-left: 10px;
        }
      }
    }

    &-bottom-bottom {
      position: absolute;
      display: flex;
      align-items: center;
      left: 50%;
      z-index: 3;
      bottom: 45px;
      transform: translate(-50%, 0);

      &>div {
        width: 158px;
        height: 138px;
        background: url(../../../assets/img/38.svg) no-repeat;
        margin: 0 10px;
        text-align: center;
        text-shadow: rgba(0, 255, 255, 0.698) 1px 1px 10px;
        overflow-wrap: break-word;
        background-size: cover;
        padding-top: 10px ;

        &>div:first-child {
          font-size: 20px;
          color: rgb(128, 255, 255);
        }

        &>div:last-child {
          position: relative;
          &>span{
            color: rgb(255, 255, 255);
            font-family: "Impact Normal", Impact, sans-serif;
          }
          &>span:first-child {
            padding-top: 10px;
            font-size: 40px;
          }
          &>span:last-child{
            font-size: 20px;
            position: absolute;
            top: 16px;
            right: 0;
          }
        }
      }
    }
    .drag-container{
      left: 1581px;
      top: 318px;
    }
  }

  &-bottom {
    height: 72px;
    background: url(../../../assets/img/3.svg) no-repeat center;
    background-size: cover;
    text-align: center;
    line-height: 72px;
    color: white;
    font-size: 20px;
    letter-spacing: 20px;
    text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.6);
  }
}

@keyframes flicker {
  0% {
    opacity: 0.8;
  }

  100% {
    opacity: 0.3;
  }
}
</style>