后端

huanghongfeng

2024-06-25 b9f5657fc9a083238a1a27ef35ef885f1e912b4f

后端

更新

 ´úÂë¹ÜÀí/PCS/WCS_Client/src/assets/imgs/huojia.png

 ´úÂë¹ÜÀí/PCS/WCS_Client/src/assets/imgs/huojialun.png

 ´úÂë¹ÜÀí/PCS/WCS_Client/src/assets/imgs/jxscl.png

 ´úÂë¹ÜÀí/PCS/WCS_Client/src/assets/imgs/jxsk.png

 ´úÂë¹ÜÀí/PCS/WCS_Client/src/assets/imgs/pcs_lun.png

 ´úÂë¹ÜÀí/PCS/WCS_Client/src/assets/imgs/pcs_x copy.png

 ´úÂë¹ÜÀí/PCS/WCS_Client/src/assets/imgs/tuyouji.png

 ´úÂë¹ÜÀí/PCS/WCS_Client/src/assets/imgs/tuyoujilun.png

 ´úÂë¹ÜÀí/PCS/WCS_Client/src/assets/lines.png

 ´úÂë¹ÜÀí/PCS/WCS_Client/src/assets/linesd.png

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

@@ -1,24 +1,243 @@
<template>
  <div class="title">Welcome To PCS!</div>
  <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>
  <!-- åº“区代码 -->
