console.js 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197
  1. const $ = require('jquery');
  2. require("../css/reset.less")
  3. require("../css/console.less")
  4. require("../images/logo.png")
  5. require("../images/arrow_down.png")
  6. // import 'zrender/lib/svg/svg';
  7. const {api} = require('./api.js')
  8. const echarts = require('echarts');
  9. const {post,setCookie,delCookie,getCookie} = require('../js/utils.js');
  10. let payMoney = [],dayLis = [],dateType = 2,slideType = 1,hospital=getCookie("hospital");
  11. $(function(){
  12. if(!hasData('YH-KZT')){
  13. $("body").html('')
  14. }
  15. if(hospital == "台州市立"){
  16. $(".part03 .partTitlePub .name").html('各科室甲级病例占比')
  17. }else{
  18. $(".part03 .partTitlePub .name").html('病案首页合格率')
  19. }
  20. $(".partTitle p span").html(hospital)
  21. setInterval(() => {
  22. getTimeDetail()
  23. }, 1000);
  24. resizeBox()
  25. initConsole()//质控列表
  26. getBarData(2)//图标数据获取
  27. dateChange()
  28. $(window).click(function(){
  29. window.parent.userActionHide()
  30. $(".toggleSlide ul").css("display","none")
  31. })
  32. let sildeIS = true
  33. if(!hasData('FUNC000045')&&!hasData('FUNC000046')){
  34. $(".toggleSlide").css("opacity","0.5")
  35. sildeIS = false
  36. }
  37. $(".toggleSlide p").click(function(e){
  38. if(!sildeIS)return
  39. e.stopPropagation()
  40. $(this).next().slideToggle()
  41. })
  42. $(".toggleSlide li").click(function(){
  43. let str = $(this).attr("data-str"),type = $(this).attr("data-type")
  44. if(type == 1){
  45. if(!hasData('FUNC000045')){
  46. return
  47. }
  48. slideType = 1
  49. $(".pubEchart .title").html("科室平均住院天数柱状图")
  50. barChart(dayLis,dateType)
  51. }else{
  52. if(!hasData('FUNC000046')){
  53. return
  54. }
  55. slideType = 2
  56. $(".pubEchart .title").html("科室平均住院花费柱状图")
  57. barChart(payMoney,dateType)
  58. }
  59. $(this).parent().slideToggle().prev().find("span").html(str)
  60. })
  61. getDetails()
  62. })
  63. function getDetails(){
  64. $(".part02 .bingli,.part02 .bingliLis,.part03 .circle .title,.pubEchartB.paymoney .title").click(function(){
  65. $(parent.document).find("#contentIframe").attr("src","deptScoreDetailControl.html")
  66. })
  67. $(".part03 .partTitlePub").click(function(){
  68. $(parent.document).find("#contentIframe").attr("src",hospital=="台州市立"?"jiaji.html":"partDetailControl.html")
  69. })
  70. $(".paymoney.pubEchart .title").click(function(){
  71. $(parent.document).find("#contentIframe").attr("src","dayDetail.html")
  72. })
  73. $(".defect .partTitlePub").click(function(){//from 1 console / 2 deptConsole
  74. $(parent.document).find("#contentIframe").attr("src","mukuai.html?from=1&dateType="+dateType)
  75. })
  76. $(".circleB .title").click(function(){
  77. $(parent.document).find("#contentIframe").attr("src","tiaomu.html?from=1&dateType="+dateType)
  78. })
  79. }
  80. //判断有无某一权限
  81. function hasData(data){
  82. let lis = JSON.parse(getCookie("codeLis"))
  83. // console.log(lis)
  84. if(lis.indexOf(data)>-1){//有权限
  85. return true
  86. }
  87. return false;
  88. }
  89. function resizeBox(){
  90. $(".partWrap").css({
  91. height:$(window).height()-38+'px'
  92. })
  93. }
  94. //所有数据切换日期筛选
  95. function dateChange(){
  96. $(".monthYear .mon").click(function(){
  97. $(this).css({
  98. backgroundColor:'#5A8EEE',
  99. color:'#fff'
  100. }).siblings().css({
  101. color:'#5A8EEE',
  102. backgroundColor:'#fff'
  103. })
  104. dateType = 1
  105. getBarData(1)
  106. })
  107. $(".monthYear .year").click(function(){
  108. $(this).css({
  109. backgroundColor:'#5A8EEE',
  110. color:'#fff'
  111. }).siblings().css({
  112. color:'#5A8EEE',
  113. backgroundColor:'#fff'
  114. })
  115. dateType = 2
  116. getBarData(2)
  117. })
  118. }
  119. //控制台数
  120. function initConsole(result){
  121. let url = {
  122. '本月病历数':require("../images/icon6.png"),
  123. '本月不合格病历-机器':require("../images/icon7.png"),
  124. '本月质控数-机器':require("../images/icon10.png"),
  125. '本月甲级病历-机器':require("../images/icon8.png"),
  126. '本月乙级病历-机器':require("../images/icon9.png"),
  127. '本年病历数':require("../images/icon6.png"),
  128. '本年不合格病历-机器':require("../images/icon7.png"),
  129. '本年质控数-机器':require("../images/icon10.png"),
  130. '本年甲级病历-机器':require("../images/icon8.png"),
  131. '本年乙级病历-机器':require("../images/icon9.png"),
  132. }
  133. let dom = '';
  134. for(let i in result){
  135. if(i.indexOf("人工")==-1){
  136. let name = i.split("-")[0];
  137. let num = 0;
  138. if(name=='本月病历数'||name=='本年病历数'){
  139. num = result[i]
  140. }else{
  141. num = result[name+'-人工']+result[i]
  142. }
  143. dom += `
  144. <li class="partLi">
  145. <div class="partIn">
  146. <p class="top">${name}</p>
  147. <p class="btm clearfix">
  148. <img src="${url[i]}" alt="">
  149. <span>${num}</span>
  150. </p>
  151. </div>
  152. </li>
  153. `
  154. }
  155. }
  156. $(".partAll").html(dom)
  157. }
  158. //获取图表数据
  159. function getBarData(type){
  160. if(hasData('FUNC000045')){
  161. post(api.getAverageDayNum,{//平均住院天数
  162. "type": type||1//1月2年
  163. }).then((res)=>{
  164. let data = res.data;
  165. if(data.code == 0){
  166. let result2 = data.data['平均住院日']||[]
  167. dayLis = result2
  168. if(slideType == 1){
  169. barChart(result2,type||1)
  170. }
  171. }
  172. })
  173. }else{
  174. $(".toggleSlide1").css("opacity",0.5)
  175. }
  176. if(hasData('FUNC000046')){
  177. post(api.getAverageFee,{//平均住院费用
  178. "type": type||1//1月2年
  179. }).then((res)=>{
  180. let data = res.data;
  181. if(data.code == 0){
  182. let result3 = data.data['平均住院费用']||[]
  183. payMoney = result3;
  184. if(slideType == 2){
  185. barChart(result3,type||1)
  186. }
  187. }
  188. })
  189. }else{
  190. $(".toggleSlide2").css("opacity",0.5)
  191. }
  192. if(hasData('FUNC000047')){
  193. post(api.getAverageScore,{//各科室质控平均分
  194. "type": type||1//1月2年
  195. }).then((res)=>{
  196. let data = res.data;
  197. if(data.code == 0){
  198. let result1 = data.data['各科室质控平均分']||[]
  199. let dataX1=[],dataY1=[]
  200. for(let i = 0;i < result1.length;i++){
  201. dataX1.push(result1[i].name)
  202. dataY1.push(result1[i].averageValue)
  203. }
  204. barChartPay(dataX1,dataY1)
  205. }
  206. })
  207. }
  208. if(hasData('FUNC000048')&&hospital=="台州市立"){
  209. post(api.getLevelResultDept,{//各科室甲级占比
  210. "type": type||1//1月2年
  211. }).then((res)=>{
  212. let data = res.data;
  213. if(data.code == 0){
  214. let result2 = data.data['各科室甲级病历占比']||[]
  215. let dataX2=[],dataY2=[];
  216. for(let i = 0;i < result2.length;i++){
  217. dataX2.push(result2[i].deptName)
  218. dataY2.push(result2[i].firstPercent.replace('%',''))
  219. }
  220. lineChart(dataX2,dataY2)
  221. }
  222. })
  223. }
  224. if(hasData('FUNC000075')&&hospital=="长兴医院"){
  225. post(api.homePageLevelLimit,{//病案首页
  226. "type": type||1//1月2年
  227. }).then((res)=>{
  228. let data = res.data;
  229. if(data.code == 0){
  230. let result1 = data.data||[]
  231. let dataX1=[],dataY1=[]
  232. for(let i = 0;i < result1.length;i++){
  233. dataX1.push(result1[i].deptName)
  234. dataY1.push(result1[i].firstLevelPercentStr.replace('%',''))
  235. }
  236. lineChartSpecial(dataX1,dataY1)
  237. }
  238. })
  239. }
  240. if(hasData('FUNC000049')){
  241. post(api.leaveHosCount,{//出院人数统计
  242. "type": type||1//1月2年
  243. }).then((res)=>{
  244. let data = res.data;
  245. if(data.code == 0){
  246. // barChart(result2,type||1)
  247. // console.log(data)
  248. let result1 = data.data['出院人数统计']||[]
  249. personNum(result1)
  250. }
  251. })
  252. }
  253. if(hasData('FUNC000050')){
  254. post(api.mrCount,{//质控病历统计
  255. "type": type||1//1月2年
  256. }).then((res)=>{
  257. let data = res.data
  258. if(data.code == 0){
  259. let result3 = data.data['病历数统计']||[]
  260. if(result3.length == 0){
  261. result3 = [
  262. {
  263. "id":null,
  264. "name":"累计质控病历数",
  265. "totleNum":0,
  266. "num":0,
  267. "percent":null,
  268. "percentStr":null
  269. },
  270. {
  271. "id":null,
  272. "name":"甲级病历",
  273. "totleNum":10,
  274. "num":0,
  275. "percent":0,
  276. "percentStr":"0.00%"
  277. },
  278. {
  279. "id":null,
  280. "name":"乙级病历",
  281. "totleNum":10,
  282. "num":0,
  283. "percent":0,
  284. "percentStr":"0.00%"
  285. },
  286. {
  287. "id":null,
  288. "name":"丙级病历",
  289. "totleNum":10,
  290. "num":0,
  291. "percent":0,
  292. "percentStr":"0.00%"
  293. }
  294. ]
  295. }
  296. setNumDetail(result3)
  297. }
  298. })
  299. }
  300. if(hasData('FUNC000051')){
  301. post(api.entryCountGroupByCase,{//各模块缺陷占比排行
  302. "type": type||1//1月2年
  303. }).then((res)=>{
  304. let data = res.data;
  305. if(data.code == 0){
  306. let result1 = data.data['各模块缺陷占比排行']||[]
  307. queList(result1)
  308. }
  309. })
  310. }
  311. if(hasData('FUNC000052')){
  312. post(api.entryCountGroupByEntry,{//条目缺陷占比
  313. "type": type||1//1月2年
  314. }).then((res)=>{
  315. let data = res.data;
  316. if(data.code == 0){
  317. let result3 = data.data['条目缺陷占比']||[]
  318. for(let i = 0;i < result3.length;i++){
  319. result3[i].value = result3[i].num
  320. }
  321. emptyCircleB(result3)
  322. panDetailB(result3)
  323. }
  324. })
  325. }
  326. if(hasData('FUNC000053')){
  327. post(api.entryByDept,{//各科室缺陷占比
  328. "type": type||1//1月2年
  329. }).then((res)=>{
  330. let data = res.data;
  331. if(data.code == 0){
  332. let result2 = data.data['各科室缺陷占比']||[]
  333. for(let i = 0;i < result2.length;i++){
  334. result2[i].value = result2[i].num
  335. }
  336. emptyCircle(result2)
  337. panDetail(result2)
  338. }
  339. })
  340. }
  341. }
  342. //part01
  343. function personNum(data){
  344. $(".personNum").html("总人数:"+data['总人数'])
  345. $(".died").html(data['死亡人数'])
  346. $(".newborn").html(data['新生儿人数'])
  347. $(".patientNum").html(data['手术病人数'])
  348. }
  349. //part02
  350. function setNumDetail(data){
  351. // console.log(data,2222222222)
  352. if(data.length == 0)return
  353. let str = ''
  354. for(let i = 0;i < data.length;i++){
  355. str += `
  356. <li class="${i==0?'fst':''}">
  357. <p class="numShow">${data[i].num}</p>
  358. <p class="explainNum">${data[i].name}</p>
  359. </li>
  360. `
  361. if(data[i].name == '甲级病历'){
  362. let tmp = []
  363. data[i].value = data[i].num
  364. tmp.push(data[i])
  365. tmp.push({percentStr:(1-data[i].percent)*100+'%',value:data[i].totleNum - data[i].num})
  366. part02pan(tmp,'fen01')
  367. }
  368. if(data[i].name == '乙级病历'){
  369. let tmp = []
  370. data[i].value = data[i].num
  371. tmp.push(data[i])
  372. tmp.push({percentStr:(1-data[i].percent)*100+'%',value:data[i].totleNum - data[i].num})
  373. part02pan(tmp,'fen02')
  374. }
  375. if(data[i].name == '丙级病历'){
  376. let tmp = []
  377. data[i].value = data[i].num
  378. tmp.push(data[i])
  379. tmp.push({percentStr:(1-data[i].percent)*100+'%',value:data[i].totleNum - data[i].num})
  380. part02pan(tmp,'fen03')
  381. }
  382. }
  383. $('.bingli').html(str)
  384. }
  385. //part02pan
  386. function part02pan(data,dom){
  387. // console.log(data,33333)
  388. dom = echarts.init(document.getElementById(dom));
  389. $(window).resize(function(){
  390. dom.resize()
  391. });
  392. let bgColor = '#fff';
  393. let title = '总量';
  394. let color = ['#37CBCB','#dedede'];
  395. let echartData = data;
  396. option = {
  397. backgroundColor: bgColor,
  398. color: color,
  399. title: [{
  400. text:'{val|' + echartData[0].percentStr + '}',
  401. top: 'center',
  402. left: 'center',
  403. textStyle: {
  404. rich: {
  405. val: {
  406. fontSize: 14,
  407. color: '#333',
  408. fontWeight: 'bold',
  409. padding: [10, 0]
  410. },
  411. name: {
  412. fontSize: 12,
  413. fontWeight: 'normal',
  414. color: '#777',
  415. }
  416. }
  417. }
  418. }],
  419. series: [{
  420. name: '',
  421. type: 'pie',
  422. radius: ['70%', '90%'],
  423. data: echartData,
  424. hoverAnimation:false,
  425. label: {
  426. normal: {
  427. show:false,
  428. }
  429. },
  430. }]
  431. };
  432. dom.setOption(option);
  433. }
  434. //折现图
  435. function lineChart(dataX,dataY){
  436. var myCharts = echarts.init(document.getElementById('lineChart'));
  437. $(window).resize(function(){
  438. myCharts.resize()
  439. });
  440. option = {
  441. color:"#5A8EEE",
  442. tooltip: {
  443. trigger: 'axis',
  444. color:'#fff',
  445. formatter: function(param) {
  446. return '<div style="color:#fff;"> '+ param[0].name + "<br>" +"甲级病历占比:"+ param[0].value+"%" + "<br>"
  447. '</div>'
  448. }
  449. },
  450. grid: {
  451. left: '3%',
  452. right: '5%',
  453. bottom: '3%',
  454. containLabel: true
  455. },
  456. title:[{
  457. text: dataX.length>0?'百分比':'',
  458. top: 15,
  459. left: 0,
  460. textStyle: {
  461. fontSize: 14,
  462. color:'#666666',
  463. fontWeight: 400
  464. }
  465. }],
  466. toolbox: {
  467. show: false,
  468. feature: {
  469. dataZoom: {
  470. yAxisIndex: 'none'
  471. },
  472. dataView: {readOnly: false},
  473. magicType: {type: ['line', 'bar']},
  474. restore: {
  475. },
  476. saveAsImage: {}
  477. },
  478. emphasis:{
  479. iconStyle:{
  480. color:'red'
  481. }
  482. },
  483. },
  484. xAxis: {
  485. type: 'category',
  486. boundaryGap: false,
  487. data: dataX,
  488. axisLabel: {//x轴刻度
  489. textStyle: {
  490. color: '#333'
  491. },
  492. rotate:'45',
  493. formatter: function (value) {
  494. //x轴的文字改为竖版显示
  495. if(value.length>7){
  496. return value.slice(0,7)+'...'
  497. }
  498. return value;
  499. }
  500. },
  501. axisLine: {//x轴
  502. lineStyle:{
  503. color:'#AAAAAA'
  504. }
  505. }
  506. },
  507. yAxis: {
  508. type: 'value',
  509. axisLabel: {
  510. formatter: '{value} %',
  511. textStyle: {
  512. color: '#333333'
  513. }
  514. },
  515. axisLine: {//y轴
  516. show: false
  517. },
  518. axisTick: {
  519. show: false
  520. },
  521. splitLine:{//分割线
  522. lineStyle:{
  523. color:'#EFF3FC'
  524. }
  525. }
  526. },
  527. series: [
  528. {
  529. name: '甲级病历占比:',
  530. type: 'line',
  531. data: dataY,
  532. }
  533. ]
  534. };
  535. myCharts.setOption(option);
  536. }
  537. function lineChartSpecial(dataX,dataY){
  538. var myCharts = echarts.init(document.getElementById('lineChart'));
  539. var lengthNum = dataX.length;
  540. $(window).resize(function(){
  541. myCharts.resize()
  542. });
  543. option = {
  544. color: ['#3398DB'],
  545. tooltip: {
  546. trigger: 'axis',
  547. position: 'right',
  548. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  549. type: 'line' // 默认为直线,可选为:'line' | 'shadow'
  550. }
  551. },
  552. grid: {
  553. left: '3%',
  554. right: '4%',
  555. bottom: '3%',
  556. containLabel: true
  557. },
  558. xAxis: [
  559. {
  560. type: 'category',
  561. data: dataX,
  562. axisTick: {
  563. alignWithLabel: true
  564. },
  565. axisLabel: {//x轴刻度
  566. textStyle: {
  567. color: '#333'
  568. },
  569. rotate:45,
  570. formatter: function (value) {
  571. //x轴的文字改为竖版显示
  572. if(value.length>7){
  573. return value.slice(0,7)+'...'
  574. }
  575. return value;
  576. }
  577. },
  578. axisLine: {//x轴
  579. lineStyle:{
  580. color:'#AAAAAA'
  581. }
  582. }
  583. }
  584. ],
  585. yAxis: [
  586. {
  587. type: 'value',
  588. axisLine: {//y轴
  589. show: false
  590. },
  591. axisTick: {
  592. show: false
  593. },
  594. axisLabel: {//y轴刻度
  595. textStyle: {
  596. color: '#333333'
  597. }
  598. },
  599. splitLine:{//分割线
  600. lineStyle:{
  601. color:'#EFF3FC'
  602. }
  603. }
  604. }
  605. ],
  606. title:[{
  607. text: '合格率',
  608. top: 15,
  609. left: 10,
  610. textStyle: {
  611. fontSize: 14,
  612. color:'#666666',
  613. fontWeight: 400
  614. }
  615. }],
  616. series: [
  617. {
  618. name: '质控平均分',
  619. type: 'bar',
  620. barWidth: '23%',
  621. data: dataY
  622. }
  623. ]
  624. };
  625. myCharts.setOption(option);
  626. }
  627. //柱状图住院费用
  628. function barChartPay(dataX,dataY){
  629. var myCharts = echarts.init(document.getElementById('barChartPay'));
  630. var lengthNum = dataX.length;
  631. $(window).resize(function(){
  632. myCharts.resize()
  633. });
  634. option = {
  635. color: ['#3398DB'],
  636. tooltip: {
  637. trigger: 'axis',
  638. position: 'right',
  639. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  640. type: 'line' // 默认为直线,可选为:'line' | 'shadow'
  641. }
  642. },
  643. grid: {
  644. left: '3%',
  645. right: '4%',
  646. bottom: '3%',
  647. containLabel: true
  648. },
  649. xAxis: [
  650. {
  651. type: 'category',
  652. data: dataX,
  653. axisTick: {
  654. alignWithLabel: true
  655. },
  656. axisLabel: {//x轴刻度
  657. textStyle: {
  658. color: '#333'
  659. },
  660. rotate:45,
  661. formatter: function (value) {
  662. //x轴的文字改为竖版显示
  663. if(value.length>7){
  664. return value.slice(0,7)+'...'
  665. }
  666. return value;
  667. }
  668. },
  669. axisLine: {//x轴
  670. lineStyle:{
  671. color:'#AAAAAA'
  672. }
  673. }
  674. }
  675. ],
  676. yAxis: [
  677. {
  678. type: 'value',
  679. axisLine: {//y轴
  680. show: false
  681. },
  682. axisTick: {
  683. show: false
  684. },
  685. axisLabel: {//y轴刻度
  686. textStyle: {
  687. color: '#333333'
  688. }
  689. },
  690. splitLine:{//分割线
  691. lineStyle:{
  692. color:'#EFF3FC'
  693. }
  694. }
  695. }
  696. ],
  697. title:[{
  698. text: '分数',
  699. top: 15,
  700. left: 10,
  701. textStyle: {
  702. fontSize: 14,
  703. color:'#666666',
  704. fontWeight: 400
  705. }
  706. }],
  707. series: [
  708. {
  709. name: '质控平均分',
  710. type: 'bar',
  711. barWidth: '23%',
  712. data: dataY
  713. }
  714. ]
  715. };
  716. myCharts.setOption(option);
  717. }
  718. //柱状图住院日期
  719. function barChart(data,type){
  720. // console.log(data,type)
  721. var myChart = echarts.init(document.getElementById('barChart'));
  722. $(window).resize(function(){
  723. myChart.resize()
  724. });
  725. var posList = [
  726. 'left', 'right', 'top', 'bottom',
  727. 'inside',
  728. 'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
  729. 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
  730. ];
  731. let app = {}
  732. app.configParameters = {
  733. rotate: {
  734. min: -90,
  735. max: 90
  736. },
  737. align: {
  738. options: {
  739. left: 'left',
  740. center: 'center',
  741. right: 'right'
  742. }
  743. },
  744. verticalAlign: {
  745. options: {
  746. top: 'top',
  747. middle: 'middle',
  748. bottom: 'bottom'
  749. }
  750. },
  751. position: {
  752. options: echarts.util.reduce(posList, function (map, pos) {
  753. map[pos] = pos;
  754. return map;
  755. }, {})
  756. },
  757. distance: {
  758. min: 0,
  759. max: 100
  760. }
  761. };
  762. app.config = {
  763. rotate: 90,
  764. align: 'left',
  765. verticalAlign: 'middle',
  766. position: 'insideBottom',
  767. distance: 15,
  768. onChange: function () {
  769. var labelOption = {
  770. normal: {
  771. rotate: app.config.rotate,
  772. align: app.config.align,
  773. verticalAlign: app.config.verticalAlign,
  774. position: app.config.position,
  775. distance: app.config.distance
  776. }
  777. };
  778. myChart.setOption({
  779. series: [{
  780. label: labelOption
  781. }, {
  782. label: labelOption
  783. }, {
  784. label: labelOption
  785. }, {
  786. label: labelOption
  787. }]
  788. });
  789. }
  790. };
  791. var labelOption = {
  792. show: false,
  793. position: app.config.position,
  794. distance: app.config.distance,
  795. align: app.config.align,
  796. verticalAlign: app.config.verticalAlign,
  797. rotate: app.config.rotate,
  798. formatter: '{c} {name|{a}}',
  799. fontSize: 12,
  800. rich: {
  801. name: {
  802. textBorderColor: '#fff'
  803. }
  804. }
  805. };
  806. let dataX = []
  807. let data1 = []
  808. let data2 = []
  809. let data3 = []
  810. for(let i = 0;i < data.length;i++){
  811. dataX.push(data[i].name)
  812. data1.push(data[i].averageValue)//本月
  813. data2.push(data[i].lastAverageValue)//本年
  814. data3.push(data[i].lastYearAverageValue)//去年本月
  815. }
  816. option = {
  817. color: ['#5A8EEE', '#FAD336', '#37CBCB'],
  818. tooltip: {
  819. trigger: 'axis',
  820. axisPointer: {
  821. type: 'shadow'
  822. }
  823. },
  824. grid: {
  825. left: '3%',
  826. right: '4%',
  827. bottom: '3%',
  828. containLabel: true
  829. },
  830. title:[{
  831. text: slideType==1?'天数':'元',
  832. top: 15,
  833. left: 10,
  834. textStyle: {
  835. fontSize: 14,
  836. color:'#666666',
  837. fontWeight: 400
  838. }
  839. }],
  840. legend: {
  841. itemWidth :10,
  842. itemHeight :10,
  843. right:15,
  844. top:15,
  845. selectedMode:false,
  846. formatter: function (name) {
  847. return name;
  848. }
  849. },
  850. toolbox: {
  851. show: false,
  852. orient: 'vertical',
  853. left: 'right',
  854. top: 'center',
  855. feature: {
  856. mark: {show: true},
  857. dataView: {show: true, readOnly: false},
  858. magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
  859. restore: {show: true},
  860. saveAsImage: {show: true}
  861. }
  862. },
  863. xAxis: [
  864. {
  865. type: 'category',
  866. axisTick: {show: false},
  867. data: dataX,
  868. axisLabel: {//x轴刻度
  869. textStyle: {
  870. color: '#333'
  871. },
  872. rotate:'45',
  873. formatter: function (value) {
  874. //x轴的文字改为竖版显示
  875. if(value.length>7){
  876. return value.slice(0,7)+'...'
  877. }
  878. return value;
  879. }
  880. },
  881. axisLine: {//x轴
  882. lineStyle:{
  883. color:'#AAAAAA'
  884. }
  885. },
  886. }
  887. ],
  888. yAxis: [
  889. {
  890. type: 'value',
  891. axisLine: {//y轴
  892. show: false
  893. },
  894. axisTick: {
  895. show: false
  896. },
  897. splitLine:{//分割线
  898. lineStyle:{
  899. color:'#EFF3FC'
  900. }
  901. }
  902. }
  903. ],
  904. series: [
  905. {
  906. name: type==1?'上月':'',
  907. type: 'bar',
  908. barGap: 0,
  909. label: labelOption,
  910. barWidth: '15%',
  911. data: type==1?data2:[]
  912. },
  913. {
  914. name: type==1?'去年本月':'去年',
  915. type: 'bar',
  916. label: labelOption,
  917. barWidth: '15%',
  918. data: data3
  919. },
  920. {
  921. name: type==1?'本月':'本年',
  922. type: 'bar',
  923. label: labelOption,
  924. barWidth: '15%',
  925. data: data1
  926. }
  927. ]
  928. };
  929. myChart.setOption(option);
  930. }
  931. //空心饼图
  932. function emptyCircle(data){
  933. // console.log(data,1111111111)
  934. var myChart = echarts.init(document.getElementById('emptyCircle'));
  935. $(window).resize(function(){
  936. myChart.resize()
  937. });
  938. let bgColor = '#fff';
  939. let title = '总量';
  940. let color = ['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336','#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'];
  941. let echartData = data;
  942. let total = 0;
  943. for(let i = 0;i < echartData.length;i++){
  944. total += echartData[i].num
  945. }
  946. option = {
  947. backgroundColor: bgColor,
  948. color: color,
  949. title: [{
  950. text: data.length>0?'{val|' + total + '}\n{name|' + title + '}':'',
  951. top: 'center',
  952. left: 'center',
  953. textStyle: {
  954. rich: {
  955. val: {
  956. fontSize: 24,
  957. color: '#333',
  958. fontWeight: 'bold',
  959. padding: [10, 0]
  960. },
  961. name: {
  962. fontSize: 12,
  963. fontWeight: 'normal',
  964. color: '#777',
  965. }
  966. }
  967. }
  968. }],
  969. tooltip: {
  970. trigger: 'item',
  971. // formatter: '{b} : {c} ({d}%)',
  972. formatter:function(item){
  973. const {name, num, percentStr} = item.data
  974. return `${name} : ${num} (${percentStr})`
  975. }
  976. },
  977. series: [{
  978. name: '',
  979. type: 'pie',
  980. radius: ['70%', '90%'],
  981. data: echartData,
  982. hoverAnimation:true,
  983. hoverOffset:5,
  984. itemStyle: {
  985. normal: {
  986. borderColor: bgColor,
  987. borderWidth: 2
  988. }
  989. },
  990. labelLine: {
  991. normal: {
  992. length: 20,
  993. length2: 120,
  994. lineStyle: {
  995. color: '#e6e6e6'
  996. }
  997. }
  998. },
  999. label: {
  1000. normal: {
  1001. show:false,
  1002. formatter: params => {
  1003. return params.name == 'A类'?params.name:''
  1004. },
  1005. padding: [0 , -100, 25, -100],
  1006. rich: {
  1007. icon: {
  1008. fontSize: 16
  1009. },
  1010. name: {
  1011. fontSize: 14,
  1012. padding: [0, 10, 0, 4],
  1013. color: '#666666'
  1014. },
  1015. value: {
  1016. fontSize: 18,
  1017. fontWeight: 'bold',
  1018. color: '#333333'
  1019. }
  1020. }
  1021. }
  1022. },
  1023. }]
  1024. };
  1025. myChart.setOption(option);
  1026. }
  1027. function emptyCircleB(data){
  1028. var myChart = echarts.init(document.getElementById('emptyCircleB'));
  1029. $(window).resize(function(){
  1030. myChart.resize()
  1031. });
  1032. let bgColor = '#fff';
  1033. let title = '总量';
  1034. let color = ['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336','#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'];
  1035. let echartData = data;
  1036. let total = 0;
  1037. for(let i = 0;i < echartData.length;i++){
  1038. total += echartData[i].num
  1039. }
  1040. option = {
  1041. backgroundColor: bgColor,
  1042. color: color,
  1043. title: [{
  1044. text: data.length>0?'{val|' + total + '}\n{name|' + title + '}':'',
  1045. top: 'center',
  1046. left: 'center',
  1047. textStyle: {
  1048. rich: {
  1049. val: {
  1050. fontSize: 24,
  1051. color: '#333',
  1052. fontWeight: 'bold',
  1053. padding: [10, 0]
  1054. },
  1055. name: {
  1056. fontSize: 12,
  1057. fontWeight: 'normal',
  1058. color: '#777',
  1059. }
  1060. }
  1061. }
  1062. }],
  1063. tooltip: {
  1064. trigger: 'item',
  1065. position: 'right',
  1066. // formatter: '{b} : {c} ({d}%)',
  1067. formatter:function(item){
  1068. const {name, num, percentStr} = item.data
  1069. return `${name} : ${num} (${percentStr})`
  1070. }
  1071. },
  1072. series: [{
  1073. name: '',
  1074. type: 'pie',
  1075. radius: ['70%', '90%'],
  1076. data: echartData,
  1077. hoverAnimation:true,
  1078. hoverOffset:5,
  1079. itemStyle: {
  1080. normal: {
  1081. borderColor: bgColor,
  1082. borderWidth: 2
  1083. }
  1084. },
  1085. labelLine: {
  1086. normal: {
  1087. length: 20,
  1088. length2: 120,
  1089. lineStyle: {
  1090. color: '#e6e6e6'
  1091. }
  1092. }
  1093. },
  1094. label: {
  1095. normal: {
  1096. show:false,
  1097. formatter: params => {
  1098. return params.name == 'A类'?params.name:''
  1099. },
  1100. padding: [0 , -100, 25, -100],
  1101. rich: {
  1102. icon: {
  1103. fontSize: 16
  1104. },
  1105. name: {
  1106. fontSize: 14,
  1107. padding: [0, 10, 0, 4],
  1108. color: '#666666'
  1109. },
  1110. value: {
  1111. fontSize: 18,
  1112. fontWeight: 'bold',
  1113. color: '#333333'
  1114. }
  1115. }
  1116. }
  1117. },
  1118. }]
  1119. };
  1120. myChart.setOption(option);
  1121. }
  1122. //缺陷列表渲染
  1123. function queList(data){
  1124. let strAll = '',tmp = `mm
  1125. <tr class="thead">
  1126. <td class="td01">排名</td>
  1127. <td class="td02">缺陷详情</td>
  1128. <td class="td03">数量</td>
  1129. <td class="td04">占比</td>
  1130. </tr>`
  1131. for(let i = 0;i < data.length;i++){
  1132. strAll += `
  1133. <tr>
  1134. <td style="text-align:center;"><i style="background:${i < 3?'#bea571':'#eff3fc'};color:${i < 3?'#fff':'#999'};">${i+1}</i></td>
  1135. <td><p class="td02name">${data[i].name}</p></td>
  1136. <td>${data[i].num}</td>
  1137. <td>${data[i].percentStr}</td>
  1138. </tr>
  1139. `
  1140. }
  1141. $(".qtable").html(tmp+strAll)
  1142. }
  1143. //饼图列表注释渲染
  1144. function panDetail(data){
  1145. let color = ['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336','#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'];
  1146. let strAll = '';
  1147. for(let i = 0;i < data.length;i++){
  1148. strAll += `
  1149. <tr class="explainLi">
  1150. <td class="deptName" title="${data[i].name}">
  1151. <p class="smp"><i class="tip" style="background-color:${color[i]}"></i>${data[i].name}</p>
  1152. </td>
  1153. <td class="deptNum">${data[i].num}</td>
  1154. <td class="percent">(${data[i].percentStr})</td>
  1155. </tr>
  1156. `
  1157. }
  1158. $(".explainPanT table").html(strAll);
  1159. $(".explainPan").css({
  1160. marginTop:-($(".explainPan").height()/2-20)+'px'
  1161. })
  1162. }
  1163. function panDetailB(data){
  1164. let color = ['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336','#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'];
  1165. let strAll = '';
  1166. for(let i = 0;i < data.length;i++){
  1167. strAll += `
  1168. <tr class="explainLi">
  1169. <td class="deptName" title="${data[i].name}">
  1170. <p><i class="tip" style="background-color:${color[i]}"></i>${data[i].name}</p>
  1171. </td>
  1172. <td class="deptNum">${data[i].num}</td>
  1173. <td class="percent">(${data[i].percentStr})</td>
  1174. </tr>
  1175. `
  1176. }
  1177. $(".explainPanB table").html(strAll);
  1178. $(".explainPan").css({
  1179. marginTop:-($(".explainPan").height()/2-20)+'px'
  1180. })
  1181. }
  1182. //时间获取
  1183. function getTimeDetail(){
  1184. const d = new Date();
  1185. const days = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  1186. let sec = d.getSeconds()
  1187. let min = d.getMinutes()
  1188. let hour = d.getHours()
  1189. let str = `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日 / ${days[d.getDay()]} / ${hour>9?hour:'0'+hour}:${min>9?min:'0'+min}:${sec>9?sec:'0'+sec}`
  1190. $(".dateDetail").html(str)
  1191. }