You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
2.8 KiB
148 lines
2.8 KiB
<template>
|
|
<div class="container-bottom">
|
|
<!-- 表头 -->
|
|
<div class="table-head">
|
|
<div class="table-row header">
|
|
<span>工单描述</span>
|
|
<span>上报时间</span>
|
|
<span>区域负责人</span>
|
|
<span>负责人联系方式</span>
|
|
<span>操作</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据行 -->
|
|
<cellRow
|
|
v-for="(item, index) in tableData"
|
|
:key="index"
|
|
>
|
|
<div class="table-container">
|
|
<div class="table-row data">
|
|
<span>{{ item.desc }}</span>
|
|
<span>{{ item.time }}</span>
|
|
<span>{{ item.person }}</span>
|
|
<span>{{ item.contact }}</span>
|
|
<div class="status-container">
|
|
<span :class="['status-tag', getStatusClass(item.status)]">{{
|
|
item.status
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</cellRow>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import cellRow from "./cellRow.vue";
|
|
|
|
// 表格数据
|
|
const tableData = ref([
|
|
{
|
|
desc: "金山南路生活垃圾乱堆乱放",
|
|
time: "2021-05-05 09:05:05",
|
|
person: "王小虎",
|
|
contact: "18888888888",
|
|
status: "待处理",
|
|
},
|
|
{
|
|
desc: "浦东新区道路积水严重",
|
|
time: "2021-06-01 14:30:00",
|
|
person: "王小虎",
|
|
contact: "17777777777",
|
|
status: "处理中",
|
|
},
|
|
{
|
|
desc: "徐汇区路灯故障",
|
|
time: "2021-07-15 08:20:00",
|
|
person: "张三",
|
|
contact: "13333333333",
|
|
status: "已处理",
|
|
},
|
|
]);
|
|
|
|
// 根据状态返回对应的类名
|
|
const getStatusClass = (status) => {
|
|
switch (status) {
|
|
case "待处理":
|
|
return "status-pending";
|
|
case "处理中":
|
|
return "status-processing";
|
|
case "已处理":
|
|
return "status-done";
|
|
default:
|
|
return "";
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container-bottom {
|
|
padding-top: 8px;
|
|
}
|
|
.table-head {
|
|
width: 100%;
|
|
padding: 10px 0 0px 40px;
|
|
display: grid;
|
|
}
|
|
.table-container {
|
|
width: 100%;
|
|
padding: 12px 0 12px 40px;
|
|
display: grid;
|
|
gap: 17px;
|
|
}
|
|
|
|
.table-row {
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: 2fr 2fr 2fr 2fr 1fr;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
span:last-child {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
color: #9cbeff;
|
|
font-family: "MiSans-Regular";
|
|
}
|
|
|
|
.data {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-family: "MiSans-Regular";
|
|
}
|
|
|
|
.status-container{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
/* 状态标签通用样式 */
|
|
.status-tag {
|
|
width: 60%;
|
|
padding: 6px 0px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
border-radius: 18px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 待处理 - 橙色 */
|
|
.status-pending {
|
|
background-color: #CA7A2A;
|
|
}
|
|
|
|
/* 处理中 - 蓝色 */
|
|
.status-processing {
|
|
background-color: #2A95CA;
|
|
}
|
|
|
|
/* 已处理 - 绿色 */
|
|
.status-done {
|
|
background-color: #5DCA2A;
|
|
}
|
|
</style>
|