ltzhyq.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. <template>
  2. <view class="content">
  3. <!-- 顶部logo和菜单 -->
  4. <uTop data-aos="fade-down"></uTop>
  5. <!-- 标题和介绍 -->
  6. <uDesc :title="dTitle" :description="dMemo" :bg="descBg" data-aos="slide-right" data-aos-delay="300"></uDesc>
  7. <view class="box">
  8. <view class="box1" data-aos="zoom-in" data-aos-delay="600">
  9. <view class="b_title">建设路径</view>
  10. <block v-if="jsljList.length">
  11. <uFunction :showTitle="false" :title="item.title" :list="item.list" v-for="(item,index) in jsljList" :key="index"></uFunction>
  12. </block>
  13. </view>
  14. <view class="box2" data-aos="zoom-in">
  15. <view class="b_title">场景模块</view>
  16. <image class="img" src="../../static/imgs/ltzhyq_img1.png" mode="widthFix" @click="e=>showBigImg(e,'../../static/imgs/ltzhyq_img1.png')"></image>
  17. </view>
  18. <view class="box3">
  19. <block v-if="functionList.length">
  20. <view class="boxTwo">
  21. <uFunction :title="item.title" :list="item.list" v-for="(item,index) in functionList" :key="index" data-aos="slide-left"></uFunction>
  22. </view>
  23. </block>
  24. </view>
  25. <view class="box4">
  26. <view class="boxTwo" data-aos="slide-right">
  27. <view class="b_title">方案架构</view>
  28. <image class="img" src="../../static/imgs/ltzhyq_img2.png" mode="widthFix" @click="e=>showBigImg(e,'../../static/imgs/ltzhyq_img2.png')"></image>
  29. </view>
  30. </view>
  31. </view>
  32. <!-- 合作与咨询 -->
  33. <uForm data-aos="zoom-in"></uForm>
  34. </view>
  35. </template>
  36. <script>
  37. export default {
  38. data(){
  39. return {
  40. dTitle:'零碳智慧园区解决方案',
  41. dMemo:'通过AIoT物联网技术实现设备感知和智能运维,实现园区安全管理、绿色能碳、智慧运维、智慧通行、视频安防、集成管理等场景,构建统一的智慧园区综合管理系统。',
  42. descBg:'../../static/imgs/ltzhyq_descbg.png',
  43. jsljList:[
  44. {
  45. list:[
  46. {
  47. title:'能源结构转型',
  48. desc:'增加绿电比例,提升用能效率、降低用能成本。全面规划园区可再生能源(风电、光伏)区域,根据建设方案布局新能源发电、能源存储转化、基础设施(充 电桩、新能源车位)。走可持续发展的清洁机制,构建多元化清洁能源供给体系,推动能源转型'
  49. },
  50. {
  51. title:'智慧节能减排',
  52. desc:'照明节能、空调节能、室内碳汇等,贯彻“绿色、低 碳、循环、环保”的理念,建立产业循环系统,充分考虑企业生产、回收、处理等各个环节的集成耦合,推动产业链上下游之间高效联动,实现能源资源综合利用'
  53. },
  54. {
  55. title:'智慧物联数据可视化管理',
  56. desc:'实现数据支撑园区碳排放监测和管理,摸清园区碳家底,全面掌握现有园区碳排放情况,明确零碳目标和路线图'
  57. },
  58. {
  59. title:'增加碳吸收能力',
  60. desc:'通过生态碳汇、负碳技术和碳汇产品增加园区碳吸收能力图'
  61. }
  62. ]
  63. }
  64. ],
  65. functionList:[
  66. {
  67. title:'数据可视化及应用',
  68. list:[
  69. {
  70. title:'物联感知平台-基于BIM+GIS',
  71. desc:'将设施设备管理、空间管理、能耗管理、安防管理、物业管理、综合管理等各个子系统有机地结合在一起,帮助管理人员提高管控能力,提高工作效率 ,降低运营成本。'
  72. },
  73. {
  74. title:'数据流转',
  75. desc:'建立统一的模型及接口标准,为上层应用提供智能化数据'
  76. }
  77. ]
  78. },
  79. {
  80. title:'能耗管理',
  81. list:[
  82. {
  83. title:'能耗采集',
  84. desc:'自动采集水电气能耗数据,统一能耗数据管理'
  85. },
  86. {
  87. title:'能耗统计',
  88. desc:'用能单位,系统分项能耗统计,自动形成周期性报表及用能趋势分析'
  89. },
  90. {
  91. title:'能耗模型',
  92. desc:'将用能系统结构可视化,分级展示能耗分布及运行占比,直观展示预算及实际用能对比'
  93. }
  94. ]
  95. },
  96. {
  97. title:'安全管理',
  98. list:[
  99. {
  100. title:'线上巡更',
  101. desc:'视频上云助力园区远程巡视,通过视频巡更进行园区日常巡视,提高管理效率降本增效'
  102. },
  103. {
  104. title:'人员聚集',
  105. desc:'视频AI自动识别人群聚集现象,提前处理安全隐患'
  106. },
  107. {
  108. title:'人员轨迹追踪',
  109. desc:'通过人脸对比技术,高效定位园区可疑人员运行轨迹'
  110. },
  111. {
  112. title:'异常告警',
  113. desc:'设备运行故障、安全事件及时推送至指挥中心,工程人员可远程查看故障,调度人员处理'
  114. },
  115. {
  116. title:'车辆消防占道',
  117. desc:'重点区域占道行为监控,自动抓取违规车辆,及时处理'
  118. },
  119. {
  120. title:'消防安全',
  121. desc:'消防末端管压、消防主机报警监测'
  122. }
  123. ]
  124. },
  125. {
  126. title:'设备运维',
  127. list:[
  128. {
  129. title:'设备资产',
  130. desc:'融合AloT技术,实现对设备资产的全生命周期管理。重点机房监测、智能喷灌、智能巡检等'
  131. },
  132. {
  133. title:'智能联动',
  134. desc:'根据上下班时间设置自动开启/关闭照明、空调等跨场景智能联动'
  135. }
  136. ]
  137. },
  138. {
  139. title:'服务体验',
  140. list:[
  141. {
  142. title:'人员便捷通行',
  143. desc:'园区通过人脸、手机一键开门,通行无卡化、安全便捷'
  144. },
  145. {
  146. title:'公共环境监测',
  147. desc:'园区空气、水质监测提升服务质量,车库空气监测联动送排风'
  148. },
  149. {
  150. title:'线上会议室预约、访客邀约',
  151. desc:''
  152. },
  153. {
  154. title:'车辆无感通行',
  155. desc:'员工/访客线上缴费、办理月卡,自主快捷通行'
  156. }
  157. ]
  158. },
  159. {
  160. title:'集成能力',
  161. list:[
  162. {
  163. title:'园区运营系统集成',
  164. desc:'打通园区运营系统、工单等系统,实现智能化数据与业务系统的流程自动化、全场景闭环'
  165. },
  166. {
  167. title:'移动app办公',
  168. desc:'将智能化应用集成至app,可移动应用办公'
  169. }
  170. ]
  171. }
  172. ],
  173. }
  174. },
  175. created() {
  176. uni.setNavigationBarTitle({
  177. title:'零碳智慧园区解决方案'
  178. })
  179. },
  180. methods:{
  181. showBigImg(e,imgUrl){
  182. let current = e.target.dataset.src;
  183. let that = this;
  184. uni.previewImage({
  185. current,
  186. urls:[imgUrl],
  187. longPressActions:{
  188. itemList:['保存图片'],
  189. success(data) {
  190. that.saveImage(imgUrl);
  191. },
  192. fail(err) {
  193. that.$showToast(err.errMsg);
  194. }
  195. }
  196. })
  197. },
  198. saveImage(url){
  199. let that = this;
  200. uni.downloadFile({
  201. url,
  202. success(res) {
  203. let filePath = res.tempFilePath;
  204. uni.saveImageToPhotosAlbum({
  205. filePath,
  206. success() {
  207. that.$showToast('保存成功');
  208. },
  209. fail(err) {
  210. that.$showToast('保存失败');
  211. }
  212. })
  213. }
  214. })
  215. }
  216. }
  217. }
  218. </script>
  219. <style scoped lang="less">
  220. ::v-deep .desc .title{
  221. margin-top: 32rpx;
  222. }
  223. ::v-deep .desc .memo{
  224. padding-right: 176rpx;
  225. margin-top: 12rpx;
  226. }
  227. .content{
  228. padding-bottom: 40rpx;
  229. overflow: hidden;
  230. .boxTwo{
  231. width: 100%;
  232. overflow: hidden;
  233. }
  234. .box4{
  235. overflow: hidden;
  236. }
  237. .box{
  238. width: 100%;
  239. padding: 0 30rpx;
  240. box-sizing: border-box;
  241. .b_title{
  242. font-family: PingFang-SC, PingFang-SC;
  243. font-weight: bold;
  244. font-size: 42rpx;
  245. color: #111111;
  246. line-height: 42rpx;
  247. text-align: center;
  248. margin-top: 64rpx;
  249. }
  250. .img{
  251. width: 100%;
  252. margin-top: 48rpx;
  253. }
  254. }
  255. }
  256. </style>