添加dashboard基础数据展示,gen-chat添加模型选择、参数选择,功能管理修复模型选择问题
This commit is contained in:
parent
52b4969610
commit
6aa60cb512
|
|
@ -45,4 +45,18 @@ export const GetFileInfoByMd5Service = (Data) => {
|
||||||
'token': Data.token,
|
'token': Data.token,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const GetDashBoardStatisticsService = (Data) => {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
for (let key in Data) {
|
||||||
|
params.append(key, Data[key])
|
||||||
|
}
|
||||||
|
//let request1 = getRequest();
|
||||||
|
return request.post('/tool/dashboard', params,{
|
||||||
|
headers: {
|
||||||
|
'token': Data.token,
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -7,6 +7,6 @@ export interface Function{
|
||||||
Info: string;
|
Info: string;
|
||||||
UserID: number;
|
UserID: number;
|
||||||
ModelID: number | Object | Array<any>;
|
ModelID: number | Object | Array<any>;
|
||||||
ModelIDS: string| Object | Array<any>;
|
ModelIDS: string| Object | Array<any> | any;
|
||||||
Function: string;
|
Function: string;
|
||||||
}
|
}
|
||||||
|
|
@ -7,8 +7,8 @@
|
||||||
<User />
|
<User />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<countup class="card-num color1" :end="6666" />
|
<countup class="card-num color1" :end="baseInfo.user_count" />
|
||||||
<div>用户访问量</div>
|
<div>用户总量</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -18,30 +18,30 @@
|
||||||
<ChatDotRound />
|
<ChatDotRound />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<countup class="card-num color2" :end="168" />
|
<countup class="card-num color2" :end="baseInfo.message_count" />
|
||||||
<div>系统消息</div>
|
<div>系统处理问答数</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card shadow="hover" body-class="card-body">
|
<el-card shadow="hover" body-class="card-body">
|
||||||
<el-icon class="card-icon bg3">
|
<el-icon class="card-icon bg3">
|
||||||
<Goods />
|
<ChatDotRound />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<countup class="card-num color3" :end="8888" />
|
<countup class="card-num color3" :end="baseInfo.session_num" />
|
||||||
<div>商品数量</div>
|
<div>系统总会话数</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card shadow="hover" body-class="card-body">
|
<el-card shadow="hover" body-class="card-body">
|
||||||
<el-icon class="card-icon bg4">
|
<el-icon class="card-icon bg4">
|
||||||
<ShoppingCartFull />
|
<ChatDotRound />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<countup class="card-num color4" :end="568" />
|
<countup class="card-num color4" :end="baseInfo.today_message_count" />
|
||||||
<div>今日订单量</div>
|
<div>今日处理问答数</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -127,6 +127,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts" name="dashboard">
|
<script setup lang="ts" name="dashboard">
|
||||||
|
import { ref, reactive } from 'vue';
|
||||||
import countup from '@/components/countup.vue';
|
import countup from '@/components/countup.vue';
|
||||||
import { use, registerMap } from 'echarts/core';
|
import { use, registerMap } from 'echarts/core';
|
||||||
import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
|
import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
|
||||||
|
|
@ -141,6 +142,8 @@ import { CanvasRenderer } from 'echarts/renderers';
|
||||||
import VChart from 'vue-echarts';
|
import VChart from 'vue-echarts';
|
||||||
import { dashOpt1, dashOpt2, mapOptions } from './chart/options';
|
import { dashOpt1, dashOpt2, mapOptions } from './chart/options';
|
||||||
import chinaMap from '@/utils/china';
|
import chinaMap from '@/utils/china';
|
||||||
|
import {GetDashBoardStatisticsService} from '@/api/tool';
|
||||||
|
import { Sunny } from '@element-plus/icons-vue/dist/types';
|
||||||
use([
|
use([
|
||||||
CanvasRenderer,
|
CanvasRenderer,
|
||||||
BarChart,
|
BarChart,
|
||||||
|
|
@ -154,6 +157,22 @@ use([
|
||||||
MapChart,
|
MapChart,
|
||||||
]);
|
]);
|
||||||
registerMap('china', chinaMap);
|
registerMap('china', chinaMap);
|
||||||
|
|
||||||
|
//"dashboard_statistics_st": {
|
||||||
|
// "session_num": 176,
|
||||||
|
// "message_count": 485,
|
||||||
|
// "user_count": 9625,
|
||||||
|
// "today_message_count": 10
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
|
||||||
|
interface DashBoardBaseInfo {
|
||||||
|
session_num: number;
|
||||||
|
message_count: number;
|
||||||
|
user_count: number;
|
||||||
|
today_message_count: number;
|
||||||
|
}
|
||||||
|
const baseInfo = ref({} as DashBoardBaseInfo);
|
||||||
const activities = [
|
const activities = [
|
||||||
{
|
{
|
||||||
content: '收藏商品',
|
content: '收藏商品',
|
||||||
|
|
@ -219,6 +238,22 @@ const ranks = [
|
||||||
color: '#009688',
|
color: '#009688',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const getDashBoardStatistics = async () => {
|
||||||
|
let req = {
|
||||||
|
token: localStorage.getItem('token'),
|
||||||
|
};
|
||||||
|
let result = await GetDashBoardStatisticsService(req);
|
||||||
|
if (result['code'] === 0) {
|
||||||
|
console.log('dashboard:', result['data']);
|
||||||
|
baseInfo.value = result['data']["dashboard_statistics_st"];
|
||||||
|
// 处理数据
|
||||||
|
// 例如:更新图表数据、统计信息等
|
||||||
|
} else {
|
||||||
|
console.error('获取统计数据失败:', result['msg']);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
getDashBoardStatistics();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -99,6 +99,12 @@
|
||||||
:disabled="loading"
|
:disabled="loading"
|
||||||
>发送</el-button
|
>发送</el-button
|
||||||
>
|
>
|
||||||
|
<div>
|
||||||
|
<p>模型参数</p>
|
||||||
|
<el-slider v-model="temperature" :min="0" :max="1" :step="0.1">temperature</el-slider>
|
||||||
|
<el-slider v-model="topP" :min="0" :max="1" :step="0.1"></el-slider>
|
||||||
|
</div>
|
||||||
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="3" style="text-align: center">
|
<el-col :span="3" style="text-align: center">
|
||||||
<el-select v-model="selectModel" placeholder="选择模型">
|
<el-select v-model="selectModel" placeholder="选择模型">
|
||||||
|
|
@ -163,6 +169,8 @@ const sessionIsShow = ref(false);
|
||||||
const sessionName = ref("");
|
const sessionName = ref("");
|
||||||
const ModelList = ref<Model[]>([]);
|
const ModelList = ref<Model[]>([]);
|
||||||
const selectModel = ref(0);
|
const selectModel = ref(0);
|
||||||
|
const temperature = ref(0.5);
|
||||||
|
const topP = ref(0.9);
|
||||||
|
|
||||||
const renderMarkdown = (content: string) => {
|
const renderMarkdown = (content: string) => {
|
||||||
return md.render(content);
|
return md.render(content);
|
||||||
|
|
@ -303,6 +311,8 @@ const sendMessage = () => {
|
||||||
function: "gen-ai-chat",
|
function: "gen-ai-chat",
|
||||||
session_id: sessionID.value,
|
session_id: sessionID.value,
|
||||||
model_id: selectModel.value,
|
model_id: selectModel.value,
|
||||||
|
temperature: temperature.value,
|
||||||
|
top_p: topP.value,
|
||||||
};
|
};
|
||||||
try {
|
try {
|
||||||
socket.value.send(JSON.stringify(msg));
|
socket.value.send(JSON.stringify(msg));
|
||||||
|
|
@ -470,7 +480,7 @@ GetModelListByFunctionName();
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
scrollbar-width: 10px;
|
scrollbar-width: 10px;
|
||||||
height: 90%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
|
|
@ -135,7 +135,7 @@ const visible = ref(false);
|
||||||
const visible_add = ref(false);
|
const visible_add = ref(false);
|
||||||
const isEdit = ref(false);
|
const isEdit = ref(false);
|
||||||
const isAdd = ref(false);
|
const isAdd = ref(false);
|
||||||
const rowData = ref({});
|
const rowData = ref<Function>({} as Function);
|
||||||
const handleEdit = async (row: Function) => {
|
const handleEdit = async (row: Function) => {
|
||||||
let data = row;
|
let data = row;
|
||||||
rowData.value = data;
|
rowData.value = data;
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="model-params">
|
<div class="model-params">
|
||||||
<h4>模型参数</h4>
|
<h4>模型参数</h4>
|
||||||
<el-slider v-model="temperature" :min="0" :max="2" :step="0.1"></el-slider>
|
<el-slider v-model="temperature" :min="0" :max="1" :step="0.1"></el-slider>
|
||||||
<div class="param-value">{{ temperature }}</div>
|
<div class="param-value">{{ temperature }}</div>
|
||||||
<el-slider v-model="topP" :min="0" :max="1" :step="0.1"></el-slider>
|
<el-slider v-model="topP" :min="0" :max="1" :step="0.1"></el-slider>
|
||||||
<div class="param-value">{{ topP }}</div>
|
<div class="param-value">{{ topP }}</div>
|
||||||
|
|
@ -78,22 +78,31 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
|
import { ref, onMounted, onUnmounted} from "vue";
|
||||||
import { WSMessage, AIQMessage, OllamaMessage } from "@/types/im";
|
import { WSMessage} from "@/types/im";
|
||||||
|
import { FindModelListByFunctionName } from "@/api/function";
|
||||||
|
import { Model } from "@/types/model";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
// 任务输入和结果Prompt
|
// 任务输入和结果Prompt
|
||||||
const taskInput = ref('');
|
const taskInput = ref('');
|
||||||
const resultPrompt = ref('');
|
const resultPrompt = ref('');
|
||||||
const socket = ref(null);
|
const socket = ref(null);
|
||||||
|
const deepseekLogo = "https://tse2-mm.cn.bing.net/th/id/OIP-C.-FZbTC72cXtUasfnISVDHgHaHa?rs=1&pid=ImgDetMain";
|
||||||
|
const sparkLogo = "https://ts1.tc.mm.bing.net/th/id/R-C.421fb106722f3882c9f09650b281473f?rik=jMNRmW%2blXdjDvg&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2023%2f05-12%2f140009%2fwater_140009_698_698_.png&ehk=XSQ7SDsl6rJCOzDjsbIOvvuGhTv0HbPZTrD6u4yUTzM%3d&risl=&pid=ImgRaw&r=0";
|
||||||
|
const doubaoLogo ="https://ai-bot.cn/wp-content/uploads/2024/09/doubao-llm-logo1.png";
|
||||||
|
|
||||||
// 模型列表
|
// 模型列表
|
||||||
const models = ref([
|
const models = ref([
|
||||||
{
|
{
|
||||||
|
id: 0,
|
||||||
logo: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.-FZbTC72cXtUasfnISVDHgHaHa?rs=1&pid=ImgDetMain',
|
logo: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.-FZbTC72cXtUasfnISVDHgHaHa?rs=1&pid=ImgDetMain',
|
||||||
name: 'Deepseek-R1',
|
name: 'Deepseek-R1',
|
||||||
version: 'Deepseek-R1'
|
version: 'Deepseek-R1'
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
const ModelList = ref<Model[]>([]);
|
||||||
|
const pselectModel = ref<Model>();
|
||||||
const selectedModel = ref(models.value[0]);
|
const selectedModel = ref(models.value[0]);
|
||||||
|
|
||||||
// 温度和Top P参数
|
// 温度和Top P参数
|
||||||
|
|
@ -149,6 +158,7 @@ onMounted(() => {
|
||||||
console.log("WebSocket 连接已建立");
|
console.log("WebSocket 连接已建立");
|
||||||
ElMessage.success("连接成功");
|
ElMessage.success("连接成功");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
socket.value.onmessage = (event) => {
|
socket.value.onmessage = (event) => {
|
||||||
let msg: WSMessage = JSON.parse(event.data);
|
let msg: WSMessage = JSON.parse(event.data);
|
||||||
|
|
@ -181,10 +191,61 @@ const sendMessage = () => {
|
||||||
type: "ollama",
|
type: "ollama",
|
||||||
function: "gen-prompt",
|
function: "gen-prompt",
|
||||||
session_id: sessionID.value,
|
session_id: sessionID.value,
|
||||||
|
model_id: selectedModel.value.id,
|
||||||
};
|
};
|
||||||
socket.value.send(JSON.stringify(msg));
|
socket.value.send(JSON.stringify(msg));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const GetModelListByFunctionName = async () => {
|
||||||
|
let req = {
|
||||||
|
function: "gen-ai-chat",
|
||||||
|
token: localStorage.getItem("token"),
|
||||||
|
};
|
||||||
|
try{
|
||||||
|
let result = await FindModelListByFunctionName(req);
|
||||||
|
if (result["code"] === 0) {
|
||||||
|
ModelList.value = result["data"];
|
||||||
|
pselectModel.value = ModelList.value[0];
|
||||||
|
console.log("model_list:", ModelList.value);
|
||||||
|
} else {
|
||||||
|
ElMessage.error(result["msg"]);
|
||||||
|
}
|
||||||
|
}catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
models.value = [];
|
||||||
|
|
||||||
|
for(let i = 0; i < ModelList.value.length; i++) {
|
||||||
|
let model = ModelList.value[i];
|
||||||
|
if (model["Type"] === "deepseek") {
|
||||||
|
models.value.push({
|
||||||
|
id: model["ID"],
|
||||||
|
logo: deepseekLogo,
|
||||||
|
name: model["Type"],
|
||||||
|
version: model["Description"],
|
||||||
|
});
|
||||||
|
} else if (model["Type"] === "spark") {
|
||||||
|
models.value.push({
|
||||||
|
id: model["ID"],
|
||||||
|
logo: sparkLogo,
|
||||||
|
name: model["Description"],
|
||||||
|
version: model["Description"],
|
||||||
|
});
|
||||||
|
} else if (model["Type"] === "doubao") {
|
||||||
|
models.value.push({
|
||||||
|
id: model["ID"],
|
||||||
|
logo: doubaoLogo,
|
||||||
|
name: model["Type"],
|
||||||
|
version: model["Description"],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
selectedModel.value = models.value[0];
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
GetModelListByFunctionName();
|
||||||
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
if (socket.value) {
|
if (socket.value) {
|
||||||
|
|
|
||||||
|
|
@ -2,46 +2,7 @@
|
||||||
<div>
|
<div>
|
||||||
<h2>智能选题推荐</h2>
|
<h2>智能选题推荐</h2>
|
||||||
</div>
|
</div>
|
||||||
<el-select v-model="selected" placeholder="请选择" multiple>
|
|
||||||
<el-option
|
|
||||||
v-for="item in options"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive } from 'vue';
|
|
||||||
interface Option {
|
|
||||||
value: string;
|
|
||||||
label: string;
|
|
||||||
}
|
|
||||||
interface OptionList {
|
|
||||||
value: string;
|
|
||||||
label: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const selected = ref();
|
|
||||||
const options = ref<Option[]>([
|
|
||||||
{ value: 'option1', label: '选项1' },
|
|
||||||
{ value: 'option2', label: '选项2' },
|
|
||||||
{ value: 'option3', label: '选项3' },
|
|
||||||
{ value: 'option4', label: '选项4' },
|
|
||||||
]);
|
|
||||||
const handleSearch = async () => {
|
|
||||||
// 这里可以添加查询逻辑
|
|
||||||
console.log('Selected:', selected.value);
|
|
||||||
// 发送请求到后端,获取推荐结果
|
|
||||||
// let req={
|
|
||||||
// token: localStorage.getItem('token'),
|
|
||||||
// type: "ID",
|
|
||||||
// id: parseInt(query.name)
|
|
||||||
// }
|
|
||||||
// let result = await FindModelService(req);
|
|
||||||
// tableData.value = result.data;
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue