HHECS.Web/src/views/main/components/DeviceMonitor.vue

<template>
  <el-container class="device-monitor">
    <el-aside width="225px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>概览</span>
        </div>
        <div class="container">
          <div
            v-for="(item, index) in overyviewsList"
            :key="item.code"
            class="text item"
          >
            <div
              :style="
                index == 0
                  ? 'background-color:#1E9FFF'
                  : index == 1
                  ? 'background-color:#009688'
                  : index == 2
                  ? 'background-color:#FFB800'
                  : 'background-color:#1E9FFF'
              "
            >
              <el-row>
                <el-col :span="14">
                  {{ item.name }}
                </el-col>
                <el-col :span="10">
                  <!-- <br/> -->
                  <span>{{ item.description }}</span>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="box-card device-info">
        <div slot="header" class="clearfix">
          <span>设备概览</span>
        </div>
        <el-divider
          v-if="srmList.length > 0"
          content-position="center"
          style="width: 100vw"
          >堆垛机</el-divider
        >
        <el-tag
          v-for="item in srmList"
          :key="item.name"
          :type="getTagType(item)"
          effect="dark"
          class="tag-item"
        >
          {{ item.name }}
        </el-tag>
        <el-divider v-if="stationList.length > 0" content-position="center"
          >站台</el-divider
        >
        <el-tag
          v-for="item in stationList"
          :key="item.name"
          :type="getTagTypePort(item)"
          effect="dark"
          class="tag-item"
        >
          {{ item.name }}
        </el-tag>
        <el-divider v-if="rgvList.length > 0" content-position="center"
          >RGV</el-divider
        >
        <el-tag
          v-for="item in rgvList"
          :key="item.name"
          :type="getTagType(item)"
          effect="dark"
          class="tag-item"
        >
          {{ item.name }}
        </el-tag>
        <el-divider v-if="crgvList.length > 0" content-position="center"
          >CRGV</el-divider
        >
        <el-tag
          v-for="item in crgvList"
          :key="item.name"
          :type="getTagTypePort(item)"
          effect="dark"
          class="tag-item"
        >
          {{ item.name }}
        </el-tag>
      </el-card>
    </el-aside>
    <el-main>
      <map-module ref="map" />
    </el-main>
  </el-container>
</template>
<script>
import {
  getCRGVInfo,
  getOverviews,
  getRGVInfo,
  getSRMInfo,
  getStationMonitorInfo,
} from "@/api/main";
import MapModule from "@/components/MapModule";
export default {
  name: "DeviceMonitor",
  components: {
    MapModule,
  },
  data() {
    return {
      //详情列表
      overyviewsList: [],
      //堆垛机列表
      srmList: [],
      //站台列表
      stationList: [],
      //rgv列表
      rgvList: [],
      //crgv列表
      crgvList: [],
      interval: null,
      isCurrentTab: false,
      isOpenServer: false,
    };
  },
  props: {
    // 定义接收的 startDeal 变量
    startDeal: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    // 监听 startDeal 变量的变化
    startDeal(newValue, oldValue) {
      // console.log('处理状态发生变化:', newValue);
      this.isOpenServer = newValue;
      if (this.isCurrentTab) {
        if (newValue) {
          this.start();
        } else {
          this.stop();
        }
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  mounted() {
    // console.log(this.$dict);
  },
  methods: {
    //开始刷新数据
    start() {
      this.isCurrentTab = true;
      if (this.isOpenServer) {
        // this.srmList = window.srmData;
        // this.rgvList = window.rgvData;
        // this.stationList = window.stationData;
        // // console.log(this.srmList, this.rgvList, this.stationList)
        // this.$refs.map.updateData(this.srmList, this.rgvList, this.stationList);
        this.interval = setInterval(() => {
          getOverviews().then((response) => {
            // console.log(response);
            this.overyviewsList = response.data;
          });
          getSRMInfo().then((response) => {
            this.srmList = response.data;
          });
          getRGVInfo().then((response) => {
            this.rgvList = response.data;
          });
          getCRGVInfo().then((response) => {
            this.crgvList = response.data;
          });
          getStationMonitorInfo().then((response) => {
            this.stationList = response.data;
          });
          this.$refs.map.updateData(
            this.srmList,
            this.rgvList,
            this.stationList
          );
        }, 3000);
      }
    },
    //停止刷新数据
    stop() {
      this.isCurrentTab = false;
      clearInterval(this.interval);
    },
    getTagType(item) {
      if (item.operationModel == "5") {
        if (item.totalError == "True") {
          return "danger"; // 报警
        } else {
          if (
            item.fork1TaskExcuteStatus == "2" ||
            item.fork1TaskExcuteStatus == "3"
          ) {
            return ""; // 正常
          } else if (item.fork1TaskExcuteStatus == "1") {
            return "success"; // 待机
          } else {
            return "danger"; // 报警
          }
        }
      } else {
        return "warning"; // 非自动
      }
    },
    getTagTypePort(item) {
      if (item.stationMonitorAutomation == "1") {
        if (item.stationError == "1") {
          return "danger"; // 报警
        } else {
          if (item.stationMonitorOccupied == "1") {
            return ""; // 正常
          } else {
            return "success"; // 报警
          }
        }
      } else {
        return "warning"; // 非自动
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
}
.text {
  font-size: 14px;
  color: white;
}
.text span {
  font-size: 16px;
  font-weight: bolder;
}
.item {
  border: 1px black solid;
  text-align: center;
  width: 100%;
  line-height: 3vh;
  margin-bottom: 5px;
}
.clearfix {
  height: 14px;
  font-size: 14px;
  color: #409eff;
}
.tag-item {
  margin: 0px 5px 5px 0px;
}
.device-info {
  display: flex;
  flex-wrap: wrap; // 允许元素换行
  max-height: 70vh; // 设置最大高度，超出显示滚动条
  overflow-y: auto; // 超出最大高度时显示纵向滚动条
}
</style>
<style>
.device-monitor {
  .el-card__body {
    width: 225px;
  }
}
</style>