</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: [],
      url: "http://127.0.0.1:8098/api/",
      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();
     }, 1000);

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

        this.selected = "库区";
        this.selList();
      }
    },
    //获取库区的数据
    selList() {
      this.loading = true;
      axios.post(this.url + "dt_stationinfo/dt_stationinfolist").then(x => {
        this.datalist = x.data.data;
        for (var i = 0; i < x.data.data[1].item1.length; i++) {
          this.ddataList[i] = x.data.data[1].item1[i];
        }
      })
        .catch(error => {
          console.error('请求出错：', error);
        });
    },
    //获取下料口的数据
    selListxl() {
      this.loading = true;
      axios.post(this.url + "dt_stationinfo/pcs_dt_stationinfolist").then(x => {
        this.dataxlist = x.data.data;
        this.item1 = x.data.data[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;
<style>
body {
  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>

 ´úÂë¹ÜÀí/PCS/WCS_Client/src/views/Homes/Homest/centerLeft1index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1139 @@
<template>
    <div class="container">
        <div style="display: flex;">
            <div class="vk_div" v-on:click="isModalVisible3 = true" v-for="items in plcList_one.section_fifteen"
            :style="{ 'background-color': getBackgroundColor4(items.vk_state) }">
                <div style="text-align: center;line-height: 50px;">VK4</div>
                <el-dialog v-model="isModalVisible3" title="VK4">
                    <div>Name:
                        <el-input v-model="items.name" :disabled="true" style="width: 100px;"> </el-input>
                    </div>
                    <!--最大div-->
                    <div>
                        <!--第层列div-->
                        <div style="display: flex;">
                            <div style="width: 30%;">
                                <p>Power on
                                <div class="div_cl" v-if="items.power_on == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>ready operate
                                <div class="div_cl" v-if="items.ready_for_operate == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>ready auto start
                                <div class="div_cl" v-if="items.ready_for_Auto_start == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>VK fault
                                <div class="div_cl" v-if="items.vK_Fault == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>safety ok
                                <div class="div_cl" v-if="items.safety_OK == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                            </div>
                            <div style="width: 30%;margin-left: 40px;">
                                <p>state jog input A1
                                <div class="div_cl" v-if="items.state_JOG_bag1 == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>state auto input A1
                                <div class="div_cl" v-if="items.state_AUTO_bag1 == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>input A1 fault
                                <div class="div_cl" v-if="items.bag_in_1_Fault == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>state jog input A2
                                <div class="div_cl" v-if="items.state_JOG_bag2 == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>state auto input A2
                                <div class="div_cl" v-if="items.state_AUTO_bag2 == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>input A2 fault
                                <div class="div_cl" v-if="items.bag_in_2_Fault == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>

                                <p>state jog output A1
                                <div class="div_cl" v-if="items.state_JOG_bag3 == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>state auto output A1
                                <div class="div_cl" v-if="items.state_AUTO_bag3 == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>output A1 fault
                                <div class="div_cl" v-if="items.bag_out_1_Fault == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>state jog output A2
                                <div class="div_cl" v-if="items.state_JOG_bag4 == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>state auto output A2
                                <div class="div_cl" v-if="items.state_AUTO_bag4 == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>output A2 fault
                                <div class="div_cl" v-if="items.bag_out_2_Fault == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                            </div>
                            <div style="width: 30%;margin-left: 40px;">
                                <p>safety door 1 closed
                                <div class="div_cl" v-if="items.safetydoor_1_closed == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>safety door 2 closed
                                <div class="div_cl" v-if="items.safetydoor_2_closed == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>safety door 3 closed
                                <div class="div_cl" v-if="items.safetydoor_3_closed == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>safety door 4 closed
                                <div class="div_cl" v-if="items.safetydoor_4_closed == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>safety door 5 closed
                                <div class="div_cl" v-if="items.safetydoor_5_closed == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>safety door 6 closed
                                <div class="div_cl" v-if="items.safetydoor_6_closed == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>safety door 7 closed
                                <div class="div_cl" v-if="items.safetydoor_7_closed == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>safety door 8 closed
                                <div class="div_cl" v-if="items.safetydoor_8_closed == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>safety door 9 closed
                                <div class="div_cl" v-if="items.safetydoor_9_closed == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                            </div>
                        </div>

                    </div>
                    <!--最大div-->
                </el-dialog>
            </div>
            <!--车间之上的辊道线-->
            <div class="box" style="margin-left: 33px;">

                <div v-for="items in plcList_one.section_four" class="box_sto"
                    :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                    <el-tooltip class="item" effect="dark" placement="right">
                        <template #content v-if="items.r_part_process != '0'">
                            <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                            <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                            <div>r_part_status：{{ items.r_part_status }}</div>
                            <div>r_part_process： {{ items.r_part_process }}</div>
                            <div>stackerNo:{{ items.stackerNo }}</div>
                        </template>
                        <template #content v-else>
                            <div>目前暂无车轮信息</div>
                            <div>stackerNo:{{ items.stackerNo }}</div>
                        </template>
                        <div class="box_sto_dt">
                            <div class="quan_div" v-if="items.r_part_process != '0'">
                                <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                            </div>
                            <div v-else>{{ items.stackerNo }}</div>
                        </div>
                    </el-tooltip>
                </div>
            </div>
            <!--车间之上的辊道线-->
        </div>

        <!--上车间-->
        <div style="margin-top: -6px;margin-left: 58px;">
            <div style="display: flex;">
                <div style="margin-top: 67px;">
                    <!--左上角车间-->
                    <div v-for="(items, index) in plcList_one.section_five">
                        <div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 2"
                            v-on:click="open('Machine1')">
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }">

                            </div>
                            <div style="width: 100px;">
                                <el-tooltip class="item" effect="dark" placement="right">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </el-tooltip>
                            </div>
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                        </div>
                    </div>
                    <!--左上角车间-->

                    <!--车间中间车轮-->
                    <div style="display: flex;margin-left: -19px;margin-top: 5px;">
                        <!--靠左车轮-->
                        <div style="display: flex;">
                            <div v-for="items in plcList_one.section_six">
                                <el-tooltip class="item" effect="dark" placement="top">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="box_stoy">
                                        <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                            <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                        </div>
                                        <div v-else>{{ items.stackerNo }}</div>
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                        <!--靠左车轮-->

                        <!--靠右车轮-->
                        <div style="display: flex;margin-left: 5px;">
                            <div v-for="items in plcList_one.section_seven">
                                <el-tooltip class="item" effect="dark" placement="top">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="box_stoy">
                                        <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                            <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                        </div>
                                        <div v-else>{{ items.stackerNo }}</div>
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                        <!--靠右车轮-->
                    </div>
                    <!--左车间中间车轮-->

                    <!--左下角车间-->
                    <div v-for="(items, index) in plcList_one.section_five">
                        <div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 3" v-on:click="open('Machine2')">
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                            <div style="width: 100px;">
                                <el-tooltip class="item" effect="dark" placement="right">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                        <div>c_Name:{{ items.c_Name }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </el-tooltip>
                            </div>
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }">
                            </div>



                        </div>
                    </div>
                    <!--左下角车间-->

                </div>
                <!--左车间-->

                <!--上中下间辊道线和车轮圈-->
                <div>
                    <!--上车间中间辊道-->
                    <div class="box" style="height: 102px;">

                        <div v-for="items in plcList_one.section_three" class="box_sto"
                            :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                            <el-tooltip class="item" effect="dark" placement="right">
                                <template #content v-if="items.r_wheel_SN != ''">
                                    <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                    <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                    <div>r_part_status：{{ items.r_part_status }}</div>
                                    <div>r_part_process： {{ items.r_part_process }}</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <template #content v-else>
                                    <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div class="box_sto_dt">
                                    <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                    <!--上车间中间辊道-->

                    <!--下车间中间辊道-->
                    <div class="box" style="height: 102px;margin-top: 45px;">
                        <div v-for="items in plcList_one.section_two" class="box_sto"
                            :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                            <el-tooltip class="item" effect="dark" placement="right">
                                <template #content v-if="items.r_wheel_SN != ''">
                                    <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                    <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                    <div>r_part_status：{{ items.r_part_status }}</div>
                                    <div>r_part_process： {{ items.r_part_process }}</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <template #content v-else>
                                    <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div class="box_sto_dt">
                                    <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                    <!--下车间中间辊道-->
                </div>
                <!--上车间辊道线-->


                <!--右车间-->
                <div>
                    <!--机械手-->
                    <div style="margin-left: 30px;margin-top: -35px;" v-for="items in plcList_one.section_ten"
                        v-on:click="isModalVisible2 = true" >
                        <div>
                            <div>
                                <el-tooltip class="item" effect="dark" placement="top">
                                    <template #content v-if="items.r_wheel_SN !== ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>

                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="box2_sto_yj" :style="{ 'background-color': getBackgroundColor4(items.g_gantry_state)}">
                                        <img src="../../../assets/imgs/jxscl.png" style="width: 100%;"
                                            v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/jxsk.png" style="width: 100%;" v-else>
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                        <el-dialog v-model="isModalVisible2" title="机械手">
                            <div>Name:
                                <el-input v-model="items.g_name" :disabled="true" style="width: 100px;">
                                </el-input>
                            </div>

                            <!--最大div-->
                            <div>
                                <!--第层列div-->
                                <div style="display: flex;">
                                    <div style="width: 40%;">
                                        <p>power on
                                        <div class="div_cl" v-if="items.g_power_on == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>ready operate
                                        <div class="div_cl" v-if="items.g_ready_for_operate == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>ready auto start
                                        <div class="div_cl" v-if="items.g_ready_for_auto_start == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>state JOG
                                        <div class="div_cl" v-if="items.g_state_JOG == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>state MDA
                                        <div class="div_cl" v-if="items.g_state_MDA == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>state AUTO
                                        <div class="div_cl" v-if="items.g_state_AUTO == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>communication IO
                                        <div class="div_cl" v-if="items.g_communication_IO == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                    </div>
                                    <div style="width: 40%;margin-left: 40px;">
                                        <p>emergency stop
                                        <div class="div_cl" v-if="items.g_emergency_stop_portal == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>drive fault
                                        <div class="div_cl" v-if="items.g_drive_fault == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>portal fault
                                        <div class="div_cl" v-if="items.g_portal_fault == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>program running
                                        <div class="div_cl" v-if="items.g_programm_running == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </el-dialog>
                    </div>
                    <!--机械手-->
                    <div style="height: 30px;"></div>
                    <!--右上角车间-->
                    <div v-for="(items, index) in plcList_one.section_five">

                        <div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 0" v-on:click="open('Machine3')">
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                            <div style="width: 100px;">
                                <el-tooltip class="item" effect="dark" placement="right">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </el-tooltip>
                            </div>
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                        </div>
                    </div>
                    <!--右上角车间-->


                    <!--右车间中间车轮-->
                    <div style="display: flex;margin-top: 5px;">

                        <!--靠左车轮-->
                        <div style="display: flex;">
                            <div v-for="items in plcList_one.section_eight">
                                <el-tooltip class="item" effect="dark" placement="right">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="box_stoy">
                                        <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                            <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                        </div>
                                        <div v-else>{{ items.stackerNo }}</div>
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                        <!--靠左车轮-->

                        <!--靠右车轮-->
                        <div style="display: flex;margin-left: 5px;">
                            <div v-for="items in plcList_one.section_nine">
                                <el-tooltip class="item" effect="dark" placement="right">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="box_stoy">
                                        <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                            <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                        </div>
                                        <div v-else>{{ items.stackerNo }}</div>
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                        <!--靠右车轮-->
                    </div>
                    <!--右车间中间车轮-->

                    <!--右下角车间-->
                    <div v-for="(items, index) in plcList_one.section_five">
                        <div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 1" v-on:click="open('Machine4')">
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                            <div style="width: 100px;">
                                <el-tooltip class="item" effect="dark" placement="right">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </el-tooltip>
                            </div>
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                        </div>
                    </div>
                    <!--右下角车间-->
                </div>
                <!--右车间-->
            </div>
        </div>
        <!--上车间-->


        <div style="display: flex;margin-top: -6px;">

            <div style="position: relative;width: 200px;">
                <!--视觉检测1-->
                <div style="position: absolute; bottom: 140px; right: 140px;"
                    v-for="items in plcList_one.section_thirteen"
                    :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                    <div>
                        <div>
                            <el-tooltip class="item" effect="dark" placement="top">
                                <template #content v-if="items.r_wheel_SN != ''">
                                    <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                    <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                    <div>r_part_status：{{ items.r_part_status }}</div>
                                    <div>r_part_process： {{ items.r_part_process }}</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <template #content v-else>
                                    <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div style="border: 1px solid #ffffff; width: 45px; height: 42px; ">
                                    <img src="../../../assets/imgs/huojialun.png" style="width: 100%;"
                                        v-if="items.r_wheel_SN != ''">
                                    <img src="../../../assets/imgs/huojia.png" style="width: 100%;" v-else>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <!--视觉检测1-->
                <!--视觉检测2-->
                <div style="position: absolute; bottom: 140px; right: 80px;"
                    v-for="items in plcList_one.section_fourteen"
                    :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                    <div>
                        <div>
                            <el-tooltip class="item" effect="dark" placement="top">
                                <template #content v-if="items.r_wheel_SN != ''">
                                    <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                    <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                    <div>r_part_status：{{ items.r_part_status }}</div>
                                    <div>r_part_process： {{ items.r_part_process }}</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <template #content v-else>
                                    <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div style="border: 1px solid #ffffff; width: 45px; height: 42px; ">
                                    <img src="../../../assets/imgs/huojialun.png" style="width: 100%;"
                                        v-if="items.r_wheel_SN != ''">
                                    <img src="../../../assets/imgs/huojia.png" style="width: 100%;" v-else>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <!--视觉检测2-->
                <!--涂油机-->
                <div style="position: absolute; bottom: 140px; right: 20px;" v-for="items in plcList_one.section_eleven"
                    :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                    <div>
                        <div>
                            <el-tooltip class="item" effect="dark" placement="top">
                                <template #content v-if="items.r_wheel_SN != ''">
                                    <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                    <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                    <div>r_part_status：{{ items.r_part_status }}</div>
                                    <div>r_part_process： {{ items.r_part_process }}</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <template #content v-else>
                                    <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div style="border: 1px solid #ffffff; width: 45px; height: 67px; ">
                                    <img src="../../../assets/imgs/tuyoujilun.png" style="width: 100%;"
                                        v-if="items.r_wheel_SN != ''">
                                    <img src="../../../assets/imgs/tuyouji.png" style="width: 100%;" v-else>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <!--涂油机-->

                <!--机械手-->
                <div style="position: absolute; bottom: 50px; right: 20px;" v-for="items in plcList_one.section_twelve">
                    <div>
                        <div>
                            <el-tooltip class="item" effect="dark" placement="top">
                                <template #content v-if="items.r_wheel_SN !== ''">
                                    <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                    <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                    <div>r_part_status：{{ items.r_part_status }}</div>
                                    <div>r_part_process： {{ items.r_part_process }}</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <template #content v-else>
                                    <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div class="box2_sto_yj">
                                    <img src="../../../assets/imgs/jxscl.png" style="width: 100%;"
                                        v-if="items.r_wheel_SN != ''">
                                    <img src="../../../assets/imgs/jxsk.png" style="width: 100%;" v-else>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <!--机械手-->
            </div>


            <!--车间之下的辊道线-->
            <div>

                <div class="box" style="height: 614px;">
                    <div v-for="items in plcList_one.section_one" class="box_sto"
                        :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                        <el-tooltip class="item" effect="dark" placement="right">
                            <template #content v-if="items.r_wheel_SN != ''">
                                <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                <div>r_part_status：{{ items.r_part_status }}</div>
                                <div>r_part_process： {{ items.r_part_process }}</div>
                                <div>stackerNo:{{ items.stackerNo }}</div>
                            </template>
                            <template #content v-else>
                                <div>目前暂无车轮信息</div>
                                <div>stackerNo:{{ items.stackerNo }}</div>
                            </template>
                            <div class="box_sto_dt">
                                <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                    <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                </div>
                                <div v-else>{{ items.stackerNo }}</div>
                            </div>
                        </el-tooltip>
                    </div>
                </div>

            </div>
            <!--车间之下的辊道线-->


            <!--下料口接驳台-->
            <div style="margin-top: 510px;margin-left: 35px;">
                <div style="display: flex;" v-for="(items, inst) in dataList" :key="inst">
                    <div class="x_div" v-for="(its, ins) in items" :key="ins"
                        :style="{ 'background-color': getBackgroundColor(its.enable, its.location_state), 'margin-left': ins === 0 ? '0px' : '15px' }">
                        <el-tooltip class="item" effect="dark" placement="right">
                            <template #content
                                v-if="its.stationType !== '' && its.bindSN !== '' && its.stationType !== null && its.bindSN !== null">
                                <div>库位编号：{{ its.stationCode }}</div>
                                <div>物料类型(图号)： {{ its.stationType }}</div>
                                <div>炉号： {{ its.heatNumber }}</div>
                                <div style="width: 76px;">车轮SN号：{{ its.bindSN }}</div>
                                <div>钢坯号：{{ its.billetID }}</div>
                                <div v-if="its.tray_type == 'SmallTray'">托盘类型：小托盘</div>
                                <div v-else>托盘类型：大托盘</div>
                            </template>
                            <template #content v-else>
                                <div>库位编号：{{ its.stationCode }}</div>
                                <div v-if="its.tray_type == 'SmallTray'">托盘类型：小托盘</div>
                                <div v-else>托盘类型：大托盘</div>
                                <div>目前暂无车轮信息</div>
                            </template>
                            <div style="width: 55px;height: 55px;">
                                <img src="../../../assets/imgs/huojialun.png" style="width: 100%;"
                                    v-if="its.stationType !== '' && its.bindSN !== '' && its.stationType !== null && its.bindSN !== null" />
                                <img src="../../../assets/imgs/huojia.png" style="width: 100%;"
                                    v-else-if="its.location_state == 'Stroge'">
                            </div>
                        </el-tooltip>
                    </div>
                </div>
            </div>
            <!--下料口接驳台-->
        </div>
    </div>


    <div>
        <el-dialog v-model="isModalVisible" title="机信息">
            <div>Name:
                <el-input v-model="dataFList[0].name" :disabled="true" style="width: 100px;"> </el-input>
            </div>

            <!--最大div-->
            <div>
                <!--第层列div-->
                <div style="display: flex;">
                    <div style="width: 30%;">
                        <p>power on
                        <div class="div_cl" v-if="dataFList[0].power_on == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>ready operate
                        <div class="div_cl" v-if="dataFList[0].ready_for_operate == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>ready auto start
                        <div class="div_cl" v-if="dataFList[0].ready_for_Auto_start == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>state JOG
                        <div class="div_cl" v-if="dataFList[0].state_JOG == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>state MDA
                        <div class="div_cl" v-if="dataFList[0].state_MDA == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>state AUTO
                        <div class="div_cl" v-if="dataFList[0].state_AUTO == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>safety doors closed
                        <div class="div_cl" v-if="dataFList[0].safetydoors_closed == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>spindel running
                        <div class="div_cl" v-if="dataFList[0].spindel_running == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>coolant ready
                        <div class="div_cl" v-if="dataFList[0].coolant_ready_operate == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>chip removal ready
                        <div class="div_cl" v-if="dataFList[0].coolant_ready_operate == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>communication IO
                        <div class="div_cl" v-if="dataFList[0].kommunikation_IO == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                    </div>
                    <div style="width: 30%;margin-left: 40px;">
                        <p>emergency stop
                        <div class="div_cl" v-if="dataFList[0].emergency_Stop_machine == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>hydraulic fault
                        <div class="div_cl" v-if="dataFList[0].hydraulik_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>feed drive fault
                        <div class="div_cl" v-if="dataFList[0].feeddrive_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>main drive fault
                        <div class="div_cl" v-if="dataFList[0].maindrive_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>machine fault
                        <div class="div_cl" v-if="dataFList[0].machine_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>coolant fault
                        <div class="div_cl" v-if="dataFList[0].coolant_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>chip removalfault
                        <div class="div_cl" v-if="dataFList[0].chipremoval_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>breakdown repair
                        <div class="div_cl" v-if="dataFList[0].breakdown_repair == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>breakdown mainten
                        <div class="div_cl" v-if="dataFList[0].breakdown_maintenance == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>breakdown tool change
                        <div class="div_cl" v-if="dataFList[0].breakdown_Toolchange == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>breakdown changeover
                        <div class="div_cl" v-if="dataFList[0].breakdown_changeover == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                    </div>
                    <div style="width: 30%;margin-left: 40px;">
                        <p>program running
                        <div class="div_cl" v-if="dataFList[0].programm_running == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>prog sel side 1
                        <div class="div_cl" v-if="dataFList[0].prog_sel_side_1 == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>prog sel side 2
                        <div class="div_cl" v-if="dataFList[0].prog_sel_side_2 == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>program side 1 finished
                        <div class="div_cl" v-if="dataFList[0].programm_side_1_finished == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>load side 1 finished
                        <div class="div_cl" v-if="dataFList[0].load_side_1_finished == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>program side 2 finished
                        <div class="div_cl" v-if="dataFList[0].programm_side_2_finished == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>load side 2 finished
                        <div class="div_cl" v-if="dataFList[0].load_side_2_finished == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>tool change magazine 1
                        <div class="div_cl" v-if="dataFList[0].toolchange_magazine_1 == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>tool change magazine 2
                        <div class="div_cl" v-if="dataFList[0].toolchange_magazine_2 == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                    </div>
                </div>
                <!--第一列div-->
                <div style="border-bottom: 1px solid grey;height: 1px;margin-top: 3px;"></div>
                <div style="display: flex;margin-top: 1px;">
                    <div style="width: 40%;">
                        <p style="display: flex;"><div style="width: 180px">changed tool mag 1</div>
                            <el-input v-model="dataFList[0].changed_tool_mag_1" :disabled="true" style="width: 100px;">
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 140px">dupl tool mag 1</div>
                            <el-input v-model="dataFList[0].dupl_tool_mag_1" :disabled="true" style="width: 100px;margin-left: 40px;">
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 180px">changed tool mag 2</div>
                            <el-input v-model="dataFList[0].changed_tool_mag_2" :disabled="true" style="width: 100px;"> 
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 180px">dupl tool mag 2</div>
                            <el-input v-model="dataFList[0].dupl_tool_mag_2" :disabled="true" style="width: 100px;">
                            </el-input>
                        </p>
                    </div>
                    <div style="width: 40%;margin-left: 40px;">
                        <p style="display: flex;"><div style="width: 140px">mart type</div>
                            <el-input v-model="dataFList[0].parttype" :disabled="true" style="width: 100px;" class="div_inp">
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 180px">part counter</div>
                            <el-input v-model="dataFList[0].partcounter" :disabled="true" style="width: 100px;">
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 180px">operator id</div>
                            <el-input v-model="dataFList[0].operator_ID" :disabled="true" style="width: 100px;">
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 180px">machine state</div>
                            <el-input v-model="dataFList[0].machine_state" :disabled="true" style="width: 100px;">
                            </el-input>
                        </p>
                    </div>
                </div>
            </div>
            <!--最大div-->
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    props: {
        dataList: {
            type: Array,
            required: true
        },
        plcList_one: {
            type: Array,
            required: true
        }
    },

    data() {
        return {
            isModalVisible: false,
            isModalVisible2: false,
            isModalVisible3: false,
            dataFList: []
        };
    },
    mounted() {

    },
    methods: {
        open(staname) {
            this.http.get('api/Readplc/Four_unit_plc?staname=' + staname).then(x => {
                this.dataFList = x;
                
                this.isModalVisible = true;
            })
                .catch(error => {
                    console.error('请求出错：', error);
                });
        },
        getBackgroundColor4(vk_state){
            if(vk_state==1){
                return 'lightgreen';
            }else if(vk_state==2){
                return '#3c3ca5';
            }else if(vk_state>=10 && vk_state<=20){
                return '#cccc33';
            }else if(vk_state>20){
                return '#d53d3d';
            }else{
                return 'rgb(195 176 176)';
            }
        },
        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';
                }
            }

        },
        getBackgroundColor2(r_wheel_SN) {
            if (r_wheel_SN != '') {
                return 'lightgreen';
            }
        }
    }
}
</script>

