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="video-crash" v-if="false"></div>
|
||||||
|
|
||||||
<div class="eq-main absolute">
|
<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="">
|
<div class="video-bottom" v-show="fireDirection === '北火'" style="">
|
||||||
<video
|
<video
|
||||||
id="1"
|
id="1"
|
||||||
@ -102,11 +119,19 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
computed: mapState(["kilnPressure", "fireDirection"]),
|
computed: mapState([
|
||||||
|
"kilnPressure",
|
||||||
|
"fireDirection",
|
||||||
|
"topLeftArrowRolling",
|
||||||
|
"topRightArrowRolling",
|
||||||
|
"bottomLeftArrowRolling",
|
||||||
|
"bottomRightArrowRolling",
|
||||||
|
]),
|
||||||
mounted() {
|
mounted() {
|
||||||
const wsc = new WsClient(this);
|
const wsc = new WsClient(this);
|
||||||
wsc.registerListeners();
|
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: {
|
methods: {
|
||||||
...mapMutations(["update"]),
|
...mapMutations(["update"]),
|
||||||
@ -142,18 +167,81 @@ main {
|
|||||||
|
|
||||||
.video-bottom {
|
.video-bottom {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: adjust(176.3px);
|
bottom: adjust(200.5px);
|
||||||
left: adjust(38px);
|
left: adjust(48px);
|
||||||
transform: scale(0.9);
|
transform: scale(0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-top {
|
.video-top {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: adjust(48px);
|
top: adjust(35px);
|
||||||
left: adjust(33px);
|
left: adjust(38px);
|
||||||
transform: scale(0.95, 0.9);
|
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 {
|
.eq-main {
|
||||||
width: adjust(w(7150px));
|
width: adjust(w(7150px));
|
||||||
height: adjust(h(960px));
|
height: adjust(h(960px));
|
||||||
@ -170,7 +258,7 @@ main {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
// right: adjust(1200px);
|
// right: adjust(1200px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
top: adjust(125px);
|
top: adjust(105px);
|
||||||
width: adjust(150px);
|
width: adjust(150px);
|
||||||
height: adjust(150px);
|
height: adjust(150px);
|
||||||
background: url(../../assets/mirror.png) no-repeat;
|
background: url(../../assets/mirror.png) no-repeat;
|
||||||
@ -183,7 +271,8 @@ main {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
// right: adjust(1200px);
|
// right: adjust(1200px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
top: adjust(125px);
|
top: adjust(105px);
|
||||||
|
// top: adjust(125px);
|
||||||
width: adjust(150px);
|
width: adjust(150px);
|
||||||
height: adjust(150px);
|
height: adjust(150px);
|
||||||
background: url(../../assets/mirror.png) no-repeat;
|
background: url(../../assets/mirror.png) no-repeat;
|
||||||
|
@ -5,6 +5,10 @@ Vue.use(Vuex)
|
|||||||
|
|
||||||
export default new Vuex.Store({
|
export default new Vuex.Store({
|
||||||
state: {
|
state: {
|
||||||
|
topLeftArrowRolling: false,
|
||||||
|
topRightArrowRolling: false,
|
||||||
|
bottomLeftArrowRolling: false,
|
||||||
|
bottomRightArrowRolling: false,
|
||||||
kilnPressure: 999,
|
kilnPressure: 999,
|
||||||
oilTable1: {},
|
oilTable1: {},
|
||||||
oilTable2: {},
|
oilTable2: {},
|
||||||
@ -31,6 +35,18 @@ export default new Vuex.Store({
|
|||||||
mutations: {
|
mutations: {
|
||||||
update(state, payload) {
|
update(state, payload) {
|
||||||
switch (payload.target) {
|
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': {
|
case 'oil-1': {
|
||||||
state.oilTable1 = payload.data
|
state.oilTable1 = payload.data
|
||||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||||
@ -72,7 +88,7 @@ export default new Vuex.Store({
|
|||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 'kiln-water-in': {
|
case 'kiln-water-in': {
|
||||||
state.kilnWaterIn = payload.data
|
state.kilnWaterIn = payload.data
|
||||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
@ -60,7 +60,11 @@ export default class WsClient {
|
|||||||
'kilnPressure': 'kiln-pressure',
|
'kilnPressure': 'kiln-pressure',
|
||||||
'fireChangeTime': 'fire-change-time',
|
'fireChangeTime': 'fire-change-time',
|
||||||
'waterInTemp': 'water-in-temp',
|
'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
|
static socket = null
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user