<template>
  <div class="dashboard-editor-container">
    <!-- <h1>集团</h1> -->
    <div class="search">
      <el-row>
        <el-col :span="6">
          <el-form label-position="right" label-width="85px">
            <el-form-item label="统计范围：">
              <el-date-picker v-model="inputDatetime" :clearable="false" class="inputDatetime filter-item" type="daterange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="changeDate" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div class="bottom">
      <h4>{{ date }}</h4>
      <el-row :gutter="20" style="margin-top: 10px;">
        <el-col :span="6">
          <div class="grid-content one">
            <div class="Left">
              <i class="iconfont icon-shuaxin" />
            </div>
            <div class="Right">
              <span>混料平均准确率：</span>{{ row1.list[0].rateAvg }}<br>
              <span>混料最高准确率：</span>{{ row1.list[0].rateMAX }}<br>
              <span>混料最低准确率：</span>{{ row1.list[0].rateMIN }}
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content two">
            <div class="Left">
              <i class="iconfont icon-zhunqueshuai2" />
            </div>
            <div class="Right">
              <span>撒料平均准确率：</span>{{ row1.list[1].rateAvg }}<br>
              <span>撒料最高准确率：</span>{{ row1.list[1].rateMAX }}<br>
              <span>撒料最低准确率：</span>{{ row1.list[1].rateMIN }}
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content three">
            <div class="Left">
              <i class="iconfont icon-zhinengsiwei" style="font-size: 40px;" />
            </div>
            <div class="Right">
              <span>撒料平均正确率：</span>{{ row1.list[2].rateAvg }}<br>
              <span>撒料最高正确率：</span>{{ row1.list[2].rateMAX }}<br>
              <span>撒料最低正确率：</span>{{ row1.list[2].rateMIN }}
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content four">
            <div class="Left">
              <i class="iconfont icon-siliaotoufangjilu" style="font-size: 50px;" />
            </div>
            <div class="Right">
              <span style="width:116px;">撒料平均偏差：</span>{{ row1.list[3].rateAvg }} min<br>
              <span style="width:116px;">撒料最高偏差：</span>{{ row1.list[3].rateMAX }} min<br>
              <span style="width:116px;">撒料最低偏差：</span>{{ row1.list[3].rateMIN }} min
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="6">
          <div class="grid-content" style="height:500px;background: #fff;">

            <div style="height: 250px; border-bottom: 1px solid #000;">
              <b style="padding-left: 10px;line-height: 50px;font-size: 20px;">今日计划统计</b><br>
              <div style="text-align: center;">
                <b style="padding-right: 10px;font-size: 14px;">完成车次：{{ row2.chart1.chartLine_data.data1 }}</b>
                <b style="padding-right: 10px;font-size: 14px;">计划车次：{{ row2.chart1.chartLine_data.data2 }}</b>
              </div>
              <div id="row2chartLine1" style="height: 150px;" />
            </div>
            <div style="height: 250px;">
              <div style="text-align: center;padding-top:50px;">
                <b style="padding-right: 5px;font-size: 14px;">完成重量：{{ row2.chart2.chartLine_data.data1 }}kg</b>
                <b style="padding-right: 5px;font-size: 14px;">计划重量：{{ row2.chart2.chartLine_data.data2 }}kg</b>
              </div>
              <div id="row2chartLine2" style="height: 150px;" />
            </div>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content" style="height:500px;overflow: auto;">
            <h4>当前车辆数：{{ row2.carLength }}</h4>
            <div class="car" style="position: relative;">
              <el-row :gutter="20" class="carList">
                <el-col v-for="(item,index) in row2.list" :key="index" :span="8">
                  <div ref="list" class="list" :style="{'background': item.background,'color':item.color}" @click="handleList(index,item)">
                    <el-row :gutter="20">
                      <el-col :span="12" class="list-l">
                        <!-- 车辆/描述 -->
                        <p><span>车辆：</span>{{ item.tname }}</p>
                        <el-tooltip placement="top">
                          <p slot="content">
                            <span v-if="item.inorout == 0">饲料：{{ item.fname }}</span>
                            <span v-if="item.inorout == 1">栏舍：{{ item.fname }}</span>
                          </p>
                          <p>
                            <span v-if="item.inorout == 0">饲料：{{ item.fname }}</span>
                            <span v-if="item.inorout == 1">栏舍：{{ item.fname }}</span>
                          </p>
                        </el-tooltip>
                        <p><span>完成重量：</span>{{ item.doneweight }}</p>
                        <p><span>完成度：</span>{{ item.donerate }}</p>
                      </el-col>
                      <el-col :span="12" class="list-r">
                        <!-- 栏舍/饲料 -->
                        <el-tooltip placement="top">
                          <p slot="content"> <span>描述：</span> {{ item.remark }} </p>
                          <p> <span>描述：</span> {{ item.remark }} </p>
                        </el-tooltip>
                        <p><span>计划重量：</span>{{ item.lweight }}</p>
                        <p><span>剩余重量：</span>{{ item.leftweight }}</p>
                        <p><span>车辆当前载重：</span>{{ item.nowweight }}</p>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12" style="position: relative;">
          <div class="Title">计划统计<span>({{ myDate }})</span></div>

          <div style="background: #fff;height:50px;">
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('row3chartLine1')">导出</el-button>
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleTable('row3chartLine1')">切换表格</el-button>
          </div>
          <div id="row3chartLine1" style="background: #fff;height:350px;" />
          <div v-if="row3.chart1.isTable" class="table" style="position: absolute;width:97%;top:19px;">
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('row3chartLine1')">导出</el-button>
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleChart('row3chartLine1')">切换图表</el-button>
            <el-table
              :key="row3.chart1.table.tableKey"
              v-loading="row3.chart1.table.listLoading"
              element-loading-text="给我一点时间"
              :data="row3.chart1.table.list"
              border
              fit
              highlight-current-row
              style="width: 100%;"
              height="400"
              :row-style="rowStyle"
              :cell-style="cellStyle"
              class="elTable table-fixed"
            >
              <el-table-column label="日期" sortable min-width="110px" align="center" prop="日期" />
              <el-table-column label="计划执行重量（kg）" sortable min-width="110px" align="center" prop="实际量" />
              <el-table-column label="配方理论重量（kg）" sortable min-width="110px" align="center" prop="理论量" />
              <el-table-column label="计划准确率" sortable min-width="110px" align="center" prop="field1" />
              <el-table-column label="计划取消重量（kg）" sortable min-width="110px" align="center" prop="计划取消重量" />
              <el-table-column label="计划准确率（去除取消重量）" sortable min-width="110px" align="center" prop="field3" />
              <el-table-column label="计划正确数" sortable min-width="110px" align="center" prop="正确数" />
              <el-table-column label="计划数" sortable min-width="110px" align="center" prop="计划数" />
              <el-table-column label="计划正确率" sortable min-width="110px" align="center" prop="field2" />
            </el-table>
          </div>
        </el-col>
        <!-- 泌乳牛干物质采食量 -->
        <el-col :span="12" style="position: relative;">
          <div class="Title">泌乳牛干物质采食量<span>({{ myDate }})</span></div>
          <div style="background: #fff;height:50px;">
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('row3chartLine2')">导出</el-button>
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleTable('row3chartLine2')">切换表格</el-button>
          </div>
          <div id="row3chartLine2" style="background: #fff;height:350px;" />
          <div v-if="row3.chart2.isTable" class="table" style="position: absolute;width:97%;top:19px;">
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('row3chartLine2')">导出</el-button>
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleChart('row3chartLine2')">切换图表</el-button>
            <el-table
              :key="row3.chart2.table.tableKey"
              v-loading="row3.chart2.table.listLoading"
              element-loading-text="给我一点时间"
              :data="row3.chart2.table.list"
              border
              fit
              highlight-current-row
              style="width: 100%;"
              height="400"
              :row-style="rowStyle"
              :cell-style="cellStyle"
              class="elTable table-fixed"
            >
              <el-table-column label="日期" sortable min-width="110px" align="center" prop="日期" />
              <el-table-column label="泌乳牛采食量（kg）" sortable min-width="110px" align="center" prop="field1" />
              <el-table-column label="泌乳牛产奶量（kg）" sortable min-width="110px" align="center" prop="field2" />
            </el-table>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px;">
        <!-- 成本统计 -->
        <el-col :span="8" style="position: relative;">
          <div class="Title">成本统计<span>({{ myDate }})</span></div>
          <div style="background: #fff;height:50px;">
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('row4chartLine1')">导出</el-button>
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleTable('row4chartLine1')">切换表格</el-button>
          </div>
          <div id="row4chartLine1" style="background: #fff;height:350px;" />
          <div v-if="row4.chart1.isTable" class="table" style="position: absolute;width:97%;top:19px;">
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('row4chartLine1')">导出</el-button>
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleChart('row4chartLine1')">切换图表</el-button>
            <el-table
              :key="row4.chart1.table.tableKey"
              v-loading="row4.chart1.table.listLoading"
              element-loading-text="给我一点时间"
              :data="row4.chart1.table.list"
              border
              fit
              highlight-current-row
              style="width: 100%;"
              height="400"
              :row-style="rowStyle"
              :cell-style="cellStyle"
              class="elTable table-fixed"
            >
              <el-table-column label="日期" sortable min-width="110px" align="center" prop="日期" />
              <el-table-column label="泌乳牛采食量（kg）" sortable min-width="110px" align="center" prop="field1" />
              <el-table-column label="泌乳牛产奶量（kg）" sortable min-width="110px" align="center" prop="field2" />
            </el-table>
          </div>
        </el-col>
        <el-col :span="8" style="position: relative;">
          <div class="Title">混料实际重量统计<span>({{ myDate }})</span></div>
          <div style="background: #fff;height:50px;">
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('row4chartLine2')">导出</el-button>
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleTable('row4chartLine2')">切换表格</el-button>
          </div>
          <div id="row4chartLine2" style="background: #fff;height:350px;" />
          <div v-if="row4.chart2.isTable" class="table" style="position: absolute;width:97%;top:19px;">
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('row4chartLine2')">导出</el-button>
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleChart('row4chartLine2')">切换图表</el-button>
            <el-table
              :key="row4.chart2.table.tableKey"
              v-loading="row4.chart2.table.listLoading"
              element-loading-text="给我一点时间"
              :data="row4.chart2.table.list"
              border
              fit
              highlight-current-row
              style="width: 100%;"
              height="400"
              :row-style="rowStyle"
              :cell-style="cellStyle"
              class="elTable table-fixed"
            >
              <el-table-column label="日期" sortable min-width="110px" align="center" prop="日期" />
              <el-table-column label="泌乳牛采食量（kg）" sortable min-width="110px" align="center" prop="field1" />
              <el-table-column label="泌乳牛产奶量（kg）" sortable min-width="110px" align="center" prop="field2" />
            </el-table>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="Title">库存预警</div>
          <div id="table" style="height: 400px;background: #fff;">

            <el-table
              :key="row4.table.tableKey"
              v-loading="row4.table.listLoading"
              element-loading-text="给我一点时间"
              :data="row4.table.list"
              border
              fit
              highlight-current-row
              style="width: 100%;background: #fff;"
              height="400"
              :row-style="rowStyle"
              :cell-style="cellStyle"
              class="elTable table-fixed"
            >
              <el-table-column label="序号" type="index" min-width="80px" align="center" />
              <el-table-column label="牧场" min-width="80px" align="center" prop="pasturename" />
              <el-table-column label="饲料名称" min-width="80px" align="center" prop="feedname" />
              <el-table-column label="库存量（kg）" min-width="70px" align="center" prop="stockweight" />
              <el-table-column label="剩余使用天数" min-width="80px" align="center" prop="ldays" />
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { GetDataByName, GetReportform } from '@/api/common'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
import echarts from 'echarts'
import { json2excel } from '@/utils/index.js'

