471 lines
14 KiB
Vue
471 lines
14 KiB
Vue
<template>
|
||
<div id="index" ref="appRef">
|
||
<div class="bg">
|
||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||
|
||
<div v-else class="host-body">
|
||
<!-- <div class="d-flex jc-center">
|
||
<dv-decoration-10 class="dv-dec-10" :color="color[1]" />
|
||
<div class="d-flex jc-center">
|
||
<dv-decoration-8 class="dv-dec-8" :color="color[2]" />
|
||
<div class="title">
|
||
<span class="title-text" @click="handleTitleClick">{{
|
||
title
|
||
}}</span>
|
||
</div>
|
||
<dv-decoration-8
|
||
class="dv-dec-8"
|
||
:reverse="true"
|
||
:color="color[2]"
|
||
/>
|
||
</div>
|
||
<dv-decoration-10 class="dv-dec-10-s" :color="color[1]" />
|
||
</div>
|
||
|
||
<div class="d-flex secondLine">
|
||
<div class="react-right mr-3">
|
||
<span class="text fw-b">
|
||
{{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
|
||
{{ timeInfo.dateDay }}</span
|
||
>
|
||
</div>
|
||
<el-dropdown placement="bottom">
|
||
|
||
<el-icon :size="20" :color="color[0][1]">
|
||
<Menu />
|
||
</el-icon>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item @click="handleClick('1')"
|
||
>接线图配置</el-dropdown-item
|
||
>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</div> -->
|
||
<div class="d-flex jc-center">
|
||
<div class="react-left">
|
||
<span class="text fw-b">
|
||
{{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
|
||
{{ timeInfo.dateDay }}</span
|
||
>
|
||
</div>
|
||
|
||
<dv-decoration-10 class="dv-dec-10" :color="color[1]" />
|
||
<div class="d-flex jc-center">
|
||
<dv-decoration-8 class="dv-dec-8" :color="color[2]" />
|
||
<div class="title">
|
||
<span class="title-text">{{ title }}</span>
|
||
</div>
|
||
<dv-decoration-8
|
||
class="dv-dec-8"
|
||
:reverse="true"
|
||
:color="color[2]"
|
||
/>
|
||
</div>
|
||
<dv-decoration-10 class="dv-dec-10-s" :color="color[1]" />
|
||
</div>
|
||
|
||
<div class="d-flex secondLine">
|
||
<div class="react-right mr-1">
|
||
<span class="text fw-b" style="display: flex">
|
||
<datePicker
|
||
ref="datePickerRef"
|
||
@timeChangeInfo="timeChangeInfo"
|
||
/>
|
||
</span>
|
||
</div>
|
||
|
||
<el-icon
|
||
size="22"
|
||
:color="color[1][0]"
|
||
class="mt-0.5 mt5"
|
||
style="cursor: pointer"
|
||
>
|
||
<Menu @click="openDialog" />
|
||
</el-icon>
|
||
<Management
|
||
ref="createRef"
|
||
@project-change="onProjectChange"
|
||
></Management>
|
||
</div>
|
||
<div class="body-box">
|
||
<!-- 第三行数据 -->
|
||
<div class="content-box">
|
||
<dv-border-box-10 :color="color[0]" style="position: relative">
|
||
<Plan :project="currentProject" />
|
||
<!-- 将 flag 值传递给 SecurityDetail 组件 -->
|
||
<!-- showDetail从SecurityDetail 组件传过来 -->
|
||
<SecurityDetail
|
||
ref="securityDetail"
|
||
:current-flag="currentFlag"
|
||
style="position: absolute; bottom: 0px; width: 100%"
|
||
@show-detail-change="handleShowDetailChange"
|
||
/>
|
||
<IframeDia
|
||
:event-list="eventListData as []"
|
||
style="position: absolute; top: 0px; right: 0px; left: 0px"
|
||
/>
|
||
<!-- 图元颜色提示框 -->
|
||
<div
|
||
v-if="!showDetail"
|
||
style="
|
||
position: absolute;
|
||
left: 0px;
|
||
bottom: 40px;
|
||
padding: 10px;
|
||
"
|
||
>
|
||
<div style="display: flex">
|
||
<span class="iconfont" style="color: #7ac1f9"></span>
|
||
<div style="margin-left: 10px; font-size: 12px">监测点</div>
|
||
</div>
|
||
<div style="display: flex" v-if="currentFlag == 0">
|
||
<span class="iconfont blink-basic" style="color: #375db4"
|
||
></span
|
||
>
|
||
<!-- <img
|
||
src="@/assets/icon/传输设备 (3).png"
|
||
style="width: 20px; height: 20px"
|
||
class="blink-basic"
|
||
/> -->
|
||
<div style="margin-left: 10px; font-size: 12px">
|
||
暂降发生测点
|
||
</div>
|
||
</div>
|
||
<div style="display: flex" v-if="currentFlag == 1">
|
||
<!-- <img
|
||
src="@/assets/icon/传输设备 (4).png"
|
||
style="width: 20px; height: 20px"
|
||
class="blink-basic"
|
||
/> -->
|
||
<span class="iconfont blink-basic" style="color:#0936f4"
|
||
></span
|
||
>
|
||
<div style="margin-left: 10px; font-size: 12px">背景测点</div>
|
||
</div>
|
||
<div style="display: flex">
|
||
<!-- <img
|
||
src="@/assets/icon/传输设备 (2).png"
|
||
style="width: 20px; height: 20px"
|
||
class="blink-basic"
|
||
/> -->
|
||
<span
|
||
v-if="currentFlag == 0"
|
||
class="iconfont blink-basic"
|
||
style="color: #1dd1a1"
|
||
></span
|
||
>
|
||
<span
|
||
v-if="currentFlag == 1"
|
||
class="iconfont blink-basic"
|
||
style="color: #09ee06"
|
||
></span
|
||
>
|
||
<span
|
||
v-if="currentFlag == 2"
|
||
class="iconfont blink-basic"
|
||
style="color: #f08a0a"
|
||
></span
|
||
>
|
||
<div style="margin-left: 10px; font-size: 12px">
|
||
<span v-if="currentFlag == 0">暂降溯源关联测点</span>
|
||
<span v-if="currentFlag == 1">责任测点</span>
|
||
<span v-if="currentFlag == 2">发生谐波放大测点</span>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex" v-if="currentFlag != 2">
|
||
<!-- <img
|
||
src="@/assets/icon/传输设备 (1).png"
|
||
style="width: 20px; height: 20px"
|
||
class="blink-basic"
|
||
/> -->
|
||
<span
|
||
v-if="currentFlag == 0"
|
||
class="iconfont blink-basic"
|
||
style="color: #f9065b"
|
||
></span
|
||
>
|
||
<span
|
||
v-else
|
||
class="iconfont blink-basic"
|
||
style="color: #c708fe"
|
||
></span
|
||
>
|
||
<div style="margin-left: 10px; font-size: 12px">
|
||
{{ currentFlag == 0 ? "暂降源测点" : "责任占比最高测点" }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 还原按钮 -->
|
||
<!-- <div>
|
||
<el-button @click="back" icon="el-icon-Back">还原</el-button>
|
||
</div> -->
|
||
</dv-border-box-10>
|
||
|
||
<div class="content-left">
|
||
<dv-border-box-13 :color="color[0]">
|
||
<ScaleStatistics ref="scaleStatistics" />
|
||
</dv-border-box-13>
|
||
<dv-border-box-13 :color="color[0]">
|
||
<EventStatistics
|
||
ref="eventStatistics"
|
||
@data-updated="handleDataUpdate"
|
||
@flag-changed="handleFlagChange"
|
||
@expand-detail="handleExpandDetail"
|
||
@refresh-security-detail="refreshSecurityDetail"
|
||
/>
|
||
</dv-border-box-13>
|
||
<!-- <dv-border-box-13 :color="color[0]">
|
||
<Table />
|
||
</dv-border-box-13> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!--index.vue-->
|
||
<script lang="ts" setup>
|
||
import { defineComponent, ref, reactive, onMounted, onUnmounted } from "vue";
|
||
import { formatTime } from "@/utils/index"; //引入封装好的
|
||
import useDraw from "@/utils/useDraw"; // 引入封装好的屏幕适配方法
|
||
import { WEEK, title, subtitle, moduleInfo, color } from "@/constant/index_wx"; //引入封装的标题日期
|
||
import { Menu } from "@element-plus/icons-vue";
|
||
//页面组件
|
||
import Plan from "./components/plan.vue"; // 引入计划组件
|
||
import ScaleStatistics from "./components/scaleStatistics/index.vue"; // 引入计划组件
|
||
import EventStatistics from "./components/eventStatistics/index.vue"; // 引入计划组件
|
||
import Table from "./components/table.vue"; // 引入计划组件
|
||
import datePicker from "@/components/datePicker/index.vue";
|
||
import Management from "./components/manage/index.vue";
|
||
import SecurityDetail from "./components/manage/securityDetail.vue";
|
||
import IframeDia from "./components/manage/iframeDia.vue";
|
||
|
||
// 传给iframe页面的参数
|
||
const currentProject = ref<{ id: string; name: string } | null>(null);
|
||
|
||
// 项目管理页面传过来的事件 点击激活 获取首页展示
|
||
const onProjectChange = (project: { id: string; name: string }) => {
|
||
currentProject.value = project;
|
||
};
|
||
|
||
const smsQueriesRef = ref(); // 短信查询组件引用
|
||
const smsConfigRef = ref(); // 短信查询组件引用
|
||
const sendRef = ref(); // 短信查询组件引用
|
||
// * 加载标识
|
||
const loading = ref<boolean>(true);
|
||
// * 时间内容
|
||
const timeInfo: any = reactive({
|
||
setInterval: 0,
|
||
dateDay: "",
|
||
dateYear: "",
|
||
dateWeek: "",
|
||
});
|
||
|
||
const scaleStatistics = ref();
|
||
const eventStatistics = ref();
|
||
const securityDetail = ref();
|
||
// 适配处理
|
||
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
|
||
|
||
// 闪烁点list eventStatistics/index.vue
|
||
const eventListData = ref([]);
|
||
|
||
// 添加用于存储当前 flag 值的响应式变量
|
||
const currentFlag = ref(0);
|
||
|
||
// 添加 showDetail 响应式变量
|
||
const showDetail = ref(false);
|
||
|
||
// 处理 showDetail 变化
|
||
const handleShowDetailChange = (value: boolean) => {
|
||
showDetail.value = value;
|
||
};
|
||
|
||
// 处理 EventStatistics 组件传递过来的 flag 值变化
|
||
const handleFlagChange = (flagValue: number) => {
|
||
currentFlag.value = flagValue;
|
||
};
|
||
|
||
// 处理数据更新
|
||
const handleDataUpdate = (data: string[]) => {
|
||
eventListData.value = data;
|
||
};
|
||
|
||
const refreshSecurityDetail = () => {
|
||
// 调用 securityDetail 组件的刷新方法
|
||
if (securityDetail.value) {
|
||
securityDetail.value.refreshResponsibilityList();
|
||
}
|
||
};
|
||
|
||
// 初始化并获取数据
|
||
const initComponents = () => {
|
||
if (eventStatistics.value) {
|
||
// eventStatistics.value.initHasEventList();
|
||
|
||
// 定时获取 eventList 数据并传递给 iframeDia
|
||
const interval = setInterval(() => {
|
||
const data = eventStatistics.value.getEventList();
|
||
if (data && data.length > 0) {
|
||
eventListData.value = data;
|
||
}
|
||
}, 3000);
|
||
}
|
||
};
|
||
|
||
// 处理展开详情面板的函数
|
||
const handleExpandDetail = (flagValue: number) => {
|
||
// 设置当前 flag
|
||
currentFlag.value = flagValue;
|
||
// 通知 SecurityDetail 组件展开详情面板
|
||
showDetail.value = true;
|
||
// 同时通知 SecurityDetail 组件更新 showDetail 状态
|
||
securityDetail.value?.setShowDetail(true);
|
||
};
|
||
|
||
// 生命周期
|
||
onMounted(() => {
|
||
cancelLoading();
|
||
handleTime();
|
||
// todo 屏幕适应
|
||
windowDraw();
|
||
calcRate();
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
unWindowDraw();
|
||
clearInterval(timeInfo.setInterval);
|
||
});
|
||
|
||
// methods
|
||
// todo 处理 loading 展示
|
||
const cancelLoading = () => {
|
||
setTimeout(() => {
|
||
loading.value = false;
|
||
}, 500);
|
||
};
|
||
|
||
// todo 处理时间监听
|
||
const handleTime = () => {
|
||
timeInfo.setInterval = setInterval(() => {
|
||
const date = new Date();
|
||
timeInfo.dateDay = formatTime(date, "HH: mm: ss");
|
||
timeInfo.dateYear = formatTime(date, "yyyy-MM-dd");
|
||
timeInfo.dateWeek = WEEK[date.getDay()];
|
||
}, 1000);
|
||
};
|
||
// todo 处理菜单点击事件
|
||
const handleClick = (type: string) => {
|
||
if (type === "1") {
|
||
smsQueriesRef.value.open("已发送短信查询");
|
||
} else if (type === "2") {
|
||
smsConfigRef.value.open("短信配置");
|
||
} else if (type === "3") {
|
||
sendRef.value.open("短信发送");
|
||
}
|
||
};
|
||
|
||
// 切换时间
|
||
const timeChangeInfo = async () => {
|
||
inquire();
|
||
};
|
||
const inquireTimer: any = ref(null);
|
||
const inquire = async () => {
|
||
// 清除上一次的定时器
|
||
if (inquireTimer.value) {
|
||
clearTimeout(inquireTimer.value);
|
||
}
|
||
|
||
// 设置新的定时器，延迟300毫秒执行
|
||
inquireTimer.value = setTimeout(async () => {
|
||
scaleStatistics.value.initialData(); //监测点规模统计
|
||
eventStatistics.value.init(); //暂降溯源统计
|
||
securityDetail.value.init(); //报警信息详情
|
||
// 定时获取 eventList 数据并传递给 iframeDia
|
||
// initComponents()
|
||
// 执行完毕后重置定时器变量
|
||
inquireTimer.value = null;
|
||
}, 500);
|
||
};
|
||
|
||
// 打开管理页面弹框
|
||
const createRef = ref();
|
||
const openDialog = () => {
|
||
createRef.value.open();
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/assets/scss/SagTraceResult_WX.scss";
|
||
.react-right {
|
||
width: 460px !important;
|
||
}
|
||
.count {
|
||
position: absolute;
|
||
top: -8px;
|
||
left: 23px;
|
||
background-color: #ff2501;
|
||
color: #fff;
|
||
height: 15px;
|
||
line-height: 15px;
|
||
padding: 0 3px;
|
||
border-radius: 40%;
|
||
font-size: 10px;
|
||
text-align: center;
|
||
}
|
||
.icon {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 25px;
|
||
}
|
||
.significant {
|
||
position: absolute;
|
||
top: 12px;
|
||
left: 15px;
|
||
.count {
|
||
top: -3px;
|
||
left: 13px;
|
||
height: 13px;
|
||
}
|
||
}
|
||
.react-left {
|
||
position: absolute;
|
||
left: 140px;
|
||
top: 30px;
|
||
font-size: 18px;
|
||
line-height: 35px;
|
||
}
|
||
.titles {
|
||
margin-right: 10px;
|
||
.react-right {
|
||
width: 50px !important;
|
||
line-height: 20px !important;
|
||
font-size: 14px !important;
|
||
}
|
||
}
|
||
.iconfont {
|
||
font-size: 20px !important;
|
||
}
|
||
|
||
/* 基本闪烁效果 */
|
||
.blink-basic {
|
||
animation: blink 1s linear infinite;
|
||
}
|
||
|
||
@keyframes blink {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0;
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
</style>
|