SixUnificationCDC-UI/src/views/unified-access/access-statistical-analysis/yesterday-exchange-volume/index.vue

<template>
  <el-container>
    <el-header height="30px" class="content-header">
      <div class="header-container">
        <div class="header-title">昨天天交换量</div>
        <!-- <el-form :model="searchformModel" ref="searchForm" label-position="left" class="header-form-detail-inline"
          inline>
          <el-form-item label="表名" prop="name">
            <el-input v-model="searchformModel.name" placeholder="请输入表名"></el-input>
          </el-form-item>
          <el-form-item label="更新方式" prop="name">
            <el-radio-group v-model="searchformModel.radio4" size="mini">
              <el-radio-button label="全部"></el-radio-button>
              <el-radio-button label="增量更新"></el-radio-button>
              <el-radio-button label="全文对比更新"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="六统一接口" prop="name">
            <el-input v-model="searchformModel.name" placeholder="请输入六统一接口"></el-input>
          </el-form-item>
          <el-form-item label="数据源(系统名称)" prop="name">
            <el-input v-model="searchformModel.name" placeholder="请输入数据源(系统名称)"></el-input>
          </el-form-item>
          <el-form-item label="数据源IP" prop="name">
            <el-input v-model="searchformModel.name" placeholder="请输入数据源IP"></el-input>
          </el-form-item>
          <el-form-item label="数据源接收方(系统名称)" prop="name">
            <el-input v-model="searchformModel.name" placeholder="请输入数据源接收方(系统名称)"></el-input>
          </el-form-item>
          <el-form-item label="数据源接收方IP" prop="name">
            <el-input v-model="searchformModel.name" placeholder="请输入数据源接收方IP"></el-input>
          </el-form-item>
          <el-form-item label="时间" prop="name">
            <div style="display: flex; align-items: center; width: 100%">
              <el-date-picker v-model="searchformModel.value2" type="datetimerange" :picker-options="pickerOptions"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
              </el-date-picker>
              <el-radio-group v-model="searchformModel.radio4" size="mini"
                style="display: flex; width: 100%; margin-left: 10px">
                <el-radio-button label="当天"></el-radio-button>
                <el-radio-button label="当周"></el-radio-button>
                <el-radio-button label="当月"></el-radio-button>
                <el-radio-button label="当年"></el-radio-button>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item label="" prop="">
            <el-button type="primary" size="mini" @click="handleSubmit">搜索</el-button>
            <el-button size="mini" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form> -->
      </div>
    </el-header>
    <el-container>
      <el-main>
        <MyTableHeader
          :title="tableHeaderTitle"
          :tabs="tabs"
          :buttons="buttons"
          @tabClick="handleTabClick"
          @buttonClick="handleButtonClick"
        ></MyTableHeader>

        <MyTable
          :tableData="tableData"
          :formData="formData"
          :minWidth="340"
          ref="myTableRef"
          @selection-change="handleSelectionChange"
          :isOperate="isOperate"
        >
        </MyTable>
        <MyPagination
          :total="tableTotal"
          :page-size="pageSize"
          :current-page="currentPage"
          @pageChange="pagi_changePage"
          @sizeChange="pagi_changeSize"
        ></MyPagination>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { getExchangeCount } from "@/api/unified-access/access-statistical-analysis.js";
