InformationData2.vue 44 KB

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