{"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&id=a83bd3b0&scoped=true&lang=css&","dependencies":[{"path":"D:\\Hjm项目\\TransFlow\\src\\views\\index.vue","mtime":1672881376075},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\css-loader\\dist\\cjs.js","mtime":1672881375404},{"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\r\n.el-form-item {\r\n  margin-bottom: 15px;\r\n}\r\n",{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2pBA;AACA;AACA","file":"index.vue","sourceRoot":"src/views","sourcesContent":["<template>\r\n  <div class=\"content-box\">\r\n\r\n    <div class=\"container\">\r\n      <!-- <nav>\r\n      <router-link :to=\"a.url\" :key=\"index\" v-for=\"(a,index) in Data\">{{a.title}}</router-link>\r\n       <el-button type=\"primary\" @click=\"dialogFormVisible = true\">断面组件</el-button>\r\n    </nav> -->\r\n      <el-tabs type=\"border-card\">\r\n        <el-tab-pane label=\"xx路口\">\r\n          <div style=\"width:60%;height:100%;display:inline-block;border:1px soild #eee;padding:15px\">\r\n            <img :src='imgUrl' width=\"100%\" height=\"100%\" />\r\n          </div>\r\n          <div style=\"width:20%;height:100%;display:inline-block;border:1px soild #eee;padding:15px;\">\r\n\r\n            <el-button type=\"primary\" @click=\"dialogFormVisible = true\">断面组件</el-button>\r\n            <el-button type=\"primary\" @click=\"areaComponent = true\">区域组件</el-button>\r\n            <el-button type=\"primary\" @click=\"trajectory=true\">轨迹</el-button>\r\n            <el-button type=\"primary\" @click=\"speed = true\">速度组件</el-button>\r\n            <el-button type=\"primary\" @click=\"flow = true\">流量组件</el-button>\r\n            <el-button type=\"primary\" @click=\"indexModule = true\">车头时距</el-button>\r\n            <el-button type=\"primary\" @click=\"indexModule = true\">排队数</el-button>\r\n            <el-button type=\"primary\" @click=\"indexModule = true\">检测数</el-button>\r\n            <el-button type=\"primary\" @click=\"indexModule = true\">延误</el-button>\r\n            <el-button type=\"primary\" @click=\"indexModule = true\">拥堵</el-button>\r\n\r\n          </div>\r\n          <div style=\"width:20%;height:100%;display:inline-block;border:1px soild #eee;padding:15px\">\r\n          </div>\r\n        </el-tab-pane>\r\n        <el-tab-pane label=\"数据看板\">\r\n          <dataBoard></dataBoard>\r\n        </el-tab-pane>\r\n        <el-tab-pane label=\"分析配置\">\r\n          <analysisConfiguration></analysisConfiguration>\r\n        </el-tab-pane>\r\n        <el-tab-pane label=\"分析状态\">\r\n          <editModal></editModal>\r\n        </el-tab-pane>\r\n        <el-tab-pane label=\"存储\">存储</el-tab-pane>\r\n      </el-tabs>\r\n      <!-- <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl' width=\"100%\" height=\"100%\"/>\r\n  </div>  \r\n  <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl1' width=\"100%\" height=\"100%\"/>\r\n  </div> \r\n  <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl2' width=\"100%\" height=\"100%\"/>\r\n  </div> \r\n  <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl3' width=\"100%\" height=\"100%\"/>\r\n  </div> \r\n  <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl4' width=\"100%\" height=\"100%\"/>\r\n  </div> \r\n  <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl5' width=\"100%\" height=\"100%\"/>\r\n  </div>  -->\r\n\r\n    </div>\r\n    <div id=\"dialog\" class=\"margin-top: 0px !important;\">\r\n      <el-dialog title=\"断面组件配置\" width=\"40%\" :visible.sync=\"dialogFormVisible\">\r\n        <el-form ref=\"form\" :model=\"form\" label-width=\"80px\">\r\n          <!-- <el-form-item label=\"实时性\">\r\n    <el-radio-group v-model=\"form.resource\">\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=\"断面名称\">\r\n            <el-input v-model=\"form.name\"></el-input>\r\n          </el-form-item>\r\n          <el-form-item label=\"断面方向\">\r\n            <el-select v-model=\"form.region\" placeholder=\"请选择类型\">\r\n              <el-option label=\"正向\" value=\"car\"></el-option>\r\n              <el-option label=\"方向\" value=\"bus\"></el-option>\r\n              <el-option label=\"双向\" value=\"kache\"></el-option>\r\n            </el-select>\r\n          </el-form-item>\r\n\r\n          <el-form-item>\r\n            <el-button type=\"primary\" @click=\"onSubmit\">确认</el-button>\r\n            <el-button @click=\"dialogFormVisible = false\">取消</el-button>\r\n          </el-form-item>\r\n        </el-form>\r\n      </el-dialog>\r\n      <el-dialog title=\"区域组件配置\" width=\"40%\" :visible.sync=\"areaComponent\">\r\n        <el-form ref=\"form\" :model=\"areaComponentform\" label-width=\"80px\">\r\n          <el-form-item label=\"区域名称\">\r\n            <el-input v-model=\"areaComponentform.name\"></el-input>\r\n          </el-form-item>\r\n          <el-form-item>\r\n            <el-button type=\"primary\" @click=\"onSubmit\">确认</el-button>\r\n            <el-button @click=\"dialogFormVisible = false\">取消</el-button>\r\n          </el-form-item>\r\n        </el-form>\r\n      </el-dialog>\r\n      <el-dialog title=\"速度组件配置\" width=\"40%\" :visible.sync=\"speed\">\r\n        <el-form ref=\"form\" :model=\"speedForm\" label-width=\"80px\">\r\n          <el-form-item label=\"速度组件名称\">\r\n            <el-input v-model=\"speedForm.name\"></el-input>\r\n          </el-form-item>\r\n          <el-form-item label=\"数值筛选\">\r\n            <el-input v-model=\"speedForm.name\"></el-input>\r\n          </el-form-item>\r\n          <el-form-item label=\"时间模式\">\r\n            <el-select v-model=\"speedForm.region\" placeholder=\"请选择时间模式\">\r\n              <el-option label=\"触发\" value=\"car\"></el-option>\r\n              <el-option label=\"周期时刻\" value=\"bus\"></el-option>\r\n              <el-option label=\"周期统计\" value=\"kache\"></el-option>\r\n            </el-select>\r\n          </el-form-item>\r\n          <el-form-item label=\"展现形式\">\r\n            <el-checkbox-group v-model=\"speedForm.region\">\r\n              <el-checkbox label=\"数值\" name=\"type\"></el-checkbox>\r\n              <el-checkbox label=\"表格\" name=\"type\"></el-checkbox>\r\n              <el-checkbox label=\"时间曲线图\" name=\"type\"></el-checkbox>\r\n              <el-checkbox label=\"均值图\" name=\"type\"></el-checkbox>\r\n            </el-checkbox-group>\r\n          </el-form-item>\r\n          <el-form-item>\r\n            <el-button type=\"primary\" @click=\"onSubmit\">确认</el-button>\r\n            <el-button @click=\"dialogFormVisible = false\">取消</el-button>\r\n          </el-form-item>\r\n        </el-form>\r\n      </el-dialog>\r\n      <el-dialog title=\"轨迹\" width=\"40%\" :visible.sync=\"trajectory\">\r\n        <el-form ref=\"form\" :model=\"speedForm\" label-width=\"80px\">\r\n          <el-form-item label=\"轨迹\">\r\n            <el-input v-model=\"speedForm.name\"></el-input>\r\n          </el-form-item>\r\n          <el-form-item label=\"数值筛选\">\r\n            <el-input v-model=\"speedForm.name\"></el-input>\r\n          </el-form-item>\r\n          <el-form-item label=\"时间模式\">\r\n            <el-select v-model=\"speedForm.region\" placeholder=\"请选择时间模式\">\r\n              <el-option label=\"触发\" value=\"car\"></el-option>\r\n              <el-option label=\"周期时刻\" value=\"bus\"></el-option>\r\n              <el-option label=\"周期统计\" value=\"kache\"></el-option>\r\n            </el-select>\r\n          </el-form-item>\r\n          <el-form-item label=\"展现形式\">\r\n            <el-checkbox-group v-model=\"speedForm.region\">\r\n              <el-checkbox label=\"数值\" name=\"type\"></el-checkbox>\r\n              <el-checkbox label=\"表格\" name=\"type\"></el-checkbox>\r\n              <el-checkbox label=\"时间曲线图\" name=\"type\"></el-checkbox>\r\n              <el-checkbox label=\"均值图\" name=\"type\"></el-checkbox>\r\n            </el-checkbox-group>\r\n          </el-form-item>\r\n          <el-form-item>\r\n            <el-button type=\"primary\" @click=\"onSubmit\">确认</el-button>\r\n            <el-button @click=\"dialogFormVisible = false\">取消</el-button>\r\n          </el-form-item>\r\n        </el-form>\r\n      </el-dialog>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n\r\nimport mqtt from \"mqtt\"; // mqtt协议\r\nimport editModal from \"@/views/bounced/maintenanceRemind\";\r\nimport analysisConfiguration from \"@/views/bounced/analysisConfiguration\";\r\nimport dataBoard from \"@/views/bounced/dataBoard\";\r\nimport axios from 'axios'\r\nexport default {\r\n  data() {\r\n    return {\r\n      trajectory:false,//轨迹\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      dialogFormVisible: false,\r\n      areaComponent: false,\r\n      indexModule: false,\r\n      speed: false,\r\n      form: {\r\n        name: '',\r\n        region: '',\r\n        date1: '',\r\n        date2: '',\r\n        delivery: false,\r\n        type: [],\r\n        resource: '实时（触发）',\r\n        desc: ''\r\n      },\r\n      areaComponentform: {\r\n        name: '',\r\n        region: '',\r\n        date1: '',\r\n        date2: '',\r\n        delivery: false,\r\n        type: [],\r\n        resource: '实时（触发）',\r\n        desc: ''\r\n      },\r\n      speedForm: {\r\n        name: '',\r\n        region: '',\r\n        date1: '',\r\n        date2: '',\r\n        delivery: false,\r\n        type: [],\r\n        resource: '实时（触发）',\r\n        desc: ''\r\n      },\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      imgUrl1: '',\r\n      imgUrl2: '',\r\n      imgUrl3: '',\r\n      imgUrl4: '',\r\n      imgUrl5: '',\r\n      btnPic: [],\r\n      Data: [\r\n        {\r\n          title: 'xx路口',\r\n          url: ''\r\n        },\r\n        {\r\n          title: '数据看板',\r\n          url: ''\r\n        },\r\n        {\r\n          title: '分析配置',\r\n          url: ''\r\n        },\r\n        {\r\n          title: '分析配置',\r\n          url: ''\r\n        }\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\r\n    // this.getMessage();\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    // 测试：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    onSubmit() { },\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://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt\r\n      const host = 'ws://172.16.1.168:10087/';\r\n\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: \"img1\", // 要发布的主题\r\n          payload: \"[MQTT-TEST] 遗嘱消息：连接异常断开！\", // 要发布的消息\r\n          qos: 0, // 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('img0', { qos: 0 });\r\n          this.mqttClient.subscribe('img1', { qos: 0 });\r\n          this.mqttClient.subscribe('img2', { qos: 0 });\r\n          this.mqttClient.subscribe('img3', { qos: 0 });\r\n          this.mqttClient.subscribe('img4', { qos: 0 });\r\n          this.mqttClient.subscribe('img5', { qos: 0 });\r\n          this.mqttClient.subscribe('stream0', { qos: 0 });\r\n          this.mqttClient.subscribe('stream1', { qos: 0 });\r\n          this.mqttClient.subscribe('stream2', { qos: 0 });\r\n          this.mqttClient.subscribe('stream3', { qos: 0 });\r\n          this.mqttClient.subscribe('stream4', { qos: 0 });\r\n          this.mqttClient.subscribe('stream5', { qos: 0 });\r\n\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          if (topic.indexOf(\"img0\") != -1) {\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          } else if (topic.indexOf(\"img1\") != -1) {\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.imgUrl1 = '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          } else if (topic.indexOf(\"img2\") != -1) {\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.imgUrl2 = '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          } else if (topic.indexOf(\"img3\") != -1) {\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.imgUrl3 = '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          } else if (topic.indexOf(\"img4\") != -1) {\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.imgUrl4 = '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          } else if (topic.indexOf(\"img5\") != -1) {\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.imgUrl5 = '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          } else if (topic.indexOf(\"stream0\") != -1) {\r\n            console.log(\r\n              `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n              new Date(),\r\n              new Date().getMilliseconds()\r\n            );\r\n          } else if (topic.indexOf(\"stream0\") != -1) {\r\n            console.log(\r\n              `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n              new Date(),\r\n              new Date().getMilliseconds()\r\n            );\r\n          } else if (topic.indexOf(\"stream1\") != -1) {\r\n            console.log(\r\n              `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n              new Date(),\r\n              new Date().getMilliseconds()\r\n            );\r\n          } else if (topic.indexOf(\"stream2\") != -1) {\r\n            console.log(\r\n              `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n              new Date(),\r\n              new Date().getMilliseconds()\r\n            );\r\n          } else if (topic.indexOf(\"stream3\") != -1) {\r\n            console.log(\r\n              `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n              new Date(),\r\n              new Date().getMilliseconds()\r\n            );\r\n          } else if (topic.indexOf(\"stream4\") != -1) {\r\n            console.log(\r\n              `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n              new Date(),\r\n              new Date().getMilliseconds()\r\n            );\r\n          } else if (topic.indexOf(\"stream5\") != -1) {\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\r\n        });\r\n      }\r\n\r\n\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    Onweather(name) {\r\n      //   switch (name) {\r\n      // \t\t\t\tcase \"多云\":\r\n      // \t\t\t\t\treturn require('../assets/weather/Cloudy .png');\r\n      // \t\t\t\tcase \"阴\":\r\n      // \t\t\t\t\treturn require('../assets/weather/Cloudy .png')\r\n      // \t\t\t\tcase \"暴雨\":\r\n      // \t\t\t\t\treturn require('../assets/weather/rainstorm.png')\r\n      // \t\t\t\tcase \"冰雹\":\r\n      // \t\t\t\t\treturn require('../assets/weather/hail.png')\r\n      // \t\t\t\tcase \"大风\":\r\n      // \t\t\t\t\treturn require('../assets/weather/gale.png')\r\n      // \t\t\t\tcase \"大雪\":\r\n      // \t\t\t\t\treturn require('../assets/weather/bigsnow.png')\r\n      // \t\t\t\tcase \"大雨\":\r\n      // \t\t\t\t\treturn require('../assets/weather/bigrain.png')\r\n      // \t\t\t\tcase \"雷电\":\r\n      // \t\t\t\t\treturn require('../assets/weather/thunder.png')\r\n      // \t\t\t\tcase \"雷阵雨\":\r\n      // \t\t\t\t\treturn require('../assets/weather/shower.png')\r\n      // \t\t\t\tcase \"沙尘暴\":\r\n      // \t\t\t\t\treturn require('../assets/weather/sand.png')\r\n      // \t\t\t\tcase \"晴\":\r\n      // \t\t\t\t\treturn require('../assets/weather/sun.png')\r\n      // \t\t\t\tcase \"雾霾\":\r\n      // \t\t\t\t\treturn require('../assets/weather/smog.png')\r\n      // \t\t\t\tcase \"小雪\":\r\n      // \t\t\t\t\treturn require('../assets/weather/snow.png')\r\n      // \t\t\t\tcase \"小雨\":\r\n      // \t\t\t\t\treturn require('../assets/weather/rain.png')\r\n      // \t\t\t\tcase \"雪\":\r\n      // \t\t\t\t\treturn require('../assets/weather/rainlitter.png')\r\n      // \t\t\t\tcase \"多云\":\r\n      // \t\t\t\t\treturn require('../assets/weather/night.png')\r\n      // \t\t\t\tcase \"雨夹雪\":\r\n      // \t\t\t\t\treturn require('../assets/weather/rainsnow.png')\r\n      // \t\t\t\tcase \"月亮\":\r\n      // \t\t\t\t\treturn require('../assets/weather/moon.png')\r\n      // \t\t\t\tcase \"中雪\":\r\n      // \t\t\t\t\treturn require('../assets/weather/mieddlesnow.png')\r\n      // \t\t\t\tcase \"中雨\":\r\n      // \t\t\t\t\treturn require('../assets/weather/middlerain.png')\r\n      // \t\t\t}\r\n    },\r\n    //隐藏箱子\r\n    hideBox() {\r\n      this.$refs.htModels.handleFirstBox();\r\n    }\r\n  },\r\n  components: {\r\n    editModal,\r\n    analysisConfiguration,\r\n    dataBoard\r\n  },\r\n};\r\n</script>\r\n<style scoped>\r\n.el-form-item {\r\n  margin-bottom: 15px;\r\n}\r\n</style>\r\n"]}]}