|
|
@@ -20,16 +20,21 @@
|
|
|
minHeight: item.loading ? '38px' : 'unset',
|
|
|
minWidth: item.loading ? '50px' : 'unset'
|
|
|
}" class="content">
|
|
|
+
|
|
|
+ <span class="vditor-reset" v-html="item.aiContent"></span>
|
|
|
+ <span class="createTime" v-text="item.createtime"></span>
|
|
|
+
|
|
|
+ <div class="eChartView" v-if="item.echartData && !item.loading">
|
|
|
+ <eChartTemplate :data="item.echartData"/>
|
|
|
+ </div>
|
|
|
<div class="loadingDiv" v-if="item.loading">
|
|
|
<span>小可努力生成中，请稍等片刻</span>
|
|
|
<img :src="loadingImg" class="loadingImg" />
|
|
|
</div>
|
|
|
- <span class="vditor-reset" v-html="item.aiContent"></span>
|
|
|
- <span class="createTime" v-text="item.createtime"></span>
|
|
|
</div>
|
|
|
|
|
|
<div class="ai_btn_box" v-if="!pan(item.aiContent).length && !item.loading">
|
|
|
- <!-- <div class="popoverBox" v-if="item.uid.length>0">
|
|
|
+ <div class="popoverBox" v-if="item.uid.length>0">
|
|
|
<div class="showBox" v-if="showPopoverUid===item.uid" v-click-outside="handleBlur">
|
|
|
<span @click="generateChart(item,0)">柱状图</span>
|
|
|
<span @click="generateChart(item,1)">折线图</span>
|
|
|
@@ -38,7 +43,7 @@
|
|
|
<div class="btnBox" @click.stop="showPopoverUid===item.uid?showPopoverUid = null:showPopoverUid = item.uid">
|
|
|
<img src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/default%2F%E5%9B%BE%E8%A1%A81735027853698.png">
|
|
|
</div>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
<img src="../../../../assets/icon/course/pasete.png" @click="onCopy(item.aiContent)" />
|
|
|
<!-- <img src="../../../../assets/icon/test/test_bianji.png" v-if="index >= 2" @click="edit(index)" /> -->
|
|
|
</div>
|
|
|
@@ -343,6 +348,7 @@ import checkIsImg from "../../../../assets/icon/sourceFile/check_is.png";
|
|
|
import { v4 as uuidv4 } from "uuid";
|
|
|
import MarkdownIt from "markdown-it";
|
|
|
import TurndownService from "turndown";
|
|
|
+import eChartTemplate from "./eChartTemplate.vue";
|
|
|
const OpenCC = require("opencc-js");
|
|
|
let converter = OpenCC.Converter({
|
|
|
from: "cn",
|
|
|
@@ -367,6 +373,9 @@ const clickOutside = {
|
|
|
}
|
|
|
};
|
|
|
export default {
|
|
|
+ components:{
|
|
|
+ eChartTemplate
|
|
|
+ },
|
|
|
props: {
|
|
|
courseId: {
|
|
|
type: String,
|
|
|
@@ -1806,7 +1815,68 @@ export default {
|
|
|
this.showPopoverUid = null;
|
|
|
|
|
|
if(_tableData && _tableData.length>0){
|
|
|
- console.log(_tableData,type)
|
|
|
+
|
|
|
+ let _echartsType= {
|
|
|
+ '0':{text:`{"xAxis":{"type":"category","data":["数据1","数据2","数据3","数据4","数据5","数据6","数据7"]},"yAxis":{"type":"value"},"series":[{"data":[120,200,150,80,70,110,130],"type":"bar"}]}`,label:"柱状图"},
|
|
|
+ '1':{text:`{"xAxis":{"type":"category","data":["数据1","数据2","数据3","数据4","数据5","数据6","数据7"]},"yAxis":{"type":"value"},"series":[{"data":[150,230,224,218,135,147,260],"type":"line"}]}`,label:"折线图"},
|
|
|
+ '2':{text:`{"tooltip":{"trigger":"item"},"series":[{"name":"表单名称","type":"pie","radius":"50%","data":[{"value":1048,"name":"数据1"},{"value":735,"name":"数据2"},{"value":580,"name":"数据3"},{"value":484,"name":"数据4"},{"value":300,"name":"数据5"}]}]}`,label:"圆饼图"}
|
|
|
+ }
|
|
|
+
|
|
|
+ let _msg = `ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
|
|
|
+Instruction: Based on the context, follow "Format example", write content
|
|
|
+
|
|
|
+#Context
|
|
|
+##角色描述
|
|
|
+你是一位数据分析师，你需要根据用户的提问，读取并统计表格内容中的信息，以所需要的格式输出JSON数据来生成echarts图表
|
|
|
+##上下文
|
|
|
+你需要学习《完整版图表类型》《可视化图表的源数据格式》，并理解不同图表类型适用的场景以及绘制不同图表需要源数据表的格式。
|
|
|
+##任务描述
|
|
|
+你需要理解用户需求，并通过筛选关键信息、读取并检索文档中的相关信息并进行数据分析与统计，最后以Format example的形式输出统计结果。具体步骤如下：
|
|
|
+1、读取内容表格信息，了解文档中的数据内容。
|
|
|
+2、根据用户的需求，选择合适的可视化图表的类型（图表类型的选择可以从柱状图、折线图、饼状图中进行选择。）如果用户提出的需求中已经指定图表类型，可以根据用户指定的输出。
|
|
|
+3、根据图表类型确定源数据格式，确定每行每列的字段，并在用户上传的数据文档中，检索相关字段的信息，进行统计。源数据表的格式可以参考知识库中“可视化图表的源数据格式”进行统计。
|
|
|
+4、输出结果需要与Format example格式一致,不需要输出多余的内容
|
|
|
+
|
|
|
+##表格内容
|
|
|
+${JSON.stringify(_tableData)}
|
|
|
+
|
|
|
+##图表类型
|
|
|
+${_echartsType[type].label}
|
|
|
+
|
|
|
+##Format example
|
|
|
+${_echartsType[type].text}
|
|
|
+
|
|
|
+`
|
|
|
+ let params = {
|
|
|
+ model: "gpt-4o-2024-11-20",
|
|
|
+ temperature: 0,
|
|
|
+ max_tokens: 4096,
|
|
|
+ top_p: 1,
|
|
|
+ frequency_penalty: 0,
|
|
|
+ presence_penalty: 0,
|
|
|
+ messages: [{ role: "user", content: _msg }],
|
|
|
+ uid: uuidv4(),
|
|
|
+ mind_map_question: "",
|
|
|
+ stream: false
|
|
|
+ }
|
|
|
+ this.array.find(i=>i.uid===item.uid).loading = true;
|
|
|
+ this.ajax.post("https://gpt4.cocorobo.cn/chat", params).then(res => {
|
|
|
+ let _data = res.data.FunctionResponse.choices[0].message.content;
|
|
|
+ _data = _data.replaceAll("```json", "").replaceAll("```", "");
|
|
|
+ // const match = _data.match(/{[^{}]*"start"[\s\S]*?"end":\s*""[^{}]*}/);
|
|
|
+ // let _result = JSON.parse(match[0]) || null;
|
|
|
+ console.log("👉",_data)
|
|
|
+ // console.log("👉",_result)
|
|
|
+
|
|
|
+
|
|
|
+ this.$forceUpdate();
|
|
|
+ this.array.find(i=>i.uid===item.uid).loading = false;
|
|
|
+ this.array.find(i=>i.uid===item.uid).echartData = JSON.parse(_data);
|
|
|
+
|
|
|
+ }).catch(e=>{
|
|
|
+ console.log(e)
|
|
|
+ this.$message.error(`生成${_echartsType[type].label}失败`)
|
|
|
+ })
|
|
|
}else{
|
|
|
return this.$message.error('未提取到表格内容')
|
|
|
}
|
|
|
@@ -1848,7 +1918,7 @@ export default {
|
|
|
},
|
|
|
handleBlur(){
|
|
|
this.showPopoverUid = null;
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
computed: {
|
|
|
localFormList() {
|
|
|
@@ -2972,4 +3042,9 @@ export default {
|
|
|
.showBox>span:hover{
|
|
|
background-color: #e2e2e2;
|
|
|
}
|
|
|
+
|
|
|
+.eChartView{
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+}
|
|
|
</style>
|
