派生自 wuyushui/SewerAndRainNetwork
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue
@@ -1,38 +1,27 @@ <template> <div class="connectivity"> <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-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-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> <!-- </el-card>--> <!-- <el-card class="box-card"> <div class="connectivity"> <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-row> <div slot="header" class="fixed-style"> <span>断面图</span> <span>管段查询结果</span> </div> <span v-show="!myChartShow" style="color: #909399;font-size: 12px;">暂无数据</span> <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" --> </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="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> <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> </div> </template> <script> @@ -64,68 +53,8 @@ }) }, methods: { // tab切换 handleClick () { this.clearLinkPipe() this.jdmClear() this.currentLinkIsTrue = '' this.bgFm = [] this.bgPipeLine = [] this.tableData = [] this.tableDataLiuxiang = [] this.tableDataLinkStart = [] this.tableDataLinkEnd = [] this.tableDataLinkResult = [] this.lxTableDataResult = [] }, // 地图上点击 selectPipeLine () { window.map.on('click', this.selectClick) // // 关闭弹窗 window.layerFactory.clickSwitch = false }, // 地图上点击回调 selectClick (e) { // console.log(e) window.map.off('click', this.selectClick) const point = [e.latlng.lng, e.latlng.lat] this.getPipeLine(point) }, // 点击获取判断数据 async getPipeLine (point) { const param = { x: point[0], y: point[1], radius: 3 } // 根据参数请求接口数据 const res = await mapApi.findPipelineByClickPoint(param) console.log(res) if (this.activeName === 'first') { if (this.linkType === 1) { this.tableDataLinkStart = res.data } else { this.tableDataLinkEnd = res.data } } else if (this.activeName === 'second') { this.bgPipeLine = res.data } else if (this.activeName === 'third') { this.tableDataLiuxiang = res.data } else if (this.activeName === 'fourth') { } }, // 清楚分析结果 clearLinkPipe () { if (this.linkPipeline.length > 0) { this.linkPipeline.forEach((itm, idx) => { itm.remove() }) } this.linkPipeline = [] }, // 横断面绘制线段 drawLine () { // console.log('drawLine') if (this.measure === null) { this.measure = new DrawLine(window.map) } @@ -134,8 +63,6 @@ }, // 横断面数据请求 async getHdmPoint (line) { // console.log('横断面的绘制线') // console.table(line) // 横断面数据 this.hdmParam = { x1: line[0].lng, @@ -153,15 +80,39 @@ } // 已绘制线图 进行绘制横断面数据分析 const res = await mapApi.getCrossSection(this.hdmParam) console.log(res) // let obj = {} const dataSpacing = res.data.pointInterval for (let i = 0; i < dataSpacing.length; i++) { const objSpacing = { spacing: dataSpacing[i] } console.log(objSpacing) this.tableData.push(objSpacing) } // const dataSpacing = res.data.pointInterval // // for (let i = 0; i < dataSpacing.length; i++) { // // this.obj.spacing = dataSpacing[i] // // } // const dataPoint = res.data.point // // const obj = {} // for (let i = 0; i < dataPoint.length; i++) { // this.obj.mediumtype = dataPoint[i].pipelines.extraData.mediumtype // this.obj.x = parseFloat(dataPoint[i].crossPoint3D.x).toFixed(4) // this.obj.y = parseFloat(dataPoint[i].crossPoint3D.y).toFixed(4) // this.obj.z = parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4) // this.obj.spacing = parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4) // } const dataPoint = res.data.point 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) } this.tableData.push(obj) } // console.log(this.tableData, 'this.tableData') this.dealWithData(res) }, dealWithData (e) {
