dianshang-qianduan/src/views/digitalMarketingAlgorithms/components/descriptiveStatistics.vue

<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">
      <el-scrollbar height="550px" style="padding-right: 10px" min-size="5">
        <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-table border ref="multipleTableRef" :data="modelParams" style="width: 100%" :header-cell-style="headerCellStyle" @selection-change="handlemodelSelectionChange">
              <el-table-column type="selection" prop="date" label="Date" align="center" />
              <el-table-column prop="name" label="统计量" align="center" />
            </el-table>
            <el-button @click="modelCalculation">计算</el-button>
          </div>
        </div>
      </el-scrollbar>
      <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">
      <el-scrollbar height="550px" style="padding: 20px">
        <div>
          <span style="font-weight: bold; font-size: 18px; color: #3596eb">分析数据：</span>
          <el-table :data="analysisData" style="width: 100%; margin-top: 10px" :header-cell-style="headerCellStyle">
            <el-table-column v-for="column in analysisHanderKry" :key="column" :prop="column" :label="column" align="center" />
          </el-table>
          <pagination v-show="n_analyzeTheNumberOfDataItems > 0" :total="n_analyzeTheNumberOfDataItems" v-model:page="n_dataTableQuery.index" v-model:limit="n_dataTableQuery.size" @pagination="analyzeDataNext" />
        </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>
          <el-table :data="tableData" style="width: 100%; margin-top: 10px" :header-cell-style="headerCellStyle" height="350" v-loading="loading">
            <el-table-column v-for="column in tableLabel" :key="column.label" :prop="column.prop" :label="column.label" align="center"></el-table-column>
          </el-table>
          <pagination v-show="nNumberOfAnalysisResults > 0" :total="nNumberOfAnalysisResults" v-model:page="gAnalysisResults.index" v-model:limit="gAnalysisResults.size" @pagination="updatePageAnalysisResults" />
        </div>
      </el-scrollbar>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="实训任务提交" width="565" 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-position="right" label-width="84px" :model="form" class="demo-form-inline">
        <el-form-item label="平均数：">
          <el-input style="width: 120px" v-model="formInline.average" clearable />
        </el-form-item>
        <el-form-item label="众数：">
          <el-input style="width: 120px" v-model="formInline.mode" clearable />
        </el-form-item>
        <el-form-item label="中位数：">
          <el-input style="width: 120px" v-model="formInline.median" clearable />
        </el-form-item>
        <el-form-item label="标准差：">
          <el-input style="width: 120px" v-model="formInline.standardDeviation" clearable />
        </el-form-item>
        <el-form-item label="方差：">
          <el-input style="width: 120px" v-model="formInline.variance" clearable />
        </el-form-item>
        <el-form-item label="峰度：">
          <el-input style="width: 120px" v-model="formInline.kurtosis" clearable />
        </el-form-item>
        <el-form-item label="标准误差：">
          <el-input style="width: 120px" v-model="formInline.standardError" clearable />
        </el-form-item>
        <el-form-item label="偏度：">
          <el-input style="width: 120px" v-model="formInline.skewness" clearable />
        </el-form-item>
        <el-form-item label="最大值：">
          <el-input style="width: 120px" v-model="formInline.max" clearable />
        </el-form-item>
        <el-form-item label="最小值：">
          <el-input style="width: 120px" v-model="formInline.min" clearable />
        </el-form-item>
        <el-form-item label="求和：">
          <el-input style="width: 120px" v-model="formInline.summation" clearable />
        </el-form-item>
        <el-form-item label="观测数：">
          <el-input style="width: 120px" v-model="formInline.observations" clearable />
        </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>
  <el-dialog v-model="b_introductionOfAlgorithmKnowledge" title="算法知识导入" width="60%" :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"></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>
  <pop-model :showModel="runResultShow" title="关联规则挖掘" @closePop="runResultShow = false">
    <template v-slot:content>
      <div>
        <p style="font-weight: 700; font-size: 22px">什么是描述性统计分析</p>
        <p>
          描述性统计分析是数据分析的一种方法，旨在对数据进行总结和描述，以便更好地理解数据的特征和趋势。它主要通过统计指标和图表来呈现数据的基本特征，包括中心趋势、离散程度、分布形态等。
          <br />
          常用的描述性统计指标包括：
        </p>
        <li>中心趋势：用于描述数据集的集中程度，常见的指标有均值、中位数和众数。</li>
        <li>离散程度：用于描述数据的分散程度，常见的指标有方差、标准差和极差。</li>
        <li>分布形态：用于描述数据的分布形态，常见的指标有偏度和峰度。</li>
        <p>描述性统计分析还可以通过图表来展示数据的特征，常见的图表包括：</p>
        <li>频数分布表和直方图：用于展示数据的分布情况，可以观察数据的集中程度和离散程度。</li>
        <li>箱线图：用于展示数据的分布情况和离群值，可以观察数据的中位数、四分位数和异常值。</li>
        <li>散点图：用于展示两个变量之间的关系，可以观察数据的相关性和趋势。</li>
        <p>描述性统计分析可以帮助我们对数据有一个直观的了解，发现数据中的规律和异常情况，为后续的数据分析和决策提供基础。</p>
        <p style="font-size: 19px; font-weight: 600">描述性统计分析的优势和局限性</p>
        <p>
          描述性统计分析的优势和局限性如下：
          <br />
          优势：
        </p>
        <li>简单易懂：描述性统计分析使用简单的统计指标和图表，可以直观地呈现数据的特征，使人们更容易理解和解释数据。</li>
        <li>提供概览：通过描述性统计分析，可以获得数据的整体概览，包括数据的中心趋势（如均值、中位数）、数据的分布情况（如标准差、百分位数）等。</li>
        <li>发现异常值：描述性统计分析可以帮助我们发现数据中的异常值或离群点，从而帮助我们识别数据质量问题或异常情况。</li>
        <p>局限性：</p>
        <li>缺乏深入分析：描述性统计分析主要关注数据的基本特征，无法深入挖掘数据背后的关联和因果关系。</li>
        <li>无法进行推断：描述性统计分析只是对已有数据的总结和描述，并不能进行推断或预测。</li>
        <li>受数据限制：描述性统计分析的结果受到数据本身的限制，如果数据质量不好或数据量较小，可能会导致结果不准确或不可靠。</li>
        <p>综上所述，描述性统计分析是数据分析的重要工具，可以帮助我们了解数据的基本特征和趋势，但在深入分析和推断方面有一定的局限性。</p>
        <p style="font-size: 19px; font-weight: 600">描述性统计分析的常用方法</p>
        <p>描述性统计分析是对数据进行总结和描述的过程，常用的方法包括：</p>
        <li>中心趋势度量：包括均值（mean）、中位数（median）和众数（mode），用于描述数据的集中程度。</li>
        <li>离散程度度量：包括方差（variance）、标准差（standard deviation）和极差（range），用于描述数据的离散程度。</li>
        <li>分布形状度量：包括偏度（skewness）和峰度（kurtosis），用于描述数据的分布形状。</li>
        <li>频数统计：通过频数表、频率分布表和直方图等方式，统计数据的频数和频率。</li>
        <li>百分位数：用于描述数据中某个特定百分比的位置，如中位数、四分位数等。</li>
        <li>相关性分析：通过计算相关系数（如Pearson相关系数）来衡量两个变量之间的相关性。</li>
        <p style="font-size: 19px; font-weight: 600">描述性统计分析的应用场景</p>
        <p>描述性统计分析在许多领域和应用场景中都有重要的作用，以下是一些常见的应用场景：</p>
        <li>提供概览：描述性统计分析可以提供数据的概览，帮助我们了解数据的整体特征和规律。通过计算中心趋势测量（如均值、中位数、众数）、离散程度测量（如方差、标准差、极差）和分布形态测量（如偏度、峰度），我们可以得到数据的集中趋势、离散程度和分布形态等信息。</li>
        <li>数据比较：描述性统计分析可以帮助我们比较不同组或不同时间点的数据。通过比较不同组的中心趋势、离散程度和分布形态等，我们可以了解不同组之间的差异和相似之处，从而得出结论或提出假设。</li>
        <li>发现异常值：描述性统计分析可以帮助我们发现数据中的异常值。通过观察离群点（如极端值）和异常值（如异常观测值），我们可以发现数据中的异常情况，进而进行进一步的分析和处理。</li>
        <li>数据可视化：描述性统计分析可以通过可视化方法（如直方图、散点图、箱线图等）将数据转化为图形，使得数据更加直观和易于理解。数据可视化可以帮助我们发现数据的分布模式、趋势和关联关系，从而更好地理解数据。</li>
        <li>数据摘要：描述性统计分析可以通过频数和频率分布表、百分位数等方式对数据进行摘要和概括。这些摘要信息可以帮助我们对数据进行快速的了解和比较，从而支持后续的决策和分析。</li>
        <li>假设检验：描述性统计分析可以为假设检验提供依据，通过对样本数据的描述性统计分析，我们可以判断样本数据是否符合某种假设分布，从而进行假设检验。</li>
        <li>数据报告和展示：描述性统计分析可以提供数据的概括性描述，用于撰写数据报告和展示，帮助他人更好地理解数据的特征和趋势。</li>
        <li>数据清洗：描述性统计分析可以帮助我们发现数据中的问题和错误。通过观察数据的分布情况和异常值，我们可以判断数据的质量，并进行必要的数据清洗和修正。</li>
        <li>数据探索：描述性统计分析是探索性数据分析的一部分，它可以帮助我们发现数据中的模式、关联和趋势。通过观察数据的分布、散点图、相关系数等，我们可以发现数据中的隐藏信息和规律。</li>
        <li>决策支持：描述性统计分析可以为决策提供支持。通过对数据的摘要和可视化，我们可以获取有关数据的重要信息，帮助决策者做出基于数据的决策。</li>
        <p style="font-size: 19px; font-weight: 600">如何进行描述性统计分析</p>
        <p>开展描述性统计分析可以按照以下步骤进行：</p>
        <li>收集数据：首先，需要收集所需的数据，可以是通过调查问卷、实验、观察或从现有数据源获取。</li>
        <li>数据清洗：对收集到的数据进行清洗，包括处理缺失值、异常值和错误数据等。</li>
        <li>描述性统计：使用统计方法计算数据的基本统计量，如平均值、中位数、标准差等，以了解数据的集中趋势、离散程度和分布情况。</li>
        <li>可视化展示：将统计结果以图表的形式进行可视化展示，如直方图、箱线图、散点图等，以更直观地呈现数据的特征和趋势。</li>
        <li>解读分析结果：根据统计分析的结果，解读数据的含义和趋势，提取有用的信息和洞察，并进行合理的解释和推断。</li>
        <p style="font-size: 19px; font-weight: 600">描述性统计分析的注意事项</p>
        <p>在进行描述性统计分析时，有以下几个注意事项：</p>
        <li>数据质量：确保数据的准确性和完整性。进行数据清洗，处理缺失值、异常值和重复值等，以保证分析结果的可靠性。</li>
        <li>数据类型：根据数据的类型选择合适的统计方法和图表。对于定量数据，可以使用均值、标准差等统计量；对于定性数据，可以使用频数和百分比等统计量。</li>
        <li>样本大小：考虑样本大小对统计结果的影响。样本较小可能导致统计结果不够准确，而样本较大可能会增加计算复杂度。</li>
        <li>数据分布：了解数据的分布情况，选择合适的统计方法和图表。例如，对于正态分布的数据，可以使用均值和标准差进行描述；对于偏态分布的数据，可以使用中位数和四分位数等进行描述。</li>
        <li>上下文和目的：考虑数据分析的上下文和目的。根据具体的问题和需求，选择合适的统计方法和图表，以便更好地解读数据和提取有价值的信息。</li>
        <li>解读和推断：描述性统计分析主要是对数据进行概括和描述，不能进行推断和因果分析。在解读结果时，要注意避免过度解读和误导。</li>
        <li>可视化呈现：使用合适的图表和图形将数据可视化，以便更好地传达数据的特征和趋势。选择简洁明了的图表，避免图表过于复杂和混乱。</li>
      </div>
    </template>
  </pop-model>
