|
|
|
@ -36,11 +36,11 @@ |
|
|
|
</template> |
|
|
|
</n-button> |
|
|
|
</template> |
|
|
|
返回首页 |
|
|
|
返回上一页 |
|
|
|
</n-tooltip> |
|
|
|
<n-tooltip trigger="hover" v-if="warningShow"> |
|
|
|
<template #trigger> |
|
|
|
<n-badge class="warningbadge" :value="warningData.length" :max="15"> |
|
|
|
<n-badge class="warningbadge" :value="waringData.length" :max="15"> |
|
|
|
<n-button class="tooltips" circle quaternary @click="waringClick"> |
|
|
|
<template #icon> |
|
|
|
<n-icon> |
|
|
|
@ -56,23 +56,71 @@ |
|
|
|
<n-drawer class="waringDrawer" v-model:show="waringDrawer" :default-width="420" resizable placement="right"> |
|
|
|
<n-drawer-content closable> |
|
|
|
<template #header> |
|
|
|
消息 |
|
|
|
<div class="title"> |
|
|
|
<span>消息</span> |
|
|
|
<span class="button" @click="waringMore">更多</span> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
啊呀呀呀呀 |
|
|
|
<div class="waringList"> |
|
|
|
<div class="item" v-for="(item, index) in waringData" :key="index"> |
|
|
|
<div class="name"> |
|
|
|
<span>{{ item.deviceName }}</span> |
|
|
|
<span class="time">{{ item.alertTime }}</span> |
|
|
|
</div> |
|
|
|
<div class="info"> |
|
|
|
<span>{{ item.paramName }}</span> |
|
|
|
<n-button type="info" size="small" @click="waringConfirm(item)">确认</n-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</n-drawer-content> |
|
|
|
</n-drawer> |
|
|
|
<n-modal class="waringModal" v-model:show="waringModal"> |
|
|
|
<n-card :bordered="false" size="huge" role="dialog" aria-modal="true"> |
|
|
|
<el-table class="waringTable" :data="waringList" header-row-class-name="headerRowClass" |
|
|
|
header-cell-class-name="headerCellClass" row-class-name="rowClass" cell-class-name="cellClass" height="350" |
|
|
|
stripe> |
|
|
|
<el-table-column prop="deviceName" label="设备名称" align="center" /> |
|
|
|
<el-table-column prop="paramName" label="变量名称" align="center" /> |
|
|
|
<el-table-column prop="alertName" label="告警级别" align="center" /> |
|
|
|
<el-table-column prop="totalCounts" label="告警累计" align="center" /> |
|
|
|
<el-table-column prop="alertFirstTime" label="首次告警时间" align="center" /> |
|
|
|
<el-table-column fixed="right" label="操作" align="center"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button class="confirm" type="info" size="small" @click="waringConfirm(scope.row)">确认</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<div class="warClose" @click="warClose"> |
|
|
|
<CloseCircleOutline /> |
|
|
|
</div> |
|
|
|
</n-card> |
|
|
|
</n-modal> |
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
|
|
import router from '@/router'; |
|
|
|
import { useRoute, useRouter } from "vue-router"; |
|
|
|
import { getWeather } from '@/api/user/index'; |
|
|
|
import { getWarList, process } from '@/api/waring/index'; |
|
|
|
import { waringVo } from '@/api/waring/types'; |
|
|
|
import { Filter, Maximize, Settings, Power, Bell } from '@vicons/tabler'; |
|
|
|
import { CloseCircleOutline } from '@vicons/ionicons5'; |
|
|
|
import { useDateFormat, useNow } from '@vueuse/core'; |
|
|
|
const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss'); |
|
|
|
import { uniqueArrayObject } from '@/utils/index'; |
|
|
|
import mitt from '@/plugins/bus'; |
|
|
|
import calendar from '@/utils/lunar'; |
|
|
|
|
|
|
|
const route = useRoute() |
|
|
|
const router = useRouter() |
|
|
|
|
|
|
|
const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss'); |
|
|
|
const emit = defineEmits(['showModalClick', 'returnClick']); |
|
|
|
const timer = ref() |
|
|
|
const isCurrentRoute = ref(true) |
|
|
|
const waringDrawer = ref(false) |
|
|
|
const waringModal = ref(false) |
|
|
|
const waringData = ref<waringVo[]>([]) |
|
|
|
const waringList = ref<waringVo[]>([]) |
|
|
|
const routerType = ref('') |
|
|
|
|
|
|
|
const weatherData = ref( |
|
|
|
{ city: "", weather: "", temperature: "", weatherImg: "" } |
|
|
|
@ -95,17 +143,23 @@ const props = defineProps({ |
|
|
|
warningShow: { |
|
|
|
type: Boolean, |
|
|
|
default: false |
|
|
|
}, |
|
|
|
warningData: { |
|
|
|
type: Array, |
|
|
|
default: [1, 2, 3], |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
routerType.value = route.query?.id === undefined ? "0" : "1" |
|
|
|
getWeatherData() |
|
|
|
}); |
|
|
|
|
|
|
|
mitt.on('waringMessage', (res: any) => { |
|
|
|
//监听报警信息 |
|
|
|
console.log(res.data); |
|
|
|
waringData.value.push(res.data) |
|
|
|
console.log("waringData--", waringData.value); |
|
|
|
waringData.value = uniqueArrayObject(waringData.value, "id") |
|
|
|
console.log("waringData--", waringData.value); |
|
|
|
}); |
|
|
|
|
|
|
|
function showClick() { |
|
|
|
//显示/隐藏表格配置栏 |
|
|
|
emit('showModalClick', true); |
|
|
|
@ -114,8 +168,15 @@ function showClick() { |
|
|
|
function returnBack() { |
|
|
|
//返回首页 |
|
|
|
// emit('returnClick', ''); |
|
|
|
if (routerType.value === '1'&&route.path!="/screen") { |
|
|
|
router.push({ |
|
|
|
path: "/screen", |
|
|
|
query: { id: sessionStorage.getItem('id') } |
|
|
|
}) |
|
|
|
} else { |
|
|
|
router.replace("/dashboard") |
|
|
|
} |
|
|
|
} |
|
|
|
function waringClick() { |
|
|
|
//点击报警按钮 |
|
|
|
waringDrawer.value = true |
|
|
|
@ -146,6 +207,47 @@ function getWeatherData() { |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
function waringMore() { |
|
|
|
//点击报警更多 |
|
|
|
waringDrawer.value = false |
|
|
|
waringModal.value = true |
|
|
|
getwaringList() |
|
|
|
} |
|
|
|
function getwaringList() { |
|
|
|
const params = 0; |
|
|
|
getWarList(params).then((res: any) => { |
|
|
|
if (res.code === 200) { |
|
|
|
waringList.value = res.rows; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
function waringConfirm(item: any) { |
|
|
|
//报警确认 |
|
|
|
ElMessageBox.confirm('是否确认?', '提示', { |
|
|
|
confirmButtonText: '确认', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning', |
|
|
|
}).then(() => { |
|
|
|
const params = item.id; |
|
|
|
process(params).then((res: any) => { |
|
|
|
if (res.code === 200) { |
|
|
|
waringList.value = res.data; |
|
|
|
// waringDrawer.value = false |
|
|
|
// waringModal.value = false |
|
|
|
getwaringList() |
|
|
|
ElMessage({ |
|
|
|
message: res.msg, |
|
|
|
type: 'success', |
|
|
|
}) |
|
|
|
} |
|
|
|
}); |
|
|
|
}).catch(() => { }) |
|
|
|
} |
|
|
|
function warClose() { |
|
|
|
//报警列表关闭 |
|
|
|
waringModal.value = false |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
@ -235,13 +337,4 @@ function getWeatherData() { |
|
|
|
margin-left: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.n-drawer-container { |
|
|
|
color: red; |
|
|
|
.waringDrawer { |
|
|
|
background: #0f2856; |
|
|
|
backdrop-filter: blur(10px); |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
fuguobin
1 year ago
