Skip to content

F
fk-spider-web
Commit 521284c3 by 周田
Options

Merge branch 'liucan' into 'main' 

fix:修改状态监控数字显示格式

See merge request !28
parents e584b822 ea172f23
Showing with 175 additions and 161 deletions
src/utils/formatExactLargeNum.ts
const formatExactLargeNum = (num: number | string | null) => {
if (num === null || num === undefined) return "";
if (typeof num !== "number" && typeof num !== "string") return num;
if (num === null || num === undefined) return ''
if (typeof num !== 'number' && typeof num !== 'string') return num
const parsedNum = typeof num === "string" ? Number(num.replace(/,/g, "")) : num;
const parsedNum = typeof num === 'string' ? Number(num.replace(/,/g, '')) : num
if (isNaN(parsedNum)) return num;
if (isNaN(parsedNum)) return num
// 如果大于 100 万 或大于 1 亿，使用科学计数法
if (Math.abs(parsedNum) > 1_000_000) {
return parsedNum.toExponential(2);
const absNum = Math.abs(parsedNum)
if (absNum >= 100_000_000) {
return (parsedNum / 100_000_000).toFixed(2) + '亿'
} else if (absNum >= 10_000) {
return (parsedNum / 10_000).toFixed(2) + '万'
} else {
return parsedNum.toLocaleString("en-US", {
return parsedNum.toLocaleString('en-US', {
useGrouping: true,
maximumFractionDigits: 0,
minimumFractionDigits: 0,
});
maximumFractionDigits: 2,
minimumFractionDigits: 0
})
}
};
}
export default formatExactLargeNum;
export default formatExactLargeNum
src/views/os-status/components/dataCard.vue
......@@ -9,21 +9,21 @@
<div class="wordStyle">
<span>总数据量(条):</span>
<span class="total-num" v-if="totalDataNumber !== null">{{
formatExactLargeNum(totalDataNumber) ?? "--"
formatExactLargeNum(totalDataNumber) ?? '--'
}}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>采集的页面数量(个):</span>
<span class="total-num" v-if="totalPageNumber !== null">
{{ formatExactLargeNum(totalPageNumber) ?? "--" }}</span
{{ formatExactLargeNum(totalPageNumber) ?? '--' }}</span
>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>采集的目标数量(个):</span>
<span class="total-num" v-if="totalTargetNumber !== null">
{{ formatExactLargeNum(totalTargetNumber) ?? "--" }}</span
{{ formatExactLargeNum(totalTargetNumber) ?? '--' }}</span
>
<span class="loading" v-else></span>
</div>
......@@ -36,17 +36,12 @@
<div class="items">
<div class="wordStyle">
<span>任务执行成功统计(个):</span>
<span class="total-num" v-if="successTask !== null">{{ formatExactLargeNum(successTask) ?? "--" }}</span>
<span class="total-num" v-if="successTask !== null">{{ formatExactLargeNum(successTask) ?? '--' }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>任务执行失败统计(个):</span>
<span class="total-num" v-if="failTask !== null">{{ formatExactLargeNum(failTask) ?? "--" }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>任务异常数统计(个):</span>
<span class="total-num" v-if="unusualTask !== null">{{ formatExactLargeNum(unusualTask) ?? "--" }}</span>
<span class="total-num" v-if="failTask !== null">{{ formatExactLargeNum(failTask) ?? '--' }}</span>
<span class="loading" v-else></span>
</div>
</div>
......@@ -58,17 +53,16 @@
<div class="items">
<div class="wordStyle">
<span>平均成功率:</span>
<span class="total-num" v-if="speed !== null"> {{ speed ?? "--" }}</span>
<span class="total-num" v-if="speed !== null">
{{ `${Number(Math.floor(speed * 100) / 100).toFixed(2)}%` }}</span
>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>平均错误率: </span>
<span class="total-num" v-if="errorRate !== null">{{ errorRate ?? "--" }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>平均异常率:</span>
<span class="total-num" v-if="unusualRate !== null">{{ unusualRate ?? "--" }}</span>
<span class="total-num" v-if="errorRate !== null">{{
`${Number(Math.ceil(errorRate * 100) / 100).toFixed(2)}%`
}}</span>
<span class="loading" v-else></span>
</div>
</div>
......@@ -77,73 +71,73 @@
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
import { getStatsDataList, getSpiderTaskList, getPerformanceList } from "@/api/staticData";
import { onMounted, ref } from "vue";
import formatExactLargeNum from "@/utils/formatExactLargeNum";
import { useSlideStateStore } from "@/store/slideState";
import { storeToRefs } from "pinia";
const slideStateStore = useSlideStateStore();
const { slideState } = storeToRefs(slideStateStore);
const router = useRouter();
const totalDataNumber = ref(null);
const totalPageNumber = ref(null);
const totalTargetNumber = ref(null);
const successTask = ref(null);
const failTask = ref(null);
const unusualTask = ref(null);
const speed = ref(null);
const errorRate = ref(null);
const unusualRate = ref(null);
import { useRouter } from 'vue-router'
import { getStatsDataList, getSpiderTaskList, getPerformanceList } from '@/api/staticData'
import { onMounted, ref } from 'vue'
import formatExactLargeNum from '@/utils/formatExactLargeNum'
import { useSlideStateStore } from '@/store/slideState'
import { storeToRefs } from 'pinia'
const slideStateStore = useSlideStateStore()
const { slideState } = storeToRefs(slideStateStore)
const router = useRouter()
const totalDataNumber = ref(null)
const totalPageNumber = ref(null)
const totalTargetNumber = ref(null)
const successTask = ref(null)
const failTask = ref(null)
const unusualTask = ref(null)
const speed = ref(null)
const errorRate = ref(null)
const unusualRate = ref(null)
const goToAllDataPage = () => {
router.push({
path: "/osDataDisplay/list",
path: '/osDataDisplay/list',
query: {
jump: "yes",
mode: "DSN数据",
},
});
};
jump: 'yes',
mode: 'DSN数据'
}
})
}
const goToTaskRecordPage = () => {
router.push({
path: "/osTaskRecord/list",
path: '/osTaskRecord/list',
query: {
jump: "yes",
mode: "状态监控",
},
});
};
jump: 'yes',
mode: '状态监控'
}
})
}
// 获取数据统计数据的方法
const getData = async () => {
const staticData = await getStatsDataList({});
const spiderTask = await getSpiderTaskList({});
const performance = await getPerformanceList({});
totalDataNumber.value = staticData.data.totalData;
totalPageNumber.value = staticData.data.ituPage;
totalTargetNumber.value = staticData.data.spaceTrackItemCount;
successTask.value = spiderTask.data.successCount;
failTask.value = spiderTask.data.failCount;
unusualTask.value = spiderTask.data.exceptionCount;
speed.value = performance.data.success;
errorRate.value = performance.data.error;
unusualRate.value = performance.data.exception;
};
const staticData = await getStatsDataList({})
const spiderTask = await getSpiderTaskList({})
const performance = await getPerformanceList({})
totalDataNumber.value = staticData.data.totalData
totalPageNumber.value = staticData.data.ituPage
totalTargetNumber.value = staticData.data.spaceTrackItemCount
successTask.value = spiderTask.data.successCount
failTask.value = spiderTask.data.failCount
unusualTask.value = spiderTask.data.exceptionCount
speed.value = performance.data.success
errorRate.value = performance.data.error
unusualRate.value = performance.data.exception
}
//sidebarStatus
onMounted(() => {
getData();
});
getData()
})
</script>
<style lang="scss" scoped>
.dataCard {
background-image: url("@/assets/picture/box2.png");
background-image: url('@/assets/picture/box2.png');
background-size: 100% 100%;
background-repeat: no-repeat;
// background: #c6ebfc;
......@@ -221,22 +215,37 @@ onMounted(() => {
aspect-ratio: 2;
margin-right: 30px;
--_g: no-repeat radial-gradient(circle closest-side, #4edaff 90%, #0000);
background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
background:
var(--_g) 0% 50%,
var(--_g) 50% 50%,
var(--_g) 100% 50%;
background-size: calc(100% / 3) 50%;
animation: l3 1s infinite linear;
}
@keyframes l3 {
20% {
background-position: 0% 0%, 50% 50%, 100% 50%;
background-position:
0% 0%,
50% 50%,
100% 50%;
}
40% {
background-position: 0% 100%, 50% 0%, 100% 50%;
background-position:
0% 100%,
50% 0%,
100% 50%;
}
60% {
background-position: 0% 50%, 50% 100%, 100% 0%;
background-position:
0% 50%,
50% 100%,
100% 0%;
}
80% {
background-position: 0% 50%, 50% 50%, 100% 100%;
background-position:
0% 50%,
50% 50%,
100% 100%;
}
}
</style>
src/views/os-taskRecord/index.vue
......@@ -50,27 +50,32 @@
:cell-style="{ textAlign: 'center' }"
>
<el-table-column property="number" label="序号" width="55" type="index" />
<el-table-column label="任务名称" show-overflow-tooltip>
<template #default="scope">
{{ JSON.parse(scope.row.options).jobName }}
</template>
</el-table-column>
<el-table-column property="spider" label="所属爬虫" show-overflow-tooltip />
<el-table-column property="schedule_mode" label="调度模式" show-overflow-tooltip />
<el-table-column property="run_status" label="调度状态" show-overflow-tooltip>
<template #default="scope">
{{ "已完成" }}
{{ scope.row.status ? '已完成' : '未完成' }}
</template>
</el-table-column>
<el-table-column label="错误消息" show-overflow-tooltip>
<!-- 当错误消息为空时默认值为'-' -->
<template #default="scope">
{{ scope.row.message || "-" }}
{{ scope.row.message || '-' }}
</template>
</el-table-column>
<el-table-column property="run_status" label="运行状态" show-overflow-tooltip>
<template #default="scope">
{{ scope.row.run_status === "unknown" ? "已结束" : scope.row.run_status }}
{{ scope.row.run_status === 'unknown' ? '已结束' : scope.row.run_status }}
</template>
</el-table-column>
<el-table-column label="运行耗时/ms">
<template #default="scope">
{{ scope.row.duration == 0 ? "-" : scope.row.duration }}
{{ scope.row.duration == 0 ? '-' : scope.row.duration }}
</template>
</el-table-column>
<el-table-column property="create_time" label="采集时间" width="200" show-overflow-tooltip />
......@@ -90,126 +95,123 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import Pagination from "@/components/pagination/index.vue";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { getSpiderTaskRecord } from "@/api/spiderTask.ts";
import { ElMessage } from "element-plus";
import MenuTitle from "@/components/MenuTitle.vue";
import TableSearch from "@/components/TableSearch.vue";
import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { getSpiderTaskRecord } from '@/api/spiderTask.ts'
import MenuTitle from '@/components/MenuTitle.vue'
import TableSearch from '@/components/TableSearch.vue'
//时间处理库
import dayjs from "dayjs";
import dayjs from 'dayjs'
// ElConfigProvider 组件
import { ElConfigProvider } from "element-plus";
import { ElConfigProvider } from 'element-plus'
// 引入中文包
import zhCn from "element-plus/es/locale/lang/zh-cn";
defineOptions({ name: "Pagination" });
import zhCn from 'element-plus/es/locale/lang/zh-cn'
defineOptions({ name: 'Pagination' })
// 更改分页文字
zhCn.el.pagination.total = "共 `{total} 条`";
zhCn.el.pagination.goto = "跳至";
zhCn.el.pagination.pagesize = "条/页";
zhCn.el.pagination.pageClassifier = "页";
const route = useRoute();
const router = useRouter();
zhCn.el.pagination.total = '共 `{total} 条`'
zhCn.el.pagination.goto = '跳至'
zhCn.el.pagination.pagesize = '条/页'
zhCn.el.pagination.pageClassifier = '页'
const route = useRoute()
const router = useRouter()
//初始数据为近七天
const timeValue = ref<string[]>([]);
const tableData = ref([]);
const timeValue = ref<string[]>([])
const tableData = ref([])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1,
pagerCount: 5,
});
pagerCount: 5
})
const goToStatus = () => {
if (route.query.mode === "状态监控") {
if (route.query.mode === '状态监控') {
router.push({
path: "/osStatus/list",
});
path: '/osStatus/list'
})
} else {
router.push({
path: "/osTaskInformation/list",
});
path: '/osTaskInformation/list'
})
}
};
}
const spideOptions = [
{
label: "dsn_now",
value: "dsn_now",
label: 'dsn_now',
value: 'dsn_now'
},
{
label: "itu_space_expolorer",
value: "itu_space_expolorer",
label: 'itu_space_expolorer',
value: 'itu_space_expolorer'
},
{
label: "space_track",
value: "space_track",
label: 'space_track',
value: 'space_track'
},
{
label: "es_track_transmission",
value: "es_track_transmission",
},
];
label: 'es_track_transmission',
value: 'es_track_transmission'
}
]
//表单loading标记
const tableLoading = ref(false);
const tableLoading = ref(false)
//重置查询
const resetQuery = () => {
timeValue.value = [];
spidername.value = "";
getData();
};
timeValue.value = []
spidername.value = ''
getData()
}
// 获取任务执行记录列表
const getData = async () => {
let resTime: any[] = [];
resTime.push(dayjs().subtract(7, "day").format("YYYY-MM-DD HH:mm:ss"));
resTime.push(dayjs().format("YYYY-MM-DD HH:mm:ss"));
let resTime: any[] = []
resTime.push(dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'))
resTime.push(dayjs().format('YYYY-MM-DD HH:mm:ss'))
tableLoading.value = true;
tableLoading.value = true
const res = await getSpiderTaskRecord({
page: pageObj.value.pageNo,
size: pageObj.value.pageSize,
status: "total",
times: resTime,
});
pageObj.value.total = res.data.total;
tableData.value = res.data.list;
tableLoading.value = false;
};
status: 'total',
times: resTime
})
pageObj.value.total = res.data.total
tableData.value = res.data.list
tableLoading.value = false
}
const spidername = ref("");
const spidername = ref('')
//查询数据的方法
const searchData = async () => {
let resTime: any[] = [];
let resTime: any[] = []
if (timeValue.value.length !== 0) {
const startTime = timeValue.value[0];
const endTime = timeValue.value[1];
resTime.push(dayjs(startTime).format("YYYY-MM-DD HH:mm:ss"));
resTime.push(dayjs(endTime).format("YYYY-MM-DD HH:mm:ss"));
const startTime = timeValue.value[0]
const endTime = timeValue.value[1]
resTime.push(dayjs(startTime).format('YYYY-MM-DD HH:mm:ss'))
resTime.push(dayjs(endTime).format('YYYY-MM-DD HH:mm:ss'))
}
tableLoading.value = true;
tableLoading.value = true
const res = await getSpiderTaskRecord({
page: pageObj.value.pageNo,
size: pageObj.value.pageSize,
status: "total",
status: 'total',
spider: spidername.value,
times: resTime,
});
pageObj.value.total = res.data.total;
tableData.value = res.data.list;
console.log(tableData.value);
tableLoading.value = false;
};
times: resTime
})
pageObj.value.total = res.data.total
tableData.value = res.data.list
tableLoading.value = false
}
onMounted(() => {
getData();
});
getData()
})
</script>
<style scoped>
......@@ -218,7 +220,7 @@ onMounted(() => {
}
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-image: url('@/assets/picture/box3.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
......@@ -244,7 +246,7 @@ onMounted(() => {
}
.backStyle {
background-image: url("@/assets/picture/back.png");
background-image: url('@/assets/picture/back.png');
background-size: 100% 100%;
background-repeat: no-repeat;
height: 5vh;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment