SynthesisManagement/src/views/screens/deviceScreen.vue

<template>
  <div class="screen-window">
    <dv-full-screen-container id="dv-full-screen">
      <ScreenHeader title="设备监控看板" />
      <div class="screen-content">
        <dv-border-box-10 class="zhleft">
          <div class="screen-common-component" style="padding: 27px">
            <div class="screen-common-component">
              <DeviceStatus :device-data="data" module-id="dd" />
            </div>
          </div>
        </dv-border-box-10>
        <div class="spsace"></div>
        <div class="zhright">
          <WorkshopList :device-data="data?.devices ?? {}" />
        </div>
      </div>
    </dv-full-screen-container>
    <SelectComponents />
  </div>
</template>

<script lang="ts" setup>
import SelectComponents from "@/views/screens/configs/SelectComponents.vue";

import ScreenHeader from "@/views/screens/headers/screenHeader.vue";
import DeviceStatus from "@/views/screens/screen-components/DeviceStatus.vue";
import WorkshopList from "@/views/screens/screen-components/WorkshopList.vue";
import { deviceMonitor } from "@/api/screens";

const data = ref<any>(null);
const bigScreenData = inject("bigScreenData");
onMounted(async () => {
  let result: any = await deviceMonitor();
  data.value = result.data;
});
</script>

<style lang="scss" scoped>
.zhleft {
  width: 550px;
  height: 100%;
}

.spsace {
  width: 15px;
}

.zhright {
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
</style>