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) {
        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>