betaqi 5 days ago
parent
commit
5546f8ae3e
  1. 1
      .env.cloud
  2. 2
      .env.local
  3. 2
      package.json
  4. 3
      src/api/module/taks/index.ts
  5. 27
      src/composables/useZMQJsonWorker.ts
  6. 20
      src/router/index.ts
  7. 18
      src/views/firmwareUpload/index.vue
  8. 38
      src/views/taskList/index.vue
  9. 64
      src/views/taskList/infoDrawer.vue
  10. 12
      src/views/testG6/index.vue
  11. 12
      vite.config.ts

1
.env.cloud

@ -1,2 +1,3 @@ @@ -1,2 +1,3 @@
VITE_APP_ENV = cloud
VITE_BASE_URL = 'http://192.168.1.99:8080'
VITE_ZMQ_BASE_URL = '192.168.1.99'

2
.env.local

@ -1 +1,3 @@ @@ -1 +1,3 @@
VITE_APP_ENV = local
VITE_BASE_URL = 'http://192.168.1.99:8080'
VITE_ZMQ_BASE_URL = '192.168.1.99'

2
package.json

@ -9,7 +9,7 @@ @@ -9,7 +9,7 @@
"preview": "vite preview",
"build-only": "vite build",
"build:dev": "vite build --mode development",
"build:prod": "vite build --mode prod",
"build:cloud": "vite build --mode cloud",
"type-check": "vue-tsc --build"
},
"dependencies": {

3
src/api/module/taks/index.ts

@ -12,8 +12,7 @@ export const getTaskList = (params: Param) => @@ -12,8 +12,7 @@ export const getTaskList = (params: Param) =>
}>({
url: 'api/task/summary',
method: 'get',
data: params,
params,
})

27
src/composables/useZMQJsonWorker.ts