require('echarts/theme/macarons')
export default {
  name: 'GroupDashboard',
  data() {
    return {
      inputDatetime: [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), new Date()],
      myDate: parseTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), '{y}-{m}-{d}') + '-' + parseTime(new Date(), '{y}-{m}-{d}'),
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      date: parseTime(new Date(), '{y}-{m}-{d}'),
      row1: {
        getdataListParm: {
          name: 'getHomepageStrJT',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid')
          }
        },
        listLoading: true,
        list: ''
      },
      row2: {
        chart1: {
          chartLine: null,
          chartLine_data: {}
        },
        chart2: {
          chartLine: null,
          chartLine_data: {}
        },
        list: [],
        total: 0,
        listLoading: true,
        getdataListParmList: {
          name: 'getHomepageLBList',
          page: 1,
          offset: 1,
          pagecount: 3,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid')
          }
        }
      },
      row3: {
        chartDate: [],
        chart1: {
          chartLine: null,
          chartLine_data: {},
          getdataListParm: {
            name: 'getAccuracyAllJH',
            page: 1,
            offset: 1,
            pagecount: 10,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              startTime: parseTime(new Date(), '{y}-{m}-{d}'),
              stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
              inputDatetime: [new Date(), new Date()]
            }
          },
          list: [],
          total: 0,
          listLoading: true,
          isChart: true,
          isTable: false,
          table: {
            tableKey: 1,
            list: [],
            total: 0,
            listLoading: false
          }
        },
        chart2: {
          chartLine: null,
          chartLine_data: {},
          getdataListParm: {
            name: 'getFeedEffMR',
            page: 1,
            offset: 1,
            pagecount: 10,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              startTime: parseTime(new Date(), '{y}-{m}-{d}'),
              stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
              inputDatetime: [new Date(), new Date()]
            }
          },
          list: [],
          total: 0,
          listLoading: true,
          isChart: true,
          isTable: false,
          table: {
            tableKey: 1,
            list: [],
            total: 0,
            listLoading: false
          }
        }
      },
      row4: {
        chartDate: [],
        chart1: {
          chartLine: null,
          chartLine_data: {},
          getdataListParm: {
            name: 'getAccuracyAllJH',
            page: 1,
            offset: 1,
            pagecount: 10,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              startTime: parseTime(new Date(), '{y}-{m}-{d}'),
              stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
              inputDatetime: [new Date(), new Date()]
            }
          },
          list: [],
          total: 0,
          listLoading: true,
          isChart: true,
          isTable: false,
          table: {
            tableKey: 1,
            list: [],
            total: 0,
            listLoading: false
          }
        },
        chart2: {
          chartLine: null,
          chartLine_data: {},
          getdataListParm: {
            name: 'getAccuracActHLJT',
            page: 1,
            offset: 1,
            pagecount: 10,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              startTime: parseTime(new Date(), '{y}-{m}-{d}'),
              stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
              inputDatetime: [new Date(), new Date()]
            }
          },
          list: [],
          total: 0,
          listLoading: true,
          isChart: true,
          isTable: false,
          table: {
            tableKey: 1,
            list: [],
            total: 0,
            listLoading: false
          }
        },
        table: {
          getdataListParm: {
            name: 'getFsWarnListJT',
            page: 1,
            offset: 1,
            pagecount: 5,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid')
            }
          },
          tableKey: 1,
          list: [],
          total: 0,
          listLoading: true,
          temp: {}
        }

      },
      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
      cellStyle: { padding: 0 + 'px' }

    }
  },
  created() {
    this.getRow1List()
    this.getRow2List1()
    this.getRow3List1()
    this.getRow3List2()
    this.getRow4List1()
    this.getRow4List2()
    this.getRow4List3()
  },
  methods: {
    changeDate(item) {
      this.myDate = parseTime(this.inputDatetime[0], '{y}-{m}-{d}') + '-' + parseTime(this.inputDatetime[1], '{y}-{m}-{d}')
      this.getRow1List()
    },
    getRow1List() {
      this.row1.listLoading = true
      this.row1.getdataListParm.parammaps.startTime = parseTime(this.inputDatetime[0], '{y}-{m}-{d}')
      this.row1.getdataListParm.parammaps.stopTime = parseTime(this.inputDatetime[1], '{y}-{m}-{d}')
      GetDataByName(this.row1.getdataListParm).then(response => {
        console.log('row1数据', response.data.list)
        if (response.data.list !== null) {
          for (let i = 0; i < response.data.list.length; i++) {
            if (response.data.list[i].rateAvg == undefined) {
              this.$set(response.data.list[i], 'rateAvg', '')
            }
            if (response.data.list[i].rateMAX == undefined) {
              this.$set(response.data.list[i], 'rateMAX', '')
            }
            if (response.data.list[i].rateMIN == undefined) {
              this.$set(response.data.list[i], 'rateMIN', '')
            }
          }
          this.row1.list = response.data.list
          this.row2.chart1.chartLine_data.data1 = parseFloat(response.data.list[0].doneTimes)
          this.row2.chart1.chartLine_data.data2 = parseFloat(response.data.list[0].planTimes)
          this.row2.chart2.chartLine_data.data1 = parseFloat(response.data.list[0].doneWeight)
          this.row2.chart2.chartLine_data.data2 = parseFloat(response.data.list[0].planWeight)
          this.roadRow1ChartLine1(this.row2.chart1.chartLine_data)
          this.roadRow1ChartLine2(this.row2.chart2.chartLine_data)
        } else {
          this.row1.list.data1.monRateHL = ''
          this.row1.list.data1.monRateSL = ''
          this.row1.list.data1.monRateSLR = ''
          this.row1.list.data1.yesRateHL = ''
          this.row1.list.data1.yesRateSL = ''
          this.row1.list.data1.yesRateSLR = ''
          this.row1.list.data1.temtime = ''
          this.row1.list.data1.montime = ''
          this.row2.chart1.chartLine_data.data1 = ''
          this.row2.chart1.chartLine_data.data2 = ''
          this.row2.chart2.chartLine_data.data1 = ''
          this.row2.chart2.chartLine_data.data2 = ''
        }
        setTimeout(() => {
          this.row1.listLoading = false
        }, 100)
      })
    },
    // 今日计划统计-完成车次
    roadRow1ChartLine1(chartLine_data) {
      console.log(chartLine_data)
      if (this.row2.chart1.chartLine != null) {
        this.row2.chart1.chartLine.dispose()
      }
      this.row2.chart1.chartLine = echarts.init(document.getElementById('row2chartLine1'))
      var option = {
      // 标题组件，包含主标题和副标题
        title: {
          show: true,
          x: 'center',
          textStyle: {
            fontSize: '15',
            color: 'green',
            fontWeight: 'bold'
          }
        },
        //  提示框组件
        tooltip: {
          // 是否显示提示框组件，包括提示框浮层和 axisPointe
          show: false,
          // 触发类型: item:数据项触发，axis：坐标轴触发
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [{
          // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
          name: '任务进度',
          type: 'pie',
          // 饼图的半径，数组的第一项是内半径，第二项是外半径
          radius: ['80%', '70%'],
          // 是否启用防止标签重叠策略，默认开启
          avoidLabelOverlap: false,
          hoverAnimation: false,
          // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{
            value: chartLine_data.data1, // 数据值
            name: '完成率', // 数据项名称
            selected: false, // 该数据项是否被选中
            // 单个扇区的标签配置
            label: {
              normal: {
                show: true, // 是显示标签
                position: 'center',
                fontSize: 20,
                // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
                formatter: '{b}\n{d}%'
              }
            }
          }, {
            value: chartLine_data.data2 - chartLine_data.data1,
            label: {
              normal: {
                show: false

              }
            }
          }]
        }],
        color: ['#409EFF', '#B7DBFF']
      }
      this.row2.chart1.chartLine.setOption(option)
      window.onresize = function() {
        this.row2.chart1.chartLine.resize()
      }
    },
    // 今日计划统计-完成重量
    roadRow1ChartLine2(chartLine_data) {
      if (this.row2.chart2.chartLine != null) {
        this.row2.chart2.chartLine.dispose()
      }
      this.row2.chart2.chartLine = echarts.init(document.getElementById('row2chartLine2'))
      var option = {
      // 标题组件，包含主标题和副标题
        title: {
          show: true,
          x: 'center',
          textStyle: {
            fontSize: '15',
            color: 'green',
            fontWeight: 'bold'
          }
        },
        //  提示框组件
        tooltip: {
          // 是否显示提示框组件，包括提示框浮层和 axisPointe
          show: false,
          // 触发类型: item:数据项触发，axis：坐标轴触发
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [{
          // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
          name: '任务进度',
          type: 'pie',
          // 饼图的半径，数组的第一项是内半径，第二项是外半径
          radius: ['80%', '70%'],
          // 是否启用防止标签重叠策略，默认开启
          avoidLabelOverlap: false,
          hoverAnimation: false,
          // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{
            value: chartLine_data.data1, // 数据值
            name: '完成率', // 数据项名称
            selected: false, // 该数据项是否被选中
            // 单个扇区的标签配置
            label: {
              normal: {
                show: true, // 是显示标签
                position: 'center',
                fontSize: 20,
                // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
                formatter: '{b}\n{d}%'
              }
            }
          }, {
            value: chartLine_data.data2 - chartLine_data.data1,
            label: {
              normal: {
                show: false

              }
            }
          }]
        }],
        color: ['#409EFF', '#B7DBFF']
      }
      this.row2.chart2.chartLine.setOption(option)
      window.onresize = function() {
        this.row2.chart2.chartLine.resize()
      }
    },

    // 今日执行计划监控
    getRow2List1() {
      this.row2.listLoading2 = true
      GetDataByName(this.row2.getdataListParmList).then(response => {
        if (response.data.list !== null) {
          response.data.list = [
            { 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机' },
            { 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机2' },
            { 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机3' },
            { 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机4' },
            { 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机4' },
            { 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机4' },
            { 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机4' },
            { 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机4' },
            { 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机4' },
            { 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机4' },
            { 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机5' }
          ]
          for (let i = 0; i < response.data.list.length; i++) {
            this.$set(response.data.list[i], 'color', '#fff')
            this.$set(response.data.list[i], 'background', '#7ac3ec')
          }

          this.row2.list = response.data.list
          this.row2.carLength = response.data.total
        } else {
          this.carLength = 0
        }
        setTimeout(() => {
          this.row2.listLoading2 = false
        }, 100)
      })
    },

    handleTable(item) {
      console.log(item)
      if (item == 'row3chartLine1') {
        console.log('计划统计表格')
        this.row3.chart1.isTable = true
        this.row3.chart1.isChart = false
      } else if (item == 'row3chartLine2') {
        console.log('泌乳牛采食量表格')
        this.row3.chart2.isTable = true
        this.row3.chart2.isChart = false
      } else if (item == 'row4chartLine1') {
        console.log('成本统计表格')
        this.row4.chart1.isTable = true
        this.row4.chart1.isChart = false
      } else if (item == 'row4chartLine2') {
        console.log('混料实际重量统计表格')
        this.row4.chart2.isTable = true
        this.row4.chart2.isChart = false
      }
    },
    handleChart(item) {
      console.log(item)
      // 显示切换图表
      if (item == 'row3chartLine1') {
        console.log('计划统计图表')
        this.row3.chart1.isTable = false
        this.row3.chart1.isChart = true
      } else if (item == 'row3chartLine2') {
        console.log('泌乳牛采食量图表')
        this.row3.chart2.isTable = false
        this.row3.chart2.isChart = true
      } else if (item == 'row4chartLine1') {
        console.log('成本统计图表')
        this.row4.chart1.isTable = false
        this.row4.chart1.isChart = true
      } else if (item == 'row4chartLine2') {
        console.log('混料实际重量统计图表')
        this.row4.chart2.isTable = false
        this.row4.chart2.isChart = true
      }
    },
    handleExport(item) {
      console.log(item)
      // 显示切换图表
      if (item == 'row3chartLine1') {
        console.log('计划统计')
        var excelDatasTabChart1 = [
          {
            tHeader: ['日期', '计划执行重量（kg）', '配方理论重量（kg）', '计划准确率', '计划取消重量（kg）', '计划准确率（去除取消重量）', '计划正确数', '计划数', '计划正确率'],
            filterVal: ['日期', '实际量', '理论量', 'field1', '计划取消重量', 'field3', '正确数', '计划数', 'field2'],
            tableDatas: this.row3.chart1.table.list,
            sheetName: '计划统计'
          }
        ]
        json2excel(excelDatasTabChart1, '计划统计', true, 'xlsx')
      }
    },
    // 计划统计
    getRow3List1() {
      this.row3.chart1.listLoading = true
      GetReportform(this.row3.chart1.getdataListParm).then(response => {
        console.log('计划统计', response.data.list)
        if (response.data.list !== null) {
          this.row3.chart1.table.list = response.data.data
          this.row3.chart1.chartLine_data = response.data.list
          this.row3.chart1.chartLine_data = {
            'data1': ['1牧', '2牧', '3牧', '4牧', '5牧', '6牧', '7牧', '8牧', '9牧', '10牧', '11牧', '12牧'], // x轴
            'data2': [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], // 计划准确率
            'data3': [2.6, 5.9, 9.0, 30, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], // 计划正确率
            'data4': [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]// 计划准确率（去除取消重量）
          }
          this.row3.chart1.total = response.data.total
          this.roadRow3ChartLine1(this.row3.chart1.chartLine_data)
        } else {
          this.row3.chart1.list = []
        }
        setTimeout(() => {
          this.row3.chart1.listLoading = false
        }, 100)
      })
    },
    roadRow3ChartLine1(chartLine_data) {
      if (this.row3.chart1.chartLine != null) {
        this.row3.chart1.chartLine.dispose()
      }
      this.row3.chart1.chartLine = echarts.init(document.getElementById('row3chartLine1'))
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['计划准确率', '计划正确率', '计划准确率（去除取消重量）']
        },
        xAxis: [{ type: 'category', data: chartLine_data.data1, axisPointer: { type: 'shadow' }}],
        yAxis: [{ type: 'value', name: '百分比', min: 0, max: 100, interval: 20, axisLabel: { formatter: '{value}' }}],
        series: [{ name: '计划准确率', type: 'bar', itemStyle: { normal: { color: '#7ecf51' }},
          data: chartLine_data.data2,
          markLine: {
            data: [{ type: 'average' }],
            symbol: ['none', 'none'],
            position: 'insideTopCenter',
            itemStyle: {
              normal: {
                lineStyle: { type: 'dotted', width: 3 },
                label: { show: true, position: 'middle', formatter: '' }
              }
            },
            large: true,
            effect: { show: false, loop: true, period: 0, scaleSize: 2, color: null, shadowColor: null, shadowBlur: null }
          }
        },
        {
          name: '计划正确率',
          type: 'bar',
          itemStyle: {
            normal: {
              color: '#ff6600'
            }
          },
          data: chartLine_data.data3,
          markLine: {
            data: [{ type: 'average' }],
            symbol: ['none', 'none'],
            position: 'insideTopCenter',
            itemStyle: {
              normal: {
                lineStyle: { type: 'dotted', width: 3 },
                label: { show: true, position: 'middle', formatter: '' }
              }
            },
            large: true,
            effect: { show: false, loop: true, period: 0, scaleSize: 2, color: null, shadowColor: null, shadowBlur: null }
          }
        },
        {
          name: '计划准确率（去除取消重量）',
          type: 'bar',
          itemStyle: {
            normal: {
              color: '#61a5e8'
            }
          },
          data: chartLine_data.data4,
          markLine: {
            data: [{ type: 'average' }],
            symbol: ['none', 'none'],
            position: 'insideTopCenter',
            itemStyle: {
              normal: {
                lineStyle: { type: 'dotted', width: 3 },
                label: { show: true, position: 'middle', formatter: '' }
              }
            },
            large: true,
            effect: { show: false, loop: true, period: 0, scaleSize: 2, color: null, shadowColor: null, shadowBlur: null }
          }
        }
        ]
      }
      this.row3.chart1.chartLine.setOption(option)
      window.onresize = function() {
        this.row3.chart1.chartLine.resize()
      }
    },
    // 泌乳牛干物质采食量
    getRow3List2() {
      this.row3.chart2.listLoading = true
      GetReportform(this.row3.chart2.getdataListParm).then(response => {
        console.log('泌乳牛采食量数据', response.data.list)
        if (response.data.list !== null) {
          this.row3.chart2.table.list = response.data.data
          this.row3.chart2.chartLine_data = response.data.list
          this.row3.chart2.chartLine_data = {
            data1: ['1牧', '2牧', '3牧'], // 折线
            data2: ['12/01', '12/02', '12/03'], // X轴
            data3: [
              { data: [1.5, 1.2, 1.7, 1.2] },
              { data: [1.7, 0.8, 1.2, 1.8] },
              { data: [1.3, 2.2, 1.9, 1.4] }
            ]// 折线对应数据
          }
          this.row3.chart2.total = response.data.total
          this.roadRow3ChartLine2(this.row3.chart2.chartLine_data)
        } else {
          this.row3.chart2.list = []
        }
        setTimeout(() => {
          this.row3.chart2.listLoading = false
        }, 100)
      })
    },
    roadRow3ChartLine2(chartLine_data) {
      if (this.row3.chart2.chartLine != null) {
        this.row3.chart2.chartLine.dispose()
      }
      this.row3.chart2.chartLine = echarts.init(document.getElementById('row3chartLine2'))
      var option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: chartLine_data.data1,
          right: 10
        },
        grid: {
          top: '20%',
          left: '5%',
          right: '8%',
          containLabel: true
        },
        toolbox: {
          show: true,
          right: '2%',
          feature: {}
        },
        xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '日期' },
        yAxis: {
          type: 'value', name: 'kg', axisLabel: { formatter: '{value}' }
        },
        series: (function() {
          var serie = []
          for (var i = 0; i < chartLine_data.data3.length; i++) {
            var item = {
              name: chartLine_data.data1[i],
              type: 'line',
              data: chartLine_data.data3[i].data
            }
            serie.push(item)
          }
          return serie
        }())
      }
      this.row3.chart2.chartLine.setOption(option)
      window.onresize = function() {
        this.row3.chart2.chartLine.resize()
      }
    },
    // 成本统计
    getRow4List1() {
      this.row4.chart1.listLoading = true
      GetReportform(this.row4.chart1.getdataListParm).then(response => {
        console.log('成本统计数据', response.data.list)
        if (response.data.list !== null) {
          this.row4.chart1.table.list = response.data.data
          this.row4.chart1.chartLine_data = response.data.list
          this.row4.chart1.chartLine_data = {
            data1: ['1牧', '2牧', '3牧'], // 折线
            data2: ['12/01', '12/02', '12/03'], // X轴
            data3: [
              { data: [1.5, 1.2, 1.7, 1.2] },
              { data: [1.7, 0.8, 1.2, 1.8] },
              { data: [1.3, 2.2, 1.9, 1.4] }
            ]// 折线对应数据
          }
          this.row4.chart1.total = response.data.total
          this.roadRow4ChartLine1(this.row4.chart1.chartLine_data)
        } else {
          this.row4.chart1.list = []
        }
        setTimeout(() => {
          this.row4.chart1.listLoading = false
        }, 100)
      })
    },
    roadRow4ChartLine1(chartLine_data) {
      if (this.row4.chart1.chartLine != null) {
        this.row4.chart1.chartLine.dispose()
      }
      this.row4.chart1.chartLine = echarts.init(document.getElementById('row4chartLine1'))
      var option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: chartLine_data.data1,
          right: 10
        },
        grid: {
          top: '20%',
          left: '5%',
          right: '8%',
          containLabel: true
        },
        toolbox: {
          show: true,
          right: '2%',
          feature: {}
        },
        xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '日期' },
        yAxis: {
          type: 'value', name: 'kg', axisLabel: { formatter: '{value}' }
        },
        series: (function() {
          var serie = []
          for (var i = 0; i < chartLine_data.data3.length; i++) {
            var item = {
              name: chartLine_data.data1[i],
              type: 'line',
              data: chartLine_data.data3[i].data
            }
            serie.push(item)
          }
          return serie
        }())
      }
      this.row4.chart1.chartLine.setOption(option)
      window.onresize = function() {
        this.row4.chart1.chartLine.resize()
      }
    },
    // 混料实际重量统计
    getRow4List2() {
      this.row4.chart2.listLoading = true
      GetReportform(this.row4.chart2.getdataListParm).then(response => {
        console.log('混料实际重量统计数据', response.data.list)
        if (response.data.list !== null) {
          this.row4.chart2.table.list = response.data.data
          this.row4.chart2.chartLine_data = response.data.list
          // this.row4.chart2.chartLine_data = {
          //   data1: ['1牧', '2牧', '3牧'], // 折线
          //   data2: ['12/01', '12/02', '12/03'], // X轴
          //   data3: [
          //     { data: [1.5, 1.2, 1.7, 1.2] },
          //     { data: [1.7, 0.8, 1.2, 1.8] },
          //     { data: [1.3, 2.2, 1.9, 1.4] }
          //   ]// 折线对应数据
          // }
          this.row4.chart2.total = response.data.total
          this.roadRow4ChartLine2(this.row4.chart2.chartLine_data)
        } else {
          this.row4.chart2.list = []
        }
        setTimeout(() => {
          this.row4.chart2.listLoading = false
        }, 100)
      })
    },
    roadRow4ChartLine2(chartLine_data) {
      if (this.row4.chart2.chartLine != null) {
        this.row4.chart2.chartLine.dispose()
      }
      this.row4.chart2.chartLine = echarts.init(document.getElementById('row4chartLine2'))
      var option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: chartLine_data.data1,
          right: 10
        },
        grid: {
          top: '20%',
          left: '5%',
          right: '8%',
          containLabel: true
        },
        toolbox: {
          show: true,
          right: '2%',
          feature: {}
        },
        xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '日期' },
        yAxis: {
          type: 'value', name: 'kg', axisLabel: { formatter: '{value}' }
        },
        series: (function() {
          var serie = []
          for (var i = 0; i < chartLine_data.data3.length; i++) {
            var item = {
              name: chartLine_data.data1[i],
              type: 'line',
              data: chartLine_data.data3[i].data
            }
            serie.push(item)
          }
          return serie
        }())
      }
      this.row4.chart2.chartLine.setOption(option)
      window.onresize = function() {
        this.row4.chart2.chartLine.resize()
      }
    },
    getRow4List3() {
      this.row4.table.listLoading = true
      GetDataByName(this.row4.table.getdataListParm).then(response => {
        console.log('库存预警table数据', response.data.list)
        if (response.data.list !== null) {
          this.row4.table.list = response.data.list
          this.row4.table.total = response.data.total
        } else {
          this.row4.table.list = []
        }
        setTimeout(() => {
          this.row4.table.listLoading = false
        }, 100)
      })
    }

  }
}
</script>

