| | |
| | | <div class="page"> |
| | | <div class="page-container"> |
| | | <div class="page-container-left"> |
| | | <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" /> |
| | | <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" ParentModelCode="LBJT" /> |
| | | </div> |
| | | <div class="page-container-right"> |
| | | <div class="form-card"> |
| | |
| | | const energyTypeList = ref(undefined) |
| | | let energyRealTimeMonitorList = ref([]) |
| | | const loading = ref(false) |
| | | const tabIndex = ref(0) |
| | | const data = reactive({ |
| | | queryParams: { |
| | | nodeId: null, |
| | |
| | | query: { ...useRoute().query }, |
| | | }) |
| | | const { queryParams, query } = toRefs(data) |
| | | |
| | | const refresher = () => { |
| | | console.log("refresher") |
| | | listEnergyRealTimeMonitor( |
| | | proxy.addDateRange({ |
| | | ...queryParams.value, |
| | | ...query.value, |
| | | }) |
| | | ).then((res) => { |
| | | if (!!res.code && res.code == 200) { |
| | | res.data.map((item) => { |
| | | item.activeIndex = tabIndex.value |
| | | }) |
| | | energyRealTimeMonitorList.value = res.data |
| | | } |
| | | }) |
| | | } |
| | | |
| | | // 添加定时器 |
| | | let refreshTimer = null |
| | | |
| | | onMounted(() => { |
| | | refreshTimer = setInterval(() => { |
| | | refresher() |
| | | }, 30000) |
| | | }) |
| | | |
| | | onBeforeUnmount(() => { |
| | | if (refreshTimer) { |
| | | clearInterval(refreshTimer) |
| | | } |
| | | }) |
| | | |
| | | /** 节点单击事件 */ |
| | | function handleNodeClick(data) { |
| | | queryParams.value.nodeId = data.id |
| | |
| | | } |
| | | function handleClick(item, index) { |
| | | item.activeIndex = index |
| | | tabIndex.value = index |
| | | } |
| | | // 能源实时监控-能源实时监控-列表 |
| | | function getList() { |
| | |
| | | text-align: left; |
| | | font-weight: bold; |
| | | font-family: OPPOSans, OPPOSans; |
| | | font-weight: 500; |
| | | font-size: 16px; |
| | | |
| | | font-size: 14px; |
| | | font-style: normal; |
| | | text-transform: none; |
| | | } |
| | |
| | | .title { |
| | | color: rgba(255, 255, 255, 0.8); |
| | | font-family: OPPOSans, OPPOSans; |
| | | font-weight: 500; |
| | | font-size: 16px; |
| | | |
| | | font-size: 14px; |
| | | line-height: 19px; |
| | | text-align: left; |
| | | font-style: normal; |
| | |
| | | } |
| | | |
| | | .num { |
| | | font-size: 24px; |
| | | font-size: 26px; |
| | | color: #36d3ff; |
| | | font-family: OPPOSans, OPPOSans; |
| | | font-weight: 800; |
| | |
| | | text-align: center; |
| | | margin: 5px 8px; |
| | | border-radius: 8px; |
| | | padding: 7px 10px; |
| | | padding: 2px 6px; |
| | | font-family: OPPOSans, OPPOSans; |
| | | font-weight: 500; |
| | | font-size: 16px; |
| | |
| | | } |
| | | |
| | | .num { |
| | | font-size: 24px; |
| | | font-size: 26px; |
| | | color: #3271eb; |
| | | font-family: OPPOSans, OPPOSans; |
| | | font-weight: 800; |
| | |
| | | text-align: center; |
| | | margin: 5px 8px; |
| | | border-radius: 8px; |
| | | padding: 7px 3px; |
| | | padding: 2px 6px; |
| | | font-family: OPPOSans, OPPOSans; |
| | | font-weight: 500; |
| | | font-size: 16px; |
| | |
| | | text-align: center; |
| | | margin: 2px 6px; |
| | | border-radius: 8px; |
| | | padding: 5px 10px; |
| | | padding: 2px 6px; |
| | | font-family: OPPOSans, OPPOSans; |
| | | font-weight: 500; |
| | | font-size: 14px; |