@ -1,15 +1,26 @@ @@ -1,15 +1,26 @@
import { WorkerCMD, ZmqCMD, } from '@/utils/zmq'
import type { ManualAction, PublishMsg, PubMsgData, SubMsgData, TimeoutMsg, ZmqMessage } from '@/utils/zmq'
import type {
ManualAction,
PublishMsg,
PubMsgData,
SubMsgData,
TimeoutMsg,
ZmqMessage
} from '@/utils/zmq'
import webWorker from '@/utils/zmqJsonWorker?worker'
const env = import.meta.env
const defaultHost = import.meta.env.PROD ? window.location.hostname : '192.168.1.199'
let defaultHost = env.VITE_ZMQ_BASE_URL
if (env.VITE_APP_ENV === 'local') {
defaultHost = window.location.hostname === 'localhost' ? env.VITE_ZMQ_BASE_URL : window.location.hostname
}
class ZMQJsonWorker {
private static instance: ZMQJsonWorker | null = null; // ➤ 单例实例
private worker: Worker;
private scribeHandlers: Map<string, (msg: SubMsgData | PubMsgData) => void> = new Map();
private pubTimeoutHandlers: Map<string, (msg: TimeoutMsg) => void> = new Map();
private host: string;
private readonly host: string;
private statusCallback: ((status: string) => void) | null = null;
private isAlwaysListenMsgMap: Map<string, PublishMsg<any>> = new Map();
@ -64,7 +75,13 @@ class ZMQJsonWorker { @@ -64,7 +75,13 @@ class ZMQJsonWorker {
if (isAlwaysListen) {
this.isAlwaysListenMsgMap.set(`${msg.id}`, msg)
}
this.worker.postMessage({ cmd: WorkerCMD.PUBLISH, topic, msg: JSON.stringify(msg), isTimeout, isAlwaysListen });
this.worker.postMessage({
cmd: WorkerCMD.PUBLISH,
topic,
msg: JSON.stringify(msg),
isTimeout,
isAlwaysListen
});
}
setStatusCallback(callback: (status: string) => void) {
@ -104,7 +121,7 @@ class ZMQJsonWorker { @@ -104,7 +121,7 @@ class ZMQJsonWorker {
private handleMessage(e: MessageEvent<ZmqMessage>) {
const { cmd, msg, topic, community } = e.data;
console.log(e.data)
if (cmd === ZmqCMD.STATUS) {
const status = community ? 'disconnected' : 'connected';
if (this.statusCallback) {

20
src/router/index.ts

@ -53,16 +53,16 @@ export const defaultRouter = [ @@ -53,16 +53,16 @@ export const defaultRouter = [
icon: 'i-mingcute:task-line',
}
},
{
path: '/testG6',
name: 'testG6',
component: () => import('@/views/testG6/index.vue'),
meta: {
title: '测试G6',
isShow: true,
icon: 'i-mingcute:task-line',
}
}
// {
// path: '/testG6',
// name: 'testG6',
// component: () => import('@/views/testG6/index.vue'),
// meta: {
// title: '测试G6',
// isShow: true,
// icon: 'i-mingcute:task-line',
// }
// }
],
},
]

18
src/views/firmwareUpload/index.vue

@ -1,17 +1,23 @@ @@ -1,17 +1,23 @@
<template>
<div class="flex justify-center items-center size-full">
<EdfsWrap :title="title" style="width: 50%; height: 50%">
<el-upload v-model:fileList="fileList" v-loading="loading" element-loading-text="上传中..." drag action=""
accept=".zip,.tar,.tar.gz" :limit="1" :on-exceed="handleExceed" :auto-upload="false" ref="uploadRef"
<el-upload v-model:fileList="fileList" v-loading="loading" element-loading-text="上传中..."
drag action=""
accept=".zip,.tar,.tar,.gz" :limit="1" :on-exceed="handleExceed"
:auto-upload="false"
ref="uploadRef"
:before-upload="beforeAvatarUpload" class="h-[calc(100%-30px)] w-full">
<div class="i-line-md:cloud-alt-upload-loop text-20px mx-auto"></div>
<div class="text">拖拽文件或者 <em>点击上传</em></div>
<template #tip v-if="!fileList.length">
<div class="el-upload__tip">上传限制一个文件新文件会覆盖旧文件仅支持 .zip.tar .tar.gz 格式</div>
<div class="el-upload__tip">上传限制一个文件新文件会覆盖旧文件仅支持 .zip.tar
.tar.gz 格式
</div>
</template>
</el-upload>
<div class="flex justify-center">
<el-button type="primary" @click="onSave" v-show="fileList.length && !loading">确定上传</el-button>
<el-button type="primary" @click="onSave" v-show="fileList.length && !loading">确定上传
</el-button>
<el-button type="info" v-show="loading" @click="onClone">取消上传</el-button>
</div>
</EdfsWrap>
@ -62,6 +68,7 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => { @@ -62,6 +68,7 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
return true
}
function validate() {
if (!fileList.value.length) {
message.error('请上传文件')
@ -70,6 +77,7 @@ function validate() { @@ -70,6 +77,7 @@ function validate() {
return beforeAvatarUpload(fileList.value[0].raw!)
}
const loading = ref(false)
const abortController = ref<AbortController>()
@ -163,6 +171,7 @@ async function createChunksFromFileData(file: File, chunkSize: number) { @@ -163,6 +171,7 @@ async function createChunksFromFileData(file: File, chunkSize: number) {
function clearData() {
fileList.value = []
}
function onClone() {
if (loading.value) {
abortController.value?.abort()
@ -170,6 +179,7 @@ function onClone() { @@ -170,6 +179,7 @@ function onClone() {
}
clearData()
}
const firmwarePath = ref<string>()
const title = computed(() => {

38
src/views/taskList/index.vue

@ -1,11 +1,14 @@ @@ -1,11 +1,14 @@
<template>
<div class="task-list wh-full">
<EdfsWrap title="任务列表" class="h-full">
<EdfsTable class="wh-full" v-loading="loading" :data="list" ref="tableRef" :highlight-current-row="true"
:page-total="total" :current-page="queryParams.page" :page-size="queryParams.size" row-class-name="row"
<EdfsTable class="wh-full" v-loading="loading" :data="list" ref="tableRef"
:highlight-current-row="true"
:page-total="total" :current-page="queryParams.page" :page-size="queryParams.size"
row-class-name="row"
@pageCurrentChange="handleJump">
<template v-for="(col, idx) in tableCol" :key="idx">
<el-table-column v-if="col.prop.endsWith('Time')" :label="col.label" :min-width="col.minWidth">
<el-table-column v-if="col.prop.endsWith('Time')" :label="col.label"
:min-width="col.minWidth">
<template #default="scope">
{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
</template>
@ -26,8 +29,10 @@ @@ -26,8 +29,10 @@
</template>
<el-table-column label="操作" width="210" align="center">
<template #default="scope">
<EdfsButton size="small" link type="primary" inner-text="详情" @click="onDetail(scope.row)" />
<EdfsButton size="small" link type="danger" v-if="[0, 1].includes(scope.row.mode)" inner-text="取消任务"
<EdfsButton size="small" link type="primary" inner-text="详情"
@click="onDetail(scope.row)"/>
<EdfsButton size="small" link type="danger" v-if="[0, 1].includes(scope.row.mode)"
inner-text="取消任务"
@click="onCancel(scope.row.id)"/>
</template>
</el-table-column>
@ -35,12 +40,21 @@ @@ -35,12 +40,21 @@
</EdfsWrap>
</div>
<InfoDrawer ref="InfoDrawerRef" />
<InfoDrawer ref="InfoDrawerRef" @task-finish="onTaskFinish"/>
</template>
<script setup lang="ts">
import { cancelTask, getTaskInfo, getTaskList, type TaskInfo, type TaskList } from '@/api/module/taks'
import {
cancelTask,
getTaskInfo,
getTaskList,
type TaskInfo,
type TaskList
} from '@/api/module/taks'
import { useMessage } from '@/composables/useMessage'
import EdfsWrap from "@/components/Edfs-wrap.vue";
import EdfsTable from "@/components/Edfs-table/index.vue";
import EdfsButton from "@/components/Edfs-button.vue";
import dayjs from 'dayjs'
import InfoDrawer from './infoDrawer.vue'
@ -113,15 +127,25 @@ function handleJump(page: number) { @@ -113,15 +127,25 @@ function handleJump(page: number) {
}
const InfoDrawerRef = ref<typeof InfoDrawer>()
function onDetail(row: TaskList) {
InfoDrawerRef.value?.open(row)
}
const onCancel = async (id: string) => {
await message.delConfirm(`是否确认取消该任务?`)
const res = await cancelTask(id)
if (res.code !== 0) return
await getList()
}
function onTaskFinish(sn: string, status: -1 | 0 | 1 | 2 | 3) {
const curTask = list.value.findIndex(item => item.id === sn)
if (curTask !== -1) {
list.value[curTask].status = status
}
}
onMounted(() => {
getList()
})

64
src/views/taskList/infoDrawer.vue

@ -1,15 +1,26 @@ @@ -1,15 +1,26 @@
<template>
<div class="fault-rule-drawer">
<el-drawer v-model="isShowDrawer" title="任务详情" direction="rtl" size="50%" modal-class="model-dev-opn"
<el-drawer v-model="isShowDrawer" title="任务详情" direction="rtl" size="50%"
modal-class="model-dev-opn"
:before-close="handleBeforeClose">
<main class="wh-full" v-loading="loading">
<template v-for="detail in detailList">
<el-descriptions border :title="`${detail.sn}任务详情`">
<el-descriptions-item :label-width="60" label="状态"> <el-tag size="small">{{statusList.find(r => r.value ===
<el-descriptions-item :label-width="60" label="状态">
<el-tag size="small">{{
statusList.find(r => r.value ===
detail.status)?.label || '--'
}}</el-tag></el-descriptions-item>
<el-descriptions-item :label-width="100" label="总数数据量">{{ detail.total }}</el-descriptions-item>
<el-descriptions-item :label-width="110" label="已完成数据量">{{ detail.finish }}</el-descriptions-item>
}}
</el-tag>
</el-descriptions-item>
<el-descriptions-item :label-width="100" label="总数任务量">{{
detail.total
}}
</el-descriptions-item>
<el-descriptions-item :label-width="110" label="已完任务量">{{
detail.finish
}}
</el-descriptions-item>
<el-descriptions-item :label-width="60" label="信息">
{{ detail?.info ? detail.info : '暂无信息' }}
</el-descriptions-item>
@ -17,7 +28,8 @@ @@ -17,7 +28,8 @@
<template v-if="detail.total === 0">
<span>暂无进度</span>
</template>
<el-progress v-else style="width: 95%;" :percentage="Math.floor((detail.finish / detail.total) * 100)"
<el-progress v-else style="width: 95%;"
:percentage="Math.floor((detail.finish / detail.total) * 100)"
:text-inside="true" :stroke-width="20"/>
</el-descriptions-item>
</el-descriptions>
@ -28,11 +40,12 @@ @@ -28,11 +40,12 @@
</template>
<script setup lang="ts">
import { getSubTopic, type PubMsgData } from '@/utils/zmq'
import { getSubTopic, type SubMsgData } from '@/utils/zmq'
import ZMQWorker from '@/composables/useZMQJsonWorker'
import { getTaskInfo, type TaskInfo, type TaskList } from '@/api/module/taks'
import { useMessage } from '@/composables/useMessage'
const emit = defineEmits<{ 'task-finish': [string, -1 | 0 | 1 | 2 | 3] }>()
const message = useMessage()
const worker = ZMQWorker.getInstance()
const isShowDrawer = defineModel<boolean>()
@ -50,40 +63,57 @@ async function onDetail(row: TaskList) { @@ -50,40 +63,57 @@ async function onDetail(row: TaskList) {
}
loading.value = false
}
const curentTaskId = ref('')
const currentTaskId = ref('')
async function open(row: TaskList) {
isShowDrawer.value = true
curentTaskId.value = row.id
currentTaskId.value = row.id
await onDetail(row)
worker.subscribe(getSubTopic('server', 'event', 'task'), zmqTaskCb)
}
const statusList = [
{ label: '未开始', value: 0 },
{ label: '进行中', value: 1 },
{ label: '成功', value: 2 },
{ label: '失败', value: -1 },
{
value: -1,
label: '执行失败'
}, {
label: '等待执行',
value: 0
}, {
label: '执行中',
value: 1
}, {
label: '已取消',
value: 2
}, {
label: '执行成功',
value: 3
}
]
function zmqTaskCb(msg: PubMsgData) {
const { feedback, result, id } = msg
function zmqTaskCb(msg: SubMsgData) {
const { feedback } = msg
const taskId = feedback[0]
const deviceSN = feedback[1]
const deviceStatus = feedback[2] || '未知状态'
const finish = feedback[3] || 0
const total = feedback[4] || 0
if (curentTaskId.value !== taskId) return
if (currentTaskId.value !== taskId) return
const detail = detailList.value.find(item => item.sn === deviceSN)
if (!detail) return
detail.status = deviceStatus
detail.finish = finish
detail.total = total
if (detail.finish === detail.finish) {
emit('task-finish', deviceSN, deviceStatus)
}
}
function handleBeforeClose(done: () => void) {
isShowDrawer.value = false
curentTaskId.value = ''
currentTaskId.value = ''
done()
}

12
src/views/testG6/index.vue

@ -41,6 +41,18 @@ onMounted(() => { @@ -41,6 +41,18 @@ onMounted(() => {
nodes: graphData.getNodes(),
edges: graphData.getEdges()
},
plugins: [
{
type: 'contextmenu',
enable: (e: any) => e.targetType === 'node',
getItems: () => {
return [{ name: '查看详情', value: 'detail' }];
},
onClick: (value: string, item: HTMLElement, current: any) => {
console.log('展示节点详情', current.config.context.model.getNodeData(current.config.id));
},
},
],
behaviors: ['drag-canvas', 'zoom-canvas'],
});
graph.render();

12
vite.config.ts

@ -1,6 +1,6 @@ @@ -1,6 +1,6 @@
import { fileURLToPath, URL } from 'node:url'
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
@ -9,7 +9,11 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' @@ -9,7 +9,11 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vueJsx from '@vitejs/plugin-vue-jsx'
import Icons from 'unplugin-icons/vite'
// Vite 配置文件
export default defineConfig({
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd())
console.log(env)
console.log(env.PROD)
return {
plugins: [
vue(),
vueJsx(),
@ -37,6 +41,7 @@ export default defineConfig({ @@ -37,6 +41,7 @@ export default defineConfig({
},
build: {
outDir: env.VITE_APP_ENV === 'cloud' ? 'dist-cloud' : 'dist-local',
minify: 'terser',
terserOptions: {
compress: {
@ -65,7 +70,7 @@ export default defineConfig({ @@ -65,7 +70,7 @@ export default defineConfig({
host: '0.0.0.0',
proxy: {
'/remoteServer': {
target: 'http://192.168.1.199:8080/',
target: env.VITE_BASE_URL,
changeOrigin: true,
secure: false,
ws: true,
@ -73,4 +78,5 @@ export default defineConfig({ @@ -73,4 +78,5 @@ export default defineConfig({
},
}
},
}
})
Loading…
Cancel
Save