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

src/assets/customEcharts.json

@@ -0,0 +1,160 @@
+{
+    "seriesCnt": "8",
+    "backgroundColor": "rgba(0,0,0,0)",
+    "titleColor": "#464646",
+    "subtitleColor": "#6e7079",
+    "textColorShow": false,
+    "textColor": "#333",
+    "markTextColor": "#eeeeee",
+    "color": [
+        "#628be9",
+        "#7acba3",
+        "#5c6b8b",
+        "#ffb63b",
+        "#6660e9",
+        "#7fbedf",
+        "#8560af",
+        "#e39550"
+    ],
+    "borderColor": "#ccc",
+    "borderWidth": 0,
+    "visualMapColor": [
+        "#bf444c",
+        "#d88273",
+        "#f6efa6"
+    ],
+    "legendTextColor": "#333333",
+    "kColor": "#eb5454",
+    "kColor0": "#47b262",
+    "kBorderColor": "#eb5454",
+    "kBorderColor0": "#47b262",
+    "kBorderWidth": 1,
+    "lineWidth": 2,
+    "symbolSize": 4,
+    "symbol": "emptyCircle",
+    "symbolBorderWidth": 1,
+    "lineSmooth": false,
+    "graphLineWidth": 1,
+    "graphLineColor": "#aaaaaa",
+    "mapLabelColor": "#000",
+    "mapLabelColorE": "rgb(100,0,0)",
+    "mapBorderColor": "#444",
+    "mapBorderColorE": "#444",
+    "mapBorderWidth": 0.5,
+    "mapBorderWidthE": 1,
+    "mapAreaColor": "#eee",
+    "mapAreaColorE": "rgba(255,215,0,0.8)",
+    "axes": [
+        {
+            "type": "all",
+            "name": "通用坐标轴",
+            "axisLineShow": true,
+            "axisLineColor": "#6E7079",
+            "axisTickShow": true,
+            "axisTickColor": "#6E7079",
+            "axisLabelShow": true,
+            "axisLabelColor": "#6E7079",
+            "splitLineShow": true,
+            "splitLineColor": [
+                "#E0E6F1"
+            ],
+            "splitAreaShow": false,
+            "splitAreaColor": [
+                "rgba(250,250,250,0.2)",
+                "rgba(210,219,238,0.2)"
+            ]
+        },
+        {
+            "type": "category",
+            "name": "类目坐标轴",
+            "axisLineShow": true,
+            "axisLineColor": "#6E7079",
+            "axisTickShow": true,
+            "axisTickColor": "#6E7079",
+            "axisLabelShow": true,
+            "axisLabelColor": "#6E7079",
+            "splitLineShow": false,
+            "splitLineColor": [
+                "#E0E6F1"
+            ],
+            "splitAreaShow": false,
+            "splitAreaColor": [
+                "rgba(250,250,250,0.2)",
+                "rgba(210,219,238,0.2)"
+            ]
+        },
+        {
+            "type": "value",
+            "name": "数值坐标轴",
+            "axisLineShow": false,
+            "axisLineColor": "#6E7079",
+            "axisTickShow": false,
+            "axisTickColor": "#6E7079",
+            "axisLabelShow": true,
+            "axisLabelColor": "#6E7079",
+            "splitLineShow": true,
+            "splitLineColor": [
+                "#E0E6F1"
+            ],
+            "splitAreaShow": false,
+            "splitAreaColor": [
+                "rgba(250,250,250,0.2)",
+                "rgba(210,219,238,0.2)"
+            ]
+        },
+        {
+            "type": "log",
+            "name": "对数坐标轴",
+            "axisLineShow": false,
+            "axisLineColor": "#6E7079",
+            "axisTickShow": false,
+            "axisTickColor": "#6E7079",
+            "axisLabelShow": true,
+            "axisLabelColor": "#6E7079",
+            "splitLineShow": true,
+            "splitLineColor": [
+                "#E0E6F1"
+            ],
+            "splitAreaShow": false,
+            "splitAreaColor": [
+                "rgba(250,250,250,0.2)",
+                "rgba(210,219,238,0.2)"
+            ]
+        },
+        {
+            "type": "time",
+            "name": "时间坐标轴",
+            "axisLineShow": true,
+            "axisLineColor": "#6E7079",
+            "axisTickShow": true,
+            "axisTickColor": "#6E7079",
+            "axisLabelShow": true,
+            "axisLabelColor": "#6E7079",
+            "splitLineShow": false,
+            "splitLineColor": [
+                "#E0E6F1"
+            ],
+            "splitAreaShow": false,
+            "splitAreaColor": [
+                "rgba(250,250,250,0.2)",
+                "rgba(210,219,238,0.2)"
+            ]
+        }
+    ],
+    "axisSeperateSetting": true,
+    "toolboxColor": "#999999",
+    "toolboxEmphasisColor": "#666666",
+    "tooltipAxisColor": "#cccccc",
+    "tooltipAxisWidth": 1,
+    "timelineLineColor": "#dae1f5",
+    "timelineLineWidth": 2,
+    "timelineItemColor": "#a4b1d7",
+    "timelineItemColorE": "#ffffff",
+    "timelineCheckColor": "#316bf3",
+    "timelineCheckBorderColor": "#ffffff",
+    "timelineItemBorderWidth": 1,
+    "timelineControlColor": "#a4b1d7",
+    "timelineControlBorderColor": "#a4b1d7",
+    "timelineControlBorderWidth": 1,
+    "timelineLabelColor": "#a4b1d7"
+}

