From 422824d7e136eb8aa3d30417b0fac99b2d96af72 Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Wed, 21 Jun 2023 14:50:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20BUG=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../goverment/huizhou/droneImaging/index.vue  |  39 ++-
 .../environmentalMonitoring/index.vue         | 140 +++-----
 .../siteSupervision/realNameSystem/index.vue  | 323 +++++++++++++++++-
 .../videoMonitoring/index.scss                |  88 ++++-
 .../siteSupervision/videoMonitoring/index.vue |   4 +-
 5 files changed, 468 insertions(+), 126 deletions(-)

diff --git a/src/views/goverment/huizhou/droneImaging/index.vue b/src/views/goverment/huizhou/droneImaging/index.vue
index c02c39f..1f7cbe9 100644
--- a/src/views/goverment/huizhou/droneImaging/index.vue
+++ b/src/views/goverment/huizhou/droneImaging/index.vue
@@ -135,8 +135,8 @@
 
 <script lang="ts" setup>
 import { ref, reactive, onMounted, watch } from "vue";
-import { getAIprojectPage, getAIQuestionPage, addAIrecords, getAiMonitorDev } from "@/api/modules/goverment";
-import { videoList, videoDataAdd, videoDataEdit, videoDataDelete, getengineeringPage } from "@/api/modules/enterpriseApi";
+import { getAIQuestionPage, addAIrecords, getAiMonitorDev } from "@/api/modules/goverment";
+import { videoDataAdd, videoDataEdit, videoDataDelete } from "@/api/modules/enterpriseApi";
 import Pagination from "@/components/ProTable/components/Pagination.vue";
 import { ElMessage, UploadProps } from "element-plus";
 import type { FormRules, FormInstance, UploadInstance } from "element-plus";
@@ -147,14 +147,14 @@ import { useHandleData } from "@/hooks/useHandleData";
 import LeftMenu from "@/components/LeftMenu/LeftMenu.vue";
 import type { ResAiProjectPage, ResAiEngineerPage } from "@/api/types/government/AIwaring";
 import changeTheme from "@/components/changeTheme/index.vue";
-import { getDustprojectPage, getDustengineeringPage } from "@/api/modules/goverment";
+import { getUnmannedProjectPage, getUnmannedEngineeringPage, getUnmannedPage } from "@/api/modules/goverment";
 const pages = ref({
 	pageNo: 1,
 	pageSize: 7,
 	total: 0
 });
 const records = ref<ResAiProjectPage[] | ResAiEngineerPage[]>([]);
-const active = ref(1);
+const active = ref(0);
 const upload = ref<UploadInstance>();
 const fileList = ref([]);
 const store = GlobalStore();
