1 line
28 KiB
JSON
1 line
28 KiB
JSON
{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\AnalysisMain.vue?vue&type=style&index=0&lang=css&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\AnalysisMain.vue","mtime":1675645740323},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\css-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\postcss-loader\\src\\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\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\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\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\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 .time {\n font-size: 13px;\n color: #999;\n }\n .bot{\n /* padding: 14px; */\n padding: 8px 15px;\n }\n .streamAddress{\n color: coral;\n font-size: 12px;\n padding-top: 5px; \n \n }\n .bottom {\n margin-top: 10px;\n line-height: 12px;\n display: inline-block;\n margin-left: 15px;\n width: 67%;\n text-overflow:ellipsis;\n white-space:nowrap; \n overflow:hidden; \n }\n.st{\n position: absolute;\n right: 4%;\n top: 80%;\n display: inline-block;\n\n}\n.st span{\n color: #999;\n}\n .button {\n padding: 0;\n float: right;\n }\n\n .image {\n width: 100%;\n display: block;\n \n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: \"\";\n }\n \n .clearfix:after {\n clear: both\n }\n .middle{\n width: 100%;\n /* height: 100%; */\n height: 284px;\n }\n .el-col-6 {\n width: 25%;\n padding-left: 20px;\n padding-top: 20px;\n}\n.type{\n position: absolute;\n left: 0;\n top:0px;\n z-index: 98;\n}\n.del{\n position: absolute;\n right: 0px;\n top:0px;\n width: 25px;\n height: 25px;\n z-index: 9999;\n /* background-color: #999 */\n}\n.videoTypeBox{\n background: #fff;\n width: 98%;\n margin-left: 1%;\n display: flex;\n padding-top: 20px;\n padding-left: 30px;\n}\n.card{\n position: relative;\n cursor: pointer;\n}\n.name{\n position: absolute;\n left: 7px;\n top:0px;\n z-index: 99;\n}\n.statusN{\n position: absolute;\n left: 30px;\n top:0px;\n z-index: 97;\n}\n .statusName{\n position: absolute;\n left: 13px;\n top: 6px;\n z-index: 99;\n color: #eee;\n}\n.el_dialog {\n position: fixed;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin: 0;\n padding: 0;\n }\n .el_dialog__content {\n width: v-bind(width1);\n height: 400px;\n background-color: white;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n \n#dialog .el-dialog__header {\n border-bottom: 1px solid #eee;\n}\n \n\n#dialog .el-dialog__title {\n font-weight: bold;\n color: #000;\n}\n.btn{\n position: absolute;\n right: 10%;\n bottom: 18%;\n}\n",{"version":3,"sources":["AnalysisMain.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8eA;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;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;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;;;AAGA;AACA;AACA;AACA;AACA;AACA;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\" :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\">\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 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"]}]} |