13 changed files with 1391 additions and 15 deletions
Binary file not shown.
|
After Width: | Height: | Size: 461 KiB |
|
After Width: | Height: | Size: 270 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 307 B |
@ -0,0 +1,579 @@ |
|||
<template> |
|||
<div |
|||
ref="charts" |
|||
style="min-width: 12vw;max-height:220px;height:220px;" |
|||
/> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts' |
|||
import { debounce } from '@/utils' |
|||
|
|||
export default { |
|||
props: { |
|||
config: Object |
|||
}, |
|||
watch: { |
|||
config: { |
|||
handler: function(val) { |
|||
this.$nextTick(() => { |
|||
this.init() |
|||
}) |
|||
}, |
|||
immediate: true, |
|||
deep: true, |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
computed: { |
|||
option() { |
|||
let percent = 0; |
|||
if (this.config.total === 0) { |
|||
percent = 0 |
|||
} else { |
|||
percent = ((this.config.value / this.config.total) * 100).toFixed(2) |
|||
} |
|||
const center = ['50%', '55%'] |
|||
const self = this |
|||
return { |
|||
grid: { |
|||
left: '0', |
|||
top: '0', |
|||
right: '0', |
|||
bottom: '0', |
|||
containLabel: false |
|||
}, |
|||
// backgroundColor: '#0E1327', |
|||
backgroundColor: 'transparent', |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
|
|||
angleAxis: { |
|||
show: false, |
|||
max: 100 * 360 / 270, //-45度到225度，二者偏移值是270度除360度 |
|||
type: 'value', |
|||
startAngle: 225, //极坐标初始角度 |
|||
splitLine: { |
|||
show: false |
|||
} |
|||
}, |
|||
barMaxWidth: '11%', //圆环宽度 |
|||
radiusAxis: { |
|||
show: false, |
|||
type: 'category' |
|||
}, |
|||
//圆环位置和大小 |
|||
polar: { |
|||
center: center, |
|||
radius: '100%' |
|||
}, |
|||
|
|||
series: [ |
|||
|
|||
// 最外圈的边框(左右) |
|||
{ |
|||
name: '内部透明起始结束的圆边', |
|||
type: 'gauge', |
|||
center: center, |
|||
radius: '80%', |
|||
splitNumber: 10, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: [ |
|||
// 右/下/左/上 |
|||
[0.3, new echarts.graphic.LinearGradient( |
|||
1, 0, 0, 0, |
|||
[{ |
|||
offset: 0.4, |
|||
color: this.config.opacityBorder[0] |
|||
}, { |
|||
offset: 1, |
|||
color: this.config.opacityBorder[1] |
|||
}] |
|||
)], |
|||
[0.7, new echarts.graphic.LinearGradient( |
|||
0, 0, 1, 0, |
|||
[{ |
|||
offset: 0, |
|||
color: this.config.opacityBorder[0] |
|||
}, { |
|||
offset: 1, |
|||
color: this.config.opacityBorder[0] |
|||
}] |
|||
)], |
|||
[1, new echarts.graphic.LinearGradient( |
|||
0, 0, 1, 0, |
|||
[{ |
|||
offset: 0.4, |
|||
color: this.config.opacityBorder[0] |
|||
}, { |
|||
offset: 1, |
|||
color: this.config.opacityBorder[1] |
|||
}] |
|||
)] |
|||
], |
|||
width: 2 |
|||
} |
|||
}, |
|||
z: 4, |
|||
axisLabel: { |
|||
show: false |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
splitLine: { |
|||
show: false |
|||
}, |
|||
//仪表盘详情，用于显示数据。 |
|||
detail: { |
|||
show: true, |
|||
offsetCenter: [0, '95%'], |
|||
color: '#fff', |
|||
formatter(params) { |
|||
return `{t1|${self.config.valueLabel}}\n{t2|${self.config.totalLabel}}` |
|||
}, |
|||
rich: { |
|||
t1: { |
|||
fontFamily: 'PingFang TC', |
|||
fontSize: '5%', |
|||
color: '#C6CEEC', |
|||
lineHeight: 18 |
|||
}, |
|||
t2: { |
|||
fontFamily: 'PingFang TC', |
|||
fontSize: '10%', |
|||
color: '#FFFFFF', |
|||
lineHeight: 18 |
|||
} |
|||
} |
|||
}, |
|||
label: { |
|||
show: false |
|||
}, |
|||
pointer: { |
|||
show: false |
|||
}, |
|||
title: { |
|||
//标题 |
|||
show: false |
|||
}, |
|||
data: [ |
|||
{ |
|||
name: percent + '%', |
|||
value: percent |
|||
} |
|||
] |
|||
}, |
|||
|
|||
// 带有阴影的边框 |
|||
{ |
|||
name: 'border', |
|||
type: 'pie', |
|||
clockWise: false, |
|||
radius: '70%', |
|||
center: center, |
|||
animation: false, |
|||
z: 0, |
|||
data: [{ |
|||
value: 0, |
|||
color: 'transparent', |
|||
label: { |
|||
show: false |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
emphasis: { |
|||
disabled: true |
|||
}, |
|||
select: { |
|||
disabled: true |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
itemStyle: { |
|||
color: '#071422', |
|||
shadowColor: this.config.shadowColor, |
|||
shadowBlur: 25, |
|||
shadowOffsetX: 0, |
|||
shadowOffsetY: -25 |
|||
} |
|||
}] |
|||
}, |
|||
// 阴影的边框(中间) |
|||
{ |
|||
name: '内部透明起始结束的圆边', |
|||
type: 'gauge', |
|||
center: center, |
|||
radius: '70%', |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: [ |
|||
// 右/下/左/上 |
|||
[0.4, new echarts.graphic.LinearGradient( |
|||
1, 0, 0, 0, |
|||
[{ |
|||
offset: 0, |
|||
color: this.config.opacityBorder[0] |
|||
}, { |
|||
offset: 1, |
|||
color: this.config.opacityBorder[1] |
|||
}] |
|||
)], |
|||
[0.6, new echarts.graphic.LinearGradient( |
|||
1, 0, 0, 0, |
|||
[{ |
|||
offset: 0, |
|||
color: this.config.opacityBorder[0] |
|||
}, { |
|||
offset: 1, |
|||
color: this.config.opacityBorder[0] |
|||
}] |
|||
)] |
|||
], |
|||
width: 2 |
|||
} |
|||
}, |
|||
z: 4, |
|||
axisLabel: { |
|||
show: false |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
splitLine: { |
|||
show: false |
|||
}, |
|||
detail: { |
|||
show: false |
|||
}, |
|||
label: { |
|||
show: false |
|||
}, |
|||
pointer: { |
|||
show: false |
|||
}, |
|||
title: { |
|||
//标题 |
|||
show: false |
|||
}, |
|||
data: [ |
|||
{ |
|||
name: percent + '%', |
|||
value: percent |
|||
} |
|||
] |
|||
}, |
|||
|
|||
// 刻度 |
|||
{ |
|||
name: '外部刻度', |
|||
type: 'gauge', |
|||
center: center, |
|||
radius: '75%', |
|||
min: 0, //最小刻度 |
|||
max: 100, //最大刻度 |
|||
splitNumber: 10, //刻度数量 |
|||
startAngle: 225, |
|||
endAngle: -45, |
|||
axisLine: { |
|||
show: false, |
|||
lineStyle: { |
|||
width: 1, |
|||
color: [ |
|||
[1, 'rgba(0,0,0,0)'] |
|||
] |
|||
} |
|||
}, |
|||
//仪表盘轴线 |
|||
axisLabel: { |
|||
show: false |
|||
}, //刻度标签。 |
|||
axisTick: { |
|||
show: true, |
|||
splitNumber: 4, |
|||
lineStyle: { |
|||
//用颜色渐变函数不起作用 |
|||
color: '#6DCBFF', |
|||
width: 1 |
|||
}, |
|||
length: 1 |
|||
}, |
|||
//刻度样式 |
|||
splitLine: { |
|||
show: true, |
|||
length: 2, |
|||
lineStyle: { |
|||
//用颜色渐变函数不起作用 |
|||
color: '#6DCBFF' |
|||
} |
|||
}, //分隔线样式 |
|||
detail: { |
|||
show: false |
|||
}, |
|||
pointer: { |
|||
show: false |
|||
} |
|||
}, |
|||
|
|||
// 最宽的圆环，上层, 显示彩色的进度条 |
|||
{ |
|||
type: 'bar', |
|||
data: [ |
|||
{ |
|||
value: percent, |
|||
itemStyle: { |
|||
//图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100% |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 1, |
|||
x2: 0, |
|||
y2: 0, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: this.config.progressBar[0] |
|||
}, { |
|||
offset: 1, |
|||
color: this.config.progressBar[1] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
} |
|||
], |
|||
barGap: '-100%', //柱间距离,上下两层圆环重合 |
|||
coordinateSystem: 'polar', |
|||
roundCap: true, //顶端圆角从 v4.5.0 开始支持 |
|||
//圆环层级，同zindex |
|||
z: 2 |
|||
}, |
|||
// 最宽的圆环，下层, 显示底色的进度条 |
|||
{ |
|||
type: 'bar', |
|||
data: [ |
|||
{ |
|||
value: 100, |
|||
itemStyle: { |
|||
color: this.config.progressBarBG |
|||
} |
|||
} |
|||
], |
|||
barGap: '-100%', |
|||
coordinateSystem: 'polar', |
|||
roundCap: true, |
|||
z: 1 |
|||
}, |
|||
|
|||
{ |
|||
name: '内部透明起始结束的圆边', |
|||
type: 'gauge', |
|||
center: center, |
|||
radius: '40%', |
|||
splitNumber: 10, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: [ |
|||
[0, new echarts.graphic.LinearGradient( |
|||
0, 1, 0, 0, |
|||
[{ |
|||
offset: 0, |
|||
color: this.config.circle2Color[0] |
|||
}, { |
|||
offset: 1, |
|||
color: this.config.circle2Color[1] |
|||
}] |
|||
)], |
|||
[0.2, new echarts.graphic.LinearGradient( |
|||
0, 1, 0, 0, |
|||
[{ |
|||
offset: 0, |
|||
color: this.config.circle2Color[0] |
|||
}, { |
|||
offset: 1, |
|||
color: this.config.circle2Color[1] |
|||
}] |
|||
)], |
|||
[0.8, new echarts.graphic.LinearGradient( |
|||
0, 0, 1, 0, |
|||
[{ |
|||
offset: 0, |
|||
color: this.config.circle2Color[1] |
|||
}, { |
|||
offset: 1, |
|||
color: this.config.circle2Color[1] |
|||
}] |
|||
)], |
|||
[1, new echarts.graphic.LinearGradient( |
|||
0, 0, 0, 1, |
|||
[{ |
|||
offset: 0, |
|||
color: this.config.circle2Color[1] |
|||
}, { |
|||
offset: 1, |
|||
color: this.config.circle2Color[0] |
|||
}] |
|||
)] |
|||
], |
|||
width: 1 |
|||
} |
|||
}, |
|||
z: 4, |
|||
axisLabel: { |
|||
show: false |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
splitLine: { |
|||
show: false |
|||
}, |
|||
detail: { |
|||
show: false |
|||
}, |
|||
label: { |
|||
show: false |
|||
}, |
|||
pointer: { |
|||
show: false |
|||
}, |
|||
title: { |
|||
//标题 |
|||
show: false |
|||
}, |
|||
data: [ |
|||
{ |
|||
name: percent + '%', |
|||
value: percent |
|||
} |
|||
] |
|||
}, |
|||
|
|||
// 内圆的边框 |
|||
{ |
|||
name: '外边框', |
|||
type: 'pie', |
|||
clockWise: false, |
|||
hoverAnimation: false, |
|||
radius: ['35%', '35%'],//边框大小 |
|||
center: center,//边框位置 |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
label: { |
|||
show: false |
|||
}, |
|||
data: [ |
|||
{ |
|||
value: 10, |
|||
itemStyle: { |
|||
normal: { |
|||
borderWidth: 1,//设置边框粗细 |
|||
borderColor: this.config.circle2Color[1]//边框颜色 |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
|
|||
// 内圆 |
|||
{ |
|||
type: 'pie', |
|||
radius: '35%', |
|||
center: center, |
|||
z: 1, |
|||
itemStyle: { |
|||
normal: { |
|||
color: new echarts.graphic.RadialGradient(.5, .5, .8, [ |
|||
{ |
|||
offset: 0, |
|||
color: this.config.innerCircle[0] |
|||
}, |
|||
{ |
|||
offset: .5, |
|||
color: this.config.innerCircle[1] |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: this.config.innerCircle[2] |
|||
} |
|||
], |
|||
false |
|||
), |
|||
label: { |
|||
show: false |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
} |
|||
} |
|||
}, |
|||
hoverAnimation: false, |
|||
label: { |
|||
normal: { |
|||
show: true, |
|||
position: 'center', |
|||
color: '#4c4a4a', |
|||
formatter: `{t1|${percent}%}\n{t2|${this.config.value}}\n{t3|${this.config.unit}}`, |
|||
rich: { |
|||
t1: { |
|||
fontFamily: 'PingFang TC', |
|||
fontSize: '5%', |
|||
color: '#C6CEEC', |
|||
lineHeight: 14 |
|||
}, |
|||
t2: { |
|||
fontFamily: 'PingFang TC', |
|||
fontSize: '10%', |
|||
color: '#FFFFFF', |
|||
lineHeight: 14, |
|||
fontWeight: 600 |
|||
}, |
|||
t3: { |
|||
fontFamily: 'PingFang TC', |
|||
fontSize: '5%', |
|||
color: '#C6CEEC', |
|||
lineHeight: 14 |
|||
} |
|||
} |
|||
}, |
|||
emphasis: {//中间文字显示 |
|||
show: true |
|||
} |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
data: [100] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
window.addEventListener('resize', debounce(() => { |
|||
this.chart?.resize() |
|||
}, 200)) |
|||
|
|||
}, |
|||
methods: { |
|||
init() { |
|||
if (!this.chart) { |
|||
this.chart = echarts.init(this.$refs.charts) |
|||
} |
|||
this.chart.setOption(this.option) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,173 @@ |
|||
<template> |
|||
<div |
|||
class="data-view" |
|||
:style="{backgroundImage: `url(${DataViewBG})`}" |
|||
> |
|||
<!-- 头部部分 --> |
|||
<div |
|||
class="data-view-header" |
|||
:style="{backgroundImage: `url(${DataViewHeaderBg})`}" |
|||
> |
|||
<div class="identifier"> |
|||
<img style="width: 23px; height: 23px;" :src="icon" alt=""> |
|||
<span style="padding-left: 10px;">{{identifier}}</span> |
|||
</div> |
|||
<h1 class="YouSheBiaoTiHei data-view-header-title">{{ title }}</h1> |
|||
<div class="data-view-header-time"> |
|||
<img @click="$emit('leave')" style="width: 26px; height: 26px; cursor: pointer;" :src="ICUNFullscreen" alt=""> |
|||
<div style="width: 26px;"/> |
|||
<span>{{date}}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 内容 --> |
|||
<div class="data-view-body"> |
|||
<!-- 左边的表格 --> |
|||
<div class="left-table"> |
|||
<slot name="left-table"/> |
|||
</div> |
|||
|
|||
<!-- 中间的内容 --> |
|||
<div class="middle"> |
|||
<!-- 中间的图表 --> |
|||
<div class="middle-charts"> |
|||
<slot name="middle-charts"></slot> |
|||
</div> |
|||
<!-- 中间的表格 --> |
|||
<div class="middle-table"> |
|||
<slot name="middle-table"/> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 右边的表格 --> |
|||
<div class="right-table"> |
|||
<slot name="right-table"/> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import DataViewBG from '@/assets/images/data-view-bg.png' |
|||
import DataViewHeaderBg from '@/assets/images/data-view-header-bg.png' |
|||
import ICUNFullscreen from '@/assets/images/ic_unfullscreen.png' |
|||
import { getWeek, parseTime } from '@/utils/ruoyi' |
|||
|
|||
|
|||
export default { |
|||
components: { }, |
|||
props: { |
|||
// 左上角的标识 |
|||
identifier: { |
|||
type: String |
|||
}, |
|||
// 左上角的图标 |
|||
icon: { |
|||
type: String |
|||
}, |
|||
// 大标题 |
|||
title: { |
|||
type: String |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
ICUNFullscreen, |
|||
DataViewBG, |
|||
DataViewHeaderBg, |
|||
date: parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + " " + getWeek() |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 每秒更新一次时间 |
|||
setInterval(() => { |
|||
this.date = parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + " " + getWeek() |
|||
}, 1000) |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.data-view { |
|||
height: 100vh; |
|||
width: 100vw; |
|||
background-size: cover; |
|||
background-repeat: no-repeat; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.data-view-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
background-size: contain; |
|||
background-repeat: no-repeat; |
|||
height: 6vw; |
|||
padding: 0 20px 0 20px; |
|||
|
|||
.identifier { |
|||
font-family: 'PingFang SC'; |
|||
font-style: normal; |
|||
font-weight: 500; |
|||
font-size: 24px; |
|||
line-height: 25px; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
flex-direction: row; |
|||
margin-top: 14px; |
|||
} |
|||
|
|||
.data-view-header-time { |
|||
font-family: 'PingFang SC'; |
|||
font-style: normal; |
|||
font-weight: 500; |
|||
font-size: 18px; |
|||
line-height: 25px; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
flex-direction: row; |
|||
margin-top: 14px; |
|||
} |
|||
|
|||
.data-view-header-title { |
|||
color: #D4DCFF; |
|||
font-size: 2.5vw; |
|||
} |
|||
|
|||
} |
|||
|
|||
.data-view-body { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
margin-top: 40px; |
|||
padding: 0 20px 0 20px; |
|||
} |
|||
|
|||
.left-table { |
|||
width: 23.5%; |
|||
} |
|||
|
|||
.middle { |
|||
width: 50%; |
|||
|
|||
.middle-charts { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.middle-table { |
|||
margin-top: 0.5vh; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
.right-table { |
|||
width: 23.5%; |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,255 @@ |
|||
<template> |
|||
<div |
|||
class="data-view-table" |
|||
:class="['data-view-table' + '--' + size]" |
|||
> |
|||
<div |
|||
class="data-view-table-header" |
|||
:style="{ backgroundImage: `url(${DataViewTableHeaderBG})` }" |
|||
> |
|||
<span class="YouSheBiaoTiHei header-title">{{ title }}</span> |
|||
</div> |
|||
<table class="data-view-table-body"> |
|||
<thead> |
|||
<tr class="data-view-table-body-header"> |
|||
<th |
|||
class="data-view-table-body-header-item" |
|||
v-for="(column, index) of columns" |
|||
:key="column.key" |
|||
:style="{width: columnSizes[index] + '%'}" |
|||
> |
|||
{{ column.label }} |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody ref="tbody" @mouseout="mouseleave" @mouseover="mouseenter"> |
|||
<tr |
|||
v-for="(item, index) in data" |
|||
:key="index" |
|||
class="data-view-table-body-item" |
|||
:class="[ |
|||
index % 2 === 0 ? 'data-view-table-body-item--odd' : 'data-view-table-body-item--even', |
|||
item.balanceWarning === 1 && 'data-view-table-body-item--warning' |
|||
]" |
|||
> |
|||
<td |
|||
v-for="(column, index) in columns" |
|||
:key="column.key" |
|||
:style="{width: columnSizes[index] + '%'}" |
|||
> |
|||
{{ item[column.key] }} |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import DataViewTableHeaderBGLarge from '@/assets/images/data-view-table-header-bg-large.png' |
|||
import DataViewTableHeaderBGMiddle from '@/assets/images/data-view-table-header-bg-middle.png' |
|||
|
|||
export default { |
|||
components: {}, |
|||
props: { |
|||
title: { |
|||
type: String |
|||
}, |
|||
data: { |
|||
type: Array |
|||
}, |
|||
columns: { |
|||
type: Array |
|||
}, |
|||
columnSizes: { |
|||
type: Array |
|||
}, |
|||
size: String |
|||
}, |
|||
data() { |
|||
return { |
|||
DataViewTableHeaderBGLarge, |
|||
DataViewTableHeaderBGMiddle, |
|||
timer: null, |
|||
} |
|||
}, |
|||
computed: { |
|||
DataViewTableHeaderBG() { |
|||
if (this.size === 'large') { |
|||
return DataViewTableHeaderBGLarge |
|||
} else if (this.size === 'middle') { |
|||
return DataViewTableHeaderBGMiddle |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
data: { |
|||
handler(newValue, oldValue) { |
|||
this.$nextTick(() => { |
|||
this.scroll() |
|||
}) |
|||
}, |
|||
immediate: true |
|||
} |
|||
}, |
|||
methods: { |
|||
scrollReset() { |
|||
this.$refs.tbody.scroll({top: 0, behavior: "smooth"}) |
|||
}, |
|||
mouseleave() { |
|||
this.scroll() |
|||
}, |
|||
mouseenter() { |
|||
clearTimeout(this.timer) |
|||
}, |
|||
scroll() { |
|||
const tbody = this.$refs.tbody |
|||
if ((tbody.clientHeight + tbody.scrollTop) < tbody.scrollHeight) { |
|||
clearInterval(this.timer) |
|||
this.timer = setInterval(() => { |
|||
const remainScrollTop = tbody.scrollHeight - (tbody.clientHeight + tbody.scrollTop) |
|||
tbody.scrollTop += 1 |
|||
if (tbody.scrollTop >= remainScrollTop) { |
|||
clearInterval(this.timer) |
|||
} |
|||
}, 100) |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
|
|||
.data-view-table { |
|||
|
|||
.data-view-table-header { |
|||
background-size: cover; |
|||
background-repeat: no-repeat; |
|||
height: 51px; |
|||
align-items: center; |
|||
padding-left: 28px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
|
|||
.header-title { |
|||
font-size: 22px; |
|||
/* identical to box height */ |
|||
text-transform: uppercase; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
} |
|||
|
|||
table { |
|||
/*设置相邻单元格的边框间的距离*/ |
|||
border-spacing: 0; |
|||
/*表格设置合并边框模型*/ |
|||
border-collapse: collapse; |
|||
text-align: center; |
|||
} |
|||
|
|||
table tbody { |
|||
display: block; |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
table tbody::-webkit-scrollbar { |
|||
display: none; /* Chrome Safari */ |
|||
} |
|||
|
|||
table tbody { |
|||
scrollbar-width: none; /* firefox */ |
|||
-ms-overflow-style: none; /* IE 10+ */ |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.data-view-table-body { |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
tr, td { |
|||
padding: 8px 0px 8px 0px; |
|||
width: 100%; |
|||
} |
|||
|
|||
.data-view-table-body-header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
background: rgba(14, 75, 255, 0.14); |
|||
|
|||
th { |
|||
font-family: 'PingFang SC'; |
|||
font-style: normal; |
|||
font-weight: 500; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
/* identical to box height */ |
|||
|
|||
text-align: center; |
|||
|
|||
color: #5887FF; |
|||
} |
|||
} |
|||
|
|||
tbody { |
|||
width: 100%; |
|||
} |
|||
|
|||
.data-view-table-body-item { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.data-view-table-body-item--odd { |
|||
|
|||
} |
|||
|
|||
.data-view-table-body-item--even { |
|||
background: rgba(14, 75, 255, 0.14); |
|||
} |
|||
|
|||
.data-view-table-body-item--warning { |
|||
background: rgba(255, 14, 14, 0.14) !important; |
|||
td { |
|||
color: #FF3939; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.data-view-table--large { |
|||
|
|||
table tbody { |
|||
height: 40vh; |
|||
} |
|||
|
|||
} |
|||
|
|||
.data-view-table--middle { |
|||
|
|||
table tbody { |
|||
height: 65vh; |
|||
} |
|||
|
|||
} |
|||
|
|||
.data-view-table-body-header { |
|||
|
|||
} |
|||
|
|||
.data-view-table-body-item td { |
|||
font-family: 'PingFang SC'; |
|||
font-style: normal; |
|||
font-weight: 500; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
/* identical to box height */ |
|||
text-align: center; |
|||
color: #C6CEEC; |
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,291 @@ |
|||
<template> |
|||
<data-view-layout |
|||
title="卡卡数据可视化" |
|||
identifier="KK- MANAGE" |
|||
:icon="icon" |
|||
@leave="handleLeave" |
|||
ref="layout" |
|||
> |
|||
<template #left-table> |
|||
<data-view-table |
|||
title="商户数据" |
|||
:columnSizes="[20, 20, 20, 20, 20]" |
|||
:columns="[ |
|||
{label: '商户名称', key: 'username'}, |
|||
{label: '余额', key: 'balance'}, |
|||
{label: '剩余押金额度', key: 'residueBalance'}, |
|||
{label: '成功总金额', key: 'collectionSuccessPrice'}, |
|||
{label: '成功率', key: 'percentage'}, |
|||
]" |
|||
:data="data1" |
|||
size="middle" |
|||
ref="table1" |
|||
/> |
|||
</template> |
|||
|
|||
<template #middle-charts> |
|||
<data-view-echart :config="chart1"/> |
|||
<data-view-echart :config="chart2"/> |
|||
<data-view-echart :config="chart3"/> |
|||
<data-view-echart :config="chart4"/> |
|||
</template> |
|||
|
|||
<template #middle-table> |
|||
<data-view-table |
|||
title="在线卡数据" |
|||
:columnSizes="[12, 12, 12, 12, 20, 20, 12]" |
|||
:columns="[ |
|||
{label: '银行名称/卡号', key: 'bankName'}, |
|||
{label: '收款人名称', key: 'cardHolder'}, |
|||
{label: '卡商名称', key: 'username'}, |
|||
{label: '已收款', key: 'todayIncomeReceived'}, |
|||
{label: '剩余收款额度', key: 'todayRemainingAmount'}, |
|||
{label: '出款笔数/金额', key: 'todayOutNumber'}, |
|||
{label: '剩余卡余额', key: 'remainingAmount'}, |
|||
]" |
|||
:data="data2" |
|||
size="large" |
|||
ref="table2" |
|||
/> |
|||
</template> |
|||
|
|||
<template #right-table> |
|||
<data-view-table |
|||
title="在线卡商数据" |
|||
:columnSizes="[25, 25, 25, 25]" |
|||
:columns="[ |
|||
{label: '卡商名称', key: 'username'}, |
|||
{label: '押金/剩余额度', key: 'dayMargin'}, |
|||
{label: '日总跑量', key: 'toDayTotal'}, |
|||
{label: '押金周转率', key: 'turnoverRate'}, |
|||
]" |
|||
:data="data3" |
|||
size="middle" |
|||
ref="table3" |
|||
/> |
|||
</template> |
|||
</data-view-layout> |
|||
</template> |
|||
|
|||
<script> |
|||
import DataViewBG from '@/assets/images/data-view-bg.png' |
|||
import DataViewEchart from './components/data-view-echart.vue' |
|||
import DataViewLayout from './components/data-view-layout.vue' |
|||
import icon from '@/assets/logo/plain.png' |
|||
import DataViewTable from './components/data-view-table.vue' |
|||
import { amountFormat, sortBy } from '@/utils/ruoyi' |
|||
import screenfull from 'screenfull'; |
|||
|
|||
export default { |
|||
components: { DataViewTable, DataViewLayout, DataViewEchart }, |
|||
data() { |
|||
return { |
|||
DataViewBG, |
|||
icon, |
|||
// 商户数据 |
|||
data1: [], |
|||
// 在线卡数据 |
|||
data2: [], |
|||
// 在线卡商数据 |
|||
data3: [], |
|||
// 图表-代收成功单数/代收总单数 |
|||
chart1: { |
|||
value: 0, |
|||
total: 0, |
|||
unit: "单", |
|||
// 进度条主色(渐变色), 由左到右 |
|||
progressBar: ["#4494FF", '#B04BFF'], |
|||
// 进度条背景色 |
|||
progressBarBG: '#091560', |
|||
// 两边透明的圆边颜色, 第一个浅色, 第二个深色 |
|||
circle2Color: ['#168FFF00', '#168FFF'], |
|||
// 内圆的渐变, 由内到外 |
|||
innerCircle: ['#082863', '#082863', '#8000FF68'], |
|||
// 透明边框的颜色, 数组第一个为浅色, 第二个为深色 |
|||
opacityBorder: ['rgba(0, 0, 0, 0)', 'rgba(45, 103, 252, 1)'], |
|||
// 投影颜色 |
|||
shadowColor: '#2D68FF', |
|||
// 刻度颜色 |
|||
scaleColor: '#6DCBFF', |
|||
// 数值文字 |
|||
valueLabel: '代收成功单数', |
|||
// 总数值文字 |
|||
totalLabel: '总订单：0', |
|||
}, |
|||
chart2: { |
|||
value: 0, |
|||
total: 0, |
|||
unit: "元", |
|||
progressBar: ["#4494FF", '#B04BFF'], |
|||
progressBarBG: '#091560', |
|||
circle2Color: ['#168FFF00', '#168FFF'], |
|||
innerCircle: ['#082863', '#082863', '#8000FF68'], |
|||
opacityBorder: ['rgba(0, 0, 0, 0)', 'rgba(45, 103, 252, 1)'], |
|||
shadowColor: '#2D68FF', |
|||
scaleColor: '#6DCBFF', |
|||
valueLabel: '代收成功金额', |
|||
totalLabel: '总金额：0', |
|||
}, |
|||
chart3: { |
|||
value: 0, |
|||
total: 0, |
|||
unit: "单", |
|||
progressBar: ["#4494FF", '#EFA83E'], |
|||
progressBarBG: '#0A2F28', |
|||
circle2Color: ['#30BE7900', '#30BE79'], |
|||
innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'], |
|||
opacityBorder: ['rgba(0, 0, 0, 0)', '#30C17B'], |
|||
shadowColor: '#30C17B', |
|||
scaleColor: '#6DCBFF', |
|||
valueLabel: '代付成功单数', |
|||
totalLabel: '总金额：0', |
|||
}, |
|||
chart4: { |
|||
value: 0, |
|||
total: 0, |
|||
unit: "元", |
|||
progressBar: ["#4494FF", '#EFA83E'], |
|||
progressBarBG: '#0A2F28', |
|||
circle2Color: ['#30BE7900', '#30BE79'], |
|||
innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'], |
|||
opacityBorder: ['rgba(0, 0, 0, 0)', '#30C17B'], |
|||
shadowColor: '#30C17B', |
|||
scaleColor: '#6DCBFF', |
|||
valueLabel: '代付成功金额', |
|||
totalLabel: '总金额：0', |
|||
}, |
|||
ws: null, |
|||
isScreenFull: false, |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.connectWS() |
|||
}, |
|||
methods: { |
|||
connectWS() { |
|||
this.ws = new WebSocket(`ws://192.168.31.129:18997/websocket`) |
|||
this.ws.onopen = () => { |
|||
this.ws.send(JSON.stringify({ 'type': 'add_push' })) |
|||
} |
|||
this.ws.onmessage = (event) => { |
|||
if (!event.data) { |
|||
return |
|||
} |
|||
let data |
|||
try { |
|||
data = JSON.parse(event.data) |
|||
} catch (e) { |
|||
return |
|||
} |
|||
if (!data || data.type !== 'push') { |
|||
return |
|||
} |
|||
const card = JSON.parse(data.value.card) |
|||
const carddealer = JSON.parse(data.value.carddealer) |
|||
const statisticsPush = JSON.parse(data.value.statisticsPush) |
|||
|
|||
// payTotalQty 代收总订单数 |
|||
// paySuccessQty 代收成功订单数 |
|||
// paySuccessAmount 代收成功金额 |
|||
// payTotalAmount 代收总金额 |
|||
// transferTotalQty 代付总订单数 |
|||
// transferSuccessQty 代付成功订单数 |
|||
// transferSuccessAmount 代付成功金额 |
|||
// transferTotalAmount 代付总金额 |
|||
console.log("statisticsPush", statisticsPush) |
|||
|
|||
this.chart1.value = statisticsPush.paySuccessQty |
|||
this.chart1.total = statisticsPush.payTotalQty |
|||
this.chart1.totalLabel = '总订单：' + statisticsPush.payTotalQty |
|||
|
|||
this.chart2.value = this.NumberDiv(statisticsPush.paySuccessAmount, 100) |
|||
this.chart2.total = this.NumberDiv(statisticsPush.payTotalAmount, 100) |
|||
this.chart2.totalLabel = '总金额：' + this.NumberDiv(statisticsPush.payTotalAmount, 100) |
|||
|
|||
this.chart3.value = statisticsPush.transferSuccessQty |
|||
this.chart3.total = statisticsPush.transferTotalQty |
|||
this.chart3.totalLabel = '总订单：' + statisticsPush.transferTotalQty |
|||
|
|||
this.chart4.value = this.NumberDiv(statisticsPush.transferSuccessAmount, 100) |
|||
this.chart4.total = this.NumberDiv(statisticsPush.transferTotalAmount, 100) |
|||
this.chart4.totalLabel = '总金额：' + this.NumberDiv(statisticsPush.transferTotalAmount, 100) |
|||
|
|||
const pushMerchant = JSON.parse(data.value.pushMerchant) |
|||
// 商户数据 |
|||
this.data1 = pushMerchant.map(i => { |
|||
return { |
|||
username: i.username, |
|||
balance: amountFormat({ amount: i.balance }) || "0", |
|||
residueBalance: amountFormat({ amount: i.residueBalance }) || "0", |
|||
collectionSuccessPrice: amountFormat({ amount: i.collectionSuccessPrice }) || "0", |
|||
percentage: (i.percentage * 100).toFixed(2) + "%", |
|||
balanceWarning: i.balanceWarning, |
|||
} |
|||
}) |
|||
this.data1 = sortBy(this.data1, 'balanceWarning') |
|||
// 在线卡数据 |
|||
this.data2 = card.map(i => { |
|||
return { |
|||
bankName: i.bankName + '/' + "**** " + i.cardNumber.slice(-4), |
|||
cardHolder: i.cardHolder, |
|||
username: i.username, |
|||
todayIncomeReceived: amountFormat({ amount: i.todayIncomeReceived }) || "0", |
|||
todayRemainingAmount: amountFormat({ amount: i.todayRemainingAmount }) || "0", |
|||
todayOutNumber: i.todayOutNumber + '/' + amountFormat({ amount: i.todayOutReceived }) || "0", |
|||
remainingAmount: amountFormat({ amount: i.remainingAmount }) || "0", |
|||
balanceWarning: i.balanceWarning, |
|||
} |
|||
}) |
|||
this.data2 = sortBy(this.data2, 'balanceWarning') |
|||
// 在线卡商数据 |
|||
this.data3 = carddealer.map(i => { |
|||
return { |
|||
username: i.username, |
|||
dayMargin: (amountFormat({ amount: i.dayMargin }) || "0") + (amountFormat({ amount: i.margin }) || "0"), |
|||
toDayTotal: amountFormat({ amount: i.toDayTotal }) || "0", |
|||
turnoverRate: (i.turnoverRate * 100).toFixed(2) + "%", |
|||
balanceWarning: i.balanceWarning, |
|||
} |
|||
}) |
|||
this.data3 = sortBy(this.data3, 'balanceWarning') |
|||
|
|||
this.$refs.table1.scrollReset(); |
|||
this.$refs.table2.scrollReset(); |
|||
this.$refs.table3.scrollReset(); |
|||
} |
|||
}, |
|||
/** |
|||
* 退出全屏 |
|||
*/ |
|||
handleLeave() { |
|||
if (this.isScreenFull) { |
|||
screenfull.exit() |
|||
} else { |
|||
screenfull.request(this.$refs.layout.$el) |
|||
} |
|||
this.isScreenFull = !this.isScreenFull; |
|||
}, |
|||
disconnect() { |
|||
this.ws?.send({ 'type': 'del_push' }) |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
this.disconnect() |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
@font-face { |
|||
font-family: "YouSheBiaoTiHei"; |
|||
src: url('../../assets/fonts/YouSheBiaoTiHei.ttf'); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
|
|||
.YouSheBiaoTiHei { |
|||
font-family: "YouSheBiaoTiHei", serif; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue