Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

微调

Browse Source
This commit is contained in:
guanj
2025-08-27 19:25:29 +08:00
parent e277fd01a3
commit 10e3495a97
3 changed files with 758 additions and 746 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
src/layouts/admin/components/globalPopUp.vue
View File

@@ -1,96 +1,108 @@
<template> <template>
<div> <div>
<!-- 全局暂降事件 --> <!-- 全局暂降事件 -->
<el-drawer v-model="drawer" title="暂降事件" size="1050px" :before-close="handleClose"> <el-drawer v-model="drawer" title="暂降事件" size="1050px" :before-close="handleClose">
<div :style="height"> <div :style="height">
<vxe-table <vxe-table
v-bind="defaultAttribute" v-bind="defaultAttribute"
v-loading="isLoading" v-loading="isLoading"
height="100%" height="100%"
ref="xTable1Ref" ref="xTable1Ref"
:data="eventList" :data="eventList.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
> >
<vxe-column type="seq" width="70px" title="序号"></vxe-column> <!-- <vxe-column type="seq" width="70px" title="序号"></vxe-column> -->
<vxe-column field="time" width="180px" sortable title="发生时刻"></vxe-column> <vxe-column field="time" width="180px" sortable title="发生时刻"></vxe-column>
<vxe-column field="lineName" title="监测点"></vxe-column> <vxe-column field="lineName" title="监测点"></vxe-column>
<vxe-column field="powerCompany" title="变电站" width="100px"></vxe-column> <vxe-column field="powerCompany" title="变电站" width="100px"></vxe-column>
<vxe-column field="powerCompany" title="供电公司" width="100px"></vxe-column> <vxe-column field="powerCompany" title="供电公司" width="100px"></vxe-column>
<vxe-column field="persistTime" width="120px" sortable title="持续时间(s)"> <vxe-column field="persistTime" width="120px" sortable title="持续时间(s)">
<template #default="{ row }"> <template #default="{ row }">
{{ Math.floor(row.persistTime * 1000) / 1000 }} {{ Math.floor(row.persistTime * 1000) / 1000 }}
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="eventValue" width="160px" sortable title="暂降(骤升)幅值(%)"> <vxe-column field="eventValue" width="160px" sortable title="暂降(骤升)幅值(%)">
<template #default="{ row }"> <template #default="{ row }">
{{ Math.floor(row.eventValue * 10000) / 100 }} {{ Math.floor(row.eventValue * 10000) / 100 }}
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="eventType" width="100px" title="暂降类型"> <vxe-column field="eventType" width="100px" title="暂降类型">
<template #default="{ row }"> <template #default="{ row }">
{{ event.filter(item => item.id == row.eventType)[0]?.name || '/' }} {{ event.filter(item => item.id == row.eventType)[0]?.name || '/' }}
</template> </template>
</vxe-column> </vxe-column>
</vxe-table> </vxe-table>
</div> <div class="table-pagination mt10">
</el-drawer> <el-pagination
</div> v-model:currentPage="pageNum"
</template> v-model:page-size="pageSize"
<script setup lang="ts"> :page-sizes="[10, 20, 50, 100, 200]"
import { ref, reactive, onMounted } from 'vue' background
import { defaultAttribute } from '@/components/table/defaultAttribute' layout="sizes,total, ->, prev, pager, next, jumper"
import { mainHeight } from '@/utils/layout' :total="eventList.length"
import { useDictData } from '@/stores/dictData' ></el-pagination>
import MQTT from '@/utils/mqtt' </div>
const dictData = useDictData() </div>
const event = dictData.getBasicData('Event_Statis') </el-drawer>
import { useAdminInfo } from '@/stores/adminInfo' </div>
const adminInfo = useAdminInfo() </template>
const height = mainHeight(-20) <script setup lang="ts">
const drawer = ref(false) import { ref, reactive, onMounted } from 'vue'
const isLoading = ref(false) import { defaultAttribute } from '@/components/table/defaultAttribute'
const eventList = ref([]) import { mainHeight } from '@/utils/layout'
const open = () => { import { useDictData } from '@/stores/dictData'
drawer.value = true import MQTT from '@/utils/mqtt'
} const dictData = useDictData()
const handleClose = (done: any) => { const event = dictData.getBasicData('Event_Statis')
drawer.value = false import { useAdminInfo } from '@/stores/adminInfo'
done() const adminInfo = useAdminInfo()
} const height = mainHeight(20)
const init = async () => { const drawer = ref(false)
const mqttClient = new MQTT('/sendEvent') const isLoading = ref(false)
// 设置消息接收回调 const eventList = ref([])
try { const pageNum = ref(1)
await mqttClient.init() const pageSize = ref(20)
const open = () => {
// 订阅主题 drawer.value = true
await mqttClient.subscribe() }
// 设置消息接收回调 const handleClose = (done: any) => {
mqttClient.onMessage((topic, message) => { drawer.value = false
const msg = JSON.parse(message.toString()) done()
console.log("🚀 ~ init ~ msg:", msg) }
if (msg.deptList.includes(adminInfo.$state.deptId)) { const init = async () => {
drawer.value = true const mqttClient = new MQTT('/sendEvent')
isLoading.value = true // 设置消息接收回调
eventList.value.unshift(msg) try {
setTimeout(() => { await mqttClient.init()
isLoading.value = false
}, 500) // 订阅主题
} await mqttClient.subscribe()
}) // 设置消息接收回调
} catch (error) { mqttClient.onMessage((topic, message) => {
console.error('MQTT 初始化失败:', error) const msg = JSON.parse(message.toString())
} console.log('🚀 ~ init ~ msg:', msg)
} if (msg.deptList.includes(adminInfo.$state.deptId)) {
onMounted(() => { drawer.value = true
// startMqtt('/sendEvent', (topic, message) => { isLoading.value = true
// const msg = JSON.parse(message.toString()) eventList.value.unshift(msg)
// console.log(msg) setTimeout(() => {
// }) isLoading.value = false
init() }, 500)
}) }
defineExpose({ })
open, } catch (error) {
eventList console.error('MQTT 初始化失败:', error)
}) }
</script> }
<style lang="scss" scoped></style> onMounted(() => {
// startMqtt('/sendEvent', (topic, message) => {
// const msg = JSON.parse(message.toString())
// console.log(msg)
// })
init()
})
defineExpose({
open,
eventList
})
</script>
<style lang="scss" scoped></style>

