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

Compare commits

base: sxyanzhu:e3b440c6891954c8ff210b59031663ca2c9f57ea
Branches Tags
sxyanzhu:main
..
compare: sxyanzhu:6974102d6a0129432828df2b712777adefabde03
Branches Tags
sxyanzhu:main

No commits in common. "e3b440c6891954c8ff210b59031663ca2c9f57ea" and "6974102d6a0129432828df2b712777adefabde03" have entirely different histories.
e3b440c689 ... 6974102d6a

13 changed files with 9831 additions and 1022 deletions
Show Stats Expand all files Collapse all files

4
.env.development
View File

@ -3,9 +3,9 @@ VITE_APP_PORT = 3000
# 代理前缀
VITE_APP_BASE_API = '/api'
#VITE_APP_API_URL = http://62.234.3.186/mk/ai/api
VITE_APP_API_URL = http://62.234.3.186/mk/ai/api
# 线上接口地址
VITE_APP_API_URL = http://10.5.1.137:8800
#VITE_APP_API_URL = http://10.5.1.137:8800
# 开发接口地址
# VITE_APP_API_URL = http://localhost:8989

20
src/api/models/index.js
View File

@ -47,28 +47,12 @@ const download=(id)=>{
method: "get"
});
}
//上传数据文件
const upload = (file) => {
debugger
const formData = new FormData();
formData.append("file_name", file.name);
formData.append("file_content",file)
formData.append("file",file)
return request({
url: `/models/upload`,
method: "post",
data: formData,
headers: {
"Content-Type": "multipart/form-data",
},
});
}
export default {
list,
add,
deleteModel,
findOne,
adaptOperators,
download,
upload
download
}

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

@ -1,30 +0,0 @@
<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,7 +98,6 @@ 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"];

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

@ -128,14 +128,12 @@
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: '',
@ -154,7 +152,6 @@ const info = reactive({
connInfo: null,
nodes: [],
editObj: null,
type: '',
})
const selNode = reactive({
info: null,
@ -330,7 +327,6 @@ 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,
@ -339,22 +335,13 @@ const doSave = () => {
operator_connection_nodes: flowData.nodes,
operator_connection_edges: flowData.edges
};
if (info.type == "add") {
ConnApi.add(postData).then(d => {
if (d.data.code == 0) {
ElMessage.success("增加互联成功!");
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" })
}
});
}
}
});
@ -362,51 +349,19 @@ const doSave = () => {
const doCancel = () => {
router.push({ path: "/connection/index" })
}
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.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;
ConnApi.detail(id).then(d => {
info.connInfo = d.data?.data || {};
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;
});
}
};
onMounted(() => {
if (route.query.type == "edit") {
info.type = "edit"
initEditData();
} else if (route.query.type == "addByConn") {
info.type = "add"
initConnData();
} else {
info.type = "add"
initData();
}
window.xapp = getCurrentInstance();
});
</script>
<style scoped lang='scss'>

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

@ -1,9 +1,7 @@
<!-- 用户管理 -->
<template>
<div class="app-container">
<div class="search-container" style="position: relative;">
<el-button type="primary" @click="doAddByModel"
style="position: absolute;left:10px;"><i-ep-plus />新建互联</el-button>
<div class="search-container">
<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"
@ -31,16 +29,23 @@
<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="操作" fixed="right" align="center" width="320">
<el-table-column label="状态" width="100" align="left" prop="connection_created">
<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" style="margin:0px;"
<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="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>
<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>
</template>
</el-table-column>
</el-table>
@ -49,7 +54,6 @@
<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>
@ -57,11 +61,10 @@
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>({
@ -82,9 +85,6 @@ watch(dateTimeRange, (newVal) => {
}
});
const doAddByModel = () => {
selModelDlg.value.showDialog();
}
/** 查询 */
function handleQuery() {
loading.value = true;
@ -134,15 +134,13 @@ 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: 'addByConn' } })
router.push({ path: "/connection/edit", query: { id: row.connection_id, type: 'add' } })
}

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

@ -1,54 +0,0 @@
<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>

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

