派生自 wuyushui/SewerAndRainNetwork
src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
@@ -1,141 +1,17 @@ <template> <div class="sewers-analysis-tab"> <!--<transition name="el-fade-in-linear">--> <!--<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-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-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 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="操作"> <template slot-scope="scope"> <el-button @click="linkSelectStart(scope.row)" type="text" size="small">选择</el-button> </template> </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-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 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"> <template slot-scope="scope"> <el-button @click="linkSelectEnd(scope.row)" type="text" size="small">选择</el-button> </template> </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-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 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"> <template slot-scope="scope"> <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button> </template> </el-table-column> </el-table> <!--</el-card>--> <!--</el-scrollbar>--> <Connectivity></Connectivity> </el-tab-pane> <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-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-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 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> </template> </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-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 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> </template> </el-table-column> </el-table> <!-- </el-card>--> <Tube></Tube> </el-tab-pane> <el-tab-pane label="流向" name="third"> <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 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> </template> </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-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 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> </template> </el-table-column> </el-table> <Flow></Flow> </el-tab-pane> <el-tab-pane label="横断面" name="fourth"> <!-- <CrossSectional></CrossSectional>--> <el-row> <el-button type="primary" @click="drawLine" size="mini" title="地图上绘制要进行分析截断面的线">绘制线段</el-button> <el-button type="primary" @click="jdmQuery" size="mini" title="截断面分析">截断面分析</el-button> @@ -147,13 +23,16 @@ </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-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"> <template slot-scope="scope"> <el-button @click="selectRow(scope.row)" type="text" size="small">查看</el-button> </template> </el-table-column> <el-table-column prop="mediumtype" label="介质类型" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="x" label="断面(经度)" :show-overflow-tooltip="true" width="80"></el-table-column> <el-table-column prop="y" label="断面(纬度)" :show-overflow-tooltip="true" width="80"></el-table-column> <el-table-column prop="z" label="断面(高程)" :show-overflow-tooltip="true" width="80"></el-table-column> <el-table-column prop="spacing" label="间距(m)" width="80"></el-table-column> <!-- <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>--> <!-- </el-table-column>--> </el-table> <!-- </el-card>--> <!-- <el-card class="box-card"> @@ -170,8 +49,6 @@ style="width:350px;height:200px;margin: 0 auto"></div><!-- v-show="myChartShow" --> </el-tab-pane> </el-tabs> <!--</el-card>--> <!--</transition>--> </div> </template> @@ -181,10 +58,19 @@ import DrawLine from './AnalysisChoose/DrawLine' import mapApi from '../../../../api/mapApi' import { pulseEffect } from '../../../../utils/utils' // import iconUrl from '../../../../assets/images/other.png' import Connectivity from './AnalysisChoose/Connectivity' import Tube from './AnalysisChoose/Tube' import Flow from './AnalysisChoose/Flow' // import CrossSectional from './AnalysisChoose/CrossSectional' export default { name: 'SewersAnalysis', components: { Connectivity, Tube, Flow // CrossSectional }, data () { return { // 地图点击类型 first连通性点击 second爆管点击 third流向点击 fourth横断面 @@ -235,7 +121,8 @@ lxTableDataResult: [], // 横断面 管段查询结果 的table表格数据 tableData: [] tableData: [], obj: {} } }, @@ -270,8 +157,8 @@ // 地图上点击 selectPipeLine () { window.map.on('click', this.selectClick) // // 关闭弹窗 window.layerFactory.clickSwitch = false // 关闭弹窗 // window.mapManager.clickDialogSwitch = false }, // 地图上点击回调 selectClick (e) { @@ -335,8 +222,6 @@ // 连通性 起始管段 table列表数据 选择数据事件 的点击事件 linkSelectStart (e) { // console.log(e) // console.log('选择起始管段') // this.$refs.singleTable.setCurrentRow(e) this.currentSelectStart = e if (this.currentSelectStartLine != null) { this.currentSelectStartLine.remove() @@ -439,10 +324,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() @@ -483,8 +368,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() @@ -527,9 +412,7 @@ 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) // this.bgMarker = pulseEffect(p) // this.bgMarker.bindTooltip(this.bgPoint.pointnumbe) @@ -708,15 +591,24 @@ } // 已绘制线图 进行绘制横断面数据分析 const res = await mapApi.getCrossSection(this.hdmParam) console.log(res) const dataPoint = res.data.point // 存储间距list const spacingList = res.data.pointInterval.reverse() // console.log(spacingList) for (let i = 0; i < dataPoint.length; i++) { const obj = { pipename: dataPoint[i].pipelines.extraData.pipename, mediumtype: dataPoint[i].pipelines.extraData.mediumtype mediumtype: dataPoint[i].pipelines.extraData.mediumtype, x: parseFloat(dataPoint[i].crossPoint3D.x).toFixed(4), y: parseFloat(dataPoint[i].crossPoint3D.y).toFixed(4), z: parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4), spacing: spacingList[i - 1] } this.tableData.push(obj) } // console.log(this.tableData, 'this.tableData') // spacingList.reverse() // console.log(spacingList) // console.log(this.tableData) this.dealWithData(res) }, dealWithData (e) {
