Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop
| | |
| | | margin: 0 10px; |
| | | cursor: pointer; |
| | | padding: 5px; |
| | | border: 1px solid #2b87c8; |
| | | border-radius: 4px; |
| | | /*border: 1px solid #2b87c8;*/ |
| | | /*border-radius: 4px;*/ |
| | | text-align: center; |
| | | vertical-align: middle !important; |
| | | color: #fff; |
| | | -webkit-transform: skew(30deg); |
| | | -moz-transform: skew(30deg); |
| | | -o-transform: skew(30deg); |
| | | transform: skew(15deg); |
| | | } |
| | | |
| | | .default-uncheck { |
| | |
| | | margin: 0 10px; |
| | | cursor: pointer; |
| | | padding: 5px; |
| | | border: 1px solid #2b87c8; |
| | | border-radius: 4px; |
| | | /*border: 1px solid #2b87c8;*/ |
| | | /*border-radius: 4px;*/ |
| | | text-align: center; |
| | | vertical-align: middle !important; |
| | | color: #fff; |
| | | -webkit-transform: skew(30deg); |
| | | -moz-transform: skew(30deg); |
| | | -o-transform: skew(30deg); |
| | | transform: skew(15deg); |
| | | } |
| | | |
| | | .default-uncheck { |
| | |
| | | async handleSearch () { |
| | | this.list = [] |
| | | this.wfsHelper.clearFilter() |
| | | this.wfsHelper.setTypeName(['sewer:emergency']) |
| | | this.wfsHelper.setTypeName(['sewer:view_emergency']) |
| | | this.wfsHelper.setMaxFeatures(100) |
| | | // form表单选择搜索 |
| | | if (this.form.dataType) { |
| | |
| | | :class="activeNum===index?'hover':''"> |
| | | <img class="state" :src="getImgSrc()" style="background: none"/> |
| | | <div> |
| | | <h3 @click="handleLocation(item,index)">{{ item.properties.name || item.properties.code }}</h3> |
| | | <h3 @click="handleLocation(item,index)">{{ item.properties.name || item.properties.code |
| | | }}</h3> |
| | | <p>所属企业:<span>{{ item.properties.orgname }}</span> |
| | | <p>设施类型:<span>{{ item.properties.type }}</span> |
| | | <el-button v-if="fuShuSheShiShow" class="rt btn00fff6" size="mini" |
| | |
| | | methods: { |
| | | // 地图上点击 |
| | | selectPipeLine () { |
| | | // window.mapManager.clickDialogSwitch = false |
| | | window.map.on('click', this.selectClick) |
| | | // 关闭弹窗 |
| | | window.layerFactory.clickSwitch = false |
| | | // window.mapManager.clickDialogSwitch = true |
| | | }, |
| | | // 地图上点击回调 |
| | | selectClick (e) { |
| | | // console.log(e) |
| | | window.map.off('click', this.selectClick) |
| | | const point = [e.latlng.lng, e.latlng.lat] |
| | | this.getPipeLine(point) |
| | |
| | | } |
| | | // 根据参数请求接口数据 |
| | | const res = await mapApi.findPipelineByClickPoint(param) |
| | | // console.log(res) |
| | | console.log(res) |
| | | if (this.linkType === 1) { |
| | | this.tableDataLinkStart = res.data |
| | | } else { |
| | |
| | | }, |
| | | // 连通性 ===> 地图点击起始管段e |
| | | linkClickStart (e) { |
| | | // console.log('地图点击起始管段') |
| | | this.linkType = 1 |
| | | this.selectPipeLine() |
| | | }, |
| | |
| | | const geom = JSON.parse(itm.geomText) |
| | | const points = [] |
| | | geom.coordinates.forEach((it, id) => { |
| | | points.push(it.reverse()) |
| | | const item = it.reverse() |
| | | if (it.length > 2) { |
| | | item.shift() |
| | | } |
| | | points.push(item) |
| | | }) |
| | | linkPipe.push(points) |
| | | }) |
| | |
| | | <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%" 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="断面高程(m)" :show-overflow-tooltip="true" width="80"></el-table-column> |
| | | <el-table-column prop="spacing" label="间距(m)" width="80"></el-table-column> |
| | | <el-table class="tableBox" :data="tableData" height="150" max-height="200" highlight-current-row |
| | | style="width: 100%" size="mini"> |
| | | <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop" |
| | | :label="item.label" :show-overflow-tooltip="true" min-width="100"></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> |
| | | <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> |
| | |
| | | name: 'CrossSectional', |
| | | data () { |
| | | return { |
| | | // 用于绘制横断面线段 |
| | | measure: null, |
| | | // 定义 echarts对象 |
| | | myChart: null, |
| | | options: [], |
| | | echartsList: [], |
| | | // 用于判断echarts图表的显示与隐藏 |
| | | myChartShow: false, |
| | | linkPipeline: [], |
| | | // 用于定义接收横断面数据 |
| | | hdmParam: null, |
| | | // 横断面 管段查询结果 的table表格数据 |
| | | tableData: [], |
| | | hdmParam: null |
| | | // table 表格定义的字段 |
| | | listLabel: [ |
| | | { |
| | | label: '介质类型', |
| | | prop: 'mediumtype' |
| | | }, |
| | | { |
| | | label: '断面(经度)', |
| | | prop: 'x' |
| | | }, |
| | | { |
| | | label: '断面(纬度)', |
| | | prop: 'y' |
| | | }, |
| | | { |
| | | label: '断面高程(m)', |
| | | prop: 'z' |
| | | }, |
| | | { |
| | | label: '间距(m)', |
| | | prop: 'spacing' |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | mounted () { |
| | |
| | | eventBus.$on('draw-hdm-line', (points) => { |
| | | this.getHdmPoint(points) |
| | | }) |
| | | this.$nextTick(() => { |
| | | eventBus.$on('tabData-change', (obj) => { |
| | | if (obj) { |
| | | this.jdmClear() |
| | | } |
| | | }) |
| | | eventBus.$on('tabData-change', (obj) => { |
| | | if (obj) { |
| | | this.jdmClear() |
| | | } |
| | | }) |
| | | }, |
| | | methods: { |
| | |
| | | // 对获取到的数据进行处理 |
| | | dealWithData (e) { |
| | | console.log(e) |
| | | const dataPoint = e.data.point |
| | | const spacingList = e.data.pointInterval.reverse() |
| | | const dataList = [] |
| | | for (let i = 0; i < dataPoint.length; i++) { |
| | | const obj = { |
| | | mediumtype: dataPoint[i].pipelines.extraData.mediumtype, |
| | | startpointz: dataPoint[i].pipelines.extraData.startpointz, |
| | | diameter: dataPoint[i].pipelines.extraData.diameter, |
| | | spacing: spacingList[i - 1], |
| | | x: parseFloat(dataPoint[i].crossPoint3D.x).toFixed(8), |
| | | y: parseFloat(dataPoint[i].crossPoint3D.y).toFixed(8), |
| | | z: parseFloat(dataPoint[i].crossPoint3D.z).toFixed(2) |
| | | } |
| | | dataList.push(obj) |
| | | } |
| | | // 横向坐标数据 |
| | | const xAxisData = [] |
| | | const dataObj = [] |
| | | for (let i = 0; i < dataList.length; i++) { |
| | | xAxisData.push(dataList[i].mediumtype) |
| | | // if (dataList[i].mediumtype === '雨水') { |
| | | // dataObj.color = 'red' |
| | | // } |
| | | dataObj.push(dataList[i].startpointz) |
| | | } |
| | | this.selectRow(xAxisData, dataObj) |
| | | }, |
| | | // 横断面绘制完成后 进行横断面数据分析 进行图表展示 |
| | | selectRow (dataList) { |
| | | // console.log(dataList) |
| | | // 3. 使用刚指定的配置项和数据,显示图表 |
| | | this.option = { |
| | | selectRow (xAxisData, dataObj) { |
| | | const option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'cross', |
| | | label: { |
| | | backgroundColor: '#6a7985' |
| | | } |
| | | } |
| | | trigger: 'axis' |
| | | }, |
| | | // legend: { |
| | | // // data: ['直接访问', '搜索引擎'] |
| | | // data: dataList |
| | | // data: [] |
| | | // }, |
| | | toolbox: { |
| | | show: false, |
| | | feature: { |
| | | saveAsImage: {} |
| | | } |
| | | }, |
| | | grid: { |
| | | left: '10px', |
| | | right: '0', |
| | | top: '10px', |
| | | bottom: '5px', |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '3%', |
| | | containLabel: true |
| | | }, |
| | | xAxis: [ |
| | | { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | axisLabel: { |
| | | // formatter: '{value}', |
| | | textStyle: { |
| | | color: '#fff' |
| | | } |
| | | } |
| | | // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] |
| | | // data: dataList |
| | | } |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | type: 'value', |
| | | axisLabel: { |
| | | // formatter: '{value}', |
| | | textStyle: { |
| | | color: '#fff' |
| | | } |
| | | xAxis: { |
| | | type: 'category', |
| | | splitLine: { |
| | | lineStyle: { |
| | | type: 'dashed' |
| | | }, |
| | | show: true |
| | | }, |
| | | // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
| | | data: xAxisData, |
| | | axisLabel: { |
| | | interval: 0, |
| | | textStyle: { |
| | | color: '#fff' |
| | | } |
| | | } |
| | | ], |
| | | // series: [ |
| | | // { |
| | | // name: '搜索引擎', |
| | | // type: 'line', |
| | | // stack: '总量', |
| | | // label: { |
| | | // show: true, |
| | | // position: 'top' |
| | | // }, |
| | | // areaStyle: {}, |
| | | // emphasis: { |
| | | // focus: 'series' |
| | | // }, |
| | | // data: [820, 932, 901, 934, 1290, 1330, 1320] |
| | | // } |
| | | // ] |
| | | series: this.echartsList |
| | | }, |
| | | yAxis: { |
| | | axisPointer: { |
| | | snap: true |
| | | }, |
| | | splitLine: { |
| | | show: false |
| | | }, |
| | | type: 'value', |
| | | axisLabel: { |
| | | interval: 0, |
| | | textStyle: { |
| | | color: '#fff' |
| | | } |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | | type: 'scatter', |
| | | data: dataObj |
| | | } |
| | | ] |
| | | } |
| | | this.myChartShow = true |
| | | this.myChart.clear() |
| | | this.myChart.setOption(this.option) |
| | | this.myChart.setOption(option) |
| | | }, |
| | | // 横断面清除 |
| | | jdmClear () { |
| | |
| | | const geom = JSON.parse(itm.geomText) |
| | | const points = [] |
| | | geom.coordinates.forEach((it, id) => { |
| | | points.push(it.reverse()) |
| | | const item = it.reverse() |
| | | if (it.length > 2) { |
| | | item.shift() |
| | | } |
| | | points.push(item) |
| | | }) |
| | | linkPipe.push(points) |
| | | }) |
| | |
| | | this.currentSelectResultLine.remove() |
| | | this.currentSelectResultLine = null |
| | | } |
| | | if (this.linkPipeline.length > 0) { |
| | | this.linkPipeline.forEach((itm, idx) => { |
| | | itm.remove() |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | export function selectPipeLine () { |
| | | window.map.on('click', this.selectClick) |
| | | window.mapManager.clickDialogSwitch = true |
| | | } |
| | | |
| | | export function createFlowLine (param) { |
| | |
| | | const geom = JSON.parse(itm.geomText) |
| | | const points = [] |
| | | geom.coordinates.forEach((it, id) => { |
| | | points.push(it.reverse()) |
| | | const item = it.reverse() |
| | | if (it.length > 2) { |
| | | item.shift() |
| | | } |
| | | points.push(item) |
| | | }) |
| | | linkPipe.push(points) |
| | | }) |