派生自 wuyushui/SewerAndRainNetwork

YANGDL
2021-02-08 b27e031827eae0f535d17bb20ff4809699151a17
src/views/baseInfoMgr/pipeline/PipeLineList.vue
@@ -1,86 +1,136 @@
<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>
<script>
    import 'leaflet/dist/leaflet.css'
import 'leaflet/dist/leaflet.css'
    export default {
        name: 'PipeLineList',
        datas: {},
        mounted() {
            this.$nextTick(() => {
                this.init()
            })
        },
        methods: {}
    }
export default {
  name: 'PipeLineList',
  datas: {},
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {}
}
</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>>