dataCenterZWTJ.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425
  1. // pages/dataCenterZWTJ/dataCenterZWTJ.js
  2. import * as echarts from '../../ec-canvas/echarts';
  3. import {
  4. imgUrl
  5. } from "../api/request"
  6. const baseUrl = "https://www.cqna.gov.cn/data/"
  7. const request = (options) => {
  8. return new Promise((resolve, reject) => {
  9. options.url = baseUrl + options.url
  10. wx.request({
  11. // 配置 "wx.request" 请求参数
  12. ...options,
  13. header: {
  14. 'content-type': 'application/json;charset=UTF-8'
  15. },
  16. success: function (res) {
  17. // console.log("network-res=>", res);
  18. // 返回成功信息
  19. resolve(res.data)
  20. },
  21. fail: function (error) {
  22. // console.log("network-err=>", error);
  23. // 返回错误信息
  24. reject(error)
  25. }
  26. })
  27. })
  28. }
  29. Page({
  30. /**
  31. * 页面的初始数据
  32. */
  33. data: {
  34. // 图片前缀
  35. imgUrl: imgUrl,
  36. // 图表
  37. streetlinechartec: {
  38. lazyLoad: true
  39. },
  40. // 本周办件数量
  41. weekWork: {},
  42. // 本月办件数量
  43. monthWork: {},
  44. // 本年办件数量
  45. yearWork: {},
  46. // 本月部门办件排序
  47. departmentSort: {},
  48. // 事项排序
  49. matterSort: {},
  50. // 一窗通办
  51. windowList: {},
  52. // 南岸区政务服务事项总数数据
  53. matters: [],
  54. // 南岸区政务服务事项总数数据零的数量
  55. mattersZero: 0,
  56. // 实时办件详细
  57. backEndDoing: [],
  58. // 实时办件详细定时器
  59. detailTimer: ''
  60. },
  61. /**
  62. * 生命周期函数--监听页面加载
  63. */
  64. onLoad(options) {
  65. // 加载字体
  66. // wx.loadFontFace({
  67. // family: 'DOUYU',
  68. // // source: 'url("https://hui.yrslm.com:8089/douyu.ttf")',
  69. // source: 'url("https://www.cqna.gov.cn/mnazw/applet/font/douyu.ttf")',
  70. // success: function (e) {
  71. // console.log(e, '动态加载字体成功')
  72. // },
  73. // fail: function (e) {
  74. // console.log(e, '动态加载字体失败')
  75. // },
  76. // })
  77. // 获取本周办件数量
  78. this.getOfficeNumberByAreaInfo(1);
  79. // 获取本月办件数量
  80. this.getOfficeNumberByAreaInfo(2);
  81. // 获取本年办件数量
  82. this.getOfficeNumberByAreaInfo(3);
  83. // 南岸区政务服务事项总数、一窗通办、部门办件情况
  84. this.queryDepartmentItem();
  85. // 互联网申报情况图表
  86. this.barComponent = this.selectComponent('#annulus');
  87. this.init_bar();
  88. // 好差评图表
  89. // this.goodOrBad = this.selectComponent('#goodOrBad');
  90. this.init_goodOrBad();
  91. // 实时办件详细
  92. this.getListMatterRank();
  93. // 开启定时器
  94. this.startTimer();
  95. },
  96. // 根据时间类型获取办件数量
  97. getOfficeNumberByAreaInfo(timeType) {
  98. request({
  99. url: '/department/getOfficeNumberByAreaInfo?area=1&timeType=' + timeType,
  100. method: 'GET'
  101. }).then(res => {
  102. if (res.result === 'ok') {
  103. switch (timeType) {
  104. case 1:
  105. this.setData({
  106. weekWork: res.data
  107. });
  108. break;
  109. case 2:
  110. this.setData({
  111. monthWork: res.data
  112. });
  113. break;
  114. case 3:
  115. this.setData({
  116. yearWork: res.data
  117. });
  118. break;
  119. }
  120. }
  121. })
  122. },
  123. // 南岸区政务服务事项总数、一窗通办、部门办件情况
  124. queryDepartmentItem() {
  125. request({
  126. url: '/department/queryDepartmentItemRankByArea?area=1',
  127. method: 'GET'
  128. }).then(res => {
  129. this.setData({
  130. // matters: res.data.conutNumbers,
  131. matters: [0,0,0,1,3,5,5],
  132. mattersZero: 7 - res.data.listTotal.conutNumber.toString().length,
  133. departmentSort: res.data.listRank,
  134. matterSort: res.data.listMatterRank,
  135. windowList: res.data.listWeb
  136. })
  137. })
  138. },
  139. // 开启定时器
  140. startTimer() {
  141. let that = this;
  142. this.data.detailTimer = setInterval(function () {
  143. that.getListMatterRank();
  144. }, 8000)
  145. },
  146. /**
  147. * 生命周期函数--监听页面初次渲染完成
  148. */
  149. onReady() {
  150. },
  151. /**
  152. * 生命周期函数--监听页面显示
  153. */
  154. onShow() {
  155. },
  156. /**
  157. * 生命周期函数--监听页面隐藏
  158. */
  159. onHide() {
  160. },
  161. /**
  162. * 生命周期函数--监听页面卸载
  163. */
  164. onUnload() {
  165. // 清除定时器
  166. clearInterval(this.data.detailTimer);
  167. },
  168. /**
  169. * 页面相关事件处理函数--监听用户下拉动作
  170. */
  171. onPullDownRefresh() {
  172. },
  173. /**
  174. * 页面上拉触底事件的处理函数
  175. */
  176. onReachBottom() {
  177. },
  178. /**
  179. * 用户点击右上角分享
  180. */
  181. onShareAppMessage() {
  182. return {
  183. title: '政务服务数据统计分析'
  184. }
  185. },
  186. // 获取互联网申报情况图表
  187. init_bar() {
  188. this.barComponent.init((canvas, width, height, dpr) => {
  189. // 初始化图表
  190. const barChart = echarts.init(canvas, null, {
  191. width: width,
  192. height: height,
  193. devicePixelRatio: dpr
  194. });
  195. barChart.setOption(this.getScaOption());
  196. request({
  197. url: '/department/getOfficeNumberByAreaInfo?area=1&timeType=3',
  198. method: 'GET'
  199. }).then(res => {
  200. if (res.result === 'ok') {
  201. barChart.setOption({
  202. series: [{
  203. data: [{
  204. name: '网上申报',
  205. value: res.data.applicationNumberNetwork
  206. },
  207. {
  208. name: '窗口申报',
  209. value: res.data.applicationNumberWindow
  210. }
  211. ]
  212. }]
  213. });
  214. }
  215. })
  216. // 注意这里一定要返回 chart 实例,否则会影响事件处理等
  217. return barChart;
  218. });
  219. },
  220. // 好差评图表
  221. init_goodOrBad() {
  222. wx.request({
  223. url: 'https://www.cqna.gov.cn/data//goodOrbad/getGoodOrBad?area=1',
  224. method: 'GET',
  225. success: res => {
  226. res = res.data;
  227. if (res.result === 'ok') {
  228. this.setData({
  229. // 评价总量
  230. evalutionNum: res.data.totalEvaluationNumber,
  231. // 评价总量
  232. goodevalutionRate: res.data.goodEvaluationRate,
  233. // 评价总量
  234. badevalutionNum: res.data.poorEvaluationNumber,
  235. // 评价总量
  236. badevalutionRate: res.data.poorEvaluationRate
  237. })
  238. }
  239. }
  240. })
  241. // this.goodOrBad.init((canvas, width, height, dpr) => {
  242. // // 初始化图表
  243. // const barChart = echarts.init(canvas, null, {
  244. // width: width,
  245. // height: height,
  246. // devicePixelRatio: dpr
  247. // });
  248. // request({
  249. // url: '/goodOrbad/getGoodOrBadByYearAndArea?area=1',
  250. // method: 'GET'
  251. // }).then(res => {
  252. // if (res.result === 'ok') {
  253. // let temp = [];
  254. // temp.push(res.data.veryDissatisfied);
  255. // temp.push(res.data.notSatisfied);
  256. // temp.push(res.data.basicSatisfied);
  257. // temp.push(res.data.satisfied);
  258. // temp.push(res.data.great);
  259. // // 计算最大值,以及分割值
  260. // var maxValue = Math.max(...temp)
  261. // maxValue = parseInt(maxValue/10000 + 1) * 10000
  262. // var interval = maxValue / 4
  263. // barChart.setOption(this.getGoodOrBadOption(maxValue, interval));
  264. // this.setData({
  265. // evalutionNum: res.data.goodOrBad,
  266. // evalutionRate: Math.floor(res.data.good / res.data.goodOrBad * 100 * 100) / 100
  267. // })
  268. // barChart.setOption({
  269. // series: [{
  270. // data: temp
  271. // }]
  272. // })
  273. // }
  274. // })
  275. // // 注意这里一定要返回 chart 实例,否则会影响事件处理等
  276. // return barChart;
  277. // });
  278. },
  279. // 获取互联网申报情况图表
  280. getScaOption() {
  281. //请求数据
  282. var series = [{
  283. type: 'pie',
  284. radius: ['45%', '70%'],
  285. avoidLabelOverlap: false,
  286. label: {
  287. show: false,
  288. position: 'center'
  289. },
  290. emphasis: {
  291. label: {
  292. show: false
  293. }
  294. },
  295. labelLine: {
  296. show: false
  297. },
  298. data: []
  299. }];
  300. return {
  301. tooltip: {
  302. trigger: 'item',
  303. position: ['12%', '72%'],
  304. textStyle: {
  305. fontWeight: 'normal',
  306. fontSize: 12,
  307. padding: 1
  308. }
  309. },
  310. legend: "",
  311. series: series
  312. };
  313. },
  314. // 获取好差评图表
  315. getGoodOrBadOption(maxValue, interval) {
  316. //请求数据
  317. var xAxis = {
  318. type: 'value',
  319. splitNumber: 4,
  320. max: maxValue,
  321. interval: interval,
  322. axisLine: {
  323. show: true
  324. },
  325. splitLine: {
  326. interval: 0
  327. }
  328. },
  329. yAxis = {
  330. axisTick: {
  331. show: false
  332. },
  333. type: 'category',
  334. data: [
  335. '非常不满意', '不满意', '基本满意', '满意', '非常满意'
  336. ]
  337. },
  338. grid = {
  339. left: '20%',
  340. top: '5%',
  341. bottom: '20%',
  342. right: '20%'
  343. },
  344. series = [{
  345. data: [123, 200, 15220, 80333, 1073671],
  346. type: 'bar',
  347. barWidth: 15,
  348. itemStyle: {
  349. barBorderRadius: [0, 7, 7, 0],
  350. color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
  351. offset: 0,
  352. color: '#006BFD'
  353. },
  354. {
  355. offset: 1,
  356. color: '#00E9F1'
  357. }
  358. ]),
  359. },
  360. label: {
  361. show: true,
  362. position: 'right',
  363. valueAnimation: true
  364. }
  365. }]
  366. return {
  367. backgroundColor: '#FFFFFF',
  368. xAxis: xAxis,
  369. yAxis: yAxis,
  370. grid: grid,
  371. series: series,
  372. animationDelay: function (idx) {
  373. return idx * 50;
  374. },
  375. animationEasing: 'elasticOut'
  376. };
  377. },
  378. // 实时办件详细
  379. getListMatterRank() {
  380. request({
  381. url: '/department/getListMatterRank?area=1',
  382. method: 'GET'
  383. }).then(res => {
  384. if (res.result === 'ok') {
  385. this.setData({
  386. backEndDoing: res.data
  387. })
  388. }
  389. })
  390. },
  391. /**
  392. * 用户点击右上角分享
  393. */
  394. onShareAppMessage() {
  395. return {
  396. title: '办件数据'
  397. }
  398. },
  399. onShareTimeline(){
  400. return {
  401. title: '办件数据'
  402. }
  403. }
  404. })