zhuangpeimespda/pages/produceManagement/andon/record.vue

<template>
	<!-- 响应记录 -->
	<view>
		<uni-card class="card-box">
			<uni-forms ref="formRef" :modelValue="formData" label-width="80px">
				<uni-forms-item label="线别" name="lineCode">
					<uni-data-select v-model="formData.lineCode" placeholder="请选择线别" :localdata="lineCodeOptions"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="故障类型" name="faultDict">
					<uni-data-select v-model="formData.faultDict" placeholder="请选择故障类型" :localdata="andonTypeOptions"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label-width="0">
					<uni-datetime-picker :clear-icon="false" v-model="formData.dateTimeRange" type="daterange" />
				</uni-forms-item>
				<uni-forms-item label-width="0">
					<button type="primary" :disabled="loading" :loading="loading" plain="true" @click="getList">搜索</button>
				</uni-forms-item>
			</uni-forms>
		</uni-card>
		<scroll-view scroll-y="true" class="scroll-Y">
			<uni-list>
				<uni-list-item v-for="(item, index) in list" :key="index" :title="item.title" :note="item.note">
					<template v-slot:footer>
						<div v-if="item.status === 2" class="right-box bg-green">已响应</div>
						<div v-if="item.status === 1" class="right-box bg-red">未响应</div>
					</template>
				</uni-list-item>
			</uni-list>
		</scroll-view>

		<uni-pagination :current="formData.pageNum" :pageSize="formData.pageSize" :total="total" @change="pageChange"></uni-pagination>
		<!-- 消息 -->
		<view>
			<uni-popup ref="dialogRef" type="dialog">
				<uni-popup-dialog :title="dialogData.title" :content="dialogData.content" :type="dialogData.type" cancelText="关闭"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import * as AndonApi from '@/api/andon/index.js';
export default {
	data() {
		return {
			loading: false,
			formData: {
				pageNum: 1,
				pageSize: 10,
				// 产线
				lineCode: '',
				// 报警人
				askPerson: '',
				// 故障类型
				faultDict: '',
				// 查询时间
				dateTimeRange: [],
				status: -1,
				sort: 'startTime',
				sortType: 'desc'
			},
			dialogRef: null,
			dialogData: {
				data: {},
				title: '提示',
				content: '',
				type: 'error'
			},
			list: [],
			total: 0,
			lineCodeOptions: [
				{ value: '1', text: '1号线' },
				{ value: '2', text: '2号线' },
				{ value: '3', text: '3号线' },
				{ value: '4', text: '4号线' }
			],
			andonTypeOptions: [
				{ value: '人员异常', text: '人员异常' },
				{ value: '设备异常', text: '设备异常' },
				{ value: '物料异常', text: '物料异常' }
			]
		};
	},
	onLoad() {
		this.init();
	},
	methods: {
		init() {
			this.formData.dateTimeRange = [this.$dayjs().startOf('week').toDate(), this.$dayjs().endOf('week').toDate()];
			this.handleQuery();
			this.getLineCodeOptions();
			this.getAndonTypeOptions();
		},
		getLineCodeOptions() {
			AndonApi.getAllRoute().then((res) => {
				const { code, data } = res;
				if (code === 200) {
					this.lineCodeOptions = data.map((item) => {
						return {
							text: item.name,
							value: item.code
						};
					});
				}
			});
		},
		getAndonTypeOptions() {
			AndonApi.GetAndonAlarmTypeDict().then((res) => {
				const { code, data } = res;
				if (code === 200) {
					this.andonTypeOptions = data.map((item) => {
						return {
							text: item.name,
							value: item.name
						};
					});
				}
			});
		},
		handleQuery() {
			this.formData.pageNum = 1;
			this.getList();
		},
		pageChange(e) {
			this.formData.pageNum = e.current;
			this.getList();
		},
		getList() {
			this.loading = true;
			let startDate = this.$dayjs(this.formData.dateTimeRange[0]).startOf('week').toDate()
			let endDate = this.$dayjs(this.formData.dateTimeRange[0]).endOf('week').toDate()
			this.formData.dateTimeRange = [startDate, endDate];
			AndonApi.listAndonFaultRecord(this.formData)
				.then((res) => {
					if (res.code === 200) {
						this.total = res.data.totalNum;
						this.list = res.data.result.map((item) => {
							return {
								id: item.id,
								status: item.status,
								title: `问题类别: ${item.faultDict}`,
								note: `线别: ${item.lineCode}
								问题描述: ${item.faultContext}
								报警人: ${item.askPerson}
								报警时间: ${item.startTime ?? ''}
								响应人: ${item.responsePerson ?? ''}
								响应时间: ${item.endTime ?? ''}
								响应时长: ${item.duration ?? ''}`
							};
						});
						this.loading = false;
					}
				})
				.catch((err) => {
					console.log(err);
				});
		}
	}
};
</script>

<style scoped>
.scroll-Y {
	height: 600rpx;
}
.refresh-box {
	margin: 10px;
}
.button-inner {
	display: flex;
	align-items: center;
	justify-content: center;
}
.right-box {
	/* width: 100%; */
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 600;
}
.bg-green {
	background-color: green;
	color: white;
}
.bg-red {
	background-color: red;
	color: white;
}
</style>