<template>
   <div class="content-box">
  <div class="container">

     <div style="width:80%;height:800px">
    <img :src='imgUrl' width="100%" height="100%"/>
  </div> 
 
  </div>
</div>
</template>

<script>

import mqtt from "mqtt"; // mqtt协议



import axios from 'axios'
export default {
  data() {
    return {
      hideBoxShow:true, //隐藏箱子按钮显示隐藏
      closeStatus: null,
      modelOthers: false,
      componentShow: "",
      isShowBtn: true, //菜单按钮隐藏
      isShowBtn1: false, //菜单按钮显示
      inputVal: "",
      dateTime: this.$moment(new Date()).format("LL"),
      nowTime: "",
      weekday: this.$moment().format("dddd"),
      ins: 0,
      imgUrl:'',
      btnPic: [
        // require("@/assets/images/homeActive.png"),
        // require("@/assets/images/battery.png"),
        // require("@/assets/images/stock.png"),
        // require("@/assets/images/productionInformation.png"),
        // require("@/assets/images/equipment.png"),
        // require("@/assets/images/operationMG.png"),
      ],
      statusInfo: [
        {
          count: 15,
          name: "穿梭车在线数量",
        //   icon: require("../assets/images/运行设备图标.png"),
          color: "#01A8FC",
        },
        {
          count: 26,
          name: "任务数量",
        //   icon: require("../assets/images/故障设备图标.png"),
          color: "#FDA401",
        },
      ],
      messageInfo: [],
      orderList: [],
      enterList: [],
      stockInfo: [],
      perCent: 0,
      perCent1: 0,
      perCent2: 0,
      facToal: "",
      wbContent:'',
      wxContent:'',
      inContent:'',
      outContent:'',
      containerDetails:"",
      locdesc:'',
      weatherItem:{},
      loadingShow1:true,
      carInfo:[], //小车信息
      carName:'',
      palletizerInfo:[], //码垛机信息
      palletizerName:'',
      destackerInfo:[], //拆垛机信息
      destackerName:'',
      hoistInfo:[], //提升机信息’
      hoistName:'', 
      battaryStationInfo:[],//快换电池装置
      battaryStationName:"",
      conveyorInfo:[], //输送机信息
      conveyorName:"", 
    };
  },
  mounted() {
    setInterval(() => {
      this.nowTime = this.$moment(new Date()).format("LTS");
    }, 1000);
    this.getMessage();
    // 消息提醒
    getfacMaintainRecord({ type: 0 }).then((res) => {
        console.log("消息提醒",res.data)
    //   this.messageInfo = this.messageInfo.concat(JSON.parse(res.data.split('#')[0]));
      this.messageInfo = res.data;
      // this.messageInfo.push(JSON.parse(res.data.split('#')[0]))
    //   
    });
    // getfacKeepRecord({ type: 0 }).then((res) => {
    //   this.messageInfo = this.messageInfo.concat(res.data);
    //   console.log(this.messageInfo, ",,qweqw");
    //   // this.messageInfo.push(res.data[1]) 
    // });
    // this.getDataByMqtt()
    this.getstatus();
    this.getInhouse();
    this.getOuthouse();
    this.handleWather();
    this.getDeviceStatusData()
  },
   created() {
    this.testMqtt()
    
  },
  methods: {
     // 货箱
    async squareList() {
      let arrList = await getInventoryStatus({ type: 3 });
      getInventoryMessage({ type: 0 }).then((res) => {
        // 货箱渲染
        var arr = res.data;
        console.log(arr, ",arr,,,");
        console.log(arrList, ",,,arrList");
        arr.forEach((item, index) => {
          let obj = {
            cId: index + 526,
            parentName: "货箱",
            name: `货箱${1 + index}`,
            pos: [2971.08, 383.81, -3099.09],
            size: [1, 1, 1],
            rotate: [0, 0, 0],
            wirePos: [item.LIE, item.LAYER, item.LINE],
            affiliation: [],
            type: "货箱",
            visible: true,
            passenger: [],
            taskCode: -1,
            PLTNUM: "",
            VPLTNUM: "",
            LOCNUM: item.LOCNUM,
            LOCDESC: item.LOCDESC,
            LOCSTORESTATUS: item.LOCSTORESTATUS,
            ITEMCMBNUM: item.ITEMCMBNUM,
          };
          arrList.data.forEach((items) => {
            if (item.LOCNUM == items.CURRLOC) {
              obj.PLTNUM = items.PLTNUM;
              obj.VPLTNUM = items.VPLTNUM;
              obj.cId = items.PLTNUM
            }else if(item.LOCNUM == items.DLOC){
              obj.PLTNUM = items.PLTNUM;
              obj.VPLTNUM = items.VPLTNUM;
              obj.cId = items.PLTNUM
            }
          });
          var tarpos = this.wireSYs(item);
          obj.pos = tarpos;
            item.LAYER==1?obj.pos[1] = 50.9:obj.pos[1] = 364.81;
            if(item.ITEMCMBNUM == '6000'){
                  obj.parentName = '双箱_Empty'
                }else{
                  obj.parentName = '双箱_Full'
                }
          if (item.LOCSTORESTATUS != "Free") {
            modelResource.push(obj);
            this.realObj.forEach((items) => {
              if (obj.parentName === items.parentName) {
                this.createNode(obj, this.modelarray);
                this.models[obj.cId].s3([
                  1.3299999999999992, 2.6210000000000004, 1.33,
                ]);
              this.models[obj.cId].cParentName = '货箱';
                // this.models[obj.cId].setImage('box');
                // this.models[317].setImage('box') 
            }
            });
          }
        });
      
      });
    },
     // 测试：mqtt测试
    testMqtt() {
         this.getDataByMqtt()
      // 小车订阅
    //   for (let key in this.carId) {
    //     this.getDataByMqtt(
    //       // "ws:ht.mqtt.umayle.com:2022/mqtt",
    //       "ws:220.163.114.157:8083/mqtt",
    //       "Car" + key,
    //       this.carId[key]
    //     );
    //   }
    //   //输送机入库订阅
    //   for (let i = 0; i < this.convoyorCIdGroup.length; i++) {
    //     this.getDataByMqtt(
    //       "ws:220.163.114.157:8083/mqtt",
    //       "InConvoyor" + this.convoyorCIdGroup[i],
    //       this.convoyorCIdGroup[i]
    //     );
    //   }

    //   //输送机出库订阅
    //   for (let i = 0; i < this.outConvoyorCIdGroup.length; i++) {
    //     this.getDataByMqtt(
    //       "ws:220.163.114.157:8083/mqtt",
    //       "OUTConvoyor" + this.outConvoyorCIdGroup[i],
    //       this.outConvoyorCIdGroup[i]
    //     );
    //   }

    //   for (let key in this.BattaryArr) {
    //     this.getDataByMqtt(
    //       "ws:220.163.114.157:8083/mqtt",
    //       "Battary_Sation" + key,
    //       this.BattaryArr[key]
    //     );
    //   }
    //   // 升降机订阅elvArr
    //   for (let key in this.elvArr) {
    //     this.getDataByMqtt(
    //       "ws:220.163.114.157:8083/mqtt",
    //       "ELV" + key,
    //       this.elvArr[key]
    //     );
    //   }
    //   // 拆码跺机订阅
    //   for (let key in this.stampArr) {
    //     this.getDataByMqtt(
    //       "ws:220.163.114.157:8083/mqtt",
    //       "INCMD" + key,
    //       this.stampArr[key]
    //     );
    //   }
    },
    //模型加载等待
    loadingShow(data){
      this.loadingShow1 = data
    },
     // mqtt订阅（独立）
    getDataByMqtt(url, topic, cIdNum) {
      const clientId = "test_id_" + String(new Date().getTime()); // 用户名
      const host = 'ws://172.16.1.168:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
      const options = {
        // 配置
        // 测试：订阅本机IP
        // host: host,
        // port: port,
        // host:"172.16.1.168:10086",
        keepalive: 60, // 心跳时间，默认60s，设置为0禁用
        username: 'admin',  // 用户名（可选）
        password: '123456',  // 密码（可选）
        clientId: clientId, // 客户端ID，默认随机生成
        protocolId: "MQTT",
        protocolVersion: 4,
        clean: true, // false在离线时接收QoS1和2的消息
        reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
        connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
        will: {
          // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
          topic: "videoTest", // 要发布的主题
          payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息
          qos: 1, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
          retain: false, // 保留标志
        },
      };
      if (this.mqttClient == undefined) {
        this.mqttClient = mqtt.connect(host, options); // 连接
        // const client = mqtt.connect(host, options); // 连接
        // const client = mqtt.connect(host)  // 连接
        // 错误回调
        console.log("this.mqttClient",this.mqttClient)
        this.mqttClient.on("error", (err) => {
          console.log("[MQTT-TEST] 连接错误：",err);
          this.mqttClient.end();
        });
        // 重连回调
        this.mqttClient.on("reconnect", (reconnect) => {
          console.log("[MQTT-TEST] 重连中……",reconnect);
        });
        // 连接回调
        this.mqttClient.on("connect", (connect) => {
          console.log("[MQTT-TEST] 已连接的客户端ID: ",connect);
            // 订阅
           this.mqttClient.subscribe('img', { qos: 1 });
        });
        // 接收回调
        this.mqttClient.on("message", (topic, message, packet) => {
          console.log("[MQTT-TEST] 已连接的客户端ID: ",message);
    
          console.log(
            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
            new Date(),
            new Date().getMilliseconds()
          );
          // 解析后端数据
        //   let dataReceived = JSON.parse(message.toString());
        //     console.log("[MQTT-TEST] 已连接的客户端ID: ",dataReceived);
             try{
                const utf8decoder = new TextDecoder()
                const u8arr = new Uint8Array(message)
                const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
                const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
                console.log("msg",msg)   //msg为转换后的JSON数据
                this.imgUrl='data:image/png;base64,' + msg.pic;
                console.log("imageUrl",imageUrl)
            }catch{
                let imageType = 'arraybuffer';
                const blob = new Blob([message], { type: imageType })
                const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
                console.log("imageUrl",imageUrl)
            }
          let that = this;
          var cId;
          if (topic.indexOf("Car") != -1) {
            cId = this.carId[topic.replace("Car", "")];
          } else if (topic.indexOf("InConvoyor") != -1) {
            cId = topic.replace("InConvoyor", "");
          } else if (topic.indexOf("Battary_Sation") != -1) {
            cId = this.BattaryArr[topic.replace("Battary_Sation", "")];
          } else if (topic.indexOf("ELV") != "-1") {
            cId = this.elvArr[topic.replace("ELV", "")][0];
            this.models[cId].topic = topic;
          } else if (topic.indexOf("INCMD") != -1) {
            cId = this.stampArr[topic.replace("INCMD", "")][0];
            console.log(cId, "topiccid");
            this.models[cId].topic = topic;
          } else if (topic.indexOf("OUTConvoyor") != -1) {
            cId = topic.replace("OUTConvoyor", "");
          }
          // var convoyorData = that.convoyorCIdGroup[i];
        //   if (that.models[cId] != undefined) {
        //     try {
        //       that.models[cId].receiveData(dataReceived, topic);
        //     } catch (err) {
        //       console.error(err);
        //     }
        //   }
        });
      }
    
     
    },
    //获取设备状态
    getDeviceStatusData(){
      //任务数量
       getDeviceStatus().then((res) => {
        console.log("res1111",res.data)
        // this.enterList = res.data;
        // console.log(res, "123123");
        this.statusInfo[1].count = res.data.MessionNum
      });
      //穿梭车数量
       getDeviceDetails({deviceNum:'Num'}).then((res) => {
        console.log("res1111",res.data)
        // this.enterList = res.data;
        // console.log(res, "123123");
        this.statusInfo[0].count = res.data.CarOnlineNum
      });
    },
    handleSearch(){
      this.modelOthers = true;
      this.$refs.htModels.finbBox(this.inputVal);
      console.log(this.$refs.htModels,'asdasdasd');
       this.inputVal = ''
    },
   handleRow(val){
      this.modelOthers = true;
      this.$refs.htModels.finbBox(val);
    },
    // 天气
    handleWather(){
      axios({url:'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',methods:''}).then(res=>{
        this.weatherItem = res.data.lives[0]
        console.log(this.weatherItem,'asdsads');
      })
    },
    getmessageInfoData(val){
        console.log("val",val)
        if(val==true){
            getfacMaintainRecord({ type: 0 }).then((res) => {
            console.log("消息提醒",res.data)
            this.messageInfo = res.data;
            });
        }
    },
    Onweather(name){
    //   switch (name) {
	// 				case "多云":
	// 					return require('../assets/weather/Cloudy .png');
	// 				case "阴":
	// 					return require('../assets/weather/Cloudy .png')
	// 				case "暴雨":
	// 					return require('../assets/weather/rainstorm.png')
	// 				case "冰雹":
	// 					return require('../assets/weather/hail.png')
	// 				case "大风":
	// 					return require('../assets/weather/gale.png')
	// 				case "大雪":
	// 					return require('../assets/weather/bigsnow.png')
	// 				case "大雨":
	// 					return require('../assets/weather/bigrain.png')
	// 				case "雷电":
	// 					return require('../assets/weather/thunder.png')
	// 				case "雷阵雨":
	// 					return require('../assets/weather/shower.png')
	// 				case "沙尘暴":
	// 					return require('../assets/weather/sand.png')
	// 				case "晴":
	// 					return require('../assets/weather/sun.png')
	// 				case "雾霾":
	// 					return require('../assets/weather/smog.png')
	// 				case "小雪":
	// 					return require('../assets/weather/snow.png')
	// 				case "小雨":
	// 					return require('../assets/weather/rain.png')
	// 				case "雪":
	// 					return require('../assets/weather/rainlitter.png')
	// 				case "多云":
	// 					return require('../assets/weather/night.png')
	// 				case "雨夹雪":
	// 					return require('../assets/weather/rainsnow.png')
	// 				case "月亮":
	// 					return require('../assets/weather/moon.png')
	// 				case "中雪":
	// 					return require('../assets/weather/mieddlesnow.png')
	// 				case "中雨":
	// 					return require('../assets/weather/middlerain.png')
	// 			}
    },
    // 入库消息
    getInhouse() {
      getInwarehouse({ type: 0 }).then((res) => {
        this.enterList = res.data;
        console.log(res, "123123");
      });
    },
    // 出库消息
    getOuthouse() {
      getOutwarehouse({ type: 0 }).then((res) => {
        console.log(res.data);
        this.orderList = res.data;
      });
    },

    // 库存消息
    getMessage() {
      getInventoryMessage({ type: 1 }).then((res) => {
        const arr = [];
        arr.push(
          res.data.MoveOut,
          res.data.MoveIn,
          res.data.load,
          res.data.free
        );
        this.menusInit(arr);
      });
    },
    // 库存情况
    getstatus() {
      getInventoryStatus({ type: 2 }).then((res) => {
        console.log(JSON.parse(res.data.split("#")[0]), ",,,qwe123");
        var obj = JSON.parse(res.data.split("#")[0]);
        var obj2 = JSON.parse(res.data.split("#")[2]);
        var arr = [];
        Object.keys(obj).forEach((item) => {
          Object.keys(obj2).forEach((items) => {
            if (item == items) {
              arr.push({
                name: obj[item].substring(0, 2),
                type: obj[item].substring(2, obj[item].length - 2),
                smoke: "烟丝",
                perCent: obj2[item],
              });
            }
          });
        });
        this.perCent = arr[0].perCent;
        this.perCent1 = arr[1].perCent;
        this.perCent2 = arr[2].perCent;
        this.stockInfo = arr;
      });
    },
    // 时间转换
    utcToLocal(date) {
      const fmt = "YYYY-MM-DD hh:mm:ss";
      return this.$moment(date).format(fmt);
    },
    /**
     *
     * 设备弹窗
     */
    getEquipmentInfo(data) {
      if (data.cType == "货箱") {
        // PLTNUM
        // VPLTNUM
        this.locdesc = data.LOCDESC
      getCountBox({ type: 3 ,PLTNUM:data.PLTNUM}).then((res) => {
        console.log(res.data,'箱子')
        this.containerDetails = res.data
        this.componentShow = "container";
        this.modelOthers = true;
      });
      } else if (data.cType == "码垛机") {
        let deviceNum = ''
        if (data.cId == 144) {
           deviceNum = 'INCMD4'
        }else{
           deviceNum = 'INCMD3'
        }
        getDeviceDetails(
          {
              deviceNum: deviceNum
          }).then((res)=>{
            this.palletizerName = deviceNum
            this.palletizerInfo = res.data
              this.componentShow = "palletizer";
              this.modelOthers = true;
        })
      } 
      // else if (data.cType == "装箱站") {
      //   this.componentShow = "packingStation";
      //   this.modelOthers = true;
      // } 
      else if (data.cType == "拆垛机") {
        let deviceNum = ''
        console.log(data,'拆垛机');
        if (data.cId == 142) {
           deviceNum = 'INCMD6'
        }else if(data.cId == 146){
           deviceNum = 'INCMD5'
        }else if (data.cId == 149) {
           deviceNum = 'INCMD2'
        }else if (data.cId == 151) {
           deviceNum = 'INCMD1'
        }
        getDeviceDetails(
          {
              deviceNum: deviceNum
          }).then((res)=>{
            this.destackerInfo = res.data
            this.destackerName = deviceNum
            this.componentShow = "destacker";
            this.modelOthers = true;
        })
      } else if (data.cType == "往复式输送升降机") {
        let deviceNum = ''
        if (data.cId == 320) {
          deviceNum = 'ELV1'
        }else if(data.cId == 319){
          deviceNum = 'ELV2'
        }else if (data.cId == 318) {
          deviceNum = 'ELV3'
        }else if (data.cId == 317) {
          deviceNum = 'ELV4'
        }else if(data.cId == 313){
          deviceNum = 'ELV5'
        }else if(data.cId == 321){
          deviceNum = 'ELV6'
        }
        getDeviceDetails(
          {
              deviceNum: deviceNum
          }).then((res)=>{
            this.hoistInfo = res.data
            this.hoistName = deviceNum
            this.componentShow = "hoist";
            this.modelOthers = true;
        })
      } else if (data.cType == "智能双向穿梭车") {
        getDeviceDetails(
          {
              deviceNum:'Car'+ data.cName.slice(11)
          }).then((res)=>{
            this.carName = 'Car' + data.cName.slice(11)
            this.componentShow = "suttleCar";
            this.modelOthers = true;
            this.carInfo = res.data   
        })
      } else if (data.cType == "快换电池装置") {
        let deviceNum = ''
        if (data.cId == 476) {
          deviceNum = 'Battary_Sation2'
        }else if(data.cId == 361){
          deviceNum = 'Battary_Sation1'
        }
        getDeviceDetails(
          {
              deviceNum: deviceNum
          }).then((res)=>{
            this.componentShow = "battery";
            this.modelOthers = true;
            this.battaryStationInfo = res.data   
            this.battaryStationName = deviceNum
        })
        
      }else if (data.cType == "链式输送机") {
        
        let deviceNum = ''
        if (data.cId.toString().substring(0,2) == "51") {
          deviceNum = 'InConvoyor' + data.cId
        }else if (data.cId.toString().substring(0,2) == "53") {
           deviceNum = 'OUTConvoyor' + data.cId
        }
        getDeviceDetails(
          {
              deviceNum: deviceNum
          }).then((res)=>{
            this.modelOthers = true;
            this.componentShow = "conveyor";
            this.conveyorInfo = res.data   
            this.conveyorName = deviceNum
        })
      }
    },
    /**
     * 详情弹窗
     */
    informationInfo(data,item) {
      if (data == "出库工单") {
        this.componentShow = "wireFeeder";
        this.modelOthers = true;
        this.outContent = this.orderList
      }else if (data == "入库工单") {
        this.componentShow = "inFeeder";
        this.modelOthers = true;
        this.inContent = this.enterList
      }else if (data == "库存消息") {
        this.componentShow = "lnventory";
        this.modelOthers = true;
        // this.inContent = this.enterList
      } else if (data == "各品牌库存情况") {
        this.componentShow = "lnventoryLeft";
        this.modelOthers = true;
        // this.inContent = this.enterList
      } else if (data == "消息提醒") {
        this.componentShow = "maintenanceRemindTable";
        this.modelOthers = true;
        // this.inContent = this.enterList
      } else if (data == "维保提醒") {
        if(item.keepName){
          this.componentShow = "maintenance";
          this.modelOthers = true;
          this.wbContent=item
        }else{
        this.componentShow = "maintenanceRemind";
          this.modelOthers = true;
          this.wxContent=item
        }
//          getfacManage({ type: 3,facCode: item.facCode
// ,id: item.id
// ,mark:1}).then((res) => {
//                 console.log("res.data",res.data)
             
//             });
      }
    },
    getCloseStatus(status) {
      this.hideBoxShow = true
      this.closeStatus = status;
      // if (status == 1) {
      //   this.btnPic[0] = require("@/assets/images/homeActive.png");
      //   this.btnPic[1] = require("@/assets/images/battery.png");
      // }
    //   if (status == 2) {
    //     this.btnPic[0] = require("@/assets/images/homeActive.png");
    //     this.btnPic[2] = require("@/assets/images/equipment.png");
    //   }
    //   if (status == 3) {
    //     this.btnPic[0] = require("@/assets/images/homeActive.png");
    //     this.btnPic[1] = require("@/assets/images/productionInformation.png");
    //   }
    //   if (status == 4) {
    //     this.btnPic[0] = require("@/assets/images/homeActive.png");
    //     this.btnPic[3] = require("@/assets/images/operationMG.png");
    //   }
    },
    handleActive(item, e) {
      this.hideBoxShow = false
      this.ins = item;
      this.btnPic = [
        // require("@/assets/images/home.png"),
        // require("@/assets/images/battery.png"),
        // require("@/assets/images/stock.png"),
        // require("@/assets/images/productionInformation.png"),
        // require("@/assets/images/equipment.png"),
        // require("@/assets/images/operationMG.png"),
      ];
      if (item == 0) {
        // this.btnPic[item] = require("@/assets/images/homeActive.png");
      } 
      // else if (item == 1) {
      //   this.componentShow = "batteryManagement";
      //   this.modelOthers = true;
      //   this.btnPic[item] = require("@/assets/images/batteryActive.png");
      // } 
      else if (item == 2) {
        this.componentShow = "deviceManagement";
        this.modelOthers = true;
        // this.btnPic[item] = require("@/assets/images/equipmentActive.png");
      } else if (item == 1) {
        this.componentShow = "productionInformation";
        this.modelOthers = true;
        // this.btnPic[
        //   item
        // ] = require("@/assets/images/productionInformationActive.png");
      } else if (item == 3) {
        this.componentShow = "operationMaintenance";
        this.modelOthers = true;
        // this.btnPic[item] = require("@/assets/images/operationMGActive.png");
      }
      // else if (item == 2) {
      //   this.btnPic[item] = require("@/assets/images/stockActive.png");
      // } 
      // else if (item == 3) {
      //   this.componentShow = "deviceManagement";
      //   this.modelOthers = true;
      //   this.btnPic[item] = require("@/assets/images/equipmentActive.png");
      // } else if (item == 4) {
      //   this.componentShow = "productionInformation";
      //   this.modelOthers = true;
      //   this.btnPic[
      //     item
      //   ] = require("@/assets/images/productionInformationActive.png");
      // } else if (item == 5) {
      //   this.componentShow = "operationMaintenance";
      //   this.modelOthers = true;
      //   this.btnPic[item] = require("@/assets/images/operationMGActive.png");
      // }
      this.$forceUpdate();
    },
    // 库存消息
    menusInit(arr) {
      let domechart = document.getElementById("menusBar");
      let myCharts = echarts.init(domechart);
      var datapictorialBar = arr;
      var pictorialBarColor = [" #155b5b", " #16485a ", "#41362d"];
      // 最大值
      var maxList = Math.max.apply(null, arr) + 10;
      console.log(maxList, datapictorialBar, ",,,maxList");
      let option = {
        grid: {
          top: 18,
          bottom: 18,
          left: 15,
          right: 20,
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            show: true,
            type: "category",
            data: ["入库中", "出库中","实箱","空箱",  ],
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#ffffff",
              fontSize: 14,
              inside: true,
              padding: [-45, 0, 0, -10],
              align: "left",
            },
          },
          {
            show: true,
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "销量",
            type: "bar",
            barWidth: 20, // 柱图宽度
            barGap: 36,
            data: [maxList, maxList, maxList, maxList],
            itemStyle: {
              normal: {
                //这里设置每个柱子颜色不一样
                color: "rgba(0, 153, 145, 0)",
                borderColor: "#cca272",
                borderWidth: 1,
                borderType: "solid",
              },
            },
          },
          {
            // 值分隔
            type: "pictorialBar",
            colorBy: "data",
            label: {
              //数据显示的位置
              show: true, //数值是否显示
              position: "right", //数值相对于柱状图显示的位置
              offset: [-30, -18],
              fontSize: 18,
              fontWeight: "bold",
              color: "#155b5b",
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  // 定义一个颜色数组colorList
                  var colorList = [
                    ["#1afbd3", "#155b5b"],
                    ["#19a1cc", "#16485a"],
                    ["#19a1cc", "#16485a"],
                    ["#ec8d41", "#41362d"],
                  ];
                  var colorItem = colorList[params.dataIndex];
                  return new echarts.graphic.LinearGradient(
                    1,
                    0,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: colorItem[0],
                      },
                      {
                        offset: 1,
                        color: colorItem[1],
                      },
                    ],
                    false
                  );
                },
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 1,
            symbol: "roundRect",
            symbolClip: true,
            symbolSize: [8, 18],
            symbolPosition: "start",
            symbolOffset: [1, 0],
            // symbolBoundingData: this.total,
            data: datapictorialBar,
            width: 13,
            z: 0,
            zlevel: 3,
          },
        ],
      };
      myCharts.setOption(option);
    },
    //菜单显示
    isShowBtnMore() {
      this.isShowBtn = false;
      window.setTimeout((e) => {
        this.isShowBtn1 = true;
      }, 1100);
    },
    isShowBtnMore1() {
      this.isShowBtn1 = false;
      this.isShowBtn = true;
    },
    //隐藏箱子
    hideBox(){
        this.$refs.htModels.handleFirstBox();
    }
  },
  components: {
    // echars,
    // echarts1,
    // echarts2,
    // HomeLeft
    // home,
    // equipmentManage,
    // batteryManagement, // 电池管理弹窗
    // productionInformation, // 生产信息弹窗
    // deviceManagement, // 设备信息弹窗
    // operationMaintenance, // 运维指导弹窗
    // container, // 货箱弹窗
    // palletizer, // 码垛机弹窗
    // packingStation, // 装箱站弹窗
    // destacker, // 拆垛机弹窗
    // hoist, // 提升机弹窗
    // suttleCar, // 穿梭车弹窗
    // battery, //电池设备弹窗
    // wireFeeder, // 出库工单弹窗
    // inFeeder,//入库工单弹窗
    // lnventory,
    // equipmentInspection, //设备巡检弹窗
    // maintenance, //维保提醒
    // maintenanceRemind,
    // lnventoryLeft,
    // maintenanceRemindTable,
    // conveyor,// 输送机弹窗
  },
};
</script>
<style>
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
