<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>
      </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="getListSee"
        />
        <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(),
      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(),
          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]
      },
      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()
      }
    }
  },

  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: ['#42b983', '#769cfc', '#FFB800'],
        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' }}
          }

        ]
      }
      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: ['#42b983', '#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.getListSee()
        that.dialogFormVisibleCard = true
      })
    },
    // 搜索
    form_searchDelivery() {
      if (this.getdataListParmSee.parammaps.inputDatetime == null) {
        this.getdataListParmSee.parammaps.startTime = ''
        this.getdataListParmSee.parammaps.stopTime = ''
      }
      this.getdataListParmSee.offset = 1
      this.getListSee()
    },
    getListSee() {
      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>
