performance-test/src/views/transition/index.vue

<template>
  <div class="kernel">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基础信息" name="1">
        <p @click="database" class="CPC">
          数据入库风场统计数: <span>{{ windFarmCount }}</span
          >个
        </p>

        <el-drawer title="入库统计" :visible.sync="drawer">
          <div class="card" v-for="(item, index) in Rklist" :key="index">
            <p>{{ item.windFarmName }}</p>

            <ul>
              <li
                v-for="(type, typeIndex) in item.typeCountDataList"
                :key="typeIndex"
                @click="details(item.windFarmCode, type)"
              >
                <span class="sp1">{{ type.transferName }}</span>
                <span class="sp2">{{ type.count }}</span>
                <span class="sp3">{{
                  type.latestStorageTime || "无数据"
                }}</span>
              </li>
            </ul>
          </div>
        </el-drawer>

        <el-dialog title="统计信息" :visible.sync="dialogVisible" width="50%">
          <ul class="scrollable-list">
            <li v-for="(item, index) in dataset" :key="index">
              任务名称： <span>{{ item.taskName }}</span> 时间跨度：<span>{{
                item.dataMinTime
              }}</span
              >~<span>{{ item.dataMaxTime }}</span>
            </li>
          </ul>
        </el-dialog>

        <el-descriptions title="最新入库详情">
          <el-descriptions-item label="任务名称">{{
            this.incoming.taskName
          }}</el-descriptions-item>
          <el-descriptions-item label="数据类型">{{
            this.incoming.transferTypeName
          }}</el-descriptions-item>
          <el-descriptions-item label="时间颗粒度"
            >{{ this.incoming.timeGranularity }}(秒)</el-descriptions-item
          >
          <el-descriptions-item label="时间范围"
            >{{ this.incoming.dataMinTime }}~{{
              this.incoming.dataMaxTime
            }}</el-descriptions-item
          >
          <el-descriptions-item label="风场名称">{{
            this.incoming.windFarmName
          }}</el-descriptions-item>
          <el-descriptions-item label="机组数量">{{
            this.incoming.engineCount
          }}</el-descriptions-item>
          <el-descriptions-item label="入库时间">{{
            this.incoming.transferFinishTime
          }}</el-descriptions-item>
          <el-descriptions-item label="收资人">{{
            this.incoming.dataCollector
          }}</el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
    </el-collapse>

    <div class="condition">
      <p>
        风场名称：
        <el-select v-model="windvalue" placeholder="请选择">
          <el-option
            v-for="item in windoptions"
            :key="item.fieldCode"
            :label="item.fieldName"
            :value="item.fieldCode"
          >
          </el-option>
        </el-select>
      </p>
      <p>
        转换类型：
        <el-select v-model="typevalue" placeholder="请选择">
          <el-option
            v-for="item in typeoptions"
            :key="item.paramKey"
            :label="item.paramValue"
            :value="item.paramKey"
          >
          </el-option>
        </el-select>
      </p>
      <p>
        转换状态：
        <el-select v-model="statevalue" placeholder="请选择">
          <el-option
            v-for="item in stateoptions"
            :key="item.transferStatus"
            :label="item.label"
            :value="item.transferStatus"
          >
          </el-option>
        </el-select>
      </p>

      <div>
        <el-button @click="query">查询</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button @click="newtransition">新增转换</el-button>
      </div>
    </div>

    <el-dialog title="转换" :visible.sync="transitionShow" width="30%">
      <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
        <el-form-item label="选择风场" prop="wind">
          <el-select v-model="form.wind" clearable placeholder="请选择风场">
            <el-option
              v-for="item in windoptions"
              :key="item.fieldCode"
              :label="item.fieldName"
              :value="item.fieldCode"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="转换类型" prop="type">
          <el-select v-model="form.type" clearable placeholder="请选择转换类型">
            <el-option
              v-for="item in typeoptions"
              :key="item.paramKey"
              :label="item.paramValue"
              :value="item.paramKey"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="读取路径" prop="path">
          <el-input v-model="form.path" clearable />
        </el-form-item>

        <el-form-item label="收资人" prop="name">
          <el-input v-model="form.name" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>

      <el-dialog
        width="40%"
        title="提交"
        :visible.sync="innerVisible"
        append-to-body
      >
        <div class="renwu">
          <p>
            任务名称：<el-input
              placeholder="请输入内容"
              v-model="nameinput"
              clearable
            >
            </el-input>
          </p>
          <el-button @click="onruku">确定</el-button>
        </div>
      </el-dialog>
    </el-dialog>

    <template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="风场编号:">
                <span>{{ props.row.windFarmCode }}</span>
              </el-form-item>
              <el-form-item label="风场名称:">
                <span>{{ props.row.windFarmName }}</span>
              </el-form-item>
              <el-form-item label="任务名称:">
                <span>{{ props.row.taskName }}</span>
              </el-form-item>
              <el-form-item label="收资人:">
                <span>{{ props.row.dataCollector }}</span>
              </el-form-item>
              <el-form-item label="原始数据读取路径:">
                <span>{{ props.row.readDir }}</span>
              </el-form-item>
              <el-form-item label="标准化数据保存路径:">
                <span>{{ props.row.archivePath }}</span>
              </el-form-item>
              <el-form-item label="时间跨度:">
                <span
                  >{{ props.row.dataMinTime }}~{{ props.row.dataMaxTime }}</span
                >
              </el-form-item>

              <el-form-item label="时间颗粒度(秒):">
                <span>{{ props.row.timeGranularity }}</span>
              </el-form-item>

              <el-form-item label="异常信息:" class="form-item">
                <span>{{ props.row.errInfo }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="风场名称" prop="windFarmName" width="200">
        </el-table-column>
        <el-table-column label="任务名称" prop="taskName" > </el-table-column>
        <el-table-column label="转换类型" prop="transferTypeName" width="130">
        </el-table-column>
        <el-table-column label="导入状态" prop="transferStatus" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.transferStatus === -1">等待导入</span>
            <span v-if="scope.row.transferStatus === 0">导入中</span>
            <span v-if="scope.row.transferStatus === 1">导入成功</span>
            <span v-if="scope.row.transferStatus === 2">导入失败</span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" prop="createTime">
        </el-table-column>
        <el-table-column label="操作" prop="desc">
          <template slot-scope="scope">
            <el-button @click="editor(scope.row)" type="text" size="small">
              编辑
            </el-button>

            <el-button
              @click="restart(scope.row)"
              type="text"
              size="small"
              v-if="scope.row.transferStatus !== 1"
            >
              重新导入
            </el-button>
          </template></el-table-column
        >
      </el-table>
      <el-pagination
        class="fenye"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </template>
  </div>
</template>

<script>
import axios from "axios";
import { getWindFieldNames } from "@/api/ledger.js";
export default {
  data() {
    return {
      dialogVisible: false,
      dataset: [],
      windFarmCount: "",
      typevalue: "",
      typeoptions: [],
      statevalue: "",
      incoming: {},
      stateoptions: [
        {
          transferStatus: -1,

          label: "等待转换",
        },
        {
          transferStatus: 0,

          label: "转换中",
        },
        {
          transferStatus: 1,

          label: "转换成功",
        },
        {
          transferStatus: 2,

          label: "转换失败",
        },
      ],
      activeNames: ["1"],
      windvalue: "",
      windoptions: [],
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      total: 0,
      drawer: false,
      tableData: [],
      Rklist: [],
      nameinput: "",
      transitionShow: false,
      innerVisible: false,
      form: {
        wind: "",
        type: "",
        path: "",
        name: "",
      },
      formRules: {
        wind: [{ required: true, message: "请选择风场", trigger: "blur" }],
        type: [{ required: true, message: "请选择转换类型", trigger: "blur" }],
        path: [{ required: true, message: "请输入读取路径", trigger: "blur" }],
        name: [{ required: true, message: "请输入收资人", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getchaxun();
    this.gettongji();
    this.getzuijin();
    this.windsite();
    this.query();
  },
  methods: {
    load() {
      this.count += 2;
    },

    async getchaxun() {
      const params = {
        type: "trans_type", // 假设 trans_type 是你传递的参数
      };
      try {
        const res = await axios.get("/ETLapi/sysConf/getByType", { params });
        this.typeoptions = res.data.datas;
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    },

    async gettongji() {
      try {
        const res = await axios.post("/ETLapi/dataTransfer/getStatisticalData");
        this.windFarmCount = res.data.datas.windFarmCount;
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    },

    async getzuijin() {
      try {
        const res = await axios.post(
          "/ETLapi/dataTransfer/recentlyImportedSuccessfulData"
        );
        this.incoming = res.data.datas;
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    },

    async windsite() {
      try {
        const res = await getWindFieldNames();
        this.windoptions = res.data;
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    },

    async query() {
      const params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        transferStatus: this.statevalue,
        transferType: this.typevalue,
        windFarmCode: this.windvalue,
      };
      try {
        const res = await axios.post(
          "/ETLapi/dataTransfer/getDataTransfer",
          params
        );
        this.tableData = res.data.datas;
        this.total = res.data.totalCount;
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    },

    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.query(); // 更新后重新请求数据
    },

    // 处理页码变化
    handleCurrentChange(page) {
      this.currentPage = page; // 更新当前页
      this.query(); // 重新请求数据
    },
    reset() {
      this.windvalue = "";
      this.typevalue = "";
      this.statevalue = "";
      this.query();
    },

    restart(row) {
      axios
        .get(`/ETLapi/dataTransfer/reTransfer/${row.id}`)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message({
              message: "重新导入成功",
              type: "success",
            });
            this.query();
          }
          if (res.data.code === 500) {
            this.$message.error(res.data.message);
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },

    database() {
      this.drawer = true;
      axios
        .post(`/ETLapi/dataTransfer/classificationImportDataDetails`)
        .then((res) => {
          if (res.data.code === 200) {
            this.Rklist = res.data.datas;
          }
          if (res.data.code === 500) {
            this.$message.error(res.data.message);
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },

    details(windFarmCode, type) {
      this.dialogVisible = true;
      // console.log(windFarmCode, type);
      // return;
      const params = {
        pageNo: "1",
        pageSize: "999",
        transferStatus: 1,
        transferType: type.transferType,
        windFarmCode: windFarmCode,
      };
      axios
        .post("/ETLapi/dataTransfer/getDataTransfer", params)
        .then((res) => {
          this.dataset = res.data.datas;
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },

    newtransition() {
      this.transitionShow = true;
    },

    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，执行提交操作
          const currentTime = this.$formatDateTWO(new Date());
          const selectedWind = this.windoptions.find(
            (option) => option.fieldCode === this.form.wind
          );
          const selectedType = this.typeoptions.find(
            (option) => option.paramKey === this.form.type
          );
          const windLabel = selectedWind ? selectedWind.fieldName : "";
          const typeLabel = selectedType ? selectedType.paramValue : "";

          // 拼接 nameinput
          this.nameinput = `${windLabel}${typeLabel}${currentTime}`;
          this.innerVisible = true;
        } else {
          console.log("表单验证失败");
        }
      });
    },
    onruku() {
      const params = {
        dataCollector: this.form.name,
        readDir: this.form.path,
        taskName: this.nameinput,
        transferType: this.form.type,
        windFarmCode: this.form.wind,
        windFarmName:
          this.windoptions.find((option) => option.fieldCode === this.form.wind)
            ?.fieldName || "",
      };
   
      axios
        .post("/ETLapi/dataTransfer/addDataTransferTask", params)
        .then((res) => {
          this.innerVisible = false;
          this.transitionShow = false;
          if (res.data.code === 200) {
            this.$message({
              message: "导入成功",
              type: "success",
            });
            this.query();
          }
          if (res.data.code === 500) {
            this.$message.error(res.data.message);
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.CPC {
  border: 1px solid #008080;
  background: #00808057;
  display: inline-block;
  padding: 10px;
  color: #000000;
  border-radius: 5px;
  cursor: pointer;
}
.kernel {
  min-height: 100vh;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 0 40px;

  h3 {
    font-size: 40px;
    font-weight: 600;
    text-align: center;
  }

  .condition {
    display: flex;
    padding: 20px 0;

    p {
      margin-right: 20px;
    }
  }
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

::v-deep .el-collapse-item__header {
  font-weight: 600;
  font-size: 18px;
}

.fenye {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.card {
  margin: 10px 30px;
  border-radius: 4px;
  padding: 20px;
  border: 1px solid #b3b3b3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  p {
    font-weight: 600;
    font-size: 16px;
  }
  ul {
    padding-left: 10px;
    li:hover {
      background: #008080;
      color: #fff;
      cursor: pointer;
    }
    span {
      display: inline-block;
    }
    .sp1 {
      width: 120px;
    }
    .sp2 {
      width: 50px;
    }
  }
}

.renwu {
  display: flex;
  .el-input {
    width: 400px;
    margin-right: 20px;
  }
}
.demo-table-expand {
  display: flex;
  flex-wrap: wrap;
  /* 允许换行 */
  gap: 0px;
  /* 子元素间距 */
}

.demo-table-expand .el-form-item {
  flex: 1 1 100%;
  /* 每个表单项占满一行 */
  display: inline-flex;
  /* 让每个项都在一行显示 */
  margin-bottom: 0;
  /* 去掉多余的底部边距 */
}

.demo-table-expand .el-form-item label {
  width: 120px;
  /* 可以根据需要调整标签宽度 */
  margin-right: 10px;
  /* 标签和内容的间距 */
}

.demo-table-expand .el-form-item span {
  flex: 1;
  /* 内容占满剩余空间 */
}

/* 确保 label 能根据内容换行 */
.form-item {
  display: flex;
  /* 使用 Flexbox 布局 */
  flex-wrap: wrap;
  /* 允许换行 */
  align-items: center;
  /* 标签和内容在垂直方向上对齐 */
}

.form-item label {
  white-space: normal;
  /* 允许标签文本换行 */
  word-wrap: break-word;
  /* 自动断行 */
  max-width: 150px;
  /* 限制标签宽度，防止过长 */
}

.form-item span {
  flex: 1;
  /* 内容部分占满剩余空间 */
  word-wrap: break-word;
  /* 内容部分也允许换行 */
  white-space: normal;
  /* 内容部分的文本能自动换行 */
}

.scrollable-list {
  height: 400px;
  overflow-y: auto;
  /* 其他样式 */
}

/* 自定义滚动条 */
.scrollable-list::-webkit-scrollbar {
  width: 8px; /* 设置滚动条的宽度 */
}

.scrollable-list::-webkit-scrollbar-track {
  background: #f1f1f1; /* 设置滚动条轨道的背景颜色 */
  border-radius: 4px;
}

.scrollable-list::-webkit-scrollbar-thumb {
  background: #888; /* 设置滚动条滑块的颜色 */
  border-radius: 4px;
}

.scrollable-list::-webkit-scrollbar-thumb:hover {
  background: #555; /* 鼠标悬停时滑块的颜色 */
}

::v-deep .el-drawer__header > :first-child {
  font-size: 18px;
  font-weight: 800;
  color: #000000;
}
</style>