| | |
| | | title="根据起始、结束管段进行连通性分析">清除 |
| | | </el-button> |
| | | <el-scrollbar style="height:450px"> |
| | | <el-card shadow="hover"> <!-- style="height: 300px"--> |
| | | <span class="clearfixs">起始管段</span> |
| | | <el-card shadow="hover"> |
| | | <span class="fixed-style">起始管段</span> |
| | | <el-table |
| | | ref="singleTable" |
| | | highlight-current-row |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <span class="clearfixs">结束管段</span> |
| | | <span class="fixed-style">结束管段</span> |
| | | <el-table |
| | | max-height="200" |
| | | highlight-current-row |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <span class="clearfixs">分析结果:<span style="color: red;">{{ currentLinkIsTrue }}</span></span> |
| | | <span class="fixed-style">分析结果:<span style="color: red;">{{ currentLinkIsTrue }}</span></span> |
| | | <el-table |
| | | highlight-current-row |
| | | max-height="200" |
| | |
| | | <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" title="清除绘制">清除 |
| | | </el-button> |
| | | <el-card shadow="hover"> |
| | | <span class="clearfixs">发生爆裂的管段</span> |
| | | <span class="fixed-style">发生爆裂的管段</span> |
| | | <el-table |
| | | ref="singleTable" |
| | | highlight-current-row |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <span class="clearfixs">需要关闭的阀门</span> |
| | | <span class="fixed-style">需要关闭的阀门</span> |
| | | <el-table |
| | | highlight-current-row |
| | | :data="bgFm" |
| | |
| | | <el-button type="primary" @click="jdmClear" size="mini" style="margin-bottom: 5px;" title="清除截断面分析结果">清除 |
| | | </el-button> |
| | | <el-card class="box-card"> |
| | | <div slot="header" class="clearfixs"> |
| | | <div slot="header" class="fixed-style"> |
| | | <span>管线查询结果</span> |
| | | </div> |
| | | <el-table |
| | |
| | | </el-table> |
| | | </el-card> |
| | | <el-card class="box-card"> |
| | | <div slot="header" class="clearfixs"> |
| | | <div slot="header" class="fixed-style"> |
| | | <span>断面图</span> |
| | | </div> |
| | | <span v-show="!myChartShow" style="color: #909399;font-size: 12px;">暂无数据</span> |
| | | <div v-show="myChartShow" id="echarts_box" style="width: 600px;height:300px;"></div> |
| | | <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 600px;height:300px;"></div> |
| | | </el-card> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | |
| | | |
| | | import eventBus from '../../../../eventBus' |
| | | import DrawLine from './AnalysisChoose/DrawLine' |
| | | // import main from "../leaflet/app/main" |
| | | import mapApi from '@/api/mapApi' |
| | | import mapApi from '../../../../api/mapApi' |
| | | |
| | | export default { |
| | | name: 'SewersAnalysis', |
| | |
| | | // 地图点击类型 first连通性点击 second爆管点击 third流向点击 fourth横断面 |
| | | activeName: 'first', |
| | | measure: null, |
| | | map: null, |
| | | map: window.map, |
| | | |
| | | myChart: null, |
| | | myChartShow: false, |
| | | flowPipeLine: null, |
| | | |
| | | // 用于判断 |
| | | currentSelectStart: null, |
| | | currentSelectEnd: null, |
| | | currentSelectStartLine: null, |
| | |
| | | } |
| | | }, |
| | | mounted () { |
| | | // this.myChart = this.$echarts.init(document.getElementById('echarts_box')) |
| | | // 全局map传递 || this.map = window.map |
| | | this.map = window.map |
| | | eventBus.$on('map-obj', (mapObj) => { |
| | | this.map = mapObj |
| | | }) |
| | | // 初始化echarts图表 |
| | | this.myChart = this.$echarts.init(this.$refs.myChart) |
| | | // 使用 DrwLine方法 |
| | | eventBus.$on('draw-hdm-line', (points) => { |
| | | this.getHdmPoint(points) |
| | |
| | | |
| | | // 流向地图上点击 |
| | | selectPipeLine () { |
| | | this.map.on('click', this.selectClick) |
| | | window.map.on('click', this.selectClick) |
| | | }, |
| | | // 地图上点击回调 |
| | | selectClick (e) { |
| | | this.map.off('click', this.selectClick) |
| | | window.map.off('click', this.selectClick) |
| | | const point = [e.latlng.lng, e.latlng.lat] |
| | | console.log(point) |
| | | this.getPipeLine(point) |
| | |
| | | |
| | | // 流向数据请求 |
| | | async getPipeLine (point) { |
| | | const param = { |
| | | x: point[0], |
| | | y: point[1], |
| | | radius: 3 |
| | | } |
| | | console.log(param) |
| | | // const param = { |
| | | // x: point[0], |
| | | // y: point[1], |
| | | // radius: 3 |
| | | // } |
| | | // console.log(param) |
| | | |
| | | // 根据参数请求接口数据 |
| | | // const res = await api.getPipeline(param) |
| | |
| | | console.log('正流向显示') |
| | | console.log(e) |
| | | |
| | | // 清除流向方法 |
| | | this.clearLX() |
| | | // const param = { |
| | | // points: e.data, |
| | |
| | | // 横断面数据请求 |
| | | async getHdmPoint (line) { |
| | | console.log('横断面的绘制线') |
| | | console.table(line) |
| | | // console.table(line) |
| | | // 横断面数据 |
| | | this.hdmParam = { |
| | | x1: line[0].lng, |
| | | y1: line[0].lat, |
| | |
| | | padding: 0; |
| | | } |
| | | |
| | | /deep/ .clearfixs { |
| | | /deep/ .fixed-style { |
| | | display: inline-block; |
| | | color: #ffffff; |
| | | margin: 15px; |