index.vue 34 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079
  1. <template>
  2. <div class="app-container">
  3. <div class="filter-container">
  4. <div class="block">
  5. <el-date-picker v-model="monthDate" :clearable="false" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" @change="changeMonth()" />
  6. </div>
  7. </div>
  8. <el-row v-if="isChart1" style="position: relative;">
  9. <p style="position: absolute;top:-12px;left:40%;color:rgb(130, 165, 252);background:rgb(230, 243, 255);border:1px solid rgb(130, 165, 252);padding:10px;border-radius:10px">
  10. 燃动费用{{ total }}万元
  11. </p>
  12. <el-radio-group v-model="radio1" class="group" @change="changeGroup">
  13. <el-radio :label="'集团'">集团</el-radio>
  14. <el-radio :label="'一中心'"></el-radio>
  15. <el-radio :label="'二中心'"></el-radio>
  16. <el-radio :label="'三中心'"></el-radio>
  17. </el-radio-group>
  18. <el-col :span="24">
  19. <div id="chart1" style="width: 100%;height:400px;" />
  20. </el-col>
  21. </el-row>
  22. <el-row v-if="isChart1" style="position: relative;">
  23. <p style="position: absolute;top:-12px;left:40%;color:rgb(130, 165, 252);background:rgb(230, 243, 255);border:1px solid rgb(130, 165, 252);padding:10px;border-radius:10px">
  24. 柴油用量
  25. </p>
  26. <el-col :span="24">
  27. <div id="chart11" style="width: 100%;height:400px;" />
  28. </el-col>
  29. </el-row>
  30. <el-row v-if="isChart1" style="position: relative;">
  31. <el-col :span="24">
  32. <div id="chart12" style="width: 100%;height:400px;" />
  33. </el-col>
  34. </el-row>
  35. <el-row v-if="isChart1" style="position: relative;">
  36. <el-col :span="24">
  37. <div id="chart2" style="width: 100%;height:400px;" />
  38. </el-col>
  39. </el-row>
  40. <el-row style="position: relative;">
  41. <el-col :span="12">
  42. <div style="height: 50px;">
  43. <el-select style="float: right;margin-right: 20px;" v-model="pastureName" multiple :multiple-limit="5" collapse-tags placeholder="牧场" @change="changePasture()">
  44. <el-option v-for="item in pastureList" :key="item.id" :label="item.name" :value="item.name"> </el-option>
  45. </el-select>
  46. </div>
  47. <div id="chart4" style="width: 100%;height:400px;" />
  48. </el-col>
  49. <el-col :span="12">
  50. <div style="height: 50px;">
  51. <el-select style="float: right;margin-right: 20px;" v-model="getChart5Parm.parammaps.deptName" placeholder="部门" @change="changeDept()">
  52. <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.name"> </el-option>
  53. </el-select>
  54. </div>
  55. <div id="chart5" style="width: 100%;height:400px;" />
  56. </el-col>
  57. </el-row>
  58. <el-row style="position: relative;">
  59. <el-col :span="12">
  60. <div id="chart6" style="width: 100%;height:400px;" />
  61. </el-col>
  62. <el-col :span="12">
  63. <div id="chart7" style="width: 100%;height:400px;" />
  64. </el-col>
  65. </el-row>
  66. <el-row style="position: relative;">
  67. <el-col :span="12">
  68. <div id="chart8" style="width: 100%;height:400px;" />
  69. </el-col>
  70. <el-col :span="12">
  71. <div id="chart9" style="width: 100%;height:400px;" />
  72. </el-col>
  73. </el-row>
  74. </div>
  75. </template>
  76. <script>
  77. import echarts from 'echarts'
  78. import { GetDataByName,GetDataByNames, GetReportform, checkButtons,getJson } from '@/api/common'
  79. import Cookies from 'js-cookie'
  80. import { parseTime } from '@/utils/index.js'
  81. export default {
  82. name: 'QueryCombustion',
  83. data() {
  84. return {
  85. monthDate: [new Date(),new Date()],
  86. pastureName:'',
  87. yearDate: new Date(),
  88. year: new Date().getFullYear(),
  89. month: new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1,
  90. type:0,
  91. typeList:[{id:0,name:'柴油'},{id:1,name:'天然气'},{id:2,name:'煤炭'},{id:3,name:'生物质颗粒'}],
  92. pastureList:[],
  93. deptList:[{id:0,name:'挤奶处'},{id:1,name:'犊牛处'},{id:2,name:'办公室'},{id:3,name:'饲养处'},{id:4,name:'兽医处'},{id:5,name:'品控处'},{id:6,name:'设备处'}],
  94. total: '',
  95. radio1:'集团',
  96. pastureName:'',
  97. isChart1: [],
  98. chart_data1: {},
  99. getChart1Parm: {
  100. name: '',
  101. parammaps: {
  102. receiveTime: new Date().getFullYear(),
  103. pastureName: Cookies.get('pasturename')
  104. }
  105. },
  106. isChart11: [],
  107. chart_data11: {},
  108. getChart11Parm: {
  109. name: '',
  110. parammaps: {
  111. receiveTime: new Date().getFullYear(),
  112. pastureName: Cookies.get('pasturename')
  113. }
  114. },
  115. isChart12: [],
  116. chart_data12: {},
  117. getChart12Parm: {
  118. name: '',
  119. parammaps: {
  120. receiveTime: new Date().getFullYear(),
  121. pastureName: Cookies.get('pasturename')
  122. }
  123. },
  124. radio2:1,
  125. isChart2: [],
  126. chart_data2: {},
  127. getChart2Parm: {
  128. name: '',
  129. parammaps: {
  130. receiveTime: new Date().getFullYear(),
  131. pastureName: Cookies.get('pasturename')
  132. }
  133. },
  134. radio3:1,
  135. isChart3: [],
  136. chart_data3: {},
  137. getChart3Parm: {
  138. name: '',
  139. parammaps: {
  140. receiveTime: new Date().getFullYear(),
  141. pastureName: Cookies.get('pasturename')
  142. }
  143. },
  144. isChart4: [],
  145. chart_data4: {},
  146. getChart4Parm: {
  147. name: '',
  148. parammaps: {
  149. receiveTime: new Date().getFullYear(),
  150. pastureName: Cookies.get('pasturename')
  151. }
  152. },
  153. isChart5: [],
  154. chart_data5: {},
  155. getChart5Parm: {
  156. name: '',
  157. parammaps: {
  158. receiveTime: new Date().getFullYear(),
  159. pastureName: Cookies.get('pasturename'),
  160. deptName:''
  161. }
  162. },
  163. isChart6: [],
  164. chart_data6: {},
  165. getChart6Parm: {
  166. name: '',
  167. parammaps: {
  168. receiveTime: new Date().getFullYear(),
  169. pastureName: Cookies.get('pasturename')
  170. }
  171. },
  172. isChart7: [],
  173. chart_data7: {},
  174. getChart7Parm: {
  175. name: '',
  176. parammaps: {
  177. receiveTime: new Date().getFullYear(),
  178. pastureName: Cookies.get('pasturename')
  179. }
  180. },
  181. isChart8: [],
  182. chart_data8: {},
  183. getChart8Parm: {
  184. name: '',
  185. parammaps: {
  186. receiveTime: new Date().getFullYear(),
  187. pastureName: Cookies.get('pasturename')
  188. }
  189. },
  190. isChart9: [],
  191. chart_data9: {},
  192. getChart9Parm: {
  193. name: '',
  194. parammaps: {
  195. receiveTime: new Date().getFullYear(),
  196. pastureName: Cookies.get('pasturename')
  197. }
  198. },
  199. }
  200. },
  201. created() {
  202. this.get_select_list()
  203. const that = this
  204. GetDataByName({ 'name': 'getUserPCButtons', 'parammaps': { 'jwt_username': Cookies.get('name') }}).then(response => {
  205. that.buttons = response.data.list
  206. that.get_auto_buttons()
  207. })
  208. },
  209. mounted() {
  210. },
  211. methods: {
  212. get_select_list() {
  213. var send_data = [
  214. { name: 'findAllPasture', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': Cookies.get('pastureid') }},
  215. ]
  216. GetDataByNames(send_data).then(response => {
  217. this.pastureList = response.data.findAllPasture.list
  218. })
  219. },
  220. changeMonth(){
  221. if(this.isChart1){
  222. this.getChart1()
  223. this.getChart11()
  224. this.getChart12()
  225. this.getChart2()
  226. }else{
  227. this.pastureName = [Cookies.get('pasturename')]
  228. this.getChart4()
  229. this.getChart6()
  230. }
  231. },
  232. changeGroup(){
  233. this.getChart1()
  234. this.getChart11()
  235. this.getChart12()
  236. this.getChart2()
  237. },
  238. changePasture(){
  239. this.getChart4()
  240. this.getChart5()
  241. this.getChart6()
  242. this.getChart7()
  243. },
  244. changeDept(){
  245. this.getChart5()
  246. },
  247. changeType(){
  248. },
  249. get_auto_buttons() {
  250. // 图1
  251. const chart1 = 'report:queryCombustion:pastures'
  252. const isChart1 = checkButtons(this.$store.state.user.buttons, chart1)
  253. this.isChart1 = isChart1
  254. if(this.isChart1){
  255. this.getChart1()
  256. this.getChart11()
  257. this.getChart12()
  258. this.getChart2()
  259. }else{
  260. this.pastureName = [Cookies.get('pasturename')]
  261. this.getChart4()
  262. this.getChart6()
  263. }
  264. },
  265. // 各牧场燃动费用对比
  266. getChart1() {
  267. let url = '/authdata/ignition/nowwater?'
  268. let startTime = parseTime(this.monthDate[0],'{y}-{m}')
  269. let endTime = parseTime(this.monthDate[1],'{y}-{m}')
  270. let radio = ''
  271. if(this.radio1 == '集团'){
  272. radio = ''
  273. }else{
  274. radio = this.radio1
  275. }
  276. let data = 'startTime=' + startTime
  277. + '&endTime=' + endTime
  278. + '&center=' + radio
  279. getJson(url,data).then(response => {
  280. console.log('各牧场燃动费用对比==>图1', response)
  281. if(response.data){
  282. this.chart_data1.data1 = response.data.nowYear
  283. this.chart_data1.data2 = response.data.lastYear
  284. this.chart_data1.xdata = response.data.pasture
  285. this.pastureName = [response.data.pasture[0]]
  286. this.total = response.data.all
  287. }else{
  288. this.chart_data1.data1 = []
  289. this.chart_data1.data2 = []
  290. this.chart_data1.xdata = []
  291. this.total = 0
  292. }
  293. this.roadChart1(this.chart_data1)
  294. this.getChart4()
  295. this.getChart6()
  296. })
  297. },
  298. // 各牧场柴油用量对比
  299. getChart11() {
  300. let url = '/authdata/diesel/nowwater?'
  301. let startTime = parseTime(this.monthDate[0],'{y}-{m}')
  302. let endTime = parseTime(this.monthDate[1],'{y}-{m}')
  303. let radio = ''
  304. if(this.radio1 == '集团'){
  305. radio = ''
  306. }else{
  307. radio = this.radio1
  308. }
  309. let data = 'startTime=' + startTime
  310. + '&endTime=' + endTime
  311. + '&center=' + radio
  312. getJson(url,data).then(response => {
  313. console.log('各牧场柴油用量对比==>图2', response)
  314. if(response.data){
  315. this.chart_data11.data1 = response.data.nowYear
  316. this.chart_data11.data2 = response.data.lastYear
  317. this.chart_data11.xdata = response.data.pasture
  318. }else{
  319. this.chart_data11.data1 = []
  320. this.chart_data11.data2 = []
  321. this.chart_data11.xdata = []
  322. }
  323. this.roadChart11(this.chart_data11)
  324. })
  325. },
  326. // 单头牛柴油用量
  327. getChart12() {
  328. let url = '/authdata/diesel/rate?'
  329. let startTime = parseTime(this.monthDate[0],'{y}-{m}')
  330. let endTime = parseTime(this.monthDate[1],'{y}-{m}')
  331. let radio = ''
  332. if(this.radio1 == '集团'){
  333. radio = ''
  334. }else{
  335. radio = this.radio1
  336. }
  337. let data = 'startTime=' + startTime
  338. + '&endTime=' + endTime
  339. + '&center=' + radio
  340. getJson(url,data).then(response => {
  341. console.log('单头牛柴油用量==>图3', response)
  342. if(response.data){
  343. this.chart_data12.data1 = response.data.actual
  344. this.chart_data12.line = response.data.line
  345. this.chart_data12.xdata = response.data.pasture
  346. }else{
  347. this.chart_data12.data1 = []
  348. this.chart_data12.line = 0
  349. this.chart_data12.xdata = []
  350. }
  351. this.roadChart12(this.chart_data12)
  352. })
  353. },
  354. // 单头牛燃动费用
  355. getChart2() {
  356. let url = '/authdata/ignition/rate?'
  357. let startTime = parseTime(this.monthDate[0],'{y}-{m}')
  358. let endTime = parseTime(this.monthDate[1],'{y}-{m}')
  359. let radio = ''
  360. if(this.radio1 == '集团'){
  361. radio = ''
  362. }else{
  363. radio = this.radio1
  364. }
  365. let data = 'startTime=' + startTime
  366. + '&endTime=' + endTime
  367. + '&center=' + radio
  368. getJson(url,data).then(response => {
  369. console.log('单头牛燃动费用==>图4', response)
  370. if(response.data){
  371. this.chart_data2.data1 = response.data.actual
  372. this.chart_data2.data2 = response.data.budget
  373. this.chart_data2.xdata = response.data.pasture
  374. this.chart_data2.line = response.data.line
  375. }else{
  376. this.chart_data2.data1 = []
  377. this.chart_data2.data2 = []
  378. this.chart_data2.xdata = []
  379. this.chart_data2.line = 0
  380. }
  381. this.roadChart2(this.chart_data2)
  382. })
  383. },
  384. // 牧场每月单头牛用油量对比
  385. getChart4() {
  386. this.getChart5Parm.parammaps.deptName = this.deptList[0].name
  387. let url = '/authdata/diesel/perhead?'
  388. let startTime = parseTime(this.monthDate[0],'{y}-{m}')
  389. let endTime = parseTime(this.monthDate[1],'{y}-{m}')
  390. let radio = ''
  391. if(this.radio1 == '集团'){
  392. radio = ''
  393. }else{
  394. radio = this.radio1
  395. }
  396. let pastureId = []
  397. console.log(this.pastureList,'pastureList')
  398. this.pastureList.forEach((item)=>{
  399. if(this.pastureName){
  400. this.pastureName.forEach((item1)=>{
  401. if(item.name == item1){
  402. pastureId.push(item.id)
  403. }
  404. })
  405. }
  406. })
  407. console.log(pastureId,'pastureId')
  408. let data = 'startTime=' + startTime
  409. + '&endTime=' + endTime
  410. + '&center=' + radio
  411. + '&pastureId=' + pastureId.toString()
  412. getJson(url,data).then(response => {
  413. console.log('牧场每月单头牛用油量对比==>图5', response)
  414. if(response.data){
  415. this.chart_data4.data1 = response.data.data3
  416. this.chart_data4.data_name = response.data.data1
  417. this.chart_data4.xdata = response.data.data2
  418. }else{
  419. this.chart_data4.data1 = []
  420. this.chart_data4.data_name = []
  421. this.chart_data4.xdata = []
  422. }
  423. if(response.data.data1 == null){
  424. this.chart_data4.data_name = []
  425. }
  426. if(response.data.data2 == null ){
  427. this.chart_data4.xdata = []
  428. this.getChart5Parm.parammaps.date = ''
  429. }else{
  430. this.getChart5Parm.parammaps.date = response.data.data2[0]
  431. }
  432. if(response.data.data3 == null){
  433. this.chart_data4.data1 = []
  434. }
  435. console.log(this.chart_data4,'chart_data4')
  436. this.roadChart4(this.chart_data4)
  437. this.getChart5()
  438. })
  439. },
  440. // XX月部门统计
  441. getChart5() {
  442. let startTime = ''
  443. let endTime = ''
  444. if(this.getChart5Parm.parammaps.date !== ''){
  445. startTime = parseTime(this.getChart5Parm.parammaps.date,'{y}-{m}') + '-01'
  446. let date = new Date(this.getChart5Parm.parammaps.date);
  447. let year = date.getFullYear()
  448. let month = date.getMonth() + 1
  449. let lastDay = new Date(year, month, 0).getDate();
  450. endTime = parseTime(this.getChart5Parm.parammaps.date,'{y}-{m}') + '-' + lastDay
  451. }else{
  452. startTime = ''
  453. endTime = ''
  454. }
  455. let data = {
  456. name:"getdeptSumMonthDiesel",
  457. parammaps:{
  458. startTime:startTime,
  459. endTime:endTime,
  460. pastureName:this.pastureName.toString(),
  461. departmentName:this.getChart5Parm.parammaps.deptName,
  462. },
  463. }
  464. GetDataByName(data).then(response => {
  465. console.log('XX月部门统计==>图6', response)
  466. let data1 = []
  467. let xdata = []
  468. if(response.data){
  469. response.data.list.forEach((item)=>{
  470. data1.push(item.value)
  471. xdata.push(item.name)
  472. })
  473. }
  474. this.chart_data5 = {
  475. data1:data1,
  476. xdata:xdata
  477. }
  478. this.roadChart5(this.chart_data5)
  479. })
  480. },
  481. // 牧场每月用油量对比
  482. getChart6() {
  483. let startTime = parseTime(this.monthDate[0],'{y}-{m}') + '-01'
  484. let date = this.monthDate[1];
  485. let year = date.getFullYear()
  486. let month = date.getMonth() + 1
  487. let lastDay = new Date(year, month, 0).getDate();
  488. let endTime = parseTime(this.monthDate[1],'{y}-{m}') + '-' + lastDay
  489. let data = {
  490. name:"getPastureSumMonthDiesel",
  491. parammaps:{
  492. startTime:startTime,
  493. endTime:endTime,
  494. pastureName:this.pastureName.toString(),
  495. },
  496. }
  497. GetReportform(data).then(response => {
  498. console.log('牧场每月用油量对比==>图7', response)
  499. if(response.data.chart_data){
  500. this.chart_data6 = {
  501. data1:response.data.chart_data.nowYear,
  502. data_name:response.data.chart_data.pastureName,
  503. xdata:response.data.chart_data.months
  504. }
  505. }else{
  506. this.chart_data6 = {
  507. data1:[],
  508. data_name:[],
  509. xdata:[]
  510. }
  511. }
  512. if(response.data.chart_data.months == null ){
  513. this.getChart7Parm.parammaps.date = ''
  514. }else{
  515. this.getChart7Parm.parammaps.date = response.data.chart_data.months[0]
  516. this.getChart8Parm.parammaps.date = response.data.chart_data.months[0]
  517. this.getChart9Parm.parammaps.date = response.data.chart_data.months[0]
  518. }
  519. this.roadChart6(this.chart_data6)
  520. this.getChart7()
  521. this.getChart8()
  522. })
  523. },
  524. // XX月每日用油量
  525. getChart7() {
  526. let data = {
  527. name:"getPastureSumDayDiesel",
  528. parammaps:{
  529. startTime:this.getChart7Parm.parammaps.date,
  530. pastureName:this.pastureName.toString(),
  531. },
  532. }
  533. GetReportform(data).then(response => {
  534. console.log('XX月每日用油量==>图8', response)
  535. if(response.data.chart_data){
  536. this.chart_data7 = {
  537. data1:response.data.chart_data.nowYear,
  538. data_name:response.data.chart_data.pastureName,
  539. xdata:response.data.chart_data.day
  540. }
  541. }else{
  542. this.chart_data7 = {
  543. data1:[],
  544. data_name:[],
  545. xdata:[]
  546. }
  547. }
  548. this.roadChart7(this.chart_data7)
  549. })
  550. },
  551. // XX月部门统计
  552. getChart8() {
  553. let startTime = parseTime(this.getChart8Parm.parammaps.date,'{y}-{m}') + '-01'
  554. let date = new Date(this.getChart8Parm.parammaps.date);
  555. let year = date.getFullYear()
  556. let month = date.getMonth() + 1
  557. let lastDay = new Date(year, month, 0).getDate();
  558. let endTime = parseTime(this.getChart8Parm.parammaps.date,'{y}-{m}') + '-' + lastDay
  559. let data = {
  560. name:"getdeptSumMonthDiesel",
  561. parammaps:{
  562. startTime:startTime,
  563. endTime:endTime,
  564. pastureName:this.pastureName.toString(),
  565. departmentName:''
  566. },
  567. }
  568. GetDataByName (data).then(response => {
  569. console.log('XX月部门统计==>图9', response)
  570. let data1 = []
  571. let xdata = []
  572. if(response.data){
  573. response.data.list.forEach((item)=>{
  574. data1.push(item.value)
  575. xdata.push(item.name)
  576. })
  577. }
  578. this.chart_data8 = {
  579. data1:data1,
  580. xdata:xdata
  581. }
  582. if(response.data.list){
  583. this.getChart9Parm.parammaps.deptName = response.data.list[0].name
  584. }
  585. this.roadChart8(this.chart_data8)
  586. this.getChart9()
  587. })
  588. },
  589. // XX部门用油量
  590. getChart9() {
  591. let data = {
  592. name:"geteqclassSumMonthDiesel",
  593. parammaps:{
  594. startTime:this.getChart9Parm.parammaps.date,
  595. pastureName:this.pastureName.toString(),
  596. deptName:this.getChart9Parm.parammaps.deptName
  597. },
  598. }
  599. GetReportform(data).then(response => {
  600. console.log('XX部门用油量==>图10', response)
  601. if(response.data.chart_data){
  602. this.chart_data9 = {
  603. data1:response.data.eqCost,
  604. xdata:response.data.typeName
  605. }
  606. }else{
  607. this.chart_data9 = {
  608. data1:[],
  609. xdata:[]
  610. }
  611. }
  612. this.roadChart9(this.chart_data9)
  613. })
  614. },
  615. // 各牧场燃动费用对比
  616. roadChart1(chart_data) {
  617. if (this.chart1 != null) {
  618. this.chart1.dispose()
  619. }
  620. this.chart1 = echarts.init(document.getElementById('chart1'))
  621. var option = {
  622. title: { text: '各牧场燃动费用对比', textStyle: { color: '#769cfc' }},
  623. tooltip: { trigger: 'axis' },
  624. legend: {
  625. data: ['燃动费用', '预算'],
  626. right: 40
  627. },
  628. color: ['#2dc0e8', '#769cfc'],
  629. grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
  630. xAxis: [{ type: 'category', name: '牧场',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
  631. yAxis: [{ type: 'value', name: '元', axisLabel: { formatter: '{value}万' }}],
  632. series: [
  633. {
  634. name: '燃动费用',
  635. type: 'bar',
  636. data: chart_data.data1,
  637. barMaxWidth:20,
  638. emphasis: { label: { show: true, position: 'inside' }}
  639. },
  640. {
  641. name: '预算',
  642. type: 'bar',
  643. barMaxWidth:20,
  644. data: chart_data.data2,
  645. emphasis: { label: { show: true, position: 'inside' }}
  646. }
  647. ]
  648. }
  649. this.chart1.setOption(option)
  650. window.onresize = function() {
  651. this.chart1.resize()
  652. }
  653. var that = this
  654. that.chart1.on('click', function(param, i) {
  655. that.pastureName = [param.name]
  656. that.getChart4()
  657. that.getChart5()
  658. that.getChart6()
  659. that.getChart7()
  660. that.getChart8()
  661. that.getChart9()
  662. })
  663. },
  664. // 各牧场柴油用量对比
  665. roadChart11(chart_data) {
  666. if (this.chart11 != null) {
  667. this.chart11.dispose()
  668. }
  669. this.chart11 = echarts.init(document.getElementById('chart11'))
  670. var option = {
  671. title: { text: '各牧场柴油用量对比', textStyle: { color: '#769cfc' }},
  672. tooltip: { trigger: 'axis' },
  673. legend: {
  674. data: ['柴油用量', '去年同期'],
  675. right: 40
  676. },
  677. color: ['#2dc0e8', '#769cfc'],
  678. grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
  679. xAxis: [{ type: 'category', name: '牧场',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
  680. yAxis: [{ type: 'value', name: '用量(万升)', axisLabel: { formatter: '{value}' }}],
  681. series: [
  682. {
  683. name: '柴油用量',
  684. type: 'bar',
  685. data: chart_data.data1,
  686. barMaxWidth:20,
  687. emphasis: { label: { show: true, position: 'inside' }}
  688. },
  689. {
  690. name: '去年同期',
  691. type: 'bar',
  692. barMaxWidth:20,
  693. data: chart_data.data2,
  694. emphasis: { label: { show: true, position: 'inside' }}
  695. }
  696. ]
  697. }
  698. this.chart11.setOption(option)
  699. window.onresize = function() {
  700. this.chart11.resize()
  701. }
  702. var that = this
  703. this.chart11.on('click', function(param, i) {
  704. // console.log(param)
  705. })
  706. },
  707. // 单头牛柴油用量
  708. roadChart12(chart_data) {
  709. if (this.chart12 != null) {
  710. this.chart12.dispose()
  711. }
  712. this.chart12 = echarts.init(document.getElementById('chart12'))
  713. var option = {
  714. title: { text: '单头牛柴油用量',left:'center', textStyle: { color: '#769cfc' }},
  715. tooltip: { trigger: 'axis' },
  716. legend: {
  717. data: ['实际费用'],
  718. right: 40
  719. },
  720. color: ['#2dc0e8', '#769cfc'],
  721. grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
  722. xAxis: [{ type: 'category', name: '牧场',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
  723. yAxis: [{ type: 'value', name: '用量(升)', axisLabel: { formatter: '{value}' }}],
  724. series: [
  725. {
  726. name: '实际费用',
  727. type: 'bar',
  728. data: chart_data.data1,
  729. barMaxWidth:20,
  730. markLine:{ data:[ {yAxis:chart_data.line} ] },
  731. emphasis: { label: { show: true, position: 'inside' }}
  732. },
  733. ]
  734. }
  735. this.chart12.setOption(option)
  736. window.onresize = function() {
  737. this.chart12.resize()
  738. }
  739. var that = this
  740. this.chart12.on('click', function(param, i) {
  741. // console.log(param)
  742. })
  743. },
  744. // 单头牛燃动费用
  745. roadChart2(chart_data) {
  746. if (this.chart2 != null) {
  747. this.chart2.dispose()
  748. }
  749. this.chart2 = echarts.init(document.getElementById('chart2'))
  750. var option = {
  751. title: { text: '单头牛燃动费用', left:'center',textStyle: { color: '#769cfc' }},
  752. tooltip: { trigger: 'axis' },
  753. legend: {
  754. data: ['实际费用','预算',],
  755. right: 40
  756. },
  757. color: ['#2dc0e8', '#769cfc', '#FFB800'],
  758. grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
  759. xAxis: [{ type: 'category', name: '牧场',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
  760. yAxis: [{ type: 'value', name: '价格(元)'}],
  761. series: [
  762. {
  763. name: '实际费用',
  764. type: 'bar',
  765. data: chart_data.data1,
  766. emphasis: { label: { show: true, position: 'inside' }},
  767. barMaxWidth:20,
  768. markLine:{ data:[ {yAxis:chart_data.line} ] }
  769. },
  770. {
  771. name: '预算',
  772. type: 'bar',
  773. data: chart_data.data2,
  774. emphasis: { label: { show: true, position: 'inside' }},
  775. barMaxWidth:20
  776. },
  777. ]
  778. }
  779. this.chart2.setOption(option)
  780. window.onresize = function() {
  781. this.chart2.resize()
  782. }
  783. var that = this
  784. this.chart2.on('click', function(param, i) {
  785. // console.log(param)
  786. })
  787. },
  788. // 牧场每月单头牛用油量对比
  789. roadChart4(chart_data) {
  790. if (this.chart4 != null) {
  791. this.chart4.dispose()
  792. }
  793. this.chart4 = echarts.init(document.getElementById('chart4'))
  794. var text = '牧场每月单头牛用油量对比'
  795. var option = {
  796. title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
  797. tooltip: { trigger: 'axis' },
  798. legend: {
  799. data: chart_data.data_name,
  800. left: 40,
  801. bottom:0
  802. },
  803. color: ['#eb123a','#eba612','#124feb','#15ab2e','#b20fdb'],
  804. grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
  805. xAxis: [{ type: 'category', name: '月份',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
  806. yAxis: [{ type: 'value',name: '油量(升)'}],
  807. series: (function() {
  808. var serie = []
  809. if(chart_data.data1 !== null){
  810. for (var i = 0; i < chart_data.data1.length; i++) {
  811. var item = {
  812. name: chart_data.data_name[i],
  813. type: 'line',
  814. data: chart_data.data1[i]
  815. }
  816. serie.push(item)
  817. }
  818. }
  819. return serie
  820. }())
  821. }
  822. this.chart4.setOption(option)
  823. window.onresize = function() {
  824. this.chart4.resize()
  825. }
  826. var that = this
  827. that.chart4.on('click', function(param, i) {
  828. // console.log(param)
  829. that.getChart5Parm.parammaps.date = param.name
  830. that.getChart5()
  831. })
  832. },
  833. // XX月部门统计
  834. roadChart5(chart_data) {
  835. if (this.chart5 != null) {
  836. this.chart5.dispose()
  837. }
  838. this.chart5 = echarts.init(document.getElementById('chart5'))
  839. var text = this.getChart5Parm.parammaps.date + '月部门统计'
  840. var option = {
  841. title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
  842. tooltip: { trigger: 'axis' },
  843. legend: {
  844. data: ['实际', '预算'],
  845. right: 40,
  846. bottom:0
  847. },
  848. color: ['#2dc0e8', '#769cfc'],
  849. grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
  850. xAxis: [{ type: 'category', name: '部门',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
  851. yAxis: [{ type: 'value',name: '油量(升)', axisLabel: { formatter:'{value} 万'}}],
  852. series: [
  853. {
  854. name: '实际',
  855. type: 'bar',
  856. data: chart_data.data1,
  857. emphasis: { label: { show: true, position: 'inside' }},
  858. barMaxWidth:20
  859. },
  860. {
  861. name: '预算',
  862. type: 'bar',
  863. data: chart_data.data2,
  864. emphasis: { label: { show: true, position: 'inside' }},
  865. barMaxWidth:20
  866. }
  867. ]
  868. }
  869. this.chart5.setOption(option)
  870. window.onresize = function() {
  871. this.chart5.resize()
  872. }
  873. var that = this
  874. this.chart5.on('click', function(param, i) {
  875. // console.log(param)
  876. })
  877. },
  878. // 牧场每月用油量对比
  879. roadChart6(chart_data) {
  880. if (this.chart6 != null) {
  881. this.chart6.dispose()
  882. }
  883. this.chart6 = echarts.init(document.getElementById('chart6'))
  884. var option = {
  885. title: { text: '牧场每月用油量对比', left:'left',textStyle: { color: '#769cfc' }},
  886. tooltip: { trigger: 'axis' },
  887. legend: {
  888. data: chart_data.data_name,
  889. right: 40,
  890. bottom:0
  891. },
  892. color: ['#eb123a','#eba612','#124feb','#15ab2e','#b20fdb'],
  893. grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
  894. xAxis: [{ type: 'category', name: '月份',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
  895. yAxis: [{ type: 'value',name: '油量(升)' }],
  896. series: (function() {
  897. var serie = []
  898. if(chart_data.data1 !== null){
  899. for (var i = 0; i < chart_data.data1.length; i++) {
  900. var item = {
  901. name: chart_data.data_name[i],
  902. type: 'line',
  903. data: chart_data.data1[i]
  904. }
  905. serie.push(item)
  906. }
  907. }
  908. return serie
  909. }())
  910. }
  911. this.chart6.setOption(option)
  912. window.onresize = function() {
  913. this.chart6.resize()
  914. }
  915. var that = this
  916. that.chart6.on('click', function(param, i) {
  917. console.log(param,'======6')
  918. that.getChart7Parm.parammaps.date = param.name
  919. that.getChart7()
  920. that.getChart8Parm.parammaps.date = param.name
  921. that.getChart8()
  922. })
  923. },
  924. // XX月每日用油量
  925. roadChart7(chart_data) {
  926. if (this.chart7 != null) {
  927. this.chart7.dispose()
  928. }
  929. this.chart7 = echarts.init(document.getElementById('chart7'))
  930. var text = this.getChart7Parm.parammaps.date+ '月每日用油量'
  931. var option = {
  932. title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
  933. tooltip: { trigger: 'axis' },
  934. legend: {
  935. data: chart_data.data_name,
  936. left: 40,
  937. bottom:0
  938. },
  939. color: ['#eb123a','#eba612','#124feb','#15ab2e','#b20fdb'],
  940. grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
  941. xAxis: [{ type: 'category', name: '日',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
  942. yAxis: [{ type: 'value', name: '油量(升)'}],
  943. series: (function() {
  944. var serie = []
  945. if(chart_data.data1 !== null){
  946. for (var i = 0; i < chart_data.data1.length; i++) {
  947. var item = {
  948. name: chart_data.data_name[i],
  949. type: 'line',
  950. data: chart_data.data1[i]
  951. }
  952. serie.push(item)
  953. }
  954. }
  955. return serie
  956. }())
  957. }
  958. this.chart7.setOption(option)
  959. window.onresize = function() {
  960. this.chart7.resize()
  961. }
  962. var that = this
  963. this.chart7.on('click', function(param, i) {
  964. // console.log(param)
  965. })
  966. },
  967. // XX月部门统计
  968. roadChart8(chart_data) {
  969. if (this.chart8 != null) {
  970. this.chart8.dispose()
  971. }
  972. this.chart8 = echarts.init(document.getElementById('chart8'))
  973. var text = this.getChart8Parm.parammaps.date + '月部门统计'
  974. var option = {
  975. title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
  976. tooltip: { trigger: 'axis' },
  977. legend: {
  978. data: ['实际用量'],
  979. right: 40,
  980. bottom:0
  981. },
  982. color: ['#2dc0e8', '#769cfc'],
  983. grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
  984. xAxis: [{ type: 'category', name: '部门',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
  985. yAxis: [{ type: 'value',name: '油量(升)', axisLabel: { formatter:'{value} 万'}}],
  986. series: [
  987. {
  988. name: '实际用量',
  989. type: 'bar',
  990. data: chart_data.data1,
  991. emphasis: { label: { show: true, position: 'inside' }},
  992. barMaxWidth:20
  993. },
  994. ]
  995. }
  996. this.chart8.setOption(option)
  997. window.onresize = function() {
  998. this.chart8.resize()
  999. }
  1000. var that = this
  1001. that.chart8.on('click', function(param, i) {
  1002. // console.log(param)
  1003. that.getChart9Parm.parammaps.deptName = param.name
  1004. that.getChart9()
  1005. })
  1006. },
  1007. // XX部门用X量
  1008. roadChart9(chart_data) {
  1009. if (this.chart9 != null) {
  1010. this.chart9.dispose()
  1011. }
  1012. this.chart9 = echarts.init(document.getElementById('chart9'))
  1013. var text = this.getChart9Parm.parammaps.deptName +'用油量'
  1014. var option = {
  1015. title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
  1016. tooltip: { trigger: 'axis' },
  1017. legend: {
  1018. data: ['实际费用'],
  1019. right: 40,
  1020. bottom:0
  1021. },
  1022. color: ['#2dc0e8', '#769cfc'],
  1023. grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
  1024. xAxis: [{ type: 'category', name: '设备',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
  1025. yAxis: [{ type: 'value',name: '油量(升)', axisLabel: { formatter:'{value} 万'}}],
  1026. series: [
  1027. {
  1028. name: '实际费用',
  1029. type: 'bar',
  1030. data: chart_data.data1,
  1031. emphasis: { label: { show: true, position: 'inside' }},
  1032. barMaxWidth:20
  1033. },
  1034. ]
  1035. }
  1036. this.chart9.setOption(option)
  1037. window.onresize = function() {
  1038. this.chart9.resize()
  1039. }
  1040. var that = this
  1041. this.chart9.on('click', function(param, i) {
  1042. // console.log(param)
  1043. })
  1044. },
  1045. }
  1046. }
  1047. </script>
  1048. <style>
  1049. .el-row {
  1050. margin-bottom: 40px;
  1051. &:last-child {
  1052. margin-bottom: 0;
  1053. }
  1054. }
  1055. </style>
  1056. <style lang="scss" scoped>
  1057. .group{
  1058. float: right;margin-bottom: 20px;
  1059. }
  1060. </style>