Merge branch 'master' of git.picaiba.com:g7hoo/dezhou-screen
This commit is contained in:
commit
3ae56eeabf
BIN
src/assets/arrow-disabled.png
Normal file
BIN
src/assets/arrow-disabled.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.0 KiB |
BIN
src/assets/arrow-r-disabled.png
Normal file
BIN
src/assets/arrow-r-disabled.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.0 KiB |
BIN
src/assets/arrow-r.png
Normal file
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
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 |
@ -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;
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -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
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user