|
|
|
|
@ -1,12 +1,18 @@
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
<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">
|
|
|
|
|
@ -16,12 +22,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="metrics">
|
|
|
|
|
<el-select v-model="input" placeholder="请选择" style="width: 180px" @change="optionData">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in options"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="metrics-table" style="margin-top: 10px">
|
|
|
|
|
@ -36,157 +37,230 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="metrics">
|
|
|
|
|
<el-select v-model="input2" @change="optionData2" placeholder="请选择" style="width: 180px">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in options2"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="metrics" style="margin-top: 15px">
|
|
|
|
|
<el-select v-model="input3" @change="optionData2" placeholder="请选择" style="width: 180px">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in options3"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="left-top" style="margin-top: 50px">
|
|
|
|
|
<span>三、模型参数设置</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="metrics-table" style="margin-top: 10px">
|
|
|
|
|
<span style="font-weight: 400;font-size: 12px;color: #FFFFFF;">
|
|
|
|
|
聚类方法：
|
|
|
|
|
</span>
|
|
|
|
|
<span style="font-weight: 400; font-size: 12px; color: #ffffff">聚类方法：</span>
|
|
|
|
|
<div class="metrics" style="margin-top: 10px">
|
|
|
|
|
<el-select v-model="input4" placeholder="请选择" style="width: 180px">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in options4"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
<el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 10px">
|
|
|
|
|
<span style="font-weight: 400;font-size: 12px;color: #FFFFFF;">
|
|
|
|
|
设置簇数K值：
|
|
|
|
|
</span>
|
|
|
|
|
<span style="font-weight: 400; font-size: 12px; color: #ffffff">设置簇数K值：</span>
|
|
|
|
|
<el-input v-model="input5" style="width: 180px; margin-top: 5px" />
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 10px">
|
|
|
|
|
<span style="font-weight: 400;font-size: 12px;color: #FFFFFF;">
|
|
|
|
|
最大迭代次数：
|
|
|
|
|
</span>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: auto;">
|
|
|
|
|
<div style="margin-top: auto">
|
|
|
|
|
<div class="startOver" @click="startOver()">
|
|
|
|
|
<img src="../../../assets/images/重新开始.png" alt="">
|
|
|
|
|
<img src="../../../assets/images/重新开始.png" alt="" />
|
|
|
|
|
<span>重新开始</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main-right">
|
|
|
|
|
<div>
|
|
|
|
|
<span style="font-weight: bold;font-size: 18px;color: #3596EB;">分析数据：</span>
|
|
|
|
|
<span style="font-weight: bold; font-size: 18px; color: #3596eb">分析数据：</span>
|
|
|
|
|
<el-table ref="exportTableRef" :data="tableData2" style="width: 94%; margin-top: 10px" :header-cell-style="headerCellStyle" height="350">
|
|
|
|
|
<el-table-column v-for="column in tableLabel" :key="column.prop" :prop="column.prop" :label="column.label" align="center" />
|
|
|
|
|
</el-table>
|
|
|
|
|
<!-- <el-pagination style="margin-top:10px" background layout="prev, pager, next" :total="1000" /> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="analysisResults" style="margin-top: 20px">
|
|
|
|
|
<span style="font-weight: bold;font-size: 18px;color: #3596EB;display: block;">分析结果：</span>
|
|
|
|
|
<span style="font-weight: bold; font-size: 18px; color: #3596eb; display: block">分析结果：</span>
|
|
|
|
|
<el-button @click="upLoad" v-if="showChart">下载</el-button>
|
|
|
|
|
<el-table :data="tableData3" row-key="TSuid" style="width: 94%; margin-top: 10px" :header-cell-style="headerCellStyle" height="350">
|
|
|
|
|
<el-table-column v-for="column in tableLabel" :key="column.prop" :prop="column.prop" :label="column.label" align="center" />
|
|
|
|
|
</el-table>
|
|
|
|
|
<!-- <el-pagination style="margin-top:10px" background layout="prev, pager, next" :total="1000" /> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pdfRef" id="pdfRef" style="margin-top:20px;gap:25px;display: flex;" v-show="showChart">
|
|
|
|
|
<div class="pdfRef" id="pdfRef" style="margin-top: 20px; gap: 25px; display: flex" v-show="showChart">
|
|
|
|
|
<!-- <img src="../../../assets/images/图1.png" alt=""> -->
|
|
|
|
|
<div style="background:#FFFFFF;">
|
|
|
|
|
<div id="main" style="width: 500px;height: 500px;"></div>
|
|
|
|
|
<div style="background: #ffffff">
|
|
|
|
|
<div id="main" style="width: 500px; height: 500px"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="background:#FFFFFF;">
|
|
|
|
|
<div id="main2" style="width: 500px;height: 500px;"></div>
|
|
|
|
|
<div style="background: #ffffff">
|
|
|
|
|
<div id="main2" style="width: 500px; height: 500px"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-scrollbar>
|
|
|
|
|
|
|
|
|
|
<el-dialog
|
|
|
|
|
v-model="dialogVisible"
|
|
|
|
|
title="实训任务提交"
|
|
|
|
|
width="600"
|
|
|
|
|
custom-class="dialogClass"
|
|
|
|
|
:show-close="false"
|
|
|
|
|
>
|
|
|
|
|
<el-dialog v-model="dialogVisible" title="实训任务提交" width="600" 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="">
|
|
|
|
|
<img class="gbImg" src="../../../assets/images/关闭.png" @click="close" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<img class="xtImg" src="../../../assets/images/线条.png" alt="">
|
|
|
|
|
<img class="xtImg" src="../../../assets/images/线条.png" alt="" />
|
|
|
|
|
</template>
|
|
|
|
|
<div class="from-item">
|
|
|
|
|
<el-form :inline="true" label-position="right" label-width="115px" :model="form" class="demo-form-inline">
|
|
|
|
|
<el-form-item label="聚类个数：">
|
|
|
|
|
<el-input style="width: 120px;" v-model="formInline.user" clearable />
|
|
|
|
|
<el-input style="width: 120px" v-model="formInline.user" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="最大迭代次数：">
|
|
|
|
|
<el-input style="width: 120px;" v-model="formInline.user" clearable />
|
|
|
|
|
<el-input style="width: 120px" v-model="formInline.user" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<span style="color:#FFFFFF;font-weight: 700;">各簇类特征描述：</span>
|
|
|
|
|
<span style="color: #ffffff; font-weight: 700">各簇类特征描述：</span>
|
|
|
|
|
<el-form :inline="true" label-position="right" style="margin: 15px 0" label-width="115px" :model="form" class="demo-form-inline">
|
|
|
|
|
<el-form-item label="簇类1:">
|
|
|
|
|
<el-input style="width: 240px;" v-model="formInline.user" clearable />
|
|
|
|
|
<el-input style="width: 240px" v-model="formInline.user" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="簇类2:">
|
|
|
|
|
<el-input style="width: 240px;" v-model="formInline.user" clearable />
|
|
|
|
|
<el-input style="width: 240px" v-model="formInline.user" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="簇类3:">
|
|
|
|
|
<el-input style="width: 240px;" v-model="formInline.user" clearable />
|
|
|
|
|
<el-input style="width: 240px" v-model="formInline.user" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="簇类4:">
|
|
|
|
|
<el-input style="width: 240px;" v-model="formInline.user" clearable />
|
|
|
|
|
<el-input style="width: 240px" v-model="formInline.user" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<div class="dialog-footer">
|
|
|
|
|
<el-button @click="dialogVisible = false">确定</el-button>
|
|
|
|
|
<el-button type="primary" @click="dialogVisible = false">
|
|
|
|
|
返回
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button type="primary" @click="dialogVisible = false">返回</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<pop-model
|
|
|
|
|
:showModel="runResultShow"
|
|
|
|
|
title="聚类分析"
|
|
|
|
|
@closePop="runResultShow = false"
|
|
|
|
|
>
|
|
|
|
|
<pop-model :showModel="runResultShow" title="聚类分析" @closePop="runResultShow = false">
|
|
|
|
|
<template v-slot:content>
|
|
|
|
|
<div>
|
|
|
|
|
<p style="font-weight: 700;font-size:22px">聚类分析的定义及原理</p><p style="font-size:19px">1.定义</p><p> 所谓物以类聚、人以群分。聚类分析，即是基于研究对象的特征，将他们分门别类，以让同类别的个体之间差异相对小、相似度相对大，不同类别之间的个体差异大、相似度小。<br /> 聚类分析是一种探索性分析方法，与判别分析不同，聚类分析事先并不知道分类的标准，甚至不知道应该分成几类，而是会根据样本数据的特征，自动进行分类。</p><img src="@/assets/images/f1001.png" />
|
|
|
|
|
<p>聚类与分类的不同在于，聚类所要求划分的类是未知的</p><img src="@/assets/images/f1002.png" /><img src="@/assets/images/f1003.png" /><img src="@/assets/images/f1005.png" /><p style="font-size:19px">2.原理</p><p> 假定研究对象均用所谓的“点”来表示。<br /> 在聚类分析中，一般的规则是将“距离”较小的点归为同一类，将“距离”较大的点归为不同的类。常见的是对个案分类，也可以对变量分类，但对于变量分类此时一般使用相似系数作为“距离”测量指标。<br/> 一般的规则：</p><img src="@/assets/images/f10010.png" /><br /><img src="@/assets/images/f10011.png" />
|
|
|
|
|
<br /><img src="@/assets/images/f10012.png" /><p style="font-weight: 700;font-size:22px">聚类方法及其在SPSS中的实现</p><p style="font-size:19px">1.主要的聚类方法：</p><img src="@/assets/images/f10013.png" /><p style="font-size:19px">2.方法详解：</p><p style="font-size:17px">（1）：K-means聚类</p><p> 又称为快速聚类（K-Means Cluster），是在聚类的类别数已确定的情况下，快速将其他个案归类到相应的类别，适合大样本数据的聚类。<br /> 具体步骤如下：</p><img src="@/assets/images/f10014.png" /><img src="@/assets/images/f10015.png" /><p>距离计算规则（欧几里得距离公式）：</p><img src="@/assets/images/f10016.png" /><p>图解：</p><img src="@/assets/images/f10017.png" /><img src="@/assets/images/f10018.png" />
|
|
|
|
|
<p>K-means的优缺点：<br />优势：<br /> （1）原理比较简单，实现也很容易，收敛速度快。<br /> （2）在对大规模数据集进行聚类分析时，算法聚类较高效且聚类效果较好。<br /> （3）簇与簇之间区别明显时，它的聚类效果很好。<br />不足：<br /> （1）分类数从初始分类开始就确定不变了，所以要求事先要对样本有足够的了解。<br />（2）仅限于个案间的聚类（Q型聚类），不能对变量进行聚类。<br /> （3）个案间的距离的测量方法使用的是欧式距离的平方，因此只能对连续变量进行聚类。<br />案例分析（SPSS）：<br />通过查询整理出了2018年我国各省份的20项基本情况，根据这些指标把这31个省市或地区分成3类。</p><img src="@/assets/images/f10019.png" /><p> 分析步骤：分析>>分类>>K-均值聚类>>迭代>>次数>>选项>>勾选统计>>确认</p><img src="@/assets/images/f10020.png" /><img src="@/assets/images/f10021.png" /><p>结果分析：</p>
|
|
|
|
|
<img src="@/assets/images/f10022.png" /><img src="@/assets/images/f10023.png" /><p>若不收敛则调大迭代次数</p><img src="@/assets/images/f10024.png" /><p>方差分析表：</p><img src="@/assets/images/f10025.png" /><p> 其中聚类均方对应组间均方差，误差均方对应组内均方差，显著性p<0.05时说明此变量分类效果好。由表可知，大部分变量的p<0.05,且组间均方差大于组内均方差，说明各变量在三个类别中的差异大，分类结果可信度高。</p><img src="@/assets/images/f10026.png" /><br /><img src="@/assets/images/10027.png" /><p>聚类结果解读：</p>
|
|
|
|
|
<div class="table-box"><table cellspacing="0" style="width:355pt;"><tbody><tr><td style="text-align:center;vertical-align:middle;width:355pt;"> <p style="margin-left:0in;text-align:center;"><strong>第一类：</strong><strong>1</strong><strong>个省份（广东省，经济发达）</strong></p> </td></tr><tr><td style="background-color:#e7e7e7;text-align:center;vertical-align:middle;width:355pt;"> <p style="margin-left:0in;text-align:center;"><strong>第二类：</strong><strong>19</strong><strong>个省份（云南、西藏等地区，经济一般）</strong></p> </td></tr><tr><td style="text-align:center;vertical-align:middle;width:355pt;"> <p style="margin-left:0in;text-align:center;"><strong>第三类：</strong><strong>11</strong><strong>个省份（上海、北京等地区，经济较发达）</strong></p> </td></tr></tbody></table></div>
|
|
|
|
|
<p style="font-weight: 700; font-size: 22px">聚类分析的定义及原理</p>
|
|
|
|
|
<p style="font-size: 19px">1.定义</p>
|
|
|
|
|
<p>
|
|
|
|
|
所谓物以类聚、人以群分。聚类分析，即是基于研究对象的特征，将他们分门别类，以让同类别的个体之间差异相对小、相似度相对大，不同类别之间的个体差异大、相似度小。
|
|
|
|
|
<br />
|
|
|
|
|
聚类分析是一种探索性分析方法，与判别分析不同，聚类分析事先并不知道分类的标准，甚至不知道应该分成几类，而是会根据样本数据的特征，自动进行分类。
|
|
|
|
|
</p>
|
|
|
|
|
<img src="@/assets/images/f1001.png" />
|
|
|
|
|
<p>聚类与分类的不同在于，聚类所要求划分的类是未知的</p>
|
|
|
|
|
<img src="@/assets/images/f1002.png" />
|
|
|
|
|
<img src="@/assets/images/f1003.png" />
|
|
|
|
|
<img src="@/assets/images/f1005.png" />
|
|
|
|
|
<p style="font-size: 19px">2.原理</p>
|
|
|
|
|
<p>
|
|
|
|
|
假定研究对象均用所谓的“点”来表示。
|
|
|
|
|
<br />
|
|
|
|
|
在聚类分析中，一般的规则是将“距离”较小的点归为同一类，将“距离”较大的点归为不同的类。常见的是对个案分类，也可以对变量分类，但对于变量分类此时一般使用相似系数作为“距离”测量指标。
|
|
|
|
|
<br />
|
|
|
|
|
一般的规则：
|
|
|
|
|
</p>
|
|
|
|
|
<img src="@/assets/images/f10010.png" />
|
|
|
|
|
<br />
|
|
|
|
|
<img src="@/assets/images/f10011.png" />
|
|
|
|
|
<br />
|
|
|
|
|
<img src="@/assets/images/f10012.png" />
|
|
|
|
|
<p style="font-weight: 700; font-size: 22px">聚类方法及其在SPSS中的实现</p>
|
|
|
|
|
<p style="font-size: 19px">1.主要的聚类方法：</p>
|
|
|
|
|
<img src="@/assets/images/f10013.png" />
|
|
|
|
|
<p style="font-size: 19px">2.方法详解：</p>
|
|
|
|
|
<p style="font-size: 17px">（1）：K-means聚类</p>
|
|
|
|
|
<p>
|
|
|
|
|
又称为快速聚类（K-Means Cluster），是在聚类的类别数已确定的情况下，快速将其他个案归类到相应的类别，适合大样本数据的聚类。
|
|
|
|
|
<br />
|
|
|
|
|
具体步骤如下：
|
|
|
|
|
</p>
|
|
|
|
|
<img src="@/assets/images/f10014.png" />
|
|
|
|
|
<img src="@/assets/images/f10015.png" />
|
|
|
|
|
<p>距离计算规则（欧几里得距离公式）：</p>
|
|
|
|
|
<img src="@/assets/images/f10016.png" />
|
|
|
|
|
<p>图解：</p>
|
|
|
|
|
<img src="@/assets/images/f10017.png" />
|
|
|
|
|
<img src="@/assets/images/f10018.png" />
|
|
|
|
|
<p>
|
|
|
|
|
K-means的优缺点：
|
|
|
|
|
<br />
|
|
|
|
|
优势：
|
|
|
|
|
<br />
|
|
|
|
|
（1）原理比较简单，实现也很容易，收敛速度快。
|
|
|
|
|
<br />
|
|
|
|
|
（2）在对大规模数据集进行聚类分析时，算法聚类较高效且聚类效果较好。
|
|
|
|
|
<br />
|
|
|
|
|
（3）簇与簇之间区别明显时，它的聚类效果很好。
|
|
|
|
|
<br />
|
|
|
|
|
不足：
|
|
|
|
|
<br />
|
|
|
|
|
（1）分类数从初始分类开始就确定不变了，所以要求事先要对样本有足够的了解。
|
|
|
|
|
<br />
|
|
|
|
|
（2）仅限于个案间的聚类（Q型聚类），不能对变量进行聚类。
|
|
|
|
|
<br />
|
|
|
|
|
（3）个案间的距离的测量方法使用的是欧式距离的平方，因此只能对连续变量进行聚类。
|
|
|
|
|
<br />
|
|
|
|
|
案例分析（SPSS）：
|
|
|
|
|
<br />
|
|
|
|
|
通过查询整理出了2018年我国各省份的20项基本情况，根据这些指标把这31个省市或地区分成3类。
|
|
|
|
|
</p>
|
|
|
|
|
<img src="@/assets/images/f10019.png" />
|
|
|
|
|
<p>分析步骤：分析>>分类>>K-均值聚类>>迭代>>次数>>选项>>勾选统计>>确认</p>
|
|
|
|
|
<img src="@/assets/images/f10020.png" />
|
|
|
|
|
<img src="@/assets/images/f10021.png" />
|
|
|
|
|
<p>结果分析：</p>
|
|
|
|
|
<img src="@/assets/images/f10022.png" />
|
|
|
|
|
<img src="@/assets/images/f10023.png" />
|
|
|
|
|
<p>若不收敛则调大迭代次数</p>
|
|
|
|
|
<img src="@/assets/images/f10024.png" />
|
|
|
|
|
<p>方差分析表：</p>
|
|
|
|
|
<img src="@/assets/images/f10025.png" />
|
|
|
|
|
<p>其中聚类均方对应组间均方差，误差均方对应组内均方差，显著性p<0.05时说明此变量分类效果好。由表可知，大部分变量的p<0.05,且组间均方差大于组内均方差，说明各变量在三个类别中的差异大，分类结果可信度高。</p>
|
|
|
|
|
<img src="@/assets/images/f10026.png" />
|
|
|
|
|
<br />
|
|
|
|
|
<img src="@/assets/images/10027.png" />
|
|
|
|
|
<p>聚类结果解读：</p>
|
|
|
|
|
<div class="table-box">
|
|
|
|
|
<table cellspacing="0" style="width: 355pt">
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td style="text-align: center; vertical-align: middle; width: 355pt">
|
|
|
|
|
<p style="margin-left: 0in; text-align: center">
|
|
|
|
|
<strong>第一类：</strong>
|
|
|
|
|
<strong>1</strong>
|
|
|
|
|
<strong>个省份（广东省，经济发达）</strong>
|
|
|
|
|
</p>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td style="background-color: #e7e7e7; text-align: center; vertical-align: middle; width: 355pt">
|
|
|
|
|
<p style="margin-left: 0in; text-align: center">
|
|
|
|
|
<strong>第二类：</strong>
|
|
|
|
|
<strong>19</strong>
|
|
|
|
|
<strong>个省份（云南、西藏等地区，经济一般）</strong>
|
|
|
|
|
</p>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td style="text-align: center; vertical-align: middle; width: 355pt">
|
|
|
|
|
<p style="margin-left: 0in; text-align: center">
|
|
|
|
|
<strong>第三类：</strong>
|
|
|
|
|
<strong>11</strong>
|
|
|
|
|
<strong>个省份（上海、北京等地区，经济较发达）</strong>
|
|
|
|
|
</p>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</pop-model>
|
|
|
|
|
@ -194,40 +268,37 @@
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import popModel from "@/views/components/popModal.vue";
|
|
|
|
|
import {htmlPdf} from "@/utils/pdf.js"
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
import * as XLSX from 'xlsx'
|
|
|
|
|
import JSZip from 'jszip';
|
|
|
|
|
import ecStat from 'echarts-stat';
|
|
|
|
|
import * as API from '@/api/AI.js'
|
|
|
|
|
import { htmlPdf } from "@/utils/pdf.js";
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
import * as XLSX from "xlsx";
|
|
|
|
|
import JSZip from "jszip";
|
|
|
|
|
import * as API from "@/api/AI.js";
|
|
|
|
|
import { getUserInfo } from "@/utils/auth";
|
|
|
|
|
import { onMounted } from 'vue';
|
|
|
|
|
const runResultShow=ref(false)
|
|
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
|
|
const dialogVisible=ref(false)
|
|
|
|
|
const tableLabel=reactive([
|
|
|
|
|
{prop:'date',label:''},
|
|
|
|
|
])
|
|
|
|
|
const isFlag=ref(false)
|
|
|
|
|
import { onMounted } from "vue";
|
|
|
|
|
const runResultShow = ref(false);
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
const dialogVisible = ref(false);
|
|
|
|
|
const tableLabel = reactive([{ prop: "date", label: "" }]);
|
|
|
|
|
const isFlag = ref(false);
|
|
|
|
|
const algorithmicKnowledge = () => {
|
|
|
|
|
runResultShow.value = true
|
|
|
|
|
}
|
|
|
|
|
runResultShow.value = true;
|
|
|
|
|
};
|
|
|
|
|
const getList = () => {
|
|
|
|
|
API.selectionMetrics({ userId: JSON.parse(getUserInfo()).userId }).then((res) => {
|
|
|
|
|
res.data.forEach(element => {
|
|
|
|
|
res.data.forEach((element) => {
|
|
|
|
|
options.value.push({
|
|
|
|
|
value: element,
|
|
|
|
|
label:element
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
label: element,
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const scrollbar = ref(null);
|
|
|
|
|
const fileList=ref([])
|
|
|
|
|
const fileList = ref([]);
|
|
|
|
|
const handleChange = (info) => {
|
|
|
|
|
fileList.value.push(info);
|
|
|
|
|
}
|
|
|
|
|
const flag=ref(false)
|
|
|
|
|
};
|
|
|
|
|
const flag = ref(false);
|
|
|
|
|
let myChart;
|
|
|
|
|
let myChart2;
|
|
|
|
|
const getRandomColorHex = () => {
|
|
|
|
|
@ -235,7 +306,7 @@ const algorithmicKnowledge=()=>{
|
|
|
|
|
// 生成 min 到 max 之间的随机整数
|
|
|
|
|
const value = Math.floor(Math.random() * (max - min + 1)) + min;
|
|
|
|
|
// 将整数转换为两位十六进制形式
|
|
|
|
|
return value.toString(16).padStart(2, '0');
|
|
|
|
|
return value.toString(16).padStart(2, "0");
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 限制红色通道较低，绿色和蓝色通道较高
|
|
|
|
|
@ -250,10 +321,10 @@ const algorithmicKnowledge=()=>{
|
|
|
|
|
// 获取当前的数据
|
|
|
|
|
let currentData = myChart.getOption().series[0].data || [];
|
|
|
|
|
// 添加新数据集，并为每个数据点单独设置颜色
|
|
|
|
|
newData.forEach(dataPoint => {
|
|
|
|
|
newData.forEach((dataPoint) => {
|
|
|
|
|
currentData.push({
|
|
|
|
|
value: [dataPoint.x, dataPoint.y],
|
|
|
|
|
itemStyle: { color: color }
|
|
|
|
|
itemStyle: { color: color },
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
@ -261,226 +332,227 @@ const algorithmicKnowledge=()=>{
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: currentData
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
data: currentData,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getList()
|
|
|
|
|
var chartDom = document.getElementById('main');
|
|
|
|
|
var chartDom2 = document.getElementById('main2');
|
|
|
|
|
getList();
|
|
|
|
|
var chartDom = document.getElementById("main");
|
|
|
|
|
var chartDom2 = document.getElementById("main2");
|
|
|
|
|
myChart = echarts.init(chartDom);
|
|
|
|
|
myChart2 = echarts.init(chartDom2);
|
|
|
|
|
// 初始化图表配置
|
|
|
|
|
var option = {
|
|
|
|
|
dataset: [
|
|
|
|
|
{
|
|
|
|
|
source: [] // 初始时数据为空
|
|
|
|
|
}
|
|
|
|
|
source: [], // 初始时数据为空
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
tooltip: {
|
|
|
|
|
position: 'top'
|
|
|
|
|
position: "top",
|
|
|
|
|
},
|
|
|
|
|
xAxis: {},
|
|
|
|
|
yAxis: {},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'scatter',
|
|
|
|
|
type: "scatter",
|
|
|
|
|
encode: { tooltip: [0, 1] },
|
|
|
|
|
symbolSize: 15,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
borderColor: '#555'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
borderColor: "#555",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 设置初始的配置
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
myChart2.setOption(option);
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const optionData = () => {
|
|
|
|
|
API.viewingMetrics({userId:JSON.parse(getUserInfo()).userId,tableName:input.value,algorithmName:'聚类分析'}).then((res)=>{
|
|
|
|
|
tableData.value=[]
|
|
|
|
|
res.data.forEach(element => {
|
|
|
|
|
API.viewingMetrics({ userId: JSON.parse(getUserInfo()).userId, tableName: input.value, algorithmName: "聚类分析" }).then((res) => {
|
|
|
|
|
tableData.value = [];
|
|
|
|
|
res.data.forEach((element) => {
|
|
|
|
|
tableData.value.push({
|
|
|
|
|
text:element
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
text: element,
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const selectedRows = ref([]);
|
|
|
|
|
const handleSelectionChange = (selection) => {
|
|
|
|
|
selectedRows.value = selection;
|
|
|
|
|
};
|
|
|
|
|
const tableData2=ref([])
|
|
|
|
|
const tableData3=ref([])
|
|
|
|
|
const resTable2=ref()
|
|
|
|
|
const tableData2 = ref([]);
|
|
|
|
|
const tableData3 = ref([]);
|
|
|
|
|
const resTable2 = ref();
|
|
|
|
|
const taskZB = () => {
|
|
|
|
|
flag.value=true
|
|
|
|
|
flag.value = true;
|
|
|
|
|
if (selectedRows.value.length === 0) {
|
|
|
|
|
return
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const sendData = {
|
|
|
|
|
tableName: input.value,
|
|
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
|
|
fieldList:selectedRows.value.map(item=>item.text)
|
|
|
|
|
}
|
|
|
|
|
fieldList: selectedRows.value.map((item) => item.text),
|
|
|
|
|
};
|
|
|
|
|
API.analysisDataDisplay(sendData).then((res) => {
|
|
|
|
|
tableLabel.length=0
|
|
|
|
|
tableLabel.length = 0;
|
|
|
|
|
for (const key in res.data[0]) {
|
|
|
|
|
tableLabel.push({
|
|
|
|
|
label: key,
|
|
|
|
|
prop:key
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
tableData2.value=res.data
|
|
|
|
|
flag.value=true
|
|
|
|
|
})
|
|
|
|
|
prop: key,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
tableData2.value = res.data;
|
|
|
|
|
flag.value = true;
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const formInline = reactive({
|
|
|
|
|
user:'',
|
|
|
|
|
region:''
|
|
|
|
|
})
|
|
|
|
|
const input=ref()
|
|
|
|
|
const options = ref([])
|
|
|
|
|
const input2=ref()
|
|
|
|
|
user: "",
|
|
|
|
|
region: "",
|
|
|
|
|
});
|
|
|
|
|
const input = ref();
|
|
|
|
|
const options = ref([]);
|
|
|
|
|
const input2 = ref();
|
|
|
|
|
const options2 = ref([
|
|
|
|
|
{
|
|
|
|
|
value:'数据区重',
|
|
|
|
|
label:'数据去重'
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
const input3=ref()
|
|
|
|
|
value: "数据区重",
|
|
|
|
|
label: "数据去重",
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
const input3 = ref();
|
|
|
|
|
const options3 = ref([
|
|
|
|
|
{
|
|
|
|
|
value:'缺失值处理--剔除数据',
|
|
|
|
|
label:'缺失值处理--剔除数据'
|
|
|
|
|
},{
|
|
|
|
|
value:'缺失值处理--均值替换',
|
|
|
|
|
label:'缺失值处理--均值替换'
|
|
|
|
|
value: "缺失值处理--剔除数据",
|
|
|
|
|
label: "缺失值处理--剔除数据",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "缺失值处理--均值替换",
|
|
|
|
|
label: "缺失值处理--均值替换",
|
|
|
|
|
},
|
|
|
|
|
])
|
|
|
|
|
const input4=ref()
|
|
|
|
|
]);
|
|
|
|
|
const input4 = ref();
|
|
|
|
|
const options4 = ref([
|
|
|
|
|
{
|
|
|
|
|
value:'K-means',
|
|
|
|
|
label:'K-means'
|
|
|
|
|
value: "K-means",
|
|
|
|
|
label: "K-means",
|
|
|
|
|
},
|
|
|
|
|
])
|
|
|
|
|
const input5=ref()
|
|
|
|
|
const input6=ref()
|
|
|
|
|
]);
|
|
|
|
|
const input5 = ref();
|
|
|
|
|
const input6 = ref();
|
|
|
|
|
const taskSubmit = () => {
|
|
|
|
|
dialogVisible.value=true
|
|
|
|
|
}
|
|
|
|
|
const tableData = ref([
|
|
|
|
|
|
|
|
|
|
])
|
|
|
|
|
dialogVisible.value = true;
|
|
|
|
|
};
|
|
|
|
|
const tableData = ref([]);
|
|
|
|
|
const headerCellStyle = () => {
|
|
|
|
|
return {
|
|
|
|
|
backgroundColor: "#1882DE !important", // 设置表头背景颜色
|
|
|
|
|
color: "#ffffff !important",
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const optionData2 = () => {
|
|
|
|
|
if (input2.value && input3.value) {
|
|
|
|
|
const sendData = ref({
|
|
|
|
|
mapList: tableData2.value,
|
|
|
|
|
method: input3.value,
|
|
|
|
|
userId:JSON.parse(getUserInfo()).userId
|
|
|
|
|
})
|
|
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
|
|
});
|
|
|
|
|
API.dataPreprocessing(sendData.value).then((res) => {
|
|
|
|
|
resTable2.value=res.data
|
|
|
|
|
tableData2.value=[]
|
|
|
|
|
tableData2.value=res.data
|
|
|
|
|
resTable2.value = res.data;
|
|
|
|
|
tableData2.value = [];
|
|
|
|
|
tableData2.value = res.data;
|
|
|
|
|
proxy.$modal.msgSuccess("预处理成功！");
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const showChart=ref(false)
|
|
|
|
|
const showChart = ref(false);
|
|
|
|
|
//生产表格
|
|
|
|
|
const nowData=ref([])
|
|
|
|
|
const nowData = ref([]);
|
|
|
|
|
const computation = () => {
|
|
|
|
|
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
|
|
|
|
|
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; // 动态设置字段名
|
|
|
|
|
newItem[label.prop] = "簇" + sex; // 动态设置字段名
|
|
|
|
|
} else {
|
|
|
|
|
newItem[label.prop] =''
|
|
|
|
|
newItem[label.prop] = "";
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
newItem['TSuid']=sex
|
|
|
|
|
sex++
|
|
|
|
|
newItem["TSuid"] = sex;
|
|
|
|
|
sex++;
|
|
|
|
|
tableData3.value.push(newItem);
|
|
|
|
|
tableData3.value[index].children=[]
|
|
|
|
|
const children=ref([])
|
|
|
|
|
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
|
|
|
|
|
newItem2["TSuid"] = "" + sex + sexx;
|
|
|
|
|
children.value.push(newItem2);
|
|
|
|
|
});
|
|
|
|
|
tableData3.value[index].children = children.value;
|
|
|
|
|
console.log(tableData3.value);
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
}).then(()=>{
|
|
|
|
|
.then(() => {
|
|
|
|
|
API.clusterAnalysis(sendData).then((res) => {
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: [] // 清空数据
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
data: [], // 清空数据
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
myChart2.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: [] // 清空数据
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
data: [], // 清空数据
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
Object.keys(res.data.dataSet).forEach(key => {
|
|
|
|
|
const bgColor=getRandomColorHex()
|
|
|
|
|
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');
|
|
|
|
|
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');
|
|
|
|
|
const scrollContainer = scrollbar.value?.$el.querySelector(".el-scrollbar__wrap");
|
|
|
|
|
if (scrollContainer) {
|
|
|
|
|
scrollContainer.scrollTo({
|
|
|
|
|
top: scrollContainer.scrollHeight,
|
|
|
|
|
behavior: 'smooth' // 平滑滚动
|
|
|
|
|
behavior: "smooth", // 平滑滚动
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}, 100);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const exportTableRef = ref(null);
|
|
|
|
|
const upLoad = () => {
|
|
|
|
|
const tableDom = exportTableRef.value?.$el;
|
|
|
|
|
@ -490,49 +562,49 @@ const nowData=ref([])
|
|
|
|
|
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 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: [] // 清空数据
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
data: [], // 清空数据
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
myChart2.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: [] // 清空数据
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
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=[]
|
|
|
|
|
}
|
|
|
|
|
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
|
|
|
|
|
}
|
|
|
|
|
var fileName = "聚类分析图表";
|
|
|
|
|
const fileList = document.getElementsByClassName("pdfRef"); // 很重要
|
|
|
|
|
const pdfBlob = await htmlPdf(fileName, document.querySelector("#pdfRef"), fileList, true);
|
|
|
|
|
return pdfBlob;
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@ -550,16 +622,16 @@ const handleExport = async(name) => {
|
|
|
|
|
.el-button:nth-child(1) {
|
|
|
|
|
width: 180px;
|
|
|
|
|
height: 56px;
|
|
|
|
|
background: url('../../../assets/images/011.png');
|
|
|
|
|
color:#FFFFFF;
|
|
|
|
|
border-color:#FFFFFF00;
|
|
|
|
|
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;
|
|
|
|
|
background: url("../../../assets/images/022.png");
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
border-color: #ffffff00;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.app-main {
|
|
|
|
|
@ -590,23 +662,23 @@ const handleExport = async(name) => {
|
|
|
|
|
.el-button {
|
|
|
|
|
width: 149px;
|
|
|
|
|
height: 48px;
|
|
|
|
|
background: url('../../../assets/images/确定.png');
|
|
|
|
|
color:#FFFFFF;
|
|
|
|
|
border-color:#FFFFFF00;
|
|
|
|
|
background: url("../../../assets/images/确定.png");
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
border-color: #ffffff00;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
margin: 15px;
|
|
|
|
|
}
|
|
|
|
|
.el-input {
|
|
|
|
|
--el-input-text-color:#FFFFFF;
|
|
|
|
|
--el-input-text-color: #ffffff;
|
|
|
|
|
--el-input-bg-color: #002651;
|
|
|
|
|
--el-input-border-color:#67B3D6;
|
|
|
|
|
--el-input-border-color: #67b3d6;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.startOver {
|
|
|
|
|
margin-left: -10px;
|
|
|
|
|
width: 205px;
|
|
|
|
|
height: 55px;
|
|
|
|
|
background: #00F4FF;
|
|
|
|
|
background: #00f4ff;
|
|
|
|
|
//水平居中
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
@ -615,10 +687,10 @@ const handleExport = async(name) => {
|
|
|
|
|
}
|
|
|
|
|
:deep(.el-table) {
|
|
|
|
|
--el-table-row-hover-bg-color: #002651 !important;
|
|
|
|
|
--el-table-border-color: #7AC1FF;
|
|
|
|
|
--el-table-border-color: #7ac1ff;
|
|
|
|
|
.el-table__row {
|
|
|
|
|
background-color: #002652 !important;
|
|
|
|
|
color: #E6E6E6;
|
|
|
|
|
color: #e6e6e6;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -629,35 +701,35 @@ const handleExport = async(name) => {
|
|
|
|
|
border: 1px solid #0452c6;
|
|
|
|
|
:deep(.el-table__header) {
|
|
|
|
|
.el-table__cell {
|
|
|
|
|
background:linear-gradient(0deg, #5304BE 0%, #9126FE 100%) !important;
|
|
|
|
|
background: linear-gradient(0deg, #5304be 0%, #9126fe 100%) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
:deep(.el-table) {
|
|
|
|
|
--el-table-row-hover-bg-color: #002651 !important;
|
|
|
|
|
--el-table-border-color: #002651;
|
|
|
|
|
--el-table-bg-color:#FFFFFF00;
|
|
|
|
|
--el-table-bg-color: #ffffff00;
|
|
|
|
|
.el-table__row {
|
|
|
|
|
background-color: #002652 !important;
|
|
|
|
|
color: #E6E6E6;
|
|
|
|
|
color: #e6e6e6;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.metrics {
|
|
|
|
|
:deep(.el-input) {
|
|
|
|
|
.el-input__wrapper {
|
|
|
|
|
background-color:#FFFFFF00;
|
|
|
|
|
background-image:url('../../../assets/images/下拉框.png');
|
|
|
|
|
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-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;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -666,29 +738,29 @@ const handleExport = async(name) => {
|
|
|
|
|
.el-button {
|
|
|
|
|
width: 89px;
|
|
|
|
|
height: 31px;
|
|
|
|
|
background: url('../../../assets/images/下载.png');
|
|
|
|
|
background: url("../../../assets/images/下载.png");
|
|
|
|
|
color: black;
|
|
|
|
|
border-color:#FFFFFF00;
|
|
|
|
|
border-color: #ffffff00;
|
|
|
|
|
// background-size: 100% 100%;
|
|
|
|
|
margin: 15px 0px 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
:deep(.el-form-item__label) {
|
|
|
|
|
color: #FFFFFF;;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
.from-item {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
.el-input {
|
|
|
|
|
--el-input-text-color:#FFFFFF;
|
|
|
|
|
--el-input-text-color: #ffffff;
|
|
|
|
|
--el-input-bg-color: #002651;
|
|
|
|
|
--el-input-border-color:#67B3D6;
|
|
|
|
|
--el-input-border-color: #67b3d6;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.dialog-footer {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
:deep(.el-table__expand-icon) {
|
|
|
|
|
color: #9126FE;
|
|
|
|
|
color: #9126fe;
|
|
|
|
|
.el-icon {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
qinzhenpen
2 years ago