From a38281e697cde9f45926a6af0c88bec14501fec0 Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Tue, 15 Feb 2022 11:06:34 +0800
Subject: [PATCH] 68个表格在1366*768下的适配，保安单位情况智能分析中的图表的适配以及其按钮会被遮住不能点击
---
src/store/modules/control.js | 311 +++++++++++++++++++++++++++++++++++++++------------
1 files changed, 239 insertions(+), 72 deletions(-)
diff --git a/src/store/modules/control.js b/src/store/modules/control.js
index d842cbd..20f6611 100644
--- a/src/store/modules/control.js
+++ b/src/store/modules/control.js
@@ -1,7 +1,14 @@
// import {getStore, setStore} from '@/util/store'
// import {getDictionary} from '@/api/system/dict'
-
+let screenSizes = {
+ w: window.screen.width,
+ h: window.screen.height
+};
+let innerWH = {
+ innerWidth: window.innerWidth,
+ innerHeight: window.innerHeight
+};
const control = {
state: {
clearOtherBut: {
@@ -9,97 +16,110 @@
columnBtn: false,
searchShowBtn: false,
filterBtn: false,
+ addBtn: false,
+ editBtn: false,
+ viewBtn: false,
+ delBtn: false,
+ searchIndex: 6, //收缩展示数量
+ searchIcon: true, //搜索是否收缩
+ height: window.screen.height //初始高度
},
changePageSize: {
pageSize: 15,
currentPage: 1,
total: 0,
- pageSizes: [15, 30, 50, 100],
+ pageSizes: [15, 30, 50, 100]
},
- windowWidth: 1025,
- windowHeight: 990,
- heightTimesOut: '',
+ windowWidth: innerWH.innerWidth,
+ windowHeight: innerWH.innerHeight,
+ tableWindowHeight: innerWH.innerHeight,
+ heightTimesOut: "",
table_height: "",
- butState: '',
- oldOpens: ''
+ butState: "",
+ oldOpens: "",
+ screenSize: screenSizes.w <= 1366 && screenSizes.h <= 768,
+ screenHeight: 1000,
+
+ searchOpen: {
+ searchIndex: 6, //收缩展示数量
+ searchIcon: true, //搜索是否收缩
+ height: window.screen.height //初始高度
+ }
},
actions: {
- WHchangeHight({ state, commit }, data) {
+ WHchangeHight({
+ state,
+ commit
+ }, data) {
if (data.fn) {
if (!state.heightTimesOut) {
data.fn(state.windowHeight);
+ } else {
+ state.heightTimesOut = setTimeout(() => {
+ clearTimeout(state.heightTimesOut);
+ state.heightTimesOut = "";
+ data.fn(state.windowHeight);
+ }, 500);
}
- state.heightTimesOut = setTimeout(() => {
- clearTimeout(state.heightTimesOut);
- state.heightTimesOut = '';
- }, 300);
}
},
- TABLE_CHANGEBUTPOSITION({ state, commit, dispatch }, data) {
- let changedom = function (val) {
- let table = document.getElementsByClassName("tablesss")[0];
- let heard = table.getElementsByClassName("avue-crud__search")[0];//获取搜索的长度
- let buts = table.getElementsByClassName("avue-form__menu--center")[0];
- let Open = buts.getElementsByClassName("el-button--text")[0]
- let butsheight = heard.clientHeight;
- let butX = 0;
- if (data.from == "mounted") {
- commit("setOldOpens", '')
- commit("setButOpens", '')
- }
- // console.log(state.butState, val, butsheight)
- if (state.butState == "展 开") {
- commit("setOldOpens", '')
- }
- if (val == "收 缩") {
- commit("setOldOpens", butsheight)
- } else if (val == undefined && state.oldOpens) {
- butsheight = state.oldOpens;
- butX = state.oldOpens - heard.clientHeight;
- // commit("setOldOpens", '')
- }
- // console.log(state.butState, val, butsheight, butX);
- let sets = window.innerWidth <= 1376 && window.innerHeight <= 778;
- let usNumOpens = sets ? -78 : -78;
- if (butX || sets) {
- Open.style.top = usNumOpens - +butX + "px";
- }
- buts.style.top = butsheight + "px";
- if (val != "收 缩") {
- let other = data.otherclass || [];
- if (other && state.windowWidth >= 1024)
- for (let k in other) {
- let otherbuts = document.getElementsByClassName(other[k])[0]
- otherbuts.style.top = butsheight + 27 + "px";
- }
- }
- if (state.butState == "收 缩" && !val) {
- Open.click();
- }
- if (data.haveOpen && !val) {// 是否有展开按钮
- Open.onclick = function (e) {
- changedom(e.srcElement.innerText);
- //固定高度
- //调用改变高度
- if (e.srcElement.innerText == "展 开") {
- state.windowHeight += 1;
- } else {
- state.windowHeight -= 1;
- }
- commit("setButOpens", e.srcElement.innerText)
+
+ TABLE_CHANGEBUTPOSITION({
+ state,
+ commit,
+ dispatch
+ }, data) {
+ let table = document.getElementsByClassName("tablesss")[0];
+ let heard = table.getElementsByClassName("avue-crud__search")[0]; //获取搜索的长度
+ let buts = table.getElementsByClassName("avue-form__menu--center")[0];
+ let Open = buts.getElementsByClassName("el-button--text")[0];
+ let butsheight = heard.clientHeight;
+ let other = data.otherclass || [];
+ // buts.style.transition = "all 0.1s";
+ if (buts) {
+ buts.style.top = butsheight - 3 + "px";
+ }
+ if (other && state.windowWidth >= 1024) {
+ for (let k in other) {
+ let otherbuts = document.getElementsByClassName(other[k])[0];
+ // otherbuts.style.transition = "all 0.1s";
+ if (otherbuts) {
+ otherbuts.style.top = butsheight + 26 + "px";
}
}
-
}
- changedom();
+ // Open.style.transition = "all 0.1s";
+ // Open.style.top = -(butsheight + 4) + "px";
+ // 添加事件
+ if (Open) {
+ Open.style.top = (state.screenSize ? 125 : 140) + "px";
+ Open.onclick = function (e) {
+ // changedom(e.srcElement.innerText);
+ //固定高度
+ //调用改变高度
+ if (e.srcElement.innerText == "展 开") {
+ state.tableWindowHeight += 1;
+ } else {
+ state.tableWindowHeight -= 1;
+ }
+ // commit("setButOpens", e.srcElement.innerText);
+ };
+ }
},
- TABLE_CHANGEHEIGHT({ state, commit }, data) {
+ TABLE_CHANGEHEIGHT({
+ state,
+ commit
+ }, data) {
let h = +state.windowHeight - (+data.searchHeight + +data.flowHeight);
- console.log(h)
+ console.log(h);
state.table_height = h;
// commit("settable_height", h);
},
- changeZoom({ state, commit }, data) {
+ changeZoom({
+ state,
+ commit,
+ dispatch
+ }, data) {
if (window.innerWidth <= 1396 && window.innerHeight <= 798) {
// var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
// console.log(devicewidth)
@@ -113,16 +133,132 @@
// console.log("还原缩放")
}
}
+ // return;
+ let usheight = 0;
+ //监听可视高度
+ Object.defineProperty(state, "tableWindowHeight", {
+ set: function (key, value) {
+ // //此处拦截了设置请求
+ // window.console.log(key, value, "tableWindowHeight");
+ usheight = key;
+ let d = {
+ fn: function (h) {
+ let doit = (height, val) => {
+ let table = document.getElementsByClassName("tablesss");
+ // console.log(table[0]);
+ if (table[0]) {
+ //有需要调整的表格
+ let heard = table[0].getElementsByClassName(
+ "avue-crud__search"
+ );
+ let tip = document.getElementsByClassName("avue-crud__tip")[0];
+ let usNum = state.screenSize ? 165 : 302;
+ if (!tip) {
+ // console.log("没有tip")
+ usNum = usNum - 50;
+ }
+ let pagination = document.getElementsByClassName("avue-crud__pagination")[0];
+ if (!pagination) {
+ // console.log("没有分页")
+ usNum = usNum - 45;
+ }
+ let nav_scroll = document.getElementsByClassName("el-tabs__nav-scroll");
+ if (nav_scroll[1]) {
+ // console.log("有额外标签栏")
+ usNum = usNum + 55;
+ }
+ let hs = height || h;
+ let overHeight = +hs - (+heard[0].clientHeight + +usNum);
+ // console.log(overHeight, heard[0].clientHeight, usNum);
+ let fromDom = document.getElementsByClassName(
+ "el-table--fit"
+ );
+ if (fromDom) {
+ let ifsize = fromDom.length;
+ // console.log("页面表格数量：", ifsize)
+ for (let ifrom = 0; ifrom < ifsize; ifrom++) {
+ // fromDom[ifrom].style.transition = "height 0.1s";
+ fromDom[ifrom].style.maxHeight = overHeight + "px";
+ fromDom[ifrom].style.height = overHeight + "px";
+ }
+ }
+ let d = {
+ otherclass: ["downSFZ"],
+ haveOpen: true
+ };
+ dispatch("TABLE_CHANGEBUTPOSITION", d);
+ }
+ return;
+ };
+ // if (that.onceTableChange == 1) {
+ // //解决第一次未渲染成功会报错的问题
+ // that.onceTableChange++;
+ // console.log(that.onceTableChange);
+ // commit("checkDomHeight", {
+ // domName: "getElementsByClassName",
+ // name: "el-table--fit",
+ // fn: function() {
+ // that.$nextTick(() => {
+ // setTimeout(() => {
+ // doit(window.innerHeight, "once");
+ // }, 200);
+ // });
+ // }
+ // });
+ // } else {
+ doit(window.innerHeight);
+ // }
+ }
+ };
+ dispatch("WHchangeHight", d);
+ return
+ // tablesss
+ // class="tablesss"
+ $store.state.control.screenSize == 1366 ? 'smallSize' : 'normalSize',
+ $store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : '',
+
+ // searchIndex: 6, //收缩展示数量
+ // searchIcon: true, //搜索是否收缩
+ // ...this.$store.state.control.searchOpen,
+ // height: "auto",
+ // 初始化位置， 放入mounted, 以及放入onload的获取数据后
+ this.$store.commit("setWindowSizeHeightAdd");
+ },
+ get: function () {
+ // console.log('get!', usheight);
+ return usheight;
+ }
+ });
+ },
+ MOUNTED_TABLE_SIZE({
+ state,
+ commit,
+ dispatch
+ }, data) {
+ let d = {
+ otherclass: ["downSFZ"],
+ haveOpen: true,
+ from: "mounted"
+ };
+ // 开始就适应高度
+ commit("setWindowSizeHeightAdd");
+ // dispatch("TABLE_CHANGEBUTPOSITION", d);
}
},
mutations: {
setWindowSize: (state, data) => {
state.windowWidth = data.innerWidth;
state.windowHeight = data.innerHeight;
- // console.log(data)
+ // console.log(state.windowHeight, "state.windowHeight")
+ },
+ setWindowSizeHeight: (state, data) => {
+ state.tableWindowHeight = data;
+ // console.log(state.tableWindowHeight, "state.tableWindowHeight")
},
setWindowSizeHeightAdd: (state, data) => {
- state.windowHeight += 1;
+ setTimeout(() => {
+ state.tableWindowHeight += 1;
+ }, 0);
},
setButOpens(state, data) {
state.butState = data;
@@ -130,9 +266,40 @@
setOldOpens(state, data) {
state.oldOpens = data;
state.oldOpens = data;
+ },
+ setScreenSize(state, data) {
+ state.screenSize = data.w <= 1366 && data.h <= 768 ? 1366 : false;
+ state.screenHeight = data.h;
+ },
+ checkDomHeight(state, data) {
+ // 声明定时器
+ var timer = null;
+ // 检查dom是否执行完成
+ function checkDom() {
+ let dom = document[data.domName](data.name);
+ console.log(dom[0].style.height, "height");
+ if (dom[0].style.height) {
+ // 执行dom加载完成后的操作
+ // 清除定时器
+ if (!timer) {
+ clearTimeout(timer);
+ }
+ if (data.fn) {
+ //回调函数
+ data.fn(dom);
+ return;
+ } else {
+ return dom;
+ }
+ } else {
+ // 自我调用
+ timer = setTimeout(checkDom, 200);
+ }
+ }
+ // 首次执行
+ checkDom();
}
}
};
-
export default control;
--
Gitblit v1.9.3