statistics.vue 58 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583
  1. <template>
  2. <view>
  3. <u-picker-select title="日期选择" :maskCloseAble="true" v-model="tabsFrom.show2" :defaultTime="tabsFrom.show2Index" :endYear="endYear"
  4. mode="time" :params="params" @confirm="selector2confirm" @cancel="selector2cancel"
  5. @reset="selector2reset">
  6. </u-picker-select>
  7. <u-select title="" v-model="tabsFrom.show1" :defaultValue="[current2]"
  8. :list="childList" value-name="id" label-name="name"
  9. @confirm="selector1confirm" >
  10. </u-select>
  11. <!-- 导航栏 -->
  12. <view class="navbar">
  13. <view class="title" v-if="companyInfotype==4">
  14. 能源管理
  15. <span style="padding-left: 4px;" >
  16. |
  17. </span>
  18. <span style="padding-left: 4px;" >
  19. {{datacompanyInfo.name}}
  20. </span>
  21. </view>
  22. <view class="title" v-else>
  23. 能源管理
  24. <span style="padding-left: 4px;" v-if="companyList.length>1&&current!=0">
  25. |
  26. </span>
  27. <span style="padding-left: 4px;" v-if="companyList.length>1&&current!=0">
  28. <template v-if="kWhList.length==1">
  29. {{kWhList[0].name}}
  30. </template>
  31. <template v-else>
  32. <!-- {{childList.length==1? : childInfo.name}} -->
  33. {{companyInfo.name}}
  34. </template>
  35. </span>
  36. <span style="padding-left: 4px;" v-if="companyList.length==1">
  37. |
  38. </span>
  39. <span style="padding-left: 4px;" v-if="companyList.length==1">
  40. <template v-if="kWhList.length==1">
  41. {{kWhList[0].name}}
  42. </template>
  43. <template v-else>
  44. {{childList.length==1?companyInfo.name : childInfo.name}}
  45. </template>
  46. </span>
  47. </view>
  48. </view>
  49. <view class="tabs-box tabs-box2" v-if="companyInfotype==4&&readingMeterNum&&monitorMeterNum" >
  50. <view class="tabs2" :class="'tabs-len-2'"
  51. :style="{width: '100%', }">
  52. <u-tabs-one :gutter="32"
  53. :list="companyInfotypeList" :is-scroll="false" active-color="#fff" inactive-color="#CCE2FF"
  54. bg-color="#1677FF" :current="1" @change="companyInfotypeChange"></u-tabs-one>
  55. </view>
  56. </view>
  57. <!-- 标签 -->
  58. <view class="tabs-box" v-else >
  59. <view class="tabs" :class="'tabs-len-'+merchantList1.length" v-show="companyList.length>1"
  60. :style="{width: companyList.length>3 ? '' : '100%'}">
  61. <u-tabs-one v-if="utabsone"
  62. :list="merchantList1" :is-scroll="false" active-color="#fff" inactive-color="#CCE2FF"
  63. bg-color="#1677FF" :current="current" @change="change"></u-tabs-one>
  64. </view>
  65. <view class="more" @click="popShow=true" v-if="companyList.length >= 4">
  66. <u-icon name="arrow-down" color="#fff" size="40"></u-icon>
  67. </view>
  68. </view>
  69. <!-- 标签弹出层 -->
  70. <u-popup v-model="popShow" duration="10" mode="top" :negative-top="88" border-radius="16">
  71. <view class="popup-tabs">
  72. <view class="tabs">
  73. <u-tabs
  74. :list="merchantList1" :is-scroll="false" :current="current" @change="change"></u-tabs>
  75. </view>
  76. <view class="more">
  77. <u-icon name="arrow-up" color="#777777" size="40" @click="popShow=false"></u-icon>
  78. </view>
  79. </view>
  80. <view class="tabs-options">
  81. <view class="item" v-for="(item, index) in merchantList2" :key="index"
  82. @click="merchantChange(item,index)">
  83. {{item.name}}
  84. </view>
  85. </view>
  86. </u-popup>
  87. <view class="main electronicMonitoring-123" v-show="kWhList.length==1" style="padding:32rpx 0;">
  88. <view class="electronicMonitoring-title3"
  89. v-if="companyType==5"
  90. v-show="childList&&childList.length>1" >
  91. <view style="padding:0 32rpx;">
  92. <u-tabs-one height="60" v-if="utabsone&&childList&&childList.length"
  93. :currentIndexBl="true" bg-color="#f2f4f6" key="B" :showBar="false"
  94. :list="childList" :is-scroll="false" :current="current2" @change="change2"></u-tabs-one>
  95. </view>
  96. </view>
  97. <view class="electronicMonitoring-title"
  98. @click="titleCk"
  99. v-else-if="childList&&childList.length>0" >
  100. <view>
  101. {{childListName}}
  102. </view>
  103. <view v-show="childList.length>1">
  104. <u-icon name="arrow-down"></u-icon>
  105. </view>
  106. </view>
  107. <electronicMonitoring v-show="kWhList.length" :ref="'refMyEm'+companyId"></electronicMonitoring>
  108. <u-divider :isnone="kWhList.length==0" nonetext="暂无数据" border-color="#CFD2D5">已经到底了</u-divider>
  109. </view>
  110. <view class="main current-123" v-show="(kWhList.length!=1)">
  111. <view class="electronicMonitoring-title"
  112. @click="titleCk"
  113. v-if="companyType==1"
  114. v-show="childList&&childList.length>0" >
  115. <view>
  116. {{childListName}}
  117. </view>
  118. <view v-show="childList.length>1">
  119. <u-icon name="arrow-down"></u-icon>
  120. </view>
  121. </view>
  122. <view class="electronicMonitoring-title2"
  123. v-else
  124. v-show="childList&&childList.length>1" >
  125. <u-tabs-one height="60" :showBar="false" v-if="utabsone&&childList&&childList.length"
  126. :currentIndexBl="true" bg-color="#f2f4f6" key="A"
  127. :list="childList" :is-scroll="false" :current="current2" @change="change2"></u-tabs-one>
  128. </view>
  129. <!-- 电表运行情况 -->
  130. <view class="statistics-1 statistics">
  131. <view class="title">
  132. <view class="icon">
  133. <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
  134. </view>
  135. <view class="text">
  136. 电表运行情况
  137. </view>
  138. <view class="check-all" @click="toEquipmentConditionMonitoring">
  139. 查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
  140. </view>
  141. </view>
  142. <view class="item">
  143. <view class="item-progess">
  144. <view class="img-box">
  145. <u-circle-progress active-color="#2979ff" :percent="alarmsPercent" width="88">
  146. </u-circle-progress>
  147. </view>
  148. </view>
  149. <!-- 累计 -->
  150. <view class="total">
  151. <view class="total1">
  152. <view class="normal">
  153. 正常 <span style="color:#19be6b;margin: 0 8rpx;">{{alarmsForm.okNum}}</span> 台
  154. </view>
  155. <view class="abnormal">
  156. 异常 <span style="color:red;margin: 0 8rpx;">{{alarmsForm.errorNum}}</span> 台
  157. </view>
  158. </view>
  159. <view class="total2" v-if="false">
  160. 本月累计触发告警 <text class="total-number">{{alarmsForm.errorMonthNum}}</text> 次
  161. </view>
  162. </view>
  163. </view>
  164. </view>
  165. <view class="" v-show="companyId==''&&companyList.length>1&&datacompanyInfo.type=='2'">
  166. <!-- 电表运行情况 -->
  167. <view class="statistics-1 statistics" >
  168. <view class="title">
  169. <view class="icon">
  170. <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
  171. </view>
  172. <view class="text">
  173. 在用园区与产权单位
  174. </view>
  175. </view>
  176. <view class=" contractList" >
  177. <view class="contractListClass" v-for="(item,i) in companyList" :key="i"
  178. @click="change(i+1)">
  179. <view class="contractListClass1">
  180. {{item.name}}
  181. </view>
  182. <view class="contractListClass2">
  183. <u-icon name="arrow-right" size="24" color="#838383"></u-icon>
  184. </view>
  185. </view>
  186. </view>
  187. </view>
  188. </view>
  189. <view class="" v-show="getPlatformRevenueBl()">
  190. <!-- 电表运行情况 -->
  191. <view class="statistics-1 statistics statistics-3" >
  192. <view class="title">
  193. <view class="icon">
  194. <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
  195. </view>
  196. <view class="text">
  197. 平台预计收入(元)
  198. </view>
  199. </view>
  200. <view class=" contractList" >
  201. <view class="content"
  202. style="display: flex;justify-content: center;margin: 40px 0;"
  203. v-if="!getPlatformRevenueReady">
  204. <div class="uni-toast" style="display: flex;font-size: 60rpx; color: rgb(192, 196, 204);" >
  205. <i class="uni-icon_toast uni-loading"
  206. style="
  207. width: 80rpx;
  208. height: 80rpx;
  209. "
  210. ></i><p class="uni-toast__content"> </p>加载中...</div>
  211. </view>
  212. <!-- @click="gotoUrl('/pages/tenantList/contractList?query=1')" -->
  213. <view class="contractListClass" v-for="(item,i) in platformRevenueList" :key="i"
  214. >
  215. <view class="contractListClass1">
  216. <view class="class1">{{item.name}}</view>
  217. <view class="class2">{{month}}月预计收入</view>
  218. </view>
  219. <view class="contractListClass2">
  220. {{item.incomeFee}}
  221. <u-icon name="arrow-right" v-if="0" style="margin-left: 12rpx;" size="24" color="#838383"></u-icon>
  222. </view>
  223. </view>
  224. </view>
  225. </view>
  226. </view>
  227. <view class="">
  228. <!-- 电表运行情况 -->
  229. <view class="statistics-1 statistics" v-show="companyId&&codes&&codes.indexOf('property')!=-1&&(tenantListNum0)">
  230. <view class="title">
  231. <view class="icon">
  232. <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
  233. </view>
  234. <view class="text">
  235. 租户管理预警
  236. </view>
  237. </view>
  238. <view class=" contractList">
  239. <view class="contractListClass" @click="gotoUrl('/pages/tenantList/contractList?query=1&companyId='+companyId)">
  240. <view class="contractListClass1">
  241. <image class="img" src="@/assets/img/riLine-wallet-2-line.svg"></image>
  242. 账户余额不足 <span class="tenantListNum">{{tenantListNum1}}</span> 家
  243. </view>
  244. <view class="contractListClass2">
  245. <u-icon name="arrow-right" size="24" color="#838383"></u-icon>
  246. </view>
  247. </view>
  248. <view class="contractListClass" @click="gotoUrl('/pages/tenantList/contractList?query=2&companyId='+companyId)">
  249. <view class="contractListClass1">
  250. <!-- <image class="img" src="@/assets/img/riLine-time-line2.svg"></image> -->
  251. <u-icon name="warning" class="img" size="32" color="#ef8132"></u-icon>
  252. 租赁费催缴提醒 <span class="tenantListNum">{{tenantListNum2}}</span> 家<span>(即将到期)</span>
  253. </view>
  254. <view class="contractListClass2">
  255. <u-icon name="arrow-right" size="24" color="#838383"></u-icon>
  256. </view>
  257. </view>
  258. <view class="contractListClass" @click="gotoUrl('/pages/tenantList/contractList?query=3&companyId='+companyId)">
  259. <view class="contractListClass1">
  260. <image class="img" src="@/assets/img/riLine-time-line2.svg"></image>
  261. 租赁费催缴提醒 <span class="tenantListNum">{{tenantListNum3}}</span> 家<span>(已到期)</span>
  262. </view>
  263. <view class="contractListClass2">
  264. <u-icon name="arrow-right" size="24" color="#838383"></u-icon>
  265. </view>
  266. </view>
  267. </view>
  268. </view>
  269. </view>
  270. <!-- 统计2 异常告警记录 -->
  271. <view class="statistics-2 statistics" v-show="companyId&&codes&&codes.indexOf('property')!=-1&&(tenantListNum0)" >
  272. <view class="title">
  273. <view class="icon">
  274. <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
  275. </view>
  276. <view class="text">
  277. 租户断电提醒
  278. </view>
  279. <view class="check-all" @click="gotoUrl('/pages/tenantList/remindList?id='+companyId)">
  280. 查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
  281. </view>
  282. </view>
  283. <u-divider :isnone="abnormalRecordsList.length==0" nonetext="无记录"
  284. border-color="#fff"></u-divider>
  285. <!-- 异常 -->
  286. <view class="abnormal-item" v-for="(item,index) in abnormalRecordsList"
  287. :key="index"
  288. >
  289. <!-- @click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)"
  290. -->
  291. <view class="item-title">
  292. <view class="name">
  293. {{item.content}}
  294. </view>
  295. <view class="date" style="display: flex; justify-content: space-between;margin-top: 4rpx;">
  296. <view>{{item.title}}</view>
  297. <view>{{item.createTime}}</view>
  298. </view>
  299. </view>
  300. </view>
  301. </view>
  302. <!-- 能源管理 -->
  303. <view v-show="companyId" class="statistics statistics-manage">
  304. <view class="title">
  305. <view class="icon">
  306. <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
  307. </view>
  308. <view class="text">
  309. 能源管理
  310. </view>
  311. <view class="check-all" @click="toEquipmentElectricity">
  312. 查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
  313. </view>
  314. </view>
  315. <view class="content"
  316. style="display: flex;justify-content: center;margin: 40px 0;"
  317. v-if="!getHomePageManageshowLoading">
  318. <div class="uni-toast" style="display: flex;font-size: 60rpx; color: rgb(192, 196, 204);" >
  319. <i class="uni-icon_toast uni-loading"
  320. style="
  321. width: 80rpx;
  322. height: 80rpx;
  323. "
  324. ></i><p class="uni-toast__content"> </p>加载中...</div>
  325. </view>
  326. <view class="content" v-else-if="getHomePageManageshowLoading&&meterList.length == 0">
  327. <u-divider :isnone="true" nonetext="无记录"
  328. border-color="#fff"></u-divider>
  329. </view>
  330. <!-- 图表 -->
  331. <view class="chart" v-show="getHomePageManageshowLoading">
  332. <view class="u-subsection">
  333. <u-subsection :list="list" :current="homePageManageType" @change="sectionChange"
  334. font-size="24"></u-subsection>
  335. <view style="margin-top: 18rpx;" v-if="homePageManageType==5&&tabsFrom.show2Text">
  336. 指定时间:{{tabsFrom.show2Text}}
  337. </view>
  338. </view>
  339. <view class="incomeExpenditureClass" v-show="childInfo.type!=4" >
  340. <view class="incomeRow" >
  341. <view class="income1">
  342. <view class="income11">
  343. 电费收入 (元)
  344. </view>
  345. <view class="income12">
  346. {{incomeExpenditureObj.incomeFee}}
  347. <span class="income121" v-if="!incomeExpenditureObj.id">加载中...</span>
  348. </view>
  349. </view>
  350. <view class="income1">
  351. <view class="income11">
  352. 电费支出 (元)
  353. </view>
  354. <view class="income12">
  355. {{incomeExpenditureObj.expenditureFee}}
  356. <span class="income121" v-if="!incomeExpenditureObj.id">加载中...</span>
  357. </view>
  358. </view>
  359. </view>
  360. <view class="incomeRow" >
  361. <view class="income1">
  362. <view class="income11">
  363. 收支情况 (元)
  364. </view>
  365. <view class="income12" :style="incomeExpenditureObj.differenceFee>=0?'color:red':'color:#52b8aa'">
  366. {{incomeExpenditureObj.differenceFee>0?'+':''}}{{incomeExpenditureObj.differenceFee}}
  367. <span class="income121" v-if="!incomeExpenditureObj.id">加载中...</span>
  368. </view>
  369. </view>
  370. <view class="income1">
  371. <view class="income11">
  372. 节约电费 (元)
  373. </view>
  374. <view class="income12" style="color:#52b8aa">
  375. {{incomeExpenditureObj.saveFee}}
  376. <span class="income121" v-if="!incomeExpenditureObj.id">加载中...</span>
  377. </view>
  378. </view>
  379. </view>
  380. </view>
  381. <view class="chat-box" id="barEcharts-statistics" v-show="childInfo.type!=4">
  382. </view>
  383. </view>
  384. <view class="search" v-if="false">
  385. <view class="switch">
  386. <u-switch v-model="checked" size="40"></u-switch><text>只看离线表</text>
  387. </view>
  388. <view class="search-box">
  389. <input type="text" placeholder="请输入电表查询" />
  390. <view class="icon">
  391. <img src="@/assets/img/riLine-search-line 1.svg" alt="" />
  392. </view>
  393. </view>
  394. </view>
  395. <!-- 电表统计 -->
  396. <Tree-Body :meterList="meterList" ref="mytree"
  397. :showPark="homePageManageObj.showPark"
  398. @query="getHomePageManageChildMeter"
  399. v-if="getHomePageManageReady"
  400. :role="codes&&codes.indexOf('switch')!=-1"
  401. @switchBtn="switchBtnApi"
  402. ></Tree-Body>
  403. </view>
  404. <!-- 用电量 -->
  405. <view class="statistics-e statistics" v-if="!companyId">
  406. <view class="title">
  407. <view class="icon">
  408. <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
  409. </view>
  410. <view class="text">
  411. 用电量 (度)
  412. </view>
  413. <view class="check-all" @click="toEquipmentElectricity">
  414. 查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
  415. </view>
  416. </view>
  417. <view class="content" style="display: flex;justify-content: center;margin: 40px 0;"
  418. v-if="getHomePageKwhshowLoading">
  419. <div class="uni-toast" style="display: flex;font-size: 60rpx; color: rgb(192, 196, 204);" >
  420. <i class="uni-icon_toast uni-loading"
  421. style="
  422. width: 80rpx;
  423. height: 80rpx;
  424. "
  425. ></i><p class="uni-toast__content"> </p>加载中...</div>
  426. </view>
  427. <view class="content" v-else-if="!getHomePageKwhshowLoading&&kWhListHome.length == 0">
  428. <u-divider :isnone="true" nonetext="无记录"
  429. border-color="#fff"></u-divider>
  430. </view>
  431. <view class="content" v-else >
  432. <view class="electricity">
  433. <view class="item" v-for="(item, index) in kWhListHome" :key="index"
  434. @click="toElectronicMonitoring(item)">
  435. <view class="item-content">
  436. <view class="equipment">
  437. <view class="equipment1 ">
  438. {{replaceLastTwoWords(item.name)}}
  439. </view>
  440. <view class="equipment2">
  441. {{item.installationAddressSimple}}
  442. </view>
  443. <view class="state" v-if="!item.online">
  444. <!-- <view class="dot off-line"></view> -->
  445. <view class="text">离线</view>
  446. </view>
  447. <view class="state state2" v-else>
  448. <!-- <view class="dot on-line"></view> -->
  449. <view class="text">在线</view>
  450. </view>
  451. </view>
  452. <view class="electricity">
  453. <view class="electricity-item electricity-item-day">
  454. <view class="date">
  455. 今日
  456. </view>
  457. <view class="number">
  458. {{item.thisDayKwh}}
  459. </view>
  460. </view>
  461. <view class="electricity-item">
  462. <view class="date">
  463. 本月
  464. </view>
  465. <view class="number">
  466. {{item.thisMonthKwh}}
  467. </view>
  468. </view>
  469. <view class="electricity-item">
  470. <view class="date">
  471. 上月
  472. </view>
  473. <view class="number">
  474. {{item.lastMonthKwh}}
  475. </view>
  476. </view>
  477. </view>
  478. </view>
  479. <view class="more">
  480. <u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
  481. </view>
  482. </view>
  483. </view>
  484. </view>
  485. </view>
  486. <!-- 异常设备排名 -->
  487. <view class="statistics statistics-ranking" v-if="false">
  488. <view class="title">
  489. <view class="icon">
  490. <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
  491. </view>
  492. <view class="text">
  493. 异常设备排名
  494. </view>
  495. <view class="check-all">
  496. 查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
  497. </view>
  498. </view>
  499. <!-- 合计 -->
  500. <view class="total">
  501. 本年度共有<text> 42</text>次设备异常告警
  502. </view>
  503. <view class="ranking-main">
  504. <view class="item" v-for="(item,i) in 3" :key="i"
  505. @click="gotoUrl('/pages/equipmentDataMonitoring/electronicMonitoring?id='+'&name=')">
  506. <view class="ranking">
  507. 1
  508. </view>
  509. <view class="name">
  510. <view class="name1">
  511. 荆鹏软件园01
  512. </view>
  513. <view class="name2">
  514. 荆鹏集团
  515. </view>
  516. </view>
  517. <view class="time">
  518. 5次
  519. </view>
  520. </view>
  521. </view>
  522. <!-- 查看全部排名 -->
  523. <!-- <view class="check-all" @click="gotoUrl('/pages/abnormal/abnormalDeviceRanking')">
  524. 查看全部排名 <u-icon name="arrow-down" size="24" color="rgba(119,119,119,1)"></u-icon>
  525. </view> -->
  526. </view>
  527. <u-divider nonetext="暂无数据" border-color="#CFD2D5">已经到底了</u-divider>
  528. </view>
  529. <energyCenterTabbar :current="0"></energyCenterTabbar>
  530. </view>
  531. </template>
  532. <script>
  533. import {
  534. parseUnixTime,
  535. beforeTimeStamp,
  536. getWeek,newDate
  537. } from '@/apis/utils'
  538. import energyCenterTabbar from '@/components/energyCenterTabbar.vue'
  539. import electronicMonitoring from '@/pages/equipmentDataMonitoring/electronicMonitoring.vue'
  540. import * as echarts from 'echarts';
  541. import * as API_index from '@/apis/pagejs/index.js'
  542. import * as API_tenantList from '@/apis/pagejs/tenantList.js'
  543. import * as API from '@/apis/pagejs/energyManage.js'
  544. import TreeBody from '@/components/tree/tree-body.vue';
  545. export default {
  546. components: {
  547. energyCenterTabbar,TreeBody,electronicMonitoring
  548. },
  549. data() {
  550. return {
  551. abnormalRecordsList: [],
  552. queryDate: '',
  553. alarmsPercent: 0,
  554. alarmsForm: {
  555. okNum: 0,
  556. errorNum: 0,
  557. errorMonthNum: 0
  558. }, // 累计报警
  559. companyId: '', // 商户ID
  560. pageIndexe: 1, // 设备数据检测
  561. totalPagee: 1,
  562. deviceList: [],
  563. pageIndexp: 1, // 用电量
  564. totalPagep: 1,
  565. kWhList: [],
  566. kWhListHome: [],
  567. codes: '', // 判断:reading用电量 detector设备数据检测
  568. merchantList1: [], // 商户
  569. merchantList2: [],
  570. companyListMain: [],
  571. companyList: [],
  572. datacompanyInfo:{},
  573. companyInfotypeCurrent:1,
  574. companyInfotypeList:[
  575. {
  576. name: '变压器巡检仪'
  577. },
  578. {
  579. name: '费控电表计量仪'
  580. }
  581. ],
  582. popShow: false,
  583. popShowtest: true,
  584. current: 0,
  585. current2: 0,
  586. myLineChart: null, // 图表
  587. myBarChart: null,
  588. myPieChart: null,
  589. intervalId: null, // 用于存储间隔ID
  590. intervalReady: false, // 用于存储间隔ID
  591. list: [{
  592. name: '上月',
  593. value: "2"
  594. },
  595. {
  596. name: '当月',
  597. value: "1"
  598. },
  599. {
  600. name: '今日',
  601. value: "4"
  602. }, {
  603. name: '当年',
  604. value: "3"
  605. }, {
  606. name: '合计',
  607. value: "0"
  608. },
  609. {
  610. name: '指定时间',
  611. value: "10"
  612. }
  613. ],
  614. checked: false,
  615. homePageManageType: 2,
  616. meterList: [],
  617. showPark:false,
  618. meterListShow:{},
  619. homePageManageObj: {
  620. chargeKwh: 0,
  621. lostKwh: 0,
  622. parkKwh: 0,
  623. freeKwh:0,
  624. publicKwh:0,
  625. },
  626. endYear: '',
  627. params: {
  628. year: true,
  629. month: true,
  630. day: false,
  631. hour: false,
  632. minute: false,
  633. second: false
  634. },
  635. value: '2',
  636. clickType: -1,
  637. tabsFrom: {
  638. show1: false,
  639. show1Index: 0,
  640. show2Index: '',
  641. show2: false,
  642. show1Text: "全部类型",
  643. show2Text: "",
  644. },
  645. getHomePageManageReady:false,
  646. utabsone:true,
  647. incomeExpenditureObj:{},
  648. getHomePageKwhshowLoading:false,
  649. getHomePageManageshowLoading:false,
  650. companyInfotype:0,
  651. readingMeterNum:0, //计量仪
  652. monitorMeterNum:0, //巡检仪
  653. tenantListNum0:0,
  654. tenantListNum1:0,
  655. tenantListNum2:0,
  656. tenantListNum3:0,
  657. childList:[],
  658. childInfo:{},
  659. companyInfo:{},
  660. month:0,
  661. platformRevenueList:[],
  662. getPlatformRevenueReady:false,
  663. }
  664. },
  665. onLoad() {
  666. var date = new Date();
  667. var year = date.getFullYear();
  668. var month = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
  669. this.month=date.getMonth() + 1
  670. this.endYear = new Date().getFullYear();
  671. this.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
  672. this.getfindByOpenId();
  673. this.getCompanyInfoList();
  674. },
  675. onReady() {
  676. },
  677. onUnload(){
  678. this.clearTimer(); // 组件销毁前清除定时器
  679. console.log("组件销毁前清除定时器")
  680. },
  681. beforeDestroy() {
  682. this.clearTimer(); // 组件销毁前清除定时器
  683. console.log("组件销毁前清除定时器")
  684. },
  685. onHide(){
  686. this.intervalReady=false
  687. this.clearTimer();
  688. },
  689. onShow(){
  690. if(!this.intervalReady&&this.companyList.length>1){
  691. this.startInterval();
  692. }
  693. },
  694. computed:{
  695. childListName(){
  696. return this.childInfo.name;
  697. },
  698. companyType(){
  699. return this.companyInfo.type;
  700. }
  701. },
  702. methods: {
  703. titleCk() {
  704. if(this.childList.length>1){
  705. this.tabsFrom.show1 = true
  706. }
  707. },
  708. stateBl(timekey,day){
  709. var get=newDate(timekey)
  710. var time=new Date()
  711. if(!day){
  712. return time>get;
  713. }else{
  714. var get2=newDate(timekey)
  715. get2.setDate(get2.getDate() - day)
  716. console.log(timekey)
  717. return get2<time&&get>time;
  718. }
  719. },
  720. selectTypeMethod(tenant,selectType){
  721. var selectType1=this.selectType;
  722. if(selectType){
  723. selectType1=selectType;
  724. }
  725. // if(){
  726. // }
  727. if(true){
  728. var bl=false;
  729. for(var j in tenant.tenantContractList){
  730. var tenant1=tenant.tenantContractList[j]
  731. //console.log(tenant1.autoDeductFee)
  732. if(tenant1.autoDeductFee!=true){
  733. continue;
  734. }
  735. if(selectType1==0){
  736. return true
  737. }
  738. if(selectType1==1){
  739. return tenant.balance<tenant.minBalance
  740. }
  741. for(var k in tenant1.contractItemList){
  742. var item=tenant1.contractItemList[k]
  743. //console.log(item.prepaidEndTime)
  744. if(item.paymentMethod==1&&item.name!='电费'){
  745. if(selectType1==2){
  746. if(item.prepaidEndTime&&this.stateBl(item.prepaidEndTime,30)){
  747. bl=true;
  748. }
  749. }
  750. if(selectType1==3){
  751. if(item.prepaidEndTime&&this.stateBl(item.prepaidEndTime)){
  752. bl=true;
  753. }
  754. if(item.prepaidEndTime==null){
  755. bl=true;
  756. }
  757. }
  758. }
  759. }
  760. }
  761. return bl
  762. }
  763. },
  764. getTenantList(){
  765. // uni.showLoading({
  766. // title: "加载中",
  767. // mask: true,
  768. // })
  769. this.tenantListNum1=0
  770. this.tenantListNum2=0
  771. this.tenantListNum3=0
  772. API_tenantList.tenantContractList({
  773. companyId:this.companyId
  774. }).then((response) => {
  775. uni.hideLoading();
  776. //this.getTenantListReady=true
  777. var tenantList=response.data.tenantInfoList;
  778. this.tenantListNum0=tenantList.length
  779. for(var i in tenantList){
  780. var obj=tenantList[i]
  781. if(this.selectTypeMethod(obj,1)){
  782. this.tenantListNum1++;
  783. }
  784. if(this.selectTypeMethod(obj,2)){
  785. this.tenantListNum2++;
  786. }
  787. if(this.selectTypeMethod(obj,3)){
  788. this.tenantListNum3++;
  789. }
  790. }
  791. }).catch(error => {
  792. uni.showToast({
  793. title: error,
  794. icon: "none"
  795. })
  796. })
  797. },
  798. //绑定权限
  799. getfindByOpenId() {
  800. API_index.findByOpenId({
  801. openId: this.carhelp.getOpenId()
  802. }).then((response) => {
  803. if(response.data&&response.data.companyInfo){
  804. this.datacompanyInfo=response.data.companyInfo
  805. this.companyInfotype = response.data.companyInfo.type;
  806. if(this.companyInfotype==4){
  807. this.getFindMeterList()
  808. }
  809. }
  810. if(response.data){
  811. var token = response ? response.data.token : '';
  812. this.carhelp.setPersonInfo(response.data.regUser );
  813. this.carhelp.setToken(token);
  814. this.carhelp.setPersonInfoPlus(response.data);
  815. this.codes =response.data.regUser.codes
  816. if(this.companyId&&this.codes&&this.codes.indexOf('property')!=-1){
  817. this.getTenantList()
  818. }
  819. }
  820. }).catch(error => {
  821. uni.showToast({
  822. title: error,
  823. icon: "none"
  824. })
  825. })
  826. },
  827. getFindMeterList(){
  828. API.findMeterList().then((response) => {
  829. //readingMeterNum 计量仪 //monitorMeterNum 巡检仪
  830. this.readingMeterNum=response.data.readingMeterNum
  831. this.monitorMeterNum=response.data.monitorMeterNum
  832. }).catch(error => {
  833. uni.showToast({
  834. title: error,
  835. icon: "none"
  836. })
  837. })
  838. },
  839. switchBtnApiMethod(node,key){
  840. uni.showLoading({
  841. title: "加载中",
  842. mask: true,
  843. })
  844. API.remoteSwitch({
  845. meterId:node.id,
  846. enabled:key
  847. }).then((res) => {
  848. uni.hideLoading();
  849. node.switchStatus=key
  850. }).catch(error => {
  851. uni.showToast({
  852. title: error,
  853. icon: "none"
  854. })
  855. })
  856. },
  857. switchBtnApi(node,key){
  858. uni.showModal({
  859. confirmColor:`${key?'#3CC51F':'red'}`,
  860. confirmText:`${key?'开启':'关闭'}`,
  861. content: `确认是否要"${key?'开启':'关闭'}"${this.replaceLastTwoWords(node.name)}`,
  862. title: "提示",
  863. success:res=> {
  864. if(res.confirm){
  865. this.switchBtnApiMethod(node,key);
  866. }
  867. }
  868. })
  869. console.log(node,key)
  870. },
  871. getIncomeExpenditure(){
  872. API.incomeExpenditure({
  873. //parentMeterId:item.id,
  874. queryDate:this.queryDate,
  875. companyId: this.companyId,
  876. type: this.list[this.homePageManageType].value
  877. }).then((response) => {
  878. this.incomeExpenditureObj=response.data
  879. this.incomeExpenditureObj.id=1
  880. }).catch(error => {
  881. uni.showToast({
  882. title: error,
  883. icon: "none"
  884. })
  885. })
  886. },
  887. // 设备数据监测
  888. getHomePageManageChildMeter(item,bl) {
  889. if(!bl){
  890. // uni.showLoading({
  891. // title: "加载中",
  892. // mask: true,
  893. // })
  894. }
  895. API.homePageManageChildMeter({
  896. parentMeterId:item.id,
  897. queryDate:this.queryDate,
  898. companyId: this.companyId,
  899. type: this.list[this.homePageManageType].value
  900. }).then((response) => {
  901. // if(!bl){
  902. // uni.hideLoading();
  903. // }
  904. // this.meterList = response.data.meterList;
  905. // if(!this.meterListShow.id){
  906. // this.meterListShow.id=1
  907. // this.recursionList(this.meterList)
  908. // }
  909. var childMeterList=response.data.childMeterList
  910. item.childMeterList=childMeterList
  911. if(!bl){
  912. for(var i in childMeterList){
  913. var obj=childMeterList[i]
  914. this.getHomePageManageChildMeter(obj,true)
  915. }
  916. }
  917. }).catch(error => {
  918. uni.showToast({
  919. title: error,
  920. icon: "none"
  921. })
  922. })
  923. },
  924. recursionList(list){
  925. if(list){
  926. for(var i in list){
  927. var obj=list[i]
  928. this.meterListShow[obj.id]=false
  929. this.recursionList(obj.childMeterList)
  930. }
  931. }
  932. },
  933. ifBtnShow(item){
  934. return this.meterListShow[item.id]
  935. },
  936. showBtn(item){
  937. var key=this.meterListShow[item.id];
  938. this.$set(this.meterListShow,item.id,!key)
  939. console.log("showBtn,",key)
  940. this.$forceUpdate()
  941. },
  942. selector2reset(e) {
  943. console.log(e)
  944. this.tabsFrom.show2Text = '全部时间'
  945. this.tabsFrom.show2Index = '';
  946. if (e.day) {
  947. this.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
  948. this.getHomePageManage();
  949. } else {
  950. this.homePageManageType = this.clickType;
  951. if (this.homePageManageType != 5) {
  952. this.list[5].name = '指定时间';
  953. }
  954. this.getHomePageManage();
  955. }
  956. },
  957. selector2cancel() {
  958. if(this.clickType != -1) {
  959. }
  960. this.homePageManageType = this.clickType;
  961. },
  962. selector2confirm(e) {
  963. this.tabsFrom.show2Text = e.year + "年" + e.month + "月"
  964. this.tabsFrom.show2Index = e.year + "-" + e.month
  965. if (e.day) {
  966. this.tabsFrom.show2Text += e.day + "日"
  967. this.tabsFrom.show2Index += '-' + e.day
  968. this.queryDateMethod(this.tabsFrom.show2Index, true)
  969. } else {
  970. this.queryDateMethod(this.tabsFrom.show2Index, false)
  971. }
  972. },
  973. queryDateMethod(queryTime, day) {
  974. this.homePageManageType = "5";
  975. if (day) {
  976. this.queryDate = queryTime;
  977. this.list[5].value = '9';
  978. } else {
  979. this.queryDate = queryTime + "-01";
  980. this.list[5].value = '10';
  981. }
  982. //this.list[5].name = queryTime;
  983. this.getHomePageManage();
  984. },
  985. clearTimer() {
  986. if (this.intervalId) {
  987. clearInterval(this.intervalId); // 清除定时器
  988. this.intervalId = null; // 重置定时器ID
  989. }
  990. },
  991. startInterval() {
  992. this.clearTimer(); // 组件销毁前清除定时器
  993. this.intervalId = setInterval(() => {
  994. this.getHomePageKwh('', true)
  995. }, 60000);
  996. },
  997. merchantChangeApi() {
  998. this.popShow=false
  999. if (this.companyId) {
  1000. if(this.companyId&&this.codes&&this.codes.indexOf('property')!=-1){
  1001. this.getTenantList()
  1002. }
  1003. this.getHomePageKwh(this.companyId)
  1004. this.getAbnormalAlarmRecord();
  1005. }else{
  1006. this.kWhList=[]
  1007. this.getPlatformRevenue()
  1008. }
  1009. this.getDeviceStatus()
  1010. },
  1011. companyInfotypeChange(index){
  1012. if(index!=this.companyInfotypeCurrent){
  1013. var url=""
  1014. if(process.car.NODE_ENV=='dev'){
  1015. url='http://localhost:8081/#/'
  1016. }else if(process.car.NODE_ENV=='test'){
  1017. url='https://dgj.hbjp.com.cn/charging-prod/jp-housekeep-electric-test/#/'
  1018. }else{
  1019. url='https://dgj.hbjp.com.cn/charging-prod/jp-housekeep-electric/#/'
  1020. }
  1021. window.location.href=url+"pages/statistics/statistics"
  1022. }
  1023. },
  1024. change(index) {
  1025. this.current = index;
  1026. this.current2=0;
  1027. this.childList=[]
  1028. var company= this.merchantList1[index]
  1029. if(company.id!=''){
  1030. this.childList=company.childList;
  1031. if(this.childList&&this.childList.length){
  1032. this.companyId = this.childList[0].id;
  1033. this.childInfo=this.childList[0]
  1034. }else{
  1035. this.childList=[]
  1036. this.companyId =company.id
  1037. this.childInfo=company
  1038. }
  1039. }else{
  1040. this.companyId =''
  1041. }
  1042. this.companyInfo=company;
  1043. this.merchantChangeApi()
  1044. },
  1045. change2(index) {
  1046. this.current2=index;
  1047. this.companyId = this.childList[this.current2].id;
  1048. this.childInfo=this.childList[this.current2]
  1049. this.merchantChangeApi()
  1050. },
  1051. merchantChange(company, index) {
  1052. if(this.current==0){
  1053. this.current=1;
  1054. }
  1055. var m = company;
  1056. var n = this.merchantList1[this.current];
  1057. this.merchantList1[this.current] = m;
  1058. this.merchantList2[index] = n;
  1059. //this.$forceUpdate()
  1060. this.utabsone=false
  1061. this.companyId = company.id;
  1062. this.companyInfo=company
  1063. if(company.id!=''){
  1064. this.childList=company.childList;
  1065. if(this.childList&&this.childList.length){
  1066. this.companyId = this.childList[0].id;
  1067. this.childInfo=this.childList[0]
  1068. }else{
  1069. this.childList=[]
  1070. this.companyId =company.id
  1071. this.childInfo=company
  1072. }
  1073. }else{
  1074. this.companyId =''
  1075. }
  1076. this.merchantChangeApi()
  1077. this.popShow = false;
  1078. },
  1079. getCompanyInfoList() {
  1080. // uni.showLoading({
  1081. // title: "加载中",
  1082. // mask: true,
  1083. // })
  1084. API.deviceCompanyList().then((response) => {
  1085. //uni.hideLoading();
  1086. var list = response.data.companyInfoList;
  1087. this.companyListMain=response.data.companyInfoList;
  1088. if(list.length==1&&list[0].childList&&list[0].childList.length){
  1089. list=list[0].childList
  1090. }
  1091. var mList1 = [];
  1092. var mList2 = [];
  1093. mList1.push({
  1094. id: '',
  1095. name: '全部'
  1096. });
  1097. for (var i = 0; i < list.length; i++) {
  1098. if (i >= 3) {
  1099. mList2.push(list[i]);
  1100. } else {
  1101. mList1.push(list[i]);
  1102. }
  1103. }
  1104. this.companyList = list;
  1105. if(this.companyList&&this.companyList.length&&this.companyList.length==1){
  1106. this.childList=list[0].childList
  1107. if(!this.childList){
  1108. this.childList=[]
  1109. }
  1110. // this.childList=[
  1111. // ...list[0].childList,
  1112. // {
  1113. // name:'创客公寓',
  1114. // id:''
  1115. // },
  1116. // {
  1117. // name:'创客公寓',
  1118. // id:''
  1119. // }
  1120. // ]
  1121. }
  1122. if(this.companyList.length==1&&this.childList.length==0){
  1123. this.companyId=this.companyList[0].id
  1124. this.childInfo=this.companyList[0]
  1125. this.companyInfo=this.companyList[0]
  1126. }else if(this.companyList.length==1){
  1127. this.companyId=this.childList[0].id
  1128. this.childInfo=this.childList[0]
  1129. this.companyInfo=this.companyList[0]
  1130. }else{
  1131. this.getHomePageKwh('')
  1132. }
  1133. this.merchantList1 = mList1;
  1134. this.merchantList2 = mList2;
  1135. this.merchantChangeApi()
  1136. }).catch(error => {
  1137. uni.showToast({
  1138. title: error,
  1139. icon: "none"
  1140. })
  1141. })
  1142. },
  1143. sectionChange(index) {
  1144. this.clickType = this.homePageManageType ;
  1145. this.homePageManageType = index;
  1146. if (index == 5) {
  1147. this.tabsFrom.show2 = true;
  1148. //this.params.day = false;
  1149. } else {
  1150. this.list[5].name = '指定时间'
  1151. this.getHomePageManage()
  1152. }
  1153. },
  1154. getHomePageManage(bl) {
  1155. this.getHomePageManageReady=false
  1156. if(bl){
  1157. this.getHomePageManageshowLoading=false
  1158. }else{
  1159. uni.showLoading({
  1160. title: "加载中",
  1161. mask: true,
  1162. })
  1163. }
  1164. this.incomeExpenditureObj={}
  1165. var type=this.list[this.homePageManageType].value
  1166. API.homePageManage({
  1167. queryDate:this.queryDate,
  1168. companyId: this.companyId,
  1169. type: type
  1170. }).then((response) => {
  1171. this.getHomePageManageReady=true
  1172. if(bl){
  1173. this.getHomePageManageshowLoading=true
  1174. }else{
  1175. uni.hideLoading();
  1176. }
  1177. this.meterList = response.data.meterList;
  1178. //console.log(this.meterList)
  1179. this.homePageManageObj = response.data;
  1180. //this.$forceUpdate()
  1181. if(this.childInfo.type!=4){
  1182. //&&this.homePageManageObj.showPark
  1183. this.myBarChart=null;
  1184. this.$nextTick(()=>{
  1185. this.getBarCharts()
  1186. })
  1187. this.getIncomeExpenditure();
  1188. }
  1189. }).catch(error => {
  1190. uni.showToast({
  1191. title: error,
  1192. icon: "none"
  1193. })
  1194. })
  1195. },
  1196. // 报警
  1197. getAbnormalAlarmRecord() {
  1198. if(this.companyId&&this.codes&&this.codes.indexOf('property')!=-1){
  1199. }else{
  1200. return
  1201. }
  1202. API.remindList({
  1203. configId: '',
  1204. pageIndex: 1,
  1205. pageSize: 3,
  1206. companyId: this.companyId
  1207. }).then((response) => {
  1208. this.abnormalRecordsList = response.data.data;
  1209. }).catch(error => {
  1210. uni.showToast({
  1211. title: error,
  1212. icon: "none"
  1213. })
  1214. })
  1215. },
  1216. selector1confirm(e) {
  1217. //this.getHomePageKwh()
  1218. console.log(e)
  1219. this.companyId=e[0].value
  1220. this.current2=e[0].i
  1221. this.childInfo=this.childList[this.current2];
  1222. uni.showLoading()
  1223. this.merchantChangeApi()
  1224. },
  1225. // 用电量
  1226. getHomePageKwh( companyId,interval) {
  1227. if (!interval) {
  1228. // uni.showLoading({
  1229. // title: "加载中",
  1230. // mask: true,
  1231. // })
  1232. this.getHomePageKwhshowLoading=true;
  1233. }
  1234. API.homePageKwh({
  1235. pageIndex: 1,
  1236. pageSize: 5,
  1237. companyId:companyId
  1238. }).then((response) => {
  1239. if (!interval) {
  1240. //uni.hideLoading();
  1241. this.getHomePageKwhshowLoading=false;
  1242. }
  1243. if(companyId){
  1244. this.kWhList = response.data.data;
  1245. if(this.kWhList.length==1){
  1246. var item=this.kWhList[0];
  1247. this.$refs['refMyEm'+companyId].init({
  1248. id:item.id,
  1249. name:item.name,
  1250. companyId:item.companyId,
  1251. ref:1,
  1252. })
  1253. setTimeout(()=>{
  1254. this.$nextTick(()=>{
  1255. this.utabsone=true
  1256. })
  1257. },200)
  1258. }else{
  1259. this.getHomePageManage(1)
  1260. this.getAbnormalAlarmRecord();
  1261. }
  1262. }else{
  1263. this.kWhListHome= response.data.data;
  1264. if (!interval) {
  1265. this.startInterval(); // 组件挂载后开始间隔
  1266. }else{
  1267. this.intervalReady=true
  1268. }
  1269. setTimeout(()=>{
  1270. this.$nextTick(()=>{
  1271. this.utabsone=true
  1272. })
  1273. },200)
  1274. }
  1275. }).catch(error => {
  1276. uni.showToast({
  1277. title: error,
  1278. icon: "none"
  1279. })
  1280. })
  1281. },
  1282. getPlatformRevenueBl(){
  1283. console.log("getPlatformRevenueBl",this.datacompanyInfo)
  1284. return this.companyId==''&&this.companyList.length>1&&this.datacompanyInfo.type=='2'
  1285. },
  1286. getPlatformRevenue(){
  1287. if(this.getPlatformRevenueBl()){
  1288. }else{
  1289. return
  1290. }
  1291. this.getPlatformRevenueReady=false
  1292. var queryDate =parseUnixTime(new Date(), '{y}-{m}-1');
  1293. API.platformRevenue({
  1294. queryDate:queryDate
  1295. }).then((response) => {
  1296. this.getPlatformRevenueReady=true
  1297. this.platformRevenueList=response.data.companyInfoList
  1298. }).catch(error => {
  1299. uni.showToast({
  1300. title: error,
  1301. icon: "none"
  1302. })
  1303. })
  1304. },
  1305. // 累计报警
  1306. getDeviceStatus() {
  1307. API.deviceStatus({
  1308. companyId: this.companyId
  1309. }).then((response) => {
  1310. setTimeout(()=>{
  1311. this.$nextTick(()=>{
  1312. this.utabsone=true
  1313. })
  1314. },200)
  1315. this.alarmsForm = response.data;
  1316. if (this.alarmsForm.okNum != 0) {
  1317. this.alarmsPercent = this.alarmsForm.okNum / (this.alarmsForm.okNum + this.alarmsForm
  1318. .errorNum) * 100;
  1319. }
  1320. }).catch(error => {
  1321. uni.showToast({
  1322. title: error,
  1323. icon: "none"
  1324. })
  1325. })
  1326. },
  1327. // 故障类型
  1328. getBarCharts() {
  1329. if (!this.myBarChart) {
  1330. this.myBarChart = echarts.init(document.getElementById('barEcharts-statistics'),null,{
  1331. width:uni.upx2px(620),height:uni.upx2px(740)
  1332. });
  1333. }
  1334. this.myBarChart.clear()
  1335. var data=[
  1336. {
  1337. name:"总表电量",
  1338. key:"parkKwh",
  1339. color:"#307af6"
  1340. },
  1341. {
  1342. name:"计费电量",
  1343. key:"chargeKwh",
  1344. color:"#52b8aa"
  1345. },
  1346. {
  1347. name:"自用电量",
  1348. key:"freeKwh",
  1349. color:"#53b56b"
  1350. },
  1351. {
  1352. name:"公用电量",
  1353. key:"publicKwh",
  1354. color:"#ef8132"
  1355. },
  1356. {
  1357. name:"电损量",
  1358. key:"lostKwh",
  1359. color:"#dc4441"
  1360. }
  1361. ]
  1362. var dataName=[]
  1363. var dataSeries=[]
  1364. for(var i in data){
  1365. var it=data[i]
  1366. dataName.push(it.name)
  1367. dataSeries.push({})
  1368. }
  1369. for(var i in data){
  1370. var it=data[i]
  1371. dataSeries[data.length-i-1]={
  1372. name:it.name,
  1373. type: 'bar',
  1374. itemStyle:{
  1375. color:it.color
  1376. },
  1377. data: [
  1378. this.homePageManageObj[it.key]
  1379. ],
  1380. coordinateSystem: 'polar',
  1381. label: {
  1382. show: true,
  1383. position: 'start',
  1384. formatter: '{c}度'
  1385. }
  1386. }
  1387. }
  1388. var option = {
  1389. polar: {
  1390. center:['50%','58%'],
  1391. radius:[25, '80%']
  1392. },
  1393. angleAxis: {
  1394. startAngle: 75,
  1395. label: {
  1396. rotate: 45, // 旋转标签,使得重叠的概率降低
  1397. // margin: 5 // 设置标签与轴线之间的距离,增加空间
  1398. }
  1399. },
  1400. legend: {
  1401. itemGap:5,
  1402. data: dataName,
  1403. //orient :'vertical'
  1404. },
  1405. radiusAxis: {
  1406. type: 'category',
  1407. data: ['']
  1408. },
  1409. tooltip: {},
  1410. series: dataSeries
  1411. };
  1412. console.log(option)
  1413. this.myBarChart.setOption(option);
  1414. },
  1415. toDataMonitoringList() {
  1416. uni.navigateTo({
  1417. url: '/pages/equipmentDataMonitoring/dataMonitoring-list'
  1418. })
  1419. },
  1420. toEquipmentConditionMonitoring() {
  1421. uni.navigateTo({
  1422. url: '/pages/equipmentInformation/equipmentConditionMonitoring?companyId='+this.companyId
  1423. })
  1424. },
  1425. toWorkOrderManagement() {
  1426. uni.navigateTo({
  1427. url: '/pages/workOrderManagement/workOrderManagement'
  1428. })
  1429. },
  1430. toEquipmentElectricity() {
  1431. uni.navigateTo({
  1432. url: '/pages/equipmentDataMonitoring/equipmentElectricity?companyId=' + this.companyId
  1433. })
  1434. },
  1435. toElectronicMonitoring(item) {
  1436. uni.navigateTo({
  1437. url: '/pages/equipmentDataMonitoring/electronicMonitoring?id=' + item.id + '&name=' + item
  1438. .name +
  1439. '&companyId=' + item.companyId
  1440. })
  1441. }
  1442. }
  1443. }
  1444. </script>
  1445. <style lang="scss" scoped>
  1446. .incomeExpenditureClass{
  1447. width: 100%;
  1448. padding:16rpx 0;
  1449. .incomeRow{
  1450. display: flex;
  1451. justify-content: space-evenly;
  1452. }
  1453. .income1:last-child{
  1454. .income11,.income12{
  1455. border-right: 1px solid #c5c3c3;
  1456. }
  1457. }
  1458. .income1{
  1459. .income121{
  1460. font-size: 24rpx;
  1461. color:#c5c3c3;
  1462. }
  1463. width: 50%;
  1464. text-align: center;
  1465. .income11{
  1466. padding:12rpx 0;
  1467. background-color: #1677FF ;
  1468. color:#fff;
  1469. font-size: 32rpx;
  1470. border-top: 1px solid #c5c3c3;
  1471. border-left: 1px solid #c5c3c3;
  1472. }
  1473. .income12{
  1474. padding:12rpx 0;
  1475. border-top: 1px solid #c5c3c3;
  1476. border-bottom: 1px solid #c5c3c3;
  1477. border-left: 1px solid #c5c3c3;
  1478. font-size: 40rpx;
  1479. }
  1480. }
  1481. }
  1482. /deep/.u-drawer-content {
  1483. margin-top: 88rpx;
  1484. }
  1485. .popup-tabs {
  1486. background-color: #fff;
  1487. display: flex;
  1488. align-items: center;
  1489. justify-content: space-between;
  1490. padding-top: 32rpx;
  1491. padding-right: 32rpx;
  1492. color: rgba(51, 51, 51, 1);
  1493. font-size: 32rpx;
  1494. .tabs {
  1495. width: 88%;
  1496. }
  1497. }
  1498. // /deep/.u-tab-item {
  1499. // width: 25% !important;
  1500. // flex: none !important;
  1501. // }
  1502. .tabs-box{
  1503. .tabs-len-1{
  1504. }
  1505. .tabs-len-2{
  1506. /deep/.u-tab-item {
  1507. // max-width: 39% !important;
  1508. // flex: none !important;
  1509. }
  1510. }
  1511. .tabs-len-3{
  1512. /deep/.u-tab-item {
  1513. max-width: 39% !important;
  1514. flex: none !important;
  1515. }
  1516. }
  1517. .tabs-len-4{
  1518. /deep/.u-tab-item {
  1519. max-width: 26% !important;
  1520. flex: none !important;
  1521. }
  1522. }
  1523. .tabs{
  1524. /deep/.u-tab-item:first-child {
  1525. width: 20% !important;
  1526. flex: none !important;
  1527. }
  1528. }
  1529. }
  1530. // /deep/.u-tab-item2 {
  1531. // width: 33% !important;
  1532. // flex: none !important;
  1533. // }
  1534. .tabs-options {
  1535. display: flex;
  1536. padding: 24rpx 32rpx 0;
  1537. flex-wrap: wrap;
  1538. .item {
  1539. width: 25%;
  1540. margin-bottom: 40rpx;
  1541. }
  1542. }
  1543. // 导航栏
  1544. .navbar {
  1545. background-color: rgba(22, 119, 255, 1);
  1546. color: #fff;
  1547. line-height: 88rpx;
  1548. display: flex;
  1549. justify-content: space-between;
  1550. align-items: center;
  1551. padding: 0 32rpx;
  1552. color: rgba(255, 255, 255, 1);
  1553. font-size: 36rpx;
  1554. position: fixed;
  1555. left: 0;
  1556. right: 0;
  1557. top: 0;
  1558. z-index: 999999;
  1559. font-weight: bold;
  1560. .title{
  1561. overflow: hidden;
  1562. white-space: nowrap;
  1563. text-overflow: ellipsis;
  1564. }
  1565. .img {
  1566. width: 48rpx;
  1567. height: 48rpx;
  1568. vertical-align: middle;
  1569. }
  1570. }
  1571. // 标签
  1572. .tabs-box {
  1573. padding: 32rpx 0;
  1574. margin-top: 66rpx;
  1575. padding-right: 32rpx;
  1576. background-color: rgba(22, 119, 255, 1);
  1577. display: flex;
  1578. align-items: center;
  1579. justify-content: space-between;
  1580. .tabs {
  1581. width: 97%;
  1582. }
  1583. .more{
  1584. padding-right: 12rpx;
  1585. }
  1586. }
  1587. .main {
  1588. border-radius: 16px 16px 0px 0px;
  1589. background: linear-gradient(180deg, rgba(242, 244, 246, 1) 61%, rgba(255, 255, 255, 0) 100%);
  1590. margin-top: -24rpx;
  1591. padding: 32rpx;
  1592. .statistics {
  1593. border-radius: 8px;
  1594. background-color: rgba(255, 255, 255, 1);
  1595. box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
  1596. margin-bottom: 24rpx;
  1597. padding: 40rpx;
  1598. .title {
  1599. display: flex;
  1600. align-items: center;
  1601. margin-bottom: 20rpx;
  1602. .img {
  1603. width: 36rpx;
  1604. height: 36rpx;
  1605. vertical-align: middle;
  1606. border-radius: 999px;
  1607. }
  1608. .change {
  1609. display: flex;
  1610. align-items: center;
  1611. .change-img {
  1612. width: 32rpx;
  1613. height: 32rpx;
  1614. vertical-align: middle;
  1615. }
  1616. text {
  1617. margin-left: 8rpx;
  1618. }
  1619. }
  1620. .text {
  1621. color: rgba(16, 16, 16, 1);
  1622. font-size: 36rpx;
  1623. margin-left: 16rpx;
  1624. font-weight: bold;
  1625. }
  1626. .change {
  1627. margin-left: 16rpx;
  1628. font-size: 24rpx;
  1629. color: #838383;
  1630. }
  1631. .check-all {
  1632. margin-left: auto;
  1633. color: rgba(131, 131, 131, 1);
  1634. font-size: 24rpx;
  1635. }
  1636. }
  1637. }
  1638. // 用电量
  1639. .statistics-e {
  1640. padding: 40rpx;
  1641. .electricity {
  1642. background-color: #fff;
  1643. .item:last-of-type {
  1644. border: none;
  1645. padding-bottom: 0;
  1646. }
  1647. .item {
  1648. padding: 16rpx 0;
  1649. display: flex;
  1650. align-items: center;
  1651. justify-content: space-between;
  1652. border-bottom: 1px solid rgba(245, 245, 245, 1);
  1653. .item-content {
  1654. width: 93%;
  1655. }
  1656. .equipment {
  1657. display: flex;
  1658. align-items: center;
  1659. .equipment1 {
  1660. color: rgba(51, 51, 51, 1);
  1661. font-size: 32rpx;
  1662. max-width: 40%;
  1663. font-weight: bold;
  1664. white-space: nowrap;
  1665. overflow: hidden;
  1666. text-overflow: ellipsis;
  1667. }
  1668. .equipment2 {
  1669. color: rgba(119, 119, 119, 1);
  1670. margin-left: 16rpx;
  1671. max-width: 40%;
  1672. white-space: nowrap;
  1673. overflow: hidden;
  1674. text-overflow: ellipsis;
  1675. }
  1676. }
  1677. // 状态
  1678. .state {
  1679. white-space: pre;
  1680. //width: 64rpx;
  1681. //height: 36rpx;
  1682. padding: 0 4rpx;
  1683. line-height: 36rpx;
  1684. border-radius: 8rpx;
  1685. font-size: 22rpx;
  1686. text-align: center;
  1687. border: 1px solid rgba(255, 123, 0, 1);
  1688. color: rgba(255, 123, 0, 1);
  1689. margin-left: auto;
  1690. // .dot {
  1691. // margin-right: 8rpx;
  1692. // width: 16rpx;
  1693. // height: 16rpx;
  1694. // background-color: rgba(255, 123, 0, 1);
  1695. // border-radius: 999px;
  1696. // margin-left: auto;
  1697. // }
  1698. }
  1699. .state2 {
  1700. border: 1px solid rgba(0, 185, 98, 1);
  1701. color: rgba(0, 185, 98, 1);
  1702. }
  1703. .electricity {
  1704. display: flex;
  1705. justify-content: space-between;
  1706. align-items: center;
  1707. margin-top: 8rpx;
  1708. text-align: center;
  1709. .electricity-item {
  1710. display: flex;
  1711. align-items: center;
  1712. width: 33.3%;
  1713. height: 40rpx;
  1714. line-height: 40rpx;
  1715. .number {
  1716. color: rgba(51, 51, 51, 1);
  1717. font-weight: bold;
  1718. font-size: 24rpx;
  1719. margin-left: 8rpx;
  1720. }
  1721. .date {
  1722. color: rgba(119, 119, 119, 1);
  1723. font-size: 24rpx;
  1724. }
  1725. }
  1726. }
  1727. }
  1728. }
  1729. }
  1730. // 统计1
  1731. .statistics-1 {
  1732. background-color: rgba(255, 255, 255, 1);
  1733. width: 100%;
  1734. padding: 24rpx;
  1735. box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
  1736. border-radius: 8px;
  1737. margin-bottom: 24rpx;
  1738. .item {
  1739. margin-top: 32rpx;
  1740. display: flex;
  1741. align-items: center;
  1742. .item-progess {
  1743. display: flex;
  1744. align-items: center;
  1745. .img {
  1746. width: 88rpx;
  1747. height: 88rpx;
  1748. margin-right: 24rpx;
  1749. vertical-align: middle;
  1750. }
  1751. }
  1752. .total {
  1753. margin-left: 24rpx;
  1754. color: rgba(119, 119, 119, 1);
  1755. .total1 {
  1756. display: flex;
  1757. color: rgba(51, 51, 51, 1);
  1758. font-size: 32rpx;
  1759. font-weight: bold;
  1760. .normal {
  1761. margin-bottom: 12rpx;
  1762. }
  1763. }
  1764. .total2 {
  1765. color: rgba(119, 119, 119, 1);
  1766. }
  1767. .abnormal {
  1768. margin-left: 24rpx;
  1769. }
  1770. }
  1771. .total-number {
  1772. color: rgba(255, 123, 0, 1);
  1773. margin: 0 8rpx;
  1774. font-weight: bold;
  1775. }
  1776. }
  1777. }
  1778. // 统计2异常报警记录
  1779. .statistics-2 {
  1780. .abnormal-item:last-of-type {
  1781. border-bottom: none !important;
  1782. padding-bottom: 0;
  1783. }
  1784. .abnormal-item {
  1785. display: flex;
  1786. justify-content: space-between;
  1787. align-items: center;
  1788. padding: 16rpx;
  1789. border-bottom: 1px solid rgba(245, 245, 245, 1);
  1790. .item-title {
  1791. color: rgba(51, 51, 51, 1);
  1792. .img {
  1793. width: 32rpx;
  1794. height: 32rpx;
  1795. margin-right: 8rpx;
  1796. }
  1797. .name {
  1798. color: rgba(51, 51, 51, 1);
  1799. font-weight: bold;
  1800. }
  1801. .date {
  1802. color: rgba(119, 119, 119, 1);
  1803. font-size: 24rpx;
  1804. }
  1805. }
  1806. .item-value {
  1807. text-align: right;
  1808. display: flex;
  1809. align-items: center;
  1810. .more {
  1811. margin-left: 8rpx;
  1812. }
  1813. .value1 {
  1814. font-weight: bold;
  1815. color: rgba(51, 51, 51, 1);
  1816. }
  1817. .value2 {
  1818. color: rgba(119, 119, 119, 1);
  1819. font-size: 24rpx;
  1820. }
  1821. }
  1822. }
  1823. }
  1824. .statistics-3 {
  1825. }
  1826. .statistics-4 {
  1827. }
  1828. // 异常设备排名
  1829. .statistics-ranking {
  1830. .total {
  1831. color: rgba(16, 16, 16, 1);
  1832. padding-left: 52rpx;
  1833. text {
  1834. color: #1677FF;
  1835. padding: 0 8rpx;
  1836. }
  1837. }
  1838. .ranking-main {
  1839. margin-top: 40rpx;
  1840. border-radius: 16px;
  1841. background-color: #fff;
  1842. .item:last-of-type {
  1843. margin-bottom: 0;
  1844. }
  1845. .item {
  1846. display: flex;
  1847. align-items: center;
  1848. margin-bottom: 32rpx;
  1849. .ranking {
  1850. color: rgba(16, 16, 16, 1);
  1851. font-weight: bold;
  1852. }
  1853. .icon {
  1854. width: 72rpx;
  1855. height: 72rpx;
  1856. border-radius: 4px;
  1857. background-color: rgba(219, 234, 255, 1);
  1858. display: flex;
  1859. align-items: center;
  1860. justify-content: center;
  1861. margin-left: 24rpx;
  1862. .img {
  1863. width: 48rpx;
  1864. height: 48rpx;
  1865. }
  1866. }
  1867. .name {
  1868. margin-left: 16rpx;
  1869. .name1 {
  1870. color: rgba(51, 51, 51, 1);
  1871. font-weight: bold;
  1872. }
  1873. .name2 {
  1874. color: rgba(119, 119, 119, 1);
  1875. font-size: 24rpx;
  1876. margin-top: 4rpx;
  1877. }
  1878. }
  1879. .time {
  1880. color: rgba(16, 16, 16, 1);
  1881. margin-left: auto;
  1882. font-weight: bold;
  1883. }
  1884. }
  1885. }
  1886. // 查看全部排名
  1887. .check-all {
  1888. text-align: center;
  1889. color: rgba(119, 119, 119, 1);
  1890. font-size: 12px;
  1891. }
  1892. }
  1893. // 能源管理
  1894. .statistics-manage {
  1895. padding: 40rpx 0;
  1896. .title,
  1897. .chart,
  1898. .search,
  1899. .meter-statistic {
  1900. padding: 0 32rpx;
  1901. }
  1902. // 图表
  1903. .chart {
  1904. padding-top: 32rpx;
  1905. border-top: 1px solid rgba(242, 242, 242, 1);
  1906. /deep/.u-subsection {
  1907. padding: 2px;
  1908. }
  1909. /deep/.u-item {
  1910. padding: 0;
  1911. font-size: 24rpx
  1912. }
  1913. .chat-box {
  1914. //margin-top: 24rpx;
  1915. width: 100%;
  1916. //height: 480rpx;
  1917. img {
  1918. width: 100%;
  1919. height: 100%;
  1920. }
  1921. }
  1922. }
  1923. .search {
  1924. border-top: 1px solid rgba(242, 242, 242, 1);
  1925. border-bottom: 1px solid rgba(242, 242, 242, 1);
  1926. display: flex;
  1927. align-items: center;
  1928. justify-content: space-between;
  1929. padding: 40rpx 32rpx;
  1930. .switch {
  1931. display: flex;
  1932. align-items: center;
  1933. text {
  1934. margin-left: 8rpx;
  1935. color: rgba(51, 51, 51, 1);
  1936. }
  1937. }
  1938. .search-box {
  1939. border-radius: 50px;
  1940. background-color: rgba(242, 244, 246, 1);
  1941. color: rgba(136, 136, 136, 1);
  1942. height: 56rpx;
  1943. line-height: 56rpx;
  1944. padding-left: 16rpx;
  1945. padding-right: 8rpx;
  1946. flex: 1;
  1947. margin-left: 28rpx;
  1948. display: flex;
  1949. align-items: center;
  1950. justify-content: space-between;
  1951. uni-input {
  1952. height: 56rpx;
  1953. line-height: 56rpx !important;
  1954. font-size: 28rpx;
  1955. width: 75%;
  1956. }
  1957. .icon {
  1958. display: flex;
  1959. align-items: center;
  1960. justify-content: center;
  1961. width: 64rpx;
  1962. height: 40rpx;
  1963. border-radius: 50px;
  1964. background-color: rgba(22, 119, 255, 1);
  1965. }
  1966. }
  1967. }
  1968. }
  1969. // 电表统计
  1970. .meter-statistic {
  1971. margin-top: 32rpx;
  1972. .meter-statistic-main{
  1973. display: flex;
  1974. align-items: center;
  1975. }
  1976. .sum {
  1977. .meter-name {
  1978. color: rgba(51, 51, 51, 1);
  1979. font-size: 32rpx;
  1980. margin-left: 8rpx;
  1981. font-weight: bold;
  1982. }
  1983. .icon {
  1984. margin-right: 8rpx;
  1985. img {
  1986. width: 40rpx;
  1987. height: 40rpx;
  1988. vertical-align: middle;
  1989. }
  1990. }
  1991. .meter-state {
  1992. margin-left: 8rpx;
  1993. width: 64rpx;
  1994. height: 36rpx;
  1995. line-height: 36rpx;
  1996. border-radius: 4px;
  1997. background-color: rgba(255, 255, 255, 1);
  1998. color: rgba(0, 185, 98, 1);
  1999. font-size: 22rpx;
  2000. text-align: center;
  2001. border: 1px solid rgba(0, 185, 98, 1);
  2002. }
  2003. .meter-state2 {
  2004. border: 1px solid rgba(255, 123, 0, 1);
  2005. color: rgba(255, 123, 0, 1);
  2006. }
  2007. .meter-number {
  2008. margin-left: auto;
  2009. color: rgba(51, 51, 51, 1);
  2010. font-size: 32rpx;
  2011. /deep/.u-icon--right {
  2012. margin-left: 8rpx;
  2013. }
  2014. }
  2015. }
  2016. .sum2 {
  2017. padding: 0 32rpx;
  2018. margin-top: 8rpx;
  2019. display: flex;
  2020. align-items: center;
  2021. justify-content: space-between;
  2022. .title {
  2023. color: rgba(119, 119, 119, 1);
  2024. }
  2025. .value {
  2026. color: rgba(119, 119, 119, 1);
  2027. }
  2028. }
  2029. // 一级表
  2030. .first-level {
  2031. padding-left: 16rpx;
  2032. margin-top: 20rpx;
  2033. .meter-name {
  2034. font-size: 28rpx
  2035. }
  2036. }
  2037. .first-level-list{
  2038. width: 100%;
  2039. display: flex;
  2040. align-items: center;
  2041. }
  2042. // 二级表
  2043. .second-level {
  2044. padding-left: 32rpx;
  2045. margin-top: 20rpx;
  2046. .meter-name {
  2047. font-size: 24rpx
  2048. }
  2049. }
  2050. .else-switch {
  2051. padding-left: 72rpx;
  2052. .meter-name {
  2053. font-size: 24rpx
  2054. }
  2055. .item {
  2056. margin-top: 24rpx;
  2057. }
  2058. }
  2059. }
  2060. }
  2061. /deep/.u-drawer {
  2062. z-index: 999 !important;
  2063. }
  2064. .contractList{
  2065. font-weight: bold;
  2066. .contractListClass{
  2067. display: flex;
  2068. margin-top:24rpx;
  2069. justify-content: space-between;
  2070. color: rgba(51,51,51,1);
  2071. .img{
  2072. width: 32rpx;
  2073. height: 32rpx;
  2074. margin-right: 18rpx;
  2075. }
  2076. .contractListClass1{
  2077. display: flex;
  2078. align-items: center;
  2079. }
  2080. .tenantListNum{
  2081. margin: 0 8rpx;
  2082. color:#FF7B00 ;
  2083. }
  2084. }
  2085. }
  2086. .statistics-3 {
  2087. .contractListClass{
  2088. .contractListClass1{
  2089. display: block;
  2090. .class1{
  2091. font-size: 28rpx;
  2092. color: rgba(51,51,51,1);
  2093. }
  2094. .class2{
  2095. font-size: 24rpx;
  2096. color: rgba(119,119,119,1);
  2097. }
  2098. }
  2099. .contractListClass2{
  2100. font-size: 40rpx;
  2101. color: rgba(16,16,16,1);
  2102. font-weight: bold;
  2103. display: flex;
  2104. align-items: center;
  2105. }
  2106. }
  2107. }
  2108. .statistics-4 {
  2109. }
  2110. .electronicMonitoring-title2{
  2111. margin-bottom: 16rpx;
  2112. }
  2113. .electronicMonitoring-title3{
  2114. }
  2115. .electronicMonitoring-title{
  2116. display: flex;
  2117. margin: 0px 32rpx;
  2118. justify-content: space-between;
  2119. }
  2120. .current-123{
  2121. .electronicMonitoring-title{
  2122. margin: 8rpx 0rpx 32rpx 0;
  2123. }
  2124. }
  2125. .electronicMonitoring-123{
  2126. }
  2127. </style>