jfcloud-coldchain/snowy-admin-web/src/views/motoring/report/list.vue

<template>
	<div class="table_item">
		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.dxbh">
			<template #operator>
				<div class="table-head">
					<div class="head-left">
						<a-form
							ref="searchFormRef"
							name="advanced_search"
							:model="searchFormState"
							class="ant-advanced-search-form"
						>
							<a-form-item label="报警时间" name="searchKey">
								<a-range-picker v-model:value="searchFormState.searchKey" value-format="YYYY/MM/DD" />
							</a-form-item>
						</a-form>
						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
						<a-button class="xn-mg08" @click="reset">重置</a-button>
					</div>
					<div class="head-right">
						<a-button>
							<template #icon><logout-outlined /></template>处理
						</a-button>
						<a-button>
							<template #icon><logout-outlined /></template>全部处理
						</a-button>
						<a-button>
							<template #icon><download-outlined /></template>导出
						</a-button>
						<a-button>
							<template #icon><search-outlined /></template>搜索模式
						</a-button>
					</div>
				</div>
			</template>

			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'clzt'">
					<span style="cursor: pointer">
						<a-tag color="#cd201f" v-if="record.clzt == '1'" @click="formRef.onOpen(record)">
							<template #icon>
								<form-outlined />
							</template>
							{{ record.clztValue }}
						</a-tag>

						<a-tag v-else-if="record.clzt == '2'" color="#87d068">
							{{ record.clztValue }}
						</a-tag>
					</span>
				</template>
			</template>
			<template #expandedRowRender="{ record }">
				<a-tabs v-model:activeKey="record.activeKey" size="small" type="card">
					<a-tab-pane key="1" tab="处理过程">
						<!-- 报警信息 -->
						<div class="list">
							<div class="title">报警信息</div>
							<div class="info">
								<div class="info-row">
									<div class="label">报警时间：</div>
									<div class="text">{{ record.zjbjsj }}</div>
								</div>
								<div class="info-row">
									<div class="label">报警类型：</div>
									<div class="text">{{ record.bjlx }}</div>
								</div>
								<div class="info-row">
									<div class="label">设备名称：</div>
									<div class="text">{{ record.sbmc }}</div>
								</div>
							</div>
						</div>
						<!-- 报警通知 -->
						<div class="list">
							<div class="title">报警通知</div>
							<div class="info">
								<div class="info-row">
									<div class="label">接收人：</div>
									<div class="text">{{ record.jsr }}</div>
								</div>
								<div class="info-row">
									<div class="label">报警方式：</div>
									<div class="text">{{ record.type }}</div>
								</div>
								<div class="info-row">
									<div class="label">详情：</div>
									<div class="text">{{ record.xq }}</div>
								</div>
							</div>
						</div>
						<!-- 解决过程 -->
						<div class="list">
							<div class="title">解决过程</div>
							<div class="info">
								<div class="info-row">
									<div class="label">响应时间：</div>
									<div class="text">{{ record.xysj }}</div>
								</div>
								<div class="info-row">
									<div class="label">处理人：</div>
									<div class="text">{{ record.clr }}</div>
								</div>
								<div class="info-row">
									<div class="label">处理时间：</div>
									<div class="text">{{ record.clsj }}</div>
								</div>
								<div class="info-row">
									<div class="label">报警原因：</div>
									<div class="text">{{ record.bjyy }}</div>
								</div>
								<div class="info-row">
									<div class="label">异常原因：</div>
									<div class="text">{{ record.ycyy }}</div>
								</div>
								<div class="info-row">
									<div class="label">处理措施：</div>
									<div class="text">{{ record.clcs }}</div>
								</div>
							</div>
						</div>
					</a-tab-pane>
					<a-tab-pane key="2" tab="监控信息">
						<!-- 基本信息 -->
						<div class="list">
							<div class="title">基本信息</div>
							<div class="info">
								<div class="info-row">
									<div class="label">对象名称</div>
									<div class="text">{{ record.dxmc }}</div>
								</div>
								<div class="info-row">
									<div class="label">对象编号：</div>
									<div class="text">{{ record.dxbh }}</div>
								</div>
								<div class="info-row">
									<div class="label">对象类型：</div>
									<div class="text">{{ record.dxlx }}</div>
								</div>
								<div class="info-row">
									<div class="label">购置日期：</div>
									<div class="text">{{ record.gzrq }}</div>
								</div>
								<div class="info-row">
									<div class="label">品牌：</div>
									<div class="text">{{ record.pp }}</div>
								</div>
								<div class="info-row">
									<div class="label">型号：</div>
									<div class="text">{{ record.xh }}</div>
								</div>
							</div>
						</div>

						<!-- 归属信息 -->
						<div class="list">
							<div class="title">归属信息</div>
							<div class="info">
								<div class="info-row">
									<div class="label">所属部门：</div>
									<div class="text">{{ record.ssbm }}</div>
								</div>
								<div class="info-row">
									<div class="label">对象编码：</div>
									<div class="text">{{ record.dxbh }}</div>
								</div>
							</div>
						</div>
					</a-tab-pane>
				</a-tabs>
			</template>
		</s-table>

		<Form ref="formRef" @successful="tableRef.refresh(true)" />
	</div>
</template>