<style lang="scss" scoped>
  .Title{
    padding-left: 10px;border-radius: 10px;margin-top: 20px;background: #fff;height:40px;font-size:20px;line-height:40px;text-align: left;font-weight: 600;
  }
  .dashboard-editor-container {
    background-color: #F4F4F4;
    min-height: 100vh;
  }
  .bottom{
    padding:0 30px;
    h4{text-align: right;}
    .grid-content{
      background: #fff;height: 125px;
      border-radius: 10px;
    }
    .one{
      border: 1px solid #82CBB3;height: 125px;
      .Left{
        float: left;
        width: 65px;
        text-align: center;
        i{font-size: 36px;color:#82CBB3;line-height: 125px;}
      }
      .Right{
        float: left;
        margin-top:15px;
        height: 60px;
        font-weight: 600;
        font-size: 14px;
        line-height: 30px;
        span{
          display: inline-block;
          width: 130px;
          text-align: right;
        }
      }
    }
    .two{
      border: 1px solid #FF9900;
      .Left{
        float: left;
        width: 65px;
        text-align: center;
        i{font-size: 36px;color:#FF9900;line-height: 125px;}
      }
      .Right{
        float: left;
        margin-top:15px;
        height: 60px;
        font-weight: 600;
        font-size: 14px;
        line-height: 30px;
        span{
          display: inline-block;
          width: 130px;
          text-align: right;
        }
      }
    }
    .three{
      border: 1px solid #0099FF;
      .Left{
        float: left;
        width: 65px;
        text-align: center;
        i{font-size: 36px;color:#0099FF;line-height: 125px;}
      }
      .Right{
        float: left;
        height: 60px;
        font-weight: 600;
        font-size: 14px;
        line-height: 30px;
        margin-top:15px;
        span{
          display: inline-block;
          width: 130px;
          text-align: right;
        }
      }
    }
    .four{
      border: 1px solid #FF5C5C;
      .Left{
        float: left;
        width: 55px;
        text-align: center;
        i{font-size: 36px;color:#FF5C5C;line-height: 125px;}
      }
      .Right{
        float: left;
        flex: 1;
        height: 60px;
        font-weight: 600;
        font-size: 14px;
        line-height: 30px;
        margin-top:15px;
        span{
          display: inline-block;
          width: 150px;
          text-align: right;
        }
      }
    }
    .car{
        width:95%;height:150px;margin: 0 auto;
         display:flex;
        display: -webkit-flex;
        -webkit-flex-direction:row;
        i{font-size: 50px;width:50px;display: block;line-height: 150px;}
        .carList{
          flex:1;height: 130px;
          .list{
            height: 130px;color: #fff;margin-bottom: 20px;
            // box-shadow: #000 0px 0px 10px;
            // border-radius: 10px;
            .list-l{
              p{
                padding-left:10px;font-size:13px;line-height: 16px; text-overflow: ellipsis;white-space:nowrap; overflow:hidden;
              }
            }
            .list-r{
              p{
                font-size:13px;line-height: 16px;text-overflow: ellipsis;white-space:nowrap; overflow:hidden;
              }
            }
          }
        }
      }

  }
</style>