wisdomisitezwfront-web/src/views/goverment/AIwarning/accessSituation/index.vue

<template>
	<div class="warning-page">
		<LeftMenu
			v-model="active"
			:tabs="['项目名称', '工程名称']"
			:records="records"
			@change-page="onCurChange"
			@search="onSearchInput"
			:pageable="pages"
			style="min-height: 100%"
		>
			<template #default="{ data }">
				<div class="leftProject" @click="onSearch(data)">
					<span class="projectName">{{
						(data as ResAiProjectPage).projectName || (data as ResAiEngineerPage).engineeringName
					}}</span>
					<div class="leftMenu_item flx-justify-between">
						<div class="flx-justify-between">
							<img src="@/assets/images/AIwaring/视频.png" alt="" />
							<span class="middleSize">接入视频路数：{{ data.deviceNum }}</span>
						</div>
						<div>
							<img src="@/assets/images/AIwaring/报警.png" alt="" />
							<span class="middleSize">今日报警次数：{{ data.todayAlarm }}</span>
						</div>
					</div>

					<div class="bottom_item flx-justify-between" style="margin-top: 6px">
						<div>
							<span class="bottomSize">待整改问题：{{ data.questionNum }}</span>
						</div>
						<div>
							<span class="bottomSize">已整改问题数：{{ data.solveQuestionNum }}</span>
						</div>
					</div>
				</div>
			</template>
		</LeftMenu>

		<div class="right_container">
			<!-- <div class="form_div"> -->
			<el-form :model="form" :inline="true" @submit.prevent class="form" ref="FormRef">
				<el-form-item label="监控名称">
					<el-select class="select" v-model="form.code" placeholder="请输入">
						<el-option v-for="item in nameList" :key="item.code" :label="item.name" :value="item.code" />
					</el-select>
				</el-form-item>
				<el-form-item label="创建时间">
					<el-date-picker
						v-model="form.createTime"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						@change="onDatePicker"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handSearch">查询</el-button>
				</el-form-item>
			</el-form>
			<!-- </div> -->

			<div class="imgPage">
				<div class="imgTable">
					<div class="img_item" v-for="item in questList.records" @click="onShowImg(item)" :key="item.id">
						<el-image style="width: 100%; height: 182px" :src="item.image" fit="fill" />
						<div class="page_text flx-justify-column">
							<div class="img_title">{{ item.typeName }}</div>
							<div style="display: flex; justify-content: space-between">
								<div style="font-size: 12px">位置：{{ item.deviceName }}</div>
								<div style="font-size: 12px">报警事件：{{ item.createTime }}</div>
							</div>
						</div>
					</div>
				</div>
				<!-- :handleSizeChange="handleSizeChange" -->
				<Pagination
					:pageable="pageable"
					layout="prev, pager, next, jumper"
					:handleCurrentChange="handleCurrentChange"
					:background="background"
					class="pagination"
				/>
			</div>
		</div>
	</div>

	<el-dialog class="imgDialog" title="整改图片" width="50%" v-model="imgVisible" show-close>
		<div class="img_div">
			<el-image class="diaImg" :src="imgList.image" fit="fill" />
		</div>

		<template #footer>
			<div class="flx-justify-between">
				<div class="flx-center">
					<span class="img_diatitle m-10">{{ imgList.typeName }}</span>
					<span class="img_text m-10">位置：{{ imgList.deviceName }}</span>
					<span class="img_text m-10">时间：{{ imgList.createTime }}</span>
					<span class="img_text m-10 flx-center">
						<div :class="imgList.state === 0 ? 'pending' : imgList.state === 1 ? 'processing' : 'complete'"></div>
						<!-- <div :class="imgList.state === 0 ? 'pending' : 'complete'"></div> -->
						{{ imgList.state === 0 ? "待处理" : imgList.state === 1 ? "处理中" : "已处理" }}</span
					>
				</div>
				<div>
					<el-button type="primary" v-if="imgList.state === 0" @click="onRecord"> 创建隐患记录 </el-button>
				</div>
			</div>
		</template>
	</el-dialog>

	<DialogForm
		title="创建隐患记录"
		:formConfig="formConfig"
		:formData="formData"
		v-model:visible="visible"
		append-to-body
		width="700px"
		@confirm="saveItem"
	>
	</DialogForm>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
