新修改水用量分析；电用量分析，燃动分析，维修费用分析

src/views/report/queryCombustion/index11.vue

@@ -1,592 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <div class="block">
-        <el-date-picker v-model="yearDate" :clearable="false" type="year" placeholder="选择年" />
-
-        <el-radio-group v-model="radio"    style="float:right;margin-top:20px">
-          <el-radio  label="集团">集团</el-radio>
-          <el-radio  label="一中心">一中心</el-radio>
-          <el-radio  label="二中心">二中心</el-radio>
-          <el-radio  label="三中心">三中心</el-radio>
-        </el-radio-group>   
-
-      </div>
-    </div>
-
-    <!-- 年度维修成本 -->
-    <el-row v-if="isBarChart1" style="position: relative;">
-      <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">
-        {{ year }}年集团柴油量：{{ total }}万升
-      </p>
-      <el-col :span="24">
-        <div id="barChart1" style="width: 100%;height:400px;" />
-      </el-col>
-    </el-row>
-
-    <!-- 年度维修成本 -->
-    <el-row>
-      <el-col :span="12">
-        <div id="lineChart1" style="width: 100%;height:400px;" />
-      </el-col>
-      <el-col :span="12">
-        <div id="lineChart2" style="width: 100%;height:400px;" />
-      </el-col>
-    </el-row>
-
-    <el-row>
-      <el-col :span="12">
-        <div id="pieChart1" style="width: 100%;height:400px;" />
-      </el-col>
-      <el-col :span="12">
-        <div id="barChart2" style="width: 100%;height:400px;" />
-      </el-col>
-    </el-row>
-
-  </div>
-
-</template>
-
-<script>
-import echarts from 'echarts'
-
-require('echarts/theme/macarons')
-// eslint-disable-next-line no-unused-vars
-import waves from '@/directive/waves' // waves directive
-import { GetDataByName, GetReportform, checkButtons } from '@/api/common'
-
-import Cookies from 'js-cookie'
-export default {
-  name: 'QueryCombustion',
-  directives: { waves },
-  data() {
-    return {
-      yearDate: new Date(),
-      total: '',
-      // type: '柴油',
-      // types: [{ id: '0', name: '柴油' }, { id: '1', name: '天然气' }, { id: '2', name: '煤炭' }, { id: '3', name: '生物质颗粒' }],
-
-      radio: "集团",
-
-      pasture: Cookies.get('pasturename'),
-      year: new Date().getFullYear(),
-      month: new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1,
-      deptment: '维修处',
-
-      getBarChart1Parm: {
-        name: 'getpSumNowDiesel',
-        parammaps: {
-          receiveTime: new Date().getFullYear(),
-          center:'',
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getLineChart1Parm: {
-        name: 'getPastureSumMonthDiesel',
-        parammaps: {
-          receiveTime: new Date().getFullYear(),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getLineChart2Parm: {
-        name: 'getPastureSumDayDiesel',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getPieChart1Parm: {
-        name: 'getdeptSumMonthDiesel',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getBarChart2Parm: {
-        name: 'geteqclassSumMonthDiesel',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename'),
-          deptName: ''
-        }
-      },
-      barChart1: null,
-      lineChart1: null,
-      lineChart2: null,
-      pieChart1: null,
-      barChart2: null,
-
-      chart_data1: {
-        // pasture: ['宝鸡', '恒盛', '塞一', '塞二', '塞三', '塞四', '塞五', '通山', '合肥', '和林'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data2: {
-        // months: ['2019-01', '2019-02', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66],
-        // budget: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data3: {
-        // day: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data4: {
-        // name: ['饲养处', '其他部门', '设备处', '能源处', '牧场办公室'],
-        // psum: [
-        //   { value: 335, name: '饲养处' },
-        //   { value: 310, name: '其他部门' },
-        //   { value: 234, name: '设备处' },
-        //   { value: 135, name: '能源处' },
-        //   { value: 1548, name: '牧场办公室' }
-        // ]
-      },
-      chart_data5: {
-        // typeName: ['小型装载机', '叉车', '拖拉机', '抛料机', '搅拌机'],
-        // eqCost: [123, 332, 222, 333, 444],
-        // lastYear: [22, 342, 234, 234, 66]
-      },
-
-      tableKey: 0,
-      list: null,
-      total: 0,
-      listLoading: true,
-      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
-      cellStyle: { padding: 0 + 'px' },
-
-      dialogFormVisibleCard: false,
-      listLoadingSee: true,
-      rowSeeData: {},
-      listSee: [],
-      totalSee: 0,
-      getdataListParmSee: {
-        name: 'geteqclassSumDay',
-        page: 1,
-        offset: 1,
-        pagecount: 10,
-        returntype: 'Map',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename'),
-          deptName: '',
-          typeName: '',
-          assetCode: '',
-          eqName: '',
-          startTime: '',
-          stopTime: '',
-          pastureId: Cookies.get('pastureid')
-        }
-      },
-      buttons: [],
-      isBarChart1: []
-
-    }
-  },
-
-  watch: {
-    'yearDate': {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        var time = this.yearDate
-        console.log(newVal.getFullYear())
-        this.year = time.getFullYear()
-        this.getBarChart1Parm.parammaps.receiveTime = time.getFullYear()
-        this.getLineChart1Parm.parammaps.receiveTime = time.getFullYear()
-        this.getLineChart2Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-        this.getPieChart1Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-        this.getBarChart2Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-
-        this.getBarChart1()
-        this.getLineChart1()
-        this.getLineChart2()
-        this.getPieChart1()
-      }
-    },
-    'radio': {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        console.log(newVal, oldVal)
-        if(newVal == '集团'){
-          this.getBarChart1Parm.parammaps.center = ''
-        } else {
-          this.getBarChart1Parm.parammaps.center = newVal
-        }
-        this.getBarChart1()
-        // this.getLineChart1()
-        // this.getLineChart2()
-        // this.getPieChart1()
-      }
-    },
-    // 'type': {
-    //   deep: true,
-    //   handler: function(newVal, oldVal) {
-    //     console.log(newVal, oldVal)
-    //     this.getBarChart1Parm.parammaps.type = newVal
-    //     this.getLineChart1Parm.parammaps.type = newVal
-    //     this.getLineChart2Parm.parammaps.type = newVal
-    //     this.getPieChart1Parm.parammaps.type = newVal
-    //     this.getBarChart2Parm.parammaps.type = newVal
-
-    //     this.getBarChart1()
-    //     this.getLineChart1()
-    //     this.getLineChart2()
-    //     this.getPieChart1()
-    //   }
-    // }
-  },
-
-  created() {
-    this.getBarChart1()
-    this.getLineChart1()
-    this.getLineChart2()
-    this.getPieChart1()
-    const that = this
-    GetDataByName({ 'name': 'getUserPCButtons', 'parammaps': { 'jwt_username': Cookies.get('name') }}).then(response => {
-      that.buttons = response.data.list
-      that.get_auto_buttons()
-    })
-  },
-  mounted() {
-    // this.roadBarChart1(this.chart_data1)
-    // this.roadlineChart1(this.chart_data2, this.pasture, this.year)
-    // this.roadlineChart2(this.chart_data3, this.pasture, this.month)
-    //  this.roadpieChart1(this.chart_data4, this.month)
-    // this.roadBarChart2(this.chart_data5, this.deptment)
-  },
-  methods: {
-    get_auto_buttons() {
-      // 图1
-      const BarChart1 = 'report:queryCombustion:pastures'
-      const isBarChart1 = checkButtons(this.$store.state.user.buttons, BarChart1)
-      this.isBarChart1 = isBarChart1
-    },
-    // 各牧场年度维修成本对比
-    getBarChart1() {
-      GetReportform(this.getBarChart1Parm).then(response => {
-        console.log('图1', response)
-        this.chart_data1 = response.data.chart_data
-        this.roadBarChart1(this.chart_data1)
-        var nowYear = response.data.chart_data.nowYear
-        var total = 0
-        if (nowYear !== null || nowYear !== undefined) {
-          nowYear.forEach(function(item, index) {
-            console.log(parseFloat(item))
-            total = total + parseFloat(item)
-          })
-        }
-        this.total = total.toFixed(4)
-      })
-    },
-    getLineChart1() {
-      GetReportform(this.getLineChart1Parm).then(response => {
-        console.log('图2', response)
-        this.chart_data2 = response.data.chart_data
-        this.roadlineChart1(this.chart_data2, this.pasture, this.year)
-      })
-    },
-    getLineChart2() {
-      GetReportform(this.getLineChart2Parm).then(response => {
-        console.log('图3', response)
-        this.chart_data3 = response.data.chart_data
-        this.roadlineChart2(this.chart_data3, this.pasture, this.month)
-      })
-    },
-    getPieChart1() {
-      GetDataByName(this.getPieChart1Parm).then(response => {
-        console.log('图4', response)
-        if (response.data === null || response.data.list === null) {
-          this.chart_data4 = { name: [], psum: [] }
-          this.roadpieChart1(this.chart_data4, this.month)
-        } else {
-          this.chart_data4.psum = response.data.list
-          var name = []
-          console.log(response.data.list)
-          response.data.list.forEach(function(i) {
-            name.push(i.name)
-          })
-          console.log(this.chart_data4)
-          this.chart_data4.name = name
-          this.roadpieChart1(this.chart_data4, this.month)
-          this.deptment = name[0]
-          this.getdataListParmSee.parammaps.deptName = name[0]
-          this.getBarChart2Parm.parammaps.deptName = name[0]
-          this.getBarChart2()
-        }
-      })
-    },
-    getBarChart2() {
-      GetReportform(this.getBarChart2Parm).then(response => {
-        console.log('图5', response)
-        this.chart_data5 = response.data.chart_data
-        this.roadBarChart2(this.chart_data5, this.deptment)
-      })
-    },
-
-    // 各牧场年度柴油量对比
-    roadBarChart1(chart_data1) {
-      if (this.barChart1 != null) {
-        this.barChart1.dispose()
-      }
-      this.barChart1 = echarts.init(document.getElementById('barChart1'))
-      var option = {
-        title: { text: '各牧场年度柴油量对比', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['今年用量', '去年同期'],
-          right: 40
-        },
-        color: ['#2dc0e8', '#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '4%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', name: '牧场', data: chart_data1.pasture, axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '升', axisLabel: { formatter: '{value}万' }}],
-        series: [
-          {
-            name: '今年用量',
-            type: 'bar',
-            data: chart_data1.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '去年同期',
-            type: 'bar',
-            data: chart_data1.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.barChart1.setOption(option)
-      window.onresize = function() {
-        this.barChart1.resize()
-      }
-      var that = this
-      this.barChart1.on('click', function(param, i) {
-        console.log(param)
-        that.pasture = param.name
-        that.getLineChart1Parm.parammaps.pastureName = param.name
-        that.getLineChart2Parm.parammaps.pastureName = param.name
-        that.getPieChart1Parm.parammaps.pastureName = param.name
-        that.getBarChart2Parm.parammaps.pastureName = param.name
-
-        that.getLineChart1()
-        that.getLineChart2()
-        that.getPieChart1()
-      })
-    },
-    // 每月维修成本对比
-    roadlineChart1(chart_data2, pasture, year) {
-      if (this.lineChart1 != null) {
-        this.lineChart1.dispose()
-      }
-      this.lineChart1 = echarts.init(document.getElementById('lineChart1'))
-      var option = {
-        title: { text: pasture + year + '每月柴油量对比', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['今年用量', '去年同期用量']
-        },
-        color: [ '#769cfc', '#FFB800', '#6bda00'],
-        grid: { left: '3%', right: '8%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data2.months, name: '月份', axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '升', axisLabel: { formatter: '{value}' }}],
-        series: [
-          {
-            name: '今年用量',
-            type: 'line',
-            data: chart_data2.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '去年同期用量',
-            type: 'line',
-            data: chart_data2.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '预算',
-            type: 'line',
-            data: chart_data2.budget,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.lineChart1.setOption(option)
-      window.onresize = function() {
-        this.lineChart1.resize()
-      }
-      var that = this
-      this.lineChart1.on('click', function(param, i) {
-        console.log(param)
-
-        that.getLineChart2Parm.parammaps.receiveTime = param.name
-        that.getPieChart1Parm.parammaps.receiveTime = param.name
-        that.getBarChart2Parm.parammaps.receiveTime = param.name
-
-        var num = param.name.substring(5)
-        console.log(num)
-        that.month = num
-        that.getLineChart2()
-        that.getPieChart1()
-      })
-    },
-
-    // 每日维修成本对比
-    roadlineChart2(chart_data3, pasture, month) {
-      if (this.lineChart2 != null) {
-        this.lineChart2.dispose()
-      }
-      this.lineChart2 = echarts.init(document.getElementById('lineChart2'))
-      var option = {
-        title: { text: pasture + month + '月每日柴油量对比', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['今年日用量', '去年同期']
-        },
-        color: [ '#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data3.day, name: '日期', axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '升', axisLabel: { formatter: '{value}' }}],
-        series: [
-          {
-            name: '今年日用量',
-            type: 'line',
-            data: chart_data3.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '去年同期',
-            type: 'line',
-            data: chart_data3.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.lineChart2.setOption(option)
-      window.onresize = function() {
-        this.lineChart2.resize()
-      }
-      this.lineChart2.on('click', function(param, i) {
-        console.log(param)
-      })
-    },
-    // 部门统计
-    roadpieChart1(chart_data4, month) {
-      if (this.pieChart1 != null) {
-        this.pieChart1.dispose()
-      }
-      this.pieChart1 = echarts.init(document.getElementById('pieChart1'))
-      var option = {
-        title: { text: month + '月部门统计', textStyle: { color: '#769cfc' }},
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          data: chart_data4.name, top: 40
-        },
-        color: [ '#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
-        series: [
-          {
-            name: '',
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '60%'],
-            data: chart_data4.psum,
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-
-        ]
-      }
-      this.pieChart1.setOption(option)
-      window.onresize = function() {
-        this.pieChart1.resize()
-      }
-      var that = this
-      this.pieChart1.on('click', function(param, i) {
-        console.log(param)
-        that.deptment = param.name
-        that.getBarChart2Parm.parammaps.deptName = param.name
-        that.getBarChart2()
-      })
-    },
-    // 维修成本
-    roadBarChart2(chart_data5, deptment) {
-      if (this.barChart2 != null) {
-        this.barChart2.dispose()
-      }
-      this.barChart2 = echarts.init(document.getElementById('barChart2'))
-      var option = {
-        title: { text: deptment + '柴油用量', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['柴油用量']
-        },
-        color: [ '#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data5.typeName, name: '设备', axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '升', axisLabel: { formatter: '{value}' }}],
-        series: [
-          {
-            name: '柴油用量',
-            type: 'bar',
-            barWidth: 14,
-            data: chart_data5.eqCost,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.barChart2.setOption(option)
-      window.onresize = function() {
-        this.barChart2.resize()
-      }
-    }
-
-  }
-}
-</script>
-<style>
-.el-row {
-    margin-bottom: 40px;
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-</style>
-
-<style lang="scss" scoped>
-
-.dashboard-editor-container {
-  padding: 20px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .github-corner {
-    position: absolute;
-    top: 0px;
-    border: 0;
-    right: 0;
-  }
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-  }
-}
-
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
-  }
-}
-</style>

src/views/report/queryElec/components/BarChartDept.vue

@@ -1,132 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-// import { parseTime } from '@/utils/index.js'
-// import { emit } from 'cluster'
-// eslint-disable-next-line no-unused-vars
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    barCharDeptData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null,
-      sourceDate: []
-    }
-  },
-  watch: {
-    barCharDeptData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-        console.log(val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.barCharDeptData)
-      console.log(this.barCharDeptData)
-    },
-    setOptions({ xAxisData, seriesData, text } = {}) {
-      this.chart.setOption({
-        title: {
-          text: text + '电表柱状图',
-          subtext: ''
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        grid: {
-          left: '3%',
-          right: '15%',
-          bottom: '-4%',
-          containLabel: true
-        },
-        xAxis: [
-          {
-            name: '电表名称',
-            type: 'category',
-            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-            data: xAxisData,
-            // data: [],
-            axisTick: {
-              alignWithLabel: true
-            },
-            // axisLabel: { interval: 0, rotate: 40 }
-            axisLabel: { interval: 0 }
-            // show: false
-          }
-        ],
-        yAxis: [
-          {
-            name: '千瓦',
-            type: 'value'
-          }
-        ],
-        series: [
-          {
-            name: '',
-            type: 'bar',
-            barWidth: '60%',
-            // data: [10, 52, 200, 334, 390, 330, 220]
-            data: seriesData
-          }
-        ]
-      })
-      const that = this
-      // 点击柱状图拿到对应内容
-      this.chart.on('click', function(params) {
-        console.log(params.name)
-        // console.log(parseTime(new Date(), '{y}') + '-' + params.name.substring(0, 2))
-        // that.$emit('barClickDept', parseTime(new Date(), '{y}') + '-' + params.name.substring(0, 2))
-        that.$emit('barClickDept', params.name)
-      })
-    }
-  }
-}
-</script>

src/views/report/queryElec/components/BarChartPasture.vue

@@ -1,115 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-// import { parseTime } from '@/utils/index.js'
-// import { emit } from 'cluster'
-// eslint-disable-next-line no-unused-vars
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    barPastureData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null,
-      sourceDate: []
-    }
-  },
-  watch: {
-    barPastureData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-        console.log(val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.barPastureData)
-    },
-    setOptions({ sourceDate, text } = {}) {
-      this.chart.setOption({
-        title: {
-          text: '最近12个月用电量同期对比',
-          subtext: ''
-        },
-        legend: { x: 'right' },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        dataset: {
-          source: sourceDate
-          // source: [
-          //   ['product', '去年同期', '预算', '实际']
-          //   // ['10月', 433, 85.8, 93.7],
-          //   // ['9月', 83.1, 73.4, 55.1],
-          //   // ['8月', 86.4, 65.2, 82.5],
-          //   // ['7月', 72.4, 53.9, 39.1]
-          // ]
-        },
-        xAxis: { type: 'category', name: '最近12个月', formatter: '', axisLabel: { interval: 0, rotate: 40 }},
-        yAxis: { name: '千瓦' },
-        grid: [
-          { left: '15%', right: '17%' }
-        ],
-        series: [
-          { type: 'bar' },
-          { type: 'bar' },
-          { type: 'bar' }
-        ]
-      })
-      const that = this
-      // 点击柱状图拿到对应内容
-      this.chart.on('click', function(params) {
-        // console.log(parseTime(new Date(), '{y}') + '-' + params.name.substring(0, 2))
-        // that.$emit('chartClick', parseTime(new Date(), '{y}') + '-' + params.name.substring(0, 2))
-        that.$emit('chartClick', params.name.substring(0, 7))
-      })
-    }
-  }
-}
-</script>

src/views/report/queryElec/components/BarChartPastureMonth.vue

@@ -1,80 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-// eslint-disable-next-line no-unused-vars
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '475px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.chart.setOption({
-        legend: {},
-        tooltip: {},
-        dataset: {
-          source: [
-            ['product', '2015', '2016', '2017'],
-            ['10月', 43.3, 85.8, 93.7],
-            ['9月', 83.1, 73.4, 55.1],
-            ['8月', 86.4, 65.2, 82.5],
-            ['7月', 72.4, 53.9, 39.1]
-          ]
-        },
-        xAxis: [
-          { type: 'category', gridIndex: 0, name: '最近12个月' }
-        ],
-        yAxis: [
-          { gridIndex: 0, name: '总费用' }
-        ],
-        grid: [
-          { bottom: '58%' },
-          { top: '58%' }
-        ],
-        series: [
-          { type: 'bar' },
-          { type: 'bar' },
-          { type: 'bar' }
-        ]
-      })
-    }
-  }
-}
-</script>

src/views/report/queryElec/components/Contrast.vue

@@ -1,165 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-// import { debounce } from '@/utils'
-
-// eslint-disable-next-line no-unused-vars
-const animationDuration = 6000
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    contrastData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    contrastData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-        console.log('watch拿到的val', val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.contrastData)
-      // console.log('methods拿到的pieDeptData', this.pieDeptData)
-    },
-    setOptions({ lastData, thisData, text, thisMinData, days } = {}) {
-      this.chart.setOption({
-        title: {
-          text: text + '月用电量同期对比',
-          subtext: ''
-        },
-        tooltip: {
-          trigger: 'axis'
-        },
-        legend: {
-          data: ['去年', '今年']
-        },
-        toolbox: {
-          show: true,
-          feature: {
-            dataZoom: {
-              yAxisIndex: 'none'
-            },
-            dataView: { readOnly: false },
-            magicType: { type: ['line', 'bar'] },
-            restore: {},
-            saveAsImage: {}
-          }
-        },
-        xAxis: {
-          type: 'category',
-          name: '日期',
-          boundaryGap: false,
-          data: days
-        },
-        yAxis: {
-          type: 'value',
-          name: '千瓦',
-          axisLabel: {
-            formatter: '{value}'
-          }
-        },
-        grid: [
-          { top: '25%', left: '15%', bottom: '5%' }
-        ],
-        series: [
-          {
-            name: '去年',
-            type: 'line',
-            // data: [11, 11, 15, 13, 12, 13, 10, 9, 11, 3],
-            data: lastData,
-            markPoint: {
-              data: [
-                // { type: 'max', name: '最大值' },
-                // { type: 'min', name: '最小值' }
-              ]
-            },
-            markLine: {
-              data: [
-                { type: 'average', name: '平均值' }
-              ]
-            }
-          },
-          {
-            name: '今年',
-            type: 'line',
-            // data: [1, 5, 2, 5, 3, 2, 0, 9, 6, 7],
-            data: thisData,
-            markPoint: {
-              data: [
-                // { name: '周最低', value: 5, xAxis: 1, yAxis: 2 }
-                // { type: 'max', name: '最大值' },
-                // { type: 'min', name: '最小值' }
-              ]
-            },
-            markLine: {
-              data: [
-                { type: 'average', name: '平均值' },
-                [{
-                  symbol: 'none',
-                  x: '90%',
-                  yAxis: 'max'
-                }, {
-                  symbol: 'circle',
-                  label: {
-                    normal: {
-                      position: 'start',
-                      formatter: '最大值'
-                    }
-                  },
-                  type: 'max',
-                  name: '最高点'
-                }]
-              ]
-            }
-          }
-        ]
-      })
-    }
-  }
-}
-</script>

src/views/report/queryElec/components/PieChartDepartment.vue

@@ -1,120 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-// import { debounce } from '@/utils'
-
-// eslint-disable-next-line no-unused-vars
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    pieDeptData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    pieDeptData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-        console.log('watch拿到的val', val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.pieDeptData)
-      // console.log('methods拿到的pieDeptData', this.pieDeptData)
-    },
-    setOptions({ DeptData, text } = {}) {
-      // console.log('setOptions拿到的DeptData', DeptData)
-      this.chart.setOption({
-        title: {
-          text: text + '月部门统计',
-          subtext: '',
-          x: 'center'
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          orient: 'vertical',
-          left: 'left',
-          data: ['', '', '', '', '']
-        },
-        series: [
-          {
-            name: text + '月',
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '60%'],
-            data: DeptData,
-            // data: [
-            //   { value: 335, name: '直接访问' },
-            //   { value: 310, name: '邮件营销' },
-            //   { value: 234, name: '联盟广告' },
-            //   { value: 135, name: '视频广告' },
-            //   { value: 1548, name: '搜索引擎' }
-            // ],
-            itemStyle: {
-              emphasis: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
-      })
-      const that = this
-      // 点击饼图拿到对应内容
-      this.chart.on('click', function(params) {
-        // console.log(params)
-        that.$emit('chartClickDept', params.name)
-      })
-    }
-  }
-}
-</script>

src/views/report/queryElec/components/PieChartType.vue

@@ -1,109 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    pieTypeData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    pieTypeData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-        console.log('watch拿到的val', val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.pieTypeData)
-      // console.log('methods拿到的pieTypeData', this.pieTypeData)
-    },
-    setOptions({ TypeData, text } = {}) {
-      // console.log('setOptions拿到的TypeData', TypeData)
-      this.chart.setOption({
-        title: {
-          text: text + '月类型统计',
-          subtext: '',
-          x: 'center'
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          orient: 'vertical',
-          left: 'left',
-          data: ['', '', '', '', '']
-        },
-        series: [
-          {
-            name: text + '月',
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '60%'],
-            data: TypeData,
-            itemStyle: {
-              emphasis: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
-      })
-      const that = this
-      // 点击饼图拿到对应内容
-      this.chart.on('click', function(params) {
-        console.log(params)
-        that.$emit('chartClickType', params.name)
-      })
-    }
-  }
-}
-</script>

src/views/report/queryElec/components/TodoList/Todo.vue

