'卡脖搅拌温度，运行状态呈现形式修改'
This commit is contained in:
parent
3ae56eeabf
commit
67fff7f720
BIN
src/assets/tem-bottom.png
Normal file
BIN
src/assets/tem-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/assets/tem-top.png
Normal file
BIN
src/assets/tem-top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@ -5,21 +5,46 @@
|
||||
<div class="eq-main absolute">
|
||||
<div
|
||||
class="arrow ar-top-left"
|
||||
:class="topLeftArrowRolling ? 'ar-running' : ''"
|
||||
:class="topLeftArrowRolling === '运行' ? 'ar-running' : ''"
|
||||
></div>
|
||||
<div
|
||||
class="arrow ar-top-right"
|
||||
:class="topRightArrowRolling ? 'ar-running' : ''"
|
||||
:class="topRightArrowRolling === '运行' ? 'ar-running' : ''"
|
||||
></div>
|
||||
<div
|
||||
class="arrow ar-bottom-left"
|
||||
:class="bottomLeftArrowRolling ? 'ar-running' : ''"
|
||||
:class="bottomLeftArrowRolling === '运行' ? 'ar-running' : ''"
|
||||
></div>
|
||||
<div
|
||||
class="arrow ar-bottom-right"
|
||||
:class="bottomRightArrowRolling ? 'ar-running' : ''"
|
||||
:class="bottomRightArrowRolling === '运行' ? 'ar-running' : ''"
|
||||
></div>
|
||||
|
||||
<div class="swd onekb">
|
||||
<div class="swd-box">
|
||||
<p>1#卡脖</p>
|
||||
<p class="swd-value">{{Number(onekb).toFixed(1)}}℃</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swd onesp">
|
||||
<div class="swd-box">
|
||||
<p>1#搅拌</p>
|
||||
<p class="swd-value">{{Number(onesp).toFixed(1)}}℃</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swd twokb">
|
||||
<div class="swd-box">
|
||||
<p>2#卡脖</p>
|
||||
<p class="swd-value">{{Number(twokb).toFixed(1)}}℃</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swd twosp">
|
||||
<div class="swd-box">
|
||||
<p>2#搅拌</p>
|
||||
<p class="swd-value">{{Number(twosp).toFixed(1)}}℃</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-bottom" v-show="fireDirection === '北火'" style="">
|
||||
<video
|
||||
id="1"
|
||||
@ -126,12 +151,16 @@ export default {
|
||||
"topRightArrowRolling",
|
||||
"bottomLeftArrowRolling",
|
||||
"bottomRightArrowRolling",
|
||||
"onekb",
|
||||
"twokb",
|
||||
"onesp",
|
||||
"twosp"
|
||||
]),
|
||||
mounted() {
|
||||
const wsc = new WsClient(this);
|
||||
wsc.registerListeners();
|
||||
// this.$store.commit("update", { target: "fire-direction", data: "南火" });
|
||||
this.$store.commit("update", { target: "bottom-left-arrow", data: true });
|
||||
// this.$store.commit("update", { target: "bottom-left-arrow", data: true });
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["update"]),
|
||||
@ -180,66 +209,119 @@ main {
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: adjust(30px);
|
||||
height: adjust(30px);
|
||||
width: adjust(20px);
|
||||
height: adjust(20px);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
background: #ff5757;
|
||||
border-radius: adjust(10px);
|
||||
}
|
||||
|
||||
.ar-top-left.arrow,
|
||||
.ar-top-right.arrow {
|
||||
animation: none;
|
||||
background: url(../../assets/arrow-disabled.png) 100% 100% / contain no-repeat;
|
||||
}
|
||||
.ar-bottom-left.arrow,
|
||||
.ar-bottom-right.arrow {
|
||||
animation: none;
|
||||
background: url(../../assets/arrow-r-disabled.png) 100% 100% / contain
|
||||
no-repeat;
|
||||
}
|
||||
.ar-top-left.arrow.ar-running,
|
||||
.ar-top-right.arrow.ar-running {
|
||||
background: url(../../assets/arrow.png) 100% 100% / contain no-repeat;
|
||||
animation: clock-direction 1.15s linear infinite forwards;
|
||||
}
|
||||
.ar-bottom-left.arrow.ar-running,
|
||||
.ar-bottom-right.arrow.ar-running {
|
||||
background: url(../../assets/arrow-r.png) 100% 100% / contain no-repeat;
|
||||
animation: reverse-clock-direction 1.15s linear infinite forwards;
|
||||
.arrow.ar-running {
|
||||
background: #1bff3a;
|
||||
}
|
||||
|
||||
// .ar-top-left.arrow,
|
||||
// .ar-top-right.arrow {
|
||||
// animation: none;
|
||||
// background: url(../../assets/arrow-disabled.png) 100% 100% / contain no-repeat;
|
||||
// }
|
||||
// .ar-bottom-left.arrow,
|
||||
// .ar-bottom-right.arrow {
|
||||
// animation: none;
|
||||
// background: url(../../assets/arrow-r-disabled.png) 100% 100% / contain
|
||||
// no-repeat;
|
||||
// }
|
||||
// .ar-top-left.arrow.ar-running,
|
||||
// .ar-top-right.arrow.ar-running {
|
||||
// background: url(../../assets/arrow.png) 100% 100% / contain no-repeat;
|
||||
// animation: clock-direction 1.15s linear infinite forwards;
|
||||
// }
|
||||
// .ar-bottom-left.arrow.ar-running,
|
||||
// .ar-bottom-right.arrow.ar-running {
|
||||
// background: url(../../assets/arrow-r.png) 100% 100% / contain no-repeat;
|
||||
// animation: reverse-clock-direction 1.15s linear infinite forwards;
|
||||
// }
|
||||
|
||||
.ar-top-right {
|
||||
top: 112px;
|
||||
left: 56px;
|
||||
top: 145px;
|
||||
left: 65px;
|
||||
}
|
||||
.ar-top-left {
|
||||
top: 175px;
|
||||
left: 980px;
|
||||
left: 985px;
|
||||
}
|
||||
.ar-bottom-left {
|
||||
top: 425px;
|
||||
left: 955px;
|
||||
top: 445px;
|
||||
left: 960px;
|
||||
}
|
||||
.ar-bottom-right {
|
||||
top: 492px;
|
||||
top: 460px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
@keyframes clock-direction {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
// @keyframes clock-direction {
|
||||
// 0% {
|
||||
// transform: rotate(0deg);
|
||||
// }
|
||||
// 100% {
|
||||
// transform: rotate(360deg);
|
||||
// }
|
||||
// }
|
||||
// @keyframes reverse-clock-direction {
|
||||
// 0% {
|
||||
// transform: rotate(0deg);
|
||||
// }
|
||||
// 100% {
|
||||
// transform: rotate(-360deg);
|
||||
// }
|
||||
// }
|
||||
|
||||
.swd {
|
||||
background-size: 100%;
|
||||
width: adjust(w(276px));
|
||||
height: adjust(h(156px));
|
||||
position: absolute;
|
||||
transform: rotateY(180deg);
|
||||
p {
|
||||
margin: 0;
|
||||
margin-top: adjust(12px);
|
||||
}
|
||||
.swd-box {
|
||||
margin-left: adjust(21px);
|
||||
font-size: adjust(15px);
|
||||
.swd-value {
|
||||
color: #00f4ff;
|
||||
margin-top: adjust(6px);
|
||||
font-size: adjust(26px);
|
||||
overflow: hidden; /*超出部分隐藏*/
|
||||
white-space: nowrap; /*禁止换行*/
|
||||
text-overflow: ellipsis; /*省略号*/
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes reverse-clock-direction {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
|
||||
.onekb, .onesp{
|
||||
background: url(../../assets/tem-bottom.png) no-repeat;
|
||||
}
|
||||
.onekb {
|
||||
top: adjust(300px);
|
||||
left: adjust(350px)
|
||||
}
|
||||
.onesp {
|
||||
top: adjust(270px);
|
||||
left: adjust(520px)
|
||||
}
|
||||
.twokb, .twosp{
|
||||
background: url(../../assets/tem-top.png) no-repeat;
|
||||
}
|
||||
.twokb {
|
||||
top: adjust(-20px);
|
||||
left: adjust(370px)
|
||||
}
|
||||
.twosp {
|
||||
top: adjust(10px);
|
||||
left: adjust(540px)
|
||||
}
|
||||
|
||||
.eq-main {
|
||||
|
||||
@ -9,6 +9,10 @@ export default new Vuex.Store({
|
||||
topRightArrowRolling: false,
|
||||
bottomLeftArrowRolling: false,
|
||||
bottomRightArrowRolling: false,
|
||||
onekb: 0,
|
||||
twokb: 0,
|
||||
onesp: 0,
|
||||
twosp: 0,
|
||||
kilnPressure: 999,
|
||||
oilTable1: {},
|
||||
oilTable2: {},
|
||||
@ -37,15 +41,35 @@ export default new Vuex.Store({
|
||||
switch (payload.target) {
|
||||
case 'top-right-arrow': {
|
||||
state.topRightArrowRolling = payload.data
|
||||
break
|
||||
}
|
||||
case 'top-left-arrow': {
|
||||
state.topLeftArrowRolling = payload.data
|
||||
break
|
||||
}
|
||||
case 'bottom-right-arrow': {
|
||||
state.bottomRightArrowRolling = payload.data
|
||||
break
|
||||
}
|
||||
case 'bottom-left-arrow': {
|
||||
state.bottomLeftArrowRolling = payload.data
|
||||
break
|
||||
}
|
||||
case 'onekb': {
|
||||
state.onekb = payload.data
|
||||
break
|
||||
}
|
||||
case 'twokb': {
|
||||
state.twokb = payload.data
|
||||
break
|
||||
}
|
||||
case 'onesp': {
|
||||
state.onesp = payload.data
|
||||
break
|
||||
}
|
||||
case 'twosp': {
|
||||
state.twosp = payload.data
|
||||
break
|
||||
}
|
||||
case 'oil-1': {
|
||||
state.oilTable1 = payload.data
|
||||
|
||||
@ -65,6 +65,10 @@ export default class WsClient {
|
||||
'northtouliaoji': 'bottom-right-arrow',
|
||||
'shuipingJBQ2': 'top-left-arrow',
|
||||
'shuipingJBQ1': 'bottom-left-arrow',
|
||||
'SPJBQWDU1': 'onesp',
|
||||
'SPJBQWDU2': 'twosp',
|
||||
'KBSCSB1': 'onekb',
|
||||
'KBSCSB2': 'twokb',
|
||||
}
|
||||
static socket = null
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user