|
|
@@ -0,0 +1,1434 @@
|
|
|
+<!--
|
|
|
+ * @Author: your name
|
|
|
+ * @Date: 2025-08-14 11:28:28
|
|
|
+ * @LastEditTime: 2025-08-14 13:50:35
|
|
|
+ * @LastEditors: bogon
|
|
|
+ * @Description: In User Settings Edit
|
|
|
+ * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/toolbox.vue
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ 背景颜色
|
|
|
+
|
|
|
+ <el-form
|
|
|
+ label-position="top"
|
|
|
+ :model="formLabelAlign"
|
|
|
+ size="mini"
|
|
|
+ ref="form"
|
|
|
+ >
|
|
|
+ <template v-if="curEdit.type !== 'Cp' && curEdit.type !== 'pareto'">
|
|
|
+ <el-form-item label="背景颜色">
|
|
|
+ <div
|
|
|
+ slot="label"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>纬度标签</span>
|
|
|
+ <el-tooltip
|
|
|
+ content="添加纬度"
|
|
|
+ placement="bottom-start"
|
|
|
+ v-if="
|
|
|
+ curEdit.type === 'scatter' ||
|
|
|
+ // curEdit.type === 'radar' ||
|
|
|
+ curEdit.type === 'sankeyDiagram' ||
|
|
|
+ curEdit.type === 'Heatmap'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ @click="handleLatitude('init')"
|
|
|
+ class="el-icon-circle-plus-outline"
|
|
|
+ style="font-size: 20px"
|
|
|
+ ></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <el-tooltip
|
|
|
+ content="按顺序添加纬度，不添加则不显示图表"
|
|
|
+ placement="bottom-start"
|
|
|
+ v-if="
|
|
|
+ curEdit.type === 'sankeyDiagram' || curEdit.type === 'Heatmap'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-if="curEdit.type === 'sankeyDiagram'"
|
|
|
+ style="color: red; font-size: 12px"
|
|
|
+ >
|
|
|
+ 源纬度-目标纬度
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="curEdit.type === 'Heatmap'"
|
|
|
+ style="color: red; font-size: 12px"
|
|
|
+ >
|
|
|
+ 横轴纬度-纵轴纬度
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <template v-for="(item, ind) in formLabelAlign.Xdata">
|
|
|
+ <div class="attributeItemData">
|
|
|
+ <el-select
|
|
|
+ style="margin: 5px 0"
|
|
|
+ :key="ind + 'select'"
|
|
|
+ v-model="formLabelAlign.Xdata[ind].id"
|
|
|
+ placeholder="请先进行数据配置"
|
|
|
+ :disabled="disabled"
|
|
|
+ @change="handleXdata('init')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in selectData"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.id"
|
|
|
+ :key="item.id + ind"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-tooltip
|
|
|
+ v-if="
|
|
|
+ curEdit.type === 'scatter' ||
|
|
|
+ // curEdit.type === 'radar' ||
|
|
|
+ curEdit.type === 'sankeyDiagram' ||
|
|
|
+ curEdit.type === 'Heatmap'
|
|
|
+ "
|
|
|
+ :content="
|
|
|
+ formLabelAlign.Xdata.length <= 1
|
|
|
+ ? '该指标不可删除，最少存在一组指标'
|
|
|
+ : '删除该指标'
|
|
|
+ "
|
|
|
+ placement="bottom-start"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ :disabled="formLabelAlign.Xdata.length <= 1"
|
|
|
+ @click="removeXdata(ind, 'init')"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="el-icon-delete"
|
|
|
+ style="font-size: 16px; color: red; padding: 0 0 0 10px"
|
|
|
+ ></i
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="背景颜色">
|
|
|
+ <div
|
|
|
+ slot="label"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>指标值</span>
|
|
|
+ <el-tooltip
|
|
|
+ content="添加指标值"
|
|
|
+ placement="bottom-start"
|
|
|
+ v-if="
|
|
|
+ // curEdit.type !== 'roseChart' &&
|
|
|
+ curEdit.type !== 'pie' &&
|
|
|
+ curEdit.type !== 'sankeyDiagram' &&
|
|
|
+ curEdit.type !== 'Heatmap'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ @click="handleMetrics('init')"
|
|
|
+ class="el-icon-circle-plus-outline"
|
|
|
+ style="font-size: 20px"
|
|
|
+ ></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <el-tooltip
|
|
|
+ content="按顺序添加指标值，不添加则不显示图表"
|
|
|
+ placement="bottom-start"
|
|
|
+ v-if="curEdit.type === 'boxPlot'"
|
|
|
+ >
|
|
|
+ <div style="color: red; font-size: 12px">
|
|
|
+ 最小值-Q1-中位数-Q3-最大值
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ <template v-for="(item, ind) in formLabelAlign.Ydata">
|
|
|
+ <div class="attributeItemData">
|
|
|
+ <el-select
|
|
|
+ style="margin: 5px 0"
|
|
|
+ :key="ind + 'select' + 'zhibiao'"
|
|
|
+ v-model="formLabelAlign.Ydata[ind].id"
|
|
|
+ placeholder="请先进行数据配置"
|
|
|
+ :disabled="disabled"
|
|
|
+ @change="handleYdata(ind, 'init')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in selectData"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.id"
|
|
|
+ :key="item.id + ind"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-tooltip
|
|
|
+ v-if="
|
|
|
+ // curEdit.type !== 'roseChart' &&
|
|
|
+ curEdit.type !== 'pie' &&
|
|
|
+ curEdit.type !== 'sankeyDiagram' &&
|
|
|
+ curEdit.type !== 'Heatmap'
|
|
|
+ "
|
|
|
+ :content="
|
|
|
+ formLabelAlign.Ydata.length <= 1
|
|
|
+ ? '该指标不可删除，最少存在一组指标'
|
|
|
+ : '删除该指标'
|
|
|
+ "
|
|
|
+ placement="bottom-start"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ :disabled="formLabelAlign.Ydata.length <= 1"
|
|
|
+ @click="removeYdata(ind, 'init')"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="el-icon-delete"
|
|
|
+ style="font-size: 16px; color: red; padding: 0 0 0 10px"
|
|
|
+ ></i
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <el-form-item
|
|
|
+ v-if="curEdit.type === 'pareto' || curEdit.type === 'Cp'"
|
|
|
+ label="线纬度标签"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ slot="label"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>线纬度标签</span>
|
|
|
+ <el-tooltip
|
|
|
+ content="添加纬度"
|
|
|
+ placement="bottom-start"
|
|
|
+ v-if="curEdit.type === 'Cp'"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ @click="
|
|
|
+ formLabelAlign.LineXdata.push({ label: '', data: [], id: '' })
|
|
|
+ "
|
|
|
+ class="el-icon-circle-plus-outline"
|
|
|
+ style="font-size: 20px"
|
|
|
+ ></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <template v-for="(item, ind) in formLabelAlign.LineXdata">
|
|
|
+ <div class="attributeItemData">
|
|
|
+ <el-select
|
|
|
+ style="margin: 5px 0"
|
|
|
+ :key="ind + 'select'"
|
|
|
+ v-model="formLabelAlign.LineXdata[ind].id"
|
|
|
+ placeholder="请先进行数据配置"
|
|
|
+ :disabled="disabled"
|
|
|
+ @change="handleXdata('line')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in selectData"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.id"
|
|
|
+ :key="item.id + ind"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-tooltip
|
|
|
+ v-if="curEdit.type === 'Cp'"
|
|
|
+ :content="
|
|
|
+ formLabelAlign.LineXdata.length <= 1
|
|
|
+ ? '该维度不可删除，最少存在一组指标'
|
|
|
+ : '删除该维度指标'
|
|
|
+ "
|
|
|
+ placement="bottom-start"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ :disabled="formLabelAlign.LineXdata.length <= 1"
|
|
|
+ @click="removeXdata(ind, 'line')"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="el-icon-delete"
|
|
|
+ style="font-size: 16px; color: red; padding: 0 0 0 10px"
|
|
|
+ ></i
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ v-if="curEdit.type === 'pareto' || curEdit.type === 'Cp'"
|
|
|
+ label="线指标值"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ slot="label"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>线指标值</span>
|
|
|
+ <el-tooltip
|
|
|
+ content="添加线指标值"
|
|
|
+ placement="bottom-start"
|
|
|
+ v-if="curEdit.type !== 'pareto'"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ @click="handleMetrics('line')"
|
|
|
+ class="el-icon-circle-plus-outline"
|
|
|
+ style="font-size: 20px"
|
|
|
+ ></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <template v-for="(item, ind) in formLabelAlign.LineYdata">
|
|
|
+ <div class="attributeItemData">
|
|
|
+ <el-select
|
|
|
+ style="margin: 5px 0"
|
|
|
+ :key="ind + 'select' + 'zhibiao'"
|
|
|
+ v-model="formLabelAlign.LineYdata[ind].id"
|
|
|
+ placeholder="请先进行数据配置"
|
|
|
+ :disabled="disabled"
|
|
|
+ @change="handleYdata(ind, 'line')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in selectData"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.id"
|
|
|
+ :key="item.id + ind"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-tooltip
|
|
|
+ v-if="curEdit.type !== 'pareto'"
|
|
|
+ :content="
|
|
|
+ formLabelAlign.LineYdata.length <= 1
|
|
|
+ ? '该指标不可删除，最少存在一组指标'
|
|
|
+ : '删除该指标'
|
|
|
+ "
|
|
|
+ placement="bottom-start"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ :disabled="formLabelAlign.LineYdata.length <= 1"
|
|
|
+ @click="removeYdata(ind, 'line')"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="el-icon-delete"
|
|
|
+ style="font-size: 16px; color: red; padding: 0 0 0 10px"
|
|
|
+ ></i
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="curEdit.type === 'pareto'" label="柱纬度标签">
|
|
|
+ <div
|
|
|
+ slot="label"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>柱纬度标签</span>
|
|
|
+ <el-tooltip
|
|
|
+ content="添加纬度"
|
|
|
+ placement="bottom-start"
|
|
|
+ v-if="curEdit.type !== 'pareto'"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ @click="
|
|
|
+ formLabelAlign.BarXdata.push({ label: '', data: [], id: '' })
|
|
|
+ "
|
|
|
+ class="el-icon-circle-plus-outline"
|
|
|
+ style="font-size: 20px"
|
|
|
+ ></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <template v-for="(item, ind) in formLabelAlign.BarXdata">
|
|
|
+ <div class="attributeItemData">
|
|
|
+ <el-select
|
|
|
+ style="margin: 5px 0"
|
|
|
+ :key="ind + 'select'"
|
|
|
+ v-model="formLabelAlign.BarXdata[ind].id"
|
|
|
+ placeholder="请先进行数据配置"
|
|
|
+ :disabled="disabled"
|
|
|
+ @change="handleXdata('bar')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in selectData"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.id"
|
|
|
+ :key="item.id + ind"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-tooltip
|
|
|
+ v-if="curEdit.type !== 'pareto'"
|
|
|
+ :content="
|
|
|
+ formLabelAlign.BarXdata.length <= 1
|
|
|
+ ? '该指标不可删除，最少存在一组指标'
|
|
|
+ : '删除该指标'
|
|
|
+ "
|
|
|
+ placement="bottom-start"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ :disabled="formLabelAlign.BarXdata.length <= 1"
|
|
|
+ @click="removeXdata(ind, 'bar')"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="el-icon-delete"
|
|
|
+ style="font-size: 16px; color: red; padding: 0 0 0 10px"
|
|
|
+ ></i
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="curEdit.type === 'pareto'" label="柱指标值">
|
|
|
+ <div
|
|
|
+ slot="label"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>柱指标值</span>
|
|
|
+ <el-tooltip
|
|
|
+ v-if="curEdit.type !== 'pareto'"
|
|
|
+ content="添加柱指标值"
|
|
|
+ placement="bottom-start"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ @click="handleMetrics('bar')"
|
|
|
+ class="el-icon-circle-plus-outline"
|
|
|
+ style="font-size: 20px"
|
|
|
+ ></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <template v-for="(item, ind) in formLabelAlign.BarYdata">
|
|
|
+ <div class="attributeItemData">
|
|
|
+ <el-select
|
|
|
+ style="margin: 5px 0"
|
|
|
+ :key="ind + 'select' + 'zhibiao'"
|
|
|
+ v-model="formLabelAlign.BarYdata[ind].id"
|
|
|
+ placeholder="请先进行数据配置"
|
|
|
+ :disabled="disabled"
|
|
|
+ @change="handleYdata(ind, 'bar')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in selectData"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.id"
|
|
|
+ :key="item.id + ind"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-tooltip
|
|
|
+ v-if="curEdit.type !== 'pareto'"
|
|
|
+ :content="
|
|
|
+ formLabelAlign.BarYdata.length <= 1
|
|
|
+ ? '该指标不可删除，最少存在一组指标'
|
|
|
+ : '删除该指标'
|
|
|
+ "
|
|
|
+ placement="bottom-start"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ :disabled="formLabelAlign.BarYdata.length <= 1"
|
|
|
+ @click="removeYdata(ind, 'bar')"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="el-icon-delete"
|
|
|
+ style="font-size: 16px; color: red; padding: 0 0 0 10px"
|
|
|
+ ></i
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="curEdit.type === 'Cp'" label="点纬度标签">
|
|
|
+ <div
|
|
|
+ slot="label"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>点纬度标签</span>
|
|
|
+ <el-tooltip content="添加纬度" placement="bottom-start">
|
|
|
+ <i
|
|
|
+ @click="
|
|
|
+ formLabelAlign.ScatterXdata.push({
|
|
|
+ label: '',
|
|
|
+ data: [],
|
|
|
+ id: '',
|
|
|
+ })
|
|
|
+ "
|
|
|
+ class="el-icon-circle-plus-outline"
|
|
|
+ style="font-size: 20px"
|
|
|
+ ></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <template v-for="(item, ind) in formLabelAlign.ScatterXdata">
|
|
|
+ <div class="attributeItemData">
|
|
|
+ <el-select
|
|
|
+ style="margin: 5px 0"
|
|
|
+ :key="ind + 'select'"
|
|
|
+ v-model="formLabelAlign.ScatterXdata[ind].id"
|
|
|
+ placeholder="请先进行数据配置"
|
|
|
+ :disabled="disabled"
|
|
|
+ @change="handleXdata('scatter')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in selectData"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.id"
|
|
|
+ :key="item.id + ind"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-tooltip
|
|
|
+ :content="
|
|
|
+ formLabelAlign.ScatterXdata.length <= 1
|
|
|
+ ? '该指标不可删除，最少存在一组指标'
|
|
|
+ : '删除该指标'
|
|
|
+ "
|
|
|
+ placement="bottom-start"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ :disabled="formLabelAlign.ScatterXdata.length <= 1"
|
|
|
+ @click="removeXdata(ind, 'scatter')"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="el-icon-delete"
|
|
|
+ style="font-size: 16px; color: red; padding: 0 0 0 10px"
|
|
|
+ ></i
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="curEdit.type === 'Cp'" label="点指标值">
|
|
|
+ <div
|
|
|
+ slot="label"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>点指标值</span>
|
|
|
+ <el-tooltip content="添加点指标值" placement="bottom-start">
|
|
|
+ <i
|
|
|
+ @click="handleMetrics('scatter')"
|
|
|
+ class="el-icon-circle-plus-outline"
|
|
|
+ style="font-size: 20px"
|
|
|
+ ></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <template v-for="(item, ind) in formLabelAlign.ScatterYdata">
|
|
|
+ <div class="attributeItemData">
|
|
|
+ <el-select
|
|
|
+ style="margin: 5px 0"
|
|
|
+ :key="ind + 'select' + 'zhibiao'"
|
|
|
+ v-model="formLabelAlign.ScatterYdata[ind].id"
|
|
|
+ placeholder="请先进行数据配置"
|
|
|
+ :disabled="disabled"
|
|
|
+ @change="handleYdata(ind, 'scatter')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in selectData"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.id"
|
|
|
+ :key="item.id + ind"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-tooltip
|
|
|
+ :content="
|
|
|
+ formLabelAlign.ScatterYdata.length <= 1
|
|
|
+ ? '该指标不可删除，最少存在一组指标'
|
|
|
+ : '删除该指标'
|
|
|
+ "
|
|
|
+ placement="bottom-start"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ :disabled="formLabelAlign.ScatterYdata.length <= 1"
|
|
|
+ @click="removeYdata(ind, 'scatter')"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="el-icon-delete"
|
|
|
+ style="font-size: 16px; color: red; padding: 0 0 0 10px"
|
|
|
+ ></i
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="标题名称">
|
|
|
+ <el-input v-model="formLabelAlign.text"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="X轴名称"
|
|
|
+ v-if="
|
|
|
+ curEdit.type !== 'pie' &&
|
|
|
+ curEdit.type !== 'radar' &&
|
|
|
+ curEdit.type !== 'roseChart' &&
|
|
|
+ curEdit.type !== 'sankeyDiagram'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-input v-model="formLabelAlign.Xlable"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Y轴名称"
|
|
|
+ v-if="
|
|
|
+ curEdit.type !== 'pie' &&
|
|
|
+ curEdit.type !== 'radar' &&
|
|
|
+ curEdit.type !== 'roseChart' &&
|
|
|
+ curEdit.type !== 'pareto' &&
|
|
|
+ curEdit.type !== 'sankeyDiagram'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-input v-model="formLabelAlign.Ylable"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="柱Y轴名称" v-if="curEdit.type === 'pareto'">
|
|
|
+ <el-input v-model="formLabelAlign.YRightLable"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="线Y轴名称" v-if="curEdit.type === 'pareto'">
|
|
|
+ <el-input v-model="formLabelAlign.YLeftLable"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div style="margin: 20px 0">
|
|
|
+ <el-divider style="height: 2px"></el-divider>
|
|
|
+ </div>
|
|
|
+ <el-collapse
|
|
|
+ v-if="filteredYData.length > 0 && filteredYData[0].data.length > 0"
|
|
|
+ >
|
|
|
+ <el-collapse-item
|
|
|
+ v-for="(itemFilter, filterInd) in filteredYData"
|
|
|
+ :title="itemFilter.label || `数据筛选`"
|
|
|
+ :name="itemFilter.id"
|
|
|
+ :key="itemFilter.id + filterInd"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ label-position="top"
|
|
|
+ :model="formFilterAlign[filterInd]"
|
|
|
+ size="mini"
|
|
|
+ :ref="`form${filterInd}`"
|
|
|
+ >
|
|
|
+ <el-form-item label="数据筛选">
|
|
|
+ <el-select
|
|
|
+ v-model="formFilterAlign[filterInd].filters"
|
|
|
+ placeholder="请选择数据"
|
|
|
+ multiple
|
|
|
+ clearable
|
|
|
+ collapse-tags
|
|
|
+ class="filterMutiple"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in itemFilter?.data"
|
|
|
+ :label="
|
|
|
+ item[itemFilter?.label] ? `${item[itemFilter?.label]} ` : `0`
|
|
|
+ "
|
|
|
+ :value="item[itemFilter?.label]"
|
|
|
+ :key="item[itemFilter?.label] + '' + index"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="条件过滤">
|
|
|
+ <el-select placeholder="请选择过滤条件" v-model="value">
|
|
|
+ <el-option label="全部" value="all"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="显示值满足以下条件">
|
|
|
+ <el-select
|
|
|
+ clearable
|
|
|
+ v-model="formFilterAlign[filterInd].filterType1"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ v-model="formFilterAlign[filterInd].number1"
|
|
|
+ type="number"
|
|
|
+ ></el-input>
|
|
|
+ <el-radio v-model="formFilterAlign[filterInd].radio" label="1"
|
|
|
+ >或</el-radio
|
|
|
+ >
|
|
|
+ <el-radio v-model="formFilterAlign[filterInd].radio" label="2"
|
|
|
+ >且</el-radio
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ clearable
|
|
|
+ v-model="formFilterAlign[filterInd].filterType2"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ v-model="formFilterAlign[filterInd].number2"
|
|
|
+ type="number"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapState, mapMutations } from "vuex";
|
|
|
+import {
|
|
|
+ handleBarChartLogic,
|
|
|
+ handleScatterChartLogic,
|
|
|
+ handleRadarChartLogic,
|
|
|
+ handleCpChartLogic,
|
|
|
+ handleRoseChartChartLogic,
|
|
|
+ handlePieChartLogic,
|
|
|
+ handlestackedBarChartLogic,
|
|
|
+ handleParetoChartLogic,
|
|
|
+ handleBoxPlotChartLogic,
|
|
|
+ handleSankeyDiagramPlotChartLogic,
|
|
|
+ handleHeatmapPlotChartLogic,
|
|
|
+} from "./chartLogic/index";
|
|
|
+import Vue from "vue";
|
|
|
+import { constructNow } from "date-fns";
|
|
|
+export default {
|
|
|
+ name: "toolbox",
|
|
|
+ props: {
|
|
|
+ curEdit: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({
|
|
|
+ option: {
|
|
|
+ title: { text: "" },
|
|
|
+ xAxis: { name: "" },
|
|
|
+ yAxis: { name: "" },
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ value: "all",
|
|
|
+ checkList: [],
|
|
|
+ formFilterAlign: [
|
|
|
+ {
|
|
|
+ filters: [],
|
|
|
+ filterType1: "",
|
|
|
+ number1: null,
|
|
|
+ filterType2: "",
|
|
|
+ number2: null,
|
|
|
+ radio: null,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: "<",
|
|
|
+ label: "小于",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: ">",
|
|
|
+ label: "大于",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "=",
|
|
|
+ label: "等于",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ formLabelAlign: {
|
|
|
+ ScatterXdata: [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ScatterYdata: [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ LineXdata: [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ LineYdata: [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ BarXdata: [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ BarYdata: [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ Xdata: [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ Ydata: [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ text: "",
|
|
|
+ Xlable: "",
|
|
|
+ Ylable: "",
|
|
|
+ YRightLable: "",
|
|
|
+ YLeftLable: "",
|
|
|
+ },
|
|
|
+ disabled: true,
|
|
|
+ selectData: [], //可选择的数据
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState("dragChart", {
|
|
|
+ currentChartList: "currentChartList",
|
|
|
+ dataBaseCheckList: "dataBaseCheckList",
|
|
|
+ }),
|
|
|
+ filteredYData() {
|
|
|
+ const { type } = this.curEdit;
|
|
|
+ const { BarYdata, LineYdata, ScatterYdata, Ydata } = this.formLabelAlign;
|
|
|
+ if (type === "pareto") {
|
|
|
+ return [...LineYdata, ...BarYdata];
|
|
|
+ } else if (type === "Cp") {
|
|
|
+ return [...LineYdata, ...ScatterYdata];
|
|
|
+ } else if (
|
|
|
+ [
|
|
|
+ "bar",
|
|
|
+ "line",
|
|
|
+ "radar",
|
|
|
+ "scatter",
|
|
|
+ "pie",
|
|
|
+ "roseChart",
|
|
|
+ "stackedBar",
|
|
|
+ "boxPlot",
|
|
|
+ "sankeyDiagram",
|
|
|
+ "Heatmap",
|
|
|
+ ].includes(type)
|
|
|
+ ) {
|
|
|
+ return Ydata;
|
|
|
+ }
|
|
|
+ return []; // 默认返回空数组
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ curEdit() {
|
|
|
+ this.changeData();
|
|
|
+ },
|
|
|
+ formLabelAlign: {
|
|
|
+ handler(nval) {
|
|
|
+ this.changeChart("filter");
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ formFilterAlign: {
|
|
|
+ handler(nval) {
|
|
|
+ this.changeChart("filter");
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ dataBaseCheckList: {
|
|
|
+ handler(newVal) {
|
|
|
+ this.disabled = newVal.length === 0 ? true : false;
|
|
|
+ const objData = newVal.map((item) => item.fileObj);
|
|
|
+
|
|
|
+ const flattenedArray = objData.reduce((acc, subArray) => {
|
|
|
+ return acc.concat(subArray);
|
|
|
+ }, []);
|
|
|
+ this.selectData = flattenedArray;
|
|
|
+ },
|
|
|
+ immediate: true, // 组件加载时立即检查
|
|
|
+ deep: true, // 深度监听
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations("dragChart", [
|
|
|
+ "updateChart",
|
|
|
+ "setCurEdit",
|
|
|
+ "setFormFilterAlignData",
|
|
|
+ ]),
|
|
|
+ handleLatitude(type) {
|
|
|
+ switch (type) {
|
|
|
+ case "init":
|
|
|
+ if (
|
|
|
+ (this.curEdit.type === "sankeyDiagram" ||
|
|
|
+ this.curEdit.type === "Heatmap") &&
|
|
|
+ this.formLabelAlign.Xdata.length >= 2
|
|
|
+ ) {
|
|
|
+ this.$message.warning(
|
|
|
+ "纬度请根据上方红色字提示的进行添加且只能添加两个纬度标签"
|
|
|
+ );
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.formLabelAlign.Xdata.push({ label: "", data: [], id: "" });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleMetrics(type) {
|
|
|
+ switch (type) {
|
|
|
+ case "init":
|
|
|
+ if (
|
|
|
+ this.curEdit.type === "boxPlot" &&
|
|
|
+ this.formLabelAlign.Ydata.length >= 5
|
|
|
+ ) {
|
|
|
+ this.$message.warning(
|
|
|
+ "箱线图指标只允许添加最小值, Q1, 中位数, Q3, 最大值几位"
|
|
|
+ );
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.formLabelAlign.Ydata.push({ label: "", data: [], id: "" });
|
|
|
+ this.formFilterAlign.push({
|
|
|
+ filters: [],
|
|
|
+ filterType1: "",
|
|
|
+ number1: null,
|
|
|
+ filterType2: "",
|
|
|
+ number2: null,
|
|
|
+ radio: null,
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case "bar":
|
|
|
+ this.formLabelAlign.BarYdata.push({ label: "", data: [], id: "" });
|
|
|
+ this.formFilterAlign.push({
|
|
|
+ filters: [],
|
|
|
+ filterType1: "",
|
|
|
+ number1: null,
|
|
|
+ filterType2: "",
|
|
|
+ number2: null,
|
|
|
+ radio: null,
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case "line":
|
|
|
+ this.formLabelAlign.LineYdata.push({ label: "", data: [], id: "" });
|
|
|
+ this.formFilterAlign.push({
|
|
|
+ filters: [],
|
|
|
+ filterType1: "",
|
|
|
+ number1: null,
|
|
|
+ filterType2: "",
|
|
|
+ number2: null,
|
|
|
+ radio: null,
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case "scatter":
|
|
|
+ this.formLabelAlign.ScatterYdata.push({
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ });
|
|
|
+ this.formFilterAlign.push({
|
|
|
+ filters: [],
|
|
|
+ filterType1: "",
|
|
|
+ number1: null,
|
|
|
+ filterType2: "",
|
|
|
+ number2: null,
|
|
|
+ radio: null,
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //纬度轴 处理整合数据
|
|
|
+ handleXdata(type) {
|
|
|
+ switch (type) {
|
|
|
+ case "init":
|
|
|
+ this.formLabelAlign.Xdata = this.updateAxisData(
|
|
|
+ this.formLabelAlign.Xdata
|
|
|
+ );
|
|
|
+ break;
|
|
|
+ case "bar":
|
|
|
+ this.formLabelAlign.BarXdata = this.updateAxisData(
|
|
|
+ this.formLabelAlign.BarXdata
|
|
|
+ );
|
|
|
+ break;
|
|
|
+ case "line":
|
|
|
+ this.formLabelAlign.LineXdata = this.updateAxisData(
|
|
|
+ this.formLabelAlign.LineXdata
|
|
|
+ );
|
|
|
+ break;
|
|
|
+ case "scatter":
|
|
|
+ this.formLabelAlign.ScatterXdata = this.updateAxisData(
|
|
|
+ this.formLabelAlign.ScatterXdata
|
|
|
+ );
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //指标值 处理整合数据
|
|
|
+ handleYdata(ind, type) {
|
|
|
+ switch (type) {
|
|
|
+ case "init":
|
|
|
+ this.formLabelAlign.Ydata = this.updateAxisData(
|
|
|
+ this.formLabelAlign.Ydata
|
|
|
+ );
|
|
|
+ break;
|
|
|
+ case "bar":
|
|
|
+ this.formLabelAlign.BarYdata = this.updateAxisData(
|
|
|
+ this.formLabelAlign.BarYdata
|
|
|
+ );
|
|
|
+ break;
|
|
|
+ case "line":
|
|
|
+ this.formLabelAlign.LineYdata = this.updateAxisData(
|
|
|
+ this.formLabelAlign.LineYdata
|
|
|
+ );
|
|
|
+ break;
|
|
|
+ case "scatter":
|
|
|
+ this.formLabelAlign.ScatterYdata = this.updateAxisData(
|
|
|
+ this.formLabelAlign.ScatterYdata
|
|
|
+ );
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.formFilterAlign.forEach((item, index) => {
|
|
|
+ if (ind === index) {
|
|
|
+ {
|
|
|
+ item.filters = [];
|
|
|
+ item.filterType1 = "";
|
|
|
+ item.number1 = null;
|
|
|
+ item.filterType2 = "";
|
|
|
+ item.number2 = null;
|
|
|
+ item.radio = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ updateAxisData(axisData) {
|
|
|
+ axisData.forEach((item, index) => {
|
|
|
+ let selected = this.selectData.find(
|
|
|
+ (val) => (val && val.id) === (item && item.id)
|
|
|
+ );
|
|
|
+
|
|
|
+ if (selected) {
|
|
|
+ this.dataBaseCheckList.map((baseItem) => {
|
|
|
+ if (selected.parentId === baseItem.parentId) {
|
|
|
+ selected.fileData = baseItem.fileData.map((baseObj) => ({
|
|
|
+ [selected.label]: baseObj[selected.label],
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ Vue.set(axisData, index, {
|
|
|
+ ...item,
|
|
|
+ label: selected.label || "",
|
|
|
+ data: selected.fileData || [],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return axisData;
|
|
|
+ },
|
|
|
+ removeYdata(index, type) {
|
|
|
+ const { BarYdata, LineYdata, ScatterYdata, Ydata } = this.formLabelAlign;
|
|
|
+ switch (type) {
|
|
|
+ case "init":
|
|
|
+ this.formLabelAlign.Ydata.splice(index, 1); // 删除当前项
|
|
|
+ break;
|
|
|
+ case "bar":
|
|
|
+ this.formLabelAlign.BarYdata.splice(index, 1); // 删除当前项
|
|
|
+ break;
|
|
|
+ case "line":
|
|
|
+ this.formLabelAlign.LineYdata.splice(index, 1); // 删除当前项
|
|
|
+ if (this.curEdit.type === "Cp") {
|
|
|
+ this.formFilterAlign.splice(index, 1);
|
|
|
+ }
|
|
|
+ //这里需要处理this.formFilterAlign.filter(item)
|
|
|
+ break;
|
|
|
+ case "scatter":
|
|
|
+ if (this.curEdit.type === "Cp") {
|
|
|
+ this.formFilterAlign.splice(
|
|
|
+ this.formLabelAlign.LineYdata.length + index,
|
|
|
+ 1
|
|
|
+ );
|
|
|
+ }
|
|
|
+ this.formLabelAlign.ScatterYdata.splice(index, 1); // 删除当前项
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ removeXdata(index, type) {
|
|
|
+ switch (type) {
|
|
|
+ case "init":
|
|
|
+ this.formLabelAlign.Xdata.splice(index, 1); // 删除当前项
|
|
|
+ break;
|
|
|
+ case "bar":
|
|
|
+ this.formLabelAlign.BarXdata.splice(index, 1); // 删除当前项
|
|
|
+ break;
|
|
|
+ case "line":
|
|
|
+ this.formLabelAlign.LineXdata.splice(index, 1); // 删除当前项
|
|
|
+ break;
|
|
|
+ case "scatter":
|
|
|
+ this.formLabelAlign.ScatterXdata.splice(index, 1); // 删除当前项
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeData() {
|
|
|
+ if (this.$refs.form) {
|
|
|
+ this.$refs.form.resetFields();
|
|
|
+ }
|
|
|
+ // 图表内容回显图表配置赋值
|
|
|
+ if (this.curEdit && this.curEdit.option) {
|
|
|
+ // 使用 this.$set 替代直接赋值
|
|
|
+ this.$set(this, "formLabelAlign", {
|
|
|
+ text: this.curEdit.option.title?.text || "",
|
|
|
+ Xlable: this.curEdit.option.xAxis?.name || "",
|
|
|
+ Ylable: this.curEdit.option.yAxis?.name || "",
|
|
|
+ YRightLable:
|
|
|
+ this.curEdit.type === "pareto"
|
|
|
+ ? this.curEdit.option.yAxis[1].name
|
|
|
+ : "",
|
|
|
+ YLeftLable:
|
|
|
+ this.curEdit.type === "pareto"
|
|
|
+ ? this.curEdit.option.yAxis[0].name
|
|
|
+ : "",
|
|
|
+ Xdata:
|
|
|
+ this.curEdit.Xdata.length > 0
|
|
|
+ ? this.curEdit.Xdata
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ Ydata:
|
|
|
+ this.curEdit.Ydata.length > 0
|
|
|
+ ? this.curEdit.Ydata
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ BarXdata:
|
|
|
+ this.curEdit.BarXdata.length > 0
|
|
|
+ ? this.curEdit.BarXdata
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ BarYdata:
|
|
|
+ this.curEdit.BarYdata.length > 0
|
|
|
+ ? this.curEdit.BarYdata
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ LineXdata:
|
|
|
+ this.curEdit.LineXdata.length > 0
|
|
|
+ ? this.curEdit.LineXdata
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ LineYdata:
|
|
|
+ this.curEdit.LineYdata.length > 0
|
|
|
+ ? this.curEdit.LineYdata
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ScatterXdata:
|
|
|
+ this.curEdit.ScatterXdata.length > 0
|
|
|
+ ? this.curEdit.ScatterXdata
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ScatterYdata:
|
|
|
+ this.curEdit.ScatterYdata.length > 0
|
|
|
+ ? this.curEdit.ScatterYdata
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ data: [],
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ // 查找是否存在数据
|
|
|
+ const index = this.currentChartList.findIndex(
|
|
|
+ (item) => item.id === this.curEdit.id
|
|
|
+ );
|
|
|
+ if (index !== -1) {
|
|
|
+ this.$set(
|
|
|
+ this,
|
|
|
+ "formFilterAlign",
|
|
|
+ this.curEdit.formFilterAlignData.length > 0
|
|
|
+ ? this.curEdit.formFilterAlignData
|
|
|
+ : this.curEdit.type === "Cp" || this.curEdit.type === "pareto"
|
|
|
+ ? [
|
|
|
+ {
|
|
|
+ filters: [],
|
|
|
+ filterType1: "",
|
|
|
+ number1: null,
|
|
|
+ filterType2: "",
|
|
|
+ number2: null,
|
|
|
+ radio: null,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ filters: [],
|
|
|
+ filterType1: "",
|
|
|
+ number1: null,
|
|
|
+ filterType2: "",
|
|
|
+ number2: null,
|
|
|
+ radio: null,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ filters: [],
|
|
|
+ filterType1: "",
|
|
|
+ number1: null,
|
|
|
+ filterType2: "",
|
|
|
+ number2: null,
|
|
|
+ radio: null,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ this.$set(
|
|
|
+ this,
|
|
|
+ "formFilterAlign",
|
|
|
+ this.curEdit.type === "Cp" || this.curEdit.type === "pareto"
|
|
|
+ ? [
|
|
|
+ {
|
|
|
+ filters: [],
|
|
|
+ filterType1: "",
|
|
|
+ number1: null,
|
|
|
+ filterType2: "",
|
|
|
+ number2: null,
|
|
|
+ radio: null,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ filters: [],
|
|
|
+ filterType1: "",
|
|
|
+ number1: null,
|
|
|
+ filterType2: "",
|
|
|
+ number2: null,
|
|
|
+ radio: null,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ filters: [],
|
|
|
+ filterType1: "",
|
|
|
+ number1: null,
|
|
|
+ filterType2: "",
|
|
|
+ number2: null,
|
|
|
+ radio: null,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ );
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.warning("请选择一个图表进行编辑");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //全部数据渲染
|
|
|
+ changeChart(isFilter) {
|
|
|
+ if (!this.curEdit?.option) return; // 确保 curEdit 和 option 存在
|
|
|
+ const item = JSON.parse(JSON.stringify(this.curEdit));
|
|
|
+ if (this.curEdit.type === "scatter" || this.curEdit.type === "radar") {
|
|
|
+ //判断散点选择的是否为number 或可转为number
|
|
|
+ const isAllNumbers = (data) =>
|
|
|
+ data.every((val) =>
|
|
|
+ val.data.every((vals) => {
|
|
|
+ return !isNaN(
|
|
|
+ Number(vals[val.label] == undefined ? 0 : vals[val.label])
|
|
|
+ );
|
|
|
+ })
|
|
|
+ );
|
|
|
+ const isAllNumbersXdata = isAllNumbers(this.formLabelAlign.Xdata);
|
|
|
+ const isAllNumbersYdata = isAllNumbers(this.formLabelAlign.Ydata);
|
|
|
+ if (
|
|
|
+ this.curEdit.type === "scatter" &&
|
|
|
+ (!isAllNumbersXdata || !isAllNumbersYdata)
|
|
|
+ ) {
|
|
|
+ this.$message.warning("请选择数值项进行散点图绘制");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.curEdit.type === "radar" && !isAllNumbersYdata) {
|
|
|
+ this.$message.warning("指标值请选择数值项进行散点图绘制");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 确保标题和坐标轴对象存在
|
|
|
+ item.option.title = item.option.title || {};
|
|
|
+ Object.assign(item.option.title, { text: this.formLabelAlign.text });
|
|
|
+ if (this.curEdit.type === "bar" || this.curEdit.type === "line") {
|
|
|
+ handleBarChartLogic(
|
|
|
+ item,
|
|
|
+ this.formLabelAlign,
|
|
|
+ this.formFilterAlign,
|
|
|
+ isFilter,
|
|
|
+ this.curEdit.type
|
|
|
+ );
|
|
|
+ } else if (this.curEdit.type === "scatter") {
|
|
|
+ handleScatterChartLogic(
|
|
|
+ item,
|
|
|
+ this.formLabelAlign,
|
|
|
+ this.formFilterAlign,
|
|
|
+ isFilter,
|
|
|
+ this.curEdit.type
|
|
|
+ );
|
|
|
+ } else if (this.curEdit.type === "radar") {
|
|
|
+ handleRadarChartLogic(
|
|
|
+ item,
|
|
|
+ this.formLabelAlign,
|
|
|
+ this.formFilterAlign,
|
|
|
+ isFilter,
|
|
|
+ this.curEdit.type
|
|
|
+ );
|
|
|
+ } else if (this.curEdit.type === "Cp") {
|
|
|
+ handleCpChartLogic(
|
|
|
+ item,
|
|
|
+ this.formLabelAlign,
|
|
|
+ this.formFilterAlign,
|
|
|
+ isFilter,
|
|
|
+ this.curEdit.type
|
|
|
+ );
|
|
|
+ } else if (this.curEdit.type === "roseChart") {
|
|
|
+ handleRoseChartChartLogic(
|
|
|
+ item,
|
|
|
+ this.formLabelAlign,
|
|
|
+ this.formFilterAlign,
|
|
|
+ isFilter,
|
|
|
+ this.curEdit.type
|
|
|
+ );
|
|
|
+ } else if (this.curEdit.type === "pie") {
|
|
|
+ handlePieChartLogic(
|
|
|
+ item,
|
|
|
+ this.formLabelAlign,
|
|
|
+ this.formFilterAlign,
|
|
|
+ isFilter,
|
|
|
+ this.curEdit.type
|
|
|
+ );
|
|
|
+ } else if (this.curEdit.type === "stackedBar") {
|
|
|
+ handlestackedBarChartLogic(
|
|
|
+ item,
|
|
|
+ this.formLabelAlign,
|
|
|
+ this.formFilterAlign,
|
|
|
+ isFilter,
|
|
|
+ this.curEdit.type
|
|
|
+ );
|
|
|
+ } else if (this.curEdit.type === "pareto") {
|
|
|
+ handleParetoChartLogic(
|
|
|
+ item,
|
|
|
+ this.formLabelAlign,
|
|
|
+ this.formFilterAlign,
|
|
|
+ isFilter,
|
|
|
+ this.curEdit.type
|
|
|
+ );
|
|
|
+ } else if (this.curEdit.type === "boxPlot") {
|
|
|
+ handleBoxPlotChartLogic(
|
|
|
+ item,
|
|
|
+ this.formLabelAlign,
|
|
|
+ this.formFilterAlign,
|
|
|
+ isFilter,
|
|
|
+ this.curEdit.type
|
|
|
+ );
|
|
|
+ } else if (this.curEdit.type === "sankeyDiagram") {
|
|
|
+ handleSankeyDiagramPlotChartLogic(
|
|
|
+ item,
|
|
|
+ this.formLabelAlign,
|
|
|
+ this.formFilterAlign,
|
|
|
+ isFilter,
|
|
|
+ this.curEdit.type
|
|
|
+ );
|
|
|
+ } else if (this.curEdit.type === "Heatmap") {
|
|
|
+ handleHeatmapPlotChartLogic(
|
|
|
+ item,
|
|
|
+ this.formLabelAlign,
|
|
|
+ this.formFilterAlign,
|
|
|
+ isFilter,
|
|
|
+ this.curEdit.type
|
|
|
+ );
|
|
|
+ }
|
|
|
+ //设置仓库
|
|
|
+ this.setFormFilterAlignData({
|
|
|
+ id: this.curEdit.id,
|
|
|
+ data: JSON.parse(JSON.stringify(this.formFilterAlign)),
|
|
|
+ });
|
|
|
+ this.updateChart({
|
|
|
+ ...item,
|
|
|
+ LineYdata: this.formLabelAlign.LineYdata,
|
|
|
+ ScatterYdata: this.formLabelAlign.ScatterYdata,
|
|
|
+ BarYdata: this.formLabelAlign.BarYdata,
|
|
|
+ Ydata: this.formLabelAlign.Ydata, //还是给所有的数据保存起来了，并不是过滤后的数据
|
|
|
+ formFilterAlignData: this.formFilterAlign,
|
|
|
+ }); // 更新图表
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+::v-deep .el-form-item {
|
|
|
+ width: 100% !important;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ .el-form-item__label {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+ .attributeItemData {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-divider--horizontal {
|
|
|
+ height: 2px;
|
|
|
+}
|
|
|
+::v-deep .filterMutiple .el-select__tags-text {
|
|
|
+ max-width: 40px !important;
|
|
|
+}
|
|
|
+</style>
|
liujiejie
