wisdomisitezwfront-web/src/views/goverment/huizhou/smartConstructionSite/index.vue

<template>
	<div class="warning-page">
		<div id="map-container" class="map"></div>
		<LeftMenu
			v-model="active"
			:tabs="['项目名称', '工程名称']"
			:records="records"
			:pageable="pages"
			class="LeftMenu"
			@search="onSearchInput"
			@change-page="onCurChange"
		>
			<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 style="margin-top: 5px" class="flx-justify-between">
							<img src="@/assets/images/AIwaring/dustMap.png" alt="" />
							<span class="middleSize">{{ data.projectAddress || data.address }}</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.deviceNum }}</span>
						</div>
						<div>
							<span class="bottomSize">状态：{{ data.state === 1 ? "未开工" : "在建" }}</span>
						</div>
					</div>
				</div>
			</template>
		</LeftMenu>
		<MapTopData class="mapTopData" :data="mapTitleList" :title="mapTitle" />

		<div class="infowindows" ref="infoWindowPage" v-show="infoShow">
			<div class="title flx-justify-between">
				<span>{{ infoName }}</span>
				<p @click="onClose">x</p>
			</div>

			<div class="info-top">
				<div class="ellipsisName">设备名称：{{ infoWindowData.deviceName }}</div>
				<div>最后一次上传时间：{{ infoWindowData.dustNoiseData?.createTime }}</div>

				<!-- <div class="flx-wrap" v-if="infoWindowData.dustNoiseData !== null"> -->
				<div class="flx-wrap">
					<div class="card flx-column">
						<span :style="{ color: infoWindowData.dustNoiseData?.temperatureAlarm ? '#cf2c22' : '#00378F' }"
							>{{ infoWindowData.dustNoiseData?.temperature }}℃
						</span>
						<span class="text-12">温度</span>
					</div>
					<div class="card flx-column">
						<span :style="{ color: infoWindowData.dustNoiseData?.windspeedAlarm ? '#cf2c22' : '#00378F' }"
							>{{ infoWindowData.dustNoiseData?.windspeed }}m/s
						</span>
						<span class="text-12">风速</span>
					</div>
					<div class="card flx-column">
						<span :style="{ color: infoWindowData.dustNoiseData?.pm25Alarm ? '#cf2c22' : '#00378F' }"
							>{{ infoWindowData.dustNoiseData?.pm25 }}μg/m³
						</span>
						<span class="text-12">PM2.5</span>
					</div>
					<div class="card flx-column">
						<span :style="{ color: infoWindowData.dustNoiseData?.noiseAlarm ? '#cf2c22' : '#00378F' }"
							>{{ infoWindowData.dustNoiseData?.noise }}dB
						</span>
						<span class="text-12">噪音</span>
					</div>
					<div class="card flx-column">
						<span :style="{ color: infoWindowData.dustNoiseData?.pm10Alarm ? '#cf2c22' : '#00378F' }"
							>{{ infoWindowData.dustNoiseData?.pm10 }}μg/m³
						</span>
						<span class="text-12">PM10</span>
					</div>
					<div class="card flx-column">
						<span :style="{ color: infoWindowData.dustNoiseData?.humidityAlarm ? '#cf2c22' : '#00378F' }"
							>{{ infoWindowData.dustNoiseData?.humidity }}%
						</span>
						<span class="text-12">湿度</span>
					</div>
					<div class="card flx-column">
						<span :style="{ color: infoWindowData.dustNoiseData?.winddirectionAlarm ? '#cf2c22' : '#00378F' }"
							>{{ infoWindowData.dustNoiseData?.winddirection }}风
						</span>
						<span class="text-12">风向</span>
					</div>
				</div>
				<!-- <div class="flx-center nodata" v-else>暂无数据~</div> -->
				<div>报警记录</div>
				<el-table
					ref="proTable"
					:header-cell-style="{ textAlign: 'center' }"
					:cell-style="{ textAlign: 'center' }"
					:data="infoWindowData.environmentAlarmList"
					max-height="250"
					style="background: transparent !important"
				>
					<el-table-column show-overflow-tooltip label="报警类型" property="type"> </el-table-column>
					<el-table-column show-overflow-tooltip label="报警时间" property="createTime"> </el-table-column>
					<el-table-column show-overflow-tooltip label="阈值" property="thresholdValue"> </el-table-column>
					<el-table-column show-overflow-tooltip label="超标数据" property="alarmValue"> </el-table-column>
					<el-table-column show-overflow-tooltip label="超标量" property="offsetValue"> </el-table-column>
					<el-table-column show-overflow-tooltip label="报警原因" property="cause"> </el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, shallowRef } from "vue";
