| | |
| | | </div> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="管段定位" name="second"> |
| | | <div class="line-pos"> |
| | | <div class="line-pos-form"> |
| | | <div class="place"> |
| | | <div class="place-top"> |
| | | <div class="place-left"> |
| | | <el-form :model="linePos" label-width="90px"> |
| | | <el-form-item label="管线名称:"> |
| | | <el-input v-model="linePos.lineName"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="附属设施:"> |
| | | <el-select v-model="linePos.affFac" placeholder="请选择活动区域"> |
| | | <el-option label="区域一" value="shanghai"></el-option> |
| | | <el-option label="区域二" value="beijing"></el-option> |
| | | <el-select v-model="linePos.affFac"> |
| | | <el-option |
| | | v-for="item in linePos.affFacList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-form> |
| | | <el-button type="primary" size="mini">搜索</el-button> |
| | | </div> |
| | | <el-button type="primary" @click="confirm">确认</el-button> |
| | | <div class="place-right"> |
| | | <el-button type="primary" size="small" @click="fileChoose">搜索</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="place-bottom"> |
| | | <el-button type="primary" @click="confirm">确认</el-button> |
| | | </div> |
| | | </div> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="经纬度定位" name="third"> |
| | | <div class="latlng-location"> |
| | | <div class="latlng-location-chose"> |
| | | <el-form :model="LongLatPos" label-width="90px"> |
| | | <el-form-item label="经度:"> |
| | | <el-input v-model="LongLatPos.longPos"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="纬度:"> |
| | | <el-input v-model="LongLatPos.latPos"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <el-button type="primary" size="mini">定位</el-button> |
| | | <div class="place"> |
| | | <div class="place-top"> |
| | | <div class="place-left"> |
| | | <el-form :model="LongLatPos" label-width="90px"> |
| | | <el-form-item label="经度:"> |
| | | <el-input v-model="LongLatPos.longPos"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="纬度:"> |
| | | <el-input v-model="LongLatPos.latPos"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div class="place-right"> |
| | | <el-button type="primary" size="small">搜索</el-button> |
| | | </div> |
| | | </div> |
| | | <el-button type="primary" @click="confirm">确认</el-button> |
| | | <div class="place-bottom"> |
| | | <el-button type="primary" @click="confirm">确认</el-button> |
| | | </div> |
| | | </div> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | |
| | | // 管段定位 |
| | | linePos: { |
| | | lineName: '', |
| | | affFac: '' |
| | | affFac: '', |
| | | affFacList: [ |
| | | { |
| | | label: '阀门A', |
| | | value: '1' |
| | | }, |
| | | { |
| | | label: '阀门B', |
| | | value: '2' |
| | | } |
| | | ] |
| | | }, |
| | | tabLabel: '' |
| | | fileChoChange: false |
| | | } |
| | | }, |
| | | mounted () { |
| | |
| | | }, |
| | | methods: { |
| | | // tab 切换用于判断 |
| | | handleClick (tab) { |
| | | // 控制第三层页面 管线名称/管段代码选择页面 |
| | | if (tab.label === '管线定位') { |
| | | // 如果 是管线定位 显示三级附属框 进行选择文件操作 |
| | | eventBus.$emit('pipelineFile-choose', true) |
| | | } else { |
| | | // eles 不进行显示 |
| | | eventBus.$emit('pipelineFile-choose', false) |
| | | } |
| | | handleClick (tab) {}, |
| | | // 点击文件选择 显示第三级页面 进行管线/段选择 |
| | | fileChoose () { |
| | | this.fileChoChange = !this.fileChoChange |
| | | eventBus.$emit('pipelineFile-choose', this.fileChoChange) |
| | | }, |
| | | // 点击确认按钮事件 |
| | | confirm () { |
| | |
| | | |
| | | .side-box { |
| | | min-width: 1.94532rem; |
| | | max-height: 1.343213rem; |
| | | max-width: 1.94532rem; |
| | | } |
| | | |
| | | .click-location { |
| | | margin: 0 auto; |
| | | text-align: center; |
| | |
| | | } |
| | | } |
| | | |
| | | .line-pos { |
| | | text-align: center; |
| | | .el-input { |
| | | width: 85%; |
| | | } |
| | | .line-pos-form { |
| | | display: flex; |
| | | } |
| | | } |
| | | |
| | | .latlng-location { |
| | | .place { |
| | | text-align: center; |
| | | |
| | | .latlng-location-chose { |
| | | .place-top { |
| | | display: flex; |
| | | align-content: center; |
| | | align-items: center; |
| | | justify-content: space-around; |
| | | |
| | | .place-right { |
| | | .el-button { |
| | | margin: 15px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-input { |
| | | width: 85%; |
| | | .place-bottom { |
| | | .el-button { |
| | | margin: 15px; |
| | | } |
| | | } |
| | | } |
| | | </style> |