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