542
src/layouts/admin/components/navMenus.vue
View File

@@ -1,271 +1,271 @@
<template> <template>
<div class="nav-menus" :class="configStore.layout.layoutMode"> <div class="nav-menus" :class="configStore.layout.layoutMode">
<el-tooltip effect="dark" content="暂降事件" placement="bottom"> <el-tooltip effect="dark" content="暂降事件" placement="bottom">
<div @click="temporaryLandingEvent" class="nav-menu-item"> <div @click="temporaryLandingEvent" class="nav-menu-item">
<Icon <Icon
:color="configStore.getColorVal('headerBarTabColor')" :color="configStore.getColorVal('headerBarTabColor')"
class="nav-menu-icon" class="nav-menu-icon"
name="el-icon-BellFilled" name="el-icon-BellFilled"
size="18" size="18"
/> />
<span class="nav-menu-text" v-if="globalPopUpRef?.eventList.length != 0"> <span class="nav-menu-text" v-if="globalPopUpRef?.eventList.length != 0">
{{ globalPopUpRef?.eventList.length || 0 }} {{ (globalPopUpRef?.eventList.length>99? '99+':globalPopUpRef?.eventList.length) || 0 }}
</span> </span>
</div> </div>
</el-tooltip> </el-tooltip>
<!-- <el-tooltip effect="dark" content="截图" placement="bottom"> <!-- <el-tooltip effect="dark" content="截图" placement="bottom">
<div @click="savePng" class="nav-menu-item"> <div @click="savePng" class="nav-menu-item">
<Icon <Icon
:color="configStore.getColorVal('headerBarTabColor')" :color="configStore.getColorVal('headerBarTabColor')"
class="nav-menu-icon" class="nav-menu-icon"
name="el-icon-Camera" name="el-icon-Camera"
size="18" size="18"
/> />
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip effect="dark" :content="state.isFullScreen ? '缩小' : '放大'" placement="bottom"> <el-tooltip effect="dark" :content="state.isFullScreen ? '缩小' : '放大'" placement="bottom">
<div @click="onFullScreen" class="nav-menu-item" :class="state.isFullScreen ? 'hover' : ''"> <div @click="onFullScreen" class="nav-menu-item" :class="state.isFullScreen ? 'hover' : ''">
<Icon <Icon
:color="configStore.getColorVal('headerBarTabColor')" :color="configStore.getColorVal('headerBarTabColor')"
class="nav-menu-icon" class="nav-menu-icon"
v-if="state.isFullScreen" v-if="state.isFullScreen"
name="fa-solid fa-compress" name="fa-solid fa-compress"
size="18" size="18"
/> />
<Icon <Icon
:color="configStore.getColorVal('headerBarTabColor')" :color="configStore.getColorVal('headerBarTabColor')"
class="nav-menu-icon" class="nav-menu-icon"
v-else v-else
name="fa-solid fa-expand" name="fa-solid fa-expand"
size="18" size="18"
/> />
</div> </div>
</el-tooltip> --> </el-tooltip> -->
<el-dropdown style="height: 100%" @command="handleCommand"> <el-dropdown style="height: 100%" @command="handleCommand">
<div class="admin-info" :class="state.currentNavMenu == 'adminInfo' ? 'hover' : ''"> <div class="admin-info" :class="state.currentNavMenu == 'adminInfo' ? 'hover' : ''">
<el-avatar :size="25" fit="fill"> <el-avatar :size="25" fit="fill">
<img src="@/assets/avatar.png" alt="" /> <img src="@/assets/avatar.png" alt="" />
</el-avatar> </el-avatar>
<div class="admin-name">{{ adminInfo.nickname }}</div> <div class="admin-name">{{ adminInfo.nickname }}</div>
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item command="adminInfo">个人资料</el-dropdown-item> <el-dropdown-item command="adminInfo">个人资料</el-dropdown-item>
<el-dropdown-item command="changePwd">修改密码</el-dropdown-item> <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
<el-dropdown-item command="layout">退出登录</el-dropdown-item> <el-dropdown-item command="layout">退出登录</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
<!-- <div @click="configStore.setLayout('showDrawer', true)" class="nav-menu-item"> <!-- <div @click="configStore.setLayout('showDrawer', true)" class="nav-menu-item">
<Icon <Icon
:color="configStore.getColorVal('headerBarTabColor')" :color="configStore.getColorVal('headerBarTabColor')"
class="nav-menu-icon" class="nav-menu-icon"
name="fa fa-cogs" name="fa fa-cogs"
size="18" size="18"
/> />
</div> --> </div> -->
<Config /> <Config />
<PopupPwd ref="popupPwd" /> <PopupPwd ref="popupPwd" />
<AdminInfo ref="popupAdminInfo" /> <AdminInfo ref="popupAdminInfo" />
<!-- <TerminalVue /> --> <!-- <TerminalVue /> -->
<!-- 全局暂降事件 --> <!-- 全局暂降事件 -->
<globalPopUp ref="globalPopUpRef" /> <globalPopUp ref="globalPopUpRef" />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
import screenfull from 'screenfull' import screenfull from 'screenfull'
import { useConfig } from '@/stores/config' import { useConfig } from '@/stores/config'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import Config from './config.vue' import Config from './config.vue'
import { useAdminInfo } from '@/stores/adminInfo' import { useAdminInfo } from '@/stores/adminInfo'
import router from '@/router' import router from '@/router'
import globalPopUp from './globalPopUp.vue' import globalPopUp from './globalPopUp.vue'
import { routePush } from '@/utils/router' import { routePush } from '@/utils/router'
import { fullUrl } from '@/utils/common' import { fullUrl } from '@/utils/common'
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import PopupPwd from './popup/password.vue' import PopupPwd from './popup/password.vue'
import AdminInfo from './popup/adminInfo.vue' import AdminInfo from './popup/adminInfo.vue'
import { useNavTabs } from '@/stores/navTabs' import { useNavTabs } from '@/stores/navTabs'
const adminInfo = useAdminInfo() const adminInfo = useAdminInfo()
const navTabs = useNavTabs() const navTabs = useNavTabs()
const configStore = useConfig() const configStore = useConfig()
const popupPwd = ref() const popupPwd = ref()
const popupAdminInfo = ref() const popupAdminInfo = ref()
const state = reactive({ const state = reactive({
isFullScreen: false, isFullScreen: false,
currentNavMenu: '', currentNavMenu: '',
showLayoutDrawer: false, showLayoutDrawer: false,
showAdminInfoPopover: false showAdminInfoPopover: false
}) })
const globalPopUpRef = ref() const globalPopUpRef = ref()
const savePng = () => { const savePng = () => {
html2canvas(document.body, { html2canvas(document.body, {
scale: 1, scale: 1,
useCORS: true useCORS: true
}).then(function (canvas) { }).then(function (canvas) {
var link = document.createElement('a') var link = document.createElement('a')
link.href = canvas.toDataURL('image/png') link.href = canvas.toDataURL('image/png')
link.download = 'screenshot.png' link.download = 'screenshot.png'
link.click() link.click()
}) })
} }
const onFullScreen = () => { const onFullScreen = () => {
if (!screenfull.isEnabled) { if (!screenfull.isEnabled) {
ElMessage.warning('layouts.Full screen is not supported') ElMessage.warning('layouts.Full screen is not supported')
return false return false
} }
screenfull.toggle() screenfull.toggle()
screenfull.onchange(() => { screenfull.onchange(() => {
state.isFullScreen = screenfull.isFullscreen state.isFullScreen = screenfull.isFullscreen
}) })
} }
const handleCommand = (key: string) => { const handleCommand = (key: string) => {
console.log(key) console.log(key)
switch (key) { switch (key) {
case 'adminInfo': case 'adminInfo':
popupAdminInfo.value.open() popupAdminInfo.value.open()
break break
case 'changePwd': case 'changePwd':
popupPwd.value.open() popupPwd.value.open()
break break
case 'layout': case 'layout':
navTabs.closeTabs() navTabs.closeTabs()
window.localStorage.clear() window.localStorage.clear()
adminInfo.reset() adminInfo.reset()
router.push({ name: 'login' }) router.push({ name: 'login' })
break break
default: default:
break break
} }
} }
const temporaryLandingEvent = () => { const temporaryLandingEvent = () => {
globalPopUpRef.value.open() globalPopUpRef.value.open()
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.nav-menus.Default { .nav-menus.Default {
border-radius: var(--el-border-radius-base); border-radius: var(--el-border-radius-base);
box-shadow: var(--el-box-shadow-light); box-shadow: var(--el-box-shadow-light);
} }
.nav-menus { .nav-menus {
height: 60px; height: 60px;
display: flex; display: flex;
align-items: center; align-items: center;
// height: 100%; // height: 100%;
margin-left: auto; margin-left: auto;
background-color: v-bind('configStore.getColorVal("headerBarBackground")'); background-color: v-bind('configStore.getColorVal("headerBarBackground")');
.nav-menu-item { .nav-menu-item {
position: relative; position: relative;
height: 100%; height: 100%;
width: 40px; width: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
.nav-menu-icon { .nav-menu-icon {
box-sizing: content-box; box-sizing: content-box;
color: v-bind('configStore.getColorVal("headerBarTabColor")'); color: v-bind('configStore.getColorVal("headerBarTabColor")');
} }
&:hover { &:hover {
.icon { .icon {
animation: twinkle 0.3s ease-in-out; animation: twinkle 0.3s ease-in-out;
} }
} }
} }
.admin-info { .admin-info {
display: flex; display: flex;
height: 100%; height: 100%;
padding: 0 10px; padding: 0 10px;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
color: v-bind('configStore.getColorVal("headerBarTabColor")'); color: v-bind('configStore.getColorVal("headerBarTabColor")');
&:hover { &:hover {
color: v-bind('configStore.getColorVal("headerBarTabActiveColor")'); color: v-bind('configStore.getColorVal("headerBarTabActiveColor")');
} }
} }
.admin-name { .admin-name {
padding-left: 6px; padding-left: 6px;
white-space: nowrap; white-space: nowrap;
} }
.nav-menu-item:hover, .nav-menu-item:hover,
.admin-info:hover, .admin-info:hover,
.nav-menu-item.hover, .nav-menu-item.hover,
.admin-info.hover { .admin-info.hover {
background: v-bind('configStore.getColorVal("headerBarHoverBackground")'); background: v-bind('configStore.getColorVal("headerBarHoverBackground")');
.nav-menu-icon { .nav-menu-icon {
color: v-bind('configStore.getColorVal("headerBarTabActiveColor")') !important; color: v-bind('configStore.getColorVal("headerBarTabActiveColor")') !important;
} }
} }
} }
.dropdown-menu-box :deep(.el-dropdown-menu__item) { .dropdown-menu-box :deep(.el-dropdown-menu__item) {
justify-content: center; justify-content: center;
} }
.admin-info-base { .admin-info-base {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
padding-top: 10px; padding-top: 10px;
.admin-info-other { .admin-info-other {
display: block; display: block;
width: 100%; width: 100%;
text-align: center; text-align: center;
padding: 10px 0; padding: 10px 0;
.admin-info-name { .admin-info-name {
font-size: var(--el-font-size-large); font-size: var(--el-font-size-large);
} }
} }
} }
.admin-info-footer { .admin-info-footer {
padding: 10px 0; padding: 10px 0;
margin: 0 -12px -12px -12px; margin: 0 -12px -12px -12px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
.pt2 { .pt2 {
padding-top: 2px; padding-top: 2px;
} }
@keyframes twinkle { @keyframes twinkle {
0% { 0% {
transform: scale(0); transform: scale(0);
} }
80% { 80% {
transform: scale(1.2); transform: scale(1.2);
} }
100% { 100% {
transform: scale(1); transform: scale(1);
} }
} }
.nav-menu-text { .nav-menu-text {
position: absolute; position: absolute;
top: 13px; top: 13px;
right: 7px; left: 20px;
font-size: 12px; font-size: 12px;
display: inline-block; display: inline-block;
background-color: #ff0000; background-color: #ff0000;
color: #fff; color: #fff;
border-radius: 5px; border-radius: 5px;
padding: 0 3px; padding: 0 3px;
} }
</style> </style>

758
src/views/pqs/supervise/electricalEnergy/components1/online.vue
View File

@@ -1,379 +1,379 @@
<template> <template>
<!-- <div>1 监测点信息 发起预告警单 </div> --> <!-- <div>1 监测点信息 发起预告警单 </div> -->
<TableHeader datePicker nextFlag theCurrentTime showTimeAll ref="TableHeaderRef" showExport> <TableHeader datePicker nextFlag theCurrentTime ref="TableHeaderRef" showExport>
<template v-slot:select> <template v-slot:select>
<el-form-item label="区域"> <el-form-item label="区域">
<Area ref="areaRef" v-model="tableStore.table.params.deptId" @changeValue="changeArea"/> <Area ref="areaRef" v-model="tableStore.table.params.deptId" @changeValue="changeArea"/>
</el-form-item> </el-form-item>
<el-form-item label="监测点性质"> <el-form-item label="监测点性质">
<el-select v-model="tableStore.table.params.lineType" clearable placeholder="请选择监测点性质"> <el-select v-model="tableStore.table.params.lineType" clearable placeholder="请选择监测点性质">
<el-option label="电网侧" value="0"/> <el-option label="电网侧" value="0"/>
<el-option label="非电网侧" value="1"/> <el-option label="非电网侧" value="1"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="超标指标"> <el-form-item label="超标指标">
<el-select <el-select
v-model="tableStore.table.params.targetList" v-model="tableStore.table.params.targetList"
clearable clearable
multiple multiple
collapse-tags collapse-tags
collapse-tags-tooltip collapse-tags-tooltip
placeholder="请选择超标指标" placeholder="请选择超标指标"
> >
<el-option v-for="item in exceeded" :key="item.id" :label="item.name" :value="item.id"/> <el-option v-for="item in exceeded" :key="item.id" :label="item.name" :value="item.id"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="数据类型"> <el-form-item label="数据类型">
<el-switch <el-switch
v-model="tableStore.table.params.dataType" v-model="tableStore.table.params.dataType"
inline-prompt inline-prompt
active-value="1" active-value="1"
inactive-value="0" inactive-value="0"
active-text="超标数据" active-text="超标数据"
inactive-text="无数据" inactive-text="无数据"
/> />
</el-form-item> </el-form-item>
<el-form-item label="预警阈值"> <el-form-item label="预警阈值">
<!-- <el-input v-model="tableStore.table.params.alertThreshold" placeholder="请输入预警阈值" clearable></el-input> --> <!-- <el-input v-model="tableStore.table.params.alertThreshold" placeholder="请输入预警阈值" clearable></el-input> -->
<el-input-number <el-input-number
v-model="tableStore.table.params.alertThreshold" v-model="tableStore.table.params.alertThreshold"
:min="0" :min="0"
:step="1" :step="1"
step-strictly step-strictly
@change="changeAlert" @change="changeAlert"
/> />
</el-form-item> </el-form-item>
<el-form-item label="告警阈值"> <el-form-item label="告警阈值">
<el-input-number <el-input-number
v-model="tableStore.table.params.alarmThreshold" v-model="tableStore.table.params.alarmThreshold"
:min="0" :min="0"
:step="1" :step="1"
step-strictly step-strictly
@change="changeAlarm" @change="changeAlarm"
/> />
</el-form-item> </el-form-item>
<!-- <el-form-item label="搜索"> <!-- <el-form-item label="搜索">
<el-input <el-input
v-model="tableStore.table.params.searchValue" v-model="tableStore.table.params.searchValue"
placeholder="输入变电站、终端、监测点名称" placeholder="输入变电站、终端、监测点名称"
clearable clearable
></el-input> ></el-input>
</el-form-item> --> </el-form-item> -->
</template> </template>
<template #operation> <template #operation>
<el-button icon="el-icon-Plus" :disabled="flag != '2'" type="primary" @click="launch('发起预警单')"> <el-button icon="el-icon-Plus" :disabled="flag != '2'" type="primary" @click="launch('发起预警单')">
发起预警单 发起预警单
</el-button> </el-button>
<el-button icon="el-icon-Plus" :disabled="flag != '2'" type="primary" @click="launch('发起告警单')"> <el-button icon="el-icon-Plus" :disabled="flag != '2'" type="primary" @click="launch('发起告警单')">
发起告警单 发起告警单
</el-button> </el-button>
</template> </template>
</TableHeader> </TableHeader>
<Table ref="tableRef"/> <Table ref="tableRef"/>
<!-- /告警单 --> <!-- /告警单 -->
<alarmList ref="alarmListRef" @onSubmit="tableStore.index()"/> <alarmList ref="alarmListRef" @onSubmit="tableStore.index()"/>
<!-- 详情 --> <!-- 详情 -->
<detail ref="detailRef"/> <detail ref="detailRef"/>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref, onMounted, provide, nextTick} from 'vue' import {ref, onMounted, provide, nextTick} from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import Area from '@/components/form/area/index.vue' import Area from '@/components/form/area/index.vue'
import Table from '@/components/table/index.vue' import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
import {useDictData} from '@/stores/dictData' import {useDictData} from '@/stores/dictData'
import alarmList from './form/alarmList.vue' import alarmList from './form/alarmList.vue'
import detail from './form/detail.vue' import detail from './form/detail.vue'
const dictData = useDictData() const dictData = useDictData()
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
const router = useRouter() // 路由对象 const router = useRouter() // 路由对象
//字典获取超标指标 //字典获取超标指标
const exceeded = dictData.getBasicData('Steady_Statis') const exceeded = dictData.getBasicData('Steady_Statis')
const tableRef = ref() const tableRef = ref()
const industry = dictData.getBasicData('Business_Type') const industry = dictData.getBasicData('Business_Type')
const TableHeaderRef = ref() const TableHeaderRef = ref()
const alarmListRef = ref() const alarmListRef = ref()
const flagTime = ref(false) const flagTime = ref(false)
const detailRef = ref() const detailRef = ref()
const list: any = ref({ const list: any = ref({
deptId: '', deptId: '',
searchBeginTime: '', searchBeginTime: '',
searchEndTime: '', searchEndTime: '',
alertThreshold: '', alertThreshold: '',
alarmThreshold: '' alarmThreshold: ''
}) })
const level: any = ref(dictData.state.area[0]?.level) const level: any = ref(dictData.state.area[0]?.level)
const flag: any = ref('') const flag: any = ref('')
const tableStore = new TableStore({ const tableStore = new TableStore({
url: '/supervision-boot/onlineMonitor/list', url: '/supervision-boot/onlineMonitor/list',
publicHeight: 65, publicHeight: 65,
method: 'POST', method: 'POST',
filename:'在线监测', filename:'在线监测',
// isWebPaging:true, // isWebPaging:true,
column: [ column: [
{title: '', type: 'checkbox', width: 40}, {title: '', type: 'checkbox', width: 40},
{ {
title: '序号', title: '序号',
align: 'center', align: 'center',
width: 80, width: 80,
formatter: (row: any) => { formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
} }
}, },
{field: 'dept', title: '负责单位'}, {field: 'dept', title: '负责单位'},
{field: 'substation', title: '变电站名称'}, {field: 'substation', title: '变电站名称'},
{field: 'deviceName', title: '终端名称'}, {field: 'deviceName', title: '终端名称'},
{field: 'lineName', title: '监测点名称'}, {field: 'lineName', title: '监测点名称'},
{ {
field: 'businessType', field: 'businessType',
title: '监测对象类型', title: '监测对象类型',
formatter: (row: any) => { formatter: (row: any) => {
return industry.find((item: any) => item.id == row.cellValue)?.name || '/' return industry.find((item: any) => item.id == row.cellValue)?.name || '/'
} }
}, },
{field: 'objectName', title: '监测对象名称'}, {field: 'objectName', title: '监测对象名称'},
{ {
field: 'targetType', field: 'targetType',
title: '指标类型', title: '指标类型',
formatter: (row: any) => { formatter: (row: any) => {
return exceeded.find((item: any) => item.id == row.cellValue)?.name || '/' return exceeded.find((item: any) => item.id == row.cellValue)?.name || '/'
} }
}, },
{ {
field: 'overLimitDay', field: 'overLimitDay',
title: '累计超标天数', title: '累计超标天数',
formatter: (row: any) => { formatter: (row: any) => {
return row.cellValue != null ? row.cellValue : '/' return row.cellValue != null ? row.cellValue : '/'
} }
}, },
{ {
field: 'updateTime', field: 'updateTime',
visible: flagTime, visible: flagTime,
title: '最新数据时间' title: '最新数据时间'
}, },
{ {
title: '操作', title: '操作',
width: '180', width: '180',
align: 'center', align: 'center',
render: 'buttons', render: 'buttons',
fixed: 'right', fixed: 'right',
buttons: [ buttons: [
{ {
name: 'productSetting', name: 'productSetting',
title: '详情', title: '详情',
type: 'primary', type: 'primary',
icon: 'el-icon-EditPen', icon: 'el-icon-EditPen',
render: 'basicButton', render: 'basicButton',
disabled: row => { disabled: row => {
return row.targetType == 0 return row.targetType == 0
}, },
click: row => { click: row => {
detailRef.value.open({ detailRef.value.open({
text: '详情', text: '详情',
row: row, row: row,
list: list.value list: list.value
}) })
} }
}, },
{ {
name: 'productSetting', name: 'productSetting',
title: '查看预警单', title: '查看预警单',
type: 'primary', type: 'primary',
icon: 'el-icon-EditPen', icon: 'el-icon-EditPen',
render: 'basicButton', render: 'basicButton',
disabled: row => { disabled: row => {
return row.step != 1 return row.step != 1
}, },
click: row => { click: row => {
router.push({ router.push({
name: 'supervision/supervision/manage', name: 'supervision/supervision/manage',
query: { query: {
type: 0, type: 0,
t: Date.now() t: Date.now()
} }
}) })
} }
}, },
{ {
name: 'productSetting', name: 'productSetting',
title: '查看告警单', title: '查看告警单',
type: 'primary', type: 'primary',
icon: 'el-icon-EditPen', icon: 'el-icon-EditPen',
render: 'basicButton', render: 'basicButton',
disabled: row => { disabled: row => {
return row.step != 2 return row.step != 2
}, },
click: row => { click: row => {
router.push({ router.push({
name: 'supervision/supervision/manage', name: 'supervision/supervision/manage',
query: { query: {
type: 1, type: 1,
t: Date.now() t: Date.now()
} }
}) })
} }
} }
// { // {
// name: 'productSetting', // name: 'productSetting',
// title: '发起告警单', // title: '发起告警单',
// type: 'warning', // type: 'warning',
// disabled: row => { // disabled: row => {
// return row.overLimitDay < tableStore.table.params.alarmThreshold // return row.overLimitDay < tableStore.table.params.alarmThreshold
// }, // },
// icon: 'el-icon-EditPen', // icon: 'el-icon-EditPen',
// render: 'basicButton', // render: 'basicButton',
// click: async row => { // click: async row => {
// // handleWarningAlarmFlag(row).then(res => { // // handleWarningAlarmFlag(row).then(res => {
// // console.log(res) // // console.log(res)
// // ElMessage.success('发起告警单成功！') // // ElMessage.success('发起告警单成功！')
// // tableStore.index() // // tableStore.index()
// // }) // // })
// const { value } = await ElMessageBox.prompt('', '整改意见', { // const { value } = await ElMessageBox.prompt('', '整改意见', {
// confirmButtonText: '确定', // confirmButtonText: '确定',
// cancelButtonText: '取消', // cancelButtonText: '取消',
// inputType: 'textarea', // inputType: 'textarea',
// inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格 // inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
// inputErrorMessage: '请输入整改意见' // inputErrorMessage: '请输入整改意见'
// }) // })
// handleWarningAlarmFlag({ ...row, reformAdvice: value }).then(res => { // handleWarningAlarmFlag({ ...row, reformAdvice: value }).then(res => {
// ElMessage.success('发起告警单成功！') // ElMessage.success('发起告警单成功！')
// tableStore.index() // tableStore.index()
// }) // })
// } // }
// }, // },
// { // {
// name: 'edit', // name: 'edit',
// title: '发起预警单', // title: '发起预警单',
// type: 'primary', // type: 'primary',
// icon: 'el-icon-Open', // icon: 'el-icon-Open',
// disabled: row => { // disabled: row => {
// return row.overLimitDay >= tableStore.table.params.alarmThreshold // return row.overLimitDay >= tableStore.table.params.alarmThreshold
// }, // },
// render: 'basicButton', // render: 'basicButton',
// click: async row => { // click: async row => {
// // handleWarningAlarmFlag(row).then(res => { // // handleWarningAlarmFlag(row).then(res => {
// // console.log(res) // // console.log(res)
// // ElMessage.success('发起预警单成功！') // // ElMessage.success('发起预警单成功！')
// // tableStore.index() // // tableStore.index()
// // }) // // })
// const { value } = await ElMessageBox.prompt('', '整改意见', { // const { value } = await ElMessageBox.prompt('', '整改意见', {
// confirmButtonText: '确定', // confirmButtonText: '确定',
// cancelButtonText: '取消', // cancelButtonText: '取消',
// inputType: 'textarea', // inputType: 'textarea',
// inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格 // inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
// inputErrorMessage: '请输入整改意见' // inputErrorMessage: '请输入整改意见'
// }) // })
// handleWarningAlarmFlag({ ...row, reformAdvice: value }).then(res => { // handleWarningAlarmFlag({ ...row, reformAdvice: value }).then(res => {
// ElMessage.success('发起预警单成功！') // ElMessage.success('发起预警单成功！')
// tableStore.index() // tableStore.index()
// }) // })
// } // }
// } // }
] ]
} }
], ],
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.currentPage = tableStore.table.params.pageNum tableStore.table.params.currentPage = tableStore.table.params.pageNum
list.value.deptId = tableStore.table.params.deptId list.value.deptId = tableStore.table.params.deptId
list.value.searchBeginTime = tableStore.table.params.searchBeginTime list.value.searchBeginTime = tableStore.table.params.searchBeginTime
list.value.searchEndTime = tableStore.table.params.searchEndTime list.value.searchEndTime = tableStore.table.params.searchEndTime
if (tableStore.table.params.alertThreshold != '') { if (tableStore.table.params.alertThreshold != '') {
list.value.alertThreshold = tableStore.table.params.alertThreshold list.value.alertThreshold = tableStore.table.params.alertThreshold
} }
list.value.lineType = tableStore.table.params.lineType list.value.lineType = tableStore.table.params.lineType
list.value.alarmThreshold = tableStore.table.params.alarmThreshold list.value.alarmThreshold = tableStore.table.params.alarmThreshold
flag.value = level.value flag.value = level.value
flagTime.value = tableStore.table.params.dataType == 0 ? true : false flagTime.value = tableStore.table.params.dataType == 0 ? true : false
}, },
loadCallback: () => { loadCallback: () => {
// tableStore.table.data = [ // tableStore.table.data = [
// { // {
// orgName: '张家口', // orgName: '张家口',
// subName: '110kV马头山风电场', // subName: '110kV马头山风电场',
// lineName: '111口头线', // lineName: '111口头线',
// voltageScale: '110kV', // voltageScale: '110kV',
// overDay: '20', // overDay: '20',
// overDays: '10' // overDays: '10'
// }, // },
// { // {
// orgName: '张家口', // orgName: '张家口',
// subName: '110kV韩家庄风电场', // subName: '110kV韩家庄风电场',
// lineName: '111缘韩一线', // lineName: '111缘韩一线',
// voltageScale: '110kV', // voltageScale: '110kV',
// overDay: '20', // overDay: '20',
// overDays: '16' // overDays: '16'
// } // }
// ] // ]
} }
}) })
tableStore.table.params.alertThreshold = 5 tableStore.table.params.alertThreshold = 5
tableStore.table.params.alarmThreshold = 5 tableStore.table.params.alarmThreshold = 5
tableStore.table.params.targetList = exceeded.filter(item => item.code == 'Total_Indicator')[0].id tableStore.table.params.targetList = exceeded.filter(item => item.code == 'Total_Indicator')[0].id
? [exceeded.filter(item => item.code == 'Total_Indicator')[0].id] ? [exceeded.filter(item => item.code == 'Total_Indicator')[0].id]
: [] : []
tableStore.table.params.lineType = '' tableStore.table.params.lineType = ''
tableStore.table.params.dataType = '1' tableStore.table.params.dataType = '1'
tableStore.table.params.deptId = dictData.state.area[0].id tableStore.table.params.deptId = dictData.state.area[0].id
provide('tableStore', tableStore) provide('tableStore', tableStore)
onMounted(() => { onMounted(() => {
// TableHeaderRef.value.setDatePicker([{label: '月', value: 3}]) // TableHeaderRef.value.setDatePicker([{label: '月', value: 3}])
tableStore.index() tableStore.index()
setTimeout(() => { setTimeout(() => {
TableHeaderRef.value.showSelectChange() TableHeaderRef.value.showSelectChange()
}, 10) }, 10)
}) })
const changeAlert = e => { const changeAlert = e => {
if (e == null) { if (e == null) {
tableStore.table.params.alertThreshold = 5 tableStore.table.params.alertThreshold = 5
} else { } else {
if (e > tableStore.table.params.alarmThreshold) { if (e > tableStore.table.params.alarmThreshold) {
ElMessage.warning('预警阈值不能大于报警阈值') ElMessage.warning('预警阈值不能大于报警阈值')
tableStore.table.params.alertThreshold = 5 tableStore.table.params.alertThreshold = 5
} }
} }
} }
const changeAlarm = e => { const changeAlarm = e => {
if (e == null) { if (e == null) {
tableStore.table.params.alarmThreshold = 5 tableStore.table.params.alarmThreshold = 5
} else { } else {
if (e < tableStore.table.params.alertThreshold) { if (e < tableStore.table.params.alertThreshold) {
ElMessage.warning('报警阈值不能小于预警阈值') ElMessage.warning('报警阈值不能小于预警阈值')
tableStore.table.params.alarmThreshold = 5 tableStore.table.params.alarmThreshold = 5
} }
} }
} }
// 发起预警单 // 发起预警单
const launch = (title: string) => { const launch = (title: string) => {
if (tableStore.table.selection.length == 0) { if (tableStore.table.selection.length == 0) {
ElMessage.warning('请选择一条数据') ElMessage.warning('请选择一条数据')
return return
} }
alarmListRef.value.open({ alarmListRef.value.open({
text: title, text: title,
form: list.value, form: list.value,
row: tableStore.table.selection row: tableStore.table.selection
}) })
console.log('🚀 ~ launch ~ list.value:', list.value) console.log('🚀 ~ launch ~ list.value:', list.value)
} }
const changeArea = e => { const changeArea = e => {
level.value = e.data.level level.value = e.data.level
} }
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>