IOT/SourceCode/ui/fbs-ui_app2/pages/inspector/components/handled.vue

<template>
	<view class="container">
		<Search ref="searchRef" @reset="reset" @confirm="query"></Search>
		<view class="none-data" v-if="dataList.length == 0">
			<text>没有 已完结 数据</text>
			<image src="/static/image/no-data.png"></image>
		</view>
		<scroll-view scroll-y="true" @scroll="scroll" :scroll-top="scrollTop" style="height: 540px">
			<u-swipe-action>
				<view v-if="dataList.length > 0">
					<view v-for="(item, index) in dataList" :key="index">
						<view class="alarm-box">
							<u-swipe-action-item :options="swipeOption" :name="index" @click="viewDetail(item)">
								<view class="box-header">
									<view class="box-title">{{ item.company_name }}</view>
								</view>
							</u-swipe-action-item>
							<view class="box-body">
								<view class="body-item">
									<view class="left">公司名称:</view>
									<view class="right">{{ item.company_name }}</view>
								</view>
								<view class="body-item">
									<view class="left">区域:</view>
									<view class="right">{{ item.org_name }}</view>
								</view>
								<view class="body-item">
									<view class="left">告警类型:</view>
									<view class="right">{{ item.warn_type_name }}</view>
								</view>
								<view class="body-item">
									<view class="left">创建时间:</view>
									<view class="right">{{ item.work_order_start_time }}</view>
								</view>
								<view class="body-item">
									<view class="left">完结时间:</view>
									<view class="right">{{ item.work_order_end_time }}</view>
								</view>
								<view class="body-item">
									<view class="left">流程耗时:</view>
									<view class="right">{{ (item.work_order_continue_time / 60).toFixed(2) }} 时</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-swipe-action>
		</scroll-view>
		<u-modal v-model="modalDetailInfo" :show="modalDetailShow" :title="modalDetailTitle" :showCancelButton="true" @cancel="modalDetailShow = false" :showConfirmButton="showEditBtn" @confirm="confirmSubmite">
			<!-- <view class="slot-content"><rich-text :nodes="content"></rich-text></view> -->
			<view class="slot-content" style="width: 100%;">
				<scroll-view scroll-y="true" style="height: 230px;">
					<view class="modal-item">
						<view class="left">公司名称:</view>
						<view class="right">{{ modalDetailInfo.warnDetail.company_name }}</view>
					</view>
					<view class="modal-item">
						<view class="left">告警设备:</view>
						<view class="right">{{ modalDetailInfo.warnDetail.device_name }}</view>
					</view>
					<view class="modal-item">
						<view class="left">告警类型:</view>
						<view class="right">{{ modalDetailInfo.warnDetail.warn_type_name }}</view>
					</view>
					<view class="modal-item">
						<view class="left">告警时间:</view>
						<view class="right">{{ modalDetailInfo.warnDetail.warn_start_time }}</view>
					</view>
					<view v-for="(item2, index2) in modalDetailInfo.processInfoList" :key="index2" style="margin: 10px 0;border-top: 1px solid #333;">
						<view class="modal-item">
							<view class="left" v-if="item2.work_order_type == 0 || item2.work_order_type == 1">发起人:</view>
							<view class="left" v-if="item2.work_order_type == 2">督查审核:</view>
							<view class="left" v-if="item2.work_order_type == 3">督查转交:</view>
							<view class="left" v-if="item2.work_order_type == 4">现场督查:</view>
							<view class="left" v-if="item2.work_order_type == 5">企业上传:</view>
							<view class="right" v-if="item2.work_order_type == 0 || item2.work_order_type == 2 || item2.work_order_type == 3 || item2.work_order_type == 4">督查部门</view>
							<view class="right" v-if="item2.work_order_type == 1 || item2.work_order_type == 5">企业用户</view>
						</view>
						<view class="modal-item">
							<view class="left">时间:</view>
							<view class="right">{{ item2.work_order_process_time }}</view>
						</view>
						<view class="modal-item">
							<view class="left" v-if="item2.work_order_type == 0">催办内容:</view>
							<view class="left" v-if="item2.work_order_type == 1">上报备注：:</view>
							<view class="left" v-if="item2.work_order_type == 2">审核意见:</view>
							<view class="left" v-if="item2.work_order_type == 3">备注:</view>
							<view class="left" v-if="item2.work_order_type == 4">上报备注:</view>
							<view class="left" v-if="item2.work_order_type == 5">上报备注:</view>
							<view class="right" v-if="item2.work_order_type == 2">{{ item2.audit_state_name }}</view>
							<view class="right" v-if="item2.work_order_type != 2">{{ item2.content }}</view>
						</view>
						<view class="modal-item" v-if="item2.work_order_type == 2">
							<view class="left">备注:</view>
							<view class="right">{{ item2.content }}</view>
						</view>
						<view v-if="item2.picture_url" class="modal-item">
							<view class="left" v-if="item2.work_order_type == 1 || item2.work_order_type == 4 || item2.work_order_type == 5">上报文件:</view>
							<view class="right"><u--image :showLoading="true" :src="item2.picture_url"></u--image></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-modal>
	</view>
