From c8868e262e33782ac99e41c94e680ecb7e052f09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E5=A6=8D?= <3096114695@qq.com>
Date: Fri, 16 Jun 2023 19:54:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=94=BF=E5=8A=A1?=
 =?UTF-8?q?=E6=97=A0=E4=BA=BA=E6=9C=BA=E5=BD=B1=E5=83=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/goverment.ts                  |  32 ++
 src/assets/images/unmannedVideo/video.png     | Bin 0 -> 723 bytes
 .../unmannedVideo/accessSituation/index.scss  | 176 +++++++
 .../unmannedVideo/accessSituation/index.vue   | 444 ++++++++++++++++++
 .../unmannedVideo/alarmRecord/index.scss      | 130 +++++
 .../unmannedVideo/alarmRecord/index.vue       | 328 +++++++++++++
 6 files changed, 1110 insertions(+)
 create mode 100644 src/assets/images/unmannedVideo/video.png
 create mode 100644 src/views/goverment/unmannedVideo/accessSituation/index.scss
 create mode 100644 src/views/goverment/unmannedVideo/accessSituation/index.vue
 create mode 100644 src/views/goverment/unmannedVideo/alarmRecord/index.scss
 create mode 100644 src/views/goverment/unmannedVideo/alarmRecord/index.vue

