2024-09-09 修改了大部分下拉组件为模糊筛选，减轻前端渲染压力
This commit is contained in:
284
src/views/SalesManagement/StatisticalAnalysis/RegionalSales.vue
Normal file
284
src/views/SalesManagement/StatisticalAnalysis/RegionalSales.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<el-radio v-model="salesVolume" label="1">销售额</el-radio>
|
||||
<el-radio v-model="salesVolume" label="2">销售量</el-radio>
|
||||
<el-select v-model="selectStateValue" style="width: 150px" size="small" multiple placeholder="选择省份" @change="getProductItemValue1">
|
||||
<el-option
|
||||
v-for="item in selectState"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-model="selectionTimeValue"
|
||||
:picker-options="pickerOptions"
|
||||
value-format="yyyy-MM"
|
||||
type="monthrange"
|
||||
align="right"
|
||||
size="small"
|
||||
style="width: 260px"
|
||||
unlink-panels
|
||||
range-separator="~"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"/>
|
||||
<span style="margin-left: 50px;font-size: 20px;font-weight: bold">{{ TitlesDrawings }}</span>
|
||||
<div id="myChart3" style="width: 1500px;height: 800px;text-align: center"/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '本月',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', [new Date(), new Date()])
|
||||
}
|
||||
}, {
|
||||
text: '今年至今',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date(new Date().getFullYear(), 0)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近六个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 6)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近一年',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 12)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近两年',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 24)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近三年',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 36)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}]
|
||||
},
|
||||
salesVolume: '2',
|
||||
TitlesDrawings: '',
|
||||
yName: '',
|
||||
salesVolume_check: 0,
|
||||
selectStateValue: '',
|
||||
selectStateValue_check: 0,
|
||||
selectState: [],
|
||||
legend: [],
|
||||
saleData: [],
|
||||
selectionTimeValue: '',
|
||||
selectionTimeValue_check: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'avatar',
|
||||
'name',
|
||||
'id'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
salesVolume() {
|
||||
this.changeTitlesDrawings()
|
||||
this.getProductItemValue1()
|
||||
},
|
||||
selectionTimeValue() {
|
||||
this.getProductItemValue1()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.changeTitlesDrawings()
|
||||
this.getProvince()
|
||||
},
|
||||
methods: {
|
||||
getProvince() {
|
||||
var param = []
|
||||
var Data = this.CreateData('11', '省份信息_查询数据', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.selectState.push({
|
||||
label: response.data[i].省份,
|
||||
value: response.data[i].省份流水号
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
changeTitlesDrawings() {
|
||||
if (this.salesVolume === '2') {
|
||||
// 这里写的是 当按钮选择与不选择时 表格的 表头以及表格y轴名称的变化
|
||||
this.TitlesDrawings = '各省销售量趋势图'
|
||||
this.yName = '销售量'
|
||||
} else {
|
||||
this.TitlesDrawings = '各省销售额趋势图'
|
||||
this.yName = '销售额'
|
||||
}
|
||||
},
|
||||
getProductItemValue1() {
|
||||
if (this.selectionTimeValue) {
|
||||
if (this.salesVolume === '2') {
|
||||
this.salesVolume_check = 0
|
||||
} else {
|
||||
this.salesVolume_check = 1
|
||||
}
|
||||
console.log(this.selectStateValue, 2222)
|
||||
if (this.selectStateValue && this.selectStateValue.length > 0) {
|
||||
this.selectStateValue_check = 1
|
||||
} else {
|
||||
this.selectStateValue_check = 0
|
||||
}
|
||||
this.selectionTimeValue ? this.selectionTimeValue_check = 1 : (this.selectionTimeValue_check = 0, this.selectionTimeValue = '')
|
||||
var param1 = []
|
||||
param1[0] = ['省份_check', this.selectStateValue_check]
|
||||
param1[1] = ['省份', this.selectStateValue]
|
||||
param1[2] = ['开始时间', this.selectionTimeValue[0]]
|
||||
param1[3] = ['结束时间', this.selectionTimeValue[1]]
|
||||
var Data1 = this.CreateData('11', 'jy_区域销量分析_省份_查询', param1)
|
||||
this.ExecDatabase(Data1).then(response => {
|
||||
this.legend = []
|
||||
if (response.data.length > 0) {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.legend.push(response.data[i].省份)
|
||||
}
|
||||
}
|
||||
}).then(() => {
|
||||
this.saleData = []
|
||||
var param = []
|
||||
param[0] = ['销售额_check', this.salesVolume_check]
|
||||
param[1] = ['省份_check', this.selectStateValue_check]
|
||||
param[2] = ['时间_check', this.selectionTimeValue_check]
|
||||
param[3] = ['省份', this.selectStateValue]
|
||||
param[4] = ['开始时间', this.selectionTimeValue[0]]
|
||||
param[5] = ['结束时间', this.selectionTimeValue[1]]
|
||||
var Data = this.CreateData('11', 'jy_区域销量分析_查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
if (response.data.length > 0) {
|
||||
for (let j = 0; j < this.legend.length; j++) {
|
||||
this.xdata = []
|
||||
this.ydata = []
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.xdata.push(response.data[i].签订日期月)
|
||||
if (!this.downdate) {
|
||||
this.downdate = 0
|
||||
}
|
||||
this.ydata.push(response.data[i][this.legend[j]])
|
||||
}
|
||||
var s_temp = {
|
||||
name: this.legend[j],
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
markLine: {
|
||||
// markline表示是柱形图之外的折线图 它的数据和柱形图是一样的都来子this.ydata
|
||||
lineStyle: {
|
||||
normal: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: this.ydata
|
||||
}
|
||||
this.saleData.push(s_temp)
|
||||
}
|
||||
}
|
||||
}).then(() => {
|
||||
this.drawLine1()
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('请先选择日期')
|
||||
}
|
||||
},
|
||||
drawLine1() {
|
||||
this.myChart3 = echarts.init(document.getElementById('myChart3'))
|
||||
// 绘制图表
|
||||
this.myChart3.clear()
|
||||
const _this = this
|
||||
this.myChart3.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: [{
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 0,
|
||||
formatter: function(value) {
|
||||
return value.split(' ').join('\n')
|
||||
}
|
||||
},
|
||||
name: '日期',
|
||||
type: 'category',
|
||||
data: this.xdata
|
||||
}],
|
||||
yAxis: [{
|
||||
name: this.yName,
|
||||
type: 'value',
|
||||
max: function(value) {
|
||||
return _this.update > value.max ? 1.2 * _this.update : 1.2 * value.max
|
||||
// 这里写的是y轴的最大值为提取数据中最大值的1.2倍
|
||||
}
|
||||
}],
|
||||
dataZoom: [{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 100,
|
||||
xAxisIndex: [0],
|
||||
filterMode: 'none'
|
||||
}, {
|
||||
show: true,
|
||||
type: 'slider',
|
||||
top: '85%',
|
||||
// orient: 'horizontal',
|
||||
// backgroundColor: 'red',
|
||||
// xAxisIndex: [0],
|
||||
zoomLock: true,
|
||||
start: 0,
|
||||
end: 20
|
||||
}],
|
||||
series: this.saleData,
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '20%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: this.legend,
|
||||
x: 'center',
|
||||
y: 'bottom',
|
||||
icon: 'roundRect',
|
||||
itemHeight: 3,
|
||||
itemWidth: 25
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user