import {
	getDustprojectPage,
	getDustengineeringPage,
	getDuststatistics,
	getDustMonitorDev,
	AIproList,
	AIengList,
	getproDetail,
	getengDetail
} from "@/api/modules/goverment";
import { useRoute, useRouter } from "vue-router";
import { GlobalStore } from "@/stores";
import { HOME_URL } from "@/enums/Home";

import initAMap from "@/components/AMap/AMap";
import LeftMenu from "@/components/LeftMenu/LeftMenu.vue";
import MapTopData from "@/components/MapTopData/index.vue";
import type { ResAiProjectPage, ResAiEngineerPage } from "@/api/types/government/AIwaring";
import { setTimeout } from "timers/promises";
import { mapstyle } from "./mapStyle.js";
const BDMaps = ref<any>({});
const router = useRouter();
const globalStore = GlobalStore();

const active = ref(0);
const pages = ref({
	pageNo: 1,
	pageSize: 7,
	total: 0
});
const mapTitle = ref({
	installed: "已安装扬尘噪声监控工程",
	rate: "扬尘噪声监测覆盖率",
	accumulate: "累计扬尘噪声预警"
});
const records = ref<ResAiEngineerPage[] | ResAiProjectPage[]>([]);
const monitorList = ref<projectPage[]>([]);
const mapTitleList = ref([]);

const AMapRef = ref();
const infoShow = ref(false);
// 点击弹窗的时候将项目名字存下来
const infoName = ref("");
const environAlarmFlag = ref(false);
const infoWindowPage = ref();
const infoWindowData = ref({
	createTime: "",
	name: "",
	projectName: "",
	environmentAlarmList: [],
	dustNoiseData: [],
	engineeringName: ""
});

const map = shallowRef<AMap.Map>();

// 页面的项目名称和工程名称的div点击事件
const onSearch = async (params: ResAiEngineerPage | ResAiProjectPage) => {
	const curr = monitorList.value.find(item =>
		active.value === 0 ? item.projectSn === params.projectSn : item.engineeringSn === params.engineeringSn
	);
	monitorList.value = monitorList.value.map(item => (item === curr ? { ...curr, showGif: true } : { ...item, showGif: false }));
	params.longitude !== "" && params.longitude !== null
		? map.value?.setCenter([params.longitude, +params.latitude])
		: map.value?.setCenter([116.481181, 39.90923]);
};

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

