qp_onemap_ui/src/views/rwgl/Index.vue

<template>
  <el-affix :offset="0">
    <div style="block-size: 44px; inline-size: 100vw; background: #00002a"></div>
  </el-affix>
  <el-affix :offset="44">
    <div class="blue-background">
      <div style="padding: 0px 20px; margin: 0px 15px">
        <div class="left-row">
          <div>
            <span>状态：</span>
            <el-tag
              size="large"
              :effect="focusTaskStatus.includes('all') ? 'dark' : ''"
              type="primary"
              @click="changeTaskStatus()"
              style="cursor: pointer; margin: 10px 5px"
            >
              全部
            </el-tag>
            <template v-for="status in taskStatus" :key="status.index">
              <el-tag
                size="large"
                :effect="focusTaskStatus.includes(status.index) ? 'dark' : ''"
                type="primary"
                @click="changeTaskStatus(status)"
                style="cursor: pointer; margin: 10px 5px"
              >
                {{ status.name }}
              </el-tag>
            </template>
          </div>
          <div>
            <span>类别：</span>
            <el-tag
              size="large"
              :effect="focusTaskType.includes('all') ? 'dark' : ''"
              type="primary"
              @click="changeTaskType()"
              style="cursor: pointer; margin: 10px 5px"
            >
              全部
            </el-tag>
            <template v-for="type in taskType" :key="type.index">
              <el-tag
                size="large"
                :effect="focusTaskType.includes(type.index) ? 'dark' : ''"
                type="primary"
                @click="changeTaskType(type)"
                style="cursor: pointer; margin: 10px 5px"
              >
                {{ type.name }}
              </el-tag>
            </template>
          </div>
          <div class="row-search">
            <el-input
              size="mini"
              class="searcher"
              v-model="searcher"
              placeholder="请输入任务名称相关关键字"
            />
            <el-button type="primary" @click="pullTaskData(1)">搜索</el-button>
            <el-button class="reset-btn" @click="(reset(), pullTaskData(1))">重置</el-button>
          </div>
        </div>
        <!-- <div class="row">
          <el-input
            class="searcher"
            v-model="searcher"
            placeholder="请输入任务名称相关关键字"
          />
          <el-button type="primary" @click="pullTaskData(1)">搜索</el-button>
          <el-button type="primary" @click="reset(), pullTaskData(1)">重置</el-button>
        </div> -->
      </div>
      <div class="lighter-container">
        <!-- <div style="padding-bottom: 10px">检索出{{ taskNum }}条任务</div> -->
        <el-table
          table-layout="fixed"
          row-key="main_id"
          :data="taskData"
          class="table"
          :header-cell-style="headerCellStyle"
          :row-style="rowStyle"
          :cell-style="cellStyle"
          stripe
          border
        >
          <el-table-column prop="main_c_name" label="名称" />
          <el-table-column prop="main_c_user_name" label="用户" />
          <el-table-column prop="main_c_state" label="类型">
            <template #default="scope">
              <el-tag
                effect="dark"
                v-show="getType(scope.row.main_c_type) != null"
                disable-transitions
                >{{ getType(scope.row.main_c_type)?.name ?? "" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="main_c_state" label="状态">
            <template #default="scope">
              <el-tag
                effect="dark"
                v-show="getStatus(scope.row.main_c_state) != null"
                :type="statusStaticInfo[scope.row.main_c_state]?.tagType ?? ''"
                disable-transitions
                >{{ getStatus(scope.row.main_c_state)?.name ?? "" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="main_c_start_time" label="任务开始时间">
            <template #default="scope">
              {{ timeFormatter(scope.row.main_c_start_time) }}
            </template>
          </el-table-column>
          <el-table-column prop="main_c_end_time" label="任务结束时间">
            <template #default="scope">
              {{ timeFormatter(scope.row.main_c_end_time) }}
            </template>
          </el-table-column>
          <el-table-column prop="main_c_file_name" label="结果">
            <template #default="scope">
              <span
                class="link"
                v-if="scope.row.main_c_file != null && scope.row.main_c_file_name != null"
                @click="downloadWithBlob(scope.row.main_c_file, scope.row.main_c_file_name)"
              >
                {{ scope.row.main_c_file_name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="420">
            <template #default="scope">
              <el-button
                type="primary"
                @click="
                  () => {
                    dialog = true;
                    focusTask = scope.row;
                  }
                "
              >
                查看详情
              </el-button>
              <el-button
                v-if="scope.row.main_c_state == 0"
                type="success"
                @click="runTask(scope.row.main_id)"
              >
                运行
              </el-button>
              <el-button
                v-if="scope.row.main_c_state == 3"
                type="warning"
                @click="runTask(scope.row.main_id)"
              >
                重试
              </el-button>
              <template v-if="scope.row.main_c_file != null && scope.row.main_c_file_name != null">
                <el-button
                  type="primary"
                  @click="downloadWithBlob(scope.row.main_c_file, scope.row.main_c_file_name)"
                >
                  下载结果
                </el-button>
                <el-button
                  type="primary"
                  v-if="
                    scope.row.main_c_file.includes('.json') ||
                    scope.row.main_c_file.includes('.geojson') ||
                    scope.row.main_c_file.includes('.xlsx') ||
                    scope.row.main_c_file.includes('.xls')
                  "
                  @click="preView(scope.row.main_c_file)"
                >
                  预览结果
                </el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div class="between-row pagination-container">
          <div></div>
          <el-pagination
            layout="prev, pager, next"
            :total="taskNum"
            @change="(page) => pullTaskData(page)"
          />
        </div> -->
        <div class="between-row pagination-container">
          <span class="total-text">检索出{{ taskNum }}条任务</span>
          <el-pagination
            layout="prev, pager, next, jumper, total"
            :total="taskNum"
            :current-page="page"
            :page-size="pageSize"
            @current-change="pullTaskData"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog v-model="dialog" :show-close="true" width="750">
        <template #header>
          <div class="my-header">
            <span class="second-title">{{ focusTask.main_c_name }}</span>
          </div>
        </template>
        <el-descriptions class="margin-top" label-width="128" :column="1" border>
          <el-descriptions-item label="任务名称">
            {{ focusTask.main_c_name }}
          </el-descriptions-item>
          <el-descriptions-item label="任务描述">
            {{ focusTask.main_c_comment }}
          </el-descriptions-item>
          <el-descriptions-item label="任务类型">
            <el-tag
              effect="dark"
              v-show="getType(focusTask.main_c_type) != null"
              disable-transitions
              >{{ getType(focusTask.main_c_type)?.name ?? "" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="用户名">
            {{ focusTask.main_c_user_name }}
          </el-descriptions-item>
          <el-descriptions-item label="用户id">
            {{ focusTask.main_c_user_id }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag
              effect="dark"
              :type="statusStaticInfo[focusTask.main_c_state]?.tagType ?? ''"
              disable-transitions
              >{{ getStatus(focusTask.main_c_state)?.name ?? "" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="任务开始时间">
            {{ timeFormatter(focusTask.main_c_start_time) }}
          </el-descriptions-item>
          <el-descriptions-item label="任务结束时间">
            {{ timeFormatter(focusTask.main_c_end_time) }}
          </el-descriptions-item>
          <el-descriptions-item label="结果文件">
            {{ focusTask.main_c_file_name }}

            <template v-if="focusTask.main_c_file != null && focusTask.main_c_file_name != null">
              <el-button
                type="primary"
                size="small"
                @click="downloadWithBlob(focusTask.main_c_file, focusTask.main_c_file_name)"
              >
                下载结果
              </el-button>
              <el-button type="primary" size="small" @click="preView(focusTask.main_c_file)">
                预览结果
              </el-button>
            </template>
            <el-button
              v-if="focusTask.main_c_state == 3"
              type="warning"
              size="small"
              style="margin-left: 8px"
              @click="runTask(focusTask.main_id)"
            >
              重新执行
            </el-button>
          </el-descriptions-item>
          <el-descriptions-item label="原始数据">
            <template
              v-if="
                focusTask.main_c_source_file_name != null && focusTask.main_c_source_file != null
              "
            >
              {{ focusTask.main_c_source_file_name }}
              <br />
            </template>
            <template v-if="focusTask.main_c_source_data != null">
              <div class="hide-scrollbar long-text">
                {{ truncateText(focusTask.main_c_source_data, 10000) }}
              </div>
            </template>
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </div>
  </el-affix>
</template>

<script>
import { getTasks, getCName, executeTask } from "@/api/rwgl";

export default {
  data() {
    return {
      searcher: "",
      taskStatus: [],
      focusTaskStatus: ["all"],
      statusStaticInfo: {
        0: {
          tagType: "primary",
        },
        1: {
          tagType: "primary",
        },
        2: {
          tagType: "success",
        },
        3: {
          tagType: "danger",
        },
      },
      taskType: [],
      focusTaskType: ["all"],
      taskData: [],
      taskNum: 0,
      focusTask: {},
      dialog: false,
      page: 1,
      pageSize: 10,
      tableHeight: 0,
    };
  },
  computed: {
    headerCellStyle() {
      return {
        // backgroundColor: "rgba(24, 144, 255, 0.25)",
        color: "#fff",
        fontWeight: "bold",
        // borderBottom: "2px solid rgba(24, 144, 255, 0.3)",
        padding: "12px 8px",
      };
    },
    rowStyle() {
      return {
        // 调整行背景色为更浅的黑色，增加透明度
        backgroundColor: "rgba(0, 0, 0, 0.05)",
        borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
        transition: "all 0.3s ease",
      };
    },
    cellStyle() {
      return {
        color: "#e0e0e0",
        padding: "12px 8px",
        borderRight: "1px solid rgba(255, 255, 255, 0.05)",
      };
    },
  },
  mounted() {
    this.pullTaskStatus();
    this.pullTaskType();
    this.pullTaskData(1);
    this.calculateTableHeight();
    window.addEventListener("resize", this.calculateTableHeight);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.calculateTableHeight);
  },
  methods: {
    async pullTaskStatus() {
      let oData = this.$getDmsTypes("task_status");
      let newData = [];
      for (const key of Object.keys(oData)) {
        newData.push({
          index: Number(key),
          name: oData[key],
        });
      }
      this.taskStatus = newData.sort((a, b) => a.index - b.index);
    },
    changeTaskStatus(status) {
      if (status == null) {
        this.focusTaskStatus = ["all"];
      } else {
        let set = new Set(this.focusTaskStatus);
        set.delete("all");
        let index = status.index;
        if (this.focusTaskStatus.includes(index)) {
          set.delete(index);
        } else {
          set.add(index);
        }
        this.focusTaskStatus = Array.from(set);
      }
      // if(this.taskStatus.length==this.focusTaskStatus.length){
      //     this.focusTaskStatus = ["all"]
      // }
    },
    getCheckedStatus() {
      if (this.focusTaskStatus.includes("all")) {
        return null;
      } else {
        return this.focusTaskStatus;
      }
    },
    getStatus(index) {
      for (let i = 0; i < this.taskStatus.length; i++) {
        const e = this.taskStatus[i];
        if (e.index == index) {
          return e;
        }
      }
    },
    async pullTaskType() {
      let oData = this.$getDmsTypes("yzt_task_type");
      let newData = [];
      for (const key of Object.keys(oData)) {
        newData.push({
          index: Number(key),
          name: oData[key],
        });
      }
      let taskType = newData.sort((a, b) => a.index - b.index);
      for (let i = 0; i < taskType.length; i++) {
        const e = taskType[i];
        if (e.index === 100) {
          const otherItem = taskType.splice(i, 1)[0];
          taskType.push(otherItem);
          break;
        }
      }
      this.taskType = taskType;
    },
    changeTaskType(types) {
      if (types == null) {
        this.focusTaskType = ["all"];
      } else {
        let set = new Set(this.focusTaskType);
        set.delete("all");
        let index = types.index;
        if (this.focusTaskType.includes(index)) {
          set.delete(index);
        } else {
          set.add(index);
        }
        this.focusTaskType = Array.from(set);
      }
    },
    getCheckedType() {
      if (this.focusTaskType.includes("all")) {
        return null;
      } else {
        return this.focusTaskType;
      }
    },
    getType(index) {
      for (let i = 0; i < this.taskType.length; i++) {
        const e = this.taskType[i];
        if (e.index == index) {
          return e;
        }
      }
    },
    async pullTaskData(page) {
      if (page != null) this.page = page;
      let res = await getTasks(
        this.page,
        this.pageSize,
        this.searcher,
        this.getCheckedStatus(),
        this.getCheckedType()
      );
      this.taskNum = res.count;
      this.taskData = res.data;
    },
    timeFormatter(time) {
      if (time == null) return "";
      let date = new Date(time);
      return date.toLocaleString();
    },
    async downloadWithBlob(url, filename) {
      try {
        const response = await fetch(systemConfig.dmsDataProxy + url);
        const blob = await response.blob();
        const blobUrl = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = blobUrl;
        link.download = filename || "file";
        link.click();

        // 清理URL对象
        window.URL.revokeObjectURL(blobUrl);
      } catch (error) {
        console.error("下载失败:", error);
      }
    },
    reset() {
      this.focusTaskStatus = ["all"];
      this.searcher = "";
    },
    preView(url) {
      window.open("fileView?url=" + systemConfig.dmsDataProxy + url, "_blank");
    },
    async runTask(taskId) {
      try {
        const res = await executeTask(taskId);
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: res.content || "任务已提交，正在后台执行",
          });
          // 先禁用按钮，防止重复点击
          this.$refs.runTaskBtn.disabled = true;
          // 刷新任务列表
          setTimeout(() => {
            // 执行成功后，刷新任务列表
            this.pullTaskData(this.page);
          }, 300);
        } else {
          this.$message({
            type: "error",
            message: res.message || "执行任务失败",
          });
        }
      } catch (error) {
        console.error("执行任务失败:", error);
        this.$message({
          type: "error",
          message: "执行任务失败，请稍后重试",
        });
      }
    },
    truncateText(text, maxLength = 40) {
      if (typeof text !== "string" || text.length <= maxLength) {
        return text;
      }
      return text.substring(0, maxLength) + "…";
    },
    calculateTableHeight() {
      // 计算表格高度：窗口高度 - header高度 - footer高度 - 页面padding - 其他元素高度
      const windowHeight = window.innerHeight;
      const headerHeight = 70; // Header组件高度
      const footerHeight = 50; // Footer组件高度
      const pagePadding = 40 * 2; // 页面上下padding
      const filterAreaHeight = 120; // 筛选条件区域高度
      const taskCountHeight = 30; // 任务数量文字高度
      const paginationHeight = 50; // 分页区域高度
      const containerMargin = 15 * 2; // 容器上下margin

      this.tableHeight =
        windowHeight -
        headerHeight -
        footerHeight -
        pagePadding -
        filterAreaHeight -
        taskCountHeight -
        paginationHeight -
        containerMargin;
    },
  },
};
</script>

<style lang="less" scoped>
// * {
//   --el-table-bg-color: #eeeeee0b;
//   /* 表格背景 */
//   --el-table-header-bg-color: #eeeeee0b;
//   /* 表头背景 */
//   --el-table-tr-bg-color: #eeeeee0b;
//   /* 行背景 */
//   --el-table-row-hover-bg-color: #eeeeee0b;
//   /* 行悬浮背景 */
//   --el-table-header-text-color: #ededed;
//   /* 表头文字颜色 */
// }

// 美化表格行悬停效果
:deep(.el-table__body tr:hover > td) {
  background-color: rgba(24, 144, 255, 0.1) !important;
}

// 美化表格边框
:deep(.el-table__inner-wrapper) {
  border-radius: 6px;
  overflow: hidden;
}

:deep(.el-table__cell) {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

:deep(.el-table__row) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

// 调整奇偶行背景色，使其更明亮
:deep(.el-table--striped .el-table__body tr.el-table__row--striped) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

// 调整表格主体背景色
:deep(.el-table__body) {
  background-color: rgba(0, 0, 0, 0.05);
}
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
  background-color: rgba(255, 255, 255, 0.02);
}
:deep(.el-tag--primary) {
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
}
:deep(.el-tag--dark) {
  background-color: var(--el-color-primary);
}

.font,
.title,
.super-title,
.title-sub,
.second-title,
.third-title,
.strong-data,
link {
  color: #fff;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  /* IE和Edge */
  scrollbar-width: none;
  /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari和Opera */
}

.long-text {
  width: 100%;
  height: 200px;
  overflow: scroll;
}

.icon {
  color: #fff;
  fill: currentColor;
}

.middle {
  text-align: center;
}

.darkblue-background,
.dark-background,
.bluedark-background,
.blue-background,
.image-background {
  padding-top: 40px;
  padding-bottom: 40px;
  margin-left: 0;
  padding-left: 90px;
  padding-right: 90px;
  // min-height: 80vh
  height: 100vh;
}

.darkblue-background {
  background: linear-gradient(to bottom, #02060c 0%, #0f3460 40%, #0f3460 100%);
}

.dark-background {
  background: #0a0a08;
}

.blue-background,
body {
  background: #00002a;
}

.bluedark-background {
  background: linear-gradient(to bottom, #0f3460 0%, #0f3460 60%, #02060c 100%);
}

.image-background {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}

.lighter-container {
  background-color: #eeeeee0b;
  padding: 20px;
  margin: 15px;
  vertical-align: middle;
  border-radius: 10px;
}

.task-count {
  margin-bottom: 10px;
  color: #fff;
}

.pagination-container {
  margin-top: 15px;
}

.lightblue-container {
  border-radius: 3%;
  padding: 20px;
  margin: 15px;
  background: linear-gradient(to bottom, #215476 0%, #28638b 66%, #337aac 100%);
  font-size: 20px;

  .third-title {
    font-size: 28px;
    padding: 0;
  }
}

.middle-container {
  display: flex !important;
  justify-content: center;
  flex-direction: column;
  padding: 0;
  align-items: stretch;
}

.row,
.warp-row,
.between-row,
.left-row {
  display: flex !important;
  justify-content: space-between;
  padding: 0;
  align-items: stretch;
}
.row-search {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

.warp-row {
  flex-wrap: wrap;
}

.between-row {
  justify-content: space-between;
}

.left-row {
  justify-content: space-between;
}

.left-row > * {
  // margin-right: 15px;
}

.col {
  display: flex !important;
  justify-content: space-around;
  flex-direction: column;
}

.dense-col {
  display: flex !important;
  justify-content: center;
  flex-direction: column;
}

.start-reverse-col {
  display: flex !important;
  justify-content: start;
  flex-direction: column-reverse;
}

.dense-col > *,
.start-reverse-col > * {
  margin: 10px;
}

.grid-2x2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  height: 80%;
}

.strong-data {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}

.title {
  font-size: 36px;
  margin-top: 10px;
  text-align: center;
  font-weight: bold;
}

.super-title {
  font-size: 44px;
  margin-top: 10px;
  text-align: center;
  font-weight: bold;
}

.title-sub {
  font-size: 16px;
  margin-top: 10px;
  color: rgb(192, 192, 192);
  text-align: center;
}

.second-title {
  font-size: 20px;
  margin-top: 10px;
  padding-left: 10px;
  border-left: 2px solid #3498db;
  font-weight: bold;
}

.third-title {
  font-size: 18px;
  margin-top: 10px;
  padding-left: 10px;
  display: flex;
  font-weight: bold;
}

.link {
  font-weight: bold;
  /* 字体加粗 */
  text-decoration: underline;
  /* 下划线 */
  cursor: pointer;
  /* 鼠标悬浮时变为手型（可点击形式） */
}

.searcher {
  background-color: #00002a;
  margin-right: 15px;
  min-width: 200px;
  height: 34px;
}

.blue {
  color: #3498db;
}

.grey {
  color: rgb(192, 192, 192);
}

.lightgrey {
  color: rgb(229, 229, 229);
}

#echart1 {
  width: 100%;
  height: 450px;
}

.container {
  width: 1920px;
  margin: 0 auto;
}
</style>