説明なし

second_index.js 57KB

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