feat：增加实时报警模块
This commit is contained in:
parent
a67c8d0f55
commit
74095dc979
@ -0,0 +1,19 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { AlarmNowListConfig } from './index'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import dataJson from './data.json'
|
||||||
|
|
||||||
|
|
||||||
|
export const option = {
|
||||||
|
dataset: dataJson,
|
||||||
|
rowNum: 4,
|
||||||
|
waitTime: 0.5,
|
||||||
|
showRankNum: false
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
public key = AlarmNowListConfig.key
|
||||||
|
public chartConfig = cloneDeep(AlarmNowListConfig)
|
||||||
|
public option = cloneDeep(option)
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<collapse-item name="滚动列表三" :expanded="true">
|
||||||
|
<SettingItem name="表行数">
|
||||||
|
<n-input-number
|
||||||
|
v-model:value="optionData.rowNum"
|
||||||
|
:min="1"
|
||||||
|
size="small"
|
||||||
|
placeholder="请输入自动计算"
|
||||||
|
></n-input-number>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="轮播时间(s)">
|
||||||
|
<n-input-number
|
||||||
|
v-model:value="optionData.waitTime"
|
||||||
|
:min="0"
|
||||||
|
size="small"
|
||||||
|
placeholder="请输入轮播时间"
|
||||||
|
></n-input-number>
|
||||||
|
</SettingItem>
|
||||||
|
<setting-item >
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="optionData.showRankNum" size="small" />
|
||||||
|
<n-text>显示排行数字</n-text>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
|
|
||||||
|
</collapse-item>
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { option } from './config'
|
||||||
|
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||||
|
const props = defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<typeof option>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"title": "报警信息报警信息",
|
||||||
|
"level": "重大",
|
||||||
|
"time": "12:23:23",
|
||||||
|
"dept": "公司简称公司简称"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "报警信息报警信息",
|
||||||
|
"level": "重大",
|
||||||
|
"time": "12:23:23",
|
||||||
|
"dept": "公司简称公司简称"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "报警信息报警信息",
|
||||||
|
"level": "重大",
|
||||||
|
"time": "12:23:23",
|
||||||
|
"dept": "公司简称公司简称"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "报警信息报警信息",
|
||||||
|
"level": "重大",
|
||||||
|
"time": "12:23:23",
|
||||||
|
"dept": "公司简称公司简称"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "报警信息报警信息",
|
||||||
|
"level": "重大",
|
||||||
|
"time": "12:23:23",
|
||||||
|
"dept": "公司简称公司简称"
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
|
||||||
|
export const AlarmNowListConfig: ConfigType = {
|
||||||
|
key: 'AlarmNowList',
|
||||||
|
chartKey: 'VAlarmNowList',
|
||||||
|
conKey: 'VCAlarmNowList',
|
||||||
|
title: '实时报警列表',
|
||||||
|
category: 'ConfinedSpace',
|
||||||
|
categoryName: '有限空间',
|
||||||
|
package: PackagesCategoryEnum.CHARTS,
|
||||||
|
chartFrame: ChartFrameEnum.COMMON,
|
||||||
|
image: 'AlarmNowList.png'
|
||||||
|
}
|
||||||
@ -0,0 +1,317 @@
|
|||||||
|
<template>
|
||||||
|
<div class="content_box">
|
||||||
|
<vue3-seamless-scroll v-if="option.dataset && option.dataset.length > 0" class="seamless" :list="option.dataset"
|
||||||
|
:limitScrollNum="rowNum" :hover="true" :step="waitTime" :wheel="true" :isWatch="true">
|
||||||
|
<div v-for="(item, index) in option.dataset" class="detail flex_column" :key="index">
|
||||||
|
<div class="flex_v cursor" :style="!showRankNum ? { paddingLeft: 0 } : { paddingLeft: '24px' }"
|
||||||
|
@click="handleOpenDialog(item)">
|
||||||
|
<div class="item_content">
|
||||||
|
<div class="item_header flex">
|
||||||
|
<div class="item_level_text">{{ item.level }}</div>
|
||||||
|
<div class="item_title_text">{{ item.title }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_footer">
|
||||||
|
<div class="item_dept">{{ item.dept }}</div>
|
||||||
|
<div class="item_time">{{ item.time }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</vue3-seamless-scroll>
|
||||||
|
<div v-else style="
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
">
|
||||||
|
暂无数据
|
||||||
|
</div>
|
||||||
|
<n-modal v-model:show="status.showDialog" :class="['custom-tab-modal']" title="报警详情" preset="card"
|
||||||
|
@on-after-leave="handleCloseDialog" :draggable="{ bounds: 'none' }" :style="{ width: '800px', height: '516px' }">
|
||||||
|
<div v-if="isLoading" style="display: flex; width: 100%; justify-content: center; margin-top: 16px">
|
||||||
|
<n-spin size="large" />
|
||||||
|
</div>
|
||||||
|
<n-grid v-else cols="24" x-gap="12" style="overflow-y: auto; padding-bottom: 12px">
|
||||||
|
<n-gi :span="14">
|
||||||
|
<!-- 基础信息 -->
|
||||||
|
<div class="detail-item">
|
||||||
|
<label>报警时间：</label>
|
||||||
|
<span>
|
||||||
|
{{ status.selectedRow?.time }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-item">
|
||||||
|
<label>报警等级：</label>
|
||||||
|
<span class="highlight" style="color: #ff5454">
|
||||||
|
{{ status.selectedRow?.level }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-item">
|
||||||
|
<label>风险描述：</label>
|
||||||
|
<span class="highlight">
|
||||||
|
{{ status.selectedRow?.title }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-item">
|
||||||
|
<label>报警区域：</label>
|
||||||
|
<span>
|
||||||
|
{{ status.selectedRow?.dept }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
// @ts-nocheck
|
||||||
|
|
||||||
|
import { PropType, toRefs, shallowReactive, watch, ref, reactive } from 'vue'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { option as configOption } from './config'
|
||||||
|
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
|
||||||
|
import PlayBack from '@/components/Pages/yushiVideo/playback.vue'
|
||||||
|
import PlayLive from '@/components/Pages/yushiVideo/playLive.vue'
|
||||||
|
import axiosInstance from '@/api/axios'
|
||||||
|
import VChart from 'vue-echarts'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<CreateComponentType & typeof option>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const isLoading = ref(false)
|
||||||
|
const pointChartOption = ref(null)
|
||||||
|
const status = reactive({
|
||||||
|
showDialog: false,
|
||||||
|
selectedRow: null
|
||||||
|
})
|
||||||
|
const { rowNum, waitTime, showRankNum } = toRefs(props.chartConfig.option)
|
||||||
|
const { w, h } = toRefs(props.chartConfig.attr)
|
||||||
|
|
||||||
|
const option = shallowReactive({
|
||||||
|
dataset: configOption.dataset
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const handleOpenDialog = (row: any) => {
|
||||||
|
status.selectedRow = {
|
||||||
|
...row, // 基础数据从item获取
|
||||||
|
};
|
||||||
|
|
||||||
|
status.showDialog = true;
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 手动更新
|
||||||
|
watch(
|
||||||
|
() => props.chartConfig.option.dataset,
|
||||||
|
(newData: any) => {
|
||||||
|
option.dataset = newData
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: false
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 预览更新
|
||||||
|
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
option.dataset = newData
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleCloseDialog = () => {
|
||||||
|
status.showDialog = false
|
||||||
|
status.selectedRow = null
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content_box {
|
||||||
|
width: v-bind('w') + 'px';
|
||||||
|
height: v-bind('h') + 'px';
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seamless {
|
||||||
|
// padding: 0 30px 14px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail {
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
font-size: 12px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex_column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex_wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex_v {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #072230;
|
||||||
|
border-bottom: 1.5px solid #123E54;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_level_text {
|
||||||
|
width: fit-content;
|
||||||
|
height: 18px;
|
||||||
|
color: #ff9191;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #B10000;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
line-height: 18px;
|
||||||
|
padding: 2px 12px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_title_text {
|
||||||
|
color: #b10000;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex_c {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.item_content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_header {
|
||||||
|
margin-left: 20px;
|
||||||
|
flex: 1;
|
||||||
|
max-width: 350px;
|
||||||
|
// height: 30px;
|
||||||
|
align-items: end;
|
||||||
|
white-space: nowrap;
|
||||||
|
/* 禁止换行 */
|
||||||
|
overflow: hidden;
|
||||||
|
/* 隐藏超出部分 */
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/* 显示省略号 */
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_footer {
|
||||||
|
margin-left: 20px;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_time {
|
||||||
|
margin-right: 40px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #7E8990;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_dept {
|
||||||
|
color: #7E8990;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item {
|
||||||
|
padding: 8px 0;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item label {
|
||||||
|
min-width: 90px;
|
||||||
|
color: rgb(145 187 242);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item span {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
width: fit-content;
|
||||||
|
margin: 0 16px 0 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info .sub-title {
|
||||||
|
padding: 0 0 0 24px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info .info-num {
|
||||||
|
color: rgb(34 211 238);
|
||||||
|
font-size: 1.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info .info-body {
|
||||||
|
padding-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enterBtn {
|
||||||
|
color: rgb(62 200 244);
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 87%;
|
||||||
|
top: -45px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
.custom-tab-modal>.n-card-header {
|
||||||
|
background-color: rgba(26, 56, 113, 1) !important;
|
||||||
|
background-image: linear-gradient(to right, rgba(8, 100, 177, 0.7), transparent) !important;
|
||||||
|
padding: 16px !important;
|
||||||
|
border: 2px solid rgba(62, 200, 244, 1);
|
||||||
|
border-bottom-width: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-tab-modal>.n-card__content {
|
||||||
|
background-color: rgba(26, 56, 113, 1) !important;
|
||||||
|
border: 2px solid rgba(62, 200, 244, 1);
|
||||||
|
padding-right: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #2461db;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-tab-modal .timeLineClass>div:last-child {
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import {MapConfig} from './Map'
|
import {MapConfig} from './Map'
|
||||||
import {PieCircleCommenConfig} from './PieCircleCommen'
|
import {PieCircleCommenConfig} from './PieCircleCommen'
|
||||||
|
import {AlarmNowListConfig} from './AlarmNowList'
|
||||||
export default [MapConfig,PieCircleCommenConfig]
|
export default [MapConfig,PieCircleCommenConfig,AlarmNowListConfig]
|
||||||
Loading…
Reference in New Issue
Block a user