@ -41,8 +41,7 @@
<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>
@ -50,7 +49,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>
@ -58,12 +57,10 @@
<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">
@ -159,14 +156,13 @@ 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(res => {
let d = res.data
const loadInfo=()=>{
InfoApi.statistics().then(d => {
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" },
@ -245,7 +241,6 @@ onMounted(() => {
.right-panel {
min-width: 240px;
max-width: 240px;
padding-left: 8px;
}
@ -309,7 +304,6 @@ onMounted(() => {
.right-panel {
min-width: 300px;
max-width: 300px;
padding-left: 12px;
}

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

@ -1,5 +1,5 @@
<template>
<div class="dashboard-container" :class="isSmallScreen ? 'is-small' : ''">
<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">
@ -8,7 +8,7 @@
<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>
<span style="color:dodgerblue;">{{ it.ucnt }} </span>/ <span style="font-size:14px;">{{it.count }}</span>
</div>
</div>
</el-card>
@ -25,8 +25,7 @@
</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-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 }}
@ -41,11 +40,8 @@
<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>
<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">
@ -86,7 +82,7 @@
<div style="color:#333;font-weight: bold;font-size:15px;">超异构任务部署流程</div>
</div>
</template>
<ModelFlow />
<ModelFlow/>
</el-card>
</div>
<div style="" class="right-panel">
@ -97,7 +93,7 @@
</div>
</template>
<el-scrollbar height="484px">
<IndexNotice />
<IndexNotice/>
</el-scrollbar>
</el-card>
@ -112,28 +108,28 @@
</div>
</div>
</div>
</template>
</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" },
]);
<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([
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(), },
@ -141,13 +137,13 @@ let devInfos = reactive([
{ 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) => {
{ 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 "离线";
}
@ -172,26 +168,25 @@ const getState = (e: any) => {
return "升级中";
}
onMounted(() => {
winWidth.value = window.outerWidth;
window.onresize = () => {
setTimeout(() => {
winWidth.value = window.outerWidth;
}, 100);
onMounted(()=>{
winWidth.value=window.outerWidth;
window.onresize=()=>{
setTimeout(()=>{
winWidth.value=window.outerWidth;
},100);
}
DeviceAPI.getStatus().then(d => {
DeviceAPI.getStatus().then(d=>{
});
});
</script>
});
</script>
<style lang="scss" scoped>
.dashboard-container {
<style lang="scss" scoped>
.dashboard-container {
position: relative;
min-width: 960px;
min-width:960px;
padding: 0px 24px;
&.is-small {
&.is-small{
padding: 0px 12px;
}
@ -223,89 +218,73 @@ onMounted(() => {
.svg-icon {
fill: currentcolor !important;
}
}
</style>
<style lang="scss">
.dashboard-container {
&.is-small {
}
</style>
<style lang="scss">
.dashboard-container {
&.is-small{
.dev-row3 {
padding: 0px !important;
.device-state {
width: 80px !important;
padding:0px !important;
.device-state{
width:80px !important;
}
}
.right-panel {
.right-panel{
min-width: 240px;
max-width: 240px;
padding-left: 8px;
padding-left:8px;
}
.model-flow {
.card-item {
width: 100px;
.card-item{
width:100px;
}
.row-1 {
.line {
.line{
width: calc(20% - 100px);
top: 10px;
top:10px;
}
}
.row-3 {
.line {
.line{
width: calc(20% - 100px);
}
.card-center {
.card-center-item {
width: 100px;
&:first-child {
&::after {
left: 50px;
.card-center{
.card-center-item{
width:100px;
&:first-child{
&::after{
left:50px;
}
&::before {
left: 50px;
&::before{
left:50px;
}
}
&:last-child {
&::after {
left: -20px;
&:last-child{
&::after{
left:-20px;
}
&::before {
left: 51px;
&::before{
left:51px;
}
}
}
}
.card-item {
&.line-top {
&::after {
left: 50px;
.card-item{
&.line-top{
&::after{
left:50px;
}
&::before {
left: 48px;
&::before{
left:48px;
}
}
}
}
}
}
.right-panel {
.right-panel{
min-width: 300px;
max-width: 300px;
padding-left: 12px;
padding-left:12px;
}
.el-card__body {
padding: 10px 10px;
}
@ -352,22 +331,19 @@ onMounted(() => {
}
.top-row2 {
&.notice-card {
.el-card__header {
&.notice-card{
.el-card__header{
border-bottom: 1px solid #ebeef5;
}
.el-card__body {
.el-scrollbar {
padding: 10px;
.el-scrollbar{
padding:10px;
}
}
}
.el-card__header {
.el-card__header{
padding: 8px;
border: none;
border:none;
.row2-top {
position: relative;
@ -380,14 +356,11 @@ onMounted(() => {
}
}
.el-card__body {
padding: 0px;
.el-scrollbar {
padding: 0px 10px;
.el-scrollbar__bar.is-horizontal {
.el-card__body{
padding:0px;
.el-scrollbar{
padding:0px 10px;
.el-scrollbar__bar.is-horizontal{
display: none;
}
}
@ -420,65 +393,54 @@ onMounted(() => {
background: #fff;
box-shadow: var(--el-box-shadow-light);
border-radius: 8px;
padding: 10px;
padding:10px;
.dev-row3 {
display: flex;
padding: 12px;
padding:12px;
align-items: center;
.device-state {
width: 100px;
text-align: center;
}
.state-text {
font-size: 16px;
&.state0 {
color: var(--el-color-primary);
.state-text{
font-size:16px;
&.state0{
color:var(--el-color-primary);
}
&.state1 {
color: var(--el-color-warning);
&.state1{
color:var(--el-color-warning);
}
&.state2 {
color: var(--el-color-danger);
&.state2{
color:var(--el-color-danger);
}
}
.dev-chart {
.dev-chart{
flex-grow: 1;
position: relative;
top: -10px;
.chart-item-title {
.chart-item-title{
margin: 12px 0px 0px;
font-size: 12px;
font-size:12px;
position: relative;
span {
&:first-child {
span{
&:first-child{
font-weight: bold;
}
&:last-child {
&:last-child{
position: absolute;
right: 0px;
}
}
}
.chart-line {
.chart-line{
background-color: #ccc;
height: 8px;
border-radius: 4px;
.chart-line-inline {
height:8px;
border-radius:4px;
.chart-line-inline{
background-color: var(--el-color-primary);
height: 8px;
border-radius: 4px;
height:8px;
border-radius:4px;
}
}
}
@ -488,33 +450,29 @@ onMounted(() => {
}
}
}
.proc-card {
margin-top: 20px;
.proc-card{
margin-top:20px;
padding: 8px;
.el-card__header {
.el-card__header{
padding: 8px;
border: none;
border:none;
}
.el-card__body {
.el-card__body{
background: #EEF7FE;
border-radius: 8px;
height: 300px;
height:300px;
}
&.server-status {
&.server-status{
background: #EEF7FE;
padding: 8px;
.el-card__header {}
.el-card__header{
}
.el-card__body {
background: #fff;
box-shadow: var(--el-box-shadow-light);
}
}
}
}
</style>
}
</style>

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

@ -2,7 +2,7 @@
<template>
<div class="app-container">
<div class="search-container">
<el-button type="primary" @click="doUploadModel"><i-ep-plus />上传模型</el-button>
<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"
@ -20,9 +20,9 @@
<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" v-if="1 == 2" />
<el-table-column label="模型类型" align="left" prop="modl_main_type_name" />
<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_version" />
<el-table-column label="说明" width="300" align="left" prop="model_desc" />
<el-table-column label="上传时间" width="120" align="left" prop="create_time" />
@ -31,7 +31,8 @@
<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>
@ -61,7 +62,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); // 数据总数
@ -76,19 +77,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" });
}
@ -97,7 +98,7 @@ function resetQuery() {
queryFormRef.value.resetFields();
dateTimeRange.value = "";
queryParams.page_num = 1;
queryParams.model_name = '';
queryParams.model_name='';
handleQuery();
}
@ -113,8 +114,8 @@ 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();
}
@ -123,8 +124,8 @@ function handleDelete(row: { [key: string]: any }) {
});
}
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'}})
}
/**
* 打开弹窗
@ -153,19 +154,16 @@ 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;" @click="showModelParameters"><el-icon>
<a style="line-height:24px;" ref="#"><el-icon>
<Document />
</el-icon>查看配置文件</a>
</span>
@ -94,7 +94,6 @@
<el-button type="primary" @click="doBack">返回</el-button>
</el-card>
</div>
<JsonViewDlg ref="jsonDlg"></JsonViewDlg>
</template>
<script setup>
@ -103,18 +102,10 @@ 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 = [];

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

@ -13,17 +13,18 @@
<el-row>
<el-col :span="14">
<el-form-item label="模型类型" prop="modl_main_type">
<el-select v-model="upForm.modl_main_type" placeholder="请选择" @change="doMainTypeChange">
<el-option v-for="(it, idx) in listOpt.modelType" :key="idx" :label="it.modl_main_type_name"
:value="it.modl_main_type" />
<el-select v-model="upForm.modl_main_type" placeholder="请选择"
@change="doMainTypeChange">
<el-option v-for="(it, idx) in listOpt.modelType" :key="idx"
:label="it.modl_main_type_name" :value="it.modl_main_type" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="" prop="modl_sub_type" class="form-item-sub-type">
<el-select v-model="upForm.modl_sub_type" placeholder="请选择">
<el-option v-for="(it, idx) in listOpt.modelSubType" :key="idx" :label="it.modl_sub_type_name"
:value="it.modl_sub_type" />
<el-option v-for="(it, idx) in listOpt.modelSubType" :key="idx"
:label="it.modl_sub_type_name" :value="it.modl_sub_type" />
</el-select>
</el-form-item>
</el-col>
@ -38,9 +39,9 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="模型描述">
<el-input v-model="upForm.model_desc" type="textarea" style="width:100%;" :rows="4"
placeholder="请输入模型描述" />
<el-form-item label="版本描述">
<el-input v-model="upForm.desc" type="textarea" style="width:100%;" :rows="4"
placeholder="请输入版本描述" />
</el-form-item>
</el-col>
@ -48,30 +49,20 @@
<el-row>
<el-col :span="12">
<el-form-item label="算法框架" prop="modl_framework">
<el-select v-model="upForm.modl_framework" placeholder="请选择" style="width: 48%;margin-left:2%;">
<el-option v-for="(it, idx) in listOpt.modelFramework" :label="it" :value="it" :key="idx" />
<el-select v-model="upForm.modl_framework" placeholder="请选择"
style="width: 48%;margin-left:2%;">
<el-option v-for="(it, idx) in listOpt.modelFramework" :label="it" :value="it"
:key="idx" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" class="div-mode-type">
<el-row>
<el-col :span="14">
<el-form-item label="模型网络" prop="modl_net_main_type">
<el-select v-model="upForm.modl_net_main_type" placeholder="请选择" @change="doNetMainTypeChange">
<el-option v-for="(it, idx) in listOpt.modelNetType" :label="it.model_net_serial"
:value="it.model_net_serial" :key="idx" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="" prop="modl_net_type" class="form-item-sub-type">
<el-select v-model="upForm.modl_net_type" placeholder="请选择">
<el-option v-for="(it, idx) in listOpt.modelNetSubType" :label="it" :value="it" :key="idx" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-col :span="12">
<el-form-item label="模型网络" prop="modl_net_type">
<el-select v-model="upForm.modl_net_type" placeholder="请选择" style="width: 48%;margin-left:2%;">
<el-option v-for="(it,idx) in listOpt.modelNetType" :label="it" :value="it" :key="idx" />
</el-select>
</el-form-item>
</el-col>
</el-row>
@ -79,7 +70,7 @@
<el-col :span="12">
<el-form-item label="文件格式" prop="modl_file_type">
<el-select v-model="upForm.modl_file_type" placeholder="请选择" style="width: 48%;margin-left:2%;">
<el-option v-for="(it, idx) in listOpt.modelFileType" :label="it" :value="it" :key="idx" />
<el-option v-for="(it,idx) in listOpt.modelFileType" :label="it" :value="it" :key="idx" />
</el-select>
</el-form-item>
</el-col>
@ -90,34 +81,28 @@
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="网络参数" prop="model_file_list">
<el-upload ref="uploadRef1" class="uploadFile1" :http-request="handleFileChange"
:on-remove="handleFileRemove" :on-exceed="handleFileExceed" :auto-upload-demo="false" :limit="1"
accept=".onnx,.ts">
<el-button type="primary"><el-icon class="el-icon--upload"> <i-ep-upload-filled />
</el-icon>选择文件</el-button>
<el-form-item label="网络参数">
<el-upload v-model:file-list="fileList" class="upload-demo"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1">
<el-button type="primary">请选择文件</el-button>
<template #tip>
<div class="el-upload__tip">
请上传大小不超过<span style="color:coral">10M</span>,格式为<span style="color:coral">onnx/ts</span>的文件
请上传大小不超过<span style="color:coral">10M</span>,格式为<span
style="color:coral">onnx/ts</span>的文件
</div>
</template>
</el-upload>
</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"
@click="showModelParameters">
<i-ep-view />
查看配置</el-button>
<el-form-item label="网络配置" prop="model_parameters">
<el-upload class="upload-demo" ref="uploadRef2" :on-remove="handleFileRemoveCfg"
:on-exceed="handleFileExceed" :auto-upload-demo="false" :http-request="handleUploadCfg" :limit="1"
accept=".json">
<el-button type="primary"><el-icon class="el-icon--upload"> <i-ep-upload-filled />
</el-icon>选择文件</el-button>
<el-col :span="12">
<el-form-item label="网络配置">
<el-upload v-model:file-list="fileList" class="upload-demo"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1">
<el-button type="primary">请选择文件</el-button>
<template #tip>
<div class="el-upload__tip">
请上传大小不超过<span style="color:coral">10M</span>,格式为<span style="color:coral">json</span>的文件
请上传大小不超过<span style="color:coral">10M</span>,格式为<span
style="color:coral">json</span>的文件
</div>
</template>
</el-upload>
@ -127,7 +112,7 @@
</el-row>
</el-form>
</div>
<div class="div-log" v-if="1 == 2">
<div class="div-log">
<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">
@ -141,7 +126,7 @@
<el-button @click="doBack">取消</el-button>
</el-card>
</div>
<JsonViewDlg ref="jsonDlg"></JsonViewDlg>
</template>
<script setup>
@ -155,18 +140,14 @@ let listOpt = reactive({
modelNetType: [],
modelFileType: [],
modelSubType: [],
modelNetSubType: [],
upFiles: [],
})
let fileList = ref([])
const uploadRef1 = ref()
let jsonDlg = ref()
let fileList=ref([])
const doSave = () => {
uploadForm.value?.validate((valid) => {
if (valid) {
ModelApi.add(upForm).then(d => {
if (d.data.code == 0) {
ModelApi.add(upForm).then(d=>{
if(d.data.code==0){
ElMessage.success("增加模型成功!");
router.push({ path: "/modelMgr/index" })
}
@ -174,6 +155,7 @@ const doSave = () => {
}
});
}
const doBack = () => {
router.push({ path: "/modelMgr/index" })
@ -185,22 +167,12 @@ let upForm = reactive({
model_desc: '',
modl_main_type: '',
modl_sub_type: '',
modl_net_main_type: '',
modl_net_type: '',
modl_framework: '',
modl_file_type: '',
model_parameters: null,
model_file_list: [
]
model_parameters: {},
model_file_list: []
})
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: '系统正在分割目标文件' },
@ -208,111 +180,16 @@ const logList = reactive([{
const upRules = computed(() => {
return {
model_name: [{ required: true, trigger: "blur", message: "请输入模型名称", },],
modl_main_type: [{ required: true, trigger: "blur", message: "请选择主类型", }],
modl_sub_type: [{ required: true, trigger: "blur", message: "请选择子类型", }],
model_version: [{ required: true, trigger: "blur", message: "请输入模型版本", }],
modl_framework: [{ required: true, trigger: "blur", message: "请选择算法框架", }],
modl_net_main_type: [{ required: true, trigger: "blur", message: "请选择主模型网络", }],
modl_net_type: [{ required: true, trigger: "blur", message: "请选择模型网络", }],
modl_file_type: [{ required: true, trigger: "blur", message: "请选择文件类型", }],
model_file_list: [{ required: true, trigger: "blur", message: "请上传网络参数", }],
model_parameters: [{ required: true, trigger: "blur", message: "请上传网络配置", }],
model_name: [{required: true,trigger: "blur",message: "请输入模型名称",},],
modl_main_type: [{required: true,trigger: "blur",message: "请选择主类型",}],
modl_sub_type: [{required: true,trigger: "blur",message: "请选择子类型",}],
model_version: [{required: true,trigger: "blur",message: "请输入模型版本",}],
modl_framework: [{required: true,trigger: "blur",message: "请选择算法框架",}],
modl_net_type: [{required: true,trigger: "blur",message: "请选择模型网络",}],
modl_file_type: [{required: true,trigger: "blur",message: "请选择文件类型",}],
}
});
const handleFileRemoveCfg = (a, b) => {
upForm.model_parameters = null;
}
const handleUploadCfg = (file) => {
if (file.file.size > 10 * 1024 * 1024) {
ElMessage.warning("文件大小不能超10M");
file.onError("文件大小不能超10M")
return;
}
let ext = file.file.name.split(".").pop().toLowerCase();
if (["json"].indexOf(ext) == -1) {
ElMessage.warning("请上传json格式文件");
file.onError("请上传json格式文件")
return;
}
//先创建一个读文件的对象 FileReader
let reader = new FileReader();
//判断浏览器是否支持 FileReader
if (typeof FileReader === "undefined") {
ElMessage.warning("您的浏览器不支持文件读取。");
file.onError("您的浏览器不支持文件读取。")
return;
}
uploadFile(file).then((res) => {
if (isJSON(res)) {
upForm.model_parameters = JSON.parse(res);
}
});
}
/** 解析json */
function isJSON(str) {
try {
// 尝试解析输入的字符串
JSON.parse(str);
return true;
} catch (error) {
return false;
}
}
// 文件读取
function uploadFile(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
reader.readAsArrayBuffer(file.file);
reader.onload = function (e) {
var ints = new Uint8Array(e.target.result); //要使用读取的内容，所以将读取内容转化成Uint8Array
let snippets = new TextDecoder("UTF-8").decode(ints); //二进制缓存区内容转化成中文（即也就是读取到的内容）
resolve(snippets);
};
});
}
// 文件上传
function handleFileChange(file, b) {
if (file.file.size > 10 * 1024 * 1024) {
ElMessage.warning("文件大小不能超10M");
file.onError("文件大小不能超10M")
return;
}
let ext = file.file.name.split(".").pop().toLowerCase();
if (["onnx", "ts"].indexOf(ext) == -1) {
ElMessage.warning("请上传onnx/ts格式文件");
file.onError("请上传onnx/ts格式文件")
return;
}
ModelApi.upload(file.file).then((res) => {
listOpt.upFiles.push({
name: file.file.name,
serverName: res.data.data.file_name
})
debugger
upForm.model_file_list = listOpt.upFiles.map(it => it.serverName);
});
}
function handleFileExceed() {
ElMessage.warning("超过上传上限！");
}
function handleFileRemove(a, b, c) {
let tmps = listOpt.upFiles.filter(d => d.name == a.name);
if (tmps.length > 0) {
let idx = listOpt.upFiles.indexOf(tmps[0]);
listOpt.upFiles.splice(idx, 1);
}
upForm.model_file_list = listOpt.upFiles.map(it => it.serverName);
}
const initData = () => {
let ajaxs = [];
ajaxs.push(ConstApi.modlMainType());
@ -322,11 +199,7 @@ const initData = () => {
request.all(ajaxs).then(res => {
listOpt.modelType = res[0].data?.data?.modl_main_type_list || [];
listOpt.modelFramework = res[1].data?.data?.modl_framework_list || [];
listOpt.modelNetType = (res[2].data?.data?.modl_net_type_list || []).map(it => {
it.selected = false;
it.subSelect = "";
return it;
});
listOpt.modelNetType = res[2].data?.data?.model_net_type_list || [];
listOpt.modelFileType = res[3].data?.data?.modl_file_type_list || [];
});
}
@ -334,14 +207,6 @@ const doMainTypeChange = () => {
let mainType = upForm.modl_main_type;
let subList = listOpt.modelType.filter(d => d.modl_main_type == mainType);
listOpt.modelSubType = subList.length > 0 ? subList[0].modl_sub_type_list || [] : [];
if (listOpt.modelSubType.filter(d => d.modl_sub_type == upForm.modl_sub_type).length == 0) {
upForm.modl_sub_type = '';
}
}
const doNetMainTypeChange = () => {
let tmps = listOpt.modelNetType.filter(d => d.model_net_serial == upForm.modl_net_main_type);
listOpt.modelNetSubType = tmps.length > 0 ? tmps[0].model_net_type_list : [];
upForm.modl_net_type = '';
}
onMounted(() => {
initData();
@ -364,11 +229,11 @@ onMounted(() => {
}
</style>
<style lang="scss">
.upload-model {
.div-mode-type {
.form-item-sub-type {
.el-form-item__content {
margin-left: 10px !important;
.upload-model{
.div-mode-type{
.form-item-sub-type{
.el-form-item__content{
margin-left:10px !important;
}
}
}

9151
yarn.lock 100644
View File

File diff suppressed because it is too large Load Diff