</template>
<script>
import config from "@/common/config";
import { log } from "@/utils/base.js";
import api from "@/common/api.js";
import Search from "./search.vue";
export default {
	name: "handling",
	components: {
		Search,
	},
	data() {
		return {
			needQuery: true,
			isQuerying: false,
			dataList: [],
			fileList: [],
			search: {
				pageIndex: 1,
				pageSize: 10,
				params: {
					company_name: "",
					warn_type: "",
				},
			},
			swipeOption: [
				{
					text: "查看",
					style: {
						backgroundColor: "#f9ae3d",
					},
				},
			],
			scrollTop: 0,
			oldScrollTop: 0,
			modalDetailShow: false,
			modalDetailInfo: {
				warnDetail: {},
				processInfoList: [],
			},
			showEditBtn: false,
			modalDetailTitle: "查看详情",
			textContent: "",
			workOrderId: "",
		};
	},

	mounted() {
		this.reset();
	},
	options: { styleIsolation: "shared" },
	methods: {
		query(nextPage) {
			if (this.needQuery || !nextPage) {
				this.search.params.company_name = this.$refs.searchRef.searchInfo.company_name;
				this.search.params.warn_type = this.$refs.searchRef.searchInfo.warn_type;
				var search = JSON.parse(JSON.stringify(this.search));
				if (!search.params.company_name) {
					delete search.params.company_name;
				}
				if (!search.params.warn_type) {
					delete search.params.warn_type;
				}
				if (!nextPage) {
					this.dataList = [];
					this.needQuery = true;
					this.goTop();
				}
				api.getFinishedWorkOrderByOrgLaw(search).then(({ total, rows }) => {
					if ((this.search.pageIndex - 1) * this.search.pageSize < total) {
						this.dataList.push(...rows);
						this.isQuerying = false;
					} else {
						this.needQuery = false;
					}
					log("getFinishedWorkOrderByOrgLaw", search, rows, this.dataList);
				});
			}
		},
		scroll(e) {
			this.oldScrollTop = e.detail.scrollTop;
			if (e.detail.scrollHeight - e.detail.scrollTop <= 400 && !this.isQuerying) {
				//console.log("到达底部");
				this.isQuerying = true;
				this.search.pageIndex++;
				this.query(true);
			}
		},
		goTop() {
			this.scrollTop = this.oldScrollTop;
			this.$nextTick(() => {
				this.scrollTop = 0;
			});
		},
		reset() {
			this.search.pageIndex = 1;
			this.needQuery = true;
			this.isQuerying = false;
			this.query();
		},
		viewDetail(item) {
			this.workOrderId = item.work_order_id;
			api.getWorkOrderDetailByOrgLaw(item.work_order_id).then(({ data }) => {
				log("getWorkOrderDetailByOrgLaw====>", data);
				this.modalDetailInfo = data;
				this.modalDetailShow = true;
			});
		},
		hideDetailModal() {
			this.modalDetailShow = false;
		},
	},
};
</script>

<style lang="scss">
.container {
	padding: 10px 5px;
	font-size: 14px;
	line-height: 24px;
}
.btn-search-group {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
}
.none-data {
	margin-top: 10%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	color: $uni-color-primary;
}
/deep/ .u-modal {
	&__title {
		padding-top: 15px;
	}
	&__content {
		padding: 10px;
	}
}
.modal-item {
	margin: 0;
	width: 100%;
	display: flex;
	flex: 1;
	.left {
		font-weight: 600;
		padding-right: 5px;
		white-space: nowrap;
	}
}
</style>