修复路由

徐旺旺

2020-12-29 5e8eb5e0ad0228973d9f8839b4d3a84ef245c0c9

修复路由

 src/router/routes.js

@@ -10,7 +10,7 @@
 */
// 默认跳转路由
import App from "../App";
import PipeLineIndex from "../views/baseInfoMgr/pipeline/Index";
import PipeLineIndex from "../views/baseInfoMgr/pipeline/PipeLineIndex";
import MapTemplate from "../views/MapTemplate";

// 应用业务相关路由，挂载menu上的page

 src/views/baseInfoMgr/pipeline/PipeLineIndex.vue

New file
@@ -0,0 +1,55 @@
<template>
    <div class="full-screen">
        <div id="map" ref="rootmap"></div>
        <pipe-line-list></pipe-line-list>
    </div>
</template>

<script>
    import 'leaflet/dist/leaflet.css'
    import Sgis from '@src/Sgis'
    import PipeLineList from "./PipeLineList";
    import {mapMutations} from 'vuex'

    export default {
        name: 'PipeLineIndex',
        components: {PipeLineList},
        mounted() {
            this.$nextTick(() => {
                this.init()
            })
        },
        methods: {
            ...mapMutations({
                setMapObj: 'setMapObj',
                setLayerHelper: 'setLayerHelper'
            }),
            init() {
                const mapcontainer = this.$refs.rootmap
                this.mapObj = Sgis.initMap(mapcontainer)
                this.basemapHelper = Sgis.initBasemaps(this.mapObj.map, this.mapObj.L) // 初始化底图
                this.vectorLayerHelper = Sgis.initLayers(this.mapObj.map, this.mapObj.L, {}, this.$nodeEnv) // 初始化业务图层
                this.setLayerHelper(this.vectorLayerHelper)
                return this.map
            },
            setLayerHelper() {

            }
        }
    }
</script>

<style lang="less">
    .full-screen {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;

        #map {
            height: 100%;
            width: 100%;
        }
    }
</style>>

 src/views/baseInfoMgr/pipeline/PipeLineList.vue

New file
@@ -0,0 +1,136 @@
<template>
    <div class="pipe-line-table">
        <div class="table-header">
            <div class="title">管段列表信息</div>
            <div class="form">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="管线点查询:">
                        <el-input placeholder="审批人" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="运行状态:">
                        <el-select size="mini">
                            <el-option label="编辑" value="shanghai"></el-option>
                            <el-option label="提交" value="beijing"></el-option>
                            <el-option label="保存" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini">查询</el-button>
                        <el-button type="primary" size="mini">导入管段属性表</el-button>
                        <el-button type="primary" size="mini">图形显示</el-button>
                        <el-button type="primary" size="mini">导出信息</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="table-list">
            <el-table
                    :data="tableData"
                    style="width: 100%;height: 300px"
                    :default-sort="{prop: 'date', order: 'descending'}"
            >
                <el-table-column
                        prop="date"
                        label="序号"
                        sortable
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="维护与操作"
                        sortable
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="管段编码">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="所属管线名称">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="管径(mm)">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="材质">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="管道压力(Mpa)">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="流向">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="管沟类型">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="埋没方式">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="埋没时间">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="探测时间">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import 'leaflet/dist/leaflet.css'

    export default {
        name: 'PipeLineList',
        datas: {},
        mounted() {
            this.$nextTick(() => {
                this.init()
            })
        },
        methods: {}
    }
</script>

<style lang="less">
    .pipe-line-table {
        z-index: 999;
        position: absolute;
        bottom: 0;
        width: 100%;

        .el-form--inline .el-form-item__content {
            vertical-align: middle;
        }

        .table-header {
            background-color: #D7D7D7;
            width: 100%;
            height: 40px;
            line-height: 40px;

            .title {
                float: left;
                width: 200px;
            }

            .form {
                margin-left: 200px;
                min-height: 330px;
            }
        }

        .table-list {
            height: 300px;
        }
    }
</style>>