screenFront/src/views/SewingBift/index.vue

<!--
 * @FilePath: \gitscreenFront\src\views\MicrofactoryDev\index.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-03-10 09:15:58
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div :class="$style['container']">
    <div class="header">
      <div class="title">
        <header2
          ref="headerref"
          :width="'100%'"
          :height="'100px'"
          :title="'缝纫设备物联监控平台'"
          :titleTip="''"
          :typeFun="['time']"
          :alarmType="['micro']"
        >
        </header2>
        <!-- <div class="left">
          <dv-decoration-9 style="width: 100px; height: 100px"
            >66%</dv-decoration-9
          >
        </div>
        <div class="right">
          <dv-decoration-11 style="width: 200px; height: 60px"
            >可用性:80%</dv-decoration-11
          >
        </div> -->
      </div>
    </div>
    <div class="content" ref="Acontent">
      <el-row>
        <el-col :span="24">
          <top :width="size.oWidth" :height="size.oHeight"></top>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <bottom :width="size.oWidth" :height="size.oHeight"></bottom>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import header2 from "@/components/headerBox/header2.vue";
import { calcWH } from "@/components/ts/selfAdaption";
import top from "./content/top.vue";
import bottom from "./content/bottom.vue";
import { onMounted, onUnmounted, reactive, ref } from "vue";
import { getInfoOfMiniatureFactoryData,getStatusCountsOfMiniatureFactoryData,getSewingTimeData,getPresserFootHistogramData,getCuttingLineHistogramData,getActivationData } from "./status/js/result.js";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { useMicrofactoryDevStore } from "@/store/module/MicrofactoryDev";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useMicrofactoryDevStore();
// let titleTip = [
//   {
//     color: "rgb(32, 174, 197)",
//     name: "在线",
//   },
//   {
//     color: "#797979",
//     name: "离线",
//   },
// ];
let Acontent = ref();
let headerref=ref()
let time = ref(null);
function WH(div: HTMLElement) {
  let a = calcWH(div.offsetHeight, div.offsetWidth, 2, 1, 0);
  size.oWidth = a.oWidth;
  size.oHeight = a.oHeight;
}
let size = reactive({
  oWidth: 0,
  oHeight: 0,
});
function getWebsocket(val) {
  // headerref.value.HeadergetWebsocket(val)
  try {
    let data = JSON.parse(val);
    //稼动率
    // if (data.type == "Activation") {
    //   if(!store.Activation) return
    //   store.changedata(data.msg,'Activation')
    // }
    // if(data.type=="SewingTime"){
    //   if(!store.SewingTime) return
    //   store.changedata(data.msg,'SewingTime')
    // }
    // if(data.type=="PresserFootHistogram"){
    //   if(!store.PresserFoot) return
    //   store.changedata(data.msg,'PresserFoot')
    // }
    // if(data.type=="CuttingLineHistogram"){
    //   if(!store.CuttingLine) return
    //   store.changedata(data.msg,'CuttingLine')
    // }
    // if(data.type=="StatusCountsOfMiniatureFactory"){
    //   if(!store.SewingTime) return
    //   store.setGateway(data.msg)
    // }
    // if(data.type=="InfoOfMiniatureFactory"){
    //   // if(!store.SewingTime) return
    //   store.setDevList(data.msg)
    // }
  } catch (err) {}
}
function errWebsocket(val) {
  headerref.value?headerref.value.HeadererrWebsocket(val):''
  // console.log(val);
}
//获取设备列表数据
function getInfoOfMiniatureFactoryDatafun() {
  let result: any = getInfoOfMiniatureFactoryData;

  if (result.code == 200) {
    store.setDevList(result.data);
  }
}
//获取微工厂网关状态及在线、离线设备数量
function getStatusCountsOfMiniatureFactoryDatafun() {
  let result: any = getStatusCountsOfMiniatureFactoryData;

  if (result.code == 200) {
    store.setGateway(result.data);
  }
}
//微工厂压脚柱状图
function getPresserFootHistogramDatafun() {
  let result: any = getPresserFootHistogramData;

  if (result.code == 200) {
    store.setPresserFoot(result.data);
  }
}
//微工厂剪线柱状图
function getCuttingLineHistogramDatafun() {
  let result: any = getCuttingLineHistogramData;

  if (result.code == 200) {
    store.setCuttingLine(result.data);
  }
}
//微工厂设备缝纫时间
function getSewingTimeDatafun() {
  let result: any = getSewingTimeData;

  if (result.code == 200) {
    store.setSewingTime(result.data);
  }
}
//微工厂稼動率
function getActivationDatafun() {
  let result: any = getActivationData;

  if (result.code == 200) {
    store.setActivation(result.data);
  }
}
onMounted(() => {
  let contentBox = Acontent.value;
  // let Timedombox=Timedom.value
  WH(contentBox);
  window.addEventListener("resize", () => {
    if (time.value) {
      clearTimeout(time.value);
      time.value = null;
    }
    time.value = setTimeout(() => {
      WH(contentBox);
    }, 1000);
  });
  getStatusCountsOfMiniatureFactoryDatafun()
  getInfoOfMiniatureFactoryDatafun()
  getSewingTimeDatafun()
  getPresserFootHistogramDatafun()
  getCuttingLineHistogramDatafun()
  getActivationDatafun()
  connectWebsocket(null, null, getWebsocket, errWebsocket);
});
onUnmounted(() => {
  closeWebsocket();
  clearTimeout(time);
  store.resetData();
});
</script>

<style module>
.container {
  height: 1080px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
}
</style>
<style scoped>
.title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.title > h1 {
  font-size: 30px;
  position: absolute;
  top: 10px;
}
.title > .left {
  position: absolute;
  left: 100px;
  bottom: 10px;
}
.title > .right {
  position: absolute;
  right: 100px;
  bottom: 50px;
}
/* .ov{
    width: 150px;
    height: 150px;
    overflow: hidden;
} */
.header {
  position: relative;
}
.header p {
  position: absolute;
  right: 50px;
  bottom: 20px;
  font-size: 20px;
}
.content {
  width: 100%;
  --header: 100px;
  height: calc(1080px - var(--header));
}

</style>
<style>
body {
 
  /* --content:calc(100vh - var(--header)) */
  overflow: hidden !important;
  -ms-overflow-style: none; /* IE + Edge */
  scrollbar-width: none; /* Firefox */
}
::-webkit-scrollbar {
  display: none;
}
</style>