Aucune description

second_index.js 58KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822
  1. // 关键词
  2. let keyidArr = [];
  3. let keyid = 0;
  4. let starKeyId = 0;
  5. let keyname = '';
  6. let keylegend = [];
  7. let nameK = ''
  8. let reg = /\w\d+$/;
  9. $('.backKey_icon').click(function () {
  10. for (let i = 0; i < keyidArr.length; i++) {
  11. if (keyidArr[i].id == keyid) {
  12. console.log(keyidArr[i - 1].id)
  13. $('.keyWordTitle').text(keyidArr[i - 1].name + '问题分类')
  14. $('.head_title').text(keyidArr[i - 1].name + '关键字数据分析')
  15. keyWordTable(keyidArr[i - 1].id);
  16. keyidArr.pop(keyidArr[i].id)
  17. keyid = keyidArr[i - 1].id
  18. }
  19. }
  20. })
  21. $('.closeKey_icon').click(function () {
  22. $('.bulletFrame').hide();
  23. $('.bulletFrameT').hide();
  24. if ($('.bulletFrame').css('display') == 'none') {
  25. $('.body').css('opacity', '1')
  26. }
  27. if ($('.bulletFrameT').css('display') == 'none') {
  28. $('.body').css('opacity', '1')
  29. }
  30. keyidArr = [];
  31. keyid = 0
  32. })
  33. function getKeyClass(id, classId, con) {
  34. $('.bulletFrame').show();
  35. $('.secondLevel_keyWord').show();
  36. $('.secondLevel_keyWord').siblings().hide()
  37. if ($('.bulletFrame').css('display') == 'block') {
  38. $('.body').css('opacity', '0.4')
  39. }
  40. laydate.render({
  41. elem: '#keyDate',
  42. type: 'datetime',
  43. calendar: true,
  44. done: function (value) {
  45. $('.keyWordTitle').text(keyidArr[0].name + '问题分类')
  46. $('.head_title').text(keyidArr[0].name + '关键字数据分析')
  47. keyWordTable(keyidArr[0].id, keyidArr[0].name, value);
  48. }
  49. });
  50. if (classId == '1') {
  51. workTable(id);
  52. } else {
  53. getTimes('.statisticsTime')
  54. keyidArr.push({
  55. name: con,
  56. id: id
  57. })
  58. keyid = id
  59. $('.keyWordTitle').text(con + '问题分类')
  60. $('.head_title').text(con + '关键字数据分析')
  61. keyWordTable(id, con, getNowTime());
  62. }
  63. }
  64. function keyWordTable(id, con, value) {
  65. console.log(value)
  66. var $tableLeft = $('#keyWordlist');
  67. $tableLeft.bootstrapTable('destroy');
  68. //初始化表格,动态从服务器加载数据
  69. $tableLeft.bootstrapTable({
  70. method: "get", //使用get请求到服务器获取数据
  71. url: huayi.config.callcenter_url + "/InfoNew/GetKeyCountByNow",
  72. striped: false, //表格显示条纹
  73. pagination: false, //启动分页
  74. pageSize: 12, //每页显示的记录数
  75. pageNumber: 1, //当前第几页
  76. fixedColumns: false,
  77. fixedNumber: 3,
  78. pageList: [5, 10, 20, 50, 100], //记录数可选列表
  79. search: false, //是否启用查询
  80. showColumns: false, //显示下拉框勾选要显示的列
  81. showRefresh: false, //显示刷新按钮
  82. sidePagination: "server", //表示服务端请求
  83. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  84. //设置为limit可以获取limit, offset, search, sort, order
  85. queryParamsType: "undefined",
  86. queryParams: function queryParams(params) { //设置查询参数
  87. var param = {
  88. pid: id,
  89. token: $.cookie("token"),
  90. timetype:keyCountDataType,
  91. date: value
  92. }
  93. return param
  94. },
  95. onLoadSuccess: function (data) { //加载成功时执行
  96. const newDataL = {};
  97. const piData = [];
  98. newDataL.state = data.state;
  99. newDataL.message = data.message;
  100. newDataL.rows = data.data.Date;
  101. data.data.Date.forEach(function (v, n) {
  102. piData.push({
  103. value: v.Count,
  104. name: v.KeyName.replace(reg, '')
  105. })
  106. })
  107. var nameArray = piData.map(item => {
  108. return item.name
  109. })
  110. keyword_chart('keywordPie', nameArray, piData, con);
  111. $('.total').text(data.data.Total)
  112. $('.classTotal').text(data.data.ClaseeCount)
  113. $('.prot').text(data.data.ClassTotal)
  114. $tableLeft.bootstrapTable('load', newDataL);
  115. },
  116. onLoadError: function () { //加载失败时执行
  117. layer.msg("加载数据失败", {
  118. time: 1500,
  119. icon: 2
  120. });
  121. }
  122. });
  123. }
  124. function keyword_chart(dom, nameArray, piData, con) {
  125. let keywordPieChart = echarts.init(document.getElementById(dom));
  126. let keywordNum = [];
  127. let keywordName = [];
  128. var rich = {
  129. percent: {
  130. color: "#FFF",
  131. align: 'right',
  132. fontSize: 15,
  133. fontWeight: '500',
  134. //padding: [0, 5]
  135. }
  136. }
  137. nameArray.forEach(function (v, n) {
  138. keywordNum.push({
  139. num: Number(v.substr(v.length - 2, 2)),
  140. value: v
  141. })
  142. })
  143. let max;
  144. for (let i = 0; i < keywordNum.length; i++) {
  145. for (let j = i; j < keywordNum.length; j++) {
  146. if (keywordNum[i].num < keywordNum[j].num) {
  147. max = keywordNum[j];
  148. keywordNum[j] = keywordNum[i];
  149. keywordNum[i] = max;
  150. }
  151. }
  152. }
  153. keywordNum.forEach(function (v, n) {
  154. keywordName.push(v.value.replace(reg, ''));
  155. })
  156. console.log(keywordName)
  157. keywordName.forEach(function (v, n) {
  158. if (v.length > 20) {
  159. keylegend = [{
  160. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  161. orient: 'vertical',
  162. top: '610',
  163. // data: keywordName.slice(0, 6),
  164. data: keywordName.slice(0, 1),
  165. width: 28,
  166. height: 25,
  167. textStyle: {
  168. color: '#fff',
  169. padding: [0, 5],
  170. fontSize: 15
  171. },
  172. padding: [5, 10]
  173. }, {
  174. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  175. orient: 'vertical',
  176. top: '620',
  177. // data: keywordName.slice(6, 12),
  178. data: keywordName.slice(1, 2),
  179. width: 28,
  180. height: 25,
  181. itemGap: 20,
  182. textStyle: {
  183. color: '#fff',
  184. padding: [0, 5],
  185. fontSize: 15
  186. },
  187. padding: [10, 10]
  188. }, {
  189. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  190. orient: 'vertical',
  191. top: '630',
  192. // data: keywordName.slice(12, keywordName.length),
  193. data: keywordName.slice(2, 3),
  194. width: 28,
  195. height: 25,
  196. textStyle: {
  197. color: '#fff',
  198. padding: [0, 5],
  199. fontSize: 15
  200. },
  201. padding: [20, 10]
  202. },
  203. {
  204. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  205. orient: 'vertical',
  206. top: '630',
  207. // data: keywordName.slice(12, keywordName.length),
  208. data: keywordName.slice(3, 4),
  209. width: 28,
  210. height: 25,
  211. textStyle: {
  212. color: '#fff',
  213. padding: [0, 5],
  214. fontSize: 15
  215. },
  216. padding: [40, 10]
  217. }, {
  218. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  219. orient: 'vertical',
  220. top: '630',
  221. // data: keywordName.slice(12, keywordName.length),
  222. data: keywordName.slice(4, 5),
  223. width: 28,
  224. height: 25,
  225. textStyle: {
  226. color: '#fff',
  227. padding: [0, 5],
  228. fontSize: 15
  229. },
  230. padding: [60, 10]
  231. }, {
  232. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  233. orient: 'vertical',
  234. top: '630',
  235. // data: keywordName.slice(12, keywordName.length),
  236. data: keywordName.slice(5, 6),
  237. width: 28,
  238. height: 25,
  239. textStyle: {
  240. color: '#fff',
  241. padding: [0, 5],
  242. fontSize: 15
  243. },
  244. padding: [80, 10]
  245. }, {
  246. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  247. orient: 'vertical',
  248. top: '630',
  249. // data: keywordName.slice(12, keywordName.length),
  250. data: keywordName.slice(6, keywordName.length),
  251. width: 28,
  252. height: 25,
  253. textStyle: {
  254. color: '#fff',
  255. padding: [0, 5],
  256. fontSize: 15
  257. },
  258. padding: [100, 10]
  259. }]
  260. } else {
  261. if (con == '营商管理03') {
  262. keylegend = [{
  263. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  264. orient: 'vertical',
  265. top: '610',
  266. // data: keywordName.slice(0, 6),
  267. data: keywordName.slice(0, 6),
  268. width: 28,
  269. height: 25,
  270. textStyle: {
  271. color: '#fff',
  272. padding: [0, 5],
  273. fontSize: 15
  274. },
  275. padding: [15, 10]
  276. }, {
  277. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  278. orient: 'vertical',
  279. top: '620',
  280. // data: keywordName.slice(6, 12),
  281. data: keywordName.slice(6, 12),
  282. width: 28,
  283. height: 25,
  284. itemGap: 20,
  285. textStyle: {
  286. color: '#fff',
  287. padding: [0, 5],
  288. fontSize: 15
  289. },
  290. padding: [40, 10]
  291. }, {
  292. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  293. orient: 'vertical',
  294. top: '630',
  295. // data: keywordName.slice(12, keywordName.length),
  296. data: keywordName.slice(12, 18),
  297. width: 28,
  298. height: 25,
  299. textStyle: {
  300. color: '#fff',
  301. padding: [0, 5],
  302. fontSize: 15
  303. },
  304. padding: [65, 10]
  305. },
  306. {
  307. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  308. orient: 'vertical',
  309. top: '630',
  310. // data: keywordName.slice(12, keywordName.length),
  311. data: keywordName.slice(18, keywordName.length),
  312. width: 30,
  313. height: 25,
  314. textStyle: {
  315. color: '#fff',
  316. padding: [0, 5],
  317. fontSize: 15
  318. },
  319. padding: [90, 10]
  320. }
  321. ]
  322. } else {
  323. keylegend = [{
  324. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  325. orient: 'vertical',
  326. top: '610',
  327. // data: keywordName.slice(0, 6),
  328. data: keywordName.slice(0, 5),
  329. width: 28,
  330. height: 25,
  331. textStyle: {
  332. color: '#fff',
  333. padding: [0, 5],
  334. fontSize: 15
  335. },
  336. padding: [15, 10]
  337. }, {
  338. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  339. orient: 'vertical',
  340. top: '620',
  341. // data: keywordName.slice(6, 12),
  342. data: keywordName.slice(5, 10),
  343. width: 28,
  344. height: 25,
  345. itemGap: 20,
  346. textStyle: {
  347. color: '#fff',
  348. padding: [0, 5],
  349. fontSize: 15
  350. },
  351. padding: [40, 10]
  352. }, {
  353. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  354. orient: 'vertical',
  355. top: '630',
  356. // data: keywordName.slice(12, keywordName.length),
  357. data: keywordName.slice(10, 15),
  358. width: 28,
  359. height: 25,
  360. textStyle: {
  361. color: '#fff',
  362. padding: [0, 5],
  363. fontSize: 15
  364. },
  365. padding: [65, 10]
  366. },
  367. {
  368. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  369. orient: 'vertical',
  370. top: '630',
  371. // data: keywordName.slice(12, keywordName.length),
  372. data: keywordName.slice(15, keywordName.length),
  373. width: 30,
  374. height: 25,
  375. textStyle: {
  376. color: '#fff',
  377. padding: [0, 5],
  378. fontSize: 15
  379. },
  380. padding: [90, 10]
  381. }
  382. ]
  383. }
  384. }
  385. })
  386. keywordName.reverse();
  387. option = {
  388. legend: keylegend,
  389. color: ['#008aff', '#88ffb7', '#00bba7', '#fddb6a', '#fb6a76',
  390. '#ff0000', '#e5a0ff', '#9b56ff', '#8200f0', '#68f6ff',
  391. '#FF8352', '#E271DE', '#F8456B', '#3751E6', '#FFC722',
  392. '#00BFA5', "#EAEA26"
  393. ],
  394. series: [{
  395. name: '访问来源',
  396. type: 'pie',
  397. radius: '58%',
  398. data: piData,
  399. emphasis: {
  400. itemStyle: {
  401. shadowBlur: 10,
  402. shadowOffsetX: 0,
  403. shadowColor: 'rgba(0, 0, 0, 0.5)'
  404. }
  405. },
  406. label: {
  407. normal: {
  408. show: false,
  409. formatter: function (params) {
  410. if (params.name.length > 9 && params.name.length < 35) {
  411. return params.name.substring(0, 20) + '\n' + params.name.substring(20, params.name.length) + ':' + params.value;
  412. } else if (params.name.length > 35) {
  413. return params.name.substring(0, 18) + '\n' + params.name.substring(18, 36) + '\n' + params.name.substring(36, params.name.length) + ':' + params.value;
  414. } else {
  415. return params.name + ':' + params.value;
  416. }
  417. }
  418. },
  419. emphasis: {
  420. // position: 'left',
  421. show: true,
  422. textStyle: {
  423. color: '#fff',
  424. fontSize: '14',
  425. fontWeight: 'bold'
  426. },
  427. labelLine: {
  428. show: true
  429. },
  430. length: 1
  431. }
  432. }
  433. }]
  434. };
  435. keywordPieChart.setOption(option);
  436. }
  437. function Code(val, row, index) {
  438. let num = index + 1
  439. return "<span style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:50px;text-align: center;'>" +
  440. num + "</span>"
  441. // return index + 1;
  442. }
  443. function Code(val, row, index) {
  444. let num = index + 1
  445. return "<span style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:50px;text-align: center;'>" +
  446. num + "</span>"
  447. // return index + 1;
  448. }
  449. function getKeyName(v, r) {
  450. for (let i = 0; i < keyidArr.length; i++) {
  451. if (keyidArr[i].id == keyid) {
  452. if (keyidArr[0].id == keyid) {
  453. console.log('1111', keyname)
  454. $('.backKey_icon').css('display', 'none')
  455. } else {
  456. $('.backKey_icon').css('display', 'block')
  457. }
  458. }
  459. }
  460. return '<span class="workAct" onclick="getKeyClass(\'' + r.KeyId + '\',\'' + r.ClassCount + '\',\'' + r.KeyName +
  461. '\')">' + v + '</span>'
  462. }
  463. function getKeyBili(v) {
  464. return "<div style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:70px;margin:0 auto;'>" +
  465. v + "</div>"
  466. }
  467. function getKeyNum(v) {
  468. return "<div style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:29px;margin:0 auto;'>" +
  469. v + "</div>"
  470. }
  471. //办理时长
  472. function timeSecTable(dom, type) {
  473. getTimes('.dataTT')
  474. var $tableLeft = $(dom);
  475. $tableLeft.bootstrapTable('destroy');
  476. //初始化表格,动态从服务器加载数据
  477. $tableLeft.bootstrapTable({
  478. method: "get", //使用get请求到服务器获取数据
  479. url: huayi.config.callcenter_url + "/InfoNew/GetDeptDayTime",
  480. striped: false, //表格显示条纹
  481. pagination: false, //启动分页
  482. pageSize: 12, //每页显示的记录数
  483. pageNumber: 1, //当前第几页
  484. fixedColumns: false,
  485. fixedNumber: 3,
  486. pageList: [5, 10, 20, 50, 100], //记录数可选列表
  487. search: false, //是否启用查询
  488. showColumns: false, //显示下拉框勾选要显示的列
  489. showRefresh: false, //显示刷新按钮
  490. sidePagination: "server", //表示服务端请求
  491. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  492. //设置为limit可以获取limit, offset, search, sort, order
  493. queryParamsType: "undefined",
  494. queryParams: function queryParams(params) { //设置查询参数
  495. var param = {
  496. token: $.cookie("token"),
  497. type: type
  498. };
  499. return param;
  500. },
  501. onLoadSuccess: function (data) { //加载成功时执行
  502. // data.reverse();
  503. const newDataL = {};
  504. newDataL.state = "success";
  505. newDataL.message = "加载成功";
  506. newDataL.rows = data;
  507. $tableLeft.bootstrapTable('load', newDataL);
  508. },
  509. onLoadError: function () { //加载失败时执行
  510. layer.msg("加载数据失败", {
  511. time: 1500,
  512. icon: 2
  513. });
  514. }
  515. });
  516. }
  517. //办理时长表格操作
  518. function getCompanyName(v, r) {
  519. return '<span class="workAct" onclick="workTable(\'' + '' + '\',\'' + r.deptid + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + ''
  520. + '\',\'' + '' + '\',\'' + 0 + '\')">' + v + '</span>'
  521. }
  522. function trend(val, row) {
  523. var str = '';
  524. if (row.trend.substring(0, 1) == '-' && row.trend.length > 1) {
  525. str = '<ul class="tool_downs">' +
  526. '<li><img src="./image/second/down_arrow.png" alt="" style="vertical-align: middle;padding-right: 3px;">' + row
  527. .trend.substring(1) + '<li>' +
  528. '</ul>';
  529. } else if (row.trend.substring(0, 1) != '-' && row.trend.length > 1) {
  530. str = '<ul class="tool_downs">' +
  531. '<li><img src="./image/second/up_arrow.png" alt="" style="vertical-align: middle;padding-right: 3px;">' + row
  532. .trend + '<li>' +
  533. '</ul>';
  534. } else {
  535. str = '<ul class="tool_downs">' +
  536. '<li>' + row.trend + '<li>' +
  537. '</ul>';
  538. }
  539. return str
  540. }
  541. //绩效考核
  542. function testSecTable(id, type, group, value) {
  543. var $tableLeft = $(id);
  544. $tableLeft.bootstrapTable('destroy');
  545. //初始化表格,动态从服务器加载数据
  546. $tableLeft.bootstrapTable({
  547. method: "get", //使用get请求到服务器获取数据
  548. url: huayi.config.callcenter_url + "/InfoNew/GetDeptDeptAchievements",
  549. striped: false, //表格显示条纹
  550. pagination: false, //启动分页
  551. pageSize: 12, //每页显示的记录数
  552. pageNumber: 1, //当前第几页
  553. fixedColumns: false,
  554. fixedNumber: 3,
  555. pageList: [5, 10, 20, 50, 100], //记录数可选列表
  556. search: false, //是否启用查询
  557. showColumns: false, //显示下拉框勾选要显示的列
  558. showRefresh: false, //显示刷新按钮
  559. sidePagination: "server", //表示服务端请求
  560. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  561. //设置为limit可以获取limit, offset, search, sort, order
  562. queryParamsType: "undefined",
  563. queryParams: function queryParams(params) { //设置查询参数
  564. return {
  565. token: $.cookie("token"),
  566. type: type,
  567. starttime: value && value.split(' ~ ')[0],
  568. endtime: value && value.split(' ~ ')[1]
  569. }
  570. },
  571. onLoadSuccess: function (data) { //加载成功时执行
  572. const newDataL = {};
  573. const typeData1 = [];
  574. const typeData2 = [];
  575. var max;
  576. for (var i = 0; i < data.length; i++) {
  577. for (var j = i; j < data.length; j++) {
  578. if (data[i].total < data[j].total) {
  579. max = data[j];
  580. data[j] = data[i];
  581. data[i] = max;
  582. }
  583. }
  584. }
  585. if (type == 1) {
  586. data.forEach(function (v, n) {
  587. if (v.workordrcount <= 10) {
  588. typeData1.push(v)
  589. } else {
  590. typeData2.push(v)
  591. }
  592. })
  593. if (group == 0) {
  594. newDataL.rows = typeData2;
  595. } else if (group == 1) {
  596. newDataL.rows = typeData1;
  597. }
  598. } else {
  599. newDataL.rows = data;
  600. }
  601. newDataL.state = "success";
  602. newDataL.message = "加载成功";
  603. console.log(newDataL)
  604. $tableLeft.bootstrapTable('load', newDataL);
  605. },
  606. onLoadError: function () { //加载失败时执行
  607. layer.msg("加载数据失败", {
  608. time: 1500,
  609. icon: 2
  610. });
  611. }
  612. });
  613. }
  614. //绩效考核表格操作
  615. function getRank(val, row, index) {
  616. return index + 1
  617. }
  618. //工单数量
  619. function getWorkOrders(val, row) {
  620. return '<span class="workAct" onclick="workTable(\'' + '' + '\',\'' + row.deptid + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + ''
  621. + '\',\'' + '' + '\',\'' + 0 + '\',\'' + '' + '\',\'' + '' + '\',\'' + 3 + '\')">' + val + '</span>'
  622. }
  623. //不满意数量
  624. function getDissatisfied(val, row) {
  625. return '<span class="workAct" onclick="workTable(\'' + '' + '\',\'' + row.deptid + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + ''
  626. + '\',\'' + '' + '\',\'' + 0 + '\',\'' + '' + '\',\'' + '' + '\',\'' + 4 + '\')">' + val + '</span>'
  627. }
  628. //超期数量
  629. function getOverdue(val, row) {
  630. return '<span class="workAct" onclick="workTable(\'' + '' + '\',\'' + row.deptid + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + ''
  631. + '\',\'' + '' + '\',\'' + 0 + '\',\'' + '' + '\',\'' + '' + '\',\'' + 5 + '\')">' + val + '</span>'
  632. }
  633. function getBackWorkOrders(val, row) {
  634. return '<span class="workAct" onclick="backWorkTable(\'' + row.deptid + '\',\'' + 0 + '\')">' + val + '</span>'
  635. }
  636. function getBacCkWorkOrders(val, row) {
  637. return '<span class="workAct" onclick="backWorkTable(\'' + row.deptid + '\',\'' + 1 + '\')">' + val + '</span>'
  638. }
  639. function awaySort(objArr, key) {
  640. let result = objArr.slice(0);
  641. return result.sort((a, b) => b[key] -a[key] );
  642. }
  643. //热线整合受理情况&重大事件
  644. function getHonelineChart2(data, dom) {
  645. data = awaySort(data,"landArea")
  646. data.length = 10
  647. let hotline2 = echarts.init(document.getElementById(dom));
  648. const CubeLeft = echarts.graphic.extendShape({
  649. shape: {
  650. x: 0,
  651. y: 0
  652. },
  653. buildPath: function (ctx, shape) {
  654. const xAxisPoint = shape.xAxisPoint
  655. const c0 = [shape.x, shape.y]
  656. const c1 = [shape.x - 20, shape.y - 4]
  657. const c2 = [xAxisPoint[0] - 20, xAxisPoint[1] - 4]
  658. const c3 = [xAxisPoint[0], xAxisPoint[1]]
  659. ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1])
  660. .closePath()
  661. }
  662. })
  663. const CubeRight = echarts.graphic.extendShape({
  664. shape: {
  665. x: 0,
  666. y: 0
  667. },
  668. buildPath: function (ctx, shape) {
  669. const xAxisPoint = shape.xAxisPoint
  670. const c1 = [shape.x, shape.y]
  671. const c2 = [xAxisPoint[0], xAxisPoint[1]]
  672. const c3 = [xAxisPoint[0] + 8, xAxisPoint[1] - 4]
  673. const c4 = [shape.x + 8, shape.y - 4]
  674. ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1])
  675. .closePath()
  676. }
  677. })
  678. const CubeTop = echarts.graphic.extendShape({
  679. shape: {
  680. x: 0,
  681. y: 0
  682. },
  683. buildPath: function (ctx, shape) {
  684. // 逆时针 角 y 负数向上 X 负数向左
  685. const c1 = [shape.x, shape.y]
  686. const c2 = [shape.x + 8, shape.y - 4]
  687. const c3 = [shape.x - 11, shape.y - 8]
  688. const c4 = [shape.x - 20, shape.y - 4]
  689. ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1])
  690. .closePath()
  691. }
  692. })
  693. echarts.graphic.registerShape('CubeLeft', CubeLeft)
  694. echarts.graphic.registerShape('CubeRight', CubeRight)
  695. echarts.graphic.registerShape('CubeTop', CubeTop)
  696. let MAX = []
  697. let VALUE = []
  698. let LEV = []
  699. let chartData = [].concat(data)
  700. chartData.forEach(item => {
  701. VALUE.push(item.landArea)
  702. LEV.push(item.level)
  703. })
  704. let maxItem = [].concat(VALUE).sort((a, b) => b - a)[0]
  705. let SUM = 0
  706. for (let item of VALUE) {
  707. SUM += item
  708. MAX.push(maxItem)
  709. }
  710. option = {
  711. tooltip: {
  712. trigger: 'item',
  713. textStyle: {
  714. color: '#ffe400',
  715. fontSize: '16',
  716. fontWeight: '500'
  717. },
  718. position: 'top',
  719. backgroundColor: 'rgba(250,250,250,0)',
  720. transitionDuration: 0.4,
  721. formatter: function (params) {
  722. return '<div style="background-image: url(image/second/reminder_box2.png);width:50px;height:33px;line-height:30px;background-size: 100% 100%;text-align:center;">' +
  723. VALUE[params.dataIndex] + '</div>';
  724. }
  725. },
  726. grid: {
  727. right: "5%",
  728. top: "20%",
  729. left: "5%",
  730. bottom: "5%",
  731. containLabel: true
  732. },
  733. xAxis: {
  734. type: 'category',
  735. data: LEV,
  736. axisLine: {
  737. show: true,
  738. lineStyle: {
  739. color: '#687e89'
  740. }
  741. },
  742. offset: 10,
  743. axisTick: {
  744. show: false
  745. },
  746. axisLabel: {
  747. fontSize: 14,
  748. rotate: -45,
  749. color: '#fff'
  750. }
  751. },
  752. yAxis: [{
  753. nameTextStyle: {
  754. color: "#f4f5f5",
  755. padding: [0, 0, 10, -5],
  756. fontSize: 16
  757. },
  758. axisLabel: {
  759. color: "#f4f5f5",
  760. fontSize: 16
  761. },
  762. axisTick: {
  763. lineStyle: {
  764. color: "#687f8a",
  765. width: 1
  766. },
  767. show: true
  768. },
  769. splitLine: {
  770. show: true,
  771. lineStyle: {
  772. color: "#687f8a",
  773. type: "dashed"
  774. }
  775. },
  776. axisLine: {
  777. lineStyle: {
  778. color: "#687f8a",
  779. width: 1,
  780. type: "solid"
  781. },
  782. show: true,
  783. // "symbol":['none', 'arrow'],
  784. symbol: ['none',
  785. 'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3, 20'
  786. ],
  787. symbolOffset: 5,
  788. symbolSize: [35, 38],
  789. },
  790. name: "条"
  791. }],
  792. series: [{
  793. type: 'custom',
  794. renderItem: (params, api) => {
  795. const location = api.coord([api.value(0), api.value(1)])
  796. return {
  797. type: 'group',
  798. children: [{
  799. type: 'CubeLeft',
  800. shape: {
  801. api,
  802. xValue: api.value(0),
  803. yValue: api.value(1),
  804. x: location[0],
  805. y: location[1],
  806. xAxisPoint: api.coord([api.value(0), 0])
  807. },
  808. style: {
  809. fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  810. offset: 0,
  811. color: '#3fffea'
  812. }, {
  813. offset: 1,
  814. color: '#007eff'
  815. }])
  816. },
  817. },
  818. {
  819. type: 'CubeRight',
  820. shape: {
  821. api,
  822. xValue: api.value(0),
  823. yValue: api.value(1),
  824. x: location[0],
  825. y: location[1],
  826. xAxisPoint: api.coord([api.value(0), 0])
  827. },
  828. style: {
  829. fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  830. offset: 0,
  831. color: '#2fbeaf' // 顶部
  832. }, {
  833. offset: 1,
  834. color: '#015fbf' // 底部
  835. }])
  836. }
  837. }, {
  838. type: 'CubeTop',
  839. shape: {
  840. api,
  841. xValue: api.value(0),
  842. yValue: api.value(1),
  843. x: location[0],
  844. y: location[1],
  845. xAxisPoint: api.coord([api.value(0), 0])
  846. },
  847. style: {
  848. fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  849. offset: 0,
  850. color: '#9ffff5'
  851. }, {
  852. offset: 1,
  853. color: '#9ffff5'
  854. }])
  855. },
  856. }
  857. ]
  858. }
  859. },
  860. data: VALUE
  861. }, {
  862. type: 'bar',
  863. itemStyle: {
  864. color: 'rgba(255,255,255,0)'
  865. },
  866. emphasis: {
  867. itemStyle: {
  868. opacity: 0.2,
  869. color: 'rgb(60,118,77)'
  870. }
  871. },
  872. data: MAX
  873. },]
  874. }
  875. hotline2.setOption(option);
  876. if (dom == 'hotline2') {
  877. hotline2.on('click', function (params) {
  878. workTable('', '', '', params.name, '', '', '', '', 0)
  879. })
  880. } else if (dom == 'events') {
  881. hotline2.on('click', function (params) {
  882. console.log()
  883. var keyValue = getKey(data,'level',params.name,'key')
  884. workTable('', '', '', '', "", '', '', keyValue, 0)
  885. })
  886. } else if (dom == 'channel') {
  887. hotline2.on('click', function (params) {
  888. // console.log(params)
  889. sourceCountId.forEach(function (v, n) {
  890. if (v.name == params.name) {
  891. workTable('', '', '', '', '', '', '', '', 0, '', v.id)
  892. }
  893. })
  894. })
  895. }
  896. }
  897. function getKey(data,key1,value,key2){
  898. var dataValue
  899. data.forEach(function (ele) {
  900. if (ele[key1]===value) {
  901. dataValue =ele[key2]
  902. }
  903. })
  904. return dataValue
  905. }
  906. //受理工单类型
  907. function getAcceptanceType() {
  908. var $tableLeft = $('#acceptancelist');
  909. $tableLeft.bootstrapTable('destroy');
  910. //初始化表格,动态从服务器加载数据
  911. $tableLeft.bootstrapTable({
  912. method: "get", //使用get请求到服务器获取数据
  913. url: huayi.config.callcenter_url + "/InfoNew/GetTypeCount",
  914. striped: false, //表格显示条纹
  915. pagination: false, //启动分页
  916. pageSize: 12, //每页显示的记录数
  917. pageNumber: 1, //当前第几页
  918. fixedColumns: false,
  919. fixedNumber: 3,
  920. pageList: [5, 10, 20, 50, 100], //记录数可选列表
  921. search: false, //是否启用查询
  922. showColumns: false, //显示下拉框勾选要显示的列
  923. showRefresh: false, //显示刷新按钮
  924. sidePagination: "server", //表示服务端请求
  925. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  926. //设置为limit可以获取limit, offset, search, sort, order
  927. queryParamsType: "undefined",
  928. queryParams: function queryParams(params) { //设置查询参数
  929. var param = {
  930. token: $.cookie("token"),
  931. timetype:typeCountDataType
  932. }
  933. return param
  934. },
  935. onLoadSuccess: function (data) { //加载成功时执行
  936. const newDataL = {};
  937. let handTotal = 0;
  938. newDataL.state = data.state;
  939. newDataL.message = data.message;
  940. newDataL.rows = data.data;
  941. $tableLeft.bootstrapTable('load', newDataL);
  942. new doAjax({
  943. url: huayi.config.callcenter_url + "/InfoNew/GetHandling",
  944. data: {
  945. token: $.cookie("token"),
  946. timetype:typeCountDataType
  947. },
  948. callBack: function (res) {
  949. let handingData = [{
  950. value: res[0].db,
  951. name: '督办'
  952. }, {
  953. value: res[0].zhib,
  954. name: '直办'
  955. }, {
  956. value: res[0].zub,
  957. name: '转办'
  958. },
  959. {
  960. value: res[0].cb,
  961. name: '催办'
  962. }
  963. ]
  964. handTotal = res[0].db + res[0].zhib + res[0].zub + res[0].cb;
  965. $('.acceptanceType_wrap .total').text(handTotal);
  966. getTimes('.statisticsTime')
  967. getHandling(handingData);
  968. }
  969. });
  970. },
  971. onLoadError: function () { //加载失败时执行
  972. layer.msg("加载数据失败", {
  973. time: 1500,
  974. icon: 2
  975. });
  976. }
  977. });
  978. }
  979. function getHandling(data) {
  980. let sortPie = echarts.init(document.getElementById('acceptancePie'));
  981. option = {
  982. legend: [{
  983. icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  984. orient: 'vertical',
  985. data: ['督办', '直办', '转办', '催办'],
  986. left: '80%',
  987. top: 'center',
  988. align: 'left',
  989. textStyle: {
  990. color: "#fff",
  991. fontSize: 18
  992. },
  993. padding: [10, 60],
  994. itemGap: 20
  995. }],
  996. color: ['#c046ff', '#00a8ff', '#00ffe4', '#f1b31e'],
  997. series: [{
  998. name: '访问来源',
  999. type: 'pie',
  1000. radius: '76%',
  1001. data: data,
  1002. emphasis: {
  1003. itemStyle: {
  1004. shadowBlur: 10,
  1005. shadowOffsetX: 0,
  1006. shadowColor: 'rgba(0, 0, 0, 0.5)'
  1007. }
  1008. },
  1009. label: {
  1010. normal: {
  1011. show: false,
  1012. formatter: function (params) {
  1013. return params.name + ':' + params.value
  1014. // return
  1015. },
  1016. },
  1017. emphasis: {
  1018. position: 'left',
  1019. show: true,
  1020. textStyle: {
  1021. color: '#fff',
  1022. fontSize: '18',
  1023. fontWeight: 'bold'
  1024. },
  1025. length: 1
  1026. }
  1027. },
  1028. }]
  1029. };
  1030. sortPie.setOption(option);
  1031. sortPie.on('click', function (params) {
  1032. console.log(params.name)
  1033. if (params.name == '直办') {
  1034. workTable('', '', '', '', '', '', '', '', 0, 2)
  1035. } else if (params.name == '督办') {
  1036. workTable('', '', '', '', '', '', '', '', 0, 1)
  1037. } else if (params.name == '转办') {
  1038. workTable('', '', '', '', '', '', '', '', 0, 3)
  1039. } else {
  1040. workTable('', '', '', '', '', '', '', '', 0, 4)
  1041. }
  1042. })
  1043. }
  1044. function getAcceptanceName(val, row) {
  1045. if (row.type == '咨询') {
  1046. return '<span class="workAct" onclick="workTable(\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + 9 +
  1047. '\',\'' + '' + '\',\'' + '' + '\',\'' + 0 + '\')">' + val + '</span>'
  1048. } else if (row.type == '投诉') {
  1049. return '<span class="workAct" onclick="workTable(\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + 11 +
  1050. '\',\'' + '' + '\',\'' + '' + '\',\'' + 0 + '\')">' + val + '</span>'
  1051. } else if (row.type == '建议') {
  1052. return '<span class="workAct" onclick="workTable(\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + 12 +
  1053. '\',\'' + '' + '\',\'' + '' + '\',\'' + 0 + '\')">' + val + '</span>'
  1054. } else if (row.type == '其他') {
  1055. return '<span class="workAct" onclick="workTable(\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + 90 +
  1056. '\',\'' + '' + '\',\'' + '' + '\',\'' + 0 + '\')">' + val + '</span>'
  1057. } else if (row.type == '求助') {
  1058. return '<span class="workAct" onclick="workTable(\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + 10 +
  1059. '\',\'' + '' + '\',\'' + '' + '\',\'' + 0 + '\')">' + val + '</span>'
  1060. } else if (row.type == '表扬') {
  1061. return '<span class="workAct" onclick="workTable(\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + 13 +
  1062. '\',\'' + '' + '\',\'' + '' + '\',\'' + 0 + '\')">' + val + '</span>'
  1063. } else if (row.type == '举报') {
  1064. return '<span class="workAct" onclick="workTable(\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + '' + '\',\'' + 89 +
  1065. '\',\'' + '' + '\',\'' + '' + '\',\'' + 0 + '\')">' + val + '</span>'
  1066. }
  1067. }
  1068. //时段话务
  1069. function trafficMonthChart(hours, monthCount, dayCount) {
  1070. let traffic = echarts.init(document.getElementById('traffic2'));
  1071. option = {
  1072. tooltip: {
  1073. trigger: 'axis',
  1074. axisPointer: {
  1075. show: true,
  1076. type: 'line',
  1077. lineStyle: {
  1078. type: 'dashed'
  1079. }
  1080. },
  1081. textStyle: {
  1082. color: '#fff',
  1083. fontSize: 16,
  1084. fontWeight: '600',
  1085. },
  1086. position: ['75%', '55%'],
  1087. backgroundColor: 'rgba(250,250,250,0)',
  1088. formatter: function (params) {
  1089. console.log()
  1090. let str = '<div style="position: absolute;top:-315px;left:-423px">接通率:' + ((params[1].value / params[0].value) * 100).toFixed(0) + '%</div>'
  1091. return str;
  1092. }
  1093. },
  1094. grid: {
  1095. top: '18%',
  1096. bottom: '12%'
  1097. },
  1098. xAxis: [{
  1099. type: "category",
  1100. boundaryGap: false,
  1101. scale: true,
  1102. axisLabel: {
  1103. formatter: '{value}',
  1104. fontSize: 13,
  1105. margin: 10,
  1106. textStyle: {
  1107. color: "#f4f4f8"
  1108. }
  1109. },
  1110. axisLine: {
  1111. show: true,
  1112. lineStyle: {
  1113. color: "#525fa6"
  1114. }
  1115. },
  1116. splitLine: {
  1117. show: false,
  1118. lineStyle: {
  1119. color: "#243753"
  1120. }
  1121. },
  1122. axisTick: {
  1123. show: false
  1124. },
  1125. data: hours
  1126. }],
  1127. yAxis: [{
  1128. boundaryGap: false,
  1129. type: "value",
  1130. // scale:true,
  1131. axisLabel: {
  1132. textStyle: {
  1133. color: "#f4f4f8"
  1134. }
  1135. },
  1136. nameTextStyle: {
  1137. color: "#fff",
  1138. fontSize: 12,
  1139. lineHeight: 40
  1140. },
  1141. splitLine: {
  1142. show: true,
  1143. lineStyle: {
  1144. color: "#516cb8",
  1145. type: "dashed"
  1146. }
  1147. },
  1148. axisLine: {
  1149. lineStyle: {
  1150. color: "#8393c8",
  1151. width: 1,
  1152. type: "solid"
  1153. },
  1154. show: true,
  1155. // "symbol":['none', 'arrow'],
  1156. symbol: ['none',
  1157. 'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3, 20'
  1158. ],
  1159. symbolOffset: 5,
  1160. symbolSize: [35, 38],
  1161. },
  1162. name: "条"
  1163. }],
  1164. series: [{
  1165. name: "话务量",
  1166. type: "line",
  1167. smooth: true,
  1168. showSymbol: false,
  1169. symbol: 'circle',
  1170. symbolSize: 4,
  1171. zlevel: 3,
  1172. itemStyle: {
  1173. color: '#08fcff'
  1174. },
  1175. lineStyle: {
  1176. normal: {
  1177. width: 2,
  1178. color: "#08fcff",
  1179. }
  1180. },
  1181. label: {
  1182. show: true,
  1183. position: 'top',
  1184. color: '#fff',
  1185. fontSize: 14,
  1186. fontWeight: '600',
  1187. formatter: function (params) {
  1188. console.log(params)
  1189. return params.seriesName + ':' + params.value
  1190. }
  1191. },
  1192. areaStyle: {
  1193. normal: {
  1194. color: new echarts.graphic.LinearGradient(
  1195. 0,
  1196. 0,
  1197. 0,
  1198. 1,
  1199. [{
  1200. offset: 0,
  1201. color: "#087caa"
  1202. },
  1203. {
  1204. offset: 0.8,
  1205. color: "#091576"
  1206. }
  1207. ],
  1208. false
  1209. ),
  1210. }
  1211. },
  1212. emphasis: {
  1213. itemStyle: {
  1214. color: '#fff',
  1215. shadowBlur: 10,
  1216. shadowOffsetX: 1,
  1217. shadowOffsetY: 1,
  1218. shadowColor: 'rgb(250,250, 250)'
  1219. }
  1220. },
  1221. data: monthCount
  1222. }, {
  1223. name: "接通量",
  1224. type: "line",
  1225. smooth: true,
  1226. showSymbol: false,
  1227. symbol: 'circle',
  1228. symbolSize: 4,
  1229. zlevel: 3,
  1230. itemStyle: {
  1231. color: '#ffe000'
  1232. },
  1233. label: {
  1234. show: true,
  1235. position: 'top',
  1236. color: '#fff',
  1237. fontSize: 14,
  1238. fontWeight: '600',
  1239. formatter: function (params) {
  1240. return params.seriesName + ':' + params.value
  1241. }
  1242. },
  1243. lineStyle: {
  1244. normal: {
  1245. width: 2,
  1246. color: "#ffe000",
  1247. }
  1248. },
  1249. areaStyle: {
  1250. normal: {
  1251. color: new echarts.graphic.LinearGradient(
  1252. 0,
  1253. 0,
  1254. 0,
  1255. 1,
  1256. [{
  1257. offset: 0,
  1258. color: "#739952"
  1259. },
  1260. {
  1261. offset: 0.8,
  1262. color: "#091576"
  1263. }
  1264. ],
  1265. false
  1266. ),
  1267. }
  1268. },
  1269. emphasis: {
  1270. itemStyle: {
  1271. color: '#fff',
  1272. shadowBlur: 10,
  1273. shadowOffsetX: 1,
  1274. shadowOffsetY: 1,
  1275. shadowColor: 'rgb(250,250, 250)'
  1276. }
  1277. },
  1278. data: dayCount
  1279. }]
  1280. };
  1281. traffic.setOption(option);
  1282. }
  1283. function trafficDayChart(dataArr) {
  1284. let traffic3 = echarts.init(document.getElementById('rexian'));
  1285. // 头部菱形
  1286. const diamondData = dataArr.result.reduce((pre, cur, index) => {
  1287. pre[index] = cur.data.map((el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0))
  1288. return pre
  1289. }, [])
  1290. // color
  1291. const color = [
  1292. [{ offset: 0, color: "#efff37", }, { offset: 0.5, color: "#efff37", }, { offset: 0.5, color: "#d5e700", }, { offset: 1, color: "#d5e700", }],
  1293. [{ offset: 0, color: "#f67c20", }, { offset: 0.5, color: "#f67c20", }, { offset: 0.5, color: "#cc681e", }, { offset: 1, color: "#cc681e", }],
  1294. [{ offset: 0, color: "#32ffee", }, { offset: 0.5, color: "#32ffee", }, { offset: 0.5, color: "#00e8d5", }, { offset: 1, color: "#00e8d5", }],
  1295. [{ offset: 0, color: "#dc0707", }, { offset: 0.5, color: "#dc0707", }, { offset: 0.5, color: "#af0808", }, { offset: 1, color: "#af0808", }],
  1296. ]
  1297. // series
  1298. let series = dataArr.result.reduce((p, c, i, array) => {
  1299. p.push({
  1300. z: i + 1,
  1301. stack: '总量',
  1302. type: 'bar',
  1303. name: c.name,
  1304. barGap: '-100%',
  1305. barWidth: 30,
  1306. data: c.data,
  1307. itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
  1308. }, {
  1309. z: i + 10,
  1310. type: 'pictorialBar',
  1311. symbolPosition: 'end',
  1312. symbol: 'diamond',
  1313. symbolOffset: [0, '-50%'],
  1314. symbolSize: [30, 10],
  1315. data: diamondData[i],
  1316. itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
  1317. tooltip: { show: false },
  1318. })
  1319. // 是否最后一个了?
  1320. if (p.length === (array.length) * 2) {
  1321. p.push({
  1322. z: array.length * 2,
  1323. type: "pictorialBar",
  1324. symbolPosition: "start",
  1325. data: dataArr.result[0].data,
  1326. symbol: "diamond",
  1327. symbolOffset: ["0%", "50%"],
  1328. symbolSize: [30, 10],
  1329. itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[0] } },
  1330. tooltip: { show: false },
  1331. })
  1332. return p
  1333. }
  1334. return p
  1335. }, [])
  1336. // tooltip
  1337. const tooltip = {
  1338. trigger: 'axis',
  1339. axisPointer: {
  1340. show: true,
  1341. type: 'line',
  1342. lineStyle: {
  1343. type: 'dashed'
  1344. }
  1345. },
  1346. textStyle: {
  1347. color: '#ffe400',
  1348. fontSize: '14'
  1349. },
  1350. backgroundColor: 'rgba(250,250,250,0)',
  1351. formatter: function (params) {
  1352. let str = '<div style="background-image: url(image/key_frame.png);width:134px;height:130px;line-height:25px;background-size: 100% 100%;padding:13px 10px;">'
  1353. params.forEach(function (v, n) {
  1354. if (v.seriesName != '上部1') {
  1355. str +=
  1356. '<div><span style="color:#fff;width:75px;text-align: center;display: inline-block;">' +
  1357. v.seriesName +
  1358. ':</span><span style:"width:55px;text-align: center;display: inline-block;">' +
  1359. v.value + '</span></div>'
  1360. }
  1361. })
  1362. return str;
  1363. }
  1364. }
  1365. const legend = {
  1366. data: dataArr.result.map(item => item.name),
  1367. textStyle: { fontSize: 14, color: '#fff' },
  1368. itemWidth: 25,
  1369. itemHeight: 15,
  1370. itemGap: 15,
  1371. // top: '5%',
  1372. // 禁止点击
  1373. selectedMode: false,
  1374. }
  1375. // grid
  1376. const grid = {
  1377. left: '3%',
  1378. right: '4%',
  1379. bottom: '3%',
  1380. containLabel: true,
  1381. tooltip: {
  1382. textStyle: {
  1383. color: '#fff'
  1384. }
  1385. }
  1386. }
  1387. // xAxis
  1388. const xAxis = {
  1389. axisTick: { show: true },
  1390. axisLine: {
  1391. show: true,
  1392. lineStyle: {
  1393. color: "#525fa6"
  1394. }
  1395. },
  1396. axisLabel: { textStyle: { fontSize: 16, color: '#fff' }, },
  1397. data: dataArr.xdata
  1398. }
  1399. // yAxis
  1400. const yAxis = [{
  1401. boundaryGap: false,
  1402. type: "value",
  1403. // scale:true,
  1404. axisLabel: {
  1405. textStyle: {
  1406. color: "#f4f4f8"
  1407. }
  1408. },
  1409. nameTextStyle: {
  1410. color: "#fff",
  1411. fontSize: 12,
  1412. lineHeight: 40
  1413. },
  1414. splitLine: {
  1415. show: true,
  1416. lineStyle: {
  1417. color: "#516cb8",
  1418. type: "dashed"
  1419. }
  1420. }
  1421. }]
  1422. // 渲染
  1423. option = {
  1424. tooltip, xAxis, yAxis, series, grid, legend
  1425. }
  1426. traffic3.setOption(option)
  1427. }
  1428. function getS(dataArr) {
  1429. let traffic3 = echarts.init(document.getElementById('heji'));
  1430. // 头部菱形
  1431. const diamondData = dataArr.result.reduce((pre, cur, index) => {
  1432. pre[index] = cur.data.map((el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0))
  1433. return pre
  1434. }, [])
  1435. // color
  1436. const color = [
  1437. [{ offset: 0, color: "#efff37", }, { offset: 0.5, color: "#efff37", }, { offset: 0.5, color: "#d5e700", }, { offset: 1, color: "#d5e700", }],
  1438. [{ offset: 0, color: "#f67c20", }, { offset: 0.5, color: "#f67c20", }, { offset: 0.5, color: "#cc681e", }, { offset: 1, color: "#cc681e", }],
  1439. [{ offset: 0, color: "#32ffee", }, { offset: 0.5, color: "#32ffee", }, { offset: 0.5, color: "#00e8d5", }, { offset: 1, color: "#00e8d5", }],
  1440. [{ offset: 0, color: "#dc0707", }, { offset: 0.5, color: "#dc0707", }, { offset: 0.5, color: "#af0808", }, { offset: 1, color: "#af0808", }],
  1441. ]
  1442. // series
  1443. let series = dataArr.result.reduce((p, c, i, array) => {
  1444. p.push({
  1445. z: i + 1,
  1446. stack: '总量',
  1447. type: 'bar',
  1448. name: c.name,
  1449. barGap: '-100%',
  1450. barWidth: 30,
  1451. data: c.data,
  1452. itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
  1453. }, {
  1454. z: i + 10,
  1455. type: 'pictorialBar',
  1456. symbolPosition: 'end',
  1457. symbol: 'diamond',
  1458. symbolOffset: [0, '-50%'],
  1459. symbolSize: [30, 10],
  1460. data: diamondData[i],
  1461. itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
  1462. tooltip: { show: false },
  1463. })
  1464. // 是否最后一个了?
  1465. if (p.length === (array.length) * 2) {
  1466. p.push({
  1467. z: array.length * 2,
  1468. type: "pictorialBar",
  1469. symbolPosition: "start",
  1470. data: dataArr.result[0].data,
  1471. symbol: "diamond",
  1472. symbolOffset: ["0%", "50%"],
  1473. symbolSize: [30, 10],
  1474. itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[0] } },
  1475. tooltip: { show: false },
  1476. })
  1477. return p
  1478. }
  1479. return p
  1480. }, [])
  1481. // tooltip
  1482. const tooltip = {
  1483. trigger: 'axis',
  1484. axisPointer: {
  1485. show: true,
  1486. type: 'line',
  1487. lineStyle: {
  1488. type: 'dashed'
  1489. }
  1490. },
  1491. textStyle: {
  1492. color: '#ffe400',
  1493. fontSize: '14'
  1494. },
  1495. backgroundColor: 'rgba(250,250,250,0)',
  1496. formatter: function (params) {
  1497. let str = '<div style="background-image: url(image/key_frame.png);width:134px;height:130px;line-height:25px;background-size: 100% 100%;padding:13px 10px;">'
  1498. params.forEach(function (v, n) {
  1499. if (v.seriesName != '上部1') {
  1500. str +=
  1501. '<div><span style="color:#fff;width:75px;text-align: center;display: inline-block;">' +
  1502. v.seriesName +
  1503. ':</span><span style:"width:55px;text-align: center;display: inline-block;">' +
  1504. v.value + '</span></div>'
  1505. }
  1506. })
  1507. return str;
  1508. }
  1509. }
  1510. // grid
  1511. const grid = {
  1512. left: '3%',
  1513. right: '4%',
  1514. bottom: '3%',
  1515. containLabel: true,
  1516. tooltip: {
  1517. textStyle: {
  1518. color: '#fff'
  1519. }
  1520. }
  1521. }
  1522. // xAxis
  1523. const xAxis = {
  1524. axisTick: { show: true },
  1525. axisLine: {
  1526. show: true,
  1527. lineStyle: {
  1528. color: "#525fa6"
  1529. }
  1530. },
  1531. axisLabel: { textStyle: { fontSize: 16, color: '#fff' }, },
  1532. data: dataArr.xdata
  1533. }
  1534. // yAxis
  1535. const yAxis = [{
  1536. boundaryGap: false,
  1537. type: "value",
  1538. // scale:true,
  1539. axisLabel: {
  1540. textStyle: {
  1541. color: "#f4f4f8"
  1542. }
  1543. },
  1544. nameTextStyle: {
  1545. color: "#fff",
  1546. fontSize: 12,
  1547. lineHeight: 40
  1548. },
  1549. splitLine: {
  1550. show: true,
  1551. lineStyle: {
  1552. color: "#516cb8",
  1553. type: "dashed"
  1554. }
  1555. }
  1556. }]
  1557. // 渲染
  1558. option = {
  1559. tooltip, xAxis, yAxis, series, grid
  1560. }
  1561. traffic3.setOption(option)
  1562. }
  1563. //坐席监控
  1564. //实时话务统计
  1565. function getRealTimeTraffi(hours, hrCount, hcCount) {
  1566. let realTimeTraffi = echarts.init(document.getElementById('realTimeTraffi'));
  1567. option = {
  1568. grid: {
  1569. top: '20%',
  1570. bottom: '20%'
  1571. },
  1572. legend: {
  1573. data: ['呼入', '呼出'],
  1574. textStyle: {
  1575. color: '#fff',
  1576. fontSize: 14,
  1577. padding: [0, 5]
  1578. },
  1579. right: 25,
  1580. top: -5
  1581. },
  1582. tooltip: {
  1583. trigger: 'axis',
  1584. axisPointer: {
  1585. show: true,
  1586. type: 'line',
  1587. lineStyle: {
  1588. type: 'dashed'
  1589. }
  1590. },
  1591. textStyle: {
  1592. color: '#fff',
  1593. fontSize: 16,
  1594. fontWeight: '600',
  1595. },
  1596. backgroundColor: 'rgba(250,250,250,0)',
  1597. formatter: function (params) {
  1598. let str = '<div style="background-image: url(image/key_frame.png);width:128px;height:70px;line-height:25px;background-size: 100% 100%;padding:7px 8px;">'
  1599. params.forEach(function (v, n) {
  1600. // if(v.seriesName!='上部1'){
  1601. str +=
  1602. '<div><span style="color:#fff;width:75px;text-align: center;display: inline-block;">' +
  1603. v.seriesName +
  1604. ':</span><span style:"width:55px;text-align: center;display: inline-block;">' +
  1605. v.value + '</span></div>'
  1606. // }
  1607. })
  1608. return str;
  1609. }
  1610. },
  1611. xAxis: [{
  1612. type: "category",
  1613. boundaryGap: false,
  1614. scale: true,
  1615. axisLabel: {
  1616. formatter: '{value}',
  1617. fontSize: 13,
  1618. margin: 10,
  1619. textStyle: {
  1620. color: "#f4f4f8"
  1621. }
  1622. },
  1623. axisLine: {
  1624. show: true,
  1625. lineStyle: {
  1626. color: "#849cc9"
  1627. }
  1628. },
  1629. splitLine: {
  1630. show: false,
  1631. lineStyle: {
  1632. color: "#849cc9"
  1633. }
  1634. },
  1635. axisTick: {
  1636. show: false
  1637. },
  1638. data: hours
  1639. }],
  1640. yAxis: [{
  1641. boundaryGap: false,
  1642. type: "value",
  1643. // scale:true,
  1644. axisLabel: {
  1645. textStyle: {
  1646. color: "#f4f4f8"
  1647. }
  1648. },
  1649. nameTextStyle: {
  1650. color: "#fff",
  1651. fontSize: 12,
  1652. lineHeight: 40
  1653. },
  1654. splitLine: {
  1655. show: true,
  1656. lineStyle: {
  1657. color: "#849cc9",
  1658. type: "dashed"
  1659. }
  1660. },
  1661. axisLine: {
  1662. lineStyle: {
  1663. color: "#849cc9",
  1664. width: 1,
  1665. type: "solid"
  1666. },
  1667. show: true,
  1668. // "symbol":['none', 'arrow'],
  1669. symbol: ['none',
  1670. 'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3, 20'
  1671. ],
  1672. symbolOffset: 5,
  1673. symbolSize: [35, 38],
  1674. },
  1675. }],
  1676. series: [{
  1677. name: "呼入",
  1678. type: "line",
  1679. smooth: true,
  1680. showSymbol: false,
  1681. symbol: 'circle',
  1682. symbolSize: 4,
  1683. zlevel: 3,
  1684. itemStyle: {
  1685. color: '#08fcff'
  1686. },
  1687. lineStyle: {
  1688. normal: {
  1689. width: 2,
  1690. color: "#01cde6",
  1691. }
  1692. },
  1693. // label: {
  1694. // show: true,
  1695. // position: 'top',
  1696. // color: '#fff',
  1697. // fontSize: 14,
  1698. // fontWeight: '600',
  1699. // formatter: function (params) {
  1700. // console.log(params)
  1701. // return params.seriesName + ':' + params.value
  1702. // }
  1703. // },
  1704. areaStyle: {
  1705. normal: {
  1706. color: new echarts.graphic.LinearGradient(
  1707. 0,
  1708. 0,
  1709. 0,
  1710. 1,
  1711. [{
  1712. offset: 0,
  1713. color: "#0571ae"
  1714. },
  1715. {
  1716. offset: 0.8,
  1717. color: "#093085"
  1718. }
  1719. ],
  1720. false
  1721. ),
  1722. }
  1723. },
  1724. emphasis: {
  1725. itemStyle: {
  1726. color: '#fff',
  1727. shadowBlur: 10,
  1728. shadowOffsetX: 1,
  1729. shadowOffsetY: 1,
  1730. shadowColor: 'rgb(250,250, 250)'
  1731. }
  1732. },
  1733. data: hrCount
  1734. }, {
  1735. name: "呼出",
  1736. type: "line",
  1737. smooth: true,
  1738. showSymbol: false,
  1739. symbol: 'circle',
  1740. symbolSize: 4,
  1741. zlevel: 3,
  1742. itemStyle: {
  1743. color: '#ffe000'
  1744. },
  1745. // label: {
  1746. // show: true,
  1747. // position: 'top',
  1748. // color: '#fff',
  1749. // fontSize: 14,
  1750. // fontWeight: '600',
  1751. // formatter: function (params) {
  1752. // return params.seriesName + ':' + params.value
  1753. // }
  1754. // },
  1755. lineStyle: {
  1756. normal: {
  1757. width: 2,
  1758. color: "#ffd200",
  1759. }
  1760. },
  1761. areaStyle: {
  1762. normal: {
  1763. color: new echarts.graphic.LinearGradient(
  1764. 0,
  1765. 0,
  1766. 0,
  1767. 1,
  1768. [{
  1769. offset: 0,
  1770. color: "#626a55"
  1771. },
  1772. {
  1773. offset: 0.8,
  1774. color: "#093085"
  1775. }
  1776. ],
  1777. false
  1778. ),
  1779. }
  1780. },
  1781. emphasis: {
  1782. itemStyle: {
  1783. color: '#fff',
  1784. shadowBlur: 10,
  1785. shadowOffsetX: 1,
  1786. shadowOffsetY: 1,
  1787. shadowColor: 'rgb(250,250, 250)'
  1788. }
  1789. },
  1790. data: hcCount
  1791. }]
  1792. };
  1793. realTimeTraffi.setOption(option);
  1794. }