jack
/
kakapay
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://git.weirui0755.com/jack/kakapay

master
j1ack 2 years ago
parent
f56421be50 9f5f401ec6
commit
1742166fe3
11 changed files with 514 additions and 414 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 3
      package.json
  3. BIN
      public/alarm.mp3
  4. 14
      src/layout/components/Navbar.vue
  5. 6
      src/router/index.js
  6. 14
      src/utils/ruoyi.js
  7. 552
      src/views/data-view/components/data-view-echart.vue
  8. 61
      src/views/data-view/components/data-view-layout.vue
  9. 48
      src/views/data-view/components/data-view-table.vue
  10. 110
      src/views/data-view/data-view.vue
  11. 31
      vue.config.js

1
.gitignore
View File

@ -1,6 +1,7 @@
.DS_Store .DS_Store
node_modules/ node_modules/
dist/ dist/
archives/
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*

3
package.json
View File

@ -87,7 +87,8 @@
"sass-loader": "10.1.1", "sass-loader": "10.1.1",
"script-ext-html-webpack-plugin": "2.1.5", "script-ext-html-webpack-plugin": "2.1.5",
"svg-sprite-loader": "5.1.1", "svg-sprite-loader": "5.1.1",
"vue-template-compiler": "2.6.12" "vue-template-compiler": "2.6.12",
"filemanager-webpack-plugin": "3.1.1"
}, },
"engines": { "engines": {
"node": ">=8.9", "node": ">=8.9",

BIN
public/alarm.mp3
View File

Binary file not shown.

14
src/layout/components/Navbar.vue
View File

@ -9,8 +9,11 @@
<div class="right-menu"> <div class="right-menu">
<template v-if="device !== 'mobile'"> <template v-if="device !== 'mobile'">
<!-- <el-button type="primary" icon="" size="small" style="margin-right:24px"-->
<!-- @click="dialogVisible = true">码商押金</el-button>-->
<el-button type="primary" icon="" size="small" style="margin-right:24px" <el-button type="primary" icon="" size="small" style="margin-right:24px"
@click="dialogVisible = true">码商押金</el-button> @click="goDataView">数据看板</el-button>
<el-switch :value="autoRefresh" :inactive-text="autoRefresh ? `自动刷新: (${autoRefreshCountdown}S)` : '自动刷新: '" <el-switch :value="autoRefresh" :inactive-text="autoRefresh ? `自动刷新: (${autoRefreshCountdown}S)` : '自动刷新: '"
@change="onAutoRefreshChanged" style="margin-right: 14px;" /> @change="onAutoRefreshChanged" style="margin-right: 14px;" />
@ -140,6 +143,15 @@ export default {
this.secondMethod() this.secondMethod()
}, },
methods: { methods: {
goDataView() {
const href = this.$router.resolve({
path: '/data-view',
params: {
fullscreen: true,
}
})
window.open(href.href, '_blank')
},
secondMethod() { secondMethod() {
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.getList(); this.getList();

6
src/router/index.js
View File

@ -6,6 +6,7 @@ Vue.use(Router)
/* Layout */ /* Layout */
import Layout from '@/layout' import Layout from '@/layout'
import ParentView from '@/components/ParentView'; import ParentView from '@/components/ParentView';
import DataView from '@/views/data-view/data-view.vue';
/** /**
* Note: 路由配置项 * Note: 路由配置项
@ -124,6 +125,11 @@ export const constantRoutes = [
meta: { title: '修改生成配置' } meta: { title: '修改生成配置' }
} }
] ]
},
{
path: '/data-view',
component: DataView,
hidden: true
} }
] ]

14
src/utils/ruoyi.js
View File

@ -413,13 +413,13 @@ export function amountFriendlyFormat(amount, unit) {
} }
} }
// 百 // 百
if (amount >= 100 || unit === '百') { // if (amount >= 100 || unit === '百') {
return { // return {
unit: '百', // unit: '百',
amount: amount / 100, // amount: amount / 100,
display: `${amount / 100}百` // display: `${amount / 100}百`
} // }
} // }
return { return {
unit: '', unit: '',
amount: amount, amount: amount,

552
src/views/data-view/components/data-view-echart.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div <div
ref="charts" ref="charts"
style="min-width: 12vw;max-height:220px;height:220px;" style="width: 18vw;height:23vh;"
/> />
</template> </template>
@ -9,6 +9,24 @@
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { debounce } from '@/utils' import { debounce } from '@/utils'
function fontSize(res){
let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res*fontSize;
}
function fontSize2(res){
let height = document.documentElement.clientHeight
if (!height) return;
let fontSize = 100 * (height / 1080);
return res*fontSize;
}
function max(v1, v2) {
return v1 > v2 ? v2 : v1
}
export default { export default {
props: { props: {
config: Object config: Object
@ -26,19 +44,43 @@ export default {
}, },
data() { data() {
return { return {
chart: null chart: null,
} }
}, },
computed: { mounted() {
option() { window.addEventListener('resize', debounce(() => {
this.chart?.resize()
setTimeout(() => {
this.chart?.setOption(this.getOption())
}, 200)
}, 200))
},
methods: {
getOption() {
console.log("reseize")
let percent = 0 let percent = 0
if (this.config.total === 0) { if (this.config.total === 0) {
percent = 0 percent = 0
} else { } else {
percent = ((this.config.value / this.config.total) * 100).toFixed(2) percent = ((this.config.value / this.config.total) * 100).toFixed(2)
percent = percent > 100 ? 100 : percent
} }
const center = ['50%', '55%'] const center = ['50%', '45%']
const self = this const self = this
// 外圈文字大小
const outSideFontSize = max(fontSize2(0.22), 16)
// 外圈文字高度
const outSideTextHeight = max(fontSize2(0.3), 26)
// 内圈小文字
const insideFontSize = max(fontSize2(0.18), 18)
// 内圈小文字高度
const insideTextHeight = 0
// 内圈大文字
const insideBigFontSize = max(fontSize2(0.38), 40)
// 内圈大文字高度
const insideBigTextHeight = max(fontSize2(0.70), 70)
return { return {
grid: { grid: {
left: '0', left: '0',
@ -70,7 +112,7 @@ export default {
//圆环位置和大小 //圆环位置和大小
polar: { polar: {
center: center, center: center,
radius: '100%' radius: '145%'
}, },
series: [ series: [
@ -80,7 +122,7 @@ export default {
name: '内部透明起始结束的圆边', name: '内部透明起始结束的圆边',
type: 'gauge', type: 'gauge',
center: center, center: center,
radius: '80%', radius: '90%',
splitNumber: 10, splitNumber: 10,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
@ -141,15 +183,15 @@ export default {
rich: { rich: {
t1: { t1: {
fontFamily: 'PingFang TC', fontFamily: 'PingFang TC',
fontSize: '5%', fontSize: outSideFontSize,
color: '#C6CEEC', color: '#C6CEEC',
lineHeight: 18 lineHeight: outSideTextHeight
}, },
t2: { t2: {
fontFamily: 'PingFang TC', fontFamily: 'PingFang TC',
fontSize: '10%', fontSize: outSideFontSize,
color: '#FFFFFF', color: '#FFFFFF',
lineHeight: 18 lineHeight: outSideTextHeight
} }
} }
}, },
@ -172,156 +214,156 @@ export default {
}, },
// 带有阴影的边框 // 带有阴影的边框
{ // {
name: 'border', // name: 'border',
type: 'pie', // type: 'pie',
clockWise: false, // clockWise: false,
radius: '70%', // radius: '70%',
center: center, // center: center,
animation: false, // animation: false,
z: 0, // z: 0,
data: [{ // data: [{
value: 0, // value: 0,
color: 'transparent', // color: 'transparent',
label: { // label: {
show: false // show: false
}, // },
labelLine: { // labelLine: {
show: false // show: false
}, // },
emphasis: { // emphasis: {
disabled: true // disabled: true
}, // },
select: { // select: {
disabled: true // disabled: true
}, // },
tooltip: { // tooltip: {
show: false // show: false
}, // },
itemStyle: { // itemStyle: {
color: '#071422', // color: '#071422',
shadowColor: this.config.shadowColor, // shadowColor: this.config.shadowColor,
shadowBlur: 25, // shadowBlur: 25,
shadowOffsetX: 0, // shadowOffsetX: 0,
shadowOffsetY: -15 // shadowOffsetY: -15
} // }
}] // }]
}, // },
// 阴影的边框(中间) // 阴影的边框(中间)
{ // {
name: '阴影的边框(中间)', // name: '阴影的边框(中间)',
type: 'gauge', // type: 'gauge',
center: center, // center: center,
radius: '70%', // radius: '70%',
axisLine: { // axisLine: {
lineStyle: { // lineStyle: {
color: [ // color: [
// 右/下/左/上 // // 右/下/左/上
[ // [
0.6, // 0.6,
new echarts.graphic.LinearGradient( // new echarts.graphic.LinearGradient(
0, 0, 1, 0, // 0, 0, 1, 0,
[ // [
{ // {
offset: 0.2, // offset: 0.2,
color: this.config.opacityBorder[0] // color: this.config.opacityBorder[0]
}, // },
{ // {
offset: 0.7, // offset: 0.7,
color: this.config.opacityBorder[1] // color: this.config.opacityBorder[1]
}, // },
{ // {
offset: 1, // offset: 1,
color: this.config.opacityBorder[0] // color: this.config.opacityBorder[0]
} // }
] // ]
) // )
] // ]
], // ],
width: 2 // width: 2
} // }
}, // },
z: 4, // z: 4,
axisLabel: { // axisLabel: {
show: false // show: false
}, // },
axisTick: { // axisTick: {
show: false // show: false
}, // },
splitLine: { // splitLine: {
show: false // show: false
}, // },
detail: { // detail: {
show: false // show: false
}, // },
label: { // label: {
show: false // show: false
}, // },
pointer: { // pointer: {
show: false // show: false
}, // },
title: { // title: {
//标题 // //标题
show: false // show: false
}, // },
data: [ // data: [
{ // {
name: percent + '%', // name: percent + '%',
value: percent // value: percent
} // }
] // ]
}, // },
// 刻度 // 刻度
{ // {
name: '外部刻度', // name: '外部刻度',
type: 'gauge', // type: 'gauge',
center: center, // center: center,
radius: '75%', // radius: '75%',
min: 0, //最小刻度 // min: 0, //最小刻度
max: 100, //最大刻度 // max: 100, //最大刻度
splitNumber: 10, //刻度数量 // splitNumber: 10, //刻度数量
startAngle: 225, // startAngle: 225,
endAngle: -45, // endAngle: -45,
axisLine: { // axisLine: {
show: false, // show: false,
lineStyle: { // lineStyle: {
width: 1, // width: 1,
color: [ // color: [
[1, 'rgba(0,0,0,0)'] // [1, 'rgba(0,0,0,0)']
] // ]
} // }
}, // },
//仪表盘轴线 // //仪表盘轴线
axisLabel: { // axisLabel: {
show: false // show: false
}, //刻度标签。 // }, //刻度标签。
axisTick: { // axisTick: {
show: true, // show: true,
splitNumber: 4, // splitNumber: 4,
lineStyle: { // lineStyle: {
//用颜色渐变函数不起作用 // //用颜色渐变函数不起作用
color: '#6DCBFF', // color: '#6DCBFF',
width: 1 // width: 1
}, // },
length: 1 // length: 1
}, // },
//刻度样式 // //刻度样式
splitLine: { // splitLine: {
show: true, // show: true,
length: 2, // length: 2,
lineStyle: { // lineStyle: {
//用颜色渐变函数不起作用 // //用颜色渐变函数不起作用
color: '#6DCBFF' // color: '#6DCBFF'
} // }
}, //分隔线样式 // }, //分隔线样式
detail: { // detail: {
show: false // show: false
}, // },
pointer: { // pointer: {
show: false // show: false
} // }
}, // },
// 最宽的圆环，上层, 显示彩色的进度条 // 最宽的圆环，上层, 显示彩色的进度条
{ {
@ -373,89 +415,89 @@ export default {
z: 1 z: 1
}, },
{ // {
name: '内部透明起始结束的圆边', // name: '内部透明起始结束的圆边',
type: 'gauge', // type: 'gauge',
center: center, // center: center,
radius: '40%', // radius: '40%',
splitNumber: 10, // splitNumber: 10,
axisLine: { // axisLine: {
lineStyle: { // lineStyle: {
color: [ // color: [
[0, new echarts.graphic.LinearGradient( // [0, new echarts.graphic.LinearGradient(
0, 1, 0, 0, // 0, 1, 0, 0,
[{ // [{
offset: 0, // offset: 0,
color: this.config.circle2Color[0] // color: this.config.circle2Color[0]
}, { // }, {
offset: 1, // offset: 1,
color: this.config.circle2Color[1] // color: this.config.circle2Color[1]
}] // }]
)], // )],
[0.2, new echarts.graphic.LinearGradient( // [0.2, new echarts.graphic.LinearGradient(
0, 1, 0, 0, // 0, 1, 0, 0,
[{ // [{
offset: 0, // offset: 0,
color: this.config.circle2Color[0] // color: this.config.circle2Color[0]
}, { // }, {
offset: 1, // offset: 1,
color: this.config.circle2Color[1] // color: this.config.circle2Color[1]
}] // }]
)], // )],
[0.8, new echarts.graphic.LinearGradient( // [0.8, new echarts.graphic.LinearGradient(
0, 0, 1, 0, // 0, 0, 1, 0,
[{ // [{
offset: 0, // offset: 0,
color: this.config.circle2Color[1] // color: this.config.circle2Color[1]
}, { // }, {
offset: 1, // offset: 1,
color: this.config.circle2Color[1] // color: this.config.circle2Color[1]
}] // }]
)], // )],
[1, new echarts.graphic.LinearGradient( // [1, new echarts.graphic.LinearGradient(
0, 0, 0, 1, // 0, 0, 0, 1,
[{ // [{
offset: 0, // offset: 0,
color: this.config.circle2Color[1] // color: this.config.circle2Color[1]
}, { // }, {
offset: 1, // offset: 1,
color: this.config.circle2Color[0] // color: this.config.circle2Color[0]
}] // }]
)] // )]
], // ],
width: 1 // width: 1
} // }
}, // },
z: 4, // z: 4,
axisLabel: { // axisLabel: {
show: false // show: false
}, // },
axisTick: { // axisTick: {
show: false // show: false
}, // },
splitLine: { // splitLine: {
show: false // show: false
}, // },
detail: { // detail: {
show: false // show: false
}, // },
label: { // label: {
show: false // show: false
}, // },
pointer: { // pointer: {
show: false // show: false
}, // },
title: { // title: {
//标题 // //标题
show: false // show: false
}, // },
data: [ // data: [
{ // {
name: percent + '%', // name: percent + '%',
value: percent // value: percent
} // }
] // ]
}, // },
// 内圆的边框 // 内圆的边框
{ {
@ -463,7 +505,7 @@ export default {
type: 'pie', type: 'pie',
clockWise: false, clockWise: false,
hoverAnimation: false, hoverAnimation: false,
radius: ['35%', '35%'],//边框大小 radius: ['55%', '55%'],//边框大小
center: center,//边框位置 center: center,//边框位置
tooltip: { tooltip: {
show: false show: false
@ -487,7 +529,7 @@ export default {
// 内圆 // 内圆
{ {
type: 'pie', type: 'pie',
radius: '35%', radius: '55%',
center: center, center: center,
z: 1, z: 1,
itemStyle: { itemStyle: {
@ -522,26 +564,26 @@ export default {
show: true, show: true,
position: 'center', position: 'center',
color: '#4c4a4a', color: '#4c4a4a',
formatter: `{t1|${percent}%}\n{t2|${this.config.value}}\n{t3|${this.config.unit}}`, formatter: `{t1| ${percent}%}\n{t2|${this.config.value}}\n{t3|${this.config.unit}}`,
rich: { rich: {
t1: { t1: {
fontFamily: 'PingFang TC', fontFamily: 'PingFang TC',
fontSize: '5%', fontSize: insideFontSize,
color: '#C6CEEC', color: '#C6CEEC',
lineHeight: 14 lineHeight: insideTextHeight
}, },
t2: { t2: {
fontFamily: 'PingFang TC', fontFamily: 'PingFang TC',
fontSize: '10%', fontSize: insideBigFontSize,
color: '#FFFFFF', color: '#FFFFFF',
lineHeight: 14, lineHeight: insideBigTextHeight,
fontWeight: 600 fontWeight: 600
}, },
t3: { t3: {
fontFamily: 'PingFang TC', fontFamily: 'PingFang TC',
fontSize: '5%', fontSize: insideFontSize,
color: '#C6CEEC', color: '#C6CEEC',
lineHeight: 14 lineHeight: insideTextHeight
} }
} }
}, },
@ -556,20 +598,12 @@ export default {
} }
] ]
} }
}
}, },
mounted() {
window.addEventListener('resize', debounce(() => {
this.chart?.resize()
}, 200))
},
methods: {
init() { init() {
if (!this.chart) { if (!this.chart) {
this.chart = echarts.init(this.$refs.charts) this.chart = echarts.init(this.$refs.charts)
} }
this.chart.setOption(this.option) this.chart.setOption(this.getOption())
} }
} }
} }

61
src/views/data-view/components/data-view-layout.vue
View File

@ -10,18 +10,25 @@
> >
<div class="identifier data-view-header-item"> <div class="identifier data-view-header-item">
<img style="width: 23px; height: 23px;" :src="icon" alt=""> <img style="width: 23px; height: 23px;" :src="icon" alt="">
<span style="padding-left: 10px;">{{identifier}}</span> <span style="padding-left: 10px;">{{ identifier }}</span>
</div> </div>
<h1 class="YouSheBiaoTiHei data-view-header-title data-view-header-item" style="text-align: center;">{{ title }}</h1> <h1 class="YouSheBiaoTiHei data-view-header-title data-view-header-item" style="text-align: center;">{{
title
}}</h1>
<div class="data-view-header-time data-view-header-item"> <div class="data-view-header-time data-view-header-item">
<img @click="$emit('leave')" style="width: 26px; height: 26px; cursor: pointer;" :src="ICUNFullscreen" alt=""> <img @click="$emit('leave')" style="width: 26px; height: 26px; cursor: pointer;" :src="ICUNFullscreen" alt="">
<div style="width: 26px;"/> <div style="width: 26px;"/>
<span>{{date}}</span> <span>{{ date }}</span>
</div> </div>
</div> </div>
<!-- 中间的图表 -->
<div class="data-view-charts-body">
<slot name="charts"></slot>
</div>
<!-- 内容 --> <!-- 内容 -->
<div class="data-view-body"> <div class="data-view-tables-body">
<!-- 左边的表格 --> <!-- 左边的表格 -->
<div class="left-table"> <div class="left-table">
<slot name="left-table"/> <slot name="left-table"/>
@ -29,15 +36,9 @@
<!-- 中间的内容 --> <!-- 中间的内容 -->
<div class="middle"> <div class="middle">
<!-- 中间的图表 -->
<div class="middle-charts">
<slot name="middle-charts"></slot>
</div>
<!-- 中间的表格 --> <!-- 中间的表格 -->
<div class="middle-table">
<slot name="middle-table"/> <slot name="middle-table"/>
</div> </div>
</div>
<!-- 右边的表格 --> <!-- 右边的表格 -->
<div class="right-table"> <div class="right-table">
@ -54,9 +55,8 @@ import DataViewHeaderBg from '@/assets/images/data-view-header-bg.png'
import ICUNFullscreen from '@/assets/images/ic_unfullscreen.png' import ICUNFullscreen from '@/assets/images/ic_unfullscreen.png'
import { getWeek, parseTime } from '@/utils/ruoyi' import { getWeek, parseTime } from '@/utils/ruoyi'
export default { export default {
components: { }, components: {},
props: { props: {
// 左上角的标识 // 左上角的标识
identifier: { identifier: {
@ -76,13 +76,13 @@ export default {
ICUNFullscreen, ICUNFullscreen,
DataViewBG, DataViewBG,
DataViewHeaderBg, DataViewHeaderBg,
date: parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + " " + getWeek() date: parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + ' ' + getWeek()
} }
}, },
mounted() { mounted() {
// 每秒更新一次时间 // 每秒更新一次时间
setInterval(() => { setInterval(() => {
this.date = parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + " " + getWeek() this.date = parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + ' ' + getWeek()
}, 1000) }, 1000)
} }
} }
@ -142,37 +142,36 @@ export default {
} }
.data-view-body { .data-view-charts-body {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-top: 40px; margin-top: 10px;
padding: 0 20px 0 20px; width: 75vw;
} align-self: center;
.left-table {
width: 23.5%;
} }
.middle { .data-view-tables-body {
width: 50%;
.middle-charts {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} margin-top: 30px;
padding: 0 20px 20px 20px;
overflow: hidden;
height: 100%;
.middle-table { .left-table {
margin-top: max(0.5vh, 25px); width: 23.5%;
} }
} .middle {
width: 50%;
}
.right-table { .right-table {
width: 23.5%; width: 23.5%;
}
} }
</style> </style>

48
src/views/data-view/components/data-view-table.vue
View File

@ -1,4 +1,6 @@
<template> <template>
<div class="outside">
<div class="backdrop">
<div <div
class="data-view-table" class="data-view-table"
:class="['data-view-table' + '--' + size]" :class="['data-view-table' + '--' + size]"
@ -43,6 +45,8 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
@ -125,8 +129,25 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.data-view-table {
.outside {
height: 100%;
}
.backdrop {
width: 100%;
height: 100%;
/* 创建渐变色背景 */
background-image: linear-gradient(10.29deg, rgba(40, 85, 216, 0.8) 7.69%, rgba(17, 48, 128, 0) 63.53%);;
padding-left: 1px;
padding-right: 1px;
padding-bottom: 1px;
}
.data-view-table {
background-color: #081a2c;
height: 100%;
overflow: hidden;
background-image: linear-gradient(10.29deg, rgb(56 87 174 / 12%) 7.69%, rgba(17, 48, 128, 0) 63.53%);;
table { table {
/*设置相邻单元格的边框间的距离*/ /*设置相邻单元格的边框间的距离*/
@ -136,20 +157,16 @@ export default {
text-align: center; text-align: center;
} }
table tbody {
display: block;
overflow-y: scroll;
}
table tbody::-webkit-scrollbar { table tbody::-webkit-scrollbar {
display: none; /* Chrome Safari */ display: none; /* Chrome Safari */
} }
table tbody { table > tbody {
scrollbar-width: none; /* firefox */ scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */ -ms-overflow-style: none; /* IE 10+ */
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: scroll;
height: 48vh;
} }
.data-view-table-body { .data-view-table-body {
@ -239,21 +256,6 @@ export default {
} }
.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-header {

110
src/views/data-view/data-view.vue
View File

@ -6,6 +6,14 @@
@leave="handleLeave" @leave="handleLeave"
ref="layout" ref="layout"
> >
<template #charts>
<data-view-echart :config="chart1"/>
<data-view-echart :config="chart2"/>
<data-view-echart :config="chart3"/>
<data-view-echart :config="chart4"/>
</template>
<template #left-table> <template #left-table>
<data-view-table <data-view-table
title="商户数据" title="商户数据"
@ -23,13 +31,6 @@
/> />
</template> </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> <template #middle-table>
<data-view-table <data-view-table
title="在线卡数据" title="在线卡数据"
@ -74,7 +75,7 @@ import DataViewLayout from './components/data-view-layout.vue'
import icon from '@/assets/logo/plain.png' import icon from '@/assets/logo/plain.png'
import DataViewTable from './components/data-view-table.vue' import DataViewTable from './components/data-view-table.vue'
import { amountFormat, amountFriendlyFormat, sortBy } from '@/utils/ruoyi' import { amountFormat, amountFriendlyFormat, sortBy } from '@/utils/ruoyi'
import screenfull from 'screenfull'; import screenfull from 'screenfull'
export default { export default {
components: { DataViewTable, DataViewLayout, DataViewEchart }, components: { DataViewTable, DataViewLayout, DataViewEchart },
@ -92,9 +93,9 @@ export default {
chart1: { chart1: {
value: 0, value: 0,
total: 0, total: 0,
unit: "单", unit: '单',
// 进度条主色(渐变色), 由左到右 // 进度条主色(渐变色), 由左到右
progressBar: ["#4494FF", '#B04BFF'], progressBar: ['#4494FF', '#B04BFF'],
// 进度条背景色 // 进度条背景色
progressBarBG: '#091560', progressBarBG: '#091560',
// 两边透明的圆边颜色, 第一个浅色, 第二个深色 // 两边透明的圆边颜色, 第一个浅色, 第二个深色
@ -110,13 +111,13 @@ export default {
// 数值文字 // 数值文字
valueLabel: '代收成功单数', valueLabel: '代收成功单数',
// 总数值文字 // 总数值文字
totalLabel: '总订单：0', totalLabel: '总订单：0'
}, },
chart2: { chart2: {
value: 0, value: 0,
total: 0, total: 0,
unit: "元", unit: '元',
progressBar: ["#4494FF", '#B04BFF'], progressBar: ['#4494FF', '#B04BFF'],
progressBarBG: '#091560', progressBarBG: '#091560',
circle2Color: ['#168FFF00', '#168FFF'], circle2Color: ['#168FFF00', '#168FFF'],
innerCircle: ['#082863', '#082863', '#8000FF68'], innerCircle: ['#082863', '#082863', '#8000FF68'],
@ -124,13 +125,13 @@ export default {
shadowColor: '#2d68ffc4', shadowColor: '#2d68ffc4',
scaleColor: '#6DCBFF', scaleColor: '#6DCBFF',
valueLabel: '代收成功金额', valueLabel: '代收成功金额',
totalLabel: '总金额：0', totalLabel: '总金额：0'
}, },
chart3: { chart3: {
value: 0, value: 0,
total: 0, total: 0,
unit: "单", unit: '单',
progressBar: ["#4494FF", '#EFA83E'], progressBar: ['#42EA9A', '#EFA83E'],
progressBarBG: '#0A2F28', progressBarBG: '#0A2F28',
circle2Color: ['#30BE7900', '#30BE79'], circle2Color: ['#30BE7900', '#30BE79'],
innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'], innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'],
@ -138,13 +139,13 @@ export default {
shadowColor: '#30C17Bc4', shadowColor: '#30C17Bc4',
scaleColor: '#6DCBFF', scaleColor: '#6DCBFF',
valueLabel: '代付成功单数', valueLabel: '代付成功单数',
totalLabel: '总金额：0', totalLabel: '总金额：0'
}, },
chart4: { chart4: {
value: 0, value: 0,
total: 0, total: 0,
unit: "元", unit: '元',
progressBar: ["#4494FF", '#EFA83E'], progressBar: ['#42EA9A', '#EFA83E'],
progressBarBG: '#0A2F28', progressBarBG: '#0A2F28',
circle2Color: ['#30BE7900', '#30BE79'], circle2Color: ['#30BE7900', '#30BE79'],
innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'], innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'],
@ -152,13 +153,21 @@ export default {
shadowColor: '#30C17Bc4', shadowColor: '#30C17Bc4',
scaleColor: '#6DCBFF', scaleColor: '#6DCBFF',
valueLabel: '代付成功金额', valueLabel: '代付成功金额',
totalLabel: '总金额：0', totalLabel: '总金额：0'
}, },
ws: null, ws: null,
isScreenFull: false, isScreenFull: false
} }
}, },
mounted() { mounted() {
if (this.$route.query.fullscreen) {
this.isScreenFull = true
setTimeout(() => {
this.$nextTick(() => {
screenfull.request()
})
})
}
this.connectWS() this.connectWS()
}, },
methods: { methods: {
@ -196,7 +205,7 @@ export default {
const chart1Total = amountFriendlyFormat(statisticsPush.payTotalQty) const chart1Total = amountFriendlyFormat(statisticsPush.payTotalQty)
const chart1Value = amountFriendlyFormat(statisticsPush.paySuccessQty, chart1Total.unit) const chart1Value = amountFriendlyFormat(statisticsPush.paySuccessQty, chart1Total.unit)
this.chart1.value = chart1Value.amount this.chart1.value = chart1Value.amount
this.chart1.unit = chart1Value.unit + "单" this.chart1.unit = chart1Value.unit + '单'
this.chart1.total = chart1Total.amount this.chart1.total = chart1Total.amount
this.chart1.totalLabel = '总订单：' + chart1Total.display this.chart1.totalLabel = '总订单：' + chart1Total.display
@ -205,25 +214,24 @@ export default {
const chart2Total = amountFriendlyFormat(payTotalAmount) const chart2Total = amountFriendlyFormat(payTotalAmount)
const chart2Value = amountFriendlyFormat(paySuccessAmount, chart2Total.unit) const chart2Value = amountFriendlyFormat(paySuccessAmount, chart2Total.unit)
this.chart2.value = chart2Value.amount this.chart2.value = chart2Value.amount
this.chart2.unit = chart2Value.unit + "元" this.chart2.unit = chart2Value.unit + '元'
this.chart2.total = chart2Total.amount this.chart2.total = chart2Total.amount
this.chart2.totalLabel = '总金额：' + chart2Total.display this.chart2.totalLabel = '总金额：' + chart2Total.display
const chart3Total = amountFriendlyFormat(statisticsPush.transferTotalQty)
const chart3Total = amountFriendlyFormat(statisticsPush.transferSuccessQty) const chart3Value = amountFriendlyFormat(statisticsPush.transferSuccessQty, chart3Total.unit)
const chart3Value = amountFriendlyFormat(statisticsPush.transferTotalQty, chart3Total.unit)
this.chart3.value = chart3Value.amount this.chart3.value = chart3Value.amount
this.chart3.unit = chart3Value.unit + "单" this.chart3.unit = chart3Value.unit + '单'
this.chart3.total = chart3Total.amount this.chart3.total = chart3Total.amount
this.chart3.totalLabel = '总订单：' + chart3Total.display this.chart3.totalLabel = '总订单：' + chart3Total.display
const transferSuccessAmount = statisticsPush.transferSuccessAmount const transferSuccessAmount = statisticsPush.transferSuccessAmount
const transferTotalAmount = statisticsPush.transferTotalAmount const transferTotalAmount = statisticsPush.transferTotalAmount
const chart4Total = amountFriendlyFormat(transferTotalAmount) const chart4Total = amountFriendlyFormat(transferTotalAmount)
const chart4Value = amountFriendlyFormat(transferSuccessAmount, chart4Total.unit) const chart4Value = amountFriendlyFormat(transferSuccessAmount, chart4Total.unit)
this.chart4.value = chart4Value.amount this.chart4.value = chart4Value.amount
this.chart4.unit = chart4Value.unit + "元" this.chart4.unit = chart4Value.unit + '元'
this.chart4.total = chart4Total.amount this.chart4.total = chart4Total.amount
this.chart4.totalLabel = '总金额：' + chart4Total.display this.chart4.totalLabel = '总金额：' + chart4Total.display
@ -232,11 +240,11 @@ export default {
this.data1 = pushMerchant.map(i => { this.data1 = pushMerchant.map(i => {
return { return {
username: i.username, username: i.username,
balance: amountFormat({ amount: i.balance }) || "0", balance: amountFormat({ amount: i.balance }) || '0',
residueBalance: amountFormat({ amount: i.residueBalance }) || "0", residueBalance: amountFormat({ amount: i.residueBalance }) || '0',
collectionSuccessPrice: amountFormat({ amount: i.collectionSuccessPrice }) || "0", collectionSuccessPrice: amountFormat({ amount: i.collectionSuccessPrice }) || '0',
percentage: (i.percentage * 100).toFixed(2) + "%", percentage: (i.percentage * 100).toFixed(2) + '%',
balanceWarning: i.balanceWarning, balanceWarning: i.balanceWarning
} }
}) })
this.data1 = sortBy(this.data1, 'balanceWarning') this.data1 = sortBy(this.data1, 'balanceWarning')
@ -245,14 +253,14 @@ export default {
// 在线卡数据 // 在线卡数据
this.data2 = card.map(i => { this.data2 = card.map(i => {
return { return {
bankName: i.bankName + '/' + "**** " + i.cardNumber.slice(-4), bankName: i.bankName + '/' + '**** ' + i.cardNumber.slice(-4),
cardHolder: i.cardHolder, cardHolder: i.cardHolder,
username: i.username, username: i.username,
todayIncomeReceived: amountFormat({ amount: i.todayIncomeReceived }) || "0", todayIncomeReceived: amountFormat({ amount: i.todayIncomeReceived }) || '0',
todayRemainingAmount: amountFormat({ amount: i.todayRemainingAmount }) || "0", todayRemainingAmount: amountFormat({ amount: i.todayRemainingAmount }) || '0',
todayOutNumber: i.todayOutNumber + '/' + amountFormat({ amount: i.todayOutReceived }) || "0", todayOutNumber: i.todayOutNumber + '/' + amountFormat({ amount: i.todayOutReceived }) || '0',
remainingAmount: amountFormat({ amount: i.remainingAmount }) || "0", remainingAmount: amountFormat({ amount: i.remainingAmount }) || '0',
balanceWarning: i.balanceWarning, balanceWarning: i.balanceWarning
} }
}) })
this.data2 = sortBy(this.data2, 'balanceWarning') this.data2 = sortBy(this.data2, 'balanceWarning')
@ -261,18 +269,24 @@ export default {
this.data3 = carddealer.map(i => { this.data3 = carddealer.map(i => {
return { return {
username: i.username, username: i.username,
dayMargin: (amountFormat({ amount: i.dayMargin }) || "0") + (amountFormat({ amount: i.margin }) || "0"), dayMargin: (amountFormat({ amount: i.dayMargin }) || '0') + '/' + (amountFormat({ amount: i.margin }) || '0'),
toDayTotal: amountFormat({ amount: i.toDayTotal }) || "0", toDayTotal: amountFormat({ amount: i.toDayTotal }) || '0',
turnoverRate: (i.turnoverRate * 100).toFixed(2) + "%", turnoverRate: (i.turnoverRate * 100).toFixed(2) + '%',
balanceWarning: i.balanceWarning, balanceWarning: i.balanceWarning
} }
}) })
this.data3 = sortBy(this.data3, 'balanceWarning') this.data3 = sortBy(this.data3, 'balanceWarning')
this.data3 = this.data3.slice(0, 10) this.data3 = this.data3.slice(0, 10)
this.$refs.table1.scrollReset(); this.$refs.table1.scrollReset()
this.$refs.table2.scrollReset(); this.$refs.table2.scrollReset()
this.$refs.table3.scrollReset(); this.$refs.table3.scrollReset()
const audio = new Audio('/alarm.mp3')
const hasBalanceWarning = this.data1.some(i => i.balanceWarning) || this.data2.some(i => i.balanceWarning) || this.data3.some(i => i.balanceWarning)
if (hasBalanceWarning) {
audio.play()
}
} }
}, },
/** /**
@ -284,7 +298,7 @@ export default {
} else { } else {
screenfull.request(this.$refs.layout.$el) screenfull.request(this.$refs.layout.$el)
} }
this.isScreenFull = !this.isScreenFull; this.isScreenFull = !this.isScreenFull
}, },
disconnect() { disconnect() {
this.ws?.send({ 'type': 'del_push' }) this.ws?.send({ 'type': 'del_push' })

31
vue.config.js
View File

@ -1,5 +1,6 @@
'use strict' 'use strict'
const path = require('path') const path = require('path')
const FileManagerPlugin = require('filemanager-webpack-plugin')
function resolve(dir) { function resolve(dir) {
return path.join(__dirname, dir) return path.join(__dirname, dir)
@ -166,6 +167,36 @@ module.exports = {
from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件 from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
to: './' //到根目录下 to: './' //到根目录下
} }
config.plugin('fileManager')
.use(FileManagerPlugin)
.tap(args => {
let env = process.env["ENV"];
const fileName = env === 'production' ? '生产环境' : '开发环境'
const disDir = 'dist'
// 获取当前时间的可读
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
const zipFileName = `卡卡管理后台-${fileName}-${year}-${month}-${day}-${hour}-${minute}-${second}`
return [
{
events: {
onEnd: {
archive: [ // 选择文件夹将之打包成xxx.zip并放在根目录
{source: `./${disDir}`, destination: `./archives/${zipFileName}.zip`}
]
}
}
}
]
})
} }
) )
} }

Write Preview
Loading…
Cancel
Save