provincialEnergyStations.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  1. <template>
  2. <div class="ppage">
  3. <div class="page provincialEnergyStationsPage">
  4. <div class="timeBox">{{ time }}</div>
  5. <div class="topTiltle">
  6. <span class="title">全省新能源场站概况</span>
  7. </div>
  8. <div class="btuGroup">
  9. <div class="topBtu topRightBtu" @click="pushPreProject()">
  10. <span class="btuText">前期项目</span>
  11. </div>
  12. <div class="topBtu topRightBtu" @click="pushStationResource()">
  13. <span class="btuText">在运场站</span>
  14. </div>
  15. <div class="topBtu topLeftBtu" @click="back()">
  16. <span class="btuText">返回&nbsp;</span>
  17. </div>
  18. <div class="topBtu topRightBtu" @click="push()">
  19. <span class="btuText">后台管理</span>
  20. </div>
  21. </div>
  22. <div class="myMain-container">
  23. <div class="rightTextBg">
  24. <div class="rightBg topBox">
  25. <div class="rightTiltleTextBg">
  26. <div class="rightMainTitle">
  27. <span class="mainTitle">黑龙江省新能源信息</span>
  28. </div>
  29. </div>
  30. <div class="rightTopContent">
  31. <div class="contentBox">
  32. <span class="numberBox">{{ provinceInfo.fnum }}</span>
  33. <span class="textBox">风电场个数</span>
  34. </div>
  35. <div class="contentBox">
  36. <span class="numberBox">{{ provinceInfo.fhours }}</span>
  37. <span class="textBox">等效小时数</span>
  38. </div>
  39. <div class="contentBox">
  40. <span class="numberBox">{{ provinceInfo.gnum }}</span>
  41. <span class="textBox">光伏站个数</span>
  42. </div>
  43. <div class="contentBox">
  44. <span class="numberBox">{{ provinceInfo.ghours }}</span>
  45. <span class="textBox">等效小时数</span>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="rightBg bottomBox">
  50. <div class="rightTiltleTextBg">
  51. <div class="rightMainTitle">
  52. <span class="mainTitle">华电新能源信息</span>
  53. </div>
  54. </div>
  55. <div class="rightTopContent">
  56. <div class="contentBox">
  57. <span class="numberBox">{{ hdInfo.fnum }}</span>
  58. <span class="textBox">风电场个数</span>
  59. </div>
  60. <div class="contentBox">
  61. <span class="numberBox">{{ hdInfo.fhours }}</span>
  62. <span class="textBox">{{ hdInfo.fename }}</span>
  63. </div>
  64. <div class="contentBox">
  65. <span class="numberBox">{{ hdInfo.gnum }}</span>
  66. <span class="textBox">光伏站个数</span>
  67. </div>
  68. <div class="contentBox">
  69. <span class="numberBox">{{ hdInfo.ghours }}</span>
  70. <span class="textBox">{{ hdInfo.gename }}</span>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. <div class="mapBtuBg">
  76. <div id="mapBtuOne" class="mapBtu mapBtuBefore" @click="clickBtu('mapBtuOne')">
  77. <span class="mapBtuText">地形图</span>
  78. </div>
  79. <!-- <div id="mapBtuTwo" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuTwo')">-->
  80. <!-- <span class="mapBtuText">风场气象图</span>-->
  81. <!-- </div>-->
  82. <div id="mapBtuThree" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuThree')">
  83. <span class="mapBtuText">风资源分布图</span>
  84. </div>
  85. <!-- <div id="mapBtuFour" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuFour')">-->
  86. <!-- <span class="mapBtuText">光辐射气象图</span>-->
  87. <!-- </div>-->
  88. <div id="mapBtuFive" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuFive')">
  89. <span class="mapBtuText">光资源分布图</span>
  90. </div>
  91. </div>
  92. <div v-if="mapMark === 'mapBtuOne'">
  93. <bige-map :mapValue="mapValue"/>
  94. </div>
  95. <div v-if="mapMark === 'mapBtuThree'">
  96. <bige-heat-map :mapValue="mapValue"/>
  97. </div>
  98. <div v-if="mapMark === 'mapBtuFive'">
  99. <bige-heat-sun-map :mapValue="mapValue"/>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. </template>
  105. <script>
  106. import {getStationSeat, hauFuInfo} from "@/api/biz/dataQuery/largeScreenPage";
  107. import bigeMap from "@/views/largeScreenPage/components/bigeMap";
  108. import bigeHeatMap from "@/views/largeScreenPage/components/bigeHeatMap";
  109. import bigeHeatSunMap from "@/views/largeScreenPage/components/bigeHeatSunMap";
  110. export default {
  111. name: "provincialEnergyStations",
  112. components: {
  113. bigeMap,bigeHeatMap,bigeHeatSunMap
  114. },
  115. data() {
  116. return {
  117. timer: null,
  118. time: '',
  119. mapMark:'mapBtuOne',
  120. provinceInfo: {//全省信息
  121. // fNum:'100',
  122. // fHours:'2496h',
  123. // gNum:'41',
  124. // gHours:'1620h'
  125. },
  126. hdInfo: { //华电信息
  127. // fNum:'10',
  128. // fEName:'瑞信风电场',//风场站名称
  129. // fHours:'3256h',
  130. // gNum:'4',
  131. // gEName:'宁姜环球光伏',//光伏站名称
  132. // gHours:'1636h'
  133. },
  134. //地图传值
  135. mapValue: {
  136. level: null,//地图层级
  137. center: [],//中心坐标
  138. allStationInfo: null,//场站坐标
  139. },
  140. allStationSeat:[],//场站位置
  141. }
  142. },
  143. destroyed() {
  144. clearInterval(this.timer)
  145. this.timer = null
  146. },
  147. mounted() {
  148. this.formatTime()
  149. this.getInfo()
  150. this.timer = setInterval(this.formatTime, 1000 * 60)
  151. },
  152. methods: {
  153. getInfo() {
  154. getStationSeat().then(res=>{
  155. console.log(res.data)
  156. this.allStationSeat = res.data
  157. this.mapValue = {
  158. params:new Date(),
  159. level: null,//地图层级
  160. center: [],//中心坐标
  161. allStationInfo: res.data,//场站坐标
  162. }
  163. }).catch(err=>{
  164. console.log('所有场站位置查询异常' + err)
  165. })
  166. hauFuInfo().then(res => {
  167. this.provinceInfo = res.data.provinceInfo
  168. this.hdInfo = res.data.hdInfo
  169. }).catch(err => {
  170. console.log('华富总体信息查询异常' + err)
  171. })
  172. },
  173. push() {
  174. this.$router.push({path: "/dataQuery/windTowerStatusInfo"})
  175. },
  176. back() {
  177. this.$router.push({path: "/"})
  178. },
  179. pushPreProject() {
  180. this.$router.push({path: "/homepage/preProjectResources"})
  181. },
  182. pushStationResource() {
  183. this.$router.push({path: "/homepage/stationResources"})
  184. },
  185. clickBtu(id) {
  186. this.mapValue = {
  187. params:new Date(),
  188. level: null,//地图层级
  189. center: [],//中心坐标
  190. allStationInfo: this.allStationSeat,//场站坐标
  191. }
  192. this.mapMark = id
  193. let clickItem = document.getElementById(id)
  194. let activeItem = document.querySelector('.mapBtuBefore')
  195. activeItem.classList.remove('mapBtuBefore')
  196. activeItem.classList.add('mapBtuAfter')
  197. clickItem.classList.remove('mapBtuAfter')
  198. clickItem.classList.add('mapBtuBefore')
  199. },
  200. /*时间格式化*/
  201. formatTime() {
  202. this.time = ''
  203. let date = new Date()
  204. let year = date.getFullYear(); // 年
  205. let month = date.getMonth() + 1; // 月
  206. let day = date.getDate();
  207. let hour = date.getHours(); // 获取当前小时数(0-23)
  208. let minutes = date.getMinutes();
  209. if (month < 10) month = "0" + month;
  210. if (day < 10) day = "0" + day;
  211. if (minutes < 10) minutes = "0" + minutes;
  212. this.time = year + "-" + month + "-" + day + " " + hour + ' : ' + minutes;
  213. }
  214. }
  215. }
  216. </script>
  217. <style scoped>
  218. .ppage {
  219. width: 100%;
  220. height: calc(100vh);
  221. background: url(../../../assets/largeScreenImg/backBg.png) no-repeat;
  222. background-size: 100% 100%;
  223. }
  224. .provincialEnergyStationsPage {
  225. width: 100%;
  226. height: calc(100vh);
  227. /*background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps6g1swu667otdfgvidaizwk7p5p4on7b9azu9yxgzdr9vygb97c721c8b-8de6-4c17-9b4d-952d26ecb72e) -202px -3px no-repeat;*/
  228. /*background-size: 100% 100%;*/
  229. color: white;
  230. }
  231. .timeBox {
  232. position: absolute;
  233. left: 2%;
  234. top: 0;
  235. font-size: 20px;
  236. line-height: 40px;
  237. font-family: timeFont !important;
  238. }
  239. .page {
  240. position: fixed;
  241. top: 0;
  242. left: 0;
  243. bottom: 0;
  244. right: 0;
  245. overflow: auto;
  246. box-shadow: inset -1px -20px 550px 200px rgb(12 25 69 / 80%);
  247. }
  248. .topTiltle {
  249. width: 100%;
  250. height: 5.5%;
  251. background: url(../../../assets/largeScreenImg/index/topTitleBg.png) -2px -1px no-repeat;
  252. background-size: 100% 100%;
  253. display: flex;
  254. justify-content: center;
  255. }
  256. .title {
  257. width: 17%;
  258. height: 100%;
  259. text-align: center;
  260. margin-top: .2%;
  261. font-size: 30px;
  262. font-weight: 800;
  263. background-image: linear-gradient(
  264. 360deg,
  265. rgba(178, 204, 252, 1) 0,
  266. rgba(178, 204, 252, 1) 0,
  267. rgba(255, 255, 255, 1) 100%,
  268. rgba(255, 255, 255, 1) 100%
  269. );
  270. background-clip: text;
  271. color: transparent;
  272. }
  273. .btuGroup {
  274. position: absolute;
  275. right: 0;
  276. top: .3%;
  277. color: white;
  278. width: 30%;
  279. height: 5.5%;
  280. display: flex;
  281. font-size: 18px;
  282. }
  283. .topBtu {
  284. height: 100%;
  285. margin-top: -1.5%;
  286. display: flex;
  287. justify-content: center;
  288. align-items: center;
  289. cursor: pointer;
  290. }
  291. .topRightBtu {
  292. background: url(../../../assets/largeScreenImg/index/topRightBtuBg.png) 100% no-repeat;
  293. background-size: 100% 100%;
  294. width: 50%;
  295. }
  296. .topLeftBtu {
  297. background: url(../../../assets/largeScreenImg/index/topLeftBtuBg.png) 100% no-repeat;
  298. background-size: 100% 100%;
  299. width: 30%;
  300. }
  301. .rightTextBg {
  302. position: absolute;
  303. right: 2%;
  304. top: 8%;
  305. width: 20%;
  306. display: flex;
  307. flex-direction: column;
  308. z-index: 1000000;
  309. }
  310. .rightBg {
  311. background: url(../../../assets/largeScreenImg/index/leftTextBg.png) 100% no-repeat;
  312. background-size: 100% 100%;
  313. padding: 5%;
  314. }
  315. .bottomBox {
  316. margin-top: 2%;
  317. }
  318. .mapBtuBg {
  319. position: absolute;
  320. right: 22%;
  321. top: 7%;
  322. width: 10%;
  323. z-index: 10000;
  324. }
  325. .rightTiltleTextBg {
  326. height: 32px;
  327. background: url(../../../assets/largeScreenImg/index/rightTiltleTextBg.png) 100% no-repeat;
  328. background-size: 100% 100%;
  329. }
  330. .rightMainTitle {
  331. color: rgba(183, 243, 252, 1);
  332. font-size: 20px;
  333. font-weight: 550;
  334. margin-left: 8%;
  335. position: relative;
  336. top: -25%;
  337. }
  338. .rightTopContent {
  339. display: flex;
  340. justify-content: space-around;
  341. flex-wrap: wrap;
  342. }
  343. .contentBox {
  344. margin-top: 5%;
  345. width: 35%;
  346. height: 125px;
  347. background: url(../../../assets/largeScreenImg/index/liubianxingBorder.png) 100% no-repeat;
  348. background-size: 100% 100%;
  349. display: flex;
  350. flex-direction: column;
  351. justify-content: center;
  352. align-items: center;
  353. }
  354. .numberBox {
  355. font-size: 24px;
  356. font-weight: 700;
  357. background-image: linear-gradient(
  358. rgba(255, 255, 255, 1) 0,
  359. rgba(255, 255, 255, 1) 0,
  360. rgba(70, 255, 222, 1) 98.730469%,
  361. rgba(70, 255, 222, 1) 100%
  362. );
  363. background-clip: text;
  364. color: transparent;
  365. }
  366. .mapBtu {
  367. height: 50px;
  368. width: 200px;
  369. }
  370. .mapBtuAfter {
  371. background: url(../../../assets/largeScreenImg/index/mapBtuClickAfter.png) 100% no-repeat;
  372. background-size: 100% 100%;
  373. }
  374. .mapBtuBefore {
  375. background: url(../../../assets/largeScreenImg/index/mapBtuClickBefore.png) 100% no-repeat;
  376. background-size: 100% 100%;
  377. margin-top: 9px;
  378. }
  379. .mapBtuText {
  380. line-height: 50px;
  381. font-size: 16px;
  382. display: flex;
  383. align-items: center;
  384. margin-left: 20%;
  385. }
  386. </style>