派生自 wuyushui/SewerAndRainNetwork
src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
@@ -4,18 +4,21 @@ <!--<el-card>--> <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick"> <el-tab-pane label="连通性" name="first"> <el-row> <el-button type="primary" @click="linkClickStart" size="mini" title="地图上点击选择需要进行连通分析的管段">起始管段</el-button> <el-button type="primary" @click="linkClickEnd" size="mini" title="地图上点击与所选管段连通管段">结束管段</el-button> <el-button type="primary" @click="linkQuery" size="mini" title="根据起始、结束管段进行连通性分析">连通性分析</el-button> <el-button type="primary" @click="handleClick" size="mini" title="根据起始、结束管段进行连通性分析">清除</el-button> </el-row> <el-row> <el-button type="primary" @click="linkClickStart" size="mini" title="地图上点击选择需要进行连通分析的管段">起始管段 </el-button> <el-button type="primary" @click="linkClickEnd" size="mini" title="地图上点击与所选管段连通管段">结束管段</el-button> <el-button type="primary" @click="linkQuery" size="mini" title="根据起始、结束管段进行连通性分析">连通性分析</el-button> <el-button type="primary" @click="handleClick" size="mini" title="根据起始、结束管段进行连通性分析">清除</el-button> </el-row> <!-- <el-scrollbar style="height:450px">--> <!-- <el-card shadow="hover">--> <span class="fixed-style">起始管段</span> <el-table class="tableBox" height="100" max-height="200" :data="tableDataLinkStart" highlight-current-row style="width: 100%" size="mini"> <el-table class="tableBox" height="100" max-height="200" :data="tableDataLinkStart" highlight-current-row style="width: 100%" size="mini"> <el-table-column prop="datasource" label="管段类型"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column> <el-table-column sortable width="100" prop="material" label="起点编号"></el-table-column> <el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column> <el-table-column width="40" fixed="right" class-name="fixed-table" label="操作"> @@ -25,9 +28,11 @@ </el-table-column> </el-table> <span class="fixed-style">结束管段</span> <el-table class="tableBox" height="100" max-height="200" highlight-current-row :data="tableDataLinkEnd" @row-click="linkSelectEnd" style="width: 100%" size="mini"> <el-table class="tableBox" height="100" max-height="200" highlight-current-row :data="tableDataLinkEnd" @row-click="linkSelectEnd" style="width: 100%" size="mini"> <el-table-column prop="datasource" label="管段类型"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column> <el-table-column sortable width="100" prop="material" label="起点编号"></el-table-column> <el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column> <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40"> @@ -37,9 +42,11 @@ </el-table-column> </el-table> <span class="fixed-style">分析结果:<span style="color: red;margin-left: 15px">{{ currentLinkIsTrue }}</span></span> <el-table class="tableBox" highlight-current-row max-height="200" :data="tableDataLinkResult" style="width: 100%" size="mini"> <el-table class="tableBox" highlight-current-row max-height="200" :data="tableDataLinkResult" style="width: 100%" size="mini"> <el-table-column prop="material" label="管段类型"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column> <el-table-column sortable width="100" prop="material" label="起点编号"></el-table-column> <el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column> <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40"> @@ -55,16 +62,20 @@ <el-tab-pane label="爆管" style="color: #cccccc" name="second"> <el-row> <span>爆管（相关开关）</span> <el-button type="primary" @click="bgClick" size="mini" title="地图上点击选择发生爆管的管段">选择管段</el-button> <el-button type="primary" @click="handleClick" size="mini" title="清除绘制">清除</el-button> <el-button type="primary" @click="bgClick" size="mini" title="地图上点击选择发生爆管的管段">选择管段</el-button> <el-button type="primary" @click="handleClick" size="mini" title="清除绘制">清除</el-button> </el-row> <!-- <el-card shadow="hover">--> <span class="fixed-style">发生爆裂的管段</span> <el-table max-height="200" class="tableBox" ref="singleTable" highlight-current-row :data="bgPipeLine" style="width: 100%" size="mini"> <el-table max-height="200" class="tableBox" ref="singleTable" highlight-current-row :data="bgPipeLine" style="width: 100%" size="mini"> <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="起点编号"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="起点编号"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column> <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40"> <template slot-scope="scope"> <el-button @click="bgSelect(scope.row)" type="text" size="small">选择</el-button> @@ -72,11 +83,15 @@ </el-table-column> </el-table> <span class="fixed-style">需要关闭的阀门</span> <el-table class="tableBox" highlight-current-row max-height="200" :data="bgFm" @row-click="bgFmClick" style="width: 100%" size="mini"> <el-table class="tableBox" highlight-current-row max-height="200" :data="bgFm" @row-click="bgFmClick" style="width: 100%" size="mini"> <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column> <el-table-column sortable :show-overflow-tooltip="true" width="100" prop="pipecode" label="管段名称"></el-table-column> <el-table-column sortable :show-overflow-tooltip="true" width="100" prop="pipecode" label="起点编号"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column> <el-table-column sortable :show-overflow-tooltip="true" width="100" prop="pipecode" label="管段名称"></el-table-column> <el-table-column sortable :show-overflow-tooltip="true" width="100" prop="pipecode" label="起点编号"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column> <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40"> <template slot-scope="scope"> <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button> @@ -86,12 +101,17 @@ <!-- </el-card>--> </el-tab-pane> <el-tab-pane label="流向" name="third"> <el-button type="primary" @click="selectPipeLine" size="mini" highlight-current-row title="地图上点击要显示流向的管段">选择管段</el-button> <el-button type="primary" @click="selectPipeLine" size="mini" highlight-current-row title="地图上点击要显示流向的管段">选择管段 </el-button> <el-table max-height="200" class="tableBox" highlight-current-row :data="tableDataLiuxiang" size="mini"> <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="起点编号"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="起点编号"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column> <el-table-column class-name="fixed-table" fixed="right" label="操作" width="60"> <template slot-scope="scope"> <el-button @click="lxQuery(scope.row)" type="text" size="small">显示流向</el-button> @@ -99,11 +119,15 @@ </el-table-column> </el-table> <span class="fixed-style">分析结果</span> <el-table class="tableBox" highlight-current-row max-height="200" :data="lxTableDataResult" @row-click="lxResultSelect" style="width: 100%" size="mini"> <el-table class="tableBox" highlight-current-row max-height="200" :data="lxTableDataResult" @row-click="lxResultSelect" style="width: 100%" size="mini"> <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column> <el-table-column :show-overflow-tooltip="true" width="100" sortable prop="pipecode" label="管段名称"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="起点编号"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column> <el-table-column :show-overflow-tooltip="true" width="100" sortable prop="pipecode" label="管段名称"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="起点编号"></el-table-column> <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column> <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40"> <template slot-scope="scope"> <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button> @@ -113,18 +137,19 @@ </el-tab-pane> <el-tab-pane label="横断面" name="fourth"> <el-row> <el-button type="primary" @click="drawLine" size="mini" title="地图上绘制要进行分析截断面的线">绘制线段</el-button> <el-button type="primary" @click="jdmQuery" size="mini" title="截断面分析">截断面分析</el-button> <el-button type="primary" @click="jdmClear" size="mini" title="清除截断面分析结果">清除</el-button> <el-button type="primary" @click="drawLine" size="mini" title="地图上绘制要进行分析截断面的线">绘制线段</el-button> <el-button type="primary" @click="jdmQuery" size="mini" title="截断面分析">截断面分析</el-button> <el-button type="primary" @click="jdmClear" size="mini" title="清除截断面分析结果">清除</el-button> </el-row> <!-- <el-card class="box-card">--> <div slot="header" class="fixed-style"> <span>管段查询结果</span> </div> <el-table class="tableBox" :data="tableData" height="150" max-height="200" highlight-current-row style="width: 100%" @row-click="selectRow" size="mini"> <el-table class="tableBox" :data="tableData" height="150" max-height="200" highlight-current-row style="width: 100%" @row-click="selectRow" size="mini"> <el-table-column prop="pipename" label="管段名称"></el-table-column> <el-table-column prop="mediumtype" label="管段类型" width="80"></el-table-column> <el-table-column class-name="fixed-table" fixed="right" label="图表" width="40"> <el-table-column class-name="fixed-table" fixed="right" label="图表" width="40"> <template slot-scope="scope"> <el-button @click="selectRow(scope.row)" type="text" size="small">查看</el-button> </template> @@ -139,8 +164,10 @@ <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 350px;height:200px;"></div> </el-card> --> <span class="fixed-style">断面图</span> <span v-show="!myChartShow" style="color: #909399;font-size: 12px;height: 200px;display: block;text-align: center;line-height: 200px">暂无数据</span> <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width:350px;height:200px;margin: 0 auto"></div><!-- v-show="myChartShow" --> <span v-show="!myChartShow" style="color: #909399;font-size: 12px;height: 200px;display: block;text-align: center;line-height: 200px">暂无数据</span> <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width:350px;height:200px;margin: 0 auto"></div><!-- v-show="myChartShow" --> </el-tab-pane> </el-tabs> <!--</el-card>--> @@ -153,7 +180,8 @@ import eventBus from '../../../../eventBus' import DrawLine from './AnalysisChoose/DrawLine' import mapApi from '../../../../api/mapApi' import iconUrl from '../../../../assets/images/other.png' import { pulseEffect } from '../../../../utils/utils' // import iconUrl from '../../../../assets/images/other.png' export default { name: 'SewersAnalysis', @@ -261,7 +289,7 @@ } // 根据参数请求接口数据 const res = await mapApi.findPipelineByClickPoint(param) console.log(res.pipesegcode) console.log(res) if (this.activeName === 'first') { if (this.linkType === 1) { this.tableDataLinkStart = res.data @@ -283,10 +311,17 @@ }, createFlowMarker (point) { return window.L.marker(point, { icon: window.L.icon({ iconUrl: iconUrl, iconSize: [30, 30], iconAnchor: [15, 15] icon: window.L.divIcon({ className: 'dIcon', html: '<div class="plane live">' + // '<img src="'+require("../../assets/images/map/ship.png")+ '<div style="position: absolute;' + ' width: 20px;' + ' height: 20px;' + ' border-radius: 50%;' + ' content: \'\'; background-color: #FF664A;"/>' + '<span></span><span></span></div></>', iconSize: [90, 36] }) }) }, @@ -367,7 +402,7 @@ startLineID: this.currentSelectStart.pipesegcode, endLineID: this.currentSelectEnd.pipesegcode } // console.log(param) console.log(param) // 请求接口和数据 const res = await mapApi.findConnectedPipelines(param) // console.log(res) @@ -404,10 +439,10 @@ this.linkPipeline.push(line) }) }, // 连通性 分析结果table列表数据选择点击事件 // 定位方法事件 linkResultSelect (e) { // console.log('连通性分析结果列表点击') // console.log(e) console.log(e) const geom = JSON.parse(e.geomText) if (this.currentSelectResultLine != null) { this.currentSelectResultLine.remove() @@ -448,8 +483,8 @@ this.selectPipeLine() }, async bgSelect (e) { console.log('选择爆管管段') console.log(e) // console.log('选择爆管管段') // console.log(e) this.bgFm = [] if (this.bgMarker != null) { this.bgMarker.remove() @@ -491,14 +526,13 @@ this.bgPoint = res.data[0].startControlPoint const point = JSON.parse(this.bgPoint.geomText) const p = [point.coordinates[1], point.coordinates[0]] this.bgMarker = this.createFlowMarker(p) // const point = JSON.parse(this.bgPoint.geomText) // const p = [point.coordinates[1], point.coordinates[0]] // this.bgMarker = this.createFlowMarker(p) // this.bgMarker = pulseEffect(p) // this.bgMarker.bindTooltip(this.bgPoint.pointnumbe) this.bgMarker.addTo(window.map) window.map.flyTo(p) // this.bgMarker.addTo(window.map) // window.map.flyTo(p) const linkPipe = [] res.data.forEach((itm, idx) => { @@ -525,12 +559,13 @@ }, bgFmClick (e) { // console.log('点击影响的阀门') console.log(e) // console.log(e) // const point = [e.data[0][0], e.data[0][1]] const point = [e.startControlPoint.y, e.startControlPoint.x] const marker = this.createFlowMarker(point) marker.addTo(window.map) window.map.flyTo(point, 17) pulseEffect(point) // const marker = this.createFlowMarker(point) // marker.addTo(window.map) // window.map.flyTo(point, 17) }, // 流向分析结果table列表数据点击 @@ -803,13 +838,15 @@ </script> <style lang="less" scoped> /deep/ .el-tabs .el-tabs__item{ /deep/ .el-tabs .el-tabs__item { height: 20px; line-height: 20px; } /deep/ .el-tabs--border-card>.el-tabs__content{ /deep/ .el-tabs--border-card > .el-tabs__content { padding: 5px; } /deep/ .el-table .has-gutter tr th { border: none !important; } @@ -836,13 +873,14 @@ /deep/ .el-table__fixed-right::before, .el-table__fixed::before { background: none; } /deep/ .el-table__empty-text{ /deep/ .el-table__empty-text { line-height: 170px; } /deep/ .el-table__body .el-table__row.hover-row td { background: none !important; color:yellow; color: yellow; } /deep/ .el-table__body tr.current-row > td { @@ -858,7 +896,7 @@ display: none; } /deep/ .el-tab-pane{ /deep/ .el-tab-pane { min-height: 506.19px; }