import MyHeader from "@/components/MyHeader";
import MyTable from "@/components/MyTable";
import MyPagination from "@/components/MyPagination";
import MyTableHeader from "@/components/MyTableHeader";
export default {
  name: "access-config",
  components: {
    MyHeader,
    MyTableHeader,
    MyTable,
    MyPagination,
  },
  data() {
    return {
      searchformModel: {},
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      showDialog: false,
      title: "新增",
      rowObj: {},
      type: "add",
      isOperate: false,
      yesterday:'',
      tableData: [],
      formData: [
        {
          label: "操作表",
          fieldName: "tableName",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "inx",
          fieldName: "inx",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "表当日实际Insert数量",
          fieldName: "insertCount",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "日志_Update数量",
          fieldName: "updateCountLog",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "表当日实际update数量",
          fieldName: "updateCount",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "日志_Delete数量",
          fieldName: "deleteCountLog",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },

        {
          label: "表当日实际Delete数量",
          fieldName: "deleteCount",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "插入失败",
          fieldName: "insertError",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "更新失败",
          fieldName: "updateError",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "删除失败",
          fieldName: "deleteError",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "操作时间",
          fieldName: "time",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "插入_更新_删除总量",
          fieldName: "allCount",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "jkcloud实际入库数量",
          fieldName: "runTime",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "数量对比差值",
          fieldName: "runTime",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
      ],
      tableTotal: 0,
      pageSize: 10,
      currentPage: 1,
      selectedRows: [], // 存储选中的行数据
      searchForm: {},
      treeSearchVal: "",
      tableHeaderTitle: "项目列表",
      tabs: [],
      buttons: [
        // {
        //   label: "导出",
        //   type: "primary",
        //   methodName: "action1",
        //   icon: "el-icon-upload",
        // },
        // {
        //   label: "对账",
        //   type: "primary",
        //   methodName: "action2",
        //   icon: "el-icon-download",
        // },
      ],

      headerFormData: [
        {
          label: "接入方式",
          fieldName: "dataManner",
          type: "input",
          value: "",
          placeholder: "请输入接入方式",
          // isRequired: true,
        },
        {
          fieldName: "status",
          label: "状态",
          type: "select",
          trigger: "change",
          value: "",
          isRequired: false,
          options: [
            { value: 1, label: "正常" },
            { value: 0, label: "停用" },
          ],
        },
        // {
        //   label: "用户状态",
        //   fieldName: "gender",
        //   type: "select",
        //   value: "",
        //   placeholder: "请选择用户状态",
        //   isRequired: true,
        //   options: [
        //     { label: "男", value: "male" },
        //     { label: "女", value: "female" },
        //   ],
        // },
        // {
        //   label: "生日",
        //   fieldName: "birthdate",
        //   type: "date",
        //   value: "",
        //   placeholder: "请选择生日",
        //   isRequired: false,
        // },
      ],
    };
  },

  methods: {
    // 头部搜索框
    handleHeaderFormSubmit(form) {
      this.searchForm = form;
      this.getList();
    },
    // 树结构点击
    handleNodeClick() {},
    // 列表头部
    handleTabClick(tab) {
      this.tabs.forEach((item) => {
        if (item.label === tab.label) {
          item.active = true;
        } else {
          item.active = false;
        }
      });
    },
    // 列表头部功能按钮
    handleButtonClick(methodName) {
      console.log(methodName, "methodName");

      switch (methodName) {
        case "action1":
          // 新增
          this.rowObj = {};
          this.title = "新增";
          this.showDialog = true;
          break;
        case "action2":
          // 导出
          if (this.selectedRows.length > 0) {
            // exportTabAccessConfig().then((res) => {
            //   if (+res.code === 200) {
            //   }
            // });
            let ids = [];
            ids = this.selectedRows.map((item) => item.id);
            this.download(
              "/web/tab-access-config/export",
              {
                ids,
              },
              `统一接入配置_${new Date().getTime()}.xlsx`
            );
          } else {
            this.$confirm("请选择列表项?", "提示", {
              confirmButtonText: "关闭",
              cancelButtonText: "取消",
              showCancelButton: false,
              showConfirmButton: false,
              type: "warning",
              center: true,
            })
              .then(() => {})
              .catch(() => {});
          }
          break;

        default:
          break;
      }
    },
    // 处理选中项变化
    handleSelectionChange(selectedRows) {
      this.selectedRows = selectedRows; // 获取选中的行
    },

    getList() {
      const todayDate = new Date()
      // 获取昨天的日期
      const yesterdayDate = new Date(todayDate);
      yesterdayDate.setDate(todayDate.getDate() - 1);
      this.yesterday = this.formatDate(yesterdayDate);
      getExchangeCount({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        dateTime: this.yesterday,
        ...this.searchForm,
      }).then((res) => {
        if (+res.code === 200) {
          this.tableData = res.rows;
          this.tableTotal = +res.total;
        }
      });
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    // 列表分页
    pagi_changePage(page) {
      this.currentPage = page;
      this.getList();
    },
    pagi_changeSize(size) {
      this.pageSize = size;
      this.getList();
    },

    // 弹窗
    handleConfirm() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },

    // 编辑
    handleView(row) {
      this.rowObj = row;
      this.title = "查看";
      this.showDialog = true;
    },
    handleEdit(row) {
      console.log(row, "row");
      this.rowObj = row;
      console.log(this.rowObj, "this.rowObj");

      this.title = "编辑";
      this.showDialog = true;
    },

    beforeClose() {
      this.showDialog = false;
    },

    handleStart(row) {
      let pForm = {};
      pForm = { ...row };
      pForm.status = 1;
      updateTabAccessConfigById({ ...pForm }).then((res) => {
        if (+res.code === 200) {
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.getList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleStop(row) {
      let pForm = {};
      pForm = { ...row };
      pForm.status = 0;
      updateTabAccessConfigById({ ...pForm }).then((res) => {
        if (+res.code === 200) {
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.getList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
        type: "warning",
      })
        .then(() => {
          delTabAccessConfigById(row.id).then((res) => {
            if (+res.code === 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {},
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.el-main {
  padding: 0 20px;
}

.el-icon-search {
  font-size: 16px;
  font-weight: 700;
  color: #1e80e0;
}

.header-container {
  padding: 20px 20px 0 0;
  width: 100%;
  display: flex;
  // align-items: center;
  line-height: 1;
}

.header-title {
  font-size: 20px;
  width: 360px;
  // margin-right: 40px;
}

.btn-box {
  display: inline-block;
}
</style>