tmr-admin/.svn/pristine/8d/8d5897ec01e221f00fc9ac7974a94267fb5bcb9a.svn-base

<template>
  <div class="dashboard-editor-container">
    <div style="background: #F4F4F4;height: 10px;" />
    <div v-if="news==1" style="display:none;" class="news"><b>消息提醒:</b>撒料计划未分配完善，请及时进行计划分配</div>
    <div v-if="news==2" style="display:none;" class="news"><b>消息提醒:</b>预混计划未分配完善，请及时进行计划分配</div>
    <div v-if="news==3" style="display:none;" class="news"><b>消息提醒:</b>剩料计划未分配完善，请及时进行计划分配</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.yesRateHL }}<br>
              <span>近30天混料准确率：</span>{{ row1.list.monRateHL }}
            </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.yesRateSL }}<br>
              <span>近30天撒料准确率：</span>{{ row1.list.monRateSL }}
            </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.yesRateSLR }}<br>
              <span>近30天撒料正确率：</span>{{ row1.list.monRateSLR }}
            </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>昨日撒料偏差：</span><span v-if="row1.list.temtime !== ''">{{ row1.list.temtime }} min</span><br>
              <span>近30天撒料偏差：</span><span v-if="row1.list.montime !== ''">{{ row1.list.montime }} min</span>
            </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;">
              <!-- <div class="Title">今日计划统计</div> -->
              <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" style="margin-top:-20px;">
          <div class="grid-content" style="height:500px;">
            <div style="height:350px;">
              <div style="font-size:14px;color:#666;margin:0 auto;position: relative;">
                <span style="line-height:30px;position:absolute;right:190px;top:30px;"><i class="el-icon-caret-top" style="color:#ff3131;line-height:30px;font-size:30px;" /><b style="line-height:32px;">开始重量</b></span>
                <span style="line-height:30px;position:absolute;right:100px;top:30px;"><i class="el-icon-caret-top" style="color:#61a5e8;line-height:30px;font-size:30px;" /><b style="line-height:32px;">结束重量</b></span>
              </div>
              <div class="Title">实时监控</div>

              <div id="row2chartLine3" style="height: 90%;" />
            </div>
            <div class="car" style="position: relative;">
              <p style="position: absolute;left:50px;top:-50px;">当前车辆数：3</p>
              <i ref="left" class="el-icon-arrow-left" @click="handleLeft" />
              <el-row :gutter="20" class="carList">
                <el-col v-for="(item,index) in list" :key="index" :span="8">
                  <div ref="list" class="list" :style="{'background': item.background,'color':item.color}" @mouseover="mouseOver" @mouseleave="mouseLeave" @click="handleList(index,item.id)">
                    <el-row :gutter="20">
                      <el-col :span="12" class="list-l">
                        <!-- 车辆/描述 -->
                        <p><span>车辆：</span>{{ item.A1 }}</p>
                        <el-tooltip placement="top">
                          <p slot="content">
                            <span v-if="item.states == 1">饲料：{{ item.A2 }}</span>
                            <span v-if="item.states == 2">栏舍：{{ item.A2 }}</span>
                          </p>
                          <p>
                            <span v-if="item.states == 1">饲料：{{ item.A2 }}</span>
                            <span v-if="item.states == 2">栏舍：{{ item.A2 }}</span>
                          </p>
                        </el-tooltip>
                        <p><span>完成重量：</span>{{ item.A3 }}</p>
                        <p><span>完成度：</span>{{ item.A4 }}</p>
                      </el-col>
                      <el-col :span="12" class="list-r">
                        <!-- 栏舍/饲料 -->
                        <el-tooltip placement="top">
                          <p slot="content"> <span>描述：</span> {{ item.A5 }} </p>
                          <p> <span>描述：</span> {{ item.A5 }} </p>
                        </el-tooltip>
                        <p><span>计划重量：</span>{{ item.A6 }}</p>
                        <p><span>剩余重量：</span>{{ item.A7 }}</p>
                        <p><span>车辆已载重：</span>{{ item.A8 }}</p>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
              <i ref="right" class="el-icon-arrow-right" @click="handleRight" />
            </div>
          </div>

        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 计划统计 -->
        <el-col :span="12" style="position: relative;">
          <div class="Title">计划统计</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">泌乳牛采食量</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">
        <!-- 成本统计 -->
        <el-col :span="8">
          <div class="Title">成本统计</div>
          <div id="row4chartLine1" style="background: #fff;height:400px;" />
        </el-col>
        <!-- 出库统计 -->
        <el-col :span="8">
          <div class="Title">出库统计</div>
          <div id="row4chartLine2" style="background: #fff;height:400px;" />
        </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="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>
            <!-- <span style="line-height: 50px;color:#82CBB3;text-align: center;width: 100%;display: inline-block;cursor:pointer;" @click="handleMore">查看更多</span> -->
          </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')
