<template>
|
<div v-loading="loading" class="modelLibiraryBox">
|
<el-card>
|
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"
|
style="margin-bottom: -20px">
|
<el-form-item label="服务名称" prop="name">
|
<el-input v-model="queryParams.name" placeholder="请输入模型名称" clearable size="small"
|
@keyup.enter.native="setQueryParamsQuery" />
|
</el-form-item>
|
<el-form-item label="服务类别" prop="type">
|
<el-select v-model="queryParams.type" @change="getList" placeholder="请选择模型类别" clearable
|
size="small">
|
<el-option v-for="dict in dict.type.iot_model_library_type" :key="dict.value"
|
:label="dict.label" :value="dict.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="mini"
|
@click="setQueryParamsQuery">搜索</el-button>
|
<el-button icon="el-icon-refresh" size="mini" @click="setQueryParamsRest">重置</el-button>
|
</el-form-item>
|
|
</el-form>
|
</el-card>
|
<el-card class="modelLibiraryContent">
|
<el-tabs v-model="activeName" @tab-click="setQueryParamsRest">
|
<el-tab-pane label="未发布模型数据" name="first"></el-tab-pane>
|
<el-tab-pane label="已发布模型数据" name="second"></el-tab-pane>
|
</el-tabs>
|
<div class="modelLibiraryTable">
|
|
<div class="modelLibiraryTable">
|
<el-table :data="templateList" border>
|
<!-- <el-table-column type="selection" width="55" /> -->
|
<el-table-column label="模型名称" align="center" prop="name" />
|
<el-table-column label="模型类型" align="center" prop="type" />
|
<el-table-column label="模型大小" align="center" prop="sizes" :formatter="formatterSize" />
|
<el-table-column label="发布状态" align="center">
|
<template slot-scope="scope">
|
<span v-if="scope.row.url">已发布</span>
|
<span v-else>未发布</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="发布地址" align="center" prop="url" />
|
|
<el-table-column label="创建时间" align="center" prop="createTime" :formatter="formatterTime" />
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240">
|
<template slot-scope="scope">
|
|
<el-button v-show="activeName == 'first' && !scope.row.url" type="success" size="small"
|
@click="setModelLibraryExport(scope.row)" icon="el-icon-position">发布</el-button>
|
<el-button v-show="activeName == 'second'" size="small"
|
@click="setModelLibraryDelete(scope.row)" type="warning"
|
icon="el-icon-delete">移除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageIndex"
|
:limit.sync="queryParams.pageSize" @pagination="getList" />
|
</div>
|
</div>
|
</el-card>
|
|
</div>
|
</template>
|
|
<script>
|
|
import configTools from '../../../assets/js/configTools';
|
import { getToken } from "@/utils/auth";
|
import {
|
modelSelectMetasByPage,
|
modelSelectPublishByPage,
|
modelPubMetas,
|
modelDeletePublishes
|
} from '@/api/iot/modelServer';
|
|
export default {
|
name: 'modelserver',
|
dicts: ['iot_model_library_type'],
|
data() {
|
return {
|
loading: false,
|
queryParams: {
|
pageIndex: 1,
|
pageSize: 10,
|
name: null,
|
type: null,
|
},
|
// 是否为租户
|
isTenant: false,
|
templateList: [
|
|
],
|
// 总条数
|
total: 0,
|
title: '',
|
// 是否显示弹出层
|
open: false,
|
modelFrom: {
|
name: '',
|
type: '',
|
path: '',
|
bak: '',
|
ids: '',
|
},
|
selectPath: null,
|
selectMappers: null,
|
//表单验证
|
rules: {
|
name: [
|
{
|
required: true,
|
message: '模型名称不能为空',
|
trigger: 'blur',
|
},
|
],
|
type: [{ required: true, message: '请选择模型类别', trigger: 'change' }],
|
path: [{ required: true, message: '请选择需要上传的模型文件', trigger: 'change' }],
|
},
|
multipleSelection: [],
|
headers: { Authorization: "Bearer " + getToken() },
|
activeName: 'first'
|
};
|
},
|
created() {
|
this.init();
|
},
|
methods: {
|
|
handleClick() {
|
if (this.activeName == 'first') {
|
this.getList()
|
} else {
|
this.getListSource();
|
}
|
},
|
init() {
|
if (this.$store.state.user.roles.indexOf('tenant') !== -1) {
|
this.isTenant = true;
|
}
|
|
this.handleClick();
|
},
|
getSelectPath() {
|
modelSelectPath().then((response) => {
|
if (response.code == 200 && response.msg) {
|
this.selectPath = response.msg;
|
} else {
|
this.$message('模型上传路径获取失败: ' + response.msg);
|
}
|
});
|
},
|
handleSelectionChange(val) {
|
this.multipleSelection = val;
|
},
|
//查询
|
setQueryParamsQuery() {
|
this.queryParams.pageIndex = 1;
|
this.handleClick();
|
},
|
// 重置
|
setQueryParamsRest() {
|
this.queryParams = {
|
pageIndex: 1,
|
pageSize: 10,
|
name: null,
|
type: null,
|
}
|
this.handleClick();
|
},
|
// 搜索
|
getList() {
|
modelSelectMetasByPage(this.queryParams).then((response) => {
|
if (response.code == 200) {
|
|
if (response.data) {
|
this.total = response.data.length;
|
this.templateList = response.data;
|
} else {
|
this.total = 0;
|
this.templateList = [];
|
}
|
|
} else {
|
this.$message('模型数据列表获取失败。');
|
}
|
})
|
},
|
getListSource() {
|
modelSelectPublishByPage(this.queryParams).then((response) => {
|
if (response.code == 200) {
|
if (response.data) {
|
this.total = response.data.length;
|
this.templateList = response.data;
|
} else {
|
this.total = 0;
|
this.templateList = [];
|
}
|
} else {
|
this.$message('模型数据列表获取失败。');
|
}
|
})
|
},
|
setModelLibraryExport(res) {
|
modelPubMetas({
|
ids: [res.id]
|
}).then(response => {
|
if (response.code == 200) {
|
this.$message({
|
message: '模型数据发布成功。',
|
type: 'success'
|
});
|
this.handleClick();
|
} else {
|
this.$message('模型数据发布失败。');
|
}
|
|
})
|
},
|
setModelLibraryDelete(res) {
|
modelDeletePublishes({
|
ids: [res.id].toString()
|
}).then(response => {
|
if (response.code == 200) {
|
this.$message({
|
message: '模型服务移除成功。',
|
type: 'success'
|
});
|
this.handleClick();
|
} else {
|
this.$message('模型服务移除失败。');
|
}
|
|
})
|
},
|
formatterTime(row, column, cellValue, index) {
|
if (cellValue) {
|
return configTools.formatterTime(cellValue);
|
} else {
|
return null
|
}
|
|
},
|
formatterSize(row, column, cellValue, index) {
|
|
if (cellValue) {
|
return configTools.formatterSize(cellValue);
|
} else {
|
return null
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.modelLibiraryBox {
|
padding: 6px;
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
display: flex;
|
flex-direction: column;
|
|
.modelLibiraryContent {
|
margin: 6px 0px;
|
flex: 1;
|
position: relative;
|
|
::v-deep .el-card__body {
|
padding: 15px !important;
|
}
|
|
.modelLibiraryTable {
|
width: calc(100% - 30px);
|
height: calc(100% - 36px);
|
position: absolute;
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
}
|
</style>
|
