indicatorDataQueryBase.vue 45 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647
  1. <template>
  2. <view class="rf-category informationData">
  3. <!-- 筛选 -->
  4. <view class="selectCondition">
  5. <u-dropdown ref="uDropdown" @open="open" @close="close">
  6. <!-- 指标 -->
  7. <u-dropdown-item :title="indicatorTitle">
  8. <view class="slot-content">
  9. <view style="height:1168upx;position: relative;">
  10. <!-- <connectionTree :data-list="searchList"-->
  11. <!-- children-name="child"-->
  12. <!-- labelZh="indexName"-->
  13. <!-- labelEn="indexEnName"-->
  14. <!-- :dataListMap="indicatorListMap"-->
  15. <!-- @dataListMap="indicatorListMapFun"-->
  16. <!-- @getCategory="getSource">-->
  17. <!-- </connectionTree>-->
  18. <scroll-view scroll-y="true" class="left">
  19. <view v-for="(fItem, fIndex) in searchList" :key="fItem+fIndex" class="row"
  20. :class="[fIndex===showCategoryIndex1 ?'on':'']" @tap="showCategory1(fIndex)">
  21. <view class="text" :style="$i18n.locale=='zh'?'':'text-algin:center;'">
  22. {{ $i18n.locale == 'zh' ? fItem['indexName'] : fItem['indexEnName'] }}
  23. </view>
  24. </view>
  25. </scroll-view>
  26. <block v-for="(fItem, fIndex) in searchList" :key="fItem+fIndex+'1'"
  27. @tap="showCategory1(fIndex)">
  28. <scroll-view scroll-y class="right" v-if="fIndex === showCategoryIndex1">
  29. <view v-for="(item,index) in fItem['child']" :key="'c'+index"
  30. :class="(item['child']&&item['child'].length>0)?'':'cate'">
  31. <view v-if="item['child'] && item['child'].length>0">
  32. <view :class="{'getCategory':item['child'].length>0}">
  33. {{ $i18n.locale=='zh'?item['indexName']:item['indexEnName'] }}
  34. </view>
  35. <view class="threemenu">
  36. <view v-for="(i,j) in item['child']" :key="j" class="cateText"
  37. @click="getCategory1(i,j)" :class="{'cateTextActive':i.ifClick}">
  38. {{$i18n.locale=='zh'?i['indexName']:i['indexEnName']}}
  39. </view>
  40. </view>
  41. </view>
  42. <view v-else>
  43. <view class="cateText" @click="getCategory1(item,index)"
  44. :class="{'cateTextActive':item.ifClick}">
  45. {{ $i18n.locale=='zh'?item['indexName']:item['indexEnName'] }}
  46. </view>
  47. </view>
  48. </view>
  49. </scroll-view>
  50. </block>
  51. </view>
  52. </view>
  53. </u-dropdown-item>
  54. <!-- 世界 -->
  55. <u-dropdown-item :title="worldTitle">
  56. <view class="slot-content">
  57. <view
  58. style="height:80upx;position: relative;background-color: #fff;padding: 10upx;box-sizing: border-box;">
  59. <!-- <u-button type="primary" @click="cancel" class="contry-btn" style="float: left">{{ i18n('cancel') }}</u-button>-->
  60. <u-button type="primary" @click="empty" class="contry-btn" style="float: right;">
  61. {{ $i18n.locale=='zh'?'清空':'Clear' }}
  62. </u-button>
  63. <u-button type="primary" @click="submit" class="contry-btn"
  64. style="float: right;margin-right: 40upx;">{{ i18n('submit') }}</u-button>
  65. </view>
  66. <view style="height:1088upx;position: relative;">
  67. <scroll-view scroll-y="true" class="left">
  68. <view v-for="(fItem, fIndex) in countryList" :key="fItem+fIndex" class="row"
  69. :class="[fIndex===showCategoryIndex2 ?'on':'']" @tap="showCategory2(fIndex)">
  70. <view class="text" :style="$i18n.locale=='zh'?'':'text-algin:center;'">
  71. {{ $i18n.locale == 'zh' ? fItem['label'] : fItem['label'] }}
  72. </view>
  73. </view>
  74. </scroll-view>
  75. <block v-for="(fItem, fIndex) in countryList" :key="fItem+fIndex+'1'"
  76. @tap="showCategory2(fIndex)">
  77. <scroll-view scroll-y class="right" v-if="fIndex === showCategoryIndex2">
  78. <view v-for="(item,index) in countryFilter(fItem['children'],true)"
  79. :key="'c1'+index"
  80. :class="(item['children']&&item['children'].length>0)?'':'cate'">
  81. <view>
  82. <view class="cateText" @click="getCategory2(item,index)"
  83. :class="{'cateTextActive':item.ifClick}">
  84. {{ $i18n.locale=='zh'?item['label']:item['label'] }}
  85. </view>
  86. </view>
  87. </view>
  88. <hr style="border: 1upx solid #bbb;" />
  89. <!-- 大洲 -->
  90. <view class="cate">
  91. <view>
  92. <view class="cateText" @click="getCategory2(fItem)"
  93. :class="{'cateTextActive':fItem.ifClick}">
  94. {{ fItem['label'] }}
  95. </view>
  96. </view>
  97. </view>
  98. <hr style="border: 1upx solid #bbb;" />
  99. <view v-for="(item,index) in countryFilter(fItem['children'],false)"
  100. :key="'c2'+index"
  101. :class="(item['children']&&item['children'].length>0)?'':'cate'">
  102. <view>
  103. <view class="cateText" @click="getCategory2(item,index)"
  104. :class="{'cateTextActive':item.ifClick}">
  105. {{ $i18n.locale=='zh'?item['label']:item['label'] }}
  106. </view>
  107. </view>
  108. </view>
  109. </scroll-view>
  110. </block>
  111. </view>
  112. </view>
  113. </u-dropdown-item>
  114. <!-- 时间 -->
  115. <u-dropdown-item :title="timeTitle">
  116. <view class="slot-content">
  117. <!-- 时间选择 -->
  118. <view style="height:1168upx;position:absolute;bottom: 0;">
  119. <yearSelector :show="showDateFlag" :defaultTimeValue="[2013,2020]"
  120. @getTimeValue="getTimeValue" @cancel="timecancel"></yearSelector>
  121. </view>
  122. </view>
  123. </u-dropdown-item>
  124. </u-dropdown>
  125. </view>
  126. <view style="height: calc(100% - 168upx);background: #fff;">
  127. <!-- 图表区域 -->
  128. <view class="qiun-columns">
  129. <view class="qiun-title-center">{{ indicatorTitle }}</view>
  130. <!-- 按钮区 -->
  131. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  132. <!-- 标题 -->
  133. <view class="qiun-title-dot-light">{{ chartsTitle }}</view>
  134. <!-- <view class="qiun-title-dot-light">{{ }}</view>-->
  135. <!-- 切换线/柱图 -->
  136. <view class="changechart">
  137. <text :class="canvasType==1?'uChars2':'uChars1'"
  138. @click="canvasTypeChange(1)">{{ i18n('ColumnChart') }}</text>
  139. <text :class="canvasType==2?'uChars2':'uChars1'"
  140. @click="canvasTypeChange(2)">{{ i18n('LineChart') }}</text>
  141. <!-- <text style="margin-left: 20px;" @click="exportExcel">{{ i18n('export') }}</text>-->
  142. <view class="export">
  143. <easy-select ref="easySelect" size="medium" :value="i18n('export')"
  144. :options="exportDocument" @selectOne="selectExportType"></easy-select>
  145. </view>
  146. </view>
  147. </view>
  148. <!-- <view>-->
  149. <!-- <view class="qiun-title-center">-->
  150. <!-- <text style="float: left;">{{ chartsTitle }}</text>-->
  151. <!-- <text style="position: absolute;left: 50%;transform: translateX(-50%)">{{ indicatorTitle }}</text>-->
  152. <!-- </view>-->
  153. <!-- </view>-->
  154. <!-- 图表 -->
  155. <view class="qiun-charts">
  156. <canvas v-if="canvasType==1" canvas-id="canvasColumn1" id="canvasColumn1" class="charts"
  157. @touchstart="touchColumn"></canvas>
  158. <canvas v-else-if="canvasType==2" canvas-id="canvasLineA1" id="canvasLineA1" class="charts"
  159. @touchstart="touchLineA"></canvas>
  160. </view>
  161. <!-- 重置按钮 -->
  162. <view class="reset">
  163. <u-button type="primary" @click="Reset">{{ i18n('Reset') }}</u-button>
  164. </view>
  165. </view>
  166. <RelevantIndicators :dataList="correlationList" @showRelevant="showRelevant"></RelevantIndicators>
  167. </view>
  168. <u-toast ref="uToast" />
  169. </view>
  170. </template>
  171. <script>
  172. import uCharts from '@/static/js/u-charts.js';
  173. import navbarSearch from './navbarSearch.vue'
  174. import connectionTree from './connectionTree'
  175. import yearSelector from "./yearSelector";
  176. import RelevantIndicators from './RelevantIndicators.vue'
  177. import easySelect from '@/components/easy-select/easy-select';
  178. var _self;
  179. var canvaColumn = null;
  180. var canvaLineA = null;
  181. export default {
  182. name: "indicatorDataQuery",
  183. components: {
  184. navbarSearch,
  185. connectionTree,
  186. yearSelector,
  187. RelevantIndicators,
  188. easySelect
  189. },
  190. props: {
  191. searchItem: {
  192. type: Object,
  193. default: {}
  194. },
  195. },
  196. data() {
  197. return {
  198. exportDocument: [{
  199. value: 'EXCEL',
  200. label: 'EXCEL'
  201. }, {
  202. value: 'PDF',
  203. label: 'PDF'
  204. }, ],
  205. showCategoryIndex1: 0,
  206. showCategoryIndex2: 0,
  207. dataListMap1: {},
  208. dataListMap2: [],
  209. cWidth: '',
  210. cHeight: '',
  211. /**
  212. * 搜索栏
  213. */
  214. searchList: [],
  215. selectedItem: '',
  216. showSearchIndex: '',
  217. /**
  218. * 下拉选择
  219. */
  220. indicatorTitle: '',
  221. worldTitle: '',
  222. timeTitle: '',
  223. indicatorListMap: {},
  224. // 国家地区
  225. countryList: [],
  226. continentList: [{
  227. "COUNTRY_ID": "A4E96E974CAF4406A81769A9B2D8C0AA",
  228. "COUNTRY_CN_NAME": "亚洲",
  229. "COUNTRY_EN_NAME": "ASIA"
  230. },
  231. {
  232. "COUNTRY_ID": "A213A97331144E96B8449F7E47812623",
  233. "COUNTRY_CN_NAME": "欧洲",
  234. "COUNTRY_EN_NAME": "EUROPE"
  235. },
  236. {
  237. "COUNTRY_ID": "BDD62BA9E4E7464FBD7F0613BDA83C4C",
  238. "COUNTRY_CN_NAME": "非洲",
  239. "COUNTRY_EN_NAME": "AFRICA"
  240. },
  241. {
  242. "COUNTRY_ID": "E2274D0DBF85416E88FD2829D27FDB7F",
  243. "COUNTRY_CN_NAME": "北美洲",
  244. "COUNTRY_EN_NAME": "NORTH AMERICA"
  245. },
  246. {
  247. "COUNTRY_ID": "5CAAB32FCD64433791D0781D04EC09A3",
  248. "COUNTRY_CN_NAME": "南美洲",
  249. "COUNTRY_EN_NAME": "SOUTH AMERICA"
  250. },
  251. {
  252. "COUNTRY_ID": "BCFDB5A302004E918371A7C0CD4AB38A",
  253. "COUNTRY_CN_NAME": "大洋洲",
  254. "COUNTRY_EN_NAME": "OCEANIA"
  255. }
  256. ],
  257. countryListZH: [{
  258. labelEn: 'NORTH AMERICA',
  259. children: [],
  260. label: this.$i18n.locale == 'zh' ? '北美洲' : 'NORTH AMERICA'
  261. },
  262. {
  263. labelEn: 'OCEANIA',
  264. children: [],
  265. label: this.$i18n.locale == 'zh' ? '大洋洲' : 'OCEANIA'
  266. },
  267. {
  268. labelEn: 'AFRICA',
  269. children: [],
  270. label: this.$i18n.locale == 'zh' ? '非洲' : 'AFRICA'
  271. },
  272. {
  273. labelEn: 'SOUTH AMERICA',
  274. children: [],
  275. label: this.$i18n.locale == 'zh' ? '南美洲' : 'SOUTH AMERICA'
  276. },
  277. {
  278. labelEn: 'EUROPE',
  279. children: [],
  280. label: this.$i18n.locale == 'zh' ? '欧洲' : 'EUROPE'
  281. },
  282. {
  283. label: this.$i18n.locale == 'zh' ? '亚洲' : 'ASIA',
  284. labelEn: 'ASIA',
  285. children: [],
  286. },
  287. ],
  288. countryListEN: [{
  289. labelEn: 'AFRICA',
  290. children: [],
  291. label: this.$i18n.locale == 'zh' ? '非洲' : 'AFRICA'
  292. },
  293. {
  294. label: this.$i18n.locale == 'zh' ? '亚洲' : 'ASIA',
  295. labelEn: 'ASIA',
  296. children: [],
  297. },
  298. {
  299. labelEn: 'EUROPE',
  300. children: [],
  301. label: this.$i18n.locale == 'zh' ? '欧洲' : 'EUROPE'
  302. },
  303. {
  304. labelEn: 'NORTH AMERICA',
  305. children: [],
  306. label: this.$i18n.locale == 'zh' ? '北美洲' : 'NORTH AMERICA'
  307. },
  308. {
  309. labelEn: 'OCEANIA',
  310. children: [],
  311. label: this.$i18n.locale == 'zh' ? '大洋洲' : 'OCEANIA'
  312. },
  313. {
  314. labelEn: 'SOUTH AMERICA',
  315. children: [],
  316. label: this.$i18n.locale == 'zh' ? '南美洲' : 'SOUTH AMERICA'
  317. },
  318. ],
  319. countryId: [],
  320. dataListMap: [],
  321. dataListMapTempAdd: [],
  322. dataListMapTempSub: [],
  323. countryName: [],
  324. countryNameList: [],
  325. // 日历
  326. showDateFlag: true,
  327. time: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'],
  328. timeScope: [],
  329. /**
  330. * 图表
  331. */
  332. chartsTitle: null, // 头部展示的单位
  333. activeTitle: null, // 选择的类型
  334. activeType: {
  335. indexName: '发电总量',
  336. indexEnName: 'Total power generation',
  337. source: {
  338. "IEA": {
  339. "index": {
  340. "发电总量": "132"
  341. }
  342. },
  343. "EIA": {
  344. "index": {
  345. "发电总量": "132"
  346. }
  347. }
  348. }
  349. },
  350. // 控制显示柱形或折线
  351. canvasType: 1,
  352. // charts
  353. pixelRatio: 1,
  354. // 相关
  355. correlationList: [{
  356. icon: require('../../../../static/img/infomationdata/e1.png'),
  357. "label": this.$i18n.locale == 'zh' ? '发电总量' : 'Total power generation',
  358. "item": {
  359. "indexName": "发电总量",
  360. "indexEnName": "Total power generation",
  361. "source": '{"IEA":{"index":{"发电总量":"132"}},"EIA":{"index":{"发电总量":"132"}}}'
  362. }
  363. },
  364. {
  365. icon: require('../../../../static/img/infomationdata/e1.png'),
  366. "label": this.$i18n.locale == 'zh' ? '煤炭发电总量' : 'Total coal power generation',
  367. "item": {
  368. "indexName": "煤炭发电总量",
  369. "indexEnName": "Total coal power generation",
  370. "source": '{"英国石油公司(BP)":{"index":{"煤炭发电总量":"133"}},"IEA":{"index":{"煤炭发电总量":"133"}}}'
  371. }
  372. },
  373. {
  374. icon: require('../../../../static/img/infomationdata/e1.png'),
  375. "label": this.$i18n.locale == 'zh' ? '石油发电总量' : 'Total oil power generation',
  376. "item": {
  377. "indexName": "石油发电总量",
  378. "indexEnName": "Total oil power generation",
  379. "source": '{"英国石油公司(BP)":{"index":{"石油发电总量":"134"}},"IEA":{"index":{"石油发电总量":"134"}}}'
  380. }
  381. },
  382. {
  383. icon: require('../../../../static/img/infomationdata/e1.png'),
  384. "label": this.$i18n.locale == 'zh' ? '天然气发电总量' : 'Total natural gas power generation',
  385. "item": {
  386. "indexName": "天然气发电总量",
  387. "indexEnName": "Total natural gas power generation",
  388. "source": '{"英国石油公司(BP)":{"index":{"天然气发电总量":"135"}},"IEA":{"index":{"天然气发电总量":"135"}}}'
  389. }
  390. },
  391. {
  392. icon: require('../../../../static/img/infomationdata/e1.png'),
  393. "label": this.$i18n.locale == 'zh' ? '核发电总量' : 'Total nuclear power generation',
  394. "item": {
  395. "indexName": "核发电总量",
  396. "indexEnName": "Total nuclear power generation",
  397. "source": '{"英国石油公司(BP)":{"index":{"核发电总量":"136"}},"IEA":{"index":{"核发电总量":"136"}}}'
  398. }
  399. },
  400. {
  401. icon: require('../../../../static/img/infomationdata/e1.png'),
  402. "label": this.$i18n.locale == 'zh' ? '水力发电总量' : 'Total hydro power generation',
  403. "item": {
  404. "indexName": "水力发电总量",
  405. "indexEnName": "Total hydro power generation",
  406. "source": '{"英国石油公司(BP)":{"index":{"水力发电总量":"137"}},"IEA":{"index":{"水力发电总量":"137"}},"EIA":{"index":{"水力发电总量":"137"}}}'
  407. }
  408. },
  409. {
  410. icon: require('../../../../static/img/infomationdata/e1.png'),
  411. "label": this.$i18n.locale == 'zh' ? '风发电总量' : 'Total wind power generation',
  412. "item": {
  413. "indexName": "风发电总量",
  414. "indexEnName": "Total wind power generation",
  415. "source": '{"英国石油公司(BP)":{"index":{"风发电总量":"138"}},"IEA":{"index":{"风发电总量":"138"}},"EIA":{"index":{"风发电总量":"138"}}}'
  416. }
  417. },
  418. {
  419. icon: require('../../../../static/img/infomationdata/e1.png'),
  420. "label": this.$i18n.locale == 'zh' ? '太阳能光伏发电总量' : 'Total solar PV power generation',
  421. "item": {
  422. "indexName": "太阳能光伏发电总量",
  423. "indexEnName": "Total solar PV power generation",
  424. "source": '{"IEA":{"index":{"太阳能光伏发电总量":"139"}}}'
  425. }
  426. },
  427. {
  428. icon: require('../../../../static/img/infomationdata/e1.png'),
  429. "label": this.$i18n.locale == 'zh' ? '太阳能热发电总量' : 'Total solar thermal power generation',
  430. "item": {
  431. "indexName": "太阳能热发电总量",
  432. "indexEnName": "Total solar thermal power generation",
  433. "source": '{"IEA":{"index":{"太阳能热发电总量":"140"}}}'
  434. }
  435. },
  436. {
  437. icon: require('../../../../static/img/infomationdata/e1.png'),
  438. "label": this.$i18n.locale == 'zh' ? '生物燃料发电总量' : 'Total biofuels power generation',
  439. "item": {
  440. "indexName": "生物燃料发电总量",
  441. "indexEnName": "Total biofuels power generation",
  442. "source": '{"IEA":{"index":{"生物燃料发电总量":"141"}}}'
  443. }
  444. },
  445. {
  446. icon: require('../../../../static/img/infomationdata/e1.png'),
  447. "label": this.$i18n.locale == 'zh' ? '废物垃圾发电总量' : 'Total waste power generation',
  448. "item": {
  449. "indexName": "废物垃圾发电总量",
  450. "indexEnName": "Total waste power generation",
  451. "source": '{"IEA":{"index":{"废物垃圾发电总量":"142"}}}'
  452. }
  453. },
  454. {
  455. icon: require('../../../../static/img/infomationdata/e1.png'),
  456. "label": this.$i18n.locale == 'zh' ? '废物(可再生)发电总量' :
  457. 'Total waste (renewable) power generation',
  458. "item": {
  459. "indexName": "废物(可再生)发电总量",
  460. "indexEnName": "Total waste (renewable) power generation",
  461. "source": '{"IEA":{"index":{"废物(可再生)发电总量":"143"}}}'
  462. }
  463. },
  464. {
  465. icon: require('../../../../static/img/infomationdata/e1.png'),
  466. "label": this.$i18n.locale == 'zh' ? '地热发电总量' : 'Total geothermal power generation',
  467. "item": {
  468. "indexName": "地热发电总量",
  469. "indexEnName": "Total geothermal power generation",
  470. "source": '{"IEA":{"index":{"地热发电总量":"145"}},"EIA":{"index":{"地热发电总量":"145"}}}'
  471. }
  472. },
  473. {
  474. icon: require('../../../../static/img/infomationdata/e1.png'),
  475. "label": this.$i18n.locale == 'zh' ? '潮汐发电总量' : 'Total tidal power generation',
  476. "item": {
  477. "indexName": "潮汐发电总量",
  478. "indexEnName": "Total tidal power generation",
  479. "source": '{"IEA":{"index":{"潮汐发电总量":"146"}},"EIA":{"index":{"潮汐发电总量":"146"}}}'
  480. }
  481. },
  482. {
  483. icon: require('../../../../static/img/infomationdata/e1.png'),
  484. "label": this.$i18n.locale == 'zh' ? '抽水蓄能' : 'Total pumped storage',
  485. "item": {
  486. "indexName": "抽水蓄能",
  487. "indexEnName": "Total pumped storage",
  488. "source": '{"EIA":{"index":{"抽水蓄能":"153"}},"EIA":{"index":{"抽水蓄能":"153"}}}'
  489. }
  490. },
  491. {
  492. icon: require('../../../../static/img/infomationdata/e1.png'),
  493. "label": this.$i18n.locale == 'zh' ? '其他发电量' : 'Other non-specified power generation',
  494. "item": {
  495. "indexName": "其他发电量",
  496. "indexEnName": "Other non-specified power generation",
  497. "source": '{"英国石油公司(BP)":{"index":{"其他发电量":"148"}},"IEA":{"index":{"其他发电量":"148"}}}'
  498. }
  499. }
  500. ],
  501. correlationMap: [{
  502. icon: require('../../../../static/img/infomationdata/qihou/huanjing.png'),
  503. include: [40, 42, 43, 44, 45, 47, 48]
  504. },
  505. {
  506. icon: require('../../../../static/img/infomationdata/shehuijingji/renkou.png'),
  507. include: [11, 12, 13, 14, 15, 17, 18, 19, 20]
  508. },
  509. {
  510. icon: require('../../../../static/img/infomationdata/shehuijingji/jingji.png'),
  511. include: [22, 23, 24, 25, 26, 28, 29, 30, 64, 65, 66, 67, 68, 69, 71]
  512. },
  513. {
  514. icon: require('../../../../static/img/infomationdata/shehuijingji/guotu.png'),
  515. include: [58, 59, 60, 61, 62, 63]
  516. },
  517. {
  518. icon: require('../../../../static/img/infomationdata/shehuijingji/maoyi.png'),
  519. include: [153, 154, 155, 156, 157, 158, 159, 160, 161, 162]
  520. },
  521. {
  522. icon: require('../../../../static/img/infomationdata/dianli/fadianzhuangzhi.png'),
  523. include: [82, 83, 84, 85, 86, 87, 88, 89, 90]
  524. },
  525. {
  526. icon: require('../../../../static/img/infomationdata/dianli/fadian.png'),
  527. include: [36, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 104, 105, 110, 111]
  528. },
  529. {
  530. icon: require('../../../../static/img/infomationdata/dianli/yongdian.png'),
  531. include: [37, 151]
  532. },
  533. {
  534. icon: require('../../../../static/img/infomationdata/nengyuan/shengcheng.png'),
  535. include: [52, 168]
  536. },
  537. {
  538. icon: require('../../../../static/img/infomationdata/nengyuan/xiaofei.png'),
  539. include: [53]
  540. },
  541. {
  542. icon: require('../../../../static/img/infomationdata/nengyuan/zhuanhua.png'),
  543. include: [206, 221]
  544. },
  545. {
  546. icon: require('../../../../static/img/infomationdata/jinrong/jinrong.png'),
  547. include: [75, 76, 77, 78, 79, 80, 81]
  548. },
  549. ]
  550. }
  551. },
  552. mounted() {
  553. _self = this;
  554. if (this.$i18n.locale == 'zh') {
  555. this.countryName = ['世界']
  556. } else {
  557. this.countryName = ['WORLD']
  558. }
  559. this.cWidth = uni.upx2px(750);
  560. this.cHeight = uni.upx2px(500);
  561. this.init()
  562. },
  563. watch: {
  564. searchItem: {
  565. handler(newVal) {
  566. this.getSelectedItem(this.searchItem)
  567. },
  568. deep: true
  569. },
  570. },
  571. methods: {
  572. async init() {
  573. // this.indicatorTitle = this.$i18n.locale == 'zh' ? '指标' : 'indicator'
  574. this.indicatorTitle = this.$i18n.locale == 'zh' ? '发电总量' : 'Total power generation'
  575. this.worldTitle = this.$i18n.locale == 'zh' ? '世界' : 'World'
  576. this.timeTitle = this.$i18n.locale == 'zh' ? '时间' : 'Time'
  577. await this.getServerData()
  578. await this.getCountryList()
  579. let params = {
  580. "Source": {
  581. "IEA": {
  582. "index": {
  583. '发电总量': "132"
  584. },
  585. },
  586. },
  587. "country": ["93BC2730ED0A402186F596F6A01C007E"],
  588. "time": this.time,
  589. "language": this.$i18n.locale,
  590. }
  591. await this.getInitialCategory(params);
  592. },
  593. i18n(data) {
  594. return this.$t('common.' + data);
  595. },
  596. /**
  597. * 搜索栏
  598. */
  599. // 获取搜索栏列表
  600. async getServerData() {
  601. const res = await this.$myRequest({
  602. url: '/op/geiIntegratedDataMenus/getMenu',
  603. data: {}
  604. });
  605. this.setIcon(res.data, 'child', 0)
  606. this.treeTier(res.data, 0)
  607. this.setNodeId(res.data, 'child')
  608. this.searchList = res.data;
  609. console.log(this.searchList)
  610. },
  611. treeTier(data, index) {
  612. let id = index;
  613. data.forEach((item, ind) => {
  614. if (index < 3) {
  615. this.treeTier(item.child, id + 1)
  616. } else {
  617. item.child = []
  618. }
  619. })
  620. },
  621. setNodeId(data, childrenName = 'children', id = '') {
  622. data.forEach((item, index) => {
  623. let nodeId = id ? `${id}_${index}` : `${index}`;
  624. this.$set(item, 'nodeId', nodeId)
  625. if (item[childrenName] && item[childrenName].length > 0) {
  626. this.setNodeId(item[childrenName], childrenName, nodeId)
  627. }
  628. })
  629. },
  630. setIcon(data, key, index) {
  631. let ind = index
  632. data.forEach(item => {
  633. if (index < 2) {
  634. if (item[key] && item[key].length > 0) {
  635. this.setIcon(item[key], key, ind + 1)
  636. }
  637. } else {
  638. this.$set(item, key, [])
  639. }
  640. })
  641. },
  642. // 获取搜索栏选中值
  643. getSelectedItem(e) {
  644. console.log(e)
  645. this.selectedItem = e.item.source
  646. this.indicatorTitle = this.$i18n.locale == 'zh' ? `${e.item.indexNameText}` : `${e.item.indexEnNameText}`
  647. this.activeType = {
  648. indexName: e.item.indexNameText,
  649. indexEnName: e.item.indexEnNameText,
  650. source: JSON.parse(e.item.source)
  651. }
  652. this.filtercorrelation(e)
  653. this.getCategory(null, null, this.activeType);
  654. },
  655. getSource(e) {
  656. let source = e.item.source;
  657. if (this.isJsonString(e.item.source)) {
  658. source = JSON.parse(e.item.source)
  659. }
  660. this.activeType = {
  661. indexName: e.item.indexName,
  662. indexEnName: e.item.indexEnName,
  663. source: source
  664. }
  665. if (e.item.ifClick) {
  666. this.indicatorTitle = this.$i18n.locale == 'zh' ? `${e.item.indexName}` : `${e.item.indexEnName}`
  667. } else {
  668. this.indicatorTitle = this.$i18n.locale == 'zh' ? '指标' : 'indicator'
  669. }
  670. this.$refs.uDropdown.close()
  671. this.filtercorrelation(e)
  672. this.getCategory(null, null, this.activeType);
  673. },
  674. timecancel(e) {
  675. if (e) {
  676. this.$refs.uToast.show({
  677. title: this.$i18n.locale == 'zh' ? '请正确选择时间,时间段为7年内' :
  678. 'Please select the right time period within 7 years',
  679. type: 'error',
  680. });
  681. }
  682. this.$refs.uDropdown.close()
  683. },
  684. filtercorrelation(data) {
  685. let that = this
  686. let nodeId = data.item.nodeId.split('_')
  687. let arr = this.filtercorrelationList(this.searchList, nodeId)
  688. let arrTemp = []
  689. this.getList(arr, arrTemp)
  690. if (this.$i18n.locale == 'zh') {
  691. this.correlationList = arrTemp.map(item => {
  692. let icon;
  693. that.correlationMap.forEach(it => {
  694. if (it.include.includes(Number(item.id))) {
  695. icon = it.icon
  696. }
  697. })
  698. return {
  699. icon: icon,
  700. label: item.indexName,
  701. item: item
  702. }
  703. })
  704. } else {
  705. this.correlationList = arrTemp.map(item => {
  706. let icon;
  707. that.correlationMap.forEach(it => {
  708. if (it.include.includes(Number(item.id))) {
  709. icon = it.icon
  710. }
  711. })
  712. return {
  713. icon: icon,
  714. label: item.indexEnName,
  715. item: item
  716. }
  717. })
  718. }
  719. console.log('correlationList')
  720. console.log(this.correlationList)
  721. },
  722. filtercorrelationList(data, nodeId) {
  723. let arr = data
  724. for (let i = 0; i < nodeId.length - 1; i++) {
  725. if (i) {
  726. arr = arr.child[nodeId[i]]
  727. } else {
  728. arr = arr[nodeId[i]]
  729. }
  730. }
  731. if (arr.child && arr.child.length > 0) {
  732. return arr
  733. } else {
  734. nodeId = nodeId.pop()
  735. return this.filtercorrelationList(data, nodeId)
  736. }
  737. },
  738. getList(arr, arrTemp) {
  739. arr.child.forEach(item => {
  740. if (item.child && item.child.length > 0) {
  741. this.getList(item)
  742. } else {
  743. arrTemp.push(item)
  744. }
  745. })
  746. },
  747. // 获取国家地区
  748. indicatorListMapFun(e) {
  749. if (this.indicatorListMap) {
  750. this.$set(this.indicatorListMap, 'ifClick', false)
  751. }
  752. this.indicatorListMap = e.item
  753. this.$set(e.item, 'ifClick', e.ifClick)
  754. },
  755. dataListMapFun(e) {
  756. this.$set(e.item, 'ifClick', e.ifClick)
  757. if (e.ifClick) {
  758. if (this.dataListMap.length >= 5) {
  759. this.$set(e.item, 'ifClick', false)
  760. this.$refs.uToast.show({
  761. title: this.$i18n.locale == 'zh' ? '请不要选择超过5个' : 'Please do not choose more than 5',
  762. type: 'error',
  763. });
  764. return
  765. } else {
  766. this.$set(e.item, 'ifClick', e.ifClick)
  767. }
  768. this.dataListMap.push(e.item)
  769. this.dataListMapTempAdd.push(e.item)
  770. this.dataListMapTempSub = this.dataListMapTempSub.filter(it => {
  771. return it['label'] != e.item['label']
  772. })
  773. } else {
  774. this.dataListMapTempSub.push(e.item)
  775. this.dataListMapTempAdd = this.dataListMapTempAdd.filter(it => {
  776. return it['label'] != e.item['label']
  777. })
  778. this.dataListMap = this.dataListMap.filter(it => {
  779. return it['label'] != e.item['label']
  780. })
  781. }
  782. },
  783. async getCountryList() {
  784. /*let originalCountryData = await this.$api.json('originalCountryData');
  785. let countryList = this.countryList;
  786. originalCountryData.forEach((originalItem, index) => {
  787. countryList.forEach((item, j) => {
  788. let temp = this.$i18n.locale == 'zh'?originalItem.CONTINENT_NAME:originalItem.CONTINENT_EN_NAME
  789. if (temp == item.label) {
  790. originalItem.value = originalItem.COUNTRY_ID;
  791. originalItem.label = this.$i18n.locale == 'zh' ? originalItem.COUNTRY_CN_NAME : originalItem.COUNTRY_EN_NAME;
  792. this.$set(originalItem, 'ifClick', false);
  793. item.children.push(originalItem);
  794. item.value = originalItem.COUNTRY_EN_NAME;
  795. }
  796. })
  797. });*/
  798. let en = await this.$api.json('originalCountryDataEN')
  799. let zh = await this.$api.json('originalCountryDataZH')
  800. let originalCountryData = this.$i18n.locale == 'zh' ? zh : en;
  801. let countryList = this.countryList = [{
  802. label: this.$i18n.locale == 'zh' ? '亚洲' : 'ASIA',
  803. labelEn: 'ASIA',
  804. children: [],
  805. },
  806. {
  807. labelEn: 'AFRICA',
  808. children: [],
  809. label: this.$i18n.locale == 'zh' ? '非洲' : 'AFRICA'
  810. },
  811. {
  812. labelEn: 'EUROPE',
  813. children: [],
  814. label: this.$i18n.locale == 'zh' ? '欧洲' : 'EUROPE'
  815. },
  816. {
  817. labelEn: 'NORTH AMERICA',
  818. children: [],
  819. label: this.$i18n.locale == 'zh' ? '北美洲' : 'NORTH AMERICA'
  820. },
  821. {
  822. labelEn: 'SOUTH AMERICA',
  823. children: [],
  824. label: this.$i18n.locale == 'zh' ? '南美洲' : 'SOUTH AMERICA'
  825. },
  826. {
  827. labelEn: 'OCEANIA',
  828. children: [],
  829. label: this.$i18n.locale == 'zh' ? '大洋洲' : 'OCEANIA'
  830. },
  831. ];
  832. this.continentList.forEach(originalItem => {
  833. countryList.forEach((item, j) => {
  834. let temp = this.$i18n.locale == 'zh' ? originalItem.COUNTRY_CN_NAME :
  835. originalItem.COUNTRY_EN_NAME;
  836. if (item.label == temp) {
  837. originalItem.value = originalItem.COUNTRY_ID;
  838. originalItem.label = this.$i18n.locale == 'zh' ? originalItem
  839. .COUNTRY_CN_NAME : originalItem.COUNTRY_EN_NAME;
  840. item.children.push(originalItem);
  841. item.value = originalItem.COUNTRY_EN_NAME;
  842. }
  843. })
  844. })
  845. originalCountryData.forEach((originalItem, index) => {
  846. countryList.forEach((item, j) => {
  847. let temp = this.$i18n.locale == 'zh' ? originalItem.CONTINENT_NAME :
  848. originalItem.CONTINENT_EN_NAME
  849. if (temp == item.label) {
  850. originalItem.value = originalItem.COUNTRY_ID;
  851. originalItem.label = this.$i18n.locale == 'zh' ? originalItem
  852. .COUNTRY_CN_NAME : originalItem.COUNTRY_EN_NAME;
  853. this.$set(originalItem, 'ifClick', false);
  854. item.children.push(originalItem);
  855. item.value = originalItem.COUNTRY_EN_NAME;
  856. }
  857. })
  858. });
  859. console.log(this.countryList)
  860. },
  861. getCountryId(e) {
  862. try {
  863. if (this.$i18n.locale == 'zh') {
  864. if (e.item.length > 1) {
  865. this.worldTitle = `${e.item[0].COUNTRY_CN_NAME}...`
  866. } else {
  867. this.worldTitle = `${e.item[0].COUNTRY_CN_NAME}`
  868. }
  869. } else {
  870. if (e.item.length > 1) {
  871. this.worldTitle = `${e.item[0].COUNTRY_EN_NAME}...`
  872. } else {
  873. this.worldTitle = `${e.item[0].COUNTRY_EN_NAME}`
  874. }
  875. }
  876. } catch (e) {
  877. }
  878. this.dataListMap = e.item
  879. this.countryId = []
  880. this.countryName = []
  881. this.countryNameList = []
  882. e.item.forEach(item => {
  883. if (item.ifClick) {
  884. this.countryId.push(item.COUNTRY_ID)
  885. this.countryNameList.push(item)
  886. } else {
  887. this.countryId = this.countryId.filter(it => {
  888. return it != e.COUNTRY_ID
  889. })
  890. this.countryNameList = this.countryNameList.filter(it => {
  891. return it.COUNTRY_ID != e.COUNTRY_ID
  892. })
  893. }
  894. })
  895. // function unique (arr) {
  896. // return Array.from(new Set(arr))
  897. // }
  898. // this.countryId = unique(this.countryId)
  899. this.countryName = this.countryNameList.map(item => {
  900. if (this.$i18n.locale == 'zh') {
  901. return item.COUNTRY_CN_NAME
  902. } else {
  903. return item.COUNTRY_EN_NAME
  904. }
  905. })
  906. this.getCategory(null, null, this.activeType);
  907. },
  908. isJsonString(str) {
  909. try {
  910. if (typeof JSON.parse(str) == "object") {
  911. return true;
  912. }
  913. } catch (e) {}
  914. return false;
  915. },
  916. countryFilter(array, flag) {
  917. return array.filter(item => item.ifClick === flag)
  918. },
  919. /**
  920. * 下拉选择
  921. */
  922. //下拉菜单打开触发回调
  923. open(index) {},
  924. //下拉菜单关闭触发回调
  925. close(index) {
  926. // this.$refs.uDropdown.close()
  927. this.$refs.uDropdown.highlight();
  928. if (this.$i18n.locale == 'zh') {
  929. if (this.indicatorTitle != '指标') {
  930. this.$refs.uDropdown.highlight(0)
  931. }
  932. if (this.worldTitle != '指标') {
  933. this.$refs.uDropdown.highlight(1)
  934. }
  935. if (this.timeTitle != '指标') {
  936. this.$refs.uDropdown.highlight(2)
  937. }
  938. } else {
  939. if (this.indicatorTitle != 'indicator') {
  940. this.$refs.uDropdown.highlight(0)
  941. }
  942. if (this.worldTitle != 'world') {
  943. this.$refs.uDropdown.highlight(1)
  944. }
  945. if (this.timeTitle != 'time') {
  946. this.$refs.uDropdown.highlight(2)
  947. }
  948. }
  949. if (index == 1 && (this.dataListMapTempAdd.length != 0 || this.dataListMapTempSub.length != 0)) {
  950. this.cancel()
  951. }
  952. this.$refs.uDropdown.highlight(index); // TODO 将选择后的内容持续高亮
  953. },
  954. // 日历选择
  955. getTimeValue(e) {
  956. let arr = []
  957. // if(e[0] > e[1]){
  958. // [e[0],e[1]] = [e[1],e[0]]
  959. // }
  960. for (let i = e[0]; i <= e[1]; i++) {
  961. arr.push(`${i}`)
  962. }
  963. this.timeScope = e
  964. this.time = arr
  965. this.timeTitle = `${e[0]}-${e[1]}`
  966. this.$refs.uDropdown.close()
  967. this.getCategory(null, null, this.activeType);
  968. },
  969. /**
  970. * 图表
  971. */
  972. touchColumn(e) {
  973. canvaColumn.showToolTip(e, {
  974. // textList: [],
  975. format: function(item, category) {
  976. console.log(item)
  977. console.log(category)
  978. if (typeof item.data === 'object') {
  979. return category + '\n' + item.name + ':' + item.data.value
  980. let country = item.name.split(' ')
  981. this.textList = [{
  982. text: category
  983. }];
  984. country.forEach(it => {
  985. this.textList.push({
  986. text: it
  987. })
  988. })
  989. this.textList.push({
  990. text: item.data.value
  991. })
  992. } else {
  993. return category + '\n' + item.name + ':' + item.data
  994. let country = item.name.split(' ')
  995. this.textList = [{
  996. text: category
  997. }];
  998. country.forEach(it => {
  999. this.textList.push({
  1000. text: it
  1001. })
  1002. })
  1003. this.textList.push({
  1004. text: item.data
  1005. })
  1006. }
  1007. }
  1008. });
  1009. },
  1010. touchLineA(e) {
  1011. canvaLineA.showToolTip(e, {
  1012. format: function(item, category) {
  1013. return item.data
  1014. }
  1015. })
  1016. },
  1017. // 重置按钮
  1018. Reset() {
  1019. uni.redirectTo({
  1020. url: '/pages/information/InformationData/InformationData'
  1021. });
  1022. },
  1023. // 切换图表
  1024. canvasTypeChange(num) {
  1025. this.canvasType = num;
  1026. this.getCategory(null, null, this.activeType);
  1027. },
  1028. // 初始化
  1029. async getInitialCategory(params) {
  1030. const res = await this.$myRequest({
  1031. url: '/op/geiIntegratedDataMenus/getChartData',
  1032. data: {
  1033. ...params
  1034. },
  1035. method: 'post',
  1036. type: 'payload'
  1037. });
  1038. if (res.data) {
  1039. this.canvas(res.data);
  1040. }
  1041. },
  1042. // 渲染
  1043. canvas(data) {
  1044. this.chartsTitle = data[0].unitY; // 头部展示的单位
  1045. this.activeTitle = this.$i18n.locale == 'zh' ? this.activeType.indexName : this.activeType
  1046. .indexEnName; //选择的类型
  1047. let series = [];
  1048. let seriesItem = {};
  1049. data.forEach((item, index) => {
  1050. seriesItem = {
  1051. "name": this.countryName[index],
  1052. "data": item.y
  1053. }
  1054. series.push(seriesItem);
  1055. })
  1056. let Column = {
  1057. "categories": data[0].x,
  1058. "series": series
  1059. };
  1060. if (this.canvasType == 1) {
  1061. this.showColumn('canvasColumn1', Column);
  1062. } else {
  1063. this.showLineA("canvasLineA1", Column);
  1064. }
  1065. },
  1066. showColumn(canvasId, chartData) {
  1067. canvaColumn = new uCharts({
  1068. $this: _self,
  1069. canvasId: canvasId,
  1070. type: 'column',
  1071. legend: {
  1072. show: true
  1073. },
  1074. fontSize: 11,
  1075. background: '#FFFFFF',
  1076. pixelRatio: _self.pixelRatio,
  1077. animation: true,
  1078. categories: chartData.categories,
  1079. series: chartData.series,
  1080. xAxis: {
  1081. disableGrid: true,
  1082. },
  1083. yAxis: {},
  1084. dataLabel: false,
  1085. width: _self.cWidth * _self.pixelRatio,
  1086. height: _self.cHeight * _self.pixelRatio,
  1087. extra: {
  1088. column: {
  1089. type: 'group',
  1090. width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
  1091. }
  1092. }
  1093. })
  1094. },
  1095. showLineA(canvasId, chartData) {
  1096. canvaLineA = new uCharts({
  1097. $this: _self,
  1098. canvasId: canvasId,
  1099. type: 'line',
  1100. fontSize: 11,
  1101. legend: {
  1102. show: true
  1103. },
  1104. dataLabel: false,
  1105. dataPointShape: true,
  1106. background: '#FFFFFF',
  1107. pixelRatio: _self.pixelRatio,
  1108. categories: chartData.categories,
  1109. series: chartData.series,
  1110. animation: true,
  1111. xAxis: {
  1112. type: 'grid',
  1113. gridColor: '#CCCCCC',
  1114. gridType: 'dash',
  1115. dashLength: 8
  1116. },
  1117. yAxis: {
  1118. gridType: 'dash',
  1119. gridColor: '#CCCCCC',
  1120. dashLength: 8,
  1121. splitNumber: 5,
  1122. min: 10,
  1123. max: 180,
  1124. },
  1125. width: _self.cWidth * _self.pixelRatio,
  1126. height: _self.cHeight * _self.pixelRatio,
  1127. extra: {
  1128. line: {
  1129. type: 'straight'
  1130. }
  1131. }
  1132. });
  1133. },
  1134. getCategory(item, index, i, j) {
  1135. this.activeType = i;
  1136. let source = this.activeType.source;
  1137. if (this.isJsonString(this.activeType.source)) {
  1138. source = JSON.parse(this.activeType.source)
  1139. }
  1140. let params = {
  1141. "Source": source,
  1142. "country": this.countryId.length > 0 ? this.countryId : ["93BC2730ED0A402186F596F6A01C007E"],
  1143. "time": this.time,
  1144. "language": this.$i18n.locale,
  1145. }
  1146. this.getInitialCategory(params);
  1147. this.close(index)
  1148. },
  1149. // 导出
  1150. async exportExcel() {
  1151. let _this = this
  1152. let source = this.activeType.source;
  1153. if (this.isJsonString(this.activeType.source)) {
  1154. source = JSON.parse(this.activeType.source)
  1155. }
  1156. let params = {
  1157. "Source": source,
  1158. "country": this.countryId.length > 0 ? this.countryId : ["93BC2730ED0A402186F596F6A01C007E"],
  1159. "time": this.time,
  1160. "language": this.$i18n.locale,
  1161. }
  1162. const res = await this.$myRequest({
  1163. url: '/op/geiIntegratedDataMenus/getChartDataExcl',
  1164. data: {
  1165. ...params
  1166. },
  1167. method: 'post',
  1168. // responseType: 'blob'
  1169. });
  1170. if (res.data) {
  1171. this.download(res.data)
  1172. } else {
  1173. let eg = _this.$i18n.locale == 'zh' ? '失败请重新下载' : 'Please download again if failed'
  1174. uni.showToast({
  1175. icon: 'none',
  1176. mask: true,
  1177. title: eg,
  1178. });
  1179. }
  1180. },
  1181. download(url) {
  1182. let _this = this
  1183. uni.downloadFile({
  1184. url: 'https://m.geidcp.com/api/file/pub/' + url, // TODO pub路径重复
  1185. success: (data) => {
  1186. if (data.statusCode === 200) {
  1187. //文件保存到本地
  1188. uni.saveFile({
  1189. tempFilePath: data.tempFilePath, //临时路径
  1190. success: function(res) {
  1191. let eg = _this.$i18n.locale == 'zh' ? '文件已保存:' :
  1192. 'The file is saved:'
  1193. uni.showToast({
  1194. icon: 'none',
  1195. mask: true,
  1196. title: eg + res.savedFilePath, //保存路径
  1197. duration: 3000,
  1198. });
  1199. setTimeout(() => {
  1200. //打开文档查看
  1201. uni.openDocument({
  1202. filePath: res.savedFilePath,
  1203. success: function(res) {
  1204. // console.log('打开文档成功');
  1205. }
  1206. });
  1207. }, 3000)
  1208. }
  1209. });
  1210. } else {
  1211. let eg = _this.$i18n.locale == 'zh' ? '失败请重新下载' : 'Please download again if failed'
  1212. uni.showToast({
  1213. icon: 'none',
  1214. mask: true,
  1215. title: eg,
  1216. });
  1217. }
  1218. },
  1219. fail: (err) => {
  1220. console.log(111111111)
  1221. let eg = _this.$i18n.locale == 'zh' ? '失败请重新下载' : 'Please download again if failed'
  1222. uni.showToast({
  1223. icon: 'none',
  1224. mask: true,
  1225. title: eg,
  1226. });
  1227. },
  1228. });
  1229. },
  1230. selectExportType(data) {
  1231. console.log(data)
  1232. },
  1233. /**
  1234. * 相关
  1235. */
  1236. showRelevant(e) {
  1237. this.activeType = {
  1238. indexName: e.item.indexName,
  1239. indexEnName: e.item.indexEnName,
  1240. source: JSON.parse(e.item.source)
  1241. }
  1242. this.indicatorTitle = this.$i18n.locale == 'zh' ? e.item.indexName : e.item.indexEnName
  1243. this.getCategory(null, null, this.activeType);
  1244. },
  1245. showCategory1(index) {
  1246. this.showCategoryIndex1 = index;
  1247. },
  1248. showCategory2(index) {
  1249. this.showCategoryIndex2 = index;
  1250. },
  1251. getCategory1(item, index) {
  1252. if (item['child']?.length > 0) {
  1253. return;
  1254. } else {
  1255. let ifClick = !item.ifClick
  1256. this.indicatorListMapFun({
  1257. item,
  1258. ifClick
  1259. })
  1260. }
  1261. setTimeout(() => {
  1262. this.getSource({
  1263. item: this.indicatorListMap,
  1264. index
  1265. })
  1266. }, 100)
  1267. },
  1268. getCategory2(item, index) {
  1269. if (item['children']?.length > 0) {
  1270. return;
  1271. } else {
  1272. let ifClick = !item.ifClick
  1273. this.dataListMapFun({
  1274. item,
  1275. ifClick
  1276. })
  1277. }
  1278. },
  1279. empty() {
  1280. this.dataListMap.forEach(item => {
  1281. item.ifClick = false
  1282. })
  1283. this.dataListMap = []
  1284. this.countryId = []
  1285. this.worldTitle = this.$i18n.locale == 'zh' ? '世界' : 'world'
  1286. this.countryName = this.$i18n.locale == 'zh' ? ['世界'] : ['WORLD']
  1287. this.getCategory(null, null, this.activeType);
  1288. },
  1289. cancel() {
  1290. this.dataListMapTempAdd.forEach(item => {
  1291. item.ifClick = false
  1292. this.dataListMap = this.dataListMap.filter(it => {
  1293. return it['label'] != item['label']
  1294. })
  1295. })
  1296. this.dataListMapTempSub.forEach(item => {
  1297. item.ifClick = true
  1298. this.dataListMap.push(item)
  1299. })
  1300. this.dataListMapTempAdd = []
  1301. this.dataListMapTempSub = []
  1302. },
  1303. submit() {
  1304. this.dataListMapTempAdd = []
  1305. this.dataListMapTempSub = []
  1306. setTimeout(() => {
  1307. this.getCountryId({
  1308. item: this.dataListMap
  1309. })
  1310. this.$refs.uDropdown.close()
  1311. }, 100)
  1312. }
  1313. }
  1314. }
  1315. </script>
  1316. <style scoped lang="scss">
  1317. uni-page-body {
  1318. padding-top: 0;
  1319. }
  1320. page {
  1321. background: #fff;
  1322. width: 750upx;
  1323. overflow-x: hidden;
  1324. height: 100%;
  1325. //padding-bottom: 20upx;
  1326. overflow: hidden;
  1327. }
  1328. .informationData {
  1329. height: 100%;
  1330. }
  1331. .qiun-padding {
  1332. padding: 2%;
  1333. width: 96%;
  1334. }
  1335. .qiun-wrap {
  1336. display: flex;
  1337. flex-wrap: wrap;
  1338. }
  1339. .qiun-rows {
  1340. display: flex;
  1341. flex-direction: row !important;
  1342. }
  1343. .qiun-columns {
  1344. display: flex;
  1345. flex-direction: column !important;
  1346. border-top: 20upx solid #fff
  1347. }
  1348. .qiun-common-mt {
  1349. margin-top: 10upx;
  1350. }
  1351. .qiun-bg-white {
  1352. background: #FFFFFF;
  1353. }
  1354. .qiun-title-bar {
  1355. padding: 10upx 2%;
  1356. flex-wrap: nowrap;
  1357. display: flex;
  1358. align-items: center;
  1359. justify-content: space-between;
  1360. .changechart {
  1361. display: flex;
  1362. align-items: center;
  1363. }
  1364. }
  1365. .qiun-title-dot-light {
  1366. padding-left: 10upx;
  1367. font-size: 28upx;
  1368. color: #aaa;
  1369. width: 50%;
  1370. }
  1371. .qiun-title-center {
  1372. padding-left: 10upx;
  1373. font-size: 28upx;
  1374. color: #636363;
  1375. text-align: center;
  1376. }
  1377. .qiun-charts {
  1378. width: 750upx;
  1379. height: 500upx;
  1380. background-color: #FFFFFF;
  1381. }
  1382. .charts {
  1383. width: 750upx;
  1384. height: 500upx;
  1385. background-color: #FFFFFF;
  1386. }
  1387. .qiun-charts {
  1388. width: 750upx;
  1389. height: 500upx;
  1390. background-color: #FFFFFF;
  1391. }
  1392. .uChars1 {
  1393. padding: 10upx 20upx;
  1394. background-color: #F1F2F4;
  1395. font-size: 26upx;
  1396. color: #333;
  1397. }
  1398. .uChars2 {
  1399. padding: 10upx 20upx;
  1400. background-color: #E5F0FE;
  1401. color: #1890FF;
  1402. font-size: 26upx;
  1403. }
  1404. .charts {
  1405. width: 750upx;
  1406. height: 500upx;
  1407. background-color: #FFFFFF;
  1408. }
  1409. // 重置按钮
  1410. .reset {
  1411. width: 90%;
  1412. margin: 0 auto 40upx;
  1413. .u-btn--primary {
  1414. border-radius: 60upx;
  1415. background: linear-gradient(90deg, #33AFFF, #1777FE);
  1416. font-size: 32upx;
  1417. font-weight: 600;
  1418. }
  1419. }
  1420. .u-dropdown /deep/ .u-dropdown__menu {
  1421. width: 100%;
  1422. overflow: hidden;
  1423. }
  1424. .u-dropdown /deep/ .u-dropdown__menu .u-dropdown__menu__item {
  1425. width: 33%;
  1426. background: #fff;
  1427. }
  1428. .u-dropdown /deep/ .u-dropdown__menu .u-dropdown__menu__item .u-flex {
  1429. width: 100%;
  1430. }
  1431. .u-dropdown /deep/ .u-dropdown__menu__item__text {
  1432. overflow: hidden; //超出的文本隐藏
  1433. text-overflow: ellipsis; //溢出用省略号显示
  1434. white-space: nowrap; //溢出不换行
  1435. width: 80%;
  1436. text-align: center;
  1437. }
  1438. /deep/ .u-dropdown .u-dropdown__content {
  1439. .u-dropdown__content__popup {
  1440. height: 100%;
  1441. }
  1442. }
  1443. </style>
  1444. <style scoped lang="scss">
  1445. .contry-btn {
  1446. height: 50upx;
  1447. display: inline-block;
  1448. line-height: 50upx;
  1449. }
  1450. .left,
  1451. .right {
  1452. position: absolute;
  1453. height: 100%;
  1454. top: 0;
  1455. bottom: 0upx;
  1456. }
  1457. .left {
  1458. width: 24%;
  1459. left: 0upx;
  1460. background: #F2F2F2;
  1461. }
  1462. .right {
  1463. width: 76%;
  1464. left: 24%;
  1465. background-color: #fff;
  1466. margin-left: 0;
  1467. padding: 0 20upx;
  1468. }
  1469. .row {
  1470. width: 100%;
  1471. height: 90upx;
  1472. display: flex;
  1473. align-items: center;
  1474. .text {
  1475. width: 100%;
  1476. position: relative;
  1477. font-size: 28upx;
  1478. display: flex;
  1479. justify-content: center;
  1480. color: #3c3c3c;
  1481. text-align: center;
  1482. .block {
  1483. position: absolute;
  1484. width: 0upx;
  1485. left: 0;
  1486. }
  1487. }
  1488. &.on {
  1489. height: 90upx;
  1490. background-color: #fff;
  1491. .text {
  1492. font-size: 30upx;
  1493. color: #1677FD;
  1494. .block {
  1495. width: 6upx;
  1496. height: 100%;
  1497. left: 10upx;
  1498. }
  1499. }
  1500. &:before {
  1501. content: "";
  1502. position: absolute;
  1503. left: 10upx;
  1504. width: 10upx;
  1505. height: 60upx;
  1506. background-color: rgba(22, 119, 253, 0.8);
  1507. }
  1508. }
  1509. }
  1510. .threemenu {
  1511. display: flex;
  1512. flex-wrap: wrap;
  1513. //.cateText {
  1514. // margin: 0 20upx 20upx 0;
  1515. // background: #F2F2F2;
  1516. // padding: 20upx;
  1517. // border-radius: 8upx;
  1518. // width: 46%;
  1519. // overflow: hidden;
  1520. // text-overflow: ellipsis;
  1521. // white-space: nowrap;
  1522. // text-align: center;
  1523. //
  1524. // &.active {
  1525. // border: 1px solid #1777FE;
  1526. // color: #1777FE;
  1527. // background: #fff;
  1528. // }
  1529. //}
  1530. }
  1531. .getCategory {
  1532. height: 90upx;
  1533. line-height: 90upx;
  1534. font-weight: 700;
  1535. color: #0079ef
  1536. }
  1537. .cate {
  1538. display: inline-block;
  1539. width: 240upx;
  1540. vertical-align: middle;
  1541. margin-right: 20upx;
  1542. }
  1543. .cateText {
  1544. padding: 10upx;
  1545. margin: 10upx 20upx 10upx 0;
  1546. display: inline-block;
  1547. width: 240upx;
  1548. vertical-align: middle;
  1549. background: #f1f2f3;
  1550. text-align: center;
  1551. }
  1552. .cateTextActive {
  1553. padding: 10upx;
  1554. margin: 10upx 20upx 10upx 0;
  1555. display: inline-block;
  1556. width: 240upx;
  1557. vertical-align: middle;
  1558. background-color: #0079ef;
  1559. color: #fff;
  1560. text-align: center;
  1561. }
  1562. .export {
  1563. width: 100upx;
  1564. margin-left: 20upx;
  1565. height: 60upx;
  1566. /deep/.easy-select {
  1567. width: 100% !important;
  1568. height: 90% !important;
  1569. margin-top: 5%;
  1570. border: none;
  1571. border: 0;
  1572. color: #fff;
  1573. background-color: #1777FE;
  1574. font-size: 26upx;
  1575. uni-input {
  1576. padding: 0;
  1577. text-align: center;
  1578. font-size: 26upx;
  1579. }
  1580. .easy-select-suffix {
  1581. display: none;
  1582. }
  1583. .easy-select-options {
  1584. min-width: 0 !important;
  1585. width: 100%;
  1586. }
  1587. .easy-select-options-item {
  1588. padding: 0 10upx;
  1589. }
  1590. }
  1591. }
  1592. </style>