@@ -1,81 +0,0 @@
-<template>
-  <li :class="{ completed: todo.done, editing: editing }" class="todo">
-    <div class="view">
-      <input
-        :checked="todo.done"
-        class="toggle"
-        type="checkbox"
-        @change="toggleTodo( todo)"
-      >
-      <label @dblclick="editing = true" v-text="todo.text" />
-      <button class="destroy" @click="deleteTodo( todo )" />
-    </div>
-    <input
-      v-show="editing"
-      v-focus="editing"
-      :value="todo.text"
-      class="edit"
-      @keyup.enter="doneEdit"
-      @keyup.esc="cancelEdit"
-      @blur="doneEdit"
-    >
-  </li>
-</template>
-
-<script>
-export default {
-  name: 'Todo',
-  directives: {
-    focus(el, { value }, { context }) {
-      if (value) {
-        context.$nextTick(() => {
-          el.focus()
-        })
-      }
-    }
-  },
-  props: {
-    todo: {
-      type: Object,
-      default: function() {
-        return {}
-      }
-    }
-  },
-  data() {
-    return {
-      editing: false
-    }
-  },
-  methods: {
-    deleteTodo(todo) {
-      this.$emit('deleteTodo', todo)
-    },
-    editTodo({ todo, value }) {
-      this.$emit('editTodo', { todo, value })
-    },
-    toggleTodo(todo) {
-      this.$emit('toggleTodo', todo)
-    },
-    doneEdit(e) {
-      const value = e.target.value.trim()
-      const { todo } = this
-      if (!value) {
-        this.deleteTodo({
-          todo
-        })
-      } else if (this.editing) {
-        this.editTodo({
-          todo,
-          value
-        })
-        this.editing = false
-      }
-    },
-    cancelEdit(e) {
-      e.target.value = this.todo.text
-      this.editing = false
-    }
-  }
-}
-</script>

src/views/report/queryElec/components/TodoList/index.scss

