kd-aiot-frontend-mes/src/views/produce/components/search.vue

<template>
  <div class="search_box">
    <div class="left">
      <div class="back" @click="back()">
        <i class="el-icon-back"></i>
        返回
      </div>

      <el-form class="search_form" label-width="90px" @keyup.enter.native="search" @submit.native.prevent>
        <el-form-item label="工序名称:">
          <el-select v-model="search.taskId" @change="changeSelect" filterable>
            <el-option v-for="(item, index) in produceTaskList" :key="index" :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="设备名称:">
          <el-input clearable v-model="search.deviceName" placeholder="请输入" />
        </el-form-item>


      </el-form>
    </div>
    <div class="right">
      <div class="lab">操作员:{{ userName }}</div>
      <div class="lab">{{ currentTime }}</div>
    </div>
  </div>
</template>

<script>
import { listTask } from '@/api/produce/index';
export default {
  data() {
    return {
      currentTime: '',
      userName: JSON.parse(localStorage.getItem('info'))?.name,

      produceTaskList: [],
      search: {
        taskId: null,
        deviceName: null
      }
    };
  },
  created() {
    this.getTaskList();



    this.updateCurrentTime();
    setInterval(this.updateCurrentTime, 1000); // 每秒更新一次时间
  },

  watch: {
    'search.taskId': {
      handler(val) {
        if (val) {
          this.changeSelect(val)
        } else {
          this.$store.commit('user/setTaskObj', {});
        }

      },
      immediate: true,
    }
  },
  methods: {
    getTaskList() {
      listTask().then((res) => {
        this.produceTaskList = res;
      });
    },

    changeSelect(e) {
      console.log(e,'eeeeeeeeeeeeeeeeee');

      let taskObj = {};
      taskObj = this.produceTaskList.find((item) => item.id === e);
      this.$store.commit('user/setTaskObj', taskObj);
    },
    back() {
      this.$router.go(-1);
    },
    updateCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
      const day = now.getDate().toString().padStart(2, '0');
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const seconds = now.getSeconds().toString().padStart(2, '0');

      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  }
};
</script>

<style lang="scss" scoped>
.search_box {
  min-width: 1280px;
  width: 100%;
  height: 50px;
  background: #157a2c;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;

  .left {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #fff;

    .back {
      margin-right: 40px;
      cursor: pointer;
    }
  }

  .right {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #fff;

    .lab {
      line-height: 50px;
      margin-left: 60px;
    }
  }
}

.search_form {
  display: flex !important;
  height: 50px;

  align-items: center;
}

.el-form-item {
  margin-bottom: 0px !important;
}
</style>

<style>
.search_box {
  .el-form-item__label {
    color: #fff !important;
  }
}
</style>