415 lines
13 KiB
Vue
415 lines
13 KiB
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 style="margin-right: 5px; width: 25px; height: 25px" src="@/assets/images/AIwaring/dustMapWhite.png" alt="" />
|
||
<span class="middleSize">{{ data.projectAddress || data.address }}</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(1);
|
||
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>();
|
||
const searchSn = ref(); // 选中的Sn
|
||
// 页面的项目名称和工程名称的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]);
|
||
active.value === 0
|
||
? (searchSn.value = (params as ResAiProjectPage).projectSn)
|
||
: (searchSn.value = (params as ResAiEngineerPage).engineeringSn);
|
||
getengList();
|
||
};
|
||
|
||
// 页面的搜索按钮
|
||
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 = () => {
|
||
BDMaps.value.clearOverlays();
|
||
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({ engineeringSn: searchSn.value });
|
||
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 () => {
|
||
getStatisticsList();
|
||
await mapData();
|
||
await addMarker();
|
||
await getAIengPage();
|
||
onSearch(records.value[0]);
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "./map.scss";
|
||
@import "./index.scss";
|
||
|
||
:deep(.el-header) {
|
||
margin-bottom: 0;
|
||
}
|
||
</style>
|