<script setup>
	import tool from '@/utils/tool'
	import jobApi from '@/api/dev/jobApi'
	import Form from './form.vue'
	const formRef = ref()
	const searchFormRef = ref()
	const searchFormState = ref({})
	const tableRef = ref()

	const columns = [
		{
			title: '处理状态',
			dataIndex: 'clzt',
			align: 'center',
			ellipsis: true,
			sorter: true,
			width: '10%'
		},
		{
			title: '报警开始时间',
			dataIndex: 'bjkssj',
			align: 'center',
			ellipsis: true,
			sorter: true
		},
		{
			title: '最近报警时间',
			dataIndex: 'zjbjsj',
			align: 'center',
			ellipsis: true,
			sorter: true
		},
		{
			title: '所属部门',
			dataIndex: 'ssbm',
			align: 'center',
			ellipsis: true
		},
		{
			title: '对象编码',
			dataIndex: 'dxbh',
			align: 'center',
			ellipsis: true,
			sorter: true
		},
		{
			title: '对象名称',
			dataIndex: 'dxmc',
			align: 'center',
			ellipsis: true
		},
		{
			title: '报警类型',
			dataIndex: 'bjlx',
			align: 'center',
			ellipsis: true
		},
		{
			title: '报警原因',
			dataIndex: 'bjyy',
			align: 'center',
			ellipsis: true
		},
		{
			title: '恢复正常时间',
			dataIndex: 'hfzcsj',
			align: 'center',
			ellipsis: true
		},
		{
			title: '相应时间',
			dataIndex: 'xysj',
			align: 'center',
			ellipsis: true,
			sorter: true
		},
		{
			title: '处理时间',
			dataIndex: 'clsj',
			align: 'center',
			ellipsis: true,
			sorter: true
		},
		{
			title: '处理人',
			dataIndex: 'clr',
			align: 'center',
			ellipsis: true,
			sorter: true
		},
		{
			title: '异常原因',
			dataIndex: 'ycyy',
			align: 'center',
			ellipsis: true,
			sorter: true
		},
		{
			title: '处理措施',
			dataIndex: 'clcs',
			align: 'center',
			ellipsis: true,
			sorter: true
		}
	]

	const activeKey = ref('1')

	const loadData = (parameter) => {
		if (searchFormState.value.searchKey) {
			searchFormState.value.startCreateTime = searchFormState.value.searchKey[0]
			searchFormState.value.endCreateTime = searchFormState.value.searchKey[1]
			delete searchFormState.value.searchKey
		}

		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
			// return res
			const obj = {
				current: 1,
				pages: 1,
				records: [
					{
						clzt: '1',
						clztValue: '未处理',
						bjkssj: '2024-08-28 07:03:24',
						zjbjsj: '2024-08-28 09:03:42',
						ssbm: '上海海关技术中心',
						dxbh: '1111',
						dxmc: '-20度冰箱',
						jsr: '周小杰',
						bjlx: '超限报警1',
						bjyy: '温度超上限',
						bjyy: '温度超上限',
						hfzcsj: '',
						xysj: '',
						clsj: '2024-08-30 09:27:56',
						clr: '',
						ycyy: '',
						clcs: '',
						name: '-21度冰箱',
						fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
						type: '短信报警1',
						dx: '13578945780',
						dh: '/',
						wx: '/',
						yj: '/',
						zt: '发送成功',
						clcs: '',
						sbmc: '冰箱',
						xq: '2024-08-28 09:03:42 短信报警',
						xysj: '2024-08-28 09:03:42',
						clr: '周小杰',
						dxlx: '冰箱',
						gzrq: '2024-05-30 14:27:03',
						pp: '海尔',
						xh: '68'
					},
					{
						clzt: '2',
						clztValue: '已处理',
						bjkssj: '2024-08-31 09:24:56',
						zjbjsj: '2024-08-31 11:15:10',
						ssbm: '广州海关技术中心',
						dxbh: '2222',
						dxmc: '-56度冰箱',
						jsr: '欧阳天添',
						bjlx: '超限报警2',
						bjyy: '温度超上限',
						bjyy: '温度超上限',
						hfzcsj: '',
						xysj: '',
						clsj: '2024-09-01 11:56:01',
						clr: '',
						ycyy: '',
						clcs: '',
						name: '-21度冰箱',
						fsnr: '广州海关基数中心-[-56度冰箱]报警;温度超过上限:-7.7℃',
						type: '电话报警',
						dx: '15464789745',
						dh: '/',
						wx: '/',
						yj: '/',
						zt: '发送成功',
						clcs: '',
						sbmc: '冰箱',
						xq: '2024-08-31 11:15:10 电话报警',
						xysj: '2024-08-31 11:15:10',
						clr: '欧阳天添',
						dxlx: '冰箱',
						gzrq: '2024-05-30 14:27:03',
						pp: '海尔',
						xh: '68'
					}
				],
				size: 10,
				total: 1
			}
			return obj
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
</script>

<style lang="less" scoped>
	.table_item {
		padding: 15px 20px;
		.table-head {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.head-left {
				display: flex;
			}

			.ant-btn {
				margin-left: 10px;
			}
		}
	}
	:deep(.ant-table-pagination-right) {
		justify-content: center !important;
	}

	.list {
		width: 60%;
		margin: 10px 0;
		border: 1px solid #e4e4e4;

		// 标题
		.title {
			width: 100%;
			padding: 10px;
			font-weight: bold;
			color: #802f76;
		}

		// 信息区域
		.info {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			border-bottom: none;

			.info-row {
				display: flex;
				flex: 1 1 33%;
				width: 100%;
				height: 45px;
				line-height: 45px;
				border: 1px solid #e4e4e4;

				.label {
					width: 100px;
					text-align-last: justify;
					padding: 0 10px;
					color: #802f76;
					font-weight: bold;
					border-right: 1px solid #e4e4e4;
				}

				.text {
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 0 10px;
				}
			}
		}
		.info:last-child {
			border-right: none;
		}
	}
</style>