水电油-新增折线图

src/views/cost/diesel/index.vue

@@ -29,6 +29,8 @@
         </el-upload>
         <el-button v-if="isDieselExport" v-waves class="filter-item" type="success" icon="el-icon-download" @click="handleDownload">数据导出</el-button>
         <!-- <el-button class="filter-item" type="danger" icon="el-icon-download" @click="form_delete">删除</el-button> -->
+         <el-button class="filter-item"  icon="el-icon-share" @click="formEchart">折线图</el-button>
+
       </div>
     </div>
 
@@ -312,13 +314,27 @@
         <el-button @click="dialogFormDelete = false;get_table_data()">关闭</el-button>
       </div>
     </el-dialog>
+
+      <!-- 折线图 -->
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogECharts" :close-on-click-modal="false" width="80%">
+      <div>
+        <div id="chart7" style="width: 100%;height:400px;" />
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <!-- <el-button type="primary" :disabled="isokDisable" @click="deleteData()">确认</el-button> -->
+        <el-button @click="dialogECharts = false">关闭</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
 // 引入
 require('script-loader!file-saver')
-import { GetDataByName, GetDataByNames, PostDataByName,postJson, checkButtons, ExecDataByConfig, failproccess, GetAccount,getJson } from '@/api/common'
+import echarts from 'echarts'
+import { GetDataByName, GetDataByNames, PostDataByName,postJson, checkButtons, ExecDataByConfig, failproccess, GetAccount,getJson,GetReportform } from '@/api/common'
 // import {  DownloadExcel, GetDataByNameXlsx } from '@/api/common'
 import waves from '@/directive/waves'
 import { parseTime, sortChange } from '@/utils/index.js'
@@ -417,7 +433,8 @@ export default {
         update: '编辑',
         create: '新增',
         DosageRecord: '用量记录',
-        delete: '删除'
+        delete: '删除',
+        echarts: '每日用柴油量'
       },
       dialogFormDosageRecord: false,
       totalDosageRecord: 0,
@@ -469,7 +486,19 @@ export default {
       percentage: 1,
       dialogFormDelete: false,
       deleteTemp: {},
-      dieselTypeList:[]
+      dieselTypeList: [],
+      dialogECharts: false,
+      isChart7: [],
+      chart_data7: {},
+      getChart7Parm: {
+        name: 'getpSumNowWater',
+        parammaps: {
+          receiveTime: new Date().getFullYear(),
+          pastureName: Cookies.get('pasturename'),
+          startTime: "",
+          endTime:""
+        }
+      },
     }
   },
 
