Merge pull request 'projects/zg-zjl' (#432) from projects/zg-zjl into projects/zg-test
Reviewed-on: #432
This commit is contained in:
commit
b28816f515
@ -21,7 +21,7 @@ VUE_APP_BASE_API = ''
|
|||||||
PUBLIC_PATH = ''
|
PUBLIC_PATH = ''
|
||||||
|
|
||||||
# ws地址
|
# ws地址
|
||||||
WSURL = '100.64.0.45:48080'
|
VUE_APP_WS_API = 'ws://100.64.0.45:48080'
|
||||||
|
|
||||||
# 二级部署路径
|
# 二级部署路径
|
||||||
VUE_APP_APP_NAME ='yudao-admin'
|
VUE_APP_APP_NAME ='yudao-admin'
|
||||||
|
|||||||
4
src/assets/font/font.css
Normal file
4
src/assets/font/font.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: '站酷庆科黄油体';
|
||||||
|
src: url('./站酷庆科黄油体.ttf') format('truetype');;
|
||||||
|
}
|
||||||
BIN
src/assets/font/站酷庆科黄油体.ttf
Normal file
BIN
src/assets/font/站酷庆科黄油体.ttf
Normal file
Binary file not shown.
BIN
src/assets/img/cold-data-board-msg1.png
Normal file
BIN
src/assets/img/cold-data-board-msg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/img/cold-data-board-msg2.png
Normal file
BIN
src/assets/img/cold-data-board-msg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@ -4,6 +4,7 @@ import Element from 'element-ui';
|
|||||||
import './assets/styles/element-variables.scss';
|
import './assets/styles/element-variables.scss';
|
||||||
import '@/assets/styles/index.scss'; // global css
|
import '@/assets/styles/index.scss'; // global css
|
||||||
import '@/assets/styles/ruoyi.scss'; // ruoyi css
|
import '@/assets/styles/ruoyi.scss'; // ruoyi css
|
||||||
|
import '@/assets/font/font.css'
|
||||||
import App from './App';
|
import App from './App';
|
||||||
import store from './store';
|
import store from './store';
|
||||||
import router from './router';
|
import router from './router';
|
||||||
@ -34,7 +35,6 @@ import {
|
|||||||
getDictDatas,
|
getDictDatas,
|
||||||
getDictDatas2,
|
getDictDatas2,
|
||||||
} from '@/utils/dict';
|
} from '@/utils/dict';
|
||||||
|
|
||||||
import './theme/index.css'; // 自定义主题包 - code-brick-zj
|
import './theme/index.css'; // 自定义主题包 - code-brick-zj
|
||||||
|
|
||||||
// 全局方法挂载
|
// 全局方法挂载
|
||||||
|
|||||||
265
src/views/dashboard/coldDashboard/components/dataBox.vue
Normal file
265
src/views/dashboard/coldDashboard/components/dataBox.vue
Normal file
@ -0,0 +1,265 @@
|
|||||||
|
<template>
|
||||||
|
<div class="dataBox">
|
||||||
|
<div class="side1"></div>
|
||||||
|
<div class="side2"></div>
|
||||||
|
<div class='titleBox'>
|
||||||
|
<svg-icon icon-class="energy" />
|
||||||
|
{{title}}
|
||||||
|
<span class='line1' style='left: 0px'></span>
|
||||||
|
<span class='line2' style='left: 0px'></span>
|
||||||
|
<span class='line2' style='right: 0px'></span>
|
||||||
|
<span class='line1' style='right: 0px'></span>
|
||||||
|
</div>
|
||||||
|
<span class='lt' v-if='position == "lt"'></span>
|
||||||
|
<span class='rt' v-if='position == "rt"'></span>
|
||||||
|
<span class='lb' v-if='position == "lb"'></span>
|
||||||
|
<span class='rb' v-if='position == "rb"'></span>
|
||||||
|
<div class="centerBox">
|
||||||
|
<div class="centerBoxItem1">
|
||||||
|
<span class='num'>{{msgData?.cut || '-'}}片</span>
|
||||||
|
<span class='name'>- 预计切割片数 -</span>
|
||||||
|
</div>
|
||||||
|
<div class="centerBoxItem1">
|
||||||
|
<span class='num'>{{msgData?.allRatio ? msgData?.allRatio*100:'-'}}%</span>
|
||||||
|
<span class='name'>- 综合面积良品率 -</span>
|
||||||
|
</div>
|
||||||
|
<div class="centerBoxItem2">
|
||||||
|
<span class='name'>掰边后片数：</span>
|
||||||
|
<span class='num'>{{msgData?.bai || '-'}}片</span>
|
||||||
|
</div>
|
||||||
|
<div class="centerBoxItem2">
|
||||||
|
<span class='name'>掰边后良品率：</span>
|
||||||
|
<span class='num'>{{msgData?.baiRatio ? msgData?.baiRatio*100 : '-'}}%</span>
|
||||||
|
</div>
|
||||||
|
<div class="centerBoxItem2">
|
||||||
|
<span class='name'>顶板后片数：</span>
|
||||||
|
<span class='num'>{{msgData?.ding || '-'}}片</span>
|
||||||
|
</div>
|
||||||
|
<div class="centerBoxItem2">
|
||||||
|
<span class='name'>顶板后良品率：</span>
|
||||||
|
<span class='num'>{{msgData?.dingRatio ? msgData?.dingRatio*100 : '-'}}%</span>
|
||||||
|
</div>
|
||||||
|
<div class="centerBoxItem2">
|
||||||
|
<span class='name'>下片片数：</span>
|
||||||
|
<span class='num'>{{msgData?.xia || '-'}}片</span>
|
||||||
|
</div>
|
||||||
|
<div class="centerBoxItem2">
|
||||||
|
<span class='name'>下片良品率：</span>
|
||||||
|
<span class='num'>{{msgData?.xiaRatio ? msgData?.xiaRatio*100 : '-'}}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DataBox',
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
position:{
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
msgData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dataBox {
|
||||||
|
width: 909px;
|
||||||
|
height: 430px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
width: 909px;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: radial-gradient(circle at center,
|
||||||
|
rgba(88, 194, 255, 1) 10%,
|
||||||
|
rgba(0, 176, 243, 0) 90%,
|
||||||
|
transparent);
|
||||||
|
}
|
||||||
|
.side1 {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
height: 400px;
|
||||||
|
width: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
top: 40px;
|
||||||
|
left: 0;
|
||||||
|
background: radial-gradient(circle at center,
|
||||||
|
rgba(88, 194, 255, 1) 10%,
|
||||||
|
rgba(0, 176, 243, 0) 80%,
|
||||||
|
transparent);
|
||||||
|
}
|
||||||
|
.side2 {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
height: 400px;
|
||||||
|
width: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
top: 40px;
|
||||||
|
right: 0;
|
||||||
|
background: radial-gradient(circle at center,
|
||||||
|
rgba(88, 194, 255, 1) 10%,
|
||||||
|
rgba(0, 176, 243, 0) 80%,
|
||||||
|
transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.titleBox {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
padding-left: 23px;
|
||||||
|
background-color: rgba(0, 106, 205, 0.22);
|
||||||
|
font-size: 22px;
|
||||||
|
color: #fff;
|
||||||
|
.line1 {
|
||||||
|
display: inline-block;
|
||||||
|
width: 2px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: #0078E4;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
.line2 {
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #0078E4;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lt {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: 10px solid transparent;
|
||||||
|
border-left-color: #1F8FFF;
|
||||||
|
border-top-color: #1F8FFF;
|
||||||
|
}
|
||||||
|
.rt {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: 10px solid transparent;
|
||||||
|
border-right-color: #1F8FFF;
|
||||||
|
border-top-color: #1F8FFF;
|
||||||
|
}
|
||||||
|
.lb {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: 10px solid transparent;
|
||||||
|
border-left-color: #1F8FFF;
|
||||||
|
border-bottom-color: #1F8FFF;
|
||||||
|
}
|
||||||
|
.rb {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: 10px solid transparent;
|
||||||
|
border-right-color: #1F8FFF;
|
||||||
|
border-bottom-color: #1F8FFF;
|
||||||
|
}
|
||||||
|
.centerBox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-content: space-between;
|
||||||
|
padding: 20px 24px 35px 24px;
|
||||||
|
.centerBoxItem1 {
|
||||||
|
width: 426px;
|
||||||
|
height: 106px;
|
||||||
|
background: url(../../../../assets/img/cold-data-board-msg1.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
|
||||||
|
text-align: center;
|
||||||
|
.num {
|
||||||
|
font-family: '站酷庆科黄油体';
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
display: block;
|
||||||
|
margin-top:15px;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
color: #48D6FF;
|
||||||
|
letter-spacing: 6px;
|
||||||
|
text-shadow: 1px 4px 2px #000000;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
display: block;
|
||||||
|
font-size: 20px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: rgba(255,255,255,0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.centerBoxItem2 {
|
||||||
|
width: 426px;
|
||||||
|
height: 56px;
|
||||||
|
line-height: 56px;
|
||||||
|
background: url(../../../../assets/img/cold-data-board-msg2.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-size: 20px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
.name {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: right;
|
||||||
|
width: 213px;
|
||||||
|
color: rgba(255,255,255,0.9);
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
width: 213px;
|
||||||
|
color: #15C1F2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dataBox > * {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
199
src/views/dashboard/coldDashboard/index.vue
Normal file
199
src/views/dashboard/coldDashboard/index.vue
Normal file
@ -0,0 +1,199 @@
|
|||||||
|
<template>
|
||||||
|
<div id="coldContainerB" ref="coldContainerB" style="width: 100%; height: 100%">
|
||||||
|
<div id="coldContainer" class="coldContainer" style="width: 1920px; height: 1080px" :style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||||
|
<KHeader
|
||||||
|
:isFullScreen="isFullScreen"
|
||||||
|
@screenfullChange="screenfullChange"
|
||||||
|
topTitle="自贡冷端数据看板" />
|
||||||
|
<DataBox title='原片产线1' position='lt' :msgData='line1' class="box1"/>
|
||||||
|
<DataBox title='原片产线2' position='rt' :msgData='line2' class="box2"/>
|
||||||
|
<DataBox title='原片产线3' position='lb' :msgData='line3' class="box3"/>
|
||||||
|
<DataBox title='原片产线4' position='rb' :msgData='line4' class="box4"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import KHeader from '../components/Header';
|
||||||
|
import DataBox from './components/dataBox';
|
||||||
|
import screenfull from 'screenfull';
|
||||||
|
import { debounce } from '@/utils/debounce';
|
||||||
|
import { getUserProfile } from '@/api/system/user';
|
||||||
|
export default {
|
||||||
|
name: 'ColdDashboard',
|
||||||
|
components: {
|
||||||
|
KHeader,
|
||||||
|
DataBox
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isFullScreen: false,
|
||||||
|
scaleNum:1,
|
||||||
|
permission: false,
|
||||||
|
url: process.env.VUE_APP_WS_API,
|
||||||
|
websock: '',
|
||||||
|
line1:{},
|
||||||
|
line2:{},
|
||||||
|
line3:{},
|
||||||
|
line4:{}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.init();
|
||||||
|
this.permission = false;
|
||||||
|
getUserProfile().then((response) => {
|
||||||
|
const user = response.data;
|
||||||
|
if (user.roles[0].name !== 'dashborad') {
|
||||||
|
this.permission = true;
|
||||||
|
} else {
|
||||||
|
this.permission = false;
|
||||||
|
}
|
||||||
|
this.initWebSocket();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.boxReset();
|
||||||
|
window.addEventListener('resize', this.boxReset);
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
window.removeEventListener('resize', this.boxReset);
|
||||||
|
this.websocketclose();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
boxReset() {
|
||||||
|
debounce(() => {
|
||||||
|
this.resetSize();
|
||||||
|
}, 300)();
|
||||||
|
},
|
||||||
|
change() {
|
||||||
|
this.isFullScreen = screenfull.isFullscreen;
|
||||||
|
},
|
||||||
|
init() {
|
||||||
|
if (screenfull.isEnabled) {
|
||||||
|
screenfull.on('change', this.change);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroy() {
|
||||||
|
if (screenfull.isEnabled) {
|
||||||
|
screenfull.off('change', this.change);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 全屏
|
||||||
|
screenfullChange() {
|
||||||
|
if (!screenfull.isEnabled) {
|
||||||
|
this.$message({
|
||||||
|
message: 'you browser can not work',
|
||||||
|
type: 'warning',
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
screenfull.toggle(this.$refs.coldContainerB);
|
||||||
|
},
|
||||||
|
resetSize() {
|
||||||
|
let coldContainerBox = document.getElementById(
|
||||||
|
'coldContainer'
|
||||||
|
);
|
||||||
|
let rw = parseFloat(window.innerWidth);
|
||||||
|
let rh = parseFloat(window.innerHeight);
|
||||||
|
let bw = parseFloat(coldContainerBox.style.width);
|
||||||
|
let bh = parseFloat(coldContainerBox.style.height);
|
||||||
|
let wx = 0;
|
||||||
|
let hx = 0;
|
||||||
|
if (screenfull.isFullscreen) {
|
||||||
|
wx = rw / bw;
|
||||||
|
hx = rh / bh;
|
||||||
|
} else {
|
||||||
|
if (this.$store.state.app.sidebar.opened) {
|
||||||
|
wx = (rw - 280) / bw;
|
||||||
|
hx = (rh - 116) / bh;
|
||||||
|
} else {
|
||||||
|
wx = (rw - 85) / bw;
|
||||||
|
hx = (rh - 116) / bh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.scaleNum = wx;
|
||||||
|
},
|
||||||
|
initWebSocket() {
|
||||||
|
// 初始化weosocket
|
||||||
|
const path = `${this.url}/websocket/message?userId=4`;
|
||||||
|
this.websock = new WebSocket(path);
|
||||||
|
this.websock.onmessage = this.websocketonmessage;
|
||||||
|
this.websock.onopen = this.websocketonopen;
|
||||||
|
this.websock.onerror = this.websocketonerror;
|
||||||
|
this.websock.onclose = this.websocketclose;
|
||||||
|
},
|
||||||
|
|
||||||
|
websocketonopen() {
|
||||||
|
// 连接建立之后执行send方法发送数据
|
||||||
|
this.websocketsend();
|
||||||
|
},
|
||||||
|
websocketonerror() {
|
||||||
|
// 连接建立失败重连
|
||||||
|
this.initWebSocket();
|
||||||
|
},
|
||||||
|
websocketonmessage(e) {
|
||||||
|
let msgData = e.data
|
||||||
|
try {
|
||||||
|
msgData = JSON.parse(e.data);
|
||||||
|
} catch (error) {
|
||||||
|
console.log("websocket: [unable to msgData] : ", e.data);
|
||||||
|
}
|
||||||
|
if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||||
|
if (!this.permission) return
|
||||||
|
msgData.originRatioTables && msgData.originRatioTables.forEach((item) => {
|
||||||
|
item.lineName.includes('1') && (this.line1 = item);
|
||||||
|
item.lineName.includes('2') && (this.line2 = item);
|
||||||
|
item.lineName.includes('3') && (this.line3 = item);
|
||||||
|
item.lineName.includes('4') && (this.line4 = item);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
websocketsend() {
|
||||||
|
// 数据发送
|
||||||
|
this.websock.send('');
|
||||||
|
},
|
||||||
|
websocketsend(val) {
|
||||||
|
// 数据发送
|
||||||
|
this.websock.send(val);
|
||||||
|
},
|
||||||
|
websocketclose(e) {
|
||||||
|
// 关闭
|
||||||
|
this.websock.close();
|
||||||
|
console.log('断开连接', e);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang='scss' scoped>
|
||||||
|
.coldContainer {
|
||||||
|
position: absolute;
|
||||||
|
transform-origin: 16px 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 1920px;
|
||||||
|
height: 1080px;
|
||||||
|
background: url(../assets/bg1.png) no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: 0 0;
|
||||||
|
overflow: auto;
|
||||||
|
.box1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 141px;
|
||||||
|
left: 40px;
|
||||||
|
}
|
||||||
|
.box2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 141px;
|
||||||
|
right: 40px;
|
||||||
|
}
|
||||||
|
.box3 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 66px;
|
||||||
|
left: 40px;
|
||||||
|
}
|
||||||
|
.box4 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 66px;
|
||||||
|
right: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user