导出报表功能
This commit is contained in:
guanj
@@ -269,4 +269,31 @@ export function rightEventDevOpen(data: object) {
|
||||
});
|
||||
}
|
||||
|
||||
// 部门集合
|
||||
export function getDept(data: object) {
|
||||
return service({
|
||||
url: "/report/getDept",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 报表导出
|
||||
export function exportForms(data: object) {
|
||||
return service({
|
||||
url: "/report/get",
|
||||
method: "post",
|
||||
data,
|
||||
responseType: "blob",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
186
src/views/VoltageSag_BJ/components/reportForms.vue
Normal file
186
src/views/VoltageSag_BJ/components/reportForms.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<!--报表导出-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
draggable
|
||||
v-model="machineVisible"
|
||||
:title="title"
|
||||
width="500"
|
||||
>
|
||||
<div>
|
||||
<div style="height: 160px" class="smsConfig">
|
||||
<el-form :model="form" inline label-width="auto" class="mb10 ml30 mt20">
|
||||
<el-form-item label="时间">
|
||||
<el-date-picker
|
||||
v-model="timeValue"
|
||||
size="small"
|
||||
type="daterange"
|
||||
:disabled-date="isFutureDate"
|
||||
style="width: 250px; margin-right: 10px"
|
||||
unlink-panels
|
||||
:clearable="false"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门集合">
|
||||
<el-select
|
||||
v-model="form.deptList"
|
||||
placeholder="请选择"
|
||||
style="width: 250px"
|
||||
size="small"
|
||||
multiple
|
||||
>
|
||||
<el-option
|
||||
v-for="item in deptLists"
|
||||
:key="item.deptsIndex"
|
||||
:label="item.deptsname"
|
||||
:value="item.deptsIndex"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-divider />
|
||||
<div style="text-align: center">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="Check"
|
||||
@click="save"
|
||||
class="mt10"
|
||||
size="small"
|
||||
>确定</el-button
|
||||
>
|
||||
<el-button :icon="Close" @click="setUp" class="mt10" size="small"
|
||||
>取消</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, inject, onMounted } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { Check, Close } from "@element-plus/icons-vue";
|
||||
import { getDept, exportForms } from "@/api/statistics/index";
|
||||
import { useStore } from "vuex";
|
||||
import { log } from "console";
|
||||
const store = useStore();
|
||||
const machineVisible = ref(false);
|
||||
const title = ref("报表导出");
|
||||
const timeValue = ref([]);
|
||||
const deptLists = ref();
|
||||
//form表单校验规则
|
||||
const emit = defineEmits(["flushed"]);
|
||||
|
||||
const form = ref({
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
deptList: [],
|
||||
deptId: "",
|
||||
});
|
||||
const open = (text: string, data?: any) => {
|
||||
timeValue.value = [];
|
||||
form.value = {
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
deptList: [],
|
||||
deptId: "",
|
||||
};
|
||||
machineVisible.value = true;
|
||||
init();
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
getDept({}).then((res) => {
|
||||
deptLists.value = res.data;
|
||||
});
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
(form.value.deptId = store.state.deptId),
|
||||
(form.value.searchBeginTime = timeValue.value[0]),
|
||||
(form.value.searchEndTime = timeValue.value[1]
|
||||
? timeValue.value[1].split(" ")[0] + " 23:59:59"
|
||||
: "");
|
||||
exportForms(form.value).then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8",
|
||||
});
|
||||
|
||||
// createObjectURL(blob); //创建下载的链接
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement("a"); // 创建a标签
|
||||
link.href = url;
|
||||
link.download = "导出报表.docx"; // 设置下载的文件名
|
||||
document.body.appendChild(link);
|
||||
link.click(); //执行下载
|
||||
document.body.removeChild(link);
|
||||
|
||||
machineVisible.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const isFutureDate = (time: any) => {
|
||||
return time && time > Date.now();
|
||||
};
|
||||
|
||||
// 取消
|
||||
const setUp = () => {
|
||||
machineVisible.value = false;
|
||||
timeValue.value = [];
|
||||
form.value = {
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
deptList: [],
|
||||
deptId: "",
|
||||
};
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@use "@/assets/scss/index.scss";
|
||||
|
||||
.smsConfig {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.title {
|
||||
background-color: #0a73ff40;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-weight: 600;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-left: 10px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
:deep(.el-select) {
|
||||
min-width: 80px !important;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label, ) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__label) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label, ) {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -1,375 +1,358 @@
|
||||
<template>
|
||||
<div id="index" ref="appRef">
|
||||
<div
|
||||
class="bg"
|
||||
:class="
|
||||
store.state.screenNotic == 1
|
||||
? pushFlag
|
||||
? bottomTextRef?.urgentList.length > 0
|
||||
? 'bg-red'
|
||||
: ''
|
||||
: ''
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
|
||||
<div v-else class="host-body">
|
||||
<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-dropdown placement="bottom">
|
||||
<el-icon :size="22" :color="color[1][0]" class="mt-0.5 mt5">
|
||||
<Menu />
|
||||
</el-icon>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<!-- <el-dropdown-item @click="handleClick('1')"
|
||||
>已发送短信查询</el-dropdown-item
|
||||
>
|
||||
|
||||
<el-dropdown-item @click="handleClick('2')"
|
||||
>模拟短信发送</el-dropdown-item
|
||||
> -->
|
||||
<el-dropdown-item @click="handleClick('3')"
|
||||
>系统配置</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="body-box">
|
||||
<!-- 第三行数据 -->
|
||||
<div class="content-box">
|
||||
<dv-border-box-13 :color="color[0]">
|
||||
<eventStatistics ref="eventStatisticsRef" />
|
||||
</dv-border-box-13>
|
||||
|
||||
<dv-border-box-10 :color="color[0]">
|
||||
<Map ref="mapRef" />
|
||||
<!-- <center-left /> -->
|
||||
</dv-border-box-10>
|
||||
|
||||
<dv-border-box-13 :color="color[0]">
|
||||
<alarm ref="alarmRef" />
|
||||
<!-- 紧急告警 -->
|
||||
|
||||
<div
|
||||
class="icon"
|
||||
v-if="!(bottomTextRef?.urgentList.length == 0)"
|
||||
:color="color[0][1]"
|
||||
:class="
|
||||
bottomTextRef?.urgentList.length > 0
|
||||
? 'animate-flash-red'
|
||||
: ''
|
||||
"
|
||||
@click="drawerClick"
|
||||
>
|
||||
<!-- <WarnTriangleFilled /> -->
|
||||
<span
|
||||
class="iconfont icon-gaojing"
|
||||
:style="{
|
||||
color:
|
||||
bottomTextRef?.urgentList.length > 0
|
||||
? '#ff0000'
|
||||
: color[0][1],
|
||||
}"
|
||||
></span>
|
||||
<span
|
||||
class="count"
|
||||
v-if="bottomTextRef?.urgentList.length > 0"
|
||||
>{{
|
||||
bottomTextRef?.urgentList.length > 99
|
||||
? "99+"
|
||||
: bottomTextRef?.urgentList.length
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
<!-- 第四行数据 -->
|
||||
<div class="bototm-box">
|
||||
<dv-border-box-13 :color="color[0]">
|
||||
<endpointStatistics ref="endpointStatisticsRef" />
|
||||
|
||||
<!-- <bottom-left /> -->
|
||||
</dv-border-box-13>
|
||||
<dv-border-box-13 :color="color[0]">
|
||||
<informationTable
|
||||
ref="informationTableRef"
|
||||
@handleCurrentChange="handleCurrentChange"
|
||||
/>
|
||||
</dv-border-box-13>
|
||||
<dv-border-box-13 :color="color[0]">
|
||||
<sendTrends ref="sendTrendsRef" />
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
<!-- 底部 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<bottomText
|
||||
ref="bottomTextRef"
|
||||
@handleCurrentChange="handleCurrentChange"
|
||||
/>
|
||||
|
||||
<!-- 已发短信查询 -->
|
||||
<smsQueries
|
||||
ref="smsQueriesRef"
|
||||
v-if="smsQueriesFlag"
|
||||
@close="smsQueriesFlag = false"
|
||||
/>
|
||||
|
||||
<!-- 系统配置 -->
|
||||
<Config ref="ConfigRef" @flushed="inquire" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--index.vue-->
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
defineComponent,
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
onBeforeUnmount,
|
||||
watch,
|
||||
} from "vue";
|
||||
|
||||
import { formatTime, getDateRange, stopSpeak } from "@/utils/index"; //引入封装好的
|
||||
import useDraw from "@/utils/useDraw"; // 引入封装好的屏幕适配方法
|
||||
import { WEEK, title, subtitle, moduleInfo, color } from "@/constant/index"; //引入封装的标题日期
|
||||
import datePicker from "@/components/datePicker/index.vue";
|
||||
import { Menu, BellFilled, WarnTriangleFilled } from "@element-plus/icons-vue";
|
||||
//页面组件
|
||||
import eventStatistics from "./components/eventStatistics.vue"; //统计事件
|
||||
import endpointStatistics from "./components/endpointStatistics.vue"; //终端在线统计
|
||||
import sendTrends from "./components/sendTrends.vue"; //终端在线统计
|
||||
import informationTable from "./components/informationTable.vue"; //实时暂态信息
|
||||
import alarm from "./components/alarm.vue"; //实时暂态信息
|
||||
import Map from "./components/bdMap.vue"; //地图
|
||||
import smsQueries from "./components/smsQueries.vue"; // //短信查询
|
||||
import bottomText from "./components/bottomText.vue"; //边框组件
|
||||
import socketClient from "@/utils/webSocketClient";
|
||||
import { useStore } from "vuex";
|
||||
import Config from "./components/config.vue";
|
||||
|
||||
const store = useStore();
|
||||
const smsQueriesRef = ref(); // 短信查询组件引用
|
||||
const endpointStatisticsRef = ref(); // 终端在线统计组件引用
|
||||
const informationTableRef = ref(); // 实时暂态信息组件引用
|
||||
const sendTrendsRef = ref();
|
||||
const ConfigRef = ref();
|
||||
const eventStatisticsRef = ref();
|
||||
const alarmRef = ref();
|
||||
const mapRef = ref();
|
||||
//开始创建webSocket客户端
|
||||
const dataSocket = reactive({
|
||||
socketServe: socketClient.Instance,
|
||||
});
|
||||
const smsQueriesFlag = ref(false);
|
||||
const pushFlag = ref(true);
|
||||
const bottomTextRef = ref(); // 底部滚动组件引用
|
||||
// * 加载标识
|
||||
const loading = ref<boolean>(true);
|
||||
// * 时间内容
|
||||
const timeInfo: any = reactive({
|
||||
setInterval: 0,
|
||||
dateDay: "",
|
||||
dateYear: "",
|
||||
dateWeek: "",
|
||||
});
|
||||
const timeType = ref(3);
|
||||
// 适配处理
|
||||
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
|
||||
// 连接webSocket客户端
|
||||
const init = () => {
|
||||
if (!dataSocket.socketServe) {
|
||||
console.error("WebSocket 客户端实例不存在");
|
||||
return;
|
||||
}
|
||||
dataSocket.socketServe.connect(new Date().getTime());
|
||||
dataSocket.socketServe.registerCallBack("message", (res: any) => {
|
||||
pushFlag.value = true;
|
||||
inquire();
|
||||
bottomTextRef.value?.updateData(res);
|
||||
});
|
||||
};
|
||||
// 打开重要告警弹框
|
||||
const drawerClick = () => {
|
||||
bottomTextRef.value?.openDrawer();
|
||||
};
|
||||
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
stopSpeak();
|
||||
|
||||
cancelLoading();
|
||||
|
||||
handleTime();
|
||||
// todo 屏幕适应
|
||||
windowDraw();
|
||||
calcRate();
|
||||
setTimeout(() => {
|
||||
store.dispatch("setConfig");
|
||||
}, 500);
|
||||
init();
|
||||
});
|
||||
const handleCurrentChange = (val: string) => {
|
||||
mapRef.value?.setIcon(val);
|
||||
};
|
||||
onUnmounted(() => {
|
||||
unWindowDraw();
|
||||
clearInterval(timeInfo.setInterval);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
dataSocket.socketServe?.closeWs();
|
||||
});
|
||||
|
||||
// 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) => {
|
||||
smsQueriesFlag.value = true;
|
||||
|
||||
setTimeout(() => {
|
||||
if (type === "3") {
|
||||
ConfigRef.value.open("系统配置");
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
// 切换时间
|
||||
const timeChangeInfo = async () => {
|
||||
inquire();
|
||||
};
|
||||
const inquireTimer: any = ref(null);
|
||||
const inquire = async () => {
|
||||
// 清除上一次的定时器
|
||||
if (inquireTimer.value) {
|
||||
clearTimeout(inquireTimer.value);
|
||||
}
|
||||
|
||||
// 设置新的定时器，延迟300毫秒执行
|
||||
inquireTimer.value = setTimeout(async () => {
|
||||
eventStatisticsRef.value.init(); //电能质量监测终端运行状态
|
||||
endpointStatisticsRef.value.init(); //各区域终端运行状态
|
||||
mapRef.value.init(); //地图
|
||||
informationTableRef.value.init(true); //暂降事件列表
|
||||
sendTrendsRef.value.init();
|
||||
|
||||
alarmRef.value.init();
|
||||
|
||||
// 执行完毕后重置定时器变量
|
||||
inquireTimer.value = null;
|
||||
}, 500);
|
||||
};
|
||||
|
||||
watch(store.state, (val) => {
|
||||
timeChangeInfo()
|
||||
}, {
|
||||
deep: true,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "@/assets/scss/index.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: 35px !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div id="index" ref="appRef">
|
||||
<div class="bg" :class="store.state.screenNotic == 1
|
||||
? pushFlag
|
||||
? bottomTextRef?.urgentList.length > 0
|
||||
? 'bg-red'
|
||||
: ''
|
||||
: ''
|
||||
: ''
|
||||
">
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
|
||||
<div v-else class="host-body">
|
||||
<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-dropdown placement="bottom">
|
||||
<el-icon :size="22" :color="color[1][0]" class="mt-0.5 mt5">
|
||||
<Menu />
|
||||
</el-icon>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<!-- <el-dropdown-item @click="handleClick('1')"
|
||||
>已发送短信查询</el-dropdown-item
|
||||
>
|
||||
|
||||
<el-dropdown-item @click="handleClick('2')"
|
||||
>模拟短信发送</el-dropdown-item
|
||||
> -->
|
||||
<el-dropdown-item @click="handleClick('3')">系统配置</el-dropdown-item>
|
||||
<el-dropdown-item @click="handleClick('4')">报表导出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="body-box">
|
||||
<!-- 第三行数据 -->
|
||||
<div class="content-box">
|
||||
<dv-border-box-13 :color="color[0]">
|
||||
<eventStatistics ref="eventStatisticsRef" />
|
||||
</dv-border-box-13>
|
||||
|
||||
<dv-border-box-10 :color="color[0]">
|
||||
<Map ref="mapRef" />
|
||||
<!-- <center-left /> -->
|
||||
</dv-border-box-10>
|
||||
|
||||
<dv-border-box-13 :color="color[0]">
|
||||
<alarm ref="alarmRef" />
|
||||
<!-- 紧急告警 -->
|
||||
|
||||
<div class="icon" v-if="!(bottomTextRef?.urgentList.length == 0)" :color="color[0][1]" :class="bottomTextRef?.urgentList.length > 0
|
||||
? 'animate-flash-red'
|
||||
: ''
|
||||
" @click="drawerClick">
|
||||
<!-- <WarnTriangleFilled /> -->
|
||||
<span class="iconfont icon-gaojing" :style="{
|
||||
color:
|
||||
bottomTextRef?.urgentList.length > 0
|
||||
? '#ff0000'
|
||||
: color[0][1],
|
||||
}"></span>
|
||||
<span class="count" v-if="bottomTextRef?.urgentList.length > 0">{{
|
||||
bottomTextRef?.urgentList.length > 99
|
||||
? "99+"
|
||||
: bottomTextRef?.urgentList.length
|
||||
}}</span>
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
<!-- 第四行数据 -->
|
||||
<div class="bototm-box">
|
||||
<dv-border-box-13 :color="color[0]">
|
||||
<endpointStatistics ref="endpointStatisticsRef" />
|
||||
|
||||
<!-- <bottom-left /> -->
|
||||
</dv-border-box-13>
|
||||
<dv-border-box-13 :color="color[0]">
|
||||
<informationTable ref="informationTableRef" @handleCurrentChange="handleCurrentChange" />
|
||||
</dv-border-box-13>
|
||||
<dv-border-box-13 :color="color[0]">
|
||||
<sendTrends ref="sendTrendsRef" />
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
<!-- 底部 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<bottomText ref="bottomTextRef" @handleCurrentChange="handleCurrentChange" />
|
||||
|
||||
<!-- 已发短信查询 -->
|
||||
<smsQueries ref="smsQueriesRef" v-if="smsQueriesFlag" @close="smsQueriesFlag = false" />
|
||||
|
||||
<!-- 系统配置 -->
|
||||
<Config ref="ConfigRef" @flushed="inquire" />
|
||||
|
||||
<!-- 报表导出 -->
|
||||
<ReportForms ref="reportForms" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--index.vue-->
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
defineComponent,
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
onBeforeUnmount,
|
||||
watch,
|
||||
} from "vue";
|
||||
|
||||
import { formatTime, getDateRange, stopSpeak } from "@/utils/index"; //引入封装好的
|
||||
import useDraw from "@/utils/useDraw"; // 引入封装好的屏幕适配方法
|
||||
import { WEEK, title, subtitle, moduleInfo, color } from "@/constant/index"; //引入封装的标题日期
|
||||
import datePicker from "@/components/datePicker/index.vue";
|
||||
import { Menu, BellFilled, WarnTriangleFilled } from "@element-plus/icons-vue";
|
||||
//页面组件
|
||||
import eventStatistics from "./components/eventStatistics.vue"; //统计事件
|
||||
import endpointStatistics from "./components/endpointStatistics.vue"; //终端在线统计
|
||||
import sendTrends from "./components/sendTrends.vue"; //终端在线统计
|
||||
import informationTable from "./components/informationTable.vue"; //实时暂态信息
|
||||
import alarm from "./components/alarm.vue"; //实时暂态信息
|
||||
import Map from "./components/bdMap.vue"; //地图
|
||||
import smsQueries from "./components/smsQueries.vue"; // //短信查询
|
||||
import bottomText from "./components/bottomText.vue"; //边框组件
|
||||
import socketClient from "@/utils/webSocketClient";
|
||||
import { useStore } from "vuex";
|
||||
import Config from "./components/config.vue";
|
||||
import ReportForms from "./components/reportForms.vue";
|
||||
|
||||
const store = useStore();
|
||||
const smsQueriesRef = ref(); // 短信查询组件引用
|
||||
const endpointStatisticsRef = ref(); // 终端在线统计组件引用
|
||||
const informationTableRef = ref(); // 实时暂态信息组件引用
|
||||
const sendTrendsRef = ref();
|
||||
const ConfigRef = ref();
|
||||
const eventStatisticsRef = ref();
|
||||
const alarmRef = ref();
|
||||
const mapRef = ref();
|
||||
//开始创建webSocket客户端
|
||||
const dataSocket = reactive({
|
||||
socketServe: socketClient.Instance,
|
||||
});
|
||||
const smsQueriesFlag = ref(false);
|
||||
const pushFlag = ref(true);
|
||||
const bottomTextRef = ref(); // 底部滚动组件引用
|
||||
// * 加载标识
|
||||
const loading = ref<boolean>(true);
|
||||
// * 时间内容
|
||||
const timeInfo: any = reactive({
|
||||
setInterval: 0,
|
||||
dateDay: "",
|
||||
dateYear: "",
|
||||
dateWeek: "",
|
||||
});
|
||||
const timeType = ref(3);
|
||||
const reportForms = ref();
|
||||
// 适配处理
|
||||
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
|
||||
// 连接webSocket客户端
|
||||
const init = () => {
|
||||
if (!dataSocket.socketServe) {
|
||||
console.error("WebSocket 客户端实例不存在");
|
||||
return;
|
||||
}
|
||||
dataSocket.socketServe.connect(new Date().getTime());
|
||||
dataSocket.socketServe.registerCallBack("message", (res: any) => {
|
||||
pushFlag.value = true;
|
||||
inquire();
|
||||
bottomTextRef.value?.updateData(res);
|
||||
});
|
||||
};
|
||||
// 打开重要告警弹框
|
||||
const drawerClick = () => {
|
||||
bottomTextRef.value?.openDrawer();
|
||||
};
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
stopSpeak();
|
||||
|
||||
cancelLoading();
|
||||
|
||||
handleTime();
|
||||
// todo 屏幕适应
|
||||
windowDraw();
|
||||
calcRate();
|
||||
setTimeout(() => {
|
||||
store.dispatch("setConfig");
|
||||
}, 500);
|
||||
init();
|
||||
});
|
||||
const handleCurrentChange = (val: string) => {
|
||||
mapRef.value?.setIcon(val);
|
||||
};
|
||||
onUnmounted(() => {
|
||||
unWindowDraw();
|
||||
clearInterval(timeInfo.setInterval);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
dataSocket.socketServe?.closeWs();
|
||||
});
|
||||
|
||||
// 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) => {
|
||||
smsQueriesFlag.value = true;
|
||||
|
||||
setTimeout(() => {
|
||||
if (type === "3") {
|
||||
ConfigRef.value.open("系统配置");
|
||||
}
|
||||
if (type === "4") {
|
||||
reportForms.value.open("报表导出");
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
// 切换时间
|
||||
const timeChangeInfo = async () => {
|
||||
inquire();
|
||||
};
|
||||
const inquireTimer: any = ref(null);
|
||||
const inquire = async () => {
|
||||
// 清除上一次的定时器
|
||||
if (inquireTimer.value) {
|
||||
clearTimeout(inquireTimer.value);
|
||||
}
|
||||
|
||||
// 设置新的定时器，延迟300毫秒执行
|
||||
inquireTimer.value = setTimeout(async () => {
|
||||
eventStatisticsRef.value.init(); //电能质量监测终端运行状态
|
||||
endpointStatisticsRef.value.init(); //各区域终端运行状态
|
||||
mapRef.value.init(); //地图
|
||||
informationTableRef.value.init(true); //暂降事件列表
|
||||
sendTrendsRef.value.init();
|
||||
|
||||
alarmRef.value.init();
|
||||
|
||||
// 执行完毕后重置定时器变量
|
||||
inquireTimer.value = null;
|
||||
}, 500);
|
||||
};
|
||||
|
||||
watch(
|
||||
store.state,
|
||||
(val) => {
|
||||
timeChangeInfo();
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "@/assets/scss/index.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: 35px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user