{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\AnalysisMain.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\AnalysisMain.vue","mtime":1675837587627},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport editModal from \"@/views/bounced/maintenanceRemind\";\r\nimport {getGetShipjk,getDeleteShipjk,getApplication,getStopAlgorithm} from \"../api/index\";\r\nimport  serverUrl from \"../config/apiurl.js\"\r\nimport axios from 'axios'\r\nimport mqttConfig from \"@/utils/mqttConfig.js\";\r\nvar mqtt; //mqtt 处理对象（全局变量）\r\nvar client;\r\nexport default {\r\n  data(){\r\n    return{\r\n         receiveNews: \"\",\r\n         topicSends:[],\r\n        componentShow: \"\",\r\n        numArr:[],\r\n        currentDate: new Date(),\r\n        closeStatus: null,\r\n        dis:false,\r\n      dialogFormVisible: false,\r\n      videoTypeShow: false,\r\n      loading:true,\r\n       fileList: [],\r\n       form: {\r\n         radio:'',\r\n          videoName:'测试视频01',\r\n          city:'',\r\n          videoStreamAddress:'',\r\n        videoPath:''\r\n        },\r\n        formLabelWidth: '120px',\r\n        formLabelWidth: '200px',\r\n        videoTypeForm:{\r\n            videoType:'实时视频'\r\n        },\r\n        videoList:[],\r\n         fullscreenLoading: false\r\n    }\r\n  },\r\n   mounted() {\r\n    console.log(\"dialogFormVisible\",this.dialogFormVisible)\r\n    this.getVideoList()\r\n    this.createMqtt()\r\n  },\r\n   //离开当前页面后执行\r\ndestroyed: function () {\r\n//  console.log(\"离开当前页\")\r\n//   client.end();\r\n},\r\n  methods: {\r\n         /** 创建mqtt */\r\n    createMqtt() {\r\n      //创建链接，接收数据\r\n      console.log(window.PubScribe,'********************');\r\n      window.PubScribe(null,-1,this.realInfo);\r\n      /*mqtt = new mqttConfig(this.topicSends);\r\n      client = mqtt.createConnect();\r\n    // client.subscribe(,, { qos: 0 })\r\n    //   client.subscribe('img'+this.videoList[i].num, { qos: 0 }, (err)=> {\r\n    //       if (!err) {\r\n    //         console.log(\"订阅成功\");\r\n    //          client.publish('msg_stream',JSON.stringify({\"msg_flag\":parseInt(-1)})) \r\n           \r\n    //       } else {\r\n    //         console.log('消息订阅失败！')\r\n    //       }\r\n    //     }); \r\n        //  setTimeout(function() {\r\n            client.subscribe(['hert','img0','img1','img2','img3','img4','img5','img6','img7'], { qos: 0 }, (err)=> {\r\n          if (!err) {\r\n            console.log(\"订阅图片成功\");\r\n            //  client.publish('msg_stream',JSON.stringify({\"msg_flag\":parseInt(-1)})) \r\n           \r\n          } else {\r\n            console.log('消息订阅失败！')\r\n          }\r\n        }); \r\n        //   }, 5000);\r\n       client.on(\"message\", (topic, message) => {\r\n        //数据分类\r\n        try {\r\n        //   this.receiveNews = this.receiveNews.concat(message);\r\n        //   this.realInfo(topic, this.receiveNews);\r\n          this.realInfo(topic, message);\r\n        } catch (error) {\r\n\r\n        }\r\n      });*/\r\n    },\r\n    //停止订阅mqtt\r\n    disConnect() {\r\n    //   if (client != null) {\r\n    //     client.unsubscribe(this.topicSends);\r\n    //     client = null;\r\n    //   }\r\n    },\r\n    /** 实时数据分类 */\r\n    realInfo(topic, message) {\r\n        // console.log(\"topic\",topic)\r\n      switch (topic) {\r\n        // 接收托片\r\n        case \"img0\":\r\n        case \"img1\":\r\n        case \"img2\":\r\n        case \"img3\":\r\n        case \"img4\":\r\n        case \"img5\":\r\n        case \"img6\":\r\n        case \"img7\":\r\n        case \"img8\":\r\n          try {\r\n             const utf8decoder = new TextDecoder()\r\n              const u8arr = new Uint8Array(message)\r\n              const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n              const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n            //   var newArr = []\r\n            //msg为转换后的JSON数据\r\n            console.log(\"msg\",msg)\r\n             if(msg.rate=='low'){\r\n                //    console.log(\"msg\", msg)  \r\n                if(this.videoList.length!=0){\r\n                    for (let i = 0; i < this.videoList.length; i++) { \r\n                        if(msg.id==this.videoList[i].id){\r\n                           this.videoList[i].img ='data:image/png;base64,' + msg.pic\r\n                        }   \r\n                    }\r\n                }\r\n              }\r\n             \r\n            //   this.imgUrl3 = 'data:image/png;base64,' + msg.pic;\r\n            //   console.log(\"imageUrl\", imageUrl)\r\n             \r\n          } catch (error) {\r\n\r\n          }\r\n          break;\r\n         case \"hert\":\r\n             try {\r\n              const utf8decoder = new TextDecoder()\r\n              const u8arr = new Uint8Array(message)\r\n              const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n              const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n              console.log(\"hert\", msg)   //msg为转换后的JSON数据\r\n              if(msg==''){\r\n\r\n              }\r\n              \r\n          } catch (error) {\r\n\r\n          }\r\n          break;\r\n      }\r\n      this.receiveNews = \"\";\r\n    },\r\n     informationInfo(data,item) {\r\n        console.log(\"data\",data)\r\n        if(data=='新增'){\r\n        this.form={\r\n         radio: '',\r\n          videoName:'测试视频01',\r\n          city:'',\r\n          videoStreamAddress:'',\r\n          videoPath:''\r\n        },\r\n        \r\n         this.dialogFormVisible = true;\r\n        }\r\n        \r\n     },\r\n     open(item) {\r\n        console.log(\"item\",item)\r\n        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\r\n          confirmButtonText: '确定',\r\n          cancelButtonText: '取消',\r\n          type: 'warning'\r\n        }).then(() => {\r\n             getDeleteShipjk({VideoId:item}).then(res=>{\r\n                console.log(\"res\",res)\r\n                this.$message({\r\n                    type: 'success',\r\n                    message: '删除成功!'\r\n                });\r\n                 this.getVideoList()\r\n             })\r\n          \r\n        }).catch(() => {\r\n          this.$message({\r\n            type: 'info',\r\n            message: '已取消删除'\r\n          });          \r\n        });\r\n      },\r\n     commit(form){\r\n        console.log(\"form\",form)\r\n        let formData = new FormData();\r\n        formData.append(\"VideoName\",form.videoName);\r\n            formData.append(\"VideoType\",this.videoTypeForm.videoType);\r\n            if(this.videoTypeForm.videoType=='离线视频'){\r\n                formData.append(\"VideoPath\",form.videoStreamAddress);\r\n                \r\n            }else{\r\n                formData.append(\"VideoStreamAddress\",form.videoStreamAddress);\r\n            }\r\n        axios({\r\n                method: \"post\",\r\n                url: serverUrl.dataUrl,\r\n                data:formData\r\n              }).then((res) => {\r\n               console.log(\"提交按钮\",res)\r\n               if(res.data.msg=='添加成功'){\r\n                 this.$message({\r\n                  message: res.data.msg,\r\n                  type: 'success'\r\n                });\r\n                this.getVideoList()\r\n               }else{\r\n                 this.$message({\r\n                  message: res.data.msg,\r\n                  type: 'warning'\r\n                });\r\n               }\r\n\r\n              this.dialogFormVisible = false;\r\n                \r\n              });\r\n    \r\n     },\r\n     handleFileChange(e) {\r\n                    let inputDOM = this.$refs.inputer;\r\n                    this.file = inputDOM.files[0];// 通过DOM取文件数据\r\n\r\n                },\r\n    //应用\r\n    applicationBtn(){\r\n         getApplication().then(res=>{\r\n                console.log(\"res\",res)\r\n                if(res.data.code==200){\r\n                     const loading = this.$loading({\r\n          lock: true,\r\n          text: 'Loading',\r\n          spinner: 'el-icon-loading',\r\n          background: 'rgba(0, 0, 0, 0.7)'\r\n        });\r\n        setTimeout(() => {\r\n          loading.close();\r\n          this.getVideoList()\r\n           this.$message({\r\n                  message: res.data.msg,\r\n                  type: 'success'\r\n                });\r\n            }, 5000);  \r\n                }\r\n             })\r\n    },\r\n    //停止\r\n     stopAlgorithmBtn(){\r\n         getStopAlgorithm().then(res=>{\r\n                console.log(\"res\",res)\r\n                if(res.data.code==200){\r\n                this.getVideoList()\r\n                 this.$message({\r\n                  message: res.data.msg,\r\n                  type: 'success'\r\n                });\r\n                }\r\n             })\r\n    },\r\n                S4() {\r\n                    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);\r\n                },\r\n                guid() {\r\n                    return (this.S4() + this.S4() + \"-\" + this.S4() + \"-\" + this.S4() + \"-\" + this.S4() + \"-\" + this.S4() + this.S4() + this.S4());\r\n                },\r\n                load() {\r\n                    let size = this.file.size;//文件大小\r\n\r\n                    let maxZrea = 8;              //设置每个分区大小 MB\r\n                    let bufferSize = maxZrea * (1024 * 1024);\r\n                    let fileStart = 0;\r\n                    let fileEnd = bufferSize;\r\n                    let arrFile = [];\r\n                    var loadingN = this.$loading({\r\n                      lock: true,\r\n                      text: '正在上传中',\r\n                      target: '.el-dialog',\r\n                      spinner: 'el-icon-loading',\r\n                      background: 'rgba(0, 0, 0, 0.7)'\r\n                    });\r\n                    while (fileStart < size) {\r\n                        var fileInfo = {\r\n                            File: this.file.slice(fileStart, fileEnd),\r\n                            Start: fileStart,\r\n                            End: fileEnd\r\n                        }\r\n                        arrFile.push(fileInfo);\r\n                        fileStart = fileEnd;\r\n                        fileEnd = fileStart + bufferSize;\r\n                    }\r\n                    let count = arrFile.length;\r\n                    let filename = this.file.name + \"~\" + this.guid();\r\n                    for (var i = 0; i < count; i++) {\r\n                        let formData = new FormData();//new一个formData事件\r\n                        formData.append(\"file\", arrFile[i].File); //将file属性添加到formData里\r\n                        var url = serverUrl.getSpareElementOrder+\"?Name=\" + filename + \"&Number=\" + i + \"&BufferSize=\" + bufferSize + \"&Count=\" + count + \"&Start=\" + arrFile[i].Start + \"&End=\" + arrFile[i].End + \"&Size=\" + size;\r\n                        axios.post(url, formData, {\r\n                            headers: {\r\n                                \"Content-Type\": \"multipart/form-data;\",\r\n                            }\r\n                        }).then(r => {\r\n                            if (r.data.code!=200) {\r\n\r\n                            }else{    \r\n                                if(r.data.data==null){\r\n                                    this.dis = true   \r\n                                }else{\r\n                                    this.dis = false\r\n                                    loadingN.close();\r\n                                      this.$message({\r\n                                  message: r.data.msg,\r\n                                  type: 'success'\r\n                                });\r\n                                this.form.videoStreamAddress=r.data.data\r\n                                }\r\n                            }\r\n                        }).catch(e => {\r\n                            console.log(e);\r\n                        });\r\n                    }\r\n                },\r\n     goToPage(id,num,name,type,status) {\r\n\r\n        this.$router.push({path:'index',query: {id:id,num:num,name:name,type:type,status:status\r\n}})\r\n        \r\n    },\r\n     //获取视频数据\r\n     getVideoList(){\r\n        getGetShipjk().then(res=>{\r\n            console.log(\"res\",res)\r\n            if(res.data.msg=='成功'){\r\n               \r\n                var arr = [];\r\n                res.data.data.forEach((item)=>{\r\n                        arr.push({\r\n                              id:  item.videoId,  \r\n                              type: item.videoType,\r\n                              title: item.videoName,\r\n                              num:item.number,\r\n                              status:item.status,\r\n                              videoStreamAddress:item.videoStreamAddress,\r\n                              videoPath:item.videoPath,\r\n                              img: require('@/assets/img/AnalysisMain/img1.png'),\r\n                            });\r\n                        }) \r\n                this.videoList=arr\r\n                if(this.videoList.length=='0'){\r\n                    this.videoTypeShow = true\r\n                }else{\r\n                    this.videoTypeShow = false\r\n                }\r\n                console.log(\"this.videoList\",this.videoList)\r\n            }\r\n        })\r\n     },\r\n\r\n      handleRemove(file, fileList) {\r\n        console.log(file, fileList);\r\n      },\r\n      handlePreview(file) {\r\n        console.log(file);\r\n      },\r\n      handleExceed(files, fileList) {\r\n        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);\r\n      },\r\n      beforeRemove(file, fileList) {\r\n        return this.$confirm(`确定移除 ${ file.name }？`);\r\n      },\r\n  },\r\n  \r\n\r\n   components: {\r\n    editModal\r\n  },\r\n}\r\n",{"version":3,"sources":["AnalysisMain.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA","file":"AnalysisMain.vue","sourceRoot":"src/views","sourcesContent":["<template>\r\n<div class=\"content-box\">\r\n    <!-- v-if=\"videoTypeShow\" -->\r\n   <div class=\"videoTypeBox\"  v-if=\"videoTypeShow\">\r\n    <el-form :inline=\"true\" :model=\"videoTypeForm\" class=\"demo-form-inline\" >\r\n     <el-form-item label=\"视频源类型：\" >\r\n            <el-radio-group v-model=\"videoTypeForm.videoType\">\r\n              <el-radio label=\"实时视频\"></el-radio>\r\n              <el-radio label=\"离线视频\"></el-radio>\r\n            </el-radio-group>\r\n    </el-form-item>\r\n    </el-form>\r\n  </div>\r\n  <div>\r\n    <el-row>\r\n  <el-col :span=\"6\" v-for=\"(item, index) in videoList\" :key=\"item.id\" :offset=\"index > 0 ? 0 : 0\" >\r\n    <el-card :body-style=\"{ padding: '0px' }\" class=\"card\" >\r\n        <div class=\"type\">\r\n            <img src=\"@/assets/img/AnalysisMain/leftTop.png\" alt=\"\" v-if=\"item.type=='实时视频'\">\r\n            <img src=\"@/assets/img/AnalysisMain/leftTop2.png\" alt=\"\" v-if=\"item.type=='离线视频'\">\r\n        </div>\r\n        <div class=\"name\">\r\n            <img src=\"@/assets/img/AnalysisMain/ssVideo.png\" alt=\"\" v-if=\"item.type=='实时视频'\">\r\n            <img src=\"@/assets/img/AnalysisMain/lxVideo.png\" alt=\"\" v-if=\"item.type=='离线视频'\">\r\n        </div>\r\n        <div class=\"statusN\">\r\n             <img src=\"@/assets/img/AnalysisMain/status.png\" alt=\"\" >\r\n             <span class=\"statusName\">{{ item.status }}</span>\r\n        </div>\r\n        \r\n        <!-- <div class=\"del\" @click=\"open(item.id)\"> <i class='el-icon-delete'></i></div> -->\r\n      <img :src=\"item.img\" class=\"image\" @click=\"goToPage(item.id,item.num,item.title,item.type,item.status)\">\r\n      <div class=\"bot\">\r\n        <span style=\" vertical-align: middle;\">\r\n            <img src=\"@/assets/img/AnalysisMain/video (1).png\" alt=\"\">\r\n            <!-- <img :src=\"item.img\" alt=\"\"> -->\r\n            </span>\r\n        <div class=\"bottom clearfix\">\r\n          <time class=\"time\">{{ item.title }}</time>\r\n          <!-- <el-button type=\"text\" class=\"button\">操作按钮</el-button> -->\r\n         <div class=\"streamAddress\" :content=\"item.videoStreamAddress!=''? item.videoStreamAddress:item.videoPath\">{{item.videoStreamAddress!=''? item.videoStreamAddress:item.videoPath}}</div>\r\n        </div>\r\n        \r\n        <div class=\"st\">\r\n             <!-- <span>{{ item.status }}</span> -->\r\n             <el-button type=\"primary\" icon=\"el-icon-delete\" @click=\"open(item.id)\"></el-button>\r\n        </div>\r\n      </div>\r\n    </el-card>\r\n  </el-col>\r\n  <el-col :span=\"6\">\r\n    <el-card :body-style=\"{ padding: '0px' }\">\r\n        <div class=\"middle\">\r\n            <div style=\"width: 50%;height: 100%;margin: auto;padding-top: 15%;cursor: pointer;text-align: center;\" @click=\"informationInfo('新增')\">\r\n                <img src=\"@/assets/img/AnalysisMain/add.png\" width=\"80%\">\r\n            </div>\r\n             \r\n        </div>\r\n     \r\n    </el-card>\r\n  </el-col>\r\n</el-row>\r\n<div class=\"btn\" v-if=\"videoTypeForm.videoType=='实时视频'\">\r\n    \r\n    <el-button  type=\"primary\" @click=\"applicationBtn\">保存</el-button>\r\n    <el-button  type=\"primary\" @click=\"stopAlgorithmBtn\">关闭程序</el-button>\r\n    </div>\r\n  </div>\r\n  <!-- <div id=\"dialog\" class=\"margin-top: 0px !important;\"> -->\r\n      <el-dialog\r\n    title=\"视频源配置\"\r\n    width=\"40%\"\r\n    :visible.sync=\"dialogFormVisible\" \r\n  >\r\n    <!-- <editModal ></editModal> -->\r\n    <el-form :model=\"form\">\r\n    <el-form-item label=\"视频源名称\" :label-width=\"formLabelWidth\">\r\n      <el-input v-model=\"form.videoName\" autocomplete=\"off\" style=\"width:50%\" placeholder=\"请输入视频源名称\"></el-input>\r\n    </el-form-item>\r\n    <!-- <el-form-item label=\"视频源类型\" :label-width=\"formLabelWidth\">\r\n    <el-radio-group v-model=\"form.videoType\">\r\n      <el-radio label=\"实时视频\"></el-radio>\r\n      <el-radio label=\"离线视频\"></el-radio>\r\n    </el-radio-group>\r\n  </el-form-item> -->\r\n  <el-form-item label=\"视频源地址\" :label-width=\"formLabelWidth\" v-if=\"videoTypeForm.videoType=='实时视频'\">\r\n     <el-input v-model=\"form.videoStreamAddress\" autocomplete=\"off\" style=\"width:80%\" placeholder=\"请输入视频源地址\" >\r\n    <template slot=\"prepend\">rtsp://</template>\r\n  </el-input>\r\n      <!-- <el-input v-model=\"form.videoStreamAddress\" autocomplete=\"off\" style=\"width:80%\"></el-input> -->\r\n    </el-form-item>\r\n    <el-form-item label=\"离线视频上传\" :label-width=\"formLabelWidth\" v-if=\"videoTypeForm.videoType=='离线视频'\">\r\n        <!-- <el-button slot=\"trigger\" size=\"small\" type=\"primary\">选取文件</el-button> -->\r\n         <input type=\"file\" id=\"fileExport\" @change=\"handleFileChange\" ref=\"inputer\">\r\n         <el-button size=\"small\" type=\"primary\" @click=\"load\">点击上传</el-button>\r\n    </el-form-item>\r\n  </el-form>\r\n  <div slot=\"footer\" class=\"dialog-footer\">\r\n    <el-button @click=\"dialogFormVisible = false\"  :disabled=\"dis\">取 消</el-button>\r\n    <el-button type=\"primary\" @click=\"commit(form)\"  :disabled=\"dis\">确 定</el-button>\r\n  </div>\r\n  </el-dialog>\r\n  <!-- </div> -->\r\n \r\n     \r\n</div>\r\n\r\n</template>\r\n\r\n<script>\r\nimport editModal from \"@/views/bounced/maintenanceRemind\";\r\nimport {getGetShipjk,getDeleteShipjk,getApplication,getStopAlgorithm} from \"../api/index\";\r\nimport  serverUrl from \"../config/apiurl.js\"\r\nimport axios from 'axios'\r\nimport mqttConfig from \"@/utils/mqttConfig.js\";\r\nvar mqtt; //mqtt 处理对象（全局变量）\r\nvar client;\r\nexport default {\r\n  data(){\r\n    return{\r\n         receiveNews: \"\",\r\n         topicSends:[],\r\n        componentShow: \"\",\r\n        numArr:[],\r\n        currentDate: new Date(),\r\n        closeStatus: null,\r\n        dis:false,\r\n      dialogFormVisible: false,\r\n      videoTypeShow: false,\r\n      loading:true,\r\n       fileList: [],\r\n       form: {\r\n         radio:'',\r\n          videoName:'测试视频01',\r\n          city:'',\r\n          videoStreamAddress:'',\r\n        videoPath:''\r\n        },\r\n        formLabelWidth: '120px',\r\n        formLabelWidth: '200px',\r\n        videoTypeForm:{\r\n            videoType:'实时视频'\r\n        },\r\n        videoList:[],\r\n         fullscreenLoading: false\r\n    }\r\n  },\r\n   mounted() {\r\n    console.log(\"dialogFormVisible\",this.dialogFormVisible)\r\n    this.getVideoList()\r\n    this.createMqtt()\r\n  },\r\n   //离开当前页面后执行\r\ndestroyed: function () {\r\n//  console.log(\"离开当前页\")\r\n//   client.end();\r\n},\r\n  methods: {\r\n         /** 创建mqtt */\r\n    createMqtt() {\r\n      //创建链接，接收数据\r\n      console.log(window.PubScribe,'********************');\r\n      window.PubScribe(null,-1,this.realInfo);\r\n      /*mqtt = new mqttConfig(this.topicSends);\r\n      client = mqtt.createConnect();\r\n    // client.subscribe(,, { qos: 0 })\r\n    //   client.subscribe('img'+this.videoList[i].num, { qos: 0 }, (err)=> {\r\n    //       if (!err) {\r\n    //         console.log(\"订阅成功\");\r\n    //          client.publish('msg_stream',JSON.stringify({\"msg_flag\":parseInt(-1)})) \r\n           \r\n    //       } else {\r\n    //         console.log('消息订阅失败！')\r\n    //       }\r\n    //     }); \r\n        //  setTimeout(function() {\r\n            client.subscribe(['hert','img0','img1','img2','img3','img4','img5','img6','img7'], { qos: 0 }, (err)=> {\r\n          if (!err) {\r\n            console.log(\"订阅图片成功\");\r\n            //  client.publish('msg_stream',JSON.stringify({\"msg_flag\":parseInt(-1)})) \r\n           \r\n          } else {\r\n            console.log('消息订阅失败！')\r\n          }\r\n        }); \r\n        //   }, 5000);\r\n       client.on(\"message\", (topic, message) => {\r\n        //数据分类\r\n        try {\r\n        //   this.receiveNews = this.receiveNews.concat(message);\r\n        //   this.realInfo(topic, this.receiveNews);\r\n          this.realInfo(topic, message);\r\n        } catch (error) {\r\n\r\n        }\r\n      });*/\r\n    },\r\n    //停止订阅mqtt\r\n    disConnect() {\r\n    //   if (client != null) {\r\n    //     client.unsubscribe(this.topicSends);\r\n    //     client = null;\r\n    //   }\r\n    },\r\n    /** 实时数据分类 */\r\n    realInfo(topic, message) {\r\n        // console.log(\"topic\",topic)\r\n      switch (topic) {\r\n        // 接收托片\r\n        case \"img0\":\r\n        case \"img1\":\r\n        case \"img2\":\r\n        case \"img3\":\r\n        case \"img4\":\r\n        case \"img5\":\r\n        case \"img6\":\r\n        case \"img7\":\r\n        case \"img8\":\r\n          try {\r\n             const utf8decoder = new TextDecoder()\r\n              const u8arr = new Uint8Array(message)\r\n              const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n              const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n            //   var newArr = []\r\n            //msg为转换后的JSON数据\r\n            console.log(\"msg\",msg)\r\n             if(msg.rate=='low'){\r\n                //    console.log(\"msg\", msg)  \r\n                if(this.videoList.length!=0){\r\n                    for (let i = 0; i < this.videoList.length; i++) { \r\n                        if(msg.id==this.videoList[i].id){\r\n                           this.videoList[i].img ='data:image/png;base64,' + msg.pic\r\n                        }   \r\n                    }\r\n                }\r\n              }\r\n             \r\n            //   this.imgUrl3 = 'data:image/png;base64,' + msg.pic;\r\n            //   console.log(\"imageUrl\", imageUrl)\r\n             \r\n          } catch (error) {\r\n\r\n          }\r\n          break;\r\n         case \"hert\":\r\n             try {\r\n              const utf8decoder = new TextDecoder()\r\n              const u8arr = new Uint8Array(message)\r\n              const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n              const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n              console.log(\"hert\", msg)   //msg为转换后的JSON数据\r\n              if(msg==''){\r\n\r\n              }\r\n              \r\n          } catch (error) {\r\n\r\n          }\r\n          break;\r\n      }\r\n      this.receiveNews = \"\";\r\n    },\r\n     informationInfo(data,item) {\r\n        console.log(\"data\",data)\r\n        if(data=='新增'){\r\n        this.form={\r\n         radio: '',\r\n          videoName:'测试视频01',\r\n          city:'',\r\n          videoStreamAddress:'',\r\n          videoPath:''\r\n        },\r\n        \r\n         this.dialogFormVisible = true;\r\n        }\r\n        \r\n     },\r\n     open(item) {\r\n        console.log(\"item\",item)\r\n        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\r\n          confirmButtonText: '确定',\r\n          cancelButtonText: '取消',\r\n          type: 'warning'\r\n        }).then(() => {\r\n             getDeleteShipjk({VideoId:item}).then(res=>{\r\n                console.log(\"res\",res)\r\n                this.$message({\r\n                    type: 'success',\r\n                    message: '删除成功!'\r\n                });\r\n                 this.getVideoList()\r\n             })\r\n          \r\n        }).catch(() => {\r\n          this.$message({\r\n            type: 'info',\r\n            message: '已取消删除'\r\n          });          \r\n        });\r\n      },\r\n     commit(form){\r\n        console.log(\"form\",form)\r\n        let formData = new FormData();\r\n        formData.append(\"VideoName\",form.videoName);\r\n            formData.append(\"VideoType\",this.videoTypeForm.videoType);\r\n            if(this.videoTypeForm.videoType=='离线视频'){\r\n                formData.append(\"VideoPath\",form.videoStreamAddress);\r\n                \r\n            }else{\r\n                formData.append(\"VideoStreamAddress\",form.videoStreamAddress);\r\n            }\r\n        axios({\r\n                method: \"post\",\r\n                url: serverUrl.dataUrl,\r\n                data:formData\r\n              }).then((res) => {\r\n               console.log(\"提交按钮\",res)\r\n               if(res.data.msg=='添加成功'){\r\n                 this.$message({\r\n                  message: res.data.msg,\r\n                  type: 'success'\r\n                });\r\n                this.getVideoList()\r\n               }else{\r\n                 this.$message({\r\n                  message: res.data.msg,\r\n                  type: 'warning'\r\n                });\r\n               }\r\n\r\n              this.dialogFormVisible = false;\r\n                \r\n              });\r\n    \r\n     },\r\n     handleFileChange(e) {\r\n                    let inputDOM = this.$refs.inputer;\r\n                    this.file = inputDOM.files[0];// 通过DOM取文件数据\r\n\r\n                },\r\n    //应用\r\n    applicationBtn(){\r\n         getApplication().then(res=>{\r\n                console.log(\"res\",res)\r\n                if(res.data.code==200){\r\n                     const loading = this.$loading({\r\n          lock: true,\r\n          text: 'Loading',\r\n          spinner: 'el-icon-loading',\r\n          background: 'rgba(0, 0, 0, 0.7)'\r\n        });\r\n        setTimeout(() => {\r\n          loading.close();\r\n          this.getVideoList()\r\n           this.$message({\r\n                  message: res.data.msg,\r\n                  type: 'success'\r\n                });\r\n            }, 5000);  \r\n                }\r\n             })\r\n    },\r\n    //停止\r\n     stopAlgorithmBtn(){\r\n         getStopAlgorithm().then(res=>{\r\n                console.log(\"res\",res)\r\n                if(res.data.code==200){\r\n                this.getVideoList()\r\n                 this.$message({\r\n                  message: res.data.msg,\r\n                  type: 'success'\r\n                });\r\n                }\r\n             })\r\n    },\r\n                S4() {\r\n                    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);\r\n                },\r\n                guid() {\r\n                    return (this.S4() + this.S4() + \"-\" + this.S4() + \"-\" + this.S4() + \"-\" + this.S4() + \"-\" + this.S4() + this.S4() + this.S4());\r\n                },\r\n                load() {\r\n                    let size = this.file.size;//文件大小\r\n\r\n                    let maxZrea = 8;              //设置每个分区大小 MB\r\n                    let bufferSize = maxZrea * (1024 * 1024);\r\n                    let fileStart = 0;\r\n                    let fileEnd = bufferSize;\r\n                    let arrFile = [];\r\n                    var loadingN = this.$loading({\r\n                      lock: true,\r\n                      text: '正在上传中',\r\n                      target: '.el-dialog',\r\n                      spinner: 'el-icon-loading',\r\n                      background: 'rgba(0, 0, 0, 0.7)'\r\n                    });\r\n                    while (fileStart < size) {\r\n                        var fileInfo = {\r\n                            File: this.file.slice(fileStart, fileEnd),\r\n                            Start: fileStart,\r\n                            End: fileEnd\r\n                        }\r\n                        arrFile.push(fileInfo);\r\n                        fileStart = fileEnd;\r\n                        fileEnd = fileStart + bufferSize;\r\n                    }\r\n                    let count = arrFile.length;\r\n                    let filename = this.file.name + \"~\" + this.guid();\r\n                    for (var i = 0; i < count; i++) {\r\n                        let formData = new FormData();//new一个formData事件\r\n                        formData.append(\"file\", arrFile[i].File); //将file属性添加到formData里\r\n                        var url = serverUrl.getSpareElementOrder+\"?Name=\" + filename + \"&Number=\" + i + \"&BufferSize=\" + bufferSize + \"&Count=\" + count + \"&Start=\" + arrFile[i].Start + \"&End=\" + arrFile[i].End + \"&Size=\" + size;\r\n                        axios.post(url, formData, {\r\n                            headers: {\r\n                                \"Content-Type\": \"multipart/form-data;\",\r\n                            }\r\n                        }).then(r => {\r\n                            if (r.data.code!=200) {\r\n\r\n                            }else{    \r\n                                if(r.data.data==null){\r\n                                    this.dis = true   \r\n                                }else{\r\n                                    this.dis = false\r\n                                    loadingN.close();\r\n                                      this.$message({\r\n                                  message: r.data.msg,\r\n                                  type: 'success'\r\n                                });\r\n                                this.form.videoStreamAddress=r.data.data\r\n                                }\r\n                            }\r\n                        }).catch(e => {\r\n                            console.log(e);\r\n                        });\r\n                    }\r\n                },\r\n     goToPage(id,num,name,type,status) {\r\n\r\n        this.$router.push({path:'index',query: {id:id,num:num,name:name,type:type,status:status\r\n}})\r\n        \r\n    },\r\n     //获取视频数据\r\n     getVideoList(){\r\n        getGetShipjk().then(res=>{\r\n            console.log(\"res\",res)\r\n            if(res.data.msg=='成功'){\r\n               \r\n                var arr = [];\r\n                res.data.data.forEach((item)=>{\r\n                        arr.push({\r\n                              id:  item.videoId,  \r\n                              type: item.videoType,\r\n                              title: item.videoName,\r\n                              num:item.number,\r\n                              status:item.status,\r\n                              videoStreamAddress:item.videoStreamAddress,\r\n                              videoPath:item.videoPath,\r\n                              img: require('@/assets/img/AnalysisMain/img1.png'),\r\n                            });\r\n                        }) \r\n                this.videoList=arr\r\n                if(this.videoList.length=='0'){\r\n                    this.videoTypeShow = true\r\n                }else{\r\n                    this.videoTypeShow = false\r\n                }\r\n                console.log(\"this.videoList\",this.videoList)\r\n            }\r\n        })\r\n     },\r\n\r\n      handleRemove(file, fileList) {\r\n        console.log(file, fileList);\r\n      },\r\n      handlePreview(file) {\r\n        console.log(file);\r\n      },\r\n      handleExceed(files, fileList) {\r\n        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);\r\n      },\r\n      beforeRemove(file, fileList) {\r\n        return this.$confirm(`确定移除 ${ file.name }？`);\r\n      },\r\n  },\r\n  \r\n\r\n   components: {\r\n    editModal\r\n  },\r\n}\r\n</script>\r\n\r\n<style>\r\n  .time {\r\n    font-size: 13px;\r\n    color: #999;\r\n  }\r\n  .bot{\r\n    /* padding: 14px; */\r\n    padding: 8px 15px;\r\n  }\r\n  .streamAddress{\r\n   color: coral;\r\n    font-size: 12px;\r\n    padding-top: 5px;  \r\n     \r\n  }\r\n  .bottom {\r\n    margin-top: 10px;\r\n    line-height: 12px;\r\n    display: inline-block;\r\n    margin-left: 15px;\r\n     width: 67%;\r\n    text-overflow:ellipsis;\r\n    white-space:nowrap; \r\n    overflow:hidden;  \r\n  }\r\n.st{\r\n    position: absolute;\r\n    right: 4%;\r\n    top: 80%;\r\n    display: inline-block;\r\n\r\n}\r\n.st span{\r\n    color: #999;\r\n}\r\n  .button {\r\n    padding: 0;\r\n    float: right;\r\n  }\r\n\r\n  .image {\r\n    width: 100%;\r\n    display: block;\r\n    \r\n  }\r\n\r\n  .clearfix:before,\r\n  .clearfix:after {\r\n      display: table;\r\n      content: \"\";\r\n  }\r\n  \r\n  .clearfix:after {\r\n      clear: both\r\n  }\r\n  .middle{\r\n    width: 100%;\r\n    /* height: 100%; */\r\n    height: 284px;\r\n  }\r\n  .el-col-6 {\r\n    width: 25%;\r\n    padding-left: 20px;\r\n    padding-top: 20px;\r\n}\r\n.type{\r\n    position: absolute;\r\n    left: 0;\r\n    top:0px;\r\n    z-index: 98;\r\n}\r\n.del{\r\n    position: absolute;\r\n    right: 0px;\r\n    top:0px;\r\n    width: 25px;\r\n    height: 25px;\r\n    z-index: 9999;\r\n    /* background-color: #999 */\r\n}\r\n.videoTypeBox{\r\n   background: #fff;\r\n    width: 98%;\r\n    margin-left: 1%;\r\n    display: flex;\r\n    padding-top: 20px;\r\n    padding-left: 30px;\r\n}\r\n.card{\r\n    position: relative;\r\n    cursor: pointer;\r\n}\r\n.name{\r\n     position: absolute;\r\n    left: 7px;\r\n    top:0px;\r\n    z-index: 99;\r\n}\r\n.statusN{\r\n     position: absolute;\r\n    left: 30px;\r\n    top:0px;\r\n    z-index: 97;\r\n}\r\n .statusName{\r\n    position: absolute;\r\n    left: 13px;\r\n    top: 6px;\r\n    z-index: 99;\r\n    color: #eee;\r\n}\r\n.el_dialog {\r\n        position: fixed;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-color: rgba(0, 0, 0, 0.5);\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        align-items: center;\r\n        margin: 0;\r\n        padding: 0;\r\n    }\r\n    .el_dialog__content {\r\n        width: v-bind(width1);\r\n        height: 400px;\r\n        background-color: white;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        align-items: center;\r\n    }\r\n  \r\n#dialog .el-dialog__header {\r\n  border-bottom: 1px solid #eee;\r\n}\r\n \r\n\r\n#dialog .el-dialog__title {\r\n  font-weight: bold;\r\n  color: #000;\r\n}\r\n.btn{\r\n    position: absolute;\r\n    right: 10%;\r\n    bottom: 18%;\r\n}\r\n</style>\r\n\r\n\r\n"]}]}