更新

huanghongfeng

3 天以前 5ffc36a1db18d3112a9b50a9cf3953d7fcf21bae

 ÏîÄ¿´úÂë/WCS/WIDESEAWCS_Client/src/views/Home.vue

@@ -1,51 +1,101 @@
<template>
  <div class="title"></div>
  <el-container>
    <!-- <el-header>日志</el-header> -->
    <el-main>
      <el-card v-for="(log, index) in logs" :key="index" class="log-card" :style="{ color: log.color }">
        <div :style="{ color: log.color }">{{ log.logEntry }}</div>
        <div :style="{ color: log.color }">{{ log.time }}</div>
      </el-card>
    </el-main>
  </el-container>
  <div class="container">
    <div class="input-group">
      <span class="label">站台：</span>
      <el-select v-model="value1" placeholder="请选择" style="width: 40%;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="input-group" style="width:50%;">
      <span class="label">条码：</span>
      <el-input v-model="input2" placeholder="请输入内容"></el-input>
    </div>
    <div class="input-group">
      <el-button type="primary" style="width: 50%;" @click="setBorot()">写入</el-button>
    </div>

  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import eventBus from "@/uitils/eventBus";

export default {
  setup() {
    const logs = ref([]);
    onMounted(() => {
      eventBus.on('Logs', eventData => {
        if (logs.value.length > 500) {
          logs.value = [];
        }
        const logEntry = "日志信息：" + eventData.log
        const time = "时间：" + eventData.time 
        logs.value.unshift({ logEntry: logEntry, time: time, color: eventData.color });
        
        // logs.value.unshift(logEntry);
      });
    });
  data() {
    return {
      logs
      options: [{
        value: '1010',
        label: '1010'
      }, {
        value: '2015',
        label: '2015'
      }, {
        value: '2017',
        label: '2017'
      }, {
        value: '2021',
        label: '2021'
      }],
      value1: '',
      input2: '',
    }
  },
  methods: {
    setBorot() {
      if (this.value1 == "") {
        this.$message.error("请选择要写入的站台");
      }
      if (this.input2 == "") {
        this.$message.error("请选择要写入的条码");
      }
      this.$confirm("是否确定需要对该站台写入条码信息！！！", "提示", {
        // iconClass:"el-icon-success",//el-icon-remove自定义图标样式
        confirmButtonText: "确认",//确认按钮文字更换
        cancelButtonText: "取消",//取消按钮文字更换
        // cancelBtn:"取消",//取消按钮文字更换
        showClose: true,//是否显示右上角关闭按钮
        type: "warning",//提示类型 success:成功/info:信息/warning:警告/error:报错
      }).then(() => {
        var param = {
          DelKeys: [this.value1,this.input2], 
          Extra: true
        }
        this.http
          .post("api/Task/SetPlcPalletCode",param, "数据处理中...")
          .then((x) => {
            if (x.status) {
              this.$Message.success('成功.');
              this.refresh();
            } else {
              return this.$error(x.message);
            }
          });
      })
    }
  }
}
</script>

<style scoped>
.title {
  line-height: 70vh;
  text-align: center;
  font-size: 28px;
  color: orange;
.container {
  font-size: 22px;
  margin-top: 20px;
  width: 50%;
}

.log-card {
  margin-bottom: 10px;
.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.label {
  min-width: 60px;
  /* ä¸ºæ ‡ç­¾è®¾ç½®æœ€å°å®½åº¦ä¿æŒå¯¹é½ */
  margin-right: 10px;
}

.el-input {
  flex: 1;
  /* è¾“入框占据剩余空间 */
}
</style>