<style>
.contents {
    display: flex;
    align-items: flex-end;
}

.el-overlay-dialog {
    top: -100px;
}

.div_cl {
    width: 30px;
    height: 25px;
    float: right;
    background-color: greenyellow;
    text-align: center;
    padding-top: 5px;
    
}

.div_inp{
    margin-left: 40px;
}
.div_cl2 {
    width: 30px;
    height: 25px;
    float: right;
    background-color: darkgrey;
    text-align: center;
}

.box {
    background-color: rgb(129, 179, 182);
    width: 80px;
    height: 405px;
    margin-left: 3px;
    color: rgb(255, 255, 255);
    font-size: 16px;
}

.box_sto {
    width: 100%;
    border: 1px solid #000000;
    height: 45px;
    background-image: url(../../../assets/lines.png);
    background-size: 100%;
    margin-top: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box_sto_dt {
    height: 17px;
    text-align: center;
    line-height: 17px;
    margin-bottom: 3px;
}

.vk_div {
    height: 50px;
    width: 50px;
    margin-top: 300px;
    margin-left: 120px;
    border-radius: 10px;

}

.quan_div {
    border: 1px solid #000000;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    background-color: #818181;
    margin-top: -3px;
}

.box2_sto_baox {
    width: 137px;
    height: 45px;
    background-color: rgb(129, 179, 182);
    margin-left: 5px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    padding: 5px;
    text-align: center
}

.box_stoy {
    width: 35px;
    height: 35px;
    background-color: rgb(129, 179, 182);
    margin-left: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.box2_sto_yj {
    width: 70px;
    height: 70px;
    margin-left: 5px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    padding: 5px;
    text-align: center;
    background-color: rgb(129, 179, 182);
}

.x_div {
    border: 1px solid #757373;
    width: 57px;
    height: 52px;
}
</style>

 ´úÂë¹ÜÀí/PCS/WCS_Client/src/views/Homes/Homest/centerLeft2index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,983 @@
<template>
    <div class="container">

        <!--车间之上的辊道线-->
        <div class="box" style="margin-left: 203px;">
            <div v-for="items in plcList_one.section_four" class="box_sto"
                :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN)  }">
                <el-tooltip class="item" effect="dark" placement="right">
                    <template #content v-if=" items.r_part_process !='0'  ">
                        <div >r_wheel_SN：{{ items.r_wheel_SN }}</div>
                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                        <div>r_part_status：{{ items.r_part_status }}</div>
                        <div>r_part_process： {{ items.r_part_process }}</div>
                        <div>stackerNo:{{ items.stackerNo }}</div>
                    </template>
                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                    <div class="box_sto_dt">
                        <div class="quan_div" v-if="items.r_part_process != '0'">
                            <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                        </div>
                        <div v-else>{{ items.stackerNo }}</div>
                    </div>
                </el-tooltip>
            </div>
        </div>
        <!--车间之上的辊道线-->

        <!--上车间-->
        <div style="margin-top: -6px;margin-left: 58px;">
            <div style="display: flex;">
                <div style="margin-top: 67px;">
                    <!--左上角车间-->
                    <div v-for="(items, index) in plcList_one.section_five">
                        <div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 2" v-on:click="open('Machine5')">
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                            <div style="width: 100px;">
                                <el-tooltip class="item" effect="dark" placement="right">
                                    <template #content v-if="items.r_wheel_SN !=''">
                                        <div >r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                    <div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </el-tooltip>
                            </div>
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                        </div>
                    </div>
                    <!--左上角车间-->

                    <!--车间中间车轮-->
                    <div style="display: flex;margin-left: -19px;margin-top: 5px;">
                        <!--靠左车轮-->
                        <div style="display: flex;">
                            <div v-for="items in plcList_one.section_six">
                                <el-tooltip class="item" effect="dark" placement="top">
                                    <template #content v-if="items.r_wheel_SN !=''">
                                        <div >r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                    <div class="box_stoy">
                                        <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                            <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                        </div>
                                        <div v-else>{{ items.stackerNo }}</div>
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                        <!--靠左车轮-->

                        <!--靠右车轮-->
                        <div style="display: flex;margin-left: 5px;">
                            <div v-for="items in plcList_one.section_seven">
                                <el-tooltip class="item" effect="dark" placement="top">
                                    <template #content v-if="items.r_wheel_SN !=''">
                                        <div >r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                    <div class="box_stoy">
                                        <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                            <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                        </div>
                                        <div v-else>{{ items.stackerNo }}</div>
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                        <!--靠右车轮-->
                    </div>
                    <!--左车间中间车轮-->
                    
                    <!--左下角车间-->
                    <div v-for="(items, index) in plcList_one.section_five">
                        <div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 3" v-on:click="open('Machine6')">
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                            <div style="width: 100px;">
                                <el-tooltip class="item" effect="dark" placement="right">
                                    <template #content v-if="items.r_wheel_SN !=''">
                                        <div >r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                    <div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </el-tooltip>
                            </div>
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                        </div>
                    </div>
                    <!--左下角车间-->

                </div>
                <!--左车间-->

                <!--上中下间辊道线和车轮圈-->
                <div>
                    <!--上车间中间辊道-->
                    <div class="box" style="height: 102px;">

                        <div v-for="items in plcList_one.section_three" class="box_sto"
                            :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                            <el-tooltip class="item" effect="dark" placement="right">
                                <template #content v-if="items.r_wheel_SN !=''">
                                        <div >r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div class="box_sto_dt">
                                    <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                    <!--上车间中间辊道-->

                    <!--下车间中间辊道-->
                    <div class="box" style="height: 102px;margin-top: 45px;">
                        <div v-for="items in plcList_one.section_two" class="box_sto"
                            :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                            <el-tooltip class="item" effect="dark" placement="right">
                                <template #content v-if="items.r_wheel_SN !=''">
                                        <div >r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div class="box_sto_dt">
                                    <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                    <!--下车间中间辊道-->
                </div>
                <!--上车间辊道线-->


                <!--右车间-->
                <div>
                    <!--机械手-->
                <div style="margin-left: 30px;margin-top: -35px;" v-for="items in plcList_one.section_ten" v-on:click="isModalVisible2 = true"
                >
                    <div>
                        <div>
                            <el-tooltip class="item" effect="dark" placement="top">
                                <template #content v-if="items.r_wheel_SN !==''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                            </template>
                                <div class="box2_sto_yj" :style="{ 'background-color': getBackgroundColor4(items.g_gantry_state) }">
                                    <img src="../../../assets/imgs/jxscl.png" style="width: 100%;" v-if="items.r_wheel_SN !=''">
                                    <img src="../../../assets/imgs/jxsk.png" style="width: 100%;" v-else>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                    <el-dialog v-model="isModalVisible2" title="机械手">
                            <div>Name:
                                <el-input v-model="items.g_name" :disabled="true" style="width: 100px;">
                                </el-input>
                            </div>

                            <!--最大div-->
                            <div>
                                <!--第层列div-->
                                <div style="display: flex;">
                                    <div style="width: 40%;">
                                        <p>power on
                                        <div class="div_cl" v-if="items.g_power_on == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>ready operate
                                        <div class="div_cl" v-if="items.g_ready_for_operate == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>ready auto start
                                        <div class="div_cl" v-if="items.g_ready_for_auto_start == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>state JOG
                                        <div class="div_cl" v-if="items.g_state_JOG == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>state MDA
                                        <div class="div_cl" v-if="items.g_state_MDA == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>state AUTO
                                        <div class="div_cl" v-if="items.g_state_AUTO == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>communication IO
                                        <div class="div_cl" v-if="items.g_communication_IO == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                    </div>
                                    <div style="width: 40%;margin-left: 40px;">
                                        <p>emergency stop
                                        <div class="div_cl" v-if="items.g_emergency_stop_portal == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>drive fault
                                        <div class="div_cl" v-if="items.g_drive_fault == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>portal fault
                                        <div class="div_cl" v-if="items.g_portal_fault == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>program running
                                        <div class="div_cl" v-if="items.g_programm_running == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </el-dialog>
                </div>
                <!--机械手-->
                <div style="height: 30px;"></div>
                    <!--右上角车间-->
                    <div v-for="(items, index) in plcList_one.section_five">

                            <div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 0" v-on:click="open('Machine7')">
                                <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                            <div style="width: 100px;">
                                <el-tooltip class="item" effect="dark" placement="right">
                                    <template #content v-if="items.r_wheel_SN !=''">
                                        <div >r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                    <div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </el-tooltip>
                            </div>
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                        </div>
                    </div>
                    <!--右上角车间-->


                    <!--右车间中间车轮-->
                    <div style="display: flex;margin-top: 5px;">
                        
                        <!--靠左车轮-->
                        <div style="display: flex;">
                            <div v-for="items in plcList_one.section_eight">
                                <el-tooltip class="item" effect="dark" placement="right">
                                    <template #content v-if="items.r_wheel_SN !=''">
                                        <div >r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                    <div class="box_stoy">
                                        <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                            <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                        </div>
                                        <div v-else>{{ items.stackerNo }}</div>
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                        <!--靠左车轮-->

                         <!--靠右车轮-->
                        <div style="display: flex;margin-left: 5px;">
                            <div v-for="items in plcList_one.section_nine">
                                <el-tooltip class="item" effect="dark" placement="right">
                                    <template #content v-if="items.r_wheel_SN !=''">
                                        <div >r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                    <div class="box_stoy">
                                        <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                            <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                        </div>
                                        <div v-else>{{ items.stackerNo }}</div>
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                        <!--靠右车轮-->
                    </div>
                     <!--右车间中间车轮-->
                    
                    <!--右下角车间-->
                    <div v-for="(items, index) in plcList_one.section_five">
                        
                        <div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 1" v-on:click="open('Machine8')">
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                            <div style="width: 100px;">
                                <el-tooltip class="item" effect="dark" placement="right">
                                    <template #content v-if="items.r_wheel_SN !=''">
                                        <div >r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </el-tooltip>
                            </div>
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                        </div>
                    </div>
                    <!--右下角车间-->

                </div>
                <!--右车间-->


            </div>
        </div>
        <!--上车间-->


        <div style="display: flex;margin-top: -6px;">

            <div style="position: relative;width: 200px;">
                 <!--视觉检测1-->
                 <div style="position: absolute; bottom: 140px; right: 140px;" v-for="items in plcList_one.section_thirteen" :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                    <div>
                        <div>
                            <el-tooltip class="item" effect="dark" placement="top">
                                <template #content v-if="items.r_wheel_SN !=''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div style="border: 1px solid #ffffff; width: 45px; height: 42px; ">
                                    <img src="../../../assets/imgs/huojialun.png" style="width: 100%;" v-if="items.r_wheel_SN !=''">
                                    <img src="../../../assets/imgs/huojia.png" style="width: 100%;" v-else>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <!--视觉检测1-->
                <!--视觉检测2-->
                <div style="position: absolute; bottom: 140px; right: 80px;" v-for="items in plcList_one.section_fourteen" :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                    <div>
                        <div>
                            <el-tooltip class="item" effect="dark" placement="top">
                                <template #content v-if="items.r_wheel_SN !=''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div style="border: 1px solid #ffffff; width: 45px; height: 42px; ">
                                    <img src="../../../assets/imgs/huojialun.png" style="width: 100%;" v-if="items.r_wheel_SN !=''">
                                    <img src="../../../assets/imgs/huojia.png" style="width: 100%;" v-else>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <!--视觉检测2-->
                <!--涂油机-->
                <div style="position: absolute; bottom: 140px; right: 20px;" v-for="items in plcList_one.section_eleven" :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                    <div>
                        <div>
                            <el-tooltip class="item" effect="dark" placement="top">
                                <template #content v-if="items.r_wheel_SN !=''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div style="border: 1px solid #ffffff; width: 45px; height: 67px; ">
                                    <img src="../../../assets/imgs/tuyoujilun.png" style="width: 100%;" v-if="items.r_wheel_SN !=''">
                                    <img src="../../../assets/imgs/tuyouji.png" style="width: 100%;" v-else>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <!--涂油机-->

                <!--机械手-->
                <div style="position: absolute; bottom: 50px; right: 20px;" v-for="items in plcList_one.section_twelve">
                    <div>
                        <div>
                            <el-tooltip class="item" effect="dark" placement="top">
                                <template #content v-if="items.r_wheel_SN !==''">
                                        <div >r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                            </template>
                                <div class="box2_sto_yj">
                                    <img src="../../../assets/imgs/jxscl.png" style="width: 100%;" v-if="items.r_wheel_SN !=''">
                                    <img src="../../../assets/imgs/jxsk.png" style="width: 100%;" v-else>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <!--机械手-->
            </div>


            <!--车间之下的辊道线-->
            <div>

                <div class="box" style="height: 614px;">
                    <div v-for="items in plcList_one.section_one" class="box_sto"
                        :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                        <el-tooltip class="item" effect="dark" placement="right">
                            <template #content v-if="items.r_wheel_SN != ''">
                                <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                <div>r_part_status：{{ items.r_part_status }}</div>
                                <div>r_part_process： {{ items.r_part_process }}</div>
                                <div>stackerNo:{{ items.stackerNo }}</div>
                            </template>
                            <template #content v-else>
                                <div>目前暂无车轮信息</div>
                                <div>stackerNo:{{ items.stackerNo }}</div>
                            </template>
                            <div class="box_sto_dt">
                                <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                    <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                </div>
                                <div v-else>{{ items.stackerNo }}</div>
                            </div>
                        </el-tooltip>
                    </div>
                </div>

            </div>
            <!--车间之下的辊道线-->

            <!--下料·口-->
        <div style="margin-top: 510px;margin-left: 35px;">
            <div style="display: flex;">
                <div style="display: flex;" v-for="(items, inst) in dataList" :key="inst">
                <div class="x_div" v-for="(its, ins) in items" :key="ins"
                    :style="{ 'background-color': getBackgroundColor(its.enable, its.location_state), 'margin-left': ins === 0 ? '0px' : '15px' }">
                    <el-tooltip class="item" effect="dark" placement="right">
                        <template #content
                            v-if="its.stationType !== '' && its.bindSN !== '' && its.stationType !== null && its.bindSN !== null">
                            <div>库位编号：{{ its.stationCode }}</div>
                            <div>物料类型(图号)： {{ its.stationType }}</div>
                            <div>炉号： {{ its.heatNumber }}</div>
                            <div style="width: 76px;">车轮SN号：{{ its.bindSN }}</div>
                            <div>钢坯号：{{ its.billetID }}</div>
                            <div v-if="its.tray_type == 'SmallTray'">托盘类型：小托盘</div>
                            <div v-else>托盘类型：大托盘</div>
                        </template>
                        <template #content v-else>
                            <div>库位编号：{{ its.stationCode }}</div>
                            <div v-if="its.tray_type == 'SmallTray'">托盘类型：小托盘</div>
                            <div v-else>托盘类型：大托盘</div>
                            <div>目前暂无车轮信息</div>
                        </template>
                        <div style="width: 55px;height: 55px;">
                            <img src="../../../assets/imgs/huojialun.png" style="width: 100%;" v-if="its.stationType !== '' && its.bindSN !== '' && its.stationType !== null && its.bindSN !== null" />
                            <img src="../../../assets/imgs/huojia.png" style="width: 100%;" v-else-if="its.location_state=='Stroge'">
                        </div>
                    </el-tooltip>
                </div>
            </div>
            </div>
        </div>

        <!--下料口-->
        </div>
    </div>
    <div>
        <el-dialog v-model="isModalVisible" title="机信息">
            <div>Name:
                <el-input v-model="dataFList[0].name" :disabled="true" style="width: 100px;"> </el-input>
            </div>

            <!--最大div-->
            <div>
                <!--第层列div-->
                <div style="display: flex;">
                    <div style="width: 30%;">
                        <p>power on
                        <div class="div_cl" v-if="dataFList[0].power_on == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>ready operate
                        <div class="div_cl" v-if="dataFList[0].ready_for_operate == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>ready auto start
                        <div class="div_cl" v-if="dataFList[0].ready_for_Auto_start == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>state JOG
                        <div class="div_cl" v-if="dataFList[0].state_JOG == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>state MDA
                        <div class="div_cl" v-if="dataFList[0].state_MDA == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>state AUTO
                        <div class="div_cl" v-if="dataFList[0].state_AUTO == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>safety doors closed
                        <div class="div_cl" v-if="dataFList[0].safetydoors_closed == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>spindel running
                        <div class="div_cl" v-if="dataFList[0].spindel_running == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>coolant ready
                        <div class="div_cl" v-if="dataFList[0].coolant_ready_operate == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>chip removal ready
                        <div class="div_cl" v-if="dataFList[0].coolant_ready_operate == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>communication IO
                        <div class="div_cl" v-if="dataFList[0].kommunikation_IO == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                    </div>
                    <div style="width: 30%;margin-left: 40px;">
                        <p>emergency stop
                        <div class="div_cl" v-if="dataFList[0].emergency_Stop_machine == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>hydraulic fault
                        <div class="div_cl" v-if="dataFList[0].hydraulik_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>feed drive fault
                        <div class="div_cl" v-if="dataFList[0].feeddrive_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>main drive fault
                        <div class="div_cl" v-if="dataFList[0].maindrive_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>machine fault
                        <div class="div_cl" v-if="dataFList[0].machine_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>coolant fault
                        <div class="div_cl" v-if="dataFList[0].coolant_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>chip removalfault
                        <div class="div_cl" v-if="dataFList[0].chipremoval_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>breakdown repair
                        <div class="div_cl" v-if="dataFList[0].breakdown_repair == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>breakdown mainten
                        <div class="div_cl" v-if="dataFList[0].breakdown_maintenance == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>breakdown tool change
                        <div class="div_cl" v-if="dataFList[0].breakdown_Toolchange == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>breakdown changeover
                        <div class="div_cl" v-if="dataFList[0].breakdown_changeover == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                    </div>
                    <div style="width: 30%;margin-left: 40px;">
                        <p>program running
                        <div class="div_cl" v-if="dataFList[0].programm_running == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>prog sel side 1
                        <div class="div_cl" v-if="dataFList[0].prog_sel_side_1 == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>prog sel side 2
                        <div class="div_cl" v-if="dataFList[0].prog_sel_side_2 == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>program side 1 finished
                        <div class="div_cl" v-if="dataFList[0].programm_side_1_finished == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>load side 1 finished
                        <div class="div_cl" v-if="dataFList[0].load_side_1_finished == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>program side 2 finished
                        <div class="div_cl" v-if="dataFList[0].programm_side_2_finished == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>load side 2 finished
                        <div class="div_cl" v-if="dataFList[0].load_side_2_finished == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>tool change magazine 1
                        <div class="div_cl" v-if="dataFList[0].toolchange_magazine_1 == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>tool change magazine 2
                        <div class="div_cl" v-if="dataFList[0].toolchange_magazine_2 == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                    </div>
                </div>
                <!--第一列div-->
                <div style="border-bottom: 1px solid grey;height: 1px;margin-top: 3px;"></div>
                <div style="display: flex;margin-top: 1px;">
                    <div style="width: 40%;">
                        <p style="display: flex;"><div style="width: 180px">changed tool mag 1</div>
                            <el-input v-model="dataFList[0].changed_tool_mag_1" :disabled="true" style="width: 100px;">
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 140px">dupl tool mag 1</div>
                            <el-input v-model="dataFList[0].dupl_tool_mag_1" :disabled="true" style="width: 100px;margin-left: 40px;">
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 180px">changed tool mag 2</div>
                            <el-input v-model="dataFList[0].changed_tool_mag_2" :disabled="true" style="width: 100px;"> 
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 180px">dupl tool mag 2</div>
                            <el-input v-model="dataFList[0].dupl_tool_mag_2" :disabled="true" style="width: 100px;">
                            </el-input>
                        </p>
                    </div>
                    <div style="width: 40%;margin-left: 40px;">
                        <p style="display: flex;"><div style="width: 140px">mart type</div>
                            <el-input v-model="dataFList[0].parttype" :disabled="true" style="width: 100px;" class="div_inp">
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 180px">part counter</div>
                            <el-input v-model="dataFList[0].partcounter" :disabled="true" style="width: 100px;">
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 180px">operator id</div>
                            <el-input v-model="dataFList[0].operator_ID" :disabled="true" style="width: 100px;">
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 180px">machine state</div>
                            <el-input v-model="dataFList[0].machine_state" :disabled="true" style="width: 100px;">
                            </el-input>
                        </p>
                    </div>
                </div>
            </div>
            <!--最大div-->
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    props: {
        dataList: {
            type: Array,
            required: true
        },
        plcList_one: {
            type: Array,
            required: true
        }
    },
    watch: {
        plcList_one(newVal, oldVal) {
            console.log('er:', newVal);
        }
    },
    data() {
        return {
            isModalVisible: false,
            isModalVisible2: false,
            isModalVisible3: false,
            dataFList: []
        };
    },
    mounted() {

    },
    methods: {
        open(staname) {
            this.http.get('api/Readplc/Four_unit_plc2?staname=' + staname).then(x => {
                this.dataFList = x;
                this.isModalVisible = true;
            })
                .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';
                }
            }

        },
        getBackgroundColor4(vk_state){
            if(vk_state==1){
                return 'lightgreen';
            }else if(vk_state==2){
                return '#3c3ca5';
            }else if(vk_state>=10 && vk_state<=20){
                return '#cccc33';
            }else if(vk_state>20){
                return '#d53d3d';
            }else{
                return 'rgb(195 176 176)';
            }
        },
        getBackgroundColor2(r_wheel_SN) {
            if (r_wheel_SN != '') {
                return 'lightgreen';
            }
        }
    }
}
</script>

