|
|
@@ -0,0 +1,423 @@
|
|
|
+<template>
|
|
|
+ <div class="blue-background">
|
|
|
+ <div class="lighter-container">
|
|
|
+ <span>
|
|
|
+ <div>
|
|
|
+ <div>状态：</div>
|
|
|
+ <el-tag size="large" :effect="focusTaskStatus.includes('all') ? 'dark' : ''" type="primary"
|
|
|
+ @click="changeTaskStatus()">
|
|
|
+ 全部
|
|
|
+ </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)">
|
|
|
+ {{ status.name }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ <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">
|
|
|
+ 查询到{{ taskNum }}条任务
|
|
|
+ <el-table table-layout="fixed" :data="taskData" class="table">
|
|
|
+ <el-table-column prop="main_c_name" label="名称" />
|
|
|
+ <el-table-column prop="main_c_comment" label="描述" />
|
|
|
+ <el-table-column prop="main_c_state" label="状态">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag effect="dark" :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="360">
|
|
|
+ <template #default="scope">
|
|
|
+ <!-- <el-button type="primary">
|
|
|
+ 查看详情
|
|
|
+ </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" @click="preView(scope.row.main_c_file)">
|
|
|
+ 预览结果
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="between-row">
|
|
|
+ <div><!--empty div--></div>
|
|
|
+ <el-pagination layout="prev, pager, next" :total="taskNum" @change="page=>pullTaskData(page)"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getTasks, getTaskStatus } from '@/api/rwgl';
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searcher: "",
|
|
|
+ taskStatus: [],
|
|
|
+ focusTaskStatus: ["all"],
|
|
|
+ taskData: [],
|
|
|
+ taskNum: 0,
|
|
|
+ statusStaticInfo: {
|
|
|
+ 0: {
|
|
|
+ tagType: "primary"
|
|
|
+ },
|
|
|
+ 1: {
|
|
|
+ tagType: "primary"
|
|
|
+ },
|
|
|
+ 2: {
|
|
|
+ tagType: "success"
|
|
|
+ },
|
|
|
+ 3: {
|
|
|
+ tagType: "danger"
|
|
|
+ },
|
|
|
+ },
|
|
|
+ page: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.pullTaskStatus()
|
|
|
+ this.pullTaskData(1)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async pullTaskStatus() {
|
|
|
+ this.taskStatus = (await getTaskStatus()).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 this.taskStatus.map(t => t.index)
|
|
|
+ } else {
|
|
|
+ return this.focusTaskStatus
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async pullTaskData(page) {
|
|
|
+ if(page!=null)this.page = page
|
|
|
+ let res = await getTasks(this.page, 10, this.searcher, this.getCheckedStatus())
|
|
|
+ this.taskNum = res.count
|
|
|
+ this.taskData = res.data
|
|
|
+ },
|
|
|
+ getStatus(index) {
|
|
|
+ for (let i = 0; i < this.taskStatus.length; i++) {
|
|
|
+ const e = this.taskStatus[i];
|
|
|
+ if (e.index == index) {
|
|
|
+ return e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ timeFormatter(time) {
|
|
|
+ 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')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+* {
|
|
|
+ --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;
|
|
|
+ /* 表头文字颜色 */
|
|
|
+}
|
|
|
+
|
|
|
+.font,
|
|
|
+.title,
|
|
|
+.super-title,
|
|
|
+.title-sub,
|
|
|
+.second-title,
|
|
|
+.third-title,
|
|
|
+.strong-data,
|
|
|
+link {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.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: 600px;
|
|
|
+}
|
|
|
+
|
|
|
+.darkblue-background {
|
|
|
+ background: linear-gradient(to bottom,
|
|
|
+ #02060c 0%,
|
|
|
+ #0f3460 40%,
|
|
|
+ #0f3460 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.dark-background {
|
|
|
+ background: #0a0a08
|
|
|
+}
|
|
|
+
|
|
|
+.blue-background,
|
|
|
+body {
|
|
|
+ background: #0f3460
|
|
|
+}
|
|
|
+
|
|
|
+.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: 10px;
|
|
|
+ margin: 15px;
|
|
|
+ vertical-align: middle;
|
|
|
+ border-radius: 3%;
|
|
|
+}
|
|
|
+
|
|
|
+.lightblue-container {
|
|
|
+ border-radius: 3%;
|
|
|
+ padding: 10px;
|
|
|
+ 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 {
|
|
|
+ display: flex !important;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 0;
|
|
|
+ align-items: stretch;
|
|
|
+}
|
|
|
+
|
|
|
+.warp-row {
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.between-row {
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.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: #334155;
|
|
|
+ margin-right: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.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>
|
ximinghao