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