{"remainingRequest":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\Hjm项目\\TransFlow\\src\\views\\index.vue?vue&type=style&index=0&lang=css&","dependencies":[{"path":"D:\\Hjm项目\\TransFlow\\src\\views\\index.vue","mtime":1671006185902},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\Hjm项目\\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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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\n.el-header, .el-footer {\r\n    background-color: #B3C0D1;\r\n    color: #333;\r\n    text-align: center;\r\n    line-height: 60px;\r\n  }\r\n  \r\n  .el-aside {\r\n    background-color: #D3DCE6;\r\n    color: #333;\r\n    text-align: center;\r\n    line-height: 200px;\r\n  }\r\n  \r\n  .el-main {\r\n    background-color: #E9EEF3;\r\n    color: #333;\r\n    text-align: center;\r\n    line-height: 160px;\r\n  }\r\n  \r\n  body > .el-container {\r\n    margin-bottom: 40px;\r\n  }\r\n  \r\n  .el-container:nth-child(5) .el-aside,\r\n  .el-container:nth-child(6) .el-aside {\r\n    line-height: 260px;\r\n  }\r\n  \r\n  .el-container:nth-child(7) .el-aside {\r\n    line-height: 320px;\r\n  }\r\n",{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA04BA;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>\r\n   <div class=\"content-box\">\r\n  <div class=\"container\">\r\n\r\n     <div style=\"width:80%;height:800px\">\r\n    <img :src='imgUrl' width=\"100%\" height=\"100%\"/>\r\n  </div> \r\n \r\n  </div>\r\n</div>\r\n</template>\r\n\r\n<script>\r\n\r\nimport mqtt from \"mqtt\"; // mqtt协议\r\n\r\n\r\n\r\nimport axios from 'axios'\r\nexport default {\r\n  data() {\r\n    return {\r\n      hideBoxShow:true, //隐藏箱子按钮显示隐藏\r\n      closeStatus: null,\r\n      modelOthers: false,\r\n      componentShow: \"\",\r\n      isShowBtn: true, //菜单按钮隐藏\r\n      isShowBtn1: false, //菜单按钮显示\r\n      inputVal: \"\",\r\n      dateTime: this.$moment(new Date()).format(\"LL\"),\r\n      nowTime: \"\",\r\n      weekday: this.$moment().format(\"dddd\"),\r\n      ins: 0,\r\n      imgUrl:'',\r\n      btnPic: [\r\n        // require(\"@/assets/images/homeActive.png\"),\r\n        // require(\"@/assets/images/battery.png\"),\r\n        // require(\"@/assets/images/stock.png\"),\r\n        // require(\"@/assets/images/productionInformation.png\"),\r\n        // require(\"@/assets/images/equipment.png\"),\r\n        // require(\"@/assets/images/operationMG.png\"),\r\n      ],\r\n      statusInfo: [\r\n        {\r\n          count: 15,\r\n          name: \"穿梭车在线数量\",\r\n        //   icon: require(\"../assets/images/运行设备图标.png\"),\r\n          color: \"#01A8FC\",\r\n        },\r\n        {\r\n          count: 26,\r\n          name: \"任务数量\",\r\n        //   icon: require(\"../assets/images/故障设备图标.png\"),\r\n          color: \"#FDA401\",\r\n        },\r\n      ],\r\n      messageInfo: [],\r\n      orderList: [],\r\n      enterList: [],\r\n      stockInfo: [],\r\n      perCent: 0,\r\n      perCent1: 0,\r\n      perCent2: 0,\r\n      facToal: \"\",\r\n      wbContent:'',\r\n      wxContent:'',\r\n      inContent:'',\r\n      outContent:'',\r\n      containerDetails:\"\",\r\n      locdesc:'',\r\n      weatherItem:{},\r\n      loadingShow1:true,\r\n      carInfo:[], //小车信息\r\n      carName:'',\r\n      palletizerInfo:[], //码垛机信息\r\n      palletizerName:'',\r\n      destackerInfo:[], //拆垛机信息\r\n      destackerName:'',\r\n      hoistInfo:[], //提升机信息’\r\n      hoistName:'', \r\n      battaryStationInfo:[],//快换电池装置\r\n      battaryStationName:\"\",\r\n      conveyorInfo:[], //输送机信息\r\n      conveyorName:\"\", \r\n    };\r\n  },\r\n  mounted() {\r\n    setInterval(() => {\r\n      this.nowTime = this.$moment(new Date()).format(\"LTS\");\r\n    }, 1000);\r\n    this.getMessage();\r\n    // 消息提醒\r\n    getfacMaintainRecord({ type: 0 }).then((res) => {\r\n        console.log(\"消息提醒\",res.data)\r\n    //   this.messageInfo = this.messageInfo.concat(JSON.parse(res.data.split('#')[0]));\r\n      this.messageInfo = res.data;\r\n      // this.messageInfo.push(JSON.parse(res.data.split('#')[0]))\r\n    //   \r\n    });\r\n    // getfacKeepRecord({ type: 0 }).then((res) => {\r\n    //   this.messageInfo = this.messageInfo.concat(res.data);\r\n    //   console.log(this.messageInfo, \",,qweqw\");\r\n    //   // this.messageInfo.push(res.data[1]) \r\n    // });\r\n    // this.getDataByMqtt()\r\n    this.getstatus();\r\n    this.getInhouse();\r\n    this.getOuthouse();\r\n    this.handleWather();\r\n    this.getDeviceStatusData()\r\n  },\r\n   created() {\r\n    this.testMqtt()\r\n    \r\n  },\r\n  methods: {\r\n     // 货箱\r\n    async squareList() {\r\n      let arrList = await getInventoryStatus({ type: 3 });\r\n      getInventoryMessage({ type: 0 }).then((res) => {\r\n        // 货箱渲染\r\n        var arr = res.data;\r\n        console.log(arr, \",arr,,,\");\r\n        console.log(arrList, \",,,arrList\");\r\n        arr.forEach((item, index) => {\r\n          let obj = {\r\n            cId: index + 526,\r\n            parentName: \"货箱\",\r\n            name: `货箱${1 + index}`,\r\n            pos: [2971.08, 383.81, -3099.09],\r\n            size: [1, 1, 1],\r\n            rotate: [0, 0, 0],\r\n            wirePos: [item.LIE, item.LAYER, item.LINE],\r\n            affiliation: [],\r\n            type: \"货箱\",\r\n            visible: true,\r\n            passenger: [],\r\n            taskCode: -1,\r\n            PLTNUM: \"\",\r\n            VPLTNUM: \"\",\r\n            LOCNUM: item.LOCNUM,\r\n            LOCDESC: item.LOCDESC,\r\n            LOCSTORESTATUS: item.LOCSTORESTATUS,\r\n            ITEMCMBNUM: item.ITEMCMBNUM,\r\n          };\r\n          arrList.data.forEach((items) => {\r\n            if (item.LOCNUM == items.CURRLOC) {\r\n              obj.PLTNUM = items.PLTNUM;\r\n              obj.VPLTNUM = items.VPLTNUM;\r\n              obj.cId = items.PLTNUM\r\n            }else if(item.LOCNUM == items.DLOC){\r\n              obj.PLTNUM = items.PLTNUM;\r\n              obj.VPLTNUM = items.VPLTNUM;\r\n              obj.cId = items.PLTNUM\r\n            }\r\n          });\r\n          var tarpos = this.wireSYs(item);\r\n          obj.pos = tarpos;\r\n            item.LAYER==1?obj.pos[1] = 50.9:obj.pos[1] = 364.81;\r\n            if(item.ITEMCMBNUM == '6000'){\r\n                  obj.parentName = '双箱_Empty'\r\n                }else{\r\n                  obj.parentName = '双箱_Full'\r\n                }\r\n          if (item.LOCSTORESTATUS != \"Free\") {\r\n            modelResource.push(obj);\r\n            this.realObj.forEach((items) => {\r\n              if (obj.parentName === items.parentName) {\r\n                this.createNode(obj, this.modelarray);\r\n                this.models[obj.cId].s3([\r\n                  1.3299999999999992, 2.6210000000000004, 1.33,\r\n                ]);\r\n              this.models[obj.cId].cParentName = '货箱';\r\n                // this.models[obj.cId].setImage('box');\r\n                // this.models[317].setImage('box') \r\n            }\r\n            });\r\n          }\r\n        });\r\n      \r\n      });\r\n    },\r\n     // 测试：mqtt测试\r\n    testMqtt() {\r\n         this.getDataByMqtt()\r\n      // 小车订阅\r\n    //   for (let key in this.carId) {\r\n    //     this.getDataByMqtt(\r\n    //       // \"ws:ht.mqtt.umayle.com:2022/mqtt\",\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"Car\" + key,\r\n    //       this.carId[key]\r\n    //     );\r\n    //   }\r\n    //   //输送机入库订阅\r\n    //   for (let i = 0; i < this.convoyorCIdGroup.length; i++) {\r\n    //     this.getDataByMqtt(\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"InConvoyor\" + this.convoyorCIdGroup[i],\r\n    //       this.convoyorCIdGroup[i]\r\n    //     );\r\n    //   }\r\n\r\n    //   //输送机出库订阅\r\n    //   for (let i = 0; i < this.outConvoyorCIdGroup.length; i++) {\r\n    //     this.getDataByMqtt(\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"OUTConvoyor\" + this.outConvoyorCIdGroup[i],\r\n    //       this.outConvoyorCIdGroup[i]\r\n    //     );\r\n    //   }\r\n\r\n    //   for (let key in this.BattaryArr) {\r\n    //     this.getDataByMqtt(\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"Battary_Sation\" + key,\r\n    //       this.BattaryArr[key]\r\n    //     );\r\n    //   }\r\n    //   // 升降机订阅elvArr\r\n    //   for (let key in this.elvArr) {\r\n    //     this.getDataByMqtt(\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"ELV\" + key,\r\n    //       this.elvArr[key]\r\n    //     );\r\n    //   }\r\n    //   // 拆码跺机订阅\r\n    //   for (let key in this.stampArr) {\r\n    //     this.getDataByMqtt(\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"INCMD\" + key,\r\n    //       this.stampArr[key]\r\n    //     );\r\n    //   }\r\n    },\r\n    //模型加载等待\r\n    loadingShow(data){\r\n      this.loadingShow1 = data\r\n    },\r\n     // mqtt订阅（独立）\r\n    getDataByMqtt(url, topic, cIdNum) {\r\n      const clientId = \"test_id_\" + String(new Date().getTime()); // 用户名\r\n      const host = 'ws://172.16.1.168:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt\r\n      const options = {\r\n        // 配置\r\n        // 测试：订阅本机IP\r\n        // host: host,\r\n        // port: port,\r\n        // host:\"172.16.1.168:10086\",\r\n        keepalive: 60, // 心跳时间，默认60s，设置为0禁用\r\n        username: 'admin',  // 用户名（可选）\r\n        password: '123456',  // 密码（可选）\r\n        clientId: clientId, // 客户端ID，默认随机生成\r\n        protocolId: \"MQTT\",\r\n        protocolVersion: 4,\r\n        clean: true, // false在离线时接收QoS1和2的消息\r\n        reconnectPeriod: 2000, // 重连间隔，默认1000毫秒\r\n        connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间\r\n        will: {\r\n          // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）\r\n          topic: \"videoTest\", // 要发布的主题\r\n          payload: \"[MQTT-TEST] 遗嘱消息：连接异常断开！\", // 要发布的消息\r\n          qos: 1, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次\r\n          retain: false, // 保留标志\r\n        },\r\n      };\r\n      if (this.mqttClient == undefined) {\r\n        this.mqttClient = mqtt.connect(host, options); // 连接\r\n        // const client = mqtt.connect(host, options); // 连接\r\n        // const client = mqtt.connect(host)  // 连接\r\n        // 错误回调\r\n        console.log(\"this.mqttClient\",this.mqttClient)\r\n        this.mqttClient.on(\"error\", (err) => {\r\n          console.log(\"[MQTT-TEST] 连接错误：\",err);\r\n          this.mqttClient.end();\r\n        });\r\n        // 重连回调\r\n        this.mqttClient.on(\"reconnect\", (reconnect) => {\r\n          console.log(\"[MQTT-TEST] 重连中……\",reconnect);\r\n        });\r\n        // 连接回调\r\n        this.mqttClient.on(\"connect\", (connect) => {\r\n          console.log(\"[MQTT-TEST] 已连接的客户端ID: \",connect);\r\n            // 订阅\r\n           this.mqttClient.subscribe('img', { qos: 1 });\r\n        });\r\n        // 接收回调\r\n        this.mqttClient.on(\"message\", (topic, message, packet) => {\r\n          console.log(\"[MQTT-TEST] 已连接的客户端ID: \",message);\r\n    \r\n          console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          // 解析后端数据\r\n        //   let dataReceived = JSON.parse(message.toString());\r\n        //     console.log(\"[MQTT-TEST] 已连接的客户端ID: \",dataReceived);\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(\"msg\",msg)   //msg为转换后的JSON数据\r\n                this.imgUrl='data:image/png;base64,' + msg.pic;\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }catch{\r\n                let imageType = 'arraybuffer';\r\n                const blob = new Blob([message], { type: imageType })\r\n                const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }\r\n          let that = this;\r\n          var cId;\r\n          if (topic.indexOf(\"Car\") != -1) {\r\n            cId = this.carId[topic.replace(\"Car\", \"\")];\r\n          } else if (topic.indexOf(\"InConvoyor\") != -1) {\r\n            cId = topic.replace(\"InConvoyor\", \"\");\r\n          } else if (topic.indexOf(\"Battary_Sation\") != -1) {\r\n            cId = this.BattaryArr[topic.replace(\"Battary_Sation\", \"\")];\r\n          } else if (topic.indexOf(\"ELV\") != \"-1\") {\r\n            cId = this.elvArr[topic.replace(\"ELV\", \"\")][0];\r\n            this.models[cId].topic = topic;\r\n          } else if (topic.indexOf(\"INCMD\") != -1) {\r\n            cId = this.stampArr[topic.replace(\"INCMD\", \"\")][0];\r\n            console.log(cId, \"topiccid\");\r\n            this.models[cId].topic = topic;\r\n          } else if (topic.indexOf(\"OUTConvoyor\") != -1) {\r\n            cId = topic.replace(\"OUTConvoyor\", \"\");\r\n          }\r\n          // var convoyorData = that.convoyorCIdGroup[i];\r\n        //   if (that.models[cId] != undefined) {\r\n        //     try {\r\n        //       that.models[cId].receiveData(dataReceived, topic);\r\n        //     } catch (err) {\r\n        //       console.error(err);\r\n        //     }\r\n        //   }\r\n        });\r\n      }\r\n    \r\n     \r\n    },\r\n    //获取设备状态\r\n    getDeviceStatusData(){\r\n      //任务数量\r\n       getDeviceStatus().then((res) => {\r\n        console.log(\"res1111\",res.data)\r\n        // this.enterList = res.data;\r\n        // console.log(res, \"123123\");\r\n        this.statusInfo[1].count = res.data.MessionNum\r\n      });\r\n      //穿梭车数量\r\n       getDeviceDetails({deviceNum:'Num'}).then((res) => {\r\n        console.log(\"res1111\",res.data)\r\n        // this.enterList = res.data;\r\n        // console.log(res, \"123123\");\r\n        this.statusInfo[0].count = res.data.CarOnlineNum\r\n      });\r\n    },\r\n    handleSearch(){\r\n      this.modelOthers = true;\r\n      this.$refs.htModels.finbBox(this.inputVal);\r\n      console.log(this.$refs.htModels,'asdasdasd');\r\n       this.inputVal = ''\r\n    },\r\n   handleRow(val){\r\n      this.modelOthers = true;\r\n      this.$refs.htModels.finbBox(val);\r\n    },\r\n    // 天气\r\n    handleWather(){\r\n      axios({url:'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',methods:''}).then(res=>{\r\n        this.weatherItem = res.data.lives[0]\r\n        console.log(this.weatherItem,'asdsads');\r\n      })\r\n    },\r\n    getmessageInfoData(val){\r\n        console.log(\"val\",val)\r\n        if(val==true){\r\n            getfacMaintainRecord({ type: 0 }).then((res) => {\r\n            console.log(\"消息提醒\",res.data)\r\n            this.messageInfo = res.data;\r\n            });\r\n        }\r\n    },\r\n    Onweather(name){\r\n    //   switch (name) {\r\n\t// \t\t\t\tcase \"多云\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/Cloudy .png');\r\n\t// \t\t\t\tcase \"阴\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/Cloudy .png')\r\n\t// \t\t\t\tcase \"暴雨\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/rainstorm.png')\r\n\t// \t\t\t\tcase \"冰雹\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/hail.png')\r\n\t// \t\t\t\tcase \"大风\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/gale.png')\r\n\t// \t\t\t\tcase \"大雪\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/bigsnow.png')\r\n\t// \t\t\t\tcase \"大雨\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/bigrain.png')\r\n\t// \t\t\t\tcase \"雷电\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/thunder.png')\r\n\t// \t\t\t\tcase \"雷阵雨\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/shower.png')\r\n\t// \t\t\t\tcase \"沙尘暴\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/sand.png')\r\n\t// \t\t\t\tcase \"晴\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/sun.png')\r\n\t// \t\t\t\tcase \"雾霾\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/smog.png')\r\n\t// \t\t\t\tcase \"小雪\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/snow.png')\r\n\t// \t\t\t\tcase \"小雨\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/rain.png')\r\n\t// \t\t\t\tcase \"雪\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/rainlitter.png')\r\n\t// \t\t\t\tcase \"多云\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/night.png')\r\n\t// \t\t\t\tcase \"雨夹雪\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/rainsnow.png')\r\n\t// \t\t\t\tcase \"月亮\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/moon.png')\r\n\t// \t\t\t\tcase \"中雪\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/mieddlesnow.png')\r\n\t// \t\t\t\tcase \"中雨\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/middlerain.png')\r\n\t// \t\t\t}\r\n    },\r\n    // 入库消息\r\n    getInhouse() {\r\n      getInwarehouse({ type: 0 }).then((res) => {\r\n        this.enterList = res.data;\r\n        console.log(res, \"123123\");\r\n      });\r\n    },\r\n    // 出库消息\r\n    getOuthouse() {\r\n      getOutwarehouse({ type: 0 }).then((res) => {\r\n        console.log(res.data);\r\n        this.orderList = res.data;\r\n      });\r\n    },\r\n\r\n    // 库存消息\r\n    getMessage() {\r\n      getInventoryMessage({ type: 1 }).then((res) => {\r\n        const arr = [];\r\n        arr.push(\r\n          res.data.MoveOut,\r\n          res.data.MoveIn,\r\n          res.data.load,\r\n          res.data.free\r\n        );\r\n        this.menusInit(arr);\r\n      });\r\n    },\r\n    // 库存情况\r\n    getstatus() {\r\n      getInventoryStatus({ type: 2 }).then((res) => {\r\n        console.log(JSON.parse(res.data.split(\"#\")[0]), \",,,qwe123\");\r\n        var obj = JSON.parse(res.data.split(\"#\")[0]);\r\n        var obj2 = JSON.parse(res.data.split(\"#\")[2]);\r\n        var arr = [];\r\n        Object.keys(obj).forEach((item) => {\r\n          Object.keys(obj2).forEach((items) => {\r\n            if (item == items) {\r\n              arr.push({\r\n                name: obj[item].substring(0, 2),\r\n                type: obj[item].substring(2, obj[item].length - 2),\r\n                smoke: \"烟丝\",\r\n                perCent: obj2[item],\r\n              });\r\n            }\r\n          });\r\n        });\r\n        this.perCent = arr[0].perCent;\r\n        this.perCent1 = arr[1].perCent;\r\n        this.perCent2 = arr[2].perCent;\r\n        this.stockInfo = arr;\r\n      });\r\n    },\r\n    // 时间转换\r\n    utcToLocal(date) {\r\n      const fmt = \"YYYY-MM-DD hh:mm:ss\";\r\n      return this.$moment(date).format(fmt);\r\n    },\r\n    /**\r\n     *\r\n     * 设备弹窗\r\n     */\r\n    getEquipmentInfo(data) {\r\n      if (data.cType == \"货箱\") {\r\n        // PLTNUM\r\n        // VPLTNUM\r\n        this.locdesc = data.LOCDESC\r\n      getCountBox({ type: 3 ,PLTNUM:data.PLTNUM}).then((res) => {\r\n        console.log(res.data,'箱子')\r\n        this.containerDetails = res.data\r\n        this.componentShow = \"container\";\r\n        this.modelOthers = true;\r\n      });\r\n      } else if (data.cType == \"码垛机\") {\r\n        let deviceNum = ''\r\n        if (data.cId == 144) {\r\n           deviceNum = 'INCMD4'\r\n        }else{\r\n           deviceNum = 'INCMD3'\r\n        }\r\n        getDeviceDetails(\r\n          {\r\n              deviceNum: deviceNum\r\n          }).then((res)=>{\r\n            this.palletizerName = deviceNum\r\n            this.palletizerInfo = res.data\r\n              this.componentShow = \"palletizer\";\r\n              this.modelOthers = true;\r\n        })\r\n      } \r\n      // else if (data.cType == \"装箱站\") {\r\n      //   this.componentShow = \"packingStation\";\r\n      //   this.modelOthers = true;\r\n      // } \r\n      else if (data.cType == \"拆垛机\") {\r\n        let deviceNum = ''\r\n        console.log(data,'拆垛机');\r\n        if (data.cId == 142) {\r\n           deviceNum = 'INCMD6'\r\n        }else if(data.cId == 146){\r\n           deviceNum = 'INCMD5'\r\n        }else if (data.cId == 149) {\r\n           deviceNum = 'INCMD2'\r\n        }else if (data.cId == 151) {\r\n           deviceNum = 'INCMD1'\r\n        }\r\n        getDeviceDetails(\r\n          {\r\n              deviceNum: deviceNum\r\n          }).then((res)=>{\r\n            this.destackerInfo = res.data\r\n            this.destackerName = deviceNum\r\n            this.componentShow = \"destacker\";\r\n            this.modelOthers = true;\r\n        })\r\n      } else if (data.cType == \"往复式输送升降机\") {\r\n        let deviceNum = ''\r\n        if (data.cId == 320) {\r\n          deviceNum = 'ELV1'\r\n        }else if(data.cId == 319){\r\n          deviceNum = 'ELV2'\r\n        }else if (data.cId == 318) {\r\n          deviceNum = 'ELV3'\r\n        }else if (data.cId == 317) {\r\n          deviceNum = 'ELV4'\r\n        }else if(data.cId == 313){\r\n          deviceNum = 'ELV5'\r\n        }else if(data.cId == 321){\r\n          deviceNum = 'ELV6'\r\n        }\r\n        getDeviceDetails(\r\n          {\r\n              deviceNum: deviceNum\r\n          }).then((res)=>{\r\n            this.hoistInfo = res.data\r\n            this.hoistName = deviceNum\r\n            this.componentShow = \"hoist\";\r\n            this.modelOthers = true;\r\n        })\r\n      } else if (data.cType == \"智能双向穿梭车\") {\r\n        getDeviceDetails(\r\n          {\r\n              deviceNum:'Car'+ data.cName.slice(11)\r\n          }).then((res)=>{\r\n            this.carName = 'Car' + data.cName.slice(11)\r\n            this.componentShow = \"suttleCar\";\r\n            this.modelOthers = true;\r\n            this.carInfo = res.data   \r\n        })\r\n      } else if (data.cType == \"快换电池装置\") {\r\n        let deviceNum = ''\r\n        if (data.cId == 476) {\r\n          deviceNum = 'Battary_Sation2'\r\n        }else if(data.cId == 361){\r\n          deviceNum = 'Battary_Sation1'\r\n        }\r\n        getDeviceDetails(\r\n          {\r\n              deviceNum: deviceNum\r\n          }).then((res)=>{\r\n            this.componentShow = \"battery\";\r\n            this.modelOthers = true;\r\n            this.battaryStationInfo = res.data   \r\n            this.battaryStationName = deviceNum\r\n        })\r\n        \r\n      }else if (data.cType == \"链式输送机\") {\r\n        \r\n        let deviceNum = ''\r\n        if (data.cId.toString().substring(0,2) == \"51\") {\r\n          deviceNum = 'InConvoyor' + data.cId\r\n        }else if (data.cId.toString().substring(0,2) == \"53\") {\r\n           deviceNum = 'OUTConvoyor' + data.cId\r\n        }\r\n        getDeviceDetails(\r\n          {\r\n              deviceNum: deviceNum\r\n          }).then((res)=>{\r\n            this.modelOthers = true;\r\n            this.componentShow = \"conveyor\";\r\n            this.conveyorInfo = res.data   \r\n            this.conveyorName = deviceNum\r\n        })\r\n      }\r\n    },\r\n    /**\r\n     * 详情弹窗\r\n     */\r\n    informationInfo(data,item) {\r\n      if (data == \"出库工单\") {\r\n        this.componentShow = \"wireFeeder\";\r\n        this.modelOthers = true;\r\n        this.outContent = this.orderList\r\n      }else if (data == \"入库工单\") {\r\n        this.componentShow = \"inFeeder\";\r\n        this.modelOthers = true;\r\n        this.inContent = this.enterList\r\n      }else if (data == \"库存消息\") {\r\n        this.componentShow = \"lnventory\";\r\n        this.modelOthers = true;\r\n        // this.inContent = this.enterList\r\n      } else if (data == \"各品牌库存情况\") {\r\n        this.componentShow = \"lnventoryLeft\";\r\n        this.modelOthers = true;\r\n        // this.inContent = this.enterList\r\n      } else if (data == \"消息提醒\") {\r\n        this.componentShow = \"maintenanceRemindTable\";\r\n        this.modelOthers = true;\r\n        // this.inContent = this.enterList\r\n      } else if (data == \"维保提醒\") {\r\n        if(item.keepName){\r\n          this.componentShow = \"maintenance\";\r\n          this.modelOthers = true;\r\n          this.wbContent=item\r\n        }else{\r\n        this.componentShow = \"maintenanceRemind\";\r\n          this.modelOthers = true;\r\n          this.wxContent=item\r\n        }\r\n//          getfacManage({ type: 3,facCode: item.facCode\r\n// ,id: item.id\r\n// ,mark:1}).then((res) => {\r\n//                 console.log(\"res.data\",res.data)\r\n             \r\n//             });\r\n      }\r\n    },\r\n    getCloseStatus(status) {\r\n      this.hideBoxShow = true\r\n      this.closeStatus = status;\r\n      // if (status == 1) {\r\n      //   this.btnPic[0] = require(\"@/assets/images/homeActive.png\");\r\n      //   this.btnPic[1] = require(\"@/assets/images/battery.png\");\r\n      // }\r\n    //   if (status == 2) {\r\n    //     this.btnPic[0] = require(\"@/assets/images/homeActive.png\");\r\n    //     this.btnPic[2] = require(\"@/assets/images/equipment.png\");\r\n    //   }\r\n    //   if (status == 3) {\r\n    //     this.btnPic[0] = require(\"@/assets/images/homeActive.png\");\r\n    //     this.btnPic[1] = require(\"@/assets/images/productionInformation.png\");\r\n    //   }\r\n    //   if (status == 4) {\r\n    //     this.btnPic[0] = require(\"@/assets/images/homeActive.png\");\r\n    //     this.btnPic[3] = require(\"@/assets/images/operationMG.png\");\r\n    //   }\r\n    },\r\n    handleActive(item, e) {\r\n      this.hideBoxShow = false\r\n      this.ins = item;\r\n      this.btnPic = [\r\n        // require(\"@/assets/images/home.png\"),\r\n        // require(\"@/assets/images/battery.png\"),\r\n        // require(\"@/assets/images/stock.png\"),\r\n        // require(\"@/assets/images/productionInformation.png\"),\r\n        // require(\"@/assets/images/equipment.png\"),\r\n        // require(\"@/assets/images/operationMG.png\"),\r\n      ];\r\n      if (item == 0) {\r\n        // this.btnPic[item] = require(\"@/assets/images/homeActive.png\");\r\n      } \r\n      // else if (item == 1) {\r\n      //   this.componentShow = \"batteryManagement\";\r\n      //   this.modelOthers = true;\r\n      //   this.btnPic[item] = require(\"@/assets/images/batteryActive.png\");\r\n      // } \r\n      else if (item == 2) {\r\n        this.componentShow = \"deviceManagement\";\r\n        this.modelOthers = true;\r\n        // this.btnPic[item] = require(\"@/assets/images/equipmentActive.png\");\r\n      } else if (item == 1) {\r\n        this.componentShow = \"productionInformation\";\r\n        this.modelOthers = true;\r\n        // this.btnPic[\r\n        //   item\r\n        // ] = require(\"@/assets/images/productionInformationActive.png\");\r\n      } else if (item == 3) {\r\n        this.componentShow = \"operationMaintenance\";\r\n        this.modelOthers = true;\r\n        // this.btnPic[item] = require(\"@/assets/images/operationMGActive.png\");\r\n      }\r\n      // else if (item == 2) {\r\n      //   this.btnPic[item] = require(\"@/assets/images/stockActive.png\");\r\n      // } \r\n      // else if (item == 3) {\r\n      //   this.componentShow = \"deviceManagement\";\r\n      //   this.modelOthers = true;\r\n      //   this.btnPic[item] = require(\"@/assets/images/equipmentActive.png\");\r\n      // } else if (item == 4) {\r\n      //   this.componentShow = \"productionInformation\";\r\n      //   this.modelOthers = true;\r\n      //   this.btnPic[\r\n      //     item\r\n      //   ] = require(\"@/assets/images/productionInformationActive.png\");\r\n      // } else if (item == 5) {\r\n      //   this.componentShow = \"operationMaintenance\";\r\n      //   this.modelOthers = true;\r\n      //   this.btnPic[item] = require(\"@/assets/images/operationMGActive.png\");\r\n      // }\r\n      this.$forceUpdate();\r\n    },\r\n    // 库存消息\r\n    menusInit(arr) {\r\n      let domechart = document.getElementById(\"menusBar\");\r\n      let myCharts = echarts.init(domechart);\r\n      var datapictorialBar = arr;\r\n      var pictorialBarColor = [\" #155b5b\", \" #16485a \", \"#41362d\"];\r\n      // 最大值\r\n      var maxList = Math.max.apply(null, arr) + 10;\r\n      console.log(maxList, datapictorialBar, \",,,maxList\");\r\n      let option = {\r\n        grid: {\r\n          top: 18,\r\n          bottom: 18,\r\n          left: 15,\r\n          right: 20,\r\n        },\r\n        xAxis: {\r\n          show: false,\r\n        },\r\n        yAxis: [\r\n          {\r\n            show: true,\r\n            type: \"category\",\r\n            data: [\"入库中\", \"出库中\",\"实箱\",\"空箱\",  ],\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              color: \"#ffffff\",\r\n              fontSize: 14,\r\n              inside: true,\r\n              padding: [-45, 0, 0, -10],\r\n              align: \"left\",\r\n            },\r\n          },\r\n          {\r\n            show: true,\r\n            type: \"category\",\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n          },\r\n        ],\r\n        series: [\r\n          {\r\n            name: \"销量\",\r\n            type: \"bar\",\r\n            barWidth: 20, // 柱图宽度\r\n            barGap: 36,\r\n            data: [maxList, maxList, maxList, maxList],\r\n            itemStyle: {\r\n              normal: {\r\n                //这里设置每个柱子颜色不一样\r\n                color: \"rgba(0, 153, 145, 0)\",\r\n                borderColor: \"#cca272\",\r\n                borderWidth: 1,\r\n                borderType: \"solid\",\r\n              },\r\n            },\r\n          },\r\n          {\r\n            // 值分隔\r\n            type: \"pictorialBar\",\r\n            colorBy: \"data\",\r\n            label: {\r\n              //数据显示的位置\r\n              show: true, //数值是否显示\r\n              position: \"right\", //数值相对于柱状图显示的位置\r\n              offset: [-30, -18],\r\n              fontSize: 18,\r\n              fontWeight: \"bold\",\r\n              color: \"#155b5b\",\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                color: function (params) {\r\n                  // 定义一个颜色数组colorList\r\n                  var colorList = [\r\n                    [\"#1afbd3\", \"#155b5b\"],\r\n                    [\"#19a1cc\", \"#16485a\"],\r\n                    [\"#19a1cc\", \"#16485a\"],\r\n                    [\"#ec8d41\", \"#41362d\"],\r\n                  ];\r\n                  var colorItem = colorList[params.dataIndex];\r\n                  return new echarts.graphic.LinearGradient(\r\n                    1,\r\n                    0,\r\n                    0,\r\n                    0,\r\n                    [\r\n                      {\r\n                        offset: 0,\r\n                        color: colorItem[0],\r\n                      },\r\n                      {\r\n                        offset: 1,\r\n                        color: colorItem[1],\r\n                      },\r\n                    ],\r\n                    false\r\n                  );\r\n                },\r\n              },\r\n            },\r\n            symbolRepeat: \"fixed\",\r\n            symbolMargin: 1,\r\n            symbol: \"roundRect\",\r\n            symbolClip: true,\r\n            symbolSize: [8, 18],\r\n            symbolPosition: \"start\",\r\n            symbolOffset: [1, 0],\r\n            // symbolBoundingData: this.total,\r\n            data: datapictorialBar,\r\n            width: 13,\r\n            z: 0,\r\n            zlevel: 3,\r\n          },\r\n        ],\r\n      };\r\n      myCharts.setOption(option);\r\n    },\r\n    //菜单显示\r\n    isShowBtnMore() {\r\n      this.isShowBtn = false;\r\n      window.setTimeout((e) => {\r\n        this.isShowBtn1 = true;\r\n      }, 1100);\r\n    },\r\n    isShowBtnMore1() {\r\n      this.isShowBtn1 = false;\r\n      this.isShowBtn = true;\r\n    },\r\n    //隐藏箱子\r\n    hideBox(){\r\n        this.$refs.htModels.handleFirstBox();\r\n    }\r\n  },\r\n  components: {\r\n    // echars,\r\n    // echarts1,\r\n    // echarts2,\r\n    // HomeLeft\r\n    // home,\r\n    // equipmentManage,\r\n    // batteryManagement, // 电池管理弹窗\r\n    // productionInformation, // 生产信息弹窗\r\n    // deviceManagement, // 设备信息弹窗\r\n    // operationMaintenance, // 运维指导弹窗\r\n    // container, // 货箱弹窗\r\n    // palletizer, // 码垛机弹窗\r\n    // packingStation, // 装箱站弹窗\r\n    // destacker, // 拆垛机弹窗\r\n    // hoist, // 提升机弹窗\r\n    // suttleCar, // 穿梭车弹窗\r\n    // battery, //电池设备弹窗\r\n    // wireFeeder, // 出库工单弹窗\r\n    // inFeeder,//入库工单弹窗\r\n    // lnventory,\r\n    // equipmentInspection, //设备巡检弹窗\r\n    // maintenance, //维保提醒\r\n    // maintenanceRemind,\r\n    // lnventoryLeft,\r\n    // maintenanceRemindTable,\r\n    // conveyor,// 输送机弹窗\r\n  },\r\n};\r\n</script>\r\n<style>\r\n.el-header, .el-footer {\r\n    background-color: #B3C0D1;\r\n    color: #333;\r\n    text-align: center;\r\n    line-height: 60px;\r\n  }\r\n  \r\n  .el-aside {\r\n    background-color: #D3DCE6;\r\n    color: #333;\r\n    text-align: center;\r\n    line-height: 200px;\r\n  }\r\n  \r\n  .el-main {\r\n    background-color: #E9EEF3;\r\n    color: #333;\r\n    text-align: center;\r\n    line-height: 160px;\r\n  }\r\n  \r\n  body > .el-container {\r\n    margin-bottom: 40px;\r\n  }\r\n  \r\n  .el-container:nth-child(5) .el-aside,\r\n  .el-container:nth-child(6) .el-aside {\r\n    line-height: 260px;\r\n  }\r\n  \r\n  .el-container:nth-child(7) .el-aside {\r\n    line-height: 320px;\r\n  }\r\n</style>\r\n"]}]}