@@ -507,6 +536,96 @@ export default {
   },
 
   methods: {
+
+    // 折线图
+    formEchart() {
+      this.dialogECharts = true;
+      this.dialogStatus = 'echarts'
+      this.getChart7();
+    },
+    // XX月每日用电量
+    getChart7() {
+      if(this.getdataListParm.parammaps.inputDatetime !== null && this.getdataListParm.parammaps.inputDatetime.length > 0){
+        this.getChart7Parm.parammaps.startTime = parseTime(this.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}')
+        this.getChart7Parm.parammaps.endTime = parseTime(this.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}')
+        this.getChart7Parm.parammaps.date = parseTime(this.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}')
+      }else{
+        this.getChart7Parm.parammaps.startTime = ''
+        this.getChart7Parm.parammaps.endTime = ''
+        this.getChart7Parm.parammaps.date = parseTime(new Date(), '{y}-{m}')
+      }
+
+      let data = {
+        name:"getPastureSumDayWater",
+        parammaps:{
+          startTime: this.getChart7Parm.parammaps.startTime || parseTime(new Date(), '{y}-{m}'),
+          endTime: this.getChart7Parm.parammaps.endTime || parseTime(new Date(), '{y}-{m}'),
+          pastureName: this.getdataListParm.parammaps.pastureName || Cookies.get('pasturename'),
+        },
+      }
+      GetReportform(data).then(response => {
+        console.log('XX月每日用油量==>图8', response)
+        if(response.data.chart_data){
+          this.chart_data7 = {
+              data1:response.data.chart_data.nowYear,
+              data_name:response.data.chart_data.pastureName,
+              xdata:response.data.chart_data.day
+            }
+        }else{
+          this.chart_data7 = {
+            data1:[],
+            data_name:[],
+            xdata:[]
+          }
+        }
+        this.roadChart7(this.chart_data7)
+      })
+
+    },
+    // XX月每日用油量
+    roadChart7(chart_data) {
+      if (this.chart7 != null) {
+        this.chart7.dispose()
+      }
+      this.chart7 = echarts.init(document.getElementById('chart7'))
+      var text = this.getChart7Parm.parammaps.date+ '月每日用油量'
+      var option = {
+        title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
+        tooltip: { trigger: 'axis' },
+        legend: {
+          data: chart_data.data_name,
+          left: 40,
+          bottom:0
+        },
+        color: ['#eb123a','#eba612','#124feb','#15ab2e','#b20fdb'],
+        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
+        xAxis: [{ type: 'category',  name: '日',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
+        yAxis: [{ type: 'value', name: '油量(升)'}],
+        series: (function() {
+          var serie = []
+          if(chart_data.data1 !== null){
+            for (var i = 0; i < chart_data.data1.length; i++) {
+              var item = {
+                name: chart_data.data_name && chart_data.data_name[i] || '',
+                type: 'line',
+                data: chart_data.data1[i]
+              }
+              serie.push(item)
+            }
+          }
+          return serie
+        }())
+      }
+      this.chart7.setOption(option)
+      window.onresize = function() {
+        this.chart7.resize()
+      }
+      var that = this
+      this.chart7.on('click', function(param, i) {
+        // console.log(param)
+      })
+    },
+
     getDieselTypeList(){
       let url = 'authdata/diesel/type/list'
       let data = ''

src/views/cost/elec/index.vue

@@ -18,8 +18,8 @@
       </el-select>
       <el-date-picker v-model="getdataListParm.parammaps.createDate" type="date" placeholder="日期" style="width:140px;top:-3px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
       <el-date-picker v-model="getdataListParm.parammaps.inputDatetime" clearable class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 250px;margin-right: 10px;" />
-      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="form_search">搜索</el-button>
       <div>
+        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="form_search">搜索</el-button>
         <el-button v-if="isElecAdd" class="filter-item" type="primary" icon="el-icon-edit" @click="form_add">新增</el-button>
         <el-button v-waves class="filter-item" type="info" icon="el-icon-tickets" @click="handleDownloadTemp">模板</el-button>
         <el-button v-if="isElecExport" v-waves class="filter-item" type="success" icon="el-icon-download" @click="handleDownload">导出数据</el-button>
@@ -27,6 +27,8 @@
           <el-button v-if="isElecImport" v-waves class="filter-item" type="warning" icon="el-icon-upload2" @click="form_search">导入</el-button>
         </el-upload>
         <el-button class="filter-item" type="danger" icon="el-icon-download" @click="form_delete">删除</el-button>
+         <el-button class="filter-item"  icon="el-icon-share" @click="formEchart">折线图</el-button>
+
       </div>
     </div>
 
@@ -299,13 +301,27 @@
         <el-button @click="dialogFormDelete = false;get_table_data()">关闭</el-button>
       </div>
     </el-dialog>
+
+     <!-- 折线图 -->
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogECharts" :close-on-click-modal="false" width="80%">
+      <div>
+        <div id="chart7" style="width: 100%;height:400px;" />
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <!-- <el-button type="primary" :disabled="isokDisable" @click="deleteData()">确认</el-button> -->
+        <el-button @click="dialogECharts = false">关闭</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
 // 引入
 require('script-loader!file-saver')
-import { GetDataByName, GetDataByNames, PostDataByName, checkButtons, ExecDataByConfig, GetAccount } from '@/api/common'
+import echarts from 'echarts'
+import { GetDataByName, GetDataByNames, PostDataByName, checkButtons, ExecDataByConfig, GetAccount,GetReportform } from '@/api/common'
 // import {  DownloadExcel, GetDataByNameXlsx } from '@/api/common'
 import waves from '@/directive/waves' // waves directive
 // eslint-disable-next-line no-unused-vars
@@ -414,7 +430,8 @@ export default {
         update: '编辑',
         create: '新增',
         DosageRecord: '用量记录',
-        delete: '删除'
+        delete: '删除',
+        echarts: '每日用电量'
       },
       dialogFormDosageRecord: false,
       totalDosageRecord: 0,
@@ -462,7 +479,19 @@ export default {
       isPercentage: false,
       percentage: 1,
       dialogFormDelete: false,
-      deleteTemp: {}
+      deleteTemp: {},
+       dialogECharts: false,
+       isChart7: [],
+      chart_data7: {},
+      getChart7Parm: {
+        name: 'getpSumNowWater',
+        parammaps: {
+          receiveTime: new Date().getFullYear(),
+          pastureName: Cookies.get('pasturename'),
+          startTime: "",
+          endTime:""
+        }
+      },
     }
   },
 
@@ -498,6 +527,98 @@ export default {
   },
 
   methods: {
+
+    // 折线图
+    formEchart() {
+      this.dialogECharts = true;
+      this.dialogStatus = 'echarts'
+      this.getChart7();
+    },
+    // XX月每日用电量
+    getChart7() {
+      if(this.getdataListParm.parammaps.inputDatetime !== null && this.getdataListParm.parammaps.inputDatetime.length > 0){
+        this.getChart7Parm.parammaps.startTime = parseTime(this.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}')
+        this.getChart7Parm.parammaps.endTime = parseTime(this.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}')
+        this.getChart7Parm.parammaps.date = parseTime(this.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}')
+      }else{
+        this.getChart7Parm.parammaps.startTime = ''
+        this.getChart7Parm.parammaps.endTime = ''
+        this.getChart7Parm.parammaps.date = parseTime(new Date(), '{y}-{m}')
+      }
+
+      let data = {
+        name:"getPastureSumDayWater",
+        parammaps:{
+          startTime: this.getChart7Parm.parammaps.startTime || parseTime(new Date(), '{y}-{m}'),
+          endTime: this.getChart7Parm.parammaps.endTime || parseTime(new Date(), '{y}-{m}'),
+          pastureName: this.getdataListParm.parammaps.pastureName || Cookies.get('pasturename'),
+        },
+      }
+        GetReportform(data).then(response => {
+        console.log('XX月每日用电量==>图8', response)
+        // this.chart_data7 = response.data.chart_data
+        if(response.data){
+          this.chart_data7 = {
+            data1:response.data.chart_data.nowYear,
+            data_name:this.pastureName,
+            xdata:response.data.chart_data.day
+          }
+        }else{
+          this.chart_data7 = {
+            data1:[],
+            data_name:[],
+            xdata:[]
+          }
+        }
+        this.roadChart7(this.chart_data7)
+      })
+
+    },
+     // XX月每日用电量
+    roadChart7(chart_data) {
+      console.log(chart_data,'chart_data')
+      if (this.chart7 != null) {
+        this.chart7.dispose()
+      }
+      this.chart7 = echarts.init(document.getElementById('chart7'))
+      var text = this.getChart7Parm.parammaps.date + '月每日用电量'
+      var option = {
+        title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
+        tooltip: { trigger: 'axis' },
+        legend: {
+          data: chart_data.data_name,
+          left: 40,
+          bottom:0
+        },
+        color: ['#eb123a','#eba612','#124feb','#15ab2e','#b20fdb'],
+        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
+        xAxis: [{ type: 'category',  name: '日',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
+        yAxis: [{ type: 'value', name: '电量(度)'}],
+        series: (function() {
+          var serie = []
+          if(chart_data.data1 !== null){
+            for (var i = 0; i < chart_data.data1.length; i++) {
+              var item = {
+                name:  chart_data.data_name && chart_data.data_name[i] ||'',
+                type: 'line',
+                data: chart_data.data1[i]
+              }
+              serie.push(item)
+            }
+          }
+          return serie
+        }())
+      }
+      this.chart7.setOption(option)
+      window.onresize = function() {
+        this.chart7.resize()
+      }
+      var that = this
+      this.chart7.on('click', function(param, i) {
+        // console.log(param)
+      })
+    },
+
     tableSort1(column) {
       sortChange(column, this.list)
     },

src/views/cost/water/index.vue

@@ -27,6 +27,8 @@
           <el-button v-if="isWaterImport" v-waves class="filter-item" type="warning" icon="el-icon-upload2" @click="form_search">导入</el-button>
         </el-upload>
         <el-button class="filter-item" type="danger" icon="el-icon-download" @click="form_delete">删除</el-button>
+         <el-button class="filter-item"  icon="el-icon-share" @click="formEchart">折线图</el-button>
+
       </div>
     </div>
 
@@ -291,19 +293,33 @@
         <el-button @click="dialogFormDelete = false;get_table_data()">关闭</el-button>
       </div>
     </el-dialog>
+
+     <!-- 折线图 -->
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogECharts" :close-on-click-modal="false" width="80%">
+      <div>
+        <div id="chart7" style="width: 100%;height:400px;" />
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <!-- <el-button type="primary" :disabled="isokDisable" @click="deleteData()">确认</el-button> -->
+        <el-button @click="dialogECharts = false">关闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 // 引入
 require('script-loader!file-saver')
-import { GetDataByName, GetDataByNames, PostDataByName, checkButtons, ExecDataByConfig, GetAccount } from '@/api/common'
+import echarts from 'echarts'
+import { GetDataByName, GetDataByNames, PostDataByName, checkButtons, ExecDataByConfig, GetAccount,GetReportform } from '@/api/common'
 import waves from '@/directive/waves'
 import { parseTime, sortChange } from '@/utils/index.js'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { MessageBox } from 'element-ui'
 import { getToken } from '@/utils/auth'
 import Cookies from 'js-cookie'
+
 export default {
   name: 'Water',
   components: { Pagination },
@@ -404,7 +420,8 @@ export default {
         update: '编辑',
         create: '新增',
         DosageRecord: '用量记录',
-        delete: '删除'
+        delete: '删除',
+        echarts: '每日折线图'
       },
       dialogFormDosageRecord: false,
       totalDosageRecord: 0,
@@ -453,7 +470,19 @@ export default {
       isPercentage: false,
       percentage: 1,
       dialogFormDelete: false,
-      deleteTemp: {}
+      deleteTemp: {},
+      dialogECharts: false,
+       isChart7: [],
+      chart_data7: {},
+      getChart7Parm: {
+        name: 'getpSumNowWater',
+        parammaps: {
+          receiveTime: new Date().getFullYear(),
+          pastureName: Cookies.get('pasturename'),
+          startTime: "",
+          endTime:""
+        }
+      },
     }
   },
 
@@ -489,6 +518,95 @@ export default {
   },
 
   methods: {
+    // 折线图
+    formEchart() {
+      this.dialogECharts = true;
+      this.dialogStatus = 'echarts'
+      this.getChart7();
+    },
+    // XX月每日用水量
+    getChart7() {
+      if(this.getdataListParm.parammaps.inputDatetime !== null && this.getdataListParm.parammaps.inputDatetime.length > 0){
+        this.getChart7Parm.parammaps.startTime = parseTime(this.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}')
+        this.getChart7Parm.parammaps.endTime = parseTime(this.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}')
+        this.getChart7Parm.parammaps.date = parseTime(this.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}')
+      }else{
+        this.getChart7Parm.parammaps.startTime = ''
+        this.getChart7Parm.parammaps.endTime = ''
+        this.getChart7Parm.parammaps.date = parseTime(new Date(), '{y}-{m}')
+      }
+
+      let data = {
+        name:"getPastureSumDayWater",
+        parammaps:{
+          startTime: this.getChart7Parm.parammaps.startTime || parseTime(new Date(), '{y}-{m}'),
+          endTime: this.getChart7Parm.parammaps.endTime || parseTime(new Date(), '{y}-{m}'),
+          pastureName: this.getdataListParm.parammaps.pastureName || Cookies.get('pasturename'),
+        },
+      }
+       GetReportform(data).then(response => {
+        console.log('XX月每日用水量==>图8', response)
+        if(response.data){
+          this.chart_data7 = {
+            data1:response.data.chart_data.nowYear,
+            data_name:this.pastureName,
+            xdata:response.data.chart_data.day
+          }
+        }else{
+          this.chart_data7 = {
+            data1:[],
+            data_name:[],
+            xdata:[]
+          }
+        }
+        this.roadChart7(this.chart_data7)
+      })
+    },
+      // XX月每日用水量
+    roadChart7(chart_data) {
+      console.log(chart_data,'chart_data')
+      if (this.chart7 != null) {
+        this.chart7.dispose()
+      }
+      this.chart7 = echarts.init(document.getElementById('chart7'))
+      var text = this.getChart7Parm.parammaps.date + '月每日用水量'
+      var option = {
+        title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
+        tooltip: { trigger: 'axis' },
+        legend: {
+          data: chart_data.data_name,
+          left: 40,
+          bottom:0
+        },
+        color: ['#eb123a','#eba612','#124feb','#15ab2e','#b20fdb'],
+        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
+        xAxis: [{ type: 'category',  name: '日',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
+        yAxis: [{ type: 'value', name: '水量(吨)'}],
+        series: (function() {
+          var serie = []
+          if(chart_data.data1 !== null){
+            for (var i = 0; i < chart_data.data1.length; i++) {
+              var item = {
+                name: chart_data.data_name && chart_data.data_name[i] || '',
+                type: 'line',
+                data: chart_data.data1[i]
+              }
+              serie.push(item)
+            }
+          }
+          return serie
+        }())
+      }
+      this.chart7.setOption(option)
+      window.onresize = function() {
+        this.chart7.resize()
+      }
+      var that = this
+      this.chart7.on('click', function(param, i) {
+        console.log(param)
+      })
+    },
+
     tableSort1(column) {
       sortChange(column, this.list)
     },