<style>
.contents {
    display: flex;
    align-items: flex-end;
}


.box {
    background-color: rgb(129, 179, 182);
    width: 80px;
    height: 405px;
    margin-left: 3px;
    color: rgb(255, 255, 255);
    font-size: 16px;
}

.box_sto {
    width: 100%;
    border: 1px solid #000000;
    height: 45px;
    background-image: url(../../../assets/lines.png);
    background-size: 100%;
    margin-top: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box_sto_dt {
    height: 17px;
    text-align: center;
    line-height: 17px;
    margin-bottom: 3px;
}
.div_cl {
    width: 30px;
    height: 25px;
    float: right;
    background-color: greenyellow;
    text-align: center;
    padding-top: 5px;
}

.div_inp{
    margin-left: 40px;
}
.div_cl2 {
    width: 30px;
    height: 25px;
    float: right;
    background-color: darkgrey;
    text-align: center;
}

.quan_div {
    border: 1px solid #000000;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    background-color: #818181;
    margin-top: -3px;
}

.box2_sto_baox {
    width: 137px;
    height: 45px;
    background-color: rgb(129, 179, 182);
    margin-left: 5px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    padding: 5px;
    text-align: center
}

.box_stoy {
    width: 35px;
    height: 35px;
    background-color: rgb(129, 179, 182);
    margin-left: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.box2_sto_yj {
    width: 70px;
    height: 70px;
    margin-left: 5px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    padding: 5px;
    text-align: center;
    background-color: rgb(129, 179, 182);
}

.x_div {
    border: 1px solid #757373;
    width: 57px;
    height: 52px;
}


</style>

 ´úÂë¹ÜÀí/PCS/WCS_Client/src/views/Homes/Homest/centerLeft3index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1135 @@
<template>
    <div class="container">

        <!--车间之上的辊道线-->
        <div class="box" style="margin-left: 170px;">
            <div v-for="items in plcList_one.section_four" class="box_sto"
                :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                <el-tooltip class="item" effect="dark" placement="right">
                    <template #content v-if="items.r_part_process != '0'">
                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                        <div>r_part_status：{{ items.r_part_status }}</div>
                        <div>r_part_process： {{ items.r_part_process }}</div>
                        <div>stackerNo:{{ items.stackerNo }}</div>
                    </template>
                    <template #content v-else>
                        <div>目前暂无车轮信息</div>
                        <div>stackerNo:{{ items.stackerNo }}</div>
                    </template>
                    <div class="box_sto_dt">
                        <div class="quan_div" v-if="items.r_part_process != '0'">
                            <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                        </div>
                        <div v-else>{{ items.stackerNo }}</div>
                    </div>
                </el-tooltip>
            </div>
        </div>
        <!--车间之上的辊道线-->

        <!--上车间-->
        <div style="margin-top: -6px;margin-left: 24px;">
            <div style="display: flex;">
                <div style="margin-top: 67px;">
                    <!--左上角车间-->
                    <div v-for="(items, index) in plcList_one.section_five">
                        <div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 1" v-on:click="open('Machine9')">
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                            <div style="width: 100px;">
                                <el-tooltip class="item" effect="dark" placement="right">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div style="width: 100px;">车轮SN号：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </el-tooltip>
                            </div>
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                        </div>
                    </div>
                    <!--左上角车间-->

                    <!--车间中间车轮-->
                    <div style="display: flex;margin-left: 5px;margin-top: 5px;">
                        <!--靠左车轮-->
                        <div style="display: flex;">
                            <div v-for="items in plcList_one.section_six">
                                <el-tooltip class="item" effect="dark" placement="top">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="box_stoy">
                                        <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                            <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                        </div>
                                        <div v-else>{{ items.stackerNo }}</div>
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                        <!--靠左车轮-->

                        <!--靠右车轮-->
                        <div style="display: flex;margin-left: 5px;">
                            <div v-for="items in plcList_one.section_seven">
                                <el-tooltip class="item" effect="dark" placement="top">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="box_stoy">
                                        <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                            <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                        </div>
                                        <div v-else>{{ items.stackerNo }}</div>
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                        <!--靠右车轮-->
                    </div>
                    <!--左车间中间车轮-->

                    <!--左下角车间-->
                    <div v-for="(items, index) in plcList_one.section_five">
                        <div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 2" v-on:click="open('Machine10')">
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                            <div style="width: 100px;">
                                <el-tooltip class="item" effect="dark" placement="right">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </el-tooltip>
                            </div>
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                        </div>
                    </div>
                    <!--左下角车间-->

                </div>
                <!--左车间-->

                <!--上中下间辊道线和车轮圈-->
                <div>
                    <!--上车间中间辊道-->
                    <div class="box" style="height: 102px;">

                        <div v-for="items in plcList_one.section_three" class="box_sto"
                            :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                            <el-tooltip class="item" effect="dark" placement="left">
                                <template #content v-if="items.r_wheel_SN != ''">
                                    <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                    <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                    <div>r_part_status：{{ items.r_part_status }}</div>
                                    <div>r_part_process： {{ items.r_part_process }}</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <template #content v-else>
                                    <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div class="box_sto_dt">
                                    <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                    <!--上车间中间辊道-->

                    <!--下车间中间辊道-->
                    <div class="box" style="height: 102px;margin-top: 45px;">
                        <div v-for="items in plcList_one.section_two" class="box_sto"
                            :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                            <el-tooltip class="item" effect="dark" placement="left">
                                <template #content v-if="items.r_wheel_SN != ''">
                                    <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                    <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                    <div>r_part_status：{{ items.r_part_status }}</div>
                                    <div>r_part_process： {{ items.r_part_process }}</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <template #content v-else>
                                    <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div class="box_sto_dt">
                                    <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                    <!--下车间中间辊道-->
                </div>
                <!--上车间辊道线-->


                <!--右车间-->
                <div>
                    <!--VK5-->
                    <div style="margin-left: 30px;margin-top: -200px;" v-for="items in plcList_one.section_fifteen">
                        <div class="box2_sto_yj2" v-on:click="isModalVisible3 = true" :style="{ 'background-color': getBackgroundColor4(items.vk_state) }">
                            <div style="text-align: center;line-height: 50px;">VK5</div>
                <el-dialog v-model="isModalVisible3" title="VK5">
                    <div>Name:
                        <el-input v-model="items.name" :disabled="true" style="width: 100px;"> </el-input>
                    </div>
                    <!--最大div-->
                    <div>
                        <!--第层列div-->
                        <div style="display: flex;">
                            <div style="width: 30%;">
                                <p>Power on
                                <div class="div_cl" v-if="items.power_on == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>ready operate
                                <div class="div_cl" v-if="items.ready_for_operate == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>ready auto start
                                <div class="div_cl" v-if="items.ready_for_Auto_start == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>VK fault
                                <div class="div_cl" v-if="items.vK_Fault == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>safety ok
                                <div class="div_cl" v-if="items.safety_OK == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                            </div>
                            <div style="width: 30%;margin-left: 40px;">
                                <p>state jog input B1
                                <div class="div_cl" v-if="items.state_JOG_bag1 == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>state auto input B1
                                <div class="div_cl" v-if="items.state_AUTO_bag1 == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>input B1 fault
                                <div class="div_cl" v-if="items.bag_in_1_Fault == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>state jog input B2
                                <div class="div_cl" v-if="items.state_JOG_bag2 == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>state auto input B2
                                <div class="div_cl" v-if="items.state_AUTO_bag2 == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>input B2 fault
                                <div class="div_cl" v-if="items.bag_in_2_Fault == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>

                                <p>state jog output B1
                                <div class="div_cl" v-if="items.state_JOG_bag3 == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>state auto output B1
                                <div class="div_cl" v-if="items.state_AUTO_bag3 == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>output B1 fault
                                <div class="div_cl" v-if="items.bag_out_1_Fault == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                
                            </div>
                            <div style="width: 30%;margin-left: 40px;">
                                <p>safety door 1 closed
                                <div class="div_cl" v-if="items.safetydoor_1_closed == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>safety door 2 closed
                                <div class="div_cl" v-if="items.safetydoor_2_closed == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>safety door 3 closed
                                <div class="div_cl" v-if="items.safetydoor_3_closed == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                                <p>safety door 4 closed
                                <div class="div_cl" v-if="items.safetydoor_4_closed == true">1</div>
                                <div class="div_cl2" v-else>0</div>
                                </p>
                            </div>
                        </div>

                    </div>
                    <!--最大div-->
                </el-dialog>
                        </div>
                    </div>
                    <!--VK5-->


                    <!--机械手-->
                    <div style="margin-left: 30px;margin-top: 115px;" v-for="items in plcList_one.section_ten" v-on:click="isModalVisible2 = true"
                    >
                        <div>
                            <div>
                                <el-tooltip class="item" effect="dark" placement="left">
                                    <template #content v-if="items.r_wheel_SN !== ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="box2_sto_yj" :style="{ 'background-color': getBackgroundColor4(items.g_gantry_state) }">
                                        <img src="../../../assets/imgs/jxscl.png" style="width: 100%;"
                                            v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/jxsk.png" style="width: 100%;" v-else>
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                        <el-dialog v-model="isModalVisible2" title="机械手">
                            <div>Name:
                                <el-input v-model="items.g_name" :disabled="true" style="width: 100px;">
                                </el-input>
                            </div>

                            <!--最大div-->
                            <div>
                                <!--第层列div-->
                                <div style="display: flex;">
                                    <div style="width: 40%;">
                                        <p>power on
                                        <div class="div_cl" v-if="items.g_power_on == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>ready operate
                                        <div class="div_cl" v-if="items.g_ready_for_operate == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>ready auto start
                                        <div class="div_cl" v-if="items.g_ready_for_auto_start == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>state JOG
                                        <div class="div_cl" v-if="items.g_state_JOG == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>state MDA
                                        <div class="div_cl" v-if="items.g_state_MDA == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>state AUTO
                                        <div class="div_cl" v-if="items.g_state_AUTO == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>communication IO
                                        <div class="div_cl" v-if="items.g_communication_IO == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                    </div>
                                    <div style="width: 40%;margin-left: 40px;">
                                        <p>emergency stop
                                        <div class="div_cl" v-if="items.g_emergency_stop_portal == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>drive fault
                                        <div class="div_cl" v-if="items.g_drive_fault == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>portal fault
                                        <div class="div_cl" v-if="items.g_portal_fault == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                        <p>program running
                                        <div class="div_cl" v-if="items.g_programm_running == true">1</div>
                                        <div class="div_cl2" v-else>0</div>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </el-dialog>
                    </div>
                    <!--机械手-->
                    <div style="height: 30px;"></div>
                    <!--右上角车间-->
                    <div v-for="(items, index) in plcList_one.section_five">

                        <div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 3" v-on:click="open('Machine11')"> 
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                            <div style="width: 100px;">
                                <el-tooltip class="item" effect="dark" placement="left">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </el-tooltip>
                            </div>
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                        </div>
                    </div>
                    <!--右上角车间-->


                    <!--右车间中间车轮-->
                    <div style="display: flex;margin-top: 5px;">

                        <!--靠左车轮-->
                        <div style="display: flex;">
                            <div v-for="items in plcList_one.section_eight">
                                <el-tooltip class="item" effect="dark" placement="left">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="box_stoy">
                                        <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                            <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                        </div>
                                        <div v-else>{{ items.stackerNo }}</div>
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                        <!--靠左车轮-->

                        <!--靠右车轮-->
                        <div style="display: flex;margin-left: 5px;">
                            <div v-for="items in plcList_one.section_nine">
                                <el-tooltip class="item" effect="dark" placement="left">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="box_stoy">
                                        <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                            <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                        </div>
                                        <div v-else>{{ items.stackerNo }}</div>
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                        <!--靠右车轮-->
                    </div>
                    <!--右车间中间车轮-->

                    <!--右下角车间-->
                    <div v-for="(items, index) in plcList_one.section_five">

                        <div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 0" v-on:click="open('Machine12')">
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                            <div style="width: 100px;">
                                <el-tooltip class="item" effect="dark" placement="left">
                                    <template #content v-if="items.r_wheel_SN != ''">
                                        <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                        <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                        <div>r_part_status：{{ items.r_part_status }}</div>
                                        <div>r_part_process： {{ items.r_part_process }}</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <template #content v-else>
                                        <div>目前暂无车轮信息</div>
                                        <div>stackerNo:{{ items.stackerNo }}</div>
                                    </template>
                                    <div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </el-tooltip>
                            </div>
                            <div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
                        </div>
                    </div>
                    <!--右下角车间-->

                </div>
                <!--右车间-->


            </div>
        </div>
        <!--上车间-->


        <div style="display: flex;margin-top: -6px;">

            <div style="position: relative;width: 165px;">

                <!--涂油机-->
                <div style="position: absolute; bottom: 140px; right: 80px;" v-for="items in plcList_one.section_eleven"
                    :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                    <div>
                        <div>
                            <el-tooltip class="item" effect="dark" placement="top">
                                <template #content v-if="items.r_wheel_SN != ''">
                                    <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                    <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                    <div>r_part_status：{{ items.r_part_status }}</div>
                                    <div>r_part_process： {{ items.r_part_process }}</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <template #content v-else>
                                    <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div style="border: 1px solid #ffffff; width: 45px; height: 67px; ">
                                    <img src="../../../assets/imgs/tuyoujilun.png" style="width: 100%;"
                                        v-if="items.r_wheel_SN != ''">
                                    <img src="../../../assets/imgs/tuyouji.png" style="width: 100%;" v-else>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <!--涂油机-->

                <!--机械手-->
                <div style="position: absolute; bottom: 60px; right: 20px;"
                    v-for="items in plcList_one.section_twelve">
                    <div>
                        <div>
                            <el-tooltip class="item" effect="dark" placement="top">
                                <template #content v-if="items.r_wheel_SN !== ''">
                                    <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                    <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                    <div>r_part_status：{{ items.r_part_status }}</div>
                                    <div>r_part_process： {{ items.r_part_process }}</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <template #content v-else>
                                    <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div class="box2_sto_yj">
                                    <img src="../../../assets/imgs/jxscl.png" style="width: 100%;"
                                        v-if="items.r_wheel_SN != ''">
                                    <img src="../../../assets/imgs/jxsk.png" style="width: 100%;" v-else>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <!--机械手-->

                <!--接驳台-->
                <div style="position: absolute; bottom: 1px; right: 5px;display: flex;">
                    <div style="display: flex;" v-for="(items, inst) in dataList[2]" :key="inst">
                        <div class="jie_div" v-for="(its, ins) in items" :key="ins"
                            :style="{ 'background-color': getBackgroundColor(its.enable, its.location_state), 'margin-left': ins === 0 ? '0px' : '15px' }">
                            <el-tooltip class="item" effect="dark" placement="right">
                                <template #content
                                    v-if="its.stationType !== '' && its.bindSN !== '' && its.stationType !== null && its.bindSN !== null">
                                    <div>库位编号：{{ its.stationCode }}</div>
                                    <div>物料类型(图号)： {{ its.stationType }}</div>
                                    <div>炉号： {{ its.heatNumber }}</div>
                                    <div style="width: 76px;">车轮SN号：{{ its.bindSN }}</div>
                                    <div>钢坯号：{{ its.billetID }}</div>
                                    <div v-if="its.tray_type == 'SmallTray'">托盘类型：小托盘</div>
                                    <div v-else>托盘类型：大托盘</div>
                                </template>
                                <template #content v-else>
                                    <div>库位编号：{{ its.stationCode }}</div>
                                    <div v-if="its.tray_type == 'SmallTray'">托盘类型：小托盘</div>
                                    <div v-else>托盘类型：大托盘</div>
                                    <div>目前暂无车轮信息</div>
                                </template>
                                <div style="width: 57px;height: 52px;">
                                    <img src="../../../assets/imgs/huojialun.png" style="width: 100%;"
                                        v-if="its.stationType !== '' && its.bindSN !== '' && its.stationType !== null && its.bindSN !== null" />
                                    <img src="../../../assets/imgs/huojia.png" style="width: 100%;"
                                        v-else-if="its.location_state == 'Stroge'">
                                </div>
                            </el-tooltip>
                        </div>
                    </div>

                </div>
                <!--接驳台-->
            </div>


            <!--车间之下的辊道线-->
            <div>

                <div class="box" style="height: 513px;">
                    <div v-for="items in plcList_one.section_one" class="box_sto"
                        :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                        <el-tooltip class="item" effect="dark" placement="right">
                            <template #content v-if="items.r_wheel_SN != ''">
                                <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                <div>r_part_status：{{ items.r_part_status }}</div>
                                <div>r_part_process： {{ items.r_part_process }}</div>
                                <div>stackerNo:{{ items.stackerNo }}</div>
                            </template>
                            <template #content v-else>
                                <div>目前暂无车轮信息</div>
                                <div>stackerNo:{{ items.stackerNo }}</div>
                            </template>
                            <div class="box_sto_dt">
                                <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                    <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                </div>
                                <div v-else>{{ items.stackerNo }}</div>
                            </div>
                        </el-tooltip>
                    </div>
                </div>

            </div>
            <!--车间之下的辊道线-->

            <div style="margin-top: 355px;">
                <!--下车间中间辊道-->
                <div class="box" style="height: 66px;display: flex;width: 200px;">
                        <div v-for="items in plcList_one.section_thirteen" class="box_sto2"
                            :style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
                            <el-tooltip class="item" effect="dark" placement="left">
                                <template #content v-if="items.r_wheel_SN != ''">
                                    <div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
                                    <div>r_wheel_type：{{ items.r_wheel_type }}</div>
                                    <div>r_part_status：{{ items.r_part_status }}</div>
                                    <div>r_part_process： {{ items.r_part_process }}</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <template #content v-else>
                                    <div>目前暂无车轮信息</div>
                                    <div>stackerNo:{{ items.stackerNo }}</div>
                                </template>
                                <div class="box_sto_dt">
                                    <div class="quan_div" v-if="items.r_wheel_SN != ''">
                                        <img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
                                    </div>
                                    <div v-else>{{ items.stackerNo }}</div>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                    <!--下车间中间辊道-->
            </div>

            <!--接驳台-->
            <div style="margin-top: 510px;margin-left: -130px;display: flex;">
                
                <div style="display: flex;" v-for="(items, inst) in dataList[3]" :key="inst">
                    <div class="jie_div" v-for="(its, ins) in items" :key="ins"
                        :style="{ 'background-color': getBackgroundColor(its.enable, its.location_state), 'margin-left': ins === 0 ? '0px' : '15px' }">
                        <el-tooltip class="item" effect="dark" placement="left">
                            <template #content
                                v-if="its.stationType !== '' && its.bindSN !== '' && its.stationType !== null && its.bindSN !== null">
                                <div>库位编号：{{ its.stationCode }}</div>
                                <div>物料类型(图号)： {{ its.stationType }}</div>
                                <div>炉号： {{ its.heatNumber }}</div>
                                <div style="width: 76px;">车轮SN号：{{ its.bindSN }}</div>
                                <div>钢坯号：{{ its.billetID }}</div>
                            </template>
                            <template #content v-else>
                                <div>库位编号：{{ its.stationCode }}</div>
                                <div>目前暂无车轮信息</div>
                            </template>
                            <div style="width: 57px;height: 52px;">
                                <img src="../../../assets/imgs/huojialun.png" style="width: 100%;"
                                    v-if="its.stationType !== '' && its.bindSN !== '' && its.stationType !== null && its.bindSN !== null" />
                                <img src="../../../assets/imgs/huojia.png" style="width: 100%;"
                                    v-else-if="its.location_state == 'Stroge'">
                            </div>
                        </el-tooltip>
                    </div>
                </div>

            </div>
            <!--接驳台-->
        </div>
    </div>

    <div>
        <el-dialog v-model="isModalVisible" title="机信息">
            <div>Name:
                <el-input v-model="dataFList[0].name" :disabled="true" style="width: 100px;"> </el-input>
            </div>

            <!--最大div-->
            <div>
                <!--第层列div-->
                <div style="display: flex;">
                    <div style="width: 30%;">
                        <p>power on
                        <div class="div_cl" v-if="dataFList[0].power_on == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>ready operate
                        <div class="div_cl" v-if="dataFList[0].ready_for_operate == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>ready auto start
                        <div class="div_cl" v-if="dataFList[0].ready_for_Auto_start == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>state JOG
                        <div class="div_cl" v-if="dataFList[0].state_JOG == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>state MDA
                        <div class="div_cl" v-if="dataFList[0].state_MDA == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>state AUTO
                        <div class="div_cl" v-if="dataFList[0].state_AUTO == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>safety doors closed
                        <div class="div_cl" v-if="dataFList[0].safetydoors_closed == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>spindel running
                        <div class="div_cl" v-if="dataFList[0].spindel_running == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>coolant ready
                        <div class="div_cl" v-if="dataFList[0].coolant_ready_operate == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>chip removal ready
                        <div class="div_cl" v-if="dataFList[0].coolant_ready_operate == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>communication IO
                        <div class="div_cl" v-if="dataFList[0].kommunikation_IO == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                    </div>
                    <div style="width: 30%;margin-left: 40px;">
                        <p>emergency stop
                        <div class="div_cl" v-if="dataFList[0].emergency_Stop_machine == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>hydraulic fault
                        <div class="div_cl" v-if="dataFList[0].hydraulik_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>feed drive fault
                        <div class="div_cl" v-if="dataFList[0].feeddrive_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>main drive fault
                        <div class="div_cl" v-if="dataFList[0].maindrive_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>machine fault
                        <div class="div_cl" v-if="dataFList[0].machine_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>coolant fault
                        <div class="div_cl" v-if="dataFList[0].coolant_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>chip removalfault
                        <div class="div_cl" v-if="dataFList[0].chipremoval_fault == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>breakdown repair
                        <div class="div_cl" v-if="dataFList[0].breakdown_repair == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>breakdown mainten
                        <div class="div_cl" v-if="dataFList[0].breakdown_maintenance == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>breakdown tool change
                        <div class="div_cl" v-if="dataFList[0].breakdown_Toolchange == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>breakdown changeover
                        <div class="div_cl" v-if="dataFList[0].breakdown_changeover == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                    </div>
                    <div style="width: 30%;margin-left: 40px;">
                        <p>program running
                        <div class="div_cl" v-if="dataFList[0].programm_running == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>prog sel side 1
                        <div class="div_cl" v-if="dataFList[0].prog_sel_side_1 == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>prog sel side 2
                        <div class="div_cl" v-if="dataFList[0].prog_sel_side_2 == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>program side 1 finished
                        <div class="div_cl" v-if="dataFList[0].programm_side_1_finished == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>load side 1 finished
                        <div class="div_cl" v-if="dataFList[0].load_side_1_finished == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>program side 2 finished
                        <div class="div_cl" v-if="dataFList[0].programm_side_2_finished == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>load side 2 finished
                        <div class="div_cl" v-if="dataFList[0].load_side_2_finished == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>tool change magazine 1
                        <div class="div_cl" v-if="dataFList[0].toolchange_magazine_1 == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                        <p>tool change magazine 2
                        <div class="div_cl" v-if="dataFList[0].toolchange_magazine_2 == true">1</div>
                        <div class="div_cl2" v-else>0</div>
                        </p>
                    </div>
                </div>
                <!--第一列div-->
                <div style="border-bottom: 1px solid grey;height: 1px;margin-top: 3px;"></div>
                <div style="display: flex;margin-top: 1px;">
                    <div style="width: 40%;">
                        <p style="display: flex;"><div style="width: 180px">changed tool mag 1</div>
                            <el-input v-model="dataFList[0].changed_tool_mag_1" :disabled="true" style="width: 100px;">
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 140px">dupl tool mag 1</div>
                            <el-input v-model="dataFList[0].dupl_tool_mag_1" :disabled="true" style="width: 100px;margin-left: 40px;">
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 180px">changed tool mag 2</div>
                            <el-input v-model="dataFList[0].changed_tool_mag_2" :disabled="true" style="width: 100px;"> 
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 180px">dupl tool mag 2</div>
                            <el-input v-model="dataFList[0].dupl_tool_mag_2" :disabled="true" style="width: 100px;">
                            </el-input>
                        </p>
                    </div>
                    <div style="width: 40%;margin-left: 40px;">
                        <p style="display: flex;"><div style="width: 140px">mart type</div>
                            <el-input v-model="dataFList[0].parttype" :disabled="true" style="width: 100px;" class="div_inp">
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 180px">part counter</div>
                            <el-input v-model="dataFList[0].partcounter" :disabled="true" style="width: 100px;">
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 180px">operator id</div>
                            <el-input v-model="dataFList[0].operator_ID" :disabled="true" style="width: 100px;">
                            </el-input>
                        </p>
                        <p style="display: flex;"><div style="width: 180px">machine state</div>
                            <el-input v-model="dataFList[0].machine_state" :disabled="true" style="width: 100px;">
                            </el-input>
                        </p>
                    </div>
                </div>
            </div>
            <!--最大div-->
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    props: {
        dataList: {
            type: Array,
            required: true
        },
        plcList_one: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            isModalVisible: false,
            isModalVisible2: false,
            isModalVisible3: false,
            dataFList: []
        };
    },
    mounted() {
    },
    methods: {
        open(staname) {
            this.http.get('api/Readplc/Four_unit_plc3?staname=' + staname).then(x => {
                this.dataFList = x;
                this.isModalVisible = true;
            })
                .catch(error => {
                    console.error('请求出错：', error);
                });
        },
        getBackgroundColor4(vk_state){
            if(vk_state==1){
                return 'lightgreen';
            }else if(vk_state==2){
                return '#3c3ca5';
            }else if(vk_state>=10 && vk_state<=20){
                return '#cccc33';
            }else if(vk_state>20){
                return '#d53d3d';
            }else{
                return 'rgb(195 176 176)';
            }
        },
        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';
                }
            }

        },
        getBackgroundColor2(r_wheel_SN) {
            if (r_wheel_SN != '') {
                return 'lightgreen';
            }
        }
    }
}
</script>

