!25 监控

Merge pull request !25 from 打豆豆/master

package.json

@@ -44,9 +44,12 @@
     "dhtmlx-gantt": "^7.1.11",
     "echarts": "4.9.0",
     "element-ui": "2.15.6",
+    "ezuikit-js": "^0.7.2",
     "file-saver": "2.0.5",
+    "flv.js": "^1.6.2",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "jquery": "^3.7.1",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",

public/index.html

@@ -205,8 +205,5 @@
 		    <div class="load_title">正在加载系统资源，请耐心等待</div>
         </div>
 	</div>
-  <script type="text/javascript" src="./static/haikang/jquery-1.12.4.min.js"></script>
-  <script type="text/javascript" src="./static/haikang/jsencrypt.min.js"></script>
-  <script type="text/javascript" src="./static/haikang/web-control_1.2.5.min.js"></script>
   </body>
 </html>

src/views/mes/dv/largeScreen/index.vue

@@ -37,9 +37,10 @@
               {{ this.title }}
             </div>
             <div
-              style="color: rgb(9 207 255); font-size: 21px; margin-bottom: 4%"
+              style="color: rgb(9 207 255); font-size: 18px; margin-bottom: 4%"
             >
-              2024.01.11 09:18:18
+              <span>{{ this.dateYear }}</span> {{ this.dateDay }}
+              <span>{{ this.dateWeek }}</span>
             </div>
           </el-col>
           <el-col :span="10"
@@ -367,6 +368,7 @@
 </template>
 
 <script>
+import dayjs from "dayjs";
 // import * as statisServer from "@/api/statistics";
 // import { getInfo } from "@/api/user";
 import screenfull from "screenfull";
