chenpingsen
5 months ago
33 changed files with 1494 additions and 240 deletions
|
After Width: | Height: | Size: 1.9 KiB |
@ -1,10 +1,11 @@ |
|||
const BASE_URL = '/carbon-smart'; |
|||
import { BASE_URL } from './index'; |
|||
export enum device { |
|||
queryDeviceTree = `${BASE_URL}/deviceInfo/queryDeviceTree`, |
|||
queryDevicePage = `${BASE_URL}/deviceInfo/queryDevicePage`, |
|||
dropArea = `${BASE_URL}/deviceInfo/dropArea`, |
|||
queryDeviceTree = `${BASE_URL}/deviceInfo/queryDeviceTree`, // 左侧树
|
|||
queryDevicePage = `${BASE_URL}/deviceInfo/queryDevicePage`, // 列表
|
|||
dropArea = `${BASE_URL}/deviceInfo/dropArea`, // 查询下拉区域
|
|||
} |
|||
|
|||
export enum group { |
|||
queryDeviceGroupTree = `${BASE_URL}/deviceGroup/queryDeviceGroupTree`, |
|||
queryDeviceGroupTree = `${BASE_URL}/deviceGroup/queryDeviceGroupTree`, // 左侧树
|
|||
creatOrUpdate = `${BASE_URL}/deviceGroup/creatOrUpdate`, // 左侧树节点新增编辑
|
|||
} |
|||
|
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<ns-modal |
|||
ref="modalRef" |
|||
v-bind="extraModalConfig" |
|||
destroyOnClose |
|||
v-model:visible="visible" |
|||
:title="title" |
|||
:okButtonProps="buttonProps" |
|||
@ok="handleOk"> |
|||
<ns-form ref="formRef" :schemas="schemas" :model="formData" formLayout="formVertical" /> |
|||
</ns-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { computed, ref, toRefs, watch } from 'vue'; |
|||
import { HttpRequestConfig, NsMessage, useApi } from '/nerv-lib/saas'; |
|||
import { useRoute } from 'vue-router'; |
|||
type Props = { |
|||
title?: string; |
|||
schemas: Array<any>; |
|||
api: string | object | Function; |
|||
data?: object; |
|||
extraModalConfig?: object; |
|||
}; |
|||
const route = useRoute(); |
|||
const { httpRequest } = useApi(); |
|||
|
|||
const props = withDefaults(defineProps<Props>(), { |
|||
title: '新增', |
|||
}); |
|||
const { schemas } = toRefs(props); |
|||
const formData = ref(); |
|||
watch( |
|||
() => props?.data, |
|||
(val) => { |
|||
formData.value = val; |
|||
}, |
|||
{ |
|||
immediate: true, |
|||
deep: true, |
|||
}, |
|||
); |
|||
const modalRef = ref(); |
|||
const formRef = ref(); |
|||
const visible = ref(false); |
|||
const validateResult = computed(() => { |
|||
return !formRef.value?.validateResult; |
|||
}); |
|||
const toggle = () => { |
|||
visible.value = !visible.value; |
|||
}; |
|||
|
|||
const setLoading = (loading = true) => { |
|||
buttonProps.value.loading = loading; |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
setLoading(true); |
|||
formRef.value |
|||
.triggerSubmit() |
|||
.then((data: any) => { |
|||
const { api } = props; |
|||
const requestConfig: HttpRequestConfig = { method: 'POST' }; |
|||
const { params } = route; |
|||
|
|||
httpRequest({ api, params: data, pathParams: params, requestConfig }) |
|||
.then(() => { |
|||
NsMessage.success('操作成功', 1, () => { |
|||
toggle(); |
|||
}); |
|||
}) |
|||
.finally(() => { |
|||
setLoading(false); |
|||
}); |
|||
}) |
|||
.catch(() => {}); |
|||
}; |
|||
|
|||
const buttonProps = ref({ |
|||
disabled: validateResult, |
|||
loading: false, |
|||
}); |
|||
|
|||
defineExpose({ |
|||
toggle, |
|||
}); |
|||
</script> |
|||
<style lang="less"></style> |
|||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 838 B |
|
After Width: | Height: | Size: 969 B |
|
After Width: | Height: | Size: 549 B |
@ -0,0 +1,67 @@ |
|||
const Base = () => import('/nerv-lib/saas/view/system/layout/content.vue'); |
|||
const equipment = { |
|||
path: '/monitor', |
|||
name: 'Monitor', |
|||
meta: { title: '监控中心', icon: 'jiankongzhongxin', index: 1 }, |
|||
redirect: { name: 'EnvironmentMonitor' }, |
|||
children: [ |
|||
{ |
|||
path: 'environmentMonitor', |
|||
name: 'EnvironmentMonitor', |
|||
meta: { title: '环境监测', hideChildren: true, icon: 'huanjingjiance' }, |
|||
component: Base, |
|||
redirect: { name: 'EnvironmentMonitorIndex' }, |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
name: 'EnvironmentMonitorIndex', |
|||
component: () => import('/@/view/monitor/environmentMonitor/index.vue'), |
|||
meta: { |
|||
title: '环境监测', |
|||
keepAlive: true, |
|||
// backApi: [],
|
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
path: 'deviceMonitor', |
|||
name: 'DeviceMonitor', |
|||
meta: { title: '设备监测', hideChildren: true, icon: 'huanjingjiance' }, |
|||
component: Base, |
|||
redirect: { name: 'DeviceMonitorIndex' }, |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
name: 'DeviceMonitorIndex', |
|||
component: () => import('/@/view/monitor/deviceMonitor/index.vue'), |
|||
meta: { |
|||
title: '设备监测', |
|||
keepAlive: true, |
|||
// backApi: [],
|
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
// {
|
|||
// path: 'group',
|
|||
// name: 'Group',
|
|||
// meta: { title: '分组管理', hideChildren: true, icon: 'shebeiguanli' },
|
|||
// component: Base,
|
|||
// redirect: { name: 'GroupIndex' },
|
|||
// children: [
|
|||
// {
|
|||
// path: 'index',
|
|||
// name: 'GroupIndex',
|
|||
// component: () => import('/@/view/monitor/group/index.vue'),
|
|||
// meta: {
|
|||
// title: '分组管理',
|
|||
// keepAlive: true,
|
|||
// // backApi: [],
|
|||
// },
|
|||
// },
|
|||
// ],
|
|||
// },
|
|||
], |
|||
}; |
|||
export default equipment; |
|||
@ -0,0 +1,180 @@ |
|||
import { dateUtil } from '/nerv-lib/util/date-util'; |
|||
import data from './mock.json'; |
|||
export const tableConfig = { |
|||
title: '设备台账', |
|||
// api: '/carbon_emission/device/getDeviceList',
|
|||
value: data.dataSource, |
|||
treeConfig: { |
|||
header: { |
|||
icon: 'orgLink', |
|||
title: '设备类别', |
|||
}, |
|||
defaultExpandAll: true, |
|||
api: () => { |
|||
return new Promise((resolve) => { |
|||
setTimeout(() => { |
|||
resolve(data); |
|||
}, 100); |
|||
}); |
|||
}, |
|||
formConfig: { |
|||
schemas: [ |
|||
{ |
|||
field: 'name', |
|||
label: '设备名称', |
|||
component: 'NsInput', |
|||
autoSubmit: true, |
|||
componentProps: { |
|||
placeholder: '请输入', |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
params: { |
|||
page: 0, |
|||
pageSize: 10, |
|||
}, |
|||
rowSelection: null, |
|||
columns: [ |
|||
{ |
|||
title: '设备名称', |
|||
dataIndex: 'id', |
|||
}, |
|||
{ |
|||
title: '设备型号', |
|||
dataIndex: 'deviceCode', |
|||
}, |
|||
{ |
|||
title: 'SN码', |
|||
dataIndex: 'deviceName', |
|||
textNumber: 8, |
|||
textEllipsis: true, |
|||
}, |
|||
{ |
|||
title: '设备一级区域', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '设备二级区域', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '设备详细位置', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '设备规格', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '设备厂商纳税人识别号', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '厂商联系人', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '设备描述', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: 'IP地址', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '生产日期', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '采购日期', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '启用日期', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '设备成本（元）', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '使用期限', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '额定功率', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '特殊参数', |
|||
dataIndex: 'position', |
|||
}, |
|||
], |
|||
|
|||
formConfig: { |
|||
schemas: [ |
|||
{ |
|||
field: 'name', |
|||
label: '设备名称', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'provider', |
|||
label: '设备厂商', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'payWay', |
|||
label: '设备区域', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
placeholder: '请选择', |
|||
options: [ |
|||
{ |
|||
label: '全部', |
|||
value: '', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'createTime', |
|||
label: '生产日期', |
|||
component: 'NsRangePicker', |
|||
fieldMap: ['queryStartDate', 'queryEndDate'], |
|||
componentProps: { |
|||
valueFormat: 'YYYY-MM-DD', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'createTime1', |
|||
label: '采购日期', |
|||
component: 'NsRangePicker', |
|||
fieldMap: ['queryStartDate', 'queryEndDate'], |
|||
componentProps: { |
|||
valueFormat: 'YYYY-MM-DD', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'createTime2', |
|||
label: '启用日期', |
|||
component: 'NsRangePicker', |
|||
fieldMap: ['queryStartDate', 'queryEndDate'], |
|||
componentProps: { |
|||
valueFormat: 'YYYY-MM-DD', |
|||
}, |
|||
}, |
|||
], |
|||
params: {}, |
|||
}, |
|||
// pagination: { pageSizeOptions: false },
|
|||
rowKey: 'uuid', |
|||
}; |
|||
@ -0,0 +1,210 @@ |
|||
|
|||
<template> |
|||
|
|||
<div ref="chart" style="width: 100%; height: 80%;"></div> |
|||
|
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent, onMounted, ref, watch } from 'vue'; |
|||
import * as echarts from 'echarts'; |
|||
|
|||
const data = [ |
|||
{ |
|||
date: '2023-12-01 0:00', |
|||
unit: 'V', |
|||
data: [ |
|||
{ |
|||
name: 'AC_002（暖通电表）', |
|||
value: '21' |
|||
}, |
|||
{ |
|||
name: 'AC_003（照明电表）', |
|||
value: '36' |
|||
}, |
|||
{ |
|||
name: 'AC_004（给排水电表）', |
|||
value: '5' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
date: '2023-12-02 0:00', |
|||
unit: 'V', |
|||
data: [ |
|||
{ |
|||
name: 'AC_002（暖通电表）', |
|||
value: '26' |
|||
}, |
|||
{ |
|||
name: 'AC_003（照明电表）', |
|||
value: '25' |
|||
}, |
|||
{ |
|||
name: 'AC_004（给排水电表）', |
|||
value: '47' |
|||
} |
|||
] |
|||
|
|||
}, |
|||
{ |
|||
date: '2023-12-03 0:00', |
|||
unit: 'V', |
|||
data: [ |
|||
{ |
|||
name: 'AC_002（暖通电表）', |
|||
value: '18' |
|||
}, |
|||
{ |
|||
name: 'AC_003（照明电表）', |
|||
value: '22' |
|||
}, |
|||
{ |
|||
name: 'AC_004（给排水电表）', |
|||
value: '26' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
date: '2023-12-04 0:00', |
|||
unit: 'V', |
|||
data: [ |
|||
{ |
|||
name: 'AC_002（暖通电表）', |
|||
value: '40' |
|||
}, |
|||
{ |
|||
name: 'AC_003（照明电表）', |
|||
value: '15' |
|||
}, |
|||
{ |
|||
name: 'AC_004（给排水电表）', |
|||
value: '12' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
date: '2023-12-05 0:00', |
|||
unit: 'V', |
|||
data: [ |
|||
{ |
|||
name: 'AC_002（暖通电表）', |
|||
value: '15' |
|||
}, |
|||
{ |
|||
name: 'AC_003（照明电表）', |
|||
value: '18' |
|||
}, |
|||
{ |
|||
name: 'AC_004（给排水电表）', |
|||
value: '15' |
|||
} |
|||
] |
|||
}, |
|||
]; |
|||
|
|||
export default defineComponent({ |
|||
name: 'Graph', |
|||
setup() { |
|||
const chart = ref(null); |
|||
|
|||
onMounted(() => { |
|||
|
|||
var seriesList = [] |
|||
var date = [] |
|||
var legendList: string|any[] = [] |
|||
for (let i = 0; i < data.length; i++) { |
|||
|
|||
date.push(data[i].date) |
|||
|
|||
for (let j = 0; j < data[i].data.length; j++) { |
|||
if (seriesList.length < j + 1) { |
|||
seriesList.push( |
|||
{ |
|||
name: data[i].data[j].name, |
|||
data: [data[i].data[j].value], |
|||
type: 'line', |
|||
smooth: true |
|||
} |
|||
) |
|||
} else { |
|||
seriesList[j].data.push(data[i].data[j].value) |
|||
} |
|||
|
|||
if (legendList.length == 0 || legendList.length < j + 1) { |
|||
legendList.push(data[i].data[j].name) |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
const option = { |
|||
|
|||
|
|||
legend: { |
|||
data: legendList, |
|||
orient: 'horizontal', |
|||
bottom: 30 |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
formatter: (params: any) => { |
|||
const date = params[0].name; |
|||
const values = params.map((param: any) => { |
|||
const unit = data.find(d => d.date === date)?.unit || ''; |
|||
return `<tr> |
|||
<td>${param.marker}${param.seriesName}</td> |
|||
<td style="text-align: right;">${param.value} ${unit}</td> |
|||
</tr>`; |
|||
}).join(''); |
|||
return `<div>${date}</div><table style="width: 100%;">${values}</table>`; |
|||
} |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: date |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
dataZoom: [ |
|||
// { |
|||
// type: 'inside', |
|||
// start: 0, |
|||
// end: 10 |
|||
// }, |
|||
{ |
|||
height: 10, |
|||
start: 0, |
|||
end: 100, |
|||
handleSize: '300%', // 设置滑块的大小 |
|||
bottom: 15, |
|||
|
|||
} |
|||
], |
|||
series: seriesList |
|||
// series: [ |
|||
|
|||
// { |
|||
// data: [820, 932, 901, 934, 1290, 1330, 1320], |
|||
// type: 'line' |
|||
// } |
|||
// ] |
|||
}; |
|||
|
|||
const chartInstance = echarts.init(chart.value); |
|||
chartInstance.setOption(option); |
|||
}); |
|||
|
|||
return { chart }; |
|||
} |
|||
}) |
|||
</script> |
|||
<style lang="less" scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,76 @@ |
|||
<template> |
|||
<a-row type="flex"> |
|||
<a-col :span="4"> |
|||
<div style="padding: 0 20px; width: 100%; height: 100%;"> |
|||
<tree ref="treeRef"></tree> |
|||
</div> |
|||
</a-col> |
|||
<a-col :span="20"> |
|||
<div style="width: 100%; height: 100%;"> |
|||
<div class="ns-right-title"> |
|||
<span>历史数据</span> |
|||
<div class="button"> |
|||
<ns-icon name="biaoge" size="18" style="margin-right: 10px;"/> |
|||
<ns-icon :name="iconName" size="18" style="margin-right: 10px;" @click="change"/> |
|||
</div> |
|||
</div> |
|||
<graph ref="graphRef" v-if="isGraph"></graph> |
|||
<environment-table ref="tableRef" v-else></environment-table> |
|||
</div> |
|||
</a-col> |
|||
</a-row> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref } from 'vue'; |
|||
import tree from './tree/index.vue'; |
|||
import graph from './graph/index.vue'; |
|||
import environmentTable from './table/index.vue'; |
|||
|
|||
const iconName = ref('biaoge'); |
|||
|
|||
const treeRef = ref(); |
|||
const graphRef = ref(); |
|||
const tableRef = ref(); |
|||
|
|||
let isGraph = ref(true) |
|||
|
|||
defineOptions({ |
|||
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效 |
|||
}); |
|||
|
|||
function change() { |
|||
|
|||
isGraph.value = !isGraph.value |
|||
if (iconName.value == 'biaoge') { |
|||
iconName.value = 'bingtu' |
|||
} else { |
|||
iconName.value = 'biaoge' |
|||
} |
|||
|
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.ns-right-title { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
user-select: text; |
|||
margin-bottom: 5px; |
|||
padding-bottom: 10px; |
|||
padding-top: 10px; |
|||
border-bottom: 1px solid #e9e9e9; |
|||
|
|||
> span { |
|||
padding-left: 10px; |
|||
line-height: 20px; |
|||
} |
|||
} |
|||
.button { |
|||
display: inline-block; |
|||
padding-right: 10px; |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,186 @@ |
|||
<template> |
|||
<a-table :columns="columns" :data-source="data" bordered /> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import type { TableColumnType } from 'ant-design-vue'; |
|||
|
|||
const data = [ |
|||
{ |
|||
key: '1', |
|||
name: 'AC_002（暖通电表）', |
|||
position: 'A 相电压', |
|||
unit: 'V', |
|||
date: '2023-12-01', |
|||
'1:00': '3626', |
|||
}, |
|||
{ |
|||
key: '1', |
|||
name: 'AC_002（暖通电表）', |
|||
position: 'A 相电压', |
|||
unit: 'V', |
|||
date: '2023-12-01', |
|||
'1:00': '3626', |
|||
}, |
|||
{ |
|||
key: '2', |
|||
name: 'AC_003（照明电表）', |
|||
position: 'A 相电压', |
|||
unit: 'V', |
|||
date: '2023-12-01', |
|||
'1:00': '3626', |
|||
}, |
|||
{ |
|||
key: '2', |
|||
name: 'AC_003（照明电表）', |
|||
position: 'A 相电压', |
|||
unit: 'V', |
|||
date: '2023-12-01', |
|||
'1:00': '3626', |
|||
}, |
|||
{ |
|||
key: '3', |
|||
name: 'AC_004（给排水电表）', |
|||
position: 'A 相电压', |
|||
unit: 'V', |
|||
date: '2023-12-01', |
|||
'1:00': '3626', |
|||
}, |
|||
]; |
|||
|
|||
export default defineComponent({ |
|||
name: 'EnvironmentTable', |
|||
setup() { |
|||
const getRowSpan = (dataIndex: string, record, data, dependents: string[] = []) => { |
|||
let rowSpan = 1; |
|||
for (let i = data.indexOf(record) + 1; i < data.length; i++) { |
|||
let shouldMerge = true; |
|||
for (const dependent of dependents) { |
|||
if (data[i][dependent] !== record[dependent]) { |
|||
shouldMerge = false; |
|||
break; |
|||
} |
|||
} |
|||
if (shouldMerge && data[i][dataIndex] === record[dataIndex]) { |
|||
rowSpan++; |
|||
} else { |
|||
break; |
|||
} |
|||
} |
|||
return rowSpan; |
|||
}; |
|||
|
|||
const columns: TableColumnType[] = [ |
|||
{ |
|||
title: '序号', |
|||
dataIndex: 'key', |
|||
customCell: (record, rowIndex) => { |
|||
const rowSpan = getRowSpan('name', record, data); |
|||
if (rowIndex != 0 && data[rowIndex-1].key == record.key) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
} |
|||
} |
|||
return { |
|||
rowSpan: rowSpan, |
|||
}; |
|||
|
|||
}, |
|||
}, |
|||
{ |
|||
title: '设备名称', |
|||
dataIndex: 'name', |
|||
customCell: (record, rowIndex) => { |
|||
const rowSpan = getRowSpan('name', record, data); |
|||
if (rowIndex != 0 && data[rowIndex-1].name == record.name) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
} |
|||
} |
|||
return { |
|||
rowSpan: rowSpan, |
|||
}; |
|||
|
|||
// if (rowIndex === data.indexOf(record)) { |
|||
// return { |
|||
// rowSpan: rowSpan, |
|||
// }; |
|||
// } |
|||
// return { |
|||
// rowSpan: 0, |
|||
// colSpan: 0, |
|||
// }; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '设备点位', |
|||
dataIndex: 'position', |
|||
customCell: (record, rowIndex) => { |
|||
const rowSpan = getRowSpan('position', record, data, ['name']); |
|||
if (rowIndex != 0 && data[rowIndex-1].name == record.name && data[rowIndex-1].position == record.position) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
} |
|||
} |
|||
return { |
|||
rowSpan: rowSpan, |
|||
}; |
|||
// if (rowIndex === data.indexOf(record)) { |
|||
// return { |
|||
// rowSpan: rowSpan, |
|||
// }; |
|||
// } |
|||
// return { |
|||
// rowSpan: 0, |
|||
// colSpan: 0, |
|||
// }; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '计量单位', |
|||
dataIndex: 'unit', |
|||
customCell: (record, rowIndex) => { |
|||
const rowSpan = getRowSpan('unit', record, data, ['name', 'position']); |
|||
if (rowIndex != 0 && data[rowIndex-1].name == record.name && data[rowIndex-1].position == record.position && data[rowIndex-1].unit == record.unit) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
} |
|||
} |
|||
return { |
|||
rowSpan: rowSpan, |
|||
}; |
|||
// if (rowIndex === data.indexOf(record)) { |
|||
// return { |
|||
// rowSpan: rowSpan, |
|||
// }; |
|||
// } |
|||
// return { |
|||
// rowSpan: 0, |
|||
// colSpan: 0, |
|||
// }; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '日期', |
|||
dataIndex: 'date', |
|||
}, |
|||
{ |
|||
title: '1:00', |
|||
dataIndex: '1:00', |
|||
}, |
|||
]; |
|||
|
|||
return { |
|||
data, |
|||
columns, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,225 @@ |
|||
<template> |
|||
<div class="parent-container"> |
|||
<div class="ns-tree-title"> |
|||
<span>设备列表</span> |
|||
</div> |
|||
<a-tree-select |
|||
v-model:value="value" |
|||
style="width: 100%" |
|||
|
|||
:tree-line="treeLine && { showLeafIcon }" |
|||
:tree-data="treeData1" |
|||
> |
|||
<!-- <template #title="{ value: val, title }"> |
|||
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b> |
|||
<template v-else>{{ title }}</template> |
|||
</template> --> |
|||
</a-tree-select> |
|||
|
|||
<a-tree |
|||
v-model:expandedKeys="expandedKeys" |
|||
v-model:selectedKeys="selectedKeys" |
|||
v-model:checkedKeys="checkedKeys" |
|||
checkable |
|||
style="width: 100%; margin-bottom: 10px;" |
|||
:tree-data="treeData2" |
|||
> |
|||
<!-- <template #title="{ title, key }"> |
|||
<span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span> |
|||
<template v-else>{{ title }}</template> |
|||
</template> --> |
|||
</a-tree> |
|||
|
|||
<div class="fixed-bottom"> |
|||
<a-divider /> |
|||
<a-select |
|||
ref="select" |
|||
v-model:value="selectedValue" |
|||
placeholder="请选择点位" |
|||
style="width: 100%; margin-bottom: 10px;" |
|||
:options="options1" |
|||
></a-select> |
|||
<a-select |
|||
v-model:value="frequencyValue" |
|||
placeholder="请选择频率" |
|||
style="width: 100%; margin-bottom: 10px;" |
|||
:options="options2" |
|||
></a-select> |
|||
<a-range-picker v-model:value="dateRange" style="width: 100%; margin-bottom: 10px;" :placeholder="['请选择日期','请选择日期']"/> |
|||
<a-button type="primary" style="width: 100%; margin-bottom: 10px;" @click="getDianWeiList">查询</a-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue'; |
|||
import { defineComponent, ref, watch ,onMounted } from 'vue'; |
|||
import dayjs, { Dayjs } from 'dayjs'; |
|||
|
|||
const treeData2: TreeProps['treeData'] = [ |
|||
{ |
|||
title: 'AC_001(总电表)', |
|||
key: '1', |
|||
children: [ |
|||
{ |
|||
title: 'AC_002(暖通电表)', |
|||
key: '2', |
|||
}, |
|||
{ |
|||
title: 'AC_003(照明电表)', |
|||
key: '3', |
|||
}, |
|||
{ |
|||
title: 'AC_004(给排水电表)', |
|||
key: '4', |
|||
}, |
|||
{ |
|||
title: 'AC_005(通风电表)', |
|||
key: '5', |
|||
}, |
|||
{ |
|||
title: 'AC_006(电动门电表)', |
|||
key: '6', |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
|
|||
export default defineComponent({ |
|||
name: 'Tree', |
|||
setup() { |
|||
const treeLine = ref(true); |
|||
const showLeafIcon = ref(false); |
|||
const value = ref<string>(); |
|||
|
|||
const treeData1 = ref<TreeSelectProps['treeData']>([ |
|||
{ |
|||
title: '3.电梯', |
|||
value: '3', |
|||
children: [ |
|||
{ |
|||
title: '301.扶梯', |
|||
value: '301', |
|||
}, |
|||
{ |
|||
title: '302.直梯', |
|||
value: '302', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
title: '4.冷热源', |
|||
value: '4', |
|||
children: [ |
|||
{ |
|||
title: '401.冷水机组', |
|||
value: '401', |
|||
}, |
|||
{ |
|||
title: '402.热泵机组', |
|||
value: '402', |
|||
}, |
|||
{ |
|||
title: '403.锅炉', |
|||
value: '403', |
|||
}, |
|||
{ |
|||
title: '404.水处理机组', |
|||
value: '404', |
|||
}, |
|||
], |
|||
}, |
|||
]); |
|||
|
|||
const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']); |
|||
const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']); |
|||
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']); |
|||
|
|||
const options1 = ref<SelectProps['options']>([]); |
|||
const options2 = ref<SelectProps['options']>([ |
|||
{ |
|||
value: '1', |
|||
label: '5分钟', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '10分钟', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '30分钟', |
|||
}, |
|||
{ |
|||
value: '4', |
|||
label: '1小时', |
|||
}, |
|||
]); |
|||
const selectedValue = ref<string | undefined>(); |
|||
const frequencyValue = ref<string | undefined>(); |
|||
const dateRange = ref<[Dayjs, Dayjs] | undefined>(); |
|||
|
|||
const getDianWeiList = () => { |
|||
console.log('getDianWeiList 被调用'); |
|||
options1.value = [ |
|||
{ value: '1', label: 'A 项电压' }, |
|||
{ value: '2', label: 'B 项电压' }, |
|||
{ value: '3', label: 'C 项电压' }, |
|||
{ value: '4', label: 'AB 线电压' }, |
|||
{ value: '5', label: 'BC 线电压' }, |
|||
{ value: '6', label: 'A 项电流' }, |
|||
{ value: '7', label: 'B 项电流' }, |
|||
]; |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
getDianWeiList(); |
|||
}); |
|||
|
|||
const dateFormat = 'YYYY-MM-DD'; |
|||
|
|||
|
|||
|
|||
return { |
|||
treeLine, |
|||
showLeafIcon, |
|||
value, |
|||
treeData1, |
|||
treeData2, |
|||
expandedKeys, |
|||
selectedKeys, |
|||
checkedKeys, |
|||
options1, |
|||
options2, |
|||
selectedValue, |
|||
frequencyValue, |
|||
dateRange, |
|||
getDianWeiList, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.ns-tree-title { |
|||
user-select: text; |
|||
margin-bottom: 5px; |
|||
padding-bottom: 10px; |
|||
padding-top: 10px; |
|||
border-bottom: 1px solid #e9e9e9; |
|||
> span { |
|||
padding-left: 10px; |
|||
line-height: 20px; |
|||
} |
|||
} |
|||
.parent-container { |
|||
position: relative; |
|||
height: 100%; |
|||
} |
|||
|
|||
.fixed-bottom { |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 100%; |
|||
margin-bottom: 10px; |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 1.9 KiB |
Loading…
Reference in new issue