LandExpropriate-count-money.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>征收补偿安置项目补偿金额分析</title>
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. <!-- 引入mui样式 -->
  9. <link rel="stylesheet" type="text/css" href="../css/mui.css" />
  10. <!-- 引入弹窗及选择器样式 -->
  11. <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
  12. <link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
  13. <!-- 引入app样式 -->
  14. <link rel="stylesheet" type="text/css" href="../css/app.css" />
  15. <link rel="stylesheet" href="../css/app.new.css">
  16. <!-- 引入字体 -->
  17. <link rel="stylesheet" type="text/css" href="../fonts/TTTGB-Medium.css" />
  18. <link rel="stylesheet" type="text/css" href="../fonts/font-time.css" />
  19. </head>
  20. <body>
  21. <div class="jt-count-echarts-panel">
  22. <div class="jt-title">征收土地镇街分类资金统计</div>
  23. <div class="jt-content" id="divCountClassifyFund_SSXZ"></div>
  24. <div class="jt-title">征收土地地类金额统计</div>
  25. <div class="jt-content" id="divCountDL_SSXZ"></div>
  26. <div class="jt-title">涉及建设用地地类金额占比分析</div>
  27. <div class="jt-content" id="divCountPie_JSYD"></div>
  28. <div class="jt-title">
  29. <button class="jt-select" id="selSSXZ" value="义堂镇">义堂镇</button>
  30. 征收项目地类占比
  31. </div>
  32. <div class="jt-content" id="divCountBarXMMC_SSXZ"></div>
  33. </div>
  34. </body>
  35. </html>
  36. <!-- 引入mui脚本 -->
  37. <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
  38. <!-- 引入弹窗及选择器脚本 -->
  39. <script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
  40. <script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
  41. <!-- 引入jQuery脚本 -->
  42. <script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
  43. <!-- 引入通用脚本 -->
  44. <script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
  45. <!-- 进入webview脚本 -->
  46. <script src="../js/webview.js" type="text/javascript" charset="utf-8"></script>
  47. <!-- 引入存储脚本 -->
  48. <script src="../js/save.js" type="text/javascript" charset="utf-8"></script>
  49. <!-- 引入ajax脚本 -->
  50. <script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
  51. <!-- 图表脚本 -->
  52. <script src="../js/ECharts/echarts.js" type="text/javascript" charset="utf-8"></script>
  53. <!-- 自定义图表脚本 -->
  54. <script src="../js/CRECharts.js" type="text/javascript" charset="utf-8"></script>
  55. <!-- 本页独有脚本 -->
  56. <script type="text/javascript">
  57. /* mui初始化 */
  58. mui.init();
  59. /* 页面尺寸 */
  60. var pageSize = getPageSize();
  61. /* 初始化完成 */
  62. plusInit(function() {
  63. /* 重置图表的尺寸 */
  64. echartsSizeInit();
  65. /* 绑定选择器 */
  66. bindListenerToSelectButton('selSSXZ', 'map_gzq_grid', 'xzqmc', onSelectSSXZ);
  67. /* 统计 */
  68. countJeClassifyFund_SSXZ();
  69. });
  70. /**
  71. * 所属镇街选择器选择事件
  72. * @param {string} text 文本
  73. * @param {string} value 值
  74. */
  75. function onSelectSSXZ(text, value) {
  76. countLeXMMC_SSXZ(text);
  77. }
  78. /**
  79. * 乡镇分类资金统计
  80. */
  81. function countJeClassifyFund_SSXZ() {
  82. sendAjax({
  83. url: 'appZdClassifyFundByTown',
  84. waitMessage: '分析中...',
  85. data: {},
  86. success: function(resData) {
  87. updateClassifyFund_SSXZ(resData);
  88. countLeDL_SSXZ();
  89. },
  90. error: function(err) {
  91. muiAlertError(err);
  92. }
  93. })
  94. }
  95. /**
  96. * 征收土地地类占比分析
  97. */
  98. function countLeDL_SSXZ() {
  99. var iData = {
  100. type: 'dl',
  101. cntType: 'money',
  102. }
  103. sendAjax({
  104. url: 'appZdAnalysis',
  105. waitMessage: '分析中...',
  106. data: iData,
  107. success: function(resData) {
  108. updateCountDL_SSXZ(resData);
  109. countLe_JSYD();
  110. },
  111. error: function(err) {
  112. muiAlertError(err);
  113. }
  114. })
  115. }
  116. /**
  117. * 建设用地地类占比分析
  118. */
  119. function countLe_JSYD() {
  120. var iData = {
  121. type: 'jsyd',
  122. cntType: 'money',
  123. }
  124. sendAjax({
  125. url: 'appZdAnalysis',
  126. waitMessage: '分析中...',
  127. data: iData,
  128. success: function(resData) {
  129. countLeXMMC_SSXZ('义堂镇');
  130. updateCount_JSYD(resData);
  131. },
  132. error: function(err) {
  133. muiAlertError(err);
  134. }
  135. })
  136. }
  137. /**
  138. * 分析区域内征地项目的占地情况
  139. * @param {string} areaName 区域名称
  140. */
  141. function countLeXMMC_SSXZ(areaName) {
  142. var iData = {
  143. areaName: areaName,
  144. cntType: 'money',
  145. }
  146. sendAjax({
  147. url: 'appZdAnalysisItem',
  148. waitMessage: '分析中...',
  149. data: iData,
  150. success: function(resData) {
  151. updateCountXMMC_SSXZ(resData);
  152. },
  153. error: function(err) {
  154. muiAlertError(err);
  155. },
  156. nodata: function(msg) {
  157. muiAlert(msg, "敬告");
  158. }
  159. })
  160. }
  161. /* 统计组件 */
  162. var countBarDL_SSXZ = undefined;
  163. var countBarXMMC_SSXZ = undefined;
  164. var countPie_JSYD = undefined;
  165. let CountClassifyFund_SSXZ = undefined;
  166. /**
  167. * 释放图表资源
  168. * @param {Object} obj 图表控件
  169. */
  170. function eChartsDispose(obj) {
  171. if (obj != null && obj != "" && obj != undefined) obj.dispose();
  172. }
  173. /**
  174. * 征收土地地类占比分析
  175. * @param {JSON} data 数据集
  176. */
  177. function updateCountDL_SSXZ(data) {
  178. var dataZoomX = undefined;
  179. if (pageSize.width <= PageSize.smartSize) dataZoomX = true;
  180. /* 标签 */
  181. var labels = [];
  182. /* 数据集 */
  183. var datas = [];
  184. /* 单位集合 */
  185. var units = [];
  186. for (var i in data) {
  187. var item = data[i];
  188. labels.push(item.dlName);
  189. for (var idx in item.areaList) {
  190. var areaItem = item.areaList[idx];
  191. var dataExists = false;
  192. for (var dataIdx in datas) {
  193. var dataItem = datas[dataIdx];
  194. if (dataItem.name == areaItem.selCode) {
  195. dataItem.data.push(areaItem.selName);
  196. dataExists = true;
  197. break;
  198. }
  199. }
  200. if (!dataExists) {
  201. datas.push({
  202. name: areaItem.selCode,
  203. data: [areaItem.selName],
  204. });
  205. units.push('万元');
  206. }
  207. }
  208. }
  209. /* 展示柱状图 */
  210. var bbsData = {
  211. title: '分析',
  212. labels: labels,
  213. datas: datas,
  214. xrotate: 0,
  215. gridBottom: 80,
  216. gridTop: 60,
  217. dataZoomX: dataZoomX,
  218. zoomEndValue: '0',
  219. }
  220. eChartsDispose(countBarDL_SSXZ)
  221. countBarDL_SSXZ = new CrCharts({
  222. domId: 'divCountDL_SSXZ',
  223. labelColor: 'rgb(255,255,255)',
  224. legendTextColor: 'rgb(255,255,255)',
  225. xAxisLineColor: 'rgba(255,255,255,1.0)',
  226. yAxisLineColor: 'rgb(133, 215, 253)',
  227. splitLineColor: 'rgba(255,255,255,0.3)',
  228. xAxisLabel: {
  229. color: "rgba(255,255,255,1.0)",
  230. fontSize: 12,
  231. fontFamily: 'TTTGB-Medium',
  232. interval: 0,
  233. },
  234. yAxisLabel: {
  235. color: "rgb(133, 215, 253)",
  236. fontSize: 12,
  237. fontFamily: 'TTTGB-Medium',
  238. interval: 0,
  239. }
  240. });
  241. countBarDL_SSXZ.createVerticalBar(bbsData, 60, false, units);
  242. }
  243. /**
  244. * 征收土地乡镇分类资金统计
  245. * @param {JSON} data 数据集
  246. */
  247. function updateClassifyFund_SSXZ(data) {
  248. var dataZoomX = undefined;
  249. if (pageSize.width <= PageSize.smartSize) dataZoomX = true;
  250. dataZoomX = true;
  251. /* 标签 */
  252. var labels = [];
  253. /* 数据集 */
  254. var datas = [];
  255. /* 单位集合 */
  256. var units = [];
  257. for (var i in data) {
  258. var item = data[i];
  259. labels.push(item.dlName);
  260. for (var idx in item.areaList) {
  261. var areaItem = item.areaList[idx];
  262. var dataExists = false;
  263. for (var dataIdx in datas) {
  264. var dataItem = datas[dataIdx];
  265. if (dataItem.name == areaItem.selCode) {
  266. dataItem.data.push(areaItem.selName);
  267. dataExists = true;
  268. break;
  269. }
  270. }
  271. if (!dataExists) {
  272. datas.push({
  273. name: areaItem.selCode,
  274. data: [areaItem.selName],
  275. });
  276. units.push('万元');
  277. }
  278. }
  279. }
  280. /* 展示柱状图 */
  281. var bbsData = {
  282. title: '分析',
  283. labels: labels,
  284. datas: datas,
  285. xrotate: 45,
  286. gridBottom: 120,
  287. gridTop: 60,
  288. dataZoomX: dataZoomX,
  289. zoomEndValue: 5,
  290. }
  291. eChartsDispose(CountClassifyFund_SSXZ)
  292. CountClassifyFund_SSXZ = new CrCharts({
  293. domId: 'divCountClassifyFund_SSXZ',
  294. labelColor: 'rgb(255,255,255)',
  295. legendTextColor: 'rgb(255,255,255)',
  296. xAxisLineColor: 'rgba(255,255,255,1.0)',
  297. yAxisLineColor: 'rgb(133, 215, 253)',
  298. splitLineColor: 'rgba(255,255,255,0.3)',
  299. xAxisLabel: {
  300. color: "rgba(255,255,255,1.0)",
  301. fontSize: 12,
  302. fontFamily: 'TTTGB-Medium',
  303. interval: 0,
  304. },
  305. yAxisLabel: {
  306. color: "rgb(133, 215, 253)",
  307. fontSize: 12,
  308. fontFamily: 'TTTGB-Medium',
  309. interval: 0,
  310. }
  311. });
  312. CountClassifyFund_SSXZ.createVerticalBar(bbsData, 60, false, units);
  313. }
  314. /**
  315. * 征收项目建设用地地类占比分析
  316. * @param {JSON} data 数据集
  317. */
  318. function updateCount_JSYD(data) {
  319. var countPieData = [];
  320. for (var i in data) {
  321. countPieData.push({
  322. value: data[i].selName,
  323. name: data[i].selCode,
  324. });
  325. }
  326. var pieRadiusWidth = '65%';
  327. if (pageSize.width <= PageSize.smartSize) {
  328. pieRadiusWidth = '55%';
  329. }
  330. eChartsDispose(countPie_JSYD);
  331. countPie_JSYD = new CrCharts({
  332. domId: 'divCountPie_JSYD',
  333. });
  334. countPie_JSYD.createPie({
  335. data: countPieData,
  336. isAria: false,
  337. lineColor: 'rgb(133, 215, 253)',
  338. labelColor: 'rgb(255,255,255)',
  339. perLabelColor: 'rgb(129,181,218)',
  340. radius: [5, pieRadiusWidth],
  341. minAngle: 20,
  342. roseType: false,
  343. unit: '万元',
  344. }, '征地补偿金额');
  345. }
  346. /**
  347. * 区域征地项目占地分析结果展示
  348. * @param {string} resData 数据集
  349. */
  350. function updateCountXMMC_SSXZ(resData) {
  351. var labels = [];
  352. var datas = [];
  353. var units = [];
  354. for (var i in resData) {
  355. var item = resData[i];
  356. labels.push(item.dlName);
  357. for (var dIdx in item.areaList) {
  358. var itemData = item.areaList[dIdx];
  359. var isExists = false;
  360. for (var idx in datas) {
  361. var data = datas[idx];
  362. if (data.name == itemData.selCode) {
  363. data.values.push(itemData.selName);
  364. isExists = true;
  365. break;
  366. }
  367. }
  368. if (!isExists) {
  369. datas.push({
  370. name: itemData.selCode,
  371. values: [itemData.selName],
  372. // color: ['rgb(255,255,0)', 'rgb(255,0,0)'],
  373. lblPosition: 'right',
  374. })
  375. units.push('万元');
  376. }
  377. }
  378. }
  379. eChartsDispose(countBarXMMC_SSXZ);
  380. countBarXMMC_SSXZ = new CrCharts({
  381. domId: 'divCountBarXMMC_SSXZ',
  382. labelColor: 'rgb(255,255,255)',
  383. legendTextColor: 'rgb(255,255,255)',
  384. xAxisLineColor: 'rgba(255,255,255,1.0)',
  385. yAxisLineColor: 'rgb(133, 215, 253)',
  386. splitLineColor: 'rgba(255,255,255,0.3)',
  387. xAxisLabel: {
  388. color: "rgba(255,255,255,1.0)",
  389. fontSize: 12,
  390. fontFamily: 'TTTGB-Medium',
  391. interval: 0,
  392. },
  393. yAxisLabel: {
  394. color: "rgb(133, 215, 253)",
  395. fontSize: 12,
  396. fontFamily: 'TTTGB-Medium',
  397. interval: 0,
  398. },
  399. });
  400. countBarXMMC_SSXZ.createHorizontalBar({
  401. labels: labels,
  402. datas: datas,
  403. enabledAria: false,
  404. dataZoomY: true,
  405. grid: {
  406. left: 100,
  407. top: 30,
  408. bottom: 40,
  409. right: 60
  410. }
  411. }, units);
  412. }
  413. </script>