68个表格在1366*768下的适配，保安单位情况智能分析中的图表的适配以及其按钮会被遮住不能点击

liuyg

2022-02-15 a38281e697cde9f45926a6af0c88bec14501fec0

 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;