src/assets/native-plugin.ts

@@ -11,7 +11,9 @@ import {
   NSelect,
   NCheckboxGroup,
   NCheckbox,
-  NDatePicker
+  NDatePicker,
+  NForm,
+  NFormItem
 } from 'naive-ui'
 
 const naive = create({
@@ -27,7 +29,9 @@ const naive = create({
     NSelect,
     NCheckboxGroup,
     NCheckbox,
-    NDatePicker
+    NDatePicker,
+    NForm,
+    NFormItem
   ]
 })
 

src/components/Drag.vue

@@ -49,7 +49,7 @@ nextTick(() => {
 </script>
 <style scoped>
 .drag-container {
-  position: fixed !important;
+  position: absolute !important;
   z-index: 100;
 }
 </style>

src/components/changeLine.vue

@@ -80,7 +80,7 @@ getLine()
 
 <style lang="scss" scoped>
 .changeLine {
-  position: fixed;
+  position: absolute;
   color: #fff;
   width: 400px;
 

src/components/chart.vue

@@ -10,6 +10,8 @@ import * as Echarts from 'echarts'
 import {
   nextTick, onUnmounted, ref, watch
 } from 'vue'
+import customEcharts from '../assets/customEcharts.json'
+Echarts.registerTheme('slef-theme', customEcharts)
 
 const props = defineProps<{
     option: Echarts.EChartsOption | any
@@ -18,7 +20,7 @@ const chart = ref()
 let myChart = null as any
 
 nextTick(() => {
-  myChart = Echarts.init(chart.value)
+  myChart = Echarts.init(chart.value, 'slef-theme')
 })
 
 watch(() => props.option, (v) => {

src/pages/login/index.vue

@@ -0,0 +1,181 @@
+<script lang='ts' setup>
+import { nextTick, ref } from 'vue'
+import NetService from '@/services/net.service'
+import useStore from '../store'
+const netService = new NetService()
+
+const store = useStore()
+
+const formRef = ref()
+const model = ref({
+  account: '',
+  password: ''
+})
+const rules = {
+  account: [ {
+    required: true,
+    trigger: [ 'blur', 'input' ],
+    message: '请输入用户名'
+  } ],
+  password: [ {
+    required: true,
+    trigger: [ 'blur', 'input' ],
+    message: '请输入密码'
+  } ]
+}
+const labelStyle = {
+  height: '50px',
+  fontSize: '20px'
+}
+/** 登录 */
+async function login() {
+  formRef.value?.validate(async (errors?: Array<any>) => {
+    if (!errors) {
+      const params = {
+        account: model.value.account.trim(),
+        password: model.value.password.trim()
+      }
+      const { success, data, message } = await netService.post('/sys/login', params)
+      if (!success) throw message
+      store.setUserInfo(data)
+      sessionStorage.setItem('token', data.satoken)
+      await nextTick()
+      // 页面跳转
+      window.location.href = '/'
+    }
+  })
+}
+
+</script>
+<template>
+  <div class="login">
+    <div
+      class="form"
+      @keydown.enter="login"
+    >
+      <div class="title">
+        雅安可视化管控中心
+      </div>
+      <n-form
+        ref="formRef"
+        :model="model"
+        :rules="rules"
+        label-placement="left"
+        label-width="80px"
+        :show-require-mark="false"
+      >
+        <n-form-item
+          label="用户名"
+          path="account"
+          :label-style="labelStyle"
+        >
+          <n-input
+            v-model:value="model.account"
+            placeholder="请输入用户名"
+            size="large"
+            round
+          >
+            <template #prefix>
+              <icon
+                name="user"
+                :size="16"
+              />
+            </template>
+          </n-input>
+        </n-form-item>
+        <n-form-item
+          label="密码"
+          path="password"
+          :label-style="labelStyle"
+        >
+          <n-input
+            v-model:value="model.password"
+            placeholder="请输入密码"
+            size="large"
+            round
+            type="password"
+          >
+            <template #prefix>
+              <icon
+                name="lock"
+                :size="16"
+              />
+            </template>
+          </n-input>
+        </n-form-item>
+        <n-form-item
+          label=" "
+          :label-style="labelStyle"
+        >
+          <n-button
+            v-debounce
+            round
+            :bordered="false"
+            @click="login"
+          >
+            登 录
+          </n-button>
+        </n-form-item>
+      </n-form>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.login {
+  width: 100vw;
+  height: 100vh;
+  background: #030E25;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0 160px;
+
+  .form {
+    width: 711px;
+    height: 576px;
+    background: linear-gradient(229deg, #050f25, #535c66);
+    border-radius: 30px;
+    border: 2px solid #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .title {
+      display: flex;
+      gap: 30px;
+      margin-top: 81px;
+      font-size: 36px;
+      color: #FFFFFF;
+      line-height: 41px;
+      letter-spacing: 2px;
+    }
+
+    .n-form-item {
+      &:first-child {
+        margin-top: 110px;
+      }
+
+      margin-top: 16px;
+      margin-bottom: 0;
+    }
+
+    :deep(.n-form-item-label__text) {
+      text-align-last: justify;
+    }
+
+    .n-input,
+    .n-button {
+      width: 415px;
+      --n-height: 50px
+    }
+
+    .n-button {
+      background: #030E25;
+      color: #FFFFFF;
+      border-color: #fff;
+      font-size: 20px;
+    }
+  }
+}
+</style>

src/pages/login/route.ts

@@ -0,0 +1,10 @@
+import { RouteRecordRaw } from 'vue-router'
+
+export default {
+  path: '/login',
+  meta: {
+    authorize: true
+  },
+  component: () => import('./index.vue'),
+  children: []
+} as RouteRecordRaw

src/pages/main.ts

@@ -10,7 +10,10 @@ const store = createPinia()
 
 // 动态路由
 const routes = Object.values(import.meta.glob('./views/*/route.ts', { eager: true, import: 'default' })) as unknown as RouteRecordRaw[]
-routes.push({ path: '/:path(.*)', redirect: '/' })
+routes.push(
+  { path: '/login', component: () => import('./login/index.vue') },
+  { path: '/:path(.*)', redirect: '/login' }
+)
 
 const app = createApp(App)
 const router = createRouter({
@@ -18,6 +21,15 @@ const router = createRouter({
   routes
 })
 
+// 路由守卫
+router.beforeEach((to, from, next) => {
+  const token = sessionStorage.getItem('token')
+  if (to.path !== '/login' && !token) {
+    router.replace('/login')
+  } else {
+    next()
+  }
+})
 app.use(store)
   .use(router)
   .use(naive)
@@ -27,7 +39,7 @@ router.isReady().then(() => {
   const vm = app.mount('#app')
   app.config.errorHandler = (err: any) => {
     if (err.reason === 401) {
-      router.replace('/')
+      router.replace('/login')
     } else {
       console.log(err)
     }

src/pages/store/index.ts

@@ -19,7 +19,7 @@ export interface Weather {
 const useStore = defineStore('index', {
   state: () => ({
     userInfro: {} as UserInfo,
-    token: '9d984fe66da0459bb64f0a408600344e',
+    token: '',
     loading: false,
     weather: {} as Weather,
     weatherIcons: [

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

@@ -446,7 +446,7 @@
                     :key="item"
                     :class="{ no: index === 0 }"
                   >
-                    <td>
+                    <td style="width: 120px; text-align: left;padding-left: 30px;">
                       <div class="index" /> {{ findlabel(vehicleStatus,item.carStatus) }}
                     </td>
                     <td> {{ item?.licensePlate }} </td>
@@ -502,7 +502,9 @@ import Layout from '@/components/layout.vue'
 import Box from '@/components/box.vue'
 import Echart from '@/components/chart.vue'
 
-import { computed, ref, watch } from 'vue'
+import {
+  computed, onUnmounted, ref, watch
+} from 'vue'
 import { graphic } from 'echarts'
 import CehicleOperationService from '../services/cehicleOperation.service'
 import useStore from '@/pages/store'
@@ -571,6 +573,10 @@ const leftContent = ref({
     grid: {
       containLabel: true
     },
+    tooltip: {
+      show: true,
+      formatter: '{b}: {c}辆 ,占比: {d}%'
+    },
     // 图表图例
     legend: {
       show: true,
@@ -588,7 +594,6 @@ const leftContent = ref({
       }
     },
 
-    // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
     series: [
       {
         type: 'pie', // 图表类型为饼图
@@ -598,7 +603,7 @@ const leftContent = ref({
         label: {
           show: true,
           fontSize: 16,
-          formatter: '{b}： {c}条',
+          formatter: '{b}： {c}辆',
           color: 'white'
         },
         data: [
@@ -638,6 +643,10 @@ const rightContent = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}次 , 占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -651,15 +660,14 @@ const rightContent = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 14
           }
         },
 
-        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
         series: [
           {
             type: 'pie', // 图表类型为饼图
-            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
@@ -668,13 +676,13 @@ const rightContent = ref({
               color: 'white'
             },
             data: [
-              { key: 2, name: '老年卡', value: 180 },
-              { key: 2, name: '电子钱包', value: 50 },
-              { key: 2, name: '现金', value: 30 },
-              { key: 2, name: '学生卡', value: 20 },
-              { key: 2, name: '成人次卡', value: 10 },
-              { key: 2, name: '其他', value: 10 },
-              { key: 2, name: '免费人次', value: 10 }
+              { name: '老年卡', value: 180 },
+              { name: '电子钱包', value: 50 },
+              { name: '现金', value: 30 },
+              { name: '学生卡', value: 20 },
+              { name: '成人次卡', value: 10 },
+              { name: '其他', value: 10 },
+              { name: '免费人次', value: 10 }
             ]
           }
         ]
@@ -688,6 +696,13 @@ const rightContent = ref({
           right: 30,
           left: 50
         },
+        tooltip: {
+          trigger: 'axis',
+          formatter: '{b}<br /> {a0}：{c0}人次',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
         legend: {
           show: true,
           left: 'center',
@@ -809,6 +824,13 @@ const rightContent = ref({
           right: 30,
           left: 50
         },
+        tooltip: {
+          trigger: 'axis',
+          formatter: '{b}<br /> {a0}：{c0}km',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
         legend: {
           show: true,
           left: 'center',
@@ -996,6 +1018,13 @@ watch(() => store.currentLineId, () => {
   getBusLineDriver()
   getBusLineDetail()
 })
+const timer = setInterval(() => {
+  getBusLineCar()
+}, 5 * 1000)
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
 
 const nameMap:any = {
   1: '老年卡',
@@ -1188,7 +1217,7 @@ getVehicleStatusService()
           .value {
             display: flex;
             justify-content: center;
-            align-items: flex-end;
+            align-items: baseline;
             gap: 10px;
           }
         }
@@ -1308,6 +1337,7 @@ getVehicleStatusService()
 
               .bold {
                 font-size: 24px;
+
               }
 
               .busNum {
@@ -1403,6 +1433,9 @@ getVehicleStatusService()
             min-width: 60px;
 
           }
+          :deep(.n-base-selection-label){
+            background: none;
+          }
         }
       }
 

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

@@ -144,7 +144,7 @@
                   <div>
                     <n-progress
                       type="circle"
-                      :percentage="item.num"
+                      :percentage="+item.num"
                       :offset-degree="180"
                       :color="item.color"
                       :indicator-text-color="item.color"
@@ -178,7 +178,7 @@
                     <n-progress
                       v-else
                       type="circle"
-                      :percentage="item.num"
+                      :percentage="+item.num"
                       :offset-degree="180"
                       :color="item.color"
                       :indicator-text-color="item.color"
@@ -209,8 +209,8 @@
                 </div>
                 <div class="scrollBox">
                   <Vue3Marquee
-                    pause-on-hover
                     vertical
+                    :duration="5"
                     clone
                     style="width: 100%;"
                   >
@@ -255,8 +255,8 @@
                 </div>
                 <div class="scrollBox">
                   <Vue3Marquee
-                    pause-on-hover
                     vertical
+                    :duration="5"
                     clone
                     style="width: 100%;"
                   >
@@ -311,7 +311,7 @@
                       <span>{{ it.direction===1?'上行':'下行' }}</span>
                       <span>{{ it.planTime }}</span>
                       <span>{{ it.realityTime }}</span>
-                      <span>{{ statusMap[it.status] }}</span>
+                      <span :class="'status'+it.status">{{ statusMap[it.status] }}</span>
                     </div>
                   </div>
                 </div>
@@ -326,7 +326,7 @@
 
 <script setup lang='ts'>
 import Layout from '@/components/layout.vue'
-import { onMounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import Box from '@/components/box.vue'
 import SelectDate from '@/components/selectDate.vue'
 
@@ -418,10 +418,13 @@ const leftContent:any = ref({
         grid: {
           containLabel: true,
           top: 100,
-          bottom: 50
+          bottom: 50,
+          left: '5%',
+          right: '5%'
         },
         tooltip: {
           trigger: 'axis',
+          formatter: '{b}<br /> {a0}：{c0}万 <br />{a1}：{c1}%',
           axisPointer: {
             type: 'shadow'
           }
@@ -453,6 +456,13 @@ const leftContent:any = ref({
         },
         yAxis: [
           {
+            name: '客运量/万',
+            nameLocation: 'center',
+            nameGap: 50,
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 18
+            },
             splitNumber: 2,
             axisLabel: {
               fontSize: 18,
@@ -466,6 +476,13 @@ const leftContent:any = ref({
             }
           },
           {
+            name: '增长率%',
+            nameLocation: 'center',
+            nameGap: 50,
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 18
+            },
             splitNumber: 2,
             position: 'right', // 放在右边
             axisLabel: {
@@ -541,7 +558,8 @@ const leftContent:any = ref({
       name: '消费占比',
       option: {
         title: {
-          text: '跳槽率19.5%', // 图标内容文本
+          text: '消费人次/万人', // 图标内容文本
+          subtext: '10',
           left: 'center', // 图标内容水平居中
           top: 'center', // 图标内容垂直居中
           // 文本样式
@@ -549,11 +567,21 @@ const leftContent:any = ref({
             color: '#fff', // 图标内容文字颜色
             fontSize: '18px', // 图标内容文字大小
             fontWeight: 'normal'
+          },
+          subtextStyle: {
+            color: '#fff', // 图标内容文字颜色
+            fontSize: '24px', // 图标内容文字大小
+            fontWeight: 'normal'
           }
         },
         grid: {
+          icon: '',
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c} ,占比: {d}%'
+        },
         // 图表图例
         legend: {
           type: 'scroll',
@@ -573,7 +601,7 @@ const leftContent:any = ref({
         series: [
           {
             type: 'pie', // 图表类型为饼图
-            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
@@ -581,17 +609,17 @@ const leftContent:any = ref({
               color: 'white'
             },
             data: [
-              { key: 2, name: '0次', value: 30619 },
-              { key: 2, name: '1次', value: 5921 },
-              { key: 2, name: '2次', value: 1153 },
-              { key: 2, name: '3次', value: 266 },
-              { key: 2, name: '大于3次', value: 87 },
-              { key: 2, name: '大于4次', value: 999 },
-              { key: 2, name: '12次', value: 5921 },
-              { key: 2, name: '22次', value: 1153 },
-              { key: 2, name: '32次', value: 266 },
-              { key: 2, name: '大于32次', value: 87 },
-              { key: 2, name: '大于42次', value: 999 }
+              { name: '0次', value: 30619 },
+              { name: '1次', value: 5921 },
+              { name: '2次', value: 1153 },
+              { name: '3次', value: 266 },
+              { name: '大于3次', value: 87 },
+              { name: '大于4次', value: 999 },
+              { name: '12次', value: 5921 },
+              { name: '22次', value: 1153 },
+              { name: '32次', value: 266 },
+              { name: '大于32次', value: 87 },
+              { name: '大于42次', value: 999 }
             ]
           }
         ]
@@ -610,7 +638,7 @@ const leftContent:any = ref({
           top: 20,
           left: 20,
           bottom: 20,
-          right: 20,
+          right: '10%',
           containLabel: true
         },
         xAxis: {
@@ -692,21 +720,25 @@ const leftContent:any = ref({
                 borderType: 'solid',
                 borderWidth: 1,
                 padding: [ 2, 0, 0, 0 ]
+              },
+              c: {
+                width: 100,
+                fontSize: 18
               }
             },
             formatter: (params: string, _id: number) => {
               const id = _id + 1
               if (_id < 3) {
-                return `{a${id}|${id}}  ${params}`
+                return `{a${id}|${id}}  {c|${params}}`
               }
-              return `{b|${id}}  ${params}`
+              return `{b|${id}}  {c|${params}}`
             }
           }
         } ],
         series: [
           {
             z: 2,
-            name: 'value',
+            name: '客流排名',
             type: 'bar',
             barWidth: 25,
             zlevel: 1,
@@ -748,7 +780,7 @@ const leftContent:any = ref({
           top: 20,
           left: 20,
           bottom: 20,
-          right: 20,
+          right: '10%',
           containLabel: true
         },
         xAxis: {
@@ -830,21 +862,25 @@ const leftContent:any = ref({
                 borderType: 'solid',
                 borderWidth: 1,
                 padding: [ 2, 0, 0, 0 ]
+              },
+              c: {
+                width: 35,
+                fontSize: 18
               }
             },
             formatter: (params: string, _id: number) => {
               const id = _id + 1
               if (_id < 3) {
-                return `{a${id}|${id}}  ${params}`
+                return `{a${id}|${id}}  {c|${params}}`
               }
-              return `{b|${id}}  ${params}`
+              return `{b|${id}}  {c|${params}}`
             }
           }
         } ],
         series: [
           {
             z: 2,
-            name: 'value',
+            name: '线路客流排名',
             type: 'bar',
             barWidth: 25,
             zlevel: 1,
@@ -1004,10 +1040,6 @@ const rightContent = ref([
   }
 ] as Any)
 
-function changeFn(id: number, item: any) {
-  item.checkId = id
-}
-
 async function getBusSummaryInfo() {
   const res = await homeService.getBusSummaryInfo()
   leftContent.value.topCount[0][0].num = res.swipeCount
@@ -1035,6 +1067,11 @@ async function getBusStatistics() {
 
   leftContent.value.charts[1].option.series[0].data = consumptionProportion
 
+  leftContent.value.charts[1].option.title.subtext = consumptionProportion.reduce((prev: any, item:any) => {
+    prev += +item.value
+    return prev
+  }, 0).toFixed(2)
+
   leftContent.value.charts[2].option.yAxis[0].data = flowRanking.map((item: any) => item.name)
   leftContent.value.charts[2].option.series[0].data = flowRanking
 
@@ -1104,14 +1141,26 @@ async function getClassesPunctualityRate() {
 }
 getClassesPunctualityRate()
 
+const curentType = ref(1)
 function selectDatechange(type: any) {
+  curentType.value = type
   getBusTrafficVolume(type)
 }
 
 onMounted(() => {
-  selectDatechange(1)
+  selectDatechange(curentType.value)
   getBusStatistics()
 })
+
+const timer = setInterval(() => {
+  selectDatechange(curentType.value)
+  getBusSummaryInfo()
+  getBusStatistics()
+}, 5 * 1000)
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -1321,7 +1370,7 @@ onMounted(() => {
 
             &>span {
               &:first-child {
-                width: 175px;
+                width: 185px;
                 height: 48px;
                 border-radius: 5px;
                 background: rgba(33, 133, 232, 0.298);
@@ -1397,12 +1446,18 @@ onMounted(() => {
       text-align: center;
       font-size: 20px;
       color: #FFFFFF;
-
-      &:nth-child(3)>div:nth-child(2)>div:last-child,
-      &:nth-child(2)>div:nth-child(2)>div:first-child {
+      .status1{
+        color: #FAAD0E;
+      }
+      .status2{
         color: #E73D41;
       }
 
+      // &:nth-child(3)>div:nth-child(2)>div:last-child,
+      // &:nth-child(2)>div:nth-child(2)>div:first-child {
+      //   color: #E73D41;
+      // }
+
       &:nth-child(3)>div:first-child>span:first-child {
         color: #FAAD0E;
       }

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

@@ -186,9 +186,9 @@ const leftContent:Ref<any> = ref({
               color: 'white'
             },
             data: [
-              { key: 2, name: '常规', value: 130 },
-              { key: 2, name: '快线', value: 50 },
-              { key: 2, name: '特色线路', value: 50 }
+              { name: '常规', value: 130 },
+              { name: '快线', value: 50 },
+              { name: '特色线路', value: 50 }
             ]
           }
         ]
@@ -387,11 +387,11 @@ const rightContent:Ref<any> = ref({
               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: '5km', value: 180 },
+              { name: '5-10km', value: 50 },
+              { name: '10-15km', value: 30 },
+              { name: '15-20km', value: 20 },
+              { name: '20km', value: 10 }
             ]
           }
         ]
@@ -450,10 +450,10 @@ const rightContent:Ref<any> = ref({
               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 }
+              { name: '<300m', value: 180 },
+              { name: '300-500m', value: 50 },
+              { name: '300-1000m', value: 30 },
+              { name: '>1000m', value: 20 }
             ]
           }
         ]

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

@@ -318,7 +318,7 @@ const leftContent:Ref<any> = ref({
         series: [
           {
             type: 'pie', // 图表类型为饼图
-            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
@@ -369,7 +369,7 @@ const leftContent:Ref<any> = ref({
         series: [
           {
             type: 'pie', // 图表类型为饼图
-            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {

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

@@ -128,6 +128,10 @@ const leftContent = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}万人 , 占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -141,7 +145,7 @@ const leftContent = ref({
           top: 'center', // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 16
           }
         },
 
@@ -149,7 +153,7 @@ const leftContent = ref({
         series: [
           {
             type: 'pie', // 图表类型为饼图
-            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的日候显示一个占位圆
             label: {
@@ -178,10 +182,12 @@ const leftContent = ref({
         },
         tooltip: {
           trigger: 'axis',
+          formatter: '{b}<br /> {a0}：{c0}万人',
           axisPointer: {
             type: 'shadow'
           }
         },
+
         legend: {
           top: 10,
           right: '40%',
@@ -225,6 +231,13 @@ const leftContent = ref({
         },
         yAxis: [
           {
+            name: '人数/万人',
+            nameLocation: 'center',
+            nameGap: 50,
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 18
+            },
             splitNumber: 2,
             axisLabel: {
               show: true,
@@ -273,7 +286,8 @@ const leftContent = ref({
             barWidth: 30,
             data: [ 200, 108, 200, 40, 210, 100 ]
           }
-        ]
+        ],
+        dataZoom: {}
       }
     }
   ],
@@ -284,6 +298,10 @@ const leftContent = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}条 , 占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -297,7 +315,7 @@ const leftContent = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 16
           }
         },
 
@@ -345,6 +363,10 @@ const leftContent = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}万人 , 占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -358,7 +380,7 @@ const leftContent = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 16
           }
         },
 
@@ -366,7 +388,7 @@ const leftContent = ref({
         series: [
           {
             type: 'pie', // 图表类型为饼图
-            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
@@ -391,6 +413,10 @@ const leftContent = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}万人次 , 占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -404,11 +430,10 @@ const leftContent = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 16
           }
         },
 
-        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
         series: [
           {
             type: 'pie', // 图表类型为饼图
@@ -436,6 +461,10 @@ const leftContent = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}万人次 , 占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -449,11 +478,9 @@ const leftContent = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 16
           }
         },
-
-        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
         series: [
           {
             type: 'pie', // 图表类型为饼图
@@ -481,6 +508,10 @@ const leftContent = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}万人次 , 占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -494,7 +525,7 @@ const leftContent = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 16
           }
         },
 
@@ -561,6 +592,7 @@ const rightContent = ref({
     },
     tooltip: {
       trigger: 'axis',
+      formatter: '{b}<br /> {a0}：{c0}辆',
       axisPointer: {
         type: 'shadow'
       }
@@ -666,6 +698,13 @@ const rightContent = ref({
       right: 30,
       left: 50
     },
+    tooltip: {
+      trigger: 'axis',
+      formatter: '今日{b}<br /> {a0}：{c0}人<br /> {a1}：{c1}人',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
     legend: {
       show: true,
       left: 'center',
@@ -806,6 +845,13 @@ const rightContent = ref({
       right: 30,
       left: 50
     },
+    tooltip: {
+      trigger: 'axis',
+      formatter: '今日{b}<br /> {a0}：{c0}人 <br /> {a1}：{c1}人  <br /> {a2}：{c2}人',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
     legend: {
       show: true,
       left: 'center',
@@ -980,6 +1026,13 @@ const rightContent = ref({
       right: 30,
       left: 50
     },
+    tooltip: {
+      trigger: 'axis',
+      formatter: '今日{b}<br /> {a0}：{c0}人<br /> {a1}：{c1}人',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
     legend: {
       show: true,
       left: 'center',
@@ -1245,7 +1298,7 @@ getTrafficFlowRank()
       flex-wrap: wrap;
       gap: 15px;
       height: 335px;
-      overflow: scroll;
+      overflow: hidden;
 
       .line {
         width: 100%;

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

@@ -250,7 +250,7 @@ const leftTitle: Ref<any[]> = ref([ {
     },
     series: {
       type: 'pie',
-      radius: [ '55%', '75%' ],
+      radius: [ '45%', '60%' ],
       label: {
         show: true,
         color: '#fff',
@@ -541,7 +541,7 @@ const airportChart = ref({
   },
   series: {
     type: 'pie',
-    radius: [ '55%', '75%' ],
+    radius: [ '45%', '60%' ],
     label: {
       show: true,
       color: '#fff',

src/pages/views/home/index.vue

@@ -479,7 +479,7 @@ getAnalysisLineStatistics()
       <div class="home-content-left" />
       <div class="home-content-right" />
       <div class="home-content-center">
-        <Map :Item="menus[active]" />
+        <Map :Item="(menus[active] as any)" />
       </div>
       <div class="home-content-left-img" />
       <div class="home-content-right-img" />

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

@@ -30,8 +30,8 @@ export default class HomeService extends Service {
     if (success) {
       return {
         consumptionProportion: JSON.parse(data.consumptionProportion),
-        flowRanking: JSON.parse(data.flowRanking),
-        lineFlowRanking: JSON.parse(data.lineFlowRanking)
+        flowRanking: JSON.parse(data.flowRanking).slice(0, 9),
+        lineFlowRanking: JSON.parse(data.lineFlowRanking).slice(0, 9)
       }
     }
     return {}

src/services/net.service.ts

@@ -95,7 +95,7 @@ export default class NetService extends Service {
    * @returns
    */
   private fetch(url: string, opt: RequestInit, timeout = 0): Promise<NetResult> {
-    const satoken = this._store.token
+    const satoken = this._store.token || `${sessionStorage.getItem('token')}`
     return new Promise((resolve) => {
       const controller = new AbortController()
       const { signal } = controller
@@ -113,7 +113,7 @@ export default class NetService extends Service {
         return res.json()
       }).then((res) => {
         const obj = { data: res.data, success: res.data instanceof Object }
-        if (!obj.success && obj.data?.includes('need authrize')) {
+        if (!obj.success && res.message?.includes('Token')) {
           throw 401
         }
         resolve(obj)