add plc monitor page

xiuosiot-frontend/src/layout/components/AppMain.vue

@@ -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;

xiuosiot-frontend/src/views/terminal/PLC/monitor.vue

@@ -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>