gatewaynNewPage.vue 60 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395
  1. <template>
  2. <div class="gatewayNewPage">
  3. <el-row>
  4. <el-col :span="18" class="quarter">
  5. <div class="searchFn">
  6. <el-date-picker v-model="changeYear" type="year" value-format="YYYY" placeholder="选择年份"
  7. @change="changeYearFn" :style="getPickerSty()" />
  8. <div class="quarterChoose">
  9. <el-icon :size="20" color="#3B7AD1" @click="arrowLeft">
  10. <ArrowLeft />
  11. </el-icon>
  12. <span class="choose">{{seasonStr}}</span>
  13. <el-icon :size="20" color="#3B7AD1" @click="arrowRight">
  14. <ArrowRight />
  15. </el-icon>
  16. </div>
  17. </div>
  18. <div class="tableHeader">
  19. <div class="headerOne"></div>
  20. <div class="headerTwo">
  21. <div class="headerComTit">
  22. <span class="headerTwoTit">评级统计</span>
  23. </div>
  24. </div>
  25. <div class="headerThree">
  26. <div class="headerComTit">
  27. <span class="headerThreeTit">年度榜</span>
  28. </div>
  29. <div class="headerNameTit">
  30. <div class="headerNameTit_left">
  31. <span>单位名称</span>
  32. </div>
  33. <div class="headerNameTit_right">
  34. <span>级别</span>
  35. <span style="margin-left: 20px">得分</span>
  36. </div>
  37. </div>
  38. </div>
  39. <div class="headerFour">
  40. <div class="headerComTit">
  41. <span class="headerFourTit">考评排行榜</span>
  42. </div>
  43. <div class="headerNameForeTit">
  44. <div class="headerNameForeTit_left">
  45. <span>单位名称</span>
  46. </div>
  47. <div class="headerNameForeTit_right">
  48. <span>得分</span>
  49. <span>加分事项</span>
  50. <span>扣分事项</span>
  51. <span>管理加分</span>
  52. <span>管理扣分</span>
  53. <span>高于基准</span>
  54. <span>低于基准</span>
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59. <!-- v-for="it in 4" :key="it" -->
  60. <div class="tableMain" v-for="(it, index) in cupDataYearArr.section" :key="index">
  61. <div class="mainOne">
  62. <span :style="getMainOneSty()">{{it.name}}</span>
  63. </div>
  64. <div class="mainTwo">
  65. <!-- <div class="echartsNum" :style="it.echartsData.allNum < 10 ? 'left:70px': ''">
  66. {{it.echartsData.allNum}}</div> -->
  67. <div :id="'pieChart'+index" style="height: 100px;width: 100%"></div>
  68. <el-row class="mainTwoMsg" :style="getPos()">
  69. <el-col :span="12">
  70. <span class="mainTwoComColor" style="background: #F65177;"></span>
  71. <span class="mainTwoComTit">A级</span>
  72. </el-col>
  73. <el-col :span="12">
  74. <span class="mainTwoComColor" style="background: #50C14E;"></span>
  75. <span class="mainTwoComTit">B级</span>
  76. </el-col>
  77. <el-col :span="12">
  78. <span class="mainTwoComColor" style="background: #5093E1;"></span>
  79. <span class="mainTwoComTit">C级</span>
  80. </el-col>
  81. <el-col :span="12">
  82. <span class="mainTwoComColor" style="background: #9DA5BE;"></span>
  83. <span class="mainTwoComTit">D级</span>
  84. </el-col>
  85. </el-row>
  86. </div>
  87. <div class="mainThree">
  88. <div class="mainMore" @click="yearSeeMore(it.nameEn, 'year')"></div>
  89. <div style="display: flex" v-for="(item, index) in it.tableDatas" :key="index">
  90. <div class="mainThreeMsg">
  91. <img :src="item.img" alt="">
  92. <div class="msgProgress">
  93. <span
  94. :style="winPix === 1.25 || innerWidth < 1800?'font-size: 12px;width: 65%':''">{{item.company}}</span>
  95. <span>{{item.grade}}</span>
  96. <span :style="winPix === 1.25 || innerWidth < 1800?'width: 25%':''">{{item.score.toFixed(2)}}</span>
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. <div class="mainFour">
  102. <div class="mainMore" @click="yearSeeMore(it.nameEn, 'season')"></div>
  103. <div style="display: flex" v-for="(item, index) in it.section" :key="index">
  104. <div class="mainFourMsg">
  105. <span class="mainFourcompany" :style="getFooter12Sty()">{{item.company}}</span>
  106. <div class="mainFourImg">
  107. <span class="mainFourImgSpan" :style="getFooterseaSty()">{{item.score.toFixed(2)}}</span>
  108. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  109. :width="200" trigger="hover" :content="item.matter_heigh_note">
  110. <template #reference>
  111. <img :src="item.matter_heigh === 0 ? cenImg : item.matter_heigh === 1 ? topImg : botImg"
  112. alt="">
  113. </template>
  114. </el-popover>
  115. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  116. :width="200" trigger="hover" :content="item.matter_low_note">
  117. <template #reference>
  118. <img :src="item.matter_low === 0 ? cenImg : item.matter_low === 1 ? topImg : botImg"
  119. alt="">
  120. </template>
  121. </el-popover>
  122. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  123. :width="200" trigger="hover" :content="item.manage_heigh_note">
  124. <template #reference>
  125. <img :src="item.manage_heigh === 0 ? cenImg : item.manage_heigh === 1 ? topImg : botImg"
  126. alt="">
  127. </template>
  128. </el-popover>
  129. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  130. :width="200" trigger="hover" :content="item.manage_low_note">
  131. <template #reference>
  132. <img :src="item.manage_low === 0 ? cenImg : item.manage_low === 1 ? topImg : botImg"
  133. alt="">
  134. </template>
  135. </el-popover>
  136. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  137. :width="200" trigger="hover" :content="item.standard_heigh_note">
  138. <template #reference>
  139. <img :src="item.standard_heigh === 0 ? cenImg : item.standard_heigh === 1 ? topImg : botImg"
  140. alt="">
  141. </template>
  142. </el-popover>
  143. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  144. :width="200" trigger="hover" :content="item.standard_low_note">
  145. <template #reference>
  146. <img :src="item.standard_low === 0 ? cenImg : item.standard_low === 1 ? topImg : botImg"
  147. alt="">
  148. </template>
  149. </el-popover>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. <div class="tableFooter">
  156. <div class="footerOne">
  157. <span :style="getFooterOneSty()">煤电一体化</span>
  158. </div>
  159. <div class="footerTwo">
  160. <div style="display: flex" v-for="(item, index) in cupDataYearArr.integration" :key="index">
  161. <div class="footerTwoMsg">
  162. <img :src="item.img" alt="">
  163. <div class="footerProgress">
  164. <span class="footerOneSpan" :style="getFooter12Sty()">{{item.company}}</span>
  165. <el-progress :percentage="Math.floor((item.score/item.base_score)*100)"
  166. :stroke-width="5" />
  167. <span class="footerTwoSpan">{{item.grade}}</span>
  168. <span class="footerThreeSpan">{{item.score}}</span>
  169. </div>
  170. </div>
  171. </div>
  172. </div>
  173. <div class="footerThree">
  174. <div class="mainMore" @click="yearSeeMore('MDYTH', 'season')"></div>
  175. <!-- <div style="display: flex; justify-content: space-between;width: 100%"
  176. v-for="(item, index) in cupDataSeasonArr.integration" :key="index">
  177. <div class="footerThreeMsg" v-for="it in matterMsg" :key="it">
  178. <div class="footerImg">
  179. <span :style="getfooterSpan()">{{it}}</span>
  180. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  181. :width="200" trigger="hover" :content="item.matter_heigh_note">
  182. <template #reference>
  183. <img :src="item.matter_heigh === 0 ? cenImg : item.matter_heigh === 1 ? topImg : botImg"
  184. v-if="it === '加分事项'">
  185. </template>
  186. </el-popover>
  187. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  188. :width="200" trigger="hover" :content="item.matter_low_note">
  189. <template #reference>
  190. <img :src="item.matter_low === 0 ? cenImg : item.matter_low === 1 ? topImg : botImg"
  191. v-if="it === '扣分事项'">
  192. </template>
  193. </el-popover>
  194. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  195. :width="200" trigger="hover" :content="item.manage_heigh_note">
  196. <template #reference>
  197. <img :src="item.manage_heigh === 0 ? cenImg : item.manage_heigh === 1 ? topImg : botImg"
  198. v-if="it === '管理加分'">
  199. </template>
  200. </el-popover>
  201. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  202. :width="200" trigger="hover" :content="item.manage_low_note">
  203. <template #reference>
  204. <img :src="item.manage_low === 0 ? cenImg : item.manage_low === 1 ? topImg : botImg"
  205. v-if="it === '管理扣分'">
  206. </template>
  207. </el-popover>
  208. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  209. :width="200" trigger="hover" :content="item.standard_heigh_note">
  210. <template #reference>
  211. <img :src="item.standard_heigh === 0 ? cenImg : item.standard_heigh === 1 ? topImg : botImg"
  212. v-if="it === '高于基准'">
  213. </template>
  214. </el-popover>
  215. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  216. :width="200" trigger="hover" :content="item.standard_low_note">
  217. <template #reference>
  218. <img :src="item.standard_low === 0 ? cenImg : item.standard_low === 1 ? topImg : botImg"
  219. v-if="it === '低于基准'">
  220. </template>
  221. </el-popover>
  222. </div>
  223. </div>
  224. </div> -->
  225. <div style="display: flex" v-for="(item, index) in cupDataSeasonArr.integration" :key="index">
  226. <div class="mainFourMsg">
  227. <span class="mainFourcompany" :style="getFooter12Sty()">{{item.company}}</span>
  228. <div class="mainFourImg">
  229. <span class="mainFourImgSpan" :style="getFooterseaSty()">{{item.score}}</span>
  230. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  231. :width="200" trigger="hover" :content="item.matter_heigh_note">
  232. <template #reference>
  233. <img :src="item.matter_heigh === 0 ? cenImg : item.matter_heigh === 1 ? topImg : botImg"
  234. alt="">
  235. </template>
  236. </el-popover>
  237. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  238. :width="200" trigger="hover" :content="item.matter_low_note">
  239. <template #reference>
  240. <img :src="item.matter_low === 0 ? cenImg : item.matter_low === 1 ? topImg : botImg"
  241. alt="">
  242. </template>
  243. </el-popover>
  244. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  245. :width="200" trigger="hover" :content="item.manage_heigh_note">
  246. <template #reference>
  247. <img :src="item.manage_heigh === 0 ? cenImg : item.manage_heigh === 1 ? topImg : botImg"
  248. alt="">
  249. </template>
  250. </el-popover>
  251. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  252. :width="200" trigger="hover" :content="item.manage_low_note">
  253. <template #reference>
  254. <img :src="item.manage_low === 0 ? cenImg : item.manage_low === 1 ? topImg : botImg"
  255. alt="">
  256. </template>
  257. </el-popover>
  258. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  259. :width="200" trigger="hover" :content="item.standard_heigh_note">
  260. <template #reference>
  261. <img :src="item.standard_heigh === 0 ? cenImg : item.standard_heigh === 1 ? topImg : botImg"
  262. alt="">
  263. </template>
  264. </el-popover>
  265. <el-popover placement="right-start" :title="item.company +' '+ item.score"
  266. :width="200" trigger="hover" :content="item.standard_low_note">
  267. <template #reference>
  268. <img :src="item.standard_low === 0 ? cenImg : item.standard_low === 1 ? topImg : botImg"
  269. alt="">
  270. </template>
  271. </el-popover>
  272. </div>
  273. </div>
  274. </div>
  275. </div>
  276. </div>
  277. </el-col>
  278. <el-col :span="5" class="report">
  279. <div class="gateway_report">
  280. <div class="reportTit">
  281. <p :style="winPix === 1.25 || innerWidth < 1800? 'font-size: 16px;':''">通告栏</p>
  282. <el-icon :size="20" color="#3B7AD1" :style="winPix === 1.25 || innerWidth < 1800? 'left: 80px;':''"
  283. @click="watchAllNotification">
  284. <Plus />
  285. </el-icon>
  286. </div>
  287. <div class="reportMain">
  288. <div class="reportMain_msg" v-for="it in noticeData" :key="it.id">
  289. <div class="rightDiv"></div>
  290. <div class="rightTitMsg">
  291. <p @click="watchDetail(it)" style="cursor:pointer">{{it.noticeTitle}}</p>
  292. <div style="margin-top: 5px; display: flex">
  293. <span
  294. style="margin-right: 10px">{{it.createTime.substring(0, it.createTime.indexOf(' '))}}</span>
  295. <span class="rightTwoSpanMsg"
  296. :style="winPix === 1.25 || innerWidth < 1800? 'width: 50%;':''">{{it.releaseDeptName}}</span>
  297. </div>
  298. </div>
  299. </div>
  300. </div>
  301. </div>
  302. </el-col>
  303. </el-row>
  304. <year-from ref="yearFrom"></year-from>
  305. <season-from ref="seasonFrom"></season-from>
  306. <notification-detail ref="notificationDetail"></notification-detail>
  307. <notification-all-data ref="notificationAllData"></notification-all-data>
  308. </div>
  309. </template>
  310. <script>
  311. import cup1 from '../assets/getwayImg/cup1.png'
  312. import cup2 from '../assets/getwayImg/cup2.png'
  313. import cup3 from '../assets/getwayImg/cup3.png'
  314. import topImg from '../assets/getwayImg/topNewS.png'
  315. import botImg from '../assets/getwayImg/botNewS.png'
  316. import cenImg from '../assets/getwayImg/cenNew.png'
  317. import {
  318. apiGetevaluationportallist,
  319. apiGetevaluationportalhomeSeason,
  320. apiGetevaluationCircularDisplaylist
  321. } from '../api/api'
  322. import yearFrom from './gateWay/gatewayNewYearFrom.vue'
  323. import seasonFrom from './gateWay/gatewayNewSeasonFrom.vue'
  324. import notificationDetail from './gateWay/gateWayNotificationDetail.vue'
  325. import NotificationAllData from './gateWay/gateWayNotificationAllData.vue'
  326. export default {
  327. components: {
  328. yearFrom,
  329. seasonFrom,
  330. notificationDetail,
  331. NotificationAllData
  332. },
  333. data() {
  334. return {
  335. noticeData: [],
  336. cupDataYearArr: {
  337. section: [],
  338. integration: []
  339. },
  340. cupDataSeasonArr: {
  341. section: [],
  342. integration: []
  343. },
  344. cupFootMsgArr: [],
  345. matterMsg: ['加分事项', '扣分事项', '管理加分', '管理扣分', '高于基准', '低于基准'],
  346. topImg: topImg,
  347. botImg: botImg,
  348. cenImg: cenImg,
  349. changeYear: '',
  350. seasonStr: '',
  351. seasonArr: ['第一季度', '第二季度', '第三季度'],
  352. winPix: window.devicePixelRatio,
  353. innerWidth: window.innerWidth
  354. }
  355. },
  356. created() {
  357. this.cupFootMsgArr = [{
  358. level: 'A',
  359. points: '134',
  360. img: cup1,
  361. name: '大港电厂(广安津能)'
  362. },
  363. {
  364. level: 'A',
  365. points: '134',
  366. img: cup2,
  367. name: '怀安热电'
  368. }
  369. ]
  370. },
  371. mounted() {
  372. this.getYearSeasonData()
  373. this.getDeptNoticeData()
  374. },
  375. methods: {
  376. // 获取首页年份和季度数据
  377. getYearSeasonData() {
  378. let that = this
  379. apiGetevaluationportalhomeSeason().then(datas => {
  380. if (datas.success) {
  381. if (datas.data) {
  382. that.changeYear = datas.data.year
  383. if (datas.data.season === '1') {
  384. that.seasonStr = '第一季度'
  385. } else if (datas.data.season === '2') {
  386. that.seasonStr = '第二季度'
  387. } else {
  388. that.seasonStr = '第三季度'
  389. }
  390. }
  391. } else {
  392. that.changeYear = (new Date().getFullYear() - 1).toString()
  393. that.seasonStr = '第一季度'
  394. }
  395. that.getGateWayData()
  396. })
  397. },
  398. getDeptNoticeData() {
  399. let that = this
  400. let userMes = JSON.parse(window.sessionStorage.getItem('user'))
  401. if (userMes.deptId) {
  402. let params = {
  403. deptId: userMes.deptId,
  404. noticeTitle: ''
  405. }
  406. apiGetevaluationCircularDisplaylist(params).then(datas => {
  407. if (datas && datas.data) {
  408. that.noticeData = datas.data
  409. }
  410. })
  411. }
  412. },
  413. getPos() {
  414. if (this.winPix === 1.25 || this.innerWidth < 1800) {
  415. return 'top: -15%;'
  416. }
  417. },
  418. getPickerSty() {
  419. if (this.winPix === 1.25 || this.innerWidth < 1800) {
  420. return 'margin: 5px 0 0 20px;'
  421. }
  422. },
  423. getMainOneSty() {
  424. if (this.winPix === 1.25 || this.innerWidth < 1800) {
  425. return 'font-size: 14px'
  426. }
  427. },
  428. getFooterOneSty() {
  429. if (this.winPix === 1.25 || this.innerWidth < 1800) {
  430. return 'font-size: 12px;line-height: 12px;'
  431. }
  432. },
  433. getFooter12Sty() {
  434. if (this.winPix === 1.25 || this.innerWidth < 1800) {
  435. return 'font-size: 12px;width:25%'
  436. }
  437. },
  438. getFooterseaSty() {
  439. if (this.winPix === 1.25 || this.innerWidth < 1800) {
  440. return 'width:10%'
  441. }
  442. },
  443. getfooterSpan() {
  444. if (this.winPix === 1.25 || this.innerWidth < 1800) {
  445. return 'width: 3.4vw;padding: 5px 3px 0;'
  446. }
  447. },
  448. changeYearFn(val) {
  449. this.changeYear = val
  450. this.cupDataYearArr = {
  451. section: [],
  452. integration: []
  453. }
  454. this.cupDataSeasonArr = {
  455. section: [],
  456. integration: []
  457. }
  458. this.getGateWayData()
  459. },
  460. watchDetail(row) {
  461. this.$refs.notificationDetail.init(row)
  462. },
  463. watchAllNotification() {
  464. this.$refs.notificationAllData.init()
  465. },
  466. arrowLeft() {
  467. if (this.seasonStr === '第一季度') {
  468. this.seasonStr = '第三季度'
  469. } else if (this.seasonStr === '第二季度') {
  470. this.seasonStr = '第一季度'
  471. } else if (this.seasonStr === '第三季度') {
  472. this.seasonStr = '第二季度'
  473. }
  474. this.cupDataYearArr = {
  475. section: [],
  476. integration: []
  477. }
  478. this.cupDataSeasonArr = {
  479. section: [],
  480. integration: []
  481. }
  482. this.getGateWayData()
  483. },
  484. arrowRight() {
  485. if (this.seasonStr === '第一季度') {
  486. this.seasonStr = '第二季度'
  487. } else if (this.seasonStr === '第二季度') {
  488. this.seasonStr = '第三季度'
  489. } else if (this.seasonStr === '第三季度') {
  490. this.seasonStr = '第一季度'
  491. }
  492. this.cupDataYearArr = {
  493. section: [],
  494. integration: []
  495. }
  496. this.cupDataSeasonArr = {
  497. section: [],
  498. integration: []
  499. }
  500. this.getGateWayData()
  501. },
  502. // 获取首页数据
  503. getGateWayData() {
  504. let that = this
  505. let params = {
  506. binSection: '',
  507. year: that.changeYear,
  508. season: that.seasonStr === '第一季度' ? '1' : that.seasonStr === '第二季度' ? '2' : '3'
  509. }
  510. apiGetevaluationportallist(params).then(datas => {
  511. if (datas && datas.data) {
  512. let secArr = ['HD', 'SD', 'XNYFG', 'GJYW', 'MDYTH']
  513. secArr.forEach(item => {
  514. for (let i in datas.data.year) {
  515. let it = datas.data.year[i]
  516. if (item === i && i !== 'MDYTH') {
  517. let gradeA = 0
  518. let gradeB = 0
  519. let gradeC = 0
  520. let gradeD = 0
  521. let tableData = []
  522. it.forEach((iv, index) => {
  523. if (index < 3) {
  524. let obj = iv
  525. if (index === 0) {
  526. obj.img = cup1
  527. } else if (index === 1) {
  528. obj.img = cup2
  529. } else if (index === 2) {
  530. obj.img = cup3
  531. }
  532. tableData.push(iv)
  533. }
  534. if (iv.grade === 'A') {
  535. gradeA++
  536. } else if (iv.grade === 'B') {
  537. gradeB++
  538. } else if (iv.grade === 'C') {
  539. gradeC++
  540. } else if (iv.grade === 'D') {
  541. gradeD++
  542. }
  543. })
  544. let obj = {
  545. name: item === 'HD' ? '火电板块' : item === 'SD' ? '水电板块' :
  546. item === 'XNYFG' ? '新能源' : '海外业务',
  547. nameEn: item,
  548. echartsData: {
  549. allNum: it.length,
  550. echarts: [{
  551. value: gradeA,
  552. name: 'A类'
  553. },
  554. {
  555. value: gradeB,
  556. name: 'B类'
  557. },
  558. {
  559. value: gradeC,
  560. name: 'C类'
  561. },
  562. {
  563. value: gradeD,
  564. name: 'D类'
  565. }
  566. ]
  567. },
  568. tableDatas: tableData,
  569. allTableData: it,
  570. section: [],
  571. sectionAll: []
  572. }
  573. that.cupDataYearArr.section.push(obj)
  574. } else if (item === i && i === 'MDYTH') {
  575. it.forEach((iv, index) => {
  576. if (index < 2) {
  577. if (index === 0) {
  578. iv.img = cup1
  579. } else if (index === 1) {
  580. iv.img = cup2
  581. }
  582. that.cupDataYearArr.integration.push(iv)
  583. }
  584. })
  585. }
  586. }
  587. })
  588. that.cupDataYearArr.section.forEach(item => {
  589. for (let i in datas.data.season) {
  590. let it = datas.data.season[i]
  591. if (item.nameEn === i) {
  592. it.forEach((iv, index) => {
  593. if (index < 3) {
  594. item.section.push(iv)
  595. }
  596. })
  597. item.sectionAll = it
  598. }
  599. }
  600. })
  601. if (datas.data.season['MDYTH']) {
  602. datas.data.season['MDYTH'].forEach((item, index) => {
  603. if (index < 2) {
  604. that.cupDataSeasonArr.integration.push(item)
  605. }
  606. })
  607. }
  608. console.log(that.cupDataYearArr)
  609. console.log(that.cupDataSeasonArr)
  610. this.$nextTick(() => {
  611. that.getEcharts(that.cupDataYearArr.section)
  612. })
  613. }
  614. })
  615. },
  616. getEcharts(datas) {
  617. datas.forEach((item, index) => {
  618. this.getEchartsData(item.echartsData.echarts, 'pieChart' + index)
  619. })
  620. },
  621. getEchartsData(data, name) {
  622. let total = 0
  623. data.forEach(it => {
  624. total += it.value
  625. })
  626. let option = {
  627. color: ['#F65177', '#50C14E', '#5093E1', '#9DA5BE'],
  628. tooltip: {
  629. trigger: 'item'
  630. },
  631. series: [{
  632. name: '年度榜',
  633. type: 'pie',
  634. radius: ['50%', '70%'],
  635. avoidLabelOverlap: false,
  636. label: {
  637. show: true,
  638. position: 'center',
  639. formatter: () => {
  640. return total
  641. },
  642. fontSize: 16,
  643. fontWeight: 600
  644. },
  645. // emphasis: {
  646. // label: {
  647. // show: true,
  648. // fontSize: 10,
  649. // fontWeight: 'bold'
  650. // }
  651. // },
  652. labelLine: {
  653. show: false
  654. },
  655. data: data
  656. }]
  657. };
  658. // 基于准备好的dom,初始化echarts实例
  659. let dom = document.getElementById(name);
  660. dom.removeAttribute("_echarts_instance_")
  661. let myChart = this.$echarts.init(dom);
  662. myChart.setOption(option);
  663. window.addEventListener("resize", function () {
  664. myChart.resize()
  665. })
  666. },
  667. yearSeeMore(name, type) {
  668. if (type === 'year') {
  669. this.$refs.yearFrom.init(name, this.changeYear, this.seasonStr)
  670. } else {
  671. this.$refs.seasonFrom.init(name, this.changeYear, this.seasonStr)
  672. }
  673. }
  674. }
  675. }
  676. </script>
  677. <style lang="less">
  678. .gatewayNewPage {
  679. height: 93vh;
  680. width: 87vw;
  681. background: #EDEFF5;
  682. padding: 15px 20px;
  683. .quarter {
  684. background: #fff;
  685. border-radius: 10px;
  686. height: 100%;
  687. // padding-right: 15px;
  688. .searchFn {
  689. // height: 50px;
  690. height: 5vh;
  691. display: flex;
  692. border-bottom: 1px solid #E1E3EA;
  693. .el-date-editor--year {
  694. width: 130px;
  695. margin: 10px 0 0 20px;
  696. .el-input__wrapper {
  697. background: #2C7EDC;
  698. height: 30px;
  699. .el-input__prefix,
  700. .el-input__inner,
  701. .el-input__suffix {
  702. color: #fff;
  703. }
  704. }
  705. }
  706. ::-webkit-input-placeholder {
  707. color: #fff;
  708. }
  709. .quarterChoose {
  710. position: relative;
  711. left: 33%;
  712. top: 15px;
  713. width: 225px;
  714. display: flex;
  715. justify-content: space-around;
  716. .choose {
  717. position: relative;
  718. top: -1px;
  719. }
  720. .el-icon {
  721. cursor: pointer;
  722. }
  723. }
  724. }
  725. .tableHeader {
  726. display: flex;
  727. border-bottom: 1px solid #E1E3EA;
  728. // height: 75px;
  729. height: 9vh;
  730. width: 100%;
  731. .headerComTit {
  732. // height: 40px;
  733. height: 5vh;
  734. border-bottom: 1px solid #E1E3EA;
  735. span {
  736. font-size: 14px;
  737. color: #3B7AD1;
  738. }
  739. }
  740. .headerNameTit {
  741. display: flex;
  742. justify-content: space-between;
  743. padding: 8px 10px;
  744. font-size: 12px;
  745. color: #414141;
  746. .headerNameTit_left {
  747. width: 60%;
  748. }
  749. .headerNameTit_right {
  750. width: 40%;
  751. display: flex;
  752. justify-content: center;
  753. }
  754. }
  755. .headerOne {
  756. // width: 35px;
  757. width: 3%;
  758. background: #184FB4;
  759. }
  760. .headerTwo {
  761. // width: 150px;
  762. width: 12%;
  763. border-right: 1px solid #E1E3EA;
  764. .headerTwoTit {
  765. position: relative;
  766. top: 10px;
  767. left: 30%;
  768. }
  769. }
  770. .headerThree {
  771. // width: 350px;
  772. width: 28%;
  773. border-right: 1px solid #E1E3EA;
  774. .headerThreeTit {
  775. position: relative;
  776. top: 10px;
  777. left: 40%;
  778. }
  779. }
  780. .headerFour {
  781. // width: calc(100% - 535px);
  782. width: 57%;
  783. .headerFourTit {
  784. position: relative;
  785. top: 10px;
  786. left: 40%;
  787. }
  788. .headerNameForeTit {
  789. display: flex;
  790. justify-content: space-between;
  791. padding: 8px 10px;
  792. font-size: 12px;
  793. color: #414141;
  794. .headerNameForeTit_left {
  795. width: 30%;
  796. }
  797. .headerNameForeTit_right {
  798. width: 72%;
  799. display: flex;
  800. justify-content: space-between;
  801. }
  802. }
  803. }
  804. }
  805. .tableMain {
  806. display: flex;
  807. border-bottom: 1px solid #E1E3EA;
  808. // height: 150px;
  809. height: 16vh;
  810. .mainOne {
  811. // width: 35px;
  812. width: 3%;
  813. background: #184FB4;
  814. span {
  815. display: inline-block;
  816. width: 20px;
  817. margin: 0 auto;
  818. line-height: 20px;
  819. font-size: 16px;
  820. font-weight: bold;
  821. color: #fff;
  822. position: relative;
  823. top: 20%;
  824. left: 25%;
  825. }
  826. }
  827. .mainTwo {
  828. // width: 149px;
  829. width: 12%;
  830. border-right: 1px solid #E1E3EA;
  831. position: relative;
  832. @media screen and (max-width: 1540px) and (min-width: 1300px) {
  833. .mainTwoMsg {
  834. top: -15%;
  835. }
  836. }
  837. .mainTwoMsg {
  838. position: relative;
  839. .mainTwoComColor {
  840. display: inline-block;
  841. width: 6px;
  842. height: 6px;
  843. border-radius: 20px;
  844. margin-left: 15px;
  845. position: relative;
  846. top: -1px;
  847. }
  848. .mainTwoComTit {
  849. font-size: 14px;
  850. display: inline-block;
  851. margin-left: 5px;
  852. }
  853. }
  854. .echartsNum {
  855. font-size: 16px;
  856. font-weight: 600;
  857. position: absolute;
  858. top: 42px;
  859. left: 65px;
  860. }
  861. }
  862. .mainThree {
  863. // width: 350px;
  864. width: 28%;
  865. padding-top: 13px;
  866. border-right: 1px solid #E1E3EA;
  867. position: relative;
  868. .mainMore {
  869. width: 0;
  870. height: 0;
  871. border-top: 10px solid transparent;
  872. border-left: 10px solid #B6BBCB;
  873. border-right: 10px solid transparent;
  874. border-bottom: 10px solid transparent;
  875. position: absolute;
  876. top: -9px;
  877. right: -9px;
  878. transform: rotate(-45deg);
  879. cursor: pointer;
  880. }
  881. .mainThreeMsg {
  882. display: flex;
  883. margin: 0 10px;
  884. width: 100%;
  885. // height: 33px;
  886. height: 3.5vh;
  887. background: #F6F7FA;
  888. margin-bottom: 8px;
  889. padding-left: 10px;
  890. padding-top: 2px;
  891. border-radius: 5px;
  892. img {
  893. width: 20px;
  894. height: 20px;
  895. position: relative;
  896. top: 5px;
  897. margin-right: 10px;
  898. }
  899. .msgProgress {
  900. margin-top: 5px;
  901. display: flex;
  902. width: 90%;
  903. span {
  904. font-size: 14px;
  905. font-family: Microsoft YaHei;
  906. }
  907. span:nth-child(1) {
  908. display: inline-block;
  909. width: 70%;
  910. overflow: hidden;
  911. text-overflow: ellipsis;
  912. white-space: nowrap;
  913. font-weight: 400;
  914. color: #666;
  915. margin-right: 10px;
  916. }
  917. span:nth-child(2) {
  918. font-weight: 600;
  919. margin-right: 30px;
  920. color: #F65177;
  921. }
  922. span:nth-child(3) {
  923. display: inline-block;
  924. width: 20%;
  925. font-weight: 600;
  926. color: #666;
  927. }
  928. }
  929. }
  930. }
  931. .mainFour {
  932. // width: calc(100% - 536px);
  933. width: 57%;
  934. padding-top: 13px;
  935. position: relative;
  936. .mainMore {
  937. width: 0;
  938. height: 0;
  939. border-top: 10px solid transparent;
  940. border-left: 10px solid #B6BBCB;
  941. border-right: 10px solid transparent;
  942. border-bottom: 10px solid transparent;
  943. position: absolute;
  944. top: -9px;
  945. right: -9px;
  946. transform: rotate(-45deg);
  947. cursor: pointer;
  948. }
  949. .mainFourMsg {
  950. display: flex;
  951. justify-content: space-between;
  952. margin: 0 10px;
  953. width: 100%;
  954. // height: 33px;
  955. height: 3.5vh;
  956. background: #F6F7FA;
  957. margin-bottom: 8px;
  958. padding-left: 10px;
  959. padding-top: 2px;
  960. border-radius: 5px;
  961. span {
  962. font-size: 14px;
  963. font-family: Microsoft YaHei;
  964. position: relative;
  965. top: 6px;
  966. display: inline-block;
  967. }
  968. .mainFourcompany {
  969. width: 27%;
  970. overflow: hidden;
  971. text-overflow: ellipsis;
  972. white-space: nowrap;
  973. font-weight: 400;
  974. color: #666;
  975. margin-right: 17px;
  976. }
  977. .mainFourImg {
  978. display: flex;
  979. justify-content: space-between;
  980. width: 76%;
  981. .mainFourImgSpan {
  982. width: 5%;
  983. font-weight: 600;
  984. // margin-right: 15px;
  985. color: #666;
  986. }
  987. img {
  988. width: 20px;
  989. height: 20px;
  990. position: relative;
  991. top: 5px;
  992. left: -10px;
  993. // margin-right: 33px;
  994. // margin-left: 22px;
  995. }
  996. }
  997. }
  998. }
  999. }
  1000. .tableFooter {
  1001. display: flex;
  1002. // height: 100px;
  1003. height: 10vh;
  1004. @media screen and (max-width: 1540px) and (min-width: 1300px) {
  1005. .footerOne {
  1006. span {
  1007. font-size: 12px;
  1008. line-height: 12px;
  1009. }
  1010. }
  1011. }
  1012. @media screen and (max-width: 1920px) and (min-width: 1800px) {
  1013. .footerOne {
  1014. span {
  1015. font-size: 16px;
  1016. line-height: 16px;
  1017. }
  1018. }
  1019. }
  1020. .footerOne {
  1021. // width: 35px;
  1022. width: 3%;
  1023. background: #7D8297;
  1024. border-radius: 0 0 0 10px;
  1025. span {
  1026. display: inline-block;
  1027. // width: 20px;
  1028. width: 3%;
  1029. margin: 0 auto;
  1030. // line-height: 16px;
  1031. // font-size: 16px;
  1032. font-weight: bold;
  1033. color: #fff;
  1034. position: relative;
  1035. top: 10px;
  1036. left: 10px;
  1037. }
  1038. }
  1039. .footerTwo {
  1040. // width: 500px;
  1041. width: 40%;
  1042. padding-top: 10px;
  1043. border-right: 1px solid #E1E3EA;
  1044. .footerTwoMsg {
  1045. display: flex;
  1046. margin: 0 10px;
  1047. width: 100%;
  1048. // height: 33px;
  1049. height: 3.5vh;
  1050. background: #F6F7FA;
  1051. margin-bottom: 8px;
  1052. padding-left: 10px;
  1053. // padding-top: 2px;
  1054. border-radius: 5px;
  1055. img {
  1056. width: 20px;
  1057. height: 20px;
  1058. position: relative;
  1059. top: 5px;
  1060. margin-right: 10px;
  1061. }
  1062. .footerProgress {
  1063. margin-top: 5px;
  1064. display: flex;
  1065. width: 91%;
  1066. span {
  1067. font-size: 14px;
  1068. font-family: Microsoft YaHei;
  1069. }
  1070. .footerOneSpan {
  1071. display: inline-block;
  1072. width: 35%;
  1073. overflow: hidden;
  1074. text-overflow: ellipsis;
  1075. white-space: nowrap;
  1076. font-weight: 400;
  1077. color: #666;
  1078. margin-right: 10px;
  1079. }
  1080. .el-progress {
  1081. width: calc(50% - 15px);
  1082. padding-right: 15px;
  1083. position: relative;
  1084. top: -3px;
  1085. .el-progress__text {
  1086. display: none;
  1087. }
  1088. }
  1089. .footerTwoSpan {
  1090. font-weight: 600;
  1091. margin-right: 30px;
  1092. color: #F65177;
  1093. }
  1094. .footerThreeSpan {
  1095. display: inline-block;
  1096. width: 12%;
  1097. font-weight: 600;
  1098. color: #666;
  1099. }
  1100. }
  1101. }
  1102. }
  1103. .footerThree {
  1104. // width: calc(100% - 536px);
  1105. width: 57%;
  1106. padding-top: 10px;
  1107. position: relative;
  1108. .mainMore {
  1109. width: 0;
  1110. height: 0;
  1111. border-top: 10px solid transparent;
  1112. border-left: 10px solid #B6BBCB;
  1113. border-right: 10px solid transparent;
  1114. border-bottom: 10px solid transparent;
  1115. position: absolute;
  1116. top: -9px;
  1117. right: -9px;
  1118. transform: rotate(-45deg);
  1119. cursor: pointer;
  1120. }
  1121. .footerThreeMsg {
  1122. display: flex;
  1123. width: 13%;
  1124. // margin: 0 10px;
  1125. // margin-left: 10px;
  1126. padding: 0 10px;
  1127. margin-bottom: 8px;
  1128. span {
  1129. font-size: 12px;
  1130. font-weight: 400;
  1131. color: #666;
  1132. font-family: Microsoft YaHei;
  1133. }
  1134. .footerImg {
  1135. display: flex;
  1136. border-radius: 5px;
  1137. background: #F6F7FA;
  1138. span {
  1139. display: inline-block;
  1140. // width: 100%;
  1141. // width: 48px;
  1142. width: 3vw;
  1143. // height: 30px;
  1144. height: 3vh;
  1145. padding: 5px 8px 0;
  1146. position: relative;
  1147. top: 2px;
  1148. }
  1149. img {
  1150. width: 20px;
  1151. height: 20px;
  1152. position: relative;
  1153. top: 5px;
  1154. margin-right: 8px;
  1155. position: relative;
  1156. top: 7px;
  1157. }
  1158. }
  1159. }
  1160. .mainFourMsg {
  1161. display: flex;
  1162. justify-content: space-between;
  1163. margin: 0 10px;
  1164. width: 100%;
  1165. // height: 33px;
  1166. height: 3.5vh;
  1167. background: #F6F7FA;
  1168. margin-bottom: 8px;
  1169. padding-left: 10px;
  1170. padding-top: 2px;
  1171. border-radius: 5px;
  1172. span {
  1173. font-size: 14px;
  1174. font-family: Microsoft YaHei;
  1175. position: relative;
  1176. top: 6px;
  1177. display: inline-block;
  1178. }
  1179. .mainFourcompany {
  1180. width: 27%;
  1181. overflow: hidden;
  1182. text-overflow: ellipsis;
  1183. white-space: nowrap;
  1184. font-weight: 400;
  1185. color: #666;
  1186. margin-right: 17px;
  1187. }
  1188. .mainFourImg {
  1189. display: flex;
  1190. justify-content: space-between;
  1191. width: 76%;
  1192. .mainFourImgSpan {
  1193. width: 5%;
  1194. font-weight: 600;
  1195. // margin-right: 15px;
  1196. color: #666;
  1197. }
  1198. img {
  1199. width: 20px;
  1200. height: 20px;
  1201. position: relative;
  1202. top: 5px;
  1203. left: -10px;
  1204. // margin-right: 33px;
  1205. // margin-left: 22px;
  1206. }
  1207. }
  1208. }
  1209. }
  1210. }
  1211. }
  1212. .report {
  1213. margin-left: 20px;
  1214. height: 100%;
  1215. .gateway_report {
  1216. // width: 355px;
  1217. width: 100%;
  1218. background: #fff;
  1219. // margin-right: 30px;
  1220. margin-right: calc(100% - 355px);
  1221. border-radius: 10px;
  1222. padding-bottom: 10px;
  1223. border: 1px solid #D6DBEA;
  1224. .reportTit {
  1225. padding: 21px 25px 10px 25px;
  1226. // background: #E3EFFF;
  1227. border-bottom: 1px solid #D6DBEA;
  1228. border-radius: 10px 10px 0px 0px;
  1229. text-align: center;
  1230. display: flex;
  1231. justify-content: center;
  1232. p {
  1233. font-size: 18px;
  1234. font-family: Microsoft YaHei;
  1235. font-weight: bold;
  1236. color: #3B7AD1;
  1237. }
  1238. .el-icon {
  1239. position: relative;
  1240. left: 120px;
  1241. top: 3px;
  1242. cursor: pointer;
  1243. }
  1244. }
  1245. .reportMain {
  1246. height: 80vh !important;
  1247. overflow-x: hidden;
  1248. overflow-y: auto;
  1249. .reportMain_msg {
  1250. width: 100%;
  1251. display: flex;
  1252. padding: 25px 0 25px 27px;
  1253. border-bottom: 1px solid #D6DBEA;
  1254. .rightDiv {
  1255. width: 4px;
  1256. height: 40px;
  1257. // height: 5vh;
  1258. background: #4883D4;
  1259. border-radius: 2px;
  1260. position: relative;
  1261. top: 2px;
  1262. }
  1263. .rightTitMsg {
  1264. margin-left: 15px;
  1265. width: calc(100% - 20px);
  1266. p {
  1267. // width: 300px;
  1268. width: 95%;
  1269. overflow: hidden;
  1270. text-overflow: ellipsis;
  1271. white-space: nowrap;
  1272. font-size: 16px;
  1273. font-family: Microsoft YaHei;
  1274. font-weight: bold;
  1275. color: #333333;
  1276. }
  1277. span {
  1278. font-size: 14px;
  1279. font-family: Microsoft YaHei;
  1280. font-weight: 400;
  1281. color: #8991B0;
  1282. display: inline-block;
  1283. }
  1284. .rightTwoSpanMsg {
  1285. width: 60%;
  1286. overflow: hidden;
  1287. text-overflow: ellipsis;
  1288. white-space: nowrap;
  1289. }
  1290. }
  1291. }
  1292. }
  1293. }
  1294. }
  1295. }
  1296. </style>