</template>
<script setup>
import * as portraitModel from "@/api/portraitModel";
import { paginate } from "@/utils/index.js";
import * as API from "@/api/AI.js";
import * as marketingAlgorithmApi from "@/api/marketing-algorithm.js";
import useAlgorithmStore from "@/store/modules/algorithm.js";
import useUserStore from "@/store/modules/user";
import { getUserInfo } from "@/utils/auth";
import popModel from "@/views/components/popModal.vue";
const userInfo = JSON.parse(getUserInfo());
const loading = ref(false);
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const algorithmStore = useAlgorithmStore();
const multipleTableRef = ref(null);
const b_introductionOfAlgorithmKnowledge = ref(false);
const runResultShow = ref(false);
const n_dataTableQuery = ref({
  index: 1,
  size: 5,
  tableName: "用户属性表",
  userId: userInfo.userId,
});
const gAnalysisResults = ref({
  index: 1,
  size: 5,
});
const dialogVisible = ref(false);
// 模型参数
const modelParams = reactive([
  {
    name: "平均数",
  },
  {
    name: "中位数",
  },
  {
    name: "众数",
  },
  {
    name: "标准差",
  },
  {
    name: "方差",
  },
  {
    name: "标准误差",
  },
  {
    name: "峰度",
  },
  {
    name: "偏度",
  },
  {
    name: "最大值",
  },
  {
    name: "最小值",
  },
  {
    name: "求和",
  },
  {
    name: "观测数",
  },
]);
const analysisData = ref([]);
const analysisHanderKry = ref([""]);

