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="{ onLine: facTotal.onLine, total: facTotal.total }"></DevOverview>
                  <DevOverview :title="item.name" :value="{ onLine: item.onLine, total: item.total }"
                    v-for="(item) in facList"></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 { useMechanicsStore } from "@/store/module/Mechanics";
import { gatewayOfMachineryFactory, gatcountsOfMachineryFactory, reqDeviceTotelListMF, reqDeviceTotelStatusMF } 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, 290, 120, 120, 120, 120],
  align: ['center', 'center', 'center', 'center', 'center', 'center'],
  data: []
})
let gatewayData = ref([])
//车间列表
let facList = ref([])
//机械分厂总数
let facTotal = reactive({
  total: 0,
  onLine: 0,
  offLine: 0
})


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)
//   }
// }

//获取机械分厂设备列表
async function reqDeviceTotelListMFfun() {
  let result: any = await reqDeviceTotelListMF()

  if (result.code == 200) {
    scrollBoardConfig.data = result.data.map((item, index) => {
      return [
        index + 1,
        item.name,
        item.dept,
        item.status == 'false' ? '离线' : '在线',
        item.activation+'%',
        item.failure+'%'
      ]
    })
  }
}

//获取机械分厂设备总数
async function getDeviceTotelStatusMF() {
  let result: any = await reqDeviceTotelStatusMF()

  if (result.code == 200) {
    facList.value = result.data.list

    facTotal.total = result.data.total
    facTotal.onLine = result.data.list.reduce((total, item) => {
      return total + item.onLine
    }, 0)
    facTotal.offLine = facTotal.total - facTotal.onLine
    ringData.value = [
      { name: '在线', value: facTotal.onLine },
      { name: '离线', value: facTotal.offLine }
    ]
  }
}


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 }]
  }, 1000)

  gatewayOfMachineryFactoryfun()
  // gatcountsOfMachineryFactoryfun()
  //获取机械分厂设备总数
  getDeviceTotelStatusMF()
  //获取机械分厂设备列表
  reqDeviceTotelListMFfun()
  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>