<style>
.contents {
    display: flex;
    align-items: flex-end;
}


.box {
    background-color: rgb(129, 179, 182);
    width: 80px;
    height: 405px;
    margin-left: 3px;
    color: rgb(255, 255, 255);
    font-size: 16px;
}

.box_sto {
    width: 100%;
    border: 1px solid #000000;
    height: 45px;
    background-image: url(../../../assets/lines.png);
    background-size: 100%;
    margin-top: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.div_cl {
    width: 30px;
    height: 25px;
    float: right;
    background-color: greenyellow;
    text-align: center;
    padding-top: 5px;
}

.div_inp{
    margin-left: 40px;
}
.div_cl2 {
    width: 30px;
    height: 25px;
    float: right;
    background-color: darkgrey;
    text-align: center;
    padding-top: 5px;
}
.box_sto2 {
    width: 67px;
    border: 1px solid #000000;
    height: 65px;
    background-image: url(../../../assets/linesd.png);
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box_sto_dt {
    height: 17px;
    text-align: center;
    line-height: 17px;
    margin-bottom: 3px;
}


.quan_div {
    border: 1px solid #000000;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    background-color: #818181;
    margin-top: -3px;
}

.box2_sto_baox {
    width: 137px;
    height: 45px;
    background-color: rgb(129, 179, 182);
    margin-left: 5px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    padding: 5px;
    text-align: center
}

.box_stoy {
    width: 35px;
    height: 35px;
    background-color: rgb(129, 179, 182);
    margin-left: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.box2_sto_yj {
    width: 70px;
    height: 70px;
    margin-left: 5px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    padding: 5px;
    text-align: center;
    background-color: rgb(129, 179, 182);
}

.box2_sto_yj2 {
    width: 50px;
    height: 50px;

    margin-left: 5px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    padding: 5px;
}

.x_div {
    border: 1px solid #757373;
    width: 57px;
    height: 52px;
}

.jie_div {

    width: 57px;
    height: 52px;
    color: #ffffff;
}

.w_div {
    height: 43px;
    width: 40px;
    margin: 5px auto;
}

</style>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,77 @@
<template>
  <div class="contents">
    <!-- ä¸€å•å…ƒ -->
    <div class="cen_div">
      <centerLeft1index :dataList="dataList[0]" :plcList_one="plcList_one" />
    </div>
    <!-- ä¸€å•å…ƒ -->


    <!-- äºŒå•å…ƒ -->
    <div class="cen_div">
      <centerLeft2index :dataList="dataList[1]" :plcList_one="plcList_two" />
    </div>
    <!-- äºŒå•å…ƒ -->


    <!-- ä¸‰å•å…ƒ -->
   <div class="cen_div" >
      <centerLeft3index :dataList="dataList" :plcList_one="plcList_three"  />
    </div> 
    <!-- ä¸‰å•å…ƒ -->
  </div>
</template>

<script>
import axios from 'axios';
import centerLeft1index from '@/views/Homes/Homest/centerLeft1index.vue';
 import centerLeft2index from '@/views/Homes/Homest/centerLeft2index.vue';
 import centerLeft3index from '@/views/Homes/Homest/centerLeft3index.vue';

export default {
  props: {
    dataList: {
      type: Array,
      required: true
    },
    plcList_one:{
      type: Array,
      required: true
    },
    plcList_two:{
      type: Array,
      required: true
    },
    plcList_three:{
      type: Array,
      required: true
    }
  },
  data() {
    return {
    };
  },
  components: {
    centerLeft1index,
     centerLeft2index,
     centerLeft3index,
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style>
.contents {
  display: flex;
  align-items: flex-end;
}
.cen_div{
  display: flex;
  margin-top: 20px;
}


</style>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,174 @@
<template>
  <div class="fixed-row">
    <span style="margin-left: 40px;font-size: 20px;">
      <el-button style="background-color: #409eff;color: #000;width: 70px;height: 50px;">有货</el-button>
      <el-button style="background-color: lightgreen;color: #000;width: 70px;height: 50px;">空货位</el-button>
      <el-button style="background-color: yellow;color: #000;width: 70px;height: 50px;">出入库占用</el-button>
      <el-button style="background-color: red;color: #000;width: 70px;height: 50px;">异常</el-button>
      <el-button style="background-color: #C0C4CC;color: #000;width: 70px;height: 50px;">禁用</el-button>
    </span>
  </div>
  <div style="height: 60px;">

  </div>
  <div style="width: 1100px;">
    <!--外协区-->
    <div style="width: 100px;float: right;height: 180px;">
      <div v-for="(items, inst) in dataList[0].item1" :key="inst">
        <div>
          <el-tooltip class="item" effect="dark" placement="right">
            <template #content
              v-if="items.stationType !== ''  && items.stationType !== null && items.bindSN !== null">
              <div>库位编号：{{ items.stationCode }}</div>
              <div>物料类型(图号)： {{ items.stationType }}</div>
              <div>炉号： {{ items.heatNumber }}</div>
              <div style="width: 76px;">车轮SN号：{{ items.bindSN }}</div>
              <div>钢坯号：{{ items.billetID }}</div>
            </template>
            <template #content v-else>
              <div>库位编号：{{ items.stationCode }}</div>
              <div>目前暂无车轮信息</div>

            </template>
            <div class="w_div" :style="{ 'background-color': getBackgroundColor(items.enable, items.location_state) }">
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
  <div v-for="(item, inst) in dataList" :key="inst" :style="{ 'margin-left': getmargin(inst) }" v-if="inst !=='1'">
    <div class="table-container">
      <div class="scrollable-table">
        <table class="one_tal" >
          <tr v-if="inst !== 1 && inst !== 0" v-for="(item, k) in dataList[inst].item2" :key="k">
            <td v-for="items in filteredItems(dataList[inst].item1, k+1)" :key="items.stationCode"
              :style="{ 'background-color': getBackgroundColor(items.enable,items.location_state) }">
              <el-tooltip class="item" effect="dark" placement="right">
                <template #content
                  v-if="items.stationType!==''  && items.stationType!==null && items.bindSN !== null">
                  <div>库位编号：{{ items.stationCode }}</div>
                  <div>物料类型(图号)： {{ items.stationType }}</div>
                  <div>炉号： {{ items.heatNumber }}</div>
                  <div style="width: 76px;">车轮SN号：{{ items.bindSN }}</div>
                  <div>钢坯号：{{ items.billetID }}</div>
                </template>
                <template #content v-else>
                  <div>库位编号：{{ items.stationCode }}</div>
                  <div>目前暂无车轮信息</div>
                </template>
                <div style="height: 20px;writing-mode: vertical-lr;" :style="{ 'width': getwidth(inst) }"></div>
              </el-tooltip>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  props: {
    dataList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    getmargin(inst){
      if(inst =="2"){
        return '190px'; 
      }
    },
    getwidth(inst){
      if(inst =="4"){
        return '23px'; 
      }else{
        return '20px'; 
      }
    },
    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';
      }
      }
      
    }
  },
  mounted() {
  },
  computed: {
    filteredItems() {
      return (itemList, line) => {
        return itemList.filter(item => item.line === line);
      };
    }
  }
};
</script>

<style scoped>
.scrollable-table {
  width: 100%;
}

.one_tal {
  padding-right: 100px;
}

.one_tal tr {
  margin-top: 5px;
  margin-bottom: 5px;
}
.w_div{
  height: 20px;
  width: 20px;
  margin-top: 4px;
}
.one_tal td {
  background-color: rgb(36, 227, 241);
  text-align: center;

}

.table-container::-webkit-scrollbar {
  width: 1px;
  height: 15px;
}



.fixed-row {
  position: fixed;
  width: 100%;
  
  z-index: 3;
}
</style>

 ´úÂë¹ÜÀí/PCS/WCS_Server/WIDESEA_WebApi/Controllers/ReadplcController.cs

@@ -1,5 +1,7 @@
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;
using WIDESEA_Comm;
using WIDESEA_Core.EFDbContext;
using WIDESEA_Core.Extensions;
using WIDESEA_WCS.IRepositories;
@@ -13,6 +15,487 @@
    [ApiController]
    public class ReadplcController : Controller
    {
        #region PCS平面图
        public class SectionData    //死参数
        {
            public int r_direction { get; set; }
            public bool r_machine_nr { get; set; }
            public int r_part_process { get; set; }
            public int r_part_status { get; set; }
            public string r_wheel_SN { get; set; }
            public int r_wheel_type { get; set; }
            public string stackerNo { get; set; }
        }

        #region è¾Šé“1
        [HttpPost("One_unit_plc")]
        public IActionResult One_unit_plc()
        {
            var DBIems = WheelDBItem.VK4WheelDBItem; //获取辊道，输送线信息
            var DBIems2 = VKDBItem.VK4DBItem;       //VK4状态信息对象集合
            var DBIems3 = GantryDBItem.VK4GantryDBItem.Where(x => x.Name == "Gantry1").FirstOrDefault();       // VK4桁架机械手对象集合



            var Section_one = DBIems.Where(x => IsInRange(x.StackerNo, 4, 13, 4, 24)).ToList();
            var Section_two = DBIems.Where(x => IsInRange(x.StackerNo, 4, 11, 4, 12)).ToList();
            var Section_three = DBIems.Where(x => IsInRange(x.StackerNo, 4, 9, 4, 10)).ToList();
            var Section_four = DBIems.Where(x => IsInRange(x.StackerNo, 4, 1, 4, 8)).ToList();


            var Section_six = DBIems.Where(x => IsInRange(x.StackerNo, 10, 1, 10, 2)).ToList();   //10.1-10.2
            var Section_seven = DBIems.Where(x => IsInRange(x.StackerNo, 10, 3, 10, 4)).ToList(); //10.3-10.4
            var Section_eight = DBIems.Where(x => IsInRange(x.StackerNo, 10, 7, 10, 8)).ToList();     //10.7-10.8
            var Section_nine = DBIems.Where(x => IsInRange(x.StackerNo, 10, 9, 10, 10)).OrderByDescending(x => x.StackerNo).ToList();      //10.9-10.10



            #region

            //var Section_five = DBIems.Where(x => IsInRange(x.StackerNo, 10, 5, 10, 6) || IsInRange(x.StackerNo, 10, 11, 10, 12)).ToList();

            var Section_five = DBIems
                .Where(x => IsInRange(x.StackerNo, 10, 5, 10, 6) || IsInRange(x.StackerNo, 10, 11, 10, 12))
                .Select(x => CreateSectionFiveItem(x))
                .ToList();
            #endregion





            //老机械手
            var Section_ten = DBIems.Where(x => x.StackerNo == "机械手1")
               .Select(x => new
               {
                   stackerNo = x.StackerNo,
                   r_wheel_SN = x.R_wheel_SN,
                   r_wheel_type = x.R_wheel_type,
                   r_part_status = x.R_part_status,
                   r_part_process = x.R_part_process,
                   g_name = DBIems3.Name,
                   g_communication_IO = DBIems3.communication_IO,
                   g_drive_fault = DBIems3.drive_fault,
                   g_emergency_stop_portal = DBIems3.emergency_stop_portal,
                   g_gantry_state = DBIems3.gantry_state,
                   g_portal_fault = DBIems3.portal_fault,
                   g_power_on = DBIems3.power_on,
                   g_programm_running = DBIems3.programm_running,
                   g_ready_for_auto_start = DBIems3.ready_for_auto_start,
                   g_ready_for_operate = DBIems3.ready_for_operate,
                   g_state_AUTO = DBIems3.state_AUTO,
                   g_state_JOG = DBIems3.state_JOG,
                   g_state_MDA = DBIems3.state_MDA,

               })
                .ToList();



            //新机械手（下料口位）
            var Section_twelve = DBIems.Where(x => x.StackerNo == "机械手1")
                .Select(x => new
                {
                    stackerNo = x.StackerNo,
                    r_wheel_SN = x.R_wheel_SN,
                    r_wheel_type = x.R_wheel_type,
                    r_part_status = x.R_part_status,
                    r_part_process = x.R_part_process,



                })
                .ToList();


            List<SectionData> sectDataList7 = new List<SectionData>();
            var seDataList7 = new SectionData
            {
                r_direction = 0,
                r_machine_nr = false,
                r_part_process = 1,         //读取车轮零件工艺
                r_part_status = 0,          //读取车轮零件状态
                r_wheel_SN = "2222",
                r_wheel_type = 3,       //读取车轮类型
                stackerNo = "10.12",

            };
            sectDataList7.Add(seDataList7);

            var Section_eleven = sectDataList7.ToList();

            var Section_thirteen = DBIems.Where(x => x.StackerNo == "4.11").ToList();   //视觉检测台
            var Section_fourteen = DBIems.Where(x => x.StackerNo == "4.12").ToList();   //视觉检测台

            var Section_fifteen = DBIems2.ToList();

            var data = new
            {
                Section_one,
                Section_two,
                Section_three,
                Section_four,
                Section_five,
                Section_six,
                Section_seven,
                Section_eight,
                Section_nine,
                Section_ten,   //老机械手
                Section_eleven,   //涂油机
                Section_twelve,     //新机械手
                Section_thirteen,  //最左边
                Section_fourteen,  //第二个靠涂油机
                Section_fifteen     //VK4信息

            };

            return Ok(data);
        }

        private object CreateSectionFiveItem(WheelDBItem x)
        {
            var stackerToMachineMap = new Dictionary<string, string>
        {
            { "10.5", "Machine1" },
            { "10.6", "Machine2" },
            { "10.11", "Machine3" },
            { "10.12", "Machine4" }
        };
            var machineDataLookup = MachineDBItem.VK4MachineDBItem.Where(x => x.Name == "Machine1" || x.Name == "Machine2" || x.Name == "Machine3" || x.Name == "Machine4").ToDictionary(x => x.Name, x => x);       //VK4机床对象集合
            if (stackerToMachineMap.TryGetValue(x.StackerNo, out var machineName) && machineDataLookup.TryGetValue(machineName, out var machineData))
            {
                return new
                {
                    stackerNo = x.StackerNo,
                    r_wheel_SN = x.R_wheel_SN,
                    r_wheel_type = x.R_wheel_type,
                    r_part_status = x.R_part_status,
                    r_part_process = x.R_part_process,
                    c_machine_state = machineData.machine_state,

                };
            }
            else
            {
                return new
                {
                    StackerNo = (string)null,

                };
            }
        }

        [HttpGet("Four_unit_plc")]
        public IActionResult Four_unit_plc(string staname)
        {
            var data = MachineDBItem.VK4MachineDBItem.Where(x => x.Name == staname).ToList();

            return Ok(data);
        }
        #endregion

        #region è¾Šé“2
        [HttpPost("Two_unit_plc")]
        public IActionResult Two_unit_plc()
        {
            var DBIems = WheelDBItem.VK4WheelDBItem;
            var DBIems3 = GantryDBItem.VK4GantryDBItem.Where(x => x.Name == "Gantry2").FirstOrDefault();

            List<SectionData> DataList2 = new List<SectionData>();
            var Section_one = DBIems.Where(x => IsInRange(x.StackerNo, 5, 13, 5, 24)).ToList();
            var Section_two = DBIems.Where(x => IsInRange(x.StackerNo, 5, 11, 5, 12)).ToList();
            var Section_three = DBIems.Where(x => IsInRange(x.StackerNo, 5, 9, 5, 10)).ToList();
            var Section_four = DBIems.Where(x => IsInRange(x.StackerNo, 5, 1, 5, 8)).ToList();


            #region

            //var Section_five = DBIems.Where(x => IsInRange(x.StackerNo, 20, 5, 20, 6) || IsInRange(x.StackerNo, 20, 11, 20, 12)).ToList();       //车间

            var Section_five = DBIems
                .Where(x => IsInRange(x.StackerNo, 20, 5, 20, 6) || IsInRange(x.StackerNo, 20, 11, 20, 12))
                .Select(x => CreateSectionFiveItem2(x))
                .ToList();
            #endregion


            var Section_six = DBIems.Where(x => IsInRange(x.StackerNo, 20, 1, 20, 2)).ToList();   //10.1-10.2
            var Section_seven = DBIems.Where(x => IsInRange(x.StackerNo, 20, 3, 20, 4)).ToList(); //10.3-10.4
            var Section_eight = DBIems.Where(x => IsInRange(x.StackerNo, 20, 7, 20, 8)).ToList();     //10.7-10.8
            var Section_nine = DBIems.Where(x => IsInRange(x.StackerNo, 20, 9, 20, 10)).OrderByDescending(x => x.StackerNo).ToList();      //10.9-10.10

            //老机械手（机床位）
            var Section_ten = DBIems.Where(x => x.StackerNo == "机械手2")
               .Select(x => new
               {
                   stackerNo = x.StackerNo,
                   r_wheel_SN = x.R_wheel_SN,
                   r_wheel_type = x.R_wheel_type,
                   r_part_status = x.R_part_status,
                   r_part_process = x.R_part_process,
                   g_name = DBIems3.Name,
                   g_communication_IO = DBIems3.communication_IO,
                   g_drive_fault = DBIems3.drive_fault,
                   g_emergency_stop_portal = DBIems3.emergency_stop_portal,
                   g_gantry_state = DBIems3.gantry_state,
                   g_portal_fault = DBIems3.portal_fault,
                   g_power_on = DBIems3.power_on,
                   g_programm_running = DBIems3.programm_running,
                   g_ready_for_auto_start = DBIems3.ready_for_auto_start,
                   g_ready_for_operate = DBIems3.ready_for_operate,
                   g_state_AUTO = DBIems3.state_AUTO,
                   g_state_JOG = DBIems3.state_JOG,
                   g_state_MDA = DBIems3.state_MDA,

               })
                .ToList();


            var Section_twelve = DBIems.Where(x => x.StackerNo == "机械手2").ToList();      //新机械手（下料口位）


            List<SectionData> sectDataList7 = new List<SectionData>();
            var seDataList7 = new SectionData
            {
                r_direction = 0,
                r_machine_nr = false,
                r_part_process = 1,         //读取车轮零件工艺
                r_part_status = 0,          //读取车轮零件状态
                r_wheel_SN = "2222",
                r_wheel_type = 3,       //读取车轮类型
                stackerNo = "20.12",

            };
            sectDataList7.Add(seDataList7);

            var Section_eleven = sectDataList7.ToList();        //涂油机

            var Section_thirteen = DBIems.Where(x => x.StackerNo == "5.11").ToList();   //视觉检测台
            var Section_fourteen = DBIems.Where(x => x.StackerNo == "5.12").ToList();   //视觉检测台

            var data = new
            {
                Section_one,
                Section_two,
                Section_three,
                Section_four,
                Section_five,
                Section_six,
                Section_seven,
                Section_eight,
                Section_nine,
                Section_ten,
                Section_eleven,
                Section_twelve,
                Section_thirteen,
                Section_fourteen

            };

            return Ok(data);
        }

        private object CreateSectionFiveItem2(WheelDBItem x)
        {
            var stackerToMachineMap = new Dictionary<string, string>
        {
            { "20.5", "Machine5" },
            { "20.6", "Machine6" },
            { "20.11", "Machine7" },
            { "20.12", "Machine8" }
        };
            var machineDataLookup = MachineDBItem.VK4MachineDBItem.Where(x => x.Name == "Machine5" || x.Name == "Machine6" || x.Name == "Machine7" || x.Name == "Machine8").ToDictionary(x => x.Name, x => x);       //VK4机床对象集合
            if (stackerToMachineMap.TryGetValue(x.StackerNo, out var machineName) && machineDataLookup.TryGetValue(machineName, out var machineData))
            {
                return new
                {
                    stackerNo = x.StackerNo,
                    r_wheel_SN = x.R_wheel_SN,
                    r_wheel_type = x.R_wheel_type,
                    r_part_status = x.R_part_status,
                    r_part_process = x.R_part_process,
                    c_machine_state = machineData.machine_state,

                };
            }
            else
            {
                return new
                {
                    StackerNo = (string)null,

                };
            }
        }

        [HttpGet("Four_unit_plc2")]
        public IActionResult Four_unit_plc2(string staname)
        {
            var data = MachineDBItem.VK4MachineDBItem.Where(x => x.Name == staname).ToList();

            return Ok(data);
        }
        #endregion



        #region è¾Šé“3
        [HttpPost("Three_unit_plc")]
        public IActionResult Three_unit_plc()
        {

            var DBIems = WheelDBItem.VK5WheelDBItem;
            var DBIems2 = VKDBItem.VK5DBItem;       //VK4状态信息对象集合
            var DBIems3 = GantryDBItem.VK5GantryDBItem.Where(x => x.Name == "Gantry3").FirstOrDefault();
            var Section_one = DBIems.Where(x => IsInRange(x.StackerNo, 6, 13, 6, 20) || x.StackerNo == "6.24" || x.StackerNo == "7.21").ToList();
            var Section_two = DBIems.Where(x => IsInRange(x.StackerNo, 6, 11, 6, 12)).ToList();
            var Section_three = DBIems.Where(x => IsInRange(x.StackerNo, 6, 9, 6, 10)).ToList();
            var Section_four = DBIems.Where(x => IsInRange(x.StackerNo, 6, 1, 6, 8)).ToList();
            var Section_thirteen = DBIems.Where(x => IsInRange(x.StackerNo, 6, 21, 6, 23)).ToList();

            //车间
            #region

            //var Section_five = DBIems.Where(x => IsInRange(x.StackerNo, 30, 4, 30, 5) || IsInRange(x.StackerNo, 30, 9, 30, 10)).ToList();       //车间

            var Section_five = DBIems
                .Where(x => IsInRange(x.StackerNo, 30, 4, 30, 5) || IsInRange(x.StackerNo, 30, 9, 30, 10))
                .Select(x => CreateSectionFiveItem3(x))
                .ToList();
            #endregion


            var Section_six = DBIems.Where(x => x.StackerNo == "30.1").ToList();   //30.7
            var Section_seven = DBIems.Where(x => IsInRange(x.StackerNo, 30, 2, 30, 3)).ToList(); //30.2-30.3
            var Section_eight = DBIems.Where(x => x.StackerNo == "30.6").ToList();     //30.6
            var Section_nine = DBIems.Where(x => IsInRange(x.StackerNo, 30, 7, 30, 8)).ToList();      //30.7-30.8

            //老机械手（机床位）
            var Section_ten = DBIems.Where(x => x.StackerNo == "机械手3")
               .Select(x => new
               {
                   stackerNo = x.StackerNo,
                   r_wheel_SN = x.R_wheel_SN,
                   r_wheel_type = x.R_wheel_type,
                   r_part_status = x.R_part_status,
                   r_part_process = x.R_part_process,
                   g_name = DBIems3.Name,
                   g_communication_IO = DBIems3.communication_IO,
                   g_drive_fault = DBIems3.drive_fault,
                   g_emergency_stop_portal = DBIems3.emergency_stop_portal,
                   g_gantry_state = DBIems3.gantry_state,
                   g_portal_fault = DBIems3.portal_fault,
                   g_power_on = DBIems3.power_on,
                   g_programm_running = DBIems3.programm_running,
                   g_ready_for_auto_start = DBIems3.ready_for_auto_start,
                   g_ready_for_operate = DBIems3.ready_for_operate,
                   g_state_AUTO = DBIems3.state_AUTO,
                   g_state_JOG = DBIems3.state_JOG,
                   g_state_MDA = DBIems3.state_MDA,

               })
                .ToList();
            var Section_twelve = DBIems.Where(x => x.StackerNo == "机械手3").ToList();      //新机械手（下料口位）


            List<SectionData> sectDataList7 = new List<SectionData>();
            var seDataList7 = new SectionData
            {
                r_direction = 0,
                r_machine_nr = false,
                r_part_process = 1,         //读取车轮零件工艺
                r_part_status = 0,          //读取车轮零件状态
                r_wheel_SN = "",
                r_wheel_type = 3,       //读取车轮类型
                stackerNo = "30.12",

            };
            sectDataList7.Add(seDataList7);

            var Section_eleven = sectDataList7.ToList();  //涂油机

            var Section_fifteen = DBIems2.ToList();

            var data = new
            {
                Section_one,
                Section_two,
                Section_three,
                Section_four,
                Section_five,
                Section_six,
                Section_seven,
                Section_eight,
                Section_nine,
                Section_ten,
                Section_eleven,
                Section_twelve,
                Section_thirteen,
                Section_fifteen
            };

            return Ok(data);
        }

        private object CreateSectionFiveItem3(WheelDBItem x)
        {
            var stackerToMachineMap = new Dictionary<string, string>
        {
            { "30.4", "Machine9" },
            { "30.5", "Machine10" },
            { "30.9", "Machine11" },
            { "30.10", "Machine12" }
        };
            var machineDataLookup = MachineDBItem.VK5MachineDBItem.Where(x => x.Name == "Machine9" || x.Name == "Machine10" || x.Name == "Machine11" || x.Name == "Machine12").ToDictionary(x => x.Name, x => x);       //VK4机床对象集合
            if (stackerToMachineMap.TryGetValue(x.StackerNo, out var machineName) && machineDataLookup.TryGetValue(machineName, out var machineData))
            {
                return new
                {
                    stackerNo = x.StackerNo,
                    r_wheel_SN = x.R_wheel_SN,
                    r_wheel_type = x.R_wheel_type,
                    r_part_status = x.R_part_status,
                    r_part_process = x.R_part_process,
                    c_machine_state = machineData.machine_state,

                };
            }
            else
            {
                return new
                {
                    StackerNo = (string)null,

                };
            }
        }

        [HttpGet("Four_unit_plc3")]
        public IActionResult Four_unit_plc3(string staname)
        {
            var data = MachineDBItem.VK5MachineDBItem.Where(x => x.Name == staname).ToList();

            return Ok(data);
        }
        #endregion



        // è¾…助方法：检查给定的 stackerNo æ˜¯å¦åœ¨æŒ‡å®šçš„范围内
        private bool IsInRange(string stackerNo, int startRow, int startColumn, int endRow, int endColumn)
        {
            string[] parts = stackerNo.Split('.');
            if (parts.Length != 2)
                return false;

            if (!int.TryParse(parts[0], out int row) || !int.TryParse(parts[1], out int column))
                return false;

            return row == startRow && column >= startColumn && row == endRow && column <= endColumn;
        }
        #endregion


        #region  ç¬¬äº”板块（新增内容）
        /// <summary>
        /// å·¥å•ä¿¡æ¯VV_Workinfo

 ´úÂë¹ÜÀí/WMS/WMS_Server/WIDESEA_WMS/IServices/system/Partial/Idt_stationinfoService.cs

@@ -12,6 +12,7 @@
        WebResponseContent SetStationEnable(object parm);
        WebResponseContent SendAGVTask(SaveModel saveModel);
        WebResponseContent dt_stationinfolist();
        WebResponseContent pcs_dt_stationinfolist();
        WebResponseContent Trayswitching(SaveModel saveModel);
    }
}

 ´úÂë¹ÜÀí/WMS/WMS_Server/WIDESEA_WMS/Services/system/Partial/dt_stationinfoService.cs

