|
|
<template>
|
|
|
<div class="main-top">
|
|
|
<span style="font-weight: bold; font-size: 18px; color: #3596eb">任务描述</span>
|
|
|
<p style="font-weight: 400; font-size: 12px; color: #e6e6e6">（给出任务清单参考，做哪些数据的统计分析）Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
|
|
|
</div>
|
|
|
<div class="main-but">
|
|
|
<el-button @click="knowledgeImport">
|
|
|
<img src="../../../assets/images/导入.png" alt="" />
|
|
|
算法知识导入
|
|
|
</el-button>
|
|
|
<el-button @click="taskSubmit">
|
|
|
<img src="../../../assets/images/提交.png" alt="" />
|
|
|
实训任务提交
|
|
|
</el-button>
|
|
|
</div>
|
|
|
<div class="app-main">
|
|
|
<div class="main-left">
|
|
|
<div>
|
|
|
<div class="left-top">
|
|
|
<span>一、选择指标</span>
|
|
|
</div>
|
|
|
<div class="metrics">
|
|
|
<el-select v-model="n_dataTableQuery.tableName" placeholder="请选择数据" style="width: 180px" @change="selectType">
|
|
|
<el-option v-for="item in algorithmStore.userDataLabel" :key="item" :label="item" :value="item" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="metrics-table" style="margin-top: 10px">
|
|
|
<el-table border ref="multipleTableRef" :data="algorithmStore.indexLibrary" style="width: 100%" :header-cell-style="headerCellStyle" @selection-change="handleSelectionChange">
|
|
|
<el-table-column type="selection" prop="date" label="Date" align="center" />
|
|
|
<el-table-column label="指标" align="center" prop="label" />
|
|
|
</el-table>
|
|
|
<el-button @click="submit">确定</el-button>
|
|
|
</div>
|
|
|
<div class="left-top">
|
|
|
<span>二、数据预处理</span>
|
|
|
</div>
|
|
|
<div class="metrics">
|
|
|
<el-select v-model="preProcessText.text1" placeholder="请选择数据" style="width: 180px">
|
|
|
<el-option label="数据去重" value="数据去重" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="metrics" style="margin-top: 15px">
|
|
|
<el-select v-model="preProcessText.text2" placeholder="请选择数据" style="width: 180px" @change="preProcess">
|
|
|
<el-option label="缺失值处理-剔除数据" value="缺失值处理-剔除数据" />
|
|
|
<el-option label="缺失值处理一均值替代" value="缺失值处理一均值替代" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="left-top" style="margin-top: 10px">
|
|
|
<span>三、模型参数设置</span>
|
|
|
</div>
|
|
|
<div class="metrics-table" style="margin-top: 10px">
|
|
|
<el-select v-model="preProcessText.text3" placeholder="请选择模型" style="width: 180px" @change="switchingModels">
|
|
|
<el-option label="评论观点抽取" value="评论观点抽取" />
|
|
|
<el-option label="情感倾向分析" value="情感倾向分析" />
|
|
|
<el-option label="词频分析" value="词频分析" />
|
|
|
<el-option label="词云生成" value="词云生成" />
|
|
|
</el-select>
|
|
|
<el-button @click="sentimentAnalysis">情感分析</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="margin-top: auto">
|
|
|
<div class="startOver" @click="restart">
|
|
|
<img src="../../../assets/images/重新开始.png" alt="" />
|
|
|
<span>重新开始</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main-right" v-loading="loading" :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(122, 122, 122, 0.8)">
|
|
|
<el-scrollbar height="550px" style="padding: 20px">
|
|
|
<div>
|
|
|
<span style="font-weight: bold; font-size: 18px; color: #3596eb">分析数据：</span>
|
|
|
<div class="text-type" v-show="preProcessText.text3 == '评论观点抽取'">
|
|
|
<el-button :class="s_commentType == text.id ? 'btnActive' : ''" v-for="text in textType" :key="text" type="primary" plain @click="commentType(text)">{{ text.name }}</el-button>
|
|
|
</div>
|
|
|
<div class="analysis">
|
|
|
<el-input maxlength="256" show-word-limit v-model="g_analyzeTheNumberOfDataItems" :rows="2" type="textarea" placeholder="" />
|
|
|
</div>
|
|
|
<div class="footer">
|
|
|
<el-button type="primary" plain @click="sentimentAnalysis">情感分析</el-button>
|
|
|
<el-button type="primary" plain @click="clear">清空</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="analysisResults" style="margin-top: 20px">
|
|
|
<span style="font-weight: bold; font-size: 18px; color: #3596eb; display: block">分析结果：</span>
|
|
|
<el-button @click="download">下载</el-button>
|
|
|
<div v-show="preProcessText.text3 == '词频分析'" v-loading="loading2" :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(122, 122, 122, 0.8)">
|
|
|
<h4>词频列表</h4>
|
|
|
<p>你可以对词频词语进行修改删除以及增加，频次数越大，显示越大，最多200关键词。</p>
|
|
|
<div class="conditions">
|
|
|
<label>显示条件:</label>
|
|
|
<div>
|
|
|
<span>频次>=</span>
|
|
|
<el-input v-model="mWordFrequency.frequency" style="width: 120px" placeholder="" v-debounce="wordFrequencySearch" />
|
|
|
</div>
|
|
|
<div>
|
|
|
<span>词语长度>=</span>
|
|
|
<el-input v-model="mWordFrequency.namenum" style="width: 120px" placeholder="" v-debounce="wordFrequencySearch" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-table border :data="aWordFrequency" style="width: 80%" :header-cell-style="headerCellStyle">
|
|
|
<el-table-column :label="`内容(${aWordFrequency?.length || 0})`" align="center" prop="keyword" width="747" />
|
|
|
<el-table-column label="频次" align="center" prop="frequency" />
|
|
|
</el-table>
|
|
|
<pagination :autoScroll="false" v-show="nOriginalWordFrequencyNum > 0" :total="nOriginalWordFrequencyNum" v-model:page="mWordFrequency.index" v-model:limit="mWordFrequency.size" @pagination="wordFrequencyNext" />
|
|
|
</div>
|
|
|
<!-- v-show="preProcessText.text3 == '词云生成'" -->
|
|
|
<div class="div" v-if="preProcessText.text3 == '词云生成'">
|
|
|
<div id="mywordcloud_positive" style="width: 50%; height: 600px"></div>
|
|
|
</div>
|
|
|
<div ref="captureElement" v-if="preProcessText.text3 == '情感倾向分析' && n_emotiveTendency">
|
|
|
<div class="emotion_analysis">
|
|
|
<div class="emotion_analysis-ani-in-le">
|
|
|
<span>正向情感</span>
|
|
|
<img src="../../../assets/images/笑脸.png" alt="" />
|
|
|
</div>
|
|
|
<el-progress style="width: 480px" :text-inside="true" :stroke-width="20" :percentage="n_emotiveTendency" :color="'#ff540a'" />
|
|
|
<div class="emotion_analysis-ani-in-ri">
|
|
|
<img src="" alt="" />
|
|
|
<span>负向情感</span>
|
|
|
</div>
|
|
|
<div class="emotion_analysis_title">{{ g_emotionAnalysis == 0 ? "情感偏负向" : g_emotionAnalysis == 1 ? "情感偏中性" : "情感偏正向" }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div ref="captureElement" class="comment-opinion" v-if="preProcessText.text3 == '评论观点抽取'">
|
|
|
<div class="result" v-for="(item, sentiment) in aCommentOpinion" :key="item.abstract">
|
|
|
<div class="result-pos" :class="sentiment == 0 ? 'result-neg' : sentiment == 1 ? 'result-neutral' : 'result-img'"></div>
|
|
|
<div class="result-title">{{ sentiment == 0 ? "负向评价" : sentiment == 1 ? "中性评价" : "正向评价" }}:</div>
|
|
|
<div class="result-view" v-for="items in item" :key="items">
|
|
|
{{ items.prop + items.adj }}
|
|
|
<div class="result-bar"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-dialog v-model="dialogVisible" title="实训任务提交" width="700" custom-class="dialogClass" :show-close="false">
|
|
|
<template #header="{ close, titleId, titleClass }">
|
|
|
<div class="my-header">
|
|
|
<span :id="titleId" :class="titleClass">实训任务提交</span>
|
|
|
<img class="gbImg" src="../../../assets/images/关闭.png" @click="close" alt="" />
|
|
|
</div>
|
|
|
<img class="xtImg" src="../../../assets/images/线条.png" alt="" />
|
|
|
</template>
|
|
|
<div class="from-item">
|
|
|
<el-form :inline="true" label-width="84px" :model="form" class="demo-form-inline">
|
|
|
<el-form-item label="平均数：" label-width="120px">
|
|
|
<el-form-item label="最多数量词语:" label-width="120px" label-position="left">
|
|
|
<el-input style="width: 140px" v-model="formInline.max" clearable />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="频次:" label-position="left" label-width="46px">
|
|
|
<el-input style="width: 140px" v-model="formInline.frequency" clearable />
|
|
|
</el-form-item>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="评论观点抽取: " label-width="120px">
|
|
|
<el-form-item label="前两位词语:" label-width="120px" label-position="left">
|
|
|
<el-input style="width: 140px" v-model="formInline.text1" clearable />
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-input style="width: 140px" v-model="formInline.text2" clearable />
|
|
|
</el-form-item>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="情感倾向分析: " label-width="120px">
|
|
|
<el-radio-group v-model="formInline.emotional" style="margin-left: 31px">
|
|
|
<el-radio value="1" label="正向" size="large"></el-radio>
|
|
|
<el-radio value="2" label="负向" size="large"></el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="词云生成: " label-width="120px">
|
|
|
<el-form-item label="中间最突出单词: " label-width="120px">
|
|
|
<el-input style="width: 140px" v-model="formInline.prominent" clearable />
|
|
|
</el-form-item>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
<el-button @click="submitTask">确定</el-button>
|
|
|
<el-button type="primary" @click="dialogVisible = false">返回</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import { paginate } from "@/utils/index.js";
|
|
|
import * as echarts from "echarts";
|
|
|
import * as XLSX from "XLSX";
|
|
|
import "echarts-wordcloud/dist/echarts-wordcloud";
|
|
|
import "echarts-wordcloud/dist/echarts-wordcloud.min";
|
|
|
import * as portraitModel from "@/api/portraitModel";
|
|
|
import * as API from "@/api/AI.js";
|
|
|
import * as marketingAlgorithmApi from "@/api/marketing-algorithm.js";
|
|
|
import html2canvas from "html2canvas";
|
|
|
import useAlgorithmStore from "@/store/modules/algorithm.js";
|
|
|
import useUserStore from "@/store/modules/user";
|
|
|
import { getUserInfo } from "@/utils/auth";
|
|
|
const userInfo = JSON.parse(getUserInfo());
|
|
|
const loading = ref(false);
|
|
|
const loading2 = ref(false);
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
const algorithmStore = useAlgorithmStore();
|
|
|
const multipleTableRef = ref(null);
|
|
|
const b_introductionOfAlgorithmKnowledge = ref(false);
|
|
|
const n_dataTableQuery = ref({
|
|
|
index: 1,
|
|
|
size: 5,
|
|
|
tableName: "用户属性表",
|
|
|
userId: userInfo.userId,
|
|
|
});
|
|
|
const textType = [
|
|
|
{ name: "酒店", id: 1 },
|
|
|
{ name: "KTV", id: 2 },
|
|
|
{ name: "丽人", id: 3 },
|
|
|
{ name: "关食", id: 4 },
|
|
|
{ name: "旅游", id: 5 },
|
|
|
{ name: "健束", id: 6 },
|
|
|
{ name: "教育", id: 7 },
|
|
|
{ name: "商业", id: 8 },
|
|
|
{ name: "房产", id: 9 },
|
|
|
{ name: "汽车", id: 10 },
|
|
|
{ name: "生活", id: 11 },
|
|
|
{ name: "购物", id: 12 },
|
|
|
{ name: "3C", id: 13 },
|
|
|
];
|
|
|
const dialogVisible = ref(false);
|
|
|
const analysisData = ref([]);
|
|
|
const analysisHanderKry = ref([]);
|
|
|
//
|
|
|
const aWordFrequency = ref([]);
|
|
|
const s_commentType = ref("");
|
|
|
const tableLabel = reactive([
|
|
|
{ prop: "max", label: "最多数量词语" },
|
|
|
{ prop: "frequency", label: "频次" },
|
|
|
{ prop: "text1", label: "前两位词语" },
|
|
|
{ prop: "text2", label: "前两位词语" },
|
|
|
{ prop: "emotional", label: "情感倾向分析" },
|
|
|
{ prop: "prominent", label: "中间最突出单词" },
|
|
|
]);
|
|
|
const formInline = ref({
|
|
|
max: "",
|
|
|
frequency: "",
|
|
|
text1: "",
|
|
|
text2: "",
|
|
|
emotional: "",
|
|
|
prominent: "",
|
|
|
});
|
|
|
const g_indicatorData = ref([]);
|
|
|
const preProcessText = ref({
|
|
|
text1: "数据去重",
|
|
|
text2: "",
|
|
|
text3: "",
|
|
|
});
|
|
|
const aOriginalDataOfAnalysisResults2 = ref({});
|
|
|
const nOriginalWordFrequency = ref([]); //词频原始数据
|
|
|
const nOriginalWordFrequencyNum = ref(0); //词频原始数据
|
|
|
const nOriginalWordFrequencySearch = ref([]); //词频原始数据
|
|
|
const mWordFrequency = ref({
|
|
|
index: 1,
|
|
|
size: 10,
|
|
|
namenum: "",
|
|
|
frequency: "",
|
|
|
}); //词频数据
|
|
|
|
|
|
// 分析变量
|
|
|
const g_analyzeTheNumberOfDataItems = ref("");
|
|
|
// 模型参数
|
|
|
const g_modelParameter = ref([]);
|
|
|
const n_emotiveTendency = ref(0);
|
|
|
const g_emotionAnalysis = ref(0);
|
|
|
const aCommentOpinion = ref([]);
|
|
|
// 预处理
|
|
|
const preProcess = (tetx) => {
|
|
|
if (g_indicatorData.value.length == 0) {
|
|
|
proxy.$modal.msgWarning("请先选择指标进行数据分析!");
|
|
|
preProcessText.value.text2 = "";
|
|
|
return;
|
|
|
}
|
|
|
API.dataPreprocessing({
|
|
|
mapList: analysisData.value,
|
|
|
method: preProcessText.value.text2,
|
|
|
userId: n_dataTableQuery.value.userId,
|
|
|
}).then((res) => {
|
|
|
proxy.$modal.msgSuccess("预处理成功");
|
|
|
analysisData.value = res.data;
|
|
|
g_analyzeTheNumberOfDataItems.value = res.data.map((item) => (item ? item.text : "")).join(",");
|
|
|
});
|
|
|
};
|
|
|
// 提交
|
|
|
const taskSubmit = () => {
|
|
|
dialogVisible.value = true;
|
|
|
};
|
|
|
const tableData = ref([]);
|
|
|
const headerCellStyle = () => {
|
|
|
return {
|
|
|
backgroundColor: "#1882DE !important", // 设置表头背景颜色
|
|
|
color: "#ffffff !important",
|
|
|
};
|
|
|
};
|
|
|
// 选择指标
|
|
|
const selectType = (type) => {
|
|
|
n_dataTableQuery.value.tableName = type;
|
|
|
getIndicator();
|
|
|
};
|
|
|
// 选择数据
|
|
|
const handleSelectionChange = (type) => {
|
|
|
g_indicatorData.value = type.map((item) => item.label);
|
|
|
};
|
|
|
// 提交指標
|
|
|
const submit = () => {
|
|
|
if (g_indicatorData.value.length == 0) return proxy.$modal.msgWarning("请选择指标");
|
|
|
loading.value = true;
|
|
|
marketingAlgorithmApi.getMarketingAlgorithm({ userId: n_dataTableQuery.value.userId, tableName: n_dataTableQuery.value.tableName, fieldList: g_indicatorData.value }).then((res) => {
|
|
|
g_analyzeTheNumberOfDataItems.value = res.data.map((item) => (item ? item.text : "")).join(",");
|
|
|
analysisData.value = res.data.filter((item) => item !== null);
|
|
|
loading.value = false;
|
|
|
proxy.$modal.msgSuccess("分析数据成功");
|
|
|
});
|
|
|
};
|
|
|
// 选择模型
|
|
|
const handlemodelSelectionChange = (type) => {
|
|
|
g_modelParameter.value = type.map((item) => item.name);
|
|
|
};
|
|
|
//计算
|
|
|
const modelCalculation = () => {
|
|
|
if (analysisData.value.length == 0 && g_modelParameter.value.length == 0) {
|
|
|
proxy.$modal.msgWarning("请先分析数据/未选择模型参数!");
|
|
|
return;
|
|
|
}
|
|
|
const processedData = processArrayData(["text"], analysisData.value);
|
|
|
marketingAlgorithmApi.getMarketingAlgorithmPreprocessing(JSON.stringify({ map: processedData, statistic: [preProcessText.value.text3 == "词云生成" ? "词频分析" : preProcessText.value.text3], userId: n_dataTableQuery.value.userId })).then((res) => {
|
|
|
aOriginalDataOfAnalysisResults2.value = res.data;
|
|
|
tableData.value = res.data.map((item) => item.statistics);
|
|
|
if (res.data.length > 5) {
|
|
|
nNumberOfAnalysisResults.value = res.data.length;
|
|
|
aOriginalDataOfAnalysisResults.value = res.data.map((item) => item.statistics);
|
|
|
tableData.value = res.data.map((item) => item.statistics).slice(0, 5);
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
function processArrayData(keys, data) {
|
|
|
// 创建结果对象
|
|
|
const result = {};
|
|
|
|
|
|
// 遍历每个键
|
|
|
keys.forEach((key) => {
|
|
|
// 为每个键创建一个数组，包含 data 数组中该键的所有值
|
|
|
const values = data.map((item) => item[key]);
|
|
|
// 将键和对应的值数组添加到结果对象中
|
|
|
result[key] = values;
|
|
|
});
|
|
|
|
|
|
return result;
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
getIndicator();
|
|
|
});
|
|
|
// 获取指标
|
|
|
const getIndicator = () => {
|
|
|
algorithmStore.getUserDatabase({ userId: n_dataTableQuery.value.userId, tableName: n_dataTableQuery.value.tableName, algorithmName: "情感分析" });
|
|
|
};
|
|
|
// 算法知识导入
|
|
|
const knowledgeImport = () => {
|
|
|
b_introductionOfAlgorithmKnowledge.value = true;
|
|
|
};
|
|
|
// 实训任务提交
|
|
|
const submitTask = () => {
|
|
|
for (let key in formInline.value) {
|
|
|
if (formInline.value[key] == "") {
|
|
|
const label = tableLabel.find((item) => item.prop == key);
|
|
|
proxy.$modal.msgWarning(`${label.label}不能为空`);
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
portraitModel
|
|
|
.submit({
|
|
|
userId: n_dataTableQuery.value.userId,
|
|
|
taskName: "情感分析",
|
|
|
numberOfErrors: 0,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
dialogVisible.value = false;
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
});
|
|
|
};
|
|
|
// 重新开始
|
|
|
const restart = () => {
|
|
|
// 清空
|
|
|
formInline.value = {
|
|
|
average: "",
|
|
|
median: "",
|
|
|
mode: "",
|
|
|
standardDeviation: "",
|
|
|
variance: "",
|
|
|
standardError: "",
|
|
|
kurtosis: "",
|
|
|
skewness: "",
|
|
|
max: "",
|
|
|
min: "",
|
|
|
summation: "",
|
|
|
observations: "",
|
|
|
};
|
|
|
analysisData.value = [];
|
|
|
analysisHanderKry.value = [];
|
|
|
tableData.value = [];
|
|
|
g_indicatorData.value = [];
|
|
|
g_modelParameter.value = [];
|
|
|
preProcessText.value.text2 = "";
|
|
|
n_dataTableQuery.value.tableName = "用户属性表";
|
|
|
getIndicator();
|
|
|
proxy.$modal.msgSuccess("重新开始成功");
|
|
|
multipleTableRef.value.clearSelection();
|
|
|
};
|
|
|
const captureElement = ref(null);
|
|
|
// 下载
|
|
|
const download = async () => {
|
|
|
// let tableData = ["内容", "频次"];
|
|
|
// XLSX.utils.aoa_to_sheet(tableData);
|
|
|
if (preProcessText.value.text3 == "情感倾向分析" || preProcessText.value.text3 == "评论观点抽取") {
|
|
|
if (captureElement.value) {
|
|
|
try {
|
|
|
// 使用 html2canvas 将元素转换为画布
|
|
|
let VDOM = document.querySelector(".emotion_analysis_title");
|
|
|
let VDOM2 = document.querySelector(".result");
|
|
|
|
|
|
if (preProcessText.value.text3 == "情感倾向分析") {
|
|
|
VDOM.style.color = "#221f1f";
|
|
|
} else {
|
|
|
VDOM2.style.color = "#212020";
|
|
|
}
|
|
|
const canvas = await html2canvas(captureElement.value);
|
|
|
|
|
|
// 将画布转换为图片
|
|
|
const image = canvas.toDataURL("image/png");
|
|
|
// 创建一个链接，设置为图片的下载链接
|
|
|
const link = document.createElement("a");
|
|
|
link.href = image;
|
|
|
link.download = `${preProcessText.value.text3}.png`; // 图片的文件名
|
|
|
// 触发点击事件，下载图片
|
|
|
link.click();
|
|
|
if (preProcessText.value.text3 == "情感倾向分析") {
|
|
|
VDOM.style.color = "#ffffff";
|
|
|
} else {
|
|
|
VDOM2.style.color = "#ffffff";
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error("无法生成图片", error);
|
|
|
}
|
|
|
}
|
|
|
} else if (preProcessText.value.text3 == "词频分析") {
|
|
|
const aoaData = [
|
|
|
["内容", "频次"], // 标题行
|
|
|
...nOriginalWordFrequency.value.map((item) => [item.keyword, item.frequency]), // 数据行
|
|
|
];
|
|
|
const worksheet = XLSX.utils.aoa_to_sheet(aoaData);
|
|
|
const workbook = XLSX.utils.book_new();
|
|
|
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
|
|
|
XLSX.writeFile(workbook, "词频分析.xlsx");
|
|
|
}
|
|
|
};
|
|
|
// 情感分析
|
|
|
const sentimentAnalysis = () => {
|
|
|
let g_emotionAnalysisinfo = {};
|
|
|
if (g_indicatorData.value.length > 0) {
|
|
|
if (preProcessText.value.text2 == "") return proxy.$modal.msgWarning("请先对数据进行预处理!");
|
|
|
}
|
|
|
if (preProcessText.value.text3 == "") return proxy.$modal.msgWarning("请先选择模型!");
|
|
|
if (preProcessText.value.text3 === "评论观点抽取" && s_commentType.value == "") {
|
|
|
return proxy.$modal.msgWarning("请先选择评论类型!");
|
|
|
}
|
|
|
if (g_analyzeTheNumberOfDataItems.value == "") return proxy.$modal.msgWarning("请先选择指标/手动输入进行情感分析!");
|
|
|
loading.value = true;
|
|
|
marketingAlgorithmApi.getMarketingAlgorithmSentiment({ id: s_commentType.value, userId: n_dataTableQuery.value.userId, content: g_analyzeTheNumberOfDataItems.value, modelType: preProcessText.value.text3 == "词云生成" ? "词频分析" : preProcessText.value.text3 }).then((res) => {
|
|
|
if (preProcessText.value.text3 === "词云生成") {
|
|
|
nOriginalWordFrequency.value = res.data;
|
|
|
initChart();
|
|
|
} else if (preProcessText.value.text3 === "词频分析") {
|
|
|
nOriginalWordFrequency.value = res.data;
|
|
|
aWordFrequency.value = res.data.slice(0, 5);
|
|
|
nOriginalWordFrequencyNum.value = res.data.length;
|
|
|
} else if (preProcessText.value.text3 === "情感倾向分析") {
|
|
|
g_emotionAnalysisinfo = JSON.parse(res.data);
|
|
|
g_emotionAnalysis.value = JSON.parse(res.data)?.items[0]?.sentiment;
|
|
|
n_emotiveTendency.value = Math.round(g_emotionAnalysisinfo.items[0].positive_prob * 100);
|
|
|
} else {
|
|
|
aCommentOpinion.value = JSON.parse(res.data).items.reduce((groups, item) => {
|
|
|
// 如果该 sentiment 的组不存在，则创建
|
|
|
if (!groups[item.sentiment]) {
|
|
|
groups[item.sentiment] = [];
|
|
|
}
|
|
|
// 将 item 加入到相应的组中
|
|
|
groups[item.sentiment].push(item);
|
|
|
return groups;
|
|
|
}, {});
|
|
|
}
|
|
|
loading.value = false;
|
|
|
proxy.$modal.msgSuccess("分析成功");
|
|
|
});
|
|
|
};
|
|
|
// 清空
|
|
|
const clear = () => {
|
|
|
g_analyzeTheNumberOfDataItems.value = "";
|
|
|
aWordFrequency.value = [];
|
|
|
proxy.$modal.msgSuccess("清空成功");
|
|
|
};
|
|
|
const initChart = () => {
|
|
|
var myChart = echarts.init(document.getElementById("mywordcloud_positive"));
|
|
|
const arr = nOriginalWordFrequency.value.map((item) => {
|
|
|
return {
|
|
|
name: item.keyword,
|
|
|
value: item.frequency,
|
|
|
};
|
|
|
});
|
|
|
myChart.setOption({
|
|
|
title: {
|
|
|
text: "词云分析",
|
|
|
x: "center",
|
|
|
textStyle: {
|
|
|
fontSize: 23,
|
|
|
},
|
|
|
},
|
|
|
backgroundColor: "#ffffff",
|
|
|
tooltip: {
|
|
|
show: true,
|
|
|
},
|
|
|
toolbox: {
|
|
|
feature: {
|
|
|
saveAsImage: {
|
|
|
iconStyle: {
|
|
|
normal: {
|
|
|
color: "#FFFFFF",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
{
|
|
|
name: "词云分析",
|
|
|
type: "wordCloud",
|
|
|
// //size: ['9%', '99%'],
|
|
|
sizeRange: [6, 66],
|
|
|
// //textRotation: [0, 45, 90, -45],
|
|
|
rotationRange: [-45, 90],
|
|
|
// //shape: 'circle',
|
|
|
// gridSize: 5,
|
|
|
// sizeRange: [12, 32],
|
|
|
width: "90%",
|
|
|
height: "86%",
|
|
|
textPadding: 0,
|
|
|
autoSize: {
|
|
|
enable: true,
|
|
|
minSize: 16,
|
|
|
},
|
|
|
textStyle: {
|
|
|
color: function () {
|
|
|
return "rgb(" + [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(",") + ")";
|
|
|
},
|
|
|
emphasis: {
|
|
|
shadowBlur: 10,
|
|
|
shadowColor: "#333",
|
|
|
},
|
|
|
},
|
|
|
data: arr,
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
};
|
|
|
const commentType = (text) => {
|
|
|
s_commentType.value = text.id;
|
|
|
};
|
|
|
const wordFrequencyNext = () => {
|
|
|
if (mWordFrequency.value.frequency !== "" || mWordFrequency.value.namenum !== "") {
|
|
|
wordFrequencySearch();
|
|
|
} else {
|
|
|
aWordFrequency.value = paginate(nOriginalWordFrequency.value, mWordFrequency.value.index, mWordFrequency.value.size).data;
|
|
|
}
|
|
|
};
|
|
|
const wordFrequencySearch = () => {
|
|
|
// 根据频次和词语长度进行查找
|
|
|
loading2.value = true;
|
|
|
const filteredData = nOriginalWordFrequency.value.filter((item) => {
|
|
|
const matchesKeyword1 = mWordFrequency.value.frequency ? item.frequency === Number(mWordFrequency.value.frequency) : true;
|
|
|
const matchesKeyword2 = mWordFrequency.value.namenum ? item.keyword.length == mWordFrequency.value.namenum : true;
|
|
|
return matchesKeyword1 && matchesKeyword2;
|
|
|
});
|
|
|
aWordFrequency.value = filteredData.length > 5 ? paginate(filteredData, mWordFrequency.value.index, mWordFrequency.value.size).data : filteredData;
|
|
|
nOriginalWordFrequencyNum.value = filteredData.length;
|
|
|
setTimeout(() => {
|
|
|
loading2.value = false;
|
|
|
}, 600);
|
|
|
};
|
|
|
const switchingModels = () => {
|
|
|
// 清空右边的数据
|
|
|
n_emotiveTendency.value = 0;
|
|
|
aCommentOpinion.value = [];
|
|
|
nOriginalWordFrequencyNum.value = 0;
|
|
|
aWordFrequency.value = [];
|
|
|
nOriginalWordFrequency.value = [];
|
|
|
mWordFrequency.value.index = 1;
|
|
|
mWordFrequency.value.size = 5;
|
|
|
mWordFrequency.value.frequency = "";
|
|
|
mWordFrequency.value.namenum = "";
|
|
|
s_commentType.value = "";
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.main-top {
|
|
|
margin: 20px 20px 0;
|
|
|
margin-top: 10px;
|
|
|
height: 85px;
|
|
|
background: #001d40;
|
|
|
border: 1px solid #0452c6;
|
|
|
padding: 5px 20px;
|
|
|
}
|
|
|
.main-but {
|
|
|
margin: 5px 20px 0;
|
|
|
display: flex;
|
|
|
.el-button:nth-child(1) {
|
|
|
width: 180px;
|
|
|
height: 56px;
|
|
|
background: url("../../../assets/images/011.png");
|
|
|
color: #ffffff;
|
|
|
border-color: #ffffff00;
|
|
|
}
|
|
|
.el-button:nth-child(2) {
|
|
|
width: 180px;
|
|
|
height: 56px;
|
|
|
background: url("../../../assets/images/022.png");
|
|
|
color: #ffffff;
|
|
|
border-color: #ffffff00;
|
|
|
}
|
|
|
}
|
|
|
.app-main {
|
|
|
margin: 5px 20px 0;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
overflow: auto;
|
|
|
.main-left {
|
|
|
//水平居中
|
|
|
flex-direction: column;
|
|
|
// min-height: 965px;
|
|
|
display: flex;
|
|
|
width: 205px;
|
|
|
height: 100%;
|
|
|
background: #041c49;
|
|
|
padding: 0px 10px;
|
|
|
.left-top {
|
|
|
padding: 10px;
|
|
|
span {
|
|
|
font-weight: bold;
|
|
|
font-size: 18px;
|
|
|
color: #3596eb;
|
|
|
}
|
|
|
}
|
|
|
.metrics-table {
|
|
|
.el-button {
|
|
|
width: 149px;
|
|
|
height: 48px;
|
|
|
background: url("../../../assets/images/确定.png");
|
|
|
color: #ffffff;
|
|
|
border-color: #ffffff00;
|
|
|
background-size: 100% 100%;
|
|
|
margin: 15px;
|
|
|
}
|
|
|
}
|
|
|
.startOver {
|
|
|
margin-left: -10px;
|
|
|
width: 205px;
|
|
|
height: 55px;
|
|
|
background: #00f4ff;
|
|
|
//水平居中
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
:deep(.el-table) {
|
|
|
--el-table-row-hover-bg-color: #002651 !important;
|
|
|
--el-table-border-color: #7ac1ff;
|
|
|
.el-table__row {
|
|
|
background-color: #002652 !important;
|
|
|
color: #e6e6e6;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.main-right {
|
|
|
width: 100%;
|
|
|
// height: 100%;
|
|
|
// padding: 20px;
|
|
|
border: 1px solid #0452c6;
|
|
|
.text-type {
|
|
|
margin: 29px 0 20px 0px;
|
|
|
transition: all 3s;
|
|
|
.el-button {
|
|
|
width: 90px;
|
|
|
height: 28px;
|
|
|
--el-button-bg-color: #041d3b;
|
|
|
--el-button-border-color: #1983dd;
|
|
|
}
|
|
|
.btnActive {
|
|
|
background: #409eff;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
.analysis {
|
|
|
margin-top: 10px;
|
|
|
:deep(.el-textarea) {
|
|
|
height: 343px;
|
|
|
background: #002652;
|
|
|
border-radius: 10px;
|
|
|
.el-textarea__inner {
|
|
|
min-height: 343px !important;
|
|
|
background: transparent;
|
|
|
box-shadow: 0 0 0 0px #1983dd !important;
|
|
|
border: 1px solid #1983dd;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
.el-input__count {
|
|
|
background: transparent !important;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.footer {
|
|
|
padding-top: 20px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
.metrics,
|
|
|
.metrics-table {
|
|
|
:deep(.el-input) {
|
|
|
.el-input__wrapper {
|
|
|
background-color: #ffffff00;
|
|
|
background-image: url("../../../assets/images/下拉框.png");
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
--el-input-text-color: #ffffff;
|
|
|
--el-input-border-color: #ffffff00;
|
|
|
--el-input-hover-border-color: #ffffff00;
|
|
|
--el-input-hover-border: #ffffff00;
|
|
|
--el-select-border-color-hover: #ffffff00;
|
|
|
--el-select-input-focus-border-color: #ffffff00;
|
|
|
--el-input-placeholder-color: #ffffff;
|
|
|
.el-input__inner {
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.analysisResults {
|
|
|
transition: all 6s;
|
|
|
|
|
|
.el-button {
|
|
|
width: 89px;
|
|
|
height: 31px;
|
|
|
background: url("../../../assets/images/下载.png");
|
|
|
color: black;
|
|
|
border-color: #ffffff00;
|
|
|
// background-size: 100% 100%;
|
|
|
margin: 15px 0px 5px;
|
|
|
}
|
|
|
.conditions {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
color: #ffffff;
|
|
|
font-size: 14px;
|
|
|
margin: 16px 0;
|
|
|
label {
|
|
|
width: 80px;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
div {
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
color: #ffffff;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
:deep(.el-input) {
|
|
|
.el-input__wrapper {
|
|
|
background-color: #002651 !important;
|
|
|
box-shadow: 0 0 0 1px #67b3d6;
|
|
|
border: radius 0px;
|
|
|
.el-input__inner {
|
|
|
color: #ffffff;
|
|
|
caret-color: #ffffff;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
margin-right: 55px;
|
|
|
}
|
|
|
}
|
|
|
.emotion_analysis {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
// align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 30px;
|
|
|
color: #ffffff;
|
|
|
font-size: 14px;
|
|
|
height: 180px;
|
|
|
margin-top: 40px;
|
|
|
.emotion_analysis-ani-in-ri,
|
|
|
.emotion_analysis-ani-in-le {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
.emotion_analysis_title {
|
|
|
position: absolute;
|
|
|
top: 0px;
|
|
|
right: 48%;
|
|
|
font-size: 24px;
|
|
|
font-weight: normal;
|
|
|
}
|
|
|
:deep(.el-progress-bar__outer) {
|
|
|
background-color: #036fe2;
|
|
|
}
|
|
|
}
|
|
|
.comment-opinion {
|
|
|
padding: 30px 20px 0px 90px !important;
|
|
|
|
|
|
.result {
|
|
|
height: 40px;
|
|
|
-webkit-text-size-adjust: 100%;
|
|
|
font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
font-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text, Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB, arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif;
|
|
|
font-weight: 400;
|
|
|
position: relative;
|
|
|
padding: 8px 0 8px 55px;
|
|
|
margin-right: 1px;
|
|
|
color: #ffffff;
|
|
|
.result-img {
|
|
|
-webkit-text-size-adjust: 100%;
|
|
|
font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
font-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text, Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB, arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif;
|
|
|
font-weight: 400;
|
|
|
position: absolute;
|
|
|
top: 8px;
|
|
|
left: 0;
|
|
|
width: 26px;
|
|
|
height: 26px;
|
|
|
border-radius: 50%;
|
|
|
background-size: contain;
|
|
|
background-repeat: no-repeat;
|
|
|
background-image: url(../../../assets/images/笑脸.png);
|
|
|
background-color: #ff6b0f;
|
|
|
}
|
|
|
.result-neg {
|
|
|
position: absolute;
|
|
|
top: 8px;
|
|
|
left: 0;
|
|
|
width: 26px;
|
|
|
height: 26px;
|
|
|
border-radius: 50%;
|
|
|
background-size: contain;
|
|
|
background-repeat: no-repeat;
|
|
|
background-image: url(../../../assets/images/哭脸.png);
|
|
|
background-color: #60aefd;
|
|
|
}
|
|
|
.result-title {
|
|
|
line-height: 26px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.result-view {
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
padding: 0 10px;
|
|
|
margin-right: 2px;
|
|
|
line-height: 26px;
|
|
|
font-size: 14px;
|
|
|
top: -26px;
|
|
|
left: 61px;
|
|
|
.result-bar {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
right: -1px;
|
|
|
transform: translateY(-50%);
|
|
|
height: 15px;
|
|
|
width: 1px;
|
|
|
color: #d8d8d8;
|
|
|
border-right: 1px solid #d8d8d8;
|
|
|
}
|
|
|
}
|
|
|
.result-view:last-child {
|
|
|
.result-bar {
|
|
|
border: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
:deep(.el-form-item__label) {
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
.from-item {
|
|
|
padding: 20px;
|
|
|
.el-input {
|
|
|
--el-input-text-color: #ffffff;
|
|
|
--el-input-bg-color: #002651;
|
|
|
--el-input-border-color: #67b3d6;
|
|
|
}
|
|
|
}
|
|
|
.dialog-footer {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
h4,
|
|
|
p {
|
|
|
color: #ffffff !important;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
:deep(.pagination-container .el-pagination) {
|
|
|
// 去除定位
|
|
|
position: static;
|
|
|
}
|
|
|
:deep(.demo-form-inline) {
|
|
|
.el-form-item__content {
|
|
|
flex-wrap: nowrap !important;
|
|
|
}
|
|
|
}
|
|
|
</style>
|