const getIcon = (val: "start" | "selected", icon: string) =>
	val === "start"
		? new BMapGL.Icon(icon, new BMapGL.Size(52, 52), {
				imageSize: new BMapGL.Size(52, 52)
		  })
		: new BMapGL.Icon(icon, new BMapGL.Size(52, 52), {
				imageSize: new BMapGL.Size(52, 52)
		  });

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

	// pages.value.total = +res.result.total;
};
// 地图增加坐标点
const addMarker = () => {
	const createMarkerImage = (state: string) => new URL(`../../../../assets/images/AIwaring/${state}`, import.meta.url).href;
	// BDMaps.value?.clearMap();
	console.log(monitorList.value);
	monitorList.value.forEach(item => {
		console.log(item);
		// 创建一个 Icon
		let startIcon = getIcon(
			"start",
			item.environAlarmFlag === false ? createMarkerImage("blueCloud.png") : createMarkerImage("redCloud.png")
		);

		// 创建一个 选中的Icon
		// let selectIcon = getIcon(
		// 	"selected",
		// 	item.environAlarmFlag === false ? createMarkerImage("clouding.gif") : createMarkerImage("warnclouding.gif")
		// );
		let selectIcon = getIcon(
			"selected",
			item.environAlarmFlag === false ? createMarkerImage("zhengchang.png") : createMarkerImage("zhengchang.png")
		);

		// 将 icon 传入 marker
		let point = new BMapGL.Point(Number(item.longitude) || 113, Number(item.latitude) || 21); // 点位设置
		let marker = new BMapGL.Marker(point, { icon: item.showGif ? selectIcon : startIcon }); // 标记点
		BDMaps.value.addOverlay(marker); // 添加标记点
		//鼠标点击marker弹出自定义的信息窗体
		marker.addEventListener("click", async function () {
			monitorList.value = monitorList.value.map(val =>
				val === item ? { ...item, showGif: true } : { ...val, showGif: false, showInfo: false }
			);
			const curr = monitorList.value.find(item => item.showGif);
			console.log(curr);
			curr.showInfo = !curr.showInfo;
			// addMarker();

			environAlarmFlag.value = item.environAlarmFlag;

			// e.target.setIcon(selectIcon);

			if (active.value === 0) {
				infoName.value = item.projectName;
				const res = await getproDetail({ projectId: item.projectId });
				// @ts-expect-error
				infoWindowData.value = res.result;
			} else {
				infoName.value = item.engineeringName;
				const res = await getengDetail({ id: item.id });
				// @ts-expect-error
				infoWindowData.value = res.result;
			}

			if (curr.showInfo) {
				infoShow.value = true;
				// const infowindow = new AMapRef.value.InfoWindow({
				// 	isCustom: true, //使用自定义窗体
				// 	content: infoWindowPage.value,
				// 	offset: new AMap.Pixel(16, -45)
				// });

				// infowindow.open(map.value, marker.getPosition());
				function createDOM(feature) {
					const img = infoWindowPage.value;
					return img;
				}
				console.log(infoWindowPage.value);
				console.log(createDOM);
				const customOverlay = new BMapGL.CustomOverlay(createDOM, {
					point: new BMapGL.Point(Number(item.longitude) || 113, Number(item.latitude) || 21),
					opacity: 0.5,
					map: BDMaps.value,
					offsetY: -45,
					offsetX: 16,
					properties: {
						title: "this is a title",
						size: "100"
					}
				});
				BDMaps.value.addOverlay(customOverlay);
				// customOverlay.open(BDMaps.value, marker.getPosition());
			} else {
				// infoShow.value = false;
				onClose();
			}
		});
	});
};
// 调用地图
const mapData = async () => {
	BDMaps.value = new BMapGL.Map("map-container"); // 初始化地图
	let point = new BMapGL.Point(114.272994, 23.032578); // 点位设置
	BDMaps.value.centerAndZoom(point, 14); // 初始化地图，设置中心点坐标和地图级别
	BDMaps.value.enableScrollWheelZoom(true); // 设置可以鼠标滑动进行缩放
	BDMaps.value.setMapStyleV2({
		styleJson: mapstyle()
	});
};

//关闭信息窗体
const onClose = () => {
	BDMaps.value?.clearInfoWindow();
	// showInfo 控制 弹窗的显示与关
	monitorList.value = monitorList.value.map(item => ({ ...item, showInfo: false }));
	infoShow.value = false;
};

// 获取项目名称分页
const getAIproPage = async () => {
	const { result } = await getDustprojectPage(pages.value);
	records.value = result.records;
	records.value.map(item => {
		let showGif = false;
		item.showGif = showGif;
	});
	pages.value.total = Number(result.total);
};
// 获取工程名称分页
const getAIengPage = 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;
};
// 获取页面统计数字
const getStatisticsList = async () => {
	const res = await getDuststatistics();
	mapTitleList.value = res.result;
};

// 获取项目设备列表
const getproList = async () => {
	const { result } = await AIproList({});
	monitorList.value = result;
};
// 获取工程设备列表
const getengList = async () => {
	const { result } = await AIengList({});
	monitorList.value = result;
};

watch(
	() => active.value,
	async (value: number) => {
		pages.value.pageNo = 1;
		pages.value.total = 0;
		// console.log(value);

		if (value === 0) {
			await getAIproPage();
			await getproList();
			onSearch(records.value[0]);
		} else {
			await getAIengPage();
			await getengList();
			onSearch(records.value[0]);
		}
	},
	{
		deep: true
	}
);

watch(
	() => monitorList.value,
	async () => {
		addMarker();
		// onSearch(records.value[0]);
	}
);

onMounted(async () => {
	// getAIengPage();
	getStatisticsList();
	getproList();
	await mapData();
	addMarker();
	await getAIproPage();
	onSearch(records.value[0]);
	// addMarker();
});
</script>

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

:deep(.el-header) {
	margin-bottom: 0;
}
</style>