From eb6674449920c5452811feee3d82f6c6b965089d Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期二, 30 三月 2021 17:05:04 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/develop' into develop
---
src/components/BaseNav/SolidWaste/SolidWaste.js | 27 ++
/dev/null | 88 -----------
src/api/request.js | 2
src/components/BaseNav/SolidWaste/directive.js | 73 ---------
src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue | 67 +++++++
src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue | 53 ++++++
src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue | 20 +-
src/components/BaseNav/PublicBounced/GasComponents/GasTab.vue | 123 +++++++++++++++
src/components/BaseNav/PublicBounced/PublicBounced.vue | 18 +
9 files changed, 282 insertions(+), 189 deletions(-)
diff --git a/src/api/request.js b/src/api/request.js
index 38364ca..9f9091d 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -21,4 +21,4 @@
'Content-Type': 'application/json'
}
})
-}
+}
\ No newline at end of file
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue
index d6e3909..9084a18 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue
@@ -1,5 +1,17 @@
<template>
- <div id="echarts" style="width:300px;height:222px" ref="main"></div>
+ <!-- 妗� -->
+ <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>
+ <div class="main">
+ <div class="main-echarts">
+ <div id="echarts" style="width:100%;height:100%" ref="main"></div>
+ </div>
+ </div>
+ </div>
</template>
<script>
@@ -16,9 +28,9 @@
tooltip: {
trigger: 'axis'
},
- legend: {
- data: ['閭欢钀ラ攢', '鑱旂洘骞垮憡', '瑙嗛骞垮憡', '鐩存帴璁块棶', '鎼滅储寮曟搸']
- },
+ // legend: {
+ // data: ['閭欢钀ラ攢', '鑱旂洘骞垮憡', '瑙嗛骞垮憡', '鐩存帴璁块棶', '鎼滅储寮曟搸']
+ // },
grid: {
left: '3%',
right: '4%',
@@ -103,5 +115,50 @@
</script>
<style scoped lang="less">
-
+.win {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ //display: inline-block;
+ background-color: rgba(33, 41, 69,0.9);
+}
+.border_corner{
+ z-index: 2500;
+ 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;
+}
+.main {
+ width: 100%;
+ height: 100%;
+ .main-echarts{
+ border: 1px solid #396d83;
+ }
+}
</style>
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasTab.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasTab.vue
new file mode 100644
index 0000000..e05f59f
--- /dev/null
+++ b/src/components/BaseNav/PublicBounced/GasComponents/GasTab.vue
@@ -0,0 +1,123 @@
+<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>
+ <div class="main">
+ <div class="main-matter">
+ <el-row type="flex" class="row-bg row-item-one" justify="space-around">
+ <el-col :span="12">鐩戞祴鐐瑰悕绉�:{{ displayContent.Name }}</el-col>
+ <el-col :span="12">鐢熶骇鍗曚綅:{{ displayContent.DeptSname }}</el-col>
+ <el-col :span="12">鎺掓斁绫诲瀷鍔犺浇:{{ displayContent.EmissTypeName }}</el-col>
+ </el-row>
+ <el-row type="flex" class="row-bg" justify="space-around">
+ <el-col :span="12">鎺掓斁鍘诲悜:{{ displayContent.EmissTypeDirectName }}</el-col>
+ <el-col :span="12">鎺у埗绾у埆鍚嶇О:{{ displayContent.ContrLevelShowName }}</el-col>
+ <el-col :span="12">鍐�/澶栨帓鍙�:{{ displayContent.OrOutPortName }}</el-col>
+ </el-row>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'GasTable',
+ props: ['displayContent'],
+ data () {
+ return {}
+ }
+}
+</script>
+
+<style scoped lang="less">
+
+.win {
+ position: relative;
+ //display: inline-block;
+ margin-bottom: 13px;
+ background-color: rgba(33, 41, 69,0.9);
+}
+.main {
+ width: 100%;
+ height: 100%;
+ .main-matter{
+ font-size: 13px;
+ padding: 9px 7px;
+ font-weight: normal;
+ border: 1px solid #396d83;
+ .row-item-one{
+ margin-bottom: 7px;
+ }
+ .el-row {
+ width: 100%;
+ color: #00d0f9;
+ display: flex;
+ font-size: 12px!important;
+ .el-col{
+ flex: 1;
+ width: 100%;
+ background-color: #243a55;;
+ text-align: center;
+ line-height: 28px;
+ margin-left: 6px;
+ border-radius: 4px;
+ &:nth-child(1){
+ margin-left:0;
+ }
+ }
+ }
+ }
+}
+.border_corner{
+ z-index: 2500;
+ 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;
+}
+//.el-row {
+// width: 100%;
+// color: #00d0f9;
+// .el-col{
+// width: 180px;
+// height: 28px;
+// background-color: #243a55;;
+// text-align: center;
+// line-height: 28px;
+// margin-left: 6px;
+// border-radius: 4px;
+// &:nth-child(1){
+// margin-left:0;
+// }
+// }
+//}
+</style>
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue
deleted file mode 100644
index d309124..0000000
--- a/src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue
+++ /dev/null
@@ -1,88 +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>
- <div class="main">
- <el-row type="flex" class="row-bg" justify="space-around">
- <el-col :span="12">鐩戞祴鐐瑰悕绉�:{{ displayContent.Name }}</el-col>
- <el-col :span="12">鐢熶骇鍗曚綅:{{ displayContent.DeptSname }}</el-col>
- <el-col :span="12">鎺掓斁绫诲瀷鍔犺浇:{{ displayContent.EmissTypeName }}</el-col>
- </el-row>
- <el-row type="flex" class="row-bg" justify="space-around">
- <el-col :span="12">鎺掓斁鍘诲悜:{{ displayContent.EmissTypeDirectName }}</el-col>
- <el-col :span="12">鎺у埗绾у埆鍚嶇О:{{ displayContent.ContrLevelShowName }}</el-col>
- <el-col :span="12">鍐�/澶栨帓鍙�:{{ displayContent.OrOutPortName }}</el-col>
- </el-row>
- </div>
- </div>
-</template>
-
-<script>
-export default {
- name: 'GasTable',
- props: ['displayContent'],
- data () {
- return {}
- }
-}
-</script>
-
-<style scoped lang="less">
-
-.win {
- position: relative;
- display: inline-block;
- //border: 1px solid #396d83;
-}
-.main {
- width: 100%;
- height: 100%;
-}
-.border_corner{
- z-index: 2500;
- position: absolute;
- width: 14px;
- height: 14px;
- background: rgba(0,0,0,0);
- border: 2px 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-bottom-left-radius: 4px;
-}
-.border_corner_right_bottom{
- bottom: 0;
- right: 0;
- border-left: none;
- border-top: none;
-}
-.el-row {
- color: #00d0f9;
- .el-col{
- width: 200px;
- height: 28px;
- background-color: #243a55;;
- text-align: center;
- line-height: 28px;
- }
-}
-</style>
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue
index eb83145..fc152ab 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue
@@ -1,12 +1,12 @@
<template>
- <div class="win">
+ <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>
<div class="main">
- <div>
+ <div class="main-video">
<video width="100%" height="100%" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
@@ -22,17 +22,22 @@
}
</script>
-<style scoped>
+<style scoped lang="less">
.win {
- width: 100%;
+ /*width: 100%;*/
/*height: 100%;*/
position: relative;
- display: inline-block;
-//border: 1px solid #396d83;
+ //display: inline-block;
+ background-color: rgba(33, 41, 69,0.9);
+/*//border: 1px solid #396d83;*/
}
.main {
width: 100%;
height: 100%;
+ .main-video {
+ padding: 7px;
+ border: 1px solid #396d83;
+ }
}
.border_corner{
z-index: 2500;
@@ -40,7 +45,7 @@
width: 14px;
height: 14px;
background: rgba(0,0,0,0);
- border: 2px solid #47d5ea;
+ border: 1.5px solid #47d5ea;
}
.border_corner_left_top{
top: 0;
@@ -59,7 +64,6 @@
left: 0;
border-right: none;
border-top: none;
- border-bottom-left-radius: 4px;
}
.border_corner_right_bottom{
bottom: 0;
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue
new file mode 100644
index 0000000..2c878b8
--- /dev/null
+++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue
@@ -0,0 +1,53 @@
+<template>
+ <div class="public-table">
+ <table border="1">
+ <tr>
+ <th>111</th>
+ <th>111</th>
+ <th>111</th>
+ <th>111</th>
+ <th>111</th>
+ <th>111</th>
+ </tr>
+ <tr>
+ <td>4444444444</td>
+ <td>4444444444</td>
+ <td>4444444444</td>
+ <td>4444444444</td>
+ <td>4444444444</td>
+ <td>4444444444</td>
+ </tr>
+ </table>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'PublicTable',
+ data () {
+ return {
+ tableData: [{
+ date: '2016-05-02',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
+ }, {
+ date: '2016-05-04',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�'
+ }, {
+ date: '2016-05-01',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�'
+ }, {
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
+ }]
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue
index eddeb78..275b86e 100644
--- a/src/components/BaseNav/PublicBounced/PublicBounced.vue
+++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue
@@ -6,8 +6,9 @@
</div>
<div class="public-bounced-content">
<div class="public-bounced-content-left">
- <GasTable :displayContent="displayContent"></GasTable>
- <GasECharts></GasECharts>
+ <GasTab :displayContent="displayContent"></GasTab>
+ <PublicTable v-if="value === 'gufei'"></PublicTable>
+ <GasECharts v-else></GasECharts>
</div>
<div class="public-bounced-content-right">
<GasVideo></GasVideo>
@@ -19,14 +20,16 @@
<script>
import '@/components/BaseNav/SolidWaste/directive'
-import GasTable from '@components/BaseNav/PublicBounced/GasComponents/GasTable'
+import GasTab from '@components/BaseNav/PublicBounced/GasComponents/GasTab'
+import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable'
import GasECharts from '@components/BaseNav/PublicBounced/GasComponents/GasECharts'
import GasVideo from '@components/BaseNav/PublicBounced/GasComponents/GasVideo'
export default {
name: 'PublicBounced',
components: {
- GasTable,
+ GasTab,
+ PublicTable,
GasECharts,
GasVideo
},
@@ -37,9 +40,10 @@
}
},
methods: {
- setData (data) {
+ setData (data, value) {
this.displayContent = data
this.flag = true
+ this.value = value
},
closePopup () {
this.flag = false
@@ -51,7 +55,7 @@
<style lang="less" scoped>
.public-bounced {
z-index: 999;
- position: fixed;
+ position: absolute;
top: 50%;
left: 50%;
background-color: #002432;
@@ -90,4 +94,4 @@
}
}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/BaseNav/SolidWaste/SolidWaste.js b/src/components/BaseNav/SolidWaste/SolidWaste.js
index 54107a5..6df5e3e 100644
--- a/src/components/BaseNav/SolidWaste/SolidWaste.js
+++ b/src/components/BaseNav/SolidWaste/SolidWaste.js
@@ -52,20 +52,24 @@
// var url = Icon.options.iconUrl
const marker = this.L.marker([positionX, positionY], { icon: Icon })
-
// 鍒掕繃鍑虹幇 灞曠ず鏁版嵁
marker.bindTooltip(data[i].Name, {
permanent: true,
- offset: [0, 16],
- direction: 'bottom',
+ offset: [0, -16],
+ direction: 'top',
className: ''
})
// 鐐瑰嚮 浜嬩欢
marker.on('click', (e) => {
try {
- console.log(e)
+ // console.log(e)
+ // console.log(this.map.getCenter())
+ // console.log(this.map.setCenter([e.target.getLatLng().lat, e.target.getLatLng().lng]))
+ // this.map.flyTo([e.target.getLatLng().lat, e.target.getLatLng().lng])
+ // this.map.panTo([e.target.getLatLng().lat, e.target.getLatLng().lng], 100)
+ this.setPanTo(e.target.getLatLng(), 30)
this.EffectOfPulse(e.target.getLatLng())
- this.SolidWastePopup.setData(data[i])
+ this.SolidWastePopup.setData(data[i], 'gufei')
return this.SolidWastePopup.$el
} catch (error) {
console.log(error)
@@ -75,6 +79,16 @@
this.SolidWasteLayerGroup.addLayer(marker)
}
}
+ }
+
+ // panTo
+ setPanTo (pos, value) {
+ var position = pos
+ position = this.map.latLngToLayerPoint(position)
+ position.y += value
+ position = this.map.layerPointToLatLng(position)
+ this.map.setView(position)
+ // this.map.flyTo(position)
}
// 鍥哄簾鐐瑰嚮杩涜鐨� 鍐呭鐨勮缃�
@@ -106,7 +120,7 @@
// 鑴夊啿鏁堟灉璁剧疆瀹炵幇
EffectOfPulse (position, markers, layerGroup) {
- // // 鍖哄垎鐩存帴鎵ц 鍜屽垽鏂墽琛岀殑涓嶅悓鍖哄埆
+ // 鍖哄垎鐩存帴鎵ц 鍜屽垽鏂墽琛岀殑涓嶅悓鍖哄埆
var differentColor = ''
if (markers) {
differentColor = '#ff0000'
@@ -140,7 +154,6 @@
var HeightLightTime = 5
var PulseNumber = 5
const pulseinterver = setInterval((e) => {
- console.log(e)
if (PulseNumber > 0) {
PulseNumber--
} else {
diff --git a/src/components/BaseNav/SolidWaste/directive.js b/src/components/BaseNav/SolidWaste/directive.js
index 773a4a8..d51b377 100644
--- a/src/components/BaseNav/SolidWaste/directive.js
+++ b/src/components/BaseNav/SolidWaste/directive.js
@@ -57,76 +57,3 @@
delete el._checkPosition
}
})
-
-// v-dialogDrag: 寮圭獥鎷栨嫿
-Vue.directive('dialogDrag', {
- bind (el, binding, vnode, oldVnode) {
- const dialogHeaderEl = el.querySelector('.el-dialog__header')
- const dragDom = el.querySelector('.el-dialog')
- dialogHeaderEl.style.cursor = 'move'
-
- // 鑾峰彇鍘熸湁灞炴�� ie dom鍏冪礌.currentStyle 鐏嫄璋锋瓕 window.getComputedStyle(dom鍏冪礌, null);
- const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
-
- dialogHeaderEl.onmousedown = (e) => {
- // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂�
- const disX = e.clientX - dialogHeaderEl.offsetLeft
- const disY = e.clientY - dialogHeaderEl.offsetTop
-
- // 鑾峰彇鍒扮殑鍊煎甫px 姝ｅ垯鍖归厤鏇挎崲
- let styL, styT
-
- // 娉ㄦ剰鍦╥e涓� 绗竴娆¤幏鍙栧埌鐨勫�间负缁勪欢鑷甫50% 绉诲姩涔嬪悗璧嬪�间负px
- if (sty.left.includes('%')) {
- styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100)
- styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100)
- } else {
- styL = +sty.left.replace(/px/g, '')
- styT = +sty.top.replace(/px/g, '')
- }
-
- document.onmousemove = function (e) {
- // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈
- const l = e.clientX - disX
- const t = e.clientY - disY
-
- // 绉诲姩褰撳墠鍏冪礌
- dragDom.style.left = `${l + styL}px`
- dragDom.style.top = `${t + styT}px`
-
- // 灏嗘鏃剁殑浣嶇疆浼犲嚭鍘�
- // binding.value({x:e.pageX,y:e.pageY})
- }
-
- document.onmouseup = function (e) {
- document.onmousemove = null
- document.onmouseup = null
- }
- }
- }
-})
-
-// v-dialogDragWidth: 寮圭獥瀹藉害鎷栧ぇ 鎷栧皬
-Vue.directive('dialogDragWidth', {
- bind (el, binding, vnode, oldVnode) {
- const dragDom = binding.value.$el.querySelector('.el-dialog')
-
- el.onmousedown = (e) => {
- // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂�
- const disX = e.clientX - el.offsetLeft
-
- document.onmousemove = function (e) {
- e.preventDefault() // 绉诲姩鏃剁鐢ㄩ粯璁や簨浠�
-
- // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈
- const l = e.clientX - disX
- dragDom.style.width = `${l}px`
- }
-
- document.onmouseup = function (e) {
- document.onmousemove = null
- document.onmouseup = null
- }
- }
- }
-})
--
Gitblit v1.8.0