feat: 告警通知结构初始化、大屏默认设置暗色模式
parent
daf7c98e5a
commit
d39cadd8f3
@ -0,0 +1,3 @@
|
|||||||
|
.dsBox2_wrap {
|
||||||
|
// 暂无内容
|
||||||
|
}
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
/*
|
||||||
|
* @Author: donghao donghao@supervision.ltd
|
||||||
|
* @Date: 2024-02-26 17:24:07
|
||||||
|
* @LastEditors: donghao donghao@supervision.ltd
|
||||||
|
* @LastEditTime: 2024-02-26 17:42:29
|
||||||
|
* @FilePath: \General-AI-Platform-Web-Client\src\components\DsBox\src\dsBox2.tsx
|
||||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* @背景框尺寸说明
|
||||||
|
*
|
||||||
|
* 1、整体框
|
||||||
|
* w1 1856px
|
||||||
|
* h1 763px
|
||||||
|
* 默认标题
|
||||||
|
*
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { defineComponent } from "vue";
|
||||||
|
import "./dsBox2.scss";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "DsBox2",
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: "default"
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
setup(props, { slots }) {
|
||||||
|
return () => {
|
||||||
|
let options = {
|
||||||
|
width: "1856px",
|
||||||
|
height: "763px"
|
||||||
|
};
|
||||||
|
switch (props.type) {
|
||||||
|
case "w1h1":
|
||||||
|
options = {
|
||||||
|
width: "430px",
|
||||||
|
height: "288px"
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
options = {
|
||||||
|
width: "100%",
|
||||||
|
height: "100%"
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div class="dsBox2_wrap w-full h-full">
|
||||||
|
<dv-border-box-10
|
||||||
|
style={{ width: options.width, height: options.height }}
|
||||||
|
>
|
||||||
|
<div class="w-full h-full">
|
||||||
|
<div
|
||||||
|
class="w-full"
|
||||||
|
style={{ height: `calc(${options.height} - 50px)` }}
|
||||||
|
>
|
||||||
|
{/* 主体内容 */}
|
||||||
|
{slots.default()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dv-border-box-10>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
// 标题
|
||||||
|
// 标题样式1
|
||||||
|
.ds_title_1 {
|
||||||
|
font-family: "DouyinSansBold";
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 33px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
background: linear-gradient(to bottom, #ffffff 15%, #3397f4 99%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
$--el-text-color-regular: red;
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
.alarmInfoIndex_wrap {
|
||||||
|
padding: 32px;
|
||||||
|
.alarm_main_info {
|
||||||
|
height: 763px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,310 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: donghao donghao@supervision.ltd
|
||||||
|
* @Date: 2024-02-23 09:55:26
|
||||||
|
* @LastEditors: donghao donghao@supervision.ltd
|
||||||
|
* @LastEditTime: 2024-02-27 09:58:59
|
||||||
|
* @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\views\alarm\alarmInfoIndex.vue
|
||||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
-->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { DsBox2 } from "@/components/DsBox";
|
||||||
|
import { getAlarmList } from "@/api/list";
|
||||||
|
import { onMounted, ref, reactive, h } from "vue";
|
||||||
|
import { BaseTable } from "@/components/CustomTable";
|
||||||
|
import { getConfig } from "@/config";
|
||||||
|
|
||||||
|
import setting from "@/layout/components/setting/index.vue";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "alarmInfoIndex"
|
||||||
|
});
|
||||||
|
const { EpThemeColor } = getConfig();
|
||||||
|
|
||||||
|
// TODO 根据需要提取到全局 告警等级~
|
||||||
|
const alarmLevelStatusEnum: Record<string, any>[] = [
|
||||||
|
{
|
||||||
|
color: "rgba(232, 13, 13, 1)",
|
||||||
|
value: "1",
|
||||||
|
label: "紧急",
|
||||||
|
isDelete: false,
|
||||||
|
icon: "ArrowUpOutlined",
|
||||||
|
id: "1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgba(255, 136, 0, 1)",
|
||||||
|
value: "2",
|
||||||
|
label: "较高",
|
||||||
|
isDelete: false,
|
||||||
|
id: "2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgba(68, 139, 245, 1)",
|
||||||
|
value: "3",
|
||||||
|
label: "一般",
|
||||||
|
isDelete: false,
|
||||||
|
id: "3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgba(179, 214, 0, 1)",
|
||||||
|
value: "4",
|
||||||
|
label: "低",
|
||||||
|
isDelete: true,
|
||||||
|
id: "4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgba(81, 177, 6, 1)",
|
||||||
|
value: "5",
|
||||||
|
label: "较低",
|
||||||
|
isDelete: true,
|
||||||
|
id: "5"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgba(43, 183, 136, 1)",
|
||||||
|
value: "6",
|
||||||
|
label: "非常低",
|
||||||
|
isDelete: true,
|
||||||
|
id: "6"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
function handleDelete(row) {
|
||||||
|
console.log(row, "handleDelete_row");
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
type: "selection"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "告警名称",
|
||||||
|
property: "name"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "告警代码",
|
||||||
|
property: "code"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "告警等级",
|
||||||
|
property: "level",
|
||||||
|
formatter: val => {
|
||||||
|
const currentLevelObj = alarmLevelStatusEnum[Number(val?.level) - 1];
|
||||||
|
return h(
|
||||||
|
"div",
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
fontSize: "14px",
|
||||||
|
color: currentLevelObj.color
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[
|
||||||
|
h("i", {
|
||||||
|
class: `iconfont pr-[8px] ${
|
||||||
|
currentLevelObj.value === "1"
|
||||||
|
? "icon-xiangshangjiantouquan"
|
||||||
|
: "icon-xiala"
|
||||||
|
}`
|
||||||
|
}),
|
||||||
|
h(
|
||||||
|
"span",
|
||||||
|
{
|
||||||
|
fontSize: "14px"
|
||||||
|
},
|
||||||
|
currentLevelObj.label
|
||||||
|
)
|
||||||
|
]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "设备组",
|
||||||
|
property: "deviceGroup",
|
||||||
|
formatter: val => {
|
||||||
|
return h(
|
||||||
|
"div",
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
fontSize: "14px",
|
||||||
|
color: EpThemeColor
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[
|
||||||
|
h("i", {
|
||||||
|
class: `iconfont icon-zishebeizu pr-[8px]`
|
||||||
|
}),
|
||||||
|
h(
|
||||||
|
"span",
|
||||||
|
{
|
||||||
|
fontSize: "14px",
|
||||||
|
class: "pf-1"
|
||||||
|
},
|
||||||
|
val.deviceGroup
|
||||||
|
)
|
||||||
|
]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "告警日期",
|
||||||
|
property: "createTime"
|
||||||
|
},
|
||||||
|
// TODO 需要封装操作按钮
|
||||||
|
{
|
||||||
|
type: "action",
|
||||||
|
label: "操作"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const svg = `
|
||||||
|
<path class="path" d="
|
||||||
|
M 30 15
|
||||||
|
L 28 17
|
||||||
|
M 25.61 25.61
|
||||||
|
A 15 15, 0, 0, 1, 15 30
|
||||||
|
A 15 15, 0, 1, 1, 27.99 7.5
|
||||||
|
L 15 15
|
||||||
|
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
|
||||||
|
|
||||||
|
const listData = ref([]);
|
||||||
|
|
||||||
|
// const searchValue = ref("");
|
||||||
|
|
||||||
|
const formData = reactive({
|
||||||
|
name: "",
|
||||||
|
level: ""
|
||||||
|
});
|
||||||
|
|
||||||
|
const dataLoading = ref(true);
|
||||||
|
|
||||||
|
const getList = async () => {
|
||||||
|
const { currentPage, pageSize } = pagination.value;
|
||||||
|
const { data } = await getAlarmList({ page: currentPage, pageSize });
|
||||||
|
listData.value = data.list;
|
||||||
|
console.log(data.list);
|
||||||
|
pagination.value = {
|
||||||
|
...pagination.value,
|
||||||
|
total: data.total
|
||||||
|
};
|
||||||
|
dataLoading.value = false;
|
||||||
|
// try {
|
||||||
|
|
||||||
|
// } catch (e) {
|
||||||
|
// console.log(e);
|
||||||
|
// } finally {
|
||||||
|
// setTimeout(() => {
|
||||||
|
// dataLoading.value = false;
|
||||||
|
// }, 500);
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
|
||||||
|
function handleTableChange(record) {
|
||||||
|
console.log("handleTableChange_record", record);
|
||||||
|
pagination.value = {
|
||||||
|
...pagination.value,
|
||||||
|
currentPage: record.page,
|
||||||
|
pageSize: record.pageSize
|
||||||
|
};
|
||||||
|
getList();
|
||||||
|
}
|
||||||
|
/**操作栏事件 */
|
||||||
|
function handleDel(row) {
|
||||||
|
console.log(row, "handleDel");
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="alarmInfoIndex_wrap">
|
||||||
|
<!-- 系统设置 -->
|
||||||
|
|
||||||
|
<p class="ds_title_1 pb-[16px]">设备告警通知</p>
|
||||||
|
<div class="alarm_main_info">
|
||||||
|
<DsBox2>
|
||||||
|
<template #default>
|
||||||
|
<!-- <div class="w-full h-full">表格</div> -->
|
||||||
|
<div class="main alarm_wrap pt-[18px] px-[24px]">
|
||||||
|
<el-form
|
||||||
|
:inline="true"
|
||||||
|
:model="formData"
|
||||||
|
class="demo-form-inline ds_form"
|
||||||
|
>
|
||||||
|
<el-form-item label="告警名称">
|
||||||
|
<el-select
|
||||||
|
v-model="formData.name"
|
||||||
|
placeholder="告警名称"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-option label="名称1" value="1" />
|
||||||
|
<el-option label="名称2" value="2" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="告警等级">
|
||||||
|
<el-select
|
||||||
|
v-model="formData.level"
|
||||||
|
placeholder="告警等级"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="(v, k) in alarmLevelStatusEnum"
|
||||||
|
:key="k"
|
||||||
|
:label="v.label"
|
||||||
|
:value="v.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div
|
||||||
|
class="alarm_table"
|
||||||
|
v-loading="dataLoading"
|
||||||
|
:element-loading-svg="svg"
|
||||||
|
element-loading-svg-view-box="-10, -10, 50, 50"
|
||||||
|
>
|
||||||
|
<template v-if="pagination.total > 0">
|
||||||
|
<BaseTable
|
||||||
|
:total="pagination.total"
|
||||||
|
:pageSize="pagination.pageSize"
|
||||||
|
:dataSource="listData"
|
||||||
|
:isFixedPagination="false"
|
||||||
|
:columns="columns"
|
||||||
|
@actions="handleDelete"
|
||||||
|
:page="pagination.currentPage"
|
||||||
|
@change="handleTableChange"
|
||||||
|
>
|
||||||
|
<template v-slot:actionBar="{ row }">
|
||||||
|
<ul class="table_action_box">
|
||||||
|
<li class="flex items-center" @click="handleDel(row)">
|
||||||
|
<el-button text>
|
||||||
|
<i
|
||||||
|
class="iconfont icon-shanchu pr-[8px]"
|
||||||
|
:style="{ fontSize: '14px', color: '#E80D0D' }"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
:style="{
|
||||||
|
fontSize: '14px',
|
||||||
|
color: '#E80D0D'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</span>
|
||||||
|
</el-button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
|
</BaseTable>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</DsBox2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "./alarmInfoIndex.scss";
|
||||||
|
</style>
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
defineOptions({
|
|
||||||
name: ""
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>告警通知</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
Loading…
Reference in New Issue