xuziqiang
4 months ago
48 changed files with 1751 additions and 1198 deletions
@ -0,0 +1,13 @@ |
|||
export enum deviceMonitor { |
|||
// getTableList = '/carbon/emission/factor/queryCarbonFactorPage',
|
|||
// addNewData = '/carbon/emission/factor/creatOrUpdate',
|
|||
// editUser = '/carbon-smart/api/user/edit',
|
|||
// frozen = '/carbon-smart/api/user/frozen',
|
|||
// resetPwd = '/carbon-smart/api/user/resetPwd',
|
|||
// del = '/carbon-smart/api/user/del',
|
|||
// batchDel = '/carbon-smart/api/user/batchDel',
|
|||
// getCarbonFactorTree = '/carbon/emission/type/getCarbonFactorTree',
|
|||
// queryDeptTree = '/carbon-smart/api/user/queryDeptTree',
|
|||
// queryUserPerList = '/carbon-smart/api/user/queryUserPerList',
|
|||
getDeviceGraph = '/carbon-smart/api/monitor/getDeviceGraph', |
|||
} |
|||
@ -0,0 +1,107 @@ |
|||
<template> |
|||
<a-steps direction="vertical" :current="size"> |
|||
<template v-for="(item, index) in dataSource" :key="index"> |
|||
<a-step> |
|||
<template #icon> |
|||
<img :style="{ width: item.status === '2' ? '19px' : '20px' }" :src="getSrc(item)" /> |
|||
</template> |
|||
<template #description> |
|||
<div |
|||
style=" |
|||
width: 400px; |
|||
min-height: 0px; |
|||
background-color: #f8fafc; |
|||
margin-left: 20px; |
|||
border-radius: 4px; /* 设置圆角半径 */ |
|||
padding: 12px; |
|||
"> |
|||
<div style="width: 100%; height: 30px; display: flex; position: relative"> |
|||
<a-tag |
|||
style="width: 60px; height: 20px; text-align: center" |
|||
:color="getColor(item)" |
|||
>{{ getStatus(item) }}</a-tag |
|||
> |
|||
<div |
|||
style=" |
|||
position: absolute; |
|||
left: 35%; |
|||
top: -2px; |
|||
transform: translateX(-50%); |
|||
color: #3a3a3a; |
|||
" |
|||
>{{ item.name }}</div |
|||
> |
|||
<div style="position: absolute; right: 10px; top: -2px; color: #ff7602" |
|||
>2024-03-11 11:30:06</div |
|||
> |
|||
</div> |
|||
<div style="width: 100%; color: #3a3a3a; height: 25px; overflow: auto"> |
|||
工单已完成并通过验收</div |
|||
> |
|||
</div> |
|||
</template> |
|||
</a-step> |
|||
</template> |
|||
</a-steps> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { toRefs } from 'vue'; |
|||
|
|||
type Props = { |
|||
dataSource: any; |
|||
size: any; |
|||
}; |
|||
const props = withDefaults(defineProps<Props>(), {}); |
|||
const getColor = (item: any) => { |
|||
switch (item.status) { |
|||
case '0': |
|||
return '#ff7602'; |
|||
case '1': |
|||
return '#00a1e6'; |
|||
case '2': |
|||
return '#04d919'; |
|||
case '3': |
|||
return '#d9001b'; |
|||
case '4': |
|||
return '#a6a6a6'; |
|||
} |
|||
}; |
|||
const getSrc = (item: any) => { |
|||
return '../../../../src/icon/status-' + item.status + '.svg'; |
|||
}; |
|||
const getStatus = (item: any) => { |
|||
switch (item.status) { |
|||
case '0': |
|||
return '待处理'; |
|||
case '1': |
|||
return '处理中'; |
|||
case '2': |
|||
return '已完成'; |
|||
case '3': |
|||
return '超时'; |
|||
case '4': |
|||
return '已关闭'; |
|||
} |
|||
}; |
|||
const { dataSource } = toRefs(props); |
|||
const { size } = toRefs(props); |
|||
|
|||
defineExpose({}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.ant-steps-vertical { |
|||
margin-left: 20px; |
|||
margin-top: 10px; |
|||
} |
|||
:deep(.ant-steps-item-tail) { |
|||
position: absolute !important; |
|||
top: -10px !important; |
|||
left: 16px !important; |
|||
width: 1px !important; |
|||
height: 150% !important; |
|||
} |
|||
:deep(.ant-steps-item) { |
|||
margin-top: 20px !important; |
|||
} |
|||
</style> |
|||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 563 B |
@ -0,0 +1,6 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" xmlns="http://www.w3.org/2000/svg"> |
|||
<g transform="matrix(1 0 0 1 -485 -23 )"> |
|||
<path d="M 47 42.32727272727272 C 47.78181818181818 45.381818181818176 45.381818181818176 47.78181818181818 42.54545454545455 47 L 5.454545454545454 47 C 2.6181818181818186 47.78181818181818 0.21818181818181742 45.381818181818176 1 42.32727272727272 L 1 29 L 47 29 L 47 42.32727272727272 Z M 29.89090909090909 41 L 29.89090909090909 36 L 6.1090909090909085 36 L 6.1090909090909085 41 L 29.89090909090909 41 Z M 41.89090909090909 41.89090909090909 L 41.89090909090909 36 L 36 36 L 36 41.89090909090909 L 41.89090909090909 41.89090909090909 Z M 1 26 L 1 5.454545454545454 C 0.21818181818181742 2.399999999999999 2.6181818181818186 0 5.454545454545454 0 L 42.54545454545455 0 C 45.38181818181818 0 47.78181818181818 2.399999999999999 47 5.454545454545454 L 47 26 L 1 26 Z M 5.454545454545454 19.418181818181814 L 9.818181818181818 21.818181818181817 L 14.181818181818183 14.399999999999999 L 24.218181818181822 21.16363636363636 L 29.67272727272728 12.654545454545453 L 40.36363636363637 18.76363636363636 L 42.763636363636365 14.399999999999995 L 27.92727272727273 5.018181818181814 L 22.90909090909091 13.745454545454539 L 12 7.85454545454545 L 5.454545454545454 19.418181818181814 Z " fill-rule="nonzero" fill="#d9001b" stroke="none" transform="matrix(1 0 0 1 485 23 )" /> |
|||
</g> |
|||
</svg> |
|||
@ -0,0 +1,6 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg"> |
|||
<g transform="matrix(1 0 0 1 -305 -366 )"> |
|||
<path d="M 8.03885714285714 0.641142857142857 L 8.03885714285714 0.64 C 12.1181901007502 0.64 15.4251428571429 3.94695275639267 15.4251428571429 8.02628571428571 C 15.4251430928625 8.02704758957974 15.4251432107223 8.02780946489393 15.4251432107223 8.02857134022442 C 15.4251432107223 12.1085354806887 12.117678779758 15.415999911653 8.03771463929375 15.415999911653 C 3.95775049882947 15.415999911653 0.650286067865178 12.1085354806887 0.650286067865178 8.02857134022442 C 0.650286067865178 3.94860719976014 3.95775049882947 0.64114276879585 8.03771463929375 0.64114276879585 C 8.03809547381657 0.64114276879585 8.03847630833888 0.641142798244853 8.03885714285714 0.641142857142857 Z M 8 6.85714285714286 C 7.36881742876481 6.85714285714286 6.85714285714286 7.36881742876481 6.85714285714286 8 C 6.85714285714286 8.63118257123519 7.36881742876481 9.14285714285714 8 9.14285714285714 C 8.63118257123519 9.14285714285714 9.14285714285714 8.63118257123519 9.14285714285714 8 C 9.14285714285714 7.36881742876481 8.63118257123519 6.85714285714286 8 6.85714285714286 Z M 11.4285714285714 6.85714285714286 C 10.7973888573362 6.85714285714286 10.2857142857143 7.36881742876481 10.2857142857143 8 C 10.2857142857143 8.63118257123519 10.7973888573362 9.14285714285714 11.4285714285714 9.14285714285714 C 12.0597539998066 9.14285714285714 12.5714285714286 8.63118257123519 12.5714285714286 8 C 12.5714285714286 7.36881742876481 12.0597539998066 6.85714285714286 11.4285714285714 6.85714285714286 Z M 4.57142857142857 6.85714285714286 C 3.94024600019338 6.85714285714286 3.42857142857143 7.36881742876481 3.42857142857143 8 C 3.42857142857143 8.63118257123519 3.94024600019338 9.14285714285714 4.57142857142857 9.14285714285714 C 5.20261114266376 9.14285714285714 5.71428571428571 8.63118257123519 5.71428571428571 8 C 5.71428571428571 7.36881742876481 5.20261114266376 6.85714285714286 4.57142857142857 6.85714285714286 Z " fill-rule="nonzero" fill="#ff7602" stroke="none" transform="matrix(1 0 0 1 305 366 )" /> |
|||
</g> |
|||
</svg> |
|||
@ -0,0 +1,6 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg"> |
|||
<g transform="matrix(1 0 0 1 -305 -340 )"> |
|||
<path d="M 15.52 8 C 15.52 3.848 12.152 0.48 8 0.48 C 3.848 0.48 0.48 3.848 0.48 8 C 0.48 12.152 3.848 15.52 8 15.52 C 12.152 15.52 15.52 12.152 15.52 8 Z M 11.608 9.256 C 11.84 9.368 11.936 9.648 11.832 9.88 C 11.72 10.112 11.44 10.216 11.208 10.104 L 7.8 8.48 C 7.632 8.392 7.52 8.216 7.512 8.024 L 7.512 2.648 C 7.512 2.392 7.72 2.176 7.984 2.176 C 8.24 2.176 8.456 2.384 8.456 2.648 L 8.456 7.752 L 11.608 9.256 Z " fill-rule="nonzero" fill="#009de1" stroke="none" transform="matrix(1 0 0 1 305 340 )" /> |
|||
</g> |
|||
</svg> |
|||
@ -0,0 +1,6 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="15px" xmlns="http://www.w3.org/2000/svg"> |
|||
<g transform="matrix(1 0 0 1 -305 -264 )"> |
|||
<path d="M 12.8044865917969 12.8044945019531 C 15.7317833056641 9.87949759277344 15.7317833056641 5.12019596191406 12.8044865917969 2.19521370117188 C 11.3984961283515 0.787326048146557 9.48966705506673 -0.00260805552580251 7.4999560546875 3.046875E-05 C 5.50996955094545 -0.00406567496305449 3.60061659376305 0.786091774555939 2.19546946289063 2.19521370117188 C -0.731548930664062 5.12021061035156 -0.731548930664062 9.87951224121094 2.19546946289063 12.8044945019531 C 3.60067093003941 14.2135352022771 5.50998850312976 15.0036780086136 7.4999560546875 14.999677734375 C 9.49029165514025 15.0054765279533 11.4002873723065 14.2150596299848 12.8044865917969 12.8044945019531 Z M 11.9376369140625 5.54019552246094 L 6.89940004394531 10.9003754150391 C 6.87578802320076 10.9269018017654 6.84623229984903 10.9474623058395 6.81315013183594 10.9603753564453 C 6.78748609863281 10.9776751464844 6.77046462890625 10.9949895849609 6.73585041503906 11.003060859375 C 6.67362025830789 11.0304200226738 6.60651003916783 11.0449431326059 6.53853616699219 11.0457610107422 C 6.47426031328986 11.0436752198275 6.41062363711127 11.0323076485925 6.34960082519531 11.0120110400391 L 6.28960088378906 10.9773821777344 C 6.25364523541476 10.9604965742554 6.21927871922921 10.9404159360992 6.18691545410156 10.9173822363281 L 3.30259719726562 8.07866452148437 C 3.20194835437246 7.98256406662991 3.14591207112094 7.8488594603371 3.14796845214844 7.70971472167969 C 3.14796845214844 7.57240041503906 3.20046839355469 7.43510075683594 3.29421830566406 7.34076490722656 C 3.50055541080613 7.14332002945278 3.8257661663423 7.14332002945278 4.03210327148437 7.34076490722656 L 6.52210063476562 9.79326232910156 L 11.1824668212891 4.83721775390625 C 11.3839239859071 4.63706235688665 11.705600292055 4.62599539544477 11.9203371386719 4.81183204101562 C 12.0250169736047 4.90583460723342 12.0845359910269 5.04009087589488 12.0839014160156 5.18078184082031 C 12.0834323759743 5.31515796660418 12.0310295272497 5.44414958696638 11.9376515625 5.54078145996094 Z " fill-rule="nonzero" fill="#04d719" stroke="none" transform="matrix(1 0 0 1 305 264 )" /> |
|||
</g> |
|||
</svg> |
|||
@ -0,0 +1,6 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="15px" xmlns="http://www.w3.org/2000/svg"> |
|||
<g transform="matrix(1 0 0 1 -305 -315 )"> |
|||
<path d="M 15 7.5 C 15 3.358125 11.641875 0 7.5 0 C 3.358125 0 0 3.358125 0 7.5 C 0 11.641875 3.358125 15 7.5 15 C 11.641875 15 15 11.641875 15 7.5 Z M 6.96437500488281 8.4375 L 6.96437500488281 3.8840625 C 6.96454594411788 3.81021458429416 7.02427767945776 3.75034328445354 7.09812499511719 3.75 L 7.90187500488281 3.75 C 7.97572232054224 3.75034328445354 8.03545405588212 3.81021458429416 8.03562499511719 3.8840625 L 8.03562499511719 8.4375 C 8.03545405588212 8.51134791570584 7.97572232054224 8.57121921554647 7.90187500488281 8.5715625 L 7.09812499511719 8.5715625 C 7.02427767945776 8.57121921554647 6.96454594411788 8.51134791570584 6.96437500488281 8.4375 Z M 7.5 11.25 C 7.05616214821327 11.2499137187178 6.69640622993007 10.8900878577318 6.69640622993007 10.4462499975586 C 6.69640622993007 10.0023511201461 7.05625737014613 9.64249997993007 7.50015624755859 9.64249997993007 C 7.94415034690392 9.64258627639936 8.30390626518712 10.0024121373854 8.30390626518712 10.4462499975586 C 8.30390626518712 10.8901488749711 7.94405512497106 11.2500000151871 7.50015624755859 11.2500000151871 Z " fill-rule="nonzero" fill="#d8001b" stroke="none" transform="matrix(1 0 0 1 305 315 )" /> |
|||
</g> |
|||
</svg> |
|||
@ -0,0 +1,6 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="15px" xmlns="http://www.w3.org/2000/svg"> |
|||
<g transform="matrix(1 0 0 1 -305 -289 )"> |
|||
<path d="M 14.8828125 7.5 C 14.8828125 3.42891475341797 11.571085246582 0.1171875 7.5 0.1171875 C 3.42942502441406 0.1171875 0.1171875 3.42891475341797 0.1171875 7.5 C 0.1171875 11.571085246582 3.42891475341797 14.8828125 7.5 14.8828125 C 11.5705749755859 14.8828125 14.8828125 11.571085246582 14.8828125 7.5 Z M 8.24725339416504 7.50209775695801 L 10.5116636334229 9.77390681030273 C 10.717328404541 9.98062045166015 10.7167897888184 10.3139079473877 10.5106147631836 10.5195727185059 C 10.4077965582275 10.6218806689453 10.2733136187744 10.6735590710449 10.1383204248047 10.6735590710449 C 10.0027886151123 10.6735590710449 9.86779542114258 10.6218806524658 9.76494885498047 10.5185238317871 L 7.49736364379883 8.24407840576172 L 5.22240794677735 10.4947965600586 C 5.11958974182129 10.5960556237793 4.98561707336426 10.6471954266357 4.85167274963379 10.6471954266357 C 4.71563066894531 10.6471954266357 4.58009887573242 10.5949784088135 4.47674203857422 10.490572701416 C 4.27212613769531 10.2833204443359 4.27371362365723 9.9500329486084 4.4809658972168 9.74490679321289 L 6.75328522155762 7.49736362731933 L 4.4893852532959 5.22609317321777 C 4.28372048217773 5.01988978637695 4.28425909790039 4.68609203613281 4.49043412353516 4.48042726501465 C 4.69663751037598 4.27422387817383 5.02989664489746 4.27530110961914 5.23610003173828 4.4814761352539 L 7.50314662719727 6.75538294555664 L 9.77810232421875 4.50469313598633 C 9.98481596557617 4.29956698059082 10.319152331543 4.30166472106934 10.5237682324219 4.5089169946289 C 10.7288943878174 4.71616925170898 10.7267966473389 5.04996700195312 10.5195443737793 5.25458290283203 L 8.24725339416504 7.50209775695801 Z " fill-rule="nonzero" fill="#a6a6a6" stroke="none" transform="matrix(1 0 0 1 305 289 )" /> |
|||
</g> |
|||
</svg> |
|||
@ -1,179 +0,0 @@ |
|||
<template> |
|||
<a-table :columns="columns" :data-source="data" bordered /> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent, watch, ref, onMounted } from 'vue'; |
|||
import type { TableColumnType } from 'ant-design-vue'; |
|||
import { inject } from 'vue'; |
|||
|
|||
// let data: any[] = []; |
|||
|
|||
export default defineComponent({ |
|||
name: 'EnvironmentTable', |
|||
setup() { |
|||
let data = ref<any[]>([]); |
|||
let columns = ref<TableColumnType[]>([]); |
|||
|
|||
interface PageData { |
|||
tableList: any[]; |
|||
tableColumns: any[]; |
|||
graphList: any[]; |
|||
} |
|||
const pageData = inject<PageData>('pageData'); |
|||
|
|||
if (!pageData) { |
|||
throw new Error('pageData is not provided'); |
|||
} |
|||
// 监听 pageData 的变化 |
|||
watch( |
|||
() => pageData as PageData, |
|||
(_newValue, _oldValue) => { |
|||
data.value = pageData.tableList; |
|||
|
|||
let columnA: any[] = [...column]; |
|||
columnA.push(...pageData.tableColumns); |
|||
columns.value = columnA; |
|||
// pageData.graphList; |
|||
// 执行你的逻辑代码 |
|||
}, |
|||
{ deep: true }, |
|||
); |
|||
|
|||
const getRowSpan = (dataIndex: string, record: any, data: any, 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 column: TableColumnType[] = [ |
|||
{ |
|||
title: '序号', |
|||
dataIndex: 'key', |
|||
customCell: (record, rowIndex) => { |
|||
if (rowIndex == undefined) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
}; |
|||
} |
|||
const rowSpan = getRowSpan('name', record, data.value); |
|||
if (rowIndex != 0 && data.value[rowIndex - 1].key == record.key) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
}; |
|||
} |
|||
return { |
|||
rowSpan: rowSpan, |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '设备名称', |
|||
dataIndex: 'name', |
|||
customCell: (record, rowIndex) => { |
|||
if (rowIndex == undefined) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
}; |
|||
} |
|||
const rowSpan = getRowSpan('name', record, data.value); |
|||
if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
}; |
|||
} |
|||
return { |
|||
rowSpan: rowSpan, |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '设备点位', |
|||
dataIndex: 'position', |
|||
customCell: (record, rowIndex) => { |
|||
if (rowIndex == undefined) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
}; |
|||
} |
|||
const rowSpan = getRowSpan('position', record, data.value, ['name']); |
|||
if ( |
|||
rowIndex != 0 && |
|||
data.value[rowIndex - 1].name == record.name && |
|||
data.value[rowIndex - 1].position == record.position |
|||
) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
}; |
|||
} |
|||
return { |
|||
rowSpan: rowSpan, |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '计量单位', |
|||
dataIndex: 'unit', |
|||
customCell: (record, rowIndex) => { |
|||
if (rowIndex == undefined) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
}; |
|||
} |
|||
const rowSpan = getRowSpan('unit', record, data.value, ['name', 'position']); |
|||
if ( |
|||
rowIndex != 0 && |
|||
data.value[rowIndex - 1].name == record.name && |
|||
data.value[rowIndex - 1].position == record.position && |
|||
data.value[rowIndex - 1].unit == record.unit |
|||
) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
}; |
|||
} |
|||
return { |
|||
rowSpan: rowSpan, |
|||
}; |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
onMounted(() => { |
|||
data.value = pageData.tableList; |
|||
|
|||
let columnA: any[] = [...column]; |
|||
columnA.push(...pageData.tableColumns); |
|||
columns.value = columnA; |
|||
}); |
|||
return { |
|||
data, |
|||
column, |
|||
columns, |
|||
pageData, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,36 @@ |
|||
export const tableColumns = [ |
|||
{ |
|||
title: '序号', |
|||
customRender: (text: any) => { |
|||
return text.index + 1; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '时间', |
|||
dataIndex: 'areaName', |
|||
}, |
|||
{ |
|||
title: '温度（℃）', |
|||
dataIndex: 'point', |
|||
}, |
|||
{ |
|||
title: '湿度（%）', |
|||
dataIndex: 'date', |
|||
}, |
|||
{ |
|||
title: 'CO2浓度（ppm）', |
|||
dataIndex: 'areaName', |
|||
}, |
|||
{ |
|||
title: 'PM2.5（μg/m³）', |
|||
dataIndex: 'point', |
|||
}, |
|||
{ |
|||
title: 'TVOC（mg/m³）', |
|||
dataIndex: 'date', |
|||
}, |
|||
{ |
|||
title: 'TVOC（mg/m³）', |
|||
dataIndex: '光照度（lux）', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,250 @@ |
|||
<!-- eslint-disable vue/v-on-event-hyphenation --> |
|||
<template> |
|||
<div> |
|||
<a-table :columns="tableColumns" :data-source="data" bordered :pagination="false"> |
|||
<template #title> |
|||
<div |
|||
style="display: flex; align-items: center; justify-content: space-between; width: 100%"> |
|||
<div style="display: flex; align-items: center; width: 85%"> |
|||
<div style="width: 10%">数据报表</div> |
|||
|
|||
<a-select |
|||
v-model:value="frequencyValue" |
|||
placeholder="请选择频率" |
|||
style="width: 17%; margin-left: 10px" |
|||
:options="frequencyOptions" /> |
|||
<!-- <a-date-picker style="width: 13%; margin-left: 10px" v-model:value="timeValue" /> --> |
|||
<a-range-picker |
|||
:value="hackValue || dateRange" |
|||
:disabled-date="disabledDate" |
|||
@change="onChangeDate" |
|||
@openChange="onOpenChange" |
|||
@calendarChange="onCalendarChange" |
|||
style="width: 17%; margin-left: 10px" |
|||
:placeholder="['请选择日期', '请选择日期']" /> |
|||
<a-button type="primary" style="margin-left: 10px" @click="getSelect"> 查询 </a-button> |
|||
</div> |
|||
<a-button type="primary"> 导出 </a-button> |
|||
</div> |
|||
</template> |
|||
</a-table> |
|||
<a-pagination |
|||
:current="queryParams.pageNum" |
|||
:total="total" |
|||
:page-size="queryParams.pageSize" |
|||
style="display: flex; justify-content: center; margin-top: 16px" |
|||
:show-size-changer="true" |
|||
:show-quick-jumper="true" |
|||
@change="onChange" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { ref, onMounted } from 'vue'; |
|||
// import { http } from '/nerv-lib/util/http'; |
|||
import { Pagination, SelectProps, TreeSelectProps, TableColumnType } from 'ant-design-vue'; |
|||
import { tableColumns } from './config'; |
|||
import type { Dayjs } from 'dayjs'; |
|||
// import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary'; |
|||
defineOptions({ |
|||
energyType: 'AverageData', // 与页面路由name一致缓存才可生效 |
|||
components: { |
|||
'a-pagination': Pagination, |
|||
}, |
|||
}); |
|||
|
|||
const typeList = ref(); |
|||
// 采集频率 |
|||
const frequencyValue = ref<string | undefined>(); |
|||
|
|||
// 采集频率list |
|||
const frequencyOptions = ref<SelectProps['options']>([]); |
|||
|
|||
const treeData2 = ref<TreeSelectProps['treeData']>([]); |
|||
const data = ref([]); |
|||
// let tableColumns = ref<TableColumnType[]>([]); |
|||
|
|||
const total = ref<number>(); |
|||
const queryParams = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
}); |
|||
const orgId = ref(''); |
|||
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
|||
orgId.value = result; |
|||
|
|||
type RangeValue = [Dayjs, Dayjs]; |
|||
const dates = ref<RangeValue>(); |
|||
const hackValue = ref<RangeValue>(); |
|||
const dateRange = ref<[Dayjs, Dayjs] | undefined>(); |
|||
|
|||
const onChangeDate = (val: RangeValue) => { |
|||
dateRange.value = val; |
|||
}; |
|||
const onOpenChange = (open: boolean) => { |
|||
if (open) { |
|||
dates.value = [] as any; |
|||
hackValue.value = [] as any; |
|||
} else { |
|||
hackValue.value = undefined; |
|||
} |
|||
}; |
|||
const disabledDate = (current: Dayjs) => { |
|||
if (!dates.value || (dates.value as any).length === 0) { |
|||
return false; |
|||
} |
|||
const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 2; |
|||
const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 2; |
|||
return tooEarly || tooLate; |
|||
}; |
|||
const onCalendarChange = (val: RangeValue) => { |
|||
dates.value = val; |
|||
}; |
|||
// 获取表格数据 |
|||
const getTableList = () => { |
|||
// fetch(energyConsumption.pageList, queryParams.value).then((res) => { |
|||
// data.value = res.data.records; |
|||
// total.value = res.data.total; |
|||
// }); |
|||
}; |
|||
onMounted(() => { |
|||
frequencyOptions.value = [ |
|||
{ |
|||
value: '1', |
|||
label: '30分钟', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '小时', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '天', |
|||
}, |
|||
{ |
|||
value: '4', |
|||
label: '月', |
|||
}, |
|||
{ |
|||
value: '5', |
|||
label: '年', |
|||
}, |
|||
]; |
|||
typeList.value = [ |
|||
{ |
|||
id: 1, |
|||
value: '温度', |
|||
}, |
|||
{ |
|||
id: 2, |
|||
value: 'CO2浓度', |
|||
}, |
|||
{ |
|||
id: 3, |
|||
value: 'PM2.5', |
|||
}, |
|||
{ |
|||
id: 4, |
|||
value: '光照度', |
|||
}, |
|||
{ |
|||
id: 5, |
|||
value: 'TVOC', |
|||
}, |
|||
{ |
|||
id: 6, |
|||
value: '湿度', |
|||
}, |
|||
]; |
|||
treeData2.value = [ |
|||
{ |
|||
label: '办公区', |
|||
value: '0-0', |
|||
children: [ |
|||
{ |
|||
label: '办公一区', |
|||
value: '0-0-0', |
|||
}, |
|||
{ |
|||
label: '办公二区', |
|||
value: '0-0-1', |
|||
}, |
|||
{ |
|||
label: '办公三区', |
|||
value: '0-0-2', |
|||
}, |
|||
{ |
|||
label: '办公四区', |
|||
value: '0-0-3', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
label: '站厅', |
|||
value: '0-1', |
|||
|
|||
children: [ |
|||
{ |
|||
label: '站厅一区', |
|||
value: '0-1-0', |
|||
// disabled: true, |
|||
}, |
|||
{ |
|||
label: '站厅二区', |
|||
value: '0-1-1', |
|||
}, |
|||
{ |
|||
label: '站厅三区', |
|||
value: '0-1-2', |
|||
}, |
|||
{ |
|||
label: '站厅四区', |
|||
value: '0-1-3', |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
// let tableColumnsB = [ |
|||
// { |
|||
// title: '1:00', |
|||
// dataIndex: '1:00', |
|||
// }, |
|||
// { |
|||
// title: '2:00', |
|||
// dataIndex: '2:00', |
|||
// }, |
|||
// { |
|||
// title: '3:00', |
|||
// dataIndex: '3:00', |
|||
// }, |
|||
// { |
|||
// title: '4:00', |
|||
// dataIndex: '4:00', |
|||
// }, |
|||
// ]; |
|||
// let columnA: any[] = [...tableColumnsA]; |
|||
// columnA.push(...tableColumnsB); |
|||
// tableColumns.value = columnA; |
|||
}); |
|||
|
|||
getTableList(); |
|||
// 分页器 |
|||
const onChange = (pageNumber: number, size: number) => { |
|||
queryParams.value.pageNum = pageNumber; |
|||
queryParams.value.pageSize = size; |
|||
getTableList(); |
|||
}; |
|||
</script> |
|||
<style scoped lang="less"> |
|||
::v-deep .ant-table-title { |
|||
display: flex; |
|||
} |
|||
::v-deep .ant-table-container { |
|||
padding: 0px 16px; |
|||
} |
|||
</style> |
|||
<style scoped> |
|||
th.column-money, |
|||
td.column-money { |
|||
text-align: right !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
export const tableColumns = [ |
|||
{ |
|||
title: '序号', |
|||
customRender: (text: any) => { |
|||
return text.index + 1; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '区域名称', |
|||
dataIndex: 'areaName', |
|||
}, |
|||
{ |
|||
title: '点位', |
|||
dataIndex: 'point', |
|||
}, |
|||
{ |
|||
title: '日期', |
|||
dataIndex: 'date', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,243 @@ |
|||
<!-- eslint-disable vue/multi-word-component-names --> |
|||
<template> |
|||
<div> |
|||
<a-table |
|||
:columns="tableColumns" |
|||
:data-source="data" |
|||
bordered |
|||
:pagination="false" |
|||
:scroll="{ x: 100 }"> |
|||
<template #title> |
|||
<div |
|||
style="display: flex; align-items: center; justify-content: space-between; width: 100%"> |
|||
<div style="display: flex; align-items: center; width: 85%"> |
|||
<div style="width: 10%">数据报表</div> |
|||
<a-select |
|||
v-model:value="typeValue" |
|||
placeholder="请选择环境参数" |
|||
style="width: 15%" |
|||
:options="typeList" /> |
|||
<a-tree-select |
|||
v-model:value="quyuvalue" |
|||
style="width: 15%; margin-left: 10px" |
|||
:tree-data="treeData2" |
|||
tree-checkable |
|||
allow-clear |
|||
placeholder="请选择区域" |
|||
tree-node-filter-prop="label" |
|||
:maxTagCount="1" /> |
|||
<a-select |
|||
v-model:value="frequencyValue" |
|||
placeholder="请选择采集频率" |
|||
style="width: 15%; margin-left: 10px" |
|||
:options="frequencyOptions" /> |
|||
<a-date-picker style="width: 15%; margin-left: 10px" v-model:value="timeValue" /> |
|||
<a-button type="primary" style="margin-left: 10px" @click="getSelect"> 查询 </a-button> |
|||
</div> |
|||
<a-button type="primary"> 导出 </a-button> |
|||
</div> |
|||
</template> |
|||
</a-table> |
|||
<a-pagination |
|||
:current="queryParams.pageNum" |
|||
:total="total" |
|||
:page-size="queryParams.pageSize" |
|||
style="display: flex; justify-content: center; margin-top: 16px" |
|||
:show-size-changer="true" |
|||
:show-quick-jumper="true" |
|||
@change="onChange" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { ref, onMounted, defineOptions } from 'vue'; |
|||
// import { http } from '/nerv-lib/util/http'; |
|||
import { Pagination, SelectProps, TreeSelectProps, TableColumnType } from 'ant-design-vue'; |
|||
import { tableColumns as tableColumnsA } from './config'; |
|||
import type { Dayjs } from 'dayjs'; |
|||
// import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary'; |
|||
defineOptions({ |
|||
energyType: 'HistoryData', // 与页面路由name一致缓存才可生效 |
|||
components: { |
|||
'a-pagination': Pagination, |
|||
}, |
|||
}); |
|||
const typeList = ref(); |
|||
const typeValue = ref(); |
|||
const quyuvalue = ref<string[]>([]); |
|||
// 采集频率 |
|||
const frequencyValue = ref<string | undefined>(); |
|||
|
|||
// 采集频率list |
|||
const frequencyOptions = ref<SelectProps['options']>([]); |
|||
|
|||
const treeData2 = ref<TreeSelectProps['treeData']>([]); |
|||
const data = ref([]); |
|||
const timeValue = ref<Dayjs>(); |
|||
let tableColumns = ref<TableColumnType[]>([]); |
|||
|
|||
const total = ref<number>(); |
|||
const queryParams = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
}); |
|||
const orgId = ref(''); |
|||
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
|||
orgId.value = result; |
|||
// const fetch = (api, params = { orgId }) => { |
|||
// return http.post(api, params); |
|||
// }; |
|||
|
|||
// 年份选择改变触发 |
|||
// const changeYearData = () => { |
|||
// queryParams.value.year = selectYear.value.format('YYYY'); |
|||
// getTableList(); |
|||
// }; |
|||
// 获取表格数据 |
|||
const getTableList = () => { |
|||
// fetch(energyConsumption.pageList, queryParams.value).then((res) => { |
|||
// data.value = res.data.records; |
|||
// total.value = res.data.total; |
|||
// }); |
|||
}; |
|||
onMounted(() => { |
|||
frequencyOptions.value = [ |
|||
{ |
|||
value: '1', |
|||
label: '5分钟', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '10分钟', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '30分钟', |
|||
}, |
|||
{ |
|||
value: '4', |
|||
label: '1小时', |
|||
}, |
|||
{ |
|||
value: '5', |
|||
label: '天', |
|||
}, |
|||
]; |
|||
typeList.value = [ |
|||
{ |
|||
id: 1, |
|||
value: '温度', |
|||
}, |
|||
{ |
|||
id: 2, |
|||
value: 'CO2浓度', |
|||
}, |
|||
{ |
|||
id: 3, |
|||
value: 'PM2.5', |
|||
}, |
|||
{ |
|||
id: 4, |
|||
value: '光照度', |
|||
}, |
|||
{ |
|||
id: 5, |
|||
value: 'TVOC', |
|||
}, |
|||
{ |
|||
id: 6, |
|||
value: '湿度', |
|||
}, |
|||
]; |
|||
treeData2.value = [ |
|||
{ |
|||
label: '办公区', |
|||
value: '0-0', |
|||
children: [ |
|||
{ |
|||
label: '办公一区', |
|||
value: '0-0-0', |
|||
}, |
|||
{ |
|||
label: '办公二区', |
|||
value: '0-0-1', |
|||
}, |
|||
{ |
|||
label: '办公三区', |
|||
value: '0-0-2', |
|||
}, |
|||
{ |
|||
label: '办公四区', |
|||
value: '0-0-3', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
label: '站厅', |
|||
value: '0-1', |
|||
|
|||
children: [ |
|||
{ |
|||
label: '站厅一区', |
|||
value: '0-1-0', |
|||
// disabled: true, |
|||
}, |
|||
{ |
|||
label: '站厅二区', |
|||
value: '0-1-1', |
|||
}, |
|||
{ |
|||
label: '站厅三区', |
|||
value: '0-1-2', |
|||
}, |
|||
{ |
|||
label: '站厅四区', |
|||
value: '0-1-3', |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
let tableColumnsB = [ |
|||
{ |
|||
title: '1:00', |
|||
dataIndex: '1:00', |
|||
}, |
|||
{ |
|||
title: '2:00', |
|||
dataIndex: '2:00', |
|||
}, |
|||
{ |
|||
title: '3:00', |
|||
dataIndex: '3:00', |
|||
}, |
|||
{ |
|||
title: '4:00', |
|||
dataIndex: '4:00', |
|||
}, |
|||
]; |
|||
let columnA: any[] = [...tableColumnsA]; |
|||
columnA.push(...tableColumnsB); |
|||
tableColumns.value = columnA; |
|||
}); |
|||
|
|||
getTableList(); |
|||
// 分页器 |
|||
const onChange = (pageNumber: number, size: number) => { |
|||
queryParams.value.pageNum = pageNumber; |
|||
queryParams.value.pageSize = size; |
|||
getTableList(); |
|||
}; |
|||
</script> |
|||
<style scoped lang="less"> |
|||
::v-deep .ant-table-title { |
|||
display: flex; |
|||
} |
|||
::v-deep .ant-table-container { |
|||
padding: 0px 16px; |
|||
} |
|||
</style> |
|||
<style scoped> |
|||
th.column-money, |
|||
td.column-money { |
|||
text-align: right !important; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue