screenFront/src/views/Mechanics/indexNew.vue

<template>
  <div :class="$style['container']">
    <div class="header">
      <div class="title">
        <header2
          ref="headerref"
          :width="'100%'"
          :height="'100px'"
          :title="t('messages.Mechanics')"
          :titleTip="[]"
          :typeFun="['AbnormalData', 'time']"
          :alarmType="['machinefactory']"
        >
        </header2>
      </div>
    </div>

    <div class="content" ref="Acontent">
      <el-row class="layout" :gutter="20">
        <el-col :span="7" class="flex-left">
        <div style="width: 100%; height: 68%;">
          <border13>
                <div style="width: 100%;height: 100%;">
                  <h2 class="module-header">设备总览</h2> 
                  <div class="module-content">
                    <DevOverview :title="'设备总数'" :value="[112]"></DevOverview>
                    <DevOverview :title="'车间1'" :value="[null,12,12]"></DevOverview>
                    <DevOverview :title="'车间2'" :value="[null,12,12]"></DevOverview>
                    <DevOverview :title="'车间3'" :value="[null,12,12]"></DevOverview>
                    <DevOverview :title="'车间4'" :value="[null,12,12]"></DevOverview>
                    <DevOverview :title="'车间5'" :value="[null,12,12]"></DevOverview>
                  </div>
                </div>             
          </border13>
        </div>
        <div style="width: 100%; height: 28%;">
          <border13>
            <div  style="width: 98%;height: 100%;">
              <devFaultTip :title="'设备故障提醒'" :tipList="devFaultTipData"></devFaultTip>
            </div>
          </border13>
        </div>
      </el-col>
        <el-col :span="10"  class="flex-left">
        <div style="width: 100%; height: 18%;">
          <gateway :title="'物联网关状态'" :data="gatewayData"></gateway>
        </div>
        <div style="width: 100%; height: 78%;">
          <border13>
            <scrollBoard :config="scrollBoardConfig"></scrollBoard>
          </border13>
        </div>
        </el-col>
        <el-col :span="7" class="flex-left">
          <div style="width: 100%; height: 48%;">
            <border13>
              <ringChart :data="ringData"></ringChart>
            </border13>
        </div>
          <div style="width: 100%; height: 48%;">
          <border13>
            <div  style="width: 100%;height: 100%;">
              <devStatusTip :title="'设备状态累积时长'" :tipList="devStatusTipData"></devStatusTip>
            </div>
          </border13>
        </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
import header2 from "@/components/headerBox/header2.vue";
import border13 from '@/components/border/Border13.vue'
import DevOverview from "./components/DevOverview.vue";
import devFaultTip from "./components/devFaultTip.vue";
import devStatusTip from "./components/devStatusTip.vue";
import ringChart from "./components/ringChart.vue";
import scrollBoard from "./components/scrollBoard.vue";
import gateway from "./components/gateway.vue";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { ElRow, ElCol } from "element-plus";
import { gatcountsOfMachineryFactoryInStatusTime } from "@/http/Mechanics";
import { useMechanicsStore } from "@/store/module/Mechanics";
import { gatewayOfMachineryFactory,gatcountsOfMachineryFactory } from "@/http/Mechanics";
import { useI18n } from "vue-i18n";
let { t } = useI18n();
const store = useMechanicsStore();

let Acontent = ref();
let headerref = ref();

let DevOverviewData=ref([])
let devFaultTipData=ref([])
let devStatusTipData=ref([])
let ringData=ref([])
let scrollBoardConfig = reactive({
    header: ['序号', '机架号', '设备名称', '所属车间','设备状态','稼动率', '故障率'],
    headerBGC: 'rgb(52, 105, 243)',
    oddRowBGC: '#100c2a',
    evenRowBGC: '#100c2a',
    rowNum: 10,
    columnWidth: [80, 170, 120, 120, 120, 120, 120],
    align: ['center', 'center', 'center', 'center', 'center', 'center', 'center'],
    data: []
})
let gatewayData=ref([])


function getWebsocket(val) {
  headerref.value.HeadergetWebsocket(val);
  try {
    let data = JSON.parse(val);

    if (data.type == "CountsOfMachineryFactoryInStatusTime") {
      store.changedevstatus(data.msg);
    }
    if (data.type == "gatewayMF") {
      store.changegateway(data.msg);
      gatewayData.value=store.getmechanicsData
      store.changegatewaynum(data.msg);
      // store.changePM(data.msg)
    }
  } catch (err) {
    console.log(err);
  }
}
function errWebsocket(val) {
  headerref.value ? headerref.value.HeadererrWebsocket(val) : "";
  // console.log(val);
}
async function gatewayOfMachineryFactoryfun(){
    let result:any = await gatewayOfMachineryFactory()
   
    if(result.code==200){
      store.changegateway(result.data)
      gatewayData.value=store.getmechanicsData
      
    }
  }
  async function gatcountsOfMachineryFactoryfun(){
    let result:any = await gatcountsOfMachineryFactory()
   
    if(result.code==200){
      store.changegatewaynum(result.data)
    }
  }
onMounted(() => {
  // let Timedombox=Timedom.value
  window.document.title = t("messages.Mechanics");
  setTimeout(()=>{
    DevOverviewData.value=[{title:'车间',value:[1,2,3]}]
    devFaultTipData.value=[{label:'111111',devName:'富怡精密绣花机' ,status:'故障'},
    {label:'222222',devName:'富怡精密绣花机' ,status:'故障'},
    {label:'333333',devName:'富怡精密绣花机' ,status:'故障'},
    {label:'444444',devName:'富怡精密绣花机' ,status:'故障'},
    {label:'555555',devName:'富怡精密绣花机' ,status:'故障'},
    {label:'666666',devName:'富怡精密绣花机' ,status:'故障'},
    {label:'777777',devName:'富怡精密绣花机' ,status:'故障'}]
    devStatusTipData.value=[{label:'111111',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
    {label:'222222',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
    {label:'333333',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
    {label:'444444',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
    {label:'555555',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
    {label:'666666',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
    {label:'777777',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},{label:'111111',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
    {label:'222222',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
    {label:'333333',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
    {label:'444444',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
    {label:'555555',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
    {label:'666666',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
    {label:'777777',devName:'富怡精密绣花机' ,on:111,off:222,stop:333}]
    ringData.value=[{
      value:120,
      name:'在线',
    },
    {
      value:120,
      name:'离线',
    }]
    
    scrollBoardConfig.data=[[1,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [2,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [3,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [4,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [5,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [6,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [7,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [8,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [9,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [10,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [11,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [12,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [13,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [14,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [15,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [16,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
    [17,111111,'富怡绣花机123145','机加车间','在线','95%','1%']]
    // gatewayData.value=[{
    //   name:'机加车间',
    //   status:'false'
    // },{
    //   name:'焊接车间',
    //   status:'false'
    // },{
    //   name:'大件车间',
    //   status:'false'
    // },{
    //   name:'精饰车间',
    //   status:'false'
    // },{
    //   name:'精加车间',
    //   status:'false'
    // },]
  },1000)

  gatewayOfMachineryFactoryfun()
  gatcountsOfMachineryFactoryfun()
  connectWebsocket(null, null, getWebsocket, errWebsocket);
});

onUnmounted(() => {
  closeWebsocket();
});
</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;
}
.header {
  position: relative;
}
.header p {
  position: absolute;
  right: 50px;
  bottom: 20px;
  font-size: 20px;
}
.module-header{
 width: 100%;
 text-align: center;
 color: #fff;
 font-size: 20px;
 margin-bottom: 10px;
}
.module-content{
display: flex;
flex-wrap: wrap;
height: 98%;
width: 100%;
}
 .layout {
    height: 100%;
}
.flex-left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.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>