<!-- 巡检任务列表 -->
|
<template>
|
<CommonTitle title="巡检任务列表" />
|
<div :style="{ marginLeft: pxToRem(14) }">
|
<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>
|
.inspection-rask-list {
|
width: 390px;
|
height: 325px;
|
background: linear-gradient(
|
270deg,
|
#1f3e7a 0%,
|
rgba(31, 62, 122, 0.35) 79%,
|
rgba(31, 62, 122, 0) 100%
|
);
|
opacity: 0.85;
|
margin: 2px 0 13 0;
|
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>
|
