Compare commits
6 Commits
main
...
7a20eb8603
| Author | SHA1 | Date | |
|---|---|---|---|
|
7a20eb8603 | ||
|
bfd6282a99 | ||
|
|
287dc9262b | ||
|
f39fb299c4 | ||
|
|
9ad9446cae | ||
|
a16b26370f |
1
hx-ai-intelligent/src/icon/biaoge.svg
Normal file
1
hx-ai-intelligent/src/icon/biaoge.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720144479404" class="icon" viewBox="0 0 1142 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2572" xmlns:xlink="http://www.w3.org/1999/xlink" width="17.84375" height="16"><path d="M1102.769231 39.384615v945.23077H39.384615V39.384615h1063.384616m0-39.384615H39.384615a39.384615 39.384615 0 0 0-39.384615 39.384615v945.23077a39.384615 39.384615 0 0 0 39.384615 39.384615h1063.384616a39.384615 39.384615 0 0 0 39.384615-39.384615V39.384615a39.384615 39.384615 0 0 0-39.384615-39.384615z" fill="#4D4D4D" p-id="2573"></path><path d="M39.384615 393.846154h1063.384616v39.384615H39.384615zM39.384615 590.769231h1063.384616v39.384615H39.384615zM39.384615 787.692308h1063.384616v39.384615H39.384615zM39.384615 196.923077h1063.384616v39.384615H39.384615z" fill="#B3B3B3" p-id="2574"></path><path d="M315.076923 196.923077v787.692308H275.692308V196.923077zM590.769231 196.923077v787.692308h-39.384616V196.923077zM866.461538 196.923077v787.692308h-39.384615V196.923077z" fill="#B3B3B3" p-id="2575"></path><path d="M39.384615 39.384615h1063.384616v157.538462H39.384615z" fill="#05AFC8" p-id="2576"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
1
hx-ai-intelligent/src/icon/bingtu.svg
Normal file
1
hx-ai-intelligent/src/icon/bingtu.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720145764410" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4680" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M495.611479 159.364238C285.562631 159.364238 115.284768 329.642102 115.284768 539.690949S285.562631 920.01766 495.611479 920.01766 875.93819 749.739797 875.93819 539.690949H518.216336c-12.484662 0-22.604857-10.120194-22.604857-22.604856V159.364238z" fill="#839BFB" p-id="4681"></path><path d="M562.860927 495.046358h368.459161c0-215.978102-175.085916-391.064018-391.064017-391.064018v368.459161c0 12.484662 10.120194 22.604857 22.604856 22.604857z" fill="#839BFB" fill-opacity=".6" p-id="4682"></path></svg>
|
||||||
|
After Width: | Height: | Size: 838 B |
12
hx-ai-intelligent/src/icon/gaojingguanli.svg
Normal file
12
hx-ai-intelligent/src/icon/gaojingguanli.svg
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36px" height="36px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve"> <image id="image0" width="36" height="36" x="0" y="0"
|
||||||
|
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkBAMAAAATLoWrAAAAIGNIUk0AAHomAACAhAAA+gAAAIDo
|
||||||
|
AAB1MAAA6mAAADqYAAAXcJy6UTwAAAASUExURQAAAI2Vo46Wo4uXo42Wo////3MrvScAAAAEdFJO
|
||||||
|
UwCAv0BHJ479AAAAAWJLR0QF+G/pxwAAAAd0SU1FB+gHBAISL9sg4ewAAABSSURBVCjPY2CgCxBU
|
||||||
|
cVJGFRFxAQIUMUYXMBBAV+Ti4ogQYXZxQVfGBBNygAuZwIQQOlXwCDnBhVzgAL+QA8vQFcIELi4Y
|
||||||
|
nsQUcnHBEMMiREsAALpDPLVxCYzSAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDI0LTA3LTA0VDAyOjE4
|
||||||
|
OjQ3KzAwOjAwPdooNQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyNC0wNy0wNFQwMjoxODo0NyswMDow
|
||||||
|
MEyHkIkAAAAodEVYdGRhdGU6dGltZXN0YW1wADIwMjQtMDctMDRUMDI6MTg6NDcrMDA6MDAbkrFW
|
||||||
|
AAAAAElFTkSuQmCC" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
1
hx-ai-intelligent/src/icon/huanjingjiance.svg
Normal file
1
hx-ai-intelligent/src/icon/huanjingjiance.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720061440927" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11363" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M659.925333 128a74.666667 74.666667 0 0 1 71.338667 52.618667L754.56 256H821.333333c64.8 0 117.333333 52.533333 117.333334 117.333333v426.666667c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V373.333333c0-64.8 52.533333-117.333333 117.333334-117.333333h66.773333l23.296-75.381333A74.666667 74.666667 0 0 1 364.074667 128h295.850666zM512 405.333333c-88.362667 0-160 71.637333-160 160 0 88.362667 71.637333 160 160 160 88.362667 0 160-71.637333 160-160 0-88.362667-71.637333-160-160-160z m0 256a96 96 0 1 0 0-192 96 96 0 0 0 0 192z" fill="#000000" p-id="11364"></path></svg>
|
||||||
|
After Width: | Height: | Size: 969 B |
1
hx-ai-intelligent/src/icon/jiankongzhongxin.svg
Normal file
1
hx-ai-intelligent/src/icon/jiankongzhongxin.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720061108318" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10061" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M512 12L94.71 138v314.92C94.71 657.7 263.86 880.16 512 1012c248.14-131.84 417.29-354.3 417.29-559.08V138z m209.91 510H562v159.91H462V522H302.09V422H462V262.09h100V422h159.91z" fill="#2c2c2c" p-id="10062"></path></svg>
|
||||||
|
After Width: | Height: | Size: 549 B |
50
hx-ai-intelligent/src/router/alarmManagement.ts
Normal file
50
hx-ai-intelligent/src/router/alarmManagement.ts
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
const Base = () => import('/nerv-lib/saas/view/system/layout/content.vue');
|
||||||
|
const alarmManagement = {
|
||||||
|
path: '/alarmManagement',
|
||||||
|
name: 'AlarmManagement',
|
||||||
|
meta: { title: '告警管理', icon: 'gaojingguanli', index: 4 },
|
||||||
|
redirect: { name: 'alarmManagement' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'alarmOverview',
|
||||||
|
name: 'AlarmOverview',
|
||||||
|
meta: { title: '告警总览', hideChildren: true, icon: 'gaojingguanli' },
|
||||||
|
component: Base,
|
||||||
|
redirect: { name: 'alarmOverviewIndex' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'index',
|
||||||
|
name: 'alarmOverviewIndex',
|
||||||
|
// component: () => import('/nerv-lib/saas/view/menuManage/index.vue'),
|
||||||
|
component: () => import('/@/view/alarmManagement/alarmOverview/index.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '告警总览',
|
||||||
|
keepAlive: true,
|
||||||
|
// backApi: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'alarmSettings',
|
||||||
|
name: 'AlarmSettings',
|
||||||
|
meta: { title: '告警设置', hideChildren: true, icon: 'gaojingguanli' },
|
||||||
|
component: Base,
|
||||||
|
redirect: { name: 'alarmSettingsIndex' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'index',
|
||||||
|
name: 'alarmSettingsIndex',
|
||||||
|
// component: () => import('/nerv-lib/saas/view/menuManage/index.vue'),
|
||||||
|
component: () => import('/@/view/alarmManagement/alarmSettings/index.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '告警设置',
|
||||||
|
keepAlive: true,
|
||||||
|
// backApi: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
export default alarmManagement;
|
||||||
67
hx-ai-intelligent/src/router/monitor.ts
Normal file
67
hx-ai-intelligent/src/router/monitor.ts
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
const Base = () => import('/nerv-lib/saas/view/system/layout/content.vue');
|
||||||
|
const equipment = {
|
||||||
|
path: '/monitor',
|
||||||
|
name: 'Monitor',
|
||||||
|
meta: { title: '监控中心', icon: 'jiankongzhongxin', index: 1 },
|
||||||
|
redirect: { name: 'EnvironmentMonitor' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'environmentMonitor',
|
||||||
|
name: 'EnvironmentMonitor',
|
||||||
|
meta: { title: '环境监测', hideChildren: true, icon: 'huanjingjiance' },
|
||||||
|
component: Base,
|
||||||
|
redirect: { name: 'EnvironmentMonitorIndex' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'index',
|
||||||
|
name: 'EnvironmentMonitorIndex',
|
||||||
|
component: () => import('/@/view/monitor/environmentMonitor/index.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '环境监测',
|
||||||
|
keepAlive: true,
|
||||||
|
// backApi: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'deviceMonitor',
|
||||||
|
name: 'DeviceMonitor',
|
||||||
|
meta: { title: '设备监测', hideChildren: true, icon: 'huanjingjiance' },
|
||||||
|
component: Base,
|
||||||
|
redirect: { name: 'DeviceMonitorIndex' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'index',
|
||||||
|
name: 'DeviceMonitorIndex',
|
||||||
|
component: () => import('/@/view/monitor/deviceMonitor/index.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '设备监测',
|
||||||
|
keepAlive: true,
|
||||||
|
// backApi: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// path: 'group',
|
||||||
|
// name: 'Group',
|
||||||
|
// meta: { title: '分组管理', hideChildren: true, icon: 'shebeiguanli' },
|
||||||
|
// component: Base,
|
||||||
|
// redirect: { name: 'GroupIndex' },
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// path: 'index',
|
||||||
|
// name: 'GroupIndex',
|
||||||
|
// component: () => import('/@/view/monitor/group/index.vue'),
|
||||||
|
// meta: {
|
||||||
|
// title: '分组管理',
|
||||||
|
// keepAlive: true,
|
||||||
|
// // backApi: [],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
export default equipment;
|
||||||
@@ -0,0 +1,101 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="box-top">
|
||||||
|
<div v-for="index in 3" :key="index" class="box-top-item">
|
||||||
|
<div class="item-box">
|
||||||
|
<div class="item-box-left">
|
||||||
|
<div class="item-box-left-title">设备告警 (今日处理 / 总数) </div>
|
||||||
|
<div class="iem-box-left-number">
|
||||||
|
10 / 13
|
||||||
|
<span
|
||||||
|
style="
|
||||||
|
color: #04d919;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 5px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
"
|
||||||
|
>+10%</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-box-right">
|
||||||
|
<img width="54px" height="54px" src="../../../../src/icon/gaojingguanli.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="flex: 4; width: 100%">2</div>
|
||||||
|
<div style="flex: 4; width: 100%">3</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue'; // 从 Vue 中导入 ref、onMounted 和 watchEffect
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'alarmOverview', // 与页面路由name一致缓存才可生效
|
||||||
|
});
|
||||||
|
|
||||||
|
const info = ref({});
|
||||||
|
onMounted(() => {});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
// border: 1px solid red;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 5px;
|
||||||
|
background-color: #f0f1f4;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.box-top {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 5px;
|
||||||
|
.box-top-item {
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
gap: 5px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 20px;
|
||||||
|
.item-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
.item-box-left {
|
||||||
|
flex: 9;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0px !important;
|
||||||
|
.item-box-left-title {
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #aaaaaa;
|
||||||
|
font-kerning: normal;
|
||||||
|
font-family: '微软雅黑', sans-serif;
|
||||||
|
}
|
||||||
|
.iem-box-left-number {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-box-right {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,170 @@
|
|||||||
|
<template>
|
||||||
|
<a-form class="ns-form">
|
||||||
|
<div class="ns-form-title ns-title-extra-box">
|
||||||
|
<span>查询</span>
|
||||||
|
<a-button type="link" class="ns-operate-expand" @click="expandAll = !expandAll">
|
||||||
|
<template v-if="expandAll">
|
||||||
|
收起筛选
|
||||||
|
<UpOutlined />
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
展开筛选
|
||||||
|
<DownOutlined />
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
<template v-if="expandAll">
|
||||||
|
<a-row :gutter="24">
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-select v-model:value="select.yx" style="width: 100%" placeholder="请选择告警优先级">
|
||||||
|
<a-select-option v-for="(val, index) in 60" :key="index" :value="index">{{
|
||||||
|
index
|
||||||
|
}}</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-input v-model:value="select.tilte" placeholder="请输入告警标题关键字" />
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-input v-model:value="select.tilte" placeholder="请输入告警标题关键字" />
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-select
|
||||||
|
v-model:value="select.yx"
|
||||||
|
style="width: 100%"
|
||||||
|
:autoClearSearchValue="true"
|
||||||
|
placeholder="请选择启用状态">
|
||||||
|
<a-select-option :key="1" :value="1"> 启用 </a-select-option>
|
||||||
|
<a-select-option :key="0" :value="0"> 关闭 </a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :span="24">
|
||||||
|
<a-col :span="24" class="ns-operate">
|
||||||
|
<a-button @click="reset">重置</a-button>
|
||||||
|
<a-button type="primary" @click="search">搜索</a-button>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
</a-form>
|
||||||
|
<div class="ns-table-header">
|
||||||
|
<div class="ns-table-title ns-title-extra-box">告警规则</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent, nextTick, provide, ref, toRefs, watch } from 'vue';
|
||||||
|
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
|
||||||
|
export default {
|
||||||
|
components: { DownOutlined, UpOutlined },
|
||||||
|
setup() {
|
||||||
|
const expandAll = ref(true);
|
||||||
|
const loading = ref(false);
|
||||||
|
const select = ref({
|
||||||
|
title: '',
|
||||||
|
yx: null,
|
||||||
|
});
|
||||||
|
const reset = () => {
|
||||||
|
console.log(select);
|
||||||
|
};
|
||||||
|
const search = () => {
|
||||||
|
console.log(select);
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
expandAll,
|
||||||
|
select,
|
||||||
|
loading,
|
||||||
|
search,
|
||||||
|
reset,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@gap: 16px;
|
||||||
|
.ns-form {
|
||||||
|
padding: 16px;
|
||||||
|
background-color: white;
|
||||||
|
// border-radius: 8px;
|
||||||
|
border-bottom-left-radius: 12px;
|
||||||
|
border-bottom-right-radius: 12px;
|
||||||
|
.ant-row {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.ns-operate {
|
||||||
|
text-align: right;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-top: 16px;
|
||||||
|
|
||||||
|
.ns-operate-expand {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 2px;
|
||||||
|
border: unset !important;
|
||||||
|
.anticon {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
border: unset !important;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
border: unset !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-btn {
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ns-form-title {
|
||||||
|
text-align: left;
|
||||||
|
height: 22px;
|
||||||
|
// line-height: 32px;
|
||||||
|
//font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
user-select: text;
|
||||||
|
margin-bottom: calc(@gap - 0px);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
:deep(.ant-btn) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ns-table-header {
|
||||||
|
min-width: fit-content;
|
||||||
|
user-select: none;
|
||||||
|
// padding: 16px 0;
|
||||||
|
padding-top: 16px;
|
||||||
|
text-align: right;
|
||||||
|
position: relative;
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 0 16px;
|
||||||
|
display: flex;
|
||||||
|
.ns-table-header::before {
|
||||||
|
position: absolute;
|
||||||
|
top: -20px; /* 与 margin-top 的值相反，以覆盖 margin-top 的区域 */
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 20px; /* 与 margin-top 的值相同 */
|
||||||
|
background-color: gray; /* 设置灰色背景 */
|
||||||
|
}
|
||||||
|
.ns-table-title {
|
||||||
|
text-align: left;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
//font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
user-select: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-btn {
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
:first-child.ant-btn {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,224 @@
|
|||||||
|
<!-- 配置设备告警 -->
|
||||||
|
<template>
|
||||||
|
<ns-view-list-table v-if="show" class="table" v-bind="tableConfig" />
|
||||||
|
<!-- 新增or编辑界面 -->
|
||||||
|
<editConfigureDeviceAlarm ref="editConfigureDeviceAlarms" />
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import data from '../notificationManagementMock.json';
|
||||||
|
import editConfigureDeviceAlarm from '../equipmentAlarm/editConfigureDeviceAlarm.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { editConfigureDeviceAlarm },
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
//设备告警数据
|
||||||
|
const configureDeviceAlarmsData = ref({});
|
||||||
|
const show = ref(false);
|
||||||
|
const tableConfig = ref({});
|
||||||
|
const editConfigureDeviceAlarms = ref({});
|
||||||
|
const mockData = ref(data.listData);
|
||||||
|
const doWnload = (url) => {
|
||||||
|
const a = document.createElement('a');
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.href = encodeURI(url);
|
||||||
|
//设置下载的文件名
|
||||||
|
// a.download = fileName.value;
|
||||||
|
//触发a标签的点击事件，进行下载
|
||||||
|
a.click();
|
||||||
|
};
|
||||||
|
const setconfigureDeviceAlarmsData = (value: any) => {
|
||||||
|
configureDeviceAlarmsData.value = value;
|
||||||
|
show.value = true;
|
||||||
|
tableConfig.value = {
|
||||||
|
title: '告警规则',
|
||||||
|
// api: '/carbon_emission/device/getDeviceList',
|
||||||
|
value: mockData.value,
|
||||||
|
headerActions: [
|
||||||
|
{
|
||||||
|
label: '新增',
|
||||||
|
name: 'RoleTypeAdd',
|
||||||
|
type: 'primary',
|
||||||
|
handle: () => {
|
||||||
|
console.log('新增xxxxxxx');
|
||||||
|
editConfigureDeviceAlarms.value.toggle();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '导入',
|
||||||
|
name: 'groupImport',
|
||||||
|
type: 'primary',
|
||||||
|
extra: {
|
||||||
|
// api: props.postImportApi, // 导入接口名
|
||||||
|
title: '设备信息', // 弹窗title
|
||||||
|
templateName: 'whiteListUser', // 所使用的文件名称
|
||||||
|
indexName: '设备id', // 匹配类型字段
|
||||||
|
message: [
|
||||||
|
{ label: '1、若必填项未填写，则不能进行导入操作' },
|
||||||
|
{ label: `2、当重复时，则更新数据。` },
|
||||||
|
{ label: '3、数据将从模版的第五行进行导入。' },
|
||||||
|
{ label: '4、文件导入勿超过5MB。' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '导出',
|
||||||
|
name: 'groupExports',
|
||||||
|
type: 'primary',
|
||||||
|
handle: () => {
|
||||||
|
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '批量删除',
|
||||||
|
type: 'primary',
|
||||||
|
name: 'userBatchDel',
|
||||||
|
dynamicDisabled: (data: any) => {
|
||||||
|
return data.list.length === 0;
|
||||||
|
},
|
||||||
|
confirm: true,
|
||||||
|
isReload: true,
|
||||||
|
isClearCheck: true,
|
||||||
|
// api: origanizemanage.batchDel,
|
||||||
|
dynamicParams: { userIds: 'userId[]' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: '序号',
|
||||||
|
dataIndex: 'address',
|
||||||
|
customRender: (text: any) => {
|
||||||
|
return text.index + 1;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '规则id',
|
||||||
|
dataIndex: 'id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备信息',
|
||||||
|
dataIndex: 'deviceCode',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '告警点位',
|
||||||
|
dataIndex: 'deviceName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '判断条件',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '取值类型',
|
||||||
|
dataIndex: 'position',
|
||||||
|
textEllipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '异常描述',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '启用通知',
|
||||||
|
dataIndex: 'isUse',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
params: {
|
||||||
|
page: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
// rowSelection: null, 选择按钮
|
||||||
|
columnActions: {
|
||||||
|
title: '操作',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
name: 'FeedBackDetail',
|
||||||
|
dynamicParams: ['uuid', 'appealType'],
|
||||||
|
handle: (data: any) => {
|
||||||
|
console.log(data, 'xxxxxxx');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
name: 'FeedBackDetail',
|
||||||
|
dynamicParams: ['uuid', 'appealType'],
|
||||||
|
confirm: true,
|
||||||
|
handle: () => {
|
||||||
|
// mockData.value.splice(0, 1);
|
||||||
|
console.log(data, 'xxxxxxx');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
formConfig: {
|
||||||
|
title: value.position,
|
||||||
|
schemas: [
|
||||||
|
{
|
||||||
|
field: 'provider',
|
||||||
|
label: '设备名称',
|
||||||
|
component: 'NsInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入设备名称',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'provider',
|
||||||
|
label: '设备点位',
|
||||||
|
component: 'NsSelect',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择告警优先级',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '电流',
|
||||||
|
value: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '电压',
|
||||||
|
value: '0',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'payWay',
|
||||||
|
label: '启用状态',
|
||||||
|
component: 'NsSelect',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择启用状态',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '启用',
|
||||||
|
value: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '关闭',
|
||||||
|
value: '0',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'provider',
|
||||||
|
label: '异常描述',
|
||||||
|
component: 'NsInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入异常描述关键字',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// pagination: { pageSizeOptions: false },
|
||||||
|
rowKey: 'id',
|
||||||
|
};
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
configureDeviceAlarmsData,
|
||||||
|
show,
|
||||||
|
doWnload,
|
||||||
|
tableConfig,
|
||||||
|
editConfigureDeviceAlarms,
|
||||||
|
setconfigureDeviceAlarmsData,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,339 @@
|
|||||||
|
<template>
|
||||||
|
<ns-drawer
|
||||||
|
v-model:visible="visible"
|
||||||
|
width="520"
|
||||||
|
:title="infoObject?.id ? '编辑' : '新增'"
|
||||||
|
:ok="btnClick"
|
||||||
|
:cancel="handleClose"
|
||||||
|
placement="right">
|
||||||
|
<div style="padding: 18px">
|
||||||
|
<a-form ref="formRef" :model="infoObject" :rules="rules">
|
||||||
|
<a-form-item ref="name" label="站点" name="name">
|
||||||
|
<a-tree-select
|
||||||
|
v-model:value="infoObject.name"
|
||||||
|
show-search
|
||||||
|
style="width: 100%"
|
||||||
|
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
||||||
|
placeholder="请选择站点"
|
||||||
|
allow-clear
|
||||||
|
tree-default-expand-all
|
||||||
|
:tree-data="zdTreeData"
|
||||||
|
tree-node-filter-prop="label">
|
||||||
|
<!-- 特殊处理情况 -->
|
||||||
|
<!-- <template #title="{ value: val, label }">
|
||||||
|
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
|
||||||
|
<template v-else>{{ label }}</template>
|
||||||
|
</template> -->
|
||||||
|
</a-tree-select>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="设备类型" name="sbtype">
|
||||||
|
<a-cascader
|
||||||
|
v-model:value="infoObject.sbtype"
|
||||||
|
:options="sbOptions"
|
||||||
|
:show-search="{ filter }"
|
||||||
|
placeholder="请选择设备类型" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="设备名称" name="sbName">
|
||||||
|
<a-select
|
||||||
|
v-model:value="infoObject.sbName"
|
||||||
|
style="width: 100%"
|
||||||
|
:autoClearSearchValue="true"
|
||||||
|
placeholder="请选择设备名称">
|
||||||
|
<a-select-option :key="1" :value="1"> AC001电表 </a-select-option>
|
||||||
|
<a-select-option :key="2" :value="2"> AC002电表 </a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="设备点位" name="sbAdress">
|
||||||
|
<a-select
|
||||||
|
v-model:value="infoObject.sbAdress"
|
||||||
|
show-search
|
||||||
|
placeholder="请选择设备点位"
|
||||||
|
style="width: 100%"
|
||||||
|
:options="dwOptions"
|
||||||
|
:filter-option="filterOption"
|
||||||
|
@focus="handleFocus"
|
||||||
|
@change="handleChange" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="启用规则" name="delivery">
|
||||||
|
<a-switch
|
||||||
|
v-model:checked="infoObject.delivery"
|
||||||
|
:class="{
|
||||||
|
'blue-background': infoObject.delivery,
|
||||||
|
'grey-background': !infoObject.delivery,
|
||||||
|
}" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="取值类型" name="qzType">
|
||||||
|
<a-select
|
||||||
|
v-model:value="infoObject.qzType"
|
||||||
|
show-search
|
||||||
|
placeholder="请选择设备点位"
|
||||||
|
style="width: 100%"
|
||||||
|
:options="qzOptions"
|
||||||
|
:filter-option="filterOption"
|
||||||
|
@change="handleQzChange" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="规则类型" name="resource">
|
||||||
|
<a-radio-group v-model:value="infoObject.resource">
|
||||||
|
<a-radio value="1">且(and)</a-radio>
|
||||||
|
<a-radio value="2">或(or)</a-radio>
|
||||||
|
</a-radio-group>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="异常描述" name="desc">
|
||||||
|
<a-textarea
|
||||||
|
v-model:value="infoObject.desc"
|
||||||
|
style="height: 32px"
|
||||||
|
:autoSize="{ minRows: 1, maxRows: 1 }"
|
||||||
|
show-count
|
||||||
|
:maxlength="30" />
|
||||||
|
</a-form-item>
|
||||||
|
<template v-for="index in infoObject.alarmList?.length" :key="index">
|
||||||
|
<a-form-item :label="`逻辑${index}`" name="alarm">
|
||||||
|
<a-input style="width: 60px" v-model:value="infoObject.alarmList[index - 1].alarm" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item :label="`数值${index}`" name="number">
|
||||||
|
<a-input
|
||||||
|
style="width: 60px"
|
||||||
|
type="number"
|
||||||
|
v-model:value="infoObject.alarmList[index - 1].number" />
|
||||||
|
</a-form-item>
|
||||||
|
</template>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</ns-drawer>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { NsMessage } from '/nerv-lib/component';
|
||||||
|
import { ref, toRaw } from 'vue';
|
||||||
|
import type { CascaderProps, TreeSelectProps, SelectProps } from 'ant-design-vue';
|
||||||
|
import type { ShowSearchType } from 'ant-design-vue/es/cascader';
|
||||||
|
|
||||||
|
import type { Rule } from 'ant-design-vue/es/form';
|
||||||
|
|
||||||
|
const visible = ref(false);
|
||||||
|
//表单数据
|
||||||
|
const infoObject = ref({
|
||||||
|
id: null,
|
||||||
|
name: null,
|
||||||
|
resource: null,
|
||||||
|
desc: null,
|
||||||
|
sbtype: null,
|
||||||
|
delivery: null,
|
||||||
|
alarmList: [{ alarm: null, number: null }],
|
||||||
|
});
|
||||||
|
const formRef = ref();
|
||||||
|
//站点数
|
||||||
|
const zdTreeData = ref<TreeSelectProps['treeData']>([
|
||||||
|
{
|
||||||
|
label: '铁路总局(T01)',
|
||||||
|
value: 'T01',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
label: '济阳站(T0101)',
|
||||||
|
value: 'T0101',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
//设备类型树
|
||||||
|
const sbOptions: CascaderProps['options'] = [
|
||||||
|
{
|
||||||
|
value: '3',
|
||||||
|
label: '3.电梯',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: '301',
|
||||||
|
label: '301.扶梯',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '302',
|
||||||
|
label: '301.直梯',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '4',
|
||||||
|
label: '4.冷热源',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: '401',
|
||||||
|
label: '402.冷水机组',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '402',
|
||||||
|
label: '403.热泵机组',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '403',
|
||||||
|
label: '403.锅炉',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '404',
|
||||||
|
label: '404.水处理机组',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '405',
|
||||||
|
label: '405.板式热交换机组',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
//设备点位
|
||||||
|
const dwOptions = ref<SelectProps['options']>([
|
||||||
|
{ value: '电压 (U)', label: '电压 (U)', code: '1' },
|
||||||
|
{ value: '电流 (I)', label: '电流 (I)', code: '2' },
|
||||||
|
{ value: '电流 (I)', label: 'a相电流 (Ia)', code: '3' },
|
||||||
|
]);
|
||||||
|
const filter: ShowSearchType['filter'] = (inputValue: any, path: any) => {
|
||||||
|
return path.some(
|
||||||
|
(option: any) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
//取值类型
|
||||||
|
const qzOptions = ref<SelectProps['options']>([
|
||||||
|
{ value: '实时值', label: '实时值', code: '1' },
|
||||||
|
{ value: '平均值', label: '平均值', code: '2' },
|
||||||
|
]);
|
||||||
|
//设备点位方法
|
||||||
|
const filterOption = (input: string, option: any) => {
|
||||||
|
console.log('搜索', option.value);
|
||||||
|
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||||
|
};
|
||||||
|
const handleFocus = () => {
|
||||||
|
console.log('点击');
|
||||||
|
};
|
||||||
|
const handleChange = (value: string) => {
|
||||||
|
console.log(`selected ${value}`);
|
||||||
|
console.log('选择', infoObject.value.sbAdress);
|
||||||
|
//获得code
|
||||||
|
dwOptions.value.forEach((item) => {
|
||||||
|
if (item.value === value) {
|
||||||
|
console.log('符合', item.code);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const handleQzChange = (value: string) => {
|
||||||
|
//获得code
|
||||||
|
qzOptions.value.forEach((item) => {
|
||||||
|
if (item.value === value) {
|
||||||
|
console.log('符合', item.code);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const emit = defineEmits(['editObject']);
|
||||||
|
//父调子 页面显示方法
|
||||||
|
const toggle = (value: any) => {
|
||||||
|
//判断 是新增 还是修改
|
||||||
|
if (value) {
|
||||||
|
infoObject.value = value;
|
||||||
|
} else {
|
||||||
|
infoObject.value = {
|
||||||
|
id: null,
|
||||||
|
name: null,
|
||||||
|
resource: null,
|
||||||
|
desc: null,
|
||||||
|
sbtype: null,
|
||||||
|
delivery: null,
|
||||||
|
alarmList: [{ alarm: null, number: null }],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
visible.value = !visible.value;
|
||||||
|
};
|
||||||
|
//表单 判断规格
|
||||||
|
const rules: Record<string, Rule[]> = {
|
||||||
|
name: [{ required: true, message: '请选择站点', trigger: 'change' }],
|
||||||
|
sbtype: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
|
||||||
|
delivery: [{ required: true, message: '请选择启用规则', trigger: 'change' }],
|
||||||
|
sbName: [{ required: true, message: '请选择设备名称', trigger: 'change' }],
|
||||||
|
sbAdress: [{ required: true, message: '请选择设备点位', trigger: 'change' }],
|
||||||
|
qzType: [{ required: true, message: '请选择取值类型', trigger: 'change' }],
|
||||||
|
resource: [{ required: true, message: '请选择规则类型', trigger: 'change' }],
|
||||||
|
desc: [{ required: true, message: '请输入异常描述', trigger: 'blur' }],
|
||||||
|
alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }],
|
||||||
|
number: [{ required: true, message: '请输入数值', trigger: 'blur' }],
|
||||||
|
};
|
||||||
|
// 开关选择
|
||||||
|
const changeSwitch = () => {
|
||||||
|
console.log(infoObject.value.selectSwitch, '开关');
|
||||||
|
};
|
||||||
|
// 确认按钮
|
||||||
|
const btnClick = () => {
|
||||||
|
console.log(infoObject.value, '数据');
|
||||||
|
console.log(dwOptions.value, '点位');
|
||||||
|
dwOptions.value?.forEach;
|
||||||
|
//数据是否验证通过
|
||||||
|
formRef.value.validate().then(() => {
|
||||||
|
console.log('values', infoObject, toRaw(infoObject));
|
||||||
|
});
|
||||||
|
//调用接口
|
||||||
|
// http
|
||||||
|
// .post(props.api, data)
|
||||||
|
// .then(() => {
|
||||||
|
// isLoading.value = false;
|
||||||
|
// NsMessage.success('操作成功', 1, () => {
|
||||||
|
// navigateBack();
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
// .catch(() => {
|
||||||
|
// isLoading.value = false;
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
//取消按钮
|
||||||
|
const handleClose = () => {
|
||||||
|
// 清楚校验错误信息
|
||||||
|
formRef.value.resetFields();
|
||||||
|
//对象清空
|
||||||
|
infoObject.value = {
|
||||||
|
id: null,
|
||||||
|
name: null,
|
||||||
|
resource: null,
|
||||||
|
desc: null,
|
||||||
|
sbtype: null,
|
||||||
|
delivery: null,
|
||||||
|
alarmList: [{ alarm: null, number: null }],
|
||||||
|
};
|
||||||
|
visible.value = false;
|
||||||
|
NsMessage.success('操作成功');
|
||||||
|
};
|
||||||
|
defineExpose({
|
||||||
|
toggle,
|
||||||
|
handleClose,
|
||||||
|
dwOptions,
|
||||||
|
formRef,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.drawerContainer {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.blue-background.ant-switch-checked {
|
||||||
|
background-color: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(1, 206, 255, 1) 0%,
|
||||||
|
rgba(0, 150, 229, 1) 100%
|
||||||
|
) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey-background.ant-switch {
|
||||||
|
background-color: grey !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-background.ant-switch-checked .ant-switch-handle {
|
||||||
|
background-color: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(1, 206, 255, 1) 0%,
|
||||||
|
rgba(0, 150, 229, 1) 100%
|
||||||
|
) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey-background.ant-switch .ant-switch-handle {
|
||||||
|
background-color: grey !important;
|
||||||
|
}
|
||||||
|
/deep/ .ant-form-item-label {
|
||||||
|
z-index: 20;
|
||||||
|
text-align: right;
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,255 @@
|
|||||||
|
<template>
|
||||||
|
<ns-drawer
|
||||||
|
v-model:visible="visible"
|
||||||
|
width="520"
|
||||||
|
:title="infoObject?.id ? '编辑' : '新增'"
|
||||||
|
:ok="btnClick"
|
||||||
|
:cancel="handleClose"
|
||||||
|
placement="right">
|
||||||
|
<ns-form ref="formRef" :schemas="schemas" :model="infoObject" formLayout="vertical" />
|
||||||
|
<div style="margin-left: 52px">
|
||||||
|
应用规则:
|
||||||
|
<a-switch
|
||||||
|
v-model:checked="infoObject.isUse"
|
||||||
|
:class="{
|
||||||
|
'blue-background': infoObject.isUse,
|
||||||
|
'grey-background': !infoObject.isUse,
|
||||||
|
}"
|
||||||
|
style="margin-left: 6px"
|
||||||
|
@change="changeSwitch" />
|
||||||
|
</div>
|
||||||
|
</ns-drawer>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { NsMessage } from '/nerv-lib/component';
|
||||||
|
|
||||||
|
const visible = ref(false);
|
||||||
|
//表单数据
|
||||||
|
const infoObject = ref({});
|
||||||
|
const formRef = ref();
|
||||||
|
const emit = defineEmits(['editObject']);
|
||||||
|
const toggle = (value) => {
|
||||||
|
//判断 是新增 还是修改
|
||||||
|
if (value) {
|
||||||
|
infoObject.value = value;
|
||||||
|
} else {
|
||||||
|
infoObject.value = {
|
||||||
|
accountNo: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
console.log('xxxx');
|
||||||
|
|
||||||
|
visible.value = !visible.value;
|
||||||
|
};
|
||||||
|
const schemas = [
|
||||||
|
{
|
||||||
|
field: 'basicInfo',
|
||||||
|
label: '',
|
||||||
|
displayFormItem: false,
|
||||||
|
class: 'ns-form-item-full',
|
||||||
|
component: 'NsChildForm',
|
||||||
|
componentProps: {
|
||||||
|
schemas: [
|
||||||
|
{
|
||||||
|
field: 'accountNo',
|
||||||
|
label: '告警标题',
|
||||||
|
component: 'NsInput',
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '告警标题不能为空',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入告警标题',
|
||||||
|
maxLength: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'select',
|
||||||
|
label: '重复次数',
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '重复次数不能为空',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
component: 'NsSelect',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
placeholder: '请选择重复次数',
|
||||||
|
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '单次',
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '重复',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '累计',
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'accountNo',
|
||||||
|
label: '检测时长',
|
||||||
|
component: 'NsInputNumber',
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
validator: (rules, value, cbfn) => {
|
||||||
|
if (value && /^[0-9]*$/.test(value)) {
|
||||||
|
cbfn();
|
||||||
|
} else {
|
||||||
|
cbfn('请输入正确的检测时长');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入监测时长',
|
||||||
|
// maxLength: 30,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'danwei',
|
||||||
|
label: '监测时长单位',
|
||||||
|
component: 'NsSelect',
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '监测时长单位不能为空',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
placeholder: '请选择监测时长单位',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '分',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '时',
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '天',
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'select',
|
||||||
|
label: '优先级',
|
||||||
|
component: 'NsSelect',
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '优先级不能为空',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
placeholder: '请选择优先级',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '紧急',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '重要',
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '一般',
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const changeSwitch = () => {
|
||||||
|
console.log(infoObject.value.selectSwitch, '开关');
|
||||||
|
};
|
||||||
|
const btnClick = () => {
|
||||||
|
//表单校验
|
||||||
|
formRef.value.triggerSubmit().then((data: any) => {
|
||||||
|
console.log('校验成功');
|
||||||
|
console.log('data', infoObject.value);
|
||||||
|
visible.value = false;
|
||||||
|
NsMessage.success('操作成功');
|
||||||
|
emit('editObject', null);
|
||||||
|
//调用接口
|
||||||
|
// http
|
||||||
|
// .post(props.api, data)
|
||||||
|
// .then(() => {
|
||||||
|
// isLoading.value = false;
|
||||||
|
// NsMessage.success('操作成功', 1, () => {
|
||||||
|
// navigateBack();
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
// .catch(() => {
|
||||||
|
// isLoading.value = false;
|
||||||
|
// });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const handleClose = () => {
|
||||||
|
// 清楚校验错误信息
|
||||||
|
formRef.value.formElRef.clearValidate();
|
||||||
|
console.log(infoObject.value);
|
||||||
|
infoObject.value = {};
|
||||||
|
visible.value = false;
|
||||||
|
NsMessage.success('操作成功');
|
||||||
|
};
|
||||||
|
defineExpose({
|
||||||
|
toggle,
|
||||||
|
handleClose,
|
||||||
|
formRef,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.drawerContainer {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.blue-background.ant-switch-checked {
|
||||||
|
background-color: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(1, 206, 255, 1) 0%,
|
||||||
|
rgba(0, 150, 229, 1) 100%
|
||||||
|
) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey-background.ant-switch {
|
||||||
|
background-color: grey !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-background.ant-switch-checked .ant-switch-handle {
|
||||||
|
background-color: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(1, 206, 255, 1) 0%,
|
||||||
|
rgba(0, 150, 229, 1) 100%
|
||||||
|
) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey-background.ant-switch .ant-switch-handle {
|
||||||
|
background-color: grey !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<a-tabs default-active-key="1" @change="callback">
|
||||||
|
<a-tab-pane key="1" tab="通知管理">
|
||||||
|
<ns-view-list-table v-bind="notificationConfig" ref="mainRef" @switch="changeUse" />
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="2" tab="设备告警" force-render>
|
||||||
|
<ns-view-list-table v-show="equipmentAlarm" class="table" v-bind="equipmentAlarmConfig" />
|
||||||
|
<a-button
|
||||||
|
v-if="!equipmentAlarm"
|
||||||
|
type="primary"
|
||||||
|
style="position: absolute; right: 130px; z-index: 99; top: 75px"
|
||||||
|
@click="backequipmentAlarm"
|
||||||
|
>返回</a-button
|
||||||
|
>
|
||||||
|
<!-- 新增 或 编辑 设备告警 -->
|
||||||
|
<editeEquipmentAlarm ref="editEquipmentAlarm" @editObject="editObject" />
|
||||||
|
<!-- 配置设备告警-->
|
||||||
|
<configureDeviceAlarms v-show="!equipmentAlarm" ref="configureDeviceAlarms" />
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="3" tab="能源告警">
|
||||||
|
<energyAlarm class="full-height" />
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { notificationtableConfig } from './ts/notificationManagementConfig';
|
||||||
|
import { equipmentAlarmTableConfig } from './ts/equipmentAlarmConfig';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import energyAlarm from './components/energyAlarm.vue';
|
||||||
|
import editeEquipmentAlarm from './equipmentAlarm/editeEquipmentAlarm.vue';
|
||||||
|
import configureDeviceAlarms from './equipmentAlarm/configureDeviceAlarms.vue';
|
||||||
|
export default {
|
||||||
|
name: 'AlarmSettings',
|
||||||
|
components: { energyAlarm, editeEquipmentAlarm, configureDeviceAlarms },
|
||||||
|
setup() {
|
||||||
|
const mainRef = ref();
|
||||||
|
const editEquipmentAlarm = ref();
|
||||||
|
const configureDeviceAlarms = ref();
|
||||||
|
const equipmentAlarm = ref(true);
|
||||||
|
const notificationConfig = notificationtableConfig(null, null, null);
|
||||||
|
const equipmentAlarmConfig = equipmentAlarmTableConfig(
|
||||||
|
editEquipmentAlarm,
|
||||||
|
null,
|
||||||
|
equipmentAlarm,
|
||||||
|
configureDeviceAlarms,
|
||||||
|
);
|
||||||
|
const callback = (key: any) => {
|
||||||
|
console.log(key);
|
||||||
|
};
|
||||||
|
//返回设备告警
|
||||||
|
const backequipmentAlarm = () => {
|
||||||
|
equipmentAlarm.value = !equipmentAlarm.value;
|
||||||
|
configureDeviceAlarms.value.show = false;
|
||||||
|
};
|
||||||
|
const changeUse = () => {
|
||||||
|
console.log(mainRef.value);
|
||||||
|
mainRef.value?.nsTableRef.reload();
|
||||||
|
// console.log(newList.value.formFinish, '数据');
|
||||||
|
};
|
||||||
|
// 编辑或添加成功 刷新列表
|
||||||
|
const editObject = () => {
|
||||||
|
console.log('添加成功 刷新列表');
|
||||||
|
mainRef.value?.nsTableRef.reload();
|
||||||
|
// console.log(newList.value.formFinish, '数据');
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
callback,
|
||||||
|
notificationConfig,
|
||||||
|
equipmentAlarmConfig,
|
||||||
|
changeUse,
|
||||||
|
editObject,
|
||||||
|
editEquipmentAlarm,
|
||||||
|
configureDeviceAlarms,
|
||||||
|
equipmentAlarm,
|
||||||
|
backequipmentAlarm,
|
||||||
|
mainRef,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
/deep/ .ant-tabs-nav {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.full-height {
|
||||||
|
height: 100%; /* 设置高度为父容器高度 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
{
|
||||||
|
"listData":[
|
||||||
|
{
|
||||||
|
"id": "d4",
|
||||||
|
"isDel": "0",
|
||||||
|
"officesId": "84",
|
||||||
|
"deviceCode": "37430200143",
|
||||||
|
"deviceName": "地听测试电表",
|
||||||
|
"category": "1",
|
||||||
|
"type": "1001",
|
||||||
|
"energyCount": "1",
|
||||||
|
"serialNumber": "69",
|
||||||
|
"pidCode": null,
|
||||||
|
"brand": "",
|
||||||
|
"types": "",
|
||||||
|
"manufacturer": "elit non in",
|
||||||
|
"contacts": "ad reprehenderit",
|
||||||
|
"phonenumber": "34",
|
||||||
|
"position": "in esse commodo1",
|
||||||
|
"activeState": "1",
|
||||||
|
"measurementDirection": "1",
|
||||||
|
"deviceMagnification": 62,
|
||||||
|
"deviceAccuracy": "89",
|
||||||
|
"frequency": "anim consequat irure",
|
||||||
|
"standardFrequency": "ut elit",
|
||||||
|
"deviceHead": "pariatur ex velit",
|
||||||
|
"constructor": "84566",
|
||||||
|
"voltageType": "cillum aliquip reprehenderit",
|
||||||
|
"pt": 61,
|
||||||
|
"ct": 64,
|
||||||
|
"communicationProtocol": "cupidatat nisi ea ad",
|
||||||
|
"ip": "",
|
||||||
|
"port": "",
|
||||||
|
"com": "",
|
||||||
|
"slaveAddress": "",
|
||||||
|
"dlt": "",
|
||||||
|
"conversionIdentifier": "48",
|
||||||
|
"multiplicationAdjustment": "1",
|
||||||
|
"accessMethod": "1",
|
||||||
|
"replacementFrequency": "0",
|
||||||
|
"dataDetail": "sit",
|
||||||
|
"insertTime": null,
|
||||||
|
"children": null,
|
||||||
|
"devicePointList": null,
|
||||||
|
"insertUser": null,
|
||||||
|
"isUse":true
|
||||||
|
} , {
|
||||||
|
"id": "d5",
|
||||||
|
"isDel": "0",
|
||||||
|
"officesId": "84",
|
||||||
|
"deviceCode": "37430200143",
|
||||||
|
"deviceName": "地听测试电表",
|
||||||
|
"category": "1",
|
||||||
|
"type": "1001",
|
||||||
|
"energyCount": "1",
|
||||||
|
"serialNumber": "69",
|
||||||
|
"pidCode": null,
|
||||||
|
"brand": "",
|
||||||
|
"types": "",
|
||||||
|
"manufacturer": "elit non in",
|
||||||
|
"contacts": "ad reprehenderit",
|
||||||
|
"phonenumber": "34",
|
||||||
|
"position": "in esse commodo2",
|
||||||
|
"activeState": "1",
|
||||||
|
"measurementDirection": "1",
|
||||||
|
"deviceMagnification": 62,
|
||||||
|
"deviceAccuracy": "89",
|
||||||
|
"frequency": "anim consequat irure",
|
||||||
|
"standardFrequency": "ut elit",
|
||||||
|
"deviceHead": "pariatur ex velit",
|
||||||
|
"constructor": "84566",
|
||||||
|
"voltageType": "cillum aliquip reprehenderit",
|
||||||
|
"pt": 61,
|
||||||
|
"ct": 64,
|
||||||
|
"communicationProtocol": "cupidatat nisi ea ad",
|
||||||
|
"ip": "",
|
||||||
|
"port": "",
|
||||||
|
"com": "",
|
||||||
|
"slaveAddress": "",
|
||||||
|
"dlt": "",
|
||||||
|
"conversionIdentifier": "48",
|
||||||
|
"multiplicationAdjustment": "1",
|
||||||
|
"accessMethod": "1",
|
||||||
|
"replacementFrequency": "0",
|
||||||
|
"dataDetail": "sit",
|
||||||
|
"insertTime": null,
|
||||||
|
"children": null,
|
||||||
|
"devicePointList": null,
|
||||||
|
"insertUser": null,
|
||||||
|
"isUse":true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,204 @@
|
|||||||
|
import { dateUtil } from '/nerv-lib/util/date-util';
|
||||||
|
import data from '../notificationManagementMock.json';
|
||||||
|
import { http } from '/nerv-lib/util';
|
||||||
|
import { Modal } from 'ant-design-vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
const tableKeyMap = [
|
||||||
|
{
|
||||||
|
title: '序号',
|
||||||
|
dataIndex: 'address',
|
||||||
|
customRender: (text: any) => {
|
||||||
|
return text.index + 1;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '规则id',
|
||||||
|
dataIndex: 'id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备信心',
|
||||||
|
dataIndex: 'deviceCode',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '告警点位',
|
||||||
|
dataIndex: 'deviceName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '判断条件',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '取值类型',
|
||||||
|
dataIndex: 'position',
|
||||||
|
textEllipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '异常描述',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '启用通知',
|
||||||
|
dataIndex: 'isUse',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const mockData = ref(data.listData);
|
||||||
|
const doWnload = (url) => {
|
||||||
|
const a = document.createElement('a');
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.href = encodeURI(url);
|
||||||
|
//设置下载的文件名
|
||||||
|
// a.download = fileName.value;
|
||||||
|
//触发a标签的点击事件，进行下载
|
||||||
|
a.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
export const configureDeviceAlarms = (editEquipmentAlarm, elFormula, title) => {
|
||||||
|
return {
|
||||||
|
title: '告警规则',
|
||||||
|
// api: '/carbon_emission/device/getDeviceList',
|
||||||
|
value: mockData.value,
|
||||||
|
headerActions: [
|
||||||
|
{
|
||||||
|
label: '新增',
|
||||||
|
name: 'RoleTypeAdd',
|
||||||
|
type: 'primary',
|
||||||
|
handle: () => {
|
||||||
|
editEquipmentAlarm.value.toggle();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '导入',
|
||||||
|
name: 'groupImport',
|
||||||
|
type: 'primary',
|
||||||
|
extra: {
|
||||||
|
// api: props.postImportApi, // 导入接口名
|
||||||
|
title: '设备信息', // 弹窗title
|
||||||
|
templateName: 'whiteListUser', // 所使用的文件名称
|
||||||
|
indexName: '设备id', // 匹配类型字段
|
||||||
|
message: [
|
||||||
|
{ label: '1、若必填项未填写，则不能进行导入操作' },
|
||||||
|
{ label: `2、当重复时，则更新数据。` },
|
||||||
|
{ label: '3、数据将从模版的第五行进行导入。' },
|
||||||
|
{ label: '4、文件导入勿超过5MB。' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '导出',
|
||||||
|
name: 'groupExports',
|
||||||
|
type: 'primary',
|
||||||
|
handle: () => {
|
||||||
|
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '批量删除',
|
||||||
|
type: 'primary',
|
||||||
|
name: 'userBatchDel',
|
||||||
|
dynamicDisabled: (data: any) => {
|
||||||
|
return data.list.length === 0;
|
||||||
|
},
|
||||||
|
confirm: true,
|
||||||
|
isReload: true,
|
||||||
|
isClearCheck: true,
|
||||||
|
// api: origanizemanage.batchDel,
|
||||||
|
dynamicParams: { userIds: 'userId[]' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
columns: tableKeyMap,
|
||||||
|
params: {
|
||||||
|
page: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
// rowSelection: null, 选择按钮
|
||||||
|
columnActions: {
|
||||||
|
title: '操作',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
name: 'FeedBackDetail',
|
||||||
|
dynamicParams: ['uuid', 'appealType'],
|
||||||
|
handle: (data: any) => {
|
||||||
|
editEquipmentAlarm.value.toggle(data);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
name: 'FeedBackDetail',
|
||||||
|
dynamicParams: ['uuid', 'appealType'],
|
||||||
|
confirm: true,
|
||||||
|
handle: () => {
|
||||||
|
// mockData.value.splice(0, 1);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
formConfig: {
|
||||||
|
title: title,
|
||||||
|
schemas: [
|
||||||
|
{
|
||||||
|
field: 'provider',
|
||||||
|
label: '告警优先级',
|
||||||
|
component: 'NsSelect',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择告警优先级',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '全部',
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '启用',
|
||||||
|
value: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '关闭',
|
||||||
|
value: '0',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'provider',
|
||||||
|
label: '告警标题',
|
||||||
|
component: 'NsInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入告警标题关键字',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'provider',
|
||||||
|
label: '告警标题',
|
||||||
|
component: 'NsInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入告警标题关键字',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'payWay',
|
||||||
|
label: '启用状态',
|
||||||
|
component: 'NsSelect',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择启用状态',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '全部',
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '启用',
|
||||||
|
value: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '关闭',
|
||||||
|
value: '0',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// pagination: { pageSizeOptions: false },
|
||||||
|
rowKey: 'id',
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,205 @@
|
|||||||
|
import { dateUtil } from '/nerv-lib/util/date-util';
|
||||||
|
import data from '../notificationManagementMock.json';
|
||||||
|
import { http } from '/nerv-lib/util';
|
||||||
|
import { Modal } from 'ant-design-vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
const tableKeyMap = [
|
||||||
|
{
|
||||||
|
title: '序号',
|
||||||
|
dataIndex: 'address',
|
||||||
|
customRender: (text: any) => {
|
||||||
|
return text.index + 1;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '优先级',
|
||||||
|
dataIndex: 'id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '告警类型',
|
||||||
|
dataIndex: 'deviceCode',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '告警标题',
|
||||||
|
dataIndex: 'deviceName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '错误码',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '重复次数',
|
||||||
|
dataIndex: 'position',
|
||||||
|
textEllipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '监测时长',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '启用通知',
|
||||||
|
dataIndex: 'isUse',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const mockData = ref(data.listData);
|
||||||
|
const doWnload = (url) => {
|
||||||
|
const a = document.createElement('a');
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.href = encodeURI(url);
|
||||||
|
//设置下载的文件名
|
||||||
|
// a.download = fileName.value;
|
||||||
|
//触发a标签的点击事件，进行下载
|
||||||
|
a.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
export const equipmentAlarmTableConfig = (
|
||||||
|
editEquipmentAlarm,
|
||||||
|
elFormula,
|
||||||
|
equipmentAlarm,
|
||||||
|
configureDeviceAlarms,
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
title: '告警规则',
|
||||||
|
// api: '/carbon_emission/device/getDeviceList',
|
||||||
|
value: mockData.value,
|
||||||
|
headerActions: [
|
||||||
|
{
|
||||||
|
label: '新增',
|
||||||
|
name: 'RoleTypeAdd',
|
||||||
|
type: 'primary',
|
||||||
|
handle: () => {
|
||||||
|
editEquipmentAlarm.value.toggle();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '导入',
|
||||||
|
name: 'groupImport',
|
||||||
|
type: 'primary',
|
||||||
|
extra: {
|
||||||
|
// api: props.postImportApi, // 导入接口名
|
||||||
|
title: '设备信息', // 弹窗title
|
||||||
|
templateName: 'whiteListUser', // 所使用的文件名称
|
||||||
|
indexName: '设备id', // 匹配类型字段
|
||||||
|
message: [
|
||||||
|
{ label: '1、若必填项未填写，则不能进行导入操作' },
|
||||||
|
{ label: `2、当重复时，则更新数据。` },
|
||||||
|
{ label: '3、数据将从模版的第五行进行导入。' },
|
||||||
|
{ label: '4、文件导入勿超过5MB。' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '导出',
|
||||||
|
name: 'groupExports',
|
||||||
|
type: 'primary',
|
||||||
|
handle: () => {
|
||||||
|
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
columns: tableKeyMap,
|
||||||
|
params: {
|
||||||
|
page: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
// rowSelection: null, 选择按钮
|
||||||
|
columnActions: {
|
||||||
|
title: '操作',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
name: 'FeedBackDetail',
|
||||||
|
dynamicParams: ['uuid', 'appealType'],
|
||||||
|
handle: (data: any) => {
|
||||||
|
editEquipmentAlarm.value.toggle(data);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '配置',
|
||||||
|
name: 'FeedBackDetail',
|
||||||
|
dynamicParams: ['uuid', 'appealType'],
|
||||||
|
handle: (data: any) => {
|
||||||
|
equipmentAlarm.value = !equipmentAlarm.value;
|
||||||
|
configureDeviceAlarms.value.setconfigureDeviceAlarmsData(data);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
name: 'FeedBackDetail',
|
||||||
|
dynamicParams: ['uuid', 'appealType'],
|
||||||
|
confirm: true,
|
||||||
|
handle: () => {
|
||||||
|
// mockData.value.splice(0, 1);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
formConfig: {
|
||||||
|
schemas: [
|
||||||
|
{
|
||||||
|
field: 'provider',
|
||||||
|
label: '告警优先级',
|
||||||
|
component: 'NsSelect',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择告警优先级',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '全部',
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '启用',
|
||||||
|
value: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '关闭',
|
||||||
|
value: '0',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'provider',
|
||||||
|
label: '告警标题',
|
||||||
|
component: 'NsInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入告警标题关键字',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'provider',
|
||||||
|
label: '告警标题',
|
||||||
|
component: 'NsInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入告警标题关键字',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'payWay',
|
||||||
|
label: '启用状态',
|
||||||
|
component: 'NsSelect',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择启用状态',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '全部',
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '启用',
|
||||||
|
value: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '关闭',
|
||||||
|
value: '0',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// pagination: { pageSizeOptions: false },
|
||||||
|
rowKey: 'id',
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,164 @@
|
|||||||
|
import { dateUtil } from '/nerv-lib/util/date-util';
|
||||||
|
import data from '../notificationManagementMock.json';
|
||||||
|
import { http } from '/nerv-lib/util';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
const tableKeyMap = [
|
||||||
|
{
|
||||||
|
title: '序号',
|
||||||
|
dataIndex: 'address',
|
||||||
|
customRender: (text: any) => {
|
||||||
|
return text.index + 1;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '优先级',
|
||||||
|
dataIndex: 'id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '告警类型',
|
||||||
|
dataIndex: 'deviceCode',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '告警标题',
|
||||||
|
dataIndex: 'deviceName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '错误码',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '通知名单',
|
||||||
|
dataIndex: 'position',
|
||||||
|
textEllipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '通知方式',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '启用通知',
|
||||||
|
dataIndex: 'isUse',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const mockData = ref(data.listData);
|
||||||
|
export const notificationtableConfig = (el, elGroup, elFormula) => {
|
||||||
|
return {
|
||||||
|
title: '告警规则',
|
||||||
|
// api: '/carbon_emission/device/getDeviceList',
|
||||||
|
value: mockData.value,
|
||||||
|
headerActions: [{}],
|
||||||
|
columns: tableKeyMap,
|
||||||
|
params: {
|
||||||
|
page: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
// rowSelection: null, 选择按钮
|
||||||
|
columnActions: {
|
||||||
|
title: '操作',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '联系方式',
|
||||||
|
name: 'FeedBackDetail',
|
||||||
|
dynamicParams: ['uuid', 'appealType'],
|
||||||
|
handle: (data: any) => {
|
||||||
|
console.log(data, '联系方式');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// label: '删除',
|
||||||
|
// name: 'FeedBackDetail',
|
||||||
|
// dynamicParams: ['uuid', 'appealType'],
|
||||||
|
// confirm: true,
|
||||||
|
// handle: () => {
|
||||||
|
// mockData.value.splice(0, 1);
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
formConfig: {
|
||||||
|
schemas: [
|
||||||
|
{
|
||||||
|
field: 'name',
|
||||||
|
label: '告警类型',
|
||||||
|
component: 'NsSelect',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选告警类型',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '启用',
|
||||||
|
value: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '关闭',
|
||||||
|
value: '0',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'provider',
|
||||||
|
label: '告警优先级',
|
||||||
|
component: 'NsSelect',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择告警优先级',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '全部',
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '启用',
|
||||||
|
value: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '关闭',
|
||||||
|
value: '0',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'provider',
|
||||||
|
label: '告警标题',
|
||||||
|
component: 'NsInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入告警标题关键字',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'provider',
|
||||||
|
label: '告警标题',
|
||||||
|
component: 'NsInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入告警标题关键字',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'payWay',
|
||||||
|
label: '启用状态',
|
||||||
|
component: 'NsSelect',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择启用状态',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '全部',
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '启用',
|
||||||
|
value: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '关闭',
|
||||||
|
value: '0',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// pagination: { pageSizeOptions: false },
|
||||||
|
rowKey: 'id',
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,159 @@
|
|||||||
|
// 页面容器
|
||||||
|
.lighting-box {
|
||||||
|
// width: 100%;
|
||||||
|
// height: 100%;
|
||||||
|
position: relative;
|
||||||
|
// background: linear-gradient(#badaff, #8cabeb, #7095de);
|
||||||
|
.drawer-box {
|
||||||
|
width: 30px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 2px;
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
background: rgba(0, 0 ,0 ,0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
.drawer-icon {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 照明设备功能总容器
|
||||||
|
.lighting-img-box {
|
||||||
|
position: relative;
|
||||||
|
width: 1280px;
|
||||||
|
height: 720px;
|
||||||
|
user-select: none;
|
||||||
|
background-image: url(../image/bg.jpg);
|
||||||
|
// 由于背景是俯视图，会产生有交点的透视效果，故使用透视属性
|
||||||
|
perspective: 1000px;
|
||||||
|
perspective-origin: 850px -160px;
|
||||||
|
// 左上角区域切换功能
|
||||||
|
.btn-box {
|
||||||
|
width: 120px;
|
||||||
|
position: sticky;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
.btn-item {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgba(39, 120, 255, 1);
|
||||||
|
border: 1px solid rgba(51, 199, 255, 1);
|
||||||
|
box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
|
||||||
|
font-size: 18px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.btn-item:hover {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 大区分区
|
||||||
|
.area{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 170px;
|
||||||
|
left: 240px;
|
||||||
|
width: 780px;
|
||||||
|
height: 240px;
|
||||||
|
transform: rotateX(79deg) rotateZ(-22deg) skew(29deg);
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
.area1 {
|
||||||
|
width: 170px;
|
||||||
|
background: rgba(0, 251, 91, 0.3);
|
||||||
|
border: 2px solid rgb(0, 251, 91);
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.area2 {
|
||||||
|
width: 240px;
|
||||||
|
background: rgba(255, 165, 0, 0.3);
|
||||||
|
border: 2px solid rgb(255, 165, 0);
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.area3 {
|
||||||
|
width: 110px;
|
||||||
|
background: rgba(255, 0, 0, 0.3);
|
||||||
|
border: 2px solid rgb(255, 0, 0);
|
||||||
|
}
|
||||||
|
.area4 {
|
||||||
|
flex: 1;
|
||||||
|
background: rgba(80, 236, 244, 0.3);
|
||||||
|
border: 2px solid rgb(80, 236, 244);
|
||||||
|
}
|
||||||
|
.area-item:hover {
|
||||||
|
border:2px solid white;
|
||||||
|
}
|
||||||
|
.area-item {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all ease 0.2s;
|
||||||
|
>.light-group {
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
display:flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.group-shadow1 {
|
||||||
|
width: 35px;
|
||||||
|
height: 150px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.group-shadow2 {
|
||||||
|
width: 35px;
|
||||||
|
height: 180px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.group-shadow3 {
|
||||||
|
width: 40px;
|
||||||
|
height: 180px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.group-shadow4 {
|
||||||
|
width: 40px;
|
||||||
|
height: 160px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.group-shadow {
|
||||||
|
transition: all ease 0.2s;
|
||||||
|
}
|
||||||
|
.group-shadow:hover {
|
||||||
|
border: 2px solid white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ns-content-main {
|
||||||
|
position: relative;
|
||||||
|
// 抽屉伸缩按钮
|
||||||
|
.drawer-box {
|
||||||
|
width: 30px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 2px;
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
background: rgba(0, 0 ,0 ,0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
.drawer-icon {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
180
hx-ai-intelligent/src/view/monitor/deviceMonitor/config.ts
Normal file
180
hx-ai-intelligent/src/view/monitor/deviceMonitor/config.ts
Normal file
@@ -0,0 +1,180 @@
|
|||||||
|
import { dateUtil } from '/nerv-lib/util/date-util';
|
||||||
|
import data from './mock.json';
|
||||||
|
export const tableConfig = {
|
||||||
|
title: '设备台账',
|
||||||
|
// api: '/carbon_emission/device/getDeviceList',
|
||||||
|
value: data.dataSource,
|
||||||
|
treeConfig: {
|
||||||
|
header: {
|
||||||
|
icon: 'orgLink',
|
||||||
|
title: '设备类别',
|
||||||
|
},
|
||||||
|
defaultExpandAll: true,
|
||||||
|
api: () => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve(data);
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
formConfig: {
|
||||||
|
schemas: [
|
||||||
|
{
|
||||||
|
field: 'name',
|
||||||
|
label: '设备名称',
|
||||||
|
component: 'NsInput',
|
||||||
|
autoSubmit: true,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
params: {
|
||||||
|
page: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
rowSelection: null,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: '设备名称',
|
||||||
|
dataIndex: 'id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备型号',
|
||||||
|
dataIndex: 'deviceCode',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'SN码',
|
||||||
|
dataIndex: 'deviceName',
|
||||||
|
textNumber: 8,
|
||||||
|
textEllipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备一级区域',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备二级区域',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备详细位置',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备规格',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备厂商纳税人识别号',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '厂商联系人',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备描述',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'IP地址',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '生产日期',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '采购日期',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '启用日期',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备成本（元）',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '使用期限',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '额定功率',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '特殊参数',
|
||||||
|
dataIndex: 'position',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
formConfig: {
|
||||||
|
schemas: [
|
||||||
|
{
|
||||||
|
field: 'name',
|
||||||
|
label: '设备名称',
|
||||||
|
component: 'NsInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'provider',
|
||||||
|
label: '设备厂商',
|
||||||
|
component: 'NsInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'payWay',
|
||||||
|
label: '设备区域',
|
||||||
|
component: 'NsSelect',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '全部',
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'createTime',
|
||||||
|
label: '生产日期',
|
||||||
|
component: 'NsRangePicker',
|
||||||
|
fieldMap: ['queryStartDate', 'queryEndDate'],
|
||||||
|
componentProps: {
|
||||||
|
valueFormat: 'YYYY-MM-DD',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'createTime1',
|
||||||
|
label: '采购日期',
|
||||||
|
component: 'NsRangePicker',
|
||||||
|
fieldMap: ['queryStartDate', 'queryEndDate'],
|
||||||
|
componentProps: {
|
||||||
|
valueFormat: 'YYYY-MM-DD',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'createTime2',
|
||||||
|
label: '启用日期',
|
||||||
|
component: 'NsRangePicker',
|
||||||
|
fieldMap: ['queryStartDate', 'queryEndDate'],
|
||||||
|
componentProps: {
|
||||||
|
valueFormat: 'YYYY-MM-DD',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
params: {},
|
||||||
|
},
|
||||||
|
// pagination: { pageSizeOptions: false },
|
||||||
|
rowKey: 'uuid',
|
||||||
|
};
|
||||||
210
hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
Normal file
210
hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
Normal file
@@ -0,0 +1,210 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<div ref="chart" style="width: 100%; height: 80%;"></div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, onMounted, ref, watch } from 'vue';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
date: '2023-12-01 0:00',
|
||||||
|
unit: 'V',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'AC_002（暖通电表）',
|
||||||
|
value: '21'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_003（照明电表）',
|
||||||
|
value: '36'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_004（给排水电表）',
|
||||||
|
value: '5'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2023-12-02 0:00',
|
||||||
|
unit: 'V',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'AC_002（暖通电表）',
|
||||||
|
value: '26'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_003（照明电表）',
|
||||||
|
value: '25'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_004（给排水电表）',
|
||||||
|
value: '47'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2023-12-03 0:00',
|
||||||
|
unit: 'V',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'AC_002（暖通电表）',
|
||||||
|
value: '18'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_003（照明电表）',
|
||||||
|
value: '22'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_004（给排水电表）',
|
||||||
|
value: '26'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2023-12-04 0:00',
|
||||||
|
unit: 'V',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'AC_002（暖通电表）',
|
||||||
|
value: '40'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_003（照明电表）',
|
||||||
|
value: '15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_004（给排水电表）',
|
||||||
|
value: '12'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2023-12-05 0:00',
|
||||||
|
unit: 'V',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'AC_002（暖通电表）',
|
||||||
|
value: '15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_003（照明电表）',
|
||||||
|
value: '18'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_004（给排水电表）',
|
||||||
|
value: '15'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Graph',
|
||||||
|
setup() {
|
||||||
|
const chart = ref(null);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
|
||||||
|
var seriesList = []
|
||||||
|
var date = []
|
||||||
|
var legendList: string|any[] = []
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
|
||||||
|
date.push(data[i].date)
|
||||||
|
|
||||||
|
for (let j = 0; j < data[i].data.length; j++) {
|
||||||
|
if (seriesList.length < j + 1) {
|
||||||
|
seriesList.push(
|
||||||
|
{
|
||||||
|
name: data[i].data[j].name,
|
||||||
|
data: [data[i].data[j].value],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
seriesList[j].data.push(data[i].data[j].value)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (legendList.length == 0 || legendList.length < j + 1) {
|
||||||
|
legendList.push(data[i].data[j].name)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
|
||||||
|
|
||||||
|
legend: {
|
||||||
|
data: legendList,
|
||||||
|
orient: 'horizontal',
|
||||||
|
bottom: 30
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: (params: any) => {
|
||||||
|
const date = params[0].name;
|
||||||
|
const values = params.map((param: any) => {
|
||||||
|
const unit = data.find(d => d.date === date)?.unit || '';
|
||||||
|
return `<tr>
|
||||||
|
<td>${param.marker}${param.seriesName}</td>
|
||||||
|
<td style="text-align: right;">${param.value} ${unit}</td>
|
||||||
|
</tr>`;
|
||||||
|
}).join('');
|
||||||
|
return `<div>${date}</div><table style="width: 100%;">${values}</table>`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: date
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
dataZoom: [
|
||||||
|
// {
|
||||||
|
// type: 'inside',
|
||||||
|
// start: 0,
|
||||||
|
// end: 10
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
height: 10,
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
handleSize: '300%', // 设置滑块的大小
|
||||||
|
bottom: 15,
|
||||||
|
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: seriesList
|
||||||
|
// series: [
|
||||||
|
|
||||||
|
// {
|
||||||
|
// data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||||
|
// type: 'line'
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
};
|
||||||
|
|
||||||
|
const chartInstance = echarts.init(chart.value);
|
||||||
|
chartInstance.setOption(option);
|
||||||
|
});
|
||||||
|
|
||||||
|
return { chart };
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
76
hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue
Normal file
76
hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
<template>
|
||||||
|
<a-row type="flex">
|
||||||
|
<a-col :span="4">
|
||||||
|
<div style="padding: 0 20px; width: 100%; height: 100%;">
|
||||||
|
<tree ref="treeRef"></tree>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="20">
|
||||||
|
<div style="width: 100%; height: 100%;">
|
||||||
|
<div class="ns-right-title">
|
||||||
|
<span>历史数据</span>
|
||||||
|
<div class="button">
|
||||||
|
<ns-icon name="biaoge" size="18" style="margin-right: 10px;"/>
|
||||||
|
<ns-icon :name="iconName" size="18" style="margin-right: 10px;" @click="change"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<graph ref="graphRef" v-if="isGraph"></graph>
|
||||||
|
<environment-table ref="tableRef" v-else></environment-table>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import tree from './tree/index.vue';
|
||||||
|
import graph from './graph/index.vue';
|
||||||
|
import environmentTable from './table/index.vue';
|
||||||
|
|
||||||
|
const iconName = ref('biaoge');
|
||||||
|
|
||||||
|
const treeRef = ref();
|
||||||
|
const graphRef = ref();
|
||||||
|
const tableRef = ref();
|
||||||
|
|
||||||
|
let isGraph = ref(true)
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
|
||||||
|
});
|
||||||
|
|
||||||
|
function change() {
|
||||||
|
|
||||||
|
isGraph.value = !isGraph.value
|
||||||
|
if (iconName.value == 'biaoge') {
|
||||||
|
iconName.value = 'bingtu'
|
||||||
|
} else {
|
||||||
|
iconName.value = 'biaoge'
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.ns-right-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
user-select: text;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
border-bottom: 1px solid #e9e9e9;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
padding-left: 10px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
display: inline-block;
|
||||||
|
padding-right: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
186
hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
Normal file
186
hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
Normal file
@@ -0,0 +1,186 @@
|
|||||||
|
<template>
|
||||||
|
<a-table :columns="columns" :data-source="data" bordered />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import type { TableColumnType } from 'ant-design-vue';
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
name: 'AC_002（暖通电表）',
|
||||||
|
position: 'A 相电压',
|
||||||
|
unit: 'V',
|
||||||
|
date: '2023-12-01',
|
||||||
|
'1:00': '3626',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
name: 'AC_002（暖通电表）',
|
||||||
|
position: 'A 相电压',
|
||||||
|
unit: 'V',
|
||||||
|
date: '2023-12-01',
|
||||||
|
'1:00': '3626',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
name: 'AC_003（照明电表）',
|
||||||
|
position: 'A 相电压',
|
||||||
|
unit: 'V',
|
||||||
|
date: '2023-12-01',
|
||||||
|
'1:00': '3626',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
name: 'AC_003（照明电表）',
|
||||||
|
position: 'A 相电压',
|
||||||
|
unit: 'V',
|
||||||
|
date: '2023-12-01',
|
||||||
|
'1:00': '3626',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3',
|
||||||
|
name: 'AC_004（给排水电表）',
|
||||||
|
position: 'A 相电压',
|
||||||
|
unit: 'V',
|
||||||
|
date: '2023-12-01',
|
||||||
|
'1:00': '3626',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'EnvironmentTable',
|
||||||
|
setup() {
|
||||||
|
const getRowSpan = (dataIndex: string, record, data, dependents: string[] = []) => {
|
||||||
|
let rowSpan = 1;
|
||||||
|
for (let i = data.indexOf(record) + 1; i < data.length; i++) {
|
||||||
|
let shouldMerge = true;
|
||||||
|
for (const dependent of dependents) {
|
||||||
|
if (data[i][dependent] !== record[dependent]) {
|
||||||
|
shouldMerge = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (shouldMerge && data[i][dataIndex] === record[dataIndex]) {
|
||||||
|
rowSpan++;
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return rowSpan;
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns: TableColumnType[] = [
|
||||||
|
{
|
||||||
|
title: '序号',
|
||||||
|
dataIndex: 'key',
|
||||||
|
customCell: (record, rowIndex) => {
|
||||||
|
const rowSpan = getRowSpan('name', record, data);
|
||||||
|
if (rowIndex != 0 && data[rowIndex-1].key == record.key) {
|
||||||
|
return {
|
||||||
|
rowSpan: 0,
|
||||||
|
colSpan: 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
rowSpan: rowSpan,
|
||||||
|
};
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
customCell: (record, rowIndex) => {
|
||||||
|
const rowSpan = getRowSpan('name', record, data);
|
||||||
|
if (rowIndex != 0 && data[rowIndex-1].name == record.name) {
|
||||||
|
return {
|
||||||
|
rowSpan: 0,
|
||||||
|
colSpan: 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
rowSpan: rowSpan,
|
||||||
|
};
|
||||||
|
|
||||||
|
// if (rowIndex === data.indexOf(record)) {
|
||||||
|
// return {
|
||||||
|
// rowSpan: rowSpan,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// return {
|
||||||
|
// rowSpan: 0,
|
||||||
|
// colSpan: 0,
|
||||||
|
// };
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备点位',
|
||||||
|
dataIndex: 'position',
|
||||||
|
customCell: (record, rowIndex) => {
|
||||||
|
const rowSpan = getRowSpan('position', record, data, ['name']);
|
||||||
|
if (rowIndex != 0 && data[rowIndex-1].name == record.name && data[rowIndex-1].position == record.position) {
|
||||||
|
return {
|
||||||
|
rowSpan: 0,
|
||||||
|
colSpan: 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
rowSpan: rowSpan,
|
||||||
|
};
|
||||||
|
// if (rowIndex === data.indexOf(record)) {
|
||||||
|
// return {
|
||||||
|
// rowSpan: rowSpan,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// return {
|
||||||
|
// rowSpan: 0,
|
||||||
|
// colSpan: 0,
|
||||||
|
// };
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '计量单位',
|
||||||
|
dataIndex: 'unit',
|
||||||
|
customCell: (record, rowIndex) => {
|
||||||
|
const rowSpan = getRowSpan('unit', record, data, ['name', 'position']);
|
||||||
|
if (rowIndex != 0 && data[rowIndex-1].name == record.name && data[rowIndex-1].position == record.position && data[rowIndex-1].unit == record.unit) {
|
||||||
|
return {
|
||||||
|
rowSpan: 0,
|
||||||
|
colSpan: 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
rowSpan: rowSpan,
|
||||||
|
};
|
||||||
|
// if (rowIndex === data.indexOf(record)) {
|
||||||
|
// return {
|
||||||
|
// rowSpan: rowSpan,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// return {
|
||||||
|
// rowSpan: 0,
|
||||||
|
// colSpan: 0,
|
||||||
|
// };
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '日期',
|
||||||
|
dataIndex: 'date',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '1:00',
|
||||||
|
dataIndex: '1:00',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return {
|
||||||
|
data,
|
||||||
|
columns,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
225
hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
Normal file
225
hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
Normal file
@@ -0,0 +1,225 @@
|
|||||||
|
<template>
|
||||||
|
<div class="parent-container">
|
||||||
|
<div class="ns-tree-title">
|
||||||
|
<span>设备列表</span>
|
||||||
|
</div>
|
||||||
|
<a-tree-select
|
||||||
|
v-model:value="value"
|
||||||
|
style="width: 100%"
|
||||||
|
|
||||||
|
:tree-line="treeLine && { showLeafIcon }"
|
||||||
|
:tree-data="treeData1"
|
||||||
|
>
|
||||||
|
<!-- <template #title="{ value: val, title }">
|
||||||
|
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
|
||||||
|
<template v-else>{{ title }}</template>
|
||||||
|
</template> -->
|
||||||
|
</a-tree-select>
|
||||||
|
|
||||||
|
<a-tree
|
||||||
|
v-model:expandedKeys="expandedKeys"
|
||||||
|
v-model:selectedKeys="selectedKeys"
|
||||||
|
v-model:checkedKeys="checkedKeys"
|
||||||
|
checkable
|
||||||
|
style="width: 100%; margin-bottom: 10px;"
|
||||||
|
:tree-data="treeData2"
|
||||||
|
>
|
||||||
|
<!-- <template #title="{ title, key }">
|
||||||
|
<span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
|
||||||
|
<template v-else>{{ title }}</template>
|
||||||
|
</template> -->
|
||||||
|
</a-tree>
|
||||||
|
|
||||||
|
<div class="fixed-bottom">
|
||||||
|
<a-divider />
|
||||||
|
<a-select
|
||||||
|
ref="select"
|
||||||
|
v-model:value="selectedValue"
|
||||||
|
placeholder="请选择点位"
|
||||||
|
style="width: 100%; margin-bottom: 10px;"
|
||||||
|
:options="options1"
|
||||||
|
></a-select>
|
||||||
|
<a-select
|
||||||
|
v-model:value="frequencyValue"
|
||||||
|
placeholder="请选择频率"
|
||||||
|
style="width: 100%; margin-bottom: 10px;"
|
||||||
|
:options="options2"
|
||||||
|
></a-select>
|
||||||
|
<a-range-picker v-model:value="dateRange" style="width: 100%; margin-bottom: 10px;" :placeholder="['请选择日期','请选择日期']"/>
|
||||||
|
<a-button type="primary" style="width: 100%; margin-bottom: 10px;" @click="getDianWeiList">查询</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
|
||||||
|
import { defineComponent, ref, watch ,onMounted } from 'vue';
|
||||||
|
import dayjs, { Dayjs } from 'dayjs';
|
||||||
|
|
||||||
|
const treeData2: TreeProps['treeData'] = [
|
||||||
|
{
|
||||||
|
title: 'AC_001(总电表)',
|
||||||
|
key: '1',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: 'AC_002(暖通电表)',
|
||||||
|
key: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'AC_003(照明电表)',
|
||||||
|
key: '3',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'AC_004(给排水电表)',
|
||||||
|
key: '4',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'AC_005(通风电表)',
|
||||||
|
key: '5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'AC_006(电动门电表)',
|
||||||
|
key: '6',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Tree',
|
||||||
|
setup() {
|
||||||
|
const treeLine = ref(true);
|
||||||
|
const showLeafIcon = ref(false);
|
||||||
|
const value = ref<string>();
|
||||||
|
|
||||||
|
const treeData1 = ref<TreeSelectProps['treeData']>([
|
||||||
|
{
|
||||||
|
title: '3.电梯',
|
||||||
|
value: '3',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: '301.扶梯',
|
||||||
|
value: '301',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '302.直梯',
|
||||||
|
value: '302',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '4.冷热源',
|
||||||
|
value: '4',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: '401.冷水机组',
|
||||||
|
value: '401',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '402.热泵机组',
|
||||||
|
value: '402',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '403.锅炉',
|
||||||
|
value: '403',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '404.水处理机组',
|
||||||
|
value: '404',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
||||||
|
const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
||||||
|
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
||||||
|
|
||||||
|
const options1 = ref<SelectProps['options']>([]);
|
||||||
|
const options2 = ref<SelectProps['options']>([
|
||||||
|
{
|
||||||
|
value: '1',
|
||||||
|
label: '5分钟',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '2',
|
||||||
|
label: '10分钟',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '3',
|
||||||
|
label: '30分钟',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '4',
|
||||||
|
label: '1小时',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const selectedValue = ref<string | undefined>();
|
||||||
|
const frequencyValue = ref<string | undefined>();
|
||||||
|
const dateRange = ref<[Dayjs, Dayjs] | undefined>();
|
||||||
|
|
||||||
|
const getDianWeiList = () => {
|
||||||
|
console.log('getDianWeiList 被调用');
|
||||||
|
options1.value = [
|
||||||
|
{ value: '1', label: 'A 项电压' },
|
||||||
|
{ value: '2', label: 'B 项电压' },
|
||||||
|
{ value: '3', label: 'C 项电压' },
|
||||||
|
{ value: '4', label: 'AB 线电压' },
|
||||||
|
{ value: '5', label: 'BC 线电压' },
|
||||||
|
{ value: '6', label: 'A 项电流' },
|
||||||
|
{ value: '7', label: 'B 项电流' },
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getDianWeiList();
|
||||||
|
});
|
||||||
|
|
||||||
|
const dateFormat = 'YYYY-MM-DD';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
treeLine,
|
||||||
|
showLeafIcon,
|
||||||
|
value,
|
||||||
|
treeData1,
|
||||||
|
treeData2,
|
||||||
|
expandedKeys,
|
||||||
|
selectedKeys,
|
||||||
|
checkedKeys,
|
||||||
|
options1,
|
||||||
|
options2,
|
||||||
|
selectedValue,
|
||||||
|
frequencyValue,
|
||||||
|
dateRange,
|
||||||
|
getDianWeiList,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.ns-tree-title {
|
||||||
|
user-select: text;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
border-bottom: 1px solid #e9e9e9;
|
||||||
|
> span {
|
||||||
|
padding-left: 10px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.parent-container {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
ref="formElRef"
|
ref="formElRef"
|
||||||
:model="formModel">
|
:model="formModel">
|
||||||
<div v-if="showAction && showExpandAll" class="ns-form-title ns-title-extra-box">
|
<div v-if="showAction && showExpandAll" class="ns-form-title ns-title-extra-box">
|
||||||
<span>查询</span>
|
<span> {{ title ? title : '查询' }}</span>
|
||||||
<a-button type="link" class="ns-operate-expand" @click="expandAll = !expandAll">
|
<a-button type="link" class="ns-operate-expand" @click="expandAll = !expandAll">
|
||||||
<template v-if="expandAll">
|
<template v-if="expandAll">
|
||||||
收起筛选
|
收起筛选
|
||||||
@@ -107,6 +107,7 @@
|
|||||||
const isInitDefaultValueRef = ref(false);
|
const isInitDefaultValueRef = ref(false);
|
||||||
const expandRef = ref(props.expand);
|
const expandRef = ref(props.expand);
|
||||||
const expandAll = ref(props.expandAll);
|
const expandAll = ref(props.expandAll);
|
||||||
|
const title = ref(props.title);
|
||||||
const formModel = computed(() => {
|
const formModel = computed(() => {
|
||||||
return props.model;
|
return props.model;
|
||||||
});
|
});
|
||||||
@@ -315,6 +316,7 @@
|
|||||||
splitNumber,
|
splitNumber,
|
||||||
finish,
|
finish,
|
||||||
expandAll,
|
expandAll,
|
||||||
|
title,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -18,4 +18,5 @@ export const formProps = {
|
|||||||
// 收起全部
|
// 收起全部
|
||||||
expandAll: PropTypes.bool.def(true), // 默认是否全部展开
|
expandAll: PropTypes.bool.def(true), // 默认是否全部展开
|
||||||
showExpandAll: PropTypes.bool.def(true), // 是否展示右上角的全部收起展开
|
showExpandAll: PropTypes.bool.def(true), // 是否展示右上角的全部收起展开
|
||||||
|
title: PropTypes.bool.def(false), // 是否展示右上角的全部收起展开
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -30,6 +30,7 @@
|
|||||||
:expand="expand"
|
:expand="expand"
|
||||||
:showExpand="showExpand"
|
:showExpand="showExpand"
|
||||||
:expandAll="expandAll"
|
:expandAll="expandAll"
|
||||||
|
:title="formConfig.title"
|
||||||
:showExpandAll="showExpandAll"
|
:showExpandAll="showExpandAll"
|
||||||
:model="formModel"
|
:model="formModel"
|
||||||
@finish="formFinish" />
|
@finish="formFinish" />
|
||||||
@@ -140,6 +141,16 @@
|
|||||||
<span class="text-ellipsis" v-else> - </span>
|
<span class="text-ellipsis" v-else> - </span>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
<!-- 添加关闭按钮 -->
|
||||||
|
<template v-if="data.column.dataIndex === 'isUse'">
|
||||||
|
<a-switch
|
||||||
|
v-model:checked="data.record.isUse"
|
||||||
|
:class="{
|
||||||
|
'blue-background': data.record.isUse,
|
||||||
|
'grey-background': !data.record.isUse,
|
||||||
|
}"
|
||||||
|
@click="clickSwitch({ isUse: data.record.isUse, record: data.record })" />
|
||||||
|
</template>
|
||||||
<template v-if="data.column.dataIndex === 'tableAction'">
|
<template v-if="data.column.dataIndex === 'tableAction'">
|
||||||
<ns-table-action
|
<ns-table-action
|
||||||
:data="data.record"
|
:data="data.record"
|
||||||
@@ -349,6 +360,10 @@
|
|||||||
page: 1,
|
page: 1,
|
||||||
});
|
});
|
||||||
}, 300);
|
}, 300);
|
||||||
|
/* 点击开关按钮 */
|
||||||
|
const clickSwitch = (data: object) => {
|
||||||
|
emit('switch', data);
|
||||||
|
};
|
||||||
|
|
||||||
function setLoading(loading: boolean) {
|
function setLoading(loading: boolean) {
|
||||||
tableState.loading = loading;
|
tableState.loading = loading;
|
||||||
@@ -632,6 +647,7 @@
|
|||||||
tableState,
|
tableState,
|
||||||
isEmpty,
|
isEmpty,
|
||||||
formFinish,
|
formFinish,
|
||||||
|
clickSwitch,
|
||||||
tableChangeEvent,
|
tableChangeEvent,
|
||||||
treeSelect,
|
treeSelect,
|
||||||
getTreeBindValue,
|
getTreeBindValue,
|
||||||
@@ -746,4 +762,27 @@
|
|||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.blue-background.ant-switch-checked {
|
||||||
|
background-color: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(1, 206, 255, 1) 0%,
|
||||||
|
rgba(0, 150, 229, 1) 100%
|
||||||
|
) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey-background.ant-switch {
|
||||||
|
background-color: grey !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-background.ant-switch-checked .ant-switch-handle {
|
||||||
|
background-color: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(1, 206, 255, 1) 0%,
|
||||||
|
rgba(0, 150, 229, 1) 100%
|
||||||
|
) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey-background.ant-switch .ant-switch-handle {
|
||||||
|
background-color: grey !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user