版本更新

Surpriseplus

2023-02-18 cbbbc6bd2d854270b9342ce2ff2a3432aaca22cf

 src/views/maintenance/downlog.vue

@@ -5,95 +5,119 @@
        `${$t('operatManage.DownloadLog')}`,
      ]"></My-bread>
    <el-divider />
    <div class="inquire">
    <div
      class="inquire subpage_Div"
      ref="container"
    >
      <el-form
        :inline="true"
        ref="sizeForm"
        :model="sizeForm"
      >
        <el-form-item
          prop="uname"
          :label="$t('operatManage.operationLogObj.username')"
        >
          <el-input
            v-model="sizeForm.uname"
            :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
          />
        </el-form-item>
        <el-form-item
          prop="type"
          :label="$t('operatManage.operationLogObj.operationType')"
        >
          <el-select
            v-model="sizeForm.type"
            :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
          >
            <el-option
              :label="$t('downlog.type1')"
              value="1"
            />
            <el-option
              :label="$t('downlog.type2')"
              value="2"
            />
            <el-option
              :label="$t('downlog.type3')"
              value="3"
            />
            <el-option
              :label="$t('downlog.type4')"
              value="4"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="start"
          :label="$t('operatManage.operationLogObj.startTime')"
        >
          <el-date-picker
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="sizeForm.start"
            style="width: 100%"
            type="datetime"
            :placeholder="$t('operatManage.operationLogObj.optionDate')"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          prop="end"
          :label="$t('operatManage.operationLogObj.endTime')"
        >
          <el-date-picker
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="sizeForm.end"
            style="width: 100%"
            type="datetime"
            :placeholder="$t('operatManage.operationLogObj.optionDate')"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            @click="onSubmit"
            icon="el-icon-search"
          size="small"      type="primary"
          >{{ $t("operatManage.operationLogObj.inquire") }}</el-button>
          <el-button
            @click="resAllTable"
            icon="el-icon-delete"
            type="info"
            size="small"
          >{{ $t("operatManage.operationLogObj.empty") }}</el-button>
        </el-form-item>
        <div class="flex_box">
          <div style="margin-right: auto">
            <el-form-item
              prop="uname"
              :label="$t('operatManage.operationLogObj.username')"
            >
              <el-input
                style="width: 200px"
                v-model="sizeForm.uname"
                :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
              />
            </el-form-item>
            <el-form-item
              prop="type"
              :label="$t('operatManage.operationLogObj.operationType')"
            >
              <el-select
                style="width: 200px"
                :popper-append-to-body="false"
                v-model="sizeForm.type"
                :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
              >
                <el-option
                  :label="$t('downlog.type1')"
                  value="1"
                />
                <el-option
                  :label="$t('downlog.type2')"
                  value="2"
                />
                <el-option
                  :label="$t('downlog.type3')"
                  value="3"
                />
                <el-option
                  :label="$t('downlog.type4')"
                  value="4"
                />
                  <el-option
                  :label="$t('downlog.type5')"
                  value="5"
                />
                  <el-option
                  :label="$t('downlog.type6')"
                  value="6"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              prop="start"
              :label="$t('operatManage.operationLogObj.startTime')"
            >
              <el-date-picker
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="sizeForm.start"
                style="width: 200px"
                type="datetime"
                :popper-class="popperclass"
                :placeholder="$t('operatManage.operationLogObj.optionDate')"
              ></el-date-picker>
            </el-form-item>
            <el-form-item
              prop="end"
              :label="$t('operatManage.operationLogObj.endTime')"
            >
              <el-date-picker
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="sizeForm.end"
                style="width: 200px"
                type="datetime"
                :placeholder="$t('operatManage.operationLogObj.optionDate')"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div>
            <el-form-item>
              <el-button
                @click="onSubmit"
                icon="el-icon-search"
                size="small"
                type="primary"
              >{{ $t("operatManage.operationLogObj.inquire") }}</el-button>
              <el-button
                @click="resAllTable"
                icon="el-icon-delete"
                type="info"
                size="small"
              >{{ $t("operatManage.operationLogObj.empty") }}</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="table_box">
    <div
      class="table_box subpage_Div"
      :style="styleVar"
    >
      <el-table
        :data="tableData"
        style="width: 100%"
        height="85%"
        height="calc(100% - 57px)"
      >
        <el-table-column
          align="center"
@@ -137,14 +161,14 @@
        />
      </el-table>
      <div
        style="margin-top: 10px"
        style="margin-top: 25px"
        class="pagination_box"
      >
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listData.pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="listData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
@@ -157,9 +181,7 @@

