modernDairy/src/views/dashboard/editor/index.vue

<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <div class="generalTitle"> 现代牧业设备管理系统 </div>
      </el-col>
      <el-col :span="12">
        <div class="date"> {{ row1.date }} </div>
      </el-col>
    </el-row>

    <el-row :gutter="5" class="row2">
      <el-col :span="10">
        <dv-border-box-8 :dur="3" :reverse="true" style="height:500px;">
          <!-- <div class="Title">费用统计</div> -->
          <div id="row2Chart1" style="width: 100%;height:450px;" />
          <el-row :gutter="5" class="groupNews">
            <el-col :span="6">
              <dv-border-box-8 :dur="-1" class="news">
                <b>设备指标预算</b><br>
                <span>{{ row2.chart1.list.monthBudgets }}万元</span>
              </dv-border-box-8>
            </el-col>
            <el-col :span="6">
              <dv-border-box-8 :dur="-1" class="news">
                <b>迄今预算</b><br>
                <span>{{ row2.chart1.list.budget }}万元</span>
              </dv-border-box-8>
            </el-col>
            <el-col :span="6">
              <dv-border-box-8 :dur="-1" class="news">
                <b>设备指标实际</b><br>
                <span>{{ row2.chart1.list.sumPrice }}万元</span>
              </dv-border-box-8>
            </el-col>
            <el-col :span="6">
              <dv-border-box-8 :dur="-1" class="news">
                <b>迄今达成率</b><br>
                <span>{{ row2.chart1.list.donerate }}</span>
              </dv-border-box-8>
            </el-col>
          </el-row>
          <div v-if="row2.chart1.isPastureList" class="pastureNews">
            <dv-border-box-8 :dur="-1" class="newsTitle"><b>{{ row2.chart1.pasture.pastureName }}</b></dv-border-box-8>
            <dv-border-box-8 :dur="-1" class="news2">
              <div>
                <b>设备指标预算:</b><span>{{ row2.chart1.pasture.list.monthBudgets }}万元</span><br>
                <b>设备指标实际:</b><span>{{ row2.chart1.pasture.list.sumPrice }}万元</span><br>
                <b>迄今达成率:</b><span>{{ row2.chart1.pasture.list.donerate }}</span>
              </div>
            </dv-border-box-8>
          </div>
        </dv-border-box-8>
      </el-col>
      <el-col :span="14">
        <el-row>
          <el-col :span="12">
            <dv-border-box-8 :dur="-1" style="height:500px;">
              <div class="Title">集团分项总指标</div>
              <div id="row2Chart2" style="width: 100%;height:480px;" />
              <!-- <div class="Indexbutton">
                <a @click="form_seeDetails('row2Chart2')">查看详情</a>
              </div> -->
            </dv-border-box-8>
          </el-col>
          <el-col :span="12">
            <dv-border-box-8 :dur="-1" style="height:500px;">
              <div class="Title">各中心总指标</div>
              <div id="row2Chart3" style="width: 100%;height:480px;" />
              <div class="Indexbutton">
                <a @click="form_seeDetails('row2Chart3')">查看详情</a>
              </div>
            </dv-border-box-8>
          </el-col>
          <el-col :span="24" style="display:none">
            <dv-border-box-8 :dur="-1" style="height:250px;">
              <div class="Title">资产运转率</div>
              <div id="row2Chart4" style="width: 100%;height:190px;" />
              <div class="Indexbutton">
                <a @click="form_seeDetails('row2Chart4')">查看详情</a>
              </div>
            </dv-border-box-8>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row :gutter="5" style="height:300px;color: #fff;">
      <el-col :span="24">
        <dv-border-box-8 :dur="-1" style="height:300px;">
          <div class="Title">费用统计</div>
          <div class="costStatistics">
            <div class="content">
              <dv-border-box-8 :dur="-1" style="height:260px;">
                <div class="title">
                  <svg-icon icon-class="维修成本分析" />
                  维修费
                </div>
                <div class="small-title">
                  单头牛实际:  {{row3.chart1.list}}
                </div>
                <el-row :gutter="5" style="height:260px;color: #fff;">
                  <el-col :span="24" style="padding:0 10px 0 10px ;">
                    <dv-border-box-12 :dur="-1" :reverse="true" style="height:200px;">
                      <div id="row3Chart1" style="width: 98%;height:200px;" />
                    </dv-border-box-12>
                    <div class="Indexbutton">
                      <a @click="form_seeDetails('row3Chart1')">查看详情</a>
                    </div>
                  </el-col>
                </el-row>
              </dv-border-box-8>
            </div>
            <div class="content">
              <dv-border-box-8 :dur="-1" style="height:260px;">
                <div class="title">
                  <svg-icon icon-class="水量分析" />
                  水费
                </div>
                <div class="small-title">
                  单头牛实际:  {{ row3.chart2.list}}
                </div>
                <el-row :gutter="5" style="height:260px;color: #fff;">
                  <el-col :span="24" style="padding:0 10px 0 10px ;">
                    <dv-border-box-12 :dur="-1" :reverse="true" style="height:200px;">
                      <div id="row3Chart2" style="width: 98%;height:200px;" />
                    </dv-border-box-12>
                    <div class="Indexbutton">
                      <a @click="form_seeDetails('row3Chart2')">查看详情</a>
                    </div>
                  </el-col>
                </el-row>
              </dv-border-box-8>
            </div>
            <div class="content">
              <dv-border-box-8 :dur="-1" style="height:260px;">
                <div class="title">
                  <svg-icon icon-class="电量分析" />
                  电费
                </div>
                <div class="small-title">
                  单头牛实际:  {{ row3.chart3.list}}
                </div>
                <el-row :gutter="5" style="height:260px;color: #fff;">
                  <el-col :span="24" style="padding:0 10px 0 10px ;">
                    <dv-border-box-12 :dur="-1" :reverse="true" style="height:200px;">
                      <div id="row3Chart3" style="width: 98%;height:200px;" />
                    </dv-border-box-12>
                    <div class="Indexbutton">
                      <a @click="form_seeDetails('row3Chart3')">查看详情</a>
                    </div>
                  </el-col>
                </el-row>
              </dv-border-box-8>
            </div>
            <div class="content">
              <dv-border-box-8 :dur="-1" style="height:260px;">
                <div class="title">
                  <svg-icon icon-class="燃动分析" />
                  燃动费
                </div>
                <div class="small-title">
                  单头牛实际:  {{ row3.chart4.list}}
                </div>
                <el-row :gutter="5" style="height:260px;color: #fff;">
                  <el-col :span="24" style="padding:0 10px 0 10px;">
                    <dv-border-box-12 :dur="-1" style="height:200px;" :reverse="true">
                      <div id="row3Chart4" style="width: 98%;height:200px;" />
                    </dv-border-box-12>
                    <div class="Indexbutton">
                      <a @click="form_seeDetails('row3Chart4')">查看详情</a>
                    </div>
                  </el-col>
                </el-row>
              </dv-border-box-8>
            </div>
          </div>
        </dv-border-box-8>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { GetReportform, GetDataByName,getJson } from '@/api/common'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
