Compare commits
38 Commits
7802223799
...
a94531bd57
| Author | SHA1 | Date |
|---|---|---|
 wangyan
|
a94531bd57 | 4 months ago |
xuziqiang
|
b06c9ddc84 | 4 months ago |
|
xuziqiang
|
40021ba5d0 | 4 months ago |
zhaohy
|
1401d3611f | 4 months ago |
|
zhaohy
|
d29c724920 | 4 months ago |
fks-xuxinyue
|
5eba9a35a0 | 4 months ago |
fks-yangshouda
|
6278e3ff17 | 4 months ago |
|
xuziqiang
|
0b619fe937 | 4 months ago |
|
xuziqiang
|
48569345aa | 4 months ago |
|
xuziqiang
|
dc0f2a164b | 4 months ago |
|
xuziqiang
|
1aa294b998 | 4 months ago |
|
xuziqiang
|
ef20fa58de | 4 months ago |
|
xuziqiang
|
dac2e095e1 | 4 months ago |
|
zhaohy
|
c68dc4deb7 | 4 months ago |
|
zhaohy
|
0e9743f598 | 4 months ago |
|
xuziqiang
|
2fe6bb6d81 | 4 months ago |
|
xuziqiang
|
58300c60e2 | 4 months ago |
|
zhaohy
|
3bf19ba70d | 4 months ago |
|
zhaohy
|
de0ce4ec2d | 4 months ago |
|
zhaohy
|
8091bc10cc | 4 months ago |
|
xuziqiang
|
e90efdb08d | 4 months ago |
|
xuziqiang
|
86e0b30e81 | 4 months ago |
|
zhaohy
|
0214356cbb | 4 months ago |
|
zhaohy
|
098b4f29fd | 4 months ago |
chenpingsen
|
3598e3d887 | 4 months ago |
|
fks-xuxinyue
|
4869fd4d16 | 4 months ago |
|
fks-xuxinyue
|
b41caf9320 | 4 months ago |
|
xuziqiang
|
8603732377 | 4 months ago |
|
xuziqiang
|
32d1a633b1 | 4 months ago |
|
fks-yangshouda
|
5deff41679 | 4 months ago |
|
xuziqiang
|
0681836c02 | 4 months ago |
|
xuziqiang
|
4526da936e | 5 months ago |
|
xuziqiang
|
c31b5468c7 | 5 months ago |
|
xuziqiang
|
e0206a228b | 5 months ago |
|
fks-xuxinyue
|
47614e12ed | 5 months ago |
|
fks-xuxinyue
|
d8cc8293bc | 5 months ago |
|
fks-yangshouda
|
141f2a3e6f | 5 months ago |
|
fks-yangshouda
|
4fcdae08de | 5 months ago |
56 changed files with 5241 additions and 3129 deletions
|
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,22 @@ |
|||||
|
import { department } from '/@/api/origanizemanage'; |
||||
|
|
||||
|
export const editTreeConfig = (orgId) => ({ |
||||
|
selectedKeys: ['0-0'], |
||||
|
defaultExpandAll: true, |
||||
|
api: department.queryDeptTree, |
||||
|
params: { orgId }, |
||||
|
resultField: 'data.orgInfos', |
||||
|
fieldNames: { title: 'orgName', key: 'orgId' }, |
||||
|
formConfig: { |
||||
|
schemas: [ |
||||
|
{ |
||||
|
field: 'orgName', |
||||
|
component: 'NsInput', |
||||
|
autoSubmit: true, |
||||
|
componentProps: { |
||||
|
placeholder: '请输入企业名称', |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}); |
||||
@ -0,0 +1,341 @@ |
|||||
|
<template> |
||||
|
<a-modal |
||||
|
v-model:visible="show" |
||||
|
width="1100px" |
||||
|
style="top: 50%; transform: translateY(-50%); overflow-y: hidden" |
||||
|
title="添加联系人" |
||||
|
@ok="handleOk" |
||||
|
@cancel="handleCancel"> |
||||
|
<div class="box"> |
||||
|
<div class="box-left"> |
||||
|
<div style="width: 100%; display: flex; position: relative"> |
||||
|
<div class="border-card"></div> |
||||
|
<span style="margin-left: 24px; color: #333333">联系人名单</span> |
||||
|
</div> |
||||
|
<img |
||||
|
style="width: 100%; height: 2px" |
||||
|
src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" /> |
||||
|
<a-input-search |
||||
|
v-model:value="searchValue" |
||||
|
style="margin-bottom: 8px" |
||||
|
placeholder="请输入关键字" /> |
||||
|
<img |
||||
|
style="width: 100%; height: 2px" |
||||
|
src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" /> |
||||
|
<div style="width: 100%; height: 370px; overflow-y: auto"> |
||||
|
<a-tree |
||||
|
:expanded-keys="expandedKeys" |
||||
|
:auto-expand-parent="autoExpandParent" |
||||
|
:tree-data="gData" |
||||
|
@select="onSelect" |
||||
|
@expand="onExpand" |
||||
|
/></div> |
||||
|
<!-- <ns-tree-api v-bind="config" @select="treeSelect" /> --> |
||||
|
</div> |
||||
|
<div class="box-right"> |
||||
|
<div style="width: 100%; display: flex; position: relative"> |
||||
|
<div class="border-card"></div> |
||||
|
<span style="margin-left: 24px; color: #333333">人员列表 </span> |
||||
|
<a-input-search |
||||
|
v-model:value="name" |
||||
|
style="margin-bottom: 8px; width: 280px; position: absolute; right: 20px" |
||||
|
placeholder="请输入" |
||||
|
allowClear="true" |
||||
|
@search="onSearch" /> |
||||
|
</div> |
||||
|
<img |
||||
|
style="width: 100%; height: 2px" |
||||
|
src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" /> |
||||
|
<div style="width: 100%; height: 450px; overflow-y: auto; padding: 12px 0"> |
||||
|
<a-table |
||||
|
:row-selection="{ |
||||
|
selectedRowKeys: selectedRowKey, |
||||
|
preserveSelectedRowKeys: true, |
||||
|
onChange: onSelectChange, |
||||
|
}" |
||||
|
:columns="columns" |
||||
|
:data-source="dataSource" |
||||
|
:rowKey="(record: any) => record.id" |
||||
|
:pagination="pagination" |
||||
|
:bordered="true" |
||||
|
:size="'middle'" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a-modal> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { ref, watch, computed } from 'vue'; |
||||
|
import { defineComponent } from 'vue'; |
||||
|
import type { TreeProps } from 'ant-design-vue'; |
||||
|
import { device } from '/@/api/deviceManage'; |
||||
|
import { http } from '/nerv-lib/util'; |
||||
|
// import { editTreeConfig } from './config'; |
||||
|
|
||||
|
const x = 3; |
||||
|
const y = 2; |
||||
|
const z = 1; |
||||
|
const genData: TreeProps['treeData'] = []; |
||||
|
|
||||
|
const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => { |
||||
|
const preKey = _preKey || '0'; |
||||
|
const tns = _tns || genData; |
||||
|
|
||||
|
const children = []; |
||||
|
for (let i = 0; i < x; i++) { |
||||
|
const key = `${preKey}-${i}`; |
||||
|
tns.push({ title: key, key }); |
||||
|
if (i < y) { |
||||
|
children.push(key); |
||||
|
} |
||||
|
} |
||||
|
if (_level < 0) { |
||||
|
return tns; |
||||
|
} |
||||
|
const level = _level - 1; |
||||
|
children.forEach((key, index) => { |
||||
|
tns[index].children = []; |
||||
|
return generateData(level, key, tns[index].children); |
||||
|
}); |
||||
|
}; |
||||
|
generateData(z); |
||||
|
|
||||
|
const dataList: TreeProps['treeData'] = []; |
||||
|
const generateList = (data: TreeProps['treeData']) => { |
||||
|
for (let i = 0; i < data.length; i++) { |
||||
|
const node = data[i]; |
||||
|
const key = node.key; |
||||
|
dataList.push({ key, title: key }); |
||||
|
if (node.children) { |
||||
|
generateList(node.children); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
generateList(genData); |
||||
|
|
||||
|
const getParentKey = ( |
||||
|
key: string | number, |
||||
|
tree: TreeProps['treeData'], |
||||
|
): string | number | undefined => { |
||||
|
let parentKey; |
||||
|
for (let i = 0; i < tree.length; i++) { |
||||
|
const node = tree[i]; |
||||
|
if (node.children) { |
||||
|
if (node.children.some((item) => item.key === key)) { |
||||
|
parentKey = node.key; |
||||
|
} else if (getParentKey(key, node.children)) { |
||||
|
parentKey = getParentKey(key, node.children); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return parentKey; |
||||
|
}; |
||||
|
export default defineComponent({ |
||||
|
setup(props, { emit }) { |
||||
|
// const config = computed(() => { |
||||
|
// return editTreeConfig(result); |
||||
|
// }); |
||||
|
//组织数 |
||||
|
const orgId = ref(''); |
||||
|
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
||||
|
orgId.value = result; |
||||
|
const dataSource = ref([]); |
||||
|
const selectedRowKey = ref([]); |
||||
|
const selectedRow = ref([]); |
||||
|
const name = ref(null); |
||||
|
const onSearch = () => { |
||||
|
http |
||||
|
.post(device.queryDevicePage, { |
||||
|
pageNum: pagination.value.current, |
||||
|
pageSize: pagination.value.pageSize, |
||||
|
deviceName: name.value, |
||||
|
orgId: orgId.value, |
||||
|
}) |
||||
|
.then((res) => { |
||||
|
dataSource.value = res.data.records; |
||||
|
pagination.value.total = res.data.total; |
||||
|
}); |
||||
|
}; |
||||
|
const onSelect = (selectedKeys: any, info: any) => { |
||||
|
console.log('selected', selectedKeys, info.node.dataRef); |
||||
|
pagination.value.current = 1; |
||||
|
onSearch(); |
||||
|
}; |
||||
|
|
||||
|
const handleChangePage = (current: number, pageSize: number) => { |
||||
|
pagination.value.current = current; |
||||
|
pagination.value.pageSize = pageSize; |
||||
|
http |
||||
|
.post(device.queryDevicePage, { |
||||
|
pageNum: pagination.value.current, |
||||
|
pageSize: pagination.value.pageSize, |
||||
|
orgId: orgId.value, |
||||
|
}) |
||||
|
.then((res) => { |
||||
|
dataSource.value = res.data.records; |
||||
|
pagination.value.total = res.data.total; |
||||
|
}); |
||||
|
console.log(selectedRowKey.value, selectedRow.value); |
||||
|
}; |
||||
|
const onSelectChange = (selectedRowKeys: any, selectedRows: any) => { |
||||
|
console.log(selectedRowKeys, selectedRows); |
||||
|
console.log(selectedRows, '数据'); |
||||
|
|
||||
|
selectedRowKey.value = selectedRowKeys; |
||||
|
selectedRow.value = selectedRows; |
||||
|
}; |
||||
|
const pagination = ref({ |
||||
|
total: 0, |
||||
|
size: 'small', |
||||
|
current: 1, |
||||
|
pageSize: 10, |
||||
|
showQuickJumper: true, |
||||
|
showLessItems: true, |
||||
|
// showSizeChanger: true, |
||||
|
showTotal: (total: number, range: any) => |
||||
|
total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '', |
||||
|
onChange: handleChangePage, |
||||
|
}); |
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: '序号', |
||||
|
dataIndex: 'address', |
||||
|
customRender: (text: any) => { |
||||
|
return text.index + 1; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
title: '姓名', |
||||
|
dataIndex: 'deviceName', |
||||
|
}, |
||||
|
{ |
||||
|
title: '性别', |
||||
|
dataIndex: 'sex', |
||||
|
}, |
||||
|
{ |
||||
|
title: '组织关系', |
||||
|
dataIndex: 'address', |
||||
|
}, |
||||
|
{ |
||||
|
title: '部门 ', |
||||
|
dataIndex: 'address', |
||||
|
}, |
||||
|
]; |
||||
|
const handleOk = () => { |
||||
|
// 处理确定按钮的逻辑 |
||||
|
emit('handleOk', { id: selectedRowKey.value, data: selectedRow.value }); |
||||
|
show.value = false; |
||||
|
pagination.value.current = 1; |
||||
|
}; |
||||
|
const getData = (data: any) => { |
||||
|
selectedRow.value = data.data; |
||||
|
selectedRowKey.value = data.id; |
||||
|
show.value = true; |
||||
|
http |
||||
|
.post(device.queryDevicePage, { |
||||
|
pageNum: pagination.value.current, |
||||
|
pageSize: pagination.value.pageSize, |
||||
|
orgId: orgId.value, |
||||
|
}) |
||||
|
.then((res) => { |
||||
|
dataSource.value = res.data.records; |
||||
|
pagination.value.total = res.data.total; |
||||
|
}); |
||||
|
}; |
||||
|
const show = ref(false); |
||||
|
const handleCancel = () => { |
||||
|
// 处理取消按钮的逻辑 |
||||
|
pagination.value.current = 1; |
||||
|
emit('handleCancel', null); |
||||
|
show.value = false; |
||||
|
}; |
||||
|
// 树方法 |
||||
|
const expandedKeys = ref<(string | number)[]>([]); |
||||
|
const searchValue = ref<string>(''); |
||||
|
const deviceName = ref<string>(''); |
||||
|
const autoExpandParent = ref<boolean>(true); |
||||
|
const gData = ref<TreeProps['treeData']>(genData); |
||||
|
|
||||
|
const onExpand = (keys: string[]) => { |
||||
|
expandedKeys.value = keys; |
||||
|
autoExpandParent.value = false; |
||||
|
console.log(keys, '数据'); |
||||
|
}; |
||||
|
watch(searchValue, (value) => { |
||||
|
console.log(gData.value, '数据'); |
||||
|
|
||||
|
const expanded = dataList |
||||
|
.map((item: TreeProps['treeData'][number]) => { |
||||
|
if (item.title.indexOf(value) > -1) { |
||||
|
return getParentKey(item.key, gData.value); |
||||
|
} |
||||
|
return null; |
||||
|
}) |
||||
|
.filter((item, i, self) => item && self.indexOf(item) === i); |
||||
|
expandedKeys.value = expanded; |
||||
|
searchValue.value = value; |
||||
|
autoExpandParent.value = true; |
||||
|
console.log(expandedKeys.value, '数据'); |
||||
|
}); |
||||
|
return { |
||||
|
columns, |
||||
|
name, |
||||
|
orgId, |
||||
|
// config, |
||||
|
onSearch, |
||||
|
dataSource, |
||||
|
onSelect, |
||||
|
gData, |
||||
|
onExpand, |
||||
|
selectedRow, |
||||
|
selectedRowKey, |
||||
|
autoExpandParent, |
||||
|
expandedKeys, |
||||
|
onSelectChange, |
||||
|
pagination, |
||||
|
handleOk, |
||||
|
show, |
||||
|
getData, |
||||
|
searchValue, |
||||
|
deviceName, |
||||
|
handleCancel, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
<style scoped lang="less"> |
||||
|
.border-card { |
||||
|
border-width: 0px; |
||||
|
position: absolute; |
||||
|
left: 0px; |
||||
|
top: 5px; |
||||
|
width: 5px; |
||||
|
height: 15px; |
||||
|
background: inherit; |
||||
|
background-color: rgba(251, 156, 67, 1); |
||||
|
border: none; |
||||
|
border-radius: 5px; |
||||
|
-moz-box-shadow: none; |
||||
|
-webkit-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
.box { |
||||
|
width: 100%; |
||||
|
height: 500px; |
||||
|
display: flex; |
||||
|
.box-left { |
||||
|
width: 300px; |
||||
|
height: 100%; |
||||
|
overflow-y: auto; |
||||
|
padding: 0, 12px; |
||||
|
gap: 5px; |
||||
|
} |
||||
|
.box-right { |
||||
|
width: calc(100% - 200px); |
||||
|
height: 100%; |
||||
|
padding: 0 12px; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,28 @@ |
|||||
|
<template> |
||||
|
<ns-view-list-table v-bind="config" ref="mainRef" /> |
||||
|
<!-- 详情页面 --> |
||||
|
<Look ref="look" /> |
||||
|
<!-- 状态页面 --> |
||||
|
<Status ref="status" /> |
||||
|
</template> |
||||
|
<script lang="ts"> |
||||
|
import { notificationtableConfig } from './ts/config'; |
||||
|
import Look from './look.vue'; |
||||
|
import Status from './status.vue'; |
||||
|
import { ref } from 'vue'; |
||||
|
|
||||
|
export default { |
||||
|
components: { Look, Status }, |
||||
|
|
||||
|
setup() { |
||||
|
const look = ref(null); |
||||
|
const status = ref(null); |
||||
|
const config = notificationtableConfig(look, status); |
||||
|
return { |
||||
|
config, |
||||
|
look, |
||||
|
status, |
||||
|
}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,283 @@ |
|||||
|
<template> |
||||
|
<ns-drawer |
||||
|
v-model:visible="visible" |
||||
|
width="520" |
||||
|
:title="' '" |
||||
|
:footer-style="{ textAlign: 'right' }" |
||||
|
:ok="btnClick" |
||||
|
:cancel="handleClose" |
||||
|
placement="right" |
||||
|
@close="handleClose"> |
||||
|
<div style="width: 100%; height: 100%; overflow-y: auto"> |
||||
|
<!-- top --> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 100%; |
||||
|
height: 35px; |
||||
|
display: flex; |
||||
|
position: relative; |
||||
|
font-size: 16px; |
||||
|
border-bottom: 1px solid rgb(255, 118, 2); /* 设置底部边框为1像素实线，并指定颜色 */ |
||||
|
"> |
||||
|
<div class="card"></div> |
||||
|
<div style="left: 25px; position: absolute; height: 35px; line-height: 35px"> |
||||
|
告警编号：20230310001 |
||||
|
</div> |
||||
|
<div style="right: 20px; position: absolute; height: 35px; line-height: 35px"> |
||||
|
15点08分 |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- center --> |
||||
|
<div style="width: 100%; height: 300px; border: 1px solid red" ref="graphChart"></div> |
||||
|
</div> |
||||
|
</ns-drawer> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { defineComponent } from 'vue'; |
||||
|
import { ref } from 'vue'; |
||||
|
import * as echarts from 'echarts'; |
||||
|
export default defineComponent({ |
||||
|
setup() { |
||||
|
let chartInstance = null; |
||||
|
const graphChart = ref(null); |
||||
|
const visible = ref(false); |
||||
|
const handleClose = () => { |
||||
|
visible.value = false; |
||||
|
}; |
||||
|
const btnClick = () => { |
||||
|
console.log('btnClick'); |
||||
|
}; |
||||
|
const toggle = (data) => { |
||||
|
console.log(data, 'data'); |
||||
|
visible.value = true; |
||||
|
getChatr(); |
||||
|
}; |
||||
|
const getChatr = () => { |
||||
|
let dayData = []; |
||||
|
let energyAlarm = []; |
||||
|
let wgAlarm = []; |
||||
|
let equipmentAlarm = []; |
||||
|
let total = []; |
||||
|
|
||||
|
// Extend data for 30 days |
||||
|
for (let i = 1; i < 30; i++) { |
||||
|
dayData.push(`3/${i}`); |
||||
|
energyAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity |
||||
|
wgAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity |
||||
|
equipmentAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity |
||||
|
total.push(0); // Assuming the same value for simplicity |
||||
|
} |
||||
|
if (chartInstance) { |
||||
|
chartInstance.dispose(); |
||||
|
} |
||||
|
chartInstance = echarts.init(graphChart.value); |
||||
|
const option = { |
||||
|
title: { |
||||
|
text: '告警趋势/ 近30天', |
||||
|
textStyle: { |
||||
|
fontSize: 16, |
||||
|
fontWeight: 'normal', |
||||
|
color: '#aaaaaa', |
||||
|
}, |
||||
|
left: '1%', |
||||
|
top: '2%', |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'shadow', |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res = |
||||
|
params[0].axisValue + |
||||
|
'<br/>' + |
||||
|
params[0].marker + |
||||
|
' ' + |
||||
|
params[0].seriesName + |
||||
|
' : ' + |
||||
|
params[0].data + |
||||
|
'<br/>' + |
||||
|
params[1].marker + |
||||
|
' ' + |
||||
|
params[1].seriesName + |
||||
|
' : ' + |
||||
|
params[1].data + |
||||
|
'<br/>' + |
||||
|
params[2].marker + |
||||
|
' ' + |
||||
|
params[2].seriesName + |
||||
|
' : ' + |
||||
|
params[2].data + |
||||
|
'<br/>'; |
||||
|
return res; |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '2%', // 设置图表距离左边的距离 |
||||
|
right: '2%', // 设置图表距离右边的距离 |
||||
|
borderWidth: 0, |
||||
|
y2: 60, // 距离底边 |
||||
|
}, |
||||
|
legend: [ |
||||
|
{ |
||||
|
top: 5, |
||||
|
left: 'center', // 将图例居中显示 |
||||
|
textStyle: { |
||||
|
color: 'rgb(89, 89, 89)', |
||||
|
fontSize: '14', |
||||
|
fontWeight: 'normal', |
||||
|
}, // 注意这里的颜色值要用引号括起来 |
||||
|
data: ['设备告警', '网关告警', '能源告警'], |
||||
|
itemGap: 30, // 这里可以调整图例项之间的间距，单位为像素 |
||||
|
}, |
||||
|
], |
||||
|
toolbox: { |
||||
|
show: true, |
||||
|
feature: { |
||||
|
restore: {}, |
||||
|
saveAsImage: {}, |
||||
|
}, |
||||
|
}, |
||||
|
calculable: true, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
splitArea: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: dayData, |
||||
|
}, |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
shwo: false, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
splitArea: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: false, // 不显示刻度值 |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
dataZoom: [ |
||||
|
{ |
||||
|
height: 12, |
||||
|
start: 0, |
||||
|
end: 100, |
||||
|
handleSize: '300%', // 设置滑块的大小 |
||||
|
bottom: 15, |
||||
|
}, |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '能源告警', |
||||
|
type: 'bar', |
||||
|
stack: '能源告警', |
||||
|
barMaxWidth: 40, |
||||
|
barGap: '10%', |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
barBorderRadius: 0, |
||||
|
color: 'rgb(246, 189, 22)', |
||||
|
}, |
||||
|
}, |
||||
|
data: energyAlarm, |
||||
|
}, |
||||
|
{ |
||||
|
name: '网关告警', |
||||
|
type: 'bar', |
||||
|
stack: '能源告警', |
||||
|
barMaxWidth: 40, |
||||
|
barGap: '10%', |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
barBorderRadius: 0, |
||||
|
color: 'rgb(91, 143, 249)', |
||||
|
}, |
||||
|
}, |
||||
|
data: wgAlarm, |
||||
|
}, |
||||
|
{ |
||||
|
name: '设备告警', |
||||
|
type: 'bar', |
||||
|
stack: '能源告警', |
||||
|
barMaxWidth: 40, |
||||
|
barGap: '10%', |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
barBorderRadius: 0, |
||||
|
color: 'rgb(48, 191, 120)', |
||||
|
}, |
||||
|
}, |
||||
|
data: equipmentAlarm, |
||||
|
}, |
||||
|
{ |
||||
|
name: '总数', |
||||
|
type: 'bar', |
||||
|
stack: '能源告警', |
||||
|
barMaxWidth: 40, |
||||
|
barHight: 0, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
barBorderRadius: 0, |
||||
|
color: 'rgba(0,0,0,0)', |
||||
|
}, |
||||
|
}, |
||||
|
label: { |
||||
|
show: true, |
||||
|
color: '#000000', |
||||
|
position: 'top', |
||||
|
top: '10', |
||||
|
formatter: function (value) { |
||||
|
return ( |
||||
|
Number(energyAlarm[value.dataIndex]) + |
||||
|
Number(wgAlarm[value.dataIndex]) + |
||||
|
Number(equipmentAlarm[value.dataIndex]) |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
data: total, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
chartInstance = echarts.init(graphChart.value); |
||||
|
chartInstance.setOption(option); |
||||
|
}; |
||||
|
return { |
||||
|
btnClick, |
||||
|
visible, |
||||
|
chartInstance, |
||||
|
handleClose, |
||||
|
toggle, |
||||
|
graphChart, |
||||
|
getChatr, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
<style scoped lang="less"> |
||||
|
.card { |
||||
|
position: absolute; |
||||
|
left: 0px; |
||||
|
top: 0px; |
||||
|
width: 5px; |
||||
|
height: 35px; |
||||
|
background-color: rgb(254, 118, 2); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,108 @@ |
|||||
|
{ |
||||
|
"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, |
||||
|
"priority": "1", |
||||
|
"alarmTitle": "电压异常告警", |
||||
|
"errorCode": "A001", |
||||
|
"monitorTime":"1", |
||||
|
"repetitions":"1", |
||||
|
"monitorTimeUnit": "分", |
||||
|
"enableRules": "1", |
||||
|
"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, |
||||
|
"priority": "1", |
||||
|
"alarmTitle": "电压异常告警", |
||||
|
"errorCode": "A001", |
||||
|
"monitorTime":"1", |
||||
|
"repetitions":"1", |
||||
|
"monitorTimeUnit": "分", |
||||
|
"enableRules": "0", |
||||
|
"isUse":true |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,39 @@ |
|||||
|
<template> |
||||
|
<ns-drawer |
||||
|
v-model:visible="visible" |
||||
|
width="520" |
||||
|
:title="' '" |
||||
|
:footer-style="{ textAlign: 'right' }" |
||||
|
:ok="btnClick" |
||||
|
:cancel="handleClose" |
||||
|
placement="right" |
||||
|
@close="handleClose"> |
||||
|
状态 |
||||
|
</ns-drawer> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { defineComponent } from 'vue'; |
||||
|
import { ref } from 'vue'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
setup() { |
||||
|
const visible = ref(false); |
||||
|
const handleClose = () => { |
||||
|
visible.value = false; |
||||
|
}; |
||||
|
const btnClick = () => { |
||||
|
console.log('btnClick'); |
||||
|
}; |
||||
|
const toggle = (data) => { |
||||
|
console.log(data, 'data'); |
||||
|
visible.value = true; |
||||
|
}; |
||||
|
return { |
||||
|
btnClick, |
||||
|
visible, |
||||
|
handleClose, |
||||
|
toggle, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
@ -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: 'enableRules', |
||||
|
}, |
||||
|
{ |
||||
|
title: '重复次数', |
||||
|
dataIndex: 'enableRules', |
||||
|
}, |
||||
|
]; |
||||
|
const mockData = ref(data.listData); |
||||
|
export const notificationtableConfig = (look: any, status: any) => { |
||||
|
return { |
||||
|
title: '告警记录', |
||||
|
// api: '/carbon_emission/device/getDeviceList',
|
||||
|
value: mockData.value, |
||||
|
headerActions: [{}], |
||||
|
columns: tableKeyMap, |
||||
|
// rowSelection: null, 选择按钮
|
||||
|
columnActions: { |
||||
|
title: '操作', |
||||
|
actions: [ |
||||
|
{ |
||||
|
label: '详情', |
||||
|
name: 'FeedBackDetail', |
||||
|
dynamicParams: ['uuid', 'appealType'], |
||||
|
handle: (data: any) => { |
||||
|
console.log(look.value); |
||||
|
look.value.toggle(data); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '状态', |
||||
|
name: 'FeedBackDetail', |
||||
|
dynamicParams: ['uuid', 'appealType'], |
||||
|
handle: (data: any) => { |
||||
|
status.value.toggle(data); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
|
||||
|
formConfig: { |
||||
|
schemas: [ |
||||
|
{ |
||||
|
field: 'name', |
||||
|
label: '告警类型', |
||||
|
component: 'NsSelect', |
||||
|
componentProps: { |
||||
|
placeholder: '请选择告警优先级', |
||||
|
options: [ |
||||
|
{ |
||||
|
label: '紧急', |
||||
|
value: '1', |
||||
|
}, |
||||
|
{ |
||||
|
label: '重要', |
||||
|
value: '2', |
||||
|
}, |
||||
|
{ |
||||
|
label: '一般', |
||||
|
value: '3', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
field: 'provider', |
||||
|
label: '状态', |
||||
|
component: 'NsSelect', |
||||
|
componentProps: { |
||||
|
placeholder: '请选择状态', |
||||
|
options: [ |
||||
|
{ |
||||
|
label: '待处理', |
||||
|
value: '1', |
||||
|
}, |
||||
|
{ |
||||
|
label: '处理中', |
||||
|
value: '2', |
||||
|
}, |
||||
|
{ |
||||
|
label: '已完成', |
||||
|
value: '3', |
||||
|
}, |
||||
|
{ |
||||
|
label: '超时', |
||||
|
value: '4', |
||||
|
}, |
||||
|
{ |
||||
|
label: '关闭', |
||||
|
value: '5', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
field: 'provider', |
||||
|
label: '告警标题', |
||||
|
component: 'NsInput', |
||||
|
componentProps: { |
||||
|
placeholder: '请输入告警标题关键字', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
field: 'provider', |
||||
|
label: '错误码', |
||||
|
component: 'NsInputApi', |
||||
|
componentProps: { |
||||
|
placeholder: '请输入告警错误码', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
field: 'createTime', |
||||
|
label: '生产日期', |
||||
|
component: 'NsRangePicker', |
||||
|
fieldMap: ['manufactureBeginDate', 'manufactureEndDate'], |
||||
|
componentProps: { |
||||
|
valueFormat: 'YYYY-MM-DD', |
||||
|
placeholder: ['设备生产开始日期', '设备生产结束日期'], |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
// pagination: { pageSizeOptions: false },
|
||||
|
rowKey: 'id', |
||||
|
}; |
||||
|
}; |
||||
@ -0,0 +1,141 @@ |
|||||
|
.out-dialog { |
||||
|
position: fixed; |
||||
|
right: 496px; |
||||
|
width: 500px; |
||||
|
height: 100%; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
margin: auto; |
||||
|
box-sizing: border-box; |
||||
|
color: rgb(255, 83, 0); |
||||
|
background: black; |
||||
|
display: flex; |
||||
|
padding: 25px; |
||||
|
flex-direction: column; |
||||
|
.content { |
||||
|
overflow-y: scroll; |
||||
|
.div-operation { |
||||
|
display: inline-block; |
||||
|
width: 3px; |
||||
|
height: 13px; |
||||
|
opacity: 1; |
||||
|
border-radius: 1px; |
||||
|
background: rgba(67, 136, 251, 1); |
||||
|
} |
||||
|
.text-operation { |
||||
|
display: inline-block; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
font-size: 16px; |
||||
|
font-weight: 700; |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
.j-box { |
||||
|
background-color: #000; |
||||
|
opacity: 1; |
||||
|
z-index: 99999; |
||||
|
overflow-y: scroll; |
||||
|
.journal { |
||||
|
padding: 1% 3%; |
||||
|
width: 100%; |
||||
|
height: 150px; |
||||
|
background-color: rgba(0, 0, 0); |
||||
|
border-radius: 12px; |
||||
|
border: 2px solid transparent; |
||||
|
border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1; |
||||
|
} |
||||
|
.imgText { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.ztzm { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.cxbtn { |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
border: none; |
||||
|
border-radius: 6px; |
||||
|
width: 59.79px; |
||||
|
height: 32px; |
||||
|
opacity: 1; |
||||
|
background: linear-gradient( |
||||
|
180deg, |
||||
|
rgba(255, 187, 0, 1) 0%, |
||||
|
rgba(255, 112, 3, 1) 91.21%, |
||||
|
rgba(255, 129, 3, 1) 100% |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
.btn-box { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
grid-template-rows: 1fr 1fr; |
||||
|
grid-row-gap: 15px; |
||||
|
.btn-item { |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
align-content: space-between; |
||||
|
.left { |
||||
|
width: 70px; |
||||
|
height: 35px; |
||||
|
line-height: 35px; |
||||
|
border-radius: 4px; |
||||
|
background: linear-gradient( |
||||
|
180deg, |
||||
|
rgba(1, 206, 255, 1) 0%, |
||||
|
rgba(0, 150, 229, 1) 100% |
||||
|
); |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
.right { |
||||
|
width: 140px; |
||||
|
height: 35px; |
||||
|
line-height: 35px; |
||||
|
span { |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
img { |
||||
|
padding: 0 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.button-box { |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
padding: 10px; |
||||
|
height: 60px; |
||||
|
position: absolute; |
||||
|
background-color: transparent; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
.execute, .cancel { |
||||
|
margin-right: 10px; |
||||
|
width: 74px; |
||||
|
height: 40px; |
||||
|
opacity: 1; |
||||
|
cursor: pointer; |
||||
|
border-radius: 4px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
border: 0; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
.execute { |
||||
|
background: rgb(67, 136, 251); |
||||
|
color: white; |
||||
|
} |
||||
|
.cancel { |
||||
|
background: white; |
||||
|
color: black; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
File diff suppressed because it is too large
@ -1,156 +0,0 @@ |
|||||
// 页面容器 |
|
||||
.lighting-box { |
|
||||
// width: 100%; |
|
||||
// height: 100%; |
|
||||
position: relative; |
|
||||
// background: linear-gradient(#badaff, #8cabeb, #7095de); |
|
||||
// 照明设备功能总容器 |
|
||||
.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 { |
|
||||
// transform: scale(1.05); |
|
||||
// } |
|
||||
.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 { |
|
||||
// transform: scale(1.05); |
|
||||
// } |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
// 总容器与抽屉按钮 |
|
||||
.ns-content-main { |
|
||||
position: relative; |
|
||||
// 抽屉打开按钮 |
|
||||
.drawer-box-in { |
|
||||
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-box-out { |
|
||||
width: 30px; |
|
||||
height: 40px; |
|
||||
border-radius: 2px; |
|
||||
position: fixed; |
|
||||
right: 496px; |
|
||||
top: 0; |
|
||||
bottom: 0; |
|
||||
margin: auto; |
|
||||
background: rgba(0, 0 ,0 ,0.5); |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -0,0 +1,216 @@ |
|||||
|
<template> |
||||
|
<div class="div-add"> |
||||
|
<button class="add" @click="addModal">添加</button> |
||||
|
</div> |
||||
|
<table class="custom-table table1"> |
||||
|
<thead> |
||||
|
<tr :style="{ background: 'rgba(35,45,69)' }"> |
||||
|
<th>序号</th> |
||||
|
<th>执行时间</th> |
||||
|
<th>计划名称</th> |
||||
|
<th>状态</th> |
||||
|
<th>操作</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr v-for="(row, index) in dataSource" :key="index"> |
||||
|
<td>{{ row.key }}</td> |
||||
|
<td>{{ row.data }}</td> |
||||
|
<td>{{ row.planName }}</td> |
||||
|
<td v-if="row.status === '待执行'"> |
||||
|
<button |
||||
|
style=" |
||||
|
font-size: 12px; |
||||
|
background: rgba(57, 215, 187, 0.1); |
||||
|
color: rgb(57, 215, 187); |
||||
|
border: 1px solid rgb(57, 215, 187); |
||||
|
"> |
||||
|
{{ row.status }} |
||||
|
</button> |
||||
|
</td> |
||||
|
<td v-if="row.status !== '待执行'"> |
||||
|
<button |
||||
|
style=" |
||||
|
font-size: 12px; |
||||
|
background: rgba(243, 97, 99, 0.1); |
||||
|
border: 1px solid rgba(243, 97, 99); |
||||
|
color: rgba(243, 97, 99); |
||||
|
"> |
||||
|
{{ row.status }} |
||||
|
</button> |
||||
|
</td> |
||||
|
<td> |
||||
|
<button class="tabReboot" @click="handleRefClick1">重启</button> |
||||
|
<button class="tabDelete">删除</button> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
<div class="out-dialog" v-if="addVisible"> |
||||
|
<div class="content" v-if="addVisible"> |
||||
|
<div class="div-operation"></div> |
||||
|
<span class="text-operation">计划库</span> |
||||
|
</div> |
||||
|
<div style="margin-top: 20px"> |
||||
|
<a-transfer |
||||
|
v-model:target-keys="targetKeys" |
||||
|
:data-source="mockData" |
||||
|
show-search |
||||
|
:filter-option="filterOption" |
||||
|
:render="(item) => item.title" |
||||
|
@change="handleChange" |
||||
|
:style="{ color: 'rgba(255,255,255,1)' }" |
||||
|
@search="handleSearch" |
||||
|
:listStyle="{ border: '2px solid rgba(25,74,125,1)', height: 'calc(100vh - 200px)' }" /> |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 60px;"></div> |
||||
|
<div class="button-box"> |
||||
|
<button class="cancel" @click="addVisible = false">取消</button> |
||||
|
<button class="execute">确定</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
|
||||
|
// 初始化 |
||||
|
onMounted(() => { |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
// 表格数据 |
||||
|
const dataSource = ref([ |
||||
|
{ |
||||
|
key: '1', |
||||
|
data: '2024-05-01', |
||||
|
planName: '劳动节', |
||||
|
status: '暂停中', |
||||
|
}, |
||||
|
{ |
||||
|
key: '2', |
||||
|
data: '2024-05-01', |
||||
|
planName: '国庆节', |
||||
|
status: '待执行', |
||||
|
}, |
||||
|
{ |
||||
|
key: '3', |
||||
|
data: '2024-05-01', |
||||
|
planName: '元旦', |
||||
|
status: '待执行', |
||||
|
}, |
||||
|
]); |
||||
|
const addVisible = ref<boolean>(false); |
||||
|
// 操作日志 |
||||
|
const handleRefClick1 = () => { |
||||
|
alert(111) |
||||
|
}; |
||||
|
const addModal = () => { |
||||
|
addVisible.value = true; |
||||
|
}; |
||||
|
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => { |
||||
|
console.log(keys, direction, moveKeys); |
||||
|
}; |
||||
|
const handleSearch = (dir: string, value: string) => { |
||||
|
console.log('search:', dir, value); |
||||
|
}; |
||||
|
|
||||
|
// 穿梭框 相关业务 |
||||
|
interface MockData { |
||||
|
key: string; |
||||
|
title: string; |
||||
|
description: string; |
||||
|
chosen: boolean; |
||||
|
} |
||||
|
const mockData = ref([ |
||||
|
{ |
||||
|
key: '1', |
||||
|
title: '计划再开', |
||||
|
}, |
||||
|
{ |
||||
|
key: '2', |
||||
|
title: '检修模式', |
||||
|
}, |
||||
|
{ |
||||
|
key: '3', |
||||
|
title: '设备变更', |
||||
|
}, |
||||
|
]); |
||||
|
const targetKeys = ref<string[]>([]); |
||||
|
const filterOption = (inputValue: string, option: MockData) => { |
||||
|
console.log(option.description); |
||||
|
|
||||
|
return option.description.indexOf(inputValue) > -1; |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
@import "./dialogStyle.less"; |
||||
|
|
||||
|
// 右下角添加按钮 |
||||
|
.div-add { |
||||
|
height: 64px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
margin-right: 20px; |
||||
|
.add { |
||||
|
width: 74px; |
||||
|
height: 40px; |
||||
|
opacity: 1; |
||||
|
border-radius: 4px; |
||||
|
background: rgba(67, 136, 251, 1); |
||||
|
border: rgba(67, 136, 251, 1); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
} |
||||
|
// 表格 |
||||
|
.custom-table { |
||||
|
border-collapse: collapse; |
||||
|
width: 416px; |
||||
|
height: 60px; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
.custom-table th, |
||||
|
.custom-table td { |
||||
|
border: 1px solid rgba(163, 192, 243, 1); |
||||
|
text-align: left; |
||||
|
padding: 8px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.table1 { |
||||
|
margin-top: 20px; |
||||
|
width: 100%; |
||||
|
border: 1px solid rgba(255, 255, 255); |
||||
|
border-radius: 5px; |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
// 表格中的操作按钮 |
||||
|
.tabReboot, |
||||
|
.tabDelete { |
||||
|
border: none; |
||||
|
background-color: rgba(0, 0, 0, 0); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
letter-spacing: 0; |
||||
|
line-height: 20px; |
||||
|
color: rgba(67, 136, 251, 1); |
||||
|
} |
||||
|
.tabReboot { |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
} |
||||
|
::v-deep(.ant-transfer) { |
||||
|
// 屏蔽自带的hover效果 |
||||
|
.ant-transfer-list-content-item:hover { |
||||
|
background: black; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,255 @@ |
|||||
|
<template> |
||||
|
<table class="custom-table table1"> |
||||
|
<thead> |
||||
|
<tr :style="{ background: 'rgba(35,45,69)' }"> |
||||
|
<th>序号</th> |
||||
|
<th>执行时间</th> |
||||
|
<th>操作内容</th> |
||||
|
<th>操作人</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr v-for="(row, index) in dataSource1" :key="index" @click="handleRowClick(row.key)" |
||||
|
:class="row.key === trIndex ? 'isTrIndex' : ''"> |
||||
|
<td>{{ row.key }}</td> |
||||
|
<td>{{ row.data }}</td> |
||||
|
<td>{{ row.planName }}</td> |
||||
|
<td>{{ row.status }}</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
<div class="out-dialog" v-if="logModalVisible"> |
||||
|
<div class="content" v-if="logModalVisible"> |
||||
|
<div> |
||||
|
<div class="div-operation"></div> |
||||
|
<span class="text-operation">变更内容 </span> |
||||
|
</div> |
||||
|
<div class="jbox" v-for="item in cxList" :key="item.id"> |
||||
|
<div class="journal" style="margin-top: 20px"> |
||||
|
<div class="imgText"> |
||||
|
<div class="zjzm"> |
||||
|
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" /> |
||||
|
<span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{ |
||||
|
item.name }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="btn-box"> |
||||
|
<div class="btn-item"> |
||||
|
<div class="left">控制模式</div> |
||||
|
<div class="right"> |
||||
|
<span>手动</span> |
||||
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
||||
|
<span>自动</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="btn-item"> |
||||
|
<div class="left"> |
||||
|
亮度 |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<span>100lux</span> |
||||
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
||||
|
<span>30lux</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="btn-item"> |
||||
|
<div class="left"> |
||||
|
控制场景 |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<span>手动</span> |
||||
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
||||
|
<span>自动</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="btn-item"> |
||||
|
<div class="left"> |
||||
|
色温 |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<span>4000k</span> |
||||
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
||||
|
<span>3800k</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="height: 60px;"></div> |
||||
|
<div class="button-box"> |
||||
|
<button class="cancel" @click="logModalVisible = false">取消</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="div-add"> |
||||
|
<button class="add">刷新</button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
|
||||
|
// 初始化 |
||||
|
onMounted(() => { |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
// 与父组件的交互 =================================================================== |
||||
|
const props = defineProps({ |
||||
|
// 分区结构（照明区域 > 照明回路） |
||||
|
treeData: { |
||||
|
type: Array |
||||
|
}, |
||||
|
}); |
||||
|
const emit = defineEmits(['changeArea']); |
||||
|
|
||||
|
// 表格数据 |
||||
|
const dataSource1 = ref([ |
||||
|
{ |
||||
|
key: '1', |
||||
|
data: '2024-05-01', |
||||
|
planName: '计划再开', |
||||
|
status: '张三111', |
||||
|
}, |
||||
|
{ |
||||
|
key: '2', |
||||
|
data: '2024-05-01', |
||||
|
planName: '检修模式', |
||||
|
status: '李四12', |
||||
|
}, |
||||
|
{ |
||||
|
key: '3', |
||||
|
data: '2024-05-01', |
||||
|
planName: '设备变更', |
||||
|
status: '王五33', |
||||
|
}, |
||||
|
]); |
||||
|
const cxList = ref([ |
||||
|
{ |
||||
|
id: '1', |
||||
|
name: '站厅照明 1区', |
||||
|
manual: '手动', |
||||
|
automatic: '自动', |
||||
|
brightness: '100lux', |
||||
|
brightness2: '30lux', |
||||
|
manual2: '手动', |
||||
|
automatic2: '自动', |
||||
|
brightness3: '4000k', |
||||
|
brightness4: '3800k', |
||||
|
}, |
||||
|
{ |
||||
|
id: '2', |
||||
|
name: '站厅照明 2区', |
||||
|
manual: '手动', |
||||
|
automatic: '自动', |
||||
|
brightness: '100lux', |
||||
|
brightness2: '30lux', |
||||
|
manual2: '手动', |
||||
|
automatic2: '自动', |
||||
|
brightness3: '4000k', |
||||
|
brightness4: '3800k', |
||||
|
}, |
||||
|
{ |
||||
|
id: '3', |
||||
|
name: '站厅照明 3区', |
||||
|
manual: '手动', |
||||
|
automatic: '自动', |
||||
|
brightness: '100lux', |
||||
|
brightness2: '30lux', |
||||
|
manual2: '手动', |
||||
|
automatic2: '自动', |
||||
|
brightness3: '4000k', |
||||
|
brightness4: '3800k', |
||||
|
}, |
||||
|
]); |
||||
|
let trIndex = ref('-1'); |
||||
|
const logModalVisible = ref(false); |
||||
|
const handleRowClick = (index: any) => { |
||||
|
trIndex.value = index; |
||||
|
if (index === trIndex.value) { |
||||
|
console.log('tri'); |
||||
|
} |
||||
|
// 显示模态框 |
||||
|
logModalVisible.value = true; |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
@import "./dialogStyle.less"; |
||||
|
|
||||
|
// 右下角添加按钮 |
||||
|
.div-add { |
||||
|
|
||||
|
height: 64px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
margin-right: 20px; |
||||
|
.add { |
||||
|
width: 74px; |
||||
|
height: 40px; |
||||
|
opacity: 1; |
||||
|
border-radius: 4px; |
||||
|
background: rgba(67, 136, 251, 1); |
||||
|
border: rgba(67, 136, 251, 1); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 表格 |
||||
|
.custom-table { |
||||
|
border-collapse: collapse; |
||||
|
width: 416px; |
||||
|
height: 60px; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
|
||||
|
.custom-table th, |
||||
|
.custom-table td { |
||||
|
border: 1px solid rgba(163, 192, 243, 1); |
||||
|
text-align: left; |
||||
|
padding: 8px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.table1 { |
||||
|
margin-top: 20px; |
||||
|
width: 100%; |
||||
|
border: 1px solid rgba(255, 255, 255); |
||||
|
border-radius: 5px; |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
|
||||
|
.tabReboot, |
||||
|
.tabDelete { |
||||
|
border: none; |
||||
|
background-color: rgba(0, 0, 0, 0); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
letter-spacing: 0; |
||||
|
line-height: 20px; |
||||
|
color: rgba(67, 136, 251, 1); |
||||
|
} |
||||
|
|
||||
|
.tabReboot { |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.isTrIndex { |
||||
|
background: rgba(67, 136, 251, 1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
::v-deep(.ant-transfer) { |
||||
|
|
||||
|
// 屏蔽自带的hover效果 |
||||
|
.ant-transfer-list-content-item:hover { |
||||
|
background: black; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,126 @@ |
|||||
|
<template> |
||||
|
<ns-drawer |
||||
|
v-model:visible="visible" |
||||
|
:width="800" |
||||
|
class="custom-class" |
||||
|
title=" " |
||||
|
destroyOnClose |
||||
|
:ok="btnClick" |
||||
|
:cancel="() => (visible = false)" |
||||
|
placement="right"> |
||||
|
<div class="drawerContainer"> |
||||
|
<ns-tree-api v-bind="config" @select="treeSelect" /> |
||||
|
<a-transfer |
||||
|
v-model:target-keys="targetKeys" |
||||
|
:data-source="dataSource" |
||||
|
style="height: 100%; width: 66%" |
||||
|
:listStyle="listStyle" |
||||
|
show-search |
||||
|
:render="(item) => item.title" |
||||
|
:filter-option="filterOption" /> |
||||
|
</div> |
||||
|
</ns-drawer> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { computed, onMounted, ref } from 'vue'; |
||||
|
import { NsMessage } from '/nerv-lib/component'; |
||||
|
import { editCalTreeConfig } from './config'; |
||||
|
import { group } from '/@/api/deviceManage'; |
||||
|
import { http } from '/nerv-lib/util/http'; |
||||
|
const emit = defineEmits(['sure']); |
||||
|
const props = defineProps({ params: Object }); |
||||
|
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
||||
|
const config = computed(() => { |
||||
|
return editCalTreeConfig(result); |
||||
|
}); |
||||
|
const visible = ref(false); |
||||
|
const dataSource = ref([]); |
||||
|
const listStyle = { |
||||
|
height: '100%', |
||||
|
width: '100%', |
||||
|
}; |
||||
|
const targetKeys = ref([]); |
||||
|
const currentId = ref(''); |
||||
|
|
||||
|
const clearData = () => { |
||||
|
dataSource.value = []; |
||||
|
targetKeys.value = []; |
||||
|
currentId.value = ''; |
||||
|
}; |
||||
|
const toggle = () => { |
||||
|
visible.value = !visible.value; |
||||
|
clearData(); |
||||
|
visible.value && getData(currentId.value); |
||||
|
}; |
||||
|
|
||||
|
onMounted(() => {}); |
||||
|
|
||||
|
const filterOption = (inputValue: string, option: any) => { |
||||
|
return option?.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1; |
||||
|
}; |
||||
|
|
||||
|
const btnClick = () => { |
||||
|
if (!currentId.value) { |
||||
|
NsMessage.warn('请先选择公司'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
http |
||||
|
.post(group.saveComputeList, { |
||||
|
...props.params, |
||||
|
groupListId: props.params?.id, |
||||
|
saveOrgId: currentId.value, |
||||
|
saveDeviceInfoIds: targetKeys.value, |
||||
|
}) |
||||
|
.then(() => { |
||||
|
emit('sure'); |
||||
|
NsMessage.success('操作成功'); |
||||
|
toggle(); |
||||
|
}); |
||||
|
}; |
||||
|
function treeSelect( |
||||
|
selectedKeys: never[], |
||||
|
e: { |
||||
|
selected: boolean; |
||||
|
selectedNodes: { props: { dataRef: any } }[]; |
||||
|
node: any; |
||||
|
event: any; |
||||
|
}, |
||||
|
) { |
||||
|
console.log(selectedKeys, e); |
||||
|
const { |
||||
|
dataRef: { title }, |
||||
|
} = e.node; |
||||
|
currentId.value = selectedKeys[0]; |
||||
|
getData(currentId.value); |
||||
|
} |
||||
|
const getData = (id) => { |
||||
|
http |
||||
|
.post(group.queryEditCompute, { |
||||
|
orgId: result, |
||||
|
queryOrgId: id, |
||||
|
...props.params, |
||||
|
// energyType: props.params.energyType, |
||||
|
}) |
||||
|
.then((res) => { |
||||
|
dataSource.value = res.data.deviceInfos?.map((item) => { |
||||
|
item['title'] = item.deviceName; |
||||
|
item['key'] = item.id.toString(); |
||||
|
return item; |
||||
|
}); |
||||
|
targetKeys.value = res.data.linkDeviceInfos?.map((item) => { |
||||
|
return item.id.toString(); |
||||
|
}); |
||||
|
}); |
||||
|
}; |
||||
|
defineExpose({ |
||||
|
toggle, |
||||
|
}); |
||||
|
</script> |
||||
|
<style scoped lang="less"> |
||||
|
.drawerContainer { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
</style> |
||||
@ -1,121 +0,0 @@ |
|||||
{ |
|
||||
"data":[ |
|
||||
{ |
|
||||
"title": "1号楼", |
|
||||
"key": "A001", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "1号楼空调用电", |
|
||||
"key": "A002" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "1号楼照明用电", |
|
||||
"key": "A003" |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
"title": "2号楼(A005)", |
|
||||
"key": "A004", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "2号楼空调用电(A007)", |
|
||||
"key": "A006" |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
"title": "3号楼", |
|
||||
"key": "A008", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "3号楼空调用电", |
|
||||
"key": "A009" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "3号楼照明用电", |
|
||||
"key": "A010" |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
], |
|
||||
"insertData":[ |
|
||||
{ |
|
||||
"title": "北京公司", |
|
||||
"key": "A001" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "广州公司", |
|
||||
"key": "A002" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "南京公司", |
|
||||
"key": "A004" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "上海公司", |
|
||||
"key": "A008", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "上海长宁", |
|
||||
"key": "A009" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "上海徐汇", |
|
||||
"key": "A010" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "上海浦东", |
|
||||
"key": "A011" |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
], |
|
||||
"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 commodo", |
|
||||
"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 |
|
||||
} |
|
||||
] |
|
||||
|
|
||||
} |
|
||||
@ -1,506 +0,0 @@ |
|||||
{ |
|
||||
"data":[ |
|
||||
{ |
|
||||
"title": "家居照明", |
|
||||
"key": "1", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "灯泡", |
|
||||
"key": "1-1", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "LED灯泡", |
|
||||
"key": "1-1-1", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "E27 LED灯泡", |
|
||||
"key": "1-1-1-1", |
|
||||
"attr": { |
|
||||
"瓦特": "7W", |
|
||||
"光通量": "500lm", |
|
||||
"色温": "2700K" |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
"title": "E14 小灯泡", |
|
||||
"key": "1-1-1-2", |
|
||||
"attr": { |
|
||||
"瓦特": "4W", |
|
||||
"光通量": "250lm", |
|
||||
"色温": "6500K" |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
"title": "节能灯", |
|
||||
"key": "1-1-2", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "E27 节能灯泡", |
|
||||
"key": "1-1-2-1", |
|
||||
"attr": { |
|
||||
"瓦特": "11W", |
|
||||
"光通量": "800lm", |
|
||||
"色温": "6500K" |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
"title": "灯具", |
|
||||
"key": "1-2", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "吊灯", |
|
||||
"key": "1-2-1", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "水晶吊灯", |
|
||||
"key": "1-2-1-1", |
|
||||
"attr": { |
|
||||
"尺寸": "Φ60cm", |
|
||||
"适用面积": "15-20㎡" |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
"title": "现代简约吊灯", |
|
||||
"key": "1-2-1-2", |
|
||||
"attr": { |
|
||||
"尺寸": "Φ52cm", |
|
||||
"适用面积": "10-15㎡" |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
"title": "台灯", |
|
||||
"key": "1-2-2", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "护眼台灯", |
|
||||
"key": "1-2-2-1", |
|
||||
"attr": { |
|
||||
"瓦特": "18W", |
|
||||
"调光调色": "是" |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
"title": "折叠臂台灯", |
|
||||
"key": "1-2-2-2", |
|
||||
"attr": { |
|
||||
"瓦特": "14W", |
|
||||
"调光调色": "否" |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
"title": "开关插座", |
|
||||
"key": "1-3", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "智能开关", |
|
||||
"key": "1-3-1", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "触控式智能开关", |
|
||||
"key": "1-3-1-1", |
|
||||
"attr": { |
|
||||
"控制方式": "触控/远程", |
|
||||
"兼容性": "ZigBee/WiFi" |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
"title": "插座", |
|
||||
"key": "1-3-2", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "多功能插座", |
|
||||
"key": "1-3-2-1", |
|
||||
"attr": { |
|
||||
"插孔类型": "2/3插", |
|
||||
"USB接口": "有" |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
"title": "电梯", |
|
||||
"key": "3", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "扶梯", |
|
||||
"key": "301" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "直梯", |
|
||||
"key": "302" |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
"title": "冷源源", |
|
||||
"key": "4", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "通风及空调设备", |
|
||||
"key": "5", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "组合式空调机组", |
|
||||
"key": "501" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "新风机组", |
|
||||
"key": "502" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "精密空调", |
|
||||
"key": "503" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "风机盘管", |
|
||||
"key": "504" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "VAV", |
|
||||
"key": "505" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "室外多联机", |
|
||||
"key": "506" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "风幕机", |
|
||||
"key": "507" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "球喷", |
|
||||
"key": "508" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "送风机", |
|
||||
"key": "509" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "排风机", |
|
||||
"key": "510" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "排风兼排烟机", |
|
||||
"key": "511" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "通风机", |
|
||||
"key": "512" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "风阀", |
|
||||
"key": "513" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "风柱式空调", |
|
||||
"key": "514" |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
"title": "照明", |
|
||||
"key": "6", |
|
||||
"children": [ |
|
||||
{ |
|
||||
"title": "多功能传感器", |
|
||||
"key": "701" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "照度传感器", |
|
||||
"key": "702" |
|
||||
}, |
|
||||
{ |
|
||||
"title": "噪声传感器", |
|
||||
"key": "703" |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
], |
|
||||
"dataSource":[ |
|
||||
{ |
|
||||
"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 commodo", |
|
||||
"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 |
|
||||
}, |
|
||||
{ |
|
||||
"id": "d1", |
|
||||
"isDel": "0", |
|
||||
"officesId": "84", |
|
||||
"deviceCode": "37430200144", |
|
||||
"deviceName": "地听测试2", |
|
||||
"category": "1", |
|
||||
"type": "1001", |
|
||||
"energyCount": "1", |
|
||||
"serialNumber": "69", |
|
||||
"pidCode": null, |
|
||||
"brand": "", |
|
||||
"types": "", |
|
||||
"manufacturer": "elit non in", |
|
||||
"contacts": "ad reprehenderit", |
|
||||
"phonenumber": "34", |
|
||||
"position": "in esse commodo", |
|
||||
"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": "802", |
|
||||
"ip": "10.5.36.0", |
|
||||
"port": "6000", |
|
||||
"com": "", |
|
||||
"slaveAddress": "123测试", |
|
||||
"dlt": "", |
|
||||
"conversionIdentifier": "48", |
|
||||
"multiplicationAdjustment": "1", |
|
||||
"accessMethod": "1", |
|
||||
"replacementFrequency": "0", |
|
||||
"dataDetail": "sit", |
|
||||
"insertTime": "2024-02-28 11:26:58", |
|
||||
"children": null, |
|
||||
"devicePointList": null, |
|
||||
"insertUser": null |
|
||||
}, |
|
||||
{ |
|
||||
"id": "d2", |
|
||||
"isDel": "0", |
|
||||
"officesId": "84", |
|
||||
"deviceCode": "1235623", |
|
||||
"deviceName": "测试设备2", |
|
||||
"category": "1", |
|
||||
"type": "1001", |
|
||||
"energyCount": "是", |
|
||||
"serialNumber": "69", |
|
||||
"pidCode": null, |
|
||||
"brand": "", |
|
||||
"types": "", |
|
||||
"manufacturer": "elit non in", |
|
||||
"contacts": "ad reprehenderit", |
|
||||
"phonenumber": "34", |
|
||||
"position": "in esse commodo", |
|
||||
"activeState": "1", |
|
||||
"measurementDirection": "1", |
|
||||
"deviceMagnification": 62, |
|
||||
"deviceAccuracy": "89", |
|
||||
"frequency": "anim consequat irure", |
|
||||
"standardFrequency": "ut elit", |
|
||||
"deviceHead": "pariatur ex velit", |
|
||||
"constructor": null, |
|
||||
"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": "2024-02-28 11:31:57", |
|
||||
"children": null, |
|
||||
"devicePointList": null, |
|
||||
"insertUser": null |
|
||||
}, |
|
||||
{ |
|
||||
"id": "d7", |
|
||||
"isDel": "0", |
|
||||
"officesId": "", |
|
||||
"deviceCode": "0213", |
|
||||
"deviceName": "测试", |
|
||||
"category": "1", |
|
||||
"type": "1001", |
|
||||
"energyCount": "1", |
|
||||
"serialNumber": "", |
|
||||
"pidCode": null, |
|
||||
"brand": "6da085e5-956d-4000-bd3c-ebb01a9c99a1", |
|
||||
"types": "d7a8aede-b821-4ff2-953d-601a20e5a948", |
|
||||
"manufacturer": "", |
|
||||
"contacts": "", |
|
||||
"phonenumber": null, |
|
||||
"position": "", |
|
||||
"activeState": "", |
|
||||
"measurementDirection": "", |
|
||||
"deviceMagnification": null, |
|
||||
"deviceAccuracy": null, |
|
||||
"frequency": "", |
|
||||
"standardFrequency": "", |
|
||||
"deviceHead": "", |
|
||||
"constructor": "", |
|
||||
"voltageType": "", |
|
||||
"pt": null, |
|
||||
"ct": null, |
|
||||
"communicationProtocol": "", |
|
||||
"ip": "", |
|
||||
"port": "", |
|
||||
"com": "", |
|
||||
"slaveAddress": "", |
|
||||
"dlt": "", |
|
||||
"conversionIdentifier": "1", |
|
||||
"multiplicationAdjustment": "1", |
|
||||
"accessMethod": "", |
|
||||
"replacementFrequency": "0", |
|
||||
"dataDetail": "", |
|
||||
"insertTime": "2024-03-14 20:01:53", |
|
||||
"children": null, |
|
||||
"devicePointList": null, |
|
||||
"insertUser": "" |
|
||||
}, |
|
||||
{ |
|
||||
"id": "d3", |
|
||||
"isDel": "0", |
|
||||
"officesId": "84", |
|
||||
"deviceCode": "81", |
|
||||
"deviceName": "设备名称1111", |
|
||||
"category": "1", |
|
||||
"type": "1001", |
|
||||
"energyCount": "1", |
|
||||
"serialNumber": "69", |
|
||||
"pidCode": null, |
|
||||
"brand": "6da085e5-956d-4000-bd3c-ebb01a9c99a1", |
|
||||
"types": "d7a8aede-b821-4ff2-953d-601a20e5a948", |
|
||||
"manufacturer": "elit non in", |
|
||||
"contacts": "ad reprehenderit", |
|
||||
"phonenumber": "34", |
|
||||
"position": "in esse commodo", |
|
||||
"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": "2024-03-15 17:34:24", |
|
||||
"children": null, |
|
||||
"devicePointList": null, |
|
||||
"insertUser": null |
|
||||
}, |
|
||||
{ |
|
||||
"id": "d43fdfff_02_0001", |
|
||||
"isDel": "0", |
|
||||
"officesId": "843fdffff213d2d3", |
|
||||
"deviceCode": "00037430200143", |
|
||||
"deviceName": "应感者酸严", |
|
||||
"category": "1", |
|
||||
"type": "1001", |
|
||||
"energyCount": "esse consequat", |
|
||||
"serialNumber": "69", |
|
||||
"pidCode": null, |
|
||||
"brand": "", |
|
||||
"types": "", |
|
||||
"manufacturer": "elit non in", |
|
||||
"contacts": "ad reprehenderit", |
|
||||
"phonenumber": "34", |
|
||||
"position": "in esse commodo", |
|
||||
"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": "2024-04-29 11:12:43", |
|
||||
"children": null, |
|
||||
"devicePointList": null, |
|
||||
"insertUser": null |
|
||||
} |
|
||||
] |
|
||||
|
|
||||
} |
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,24 @@ |
|||||
|
<template> |
||||
|
<a-tabs v-model:activeKey="activeKey" style="height: 5%"> |
||||
|
<a-tab-pane key="1" tab="综合数据" /> |
||||
|
<a-tab-pane key="2" tab="历史数据" force-render>Content of Tab Pane 2</a-tab-pane> |
||||
|
<a-tab-pane key="3" tab="平均数据">Content of Tab Pane 3</a-tab-pane> |
||||
|
</a-tabs> |
||||
|
<!-- <ns-view-list-table v-bind="tableConfig" v-if="activeKey == '1'" /> --> |
||||
|
|
||||
|
<aggregate-data ref="aggregateDataRef" v-if="activeKey == '1'" style="height: 85%" /> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { ref } from 'vue'; |
||||
|
import { tableConfig } from './config'; |
||||
|
import aggregateData from './aggregateData/index.vue'; |
||||
|
|
||||
|
const aggregateDataRef = ref(); |
||||
|
|
||||
|
var activeKey = ref('1'); |
||||
|
|
||||
|
defineOptions({ |
||||
|
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效 |
||||
|
}); |
||||
|
</script> |
||||
|
<style lang="less" scoped></style> |
||||
Loading…
Reference in new issue