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

liuyg

2022-02-15 a38281e697cde9f45926a6af0c88bec14501fec0

 src/views/statisticalQueryManagement/businessStatistics.vue

@@ -1,37 +1,41 @@
<template>
  <div>
    <basic-container>
      <avue-crud
        :option="tableOption"
        :table-loading="loading"
        :data="tableData"
        :page.sync="page"
        :permission="permissionList"
        ref="crud"
        :search.sync="search"
        @row-update="rowUpdates"
        @row-save="rowSave"
        @search-change="searchChange"
        @search-reset="searchReset"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @on-load="onLoad"
        @cell-click="handleRowClick"
        class="businessStatisticsStyle"
      >
        <template slot="menuLeft">
          <el-button
            type="warning"
            size="small"
            plain
            icon="el-icon-download"
            @click="handleExportBusinessStatis"
            >导出
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
  <basic-container
    :class="[
      'witerFontColorInput',
      $store.state.control.screenSize == 1366 ? 'smallSize' : 'normalSize',
      $store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : ''
    ]"
  >
    <avue-crud
      class="tablesss businessStatisticsStyle"
      :option="tableOption"
      :table-loading="loading"
      :data="tableData"
      :page.sync="page"
      :permission="permissionList"
      ref="crud"
      :search.sync="search"
      @row-update="rowUpdates"
      @row-save="rowSave"
      @search-change="searchChange"
      @search-reset="searchReset"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
      @cell-click="handleRowClick"
    >
      <template slot="menuLeft">
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-download"
          @click="handleExportBusinessStatis"
          >导出
        </el-button>
      </template>
    </avue-crud>
    <el-dialog
      class="tongji-class"
      :title="dialogTitle"
@@ -59,13 +63,13 @@
        :paramCz="paramCz"
      ></securityGuardDetail>
    </el-dialog>
  </div>
  </basic-container>
</template>
<script>
import { mapGetters } from "vuex";
import {
  selectYw,
  dictionaryList,
  dictionaryList
} from "@/api/statisticalQueryManagement/statisticalQueryManagement";
// import {  lazyTrees } from "@/api/index/index";
import businessStatisticsDetail from "./businessStatisticsDetail";
@@ -80,7 +84,7 @@
    businessStatisticsDetail,
    businessStatisticsPq,
    businessStatisticsFwdq,
    securityGuardDetail,
    securityGuardDetail
  },
  data() {
    return {
@@ -88,7 +92,7 @@
        pageSize: 10,
        currentPage: 1,
        total: 0,
        ...this.$store.state.control.changePageSize,
        ...this.$store.state.control.changePageSize
      },
      search: {},
      query: {},
@@ -112,6 +116,7 @@
        indexLabel: "序号",
        viewBtn: true,
        dialogClickModal: false,
        ...this.$store.state.control.clearOtherBut,
        column: [
          {
            label: "公司名称",
@@ -119,7 +124,7 @@
            search: true,
            searchSpan: 4,
            width: 300,
            display: false,
            display: false
          },
          {
            label: "单位类型",
@@ -130,9 +135,9 @@
            type: "select",
            props: {
              label: "dictValue",
              value: "dictKey",
              value: "dictKey"
            },
            dicData: [],
            dicData: []
          },
          {
            label: "所属辖区",
@@ -140,16 +145,16 @@
            type: "tree",
            props: {
              label: "title",
              value: "id",
              value: "id"
            },
            dicData: [],
            rules: [
              {
                required: true,
                message: "请选择所属辖区",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "所属辖区",
@@ -160,7 +165,7 @@
            dicUrl: "/api/jurisdiction/lazy-tree",
            props: {
              label: "title",
              value: "id",
              value: "id"
            },
            hide: true,
            checkStrictly: true,
@@ -169,34 +174,34 @@
              {
                required: false,
                message: "请选择所属辖区",
                trigger: "click",
              },
            ],
                trigger: "click"
              }
            ]
          },
          {
            label: "保安员人数",
            prop: "znum",
            display: false,
            display: false
          },
          {
            label: "持证人数",
            prop: "cznum",
            display: false,
            display: false
          },
          {
            label: "派遣人数",
            prop: "pqnum",
            display: false,
            display: false
          },
          {
            label: "服务对象数量",
            prop: "fwnum",
            display: false,
            display: false
          },
          {
            label: "服务到期数量",
            prop: "dqnum",
            display: false,
            display: false
          },
          {
            label: "单位注册时间",
@@ -217,11 +222,11 @@
              {
                required: true,
                message: "请选择单位注册时间",
                trigger: "blur",
              },
            ],
          },
        ],
                trigger: "blur"
              }
            ]
          }
        ]
      },
      loading: true,
      dialogTitle: "",
@@ -229,7 +234,7 @@
      pqdialogShow: false,
      fwdeptId: "",
      searchitem: "",
      paramCz: false,
      paramCz: false
    };
  },
  computed: {
@@ -239,9 +244,9 @@
        addBtn: this.vaildData(this.permission.post_add, false),
        viewBtn: this.vaildData(this.permission.post_view, false),
        delBtn: this.vaildData(this.permission.post_delete, false),
        editBtn: this.vaildData(this.permission.post_edit, false),
        editBtn: this.vaildData(this.permission.post_edit, false)
      };
    },
    }
  },
  methods: {
    //业务情况统计信息导出
@@ -249,7 +254,7 @@
      this.$confirm("是否导出业务情况统计信息数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        type: "warning"
      }).then(() => {
        //获取查询条件
        const { releaseTimeRange } = this.search;
@@ -262,7 +267,7 @@
          stats: this.search.stats,
          deptid: this.search.enterpriseName,
          startTime: this.search.startTime,
          endTime: this.search.endTime,
          endTime: this.search.endTime
        };
        // console.log(data,123);
        //序列号url形式，用&拼接
@@ -288,9 +293,9 @@
      // });
    },
    getDictionaryList() {
      dictionaryList().then((res) => {
      dictionaryList().then(res => {
        if (res.data.code === 200) {
          this.tableOption.column.forEach((item) => {
          this.tableOption.column.forEach(item => {
            if (item.label == "单位类型") {
              item.dicData = res.data.data;
            }
@@ -330,21 +335,22 @@
      param["size"] = page.pageSize;
      const { releaseTimeRange } = this.query;
      let values = {
        ...param,
        ...param
      };
      if (releaseTimeRange) {
        values = {
          ...param,
          startTime: releaseTimeRange[0],
          endTime: releaseTimeRange[1],
          ...this.query,
          ...this.query
        };
        values.releaseTimeRange = null;
      }
      selectYw(values).then((res) => {
      selectYw(values).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.tableData = data.records;
        this.$store.commit("setWindowSizeHeightAdd");
        this.loading = false;
      });
    },
@@ -404,12 +410,13 @@
      } else {
        this.dialogShow = false;
      }
    },
    }
  },
  mounted() {
    // this.getSubOfficeData();
    this.getDictionaryList();
  },
    this.$store.commit("setWindowSizeHeightAdd");
  }
};
</script>
<style lang="scss" scoped>