fix：新增预警通知功能
This commit is contained in:
parent
d3751210e0
commit
cf22b295bc
@ -19,7 +19,6 @@
|
||||
<div class="menu-return">
|
||||
<i class="el-icon-data-analysis" @click="goBigScreen"></i>
|
||||
</div>
|
||||
<div class="header-news"><i class="el-icon-bell"></i></div>
|
||||
<search id="header-search" class="right-menu-item" />
|
||||
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
@ -96,8 +95,8 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
/* 点击跳转大屏页面 */
|
||||
goBigScreen() {
|
||||
this.$router.push("/screen");
|
||||
goBigScreen(){
|
||||
this.$router.push("/screen")
|
||||
},
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch("app/toggleSideBar");
|
||||
@ -164,7 +163,7 @@ export default {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.header-news {
|
||||
.menu-return {
|
||||
height: 100%;
|
||||
margin-right: 0.5rem;
|
||||
|
||||
@ -172,19 +171,7 @@ export default {
|
||||
cursor: pointer;
|
||||
font-size: 1.4rem;
|
||||
line-height: 3.1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-return {
|
||||
height: 100%;
|
||||
margin-right: 1rem;
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
font-size: 1.4rem;
|
||||
line-height: 3.1rem;
|
||||
font-weight: 400;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-19 14:16:56
|
||||
* @LastEditTime: 2024-11-20 14:32:46
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -20,7 +20,72 @@
|
||||
></iframe>
|
||||
</div>
|
||||
<div class="header-time">
|
||||
<div class="header-news"><i class="el-icon-message-solid"></i></div>
|
||||
<!-- 消息中心 -->
|
||||
<div class="header-news">
|
||||
<el-popover
|
||||
placement="bottom-end"
|
||||
width="400"
|
||||
popper-class="screen-message-popover"
|
||||
trigger="click"
|
||||
>
|
||||
<div class="screen-message-content">
|
||||
<div class="message-content">
|
||||
<fssm-scroll>
|
||||
<div
|
||||
class="message-item"
|
||||
v-for="(item, index) in messageList"
|
||||
:key="`message-item-${index}`"
|
||||
>
|
||||
<div class="item-top" @click="handleMessageItemClick(item.status)">
|
||||
<div class="index">
|
||||
<i
|
||||
v-if="item.status === '1'"
|
||||
style="color: #67c23a"
|
||||
class="el-icon-success"
|
||||
></i>
|
||||
<i
|
||||
v-if="item.status === '2'"
|
||||
style="color: #e6a23c"
|
||||
class="el-icon-info"
|
||||
></i>
|
||||
<i
|
||||
v-if="item.status === '3'"
|
||||
style="color: #909399"
|
||||
class="el-icon-warning"
|
||||
></i>
|
||||
<i
|
||||
v-if="item.status === '4'"
|
||||
style="color: #f56c6c"
|
||||
class="el-icon-error"
|
||||
></i>
|
||||
</div>
|
||||
<div class="time">
|
||||
<span>{{ item.time }}</span>
|
||||
</div>
|
||||
<div class="carNo">
|
||||
<span>{{ item.car }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
</div>
|
||||
</fssm-scroll>
|
||||
</div>
|
||||
<div class="message-footer">
|
||||
<el-button
|
||||
@click="handleMessageClick"
|
||||
icon="el-icon-d-arrow-right"
|
||||
type="text"
|
||||
>查看更多</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-message-solid">
|
||||
<div class="num">48</div>
|
||||
</i>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="header-data">{{ dataTime }}</div>
|
||||
<div class="header-week">
|
||||
<span>{{ weekTime }}</span>
|
||||
@ -311,6 +376,10 @@ export default {
|
||||
weekTime: "",
|
||||
// 年
|
||||
yearTime: "",
|
||||
|
||||
// 预警中心消息数据
|
||||
messageList: [],
|
||||
|
||||
// 数据栏右上角选择框
|
||||
selectTypeArr: [],
|
||||
// 左侧切换模块
|
||||
@ -373,224 +442,7 @@ export default {
|
||||
// 图片背景下病害类型下拉选择绑定
|
||||
mapCareSelect: "",
|
||||
// 图片背景下病害类型下拉选择数据
|
||||
dieaseOptions: [
|
||||
{
|
||||
value: "zhinan",
|
||||
label: "指南",
|
||||
children: [
|
||||
{
|
||||
value: "shejiyuanze",
|
||||
label: "设计原则",
|
||||
},
|
||||
{
|
||||
value: "daohang",
|
||||
label: "导航",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "zujian",
|
||||
label: "组件",
|
||||
children: [
|
||||
{
|
||||
value: "basic",
|
||||
label: "Basic",
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form",
|
||||
children: [
|
||||
{
|
||||
value: "radio",
|
||||
label: "Radio 单选框",
|
||||
},
|
||||
{
|
||||
value: "checkbox",
|
||||
label: "Checkbox 多选框",
|
||||
},
|
||||
{
|
||||
value: "input",
|
||||
label: "Input 输入框",
|
||||
},
|
||||
{
|
||||
value: "input-number",
|
||||
label: "InputNumber 计数器",
|
||||
},
|
||||
{
|
||||
value: "select",
|
||||
label: "Select 选择器",
|
||||
},
|
||||
{
|
||||
value: "cascader",
|
||||
label: "Cascader 级联选择器",
|
||||
},
|
||||
{
|
||||
value: "switch",
|
||||
label: "Switch 开关",
|
||||
},
|
||||
{
|
||||
value: "slider",
|
||||
label: "Slider 滑块",
|
||||
},
|
||||
{
|
||||
value: "time-picker",
|
||||
label: "TimePicker 时间选择器",
|
||||
},
|
||||
{
|
||||
value: "date-picker",
|
||||
label: "DatePicker 日期选择器",
|
||||
},
|
||||
{
|
||||
value: "datetime-picker",
|
||||
label: "DateTimePicker 日期时间选择器",
|
||||
},
|
||||
{
|
||||
value: "upload",
|
||||
label: "Upload 上传",
|
||||
},
|
||||
{
|
||||
value: "rate",
|
||||
label: "Rate 评分",
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form 表单",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "data",
|
||||
label: "Data",
|
||||
children: [
|
||||
{
|
||||
value: "table",
|
||||
label: "Table 表格",
|
||||
},
|
||||
{
|
||||
value: "tag",
|
||||
label: "Tag 标签",
|
||||
},
|
||||
{
|
||||
value: "progress",
|
||||
label: "Progress 进度条",
|
||||
},
|
||||
{
|
||||
value: "tree",
|
||||
label: "Tree 树形控件",
|
||||
},
|
||||
{
|
||||
value: "pagination",
|
||||
label: "Pagination 分页",
|
||||
},
|
||||
{
|
||||
value: "badge",
|
||||
label: "Badge 标记",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "notice",
|
||||
label: "Notice",
|
||||
children: [
|
||||
{
|
||||
value: "alert",
|
||||
label: "Alert 警告",
|
||||
},
|
||||
{
|
||||
value: "loading",
|
||||
label: "Loading 加载",
|
||||
},
|
||||
{
|
||||
value: "message",
|
||||
label: "Message 消息提示",
|
||||
},
|
||||
{
|
||||
value: "message-box",
|
||||
label: "MessageBox 弹框",
|
||||
},
|
||||
{
|
||||
value: "notification",
|
||||
label: "Notification 通知",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "navigation",
|
||||
label: "Navigation",
|
||||
children: [
|
||||
{
|
||||
value: "menu",
|
||||
label: "NavMenu 导航菜单",
|
||||
},
|
||||
{
|
||||
value: "tabs",
|
||||
label: "Tabs 标签页",
|
||||
},
|
||||
{
|
||||
value: "breadcrumb",
|
||||
label: "Breadcrumb 面包屑",
|
||||
},
|
||||
{
|
||||
value: "dropdown",
|
||||
label: "Dropdown 下拉菜单",
|
||||
},
|
||||
{
|
||||
value: "steps",
|
||||
label: "Steps 步骤条",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "others",
|
||||
label: "Others",
|
||||
children: [
|
||||
{
|
||||
value: "dialog",
|
||||
label: "Dialog 对话框",
|
||||
},
|
||||
{
|
||||
value: "tooltip",
|
||||
label: "Tooltip 文字提示",
|
||||
},
|
||||
{
|
||||
value: "popover",
|
||||
label: "Popover 弹出框",
|
||||
},
|
||||
{
|
||||
value: "card",
|
||||
label: "Card 卡片",
|
||||
},
|
||||
{
|
||||
value: "carousel",
|
||||
label: "Carousel 走马灯",
|
||||
},
|
||||
{
|
||||
value: "collapse",
|
||||
label: "Collapse 折叠面板",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "ziyuan",
|
||||
label: "资源",
|
||||
children: [
|
||||
{
|
||||
value: "axure",
|
||||
label: "Axure Components",
|
||||
},
|
||||
{
|
||||
value: "sketch",
|
||||
label: "Sketch Templates",
|
||||
},
|
||||
{
|
||||
value: "jiaohu",
|
||||
label: "组件交互文档",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
dieaseOptions: [],
|
||||
// 路段下拉绑定
|
||||
roadList: [],
|
||||
// 地图打点-路段绑定
|
||||
@ -651,6 +503,7 @@ export default {
|
||||
this.getMapCare();
|
||||
this.getRoadList();
|
||||
this.getDieaseTypeList();
|
||||
this.getMessageList();
|
||||
// this.initWebSocket();
|
||||
},
|
||||
methods: {
|
||||
@ -687,6 +540,54 @@ export default {
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
/* 获取消息中心数据 */
|
||||
getMessageList() {
|
||||
// getMessageList().then(({ code, data }) => {
|
||||
// if (code === 200) {
|
||||
// this.messageList = data;
|
||||
// }
|
||||
// });
|
||||
this.messageList = [
|
||||
{
|
||||
status: "1",
|
||||
time: "2024/45/62",
|
||||
car: "辽jskdn",
|
||||
content: "骄傲的是否哈德half绝对符合卡的法拉第",
|
||||
},
|
||||
{
|
||||
status: "2",
|
||||
time: "2024/45/62",
|
||||
car: "辽jskdn",
|
||||
content: "骄傲的是否哈德half绝对符合卡的法拉第",
|
||||
},
|
||||
{
|
||||
status: "3",
|
||||
time: "2024/45/62",
|
||||
car: "辽jskdn",
|
||||
content: "骄傲的是否哈德half绝对符合卡的法拉第",
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 消息中心点击具体数据事件
|
||||
* @return {*}
|
||||
*/
|
||||
handleMessageItemClick(value) {
|
||||
this.$router.push({
|
||||
name: "Warning-center",
|
||||
params: { status: value },
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 消息中心查看更多事件
|
||||
* @return {*}
|
||||
*/
|
||||
handleMessageClick() {
|
||||
this.$router.push("/inspection_warn/warning-center");
|
||||
},
|
||||
|
||||
/* 获取数据栏右上角选项数据 */
|
||||
getSelect() {
|
||||
selectTypeList().then(({ code, data }) => {
|
||||
@ -1526,10 +1427,25 @@ export default {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
// 消息中心样式
|
||||
.header-news {
|
||||
i {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 1.5rem;
|
||||
color:red;
|
||||
|
||||
.num {
|
||||
min-width: 0.9rem;
|
||||
position: absolute;
|
||||
top: -0.2rem;
|
||||
right: -0.5rem;
|
||||
padding: 0.2rem;
|
||||
font-size: 0.6rem;
|
||||
border-radius: 0.5rem;
|
||||
color: #ffffff;
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-data {
|
||||
@ -1788,4 +1704,49 @@ input[aria-hidden="true"] {
|
||||
.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// 大屏消息弹出框样式
|
||||
.screen-message-popover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
border: none;
|
||||
|
||||
.screen-message-content {
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
|
||||
.message-content {
|
||||
width: 100%;
|
||||
height: 12rem;
|
||||
|
||||
.message-item {
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px dashed rgb(115, 115, 116);
|
||||
|
||||
.item-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
color: rgb(113, 179, 255);
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-08 09:26:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-18 15:06:35
|
||||
* @LastEditTime: 2024-11-20 10:21:45
|
||||
* @FilePath: \znxjxt-ui\src\views\index.vue
|
||||
* @Description: 系统首页
|
||||
-->
|
||||
|
||||
296
src/views/xj/inspection-warn/warning-center/index.vue
Normal file
296
src/views/xj/inspection-warn/warning-center/index.vue
Normal file
@ -0,0 +1,296 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-20 11:58:33
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-20 14:33:22
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-center\index.vue
|
||||
* @Description: 巡检预警中心
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<!-- 搜索表单 -->
|
||||
<el-form
|
||||
:model="warnForm"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
label-width="5rem"
|
||||
>
|
||||
<el-form-item label="车牌号" prop="carNo">
|
||||
<el-input
|
||||
v-model="warnForm.carNo"
|
||||
placeholder="请输入车牌号"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备ID" prop="deviceId">
|
||||
<el-select
|
||||
v-model="warnForm.deviceId"
|
||||
placeholder="请选择校验状态"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in deviceList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间" prop="dateTime">
|
||||
<el-date-picker
|
||||
v-model="dateTime"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="阅读状态" prop="readStatus">
|
||||
<el-select
|
||||
v-model="warnForm.readStatus"
|
||||
placeholder="请选择阅读状态"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in readStatusList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in editableTabs"
|
||||
:key="`tabs-${index}`"
|
||||
:label="item.title"
|
||||
:name="item.value"
|
||||
>
|
||||
<!-- 标签页头 -->
|
||||
<span slot="label"
|
||||
><i
|
||||
v-if="item.status === '1'"
|
||||
style="color: #67c23a"
|
||||
class="el-icon-success"
|
||||
></i>
|
||||
<i
|
||||
v-if="item.status === '2'"
|
||||
style="color: #e6a23c"
|
||||
class="el-icon-info"
|
||||
></i>
|
||||
<i
|
||||
v-if="item.status === '3'"
|
||||
style="color: #909399"
|
||||
class="el-icon-warning"
|
||||
></i>
|
||||
<i
|
||||
v-if="item.status === '4'"
|
||||
style="color: #f56c6c"
|
||||
class="el-icon-error"
|
||||
></i
|
||||
>{{ item.title }}({{ item.count }})</span
|
||||
>
|
||||
<!-- 标签内容 -->
|
||||
<el-table
|
||||
ref="warningTable"
|
||||
:data="warningList"
|
||||
v-loading="loading"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column label="时间" align="center" prop="segmentName" />
|
||||
<el-table-column
|
||||
label="消息内容"
|
||||
align="center"
|
||||
prop="stakeStart"
|
||||
/>
|
||||
<el-table-column label="车牌号" align="center" prop="stakeEnd" />
|
||||
<el-table-column label="设备id" align="center" prop="stakeEnd" />
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<div class="pagination-part">
|
||||
<el-pagination
|
||||
background
|
||||
:current-page.sync="pagination.page"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size.sync="pagination.size"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableTotal"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "WarningCenter",
|
||||
data() {
|
||||
return {
|
||||
// 查询表单绑定
|
||||
warnForm: {
|
||||
// 车牌号
|
||||
carNo: "",
|
||||
// 设备id
|
||||
deviceId: "",
|
||||
// 阅读状态
|
||||
readStatus: "",
|
||||
},
|
||||
// 设备列表
|
||||
deviceList: [],
|
||||
// 时间
|
||||
dateTime: [],
|
||||
// 阅读状态列表
|
||||
readStatusList: [
|
||||
{ label: "已读", value: "1" },
|
||||
{ label: "未读", value: "2" },
|
||||
],
|
||||
// 导航栏选择绑定
|
||||
activeName: "1",
|
||||
// 导航栏列表
|
||||
editableTabs: [
|
||||
{ title: "成功", value: "1", count: 10, status: "1" },
|
||||
{ title: "提醒", value: "2", count: 10, status: "2" },
|
||||
{ title: "告警", value: "3", count: 10, status: "3" },
|
||||
{ title: "错误", value: "4", count: 10, status: "4" },
|
||||
],
|
||||
// 预警列表
|
||||
warningList: [],
|
||||
// 分页-页数页码
|
||||
pagination: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
},
|
||||
// 列表总条数
|
||||
tableTotal: 0,
|
||||
// 列表加载状态
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler(val) {
|
||||
if (val.params.status) {
|
||||
this.activeName = val.params.status;
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 点击搜索事件
|
||||
* @return {*}
|
||||
*/
|
||||
handleQuery() {
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.warnForm));
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 重置查询
|
||||
* @return {*}
|
||||
*/
|
||||
resetQuery() {
|
||||
this.warnForm = {
|
||||
// 车牌号
|
||||
carNo: "",
|
||||
// 设备id
|
||||
deviceId: "",
|
||||
// 阅读状态
|
||||
readStatus: "",
|
||||
};
|
||||
this.dateTime = [];
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 切换标签事件
|
||||
* @return {*}
|
||||
*/
|
||||
handleClick() {
|
||||
this.pagination.page = 1;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取列表数据
|
||||
* @return {*}
|
||||
*/
|
||||
getList() {
|
||||
this.loading = true;
|
||||
const data = {
|
||||
...this.pagination,
|
||||
...this.warnForm,
|
||||
activeName: this.activeName,
|
||||
startTime: this.dateTime ? this.dateTime[0] : "",
|
||||
endTime: this.dateTime ? this.dateTime[1] : "",
|
||||
};
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 100);
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 切换分页
|
||||
* @param {*} arg
|
||||
* @return {*}
|
||||
*/
|
||||
handleCurrentChange(arg) {
|
||||
this.pagination.page = arg;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 切换每页条数
|
||||
* @param {*} arg
|
||||
* @return {*}
|
||||
*/
|
||||
handleSizeChange(arg) {
|
||||
this.pagination.size = arg;
|
||||
this.getList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100vh - 5.4rem);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* 分页样式 */
|
||||
.pagination-part {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-top: 1rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user