@@ -236,7 +236,7 @@ const searchSn = ref("");
 const searchName = ref<string>("");
 // 页面的项目名称和工程名称的div点击事件
 const onSearch = async (params: ResAiProjectPage | ResAiEngineerPage) => {
-	const { result } = await getAIQuestionPage(
+	const { result } = await getUnmannedPage(
 		active.value === 0
 			? { projectSn: (params as ResAiProjectPage).projectSn, pageNo: pageable.value.pageNo, pageSize: pageable.value.pageSize }
 			: {
@@ -246,32 +246,33 @@ const onSearch = async (params: ResAiProjectPage | ResAiEngineerPage) => {
 			  }
 	);
 	pageable.value.total = Number(result.total);
+	videoData.value.records = result.records;
 	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);
-	getVideoData();
+	// getVideoData();
 };
 // leftMenu页面的搜索按钮
 const onSearchInput = async (params: string) => {
 	console.log(params);
 	if (active.value === 0) {
-		const { result } = await getAIprojectPage({ projectName: params, ...pages.value });
+		const { result } = await getUnmannedProjectPage({ projectName: params, ...pages.value });
 		records.value = result.records;
 	} else {
-		const { result } = await getengineeringPage({ engineeringName: params, ...pages.value });
+		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 getAIprojectPage({ ...pages.value, pageNo: params });
+		const { result } = await getUnmannedProjectPage({ ...pages.value, pageNo: params });
 		records.value = result.records;
 	} else {
-		const { result } = await getengineeringPage({ ...pages.value, pageNo: params });
+		const { result } = await getUnmannedEngineeringPage({ ...pages.value, pageNo: params });
 		records.value = result.records;
 		pages.value.total = +result.total;
 	}
@@ -294,7 +295,7 @@ const handleEditItem = (index: number, row: any) => {
 	visible.value = true;
 };
 const getVideoData = async () => {
-	const res = await videoList({ ...pageable.value, ...form.value });
+	const res = await getUnmannedPage({ ...pageable.value, ...form.value });
 	videoData.value.records = res.result.records;
 	console.log(videoData.value);
 	console.log(res);
@@ -367,8 +368,8 @@ const onDatePicker = () => {
 	form.value.endTime = form.value.createTime[1];
 };
 // 获取项目名称分页
-const getAIproPage = async () => {
-	const { result } = await getDustprojectPage(pages.value);
+const getProPage = async () => {
+	const { result } = await getUnmannedProjectPage(pages.value);
 	records.value = result.records;
 	records.value.map(item => {
 		let showGif = false;
@@ -377,8 +378,8 @@ const getAIproPage = async () => {
 	pages.value.total = Number(result.total);
 };
 // 获取工程名称分页
-const getAIengPage = async () => {
-	const { result } = await getDustengineeringPage(pages.value);
+const getEngPage = async () => {
+	const { result } = await getUnmannedEngineeringPage(pages.value);
 	records.value = result.records;
 	records.value.map(item => {
 		let showGif = false;
@@ -394,12 +395,10 @@ watch(
 		// console.log(value);
 
 		if (value === 0) {
-			await getAIproPage();
-			await getproList();
+			await getProPage();
 			onSearch(records.value[0]);
 		} else {
-			await getAIengPage();
-			await getengList();
+			await getEngPage();
 			onSearch(records.value[0]);
 		}
 	},
@@ -409,7 +408,7 @@ watch(
 );
 onMounted(async () => {
 	getVideoData();
-	await getAIengPage();
+	await getProPage();
 	onSearch(records.value[0]);
 	searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;
 	searchName.value = (records.value as ResAiProjectPage[])[0].projectName;
diff --git a/src/views/goverment/huizhou/siteSupervision/environmentalMonitoring/index.vue b/src/views/goverment/huizhou/siteSupervision/environmentalMonitoring/index.vue
index b06d91f..1c4e03f 100644
--- a/src/views/goverment/huizhou/siteSupervision/environmentalMonitoring/index.vue
+++ b/src/views/goverment/huizhou/siteSupervision/environmentalMonitoring/index.vue
@@ -2,7 +2,7 @@
 	<div class="warning-page">
 		<LeftMenu
 			v-model="active"
-			:tabs="[]"
+			:tabs="['项目名称', '工程名称']"
 			:records="records"
 			@change-page="onCurChange"
 			@search="onSearchInput"
@@ -44,8 +44,14 @@
 
 <script lang="ts" setup>
 import { ref, reactive, onMounted, watch } from "vue";
-import { getAIprojectPage, getAIQuestionPage, addAIrecords, getAiMonitorDev } from "@/api/modules/goverment";
-import { videoList, videoDataAdd, videoDataEdit, videoDataDelete, getengineeringPage } from "@/api/modules/enterpriseApi";
+import {
+	getDustprojectPage,
+	getDustengineeringPage,
+	getAIQuestionPage,
+	addAIrecords,
+	getAiMonitorDev
+} from "@/api/modules/goverment";
+import { videoList, videoDataAdd, videoDataEdit, videoDataDelete } from "@/api/modules/enterpriseApi";
 import Pagination from "@/components/ProTable/components/Pagination.vue";
 import { ElMessage, UploadProps } from "element-plus";
 import type { FormRules, FormInstance, UploadInstance } from "element-plus";
@@ -64,7 +70,7 @@ const pages = ref({
 	total: 0
 });
 const records = ref<ResAiProjectPage[] | ResAiEngineerPage[]>([]);
-const active = ref(1);
+const active = ref(0);
 const fileList = ref([]);
 const store = GlobalStore();
 // 表格配置项
@@ -200,123 +206,73 @@ const onSearch = async (params: ResAiProjectPage | ResAiEngineerPage) => {
 const onSearchInput = async (params: string) => {
 	console.log(params);
 	if (active.value === 0) {
-		const { result } = await getAIprojectPage({ projectName: params, ...pages.value });
+		const { result } = await getDustprojectPage({ projectName: params, ...pages.value });
 		records.value = result.records;
 	} else {
-		const { result } = await getengineeringPage({ engineeringName: params, ...pages.value });
+		const { result } = await getDustengineeringPage({ engineeringName: params, ...pages.value });
 		records.value = result.records;
 	}
 };
 // leftMenu页面的分页
 const onCurChange = async (params: number) => {
 	if (active.value === 0) {
-		const { result } = await getAIprojectPage({ ...pages.value, pageNo: params });
+		const { result } = await getDustprojectPage({ ...pages.value, pageNo: params });
 		records.value = result.records;
 	} else {
-		const { result } = await getengineeringPage({ ...pages.value, pageNo: params });
+		const { result } = await getDustengineeringPage({ ...pages.value, pageNo: params });
 		records.value = result.records;
 		pages.value.total = +result.total;
 	}
 	pages.value.total = +res.result.total;
 };
-// 删除用户信息
-const deleteAccount = async (params: jxj_User.ResUserList) => {
-	await useHandleData(videoDataDelete, { id: params.id }, `删除`);
-	getVideoData();
-};
-const handleSearch = () => {
-	console.log(666);
-	getVideoData();
-};
-const handleEditItem = (index: number, row: any) => {
-	title.value = "编辑录像";
-	formData.value = { ...row };
-	console.log(formData.value);
-	fileList.value = reactive([{ name: "文件", url: row.videoUrl }]);
-	visible.value = true;
-};
 const getVideoData = async () => {
 	const res = await videoList({ ...pageable.value, ...form.value });
 	videoData.value.records = res.result.records;
 	console.log(videoData.value);
 	console.log(res);
 };
-const handleExceed: UploadProps["onExceed"] = files => {
-	// console.log(1111);
-	// upload.value!.clearFiles();
-	// const file = files[0] as UploadRawFile;
-	// file.uid = genFileId();
-	// // fileList.value = file;
-	// upload.value!.handleStart(file);
-	// upload.value?.submit();
-};
-
-const uploadSuccess = (response: any) => {
-	ElMessage.success("上传成功");
-	formData.value.videoUrl = response.result.url;
-	fileList.value = [{ name: response.result.originalFilename, url: response.result.downloadPath }];
-};
-const onRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
-	formData.value.videoUrl = "";
-	fileList.value = reactive([]);
-};
-// 新增影像
-const addVideoData = () => {
-	title.value = "新增录像";
-	formData.value = reactive<formData>({
-		title: "",
-		uploadTime: "",
-		remark: "",
-		videoUrl: ""
+// 获取项目名称分页
+const getProPage = async () => {
+	const { result } = await getDustprojectPage(pages.value);
+	records.value = result.records;
+	records.value.map(item => {
+		let showGif = false;
+		item.showGif = showGif;
 	});
-	fileList.value = reactive([]);
-	visible.value = true;
-};
-const confirm = async (formEl: FormInstance | undefined, form: any) => {
-	// 标记表单校验
-	if (!formEl) return;
-	await formEl.validate(async (valid, fields) => {
-		if (valid) {
-			console.log(666);
-			console.log(searchSn.value);
-			formData.value.engineeringSn = searchSn.value;
-			if (formData.value.id) {
-				const res = await videoDataEdit(form);
-				ElMessage.success("编辑成功");
-				visible.value = false;
-				getVideoData();
-			} else {
-				const res = await videoDataAdd(form);
-				ElMessage.success("保存成功");
-				visible.value = false;
-				getVideoData();
-			}
-		} else {
-			console.log("error submit!", fields);
-			ElMessage({
-				showClose: true,
-				message: "请完善表单信息！",
-				type: "error"
-			});
-		}
-	});
-};
-// 页面的分页
-const handleCurrentChange = async (page: number) => {};
-// form日期选择后改变入参
-const onDatePicker = () => {
-	form.value.startTime = form.value.createTime[0];
-	form.value.endTime = form.value.createTime[1];
+	pages.value.total = Number(result.total);
 };
 // 获取工程名称分页
-const getAIengPage = async () => {
-	const { result } = await getengineeringPage(pages.value);
+const getEngPage = async () => {
+	const { result } = await getDustengineeringPage(pages.value);
 	records.value = result.records;
+	records.value.map(item => {
+		let showGif = false;
+		item.showGif = showGif;
+	});
 	pages.value.total = +result.total;
 };
+watch(
+	() => active.value,
+	async (value: number) => {
+		pages.value.pageNo = 1;
+		pages.value.total = 0;
+		// console.log(value);
+
+		if (value === 0) {
+			await getProPage();
+			onSearch(records.value[0]);
+		} else {
+			await getEngPage();
+			onSearch(records.value[0]);
+		}
+	},
+	{
+		deep: true
+	}
+);
 onMounted(async () => {
 	getVideoData();
-	await getAIengPage();
+	await getProPage();
 	onSearch(records.value[0]);
 	searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;
 	searchName.value = (records.value as ResAiProjectPage[])[0].projectName;
diff --git a/src/views/goverment/huizhou/siteSupervision/realNameSystem/index.vue b/src/views/goverment/huizhou/siteSupervision/realNameSystem/index.vue
index 9b12c45..b54129e 100644
--- a/src/views/goverment/huizhou/siteSupervision/realNameSystem/index.vue
+++ b/src/views/goverment/huizhou/siteSupervision/realNameSystem/index.vue
@@ -1,8 +1,325 @@
 <template>
-	<div class="">实名制考勤</div>
+	<div class="table-box">
+		<div class="statistics-top">
+			<div class="sta-item" v-for="(item, index) in statisticsOption" :key="index">
+				<div class="sta-num">
+					<span>{{ item.name }}</span>
+					<span v-if="item.prop == 'inServiceWorker' || item.prop == 'workerAttendanceTotal'">{{
+						item.value ? item.value + "人" : 0
+					}}</span>
+					<span v-if="item.prop == 'ratio'">{{ item.value ? item.value + "%" : 0 }}</span>
+					<span v-if="item.prop == 'workerAttendanceNum'">{{ item.value ? item.value + "人次" : 0 }}</span>
+				</div>
+				<img :src="item.img" alt="" />
+			</div>
+		</div>
+		<div class="statistics-search">
+			<el-card shadow="never" class="topCard">
+				<span style="margin: 0 10px 2px 0">人员分类</span>
+				<el-select v-model="searchForm.personType" placeholder="请选择">
+					<el-option v-for="item in categoryList" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
+				<span style="margin: 0 10px 2px 20px">提交时间</span>
+				<el-date-picker
+					v-model="searchForm.dateRange"
+					style="width: 300px"
+					type="daterange"
+					range-separator="至"
+					start-placeholder="开始日期"
+					end-placeholder="结束日期"
+				>
+				</el-date-picker>
+				<el-button class="hzStyle" type="primary" style="margin-left: 20px" @click="handleSubmit(ruleFormRef)">发送</el-button>
+			</el-card>
+		</div>
+		<div class="statistics-echart">
+			<el-card shadow="never">
+				<div class="count-title">出勤统计</div>
+				<div ref="echartsRef" class="card content-box"></div>
+			</el-card>
+		</div>
+	</div>
 </template>
 
 <script setup lang="tsx" name="ProjectSupervisionRecord">
-import { ref, reactive, nextTick, computed } from "vue";
+import { ref, reactive, nextTick, onMounted } from "vue";
+import { ElMessage, ElMessageBox, ElTree, FormInstance } from "element-plus";
+import { useRouter } from "vue-router";
+import { ColumnProps } from "@/components/ProTable/interface";
+import { useHandleData } from "@/hooks/useHandleData";
+import ProTable from "@/components/ProTable/index.vue";
+import { getRelevanceList } from "@/api/modules/common";
+import { jxj_User } from "@/api/types";
+import engineeringDrawer from "@/components/engineeringDrawer/index.vue";
+import allEngineering from "@/components/allEngineering/index.vue";
+import TreeFilter from "@/components/TreeFilter/index.vue";
+import AMap from "@/components/AMap/AMap.vue";
+import { editRolePermissions, getTreemRoleList, getTreeByIdList } from "@/api/modules/goverment";
+import DialogForm from "@/components/DialogForm/index.vue";
+import { attendanceStatistics } from "@/api/modules/goverment";
+
+import { Delete } from "@element-plus/icons-vue";
+import { GlobalStore } from "@/stores";
+import * as echarts from "echarts";
+import { useEcharts } from "@/hooks/useEcharts";
+import { start } from "repl";
+const statisticsOption = ref([
+	{
+		name: "在职人数",
+		value: 0,
+		img: new URL("@/assets/images/govermentImg/在职人数.png", import.meta.url).href,
+		prop: "inServiceWorker"
+	},
+	{
+		name: "今日出勤总数",
+		value: 0,
+		img: new URL("@/assets/images/govermentImg/出勤总数.png", import.meta.url).href,
+		prop: "workerAttendanceTotal"
+	},
+	{
+		name: "今日出勤率",
+		value: 0,
+		img: new URL("@/assets/images/govermentImg/出勤率.png", import.meta.url).href,
+		prop: "ratio"
+	},
+	{
+		name: "今日考勤次数",
+		value: 0,
+		img: new URL("@/assets/images/govermentImg/考勤次数.png", import.meta.url).href,
+		prop: "workerAttendanceNum"
+	}
+]);
+const echartsRef = ref<HTMLElement>();
+
+const searchForm = ref({
+	personType: null,
+	dateRange: []
+});
+const categoryList = ref([
+	{
+		label: "管理",
+		value: 1
+	},
+	{
+		label: "工人",
+		value: 2
+	}
+]);
+// 点击发送按钮
+const handleSubmit = async (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	await formEl.validate(async (valid, fields) => {
+		if (valid) {
+		} else {
+			console.log("error submit!", fields);
+			ElMessage({
+				showClose: true,
+				message: "请完善表单信息！",
+				type: "error"
+			});
+		}
+	});
+};
+const getStatistics = async () => {
+	const res = await attendanceStatistics();
+	statisticsOption.value.map(item => {
+		item.value = res.result[item.prop];
+	});
+	console.log(res);
+};
+onMounted(() => {
+	getStatistics();
+	let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
+	let option: echarts.EChartsOption = {
+		tooltip: {
+			trigger: "axis",
+			axisPointer: {
+				type: "cross",
+				crossStyle: {
+					color: "#c4c4c4"
+				}
+			}
+		},
+		grid: {
+			left: 60,
+			top: 120,
+			width: "94%"
+		},
+		legend: {
+			right: 0,
+			top: 0,
+			textStyle: {
+				color: "#c4c4c4"
+			},
+			data: ["出勤总数(人)", "在职总数(人)", "出勤率(%)"]
+		},
+		xAxis: [
+			{
+				type: "category",
+				data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+				axisPointer: {
+					type: "shadow"
+				}
+			}
+		],
+		yAxis: [
+			{
+				type: "value",
+				name: "单位(人)",
+				nameTextStyle: {
+					align: "right",
+					color: "#c4c4c4"
+				},
+				min: 0,
+				max: 250,
+				interval: 50
+			},
+			{
+				type: "value",
+				name: "出勤率(%)",
+				nameTextStyle: {
+					color: "#c4c4c4"
+				},
+				min: 0,
+				max: 25,
+				interval: 5
+			}
+		],
+		series: [
+			{
+				name: "出勤总数(人)",
+				type: "bar",
+				barWidth: 18,
+				itemStyle: {
+					borderRadius: [11, 11, 11, 11]
+				},
+				tooltip: {
+					valueFormatter: function (value) {
+						return value + " ml";
+					}
+				},
+				data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
+			},
+			{
+				name: "在职总数(人)",
+				type: "bar",
+				barWidth: 18,
+				itemStyle: {
+					borderRadius: [11, 11, 11, 11]
+				},
+				tooltip: {
+					valueFormatter: function (value) {
+						return value + " ml";
+					}
+				},
+				data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+			},
+			{
+				name: "出勤率(%)",
+				type: "line",
+				smooth: true,
+				yAxisIndex: 1,
+				tooltip: {
+					valueFormatter: function (value) {
+						return value + " °C";
+					}
+				},
+				data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+			}
+		]
+	};
+	useEcharts(myChart, option);
+});
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.table-box {
+	.statistics-top {
+		display: flex;
+		justify-content: space-between;
+		.sta-item {
+			width: 405px;
+			min-width: 320px;
+			height: 113px;
+			background: #092945;
+			border-radius: 8px 8px 8px 8px;
+			opacity: 1;
+			display: flex;
+			.sta-num {
+				display: flex;
+				flex-direction: column;
+				margin-top: 20px;
+				margin-left: 42px;
+				margin-right: auto;
+				span:first-child {
+					font-size: 16px;
+					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+					color: #ffffff;
+				}
+				span:last-child {
+					font-size: 32px;
+					font-family: OPPOSans-Heavy, OPPOSans;
+					font-weight: 800;
+					color: #c4c4c4;
+				}
+			}
+			> img {
+				width: 44px;
+				height: 40px;
+				margin-right: 22px;
+				margin-top: 20px;
+			}
+		}
+	}
+	.statistics-search {
+		margin-top: 20px;
+		.topCard {
+			display: flex;
+			align-items: center;
+			background: #092945;
+			:deep(.el-card__body) {
+				display: flex;
+				align-items: center;
+			}
+			span {
+				color: #c4c4c4;
+			}
+			:deep() {
+				.el-input__wrapper {
+					background-color: transparent;
+					box-shadow: 0 0 0 1px #087ba4 inset;
+				}
+				.el-range-input,
+				.el-input__inner {
+					color: white;
+				}
+			}
+		}
+	}
+	.statistics-echart {
+		margin-top: 20px;
+		position: relative;
+		.count-title {
+			position: absolute;
+			left: 30px;
+			top: 26px;
+			z-index: 1000;
+			font-size: 20px;
+			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+			font-weight: 400;
+			color: #c4c4c4;
+			border-left: 2px solid #008bff;
+			padding-left: 5px;
+		}
+		.card {
+			width: 100%;
+			height: 759px;
+			padding: 0;
+		}
+		:deep() {
+			.el-card {
+				background: #092945;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.scss b/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.scss
index f6a6e65..6fd82c1 100644
--- a/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.scss
+++ b/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.scss
@@ -3,7 +3,7 @@
 	width: 100%;
 	display: flex;
 	flex-direction: column;
-	background-color: #f6f6f6;
+	// background-color: #f6f6f6;
 	// padding: 0 20px;
 	// overflow: hidden;
 	.middle-video {
@@ -11,10 +11,11 @@
 		flex: 1;
 		.title-video {
 			height: 56px;
-			background-color: #fff;
+			background-color: #092945;
 			margin-bottom: 20px;
 			padding: 0 36px;
 			border-radius: 8px;
+			color: #ffffff;
 			img {
 				cursor: pointer;
 			}
@@ -38,7 +39,7 @@
 	.right-form {
 		width: 15vw;
 		height: 100%;
-		background-color: #fff;
+		background: #092945;
 		border-radius: 8px;
 		display: flex;
 		flex-direction: column;
@@ -46,9 +47,20 @@
 		.date-form {
 			display: flex;
 			padding: 15px 12px;
-			border-bottom: 1px solid #e5e5e5;
+			border-bottom: 1px solid #09314e;
 			.searchBtn {
 				margin-left: 10px;
+				background: #087ba4;
+				border-radius: 4px;
+			}
+			:deep() {
+				.el-input__wrapper {
+					background-color: transparent;
+					box-shadow: 0 0 0 1px #087ba4 inset;
+				}
+				.el-range-input {
+					color: white;
+				}
 			}
 		}
 		.right-header {
@@ -59,14 +71,16 @@
 				// flex: 1;
 				// height: 120px;
 				padding: 12px;
-				border-bottom: 1px solid #e5e5e5;
+				border-bottom: 1px solid #09314e;
 				.title {
-					color: #333;
+					color: #ffffff;
 					font-family: "siyuan_Medium";
 				}
 				.desc {
+					margin-top: 4px;
 					.question {
-						color: #797979;
+						color: #c4c4c4;
+						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
 						font-size: 12px;
 					}
 					.date {
@@ -74,15 +88,58 @@
 						align-items: flex-end;
 						justify-content: space-between;
 						margin-top: 37px;
-
 						span {
-							color: rgba(102, 102, 102, 0.8);
+							color: rgba(196, 196, 196, 0.65);
+							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
 							font-size: 10px;
 						}
 					}
 				}
 			}
 		}
+		:deep(.el-pagination) {
+			.el-pagination__goto {
+				color: var(--el-color-primary);
+			}
+			.el-pagination__classifier {
+				color: var(--el-color-primary);
+			}
+			.el-input__wrapper {
+				color: var(--el-color-primary);
+				background-color: transparent;
+				border: none;
+				box-shadow: 0 0 0 1px var(--el-color-primary, var(--el-color-primary)) inset;
+				height: 26px;
+			}
+			.el-input__inner {
+				color: var(--el-color-primary);
+			}
+			.el-pager li {
+				border: none;
+				box-shadow: 0 0 0 1px var(--el-color-primary, var(--el-color-primary)) inset;
+				background-color: transparent;
+				color: white;
+				border: none;
+				height: 26px;
+			}
+			.el-pager li:active {
+				color: var(--el-color-primary);
+				border: none;
+				height: 26px;
+			}
+			.el-pagination__total {
+				color: var(--el-color-primary);
+			}
+			.btn-prev,
+			.btn-next,
+			.btn-prev:disabled,
+			.btn-next:disabled {
+				color: var(--el-color-primary);
+				background-color: transparent;
+				border: 1px solid var(--el-color-primary);
+				height: 26px;
+			}
+		}
 	}
 }
 
@@ -97,13 +154,24 @@
 	width: 290px;
 	border-radius: 8px;
 	height: 100%;
-	background-color: #fff;
+	background: #092945;
 	overflow: auto;
 	:deep(.el-tabs__nav-wrap) {
 		// overflow: auto;
 		display: flex;
 		justify-content: center;
 	}
+	:deep(.el-tabs__nav-wrap::after) {
+		background-color: #09314e;
+	}
+	:deep() {
+		.el-tabs__item {
+			color: #c4c4c4;
+		}
+		.el-tabs__item.is-active {
+			color: #0bc4f0;
+		}
+	}
 	.treefilter {
 		padding: 0 18px 18px 18px;
 		// min-height: 100%;
diff --git a/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.vue b/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.vue
index ee064e4..153b4bd 100644
--- a/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.vue
+++ b/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.vue
@@ -131,7 +131,9 @@
 								<div class="date">
 									<span>{{ item.createTime }}</span>
 
-									<el-button v-show="!item.showForm" @click="handleEditItem(item)" type="primary" size="small">查看</el-button>
+									<el-button class="hzStyle" v-show="!item.showForm" @click="handleEditItem(item)" type="primary" size="small"
+										>查看</el-button
+									>
 									<el-button v-show="item.showForm" @click="OnClose(item)" type="primary" size="small">收起</el-button>
 								</div>
 							</div>