map.vue 90 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025
  1. <template>
  2. <div class="map">
  3. <HeaderNav
  4. ref="header"
  5. :wpId="wpId"
  6. :currents="currents"
  7. @firstRender="firstRender"
  8. @typeFlag="typeFlag"
  9. :isShows="false"
  10. />
  11. <!-- 山西左侧信息 -->
  12. <div v-if="currentTitle != '全国'">
  13. <div class="security-days safe_power">
  14. <div class="text">安全天数:</div>
  15. <div class="num">
  16. <span class="font-num">{{
  17. StationinformationData?.qt?.aqts
  18. ? StationinformationData.qt?.aqts
  19. : "0"
  20. }}</span>
  21. <span class="unit">天</span>
  22. </div>
  23. <div class="security">
  24. <div class="text">资产统计:</div>
  25. <div class="num">
  26. <span class="font-num">
  27. {{
  28. wpId.includes("FDC") || wpId.includes("GDC")
  29. ? (
  30. StationinformationData?.station[wpId]?.zjrl / 1000
  31. ).toFixed(2)
  32. : StationinformationData?.qt?.zzjrl
  33. }}
  34. </span>
  35. <span class="unit-t">MW</span>
  36. </div>
  37. <div class="lineBox">
  38. <div class="fd-rl" v-if="tabShow == -1 || tabShow == 0">
  39. <span class="text">风电</span>
  40. <span class="font-num">
  41. {{
  42. wpId.includes("FDC")
  43. ? (
  44. StationinformationData?.station[wpId]?.zjrl / 1000
  45. ).toFixed(2)
  46. : StationinformationData?.qt?.fdzzjrl
  47. }}
  48. </span>
  49. <span class="unit">MW</span>
  50. </div>
  51. <div class="gf-rl" v-if="tabShow == -2 || tabShow == 0">
  52. <span class="text">光伏</span>
  53. <span class="font-num">{{
  54. wpId.includes("GDC")
  55. ? (
  56. StationinformationData?.station[wpId]?.zjrl / 1000
  57. ).toFixed(2)
  58. : StationinformationData?.qt?.gfzzjrl
  59. }}</span>
  60. <span class="unit">MW</span>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. <div
  66. class="qjny-info safe_power"
  67. @mouseenter="switchShow = true"
  68. @mouseleave="switchShow = false"
  69. >
  70. <ul>
  71. <li v-show="tabShow == -1 || tabShow == 0">
  72. <div class="imgs">
  73. <img src="@assets/imgs/downF.png" />
  74. <img src="@assets/imgs/windup.png" class="qty_img" />
  75. </div>
  76. <p class="qty_tit">
  77. 风场数量
  78. <sapn class="qty_value">
  79. {{
  80. wpId.includes("FDC")
  81. ? 1
  82. : StationinformationData?.cblpoint.qjny_fcts
  83. }}</sapn
  84. >
  85. <span class="qty_u">个</span>
  86. </p>
  87. <div class="qty_content">
  88. <p class="qty_imag">
  89. 风机台数
  90. <span class="qty_val">
  91. {{
  92. wpId.includes("FDC")
  93. ? StationinformationData?.station[wpId]?.zjts
  94. : StationinformationData?.cblpoint.qjny_fj_ts
  95. }} </span
  96. ><span class="qty_unit">台</span>
  97. </p>
  98. <p class="qty_imag">
  99. 陆地风机
  100. <span class="qty_val">
  101. {{
  102. wpId.includes("FDC")
  103. ? StationinformationData?.station[wpId]?.zjts
  104. : StationinformationData?.cblpoint.qjny_fj_ts
  105. }} </span
  106. ><span class="qty_unit">台</span>
  107. </p>
  108. <p class="qty_imag">
  109. 海上风机
  110. <span class="qty_val">
  111. {{
  112. wpId.includes("FDC")
  113. ? StationinformationData?.station[wpId]?.hszjts
  114. : StationinformationData?.cblpoint.qjny_hsfj_ts
  115. }} </span
  116. ><span class="qty_unit">台</span>
  117. </p>
  118. </div>
  119. </li>
  120. <li class="line" v-show="tabShow == 0"></li>
  121. <li v-show="tabShow == 0 || tabShow == -2">
  122. <div class="imgs">
  123. <img src="@assets/imgs/downg.png" />
  124. <img src="@assets/imgs/ptyup.png" class="qty_img" />
  125. </div>
  126. <p class="qty_tit">
  127. 光伏数量
  128. <sapn class="qty_value" id="pv">{{
  129. wpId.includes("GDC")
  130. ? 1
  131. : StationinformationData?.cblpoint.qjny_gfts
  132. }}</sapn>
  133. <span class="qty_u">个</span>
  134. </p>
  135. <div class="qty_content">
  136. <p class="qty_imag">
  137. 逆变器
  138. <span class="qty_val">
  139. {{
  140. wpId.includes("GDC")
  141. ? StationinformationData?.station[wpId]?.jzzjts +
  142. StationinformationData?.station[wpId]?.zczjts
  143. : StationinformationData?.cblpoint.qjny_gf_jzts +
  144. StationinformationData?.cblpoint.qjny_gf_zcts
  145. }}
  146. </span>
  147. <span class="qty_unit">台</span>
  148. </p>
  149. <p class="qty_imag">
  150. 集中式<span class="qty_val">
  151. {{
  152. wpId.includes("GDC")
  153. ? StationinformationData?.station[wpId]?.jzzjts
  154. : StationinformationData?.cblpoint.qjny_gf_jzts
  155. }} </span
  156. ><span class="qty_unit">台</span>
  157. </p>
  158. <p class="qty_imag">
  159. 组串式<span class="qty_val">
  160. {{
  161. wpId.includes("GDC")
  162. ? StationinformationData?.station[wpId]?.zczjts
  163. : StationinformationData?.cblpoint.qjny_gf_zcts
  164. }} </span
  165. ><span class="qty_unit">台</span>
  166. </p>
  167. </div>
  168. </li>
  169. </ul>
  170. <div class="switch-jrqk" v-show="switchShow">
  171. <div><img src="@/assets/imgs/arrows.png" /> 接入情况</div>
  172. <ul>
  173. <li v-show="tabShow == -1 || tabShow == 0">
  174. <div class="imgs">
  175. <img src="@assets/imgs/downF.png" />
  176. <img src="@assets/imgs/windup.png" class="qty_img" />
  177. </div>
  178. <p class="qty_tit">
  179. 风场数量
  180. <sapn class="qty_value">
  181. {{
  182. wpId.includes("FDC")
  183. ? 1
  184. : StationinformationData?.cblpoint?.jr_fcts
  185. }}</sapn
  186. >
  187. <span class="qty_u">个</span>
  188. </p>
  189. <div class="qty_content">
  190. <p class="qty_imag">
  191. 风机台数<span class="qty_val">
  192. {{
  193. wpId.includes("FDC")
  194. ? StationinformationData?.station[wpId]?.zjts
  195. : StationinformationData?.cblpoint?.jr_fj_ts
  196. }} </span
  197. ><span class="qty_unit">台</span>
  198. </p>
  199. <p class="qty_imag">
  200. 陆地风机<span class="qty_val">
  201. {{
  202. wpId.includes("FDC")
  203. ? StationinformationData?.station[wpId]?.zjts
  204. : StationinformationData?.cblpoint?.jr_fj_ts
  205. }} </span
  206. ><span class="qty_unit">台</span>
  207. </p>
  208. <p class="qty_imag">
  209. 海上风机<span class="qty_val">
  210. {{
  211. wpId.includes("FDC")
  212. ? StationinformationData?.station[wpId]?.hszjts
  213. : StationinformationData?.cblpoint?.qjny_hsfj_ts
  214. }} </span
  215. ><span class="qty_unit">台</span>
  216. </p>
  217. </div>
  218. </li>
  219. <li class="line" v-if="tabShow == 0"></li>
  220. <li v-show="tabShow == 0 || tabShow == -2">
  221. <div class="imgs">
  222. <img src="@assets/imgs/downg.png" />
  223. <img src="@assets/imgs/ptyup.png" class="qty_img" />
  224. </div>
  225. <p class="qty_tit">
  226. 光伏数量
  227. <sapn class="qty_value" id="pv">
  228. {{
  229. wpId.includes("GDC")
  230. ? 1
  231. : StationinformationData?.cblpoint?.jr_gfts
  232. }}</sapn
  233. >
  234. <span class="qty_u">个</span>
  235. </p>
  236. <div class="qty_content">
  237. <p class="qty_imag">
  238. 逆变器<span class="qty_val">
  239. {{
  240. wpId.includes("GDC")
  241. ? StationinformationData?.station[wpId]?.jzzjts +
  242. StationinformationData?.station[wpId]?.zczjts
  243. : StationinformationData?.cblpoint.jr_gf_jzts +
  244. StationinformationData?.cblpoint.jr_gf_zcts
  245. }}
  246. </span>
  247. <span class="qty_unit">台</span>
  248. </p>
  249. <p class="qty_imag">
  250. 集中式<span class="qty_val">
  251. {{
  252. wpId.includes("GDC")
  253. ? StationinformationData?.station[wpId]?.jzzjts
  254. : StationinformationData?.cblpoint?.jr_gf_jzts
  255. }} </span
  256. ><span class="qty_unit">台</span>
  257. </p>
  258. <p class="qty_imag">
  259. 组串式<span class="qty_val">
  260. {{
  261. wpId.includes("GDC")
  262. ? StationinformationData?.station[wpId]?.zczjts
  263. : StationinformationData?.cblpoint?.jr_gf_zcts
  264. }} </span
  265. ><span class="qty_unit">台</span>
  266. </p>
  267. </div>
  268. </li>
  269. </ul>
  270. </div>
  271. </div>
  272. <div class="ecoName safe_power">
  273. <p class="ecoTitle">社会贡献<span>万吨/月</span></p>
  274. <ul>
  275. <li class="eco_count">
  276. <div class="svg-icon svg-icon-green">
  277. <svg-icon class="" svgid="svg-煤" />
  278. </div>
  279. <p class="eco_val text-ellipsis">
  280. {{ (StationinformationData?.qt.jym / 10000).toFixed(2) }}
  281. </p>
  282. <p class="eco_name">煤</p>
  283. </li>
  284. <li class="eco_count">
  285. <div class="svg-icon svg-icon-green">
  286. <svg-icon class="" svgid="svg-水" />
  287. </div>
  288. <p class="eco_val text-ellipsis">
  289. {{ (StationinformationData?.qt.jys / 10000).toFixed(2) }}
  290. </p>
  291. <p class="eco_name">水</p>
  292. </li>
  293. <li class="eco_count">
  294. <div class="kind">
  295. <div class="svg-icon svg-icon-green">
  296. <svg-icon svgid="svg-co2" />
  297. </div>
  298. </div>
  299. <p class="eco_val text-ellipsis">
  300. {{ (StationinformationData?.qt.co2 / 10000).toFixed(2) }}
  301. </p>
  302. <p class="eco_name">二氧化碳</p>
  303. </li>
  304. <li class="eco_count">
  305. <div class="kind">
  306. <div class="svg-icon svg-icon-green">
  307. <svg-icon svgid="svg-so2" />
  308. </div>
  309. </div>
  310. <p class="eco_val text-ellipsis">
  311. {{ (StationinformationData?.qt.so2 / 10000).toFixed(2) }}
  312. </p>
  313. <p class="eco_name">二氧化硫</p>
  314. </li>
  315. </ul>
  316. </div>
  317. <div class="my_echarts safe_power" v-if="penetrateType == 3">
  318. <power-echarts
  319. :CurveValues="CurveValues"
  320. width="680px"
  321. :unit="'MW'"
  322. :ratio="1000"
  323. />
  324. </div>
  325. </div>
  326. <!-- 全国左侧信息 -->
  327. <div class="leftBox" v-if="currentTitle == '全国'">
  328. <div
  329. :class="
  330. $store.state.themeName === 'light' ? 'new-home-light' : 'new-home'
  331. "
  332. >
  333. <div class="security-day">
  334. <div class="text">清洁能源产业总装机容量:</div>
  335. <div class="num">
  336. <span class="font-num">{{
  337. StationinformationData?.qt?.zzjrl
  338. }}</span>
  339. <span class="unit">MW</span>
  340. </div>
  341. <div class="security">
  342. <div class="lineBox">
  343. <div v-if="activeTab == -1 || activeTab == 0">
  344. <span>风电</span>
  345. <span class="num font-num">{{
  346. StationinformationData?.qt?.fdzzjrl
  347. }}</span>
  348. <span class="unit">MW</span>
  349. </div>
  350. <div v-if="activeTab == -2 || activeTab == 0">
  351. <span>光伏</span>
  352. <span class="num font-num">{{
  353. StationinformationData?.qt?.gfzzjrl
  354. }}</span>
  355. <span class="unit">MW</span>
  356. </div>
  357. </div>
  358. <div class="text">安全天数:</div>
  359. <div class="num">
  360. <span class="font-num">{{
  361. StationinformationData?.qt?.aqts || 0
  362. }}</span>
  363. <span class="unit-t">天</span>
  364. </div>
  365. </div>
  366. </div>
  367. <div
  368. class="energy-system-box box1"
  369. :class="activeTab == -1 || activeTab == -2 ? 'piggy-tab-width' : ''"
  370. >
  371. <div class="energy-system-content clearfix">
  372. <div class="title">
  373. <span class="title-name">清洁能源公司</span>
  374. <span class="title-all-title">总装机容量 :</span>
  375. <span class="title-all-content" v-if="activeTab == 0">{{
  376. Number(StationinformationData?.cblpoint?.qjny_zzjrl) || 0
  377. }}</span>
  378. <span class="title-all-content" v-if="activeTab == -1">{{
  379. StationinformationData?.cblpoint?.qjny_fd_zjrl || 0
  380. }}</span>
  381. <span class="title-all-content" v-if="activeTab == -2">{{
  382. StationinformationData?.cblpoint?.qjny_gf_zjrl || 0
  383. }}</span>
  384. <span class="title-all-unit">MW</span>
  385. </div>
  386. <div
  387. class="left-content float-left"
  388. :class="activeTab == -1 ? 'piggy-bank' : ''"
  389. v-if="activeTab == -1 || activeTab == 0"
  390. >
  391. <div class="img-num clearfix">
  392. <div class="img float-left">
  393. <img src="../../../assets/home/fc_1.png" alt="" />
  394. </div>
  395. <div class="num float-left">
  396. <span>风电场数量</span> <br />
  397. <span>{{ StationinformationData?.cblpoint?.qjny_fcts }}</span>
  398. <span>个</span>
  399. </div>
  400. </div>
  401. <div class="capacity">
  402. <div class="item">
  403. <el-row>
  404. <el-col :span="8"><span>装机容量</span></el-col>
  405. <el-col :span="9"
  406. ><span>{{
  407. StationinformationData?.cblpoint?.qjny_fd_zjrl
  408. }}</span></el-col
  409. >
  410. <el-col :span="7"><span>MW</span></el-col>
  411. </el-row>
  412. </div>
  413. <!-- <div class="item">
  414. <el-row>
  415. <el-col :span="8"><span>风机台数</span></el-col>
  416. <el-col :span="9"
  417. ><span>{{
  418. StationinformationData?.cblpoint?.qjny_fj_ts
  419. }}</span></el-col
  420. >
  421. <el-col :span="7"><span>台</span></el-col>
  422. </el-row>
  423. </div> -->
  424. </div>
  425. </div>
  426. <div
  427. class="right-content float-left"
  428. :class="activeTab == -2 ? 'piggy-bank' : ''"
  429. v-if="activeTab == -2 || activeTab == 0"
  430. >
  431. <div class="img-num clearfix">
  432. <div class="img float-left">
  433. <img src="../../../assets/home/gf_1.png" alt="" />
  434. </div>
  435. <div class="num float-left">
  436. <span>光伏电站数量</span> <br />
  437. <span>{{ StationinformationData?.cblpoint?.qjny_gfts }}</span>
  438. <span>个</span>
  439. </div>
  440. </div>
  441. <div class="capacity">
  442. <div class="item">
  443. <el-row>
  444. <el-col :span="8"><span>装机容量</span></el-col>
  445. <el-col :span="9"
  446. ><span>{{
  447. StationinformationData?.cblpoint?.qjny_gf_zjrl
  448. }}</span></el-col
  449. >
  450. <el-col :span="7"><span>MW</span></el-col>
  451. </el-row>
  452. </div>
  453. <!-- <div class="item">
  454. <el-row>
  455. <el-col :span="8"><span>集中式</span></el-col>
  456. <el-col :span="9"
  457. ><span>{{
  458. StationinformationData?.cblpoint?.qjny_gf_jzts
  459. }}</span></el-col
  460. >
  461. <el-col :span="7"><span>台</span></el-col>
  462. </el-row>
  463. </div>
  464. <div class="item">
  465. <el-row>
  466. <el-col :span="8"><span>组串式</span></el-col>
  467. <el-col :span="9"
  468. ><span>{{
  469. StationinformationData?.cblpoint?.qjny_gf_zcts
  470. }}</span></el-col
  471. >
  472. <el-col :span="7"><span>台</span></el-col>
  473. </el-row>
  474. </div> -->
  475. </div>
  476. </div>
  477. </div>
  478. </div>
  479. <div
  480. class="energy-system-box box2"
  481. :class="activeTab == -1 || activeTab == -2 ? 'piggy-tab-width' : ''"
  482. >
  483. <div class="energy-system-content clearfix">
  484. <div class="title">
  485. <span class="title-name">系统接入情况</span>
  486. <span class="title-all-title">总装机容量 :</span>
  487. <span class="title-all-content" v-if="activeTab == 0">{{
  488. Number(StationinformationData?.cblpoint?.jr_zzjrl) || 0
  489. }}</span>
  490. <span class="title-all-content" v-if="activeTab == -1">{{
  491. StationinformationData?.cblpoint?.jr_fd_zjrl || 0
  492. }}</span>
  493. <span class="title-all-content" v-if="activeTab == -2">{{
  494. StationinformationData?.cblpoint?.jr_gf_zjrl || 0
  495. }}</span>
  496. <span class="title-all-unit">MW</span>
  497. </div>
  498. <div
  499. class="left-content float-left"
  500. :class="activeTab == -1 ? 'piggy-bank' : ''"
  501. v-if="activeTab == -1 || activeTab == 0"
  502. >
  503. <div class="img-num clearfix">
  504. <div>
  505. <div class="img float-left">
  506. <img src="../../../assets/home/fc_1.png" alt="" />
  507. </div>
  508. <div class="num float-left">
  509. <span>风电场数量</span> <br />
  510. <span>{{ StationinformationData?.cblpoint?.jr_fcts }}</span>
  511. <span>个</span>
  512. </div>
  513. </div>
  514. </div>
  515. <div class="capacity">
  516. <div class="item">
  517. <el-row>
  518. <el-col :span="8"><span>装机容量</span></el-col>
  519. <el-col :span="9"
  520. ><span>{{
  521. StationinformationData?.cblpoint?.jr_fd_zjrl
  522. }}</span></el-col
  523. >
  524. <el-col :span="7"><span>MW</span></el-col>
  525. </el-row>
  526. </div>
  527. <div class="item">
  528. <el-row>
  529. <el-col :span="8"><span>风机台数</span></el-col>
  530. <el-col :span="9"
  531. ><span>{{
  532. StationinformationData?.cblpoint?.jr_fj_ts
  533. }}</span></el-col
  534. >
  535. <el-col :span="7"><span>台</span></el-col>
  536. </el-row>
  537. </div>
  538. </div>
  539. </div>
  540. <div
  541. class="right-content float-left"
  542. :class="activeTab == -2 ? 'piggy-bank' : ''"
  543. v-if="activeTab == -2 || activeTab == 0"
  544. >
  545. <div class="img-num clearfix">
  546. <div class="img float-left">
  547. <img src="../../../assets/home/gf_1.png" alt="" />
  548. </div>
  549. <div class="num float-left">
  550. <span>光伏电站数量</span> <br />
  551. <span>{{ StationinformationData?.cblpoint?.jr_gfts }}</span>
  552. <span>个</span>
  553. </div>
  554. </div>
  555. <div class="capacity">
  556. <div class="item">
  557. <el-row>
  558. <el-col :span="8"><span>装机容量</span></el-col>
  559. <el-col :span="9"
  560. ><span>{{
  561. StationinformationData?.cblpoint?.jr_gf_zjrl || 0
  562. }}</span></el-col
  563. >
  564. <el-col :span="7"><span>MW</span></el-col>
  565. </el-row>
  566. </div>
  567. <div class="item">
  568. <el-row>
  569. <el-col :span="8"><span>集中式</span></el-col>
  570. <el-col :span="9"
  571. ><span>{{
  572. StationinformationData?.cblpoint?.jr_gf_jzts || 0
  573. }}</span></el-col
  574. >
  575. <el-col :span="7"><span>台</span></el-col>
  576. </el-row>
  577. </div>
  578. <div class="item">
  579. <el-row>
  580. <el-col :span="8"><span>组串式</span></el-col>
  581. <el-col :span="9"
  582. ><span>{{
  583. StationinformationData?.cblpoint?.jr_gf_zcts || 0
  584. }}</span></el-col
  585. >
  586. <el-col :span="7"><span>台</span></el-col>
  587. </el-row>
  588. </div>
  589. </div>
  590. </div>
  591. </div>
  592. </div>
  593. <div class="energy-system-box box3">
  594. <div class="model-bg">
  595. <div class="titles">
  596. <div class="name">节能减排</div>
  597. <div class="unit">(单位: 万吨)</div>
  598. </div>
  599. <div class="save">
  600. <div class="save-item">
  601. <div
  602. class="jnjp-icon svg-icon svg-icon-green"
  603. style="width:5.5vh,height:5.5vh"
  604. >
  605. <svg-icon class="" svgid="svg-煤" />
  606. </div>
  607. <div class="save-value">
  608. {{
  609. Number(
  610. Number(StationinformationData?.qt?.jym) / 10000
  611. ).toFixed(2)
  612. }}
  613. </div>
  614. <div class="save-name">煤</div>
  615. </div>
  616. <div class="save-item">
  617. <div class="jnjp-icon svg-icon svg-icon-green">
  618. <svg-icon class="" svgid="svg-水" />
  619. </div>
  620. <div class="save-value">
  621. {{
  622. Number(
  623. Number(StationinformationData?.qt?.jys) / 10000
  624. ).toFixed(2)
  625. }}
  626. </div>
  627. <div class="save-name">水</div>
  628. </div>
  629. <div class="save-item">
  630. <div class="kind">
  631. <div class="jnjp-icon1 svg-icon svg-icon-green">
  632. <svg-icon class="" svgid="svg-co2" />
  633. </div>
  634. </div>
  635. <div class="save-value">
  636. {{
  637. Number(
  638. Number(StationinformationData?.qt?.co2) / 10000
  639. ).toFixed(2)
  640. }}
  641. </div>
  642. <div class="save-name">二氧化碳</div>
  643. </div>
  644. <div class="save-item">
  645. <div class="kind">
  646. <div class="jnjp-icon1 svg-icon svg-icon-green">
  647. <svg-icon class="" svgid="svg-so2" />
  648. </div>
  649. </div>
  650. <div class="save-value">
  651. {{
  652. Number(
  653. Number(StationinformationData?.qt?.so2) / 10000
  654. ).toFixed(2)
  655. }}
  656. </div>
  657. <div class="save-name">二氧化硫</div>
  658. </div>
  659. </div>
  660. </div>
  661. </div>
  662. </div>
  663. </div>
  664. <!-- 展示当前场站名称 -->
  665. <div class="name-box" v-if="currentTitle != '全国'">
  666. <div class="name-box-title">
  667. {{ currentTitle }}
  668. </div>
  669. </div>
  670. <!-- 返回按钮 -->
  671. <div
  672. class="return"
  673. @click="
  674. backMap(
  675. stationList[currents - 1]?.wpId,
  676. stationList[currents - 1]?.name
  677. )
  678. "
  679. v-show="currents != 0"
  680. >
  681. <span class="svg-icon svg-icon-sm">
  682. <svg-icon :svgid="'svg-arrow-dpwn-1'" />
  683. </span>
  684. 返回
  685. </div>
  686. <!-- 地图 -->
  687. <div class="map-img">
  688. <!-- 全国 -->
  689. <SvgMapNX
  690. v-if="currentTitle == '全国'"
  691. :homeSuspensionWindowsData="homeSuspensionWindowsData"
  692. :mapList="mapList"
  693. :show="showType"
  694. :data="StationinformationData"
  695. @clickLabel="clickLabel"
  696. >
  697. </SvgMapNX>
  698. <!-- 山西 -->
  699. <SX
  700. v-if="currentTitle != '全国'"
  701. :showType="showType"
  702. :companyid="companyid"
  703. :data="StationinformationData"
  704. @clickLabel="clickLabel"
  705. >
  706. </SX>
  707. </div>
  708. <!-- 全国右侧信息 -->
  709. <div
  710. class="right"
  711. v-if="currentTitle == '全国'"
  712. :class="activeTab == -1 || activeTab == -2 ? 'top-distance' : ''"
  713. >
  714. <el-dialog
  715. class="dialogs"
  716. width="80%"
  717. v-model="dialogElectric"
  718. :show-close="true"
  719. >
  720. <template #title>
  721. <div class="dialog-title">
  722. <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
  723. <div class="title">{{ showName }}</div>
  724. </div>
  725. </template>
  726. <div class="dialog-body" style="height: 40vh">
  727. <img class="dialog-img" src="@assets/imgs/dialog.png" />
  728. <div class="date">
  729. <div
  730. class="day"
  731. :class="electronType === 'day' ? 'active' : ''"
  732. @click="handleElectricDetail('day', '日发电量', type)"
  733. >
  734. </div>
  735. <div
  736. class="mouth"
  737. :class="electronType === 'month' ? 'active' : ''"
  738. @click="handleElectricDetail('month', '月发电量', type)"
  739. >
  740. </div>
  741. <div
  742. class="year"
  743. :class="electronType === 'year' ? 'active' : ''"
  744. @click="handleElectricDetail('year', '年发电量', type)"
  745. >
  746. </div>
  747. </div>
  748. <BarCharts
  749. :list="barList"
  750. width="100%"
  751. height="45vh"
  752. :ratio="10000"
  753. :showLegend="true"
  754. :top="30"
  755. :units="units"
  756. :interval="electronType === 'day' ? 1 : 0"
  757. :showkey="showkey"
  758. :showName="showName"
  759. :color="colors"
  760. >
  761. </BarCharts>
  762. </div>
  763. </el-dialog>
  764. <el-dialog
  765. class="dialogs"
  766. width="80%"
  767. v-model="dialogGroupRealname"
  768. :show-close="true"
  769. >
  770. <template #title>
  771. <div class="dialog-title">
  772. <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
  773. <div class="title">{{ showName }}</div>
  774. </div>
  775. </template>
  776. <div class="dialog-body" style="height: 40vh">
  777. <img class="dialog-img" src="@assets/imgs/dialog.png" />
  778. <windChartCom
  779. :windCurveValues="groupList"
  780. :unit="'MW'"
  781. :CurveTitle="'实时负荷'"
  782. width="100%"
  783. height="38vh"
  784. chartId="windChar"
  785. />
  786. </div>
  787. </el-dialog>
  788. <Row type="flex" style="margin-bottom: 20px">
  789. <Col :span="24">
  790. <div class="model-bg-new">
  791. <div class="titles">
  792. <div class="name">实时负荷</div>
  793. <div class="unit">(单位: MW)</div>
  794. </div>
  795. <power-review-home
  796. :data="powerDataHome"
  797. :id="wpIds"
  798. @chartClick="showPowerChart"
  799. />
  800. </div>
  801. <!-- @chartClick="showPowerChart" -->
  802. </Col>
  803. </Row>
  804. <Row
  805. type="flex"
  806. style="margin-bottom: 20px"
  807. v-if="activeTab == -1 || activeTab == 0"
  808. >
  809. <Col :span="24">
  810. <div class="model-bg-new-right">
  811. <div class="infos">
  812. <div class="titles">
  813. <div class="amount">
  814. <div class="icon fengji-icon svg-icon svg-icon-white"></div>
  815. <img
  816. class="amount-image"
  817. src="@/assets/png/wind.png"
  818. alt=""
  819. />
  820. <div class="amount-nums">
  821. <text class="num-item">{{
  822. StationinformationData?.cblpoint?.jr_fj_ts
  823. }}</text>
  824. </div>
  825. </div>
  826. <div
  827. v-if="
  828. !(
  829. wpId.includes('FDC') ||
  830. wpId.includes('GC') ||
  831. wpId.includes('GDC')
  832. )
  833. "
  834. class="info-nums"
  835. >
  836. 风电场<text class="nums">{{
  837. StationinformationData?.cblpoint?.jr_fcts
  838. }}</text>
  839. </div>
  840. </div>
  841. <div class="types">
  842. <div class="type-model">
  843. <div class="type-name" style="color: #1d99ff">待机</div>
  844. <div class="type-num">
  845. {{ StationinformationData?.mxztmap?.fd_djnum || 0 }}
  846. </div>
  847. </div>
  848. <div class="type-model">
  849. <div class="type-name" style="color: #05bb4c">运行</div>
  850. <div class="type-num">
  851. {{ StationinformationData?.mxztmap?.fd_yxnum || 0 }}
  852. </div>
  853. </div>
  854. <div class="type-model">
  855. <div class="type-name" style="color: #ba3237">故障</div>
  856. <div class="type-num">
  857. {{ StationinformationData?.mxztmap?.fd_gznum || 0 }}
  858. </div>
  859. </div>
  860. <div class="type-model">
  861. <div class="type-name" style="color: #e17e23">检修</div>
  862. <div class="type-num">
  863. {{ StationinformationData?.mxztmap?.fd_jxnum || 0 }}
  864. </div>
  865. </div>
  866. <div class="type-model">
  867. <div class="type-name" style="color: #c531c7">限电</div>
  868. <div class="type-num">
  869. {{ StationinformationData?.mxztmap?.fd_xdnum || 0 }}
  870. </div>
  871. </div>
  872. <div class="type-model">
  873. <div class="type-name" style="color: #fff">受累</div>
  874. <div class="type-num">
  875. {{ StationinformationData?.mxztmap?.fd_slnum || 0 }}
  876. </div>
  877. </div>
  878. <div class="type-model">
  879. <div class="type-name" style="color: #606769">离线</div>
  880. <div class="type-num">
  881. {{ StationinformationData?.mxztmap?.fd_lxnum || 0 }}
  882. </div>
  883. </div>
  884. </div>
  885. <div class="tabSwitchover">
  886. <div class="unit"><span>(单位: 万kWh)</span></div>
  887. </div>
  888. <div
  889. v-for="(item, index) in ForecastPowerNewHome_fc"
  890. :key="index"
  891. >
  892. <div class="power-charts">
  893. <div class="power-name">{{ item[0].name }}</div>
  894. <div class="power-item">
  895. <div class="power-value">
  896. <span
  897. :style="
  898. item[0].color === 1
  899. ? 'background-color:#4B55AE'
  900. : 'background-color:#05BB4C'
  901. "
  902. ></span>
  903. <span>{{ item[0].total }}</span>
  904. </div>
  905. <list-bar-chart-2-home
  906. :list="item"
  907. height="55px"
  908. width="250px"
  909. @click="
  910. handleElectricDetail(item[0].id, item[0].name, 'fc')
  911. "
  912. />
  913. </div>
  914. </div>
  915. </div>
  916. </div>
  917. </div>
  918. </Col>
  919. </Row>
  920. <Row
  921. type="flex"
  922. style="margin-bottom: 20px"
  923. v-if="activeTab == -2 || activeTab == 0"
  924. >
  925. <Col :span="24">
  926. <div class="model-bg-new-right">
  927. <div class="infos">
  928. <div class="titles">
  929. <div class="amount">
  930. <div class="icon fengji-icon svg-icon svg-icon-white"></div>
  931. <img class="amount-image" src="@/assets/png/sun.png" alt="" />
  932. <div class="amount-nums">
  933. <text class="num-item">{{
  934. Number(
  935. StationinformationData?.cblpoint?.jr_gf_jzts +
  936. StationinformationData?.cblpoint?.jr_gf_zcts
  937. ) || 0
  938. }}</text>
  939. </div>
  940. </div>
  941. <div class="info-nums">
  942. 电站<text class="nums">{{
  943. StationinformationData?.cblpoint?.jr_gfts
  944. }}</text>
  945. </div>
  946. </div>
  947. <div class="types">
  948. <div class="type-model">
  949. <div class="type-name" style="color: #1d99ff">待机</div>
  950. <div class="type-num">
  951. {{ StationinformationData?.mxztmap?.gf_djnum || 0 }}
  952. </div>
  953. </div>
  954. <div class="type-model">
  955. <div class="type-name" style="color: #05bb4c">运行</div>
  956. <div class="type-num">
  957. {{ StationinformationData?.mxztmap?.gf_yxnum || 0 }}
  958. </div>
  959. </div>
  960. <div class="type-model">
  961. <div class="type-name" style="color: #ba3237">故障</div>
  962. <div class="type-num">
  963. {{ StationinformationData?.mxztmap?.gf_gznum || 0 }}
  964. </div>
  965. </div>
  966. <div class="type-model">
  967. <div class="type-name" style="color: #e17e23">检修</div>
  968. <div class="type-num">
  969. {{ StationinformationData?.mxztmap?.gf_jxnum || 0 }}
  970. </div>
  971. </div>
  972. <div class="type-model">
  973. <div class="type-name" style="color: #c531c7">限电</div>
  974. <div class="type-num">
  975. {{ StationinformationData?.mxztmap?.gf_xdnum || 0 }}
  976. </div>
  977. </div>
  978. <div class="type-model">
  979. <div class="type-name" style="color: #fff">受累</div>
  980. <div class="type-num">
  981. {{ StationinformationData?.mxztmap?.gf_slnum || 0 }}
  982. </div>
  983. </div>
  984. <div class="type-model">
  985. <div class="type-name" style="color: #606769">离线</div>
  986. <div class="type-num">
  987. {{ StationinformationData?.mxztmap?.gf_lxnum || 0 }}
  988. </div>
  989. </div>
  990. </div>
  991. <div class="tabSwitchover">
  992. <div class="unit"><span>(单位: 万kWh)</span></div>
  993. </div>
  994. <div
  995. v-for="(item, index) in ForecastPowerNewHome_gf"
  996. :key="index"
  997. >
  998. <div class="power-charts">
  999. <div class="power-name">{{ item[0].name }}</div>
  1000. <div class="power-item">
  1001. <div class="power-value">
  1002. <span
  1003. :style="
  1004. index % 2 === 0
  1005. ? 'background-color:#4B55AE'
  1006. : 'background-color:#05BB4C'
  1007. "
  1008. ></span>
  1009. <span>{{ item[0].total }}</span>
  1010. </div>
  1011. <list-bar-chart-2-home
  1012. :list="item"
  1013. height="55px"
  1014. width="250px"
  1015. @click="
  1016. handleElectricDetail(item[0].id, item[0].name, 'gf')
  1017. "
  1018. />
  1019. </div>
  1020. </div>
  1021. </div>
  1022. </div>
  1023. </div>
  1024. </Col>
  1025. </Row>
  1026. </div>
  1027. <div v-if="currentTitle != '全国'">
  1028. <!-- 山西右侧信息 -->
  1029. <div class="card wind_card">
  1030. <el-row>
  1031. <el-col v-show="tabShow == 0 || tabShow == -1">
  1032. <div class="grid-content">
  1033. <div
  1034. class="img"
  1035. @click="handleClick('SSPJFS', '实时风速', 'm/s')"
  1036. >
  1037. <img
  1038. src="@/assets/imgs/pointer.png"
  1039. :style="{ transform: windSpeedRota }"
  1040. />
  1041. <div class="information">
  1042. {{ (StationinformationData?.qt?.ssfs).toFixed(2) }}
  1043. </div>
  1044. <div class="unit">m/s</div>
  1045. <p>实时风速</p>
  1046. </div>
  1047. </div>
  1048. </el-col>
  1049. <el-col v-show="tabShow == 0 || tabShow == -2">
  1050. <div
  1051. class="grid-content"
  1052. @click="handleClick('RPJGZD', '光照强度', 'W/m²')"
  1053. >
  1054. <div class="img">
  1055. <img
  1056. src="@/assets/imgs/pointer.png"
  1057. :style="{ transform: illuminationRota }"
  1058. />
  1059. <div class="information">
  1060. {{ (StationinformationData?.qt?.gzzs / 1000).toFixed(2) }}
  1061. </div>
  1062. <div class="unit">W/m²</div>
  1063. <p>光照强度</p>
  1064. </div>
  1065. </div>
  1066. </el-col>
  1067. <el-col>
  1068. <div
  1069. class="grid-content"
  1070. @click="handleClick('SSZGL', '实际功率', 'MW')"
  1071. >
  1072. <div class="img">
  1073. <img
  1074. src="@/assets/imgs/pointer.png"
  1075. :style="{ transform: actualPowerRota }"
  1076. />
  1077. <div class="information">
  1078. {{ (StationinformationData?.qt?.sjgl / 1000).toFixed(2) }}
  1079. </div>
  1080. <div class="unit">MW</div>
  1081. <p>实际功率</p>
  1082. </div>
  1083. </div>
  1084. </el-col>
  1085. <!-- <el-col>
  1086. <div
  1087. class="grid-content"
  1088. @click="handleClick('SSZLLGL', '理论功率', 'MW')"
  1089. >
  1090. <div class="img">
  1091. <img
  1092. src="@/assets/imgs/pointer.png"
  1093. :style="{ transform: ideaPowerRota }"
  1094. />
  1095. <div class="information">
  1096. {{ (StationinformationData?.qt?.llgl / 1000).toFixed(2) }}
  1097. </div>
  1098. <div class="unit">MW</div>
  1099. <p>理论功率</p>
  1100. </div>
  1101. </div>
  1102. </el-col> -->
  1103. <el-col v-show="tabShow == -1 || tabShow == -2">
  1104. <div
  1105. class="grid-content"
  1106. @click="
  1107. handleClick(
  1108. 'FNLYL',
  1109. tabShow == -1 ? '风能利用率' : '光能利用率',
  1110. '%'
  1111. )
  1112. "
  1113. >
  1114. <div class="img">
  1115. <img
  1116. src="@/assets/imgs/pointer.png"
  1117. :style="{ transform: guarantee }"
  1118. />
  1119. <div class="information">
  1120. {{ (StationinformationData?.qt?.fnlyl).toFixed(2) }}
  1121. </div>
  1122. <div class="unit">%</div>
  1123. <p>{{ tabShow == -1 ? "风能利用率" : "光能利用率" }}</p>
  1124. </div>
  1125. </div>
  1126. </el-col>
  1127. </el-row>
  1128. </div>
  1129. <div class="card electric_card">
  1130. <el-header>
  1131. <span class="title"></span>
  1132. <soan class="unit">(单位:万kWh)</soan>
  1133. </el-header>
  1134. <el-row
  1135. style="cursor: pointer"
  1136. v-for="(item, index) in fdlList"
  1137. :key="index"
  1138. @click="handleElectricDetail(item.id, item.title)"
  1139. >
  1140. <el-col :span="4">{{ item.title }}</el-col>
  1141. <el-col :span="14">
  1142. <div class="electric">
  1143. <div
  1144. class="progress_bar"
  1145. :style="{
  1146. width:
  1147. item.value && item.value1
  1148. ? (item.value / 10000 / item.value1) * 100 + '%'
  1149. : '0',
  1150. }"
  1151. >
  1152. <span class="count">{{ (item.value / 10000).toFixed(2) }}</span>
  1153. <span class="img"></span>
  1154. </div>
  1155. </div>
  1156. </el-col>
  1157. <el-col :span="4">{{ item.value1 }}</el-col>
  1158. </el-row>
  1159. <el-row class="summarize">
  1160. <div
  1161. class="summarize-left"
  1162. @click="handleUsingDetail('month', 'yfdl', '月利用小时')"
  1163. >
  1164. <p>月利用小时</p>
  1165. <p>
  1166. <span>
  1167. {{ StationinformationData?.qt?.ylyxs?.toFixed(2) }}
  1168. </span>
  1169. <span>小时</span>
  1170. </p>
  1171. </div>
  1172. <div class="line"></div>
  1173. <div
  1174. class="summarize-right"
  1175. @click="handleUsingDetail('year', 'nfdl', '年利用小时')"
  1176. >
  1177. <p>年利用小时</p>
  1178. <p>
  1179. <span>{{ StationinformationData?.qt?.nlyxs?.toFixed(2) }}</span>
  1180. <span>小时</span>
  1181. </p>
  1182. </div>
  1183. </el-row>
  1184. </div>
  1185. <div class="card station_card">
  1186. <el-row class="card_header" v-if="tabShow == 0 || tabShow == -1">
  1187. <el-col :span="12">
  1188. <img
  1189. src="@/assets/imgs/windmill.png"
  1190. style="display: inline-block"
  1191. />
  1192. <span>{{
  1193. wpId.includes("FDC")
  1194. ? StationinformationData?.station[wpId]?.zjts
  1195. : StationinformationData?.cblpoint?.jr_fj_ts
  1196. }}</span
  1197. >台
  1198. </el-col>
  1199. <el-col :span="12">
  1200. 场站<span>{{
  1201. wpId.includes("FDC")
  1202. ? 1
  1203. : StationinformationData?.cblpoint?.jr_fcts
  1204. }}</span
  1205. >个
  1206. </el-col>
  1207. </el-row>
  1208. <windLightDetial
  1209. v-if="tabShow == -1"
  1210. :dataDetial="StationinformationData?.sbztmap?.fd"
  1211. ></windLightDetial>
  1212. <windlightSimple
  1213. v-if="tabShow == 0"
  1214. :dataSimple="StationinformationData?.sbztmap?.fd"
  1215. />
  1216. <el-row class="card_header" v-if="tabShow == 0 || tabShow == -2">
  1217. <el-col :span="12">
  1218. <img src="@/assets/imgs/gfmill.png" style="display: inline-block" />
  1219. <span>{{
  1220. wpId.includes("GDC")
  1221. ? StationinformationData?.station[wpId]?.jzzjts +
  1222. StationinformationData?.station[wpId]?.zczjts
  1223. : StationinformationData?.cblpoint?.jr_gf_zcts +
  1224. StationinformationData?.cblpoint?.jr_gf_jzts
  1225. }}</span
  1226. >台
  1227. </el-col>
  1228. <el-col :span="12">
  1229. 场站<span>{{
  1230. wpId.includes("GDC")
  1231. ? 1
  1232. : StationinformationData?.cblpoint?.jr_gfts
  1233. }}</span
  1234. >个
  1235. </el-col>
  1236. </el-row>
  1237. <windLightDetial
  1238. v-if="tabShow == -2"
  1239. :dataDetial="StationinformationData?.sbztmap?.gf"
  1240. ></windLightDetial>
  1241. <windlightSimple
  1242. v-if="tabShow == 0"
  1243. :dataSimple="StationinformationData?.sbztmap?.gf"
  1244. />
  1245. </div>
  1246. <!-- 实时负荷弹窗 -->
  1247. <el-dialog
  1248. class="dialogs"
  1249. width="70%"
  1250. v-model="dialogVisible"
  1251. :show-close="true"
  1252. >
  1253. <template #title>
  1254. <div class="dialog-title">
  1255. <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
  1256. <div class="title">{{ showName }}</div>
  1257. </div>
  1258. </template>
  1259. <div class="dialog-body" style="height: 40vh">
  1260. <img class="dialog-img" src="@assets/imgs/dialog.png" />
  1261. <windChartCom
  1262. :windCurveValues="chartsData"
  1263. :CurveTitle="showName"
  1264. :unit="unit"
  1265. height="38vh"
  1266. chartId="windChar"
  1267. />
  1268. </div>
  1269. </el-dialog>
  1270. <!-- 发电量,利用小时弹窗 -->
  1271. <el-dialog
  1272. class="dialogs"
  1273. width="80%"
  1274. v-model="dialogElectric"
  1275. :show-close="true"
  1276. >
  1277. <template #title>
  1278. <div class="dialog-title">
  1279. <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
  1280. <div class="title">{{ showName }}</div>
  1281. </div>
  1282. </template>
  1283. <div class="dialog-body" style="height: 40vh">
  1284. <img class="dialog-img" src="@assets/imgs/dialog.png" />
  1285. <div class="date" v-if="showkey === 'electric'">
  1286. <div
  1287. class="day"
  1288. :class="electronType === 'day' ? 'active' : ''"
  1289. @click="handleElectricDetail('day', '日发电量')"
  1290. >
  1291. </div>
  1292. <div
  1293. class="mouth"
  1294. :class="electronType === 'month' ? 'active' : ''"
  1295. @click="handleElectricDetail('month', '月发电量')"
  1296. >
  1297. </div>
  1298. <div
  1299. class="year"
  1300. :class="electronType === 'year' ? 'active' : ''"
  1301. @click="handleElectricDetail('year', '年发电量')"
  1302. >
  1303. </div>
  1304. </div>
  1305. <div class="date" v-if="showkey === 'using'">
  1306. <div
  1307. class="day"
  1308. :class="electronType === 'month' ? 'active' : ''"
  1309. @click="handleUsingDetail('month', 'yfdl', '月利用小时')"
  1310. >
  1311. </div>
  1312. <div
  1313. class="year"
  1314. :class="electronType === 'year' ? 'active' : ''"
  1315. @click="handleUsingDetail('year', 'nfdl', '年利用小时')"
  1316. >
  1317. </div>
  1318. </div>
  1319. <BarCharts
  1320. :list="barList"
  1321. height="45vh"
  1322. :ratio="10000"
  1323. :showLegend="true"
  1324. :top="30"
  1325. :units="showkey === 'electric' ? '万kWh' : '小时'"
  1326. :interval="electronType === 'day' ? 1 : 0"
  1327. :showkey="showkey"
  1328. :showName="showName"
  1329. :color="colors"
  1330. >
  1331. </BarCharts>
  1332. </div>
  1333. </el-dialog>
  1334. </div>
  1335. </div>
  1336. </template>
  1337. <script>
  1338. import Row from "@/components/coms/grid/row.vue";
  1339. import Col from "@/components/coms/grid/col.vue";
  1340. import PowerReviewHome from "./power-review-home.vue";
  1341. import ListBarChart2Home from "@/components/chart/bar/list-bar-chart2-home.vue";
  1342. //全国地图总览
  1343. import SvgMapNX from "./map/svg-map-nx.vue";
  1344. // 山西
  1345. import SX from "./map/SX.vue";
  1346. import PowerEcharts from "@/components/chart/powerEcharts.vue";
  1347. import HeaderNav from "@/components//headerNav/index.vue";
  1348. import SvgIcon from "../../../components/coms/icon/svg-icon.vue";
  1349. import windLightDetial from "./windLightDetial.vue";
  1350. import windlightSimple from "./windlightSimple.vue";
  1351. import {
  1352. FindRealtimeInfo,
  1353. FindUtilizationhours,
  1354. FindPlanproject,
  1355. FindBasicDataInfo,
  1356. FindPowerInfo,
  1357. FindProjectplan,
  1358. } from "@/api/home/home.js";
  1359. import dayjs from "dayjs";
  1360. import windChartCom from "./windChartCom.vue";
  1361. import BarCharts from "@/views/Home/components/barCharts.vue";
  1362. export default {
  1363. // 名称
  1364. name: "Map",
  1365. // 使用组件
  1366. components: {
  1367. SvgMapNX,
  1368. SX,
  1369. Row,
  1370. Col,
  1371. PowerReviewHome,
  1372. ListBarChart2Home,
  1373. SvgIcon,
  1374. HeaderNav,
  1375. PowerEcharts,
  1376. windLightDetial,
  1377. windlightSimple,
  1378. windChartCom,
  1379. BarCharts,
  1380. },
  1381. mounted() {},
  1382. // 数据
  1383. data() {
  1384. return {
  1385. activeTab: 0, //当前tab
  1386. barList: [
  1387. {
  1388. name: "",
  1389. value: [],
  1390. },
  1391. ], //发电量利用小时柱状图
  1392. currentTitle: "全国", //当前地图名称
  1393. currents: 0, //当前层级
  1394. CurveValues: {
  1395. value: [
  1396. {
  1397. title: "",
  1398. value: [],
  1399. },
  1400. ],
  1401. }, //24小时功率曲线
  1402. companyid: "",
  1403. companyname: "",
  1404. chartsData: [], //实时负荷曲线
  1405. colors: ["#1c99ff", "#05BB4C"],
  1406. dialogVisible: false, //实时负荷弹窗开关
  1407. dialogElectric: false, //发电量、利用小时弹窗开关
  1408. electronType: "day", //日月年切换值
  1409. flag: false, //判断场站id
  1410. ForecastPowerNewHome_fc: [], //全国的风电发电量列表
  1411. ForecastPowerNewHome_gf: [], //全国的光伏发电量列表
  1412. fdlList: [], //山西区域实时负荷列表
  1413. homeSuspensionWindowsData: [], //全国区域所有地区数据
  1414. historyWpId: "", //历史场站id
  1415. mapList: [
  1416. { text: "山西", code: "sxqyxx" },
  1417. { text: "内蒙", code: "nmqyxx" },
  1418. { text: "新疆", code: "xjqyxx" },
  1419. { text: "河北", code: "hbqyxx" },
  1420. { text: "陕西", code: "xsqyxx" },
  1421. { text: "山东", code: "sdqyxx" },
  1422. { text: "西藏", code: "xzqyxx" },
  1423. ],
  1424. penetrateType: 0, //24小时功率曲线开关
  1425. powerDataHome: {},
  1426. qyPower: {},
  1427. ratio: 1,
  1428. showType: "all",
  1429. stationList: [
  1430. {
  1431. name: "全部",
  1432. wpId: "KGDL_FGS",
  1433. },
  1434. {
  1435. name: "清洁能源",
  1436. wpId: "SXJ_RGN",
  1437. },
  1438. ],
  1439. switchShow: false, //接入情况弹窗
  1440. showName: "",
  1441. StationinformationData: [],
  1442. showkey: "",
  1443. dialogGroupRealname: false, //全国实时负荷弹窗开关
  1444. groupList: [], //全国实时负荷弹窗数据
  1445. type: "fc", //发电量展示类型
  1446. tabShow: 0,
  1447. timmer: null, // 计时器
  1448. timmer2: null,
  1449. units: ["万kWh"],
  1450. unit: "", //实时负荷弹窗单位
  1451. wpId: "KGDL_FGS",
  1452. wpIds: "KGDL_FGS0",
  1453. };
  1454. },
  1455. emits: {
  1456. onEnter: null,
  1457. onBack: null,
  1458. },
  1459. // 函数
  1460. methods: {
  1461. // 点击地图展示类型
  1462. mapClick(wpId, activeTab) {
  1463. clearInterval(this.timmer);
  1464. clearInterval(this.timmer2);
  1465. this.timmer = null;
  1466. this.timmer2 = null;
  1467. this.activeTab = activeTab;
  1468. this.wpId = wpId;
  1469. this.wpIds =
  1470. wpId.includes("FDC") || wpId.includes("GDC") ? wpId : wpId + activeTab;
  1471. this.requestData();
  1472. this.findProjectPlan();
  1473. this.timmer = setInterval(() => {
  1474. this.requestData();
  1475. }, 5000);
  1476. this.timmer2 = setInterval(() => {
  1477. this.findProjectPlan(); //发电量
  1478. if (this.penetrateType == 3) {
  1479. this.getData(this.wpIds); //24小时功率曲线
  1480. }
  1481. }, 15 * 60 * 1000);
  1482. },
  1483. mapClicks(wpId, activeTab) {
  1484. this.historyWpId = wpId;
  1485. this.mapClick(wpId, activeTab);
  1486. },
  1487. mapClickBack(wpId, activeTab) {
  1488. this.historyWpId = wpId;
  1489. this.activeTab = activeTab;
  1490. this.mapClick(this.historyWpId, activeTab);
  1491. },
  1492. currentActiveTab(penetrateType) {
  1493. this.penetrateType = penetrateType;
  1494. if (penetrateType === 3) {
  1495. this.getData(this.wpIds);
  1496. }
  1497. },
  1498. // 请求服务
  1499. requestData() {
  1500. FindBasicDataInfo({ wpId: this.wpIds }).then(({ data }) => {
  1501. this.StationinformationData = data;
  1502. if (Object.keys(data).length) {
  1503. let mapInfos = [];
  1504. this.mapList.forEach((item) => {
  1505. for (var key in data.sytc) {
  1506. if (item.code == key) {
  1507. data.sytc[key].name = item.text;
  1508. mapInfos.push({ ...data.sytc[key] });
  1509. }
  1510. }
  1511. });
  1512. mapInfos.forEach((element) => {
  1513. element.industryState = true;
  1514. element.companyState = true;
  1515. if (element.name == "山西") {
  1516. if (!Object.hasOwn(element, "sxgszzjrl")) {
  1517. element.companyState = false;
  1518. }
  1519. if (!Object.hasOwn(element, "sxcyzzjrl")) {
  1520. element.industryState = false;
  1521. }
  1522. this.homeSuspensionWindowsData.sxqyxx = { ...element };
  1523. } else if (element.name == "新疆") {
  1524. if (!Object.hasOwn(element, "xjgszzjrl")) {
  1525. element.companyState = false;
  1526. }
  1527. if (!Object.hasOwn(element, "xjcyzzjrl")) {
  1528. element.industryState = false;
  1529. }
  1530. this.homeSuspensionWindowsData.xjqyxx = { ...element };
  1531. } else if (element.name == "内蒙") {
  1532. if (!Object.hasOwn(element, "nmgszzjrl")) {
  1533. element.companyState = false;
  1534. }
  1535. if (!Object.hasOwn(element, "nmcyzzjrl")) {
  1536. element.industryState = false;
  1537. }
  1538. this.homeSuspensionWindowsData.nmqyxx = { ...element };
  1539. } else if (element.name == "西藏") {
  1540. if (!Object.hasOwn(element, "xzgszzjrl")) {
  1541. element.companyState = false;
  1542. }
  1543. if (!Object.hasOwn(element, "xzcyzzjrl")) {
  1544. element.industryState = false;
  1545. }
  1546. this.homeSuspensionWindowsData.xzqyxx = { ...element };
  1547. } else if (element.name == "山东") {
  1548. if (!Object.hasOwn(element, "sdgszzjrl")) {
  1549. element.companyState = false;
  1550. }
  1551. if (!Object.hasOwn(element, "sdcyzzjrl")) {
  1552. element.industryState = false;
  1553. }
  1554. this.homeSuspensionWindowsData.sdqyxx = { ...element };
  1555. } else if (element.name == "陕西") {
  1556. if (!Object.hasOwn(element, "xsgszzjrl")) {
  1557. element.companyState = false;
  1558. }
  1559. if (!Object.hasOwn(element, "xscyzzjrl")) {
  1560. element.industryState = false;
  1561. }
  1562. this.homeSuspensionWindowsData.xsqyxx = { ...element };
  1563. } else if (element.name == "河北") {
  1564. if (!Object.hasOwn(element, "hbgszzjrl")) {
  1565. element.companyState = false;
  1566. }
  1567. if (!Object.hasOwn(element, "hbcyzzjrl")) {
  1568. element.industryState = false;
  1569. }
  1570. this.homeSuspensionWindowsData.hbqyxx = { ...element };
  1571. }
  1572. });
  1573. this.powerDataHome = [
  1574. {
  1575. title: "清洁能源",
  1576. value: (data?.qt?.sjgl / 1000).toFixed(2),
  1577. dialogTitle: "清洁能源",
  1578. max: 3000,
  1579. },
  1580. {
  1581. title: "风电",
  1582. value: (data?.qt?.fdsjgl / 1000).toFixed(2),
  1583. dialogTitle: "风电功率详情",
  1584. max: 3000,
  1585. },
  1586. {
  1587. title: "光伏",
  1588. value: (data?.qt?.gfsjgl / 1000).toFixed(2),
  1589. dialogTitle: "光伏功率详情",
  1590. max: 3000,
  1591. },
  1592. ];
  1593. let sbztmap = {
  1594. fd: {},
  1595. gf: {},
  1596. };
  1597. for (var key in data.mxztmap) {
  1598. let a = key.substring(3, key.length);
  1599. if (key.includes("gf_")) {
  1600. sbztmap.gf[a] = data.mxztmap[key];
  1601. } else if (key.includes("fd_")) {
  1602. sbztmap.fd[a] = data.mxztmap[key];
  1603. }
  1604. }
  1605. this.StationinformationData.sbztmap = sbztmap;
  1606. }
  1607. });
  1608. },
  1609. // 发电量
  1610. findProjectPlan() {
  1611. FindProjectplan({ wpId: this.wpIds }).then(({ data }) => {
  1612. this.qyPower = data.proplanmap;
  1613. this.ForecastPowerNewHome_fc = [
  1614. [
  1615. {
  1616. name: "日发电量",
  1617. id: "day",
  1618. value: data?.proplanmap
  1619. ? data?.proplanmap?.fd_r_sjdl < 0
  1620. ? 0
  1621. : (data?.proplanmap?.fd_r_sjdl / 10000).toFixed(2)
  1622. : 0,
  1623. color: 1,
  1624. total: data?.proplanmap
  1625. ? data?.proplanmap?.fd_r_jhdl < 0
  1626. ? 0
  1627. : data?.proplanmap?.fd_r_jhdl
  1628. : 0,
  1629. },
  1630. ],
  1631. [
  1632. {
  1633. name: "月发电量",
  1634. id: "month",
  1635. value: data?.proplanmap
  1636. ? data?.proplanmap?.fd_y_sjdl < 0
  1637. ? 0
  1638. : (data?.proplanmap?.fd_y_sjdl / 10000).toFixed(2)
  1639. : 0,
  1640. color: 1,
  1641. total: data?.proplanmap
  1642. ? data?.proplanmap?.fd_y_jhdl < 0
  1643. ? 0
  1644. : data?.proplanmap?.fd_y_jhdl
  1645. : 0,
  1646. },
  1647. ],
  1648. [
  1649. {
  1650. name: "年发电量",
  1651. id: "year",
  1652. value: data?.proplanmap
  1653. ? data?.proplanmap?.fd_n_sjdl < 0
  1654. ? 0
  1655. : (data?.proplanmap?.fd_n_sjdl / 10000).toFixed(2)
  1656. : 0,
  1657. color: 0,
  1658. total: data?.proplanmap
  1659. ? data?.proplanmap?.fd_n_jhdl < 0
  1660. ? 0
  1661. : data?.proplanmap?.fd_n_jhdl
  1662. : 0,
  1663. },
  1664. ],
  1665. ];
  1666. this.ForecastPowerNewHome_gf = [
  1667. [
  1668. {
  1669. name: "日发电量",
  1670. id: "day",
  1671. value: data?.proplanmap
  1672. ? data?.proplanmap?.gf_r_sjdl < 0
  1673. ? 0
  1674. : (data?.proplanmap?.gf_r_sjdl / 10000).toFixed(2)
  1675. : 0,
  1676. color: 1,
  1677. total: data?.proplanmap
  1678. ? data?.proplanmap?.gf_r_jhdl < 0
  1679. ? 0
  1680. : data?.proplanmap?.gf_r_jhdl
  1681. : 0,
  1682. },
  1683. ],
  1684. [
  1685. {
  1686. name: "月发电量",
  1687. id: "month",
  1688. value: data?.proplanmap
  1689. ? data?.proplanmap?.gf_y_sjdl < 0
  1690. ? 0
  1691. : (data?.proplanmap?.gf_y_sjdl / 10000).toFixed(2)
  1692. : 0,
  1693. color: 1,
  1694. total: data?.proplanmap
  1695. ? data?.proplanmap?.gf_y_jhdl < 0
  1696. ? 0
  1697. : data?.proplanmap?.gf_y_jhdl
  1698. : 0,
  1699. },
  1700. ],
  1701. [
  1702. {
  1703. name: "年发电量",
  1704. id: "year",
  1705. value: data?.proplanmap
  1706. ? data?.proplanmap?.gf_n_sjdl < 0
  1707. ? 0
  1708. : (data?.proplanmap?.gf_n_sjdl / 10000).toFixed(2)
  1709. : 0,
  1710. color: 0,
  1711. total: data?.proplanmap
  1712. ? data?.proplanmap?.gf_n_jhdl < 0
  1713. ? 0
  1714. : data?.proplanmap?.gf_n_jhdl
  1715. : 0,
  1716. },
  1717. ],
  1718. ];
  1719. });
  1720. },
  1721. // 获取场站24小时功率图
  1722. getData(wpId) {
  1723. FindPowerInfo({ id: wpId }).then((res) => {
  1724. if (res.data) {
  1725. let Powertrend = {
  1726. // 图表所用单位
  1727. units: ["(万KWh)", "(风速)"],
  1728. value: [
  1729. {
  1730. title: "保证功率",
  1731. smooth: true, // 使用单位
  1732. value: [],
  1733. },
  1734. {
  1735. title: "理论功率",
  1736. smooth: true, // 使用单位
  1737. value: [],
  1738. },
  1739. {
  1740. title: "实际功率",
  1741. smooth: true, // 使用单位
  1742. value: [],
  1743. },
  1744. ],
  1745. };
  1746. Powertrend.value[0].value = res.data.map((item) => {
  1747. return {
  1748. dateTime: dayjs()
  1749. .startOf("date")
  1750. .add(item.hours, "hour")
  1751. .format("YYYY-MM-DD HH:mm:ss"),
  1752. value: item.bzgl,
  1753. };
  1754. });
  1755. Powertrend.value[1].value = res.data.map((item) => {
  1756. return {
  1757. dateTime: dayjs()
  1758. .startOf("date")
  1759. .add(item.hours, "hour")
  1760. .format("YYYY-MM-DD HH:mm:ss"),
  1761. value: item.llgl,
  1762. };
  1763. });
  1764. Powertrend.value[2].value = res.data.map((item) => {
  1765. return {
  1766. dateTime: dayjs()
  1767. .startOf("date")
  1768. .add(item.hours, "hour")
  1769. .format("YYYY-MM-DD HH:mm:ss"),
  1770. value: item.sjgl,
  1771. };
  1772. });
  1773. this.CurveValues = Powertrend.value;
  1774. }
  1775. });
  1776. },
  1777. firstRender(activeTab, showType, wpId, name) {
  1778. this.activeTab = activeTab;
  1779. this.tabShow = activeTab;
  1780. this.showType = showType;
  1781. //当wpId是FDC/GDC时,此时点击全部、风电、光伏按钮,展示山西地图及对应的公司信息
  1782. let fcId = wpId;
  1783. if ((wpId.includes("FDC") || wpId.includes("GDC")) && this.flag) {
  1784. if (name != "清洁能源") {
  1785. fcId = this.historyWpId;
  1786. } else {
  1787. fcId = "SXJ_RGN";
  1788. }
  1789. this.flag = true;
  1790. this.penetrateType = 3;
  1791. this.currents = 1;
  1792. }
  1793. this.companyid = fcId;
  1794. this.companyname = name;
  1795. this.currentTitle = name || "全国";
  1796. this.mapClicks(fcId, activeTab);
  1797. this.currentActiveTab(this.penetrateType);
  1798. },
  1799. backMap(wpId, planBtnName) {
  1800. this.penetrateType = this.currents == 0 ? 0 : 3;
  1801. this.currents--;
  1802. this.currentTitle =
  1803. this.currents == 0
  1804. ? "全国"
  1805. : this.companyname
  1806. ? this.companyname
  1807. : planBtnName;
  1808. let wpIds =
  1809. this.currents == 0
  1810. ? "KGDL_FGS"
  1811. : this.companyname
  1812. ? this.companyid
  1813. : wpId;
  1814. this.tabShow = this.activeTab;
  1815. this.mapClickBack(wpIds, this.activeTab);
  1816. this.currentActiveTab(this.penetrateType);
  1817. },
  1818. clickLabel(wpId, planBtnName, penetrateType) {
  1819. this.penetrateType = penetrateType;
  1820. this.currents++;
  1821. if (this.currents > 1) {
  1822. this.currents = 2;
  1823. }
  1824. this.wpId =
  1825. wpId.includes("FDC") || wpId.includes("GDC")
  1826. ? wpId
  1827. : this.companyname
  1828. ? this.companyid
  1829. : wpId;
  1830. this.currentTitle =
  1831. wpId.includes("FDC") || wpId.includes("GDC")
  1832. ? planBtnName
  1833. : this.companyname
  1834. ? this.companyname
  1835. : planBtnName;
  1836. this.mapClick(this.wpId, this.activeTab);
  1837. if (wpId.includes("FDC") || wpId.includes("GDC")) {
  1838. this.tabShow = wpId.includes("FDC")
  1839. ? -1
  1840. : wpId.includes("GDC")
  1841. ? -2
  1842. : 0;
  1843. } else {
  1844. this.tabShow = this.activeTab;
  1845. }
  1846. this.flag = wpId.includes("FDC") || wpId.includes("GDC") ? true : false;
  1847. this.currentActiveTab(penetrateType);
  1848. },
  1849. // 全国实时负荷点击弹窗
  1850. showPowerChart({ dialogTitle, data }) {
  1851. this.dialogGroupRealname = true;
  1852. this.showName = dialogTitle;
  1853. this.groupList = data;
  1854. },
  1855. // 区域实时负荷点击弹窗
  1856. handleClick(uniformCode, title, unit) {
  1857. let key = "";
  1858. switch (uniformCode) {
  1859. case "SSPJFS":
  1860. key = "ssfs";
  1861. break;
  1862. case "SSZLLGL":
  1863. key = "llgl";
  1864. break;
  1865. case "SSZGL":
  1866. key = "sjgl";
  1867. break;
  1868. case "FNLYL":
  1869. key = "fnlyl";
  1870. break;
  1871. case "RPJGZD":
  1872. key = "gzzs";
  1873. break;
  1874. }
  1875. FindRealtimeInfo({
  1876. uniformCode,
  1877. wpId:
  1878. this.wpId +
  1879. (this.wpId.includes("FDC") || this.wpId.includes("GDC")
  1880. ? ""
  1881. : this.activeTab),
  1882. }).then(({ data }) => {
  1883. this.dialogVisible = true;
  1884. this.chartsData = data.map((item) => {
  1885. return {
  1886. dateTime: dayjs()
  1887. .startOf("date")
  1888. .add(item.hours, "hour")
  1889. .format("MM-DD HH:mm"),
  1890. value: item[key],
  1891. };
  1892. });
  1893. this.unit = unit;
  1894. this.showName = title;
  1895. });
  1896. },
  1897. handleUsingDetail(timetype, key, title) {
  1898. let format = timetype == "month" ? "YYYY-MM" : "YYYY";
  1899. this.showkey = "using";
  1900. this.electronType = timetype;
  1901. FindUtilizationhours({
  1902. wpId:
  1903. this.wpId +
  1904. (this.wpId.includes("FDC") || this.wpId.includes("GDC")
  1905. ? ""
  1906. : this.activeTab),
  1907. timetype,
  1908. }).then(({ data }) => {
  1909. this.dialogElectric = true;
  1910. let barList = data.map((item) => {
  1911. if (timetype == "month") {
  1912. return {
  1913. dateTime: dayjs()
  1914. .startOf("year")
  1915. .add(item.hours - 1, "month")
  1916. .format("YYYY-MM"),
  1917. value: item[key],
  1918. };
  1919. } else {
  1920. return {
  1921. dateTime: dayjs()
  1922. .startOf(timetype)
  1923. .subtract(item.hours, timetype)
  1924. .format(format),
  1925. value: item[key],
  1926. };
  1927. }
  1928. });
  1929. if (timetype == "month") {
  1930. this.barList = [
  1931. {
  1932. name: title,
  1933. yAxisIndex: 0,
  1934. value: barList,
  1935. },
  1936. ];
  1937. } else {
  1938. this.barList = [
  1939. {
  1940. name: title,
  1941. yAxisIndex: 0,
  1942. value: barList.reverse(),
  1943. },
  1944. ];
  1945. }
  1946. this.barList = [
  1947. {
  1948. name: title,
  1949. yAxisIndex: 0,
  1950. value: barList,
  1951. },
  1952. ];
  1953. this.showName = title;
  1954. });
  1955. },
  1956. handleElectricDetail(timetype, title, type) {
  1957. let wpId = "";
  1958. if (type) {
  1959. this.type = type;
  1960. type == "fc" ? (wpId = this.wpId + "-1") : (wpId = this.wpId + "-2");
  1961. } else {
  1962. wpId =
  1963. this.wpId +
  1964. (this.wpId.includes("FDC") || this.wpId.includes("GDC")
  1965. ? ""
  1966. : this.activeTab);
  1967. }
  1968. this.dialogElectric = true;
  1969. let format =
  1970. timetype == "day" ? "MM-DD" : timetype == "month" ? "YYYY-MM" : "YYYY";
  1971. this.showkey = "electric";
  1972. this.electronType = timetype;
  1973. FindPlanproject({
  1974. wpId,
  1975. timetype,
  1976. }).then(({ data }) => {
  1977. this.dialogElectric = true;
  1978. let sjdlList = data.map((item) => {
  1979. if (timetype == "month") {
  1980. return {
  1981. dateTime: dayjs()
  1982. .startOf("year")
  1983. .add(item.hours - 1, "month")
  1984. .format("YYYY-MM"),
  1985. value: item.sjdl.toFixed(2),
  1986. };
  1987. } else if (timetype == "year") {
  1988. return {
  1989. dateTime: dayjs()
  1990. .startOf(timetype)
  1991. .subtract(item.hours, timetype)
  1992. .format(format),
  1993. value: item.sjdl.toFixed(2),
  1994. };
  1995. } else {
  1996. return {
  1997. dateTime: dayjs()
  1998. .startOf("month")
  1999. .add(item.hours - 1, "day")
  2000. .format("MM-DD"),
  2001. value: item.sjdl.toFixed(2),
  2002. };
  2003. }
  2004. });
  2005. let jhdlList = data.map((item) => {
  2006. if (timetype == "month") {
  2007. return {
  2008. dateTime: dayjs()
  2009. .startOf("year")
  2010. .add(item.hours - 1, "month")
  2011. .format("YYYY-MM"),
  2012. value: item.jhdl.toFixed(2),
  2013. };
  2014. } else if (timetype == "year") {
  2015. return {
  2016. dateTime: dayjs()
  2017. .startOf(timetype)
  2018. .subtract(item.hours, timetype)
  2019. .format(format),
  2020. value: item.jhdl.toFixed(2),
  2021. };
  2022. } else {
  2023. return {
  2024. dateTime: dayjs()
  2025. .startOf("month")
  2026. .add(item.hours - 1, "day")
  2027. .format("MM-DD"),
  2028. value: item.jhdl.toFixed(2),
  2029. };
  2030. }
  2031. });
  2032. this.barList = [
  2033. {
  2034. name: "实际电量",
  2035. value:
  2036. timetype == "day" || timetype == "month"
  2037. ? sjdlList
  2038. : sjdlList.reverse(),
  2039. },
  2040. {
  2041. name: "计划电量",
  2042. value:
  2043. timetype == "day" || timetype == "month"
  2044. ? jhdlList
  2045. : jhdlList.reverse(),
  2046. },
  2047. ];
  2048. this.showName = title;
  2049. });
  2050. },
  2051. },
  2052. unmounted() {
  2053. clearInterval(this.timmer);
  2054. clearInterval(this.timmer2);
  2055. this.timmer = null;
  2056. this.timmer2 = null;
  2057. },
  2058. watch: {
  2059. qyPower(val) {
  2060. if (Object.keys(val).length) {
  2061. let data = val;
  2062. this.fdlList = [
  2063. {
  2064. title: "日发电量",
  2065. id: "day",
  2066. value:
  2067. this.tabShow == 0
  2068. ? data.qy_r_sjdl
  2069. : this.tabShow == -1
  2070. ? data.fd_r_sjdl
  2071. : data.gf_r_sjdl,
  2072. value1:
  2073. this.tabShow == 0
  2074. ? data.qy_r_jhdl
  2075. : this.tabShow == -1
  2076. ? data.fd_r_jhdl
  2077. : data.gf_r_jhdl,
  2078. },
  2079. {
  2080. title: "月发电量",
  2081. id: "month",
  2082. value:
  2083. this.tabShow == 0
  2084. ? data.qy_y_sjdl
  2085. : this.tabShow == -1
  2086. ? data.fd_y_sjdl
  2087. : data.gf_y_sjdl,
  2088. value1:
  2089. this.tabShow == 0
  2090. ? data.qy_y_jhdl
  2091. : this.tabShow == -1
  2092. ? data.fd_y_jhdl
  2093. : data.gf_y_jhdl,
  2094. },
  2095. {
  2096. title: "年发电量",
  2097. id: "year",
  2098. value:
  2099. this.tabShow == 0
  2100. ? data.qy_n_sjdl
  2101. : this.tabShow == -1
  2102. ? data.fd_n_sjdl
  2103. : data.gf_n_sjdl,
  2104. value1:
  2105. this.tabShow == 0
  2106. ? data.qy_n_jhdl
  2107. : this.tabShow == -1
  2108. ? data.fd_n_jhdl
  2109. : data.gf_n_jhdl,
  2110. },
  2111. ];
  2112. }
  2113. },
  2114. },
  2115. computed: {
  2116. // 实时风速
  2117. windSpeedRota() {
  2118. let count = this.StationinformationData?.qt?.ssfs / 25;
  2119. let result = Number((310 * count + 50).toFixed(0));
  2120. if (result) {
  2121. if (result > 310) {
  2122. return "rotateZ(310deg)";
  2123. } else {
  2124. return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
  2125. }
  2126. } else {
  2127. return "rotateZ(50deg)";
  2128. }
  2129. },
  2130. // 理论功率
  2131. ideaPowerRota() {
  2132. let zctj =
  2133. this.wpId.includes("FDC") || this.wpId.includes("GDC")
  2134. ? (
  2135. this.StationinformationData?.station[this.wpId]?.zjrl / 1000
  2136. ).toFixed(2)
  2137. : this.StationinformationData?.qt?.zzjrl;
  2138. let count = this.StationinformationData?.qt?.llgl / 1000 / zctj;
  2139. let result = Number((310 * count + 50).toFixed(0));
  2140. if (result) {
  2141. if (result > 310) {
  2142. return "rotateZ(310deg)";
  2143. } else {
  2144. return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
  2145. }
  2146. } else {
  2147. return "rotateZ(50deg)";
  2148. }
  2149. },
  2150. // 光照指数
  2151. illuminationRota() {
  2152. let count = this.StationinformationData?.qt?.gzzs / 1200;
  2153. let result = Number((310 * count + 50).toFixed(0));
  2154. if (result) {
  2155. if (result > 310) {
  2156. return "rotateZ(310deg)";
  2157. } else {
  2158. return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
  2159. }
  2160. } else {
  2161. return "rotateZ(50deg)";
  2162. }
  2163. },
  2164. //总保证功率
  2165. guarantee() {
  2166. let count = Number(this.StationinformationData?.qt?.fnlyl) / 100;
  2167. let result = Number((310 * count + 50).toFixed(0));
  2168. if (result) {
  2169. if (result > 310) {
  2170. return "rotateZ(310deg)";
  2171. } else {
  2172. return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
  2173. }
  2174. } else {
  2175. return "rotateZ(50deg)";
  2176. }
  2177. },
  2178. // 实际功率
  2179. actualPowerRota() {
  2180. let zctj =
  2181. this.wpId.includes("FDC") || this.wpId.includes("GDC")
  2182. ? (
  2183. this.StationinformationData?.station[this.wpId]?.zjrl / 1000
  2184. ).toFixed(2)
  2185. : this.StationinformationData?.qt?.zzjrl;
  2186. let count = this.StationinformationData?.qt?.sjgl / 1000 / zctj;
  2187. let result = Number((310 * count + 50).toFixed(0));
  2188. if (result) {
  2189. if (result > 310) {
  2190. return "rotateZ(310deg)";
  2191. } else {
  2192. return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
  2193. }
  2194. } else {
  2195. return "rotateZ(50deg)";
  2196. }
  2197. },
  2198. },
  2199. };
  2200. </script>
  2201. <style lang="less">
  2202. ul,
  2203. ul li,
  2204. p {
  2205. margin: 0;
  2206. padding: 0;
  2207. list-style: none;
  2208. }
  2209. .map {
  2210. padding-top: 16px;
  2211. .heeaderNav {
  2212. margin-top: 0;
  2213. }
  2214. }
  2215. .airForceStation {
  2216. position: relative;
  2217. background-color: rgba(3, 5, 9, 0.5);
  2218. padding: 20px;
  2219. // width: 320px;
  2220. margin-bottom: 15px;
  2221. span {
  2222. color: #b1b1b1;
  2223. }
  2224. .title {
  2225. font-size: 18px;
  2226. line-height: 28px;
  2227. margin: 15px 0;
  2228. display: flex;
  2229. align-items: center;
  2230. justify-content: left;
  2231. span {
  2232. color: #fff;
  2233. }
  2234. }
  2235. .collectInstall {
  2236. display: flex;
  2237. margin-bottom: 10px;
  2238. }
  2239. .listItem {
  2240. display: flex;
  2241. margin-bottom: 10px;
  2242. }
  2243. .line {
  2244. display: flex;
  2245. margin-bottom: 10px;
  2246. }
  2247. .name {
  2248. flex: 4;
  2249. }
  2250. .num {
  2251. flex: 3;
  2252. color: #fff;
  2253. font-weight: bold;
  2254. font-size: 19px;
  2255. // text-align: center;
  2256. }
  2257. .unit {
  2258. flex: 1;
  2259. font-size: 14px;
  2260. font-weight: 400;
  2261. color: #999999;
  2262. }
  2263. }
  2264. .piggy-bank {
  2265. width: 100% !important;
  2266. border: 0 !important;
  2267. }
  2268. .float-left {
  2269. float: left;
  2270. }
  2271. .float-right {
  2272. float: right;
  2273. }
  2274. .map {
  2275. position: relative;
  2276. width: 100%;
  2277. height: 100%;
  2278. .light {
  2279. position: fixed;
  2280. z-index: -1;
  2281. width: 100vw;
  2282. height: 100vh;
  2283. top: 0;
  2284. left: 0;
  2285. }
  2286. .back {
  2287. position: fixed;
  2288. z-index: -1;
  2289. width: 100vw;
  2290. height: 100vh;
  2291. top: 0;
  2292. left: 0;
  2293. background: url(../../../assets/background-home.png) no-repeat;
  2294. background-size: 100% 100%;
  2295. }
  2296. .leftBox {
  2297. margin-top: 20px;
  2298. margin-left: 20px;
  2299. .model-bg {
  2300. width: 100%;
  2301. min-height: 135px;
  2302. // background-color: rgba(3, 5, 9, 0.5);
  2303. border-radius: 6px;
  2304. display: flex;
  2305. flex-direction: column;
  2306. padding: 1% 5%;
  2307. .titles {
  2308. height: 45px;
  2309. border-bottom: 1px solid #333333;
  2310. display: flex;
  2311. flex-direction: row;
  2312. align-items: center;
  2313. justify-content: space-between;
  2314. .name {
  2315. font-size: 16px;
  2316. color: #ffffff;
  2317. }
  2318. .unit {
  2319. font-size: 12px;
  2320. color: #b1b1b1;
  2321. }
  2322. }
  2323. .save {
  2324. display: flex;
  2325. flex-direction: row;
  2326. align-items: center;
  2327. width: 100%;
  2328. margin: 17px 0;
  2329. .save-item {
  2330. width: 25%;
  2331. display: flex;
  2332. flex-direction: column;
  2333. align-items: center;
  2334. .kind {
  2335. width: 20px;
  2336. height: 22px;
  2337. .kind-img {
  2338. width: 100%;
  2339. height: 100%;
  2340. }
  2341. }
  2342. .save-value {
  2343. font-size: 16px;
  2344. color: #ffffff;
  2345. margin: 10px 0;
  2346. }
  2347. .save-name {
  2348. font-size: 12px;
  2349. color: #b3b3b3;
  2350. }
  2351. }
  2352. }
  2353. }
  2354. .new-home {
  2355. .energy-system-box {
  2356. position: absolute;
  2357. left: 20px;
  2358. width: 400px;
  2359. box-sizing: border-box;
  2360. background-color: rgba(3, 5, 9, 0.5);
  2361. &.box1 {
  2362. top: 270px;
  2363. }
  2364. &.box2 {
  2365. // top: 500px;
  2366. top: 450px;
  2367. }
  2368. &.box3 {
  2369. // top: 730px;
  2370. top: 690px;
  2371. }
  2372. .energy-system-content {
  2373. padding: 5px 5px 15px 5px;
  2374. .title-all {
  2375. margin-left: 5px;
  2376. margin-bottom: 8px;
  2377. }
  2378. .title-all-content {
  2379. color: #05bb4c;
  2380. font-weight: bold;
  2381. font-size: 19px;
  2382. }
  2383. .title-all-title {
  2384. font-size: 13px;
  2385. }
  2386. .title-all-unit {
  2387. font-size: 12px;
  2388. color: #b1b1b1;
  2389. margin-left: 5px;
  2390. }
  2391. .title {
  2392. color: #fff;
  2393. font-size: 18px;
  2394. line-height: 28px;
  2395. margin: 10px 0.5vh;
  2396. text-align: right;
  2397. .title-name {
  2398. float: left;
  2399. }
  2400. }
  2401. .right-content,
  2402. .left-content {
  2403. width: 50%;
  2404. .img-num {
  2405. display: flex;
  2406. justify-content: left;
  2407. align-items: center;
  2408. padding-left: 10px;
  2409. .img {
  2410. margin-right: 10px;
  2411. }
  2412. .num {
  2413. span {
  2414. font-size: 14px;
  2415. font-weight: 400;
  2416. color: #999999;
  2417. }
  2418. span:nth-child(3) {
  2419. font-size: 19px;
  2420. font-weight: bold;
  2421. color: #05bb4c;
  2422. line-height: 27px;
  2423. }
  2424. span:nth-child(4) {
  2425. margin-left: 15px;
  2426. }
  2427. }
  2428. }
  2429. .capacity {
  2430. .item {
  2431. margin-top: 9px;
  2432. .el-row {
  2433. .el-col:nth-child(1) {
  2434. text-align: left;
  2435. font-size: 14px;
  2436. font-weight: 400;
  2437. color: #999999;
  2438. }
  2439. .el-col:nth-child(2) {
  2440. font-size: 16px;
  2441. font-weight: bold;
  2442. color: #ffffff;
  2443. }
  2444. .el-col:nth-child(3) {
  2445. font-size: 14px;
  2446. font-weight: 400;
  2447. color: #999999;
  2448. }
  2449. }
  2450. }
  2451. }
  2452. }
  2453. .left-content {
  2454. }
  2455. .right-content {
  2456. border-left: 1px dashed #4e4040;
  2457. padding-left: 10px;
  2458. }
  2459. }
  2460. }
  2461. .security-day {
  2462. .lineBox {
  2463. display: flex;
  2464. & > div {
  2465. margin-right: 20px;
  2466. }
  2467. margin: 12px 0 15px;
  2468. .num {
  2469. color: @green;
  2470. font-size: 16px;
  2471. margin-bottom: 15px;
  2472. margin: 0 7px;
  2473. }
  2474. .unit {
  2475. font-size: 12px;
  2476. color: #5e6269;
  2477. }
  2478. }
  2479. .text {
  2480. font-size: 20px;
  2481. color: @write;
  2482. }
  2483. .num {
  2484. color: @green;
  2485. font-size: 35px;
  2486. .unit {
  2487. font-size: 24px;
  2488. position: relative;
  2489. margin-left: 0.556vh;
  2490. top: -0.185vh;
  2491. }
  2492. .unit-t {
  2493. font-size: 12px;
  2494. margin-left: 10px;
  2495. }
  2496. }
  2497. .text1 {
  2498. font-size: 14px;
  2499. color: @write;
  2500. }
  2501. .num1 {
  2502. color: @green;
  2503. font-size: 24px;
  2504. margin-bottom: 15px;
  2505. .unit {
  2506. font-size: 12px;
  2507. position: relative;
  2508. margin-left: 0.556vh;
  2509. color: #5e6269;
  2510. }
  2511. }
  2512. }
  2513. }
  2514. //亮
  2515. .new-home-light {
  2516. margin-top: -50px;
  2517. margin-left: 20px;
  2518. .airForceStation {
  2519. position: relative;
  2520. background-color: #d1d6d9;
  2521. padding: 20px;
  2522. width: 320px;
  2523. margin-bottom: 15px;
  2524. span {
  2525. color: #000;
  2526. }
  2527. .title {
  2528. font-size: 18px;
  2529. line-height: 28px;
  2530. margin: 15px 0;
  2531. display: flex;
  2532. align-items: center;
  2533. justify-content: left;
  2534. span {
  2535. color: #000;
  2536. }
  2537. }
  2538. .collectInstall {
  2539. display: flex;
  2540. margin-bottom: 10px;
  2541. }
  2542. .listItem {
  2543. display: flex;
  2544. margin-bottom: 10px;
  2545. }
  2546. .line {
  2547. display: flex;
  2548. margin-bottom: 10px;
  2549. }
  2550. .name {
  2551. flex: 4;
  2552. }
  2553. .num {
  2554. flex: 3;
  2555. color: #000;
  2556. font-weight: bold;
  2557. font-size: 19px;
  2558. // text-align: center;
  2559. }
  2560. .unit {
  2561. flex: 1;
  2562. font-size: 14px;
  2563. font-weight: 400;
  2564. color: #000;
  2565. }
  2566. }
  2567. .piggy-tab-width {
  2568. width: 350px !important;
  2569. }
  2570. .energy-system-box {
  2571. width: 400px;
  2572. box-sizing: border-box;
  2573. margin-bottom: 21px;
  2574. margin-top: 5px;
  2575. background-color: #d1d6d9;
  2576. .model-bg {
  2577. width: 100%;
  2578. min-height: 135px;
  2579. background-color: #d1d6d9;
  2580. border-radius: 6px;
  2581. display: flex;
  2582. flex-direction: column;
  2583. padding: 1% 5%;
  2584. .titles {
  2585. height: 45px;
  2586. border-bottom: 1px solid #333333;
  2587. display: flex;
  2588. flex-direction: row;
  2589. align-items: center;
  2590. justify-content: space-between;
  2591. .name {
  2592. font-size: 16px;
  2593. color: #000;
  2594. }
  2595. .unit {
  2596. font-size: 12px;
  2597. color: #000;
  2598. }
  2599. }
  2600. .save {
  2601. display: flex;
  2602. flex-direction: row;
  2603. align-items: center;
  2604. width: 100%;
  2605. margin: 17px 0;
  2606. .save-item {
  2607. width: 25%;
  2608. display: flex;
  2609. flex-direction: column;
  2610. align-items: center;
  2611. .kind {
  2612. width: 20px;
  2613. height: 22px;
  2614. .kind-img {
  2615. width: 100%;
  2616. height: 100%;
  2617. }
  2618. }
  2619. .save-value {
  2620. font-size: 16px;
  2621. color: #ffffff;
  2622. margin: 10px 0;
  2623. }
  2624. .save-name {
  2625. font-size: 12px;
  2626. color: #b3b3b3;
  2627. }
  2628. }
  2629. }
  2630. }
  2631. .energy-system-bgc {
  2632. padding: 115px;
  2633. width: 100%;
  2634. opacity: 0.3;
  2635. background-color: rgba(83, 98, 104, 0.2);
  2636. }
  2637. .energy-system-content {
  2638. padding: 5px 5px 15px 5px;
  2639. .title-all {
  2640. margin-left: 5px;
  2641. margin-bottom: 8px;
  2642. }
  2643. .title-all-content {
  2644. color: #05bb4c;
  2645. font-weight: bold;
  2646. font-size: 19px;
  2647. }
  2648. .title-all-title {
  2649. font-size: 13px;
  2650. }
  2651. .title-all-unit {
  2652. font-size: 12px;
  2653. color: #000;
  2654. margin-left: 5px;
  2655. }
  2656. .title {
  2657. color: #000;
  2658. font-size: 16px;
  2659. line-height: 28px;
  2660. margin: 10px 0.5vh;
  2661. text-align: right;
  2662. .title-name {
  2663. float: left;
  2664. }
  2665. }
  2666. .right-content,
  2667. .left-content {
  2668. width: 50%;
  2669. .img-num {
  2670. text-align: center;
  2671. display: flex;
  2672. justify-content: center;
  2673. align-items: center;
  2674. .img {
  2675. margin-right: 10px;
  2676. }
  2677. .num {
  2678. span {
  2679. font-size: 14px;
  2680. font-weight: 400;
  2681. color: #000;
  2682. }
  2683. span:nth-child(3) {
  2684. font-size: 19px;
  2685. font-weight: bold;
  2686. color: #05bb4c;
  2687. line-height: 27px;
  2688. }
  2689. span:nth-child(4) {
  2690. margin-left: 15px;
  2691. }
  2692. }
  2693. }
  2694. .capacity {
  2695. .item {
  2696. margin-top: 9px;
  2697. .el-row {
  2698. .el-col:nth-child(1) {
  2699. text-align: center;
  2700. font-size: 14px;
  2701. font-weight: 400;
  2702. color: #000;
  2703. }
  2704. .el-col:nth-child(2) {
  2705. font-size: 16px;
  2706. font-weight: bold;
  2707. color: #05bb4c;
  2708. }
  2709. .el-col:nth-child(3) {
  2710. font-size: 14px;
  2711. font-weight: 400;
  2712. color: #000;
  2713. }
  2714. }
  2715. }
  2716. }
  2717. }
  2718. .left-content {
  2719. }
  2720. .right-content {
  2721. border-left: 1px dashed #4e4040;
  2722. }
  2723. }
  2724. }
  2725. .security-day {
  2726. .lineBox {
  2727. margin: 12px 0 15px;
  2728. .num {
  2729. color: @green;
  2730. font-size: 16px;
  2731. margin-bottom: 15px;
  2732. margin: 0 7px;
  2733. }
  2734. .unit {
  2735. font-size: 12px;
  2736. color: #5e6269;
  2737. }
  2738. }
  2739. .text {
  2740. font-size: 20px;
  2741. color: @write;
  2742. }
  2743. .num {
  2744. color: @green;
  2745. font-size: 35px;
  2746. .unit {
  2747. font-size: 24px;
  2748. position: relative;
  2749. margin-left: 0.556vh;
  2750. top: -0.185vh;
  2751. }
  2752. .unit-t {
  2753. font-size: 12px;
  2754. margin-left: 10px;
  2755. }
  2756. }
  2757. .text1 {
  2758. font-size: 14px;
  2759. color: @write;
  2760. }
  2761. .num1 {
  2762. color: @green;
  2763. font-size: 24px;
  2764. margin-bottom: 15px;
  2765. .unit {
  2766. font-size: 12px;
  2767. position: relative;
  2768. margin-left: 0.556vh;
  2769. color: #5e6269;
  2770. }
  2771. }
  2772. }
  2773. }
  2774. }
  2775. .security-day {
  2776. .text {
  2777. font-size: 24px;
  2778. color: @write;
  2779. }
  2780. .num {
  2781. color: @green;
  2782. font-size: 50px;
  2783. .unit {
  2784. font-size: 24px;
  2785. position: relative;
  2786. margin-left: 0.556vh;
  2787. top: -0.185vh;
  2788. }
  2789. }
  2790. .text1 {
  2791. font-size: 14px;
  2792. color: @write;
  2793. }
  2794. .num1 {
  2795. color: @green;
  2796. font-size: 24px;
  2797. margin-bottom: 15px;
  2798. .unit {
  2799. font-size: 12px;
  2800. position: relative;
  2801. margin-left: 0.556vh;
  2802. color: #5e6269;
  2803. }
  2804. }
  2805. }
  2806. .name-box {
  2807. margin: 1.852vh;
  2808. display: inline-block;
  2809. z-index: 2;
  2810. position: absolute;
  2811. display: flex;
  2812. flex-direction: column;
  2813. top: 200px;
  2814. left: 445px;
  2815. width: 200px;
  2816. .name-box-title {
  2817. font-size: 2.222vh;
  2818. font-weight: 400;
  2819. color: #ffffff;
  2820. line-height: 1;
  2821. cursor: pointer;
  2822. }
  2823. .name-box-period {
  2824. margin-top: 2.222vh;
  2825. .name-box-period-label,
  2826. .name-box-period-value {
  2827. font-size: 1.481vh;
  2828. font-weight: 400;
  2829. line-height: 1;
  2830. }
  2831. .name-box-period-label {
  2832. color: #fefefe;
  2833. }
  2834. .name-box-period-value {
  2835. color: #05bb4c;
  2836. }
  2837. }
  2838. }
  2839. .return {
  2840. position: absolute;
  2841. display: flex;
  2842. z-index: 2;
  2843. align-items: center;
  2844. top: 150px;
  2845. left: 460px;
  2846. width: 110px;
  2847. font-size: @fontsize-l;
  2848. color: fade(@white, 80);
  2849. cursor: pointer;
  2850. border: 1px solid transparent;
  2851. padding: 6px 16px;
  2852. color: #05bb4c;
  2853. border: 1px solid #05bb4c;
  2854. font-size: 22px;
  2855. .svg-icon {
  2856. margin-right: 0.7407vh;
  2857. svg {
  2858. transform: rotate(90deg);
  2859. use {
  2860. transition: all 0.3s;
  2861. fill: @green;
  2862. }
  2863. }
  2864. }
  2865. transition: all 0.3s;
  2866. &:hover {
  2867. color: @green;
  2868. border: 1px solid @green;
  2869. .svg-icon {
  2870. svg {
  2871. use {
  2872. fill: @green;
  2873. }
  2874. }
  2875. }
  2876. }
  2877. }
  2878. .compass {
  2879. position: absolute;
  2880. right: 16px;
  2881. bottom: 32px;
  2882. border-radius: 50%;
  2883. &::after {
  2884. content: "";
  2885. position: absolute;
  2886. top: 4px;
  2887. left: 4px;
  2888. border-radius: 50%;
  2889. width: 36px;
  2890. height: 36px;
  2891. box-shadow: inset 0px -5px 10px 0px @green;
  2892. }
  2893. svg {
  2894. height: 45px;
  2895. width: 45px;
  2896. }
  2897. }
  2898. .map-img {
  2899. // width: calc(100% - 14.815vh);
  2900. width: 100%;
  2901. // height: calc(100% - 14.815vh);
  2902. height: 100%;
  2903. // margin: 7.407vh 0;
  2904. position: absolute;
  2905. z-index: 1;
  2906. top: 0;
  2907. left: 0;
  2908. @keyframes rotate {
  2909. from {
  2910. transform: rotateX(70deg);
  2911. }
  2912. to {
  2913. transform: rotateX(0deg);
  2914. }
  2915. }
  2916. img {
  2917. width: 100%;
  2918. animation: rotate 3s;
  2919. animation-direction: alternate;
  2920. animation-iteration-count: infinite;
  2921. }
  2922. }
  2923. }
  2924. .island {
  2925. position: absolute;
  2926. right: 20vw;
  2927. bottom: 0px;
  2928. }
  2929. .island_light {
  2930. position: absolute;
  2931. right: 21vw;
  2932. bottom: 4vh;
  2933. }
  2934. .clearfix::after {
  2935. content: "";
  2936. clear: both;
  2937. height: 0;
  2938. line-height: 0;
  2939. visibility: hidden;
  2940. display: block;
  2941. }
  2942. .clearfix {
  2943. zoom: 1;
  2944. }
  2945. </style>