<script>
import MyBread from "../../components/MyBread.vue";
import {
  downlog_selectByPageAndCount
} from "../../api/api";
import { downlog_selectByPageAndCount } from "../../api/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -168,6 +190,7 @@

  data() {
    return {
      popperclass: "",
      sizeForm: {
        start: null,
        end: null,
@@ -181,12 +204,30 @@
        start: null,
        end: null,
        uname: null,
        type: null
        type: null,
      },
      count: 0,
      tableHeight: 0,
      timer: 0,
      styleVar: {
        height: "calc(100% - 109px)",
      },
    };
  },
  methods: {
    onResize() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.calHeight();
      }, 500);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 97}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
      });
    },
    formatSize(row, column) {
      let data = row[column.property];
      if (data == null) {
@@ -195,9 +236,9 @@

      if (data > 1024) {
        var val = data / 1024;
        return val + "GB"
        return val + "GB";
      } else {
        return data + "MB"
        return data + "MB";
      }
    },
    formatType(row, column) {
@@ -207,19 +248,25 @@
      }
      switch (data) {
        case 1:
          return 'Shp文件';
          return "Shp文件";
          break;
        case 2:
          return '专题图';
          return "专题图";
          break;
        case 3:
          return '元数据';
          return "源数据";
          break;
        case 4:
          return '业务数据';
          return "业务数据";
          break;
        case 5:
          return "管道分析";
          break;
        case 6:
          return "统计报告";
          break;
        default:
          return '未知数据';
          return "未知数据";
          break;
      }
    },
@@ -237,7 +284,11 @@
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y + "-" + this.add0(m) + "-" + this.add0(d) +
        y +
        "-" +
        this.add0(m) +
        "-" +
        this.add0(d) +
        " " +
        this.add0(h) +
        ":" +
@@ -261,21 +312,21 @@
        start: null,
        end: null,
        uname: null,
        type: null
      }
        type: null,
      };
      this.sizeForm = {
        start: null,
        end: null,
        uname: null,
        type: null,
      }
      };
      this.getAllData();
    },
    onSubmit() {
      this.listData.end = this.sizeForm.end;
      this.listData.start = this.sizeForm.start;
      this.listData.type = this.sizeForm.type;
      this.listData.uname = this.sizeForm.uname
      this.listData.uname = this.sizeForm.uname;
      this.getAllData();
    },

@@ -295,7 +346,15 @@
      }
      this.tableData = data.result;
      this.count = data.count;
    }
    },
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    window.removeEventListener("resize", this.onResize);
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.calHeight();
  },
  created() {
    this.getAllData();
@@ -308,130 +367,24 @@
  height: 98%;
  width: 98%;
  padding: 1%;
  position: absolute;

  .el-input {
    width: 300px;
  }
  .inquire {
    overflow: auto;
    padding: 10px;
    padding: 8px;
    margin-top: 20px;

    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);

    margin-bottom: 20px;
    .el-form-item {
      margin: 7px;
    }
    /deep/.el-form-item__label {
      color: white;
    }
    /deep/ .el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
      margin: 5px;
    }
  }
  .table_box {
    overflow: auto;
    height: 57%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
 
    /*修改table 表体的背景颜色和文字颜色*/
    /deep/ .el-table {
      background-color: transparent;

      th,
      td {
        background-color: transparent;
      }
      .el-table__expanded-cell {
        background-color: transparent !important;
      }

      // 表头背景色
      th.el-table__cell {
        background-color: #303030;
        color: #fff;
      }
      tr > td {
        background-color: #303030;
        color: #fff;
      }

      // hover效果
      tr:hover > td {
        background-color: rgba(255, 255, 255, 0.3) !important;
      }

      tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
        // text-align: center;
      }

      // 滚动条宽高
      .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px;
        height: 5px;
      }

      .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px;
        /*滚动条宽度*/
        height: 10px;
        /*滚动条高度*/
      }
      /*定义滚动条轨道 内阴影+圆角*/
      .el-table__body-wrapper::-webkit-scrollbar-track {
        box-shadow: 0px 1px 3px #216fe6 inset;
        /*滚动条的背景区域的内阴影*/
        border-radius: 10px;
      }

      /*定义滑块 内阴影+圆角*/
      .el-table__body-wrapper::-webkit-scrollbar-thumb {
        box-shadow: 0px 1px 3px #216fe6 inset;
        border-radius: 6px;
        background-color: #216fe6;
      }
    }
    .pagination_box {
      /deep/.el-input__inner {
        background-color: transparent !important;
        border: 1px solid;
        color: white;
      }
      /deep/.el-pagination__total {
        color: white;
      }
      /deep/.el-pagination__jump {
        color: white;
      }
      /deep/.el-pager li.active {
        color: #1890ff;
      }
      /deep/.el-pager li {
        color: white;
        background: transparent;
      }
      /deep/.el-pager li {
        color: white;
      }
      /deep/.btn-prev {
        background: transparent;
      }
      /deep/.btn-next {
        background: transparent;
      }
    }
  }
  .text-center {
    text-align: center;
  }
}
/deep/ .el-select .el-input__inner {
  border-color: #fff !important;
}
</style>