切换线路

src/assets/native-plugin.ts

@@ -7,6 +7,7 @@ import {
   NDataTable,
   NPagination,
   NButton,
+  NInput,
   NSelect,
   NCheckboxGroup,
   NCheckbox,
@@ -22,6 +23,7 @@ const naive = create({
     NDataTable,
     NPagination,
     NButton,
+    NInput,
     NSelect,
     NCheckboxGroup,
     NCheckbox,

src/components/Drag.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="drag-container "
+    :class="className"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  nextTick,
+  ref
+} from 'vue'
+
+const props = withDefaults(defineProps<{
+    domClassName: string,
+}>(), {
+  domClassName: ''
+})
+const className = ref(`drag-${Math.random() * 10000}`)
+nextTick(() => {
+  const dragDom = document.getElementsByClassName(className.value)[0] as HTMLElement
+  if (!dragDom) return
+  const targetDom = dragDom.getElementsByClassName(props.domClassName)[0] as HTMLElement
+  let isDrag = false
+  const mouseDown = (e: any) => {
+    if (!targetDom.contains(e.target)) return
+
+    isDrag = true
+    const X = e.clientX - dragDom.offsetLeft
+    const Y = e.clientY - dragDom.offsetTop
+    const move = (event: MouseEvent) => {
+      event.preventDefault()
+      if (isDrag) {
+        dragDom.style.left = `${event.clientX - X}px`
+        dragDom.style.top = `${event.clientY - Y}px`
+        dragDom.style.right = 'auto'
+      }
+    }
+    document.addEventListener('mousemove', move, false)
+    document.addEventListener('mouseup', () => {
+      isDrag = false
+      document.removeEventListener('mousemove', move)
+    })
+  }
+  dragDom.addEventListener('mousedown', mouseDown)
+})
+</script>
+<style scoped>
+.drag-container {
+  position: fixed !important;
+  z-index: 100;
+}
+</style>

src/components/changeLine.vue

@@ -0,0 +1,162 @@
+<template>
+  <Drag :dom-class-name="'changeLine'">
+    <div class="changeLine">
+      <div class="title">
+        切换线路
+      </div>
+      <div
+        v-show="show"
+        class="content"
+      >
+        <n-input
+          v-model:value="seastr"
+          :bordered="false"
+          round
+          type="text"
+          placeholder="搜索"
+        />
+
+        <div class="list">
+          <div
+            v-for="item in lineList"
+            :key="item.lineId"
+            class="item"
+            :class="{'active': curLine.lineId === item.lineId}"
+            @click="changeLine(item)"
+          >
+            {{ item.lineName }}
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="cur">
+          当前:
+        </div>
+        <div> {{ curLine.lineName }}</div>
+      </div>
+      <div
+        class="check"
+        @click="show = !show"
+      >
+        {{ show ? '收起': '展开' }}
+      </div>
+    </div>
+  </Drag>
+</template>
+
+<script lang="ts" setup>
+import NetService from '@/services/net.service'
+import Drag from './Drag.vue'
+import { computed, ref } from 'vue'
+import useStore from '@/pages/store'
+const store = useStore()
+
+const show = ref(false)
+const seastr = ref('')
+const netService = new NetService()
+const originLineList = ref([] as any[])
+
+const lineList = computed(() => originLineList.value.filter((item: any) => item.lineName.includes(seastr.value)))
+
+const curLine = ref({} as any)
+
+function changeLine(item: any) {
+  curLine.value = item
+  store.setCurrentLineId(item.lineId)
+  store.setCurrentLinecode(item.lineCode)
+}
+async function getLine() {
+  const res = await netService.get('/busLine/getList?hasModel=0')
+  if (res.success) {
+    originLineList.value = res.data
+    // eslint-disable-next-line prefer-destructuring
+    curLine.value = res.data[0]
+    store.setCurrentLineId(res.data[0].lineId)
+    store.setCurrentLinecode(res.data[0].lineCode)
+  }
+}
+getLine()
+</script>
+
+<style lang="scss" scoped>
+.changeLine {
+  position: fixed;
+  color: #fff;
+  width: 400px;
+
+  border-radius: 5px;
+  border: 1px solid #1891FF;
+  background: #0F1A31;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3137), inset 0px 1px 22px 0px #00BEFF;
+
+  .title {
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    background: rgba(33, 133, 232, 0.298);
+  }
+
+  .content {
+    height: 260px;
+
+    .n-input {
+      margin: 10px 15px;
+      width: 370px;
+      background: none !important;
+      border: solid 1.5px #2185E8;
+
+      .n-input__input-el {
+        color: #fff;
+      }
+    }
+
+    .list {
+      height: 200px;
+      overflow-y: scroll;
+    }
+
+    .item {
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      border-radius: 4px;
+      box-sizing: border-box;
+
+      &:hover {
+        box-shadow: inset 0px 1px 12px 0px #80FFFF, inset 0px 1px 12px 0px #80FFFF;
+      }
+      &.active {
+        background-color: #346274;
+        border: 1px solid #80FFFF;
+      }
+    }
+  }
+
+  .footer {
+    height: 55px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+
+    .cur {
+      color: #80FFFF;
+    }
+  }
+
+  .check {
+    position: absolute;
+    top: 0;
+    right: -54px;
+    width: 54px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    border-radius: 3px;
+    border: 1px solid #1891FF;
+    background: rgba(33, 133, 232, 0.298);
+    cursor: pointer;
+
+  }
+}
+</style>

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

@@ -17,7 +17,7 @@
                   style="margin-right: 20px;"
                 />
                 <div class="name bold">
-                  1
+                  {{ store.currentLineCode }}
                 </div>
                 <div class="road">
                   路
@@ -499,10 +499,13 @@
 import Layout from '@/components/layout.vue'
 import Box from '@/components/box.vue'
 import Echart from '@/components/chart.vue'
-import { computed, ref } from 'vue'
+
+import { computed, ref, watch } from 'vue'
 import { graphic } from 'echarts'
 import CehicleOperationService from '../services/cehicleOperation.service'
+import useStore from '@/pages/store'
 
+const store = useStore()
 const cehicleOperationService = new CehicleOperationService()
 const typeMap :any = {
   0: '干线公交',
@@ -922,7 +925,7 @@ const rightContent = ref({
 
   }
 })
-const lineID = '2168405945795840107'
+const currentLineId = computed(() => store.currentLineId)
 
 const busLineData = ref({
   type: '0', // 线路类型
@@ -944,11 +947,11 @@ const busLineData = ref({
 const driverTotal = ref(0)
 const carTotal = ref(0)
 async function getBusLineDetail() {
-  busLineData.value = await cehicleOperationService.getBusLineDetail(lineID)
+  busLineData.value = await cehicleOperationService.getBusLineDetail(currentLineId.value)
 }
 getBusLineDetail()
 async function getBusLineDriver() {
-  const driverArr = await cehicleOperationService.getBusLineDriver(lineID)
+  const driverArr = await cehicleOperationService.getBusLineDriver(currentLineId.value)
   let total = 0
   driverArr.forEach((item: { total: string | number; starType: number }) => {
     total += +item.total
@@ -958,7 +961,7 @@ async function getBusLineDriver() {
 }
 getBusLineDriver()
 async function getBusLineCar() {
-  const carArr = await cehicleOperationService.getBusLineCar(lineID)
+  const carArr = await cehicleOperationService.getBusLineCar(currentLineId.value)
   let total = 0
   carArr.forEach((item: { total: string | number; starType: number }) => {
     total += +item.total
@@ -971,13 +974,20 @@ async function getBusLineCar() {
 getBusLineCar()
 
 async function getBusLineOperate() {
-  const carArr = await cehicleOperationService.getBusLineOperate(lineID)
+  const carArr = await cehicleOperationService.getBusLineOperate(currentLineId.value)
   upBusLineOperate.value = carArr.filter((item: { direction: number }) => item.direction === 1)
   downBusLineOperate.value = carArr.filter((item: { direction: number }) => item.direction === 2)
   console.log(carArr, 'carArr')
 }
 getBusLineOperate()
 
+watch(() => store.currentLineId, () => {
+  getBusLineOperate()
+  getBusLineCar()
+  getBusLineDriver()
+  getBusLineDetail()
+})
+
 const nameMap:any = {
   1: '老年卡',
   2: '学生卡',
@@ -1062,7 +1072,7 @@ getVehicleStatusService()
           font-size: 18px;
 
           .name {
-            width: 63px;
+            width: 78px;
             height: 74px;
             line-height: 74px;
             text-align: center;
@@ -1502,4 +1512,9 @@ getVehicleStatusService()
   }
 
 }
+.changeLine{
+  position: absolute;
+  top: -100px;
+  z-index: 9999;
+}
 </style>

src/pages/views/home/index.vue

@@ -7,6 +7,8 @@ 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'
@@ -522,6 +524,7 @@ getAnalysisLineStatistics()
         </template>
       </div>
       <component :is="currentComponent" />
+      <ChangeLine v-show="active===1" />
     </div>
     <div class="home-bottom">
       雅安市公共交通集团有限公司
@@ -784,6 +787,10 @@ getAnalysisLineStatistics()
         }
       }
     }
+    .drag-container{
+      left: 1581px;
+      top: 318px;
+    }
   }
 
   &-bottom {