@@ -1,320 +0,0 @@
-.todoapp {
-  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  line-height: 1.4em;
-  color: #4d4d4d;
-  min-width: 230px;
-  max-width: 550px;
-  margin: 0 auto ;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 300;
-  background: #fff;
-  z-index: 1;
-  position: relative;
-  button {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: none;
-    font-size: 100%;
-    vertical-align: baseline;
-    font-family: inherit;
-    font-weight: inherit;
-    color: inherit;
-    -webkit-appearance: none;
-    appearance: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  :focus {
-    outline: 0;
-  }
-  .hidden {
-    display: none;
-  }
-  .todoapp {
-    background: #fff;
-    margin: 130px 0 40px 0;
-    position: relative;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
-  }
-  .todoapp input::-webkit-input-placeholder {
-    font-style: italic;
-    font-weight: 300;
-    color: #e6e6e6;
-  }
-  .todoapp input::-moz-placeholder {
-    font-style: italic;
-    font-weight: 300;
-    color: #e6e6e6;
-  }
-  .todoapp input::input-placeholder {
-    font-style: italic;
-    font-weight: 300;
-    color: #e6e6e6;
-  }
-  .todoapp h1 {
-    position: absolute;
-    top: -155px;
-    width: 100%;
-    font-size: 100px;
-    font-weight: 100;
-    text-align: center;
-    color: rgba(175, 47, 47, 0.15);
-    -webkit-text-rendering: optimizeLegibility;
-    -moz-text-rendering: optimizeLegibility;
-    text-rendering: optimizeLegibility;
-  }
-  .new-todo,
-  .edit {
-    position: relative;
-    margin: 0;
-    width: 100%;
-    font-size: 18px;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: 1.4em;
-    border: 0;
-    color: inherit;
-    padding: 6px;
-    border: 1px solid #999;
-    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  .new-todo {
-    padding: 10px 16px 16px 60px;
-    border: none;
-    background: rgba(0, 0, 0, 0.003);
-    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
-  }
-  .main {
-    position: relative;
-    z-index: 2;
-    border-top: 1px solid #e6e6e6;
-  }
-  .toggle-all {
-    text-align: center;
-    border: none;
-    /* Mobile Safari */
-    opacity: 0;
-    position: absolute;
-  }
-  .toggle-all+label {
-    width: 60px;
-    height: 34px;
-    font-size: 0;
-    position: absolute;
-    top: -52px;
-    left: -13px;
-    -webkit-transform: rotate(90deg);
-    transform: rotate(90deg);
-  }
-  .toggle-all+label:before {
-    content: '❯';
-    font-size: 22px;
-    color: #e6e6e6;
-    padding: 10px 27px 10px 27px;
-  }
-  .toggle-all:checked+label:before {
-    color: #737373;
-  }
-  .todo-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  .todo-list li {
-    position: relative;
-    font-size: 24px;
-    border-bottom: 1px solid #ededed;
-  }
-  .todo-list li:last-child {
-    border-bottom: none;
-  }
-  .todo-list li.editing {
-    border-bottom: none;
-    padding: 0;
-  }
-  .todo-list li.editing .edit {
-    display: block;
-    width: 506px;
-    padding: 12px 16px;
-    margin: 0 0 0 43px;
-  }
-  .todo-list li.editing .view {
-    display: none;
-  }
-  .todo-list li .toggle {
-    text-align: center;
-    width: 40px;
-    /* auto, since non-WebKit browsers doesn't support input styling */
-    height: auto;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
-    border: none;
-    /* Mobile Safari */
-    -webkit-appearance: none;
-    appearance: none;
-  }
-  .todo-list li .toggle {
-    opacity: 0;
-  }
-  .todo-list li .toggle+label {
-    /*
-    Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
-    IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
-  */
-    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
-    background-repeat: no-repeat;
-    background-position: center left;
-    background-size: 36px;
-  }
-  .todo-list li .toggle:checked+label {
-    background-size: 36px;
-    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
-  }
-  .todo-list li label {
-    word-break: break-all;
-    padding: 15px 15px 15px 50px;
-    display: block;
-    line-height: 1.0;
-        font-size: 14px;
-    transition: color 0.4s;
-  }
-  .todo-list li.completed label {
-    color: #d9d9d9;
-    text-decoration: line-through;
-  }
-  .todo-list li .destroy {
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 10px;
-    bottom: 0;
-    width: 40px;
-    height: 40px;
-    margin: auto 0;
-    font-size: 30px;
-    color: #cc9a9a;
-    transition: color 0.2s ease-out;
-    cursor: pointer;
-  }
-  .todo-list li .destroy:hover {
-    color: #af5b5e;
-  }
-  .todo-list li .destroy:after {
-    content: '×';
-  }
-  .todo-list li:hover .destroy {
-    display: block;
-  }
-  .todo-list li .edit {
-    display: none;
-  }
-  .todo-list li.editing:last-child {
-    margin-bottom: -1px;
-  }
-  .footer {
-    color: #777;
-    position: relative;
-    padding: 10px 15px;
-    height: 40px;
-    text-align: center;
-    border-top: 1px solid #e6e6e6;
-  }
-  .footer:before {
-    content: '';
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: 40px;
-    overflow: hidden;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
-  }
-  .todo-count {
-    float: left;
-    text-align: left;
-  }
-  .todo-count strong {
-    font-weight: 300;
-  }
-  .filters {
-    margin: 0;
-    padding: 0;
-    position: relative;
-    z-index: 1;
-    list-style: none;
-  }
-  .filters li {
-    display: inline;
-  }
-  .filters li a {
-    color: inherit;
-    font-size: 12px;
-    padding: 3px 7px;
-    text-decoration: none;
-    border: 1px solid transparent;
-    border-radius: 3px;
-  }
-  .filters li a:hover {
-    border-color: rgba(175, 47, 47, 0.1);
-  }
-  .filters li a.selected {
-    border-color: rgba(175, 47, 47, 0.2);
-  }
-  .clear-completed,
-  html .clear-completed:active {
-    float: right;
-    position: relative;
-    line-height: 20px;
-    text-decoration: none;
-    cursor: pointer;
-  }
-  .clear-completed:hover {
-    text-decoration: underline;
-  }
-  .info {
-    margin: 65px auto 0;
-    color: #bfbfbf;
-    font-size: 10px;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-    text-align: center;
-  }
-  .info p {
-    line-height: 1;
-  }
-  .info a {
-    color: inherit;
-    text-decoration: none;
-    font-weight: 400;
-  }
-  .info a:hover {
-    text-decoration: underline;
-  }
-  /*
-  Hack to remove background from Mobile Safari.
-  Can't use it globally since it destroys checkboxes in Firefox
-*/
-  @media screen and (-webkit-min-device-pixel-ratio:0) {
-    .toggle-all,
-    .todo-list li .toggle {
-      background: none;
-    }
-    .todo-list li .toggle {
-      height: 40px;
-    }
-  }
-  @media (max-width: 430px) {
-    .footer {
-      height: 50px;
-    }
-    .filters {
-      bottom: 10px;
-    }
-  }
-}

src/views/report/queryElec/components/TodoList/index.vue

@@ -1,127 +0,0 @@
-<template>
-  <section class="todoapp">
-    <!-- header -->
-    <header class="header">
-      <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
-    </header>
-    <!-- main section -->
-    <section v-show="todos.length" class="main">
-      <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
-      <label for="toggle-all" />
-      <ul class="todo-list">
-        <todo
-          v-for="(todo, index) in filteredTodos"
-          :key="index"
-          :todo="todo"
-          @toggleTodo="toggleTodo"
-          @editTodo="editTodo"
-          @deleteTodo="deleteTodo"
-        />
-      </ul>
-    </section>
-    <!-- footer -->
-    <footer v-show="todos.length" class="footer">
-      <span class="todo-count">
-        <strong>{{ remaining }}</strong>
-        {{ remaining | pluralize('item') }} left
-      </span>
-      <ul class="filters">
-        <li v-for="(val, key) in filters" :key="key">
-          <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
-        </li>
-      </ul>
-      <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
-        Clear completed
-      </button> -->
-    </footer>
-  </section>
-</template>
-
-<script>
-import Todo from './Todo.vue'
-
-const STORAGE_KEY = 'todos'
-const filters = {
-  all: todos => todos,
-  active: todos => todos.filter(todo => !todo.done),
-  completed: todos => todos.filter(todo => todo.done)
-}
-const defalutList = [
-  { text: 'star this repository', done: false },
-  { text: 'fork this repository', done: false },
-  { text: 'follow author', done: false },
-  { text: 'vue-element-admin', done: true },
-  { text: 'vue', done: true },
-  { text: 'element-ui', done: true },
-  { text: 'axios', done: true },
-  { text: 'webpack', done: true }
-]
-export default {
-  components: { Todo },
-  filters: {
-    pluralize: (n, w) => n === 1 ? w : w + 's',
-    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
-  },
-  data() {
-    return {
-      visibility: 'all',
-      filters,
-      // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
-      todos: defalutList
-    }
-  },
-  computed: {
-    allChecked() {
-      return this.todos.every(todo => todo.done)
-    },
-    filteredTodos() {
-      return filters[this.visibility](this.todos)
-    },
-    remaining() {
-      return this.todos.filter(todo => !todo.done).length
-    }
-  },
-  methods: {
-    setLocalStorage() {
-      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
-    },
-    addTodo(e) {
-      const text = e.target.value
-      if (text.trim()) {
-        this.todos.push({
-          text,
-          done: false
-        })
-        this.setLocalStorage()
-      }
-      e.target.value = ''
-    },
-    toggleTodo(val) {
-      val.done = !val.done
-      this.setLocalStorage()
-    },
-    deleteTodo(todo) {
-      this.todos.splice(this.todos.indexOf(todo), 1)
-      this.setLocalStorage()
-    },
-    editTodo({ todo, value }) {
-      todo.text = value
-      this.setLocalStorage()
-    },
-    clearCompleted() {
-      this.todos = this.todos.filter(todo => !todo.done)
-      this.setLocalStorage()
-    },
-    toggleAll({ done }) {
-      this.todos.forEach(todo => {
-        todo.done = done
-        this.setLocalStorage()
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-  @import './index.scss';
-</style>

src/views/report/queryElec/components/mixins/resize.js

@@ -1,56 +0,0 @@
-import { debounce } from '@/utils'
-
-export default {
-  data() {
-    return {
-      $_sidebarElm: null
-    }
-  },
-  mounted() {
-    this.$_initResizeEvent()
-    this.$_initSidebarResizeEvent()
-  },
-  beforeDestroy() {
-    this.$_destroyResizeEvent()
-    this.$_destroySidebarResizeEvent()
-  },
-  // to fixed bug when cached by keep-alive
-  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
-  activated() {
-    this.$_initResizeEvent()
-    this.$_initSidebarResizeEvent()
-  },
-  deactivated() {
-    this.$_destroyResizeEvent()
-    this.$_destroySidebarResizeEvent()
-  },
-  methods: {
-    // use $_ for mixins properties
-    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
-    $_resizeHandler() {
-      return debounce(() => {
-        if (this.chart) {
-          this.chart.resize()
-        }
-      }, 100)()
-    },
-    $_initResizeEvent() {
-      window.addEventListener('resize', this.$_resizeHandler)
-    },
-    $_destroyResizeEvent() {
-      window.removeEventListener('resize', this.$_resizeHandler)
-    },
-    $_sidebarResizeHandler(e) {
-      if (e.propertyName === 'width') {
-        this.$_resizeHandler()
-      }
-    },
-    $_initSidebarResizeEvent() {
-      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
-    },
-    $_destroySidebarResizeEvent() {
-      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
-    }
-  }
-}

src/views/report/queryElec/index.vue

@@ -1,205 +1,184 @@
-/* eslint-disable vue/valid-template-root */
 <template>
   <div class="app-container">
     <div class="filter-container">
       <div class="block">
-        <el-date-picker v-model="yearDate" :clearable="false" type="year" placeholder="选择年" />
+        <el-date-picker v-model="yearDate" :clearable="false" type="month" placeholder="选择年" />
       </div>
     </div>
 
-    <el-row v-if="isBarChart1" style="position: relative;">
+    <el-row v-if="isChart1" style="position: relative;">
       <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">
-        {{ year }}年集团用电量：{{ total }}万度
+        {{ year }}年集团用电量：{{ total }}万千瓦
       </p>
+       <el-radio-group v-model="radio1" class="group" @change="changeGroup('1')">
+          <el-radio :label="1">集团</el-radio>
+          <el-radio :label="2">一中心</el-radio>
+          <el-radio :label="3">二中心</el-radio>
+          <el-radio :label="4">三中心</el-radio>
+        </el-radio-group>
       <el-col :span="24">
-        <div id="barChart1" style="width: 100%;height:400px;" />
+        <div id="chart1" style="width: 100%;height:400px;" />
       </el-col>
     </el-row>
 
-    <!-- 年度维修成本 -->
-    <el-row>
+    <el-row style="position: relative;">
+       <el-radio-group v-model="radio2" class="group" @change="changeGroup('2')">
+          <el-radio :label="1">集团</el-radio>
+          <el-radio :label="2">一中心</el-radio>
+          <el-radio :label="3">二中心</el-radio>
+          <el-radio :label="4">三中心</el-radio>
+        </el-radio-group>
+      <el-col :span="24">
+        <div id="chart2" style="width: 100%;height:400px;" />
+      </el-col>
+    </el-row>
+
+    <el-row style="position: relative;">
+       <el-radio-group v-model="radio3" class="group" @change="changeGroup('3')">
+          <el-radio :label="1">集团</el-radio>
+          <el-radio :label="2">一中心</el-radio>
+          <el-radio :label="3">二中心</el-radio>
+          <el-radio :label="4">三中心</el-radio>
+        </el-radio-group>
+      <el-col :span="24">
+        <div id="chart3" style="width: 100%;height:400px;" />
+      </el-col>
+    </el-row>
+    <el-row style="position: relative;">
       <el-col :span="12">
-        <div id="lineChart1" style="width: 100%;height:400px;" />
+        <div style="height: 50px;">
+          <el-select style="float: right;margin-right: 20px;" v-model="getChart4Parm.parammaps.pastureName" multiple :multiple-limit="5" collapse-tags placeholder="牧场" @change="changePasture('4')">
+            <el-option v-for="item in pastureList" :key="item.id" :label="item.name" :value="item.name"> </el-option>
+          </el-select>
+        </div>
+        <div id="chart4" style="width: 100%;height:400px;" />
       </el-col>
       <el-col :span="12">
-        <div id="lineChart2" style="width: 100%;height:400px;" />
+        <div style="height: 50px;">
+          <el-select style="float: right;margin-right: 20px;" v-model="getChart5Parm.parammaps.deptName" placeholder="部门" @change="changeDept('5')">
+            <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.name"> </el-option>
+          </el-select>
+        </div>
+        <div id="chart5" style="width: 100%;height:400px;" />
       </el-col>
     </el-row>
 
-    <el-row>
+    <el-row style="position: relative;">
       <el-col :span="12">
-        <div id="pieChart1" style="width: 100%;height:400px;" />
+        <div style="height: 50px;" />
+        <div id="chart6" style="width: 100%;height:400px;" />
       </el-col>
       <el-col :span="12">
-        <div id="barChart2" style="width: 100%;height:400px;" />
+        <div style="height: 50px;">
+          <el-select style="float: right;margin-right: 20px;" v-model="getChart7Parm.parammaps.pastureName" multiple :multiple-limit="5" collapse-tags placeholder="牧场" @change="changePasture('7')">
+            <el-option v-for="item in pastureList" :key="item.id" :label="item.name" :value="item.name"> </el-option>
+          </el-select>
+        </div>
+        <div id="chart7" style="width: 100%;height:400px;" />
       </el-col>
     </el-row>
-
   </div>
 
 </template>
 
 <script>
 import echarts from 'echarts'
-
-require('echarts/theme/macarons') // echarts theme
-
-// eslint-disable-next-line no-unused-vars
-import waves from '@/directive/waves' // waves directive
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
-import { GetDataByName, GetDataByNames, GetReportform, checkButtons } from '@/api/common'
-import { parseTime } from '@/utils/index.js'
-
+import { GetDataByName,GetDataByNames, GetReportform, checkButtons } from '@/api/common'
 import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
 export default {
   name: 'QueryElec',
-  directives: { waves },
-  components: { Pagination },
   data() {
     return {
       yearDate: new Date(),
-
-      pasture: Cookies.get('pasturename'),
       year: new Date().getFullYear(),
       month: new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1,
-      deptment: '维修处',
+      pastureList:[],
+      deptList:[],
       total: '',
-      getBarChart1Parm: {
-        name: 'getpSumNowElec',
+      radio1:1,
+      isChart1: [],
+      chart_data1: {},
+      getChart1Parm: {
+        name: 'getpSumNowWater',
         parammaps: {
           receiveTime: new Date().getFullYear(),
-          center:'',
           pastureName: Cookies.get('pasturename')
         }
       },
-      getLineChart1Parm: {
-        name: 'getPastureSumMonthElec',
+      radio2:1,
+      isChart2: [],
+      chart_data2: {},
+      getChart2Parm: {
+        name: 'getpSumNowWater',
         parammaps: {
           receiveTime: new Date().getFullYear(),
           pastureName: Cookies.get('pasturename')
         }
       },
-      getLineChart2Parm: {
-        name: 'getPastureSumDayElec',
+
+      radio3:1,
+      isChart3: [],
+      chart_data3: {},
+      getChart3Parm: {
+        name: 'getpSumNowWater',
         parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
+          receiveTime: new Date().getFullYear(),
           pastureName: Cookies.get('pasturename')
         }
       },
-      getPieChart1Parm: {
-        name: 'getdeptSumMonthElec',
+
+
+      isChart4: [],
+      chart_data4: {},
+      getChart4Parm: {
+        name: 'getpSumNowWater',
         parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
+          receiveTime: new Date().getFullYear(),
           pastureName: Cookies.get('pasturename')
         }
       },
-      getBarChart2Parm: {
-        name: 'geteqclassSumMonthElec',
+
+      isChart5: [],
+      chart_data5: {},
+      getChart5Parm: {
+        name: 'getpSumNowWater',
         parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
+          receiveTime: new Date().getFullYear(),
           pastureName: Cookies.get('pasturename'),
-          deptName: ''
+          deptName:''
         }
       },
-      barChart1: null,
-      lineChart1: null,
-      lineChart2: null,
-      pieChart1: null,
-      barChart2: null,
 
-      chart_data1: {
-        // pasture: ['宝鸡', '恒盛', '塞一', '塞二', '塞三', '塞四', '塞五', '通山', '合肥', '和林'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data2: {
-        // months: ['2019-01', '2019-02', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data3: {
-        // day: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data4: {
-        // name: ['饲养处', '其他部门', '设备处', '能源处', '牧场办公室'],
-        // psum: [
-        //   { value: 335, name: '饲养处' },
-        //   { value: 310, name: '其他部门' },
-        //   { value: 234, name: '设备处' },
-        //   { value: 135, name: '能源处' },
-        //   { value: 1548, name: '牧场办公室' }
-        // ]
-      },
-      chart_data5: {
-        // typeName: ['小型装载机', '叉车', '拖拉机', '抛料机', '搅拌机'],
-        // eqCost: [123, 332, 222, 333, 444],
-        // lastYear: [22, 342, 234, 234, 66]
+      isChart6: [],
+      chart_data6: {},
+      getChart6Parm: {
+        name: 'getpSumNowWater',
+        parammaps: {
+          receiveTime: new Date().getFullYear(),
+          pastureName: Cookies.get('pasturename')
+        }
       },
-
-      tableKey: 0,
-      list: null,
-      total: 0,
-      listLoading: true,
-      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
-      cellStyle: { padding: 0 + 'px' },
-
-      dialogFormVisibleCard: false,
-      listLoadingSee: true,
-      rowSeeData: {},
-      listSee: [],
-      totalSee: 0,
-      getdataListParmSee: {
-        name: 'geteqclassSumDay',
-        page: 1,
-        offset: 1,
-        pagecount: 10,
-        returntype: 'Map',
+      isChart7: [],
+      chart_data7: {},
+      getChart7Parm: {
+        name: 'getpSumNowWater',
         parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename'),
-          deptName: '',
-          typeName: '',
-          assetCode: '',
-          eqName: '',
-          startTime: '',
-          stopTime: '',
-          pastureId: Cookies.get('pastureid')
+          receiveTime: new Date().getFullYear(),
+          pastureName: Cookies.get('pasturename')
         }
       },
-      buttons: [],
-      isBarChart1: []
-
-    }
-  },
-
-  watch: {
-    'yearDate': {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        var time = this.yearDate
-        console.log(newVal.getFullYear())
-        this.year = time.getFullYear()
-        this.getBarChart1Parm.parammaps.receiveTime = time.getFullYear()
-        this.getLineChart1Parm.parammaps.receiveTime = time.getFullYear()
-        this.getLineChart2Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-        this.getPieChart1Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-        this.getBarChart2Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-
-        this.getBarChart1()
-        this.getLineChart1()
-        this.getLineChart2()
-        this.getPieChart1()
-      }
     }
   },
-
   created() {
-    this.getBarChart1()
-    this.getLineChart1()
-    this.getLineChart2()
-    this.getPieChart1()
+    this.get_select_list()
+    this.getChart1()
+    this.getChart2()
+    this.getChart3()
+    this.getChart4()
+    this.getChart5()
+    this.getChart6()
+    this.getChart7()
     const that = this
     GetDataByName({ 'name': 'getUserPCButtons', 'parammaps': { 'jwt_username': Cookies.get('name') }}).then(response => {
       that.buttons = response.data.list
@@ -207,306 +186,479 @@ export default {
     })
   },
   mounted() {
-    // this.roadBarChart1(this.chart_data1)
-    // this.roadlineChart1(this.chart_data2, this.pasture, this.year)
-    // this.roadlineChart2(this.chart_data3, this.pasture, this.month)
-    //  this.roadpieChart1(this.chart_data4, this.month)
-    // this.roadBarChart2(this.chart_data5, this.deptment)
   },
   methods: {
+    get_select_list() {
+      var send_data =  [
+        { name: 'findAllPasture', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': Cookies.get('pastureid') }},
+      ]
+      GetDataByNames(send_data).then(response => {
+        this.pastureList = response.data.findAllPasture.list
+      })
+    },
+    changeGroup(item){
+      if(item == 1){
+        this.getChart1()
+      }else if(item == 2){
+        this.getChart2()
+      }else if(item == 3){
+        this.getChart3()
+      }
+    },
+    changePasture(item){
+      if(item == 4){
+        this.getChart4()
+      }else if(item == 7){
+        this.getChart7()
+      }
+    },
+    changeDept(item){
+      if(item == 5){
+        this.getChart5()
+      }
+    },
     get_auto_buttons() {
       // 图1
-      const BarChart1 = 'report:queryElec:pastures'
-      const isBarChart1 = checkButtons(this.$store.state.user.buttons, BarChart1)
-      this.isBarChart1 = isBarChart1
+      const chart1 = 'report:queryWater:pastures'
+      const isChart1 = checkButtons(this.$store.state.user.buttons, chart1)
+      this.isChart1 = isChart1
     },
-    // 各牧场年度维修成本对比
-    getBarChart1() {
-      GetReportform(this.getBarChart1Parm).then(response => {
+    // 各牧场年度用水量对比
+    getChart1() {
+      GetReportform(this.getChart1Parm).then(response => {
         console.log('图1', response)
-        this.chart_data1 = response.data.chart_data
-        this.roadBarChart1(this.chart_data1)
+        // this.chart_data1 = response.data.chart_data
+        this.chart_data1 = {
+          data1:[10,20,30,40,50],
+          data2:[20,30,40,50,60],
+          xdata:["马鞍山牧场", "汶上牧场", "商河牧场", "合肥牧场", "蚌埠牧场"]
+        }
+        this.roadChart1(this.chart_data1)
         var nowYear = response.data.chart_data.nowYear
         var total = 0
         if (nowYear !== null || nowYear !== undefined) {
           nowYear.forEach(function(item, index) {
-            console.log(parseFloat(item))
             total = total + parseFloat(item)
           })
         }
-        this.total = total.toFixed(4)
+        this.total = total.toFixed(2)
       })
     },
-    getLineChart1() {
-      GetReportform(this.getLineChart1Parm).then(response => {
+    // 单头牛水量
+    getChart2() {
+      GetReportform(this.getChart2Parm).then(response => {
         console.log('图2', response)
-        this.chart_data2 = response.data.chart_data
-        this.roadlineChart1(this.chart_data2, this.pasture, this.year)
+        // this.chart_data2 = response.data.chart_data
+        this.chart_data2 = {
+          data1:[10,20,30,40,50],
+          data2:[20,30,40,50,60],
+          xdata:["马鞍山牧场", "汶上牧场", "商河牧场", "合肥牧场", "蚌埠牧场"]
+        }
+        this.roadChart2(this.chart_data2)
       })
     },
-    getLineChart2() {
-      GetReportform(this.getLineChart2Parm).then(response => {
+
+    // 单头牛水费
+    getChart3() {
+      GetReportform(this.getChart3Parm).then(response => {
         console.log('图3', response)
-        this.chart_data3 = response.data.chart_data
-        this.roadlineChart2(this.chart_data3, this.pasture, this.month)
+        // this.chart_data3 = response.data.chart_data
+        this.chart_data3 = {
+          data1:[10,20,30,40,50],
+          data2:[20,30,40,50,60],
+          data3:[30,40,50,60,70],
+          xdata:["马鞍山牧场", "汶上牧场", "商河牧场", "合肥牧场", "蚌埠牧场"]
+        }
+        this.roadChart3(this.chart_data3)
       })
     },
-    getPieChart1() {
-      GetDataByName(this.getPieChart1Parm).then(response => {
+
+    // XX牧场XX年每月单头牛用水量对比
+    getChart4() {
+      GetReportform(this.getChart4Parm).then(response => {
         console.log('图4', response)
-        if (response.data === null || response.data.list === null) {
-          this.chart_data4 = { name: [], psum: [] }
-          this.roadpieChart1(this.chart_data4, this.month)
-        } else {
-          this.chart_data4.psum = response.data.list
-          var name = []
-          console.log(response.data.list)
-          response.data.list.forEach(function(i) {
-            name.push(i.name)
-          })
-          console.log(this.chart_data4)
-          this.chart_data4.name = name
-          this.roadpieChart1(this.chart_data4, this.month)
-          this.deptment = name[0]
-          this.getdataListParmSee.parammaps.deptName = name[0]
-          this.getBarChart2Parm.parammaps.deptName = name[0]
-          this.getBarChart2()
+        // this.chart_data4 = response.data.chart_data
+        this.chart_data4 = {
+          data1:[
+            {data:[10,20,30,40,50]},
+            {data:[20,30,40,50,60]},
+            {data:[30,40,50,60,70]},
+          ],
+          data_name:["马鞍山牧场", "汶上牧场", "商河牧场"],
+          xdata:["2023-01", "2023-02", "2023-03", "2023-04", "2023-05"]
         }
+        this.roadChart4(this.chart_data4)
       })
     },
-    getBarChart2() {
-      GetReportform(this.getBarChart2Parm).then(response => {
+
+    // XX月部门统计
+    getChart5() {
+      GetReportform(this.getChart5Parm).then(response => {
         console.log('图5', response)
-        this.chart_data5 = response.data.chart_data
-        this.roadBarChart2(this.chart_data5, this.deptment)
+        // this.chart_data5 = response.data.chart_data
+        this.chart_data5 = {
+          data1:[10,20,30,40,50],
+          data2:[20,30,40,50,60],
+          xdata:["马鞍山牧场挤奶处", "和林牧场挤奶处", "蚌埠牧场挤奶处", "塞一牧场挤奶处", "塞二牧场挤奶处"]
+        }
+        this.roadChart5(this.chart_data5)
       })
     },
-
-    // 各牧场年度维修成本对比
-    roadBarChart1(chart_data1) {
-      if (this.barChart1 != null) {
-        this.barChart1.dispose()
+    // XX牧场XX年每月用水量对比
+    getChart6() {
+      GetReportform(this.getChart6Parm).then(response => {
+        console.log('图6', response)
+        // this.chart_data6 = response.data.chart_data
+        this.chart_data6 = {
+          data1:[10,20,30,40,50],
+          data2:[20,30,40,50,60],
+          data3:[30,40,50,60,70],
+          xdata:["2023-01", "2023-02", "2023-03", "2023-04", "2023-05"]
+        }
+        this.roadChart6(this.chart_data6)
+      })
+    },
+    // XX月每日用水量
+    getChart7() {
+      GetReportform(this.getChart7Parm).then(response => {
+        console.log('图7', response)
+        // this.chart_data7 = response.data.chart_data
+        this.chart_data7 = {
+          data1:[
+            {data:[10,20,30,40,50]},
+            {data:[20,30,40,50,60]},
+            {data:[30,40,50,60,70]},
+          ],
+          data_name:["马鞍山牧场", "汶上牧场", "商河牧场"],
+          xdata:["2023-01", "2023-02", "2023-03", "2023-04", "2023-05"]
+        }
+        this.roadChart7(this.chart_data7)
+      })
+    },
+    // 各牧场年度用水量对比
+    roadChart1(chart_data) {
+      if (this.chart1 != null) {
+        this.chart1.dispose()
       }
-      this.barChart1 = echarts.init(document.getElementById('barChart1'))
+      this.chart1 = echarts.init(document.getElementById('chart1'))
       var option = {
         title: { text: '各牧场年度用电量对比', textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
         legend: {
-          data: ['今年用量', '去年同期'],
+          data: ['今年用量', '迄今预算'],
           right: 40
         },
-        color: ['#2dc0e8', '#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '4%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data1.pasture, axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '电量(度)', axisLabel: { formatter: '{value}万' }}],
+        color: ['#2dc0e8', '#769cfc'],
+        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: '电量(千瓦)', axisLabel: { formatter: '{value}万' }}],
         series: [
           {
             name: '今年用量',
             type: 'bar',
-            data: chart_data1.nowYear,
+            data: chart_data.data1,
+            barMaxWidth:20,
             emphasis: { label: { show: true, position: 'inside' }}
           },
           {
-            name: '去年同期',
+            name: '迄今预算',
             type: 'bar',
-            data: chart_data1.lastYear,
+            barMaxWidth:20,
+            data: chart_data.data2,
             emphasis: { label: { show: true, position: 'inside' }}
           }
 
         ]
       }
-      this.barChart1.setOption(option)
+      this.chart1.setOption(option)
       window.onresize = function() {
-        this.barChart1.resize()
+        this.chart1.resize()
       }
       var that = this
-      this.barChart1.on('click', function(param, i) {
+      this.chart1.on('click', function(param, i) {
         console.log(param)
-        that.pasture = param.name
-        that.getLineChart1Parm.parammaps.pastureName = param.name
-        that.getLineChart2Parm.parammaps.pastureName = param.name
-        that.getPieChart1Parm.parammaps.pastureName = param.name
-        that.getBarChart2Parm.parammaps.pastureName = param.name
-
-        that.getLineChart1()
-        that.getLineChart2()
-        that.getPieChart1()
       })
     },
-    // 每月维修成本对比
-    roadlineChart1(chart_data2, pasture, year) {
-      if (this.lineChart1 != null) {
-        this.lineChart1.dispose()
+    // 单头牛水量
+    roadChart2(chart_data) {
+      if (this.chart2 != null) {
+        this.chart2.dispose()
       }
-      this.lineChart1 = echarts.init(document.getElementById('lineChart1'))
+      this.chart2 = echarts.init(document.getElementById('chart2'))
       var option = {
-        title: { text: pasture + year + '每月用电量对比', textStyle: { color: '#769cfc' }},
+        title: { text: '单头牛电量', left:'center',textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
         legend: {
-          data: ['今年用量', '去年同期用量'],
-          x: 'right'
+          data: ['实际费用', '去年同期'],
+          right: 40
         },
-        color: [ '#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data2.months, name: '月份', axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '电量(度)', axisLabel: { formatter: '{value}万' }}],
+        color: ['#2dc0e8', '#769cfc'],
+        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: [
           {
-            name: '今年用量',
-            type: 'line',
-            data: chart_data2.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
+            name: '实际费用',
+            type: 'bar',
+            data: chart_data.data1,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20,
+            markLine:{ data:[ {yAxis:20} ] }
           },
           {
-            name: '去年同期用量',
-            type: 'line',
-            data: chart_data2.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
+            name: '去年同期',
+            type: 'bar',
+            data: chart_data.data2,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
           }
 
         ]
       }
-      this.lineChart1.setOption(option)
+      this.chart2.setOption(option)
       window.onresize = function() {
-        this.lineChart1.resize()
+        this.chart2.resize()
       }
       var that = this
-      this.lineChart1.on('click', function(param, i) {
+      this.chart2.on('click', function(param, i) {
         console.log(param)
-
-        that.getLineChart2Parm.parammaps.receiveTime = param.name
-        that.getPieChart1Parm.parammaps.receiveTime = param.name
-        that.getBarChart2Parm.parammaps.receiveTime = param.name
-
-        var num = param.name.substring(5)
-        console.log(num)
-        that.month = num
-        that.getLineChart2()
-        that.getPieChart1()
       })
     },
-
-    // 每月维修成本对比
-    roadlineChart2(chart_data3, pasture, month) {
-      if (this.lineChart2 != null) {
-        this.lineChart2.dispose()
+    // 单头牛水费
+    roadChart3(chart_data) {
+      if (this.chart3 != null) {
+        this.chart3.dispose()
       }
-      this.lineChart2 = echarts.init(document.getElementById('lineChart2'))
+      this.chart3 = echarts.init(document.getElementById('chart3'))
       var option = {
-        title: { text: pasture + month + '月每日用电量对比', textStyle: { color: '#769cfc' }},
+        title: { text: '单头牛电费', left:'center',textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
         legend: {
-          data: ['今年日用量', '去年同期'],
-          x: 'right'
+          data: ['实际费用', '预算','去年同期'],
+          right: 40
         },
-        color: [ '#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data3.day, name: '日期', axisLabel: { interval: 0 }}],
-        yAxis: [{ type: 'value', name: '电量(度)', axisLabel: { formatter: '{value}' }}],
+        color: ['#2dc0e8', '#769cfc', '#FFB800'],
+        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: [
           {
-            name: '今年日用量',
-            type: 'line',
-            data: chart_data3.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
+            name: '实际费用',
+            type: 'bar',
+            data: chart_data.data1,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20,
+            markLine:{ data:[ {yAxis:20} ] }
+          },
+          {
+            name: '预算',
+            type: 'bar',
+            data: chart_data.data2,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
           },
           {
             name: '去年同期',
-            type: 'line',
-            data: chart_data3.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
+            type: 'bar',
+            data: chart_data.data3,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
           }
 
         ]
       }
-      this.lineChart2.setOption(option)
+      this.chart3.setOption(option)
       window.onresize = function() {
-        this.lineChart2.resize()
+        this.chart3.resize()
       }
-      this.lineChart2.on('click', function(param, i) {
+      var that = this
+      this.chart3.on('click', function(param, i) {
         console.log(param)
       })
     },
-    // 部门统计
-    roadpieChart1(chart_data4, month) {
-      if (this.pieChart1 != null) {
-        this.pieChart1.dispose()
+    // 各牧场XX年每月单头牛用水量对比
+    roadChart4(chart_data) {
+      if (this.chart4 != null) {
+        this.chart4.dispose()
       }
-      this.pieChart1 = echarts.init(document.getElementById('pieChart1'))
+      this.chart4 = echarts.init(document.getElementById('chart4'))
+      var text = '各牧场' + parseTime(this.yearDate, '{y}') + '年每月单头牛用水量对比'
       var option = {
-        title: { text: month + '月部门统计', textStyle: { color: '#769cfc' }},
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
+        tooltip: { trigger: 'axis' },
+        legend: {
+          data: chart_data.data_name,
+          left: 40,
+          bottom:0
         },
+        color: ['#2dc0e8', '#769cfc', '#FFB800'],
+        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[i],
+                type: 'line',
+                data: chart_data.data1[i].data
+              }
+              serie.push(item)
+            }
+          }
+          return serie
+        }())
+      }
+      this.chart4.setOption(option)
+      window.onresize = function() {
+        this.chart4.resize()
+      }
+      var that = this
+      that.chart4.on('click', function(param, i) {
+        console.log(param)
+        that.getChart5()
+      })
+    },
+    // XX月部门统计
+    roadChart5(chart_data) {
+      if (this.chart5 != null) {
+        this.chart5.dispose()
+      }
+      this.chart5 = echarts.init(document.getElementById('chart5'))
+      var text = parseTime(new Date(), '{m}') + '月部门统计'
+      var option = {
+        title: { text: text, left:'center',textStyle: { color: '#769cfc' }},
+        tooltip: { trigger: 'axis' },
         legend: {
-          data: chart_data4.name, top: 40, x: 'right'
+          data: ['实际', '预算'],
+          right: 40,
+          bottom:0
         },
-        color: ['#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
+        color: ['#2dc0e8', '#769cfc'],
+        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: '千瓦', axisLabel: { formatter:'{value} 万'}}],
         series: [
           {
-            name: '',
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '60%'],
-            data: chart_data4.psum,
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
+            name: '实际',
+            type: 'bar',
+            data: chart_data.data1,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
+          },
+          {
+            name: '预算',
+            type: 'bar',
+            data: chart_data.data2,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
           }
-
         ]
       }
-      this.pieChart1.setOption(option)
+      this.chart5.setOption(option)
       window.onresize = function() {
-        this.pieChart1.resize()
+        this.chart5.resize()
       }
       var that = this
-      this.pieChart1.on('click', function(param, i) {
+      this.chart5.on('click', function(param, i) {
         console.log(param)
-        that.deptment = param.name
-        that.getBarChart2Parm.parammaps.deptName = param.name
-        that.getBarChart2()
       })
     },
-    // 维修成本
-    roadBarChart2(chart_data5, deptment) {
-      if (this.barChart2 != null) {
-        this.barChart2.dispose()
+    // XX牧场XX年每月用水量对比
+    roadChart6(chart_data) {
+      if (this.chart6 != null) {
+        this.chart6.dispose()
       }
-      this.barChart2 = echarts.init(document.getElementById('barChart2'))
+      this.chart6 = echarts.init(document.getElementById('chart6'))
       var option = {
-        title: { text: deptment + '用电量', textStyle: { color: '#769cfc' }},
+        title: { text: 'XX牧场XX年每月用电量对比', left:'center',textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
         legend: {
-          data: ['用电量'],
-          x: 'right'
+          data: ['去年同期用量', '今年用量','预算'],
+          right: 40,
+          bottom:0
         },
-        color: [ '#769cfc', '#FFB800'],
+        color: ['#2dc0e8', '#769cfc', '#FFB800'],
         grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data5.typeName, name: '电表名称', axisLabel: { interval: 0 }}],
-        yAxis: [{ type: 'value', name: '电量(度)', axisLabel: { formatter: '{value}万' }}],
+        xAxis: [{ type: 'category',  name: '月份',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
+        yAxis: [{ type: 'value',name: '电量(千瓦)'}],
         series: [
           {
-            name: '用电量',
-            type: 'bar',
-            barWidth: 14,
-            data: chart_data5.eqCost,
-            emphasis: { label: { show: true, position: 'inside' }}
+            name: '去年同期用量',
+            type: 'line',
+            data: chart_data.data1,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
+          },
+          {
+            name: '今年用量',
+            type: 'line',
+            data: chart_data.data2,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
+          },
+          {
+            name: '预算',
+            type: 'line',
+            data: chart_data.data3,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
           }
-
         ]
       }
-      this.barChart2.setOption(option)
+      this.chart6.setOption(option)
       window.onresize = function() {
-        this.barChart2.resize()
+        this.chart6.resize()
       }
-    }
+      var that = this
+      this.chart6.on('click', function(param, i) {
+        console.log(param)
+      })
+    },
+    // XX月每日用水量
+    roadChart7(chart_data) {
+      if (this.chart7 != null) {
+        this.chart7.dispose()
+      }
+      this.chart7 = echarts.init(document.getElementById('chart7'))
+      var text = parseTime(new Date(), '{m}') + '月每日用水量'
+      var option = {
+        title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
+        tooltip: { trigger: 'axis' },
+        legend: {
+          data: chart_data.data_name,
+          left: 40,
+          bottom:0
+        },
+        color: ['#2dc0e8', '#769cfc', '#FFB800'],
+        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[i],
+                type: 'line',
+                data: chart_data.data1[i].data
+              }
+              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)
+      })
+    },
 
   }
 }
@@ -521,28 +673,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-
-.dashboard-editor-container {
-  padding: 20px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .github-corner {
-    position: absolute;
-    top: 0px;
-    border: 0;
-    right: 0;
-  }
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-  }
-}
-
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
-  }
+.group{
+  float: right;margin-bottom: 20px;
 }
 </style>

src/views/report/queryElec/index11.vue

@@ -1,580 +0,0 @@
-/* eslint-disable vue/valid-template-root */
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <div class="block">
-        <el-date-picker v-model="yearDate" :clearable="false" type="year" placeholder="选择年" />
-
-        <el-radio-group v-model="radio"    style="float:right;margin-top:20px">
-          <el-radio  label="集团">集团</el-radio>
-          <el-radio  label="一中心">一中心</el-radio>
-          <el-radio  label="二中心">二中心</el-radio>
-          <el-radio  label="三中心">三中心</el-radio>
-        </el-radio-group>   
-
-      </div>
-    </div>
-
-    <el-row v-if="isBarChart1" style="position: relative;">
-      <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">
-        {{ year }}年集团用电量：{{ total }}万千瓦
-      </p>
-      <el-col :span="24">
-        <div id="barChart1" style="width: 100%;height:400px;" />
-      </el-col>
-    </el-row>
-
-    <!-- 年度维修成本 -->
-    <el-row>
-      <el-col :span="12">
-        <div id="lineChart1" style="width: 100%;height:400px;" />
-      </el-col>
-      <el-col :span="12">
-        <div id="lineChart2" style="width: 100%;height:400px;" />
-      </el-col>
-    </el-row>
-
-    <el-row>
-      <el-col :span="12">
-        <div id="pieChart1" style="width: 100%;height:400px;" />
-      </el-col>
-      <el-col :span="12">
-        <div id="barChart2" style="width: 100%;height:400px;" />
-      </el-col>
-    </el-row>
-
-  </div>
-
-</template>
-
-<script>
-import echarts from 'echarts'
-
-require('echarts/theme/macarons') // echarts theme
-
-// eslint-disable-next-line no-unused-vars
-import waves from '@/directive/waves' // waves directive
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
-import { GetDataByName, GetDataByNames, GetReportform, checkButtons } from '@/api/common'
-import { parseTime } from '@/utils/index.js'
-
-import Cookies from 'js-cookie'
-export default {
-  name: 'QueryElec',
-  directives: { waves },
-  components: { Pagination },
-  data() {
-    return {
-      yearDate: new Date(),
-
-      radio: "集团",
-
-      pasture: Cookies.get('pasturename'),
-      year: new Date().getFullYear(),
-      month: new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1,
-      deptment: '维修处',
-      total: '',
-      getBarChart1Parm: {
-        name: 'getpSumNowElec',
-        parammaps: {
-          receiveTime: new Date().getFullYear(),
-          center:'',
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getLineChart1Parm: {
-        name: 'getPastureSumMonthElec',
-        parammaps: {
-          receiveTime: new Date().getFullYear(),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getLineChart2Parm: {
-        name: 'getPastureSumDayElec',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getPieChart1Parm: {
-        name: 'getdeptSumMonthElec',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getBarChart2Parm: {
-        name: 'geteqclassSumMonthElec',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename'),
-          deptName: ''
-        }
-      },
-      barChart1: null,
-      lineChart1: null,
-      lineChart2: null,
-      pieChart1: null,
-      barChart2: null,
-
-      chart_data1: {
-        // pasture: ['宝鸡', '恒盛', '塞一', '塞二', '塞三', '塞四', '塞五', '通山', '合肥', '和林'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data2: {
-        // months: ['2019-01', '2019-02', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66],
-        // budget: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data3: {
-        // day: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data4: {
-        // name: ['饲养处', '其他部门', '设备处', '能源处', '牧场办公室'],
-        // psum: [
-        //   { value: 335, name: '饲养处' },
-        //   { value: 310, name: '其他部门' },
-        //   { value: 234, name: '设备处' },
-        //   { value: 135, name: '能源处' },
-        //   { value: 1548, name: '牧场办公室' }
-        // ]
-      },
-      chart_data5: {
-        // typeName: ['小型装载机', '叉车', '拖拉机', '抛料机', '搅拌机'],
-        // eqCost: [123, 332, 222, 333, 444],
-        // lastYear: [22, 342, 234, 234, 66]
-      },
-
-      tableKey: 0,
-      list: null,
-      total: 0,
-      listLoading: true,
-      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
-      cellStyle: { padding: 0 + 'px' },
-
-      dialogFormVisibleCard: false,
-      listLoadingSee: true,
-      rowSeeData: {},
-      listSee: [],
-      totalSee: 0,
-      getdataListParmSee: {
-        name: 'geteqclassSumDay',
-        page: 1,
-        offset: 1,
-        pagecount: 10,
-        returntype: 'Map',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename'),
-          deptName: '',
-          typeName: '',
-          assetCode: '',
-          eqName: '',
-          startTime: '',
-          stopTime: '',
-          pastureId: Cookies.get('pastureid')
-        }
-      },
-      buttons: [],
-      isBarChart1: []
-
-    }
-  },
-
-  watch: {
-    'yearDate': {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        var time = this.yearDate
-        console.log(newVal.getFullYear())
-        this.year = time.getFullYear()
-        this.getBarChart1Parm.parammaps.receiveTime = time.getFullYear()
-        this.getLineChart1Parm.parammaps.receiveTime = time.getFullYear()
-        this.getLineChart2Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-        this.getPieChart1Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-        this.getBarChart2Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-
-        this.getBarChart1()
-        this.getLineChart1()
-        this.getLineChart2()
-        this.getPieChart1()
-      }
-    },
-    'radio': {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        console.log(newVal, oldVal)
-        if(newVal == '集团'){
-          this.getBarChart1Parm.parammaps.center = ''
-        } else {
-          this.getBarChart1Parm.parammaps.center = newVal
-        }
-        this.getBarChart1()
-        // this.getLineChart1()
-        // this.getLineChart2()
-        // this.getPieChart1()
-      }
-    },
-  },
-
-  created() {
-    this.getBarChart1()
-    this.getLineChart1()
-    this.getLineChart2()
-    this.getPieChart1()
-    const that = this
-    GetDataByName({ 'name': 'getUserPCButtons', 'parammaps': { 'jwt_username': Cookies.get('name') }}).then(response => {
-      that.buttons = response.data.list
-      that.get_auto_buttons()
-    })
-  },
-  mounted() {
-    // this.roadBarChart1(this.chart_data1)
-    // this.roadlineChart1(this.chart_data2, this.pasture, this.year)
-    // this.roadlineChart2(this.chart_data3, this.pasture, this.month)
-    //  this.roadpieChart1(this.chart_data4, this.month)
-    // this.roadBarChart2(this.chart_data5, this.deptment)
-  },
-  methods: {
-    get_auto_buttons() {
-      // 图1
-      const BarChart1 = 'report:queryElec:pastures'
-      const isBarChart1 = checkButtons(this.$store.state.user.buttons, BarChart1)
-      this.isBarChart1 = isBarChart1
-    },
-    // 各牧场年度维修成本对比
-    getBarChart1() {
-      GetReportform(this.getBarChart1Parm).then(response => {
-        console.log('图1', response)
-        this.chart_data1 = response.data.chart_data
-        this.roadBarChart1(this.chart_data1)
-        var nowYear = response.data.chart_data.nowYear
-        var total = 0
-        if (nowYear !== null || nowYear !== undefined) {
-          nowYear.forEach(function(item, index) {
-            console.log(parseFloat(item))
-            total = total + parseFloat(item)
-          })
-        }
-        this.total = total.toFixed(4)
-      })
-    },
-    getLineChart1() {
-      GetReportform(this.getLineChart1Parm).then(response => {
-        console.log('图2', response)
-        this.chart_data2 = response.data.chart_data
-        this.roadlineChart1(this.chart_data2, this.pasture, this.year)
-      })
-    },
-    getLineChart2() {
-      GetReportform(this.getLineChart2Parm).then(response => {
-        console.log('图3', response)
-        this.chart_data3 = response.data.chart_data
-        this.roadlineChart2(this.chart_data3, this.pasture, this.month)
-      })
-    },
-    getPieChart1() {
-      GetDataByName(this.getPieChart1Parm).then(response => {
-        console.log('图4', response)
-        if (response.data === null || response.data.list === null) {
-          this.chart_data4 = { name: [], psum: [] }
-          this.roadpieChart1(this.chart_data4, this.month)
-        } else {
-          this.chart_data4.psum = response.data.list
-          var name = []
-          console.log(response.data.list)
-          response.data.list.forEach(function(i) {
-            name.push(i.name)
-          })
-          console.log(this.chart_data4)
-          this.chart_data4.name = name
-          this.roadpieChart1(this.chart_data4, this.month)
-          this.deptment = name[0]
-          this.getdataListParmSee.parammaps.deptName = name[0]
-          this.getBarChart2Parm.parammaps.deptName = name[0]
-          this.getBarChart2()
-        }
-      })
-    },
-    getBarChart2() {
-      GetReportform(this.getBarChart2Parm).then(response => {
-        console.log('图5', response)
-        this.chart_data5 = response.data.chart_data
-        this.roadBarChart2(this.chart_data5, this.deptment)
-      })
-    },
-
-    // 各牧场年度维修成本对比
-    roadBarChart1(chart_data1) {
-      if (this.barChart1 != null) {
-        this.barChart1.dispose()
-      }
-      this.barChart1 = echarts.init(document.getElementById('barChart1'))
-      var option = {
-        title: { text: '各牧场年度用电量对比', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['今年用量', '去年同期'],
-          right: 40
-        },
-        color: ['#2dc0e8', '#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '4%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data1.pasture, axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '电量(千瓦)', axisLabel: { formatter: '{value}万' }}],
-        series: [
-          {
-            name: '今年用量',
-            type: 'bar',
-            data: chart_data1.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '去年同期',
-            type: 'bar',
-            data: chart_data1.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.barChart1.setOption(option)
-      window.onresize = function() {
-        this.barChart1.resize()
-      }
-      var that = this
-      this.barChart1.on('click', function(param, i) {
-        console.log(param)
-        that.pasture = param.name
-        that.getLineChart1Parm.parammaps.pastureName = param.name
-        that.getLineChart2Parm.parammaps.pastureName = param.name
-        that.getPieChart1Parm.parammaps.pastureName = param.name
-        that.getBarChart2Parm.parammaps.pastureName = param.name
-
-        that.getLineChart1()
-        that.getLineChart2()
-        that.getPieChart1()
-      })
-    },
-    // 每月维修成本对比
-    roadlineChart1(chart_data2, pasture, year) {
-      if (this.lineChart1 != null) {
-        this.lineChart1.dispose()
-      }
-      this.lineChart1 = echarts.init(document.getElementById('lineChart1'))
-      var option = {
-        title: { text: pasture + year + '每月用电量对比', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['今年用量', '去年同期用量'],
-          x: 'right'
-        },
-        color: [ '#769cfc', '#FFB800', '#6bda00'],
-        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data2.months, name: '月份', axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '电量(千瓦)', axisLabel: { formatter: '{value}万' }}],
-        series: [
-          {
-            name: '今年用量',
-            type: 'line',
-            data: chart_data2.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '去年同期用量',
-            type: 'line',
-            data: chart_data2.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '预算',
-            type: 'line',
-            data: chart_data2.budget,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.lineChart1.setOption(option)
-      window.onresize = function() {
-        this.lineChart1.resize()
-      }
-      var that = this
-      this.lineChart1.on('click', function(param, i) {
-        console.log(param)
-
-        that.getLineChart2Parm.parammaps.receiveTime = param.name
-        that.getPieChart1Parm.parammaps.receiveTime = param.name
-        that.getBarChart2Parm.parammaps.receiveTime = param.name
-
-        var num = param.name.substring(5)
-        console.log(num)
-        that.month = num
-        that.getLineChart2()
-        that.getPieChart1()
-      })
-    },
-
-    // 每月维修成本对比
-    roadlineChart2(chart_data3, pasture, month) {
-      if (this.lineChart2 != null) {
-        this.lineChart2.dispose()
-      }
-      this.lineChart2 = echarts.init(document.getElementById('lineChart2'))
-      var option = {
-        title: { text: pasture + month + '月每日用电量对比', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['今年日用量', '去年同期'],
-          x: 'right'
-        },
-        color: [ '#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data3.day, name: '日期', axisLabel: { interval: 0 }}],
-        yAxis: [{ type: 'value', name: '电量(千瓦)', axisLabel: { formatter: '{value}' }}],
-        series: [
-          {
-            name: '今年日用量',
-            type: 'line',
-            data: chart_data3.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '去年同期',
-            type: 'line',
-            data: chart_data3.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.lineChart2.setOption(option)
-      window.onresize = function() {
-        this.lineChart2.resize()
-      }
-      this.lineChart2.on('click', function(param, i) {
-        console.log(param)
-      })
-    },
-    // 部门统计
-    roadpieChart1(chart_data4, month) {
-      if (this.pieChart1 != null) {
-        this.pieChart1.dispose()
-      }
-      this.pieChart1 = echarts.init(document.getElementById('pieChart1'))
-      var option = {
-        title: { text: month + '月部门统计', textStyle: { color: '#769cfc' }},
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          data: chart_data4.name, top: 40, x: 'right'
-        },
-        color: ['#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
-        series: [
-          {
-            name: '',
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '60%'],
-            data: chart_data4.psum,
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-
-        ]
-      }
-      this.pieChart1.setOption(option)
-      window.onresize = function() {
-        this.pieChart1.resize()
-      }
-      var that = this
-      this.pieChart1.on('click', function(param, i) {
-        console.log(param)
-        that.deptment = param.name
-        that.getBarChart2Parm.parammaps.deptName = param.name
-        that.getBarChart2()
-      })
-    },
-    // 维修成本
-    roadBarChart2(chart_data5, deptment) {
-      if (this.barChart2 != null) {
-        this.barChart2.dispose()
-      }
-      this.barChart2 = echarts.init(document.getElementById('barChart2'))
-      var option = {
-        title: { text: deptment + '用电量', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['用电量'],
-          x: 'right'
-        },
-        color: [ '#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data5.typeName, name: '电表名称', axisLabel: { interval: 0 }}],
-        yAxis: [{ type: 'value', name: '电量(千瓦)', axisLabel: { formatter: '{value}万' }}],
-        series: [
-          {
-            name: '用电量',
-            type: 'bar',
-            barWidth: 14,
-            data: chart_data5.eqCost,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.barChart2.setOption(option)
-      window.onresize = function() {
-        this.barChart2.resize()
-      }
-    }
-
-  }
-}
-</script>
-<style>
-.el-row {
-    margin-bottom: 40px;
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-</style>
-
-<style lang="scss" scoped>
-
-.dashboard-editor-container {
-  padding: 20px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .github-corner {
-    position: absolute;
-    top: 0px;
-    border: 0;
-    right: 0;
-  }
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-  }
-}
-
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
-  }
-}
-</style>

src/views/report/queryRepair/components/BarChartDept.vue

@@ -1,128 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-// import { parseTime } from '@/utils/index.js'
-// import { emit } from 'cluster'
-// eslint-disable-next-line no-unused-vars
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    barCharDeptData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null,
-      sourceDate: []
-    }
-  },
-  watch: {
-    barCharDeptData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-        console.log(val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.barCharDeptData)
-      // console.log('this.barCharDeptData', this.barCharDeptData)
-    },
-    setOptions({ xAxisData, seriesData, text } = {}) {
-      this.chart.setOption({
-        title: {
-          text: text + '维修成本柱状图',
-          subtext: ''
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        grid: {
-          left: '3%',
-          right: '15%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: [
-          {
-            name: '水表名称',
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-            // data: xAxisData,
-            axisTick: {
-              alignWithLabel: true
-            },
-            axisLabel: { interval: 0, rotate: 40 }
-          }
-        ],
-        yAxis: [
-          {
-            name: '吨',
-            type: 'value'
-          }
-        ],
-        series: [
-          {
-            type: 'bar',
-            barWidth: '60%',
-            data: [10, 52, 200, 334, 390, 330, 220]
-            // data: seriesData
-          }
-        ]
-      })
-      const that = this
-      // 点击柱状图拿到对应内容
-      this.chart.on('click', function(params) {
-        console.log(params)
-        // console.log(parseTime(new Date(), '{y}') + '-' + params.name.substring(0, 2))
-        // that.$emit('barClickDept', parseTime(new Date(), '{y}') + '-' + params.name.substring(0, 2))
-        that.$emit('barClickDept', params.name)
-      })
-    }
-  }
-}
-</script>

src/views/report/queryRepair/components/BarChartPasture.vue

@@ -1,114 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-import { parseTime } from '@/utils/index.js'
-// import { emit } from 'cluster'
-// eslint-disable-next-line no-unused-vars
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    barPastureData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null,
-      sourceDate: []
-    }
-  },
-  watch: {
-    barPastureData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-        console.log(val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.barPastureData)
-    },
-    setOptions({ sourceDate, text } = {}) {
-      this.chart.setOption({
-        title: {
-          text: '最近12个月维修同期对比',
-          subtext: ''
-        },
-        legend: { x: 'right' },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        dataset: {
-          source: sourceDate
-          // source: [
-          //   ['product', '去年同期', '预算', '实际']
-          //   // ['10月', 433, 85.8, 93.7],
-          //   // ['9月', 83.1, 73.4, 55.1],
-          //   // ['8月', 86.4, 65.2, 82.5],
-          //   // ['7月', 72.4, 53.9, 39.1]
-          // ]
-        },
-        xAxis: { type: 'category', name: '最近12个月', formatter: '' },
-        yAxis: { name: '元' },
-        grid: [
-          { left: '15%', right: '17%' }
-        ],
-        series: [
-          { type: 'bar' },
-          { type: 'bar' },
-          { type: 'bar' }
-        ]
-      })
-      const that = this
-      // 点击柱状图拿到对应内容
-      this.chart.on('click', function(params) {
-        // console.log(parseTime(new Date(), '{y}') + '-' + params.name.substring(0, 2))
-        that.$emit('chartClick', parseTime(new Date(), '{y}') + '-' + params.name.substring(0, 2))
-      })
-    }
-  }
-}
-</script>

src/views/report/queryRepair/components/BarChartPastureMonth.vue

@@ -1,80 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-// eslint-disable-next-line no-unused-vars
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '475px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.chart.setOption({
-        legend: {},
-        tooltip: {},
-        dataset: {
-          source: [
-            ['product', '2015', '2016', '2017'],
-            ['10月', 43.3, 85.8, 93.7],
-            ['9月', 83.1, 73.4, 55.1],
-            ['8月', 86.4, 65.2, 82.5],
-            ['7月', 72.4, 53.9, 39.1]
-          ]
-        },
-        xAxis: [
-          { type: 'category', gridIndex: 0, name: '最近12个月' }
-        ],
-        yAxis: [
-          { gridIndex: 0, name: '总费用' }
-        ],
-        grid: [
-          { bottom: '58%' },
-          { top: '58%' }
-        ],
-        series: [
-          { type: 'bar' },
-          { type: 'bar' },
-          { type: 'bar' }
-        ]
-      })
-    }
-  }
-}
-</script>

src/views/report/queryRepair/components/Contrast.vue

@@ -1,165 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-import { debounce } from '@/utils'
-
-// eslint-disable-next-line no-unused-vars
-const animationDuration = 6000
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    contrastData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    contrastData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-        console.log('watch拿到的val', val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.contrastData)
-      // console.log('methods拿到的pieDeptData', this.pieDeptData)
-    },
-    setOptions({ lastData, thisData, text, thisMinData, days } = {}) {
-      this.chart.setOption({
-        title: {
-          text: text + '月维修同期对比',
-          subtext: ''
-        },
-        tooltip: {
-          trigger: 'axis'
-        },
-        legend: {
-          data: ['去年', '今年']
-        },
-        toolbox: {
-          show: true,
-          feature: {
-            dataZoom: {
-              yAxisIndex: 'none'
-            },
-            dataView: { readOnly: false },
-            magicType: { type: ['line', 'bar'] },
-            restore: {},
-            saveAsImage: {}
-          }
-        },
-        xAxis: {
-          type: 'category',
-          name: '日期',
-          boundaryGap: false,
-          data: days
-        },
-        yAxis: {
-          type: 'value',
-          name: '元',
-          axisLabel: {
-            formatter: '{value}'
-          }
-        },
-        grid: [
-          { top: '25%', left: '15%' }
-        ],
-        series: [
-          {
-            name: '去年',
-            type: 'line',
-            // data: [11, 11, 15, 13, 12, 13, 10, 9, 11, 3],
-            data: lastData,
-            markPoint: {
-              data: [
-                // { type: 'max', name: '最大值' },
-                // { type: 'min', name: '最小值' }
-              ]
-            },
-            markLine: {
-              data: [
-                { type: 'average', name: '平均值' }
-              ]
-            }
-          },
-          {
-            name: '今年',
-            type: 'line',
-            // data: [1, 5, 2, 5, 3, 2, 0, 9, 6, 7],
-            data: thisData,
-            markPoint: {
-              data: [
-                // { name: '周最低', value: 5, xAxis: 1, yAxis: 2 }
-                // { type: 'max', name: '最大值' },
-                // { type: 'min', name: '最小值' }
-              ]
-            },
-            markLine: {
-              data: [
-                { type: 'average', name: '平均值' },
-                [{
-                  symbol: 'none',
-                  x: '90%',
-                  yAxis: 'max'
-                }, {
-                  symbol: 'circle',
-                  label: {
-                    normal: {
-                      position: 'start',
-                      formatter: '最大值'
-                    }
-                  },
-                  type: 'max',
-                  name: '最高点'
-                }]
-              ]
-            }
-          }
-        ]
-      })
-    }
-  }
-}
-</script>

src/views/report/queryRepair/components/PieChartDepartment.vue

@@ -1,120 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-import { debounce } from '@/utils'
-
-// eslint-disable-next-line no-unused-vars
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    pieDeptData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    pieDeptData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-        console.log('watch拿到的val', val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.pieDeptData)
-      // console.log('methods拿到的pieDeptData', this.pieDeptData)
-    },
-    setOptions({ DeptData, text } = {}) {
-      // console.log('setOptions拿到的DeptData', DeptData)
-      this.chart.setOption({
-        title: {
-          text: text + '月部门统计',
-          subtext: '',
-          x: 'center'
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          orient: 'vertical',
-          left: 'left',
-          data: ['', '', '', '', '']
-        },
-        series: [
-          {
-            name: text + '月',
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '60%'],
-            data: DeptData,
-            // data: [
-            //   { value: 335, name: '直接访问' },
-            //   { value: 310, name: '邮件营销' },
-            //   { value: 234, name: '联盟广告' },
-            //   { value: 135, name: '视频广告' },
-            //   { value: 1548, name: '搜索引擎' }
-            // ],
-            itemStyle: {
-              emphasis: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
-      })
-      const that = this
-      // 点击饼图拿到对应内容
-      this.chart.on('click', function(params) {
-        // console.log(params)
-        that.$emit('chartClickDept', params.name)
-      })
-    }
-  }
-}
-</script>

src/views/report/queryRepair/components/PieChartType.vue

@@ -1,116 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    pieTypeData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    pieTypeData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-        console.log('watch拿到的val', val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.pieTypeData)
-      // console.log('methods拿到的pieTypeData', this.pieTypeData)
-    },
-    setOptions({ TypeData, text } = {}) {
-      // console.log('setOptions拿到的TypeData', TypeData)
-      this.chart.setOption({
-        title: {
-          text: text + '月类型统计',
-          subtext: '',
-          x: 'center'
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          orient: 'vertical',
-          left: 'left',
-          data: ['', '', '', '', '']
-        },
-        series: [
-          {
-            name: text + '月',
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '60%'],
-            data: TypeData,
-            // data: [
-            //   { value: 335, name: '直接访问' },
-            //   { value: 310, name: '邮件营销' },
-            //   { value: 234, name: '联盟广告' },
-            //   { value: 135, name: '视频广告' },
-            //   { value: 1548, name: '搜索引擎' }
-            // ],
-            itemStyle: {
-              emphasis: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
-      })
-      const that = this
-      // 点击饼图拿到对应内容
-      this.chart.on('click', function(params) {
-        console.log(params)
-        that.$emit('chartClickType', params.name)
-      })
-    }
-  }
-}
-</script>

src/views/report/queryRepair/components/TodoList/Todo.vue

@@ -1,81 +0,0 @@
-<template>
-  <li :class="{ completed: todo.done, editing: editing }" class="todo">
-    <div class="view">
-      <input
-        :checked="todo.done"
-        class="toggle"
-        type="checkbox"
-        @change="toggleTodo( todo)"
-      >
-      <label @dblclick="editing = true" v-text="todo.text" />
-      <button class="destroy" @click="deleteTodo( todo )" />
-    </div>
-    <input
-      v-show="editing"
-      v-focus="editing"
-      :value="todo.text"
-      class="edit"
-      @keyup.enter="doneEdit"
-      @keyup.esc="cancelEdit"
-      @blur="doneEdit"
-    >
-  </li>
-</template>
-
-<script>
-export default {
-  name: 'Todo',
-  directives: {
-    focus(el, { value }, { context }) {
-      if (value) {
-        context.$nextTick(() => {
-          el.focus()
-        })
-      }
-    }
-  },
-  props: {
-    todo: {
-      type: Object,
-      default: function() {
-        return {}
-      }
-    }
-  },
-  data() {
-    return {
-      editing: false
-    }
-  },
-  methods: {
-    deleteTodo(todo) {
-      this.$emit('deleteTodo', todo)
-    },
-    editTodo({ todo, value }) {
-      this.$emit('editTodo', { todo, value })
-    },
-    toggleTodo(todo) {
-      this.$emit('toggleTodo', todo)
-    },
-    doneEdit(e) {
-      const value = e.target.value.trim()
-      const { todo } = this
-      if (!value) {
-        this.deleteTodo({
-          todo
-        })
-      } else if (this.editing) {
-        this.editTodo({
-          todo,
-          value
-        })
-        this.editing = false
-      }
-    },
-    cancelEdit(e) {
-      e.target.value = this.todo.text
-      this.editing = false
-    }
-  }
-}
-</script>

src/views/report/queryRepair/components/TodoList/index.scss

@@ -1,320 +0,0 @@
-.todoapp {
-  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  line-height: 1.4em;
-  color: #4d4d4d;
-  min-width: 230px;
-  max-width: 550px;
-  margin: 0 auto ;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 300;
-  background: #fff;
-  z-index: 1;
-  position: relative;
-  button {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: none;
-    font-size: 100%;
-    vertical-align: baseline;
-    font-family: inherit;
-    font-weight: inherit;
-    color: inherit;
-    -webkit-appearance: none;
-    appearance: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  :focus {
-    outline: 0;
-  }
-  .hidden {
-    display: none;
-  }
-  .todoapp {
-    background: #fff;
-    margin: 130px 0 40px 0;
-    position: relative;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
-  }
-  .todoapp input::-webkit-input-placeholder {
-    font-style: italic;
-    font-weight: 300;
-    color: #e6e6e6;
-  }
-  .todoapp input::-moz-placeholder {
-    font-style: italic;
-    font-weight: 300;
-    color: #e6e6e6;
-  }
-  .todoapp input::input-placeholder {
-    font-style: italic;
-    font-weight: 300;
-    color: #e6e6e6;
-  }
-  .todoapp h1 {
-    position: absolute;
-    top: -155px;
-    width: 100%;
-    font-size: 100px;
-    font-weight: 100;
-    text-align: center;
-    color: rgba(175, 47, 47, 0.15);
-    -webkit-text-rendering: optimizeLegibility;
-    -moz-text-rendering: optimizeLegibility;
-    text-rendering: optimizeLegibility;
-  }
-  .new-todo,
-  .edit {
-    position: relative;
-    margin: 0;
-    width: 100%;
-    font-size: 18px;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: 1.4em;
-    border: 0;
-    color: inherit;
-    padding: 6px;
-    border: 1px solid #999;
-    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  .new-todo {
-    padding: 10px 16px 16px 60px;
-    border: none;
-    background: rgba(0, 0, 0, 0.003);
-    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
-  }
-  .main {
-    position: relative;
-    z-index: 2;
-    border-top: 1px solid #e6e6e6;
-  }
-  .toggle-all {
-    text-align: center;
-    border: none;
-    /* Mobile Safari */
-    opacity: 0;
-    position: absolute;
-  }
-  .toggle-all+label {
-    width: 60px;
-    height: 34px;
-    font-size: 0;
-    position: absolute;
-    top: -52px;
-    left: -13px;
-    -webkit-transform: rotate(90deg);
-    transform: rotate(90deg);
-  }
-  .toggle-all+label:before {
-    content: '❯';
-    font-size: 22px;
-    color: #e6e6e6;
-    padding: 10px 27px 10px 27px;
-  }
-  .toggle-all:checked+label:before {
-    color: #737373;
-  }
-  .todo-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  .todo-list li {
-    position: relative;
-    font-size: 24px;
-    border-bottom: 1px solid #ededed;
-  }
-  .todo-list li:last-child {
-    border-bottom: none;
-  }
-  .todo-list li.editing {
-    border-bottom: none;
-    padding: 0;
-  }
-  .todo-list li.editing .edit {
-    display: block;
-    width: 506px;
-    padding: 12px 16px;
-    margin: 0 0 0 43px;
-  }
-  .todo-list li.editing .view {
-    display: none;
-  }
-  .todo-list li .toggle {
-    text-align: center;
-    width: 40px;
-    /* auto, since non-WebKit browsers doesn't support input styling */
-    height: auto;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
-    border: none;
-    /* Mobile Safari */
-    -webkit-appearance: none;
-    appearance: none;
-  }
-  .todo-list li .toggle {
-    opacity: 0;
-  }
-  .todo-list li .toggle+label {
-    /*
-    Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
-    IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
-  */
-    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
-    background-repeat: no-repeat;
-    background-position: center left;
-    background-size: 36px;
-  }
-  .todo-list li .toggle:checked+label {
-    background-size: 36px;
-    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
-  }
-  .todo-list li label {
-    word-break: break-all;
-    padding: 15px 15px 15px 50px;
-    display: block;
-    line-height: 1.0;
-        font-size: 14px;
-    transition: color 0.4s;
-  }
-  .todo-list li.completed label {
-    color: #d9d9d9;
-    text-decoration: line-through;
-  }
-  .todo-list li .destroy {
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 10px;
-    bottom: 0;
-    width: 40px;
-    height: 40px;
-    margin: auto 0;
-    font-size: 30px;
-    color: #cc9a9a;
-    transition: color 0.2s ease-out;
-    cursor: pointer;
-  }
-  .todo-list li .destroy:hover {
-    color: #af5b5e;
-  }
-  .todo-list li .destroy:after {
-    content: '×';
-  }
-  .todo-list li:hover .destroy {
-    display: block;
-  }
-  .todo-list li .edit {
-    display: none;
-  }
-  .todo-list li.editing:last-child {
-    margin-bottom: -1px;
-  }
-  .footer {
-    color: #777;
-    position: relative;
-    padding: 10px 15px;
-    height: 40px;
-    text-align: center;
-    border-top: 1px solid #e6e6e6;
-  }
-  .footer:before {
-    content: '';
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: 40px;
-    overflow: hidden;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
-  }
-  .todo-count {
-    float: left;
-    text-align: left;
-  }
-  .todo-count strong {
-    font-weight: 300;
-  }
-  .filters {
-    margin: 0;
-    padding: 0;
-    position: relative;
-    z-index: 1;
-    list-style: none;
-  }
-  .filters li {
-    display: inline;
-  }
-  .filters li a {
-    color: inherit;
-    font-size: 12px;
-    padding: 3px 7px;
-    text-decoration: none;
-    border: 1px solid transparent;
-    border-radius: 3px;
-  }
-  .filters li a:hover {
-    border-color: rgba(175, 47, 47, 0.1);
-  }
-  .filters li a.selected {
-    border-color: rgba(175, 47, 47, 0.2);
-  }
-  .clear-completed,
-  html .clear-completed:active {
-    float: right;
-    position: relative;
-    line-height: 20px;
-    text-decoration: none;
-    cursor: pointer;
-  }
-  .clear-completed:hover {
-    text-decoration: underline;
-  }
-  .info {
-    margin: 65px auto 0;
-    color: #bfbfbf;
-    font-size: 10px;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-    text-align: center;
-  }
-  .info p {
-    line-height: 1;
-  }
-  .info a {
-    color: inherit;
-    text-decoration: none;
-    font-weight: 400;
-  }
-  .info a:hover {
-    text-decoration: underline;
-  }
-  /*
-  Hack to remove background from Mobile Safari.
-  Can't use it globally since it destroys checkboxes in Firefox
-*/
-  @media screen and (-webkit-min-device-pixel-ratio:0) {
-    .toggle-all,
-    .todo-list li .toggle {
-      background: none;
-    }
-    .todo-list li .toggle {
-      height: 40px;
-    }
-  }
-  @media (max-width: 430px) {
-    .footer {
-      height: 50px;
-    }
-    .filters {
-      bottom: 10px;
-    }
-  }
-}

src/views/report/queryRepair/components/TodoList/index.vue

@@ -1,127 +0,0 @@
-<template>
-  <section class="todoapp">
-    <!-- header -->
-    <header class="header">
-      <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
-    </header>
-    <!-- main section -->
-    <section v-show="todos.length" class="main">
-      <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
-      <label for="toggle-all" />
-      <ul class="todo-list">
-        <todo
-          v-for="(todo, index) in filteredTodos"
-          :key="index"
-          :todo="todo"
-          @toggleTodo="toggleTodo"
-          @editTodo="editTodo"
-          @deleteTodo="deleteTodo"
-        />
-      </ul>
-    </section>
-    <!-- footer -->
-    <footer v-show="todos.length" class="footer">
-      <span class="todo-count">
-        <strong>{{ remaining }}</strong>
-        {{ remaining | pluralize('item') }} left
-      </span>
-      <ul class="filters">
-        <li v-for="(val, key) in filters" :key="key">
-          <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
-        </li>
-      </ul>
-      <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
-        Clear completed
-      </button> -->
-    </footer>
-  </section>
-</template>
-
-<script>
-import Todo from './Todo.vue'
-
-const STORAGE_KEY = 'todos'
-const filters = {
-  all: todos => todos,
-  active: todos => todos.filter(todo => !todo.done),
-  completed: todos => todos.filter(todo => todo.done)
-}
-const defalutList = [
-  { text: 'star this repository', done: false },
-  { text: 'fork this repository', done: false },
-  { text: 'follow author', done: false },
-  { text: 'vue-element-admin', done: true },
-  { text: 'vue', done: true },
-  { text: 'element-ui', done: true },
-  { text: 'axios', done: true },
-  { text: 'webpack', done: true }
-]
-export default {
-  components: { Todo },
-  filters: {
-    pluralize: (n, w) => n === 1 ? w : w + 's',
-    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
-  },
-  data() {
-    return {
-      visibility: 'all',
-      filters,
-      // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
-      todos: defalutList
-    }
-  },
-  computed: {
-    allChecked() {
-      return this.todos.every(todo => todo.done)
-    },
-    filteredTodos() {
-      return filters[this.visibility](this.todos)
-    },
-    remaining() {
-      return this.todos.filter(todo => !todo.done).length
-    }
-  },
-  methods: {
-    setLocalStorage() {
-      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
-    },
-    addTodo(e) {
-      const text = e.target.value
-      if (text.trim()) {
-        this.todos.push({
-          text,
-          done: false
-        })
-        this.setLocalStorage()
-      }
-      e.target.value = ''
-    },
-    toggleTodo(val) {
-      val.done = !val.done
-      this.setLocalStorage()
-    },
-    deleteTodo(todo) {
-      this.todos.splice(this.todos.indexOf(todo), 1)
-      this.setLocalStorage()
-    },
-    editTodo({ todo, value }) {
-      todo.text = value
-      this.setLocalStorage()
-    },
-    clearCompleted() {
-      this.todos = this.todos.filter(todo => !todo.done)
-      this.setLocalStorage()
-    },
-    toggleAll({ done }) {
-      this.todos.forEach(todo => {
-        todo.done = done
-        this.setLocalStorage()
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-  @import './index.scss';
-</style>

src/views/report/queryRepair/components/mixins/resize.js

@@ -1,56 +0,0 @@
-import { debounce } from '@/utils'
-
-export default {
-  data() {
-    return {
-      $_sidebarElm: null
-    }
-  },
-  mounted() {
-    this.$_initResizeEvent()
-    this.$_initSidebarResizeEvent()
-  },
-  beforeDestroy() {
-    this.$_destroyResizeEvent()
-    this.$_destroySidebarResizeEvent()
-  },
-  // to fixed bug when cached by keep-alive
-  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
-  activated() {
-    this.$_initResizeEvent()
-    this.$_initSidebarResizeEvent()
-  },
-  deactivated() {
-    this.$_destroyResizeEvent()
-    this.$_destroySidebarResizeEvent()
-  },
-  methods: {
-    // use $_ for mixins properties
-    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
-    $_resizeHandler() {
-      return debounce(() => {
-        if (this.chart) {
-          this.chart.resize()
-        }
-      }, 100)()
-    },
-    $_initResizeEvent() {
-      window.addEventListener('resize', this.$_resizeHandler)
-    },
-    $_destroyResizeEvent() {
-      window.removeEventListener('resize', this.$_resizeHandler)
-    },
-    $_sidebarResizeHandler(e) {
-      if (e.propertyName === 'width') {
-        this.$_resizeHandler()
-      }
-    },
-    $_initSidebarResizeEvent() {
-      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
-    },
-    $_destroySidebarResizeEvent() {
-      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
-    }
-  }
-}

src/views/report/queryRepair/index11.vue

@@ -1,833 +0,0 @@
-<template>
-  <div class="app-container">
-    <div v-if="isPercentage" class="percentage" style="width: 210px;height: 90px;background: #fff;position: fixed;bottom: 0;left: 0;z-index: 9999999999999;">
-      <h4 style="padding-left: 10px;line-height: 0;">导出进度：</h4>
-      <el-progress style="padding-left: 10px;" :text-inside="true" :stroke-width="26" :percentage="percentage" />
-    </div>
-    <div class="filter-container">
-      <div class="block">
-        <el-date-picker v-model="yearDate" :clearable="false" class="filter-item" type="year" placeholder="选择年" />
-        <el-select v-model="cost" style="width: 150px;" placeholder="费用分类" class="filter-item" @change="changeCost">
-          <el-option v-for="item in costList" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
-
-        <el-radio-group v-model="radio"    style="float:right;margin-top:20px">
-          <el-radio  label="集团">集团</el-radio>
-          <el-radio  label="一中心">一中心</el-radio>
-          <el-radio  label="二中心">二中心</el-radio>
-          <el-radio  label="三中心">三中心</el-radio>
-        </el-radio-group>   
-
-      </div>
-    </div>
-    <!-- 年度维修成本 -->
-    <el-row v-if="isBarChart1" style="position: relative;">
-      <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">
-        {{ year }}年集团{{ costTypeName }}：{{ totaltitle }}万元
-      </p>
-      <el-col :span="24">
-        <div id="barChart1" style="width: 100%;height:400px;" />
-      </el-col>
-    </el-row>
-
-    <!-- 年度维修成本 -->
-    <el-row>
-      <el-col :span="12">
-        <div id="lineChart1" style="width: 100%;height:400px;" />
-      </el-col>
-      <el-col :span="12">
-        <div id="lineChart2" style="width: 100%;height:400px;" />
-      </el-col>
-    </el-row>
-
-    <el-row>
-      <el-col :span="12">
-        <div id="pieChart1" style="width: 100%;height:400px;" />
-      </el-col>
-      <el-col :span="12">
-        <div id="barChart2" style="width: 100%;height:400px;" />
-      </el-col>
-    </el-row>
-
-    <!-- 弹窗 -->
-    <el-dialog title="详情" :visible.sync="dialogFormVisibleCard" width="90%" :close-on-click-modal="false">
-      <div class="app-contentcard">
-        <el-form ref="rowSeeData" :model="rowSeeData" label-position="right" label-width="120px" style="width: 100%;margin:0 auto;">
-          <div class="filter-container">
-            <el-input v-model="getdataListParmSee.parammaps.eqName" placeholder="设备内部编号" clearable class="filter-item" style="width: 130px" />
-            <el-input v-model="getdataListParmSee.parammaps.assetCode" placeholder="资产编号" clearable class="filter-item" style="width: 130px" />
-            <el-date-picker ref="inputDatetime" v-model="getdataListParmSee.parammaps.inputDatetime" class="inputDatetime" type="datetimerange" style="width: 250px;top:-3px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="领用开始日期" end-placeholder="领用结束日期" />
-
-            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="form_searchDelivery">搜索</el-button>
-            <el-button class="filter-item" style="margin-left: 10px;" type="success" icon="el-icon-edit" @click="handleDownloadDelivery">导出</el-button>
-          </div>
-        </el-form>
-        <el-table
-          :key="tableKey"
-          v-loading="listLoadingSee"
-          element-loading-text="给我一点时间"
-          :data="listSee"
-          border
-          fit
-          highlight-current-row
-          style="width: 100%;"
-          :row-style="rowStyle"
-          :cell-style="cellStyle"
-          class="elTable"
-        >
-          <el-table-column label="序号" align="center" type="index" width="50px">
-            <template slot-scope="scope">
-              <span>{{ scope.$index + (pageNumSee-1) * pageSizeSee + 1 }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="资产编号" min-width="110px" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.assetCode }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="设备名称" min-width="110px" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.eqName }}</span>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="设备内部编号" min-width="110px" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.eqCode }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="设备规格" min-width="110px" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.eqSpecification }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="领用日期" min-width="110px" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.receiveTime }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="领用部门" min-width="110px" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.deptName }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="备件编号" min-width="110px" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.partCode }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="备件名称" min-width="110px" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.partName }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="备件规格" min-width="110px" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.specification }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="备件品牌" min-width="110px" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.brandName }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="计量单位" min-width="110px" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.unit }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="出库数量" min-width="110px" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.checkoutNumber }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="退库数量" min-width="110px" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.quitNumber }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="单价" min-width="110px" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.price }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="总价" min-width="110px" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.sumPrice }}</span>
-            </template>
-          </el-table-column>
-
-        </el-table>
-        <pagination
-          v-show="totalSee>=0"
-          :total="totalSee"
-          :page.sync="getdataListParmSee.offset"
-          :limit.sync="getdataListParmSee.pagecount"
-          @pagination="get_table_dataSee"
-        />
-        <div slot="footer" class="dialog-footer" style="right:30px;position:absolute;bottom:10px">
-          <el-button @click="dialogFormVisibleCard = false">关闭</el-button>
-        </div>
-      </div>
-    </el-dialog>
-  </div>
-
-</template>
-
-<script>
-import echarts from 'echarts'
-
-require('echarts/theme/macarons') // echarts theme
-
-// eslint-disable-next-line no-unused-vars
-import waves from '@/directive/waves' // waves directive
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
-import { GetDataByName, GetDataByNames, GetReportform, checkButtons, GetAccount } from '@/api/common'
-import { parseTime } from '@/utils/index.js'
-import { json2excel } from '@/utils/index.js'
-import Cookies from 'js-cookie'
-export default {
-  name: 'QueryRepair',
-  directives: { waves },
-  components: { Pagination },
-  data() {
-    return {
-      yearDate: new Date(),
-
-      radio: "集团",
-
-      cost: '',
-      totaltitle: 0,
-      costTypeName: '所有维修费',
-      costList: [{ id: '', name: '全部费用' }, { id: '挤奶处', name: '直接费用' }, { id: '牧场办公室', name: '管理费用' }, { id: 1, name: '制造费用' }],
-      pasture: Cookies.get('pasturename'),
-      year: new Date().getFullYear(),
-      month: new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1,
-      deptment: '维修处',
-
-      getBarChart1Parm: {
-        name: 'getpSumNow',
-        parammaps: {
-          receiveTime: new Date().getFullYear(),
-          center:'',
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getLineChart1Parm: {
-        name: 'getPastureSumMonth',
-        parammaps: {
-          receiveTime: new Date().getFullYear(),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getLineChart2Parm: {
-        name: 'getPastureSumDay',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getPieChart1Parm: {
-        name: 'getdeptSumMonth',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getBarChart2Parm: {
-        name: 'geteqclassSumMonth',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename'),
-          deptName: ''
-        }
-      },
-      barChart1: null,
-      lineChart1: null,
-      lineChart2: null,
-      pieChart1: null,
-      barChart2: null,
-
-      chart_data1: {
-        // pasture: ['宝鸡', '恒盛', '塞一', '塞二', '塞三', '塞四', '塞五', '通山', '合肥', '和林'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data2: {
-        // months: ['2019-01', '2019-02', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66],
-        // budget: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data3: {
-        // day: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data4: {
-        // name: ['饲养处', '其他部门', '设备处', '能源处', '牧场办公室'],
-        // psum: [
-        //   { value: 335, name: '饲养处' },
-        //   { value: 310, name: '其他部门' },
-        //   { value: 234, name: '设备处' },
-        //   { value: 135, name: '能源处' },
-        //   { value: 1548, name: '牧场办公室' }
-        // ]
-      },
-      chart_data5: {
-        // typeName: ['小型装载机', '叉车', '拖拉机', '抛料机', '搅拌机'],
-        // eqCost: [123, 332, 222, 333, 444],
-        // lastYear: [22, 342, 234, 234, 66]
-      },
-
-      tableKey: 0,
-      list: null,
-      total: 0,
-      listLoading: true,
-      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
-      cellStyle: { padding: 0 + 'px' },
-
-      dialogFormVisibleCard: false,
-      listLoadingSee: true,
-      rowSeeData: {},
-      listSee: [],
-      totalSee: 0,
-      getdataListParmSee: {
-        name: 'geteqclassSumDay',
-        page: 1,
-        offset: 1,
-        pagecount: 10,
-        returntype: 'Map',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          deptName: '',
-          typeName: '',
-          assetCode: '',
-          eqName: '',
-          startTime: '',
-          stopTime: '',
-          pastureId: Cookies.get('pastureid'),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      buttons: [],
-      isBarChart1: [],
-      downLoadParm: {},
-      downLoadList: [],
-      isPercentage: false,
-      percentage: 1
-
-    }
-  },
-
-  watch: {
-    'yearDate': {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        var time = this.yearDate
-        console.log(newVal.getFullYear())
-        this.year = time.getFullYear()
-        this.getBarChart1Parm.parammaps.receiveTime = time.getFullYear()
-        this.getLineChart1Parm.parammaps.receiveTime = time.getFullYear()
-        this.getLineChart2Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-        this.getPieChart1Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-        this.getBarChart2Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-        this.getBarChart1Parm.parammaps.departmentName = this.cost
-        this.getLineChart1Parm.parammaps.departmentName = this.cost
-        this.getLineChart2Parm.parammaps.departmentName = this.cost
-        this.getBarChart1()
-        this.getLineChart1()
-        this.getLineChart2()
-        this.getPieChart1()
-        this.getBarChart2()
-      }
-    },
-    'radio': {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        console.log(newVal, oldVal)
-        if(newVal == '集团'){
-          this.getBarChart1Parm.parammaps.center = ''
-        } else {
-          this.getBarChart1Parm.parammaps.center = newVal
-        }
-        this.getBarChart1()
-        // this.getLineChart1()
-        // this.getLineChart2()
-        // this.getPieChart1()
-      }
-    },
-  },
-
-  created() {
-    this.getBarChart1()
-    this.getLineChart1()
-    this.getLineChart2()
-    this.getPieChart1()
-    const that = this
-    GetDataByName({ 'name': 'getUserPCButtons', 'parammaps': { 'jwt_username': Cookies.get('name') }}).then(response => {
-      that.buttons = response.data.list
-      that.get_auto_buttons()
-    })
-  },
-  mounted() {
-    // this.roadBarChart1(this.chart_data1)
-    // this.roadlineChart1(this.chart_data2, this.pasture, this.year)
-    // this.roadlineChart2(this.chart_data3, this.pasture, this.month)
-    //  this.roadpieChart1(this.chart_data4, this.month)
-    // this.roadBarChart2(this.chart_data5, this.deptment)
-  },
-  methods: {
-    get_auto_buttons() {
-      // 图1
-      const BarChart1 = 'report:queryRepair:pastures'
-      const isBarChart1 = checkButtons(this.$store.state.user.buttons, BarChart1)
-      this.isBarChart1 = isBarChart1
-    },
-    // 各牧场年度维修成本对比
-    getBarChart1() {
-      GetReportform(this.getBarChart1Parm).then(response => {
-        console.log('图1', response)
-        this.chart_data1 = response.data.chart_data
-        this.roadBarChart1(this.chart_data1)
-        var nowYear = response.data.chart_data.nowYear
-        var totaltitle = 0
-        if (nowYear !== null || nowYear !== undefined) {
-          nowYear.forEach(function(item, index) {
-            // console.log(parseFloat(item))
-            totaltitle = totaltitle + parseFloat(item)
-          })
-        }
-        this.totaltitle = totaltitle.toFixed(4)
-      })
-    },
-    getLineChart1() {
-      GetReportform(this.getLineChart1Parm).then(response => {
-        console.log('图2', response)
-        this.chart_data2 = response.data.chart_data
-        this.roadlineChart1(this.chart_data2, this.pasture, this.year)
-      })
-    },
-    getLineChart2() {
-      GetReportform(this.getLineChart2Parm).then(response => {
-        console.log('图3', response)
-        this.chart_data3 = response.data.chart_data
-        this.roadlineChart2(this.chart_data3, this.pasture, this.year)
-      })
-    },
-    getPieChart1() {
-      GetDataByName(this.getPieChart1Parm).then(response => {
-        console.log('图4', response)
-        if (response.data === null || response.data.list === null) {
-          this.chart_data4 = { name: [], psum: [] }
-          this.roadpieChart1(this.chart_data4, this.month)
-        } else {
-          this.chart_data4.psum = response.data.list
-          var name = []
-          console.log(response.data.list)
-          response.data.list.forEach(function(i) {
-            name.push(i.name)
-          })
-          console.log(this.chart_data4)
-          this.chart_data4.name = name
-          this.roadpieChart1(this.chart_data4, this.month)
-          this.deptment = name[0]
-          this.getBarChart2Parm.parammaps.deptName = name[0]
-          this.getBarChart2Parm.parammaps.deptName = name[0]
-          this.getdataListParmSee.parammaps.deptName = name[0]
-
-          this.getBarChart2()
-        }
-      })
-    },
-    getBarChart2() {
-      GetReportform(this.getBarChart2Parm).then(response => {
-        console.log('图5', response)
-        this.chart_data5 = response.data.chart_data
-        this.roadBarChart2(this.chart_data5, this.deptment)
-      })
-    },
-
-    // 各牧场年度维修成本对比
-    roadBarChart1(chart_data1) {
-      if (this.barChart1 != null) {
-        this.barChart1.dispose()
-      }
-      this.barChart1 = echarts.init(document.getElementById('barChart1'))
-      var option = {
-        title: { text: '各牧场年度维修费用对比', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['今年维修费用', '去年同期维修费用'],
-          right: 40,
-          x: 'right'
-        },
-        color: ['#2dc0e8', '#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '4%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data1.pasture, axisLabel: { interval: 0, rotate: 30 }}],
-
-        yAxis: [{ type: 'value', name: '元', axisLabel: { formatter: '{value}万' }}],
-        series: [
-          {
-            name: '今年维修费用',
-            type: 'bar',
-            data: chart_data1.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '去年同期维修费用',
-            type: 'bar',
-            data: chart_data1.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.barChart1.setOption(option)
-      window.onresize = function() {
-        this.barChart1.resize()
-      }
-      var that = this
-      this.barChart1.on('click', function(param, i) {
-        console.log(param)
-        that.pasture = param.name
-        that.getLineChart1Parm.parammaps.pastureName = param.name
-        that.getLineChart2Parm.parammaps.pastureName = param.name
-        that.getPieChart1Parm.parammaps.pastureName = param.name
-        that.getBarChart2Parm.parammaps.pastureName = param.name
-        that.getdataListParmSee.parammaps.pastureName = param.name
-
-        that.getLineChart1()
-        that.getLineChart2()
-        that.getPieChart1()
-      })
-    },
-    // 每月维修成本对比
-    roadlineChart1(chart_data2, pasture, year) {
-      if (this.lineChart1 != null) {
-        this.lineChart1.dispose()
-      }
-      this.lineChart1 = echarts.init(document.getElementById('lineChart1'))
-      var option = {
-        title: { text: pasture + year + '每月维修费用对比', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['今年维修费用', '去年同期维修费用'],
-          x: 'right'
-        },
-        color: [ '#769cfc', '#FFB800', '#6bda00'],
-        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data2.months, name: '月份', axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '元', axisLabel: { formatter: '{value}万' }}],
-        series: [
-          {
-            name: '今年维修费用',
-            type: 'line',
-            data: chart_data2.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '去年同期维修费用',
-            type: 'line',
-            data: chart_data2.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '预算',
-            type: 'line',
-            data: chart_data2.budget,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.lineChart1.setOption(option)
-      window.onresize = function() {
-        this.lineChart1.resize()
-      }
-      var that = this
-      this.lineChart1.on('click', function(param, i) {
-        console.log(param)
-
-        that.getLineChart2Parm.parammaps.receiveTime = param.name
-        that.getPieChart1Parm.parammaps.receiveTime = param.name
-        that.getBarChart2Parm.parammaps.receiveTime = param.name
-        that.getdataListParmSee.parammaps.receiveTime = param.name
-
-        var num = param.name.substring(5)
-        console.log(num)
-        that.month = num
-        that.getLineChart2()
-        that.getPieChart1()
-      })
-    },
-
-    // 每月维修成本对比
-    roadlineChart2(chart_data3, pasture, year) {
-      if (this.lineChart2 != null) {
-        this.lineChart2.dispose()
-      }
-      this.lineChart2 = echarts.init(document.getElementById('lineChart2'))
-      var option = {
-        title: { text: pasture + year + '年每月单头牛维修费用', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['今年维修费用', '去年同期维修费用'],
-          x: 'right'
-        },
-        color: ['#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data3.months, name: '日期', axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '元', axisLabel: { formatter: '{value}' }}],
-        series: [
-          {
-            name: '今年维修费用',
-            type: 'line',
-            data: chart_data3.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '去年同期维修费用',
-            type: 'line',
-            data: chart_data3.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.lineChart2.setOption(option)
-      window.onresize = function() {
-        this.lineChart2.resize()
-      }
-      this.lineChart2.on('click', function(param, i) {
-        console.log(param)
-      })
-    },
-    // 部门统计
-    roadpieChart1(chart_data4, month) {
-      if (this.pieChart1 != null) {
-        this.pieChart1.dispose()
-      }
-      this.pieChart1 = echarts.init(document.getElementById('pieChart1'))
-      var option = {
-        title: { text: month + '月部门统计', textStyle: { color: '#769cfc' }},
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          data: chart_data4.name, top: 40, x: 'right'
-        },
-        color: ['#42b983', '#769cfc', '#FFB800', '#fb9999', '#ba99fb', '#99fbf2', '#b5ffc5', '#edffb5', '#ff9d6e', '#897cf3'],
-        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
-        series: [
-          {
-            name: '',
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '60%'],
-            // label: { // 饼图图形上的文本标签
-            //   normal: {
-            //     show: true,
-            //     position: 'inner', // 标签的位置
-            //     textStyle: {
-            //       fontWeight: 300,
-            //       fontSize: 16 // 文字的字体大小
-            //     },
-            //     formatter: '{d}%'
-
-            //   }
-            // },
-            data: chart_data4.psum,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.pieChart1.setOption(option)
-      window.onresize = function() {
-        this.pieChart1.resize()
-      }
-      var that = this
-      this.pieChart1.on('click', function(param, i) {
-        console.log(param)
-        that.deptment = param.name
-
-        that.getdataListParmSee.parammaps.deptName = param.name
-        that.getBarChart2Parm.parammaps.deptName = param.name
-        that.getBarChart2()
-      })
-    },
-    // 维修成本
-    roadBarChart2(chart_data5, deptment) {
-      if (this.barChart2 != null) {
-        this.barChart2.dispose()
-      }
-      this.barChart2 = echarts.init(document.getElementById('barChart2'))
-      var option = {
-        title: { text: deptment + '维修费用', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['维修费用'],
-          x: 'right'
-        },
-        color: ['#42b983', '#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '12%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data5.typeName, name: '设备类别', axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '元', axisLabel: { formatter: '{value}' }}],
-        series: [
-          {
-            name: '维修费用',
-            type: 'bar',
-            barWidth: 14,
-            data: chart_data5.eqCost,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.barChart2.setOption(option)
-      window.onresize = function() {
-        this.barChart2.resize()
-      }
-      var that = this
-
-      that.barChart2.on('click', function(param, i) {
-        console.log(param)
-
-        that.getdataListParmSee.parammaps.typeName = param.name
-        that.getdataListParmSee.offset = 1
-        that.get_table_dataSee()
-        that.dialogFormVisibleCard = true
-      })
-    },
-    // 搜索
-    form_searchDelivery() {
-      if (this.getdataListParmSee.parammaps.inputDatetime == null) {
-        this.getdataListParmSee.parammaps.startTime = ''
-        this.getdataListParmSee.parammaps.stopTime = ''
-      }
-      this.getdataListParmSee.offset = 1
-      this.get_table_dataSee()
-    },
-    get_table_dataSee() {
-      if (this.getdataListParmSee.parammaps.inputDatetime !== undefined && this.getdataListParmSee.parammaps.inputDatetime !== null) {
-        this.getdataListParmSee.parammaps.startTime = this.$refs['inputDatetime'].value[0]
-        this.getdataListParmSee.parammaps.stopTime = this.$refs['inputDatetime'].value[1]
-      } else {
-        this.getdataListParmSee.parammaps.startTime = ''
-        this.getdataListParmSee.parammaps.stopTime = ''
-      }
-
-      GetDataByName(this.getdataListParmSee).then(response => {
-        this.listSee = response.data.list
-        console.log('记录列表数据', response.data.list)
-        this.pageNumSee = response.data.pageNum
-        this.pageSizeSee = response.data.pageSize
-        if (response.data.total) {
-          this.totalSee = response.data.total
-        }
-        // Just to simulate the time of the request
-        setTimeout(() => {
-          this.listLoadingSee = false
-        }, 300)
-      })
-    },
-    handleDownloadDelivery() {
-      this.$alert('正在导出中，请勿刷新或离开本页面，若导出时间过长，建议缩小导出数据范围重新导出', {})
-      this.isPercentage = true
-      this.percentage = 1
-      var timer = setInterval(() => {
-        this.percentage += 5
-        if (this.percentage > 95) {
-          this.percentage = 99
-          clearInterval(timer)
-        }
-        this.percentage = this.percentage
-      }, 1000)
-      this.downLoadParm.name = 'geteqclassSumDay'
-      this.downLoadParm.returntype = 'Map'
-      this.downLoadParm.parammaps = this.getdataListParmSee.parammaps
-      GetAccount(this.downLoadParm).then(response => {
-        if (response.data.list !== '') {
-          this.percentage = 99
-          setTimeout(() => {
-            this.isPercentage = false
-          }, 2000)
-        }
-        this.$nextTick(() => {
-          this.downLoadList = response.data.list
-          console.log(this.downLoadList)
-          const ExcelDatas = [
-            {
-              tHeader: ['资产编号', '设备名称', '设备内部编号', '设备规格', '领用日期', '领用部门', '备件编号', '备件名称', '备件规格', '备件品牌', '计量单位', '出库数量', '退库数量', '单价', '总价'],
-              filterVal: ['assetCode', 'eqName', 'eqCode', 'eqSpecification', 'receiveTime', 'deptName', 'partCode', 'partName', 'specification', 'brandName', 'unit', 'checkoutNumber', 'quitNumber', 'price', 'sumPrice'],
-              tableDatas: this.downLoadList,
-              sheetName: '设备维修费用'
-            }
-          ]
-          json2excel(ExcelDatas, '设备维修费用', true, 'xlsx')
-        })
-      })
-    },
-    changeCost(item) {
-      console.log(item)
-      // costList: [{ id: '全部费用', name: '全部费用' }, { id: '挤奶处', name: '直接费用' }, { id: '牧场办公室', name: '管理费用' }, { id: 1, name: '制造费用' }],
-      if (item == '挤奶处') {
-        this.costTypeName = '直接维修费'
-      } else if (item == '牧场办公室') {
-        this.costTypeName = '管理维修费'
-      } else if (item == 1) {
-        this.costTypeName = '制造维修费'
-      } else if (item == '') {
-        this.costTypeName = '所有维修费'
-        this.cost = ''
-      } else {
-        this.costTypeName = '所有维修费'
-      }
-      this.getBarChart1Parm.parammaps.departmentName = this.cost
-      this.getLineChart1Parm.parammaps.departmentName = this.cost
-      this.getLineChart2Parm.parammaps.departmentName = this.cost
-      this.getBarChart1()
-      this.getLineChart1()
-      this.getLineChart2()
-    }
-
-  }
-}
-</script>
-<style>
-.el-row {
-    margin-bottom: 40px;
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-</style>
-
-<style lang="scss" scoped>
-
-.dashboard-editor-container {
-  padding: 20px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .github-corner {
-    position: absolute;
-    top: 0px;
-    border: 0;
-    right: 0;
-  }
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-  }
-}
-
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
-  }
-}
-</style>

src/views/report/queryWater/components/BarChartDept.vue

@@ -1,130 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-// import { parseTime } from '@/utils/index.js'
-// import { emit } from 'cluster'
-// eslint-disable-next-line no-unused-vars
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    barCharDeptData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null,
-      sourceDate: []
-    }
-  },
-  watch: {
-    barCharDeptData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-        console.log(val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.barCharDeptData)
-      // console.log('this.barCharDeptData', this.barCharDeptData)
-    },
-    setOptions({ xAxisData, seriesData, text } = {}) {
-      this.chart.setOption({
-        title: {
-          text: text + '水表柱状图',
-          subtext: ''
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        grid: {
-          left: '3%',
-          right: '15%',
-          bottom: '-4%',
-          containLabel: true
-        },
-        xAxis: [
-          {
-            name: '水表名称',
-            type: 'category',
-            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-            data: xAxisData,
-            axisTick: {
-              alignWithLabel: true
-            },
-            // axisLabel: { interval: 0, rotate: 40 }
-            axisLabel: { interval: 0 }
-            // show: false
-          }
-        ],
-        yAxis: [
-          {
-            name: '吨',
-            type: 'value'
-          }
-        ],
-        series: [
-          {
-            type: 'bar',
-            barWidth: '60%',
-            // data: [10, 52, 200, 334, 390, 330, 220]
-            data: seriesData
-          }
-        ]
-      })
-      const that = this
-      // 点击柱状图拿到对应内容
-      this.chart.on('click', function(params) {
-        console.log(params)
-        // console.log(parseTime(new Date(), '{y}') + '-' + params.name.substring(0, 2))
-        // that.$emit('barClickDept', parseTime(new Date(), '{y}') + '-' + params.name.substring(0, 2))
-        that.$emit('barClickDept', params.name)
-      })
-    }
-  }
-}
-</script>

src/views/report/queryWater/components/BarChartPasture.vue

@@ -1,115 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-// import { parseTime } from '@/utils/index.js'
-// import { emit } from 'cluster'
-// eslint-disable-next-line no-unused-vars
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    barPastureData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null,
-      sourceDate: []
-    }
-  },
-  watch: {
-    barPastureData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-        // console.log(val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.barPastureData)
-    },
-    setOptions({ sourceDate, text } = {}) {
-      this.chart.setOption({
-        title: {
-          text: '最近12个月用水量同期对比',
-          subtext: ''
-        },
-        legend: { x: 'right' },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        dataset: {
-          source: sourceDate
-          // source: [
-          //   ['product', '去年同期', '预算', '实际']
-          //   // ['10月', 433, 85.8, 93.7],
-          //   // ['9月', 83.1, 73.4, 55.1],
-          //   // ['8月', 86.4, 65.2, 82.5],
-          //   // ['7月', 72.4, 53.9, 39.1]
-          // ]
-        },
-        xAxis: { type: 'category', name: '最近12个月', formatter: '', axisLabel: { interval: 0, rotate: 40 }},
-        yAxis: { name: 'm³' },
-        grid: [
-          { left: '15%', right: '17%' }
-        ],
-        series: [
-          { type: 'bar' },
-          { type: 'bar' },
-          { type: 'bar' }
-        ]
-      })
-      const that = this
-      // 点击柱状图拿到对应内容
-      this.chart.on('click', function(params) {
-        console.log(params.name)
-        // that.$emit('chartClick', parseTime(new Date(), '{y}') + '-' + params.name.substring(0, 2))
-        that.$emit('chartClick', params.name.substring(0, 7))
-      })
-    }
-  }
-}
-</script>

src/views/report/queryWater/components/BarChartPastureMonth.vue

@@ -1,80 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-// eslint-disable-next-line no-unused-vars
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '475px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.chart.setOption({
-        legend: {},
-        tooltip: {},
-        dataset: {
-          source: [
-            ['product', '2015', '2016', '2017'],
-            ['10月', 43.3, 85.8, 93.7],
-            ['9月', 83.1, 73.4, 55.1],
-            ['8月', 86.4, 65.2, 82.5],
-            ['7月', 72.4, 53.9, 39.1]
-          ]
-        },
-        xAxis: [
-          { type: 'category', gridIndex: 0, name: '最近12个月' }
-        ],
-        yAxis: [
-          { gridIndex: 0, name: '总费用' }
-        ],
-        grid: [
-          { bottom: '58%' },
-          { top: '58%' }
-        ],
-        series: [
-          { type: 'bar' },
-          { type: 'bar' },
-          { type: 'bar' }
-        ]
-      })
-    }
-  }
-}
-</script>

src/views/report/queryWater/components/Contrast.vue

@@ -1,166 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-// import { debounce } from '@/utils'
-
-// eslint-disable-next-line no-unused-vars
-const animationDuration = 6000
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    contrastData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    contrastData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-        console.log('watch拿到的val', val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.contrastData)
-      // console.log('methods拿到的contrastData', this.contrastData)
-    },
-    setOptions({ lastData, thisData, text, thisMinData, days } = {}) {
-      this.chart.setOption({
-        title: {
-          text: text + '月用水量同期对比',
-          subtext: ''
-        },
-        tooltip: {
-          trigger: 'axis'
-        },
-        legend: {
-          data: ['去年同期', '今年日用量'],
-          orient: 'vertical'
-        },
-        toolbox: {
-          show: true,
-          feature: {
-            dataZoom: {
-              yAxisIndex: 'none'
-            },
-            dataView: { readOnly: false },
-            magicType: { type: ['line', 'bar'] },
-            restore: {},
-            saveAsImage: {}
-          }
-        },
-        xAxis: {
-          type: 'category',
-          name: '日期',
-          boundaryGap: false,
-          data: days
-        },
-        yAxis: {
-          type: 'value',
-          name: 'm³',
-          axisLabel: {
-            formatter: '{value}'
-          }
-        },
-        grid: [
-          { top: '25%', left: '15%', bottom: '5%' }
-        ],
-        series: [
-          {
-            name: '去年同期',
-            type: 'line',
-            // data: [11, 11, 15, 13, 12, 13, 10, 9, 11, 3],
-            data: lastData,
-            markPoint: {
-              data: [
-                // { type: 'max', name: '最大值' },
-                // { type: 'min', name: '最小值' }
-              ]
-            },
-            markLine: {
-              data: [
-                { type: 'average', name: '平均值' }
-              ]
-            }
-          },
-          {
-            name: '今年日用量',
-            type: 'line',
-            // data: [1, 5, 2, 5, 3, 2, 0, 9, 6, 7],
-            data: thisData,
-            markPoint: {
-              data: [
-                // { name: '周最低', value: 5, xAxis: 1, yAxis: 2 }
-                // { type: 'max', name: '最大值' },
-                // { type: 'min', name: '最小值' }
-              ]
-            },
-            markLine: {
-              data: [
-                { type: 'average', name: '平均值' },
-                [{
-                  symbol: 'none',
-                  x: '90%',
-                  yAxis: 'max'
-                }, {
-                  symbol: 'circle',
-                  label: {
-                    normal: {
-                      position: 'start',
-                      formatter: '最大值'
-                    }
-                  },
-                  type: 'max',
-                  name: '最高点'
-                }]
-              ]
-            }
-          }
-        ]
-      })
-    }
-  }
-}
-</script>

src/views/report/queryWater/components/PieChartDepartment.vue

@@ -1,120 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-import { debounce } from '@/utils'
-
-// eslint-disable-next-line no-unused-vars
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    pieDeptData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    pieDeptData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-        console.log('watch拿到的val', val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.pieDeptData)
-      // console.log('methods拿到的pieDeptData', this.pieDeptData)
-    },
-    setOptions({ DeptData, text } = {}) {
-      // console.log('setOptions拿到的DeptData', DeptData)
-      this.chart.setOption({
-        title: {
-          text: text + '月部门统计',
-          subtext: '',
-          x: 'center'
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          orient: 'vertical',
-          left: 'left',
-          data: ['', '', '', '', '']
-        },
-        series: [
-          {
-            name: text + '月',
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '60%'],
-            data: DeptData,
-            // data: [
-            //   { value: 335, name: '直接访问' },
-            //   { value: 310, name: '邮件营销' },
-            //   { value: 234, name: '联盟广告' },
-            //   { value: 135, name: '视频广告' },
-            //   { value: 1548, name: '搜索引擎' }
-            // ],
-            itemStyle: {
-              emphasis: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
-      })
-      const that = this
-      // 点击饼图拿到对应内容
-      this.chart.on('click', function(params) {
-        console.log(params)
-        that.$emit('pieClickDept', params.name)
-      })
-    }
-  }
-}
-</script>

src/views/report/queryWater/components/PieChartType.vue

@@ -1,116 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    pieTypeData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    pieTypeData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-        // console.log('watch拿到的val', val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.pieTypeData)
-      // console.log('methods拿到的pieTypeData', this.pieTypeData)
-    },
-    setOptions({ TypeData, text } = {}) {
-      // console.log('setOptions拿到的TypeData', TypeData)
-      this.chart.setOption({
-        title: {
-          text: text + '月类型统计',
-          subtext: '',
-          x: 'center'
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          orient: 'vertical',
-          left: 'left',
-          data: ['', '', '', '', '']
-        },
-        series: [
-          {
-            name: text + '月',
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '60%'],
-            data: TypeData,
-            // data: [
-            //   { value: 335, name: '直接访问' },
-            //   { value: 310, name: '邮件营销' },
-            //   { value: 234, name: '联盟广告' },
-            //   { value: 135, name: '视频广告' },
-            //   { value: 1548, name: '搜索引擎' }
-            // ],
-            itemStyle: {
-              emphasis: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
-      })
-      const that = this
-      // 点击饼图拿到对应内容
-      this.chart.on('click', function(params) {
-        console.log(params)
-        that.$emit('chartClickType', params.name)
-      })
-    }
-  }
-}
-</script>

src/views/report/queryWater/components/TodoList/Todo.vue

@@ -1,81 +0,0 @@
-<template>
-  <li :class="{ completed: todo.done, editing: editing }" class="todo">
-    <div class="view">
-      <input
-        :checked="todo.done"
-        class="toggle"
-        type="checkbox"
-        @change="toggleTodo( todo)"
-      >
-      <label @dblclick="editing = true" v-text="todo.text" />
-      <button class="destroy" @click="deleteTodo( todo )" />
-    </div>
-    <input
-      v-show="editing"
-      v-focus="editing"
-      :value="todo.text"
-      class="edit"
-      @keyup.enter="doneEdit"
-      @keyup.esc="cancelEdit"
-      @blur="doneEdit"
-    >
-  </li>
-</template>
-
-<script>
-export default {
-  name: 'Todo',
-  directives: {
-    focus(el, { value }, { context }) {
-      if (value) {
-        context.$nextTick(() => {
-          el.focus()
-        })
-      }
-    }
-  },
-  props: {
-    todo: {
-      type: Object,
-      default: function() {
-        return {}
-      }
-    }
-  },
-  data() {
-    return {
-      editing: false
-    }
-  },
-  methods: {
-    deleteTodo(todo) {
-      this.$emit('deleteTodo', todo)
-    },
-    editTodo({ todo, value }) {
-      this.$emit('editTodo', { todo, value })
-    },
-    toggleTodo(todo) {
-      this.$emit('toggleTodo', todo)
-    },
-    doneEdit(e) {
-      const value = e.target.value.trim()
-      const { todo } = this
-      if (!value) {
-        this.deleteTodo({
-          todo
-        })
-      } else if (this.editing) {
-        this.editTodo({
-          todo,
-          value
-        })
-        this.editing = false
-      }
-    },
-    cancelEdit(e) {
-      e.target.value = this.todo.text
-      this.editing = false
-    }
-  }
-}
-</script>

src/views/report/queryWater/components/TodoList/index.scss

@@ -1,320 +0,0 @@
-.todoapp {
-  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  line-height: 1.4em;
-  color: #4d4d4d;
-  min-width: 230px;
-  max-width: 550px;
-  margin: 0 auto ;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 300;
-  background: #fff;
-  z-index: 1;
-  position: relative;
-  button {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: none;
-    font-size: 100%;
-    vertical-align: baseline;
-    font-family: inherit;
-    font-weight: inherit;
-    color: inherit;
-    -webkit-appearance: none;
-    appearance: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  :focus {
-    outline: 0;
-  }
-  .hidden {
-    display: none;
-  }
-  .todoapp {
-    background: #fff;
-    margin: 130px 0 40px 0;
-    position: relative;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
-  }
-  .todoapp input::-webkit-input-placeholder {
-    font-style: italic;
-    font-weight: 300;
-    color: #e6e6e6;
-  }
-  .todoapp input::-moz-placeholder {
-    font-style: italic;
-    font-weight: 300;
-    color: #e6e6e6;
-  }
-  .todoapp input::input-placeholder {
-    font-style: italic;
-    font-weight: 300;
-    color: #e6e6e6;
-  }
-  .todoapp h1 {
-    position: absolute;
-    top: -155px;
-    width: 100%;
-    font-size: 100px;
-    font-weight: 100;
-    text-align: center;
-    color: rgba(175, 47, 47, 0.15);
-    -webkit-text-rendering: optimizeLegibility;
-    -moz-text-rendering: optimizeLegibility;
-    text-rendering: optimizeLegibility;
-  }
-  .new-todo,
-  .edit {
-    position: relative;
-    margin: 0;
-    width: 100%;
-    font-size: 18px;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: 1.4em;
-    border: 0;
-    color: inherit;
-    padding: 6px;
-    border: 1px solid #999;
-    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  .new-todo {
-    padding: 10px 16px 16px 60px;
-    border: none;
-    background: rgba(0, 0, 0, 0.003);
-    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
-  }
-  .main {
-    position: relative;
-    z-index: 2;
-    border-top: 1px solid #e6e6e6;
-  }
-  .toggle-all {
-    text-align: center;
-    border: none;
-    /* Mobile Safari */
-    opacity: 0;
-    position: absolute;
-  }
-  .toggle-all+label {
-    width: 60px;
-    height: 34px;
-    font-size: 0;
-    position: absolute;
-    top: -52px;
-    left: -13px;
-    -webkit-transform: rotate(90deg);
-    transform: rotate(90deg);
-  }
-  .toggle-all+label:before {
-    content: '❯';
-    font-size: 22px;
-    color: #e6e6e6;
-    padding: 10px 27px 10px 27px;
-  }
-  .toggle-all:checked+label:before {
-    color: #737373;
-  }
-  .todo-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  .todo-list li {
-    position: relative;
-    font-size: 24px;
-    border-bottom: 1px solid #ededed;
-  }
-  .todo-list li:last-child {
-    border-bottom: none;
-  }
-  .todo-list li.editing {
-    border-bottom: none;
-    padding: 0;
-  }
-  .todo-list li.editing .edit {
-    display: block;
-    width: 506px;
-    padding: 12px 16px;
-    margin: 0 0 0 43px;
-  }
-  .todo-list li.editing .view {
-    display: none;
-  }
-  .todo-list li .toggle {
-    text-align: center;
-    width: 40px;
-    /* auto, since non-WebKit browsers doesn't support input styling */
-    height: auto;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
-    border: none;
-    /* Mobile Safari */
-    -webkit-appearance: none;
-    appearance: none;
-  }
-  .todo-list li .toggle {
-    opacity: 0;
-  }
-  .todo-list li .toggle+label {
-    /*
-    Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
-    IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
-  */
-    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
-    background-repeat: no-repeat;
-    background-position: center left;
-    background-size: 36px;
-  }
-  .todo-list li .toggle:checked+label {
-    background-size: 36px;
-    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
-  }
-  .todo-list li label {
-    word-break: break-all;
-    padding: 15px 15px 15px 50px;
-    display: block;
-    line-height: 1.0;
-        font-size: 14px;
-    transition: color 0.4s;
-  }
-  .todo-list li.completed label {
-    color: #d9d9d9;
-    text-decoration: line-through;
-  }
-  .todo-list li .destroy {
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 10px;
-    bottom: 0;
-    width: 40px;
-    height: 40px;
-    margin: auto 0;
-    font-size: 30px;
-    color: #cc9a9a;
-    transition: color 0.2s ease-out;
-    cursor: pointer;
-  }
-  .todo-list li .destroy:hover {
-    color: #af5b5e;
-  }
-  .todo-list li .destroy:after {
-    content: '×';
-  }
-  .todo-list li:hover .destroy {
-    display: block;
-  }
-  .todo-list li .edit {
-    display: none;
-  }
-  .todo-list li.editing:last-child {
-    margin-bottom: -1px;
-  }
-  .footer {
-    color: #777;
-    position: relative;
-    padding: 10px 15px;
-    height: 40px;
-    text-align: center;
-    border-top: 1px solid #e6e6e6;
-  }
-  .footer:before {
-    content: '';
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: 40px;
-    overflow: hidden;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
-  }
-  .todo-count {
-    float: left;
-    text-align: left;
-  }
-  .todo-count strong {
-    font-weight: 300;
-  }
-  .filters {
-    margin: 0;
-    padding: 0;
-    position: relative;
-    z-index: 1;
-    list-style: none;
-  }
-  .filters li {
-    display: inline;
-  }
-  .filters li a {
-    color: inherit;
-    font-size: 12px;
-    padding: 3px 7px;
-    text-decoration: none;
-    border: 1px solid transparent;
-    border-radius: 3px;
-  }
-  .filters li a:hover {
-    border-color: rgba(175, 47, 47, 0.1);
-  }
-  .filters li a.selected {
-    border-color: rgba(175, 47, 47, 0.2);
-  }
-  .clear-completed,
-  html .clear-completed:active {
-    float: right;
-    position: relative;
-    line-height: 20px;
-    text-decoration: none;
-    cursor: pointer;
-  }
-  .clear-completed:hover {
-    text-decoration: underline;
-  }
-  .info {
-    margin: 65px auto 0;
-    color: #bfbfbf;
-    font-size: 10px;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-    text-align: center;
-  }
-  .info p {
-    line-height: 1;
-  }
-  .info a {
-    color: inherit;
-    text-decoration: none;
-    font-weight: 400;
-  }
-  .info a:hover {
-    text-decoration: underline;
-  }
-  /*
-  Hack to remove background from Mobile Safari.
-  Can't use it globally since it destroys checkboxes in Firefox
-*/
-  @media screen and (-webkit-min-device-pixel-ratio:0) {
-    .toggle-all,
-    .todo-list li .toggle {
-      background: none;
-    }
-    .todo-list li .toggle {
-      height: 40px;
-    }
-  }
-  @media (max-width: 430px) {
-    .footer {
-      height: 50px;
-    }
-    .filters {
-      bottom: 10px;
-    }
-  }
-}

src/views/report/queryWater/components/TodoList/index.vue

@@ -1,127 +0,0 @@
-<template>
-  <section class="todoapp">
-    <!-- header -->
-    <header class="header">
-      <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
-    </header>
-    <!-- main section -->
-    <section v-show="todos.length" class="main">
-      <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
-      <label for="toggle-all" />
-      <ul class="todo-list">
-        <todo
-          v-for="(todo, index) in filteredTodos"
-          :key="index"
-          :todo="todo"
-          @toggleTodo="toggleTodo"
-          @editTodo="editTodo"
-          @deleteTodo="deleteTodo"
-        />
-      </ul>
-    </section>
-    <!-- footer -->
-    <footer v-show="todos.length" class="footer">
-      <span class="todo-count">
-        <strong>{{ remaining }}</strong>
-        {{ remaining | pluralize('item') }} left
-      </span>
-      <ul class="filters">
-        <li v-for="(val, key) in filters" :key="key">
-          <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
-        </li>
-      </ul>
-      <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
-        Clear completed
-      </button> -->
-    </footer>
-  </section>
-</template>
-
-<script>
-import Todo from './Todo.vue'
-
-const STORAGE_KEY = 'todos'
-const filters = {
-  all: todos => todos,
-  active: todos => todos.filter(todo => !todo.done),
-  completed: todos => todos.filter(todo => todo.done)
-}
-const defalutList = [
-  { text: 'star this repository', done: false },
-  { text: 'fork this repository', done: false },
-  { text: 'follow author', done: false },
-  { text: 'vue-element-admin', done: true },
-  { text: 'vue', done: true },
-  { text: 'element-ui', done: true },
-  { text: 'axios', done: true },
-  { text: 'webpack', done: true }
-]
-export default {
-  components: { Todo },
-  filters: {
-    pluralize: (n, w) => n === 1 ? w : w + 's',
-    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
-  },
-  data() {
-    return {
-      visibility: 'all',
-      filters,
-      // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
-      todos: defalutList
-    }
-  },
-  computed: {
-    allChecked() {
-      return this.todos.every(todo => todo.done)
-    },
-    filteredTodos() {
-      return filters[this.visibility](this.todos)
-    },
-    remaining() {
-      return this.todos.filter(todo => !todo.done).length
-    }
-  },
-  methods: {
-    setLocalStorage() {
-      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
-    },
-    addTodo(e) {
-      const text = e.target.value
-      if (text.trim()) {
-        this.todos.push({
-          text,
-          done: false
-        })
-        this.setLocalStorage()
-      }
-      e.target.value = ''
-    },
-    toggleTodo(val) {
-      val.done = !val.done
-      this.setLocalStorage()
-    },
-    deleteTodo(todo) {
-      this.todos.splice(this.todos.indexOf(todo), 1)
-      this.setLocalStorage()
-    },
-    editTodo({ todo, value }) {
-      todo.text = value
-      this.setLocalStorage()
-    },
-    clearCompleted() {
-      this.todos = this.todos.filter(todo => !todo.done)
-      this.setLocalStorage()
-    },
-    toggleAll({ done }) {
-      this.todos.forEach(todo => {
-        todo.done = done
-        this.setLocalStorage()
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-  @import './index.scss';
-</style>

src/views/report/queryWater/components/mixins/resize.js

@@ -1,56 +0,0 @@
-import { debounce } from '@/utils'
-
-export default {
-  data() {
-    return {
-      $_sidebarElm: null
-    }
-  },
-  mounted() {
-    this.$_initResizeEvent()
-    this.$_initSidebarResizeEvent()
-  },
-  beforeDestroy() {
-    this.$_destroyResizeEvent()
-    this.$_destroySidebarResizeEvent()
-  },
-  // to fixed bug when cached by keep-alive
-  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
-  activated() {
-    this.$_initResizeEvent()
-    this.$_initSidebarResizeEvent()
-  },
-  deactivated() {
-    this.$_destroyResizeEvent()
-    this.$_destroySidebarResizeEvent()
-  },
-  methods: {
-    // use $_ for mixins properties
-    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
-    $_resizeHandler() {
-      return debounce(() => {
-        if (this.chart) {
-          this.chart.resize()
-        }
-      }, 100)()
-    },
-    $_initResizeEvent() {
-      window.addEventListener('resize', this.$_resizeHandler)
-    },
-    $_destroyResizeEvent() {
-      window.removeEventListener('resize', this.$_resizeHandler)
-    },
-    $_sidebarResizeHandler(e) {
-      if (e.propertyName === 'width') {
-        this.$_resizeHandler()
-      }
-    },
-    $_initSidebarResizeEvent() {
-      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
-    },
-    $_destroySidebarResizeEvent() {
-      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
-    }
-  }
-}

src/views/report/queryWater/index.vue

@@ -1,205 +1,184 @@
-/* eslint-disable vue/valid-template-root */
 <template>
   <div class="app-container">
     <div class="filter-container">
       <div class="block">
-        <el-date-picker v-model="yearDate" :clearable="false" type="year" placeholder="选择年" />
+        <el-date-picker v-model="yearDate" :clearable="false" type="month" placeholder="选择年" />
       </div>
     </div>
 
-    <!-- 年度维修成本 -->
-    <el-row v-if="isBarChart1" style="position: relative;">
+    <el-row v-if="isChart1" style="position: relative;">
       <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">
         {{ year }}年集团用水量：{{ total }}万m³
       </p>
+       <el-radio-group v-model="radio1" class="group" @change="changeGroup('1')">
+          <el-radio :label="1">集团</el-radio>
+          <el-radio :label="2">一中心</el-radio>
+          <el-radio :label="3">二中心</el-radio>
+          <el-radio :label="4">三中心</el-radio>
+        </el-radio-group>
       <el-col :span="24">
-        <div id="barChart1" style="width: 100%;height:400px;" />
+        <div id="chart1" style="width: 100%;height:400px;" />
       </el-col>
     </el-row>
 
-    <!-- 年度维修成本 -->
-    <el-row>
+    <el-row style="position: relative;">
+       <el-radio-group v-model="radio2" class="group" @change="changeGroup('2')">
+          <el-radio :label="1">集团</el-radio>
+          <el-radio :label="2">一中心</el-radio>
+          <el-radio :label="3">二中心</el-radio>
+          <el-radio :label="4">三中心</el-radio>
+        </el-radio-group>
+      <el-col :span="24">
+        <div id="chart2" style="width: 100%;height:400px;" />
+      </el-col>
+    </el-row>
+
+    <el-row style="position: relative;">
+       <el-radio-group v-model="radio3" class="group" @change="changeGroup('3')">
+          <el-radio :label="1">集团</el-radio>
+          <el-radio :label="2">一中心</el-radio>
+          <el-radio :label="3">二中心</el-radio>
+          <el-radio :label="4">三中心</el-radio>
+        </el-radio-group>
+      <el-col :span="24">
+        <div id="chart3" style="width: 100%;height:400px;" />
+      </el-col>
+    </el-row>
+    <el-row style="position: relative;">
       <el-col :span="12">
-        <div id="lineChart1" style="width: 100%;height:400px;" />
+        <div style="height: 50px;">
+          <el-select style="float: right;margin-right: 20px;" v-model="getChart4Parm.parammaps.pastureName" multiple :multiple-limit="5" collapse-tags placeholder="牧场" @change="changePasture('4')">
+            <el-option v-for="item in pastureList" :key="item.id" :label="item.name" :value="item.name"> </el-option>
+          </el-select>
+        </div>
+        <div id="chart4" style="width: 100%;height:400px;" />
       </el-col>
       <el-col :span="12">
-        <div id="lineChart2" style="width: 100%;height:400px;" />
+        <div style="height: 50px;">
+          <el-select style="float: right;margin-right: 20px;" v-model="getChart5Parm.parammaps.deptName" placeholder="部门" @change="changeDept('5')">
+            <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.name"> </el-option>
+          </el-select>
+        </div>
+        <div id="chart5" style="width: 100%;height:400px;" />
       </el-col>
     </el-row>
 
-    <el-row>
+    <el-row style="position: relative;">
       <el-col :span="12">
-        <div id="pieChart1" style="width: 100%;height:400px;" />
+        <div style="height: 50px;" />
+        <div id="chart6" style="width: 100%;height:400px;" />
       </el-col>
       <el-col :span="12">
-        <div id="barChart2" style="width: 100%;height:400px;" />
+        <div style="height: 50px;">
+          <el-select style="float: right;margin-right: 20px;" v-model="getChart7Parm.parammaps.pastureName" multiple :multiple-limit="5" collapse-tags placeholder="牧场" @change="changePasture('7')">
+            <el-option v-for="item in pastureList" :key="item.id" :label="item.name" :value="item.name"> </el-option>
+          </el-select>
+        </div>
+        <div id="chart7" style="width: 100%;height:400px;" />
       </el-col>
     </el-row>
-
   </div>
 
 </template>
 
 <script>
 import echarts from 'echarts'
-
-require('echarts/theme/macarons')
-
-// eslint-disable-next-line no-unused-vars
-import waves from '@/directive/waves' // waves directive
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
-import { GetDataByName, GetReportform, checkButtons } from '@/api/common'
-
+import { GetDataByName,GetDataByNames, GetReportform, checkButtons } from '@/api/common'
 import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
 export default {
   name: 'QueryWater',
-  directives: { waves },
-  components: { Pagination },
   data() {
     return {
       yearDate: new Date(),
-      total: '',
-
-      pasture: Cookies.get('pasturename'),
       year: new Date().getFullYear(),
       month: new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1,
-      deptment: '维修处',
-
-      getBarChart1Parm: {
+      pastureList:[],
+      deptList:[],
+      total: '',
+      radio1:1,
+      isChart1: [],
+      chart_data1: {},
+      getChart1Parm: {
         name: 'getpSumNowWater',
         parammaps: {
           receiveTime: new Date().getFullYear(),
           pastureName: Cookies.get('pasturename')
         }
       },
-      getLineChart1Parm: {
-        name: 'getPastureSumMonthWater',
+      radio2:1,
+      isChart2: [],
+      chart_data2: {},
+      getChart2Parm: {
+        name: 'getpSumNowWater',
         parammaps: {
           receiveTime: new Date().getFullYear(),
           pastureName: Cookies.get('pasturename')
         }
       },
-      getLineChart2Parm: {
-        name: 'getPastureSumDayWater',
+
+      radio3:1,
+      isChart3: [],
+      chart_data3: {},
+      getChart3Parm: {
+        name: 'getpSumNowWater',
         parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
+          receiveTime: new Date().getFullYear(),
           pastureName: Cookies.get('pasturename')
         }
       },
-      getPieChart1Parm: {
-        name: 'getdeptSumMonthWater',
+
+
+      isChart4: [],
+      chart_data4: {},
+      getChart4Parm: {
+        name: 'getpSumNowWater',
         parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
+          receiveTime: new Date().getFullYear(),
           pastureName: Cookies.get('pasturename')
         }
       },
-      getBarChart2Parm: {
-        name: 'geteqclassSumMonthWater',
+
+      isChart5: [],
+      chart_data5: {},
+      getChart5Parm: {
+        name: 'getpSumNowWater',
         parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
+          receiveTime: new Date().getFullYear(),
           pastureName: Cookies.get('pasturename'),
-          deptName: ''
+          deptName:''
         }
       },
-      barChart1: null,
-      lineChart1: null,
-      lineChart2: null,
-      pieChart1: null,
-      barChart2: null,
 
-      chart_data1: {
-        // pasture: ['宝鸡', '恒盛', '塞一', '塞二', '塞三', '塞四', '塞五', '通山', '合肥', '和林'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data2: {
-        // months: ['2019-01', '2019-02', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data3: {
-        // day: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data4: {
-        // name: ['饲养处', '其他部门', '设备处', '能源处', '牧场办公室'],
-        // psum: [
-        //   { value: 335, name: '饲养处' },
-        //   { value: 310, name: '其他部门' },
-        //   { value: 234, name: '设备处' },
-        //   { value: 135, name: '能源处' },
-        //   { value: 1548, name: '牧场办公室' }
-        // ]
-      },
-      chart_data5: {
-        // typeName: ['小型装载机', '叉车', '拖拉机', '抛料机', '搅拌机'],
-        // eqCost: [123, 332, 222, 333, 444],
-        // lastYear: [22, 342, 234, 234, 66]
+      isChart6: [],
+      chart_data6: {},
+      getChart6Parm: {
+        name: 'getpSumNowWater',
+        parammaps: {
+          receiveTime: new Date().getFullYear(),
+          pastureName: Cookies.get('pasturename')
+        }
       },
-
-      tableKey: 0,
-      list: null,
-      total: 0,
-      listLoading: true,
-      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
-      cellStyle: { padding: 0 + 'px' },
-
-      dialogFormVisibleCard: false,
-      listLoadingSee: true,
-      rowSeeData: {},
-      listSee: [],
-      totalSee: 0,
-      getdataListParmSee: {
-        name: 'geteqclassSumDay',
-        page: 1,
-        offset: 1,
-        pagecount: 10,
-        returntype: 'Map',
+      isChart7: [],
+      chart_data7: {},
+      getChart7Parm: {
+        name: 'getpSumNowWater',
         parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename'),
-          deptName: '',
-          typeName: '',
-          assetCode: '',
-          eqName: '',
-          startTime: '',
-          stopTime: '',
-          pastureId: Cookies.get('pastureid')
+          receiveTime: new Date().getFullYear(),
+          pastureName: Cookies.get('pasturename')
         }
       },
-      buttons: [],
-      isBarChart1: []
-
     }
   },
-
-  watch: {
-    'yearDate': {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        var time = this.yearDate
-        console.log(newVal.getFullYear())
-        this.year = time.getFullYear()
-        this.getBarChart1Parm.parammaps.receiveTime = time.getFullYear()
-        this.getLineChart1Parm.parammaps.receiveTime = time.getFullYear()
-        this.getLineChart2Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-        this.getPieChart1Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-        this.getBarChart2Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-
-        this.getBarChart1()
-        this.getLineChart1()
-        this.getLineChart2()
-        this.getPieChart1()
-      }
-    }
-  },
-
   created() {
-    this.getBarChart1()
-    this.getLineChart1()
-    this.getLineChart2()
-    this.getPieChart1()
+    this.get_select_list()
+    this.getChart1()
+    this.getChart2()
+    this.getChart3()
+    this.getChart4()
+    this.getChart5()
+    this.getChart6()
+    this.getChart7()
     const that = this
     GetDataByName({ 'name': 'getUserPCButtons', 'parammaps': { 'jwt_username': Cookies.get('name') }}).then(response => {
       that.buttons = response.data.list
@@ -207,308 +186,479 @@ export default {
     })
   },
   mounted() {
-    // this.roadBarChart1(this.chart_data1)
-    // this.roadlineChart1(this.chart_data2, this.pasture, this.year)
-    // this.roadlineChart2(this.chart_data3, this.pasture, this.month)
-    //  this.roadpieChart1(this.chart_data4, this.month)
-    // this.roadBarChart2(this.chart_data5, this.deptment)
   },
   methods: {
+    get_select_list() {
+      var send_data =  [
+        { name: 'findAllPasture', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': Cookies.get('pastureid') }},
+      ]
+      GetDataByNames(send_data).then(response => {
+        this.pastureList = response.data.findAllPasture.list
+      })
+    },
+    changeGroup(item){
+      if(item == 1){
+        this.getChart1()
+      }else if(item == 2){
+        this.getChart2()
+      }else if(item == 3){
+        this.getChart3()
+      }
+    },
+    changePasture(item){
+      if(item == 4){
+        this.getChart4()
+      }else if(item == 7){
+        this.getChart7()
+      }
+    },
+    changeDept(item){
+      if(item == 5){
+        this.getChart5()
+      }
+    },
     get_auto_buttons() {
       // 图1
-      const BarChart1 = 'report:queryWater:pastures'
-      const isBarChart1 = checkButtons(this.$store.state.user.buttons, BarChart1)
-      this.isBarChart1 = isBarChart1
+      const chart1 = 'report:queryWater:pastures'
+      const isChart1 = checkButtons(this.$store.state.user.buttons, chart1)
+      this.isChart1 = isChart1
     },
-    // 各牧场年度维修成本对比
-    getBarChart1() {
-      GetReportform(this.getBarChart1Parm).then(response => {
+    // 各牧场年度用水量对比
+    getChart1() {
+      GetReportform(this.getChart1Parm).then(response => {
         console.log('图1', response)
-        this.chart_data1 = response.data.chart_data
-        this.roadBarChart1(this.chart_data1)
+        // this.chart_data1 = response.data.chart_data
+        this.chart_data1 = {
+          data1:[10,20,30,40,50],
+          data2:[20,30,40,50,60],
+          xdata:["马鞍山牧场", "汶上牧场", "商河牧场", "合肥牧场", "蚌埠牧场"]
+        }
+        this.roadChart1(this.chart_data1)
         var nowYear = response.data.chart_data.nowYear
         var total = 0
         if (nowYear !== null || nowYear !== undefined) {
           nowYear.forEach(function(item, index) {
-            // console.log(parseFloat(item))
             total = total + parseFloat(item)
           })
         }
         this.total = total.toFixed(2)
       })
     },
-    getLineChart1() {
-      GetReportform(this.getLineChart1Parm).then(response => {
+    // 单头牛水量
+    getChart2() {
+      GetReportform(this.getChart2Parm).then(response => {
         console.log('图2', response)
-        this.chart_data2 = response.data.chart_data
-        this.roadlineChart1(this.chart_data2, this.pasture, this.year)
+        // this.chart_data2 = response.data.chart_data
+        this.chart_data2 = {
+          data1:[10,20,30,40,50],
+          data2:[20,30,40,50,60],
+          xdata:["马鞍山牧场", "汶上牧场", "商河牧场", "合肥牧场", "蚌埠牧场"]
+        }
+        this.roadChart2(this.chart_data2)
       })
     },
-    getLineChart2() {
-      GetReportform(this.getLineChart2Parm).then(response => {
-        console.log('图3', response)
-        this.chart_data3 = response.data.chart_data
 
-        this.roadlineChart2(this.chart_data3, this.pasture, this.month)
+    // 单头牛水费
+    getChart3() {
+      GetReportform(this.getChart3Parm).then(response => {
+        console.log('图3', response)
+        // this.chart_data3 = response.data.chart_data
+        this.chart_data3 = {
+          data1:[10,20,30,40,50],
+          data2:[20,30,40,50,60],
+          data3:[30,40,50,60,70],
+          xdata:["马鞍山牧场", "汶上牧场", "商河牧场", "合肥牧场", "蚌埠牧场"]
+        }
+        this.roadChart3(this.chart_data3)
       })
     },
-    getPieChart1() {
-      GetDataByName(this.getPieChart1Parm).then(response => {
+
+    // XX牧场XX年每月单头牛用水量对比
+    getChart4() {
+      GetReportform(this.getChart4Parm).then(response => {
         console.log('图4', response)
-        if (response.data === null || response.data.list === null) {
-          this.chart_data4 = { name: [], psum: [] }
-          this.roadpieChart1(this.chart_data4, this.month)
-        } else {
-          this.chart_data4.psum = response.data.list
-          var name = []
-          console.log(response.data.list)
-          response.data.list.forEach(function(i) {
-            name.push(i.name)
-          })
-          console.log(this.chart_data4)
-          this.chart_data4.name = name
-          this.roadpieChart1(this.chart_data4, this.month)
-          this.deptment = name[0]
-          this.getdataListParmSee.parammaps.deptName = name[0]
-          this.getBarChart2Parm.parammaps.deptName = name[0]
-          this.getBarChart2()
+        // this.chart_data4 = response.data.chart_data
+        this.chart_data4 = {
+          data1:[
+            {data:[10,20,30,40,50]},
+            {data:[20,30,40,50,60]},
+            {data:[30,40,50,60,70]},
+          ],
+          data_name:["马鞍山牧场", "汶上牧场", "商河牧场"],
+          xdata:["2023-01", "2023-02", "2023-03", "2023-04", "2023-05"]
         }
+        this.roadChart4(this.chart_data4)
       })
     },
-    getBarChart2() {
-      GetReportform(this.getBarChart2Parm).then(response => {
+
+    // XX月部门统计
+    getChart5() {
+      GetReportform(this.getChart5Parm).then(response => {
         console.log('图5', response)
-        this.chart_data5 = response.data.chart_data
-        this.roadBarChart2(this.chart_data5, this.deptment)
+        // this.chart_data5 = response.data.chart_data
+        this.chart_data5 = {
+          data1:[10,20,30,40,50],
+          data2:[20,30,40,50,60],
+          xdata:["马鞍山牧场挤奶处", "和林牧场挤奶处", "蚌埠牧场挤奶处", "塞一牧场挤奶处", "塞二牧场挤奶处"]
+        }
+        this.roadChart5(this.chart_data5)
       })
     },
-
-    // 各牧场年度维修成本对比
-    roadBarChart1(chart_data1) {
-      if (this.barChart1 != null) {
-        this.barChart1.dispose()
+    // XX牧场XX年每月用水量对比
+    getChart6() {
+      GetReportform(this.getChart6Parm).then(response => {
+        console.log('图6', response)
+        // this.chart_data6 = response.data.chart_data
+        this.chart_data6 = {
+          data1:[10,20,30,40,50],
+          data2:[20,30,40,50,60],
+          data3:[30,40,50,60,70],
+          xdata:["2023-01", "2023-02", "2023-03", "2023-04", "2023-05"]
+        }
+        this.roadChart6(this.chart_data6)
+      })
+    },
+    // XX月每日用水量
+    getChart7() {
+      GetReportform(this.getChart7Parm).then(response => {
+        console.log('图7', response)
+        // this.chart_data7 = response.data.chart_data
+        this.chart_data7 = {
+          data1:[
+            {data:[10,20,30,40,50]},
+            {data:[20,30,40,50,60]},
+            {data:[30,40,50,60,70]},
+          ],
+          data_name:["马鞍山牧场", "汶上牧场", "商河牧场"],
+          xdata:["2023-01", "2023-02", "2023-03", "2023-04", "2023-05"]
+        }
+        this.roadChart7(this.chart_data7)
+      })
+    },
+    // 各牧场年度用水量对比
+    roadChart1(chart_data) {
+      if (this.chart1 != null) {
+        this.chart1.dispose()
       }
-      this.barChart1 = echarts.init(document.getElementById('barChart1'))
+      this.chart1 = echarts.init(document.getElementById('chart1'))
       var option = {
         title: { text: '各牧场年度用水量对比', textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
         legend: {
-          data: ['今年用量', '去年同期'],
+          data: ['今年用量', '迄今预算'],
           right: 40
         },
-        color: ['#2dc0e8', '#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '4%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data1.pasture, axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '水(m³)', axisLabel: { formatter: '{value}万' }}],
+        color: ['#2dc0e8', '#769cfc'],
+        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: '水量(m³)', axisLabel: { formatter: '{value}万' }}],
         series: [
           {
             name: '今年用量',
             type: 'bar',
-            data: chart_data1.nowYear,
+            data: chart_data.data1,
+            barMaxWidth:20,
             emphasis: { label: { show: true, position: 'inside' }}
           },
           {
-            name: '去年同期',
+            name: '迄今预算',
             type: 'bar',
-            data: chart_data1.lastYear,
+            barMaxWidth:20,
+            data: chart_data.data2,
             emphasis: { label: { show: true, position: 'inside' }}
           }
 
         ]
       }
-      this.barChart1.setOption(option)
+      this.chart1.setOption(option)
       window.onresize = function() {
-        this.barChart1.resize()
+        this.chart1.resize()
       }
       var that = this
-      this.barChart1.on('click', function(param, i) {
+      this.chart1.on('click', function(param, i) {
         console.log(param)
-        that.pasture = param.name
-        that.getLineChart1Parm.parammaps.pastureName = param.name
-        that.getLineChart2Parm.parammaps.pastureName = param.name
-        that.getPieChart1Parm.parammaps.pastureName = param.name
-        that.getBarChart2Parm.parammaps.pastureName = param.name
-
-        that.getLineChart1()
-        that.getLineChart2()
-        that.getPieChart1()
       })
     },
-    // xx每月用水量对比
-    roadlineChart1(chart_data2, pasture, year) {
-      if (this.lineChart1 != null) {
-        this.lineChart1.dispose()
+    // 单头牛水量
+    roadChart2(chart_data) {
+      if (this.chart2 != null) {
+        this.chart2.dispose()
       }
-      this.lineChart1 = echarts.init(document.getElementById('lineChart1'))
+      this.chart2 = echarts.init(document.getElementById('chart2'))
       var option = {
-        title: { text: pasture + year + '每月用水量对比', textStyle: { color: '#769cfc' }},
+        title: { text: '单头牛水量', left:'center',textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
         legend: {
-          data: ['今年用量', '去年同期用量'],
-          x: 'right'
+          data: ['实际费用', '去年同期'],
+          right: 40
         },
-        color: ['#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '8%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data2.months, name: '月份', axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '水(m³)', axisLabel: { formatter: '{value}' }}],
+        color: ['#2dc0e8', '#769cfc'],
+        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: [
           {
-            name: '今年用量',
-            type: 'line',
-            data: chart_data2.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
+            name: '实际费用',
+            type: 'bar',
+            data: chart_data.data1,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20,
+            markLine:{ data:[ {yAxis:20} ] }
           },
           {
-            name: '去年同期用量',
-            type: 'line',
-            data: chart_data2.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
+            name: '去年同期',
+            type: 'bar',
+            data: chart_data.data2,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
           }
 
         ]
       }
-      this.lineChart1.setOption(option)
+      this.chart2.setOption(option)
       window.onresize = function() {
-        this.lineChart1.resize()
+        this.chart2.resize()
       }
       var that = this
-      this.lineChart1.on('click', function(param, i) {
+      this.chart2.on('click', function(param, i) {
         console.log(param)
-
-        that.getLineChart2Parm.parammaps.receiveTime = param.name
-        that.getPieChart1Parm.parammaps.receiveTime = param.name
-        that.getBarChart2Parm.parammaps.receiveTime = param.name
-
-        var num = param.name.substring(5)
-        console.log(num)
-        that.month = num
-        that.getLineChart2()
-        that.getPieChart1()
       })
     },
-
-    // xx用水量对比
-    roadlineChart2(chart_data3, pasture, month) {
-      if (this.lineChart2 != null) {
-        this.lineChart2.dispose()
+    // 单头牛水费
+    roadChart3(chart_data) {
+      if (this.chart3 != null) {
+        this.chart3.dispose()
       }
-      this.lineChart2 = echarts.init(document.getElementById('lineChart2'))
+      this.chart3 = echarts.init(document.getElementById('chart3'))
       var option = {
-        title: { text: pasture + month + '月每日用水量对比', textStyle: { color: '#769cfc' }},
+        title: { text: '单头牛水费', left:'center',textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
         legend: {
-          data: ['今年日用量', '去年同期'],
-          x: 'right'
+          data: ['实际费用', '预算','去年同期'],
+          right: 40
         },
-        color: ['#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '8%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data3.day, name: '日期', axisLabel: { interval: 0 }}],
-        yAxis: [{ type: 'value', name: '水(m³)', axisLabel: { formatter: '{value}' }}],
+        color: ['#2dc0e8', '#769cfc', '#FFB800'],
+        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: [
           {
-            name: '今年日用量',
-            type: 'line',
-            data: chart_data3.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
+            name: '实际费用',
+            type: 'bar',
+            data: chart_data.data1,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20,
+            markLine:{ data:[ {yAxis:20} ] }
+          },
+          {
+            name: '预算',
+            type: 'bar',
+            data: chart_data.data2,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
           },
           {
             name: '去年同期',
-            type: 'line',
-            data: chart_data3.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
+            type: 'bar',
+            data: chart_data.data3,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
           }
 
         ]
       }
-      this.lineChart2.setOption(option)
+      this.chart3.setOption(option)
       window.onresize = function() {
-        this.lineChart2.resize()
+        this.chart3.resize()
       }
-      this.lineChart2.on('click', function(param, i) {
+      var that = this
+      this.chart3.on('click', function(param, i) {
         console.log(param)
       })
     },
-    // 部门统计
-    roadpieChart1(chart_data4, month) {
-      if (this.pieChart1 != null) {
-        this.pieChart1.dispose()
+    // 各牧场XX年每月单头牛用水量对比
+    roadChart4(chart_data) {
+      if (this.chart4 != null) {
+        this.chart4.dispose()
       }
-      this.pieChart1 = echarts.init(document.getElementById('pieChart1'))
+      this.chart4 = echarts.init(document.getElementById('chart4'))
+      var text = '各牧场' + parseTime(this.yearDate, '{y}') + '年每月单头牛用水量对比'
       var option = {
-        title: { text: month + '月部门统计', textStyle: { color: '#769cfc' }},
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
+        tooltip: { trigger: 'axis' },
+        legend: {
+          data: chart_data.data_name,
+          left: 40,
+          bottom:0
         },
+        color: ['#2dc0e8', '#769cfc', '#FFB800'],
+        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: 'm³'}],
+        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[i],
+                type: 'line',
+                data: chart_data.data1[i].data
+              }
+              serie.push(item)
+            }
+          }
+          return serie
+        }())
+      }
+      this.chart4.setOption(option)
+      window.onresize = function() {
+        this.chart4.resize()
+      }
+      var that = this
+      that.chart4.on('click', function(param, i) {
+        console.log(param)
+        that.getChart5()
+      })
+    },
+    // XX月部门统计
+    roadChart5(chart_data) {
+      if (this.chart5 != null) {
+        this.chart5.dispose()
+      }
+      this.chart5 = echarts.init(document.getElementById('chart5'))
+      var text = parseTime(new Date(), '{m}') + '月部门统计'
+      var option = {
+        title: { text: text, left:'center',textStyle: { color: '#769cfc' }},
+        tooltip: { trigger: 'axis' },
         legend: {
-          data: chart_data4.name, top: 40,
-          x: 'right'
+          data: ['实际', '预算'],
+          right: 40,
+          bottom:0
         },
-        color: ['#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
+        color: ['#2dc0e8', '#769cfc'],
+        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: '吨', axisLabel: { formatter:'{value} 万'}}],
         series: [
           {
-            name: '',
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '60%'],
-            data: chart_data4.psum,
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
+            name: '实际',
+            type: 'bar',
+            data: chart_data.data1,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
+          },
+          {
+            name: '预算',
+            type: 'bar',
+            data: chart_data.data2,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
           }
-
         ]
       }
-      this.pieChart1.setOption(option)
+      this.chart5.setOption(option)
       window.onresize = function() {
-        this.pieChart1.resize()
+        this.chart5.resize()
       }
       var that = this
-      this.pieChart1.on('click', function(param, i) {
+      this.chart5.on('click', function(param, i) {
         console.log(param)
-        that.deptment = param.name
-        that.getBarChart2Parm.parammaps.deptName = param.name
-        that.getBarChart2()
       })
     },
-    // xx用水量
-    roadBarChart2(chart_data5, deptment) {
-      if (this.barChart2 != null) {
-        this.barChart2.dispose()
+    // XX牧场XX年每月用水量对比
+    roadChart6(chart_data) {
+      if (this.chart6 != null) {
+        this.chart6.dispose()
       }
-      this.barChart2 = echarts.init(document.getElementById('barChart2'))
+      this.chart6 = echarts.init(document.getElementById('chart6'))
       var option = {
-        title: { text: deptment + '用水量', textStyle: { color: '#769cfc' }},
+        title: { text: 'XX牧场XX年每月用水量对比', left:'center',textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
         legend: {
-          data: ['用水量'],
-          x: 'right'
+          data: ['去年同期用量', '今年用量','预算'],
+          right: 40,
+          bottom:0
         },
-        color: ['#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '15%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data5.typeName, name: '水表名称', axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '水(m³)', axisLabel: { formatter: '{value}' }}],
+        color: ['#2dc0e8', '#769cfc', '#FFB800'],
+        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: '水量(m³)'}],
         series: [
           {
-            name: '用水量',
-            type: 'bar',
-            barWidth: 14,
-            data: chart_data5.eqCost,
-            emphasis: { label: { show: true, position: 'inside' }}
+            name: '去年同期用量',
+            type: 'line',
+            data: chart_data.data1,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
+          },
+          {
+            name: '今年用量',
+            type: 'line',
+            data: chart_data.data2,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
+          },
+          {
+            name: '预算',
+            type: 'line',
+            data: chart_data.data3,
+            emphasis: { label: { show: true, position: 'inside' }},
+            barMaxWidth:20
           }
-
         ]
       }
-      this.barChart2.setOption(option)
+      this.chart6.setOption(option)
       window.onresize = function() {
-        this.barChart2.resize()
+        this.chart6.resize()
       }
-    }
+      var that = this
+      this.chart6.on('click', function(param, i) {
+        console.log(param)
+      })
+    },
+    // XX月每日用水量
+    roadChart7(chart_data) {
+      if (this.chart7 != null) {
+        this.chart7.dispose()
+      }
+      this.chart7 = echarts.init(document.getElementById('chart7'))
+      var text = parseTime(new Date(), '{m}') + '月每日用水量'
+      var option = {
+        title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
+        tooltip: { trigger: 'axis' },
+        legend: {
+          data: chart_data.data_name,
+          left: 40,
+          bottom:0
+        },
+        color: ['#2dc0e8', '#769cfc', '#FFB800'],
+        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: '水量(m³)'}],
+        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[i],
+                type: 'line',
+                data: chart_data.data1[i].data
+              }
+              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)
+      })
+    },
 
   }
 }
@@ -523,28 +673,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-
-.dashboard-editor-container {
-  padding: 20px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .github-corner {
-    position: absolute;
-    top: 0px;
-    border: 0;
-    right: 0;
-  }
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-  }
-}
-
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
-  }
+.group{
+  float: right;margin-bottom: 20px;
 }
 </style>

src/views/report/queryWater/index11.vue

@@ -1,642 +0,0 @@
-/* eslint-disable vue/valid-template-root */
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <div class="block">
-        <el-date-picker v-model="yearDate" :clearable="false" type="year" placeholder="选择年" />
- 
-        <el-radio-group v-model="radio"    style="float:right;margin-top:20px">
-          <el-radio  label="集团">集团</el-radio>
-          <el-radio  label="一中心">一中心</el-radio>
-          <el-radio  label="二中心">二中心</el-radio>
-          <el-radio  label="三中心">三中心</el-radio>
-        </el-radio-group>   
-
-      </div>
-
-      
-    </div>
-
-    <!-- 年度维修成本 -->
-    <el-row v-if="isBarChart1" style="position: relative;">
-      <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">
-        {{ year }}年集团用水量：{{ total }}万m³
-      </p>
-      <el-col :span="24">
-        <div id="barChart1" style="width: 100%;height:400px;" />
-      </el-col>
-    </el-row>
-
-    <!-- 年度维修成本 -->
-    <el-row>
-      <el-col :span="12">
-        <div  style="width: 100%;height:70px;" />
-        <div id="lineChart1" style="width: 100%;height:400px;" />
-      </el-col>
-      <el-col :span="12">
-
-
-        <el-select v-model="pastureNameListP"  multiple clearable filterable placeholder="牧场" class="filter-item" style="width:700px" @change="changePastureName">
-          <el-option v-for="item in findAllPasture" :key="item.id" :label="item.name" :value="item.name" />
-        </el-select>
-
-
-        <div id="lineChart2" style="width: 100%;height:400px;" />
-      </el-col>
-    </el-row>
-
-    <el-row>
-      <el-col :span="12">
-        <div id="pieChart1" style="width: 100%;height:400px;" />
-      </el-col>
-      <el-col :span="12">
-        <div id="barChart2" style="width: 100%;height:400px;" />
-      </el-col>
-    </el-row>
-
-  </div>
-
-</template>
-
-<script>
-import echarts from 'echarts'
-
-require('echarts/theme/macarons')
-
-// eslint-disable-next-line no-unused-vars
-import waves from '@/directive/waves' // waves directive
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
-import { GetDataByName, GetReportform, checkButtons } from '@/api/common'
-
-import Cookies from 'js-cookie'
-export default {
-  name: 'QueryWater',
-  directives: { waves },
-  components: { Pagination },
-  data() {
-    return {
-      yearDate: new Date(),
-      total: '',
-
-      pasture: Cookies.get('pasturename'),
-      year: new Date().getFullYear(),
-      month: new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1,
-      deptment: '维修处',
-
-
-      pastureNameListP: [],
-      findAllPasture: [],
-
-      radio: "集团",
-
-      getBarChart1Parm: {
-        name: 'getpSumNowWater',
-        parammaps: {
-          receiveTime: new Date().getFullYear(),
-          center:'',
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getLineChart1Parm: {
-        name: 'getPastureSumMonthWater',
-        parammaps: {
-          receiveTime: new Date().getFullYear(),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getLineChart2Parm: {
-        name: 'getPastureSumDayWater',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getPieChart1Parm: {
-        name: 'getdeptSumMonthWater',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      getBarChart2Parm: {
-        name: 'geteqclassSumMonthWater',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename'),
-          deptName: ''
-        }
-      },
-      barChart1: null,
-      lineChart1: null,
-      lineChart2: null,
-      pieChart1: null,
-      barChart2: null,
-
-      chart_data1: {
-        // pasture: ['宝鸡', '恒盛', '塞一', '塞二', '塞三', '塞四', '塞五', '通山', '合肥', '和林'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data2: {
-        // months: ['2019-01', '2019-02', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66],
-        // budget: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data3: {
-        // day: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
-        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
-        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
-      },
-      chart_data4: {
-        // name: ['饲养处', '其他部门', '设备处', '能源处', '牧场办公室'],
-        // psum: [
-        //   { value: 335, name: '饲养处' },
-        //   { value: 310, name: '其他部门' },
-        //   { value: 234, name: '设备处' },
-        //   { value: 135, name: '能源处' },
-        //   { value: 1548, name: '牧场办公室' }
-        // ]
-      },
-      chart_data5: {
-        // typeName: ['小型装载机', '叉车', '拖拉机', '抛料机', '搅拌机'],
-        // eqCost: [123, 332, 222, 333, 444],
-        // lastYear: [22, 342, 234, 234, 66]
-      },
-
-      tableKey: 0,
-      list: null,
-      total: 0,
-      listLoading: true,
-      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
-      cellStyle: { padding: 0 + 'px' },
-
-      dialogFormVisibleCard: false,
-      listLoadingSee: true,
-      rowSeeData: {},
-      listSee: [],
-      totalSee: 0,
-      getdataListParmSee: {
-        name: 'geteqclassSumDay',
-        page: 1,
-        offset: 1,
-        pagecount: 10,
-        returntype: 'Map',
-        parammaps: {
-          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
-          pastureName: Cookies.get('pasturename'),
-          deptName: '',
-          typeName: '',
-          assetCode: '',
-          eqName: '',
-          startTime: '',
-          stopTime: '',
-          pastureId: Cookies.get('pastureid')
-        }
-      },
-      buttons: [],
-      isBarChart1: []
-
-    }
-  },
-
-  watch: {
-    'yearDate': {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        var time = this.yearDate
-        console.log(newVal.getFullYear())
-        this.year = time.getFullYear()
-        this.getBarChart1Parm.parammaps.receiveTime = time.getFullYear()
-        this.getLineChart1Parm.parammaps.receiveTime = time.getFullYear()
-        this.getLineChart2Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-        this.getPieChart1Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-        this.getBarChart2Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
-
-        this.getBarChart1()
-        this.getLineChart1()
-        this.getLineChart2()
-        this.getPieChart1()
-      }
-    },
-    'radio': {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        console.log(newVal, oldVal)
-        if(newVal == '集团'){
-          this.getBarChart1Parm.parammaps.center = ''
-        } else {
-          this.getBarChart1Parm.parammaps.center = newVal
-        }
-        this.getBarChart1()
-        // this.getLineChart1()
-        // this.getLineChart2()
-        // this.getPieChart1()
-      }
-    },
-
-  },
-
-  created() {
-    this.getBarChart1()
-    this.getLineChart1()
-    this.getLineChart2()
-    
-    this.getPieChart1()
-    const that = this
-    GetDataByName({ 'name': 'getUserPCButtons', 'parammaps': { 'jwt_username': Cookies.get('name') }}).then(response => {
-      that.buttons = response.data.list
-      that.get_auto_buttons()
-    })
-
-    GetDataByName({ name: 'findAllPasture', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': Cookies.get('pastureid') }}).then(response => {
-      console.log(response)
-      that.findAllPasture = response.data.list
- 
-    })
-  },
-  mounted() {
-    // this.roadBarChart1(this.chart_data1)
-    // this.roadlineChart1(this.chart_data2, this.pasture, this.year)
-    // this.roadlineChart2(this.chart_data3, this.pasture, this.month)
-    //  this.roadpieChart1(this.chart_data4, this.month)
-    // this.roadBarChart2(this.chart_data5, this.deptment)
-  },
-  methods: {
-
-    changePastureName(item){
-      console.log(item)
-      if(item.length > 5){
-          this.$notify({
-            title: '提示',
-            message: '最多只能选5家牧场！',
-            type: 'danger',
-            duration: 2000
-          })
-      } else {
-
-      }
-    },
-    get_auto_buttons() {
-      // 图1
-      const BarChart1 = 'report:queryWater:pastures'
-      const isBarChart1 = checkButtons(this.$store.state.user.buttons, BarChart1)
-      this.isBarChart1 = isBarChart1
-    },
-    // 各牧场年度维修成本对比
-    getBarChart1() {
-      GetReportform(this.getBarChart1Parm).then(response => {
-        console.log('图1', response)
-        this.chart_data1 = response.data.chart_data
-        this.roadBarChart1(this.chart_data1)
-        var nowYear = response.data.chart_data.nowYear
-        var total = 0
-        if (nowYear !== null || nowYear !== undefined) {
-          nowYear.forEach(function(item, index) {
-            console.log(parseFloat(item))
-            total = total + parseFloat(item)
-          })
-        }
-        this.total = total.toFixed(4)
-      })
-    },
-    getLineChart1() {
-      GetReportform(this.getLineChart1Parm).then(response => {
-        console.log('图2', response)
-        this.chart_data2 = response.data.chart_data
-        this.roadlineChart1(this.chart_data2, this.pasture, this.year)
-      })
-    },
-    getLineChart2() {
-      GetReportform(this.getLineChart2Parm).then(response => {
-        console.log('图3', response)
-        this.chart_data3 = response.data.chart_data
-
-        this.roadlineChart2(this.chart_data3, this.pasture, this.month)
-      })
-    },
-    
-
-    getPieChart1() {
-      GetDataByName(this.getPieChart1Parm).then(response => {
-        console.log('图4', response)
-        if (response.data === null || response.data.list === null) {
-          this.chart_data4 = { name: [], arr1: [] , arr2: [] }
-          this.chart_data4 = {
-            name: ['挤奶处', '安环处', '饲喂处', '牧场办公室', '品控处'], 
-            arr1: [2,3,13,43,12],
-            arr2: [12,31,23,33,13]
-          }
-          this.roadpieChart1(this.chart_data4, this.month)
-        } else {
-        
-          this.chart_data4 = {
-            name: ['挤奶处', '安环处', '饲喂处', '牧场办公室', '品控处'], 
-            arr1: [2,3,13,43,12],
-            arr2: [12,31,23,33,13]
-          }
-          this.roadpieChart1(this.chart_data4, this.month)
- 
-        }
-
-    
-       })
-    },
-
-    roadpieChart1(chart_data4, month) {
-      if (this.pieChart1 != null) {
-        this.pieChart1.dispose()
-      }
-      this.pieChart1 = echarts.init(document.getElementById('pieChart1'))
-      var option = {
-        title: { text: month + '月部门统计', textStyle: { color: '#769cfc' }},
-       
-        tooltip: {  trigger: 'axis'  },
-        legend: {
-          data:['实际', '预算']
-        },
-        color: ['#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
-        toolbox: {show: true },
-        calculable: true,
-        xAxis: [
-          {
-            type: 'category',
-            // prettier-ignore
-            data: chart_data4.name
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value'
-          }
-        ],
-        series: [
-          {
-            name: '实际', type: 'bar',  data: chart_data4.arr1,  
-          },
-          {
-            name: '预算',  type: 'bar',  data: chart_data4.arr2, 
-          }
-        ]
-      }
-      this.pieChart1.setOption(option)
-      window.onresize = function() {
-        this.pieChart1.resize()
-      }
-      var that = this
-      this.pieChart1.on('click', function(param, i) {
-        console.log(param)
-        that.deptment = param.name
-        that.getBarChart2Parm.parammaps.deptName = param.name
-        that.getBarChart2()
-      })
-    },
-    getBarChart2() {
-      GetReportform(this.getBarChart2Parm).then(response => {
-        console.log('图5', response)
-        this.chart_data5 = response.data.chart_data
-        this.chart_data5 = {
-            name: ['装载机', '安环处', '饲喂处', '牧场办公室', '品控处'], 
-            arr1: [2,3,13,43,12],
-            arr2: [12,31,23,33,13]
-          }
-
-        this.roadBarChart2(this.chart_data5, this.deptment)
-      })
-    },
-
-    // xx用水量
-    roadBarChart2(chart_data5, deptment) {
-      if (this.barChart2 != null) {
-        this.barChart2.dispose()
-      }
-      this.barChart2 = echarts.init(document.getElementById('barChart2'))
-      var option = {
-        title: { text: deptment + '用水量', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['实际', '预算'],
-          x: 'right'
-        },
-        color: ['#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '15%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data5.name, name: '', axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '水(m³)', axisLabel: { formatter: '{value}' }}],
-        series: [
-          // {
-          //   name: '用水量',
-          //   type: 'bar',
-          //   barWidth: 14,
-          //   data: chart_data5.eqCost,
-          //   emphasis: { label: { show: true, position: 'inside' }}
-          // }
-
-          {
-            name: '实际', type: 'bar',  data: chart_data5.arr1,  
-          },
-          {
-            name: '预算',  type: 'bar',  data: chart_data5.arr2, 
-          }
-
-        ]
-      }
-      this.barChart2.setOption(option)
-      window.onresize = function() {
-        this.barChart2.resize()
-      }
-    },
-
-
-    // 各牧场年度维修成本对比
-    roadBarChart1(chart_data1) {
-      if (this.barChart1 != null) {
-        this.barChart1.dispose()
-      }
-      this.barChart1 = echarts.init(document.getElementById('barChart1'))
-      var option = {
-        title: { text: '各牧场年度用水量对比', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['今年用量', '去年同期'],
-          right: 40
-        },
-        color: ['#2dc0e8', '#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '4%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data1.pasture, axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '水(m³)', axisLabel: { formatter: '{value}万' }}],
-        series: [
-          {
-            name: '今年用量',
-            type: 'bar',
-            data: chart_data1.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '去年同期',
-            type: 'bar',
-            data: chart_data1.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.barChart1.setOption(option)
-      window.onresize = function() {
-        this.barChart1.resize()
-      }
-      var that = this
-      this.barChart1.on('click', function(param, i) {
-        console.log(param)
-        that.pasture = param.name
-        that.getLineChart1Parm.parammaps.pastureName = param.name
-        that.getLineChart2Parm.parammaps.pastureName = param.name
-        that.getPieChart1Parm.parammaps.pastureName = param.name
-        that.getBarChart2Parm.parammaps.pastureName = param.name
-
-        that.getLineChart1()
-        that.getLineChart2()
-        that.getPieChart1()
-      })
-    },
-    // xx每月用水量对比
-    roadlineChart1(chart_data2, pasture, year) {
-      if (this.lineChart1 != null) {
-        this.lineChart1.dispose()
-      }
-      this.lineChart1 = echarts.init(document.getElementById('lineChart1'))
-      var option = {
-        title: { text: pasture + year + '每月用水量对比', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['今年用量', '去年同期用量', '预算'],
-          x: 'right'
-        },
-        color: ['#769cfc', '#FFB800', '#6bda00'],
-        grid: { left: '3%', right: '8%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data2.months, name: '月份', axisLabel: { interval: 0, rotate: 30 }}],
-        yAxis: [{ type: 'value', name: '水(m³)', axisLabel: { formatter: '{value}' }}],
-        series: [
-          {
-            name: '今年用量',
-            type: 'line',
-            data: chart_data2.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '去年同期用量',
-            type: 'line',
-            data: chart_data2.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '预算',
-            type: 'line',
-            data: chart_data2.budget,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.lineChart1.setOption(option)
-      window.onresize = function() {
-        this.lineChart1.resize()
-      }
-      var that = this
-      this.lineChart1.on('click', function(param, i) {
-        console.log(param)
-
-        that.getLineChart2Parm.parammaps.receiveTime = param.name
-        that.getPieChart1Parm.parammaps.receiveTime = param.name
-        that.getBarChart2Parm.parammaps.receiveTime = param.name
-
-        var num = param.name.substring(5)
-        console.log(num)
-        that.month = num
-        that.getLineChart2()
-        that.getPieChart1()
-      })
-    },
-
-    // xx用水量对比
-    roadlineChart2(chart_data3, pasture, month) {
-      if (this.lineChart2 != null) {
-        this.lineChart2.dispose()
-      }
-      this.lineChart2 = echarts.init(document.getElementById('lineChart2'))
-      var option = {
-        title: { text:  month + '月每日用水量对比', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['今年日用量', '去年同期'],
-          x: 'right'
-        },
-        color: ['#769cfc', '#FFB800'],
-        grid: { left: '3%', right: '8%', bottom: '4%', containLabel: true },
-        xAxis: [{ type: 'category', data: chart_data3.day, name: '日期', axisLabel: { interval: 0 }}],
-        yAxis: [{ type: 'value', name: '水(m³)', axisLabel: { formatter: '{value}' }}],
-        series: [
-          {
-            name: '今年日用量',
-            type: 'line',
-            data: chart_data3.nowYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          },
-          {
-            name: '去年同期',
-            type: 'line',
-            data: chart_data3.lastYear,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
-
-        ]
-      }
-      this.lineChart2.setOption(option)
-      window.onresize = function() {
-        this.lineChart2.resize()
-      }
-      this.lineChart2.on('click', function(param, i) {
-        console.log(param)
-      })
-    },
-    // 部门统计
-   
-    
-  }
-}
-</script>
-<style>
-.el-row {
-    margin-bottom: 40px;
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-</style>
-
-<style lang="scss" scoped>
-
-.dashboard-editor-container {
-  padding: 20px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .github-corner {
-    position: absolute;
-    top: 0px;
-    border: 0;
-    right: 0;
-  }
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-  }
-}
-
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
-  }
-}
-</style>