var myKey = 0
export default {
  name: 'DashboardEditor',
  data() {
    return {
      date: parseTime(new Date(), '{y}-{m}-{d}'),
      'list': [],
      news: 1,
      row1: {
        getdataListParm: {
          name: 'getHomepageStr',
          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: {}
        },
        chart3: {
          chartLine: null,
          chartLine_data: {},
          getdataListParm: {
            name: 'getBarmilkList',
            page: 1,
            offset: 1,
            pagecount: 3,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              enable: ''
            }
          },
          list: [],
          total: 0,
          listLoading: true,
          pageNum: '',
          pages: '',
          getdataListParmList: {
            name: 'getBarmilkList',
            page: 1,
            offset: 1,
            pagecount: 3,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              enable: ''
            }
          },
          list2: [],
          total2: 0,
          listLoading2: true,
          pageNum2: '',
          pages2: ''
        }
      },
      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: {
        chart1: {
          chartLine: null,
          chartLine_data: {},
          getdataListParm: {
            name: 'getBarmilkList',
            page: 1,
            offset: 1,
            pagecount: 10,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              enable: ''
            }
          },
          list: [],
          total: 0,
          listLoading: true
        },
        chart2: {
          chartLine: null,
          chartLine_data: {},
          getdataListParm: {
            name: 'getBarmilkList',
            page: 1,
            offset: 1,
            pagecount: 10,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              enable: ''
            }
          },
          list: [],
          total: 0,
          listLoading: true
        },
        table: {
          getdataListParm: {
            name: 'getFsWarnList',
            page: 1,
            offset: 1,
            pagecount: 5,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid')
            }
          },
          tableKey: 1,
          list: [],
          total: 0,
          listLoading: true,
          temp: {}
        }
      },

      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' },
      timer: ''
    }
  },
  created() {
    this.getTimeFn()
    this.getList()
    this.getChart3List()

    this.getChart4()
    this.getChart5()
    this.getChart6()
    this.getChart7()
    this.getTable8()
  },
  mounted() {
    const that = this
    let num = 0
    // 创建并执行定时器
    this.timer = setInterval(() => {
      // 当num等于100时清除定时器
      if (num >= 3) {
        // clearInterval(that.timer)
        num = 0
        console.log('关闭了定时器===')
      }
      myKey = num
      if (myKey == 0) {
        this.$refs.list[0].style.background = '#7ac3ec'
        this.$refs.list[0].style.color = '#f7f941'
        this.$refs.list[1].style.background = '#7ac3ec'
        this.$refs.list[1].style.color = '#fff'
        this.$refs.list[2].style.background = '#7ac3ec'
        this.$refs.list[2].style.color = '#fff'
        this.row2.chart3.chartLine_data = {
          data1: ['06:34:10', '06:34:11', '06:34:12', '06:34:13', '06:34:14', '06:34:14', '06:34:15', '06:34:16', '06:34:17', '06:34:18', '06:34:19', '06:34:20', '06:34:21', '06:34:22', '06:34:23', '06:34:29', '06:34:44', '06:34:59', '06:35:14', '06:35:29', '06:35:44', '06:35:59', '06:36:14', '06:36:29', '06:36:44', '06:36:59', '06:37:14', '06:37:28', '06:37:29', '06:37:44', '06:37:59', '06:38:14', '06:38:29', '06:38:44', '06:38:59', '06:38:59', '06:39:14', '06:39:29', '06:39:44', '06:39:59', '06:40:08', '06:40:14', '06:40:29', '06:40:44', '06:40:59', '06:41:14', '06:41:29', '06:41:40', '06:41:44', '06:41:59', '06:42:14', '06:42:29', '06:42:44', '06:42:59', '06:43:09', '06:43:14', '06:43:29', '06:43:44', '06:43:59', '06:44:14', '06:44:29', '06:44:44'],
          data2: [141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 437.73, 437.73, 437.73, 437.73, 437.73, 437.73, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6],
          data3: [-8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -11, -9, -4, -8, -10, -8, -8, 0, -1, 32, 88, 142, 143, 141, 154, 215, 250, 256, 338, 337, 329, 325, 409, 420, 438, 434, 432, 447, 439, 496, 655, 680, 678, 670, 669, 741, 752, 924, 958, 962, 955, 961, 956, 956, 968],
          data4: [
            ['06:34:10', -8],
            ['06:37:28', 142],
            ['06:37:29', 143],
            ['06:38:59', 338],
            ['06:38:59', 337],
            ['06:40:08', 438],
            ['06:40:08', 438],
            ['06:41:40', 680],
            ['06:41:44', 678],
            ['06:43:09', 958],
            ['06:43:09', 958]
          ]
        }
        this.roadChartLine3(this.row2.chart3.chartLine_data)
      } else if (myKey == 1) {
        this.$refs.list[0].style.background = '#7ac3ec'
        this.$refs.list[0].style.color = '#fff'
        this.$refs.list[myKey].style.background = '#7ac3ec'
        this.$refs.list[myKey].style.color = '#f7f941'
        this.$refs.list[2].style.background = '#7ac3ec'
        this.$refs.list[2].style.color = '#fff'
        this.row2.chart3.chartLine_data = {
          data1: ['06:43:09', '06:43:14', '06:43:29', '06:43:44', '06:43:59', '06:44:14', '06:44:29', '06:44:44', '06:44:44', '06:44:59', '06:45:14', '06:45:30', '06:45:45', '06:46:00', '06:46:15', '06:46:30', '06:46:45', '06:47:00', '06:47:15', '06:47:30', '06:47:40', '06:47:45', '06:48:00', '06:48:15', '06:48:30', '06:48:45', '06:49:00', '06:49:15', '06:49:20', '06:49:30', '06:49:45', '06:50:00', '06:50:15', '06:50:30', '06:50:45', '06:51:00', '06:51:15', '06:51:30', '06:51:45', '06:52:00', '06:52:15', '06:52:30', '06:52:45', '06:53:00', '06:53:14', '06:53:15', '06:53:30', '06:53:45', '06:54:00', '06:54:15', '06:54:30', '06:54:45', '06:55:00', '06:55:15', '06:55:30'],
          data2: [959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38],

          data3: [958, 962, 955, 961, 956, 956, 968, 1100, 1099, 1102, 1115, 1103, 1217, 1266, 1681, 1919, 1968, 2139, 2426, 2479, 2486, 2489, 2480, 2502, 2498, 2769, 3097, 3224, 3236, 3242, 3238, 3282, 3320, 3369, 3411, 3458, 3499, 3540, 3580, 3632, 3668, 3708, 3753, 3798, 3830, 3830],
          data4: [
            ['06:44:44', 1100],
            ['06:44:44', 1099],
            ['06:47:40', 2486],
            ['06:47:45', 2489],
            ['06:49:20', 3236],
            ['06:49:20', 3236],
            ['06:53:14', 3830],
            ['06:53:15', 3830]
          ]
        }
        this.roadChartLine3(this.row2.chart3.chartLine_data)
      } else if (myKey == 2) {
        this.$refs.list[0].style.background = '#7ac3ec'
        this.$refs.list[0].style.color = '#fff'
        this.$refs.list[1].style.background = '#7ac3ec'
        this.$refs.list[1].style.color = '#fff'
        this.$refs.list[myKey].style.background = '#7ac3ec'
        this.$refs.list[myKey].style.color = '#f7f941'
        this.row2.chart3.chartLine_data = {
          data1: ['06:53:14', '06:53:15', '06:53:30', '06:53:45', '06:54:00', '06:54:15', '06:54:30', '06:54:45', '06:55:00', '06:55:15', '06:55:30', '06:55:45', '06:56:00', '06:56:15', '06:56:30', '06:56:45', '06:57:00', '06:57:15', '06:57:30', '06:57:45', '06:58:00', '06:58:16', '06:58:31', '06:58:46', '06:59:01', '06:59:03', '06:59:16', '06:59:31', '06:59:46', '07:00:01', '07:00:16', '07:00:31', '07:00:46', '07:01:01', '07:01:16', '07:01:31', '07:01:46', '07:02:01', '07:02:01', '07:02:16', '07:02:31', '07:02:46', '07:03:01', '07:03:16', '07:03:31', '07:03:46', '07:04:01', '07:04:16', '07:04:31', '07:04:46', '07:05:01', '07:05:16', '07:05:20', '07:05:31', '07:05:46', '07:06:01', '07:06:16', '07:06:31', '07:06:46', '07:07:01', '07:07:10', '07:07:16', '07:07:31', '07:07:46', '07:08:01', '07:08:16', '07:08:31', '07:08:46', '07:09:01', '07:09:16', '07:09:31', '07:09:46'],
          data2: [3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 351.82, 351.82, 351.82, 351.82, 351.82, 351.82, 351.82, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48],
          data3: [3837, 3840, 3832, 3829, 3842, 3817, 3825, 3822, 3850, 3820, 3830, 3837, 3833, 3830, 3832, 3829, 3814, 3681, 3575, 3423, 3268, 3138, 3036, 3032, 3039, 3032, 3017, 3025, 3036, 2926, 2895, 2696, 2315, 1831, 1379, 1232, 1232, 1227, 1228, 1224, 1225, 1213, 1230, 1209, 1221, 1225, 1231, 1138, 928, 736, 708, 707, 674, 540, 530, 527, 437, 390, 356, 325, 307, 309, 310, 308, 294, 308, 306, 293, 278, 226],
          data4: [
            ['06:59:01', 3036],
            ['06:59:03', 3032],
            ['07:02:01', 1232],
            ['07:02:01', 1232],
            ['07:05:16', 736],
            ['07:05:20', 708],
            ['07:07:10', 356],
            ['07:07:10', 356]
          ]
        }
        this.roadChartLine3(this.row2.chart3.chartLine_data)
      }
      console.log(num++)
    }, 1000000)
  },
  methods: {
    getTimeFn() {
      const that = this
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 20)
      that.row3.chartDate[0] = parseTime(start, '{y}-{m}-{d}')
      that.row3.chartDate[1] = parseTime(end, '{y}-{m}-{d}')
      that.row3.chart1.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
      that.row3.chart1.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
      that.row3.chart1.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
      that.row3.chart1.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')

      that.row3.chart2.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
      that.row3.chart2.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
      that.row3.chart2.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
      that.row3.chart2.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
    },
    getList() {
      this.row1.listLoading = true
      GetDataByName(this.row1.getdataListParm).then(response => {
        console.log('row1数据', response.data.list)
        if (response.data.list !== null) {
          if (response.data.list[0].monRateHL == undefined) { response.data.list[0].monRateHL = '' }
          if (response.data.list[0].monRateSL == undefined) { response.data.list[0].monRateSL = '' }
          if (response.data.list[0].monRateSLR == undefined) { response.data.list[0].monRateSLR = '' }
          if (response.data.list[0].yesRateHL == undefined) { response.data.list[0].yesRateHL = '' }
          if (response.data.list[0].yesRateHL == undefined) { response.data.list[0].yesRateHL = '' }
          if (response.data.list[0].yesRateSL == undefined) { response.data.list[0].yesRateSL = '' }
          if (response.data.list[0].yesRateSLR == undefined) { response.data.list[0].yesRateSLR = '' }
          if (response.data.list[0].temtime == undefined) { response.data.list[0].temtime = '' }
          if (response.data.list[0].montime == undefined) { response.data.list[0].montime = '' }
          this.row1.list = response.data.list[0]
          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.roadChartLine1(this.row2.chart1.chartLine_data)
          this.roadChartLine2(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)
      })
    },
    // 今日计划统计-完成车次
    roadChartLine1(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()
      }
    },
    // 今日计划统计-完成重量
    roadChartLine2(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()
      }
    },

    // 实时监控
    getChart3() {
      this.row2.chart3.listLoading = true
      GetDataByName(this.row2.chart3.getdataListParm).then(response => {
        console.log('实时监控数据', response.data.list)
        if (response.data.list !== null) {
          console.log(this.$refs.list)

          this.$refs.list[myKey].style.background = '#7ac3ec'
          // var evenNumbers = []// 偶数
          // var oddNumbers = []// 奇数
          // for (let i = 0; i < response.data.list.data4.length; i++) {
          //   console.log(response.data.list.data4[i])
          //   if (i == 0) {
          //     oddNumbers.push(response.data.list.data4[i])
          //   } else {
          //     if (i % 2 == 0) {
          //       evenNumbers.push(response.data.list.data4[i])
          //     } else {
          //       oddNumbers.push(response.data.list.data4[i])
          //     }
          //   }
          // }
          // response.data.list.data4 = oddNumbers
          // response.data.list.data5 = evenNumbers
          console.log(this.$refs)
          this.row2.chart3.chartLine_data = {
            data1: ['06:34:10', '06:34:11', '06:34:12', '06:34:13', '06:34:14', '06:34:14', '06:34:15', '06:34:16', '06:34:17', '06:34:18', '06:34:19', '06:34:20', '06:34:21', '06:34:22', '06:34:23', '06:34:29', '06:34:44', '06:34:59', '06:35:14', '06:35:29', '06:35:44', '06:35:59', '06:36:14', '06:36:29', '06:36:44', '06:36:59', '06:37:14', '06:37:28', '06:37:29', '06:37:44', '06:37:59', '06:38:14', '06:38:29', '06:38:44', '06:38:59', '06:38:59', '06:39:14', '06:39:29', '06:39:44', '06:39:59', '06:40:08', '06:40:14', '06:40:29', '06:40:44', '06:40:59', '06:41:14', '06:41:29', '06:41:40', '06:41:44', '06:41:59', '06:42:14', '06:42:29', '06:42:44', '06:42:59', '06:43:09', '06:43:14', '06:43:29', '06:43:44', '06:43:59', '06:44:14', '06:44:29', '06:44:44'],
            data2: [141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 437.73, 437.73, 437.73, 437.73, 437.73, 437.73, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6],
            data3: [-8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -11, -9, -4, -8, -10, -8, -8, 0, -1, 32, 88, 142, 143, 141, 154, 215, 250, 256, 338, 337, 329, 325, 409, 420, 438, 434, 432, 447, 439, 496, 655, 680, 678, 670, 669, 741, 752, 924, 958, 962, 955, 961, 956, 956, 968],
            data4: [
              ['06:34:10', -8],
              ['06:37:28', 142],
              ['06:37:29', 143],
              ['06:38:59', 338],
              ['06:38:59', 337],
              ['06:40:08', 438],
              ['06:40:08', 438],
              ['06:41:40', 680],
              ['06:41:44', 678],
              ['06:43:09', 958],
              ['06:43:09', 958]
            ]
          }
          this.row2.chart3.total = response.data.total
          this.row2.chart3.pageNum = response.data.pageNum
          this.row2.chart3.pages = response.data.pages
          // this.roadChartLine3(this.row2.chart3.chartLine_data)
        } else {
          this.row2.chart3.list = []
        }
        setTimeout(() => {
          this.row2.chart3.listLoading = false
        }, 100)
      })
    },
    roadChartLine3(chartLine_data) {
      if (this.row2.chart3.chartLine != null) {
        this.row2.chart3.chartLine.dispose()
      }
      this.row2.chart3.chartLine = echarts.init(document.getElementById('row2chartLine3'))
      var option = {
        title: {
          text: '',
          subtext: ''
        },
        color: ['#ff3131', '#61a5e8', '#ff3131', '#61a5e8'], // 关键加上这句话，legend的颜色和折线的自定义颜色就一致了
        legend: {
          data: [
            { name: '设计重量', icon: 'rectangle' },
            { name: '实际重量', icon: 'rectangle' },
            { name: '开始重量', icon: 'triangle' },
            { name: '结束重量', icon: 'triangle' }
          ],
          right: '20%',
          textStyle: {
            fontSize: 12,
            color: '#666'
          }
        },
        /* grid:{y:15},*/
        tooltip: {
          trigger: 'axis'
        },
        calculable: true,
        yAxis: [
          {
            type: 'value',
            name: '重量（kg）',
            splitLine: { show: false }, // 去除网格线
            axisLabel: {
              show: true,
              textStyle: {
                color: '#666' // 这里用参数代替了
              }
            }
          }
        ],
        xAxis: [
          {
            type: 'category',
            splitLine: { show: false }, // 去除网格线
            name: '时间',
            data: chartLine_data.data1,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#666' // 这里用参数代替了
              }
            }
          }
        ],
        series: [{
          symbol: 'none',
          name: '实际重量',
          type: 'line',
          // step: 'end',
          data: chartLine_data.data3,
          smooth: true,
          barWidth: '37',
          itemStyle: {
            normal: {
              lineStyle: { color: '#61a5e8' }
            }
          }
        }, {
          symbol: 'none',
          name: '设计重量',
          type: 'line',
          barWidth: '37',
          data: chartLine_data.data2,
          itemStyle: {
            normal: {
              lineStyle: { color: '#61a5e8' }
            }
          }
        }, {
          name: '开始重量',
          symbol: 'triangle',
          symbolSize: 10,
          type: 'scatter',
          data: chartLine_data.data4
        }, {
          name: '结束重量',
          symbol: 'triangle',
          symbolSize: 10,
          type: 'scatter',
          data: chartLine_data.data5
        }]
      }
      this.row2.chart3.chartLine.setOption(option)
      window.onresize = function() {
        this.row2.chart3.chartLine.resize()
      }
    },
    // 图三轮询列表
    getChart3List() {
      this.row2.chart3.listLoading2 = true
      GetDataByName(this.row2.chart3.getdataListParmList).then(response => {
        console.log('实时监控数据', response.data.list)
        this.list = [
          { 'id': 1, 'A1': '1', 'A2': '进口燕麦草，1号苜蓿，棉籽', 'A3': '958kg', 'A4': '99.89%', 'A5': '新配方', 'A6': '959kg', 'A7': '1kg', 'A8': '958kg', states: 1, 'color': '#fff', 'background': '#7ac3ec' },
          { 'id': 2, 'A1': '1', 'A2': '青贮苜蓿，湿储玉米，啤酒糟，青贮玉米，水', 'A3': '2872', 'A4': '99.89%', 'A5': '新配方', 'A6': '2875.14', 'A7': '3.14kg', 'A8': '3830kg', states: 1, 'color': '#fff', 'background': '#7ac3ec' },
          { 'id': 3, 'A1': '1', 'A2': '17号,5号南', 'A3': '3860kg', 'A4': '99.75%', 'A5': '新配方', 'A6': '3869.52', 'A7': '9.52kg', 'A8': '3860kg', states: 2, 'color': '#fff', 'background': '#7ac3ec' }
        ]
        this.carLength = this.list.length
        if (response.data.list !== null) {
          this.row2.chart3.total2 = response.data.total
          this.row2.chart3.pageNum2 = response.data.pageNum
          this.row2.chart3.pages2 = response.data.pages
          this.getChart3()
          if (this.row2.chart3.getdataListParmList.offset == 1) {
            this.$refs.left.style.color = '#ccc'
          } else {
            // this.$refs.left.style.color = '#000'
            this.$refs.left.style.color = '#ccc'
          }
          if (response.data.pageNum == response.data.pages) {
            this.$refs.right.style.color = '#ccc'
          } else {
            // this.$refs.right.style.color = '#000'
            this.$refs.right.style.color = '#ccc'
          }
        } else {
          this.row2.chart3.list2 = []
        }
        setTimeout(() => {
          this.row2.chart3.listLoading2 = false
        }, 100)
      })
    },
    // 向左切换
    handleLeft() {
      console.log('左')
      if (this.row2.chart3.getdataListParmList.offset > 1) {
        this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset - 1
        this.$refs.left.style.color = '#ccc'
        this.$refs.right.style.color = '#000'
      }
    },
    // 向右切换
    handleRight() {
      if (this.row2.chart3.pageNum2 !== this.row2.chart3.pages2) {
        this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset + 1
        this.$refs.left.style.color = '#000'
        this.$refs.right.style.color = '#ccc'
      }
    },
    // 移入
    mouseOver() {
      console.log('移入')
      clearInterval(this.timer)
    },
    // 移除
    mouseLeave() {
      const that = this
      let num = 0
      // 创建并执行定时器
      this.timer = setInterval(() => {
        // 当num等于100时清除定时器
        if (num >= 3) {
          // clearInterval(that.timer)
          num = 0
          console.log('关闭了定时器===')
        }
        myKey = num
        if (myKey == 0) {
          this.$refs.list[0].style.background = '#7ac3ec'
          this.$refs.list[0].style.color = '#f7f941'
          this.$refs.list[1].style.background = '#7ac3ec'
          this.$refs.list[1].style.color = '#fff'
          this.$refs.list[2].style.background = '#7ac3ec'
          this.$refs.list[2].style.color = '#fff'
          this.row2.chart3.chartLine_data = {
            data1: ['06:34:10', '06:34:11', '06:34:12', '06:34:13', '06:34:14', '06:34:14', '06:34:15', '06:34:16', '06:34:17', '06:34:18', '06:34:19', '06:34:20', '06:34:21', '06:34:22', '06:34:23', '06:34:29', '06:34:44', '06:34:59', '06:35:14', '06:35:29', '06:35:44', '06:35:59', '06:36:14', '06:36:29', '06:36:44', '06:36:59', '06:37:14', '06:37:28', '06:37:29', '06:37:44', '06:37:59', '06:38:14', '06:38:29', '06:38:44', '06:38:59', '06:38:59', '06:39:14', '06:39:29', '06:39:44', '06:39:59', '06:40:08', '06:40:14', '06:40:29', '06:40:44', '06:40:59', '06:41:14', '06:41:29', '06:41:40', '06:41:44', '06:41:59', '06:42:14', '06:42:29', '06:42:44', '06:42:59', '06:43:09', '06:43:14', '06:43:29', '06:43:44', '06:43:59', '06:44:14', '06:44:29', '06:44:44'],
            data2: [141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 437.73, 437.73, 437.73, 437.73, 437.73, 437.73, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6],
            data3: [-8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -11, -9, -4, -8, -10, -8, -8, 0, -1, 32, 88, 142, 143, 141, 154, 215, 250, 256, 338, 337, 329, 325, 409, 420, 438, 434, 432, 447, 439, 496, 655, 680, 678, 670, 669, 741, 752, 924, 958, 962, 955, 961, 956, 956, 968],
            data4: [
              ['06:34:10', -8],
              ['06:37:28', 142],
              ['06:37:29', 143],
              ['06:38:59', 338],
              ['06:38:59', 337],
              ['06:40:08', 438],
              ['06:40:08', 438],
              ['06:41:40', 680],
              ['06:41:44', 678],
              ['06:43:09', 958],
              ['06:43:09', 958]
            ]
          }
          this.roadChartLine3(this.row2.chart3.chartLine_data)
        } else if (myKey == 1) {
          this.$refs.list[0].style.background = '#7ac3ec'
          this.$refs.list[0].style.color = '#fff'
          this.$refs.list[myKey].style.background = '#7ac3ec'
          this.$refs.list[myKey].style.color = '#f7f941'
          this.$refs.list[2].style.background = '#7ac3ec'
          this.$refs.list[2].style.color = '#fff'
          this.row2.chart3.chartLine_data = {
            data1: ['06:43:09', '06:43:14', '06:43:29', '06:43:44', '06:43:59', '06:44:14', '06:44:29', '06:44:44', '06:44:44', '06:44:59', '06:45:14', '06:45:30', '06:45:45', '06:46:00', '06:46:15', '06:46:30', '06:46:45', '06:47:00', '06:47:15', '06:47:30', '06:47:40', '06:47:45', '06:48:00', '06:48:15', '06:48:30', '06:48:45', '06:49:00', '06:49:15', '06:49:20', '06:49:30', '06:49:45', '06:50:00', '06:50:15', '06:50:30', '06:50:45', '06:51:00', '06:51:15', '06:51:30', '06:51:45', '06:52:00', '06:52:15', '06:52:30', '06:52:45', '06:53:00', '06:53:14', '06:53:15', '06:53:30', '06:53:45', '06:54:00', '06:54:15', '06:54:30', '06:54:45', '06:55:00', '06:55:15', '06:55:30'],
            data2: [959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38],
            data3: [958, 962, 955, 961, 956, 956, 968, 1100, 1099, 1102, 1115, 1103, 1217, 1266, 1681, 1919, 1968, 2139, 2426, 2479, 2486, 2489, 2480, 2502, 2498, 2769, 3097, 3224, 3236, 3242, 3238, 3282, 3320, 3369, 3411, 3458, 3499, 3540, 3580, 3632, 3668, 3708, 3753, 3798, 3830, 3830],
            data4: [
              ['06:44:44', 1100],
              ['06:44:44', 1099],
              ['06:47:40', 2486],
              ['06:47:45', 2489],
              ['06:49:20', 3236],
              ['06:49:20', 3236],
              ['06:53:14', 3830],
              ['06:53:15', 3830]
            ]
          }
          this.roadChartLine3(this.row2.chart3.chartLine_data)
        } else if (myKey == 2) {
          this.$refs.list[0].style.background = '#7ac3ec'
          this.$refs.list[0].style.color = '#fff'
          this.$refs.list[1].style.background = '#7ac3ec'
          this.$refs.list[1].style.color = '#fff'
          this.$refs.list[myKey].style.background = '#7ac3ec'
          this.$refs.list[myKey].style.color = '#f7f941'
          this.row2.chart3.chartLine_data = {
            data1: ['06:53:14', '06:53:15', '06:53:30', '06:53:45', '06:54:00', '06:54:15', '06:54:30', '06:54:45', '06:55:00', '06:55:15', '06:55:30', '06:55:45', '06:56:00', '06:56:15', '06:56:30', '06:56:45', '06:57:00', '06:57:15', '06:57:30', '06:57:45', '06:58:00', '06:58:16', '06:58:31', '06:58:46', '06:59:01', '06:59:03', '06:59:16', '06:59:31', '06:59:46', '07:00:01', '07:00:16', '07:00:31', '07:00:46', '07:01:01', '07:01:16', '07:01:31', '07:01:46', '07:02:01', '07:02:01', '07:02:16', '07:02:31', '07:02:46', '07:03:01', '07:03:16', '07:03:31', '07:03:46', '07:04:01', '07:04:16', '07:04:31', '07:04:46', '07:05:01', '07:05:16', '07:05:20', '07:05:31', '07:05:46', '07:06:01', '07:06:16', '07:06:31', '07:06:46', '07:07:01', '07:07:10', '07:07:16', '07:07:31', '07:07:46', '07:08:01', '07:08:16', '07:08:31', '07:08:46', '07:09:01', '07:09:16', '07:09:31', '07:09:46'],
            data2: [3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 351.82, 351.82, 351.82, 351.82, 351.82, 351.82, 351.82, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48],
            data3: [3837, 3840, 3832, 3829, 3842, 3817, 3825, 3822, 3850, 3820, 3830, 3837, 3833, 3830, 3832, 3829, 3814, 3681, 3575, 3423, 3268, 3138, 3036, 3032, 3039, 3032, 3017, 3025, 3036, 2926, 2895, 2696, 2315, 1831, 1379, 1232, 1232, 1227, 1228, 1224, 1225, 1213, 1230, 1209, 1221, 1225, 1231, 1138, 928, 736, 708, 707, 674, 540, 530, 527, 437, 390, 356, 325, 307, 309, 310, 308, 294, 308, 306, 293, 278, 226],
            data4: [
              ['06:59:01', 3036],
              ['06:59:03', 3032],
              ['07:02:01', 1232],
              ['07:02:01', 1232],
              ['07:05:16', 736],
              ['07:05:20', 708],
              ['07:07:10', 356],
              ['07:07:10', 356]
            ]
          }
          this.roadChartLine3(this.row2.chart3.chartLine_data)
        }
        console.log(num++)
      }, 5000)
      console.log('移除')
    },
    // 点击
    handleList(key, id) {
      console.log(id)
      clearInterval(this.timer)
      for (var i in this.$refs.list) {
        if (i == key) {
          this.$refs.list[i].style.background = '#7ac3ec'
          this.$refs.list[i].style.color = '#f7f941'
          // this.getChart3()
        } else {
          this.$refs.list[i].style.background = '#7ac3ec'
          this.$refs.list[i].style.color = '#fff'
        }
      }
      if (id == 1) {
        this.row2.chart3.chartLine_data = {
          data1: ['06:34:10', '06:34:11', '06:34:12', '06:34:13', '06:34:14', '06:34:14', '06:34:15', '06:34:16', '06:34:17', '06:34:18', '06:34:19', '06:34:20', '06:34:21', '06:34:22', '06:34:23', '06:34:29', '06:34:44', '06:34:59', '06:35:14', '06:35:29', '06:35:44', '06:35:59', '06:36:14', '06:36:29', '06:36:44', '06:36:59', '06:37:14', '06:37:28', '06:37:29', '06:37:44', '06:37:59', '06:38:14', '06:38:29', '06:38:44', '06:38:59', '06:38:59', '06:39:14', '06:39:29', '06:39:44', '06:39:59', '06:40:08', '06:40:14', '06:40:29', '06:40:44', '06:40:59', '06:41:14', '06:41:29', '06:41:40', '06:41:44', '06:41:59', '06:42:14', '06:42:29', '06:42:44', '06:42:59', '06:43:09', '06:43:14', '06:43:29', '06:43:44', '06:43:59', '06:44:14', '06:44:29', '06:44:44'],
          data2: [141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 437.73, 437.73, 437.73, 437.73, 437.73, 437.73, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6],
          data3: [-8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -11, -9, -4, -8, -10, -8, -8, 0, -1, 32, 88, 142, 143, 141, 154, 215, 250, 256, 338, 337, 329, 325, 409, 420, 438, 434, 432, 447, 439, 496, 655, 680, 678, 670, 669, 741, 752, 924, 958, 962, 955, 961, 956, 956, 968],
          data4: [
            ['06:34:10', -8],
            ['06:37:28', 142],
            ['06:37:29', 143],
            ['06:38:59', 338],
            ['06:38:59', 337],
            ['06:40:08', 438],
            ['06:40:08', 438],
            ['06:41:40', 680],
            ['06:41:44', 678],
            ['06:43:09', 958],
            ['06:43:09', 958]
          ]
        }
        this.roadChartLine3(this.row2.chart3.chartLine_data)
      } else if (id == 2) {
        this.row2.chart3.chartLine_data = {
          data1: ['06:43:09', '06:43:14', '06:43:29', '06:43:44', '06:43:59', '06:44:14', '06:44:29', '06:44:44', '06:44:44', '06:44:59', '06:45:14', '06:45:30', '06:45:45', '06:46:00', '06:46:15', '06:46:30', '06:46:45', '06:47:00', '06:47:15', '06:47:30', '06:47:40', '06:47:45', '06:48:00', '06:48:15', '06:48:30', '06:48:45', '06:49:00', '06:49:15', '06:49:20', '06:49:30', '06:49:45', '06:50:00', '06:50:15', '06:50:30', '06:50:45', '06:51:00', '06:51:15', '06:51:30', '06:51:45', '06:52:00', '06:52:15', '06:52:30', '06:52:45', '06:53:00', '06:53:14', '06:53:15', '06:53:30', '06:53:45', '06:54:00', '06:54:15', '06:54:30', '06:54:45', '06:55:00', '06:55:15', '06:55:30'],
          data2: [959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38],
          data3: [958, 962, 955, 961, 956, 956, 968, 1100, 1099, 1102, 1115, 1103, 1217, 1266, 1681, 1919, 1968, 2139, 2426, 2479, 2486, 2489, 2480, 2502, 2498, 2769, 3097, 3224, 3236, 3242, 3238, 3282, 3320, 3369, 3411, 3458, 3499, 3540, 3580, 3632, 3668, 3708, 3753, 3798, 3830, 3830],
          data4: [
            ['06:44:44', 1100],
            ['06:44:44', 1099],
            ['06:47:40', 2486],
            ['06:47:45', 2489],
            ['06:49:20', 3236],
            ['06:49:20', 3236],
            ['06:53:14', 3830],
            ['06:53:15', 3830]
          ]
        }
        this.roadChartLine3(this.row2.chart3.chartLine_data)
      } else if (id == 3) {
        this.row2.chart3.chartLine_data = {
          data1: ['06:53:14', '06:53:15', '06:53:30', '06:53:45', '06:54:00', '06:54:15', '06:54:30', '06:54:45', '06:55:00', '06:55:15', '06:55:30', '06:55:45', '06:56:00', '06:56:15', '06:56:30', '06:56:45', '06:57:00', '06:57:15', '06:57:30', '06:57:45', '06:58:00', '06:58:16', '06:58:31', '06:58:46', '06:59:01', '06:59:03', '06:59:16', '06:59:31', '06:59:46', '07:00:01', '07:00:16', '07:00:31', '07:00:46', '07:01:01', '07:01:16', '07:01:31', '07:01:46', '07:02:01', '07:02:01', '07:02:16', '07:02:31', '07:02:46', '07:03:01', '07:03:16', '07:03:31', '07:03:46', '07:04:01', '07:04:16', '07:04:31', '07:04:46', '07:05:01', '07:05:16', '07:05:20', '07:05:31', '07:05:46', '07:06:01', '07:06:16', '07:06:31', '07:06:46', '07:07:01', '07:07:10', '07:07:16', '07:07:31', '07:07:46', '07:08:01', '07:08:16', '07:08:31', '07:08:46', '07:09:01', '07:09:16', '07:09:31', '07:09:46'],
          data2: [3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 351.82, 351.82, 351.82, 351.82, 351.82, 351.82, 351.82, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48],
          data3: [3837, 3840, 3832, 3829, 3842, 3817, 3825, 3822, 3850, 3820, 3830, 3837, 3833, 3830, 3832, 3829, 3814, 3681, 3575, 3423, 3268, 3138, 3036, 3032, 3039, 3032, 3017, 3025, 3036, 2926, 2895, 2696, 2315, 1831, 1379, 1232, 1232, 1227, 1228, 1224, 1225, 1213, 1230, 1209, 1221, 1225, 1231, 1138, 928, 736, 708, 707, 674, 540, 530, 527, 437, 390, 356, 325, 307, 309, 310, 308, 294, 308, 306, 293, 278, 226],
          data4: [
            ['06:59:01', 3036],
            ['06:59:03', 3032],
            ['07:02:01', 1232],
            ['07:02:01', 1232],
            ['07:05:16', 736],
            ['07:05:20', 708],
            ['07:07:10', 356],
            ['07:07:10', 356]
          ]
        }
        this.roadChartLine3(this.row2.chart3.chartLine_data)
      }

      // if (key % 2 == 0) {
      //   this.row2.chart3.chartLine_data = {
      //   }
      //   this.roadChartLine3(this.row2.chart3.chartLine_data)
      // } else {
      //   this.row2.chart3.chartLine_data = {

      //   }
      //   this.roadChartLine3(this.row2.chart3.chartLine_data)
      // }
    },

    // 计划统计
    getChart4() {
      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.total = response.data.total
          this.roadChartLine4(this.row3.chart1.chartLine_data)
        } else {
          this.row3.chart1.list = []
        }
        setTimeout(() => {
          this.row3.chart1.listLoading = false
        }, 100)
      })
    },
    roadChartLine4(chartLine_data) {
      if (this.row3.chart1.chartLine != null) {
        this.row3.chart1.chartLine.dispose()
      }
      this.row3.chart1.chartLine = echarts.init(document.getElementById('row3chartLine1'))
      var option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['计划准确率', '计划正确率', '计划准确率（去除取消重量）'],
          top: 10
        },
        grid: {
          top: '20%',
          left: '0%',
          right: '8%',
          containLabel: true
        },
        toolbox: {
          show: true,
          right: '2%',
          feature: {}
        },
        xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data1, name: '日期' },
        yAxis: {
          type: 'value', name: '百分比', axisLabel: { formatter: '{value} %' }
        },
        series: [
          { name: '计划准确率', type: 'line', data: chartLine_data.data2 },
          { name: '计划正确率', type: 'line', data: chartLine_data.data3 },
          { name: '计划准确率（去除取消重量）', type: 'line', data: chartLine_data.data4 }
        ]
      }
      this.row3.chart1.chartLine.setOption(option)
      window.onresize = function() {
        this.row3.chart1.chartLine.resize()
      }
    },
    // 泌乳牛采食量
    getChart5() {
      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.total = response.data.total
          this.roadChartLine5(this.row3.chart2.chartLine_data)
        } else {
          this.row3.chart2.list = []
        }
        setTimeout(() => {
          this.row3.chart2.listLoading = false
        }, 100)
      })
    },
    roadChartLine5(chartLine_data) {
      if (this.row3.chart2.chartLine != null) {
        this.row3.chart2.chartLine.dispose()
      }
      this.row3.chart2.chartLine = echarts.init(document.getElementById('row3chartLine2'))
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['泌乳牛采食量', '泌乳牛产奶量'],
          right: 10
        },
        xAxis: [
          {
            type: 'category',
            data: chartLine_data.data1
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '泌乳牛采食量',
            axisLabel: {
              formatter: '{value} '
            }
          }, {
            type: 'value',
            name: '泌乳牛产奶量',
            axisLabel: {
              formatter: '{value} '
            }
          }
        ],
        series: [{
          name: '泌乳牛采食量',
          type: 'bar',
          itemStyle: { /* 设置柱状颜色*/
            normal: {
              color: '#61a5e8'
            }
          },
          data: chartLine_data.data2
        }, {
          name: '泌乳牛产奶量',
          type: 'line',
          itemStyle: { /* 设置折线颜色*/
            normal: {
              color: '#ff2d2d'
            }
          },
          yAxisIndex: 1,
          data: chartLine_data.data3
        }]
      }
      this.row3.chart2.chartLine.setOption(option)
      window.onresize = function() {
        this.row3.chart2.chartLine.resize()
      }
    },

    // 成本统计
    getChart6() {
      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: ['09/16', '09/17', '09/18', '09/19', '09/20', '09/21', '09/22', '09/23', '09/24', '09/25', '09/26', '09/27', '09/28', '09/29', '09/30'],
            data2: [1.5, 1.8, 2.2, 1.9, 1.8, 1.7, 2.0, 2.7, 2.4, 1.7, 1.8, 1.7, 2.7, 2.4, 2.1],
            data3: [50, 65, 70, 45, 42, 45, 29, 39, 47, 56, 67, 72, 75, 68, 66]
          }
          this.row4.chart1.total = response.data.total
          this.roadChartLine6(this.row4.chart1.chartLine_data)
        } else {
          this.row4.chart1.list = []
        }
        setTimeout(() => {
          this.row4.chart1.listLoading = false
        }, 100)
      })
    },
    roadChartLine6(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: ''
        },
        grid: {
          left: '8%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['泌乳牛采食量', '泌乳牛产奶量']
        },
        xAxis: [
          {
            type: 'category',
            data: chartLine_data.data1,
            axisPointer: {
              type: 'shadow'
            },
            name: '日期'
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '公斤奶\n饲料成本（元）',
            axisLabel: {
              formatter: '{value}'
            }
          }, {
            type: 'value',
            name: '单头牛\n饲料成本（元）',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '泌乳牛采食量',
            type: 'bar',
            itemStyle: { /* 设置柱状颜色*/
              normal: {
                color: '#61a5e8'
              }
            },
            data: chartLine_data.data2

          }, {
            name: '泌乳牛产奶量',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: { /* 设置柱状颜色*/
              normal: {
                color: '#ff3131'
              }
            },
            data: chartLine_data.data3
          }
        ]
      }
      this.row4.chart1.chartLine.setOption(option)
      window.onresize = function() {
        this.row4.chart1.chartLine.resize()
      }
    },

    getChart7() {
      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: ['09/16', '09/17', '09/18', '09/19', '09/20', '09/21', '09/22', '09/23', '09/24', '09/25', '09/26', '09/27', '09/28', '09/29', '09/30'],
            data2: [3860, 3200, 3560, 3428, 3108, 2986, 2670, 3120, 3204, 3150, 2850, 3220, 3321, 3125, 3410],
            data3: [120, 225, 0, 0, 124, 0, 159, 122, 0, 85, 62, 55, 0, 0, 75],
            data4: [4800, 5572, 6820, 3880, 4830, 8800, 4575, 3850, 3896, 4285, 3800, 6562, 6720, 3580, 4120]
          }
          this.row4.chart2.total = response.data.total
          this.roadChartLine7(this.row4.chart2.chartLine_data)
        } else {
          this.row4.chart2.list = []
        }
        setTimeout(() => {
          this.row4.chart2.listLoading = false
        }, 100)
      })
    },
    roadChartLine7(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: ''
        },
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['系统用量', '人工用量', '金额']
        },
        xAxis: [
          {
            type: 'category',
            data: chartLine_data.data1,
            name: '日期'
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '重量（kg）',
            axisLabel: {
              formatter: '{value}'
            }
          }, {
            type: 'value',
            name: '金额（元）',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '系统用量',
            type: 'bar',
            stack: '广告',
            itemStyle: { /* 设置柱状颜色*/
              normal: {
                color: '#61a5e8'
              }
            },
            data: chartLine_data.data2
          }, {
            name: '人工用量',
            type: 'bar',
            stack: '广告',
            itemStyle: { /* 设置柱状颜色*/
              normal: {
                color: 'orange'
              }
            },
            data: chartLine_data.data3
          }, {
            name: '金额',
            type: 'line',
            yAxisIndex: 1,
            data: chartLine_data.data4,
            itemStyle: { /* 设置折线颜色*/
              normal: {
                color: '#ff3131'
              }
            }
          }
        ]

      }
      this.row4.chart2.chartLine.setOption(option)
      window.onresize = function() {
        this.row4.chart2.chartLine.resize()
      }
    },

    getTable8() {
      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)
      })
    },
    // 更多
    handleMore() {
      this.$router.push({ path: '/inventoryManagement/Warning' })
    },
    // 导出
    handleExport(item) {
      // 计划统计
      if (item == 'row3chartLine1') {
        console.log(this.row3.chart1.table.list)
        var excelDatasTabChart1 = [
          {
            tHeader: ['日期', '计划执行重量（kg）', '配方理论重量（kg）', '计划准确率', '计划取消重量（kg）', '计划准确率（去除取消重量）', '计划正确数', '计划数', '计划正确率'],
            filterVal: ['日期', '实际量', '理论量', 'field1', '计划取消重量', 'field3', '正确数', '计划数', 'field2'],
            tableDatas: this.row3.chart1.table.list,
            sheetName: '计划统计'
          }
        ]
        json2excel(excelDatasTabChart1, '计划统计', true, 'xlsx')
      } else if (item == 'row3chartLine2') {
        // 泌乳牛采食量
        var excelDatasTabChart2 = [
          {
            tHeader: ['日期', '泌乳牛采食量（kg）', '泌乳牛产奶量（kg）'],
            filterVal: ['日期', 'field1', 'field2'],
            tableDatas: this.row3.chart2.table.list,
            sheetName: '泌乳牛采食量'
          }
        ]
        json2excel(excelDatasTabChart2, '泌乳牛采食量', true, 'xlsx')
      }
    },

    handleTable(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
      }
    },
    handleChart(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
      }
    }

  }
}
</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;
    .news{
      width: 70%;
      height: 30px;
      background: #fff;
      margin: 0 auto;
      border-radius: 10px;
      text-align: center;
      line-height: 30px;
      color: red;
      b{color: #000;}
    }

    .bottom{
      padding:0 30px;
      h4{text-align: right;}
      .grid-content{
        background: #fff;height: 90px;
        border-radius: 10px;
      }
      .one{
        border: 1px solid #82CBB3;height: 90px;
        .Left{
          float: left;
          width: 65px;
          text-align: center;
          i{font-size: 36px;color:#82CBB3;line-height: 90px;}
        }
        .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: 90px;}
        }
        .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: 90px;}
        }
        .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: 90px;}
        }
        .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:100%;height:150px;
         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;
            // 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>