chenzhou/src/MainScreen.vue

<!-- 报警列表页面 -->
<script setup>
import { ref } from "vue";
import { useWsStore } from "./store";
import DatetimeTool from "./components/HeadTime.vue";
import AppHeader from "./components/Base/Header.vue";
import Tools from "./components/Tools.vue";
import TodayYield from "./components/mainscreen/TodayYield.vue";
import SumYield from "./components/mainscreen/SumYield.vue";
import TodayRate from "./components/mainscreen/TodayRate.vue";
import SumRate from "./components/mainscreen/SumRate.vue";
import FullEqList from "./FullEqList.vue";

const mainContainer = ref(null);
const props = defineProps({
  line: {
    type: Number,
    default: 1,
  },
});
const store = useWsStore();
const alarmList = ref(
  (store.data1.alarmArrList || []).map((item, index) => ({
    id: item.id,
    eqName: item.equipmentName,
    eqIndex: index + 1,
    alarmGrade: item.alarmLevel,
    alarmDetail: item.alarmDetails,
    position: `${item.productLine} - ${item.segment}`,
  }))
);
// store.$subscribe((mutation, state) => {
//   alarmList.value = state.data1.alarmArrList.map((item, index) => ({
//     id: item.id,
//     eqName: item.equipmentName,
//     eqIndex: index + 1,
//     alarmGrade: item.alarmLevel,
//     alarmDetail: item.alarmDetails,
//     position: `${item.productLine} - ${item.segment}`,
//   }));
// });

// function handleIgnore() {
//   alarmList.value.splice(0)
// }

function handleResolutionChange(width, height) {
  mainContainer.value && changeScale(mainContainer.value, width, height);
}
</script>

<template>
  <div id="main-container" ref="mainContainer" class="main-container">
    <div id="main-container__fulleq">
      <FullEqList />
    </div>
    <DatetimeTool />
    <Tools @change-resolution="handleResolutionChange" />
    <AppHeader />

    <div class="main-screen">
      <!-- <div
        style="
          position: absolute;
          top: 0;
          left: -279px;
          width: calc(100% + 279px);
          height: 100%;
          background: #ccc3;
        "
      >
        <ThreeD :line="line ?? '1'" />
      </div> -->

      <TodayYield class=" " />
      <SumYield class=" " />
      <TodayRate class=" " />
      <SumRate class=" " />
    </div>
  </div>
</template>

<style>
.dark-table {
  height: 100%;
  background: transparent;
  user-select: none;
}

.dark-row {
  color: #fff;
  background: #006acd32 !important;
  user-select: none;
}

.dark-row:nth-child(odd) {
  background: #020d2d32 !important;
}

.dark-row > td.el-table__cell {
  border: none;
  font-size: 16px;
}

.dark-row > td.el-table__cell:not(:last-child) {
  border-right: 1px solid #0003;
}

.dark-row:hover > td.el-table__cell {
  background-color: #fff1 !important;
}

.dark-header {
  background-color: transparent !important;
  color: #fff;
}

.dark-header > th.el-table__cell.is-leaf {
  border-bottom: none;
  background-color: #006acd32 !important;
  font-weight: 400;
  letter-spacing: 1px;
}

.dark-header > th.el-table__cell {
  font-size: 16px;
}

.dark-header > th.el-table__cell:not(:last-child) {
  border-right: 1px solid #0003;
}
</style>

<style scoped>
.ccontainer {
  width: 420px;
  height: 420px;
  background: #ccc3;
  /* position: absolute; */
}

.left-top {
  top: 32px;
  left: 32px;
}

.left-bottom {
  bottom: 32px;
  left: 32px;
}

.right-top {
  top: 32px;
  right: 32px;
}

.right-bottom {
  bottom: 32px;
  right: 32px;
}

.main-container {
  width: 1920px;
  height: 1080px;
  background: #000;
  position: relative;
  display: flex;
  flex-direction: column;
  background: url(./assets/bg.png) 100% / cover no-repeat;
}

.pages-wrapper {
  flex: 1;
  display: flex;
  position: relative;
}

.main-screen {
  flex: 1;
  position: relative;
  display: grid;
  grid-template-rows: repeat(2, 400px);
  grid-template-columns: repeat(2, 400px);
  justify-content: center;
  /* align-content: center; */
  /* place-content: center; */
  gap: 15% 55%;
}

.alert-list {
  height: calc(100% - 56px);
  width: 520px;

  position: absolute;
  top: 15px;
  right: 32px;

  display: flex;
  flex-direction: column;
}

:fullscreen .alert-list {
  width: 35%;
  top: 32px;
  height: calc(100% - 64px);
}

.alert-list__table {
  height: calc(100% - 72px);
}

.alert-list__table >>> .el-table__inner-wrapper::before {
  background: transparent;
}

button {
  appearance: none;
  outline: none;
  border: none;
  cursor: pointer;
}

.alert-btn {
  width: 100%;
  height: 72px;
  background: #0f04;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 2px;
  transition: all 0.2s ease-out;
}

.alert-btn:hover {
  background: #0f08;
}
</style>