@@ -378,9 +380,31 @@ import roboticRate from "./components/roboticRate.vue";
 import AGVrate from "./components/AGVrate.vue";
 
 export default {
-  components: { online, offline, fault, onlineRate, roboticRate, AGVrate },
+  components: {
+    online,
+    offline,
+    fault,
+    onlineRate,
+    roboticRate,
+    AGVrate,
+    dayjs,
+  },
   data() {
     return {
+      dateDay: null,
+      dateYear: null,
+      dateWeek: null,
+      weekday: [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ],
+      timer: null,
+
       screenfull: false,
       title: "设备监控分析",
       titleVisible: false,
@@ -414,6 +438,12 @@ export default {
   },
 
   created() {
+    this.timer = setInterval(() => {
+      const date = dayjs(new Date());
+      this.dateDay = date.format("HH:mm:ss");
+      this.dateYear = date.format("YYYY-MM-DD");
+      this.dateWeek = date.format(this.weekday[date.day()]);
+    }, 1000);
     // 监听事件
     window.addEventListener("resize", this.onresize);
     this.getList();
@@ -426,10 +456,13 @@ export default {
     this.factorNumber();
   },
 
-  // beforeDestroy() {
+  beforeDestroy() {
-  //   // 取消监听事件
+    if (this.timer) {
-  //   window.removeEventListener("resize", this.onresize);
+      clearInterval(this.timer);
-  // },
+    }
+    // 取消监听事件
+    window.removeEventListener("resize", this.onresize);
+  },
   methods: {
     // 监听是否全屏状态
     onresize(event) {

src/views/mes/pro/production/components/complete.vue

@@ -97,16 +97,16 @@ export default {
             type: "category",
             boundaryGap: true, //坐标轴两边留白
             data: [
-              "2023-03",
-              "2023-04",
-              "2023-05",
-              "2023-06",
               "2023-07",
               "2023-08",
               "2023-09",
               "2023-10",
               "2023-11",
               "2023-12",
+              "2024-01",
+              "2024-02",
+              "2024-03",
+              "2024-04",
             ],
             axisLabel: {
               //坐标轴刻度标签的相关设置。

src/views/mes/pro/production/components/defective.vue

@@ -46,19 +46,19 @@ export default {
       var scale = 1;
       var echartData = [
         {
-          value: 50,
+          value: 5,
           name: "材料不良",
         },
         {
-          value: 100,
+          value: 1,
           name: "工序不良",
         },
         {
-          value: 300,
+          value: 2,
           name: "尺寸不良",
         },
         {
-          value: 50,
+          value: 1,
           name: "其他不良",
         },
       ];

src/views/mes/pro/production/components/lib/initPlugin.js

@@ -1,91 +0,0 @@
-
-import { getPubKey, setEncrypt } from './pubKey'
-var initCount = 0;
-var oWebControl;
-/**
- * 
- * @param {*} id :组件容器id
- * @param {*} iWidth :组件容器宽
- * @param {*} iHeight :组件容器高
- * @param {*}cbIntegrationCallBack：消息推送回调函数
- * @param {*} argument:初始化api参数
- * @param {*} completeCallBack：初始化成功回调函数
- *  @param {*} plugErrorCallBack：插件启动失败回调函数
- */
-const initPlugin = (id, iWidth, iHeight, argument, cbIntegrationCallBack = () => { }, completeCallBack = () => { }, plugErrorCallBack = () => { }) => {
-    // eslint-disable-next-line no-undef
-    oWebControl = new WebControl({
-        szPluginContainer: id,                       // 指定容器id
-        iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
-        iServicePortEnd: 15909,
-        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid
-        cbConnectSuccess: function () {                     // 创建WebControl实例成功											
-            oWebControl.JS_StartService("window", {         // WebControl实例创建成功后需要启动服务
-                dllPath: "./VideoPluginConnect.dll"         // 值"./VideoPluginConnect.dll"写死 
-            }).then(function () {                           // 启动插件服务成功
-                oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
-                    cbIntegrationCallBack: cbIntegrationCallBack
-                });
-
-                oWebControl.JS_CreateWnd(id, iWidth, iHeight).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
-                    init(argument, iWidth, iHeight,completeCallBack());  // 创建播放实例成功后初始化
-                    
-                });
-
-            }, function () { // 启动插件服务失败
-
-            });
-        },
-        // eslint-disable-next-line no-unused-vars
-        cbConnectError: function (e) { // 创建WebControl实例失败
-            oWebControl = null;
-            // eslint-disable-next-line no-undef
-            // $(id).html("插件未启动，正在尝试启动，请稍候...");
-                // eslint-disable-next-line no-undef
-                WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
- 
-            initCount++;
-            if (initCount < 2) {
-                setTimeout(function () {
-                    initPlugin(id, iWidth, iHeight, argument, cbIntegrationCallBack,completeCallBack,plugErrorCallBack);
-                }, 1000)
-            } else {
-
-                // eslint-disable-next-line no-undef
-                // $(id).html("插件启动失败，请检查插件是否安装！");
-                plugErrorCallBack()
-
-            }
-        },
-        // eslint-disable-next-line no-unused-vars
-        cbConnectClose: function (bNormalClose) {
-            // 异常断开：bNormalClose = false
-            // JS_Disconnect正常断开：bNormalClose = true	
-            console.log("cbConnectClose");
-            oWebControl = null;
-        }
-    });
-    return oWebControl
-}
-
-
-//初始化
-function init(argument, iWidth, iHeight,callback=()=>{}) {
-    getPubKey(oWebControl, function () {
-
-        oWebControl.JS_RequestInterface({
-            funcName: "init",
-            argument: JSON.stringify({
-                ...argument,
-                secret: setEncrypt(argument.secret)
-            })
-            // eslint-disable-next-line no-unused-vars
-        }).then(function (oData) {
-            callback()
-            //oWebControl.JS_Resize(iWidth, iHeight);  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
-            
-        });
-    })
-}
-
-export default initPlugin

src/views/mes/pro/production/components/lib/pubKey.js

@@ -1,24 +0,0 @@
-var pubKey;
-//获取公钥
-export function getPubKey(oWebControl,callback) {
-    // eslint-disable-next-line no-undef
-    oWebControl.JS_RequestInterface({
-        funcName: "getRSAPubKey",
-        argument: JSON.stringify({
-            keyLength: 1024
-        })
-    }).then(function (oData) {
-        if (oData.responseMsg.data) {
-            pubKey = oData.responseMsg.data;
-            callback()
-        }
-    })
-}
-
-//RSA加密
-export function setEncrypt(value) {
-    // eslint-disable-next-line no-undef
-    var encrypt = new JSEncrypt();
-    encrypt.setPublicKey(pubKey);
-    return encrypt.encrypt(value);
-} 

src/views/mes/pro/production/components/video.vue

@@ -1,495 +1,115 @@
 <template>
-  <div class="hk-video-container" id="playWnd">
+  <div style="overflow-y: scroll; overflow-x: hidden; height: 100%">
-    <!-- 下载插件提示框 -->
+    <section
-    <el-dialog
+      style="display: flex; justify-content: space-around; flex-wrap: wrap"
-      v-if="downloadDialog"
-      title="提示"
-      :visible.sync="dialogVisible"
-      width="30%"
     >
       <span
-        >{{downloadText}}</span
+        class="video_warp_item"
+        v-for="(item, index) in liveAddress"
+        v-if="index < 3"
+        :key="index"
       >
-      <span slot="footer" class="dialog-footer">
+        <div :id="'video-player-' + index"></div>
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleDownloadExe">下载</el-button>
       </span>
-    </el-dialog>
+    </section>
   </div>
 </template>
+
 <script>
-import initPlugin from "./lib/initPlugin";
+import $ from "jquery"; //  npm i jquery
+import EZUIKit from "ezuikit-js";
+
 export default {
-  name: "hkVideo",
+  name: "dashboard",
-  props: {
-    width: {
-      type: Number,
-      default: 500,
-    },
-    height: {
-      type: Number,
-      default: 300,
-    },
-    //初始化参数，
-    //      appkey: appkey,                            //API网关提供的appkey
-    //      secret: secret,                            //API网关提供的secret
-    //      ip: ip,                                    //API网关IP地址
-    //      playMode: playMode,                        //播放模式（决定显示预览还是回放界面）
-    //      port: port,                                //端口
-    //      snapDir: snapDir,                          //抓图存储路径
-    //      videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
-    //      layout: layout,                            //布局
-    //      enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
-    //      encryptedFields: encryptedFields,          //加密字段
-    // 			showToolbar: showToolbar,                  //是否显示工具栏
-    // 			showSmart: showSmart,                      //是否显示智能信息
-    // 			buttonIDs: buttonIDs                       //自定义工具条按钮
-    argument: {
-      type: Object,
-      default: () => {},
-    },
-    //模式：0：预览，1回放
-    playMode: {
-      type: Number,
-      default: 0,
-    },
-    //浏览器窗口改变时候是否动态变化组件宽度，将按照初始化组件占浏览器可视区域比例缩放组件宽度
-    autoResize: {
-      type: Boolean,
-      default: true,
-    },
-    //未安装插件时候是否显示插件下载对话框提示用户下载功能
-    downloadDialog: {
-      type: Boolean,
-      default: false,
-    },
-    //海康插件下载url
-    downloadUrl: {
-      type: String,
-      default: "",
-    },
-    downloadText:{
-      type:String,
-      default:'插件启动失败，请检查插件是否安装,如果未安装请点击下载安装,安装后刷新页面'
-    }
-  },
   data() {
     return {
-      curWindIndex: 1, //当前选中窗口号，从1开始
+      accessToken: "",
-      oWebControl: null, //插件实例
+      liveAddress: [],
-      iWidth: "", //组件宽
+      diveType: "",
-      iHeight: "", //组件高
+      players: [],
-      options: {
-        appkey: "admin", //API网关提供的appkey
-        secret: "mygymygy.", //API网关提供的secret
-        ip: "192.168.2.107", //API网关IP地址
-        playMode: 0, //播放模式（决定显示预览还是回放界面）
-        port: 443, //端口
-        snapDir: "D:\\SnapDir", //抓图存储路径
-        videoDir: "D:\\VideoDir", //紧急录像或录像剪辑存储路径
-        layout: "3x3", //布局
-        enableHTTPS: 1, //是否启用HTTPS协议
-        encryptedFields: "secret", //加密字段
-        showToolbar: 1,
-        showSmart: 1,
-        buttonIDs:
-          "0,1,16,256,257,258,259,260,512,513,514,515,516,517,768,769,770", //自定义工具条按钮
-      },
-      rate: 0, //组件宽度与窗口宽度比例
-      isInitComolete: false, //第一次初始化是否完成
-      dialogVisible: false,
     };
   },
-  watch: {
+
-    width: {
+  created() {
-      handler(val) {
+    this.getbagndianID();
-        this.iWidth = val;
-        if (this.isInitComolete) {
-          this.setRate();
-          this.setResize(this.iWidth, this.iHeight);
-        }
-      },
-      immediate: true,
-    },
-    height: {
-      handler(val) {
-        this.iHeight = val;
-        if (this.isInitComolete) {
-          this.setRate();
-          this.setResize(this.iWidth, this.iHeight);
-        }
-      },
-      immediate: true,
-    },
-    playMode() {
-      this.reInit();
-    },
-  },
-  mounted() {
-    this.init();
-    this.handleWindEvent();
-    this.$nextTick(() => {
-      this.setRate();
-    });
-  },
-  beforeDestroy() {
-    if (this.oWebControl != null) {
-      this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
-      this.oWebControl.JS_Disconnect().then(
-        function () {
-          // 断开与插件服务连接成功
-        },
-        function () {
-          // 断开与插件服务连接失败
-        }
-      );
-    }
   },
   methods: {
-    //初始化插件
+    // 获取磅点摄像头ID列表
-    init() {
+    getbagndianID() {
-      let argument = {
+      const This = this;
-        ...this.options,
+      // 获取萤石云的accessToken
-        ...this.argument,
+      $.ajax({
-      };
+        url: "https://open.ys7.com/api/lapp/token/get",
-      if (this.playMode > -1 && this.playMode < 2) {
+        type: "POST",
-        argument.playMode = this.playMode;
+        dataType: "json",
-      }
+        data: {
-      // eslint-disable-next-line no-undef
+          appKey: "4aea64fb66cd46e8ae2ded25e6dbf5bf", //String	appKey	Y
-      this.iWidth = Math.min(this.iWidth, $(window).width());
+          appSecret: "9011246f97d2d65ce33ab7c23e7a72de", //	String	appSecret	Y
-      this.oWebControl = initPlugin(
-        "playWnd",
-        this.iWidth,
-        this.iHeight,
-        argument,
-        this.cbIntegrationCallBack,
-        () => {
-          this.setRate();
-          this.setResize(this.iWidth, this.iHeight);
-          this.isInitComolete = true;
-          this.$emit("initFinish");
         },
-        () => {
+        cache: false,
-          if (this.downloadDialog) {
+        success: function (response) {
-            this.dialogVisible = true;
+          This.accessToken = response.data.accessToken;
-          }
+          $.ajax({
-          this.$emit("pluginError");
+            url: "https://open.ys7.com/api/lapp/camera/list",
-        }
+            header: {
-      );
+              "Content-Type": "application/x-www-form-urlencoded",
             },
-    //重新初始化
+            type: "POST",
-    reInit() {
+            dataType: "json",
-      if (this.oWebControl) {
+            data: {
-        this.oWebControl
+              accessToken: This.accessToken, //	String	授权过程获取的access_token	Y
-          .JS_RequestInterface({
+              pageStart: 0,
-            funcName: "uninit",
+              pageSize: 10,
-          })
-          .then(() => {
-            this.init();
-          });
-      }
             },
-    setRate() {
+            cache: false,
-      // eslint-disable-next-line no-undef
+            success: function (response) {
-      var iWidth = $(window).width();
+              var arr = [];
-      this.rate = this.iWidth / iWidth;
+              response.data.forEach((item, index) => {
-    },
+                if (item.channelNo == 3 || item.channelNo == 4) {
-    //窗口事件
-    handleWindEvent() {
-      // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
-      // eslint-disable-next-line no-undef
-      if (this.autoResize) {
-        // eslint-disable-next-line no-undef
-        $(window).resize(() => {
-          if (this.oWebControl) {
-            // eslint-disable-next-line no-undef
-            var iWidth = $(window).width();
-            // eslint-disable-next-line no-undef
-            this.iWidth = iWidth * this.rate;
-            this.oWebControl.JS_Resize(this.iWidth, this.iHeight);
-            this.setWndCover();
-          }
-        });
-      }
-      // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
-      // eslint-disable-next-line no-undef
-      $(window).scroll(() => {
-        if (this.oWebControl) {
-          this.oWebControl.JS_Resize(this.iWidth, this.iHeight);
-          this.setWndCover();
-        }
-      });
-    },
-    //推送消息回调
-    cbIntegrationCallBack(oData) {
-      if (oData?.responseMsg?.type) {
-        let data = oData.responseMsg;
-        switch (data.type) {
-          //窗口号改变
-          case 1:
-            if (this.curWindIndex !== data.msg.wndId) {
-              this.curWindIndex = data.msg.wndId;
-              this.$emit("windowChange", this.curWindIndex);
-            }
-            break;
-          //布局改变
-          case 6:
-            this.$emit("layoutChange", data.msg);
-            break;
-        }
-      }
-    },
-    // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
-    setWndCover() {
-      // eslint-disable-next-line no-undef
-      var iWidth = $(window).width();
-      // eslint-disable-next-line no-undef
-      var iHeight = $(window).height();
-      // eslint-disable-next-line no-undef
-      var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
-
-      var iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
-      var iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
-      var iCoverRight =
-        oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;
-      var iCoverBottom =
-        oDivRect.bottom - iHeight > 0
-          ? Math.round(oDivRect.bottom - iHeight)
-          : 0;
-
-      iCoverLeft = iCoverLeft > this.iWidth ? this.iWidth : iCoverLeft;
-      iCoverTop = iCoverTop > this.iHeight ? this.iHeight : iCoverTop;
-      iCoverRight = iCoverRight > this.iWidth ? this.iWidth : iCoverRight;
-      iCoverBottom = iCoverBottom > this.iHeight ? this.iHeight : iCoverBottom;
-
-      this.oWebControl.JS_RepairPartWindow(
-        0,
-        0,
-        this.iWidth + 1,
-        this.iHeight + 1
-      ); // 多1个像素点防止还原后边界缺失一个像素条
-      if (iCoverLeft != 0) {
-        this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, this.iHeight);
-      }
-      if (iCoverTop != 0) {
-        this.oWebControl.JS_CuttingPartWindow(
-          0,
-          0,
-          this.iWidth + 1,
-          iCoverTop + 1
-        ); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
-      }
-      if (iCoverRight != 0) {
-        this.oWebControl.JS_CuttingPartWindow(
-          this.iWidth - iCoverRight,
-          0,
-          iCoverRight,
-          this.iHeight
-        );
-      }
-      if (iCoverBottom != 0) {
-        this.oWebControl.JS_CuttingPartWindow(
-          0,
-          this.iHeight - iCoverBottom,
-          this.iWidth,
-          iCoverBottom
-        );
-      }
-    },
-    /** 预览
-     * @param {*} cameraIndexCode :获取输入的监控点编号值，必填
-     * @param {*} argument:api参数,
-     * argument属性cameraIndexCode优先级高于函数参数cameraIndexCode
-     */
-    startPreview(cameraIndexCode, argument = {}) {
-      if (this.oWebControl) {
-        let params = {
-          cameraIndexCode: cameraIndexCode, //监控点编号
-          streamMode: 0, //主子码流标识
-          transMode: 1, //传输协议
-          gpuMode: 1, //是否开启GPU硬解
-          wndId: -1,
-        };
-        this.oWebControl
-          .JS_RequestInterface({
-            funcName: "startPreview",
-            argument: JSON.stringify({
-              ...params,
-              ...argument,
-            }),
-          })
-          .then(() => {});
-      }
-    },
-    //停止所有预览
-    stopAllPreview() {
-      this.oWebControl.JS_RequestInterface({
-        funcName: "stopAllPreview",
-      });
-    },
-
-    //批量(指定窗口)停止播放
-    /**
-     * idArr:播放窗口序号数组
-     */
-    stopListPreview(idArr) {
-      let list = idArr.map((item) => {
-        return {
-          wndId: item,
-        };
-      });
-      this.oWebControl.JS_RequestInterface({
-        funcName: "stopMultiPlay",
-        argument: {
-          list,
-        },
-      });
-    },
-
-    /** 根据监控点编号录像回放
-     * @param {*} cameraIndexCode :获取输入的监控点编号值，必填
-     * @param {*} startTime:开始时间
-     * @param {*} endTime:结束时间
-     * @param {*} recordLocation://录像存储位置：0-中心存储，1-设备存储
-     * @param {*} argument:api参数
-     * argument属性cameraIndexCode优先级高于函数参数cameraIndexCode
-     */
-    startPlayBack(
-      cameraIndexCode,
-      startTime,
-      endTime,
-      recordLocation = 0,
-      argument = {}
-    ) {
-      var startTimeStamp = new Date(
-        startTime.replace("-", "/").replace("-", "/")
-      ).getTime(); //回放开始时间戳，必填
-      var endTimeStamp = new Date(
-        endTime.replace("-", "/").replace("-", "/")
-      ).getTime(); //回放结束时间戳，必填
-      // var recordLocation = 0; //录像存储位置：0-中心存储，1-设备存储
-      var transMode = 1; //传输协议：0-UDP，1-TCP
-      var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
-      var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
-
-      this.oWebControl.JS_RequestInterface({
-        funcName: "startPlayback",
-        argument: JSON.stringify({
-          cameraIndexCode: cameraIndexCode, //监控点编号
-          startTimeStamp: Math.floor(startTimeStamp / 1000).toString(), //录像查询开始时间戳，单位：秒
-          endTimeStamp: Math.floor(endTimeStamp / 1000).toString(), //录像结束开始时间戳，单位：秒
-          recordLocation: recordLocation, //录像存储类型：0-中心存储，1-设备存储
-          transMode: transMode, //传输协议：0-UDP，1-TCP
-          gpuMode: gpuMode, //是否启用GPU硬解，0-不启用，1-启用
-          wndId: wndId, //可指定播放窗口
-          ...argument,
-        }),
-      });
-    },
-    //停止所有回放
-    stopAllPlayBack() {
-      this.oWebControl.JS_RequestInterface({
-        funcName: "stopAllPlayback",
-      });
-    },
-
-    //设置布局
-    //latyou布局：2x2
-    setLayout(layout) {
-      this.oWebControl.JS_RequestInterface({
-        funcName: " setLayout",
-        argument: {
-          layout,
-        },
-      });
-    },
-
-    /** 画面字符叠加
-     * @param {*} text :文字
-     * @param {*} x:相对播放窗口左上角的横坐标起点
-     * @param {*} y:相对播放窗口左上角的纵坐标起点
-     * @param {*} fontSize:字体大小
-     * @param {*} color:字体颜色，默认白色
-     * @param {*} argument:api参数
-     * argument属性cameraIndexCode优先级高于函数参数cameraIndexCode
-     */
-    drawText(
-      text,
-      x = 5,
-      y = 5,
-      fontSize = 20,
-      color = 16777215,
-      argument = {}
-    ) {
-      this.oWebControl.JS_RequestInterface({
-        funcName: "drawOSD",
-        argument: {
-          text,
-          x,
-          y,
-          fontSize,
-          color,
-          ...argument,
-        },
-      });
-    },
-    //进入全屏
-    setFullScreen() {
-      this.oWebControl.JS_RequestInterface({
-        funcName: "setFullScreen",
-      });
-    },
-    //退出全屏
-    exitFullScreen() {
-      this.oWebControl.JS_RequestInterface({
-        funcName: "exitFullScreen",
-      });
-    },
-    //播放抓图
-    snapShot(argument = {}) {
-      this.oWebControl.JS_RequestInterface({
-        funcName: "snapShot",
-        argument,
-      });
-    },
-    //隐藏窗口
-    hideWindow() {
-      this.oWebControl.JS_HideWnd();
-    },
-    //显示窗口
-    showWindow() {
-      this.oWebControl.JS_ShowWnd();
-    },
-    //设置窗口尺寸
-    setResize(width, height) {
-      this.oWebControl.JS_Resize(width, height);
-      this.setWndCover();
-    },
-    //下载安装包
-    handleDownloadExe() {
-      this.dialogVisible = false;
-      if (this.downloadUrl) {
-        this.downloadFile(this.downloadUrl);
                 } else {
-        console.log("下载地址为空");
+                  arr.push(item);
                 }
-      this.$emit("clickDownload");
+              });
+
+              console.log(arr);
+              arr.forEach((item, index) => {
+                $.ajax({
+                  url: "https://open.ys7.com/api/lapp/v2/live/address/get",
+                  type: "POST",
+                  dataType: "json",
+                  data: {
+                    accessToken: This.accessToken, //	String	授权过程获取的access_token	Y
+                    deviceSerial: item.deviceSerial,
+                    channelNo: item.channelNo,
                   },
-    //下载文件
+                  cache: false,
-    downloadFile(url, fileName = "") {
+                  success: (response) => {
-      const a = document.createElement("a");
+                    let player = new EZUIKit.EZUIKitPlayer({
-      a.style.display = "none";
+                      id: "video-player-" + index, // 视频容器ID
-      if (fileName) {
+                      accessToken: This.accessToken,
-        a.setAttribute("download", fileName);
+                      url: response.data.url,
+                      template: "voice", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
+                      audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
+                      autoplay: false,
+                      width: 190,
+                      height: 150,
+                    });
+                    This.liveAddress.push(player);
+                    console.log(This.liveAddress);
+                  },
+                });
+              });
+            },
+          });
+        },
+      });
+    },
+  },
+  //销毁视频
+  destroyed() {
+    for (var j = 0; j < this.players.length; j++) {
+      this.liveAddress[j].stop();
     }
-      a.setAttribute("href", url);
-      document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(a.href);
-      document.body.removeChild(a);
-    },
   },
 };
 </script>
-<style scoped>
-</style>

src/views/mes/pro/production/components/webrtcstreamer.js

@@ -0,0 +1,306 @@
+var WebRtcStreamer = (function() {
+
+    /** 
+     * Interface with WebRTC-streamer API
+     * @constructor
+     * @param {string} videoElement - id of the video element tag
+     * @param {string} srvurl -  url of webrtc-streamer (default is current location)
+    */
+    var WebRtcStreamer = function WebRtcStreamer (videoElement, srvurl) {
+        if (typeof videoElement === "string") {
+            this.videoElement = document.getElementById(videoElement);
+        } else {
+            this.videoElement = videoElement;
+        }
+        this.srvurl           = srvurl || location.protocol+"//"+window.location.hostname+":"+window.location.port;
+        this.pc               = null;    
+    
+        this.mediaConstraints = { offerToReceiveAudio: true, offerToReceiveVideo: true };
+    
+        this.iceServers = null;
+        this.earlyCandidates = [];
+    }
+    
+    WebRtcStreamer.prototype._handleHttpErrors = function (response) {
+        if (!response.ok) {
+            throw Error(response.statusText);
+        }
+        return response;
+    }
+    
+    /** 
+     * Connect a WebRTC Stream to videoElement 
+     * @param {string} videourl - id of WebRTC video stream
+     * @param {string} audiourl - id of WebRTC audio stream
+     * @param {string} options -  options of WebRTC call
+     * @param {string} stream  -  local stream to send
+    */
+    WebRtcStreamer.prototype.connect = function(videourl, audiourl, options, localstream) {
+        this.disconnect();
+        
+        // getIceServers is not already received
+        if (!this.iceServers) {
+            console.log("Get IceServers");
+            
+            fetch(this.srvurl + "/api/getIceServers")
+                .then(this._handleHttpErrors)
+                .then( (response) => (response.json()) )
+                .then( (response) =>  this.onReceiveGetIceServers(response, videourl, audiourl, options, localstream))
+                .catch( (error) => this.onError("getIceServers " + error ))
+                    
+        } else {
+            this.onReceiveGetIceServers(this.iceServers, videourl, audiourl, options, localstream);
+        }
+    }
+    
+    /** 
+     * Disconnect a WebRTC Stream and clear videoElement source
+    */
+    WebRtcStreamer.prototype.disconnect = function() {		
+        if (this.videoElement?.srcObject) {
+            this.videoElement.srcObject.getTracks().forEach(track => {
+                track.stop()
+                this.videoElement.srcObject.removeTrack(track);
+            });
+        }
+        if (this.pc) {
+            fetch(this.srvurl + "/api/hangup?peerid=" + this.pc.peerid)
+                .then(this._handleHttpErrors)
+                .catch( (error) => this.onError("hangup " + error ))
+    
+            
+            try {
+                this.pc.close();
+            }
+            catch (e) {
+                console.log ("Failure close peer connection:" + e);
+            }
+            this.pc = null;
+        }
+    }    
+    
+    /*
+    * GetIceServers callback
+    */
+    WebRtcStreamer.prototype.onReceiveGetIceServers = function(iceServers, videourl, audiourl, options, stream) {
+        this.iceServers       = iceServers;
+        this.pcConfig         = iceServers || {"iceServers": [] };
+        try {            
+            this.createPeerConnection();
+    
+            var callurl = this.srvurl + "/api/call?peerid=" + this.pc.peerid + "&url=" + encodeURIComponent(videourl);
+            if (audiourl) {
+                callurl += "&audiourl="+encodeURIComponent(audiourl);
+            }
+            if (options) {
+                callurl += "&options="+encodeURIComponent(options);
+            }
+            
+            if (stream) {
+                this.pc.addStream(stream);
+            }
+    
+                    // clear early candidates
+            this.earlyCandidates.length = 0;
+            
+            // create Offer
+            this.pc.createOffer(this.mediaConstraints).then((sessionDescription) => {
+                console.log("Create offer:" + JSON.stringify(sessionDescription));
+                
+                this.pc.setLocalDescription(sessionDescription)
+                    .then(() => {
+                        fetch(callurl, { method: "POST", body: JSON.stringify(sessionDescription) })
+                            .then(this._handleHttpErrors)
+                            .then( (response) => (response.json()) )
+                            .catch( (error) => this.onError("call " + error ))
+                            .then( (response) =>  this.onReceiveCall(response) )
+                            .catch( (error) => this.onError("call " + error ))
+                    
+                    }, (error) => {
+                        console.log ("setLocalDescription error:" + JSON.stringify(error)); 
+                    });
+                
+            }, (error) => { 
+                alert("Create offer error:" + JSON.stringify(error));
+            });
+    
+        } catch (e) {
+            this.disconnect();
+            alert("connect error: " + e);
+        }	    
+    }
+    
+    
+    WebRtcStreamer.prototype.getIceCandidate = function() {
+        fetch(this.srvurl + "/api/getIceCandidate?peerid=" + this.pc.peerid)
+            .then(this._handleHttpErrors)
+            .then( (response) => (response.json()) )
+            .then( (response) =>  this.onReceiveCandidate(response))
+            .catch( (error) => this.onError("getIceCandidate " + error ))
+    }
+                        
+    /*
+    * create RTCPeerConnection 
+    */
+    WebRtcStreamer.prototype.createPeerConnection = function() {
+        console.log("createPeerConnection  config: " + JSON.stringify(this.pcConfig));
+        this.pc = new RTCPeerConnection(this.pcConfig);
+        var pc = this.pc;
+        pc.peerid = Math.random();		
+        
+        pc.onicecandidate = (evt) => this.onIceCandidate(evt);
+        pc.onaddstream    = (evt) => this.onAddStream(evt);
+        pc.oniceconnectionstatechange = (evt) => {  
+            console.log("oniceconnectionstatechange  state: " + pc.iceConnectionState);
+            if (this.videoElement) {
+                if (pc.iceConnectionState === "connected") {
+                    this.videoElement.style.opacity = "1.0";
+                }			
+                else if (pc.iceConnectionState === "disconnected") {
+                    this.videoElement.style.opacity = "0.25";
+                }			
+                else if ( (pc.iceConnectionState === "failed") || (pc.iceConnectionState === "closed") )  {
+                    this.videoElement.style.opacity = "0.5";
+                } else if (pc.iceConnectionState === "new") {
+                    this.getIceCandidate();
+                }
+            }
+        }
+        pc.ondatachannel = function(evt) {  
+            console.log("remote datachannel created:"+JSON.stringify(evt));
+            
+            evt.channel.onopen = function () {
+                console.log("remote datachannel open");
+                this.send("remote channel openned");
+            }
+            evt.channel.onmessage = function (event) {
+                console.log("remote datachannel recv:"+JSON.stringify(event.data));
+            }
+        }
+        pc.onicegatheringstatechange = function() {
+            if (pc.iceGatheringState === "complete") {
+                const recvs = pc.getReceivers();
+            
+                recvs.forEach((recv) => {
+                  if (recv.track && recv.track.kind === "video") {
+                    console.log("codecs:" + JSON.stringify(recv.getParameters().codecs))
+                  }
+                });
+              }
+        }
+    
+        try {
+            var dataChannel = pc.createDataChannel("ClientDataChannel");
+            dataChannel.onopen = function() {
+                console.log("local datachannel open");
+                this.send("local channel openned");
+            }
+            dataChannel.onmessage = function(evt) {
+                console.log("local datachannel recv:"+JSON.stringify(evt.data));
+            }
+        } catch (e) {
+            console.log("Cannor create datachannel error: " + e);
+        }	
+        
+        console.log("Created RTCPeerConnnection with config: " + JSON.stringify(this.pcConfig) );
+        return pc;
+    }
+    
+    
+    /*
+    * RTCPeerConnection IceCandidate callback
+    */
+    WebRtcStreamer.prototype.onIceCandidate = function (event) {
+        if (event.candidate) {
+            if (this.pc.currentRemoteDescription)  {
+                this.addIceCandidate(this.pc.peerid, event.candidate);					
+            } else {
+                this.earlyCandidates.push(event.candidate);
+            }
+        } 
+        else {
+            console.log("End of candidates.");
+        }
+    }
+    
+    
+    WebRtcStreamer.prototype.addIceCandidate = function(peerid, candidate) {
+        fetch(this.srvurl + "/api/addIceCandidate?peerid="+peerid, { method: "POST", body: JSON.stringify(candidate) })
+            .then(this._handleHttpErrors)
+            .then( (response) => (response.json()) )
+            .then( (response) =>  {console.log("addIceCandidate ok:" + response)})
+            .catch( (error) => this.onError("addIceCandidate " + error ))
+    }
+                    
+    /*
+    * RTCPeerConnection AddTrack callback
+    */
+    WebRtcStreamer.prototype.onAddStream = function(event) {
+        console.log("Remote track added:" +  JSON.stringify(event));
+        
+        this.videoElement.srcObject = event.stream;
+        var promise = this.videoElement.play();
+        if (promise !== undefined) {
+          promise.catch((error) => {
+            console.warn("error:"+error);
+            this.videoElement.setAttribute("controls", true);
+          });
+        }
+    }
+            
+    /*
+    * AJAX /call callback
+    */
+    WebRtcStreamer.prototype.onReceiveCall = function(dataJson) {
+    
+        console.log("offer: " + JSON.stringify(dataJson));
+        var descr = new RTCSessionDescription(dataJson);
+        this.pc.setRemoteDescription(descr).then(() =>  { 
+                console.log ("setRemoteDescription ok");
+                while (this.earlyCandidates.length) {
+                    var candidate = this.earlyCandidates.shift();
+                    this.addIceCandidate(this.pc.peerid, candidate);				
+                }
+            
+                this.getIceCandidate()
+            }
+            , (error) => { 
+                console.log ("setRemoteDescription error:" + JSON.stringify(error)); 
+            });
+    }	
+    
+    /*
+    * AJAX /getIceCandidate callback
+    */
+    WebRtcStreamer.prototype.onReceiveCandidate = function(dataJson) {
+        console.log("candidate: " + JSON.stringify(dataJson));
+        if (dataJson) {
+            for (var i=0; i<dataJson.length; i++) {
+                var candidate = new RTCIceCandidate(dataJson[i]);
+                
+                console.log("Adding ICE candidate :" + JSON.stringify(candidate) );
+                this.pc.addIceCandidate(candidate).then( () =>      { console.log ("addIceCandidate OK"); }
+                    , (error) => { console.log ("addIceCandidate error:" + JSON.stringify(error)); } );
+            }
+            this.pc.addIceCandidate();
+        }
+    }
+    
+    
+    /*
+    * AJAX callback for Error
+    */
+    WebRtcStreamer.prototype.onError = function(status) {
+        console.log("onError:" + status);
+    }
+    
+    return WebRtcStreamer;
+    })();
+    
+    if (typeof window !== 'undefined' && typeof window.document !== 'undefined') {
+        window.WebRtcStreamer = WebRtcStreamer;
+    }
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = WebRtcStreamer;
+    }
+    

src/views/mes/pro/production/index.vue

@@ -37,9 +37,10 @@
               {{ this.title }}
             </div>
             <div
-              style="color: rgb(9 207 255); font-size: 21px; margin-bottom: 4%"
+              style="color: rgb(9 207 255); font-size: 18px; margin-bottom: 4%"
             >
-              2024.02.27 14:11:00
+              <span>{{ this.dateYear }}</span> {{ this.dateDay }}
+              <span>{{ this.dateWeek }}</span>
             </div>
           </el-col>
           <el-col :span="10"
@@ -105,7 +106,7 @@
                 class="grid-content bg-purple"
                 style="margin: 10% 10% 10% 37%"
               >
-                50%
+                80%
               </div></el-col
             >
             <el-col :span="4"
@@ -113,7 +114,7 @@
                 class="grid-content bg-purple"
                 style="margin: 10% 10% 10% 44%"
               >
-                121
+                9
               </div></el-col
             >
             <el-col :span="4"
@@ -146,7 +147,7 @@
             <defective :message="this.defectiveData" />
           </div>
           <div style="width: 30%; margin-top: 50px">
-            <hkVideo :monitoringNumber="cameraIndexCode"></hkVideo>
+            <ezuikit></ezuikit>
           </div>
         </div>
         <div style="height: 50%; display: flex">
@@ -247,6 +248,7 @@
 </template>
 
 <script>
+import dayjs from "dayjs";
 import axios from "axios";
 import { listWorkorder } from "@/api/mes/pro/workorder";
 
@@ -256,24 +258,28 @@ import screenfull from "screenfull";
 import defective from "./components/defective.vue";
 import complete from "./components/complete.vue";
 import ticket from "./components/ticket.vue";
-import hkVideo from "./components/video.vue";
+import ezuikit from "./components/video.vue";
 
 export default {
-  components: { defective, complete, ticket, hkVideo },
+  components: { defective, complete, ticket, ezuikit, dayjs },
   data() {
     return {
-      cameraIndexCode: "1a033f81-a404-4a66-aabf-cb0ead6cc2be", //wed插件监控点
+      dateDay: null,
-      //海康wed插件初始化数据
+      dateYear: null,
-      objData: {
+      dateWeek: null,
-        appkey: "", //综合安防管理平台提供的appkey，必填
+      weekday: [
-        ip: "", //综合安防管理平台IP地址，必填
+        "星期日",
-        secret: "", //综合安防管理平台提供的secret，必填
+        "星期一",
-        port: 443, //综合安防管理平台端口，若启用HTTPS协议，默认443
+        "星期二",
-        playMode: 0, // 0 预览 1回放
+        "星期三",
-        layout: "2x2", //页面展示的模块数【16】
+        "星期四",
-        showToolbar: 1, //是否显示工具栏，0-不显示，非0-显示
+        "星期五",
-      },
+        "星期六",
+      ],
+      timer: null,
 
+
+      rtSp1: "",
       screenfull: false,
       title: "生产监控分析",
       titleVisible: false,
@@ -300,10 +306,18 @@ export default {
       thisYear: false,
       isFullscreen: false,
       radio4: 1,
+      monitorPoints: [],
     };
   },
 
   created() {
+    this.timer = setInterval(() => {
+      const date = dayjs(new Date());
+      this.dateDay = date.format("HH:mm:ss");
+      this.dateYear = date.format("YYYY-MM-DD");
+      this.dateWeek = date.format(this.weekday[date.day()]);
+    }, 1000);
+
     // 监听事件
     window.addEventListener("resize", this.onresize);
     this.getList();
@@ -316,10 +330,13 @@ export default {
     this.factorNumber();
   },
 
-  // beforeDestroy() {
+  beforeDestroy() {
-  //   // 取消监听事件
+    if (this.timer) {
-  //   window.removeEventListener("resize", this.onresize);
+      clearInterval(this.timer);
-  // },
+    }
+    // 取消监听事件
+    window.removeEventListener("resize", this.onresize);
+  },
   methods: {
     // 监听是否全屏状态
     onresize(event) {

src/views/mes/wm/itemrecpt/index.vue

@@ -526,6 +526,8 @@ export default {
       },
       // 表单参数
       form: {},
+      arrquantityRecived: "",
+      arraccepted: "",
       // 表单校验
       rules: {
         recptCode: [
@@ -685,13 +687,22 @@ export default {
 
     //执行入库
     handleExecute(row) {
-      console.log(row);
+      this.remainingquantity = 0;
       this.recptIdsData = row.recptId;
       this.perform.recptId = row.recptId;
       this.warehousing = true;
       // 物料查询
       listItemrecptline({ recptId: row.recptId }).then((response) => {
         this.itemrecptlineList = response.rows;
+        response.rows.forEach((item) => {
+          var arr = 0;
+          this.arrquantityRecived = arr + item.quantityRecived;
+        });
+        response.rows.forEach((item) => {
+          var arr1 = 0;
+          this.arraccepted = arr1 + item.accepted;
+        });
+        this.remainingquantity = this.arrquantityRecived - this.arraccepted;
       });
       var queryParams = {
         pageNum: 1,
@@ -719,10 +730,12 @@ export default {
     submitFileForm() {
       if (this.remainingquantity != 0) {
         axios
-          .get("http://192.168.2.104:8077/manage/matter/storageItem", {
+          // .get("http://192.168.2.104:8077/manage/matter/storageItem", {
-            params: this.perform,
+          .post(
-          })
+            "http://192.168.2.7:8077/manage/matter/storageItem",
-          .then((res) => {
+            this.perform
+          )
+          .then(function (res) {
             if (res.data.code === 200) {
               this.$modal.msgSuccess("入库成功");
               this.warehousing = false;