<template>
  <Nav />
  <div class="unity">
    <iframe src="model/index.html" id="iframeRef" frameborder="0"></iframe>
  </div>
  <div class="home">
    <div class="home-left">
      <!-- 设备状态 -->
      <div class="home-title">
        <span class="home-title-font"> 设备状态 </span>
        <!-- <span class="home-title-more"> </span> -->
      </div>
      <div class="home-left-device">
        <div
          class="home-left-device-box"
          v-for="(s, i) in deviceList"
          :key="'d' + i"
        >
          <img :src="s.deviceImg" alt="" />
          <div>
            <p>{{ s.deviceStatus }}</p>
            <span :style="s.color">{{ s.deviceNum }}</span>
          </div>
        </div>
      </div>
      <!-- 各品牌库存情况 -->
      <div class="home-title">
        <span class="home-title-font"> 各品牌库存情况 </span>
        <span class="home-title-more" @click="brandShow = true"> </span>
      </div>
      <div class="home-left-brand" id="brand">
        <div
          v-for="(item, index) in brandList"
          :key="'brand' + index"
          class="item"
        >
          <div class="home-left-brand-title">
            <span>{{ item.name }}</span
            ><span class="pct"
              >{{ item.stockNum
              }}<span class="kg"
                >箱
                <span>
                  &nbsp; {{ formatNumber(item.weight)
                  }}<span class="kg">公斤</span></span
                >
              </span>
            </span>
          </div>
          <div class="home-left-brand-progress">
            <div
              class="home-left-brand-bg"
              :style="'width:' + item.weightPercent + '%'"
            ></div>
          </div>
        </div>
      </div>
      <!-- 故障提醒 -->
      <div class="home-title">
        <span class="home-title-font"> 故障提醒 </span>
        <span class="home-title-more" @click="openMsg"> </span>
      </div>
      <div class="home-left-messageReminder">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in messageReminder"
            :key="index"
          >
            <p>{{ activity.msg }}</p>
            <p class="home-left-messageReminder-data">
              <span
                style="color: rgba(148, 219, 255, 1)"
                class="home-left-messageReminder-font"
                >{{ activity.reminderMsg }}</span
              >
              <span style="color: rgba(192, 192, 192, 1)">{{
                activity.date
              }}</span>
            </p>
          </el-timeline-item>
        </el-timeline>
      </div>
      <!-- 搜索框 -->
      <div class="home-left-search">
        <el-input
          v-model="searchData"
          class="w-50 m-2"
          placeholder="请输入搜索内容"
          :suffix-icon="Search"
          @change="searchCar"
        />
      </div>
      <div class="home-btn-reset" @click="resetUnity">刷新</div>
    </div>
    <div class="home-right">
      <!-- 失活二层箱子，激活一层箱子    重新加载三维场景 -->
      <div class="home-btn">
        <div
          class="home-btn-unity"
          v-if="unityBoxShow"
          @click="unityBoxHandle(false)"
        >
          {{ unityBtn }}
        </div>
      </div>
      <!-- 库存消息 -->
      <div class="home-title">
        <span class="home-title-font"> 库存消息 </span>
        <span class="home-title-more" @click="openInventoryNews"> </span>
      </div>
      <div class="home-right-inventoryNews" id="inventoryNews"></div>
      <!-- 出库工单 -->
      <div class="home-title">
        <span class="home-title-font"> 出库工单 </span>
        <span
          class="home-title-more"
          @click="
            inOutShow = true;
            inOutTitle = '出库工单';
          "
        >
        </span>
      </div>
      <div class="home-right-outboundWorkOrder">
        <div class="home-right-outboundWorkOrder-content">
          <div
            class="home-right-outboundWorkOrder-box"
            v-for="(item, index) in outboundWorkOrder"
            :key="'out' + index"
          >
            <div class="left-plate">
              <img :src="item.pic" alt="" />
              <p class="name">喂丝机{{ item.feederId }}号</p>
            </div>
            <div class="right-plate">
              <p class="name">{{ item.itemDesc }}</p>
              <!-- <p class="id">{{ item.currentBatch }}</p> -->
              <p class="start-time">
                <!-- 开始时间:<span> {{ item.creatTime }}</span> -->
                剩余箱数：<span>{{ item.leftNum }}箱</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 入库工单 -->
      <div class="home-title">
        <span class="home-title-font"> 入库工单 </span>
        <span
          class="home-title-more"
          @click="
            inOutShow = true;
            inOutTitle = '入库工单';
          "
        >
        </span>
      </div>
      <div class="home-right-inboundWorkOrder">
        <div class="home-right-inboundWorkOrder-content">
          <div
            class="home-right-inboundWorkOrder-box"
            v-for="(item, index) in inboundWorkOrder"
            :key="'out' + index"
          >
            <div class="left-plate">
              <img :src="item.pic" alt="" />
              <p class="name">装箱站1号</p>
            </div>
            <div class="right-plate">
              <p class="name">{{ item.itemDesc }}</p>
              <p class="start-time">
                计划重量：<span>{{ item.planWeight }}公斤</span>
              </p>
              <p class="start-time">
                入库重量：<span>{{ item.inWeight }}公斤</span>
              </p>
              <p class="start-time">
                入库箱数：<span>{{ item.inNum }}箱</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-bottom">
      <div class="home-bottom-put">
        <span></span>
      </div>
      <ul>
        <li
          :style="`background-image:url(${
            asideListIndex === index ? item.select : item.default
          })`"
          v-for="(item, index) in asideList"
          :key="'key' + index"
          @click="asideToggle(index)"
        ></li>
      </ul>
    </div>
  </div>
  <!-- 故障提醒弹窗 -->
  <messageDialog v-if="isOpen" :mqttData="mqttList" @closeMsg="closeMsg" />
  <!-- 各品牌库存弹窗 -->
  <brand v-if="brandShow" @closeBrand="closeBrand" />
  <!-- 库存消息弹窗 -->
  <inventoryNews
    @rowClickHandle="unityBoxHandle"
    v-if="inventoryNewsShow"
    @close="closeInventoryNews"
  />
  <!-- 出入库信息弹窗 -->
  <inOutBound
    v-if="inOutShow"
    :title="inOutTitle"
    :data="inOutTitle === '出库工单' ? outboundWorkOrder : inboundWorkOrder"
    @close="closeInOut"
  ></inOutBound>
  <!-- 设备管理弹窗 -->
  <equipmentManagement v-if="asideListIndex === 1" @closeDialog="closeDialog" />
  <!-- 生产信息弹窗 -->
  <devData v-if="asideListIndex === 0" @closeDialog="closeDialog" />
  <!-- 电池管理弹窗 -->
  <batteryManagement v-if="asideListIndex === 2" @closeDialog="closeDialog" />
  <!-- 运维指导弹窗 -->
  <OPEX v-if="asideListIndex === 3" @closeDialog="closeDialog" />
</template>
<script setup>
import Nav from "@/views/home/components/layout.vue";
import devData from "./components/aside/devData"; //生产信息
import equipmentManagement from "./components/aside/equipmentManagement"; // 设备管理
import batteryManagement from "./components/aside/batteryManagement";
import OPEX from "./components/aside/OPEX"; //运维管理

import brand from "./components/homeDialog/brand"; //各品牌库存管理
import messageDialog from "./components/homeDialog/messageDialog"; //消息提醒
import inventoryNews from "./components/homeDialog/inventoryNews"; //库存消息
import inOutBound from "./components/homeDialog/inOutBound";
import { Search } from "@element-plus/icons-vue"; //出入库工单
import * as echarts from "echarts";
import { ref, onMounted, proxyRefs, getCurrentInstance } from "vue";
import getPath from "@/utils/getPath";
import mqtt from "mqtt";
import {
  getEquipStatus,
  getInventoryInfo,
  getCarErrorIn12,
  getOverTransmission,
  getInOrder,
  getOutOrder,
  getLocInfo,
} from "@/api/home";
import { fontSize } from "@/utils/common";
const unityBoxShow = ref(false);
// 重新加载三维场景
function resetUnity() {
  unityBoxShow.value = false;
  document.querySelector("#iframeRef").src = "model/index.html";
}
const unityBtn = ref("隐藏二层箱子");
const unityNum = ref(0);
// 与三维箱子进行交互
function unityBoxHandle(val) {
  if (val) {
    inventoryNewsShow.value = false;
    unityBoxShow.value = true;
    unityNum.value = 0;
    unityBtn.value = "隐藏二层箱子";
  } else {
    unityNum.value++;
    if (unityNum.value % 2 != 0) {
      unityBtn.value = "展示二层箱子";
    } else {
      unityBtn.value = "隐藏二层箱子";
    }
  }
  document
    .querySelector("#iframeRef")
    .contentWindow.unityBoxHandle(val);
}
const { proxy } = getCurrentInstance();
// 设备状态列表
const deviceList = ref([
  {
    deviceStatus: "运行设备",
    deviceImg: getPath.operatingEquipment1,
    color: "color:rgba(164, 255, 236, 1)",
  },
  {
    deviceStatus: "设备故障",
    deviceImg: getPath.equipmentFailure1,
    color: "color:rgba(255, 244, 166, 1)",
  },
]);
// 绘制各品牌库存情况
function darwBrandChart(data) {
  let yData = [
    "兰州(硬珍品)烟丝",
    "兰州(长嘴)烟丝",
    "兰州(细支珍品)烟丝",
    "兰州(硬吉祥)烟丝",
  ];
  let xData = [30, 28, 32, 32];
  // params.forEach((item) => {
  //   yData.push(item.Ranking + "  " + item.DeviceName);
  //   xData.push(item.EH);
  // });
  if (data) {
    yData = Object.keys(data[1]);
    xData = Object.values(data[1]).map((el) => {
      return el * data[0];
    });
    console.log(xData);
  }
  let myChart = echarts.init(document.getElementById("brand"));
  let option = {
    grid: {
      left: "3%",
      right: "5%",
      bottom: "-2%",
      top: "8%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        return (
          params[0].name +
          "<br/>" +
          "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
          params[0].seriesName +
          " : " +
          parseInt((params[0].value / data[0]) * 100) +
          "%"
        );
      },
    },
    xAxis: {
      show: false,
      type: "value",
    },
    // dataZoom: [
    //   {
    //     type: "inside", // 支持内部鼠标滚动平移
    //     start: 25,
    //     end: 100,
    //     yAxisIndex: 0,
    //     zoomOnMouseWheel: false, // 关闭滚轮缩放
    //     moveOnMouseWheel: true, // 开启滚轮平移
    //     moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
    //   },
    // ],ontSize
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          padding: [0, 0, 10, -10],
          verticalAlign: "bottom",
          inside: true,
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: "0.875rem",
          },
          formatter: function (value, index) {
            return "{a|" + value + "}";
          },
          rich: {
            a: {
              width: 45,
              padding: [0, 0, 3, 0],
              fontSize: "0.875rem",
              // backgroundColor: {
              //   image: getImageUrl("../../assets/images/rank-bg.png"),
              // },
            },
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        // axisPointer: {
        //   show: true,
        // },
        data: yData,
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          padding: [0, -10, 10, 0],
          verticalAlign: "bottom",
          inside: true,
          textStyle: {},
          formatter: function (value) {
            return "{a|" + parseInt((value / data[0]) * 100) + "%}";
          },
          rich: {
            a: {
              fontSize: "16",
              color: "rgba(144, 218, 255, 1)",
              padding: [0, 6, 0, 0],
            },
          },
        },
        data: xData.slice(0, 5),
      },
    ],
    series: [
      {
        name: "百分比",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "rgba(25, 174, 250, 1)",
            },
            {
              offset: 1,
              color: "rgba(148, 219, 255, 1)",
            },
          ]),
        },
        barWidth: 8,
        data: xData.slice(0, 5),
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 10,
        barGap: "-115%",
        data: [data[0], data[0], data[0], data[0], data[0]],
        itemStyle: {
          color: "rgba(112, 112, 112, 0.23)",
        },
      },
    ],
  };
  myChart.setOption(option);
  // 添加 resize 事件处理程序
  window.addEventListener("resize", function () {
    myChart.resize(); // 调用 resize 函数进行自适应大小调整
  });
}
// 消息提醒
const messageReminder = ref([
  // {
  //   msg: "维修提醒",
  //   date: "2024-08-21 14:41:10",
  //   reminderMsg: "设备EWGAGAD需要维保",
  // },
  // {
  //   msg: "维修提醒",
  //   date: "2024-08-21 14:41:10",
  //   reminderMsg: "设备EWGAGAD需要维保",
  // },
  // {
  //   msg: "维修提醒",
  //   date: "2024-08-21 14:41:10",
  //   reminderMsg: "设备EWGAGAD需要维保",
  // },
]);
// 搜索框关联的搜索内容
const searchData = ref();
function searchCar() {
  let dom = document.querySelector("#iframeRef");
  let data = searchData.value;
  dom.contentWindow.openCar(data.toString());
  searchData.value = "";
}
// 库存消息的echarts
function drawInventoryNewsEcahrt(result) {
  console.log(result, "库存消息");
  // result.特殊空箱子 = 400
  // result.特殊实箱子 = 300
  let myChart = echarts.init(document.getElementById("inventoryNews"));
  var scaleData = [
    {
      name: "正在进行任务数",
      value: result.taskDoingNum,
      radius1: ["51%", "53%"],
    },
    {
      name: "实箱",
      value: result.fullBoxNum,
      radius1: ["59%", "60%"],
    },
    {
      name: "空箱",
      value: result.emptyBoxNum,
      radius1: ["67%", "68%"],
    },
    {
      name: "库存总量",
      value: result.inventoryNum,
      radius1: ["67%", "68%"],
    },
    {
      name: "批次数量",
      value: result.batchNum,
      radius1: ["67%", "68%"],
    },
  ];
  let index = 0;
  // for (let key in result) {
  //   scaleData.push({
  //     name: key,
  //     value: result[key],
  //   });
  //   index++;
  // }
  // let box = {
  //   name:'特殊箱子',
  //   value:,
  // }
  // 数据处理

  // scaleData.forEach((el,index) => {
  //   console.log(el);

  // });
  let box = {
    name: "特殊箱子",
    value: 0,
  };

  // for (let i = 0; i < scaleData.length; i++) {
  //   if (scaleData[i].name === "特殊空箱子") {
  //     box.value = box.value + scaleData[i].value;
  //     scaleData.splice(i, 1);
  //     i--;
  //   }
  //   if (scaleData[i].name === "特殊实箱子") {
  //     box.value = box.value + scaleData[i].value;
  //     scaleData.splice(i, 1);
  //     i--;
  //   }
  // }
  // console.log(scaleData);
  // box.radius1 =  [43 + (scaleData.length-1) * 8 + "%" + "", 45 + (scaleData.length-1)  * 8 + "%" + ""]
  if (box.value != 0) {
    scaleData.push(box);
  }
  scaleData.forEach((el, index) => {
    el.radius1 = [35 + index * 8 + "%" + "", 37 + index * 8 + "%" + ""];
  });
  var placeHolderStyle = {
    label: {
      show: false,
    },
    labelLine: {
      show: true,
    },
    color: "rgba(0, 0, 0, 0)",
    borderColor: "rgba(0, 0, 0, 0.2)",
    borderWidth: 2,
  };
  var seriesObj = [];
  var color = [
    "rgba(23, 151, 217, 1)",
    // "rgba(28, 238, 251, 1)",
    "rgba(255, 215, 0,1)",
    // "rgba(0, 245, 194, 1)",
    "rgba(255, 255, 224,1)",
    // "rgba(0, 245, 194, 1)",
    "rgba(28, 238, 251, 1)",
    "rgba(255, 192, 203,1)",
  ];
  for (var i = 0; i < scaleData.length; i++) {
    seriesObj.push({
      name: "",
      type: "pie",
      radius: scaleData[i].radius1,
      center: ["24%", "50%"],
      hoverAnimation: false,
      itemStyle: {
        normal: {
          label: {
            show: false,
            color: "#ddd",
          },
        },
      },
      data: [
        {
          value: scaleData[i].value,
          name: scaleData[i].name,
          itemStyle: {
            normal: {
              borderWidth: 2,
              borderColor: color[i],
            },
          },
        },
        {
          // value:scaleData[i].value,

          name: "",
          itemStyle: placeHolderStyle,
        },
      ],
    });
  }
  let option = {
    graphic: {
      /**
       * 【主要代码】图形中心展示图片
       */
      elements: [
        {
          type: "image",
          style: {
            image: getPath.homeIcon, // 图片地址
            width: fontSize(0.4),
            height: fontSize(0.4),
          },
          // left: '18.5%',
          left: "17.5%", // 【主要代码1】
          top: "center",
        },
      ],
    },
    color: color,
    tooltip: {
      show: false,
    },
    legend: {
      icon: "circle",
      orient: "vertical",
      x: "46%",
      y: "center",
      itemWidth: fontSize(0.07),
      itemHeight: fontSize(0.07),
      itemGap: fontSize(0.1),
      data: scaleData.map((el, index) => {
        return el.name;
      }),
      // itemStyle:{
      //   color:color
      // },
      show: true,
      textStyle: {
        color: "#fff",
        fontSize: "1rem",
        rich: {
          name: {
            color: "#fff",
            fontSize: "0.875rem",
          },
          val: {
            fontSize: ".875rem",
            textAlign: "right",
            // width: "40",
            padding: [0, 0, 0, 5],
            // color: color,
          },
        },
      },
      formatter: function (name) {
        let total = 0;
        for (var i = 0; i < scaleData.length; i++) {
          if (scaleData[i].name === name) {
            total = scaleData[i].value;
          }
        }
        return `{name|${name}} {val|${
          name == "库存总量" ? total + "公斤" : total
        }}`;
      },
    },
    toolbox: {
      show: false,
    },
    series: seriesObj,
  };
  myChart.setOption(option);
  // 添加 resize 事件处理程序
  window.addEventListener("resize", function () {
    myChart.resize(); // 调用 resize 函数进行自适应大小调整
    myChart.setOption({
      graphic: {
        /**
         * 【主要代码】图形中心展示图片
         */
        elements: [
          {
            type: "image",
            style: {
              image: getPath.homeIcon, // 图片地址
              width: fontSize(0.4),
              height: fontSize(0.4),
            },
            // left: '18.5%',
            left: "17.5%", // 【主要代码1】
            top: "center",
          },
        ],
      },
      legend: {
        icon: "circle",
        orient: "vertical",
        x: "60%",
        y: "center",
        itemWidth: fontSize(0.07),
        itemHeight: fontSize(0.07),
        itemGap: fontSize(0.1),
        data: scaleData.map((el) => {
          return el.name;
        }),
        show: true,
        textStyle: {
          color: "#fff",
          fontSize: "0.7rem",
          rich: {
            name: {
              color: "#fff",
              fontSize: "0.7rem",
            },
            val: {
              fontSize: ".7rem",
              textAlign: "right",
              // width: "40",

              color: color[i],
            },
          },
        },
        formatter: function (name) {
          let total = 0;
          for (var i = 0; i < scaleData.length; i++) {
            if (scaleData[i].name === name) {
              total = scaleData[i].value;
            }
          }
          return `{name|${name}} {val|${total}}`;
        },
      },
    });
  });
}
// 出库工单
const outboundWorkOrder = ref([
  // {
  //   name: "利群（长嘴）烟丝",
  //   id: "JB17225LQ（CZ）02",
  //   startTime: "08:21",
  //   pic: getPath.outDevice,
  //   picName: "S08喂丝机",
  // },
  // {
  //   name: "利群（长嘴）烟丝",
  //   id: "JB17225LQ（CZ）02",
  //   startTime: "08:21",
  //   pic: getPath.outDevice,
  //   picName: "S08喂丝机",
  // },
  // {
  //   name: "利群（长嘴）烟丝",
  //   id: "JB17225LQ（CZ）02",
  //   startTime: "08:21",
  //   pic: getPath.outDevice,
  //   picName: "S08喂丝机",
  // },
]);
// 入库工单
const inboundWorkOrder = ref([
  // {
  //   name: "利群（长嘴）烟丝",
  //   id: "JB17225LQ（CZ）02",
  //   startTime: "08:21",
  //   pic: getPath.inDevice,
  //   picName: "S08喂丝机",
  // },
  // {
  //   name: "利群（长嘴）烟丝",
  //   id: "JB17225LQ（CZ）02",
  //   startTime: "08:21",
  //   pic: getPath.inDevice,
  //   picName: "S08喂丝机",
  // },
  // {
  //   name: "利群（长嘴）烟丝",
  //   id: "JB17225LQ（CZ）02",
  //   startTime: "08:21",
  //   pic: getPath.inDevice,
  //   picName: "S08喂丝机",
  // },
]);

const asideList = ref([
  {
    default: getPath.devDefault,
    select: getPath.devSelect,
  },
  {
    default: getPath.deviceDefault,
    select: getPath.deviceSelect,
  },
  {
    default: getPath.batteryManagementDefault,
    select: getPath.batteryManagementSelect,
  },
  {
    default: getPath.operationDefault,
    select: getPath.operationSelect,
  },
]);
const asideListIndex = ref(-1);
function asideToggle(index) {
  asideListIndex.value = index;
}
// 关闭生产信息弹窗
// 关闭设备管理弹窗
function closeDialog(e) {
  asideListIndex.value = e;
}

// 各品牌库存情况
const brandShow = ref(false);
function closeBrand(boolean) {
  brandShow.value = boolean;
}
const isOpen = ref(false);
// 消息提醒弹窗
function closeMsg(boolean) {
  isOpen.value = boolean;
}
// 打开消息提醒弹窗
function openMsg() {
  isOpen.value = true;
}

const inventoryNewsShow = ref(false);
// 关闭库存消息弹窗
function closeInventoryNews(boolean) {
  inventoryNewsShow.value = boolean;
}
// 打开库存消息弹窗
function openInventoryNews() {
  inventoryNewsShow.value = true;
}
// 出入库工单显隐
const inOutShow = ref(false);
const inOutTitle = ref("");
function closeInOut(boolean) {
  inOutShow.value = boolean;
}
/*---------------------------接口方法 */
// 获取设备状态的接口方法
function getDeviceStatus() {
  getEquipStatus().then((res) => {
    deviceList.value.forEach((el) => {
      // if(el.deviceStatus)
      for (let key in res.result) {
        if (el.deviceStatus === key) {
          el.deviceNum = res.result[key];
        }
      }
    });
  });
}
const brandList = ref([]);
// 各品牌库存情况接口方法
function getBrandData() {
  getInventoryInfo().then((res) => {
    // darwBrandChart(res.result);
    // for (let key in res.result[1]) {
    //   brandList.value.push({
    //     pct: res.result[1][key],
    //     name: key,
    //   });
    // }
    brandList.value = res.result;
  });
}
// 消息提醒
async function getMessageReminder() {
  // await getCarErrorIn12().then((res) => {
  //   res.result.slice(0, 1).forEach((el) => {
  //     el.msg = "维修提醒";
  //     el.reminderMsg = el.facName + el.facCode + " 需要维修";
  //     el.date = el.errorDateTime;
  //     messageReminder.value.push(el);
  //   });
  // });
  await getOverTransmission().then((res) => {
    res.result.forEach((el) => {
      el.msg = "超时提醒";
      el.reminderMsg = el.itemDesc + el.palletNum + " 任务超时";
      el.date = el.startDate;
      messageReminder.value.push(el);
    });
  });
}
// 获取库存消息接口方法
function getInventory() {
  getLocInfo().then((res) => {
    drawInventoryNewsEcahrt(res.result);
  });
}
// 出库工单接口
function getOutboundWorkOrder() {
  getOutOrder().then((res) => {
    outboundWorkOrder.value = res.result;
    outboundWorkOrder.value.forEach((el) => {
      el.pic = getPath.outDevice;
    });
  });
}
// 入库工单接口
function getInboundWorkOrder() {
  getInOrder().then((res) => {
    inboundWorkOrder.value = res.result;
    inboundWorkOrder.value.forEach((el) => {
      el.pic = getPath.inDevice;
      el.inWeight = formatNumber(el.inWeight);
      el.planWeight = formatNumber(el.planWeight);
    });
  });
}
function formatNumber(num) {
  if (typeof num === "number" && !isNaN(num)) {
    // 确认输入参数为有效的数字
    if (Number.isInteger(num)) {
      return num; // 若是整数不做操作
    } else {
      return Number.parseFloat(num).toFixed(2); // 若是小数转换为浮点数并保留两位小数
    }
  } else {
    throw new Error("Invalid input"); // 非法输入时抛出错误
  }
}
const mqttList = ref([]);
// 接受mqtt数据
function realInfo(topic, message) {
  if (topic == "faults_now") {
    console.log("接收数据1", message);
    const utf8decoder = new TextDecoder();
    const u8arr = new Uint8Array(message);
    const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
    console.log("temp", temp);
    const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
    let list = [];
    msg.forEach((el) => {
      el.msg = "维修提醒";
      el.reminderMsg = el.facCode + " 需要维修";
      el.date = el.errorDateTime;
      list.push(el);
    });
    messageReminder.value = list;
    mqttList.value = msg;
    getMessageReminder(); //消息提醒
  }
}
onMounted(() => {
  getDeviceStatus(); //获取设备状态

  getBrandData(); //获取各品牌库存情况

  getInventory(); //库存消息

  getOutboundWorkOrder(); //出库工单
  getInboundWorkOrder(); //入库工单
  window.PubScribe(null, realInfo);
  // window.getMqttData = getMqtt;

  
});
</script>
<style scoped lang="scss">
.kg {
  font-size: 0.875rem;
  margin-left: 0.2rem;
}
.unity {
  width: 100%;
  height: 100%;
  position: fixed;
  iframe {
    width: 100%;
    height: 100%;
  }
}
.home-btn {
  position: absolute;
  left: -38%;
  top: 26%;
  &-unity{
    width: 6rem;
    font-size: 1rem;
    padding: 0.5rem;
    background-image: url("@/assets/images/home/unityBtn-D.png");
    background-size: 100% 100%;
    text-align: center;
    cursor: pointer;
  }
  > div:nth-child(2) {
    margin-top: 1.5rem;
  }
}
.home-btn-reset {
    width: 6rem;
    font-size: 1rem;
    padding: 0.5rem;
    margin-top: 1rem;
    background-image: url("@/assets/images/home/unityBtn-D.png");
    background-size: 100% 100%;
    text-align: center;
    cursor: pointer;
  }
.home {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-image: url("@/assets/images/home/home-bg.png");
  padding: vh(104) vw(20) 0 vw(20);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  // 标题栏
  &-title {
    background-image: url("@/assets/images/home/home-title.png");
    background-size: 100% 100%;
    height: vh(31);
    padding-left: vw(27);
    display: flex;

    justify-content: space-between;
    align-items: center;
    &-font {
      text-shadow: 0px 0px 6px #19aefa;
      font-family: "pangmen";
      font-size: 1.2rem;
      color: rgba(255, 255, 255, 1);
    }
    &-more {
      background-size: 100% 100%;
      background-image: url("@/assets/images/home/more.png");
      cursor: pointer;
      width: vw(52);
      height: vh(24);
    }
  }
  &-left,
  &-right {
    // background-color: rgba(6, 32, 59, 1);

    position: relative;
    z-index: 99;
    width: vw(320);
  }
  &-left {
    background-image: url("@/assets/images/home/左侧遮罩.png");
    background-size: 101%;
    // width: 22%;
    &-device {
      display: flex;
      height: vh(186);
      padding: vh(50) 0;
      box-sizing: border-box;
      justify-content: space-around;
      &-box {
        display: flex;
        img {
          width: vw(64);
          height: vh(90);
          margin-right: vw(10);
        }
        p {
          font-size: 1rem;
          margin-top: vh(15);
          margin-bottom: vh(5);
        }
        span {
          font-size: 1.5rem;
          font-weight: 700;
        }
      }
    }
    &-brand > div {
      margin-bottom: vh(24);
    }
    &-brand::-webkit-scrollbar {
      display: none;
    }
    &-brand {
      overflow-y: scroll;
      padding: vh(23) vw(10);
      box-sizing: border-box;
      height: vh(388);
      &-progress {
        background-color: rgba(112, 112, 112, 0.23);
        height: vh(8);
        width: 100%;
        position: relative;
      }
      &-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: vh(10);
        font-size: 0.875rem;
        .pct {
          font-size: 1rem;
          color: rgba(144, 218, 255, 1);
          font-weight: 700;
        }
      }
      &-bg {
        height: 100%;

        top: 0;
        left: 0;
        position: absolute;
        background: linear-gradient(79deg, #19aefa 0%, #94dbff 100%);
      }
    }
    &-messageReminder::-webkit-scrollbar {
      display: none;
    }
    &-messageReminder {
      height: vh(180);
      padding: vh(22) vw(12);
      overflow-y: scroll;
      box-sizing: border-box;
      &-data {
        font-size: 0.8rem;
        display: flex;
        justify-content: space-between;
      }
      &-font {
        width: vw(130);
      }
    }
    &-search {
      :deep(.el-input__inner) {
        height: vh(40);
        font-size: 1rem;
      }
      :deep(.el-input__wrapper) {
        background-image: url("@/assets/images/home/search-input.png");
        background-size: 100% 100%;
        box-shadow: none;
        border-radius: 0;
        background-color: transparent;
      }
    }
  }
  &-right {
    background-image: url("@/assets/images/home/right-bg.png");
    &-inventoryNews {
      height: vh(222);
    }
    &-outboundWorkOrder,
    &-inboundWorkOrder {
      height: vh(388);
      padding: vh(20) vw(20);
      // overflow-y: scroll;
      // display: flex;
      // flex-wrap: wrap;
      // align-content: space-between;
      box-sizing: border-box;
    }
    &-inboundWorkOrder {
      height: vh(205);
    }
    &-outboundWorkOrder-content::-webkit-scrollbar,
    &-inboundWorkOrder-content::-webkit-scrollbar {
      display: none;
    }
    &-outboundWorkOrder-content,
    &-inboundWorkOrder-content {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
    }
    &-outboundWorkOrder-box,
    &-inboundWorkOrder-box {
      margin-bottom: vh(15);
      display: flex;
      .left-plate {
        font-size: 0.75rem;
        text-align: center;
        margin-right: vw(30);
        img {
          width: vw(47);
          height: vh(41);
        }
        .name {
          width: vw(65);
        }
      }
      .right-plate {
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        font-size: 0.875rem;
        p {
          width: 100%;
        }
        .id {
          font-size: 1rem;
          color: rgba(144, 218, 255, 1);
          font-weight: 700;
          // margin-bottom: vh(5);
        }
        .start-time {
          span {
            font-size: 1rem;
            color: rgba(28, 238, 251, 1);
          }
        }
      }
    }
  }
}
// 底部
.home-bottom {
  width: 100%;
  position: fixed;
  bottom: vh(-24);
  left: 0;
  height: vh(64.5);
  // height: 41px;
  background-image: url("@/assets/images/home/bottom.png");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  &-put {
    width: vw(24);
    height: vh(16);
    background-image: url("@/assets/images/home/put.png");
    background-size: 100% 100%;
    position: absolute;
    top: vh(-30);
    cursor: pointer;
  }
  ul {
    position: absolute;
    bottom: vh(26);
    display: flex;
    li {
      cursor: pointer;
      width: vw(179);
      height: vh(38);
      background-size: 100% 100%;
    }
    li:nth-child(2) {
      margin: 0 0.625rem;
    }
    li:nth-child(3) {
      margin-right: 0.625rem;
    }
  }
}
:deep(.el-timeline-item__wrapper) {
  padding-left: 0.8rem;
}

:deep(.el-timeline) {
  padding-left: 0.3rem;
  box-sizing: border-box;
  padding-top: 0.5rem;
}

:deep(.el-timeline-item) {
  padding-bottom: 0.4rem;
  height: vh(70);
}

:deep(.el-timeline-item__content) {
  color: rgba(233, 244, 255, 1);
  font-size: 1rem;
  padding: 0 0 0 1.5rem;
  //background-image: url('@/assets/images/timeline.png');
  //background-size: 100% 100%;
  box-sizing: border-box;
}

:deep(.el-timeline-item__node--normal) {
  width: 2.1rem;
  height: 2.1rem;
  left: -10px;
  // top: .3rem;
  background-color: transparent;
  background-size: 100% 100%;
  border-radius: 0;
  background-image: url("@/assets/images/home/reminder.png");
}

:deep(.el-timeline-item__tail) {
  //border-color: #0a6594;
  border: 1px solid rgba(216, 216, 216, 1);
  height: 50%;
  top: 2rem;
  left: 6px;
}
</style>
