重构地图加载的逻辑

wangrui

2020-12-19 02d584c8d0f31b56f24e367681aa034cd2acf0e9

 src/views/baseInfoMgr/pipeline/PipeLineList.vue

@@ -1,63 +1,88 @@
<template>
    <div class="listTable">
        <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 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>

@@ -77,10 +102,35 @@
</script>

<style lang="less">
    .listTable {
    .pipe-line-table {
        z-index: 999;
        min-height: 300px;
        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>>