From 253590ef9d0ec11b526321c2c18d60c53990fd45 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期一, 19 四月 2021 13:09:14 +0800 Subject: [PATCH] 弹框修改 --- src/components/BaseNav/WasteGas/PublicTabs.vue | 53 +- /dev/null | 178 -------- src/components/LayerController/logic/WasteGas.js | 75 ++- src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue | 127 +++-- src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js | 427 +++++++++++++++++++++ src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue | 5 src/components/BaseNav/WasteGas/WasteGasIndex.vue | 99 ++++ src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue | 217 ++++++---- 8 files changed, 814 insertions(+), 367 deletions(-) diff --git a/src/components/BaseNav/WasteGas/Index.vue b/src/components/BaseNav/WasteGas/Index.vue deleted file mode 100644 index 1db65ea..0000000 --- a/src/components/BaseNav/WasteGas/Index.vue +++ /dev/null @@ -1,160 +0,0 @@ -<template> - <div class="win"> - <div class="border_corner border_corner_left_top"></div> - <div class="border_corner border_corner_right_top"></div> - <div class="border_corner border_corner_left_bottom"></div> - <div class="border_corner border_corner_right_bottom"></div> - <ul class="tab" v-show="this.$attrs.value !== 'feiqi'"> - <li :class="active==0?'hover':''" @click='tabTaggle("EChartsRealWasteWater",0)'>瀹炴椂鏁版嵁</li> - <li :class="active==1?'hover':''" @click='tabTaggle("EChartsHourWasteWater",1)'>灏忔椂鏁版嵁</li> - <li :class="active==2?'hover':''" @click='tabTaggle("EChartsDateWasteWater",2)'>鏃ユ暟鎹�</li> - <li :class="active==3?'hover':''" @click='tabTaggle("EChartsWasteWaterTable",3)'>浜哄伐鏁版嵁</li> - </ul> - <div class="legend" > - <span >姝e父</span> - <i style=" background: #4ec99c;"></i> - <span >棰勮</span> - <i style=" background: red;"></i> - <span >瓒呮爣</span> - <i style=" background: orange;"></i> - </div> - <component :is="currentTab" v-bind="$attrs" ref="Echats"></component> - </div> -</template> - -<script> -import ECharts from './echarts/Echarts' -import EChartsHour from './echarts/EChartsHour' -import EChartsDate from './echarts/EChartsDate' -import EChartsTable from './echarts/EChartsTable' - -import EChartsRealWasteWater from './echarts/EChartsRealWasteWater' -import EChartsHourWasteWater from './echarts/EChartsHourWasteWater' -import EChartsDateWasteWater from './echarts/EChartsDateWasteWater' -import EChartsWasteWaterTable from './echarts/EChartsWasteWaterTable' - -export default { - name: 'WasteGasIndex', - components: { - EChartsHour, - EChartsDate, - ECharts, - EChartsTable, - EChartsRealWasteWater, - EChartsHourWasteWater, - EChartsDateWasteWater, - EChartsWasteWaterTable - }, - data () { - return { - currentTab: this.current(), - active: '0' - } - }, - // updated () { - // this.$refs.Echats.DrawEXHRealTimeDateChart() - // }, - methods: { - tabTaggle (taggleMenu, num) { - this.currentTab = taggleMenu - this.active = num - }, - current (currentTab) { - if (this.$attrs.value === 'feishui') { - currentTab = 'EChartsRealWasteWater' - } else { - currentTab = 'ECharts' - } - return currentTab - } - } -} - -</script> - -<style scoped lang="less"> -.win { - position: relative; - background:@background-color; - border: 0.8px solid #396d83; -} - -.border_corner { - z-index: 999; - position: absolute; - width: 10px; - height: 10px; - background: rgba(0, 0, 0, 0); - border: 1.5px solid #47d5ea; -} - -.border_corner_left_top { - top: 0; - left: 0; - border-right: none; - border-bottom: none; -} - -.border_corner_right_top { - top: 0; - right: 0; - border-left: none; - border-bottom: none; -} - -.border_corner_left_bottom { - bottom: 0; - left: 0; - border-right: none; - border-top: none; -} - -.border_corner_right_bottom { - bottom: 0; - right: 0; - border-left: none; - border-top: none; -} - -.tab { - display: flex; - border-bottom: 1px solid #396d83; - padding:0.02rem 0.04rem; -} - -.tab li { - background-color: #243a55; - line-height:0.15rem; - height: 0.15rem; - text-align: center; - border-radius: 5px; - margin-right: 0.04rem; - padding:0 0.04rem; -} -.tab li.hover, -.tab li:hover { - background-color: #0e639e; - color: #fff; - cursor: pointer; -} -.legend{ - position: absolute; - top:0.05rem; - right: 0; - display: flex; - justify-items: center; -} -.legend i { - display: block; - width: 0.2rem; - height: 0.09rem; - margin:0 0.1rem 0 0.05rem; - border-radius: 0.02rem; -} -.legend span{ - line-height: 0.09rem; - height: 0.09rem; - font-size: 0.06rem; -} - -</style> diff --git a/src/components/BaseNav/WasteGas/PublicTabs.vue b/src/components/BaseNav/WasteGas/PublicTabs.vue index a0df48a..d33623c 100644 --- a/src/components/BaseNav/WasteGas/PublicTabs.vue +++ b/src/components/BaseNav/WasteGas/PublicTabs.vue @@ -6,40 +6,53 @@ <div class="border_corner border_corner_right_bottom"></div> <div class="main"> <div class="main-matter"> - <div> - <ul> - <!-- <li>鍦烘墍鍚嶇О:{{ setSolidWaste.StoragePlaceName }}</li>--> - <!-- <li>璐瓨鑳藉姏:{{ setSolidWaste.StorageQty }}(鍚�)</li>--> - <!-- <li>鍓╀綑璐瓨鑳藉姏:{{ setSolidWaste.SurplusFloorArea }}(鍚�)</li>--> - <!-- <li>鍗犲湴闈㈢Н(銕�):{{ setSolidWaste.DesignFloorArea }}(銕�)</li>--> - <!-- <li>鏈�杩戣串瀛樻棩鏈�:{{ setSolidWaste.StorageDate }}</li>--> - <!-- <li class="lastli"></li>--> - <li v-for="(item,index) in tabList" :key="index"></li> - </ul> - </div> + <!-- <div>--> + <!-- <ul>--> + <!-- <li>鐩戞祴鐐瑰悕绉�:{{ setWasteGasdata.Name }}</li>--> + <!-- <li>鐢熶骇鍗曚綅:{{ setWasteGasdata.porltName }}</li>--> + <!-- <li>鎺掓斁绫诲瀷鍚嶇О:{{ setWasteGasdata.MonTypeName }}</li>--> + <!-- <li>鎺掓斁鍘诲悜:{{ setWasteGasdata.EmissDirecti }}</li>--> + <!-- <li>鎺у埗绾у埆鍚嶇О:{{ setWasteGasdata.ContrLevelShowName }}</li>--> + <!-- <li>鍐�/澶栨帓鍙�:{{ setWasteGasdata.OrOutPortName }}</li>--> + <!-- </ul>--> + <ul> + <li>鐩戞祴鐐瑰悕绉�:</li> + <li>鐢熶骇鍗曚綅:</li> + <li>鎺掓斁绫诲瀷鍚嶇О:</li> + <li>鎺掓斁鍘诲悜:</li> + <li>鎺у埗绾у埆鍚嶇О:</li> + <li>鍐�/澶栨帓鍙�:</li> + </ul> + <!-- </div>--> </div> </div> </div> </template> <script> + +import mapApi from '@/api/mapApi' + export default { name: 'GasTable', - props: ['setSolidWaste', 'value', 'setWasteGasdata', 'setWasteWaterdata'], data () { return { tabList: [] } }, + mounted () { + this.$nextTick(() => { + // this.getTabsData() + }) + }, methods: { - // async getTabsData () { - // // 鍩烘湰淇℃伅 鍜� 璇︾粏淇℃伅 灞曠ず鏁版嵁鎵�闇�鍙傛暟 - // const dataValue = { - // StoragePlaceId: e.layer.options.totransferData.StoragePlaceId - // } - // // 鍩烘湰淇℃伅 tabs - // const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue) - // } + async refsDataTabs (data) { + const dataValue = { + StoragePlaceId: data + } + const resultBasic = await mapApi.getWasteGasDetails(dataValue) + console.log(resultBasic) + } } } </script> diff --git a/src/components/BaseNav/WasteGas/WasteGasIndex.vue b/src/components/BaseNav/WasteGas/WasteGasIndex.vue new file mode 100644 index 0000000..cbf990a --- /dev/null +++ b/src/components/BaseNav/WasteGas/WasteGasIndex.vue @@ -0,0 +1,99 @@ +<template> + <public-sector> + <template v-slot:tabs> + <public-tabs ref='refsTabsData'></public-tabs> + </template> + <template v-slot:table> + <public-echarts ref="refsTableData"></public-echarts> + </template> + <template v-slot:video> + <public-video></public-video> + </template> + </public-sector> +</template> + +<script> + +import PublicTabs from '@components/BaseNav/WasteGas/PublicTabs' +import PublicEcharts from '@components/BaseNav/PublicBounced/common/PublicChart' +import PublicVideo from '@components/BaseNav/PublicVideo' +import PublicSector from '@components/BaseNav/PublicSector' + +export default { + name: 'WasteGasIndex', + props: ['storagePlaceId'], + components: { + PublicSector, + PublicTabs, + PublicEcharts, + PublicVideo + }, + mounted () { + this.$nextTick(() => { + this.refsData() + console.log(this.storagePlaceId) + }) + }, + data () { + return {} + }, + methods: { + refsData () { + const data = this.storagePlaceId + this.$refs.refsTabsData.refsDataTabs(data) + this.$refs.refsTableData.refsDataTable(data) + } + } +} +</script> + +<style lang="less" scoped> +.public-bounced { + z-index: 2000; + position: absolute; + top: 35%; + left: 20%; + + .public-bounced-title { + cursor: move; + height: 0.1rem; + padding: 10px 0; + display: flex; + align-items: center; + justify-content: space-between; + + span { + color: #f4f7ff; + margin: 0 15px; + font-size: 14px; + } + + i { + color: #C0C4CC; + margin: 0 15px; + font-size: 22px; + cursor: pointer; + } + + i:hover { + color: #00fff6; + } + } + + .public-bounced-content { + //padding: 0.1rem; + display: flex; + //align-items: center; + //justify-content: space-around; + + .public-bounced-content-left { + //width: 4.8rem; + } + + .public-bounced-content-right { + //width: 3rem; + margin-left: 0.1rem; + } + } +} +</style> diff --git a/src/components/BaseNav/WasteGas/flueGas.js b/src/components/BaseNav/WasteGas/flueGas.js deleted file mode 100644 index 0ab51b2..0000000 --- a/src/components/BaseNav/WasteGas/flueGas.js +++ /dev/null @@ -1,178 +0,0 @@ -import { FlueGas } from '@/api/request' -import defaultImg from '@assets/images/map-pages/basenav/flugas/green_airquality_2.png' -import Setting from '@assets/images/map-pages/basenav/flugas/green_airquality_3.png' -// 鍥剧墖 - -class AddGasHelper { - constructor (options) { - this.map = options.map - this.L = window.L - this.FlueGasLayerGroup = this.L.layerGroup().addTo(this.map) - this.FlueGasPopup = null - this.L.sgis = this.L.sgis || this.L - this.FlueGasMarkersLabels = [] - this.pulseHeighLightMarker = null - } - - // 鑾峰彇鏁版嵁 - requestData (data) { - FlueGas(data).then(res => { - console.log(res) - this.DrawFlueGasContent(res.Result.DataInfo) - }).catch(err => { - console.log(err) - }) - } - - // 鏍规嵁鑾峰彇鏁版嵁 鐢诲嚭 鍐呭 - DrawFlueGasContent (data) { - // 鍥炬爣鏍峰紡鎵╁睍 - var FlueGasIcon = this.PlueGasIcon() - - // //鍔犺浇鏁版嵁鍓嶅鏋滃瓨鍦ㄥ浘灞傜粍 閭d箞娓呴櫎鎺� - if (this.FlueGasLayerGroup) { - this.FlueGasLayerGroup.clearLayers() - } - for (let i = 0; i < data.length; i++) { - // 缁忕含搴� 浣嶇疆 - const positionX = data[i].Latitude - const positionY = data[i].Longitude - - // 鍒ゆ柇 缁忕含搴︿綅缃俊鎭槸鍚﹀瓨鍦� - // if (positionX != null && positionY != null) { - // 鐢ㄤ簬 鍒ゆ柇 => 鍒ゆ柇鏄惁灞曠ず鑴夊啿鏁堟灉 => temp(涓存椂) - const determineValueOne = data[i].LongDayWarning - var determineValueTwo = data[i].StorageQty - const positionArea = [positionX, positionY] - - // 鍥炬爣灞曠ず - var iconUrl = this.PlueGasIconUrl(determineValueOne, determineValueTwo, positionArea) - var Icon = new FlueGasIcon({ iconUrl: iconUrl }) - // var url = Icon.options.iconUrl - - const marker = this.L.marker([positionX, positionY], { icon: Icon }) - // const latlngs = positionArea[2] - // // 绾� - // var polyline = this.L.polyline(latlngs, { color: 'red' }).addTo(this.map) - // console.log(polyline) - // marker.bindPopup(() => { - // return this.FlueGasPopup.$el - // }, { - // className: 's-map-popup', - // minWidth: 1548, - // closeButton: true, - // autoClose: false - // }) - // 鍒掕繃鍑虹幇 灞曠ず鏁版嵁 - marker.bindTooltip(data[i].porltName, { - permanent: true, - offset: [0, -16], - direction: 'top', - className: '' - }) - // 鐐瑰嚮 浜嬩欢 - marker.on('click', (e) => { - try { - // console.log(e) - this.EffectOfPulse(e.target.getLatLng()) - this.FlueGasPopup.setData(data[i]) - // this.FlueGasPopup.setData(data[i]) - return this.FlueGasPopup.$el - } catch (error) { - console.log(error) - } - }) - // 璁剧疆鍐呭娣诲姞鍒板浘灞� - this.FlueGasLayerGroup.addLayer(marker) - // } - } - } - - // 鐐瑰嚮杩涜鐨� 鍐呭鐨勮缃� - SetPlueGasContent (config, containerPopup) { - this.FlueGasPopup = containerPopup - } - - // 鍥炬爣鏍峰紡鎵╁睍 => 鍏夊湀 鍥炬爣鑴夊啿 - PlueGasIcon () { - return this.L.Icon.extend({ - options: { - iconSize: [50, 50], - iconAnchor: [25, 25] - } - }) - } - - // 鏍规嵁绫诲瀷杩斿洖鍥剧墖鍔犺浇url - PlueGasIconUrl (determineValueOne, determineValueTwo, position) { - var EffectOfChange - if (determineValueOne === 1 || determineValueTwo === 1) { - EffectOfChange = defaultImg - this.EffectOfPulse(position, this.FlueGasMarkersLabels, this.pulseHeighLightMarker) - } else { - EffectOfChange = Setting - } - return EffectOfChange - } - - // 鑴夊啿鏁堟灉璁剧疆瀹炵幇 - EffectOfPulse (position, markers, layerGroup) { - // // 鍖哄垎鐩存帴鎵ц 鍜屽垽鏂墽琛岀殑涓嶅悓鍖哄埆 - var differentColor = '' - if (markers) { - differentColor = '#ff0000' - } else { - differentColor = '#98FB98' - } - // 鍧愭爣鏁版嵁锛氭姤璀︿紶杩涙潵鐨勬槸鏁扮粍 / 鐐瑰嚮浼犺繘鏉ョ殑鏄痮bject - var FinalPosition = position instanceof Array ? { - lat: position[0], - lng: position[1] - } : position - // 鎻掍欢 鏁堟灉瀹炵幇 - var pulsingIcon = this.L.icon.pulse({ - iconSize: [20, 20], - color: differentColor, - fillColor: '' - }) - if (markers) { - // markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon })) - // this.L.layerGroup(markers).addLayer(layerGroup) - } else { - var picGroupMarker = new this.L.FeatureGroup() - this.L.marker(FinalPosition, { icon: pulsingIcon }).addTo(picGroupMarker) - this.pulseHeighLightMarker = picGroupMarker.addTo(this.FlueGasLayerGroup) - this.PulseCountSetting() - } - } - - PulseCountSetting () { - var HeightLightTime = 5 - var PulseNumber = 5 - const pulseinterver = setInterval(() => { - if (PulseNumber > 0) { - PulseNumber-- - } else { - this.pulseClear(pulseinterver) - PulseNumber = HeightLightTime - } - }, 1000) - } - - // 娓呴櫎 鍥惧眰 - pulseClear (pulseinterver) { - clearInterval(pulseinterver) - pulseinterver = null - - if (this.PlueGasLayerGroup) { - // this.PlueGasLayerGroup.clearLayers() - } else { - this.PlueGasLayerGroup = this.L.layerGroup().addTo(this.map) - } - if ((this.pulseHeighLightMarker)) { - this.pulseHeighLightMarker.remove() - } - } -} - -export default AddGasHelper diff --git a/src/components/LayerController/logic/WasteGas.js b/src/components/LayerController/logic/WasteGas.js index 022588c..1915e1b 100644 --- a/src/components/LayerController/logic/WasteGas.js +++ b/src/components/LayerController/logic/WasteGas.js @@ -11,7 +11,8 @@ // const ImagBright = '/assets/images/map/exhaust/fq_bright_green.png' const mapApi = require('../../../api/mapApi').default -const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default +// const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default +const WasteGasIndex = require('../../BaseNav/WasteGas/WasteGasIndex').default // const WasteGasChats = require('./WasteGasChats').default module.exports = function () { /** @@ -58,37 +59,49 @@ this.clickListener = async (e) => { // console.log(e) this.animalService.pulseEffect(e.latlng) - const dataValue = { - StoragePlaceId: e.layer.options.test.StoragePlaceId - } - console.log(dataValue) - const GasOnlinedata = { - onLineMonEmissPointId: '23', - monItemId: '28,31', - beginTime: '2020-04-06 15:13:20', - endTime: '2020-04-07 15:13:20', - dataType: '1' - } - const GasManualData = { - companyId: '3900100145', - labMonPointId: '219', - beginTime: '2020-04-06 15:13:20', - endTime: ' 2020-04-07 15:13:20' - } - const ManualData = await mapApi.getWasteGasManualData(GasManualData) - console.log(ManualData) - const Mondata = await mapApi.getWasteGasMonData(GasOnlinedata) - // console.log(Mondata) - const result = await mapApi.getWasteGasDetails(dataValue) - // console.log(result.Result.DataInfo) - const PublicBounced = window.Vue.extend(publicBounced) - const instance = new PublicBounced() - // console.log(e.layer.options.test) - instance.$mount() - document.body.appendChild(instance.$el) - instance.setGasData(e.layer.options.test, result.Result.DataInfo, Mondata.Result.DataInfo, ManualData.Result.DataInfo, 'feiqi') + // const dataValue = { + // StoragePlaceId: e.layer.options.test.StoragePlaceId + // } + // console.log(e.layer.options.test.EpsGisMonPointId) + const title = e.layer.options.test.Name + // const GasOnlinedata = { + // onLineMonEmissPointId: '23', + // monItemId: '28,31', + // beginTime: '2020-04-06 15:13:20', + // endTime: '2020-04-07 15:13:20', + // dataType: '1' + // } + // const GasManualData = { + // companyId: '3900100145', + // labMonPointId: '219', + // beginTime: '2020-04-06 15:13:20', + // endTime: ' 2020-04-07 15:13:20' + // } + // const ManualData = await mapApi.getWasteGasManualData(GasManualData) + // console.log(ManualData) + // const Mondata = await mapApi.getWasteGasMonData(GasOnlinedata) + // // console.log(Mondata) + // const result = await mapApi.getWasteGasDetails(dataValue) + // // console.log(result.Result.DataInfo) + // const PublicBounced = window.Vue.extend(publicBounced) + // const instance = new PublicBounced() + // // console.log(e.layer.options.test) + // instance.$mount() + // document.body.appendChild(instance.$el) + // instance.setGasData(e.layer.options.test, result.Result.DataInfo, Mondata.Result.DataInfo, ManualData.Result.DataInfo, 'feiqi') + window.$layer.open({ + content: { + content: WasteGasIndex, // 缁勪欢 + parent: this, // 鐖剁粍浠� + data: { // 浼犻�掔殑鍙傛暟 + storagePlaceId: e.layer.options.test.StoragePlaceId + } + }, + title: title // 鏍囬 + }) + // console.log(e.layer.options.totransferData.EpsGisMonPointId) this.setPanTo(e.latlng, 150) - console.log(e.latlng) + // console.log(e.latlng) } // 涓嶅悓绫诲瀷鍥剧墖鍔犺浇 this.differentTypes = (ContrLevel) => { diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue index 89504b1..7eb985a 100644 --- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue +++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue @@ -1,90 +1,109 @@ <template> <div class="connectivity"> <el-row> - <el-button type="primary" size="mini">璧峰绠℃</el-button> - <el-button type="primary" size="mini">缁撴潫绠℃</el-button> - <el-button type="primary" size="mini">杩為�氭�у垎鏋�</el-button> - <el-button type="primary" size="mini">娓呴櫎</el-button> + <el-button type="primary" size="mini" @click="linkClickStart" title="鍦板浘涓婄偣鍑婚�夋嫨闇�瑕佽繘琛岃繛閫氬垎鏋愮殑绠℃">璧峰绠℃</el-button> + <el-button type="primary" size="mini" @click="linkClickEnd" title="鍦板浘涓婄偣鍑讳笌鎵�閫夌娈佃繛閫氱娈�">缁撴潫绠℃</el-button> + <el-button type="primary" size="mini" @click="linkQuery" title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">杩為�氭�у垎鏋�</el-button> + <el-button type="primary" size="mini" @click="linkClear" title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">娓呴櫎</el-button> </el-row> <el-card class="box-card"> - <span class="clearfix">璧峰绠℃</span> - <el-table - :data="tableData" - style="width: 100%"> - <el-table-column - prop="date" - label="绠$嚎绫诲瀷"> - </el-table-column> - <el-table-column - prop="name" - label="绠$嚎鍚嶇О"> - </el-table-column> - <el-table-column - prop="province" - label="璧风偣缂栧彿"> - </el-table-column> - <el-table-column - prop="city" - label="缁堢偣缂栧彿"> - </el-table-column> - <el-table-column - class-name="fixed-table" - fixed="right" - label="鎿嶄綔"> - </el-table-column> - </el-table> - <span class="clearfix">缁撴潫绠℃</span> - <el-table - :data="tableData" - style="width: 100%"> - <el-table-column - prop="date" - label="绠$嚎绫诲瀷"> - </el-table-column> - <el-table-column - prop="name" - label="绠$嚎鍚嶇О"> - </el-table-column> - <el-table-column - prop="province" - label="璧风偣缂栧彿"> - </el-table-column> - <el-table-column - prop="city" - label="缁堢偣缂栧彿"> - </el-table-column> - <el-table-column - class-name="fixed-table" - fixed="right" - label="鎿嶄綔"> - </el-table-column> - </el-table> - <span class="clearfix">鍒嗘瀽缁撴灉</span> - <el-table - :data="tableData" - style="width: 100%"> - <el-table-column - prop="date" - label="绠$嚎绫诲瀷"> - </el-table-column> - <el-table-column - prop="name" - label="绠$嚎鍚嶇О"> - </el-table-column> - <el-table-column - prop="province" - label="璧风偣缂栧彿"> - </el-table-column> - <el-table-column - prop="city" - label="缁堢偣缂栧彿"> - </el-table-column> - <el-table-column - class-name="fixed-table" - fixed="right" - label="鎿嶄綔"> - </el-table-column> - </el-table> + <el-scrollbar style="height:2rem"> + <span class="clearfix">璧峰绠℃</span> + <el-table + ref="singleTable" + highlight-current-row + :data="tableData" + max-height="200" + style="width: 100%" size="mini"> + <el-table-column + prop="lineloopna" + label="绠$嚎绫诲瀷" + > + </el-table-column> + <el-table-column + sortable + width="100" + prop="pipecode" + label="绠$嚎鍚嶇О" + > + </el-table-column> + <el-table-column + sortable + width="100" + prop="startpoint" + label="璧风偣缂栧彿" + > + </el-table-column> + <el-table-column + sortable + width="100" + prop="endpointnu" + label="缁堢偣缂栧彿" + > + </el-table-column> + <el-table-column + class-name="fixed-tablea" + fixed="right" + 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="clearfix">缁撴潫绠℃</span> + <el-table + :data="tableData" + style="width: 100%"> + <el-table-column + prop="date" + label="绠$嚎绫诲瀷"> + </el-table-column> + <el-table-column + prop="name" + label="绠$嚎鍚嶇О"> + </el-table-column> + <el-table-column + prop="province" + label="璧风偣缂栧彿"> + </el-table-column> + <el-table-column + prop="city" + label="缁堢偣缂栧彿"> + </el-table-column> + <el-table-column + class-name="fixed-table" + fixed="right" + label="鎿嶄綔"> + </el-table-column> + </el-table> + <span class="clearfix">鍒嗘瀽缁撴灉</span> + <el-table + :data="tableData" + style="width: 100%"> + <el-table-column + prop="date" + label="绠$嚎绫诲瀷"> + </el-table-column> + <el-table-column + prop="name" + label="绠$嚎鍚嶇О"> + </el-table-column> + <el-table-column + prop="province" + label="璧风偣缂栧彿"> + </el-table-column> + <el-table-column + prop="city" + label="缁堢偣缂栧彿"> + </el-table-column> + <el-table-column + class-name="fixed-table" + fixed="right" + label="鎿嶄綔"> + </el-table-column> + </el-table> + </el-scrollbar> </el-card> </div> </template> @@ -94,11 +113,45 @@ name: 'Connectivity', data () { return { + // 杩為�氭�� + linkType: 1, // 1 杩為�氭�ц捣濮嬬娈� 0 杩為�氭�х粨鏉熺娈� 鐢ㄦ潵鍒ゆ柇鏄偣鍑讳簡璧峰 杩樻槸缁撴潫绠℃ tableData: [] + } + }, + methods: { + // 鍦板浘鐐瑰嚮璧峰绠℃ + linkClickStart () { + console.log('鍦板浘鐐瑰嚮璧峰绠℃') + this.linkType = 1 + // this.selectPipeLine() + }, + // 鍦板浘鐐瑰嚮缁撴潫绠℃ + linkClickEnd () { + console.log('鍦板浘鐐瑰嚮缁撴潫绠℃') + this.linkType = 0 + // this.selectPipeLine() + }, + // 杩為�氭�у垎鏋� + linkQuery () { + console.log('鐐瑰嚮杩為�氭�у垎鏋�') + }, + // 娓呴櫎鍔熻兘 + linkClear () { + console.log('鐐瑰嚮娓呴櫎') + }, + // 閫夋嫨璧峰绠℃ + linkSelectStart () { + console.log('閫夋嫨璧峰绠℃') } } } </script> <style lang="less" scoped> +/deep/ .fixed-tablea { + background: rgba(0, 16, 30, 1) !important; +} +/deep/ .el-table__fixed-right::before { + background: none; +} </style> diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js new file mode 100644 index 0000000..63d8e26 --- /dev/null +++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js @@ -0,0 +1,427 @@ +// export default { +// handleClick (tab, event) { +// console.log(tab, event) +// this.clearLinkPipe() +// this.clearLX() +// this.linkClear() +// this.jdmClear() +// this.bgFm = [] +// this.bgPipeLine = [] +// this.tableData = [] +// this.tableDataLiuxiang = [] +// this.tableDataLinkStart = [] +// this.tableDataLinkEnd = [] +// this.tableDataLinkResult = [] +// }, +// linkClickStart () { +// console.log('鍦板浘鐐瑰嚮璧峰绠℃') +// this.linkType = 1 +// this.selectPipeLine() +// }, +// linkClickEnd () { +// console.log('鍦板浘鐐瑰嚮缁撴潫绠℃') +// this.linkType = 0 +// this.selectPipeLine() +// }, +// linkSelectStart (e) { +// console.log('閫夋嫨璧峰绠℃') +// console.log(e) +// this.$refs.singleTable.setCurrentRow(e) +// this.currentSelectStart = e +// if (this.currentSelectStartLine != null) { +// this.currentSelectStartLine.remove() +// this.currentSelectStartLine = null +// } +// const geom = JSON.parse(e.geomText) +// this.currentSelectStartLine = L.geoJSON(geom, { +// style: function (feature) { +// return { color: 'rgba(0,255,0,.6)' } +// } +// }).addTo(this.map) +// this.map.panInsideBounds(this.currentSelectStartLine.getBounds()) +// }, +// linkSelectEnd (e) { +// console.log('閫夋嫨缁撴潫绠℃') +// console.log(e) +// this.currentSelectEnd = e +// +// if (this.currentSelectEndLine != null) { +// this.currentSelectEndLine.remove() +// this.currentSelectEndLine = null +// } +// +// const geom = JSON.parse(e.geomText) +// this.currentSelectEndLine = L.geoJSON(geom, { +// style: function (feature) { +// return { color: 'rgba(200,0,200,.6)' } +// } +// }).addTo(this.map) +// this.map.panInsideBounds(this.currentSelectEndLine.getBounds()) +// }, +// linkResultSelect (e) { +// console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�') +// console.log(e) +// +// const geom = JSON.parse(e.geomText) +// if (this.currentSelectResultLine != null) { +// this.currentSelectResultLine.remove() +// this.currentSelectResultLine = null +// } +// this.currentSelectResultLine = L.geoJSON(geom, { +// style: function (feature) { +// return { +// color: 'rgba(255,0,0,.6)', +// weight: 6 +// } +// } +// }).addTo(this.map) +// this.map.panInsideBounds(this.currentSelectResultLine.getBounds()) +// }, +// // 杩為�氭�ф煡璇� +// async linkQuery () { +// this.tableDataLinkResult = [] +// if (this.linkPipeline.length > 1) { +// this.linkPipeline.forEach((itm) => { +// itm.remove() +// }) +// this.linkPipeline = [] +// } +// if (this.currentSelectStart === null || this.currentSelectEnd === null) { +// this.$message('璇烽�夋嫨璧峰绠℃鍜岀粨鏉熺娈�') +// return +// } +// const param = { +// startLineID: this.currentSelectStart.id, +// endLineID: this.currentSelectEnd.id +// } +// +// const res = await api.findConnectedPipelines(param) +// +// if (res.data.length === 0) { +// this.$message('娌℃湁鎵惧埌杩為�氱殑绠℃') +// this.currentLinkIsTrue = '涓嶈繛閫�' +// return +// } +// this.tableDataLinkResult = res.data +// this.currentLinkIsTrue = '杩為��' +// const linkPipe = [] +// res.data.forEach((itm, idx) => { +// const geom = JSON.parse(itm.geomText) +// const points = [] +// geom.coordinates.forEach((it, id) => { +// points.push(it.reverse()) +// }) +// +// linkPipe.push(points) +// }) +// +// linkPipe.forEach((itm, idx) => { +// const param1 = { +// points: itm, +// option: { +// dashArray: '15 15', +// dashSpeed: -30, +// color: '#ffff00' +// } +// } +// const line = main.createFlowLine(param1) +// this.linkPipeline.push(line) +// }) +// }, +// +// linkClear () { +// if (this.currentSelectStartLine != null) { +// this.currentSelectStartLine.remove() +// this.currentSelectStartLine = null +// } +// if (this.currentSelectEndLine != null) { +// this.currentSelectEndLine.remove() +// this.currentSelectEndLine = null +// } +// if (this.currentSelectResultLine != null) { +// this.currentSelectResultLine.remove() +// this.currentSelectResultLine = null +// } +// if (this.bgMarker != null) { +// this.bgMarker.remove() +// this.bgMarker = null +// } +// }, +// lxResultSelect () { +// console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�') +// console.log(e) +// +// const geom = JSON.parse(e.geomText) +// if (this.currentSelectResultLine != null) { +// this.currentSelectResultLine.remove() +// this.currentSelectResultLine = null +// } +// this.currentSelectResultLine = L.geoJSON(geom, { +// style: function (feature) { +// return { color: 'rgba(0,250,255,.6)' } +// } +// }).addTo(this.map) +// this.map.panInsideBounds(this.currentSelectResultLine.getBounds()) +// }, +// async lxQuery (e) { +// this.clearLinkPipe() +// const param = { +// lineNodeID: e.startpoint +// } +// const res = await api.findFlowDirection(param) +// +// this.lxTableDataResult = res.data +// const linkPipe = [] +// res.data.forEach((itm, idx) => { +// const geom = JSON.parse(itm.geomText) +// const points = [] +// geom.coordinates.forEach((it, id) => { +// points.push(it.reverse()) +// }) +// +// linkPipe.push(points) +// }) +// +// linkPipe.forEach((itm, idx) => { +// const param1 = { +// points: itm, +// option: { +// dashArray: '15 15', +// dashSpeed: -30, +// color: '#ffff00' +// } +// } +// const line = main.createFlowLine(param1) +// this.linkPipeline.push(line) +// }) +// }, +// +// bgClick () { +// this.selectPipeLine() +// }, +// async bgSelect (e) { +// console.log('閫夋嫨鐖嗙绠℃') +// console.log(e) +// this.bgFm = [] +// if (this.bgMarker != null) { +// this.bgMarker.remove() +// this.bgMarker = null +// } +// +// if (this.currentSelectEndLine != null) { +// this.currentSelectEndLine.remove() +// this.currentSelectEndLine = null +// } +// this.clearLinkPipe() +// const geom = JSON.parse(e.geomText) +// this.currentSelectEndLine = L.geoJSON(geom, { +// style: function (feature) { +// return { color: 'rgba(200,0,200,.6)' } +// } +// }).addTo(this.map) +// this.map.panInsideBounds(this.currentSelectEndLine.getBounds()) +// +// const param = { +// lineID: e.id +// } +// const res = await api.findLeakages(param) +// console.log(res) +// +// const len = res.data.length +// if (len === 0) { +// this.$message('鏈壘鍒伴渶瑕佸叧闂殑闃�闂�') +// +// return +// } +// res.data.reverse() +// this.bgFm = res.data +// +// this.bgPoint = res.data[0].startControlPoint +// +// const point = JSON.parse(this.bgPoint.geomText) +// +// const p = [point.coordinates[1], point.coordinates[0]] +// +// this.bgMarker = main.createFlowMarker(p) +// this.bgMarker.bindTooltip(this.bgPoint.pointnumbe) +// this.bgMarker.addTo(this.map) +// this.map.flyTo(p) +// +// const linkPipe = [] +// res.data.forEach((itm, idx) => { +// const geom = JSON.parse(itm.geomText) +// const points = [] +// geom.coordinates.forEach((it, id) => { +// points.push(it.reverse()) +// }) +// +// linkPipe.push(points) +// }) +// +// linkPipe.forEach((itm, idx) => { +// const param1 = { +// points: itm, +// option: { +// dashArray: '15 15', +// dashSpeed: -30, +// color: '#ffff00' +// } +// } +// const line = main.createFlowLine(param1) +// this.linkPipeline.push(line) +// }) +// }, +// bgFmClick (e) { +// console.log('鐐瑰嚮褰卞搷鐨勯榾闂�') +// console.log(e) +// const point = [e.data[0][0], e.data[0][1]] +// const marker = main.createFlowMarker(point) +// marker.addTo(this.map) +// this.map.flyTo(point, 16) +// }, +// // 娴佸悜鍦板浘涓婄偣鍑� +// selectPipeLine () { +// this.map.on('click', this.selectClick) +// }, +// // 鍦板浘涓婄偣鍑诲洖璋� +// selectClick (e) { +// this.map.off('click', this.selectClick) +// const point = [e.latlng.lng, e.latlng.lat] +// console.log(point) +// this.getPipeLine(point) +// }, +// +// // 娴佸悜鏁版嵁璇锋眰 +// async getPipeLine (point) { +// const param = { +// x: point[0], +// y: point[1], +// radius: 3 +// } +// +// const res = await api.getPipeline(param) +// // 3 娴佸悜 +// +// if (this.activeName === 'first') { +// if (this.linkType) { +// 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') { +// +// } +// +// console.log(res) +// }, +// // 娴佸悜-绠$嚎閫夋嫨 +// selectRowLiuXiang (e) { +// // 閫夋嫨瑕佹樉绀虹殑娴佸悜绾� +// console.log('閫夋嫨瑕佹樉绀虹殑娴佸悜绾�') +// console.log(e) +// }, +// lxHandleClick (e) { +// console.log('姝f祦鍚戞樉绀�') +// console.log(e) +// +// this.clearLX() +// const param = { +// points: e.data, +// option: { +// dashArray: '15 15', +// dashSpeed: -30 +// } +// } +// this.flowPipeLine = main.createFlowLine(param) +// }, +// clearLinkPipe () { +// if (this.linkPipeline.length > 0) { +// this.linkPipeline.forEach((itm, idx) => { +// itm.remove() +// }) +// } +// this.linkPipeline = [] +// }, +// clearLX () { +// if (this.flowPipeLine != null) { +// this.flowPipeLine.remove() +// this.flowPipeLine = null +// } +// }, +// lxHandleClick2 (e) { +// console.log('閫嗘祦鍚戞樉绀�') +// console.log(e) +// if (this.flowPipeLine != null) { +// this.flowPipeLine.remove() +// this.flowPipeLine = null +// } +// const param = { +// points: e.data, +// option: { +// dashArray: '15 15', +// dashSpeed: 30 +// } +// } +// this.flowPipeLine = main.createFlowLine(param) +// }, +// // 妯柇闈㈡暟鎹姹� +// async getHdmPoint (line) { +// console.log('妯柇闈㈢殑缁樺埗绾�') +// console.table(line) +// this.hdmParam = { +// x1: line[0].lng, +// y1: line[0].lat, +// x2: line[1].lng, +// y2: line[1].lat +// } +// }, +// // 妯柇闈㈤�夋嫨鍚� 鍥捐〃灞曠ず +// async selectRow (e) { +// console.log(e) +// // 3. 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁锛屾樉绀哄浘琛� +// +// const option = { +// xAxis: { +// type: 'category', +// data: ['浜�1', '浜�2', '浜�3', '浜�4', '浜�5', '浜�6', '浜�7'] +// }, +// yAxis: { +// type: 'value' +// }, +// series: [{ +// data: [820, 932, 901, 934, 1290, 1330, 1320], +// type: 'line' +// }] +// } +// +// this.myChartShow = true +// this.myChart.setOption(option) +// }, +// drawLine () { +// console.log('drawLine') +// if (this.measure === null) { +// this.measure = new DrawLine(this.map) +// } +// this.measure.destory() +// this.measure.init() +// }, +// async jdmQuery () { +// if (this.hdmParam == null) { +// this.$message('璇峰厛鍦ㄥ湴鍥句笂缁樺埗鎴柇绾�') +// return +// } +// const res = await api.getCrossSection(this.hdmParam) +// console.log(res) +// // debugger +// }, +// jdmClear () { +// this.hdmParam = null +// if (this.measure != null) { +// this.measure.destory() +// } +// } +// } diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue index f973a19..c1deb22 100644 --- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue +++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue @@ -2,72 +2,89 @@ <div class="connectivity"> <el-row> <span class="tube-span">鐖嗙(鐩稿叧寮�鍏�)</span> - <el-button type="primary" size="mini">閫夋嫨绠$嚎</el-button> - <el-button type="primary" size="mini">娓呴櫎</el-button> + <el-button type="primary" size="mini" @click="bgClick">閫夋嫨绠$嚎</el-button> + <el-button type="primary" size="mini" @click="handleClick('czp')">娓呴櫎</el-button> </el-row> <el-card class="box-card"> - <span class="clearfix">鍙戠敓鐖嗚鐨勭娈�</span> - <el-table - :data="tableData" - style="width: 100%"> - <el-table-column - prop="date" - label="绠$嚎绫诲瀷"> - </el-table-column> - <el-table-column - prop="name" - label="绠$嚎鍚嶇О"> - </el-table-column> - <el-table-column - prop="province" - label="璧风偣缂栧彿"> - </el-table-column> - <el-table-column - prop="city" - label="缁堢偣缂栧彿"> - </el-table-column> - <el-table-column - class-name="fixed-table" - fixed="right" - label="鎿嶄綔"> - </el-table-column> - </el-table> - <span class="clearfix">闇�瑕佸叧闂殑闃�闂�</span> - <el-table - :data="tableData" - style="width: 100%"> - <el-table-column - prop="date" - label="绠$嚎绫诲瀷"> - </el-table-column> - <el-table-column - prop="name" - label="绠$嚎鍚嶇О"> - </el-table-column> - <el-table-column - prop="province" - label="璧风偣缂栧彿"> - </el-table-column> - <el-table-column - prop="city" - label="缁堢偣缂栧彿"> - </el-table-column> - <el-table-column - class-name="fixed-table" - fixed="right" - label="鎿嶄綔"> - </el-table-column> - </el-table> + <el-scrollbar style="height:350px"> + <span class="clearfix">鍙戠敓鐖嗚鐨勭娈�</span> + <el-table + :data="tableData" + style="width: 100%"> + <el-table-column + prop="date" + label="绠$嚎绫诲瀷"> + </el-table-column> + <el-table-column + prop="name" + label="绠$嚎鍚嶇О"> + </el-table-column> + <el-table-column + prop="province" + label="璧风偣缂栧彿"> + </el-table-column> + <el-table-column + prop="city" + label="缁堢偣缂栧彿"> + </el-table-column> + <el-table-column + class-name="fixed-table" + fixed="right" + label="鎿嶄綔"> + </el-table-column> + </el-table> + <span class="clearfix">闇�瑕佸叧闂殑闃�闂�</span> + <el-table + :data="tableData" + style="width: 100%"> + <el-table-column + prop="date" + label="绠$嚎绫诲瀷"> + </el-table-column> + <el-table-column + prop="name" + label="绠$嚎鍚嶇О"> + </el-table-column> + <el-table-column + prop="province" + label="璧风偣缂栧彿"> + </el-table-column> + <el-table-column + prop="city" + label="缁堢偣缂栧彿"> + </el-table-column> + <el-table-column + class-name="fixed-table" + fixed="right" + label="鎿嶄綔"> + </el-table-column> + </el-table> + </el-scrollbar> </el-card> </div> </template> <script> + +// import PublicWay from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay' + export default { name: 'Tube', data () { return { - tableData: [] + tableData: [], + tube: [] + } + }, + methods: { + // 閫夋寚绠$嚎 + bgClick () { + this.selectPipeLine() + }, + // 娓呮缁樺埗 + handleClick (val) { + console.log(val) + // PublicWay.handleClick(val) } } } diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue index 3d3d000..6e9c12e 100644 --- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue +++ b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue @@ -23,8 +23,10 @@ import Flow from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow' import CrossSectional from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional' +// import PublicWay from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay' + export default { - name: 'SewersFirstTab', + name: 'SewersAnalysis', components: { Connectivity, Tube, @@ -39,6 +41,7 @@ methods: { handleClick (tab, event) { console.log(tab, event) + // PublicWay.handleClick(tab, event) } } } -- Gitblit v1.8.0