PCS平面图检测线段

huanghongfeng

2024-07-08 32678f5c24c7681a198b517fa72db1de2e98646d

 ´úÂë¹ÜÀí/PCS/WCS_Client/src/views/Home.vue

@@ -1,24 +1,246 @@
<template>
  <div class="title">Welcome To PCS!</div>
   <div class="home-page">
  <div class="qhuan">
    <el-button type="primary" :class="{ 'qh_box': true, 'selected': selected === '下料区' }"
      v-on:click="selectss(0)">下料区</el-button>
    <el-button type="primary" :class="{ 'qh_box': true, 'selected': selected === '库区' }"
      v-on:click="selectss(1)">库区</el-button>
  </div>

  <!-- ä¸‹æ–™åŒºä»£ç  -->
  <div v-if="selected === '下料区'" style="margin-top: 30px;">
    <centerLeft1 :dataList="dataxlist" :plcList_one="plcList_one" :plcList_two="plcList_two" :plcList_three="plcList_three" />
    <div style="height: 50px;width: 100%;">
      <div class="dd_div" :style="{ 'background-color': getBackgroundColor(item1.enable, item1.location_state) }">
        <el-tooltip class="item" effect="dark" placement="left">
          <template #content v-if="item1.quantity !== 0 && item1.tray_type !== ''">
            <div>库位编号：{{ item1.stationCode }}</div>
            <div v-if="item1.tray_type == 'SmallTray'">托盘类型：小托盘</div>
            <div v-else>托盘类型：大托盘</div>
            <div>托盘数量： {{ item1.quantity }}</div>
          </template>
          <template #content v-else>
            <div>库位编号：{{ item1.stationCode }}</div>
            <div>目前暂无叠盘数据</div>
          </template>
          <!-- <div >
            </div> -->
          <div class="v_dd" v-if="item1.location_state === 'Stroge'">
             <img src="../assets/imgs/huojia.png" style="width: 100%;"   />
          </div>
          <div class="v_dd" v-else></div>
        </el-tooltip>
      </div>
    </div>
    <div style="margin-left: 65px;">
      <div class="table-container">
        <div class="scrollable-table" >
          <table class="one_tal">
            <tr v-for="(item, k) in 2" :key="k">
              <td v-for="items in filteredItems(ddataList, k + 1)" :key="items.stationCode"
                :style="{ 'background-color': getBackgroundColor(items.enable, items.location_state) }">
                <el-tooltip class="item" effect="dark" placement="right">
                  <template #content>
                  <div>库位编号：{{ items.stationCode }}</div>
                  <div v-if="items.tray_type=='SmallTray'">托盘类型：小托盘</div>
                  <div v-else>托盘类型：大托盘</div>
                  <div>数量：{{ items.quantity }}</div>
                  <div v-if="items.location_state === 'Stroge'">货位状态：有货</div>
                  <div v-if="items.location_state === 'Empty'">货位状态：无货</div>
                </template>
                  <div style="height: 35px;writing-mode: vertical-lr;width: 35px;">
                    <img src="../assets/imgs/huojia.png" style="width: 100%;" v-if="items.location_state === 'Stroge'" />
                  </div>
                </el-tooltip>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <!--托盘叠放区-->
    <div style="height: 50px;"></div>
  </div>
  <!-- ä¸‹æ–™åŒºä»£ç  -->


  <!-- åº“区代码 -->
  <div v-else-if="selected === '库区'" style="margin-top: 30px;margin-left: 30px;">
    <centerLeft2 :dataList="datalist" />
  </div>
  <!-- åº“区代码 -->
</div>
</template>

<script>
import { ref, reactive } from 'vue'

import axios from 'axios';
import centerLeft1 from '@/views/Homes/centerLeft1.vue';
import centerLeft2 from '@/views/Homes/centerLeft2.vue';
export default {
  setup() {
    return {

  data() {
    return {
      selected: '下料区', // é»˜è®¤é€‰ä¸­ä¸Šä¸‹æ–™åŒº
      datalist: [],
      dataxlist: [],
      item1: [],
      ddataList: [],
      plcList_one:[],
      plcList_two:[],
      plcList_three:[],
    };
  },
  components: {
    centerLeft1,
    centerLeft2
  },
  mounted() {
    
  },
  created() {
     this.One_unit_plc();
     this.Two_unit_plc();
     this.Three_unit_plc();
    this.selList();
    this.selListxl();

    setInterval(() => {
      this.selList();
     }, 60000);

     setInterval(() => {
     this.selListxl();
     this.One_unit_plc();
     this.Two_unit_plc();
     this.Three_unit_plc();
     }, 5000);

  },
  methods: {
    openDialog() {
      this.isModalVisible = true;
    },
    //切换
    selectss(selvelue) {
      if (selvelue == "0") {
        this.selected = "下料区";
      } else {

        this.selected = "库区";
        this.selList();
      }
    },
    //获取库区的数据
    selList() {
      this.loading = true;
      this.http.post('api/Readplc/dt_stationinfolist').then(x => {
        this.datalist = x;
        for (var i = 0; i < x[1].item1.length; i++) {
          this.ddataList[i] = x[1].item1[i];
        }
      })
        .catch(error => {
          console.error('请求出错：', error);
        });
    },
    //获取下料口的数据
    selListxl() {
      this.loading = true;
      this.http.post('api/Readplc/pcs_dt_stationinfolist').then((x) => {
        
        this.dataxlist = x;
        this.item1 = x[4].item1[0];

      })
        .catch(error => {
          console.error('请求出错：', error);
        });
    },
    //更改颜色
    getBackgroundColor(enable, locationState) {
      if (enable == '0') {
        return '#C0C4CC';
      }
      else {
        switch (locationState) {
          case 'Stroge':
            return '#409eff';
          case 'Empty':
            return 'lightgreen';
          case 'InBusy':
            return 'yellow';
          case 'OutBusy':
            return 'yellow';
          case 'Busy':
            return 'yellow';
          case 'Abnormal':
            return 'red';
          case 'Abnormal':
            return 'yellow';
          default:
            return 'transparent';
        }
      }
    },
    //获取辊道线1单元上的数据
    One_unit_plc(){
      this.http.post('api/Readplc/One_unit_plc')
        .then((response) => {
          this.plcList_one=response;
         
        })
        .catch((error) => {
          console.error('Error fetching current user info:', error);
        });
    },
    //获取辊道线2单元上的数据
    Two_unit_plc(){
      this.http.post('api/Readplc/Two_unit_plc')
        .then((response) => {
          this.plcList_two=response;
        })
        .catch((error) => {
          console.error('Error fetching current user info:', error);
        });
    },
    //获取辊道线3单元上的数据
    Three_unit_plc(){
      this.http.post('api/Readplc/Three_unit_plc')
        .then((response) => {
          this.plcList_three=response;
        })
        .catch((error) => {
          console.error('Error fetching current user info:', error);
        });
    }

  },
  computed: {
    filteredItems() {
      return (itemList, line) => {
        return itemList.filter(item => item.line === line);
      };
    }
  }
}
</script>

<style scoped>
.title {
  line-height: 70vh;
  text-align: center;
  font-size: 28px;
  color: orange;
.home-page {
  width: 125%;
  background-image: url("../assets/imgs/pageBg.png");
}

.dd_div {
  width: 57px;
  height: 53px;
  margin-left: 1300px;
  margin-top: 70px;
}

.v_dd {
  width: 57px;
  height: 50px;
  margin-top: 10px;
}
</style>