From bedfd1ab5b85d84841b04e9845197cd5ebd81b52 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期一, 29 三月 2021 18:12:26 +0800
Subject: [PATCH] 弹出框内容修改样式
---
/dev/null | 132 ---------------------------------
src/views/MapTemplate.vue | 11 --
src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue | 11 --
src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue | 38 ++++-----
src/components/BaseNav/PublicBounced/PublicBounced.vue | 18 +---
5 files changed, 27 insertions(+), 183 deletions(-)
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue
index 0b927c9..cfddb19 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue
@@ -1,16 +1,16 @@
<template>
- <el-row>
- <el-row>
- <el-col :span="8">鐩戞祴鐐瑰悕绉�:{{name}}</el-col>
- <el-col :span="8">鐢熶骇鍗曚綅:{{ DeptSname }}</el-col>
- <el-col :span="8">鎺掓斁绫诲瀷鍔犺浇:{{EmissTypeName}}</el-col>
+ <div class="gas-tab">
+ <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>
- <el-col :span="8">鎺掓斁鍘诲悜:{{EmissTypeDirectName}}</el-col>
- <el-col :span="8">鎺у埗绾у埆鍚嶇О:{{ContrLevelShowName}}</el-col>
- <el-col :span="8">鍐�/澶栨帓鍙�:{{OrOutPortName}}</el-col>
+ <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>
- </el-row>
+ </div>
</template>
<script>
@@ -18,27 +18,25 @@
name: 'GasTable',
props: ['displayContent'],
data () {
- return {
- name: '鑱氶叝鐑獟鐐�03鐑熸皵鎺掓斁鍙�',
- DeptSname: '澶ц姵鐑冭缃�',
- EmissTypeName: '搴熸皵',
- EmissTypeDirectName: '澶ф皵',
- ContrLevelShowName: '甯傛帶',
- OrOutPortName: '澶栨帓'
- }
+ return {}
}
}
</script>
<style scoped lang="less">
+.gas-tab {
+ border: 1px #4c667d solid;
+}
+
.el-row {
color: #00d0f9;
- .el-col{
+
+ .el-col {
width: 200px;
height: 28px;
background-color: #243a55;
border-radius: 0.05rem;
- //margin: 5px;
+ margin: 5px 0;
text-align: center;
line-height: 28px;
}
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue
index b317b1c..65d8a5b 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue
@@ -1,16 +1,10 @@
<template>
-<div>
-<!-- <video>-->
+ <div class="gas-video">
<video width="100%" height="100%" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
-<!-- 鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 HTML5 video 鏍囩銆�-->
</video>
-<!-- <span class="ico ico-sound" :class="{ active: isMute }" v-on:click="closeSoundClick()"></span>-->
-<!-- <span class="ico ico-skip"></span>-->
-<!-- <span class="ico ico-video" :class="{ hide: isPlay }" v-on:click="playClick()"></span>-->
-<!-- </video>-->
-</div>
+ </div>
</template>
<script>
@@ -20,5 +14,4 @@
</script>
<style scoped>
-
</style>
diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue
index 0522449..3f69b36 100644
--- a/src/components/BaseNav/PublicBounced/PublicBounced.vue
+++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue
@@ -6,7 +6,7 @@
</div>
<div class="public-bounced-content">
<div class="public-bounced-content-left">
- <GasTable></GasTable>
+ <GasTable :displayContent="displayContent"></GasTable>
<GasECharts></GasECharts>
</div>
<div class="public-bounced-content-right">
@@ -50,18 +50,15 @@
<style lang="less" scoped>
.public-bounced {
- width: 80%;
- height: 450px;
z-index: 999;
- position: absolute;
- top: 25%;
- left: 10%;
+ position: fixed;
+ top: 50%;
+ left: 50%;
background-color: #002432;
margin: 1% auto;
border: 1px #9fc5c8 solid;
.public-bounced-title {
- width: 100%;
border: 1px #a4c0d8 solid;
display: flex;
align-items: center;
@@ -82,20 +79,15 @@
}
.public-bounced-content {
- width: 100%;
- height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
.public-bounced-content-left {
- width: 48%;
- height: 400px;
+
}
.public-bounced-content-right {
- width: 48%;
- height: 400px;
}
}
diff --git a/src/components/BaseNav/SolidWaste/Popup.vue b/src/components/BaseNav/SolidWaste/Popup.vue
deleted file mode 100644
index 79a1a6d..0000000
--- a/src/components/BaseNav/SolidWaste/Popup.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
- <div class="box" @click.stop="clo_box">
- <div class="popup_content">
- <div class="popup_title">{{ this.title }}</div>
- <div class="popup_center">
- <div v-if="this.content_text">{{ this.content_text }}</div>
- <slot></slot>
- </div>
- <div class="popup_bottom">
- <button @click="popup_sub">纭畾{{ displayContent.Name }}</button>
- <button @click="popup_clo">鍙栨秷</button>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-export default {
- name: 'SolidContent',
- data () {
- return {
- displayContent: []
- }
- },
- props: {
- title: {
- type: String,
- default: '榛樿鏍囬'
- },
- content_text: {
- type: String,
- default: ''
- },
- hidden: {
- type: Boolean,
- default: false
- }
- },
- methods: {
- // 鐐瑰嚮纭畾浜嬩欢
- popup_sub () {
- this.$emit('popup_sub')
- },
- // 鐐瑰嚮浜嗗彇娑堜簨浠�
- popup_clo () {
- this.$emit('popup_clo')
- },
- // 鐐瑰嚮浜嗗脊鍑烘浠ュ鍖哄煙
- clo_box (e) {
- if (e.target._prevClass === 'box') {
- this.$emit('clo_box')
- }
- }
- }
-}
-</script>
-
-<style scoped>
-.box {
- width: 80%;
- z-index: 999;
- position: absolute;
- top: 50%;
- left: 25%;
- background-color: rgba(128, 128, 128, 0.507);
-}
-
-.popup_content {
- background-color: white;
- padding: 1%;
- border-radius: 20px;
- width: 40%;
- margin: 10% auto;
-}
-
-.popup_title {
- text-align: center;
- font-weight: 600;
- font-size: 30px;
-}
-
-.popup_center {
- padding: 10%;
- font-size: 20px;
-}
-
-.popup_bottom {
- display: flex;
- justify-content: space-around;
-}
-
-button {
- width: 25%;
- height: 20%;
- padding: 2%;
- border: 1px solid gray;
- border-radius: 10px;
-}
-
-button:nth-child(1) {
- background-color: orangered;
- color: white;
- font-size: 20px;
-}
-
-button:nth-child(2) {
- background-color: gray;
- color: black;
- font-size: 20px;
-}
-</style>
diff --git a/src/components/BaseNav/SolidWaste/SolidContent.vue b/src/components/BaseNav/SolidWaste/SolidContent.vue
deleted file mode 100644
index 9b55840..0000000
--- a/src/components/BaseNav/SolidWaste/SolidContent.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
- <div class="public-bounced" v-show="flag">
- <div class="popup_title">{{ displayContent.Name }}</div>
- <div class="popup_bottom">
- <button @click="closePopup">纭畾</button>
- <button @click="closePopup">鍙栨秷</button>
- </div>
- </div>
-</template>
-
-<script>
-import '@/components/BaseNav/SolidWaste/directive'
-
-export default {
- name: 'SolidContent',
- data () {
- return {
- displayContent: [],
- flag: false
- }
- },
- methods: {
- setData (data) {
- this.displayContent = data
- this.flag = true
- },
- closePopup () {
- this.flag = false
- }
- }
-}
-</script>
-
-<style scoped>
-.public-bounced {
- width: 80%;
- z-index: 499;
- position: absolute;
- top: 15%;
- left: 10%;
- background-color: rgba(128, 128, 128, 0.507);
- padding: 1%;
- border-radius: 20px;
- margin: 10% auto;
-}
-
-.popup_title {
- text-align: center;
- font-weight: 600;
- font-size: 30px;
-}
-
-.popup_center {
- padding: 10%;
- font-size: 20px;
-}
-
-.popup_bottom {
- display: flex;
- justify-content: space-around;
-}
-
-button {
- width: 25%;
- height: 20%;
- padding: 2%;
- border: 1px solid gray;
- border-radius: 10px;
-}
-
-button:nth-child(1) {
- background-color: orangered;
- color: white;
- font-size: 20px;
-}
-
-button:nth-child(2) {
- background-color: gray;
- color: black;
- font-size: 20px;
-}
-</style>
diff --git a/src/components/BaseNav/SolidWaste/SolidWasteTable.vue b/src/components/BaseNav/SolidWaste/SolidWasteTable.vue
deleted file mode 100644
index a4ecb37..0000000
--- a/src/components/BaseNav/SolidWaste/SolidWasteTable.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
- <el-tabs>
- <el-tab-pane :label="displayContent.StoragePlaceName" name="">
- <el-table
- :data="tableData" :fit="true">
- <el-table-column
- type="index"
- label="搴忓彿">
- </el-table-column>
- <el-table-column
- type="index"
- label="搴忓彿">
- </el-table-column>
- <el-table-column
- type="index"
- label="搴忓彿">
- </el-table-column>
- <el-table-column label="鍥哄簾(t)">
- <el-table-column
- prop="province"
- label="绱浜х敓閲�">
- </el-table-column>
- <el-table-column
- prop="city"
- label="褰撴湀浜х敓閲�">
- </el-table-column>
- </el-table-column>
- </el-table>
- </el-tab-pane>
- </el-tabs>
-
-</template>
-
-<script>
-export default {
- name: 'SolidWasteTable',
- props: ['displayContent'],
- data () {
- return {
- tableData: [{
- date: '闆嗗洟鍏徃',
- name: '35',
- province: '23',
- city: '11',
- address: 235,
- zip: 23
- }, {
- date: '澶╂触鐭冲寲',
- name: 32,
- province: 33,
- city: 44,
- address: 53,
- zip: 200333
- }, {
- date: '娴庡崡鐐煎寲',
- name: 35,
- province: 13,
- city: 33,
- address: 44,
- zip: 200333
- }]
- }
- }
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>
diff --git a/src/components/BaseNav/WasteWater/WasteWaterContent.vue b/src/components/BaseNav/WasteWater/WasteWaterContent.vue
deleted file mode 100644
index 22512f2..0000000
--- a/src/components/BaseNav/WasteWater/WasteWaterContent.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
- <div class="wastewater-content">
- <div class="content-left">
- <span>{{ displayContent.StoragePlaceName }}</span>
- </div>
- <div class="content-right">
- <WasteWaterTable :displayContent="displayContent"></WasteWaterTable>
- </div>
- </div>
-</template>
-
-<script>
-
-import WasteWaterTable from '@components/BaseNav/WasteWater/WasteWaterTable'
-
-export default {
- name: 'WasteWaterContent',
- components: { WasteWaterTable },
- data () {
- return {
- displayContent: []
- }
- },
- methods: {
- setDate (data) {
- this.displayContent = data
- }
- }
-}
-</script>
-
-<style lang="less" scoped>
-span {
- font-size: 22px;
- color: red;
-}
-
-.wastewater-content {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-around;
-
- .content-left {
- width: 35%;
- }
-
- .content-right {
- width: 60%;
- }
-}
-</style>
diff --git a/src/components/BaseNav/WasteWater/WasteWaterTable.vue b/src/components/BaseNav/WasteWater/WasteWaterTable.vue
deleted file mode 100644
index 7468710..0000000
--- a/src/components/BaseNav/WasteWater/WasteWaterTable.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
- <el-tabs>
- <el-tab-pane :label="displayContent.StoragePlaceName" name="" class="ShowTable">
- <el-table
- :data="tableData" :fit="true">
- <el-table-column
- type="index"
- label="搴忓彿">
- </el-table-column>
- <el-table-column
- type="index"
- label="搴忓彿">
- </el-table-column>
- <el-table-column
- type="index"
- label="搴忓彿">
- </el-table-column>
- <el-table-column label="搴熸按(t)">
- <el-table-column
- prop="province"
- label="绱浜х敓閲�">
- </el-table-column>
- <el-table-column
- prop="city"
- label="褰撴湀浜х敓閲�">
- </el-table-column>
- </el-table-column>
- </el-table>
- </el-tab-pane>
- </el-tabs>
-
-</template>
-
-<script>
-export default {
- name: 'WasteWaterTable',
- props: ['displayContent'],
- data () {
- return {
- tableData: [{
- date: '闆嗗洟鍏徃',
- name: '35',
- province: '23',
- city: '11',
- address: 235,
- zip: 23
- }, {
- date: '澶╂触鐭冲寲',
- name: 32,
- province: 33,
- city: 44,
- address: 53,
- zip: 200333
- }, {
- date: '娴庡崡鐐煎寲',
- name: 35,
- province: 13,
- city: 33,
- address: 44,
- zip: 200333
- }]
- }
- }
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>
diff --git a/src/components/BaseNav/WasteWater/directive.js b/src/components/BaseNav/WasteWater/directive.js
deleted file mode 100644
index adc9450..0000000
--- a/src/components/BaseNav/WasteWater/directive.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import Vue from 'vue'
-
-// 鑷畾涔夊厓绱犲疄鐜板脊妗嗘嫋鎷絒閲嶇偣]
-Vue.directive('draw', {
- inserted: function (el, binding, vNode) {
- el.setAttribute('style', 'position: fixed; z-index: 9999')
- },
- bind: function (el, bindding, vNode) {
- el.setAttribute('draggable', true)
- let left, top, width, height
- el._dragstart = function (event) {
- event.stopPropagation()
- left = event.clientX - el.offsetLeft
- top = event.clientY - el.offsetTop
- width = el.offsetWidth
- height = el.offsetHeight
- }
- el._checkPosition = function () { // 闃叉琚嫋鍑鸿竟鐣�
- const width = el.offsetWidth
- const height = el.offsetHeight
- let left = Math.min(el.offsetLeft, document.body.clientWidth - width)
- left = Math.max(0, left)
- let top = Math.min(el.offsetTop, document.body.clientHeight - height)
- top = Math.max(0, top)
- el.style.left = left + 'px'
- el.style.top = top + 'px'
- el.style.width = width + 'px'
- el.style.height = height + 'px'
- }
- el._dragEnd = function (event) {
- event.stopPropagation()
- left = event.clientX - left
- top = event.clientY - top
- el.style.left = left + 'px'
- el.style.top = top + 'px'
- el.style.width = width + 'px'
- el.style.height = height + 'px'
- el._checkPosition()
- }
- el._documentAllowDraop = function (event) {
- event.preventDefault()
- }
- document.body.addEventListener('dragover', el._documentAllowDraop)
- el.addEventListener('dragstart', el._dragstart)
- el.addEventListener('dragend', el._dragEnd)
- window.addEventListener('resize', el._checkPosition)
- },
-
- unbind: function (el, bindding, vNode) {
- document.body.removeEventListener('dragover', el._documentAllowDraop)
- el.removeEventListener('dragstart', el._dragstart)
- el.removeEventListener('dragend', el._dragEnd)
- window.removeEventListener('resize', el._checkPosition)
- delete el._documentAllowDraop
- delete el._dragstart
- delete el._dragEnd
- 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
- }
- }
- }
-})
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 8f55f31..c5d2668 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -15,7 +15,6 @@
<legend-panel></legend-panel>
<summary-sheets></summary-sheets>
<enterprise></enterprise>
- <!-- <el-button id="map-btn" el-icon-c-scale-to-original icon="el-icon-c-scale-to-original" circle @click="isShowHidden"></el-button>-->
<el-button type="primary" @click="ChangeState" class="solid-waste">鍥哄簾</el-button>
<el-button type="primary" @click="ChangeWaterState" class="Waste-water">搴熸按</el-button>
<el-button type="primary" @click="AddGasHelper" class="flue-gas">搴熸皵</el-button>
@@ -41,10 +40,10 @@
// 搴曞浘涓氬姟js閫昏緫
import AddSolidWasteHelper from '@components/BaseNav/SolidWaste/SolidWaste'
import AddWasteWaterHelper from '@components/BaseNav/WasteWater/WasteWater'
-import AddGasHelper from '@components/flueGas/flueGas'
-// import PopupGas from '@/components/flueGas/popup-gas'
+import AddGasHelper from '@components/BaseNav/flueGas/flueGas'
// // 鍏叡灞曠ず鏁版嵁
import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
+
export default {
name: 'MapTemplate',
components: {
@@ -59,13 +58,10 @@
LcServiceLayer,
Popup,
summarySheets,
- // SolidContent,
- // PopupGas,
PublicBounced
},
data () {
return {
- // isShowBtn: false,
map: null,
lcServiceLayerVisible: false,
basemapHelper: {},
@@ -134,9 +130,6 @@
AddWasteWater.requestData(data)
AddWasteWater.SetWasteWaterContent(this.config, this.$refs.PublicBounced)
},
- // isShowHidden () {
- // this.isShowBtn = !this.isShowBtn
- // },
saveMapStatus () {
window.serviceLayerHelper = this.serviceLayerHelper
this.$store.commit('setMapObj', this.map)
--
Gitblit v1.8.0