pjhmizn49
/
softwareEngineeringPractice
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ADD file via upload

Browse Source
main
pjhmizn49 1 year ago
parent 9b6b8c16b1
commit 8160c594ad
1 changed files with 277 additions and 0 deletions
Show Stats Download Patch File Download Diff File

277
flower_admin_front/src/views/statisticView.vue
Unescape View File

@ -0,0 +1,277 @@
<template>
<el-row>
<el-col :span="24">
<div class="num">
<el-card class="top-num" shadow="hover" :body-style="{display:'flex',padding:0}">
<i class="icon el-icon-s-goods" style="background:#2ec7c9"></i>
<div class="detail">
<p class="number">{{this.topData.order_pay_num}}</p>
<p class="desc">今日下单数</p>
</div>
</el-card>
<el-card class="top-num" shadow="hover" :body-style="{display:'flex',padding:0}">
<i class="icon el-icon-success" style="background:#2ec7c9"></i>
<div class="detail">
<p class="number">{{this.topData.order_ok_num}}</p>
<p class="desc">今日成交订单数</p>
</div>
</el-card>
<el-card class="top-num" shadow="hover" :body-style="{display:'flex',padding:0}">
<i class="icon el-icon-s-finance" style="background:#5ab1ef"></i>
<div class="detail">
<p class="number">￥{{this.topData.order_today_money}}</p>
<p class="desc">今日成交金额</p>
</div>
</el-card>
<el-card class="top-num" shadow="hover" :body-style="{display:'flex',padding:0}">
<i class="icon el-icon-s-finance" style="background:#5ab1ef"></i>
<div class="detail">
<p class="number">￥{{this.topData.order_month_money}}</p>
<p class="desc">本月成交金额</p>
</div>
</el-card>
<el-card class="top-num" shadow="hover" :body-style="{display:'flex',padding:0}">
<i class="icon el-icon-s-promotion" style="background:#ffb980"></i>
<div class="detail">
<p class="number">{{this.topData.order_delivery_num}}</p>
<p class="desc">待发货</p>
</div>
</el-card>
<el-card class="top-num" shadow="hover" :body-style="{display:'flex',padding:0}">
<i class="icon el-icon-s-release" style="background:#ffb980"></i>
<div class="detail">
<p class="number">{{this.topData.order_refund_num}}</p>
<p class="desc">待退款</p>
</div>
</el-card>
</div>
<el-card shadow="hover" style="height: 350px">
<!-- 折线图 -->
<div ref="echarts1" style="height: 330px;width: auto"></div>
</el-card>
<div class="bottom-num">
<!-- 柱状图 -->
<el-card shadow="hover" style="height:500px;width:48%;">
<div ref="echarts2" style="height: 450px; width: auto"></div>
</el-card>
<!-- 饼图 -->
<el-card shadow="hover" style="height:650px;width:48%">
<div ref="echarts3" style="height: 650px; width: auto"></div>
</el-card>
</div>
</el-col>
</el-row>
</template>
<script>
import Cookie from "js-cookie";
import * as echarts from "echarts";
import {watch} from "vue";
export default {
data(){
return {
timer:null,
//页面数据(上)
topData: [{
order_pay_num:1,
order_ok_num:1,
order_today_money:1.00,
order_month_money:1.00,
order_delivery_num:1,
order_refund_num:1
}],
//折线图
middleData: [{
'1月':1,
'2月':1,
'3月':1,
'4月':1,
'5月':1,
}],
//柱状图
bottomData1:[{
name:'',
value:1
}],
//饼图
bottomData2:[{
name:'',
value:1
}]
}
},
mounted(){
const _this = this
this.timer = setTimeout(() => {
//折线图
// 基于准备好的dom，初始化echarts实例
const echarts1 = echarts.init(this.$refs.echarts1)
// 指定图表的配置项和数据
const option1 = {
title: { text:'每月成交金额折线图' },
xAxis: { data: Object.keys(_this.middleData).reverse() },
yAxis: {},
tooltip: { trigger: 'item' },
series: [{
data: Object.values(_this.middleData).reverse(),
type: 'line'
}]
};
// 使用刚指定的配置项和数据显示图表。
echarts1.setOption(option1)
//柱状图
const echarts2 = echarts.init(this.$refs.echarts2)
const option2 = {
title: { text:'商品销售量TOP3' },
xAxis: {
data:_this.bottomData1.map(item => item.name),
// x轴文字配置
axisLabel: {
interval: 0,
// 文字换行
formatter: function (value) {
let res = ""; // 拼接加\n返回的类目项
let maxLength = 15; // 每项显示文字个数 数字设置几，就一行显示几个文字
let valLength = value.length; // X轴上的文字个数
let rowN = Math.ceil(valLength / maxLength); // 需要换行的行数
// 换行的行数大于1,
if (rowN > 1) {
for (let i = 0; i < rowN; i++) {
let temp = ""; //每次截取的字符串
let start = i * maxLength; //开始截取的位置
let end = start + maxLength; //结束截取的位置
temp = value.substring(start, end) + "\n";
res += temp; //拼接字符串
}
return res;
} else {
return value;
}
},
},
},
yAxis: {},
tooltip: { trigger: 'item' },
series: [{
data: _this.bottomData1.map(item => item.value),
type: 'bar',
color:'#62acee'
}]
}
echarts2.setOption(option2)
//饼图
const echarts3 = echarts.init(this.$refs.echarts3)
const option3 = {
title: { text:'花卉种类销售量占比' },
legend: {
top: '10%',
left: 'center'
},
tooltip: { trigger: 'item' },
series: [
{
type: 'pie',
radius: ['30%', '60%'],
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
data: _this.bottomData2
}
]
}
echarts3.setOption(option3)
},500);
},
beforeDestroy() { // 最后在beforeDestroy()生命周期内清除定时器：
clearTimeout(this.timer);
this.timer = null;
},
created() {
this.fetchData();
},
methods: {
fetchData(){
//获取统计信息
const _this=this;
try {
axios({
method: 'post',
url: 'http://localhost:8181/order/statistic',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
}
}).then(function (response){
if (response.data.code===200){
//查询成功
_this.topData = response.data.data.data_top;
_this.middleData = response.data.data.data_middle;
_this.bottomData1 = response.data.data.data_bottom1;
_this.bottomData2 = response.data.data.data_bottom2;
// console.log(_this.bottomData2)
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
}catch (error){
this.$message.warning('页面加载出错,请重试!')
}
},
}
}
</script>
<style>
.num{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.top-num{
width: 32%;
margin-bottom: 20px;
}
.icon{
width: 70px;
height: 55px;
padding-top: 15px;
font-size: 30px;
text-align: center;
line-height: 70px;
color:#fff;
}
.detail{
margin-left: 15px;
margin-top: 5px;
display: flex;
flex-direction: column;
justify-content: center;
}
.number{
font-size: 25px;
margin: -5px;
line-height: 25px;
}
.desc{
font-size: 14px;
color: #999;
text-align: center;
margin-bottom: 0;
}
.bottom-num{
margin-top: 20px;
display: flex;
justify-content: space-between;
}
</style>
Write Preview
Loading…
Cancel
Save