@@ -338,7 +338,7 @@
            WebResponseContent content = new WebResponseContent();
            VOLContext volContext = new VOLContext();
            Idt_stationinfoRepository dsta = new dt_stationinfoRepository(volContext);
            string[] stationCodes = { "A", "S", "X", "W", "DD", "B", "C", "D01" };
            string[] stationCodes = { "W", "A", "B", "C", "D01" };
            List<Tuple<List<dt_stationinfo>, int>> responseData = new List<Tuple<List<dt_stationinfo>, int>>();
            foreach (string code in stationCodes)
            {
@@ -350,5 +350,21 @@
            return content;
        }

        public WebResponseContent pcs_dt_stationinfolist()
        {
            WebResponseContent content = new WebResponseContent();
            VOLContext volContext = new VOLContext();
            Idt_stationinfoRepository dsta = new dt_stationinfoRepository(volContext);
            string[] stationCodes = { "X01", "X02", "X03", "S", "DD001" };
            List<Tuple<List<dt_stationinfo>>> responseData = new List<Tuple<List<dt_stationinfo>>>();
            foreach (string code in stationCodes)
            {
                var data = dsta.Find(_ => true).Where(a => a.stationCode.Contains(code)).OrderBy(a => a.stationCode).ToList();
                responseData.Add(Tuple.Create(data));
            }
            content.Data = responseData;
            return content;
        }

    }
}

 ´úÂë¹ÜÀí/WMS/WMS_Server/WIDESEA_WebApi/Controllers/WIDESEA_WMS/Partial/dt_stationinfoController.cs

@@ -66,7 +66,7 @@
        }

        /// <summary>
        /// å±•ç¤ºå¹³é¢å›¾æ•°æ®
        /// å±•ç¤ºå¹³é¢å›¾æ•°æ®pcs_dt_stationinfolist
        /// </summary>
        /// <param name="parm"></param>
        /// <returns></returns>
@@ -75,5 +75,15 @@
        {
            return dt_stationinfoService.Instance.dt_stationinfolist();
        }
        /// <summary>
        /// å±•ç¤ºä¸‹æ–™å£æ•°æ®
        /// </summary>
        /// <param name="parm"></param>
        /// <returns></returns>
        [HttpPost, Route("pcs_dt_stationinfolist")]
        public object pcs_dt_stationinfolist()
        {
            return dt_stationinfoService.Instance.pcs_dt_stationinfolist();
        }
    }
}

 ´úÂë¹ÜÀí/¹¤Òµ´óÆÁ

@@ -1 +1 @@
Subproject commit 04dea7dab8ffaea59302a743065b9293d4ac74ef
Subproject commit 76c6ba213c6a0161310fd520d6edb4e4f78b8792