TransFlow/node_modules/.cache/vue-loader/e27e56f43e310c20e133cd7b8beb04ac.json

{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue?vue&type=style&index=0&lang=css&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue","mtime":1671097201758},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\css-loader\\index.js","mtime":1671074743092},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1671074747916},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\postcss-loader\\src\\index.js","mtime":1671074746320},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1671074747916}],"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.el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n  \n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n  \n  body > .el-container {\n    margin-bottom: 40px;\n  }\n  \n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n  \n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n",{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyYA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA","file":"index.vue","sourceRoot":"src/views","sourcesContent":["<template>\n   <div class=\"content-box\">\n  <div class=\"container\">\n\n     <div style=\"width:30%;height:300px;display:inline-block\">\n    <img :src='imgUrl' width=\"100%\" height=\"100%\"/>\n  </div> \n  <div style=\"width:30%;height:300px;display:inline-block\">\n    <img :src='imgUrl1' width=\"100%\" height=\"100%\"/>\n  </div> \n  <div style=\"width:30%;height:300px;display:inline-block\">\n    <img :src='imgUrl2' width=\"100%\" height=\"100%\"/>\n  </div> \n  <div style=\"width:30%;height:300px;display:inline-block\">\n    <img :src='imgUrl3' width=\"100%\" height=\"100%\"/>\n  </div> \n  <div style=\"width:30%;height:300px;display:inline-block\">\n    <img :src='imgUrl4' width=\"100%\" height=\"100%\"/>\n  </div> \n  <div style=\"width:30%;height:300px;display:inline-block\">\n    <img :src='imgUrl5' width=\"100%\" height=\"100%\"/>\n  </div> \n \n  </div>\n</div>\n</template>\n\n<script>\n\nimport mqtt from \"mqtt\"; // mqtt协议\n\n\n\nimport axios from 'axios'\nexport default {\n  data() {\n    return {\n      hideBoxShow:true, //隐藏箱子按钮显示隐藏\n      closeStatus: null,\n      modelOthers: false,\n      componentShow: \"\",\n      isShowBtn: true, //菜单按钮隐藏\n      isShowBtn1: false, //菜单按钮显示\n      inputVal: \"\",\n    //   dateTime: this.$moment(new Date()).format(\"LL\"),\n      nowTime: \"\",\n    //   weekday: this.$moment().format(\"dddd\"),\n      ins: 0,\n      imgUrl:'',\n      imgUrl1:'',\n      imgUrl2:'',\n      imgUrl3:'',\n      imgUrl4:'',\n      imgUrl5:'',\n      btnPic: [\n        // require(\"@/assets/images/homeActive.png\"),\n        // require(\"@/assets/images/battery.png\"),\n        // require(\"@/assets/images/stock.png\"),\n        // require(\"@/assets/images/productionInformation.png\"),\n        // require(\"@/assets/images/equipment.png\"),\n        // require(\"@/assets/images/operationMG.png\"),\n      ],\n      statusInfo: [\n        {\n          count: 15,\n          name: \"穿梭车在线数量\",\n        //   icon: require(\"../assets/images/运行设备图标.png\"),\n          color: \"#01A8FC\",\n        },\n        {\n          count: 26,\n          name: \"任务数量\",\n        //   icon: require(\"../assets/images/故障设备图标.png\"),\n          color: \"#FDA401\",\n        },\n      ],\n      messageInfo: [],\n      orderList: [],\n      enterList: [],\n      stockInfo: [],\n      perCent: 0,\n      perCent1: 0,\n      perCent2: 0,\n      facToal: \"\",\n      wbContent:'',\n      wxContent:'',\n      inContent:'',\n      outContent:'',\n      containerDetails:\"\",\n      locdesc:'',\n      weatherItem:{},\n      loadingShow1:true,\n      carInfo:[], //小车信息\n      carName:'',\n      palletizerInfo:[], //码垛机信息\n      palletizerName:'',\n      destackerInfo:[], //拆垛机信息\n      destackerName:'',\n      hoistInfo:[], //提升机信息’\n      hoistName:'', \n      battaryStationInfo:[],//快换电池装置\n      battaryStationName:\"\",\n      conveyorInfo:[], //输送机信息\n      conveyorName:\"\", \n    };\n  },\n  mounted() {\n\n    // this.getMessage();\n    // 消息提醒\n\n    // getfacKeepRecord({ type: 0 }).then((res) => {\n    //   this.messageInfo = this.messageInfo.concat(res.data);\n    //   console.log(this.messageInfo, \",,qweqw\");\n    //   // this.messageInfo.push(res.data[1]) \n    // });\n    // this.getDataByMqtt()\n    // this.getstatus();\n    // this.getInhouse();\n    // this.getOuthouse();\n    // this.handleWather();\n    // this.getDeviceStatusData()\n  },\n   created() {\n    this.testMqtt()\n    \n  },\n  methods: {\n     // 测试：mqtt测试\n    testMqtt() {\n         this.getDataByMqtt()\n      // 小车订阅\n    //   for (let key in this.carId) {\n    //     this.getDataByMqtt(\n    //       // \"ws:ht.mqtt.umayle.com:2022/mqtt\",\n    //       \"ws:220.163.114.157:8083/mqtt\",\n    //       \"Car\" + key,\n    //       this.carId[key]\n    //     );\n    //   }\n    //   //输送机入库订阅\n    //   for (let i = 0; i < this.convoyorCIdGroup.length; i++) {\n    //     this.getDataByMqtt(\n    //       \"ws:220.163.114.157:8083/mqtt\",\n    //       \"InConvoyor\" + this.convoyorCIdGroup[i],\n    //       this.convoyorCIdGroup[i]\n    //     );\n    //   }\n\n    //   //输送机出库订阅\n    //   for (let i = 0; i < this.outConvoyorCIdGroup.length; i++) {\n    //     this.getDataByMqtt(\n    //       \"ws:220.163.114.157:8083/mqtt\",\n    //       \"OUTConvoyor\" + this.outConvoyorCIdGroup[i],\n    //       this.outConvoyorCIdGroup[i]\n    //     );\n    //   }\n\n    //   for (let key in this.BattaryArr) {\n    //     this.getDataByMqtt(\n    //       \"ws:220.163.114.157:8083/mqtt\",\n    //       \"Battary_Sation\" + key,\n    //       this.BattaryArr[key]\n    //     );\n    //   }\n    //   // 升降机订阅elvArr\n    //   for (let key in this.elvArr) {\n    //     this.getDataByMqtt(\n    //       \"ws:220.163.114.157:8083/mqtt\",\n    //       \"ELV\" + key,\n    //       this.elvArr[key]\n    //     );\n    //   }\n    //   // 拆码跺机订阅\n    //   for (let key in this.stampArr) {\n    //     this.getDataByMqtt(\n    //       \"ws:220.163.114.157:8083/mqtt\",\n    //       \"INCMD\" + key,\n    //       this.stampArr[key]\n    //     );\n    //   }\n    },\n    //模型加载等待\n    loadingShow(data){\n      this.loadingShow1 = data\n    },\n     // mqtt订阅（独立）\n    getDataByMqtt(url, topic, cIdNum) {\n      const clientId = \"test_id_\" + String(new Date().getTime()); // 用户名\n      const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt\n      const options = {\n        // 配置\n        // 测试：订阅本机IP\n        // host: host,\n        // port: port,\n        // host:\"172.16.1.168:10086\",\n        keepalive: 60, // 心跳时间，默认60s，设置为0禁用\n        username: 'admin',  // 用户名（可选）\n        password: '123456',  // 密码（可选）\n        clientId: clientId, // 客户端ID，默认随机生成\n        protocolId: \"MQTT\",\n        protocolVersion: 4,\n        clean: true, // false在离线时接收QoS1和2的消息\n        reconnectPeriod: 2000, // 重连间隔，默认1000毫秒\n        connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间\n        will: {\n          // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）\n          topic: \"img1\", // 要发布的主题\n          payload: \"[MQTT-TEST] 遗嘱消息：连接异常断开！\", // 要发布的消息\n          qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次\n          retain: false, // 保留标志\n        },\n      };\n      if (this.mqttClient == undefined) {\n        this.mqttClient = mqtt.connect(host, options); // 连接\n        // const client = mqtt.connect(host, options); // 连接\n        // const client = mqtt.connect(host)  // 连接\n        // 错误回调\n        console.log(\"this.mqttClient\",this.mqttClient)\n        this.mqttClient.on(\"error\", (err) => {\n          console.log(\"[MQTT-TEST] 连接错误：\",err);\n          this.mqttClient.end();\n        });\n        // 重连回调\n        this.mqttClient.on(\"reconnect\", (reconnect) => {\n          console.log(\"[MQTT-TEST] 重连中……\",reconnect);\n        });\n        // 连接回调\n        this.mqttClient.on(\"connect\", (connect) => {\n          console.log(\"[MQTT-TEST] 已连接的客户端ID: \",connect);\n            // 订阅\n           this.mqttClient.subscribe('img0', { qos: 0 });\n           this.mqttClient.subscribe('img1', { qos: 0 });\n           this.mqttClient.subscribe('img2', { qos: 0 });\n           this.mqttClient.subscribe('img3', { qos: 0 });\n           this.mqttClient.subscribe('img4', { qos: 0 });\n            this.mqttClient.subscribe('img5', { qos: 0 });\n        });\n        // 接收回调\n        this.mqttClient.on(\"message\", (topic, message, packet) => {\n          console.log(\"[MQTT-TEST] 已连接的客户端ID: \",message);\n    \n          console.log(\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\n            new Date(),\n            new Date().getMilliseconds()\n          );\n          // 解析后端数据\n        //   let dataReceived = JSON.parse(message.toString());\n        //     console.log(\"[MQTT-TEST] 已连接的客户端ID: \",dataReceived);\n             try{\n                const utf8decoder = new TextDecoder()\n                const u8arr = new Uint8Array(message)\n                const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n                const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\n                console.log(\"msg\",msg)   //msg为转换后的JSON数据\n                this.imgUrl='data:image/png;base64,' + msg.pic;\n                console.log(\"imageUrl\",imageUrl)\n            }catch{\n                let imageType = 'arraybuffer';\n                const blob = new Blob([message], { type: imageType })\n                const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\n                console.log(\"imageUrl\",imageUrl)\n            }\n          let that = this;\n          var cId;\n          if (topic.indexOf(\"Car\") != -1) {\n            cId = this.carId[topic.replace(\"Car\", \"\")];\n          } else if (topic.indexOf(\"InConvoyor\") != -1) {\n            cId = topic.replace(\"InConvoyor\", \"\");\n          } else if (topic.indexOf(\"Battary_Sation\") != -1) {\n            cId = this.BattaryArr[topic.replace(\"Battary_Sation\", \"\")];\n          } else if (topic.indexOf(\"ELV\") != \"-1\") {\n            cId = this.elvArr[topic.replace(\"ELV\", \"\")][0];\n            this.models[cId].topic = topic;\n          } else if (topic.indexOf(\"INCMD\") != -1) {\n            cId = this.stampArr[topic.replace(\"INCMD\", \"\")][0];\n            console.log(cId, \"topiccid\");\n            this.models[cId].topic = topic;\n          } else if (topic.indexOf(\"OUTConvoyor\") != -1) {\n            cId = topic.replace(\"OUTConvoyor\", \"\");\n          }\n          // var convoyorData = that.convoyorCIdGroup[i];\n        //   if (that.models[cId] != undefined) {\n        //     try {\n        //       that.models[cId].receiveData(dataReceived, topic);\n        //     } catch (err) {\n        //       console.error(err);\n        //     }\n        //   }\n        });\n      }\n    \n     \n    },\n\n    handleSearch(){\n      this.modelOthers = true;\n      this.$refs.htModels.finbBox(this.inputVal);\n      console.log(this.$refs.htModels,'asdasdasd');\n       this.inputVal = ''\n    },\n   handleRow(val){\n      this.modelOthers = true;\n      this.$refs.htModels.finbBox(val);\n    },\n    // 天气\n    handleWather(){\n      axios({url:'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',methods:''}).then(res=>{\n        this.weatherItem = res.data.lives[0]\n        console.log(this.weatherItem,'asdsads');\n      })\n    },\n    Onweather(name){\n    //   switch (name) {\n\t// \t\t\t\tcase \"多云\":\n\t// \t\t\t\t\treturn require('../assets/weather/Cloudy .png');\n\t// \t\t\t\tcase \"阴\":\n\t// \t\t\t\t\treturn require('../assets/weather/Cloudy .png')\n\t// \t\t\t\tcase \"暴雨\":\n\t// \t\t\t\t\treturn require('../assets/weather/rainstorm.png')\n\t// \t\t\t\tcase \"冰雹\":\n\t// \t\t\t\t\treturn require('../assets/weather/hail.png')\n\t// \t\t\t\tcase \"大风\":\n\t// \t\t\t\t\treturn require('../assets/weather/gale.png')\n\t// \t\t\t\tcase \"大雪\":\n\t// \t\t\t\t\treturn require('../assets/weather/bigsnow.png')\n\t// \t\t\t\tcase \"大雨\":\n\t// \t\t\t\t\treturn require('../assets/weather/bigrain.png')\n\t// \t\t\t\tcase \"雷电\":\n\t// \t\t\t\t\treturn require('../assets/weather/thunder.png')\n\t// \t\t\t\tcase \"雷阵雨\":\n\t// \t\t\t\t\treturn require('../assets/weather/shower.png')\n\t// \t\t\t\tcase \"沙尘暴\":\n\t// \t\t\t\t\treturn require('../assets/weather/sand.png')\n\t// \t\t\t\tcase \"晴\":\n\t// \t\t\t\t\treturn require('../assets/weather/sun.png')\n\t// \t\t\t\tcase \"雾霾\":\n\t// \t\t\t\t\treturn require('../assets/weather/smog.png')\n\t// \t\t\t\tcase \"小雪\":\n\t// \t\t\t\t\treturn require('../assets/weather/snow.png')\n\t// \t\t\t\tcase \"小雨\":\n\t// \t\t\t\t\treturn require('../assets/weather/rain.png')\n\t// \t\t\t\tcase \"雪\":\n\t// \t\t\t\t\treturn require('../assets/weather/rainlitter.png')\n\t// \t\t\t\tcase \"多云\":\n\t// \t\t\t\t\treturn require('../assets/weather/night.png')\n\t// \t\t\t\tcase \"雨夹雪\":\n\t// \t\t\t\t\treturn require('../assets/weather/rainsnow.png')\n\t// \t\t\t\tcase \"月亮\":\n\t// \t\t\t\t\treturn require('../assets/weather/moon.png')\n\t// \t\t\t\tcase \"中雪\":\n\t// \t\t\t\t\treturn require('../assets/weather/mieddlesnow.png')\n\t// \t\t\t\tcase \"中雨\":\n\t// \t\t\t\t\treturn require('../assets/weather/middlerain.png')\n\t// \t\t\t}\n    },\n    //隐藏箱子\n    hideBox(){\n        this.$refs.htModels.handleFirstBox();\n    }\n  },\n  components: {\n    // echars,\n    // echarts1,\n    // echarts2,\n    // HomeLeft\n    // home,\n    // equipmentManage,\n    // batteryManagement, // 电池管理弹窗\n    // productionInformation, // 生产信息弹窗\n    // deviceManagement, // 设备信息弹窗\n    // operationMaintenance, // 运维指导弹窗\n    // container, // 货箱弹窗\n    // palletizer, // 码垛机弹窗\n    // packingStation, // 装箱站弹窗\n    // destacker, // 拆垛机弹窗\n    // hoist, // 提升机弹窗\n    // suttleCar, // 穿梭车弹窗\n    // battery, //电池设备弹窗\n    // wireFeeder, // 出库工单弹窗\n    // inFeeder,//入库工单弹窗\n    // lnventory,\n    // equipmentInspection, //设备巡检弹窗\n    // maintenance, //维保提醒\n    // maintenanceRemind,\n    // lnventoryLeft,\n    // maintenanceRemindTable,\n    // conveyor,// 输送机弹窗\n  },\n};\n</script>\n<style>\n.el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n  \n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n  \n  body > .el-container {\n    margin-bottom: 40px;\n  }\n  \n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n  \n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n"]}]}