daofu-large-screen/src/views/bottom-menu/index.vue
2025-05-08 15:09:21 +08:00

116 lines
2.9 KiB
Vue

<template>
<div class="bottom-menu">
<div class="bottom_body body_body">
<TitleC title="应急值守"></TitleC>
<el-table
:data="tableData"
max-height="180"
style="width: 100%"
show-overflow-tooltip
>
<el-table-column type="index" label="序号" align="center" width="60" />
<el-table-column prop="areaName" label="值班地点" align="center">
<template #default="scope">
<span>{{ scope.row.postName }} </span>
</template>
</el-table-column>
<el-table-column prop="name" label="值班人员" align="center" />
<el-table-column prop="mobile" label="值班电话" align="center" />
<el-table-column prop="dutyTime" label="值班时间" align="center" />
<!-- <el-table-column label="操作" align="center" width="60">
<template #default="scope">
<span
@click="
(dialogVisible = true), (form = scope.row), (readonly = true)
"
>
<span class="pointer details">详情</span>
</span>
</template>
</el-table-column> -->
</el-table>
<!-- 分页 -->
<el-pagination
class="pagination"
@size-change="getDutyList"
@current-change="getDutyList"
v-model:current-page.sync="currentPage"
v-model:page-size.sync="pageSize"
:page-sizes="[10, 15, 20, 30]"
layout="total, prev, pager, next, jumper"
:total="total"
background
small
>
</el-pagination>
</div>
</div>
</template>
<script lang='ts' setup>
import { onMounted, ref } from "vue";
import { dutyList } from "@/api/homePage";
import { userUSerStore } from "@/store/user";
const userStore = userUSerStore();
const user = ref(JSON.parse(userStore.user_df));
const userId = ref(user.value.userId);
//列表
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
//获取应急值守list
const getDutyList = () => {
let params = {
limit: pageSize.value,
page: currentPage.value,
userId: userId.value,
};
dutyList(params).then((res: any) => {
console.log(res.data);
tableData.value = res.data.list;
total.value = res.data.total;
});
};
onMounted(() => {
getDutyList();
});
</script>
<style lang="scss" scoped>
.bottom-menu {
position: fixed;
bottom: 20px;
left: $sideWidth;
right: $sideWidth;
margin: 0 1%;
display: flex;
flex-direction: row;
justify-content: center;
.item {
font-size: 18px;
font-family: PingFang-SC, PingFang-SC;
color: #ffffff;
padding: 10px 60px;
background-size: 100% 100%;
background-repeat: no-repeat;
cursor: pointer;
}
}
.bottom_body {
width: 90%;
}
::v-deep .el-input__inner {
color: white !important;
}
.body_body {
background-color: rgba(0, 61, 123, 0.353) !important;
border-radius: 0 0 10px 10px;
}
</style>