diff --git a/src/api/modules/goverment.ts b/src/api/modules/goverment.ts
index 6aab255..8eb9dbf 100644
--- a/src/api/modules/goverment.ts
+++ b/src/api/modules/goverment.ts
@@ -376,3 +376,35 @@ export const getEngineerInfo = (params: { id: string }) => {
 export const getProjectInfo = (params: { id: string }) => {
 	return http.post(BASEURL + `/gov/project/queryById`, params);
 };
+
+//无人机影像数据列表
+// 分页列表查询无人机影像项目信息
+export const getUnmannedProjectPage = (params: {}) => {
+	return http.post(BASEURL + `/gov/unmannedVideo/projectPage`, params);
+};
+
+// 分页列表查询无人机影像工程信息
+export const getUnmannedEngineeringPage = (params: {}) => {
+	return http.post(BASEURL + `/gov/unmannedVideo/engineeringPage`, params);
+};
+
+// 分页列表查询无人机影像数据列表
+export const getUnmannedPage = (params: {}) => {
+	return http.post(BASEURL + `/gov/unmannedVideo/page`, params);
+};
+
+//无人机影像设备列表
+// 分页列表查询无人机影像项目信息
+export const getDeviceProjectPage = (params: {}) => {
+	return http.post(BASEURL + `/gov/unmannedDevice/projectPage`, params);
+};
+
+// 分页列表查询无人机影像工程信息
+export const getDeviceEngineeringPage = (params: {}) => {
+	return http.post(BASEURL + `/gov/unmannedDevice/engineeringPage`, params);
+};
+
+// 分页列表查询无人机影像数据列表
+export const getDevicePage = (params: {}) => {
+	return http.post(BASEURL + `/gov/unmannedDevice/page`, params);
+};
diff --git a/src/assets/images/unmannedVideo/video.png b/src/assets/images/unmannedVideo/video.png
new file mode 100644
index 0000000000000000000000000000000000000000..cff896fe0991a11fdbe63250621652a8b222ee7d
GIT binary patch
literal 723
zcmV;^0xbQBP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0%%D@K~#7FtyNoY
z(?AqG*Q64EcnM|&gcT%NL16`HS3oM!BL2)5QuEPf1+*)mT|v?n)H}dCAbfxjBpJ?~
zagrI^<BF<BO8l5P_c8b0V}atrr1*<>5FGI-<FA0h4Gu8Fi7e5DCbuN_3TN_3m&I<H
zntT5DTj(WvcpY`3##gwn4A)VRJ4$GL5-|=-{DTQ%Sm6@w#$j!eoA72Fyw>!9eZ&dV
zkK@q0U)p2!kzky_kKW*xXLro&$a9h+j?^<gBKK|0Nv00U-J@WDbJOR>!gJD9<fUi4
zU`_grdg!ee>fkzvNH7nam|#7Gum-;IHMz#ic!OK1I$@5m&@QS2Xd%B?L+>SYG&Mv1
zUvS^C-B&km*hRlEa&4+k*2wAckj65&)U}Vbh{K9fVtbszVD`o|(>uN!!_`E&GyG&w
zxhw@;a8b_DjS)^|5nJqb;GBFztk(@QI+K@O^aKxK!}MbiuLB?LK=2~EX7B?~;Go~J
zHo$*7_-wM>y(@Co!B49_P3|rRg_GP|wPV+QhOH)e1;0%V7I4F;hPIg%d{%jwSgur>
z)MJ~UNU4LCRfFbxcZ0U(^%;jr=&as~8f_0>?V!0(=LmJnN_|4(d8=_9|K}B<t<OJ7
zX$MRZYS$LoR;~xF#<$ucJR&{9Ht6)$wW}ue3H<0aqNZ@A_#KsOw;noK`0LV`R4tH7
zt}k4t(mwH1^Bo8T?uO3Zcsm+$4ZFbv5nmyWS%d3igX@Hq*6(W3N>{B}SygRE7Z*IL
z4|2IreQI(V99KPFLNlu*7Z2gw9FeEr?zH0G@mO<R`UkRt`piJMh)Mte002ovPDHLk
FV1nJgPN@I@

literal 0
HcmV?d00001

diff --git a/src/views/goverment/unmannedVideo/accessSituation/index.scss b/src/views/goverment/unmannedVideo/accessSituation/index.scss
new file mode 100644
index 0000000..386c623
--- /dev/null
+++ b/src/views/goverment/unmannedVideo/accessSituation/index.scss
@@ -0,0 +1,176 @@
+.warning-page {
+	// background-color: blue;
+	display: flex;
+	width: 100%;
+	height: 100%;
+	.right_container {
+		display: flex;
+		flex-direction: column;
+		width: 83%;
+
+		// margin-left: 20px;
+		padding: 0 0 0 20px;
+		.form_div {
+			height: 56px;
+			background-color: #ffffff;
+			border-radius: 8px;
+		}
+		.form {
+			padding: 16px 0 0 36px;
+
+			// height: 56px;
+			background-color: #ffffff;
+			border-radius: 8px;
+		}
+		.imgPage {
+			box-sizing: border-box;
+			display: flex;
+			flex: 1;
+			flex-direction: column;
+			width: 100%;
+			padding: 20px 10px 20px 20px;
+			margin-top: 20px;
+			overflow-y: scroll;
+			background-color: #ffffff;
+			border-radius: 8px;
+			.imgTable {
+				display: flex;
+				flex: 1;
+				flex-wrap: wrap;
+				justify-content: flex-start;
+				width: 100%;
+				.img_item {
+					width: 23.1%;
+					height: 244px;
+					margin: 10px;
+					cursor: pointer;
+					border: 1px solid #dedddd;
+					border-radius: 4px;
+					opacity: 1;
+					.page_text {
+						padding: 0 10px;
+						.img_bottom {
+							display: flex;
+							justify-content: space-between;
+							font-size: 12px;
+							color: #333333;
+							.position {
+								width: 97px;
+								overflow: hidden;
+								text-overflow: ellipsis;
+								white-space: nowrap;
+							}
+						}
+					}
+				}
+			}
+			.table-empty {
+				display: flex;
+				flex: 1;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				color: #999999;
+			}
+			.pagination {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-top: 20px;
+			}
+		}
+	}
+}
+:deep(.el-scrollbar__view) {
+	width: 100%;
+	height: 100%;
+
+	// display: flex;
+	// flex-wrap: wrap;
+}
+.img_title {
+	margin: 0 0 4px;
+	font-family: "siyuan_Medium";
+	font-size: 14px;
+	color: #00378f;
+}
+.img_div {
+	overflow: auto;
+	.diaImg {
+		width: 100%;
+		height: 500px;
+	}
+}
+.img_diatitle {
+	font-family: "siyuan_Medium";
+	font-size: 14px;
+	color: #00378f;
+}
+.img_text {
+	font-size: 12px;
+	color: #333333;
+
+	// background-clip: text;
+	// fill-color: transparent;
+}
+.pending {
+	width: 6px;
+	height: 6px;
+	margin-right: 6px;
+	background-color: #f08117;
+	border-radius: 50%;
+}
+.complete {
+	width: 6px;
+	height: 6px;
+	margin-right: 6px;
+	background-color: #008bff;
+	border-radius: 50%;
+}
+
+// 处理中
+.processing {
+	width: 6px;
+	height: 6px;
+	margin-right: 6px;
+	background-color: #19ac18;
+	border-radius: 50%;
+}
+.leftMenu {
+	// width: 290px;
+	// 页面的项目工程
+	.leftProject {
+		// padding: 5px 8px;
+		color: #333333;
+		.projectName {
+			display: block;
+			width: 100%;
+			overflow: hidden;
+
+			// font-weight: 700;
+			font-family: "siyuan_Medium";
+			font-size: 16px;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+		.leftMenu_item {
+			display: flex;
+			justify-content: space-between;
+			.middleSize {
+				font-size: 12px;
+			}
+			img {
+				margin: 0 4px;
+			}
+		}
+		.bottom_item {
+			.bottomSize {
+				font-size: 10px;
+				color: #666666;
+			}
+		}
+	}
+}
+:deep(.el-form .el-form-item__content .el-range-editor) {
+	width: 200px;
+}
diff --git a/src/views/goverment/unmannedVideo/accessSituation/index.vue b/src/views/goverment/unmannedVideo/accessSituation/index.vue
new file mode 100644
index 0000000..06456be
--- /dev/null
+++ b/src/views/goverment/unmannedVideo/accessSituation/index.vue
@@ -0,0 +1,444 @@
+<template>
+	<div class="warning-page">
+		<LeftMenu
+			v-model="active"
+			:tabs="['项目名称', '工程名称']"
+			:records="records"
+			@change-page="onCurChange"
+			@search="onSearchInput"
+			:pageable="pages"
+			class="leftMenu"
+		>
+			<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">
+						<div class="video">
+							<img src="@/assets/images/unmannedVideo/video.png" width="11" height="11" alt="" />
+							<span class="middleSize">影像视频数：{{ data.videoNum }}</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" clearable 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-item>
+					<el-button type="warning" @click="handleCurrentChange(1)">刷新</el-button>
+				</el-form-item>
+			</el-form>
+			<!-- </div> -->
+
+			<div class="imgPage">
+				<div class="imgTable" v-if="questList.records.length">
+					<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.title }}</div>
+							<div class="img_bottom">
+								<div style="font-size: 12px">时间：{{ item.createTime }}</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div v-else class="table-empty">
+					<img src="@/assets/images/notData.png" alt="notData" />
+					<div>暂无数据</div>
+				</div>
+				<!-- :handleSizeChange="handleSizeChange" -->
+				<Pagination
+					:pageable="pageable"
+					:total="pageable.total"
+					:page-size="pageable.pageSize"
+					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.reportTime }}</span>
+					<span class="img_text m-10 flx-center">
+						<div :class="imgList.state === -1 ? 'pending' : 'complete'"></div>
+						{{ imgList.state === -1 ? "待处理" : "已处理" }}</span
+					>
+				</div>
+				<div>
+					<el-button type="primary" v-if="imgList.state === -1" @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 {
+	getUnmannedProjectPage,
+	getUnmannedEngineeringPage,
+	getUnmannedPage
+	// addAIrecords,
+	// 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";
+import { format } from "date-fns";
+
+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: 12,
+	total: 0
+});
+
+const records = ref<ResAiProjectPage[] | ResAiEngineerPage[]>([]);
+
+const questList = ref({
+	records: []
+});
+const form = ref({
+	code: "",
+	createTime: "",
+	startTime: "",
+	endTime: ""
+});
+// form下拉框
+const nameList = ref([]);
+
+// 点击图片存的数据
+const imgList = ref({
+	// alarmId: "",
+	createBy: "",
+	createTime: "",
+	reportTime: "",
+	deviceCode: "",
+	deviceName: "",
+	// engineeringSn: "",
+	id: "",
+	image: "",
+	projectSn: "",
+	remark: "",
+	solveBy: "",
+	solveImage: "",
+	solveTime: "",
+	state: -1,
+	type: 4,
+	typeName: ""
+});
+const formData = ref({
+	projectName: "",
+	typeName: "",
+	deviceName: "",
+	createTime: "",
+	image: "",
+	createBy: ""
+});
+
+// 弹窗中的配置
+const formConfig = reactive({
+	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",
+			dateType: "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"
+			}
+		],
+		createBy: [
+			{
+				required: true,
+				message: "请输入下达人",
+				trigger: "blur"
+			}
+		]
+	}
+});
+const onShowImg = (params: any) => {
+	imgVisible.value = true;
+	// console.log(params);
+
+	imgList.value = { ...params };
+	// delete imgList.value.id;
+};
+
+// 页面的分页
+const handleCurrentChange = async (page: number) => {
+	const { result } = await getUnmannedPage(
+		active.value === 0
+			? {
+					pageNo: page,
+					pageSize: pageable.value.pageSize,
+					projectSn: searchSn.value
+			  }
+			: {
+					pageNo: page,
+					pageSize: pageable.value.pageSize,
+					engineeringSn: searchSn.value
+			  }
+	);
+	console.log(result);
+	questList.value = result;
+	pageable.value.total = Number(result.total);
+};
+
+// 创建隐患记录的弹窗
+const onRecord = () => {
+	formData.value = { ...imgList.value };
+	formData.value.projectName = searchName.value;
+	formData.value.createTime = format(new Date(), "yyyy-MM-dd HH:mm:ss");
+	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 getUnmannedPage(
+		active.value === 0
+			? { ...form.value, ...pageable.value, projectSn: searchSn.value }
+			: { ...form.value, ...pageable.value, engineeringSn: searchSn.value }
+	);
+	questList.value = res.result;
+	pageable.value.total = +questList.value.total;
+};
+// 页面的项目名称和工程名称的div点击事件
+const onSearch = async (params: ResAiProjectPage | ResAiEngineerPage) => {
+	const { result } = await getUnmannedPage(
+		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 = result;
+	pageable.value.total = Number(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: ""
+	};
+	getAiMonitorDevList();
+};
+
+// leftMenu页面的搜索按钮
+const onSearchInput = async (params: string) => {
+	if (active.value === 0) {
+		const { result } = await getUnmannedProjectPage({ projectName: params, ...pages.value });
+		records.value = result.records;
+	} else {
+		const { result } = await getUnmannedEngineeringPage({ engineeringName: params, ...pages.value });
+		records.value = result.records;
+	}
+};
+
+// leftMenu页面的分页
+const onCurChange = async (params: number) => {
+	if (active.value === 0) {
+		const { result } = await getUnmannedProjectPage({ ...pages.value, pageNo: params });
+		records.value = result.records;
+	} else {
+		const { result } = await getUnmannedEngineeringPage({ ...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 addAIrecords(form);
+	visible.value = false;
+	imgVisible.value = false;
+	ElMessage.success("发布成功");
+	await handSearch();
+};
+
+// 获取项目名称分页
+const getAIproPage = async () => {
+	const { result } = await getUnmannedProjectPage(pages.value);
+	records.value = result.records;
+	pages.value.total = Number(result.total);
+};
+// 获取工程名称分页
+const getAIengPage = async () => {
+	const { result } = await getUnmannedEngineeringPage(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]);
+		}
+	}
+);
+
+// function parse(val) {
+// 	return val.trim() ? JSON.parse(val) : {};
+// }
+
+watch(
+	() => form.value.createTime,
+	() => {
+		if (form.value.createTime === null) {
+			form.value.startTime = "";
+			form.value.endTime = "";
+		}
+	}
+);
+
+onMounted(async () => {
+	// getAIengPage();
+	getAiMonitorDevList();
+	await getAIproPage();
+	onSearch(records.value[0]);
+	searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;
+	searchName.value = (records.value as ResAiProjectPage[])[0].projectName;
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>
diff --git a/src/views/goverment/unmannedVideo/alarmRecord/index.scss b/src/views/goverment/unmannedVideo/alarmRecord/index.scss
new file mode 100644
index 0000000..37b8de1
--- /dev/null
+++ b/src/views/goverment/unmannedVideo/alarmRecord/index.scss
@@ -0,0 +1,130 @@
+.warning-page {
+	// background-color: blue;
+	display: flex;
+	width: 100%;
+	height: 100%;
+	.right_container {
+		display: flex;
+		flex-direction: column;
+		width: 83%;
+
+		// margin-left: 20px;
+		padding: 0 0 0 20px;
+
+		// padding: 0 13% 0 20px;
+		// background-color: aqua;
+		.form_div {
+			height: 56px;
+			background-color: #ffffff;
+			border-radius: 8px;
+
+			// display: flex;
+			// // justify-content: center;
+			// align-items: center;
+		}
+		.form {
+			padding: 16px 0 0 36px;
+
+			// height: 56px;
+			background-color: #ffffff;
+		}
+		.imgPage {
+			box-sizing: border-box;
+			display: flex;
+			flex: 1;
+			flex-wrap: wrap;
+			padding: 20px;
+			margin-top: 20px;
+			background-color: #ffffff;
+			border-radius: 8px;
+			.img_item {
+				width: 31.3%;
+
+				// height: 26%;
+				// padding: 10px;
+				margin: 10px;
+				border: 1px solid #dedddd;
+				border-radius: 4px;
+				opacity: 1;
+				.page_text {
+					padding: 8px 16px;
+				}
+			}
+		}
+	}
+}
+.diaForm {
+	padding: 0 10% 0 0;
+}
+.img_title {
+	margin: 0 0 4px;
+	font-family: "siyuan_Medium";
+	font-size: 14px;
+	color: #00378f;
+}
+.img_diatitle {
+	font-family: "siyuan_Medium";
+	font-size: 14px;
+	color: #00378f;
+}
+.img_text {
+	font-size: 12px;
+	color: #333333;
+
+	// background-clip: text;
+	// fill-color: transparent;
+}
+.pending {
+	width: 6px;
+	height: 6px;
+	margin-right: 6px;
+	background-color: #f08117;
+	border-radius: 50%;
+}
+.complete {
+	width: 6px;
+	height: 6px;
+	margin-right: 6px;
+	background-color: #008bff;
+	border-radius: 50%;
+}
+
+// 页面的项目工程
+.leftProject {
+	color: #333333;
+	.projectName {
+		display: block;
+		width: 100%;
+		overflow: hidden;
+
+		// font-weight: 700;
+		font-family: "siyuan_Medium";
+		font-size: 16px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.leftMenu_item {
+		display: flex;
+		justify-content: space-between;
+		.middleSize {
+			font-size: 12px;
+		}
+		img {
+			margin: 0 4px;
+		}
+	}
+	.bottom_item {
+		.bottomSize {
+			font-size: 10px;
+			color: #666666;
+		}
+	}
+}
+:deep(.el-form .el-form-item__content .el-range-editor) {
+	width: 200px;
+}
+
+// 没生效
+// :deep(.el-dialog__body) {
+// 	padding: 0 !important;
+// }
diff --git a/src/views/goverment/unmannedVideo/alarmRecord/index.vue b/src/views/goverment/unmannedVideo/alarmRecord/index.vue
new file mode 100644
index 0000000..857cf78
--- /dev/null
+++ b/src/views/goverment/unmannedVideo/alarmRecord/index.vue
@@ -0,0 +1,328 @@
+<template>
+	<div class="warning-page">
+		<LeftMenu
+			v-model="active"
+			:records="records"
+			:tabs="['项目名称', '工程名称']"
+			@change-page="onCurChange"
+			@search="onSearchInput"
+			:pageable="pages"
+		>
+			<!-- :change-color="changeColor" -->
+			<template #default="{ data }">
+				<div>
+					<div class="leftProject" @click="onSearch(data)">
+						<span class="projectName">{{
+							(data as ResAiProjectPage).projectName || (data as ResAiEngineerPage).engineeringName
+						}}</span>
+						<div class="leftMenu_item">
+							<div class="video">
+								<img src="@/assets/images/unmannedVideo/video.png" width="11" height="11" alt="" />
+								<span class="middleSize">接入无人机总数：{{ data.videoNum }}</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</template>
+		</LeftMenu>
+		<div class="right_container">
+			<el-form :model="form" :inline="true" @submit.prevent class="form" ref="FormRef">
+				<el-form-item label="设备名称">
+					<el-select class="select" clearable 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>
+					<el-button type="primary" @click="handSearch">查询</el-button>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="warning" @click="handleCurrentChange(1)">刷新</el-button>
+				</el-form-item>
+			</el-form>
+			<ProTable
+				ref="proTable"
+				title="用户列表"
+				:columns="columns"
+				:requestApi="getTableList"
+				:initParam="initParam"
+				:dataCallback="dataCallback"
+				:tool-button="false"
+				:pagination="true"
+				background
+				:isShowSearch="false"
+			>
+				<!-- 表格操作 -->
+				<!-- <template #operation="{ row }">
+					<el-button type="primary" link @click="onSee(row)"
+						><img src="@/assets/images/tableIcon/look.png" alt="" class="configureIcon" /><span>查看</span></el-button
+					>
+				</template> -->
+				<template #image="{ row }">
+					<el-image style="width: 66px; height: 37px" :src="row.image" fit="fill" />
+				</template>
+				<template #state="{ row }">
+					{{ row.state === 0 ? "待整改" : "已整改" }}
+				</template>
+			</ProTable>
+		</div>
+		<el-dialog class="imgDialog" title="查看" width="50%" v-model="visible" show-close>
+			<div class="littleTitle Snap">抓拍隐患</div>
+			<el-form class="diaForm" disabled :model="form" ref="topForm" label-width="180px">
+				<el-form-item label="名称：">
+					<el-input v-model="form.projectName" placeholder="请输入" />
+				</el-form-item>
+				<el-form-item label="隐患类型：">
+					<el-input v-model="form.typeName" placeholder="请输入" />
+				</el-form-item>
+				<el-form-item label="图片显示：">
+					<!-- <el-image v-model="form.image" placeholder="请输入" /> -->
+					<el-image style="width: 95px; height: 53px" :src="form.image" fit="fill" />
+				</el-form-item>
+				<el-row>
+					<el-col :span="12">
+						<el-form-item label="下达人：">
+							<el-input v-model="form.createBy" placeholder="请输入" />
+						</el-form-item>
+					</el-col>
+					<el-col :span="12">
+						<el-form-item label="创建时间：">
+							<el-date-picker style="width: 100%" v-model="form.createTime" type="date" placeholder="请选择时间" />
+						</el-form-item>
+					</el-col>
+				</el-row>
+
+				<div class="littleTitle situation">整改情况</div>
+				<el-form-item label="整改状态：">
+					<el-radio-group v-model="form.state">
+						<el-radio :label="0">待整改</el-radio>
+						<el-radio :label="1">已整改</el-radio>
+					</el-radio-group>
+				</el-form-item>
+				<el-form-item label="整改图片：">
+					<el-image style="width: 95px; height: 53px" :src="form.solveImage" fit="fill" />
+				</el-form-item>
+
+				<el-row>
+					<el-col :span="12">
+						<el-form-item label="整改人：">
+							<el-input v-model="form.solveBy" placeholder="请输入" />
+						</el-form-item>
+					</el-col>
+					<el-col :span="12">
+						<el-form-item label="整改时间：">
+							<!-- <el-input v-model="form.solveTime" placeholder="请输入" /> -->
+							<el-date-picker style="width: 100%" v-model="form.solveTime" type="date" placeholder="请选择时间" />
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-form-item label="备注：">
+					<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="form.remark" placeholder="请输入" />
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<div class="footer">
+					<el-button type="primary" @click="visible = false">关闭</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, watch } from "vue";
+import ProTable from "@/components/ProTable/index.vue";
+import { ColumnProps } from "@/components/ProTable/interface";
+import { getDeviceProjectPage, getDeviceEngineeringPage, getAIQuestionPage, getDevicePage } from "@/api/modules/goverment";
+import LeftMenu from "@/components/LeftMenu/LeftMenu.vue";
+import type { ResAiProjectPage, ResAiEngineerPage } from "@/api/types/government/AIwaring";
+import { json } from "stream/consumers";
+
+const proTable = ref();
+
+const active = ref(0);
+const visible = ref(false);
+// const leftBack = ref(false);
+const searchSn = ref<string>("");
+// 项目或者工程名字
+const searchName = ref<string>("");
+const pages = ref({
+	pageNo: 1,
+	pageSize: 6,
+	total: 0
+});
+
+const records = ref<ResAiProjectPage[] | ResAiEngineerPage[]>([]);
+const form = ref({
+	projectName: "",
+	alarmId: "",
+	createBy: "",
+	createTime: "",
+	deviceCode: "",
+	deviceName: "",
+	engineeringSn: "",
+	hardwareId: "",
+	id: "",
+	image: "",
+	projectSn: "",
+	remark: "",
+	solveBy: "",
+	solveImage: "",
+	solveTime: "",
+	state: undefined,
+	type: undefined,
+	typeName: ""
+});
+
+// 表格配置项
+const columns: ColumnProps[] = [
+	{ type: "index", label: "序号", width: 80 },
+	{
+		prop: "serialNumber",
+		label: "设备序列号"
+	},
+	// 多级 prop
+	{ prop: "operator", label: "飞控程序员" },
+	{
+		prop: "dname",
+		label: "设备名称"
+	},
+	{
+		prop: "brand",
+		label: "品牌"
+	},
+	{
+		prop: "model",
+		label: "型号"
+	},
+	{
+		prop: "droneType",
+		label: "无人机类型"
+	},
+	{
+		prop: "liveUrl",
+		label: "绑定直播url"
+	},
+	{
+		prop: "image",
+		label: "设备图片"
+	}
+	// { prop: "operation", label: "操作", fixed: "right" }
+];
+
+// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
+const initParam = reactive({
+	solveFlag: 1
+});
+
+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]);
+		}
+	}
+);
+
+// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
+// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
+const dataCallback = (data: any) => {
+	return {
+		list: data.records,
+		total: Number(data.total),
+		pageNo: Number(data.current),
+		pageSize: Number(data.size)
+	};
+};
+
+// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
+// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
+const getTableList = (params: any) => {
+	let newParams = JSON.parse(JSON.stringify(params));
+	active.value === 0 ? (newParams.projectSn = searchSn.value) : (newParams.engineeringSn = searchSn.value);
+	return getDevicePage(newParams);
+};
+
+// const changeColor = () => {
+// 	leftBack.value = true;
+// 	console.log(11);
+// };
+
+// 页面的项目名称和工程名称的div点击事件
+const onSearch = async (params: ResAiProjectPage | ResAiEngineerPage) => {
+	// changeColor();
+	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);
+	proTable.value.getTableList();
+};
+
+const onSee = row => {
+	// row.state === 0 ? form.value.state === "待整改" : form.value.state === "已整改";
+	form.value = { ...row };
+	form.value.projectName = searchName.value;
+	visible.value = true;
+};
+
+// leftMenu页面的搜索按钮
+const onSearchInput = async (params: string) => {
+	if (active.value === 0) {
+		const { result } = await getDeviceProjectPage({ projectName: params, ...pages.value });
+		records.value = result.records;
+	} else {
+		const { result } = await getDeviceEngineeringPage({ engineeringName: params, ...pages.value });
+		records.value = result.records;
+	}
+};
+
+// 页面的分页
+const onCurChange = async (params: number) => {
+	if (active.value === 0) {
+		const { result } = await getDeviceProjectPage({ ...pages.value, pageNo: params });
+		records.value = result.records;
+	} else {
+		const { result } = await getDeviceEngineeringPage({ ...pages.value, pageNo: params });
+		records.value = result.records;
+		pages.value.total = +result.total;
+	}
+};
+
+// 获取项目名称分页
+const getAIproPage = async () => {
+	const { result } = await getDeviceProjectPage(pages.value);
+	records.value = result.records;
+	pages.value.total = Number(result.total);
+};
+// 获取工程名称分页
+const getAIengPage = async () => {
+	const { result } = await getDeviceEngineeringPage(pages.value);
+	records.value = result.records;
+	pages.value.total = +result.total;
+};
+
+// function parse(val) {
+// 	return val.trim() ? JSON.parse(val) : {};
+// }
+
+onMounted(async () => {
+	// getAIengPage();
+	await getAIproPage();
+	onSearch(records.value[0]);
+	searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;
+	searchName.value = (records.value as ResAiProjectPage[])[0].projectName;
+	// initParam.projectSn = searchSn.value;
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>