From 67c41dc766f73e14373d115f9655f668cf3afb84 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期五, 12 三月 2021 18:14:59 +0800
Subject: [PATCH] 新增统计与报警
---
src/assets/images/map-pages/icon/map/company.png | 0
src/components/plugin/DialogDrag.js | 49 ++++
src/components/table/enterprise.vue | 62 +++++
src/assets/images/map-pages/icon/map/warn.png | 0
src/components/table/components/IndexStatistics.vue | 262 +++++++++++++++++++++++
src/views/MapTemplate.vue | 3
src/views/popup/Dialog.vue | 37 +++
src/components/table/components/Warn.vue | 231 +++++++++++++++++++++
8 files changed, 644 insertions(+), 0 deletions(-)
diff --git a/src/assets/images/map-pages/icon/map/company.png b/src/assets/images/map-pages/icon/map/company.png
new file mode 100644
index 0000000..28a279a
--- /dev/null
+++ b/src/assets/images/map-pages/icon/map/company.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/map/warn.png b/src/assets/images/map-pages/icon/map/warn.png
new file mode 100644
index 0000000..3533b7c
--- /dev/null
+++ b/src/assets/images/map-pages/icon/map/warn.png
Binary files differ
diff --git a/src/components/plugin/DialogDrag.js b/src/components/plugin/DialogDrag.js
new file mode 100644
index 0000000..2972234
--- /dev/null
+++ b/src/components/plugin/DialogDrag.js
@@ -0,0 +1,49 @@
+import Vue from 'vue'
+
+// 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
+ }
+ }
+ }
+})
diff --git a/src/components/table/components/IndexStatistics.vue b/src/components/table/components/IndexStatistics.vue
new file mode 100644
index 0000000..b8e8127
--- /dev/null
+++ b/src/components/table/components/IndexStatistics.vue
@@ -0,0 +1,262 @@
+<template>
+ <el-tabs>
+ <el-tab-pane label="鎸囨爣缁熻" name="first"><el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="搴忓彿"
+ width="150">
+ </el-table-column>
+ <el-table-column
+ prop="date"
+ label="鍗曚綅鍚嶇О"
+ width="150">
+ </el-table-column>
+ <el-table-column
+ prop="date"
+ label="宸ヤ笟鍙栨按閲�(m3)"
+ width="150">
+ </el-table-column>
+ <el-table-column
+ prop="date"
+ label="澶栨帓搴熸按閲�(m3)"
+ width="150">
+ </el-table-column>
+ <el-table-column
+ prop="date"
+ label="宸ヤ笟搴熸皵鎺掓斁閲�(m3)"
+ width="150">
+ </el-table-column>
+ <el-table-column label="COD(t)">
+ <el-table-column
+ prop="province"
+ label="绱浜х敓閲�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="褰撴湀浜х敓閲�"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="姘ㄦ爱(t)">
+ <el-table-column
+ prop="province"
+ label="绱浜х敓閲�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="褰撴湀浜х敓閲�"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="浜屾哀鍖栫～(t)">
+ <el-table-column
+ prop="province"
+ label="绱浜х敓閲�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="褰撴湀浜х敓閲�"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="姘哀鍖栫墿(t)">
+ <el-table-column
+ prop="province"
+ label="绱浜х敓閲�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="褰撴湀浜х敓閲�"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="VOCs(t)">
+ <el-table-column
+ prop="province"
+ label="绱浜х敓閲�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="褰撴湀浜х敓閲�"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鍥哄簾(t)">
+ <el-table-column
+ prop="province"
+ label="绱浜х敓閲�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="褰撴湀浜х敓閲�"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ </el-table></el-tab-pane>
+ <el-tab-pane label="浼佷笟鎺掑悕" name="second"><el-table
+ :data="tableData"
+ style="width: 100%"
+ max-height="250">
+ <el-table-column
+ fixed
+ prop="date"
+ label="浼佷笟鍚嶇О"
+ width="150">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="搴熸按杈炬爣鐜�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="province"
+ label="鍚嶆"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="搴熸皵杈炬爣鐜�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="address"
+ label="鍚嶆"
+ width="300">
+ </el-table-column>
+ <el-table-column
+ prop="zip"
+ label="浼犺緭鐜�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="zip"
+ label="鍚嶆"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="zip"
+ label="璁惧瀹屽ソ鐜�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="zip"
+ label="鎺掑悕"
+ width="120">
+ </el-table-column>
+ </el-table></el-tab-pane>
+ <el-tab-pane label="鎺掓斁鐐规帓鍚�" name="third"><el-table
+ :data="tableData"
+ style="width: 100%"
+ max-height="250">
+ <el-table-column
+ fixed
+ prop="date"
+ label="鎺掓斁鐐瑰悕绉�"
+ width="150">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="鎺掓斁绫诲瀷"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="province"
+ label="杈炬爣鐜�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="鍚嶆"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="address"
+ label="浼犺緭鐜�"
+ width="300">
+ </el-table-column>
+ <el-table-column
+ prop="zip"
+ label="鍚嶆"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="zip"
+ label="璁惧瀹屽ソ鐜�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="zip"
+ label="鍚嶆"
+ width="120">
+ </el-table-column>
+ </el-table></el-tab-pane>
+ </el-tabs>
+
+</template>
+
+<script>
+export default {
+ data () {
+ return {
+ tableData: [{
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-02',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-04',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-01',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-08',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-06',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-07',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }]
+ }
+ }
+}
+</script>
diff --git a/src/components/table/components/Warn.vue b/src/components/table/components/Warn.vue
new file mode 100644
index 0000000..31c3e3d
--- /dev/null
+++ b/src/components/table/components/Warn.vue
@@ -0,0 +1,231 @@
+<template>
+ <el-tabs>
+ <el-tab-pane label="瀹炴椂缁熻" name="first">
+ <el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="浼佷笟鍚嶇О"
+ width="150">
+ </el-table-column>
+ <el-table-column label="搴熸按(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="鎶ヨ"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="搴熸皵(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="鎶ヨ"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鍥哄簾(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="纭寲姘�(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鍙噧姘斾綋(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
+ <el-tab-pane label="褰撴湀缁熻" name="second">
+ <el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="浼佷笟鍚嶇О"
+ width="150">
+ </el-table-column>
+ <el-table-column label="搴熸按(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="鎶ヨ"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="搴熸皵(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="鎶ヨ"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鍥哄簾(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="纭寲姘�(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鍙噧姘斾綋(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
+ <el-tab-pane label="涓婃湀缁熻" name="third">
+ <el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="浼佷笟鍚嶇О"
+ width="150">
+ </el-table-column>
+ <el-table-column label="搴熸按(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="鎶ヨ"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="搴熸皵(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="鎶ヨ"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鍥哄簾(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="纭寲姘�(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鍙噧姘斾綋(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
+ </el-tabs>
+</template>
+
+<script>
+export default {
+ data () {
+ return {
+ tableData: [{
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-02',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-04',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-01',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-08',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-06',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-07',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }]
+ }
+ }
+}
+</script>
diff --git a/src/components/table/enterprise.vue b/src/components/table/enterprise.vue
new file mode 100644
index 0000000..f024ad2
--- /dev/null
+++ b/src/components/table/enterprise.vue
@@ -0,0 +1,62 @@
+<template>
+ <div class="enterprise-panel">
+ <div class="enterprise-function" @click="showWarnDialog()">
+ <img src="@/assets/images/map-pages/icon/map/warn.png" alt="" width="32px">
+ </div>
+ <div class="enterprise-function" @click="showStatisDialog()">
+ <img src="@/assets/images/map-pages/icon/map/company.png" alt="" width="32px">
+ </div>
+ <Dialog ref="warnDialog" title="浼佷笟棰勮鎶ヨ鍒嗙被缁熻">
+ <warn></warn>
+ </Dialog>
+ <Dialog ref="indexStatisticsDialog" title="浼佷笟鎸囨爣鍒嗙被缁熻">
+ <index-statistics></index-statistics>
+ </Dialog>
+ </div>
+</template>
+
+<script>
+import Dialog from '../../views/popup/Dialog'
+import Warn from './components/Warn'
+import IndexStatistics from './components/IndexStatistics'
+export default {
+ name: 'Enterprise',
+ components: {
+ Dialog,
+ Warn,
+ IndexStatistics
+ },
+ data () {
+ return {
+ comp: Warn
+ }
+ },
+ methods: {
+ // 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
+ show () {
+ this.legendControl = !this.legendControl
+ },
+ showWarnDialog () {
+ this.$refs.warnDialog.show()
+ },
+ showStatisDialog () {
+ this.$refs.indexStatisticsDialog.show()
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+.enterprise-panel{
+ position: absolute;
+ right: 5px;
+ top:5px;
+ z-index: 9999;
+
+ .enterprise-function{
+ width: 40px;
+ float: left;
+ cursor: pointer;
+ }
+}
+</style>
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index ce5e3cc..2061b6e 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -13,6 +13,7 @@
<tool-box-panel ref="toolBox"></tool-box-panel>
<menu-special></menu-special>
<legend-panel></legend-panel>
+ <enterprise></enterprise>
</div>
</template>
@@ -29,10 +30,12 @@
import Popup from '@views/popup/Popup'
import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
+import Enterprise from '../components/table/enterprise'
export default {
name: 'MapTemplate',
components: {
+ Enterprise,
LegendPanel,
MenuSpecial,
ToolBoxPanel,
diff --git a/src/views/popup/Dialog.vue b/src/views/popup/Dialog.vue
new file mode 100644
index 0000000..af997fd
--- /dev/null
+++ b/src/views/popup/Dialog.vue
@@ -0,0 +1,37 @@
+<template>
+ <el-dialog
+ :title="title"
+ :visible.sync="centerDialogVisible"
+ width="30%"
+ :modal="false"
+ center>
+ <slot></slot>
+ </el-dialog>
+</template>
+<script>
+// import '@/assets/css/map/map-popup.scss'
+
+export default {
+ name: 'Dialog',
+ props: {
+ title: {
+ type: String,
+ default: '鏍囬'
+ }
+ },
+ data () {
+ return {
+ centerDialogVisible: false
+ }
+ },
+ methods: {
+ show () {
+ this.centerDialogVisible = true
+ }
+ }
+}
+
+</script>
+<style lang="less">
+
+</style>
--
Gitblit v1.8.0