From 3be40ecc52be54ec6a45abd0277f40b385671479 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期六, 13 三月 2021 16:32:58 +0800
Subject: [PATCH] 新增统计与报警
---
src/main.js | 1
src/components/table/components/IndexStatistics.vue | 3 +
src/utils/dialogDrag.js | 80 ++++++++++++++++++++++++++++++++++++++++
src/views/popup/Dialog.vue | 4 +-
src/components/table/components/Warn.vue | 3 +
5 files changed, 87 insertions(+), 4 deletions(-)
diff --git a/src/components/table/components/IndexStatistics.vue b/src/components/table/components/IndexStatistics.vue
index b8e8127..f38b288 100644
--- a/src/components/table/components/IndexStatistics.vue
+++ b/src/components/table/components/IndexStatistics.vue
@@ -1,5 +1,5 @@
<template>
- <el-tabs>
+ <el-tabs v-model="activeName">
<el-tab-pane label="鎸囨爣缁熻" name="first"><el-table
:data="tableData"
style="width: 100%">
@@ -206,6 +206,7 @@
export default {
data () {
return {
+ activeName: 'first',
tableData: [{
date: '2016-05-03',
name: '鐜嬪皬铏�',
diff --git a/src/components/table/components/Warn.vue b/src/components/table/components/Warn.vue
index 31c3e3d..efc2577 100644
--- a/src/components/table/components/Warn.vue
+++ b/src/components/table/components/Warn.vue
@@ -1,5 +1,5 @@
<template>
- <el-tabs>
+ <el-tabs v-model="activeName">
<el-tab-pane label="瀹炴椂缁熻" name="first">
<el-table
:data="tableData"
@@ -175,6 +175,7 @@
export default {
data () {
return {
+ activeName: 'first',
tableData: [{
date: '2016-05-03',
name: '鐜嬪皬铏�',
diff --git a/src/main.js b/src/main.js
index b2139c0..8ffa4e2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@
import 'element-ui/lib/theme-chalk/index.css'
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
+import '@/utils/dialogDrag.js'
Vue.config.productionTip = false
diff --git a/src/utils/dialogDrag.js b/src/utils/dialogDrag.js
new file mode 100644
index 0000000..6f845f5
--- /dev/null
+++ b/src/utils/dialogDrag.js
@@ -0,0 +1,80 @@
+/* eslint-disable */
+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';
+ dialogHeaderEl.style.cssText += ';cursor:move;'
+ dragDom.style.cssText += ';top:0px;'
+
+ // 鑾峰彇鍘熸湁灞炴�� ie dom鍏冪礌.currentStyle 鐏嫄璋锋瓕 window.getComputedStyle(dom鍏冪礌, null);
+ const sty = (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 screenWidth = document.body.clientWidth // body褰撳墠瀹藉害
+ const screenHeight = document.documentElement.clientHeight // 鍙鍖哄煙楂樺害(搴斾负body楂樺害锛屽彲鏌愪簺鐜涓嬫棤娉曡幏鍙�)
+
+ const dragDomWidth = dragDom.offsetWidth // 瀵硅瘽妗嗗搴�
+ const dragDomheight = dragDom.offsetHeight // 瀵硅瘽妗嗛珮搴�
+
+ const minDragDomLeft = dragDom.offsetLeft
+ const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
+
+ const minDragDomTop = dragDom.offsetTop
+ const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
+
+ // 鑾峰彇鍒扮殑鍊煎甫px 姝ｅ垯鍖归厤鏇挎崲
+ let styL = sty(dragDom, 'left')
+ let styT = sty(dragDom, 'top')
+
+ // 娉ㄦ剰鍦╥e涓� 绗竴娆¤幏鍙栧埌鐨勫�间负缁勪欢鑷甫50% 绉诲姩涔嬪悗璧嬪�间负px
+ 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;`
+ }
+
+ document.onmouseup = function (e) {
+ document.onmousemove = null
+ document.onmouseup = null
+ }
+ }
+ }
+})
diff --git a/src/views/popup/Dialog.vue b/src/views/popup/Dialog.vue
index af997fd..58e7407 100644
--- a/src/views/popup/Dialog.vue
+++ b/src/views/popup/Dialog.vue
@@ -1,15 +1,15 @@
<template>
- <el-dialog
+ <el-dialog v-dialogDrag
:title="title"
:visible.sync="centerDialogVisible"
width="30%"
:modal="false"
+ :close-on-click-modal="false"
center>
<slot></slot>
</el-dialog>
</template>
<script>
-// import '@/assets/css/map/map-popup.scss'
export default {
name: 'Dialog',
--
Gitblit v1.8.0