feat(设备拓扑图): 添加主线路图选择功能并更新课程相关数据

- 在设备拓扑图页面添加主线路图下拉选择功能
- 实现根据课程运行状态自动切换线路图或手动选择
- 更新课程线路和运行图字典数据为实际项目数据
- 新增课程运行状态管理工具函数

develop/course/json/dict.json

@@ -26,21 +26,9 @@
     "remark": "字典课程线路",
     "sort": 1,
     "items": [
-      { "value": "1001", "label": "成渝高铁", "remark": "", "sort": 1 },
-      { "value": "1002", "label": "京沪高铁", "remark": "", "sort": 2 },
-      { "value": "1003", "label": "京广高铁", "remark": "", "sort": 3 },
-      { "value": "1004", "label": "京哈高铁", "remark": "", "sort": 4 },
-      { "value": "1005", "label": "沪昆高铁", "remark": "", "sort": 5 },
-      { "value": "1006", "label": "京港高铁", "remark": "", "sort": 6 },
-      { "value": "1007", "label": "呼南高铁", "remark": "", "sort": 7 },
-      { "value": "1008", "label": "京昆高铁", "remark": "", "sort": 8 },
-      { "value": "1009", "label": "包海高铁", "remark": "", "sort": 9 },
-      { "value": "1010", "label": "兰西广高铁", "remark": "", "sort": 10 },
-      { "value": "1011", "label": "广深港高铁", "remark": "", "sort": 11 },
-      { "value": "1012", "label": "贵广高铁", "remark": "", "sort": 12 },
-      { "value": "1013", "label": "南广高铁", "remark": "", "sort": 13 },
-      { "value": "1014", "label": "渝厦高铁", "remark": "", "sort": 14 },  
-      { "value": "1015", "label": "集大原高铁", "remark": "", "sort": 15 }
+      { "value": "555", "label": "京哈普速", "remark": "", "sort": 1 },
+      { "value": "556", "label": "长白线", "remark": "", "sort": 2 },
+      { "value": "557", "label": "京哈高速", "remark": "", "sort": 3 }
     ]
   },
   {
@@ -49,12 +37,43 @@
       "remark": "字典课程运行图",
       "sort": 1,
       "items": [
-        { "value": "1001", "label": "一号线运行图", "remark": "", "sort": 1 },
-        { "value": "1002", "label": "二号线运行图", "remark": "", "sort": 2 },
-        { "value": "1003", "label": "三号线运行图", "remark": "", "sort": 3 },
-        { "value": "1004", "label": "四号线运行图", "remark": "", "sort": 4 },
-        { "value": "1005", "label": "五号线运行图", "remark": "", "sort": 5 },
-        { "value": "1006", "label": "六号线运行图", "remark": "", "sort": 6 }
+        { "value": "0", "label": "小城子", "remark": "", "sort": 0 },
+        { "value": "1", "label":	"小合隆", "remark": "", "sort": 1 },
+        { "value": "2", "label":	"开安", "remark": "", "sort": 2 },
+        { "value": "3", "label":	"农安", "remark": "", "sort": 3 },
+        { "value": "4", "label":	"石家屯", "remark": "", "sort": 4 },
+        { "value": "5", "label":	"王府", "remark": "", "sort": 5 },
+        { "value": "6", "label":	"七家子", "remark": "", "sort": 6 },
+        { "value": "7", "label":	"松西", "remark": "", "sort": 7 },
+        { "value": "8", "label":	"长山屯1", "remark": "", "sort": 8 },
+        { "value": "9", "label":	"长山屯2", "remark": "", "sort": 9 },
+        { "value": "10", "label":	"大安", "remark": "", "sort": 10 },
+        { "value": "11", "label":	"同庆", "remark": "", "sort": 11 },
+        { "value": "12", "label":	"舍力", "remark": "", "sort": 12 },
+        { "value": "13", "label":	"到保", "remark": "", "sort": 13 },
+        { "value": "14", "label":	"白城", "remark": "", "sort": 14 },
+        { "value": "15", "label":	"平台", "remark": "", "sort": 15 },
+        { "value": "16", "label":	"镇西", "remark": "", "sort": 16 },
+        { "value": "17", "label":	"卫东", "remark": "", "sort": 17 },
+        { "value": "18", "label":	"乌兰浩特", "remark": "", "sort": 18 },
+        { "value": "19", "label":	"金州", "remark": "", "sort": 19 },
+        { "value": "20", "label":	"瓦房店", "remark": "", "sort": 20 },
+        { "value": "21", "label":	"熊岳城", "remark": "", "sort": 21 },
+        { "value": "22", "label":	"大石桥", "remark": "", "sort": 22 },
+        { "value": "23", "label":	"立山", "remark": "", "sort": 23 },
+        { "value": "24", "label":	"苏家屯", "remark": "", "sort": 24 },
+        { "value": "25", "label":	"裕国", "remark": "", "sort": 25 },
+        { "value": "26", "label":	"虎石台", "remark": "", "sort": 26 },
+        { "value": "27", "label":	"铁岭", "remark": "", "sort": 27 },
+        { "value": "28", "label":	"昌图", "remark": "", "sort": 28 },
+        { "value": "29", "label":	"四平", "remark": "", "sort": 29 },
+        { "value": "30", "label":	"公主岭", "remark": "", "sort": 30 },
+        { "value": "31", "label":	"长春北", "remark": "", "sort": 31 },
+        { "value": "32", "label":	"德惠", "remark": "", "sort": 32 },
+        { "value": "33", "label":	"扶余", "remark": "", "sort": 33 },
+        { "value": "34", "label":	"四平东", "remark": "", "sort": 34 },
+        { "value": "35", "label":	"长春西", "remark": "", "sort": 35 },
+        { "value": "36", "label":	"实训基地", "remark": "", "sort": 36 }
       ]
   },
   {

src/views/train/course/course.helper.ts

@@ -1,4 +1,4 @@
-import { Course } from '@/api/course.api'
+import { Course, CourseRunServer, CourseServer } from '@/api/course.api'
 import { useDictStore } from '@/store/modules/dict'
 import cover1 from '@imgs/cover/1001.png'
 import cover2 from '@imgs/cover/1002.png'
@@ -21,3 +21,54 @@ export const getCourseType = (item?: Course) => {
   const dictItem = dictItems.find((i) => i.value == item.typeID)
   return dictItem?.label || '未知课程类型'
 }
+/**
+ * 课程运行状态
+ */
+export const useCourseRun = () => {
+  const runingCourseId = ref<number>(0)
+  const isRunning = computed<boolean>(() => runingCourseId.value != null && runingCourseId.value > 0)
+
+  const getRunStatusData = async () => {
+    const { data } = await CourseRunServer.status()
+    if (!data || !data.runCourseID) {
+      runingCourseId.value = 0
+      return
+    }
+    if (data.runCourseID != runingCourseId.value) {
+      runingCourseId.value = data.runCourseID
+    }
+  }
+
+  /** 正在开课的课程详情数据 */
+  const runCourseDetail = ref<Course>()
+  const getCourseDetail = async () => {
+    if (!isRunning.value) return
+    const { data } = await CourseServer.detail(String(runingCourseId.value))
+    if (data) runCourseDetail.value = data
+  }
+  watch(runingCourseId, getCourseDetail)
+
+  /** 定时获取正在开课的课程数据 */
+  let timer: ReturnType<typeof setInterval> | null = null
+  onMounted(() => {
+    getRunStatusData()
+    timer = setInterval(() => getRunStatusData(), 5000)
+    getCourseDetail()
+  })
+  onUnmounted(() => {
+    if (timer) {
+      clearInterval(timer)
+      timer = null
+    }
+  })
+
+  return {
+    isRunning,
+    runingCourseId,
+    runCourseDetail,
+    // 运行路线
+    runConrseLine: computed<string>(() => runCourseDetail.value?.lineNo ?? ''),
+    // 运行车站
+    runConrseStation: computed<string>(() => runCourseDetail.value?.runningMap ?? '')
+  }
+}

src/views/train/fault/index.vue

@@ -2,7 +2,8 @@
   <div class="page-content flex flex-col gap-4">
     <div class="flex h-[32px] w-full items-center justify-between">
       <h2 class="text-lg font-bold">设备拓扑图</h2>
-      <div class="flex items-center">
+      <div class="flex items-center gap-4">
+        <el-select-v2 v-model="deviceActive" :options="deviceOptions" placeholder="请选择主线路图" clearable style="width: 160px; vertical-align: middle" />
         <el-button type="primary" @click="() => faultListRef?.show()">故障设备列表</el-button>
       </div>
     </div>
@@ -14,16 +15,49 @@
 </template>
 
 <script lang="ts" setup>
-  import Meta2dView from '@/components/business/meta2d/Meta2dView.vue'
   defineOptions({ name: 'Device' })
+  import Meta2dView from '@/components/business/meta2d/Meta2dView.vue'
+  import { useCourseRun } from '@/views/train/course/course.helper'
   // import dataJson from './device.json'
   import FaultList from './fault-list.vue'
+  const { runConrseLine, runConrseStation } = useCourseRun()
 
-  const faultListRef = ref()
+  watch(runConrseLine, loadJson)
+  watch(runConrseStation, loadJson)
+
+  // ---------- 下拉选择主线路图
+  const isManual = ref<boolean>(false)
+  const deviceActive = ref<string>('0')
+  const deviceOptions = [
+    { value: '0', label: '小合隆' },
+    { value: '1', label: '长春西' },
+    { value: '2', label: '实训基地' }
+  ]
+  watch(deviceActive, () => {
+    isManual.value = true
+    loadJson()
+  })
 
+  // -------- 主线路图的数据配置
+  const deviceList = [
+    { index: '0', value: 'device.json', line: '555', station: '1' },
+    { index: '1', value: 'device.001.json', line: '556', station: '35' },
+    { index: '2', value: 'device.002.json', line: '557', station: '36' }
+  ]
+  const getCurrentDevice = () => {
+    if (isManual.value) {
+      return deviceList.find((item) => item.index == deviceActive.value) || deviceList[0]
+    }
+    const device = deviceList.find((item) => item.station == runConrseStation.value && item.line == runConrseLine.value) || deviceList[0]
+    deviceActive.value = device.index
+    return device
+  }
+
+  const faultListRef = ref()
   const dataJson = ref<any>(null)
   async function loadJson() {
-    const url = `${import.meta.env.BASE_URL}device.json`
+    const device = getCurrentDevice()
+    const url = `${import.meta.env.BASE_URL}${device.value}`
     const res = await fetch(url)
     dataJson.value = await res.json()
   }