jianguan
/
supervise-monitor-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页图片

master
q4444zpf 2 years ago
parent
b0de9e7ba2
commit
c624842bcc
4 changed files with 1542 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/cgsp.png
  2. 514
      src/views/index1.vue
  3. 514
      src/views/index2.vue
  4. 514
      src/views/index3.vue

BIN
src/assets/images/cgsp.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

514
src/views/index1.vue
View File

@ -0,0 +1,514 @@
<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
]
}
]
});
},
// 饼状图图初始化
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: 60px;
}
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
.index_bottom {
margin-top: 20px;
display: flex;
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
}
canvas {}
</style>

514
src/views/index2.vue
View File

@ -0,0 +1,514 @@
<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
]
}
]
});
},
// 饼状图图初始化
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;
}
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
.index_bottom {
margin-top: 20px;
display: flex;
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
}
canvas {}
</style>

514
src/views/index3.vue
View File

@ -0,0 +1,514 @@
<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
]
}
]
});
},
// 饼状图图初始化
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;
}
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
.index_bottom {
margin-top: 20px;
display: flex;
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
}
canvas {}
</style>
Write Preview
Loading…
Cancel
Save