Merge remote-tracking branch 'origin/master'

罗广辉

2025-03-31 99e8c98928ef2a65cbabedc7dff3f786ea6d98ae

 src/views/SignMachineNest/components/MachineRight/InspectionRaskList.vue

@@ -2,12 +2,69 @@
<template>
  <CommonTitle title="巡检任务列表" />
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="inspection-rask-list"></div>
    <div class="inspection-rask-list">
      <div class="tab-search">
        <div class="tab-btn">
          <div :class="tabIndex==1?'active':''" @click="tabClick(1)">当前任务</div>
          <div :class="tabIndex==2?'active':''" @click="tabClick(2)">历史任务</div>
        </div>
        <div class="search-box">
          <el-input v-model="searchText" placeholder="请输入搜索内容" class="input-with-select">
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
      </div>
      <div class="table-list">
        <div class="item" v-for="(item,index) in tableList">
          <div class="left">
            <div class="left-t">
              <span>{{ index+1 }}.</span>{{ item.title }}
              <span class="status" :class="item.status==='执行中'?'active':''">{{ item.status }}</span>
            </div>
            <div class="left-b">
              <img src="@/assets/images/signMachineNest/machineRight/date.png" alt="" />{{ item.time }}
              <img src="@/assets/images/signMachineNest/machineRight/name.png" alt="" />{{ item.name }}
            </div>
          </div>
          <div class="right">
            <img src="@/assets/images/signMachineNest/machineRight/return.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
import CommonTitle from '@/components/CommonTitle.vue';

const tableList = ref([
  {
    title: '园区巡查-20250313001',
    status: '待执行',
    time: '2025.3.13 19:56',
    name: '陈瑶',
  },
  {
    title: '园区巡查-20250313002',
    status: '执行中',
    time: '2025.3.13 19:56',
    name: '陈瑶',
  },
  {
    title: '园区巡查-20250313003',
    status: '已完成',
    time: '2025.3.13 19:56',
    name: '陈瑶',
  },
]);
let tabIndex = ref(1);
const tabClick = (value) => {
  tabIndex.value = value;
};
</script>

<style lang="scss" scoped>
@@ -22,8 +79,109 @@
    );
    opacity: 0.85;
    margin: 2px 0 13 0;
    display: flex;
    justify-content: space-between;
    padding: 11px 27px 0;
    .tab-search {
      width: 358px;
      height: 76px;
      margin-bottom: 12px;
      .tab-btn {
        display: flex;
        justify-content: center;
        margin-bottom: 16px;
        div {
          width: 104px;
          height: 32px;
          background: #0E2042;
          border: 1px solid #8EA3D1;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          color: #8EA3D1;
          line-height: 32px;
          text-align: center;
          cursor: pointer;
        }
        .active {
          width: 104px;
          height: 32px;
          background: linear-gradient( 180deg, rgba(0,82,248,0.58) 0%, rgba(103,209,251,0.8) 100%);
          color: #fff;
          border: 1px solid rgba(103,209,251,0.8);
        }
      }
      .search-box {
        :deep(.el-input__wrapper) {
          background-color: rgba(0, 112, 255, 0.1);
          background: rgba(0, 15, 34, 0.5);
          box-shadow: 0 0 0 1px #0070ff inset;
        }

        :deep(.el-input-group__append) {
          background: rgba(0, 112, 255, 0.38);
          .el-button {
            background-color: transparent;
            border: 1px solid #0070ff;
            border-left: none;
            color: #fff;
          }
        }
      }
    }
    .table-list {
      width: 358px;
      height: 202px;
      .item {
        width: 100%;
        height: 72px;
        padding: 12px 16px;
        margin-bottom: 8px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        color: #fff;
        display: flex;
        justify-content: space-between;
        .left {
          .left-t {
            height: 24px;
            font-size: 16px;
            margin-bottom: 4px;
            .status {
              text-align: center;
              font-size: 12px;
              display: inline-block;
              width: 48px;
              height: 20px;
              background: rgba(76,166,255,0.08);
              border-radius: 4px 4px 4px 4px;
              border: 1px solid #4CA6FF;
              color: #4CA6FF;
            }
            .active {
              border: 1px solid #04F0D1;
              color: #04F0D1;
            }
          }
          .left-b {
            height: 21px;
            line-height: 21px;
            img {
              width: 16px;
              height: 16px;
              margin-right: 2px;
              &:last-child {
                margin-left: 42px;
              }
            }
          }
        }
        .right {
          img {
            width: 46px;
            height: 46px
          }
        }
      }
    }
 }
</style>