const tableLabel = reactive([
  { prop: "average", label: "平均数" },
  { prop: "median", label: "中位数" },
  { prop: "mode", label: "众数" },
  { prop: "standardDeviation", label: "标准差" },
  { prop: "variance", label: "方差" },
  { prop: "standardError", label: "标准误差" },
  { prop: "kurtosis", label: "峰度" },
  { prop: "skewness", label: "偏度" },
  { prop: "max", label: "最大值" },
  { prop: "min", label: "最小值" },
  { prop: "summation", label: "求和" },
  { prop: "observations", label: "观测数" },
]);
const formInline = ref({
  average: "",
  median: "",
  mode: "",
  standardDeviation: "",
  variance: "",
  standardError: "",
  kurtosis: "",
  skewness: "",
  max: "",
  min: "",
  summation: "",
  observations: "",
});
const g_indicatorData = ref([]);
const preProcessText = ref({
  text1: "数据去重",
  text2: "",
});
// 分析数据
const n_analyzeTheNumberOfDataItems = ref(0);
const aAnalyzeTheRawData = ref([]);
//分析结果
const nNumberOfAnalysisResults = ref(0);
const aOriginalDataOfAnalysisResults = ref([]);
const aOriginalDataOfAnalysisResults2 = ref({});

// 模型参数
const g_modelParameter = ref([]);
// 预处理
const preProcess = (tetx) => {
  if (analysisData.value.length == 0) {
    proxy.$modal.msgWarning("请先选择指标进行数据分析!");
    preProcessText.value.text2 = "";
  }
  API.dataPreprocessing({
    mapList: analysisData.value,
    method: preProcessText.value.text2,
    userId: n_dataTableQuery.value.userId,
  }).then((res) => {
    proxy.$modal.msgSuccess("预处理成功");
    analysisData.value = res.data;
  });
};
// 提交
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("请选择指标");
  marketingAlgorithmApi.getMarketingAlgorithm({ userId: n_dataTableQuery.value.userId, tableName: n_dataTableQuery.value.tableName, fieldList: g_indicatorData.value }).then((res) => {
    analysisHanderKry.value.length = 0;
    analysisData.value = res.data;
    analysisHanderKry.value = Object.keys(res.data[0]);
    if (res.data.length > 5) {
      n_analyzeTheNumberOfDataItems.value = res.data.length;
      aAnalyzeTheRawData.value = res.data;
      analysisData.value = res.data.slice(0, 5);
    }
    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(analysisHanderKry.value, aAnalyzeTheRawData.value);
  loading.value = true;
  marketingAlgorithmApi
    .getMarketingAlgorithmPreprocessing(JSON.stringify({ map: processedData, statistic: g_modelParameter.value, 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);
      }
      setTimeout(() => {
        loading.value = false;
        proxy.$modal.msgSuccess("计算成功");
      }, 1000);
    })
    .catch((err) => {
      loading.value = true;
    });
};
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 = () => {
  runResultShow.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 analyzeDataNext = () => {
  analysisData.value = paginate(aAnalyzeTheRawData.value, n_dataTableQuery.value.index, n_dataTableQuery.value.size).data;
};
const updatePageAnalysisResults = () => {
  tableData.value = paginate(aOriginalDataOfAnalysisResults.value, gAnalysisResults.value.index, gAnalysisResults.value.size).data;
};
// 下载
const download = () => {
  aOriginalDataOfAnalysisResults2.value.forEach((item) => {
    item.statistics.field = item.field;
    for (let key in item.statistics) {
      item.statistics[key] = item.statistics[key] ?? 0;
    }
  });

  marketingAlgorithmApi.getMarketingAlgorithmDownload(aOriginalDataOfAnalysisResults2.value).then((res) => {
    const blob = new Blob([res], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "描述性统计.xlsx";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
    proxy.$modal.msgSuccess("下载成功");
  });
};
</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 {
  //   background-color: #f5f5f5;
  // min-height: 965px;
  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;
    padding-left: 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;
    :deep(.el-table__header) {
      .el-table__cell {
        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__row {
        background-color: #002652 !important;
        color: #e6e6e6;
      }
    }
  }
  .metrics {
    :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 {
  .el-button {
    width: 89px;
    height: 31px;
    background: url("../../../assets/images/下载.png");
    color: black;
    border-color: #ffffff00;
    // background-size: 100% 100%;
    margin: 15px 0px 5px;
  }
}
: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;
}
:deep(.pagination-container .el-pagination) {
  // 去除定位
  position: static;
}
</style>