uni-zhihuikuangshan/pages/ningdongyunying/real_time_alarm/real_time_alarm.vue

<template>
	<view class="content">
		<view class="section">
			<view class="table" v-if="list">
				<uni-table emptyText="暂无更多数据" stripe>
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center">时间</uni-th>
						<uni-th align="center" width="90">单位</uni-th>
						<uni-th align="center">地点</uni-th>
						<!-- <uni-th align="center">系统名称</uni-th> -->
						<uni-th align="center">报警内容</uni-th>
						<uni-th align="center">处理措施</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in list" :key="index">
						<uni-td style="vertical-align: middle;" align="center">
							<view>{{item.enter_time}}</view>
						</uni-td>
						<uni-td style="vertical-align: middle;" align="center">
							<view>{{item.coal_name}}</view>
						</uni-td>
						<uni-td style="vertical-align: middle;" align="center">
							<view>{{item.survey_name}}</view>
						</uni-td>
						<uni-td style="vertical-align: middle;" align="center">
							<view>{{item.abnormal_reason}}</view>
						</uni-td>
						<uni-td style="vertical-align: middle;" align="center">
							<view>{{item.do_measure}}</view>
						</uni-td>
					</uni-tr>

				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			};
		},
		onLoad() {
			this.get_ycbj_list()
		},
		methods:{
			get_ycbj_list(){
				this.$p_api.get_ycbj_list({
					
				}).then((res)=>{
					this.list = res.data.content
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		box-sizing: border-box;
		padding: 0rpx 25rpx;

		margin-bottom: 150rpx;

		.section {
			.title {
				line-height: 90rpx;
				font-size: 34rpx;
				color: #424242;
				font-weight: 700;

				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					margin: 0 20rpx;
				}

				.line {
					width: 100rpx;
					height: 2rpx;
					background-color: #BFBFBF;
				}
			}

			.table {
				margin:0 -25rpx 20rpx;
				width: 750rpx;
				.uni-table-th {
					color: #FFFFFF;
					background-color: #00A0E8;
				}

				.uni-table-th.table--border {
					border: none;
				}

				.uni-table-td.table--border {
					color: #666666;
					border: none;
				}


			}

		}

	}
</style>