2024/5/12

<template>
  <div>
    <div class="card" style="margin-bottom: 10px">
        <el-select-v2
            v-model="data.line"
            filterable
            :options="options"
            placeholder="请选择线路"
            style="width: 240px"
        />
      <el-button type="primary" style="margin-left: 10px" @click="search">查询</el-button>
    </div>

    <div class="card" style="margin-bottom: 10px">
      <div v-for="(row, index) in groupedStations" :key="index">
        <el-steps :space="200" :active="5" simple>
          <el-step v-for="station in row" :key="station.id" :title="station.name" :icon="station.trans ? 'LocationFilled' : 'Location'" />
        </el-steps>
      </div>
    </div>

    <div class="card" style="margin-bottom: 10px">
      <el-image :src="beijingImage" fit="contain"></el-image>
    </div>

  </div>
</template>

<script setup>
import axios from 'axios';
import {reactive} from "vue";
import {Search} from '@element-plus/icons-vue'
import request from "../../utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
import beijingImage from '@/assets/imgs/beijing.png'; // 导入图片
import { Location,LocationFilled, UploadFilled } from '@element-plus/icons-vue'
import { ref, computed } from "vue";
import router from "../../router";

const data = reactive({
  line:'',
  form:'',

  id:'',
  name:'',

  linelist:[],
  beijingImage
})

const options = [
  {
    value: '1号线',
    label: '1号线',
  },
  {
    value: '2号线',
    label: '2号线',
  },
  {
    value: '4号线',
    label: '4号线',
  },
  {
    value: '5号线',
    label: '5号线',
  },
  {
    value: '6号线',
    label: '7号线',
  },
  {
    value: '8号线',
    label: '8号线',
  },
  {
    value: '9号线',
    label: '9号线',
  },
  {
    value: '10号线',
    label: '10号线',
  },
  {
    value: '11号线',
    label: '11号线',
  },
  {
    value: '13号线',
    label: '13号线',
  },
  {
    value: '14号线',
    label: '14号线',
  },
  {
    value: '15号线',
    label: '15号线',
  },
  {
    value: '16号线',
    label: '16号线',
  },
  {
    value: '17号线',
    label: '17号线',
  },
  {
    value: '19号线',
    label: '19号线',
  },
  {
    value: '房山线',
    label: '房山线',
  },
  {
    value: '燕房线',
    label: '燕房线',
  },
  {
    value: '大兴线',
    label: '大兴线',
  },
  {
    value: '亦庄线',
    label: '亦庄线',
  },
  {
    value: '昌平线',
    label: '昌平线',
  },
  {
    value: '西郊线',
    label: '西郊线',
  },
  {
    value: '首都机场线',
    label: '首都机场线',
  },
  {
    value: 'S1线',
    label: 'S1线',
  },
  {
    value: '亦庄有轨电车T1线',
    label: '亦庄有轨电车T1线',
  }
]



const stations = reactive([
  { id: 1, name: '福泽',trans: true },
]);


const groupedStations = computed(() => {
  const rows = [];
  const chunkSize = 5;
  for (let i = 0; i < stations.length; i += chunkSize) {
    rows.push(stations.slice(i, i + chunkSize));
  }
  return rows;
});

const search = () =>{
  stations.splice(0, stations.length);
  request.post('http://localhost:9090/station/getline',data.line).then(res =>{
    console.log(res.data)
    data.linelist = res.data
    console.log(data.linelist)
    data.linelist.forEach((item, index) => {
      stations.push({
        id: item.stationID,
        name: item.stationName,
        trans: item.isExchange == 0 ? true : false,
      });
    });
  });
}


search()
</script>
posted @ 2024-05-12 19:10  Hbro  阅读(31)  评论(0)    收藏  举报