|
|
|
|
@ -95,7 +95,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div class="submit">提交</div>
|
|
|
|
|
<div class="submit" @click="step1Submit">提交</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
@ -121,11 +121,29 @@
|
|
|
|
|
<el-table-column label="客户ID" align="center" prop="name">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="消费次数" align="center" prop="amount">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params1"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 130px"
|
|
|
|
|
v-if="scope.$index == 4"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="消费金额" align="center" prop="account">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params2"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 130px"
|
|
|
|
|
v-if="scope.$index == 4"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div class="submit">提交</div>
|
|
|
|
|
<div class="submit" @click="step2Submit">提交</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
@ -138,7 +156,36 @@
|
|
|
|
|
以消费金额为纵轴，消费次数为横轴，将第一步的客户数据绘制于坐标轴中
|
|
|
|
|
</span>
|
|
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
|
|
<div class="submit">提交</div>
|
|
|
|
|
<div id="charts1" style="width: 500px; height: 400px"></div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="submit" @click="step3Submit">提交</div>
|
|
|
|
|
<div class="drawPoint">
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div class="pointItem" @click="drawPoint('A', '#009FF1')">
|
|
|
|
|
绘制A
|
|
|
|
|
</div>
|
|
|
|
|
<span>（3,800）</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div class="pointItem" @click="drawPoint('B', '#FB54A1')">
|
|
|
|
|
绘制B
|
|
|
|
|
</div>
|
|
|
|
|
<span>（4,1200）</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div class="pointItem" @click="drawPoint('C', '#FE8D2A')">
|
|
|
|
|
绘制C
|
|
|
|
|
</div>
|
|
|
|
|
<span>（6,600）</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div class="pointItem" @click="drawPoint('D', '#6E70F0')">
|
|
|
|
|
绘制D
|
|
|
|
|
</div>
|
|
|
|
|
<span>（7,1400）</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
@ -151,41 +198,24 @@
|
|
|
|
|
将计算出的客户的平均消费次数、平均消费金额，绘制在坐标轴中。
|
|
|
|
|
</span>
|
|
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
|
|
<!-- <el-table
|
|
|
|
|
:data="step4Data"
|
|
|
|
|
style="width: 680px"
|
|
|
|
|
border
|
|
|
|
|
:header-cell-style="{
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="商品名称" align="center" prop="data1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="销售额" align="center" prop="data2">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="累计销售额占比（%）"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="data3"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="划分商品类型" align="center" prop="data4">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="scope.row.params"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
style="width: 100px"
|
|
|
|
|
>
|
|
|
|
|
<el-option :label="'A类商品'" :value="'A类商品'" />
|
|
|
|
|
<el-option :label="'B类商品'" :value="'B类商品'" />
|
|
|
|
|
<el-option :label="'C类商品'" :value="'C类商品'" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table> -->
|
|
|
|
|
<div class="submit">提交</div>
|
|
|
|
|
<div id="charts2" style="width: 500px; height: 400px"></div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="submit" @click="step4Submit">提交</div>
|
|
|
|
|
<div class="drawPoint">
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div class="pointItem" @click="drawPointStep4('A', '#009FF1')">
|
|
|
|
|
绘制平均消费次数X,平均消费金额Y
|
|
|
|
|
</div>
|
|
|
|
|
<span>（5,1000）</span>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="point">
|
|
|
|
|
<div class="pointItem" @click="drawPointStep4('Y', '#FB54A1')">
|
|
|
|
|
绘制平均消费金额Y
|
|
|
|
|
</div>
|
|
|
|
|
<span>1000</span>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
@ -202,7 +232,44 @@
|
|
|
|
|
4、消费未达到平均值，消费力度也未达到平均水平的客户：属于瘦狗客户
|
|
|
|
|
</span>
|
|
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
|
|
<div class="submit">提交</div>
|
|
|
|
|
<div id="charts3" style="width: 500px; height: 400px"></div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="submit" @click="step5Submit">提交</div>
|
|
|
|
|
<div class="drawPoint">
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div
|
|
|
|
|
class="pointItem"
|
|
|
|
|
@click="drawQuadrant('明星客户', 'rgba(52, 134, 207, 0.8)')"
|
|
|
|
|
>
|
|
|
|
|
明星客户
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div
|
|
|
|
|
class="pointItem"
|
|
|
|
|
@click="drawQuadrant('现金流客户', 'rgba(0, 184, 105, 0.8)')"
|
|
|
|
|
>
|
|
|
|
|
现金流客户
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div
|
|
|
|
|
class="pointItem"
|
|
|
|
|
@click="drawQuadrant('问题客户', 'rgba(177, 130, 192, 0.8)')"
|
|
|
|
|
>
|
|
|
|
|
问题客户
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div
|
|
|
|
|
class="pointItem"
|
|
|
|
|
@click="drawQuadrant('瘦狗客户', 'rgba(254, 141, 42, 0.8)')"
|
|
|
|
|
>
|
|
|
|
|
瘦狗客户
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
@ -242,8 +309,13 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import { getUserInfo } from '@/utils/auth'
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
import { Chart } from "@antv/g2";
|
|
|
|
|
import * as portraitModel from "@/api/portraitModel";
|
|
|
|
|
import { downBlobFile } from "@/utils/index.js";
|
|
|
|
|
import { onMounted } from "vue";
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
const knowledgeFlag = ref(false);
|
|
|
|
|
const step1Data = ref([
|
|
|
|
|
{
|
|
|
|
|
@ -374,6 +446,7 @@ const step2Data = ref([
|
|
|
|
|
{ name: "B", amount: "4", account: "1200" },
|
|
|
|
|
{ name: "C", amount: "6", account: "600" },
|
|
|
|
|
{ name: "D", amount: "7", account: "1400" },
|
|
|
|
|
{ name: "平均值", amount: "7", account: "1400" },
|
|
|
|
|
]);
|
|
|
|
|
const step3Data = ref([
|
|
|
|
|
{
|
|
|
|
|
@ -512,38 +585,738 @@ const typeData = ref([
|
|
|
|
|
data2: "占总销售额的10%，给予一般关注",
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
const moveUp = (index, row) => {
|
|
|
|
|
console.log("上移", index, row);
|
|
|
|
|
if (index > 0) {
|
|
|
|
|
const upDate = step2Data.value[index - 1];
|
|
|
|
|
step2Data.value.splice(index - 1, 1);
|
|
|
|
|
step2Data.value.splice(index, 0, upDate);
|
|
|
|
|
} else {
|
|
|
|
|
alert("已经是第一条，不可上移");
|
|
|
|
|
//第三步定义数据
|
|
|
|
|
const option = ref({});
|
|
|
|
|
const drawPointName = ref("");
|
|
|
|
|
const drawPointColor = ref("");
|
|
|
|
|
const pointInGrid = ref([]);
|
|
|
|
|
//第四步定义数据
|
|
|
|
|
const option2 = ref({});
|
|
|
|
|
const drawPointNameStep4 = ref("");
|
|
|
|
|
const drawPointColorStep4 = ref("");
|
|
|
|
|
const pointInGridStep4 = ref([]);
|
|
|
|
|
//第五步定义数据
|
|
|
|
|
const optionStep5 = ref({});
|
|
|
|
|
const drawPointNameStep5 = ref("");
|
|
|
|
|
const drawPointColorStep5 = ref("");
|
|
|
|
|
const pointInGridStep5 = ref([]);
|
|
|
|
|
const errorNum = ref(0);
|
|
|
|
|
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);
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
step3EchartInit();
|
|
|
|
|
step4EchartInit();
|
|
|
|
|
step5EchartInit();
|
|
|
|
|
});
|
|
|
|
|
const drawPoint = (point, color) => {
|
|
|
|
|
// console.log(point);
|
|
|
|
|
// let Apoint = point
|
|
|
|
|
// if(Apoint == drawPointName.value){
|
|
|
|
|
// proxy.$modal.msgError("请勿绘制重复的点");
|
|
|
|
|
// return;
|
|
|
|
|
// }
|
|
|
|
|
drawPointName.value = point;
|
|
|
|
|
drawPointColor.value = color;
|
|
|
|
|
// option.value.series[0].data.push(pointInGrid);
|
|
|
|
|
// option.value && myChart.setOption(option.value);
|
|
|
|
|
};
|
|
|
|
|
const drawPointStep4 = (point, color) => {
|
|
|
|
|
drawPointNameStep4.value = point;
|
|
|
|
|
drawPointColorStep4.value = color;
|
|
|
|
|
};
|
|
|
|
|
const step3EchartInit = () => {
|
|
|
|
|
var chartDom = document.getElementById("charts1");
|
|
|
|
|
var myChart = echarts.init(chartDom, "dark");
|
|
|
|
|
// var option;
|
|
|
|
|
|
|
|
|
|
option.value = {
|
|
|
|
|
xAxis: {
|
|
|
|
|
name: "X",
|
|
|
|
|
show: true,
|
|
|
|
|
max: 10,
|
|
|
|
|
min: 0,
|
|
|
|
|
interval: 1,
|
|
|
|
|
axisPointer: {
|
|
|
|
|
show: true,
|
|
|
|
|
label: {
|
|
|
|
|
precision: 0,
|
|
|
|
|
},
|
|
|
|
|
// snap: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
name: "Y",
|
|
|
|
|
show: true,
|
|
|
|
|
interval: 200,
|
|
|
|
|
max: 2000,
|
|
|
|
|
min: 0,
|
|
|
|
|
axisPointer: {
|
|
|
|
|
show: true,
|
|
|
|
|
// snap: true,
|
|
|
|
|
label: {
|
|
|
|
|
precision: 0,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
symbolSize: 20,
|
|
|
|
|
label: {
|
|
|
|
|
show: true, // 显示标签
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
// 自定义显示的文本内容，params是包含数据信息的对象
|
|
|
|
|
return params.data.name;
|
|
|
|
|
},
|
|
|
|
|
position: "top", // 文本位置，可以是 'top', 'left', 'right', 'bottom', 'inside', 或者是 {top, left} 形式的具体位置
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: function (params) {
|
|
|
|
|
// 自定义显示的文本内容，params是包含数据信息的对象
|
|
|
|
|
return params.data.color;
|
|
|
|
|
},
|
|
|
|
|
borderColor: "#fff",
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
// { value: [3, 800], name: "A" },
|
|
|
|
|
// { value: [4, 1200], name: "B" },
|
|
|
|
|
// { value: [6, 600], name: "C" },
|
|
|
|
|
// { value: [7, 1400], name: "D" },
|
|
|
|
|
// { value: [10, 1400], },
|
|
|
|
|
// [4, 1200],
|
|
|
|
|
// [6, 600],
|
|
|
|
|
// [7, 1400],
|
|
|
|
|
],
|
|
|
|
|
type: "scatter",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
option.value && myChart.setOption(option.value);
|
|
|
|
|
myChart.getZr().on("click", function (param) {
|
|
|
|
|
if (drawPointName.value == "") {
|
|
|
|
|
proxy.$modal.msgError("请选择要绘制的点");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const pointInPixel = [param.offsetX, param.offsetY];
|
|
|
|
|
console.log("pointInPixel", pointInPixel);
|
|
|
|
|
// 使用 convertFromPixel方法 转换像素坐标值到逻辑坐标系上的点。获取点击位置对应的x轴数据的索引 值，借助于索引值的获取到其它的信息
|
|
|
|
|
// 转换X轴坐标
|
|
|
|
|
// let pointInGrid = myChart.convertFromPixel(
|
|
|
|
|
// { seriesIndex: 0 },
|
|
|
|
|
// pointInPixel
|
|
|
|
|
// );
|
|
|
|
|
pointInGrid.value = myChart.convertFromPixel(
|
|
|
|
|
{ seriesIndex: 0 },
|
|
|
|
|
pointInPixel
|
|
|
|
|
);
|
|
|
|
|
// 转换Y轴坐标
|
|
|
|
|
// let pointInGrid2 = myChart.convertFromPixel({ seriesIndex: 1 }, pointInPixel);
|
|
|
|
|
// x轴数据的索引值
|
|
|
|
|
console.log("pointInGrid", pointInGrid.value);
|
|
|
|
|
option.value.series[0].data.push({
|
|
|
|
|
value: pointInGrid.value,
|
|
|
|
|
name: drawPointName.value,
|
|
|
|
|
color: drawPointColor.value,
|
|
|
|
|
});
|
|
|
|
|
option.value && myChart.setOption(option.value);
|
|
|
|
|
// console.log();
|
|
|
|
|
// 所点击点的X轴坐标点所在X轴data的下标
|
|
|
|
|
// let xIndex = pointInGrid[0];
|
|
|
|
|
// // 所点击点的Y轴坐标点数值
|
|
|
|
|
// let yIndex = pointInGrid2[1];
|
|
|
|
|
// // 使用getOption() 获取图表的option
|
|
|
|
|
// let op = myChart.getOption();
|
|
|
|
|
// //获取到x轴的索引值和option之后，我们就可以获取我们需要的任意数据。
|
|
|
|
|
// // 点击点的X轴对应坐标的名称
|
|
|
|
|
// var time = op.xAxis[0].data[xIndex];
|
|
|
|
|
// // 点击点的series -- data对应的值
|
|
|
|
|
// var value = op.series[0].data[xIndex];
|
|
|
|
|
// console.log("val", time);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const step4EchartInit = () => {
|
|
|
|
|
var chartDom = document.getElementById("charts2");
|
|
|
|
|
var myChart = echarts.init(chartDom, "dark");
|
|
|
|
|
// var option;
|
|
|
|
|
|
|
|
|
|
option2.value = {
|
|
|
|
|
xAxis: {
|
|
|
|
|
name: "X",
|
|
|
|
|
show: true,
|
|
|
|
|
max: 10,
|
|
|
|
|
min: 0,
|
|
|
|
|
interval: 1,
|
|
|
|
|
axisPointer: {
|
|
|
|
|
show: true,
|
|
|
|
|
label: {
|
|
|
|
|
precision: 0,
|
|
|
|
|
},
|
|
|
|
|
// snap: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
name: "Y",
|
|
|
|
|
show: true,
|
|
|
|
|
interval: 200,
|
|
|
|
|
max: 2000,
|
|
|
|
|
min: 0,
|
|
|
|
|
axisPointer: {
|
|
|
|
|
show: true,
|
|
|
|
|
// snap: true,
|
|
|
|
|
label: {
|
|
|
|
|
precision: 0,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
symbolSize: 20,
|
|
|
|
|
label: {
|
|
|
|
|
show: true, // 显示标签
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
// 自定义显示的文本内容，params是包含数据信息的对象
|
|
|
|
|
return params.data.name;
|
|
|
|
|
},
|
|
|
|
|
position: "top", // 文本位置，可以是 'top', 'left', 'right', 'bottom', 'inside', 或者是 {top, left} 形式的具体位置
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: function (params) {
|
|
|
|
|
// 自定义显示的文本内容，params是包含数据信息的对象
|
|
|
|
|
return params.data.color;
|
|
|
|
|
},
|
|
|
|
|
borderColor: "#fff",
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
// { value: [3, 800], name: "A" },
|
|
|
|
|
// { value: [4, 1200], name: "B" },
|
|
|
|
|
// { value: [6, 600], name: "C" },
|
|
|
|
|
// { value: [7, 1400], name: "D" },
|
|
|
|
|
// { value: [10, 1400], },
|
|
|
|
|
// [4, 1200],
|
|
|
|
|
// [6, 600],
|
|
|
|
|
// [7, 1400],
|
|
|
|
|
],
|
|
|
|
|
type: "scatter",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
option2.value && myChart.setOption(option2.value);
|
|
|
|
|
myChart.getZr().on("click", function (param) {
|
|
|
|
|
if (drawPointNameStep4.value == "") {
|
|
|
|
|
proxy.$modal.msgError("请选择要绘制的点");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const pointInPixel = [param.offsetX, param.offsetY];
|
|
|
|
|
console.log("pointInPixel4", pointInPixel);
|
|
|
|
|
//将偏移值转化为坐标值
|
|
|
|
|
pointInGridStep4.value = myChart.convertFromPixel(
|
|
|
|
|
{ seriesIndex: 0 },
|
|
|
|
|
pointInPixel
|
|
|
|
|
);
|
|
|
|
|
console.log("pointInGrid4", pointInGridStep4.value);
|
|
|
|
|
option2.value.series[0].data.push({
|
|
|
|
|
value: pointInGridStep4.value,
|
|
|
|
|
name: drawPointNameStep4.value,
|
|
|
|
|
color: drawPointColorStep4.value,
|
|
|
|
|
});
|
|
|
|
|
option2.value && myChart.setOption(option2.value);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const step5EchartInit = () => {
|
|
|
|
|
// 散点数据
|
|
|
|
|
const marksData = [
|
|
|
|
|
{
|
|
|
|
|
name: "A",
|
|
|
|
|
value: [3, 800],
|
|
|
|
|
color: "#009FF1",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "B",
|
|
|
|
|
value: [4, 1200],
|
|
|
|
|
color: "#FB54A1",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "C",
|
|
|
|
|
value: [6, 600],
|
|
|
|
|
color: "#FE8D2A",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "D",
|
|
|
|
|
value: [7, 1400],
|
|
|
|
|
color: "#6E70F0",
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
// 中心线
|
|
|
|
|
const centerLine = [
|
|
|
|
|
{
|
|
|
|
|
name: "y",
|
|
|
|
|
xAxis: 5,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "x",
|
|
|
|
|
yAxis: 1000,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
// 中心点
|
|
|
|
|
const centerMark = [
|
|
|
|
|
{
|
|
|
|
|
value: "中心点",
|
|
|
|
|
coord: [5, 1000],
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
optionStep5.value = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
axisPointer: {
|
|
|
|
|
show: true,
|
|
|
|
|
type: "cross",
|
|
|
|
|
lineStyle: {
|
|
|
|
|
type: "dashed",
|
|
|
|
|
width: 1,
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
backgroundColor: "#555",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: 50,
|
|
|
|
|
right: 50,
|
|
|
|
|
bottom: "4%",
|
|
|
|
|
top: "6%",
|
|
|
|
|
containLabel: true,
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
scale: true,
|
|
|
|
|
max: 10,
|
|
|
|
|
min: 0,
|
|
|
|
|
interval: 1,
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#ddd",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: "#666",
|
|
|
|
|
},
|
|
|
|
|
axisPointer: {
|
|
|
|
|
show: true,
|
|
|
|
|
label: {
|
|
|
|
|
precision: 0,
|
|
|
|
|
},
|
|
|
|
|
// snap: true,
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#eee",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
max: 2000,
|
|
|
|
|
min: 0,
|
|
|
|
|
interval: 200,
|
|
|
|
|
scale: true,
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#ddd",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisPointer: {
|
|
|
|
|
show: true,
|
|
|
|
|
label: {
|
|
|
|
|
precision: 0,
|
|
|
|
|
},
|
|
|
|
|
// snap: true,
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: "#666",
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#eee",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: "scatter",
|
|
|
|
|
data: marksData,
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "bottom",
|
|
|
|
|
formatter: "{b}",
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
shadowBlur: 2,
|
|
|
|
|
shadowColor: "rgba(120, 36, 50, 0.5)",
|
|
|
|
|
shadowOffsetY: 1,
|
|
|
|
|
color: function (params) {
|
|
|
|
|
// 自定义显示的文本内容，params是包含数据信息的对象
|
|
|
|
|
return params.data.color;
|
|
|
|
|
},
|
|
|
|
|
// color: function (e) {
|
|
|
|
|
// let randomColor =
|
|
|
|
|
// "rgba(" +
|
|
|
|
|
// Math.floor(Math.random() * 240) +
|
|
|
|
|
// "," +
|
|
|
|
|
// Math.floor(Math.random() * 240) +
|
|
|
|
|
// "," +
|
|
|
|
|
// Math.floor(Math.random() * 240) +
|
|
|
|
|
// "," +
|
|
|
|
|
// ".8" +
|
|
|
|
|
// ")";
|
|
|
|
|
// return randomColor.substring();
|
|
|
|
|
// },
|
|
|
|
|
},
|
|
|
|
|
// 各象限区域，需要结合中心线的位置来画出四个象限的markArea
|
|
|
|
|
markArea: {
|
|
|
|
|
silent: true,
|
|
|
|
|
data: [
|
|
|
|
|
// 第一象限
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
// 标域左上角的数据，也就是要设置矩形左边和上边的值
|
|
|
|
|
name: "第一象限",
|
|
|
|
|
xAxis: 5, // x 轴开始位置（中心线的值）
|
|
|
|
|
yAxis: 2000, // y 轴结束位置(y轴最大值)
|
|
|
|
|
itemStyle: {
|
|
|
|
|
// color: "rgba(52, 134, 207, 0.6)",
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
position: "inside",
|
|
|
|
|
color: "#fff",
|
|
|
|
|
fontSize: 22,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
// 标域右下角的数据，矩形域右边和下边的值
|
|
|
|
|
yAxis: 1000, // y 轴开始位置（中心线的值）
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
// 第二象限
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
name: "第二象限",
|
|
|
|
|
yAxis: 2000, // y 轴结束位置(取y轴最大值)
|
|
|
|
|
itemStyle: {
|
|
|
|
|
// color: "rgba(177, 130, 192, 0.6)",
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
position: "inside",
|
|
|
|
|
color: "#fff",
|
|
|
|
|
fontSize: 22,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
xAxis: 5, // x 轴结束位置（中心线位置）
|
|
|
|
|
yAxis: 1000, // y 轴开始位置（中心线位置）
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
// 第三象限
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
name: "第三象限",
|
|
|
|
|
yAxis: 1000, // y 轴结束位置（中心线位置）
|
|
|
|
|
itemStyle: {
|
|
|
|
|
// color: "rgba(254, 141, 42, 0.6)",
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
position: "inside",
|
|
|
|
|
color: "#fff",
|
|
|
|
|
fontSize: 22,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
xAxis: 5, // x 轴结束位置（中心线位置）
|
|
|
|
|
yAxis: 0, // y 轴开始位置(y轴最小值）
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
// 第四象限
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
name: "第四象限",
|
|
|
|
|
xAxis: 5, // x 轴开始位置（中心线位置）
|
|
|
|
|
yAxis: 1000, // y 轴结束位置（中心线位置）
|
|
|
|
|
itemStyle: {
|
|
|
|
|
// color: "rgba(0, 184, 105, 0.6)",
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
position: "inside",
|
|
|
|
|
color: "#FFF",
|
|
|
|
|
fontSize: 22,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
yAxis: 0, // y轴开始位置(y轴最小值）
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
// 中心点交集象限轴
|
|
|
|
|
markLine: {
|
|
|
|
|
silent: true, // 是否不响应鼠标事件
|
|
|
|
|
precision: 2, // 精度
|
|
|
|
|
lineStyle: {
|
|
|
|
|
type: "solid",
|
|
|
|
|
color: "#00aca6",
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
color: "#00aca6",
|
|
|
|
|
position: "end",
|
|
|
|
|
formatter: "{b}",
|
|
|
|
|
},
|
|
|
|
|
data: centerLine,
|
|
|
|
|
},
|
|
|
|
|
// 中心点
|
|
|
|
|
markPoint: {
|
|
|
|
|
symbol: "roundRect",
|
|
|
|
|
symbolSize: 15,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: "rgba(234, 85, 6, .8)",
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
position: "top",
|
|
|
|
|
},
|
|
|
|
|
data: centerMark,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
var chartDom = document.getElementById("charts3");
|
|
|
|
|
var myChart = echarts.init(chartDom, "dark");
|
|
|
|
|
optionStep5.value && myChart.setOption(optionStep5.value);
|
|
|
|
|
myChart.getZr().on("click", function (param) {
|
|
|
|
|
if (drawPointColorStep5.value == "") {
|
|
|
|
|
proxy.$modal.msgError("请选择要绘制的点");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const pointInPixel = [param.offsetX, param.offsetY];
|
|
|
|
|
console.log("pointInPixel5", pointInPixel);
|
|
|
|
|
//将偏移值转化为坐标值
|
|
|
|
|
pointInGridStep5.value = myChart.convertFromPixel(
|
|
|
|
|
{ seriesIndex: 0 },
|
|
|
|
|
pointInPixel
|
|
|
|
|
);
|
|
|
|
|
console.log("pointInGrid5", pointInGridStep5.value);
|
|
|
|
|
if (pointInGridStep5.value[0] > 5 && pointInGridStep5.value[1] > 1000) {
|
|
|
|
|
optionStep5.value.series[0].markArea.data[0][0].itemStyle.color =
|
|
|
|
|
drawPointColorStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[0][0].name =
|
|
|
|
|
drawPointNameStep5.value;
|
|
|
|
|
console.log(optionStep5.value);
|
|
|
|
|
}
|
|
|
|
|
if (pointInGridStep5.value[0] < 5 && pointInGridStep5.value[1] > 1000) {
|
|
|
|
|
optionStep5.value.series[0].markArea.data[1][0].itemStyle.color =
|
|
|
|
|
drawPointColorStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[1][0].name =
|
|
|
|
|
drawPointNameStep5.value;
|
|
|
|
|
console.log(optionStep5.value);
|
|
|
|
|
}
|
|
|
|
|
if (pointInGridStep5.value[0] < 5 && pointInGridStep5.value[1] < 1000) {
|
|
|
|
|
optionStep5.value.series[0].markArea.data[2][0].itemStyle.color =
|
|
|
|
|
drawPointColorStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[2][0].name =
|
|
|
|
|
drawPointNameStep5.value;
|
|
|
|
|
console.log(optionStep5.value);
|
|
|
|
|
}
|
|
|
|
|
if (pointInGridStep5.value[0] > 5 && pointInGridStep5.value[1] < 1000) {
|
|
|
|
|
optionStep5.value.series[0].markArea.data[3][0].itemStyle.color =
|
|
|
|
|
drawPointColorStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[3][0].name =
|
|
|
|
|
drawPointNameStep5.value;
|
|
|
|
|
console.log(optionStep5.value);
|
|
|
|
|
}
|
|
|
|
|
optionStep5.value && myChart.setOption(optionStep5.value);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const drawQuadrant = (name, color) => {
|
|
|
|
|
drawPointColorStep5.value = color;
|
|
|
|
|
drawPointNameStep5.value = name;
|
|
|
|
|
console.log(drawPointColorStep5.value);
|
|
|
|
|
};
|
|
|
|
|
const step1Submit = () => {
|
|
|
|
|
step1Error.value = 0;
|
|
|
|
|
for (let i in step1Data.value) {
|
|
|
|
|
if (!step1Data.value[i].params1 || !step1Data.value[i].params2) {
|
|
|
|
|
proxy.$modal.msgError("请先完成所有填空");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (step1Data.value[0].params1 && step1Data.value[0].params1 !== "3") {
|
|
|
|
|
step1Error.value++;
|
|
|
|
|
}
|
|
|
|
|
if (step1Data.value[0].params2 && step1Data.value[0].params2 !== "800") {
|
|
|
|
|
step1Error.value++;
|
|
|
|
|
}
|
|
|
|
|
if (step1Data.value[1].params1 && step1Data.value[1].params1 !== "4") {
|
|
|
|
|
step1Error.value++;
|
|
|
|
|
}
|
|
|
|
|
if (step1Data.value[1].params2 && step1Data.value[1].params2 !== "1200") {
|
|
|
|
|
step1Error.value++;
|
|
|
|
|
}
|
|
|
|
|
if (step1Data.value[2].params1 && step1Data.value[2].params1 !== "6") {
|
|
|
|
|
step1Error.value++;
|
|
|
|
|
}
|
|
|
|
|
if (step1Data.value[2].params2 && step1Data.value[2].params2 !== "600") {
|
|
|
|
|
step1Error.value++;
|
|
|
|
|
}
|
|
|
|
|
if (step1Data.value[3].params1 && step1Data.value[3].params1 !== "7") {
|
|
|
|
|
step1Error.value++;
|
|
|
|
|
}
|
|
|
|
|
if (step1Data.value[3].params2 && step1Data.value[3].params2 !== "1400") {
|
|
|
|
|
step1Error.value++;
|
|
|
|
|
}
|
|
|
|
|
console.log(step1Error.value, "错误数");
|
|
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
|
|
step1AnswerFlag.value = true;
|
|
|
|
|
};
|
|
|
|
|
const moveDown = (index, row) => {
|
|
|
|
|
console.log("下移", index, row);
|
|
|
|
|
if (index + 1 === step2Data.value.length) {
|
|
|
|
|
alert("已经是最后一条，不可下移");
|
|
|
|
|
} else {
|
|
|
|
|
const downDate = step2Data.value[index + 1];
|
|
|
|
|
step2Data.value.splice(index + 1, 1);
|
|
|
|
|
step2Data.value.splice(index, 0, downDate);
|
|
|
|
|
const step2Submit = () => {
|
|
|
|
|
step2Error.value = 0;
|
|
|
|
|
if (!step2Data.value[4].params1 || !step2Data.value[4].params2) {
|
|
|
|
|
proxy.$modal.msgError("请先完成所有填空");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (step2Data.value[4].params1 && step2Data.value[4].params1 !== "5") {
|
|
|
|
|
step2Error.value++;
|
|
|
|
|
}
|
|
|
|
|
if (step2Data.value[4].params2 && step2Data.value[4].params2 !== "1000") {
|
|
|
|
|
step2Error.value++;
|
|
|
|
|
}
|
|
|
|
|
console.log(step2Error.value, "错误数");
|
|
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
|
|
step2AnswerFlag.value = true;
|
|
|
|
|
};
|
|
|
|
|
const step3Submit = () => {
|
|
|
|
|
step3Error.value = 0;
|
|
|
|
|
for (let i in option.value.series[0].data) {
|
|
|
|
|
console.log(option.value.series[0].data[i]);
|
|
|
|
|
if (option.value.series[0].data[i].name == "A") {
|
|
|
|
|
if (
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[0]) != 3 ||
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[1]) != 800
|
|
|
|
|
) {
|
|
|
|
|
step3Error.value++;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (option.value.series[0].data[i].name == "B") {
|
|
|
|
|
if (
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[0]) != 4 ||
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[1]) != 1200
|
|
|
|
|
) {
|
|
|
|
|
step3Error.value++;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (option.value.series[0].data[i].name == "C") {
|
|
|
|
|
if (
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[0]) != 6 ||
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[1]) != 600
|
|
|
|
|
) {
|
|
|
|
|
step3Error.value++;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (option.value.series[0].data[i].name == "D") {
|
|
|
|
|
if (
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[0]) != 7 ||
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[1]) != 1400
|
|
|
|
|
) {
|
|
|
|
|
step3Error.value++;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
console.log(step3Error.value, "错误数");
|
|
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
|
|
step3AnswerFlag.value = true;
|
|
|
|
|
};
|
|
|
|
|
const step4Submit = () => {
|
|
|
|
|
step4Error.value = 0;
|
|
|
|
|
for (let i in option2.value.series[0].data) {
|
|
|
|
|
console.log(option2.value.series[0].data[i]);
|
|
|
|
|
if (option2.value.series[0].data[i].name == "A") {
|
|
|
|
|
if (
|
|
|
|
|
Math.round(option2.value.series[0].data[i].value[0]) != 5 ||
|
|
|
|
|
Math.round(option2.value.series[0].data[i].value[1]) != 1000
|
|
|
|
|
) {
|
|
|
|
|
step4Error.value++;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
console.log(step4Error.value, "错误数");
|
|
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
|
|
step4AnswerFlag.value = true;
|
|
|
|
|
};
|
|
|
|
|
const step5Submit = () => {
|
|
|
|
|
step5Error.value = 0;
|
|
|
|
|
if (optionStep5.value.series[0].markArea.data[0][0].name != "明星客户") {
|
|
|
|
|
step5Error.value++;
|
|
|
|
|
}
|
|
|
|
|
if (optionStep5.value.series[0].markArea.data[1][0].name != "问题客户") {
|
|
|
|
|
step5Error.value++;
|
|
|
|
|
}
|
|
|
|
|
if (optionStep5.value.series[0].markArea.data[2][0].name != "瘦狗客户") {
|
|
|
|
|
step5Error.value++;
|
|
|
|
|
}
|
|
|
|
|
if (optionStep5.value.series[0].markArea.data[3][0].name != "现金流客户") {
|
|
|
|
|
step5Error.value++;
|
|
|
|
|
}
|
|
|
|
|
console.log(step5Error.value, "错误数");
|
|
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
|
|
step5AnswerFlag.value = true;
|
|
|
|
|
};
|
|
|
|
|
const downloadData = () => {
|
|
|
|
|
// console.log(666);
|
|
|
|
|
portraitModel
|
|
|
|
|
.downloadDataByBoston({
|
|
|
|
|
})
|
|
|
|
|
.downloadDataByBoston({})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
// console.log(res,'--');
|
|
|
|
|
const blob = new Blob([res], { type: "application/vnd.ms-excel" });
|
|
|
|
|
downBlobFile(`案例数据-波士顿矩阵分析`, blob);
|
|
|
|
|
})
|
|
|
|
|
.catch((error) => {});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const submitData = () => {
|
|
|
|
|
if (
|
|
|
|
|
!step1AnswerFlag.value ||
|
|
|
|
|
!step2AnswerFlag.value ||
|
|
|
|
|
!step3AnswerFlag.value ||
|
|
|
|
|
!step4AnswerFlag.value ||
|
|
|
|
|
!step5AnswerFlag.value
|
|
|
|
|
) {
|
|
|
|
|
proxy.$modal.msgError("请先完成所有步骤！");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
errorNum.value =
|
|
|
|
|
step1Error.value +
|
|
|
|
|
step2Error.value +
|
|
|
|
|
step3Error.value +
|
|
|
|
|
step4Error.value +
|
|
|
|
|
step5Error.value;
|
|
|
|
|
console.log(errorNum.value, "总错误次数");
|
|
|
|
|
portraitModel
|
|
|
|
|
.submit({
|
|
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
|
|
taskName: "波士顿矩阵分析",
|
|
|
|
|
numberOfErrors: errorNum.value,
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
|
|
})
|
|
|
|
|
.catch((error) => {});
|
|
|
|
|
};
|
|
|
|
|
defineExpose({
|
|
|
|
|
submitData,
|
|
|
|
|
// retrain,
|
|
|
|
|
// practicalTraining,
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
@ -560,7 +1333,7 @@ const downloadData = () => {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
width: 180px;
|
|
|
|
|
height: 56px;
|
|
|
|
|
background-image: url("@/assets/images/01.png");
|
|
|
|
|
background-image: url("@/assets/images/taskImport.png");
|
|
|
|
|
background-size: 180px 56px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
@ -620,6 +1393,31 @@ const downloadData = () => {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.drawPoint {
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
.point {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
.pointItem {
|
|
|
|
|
// width: 73px;
|
|
|
|
|
height: 19px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
padding-right: 10px;
|
|
|
|
|
background: #002651;
|
|
|
|
|
border: 1px solid #67b3d6;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 19px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
span {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #6e70f0;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.line {
|
|
|
|
|
width: 1400px;
|
|
|
|
|
|
HeHaonan
2 years ago
