map.vue 95 KB

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