From 562dbac6e849316531b711b72805ce9f252b5eb0 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期二, 30 三月 2021 17:26:32 +0800
Subject: [PATCH] 弹框样式修改
---
src/components/BaseNav/SolidWaste/SolidWaste.js | 59 ++++++-----
src/components/BaseNav/SolidWaste/directive/directive.js | 77 +++++++++++++++
src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue | 65 ++++++-------
src/views/MapTemplate.vue | 2
src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue | 18 ++-
src/components/BaseNav/PublicBounced/GasComponents/GasTab.vue | 22 ----
src/components/BaseNav/SolidWaste/directive/dir.js | 2
src/components/BaseNav/PublicBounced/PublicBounced.vue | 16 ++-
src/components/BaseNav/SolidWaste/directive/index.js | 14 ++
src/api/SolidWaste/index.js | 6 +
10 files changed, 182 insertions(+), 99 deletions(-)
diff --git a/src/api/SolidWaste/index.js b/src/api/SolidWaste/index.js
new file mode 100644
index 0000000..b034763
--- /dev/null
+++ b/src/api/SolidWaste/index.js
@@ -0,0 +1,6 @@
+import $http from '@utils/axios'
+// import Qs from 'qs'
+
+export const getSolidWaste = (data = {}) => {
+ return $http.get('/wasteSolid/getSolidWaste', data)
+}
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasTab.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasTab.vue
index e05f59f..ebf7ddd 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/GasTab.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/GasTab.vue
@@ -37,7 +37,6 @@
.win {
position: relative;
- //display: inline-block;
margin-bottom: 13px;
background-color: rgba(33, 41, 69,0.9);
}
@@ -46,7 +45,6 @@
height: 100%;
.main-matter{
font-size: 13px;
- padding: 9px 7px;
font-weight: normal;
border: 1px solid #396d83;
.row-item-one{
@@ -56,7 +54,7 @@
width: 100%;
color: #00d0f9;
display: flex;
- font-size: 12px!important;
+ font-size: 12px !important;
.el-col{
flex: 1;
width: 100%;
@@ -73,7 +71,7 @@
}
}
.border_corner{
- z-index: 2500;
+ z-index: 999;
position: absolute;
width: 10px;
height: 10px;
@@ -104,20 +102,4 @@
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/GasVideo.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue
index fc152ab..93776b0 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue
@@ -7,7 +7,7 @@
<div class="border_corner border_corner_right_bottom"></div>
<div class="main">
<div class="main-video">
- <video width="100%" height="100%" controls>
+ <video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
@@ -24,23 +24,25 @@
<style scoped lang="less">
.win {
- /*width: 100%;*/
- /*height: 100%;*/
position: relative;
- //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: 1px solid #396d83;
+ width: 100%;
+ height: 100%;
+ video {
+ width: 100%;
+ height: 100%;
+ outline: none;
+ }
}
}
.border_corner{
- z-index: 2500;
+ z-index: 999;
position: absolute;
width: 14px;
height: 14px;
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue
index 2c878b8..b9fae10 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue
@@ -1,53 +1,48 @@
<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>
+ <el-col class="el-col">
+ <el-table
+ border
+ tooltip-effect="dark"
+ :data="data"
+ >
+ <el-table-column prop="name" label="搴忓彿"></el-table-column>
+ <el-table-column prop="name" label="绫诲埆"></el-table-column>
+ <el-table-column prop="date" label="鍥哄簾鍚嶇О"></el-table-column>
+ <el-table-column prop="address" label="浠ｇ爜"></el-table-column>
+ <el-table-column prop="address" label="浜х敓閲�"></el-table-column>
+ <el-table-column prop="name" label="鍌ㄥ瓨閲�"></el-table-column>
+ <el-table-column prop="date" label="浜х敓瑁呯疆"></el-table-column>
+ </el-table>
+ </el-col>
</div>
</template>
<script>
export default {
name: 'PublicTable',
+ props: ['requestSolidWasteData'],
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 寮�'
- }]
+ data: []
+ }
+ },
+ mounted () {
+ this.$nextTick(() => {
+ this.getSolidWasteData()
+ })
+ },
+ methods: {
+ getSolidWasteData () {
+ // const data = requestSolidWasteData
+ // console.log(data)
}
}
}
</script>
<style lang="less" scoped>
+.public-table {
+}
</style>
diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue
index 275b86e..c751820 100644
--- a/src/components/BaseNav/PublicBounced/PublicBounced.vue
+++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue
@@ -7,7 +7,7 @@
<div class="public-bounced-content">
<div class="public-bounced-content-left">
<GasTab :displayContent="displayContent"></GasTab>
- <PublicTable v-if="value === 'gufei'"></PublicTable>
+ <PublicTable v-if="value === 'gufei'" :requestSolidWasteData="displayContent.StoragePlaceId"></PublicTable>
<GasECharts v-else></GasECharts>
</div>
<div class="public-bounced-content-right">
@@ -19,7 +19,7 @@
<script>
-import '@/components/BaseNav/SolidWaste/directive'
+import '@/components/BaseNav/SolidWaste/directive/dir'
import GasTab from '@components/BaseNav/PublicBounced/GasComponents/GasTab'
import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable'
import GasECharts from '@components/BaseNav/PublicBounced/GasComponents/GasECharts'
@@ -54,10 +54,11 @@
<style lang="less" scoped>
.public-bounced {
+ width: 75%;
z-index: 999;
position: absolute;
- top: 50%;
- left: 50%;
+ bottom: 5%;
+ left: 15%;
background-color: #002432;
border: 1px #9fc5c8 solid;
@@ -82,16 +83,21 @@
}
.public-bounced-content {
+ margin: 15px auto;
display: flex;
align-items: center;
justify-content: space-around;
.public-bounced-content-left {
+ width: 48%;
+ height: 100%;
}
.public-bounced-content-right {
+ width: 48%;
+ height: 100%;
}
}
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/BaseNav/SolidWaste/SolidWaste.js b/src/components/BaseNav/SolidWaste/SolidWaste.js
index 6df5e3e..85f3235 100644
--- a/src/components/BaseNav/SolidWaste/SolidWaste.js
+++ b/src/components/BaseNav/SolidWaste/SolidWaste.js
@@ -67,7 +67,7 @@
// 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.setPanTo(e.target.getLatLng(), 250)
this.EffectOfPulse(e.target.getLatLng())
this.SolidWastePopup.setData(data[i], 'gufei')
return this.SolidWastePopup.$el
@@ -87,8 +87,9 @@
position = this.map.latLngToLayerPoint(position)
position.y += value
position = this.map.layerPointToLatLng(position)
- this.map.setView(position)
- // this.map.flyTo(position)
+ // this.map.setView(position)
+ this.map.flyTo(position)
+ // this.map.panTo(position)
}
// 鍥哄簾鐐瑰嚮杩涜鐨� 鍐呭鐨勮缃�
@@ -121,32 +122,32 @@
// 鑴夊啿鏁堟灉璁剧疆瀹炵幇
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.SolidWasteLayerGroup)
- this.PulseCountSetting()
- }
+ // 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.SolidWasteLayerGroup)
+ // this.PulseCountSetting()
+ // }
}
// 瀵瑰浘鏍囪剦鍐� 杩涜set璁剧疆 // 楂樹寒鍥惧眰
diff --git a/src/components/BaseNav/SolidWaste/directive.js b/src/components/BaseNav/SolidWaste/directive/dir.js
similarity index 99%
rename from src/components/BaseNav/SolidWaste/directive.js
rename to src/components/BaseNav/SolidWaste/directive/dir.js
index d51b377..fde331f 100644
--- a/src/components/BaseNav/SolidWaste/directive.js
+++ b/src/components/BaseNav/SolidWaste/directive/dir.js
@@ -56,4 +56,4 @@
delete el._dragEnd
delete el._checkPosition
}
-})
+})
\ No newline at end of file
diff --git a/src/components/BaseNav/SolidWaste/directive/directive.js b/src/components/BaseNav/SolidWaste/directive/directive.js
new file mode 100644
index 0000000..a656af4
--- /dev/null
+++ b/src/components/BaseNav/SolidWaste/directive/directive.js
@@ -0,0 +1,77 @@
+export default {
+ bind (el, binding, vnode) {
+ const dialogHeaderEl = el.querySelector('.el-dialog__header')
+ const dragDom = el.querySelector('.el-dialog')
+ dialogHeaderEl.style.cssText += ';cursor:move;'
+ dragDom.style.cssText += ';top:0px;'
+
+ // 鑾峰彇鍘熸湁灞炴�� ie dom鍏冪礌.currentStyle 鐏嫄璋锋瓕 window.getComputedStyle(dom鍏冪礌, null);
+ const getStyle = (function () {
+ if (window.document.currentStyle) {
+ return (dom, attr) => dom.currentStyle[attr]
+ } else {
+ return (dom, attr) => getComputedStyle(dom, false)[attr]
+ }
+ })()
+
+ dialogHeaderEl.onmousedown = (e) => {
+ // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂�
+ const disX = e.clientX - dialogHeaderEl.offsetLeft
+ const disY = e.clientY - dialogHeaderEl.offsetTop
+
+ const dragDomWidth = dragDom.offsetWidth
+ const dragDomHeight = dragDom.offsetHeight
+
+ const screenWidth = document.body.clientWidth
+ const screenHeight = document.body.clientHeight
+
+ const minDragDomLeft = dragDom.offsetLeft
+ const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
+
+ const minDragDomTop = dragDom.offsetTop
+ const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
+
+ // 鑾峰彇鍒扮殑鍊煎甫px 姝ｅ垯鍖归厤鏇挎崲
+ let styL = getStyle(dragDom, 'left')
+ let styT = getStyle(dragDom, 'top')
+
+ if (styL.includes('%')) {
+ styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
+ styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
+ } else {
+ styL = +styL.replace(/\px/g, '')
+ styT = +styT.replace(/\px/g, '')
+ }
+
+ document.onmousemove = function (e) {
+ // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈
+ let left = e.clientX - disX
+ let top = e.clientY - disY
+
+ // 杈圭晫澶勭悊
+ if (-(left) > minDragDomLeft) {
+ left = -minDragDomLeft
+ } else if (left > maxDragDomLeft) {
+ left = maxDragDomLeft
+ }
+
+ if (-(top) > minDragDomTop) {
+ top = -minDragDomTop
+ } else if (top > maxDragDomTop) {
+ top = maxDragDomTop
+ }
+
+ // 绉诲姩褰撳墠鍏冪礌
+ dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+
+ // emit onDrag event
+ vnode.child.$emit('dragDialog')
+ }
+
+ document.onmouseup = function (e) {
+ document.onmousemove = null
+ document.onmouseup = null
+ }
+ }
+ }
+}
diff --git a/src/components/BaseNav/SolidWaste/directive/index.js b/src/components/BaseNav/SolidWaste/directive/index.js
new file mode 100644
index 0000000..d8a3108
--- /dev/null
+++ b/src/components/BaseNav/SolidWaste/directive/index.js
@@ -0,0 +1,14 @@
+// import drag from './drag'
+import drag from './directive'
+
+const install = function (Vue) {
+ Vue.directive('el-drag-dialog', drag)
+}
+
+if (window.Vue) {
+ window['el-drag-dialog'] = drag
+ Vue.use(install) // eslint-disable-line
+}
+
+drag.install = install
+export default drag
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 6913577..0809498 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -165,7 +165,7 @@
this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 鍒濆鍖栧姩鎬佽绱犲浘灞傚姪鎵�
this.vectorLayerHelper.initVectorLayers(this.config)
- // this.ChangeState()
+ this.ChangeState()
// this.AddGasHelper()
// this.ChangeWaterState()
--
Gitblit v1.8.0