Tmr-Multilingual/.svn/pristine/b0/b06bf1ef683a56408f6be48060a1b064cfbc961e.svn-base

<template>
  <div ref="dashboardEditor" class="dashboard-editor-container">
    <div class="dashboard" style="margin-bottom: 10px;">
      <div class="dashboard-l">
        <div class="row1">
          <div class="row1-t">
            <div class="row1-t-l">
              <div class="img-l">统计范围:</div>
              <el-date-picker v-model="inputDatetime" :clearable="false" class="inputDatetime filter-item content" type="daterange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="changeDate" />
            </div>
          </div>
          <div class="row1-c">
            <div class="row1-c-l">
              <div class="title1">
                <div class="img-title">
                  <img src="../../../assets/images/index/l1.png">
                </div>
                <span class="content">混料准确率</span>
              </div>
              <div class="row1-c-l-c">
                <span>
                  <b>{{ row1.list[0].rateAvg }}</b>
                  <br>昨日
                </span>
              </div>
              <div class="row1-c-l-b">
                <div><span>混料最高准确率：</span><b>{{ row1.list[0].rateMAX }}</b></div>
                <div><span>混料最低准确率：</span><b>{{ row1.list[0].rateMIN }}</b></div>
              </div>
            </div>
            <div class="row1-c-r">
              <div class="title1">
                <div class="img-title">
                  <img src="../../../assets/images/index/l4.png">
                </div>
                <span class="content">撒料准确率</span>
              </div>
              <div class="row1-c-l-c">
                <span>
                  <b>{{ row1.list[1].rateAvg }}</b>
                  <br>昨日
                </span>
              </div>
              <div class="row1-c-l-b">
                <div><span>撒料最高准确率：</span><b>{{ row1.list[1].rateMAX }}</b></div>
                <div><span>撒料最低准确率：</span><b>{{ row1.list[1].rateMIN }}</b></div>
              </div>
            </div>
          </div>
          <div class="row1-b">
            <div class="row1-b-l">
              <div class="title1">
                <div class="img-title">
                  <img src="../../../assets/images/index/l3.png">
                </div>
                <span class="content">撒料正确率</span>
              </div>
              <div class="row1-c-l-c">
                <span>
                  <b>{{ row1.list[2].rateAvg }}</b>
                  <br>昨日
                </span>
              </div>
              <div class="row1-c-l-b">
                <div><span>撒料最高正确率：</span><b>{{ row1.list[2].rateMAX }}</b></div>
                <div><span>撒料最低正确率：</span><b>{{ row1.list[2].rateMIN }}</b></div>
              </div>
            </div>
            <div class="row1-b-r">
              <div class="title1">
                <div class="img-title">
                  <img src="../../../assets/images/index/l2.png">
                </div>
                <span class="content">撒料偏差</span>
              </div>
              <div class="row1-c-l-c">
                <span>
                  <b>{{ row1.list[3].rateAvg }}</b>
                  <br>昨日
                </span>
              </div>
              <div class="row1-c-l-b">
                <div><span>撒料最高偏差：</span><b>{{ row1.list[3].rateMAX }}</b></div>
                <div><span>撒料最低偏差：</span><b>{{ row1.list[3].rateMIN }}</b>分钟</div>
              </div>
            </div>
          </div>
        </div>
        <div class="row2">
          <div class="title">
            <div class="img-title" />
            <span class="content">今日计划统计</span>
          </div>
          <div class="todayPlan">
            <div>
              <div id="row2chartLine1" style="height: 185px;" />
              <div class="bottom">
                <div class="bottom-l">
                  <div class="bottom-l-t">
                    <b>{{ row2.chart1.chartLine_data.data1 }}</b>次
                  </div>
                  <div class="bottom-l-b">
                    完成车次
                  </div>
                </div>
                <div class="bottom-r">
                  <div class="bottom-r-t">
                    <b>{{ row2.chart1.chartLine_data.data2 }}</b>次
                  </div>
                  <div class="bottom-r-b">
                    计划车次
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div id="row2chartLine2" style="height: 185px;" />
              <div class="bottom">
                <div class="bottom-l">
                  <div class="bottom-l-t">
                    <b>{{ row2.chart2.chartLine_data.data1 }}</b>kg
                  </div>
                  <div class="bottom-l-b">
                    完成重量
                  </div>
                </div>
                <div class="bottom-r">
                  <div class="bottom-r-t">
                    <b>{{ row2.chart2.chartLine_data.data2 }}</b>kg
                  </div>
                  <div class="bottom-r-b">
                    计划重量
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row3" style="position: relative;">
          <div class="title">
            <div class="img-title" />
            <span class="content">成本统计</span>
          </div>
          <div v-if="row4.chart1.isChart" class="button">
            <div class="exportTable" @click="handleExport('row4chartLine1')">导出</div>
            <div class="exportTable" @click="handleTable('row4chartLine1')">切换表格</div>
          </div>
          <div v-if="row4.chart1.isChart" id="row4chartLine1" v-loading="row4.chart1.listLoading" style="background: #fff;height:310px;" />
          <div v-if="row4.chart1.isTable" class="table" style="position: absolute;width: 100%;">
            <div class="button">
              <div class="exportTable" @click="handleExport('row4chartLine1')">导出</div>
              <div class="exportTable" @click="handleChart('row4chartLine1')">切换图表</div>
            </div>
            <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%;margin-top: 10px;"
              height="300"
              :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="牧场" sortable min-width="110px" align="center" prop="名称" />
              <el-table-column label="公斤奶饲料成本（元）" sortable min-width="120px" align="center" prop="准确率" />
            </el-table>
          </div>
        </div>
      </div>
      <div class="dashboard-r">
        <div class="row1">
          <div class="row1Title">当前车辆数：{{ row2.carLength }}</div>
          <div id="car" ref="car" v-loading="row2.listLoading" class="car">
            <div id="carList" ref="carList" class="carList">
              <div v-for="(item,index) in row2.list" ref="listW" :key="index" class="listW">
                <div ref="list" class="list" :style="{'background': item.background,'color':item.color,'borderColor':item.borderColor}" @click="handleList(index,item)">
                  <div class="list-t">
                    <div class="list-t-t">
                      <el-tooltip :content="item.tname" placement="top">
                        <span>车辆：{{ item.tname }}</span>
                      </el-tooltip>
                    </div>
                    <div class="list-t-t">
                      <el-tooltip :content="item.fname" placement="top">
                        <span v-if="item.inorout == 0">饲料：{{ item.fname }}</span>
                        <span v-if="item.inorout == 1">栏舍：{{ item.fname }}</span>
                      </el-tooltip>
                    </div>
                    <div class="list-t-t">
                      <el-tooltip :content="item.remark" placement="top">
                        <span>描述：{{ item.remark }}</span>
                      </el-tooltip>
                    </div>
                  </div>

                  <div class="list-b">
                    <div class="list-b-l">
                      <div class="left">
                        <div class="num"><b>{{ item.doneweight }}</b>Kg</div>
                        <div class="weight">完成重量</div>
                      </div>
                      <div class="right" />
                    </div>
                    <div class="list-b-l">
                      <div class="left">
                        <div class="num"><b>{{ item.leftweight }}</b>Kg</div>
                        <div class="weight">剩余重量</div>
                      </div>
                      <div class="right" />
                    </div>
                    <div class="list-b-l">
                      <div class="left">
                        <div class="num"><b>{{ item.nowweight }}</b>Kg</div>
                        <div class="weight">车辆当前载重</div>
                      </div>
                      <div class="right" />
                    </div>
                    <div class="list-b-l">
                      <div class="left">
                        <div class="num"><b>{{ item.lweight }}</b>Kg</div>
                        <div class="weight">计划重量</div>
                      </div>
                      <div class="right" />
                    </div>
                    <div class="list-b-l">
                      <div class="left">
                        <div class="num"><b>{{ item.donerate }}</b></div>
                        <div class="weight">完成度</div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div v-if="item.isChecked" ref="checked" class="img-checked" /> -->
              </div>
            </div>
          </div>

        </div>
        <div class="row2">
          <div class="row2-l" style="position: relative;">
            <div class="title">
              <div class="img-title" />
              <span class="content">计划统计</span>
            </div>
            <div v-if="row3.chart1.isChart" class="button">
              <div class="exportTable" @click="handleExport('row3chartLine1')">导出</div>
              <div class="exportTable" @click="handleTable('row3chartLine1')">切换表格</div>
            </div>
            <div v-if="row3.chart1.isChart" id="row3chartLine1" v-loading="row3.chart1.listLoading" style="background: #fff;height:310px;" />
            <div v-if="row3.chart1.isTable" class="table" style="position: absolute;width: 100%;">
              <div class="button">
                <div class="exportTable" @click="handleExport('row3chartLine1')">导出</div>
                <div class="exportTable" @click="handleChart('row3chartLine1')">切换图表</div>
              </div>
              <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%;margin-top: 10px;"
                height="300"
                :row-style="rowStyle"
                :cell-style="cellStyle"
                class="elTable table-fixed"
              >
                <el-table-column label="牧场" sortable min-width="85px" align="center" prop="牧场" />
                <el-table-column label="计划执行重量(kg)" sortable min-width="90px" align="center" prop="实际量" />
                <el-table-column label="配方理论重量(kg)" sortable min-width="90px" align="center" prop="理论量" />
                <el-table-column label="计划准确率" sortable min-width="85px" align="center" prop="field1" />
                <el-table-column label="计划取消重量(kg)" sortable min-width="90px" align="center" prop="计划取消重量" />
                <el-table-column label="计划准确率(去除取消重量)" sortable min-width="100px" align="center" prop="field3" />
                <el-table-column label="计划正确数" sortable min-width="85px" align="center" prop="正确数" />
                <el-table-column label="计划数" sortable min-width="85px" align="center" prop="计划数" />
                <el-table-column label="计划正确率" sortable min-width="75px" align="center" prop="field2" />
              </el-table>
            </div>
          </div>
          <div class="row2-r" style="position: relative;">
            <div class="title">
              <div class="img-title" />
              <span class="content">泌乳牛干物质采食量</span>
            </div>
            <div v-if="row3.chart2.isChart" class="button">
              <div class="exportTable" @click="handleExport('row3chartLine2')">导出</div>
              <div class="exportTable" @click="handleTable('row3chartLine2')">切换表格</div>
            </div>
            <div v-if="row3.chart2.isChart" id="row3chartLine2" v-loading="row3.chart2.listLoading" style="background: #fff;height:310px;" />
            <div v-if="row3.chart2.isTable" class="table" style="position: absolute;width: 100%;">
              <div class="button">
                <div class="exportTable" @click="handleExport('row3chartLine2')">导出</div>
                <div class="exportTable" @click="handleChart('row3chartLine2')">切换图表</div>
              </div>
              <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%;margin-top: 10px;"
                height="300"
                :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>
            </div>
          </div>
        </div>
        <div class="row3">
          <div class="row3-l" style="position: relative;">
            <div class="title">
              <div class="img-title" />
              <span class="content">混料实际重量统计</span>
            </div>
            <div v-if="row4.chart2.isChart" class="button">
              <div class="exportTable" @click="handleExport('row4chartLine2')">导出</div>
              <div class="exportTable" @click="handleTable('row4chartLine2')">切换表格</div>
            </div>
            <div v-if="row4.chart2.isChart" id="row4chartLine2" v-loading="row4.chart2.listLoading" style="background: #fff;height:310px;" />
            <div v-if="row4.chart2.isTable" class="table" style="position: absolute;width:100%;">
              <div class="button">
                <div class="exportTable" @click="handleExport('row4chartLine2')">导出</div>
                <div class="exportTable" @click="handleChart('row4chartLine2')">切换图表</div>
              </div>
              <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%;margin-top: 10px;"
                height="300"
                :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="牧场" sortable min-width="110px" align="center" prop="名称" />
                <el-table-column label="混料重量" sortable min-width="110px" align="center" prop="准确率" />
              </el-table>
            </div>
          </div>
          <div class="row3-r">
            <div class="title">
              <div class="img-title" />
              <span class="content">库存预警</span>
              <!-- <a style="float: right;color: #009C69;font-size: 12px;margin-right: 10px;" @click="handleMore">查看更多 &nbsp;>></a> -->
            </div>
            <div id="table" style="height: 330px;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: 98%;background: #fff;margin-top: 10px;"
                height="320"
                :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>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

