470 lines
14 KiB
Vue
470 lines
14 KiB
Vue
<template>
|
||
<div class="warning-page" v-waterMarker>
|
||
<layoutTop></layoutTop>
|
||
<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="width: 100%; margin-top: 5px; display: flex; align-items: center">
|
||
<img src="@/assets/images/AIwaring/dustMap.png" alt="" />
|
||
<el-tooltip effect="dark" :content="data.projectAddress || data.address" placement="top-start">
|
||
<span class="middleSize">{{ data.projectAddress || data.address }}</span>
|
||
</el-tooltip>
|
||
</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 layoutTop from "@/components/layoutTop/index.vue";
|
||
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";
|
||
|
||
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 }));
|
||
if (params.longitude && params.latitude) {
|
||
console.log(111);
|
||
map.value?.setCenter([+params.longitude, +params.latitude]);
|
||
showInfoPage(curr);
|
||
}
|
||
// params.longitude !== "" && params.longitude !== null
|
||
// ? map.value?.setCenter([params.longitude, +params.latitude])
|
||
// : map.value?.setCenter([116.481181, 39.90923]);
|
||
};
|
||
// 展示信息窗口
|
||
const showInfoPage = async (obj: any) => {
|
||
const createMarkerImage = (state: string) => new URL(`../../../assets/images/AIwaring/${state}`, import.meta.url).href;
|
||
|
||
// 创建一个 选中的Icon
|
||
let selectIcon = getIcon(
|
||
"selected",
|
||
obj.environAlarmFlag === false ? createMarkerImage("clouding.gif") : createMarkerImage("warnclouding.gif")
|
||
);
|
||
|
||
// 将 icon 传入 marker
|
||
let startMarker = new AMapRef.value.Marker({
|
||
position: new AMapRef.value.LngLat(Number(obj.longitude) || 113, Number(obj.latitude) || 21),
|
||
icon: selectIcon,
|
||
offset: new AMapRef.value.Pixel(-13, -30)
|
||
});
|
||
map.value?.add([startMarker]);
|
||
monitorList.value = monitorList.value.map(val =>
|
||
val.latitude == obj.latitude && val.longitude == obj.longitude
|
||
? { ...obj, showGif: true }
|
||
: { ...val, showGif: false, showInfo: false }
|
||
);
|
||
const curr = monitorList.value.find(item => item.showGif);
|
||
curr.showInfo = !curr.showInfo;
|
||
// addMarker();
|
||
|
||
environAlarmFlag.value = obj.environAlarmFlag;
|
||
|
||
// e.target.setIcon(selectIcon);
|
||
|
||
if (active.value === 0) {
|
||
infoName.value = obj.projectName;
|
||
const res = await getproDetail({ projectId: obj.projectId });
|
||
// @ts-expect-error
|
||
infoWindowData.value = res.result;
|
||
} else {
|
||
infoName.value = obj.engineeringName;
|
||
const res = await getengDetail({ id: obj.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, startMarker.getPosition());
|
||
} else {
|
||
infoShow.value = false;
|
||
onClose();
|
||
}
|
||
};
|
||
|
||
// 页面的搜索按钮
|
||
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 AMapRef.value.Icon({
|
||
// 图标尺寸
|
||
size: new AMapRef.value.Size(52, 52),
|
||
// 图标的取图地址
|
||
// image: "../../../../assets/images/AIwaring/正常.png",
|
||
image: icon,
|
||
// 图标所用图片大小
|
||
imageSize: new AMapRef.value.Size(52, 52)
|
||
})
|
||
: new AMapRef.value.Icon({
|
||
// 图标尺寸
|
||
size: new AMapRef.value.Size(52, 52),
|
||
// 图标的取图地址
|
||
// image: "../../../../assets/images/AIwaring/正常.png",
|
||
image: icon,
|
||
// 图标所用图片大小
|
||
imageSize: new AMapRef.value.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;
|
||
map.value?.clearMap();
|
||
monitorList.value.forEach(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")
|
||
);
|
||
|
||
// 将 icon 传入 marker
|
||
let startMarker = new AMapRef.value.Marker({
|
||
position: new AMapRef.value.LngLat(Number(item.longitude) || 113, Number(item.latitude) || 21),
|
||
icon: item.showGif ? selectIcon : startIcon,
|
||
offset: new AMapRef.value.Pixel(-13, -30)
|
||
});
|
||
map.value?.add([startMarker]);
|
||
//鼠标点击marker弹出自定义的信息窗体
|
||
startMarker.on("click", async function (e: any) {
|
||
monitorList.value = monitorList.value.map(val =>
|
||
val === item ? { ...item, showGif: true } : { ...val, showGif: false, showInfo: false }
|
||
);
|
||
const curr = monitorList.value.find(item => item.showGif);
|
||
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, startMarker.getPosition());
|
||
} else {
|
||
infoShow.value = false;
|
||
onClose();
|
||
}
|
||
});
|
||
});
|
||
};
|
||
|
||
// 调用地图
|
||
const mapData = async () => {
|
||
const AMap = await initAMap();
|
||
AMapRef.value = AMap;
|
||
map.value = new AMap.Map("map-container", { zoom: 7, center: [116.481181, 39.90923], viewMode: "2D", resizeEnable: true });
|
||
// map.value?.on("click", function (e) {
|
||
// map.value?.clearInfoWindow();
|
||
// });
|
||
};
|
||
|
||
//关闭信息窗体
|
||
const onClose = () => {
|
||
map.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,
|
||
() => {
|
||
addMarker();
|
||
// onSearch(records.value[0]);
|
||
}
|
||
);
|
||
|
||
onMounted(async () => {
|
||
await mapData();
|
||
// getAIengPage();
|
||
getStatisticsList();
|
||
getproList();
|
||
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>
|