设备监控设置页面写入功能和与后台通讯交互逻辑

hwh

2024-09-10 bc56ea2c4c79ac0251b2e9303b93bd31fe9bae12

 Web/src/views/device/deviceMonitor/component/setting.vue

@@ -10,7 +10,7 @@
         <el-card class="box-card" shadow="hover">
            <template #header>
               <div class="card-header">
						

                  <div>
                     <span>工位号：</span>
                     <el-select v-model="stationValue" placeholder="请选择" filterable value-key="stationNum"
@@ -22,7 +22,8 @@
                     <el-button style="margin-left: 10px;">自动</el-button>
                  </div>
                  <div>
                     <div :class="['lineStatus', stationValue.status ? 'device-status-0' : 'device-status-1']"></div>
                     <div :class="['lineStatus', stationValue.status ? 'device-status-0' : 'device-status-1']">
                     </div>
                  </div>
               </div>
            </template>
@@ -49,41 +50,41 @@
                           <el-input v-model="stationValue.wcs"></el-input>
                        </el-form-item>
                     </el-col>
							

                     <el-col :span="12">
                        <el-form-item label="取货排">
                           <el-input ></el-input>
                           <el-input></el-input>
                        </el-form-item>
                     </el-col>
                     <el-col :span="12">
                        <el-form-item label="放货排">
                           <el-input ></el-input>
                           <el-input></el-input>
                        </el-form-item>
                     </el-col>
                     <el-col :span="12">
                        <el-form-item label="取货列">
                           <el-input ></el-input>
                           <el-input></el-input>
                        </el-form-item>
                     </el-col>
                     <el-col :span="12">
                        <el-form-item label="放货列">
                           <el-input ></el-input>
                           <el-input></el-input>
                        </el-form-item>
                     </el-col>
                     <el-col :span="12">
                        <el-form-item label="取货层">
                           <el-input ></el-input>
                           <el-input></el-input>
                        </el-form-item>
                     </el-col>
                     <el-col :span="12">
                        <el-form-item label="放货层">
                           <el-input ></el-input>
                           <el-input></el-input>
                        </el-form-item>
                     </el-col>
                  </el-row>
               </el-form>
               <div style="text-align: center;margin: 10px;">
                  <el-button class="button" size="large">写入数据</el-button>
                  <el-button class="button" size="large" @click="write(stationValue)">写入数据</el-button>
               </div>
            </div>
            <template #footer>
@@ -107,6 +108,8 @@

<script lang="ts" setup>
import { ref, defineModel } from 'vue';
import { writeValue } from '/@/api/wcs/wcsDevice';
import { ElMessageBox,ElMessage } from 'element-plus';
const listStationsData = defineModel<any>("listStationsData")
const stationValue = defineModel<any>("stationValue")

@@ -122,7 +125,10 @@
//    emit('update:listStationsData', listStationsData.value);
//    emit('update:stationValue', stationValue);
// };

const write = async (row: any) => {
   await writeValue(row);
    ElMessage.success('写入成功！');
}
const isShowDialog = ref(false);

const openDialog = async (row: any) => {
@@ -181,18 +187,18 @@
}

.lineStatus {
    right: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #67C23A;
   right: 0;
   height: 20px;
   width: 20px;
   border-radius: 50%;
   background-color: #67C23A;
}

.device-status-0 {
    background-color: #67C23A;
   background-color: #67C23A;
}

.device-status-1 {
    background-color: red;
   background-color: red;
}
</style>