import {
	getAIprojectQuestionPage,
	getAIengQuestionPage,
	getAIQuestionPage,
	addAIQuestionPage,
	getAiMonitorDev
} from "@/api/modules/goverment";
import LeftMenu from "@/components/LeftMenu/LeftMenu.vue";
import { ReqAiadd } from "@/api/types/government/AIwaring";
import Pagination from "@/components/ProTable/components/Pagination.vue";
import DialogForm from "@/components/DialogForm/index.vue";
import { ElMessage } from "element-plus";
import type { ResAiProjectPage, ResAiEngineerPage } from "@/api/types/government/AIwaring";

const active = ref(0);
const imgVisible = ref(false);
const background = ref(true);
const visible = ref(false);

// 搜索用的项目sn或者工程sn
const searchSn = ref("");

// 项目或者工程名字
const searchName = ref<string>("");

const pages = ref({
	pageNo: 1,
	pageSize: 7,
	total: 0
});
const pageable = ref({
	pageNo: 1,
	pageSize: 9,
	total: 0
});

const records = ref<ResAiProjectPage[] | ResAiEngineerPage[]>([]);
// 监控设备
const monitorList = ref<ResAiProjectPage[]>([]);

const questList = ref([]);
const form = ref({
	code: "",
	createTime: "",
	startTime: "",
	endTime: ""
});
// form下拉框
const nameList = ref([]);

// 点击图片存的数据
const imgList = ref({
	alarmId: "",
	createBy: "",
	createTime: "",
	deviceCode: "",
	deviceName: "",
	engineeringSn: "",
	id: "",
	image: "",
	projectSn: "",
	remark: "",
	solveBy: "",
	solveImage: "",
	solveTime: "",
	state: 0,
	type: 4,
	typeName: ""
});
const formData = ref({
	projectName: "",
	typeName: "",
	deviceName: "",
	createTime: "",
	image: "",
	createBy: ""
});

// 弹窗中的配置
const formConfig = {
	formItemConfig: [
		{
			label: "工程名称",
			prop: "projectName",
			type: "input",
			disabled: true
		},
		{
			label: "隐患类型",
			prop: "typeName",
			type: "input",
			disabled: true
		},
		{
			label: "抓拍地点",
			prop: "deviceName",
			type: "input",
			disabled: true
		},
		{
			label: "创建时间",
			prop: "createTime",
			type: "date",
			datetType: "date",
			disabled: true
		},
		{
			label: "图片显示",
			prop: "image",
			type: "image",
			src: "image",
			width: "auto",
			height: "100px",
			fit: "fill"
		},
		{
			label: "下达人",
			prop: "createBy",
			type: "input"
		}
	],
	rules: {
		projectName: [
			{
				required: true,
				message: "请输入名称",
				trigger: "blur"
			}
		],
		typeName: [
			{
				required: true,
				message: "请输入隐患类型",
				trigger: "blur"
			}
		]
	}
};

const onShowImg = (params: any) => {
	imgVisible.value = true;
	imgList.value = { ...params, alarmId: params.id };
	delete imgList.value.id;
};

// 页面的分页
const handleCurrentChange = async (page: number) => {
	const res = await getAIQuestionPage(
		active.value === 0
			? {
					pageNo: page,
					pageSize: pageable.value.pageSize,
					projectSn: searchSn.value
			  }
			: {
					pageNo: page,
					pageSize: pageable.value.pageSize,
					engineeringSn: searchSn.value
			  }
	);
	questList.value = res.result;
	pageable.value.total = +questList.value.total;
};