import echarts from 'echarts'
require('echarts/theme/macarons')
export default {
  name: 'GroupDashboard',
  data() {
    return {
      ranchSelectionList: [{ id: 0, name: '集团' }, { id: 1, name: '牧场01' }, { id: 2, name: '牧场02' }],
      ranchSelection: 0,
      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: false,
        list: [
          { 'rateAvg': '', 'rateMAX': '', 'rateMIN': '' },
          { 'rateAvg': '', 'rateMAX': '', 'rateMIN': '' },
          { 'rateAvg': '', 'rateMAX': '', 'rateMIN': '' },
          { 'rateAvg': '', 'rateMAX': '', 'rateMIN': '' }
        ],
        getdataListParm2: {
          name: 'getHomepageStrJTPlan',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid')
          }
        },
        list2: ''
      },
      row2: {
        chart1: {
          chartLine: null,
          chartLine_data: {}
        },
        chart2: {
          chartLine: null,
          chartLine_data: {}
        },
        list: [],
        total: 0,
        listLoading: false,
        getdataListParmList: {
          name: 'getHomepageLBListJT',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid')
          }
        }
      },
      row3: {
        chartDate: [],
        chart1: {
          chartLine: null,
          chartLine_data: {},
          getdataListParm: {
            name: 'getJT1AccuracyAllJH',
            page: 1,
            offset: 1,
            pagecount: 10,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              startTime: parseTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), '{y}-{m}-{d}'),
              stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
              inputDatetime: [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), new Date()]
            }
          },
          list: [],
          total: 0,
          listLoading: false,
          isChart: true,
          isTable: false,
          table: {
            tableKey: 1,
            list: [],
            total: 0,
            listLoading: false
          }
        },
        chart2: {
          chartLine: null,
          chartLine_data: {},
          getdataListParm: {
            name: 'getFeedEffMRJT',
            page: 1,
            offset: 1,
            pagecount: 10,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              startTime: parseTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), '{y}-{m}-{d}'),
              stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
              inputDatetime: [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), new Date()]
            }
          },
          list: [],
          total: 0,
          listLoading: false,
          isChart: true,
          isTable: false,
          table: {
            tableKey: 1,
            list: [],
            total: 0,
            listLoading: false
          }
        }
      },
      row4: {
        chartDate: [],
        chart1: {
          chartLine: null,
          chartLine_data: {},
          getdataListParm: {
            name: 'getFeedEffCBAllJT',
            page: 1,
            offset: 1,
            pagecount: 10,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              startTime: parseTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), '{y}-{m}-{d}'),
              stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
              inputDatetime: [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), new Date()]
            }
          },
          list: [],
          total: 0,
          listLoading: false,
          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().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), '{y}-{m}-{d}'),
              stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
              inputDatetime: [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), new Date()]
            }
          },
          list: [],
          total: 0,
          listLoading: false,
          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: false,
          temp: {}
        }

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

    }
  },
  created() {
    this.getRow1List()
    this.getRow2List()
    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 => {
        if (response.data !== null && response.data.list !== null) {
          console.log('row1数据', response.data.list)
          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
          console.log(this.row1.list, 'this.row1.list')
        } 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 = ''
        }
        setTimeout(() => {
          this.row1.listLoading = false
        }, 100)
      })
    },
    getRow2List() {
      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.getdataListParm2).then(response => {
        if (response.data !== null && response.data.list !== null) {
          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.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'))
      if (chartLine_data.data2 == 0 || chartLine_data.data1 == 0) {
        chartLine_data.data1 = 0
        chartLine_data.data2 = 100
      }
      var option = {
      // 标题组件，包含主标题和副标题
        title: { show: true, x: 'center', textStyle: { fontSize: '15', color: 'green', fontWeight: 'bold' }},
        //  提示框组件
        tooltip: {
          show: false, trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [{
          name: '任务进度', type: 'pie', radius: ['80%', '70%'], avoidLabelOverlap: false, hoverAnimation: false, labelLine: { normal: { show: false }},
          data: [
            { value: chartLine_data.data1, name: '完成率', selected: false, label: { normal: { show: true, position: 'center', fontSize: 20, 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 !== null && response.data.list !== null) {
          for (let i = 0; i < response.data.list.length; i++) {
            this.$set(response.data.list[i], 'background', '#f3f9f7')
            this.$set(response.data.list[i], 'borderColor', '#009d6a')
          }
          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
        this.getRow3List1()
      } else if (item == 'row3chartLine2') {
        console.log('泌乳牛采食量图表')
        this.row3.chart2.isTable = false
        this.row3.chart2.isChart = true
        this.getRow3List2()
      } else if (item == 'row4chartLine1') {
        console.log('成本统计图表')
        this.row4.chart1.isTable = false
        this.row4.chart1.isChart = true
        this.getRow4List1()
      } else if (item == 'row4chartLine2') {
        console.log('混料实际重量统计图表')
        this.row4.chart2.isTable = false
        this.row4.chart2.isChart = true
        this.getRow4List2()
      }
    },
    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')
      } else if (item == 'row3chartLine2') {
        // 泌乳牛干物质采食量
        var excelDatasTabChart2 = [
          {
            tHeader: ['日期', '泌乳牛采食量（kg）', '泌乳牛产奶量（kg）'],
            filterVal: ['日期', 'field1', 'field2'],
            tableDatas: this.row3.chart2.table.list,
            sheetName: '泌乳牛采食量'
          }
        ]
        json2excel(excelDatasTabChart2, '泌乳牛采食量', true, 'xlsx')
      } else if (item == 'row4chartLine1') {
        // 成本统计
        console.log('成本统计')
        // var excelDatasTabChart2 = [
        //   {
        //     tHeader: ['日期', '泌乳牛采食量（kg）', '泌乳牛产奶量（kg）'],
        //     filterVal: ['日期', 'field1', 'field2'],
        //     tableDatas: this.row3.chart2.table.list,
        //     sheetName: '泌乳牛采食量'
        //   }
        // ]
        // json2excel(excelDatasTabChart2, '泌乳牛采食量', true, 'xlsx')
      } else if (item == 'row3chartLine1') {
        console.log('计划统计')
      } else if (item == 'row4chartLine2') {
        console.log('混料实际重量统计')
      }
    },
    // 计划统计
    getRow3List1() {
      this.row3.chart1.listLoading = true
      console.log(this.row3.chart1.getdataListParm.name, '计划统计接口')
      GetReportform(this.row3.chart1.getdataListParm).then(response => {
        if (response.data !== null && 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
          console.log('计划统计图数据', this.row3.chart1.chartLine_data)
          console.log('计划统计表数据', this.row3.chart1.table.list)
        } else {
          this.row3.chart1.table.list = []
          this.row3.chart1.chartLine_data = {}
        }
        this.roadRow3ChartLine1(this.row3.chart1.chartLine_data)
        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 => {
        if (response.data !== null && response.data.list !== null) {
          console.log('泌乳牛干物质采食量数据', response)
          for (let i = 0; i < response.data.data.length; i++) {
            if (response.data.data[i].field1 !== '' && response.data.data[i].field1 !== undefined) {
              response.data.data[i].field1 = parseFloat(response.data.data[i].field1)
            }
            if (response.data.data[i].field2 !== '' && response.data.data[i].field2 !== undefined) {
              response.data.data[i].field2 = parseFloat(response.data.data[i].field2)
            }
          }
          this.row3.chart2.table.list = response.data.data
          this.row3.chart2.chartLine_data = response.data.list
          this.row3.chart2.total = response.data.total
          if (this.row3.chart2.chartLine_data.data1.length == 0) {
            this.row3.chart2.chartLine_data.title = '暂无数据'
          } else {
            this.row3.chart2.chartLine_data.title = ''
          }
          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: '3%',
          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() {
          if (chartLine_data.data3 !== undefined) {
            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
      console.log(this.row4.chart1.getdataListParm.name)
      GetReportform(this.row4.chart1.getdataListParm).then(response => {
        if (response.data !== null && response.data.list !== null) {
          console.log('成本统计数据', response.data.list)
          this.row4.chart1.table.list = response.data.data
          this.row4.chart1.chartLine_data = response.data.list
          this.row4.chart1.total = response.data.total
        } else {
          this.row4.chart1.list = []
          this.row4.chart1.chartLine_data = {}
        }
        this.roadRow4ChartLine1(this.row4.chart1.chartLine_data)
        setTimeout(() => {
          this.row4.chart1.listLoading = false
        }, 100)
      })
    },
    roadRow4ChartLine1(chartLine_data) {
      console.log(chartLine_data, '成本统计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() {
          if (chartLine_data.data3 !== undefined) {
            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 => {
        if (response.data !== null && response.data.list !== null) {
          console.log('混料实际重量统计数据', response.data.list)
          this.row4.chart2.table.list = response.data.data
          this.row4.chart2.chartLine_data = response.data.list
          this.row4.chart2.total = response.data.total
        } else {
          this.row4.chart2.list = []
          this.row4.chart2.chartLine_data = {}
        }
        this.roadRow4ChartLine2(this.row4.chart2.chartLine_data)
        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() {
          if (chartLine_data.data3 !== undefined) {
            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 => {
        if (response.data.list !== null) {
          console.log('库存预警table数据', response.data.list)
          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>
  .app-main{background:#f5f5f5;}
</style>
<style lang="scss" scoped>

  .dashboard-editor-container{padding-left: 10px;background: #f5f5f5;padding-bottom: 10px;}
  // 公共
  .img-t{position: absolute;left: 0;right: 0;margin: 30px auto;width: 31%;height: 31%;background-size: 100% 100%;}
  .row1-c-l-c{
    margin: 20px auto;border: 1px solid #eee;height: 40%;width: 50%;border-radius: 50%;text-align: center;display:table;
    span{
      height:100%;display:table-cell;vertical-align: middle;font-size:14px;color: #009C69;
      b{padding-bottom: 10px;font-size: 16px;overflow: hidden;width: 100%;}
    }
  }
  .row1-c-l-b{
    width: 100%;text-align: center;display:table;font-size: 12px;
    // div{
    //   font-size: 12px;height:100%;display:table-cell;vertical-align: middle;color: #323232;padding: 0 10px;width: 100%;
    //   span{text-align: right;width: 75%;display: block;float: left;}
    //   b{float: left;display: block;width: 25%;}
    // }
  }
  .title{
    height: 36px;padding-top: 7px;line-height: 36px;position: relative;
    .img-title{
      position: absolute;top: 10px; right:10px;bottom:0;left:20px;width: 30px;height: 30px;background: url(../../../assets/images/index/row-bg3.png) no-repeat;
    }
    .content{font-size: 18px;position: absolute;top: 7px;left: 55px;}
  }
  .title1{
    height: 36px;padding-top: 7px;line-height: 36px;position: relative;

    .img-title{
      position: absolute;top: 10px; right:10px;bottom:0;left:10px;
      width: 25px;height: 25px;
      img{width: 25px;height: 25px;}
    }
    .content{font-size: 16px;position: absolute;top: 7px;left: 40px;}
  }
  .button{
    height: 30px;
    .exportTable{float: right;margin-right: 5px;}
  }
  .dashboard{
    display: flex;margin-top: 10px;
    .dashboard-l{
      // width: 540px;
      width: 30%;
      .row1{
        height: 520px;
        .row1-t{
          background: #fff; height: 50px; color: #f28b46;
          .row1-t-l{
            .img-l{float:left;padding: 16px 0 16px 10px;width: 100px;height: 18px;}
            .content{float:left;width: 68%;font-size: 14px;margin-top: 5px;}
          }
          .row1-t-r{padding-right: 20px;text-align: right;line-height: 50px;}
        }

        .row1-c{
          display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;margin-top: 10px;
          .row1-c-l{
            background: #fff;width:49%;height:225px;border-radius:3px;margin-right: 1%;position: relative;
            .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t1.png) no-repeat; background-size: 100% 100%;}
          }
          .row1-c-r{
            background: #fff;width:49%;height:225px;border-radius:3px;position: relative;
            .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t2.png) no-repeat; background-size: 100% 100%;}
          }
        }
        .row1-b{
          display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;margin-top: 10px;
          .row1-b-l{
            background: #fff;width:49%;height:225px;border-radius:3px;margin-right:1%;position: relative;
            .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t4.png) no-repeat; background-size: 100% 100%;}
          }
          .row1-b-r{
            background: #fff;width:49%;height:225px;border-radius:3px;position: relative;
            .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t3.png) no-repeat; background-size: 100% 100%;}
          }
        }
      }

      .row2{
        margin-top:10px;height: 375px;background: #fff;
        .img-title{background-position: 0 0;}
        .todayPlan{
          display: flex; flex-direction: row;margin-top: 10px;
          div{
            flex: 1;position: relative;
            .bottom{
              width: 99%;height: 70px;background: #f9f9f9;margin: 30px auto 5px;display: flex; flex-direction: row;
              div{
                flex: 1;height: 42px;color: #333333;
              }
              .bottom-l{
                border-right: 1px solid #e0e0e0;margin-top: 15px;width: 100%;text-align: center;
                .bottom-l-t{
                  height: 30px;
                  b{font-size: 18px;}
                }
                .bottom-l-b{font-size: 12px;}
              }
              .bottom-r{
                margin-top: 15px;width: 100%;text-align: center;
                .bottom-r-t{height: 30px;padding-left: 10px;}
                .bottom-r-b{padding-left: 10px;font-size: 12px;}
              }
            }
          }
        }
      }
      .row3{
        margin-top:10px;height: 375px;background: #fff;
        .img-title{background-position: 0 -90px;}
      }
    }
    .dashboard-r{
      margin-left: 10px;flex:1;
      .row1{
        height: 520px;background: #fff;
        .row1Title{float: right;height: 50px;line-height: 50px;margin-right: 50px;}
        .img-title{background-position: 0 -240px;}
        #row2chartLine3{height: 270px;margin-top: 10px;}
        .carsLength{
          padding: 13px 0 0 22px;line-height: 38px;font-size: 18px;font-weight: 700;
        }
        .car{
          clear: both;
          .carList{
            padding:0 30px;overflow: auto;width: 100%;height: 470px;
            .listW{
              background: #f3f9f7; float: left;margin: 5px 5px;width: 32%;height: 120px;
              .list{
                width: 100%;height: 100%;border-radius: 5px;border:1px solid #000;
                .list-t{
                  display: flex;
                  border-bottom: 1px solid #f1f1f1;
                  .list-t-t{
                    flex: 1 1;
                    width: 0;font-size: 12px;line-height: 22px;padding: 25px 5px 15px;text-align: center;
                    span{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
                  }
                }
                .list-b{
                  display: flex; text-align: center;margin-top: 14px;color: #323232;
                  .list-b-l{
                    flex: 1;width: 0; height: 40px; position: relative;
                    .left{
                      .num{
                        font-size: 12px;
                        b{font-size: 12px;}
                      }
                      .weight{font-size: 12px;}
                    }
                    .right{
                      height: 30px;width: 1px;background: #e0e0e0;position: absolute;right: 0;top: 0;bottom: 0;margin-top:auto;margin-bottom:auto
                    }
                  }
                }
              }
            }
          }
        }
      }

      .row2{
        margin-top:10px;height: 375px;
        display: flex; flex-direction: row;
        .row2-l{
          margin-right: 10px; background: #fff;height:375px;border-radius:3px;flex: 1;
          .img-title{background-position: 0 -30px;}
        }
        .row2-r{
           background: #fff;height:375px;border-radius:3px;flex: 1;
          .img-title{background-position: 0 -60px;}
        }
      }

      .row3{
        margin-top:10px;height: 375px;
        display: flex; flex-direction: row;
        .row3-l{
          margin-right: 10px; background: #fff;height:375px;border-radius:3px;flex: 1;
          .img-title{background-position: 0 -120px;}
        }
        .row3-r{
           background: #fff;height:375px;border-radius:3px;flex: 1;
          .img-title{background-position: 0 -150px;}
        }
      }

    }
  }
</style>