Merge branch 'master' of git.picaiba.com:g7hoo/dezhou-screen

This commit is contained in:
gtz 2023-05-16 15:30:53 +08:00
commit 3ae56eeabf
8 changed files with 119 additions and 10 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/assets/arrow-r.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/assets/arrow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.4 MiB

After

Width:  |  Height:  |  Size: 6.3 MiB

View File

@ -3,6 +3,23 @@
<div class="video-crash" v-if="false"></div>
<div class="eq-main absolute">
<div
class="arrow ar-top-left"
:class="topLeftArrowRolling ? 'ar-running' : ''"
></div>
<div
class="arrow ar-top-right"
:class="topRightArrowRolling ? 'ar-running' : ''"
></div>
<div
class="arrow ar-bottom-left"
:class="bottomLeftArrowRolling ? 'ar-running' : ''"
></div>
<div
class="arrow ar-bottom-right"
:class="bottomRightArrowRolling ? 'ar-running' : ''"
></div>
<div class="video-bottom" v-show="fireDirection === '北火'" style="">
<video
id="1"
@ -102,11 +119,19 @@ export default {
data() {
return {};
},
computed: mapState(["kilnPressure", "fireDirection"]),
computed: mapState([
"kilnPressure",
"fireDirection",
"topLeftArrowRolling",
"topRightArrowRolling",
"bottomLeftArrowRolling",
"bottomRightArrowRolling",
]),
mounted() {
const wsc = new WsClient(this);
wsc.registerListeners();
// this.$store.commit("update", { target: "fire-direction", data: "" });
// this.$store.commit("update", { target: "fire-direction", data: "" });
this.$store.commit("update", { target: "bottom-left-arrow", data: true });
},
methods: {
...mapMutations(["update"]),
@ -142,18 +167,81 @@ main {
.video-bottom {
position: absolute;
bottom: adjust(176.3px);
left: adjust(38px);
bottom: adjust(200.5px);
left: adjust(48px);
transform: scale(0.9);
}
.video-top {
position: absolute;
top: adjust(48px);
left: adjust(33px);
top: adjust(35px);
left: adjust(38px);
transform: scale(0.95, 0.9);
}
.arrow {
width: adjust(30px);
height: adjust(30px);
display: inline-block;
position: absolute;
}
.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;
}
.ar-top-left {
top: 175px;
left: 980px;
}
.ar-bottom-left {
top: 425px;
left: 955px;
}
.ar-bottom-right {
top: 492px;
left: 20px;
}
@keyframes clock-direction {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes reverse-clock-direction {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
.eq-main {
width: adjust(w(7150px));
height: adjust(h(960px));
@ -170,7 +258,7 @@ main {
position: absolute;
// right: adjust(1200px);
opacity: 0;
top: adjust(125px);
top: adjust(105px);
width: adjust(150px);
height: adjust(150px);
background: url(../../assets/mirror.png) no-repeat;
@ -183,7 +271,8 @@ main {
position: absolute;
// right: adjust(1200px);
opacity: 0;
top: adjust(125px);
top: adjust(105px);
// top: adjust(125px);
width: adjust(150px);
height: adjust(150px);
background: url(../../assets/mirror.png) no-repeat;

View File

@ -5,6 +5,10 @@ Vue.use(Vuex)
export default new Vuex.Store({
state: {
topLeftArrowRolling: false,
topRightArrowRolling: false,
bottomLeftArrowRolling: false,
bottomRightArrowRolling: false,
kilnPressure: 999,
oilTable1: {},
oilTable2: {},
@ -31,6 +35,18 @@ export default new Vuex.Store({
mutations: {
update(state, payload) {
switch (payload.target) {
case 'top-right-arrow': {
state.topRightArrowRolling = payload.data
}
case 'top-left-arrow': {
state.topLeftArrowRolling = payload.data
}
case 'bottom-right-arrow': {
state.bottomRightArrowRolling = payload.data
}
case 'bottom-left-arrow': {
state.bottomLeftArrowRolling = payload.data
}
case 'oil-1': {
state.oilTable1 = payload.data
//console.log('更换' + payload.target + '的数据' + payload.data)
@ -72,7 +88,7 @@ export default new Vuex.Store({
break
}
case 'kiln-water-in': {
state.kilnWaterIn = payload.data
state.kilnWaterIn = payload.data
//console.log('更换' + payload.target + '的数据' + payload.data)
break
}

View File

@ -60,7 +60,11 @@ export default class WsClient {
'kilnPressure': 'kiln-pressure',
'fireChangeTime': 'fire-change-time',
'waterInTemp': 'water-in-temp',
'waterOutTemp': 'water-out-temp'
'waterOutTemp': 'water-out-temp',
'southtouliaoji': 'top-right-arrow',
'northtouliaoji': 'bottom-right-arrow',
'shuipingJBQ2': 'top-left-arrow',
'shuipingJBQ1': 'bottom-left-arrow',
}
static socket = null