派生自 wuyushui/SewerAndRainNetwork
src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
@@ -4,21 +4,21 @@ <!--<el-card>--> <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick"> <el-tab-pane label="连通性" name="first"> <div> <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> </div> </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" @row-click="linkSelectStart" 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 sortable width="100" prop="material" label="起点编号"></el-table-column> <el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column> <el-table-column fixed="right" class-name="fixed-table" label="操作" width="40"> <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> @@ -37,7 +37,7 @@ </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" @row-click="linkResultSelect" 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 sortable width="100" prop="material" label="起点编号"></el-table-column> @@ -112,16 +112,16 @@ </el-table> </el-tab-pane> <el-tab-pane label="横断面" name="fourth"> <div> <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> </div> </el-row> <!-- <el-card class="box-card">--> <div slot="header" class="fixed-style"> <span>管段查询结果</span> </div> <el-table class="tableBox" :data="tableData" 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"> @@ -166,7 +166,9 @@ myChart: null, options: [], echartsList: [], myChartShow: false, flowPipeLine: null, // 用于判断 @@ -205,9 +207,7 @@ lxTableDataResult: [], // 横断面 管段查询结果 的table表格数据 tableData: [], echartsList: [] tableData: [] } }, @@ -222,7 +222,8 @@ methods: { // tab切换 handleClick (tab, event) { // console.log(tab, event) console.log(event) // console.log(tab) this.clearLinkPipe() this.clearLX() this.linkClear() @@ -246,23 +247,17 @@ }, // 地图上点击回调 selectClick (e) { console.log(e) // console.log(e) window.map.off('click', this.selectClick) const point = [e.latlng.lng, e.latlng.lat] this.getPipeLine(point) // if () { // // 关闭弹窗 // window.layerFactory.clickSwitch = false // } else { // window.layerFactory.clickSwitch = true // } }, // 点击获取判断数据 async getPipeLine (point) { const param = { x: point[0], y: point[1], radius: 5 radius: 3 } // 根据参数请求接口数据 const res = await mapApi.findPipelineByClickPoint(param) @@ -298,13 +293,13 @@ // 连通性 ===> 地图点击起始管段e linkClickStart (e) { // console.log(e) // console.log('地图点击起始管段') this.linkType = 1 this.selectPipeLine() }, // 连通性 起始管段 table列表数据 选择数据事件 的点击事件 linkSelectStart (e) { // console.log(e) // console.log('选择起始管段') // this.$refs.singleTable.setCurrentRow(e) this.currentSelectStart = e @@ -331,7 +326,7 @@ }, // 连通性 结束管段 table列表数据 选择数据事件 的点击事件 linkSelectEnd (e) { console.log('选择结束管段') // console.log('选择结束管段') this.currentSelectEnd = e // 做判断remove @@ -345,15 +340,15 @@ style: function (feature) { return { weight: 10, color: 'rgba(255, 247, 0, 0.6)' color: 'rgba(255, 247, 0, 0.7)' } } }).addTo(window.map) window.map.panInsideBounds(this.currentSelectEndLine.getBounds()) }, // 连通性查询 // 连通性查询 结果 async linkQuery () { // 每次查询分析结果为空 // 每次查询分析结果制空 this.tableDataLinkResult = [] if (this.linkPipeline.length > 1) { this.linkPipeline.forEach((itm) => { @@ -372,16 +367,15 @@ startLineID: this.currentSelectStart.pipesegcode, endLineID: this.currentSelectEnd.pipesegcode } // console.log(param) console.log(param) // 请求接口和数据 const res = await mapApi.findConnectedPipelines(param) // console.log(res) // 判断数据结果 === 0 则没有请求到数据 if (res.data.length === 0) { this.$message('没有找到连通的管段') // if (this.tableDataLinkStart === [] && this.tableDataLinkEnd === []) { // 进行判断 this.currentLinkIsTrue = '不连通' // } return } this.tableDataLinkResult = res.data @@ -829,6 +823,7 @@ } /deep/ .fixed-style { /*margin: 15px;*/ font-size: 12px; display: inline-block; color: #00fff6;
