sxyanzhu
/
AIManage
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update code

main
haha 2024-08-01 23:46:40 +08:00
parent 1b6cba1a1c
commit 67498e433f
10 changed files with 686 additions and 486 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/JsonViewDlg/index.vue 100644
View File

@ -0,0 +1,30 @@
<template>
<el-dialog v-model="info.show" :title="info.title" :close-on-press-escape="false" :close-on-click-modal="false"
align-center append-to-body :width="info.width" modal-class="choice-tool-param-dlg">
<json-viewer :value="info.data" copyable boxed sort theme="my-json-view jv-light" />
<template #footer>
<div style="padding-right: var(--el-dialog-padding-primary);text-align: center;">
<el-button type="primary" @click="info.show = false">关闭</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
const info = reactive({
title: 'Json View',
show: false,
width: '960px',
data: null
})
const showDialog = opt => {
info.title = opt.title || info.title;
info.width = opt.width || info.width;
info.show = true;
info.data = opt.data || {};
}
defineExpose({
showDialog
})
</script>

1
src/typings/components.d.ts vendored
View File

@ -98,6 +98,7 @@ declare module "vue" {
SingleUpload: (typeof import("./../components/Upload/SingleUpload.vue"))["default"];
SizeSelect: (typeof import("./../components/SizeSelect/index.vue"))["default"];
SvgIcon: (typeof import("./../components/SvgIcon/index.vue"))["default"];
JsonViewDlg: (typeof import("./../components/JsonViewDlg/index.vue"))["default"];
TableSelect: (typeof import("./../components/TableSelect/index.vue"))["default"];
TagsView: (typeof import("./../layout/components/TagsView/index.vue"))["default"];
ThemeColorPicker: (typeof import("./../layout/components/Settings/components/ThemeColorPicker.vue"))["default"];

67
src/views/connection/edit.vue
View File

@ -128,12 +128,14 @@
import nodePanel from './nodePanel.vue'
import editFlow from './editFlow.vue'
import ConnApi from '@/api/connection'
import ModelApi from '@/api/models'
import EditParamDlg from './editParamDlg.vue'
import paramShow from './paramShow.vue'
const router = useRouter();
const editForm = ref(ElForm)
const route = useRoute()
const upForm = reactive({
model_id: '',
model_name: '',
model_version: '',
connection_name: '',
@ -152,6 +154,7 @@ const info = reactive({
connInfo: null,
nodes: [],
editObj: null,
type: '',
})
const selNode = reactive({
info: null,
@ -327,6 +330,7 @@ const doSave = () => {
editForm.value?.validate(valid => {
if (valid) {
let postData = {
model_id: upForm.model_id,
connection_name: upForm.connection_name,
connection_label: upForm.connection_label,
connection_desc: upForm.connection_desc,
@ -335,13 +339,22 @@ const doSave = () => {
operator_connection_nodes: flowData.nodes,
operator_connection_edges: flowData.edges
};
ConnApi.add(postData).then(d => {
if (d.data.code == 0) {
ElMessage.success("增加模型成功!");
router.push({ path: "/connection/index" })
}
});
if (info.type == "add") {
ConnApi.add(postData).then(d => {
if (d.data.code == 0) {
ElMessage.success("增加互联成功!");
router.push({ path: "/connection/index" })
}
});
} else {
let id = route.query.id;
ConnApi.updatAll(id, postData).then(d => {
if (d.data.code == 0) {
ElMessage.success("修改互联成功!");
router.push({ path: "/connection/index" })
}
});
}
}
});
@ -349,19 +362,51 @@ const doSave = () => {
const doCancel = () => {
router.push({ path: "/connection/index" })
}
const initData = () => {
const initConnData = () => {
let id = route.query.id;
ConnApi.detail(id).then(d => {
info.connInfo = d.data?.data || {};
upForm.model_id = info.connInfo.model_id;
upForm.model_name = info.connInfo.model_name;
upForm.model_version = info.connInfo.model_version;
upForm.model_name = info.connInfo.model_name;
upForm.model_name = info.connInfo.model_name;
upForm.connection_name = info.connInfo.connection_name;
upForm.connection_label = "";
upForm.connection_desc = info.connInfo.connection_desc;
});
};
const initEditData = () => {
let id = route.query.id;
ConnApi.detail(id).then(d => {
info.connInfo = d.data?.data || {};
upForm.model_id = info.connInfo.model_id;
upForm.model_name = info.connInfo.model_name;
upForm.model_version = info.connInfo.model_version;
upForm.connection_name = info.connInfo.connection_name;
upForm.connection_label = "";
upForm.connection_desc = info.connInfo.connection_desc;
});
}
const initData = () => {
let id = route.query.id;
ModelApi.findOne(id).then(d => {
upForm.model_id = d.data.data.model_id;
upForm.model_name = d.data.data.model_name;
upForm.model_version = d.data.data.model_version;
});
}
onMounted(() => {
initData();
window.xapp = getCurrentInstance();
if (route.query.type == "edit") {
info.type = "edit"
initEditData();
} else if (route.query.type == "addByConn") {
info.type = "add"
initConnData();
} else {
info.type = "add"
initData();
}
});
</script>
<style scoped lang='scss'>

42
src/views/connection/index.vue
View File

@ -1,7 +1,9 @@
<!-- 用户管理 -->
<template>
<div class="app-container">
<div class="search-container">
<div class="search-container" style="position: relative;">
<el-button type="primary" @click="doAddByModel"
style="position: absolute;left:10px;"><i-ep-plus />新建互联</el-button>
<el-form ref="queryFormRef" :model="queryParams" :inline="true" style="flex-grow: 1;text-align: right;">
<el-form-item label="" prop="connection_name">
<el-input v-model="queryParams.connection_name" placeholder="请输入互联名将，标签，模型名称" clearable style="width: 250px"
@ -29,23 +31,16 @@
<el-table-column label="互联说明" align="left" prop="connection_desc" />
<el-table-column label="互联创建时间" width="120" align="left" prop="create_time" />
<el-table-column label="创建用户" width="100" align="left" prop="user_name" />
<el-table-column label="状态" width="100" align="left" prop="connection_created">
<el-table-column label="操作" fixed="right" align="center" width="320">
<template #default="scope">
<el-button type="success" size="small" v-if="scope.row.connection_created">已互联</el-button>
<el-button type="info" size="small" v-else plain>未互联</el-button>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="270">
<template #default="scope">
<template v-if="scope.row.connection_created">
<el-button text type="primary" size="small" @click="doShowDetail(scope.row)"><i-ep-edit />查看</el-button>
<el-button text type="primary" size="small"
@click="doEdit(scope.row.connection_id)"><i-ep-link />修改互联</el-button>
<el-button text type="primary" size="small" @click="handleDelete(scope.row)"><i-ep-delete />删除</el-button>
</template>
<template v-else>
<el-button text type="primary" size="small" @click="doAdd(scope.row)">新建互联</el-button>
</template>
<el-button text type="primary" size="small" @click="doShowDetail(scope.row)"><i-ep-edit />查看</el-button>
<el-button text type="primary" size="small" style="margin:0px;"
@click="doEdit(scope.row.connection_id)"><i-ep-link />修改互联</el-button>
<el-button text type="primary" size="small" @click="doAdd(scope.row)"
style="margin:0px;"><i-ep-plus />新建互联</el-button>
<el-button text type="primary" size="small" @click="handleDelete(scope.row)"
style="margin:0px;"><i-ep-delete />删除</el-button>
</template>
</el-table-column>
</el-table>
@ -54,6 +49,7 @@
<pagination v-if="info.total > 0" v-model:total="info.total" v-model:page="queryParams.page_num"
v-model:limit="queryParams.page_size" @pagination="handleQuery" />
</el-card>
<selectModelDlg ref="selModelDlg" @success="doSelectSuccess"></selectModelDlg>
</div>
</template>
@ -61,10 +57,11 @@
import { UserQuery } from "@/api/user/model";
import ConnApi from '@/api/connection'
import selectModelDlg from './selectModelDlg.vue'
const queryFormRef = ref(ElForm); // 查询表单
const router = useRouter();
const selModelDlg = ref();
const loading = ref(false); // 加载状态
const removeIds = ref([]); // 删除用户ID集合 用于批量删除
const queryParams = reactive<any>({
@ -85,6 +82,9 @@ watch(dateTimeRange, (newVal) => {
}
});
const doAddByModel = () => {
selModelDlg.value.showDialog();
}
/** 查询 */
function handleQuery() {
loading.value = true;
@ -134,13 +134,15 @@ function handleDelete(row: { [key: string]: any }) {
const doShowDetail = (row: any) => {
router.push({ path: "/connection/detail", query: { id: row.connection_id } })
}
const doSelectSuccess = (row: any) => {
router.push({ path: "/connection/edit", query: { id: row.model_id, type: 'addByModel' } })
}
const doEdit = (row: any) => {
router.push({ path: "/connection/edit", query: { id: row.connection_id, type: 'edit' } })
}
const doAdd = (row: any) => {
router.push({ path: "/connection/edit", query: { id: row.connection_id, type: 'add' } })
router.push({ path: "/connection/edit", query: { id: row.connection_id, type: 'addByConn' } })
}

54
src/views/connection/selectModelDlg.vue 100644
View File

@ -0,0 +1,54 @@
<template>
<el-dialog v-model="info.show" :title="info.title" :close-on-press-escape="false" :close-on-click-modal="false"
align-center append-to-body :width="info.width" modal-class="choice-model-dlg">
<el-table v-loading="info.loading" :data="info.data" stripe>
<el-table-column label="模型名称" align="left" prop="model_name" width="300" />
<el-table-column label="网络名称" align="left" prop="model_network" v-if="1 == 2" />
<el-table-column label="模型类型" align="left" prop="modl_main_type_name" />
<el-table-column label="版本" align="left" prop="model_version" />
<el-table-column label="说明" align="left" prop="model_desc" />
<el-table-column label="上传时间" width="120" align="left" prop="create_time" />
<el-table-column label="上传用户" width="100" align="left" prop="user_name" />
<el-table-column label="操作" fixed="right" width="120">
<template #default="scope">
<el-button text type="primary" size="small" @click="doCreateConn(scope.row)"><i-ep-edit />新建互联</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
</template>
<script setup>
import ModelApi from '@/api/models'
const emit = defineEmits(['success'])
const info = reactive({
title: '模型选择',
show: false,
width: '960px',
data: null,
loading: false
})
const showDialog = opt => {
info.show = true;
loadData();
}
const doCreateConn = row => {
emit("success", row)
}
const loadData = () => {
info.loading = true
ModelApi.list({
page_num: 1,
page_size: 100
}).then(d => {
info.loading = false
info.data = d.data.data.model_list || [];
})
}
defineExpose({
showDialog
})
</script>

24
src/views/dashboard/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="dashboard-container" :class="isSmallScreen ? 'is-small' : ''">
<!-- github角标 -->
<el-row :gutter="10" class="mt-3" style="margin-bottom: 12px;">
<el-row :gutter="10" class="mt-3" style="margin-bottom: 12px;">
<el-col :span="4" v-for="(it, idx) in topInfos" :key="idx">
<el-card shadow="always" class="top-row1">
<img :src="it.icon" class="top-icon" />
@ -41,7 +41,8 @@
<div class="dev-row3">
<div class="device-state">
<img style="position: relative;top: -10px;left:-10px;" :src="'images/state/' + it.working_state + '.png'" />
<img style="position: relative;top: -10px;left:-10px;"
:src="'images/state/' + it.working_state + '.png'" />
<div
style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;">
{{ getState(it.working_state) }}</div>
@ -49,7 +50,7 @@
<div class="dev-chart">
<div class="chart-item-title">
<span>温度</span>
<span>{{ (it.tempurature/10.0).toFixed() }}℃</span>
<span>{{ (it.tempurature / 10.0).toFixed() }}℃</span>
</div>
<div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.temperature + '%'"></div>
@ -57,10 +58,12 @@
<div class="chart-item-title">
<span>内存</span>
<span>{{ it.memory_usage}}MB</span>
<span>{{ it.memory_usage }}MB</span>
</div>
<div class="chart-line">
<div class="chart-line-inline" :style="'width:' + (it.memory_usage*100.0/it.memory_total) + '%'"></div>
<div class="chart-line-inline"
:style="'width:' + (it.memory_usage * 100.0 / it.memory_total) + '%'">
</div>
</div>
<div class="chart-item-title">
@ -156,13 +159,14 @@ const getState = (e: any) => {
return "升级中";
}
const loadDevice=()=>{
const loadDevice = () => {
DeviceAPI.getStatus().then(d => {
devInfos.value=d.data.data.device_status_list||[];
devInfos.value = d.data.data.device_status_list || [];
});
}
const loadInfo=()=>{
InfoApi.statistics().then(d => {
const loadInfo = () => {
InfoApi.statistics().then(res => {
let d = res.data
topInfos.value = [
{ title: '模型总数', count: d.data.total_model_count, ucnt: d.data.user_model_count, clsName: 'c1', icon: "images/nav/nav1.png" },
{ title: '算子总数', count: d.data.total_operator_count, ucnt: d.data.user_operator_count, clsName: 'c1', icon: "images/nav/nav2.png" },
@ -241,6 +245,7 @@ onMounted(() => {
.right-panel {
min-width: 240px;
max-width: 240px;
padding-left: 8px;
}
@ -304,6 +309,7 @@ onMounted(() => {
.right-panel {
min-width: 300px;
max-width: 300px;
padding-left: 12px;
}

870
src/views/dashboard/index2.vue
View File

@ -1,149 +1,153 @@
<template>
<div class="dashboard-container" :class="isSmallScreen?'is-small':''">
<!-- github角标 -->
<el-row :gutter="10" class="mt-3" style="margin-bottom: 12px;">
<el-col :span="4" v-for="(it, idx) in topInfos" :key="idx">
<el-card shadow="always" class="top-row1">
<img :src="it.icon" class="top-icon" />
<div class="top-row">
<div class="div-title">{{ it.title }}</div>
<div class="div-num">
<span style="color:dodgerblue;">{{ it.ucnt }} </span>/ <span style="font-size:14px;">{{it.count }}</span>
</div>
<div class="dashboard-container" :class="isSmallScreen ? 'is-small' : ''">
<!-- github角标 -->
<el-row :gutter="10" class="mt-3" style="margin-bottom: 12px;">
<el-col :span="4" v-for="(it, idx) in topInfos" :key="idx">
<el-card shadow="always" class="top-row1">
<img :src="it.icon" class="top-icon" />
<div class="top-row">
<div class="div-title">{{ it.title }}</div>
<div class="div-num">
<span style="color:dodgerblue;">{{ it.ucnt }} </span>/ <span style="font-size:14px;">{{ it.count }}</span>
</div>
</el-card>
</el-col>
</el-row>
<div style="display: flex;">
</div>
</el-card>
</el-col>
</el-row>
<div style="display: flex;">
<div style="flex-grow: 1;">
<el-card shadow="never" class="top-row2">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">设备运行状态</div>
<div class="div-more" v-if="false">更多</div>
</div>
</template>
<el-scrollbar max-height="504px">
<el-row :gutter="20">
<el-col :span="isSmallScreen?8:6" v-for="it in devInfos" :key="it.id" class="dev-item" style="margin-bottom: 20px;">
<el-card shadow="hover">
<template #header>
<div class="dev-title">{{ it.name }}
<svg-icon icon-class="enlarge" color="#666" />
</div>
</template>
<div class="dev-row2">
<div>
任务类型:<span>{{ it.modelName }}</span>
</div>
</div>
<div class="dev-row3">
<div class="device-state">
<img style="position: relative;top: -10px;left:-10px;" :src="'images/state/'+it.state+'.png'"/>
<div style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;" >{{getState(it.state) }}</div>
</div>
<div class="dev-chart">
<div class="chart-item-title">
<span>温度</span>
<span>{{ it.temperature }}℃</span>
<el-card shadow="never" class="top-row2">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">设备运行状态</div>
<div class="div-more" v-if="false">更多</div>
</div>
</template>
<el-scrollbar max-height="504px">
<el-row :gutter="20">
<el-col :span="isSmallScreen ? 8 : 6" v-for="it in devInfos" :key="it.id" class="dev-item"
style="margin-bottom: 20px;">
<el-card shadow="hover">
<template #header>
<div class="dev-title">{{ it.name }}
<svg-icon icon-class="enlarge" color="#666" />
</div>
</template>
<div class="dev-row2">
<div>
任务类型:<span>{{ it.modelName }}</span>
</div>
</div>
<div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.temperature + '%'"></div>
<div class="dev-row3">
<div class="device-state">
<img style="position: relative;top: -10px;left:-10px;"
:src="'images/state/' + it.state + '.png'" />
<div
style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;">
{{ getState(it.state) }}</div>
</div>
<div class="dev-chart">
<div class="chart-item-title">
<span>温度</span>
<span>{{ it.temperature }}℃</span>
</div>
<div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.temperature + '%'"></div>
</div>
<div class="chart-item-title">
<span>内存</span>
<span>{{ it.memory }}%</span>
</div>
<div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.memory + '%'"></div>
</div>
<div class="chart-item-title">
<span>效率</span>
<span>{{ it.cpu }}%</span>
</div>
<div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.cpu + '%'"></div>
</div>
</div>
</div>
<div class="chart-item-title">
<span>内存</span>
<span>{{ it.memory }}%</span>
</div>
<div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.memory + '%'"></div>
</div>
<div class="chart-item-title">
<span>效率</span>
<span>{{ it.cpu }}%</span>
</div>
<div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.cpu + '%'"></div>
</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
</el-scrollbar>
</el-card>
<el-card shadow="never" class="proc-card">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">超异构任务部署流程</div>
</div>
</template>
<ModelFlow/>
</el-card>
</div>
<div style="" class="right-panel">
<el-card shadow="never" class="top-row2 notice-card">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">通知中心</div>
</div>
</template>
<el-scrollbar height="484px">
<IndexNotice/>
</el-scrollbar>
</el-card>
<el-card shadow="never" class="proc-card server-status">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">服务器运行状态</div>
</div>
</template>
<ServiceStatus :val="svTemp" width="200px" height="200px"></ServiceStatus>
</el-card>
</el-card>
</el-col>
</el-row>
</el-scrollbar>
</el-card>
<el-card shadow="never" class="proc-card">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">超异构任务部署流程</div>
</div>
</template>
<ModelFlow />
</el-card>
</div>
<div style="" class="right-panel">
<el-card shadow="never" class="top-row2 notice-card">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">通知中心</div>
</div>
</template>
<el-scrollbar height="484px">
<IndexNotice />
</el-scrollbar>
</el-card>
<el-card shadow="never" class="proc-card server-status">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">服务器运行状态</div>
</div>
</template>
<ServiceStatus :val="svTemp" width="200px" height="200px"></ServiceStatus>
</el-card>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import ModelFlow from './components/ModelFlow2.vue'
import IndexNotice from './components/IndexNotice.vue'
import ServiceStatus from './components/ServiceStatus.vue'
import DeviceAPI from "@/api/device";
let svTemp=ref(55.5)
let rd=()=>{ return +(""+Math.random()).substring(3,6)};
let rd2=()=>{ return +(""+Math.random()).substring(3,4)};
let rd3=()=>{ return +(""+Math.random()).substring(3,5)};
let topInfos = reactive([
{ title: '模型总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav1.png" },
{ title: '算子总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav2.png" },
{ title: '数据集总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav3.png" },
{ title: '评估报告总数', count:rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav4.png" },
{ title: '互联总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav5.png" },
{ title: '总访问量', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav1.png" },
]);
let devInfos = reactive([
{ id: 1001, name: 'NPU-TC-01', netType: 'network001', modelName: 'N/A', state: 'offline', temperature: '31', memory: rd3(), cpu: rd3(), },
{ id: 1002, name: 'GPU-B101', netType: 'network001', modelName: 'N/A', state: 'compile', temperature: '46', memory: rd3(), cpu: rd3(), },
{ id: 1003, name: 'CPU-SW-02', netType: 'network001', modelName: 'N/A', state: 'idle', temperature: '37', memory: rd3(), cpu: rd3(), },
{ id: 1004, name: 'CPU-SW-01', netType: 'network001', modelName: 'pagerank_01', state: 'infer', temperature: '34', memory: rd3(), cpu: rd3(), },
{ id: 1005, name: 'FPGA-FD-01', netType: 'network001', modelName: 'Obj_detect_01', state: 'unregist', temperature: '42', memory: rd3(), cpu: rd3(), },
{ id: 1006, name: 'GPU-MR-01', netType: 'network001', modelName: 'llm_01', state: 'download', temperature: '40', memory: rd3(), cpu: rd3(), },
{ id: 1007, name: 'FPGA-FD-02', netType: 'network001', modelName: 'Obj_detect_01', state: 'train', temperature: '39', memory: rd3(), cpu: rd3(), },
{ id: 1008, name: 'CPU-SW-03', netType: 'network001', modelName: 'pagerank_01', state: 'upgrade',temperature: '38', memory: rd3(), cpu: rd3(), },
])
const winWidth=ref(0)
const isSmallScreen=computed(()=>{
return winWidth.value<1440;
});
const getState = (e: any) => {
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import ModelFlow from './components/ModelFlow2.vue'
import IndexNotice from './components/IndexNotice.vue'
import ServiceStatus from './components/ServiceStatus.vue'
import DeviceAPI from "@/api/device";
let svTemp = ref(55.5)
let rd = () => { return +("" + Math.random()).substring(3, 6) };
let rd2 = () => { return +("" + Math.random()).substring(3, 4) };
let rd3 = () => { return +("" + Math.random()).substring(3, 5) };
let topInfos = reactive([
{ title: '模型总数', count: rd(), ucnt: rd2(), clsName: 'c1', icon: "images/nav/nav1.png" },
{ title: '算子总数', count: rd(), ucnt: rd2(), clsName: 'c1', icon: "images/nav/nav2.png" },
{ title: '数据集总数', count: rd(), ucnt: rd2(), clsName: 'c1', icon: "images/nav/nav3.png" },
{ title: '评估报告总数', count: rd(), ucnt: rd2(), clsName: 'c1', icon: "images/nav/nav4.png" },
{ title: '互联总数', count: rd(), ucnt: rd2(), clsName: 'c1', icon: "images/nav/nav5.png" },
{ title: '总访问量', count: rd(), ucnt: rd2(), clsName: 'c1', icon: "images/nav/nav1.png" },
]);
let devInfos = reactive([
{ id: 1001, name: 'NPU-TC-01', netType: 'network001', modelName: 'N/A', state: 'offline', temperature: '31', memory: rd3(), cpu: rd3(), },
{ id: 1002, name: 'GPU-B101', netType: 'network001', modelName: 'N/A', state: 'compile', temperature: '46', memory: rd3(), cpu: rd3(), },
{ id: 1003, name: 'CPU-SW-02', netType: 'network001', modelName: 'N/A', state: 'idle', temperature: '37', memory: rd3(), cpu: rd3(), },
{ id: 1004, name: 'CPU-SW-01', netType: 'network001', modelName: 'pagerank_01', state: 'infer', temperature: '34', memory: rd3(), cpu: rd3(), },
{ id: 1005, name: 'FPGA-FD-01', netType: 'network001', modelName: 'Obj_detect_01', state: 'unregist', temperature: '42', memory: rd3(), cpu: rd3(), },
{ id: 1006, name: 'GPU-MR-01', netType: 'network001', modelName: 'llm_01', state: 'download', temperature: '40', memory: rd3(), cpu: rd3(), },
{ id: 1007, name: 'FPGA-FD-02', netType: 'network001', modelName: 'Obj_detect_01', state: 'train', temperature: '39', memory: rd3(), cpu: rd3(), },
{ id: 1008, name: 'CPU-SW-03', netType: 'network001', modelName: 'pagerank_01', state: 'upgrade', temperature: '38', memory: rd3(), cpu: rd3(), },
])
const winWidth = ref(0)
const isSmallScreen = computed(() => {
return winWidth.value < 1440;
});
const getState = (e: any) => {
if (e == "offline") {
return "离线";
}
@ -168,311 +172,349 @@
return "升级中";
}
onMounted(()=>{
winWidth.value=window.outerWidth;
window.onresize=()=>{
setTimeout(()=>{
winWidth.value=window.outerWidth;
},100);
}
DeviceAPI.getStatus().then(d=>{
});
onMounted(() => {
winWidth.value = window.outerWidth;
window.onresize = () => {
setTimeout(() => {
winWidth.value = window.outerWidth;
}, 100);
}
DeviceAPI.getStatus().then(d => {
});
</script>
<style lang="scss" scoped>
.dashboard-container {
position: relative;
min-width:960px;
padding: 0px 24px;
&.is-small{
padding: 0px 12px;
});
</script>
<style lang="scss" scoped>
.dashboard-container {
position: relative;
min-width: 960px;
padding: 0px 24px;
&.is-small {
padding: 0px 12px;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
.github-corner {
position: absolute;
top: 0;
right: 0;
z-index: 1;
border: 0;
}
.data-box {
display: flex;
justify-content: space-between;
padding: 20px;
font-weight: bold;
color: var(--el-text-color-regular);
background: var(--el-bg-color-overlay);
border-color: var(--el-border-color);
box-shadow: var(--el-box-shadow-dark);
}
.svg-icon {
fill: currentcolor !important;
}
}
</style>
<style lang="scss">
.dashboard-container {
&.is-small {
.dev-row3 {
padding: 0px !important;
.device-state {
width: 80px !important;
}
}
.user-avatar {
.right-panel {
min-width: 240px;
max-width: 240px;
padding-left: 8px;
}
.model-flow {
.card-item {
width: 100px;
}
.row-1 {
.line {
width: calc(20% - 100px);
top: 10px;
}
}
.row-3 {
.line {
width: calc(20% - 100px);
}
.card-center {
.card-center-item {
width: 100px;
&:first-child {
&::after {
left: 50px;
}
&::before {
left: 50px;
}
}
&:last-child {
&::after {
left: -20px;
}
&::before {
left: 51px;
}
}
}
}
.card-item {
&.line-top {
&::after {
left: 50px;
}
&::before {
left: 48px;
}
}
}
}
}
}
.right-panel {
min-width: 300px;
max-width: 300px;
padding-left: 12px;
}
.el-card__body {
padding: 10px 10px;
}
.top-row1 {
position: relative;
.top-icon {
top: 20px;
position: absolute;
background: #409eff2b;
width: 40px;
height: 40px;
border-radius: 50%;
svg {
width: 20px;
height: 20px;
* {
fill: #3399ff;
;
}
}
}
.github-corner {
position: absolute;
top: 0;
right: 0;
z-index: 1;
border: 0;
}
.data-box {
display: flex;
justify-content: space-between;
padding: 20px;
font-weight: bold;
color: var(--el-text-color-regular);
background: var(--el-bg-color-overlay);
border-color: var(--el-border-color);
box-shadow: var(--el-box-shadow-dark);
}
.svg-icon {
fill: currentcolor !important;
.top-row {
padding-left: 40px;
line-height: 30px;
text-align: center;
.div-title {
font-weight: bold;
font-size: 14px;
color: #333;
}
.div-num {
font-size: 20px;
font-weight: bolder;
color: #333;
}
}
}
</style>
<style lang="scss">
.dashboard-container {
&.is-small{
.dev-row3 {
padding:0px !important;
.device-state{
width:80px !important;
}
.top-row2 {
&.notice-card {
.el-card__header {
border-bottom: 1px solid #ebeef5;
}
.right-panel{
min-width: 240px;
padding-left:8px;
}
.model-flow {
.card-item{
width:100px;
}
.row-1 {
.line{
width: calc(20% - 100px);
top:10px;
}
}
.row-3 {
.line{
width: calc(20% - 100px);
}
.card-center{
.card-center-item{
width:100px;
&:first-child{
&::after{
left:50px;
}
&::before{
left:50px;
}
}
&:last-child{
&::after{
left:-20px;
}
&::before{
left:51px;
}
}
}
}
.card-item{
&.line-top{
&::after{
left:50px;
}
&::before{
left:48px;
}
}
}
.el-card__body {
.el-scrollbar {
padding: 10px;
}
}
}
.right-panel{
min-width: 300px;
padding-left:12px;
}
.el-card__body {
padding: 10px 10px;
}
.top-row1 {
position: relative;
.top-icon {
top: 20px;
position: absolute;
background: #409eff2b;
width: 40px;
height: 40px;
border-radius: 50%;
svg {
width: 20px;
height: 20px;
* {
fill: #3399ff;
;
}
}
}
.top-row {
padding-left: 40px;
line-height: 30px;
text-align: center;
.div-title {
font-weight: bold;
font-size: 14px;
color: #333;
}
.div-num {
font-size: 20px;
font-weight: bolder;
color: #333;
}
}
}
.top-row2 {
&.notice-card{
.el-card__header{
border-bottom: 1px solid #ebeef5;
}
.el-card__body {
.el-scrollbar{
padding:10px;
}
}
}
.el-card__header{
padding: 8px;
border:none;
.el-card__header {
padding: 8px;
border: none;
.row2-top {
position: relative;
.div-more {
position: absolute;
right: 12px;
top: 0px;
font-size: 12px;
}
}
}
.el-card__body{
padding:0px;
.el-scrollbar{
padding:0px 10px;
.el-scrollbar__bar.is-horizontal{
display: none;
}
}
}
.dev-item {
.el-card {
background: #EEF7FE;
padding: 8px;
.el-card__header {
padding: 4px;
border: none;
.dev-title {
color: var(--el-color-primary);
position: relative;
font-size: 16px;
font-weight: bold;
.svg-icon {
position: absolute;
right: 0px;
cursor: pointer;
}
}
}
.el-card__body {
background: #fff;
box-shadow: var(--el-box-shadow-light);
border-radius: 8px;
padding:10px;
.dev-row3 {
display: flex;
padding:12px;
align-items: center;
.device-state {
width: 100px;
text-align: center;
}
.state-text{
font-size:16px;
&.state0{
color:var(--el-color-primary);
}
&.state1{
color:var(--el-color-warning);
}
&.state2{
color:var(--el-color-danger);
}
}
.dev-chart{
flex-grow: 1;
position: relative;
top: -10px;
.chart-item-title{
margin: 12px 0px 0px;
font-size:12px;
position: relative;
span{
&:first-child{
font-weight: bold;
}
&:last-child{
position: absolute;
right: 0px;
}
}
}
.chart-line{
background-color: #ccc;
height:8px;
border-radius:4px;
.chart-line-inline{
background-color: var(--el-color-primary);
height:8px;
border-radius:4px;
}
}
}
}
}
.el-card__body {
padding: 0px;
.el-scrollbar {
padding: 0px 10px;
.el-scrollbar__bar.is-horizontal {
display: none;
}
}
}
.proc-card{
margin-top:20px;
padding: 8px;
.el-card__header{
padding: 8px;
border:none;
}
.el-card__body{
background: #EEF7FE;
border-radius: 8px;
height:300px;
}
&.server-status{
.dev-item {
.el-card {
background: #EEF7FE;
padding: 8px;
.el-card__header{
.el-card__header {
padding: 4px;
border: none;
.dev-title {
color: var(--el-color-primary);
position: relative;
font-size: 16px;
font-weight: bold;
.svg-icon {
position: absolute;
right: 0px;
cursor: pointer;
}
}
}
.el-card__body {
background: #fff;
box-shadow: var(--el-box-shadow-light);
background: #fff;
box-shadow: var(--el-box-shadow-light);
border-radius: 8px;
padding: 10px;
.dev-row3 {
display: flex;
padding: 12px;
align-items: center;
.device-state {
width: 100px;
text-align: center;
}
.state-text {
font-size: 16px;
&.state0 {
color: var(--el-color-primary);
}
&.state1 {
color: var(--el-color-warning);
}
&.state2 {
color: var(--el-color-danger);
}
}
.dev-chart {
flex-grow: 1;
position: relative;
top: -10px;
.chart-item-title {
margin: 12px 0px 0px;
font-size: 12px;
position: relative;
span {
&:first-child {
font-weight: bold;
}
&:last-child {
position: absolute;
right: 0px;
}
}
}
.chart-line {
background-color: #ccc;
height: 8px;
border-radius: 4px;
.chart-line-inline {
background-color: var(--el-color-primary);
height: 8px;
border-radius: 4px;
}
}
}
}
}
}
}
}
</style>
.proc-card {
margin-top: 20px;
padding: 8px;
.el-card__header {
padding: 8px;
border: none;
}
.el-card__body {
background: #EEF7FE;
border-radius: 8px;
height: 300px;
}
&.server-status {
background: #EEF7FE;
padding: 8px;
.el-card__header {}
.el-card__body {
background: #fff;
box-shadow: var(--el-box-shadow-light);
}
}
}
}
</style>

58
src/views/model/index.vue
View File

@ -1,13 +1,13 @@
<!-- 用户管理 -->
<template>
<div class="app-container">
<div class="search-container">
<el-button type="primary" @click="doUploadModel" ><i-ep-plus />上传模型</el-button>
<div class="search-container">
<el-button type="primary" @click="doUploadModel"><i-ep-plus />上传模型</el-button>
<el-form ref="queryFormRef" :model="queryParams" :inline="true" style="flex-grow: 1;text-align: right;">
<el-form-item label="" prop="keywords">
<el-input v-model="queryParams.model_name" placeholder="请输入模型名称" clearable style="width: 200px"
@keyup.enter="handleQuery" />
</el-form-item>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
<el-button @click="resetQuery">
@ -17,12 +17,12 @@
</el-form>
</div>
<el-card shadow="never" class="table-container">
<el-card shadow="never" class="table-container">
<el-table v-loading="loading" :data="tableData" stripe @selection-change="handleSelectionChange">
<el-table-column label="模型名称" align="left" prop="model_name" width="300"/>
<el-table-column label="网络名称" align="left" prop="model_network" />
<el-table-column label="模型类型" align="left" prop="modl_sub_type_name" />
<el-table-column label="模型名称" align="left" prop="model_name" width="300" />
<el-table-column label="网络名称" align="left" prop="model_network" v-if="1 == 2" />
<el-table-column label="模型类型" align="left" prop="modl_main_type_name" />
<el-table-column label="版本" align="left" prop="model_version" />
<el-table-column label="说明" width="300" align="left" prop="model_desc" />
<el-table-column label="上传时间" width="120" align="left" prop="create_time" />
@ -31,8 +31,7 @@
<template #default="scope">
<el-button text type="primary" size="small"
@click="doShowModelDetail(scope.row)"><i-ep-edit />查看</el-button>
<el-button text type="primary" size="small"
@click="doconnection()"><i-ep-link/>互联</el-button>
<el-button text type="primary" size="small" @click="doconnection()"><i-ep-link />互联</el-button>
<el-button text type="primary" size="small" @click="handleDelete(scope.row)"><i-ep-delete />删除</el-button>
</template>
</el-table-column>
@ -62,7 +61,7 @@ const removeIds = ref([]); // 删除用户ID集合 用于批量删除
let queryParams = reactive<any>({
page_num: 1,
page_size: 10,
model_name:''
model_name: ''
});
const dateTimeRange = ref("");
let total = ref(100); // 数据总数
@ -77,19 +76,19 @@ watch(dateTimeRange, (newVal) => {
let tableData = ref([])
/** 查询 */
function handleQuery() {
ModelApi.list(queryParams).then(d=>{
total.value=d.data.data.total||0;
tableData.value=d.data.data.model_list||[];
ModelApi.list(queryParams).then(d => {
total.value = d.data.data.total || 0;
tableData.value = d.data.data.model_list || [];
});
loading.value = true;
//ElMessage.success("查询成功");
loading.value = false;
}
const doUploadModel=()=>{
const doUploadModel = () => {
router.push({ path: "/modelMgr/uploadModel" });
}
function doconnection(){
function doconnection() {
router.push({ path: "/connection/index" });
}
@ -98,7 +97,7 @@ function resetQuery() {
queryFormRef.value.resetFields();
dateTimeRange.value = "";
queryParams.page_num = 1;
queryParams.model_name='';
queryParams.model_name = '';
handleQuery();
}
@ -114,18 +113,18 @@ function handleDelete(row: { [key: string]: any }) {
cancelButtonText: "取消",
type: "warning",
}).then(function () {
ModelApi.deleteModel(row.model_id).then(d=>{
if(d.data.code==0){
ModelApi.deleteModel(row.model_id).then(d => {
if (d.data.code == 0) {
ElMessage.success("删除成功");
handleQuery();
}
})
});
}
const doShowModelDetail=(row:any)=>{
router.push({path:"/modelMgr/modelDetail",query:{id:row.model_id,from:'model'}})
const doShowModelDetail = (row: any) => {
router.push({ path: "/modelMgr/modelDetail", query: { id: row.model_id, from: 'model' } })
}
/**
* 打开弹窗
@ -154,16 +153,19 @@ onMounted(() => {
<style scoped lang='scss'>
.search-container{
display:flex;
.search-container {
display: flex;
}
.card-footer{
.card-footer {
position: fixed;
width: calc(100% - 215px);
bottom: 0px;
:deep(.el-card__body){
padding:0px;
.el-pagination{
:deep(.el-card__body) {
padding: 0px;
.el-pagination {
justify-content: end;
}
}

11
src/views/model/modelDetail.vue
View File

@ -67,7 +67,7 @@
<td style="width: 50%;">
<span class="sp-title">网络配置:</span>
<span class="sp-text sp-file">
<a style="line-height:24px;" ref="#"><el-icon>
<a style="line-height:24px;" @click="showModelParameters"><el-icon>
<Document />
</el-icon>查看配置文件</a>
</span>
@ -94,6 +94,7 @@
<el-button type="primary" @click="doBack">返回</el-button>
</el-card>
</div>
<JsonViewDlg ref="jsonDlg"></JsonViewDlg>
</template>
<script setup>
@ -102,10 +103,18 @@ import request from 'axios'
const router = useRouter();
const route = useRoute()
let url = ref("")
const jsonDlg = ref()
let modelInfo = reactive({
info: {},
opers: []
})
const showModelParameters = () => {
jsonDlg.value.showDialog({
title: '查看网络配置',
width: '800px',
data: modelInfo.info.model_parameters
})
}
const initData = () => {
let id = route.query.id;
let ajaxs = [];

15
src/views/model/uploadModel.vue
View File

@ -105,7 +105,8 @@
</el-form-item>
</el-col>
<el-col :span="12" style="position: relative;">
<el-button v-if="upForm.model_parameters" style="position: absolute;left:240px;z-index:999">
<el-button v-if="upForm.model_parameters" style="position: absolute;left:240px;z-index:999"
@click="showModelParameters">
<i-ep-view />
查看配置</el-button>
<el-form-item label="网络配置" prop="model_parameters">
@ -126,7 +127,7 @@
</el-row>
</el-form>
</div>
<div class="div-log">
<div class="div-log" v-if="1 == 2">
<div style="font-weight: bold;font-size:14px;padding:10px 10px">分割日志</div>
<el-card class="split-log">
<div v-for="(it, idx) in logList" :key="idx" class="log-item">
@ -140,7 +141,7 @@
<el-button @click="doBack">取消</el-button>
</el-card>
</div>
<JsonViewDlg ref="jsonDlg"></JsonViewDlg>
</template>
<script setup>
@ -159,6 +160,7 @@ let listOpt = reactive({
})
let fileList = ref([])
const uploadRef1 = ref()
let jsonDlg = ref()
const doSave = () => {
uploadForm.value?.validate((valid) => {
@ -192,6 +194,13 @@ let upForm = reactive({
]
})
const showModelParameters = () => {
jsonDlg.value.showDialog({
title: '查看网络配置',
width: '800px',
data: upForm.model_parameters
})
}
const logList = reactive([{
date: '2024-05-06 18:34:36', log: '系统已启动编译'
}, { date: '2024-05-06 18:34:36', log: '系统正在分割目标文件' },