Skip to content

W
wangxiaolu-sfa-ui
提交 a05f81a5 authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

fix(bi/competitor/cmm): 修复已知bug

图表筛选问题和图例筛选问题以及左右 2 个 y 轴显示内容，并封装根据原始数据决定如何显示数字字符串带单位描述的函数使用
上级 5768f05c
隐藏空白字符变更
内嵌 并排
正在显示 包含 391 行增加 和 296 行删除
src/components/LevitatedSphere/index.vue
浏览文件 @ a05f81a5
...@@ -12,10 +12,9 @@ ...@@ -12,10 +12,9 @@
@click="handleClick"> @click="handleClick">
<svg-icon icon-class="tool"></svg-icon> <svg-icon icon-class="tool"></svg-icon>
</div> </div>
<!-- 工具抽屉 --> <!-- 工具抽屉 -->
<el-drawer title="工具箱" <el-drawer title="工具箱"
:visible.sync="drawer" v-model="drawer"
size="20%" size="20%"
@click.native="drawer = false"> @click.native="drawer = false">
<slot></slot> <slot></slot>
...@@ -112,6 +111,7 @@ export default { ...@@ -112,6 +111,7 @@ export default {
}, },
methods: { methods: {
handleClick() { handleClick() {
console.log(this.downPoint.x,this.upPoint.x,this.downPoint.y,this.upPoint.y)
if (this.downPoint.x === this.upPoint.x && this.downPoint.y === this.upPoint.y) { if (this.downPoint.x === this.upPoint.x && this.downPoint.y === this.upPoint.y) {
this.drawer = !this.drawer this.drawer = !this.drawer
} }
......
src/hooks/date.js 0 → 100644
浏览文件 @ a05f81a5
export const useDatePickerOptions = () => {
const pickerOptions = ref([// 日期选项配置
{
text: '最近一周',
value() {
const end = new Date().setDate((new Date().getDate() - 1));
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end]
}
}, {
text: '最近一个月',
value() {
const end = new Date().setDate((new Date().getDate() - 1));
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end]
}
}
])
return {
pickerOptions
}
}
\ No newline at end of file
src/utils/index.js
浏览文件 @ a05f81a5
...@@ -403,3 +403,19 @@ export function isNumberStr(str) { ...@@ -403,3 +403,19 @@ export function isNumberStr(str) {
return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str) return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
} }
// 清除对象里属性的非响应式的值
export function resetObjValue(obj, props) {
for (let prop in obj) {
if (obj.hasOwnProperty(prop)) {
// 判断属性值是否为数组或对象
if (Array.isArray(obj[prop])) {
obj[prop] = [];
} else if (typeof obj[prop] === 'object' && obj[prop] !== null) {
obj[prop] = {};
} else {
obj[prop] = undefined; // 基础类型重置为 undefined
}
}
}
}
\ No newline at end of file
src/utils/math.js
浏览文件 @ a05f81a5
...@@ -20,14 +20,66 @@ export function divSafe(arg1, arg2) { ...@@ -20,14 +20,66 @@ export function divSafe(arg1, arg2) {
} }
/** /**
* 小数数字，转格式千分位用逗号，例如：12345.678 转换后 12,346 * 将数值转换为带单位的字符串，并添加千分位逗号
* @param {*} num * @param {number} value - 要转换的数值
* @returns * @param {string} extraDescription - 额外的描述字符串（没有直接返回数据）
* @param {bool} bool - 是否开启转换
* @param {bool} round - 是否取整
* @returns {string} 格式化后的字符串
*/ */
export function toThousands(num) { export function formatNumberWithUnit(value, extraDescription, bool, round) {
if (num === null || num === undefined) return '0' if (typeof value !== 'number') {
// 暂存小数位 throw new Error('输入值必须是数字');
return (Math.round(num) || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }
// 不转换
if (!bool) {
if(!round){
if (!extraDescription) {
return value.toFixed(2)
} else {
return value.toFixed(2) + extraDescription
}
}else{
if (!extraDescription) {
return Math.round(value) + ''
} else {
return Math.round(value) + extraDescription
}
}
}
// 转换单位
let unit;
let formattedValue;
if (value >= 100000000) {
unit = '亿';
formattedValue = (value / 100000000);
} else if (value >= 10000) {
unit = '万';
formattedValue = (value / 10000);
} else {
unit = '';
formattedValue = value;
}
// 判断是否取整
if (round) {
formattedValue = Math.round(formattedValue) + '';
} else {
formattedValue = formattedValue.toFixed(2);
}
// 如果没有额外描述，直接返回数值
if (!extraDescription) {
return formattedValue;
}
// 添加千分位逗号
formattedValue = formattedValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return `${formattedValue}${unit}${extraDescription}`;
} }
/** /**
...@@ -44,43 +96,6 @@ export function roundUpToNextHighestPowerOfTen(num) { ...@@ -44,43 +96,6 @@ export function roundUpToNextHighestPowerOfTen(num) {
return (Number(first) + 1) + result return (Number(first) + 1) + result
} }
/**
* 把数字转换成带元/万/亿单位结尾字符串
* @param {*} number
* @param {*} isThousand 是否万分位数值（外面已经把数据除以万以后的数据）
* @returns
*/
export function convertToUnit(number, isThousand) {
if (number === 0 || number === undefined || number === null) {
return "0";
}
let unit;
let value;
if (isThousand) {
number = number * 10000
}
if (number >= 100000000) {
unit = " 亿元";
value = number / 100000000;
} else if (number >= 10000) {
unit = " 万元";
value = number / 10000;
} else {
unit = " 元";
value = number;
}
// 保留两位小数
let formattedValue = value.toFixed(2);
// 去除末尾可能多余的0
formattedValue = parseFloat(formattedValue).toString();
return `${formattedValue}${unit}`;
}
// 保留 2 位小数 // 保留 2 位小数
export function toFixed2(num) { export function toFixed2(num) {
if (num === null || num === undefined) return '0' if (num === null || num === undefined) return '0'
......
src/views/bi/competitor/cmm/LineAndBar.vue
浏览文件 @ a05f81a5
<template> <template>
<div :class="className" <div ref="echartsRef"
:class="className"
:style="{ height: height, width: width }" /> :style="{ height: height, width: width }" />
</template> </template>
<script> <script setup>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import resize from '@/views/dashboard/mixins/resize' import { formatNumberWithUnit } from '@/utils'
import { convertToUnit, toFixed2 } from '@/utils' const props = defineProps({
className: {
export default { type: String,
mixins: [resize], default: 'chart'
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '500px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
}
}, },
data() { width: {
return { type: String,
chart: null, default: '100%'
myThousand: false
}
}, },
watch: { height: {
chartData: { type: String,
deep: true, default: '600px'
handler(val) {
this.myThousand = val.series?.some(o => {
return o.data.some(num => num >= 10000)
})
// this.chart.dispose()
// this.initChart()
this.chart.clear(); // 清除图表（重新设置）
this.setOptions(val)
}
}
}, },
mounted() { autoResize: {
this.$nextTick(() => { type: Boolean,
this.initChart() default: true
})
}, },
beforeDestroy() { chartData: {
if (!this.chart) { type: Object,
return required: true
}
})
const echartsRef = ref(null)
const chart = shallowRef(null)
const myThousand = ref(false) // 是否显示万单位
const setOptions = () => {
// 计算 y 轴显示
const yAxis = [
{
type: 'value',
name: '销售额',
nameTextStyle: {
padding: [0, 60, 0, 0]
},
axisLabel: {
formatter(value) {
return formatNumberWithUnit(value, '元', myThousand.value, true)
}
},
axisPointer: {
label: {
formatter: (params) => {
return formatNumberWithUnit(params.value, '元', myThousand.value, true)
}
}
}
},
{
type: 'value',
name: '观看人次',
nameTextStyle: {
padding: [0, 0, 0, 60]
},
axisLabel: {
formatter(value) {
return formatNumberWithUnit(value, '人', myThousand.value, true)
}
},
axisPointer: {
label: {
formatter: (params) => {
return formatNumberWithUnit(params.value, '人', myThousand.value, true)
}
}
}
} }
this.chart.dispose() ]
this.chart = null yAxis.filter(yObj => {
}, return props.chartData.legend.some(o => {
methods: { const target = o.data.find(o => {
initChart() { return o.name.split('-')[1] === yObj.name
this.chart = echarts.init(this.$el, 'macarons') })
this.setOptions(this.chartData) if (!target?.show) yObj.name = ''
else yObj.name = target.name.split('-')[1]
})
})
chart.value.setOption({
xAxis: {
type: 'category',
data: props.chartData.xAxis,
axisPointer: {
type: 'shadow'
}
}, },
setOptions({ expectedData, actualData } = {}) { grid: {
// 动态计算 max 值并向上取整 top: '9%',
// const maxSaleValue = Math.ceil( left: '3%',
// Math.max( right: '3%',
// ...this.chartData?.data?.saleData.flat() bottom: '3%',
// ) containLabel: true
// ); },
// const maxGkrcValue = Math.ceil( toolbox: {
// Math.max( show: true,
// ...this.chartData?.data?.gkrcData.flat() feature: {
// ) saveAsImage: {}, // 保存为图片
// ); magicType: {
// const a = roundUpToNextHighestPowerOfTen(maxSaleValue); type: ['tiled'] // 切换图表类型
// const b = roundUpToNextHighestPowerOfTen(maxGkrcValue);
this.chart.setOption({
xAxis: {
data: this.chartData.xAxis,
// boundaryGap: false,
},
grid: {
top: '6%',
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
}, },
toolbox: { myThousandTool: {
show: true, show: true,
feature: { title: '切换万单位',
saveAsImage: {}, // 保存为图片 icon: 'path://M50,50 L100,50 L100,100 L150,100 L150,150 L100,150 L100,200 L50,200 L50,150 L0,150 L0,100 L50,100 Z',
magicType: { onclick: () => {
type: ['stack', 'tiled'] // 切换图表类型 myThousand.value = !myThousand.value
}, setOptions()
myThousandTool: {
show: true,
title: '切换万单位',
icon: 'path://M50,50 L100,50 L100,100 L150,100 L150,150 L100,150 L100,200 L50,200 L50,150 L0,150 L0,100 L50,100 Z',
onclick: () => {
this.myThousand = !this.myThousand
this.setOptions()
}
}
} }
}, }
tooltip: { }
trigger: 'axis', },
axisPointer: { tooltip: {
type: 'cross' trigger: 'axis',
}, axisPointer: {
padding: [5, 10], type: 'cross',
formatter: (params) => { crossStyle: {
let tooltip = ''; color: '#999'
params.forEach((item) => { }
if (item.seriesName.split('-')[1] === '销售额') { },
tooltip += item.marker + item.seriesName + ': ' + (this.myThousand ? convertToUnit(item.value, true) : toFixed2(item.value) + '元') + '<br>'; formatter: function (params) {
} else if (item.seriesName.split('-')[1] === '观看人次') { let tooltip = '';
tooltip += item.marker + item.seriesName + ': ' + toFixed2(item.value) + (this.myThousand ? '万' : '') + '人<br>'; params.forEach((item) => {
} // 获取系列颜色
}); var color = item.color;
return tooltip; // 拼接提示内容
if (item.seriesName.split('-')[1] === '销售额') {
tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '元', myThousand.value) + '<br>';
} else if (item.seriesName.split('-')[1] === '观看人次') {
tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '人', myThousand.value) + '<br>';
} }
}, });
yAxis: [ return tooltip;
{ }
type: 'value', // padding: [5, 10],
name: '销售额', // formatter: (params) => {
// nameTextStyle: { // let tooltip = '';
// padding: [0, 80, 0, 0] // params.forEach((item) => {
// }, // if (item.seriesName.split('-')[1] === '销售额') {
axisLabel: { // tooltip += item.marker + item.seriesName + ': ' + (this.myThousand ? convertToUnit(item.value, true) : toFixed2(item.value) + '元') + '<br>';
formatter: '{value} ' + (this.myThousand ? '万' : '') + '元' // } else if (item.seriesName.split('-')[1] === '观看人次') {
}, // tooltip += item.marker + item.seriesName + ': ' + toFixed2(item.value) + (this.myThousand ? '万' : '') + '人<br>';
// min: 0, // 设置最小值 // }
// max: a, // });
// offset: 20 // console.log(tooltip)
}, // return tooltip;
{ // }
type: 'value', },
name: '观看人次', yAxis,
// nameTextStyle: { series: props.chartData.series
// padding: [0, 0, 0, 80] }, true)
// },
axisLabel: {
formatter: '{value} ' + (this.myThousand ? '万' : '') + '人'
},
// min: 0, // 设置最小值
// max: b,
// offset: 20
},
],
// legend: {
// data: this.chartData.legend
// },
// legend: this.chartData.legend,
series: [
...this.chartData.series?.map(o => {
return {
...o,
data: o.data.map(num => {
return parseFloat((this.myThousand ? num / 10000 : num).toFixed(2))
})
}
})
]
})
}
}
} }
watchEffect(() => {
if (!chart.value) return
myThousand.value = props.chartData.series?.some(o => {
return o.data.some(num => num >= 10000)
})
setOptions()
})
const initChart = () => {
chart.value = echarts.init(echartsRef.value)
setOptions()
}
onMounted(() => {
nextTick(() => {
initChart()
})
})
onBeforeUnmount(() => {
if (!chart.value) {
return
}
chart.value.dispose()
chart.value = null
})
</script> </script>
src/views/bi/competitor/cmm/index.vue
浏览文件 @ a05f81a5
<template> <template>
<div class="chart_wrap"> <div class="tabs-container">
<el-form :model="queryParams" <el-form :model="queryParams"
inline inline
size="default"> size="default">
...@@ -16,6 +16,19 @@ ...@@ -16,6 +16,19 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="数据类型">
<el-select v-model="queryParams.typeList"
@change="queryChangeFn"
multiple
clearable
collapse-tags
collapse-tags-tooltip>
<el-option v-for="str in typeList"
:label="str"
:value="str">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="日期选择"> <el-form-item label="日期选择">
<el-date-picker v-model="queryParams.date" <el-date-picker v-model="queryParams.date"
type="daterange" type="daterange"
...@@ -24,17 +37,10 @@ ...@@ -24,17 +37,10 @@
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
:picker-options="pickerOptions" :shortcuts="pickerOptions"
@change="queryChangeFn('date')"> @change="queryChangeFn('date')">
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="数据类型">
<el-checkbox-group v-model="queryParams.typeList"
@change="queryChangeFn">
<el-checkbox label="销售额"></el-checkbox>
<el-checkbox label="观看人次"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form> </el-form>
<div class="chart_wrap"> <div class="chart_wrap">
<group-legend :legendData="chartData.legend" <group-legend :legendData="chartData.legend"
...@@ -52,48 +58,39 @@ ...@@ -52,48 +58,39 @@
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import LineCharts from './LineAndBar.vue' import LineCharts from './LineAndBar.vue'
import { getCmmListAPI } from '@/api' import { getCmmListAPI } from '@/api'
import { generatorDayList, parseTime, getBrandColor } from '@/utils' import { generatorDayList, parseTime, getBrandColor, resetObjValue } from '@/utils'
import { useDatePickerOptions } from '@/hooks/date'
// 最近 30 日日期数组
const dateList = [new Date().setDate((new Date().getDate() - 30)), new Date().setDate((new Date().getDate() - 1))]
// 数据类型
const dataTypeList = ['销售额', '观看人次']
const queryParams = reactive({ // 查询表单 const queryParams = reactive({ // 查询表单
brandList: [], brandList: [],
date: [new Date().setDate((new Date().getDate() - 30)), new Date().setDate((new Date().getDate() - 1))], date: dateList,
typeList: ['销售额', '观看人次'] typeList: dataTypeList
})
const pickerOptions = reactive({// 日期选项配置
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date().setDate((new Date().getDate() - 1));
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date().setDate((new Date().getDate() - 1));
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}]
}) })
const { pickerOptions } = useDatePickerOptions()
const brandList = ref([])// 直播间列表 const brandList = ref([])// 直播间列表
const typeList = ref(dataTypeList)
const allChartData = reactive({ // 图表所有数据 const allChartData = reactive({ // 图表所有数据
series: [],
xAxis: [], xAxis: [],
legend: [] legend: [],
series: []
}) })
const chartData = reactive({ // 图表内要用的数据 const chartData = reactive({ // 图表内要用的数据
series: [],
xAxis: [], xAxis: [],
legend: [] legend: [],
series: []
}) })
// 获取数据 // 获取数据
const getList = async () => { const getList = async () => {
allChartData.series = [] // 重置数据源
allChartData.legend = [] resetObjValue(allChartData)
// 获取 x 轴时间
allChartData.xAxis = generatorDayList(queryParams.date[0], queryParams.date[1])
const { data } = await getCmmListAPI({ const { data } = await getCmmListAPI({
startDate: parseTime(queryParams.date[0], '{y}-{m}-{d}'), startDate: parseTime(queryParams.date[0], '{y}-{m}-{d}'),
endDate: parseTime(queryParams.date[1], '{y}-{m}-{d}') endDate: parseTime(queryParams.date[1], '{y}-{m}-{d}')
...@@ -101,29 +98,38 @@ const getList = async () => { ...@@ -101,29 +98,38 @@ const getList = async () => {
data.map((list, index) => { data.map((list, index) => {
// list：每个直播间 // list：每个直播间
let color = getBrandColor(list[0]?.name) let color = getBrandColor(list[0]?.name)
// 每个系列对象
const saleObj = { const saleObj = {
name: list[0]?.name + '-销售额', name: list[0]?.name + '-销售额',
type: 'bar', type: 'bar',
data: [], data: [],
itemStyle: { itemStyle: {
color color
} },
color,
yAxisIndex: 0
} }
const gkrcObj = { const gkrcObj = {
name: list[0]?.name + '-观看人次', name: list[0]?.name + '-观看人次',
type: 'line', type: 'line',
data: [], data: [],
showSymbol: false, showSymbol: false,
symbol: 'none',
lineStyle: { lineStyle: {
width: 2, // 设置折线的宽度 width: 2, // 设置折线的宽度
type: 'solid', // 设置折线的类型 type: 'solid', // 设置折线的类型
color color
}, },
color,
yAxisIndex: 1, yAxisIndex: 1,
} }
// 按照日期添加数据 // 按照日期归并数据
const listMap = new Map()
list.forEach(o => {
listMap.set(o.date.split('-').slice(1).join('-'), o)
})
allChartData.xAxis.forEach(date => { allChartData.xAxis.forEach(date => {
const findObj = list.find(o => o.date.includes(date)) const findObj = listMap.get(date)
if (findObj) { if (findObj) {
saleObj.data.push(findObj.saleSumTotal) saleObj.data.push(findObj.saleSumTotal)
gkrcObj.data.push(findObj.gkrcNumTotal) gkrcObj.data.push(findObj.gkrcNumTotal)
...@@ -132,14 +138,14 @@ const getList = async () => { ...@@ -132,14 +138,14 @@ const getList = async () => {
gkrcObj.data.push(0) gkrcObj.data.push(0)
} }
}) })
// legendData 名字 // 添加图例数据
allChartData.legend.push({ allChartData.legend.push({
data: [{ data: [{
name: saleObj.name, name: saleObj.name,
type: 'bar', type: 'bar',
color: color, color: color,
effective: true, effective: true,
show: true show: true,
}, { }, {
name: gkrcObj.name, name: gkrcObj.name,
type: 'line', type: 'line',
...@@ -149,8 +155,7 @@ const getList = async () => { ...@@ -149,8 +155,7 @@ const getList = async () => {
}], }],
orient: 'verticalAlign' orient: 'verticalAlign'
}) })
// allChartData.legend.push(saleObj.name) // 添加系列数据
// allChartData.legend.push(gkrcObj.name)
allChartData.series.push(saleObj) allChartData.series.push(saleObj)
allChartData.series.push(gkrcObj) allChartData.series.push(gkrcObj)
}) })
...@@ -170,25 +175,32 @@ const filterData = () => { ...@@ -170,25 +175,32 @@ const filterData = () => {
return queryParams.brandList.find(nameStr => obj.data.find(o => o.name.split('-')[0] === nameStr)) return queryParams.brandList.find(nameStr => obj.data.find(o => o.name.split('-')[0] === nameStr))
}) })
} }
// 查看数据类型必须走 // 数据类型筛选
series = series.filter(obj => { if (queryParams.typeList.length > 0) {
return queryParams.typeList.find(str => obj.name.split('-')[1] === str) series = series.filter(obj => {
}) return queryParams.typeList.find(str => obj.name.split('-')[1] === str)
legend = legend.filter(obj => {
// TODO：会不会有丢失响应式的
const list = [...obj.data]
list.forEach((o, index) => {
const isHave = queryParams.typeList.includes(o.name.split('-')[1])
if (!isHave) o.show = false
else o.show = true
}) })
obj.data = list // 图例组件数据源不变，只是显示/隐藏
return true legend.filter(obj => {
}) obj.data.forEach((o, index) => {
// 根据图例状态筛选数据是否显示 const isHave = queryParams.typeList.includes(o.name.split('-')[1])
// 设置图例组件显示/隐藏
if (!isHave) o.show = false
else o.show = true
})
})
} else {
// 数据类型都没选
legend.forEach(obj => {
obj.data.forEach(o => {
o.show = true
})
})
}
// 据图例状态，筛选数据显示
series = series.filter(sObj => { series = series.filter(sObj => {
let nowSeries = true let nowSeries = true
chartData.legend.forEach(obj => { legend.forEach(obj => {
const now = obj.data.find(o => { const now = obj.data.find(o => {
return o.name === sObj.name return o.name === sObj.name
}) })
...@@ -205,47 +217,50 @@ const filterData = () => { ...@@ -205,47 +217,50 @@ const filterData = () => {
chartData.xAxis = allChartData.xAxis chartData.xAxis = allChartData.xAxis
} }
// 默认打开页面请求一次所有数据，并保存在数据源 const init = async function () {
(async function init() {
// 生成 x 轴时间
allChartData.xAxis = generatorDayList(queryParams.date[0], queryParams.date[1])
// 请求数据 // 请求数据
const data = await getList() const data = await getList()
// 初始化直播间列表 // 初始化直播间列表
brandList.value = data.map(list => list[0].name) brandList.value = data.map(list => list[0].name)
// 筛选图表数据 // 筛选图表数据
filterData() filterData()
})(); }
init()
// 筛选条件改变了 // 筛选条件改变了
const queryChangeFn = async (arg) => { const queryChangeFn = async (arg) => {
if (arg === 'date' && !queryParams.date) return if (arg === 'date' && !queryParams.date) return
if (arg === 'date' && queryParams.date) { if (arg === 'date' && queryParams.date) {
// 时间变化，并且有值，需要重新请求
allChartData.xAxis = generatorDayList(queryParams.date[0], queryParams.date[1])
await getList() await getList()
} }
filterData() filterData()
} }
// 图例点击改变了 // 图例点击改变了
const legendChangeFn = (o) => { const legendChangeFn = () => {
filterData() filterData()
} }
// 重置 // 重置
const reset = async () => { const reset = async () => {
// 重置查询参数 // 重置查询参数
queryParams.brandList = [] queryParams.brandList = []
queryParams.date = [new Date().setDate((new Date().getDate() - 30)), new Date().setDate((new Date().getDate() - 1))] queryParams.date = dateList
queryParams.typeList = ['销售额', '观看人次'] queryParams.typeList = dataTypeList
allChartData.xAxis = generatorDayList(queryParams.date[0], queryParams.date[1]) init()
// 重新获取
await getList()
// 筛选图表数据
filterData()
} }
</script> </script>
<style scoped <style scoped
lang="scss"></style> lang="scss">
\ No newline at end of file .tabs-container {
height: 100%;
display: flex;
flex-direction: column;
.chart_wrap {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
}
</style>
\ No newline at end of file
src/views/bi/competitor/index.vue
浏览文件 @ a05f81a5
...@@ -20,9 +20,9 @@ import sycmStore from './sycm_store' ...@@ -20,9 +20,9 @@ import sycmStore from './sycm_store'
import sycmPrd from './sycm_prd' import sycmPrd from './sycm_prd'
import { ref } from 'vue' import { ref } from 'vue'
const list = ref([ const list = ref([
{ name: '蝉妈妈', component: cmm }, { name: '蝉妈妈', component: shallowRef(cmm) },
{ name: '生意参谋-竞店', component: sycmStore }, { name: '生意参谋-竞店', component: shallowRef(sycmStore) },
{ name: '生意参谋-竞品', component: sycmPrd } { name: '生意参谋-竞品', component: shallowRef(sycmPrd) }
]) ])
const activeName = ref(list.value[0].name) const activeName = ref(list.value[0].name)
</script> </script>
...@@ -30,9 +30,23 @@ const activeName = ref(list.value[0].name) ...@@ -30,9 +30,23 @@ const activeName = ref(list.value[0].name)
<style scoped <style scoped
lang="scss"> lang="scss">
.app-container { .app-container {
height: calc(100vh - 84px);
.tabs { .tabs {
background: var(--el-bg-color-overlay); background: var(--el-bg-color-overlay);
padding: 20px; padding: 20px;
display: flex;
flex-direction: column;
height: 100%;
::v-deep(.el-tabs__content) {
flex: 1;
.el-tab-pane {
height: 100%;
}
}
} }
} }
</style> </style>
\ No newline at end of file
src/views/bi/competitor/sycm_store/GradientArea.vue
浏览文件 @ a05f81a5
...@@ -22,7 +22,7 @@ export default { ...@@ -22,7 +22,7 @@ export default {
}, },
height: { height: {
type: String, type: String,
default: '500px' default: '600px'
}, },
autoResize: { autoResize: {
type: Boolean, type: Boolean,
......
src/views/bi/competitor/sycm_store/index.vue
浏览文件 @ a05f81a5
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</el-form-item> --> </el-form-item> -->
</el-form> </el-form>
<div class="chart_wrap"> <div class="chart_wrap">
<!-- <gradient-area :chartData="chartData"></gradient-area> --> <gradient-area :chartData="chartData"></gradient-area>
</div> </div>
</div> </div>
</template> </template>
...@@ -204,10 +204,10 @@ const filterData = () => { ...@@ -204,10 +204,10 @@ const filterData = () => {
// 直播间列表 // 直播间列表
brandList.value = data.map(list => list[0].platformStore) brandList.value = data.map(list => list[0].platformStore)
// 初始化筛选条件（默认请求第一个店铺的第一类型数据） // 初始化筛选条件（默认请求第一个店铺的第一类型数据）
// queryParams.brandList = [data[0][0].platformStore] queryParams.brandList = [data[0][0].platformStore]
// queryParams.typeList = [typeList.value[0]] queryParams.typeList = [typeList.value[0]]
// 筛选图表数据 // 筛选图表数据
// filterData() filterData()
}) })
})(); })();
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论