Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop
Conflicts:
src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue
| | |
| | | import BasemapHelper from '@components/helpers/BasemapHelper' |
| | | import VectorLayerHelper from '@components/helpers/VectorLayerHelper' |
| | | // 初始化显示 |
| | | // import '@components/plugin/PathDrag' |
| | | import '@components/plugin/PathDrag' |
| | | import MapConfig from '@/conf/MapConfig' |
| | | import '@components/plugin/PathDashFlow' // 流动线图 |
| | | import DownLoad from '@components/plugin/DownLoad' |
| | |
| | | |
| | | <script> |
| | | import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' |
| | | // import dayjs from 'dayjs' |
| | | |
| | | export default { |
| | | name: 'ECharts', |
| | |
| | | user: '', |
| | | region: '' |
| | | }, |
| | | source: { |
| | | |
| | | } |
| | | info: this.series |
| | | } |
| | | }, |
| | | methods: { |
| | | datalistBtn (value) { |
| | | // var inputSelect = document.getElementById('#ipt').value |
| | | // var optionlength = document.getElementsByTagName('option').length |
| | | // var optionId = '' |
| | | // for (var i = 0; i < optionlength; i++) { |
| | | // // var optionValue = $('option').eq(i).attr('data-value') |
| | | // if (inputSelect == optionValue) { |
| | | // optionId = $('option').eq(i).attr('data-id') |
| | | // } |
| | | // } |
| | | console.log(1) |
| | | // this.value = value |
| | | }, |
| | | onSubmit () { |
| | | console.log('submit!') |
| | | }, |
| | |
| | | this.myChart.resize() |
| | | } |
| | | }, |
| | | initOptions: function (dataDate, dataValue1, dataValue2, dataValue3) { |
| | | initOptions: function (dateDate, series) { |
| | | var options = { |
| | | title: { |
| | | // text: '折线图堆叠' |
| | | }, |
| | | color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'], |
| | | color: ['#446cdc', '#c4c916', '#c1187e'], |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | |
| | | start: 0, |
| | | end: 100, |
| | | show: false, |
| | | // handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', |
| | | handleSize: '80%', |
| | | handleStyle: { |
| | | color: '#fff', |
| | |
| | | // x轴的设置 |
| | | xAxis: { |
| | | type: 'category', |
| | | boundaryGap: ['10%', '10%'], |
| | | data: dataDate, |
| | | boundaryGap: false, |
| | | data: dateDate, |
| | | axisLabel: { // x轴全部显示 |
| | | rotate: 20, |
| | | interval: 0, |
| | |
| | | } |
| | | } |
| | | }], |
| | | series: [ |
| | | { |
| | | name: 'COD', |
| | | type: 'line', |
| | | stack: '总量', |
| | | data: dataValue1, |
| | | yAxisIndex: 0 |
| | | }, |
| | | { |
| | | name: '氨氮', |
| | | type: 'line', |
| | | stack: '总量', |
| | | data: dataValue2, |
| | | yAxisIndex: 0 |
| | | }, |
| | | { |
| | | name: '废水流量', |
| | | type: 'line', |
| | | stack: '总量', |
| | | data: dataValue3, |
| | | yAxisIndex: 1 |
| | | } |
| | | ] |
| | | series: series |
| | | } |
| | | return options |
| | | } |
| | |
| | | mounted () { |
| | | this.$nextTick(() => { |
| | | this.drawChart() |
| | | const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonData)).reverse() |
| | | const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonDateData)).reverse() |
| | | console.log(dataWatch) |
| | | var dataValue1 = [] |
| | | var dataValue2 = [] |
| | | var dataValue3 = [] |
| | | var dataDate = [] |
| | | for (var i = 0; i < 24; i++) { |
| | | dataDate.push(dataWatch[i].MonTimeStr.substring(0, 8)) |
| | | } |
| | | var dateDate = [] |
| | | // {COD:[3,4,5]} |
| | | var data = {} |
| | | for (var n = 0; n < dataWatch.length; n++) { |
| | | if (dataWatch[n].PoltmtrlName === 'COD') { |
| | | dataValue1.push(dataWatch[n].MonQty) |
| | | } else if (dataWatch[n].PoltmtrlName === '氨氮') { |
| | | dataValue2.push(dataWatch[n].MonQty) |
| | | } else if (dataWatch[n].PoltmtrlName === '废水流量') { |
| | | dataValue3.push(dataWatch[n].MonQty) |
| | | var d = dataWatch[n].MonTimeStr.substring(5, 9) |
| | | if (dateDate.indexOf(d) < 0) { |
| | | dateDate.push(d) |
| | | } |
| | | if (data[dataWatch[n].PoltmtrlName]) { |
| | | data[dataWatch[n].PoltmtrlName].push(dataWatch[n].MonQty) |
| | | } else { |
| | | data[dataWatch[n].PoltmtrlName] = [dataWatch[n].MonQty] |
| | | } |
| | | } |
| | | const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3) |
| | | this.myChart = this.$echarts.init(this.$refs.main) |
| | | this.myChart.setOption(opitons) |
| | | }) |
| | | }, |
| | | // 地图切换 |
| | | updateBasemapList () { |
| | | this.basemapList = this.basemapHelper.getBasemapList() |
| | | console.log(this.basemapList) |
| | | }, |
| | | changeBasemap (itm) { |
| | | const code = itm.code |
| | | this.basemapList.forEach((item) => { |
| | | if (item.code === code) { |
| | | console.log(this.currentBaseMapCode) |
| | | if (this.currentBaseMapCode == null || this.currentBaseMapCode !== code) { |
| | | this.currentBaseMapCode = code |
| | | this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, true) |
| | | } else { |
| | | this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, false) |
| | | } |
| | | |
| | | this.basemapHelper.getBasemapList().forEach((item) => { |
| | | item.layer.bringToBack() |
| | | var series = [] |
| | | for (var k in data) { |
| | | series.push({ |
| | | name: k, |
| | | type: 'line', |
| | | yAxisIndex: k === '废水流量' ? 1 : 0, |
| | | data: data[k] |
| | | }) |
| | | } |
| | | console.log(series) |
| | | const opitons = this.initOptions(dateDate, series) |
| | | this.myChart = this.$echarts.init(this.$refs.main) |
| | | this.myChart.setOption(opitons) |
| | | }) |
| | | } |
| | | } |
| | |
| | | <li @click='tabTaggle("EChartsDate")'>日数据</li> |
| | | <li @click='tabTaggle("ECharts")'>人工数据</li> |
| | | </ul> |
| | | <div id="title" > |
| | | <span><strong> </strong></span> |
| | | <span >正常</span> |
| | | <span ></span> |
| | | <span >预警</span> |
| | | <span ></span> |
| | | <span >超标</span> |
| | | <span ></span> |
| | | </div> |
| | | <component :is="currentTab" v-bind="$attrs"></component> |
| | | </div> |
| | | </template> |
| | |
| | | color: #682000; |
| | | cursor: pointer; |
| | | } |
| | | #title{ |
| | | height: 30px; |
| | | /* margin-top: 30px; */ |
| | | color: #ffffff; |
| | | margin-top: 5px; |
| | | } |
| | | |
| | | #title span:nth-child(1){ |
| | | /*margin-left: 478px*/ |
| | | } |
| | | #title span:nth-child(2){ |
| | | /*margin-left: 177px*/ |
| | | } |
| | | #title span:nth-child(3){ |
| | | display: inline-block; |
| | | background-color: #4ec99c; |
| | | height: 15px; |
| | | width: 35px; |
| | | margin-left: 10px; |
| | | border-radius: 5px; |
| | | } |
| | | #title span:nth-child(6){ |
| | | /*margin-left: 21px*/ |
| | | } |
| | | #title span:nth-child(7){ |
| | | display: inline-block; |
| | | background-color: red; |
| | | height: 15px; |
| | | width: 35px; |
| | | margin-left: 7px; |
| | | border-radius: 5px; |
| | | } |
| | | #title span:nth-child(4){ |
| | | margin-left: 17px; |
| | | } |
| | | #title span:nth-child(5){ |
| | | display: inline-block; |
| | | background-color: orange; |
| | | height: 15px; |
| | | width: 35px; |
| | | margin-left: 9px; |
| | | border-radius: 5px; |
| | | } |
| | | </style> |
| | |
| | | } |
| | | } |
| | | |
| | | // 分割线------------------------------------------------------------------------------- |
| | | // this. |
| | | this.bindTooltip = (layer) => { |
| | | return layer.options.test.Name |
| | | } |
| | |
| | | |
| | | init (layerConfig) { |
| | | // 1. 遍历layer config |
| | | for (var i = 0, l = layerConfig.length; i < l; i++) { |
| | | var config = layerConfig[i] |
| | | var layers = config.layers |
| | | layers && this.init(config.layers) |
| | | if (layerConfig) { |
| | | for (var i = 0, l = layerConfig.length; i < l; i++) { |
| | | var config = layerConfig[i] |
| | | var layers = config.layers |
| | | var childLayer = config.childLayer |
| | | layers && this.init(config.layers) |
| | | childLayer && this.init(config.childLayer) |
| | | |
| | | var checked = config.checked |
| | | checked && this.load(config) |
| | | var checked = config.checked |
| | | checked && this.load(config) |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | /** |
| | | * 设置index,线在最下面,点在上面 |
| | | * @param layerGroup 图层组 |
| | | */ |
| | | setZIndex (layerGroup) { |
| | | var layers = layerGroup.getLayers() |
| | | if (layers.length > 0) { |
| | | var layer = layers[0] |
| | | if (layer.feature && (layer.feature.geometry.type === 'LineString' || layer.feature.geometry.type === 'MultiLineString')) { |
| | | layerGroup.bringToBack() |
| | | * todo 这里无效,貌似是因为geojson加载到地图也是个layergroup |
| | | * |
| | | * 设置index,线在最下面,点在上面 |
| | | * @param layerGroup 图层组 |
| | | */ |
| | | setZIndex (layer) { |
| | | if (Array.isArray(layer)) { |
| | | for (var i = 0; i < layer.length; i++) { |
| | | this.setZIndex(layer[i]) |
| | | } |
| | | } else { |
| | | if (layer.getLayers) { |
| | | this.setZIndex(layer.getLayers()) |
| | | } else { |
| | | layerGroup.bringToFront() |
| | | if (layer.feature && (layer.feature.geometry.type === 'LineString' || layer.feature.geometry.type === 'MultiLineString')) { |
| | | layer.bringToBack() |
| | | } else { |
| | | layer.bringToFront() |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | /** |
| | | * 加载业务数据图层 |
| | | */ |
| | | |
| | | import { STYLES } from '../../../conf/Constants' |
| | | import AjaxUtils from '../../../utils/AjaxUtils' |
| | | |
| | |
| | | |
| | | loadData (wfsUrl) { |
| | | AjaxUtils.get4JsonDataByUrl(wfsUrl, this.params, (res) => { |
| | | console.log(res) |
| | | this.draw(res.data.features) |
| | | }) |
| | | } |
| | | |
| | | draw (features) { |
| | | const icon = this.config.icon |
| | | this.L.geoJSON(features, { |
| | | const geojsonLayer = this.L.geoJSON(features, { |
| | | style: function (feature) { |
| | | return { |
| | | fill: STYLES.FILL, |
| | |
| | | .on('mouseover', (e) => this.mouseOverListener(e, layer)).on('mouseout', (e) => this.mouseOutListener(e, layer)) |
| | | } |
| | | }).addTo(this.layer) |
| | | window.layerFactory.setZIndex(geojsonLayer) |
| | | } |
| | | |
| | | mouseOverListener (e, layer) { |
| | |
| | | }, |
| | | |
| | | _toggleTitle: function () { |
| | | this.link.title = this.optionsthis._map.isFullscreen()] |
| | | this.link.title = this.options |
| | | this._map.isFullscreen() |
| | | } |
| | | }) |
| | | |
| | |
| | | areaMeasure.points.pop() |
| | | }, |
| | | dblclick: function (e) { // 双击结束 |
| | | console.log(areaMeasure.polygon.dragging) |
| | | console.log('双击结束', e) |
| | | areaMeasure.polygon.enableEdit() |
| | | areaMeasure.polygon.dragging.disable() |
| | |
| | | distanceMeasure.points.pop() |
| | | }, |
| | | dblclick: function (e) { // 双击结束 |
| | | console.log(distanceMeasure.polyline.dragging) |
| | | console.log('双击结束', e) |
| | | distanceMeasure.polyline.enableEdit() |
| | | distanceMeasure.polyline.dragging.disable() |
| | |
| | | import * as L from 'leaflet' |
| | | import TDT from './TDT' |
| | | import { LayerSewersPoint } from './layers/LayerSewers' |
| | | import { LayerTopic } from './LayerTopic' |
| | | import { LayerBasin } from './layers/LayerBasin' |
| | | |
| | |
| | | IntranetBaseMaps: TDT.intranet, |
| | | InternetBaseMaps: TDT.internet, |
| | | Layers: { |
| | | LayerSewersLine: [LayerBasin, LayerTopic], |
| | | layerSewersPoint: LayerSewersPoint |
| | | LayerSewersLine: [LayerBasin, LayerTopic] |
| | | } // 污雨水图层配置 |
| | | } |
| | | |