xuos
/
xiuos_IoT
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add plc monitor page

This commit is contained in:
龚祖望 2022-11-14 17:53:36 +08:00
parent 19277c2dd1
commit a8f8203f4f
12 changed files with 547 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
xiuosiot-frontend/src/assets/images/greenlight.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 590 B

BIN
xiuosiot-frontend/src/assets/images/maduoche1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 458 KiB

BIN
xiuosiot-frontend/src/assets/images/maduoche2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 396 KiB

BIN
xiuosiot-frontend/src/assets/images/maduoche3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 497 KiB

BIN
xiuosiot-frontend/src/assets/images/maduoche4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 517 KiB

BIN
xiuosiot-frontend/src/assets/images/plc_monitor_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 MiB

BIN
xiuosiot-frontend/src/assets/images/redlight.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 619 B

BIN
xiuosiot-frontend/src/assets/images/timeScale.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 B

BIN
xiuosiot-frontend/src/assets/images/title_prepend.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 508 B

BIN
xiuosiot-frontend/src/assets/images/title_suffix.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 741 B

11
xiuosiot-frontend/src/layout/components/AppMain.vue
View File

@ -8,13 +8,13 @@
<script>
export default {
name: "AppMain",
name: 'AppMain',
computed: {
key() {
return this.$route.path;
},
},
};
return this.$route.path
}
}
}
</script>
<style scoped>
@ -22,6 +22,7 @@ export default {
/*50 = navbar */
background-color: #fafdff;
min-height: calc(100vh - 140px);
height:calc(100vh - 50px);
width: 100%;
position: relative;
overflow: hidden;

695
xiuosiot-frontend/src/views/terminal/PLC/monitor.vue
View File

@ -1,317 +1,506 @@
<template>
<div class="app-container">
<ul>
<!-- <ul>
<li>{{ '工业设备ID：'+data.deviceId }}</li>
<li>{{ '工业设备名称：'+data.deviceName }}</li>
<li>{{ 'plc IP：'+data.plcIp }}</li>
<li>{{ 'plc端口：'+data.port }}</li>
<li>{{ '扫描间隔：'+data.readPeriod }}</li>
<li v-for="(item,index) in data.readItemList" :key="index">{{ item.valueName+'：'+item.value }}</li>
</ul>
</ul> -->
<div class="part1">
<div class="top">
<div class="left">
<div class="title bd_blue">
<img
class="prepend"
src="@/assets/images/title_prepend.png"
>工业设备信息<img
class="suffix"
src="@/assets/images/title_suffix.png"
>
</div>
<div class="content">
<p class="param square_blue">工业设备ID</p>
<p class="val">1500</p>
<p class="param square_yellow">工业设备名称</p>
<p class="val">码垛车</p>
<p class="param square_purple">扫描间隔</p>
<p class="val">100ms</p>
<p class="param square_blue">PLC IP</p>
<p class="val">192.168.100.40</p>
<p class="param square_yellow">端口</p>
<p class="val">102</p>
</div>
</div>
<div class="center">
<div class="title bd_purple">
<img
class="prepend"
src="@/assets/images/title_prepend.png"
>工业设备模型<img
class="suffix"
src="@/assets/images/title_suffix.png"
>
</div>
<div style="width:100%;height: 392px;">
<swiper :options="swiperImgOption" style="height:100%;width:100%;margin-top: 15px;">
<swiper-slide>
<img class="slide-img" src="@/assets/images/maduoche1.png">
</swiper-slide>
<swiper-slide>
<img class="slide-img" src="@/assets/images/maduoche2.png">
</swiper-slide>
<swiper-slide>
<img class="slide-img" src="@/assets/images/maduoche3.png">
</swiper-slide>
<swiper-slide>
<img class="slide-img" src="@/assets/images/maduoche4.png">
</swiper-slide>
</swiper>
</div>
</div>
</div>
<div class="bottom">
<div class="title bd_yellow">
<img
class="prepend"
src="@/assets/images/title_prepend.png"
>工业设备变量信息<img
class="suffix"
src="@/assets/images/title_suffix.png"
>
</div>
<div class="content">
<div class="part">
<p>检测-左1松绳检测<img class="light" :src="getImgUrl('检测-左1松绳检测')"></p>
<p>检测-左2松绳检测<img class="light" :src="getImgUrl('检测-左2松绳检测')"></p>
<p>检测-右1松绳检测<img class="light" :src="getImgUrl('检测-右1松绳检测')"></p>
<p>检测-右2松绳检测<img class="light" :src="getImgUrl('检测-右2松绳检测')"></p>
<p>检测-提升上极限<img class="light" :src="getImgUrl('检测-提升上极限')"></p>
<p>检测-1#防坠器正常<img class="light" :src="getImgUrl('检测-1#防坠器正常')"></p>
</div>
<div class="part">
<p>检测-2#防坠器正常<img class="light" :src="getImgUrl('检测-2#防坠器正常')"></p>
<p>检测-车架子站油泵电机故障<img class="light" :src="getImgUrl('检测-车架子站油泵电机故障')"></p>
<p>检测-车架子油泵电机运行<img class="light" :src="getImgUrl('检测-车架子油泵电机运行')"></p>
<p>检测-平台升降变频器就绪<img class="light" :src="getImgUrl('检测-平台升降变频器就绪')"></p>
<p>检测-车架走行变频器就绪<img class="light" :src="getImgUrl('检测-车架走行变频器就绪')"></p>
<p>检测-车架对位(常闭)<img class="light" :src="getImgUrl('检测-车架对位(常闭)')"></p>
</div>
<div class="part">
<p>检测-走行1#减速位<img class="light" :src="getImgUrl('检测-走行1#减速位')"></p>
<p>检测-走行2#减速位<img class="light" :src="getImgUrl('检测-走行2#减速位')"></p>
<p>检测-走行3#减速位<img class="light" :src="getImgUrl('检测-走行3#减速位')"></p>
<p>检测-走行4#减速位<img class="light" :src="getImgUrl('检测-走行4#减速位')"></p>
<p>检测-走行5#减速位<img class="light" :src="getImgUrl('检测-走行5#减速位')"></p>
<p>检测-走行6#减速位<img class="light" :src="getImgUrl('检测-走行6#减速位')"></p>
</div>
</div>
</div>
</div>
<div class="part2">
<div class="title bd_yellow">
<img
class="prepend"
src="@/assets/images/title_prepend.png"
>工业设备变量信息<img
class="suffix"
src="@/assets/images/title_suffix.png"
>
</div>
<div class="content">
<swiper ref="mySwiper" :options="swiperOption" style="width:100%;padding-bottom: 55px;">
<swiper-slide>
<p>检测-走行7#减速位<img class="light" :src="getImgUrl('检测-走行7#减速位')"></p>
<p>检测-走行8#减速位<img class="light" :src="getImgUrl('检测-走行8#减速位')"></p>
<p>检测-走行9#减速位<img class="light" :src="getImgUrl('检测-走行9#减速位')"></p>
<p>检测-走行左锁紧位<img class="light" :src="getImgUrl('检测-走行左锁紧位')"></p>
<p>检测-走行左松开位<img class="light" :src="getImgUrl('检测-走行左松开位')"></p>
<p>检测-走行右锁紧位<img class="light" :src="getImgUrl('检测-走行右锁紧位')"></p>
<p>检测-走行右松开位<img class="light" :src="getImgUrl('检测-走行右松开位')"></p>
<p>检测-顶推变频器就绪<img class="light" :src="getImgUrl('检测-顶推变频器就绪')"></p>
<p>检测-左窑抬门变频器就绪<img class="light" :src="getImgUrl('检测-左窑抬门变频器就绪')"></p>
<p>检测-右窑抬门变频器就绪<img class="light" :src="getImgUrl('检测-右窑抬门变频器就绪')"></p>
<p>检测-托架驱动变频器就绪<img class="light" :src="getImgUrl('检测-托架驱动变频器就绪')"></p>
<p>检测-托架子站油泵电机故障<img class="light" :src="getImgUrl('检测-托架子站油泵电机故障')"></p>
<p>检测-托架子站油泵电机运行<img class="light" :src="getImgUrl('检测-托架子站油泵电机运行')"></p>
<p>检测-顶推旋起位<img class="light" :src="getImgUrl('检测-顶推旋起位')"></p>
<p>检测-顶推旋下位<img class="light" :src="getImgUrl('检测-顶推旋下位')"></p>
<p>检测-倾角传感器X轴<img class="light" :src="getImgUrl('检测-倾角传感器X轴')"></p>
<p>检测-倾角传感器Y轴<img class="light" :src="getImgUrl('检测-倾角传感器Y轴')"></p>
<p>检测-左窑开门位<img class="light" :src="getImgUrl('检测-左窑开门位')"></p>
</swiper-slide>
<swiper-slide>
<p>检测-左窑关门位<img class="light" :src="getImgUrl('检测-左窑关门位')"></p>
<p>检测-左窑抬门1#卡爪伸出位<img class="light" :src="getImgUrl('检测-左窑抬门1#卡爪伸出位')"></p>
<p>检测-左窑抬门1#卡爪收回位<img class="light" :src="getImgUrl('检测-左窑抬门1#卡爪收回位')"></p>
<p>检测-左窑抬门2#卡爪伸出位<img class="light" :src="getImgUrl('检测-左窑抬门2#卡爪伸出位')"></p>
<p>检测-左窑抬门2#卡爪收回位<img class="light" :src="getImgUrl('检测-左窑抬门2#卡爪收回位')"></p>
<p>检测-左窑顶推停止位<img class="light" :src="getImgUrl('检测-左窑顶推停止位')"></p>
<p>检测-左窑顶推减速位<img class="light" :src="getImgUrl('检测-左窑顶推减速位')"></p>
<p>检测-左窑顶推零位<img class="light" :src="getImgUrl('检测-左窑顶推零位')"></p>
<p>检测-1#升降定位伸出<img class="light" :src="getImgUrl('检测-1#升降定位伸出')"></p>
<p>检测-1#升降定位收回<img class="light" :src="getImgUrl('检测-1#升降定位收回')"></p>
<p>检测-模板左窑减速位<img class="light" :src="getImgUrl('检测-模板左窑减速位')"></p>
<p>检测-模板左窑顶推位<img class="light" :src="getImgUrl('检测-模板左窑顶推位')"></p>
<p>检测-模板左窑停止位<img class="light" :src="getImgUrl('检测-模板左窑停止位')"></p>
<p>检测-中间顶推零位<img class="light" :src="getImgUrl('检测-中间顶推零位')"></p>
<p>检测-左窑窑门检测<img class="light" :src="getImgUrl('检测-左窑窑门检测')"></p>
<p>检测-右窑开门位<img class="light" :src="getImgUrl('检测-右窑开门位')"></p>
<p>检测-右窑关门位<img class="light" :src="getImgUrl('检测-右窑关门位')"></p>
<p>检测-右窑抬门1#卡爪伸出位<img class="light" :src="getImgUrl('检测-右窑抬门1#卡爪伸出位')"></p>
</swiper-slide>
<swiper-slide>
<p>检测-右窑抬门1#卡爪收回位<img class="light" :src="getImgUrl('检测-右窑抬门1#卡爪收回位')"></p>
<p>检测-右窑抬门2#卡爪伸出位<img class="light" :src="getImgUrl('检测-右窑抬门2#卡爪伸出位')"></p>
<p>检测-右窑抬门2#卡爪收回位<img class="light" :src="getImgUrl('检测-右窑抬门2#卡爪收回位')"></p>
<p>检测-右窑顶推停止位<img class="light" :src="getImgUrl('检测-右窑顶推停止位')"></p>
<p>检测-右窑顶推减速位<img class="light" :src="getImgUrl('检测-右窑顶推减速位')"></p>
<p>检测-右窑顶推零位<img class="light" :src="getImgUrl('检测-右窑顶推零位')"></p>
<p>检测-2#升降定位伸出<img class="light" :src="getImgUrl('检测-2#升降定位伸出')"></p>
<p>检测-2#升降定位收回<img class="light" :src="getImgUrl('检测-2#升降定位收回')"></p>
<p>检测-模板右窑减速位<img class="light" :src="getImgUrl('检测-模板右窑减速位')"></p>
<p>检测-模板右窑顶推位<img class="light" :src="getImgUrl('检测-模板右窑顶推位')"></p>
<p>检测-模板右窑停止位<img class="light" :src="getImgUrl('检测-模板右窑停止位')"></p>
<p>检测-右窑窑门检测<img class="light" :src="getImgUrl('检测-右窑窑门检测')"></p>
<p>检测-DB_车架当前位置<span class="val">{{ getVal('DB_车架当前位置') }}</span></p>
<p>检测-MD_编码器实际值<span class="val">{{ getVal('MD_编码器实际值') }}</span></p>
<p>检测-DB_平台当前位置_层号<span class="val">{{ getVal('DB_平台当前位置_层号') }}</span></p>
<p>检测-DB_平台当前位置_位置号<span class="val">{{ getVal('DB_平台当前位置_位置号') }}</span></p>
<p>检测-DB_顶推当前位置<span class="val">{{ getVal('DB_顶推当前位置') }}</span></p>
<p>检测-DB_模台当前位置<span class="val">{{ getVal('DB_模台当前位置') }}</span></p>
</swiper-slide>
<div slot="pagination" class="swiper-pagination" />
</swiper>
</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: { swiper, swiperSlide },
data() {
return {
data: {
'deviceId': 1500,
'deviceName': '码垛车',
'plcIp': '192.168.100.40',
'port': '102',
'readPeriod': 100,
'readItemList': [
deviceId: 1500,
deviceName: '码垛车',
plcIp: '192.168.100.40',
port: '102',
readPeriod: 100,
readItemList: [
{
'valueName': '检测-左1松绳检测',
'value': 1
valueName: '检测-左1松绳检测',
value: 1
},
{
'valueName': '检测-左2松绳检测',
'value': 1
valueName: '检测-左2松绳检测',
value: 1
},
{
'valueName': '检测-右1松绳检测',
'value': 1
valueName: '检测-右1松绳检测',
value: 1
},
{
'valueName': '检测-右2松绳检测',
'value': 1
valueName: '检测-右2松绳检测',
value: 1
},
{
'valueName': '检测-提升上极限',
'value': 1
valueName: '检测-提升上极限',
value: 1
},
{
'valueName': '检测-1#防坠器正常',
'value': 1
valueName: '检测-1#防坠器正常',
value: 1
},
{
'valueName': '检测-2#防坠器正常',
'value': 1
valueName: '检测-2#防坠器正常',
value: 1
},
{
'valueName': '检测-车架子站油泵电机故障',
'value': 0
valueName: '检测-车架子站油泵电机故障',
value: 0
},
{
'valueName': '检测-车架子油泵电机运行',
'value': 0
valueName: '检测-车架子油泵电机运行',
value: 0
},
{
'valueName': '检测-平台升降变频器就绪',
'value': 1
valueName: '检测-平台升降变频器就绪',
value: 1
},
{
'valueName': '检测-车架走行变频器就绪',
'value': 1
valueName: '检测-车架走行变频器就绪',
value: 1
},
{
'valueName': '检测-车架对位(常闭)',
'value': 0
valueName: '检测-车架对位(常闭)',
value: 0
},
{
'valueName': '检测-走行1#减速位',
'value': 0
valueName: '检测-走行1#减速位',
value: 0
},
{
'valueName': '检测-走行2#减速位',
'value': 1
valueName: '检测-走行2#减速位',
value: 1
},
{
'valueName': '检测-走行3#减速位',
'value': 0
valueName: '检测-走行3#减速位',
value: 0
},
{
'valueName': '检测-走行4#减速位',
'value': 0
valueName: '检测-走行4#减速位',
value: 0
},
{
'valueName': '检测-走行5#减速位',
'value': 0
valueName: '检测-走行5#减速位',
value: 0
},
{
'valueName': '检测-走行6#减速位',
'value': 0
valueName: '检测-走行6#减速位',
value: 0
},
{
'valueName': '检测-走行7#减速位',
'value': 0
valueName: '检测-走行7#减速位',
value: 0
},
{
'valueName': '检测-走行8#减速位',
'value': 0
valueName: '检测-走行8#减速位',
value: 0
},
{
'valueName': '检测-走行9#减速位',
'value': 0
valueName: '检测-走行9#减速位',
value: 0
},
{
'valueName': '检测-走行左锁紧位',
'value': 1
valueName: '检测-走行左锁紧位',
value: 1
},
{
'valueName': '检测-走行左松开位',
'value': 0
valueName: '检测-走行左松开位',
value: 0
},
{
'valueName': '检测-走行右锁紧位',
'value': 1
valueName: '检测-走行右锁紧位',
value: 1
},
{
'valueName': '检测-走行右松开位',
'value': 0
valueName: '检测-走行右松开位',
value: 0
},
{
'valueName': '检测-顶推变频器就绪',
'value': 1
valueName: '检测-顶推变频器就绪',
value: 1
},
{
'valueName': '检测-左窑抬门变频器就绪',
'value': 1
valueName: '检测-左窑抬门变频器就绪',
value: 1
},
{
'valueName': '检测-右窑抬门变频器就绪',
'value': 1
valueName: '检测-右窑抬门变频器就绪',
value: 1
},
{
'valueName': '检测-托架驱动变频器就绪',
'value': 1
valueName: '检测-托架驱动变频器就绪',
value: 1
},
{
'valueName': '检测-托架子站油泵电机故障',
'value': 0
valueName: '检测-托架子站油泵电机故障',
value: 0
},
{
'valueName': '检测-托架子站油泵电机运行',
'value': 0
valueName: '检测-托架子站油泵电机运行',
value: 0
},
{
'valueName': '检测-顶推旋起位',
'value': 0
valueName: '检测-顶推旋起位',
value: 0
},
{
'valueName': '检测-顶推旋下位',
'value': 1
valueName: '检测-顶推旋下位',
value: 1
},
{
'valueName': '检测-倾角传感器X轴',
'value': 1
valueName: '检测-倾角传感器X轴',
value: 1
},
{
'valueName': '检测-倾角传感器Y轴',
'value': 1
valueName: '检测-倾角传感器Y轴',
value: 1
},
{
'valueName': '检测-左窑开门位',
'value': 0
valueName: '检测-左窑开门位',
value: 0
},
{
'valueName': '检测-左窑关门位',
'value': 1
valueName: '检测-左窑关门位',
value: 1
},
{
'valueName': '检测-左窑抬门1#卡爪伸出位',
'value': 0
valueName: '检测-左窑抬门1#卡爪伸出位',
value: 0
},
{
'valueName': '检测-左窑抬门1#卡爪收回位',
'value': 0
valueName: '检测-左窑抬门1#卡爪收回位',
value: 0
},
{
'valueName': '检测-左窑抬门2#卡爪伸出位',
'value': 0
valueName: '检测-左窑抬门2#卡爪伸出位',
value: 0
},
{
'valueName': '检测-左窑抬门2#卡爪收回位',
'value': 0
valueName: '检测-左窑抬门2#卡爪收回位',
value: 0
},
{
'valueName': '检测-左窑顶推停止位',
'value': 0
valueName: '检测-左窑顶推停止位',
value: 0
},
{
'valueName': '检测-左窑顶推减速位',
'value': 0
valueName: '检测-左窑顶推减速位',
value: 0
},
{
'valueName': '检测-左窑顶推零位',
'value': 1
valueName: '检测-左窑顶推零位',
value: 1
},
{
'valueName': '检测-1#升降定位伸出',
'value': 1
valueName: '检测-1#升降定位伸出',
value: 1
},
{
'valueName': '检测-1#升降定位收回',
'value': 0
valueName: '检测-1#升降定位收回',
value: 0
},
{
'valueName': '检测-模板左窑减速位',
'value': 0
valueName: '检测-模板左窑减速位',
value: 0
},
{
'valueName': '检测-模板左窑顶推位',
'value': 0
valueName: '检测-模板左窑顶推位',
value: 0
},
{
'valueName': '检测-模板左窑停止位',
'value': 0
valueName: '检测-模板左窑停止位',
value: 0
},
{
'valueName': '检测-中间顶推零位',
'value': 1
valueName: '检测-中间顶推零位',
value: 1
},
{
'valueName': '检测-左窑窑门检测',
'value': 0
valueName: '检测-左窑窑门检测',
value: 0
},
{
'valueName': '检测-右窑开门位',
'value': 0
valueName: '检测-右窑开门位',
value: 0
},
{
'valueName': '检测-右窑关门位',
'value': 1
valueName: '检测-右窑关门位',
value: 1
},
{
'valueName': '检测-右窑抬门1#卡爪伸出位',
'value': 0
valueName: '检测-右窑抬门1#卡爪伸出位',
value: 0
},
{
'valueName': '检测-右窑抬门1#卡爪收回位',
'value': 0
valueName: '检测-右窑抬门1#卡爪收回位',
value: 0
},
{
'valueName': '检测-右窑抬门2#卡爪伸出位',
'value': 0
valueName: '检测-右窑抬门2#卡爪伸出位',
value: 0
},
{
'valueName': '检测-右窑抬门2#卡爪收回位',
'value': 0
valueName: '检测-右窑抬门2#卡爪收回位',
value: 0
},
{
'valueName': '检测-右窑顶推停止位',
'value': 0
valueName: '检测-右窑顶推停止位',
value: 0
},
{
'valueName': '检测-右窑顶推减速位',
'value': 0
valueName: '检测-右窑顶推减速位',
value: 0
},
{
'valueName': '检测-右窑顶推零位',
'value': 1
valueName: '检测-右窑顶推零位',
value: 1
},
{
'valueName': '检测-2#升降定位伸出',
'value': 1
valueName: '检测-2#升降定位伸出',
value: 1
},
{
'valueName': '检测-2#升降定位收回',
'value': 0
valueName: '检测-2#升降定位收回',
value: 0
},
{
'valueName': '检测-模板右窑减速位',
'value': 0
valueName: '检测-模板右窑减速位',
value: 0
},
{
'valueName': '检测-模板右窑顶推位',
'value': 0
valueName: '检测-模板右窑顶推位',
value: 0
},
{
'valueName': '检测-模板右窑停止位',
'value': 0
valueName: '检测-模板右窑停止位',
value: 0
},
{
'valueName': '检测-右窑窑门检测',
'value': 0
valueName: '检测-右窑窑门检测',
value: 0
},
{
'valueName': 'DB_车架当前位置',
'value': 6
valueName: 'DB_车架当前位置',
value: 6
},
{
'valueName': 'MD_编码器实际值',
'value': 5856
valueName: 'MD_编码器实际值',
value: 5856
},
{
'valueName': 'DB_平台当前位置_层号',
'value': 1
valueName: 'DB_平台当前位置_层号',
value: 1
},
{
'valueName': 'DB_平台当前位置_位置号',
'value': 0
valueName: 'DB_平台当前位置_位置号',
value: 0
},
{
'valueName': 'DB_顶推当前位置',
'value': 0
valueName: 'DB_顶推当前位置',
value: 0
},
{
'valueName': 'DB_模台当前位置',
'value': -7
valueName: 'DB_模台当前位置',
value: -7
}
],
'org': 'jxsd'
org: 'jxsd'
},
swiperImgOption: {
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false
}
},
swiperOption: {
pagination: { // 分页器
el: '.swiper-pagination',
clickable: true
},
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false
}
}
}
},
@ -325,7 +514,7 @@ export default {
socket.onopen = () => {
console.log('socket已打开')
}
socket.onmessage = msg => {
socket.onmessage = (msg) => {
console.log('msg', msg)
if (msg.data) {
this.data = JSON.parse(msg.data)
@ -338,7 +527,205 @@ export default {
socket.onerror = function() {
console.log('websocket发生了错误')
}
},
getVal(valueName) {
const res = this.data.readItemList.filter(item => item.valueName === valueName)
if (res && res.length) {
return res[0].value
}
},
getImgUrl(valueName) {
const res = this.data.readItemList.filter(item => item.valueName === valueName)
if (res && res.length) {
if (res[0].value === 1) {
return require('@/assets/images/greenlight.png')
}
if (res[0].value === 0) {
return require('@/assets/images/redlight.png')
}
}
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
background: url('~@/assets/images/plc_monitor_bg.png') no-repeat;
background-size: 100% 100%;
color: #fff;
font-family: Microsoft YaHei;
padding: 120px 0 30px 30px;
display: flex;
height: 100%;
min-width: 1300px;
overflow: auto;
.title {
font-size: 20px;
font-family: TRENDS;
border-bottom: 2px solid;
line-height: 40px;
font-weight: 100;
img {
vertical-align: middle;
}
.prepend {
margin-right: 20px;
margin-left: 10px;
}
.suffix {
margin-right: 20px;
float: right;
margin-top: 10px;
}
}
.part1 {
width: 70%;
.top{
display: flex;
.left {
flex:1;
width: 25%;
min-width: 300px;
margin-right: 36px;
margin-bottom: 22px;
.content {
padding: 15px 0;
margin-top: 15px;
text-align: center;
background-color: rgba(255, 255, 255, 0.24);
p {
margin: 11px auto;
}
.param {
font-size: 20px;
font-weight: bold;
position: relative;
color: #00ffff;
&::before {
content: '';
width: 12px;
height: 12px;
display: inline-block;
position: absolute;
left: 80px;
top: 7px;
}
}
.val {
font-size: 22px;
font-weight: 400;
}
}
}
.center {
flex:1;
width: 65%;
.slide-img{
width: 100%;
height: 100%;
}
}
}
.bottom {
clear: both;
width: 100%;
.content {
margin-top: 15px;
padding-bottom: 20px;
background-color: rgba(255, 255, 255, 0.24);
font-size: 16px;
font-weight: bold;
display: flex;
justify-content: space-evenly;
.part {
width: 31%;
p {
line-height: 30px;
padding-left: 22px;
padding-right: 20px;
margin: 5px 0;
white-space: nowrap;
letter-spacing: 1px;
&:nth-of-type(even) {
background: rgba(122, 178, 255, 0.39);
}
img{
float: right;
margin-top: 10px;
}
}
}
}
}
}
.part2 {
flex: 1;
width: 30%;
min-width: 350px;
margin-left: 36px;
margin-right: 30px;
.content {
margin-top: 15px;
padding-top: 15px;
background-color: rgba(255, 255, 255, 0.24);
font-size: 16px;
font-weight: bold;
p {
line-height: 30px;
padding-left: 18%;
width: 65%;
padding-right: 20px;
margin: 5px auto;
white-space: nowrap;
letter-spacing: 1px;
&:nth-of-type(even) {
background: rgba(122, 178, 255, 0.39);
}
img{
float: right;
margin-top: 10px;
}
.val{
float: right;
}
}
}
}
}
.bd_blue {
border-color: rgb(82, 233, 254) !important;
}
.bd_purple {
border-color: rgb(144, 89, 233) !important;
}
.bd_yellow {
border-color: rgb(221, 172, 65) !important;
}
.square_blue::before {
background-color: #00ffff;
}
.square_yellow::before {
background-color: #f2cb0a;
}
.square_purple::before {
background-color: #8f59eb;
}
::v-deep .swiper-pagination-bullet-active{
background-color: #00CCF2;
}
.light{
animation: fade 1.5s infinite;
}
@keyframes fade {
from {
opacity: 1;
}
50% {
opacity: .5;
}
to {
opacity: 1;
}
}
</style>