From 32678f5c24c7681a198b517fa72db1de2e98646d Mon Sep 17 00:00:00 2001 From: huanghongfeng <huanghongfeng@hnkhzn.com> Date: 星期一, 08 七月 2024 22:00:42 +0800 Subject: [PATCH] PCS平面图检测线段 --- 代码管理/PCS/WCS_Client/src/views/Home.vue | 242 ++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 232 insertions(+), 10 deletions(-) diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/PCS/WCS_Client/src/views/Home.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/PCS/WCS_Client/src/views/Home.vue" index 185acbd..dcbebfe 100644 --- "a/\344\273\243\347\240\201\347\256\241\347\220\206/PCS/WCS_Client/src/views/Home.vue" +++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/PCS/WCS_Client/src/views/Home.vue" @@ -1,24 +1,246 @@ <template> - <div class="title">Welcome To WCS!</div> + <div class="home-page"> + <div class="qhuan"> + <el-button type="primary" :class="{ 'qh_box': true, 'selected': selected === '涓嬫枡鍖�' }" + v-on:click="selectss(0)">涓嬫枡鍖�</el-button> + <el-button type="primary" :class="{ 'qh_box': true, 'selected': selected === '搴撳尯' }" + v-on:click="selectss(1)">搴撳尯</el-button> + </div> + + <!-- 涓嬫枡鍖轰唬鐮� --> + <div v-if="selected === '涓嬫枡鍖�'" style="margin-top: 30px;"> + <centerLeft1 :dataList="dataxlist" :plcList_one="plcList_one" :plcList_two="plcList_two" :plcList_three="plcList_three" /> + <div style="height: 50px;width: 100%;"> + <div class="dd_div" :style="{ 'background-color': getBackgroundColor(item1.enable, item1.location_state) }"> + <el-tooltip class="item" effect="dark" placement="left"> + <template #content v-if="item1.quantity !== 0 && item1.tray_type !== ''"> + <div>搴撲綅缂栧彿锛歿{ item1.stationCode }}</div> + <div v-if="item1.tray_type == 'SmallTray'">鎵樼洏绫诲瀷锛氬皬鎵樼洏</div> + <div v-else>鎵樼洏绫诲瀷锛氬ぇ鎵樼洏</div> + <div>鎵樼洏鏁伴噺锛� {{ item1.quantity }}</div> + </template> + <template #content v-else> + <div>搴撲綅缂栧彿锛歿{ item1.stationCode }}</div> + <div>鐩墠鏆傛棤鍙犵洏鏁版嵁</div> + </template> + <!-- <div > + </div> --> + <div class="v_dd" v-if="item1.location_state === 'Stroge'"> + <img src="../assets/imgs/huojia.png" style="width: 100%;" /> + </div> + <div class="v_dd" v-else></div> + </el-tooltip> + </div> + </div> + <div style="margin-left: 65px;"> + <div class="table-container"> + <div class="scrollable-table" > + <table class="one_tal"> + <tr v-for="(item, k) in 2" :key="k"> + <td v-for="items in filteredItems(ddataList, k + 1)" :key="items.stationCode" + :style="{ 'background-color': getBackgroundColor(items.enable, items.location_state) }"> + <el-tooltip class="item" effect="dark" placement="right"> + <template #content> + <div>搴撲綅缂栧彿锛歿{ items.stationCode }}</div> + <div v-if="items.tray_type=='SmallTray'">鎵樼洏绫诲瀷锛氬皬鎵樼洏</div> + <div v-else>鎵樼洏绫诲瀷锛氬ぇ鎵樼洏</div> + <div>鏁伴噺锛歿{ items.quantity }}</div> + <div v-if="items.location_state === 'Stroge'">璐т綅鐘舵�侊細鏈夎揣</div> + <div v-if="items.location_state === 'Empty'">璐т綅鐘舵�侊細鏃犺揣</div> + </template> + <div style="height: 35px;writing-mode: vertical-lr;width: 35px;"> + <img src="../assets/imgs/huojia.png" style="width: 100%;" v-if="items.location_state === 'Stroge'" /> + </div> + </el-tooltip> + </td> + </tr> + </table> + </div> + </div> + </div> + <!--鎵樼洏鍙犳斁鍖�--> + <div style="height: 50px;"></div> + </div> + <!-- 涓嬫枡鍖轰唬鐮� --> + + + <!-- 搴撳尯浠g爜 --> + <div v-else-if="selected === '搴撳尯'" style="margin-top: 30px;margin-left: 30px;"> + <centerLeft2 :dataList="datalist" /> + </div> + <!-- 搴撳尯浠g爜 --> +</div> </template> <script> -import { ref, reactive } from 'vue' - +import axios from 'axios'; +import centerLeft1 from '@/views/Homes/centerLeft1.vue'; +import centerLeft2 from '@/views/Homes/centerLeft2.vue'; export default { - setup() { - return { + data() { + return { + selected: '涓嬫枡鍖�', // 榛樿閫変腑涓婁笅鏂欏尯 + datalist: [], + dataxlist: [], + item1: [], + ddataList: [], + plcList_one:[], + plcList_two:[], + plcList_three:[], + }; + }, + components: { + centerLeft1, + centerLeft2 + }, + mounted() { + + }, + created() { + this.One_unit_plc(); + this.Two_unit_plc(); + this.Three_unit_plc(); + this.selList(); + this.selListxl(); + + setInterval(() => { + this.selList(); + }, 60000); + + setInterval(() => { + this.selListxl(); + this.One_unit_plc(); + this.Two_unit_plc(); + this.Three_unit_plc(); + }, 5000); + + }, + methods: { + openDialog() { + this.isModalVisible = true; + }, + //鍒囨崲 + selectss(selvelue) { + if (selvelue == "0") { + this.selected = "涓嬫枡鍖�"; + } else { + + this.selected = "搴撳尯"; + this.selList(); + } + }, + //鑾峰彇搴撳尯鐨勬暟鎹� + selList() { + this.loading = true; + this.http.post('api/Readplc/dt_stationinfolist').then(x => { + this.datalist = x; + for (var i = 0; i < x[1].item1.length; i++) { + this.ddataList[i] = x[1].item1[i]; + } + }) + .catch(error => { + console.error('璇锋眰鍑洪敊锛�', error); + }); + }, + //鑾峰彇涓嬫枡鍙g殑鏁版嵁 + selListxl() { + this.loading = true; + this.http.post('api/Readplc/pcs_dt_stationinfolist').then((x) => { + + this.dataxlist = x; + this.item1 = x[4].item1[0]; + + }) + .catch(error => { + console.error('璇锋眰鍑洪敊锛�', error); + }); + }, + //鏇存敼棰滆壊 + getBackgroundColor(enable, locationState) { + if (enable == '0') { + return '#C0C4CC'; + } + else { + switch (locationState) { + case 'Stroge': + return '#409eff'; + case 'Empty': + return 'lightgreen'; + case 'InBusy': + return 'yellow'; + case 'OutBusy': + return 'yellow'; + case 'Busy': + return 'yellow'; + case 'Abnormal': + return 'red'; + case 'Abnormal': + return 'yellow'; + default: + return 'transparent'; + } + } + }, + //鑾峰彇杈婇亾绾�1鍗曞厓涓婄殑鏁版嵁 + One_unit_plc(){ + this.http.post('api/Readplc/One_unit_plc') + .then((response) => { + this.plcList_one=response; + + }) + .catch((error) => { + console.error('Error fetching current user info:', error); + }); + }, + //鑾峰彇杈婇亾绾�2鍗曞厓涓婄殑鏁版嵁 + Two_unit_plc(){ + this.http.post('api/Readplc/Two_unit_plc') + .then((response) => { + this.plcList_two=response; + }) + .catch((error) => { + console.error('Error fetching current user info:', error); + }); + }, + //鑾峰彇杈婇亾绾�3鍗曞厓涓婄殑鏁版嵁 + Three_unit_plc(){ + this.http.post('api/Readplc/Three_unit_plc') + .then((response) => { + this.plcList_three=response; + }) + .catch((error) => { + console.error('Error fetching current user info:', error); + }); + } + + }, + computed: { + filteredItems() { + return (itemList, line) => { + return itemList.filter(item => item.line === line); + }; } } } </script> <style scoped> -.title { - line-height: 70vh; - text-align: center; - font-size: 28px; - color: orange; +.home-page { + width: 125%; + background-image: url("../assets/imgs/pageBg.png"); +} + +.dd_div { + width: 57px; + height: 53px; + margin-left: 1300px; + margin-top: 70px; +} + +.v_dd { + width: 57px; + height: 50px; + margin-top: 10px; } </style> \ No newline at end of file -- Gitblit v1.9.3