2023.3.15 - 嘎嘎鸭1

公告

随笔分类

随笔档案

阅读排行榜

2023.3.15
<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>品牌</title>

</head>
<body>

<div id="subway">

    <template>

        <el-tabs :tab-position="tabPosition" style="height: 200px;">
            <el-tab-pane label="换乘查询">

                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="起始站点">
                        <el-input v-model="startName" placeholder="请输入起始站点"></el-input>
                    </el-form-item>
                    <el-form-item label="终点站点">
                        <el-input v-model="endName" placeholder="请输入终点站点"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" @click="selectShortestPath">查询</el-button>
                    </el-form-item>
                </el-form>

            </el-tab-pane>

            <el-tab-pane label="线路查询">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="线路名称">
                        <el-input v-model="routeName" placeholder="请输入线路名称"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" @click="check_route">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="站点查询">

                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="站点名称">
                        <el-input v-model="input" placeholder="请输入站点"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" @click="check_point">查询</el-button>
                    </el-form-item>
                </el-form>



            </el-tab-pane>
        </el-tabs>
    </template>




<!--    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>-->

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="70%"
            :before-close="handleClose">
        <span slot="footer" class="dialog-footer">
                <template>
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                        <el-table-column
                                align="center"
                                type="index"
                                width="30">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="subwayName"
                                label="地铁站点名称"
                                width="320">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="routeName"
                                label="所属线路"
                                width="320">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="subwaySerial"
                                label="邻接站点"
                                width="320">
                        </el-table-column>
                    </el-table>
                </template>

    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible2"
            width="80%"
            :before-close="handleClose">
        <span slot="footer" class="dialog-footer">
             <template>
                <el-table
                        :data="tableData2"
                        border
                        style="width: 100%">
                <el-table-column
                        align="center"
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="route"
                        label="地铁站点名称"
                        width="1100">
                </el-table-column>
                </el-table>
            </template>

    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible3"
            width="80%"
            :before-close="handleClose">
        <span slot="footer" class="dialog-footer">
             <template>
                <el-table
                        :data="tableData3"
                        border
                        style="width: 100%">
                <el-table-column
                        align="center"
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="findpath"
                        label="路线"
                        width="1100">
                </el-table-column>
                </el-table>
            </template>

    <el-button @click="dialogVisible3 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible3 = false">确 定</el-button>
  </span>
    </el-dialog>

</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#subway",
        data(){

            return {
                dialogVisible: false,
                dialogVisible2:false,
                dialogVisible3:false,
                activeName: 'second',
                input: "",
                tabPosition: 'left',
                tableData:[],
                tableData2:[],
                tableData3:[],
                routeName:"",
                startName:"",
                endName:""

            }
        },

        mounted(){
            // 页面加载完成后，发送异步请求，查询数据
            // var _this = this;
            // axios({
            //     method:"get",
            //     url:"http://localhost:8080/Login/selectAllServlet"
            // }).then(function (resp) {
            //     _this.brands = resp.data;
            // })
        },

        methods:{

            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },

            handleClick(tab, event) {
                console.log(tab, event);
            },
            check_point()
            {
               // var _this=this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/subway/sub/check_point",
                    data:this.input
                }).then(resp=> {
                    this.tableData=resp.data;
                    console.log("+++"+resp.data);
                })
                this.dialogVisible = true;
            },
            check_route()
            {
                axios({
                    method:"post",
                    url:"http://localhost:8080/subway/sub/check_route",
                    data:this.routeName
                }).then(resp=> {
                    this.tableData2=resp.data;
                })
                this.dialogVisible2 = true;
            },
            selectShortestPath()
            {
                axios({
                    method:"post",
                    url:"http://localhost:8080/subway/sub/selectShortestPath?startName="+this.startName+"&endName="+this.endName,
                    // data:this.routeName
                }).then(resp=> {
                    this.tableData3=resp.data;
                })
                this.dialogVisible3 = true;
            }
        }


    })
</script>
</body>
</html>