|
|
|
@ -2,7 +2,7 @@ |
|
|
|
<div class="app-container"> |
|
|
|
<div style="margin-left:16px;"> |
|
|
|
<div v-show="viewState == 1"> |
|
|
|
<button-bar ref="btnbar" view-title="在途商品管理表" :btndisabled="btndisabled" @btnhandle="btnHandle" /> |
|
|
|
<button-bar ref="btnbar" view-title="阀值分析" :btndisabled="btndisabled" @btnhandle="btnHandle" /> |
|
|
|
<div class="main-content"> |
|
|
|
<div class="searchcon"> |
|
|
|
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|
|
|
@ -29,9 +29,9 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div id="main" style="width: 100%;height: 500px;min-height: 480px;margin-top: 30px;"></div> |
|
|
|
<div id="main" style="width: 100%;height:100%;min-height: 480px;margin-top: 30px;"></div> |
|
|
|
|
|
|
|
<div style="margin-top: 30px;"> |
|
|
|
<!-- <div style="margin-top: 30px;"> |
|
|
|
<el-table v-loading="tableLoading" :data="thresholdAnalysisTable" border style="width: 100%"> |
|
|
|
<el-table-column width="60" prop="num" label="序号" type="index" :index="indexMethod" align="center" /> |
|
|
|
<el-table-column prop="date" label="数据日期" align="center" /> |
|
|
|
@ -46,15 +46,16 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- End 项目列表 --> |
|
|
|
<div class="pages"> |
|
|
|
<!-- <div class="pages"> |
|
|
|
<div class="tit" /> |
|
|
|
<!-- 翻页 --> |
|
|
|
<pagination v-show="thresholdAnalysisTable.length > 0" :total="queryParams.total" |
|
|
|
<!-- <pagination v-show="thresholdAnalysisTable.length > 0" :total="queryParams.total" |
|
|
|
:page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="loadList" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -112,141 +113,142 @@ |
|
|
|
} |
|
|
|
], |
|
|
|
queryParams: { |
|
|
|
current: 1, |
|
|
|
size: 5, |
|
|
|
total: 0, |
|
|
|
params: { |
|
|
|
customerSid: '', |
|
|
|
date: "", |
|
|
|
type: '', |
|
|
|
} // 类别key |
|
|
|
// current: 1, |
|
|
|
// size: 5, |
|
|
|
// total: 0, |
|
|
|
// params: { |
|
|
|
customerSid: '', |
|
|
|
date: "", |
|
|
|
type: '', |
|
|
|
// } // 类别key |
|
|
|
}, |
|
|
|
nowDate: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(), |
|
|
|
thresholdAnalysisTable: [{ |
|
|
|
num: '1', |
|
|
|
date: '2023-01-01', |
|
|
|
stockValue: '319314', |
|
|
|
onWayGoodsValue: '3474943', |
|
|
|
storeValue: '369546', |
|
|
|
accountBalance: '435234', |
|
|
|
accountsReceivable: '565234', |
|
|
|
paymentAmount: '544632', |
|
|
|
threshold: "454657" |
|
|
|
}, { |
|
|
|
num: '2', |
|
|
|
date: '2023-01-02', |
|
|
|
stockValue: '434577', |
|
|
|
onWayGoodsValue: '324536', |
|
|
|
storeValue: '8765234', |
|
|
|
accountBalance: '876543', |
|
|
|
accountsReceivable: '324365', |
|
|
|
paymentAmount: '7238734', |
|
|
|
threshold: "3454743" |
|
|
|
}, { |
|
|
|
num: '3', |
|
|
|
date: '2023-01-03', |
|
|
|
stockValue: '345467', |
|
|
|
onWayGoodsValue: '634242', |
|
|
|
storeValue: '2367364', |
|
|
|
accountBalance: '734534', |
|
|
|
accountsReceivable: '2356734', |
|
|
|
paymentAmount: '743345', |
|
|
|
threshold: "36345" |
|
|
|
}, { |
|
|
|
num: '4', |
|
|
|
date: '2023-01-04', |
|
|
|
stockValue: '435632', |
|
|
|
onWayGoodsValue: '2455234', |
|
|
|
storeValue: '32434523', |
|
|
|
accountBalance: '2343523', |
|
|
|
accountsReceivable: '565234', |
|
|
|
paymentAmount: '234234', |
|
|
|
threshold: "45676453" |
|
|
|
}, { |
|
|
|
num: '5', |
|
|
|
date: '2023-01-05', |
|
|
|
stockValue: '453423', |
|
|
|
onWayGoodsValue: '1324354', |
|
|
|
storeValue: '65342', |
|
|
|
accountBalance: '13243', |
|
|
|
accountsReceivable: '54342', |
|
|
|
paymentAmount: '34323', |
|
|
|
threshold: "3243424" |
|
|
|
}], |
|
|
|
analysisChartData: { |
|
|
|
title: { |
|
|
|
text: '' |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$refs['btnbar'].setButtonList(this.btnList) |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.loadList() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initChart(obj) { |
|
|
|
var _legend = [] |
|
|
|
var _xdata = obj.date |
|
|
|
var _series = obj.series |
|
|
|
|
|
|
|
var _ss = [] |
|
|
|
for (var i in _series) { |
|
|
|
let objNum = _series[i]; |
|
|
|
let _key; |
|
|
|
let _value; |
|
|
|
Object.keys(objNum).forEach(key => { |
|
|
|
_key = key; |
|
|
|
_value = objNum[key]; |
|
|
|
}) |
|
|
|
|
|
|
|
_legend.push( |
|
|
|
_key |
|
|
|
) |
|
|
|
|
|
|
|
if (i == 6) |
|
|
|
// 百分比 |
|
|
|
_ss.push({ |
|
|
|
name: _key, |
|
|
|
type: 'line', |
|
|
|
yAxisIndex: 1, |
|
|
|
tooltip: { |
|
|
|
valueFormatter: function(value) { |
|
|
|
return value + ' %'; |
|
|
|
} |
|
|
|
}, |
|
|
|
data: _value |
|
|
|
}) |
|
|
|
else |
|
|
|
// 货值 |
|
|
|
_ss.push({ |
|
|
|
name: _key, |
|
|
|
type: 'bar', |
|
|
|
tooltip: { |
|
|
|
valueFormatter: function(value) { |
|
|
|
return value + ' 万元'; |
|
|
|
} |
|
|
|
}, |
|
|
|
data: _value |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById('main')); |
|
|
|
// 绘制图表 |
|
|
|
myChart.setOption({ |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis' |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: '3%', |
|
|
|
right: '4%', |
|
|
|
bottom: '3%', |
|
|
|
containLabel: true |
|
|
|
trigger: 'axis', |
|
|
|
axisPointer: { |
|
|
|
type: 'cross', |
|
|
|
crossStyle: { |
|
|
|
color: '#999' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
toolbox: { |
|
|
|
feature: { |
|
|
|
dataView: { |
|
|
|
// 数据视图 |
|
|
|
show: false, |
|
|
|
readOnly: false |
|
|
|
}, |
|
|
|
magicType: { |
|
|
|
// 切换图形 |
|
|
|
show: false, |
|
|
|
type: ['line', 'bar'] |
|
|
|
}, |
|
|
|
// 还原 |
|
|
|
restore: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
// 下载 |
|
|
|
saveAsImage: { |
|
|
|
show:false |
|
|
|
show: false |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
boundaryGap: false, |
|
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: 'value' |
|
|
|
legend: { |
|
|
|
data: _legend |
|
|
|
}, |
|
|
|
series: [{ |
|
|
|
name: 'Email', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
data: [120, 132, 101, 134, 90, 230, 210] |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'Union Ads', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
data: [220, 182, 191, 234, 290, 330, 310] |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'Video Ads', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
data: [150, 232, 201, 154, 190, 330, 410] |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'Direct', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
data: [320, 332, 301, 334, 390, 330, 320] |
|
|
|
xAxis: [{ |
|
|
|
type: 'category', |
|
|
|
data: _xdata, |
|
|
|
axisPointer: { |
|
|
|
type: 'shadow' |
|
|
|
} |
|
|
|
}], |
|
|
|
yAxis: [{ |
|
|
|
type: 'value', |
|
|
|
name: '人民币', |
|
|
|
min: 0, |
|
|
|
max: 10000, |
|
|
|
interval: 1000, |
|
|
|
axisLabel: { |
|
|
|
formatter: '{value} 万元' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'Search Engine', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320] |
|
|
|
type: 'value', |
|
|
|
name: '百分比', |
|
|
|
min: 0, |
|
|
|
max: 100, |
|
|
|
interval: 10, |
|
|
|
axisLabel: { |
|
|
|
formatter: '{value} %' |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
], |
|
|
|
series: _ss |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$refs['btnbar'].setButtonList(this.btnList) |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.loadList() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
}, |
|
|
|
// 搜索条件效果 |
|
|
|
clicksearchShow() { |
|
|
|
this.isSearchShow = !this.isSearchShow |
|
|
|
@ -258,13 +260,10 @@ |
|
|
|
}, |
|
|
|
btnHandle(btnKey) { |
|
|
|
switch (btnKey) { |
|
|
|
case 'toAdd': |
|
|
|
this.toAdd() |
|
|
|
break |
|
|
|
case 'doDel': |
|
|
|
this.doDel() |
|
|
|
case 'build': // 导出 |
|
|
|
this.doBuild() |
|
|
|
break |
|
|
|
case 'doClose': |
|
|
|
case 'doClose': // 关闭 |
|
|
|
this.doClose() |
|
|
|
break |
|
|
|
default: |
|
|
|
@ -274,21 +273,16 @@ |
|
|
|
loadList() { |
|
|
|
this.tableLoading = true |
|
|
|
let _this = this |
|
|
|
req.listPage(_this.queryParams).then((resp) => { |
|
|
|
req.initData(_this.queryParams).then((resp) => { |
|
|
|
_this.tableLoading = false |
|
|
|
if (resp.success) { |
|
|
|
console.log('11111',resp.data) |
|
|
|
console.log('11111', resp.data) |
|
|
|
const data = resp.data |
|
|
|
_this.queryParams.total = data.total |
|
|
|
_this.thresholdAnalysisTable = data.thresholdAnalysisTable |
|
|
|
_this.analysisChartData = data.analysisChartData |
|
|
|
_this. drawLine() |
|
|
|
_this.tableLoading = false |
|
|
|
_this.tableLoading = false |
|
|
|
this.initChart(resp.data) |
|
|
|
} else { |
|
|
|
// 根据resp.code进行异常情况处理 |
|
|
|
_this.thresholdAnalysisTable = [] |
|
|
|
_this.analysisChartData = {} |
|
|
|
_this.queryParams.total = 0 |
|
|
|
} |
|
|
|
}).catch(() => { |
|
|
|
_this.tableLoading = false |
|
|
|
@ -300,15 +294,6 @@ |
|
|
|
var pageindex = index + 1 + pagestart |
|
|
|
return pageindex |
|
|
|
}, |
|
|
|
// 折线图初始化 |
|
|
|
drawLine() { |
|
|
|
// 基于准备好的dom，初始化echarts实例 |
|
|
|
var myChart = echarts.init(document.getElementById('main')); |
|
|
|
// 绘制图表 |
|
|
|
console.log('option', this.analysisChartData) |
|
|
|
myChart.setOption(this.analysisChartData); |
|
|
|
}, |
|
|
|
|
|
|
|
dosearch() { |
|
|
|
|
|
|
|
this.nowDate = this.queryParams.date; |
|
|
|
@ -317,14 +302,14 @@ |
|
|
|
}, |
|
|
|
resetQuery() { |
|
|
|
this.queryParams = { |
|
|
|
current: 1, |
|
|
|
size: 5, |
|
|
|
total: 0, |
|
|
|
params: { |
|
|
|
customerSid: '', |
|
|
|
date: '', |
|
|
|
type: '', |
|
|
|
} |
|
|
|
// current: 1, |
|
|
|
// size: 5, |
|
|
|
// total: 0, |
|
|
|
// params: { |
|
|
|
customerSid: '', |
|
|
|
date: '', |
|
|
|
type: '', |
|
|
|
// } |
|
|
|
} |
|
|
|
this.loadList() |
|
|
|
}, |
|
|
|
|
