2024-09-09 修改了大部分下拉组件为模糊筛选，减轻前端渲染压力
This commit is contained in:
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<el-date-picker
|
||||
v-model="selectionTimeValue"
|
||||
size="small"
|
||||
type="daterange"
|
||||
align="center"
|
||||
style="width: 240px;"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
range-separator="～"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"/>
|
||||
<div id="myChart6" 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 {
|
||||
TitlesDrawings: '',
|
||||
yName: '',
|
||||
legend: [],
|
||||
value4: '',
|
||||
selectionTimeValue: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'avatar',
|
||||
'name',
|
||||
'id'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
salesVolume() {
|
||||
this.getProductItemValue1()
|
||||
},
|
||||
selectionTimeValue() {
|
||||
this.getProductItemValue1()
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
getProductItemValue1() {
|
||||
if (this.selectionTimeValue) {
|
||||
var param1 = []
|
||||
param1[0] = ['开始时间', this.selectionTimeValue[0]]
|
||||
param1[1] = ['结束时间', 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] = ['开始时间', this.selectionTimeValue[0]]
|
||||
param[1] = ['结束时间', 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: 'bar',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: this.ydata
|
||||
}
|
||||
this.saleData.push(s_temp)
|
||||
}
|
||||
}
|
||||
}).then(() => {
|
||||
this.drawLine1()
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('请先选择日期')
|
||||
}
|
||||
},
|
||||
drawLine1() {
|
||||
this.myChart6 = echarts.init(document.getElementById('myChart6'))
|
||||
// 绘制图表
|
||||
this.myChart6.clear()
|
||||
this.myChart6.setOption({
|
||||
title: {
|
||||
left: 'center',
|
||||
text: '设备利用率'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: this.legend,
|
||||
x: 'center',
|
||||
y: 'bottom'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
name: '有效工作时长',
|
||||
type: 'value'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.xdata
|
||||
},
|
||||
series: this.saleData
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
382
src/views/SalesManagement/StatisticalAnalysis/OrderTrend.vue
Normal file
382
src/views/SalesManagement/StatisticalAnalysis/OrderTrend.vue
Normal file
@@ -0,0 +1,382 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<el-tabs v-model="PartType" type="border-card">
|
||||
<el-tab-pane label="销售趋势分析图" name="销售趋势分析图">
|
||||
<el-radio v-model="salesVolume" label="1">销售额</el-radio>
|
||||
<el-radio v-model="salesVolume" label="2">销售量</el-radio>
|
||||
<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="结束月份"/>
|
||||
<el-select v-model="selectionProductValue" style="width: 150px" size="small" multiple filterable placeholder="选择产品" @change="getProductItemValue1">
|
||||
<el-option
|
||||
v-for="item in selectionProduct"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
<span style="margin-left: 40px;font-size: 20px;font-weight: bold">{{ TitlesDrawings }}</span>
|
||||
<div id="myChart2" style="width: 1500px;height: 800px;text-align: center"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="表格数据" name="表格数据">
|
||||
<el-date-picker
|
||||
v-model="selectionTimeValue1"
|
||||
:picker-options="pickerOptions"
|
||||
value-format="yyyy-MM"
|
||||
type="monthrange"
|
||||
align="right"
|
||||
size="small"
|
||||
style="width: 260px"
|
||||
unlink-panels
|
||||
range-separator="~"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"
|
||||
@change="searchTable()"/>
|
||||
<el-input v-model="productName" size="small" style="width: 200px;" placeholder="产品名称" clearable @keyup.enter.native="searchTable()"/>
|
||||
<el-button type="success" plain icon="el-icon-download" size="small" style="margin-left: 20px" @click="exportExcel()">导出</el-button>
|
||||
<el-table v-loading="loading" :data="tableData" highlight-current-row border stripe size="small" style="width: 821px" height="763px">
|
||||
<el-table-column :width="setColumnWidth('序号')" label="序号" align="center" type="index"/>
|
||||
<el-table-column label="产品名称" align="center" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.产品名称 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :width="setColumnWidth('销售量')" label="销售量" align="center" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.销售量 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :width="setColumnWidth('销售额')" label="占比" align="center" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.销售量占比 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :width="setColumnWidth('销售额')" label="销售额" align="center" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.销售额 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :width="setColumnWidth('销售额')" label="占比" align="center" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.销售额占比 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="block" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:current-page="pageCurrent"
|
||||
:page-sizes="[10, 20, 30, 40, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
:pager-count="5"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChanges"
|
||||
@current-change="handleCurrentChanges"/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
PartType: '销售趋势分析图',
|
||||
loading: false,
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
tableData: [],
|
||||
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])
|
||||
}
|
||||
}]
|
||||
},
|
||||
saleData: [],
|
||||
legend: [],
|
||||
salesVolume: '2',
|
||||
selectionProduct: [],
|
||||
selectionProductValue: '',
|
||||
selectionProductValue_check: 0,
|
||||
TitlesDrawings: '',
|
||||
yName: '',
|
||||
salesVolume_check: 0,
|
||||
productName: '',
|
||||
selectionTimeValue1: '',
|
||||
selectionTimeValue: '',
|
||||
selectionTimeValue_check: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'avatar',
|
||||
'name',
|
||||
'id'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
salesVolume() {
|
||||
this.changeTitlesDrawings()
|
||||
this.getProductItemValue1()
|
||||
},
|
||||
selectionTimeValue() {
|
||||
this.getProductItemValue1()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.changeTitlesDrawings()
|
||||
this.getProduct()
|
||||
},
|
||||
methods: {
|
||||
searchTable() {
|
||||
this.loading = true
|
||||
let product_check
|
||||
this.productName ? product_check = 1 : product_check = 0
|
||||
var param = []
|
||||
param[0] = ['开始时间', this.selectionTimeValue1[0]]
|
||||
param[1] = ['结束时间', this.selectionTimeValue1[1]]
|
||||
param[2] = ['产品_check', product_check]
|
||||
param[3] = ['产品', this.productName]
|
||||
var Data = this.CreateData('11', 'jy_销售趋势分析_表格查询', param, this.pageSize, this.pageCurrent)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
this.tableData = response.data.rows
|
||||
this.total = response.data.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
exportExcel() {
|
||||
if (this.tableData.length !== 0) {
|
||||
let product_check
|
||||
this.productName ? product_check = 1 : product_check = 0
|
||||
var param = []
|
||||
param[0] = ['开始时间', this.selectionTimeValue1[0]]
|
||||
param[1] = ['结束时间', this.selectionTimeValue1[1]]
|
||||
param[2] = ['产品_check', product_check]
|
||||
param[3] = ['产品', this.productName]
|
||||
var Data = this.CreateData('2001', 'jy_销售趋势分析_表格数据_导出', param)
|
||||
this.exportExcel_NPOI(Data)
|
||||
} else {
|
||||
this.$message.warning('暂无数据')
|
||||
}
|
||||
},
|
||||
changeTitlesDrawings() {
|
||||
if (this.salesVolume === '2') {
|
||||
// 这里写的是 当按钮选择与不选择时 表格的 表头以及表格y轴名称的变化
|
||||
this.TitlesDrawings = '销售量趋势分析图'
|
||||
this.yName = '销售量'
|
||||
} else {
|
||||
this.TitlesDrawings = '销售额趋势分析图'
|
||||
this.yName = '销售额'
|
||||
}
|
||||
},
|
||||
getProduct() {
|
||||
var param = []
|
||||
var Data = this.CreateData('11', '数据分析_产品信息_基础表_查询数据', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.selectionProduct.push({
|
||||
label: response.data[i].产品名称,
|
||||
value: response.data[i].产品流水号
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getProductItemValue1() {
|
||||
if (this.selectionTimeValue) {
|
||||
if (this.salesVolume === '2') { this.salesVolume_check = 0 } else { this.salesVolume_check = 1 }
|
||||
if (this.selectionProductValue && this.selectionProductValue.length > 0) {
|
||||
this.selectionProductValue_check = 1
|
||||
} else {
|
||||
this.selectionProductValue_check = 0
|
||||
}
|
||||
this.selectionTimeValue ? this.selectionTimeValue_check = 1 : (this.selectionTimeValue_check = 0, this.selectionTimeValue = '')
|
||||
var param1 = []
|
||||
param1[0] = ['开始时间', this.selectionTimeValue[0]]
|
||||
param1[1] = ['结束时间', this.selectionTimeValue[1]]
|
||||
param1[2] = ['产品_check', this.selectionProductValue_check]
|
||||
param1[3] = ['产品', this.selectionProductValue]
|
||||
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.selectionTimeValue_check]
|
||||
param[2] = ['开始时间', this.selectionTimeValue[0]]
|
||||
param[3] = ['结束时间', this.selectionTimeValue[1]]
|
||||
param[4] = ['产品_check', this.selectionProductValue_check]
|
||||
param[5] = ['产品', this.selectionProductValue]
|
||||
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.myChart2 = echarts.init(document.getElementById('myChart2'))
|
||||
// 绘制图表
|
||||
this.myChart2.clear()
|
||||
const _this = this
|
||||
this.myChart2.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).toFixed(2) : (1.2 * value.max).toFixed(2)
|
||||
// 这里写的是y轴的最大值为提取数据中最大值的1.2倍
|
||||
}
|
||||
}],
|
||||
dataZoom: [{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 100,
|
||||
filterMode: 'none'
|
||||
}, {
|
||||
show: true,
|
||||
type: 'slider',
|
||||
top: '85%',
|
||||
xAxisIndex: [0],
|
||||
zoomLock: false,
|
||||
start: 0,
|
||||
end: 20
|
||||
}],
|
||||
series: this.saleData,
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '20%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: this.legend,
|
||||
x: 'center',
|
||||
y: 'bottom',
|
||||
icon: 'roundRect', // 图标设置为圆角矩形
|
||||
itemHeight: 3,
|
||||
itemWidth: 25
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSizeChanges(val) {
|
||||
this.pageCurrent = 1
|
||||
this.pageSize = val
|
||||
this.searchTable()
|
||||
},
|
||||
handleCurrentChanges(val) {
|
||||
this.pageCurrent = val
|
||||
this.searchTable()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<el-radio v-model="salesVolume" label="1">销售额</el-radio>
|
||||
<el-radio v-model="salesVolume" label="2">销售量</el-radio>
|
||||
<el-date-picker
|
||||
v-show="salesVolume === '2'"
|
||||
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="结束月份"/>
|
||||
<el-date-picker
|
||||
v-show="salesVolume === '1'"
|
||||
v-model="year1"
|
||||
value-format="yyyy"
|
||||
align="right"
|
||||
size="small"
|
||||
type="year"
|
||||
style="width: 150px"
|
||||
placeholder="开始年份"
|
||||
@change="getProductItemValue1"/>
|
||||
<el-date-picker
|
||||
v-show="salesVolume === '1'"
|
||||
v-model="year2"
|
||||
value-format="yyyy"
|
||||
align="right"
|
||||
size="small"
|
||||
type="year"
|
||||
style="width: 150px"
|
||||
placeholder="结束年份"
|
||||
@change="getProductItemValue1"/>
|
||||
<span style="margin-left: 240px;font-size: 20px;font-weight: bold">{{ TitlesDrawings }}</span>
|
||||
<div id="myChart5" 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])
|
||||
}
|
||||
}]
|
||||
},
|
||||
year1: '',
|
||||
year2: '',
|
||||
salesVolume: '1',
|
||||
TitlesDrawings: '',
|
||||
yName: '',
|
||||
salesVolume_check: 0,
|
||||
selectionTimeValue: '',
|
||||
selectionTimeValue_check: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'avatar',
|
||||
'name',
|
||||
'id'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
salesVolume() {
|
||||
this.changeTitlesDrawings()
|
||||
},
|
||||
selectionTimeValue() {
|
||||
this.getProductItemValue1()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.changeTitlesDrawings()
|
||||
},
|
||||
methods: {
|
||||
changeTitlesDrawings() {
|
||||
if (this.salesVolume === '1') {
|
||||
// 这里写的是 当按钮选择与不选择时 表格的 表头以及表格y轴名称的变化
|
||||
this.TitlesDrawings = '动力头滑台销售对比图'
|
||||
this.yName = ['通用销售额', '专机销售额']
|
||||
} else {
|
||||
this.TitlesDrawings = '动力头滑台销售对比图'
|
||||
this.yName = ['滑台', '动力头']
|
||||
}
|
||||
},
|
||||
getProductItemValue1() {
|
||||
if (this.salesVolume === false && !(this.year1 && this.year2)) {
|
||||
console.log(this.year1, this.year2)
|
||||
return
|
||||
}
|
||||
if (this.salesVolume === '2' && !(this.selectionTimeValue)) {
|
||||
return
|
||||
}
|
||||
if (this.salesVolume === '1') { this.salesVolume_check = 0 } else { this.salesVolume_check = 1 }
|
||||
var param = []
|
||||
param[0] = ['@是否产品_check', this.salesVolume_check]
|
||||
if (this.salesVolume === '1') {
|
||||
param[1] = ['开始时间', this.year1]
|
||||
param[2] = ['结束时间', this.year2]
|
||||
} else {
|
||||
param[1] = ['开始时间', this.selectionTimeValue[0]]
|
||||
param[2] = ['结束时间', this.selectionTimeValue[1]]
|
||||
}
|
||||
var Data = this.CreateData('11', 'jy_产品类别分析_查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
this.xdata = []
|
||||
this.y1data = []
|
||||
this.y2data = []
|
||||
if (response.data.length > 0) {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
if (this.salesVolume === '1') {
|
||||
this.xdata.push(response.data[i].签订日期年)
|
||||
this.y1data.push(response.data[i].通用销售额)
|
||||
this.y2data.push(response.data[i].专机销售额)
|
||||
} else {
|
||||
this.xdata.push(response.data[i].签订日期月)
|
||||
this.y1data.push(response.data[i].滑台)
|
||||
this.y2data.push(response.data[i].动力头)
|
||||
}
|
||||
if (!this.downdate) { this.downdate = 0 }
|
||||
}
|
||||
}
|
||||
}).then(() => {
|
||||
this.drawLine1()
|
||||
})
|
||||
},
|
||||
drawLine1() {
|
||||
this.myChart5 = echarts.init(document.getElementById('myChart5'))
|
||||
// 绘制图表
|
||||
this.myChart5.clear()
|
||||
this.myChart5.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: this.yName,
|
||||
x: 'center',
|
||||
y: 'bottom'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '20%',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.xdata
|
||||
},
|
||||
dataZoom: [{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 100,
|
||||
filterMode: 'none'
|
||||
}, {
|
||||
show: true,
|
||||
type: 'slider',
|
||||
top: '85%',
|
||||
xAxisIndex: [0],
|
||||
zoomLock: true,
|
||||
start: 0,
|
||||
end: 20
|
||||
}],
|
||||
series: [
|
||||
{
|
||||
name: '滑台',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: this.y1data
|
||||
},
|
||||
{
|
||||
name: '动力头',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: this.y2data
|
||||
}
|
||||
]
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
186
src/views/SalesManagement/StatisticalAnalysis/ProductPricing.vue
Normal file
186
src/views/SalesManagement/StatisticalAnalysis/ProductPricing.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<el-cascader ref="cascader" :options="product" :show-all-levels="false" placeholder="产品名称" clearable size="small" @clear="clearData" @change="getData"/>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
size="small"
|
||||
type="daterange"
|
||||
align="center"
|
||||
style="width: 260px;"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
range-separator="～"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="getProductItemValue1()"/>
|
||||
<span style="margin-left: 200px;font-size: 20px;font-weight: bold">{{ TitlesDrawings }}</span>
|
||||
<div id="myChart1" style="width: 1500px;height: 820px;text-align: center"/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dateRange: '',
|
||||
TitlesDrawings: '',
|
||||
product: [],
|
||||
productValue: '',
|
||||
yName: '',
|
||||
selectionProductValue: '',
|
||||
selectionProduct: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'avatar',
|
||||
'name',
|
||||
'id'
|
||||
])
|
||||
},
|
||||
created() {
|
||||
this.getTreeData()
|
||||
this.changeTitlesDrawings()
|
||||
},
|
||||
methods: {
|
||||
getTreeData() {
|
||||
var param = []
|
||||
param[0] = ['子节点', 0]
|
||||
var Data = this.CreateData('11', '产品关系_查询节点', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
const data = response.data
|
||||
this.product = this.tree(data, 0)
|
||||
})
|
||||
},
|
||||
tree(data, pid) {
|
||||
const result = []
|
||||
let temp
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i].父节点 === pid) {
|
||||
const obj = { label: data[i].节点名称, value: data[i].子节点 }
|
||||
temp = this.tree(data, data[i].子节点)
|
||||
if (temp.length > 0) {
|
||||
obj.children = temp
|
||||
}
|
||||
result.push(obj)
|
||||
}
|
||||
}
|
||||
return result
|
||||
},
|
||||
getData(val) {
|
||||
this.productValue = val[val.length - 1]
|
||||
this.getProductItemValue1()
|
||||
},
|
||||
changeTitlesDrawings() {
|
||||
this.TitlesDrawings = '产品定价分析图'
|
||||
this.yName = '销\n售\n额'
|
||||
},
|
||||
getProduct() {
|
||||
var param = []
|
||||
var Data = this.CreateData('11', '数据分析_产品信息_基础表_查询数据', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.selectionProduct.push({
|
||||
label: response.data[i].产品名称,
|
||||
value: response.data[i].产品流水号
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getProductItemValue1() {
|
||||
if (this.productValue) {
|
||||
let dateRange_check
|
||||
console.log(this.dateRange, 123)
|
||||
this.dateRange ? dateRange_check = 1 : (dateRange_check = 0, this.dateRange = '')
|
||||
console.log(dateRange_check, 234)
|
||||
var param = []
|
||||
param[0] = ['选择产品', this.productValue]
|
||||
param[1] = ['时间_check', dateRange_check]
|
||||
param[2] = ['开始时间', this.dateRange[0]]
|
||||
param[3] = ['结束时间', this.dateRange[1]]
|
||||
var Data = this.CreateData('11', 'jy_产品定价分析_查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
this.xdata = []
|
||||
this.y1data = []
|
||||
if (response.data.length > 0) {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.xdata.push(response.data[i].单价)
|
||||
if (!this.downdate) { this.downdate = 0 }
|
||||
this.y1data.push(response.data[i].销售额)
|
||||
}
|
||||
}
|
||||
}).then(response => {
|
||||
this.drawLine1()
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('请先选择产品')
|
||||
}
|
||||
},
|
||||
drawLine1() {
|
||||
this.myChart1 = echarts.init(document.getElementById('myChart1'))
|
||||
// 绘制图表
|
||||
this.myChart1.clear()
|
||||
const _this = this
|
||||
this.myChart1.setOption({
|
||||
xAxis: [{
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 0,
|
||||
formatter: function(value) {
|
||||
return value.split(' ').join('\n')
|
||||
}
|
||||
},
|
||||
name: '单价',
|
||||
type: 'category',
|
||||
data: this.xdata,
|
||||
nameLocation: 'middle',
|
||||
nameTextStyle: {
|
||||
padding: [20, 0, 0, 0]
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
name: this.yName,
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
padding: [10, 135, -180, 20]
|
||||
},
|
||||
max: function(value) {
|
||||
return _this.update > value.max ? (1.2 * _this.update).toFixed(2) : (1.2 * value.max).toFixed(2)
|
||||
// 这里写的是y轴的最大值为提取数据中最大值的1.2倍
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
markLine: {
|
||||
// markline表示是柱形图之外的折线图 它的数据和柱形图是一样的都来子this.ydata
|
||||
lineStyle: {
|
||||
normal: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
data: this.y1data,
|
||||
type: 'line'
|
||||
}],
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '5%',
|
||||
bottom: '8%',
|
||||
containLabel: true
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<el-radio v-model="salesVolume" label="1">销售额</el-radio>
|
||||
<el-radio v-model="salesVolume" label="2">销售量</el-radio>
|
||||
<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: 200px;font-size: 20px;font-weight: bold">{{ TitlesDrawings }}</span>
|
||||
<div id="myChart4" 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: '',
|
||||
salesVolume_check: 0,
|
||||
selectStateValue: '',
|
||||
selectionTimeValue: '',
|
||||
selectionTimeValue_check: 0,
|
||||
productionName: [],
|
||||
production: [],
|
||||
selectionTime: [{
|
||||
value: '1',
|
||||
label: '前三个月'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '前六个月'
|
||||
}, {
|
||||
value: '3',
|
||||
label: '前12个月'
|
||||
}, {
|
||||
value: '4',
|
||||
label: '前二年'
|
||||
}, {
|
||||
value: '5',
|
||||
label: '前三年'
|
||||
}, {
|
||||
value: '6',
|
||||
label: '前四年'
|
||||
}, {
|
||||
value: '7',
|
||||
label: '前五年'
|
||||
}],
|
||||
Warehouse: '',
|
||||
warehouse: [{
|
||||
value: '1',
|
||||
label: '一号仓库'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '二号仓库'
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'avatar',
|
||||
'name',
|
||||
'id'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
salesVolume() {
|
||||
this.getProductItemValue2()
|
||||
this.changeTitlesDrawings()
|
||||
},
|
||||
selectionTimeValue() {
|
||||
this.getProductItemValue2()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.changeTitlesDrawings()
|
||||
},
|
||||
methods: {
|
||||
changeTitlesDrawings() {
|
||||
if (this.salesVolume === '2') {
|
||||
// 这里写的是 当按钮选择与不选择时 表格的 表头以及表格y轴名称的变化
|
||||
this.TitlesDrawings = '各产品销售数量占比'
|
||||
} else {
|
||||
this.TitlesDrawings = '各产品销售额占比'
|
||||
}
|
||||
},
|
||||
getProductItemValue2() {
|
||||
if (this.selectionTimeValue) {
|
||||
if (this.salesVolume === '2') { this.salesVolume_check = 0 } else { this.salesVolume_check = 1 }
|
||||
var param = []
|
||||
param[0] = ['销售额_check', this.salesVolume_check]
|
||||
param[1] = ['开始时间', this.selectionTimeValue[0]]
|
||||
param[2] = ['结束时间', this.selectionTimeValue[1]]
|
||||
var Data = this.CreateData('11', 'jy_产品占比分析_查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
this.production = []
|
||||
this.productionName = []
|
||||
if (response.data.length > 0) {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.productionName.push(response.data[i].产品名称)
|
||||
this.production.push({ value: response.data[i].数值, name: response.data[i].产品名称 })
|
||||
}
|
||||
}
|
||||
}).then(() => {
|
||||
this.drawLine2()
|
||||
})
|
||||
}
|
||||
},
|
||||
drawLine2() {
|
||||
this.myChart4 = echarts.init(document.getElementById('myChart4'))
|
||||
this.myChart4.clear()
|
||||
this.myChart4.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 1,
|
||||
left: 1,
|
||||
data: this.productionName
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '产品名称',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: this.production
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
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>
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<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="结束月份"
|
||||
@change="getProductItemValue1"/>
|
||||
<span style="margin-left: 340px;font-size: 20px;font-weight: bold">{{ TitlesDrawings }}</span>
|
||||
<div id="myChart7" style="width: 1500px; height: 800px; margin-bottom: 20px; margin-top: 20px"/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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])
|
||||
}
|
||||
}]
|
||||
},
|
||||
TitlesDrawings: '精工车间月度工时统计趋势图',
|
||||
selectionTimeValue: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getProductItemValue1() {
|
||||
if (this.selectionTimeValue) {
|
||||
var param = []
|
||||
param[0] = ['开始时间', this.selectionTimeValue[0]]
|
||||
param[1] = ['结束时间', this.selectionTimeValue[1]]
|
||||
var Data = this.CreateData('11', 'jy_车间月度工时统计_查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
this.xdata = []
|
||||
this.y1data = []
|
||||
this.y2data = []
|
||||
this.y3data = []
|
||||
if (response.data.length > 0) {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.xdata.push(response.data[i].日期)
|
||||
this.y1data.push(response.data[i].精工车间)
|
||||
this.y2data.push(response.data[i].通用装配)
|
||||
this.y3data.push(response.data[i].专机装配)
|
||||
if (!this.downdate) { this.downdate = 0 }
|
||||
}
|
||||
}
|
||||
}).then(() => {
|
||||
this.drawLine()
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('请先选择时间')
|
||||
}
|
||||
},
|
||||
drawLine() {
|
||||
var chartDom = document.getElementById('myChart7')
|
||||
var myChart7 = echarts.init(chartDom)
|
||||
var option
|
||||
|
||||
option = {
|
||||
color: ['rgb(169, 202, 232)', '#f40', 'rgb(100, 20, 232)'],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.xdata
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
symbol: 'none',
|
||||
name: '精工车间',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: 'rgb(169,202,232)'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: this.y1data
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
symbol: 'none',
|
||||
data: ['精工车间'],
|
||||
x: 'center',
|
||||
y: 'bottom'
|
||||
}
|
||||
}
|
||||
option && myChart7.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
50
src/views/SalesManagement/StatisticalAnalysis/index.vue
Normal file
50
src/views/SalesManagement/StatisticalAnalysis/index.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<ProductPricing ref="fresh"/>
|
||||
<OrderTrend ref="fresh"/>
|
||||
<RegionalSales ref="fresh"/>
|
||||
<ProportionOfProducts ref="fresh"/>
|
||||
<ProductCategory ref="fresh"/>
|
||||
<WorkingHoursStatistics ref="fresh"/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductPricing from '@/views/SalesManagement/StatisticalAnalysis/ProductPricing'
|
||||
import OrderTrend from '@/views/SalesManagement/StatisticalAnalysis/OrderTrend'
|
||||
import RegionalSales from '@/views/SalesManagement/StatisticalAnalysis/RegionalSales'
|
||||
import ProportionOfProducts from '@/views/SalesManagement/StatisticalAnalysis/ProportionOfProducts'
|
||||
import ProductCategory from '@/views/SalesManagement/StatisticalAnalysis/ProductCategory'
|
||||
import EquipmentUtilization from '@/views/SalesManagement/StatisticalAnalysis/EquipmentUtilization'
|
||||
import WorkingHoursStatistics from '@/views/SalesManagement/StatisticalAnalysis/WorkingHoursStatistics'
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
components: {
|
||||
'ProductPricing': ProductPricing,
|
||||
'OrderTrend': OrderTrend,
|
||||
'RegionalSales': RegionalSales,
|
||||
'ProportionOfProducts': ProportionOfProducts,
|
||||
'ProductCategory': ProductCategory,
|
||||
'EquipmentUtilization': EquipmentUtilization,
|
||||
'WorkingHoursStatistics': WorkingHoursStatistics
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'avatar',
|
||||
'name',
|
||||
'id'
|
||||
])
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user