|
|
|
|
@ -272,49 +272,59 @@
|
|
|
|
|
以分析表的商品名称为X轴，销售额为左侧Y轴，累计销售额占比为右侧Y轴绘制帕累托图。
|
|
|
|
|
</span>
|
|
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="step5Data"
|
|
|
|
|
style="width: 680px"
|
|
|
|
|
border
|
|
|
|
|
:header-cell-style="{
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
|
|
}"
|
|
|
|
|
<div id="echarts" style="width: 500px; height: 400px"></div>
|
|
|
|
|
<div class="submit" @click="step5Submit">提交</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chartXData">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="chartParam1"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
style="width: 85px"
|
|
|
|
|
class="XdataItem"
|
|
|
|
|
size="small"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="" align="center" prop="title" />
|
|
|
|
|
<el-table-column label="R值打分" align="center">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params1"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 100px"
|
|
|
|
|
<el-option :label="'男士配饰'" :value="'男士配饰'" />
|
|
|
|
|
<el-option :label="'床上用品'" :value="'床上用品'" />
|
|
|
|
|
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
|
|
|
|
|
<el-option :label="'儿童服装'" :value="'儿童服装'" />
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="chartParam2"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
style="width: 85px"
|
|
|
|
|
class="XdataItem"
|
|
|
|
|
size="small"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="F值打分" align="center">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params2"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 100px"
|
|
|
|
|
<el-option :label="'男士配饰'" :value="'男士配饰'" />
|
|
|
|
|
<el-option :label="'床上用品'" :value="'床上用品'" />
|
|
|
|
|
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
|
|
|
|
|
<el-option :label="'儿童服装'" :value="'儿童服装'" />
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="chartParam3"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
style="width: 85px"
|
|
|
|
|
class="XdataItem"
|
|
|
|
|
size="small"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="M值打分" align="center">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params3"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 100px"
|
|
|
|
|
<el-option :label="'男士配饰'" :value="'男士配饰'" />
|
|
|
|
|
<el-option :label="'床上用品'" :value="'床上用品'" />
|
|
|
|
|
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
|
|
|
|
|
<el-option :label="'儿童服装'" :value="'儿童服装'" />
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="chartParam4"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
style="width: 85px"
|
|
|
|
|
class="XdataItem"
|
|
|
|
|
size="small"
|
|
|
|
|
@change="selectChange"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div class="submit">提交</div>
|
|
|
|
|
<el-option :label="'男士配饰'" :value="'男士配饰'" />
|
|
|
|
|
<el-option :label="'床上用品'" :value="'床上用品'" />
|
|
|
|
|
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
|
|
|
|
|
<el-option :label="'儿童服装'" :value="'儿童服装'" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
@ -364,11 +374,13 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
import popModal from "@/views/components/popModal.vue";
|
|
|
|
|
import { getUserInfo } from "@/utils/auth";
|
|
|
|
|
import * as portraitModel from "@/api/portraitModel";
|
|
|
|
|
import { downBlobFile } from "@/utils/index.js";
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
|
|
|
|
const dialogVisible = ref(false);
|
|
|
|
|
const knowledgeFlag = ref(false);
|
|
|
|
|
const errorNum = ref(0);
|
|
|
|
|
@ -376,10 +388,16 @@ const step1Error = ref(0);
|
|
|
|
|
const step2Error = ref(0);
|
|
|
|
|
const step3Error = ref(0);
|
|
|
|
|
const step4Error = ref(0);
|
|
|
|
|
const step5Error = ref(0);
|
|
|
|
|
const step1AnswerFlag = ref(false);
|
|
|
|
|
const step2AnswerFlag = ref(false);
|
|
|
|
|
const step3AnswerFlag = ref(false);
|
|
|
|
|
const step4AnswerFlag = ref(false);
|
|
|
|
|
const step5AnswerFlag = ref(false);
|
|
|
|
|
const chartParam1 = ref("");
|
|
|
|
|
const chartParam2 = ref("");
|
|
|
|
|
const chartParam3 = ref("");
|
|
|
|
|
const chartParam4 = ref("");
|
|
|
|
|
const step1Data = ref([
|
|
|
|
|
{
|
|
|
|
|
name: "男士配饰",
|
|
|
|
|
@ -601,7 +619,96 @@ onBeforeUnmount(() => {
|
|
|
|
|
});
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getData();
|
|
|
|
|
initCharts();
|
|
|
|
|
});
|
|
|
|
|
const initCharts = () => {
|
|
|
|
|
var chartDom = document.getElementById("echarts");
|
|
|
|
|
var myChart = echarts.init(chartDom, "dark");
|
|
|
|
|
var option;
|
|
|
|
|
|
|
|
|
|
option = {
|
|
|
|
|
title: {
|
|
|
|
|
text: "帕累托图",
|
|
|
|
|
left: "center",
|
|
|
|
|
top: "10px",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
// fontSize:16
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: "cross",
|
|
|
|
|
crossStyle: {
|
|
|
|
|
color: "#999",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
data: ["销售额", "累计销售占比"],
|
|
|
|
|
bottom: 5,
|
|
|
|
|
},
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
show: false,
|
|
|
|
|
type: "category",
|
|
|
|
|
data: ["", "", "", ""],
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: "shadow",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: "value",
|
|
|
|
|
name: "销售额",
|
|
|
|
|
// min: 0,
|
|
|
|
|
// max: 250,
|
|
|
|
|
// interval: 50,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: "{value}",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: "value",
|
|
|
|
|
name: "累计销售占比",
|
|
|
|
|
min: 0,
|
|
|
|
|
max: 120,
|
|
|
|
|
interval: 20,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: "{value} %",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: "销售额",
|
|
|
|
|
type: "bar",
|
|
|
|
|
tooltip: {
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
return value + " 元";
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: [5900, 2400, 1100, 600],
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
name: "累计销售占比",
|
|
|
|
|
type: "line",
|
|
|
|
|
yAxisIndex: 1,
|
|
|
|
|
tooltip: {
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
return value + " %";
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: [59, 83, 94, 100],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
|
};
|
|
|
|
|
const moveUp = (index, row) => {
|
|
|
|
|
console.log("上移", index, row);
|
|
|
|
|
if (index > 0) {
|
|
|
|
|
@ -624,14 +731,15 @@ const moveDown = (index, row) => {
|
|
|
|
|
};
|
|
|
|
|
const downloadData = () => {
|
|
|
|
|
// console.log(666);
|
|
|
|
|
portraitModel
|
|
|
|
|
.downloadDataByABC({})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
// console.log(res,'--');
|
|
|
|
|
const blob = new Blob([res], { type: "application/vnd.ms-excel" });
|
|
|
|
|
downBlobFile(`案例数据-帕累托分析`, blob);
|
|
|
|
|
})
|
|
|
|
|
.catch((error) => {});
|
|
|
|
|
// portraitModel
|
|
|
|
|
// .downloadDataByABC({})
|
|
|
|
|
// .then((res) => {
|
|
|
|
|
// // console.log(res,'--');
|
|
|
|
|
// const blob = new Blob([res], { type: "application/vnd.ms-excel" });
|
|
|
|
|
// downBlobFile(`案例数据-帕累托分析`, blob);
|
|
|
|
|
// })
|
|
|
|
|
// .catch((error) => {});
|
|
|
|
|
window.open(baseUrl + "/api/downDataByUserPortrait/analysisByPareto");
|
|
|
|
|
};
|
|
|
|
|
const step1Submit = () => {
|
|
|
|
|
step1Error.value = 0;
|
|
|
|
|
@ -753,6 +861,33 @@ const step4Submit = () => {
|
|
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
|
|
step4AnswerFlag.value = true;
|
|
|
|
|
};
|
|
|
|
|
const step5Submit = () => {
|
|
|
|
|
step5Error.value = 0;
|
|
|
|
|
if (
|
|
|
|
|
chartParam1.value == "" ||
|
|
|
|
|
chartParam2.value == "" ||
|
|
|
|
|
chartParam3.value == "" ||
|
|
|
|
|
chartParam4.value == ""
|
|
|
|
|
) {
|
|
|
|
|
proxy.$modal.msgError("请先完成所有填空");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (chartParam1.value != "男士配饰") {
|
|
|
|
|
step5Error.value++;
|
|
|
|
|
}
|
|
|
|
|
if (chartParam2.value != "床上用品") {
|
|
|
|
|
step5Error.value++;
|
|
|
|
|
}
|
|
|
|
|
if (chartParam3.value != "婴儿用品") {
|
|
|
|
|
step5Error.value++;
|
|
|
|
|
}
|
|
|
|
|
if (chartParam4.value != "儿童服装") {
|
|
|
|
|
step5Error.value++;
|
|
|
|
|
}
|
|
|
|
|
console.log("错误数", step5Error.value);
|
|
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
|
|
step5AnswerFlag.value = true;
|
|
|
|
|
};
|
|
|
|
|
const saveData = () => {
|
|
|
|
|
const params = {
|
|
|
|
|
stepFiveA: step1Data.value[0].params,
|
|
|
|
|
@ -855,6 +990,10 @@ const getData = () => {
|
|
|
|
|
})
|
|
|
|
|
.catch((error) => {});
|
|
|
|
|
};
|
|
|
|
|
const selectChange = (item) => {
|
|
|
|
|
// console.log(22);
|
|
|
|
|
// initCharts();
|
|
|
|
|
};
|
|
|
|
|
const submitData = () => {
|
|
|
|
|
console.log("tj");
|
|
|
|
|
if (
|
|
|
|
|
@ -987,6 +1126,14 @@ defineExpose({
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.chartXData {
|
|
|
|
|
position: relative;
|
|
|
|
|
top: -58px;
|
|
|
|
|
left: 60px;
|
|
|
|
|
.XdataItem {
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.line {
|
|
|
|
|
width: 1400px;
|
|
|
|
|
|
HeHaonan
2 years ago