import echarts from 'echarts'
import 'echarts/map/js/china'
import $ from 'jquery'
require('echarts/theme/macarons')
export default {
  name: 'DashboardEditor',
  data() {
    return {
      row1: {
        date: parseTime(new Date(), '{y}-{m}-{d}')
      },

      row2: {
        chart1: {
          // 地图
          getdataListParm: {
            name: 'homepagePastureInfor',
            parammaps: {}
          },
          data: [],
          Chart: null,
          // 预算、实际、达成率
          get_table_dataParm: {
            name: 'homepageRate',
            parammaps: {
              pastureName: '现代牧业'
            }
          },
          list: {},
          isPastureList: false,
          pasture: {
            getdataListParm: {
              name: 'homepageRate',
              page: 1,
              offset: 1,
              pagecount: 10,
              returntype: 'Map',
              parammaps: {
                pastureName: ''
              }
            },
            pastureName: '',
            listLoading: true,
            total: 0,
            list: []
          }
        },
        chart2: {
          getdataListParm: {
            name: 'homepageEqstatus',
            parammaps: {
              pastureName: '现代牧业'
            }
          },
          data: [],
          Chart: null
        },
        chart3: {
          getdataListParm: {
            name: 'homepageUkdoneRatePasture',
            page: 1,
            offset: 1,
            pagecount: 0,
            returntype: 'Map',
            parammaps: {}
          },
          tableKey: 0,
          listLoading: true,
          total: 0,
          list: [],
          isType: false,
          isPasture: true
        },
        chart4: {
          getdataListParm: {
            name: 'homepageEqRunstatueListPasture',
            parammaps: {
              type: '牧场'
            }
          },
          data: [],
          Chart: null
        }
      },

      row3: {
        chart1: {
          getdataListParm: {
            name: 'homepageFeeWX',
            parammaps: {
              type: '至今',
              pastureName: '现代牧业'
            }
          },
          data: [],
          Chart: null,
          list: {}
        },
        chart2: {
          getdataListParm: {
            name: 'homepageFeeWater',
            parammaps: {
              type: '至今',
              pastureName: '现代牧业'
            }
          },
          data: [],
          Chart: null,
          list: {}
        },
        chart3: {
          getdataListParm: {
            name: 'homepageFeeElec',
            parammaps: {
              type: '至今',
              pastureName: '现代牧业'
            }
          },
          data: [],
          Chart: null,
          list: {}
        },
        chart4: {
          getdataListParm: {
            name: 'homepageFeeDiesel',
            parammaps: {
              type: '至今',
              pastureName: '现代牧业'
            }
          },
          data: [],
          Chart: null,
          list: {}
        }
      },
      rowStyle: { maxHeight: 20 + 'px', height: 20 + 'px', background: '#003366', color: '#fff', fontSize: '8px' },
      cellStyle: { padding: 0 + 'px', background: '#003366', color: '#fff', fontSize: '8px' }
    }
  },
  created() {
    this.getRow2List1()
    this.getRow2Chart1()
  },
  methods: {
    form_seeDetails(item) {
      if (item == 'row2Chart2') {
        console.log('设备状态统计')
        this.$router.push('/report/EquipmentOverview')
      } else if (item == 'row2Chart3') {
        console.log('​各中心总指标')
        this.$router.push('/report/EquipmentIndex')
      } else if (item == 'row2Chart4') {
        console.log('资产运转率')
        this.$router.push('/report/EquipmentOperation')
      } else if (item == 'row3Chart1') {
        console.log('维修费')
        this.$router.push('/report/QueryRepair')
      } else if (item == 'row3Chart2') {
        console.log('水费')
        this.$router.push('/report/QueryWater')
      } else if (item == 'row3Chart3') {
        console.log('电费')
        this.$router.push('/report/QueryElec')
      } else if (item == 'row3Chart4') {
        console.log('燃动费')
        this.$router.push('/report/QueryCombustion')
      }
    },
    getRow2List1() {
      GetDataByName(this.row2.chart1.get_table_dataParm).then(response => {
        if (response.data.list !== null) {
          this.row2.chart1.list = response.data.list[0]
        } else {
          this.row2.chart1.list.donerate = ''
          this.row2.chart1.list.monthBudgets = ''
          this.row2.chart1.list.sumPrice = ''
        }
      })
    },
    getRow2Chart1() {
      GetReportform(this.row2.chart1.getdataListParm).then(response => {
        console.log('row2图2', response)
        if (response.data !== null) {
          this.row2.chart1.data = response.data
        } else {
          this.row2.chart1.data = []
        }
        this.getRow2Chart2()
        this.roadRow2Chart1(this.row2.chart1.data)
      })
    },
    roadRow2Chart1(chart_data1) {
      if (this.row2.chart1.Chart != null) {
        this.row2.chart1.Chart.dispose()
      }
      this.row2.chart1.Chart = echarts.init(document.getElementById('row2Chart1'))
      var uploadedDataURL = '/datas/myMap.json'
      var that = this
      $.getJSON(uploadedDataURL, function(geoJson) {
        echarts.registerMap('china', geoJson)
        var geoCoordMap = chart_data1.data1[0]
        var data = chart_data1.data2

        // console.log('geoCoordMap', JSON.stringify(geoCoordMap) )
        // console.log('data', JSON.stringify(data))
        var max = 480; var min = 9
        var maxSize4Pin = 100; var minSize4Pin = 20
        var convertData = function(data) {
          var res = []
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name]
            if (geoCoord) {
              res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) })
            }
          }
          return res
        }

        // console.log('convertData', JSON.stringify(convertData))
        var conDatatest1 = convertData(data)
        // console.log('convertData Data', JSON.stringify(conDatatest1))
        var symbolImg = 'image://' + require('@/assets/images/1.png') // 或者import引入在拼接也行

        var option = {
          title: '',
          legend: {
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            data: ['pm2.5'],
            textStyle: {
              color: '#fff'
            }
          },
          visualMap: {
            show: false,
            min: 0,
            max: 600,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true,
            seriesIndex: [1],
            inRange: {}
          },
          geo: {
            map: 'china',
            show: true,
            roam: true, // 鼠标滚动放大缩小
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#3a7fd5',
                borderColor: '#0a53e9', // 线
                shadowColor: '#092f8f', // 外发光
                shadowBlur: 20
              },
              emphasis: {
                areaColor: '#0a2dae' // 悬浮区背景
              }
            }
          },
          series: [{
            symbolSize: 5,
            label: {
              normal: {
                formatter: '{b}',
                position: 'bottom',
                lineHeight: 30,
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#fff'
              }
            },
            name: 'light',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data)
          }, {
            type: 'map',
            map: 'china',
            geoIndex: 0,
            aspectScale: 0.75, // 长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#FFFFFF'
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            animation: false,
            data: data
          }, {
            name: 'Top 5',
            type: 'scatter',
            coordinateSystem: 'geo',
            // symbol: 'pin',
            symbol: symbolImg,
            symbolSize: [20, 20],
            right: 100,
            label: {
              normal: {
                show: false,
                textStyle: { color: '#fff', fontSize: 9 },
                formatter(value) {
                  return value.data.value[2]
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#D8BC37',
                marginRight: 100
              }
            },
            data: convertData(data),
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1
          }]
        }
        that.row2.chart1.Chart.setOption(option)
        that.row2.chart1.Chart.on('click', function(param, i) {
          if (param.value.length !== undefined) {
            console.log(param)
            that.row2.chart2.getdataListParm.parammaps.pastureName = param.name

            that.row2.chart3.getdataListParm.name = 'homepageUkdoneRateEqclass'
            that.row2.chart3.getdataListParm.parammaps.pastureName = param.name
            that.row2.chart3.isType = true
            that.row2.chart3.isPasture = false
            that.row2.chart4.getdataListParm.name = 'homepageEqRunstatueListEqclass'
            that.row2.chart4.getdataListParm.parammaps.pastureName = param.name
            that.row2.chart4.getdataListParm.parammaps.type = '设备类别'

            that.row2.chart1.pasture.getdataListParm.parammaps.pastureName = param.name
            that.row3.chart1.getdataListParm.parammaps.pastureName = param.name
            that.row3.chart2.getdataListParm.parammaps.pastureName = param.name
            that.row3.chart3.getdataListParm.parammaps.pastureName = param.name
            that.row3.chart4.getdataListParm.parammaps.pastureName = param.name
            that.row2.chart1.pasture.pastureName = param.name
            that.getRow2PastureList()
            that.getRow2Chart2()
          } else {
            that.row2.chart2.getdataListParm.parammaps.pastureName = '现代牧业'
            that.row2.chart3.isType = false
            that.row2.chart3.isPasture = true
            that.row2.chart3.getdataListParm.name = 'homepageUkdoneRatePasture'
            that.row2.chart3.getdataListParm.parammaps.pastureName = '现代牧业'
            that.row2.chart4.getdataListParm.name = 'homepageEqRunstatueListPasture'
            that.row2.chart4.getdataListParm.parammaps.type = '牧场'
            that.row2.chart4.getdataListParm.parammaps.pastureName = '现代牧业'
            that.row3.chart1.getdataListParm.parammaps.pastureName = '现代牧业'
            that.row3.chart2.getdataListParm.parammaps.pastureName = '现代牧业'
            that.row3.chart3.getdataListParm.parammaps.pastureName = '现代牧业'
            that.row3.chart4.getdataListParm.parammaps.pastureName = '现代牧业'
            that.getRow2Chart1()
            that.row2.chart1.isPastureList = false
          }
        })
        window.onresize = function() {
          that.row2.chart1.Chart.resize()
        }
      })
    },
    // 牧场
    getRow2PastureList() {
      this.row2.chart1.pasture.listLoading = true
      let url = "authdata/pasture/index"
      let data = {
        pastureName:this.row3.chart4.getdataListParm.parammaps.pastureName
      }
      getJson(url,data).then(response => {
        if (response.data.list !== null) {
          this.row2.chart1.pasture.list.monthBudgets = response.data.budget
          this.row2.chart1.pasture.list.sumPrice = response.data.actual
          this.row2.chart1.pasture.list.donerate = response.data.complete
          console.log('牧场数据', this.row2.chart1.pasture.list)
          this.row2.chart1.isPastureList = true
        } else {
          this.row2.chart1.pasture.list.donerate = ''
          this.row2.chart1.pasture.list.monthBudgets = ''
          this.row2.chart1.pasture.list.sumPrice = ''
        }
        setTimeout(() => {
          this.row2.chart1.pasture.listLoading = false
        }, 100)
      })
    },

    // 集团分项总指标
    getRow2Chart2() {
      let url = 'authdata/overall/index'
      let data = ''
      getJson(url,data).then(response => {
      // GetReportform(this.row2.chart2.getdataListParm).then(response => {
        console.log('row2图2', response)
        if (response.data !== null) {
          this.row2.chart2.data = response.data
          var data1 = ['维修','水','电','燃动']
          var data2 = [
            response.data.repair.budget,
            response.data.repair.actual,
            response.data.repair.lastActual,
            response.data.repair.singleCow,
          ]
          var data3 = [
            response.data.water.budget,
            response.data.water.actual,
            response.data.water.lastActual,
            response.data.water.singleCow,
          ]
          var data4 = [
            response.data.electricity.budget,
            response.data.electricity.actual,
            response.data.electricity.lastActual,
            response.data.electricity.singleCow,
          ]
          var data5 = [
            response.data.ignition.budget,
            response.data.ignition.actual,
            response.data.ignition.lastActual,
            response.data.ignition.singleCow,
          ]
          this.row2.chart2.data = {
            data1:data1,
            data2:data2,
            data3:data3,
            data4:data4,
            data5:data5
          }
        } else {
          this.row2.chart2.data = []
        }
        this.getRow2Chart3()
        this.roadRow2Chart2(this.row2.chart2.data)
      })
    },
    roadRow2Chart2(chart_data1) {
      if (this.row2.chart2.Chart != null) {
        this.row2.chart2.Chart.dispose()
      }
      this.row2.chart2.Chart = echarts.init(document.getElementById('row2Chart2'))
      var option = {
        title: { text: '', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        color: ['#769cfc','#19FA60','#FF9733','	#FFFF00'],
        grid: { left: '3%', right: '13%', top: '15%', bottom: '4%', containLabel: true },
        legend: {
          data: ['迄今预算', '今年实际', '去年同期实际', '单头牛实际'], textStyle: { color: '#fff' }
        },
        xAxis: [{ type: 'category', name: '设备类别', data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
        yAxis: [{ type: 'value', name: '费用/百万', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff' }}}],
        series: [
          { type: 'bar', barWidth: 20, data: chart_data1.data2, name:'迄今预算', emphasis: { label: { show: true, position: 'inside' }} },
          { type: 'bar', barWidth: 20, data: chart_data1.data3, name:'今年实际', emphasis: { label: { show: true, position: 'inside' }} },
          { type: 'bar', barWidth: 20, data: chart_data1.data4, name:'去年同期实际', emphasis: { label: { show: true, position: 'inside' }} },
          { type: 'line', data: chart_data1.data5, name:'单头牛实际', emphasis: { label: { show: true, position: 'inside' }} }
        ]
      }
      this.row2.chart2.Chart.setOption(option)
      window.onresize = function() {
        this.row2.chart2.Chart.resize()
      }
    },

    // 各中心总指标
    getRow2Chart3() {
      this.row2.chart3.listLoading = true
      let url = 'authdata/centra/index'
      let data = ''
      getJson(url,data).then(response => {
      // GetReportform(this.row2.chart2.getdataListParm).then(response => {
        console.log('row2图2', response)
        if (response.data !== null) {
          this.row2.chart3.data = response.data
          var data1 = []
          var data2 = []
          var data3 = []
          var data4 = []
          response.data.central.forEach((i,j)=>{
            data1.push(i.central)
            data2.push(i.budget)
            data3.push(i.actual)
            data4.push(i.complete)
          })
          this.row2.chart3.data = {
            data1:data1,
            data2:data2,
            data3:data3,
            data4:data4
          }
        } else {
          this.row2.chart3.data = []
        }
        this.getRow2Chart4()
        this.roadRow2Chart3(this.row2.chart3.data)
        setTimeout(() => {
          this.row2.chart3.listLoading = false
        }, 100)
      })
    },
    roadRow2Chart3(chart_data1) {
      if (this.row2.chart3.Chart != null) {
        this.row2.chart3.Chart.dispose()
      }
      this.row2.chart3.Chart = echarts.init(document.getElementById('row2Chart3'))
      var option = {
        title: { text: '', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        color: ['#769cfc','#19FA60','	#FFFF00'],
        grid: { left: '3%', right: '13%', top: '15%', bottom: '4%', containLabel: true },
        legend: {
          data: ['设备指标迄今预算', '设备指标迄今实际', '完成率'], textStyle: { color: '#fff'}
        },
        xAxis: [{ type: 'category', name: '', data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
        yAxis: [
          { type: 'value', name: '费用/百万', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff' }}},
          { type: 'value', name: '', min: 0, max: 100, interval: 20, axisLabel: { formatter: '{value} %' },axisLine: { lineStyle: { color: '#fff' }} }
        ],
        series: [
          { type: 'bar', barWidth: 20, data: chart_data1.data2, name:'设备指标迄今预算', emphasis: { label: { show: true, position: 'inside' }} },
          { type: 'bar', barWidth: 20, data: chart_data1.data3, name:'设备指标迄今实际', emphasis: { label: { show: true, position: 'inside' }} },
          { type: 'line', data: chart_data1.data4, name:'完成率', emphasis: { label: { show: true, position: 'inside' }} }
        ]
      }
      this.row2.chart3.Chart.setOption(option)
      window.onresize = function() {
        this.row2.chart3.Chart.resize()
      }
    },
    // 资产运转率
    getRow2Chart4() {
      GetReportform(this.row2.chart4.getdataListParm).then(response => {
        console.log('row2图4', response)
        if (response.data !== null) {
          this.row2.chart4.data = response.data
        } else {
          this.row2.chart4.data = []
        }
        this.getRow3Chart1()
        this.roadRow2Chart4(this.row2.chart4.data)
      })
    },
    roadRow2Chart4(chart_data1) {
      if (this.row2.chart4.Chart != null) {
        this.row2.chart4.Chart.dispose()
      }
      this.row2.chart4.Chart = echarts.init(document.getElementById('row2Chart4'))
      var option = {
        title: { text: '', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        color: ['#769cfc'],
        grid: { left: '3%', right: '8%', top: '15%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', name: chart_data1.data3[0],
          axisLabel: {
            interval: 0,
            rotate: 40
          },
          data: chart_data1.data1, axisLine: { lineStyle: { color: '#fff' }}}],
        yAxis: [{ type: 'value', name: '%', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff' }}}],
        series: [
          {
            type: 'bar',
            data: chart_data1.data2,
            emphasis: { label: { show: true, position: 'inside' }}
          }
        ]
      }
      this.row2.chart4.Chart.setOption(option)
      window.onresize = function() {
        this.row2.chart4.Chart.resize()
      }
    },

    // 维修费
    getRow3Chart1() {
      let url = 'authdata/expense'
      let data = ''
      getJson(url,data).then(response => {
      // GetReportform(this.row3.chart1.getdataListParm).then(response => {
        console.log('row3', response)
        if (response.data !== null) {
          var repair_data1 = []
          var repair_data2 = []
          var repair_data3 = []
          var repair_data4 = []
          var repair_str1 = ''
          response.data.repair.forEach((i,j)=>{
            repair_data1.push(i.Center)
            repair_data2.push(i.budget)
            repair_data3.push(i.actual)
            repair_data4.push(i.lastActual)
            repair_str1 +=  i.Center + ':'+ i.singleCow
          })
          this.row3.chart1.list = repair_str1
          this.row3.chart1.data = {
            data1:repair_data1,
            data2:repair_data2,
            data3:repair_data3,
            data4:repair_data4
          }

          var water_data1 = []
          var water_data2 = []
          var water_data3 = []
          var water_data4 = []
          var water_str1 = ''
          response.data.water.forEach((i,j)=>{
            water_data1.push(i.Center)
            water_data2.push(i.budget)
            water_data3.push(i.actual)
            water_data4.push(i.lastActual)
            water_str1 +=  i.Center + ':'+ i.singleCow
          })
          this.row3.chart2.list = water_str1
          this.row3.chart2.data = {
            data1:water_data1,
            data2:water_data2,
            data3:water_data3,
            data4:water_data4
          }

          var electricity_data1 = []
          var electricity_data2 = []
          var electricity_data3 = []
          var electricity_data4 = []
          var electricity_str1 = ''
          response.data.electricity.forEach((i,j)=>{
            electricity_data1.push(i.Center)
            electricity_data2.push(i.budget)
            electricity_data3.push(i.actual)
            electricity_data4.push(i.lastActual)
            electricity_str1 +=  i.Center + ':'+ i.singleCow
          })
          this.row3.chart3.list = electricity_str1
          this.row3.chart3.data = {
            data1:electricity_data1,
            data2:electricity_data2,
            data3:electricity_data3,
            data4:electricity_data4
          }


          var ignition_data1 = []
          var ignition_data2 = []
          var ignition_data3 = []
          var ignition_data4 = []
          var ignition_str1 = ''
          response.data.ignition.forEach((i,j)=>{
            ignition_data1.push(i.Center)
            ignition_data2.push(i.budget)
            ignition_data3.push(i.actual)
            ignition_data4.push(i.lastActual)
            ignition_str1 +=  i.Center + ':'+ i.singleCow
          })
          this.row3.chart4.list = ignition_str1
          this.row3.chart4.data = {
            data1:ignition_data1,
            data2:ignition_data2,
            data3:ignition_data3,
            data4:ignition_data4
          }
          this.$forceUpdate()
        } else {
          this.row3.chart1.data = {}
          this.row3.chart1.list = {}
        }
        this.getRow3Chart2()
        this.roadRow3Chart1(this.row3.chart1.data)
        this.roadRow3Chart2(this.row3.chart2.data)
        this.roadRow3Chart3(this.row3.chart3.data)
        this.roadRow3Chart4(this.row3.chart4.data)
      })
    },
    roadRow3Chart1(chart_data1) {
      if (this.row3.chart1.Chart != null) {
        this.row3.chart1.Chart.dispose()
      }
      this.row3.chart1.Chart = echarts.init(document.getElementById('row3Chart1'))
      var option = {
        title: { text: '', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: [
            { name: '迄今预算', icon: 'circle' },
            { name: '今年实际', icon: 'circle' },
            { name: '去年同期实际', icon: 'circle' }
          ],
          itemWidth: 5,
          itemHeight: 5,
          itemGap: 5,
          y: 10,
          textStyle: { color: '#fff', fontSize: '10' }
        },
        color: ['#769cfc','#19FA60','#FF9733'],
        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', name: '时间', nameTextStyle: { padding: [0, 0, -20, -30] }, data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
        yAxis: [{ type: 'value', name: '', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }}}],
        series: [
          {
            name: '迄今预算',
            textStyle: {
              fontSize: 12,
              fontWeight: 'bolder',
              color: '#fff'
            },
            type: 'bar',
            barWidth: 10,
            data: chart_data1.data2,
            emphasis: { label: { show: true, position: 'inside' }}
          }, {
            name: '今年实际',
            type: 'bar',
            barWidth: 10,
            data: chart_data1.data3,
            emphasis: { label: { show: true, position: 'inside' }}
          }, {
            name: '去年同期实际',
            type: 'bar',
            barWidth: 10,
            data: chart_data1.data5,
            emphasis: { label: { show: true, position: 'inside' }}
          }
        ]
      }
      this.row3.chart1.Chart.setOption(option)
      window.onresize = function() {
        this.row3.chart1.Chart.resize()
      }
    },

    
    roadRow3Chart2(chart_data1) {
      if (this.row3.chart2.Chart != null) {
        this.row3.chart2.Chart.dispose()
      }
      this.row3.chart2.Chart = echarts.init(document.getElementById('row3Chart2'))
      var option = {
        title: { text: '', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: [
            { name: '迄今预算', icon: 'circle' },
            { name: '今年实际', icon: 'circle' },
            { name: '去年同期实际', icon: 'circle' }
          ],
          itemWidth: 5,
          itemHeight: 5,
          itemGap: 5,
          y: 10,
          textStyle: { color: '#fff', fontSize: '10' }
        },
        color: ['#769cfc','#19FA60','#FF9733'],
        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', name: '时间', nameTextStyle: { padding: [0, 0, -20, -30] }, data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
        yAxis: [{ type: 'value', name: '', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }}}],
        series: [
          {
            name: '迄今预算',
            textStyle: {
              fontSize: 12,
              fontWeight: 'bolder',
              color: '#fff'
            },
            type: 'bar',
            barWidth: 10,
            data: chart_data1.data2,
            emphasis: { label: { show: true, position: 'inside' }}
          }, {
            name: '今年实际',
            type: 'bar',
            barWidth: 10,
            data: chart_data1.data3,
            emphasis: { label: { show: true, position: 'inside' }}
          },{
            name: '去年同期实际',
            type: 'bar',
            barWidth: 10,
            data: chart_data1.data5,
            emphasis: { label: { show: true, position: 'inside' }}
          }
        ]
      }
      this.row3.chart2.Chart.setOption(option)
      window.onresize = function() {
        this.row3.chart2.Chart.resize()
      }
    },

    
    roadRow3Chart3(chart_data1) {
      if (this.row3.chart3.Chart != null) {
        this.row3.chart3.Chart.dispose()
      }
      this.row3.chart3.Chart = echarts.init(document.getElementById('row3Chart3'))
      var option = {
        title: { text: '', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: [
            { name: '迄今预算', icon: 'circle' },
            { name: '今年实际', icon: 'circle' },
            { name: '去年同期实际', icon: 'circle' }
          ],
          itemWidth: 5,
          itemHeight: 5,
          itemGap: 5,
          y: 10,
          textStyle: { color: '#fff', fontSize: '10' }
        },
        color: ['#769cfc','#19FA60','#FF9733'],
        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', name: '时间', nameTextStyle: { padding: [0, 0, -20, -30] }, data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
        yAxis: [{ type: 'value', name: '', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }}}],
        series: [
          {
            name: '今年预算',
            textStyle: {
              fontSize: 12,
              fontWeight: 'bolder',
              color: '#fff'
            },
            type: 'bar',
            barWidth: 10,
            data: chart_data1.data2,
            emphasis: { label: { show: true, position: 'inside' }}
          }, {
            name: '今年实际',
            type: 'bar',
            barWidth: 10,
            data: chart_data1.data3,
            emphasis: { label: { show: true, position: 'inside' }}
          }, {
            name: '去年同期实际',
            type: 'bar',
            barWidth: 10,
            data: chart_data1.data5,
            emphasis: { label: { show: true, position: 'inside' }}
          }
        ]
      }
      this.row3.chart3.Chart.setOption(option)
      window.onresize = function() {
        this.row3.chart3.Chart.resize()
      }
    },

   
    roadRow3Chart4(chart_data1) {
      if (this.row3.chart4.Chart != null) {
        this.row3.chart4.Chart.dispose()
      }
      this.row3.chart4.Chart = echarts.init(document.getElementById('row3Chart4'))
      var option = {
        title: { text: '', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: [
            { name: '迄今预算', icon: 'circle' },
            { name: '今年实际', icon: 'circle' },
            { name: '去年同期实际', icon: 'circle' }
          ],
          itemWidth: 5,
          itemHeight: 5,
          itemGap: 5,
          y: 10,
          textStyle: { color: '#fff', fontSize: '10' }
        },
        color: ['#769cfc','#19FA60','#FF9733'],
        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', name: '时间', nameTextStyle: { padding: [0, 0, -20, -30] }, data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
        yAxis: [{ type: 'value', name: '', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }}}],
        series: [
          {
            name: '今年预算',
            textStyle: {
              fontSize: 12,
              fontWeight: 'bolder',
              color: '#fff'
            },
            type: 'bar',
            barWidth: 10,
            data: chart_data1.data2,
            emphasis: { label: { show: true, position: 'inside' }}
          }, {
            name: '今年实际',
            type: 'bar',
            barWidth: 10,
            data: chart_data1.data3,
            emphasis: { label: { show: true, position: 'inside' }}
          }, {
            name: '去年同期实际',
            type: 'bar',
            barWidth: 10,
            data: chart_data1.data5,
            emphasis: { label: { show: true, position: 'inside' }}
          }
        ]
      }
      this.row3.chart4.Chart.setOption(option)
      window.onresize = function() {
        this.row3.chart4.Chart.resize()
      }
    }

  }
}
</script>
<style lang="scss" scoped>
  .app-container {
    background-color: #003366; color: #fff;min-height: 100vh;
    .Title{height: 30px;line-height: 30px;text-align: left;padding-left: 10px;}
    .title{height: 30px;line-height: 30px;text-align: center;}
    .generalTitle{width: 100%;margin-left:150px;text-align: right;font-size: 30px;line-height: 60px;font-weight: 600;}
    .date{width: 100%;text-align: right;font-size: 14px;line-height: 60px;padding-right: 20px;}
    .Indexbutton{
      height: 20px;position: relative;width: 100%;
      a{display: inline-block;height: 20px;line-height: 20px;font-size:10px;text-align: center;background: #769cfc;color: #fff;border-radius: 2px;width: 55px;position: absolute;left: 0;right: 0;top: 5px;bottom: 0;margin: 0 auto;}
    }
    .IndexTable{
      padding: 0 10px;
      .Indextable{background: #003366;}
    }
    .row2{
      height:500px;position: relative;
      .groupNews{
        height:60px;width:70%;z-index: 1;position:absolute;top: 5px;left: 10px;
        .news{
          height:60px;text-align: center;
          b{line-height: 30px;font-size: 14px;}
          span{line-height: 20px;font-size: 12px;}
        }
      }
      .pastureNews{
        height:150px;width:40%;z-index: 1;position:absolute;bottom: 20px;left: 10px;background: #055597;
        .newsTitle{height: 30px;line-height: 30px;padding-left: 10px;}
        .news2{
          height: 120px;padding-left: 10px;font-size: 12px;
          div{
            padding-top: 10px;line-height: 30px;
            b{font-weight: 400;}
          }
        }
      }
    }
    // row3
    .costStatistics{
      display: flex;justify-content: space-between;margin: 0 5px;
      .content{
        flex: 1 1 1 1 auto;
        width: 100%;
        .contentLeft{
          height: 200px;position:relative;
          div{
            font-size: 10px;width: 100%;text-align: center;height: 130px;
            position: absolute; top: 0; bottom:0; left: 0; right: 0; margin: auto;
              b{display: block;line-height: 22px;height: 22px;margin-top: 10px;}
              span{display: block;line-height: 22px;height: 22px;}
            }
            b:nth-child(1){
              margin-top: -10px;
            }
        }
      }
    }
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
      display:block;
      width: 8px;
      height: 8px;
      background-color: rgba(245, 245, 245, 0.47);
  }
  /*定义滚动条的轨道，内阴影及圆角*/
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
      border-radius: 10px;
      background-color: #f5f5f5;
  }

  /*定义滑块，内阴影及圆角*/
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
      /*width: 10px;*/
      height: 20px;
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
      background-color: rgba(85, 85, 85, 0.25);
  }
  .small-title{
    font-size: 12px;padding-left: 10px;
    span{
      margin: 0 5px;
    }
  }

</style>