<!--
 * @FilePath: index.vue
 * @Author: zz
 * @Date: 2024-07-18 17:18:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-07-20 17:23:36
 * @Descripttion: 
-->
<template>
  <div class="container">
    <div class="header">
      <div class="title">
        <header3
          ref="headerref"
          :width="'100%'"
          :height="'100px'"
          :title="title"
          :titleTip="[]"
          :typeFun="['time', 'comback']"
          :alarmType="[]"
        ></header3>
      </div>
    </div>
    <div class="border-box">
      <dv-border-box-1 class="box-left" style="width: 30%"
        ><h2 class="title2">设备运行</h2>
        <LeftTop :data="ringData" :title="'设备实时状态'"></LeftTop>
        <LeftBottom :tipList="tipList"></LeftBottom>
      </dv-border-box-1>

      <dv-border-box-1 class="box-center" style="width: 50%"
        ><h2 class="title2">设备绩效</h2>
        <CenterTop :data="gaugeData"></CenterTop>
        <Center :data="lineData"></Center>
        <CenterBottom :data="prodData" :title="'当日生产情况'"></CenterBottom>
      </dv-border-box-1>

      <dv-border-box-1 class="box-right" style="width: 30%"
        ><h2 class="title2">设备信息</h2>
        <Right
          :deviceList="deviceList"
          :comList="comList"
          :CurList="CurList"
          :communication="communication"
          :deviceStatus="deviceStatus"
        ></Right>
      </dv-border-box-1>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  reactive,
  onMounted,
  onUnmounted,
  getCurrentInstance,
  watch,
  onUpdated,
  computed,
} from "vue";
import header3 from "./../../components/headerBox/header3.vue";
import LeftTop from "./components/LeftTop.vue";
import LeftBottom from "./components/LeftBottom.vue";
import CenterTop from "./components/CenterTop.vue";
import { useRoute } from "vue-router";
import Center from "./components/Center.vue";
import CenterBottom from "./components/CenterBottom.vue";
import Right from "./components/Right.vue";
import {
  reqdevicebyid,
  reqtelectricity,
  reqproinfo,
  reqfaultinfo,
  reqstopinfo,
  reqtalarm,
} from "@/http/changHao";
import { caozuomoshi, yunxingmoshi } from "./config.js";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
let route = useRoute();
let device_id = route.params.id;
// console.log(device_id, "device_id");
let timer = null;
let devnum = reactive({
  on: 0,
  off: 0,
  wait: 0,
});
let title = ref("设备云眼");
let ringData = ref([
  { key: "a046", name: "运行时长", value: "5" },
  { key: "a036", name: "故障时长", value: "5" },
  { key: "a044", name: "停机时长", value: "5" },
  { key: "idletime", name: "空闲时长", value: "5" },
  { key: "stoptime", name: "急停时长", value: "5" },
]);

// let deviceList = ref([]);
// let comList = ref([]);
// let CurList = ref([]);
let communication = ref(5);
let deviceStatus = ref(0);

let deviceList = ref([
  { key: "devicenum", label: "设备编号", value: " F-20240723456111" },
  { key: "serialnumber", label: "设备序列号", value: "iFc023456789154" },
  { key: "description", label: "设备描述", value: "1600立车" },
  { key: "modelnumber", label: "设备型号", value: "Series" },
]);
function getData() {
  setTimeout(() => {
    prodData.value = [
      {
        procedurename: "0",
        knifenum: "0",
        pronum: "0",
        operate: "0",
        run: "0",
        machining: "1.0",
        axisstatus: 0,
        processingtime: "0",
      },
    ];
  }, 0);
}
const comList = ref([
  { key: "a017", label: "主轴伺服温度", unit: "℃", value: "E-2" },
  { key: "a082", label: "累计待机时长", unit: "分钟", value: "iF" },
  { key: "a021", label: "X轴DC电压", unit: "V", value: "16" },
  { key: "a085", label: "累计上电时长", unit: "分钟", value: "Ser" },
  { key: "a022", label: "Y轴DC电压", unit: "V", value: "E-2" },
  { key: "a006", label: "主轴转速", unit: "R/min", value: "iF" },
  { key: "a023", label: "Z轴DC电压", unit: "V", value: "16" },
  { key: "a007", label: "进给速度", unit: "mm/min", value: "589" },
  { key: "a083", label: "累计故障时长", unit: "秒", value: "789" },
  { key: "a084", label: "累计运行时长", unit: "分钟", value: "524" },
]);
const CurList = ref([
  { key: "aphasev", label: "A相电压", unit: "V", value: "6.0" },
  { key: "aphasea", label: "A相电流", unit: "A", value: "8" },
  { key: "bphasev", label: "B相电压", unit: "V", value: "2" },
  { key: "bphasea", label: "B相电流", unit: "A", value: "3" },
  { key: "cphasev", label: "C相电压", unit: "V", value: "5" },
  { key: "cphasea", label: "C相电流", unit: "A", value: "4" },
]);
// }

// 模设备告警数据
const tipList = ref([{ name: "设备A", alarmcode: "001", alarminfo: "温度过高" }]);
// 仪表盘数据
let gaugeData = ref([
  { key: "utilizationRate", name: "稼动率", value: "46.9" },
  { key: "a006", name: "主轴转速", value: "91.1" },
  { key: "a007", name: "进给速度", value: "31.5" },
]);

// 折线图数据日耗电曲线
let lineData = ref({
  y: [120, 135, 101, 134, 90, 230, 210],
  x: ["07-05", "07-06", "07-07", "07-08", "07-09", "07-10", "07-11"],
});
// 生产情况数据
let prodData = ref([]);
let deviceinfo = ref({});

// 设备信息接口数据
function getdevicebyid() {
  reqdevicebyid({ id: device_id }).then((res: any) => {
    if (res.code == 0) {
      title.value = res.data.name;
      deviceList.value = [
        { key: "devicenum", label: "设备编号", value: res.data.devicenum },
        { key: "serialnumber", label: "设备序列号", value: res.data.serialnumber },
        { key: "description", label: "设备描述", value: res.data.description },
        { key: "modelnumber", label: "设备型号", value: res.data.modelnumber },
      ];
    }
  });
}

//耗电量接口
function getelectricity() {
  reqtelectricity({ id: device_id }).then((res: any) => {
    if (res.code == 0) {
      lineData.value.x = res.data.x;
      lineData.value.y = res.data.y;
    }
  });
}

// 生产情况接口
// function getproinfo() {
//   reqproinfo({ id: device_id }).then((res: any) => {
//     if (res.code == 0) {
//       prodData.value = res.data;
//     }
//   });
// }
// 设备告警接口
function getalarm() {
  reqtalarm({ id: device_id }).then((res: any) => {
    if (res.code == 0) {
      tipList.value = res.data;
    }
  });
}
// 故障时长接口
function getstopinfo() {
  reqstopinfo({ id: device_id }).then((res: any) => {
    if (res.code == 0) {
      ringData.value = ringData.value.map((item) => {
        if (item.key == "a036") {
          item.value = res.data.alltime;
        }
        if (item.key == "stoptime") {
          item.value = res.data.allstoptime;
        }
        return item;
      });
    }
  });
}

let a036 = 0;
//socket
function getWebsocket(val) {
  try {
    let data = JSON.parse(val);
    if (data.type == "deviceinfo" && data.msg.id == device_id) {
      let obj = data.msg;
      if (obj.a036 != a036) {
        getalarm();
        a036 = obj.a036;
      }
      // 运行状态
      ringData.value = ringData.value.map((item) => {
        item.value = obj[item.key];
        // item.key
        return item;
      });
      // 仪表盘
      gaugeData.value = gaugeData.value.map((item) => {
        item.value = obj[item.key];
        return item;
      });
      // 当日生产情况
      prodData.value = [
        {
          procedurename: obj.a039,
          knifenum: obj.a008,
          pronum: obj.a005,
          operate: caozuomoshi[obj.a032] || "未知状态",
          run: yunxingmoshi[obj.a033] || "未知状态",
          machining: obj.cycletimeInMinutes,
          axisstatus: obj.a034,
          processingtime: obj.a048,
        },
      ];
      // 通讯状态
      communication.value = obj.a041;

      let tempcomList = comList.value.map((item) => {
        item.value = obj[item.key];
        return item;
      });
      comList.value = tempcomList;

      // 设备状态
      deviceStatus.value = obj.a038;
      // 电压电流
    }
    if (data.type == "electinfo" && data.msg.id == device_id) {
      let obj = data.msg;

      CurList.value = CurList.value.map((item) => {
        item.value = obj[item.key];
        return item;
      });
    }
  } catch (err) {
    console.log(err);
  }
}
function errWebsocket(val) {
  // console.log(val);
}
onMounted(() => {
  getdevicebyid();
  getelectricity();
  // getData();
  // getproinfo();
  getalarm();
  getstopinfo();
  timer = setInterval(() => {
    getstopinfo();
    getalarm();
  }, 1800000);
  connectWebsocket(null, null, getWebsocket, errWebsocket);
});
onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped>
.container {
  height: 1080px;
  width: 1920px;
  color: #ffffff;
  background: url("./../../assets/img/CHBJ.png") no-repeat center center / 100% 100%;
  background-color: #0e0e0e;
  position: relative;
}
.header {
  height: 100px;
  width: 1920px;
}
.border-box {
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.title2 {
  font-size: 20px;
  font-weight: 600;
}
</style>
