From 54da8a22c438e1495b9c5fbae75ca9d4b5ca7335 Mon Sep 17 00:00:00 2001 From: wxw <Administrator@DESKTOP-5BIMHQ3> Date: 星期一, 02 九月 2024 16:04:37 +0800 Subject: [PATCH] Merge branch 'master' into wxw --- Web/src/views/device/deviceMonitor/index.vue | 230 +++++++++++++++++++++++++-------------------------------- 1 files changed, 101 insertions(+), 129 deletions(-) diff --git a/Web/src/views/device/deviceMonitor/index.vue b/Web/src/views/device/deviceMonitor/index.vue index fa6d26f..6f2883e 100644 --- a/Web/src/views/device/deviceMonitor/index.vue +++ b/Web/src/views/device/deviceMonitor/index.vue @@ -1,6 +1,6 @@ <template> <el-container> - <el-aside style="width: auto;height: auto;"> + <el-aside style="width: auto; height: auto;"> <el-card class="box-card"> <div slot="header" class="linefix"> <span>杈撻�佺嚎</span> @@ -9,17 +9,15 @@ <div class="choosefix"> <el-select v-model="lineValue" placeholder="璇烽�夋嫨"> <el-option v-for="item in lineOptions" :key="item.value" :label="item.label" - :value="item.value"> - </el-option> + :value="item.value"></el-option> </el-select> <el-select v-model="stationValue" placeholder="璇烽�夋嫨" style="margin-top: 10px;"> - <el-option v-for="item in stationOptions" :key="item.value" :label="item.label" - :value="item.value"> - </el-option> + <el-option v-for="item in stations" :key="item.id" :label="item.stationNum" + :value="item.id"></el-option> </el-select> </div> <div class="lineValuefix"> - <el-form label-position="left" label-width="60px"> + <el-form label-position="left" label-width="80px"> <el-form-item label="浠诲姟鍙�"> <el-input></el-input> </el-form-item> @@ -35,13 +33,19 @@ <el-form-item label="鎵樼洏鐮�"> <el-input></el-input> </el-form-item> + <el-form-item label="PLC"> + <el-input></el-input> + </el-form-item> + <el-form-item label="WCS"> + <el-input></el-input> + </el-form-item> <el-form-item label="鐘舵��"> <el-input></el-input> </el-form-item> </el-form> </div> <div class="lineButtonfix"> - <el-form label-position="left" label-width="60px"> + <el-form label-position="left" label-width="80px"> <el-form-item> <el-button>鍐欏叆</el-button> <el-button>璁剧疆</el-button> @@ -52,29 +56,32 @@ </el-aside> <el-main style="padding: 0 0 0 5px;"> <div class="card-container"> - <el-card class="other-box-card" v-for="deviceInfo in deviceList" :key="deviceInfo.id"> + <el-card class="other-box-card" v-for="deviceInfo in listStackingMachineData" :key="deviceInfo.id"> <div slot="header" class="linefix"> - <span>{{ deviceInfo.name }}</span> + <span>{{ deviceInfo.text }}</span> <div - :class="['lineStatus', { 'device-status-0': deviceInfo.status === 0 }, { 'device-status-1': deviceInfo.status === 1 }]"> + :class="['lineStatus', { 'device-status-0': deviceInfo.status === true }, { 'device-status-1': deviceInfo.status === false }]"> </div> </div> <div class="otherValuefix"> - <el-form label-position="left" label-width="60px"> + <el-form label-position="left" label-width="80px"> <el-form-item label="浠诲姟鍙�"> - <el-input v-model="deviceInfo.taskNumber"></el-input> + <el-input v-model="deviceInfo.taskNo"></el-input> </el-form-item> <el-form-item label="浠诲姟绫诲瀷"> - <el-input></el-input> + <el-select clearable="" v-model="deviceInfo.taskType" placeholder="璇烽�夋嫨鐘舵��"> + <el-option v-for="(item, index) in dl('TaskTypeEnum')" :key="index" + :value="Number(item.value)" :label="`${item.name} (${item.code}) [${item.value}] `" /> + </el-select> </el-form-item> <el-form-item label="PLC"> - <el-input></el-input> + <el-input v-model="deviceInfo.plc"></el-input> </el-form-item> <el-form-item label="WCS"> - <el-input></el-input> + <el-input v-model="deviceInfo.wcs"></el-input> </el-form-item> <el-form-item label="鐘舵��"> - <el-input></el-input> + <el-input :value="deviceInfo.status ? '鍦ㄧ嚎' : '绂荤嚎'" readonly></el-input> </el-form-item> </el-form> </div> @@ -94,101 +101,63 @@ <script lang="ts" setup> import { ref, reactive } from 'vue'; +import { listWcsDevice } from '/@/api/wcs/wcsDevice'; +import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils'; +import { getDictLabelByVal as dv } from '/@/utils/dict-utils'; -const lineOptions = [{ - value: '001', - label: '涓�妤艰緭閫佺嚎' -}, { - value: '002', - label: '浜屾ゼ杈撻�佺嚎' -}, { - value: '003', - label: '涓夋ゼ杈撻�佺嚎' -}]; -const lineValue = '001'; +const stations = ref<any>([]); +const listStackingMachineData = ref<any>([]); -const stationOptions = [{ - value: '200', - label: '200' -}, { - value: '202', - label: '202' -}, { - value: '300', - label: '300' -}]; -const stationValue = '200'; +const lineValue = ref('1'); +const stationValue = ref(); - -const deviceList = [ - { - id: 1, - name: '1鍙风爜鍨涙満鍣ㄤ汉', - taskNumber: 'T000001', - taskType: '', - plc: '', - wcs: '', - status: 0 - }, - { - id: 2, - name: '2鍙风爜鍨涙満鍣ㄤ汉', - taskNumber: '', - taskType: '', - plc: '', - wcs: '', - status: 1 - }, - { - id: 3, - name: '3鍙风爜鍨涙満鍣ㄤ汉', - taskNumber: '', - taskType: '', - plc: '', - wcs: '', - status: 0 - }, { - id: 4, - name: '4鍙风爜鍨涙満鍣ㄤ汉', - taskNumber: '', - taskType: '', - plc: '', - wcs: '', - status: 1 - }, { - id: 5, - name: '5鍙风爜鍨涙満鍣ㄤ汉', - taskNumber: '', - taskType: '', - plc: '', - wcs: '', - status: 0 - }, { - id: 6, - name: '6鍙风爜鍨涙満鍣ㄤ汉', - taskNumber: '', - taskType: '', - plc: '', - wcs: '', - status: 0 - }, { - id: 7, - name: '7鍙风爜鍨涙満鍣ㄤ汉', - taskNumber: '', - taskType: '', - plc: '', - wcs: '', - status: '' - }, { - id: 8, - name: '8鍙风爜鍨涙満鍣ㄤ汉', - taskNumber: '', - taskType: '', - plc: '', - wcs: '', - status: 0 +// 鏌ヨ鎿嶄綔 +const handleQuery = async () => { + var res = await listWcsDevice(); + listStackingMachineData.value = res.data.result.filter(s => s.type == 0); + const listConveyorLineData = res.data.result.filter(s => s.type == 1 || s.type == 4); + stations.value = { + '1': listConveyorLineData.filter(s => s.text = '1灞傛墭鐩樿緭閫佺嚎'), + '2': listConveyorLineData.filter(s => s.text = '2灞傛墭鐩樿緭閫佺嚎'), + '3': listConveyorLineData.filter(s => s.text = '3灞傛墭鐩樿緭閫佺嚎') } -] + if (stations.value.length > 0) + stationValue.value = stations.value[0][0].id; + debugger; +}; +handleQuery(); + + +const lineOptions = [ + { value: '1', label: '涓�妤艰緭閫佺嚎' }, + { value: '2', label: '浜屾ゼ杈撻�佺嚎' }, + { value: '3', label: '涓夋ゼ杈撻�佺嚎' } +]; + +const deviceList = reactive([ + { id: 1, name: '1鍙风爜鍨涙満鍣ㄤ汉', taskNumber: 'T000001', taskType: '', plc: '', wcs: '', status: 0 }, + { id: 2, name: '2鍙风爜鍨涙満鍣ㄤ汉', taskNumber: '', taskType: '', plc: '', wcs: '', status: 1 }, + { id: 3, name: '3鍙风爜鍨涙満鍣ㄤ汉', taskNumber: '', taskType: '', plc: '', wcs: '', status: 0 }, + { id: 4, name: '4鍙风爜鍨涙満鍣ㄤ汉', taskNumber: '', taskType: '', plc: '', wcs: '', status: 1 }, + { id: 5, name: '5鍙风爜鍨涙満鍣ㄤ汉', taskNumber: '', taskType: '', plc: '', wcs: '', status: 0 }, + { id: 6, name: '6鍙风爜鍨涙満鍣ㄤ汉', taskNumber: '', taskType: '', plc: '', wcs: '', status: 0 }, + { id: 7, name: '7鍙风爜鍨涙満鍣ㄤ汉', taskNumber: '', taskType: '', plc: '', wcs: '', status: '' }, + { id: 8, name: '8鍙风爜鍨涙満鍣ㄤ汉', taskNumber: '', taskType: '', plc: '', wcs: '', status: 0 } +]); + +const deviceTypeText = (taskType: number) => { + switch (taskType) { + case 0: + return '鍏ュ簱浠诲姟' + case 1: + return '鍑哄簱浠诲姟' + case 2: + return '绉诲簱浠诲姟' + case 3: + return 'PLC鐢宠鍏ュ簱' + } + return '' +}; </script> <style scoped> @@ -204,69 +173,80 @@ border-bottom: 1px solid rgb(197, 195, 195); display: flex; align-items: center; - height: 40px; + height: 30px; position: relative; } .lineStatus { position: absolute; right: 0; - float: right; height: 20px; width: 20px; - border-radius: 20px; + border-radius: 50%; background-color: #67C23A; } .choosefix { width: 100%; - height: auto; padding: 10px; border-bottom: 1px solid rgb(197, 195, 195); } .box-card { - width: 280px; + width: 100%; + max-width: 280px; + background: linear-gradient(135deg, #66ccff, #3399ff); + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + color: #fff; } .lineValuefix { width: 100%; - height: 500px; padding: 10px; border-bottom: 1px solid rgb(197, 195, 195); } .lineButtonfix { width: 100%; - height: 50px; display: flex; - align-items: center; + justify-content: space-between; + padding: 10px; } .otherValuefix { width: 100%; - height: 220px; padding: 10px; border-bottom: 1px solid rgb(197, 195, 195); + display: flex; + flex-direction: column; + gap: 10px; + /* Optional, for spacing between form items */ } .card-container { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .other-box-card { box-sizing: border-box; + background: linear-gradient(135deg, #66ccff, #3399ff); + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + color: #fff; + display: flex; + flex-direction: column; + height: auto; + /* Ensure card height adjusts based on content */ } .otherButtonfix { width: 100%; - height: 50px; display: flex; - align-items: center; justify-content: center; - padding: 0; + padding: 10px; } .device-status-0 { @@ -275,14 +255,6 @@ .device-status-1 { background-color: red; -} - -.box-card, -.other-box-card { - background: linear-gradient(135deg, #66ccff, #3399ff); - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - color: #fff; } .linefix span { -- Gitblit v1.8.0