|
|
|
|
@ -1,23 +1,22 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- <el-scrollbar ref="scrollbar" height="800px"> -->
|
|
|
|
|
<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="algorithmicKnowledge()">
|
|
|
|
|
<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">
|
|
|
|
|
<el-scrollbar height="550px" style="padding: 0 10px" min-size="5">
|
|
|
|
|
<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="algorithmicKnowledge()">
|
|
|
|
|
<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">
|
|
|
|
|
<el-scrollbar height="550px" style="padding: 0 10px" min-size="5">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="left-top">
|
|
|
|
|
<span>一、选择指标</span>
|
|
|
|
|
@ -65,21 +64,20 @@
|
|
|
|
|
<span style="font-weight: 400; font-size: 12px; color: #ffffff">最大迭代次数：</span>
|
|
|
|
|
<el-input v-model="input6" style="width: 180px; margin-top: 5px" />
|
|
|
|
|
</div>
|
|
|
|
|
<el-button @click="computation">计算</el-button>
|
|
|
|
|
<el-button @click="clusterAnalysisCalculation">计算</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-scrollbar>
|
|
|
|
|
<div style="margin-top: auto">
|
|
|
|
|
<div class="startOver" @click="startOver()">
|
|
|
|
|
<img src="../../../assets/images/重新开始.png" alt="" />
|
|
|
|
|
<span>重新开始</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: auto">
|
|
|
|
|
<div class="startOver" @click="startOver()">
|
|
|
|
|
<img src="../../../assets/images/重新开始.png" alt="" />
|
|
|
|
|
<span>重新开始</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="main-right">
|
|
|
|
|
<el-scrollbar height="500px" ref="scrollbar" style="padding: 20px">
|
|
|
|
|
<div class="main-right">
|
|
|
|
|
<el-scrollbar height="500px" ref="scrollbar" style="padding: 20px">
|
|
|
|
|
<div>
|
|
|
|
|
<span style="font-weight: bold; font-size: 18px; color: #3596eb">分析数据：</span>
|
|
|
|
|
<el-table ref="exportTableRef" :data="tableData2" style="width: 100%; margin-top: 10px" :header-cell-style="headerCellStyle" height="350">
|
|
|
|
|
@ -105,9 +103,9 @@
|
|
|
|
|
<div id="main2" style="width: 500px; height: 500px"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-scrollbar>
|
|
|
|
|
</div>
|
|
|
|
|
</el-scrollbar>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- </el-scrollbar> -->
|
|
|
|
|
|
|
|
|
|
<el-dialog v-model="dialogVisible" title="实训任务提交" width="600" custom-class="dialogClass" :show-close="false">
|
|
|
|
|
@ -274,6 +272,8 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import * as portraitModel from "@/api/portraitModel";
|
|
|
|
|
|
|
|
|
|
import popModel from "@/views/components/popModal.vue";
|
|
|
|
|
import { htmlPdf } from "@/utils/pdf.js";
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
@ -287,18 +287,33 @@ const { proxy } = getCurrentInstance();
|
|
|
|
|
const dialogVisible = ref(false);
|
|
|
|
|
const tableLabel = reactive([{ prop: "date", label: "" }]);
|
|
|
|
|
const isFlag = ref(false);
|
|
|
|
|
const formInline2=reactive({
|
|
|
|
|
value1:'',
|
|
|
|
|
value2:'',
|
|
|
|
|
value3:'',
|
|
|
|
|
value4:'',
|
|
|
|
|
value5:'',
|
|
|
|
|
value6:'',
|
|
|
|
|
})
|
|
|
|
|
const task=()=>{
|
|
|
|
|
dialogVisible.value = false
|
|
|
|
|
proxy.$modal.msgSuccess("提交完成!");
|
|
|
|
|
}
|
|
|
|
|
const formInline2 = reactive({
|
|
|
|
|
value1: "",
|
|
|
|
|
value2: "",
|
|
|
|
|
value3: "",
|
|
|
|
|
value4: "",
|
|
|
|
|
value5: "",
|
|
|
|
|
value6: "",
|
|
|
|
|
});
|
|
|
|
|
const task = () => {
|
|
|
|
|
for(let key in formInline2){
|
|
|
|
|
if(formInline2[key] == ""){
|
|
|
|
|
proxy.$modal.msgError("请填写完整!");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
portraitModel
|
|
|
|
|
.submit({
|
|
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
|
|
taskName: "聚类分析",
|
|
|
|
|
numberOfErrors: 0,
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
dialogVisible.value = false;
|
|
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
const algorithmicKnowledge = () => {
|
|
|
|
|
runResultShow.value = true;
|
|
|
|
|
};
|
|
|
|
|
@ -361,7 +376,8 @@ onMounted(() => {
|
|
|
|
|
getList();
|
|
|
|
|
var chartDom = document.getElementById("main");
|
|
|
|
|
var chartDom2 = document.getElementById("main2");
|
|
|
|
|
myChart = echarts.init(chartDom);472
|
|
|
|
|
myChart = echarts.init(chartDom);
|
|
|
|
|
472;
|
|
|
|
|
myChart2 = echarts.init(chartDom2);
|
|
|
|
|
// 初始化图表配置
|
|
|
|
|
var option = {
|
|
|
|
|
@ -389,46 +405,46 @@ onMounted(() => {
|
|
|
|
|
// 设置初始的配置
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
myChart2.setOption(option);
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const optionData=()=>{
|
|
|
|
|
API.viewingMetrics({userId:JSON.parse(getUserInfo()).userId,tableName:input.value,algorithmName:'聚类分析'}).then((res)=>{
|
|
|
|
|
tableData.value=[]
|
|
|
|
|
input3.value=''
|
|
|
|
|
res.data.forEach(element => {
|
|
|
|
|
tableData.value.push({
|
|
|
|
|
text:element
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
const optionData = () => {
|
|
|
|
|
API.viewingMetrics({ userId: JSON.parse(getUserInfo()).userId, tableName: input.value, algorithmName: "聚类分析" }).then((res) => {
|
|
|
|
|
tableData.value = [];
|
|
|
|
|
input3.value = "";
|
|
|
|
|
res.data.forEach((element) => {
|
|
|
|
|
tableData.value.push({
|
|
|
|
|
text: element,
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const selectedRows = ref([]);
|
|
|
|
|
const handleSelectionChange = (selection) => {
|
|
|
|
|
selectedRows.value = selection;
|
|
|
|
|
};
|
|
|
|
|
const tableData2 = ref([]);
|
|
|
|
|
const tableData3 = ref([]);
|
|
|
|
|
const resTable2 = ref();
|
|
|
|
|
const taskZB = () => {
|
|
|
|
|
flag.value = true;
|
|
|
|
|
if (selectedRows.value.length === 0) {
|
|
|
|
|
return proxy.$modal.msgWarning("请选择指标!");
|
|
|
|
|
}
|
|
|
|
|
const selectedRows = ref([]);
|
|
|
|
|
const handleSelectionChange = (selection) => {
|
|
|
|
|
selectedRows.value = selection;
|
|
|
|
|
};
|
|
|
|
|
const tableData2=ref([])
|
|
|
|
|
const tableData3=ref([])
|
|
|
|
|
const resTable2=ref()
|
|
|
|
|
const taskZB=()=>{
|
|
|
|
|
flag.value=true
|
|
|
|
|
if(selectedRows.value.length===0){
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
const sendData={
|
|
|
|
|
tableName:input.value,
|
|
|
|
|
userId:JSON.parse(getUserInfo()).userId,
|
|
|
|
|
fieldList:selectedRows.value.map(item=>item.text)
|
|
|
|
|
}
|
|
|
|
|
API.analysisDataDisplay(sendData).then((res)=>{
|
|
|
|
|
tableLabel.length=0
|
|
|
|
|
for (const key in res.data[0]) {
|
|
|
|
|
tableLabel.push({
|
|
|
|
|
label:key,
|
|
|
|
|
prop:key
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
tableData2.value=res.data
|
|
|
|
|
flag.value=true
|
|
|
|
|
const sendData = {
|
|
|
|
|
tableName: input.value,
|
|
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
|
|
fieldList: selectedRows.value.map((item) => item.text),
|
|
|
|
|
};
|
|
|
|
|
API.analysisDataDisplay(sendData).then((res) => {
|
|
|
|
|
tableLabel.length = 0;
|
|
|
|
|
for (const key in res.data[0]) {
|
|
|
|
|
tableLabel.push({
|
|
|
|
|
label: key,
|
|
|
|
|
prop: key,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
tableData2.value = res.data;
|
|
|
|
|
flag.value = true;
|
|
|
|
|
proxy.$modal.msgSuccess("计算完成!");
|
|
|
|
|
tableData2.value = res.data;
|
|
|
|
|
flag.value = true;
|
|
|
|
|
@ -497,147 +513,148 @@ const optionData2 = () => {
|
|
|
|
|
proxy.$modal.msgSuccess("预处理成功！");
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const showChart = ref(false);
|
|
|
|
|
//生产表格
|
|
|
|
|
const nowData = ref([]);
|
|
|
|
|
const computation = () => {
|
|
|
|
|
if (tableData2.value.length === 0 && input2.value == "" && input3.value == "") {
|
|
|
|
|
proxy.$modal.msgWarning("请先计算/对数据进行预处理！");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (input5.value && input6.value && input4.value) {
|
|
|
|
|
const sendData = {
|
|
|
|
|
k: input5.value,
|
|
|
|
|
t: input6.value,
|
|
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
|
|
deduplicatedDataList: resTable2.value,
|
|
|
|
|
};
|
|
|
|
|
API.clusterAnalysisPlot(sendData)
|
|
|
|
|
.then((res) => {
|
|
|
|
|
showChart.value = true;
|
|
|
|
|
let sex = 1;
|
|
|
|
|
tableData3.value = [];
|
|
|
|
|
nowData.value = res.data;
|
|
|
|
|
res.data.forEach((item, index) => {
|
|
|
|
|
const newItem = {};
|
|
|
|
|
tableLabel.forEach((label, index) => {
|
|
|
|
|
if (index === 0) {
|
|
|
|
|
newItem[label.prop] = "簇" + sex; // 动态设置字段名
|
|
|
|
|
} else {
|
|
|
|
|
newItem[label.prop] = "";
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
newItem["TSuid"] = sex;
|
|
|
|
|
sex++;
|
|
|
|
|
tableData3.value.push(newItem);
|
|
|
|
|
tableData3.value[index].children = [];
|
|
|
|
|
const children = ref([]);
|
|
|
|
|
item.forEach((item2, sexx) => {
|
|
|
|
|
const newItem2 = {};
|
|
|
|
|
tableLabel.forEach((label, index2) => {
|
|
|
|
|
newItem2[label.prop] = item2[index2]; // 动态设置字段名
|
|
|
|
|
}
|
|
|
|
|
const showChart = ref(false);
|
|
|
|
|
//生产表格
|
|
|
|
|
const nowData = ref([]);
|
|
|
|
|
const clusterAnalysisCalculation = () => {
|
|
|
|
|
if (tableData2.value.length === 0 || input2.value == "" || input3.value == "") {
|
|
|
|
|
proxy.$modal.msgWarning("请先计算/对数据进行预处理！");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (input5.value && input6.value && input4.value) {
|
|
|
|
|
const sendData = {
|
|
|
|
|
k: input5.value,
|
|
|
|
|
t: input6.value,
|
|
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
|
|
deduplicatedDataList: resTable2.value,
|
|
|
|
|
};
|
|
|
|
|
API.clusterAnalysisPlot(sendData)
|
|
|
|
|
.then((res) => {
|
|
|
|
|
showChart.value = true;
|
|
|
|
|
let sex = 1;
|
|
|
|
|
tableData3.value = [];
|
|
|
|
|
nowData.value = res.data;
|
|
|
|
|
res.data.forEach((item, index) => {
|
|
|
|
|
const newItem = {};
|
|
|
|
|
tableLabel.forEach((label, index) => {
|
|
|
|
|
if (index === 0) {
|
|
|
|
|
newItem[label.prop] = "簇" + sex; // 动态设置字段名
|
|
|
|
|
} else {
|
|
|
|
|
newItem[label.prop] = "";
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
newItem2["TSuid"] = "" + sex + sexx;
|
|
|
|
|
children.value.push(newItem2);
|
|
|
|
|
});
|
|
|
|
|
tableData3.value[index].children = children.value;
|
|
|
|
|
console.log(tableData3.value);
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
API.clusterAnalysis(sendData).then((res) => {
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: [], // 清空数据
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
myChart2.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: [], // 清空数据
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
Object.keys(res.data.dataSet).forEach((key) => {
|
|
|
|
|
const bgColor = getRandomColorHex();
|
|
|
|
|
addData(myChart, res.data.dataSet[key], bgColor);
|
|
|
|
|
addData(myChart2, res.data.dataSet[key], bgColor);
|
|
|
|
|
newItem["TSuid"] = sex;
|
|
|
|
|
sex++;
|
|
|
|
|
tableData3.value.push(newItem);
|
|
|
|
|
tableData3.value[index].children = [];
|
|
|
|
|
const children = ref([]);
|
|
|
|
|
item.forEach((item2, sexx) => {
|
|
|
|
|
const newItem2 = {};
|
|
|
|
|
tableLabel.forEach((label, index2) => {
|
|
|
|
|
newItem2[label.prop] = item2[index2]; // 动态设置字段名
|
|
|
|
|
});
|
|
|
|
|
newItem2["TSuid"] = "" + sex + sexx;
|
|
|
|
|
children.value.push(newItem2);
|
|
|
|
|
});
|
|
|
|
|
tableData3.value[index].children = children.value;
|
|
|
|
|
console.log(tableData3.value);
|
|
|
|
|
});
|
|
|
|
|
Object.keys(res.data.centroid).forEach((key) => {
|
|
|
|
|
addData(myChart2, res.data.centroid[key], "red");
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
API.clusterAnalysis(sendData).then((res) => {
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: [], // 清空数据
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
myChart2.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: [], // 清空数据
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
Object.keys(res.data.dataSet).forEach((key) => {
|
|
|
|
|
const bgColor = getRandomColorHex();
|
|
|
|
|
addData(myChart, res.data.dataSet[key], bgColor);
|
|
|
|
|
addData(myChart2, res.data.dataSet[key], bgColor);
|
|
|
|
|
});
|
|
|
|
|
Object.keys(res.data.centroid).forEach((key) => {
|
|
|
|
|
addData(myChart2, res.data.centroid[key], "red");
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
const scrollContainer = scrollbar.value?.$el.querySelector(".el-scrollbar__wrap");
|
|
|
|
|
if (scrollContainer) {
|
|
|
|
|
scrollContainer.scrollTo({
|
|
|
|
|
top: scrollContainer.scrollHeight,
|
|
|
|
|
behavior: "smooth", // 平滑滚动
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}, 100);
|
|
|
|
|
});
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
const scrollContainer = scrollbar.value?.$el.querySelector(".el-scrollbar__wrap");
|
|
|
|
|
if (scrollContainer) {
|
|
|
|
|
scrollContainer.scrollTo({
|
|
|
|
|
top: scrollContainer.scrollHeight,
|
|
|
|
|
behavior: "smooth", // 平滑滚动
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}, 100);
|
|
|
|
|
} else {
|
|
|
|
|
proxy.$modal.msgWarning("请模型参数进行设置！");
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const exportTableRef = ref(null);
|
|
|
|
|
const upLoad = () => {
|
|
|
|
|
const tableDom = exportTableRef.value?.$el;
|
|
|
|
|
if (!tableDom) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const wb = XLSX.utils.table_to_book(tableDom);
|
|
|
|
|
// XLSX.writeFile(wb, '聚类分析.xlsx');
|
|
|
|
|
const zip = new JSZip();
|
|
|
|
|
const excelBlob = XLSX.write(wb, { bookType: "xlsx", type: "array" });
|
|
|
|
|
zip.file("聚类分析.xlsx", new Blob([excelBlob], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }));
|
|
|
|
|
zip.file("聚类分析图表.pdf", handleExport());
|
|
|
|
|
zip.generateAsync({ type: "blob" }).then((content) => {
|
|
|
|
|
saveAs(content, "聚类分析.zip");
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
proxy.$modal.msgWarning("请模型参数进行设置！");
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const exportTableRef = ref(null);
|
|
|
|
|
const upLoad = () => {
|
|
|
|
|
const tableDom = exportTableRef.value?.$el;
|
|
|
|
|
if (!tableDom) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const wb = XLSX.utils.table_to_book(tableDom);
|
|
|
|
|
// XLSX.writeFile(wb, '聚类分析.xlsx');
|
|
|
|
|
const zip = new JSZip();
|
|
|
|
|
const excelBlob = XLSX.write(wb, { bookType: "xlsx", type: "array" });
|
|
|
|
|
zip.file("聚类分析.xlsx", new Blob([excelBlob], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }));
|
|
|
|
|
zip.file("聚类分析图表.pdf", handleExport());
|
|
|
|
|
zip.generateAsync({ type: "blob" }).then((content) => {
|
|
|
|
|
saveAs(content, "聚类分析.zip");
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const startOver = () => {
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: [], // 清空数据
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
myChart2.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: [], // 清空数据
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
input.value = "";
|
|
|
|
|
tableData.value = [];
|
|
|
|
|
tableData2.value = [];
|
|
|
|
|
tableData3.value = [];
|
|
|
|
|
input2.value = "";
|
|
|
|
|
input3.value = "";
|
|
|
|
|
input4.value = "";
|
|
|
|
|
input5.value = "";
|
|
|
|
|
input6.value = "";
|
|
|
|
|
showChart.value = false;
|
|
|
|
|
tableLabel.length = 0;
|
|
|
|
|
nowData.value = [];
|
|
|
|
|
};
|
|
|
|
|
//图表导出pdf
|
|
|
|
|
const handleExport = async (name) => {
|
|
|
|
|
var fileName = "聚类分析图表";
|
|
|
|
|
const fileList = document.getElementsByClassName("pdfRef"); // 很重要
|
|
|
|
|
const pdfBlob = await htmlPdf(fileName, document.querySelector("#pdfRef"), fileList, true);
|
|
|
|
|
return pdfBlob;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const startOver = () => {
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: [], // 清空数据
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
myChart2.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: [], // 清空数据
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
input.value = "";
|
|
|
|
|
tableData.value = [];
|
|
|
|
|
tableData2.value = [];
|
|
|
|
|
tableData3.value = [];
|
|
|
|
|
input2.value = "";
|
|
|
|
|
input3.value = "";
|
|
|
|
|
input4.value = "";
|
|
|
|
|
input5.value = "";
|
|
|
|
|
input6.value = "";
|
|
|
|
|
showChart.value = false;
|
|
|
|
|
tableLabel.length = 0;
|
|
|
|
|
nowData.value = [];
|
|
|
|
|
};
|
|
|
|
|
//图表导出pdf
|
|
|
|
|
const handleExport = async (name) => {
|
|
|
|
|
var fileName = "聚类分析图表";
|
|
|
|
|
const fileList = document.getElementsByClassName("pdfRef"); // 很重要
|
|
|
|
|
const pdfBlob = await htmlPdf(fileName, document.querySelector("#pdfRef"), fileList, true);
|
|
|
|
|
return pdfBlob;
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@ -680,7 +697,7 @@ const handleExport = async (name) => {
|
|
|
|
|
// min-height: 965px;
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 205px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: #041c49;
|
|
|
|
|
// padding: 0px 10px;
|
|
|
|
|
.left-top {
|
|
|
|
|
|
qinzhenpen
2 years ago