const handleSizeChange = async (size: number) => {
	const res = await getAIQuestionPage(
		active.value === 0
			? {
					pageNo: pageable.value.pageNo,
					pageSize: size,
					projectSn: searchSn.value
			  }
			: {
					pageNo: pageable.value.pageNo,
					pageSize: size,
					engineeringSn: searchSn.value
			  }
	);
	questList.value = res.result;
	pageable.value.total = +questList.value.total;
};
// 创建隐患记录的弹窗
const onRecord = () => {
	formData.value = { ...imgList.value };
	formData.value.projectName = searchName.value;
	visible.value = true;
};
// form日期选择后改变入参
const onDatePicker = () => {
	form.value.startTime = form.value.createTime[0];
	form.value.endTime = form.value.createTime[1];
};

// 页面的form搜索  这里
const handSearch = async () => {
	const res = await getAIQuestionPage(
		active.value === 0
			? { ...form.value, ...pageable.value, projectSn: searchSn.value }
			: { ...form.value, ...pageable.value, engineeringSn: searchSn.value }
	);
	questList.value = res.result;
};

// 页面的项目名称和工程名称的div点击事件
const onSearch = async (params: ResAiProjectPage | ResAiEngineerPage) => {
	const res = await getAIQuestionPage(
		active.value === 0
			? { projectSn: (params as ResAiProjectPage).projectSn, pageNo: pageable.value.pageNo, pageSize: pageable.value.pageSize }
			: {
					engineeringSn: (params as ResAiEngineerPage).engineeringSn,
					pageNo: pageable.value.pageNo,
					pageSize: pageable.value.pageSize
			  }
	);
	questList.value = res.result;
	pageable.value.total = +res.result.total;
	active.value === 0
		? (searchSn.value = (params as ResAiProjectPage).projectSn)
		: (searchSn.value = (params as ResAiEngineerPage).engineeringSn);
	active.value === 0
		? (searchName.value = (params as ResAiProjectPage).projectName)
		: (searchName.value = (params as ResAiEngineerPage).engineeringName);
	// 清空form
	form.value = {
		code: "",
		createTime: "",
		startTime: "",
		endTime: ""
	};
};

// leftMenu页面的搜索按钮
const onSearchInput = async (params: string) => {
	if (active.value === 0) {
		const { result } = await getAIprojectQuestionPage({ projectName: params, ...pages.value });
		records.value = result.records;
	} else {
		const { result } = await getAIengQuestionPage({ engineeringName: params, ...pages.value });
		records.value = result.records;
	}
};

// leftMenu页面的分页
const onCurChange = async (params: number) => {
	if (active.value === 0) {
		const { result } = await getAIprojectQuestionPage({ ...pages.value, pageNo: params });
		records.value = result.records;
	} else {
		const { result } = await getAIengQuestionPage({ ...pages.value, pageNo: params });
		records.value = result.records;
		pages.value.total = +result.total;
	}

	// pages.value.total = +res.result.total;
};

const saveItem = async (form: ReqAiadd) => {
	await addAIQuestionPage(form);
	visible.value = false;
	ElMessage.success("发布成功");
};

// 获取项目名称分页
const getAIproPage = async () => {
	const { result } = await getAIprojectQuestionPage(pages.value);
	records.value = result.records;
	pages.value.total = Number(result.total);
};
// 获取工程名称分页
const getAIengPage = async () => {
	const { result } = await getAIengQuestionPage(pages.value);
	records.value = result.records;
	pages.value.total = +result.total;
};

// 这里
const getAiMonitorDevList = async () => {
	const res = await getAiMonitorDev(active.value === 0 ? { projectSn: searchSn.value } : { engineeringSn: searchSn.value });
	nameList.value = res.result;
};

watch(
	() => active.value,
	async (value: number) => {
		// console.log(value);
		pages.value.pageNo = 1;
		pages.value.total = 0;
		if (value === 0) {
			await getAIproPage();
			onSearch(records.value[0]);
		} else {
			await getAIengPage();
			onSearch(records.value[0]);
		}
	}
);

onMounted(async () => {
	await getAIproPage();
	onSearch(records.value[0]);
	searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;
	searchName.value = (records.value as ResAiProjectPage[])[0].projectName;
	// getAIengPage();
	getAiMonitorDevList();
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>