feat(zhitan-system): 修正数据项查询条件并添加环保视图

baoshiwei

19 小时以前 233b2724f297cd52807eebfa3c547d6fe5187c70

feat(zhitan-system): 修正数据项查询条件并添加环保视图

- 在 DataItemMapper.xml 中添加 energy_id = 'electric' 查询条件
- 在 userAvatar.vue 中重新启用提交按钮
- 新增 HuanBaoView.vue环保视图组件，用于展示环保相关数据

 zhitan-system/src/main/resources/mapper/dataitem/DataItemMapper.xml

@@ -263,7 +263,7 @@
                </foreach>
                AND di.time_type = #{timeType}
                AND di.begin_time between #{beginTime} AND #{endTime}
                AND ei.index_type = 'STATISTIC'
                AND ei.index_type = 'STATISTIC' AND ei.energy_id = 'electric'
            GROUP BY
                mn.node_id,
                mn."name",

 zhitan-vue/public/huanbao_background.png

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10HPuAAAgAElEQVR4Xu3dC5Qc1X3A8d+Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e6Z6e

 zhitan-vue/src/views/huanbao/HuanBaoView.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,82 @@
<template>
  <div class="huanbao-container">
    <img src="@/assets/images/huanbao3d.png" alt="Equipment Background" class="background-image" />
    <div class="data-tag tag-1" style="top: 80%; left: 10%; width: 180px">入口压力：{{ entryPressure }} Pa</div>
    <div class="data-tag tag-2" style="top: 15%; left: 50%; width: 180px">出口压力：{{ exitPressure }} Pa</div>
    <div class="data-tag tag-3" style="top: 85%; left: 10%; width: 180px">进风速：{{ inletVelocity }} m/s</div>
    <div class="data-tag tag-1" style="top: 20%; left: 50%;width: 180px">出风速：{{ outletVelocity }} m/s</div>
    <div class="data-tag tag-2" style="top: 45%; left: 40%;width: 180px">温度：{{ temperature }} â„ƒ</div>
    <div class="data-tag tag-3" style="top: 50%; left: 40%;width: 180px">湿度：{{ humidity }} %</div>
    <div class="data-tag tag-1" style="top: 55%; left: 40%;width: 180px">风机频率：{{ 35 }} Hz</div>
    <div class="data-tag tag-2" style="top: 60%; left: 40%;width: 180px">设备压差：{{ pressureDifference }} Pa</div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const entryPressure = ref(0);
const exitPressure = ref(0);
const inletVelocity = ref(0);
const outletVelocity = ref(0);
const temperature = ref(0);
const humidity = ref(0);
const fanFrequency = ref(0);
const pressureDifference = ref(0);

let intervalId;

const getRandomValue = (min, max) => {
  return (Math.random() * (max - min) + min).toFixed(2);
};

const updateData = () => {
  entryPressure.value = getRandomValue(-2000, -1500);
  exitPressure.value = getRandomValue(80, 120);
  inletVelocity.value = getRandomValue(50, 80);
  outletVelocity.value = getRandomValue(30, 60);
  temperature.value = getRandomValue(70, 80);
  humidity.value = getRandomValue(80, 90);
  fanFrequency.value = getRandomValue(35, 40);
  pressureDifference.value = getRandomValue(800, 1000);
};

onMounted(() => {
  updateData(); // Initial data load
  intervalId = setInterval(updateData, 3000); // Update every 3 seconds
});

onUnmounted(() => {
  clearInterval(intervalId);
});
</script>

<style scoped>
.huanbao-container {
  position: relative;
  width: 99%;
  height: 88vh; /* Adjust as needed */
  overflow: hidden;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensures the image fits within the container */
  position: absolute;
  top: 0;
  left: 0;
}

.data-tag {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap;
  transform: translate(-50%, -50%); /* Center the tag on its position */
  z-index: 10; /* Ensure tags are above the image */
}
</style>

 zhitan-vue/src/views/system/user/profile/userAvatar.vue

@@ -46,7 +46,7 @@
          <el-button icon="RefreshRight" @click="rotateRight()"></el-button>
        </el-col>
        <el-col :lg="{ span: 2, offset: 6 }" :md="2">
          <!-- <el-button type="primary" @click="uploadImg()">提 äº¤</el-button> -->
           <el-button type="primary" @click="uploadImg()">提 äº¤</el-button>
        </el-col>
      </el-row>
    </el-dialog>