liupopo
2 years ago
4 changed files with 1801 additions and 0 deletions
@ -0,0 +1,517 @@ |
|||
<template> |
|||
|
|||
<div class="index" style="height: calc(100vh - 200px);overflow-x: hidden;overflow-y: auto;"> |
|||
|
|||
<div class="index_top"> |
|||
|
|||
<div style="flex: 1;"> |
|||
<span class="index_top_text" @click="show">数据总览</span> |
|||
<el-date-picker v-model="params.date" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</div> |
|||
|
|||
<div class="index_top_right">{{info.notice}}</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="index_content"> |
|||
|
|||
<div class="index_content_top"> |
|||
|
|||
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;"> |
|||
|
|||
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" /> |
|||
|
|||
<div style="display: flex;flex-direction: column; margin-left: 10px;"> |
|||
<span style="font-size: 20px;">￥27608927.45</span> |
|||
<div style="margin-top: 10px;"> |
|||
<span style="font-size: 14px;color: #999;">常规商品销售额</span> |
|||
<span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 25.6%</span> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div style="flex: 0.3;"></div> |
|||
|
|||
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;"> |
|||
|
|||
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" /> |
|||
|
|||
<div style="display: flex;flex-direction: column; margin-left: 10px;"> |
|||
<span style="font-size: 20px;">￥1244255.22</span> |
|||
<div style="margin-top: 10px;"> |
|||
<span style="font-size: 14px;color: #999;">烟草商品销售额</span> |
|||
<span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 9.8%</span> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div style="flex: 0.3;"></div> |
|||
|
|||
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;"> |
|||
|
|||
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" /> |
|||
|
|||
<div style="display: flex;flex-direction: column; margin-left: 10px;"> |
|||
<span style="font-size: 20px;">￥636449.84</span> |
|||
<div style="margin-top: 10px;"> |
|||
<span style="font-size: 14px;color: #999;">库存总价值</span> |
|||
<span style="font-size: 14px; margin-left: 10px; color: #FF4747 ;">↓ 15.6%</span> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div style="flex: 0.3;"></div> |
|||
|
|||
<div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;"> |
|||
|
|||
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" /> |
|||
|
|||
<div style="display: flex;flex-direction: column; margin-left: 10px;"> |
|||
<span style="font-size: 20px;">￥3822945.45</span> |
|||
<div style="margin-top: 10px;"> |
|||
<span style="font-size: 14px;color: #999;">在途货物总价值</span> |
|||
<span style="font-size: 14px; margin-left: 10px; color: #FF4747 ;">↓ 15.6%</span> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
<div class="index_content_bottom"> |
|||
|
|||
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;"> |
|||
<span style="font-weight: 600;">阀值分析</span> |
|||
<div id="main1" ref="main1" class="middle"> |
|||
</div> |
|||
</div> |
|||
|
|||
<div style="flex: 0.1;"></div> |
|||
|
|||
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;"> |
|||
<span style="font-weight: 600;">在途货物分析</span> |
|||
<div id="main2" ref="main2" class="middle"> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
<div class="index_bottom"> |
|||
|
|||
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 0.4;"> |
|||
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;"> |
|||
<span style="font-weight: 600;">快捷操作</span> |
|||
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span> |
|||
</div> |
|||
|
|||
<div style="display: flex;align-items: center; margin-top: 10px;"> |
|||
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" /> |
|||
<span style="font-weight: 500;margin-left: 10px;">采购申请</span> |
|||
|
|||
</div> |
|||
|
|||
<div style="display: flex;align-items: center; margin-top: 10px;"> |
|||
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" /> |
|||
<span style="font-weight: 500;margin-left: 10px;">用款申请</span> |
|||
|
|||
</div> |
|||
|
|||
<div style="display: flex;align-items: center; margin-top: 10px;"> |
|||
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" /> |
|||
<span style="font-weight: 500;margin-left: 10px;">供应商管理</span> |
|||
|
|||
</div> |
|||
|
|||
<div style="display: flex;align-items: center; margin-top: 10px;"> |
|||
<img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" /> |
|||
<span style="font-weight: 500;margin-left: 10px;">数据上报</span> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div style="flex: 0.1;"></div> |
|||
|
|||
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;"> |
|||
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;"> |
|||
<span style="font-weight: 600;">最新消息</span> |
|||
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span> |
|||
</div> |
|||
|
|||
<div style="margin-top: 20px;" v-for="(item, index) in newMessageList" :key="index"> |
|||
<div |
|||
style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;" |
|||
@click="companyInfo(item.sid)"> |
|||
<span |
|||
style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1 ;-webkit-box-orient: vertical;">{{ item.name }}</span> |
|||
<span style="font-size: 13px;color: #999;">{{ item.date }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div style="flex: 0.1;"></div> |
|||
|
|||
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;"> |
|||
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;"> |
|||
<span style="font-weight: 600;">警报中心</span> |
|||
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span> |
|||
</div> |
|||
|
|||
<div style="margin-top: 20px;" v-for="(item, index) in larmCenterList" :key="index"> |
|||
<div |
|||
style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;" |
|||
@click="companyInfo(item.sid)"> |
|||
<span style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1 ; |
|||
-webkit-box-orient: vertical;">{{ item.name }}</span> |
|||
<span style="font-size: 13px;color: #999;">{{ item.date }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
</div> |
|||
<script> |
|||
import * as echarts from 'echarts'; |
|||
import { |
|||
login1 |
|||
} from '@/api/system/user/login.js' |
|||
export default { |
|||
name: '', |
|||
data() { |
|||
return { |
|||
token: '', |
|||
params: { |
|||
date: null |
|||
}, |
|||
info: { |
|||
date: "", |
|||
notice: "通知：请于2023年3月3日16点向***3189帐户回款1231234元。[点击回款]" |
|||
}, |
|||
newMessageList: [{ |
|||
sid: "1", |
|||
name: "[消息]您的订单已经审核完毕等待放款。", |
|||
date: "2023-01-01" |
|||
|
|||
}, { |
|||
sid: "2", |
|||
name: "[通知]通知仓库商品产生1级风险，请及时做出回复。", |
|||
date: "2023-01-01" |
|||
|
|||
}, { |
|||
sid: "3", |
|||
name: "[消息]您的订单由于商品不存在被退回。", |
|||
date: "2023-01-01" |
|||
|
|||
}, { |
|||
sid: "4", |
|||
name: "[消息]请于2023年3月3日16点向***3189帐户回款231234元。", |
|||
date: "2023-01-01" |
|||
|
|||
}], |
|||
larmCenterList: [{ |
|||
sid: "1", |
|||
name: "仓库于2023年3月3日产生1级风险。", |
|||
date: "2023-01-01" |
|||
|
|||
}, { |
|||
sid: "2", |
|||
name: "[通知]通知仓库商品产生1级出回复。", |
|||
date: "2023-01-01" |
|||
|
|||
}, { |
|||
sid: "3", |
|||
name: "[消息]您的订单由于商品不存在被退回。", |
|||
date: "2023-01-01" |
|||
|
|||
}, { |
|||
sid: "4", |
|||
name: "[消息]请于2**3189帐户回款231234元。", |
|||
date: "2023-01-01" |
|||
|
|||
} |
|||
|
|||
] |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.drawLine1(); |
|||
this.drawLine2(); |
|||
}, |
|||
|
|||
methods: { |
|||
show() { |
|||
this.drawLine1(); |
|||
this.drawLine2(); |
|||
}, |
|||
drawLine1() { |
|||
|
|||
// let mychart = echarts.init(this.$refs.main1) |
|||
var myChart = echarts.init(document.getElementById('main1')); |
|||
// 绘制图表 |
|||
myChart.setOption({ |
|||
tooltip: { |
|||
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 |
|||
} |
|||
|
|||
} |
|||
}, |
|||
grid: { |
|||
height: 220 |
|||
}, |
|||
legend: { |
|||
data: ['仓库货值', '在途货值', '阀值'] |
|||
}, |
|||
xAxis: [{ |
|||
type: 'category', |
|||
data: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7'], |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}], |
|||
yAxis: [{ |
|||
type: 'value', |
|||
name: '人民币/万元', |
|||
min: 0, |
|||
max: 250, |
|||
interval: 50, |
|||
axisLabel: { |
|||
formatter: '{value}' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'value', |
|||
name: '百分比%', |
|||
min: 0, |
|||
max: 25, |
|||
interval: 5, |
|||
axisLabel: { |
|||
formatter: '{value}' |
|||
} |
|||
} |
|||
], |
|||
series: [{ |
|||
name: '仓库货值', |
|||
type: 'bar', |
|||
tooltip: { |
|||
valueFormatter: function(value) { |
|||
return value + ' 万元'; |
|||
} |
|||
}, |
|||
data: [ |
|||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 |
|||
] |
|||
}, |
|||
{ |
|||
name: '在途货值', |
|||
type: 'bar', |
|||
tooltip: { |
|||
valueFormatter: function(value) { |
|||
return value + ' 万元'; |
|||
} |
|||
}, |
|||
data: [ |
|||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 |
|||
] |
|||
}, |
|||
{ |
|||
name: '阀值', |
|||
type: 'line', |
|||
yAxisIndex: 1, |
|||
tooltip: { |
|||
valueFormatter: function(value) { |
|||
return value + ' %'; |
|||
} |
|||
}, |
|||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] |
|||
} |
|||
] |
|||
}); |
|||
}, |
|||
|
|||
// 饼状图图初始化 |
|||
drawLine2() { |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
// let mychart = echarts.init(this.$refs.main2) |
|||
var myChart = echarts.init(document.getElementById('main2')); |
|||
// 绘制图表 |
|||
// console.log('option', obj) |
|||
myChart.setOption({ |
|||
legend: { |
|||
top: 'bottom' |
|||
}, |
|||
toolbox: { |
|||
show: true, |
|||
feature: { |
|||
mark: { |
|||
show: true |
|||
}, |
|||
// 数据图标 |
|||
dataView: { |
|||
show: false, |
|||
readOnly: false |
|||
}, |
|||
// 刷新图标 |
|||
restore: { |
|||
show: false |
|||
}, |
|||
// 下载图标 |
|||
saveAsImage: { |
|||
show: false |
|||
} |
|||
} |
|||
}, |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "item" |
|||
}, |
|||
series: [{ |
|||
name: '在途货物分析', |
|||
type: 'pie', |
|||
radius: [20, 100], |
|||
center: ['50%', '40%'], |
|||
roseType: 'area', |
|||
itemStyle: { |
|||
borderRadius: 8 |
|||
}, |
|||
data: [{ |
|||
"value": 2313123, |
|||
"name": "订单总额" |
|||
}, |
|||
{ |
|||
"value": 4359354, |
|||
"name": "实际到货价值" |
|||
}, |
|||
{ |
|||
"value": 2313123, |
|||
"name": "在途货价值" |
|||
}, |
|||
{ |
|||
"value": 2313123, |
|||
"name": "超出价值" |
|||
} |
|||
] |
|||
}] |
|||
}) |
|||
}, |
|||
|
|||
// getToken(){ |
|||
// let params = { |
|||
// password: "329653", |
|||
// roleSid: "", |
|||
// token: "", |
|||
// userName: "15097329653", |
|||
// verifyCode: "" |
|||
// } |
|||
// login1(params).then(res => { |
|||
// this.token = res.data.token |
|||
// window.sessionStorage.setItem('token', res.data.token) |
|||
// }) |
|||
// } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.imgDemo { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: radial-gradient(#fff, #f5f7f4, #fff); |
|||
} |
|||
|
|||
.middle { |
|||
justify-content: center; |
|||
width: 100%; |
|||
height: 300px; |
|||
|
|||
} |
|||
|
|||
.index { |
|||
padding: 40px 80px; |
|||
background: #FFFFFF; |
|||
|
|||
.index_top { |
|||
|
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
|
|||
.index_top_text { |
|||
font-size: 25px; |
|||
font-weight: bold; |
|||
color: #000; |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.index_top_right { |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
color: #FF5046; |
|||
} |
|||
} |
|||
|
|||
.index_content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin-top: 30px; |
|||
|
|||
.index_content_top { |
|||
display: flex; |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.index_content_bottom { |
|||
display: flex; |
|||
flex-direction: row; |
|||
margin-top: 30px; |
|||
} |
|||
} |
|||
|
|||
.index_bottom { |
|||
margin-top: 20px; |
|||
display: flex; |
|||
} |
|||
} |
|||
|
|||
canvas {} |
|||
</style> |
|||
@ -0,0 +1,405 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<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"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form ref="queryParams" :model="queryParams" :inline="true" class="tab-header"> |
|||
<el-form-item label="日期"> |
|||
<el-date-picker v-model="queryParams.date" type="date" clearable value-format="yyyy-MM-dd" |
|||
placeholder="选择日期" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center;"> |
|||
<el-button type="primary" size="small" icon="el-icon-search" @click="dosearch">查询</el-button> |
|||
<el-button type="primary" size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div style="margin-top: 30px;"> |
|||
<span>当前数据</span> |
|||
<span style="margin-left: 10px;">{{nowDate}}</span> |
|||
</div> |
|||
|
|||
<div class="current-data"> |
|||
<div class="left"> |
|||
<div style="display: flex;flex-direction: column;justify-content: center; margin-top: 30px;"> |
|||
<span class="item"><span class="item_lift">•</span>订单总额<span class="item_text">{{listGoodsOnWays.orderAmount}}</span></span> |
|||
<span class="item"><span class="item_lift">•</span>实际到货价值<span class="item_text">{{listGoodsOnWays.arrivedGoodsValue}}</span></span> |
|||
<span class="item"><span class="item_lift">•</span>在途货价值<span class="item_text">{{listGoodsOnWays.onWayGoodsValue}}</span></span> |
|||
<span class="item"><span class="item_lift">•</span>超出价值<span class="item_text">{{listGoodsOnWays.exceedGoodsValue}}</span></span> |
|||
</div> |
|||
|
|||
</div> |
|||
<div id="main" class="middle" style="margin-top: -40px;"> |
|||
|
|||
</div> |
|||
<div style="width: 50%;margin-left: 20px;margin-top: 30px;"> |
|||
<el-table v-loading="tableLoading" :data="listArrivedEarlyWarning" border style="width: 100%"> |
|||
<el-table-column width="60" label="序号" prop="num" align="center" /> |
|||
<el-table-column label="供应商名称" prop="supplierName" align="center" /> |
|||
<el-table-column width="120" label="到货日期" prop="allArrivedDate" align="center" /> |
|||
<el-table-column width="100" label="是否延期" prop="isDelay" align="center" /> |
|||
</el-table> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from '@/api/supervise/goodsonway' |
|||
import ButtonBar from '@/components/ButtonBar' |
|||
import Pagination from '@/components/pagination' |
|||
import pageye from '@/components/pagination/pageye' |
|||
import * as echarts from 'echarts'; |
|||
|
|||
export default { |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
pageye |
|||
}, |
|||
data() { |
|||
return { |
|||
myCharta: null, |
|||
btndisabled: false, |
|||
viewState: 1, // 1、列表 2、添加 3、修改 4、查看 |
|||
isSearchShow: false, |
|||
searchxianshitit: '显示查询条件', |
|||
tableLoading: false, |
|||
tableKey: 0, |
|||
btnList: [ // 右上角按钮 |
|||
{ |
|||
type: 'success', |
|||
size: 'small', |
|||
icon: 'export', |
|||
btnKey: 'build', |
|||
btnLabel: '导出' |
|||
}, |
|||
{ |
|||
type: 'info', |
|||
size: 'small', |
|||
icon: 'cross', |
|||
btnKey: 'doClose', |
|||
btnLabel: '关闭' |
|||
} |
|||
], |
|||
queryParams: { |
|||
date: "", |
|||
}, |
|||
nowDate: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(), |
|||
listGoodsOnWays: { |
|||
orderAmount: "", |
|||
arrivedGoodsValue: "", |
|||
onWayGoodsValue: "", |
|||
exceedGoodsValue: "", |
|||
}, |
|||
listArrivedEarlyWarning: [{ |
|||
num: '1', |
|||
supplierName: '中粮可口可乐饮料（河北）有限公司', |
|||
allArrivedDate: '2022.12.29', |
|||
isDelay: '是' |
|||
}, |
|||
{ |
|||
num: '2', |
|||
supplierName: '中顺洁柔纸业股份有限公司', |
|||
allArrivedDate: '2022.12.27', |
|||
isDelay: '否' |
|||
}, |
|||
{ |
|||
num: '3', |
|||
supplierName: '今麦郎食品股份有限公司石家庄分公司', |
|||
allArrivedDate: '2022.12.23', |
|||
isDelay: '否' |
|||
}, |
|||
{ |
|||
num: '4', |
|||
supplierName: '农夫山泉股份有限公司', |
|||
allArrivedDate: '2022.12.25', |
|||
isDelay: '是' |
|||
}, |
|||
{ |
|||
num: '5', |
|||
supplierName: '北京百事可乐饮料有限公司', |
|||
allArrivedDate: '2022.12.12', |
|||
isDelay: '否' |
|||
}, |
|||
{ |
|||
num: '6', |
|||
supplierName: '今麦郎食品股份有限公司石家庄分公司', |
|||
allArrivedDate: '2022.12.02', |
|||
isDelay: '是' |
|||
}, |
|||
{ |
|||
num: '7', |
|||
supplierName: '农夫山泉股份有限公司', |
|||
allArrivedDate: '2022.12.09', |
|||
isDelay: '否' |
|||
}, |
|||
{ |
|||
num: '8', |
|||
supplierName: '北京百事可乐饮料有限公司', |
|||
allArrivedDate: '2022.12.20', |
|||
isDelay: '是' |
|||
}, |
|||
], |
|||
analysisChartData: { |
|||
legend: { |
|||
top: 'bottom' |
|||
}, |
|||
toolbox: { |
|||
show: true, |
|||
feature: { |
|||
mark: { |
|||
show: true |
|||
}, |
|||
// 数据图标 |
|||
dataView: { |
|||
show: false, |
|||
readOnly: false |
|||
}, |
|||
// 刷新图标 |
|||
restore: { |
|||
show: false |
|||
}, |
|||
// 下载图标 |
|||
saveAsImage: { |
|||
show: false |
|||
} |
|||
} |
|||
}, |
|||
series: [{ |
|||
name: 'Nightingale Chart', |
|||
type: 'pie', |
|||
radius: [30, 150], |
|||
center: ['50%', '50%'], |
|||
roseType: 'area', |
|||
itemStyle: { |
|||
borderRadius: 8 |
|||
}, |
|||
data: [{ |
|||
"value": 2313123, |
|||
"name": "订单总额" |
|||
}, |
|||
{ |
|||
"value": 4359354, |
|||
"name": "实际到货价值" |
|||
}, |
|||
{ |
|||
"value": 2313123, |
|||
"name": "在途货价值" |
|||
}, |
|||
{ |
|||
"value": 2313123, |
|||
"name": "超出价值" |
|||
} |
|||
] |
|||
}] |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
console.log('33333') |
|||
this.loadList() |
|||
}, |
|||
// beforeDestroy() { |
|||
// if (this.myCharta) { |
|||
// this.myCharta.dispose() |
|||
// this.myCharta = null |
|||
// } |
|||
// }, |
|||
mounted() { |
|||
// 初始化按钮 |
|||
this.$refs['btnbar'].setButtonList(this.btnList) |
|||
// |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = '隐藏查询条件' |
|||
} else { |
|||
this.searchxianshitit = '显示查询条件' |
|||
} |
|||
}, |
|||
// 右上角点击事件 |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case 'build': // 导出 |
|||
this.doBuild() |
|||
break |
|||
case 'doClose': // 关闭 |
|||
this.doClose() |
|||
break |
|||
default: |
|||
break |
|||
} |
|||
}, |
|||
loadList() { |
|||
this.tableLoading = true |
|||
let _this = this |
|||
console.log('22222') |
|||
req.initData(_this.queryParams).then((resp) => { |
|||
if (resp.success) { |
|||
console.log('1111', resp.data) |
|||
const data = resp.data |
|||
_this.listGoodsOnWays = data.listGoodsOnWays |
|||
_this.listArrivedEarlyWarning = data.listArrivedEarlyWarning |
|||
this.drawLine(data.analysisChartData) |
|||
this.tableLoading = false |
|||
|
|||
} else { |
|||
// 根据resp.code进行异常情况处理 |
|||
_this.dataList = [] |
|||
_this.listSalesChannelData = [] |
|||
} |
|||
}).catch(e => { |
|||
console.log('eeeee', e) |
|||
_this.tableLoading = false |
|||
}) |
|||
}, |
|||
// 饼状图图初始化 |
|||
drawLine(obj) { |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
var myChart = echarts.init(document.getElementById('main')); |
|||
// 绘制图表 |
|||
console.log('option', obj) |
|||
myChart.setOption({ |
|||
legend: { |
|||
top: 'bottom' |
|||
}, |
|||
toolbox: { |
|||
show: true, |
|||
feature: { |
|||
mark: { |
|||
show: true |
|||
}, |
|||
// 数据图标 |
|||
dataView: { |
|||
show: false, |
|||
readOnly: false |
|||
}, |
|||
// 刷新图标 |
|||
restore: { |
|||
show: false |
|||
}, |
|||
// 下载图标 |
|||
saveAsImage: { |
|||
show: false |
|||
} |
|||
} |
|||
}, |
|||
series: [{ |
|||
name: 'Nightingale Chart', |
|||
type: 'pie', |
|||
radius: [30, 150], |
|||
center: ['50%', '50%'], |
|||
roseType: 'area', |
|||
itemStyle: { |
|||
borderRadius: 8 |
|||
}, |
|||
data: obj |
|||
}] |
|||
}) |
|||
}, |
|||
|
|||
dosearch() { |
|||
this.nowDate = this.queryParams.date; |
|||
this.loadList(); |
|||
|
|||
}, |
|||
resetQuery() { |
|||
this.queryParams = { |
|||
date: "", |
|||
} |
|||
this.loadList(); |
|||
}, |
|||
|
|||
// 导出 |
|||
doBuild() { |
|||
this.$message({ |
|||
showClose: true, |
|||
type: 'success', |
|||
message: '功能暂未完善...' |
|||
}) |
|||
}, |
|||
// 返回 |
|||
doClose() { |
|||
this.$store.dispatch('tagsView/delView', this.$route) |
|||
this.$router.go(-1) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.current-data { |
|||
width: 100%; |
|||
height: 500px; |
|||
display: flex; |
|||
} |
|||
|
|||
.current-data .top { |
|||
height: 30px; |
|||
line-height: 30px; |
|||
width: 100%; |
|||
} |
|||
|
|||
.current-data .left { |
|||
width: 250px; |
|||
height: 600px; |
|||
} |
|||
|
|||
.item { |
|||
margin-top: 35px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.item_lift { |
|||
margin-left: 10px; |
|||
padding-right: 5px; |
|||
font-size: 30px; |
|||
color: blue; |
|||
} |
|||
|
|||
.item_text { |
|||
padding-left: 15px; |
|||
} |
|||
|
|||
.current-data .middle { |
|||
width: 500px; |
|||
height: 400px; |
|||
float: left; |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.current-data .right { |
|||
background-color: red; |
|||
width: 700px; |
|||
height: 600px; |
|||
float: left; |
|||
margin-left: 10px; |
|||
|
|||
} |
|||
|
|||
.current-data .right .top { |
|||
text-align: center; |
|||
} |
|||
|
|||
.current-data .right .charts { |
|||
height: 480px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,399 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<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"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form ref="queryParams" :model="queryParams" :inline="true" class="tab-header"> |
|||
<el-form-item label="日期"> |
|||
<el-date-picker v-model="queryParams.date" type="date" clearable value-format="yyyy-MM-dd" |
|||
placeholder="选择日期" /> |
|||
</el-form-item> |
|||
<el-form-item label="类别"> |
|||
<el-select v-model="queryParams.type" filterable placeholder="全部" clearable> |
|||
<el-option v-for="item in state_list" :key="item.dictKey" :label="item.dictValue" |
|||
:value="item.dictKey"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center;"> |
|||
<el-button type="primary" size="small" icon="el-icon-search" @click="dosearch">查询</el-button> |
|||
<el-button type="primary" size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<el-form> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<div class="listtop" style="border: 0;"> |
|||
<div class="tit">当日数据 {{nowDate}}</div> |
|||
</div> |
|||
|
|||
<div> |
|||
<el-table v-loading="tableLoading" :key="tableKey" :data="dataList" border style="width: 100%" |
|||
show-summary :summary-method="getSummaries"> |
|||
<el-table-column prop="name" label="现金流量-经营活动产生的现金流量(元)" align="center" /> |
|||
<el-table-column prop="totalPrice" label="总额" align="center" width="150" /> |
|||
</el-table> |
|||
</div> |
|||
<div style="margin-top: 50px;"> |
|||
<el-table v-loading="tableLoading" :data="listSalesChannelData" border style="width: 100%"> |
|||
<el-table-column width="200" label="销售渠道类别" prop="salesChannelCategory" align="center" /> |
|||
<el-table-column label="总额" prop="totalAmount" align="center" /> |
|||
<el-table-column label="应收帐款" prop="accountsReceivable" align="center" /> |
|||
<el-table-column label="扣除应收" prop="deductionAccountsReceivable" align="center" /> |
|||
</el-table> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="16"> |
|||
<!-- <div style="margin-left: 50px;margin-top: 20px;"> --> |
|||
|
|||
<div id="main" style="width: 100%;height: 100%;min-height: 480px; margin-top: 30px;"></div> |
|||
|
|||
<!-- </div> --> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
<div style="display: flex; flex-direction: row;margin-top: 20px;width: 100%;"> |
|||
<!-- <div style="width: 35%;"> |
|||
<div class="tit">当日数据 {{nowDate}}</div> |
|||
<div style="margin-top: 30px;"> |
|||
<el-table v-loading="tableLoading" :key="tableKey" :data="dataList" border style="width: 100%" |
|||
show-summary :summary-method="getSummaries"> |
|||
<el-table-column prop="name" label="现金流量-经营活动产生的现金流量(元)" align="center" /> |
|||
<el-table-column prop="totalPrice" label="总额" align="center" width="150" /> |
|||
</el-table> |
|||
</div> |
|||
<div style="margin-top: 50px;"> |
|||
<el-table v-loading="tableLoading" :data="listSalesChannelData" border style="width: 100%"> |
|||
<el-table-column width="200" label="销售渠道类别" prop="salesChannelCategory" align="center" /> |
|||
<el-table-column label="总额" prop="totalAmount" align="center" /> |
|||
<el-table-column label="应收帐款" prop="accountsReceivable" align="center" /> |
|||
<el-table-column label="扣除应收" prop="deductionAccountsReceivable" align="center" /> |
|||
</el-table> |
|||
</div> |
|||
</div> --> |
|||
<div style="width: 65%;margin-left: 50px;margin-top: 20px;"> |
|||
|
|||
<div id="main" style="width: 800px; height: 500px;margin-top: 30px;"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from '@/api/supervise/salesreport' |
|||
import ButtonBar from '@/components/ButtonBar' |
|||
import Pagination from '@/components/pagination' |
|||
import pageye from '@/components/pagination/pageye' |
|||
import * as echarts from 'echarts'; |
|||
|
|||
export default { |
|||
name: 'XiaoshouXstjTj', |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
pageye |
|||
}, |
|||
// components: { }, |
|||
data() { |
|||
return { |
|||
btndisabled: false, |
|||
viewState: 1, // 1、列表 2、添加 3、修改 4、查看 |
|||
isSearchShow: false, |
|||
searchxianshitit: '显示查询条件', |
|||
tableLoading: false, |
|||
tableKey: 0, |
|||
dataList: [{ |
|||
name: '销售商品收到的现金(元)', |
|||
totalPrice: '10000' |
|||
}, |
|||
{ |
|||
name: '收到其他与经营活动有关的现金(元)', |
|||
totalPrice: '2000' |
|||
} |
|||
], |
|||
listSalesChannelData: [{ |
|||
salesChannelCategory: '连网连锁店', |
|||
totalAmount: '2000000', |
|||
accountsReceivable: '31,914', |
|||
deductionAccountsReceivable: '35,793' |
|||
}, |
|||
{ |
|||
salesChannelCategory: '连锁内加盟', |
|||
totalAmount: '28,700', |
|||
accountsReceivable: '28,749', |
|||
deductionAccountsReceivable: '58,339' |
|||
}, |
|||
{ |
|||
salesChannelCategory: '配送中心', |
|||
totalAmount: '-1241.81', |
|||
accountsReceivable: '28,749', |
|||
deductionAccountsReceivable: '58,339' |
|||
}, |
|||
{ |
|||
salesChannelCategory: '连锁外加盟', |
|||
totalAmount: '29822.44', |
|||
accountsReceivable: '28,749', |
|||
deductionAccountsReceivable: '58,339' |
|||
} |
|||
], |
|||
financialAnalysisChartData: {}, |
|||
// 类型1.全部,2.常规商品3.烟草 |
|||
state_list: [{ |
|||
dictKey: 1, |
|||
dictValue: '全部' |
|||
}, |
|||
{ |
|||
dictKey: 2, |
|||
dictValue: '常规商品' |
|||
}, { |
|||
dictKey: 3, |
|||
dictValue: '烟草' |
|||
} |
|||
], |
|||
btnList: [ // 右上角按钮 |
|||
{ |
|||
type: 'success', |
|||
size: 'small', |
|||
icon: 'export', |
|||
btnKey: 'build', |
|||
btnLabel: '导出' |
|||
}, |
|||
{ |
|||
type: 'info', |
|||
size: 'small', |
|||
icon: 'cross', |
|||
btnKey: 'doClose', |
|||
btnLabel: '关闭' |
|||
} |
|||
], |
|||
queryParams: { |
|||
customerSid: '11', |
|||
date: "", |
|||
type: "" // 类别key |
|||
}, |
|||
|
|||
nowDate: this.getDate(), |
|||
// 柱状图 |
|||
option: { |
|||
legend: {}, |
|||
tooltip: {}, |
|||
dataset: { |
|||
// 提供一份数据。 |
|||
source: [ |
|||
['product', '分销商进货额', '实际发货额'], |
|||
['1-1', "30816", '28700'], |
|||
['1-2', '20960', '15471'], |
|||
['1-3', 31465, 41573], |
|||
['1-4', 32796, 26290], |
|||
['1-5', 31914, 28749], |
|||
['1-6', 35793, 58339], |
|||
['1-7', 33370, 16888] |
|||
] |
|||
}, |
|||
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。 |
|||
xAxis: { |
|||
type: 'category' |
|||
}, |
|||
// 声明一个 Y 轴，数值轴。 |
|||
yAxis: {}, |
|||
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。 |
|||
series: [{ |
|||
type: 'bar' |
|||
}, { |
|||
type: 'bar' |
|||
}] |
|||
}, |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 初始化按钮 |
|||
this.$refs['btnbar'].setButtonList(this.btnList) |
|||
// this.drawLine(); |
|||
}, |
|||
created() { |
|||
this.loadList() |
|||
}, |
|||
methods: { |
|||
getDate(){ |
|||
var tempDate = new Date() // 获取今天的日期 |
|||
tempDate.setDate(tempDate.getDate() - 1) // 今天的前N天的日期，N自定义 |
|||
var endDate = tempDate.getFullYear() + '-' + (tempDate.getMonth() + 1) + '-' + tempDate.getDate() |
|||
console.log(endDate) |
|||
return endDate |
|||
}, |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = '隐藏查询条件' |
|||
} else { |
|||
this.searchxianshitit = '显示查询条件' |
|||
} |
|||
}, |
|||
// 右上角点击事件 |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case 'build': // 导出 |
|||
this.doBuild() |
|||
break |
|||
case 'doClose': // 关闭 |
|||
this.doClose() |
|||
break |
|||
default: |
|||
break |
|||
} |
|||
}, |
|||
loadList() { |
|||
this.tableLoading = true |
|||
|
|||
let _this = this |
|||
req.initData(_this.queryParams).then((resp) => { |
|||
if (resp.success) { |
|||
console.log('1111', resp.data) |
|||
const data = resp.data |
|||
_this.dataList = data.financialData |
|||
_this.listSalesChannelData = data.listSalesChannelData |
|||
_this.drawLine(data.financialAnalysisChartData) |
|||
this.tableLoading = false |
|||
} else { |
|||
// 根据resp.code进行异常情况处理 |
|||
_this.dataList = [] |
|||
_this.listSalesChannelData = [] |
|||
} |
|||
}).catch(e => { |
|||
console.log('eeeee', e) |
|||
_this.tableLoading = false |
|||
}) |
|||
}, |
|||
// 柱状图初始化 |
|||
drawLine(obj) { |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
var myChart = echarts.init(document.getElementById('main')); |
|||
// 绘制图表 |
|||
console.log('option', obj) |
|||
myChart.setOption({ |
|||
legend: {}, |
|||
tooltip: {}, |
|||
dataset: { |
|||
// 提供一份数据。 |
|||
source: obj |
|||
}, |
|||
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。 |
|||
xAxis: { |
|||
type: 'category' |
|||
}, |
|||
// 声明一个 Y 轴，数值轴。 |
|||
yAxis: {}, |
|||
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。 |
|||
series: [{ |
|||
type: 'bar' |
|||
}, { |
|||
type: 'bar' |
|||
}] |
|||
}) |
|||
}, |
|||
|
|||
dosearch() { |
|||
|
|||
this.nowDate = this.queryParams.date; |
|||
this.loadList(); |
|||
|
|||
}, |
|||
resetQuery() { |
|||
this.queryParams = { |
|||
customerSid: '', |
|||
date: "", |
|||
type: '' // 类别key |
|||
} |
|||
this.loadList(); |
|||
|
|||
}, |
|||
// 合计 |
|||
getSummaries(param) { |
|||
const { |
|||
columns, |
|||
data |
|||
} = param |
|||
const sums = [] |
|||
columns.forEach((column, index) => { |
|||
if (index === 0) { |
|||
sums[index] = '本项合计' |
|||
return |
|||
} |
|||
const values = data.map(item => Number(item[column.property])) |
|||
if (column.property === 'totalPrice') { |
|||
sums[index] = values.reduce((prev, curr) => { |
|||
const value = Number(curr) |
|||
if (!isNaN(value)) { |
|||
return prev + curr |
|||
} else { |
|||
return prev |
|||
} |
|||
}, 0) |
|||
sums[index] += '' |
|||
} else { |
|||
if (!values.every(value => isNaN(value))) { |
|||
sums[index] = values.reduce((prev, curr) => { |
|||
const value = Number(curr) |
|||
if (!isNaN(value)) { |
|||
return prev + curr |
|||
} else { |
|||
return prev |
|||
} |
|||
}, 0) |
|||
sums[index] += '' |
|||
this.amount = sums[index] += '' |
|||
} else { |
|||
sums[index] = '' |
|||
} |
|||
} |
|||
}) |
|||
return sums |
|||
}, |
|||
// 导出 |
|||
doBuild() { |
|||
this.$message({ |
|||
showClose: true, |
|||
type: 'success', |
|||
message: '功能暂未完善...' |
|||
}) |
|||
}, |
|||
// 返回 |
|||
doClose() { |
|||
this.$store.dispatch('tagsView/delView', this.$route) |
|||
this.$router.go(-1) |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.wenjiantit { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
margin: 25px 0 10px 0; |
|||
} |
|||
|
|||
.forminfo { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.listcon { |
|||
height: calc(100vh - 250px); |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,480 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div style="margin-left:16px;"> |
|||
<div v-show="viewState == 1"> |
|||
<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"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form ref="queryParams" :model="queryParams" :inline="true" class="tab-header"> |
|||
<el-form-item label="日期"> |
|||
<el-date-picker v-model="queryParams.date" type="date" clearable value-format="yyyy-MM-dd" |
|||
placeholder="选择日期" /> |
|||
</el-form-item> |
|||
<el-form-item label="类别"> |
|||
<el-select v-model="queryParams.type" filterable placeholder="全部" clearable> |
|||
<el-option v-for="item in state_list" :key="item.dictKey" :label="item.dictValue" |
|||
:value="item.dictKey"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center;"> |
|||
<el-button type="primary" size="small" icon="el-icon-search" @click="dosearch">查询</el-button> |
|||
<el-button type="primary" size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div id="main" style="width: 100%;height: 500px;min-height: 480px;margin-top: 30px;"></div> |
|||
|
|||
<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" /> |
|||
<el-table-column prop="stockValue" label="仓库货值(元)" align="center" /> |
|||
<el-table-column prop="onWayGoodsValue" label="在途货值(元)" align="center" /> |
|||
<el-table-column prop="storeValue" label="门店货值(元)" align="center" /> |
|||
<el-table-column prop="accountBalance" label="账户余额(元)" align="center" /> |
|||
<el-table-column prop="accountsReceivable" label="应收账款(元)" align="center" /> |
|||
<el-table-column prop="paymentAmount" label="借款金额(元)" align="center" /> |
|||
<el-table-column prop="threshold" label="阀值" align="center" /> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- End 项目列表 --> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<!-- 翻页 --> |
|||
<pagination v-show="thresholdAnalysisTable.length > 0" :total="queryParams.total" |
|||
:page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="loadList" /> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from '@/api/supervise/thresholdanalysis' |
|||
import ButtonBar from '@/components/ButtonBar' |
|||
import Pagination from '@/components/pagination' |
|||
import pageye from '@/components/pagination/pageye' |
|||
import * as echarts from 'echarts'; |
|||
|
|||
export default { |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
pageye |
|||
}, |
|||
// components: { }, |
|||
data() { |
|||
return { |
|||
btndisabled: false, |
|||
viewState: 1, // 1、列表 2、添加 3、修改 4、查看 |
|||
isSearchShow: false, |
|||
searchxianshitit: '显示查询条件', |
|||
tableLoading: false, |
|||
tableKey: 0, |
|||
// 类型1.全部,2.常规商品3.烟草 |
|||
state_list: [{ |
|||
dictKey: 1, |
|||
dictValue: '全部' |
|||
}, |
|||
{ |
|||
dictKey: 2, |
|||
dictValue: '常规商品' |
|||
}, { |
|||
dictKey: 3, |
|||
dictValue: '烟草' |
|||
} |
|||
], |
|||
btnList: [ // 右上角按钮 |
|||
{ |
|||
type: 'success', |
|||
size: 'small', |
|||
icon: 'export', |
|||
btnKey: 'build', |
|||
btnLabel: '导出' |
|||
}, |
|||
{ |
|||
type: 'info', |
|||
size: 'small', |
|||
icon: 'cross', |
|||
btnKey: 'doClose', |
|||
btnLabel: '关闭' |
|||
} |
|||
], |
|||
queryParams: { |
|||
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: '' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis' |
|||
}, |
|||
legend: { |
|||
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: { |
|||
show:false |
|||
} |
|||
} |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
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] |
|||
}, |
|||
{ |
|||
name: 'Search Engine', |
|||
type: 'line', |
|||
stack: 'Total', |
|||
data: [820, 932, 901, 934, 1290, 1330, 1320] |
|||
} |
|||
] |
|||
} |
|||
|
|||
|
|||
} |
|||
}, |
|||
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', |
|||
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 |
|||
} |
|||
|
|||
} |
|||
}, |
|||
legend: { |
|||
data: _legend |
|||
}, |
|||
xAxis: [{ |
|||
type: 'category', |
|||
data: _xdata, |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}], |
|||
yAxis: [{ |
|||
type: 'value', |
|||
name: '人民币', |
|||
min: 0, |
|||
max: 10000, |
|||
interval: 1000, |
|||
axisLabel: { |
|||
formatter: '{value} 万元' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'value', |
|||
name: '百分比', |
|||
min: 0, |
|||
max: 100, |
|||
interval: 10, |
|||
axisLabel: { |
|||
formatter: '{value} %' |
|||
} |
|||
} |
|||
], |
|||
series: _ss |
|||
}); |
|||
|
|||
}, |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = '隐藏查询条件' |
|||
} else { |
|||
this.searchxianshitit = '显示查询条件' |
|||
} |
|||
}, |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case 'toAdd': |
|||
this.toAdd() |
|||
break |
|||
case 'doDel': |
|||
this.doDel() |
|||
break |
|||
case 'doClose': |
|||
this.doClose() |
|||
break |
|||
default: |
|||
break |
|||
} |
|||
}, |
|||
loadList() { |
|||
this.tableLoading = true |
|||
let _this = this |
|||
req.listPage(_this.queryParams).then((resp) => { |
|||
_this.tableLoading = false |
|||
if (resp.success) { |
|||
console.log('11111',resp.data) |
|||
const data = resp.data |
|||
_this.tableLoading = false |
|||
this.initChart(resp.data) |
|||
} else { |
|||
// 根据resp.code进行异常情况处理 |
|||
_this.thresholdAnalysisTable = [] |
|||
_this.analysisChartData = {} |
|||
_this.queryParams.total = 0 |
|||
} |
|||
}).catch(() => { |
|||
_this.tableLoading = false |
|||
}) |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.queryParams.current - 1) * this.queryParams.size |
|||
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; |
|||
this.loadList(); |
|||
|
|||
}, |
|||
resetQuery() { |
|||
this.queryParams = { |
|||
current: 1, |
|||
size: 5, |
|||
total: 0, |
|||
params: { |
|||
customerSid: '', |
|||
date: '', |
|||
type: '', |
|||
} |
|||
} |
|||
this.loadList() |
|||
}, |
|||
// 导出 |
|||
doBuild() { |
|||
this.$message({ |
|||
showClose: true, |
|||
type: 'success', |
|||
message: '功能暂未完善...' |
|||
}) |
|||
}, |
|||
// 返回 |
|||
doClose() { |
|||
this.$store.dispatch('tagsView/delView', this.$route) |
|||
this.$router.go(-1) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.current-data { |
|||
width: 100%; |
|||
height: 500px; |
|||
} |
|||
|
|||
.current-data .upper { |
|||
width: 100%; |
|||
height: 100px; |
|||
} |
|||
|
|||
.current-data .lower { |
|||
width: 100%; |
|||
height: 600px; |
|||
float: left; |
|||
margin-left: 10px; |
|||
|
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue