diff --git a/.history/src/views/Zhou/ZNYWJK_20231211173556.vue b/.history/src/views/Zhou/ZNYWJK_20231211173556.vue
new file mode 100644
index 0000000..1666f56
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231211173556.vue
@@ -0,0 +1,1164 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'module/webs/index.html?1'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe
+            >;
+            <p class="h_footer">
+              <span class="time">{{ dates }}</span>
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>余热发电站</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'module/webs/index.html?' + item.channel"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script src="../../utils/PlayerControl.js"></script>
+<script>
+import moment from "moment";
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "D19",
+          name: "3号煤磨在线监测",
+        },
+        {
+          channel: "D14",
+          name: "水泥散12#发货口",
+        },
+        {
+          channel: "69",
+          name: "1#回转窑",
+        },
+        {
+          channel: "70",
+          name: "辊压机",
+        },
+        {
+          channel: "71",
+          name: "2#窑",
+        },
+        {
+          channel: "33",
+          name: "矿区全貌",
+        },
+        {
+          channel: "40",
+          name: "3#煤磨",
+        },
+        {
+          channel: "63",
+          name: "垃圾处理北门外",
+        },
+        {
+          channel: "71",
+          name: "2#窑",
+        },
+      ],
+      dates: new Date(),
+      videoSource: require("../../assets/videos/林俊杰 - 愿与愁.mp4"),
+      isFullScreenTag: false,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    setInterval(() => {
+      moment.locale("zh-cn");
+      // 获取当前时间
+      const currentTime = moment();
+      // 格式化时间为指定格式：年-月-日 星期几 时分秒
+      const formattedTime = currentTime.format("YYYY-MM-DD dddd HH:mm:ss");
+      // 输出格式化后的时间
+      this.dates = formattedTime;
+    }, 100);
+<<<<<<< HEAD
+=======
+    var options = {
+      wsURL: "ws://221.214.127.18:8200/rtspoverwebsocket",
+      rtspURL:
+        "rtsp://admin:pyss2017@192.168.1.212:8200/cam/realmonitor?channel=D1&subtype=0",
+      username: "admin",
+      password: "pyss2017",
+    };
+    var videoplayerObj = document.getElementById("testVideo");
+    var canvasplayerObj = document.getElementById("testCanvas");
+    var player = new PlayerControl(options);
+    player.init(canvasplayerObj, videoplayerObj);
+>>>>>>> 9263f9773db22a277d51fa8348004b5adcbded14
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        ::-webkit-scrollbar {
+          width: 5px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+        }
+        // 滑块
+        ::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        ::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background-color: #fff;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 125px;
+
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/红.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231211174521.vue b/.history/src/views/Zhou/ZNYWJK_20231211174521.vue
new file mode 100644
index 0000000..1666f56
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231211174521.vue
@@ -0,0 +1,1164 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'module/webs/index.html?1'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe
+            >;
+            <p class="h_footer">
+              <span class="time">{{ dates }}</span>
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>余热发电站</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'module/webs/index.html?' + item.channel"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script src="../../utils/PlayerControl.js"></script>
+<script>
+import moment from "moment";
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "D19",
+          name: "3号煤磨在线监测",
+        },
+        {
+          channel: "D14",
+          name: "水泥散12#发货口",
+        },
+        {
+          channel: "69",
+          name: "1#回转窑",
+        },
+        {
+          channel: "70",
+          name: "辊压机",
+        },
+        {
+          channel: "71",
+          name: "2#窑",
+        },
+        {
+          channel: "33",
+          name: "矿区全貌",
+        },
+        {
+          channel: "40",
+          name: "3#煤磨",
+        },
+        {
+          channel: "63",
+          name: "垃圾处理北门外",
+        },
+        {
+          channel: "71",
+          name: "2#窑",
+        },
+      ],
+      dates: new Date(),
+      videoSource: require("../../assets/videos/林俊杰 - 愿与愁.mp4"),
+      isFullScreenTag: false,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    setInterval(() => {
+      moment.locale("zh-cn");
+      // 获取当前时间
+      const currentTime = moment();
+      // 格式化时间为指定格式：年-月-日 星期几 时分秒
+      const formattedTime = currentTime.format("YYYY-MM-DD dddd HH:mm:ss");
+      // 输出格式化后的时间
+      this.dates = formattedTime;
+    }, 100);
+<<<<<<< HEAD
+=======
+    var options = {
+      wsURL: "ws://221.214.127.18:8200/rtspoverwebsocket",
+      rtspURL:
+        "rtsp://admin:pyss2017@192.168.1.212:8200/cam/realmonitor?channel=D1&subtype=0",
+      username: "admin",
+      password: "pyss2017",
+    };
+    var videoplayerObj = document.getElementById("testVideo");
+    var canvasplayerObj = document.getElementById("testCanvas");
+    var player = new PlayerControl(options);
+    player.init(canvasplayerObj, videoplayerObj);
+>>>>>>> 9263f9773db22a277d51fa8348004b5adcbded14
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        ::-webkit-scrollbar {
+          width: 5px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+        }
+        // 滑块
+        ::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        ::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background-color: #fff;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 125px;
+
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/红.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231211174537.vue b/.history/src/views/Zhou/ZNYWJK_20231211174537.vue
new file mode 100644
index 0000000..1666f56
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231211174537.vue
@@ -0,0 +1,1164 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'module/webs/index.html?1'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe
+            >;
+            <p class="h_footer">
+              <span class="time">{{ dates }}</span>
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>余热发电站</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'module/webs/index.html?' + item.channel"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script src="../../utils/PlayerControl.js"></script>
+<script>
+import moment from "moment";
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "D19",
+          name: "3号煤磨在线监测",
+        },
+        {
+          channel: "D14",
+          name: "水泥散12#发货口",
+        },
+        {
+          channel: "69",
+          name: "1#回转窑",
+        },
+        {
+          channel: "70",
+          name: "辊压机",
+        },
+        {
+          channel: "71",
+          name: "2#窑",
+        },
+        {
+          channel: "33",
+          name: "矿区全貌",
+        },
+        {
+          channel: "40",
+          name: "3#煤磨",
+        },
+        {
+          channel: "63",
+          name: "垃圾处理北门外",
+        },
+        {
+          channel: "71",
+          name: "2#窑",
+        },
+      ],
+      dates: new Date(),
+      videoSource: require("../../assets/videos/林俊杰 - 愿与愁.mp4"),
+      isFullScreenTag: false,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    setInterval(() => {
+      moment.locale("zh-cn");
+      // 获取当前时间
+      const currentTime = moment();
+      // 格式化时间为指定格式：年-月-日 星期几 时分秒
+      const formattedTime = currentTime.format("YYYY-MM-DD dddd HH:mm:ss");
+      // 输出格式化后的时间
+      this.dates = formattedTime;
+    }, 100);
+<<<<<<< HEAD
+=======
+    var options = {
+      wsURL: "ws://221.214.127.18:8200/rtspoverwebsocket",
+      rtspURL:
+        "rtsp://admin:pyss2017@192.168.1.212:8200/cam/realmonitor?channel=D1&subtype=0",
+      username: "admin",
+      password: "pyss2017",
+    };
+    var videoplayerObj = document.getElementById("testVideo");
+    var canvasplayerObj = document.getElementById("testCanvas");
+    var player = new PlayerControl(options);
+    player.init(canvasplayerObj, videoplayerObj);
+>>>>>>> 9263f9773db22a277d51fa8348004b5adcbded14
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        ::-webkit-scrollbar {
+          width: 5px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+        }
+        // 滑块
+        ::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        ::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background-color: #fff;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 125px;
+
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/红.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231211174603.vue b/.history/src/views/Zhou/ZNYWJK_20231211174603.vue
new file mode 100644
index 0000000..2da7bde
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231211174603.vue
@@ -0,0 +1,1150 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'module/webs/index.html?1'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe
+            >;
+            <p class="h_footer">
+              <span class="time">{{ dates }}</span>
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>余热发电站</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'module/webs/index.html?' + item.channel"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script src="../../utils/PlayerControl.js"></script>
+<script>
+import moment from "moment";
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "D19",
+          name: "3号煤磨在线监测",
+        },
+        {
+          channel: "D14",
+          name: "水泥散12#发货口",
+        },
+        {
+          channel: "69",
+          name: "1#回转窑",
+        },
+        {
+          channel: "70",
+          name: "辊压机",
+        },
+        {
+          channel: "71",
+          name: "2#窑",
+        },
+        {
+          channel: "33",
+          name: "矿区全貌",
+        },
+        {
+          channel: "40",
+          name: "3#煤磨",
+        },
+        {
+          channel: "63",
+          name: "垃圾处理北门外",
+        },
+        {
+          channel: "71",
+          name: "2#窑",
+        },
+      ],
+      dates: new Date(),
+      videoSource: require("../../assets/videos/林俊杰 - 愿与愁.mp4"),
+      isFullScreenTag: false,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {
+    setInterval(() => {
+      moment.locale("zh-cn");
+      // 获取当前时间
+      const currentTime = moment();
+      // 格式化时间为指定格式：年-月-日 星期几 时分秒
+      const formattedTime = currentTime.format("YYYY-MM-DD dddd HH:mm:ss");
+      // 输出格式化后的时间
+      this.dates = formattedTime;
+    }, 100);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        ::-webkit-scrollbar {
+          width: 5px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+        }
+        // 滑块
+        ::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        ::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background-color: #fff;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 125px;
+
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/红.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/public/index.html b/public/index.html
index d0b68c2..5d967b5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,11 +6,6 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <!-- 引入 Vue CDN -->
-  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
-  <!-- 引入 jQuery CDN -->
-  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-  <script src="../src/assets/module/PlayerControl.js"></script>
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>
diff --git a/public/module/webs/index.html b/public/module/webs/index.html
index 05c57a3..9662b51 100644
--- a/public/module/webs/index.html
+++ b/public/module/webs/index.html
@@ -18,11 +18,4 @@
 	<script src="index.js"></script>
 </body>
 
-</html>
-
-<style>
-	.h5-play-wrap {
-		height: 100%;
-		width: 100%;
-	}
-</style>
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/public/module/webs/index.js b/public/module/webs/index.js
index b469663..f25ec9d 100644
--- a/public/module/webs/index.js
+++ b/public/module/webs/index.js
@@ -139,6 +139,7 @@ const setVideoDom = () => {
   $canvas_ivs = $("#h5_ivs_" + WndIndex);
   $videoLoading = $("#h5_loading_" + WndIndex);
 };
+
 /**
 /**
  * @description 预览
@@ -148,6 +149,7 @@ const setVideoDom = () => {
  * @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
  */
 const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
+  let channel = window.location.href.split("?")[1];
   if (
     playerInstance[WndIndex] &&
     onlineChannel.indexOf(channel) > -1 &&
@@ -157,7 +159,7 @@ const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
     return;
   }
   onStopPreview();
-  var player = null
+  var player = null;
   let options = {
     wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket",
     rtspURL:
@@ -165,7 +167,7 @@ const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
       "221.214.127.18" +
       ":" +
       "8200" +
-      "/cam/realmonitor?channel=1" +
+      `/cam/realmonitor?channel=${channel}` +
       "&subtype=0" +
       "&proto=Private3",
     username: "admin",
@@ -187,9 +189,6 @@ const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
     if (!player.isPlayback) {
       onlineChannel.push(channel);
       updateChannelList();
-      // if(curWndType !== 1) {
-      //     clickNextWnd();
-      // }
     }
   });
 
diff --git a/src/views/Zhou/ZNYWJK.vue b/src/views/Zhou/ZNYWJK.vue
index 16aedfd..2da7bde 100644
--- a/src/views/Zhou/ZNYWJK.vue
+++ b/src/views/Zhou/ZNYWJK.vue
@@ -17,7 +17,7 @@
         <div id="dqsxtxx">
           <div class="headers">
             <iframe
-              :src="'module/webs/index.html'"
+              :src="'module/webs/index.html?1'"
               frameborder="0"
               width="100%"
               height="100%"
@@ -59,7 +59,12 @@
         <div id="spjk">
           <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
             <div class="jiankong">
-              <video :src="item.src" autoplay muted></video>
+              <iframe
+                :src="'module/webs/index.html?' + item.channel"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
             </div>
             <div class="spjk_title">{{ item.name }}</div>
           </div>
@@ -383,36 +388,40 @@ export default {
       ],
       sxtlist: [
         {
-          src: require("../../assets/videos/G.E.M.邓紫棋 - 不想回家.mp4"),
-          name: "SP锅炉",
+          channel: "D19",
+          name: "3号煤磨在线监测",
         },
         {
-          src: require("../../assets/videos/G.E.M.邓紫棋 - 句号.mp4"),
-          name: "回转窑",
+          channel: "D14",
+          name: "水泥散12#发货口",
         },
         {
-          src: require("../../assets/videos/G.E.M.邓紫棋 - GLORIA.mp4"),
-          name: "西侧垃圾发电",
+          channel: "69",
+          name: "1#回转窑",
         },
         {
-          src: require("../../assets/videos/林俊杰 - 愿与愁.mp4"),
-          name: "北侧垃圾发电",
+          channel: "70",
+          name: "辊压机",
         },
         {
-          src: require("../../assets/videos/G.E.M.邓紫棋 - 不想回家.mp4"),
-          name: "SP锅炉",
+          channel: "71",
+          name: "2#窑",
         },
         {
-          src: require("../../assets/videos/G.E.M.邓紫棋 - 句号.mp4"),
-          name: "回转窑",
+          channel: "33",
+          name: "矿区全貌",
         },
         {
-          src: require("../../assets/videos/G.E.M.邓紫棋 - GLORIA.mp4"),
-          name: "西侧垃圾发电",
+          channel: "40",
+          name: "3#煤磨",
         },
         {
-          src: require("../../assets/videos/林俊杰 - 愿与愁.mp4"),
-          name: "北侧垃圾发电",
+          channel: "63",
+          name: "垃圾处理北门外",
+        },
+        {
+          channel: "71",
+          name: "2#窑",
         },
       ],
       dates: new Date(),
@@ -703,8 +712,7 @@ export default {
         justify-content: space-around;
         flex-wrap: wrap;
         align-items: center;
-        align-content: space-around;
-        overflow-y: scroll;
+        overflow-y: auto;
         // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
         ::-webkit-scrollbar {
           width: 5px;