Commit 49ca2834 authored by pengxin's avatar pengxin

Merge branch 'master' of http://192.168.0.35:3000/lmp/lmp_web

parents 88aeeece 71612cf6
......@@ -5,14 +5,14 @@
</template>
<script>
import projectConfig from '@/core/config';
import projectConfig from '@/core/config'
export default {
watch: {
$route: {
handler (newValue) {
document.title = projectConfig.projectName;
if (newValue.meta && newValue.meta.title) document.title += ' - ' + newValue.meta.title;
handler(newValue) {
document.title = projectConfig.projectName
if (newValue.meta && newValue.meta.title) document.title += ' - ' + newValue.meta.title
},
immediate: true
}
......
export default class applicationAccess {
static list (sender, params, axiosOption, httpOption) {
return sender.doUrl('/admin/app/applicationAccess/list', 'post', params, axiosOption, httpOption);
}
static view (sender, params, axiosOption, httpOption) {
return sender.doUrl('/admin/app/applicationAccess/view', 'get', params, axiosOption, httpOption);
}
static add (sender, params, axiosOption, httpOption) {
return sender.doUrl('/admin/app/applicationAccess/add', 'post', params, axiosOption, httpOption);
}
static update (sender, params, axiosOption, httpOption) {
return sender.doUrl('/admin/app/applicationAccess/update', 'post', params, axiosOption, httpOption);
}
static delete (sender, params, axiosOption, httpOption) {
return sender.doUrl('/admin/app/applicationAccess/delete', 'post', params, axiosOption, httpOption);
}
}
......@@ -19,6 +19,7 @@ import DatasetData from './GptController/DatasetData.js';
import ModelDeployment from './GptController/ModelDeployment.js';
import KnowledgeGraph from './GptController/KnowledgeGraph.js';
import DataSetCleaning from './GptController/DataSetCleaning.js';
import applicationAccess from './GptController/applicationAccess.js';
export {
TemplateController,
......@@ -40,5 +41,6 @@ export {
DatasetData,
ModelDeployment,
KnowledgeGraph,
DataSetCleaning
DataSetCleaning,
applicationAccess
}
module.exports = {
// baseUrl: 'http://218.76.0.69:8082/',
// baseUrl: 'http://192.168.0.34:8082/',
baseUrl: 'http://192.168.0.34:8082/',
// baseUrl: 'http://192.168.0.36:8082/',
baseUrl: 'http://192.168.0.36:8082/',
// baseUrl: 'http://192.168.0.34:8082/',
wsUrl: 'ws://218.76.0.69:7860/',
projectName: '灵境大模型平台'
}
module.exports = {
baseUrl: 'http://218.76.0.69:8082/',
wsUrl: 'ws://218.76.0.69:7860/',
baseUrl: 'http://192.168.0.36:8082/',
wsUrl: 'ws://192.168.0.36:7860/',
projectName: '灵境大模型平台'
}
......@@ -28,7 +28,8 @@ import rightClick from '@/core/directive/rightClick.js';
import 'vxe-table/lib/style.css';
import '@/assets/online-icon/iconfont.css';
import VueClipboard from 'vue-clipboard2'
import jumpPage from '@/utils/jumpPage.js';
Vue.prototype.$jumpPage = jumpPage
Vue.prototype.$SocketService = SocketService
Vue.use(VueClipboard)
......
import store from '@/store/index.js';
const jumpPage = (name) => {
const menuList = store.getters.getMenuList
let menuId = ''
const loop = (name, menuList) => {
for (let index = 0; index < menuList.length; index++) {
const item = menuList[index]
if (item.formRouterName === name) {
menuId = item.menuId
break
} else {
if (item.children) {
loop(name, item.children)
}
}
}
}
loop(name, menuList)
store.commit('setCurrentMenuId', menuId)
}
export default jumpPage
......@@ -346,11 +346,11 @@ export default {
drill(data) {
// 去训练
console.log(data)
this.$router.push({ name: 'sft' })
this.$jumpPage('sft')
},
clean(data) {
// 去清洗
this.$router.push({ name: 'dataCleansing' })
this.$jumpPage('dataCleansing')
},
putOut(data) {
console.log(data)
......
......@@ -31,10 +31,10 @@ import { DatasetData } from '@/api/gptController.js'
export default {
data() {
return {
form: JSON.parse(JSON.stringify(this.row))
form: this.deepCopy(this.row)
}
},
props: ['row', 'columnList', 'refresh', 'isEdit'],
props: ['row', 'columnList', 'refresh', 'isEdit', 'versionId'],
components: {},
computed: {},
......@@ -42,6 +42,13 @@ export default {
mounted() {},
methods: {
deepCopy(data) {
try {
return JSON.parse(JSON.stringify(data))
} catch (error) {
return { data: { instruction: '', output: '' } }
}
},
onCancel(isSuccess) {
if (this.observer != null) {
this.observer.cancel(isSuccess)
......@@ -50,9 +57,10 @@ export default {
onSubmit() {
let params = {}
params.datasetMongoDto = this.form
DatasetData.update(this, params)
params.datasetMongoDto.versionId = this.versionId
DatasetData[this.versionId ? 'add' : 'update'](this, params)
.then((res) => {
this.$message.success('编辑成功')
this.$message.success(this.versionId ? '添加成功' : '编辑成功')
this.onCancel(true)
})
.catch((e) => {})
......
<!--详情 -->
<template>
<div class="tableBox">
<el-breadcrumb separator="|">
<el-breadcrumb-item :class="nowPage==0?'isactive':''" @click.native="breadcrumbClick(0)">全部({{ allNum}}</el-breadcrumb-item>
<el-breadcrumb-item :class="nowPage==1?'isactive':''" @click.native="breadcrumbClick(1)">无标注信息({{ unmarkedNum}}</el-breadcrumb-item>
<el-breadcrumb-item :class="nowPage==2?'isactive':''" @click.native="breadcrumbClick(2)">有标注信息({{ markedNum}}</el-breadcrumb-item>
</el-breadcrumb>
<div class="topBox">
<el-breadcrumb separator="|">
<el-breadcrumb-item :class="nowPage==0?'isactive':''" @click.native="breadcrumbClick(0)">全部({{ allNum}}</el-breadcrumb-item>
<el-breadcrumb-item :class="nowPage==1?'isactive':''" @click.native="breadcrumbClick(1)">无标注信息({{ unmarkedNum}}</el-breadcrumb-item>
<el-breadcrumb-item :class="nowPage==2?'isactive':''" @click.native="breadcrumbClick(2)">有标注信息({{ markedNum}}</el-breadcrumb-item>
</el-breadcrumb>
<el-button :size="defaultFormItemSize" @click="add()">新增</el-button>
</div>
<vxe-table border show-header-overflow show-overflow :row-config="{ isHover: true }" :data="myDataSetPage.tableData.impl.dataList" min-height="96">
<!-- <vxe-column field="index" title="序号"></vxe-column> -->
<!-- <vxe-column :field="'data.'+item" :title="item" v-for="item in columnList" :key="item"></vxe-column> -->
<vxe-column field="data.instruction" title="问题"></vxe-column>
<vxe-column field="data.output" title="回答"></vxe-column>
<vxe-column field="operation" title="操作" width="150px">
<template slot-scope="scope">
<el-button type="text" :size="defaultFormItemSize" @click="check(scope.row)">查看</el-button>
<el-button type="text" :size="defaultFormItemSize" @click="label(scope.row)" v-if="releaseStatus===0">标注</el-button>
<el-button type="text" :size="defaultFormItemSize" @click="label(scope.row)" v-if="releaseStatus===0">标注</el-button>
<el-button type="text" :size="defaultFormItemSize" @click="del(scope.row)" v-if="releaseStatus===0">删除</el-button>
</template>
</vxe-column>
......@@ -153,6 +157,24 @@ export default {
})
.catch((e) => {})
},
add() {
// 添加
this.$dialog
.show(
'添加',
label,
{
area: ['70%', '50%']
},
{ versionId: this.versionItem.versionId, refresh: this.refresh, isEdit: true }
)
.then((res) => {
this.refresh()
this.summaryCount()
})
.catch((e) => {})
},
del(item) {
this.$confirm('是否确认删除', '提示', {
confirmButtonText: '确定',
......@@ -283,4 +305,10 @@ export default {
/deep/ .isactive .el-breadcrumb__inner {
color: #0092ff !important;
}
.topBox {
display: flex;
height: auto;
align-items: center;
justify-content: space-between;
}
</style>
......@@ -4,6 +4,9 @@
<el-table-column type="index" width="50">
</el-table-column>
<el-table-column prop="name" label="名称">
<template slot-scope='scope'>
<div>{{scope.row.name}}</div>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间">
</el-table-column>
......@@ -26,6 +29,7 @@
<script>
import { KnowledgeManage } from '@/api/gptController.js'
import details from './details'
import filePreview from '@//views/gptTraining/modelService/testOnline/components/contentView/filePreview/index.vue'
export default {
data() {
......@@ -66,6 +70,16 @@ export default {
console.log(e)
})
},
preview(tagUrl) {
this.$dialog.show(
'文件预览',
filePreview,
{
area: ['100%', '100%']
},
{ url: tagUrl }
)
},
searchDocs(row) {
// let params = { knowledge_base_name: this.knowledgeName, file_name: row.name }
// KnowledgeManage.searchDocs(this, params)
......
......@@ -45,9 +45,9 @@
</el-tooltip>
</div> -->
<div style="margin-bottom:10px">
<el-button type="primary" plain :size="defaultFormItemSize" @click.stop="testLink(item)">测试连接</el-button>
<el-button type="primary" :size="defaultFormItemSize" :plain="true" @click.stop="edit(item)">编辑</el-button>
<el-button type="danger" :size="defaultFormItemSize" :plain="true" @click.stop="del(item)">删除</el-button>
<el-button plain :size="defaultFormItemSize" @click.stop="testLink(item)">测试连接</el-button>
<el-button :size="defaultFormItemSize" plain @click.stop="edit(item)">编辑</el-button>
<el-button :size="defaultFormItemSize" plain @click.stop="del(item)">删除</el-button>
</div>
</div>
</el-card>
......
......@@ -272,6 +272,9 @@ export default {
</script>
<style lang="scss" scoped>
@import '@/assets/style/element-variables.scss';
.title {
font-size: 16px;
}
.instructions {
background-color: white;
width: 100%;
......
......@@ -96,9 +96,7 @@ export default {
async pause() {
await this.PyApi(20)
TuningRun.updateById(this, { tuningRunDto: { runId: this.item.runId, runStatus: -2 } })
.then((res) => {
console.log(res)
})
.then((res) => {})
.catch((e) => {})
},
getPreviewCommand() {
......
......@@ -2,15 +2,11 @@
<template>
<div class="tableBox">
<vxe-table border show-header-overflow show-overflow :row-config="{ isHover: true }" :data="myDataSetPage.tableData.impl.dataList" min-height="96">
<vxe-column title="模型名称">
<template>
{{ item.modelVersionIdDictMap.name }}
</template>
</vxe-column>
<vxe-table border show-header-overflow show-overflow :row-config="{ isHover: true }" :data="myDataSetPage.tableData.impl.dataList" min-height="96" :resizable="true">
<vxe-column field="datasetName" title="数据集名称"></vxe-column>
<vxe-column field="input" title="Prompt问题"></vxe-column>
<vxe-column field="predict" title="预期回答"></vxe-column>
<vxe-column field="label" title="模型结果"></vxe-column>
<vxe-column field="predict" title="模型预测"></vxe-column>
<vxe-column field="label" title="预期回答"></vxe-column>
</vxe-table>
<el-row slot="pagination" type="flex" justify="end" style="margin-top: 16px;width: 100%;">
......
<!-- 运行详情 -->
<template>
<div>
<el-card class="box-card">
<el-descriptions title="基本信息">
<el-descriptions-item label="任务名称:">{{item.taskName}}</el-descriptions-item>
<el-descriptions-item label="任务描述:">{{item.taskDescribe}}</el-descriptions-item>
<el-descriptions-item label="创建人:">{{ item.createUserId }}</el-descriptions-item>
<el-descriptions-item label="创建时间:">{{item.createTime }}</el-descriptions-item>
<el-descriptions-item label="参数配置:">{{item.configuration}}</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card class="box-card">
<el-descriptions title="数据配置">
<el-descriptions-item label="数据集:">{{item.datasetVersionIdDictMap.name}}</el-descriptions-item>
<el-descriptions-item label="数据模型:">{{item.modelVersionIdDictMap.name}}</el-descriptions-item>
</el-descriptions>
</el-card>
<!-- <el-card class="box-card">
<div>
<el-card class="box-card">
<el-descriptions title="基本信息">
<el-descriptions-item label="任务名称:">{{item.taskName}}</el-descriptions-item>
<el-descriptions-item label="任务描述:">{{item.taskDescribe}}</el-descriptions-item>
<el-descriptions-item label="创建人:">{{ item.createUserId }}</el-descriptions-item>
<el-descriptions-item label="创建时间:">{{item.createTime }}</el-descriptions-item>
<el-descriptions-item label="参数配置:">{{item.configuration}}</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card class="box-card">
<el-descriptions title="数据配置">
<el-descriptions-item label="数据集:">{{item?.datasetVersionIdDictMap?.name}}</el-descriptions-item>
<el-descriptions-item label="数据模型:">{{item.modelVersionIdDictMap.name}}</el-descriptions-item>
</el-descriptions>
</el-card>
<!-- <el-card class="box-card">
<el-descriptions title="评估模型">
<el-descriptions-item>
<tableList :tableData="tableData"/>
......@@ -26,43 +26,37 @@
</el-descriptions>
</el-card> -->
</div>
</div>
</template>
<script>
// import { MyModel } from '@/api/gptController.js';
// import tableList from '../../tableList/index'
export default {
data () {
return {
};
data() {
return {}
},
props: ['item'],
components: {},
computed: {
computed: {},
mounted() {
console.log(this.item)
},
mounted () {
console.log(this.item);
},
methods: {
}
};
methods: {}
}
</script>
<style scoped>
div /deep/ .el-descriptions__title{
font-size: 18px;
div /deep/ .el-descriptions__title {
font-size: 18px;
}
div /deep/.el-descriptions__table{
width: 100%;
line-height: 30px;
div /deep/.el-descriptions__table {
width: 100%;
line-height: 30px;
}
div /deep/ .el-card{
margin-bottom: 20px;
div /deep/ .el-card {
margin-bottom: 20px;
}
</style>
......@@ -19,18 +19,17 @@
</template>
<script>
// import { MyModel } from '@/api/gptController.js';
import particulars from './operate/particulars';
import assessmentReport from './operate/assessmentReport';
import trainingLog from './operate/trainingLog';
import particulars from './operate/particulars'
import assessmentReport from './operate/assessmentReport'
import trainingLog from './operate/trainingLog'
// eslint-disable-next-line no-unused-vars
import previewCommand from './previewCommand';
import previewCommand from './previewCommand'
// import { getSessionHash } from '@/utils/index';
import { ModelEstimate, PyApi } from '@/api/gptController.js';
import { ModelEstimate, PyApi } from '@/api/gptController.js'
export default {
data () {
data() {
return {
istraining: false, // 是否在训练中
img: '',
......@@ -44,7 +43,7 @@ export default {
},
activeName: this.page,
timeImg: null
};
}
},
props: {
page: {
......@@ -58,26 +57,24 @@ export default {
computed: {},
mounted () {
},
mounted() {},
methods: {
PyApi (index, data = []) {
PyApi(index, data = []) {
let param = {
data: data,
event_data: null,
fn_index: index,
session_hash: this.item.taskId
}
return PyApi.predict(this, param).then((res) => {
if (index === 22) { // 图片
console.log(res);
this.img = JSON.parse(res.data).data[0]?.plot;
if (index === 22) {
// 图片
this.img = JSON.parse(res.data).data[0]?.plot
console.log(this.img);
} else if (index === 20) { // 暂停
console.log(this.img)
} else if (index === 20) {
// 暂停
this.$message({
message: '已暂停',
type: 'success'
......@@ -86,37 +83,47 @@ export default {
// this.result = {output: {data: []}}
})
},
preview () {
this.$dialog.show('预览命令', previewCommand, {
area: ['50%', '70%']
}, { item: this.item }).then(res => {
this.refresh();
}).catch(e => { });
preview() {
this.$dialog
.show(
'预览命令',
previewCommand,
{
area: ['50%', '70%']
},
{ item: this.item }
)
.then((res) => {
this.refresh()
})
.catch((e) => {})
},
start () {
start() {
this.SocketService.initWebSocket()
},
async pause () {
async pause() {
await this.PyApi(34)
ModelEstimate.updateById(this, {modelEstimateDto: {taskId: this.item.taskId, taskStatus: -2} }).then(res => {
console.log(res);
}).catch(e => {
});
ModelEstimate.updateById(this, { modelEstimateDto: { taskId: this.item.taskId, taskStatus: -2 } })
.then((res) => {})
.catch((e) => {})
},
getPreviewCommand () { // 获取参数
getPreviewCommand() {
// 获取参数
ModelEstimate.getPreviewCommand(this, { taskId: this.item.taskId }).then((res) => {
this.wsData.data = res.data
this.send(JSON.stringify(this.wsData))
})
},
successful () { // 连接成功
successful() {
// 连接成功
this.send(`{"fn_index":${this.wsData.fn_index},"session_hash":"${this.wsData.session_hash}"}`)
},
send (data) { // 发送参数
send(data) {
// 发送参数
this.SocketService.websocketsend(data)
},
websocketonmessage (e) { // 返回接收参数
websocketonmessage(e) {
// 返回接收参数
if (JSON.parse(e.data).msg === 'process_generating') {
this.istraining = true
this.result = JSON.parse(e.data)
......@@ -133,14 +140,13 @@ export default {
this.getPreviewCommand()
}
},
startGetImg () {
startGetImg() {
this.timeImg = setInterval(() => {
this.PyApi(22, [this.wsData.data[1], this.wsData.data[3], this.wsData.data[37]])
}, 10000);
}, 10000)
}
}
}
</script>
<style scoped>
div /deep/ .el-descriptions__title {
......
<!--模型评估 -->
<template>
<div style="position: relative">
<el-collapse v-model="activeName" accordion ref="collapse" v-resize="resize" style="margin-bottom:20px">
......@@ -68,8 +67,8 @@
<script>
import { mapGetters } from 'vuex'
/* eslint-disable-next-line */
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js'
import { ModelEstimate } from '@/api/gptController.js'
import { TableWidget } from '@/utils/widget.js'
import editOrAdd from './dialog/editOrAdd'
import particulars from './dialog/particulars'
......@@ -261,7 +260,9 @@ export default {
</script>
<style lang="scss" scoped>
@import '@/assets/style/element-variables.scss';
.title {
font-size: 16px;
}
.instructions {
background-color: white;
width: 100%;
......
<!-- 基本信息-->
<template>
<el-form label-position="left" ref="form" label-width="100px" :model="form" :size="defaultFormItemSize" :rules="rules">
<el-row class="title">基本信息</el-row>
<el-form-item label="应用名称:" prop="applicationAccessDto.applicationName">
<el-input v-model="form.applicationAccessDto.applicationName" class="inputWidth" :size="defaultFormItemSize"></el-input>
<el-row> <span class="introduce">支持中英文、数字、下划线(_),2-20个字符,不能以下划线为开头</span></el-row>
</el-form-item>
<el-form-item label="应用描述:">
<el-input v-model="form.applicationAccessDto.applicationDescribe" type="textarea" class="inputWidth" :rows="5" :size="defaultFormItemSize"></el-input>
</el-form-item>
<el-row type="flex" justify="end" class="dialog-btn-layer mt20">
<el-button :size="defaultFormItemSize" :plain="true" @click="onCancel(false)">取消</el-button>
<el-button type="primary" :size="defaultFormItemSize" @click="onSubmit">确定</el-button>
</el-row>
</el-form>
</template>
<script>
import { applicationAccess } from '@/api/gptController.js'
export default {
data() {
return {
taskList: [],
runNameList: [],
form: {
applicationAccessDto: {
applicationDescribe: '',
applicationName: ''
}
},
rules: {
'applicationAccessDto.applicationName': [{ required: true, message: '请输入应用名称', trigger: 'blur' }]
}
}
},
props: ['isEdit', 'item'],
components: {},
computed: {},
mounted() {
this.intFrom()
this.getTaskList()
// this.getTuningRun()
},
methods: {
intFrom() {
this.form = { ...this.form, ...this.item }
try {
this.form.templateLabel = JSON.parse(this.item.templateLabel)
} catch (error) {
// console.log(error);
}
},
onCancel(isSuccess) {
if (this.observer != null) {
this.observer.cancel(isSuccess)
}
},
onSubmit() {
return new Promise((resolve, reject) => {
this.$refs['form'].validate((valid) => {
if (valid) {
let params = {}
params = { ...this.form }
if (this.isEdit) {
applicationAccess.update(this, params)
.then((res) => {
resolve(res)
this.$message.success('编辑成功')
this.onCancel(true)
})
.catch((e) => {
reject(e)
})
} else {
applicationAccess.add(this, params)
.then((res) => {
resolve(res)
this.$message.success('添加成功')
this.onCancel(true)
})
.catch((e) => {
reject(e)
})
}
} else {
// reject();
}
})
})
}
}
}
</script>
<style scoped>
.inputWidth {
width: 600px;
}
.title {
font-size: 20px;
margin-bottom: 16px;
}
.introduce {
font-size: 12px;
color: #909399;
}
</style>
<!--应用接入-->
<template>
<div style="position: relative">
<el-collapse
v-model="activeName"
accordion
ref="collapse"
v-resize="resize"
style="margin-bottom:20px"
>
<el-collapse v-model="activeName" accordion ref="collapse" v-resize="resize" style="margin-bottom:20px">
<el-collapse-item name="1">
<template slot="title">
<div class="title">操作指引</div>
</template>
<div class="instructions">
<div class="instructionsList">
<div
class="item"
v-for="(item, index) in instructionsList"
:key="index"
>
<div class="item" v-for="(item, index) in instructionsList" :key="index">
<div>
<img class="img" :src="item.img" alt="" />
<div class="itemTitle">
<span class="head-index">{{ index + 1 }} &nbsp;</span
>{{ item.title }}
<span class="head-index">{{ index + 1 }} &nbsp;</span>{{ item.title }}
</div>
<div class="itemDescribe">{{ item.describe }}</div>
</div>
<i
v-if="instructionsList.length!==index+1"
class="el-icon-arrow-right"
style="margin-left: 50px; font-size: 30px; font-weight: bolder;color:#b8babf"
></i>
<i v-if="instructionsList.length!==index+1" class="el-icon-arrow-right" style="margin-left: 50px; font-size: 30px; font-weight: bolder;color:#b8babf"></i>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
<div class="tableBox" :style="{ height: tableHeight }">
<el-button
class="add"
type="primary"
icon="el-icon-plus"
:size="defaultFormItemSize"
>创建应用</el-button
>
<vxe-table
border
show-header-overflow
show-overflow
:row-config="{ isHover: true }"
:data="tableData"
min-height="96"
>
<vxe-column field="appName" title="应用名称"></vxe-column>
<vxe-column field="appID" title="AppID"></vxe-column>
<el-form ref="myDataSetPage" :model="myDataSetPage" label-width="75px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
<filter-box :item-width="350" @search="refresh()" @reset="onReset">
<el-form-item label-width="0px">
<el-button class="add" type="primary" icon="el-icon-plus" :size="defaultFormItemSize" @click="add">创建应用</el-button>
</el-form-item>
<el-form-item label="应用名称" prop="formFilter.modelName" label-width="120px">
<el-input class="filter-item" v-model="myDataSetPage.formFilter.applicationName" :clearable="true" placeholder="应用名称" />
</el-form-item>
</filter-box>
</el-form>
<vxe-table border show-header-overflow show-overflow :row-config="{ isHover: true }" :data="myDataSetPage.tableData.impl.dataList" min-height="96">
<vxe-column field="applicationName" title="应用名称"></vxe-column>
<vxe-column field="appId" title="AppID"></vxe-column>
<vxe-column field="apiKey" title="API Key"></vxe-column>
<vxe-column field="secretKey" title="Secret Key"></vxe-column>
<vxe-column field="creationTime" title="创建时间"></vxe-column>
<vxe-column field="applicationDescribe" title="描述"></vxe-column>
<vxe-column field="createTime" title="创建时间"></vxe-column>
<vxe-column field="operation" title="操作">
<!-- <template slot-scope="scope">
<el-button
<template slot-scope="scope">
<!-- <el-button
type="text"
:size="defaultFormItemSize"
@click="dataImport(scope.row)"
>导入</el-button
>
<el-button
type="text"
:size="defaultFormItemSize"
@click="del(scope.row)"
>删除</el-button
>
</template> -->
> -->
<el-button type="text" :size="defaultFormItemSize" @click="del(scope.row)">删除</el-button>
</template>
</vxe-column>
</vxe-table>
<el-row slot="pagination" type="flex" justify="end" style="margin-top: 16px;width: 100%;">
<el-pagination :total="myDataSetPage.tableData.impl.totalCount" :current-page="myDataSetPage.tableData.impl.currentPage" :page-size="myDataSetPage.tableData.impl.pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next, sizes" @current-change="myDataSetPage.tableData.impl.onCurrentPageChange" @size-change="myDataSetPage.tableData.impl.onPageSizeChange">
</el-pagination>
</el-row>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { mapGetters } from 'vuex'
/* eslint-disable-next-line */
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js'
import { applicationAccess } from '@/api/gptController.js'
import editOrAdd from './dialog/editOrAdd'
export default {
data () {
data() {
return {
activeName: '1',
collapseHeight: 0,
instructionsList: [
{
title: '创建应用',
describe:
'创建应用, 获取密钥',
describe: '创建应用, 获取密钥',
img: require('@/assets/img/pg1.svg')
},
{
......@@ -106,53 +89,121 @@ export default {
},
{
title: '查看用量',
describe:
'查看报表了解使用情况',
describe: '查看报表了解使用情况',
img: require('@/assets/img/pg3.svg')
}
],
myDataSetPage: {
formFilter: {
dataName: ''
}
},
tableData: [
{
id: 10001,
name: 'Test1',
role: 'Develop',
sex: 'Man',
age: 28,
address: 'test abc'
applicationName: ''
},
tableData: {
impl: new TableWidget(this.getwidgetData, true, true, false, undefined, false)
}
]
};
}
}
},
components: {},
computed: {
...mapGetters(['getMainContextHeight']),
tableHeight () {
return this.getMainContextHeight - this.collapseHeight - 54 + 'px';
tableHeight() {
return this.getMainContextHeight - this.collapseHeight - 55 + 'px'
}
},
mounted () {},
methods: {
resize (e) {
setTimeout(() => {
this.collapseHeight = e.height;
}, 300);
getwidgetData(params) {
if (params == null) params = {}
params = {
...params,
applicationAccessDtoFilter: { ...this.myDataSetPage.formFilter }
}
return new Promise((resolve, reject) => {
applicationAccess
.list(this, params)
.then((res) => {
resolve({
dataList: res.data.dataList,
totalCount: res.data.totalCount
})
})
.catch((e) => {
reject(e)
})
})
},
onReset () {}
add() {
this.$dialog
.show(
'创建应用',
editOrAdd,
{
area: ['50%', '70%']
},
{ isEdit: false }
)
.then((res) => {
this.refresh()
})
.catch((e) => {
this.refresh()
})
},
del(item) {
this.$confirm('是否确认删除', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = { kgId: item.kgId }
applicationAccess
.delete(this, params)
.then((res) => {
this.$message.success('删除成功')
this.refresh()
})
.catch((e) => {
console.log(e)
})
})
},
refresh(reloadData = false) {
if (reloadData) {
this.myDataSetPage.tableData.impl.refreshTable(true, 1)
} else {
this.myDataSetPage.tableData.impl.refreshTable()
}
},
onReset() {
this.$refs.myDataSetPage.resetFields()
this.refresh(true)
},
formInit() {
this.refresh()
},
resize(e) {
setTimeout(() => {
this.collapseHeight = e?.height
}, 300)
}
},
mounted() {
this.formInit()
}
};
}
</script>
<style lang="scss" scoped>
@import "@/assets/style/element-variables.scss";
@import '@/assets/style/element-variables.scss';
.title {
font-size: 16px;
}
.instructions {
background-color: white;
width: 100%;
......
......@@ -226,7 +226,6 @@ export default {
getKnowledgeGraphList() {
KnowledgeGraph.listForSelect(this, {})
.then((res) => {
console.log(res)
this.knowledgeGraphList = res.data
})
.catch((e) => {
......@@ -236,7 +235,6 @@ export default {
getServeList() {
ModelDeployment.canUseList(this, {})
.then((res) => {
console.log(res)
this.serveList = res?.data?.dataList
this.form.model_name = this.serveList[0].versionName
})
......
<template>
<ul class="multi-column-menu">
<div v-for="menu in menuList" :key="menu.menuId">
<el-popover placement="right-start" width="220" trigger="hover" :disabled="!menu.children || (menu.children || []).length === 0 || level >= 1" :visible-arrow="false">
<el-popover placement="right-start" width="220" trigger="hover" :disabled="!menu.children || (menu.children || []).length === 0 || level >= 1" :visible-arrow="false">
<li slot="reference" @click="selectMenu(menu)" :class="{active: getCurrentMenuId === menu.menuId}">
<div class="menu-name"><i :class="menu.icon" style="font-size: 18px;margin-right:5px;"></i>{{ menu.menuName }}</div>
<i v-if="menu.children && menu.children.length" class="el-icon-arrow-right"></i>
<div class="multi-column-menu-popover" :class="{level2: level > 1}" v-if="level >= 1 && (menu.children || []).length">
<div class="popover-box">
<multiColumnMenu :menuList="menu.children" :key="columnId + '-' + menu.menuId" :level="2" :columnId="columnId" @select="select"/>
<multiColumnMenu :menuList="menu.children" :key="columnId + '-' + menu.menuId" :level="2" :columnId="columnId" @select="select" />
</div>
</div>
</li>
<multiColumnMenu v-if="(menu.children || []).length && level < 1" :menuList="menu.children" :key="columnId + '-' + menu.menuId" :level="level+1" :columnId="columnId" @select="select"/>
<multiColumnMenu v-if="(menu.children || []).length && level < 1" :menuList="menu.children" :key="columnId + '-' + menu.menuId" :level="level+1" :columnId="columnId" @select="select" />
</el-popover>
</div>
</ul>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';
import { mapGetters, mapMutations } from 'vuex'
export default {
name: 'multiColumnMenu',
props: {
......@@ -40,22 +40,22 @@ export default {
},
methods: {
...mapMutations(['clearAllTags', 'setCurrentMenuId', 'setCurrentColumnId']),
selectMenu (menu) {
if (this.getCurrentMenuId === menu.menuId || menu.menuType === 0) return;
selectMenu(menu) {
if (this.getCurrentMenuId === menu.menuId || menu.menuType === 0) return
// 单页面清空所有tags和cachePage
if (!this.getMultiTags) {
this.clearAllTags();
this.clearAllTags()
}
if (this.columnId !== this.getCurrentColumnId) {
this.setCurrentColumnId(this.columnId);
this.setCurrentColumnId(this.columnId)
}
this.$nextTick(() => {
this.setCurrentMenuId(menu.menuId);
this.select();
this.setCurrentMenuId(menu.menuId)
this.select()
})
},
select () {
select() {
this.$emit('select')
}
}
......@@ -64,12 +64,12 @@ export default {
<style lang="scss">
@import '@/assets/style/element-variables.scss';
.multi-column-menu{
.multi-column-menu {
width: 200px;
padding: 0 8px;
list-style: none;
margin: 0;
li{
li {
display: flex;
justify-content: space-between;
align-items: center;
......@@ -80,35 +80,35 @@ export default {
border-radius: 4px;
cursor: pointer;
position: relative;
.menu-name{
.menu-name {
display: flex;
align-items: center;
}
i{
i {
color: #999999;
}
&:hover{
background-color: #F6F6F6;
&>.multi-column-menu-popover{
&:hover {
background-color: #f6f6f6;
& > .multi-column-menu-popover {
display: block;
}
}
&.active{
&.active {
color: $--color-primary;
background-color: $--color-primary-light-9;
}
}
}
.multi-column-menu-popover{
.multi-column-menu-popover {
display: none;
position: absolute;
left: 100%;
top: 0px;
padding-left: 16px;
&.level2{
&.level2 {
padding-left: 22px;
}
.popover-box{
.popover-box {
padding: 12px;
background-color: white;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
......
......@@ -3,29 +3,26 @@
<el-scrollbar wrap-class="scrollbar_dropdown__wrap" style="width: 80px;height: calc(100vh - 60px);" v-if="menuList.length">
<ul class="multi-column-list">
<div v-for="(menu,index) in menuList" :key="menu.menuId">
<el-popover ref="popover" placement="right-start" width="220" trigger="hover"
:disabled="!menu.children || (menu.children || []).length === 0 || !getCollapse" :visible-arrow="false"
>
<el-popover ref="popover" placement="right-start" width="220" trigger="hover" :disabled="!menu.children || (menu.children || []).length === 0 || !getCollapse" :visible-arrow="false">
<li slot="reference" @click="onColumnChange(menu.menuId, index)" :class="{active: getCurrentColumnId === menu.menuId}">
<i :class="menu.icon"></i>
<p>{{ menu.menuName }}</p>
</li>
<multiColumnMenu v-if="(menu.children || []).length" :menuList="menu.children" :key="menu.menuId" :level="1" @select="selectMenu(index)" :columnId="menu.menuId"/>
<multiColumnMenu v-if="(menu.children || []).length" :menuList="menu.children" :key="menu.menuId" :level="1" @select="selectMenu(index)" :columnId="menu.menuId" />
</el-popover>
</div>
</ul>
</el-scrollbar>
<el-scrollbar v-if="children && children.length" class="children-menu-scrollbar" wrap-class="scrollbar_dropdown__wrap" style="background-color: white;height: calc(100vh - 60px);" :scroll-x="false">
<div style="padding: 24px 0">
<multiColumnMenu :menuList="children" :key="getCurrentColumnId" :columnId="getCurrentColumnId"/>
<multiColumnMenu :menuList="children" :key="getCurrentColumnId" :columnId="getCurrentColumnId" />
</div>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';
import { mapGetters, mapMutations } from 'vuex'
import multiColumnMenu from './multi-column-menu.vue'
export default {
props: {
......@@ -35,7 +32,7 @@ export default {
}
},
components: { multiColumnMenu },
data () {
data() {
return {
children: []
}
......@@ -44,26 +41,26 @@ export default {
getCurrentColumnId: {
deep: true,
immediate: true,
handler () {
if (this.getCurrentColumnId == null || this.getCurrentColumnId === '') return [];
handler() {
if (this.getCurrentColumnId == null || this.getCurrentColumnId === '') return []
for (let i = 0; i < this.getMenuList.length; i++) {
if (this.getMenuList[i].menuId === this.getCurrentColumnId) {
this.children = this.getMenuList[i].children || [];
this.children = this.getMenuList[i].children || []
}
}
}
}
},
mounted () {},
mounted() {},
computed: {
...mapGetters(['getCurrentColumnId', 'getMenuList', 'getCollapse'])
},
methods: {
...mapMutations(['clearCachePage', 'setCurrentColumnId']),
onColumnChange (columnId) {
this.setCurrentColumnId(columnId);
onColumnChange(columnId) {
this.setCurrentColumnId(columnId)
},
selectMenu (index) {
selectMenu(index) {
this.$refs.popover[index].doClose()
}
}
......@@ -71,40 +68,41 @@ export default {
</script>
<style lang="scss">
.multi-column-wrap{
.multi-column-wrap {
display: flex;
min-width: 81px;
height: 100%;
border-right: 1px solid #E8E8E8;
.children-menu-scrollbar{
border-right: 1px solid #e8e8e8;
.children-menu-scrollbar {
width: 0;
flex:1;
.el-scrollbar__bar.is-horizontal{
flex: 1;
.el-scrollbar__bar.is-horizontal {
display: none;
}
}
.multi-column-list{
.multi-column-list {
list-style: none;
margin: 0;
width: 80px;
text-align: center;
padding: 16px 0;
li{
li {
display: flex;
flex-direction: column;
font-size: 14px !important;
height: 80px;
color: #A4A5A7;
color: #a4a5a7;
cursor: pointer;
&.active, &:hover{
&.active,
&:hover {
background-color: #e6f4ff;
color: rgb(0, 146, 255)
color: rgb(0, 146, 255);
}
i{
i {
font-size: 24px !important;
margin-top: 14px;
}
p{
p {
width: 100%;
padding: 0 10px;
margin: 12px 0 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment