<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" />
              <span class="content">{{ $t("dashboard.noMessage") }}</span>
              <!-- <div class="img-r" /> -->
            </div>
            <div class="row1-t-r">{{ date }}</div>
          </div>
          <div class="row1-c">
            <div class="row1-c-l">
              <div class="title1" :lang="$i18n.locale">
                <div class="img-title">
                  <img src="../../../assets/images/index/l1.png" />
                </div>
                <span class="content">{{ $t("dashboard.pureBlend") }}</span>
              </div>
              <div class="row1-c-l-c">
                <span>
                  <b>{{ row1.list.yesRateHL }}</b>
                  <br />{{ $t("dashboard.yestday") }}
                </span>
              </div>
              <div class="row1-c-l-b" :lang="$i18n.locale">
                <div>
                  <span>{{ $t("dashboard.yestday30") }}:</span
                  ><b>{{ row1.list.monRateHL }}</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">{{ $t("dashboard.spreadAc") }}</span>
              </div>
              <div class="row1-c-l-c">
                <span>
                  <b>{{ row1.list.yesRateSL }}</b>
                  <br />{{ $t("dashboard.yestday") }}
                </span>
              </div>
              <div class="row1-c-l-b" :lang="$i18n.locale">
                <div>
                  <span>{{ $t("dashboard.yestday30zq") }}:</span
                  ><b>{{ row1.list.monRateSL }}</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">{{ $t("dashboard.SpreadingCR") }}</span>
              </div>
              <div class="row1-c-l-c">
                <span>
                  <b>{{ row1.list.yesRateSLR }}</b>
                  <br />{{ $t("dashboard.yestday") }}
                </span>
              </div>
              <div class="row1-c-l-b" :lang="$i18n.locale">
                <div>
                  <span>{{ $t("dashboard.yestday30S") }}:</span
                  ><b>{{ row1.list.monRateSLR }}</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">{{ $t("dashboard.spreadSD") }}</span>
              </div>
              <div class="row1-c-l-c">
                <span>
                  <b>{{ row1.list.temtime }}</b>
                  <br />{{ $t("dashboard.yestday") }}
                </span>
              </div>
              <div class="row1-c-l-b" :lang="$i18n.locale">
                <div>
                  <span>{{ $t("dashboard.yestday30SD") }}:</span
                  ><b>{{ row1.list.montime }} </b>{{ $t("dashboard.mtime") }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row2">
          <div class="title">
            <div class="img-title" />
            <span class="content">{{ $t("dashboard.todayTps") }}</span>
          </div>
          <b style="margin-left: 20px">{{ $t("dashboard.StatisType") }}：</b>
          <el-select
            v-model="row2.value"
            size="mini"
            :placeholder="$t('common.please')"
            style="width: 100px"
            @change="changeType"
          >
            <el-option
              v-for="item in row2.typeList"
              :key="item.id"
              :label="$t('dashboard.' + item.name)"
              :value="item.id"
            />
          </el-select>
          <div class="todayPlan">
            <div>
              <div
                id="row2chartLine1"
                style="height: 185px"
                v-loading="row1.listLoading"
              />
              <div class="bottom" :lang="$i18n.locale">
                <div class="bottom-l">
                  <div class="bottom-l-t">
                    <b>{{ row2.chart1.chartLine_data.data1 }}</b
                    >{{ $t("dashboard.bout") }}
                  </div>
                  <div class="bottom-l-b">
                    {{ $t("dashboard.cTrip") }}
                  </div>
                </div>
                <div class="bottom-r">
                  <div class="bottom-r-t">
                    <b>{{ row2.chart1.chartLine_data.data2 }}</b
                    >{{ $t("dashboard.bout") }}
                  </div>
                  <div class="bottom-r-b">
                    {{ $t("dashboard.pTrip") }}
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div
                id="row2chartLine2"
                style="height: 185px"
                v-loading="row1.listLoading"
              />
              <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">
                    {{ $t("dashboard.cWeight") }}
                  </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">
                    {{ $t("dashboard.pWeight") }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row3" style="position: relative">
          <div class="title">
            <div class="img-title" />
            <span class="content"> {{ $t("dashboard.costSts") }}</span>
          </div>
          <div v-if="row4.chart1.isChart" class="button">
            <div class="exportTable" @click="handleExport('row4chartLine1')">
              {{ $t("dashboard.Export") }}
            </div>
            <div class="exportTable" @click="handleTable('row4chartLine1')">
              {{ $t("dashboard.sTable") }}
            </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')">
                {{ $t("dashboard.Export") }}
              </div>
              <div class="exportTable" @click="handleChart('row4chartLine1')">
                {{ $t("dashboard.sTable") }}
              </div>
            </div>
            <el-table
              :key="row4.chart1.table.tableKey"
              v-loading="row4.chart1.table.listLoading"
              :element-loading-text="$t('common.tableMsg')"
              :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="$t('dashboard.table.date')"
                sortable
                min-width="110px"
                align="center"
                prop="日期"
              />
              <el-table-column
                :label="$t('dashboard.table.signOx')"
                sortable
                min-width="110px"
                align="center"
                prop="field2"
              />
              <el-table-column
                :label="$t('dashboard.table.feedCow')"
                sortable
                min-width="120px"
                align="center"
                prop="field1"
              />
            </el-table>
          </div>
        </div>
      </div>
      <div class="dashboard-r">
        <div class="row1">
          <div class="title">
            <div class="img-title" />
            <span class="content">{{ $t("dashboard.timeTitle") }}</span>
          </div>
          <div
            v-if="carLength > 0"
            id="row2chartLine3"
            ref="row2chartLine3"
            style="height: 260px"
          />
          <div
            v-else
            style="height: 260px; text-align: center; line-height: 260px"
          >
            {{ $t("dashboard.monitMsg") }}
          </div>
          <div class="carsLength">
            {{ $t("dashboard.curVeh") }}<span>{{ carLength }}</span>
          </div>
          <div
            id="car"
            ref="car"
            v-loading="row2.chart3.listLoading2"
            class="car"
          >
            <div ref="iconLeft" class="iconLeft" @click="handleLeft">
              <img
                v-if="row2.chart3.isLeft"
                src="../../../assets/images/index/row-r3.png"
                class="img-title"
              />
              <img
                v-if="row2.chart3.isLeftA"
                src="../../../assets/images/index/row-r2.png"
                class="img-title"
              />
            </div>
            <div id="carList" ref="carList" class="carList">
              <div
                v-for="(item, index) in list"
                ref="listW"
                :key="index"
                class="listW"
                :lang="$i18n.locale"
              >
                <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>{{ $t("dashboard.veh") }}:{{ item.tname }}</span>
                      </el-tooltip>
                    </div>
                    <div class="list-t-t">
                      <el-tooltip :content="item.fname" placement="top">
                        <span v-if="item.inorout == 0"
                          >{{ $t("dashboard.feed") }}:{{ item.fname }}</span
                        >
                        <span v-if="item.inorout == 1"
                          >{{ $t("dashboard.fname") }}:{{ item.fname }}</span
                        >
                      </el-tooltip>
                    </div>
                    <div class="list-t-t">
                      <el-tooltip :content="item.remark" placement="top">
                        <span
                          >{{ $t("dashboard.remark") }}:{{ 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">{{ $t("dashboard.cWeight") }}</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">{{ $t("dashboard.rWright") }}</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">
                          {{ $t("dashboard.vehWeight") }}
                        </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">{{ $t("dashboard.Pweight") }}</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">
                          {{ $t("dashboard.compaltRate") }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="item.isChecked" ref="checked" class="img-checked" />
              </div>
            </div>
            <div ref="iconRight" class="iconRight" @click="handleRight">
              <img
                v-if="row2.chart3.isRightA"
                src="../../../assets/images/index/row-r5.png"
                class="img-title"
              />
              <img
                v-if="row2.chart3.isRight"
                src="../../../assets/images/index/row-r4.png"
                class="img-title"
              />
            </div>
          </div>
        </div>
        <div class="row2">
          <div class="row2-l" style="position: relative">
            <div class="title">
              <div class="img-title" />
              <span class="content">{{ $t("dashboard.planSta") }}</span>
            </div>
            <div v-if="row3.chart1.isChart" class="button">
              <div class="exportTable" @click="handleExport('row3chartLine1')">
                {{ $t("dashboard.Export") }}
              </div>
              <div class="exportTable" @click="handleTable('row3chartLine1')">
                {{ $t("dashboard.sTable") }}
              </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')"
                >
                  {{ $t("dashboard.Export") }}
                </div>
                <div class="exportTable" @click="handleChart('row3chartLine1')">
                  {{ $t("dashboard.sTable") }}
                </div>
              </div>
              <el-table
                :key="row3.chart1.table.tableKey"
                v-loading="row3.chart1.table.listLoading"
                :element-loading-text="$t('common.tableMsg')"
                :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="$t('dashboard.table.date')"
                  sortable
                  min-width="85px"
                  align="center"
                  prop="日期"
                />
                <el-table-column
                  :label="$t('dashboard.table.PEWeight')"
                  sortable
                  min-width="90px"
                  align="center"
                  prop="实际量"
                />
                <el-table-column
                  :label="$t('dashboard.table.FTWeight')"
                  sortable
                  min-width="90px"
                  align="center"
                  prop="理论量"
                />
                <el-table-column
                  :label="$t('dashboard.table.PARate')"
                  sortable
                  min-width="85px"
                  align="center"
                  prop="field1"
                />
                <el-table-column
                  :label="$t('dashboard.table.PCWeight')"
                  sortable
                  min-width="90px"
                  align="center"
                  prop="计划取消重量"
                />
                <el-table-column
                  :label="$t('dashboard.table.PCancelWeight')"
                  sortable
                  min-width="100px"
                  align="center"
                  prop="field3"
                />
                <el-table-column
                  :label="$t('dashboard.table.CNumP')"
                  sortable
                  min-width="85px"
                  align="center"
                  prop="正确数"
                />
                <el-table-column
                  :label="$t('dashboard.table.PNum')"
                  sortable
                  min-width="85px"
                  align="center"
                  prop="计划数"
                />
                <el-table-column
                  :label="$t('dashboard.table.CNumR')"
                  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">{{ $t("dashboard.mixStatic") }}</span>
            </div>
            <div v-if="row4.chart2.isChart" class="button">
              <div class="exportTable" @click="handleExport('row4chartLine2')">
                {{ $t("dashboard.Export") }}
              </div>
              <div class="exportTable" @click="handleTable('row4chartLine2')">
                {{ $t("dashboard.sTable") }}
              </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')"
                >
                  {{ $t("dashboard.Export") }}
                </div>
                <div class="exportTable" @click="handleChart('row4chartLine2')">
                  {{ $t("dashboard.sTable") }}
                </div>
              </div>
              <el-table
                :key="row4.chart2.table.tableKey"
                v-loading="row4.chart2.table.listLoading"
                :element-loading-text="$t('common.tableMsg')"
                :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="$t('dashboard.table.date')"
                  sortable
                  min-width="110px"
                  align="center"
                  prop="日期"
                />
                <el-table-column
                  :label="$t('dashboard.yWeight')"
                  sortable
                  min-width="110px"
                  align="center"
                  prop="field1"
                />
              </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">{{ $t("dashboard.miruTitle") }}</span>
            </div>
            <div v-if="row3.chart2.isChart" class="button">
              <div class="exportTable" @click="handleExport('row3chartLine2')">
                {{ $t("dashboard.Export") }}
              </div>
              <div class="exportTable" @click="handleTable('row3chartLine2')">
                {{ $t("dashboard.sTable") }}
              </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')"
                >
                  {{ $t("dashboard.Export") }}
                </div>
                <div class="exportTable" @click="handleChart('row3chartLine2')">
                  {{ $t("dashboard.sTable") }}
                </div>
              </div>
              <el-table
                :key="row3.chart2.table.tableKey"
                v-loading="row3.chart2.table.listLoading"
                :element-loading-text="$t('common.tableMsg')"
                :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="$t('dashboard.table.date')"
                  sortable
                  min-width="110px"
                  align="center"
                  prop="日期"
                />
                <el-table-column
                  :label="$t('dashboard.miruCow1')"
                  sortable
                  min-width="110px"
                  align="center"
                  prop="field1"
                />
                <el-table-column
                  :label="$t('dashboard.miruMilk1')"
                  sortable
                  min-width="110px"
                  align="center"
                  prop="field2"
                />
              </el-table>
            </div>
          </div>
          <div class="row3-r">
            <div class="title">
              <div class="img-title" />
              <span class="content">{{ $t("dashboard.stockAlart") }}</span>
              <!-- <a style="float: right;color: #009C69;font-size: 12px;margin-right: 10px;" @click="handleMore">{{$t('common.watchMore')}} &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="$t('common.tableMsg')"
                :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="$t('dashboard.stockTable.num')"
                  type="index"
                  min-width="80px"
                  align="center"
                />
                <el-table-column
                  :label="$t('dashboard.stockTable.feedName')"
                  min-width="80px"
                  align="center"
                  prop="feedname"
                />
                <el-table-column
                  :label="$t('dashboard.stockTable.stockNum')"
                  min-width="70px"
                  align="center"
                  prop="stockweight"
                />
                <el-table-column
                  :label="$t('dashboard.stockTable.lastDay')"
                  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 echarts from "echarts";
import { json2excel } from "@/utils/index.js";

require("echarts/theme/macarons");
// var myKey = 0
var that = this;
var carIndex = 0; // 判断是否大于当前车辆数
var index = 0; // 判断当前跳到第几个车辆
var timer = null;
export default {
  name: "PastureDashboard",
  inject: ["reload"],
  data() {
    return {
      val: "这是值1",
      date: parseTime(new Date(), "{y}-{m}-{d}"),
      list: [],
      news: 1,
      carLength: 0, // 车辆
      myKey: 0, // 轮播Key值
      row1: {
        getdataListParm: {
          name: "getHomepageStr",
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: "Map",
          parammaps: {
            pastureid: Cookies.get("pastureid"),
          },
        },
        listLoading: true,
        list: "",
      },
      row2: {
        value: 0,
        typeList: [
          { id: 0, name: "typeAll" },
          { id: 1, name: "Fixed" },
          { id: 2, name: "struck" },
        ],
        chart1: {
          chartLine: null,
          chartLine_data: {},
        },
        chart2: {
          chartLine: null,
          chartLine_data: {},
        },
        chart3: {
          isLeft: true,
          isRight: true,
          chartLine: null,
          chartLine_data: {},
          getdataListParm: {
            name: "getHomeprocessAnalysis",
            page: 1,
            offset: 1,
            pagecount: 2,
            returntype: "Map",
            parammaps: {
              pastureid: Cookies.get("pastureid"),
              id: "",
              pid: "",
            },
          },
          list: [],
          total: 0,
          listLoading: true,
          pageNum: "",
          pages: "",
          getdataListParmList: {
            name: "getHomepageLBList",
            page: 1,
            offset: 1,
            pagecount: 2,
            returntype: "Map",
            parammaps: {
              pastureid: Cookies.get("pastureid"),
            },
          },
          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: {
        chartDate: [],
        chart1: {
          chartLine: null,
          chartLine_data: {},
          getdataListParm: {
            name: "getHomepageCB",
            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: "getAccuraaActHL",
            page: 1,
            offset: 1,
            pagecount: 10,
            returntype: "Map",
            parammaps: {
              pastureid: Cookies.get("pastureid"),
              startTime: parseTime(new Date(), "{y}-{m}-{d}"),
              stopTime: parseTime(new Date(), "{y}-{m}-{d}"),
              inputDatetime: [new Date(), new Date()],
            },
          },
          list: [],
          total: 0,
          listLoading: true,
          isChart: true,
          isTable: false,
          table: {
            tableKey: 1,
            list: [],
            total: 0,
            listLoading: false,
          },
        },
        table: {
          getdataListParm: {
            name: "getFsWarnList",
            page: 1,
            offset: 1,
            pagecount: 5,
            returntype: "Map",
            parammaps: {
              pastureid: Cookies.get("pastureid"),
            },
          },
          tableKey: 1,
          list: [],
          total: 0,
          listLoading: true,
          temp: {},
        },
      },
      rowStyle: { maxHeight: 30 + "px", height: 30 + "px" },
      cellStyle: { padding: 0 + "px" },
      timer: null,
      clickKey: 0,
      isClick: false,
    };
  },
  watch: {
    isClick: {
      handler(newName, oldName) {
        if (newName == true) {
          setTimeout(() => {
            this.timer = setInterval(this.autoPlay, 15000);
          }, 20000);
        }
      },
      immediate: true,
    },
  },
  created() {
    // this.reload()
    this.getCarLength();
    this.getChart3List();
    this.getTimeFn();
    this.getList();

    this.getChart4();
    this.getChart5();
    this.getChart6();
    this.getChart7();
    this.getTable8();
  },
  mounted() {
    this.timer = null;
    this.timer = setInterval(this.autoPlay, 15000);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    getTimeFn() {
      // this.reload()
      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}"
      );

      that.row4.chartDate[0] = parseTime(start, "{y}-{m}-{d}");
      that.row4.chartDate[1] = parseTime(end, "{y}-{m}-{d}");
      that.row4.chart1.getdataListParm.parammaps.inputDatetime[0] = parseTime(
        start,
        "{y}-{m}-{d}"
      );
      that.row4.chart1.getdataListParm.parammaps.inputDatetime[1] = parseTime(
        end,
        "{y}-{m}-{d}"
      );
      that.row4.chart1.getdataListParm.parammaps.startTime = parseTime(
        start,
        "{y}-{m}-{d}"
      );
      that.row4.chart1.getdataListParm.parammaps.stopTime = parseTime(
        end,
        "{y}-{m}-{d}"
      );

      that.row4.chart2.getdataListParm.parammaps.inputDatetime[0] = parseTime(
        start,
        "{y}-{m}-{d}"
      );
      that.row4.chart2.getdataListParm.parammaps.inputDatetime[1] = parseTime(
        end,
        "{y}-{m}-{d}"
      );
      that.row4.chart2.getdataListParm.parammaps.startTime = parseTime(
        start,
        "{y}-{m}-{d}"
      );
      that.row4.chart2.getdataListParm.parammaps.stopTime = parseTime(
        end,
        "{y}-{m}-{d}"
      );
    },
    getList() {
      this.row1.listLoading = true;
      this.row1.getdataListParm.parammaps.lpplantype = this.row2.value;
      GetDataByName(this.row1.getdataListParm).then((response) => {
        if (response.data !== null && response.data.list !== null) {
          console.log("row1数据", response.data.list);
          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);
      });
    },
    changeType() {
      this.getList();
    },
    // 今日计划统计-完成车次
    roadChartLine1(chartLine_data) {
      console.log("chartLine_data", 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}%)",
        },
        color: ["#1bbe89", "#e4e7ec"],
        series: [
          {
            name: this.$t("dashboard.taskT"),
            type: "pie",
            radius: ["80%", "70%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            labelLine: { normal: { show: false } },
            data: [
              {
                value: chartLine_data.data1,
                name: this.$t("dashboard.tripCp1"),
                selected: false, // 单个扇区的标签配置
                label: {
                  normal: {
                    show: true,
                    position: "center",
                    fontSize: this.$t("dashboard.tripCpFont"),
                    formatter: "{b}\n{d}%",
                  },
                },
              },
              {
                value: chartLine_data.data2 - chartLine_data.data1,
                label: { normal: { show: false } },
              },
            ],
          },
        ],
      };
      this.row2.chart1.chartLine.setOption(option);
      if (this.row2.chart1.chartLine != null) {
        window.onresize = function () {
          this.row2.chart1.chartLine.resize();
        };
      }
      var that = this;
      that.row2.chart1.chartLine.on("mouseover", (e) => {
        const op = that.row2.chart1.chartLine.getOption();
        that.row2.chart1.chartLine.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
          color: e.color,
        });
        that.row2.chart1.chartLine.setOption(op, true);
      });
    },
    // 今日计划统计-完成重量
    roadChartLine2(chartLine_data) {
      if (this.row2.chart2.chartLine != null) {
        this.row2.chart2.chartLine.dispose();
      }
      this.row2.chart2.chartLine = echarts.init(
        document.getElementById("row2chartLine2")
      );
      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}%)",
        },
        series: [
          {
            name: this.$t("dashboard.taskT"),
            type: "pie",
            radius: ["80%", "70%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            labelLine: { normal: { show: false } },
            data: [
              {
                value: chartLine_data.data1,
                name: this.$t("dashboard.tripCp"),
                selected: false,
                label: {
                  normal: {
                    show: true,
                    position: "center",
                    fontSize: this.$t("dashboard.tripCpFont"),
                    formatter: "{b}\n{d}%",
                  },
                },
              },
              {
                value: chartLine_data.data2 - chartLine_data.data1,
                label: { normal: { show: false } },
              },
            ],
          },
        ],
        color: ["#529ae4", "#e4e7ec"],
      };
      this.row2.chart2.chartLine.setOption(option);
      if (this.row2.chart2.chartLine != null) {
        window.onresize = function () {
          this.row2.chart2.chartLine.resize();
        };
      }
      var that = this;
      that.row2.chart2.chartLine.on("mouseover", (e) => {
        const op = that.row2.chart2.chartLine.getOption();
        that.row2.chart2.chartLine.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
          color: e.color,
        });
        that.row2.chart2.chartLine.setOption(op, true);
      });
    },

    // 实时监控
    getChart3() {
      this.row2.chart3.listLoading = true;
      GetReportform(this.row2.chart3.getdataListParm).then((response) => {
        console.log("实时监控数据", response.data.list);
        if (response.data !== null && response.data.list !== null) {
          var evenNumbers = []; // 偶数
          var oddNumbers = []; // 奇数
          for (let i = 0; i < response.data.list.data4.length; 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;
          this.row2.chart3.chartLine_data = response.data.list;
          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 = [];
          this.row2.chart3.chartLine_data = [];
          this.roadChartLine3(this.row2.chart3.chartLine_data);
        }
        setTimeout(() => {
          this.row2.chart3.listLoading = false;
        }, 100);
      });
    },
    roadChartLine3(chartLine_data) {
      console.log(chartLine_data, "chartLine_data666");
      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: ["#ff0000", "#5199e5", "#fdb06a", "#fb8b73"], // 关键加上这句话，legend的颜色和折线的自定义颜色就一致了
        grid: {
          bottom: "10%",
        },
        legend: [
          {
            itemWidth: 15,
            itemHeight: 7,
            right: "25%",
            textStyle: { fontSize: 12 },
            data: [
              { name: this.$t("dashboard.Dweight") },
              { name: this.$t("dashboard.AWeight") },
            ],
          },
          {
            itemWidth: 5,
            itemHeight: 5,
            right: "0",
            textStyle: { fontSize: 12 },
            data: [
              { name: this.$t("dashboard.SWeight") },
              { name: this.$t("dashboard.EWight") },
            ],
          },
        ],
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            // console.log(params, 'params')
            var tip = params[0].name;
            for (let i = 0; i < params.length; i++) {
              if (params[i].seriesName == this.$t("dashboard.Dweight")) {
                tip += "<br>" + params[i].seriesName + ":" + params[i].value[1];
              }
              if (params[i].seriesName == this.$t("dashboard.AWeight")) {
                tip += "<br>" + params[i].seriesName + ":" + params[i].value[1];
              }
              if (params[i].seriesName == this.$t("dashboard.SWeight")) {
                tip += "<br>" + params[i].seriesName + ":" + params[i].value[1];
              }
              if (params[i].seriesName == this.$t("dashboard.AWeight")) {
                tip +=
                  "<br>" +
                  params[i].seriesName +
                  ":" +
                  params[i].value[1] +
                  "<br>" +
                  params[i].value[2] +
                  params[i].value[3];
              }
            }
            return tip;
          },
        },
        calculable: true,
        yAxis: [
          {
            type: "value",
            name: this.$t("dashboard.yWeight"),
            splitLine: { show: false },
            axisLabel: { show: true, textStyle: { color: "#666" } },
          },
        ],
        xAxis: [
          {
            type: "category",
            splitLine: { show: false },
            name: this.$t("dashboard.xTime"),
            data: chartLine_data.data1,
            axisLabel: { show: true, textStyle: { color: "#666" } },
          },
        ],
        toolbox: {
          show: false,
          feature: {
            dataZoom: { realtime: false, yAxisIndex: "none" },
            restore: {},
          },
        },
        dataZoom: [
          { type: "inside" }, //用于添加滚轮缩放
          { type: "slider" }, //用于添加滑动条缩放，
        ],
        series: [
          {
            symbol: "none",
            name: this.$t("dashboard.Dweight"),
            type: "line",
            data: chartLine_data.data3,
            itemStyle: {
              normal: { lineStyle: { color: "#ff0000", width: 2 } },
            },
          },
          {
            symbol: "none",
            name: this.$t("dashboard.AWeight"),
            type: "line",
            data: chartLine_data.data2,
            itemStyle: { normal: { lineStyle: { width: 2 } } },
          },
          {
            name: this.$t("dashboard.SWeight"),
            symbolSize: 6,
            type: "scatter",
            data: chartLine_data.data4,
          },
          {
            name: this.$t("dashboard.EWight"),
            symbolSize: 6,
            type: "scatter",
            data: chartLine_data.data5,
          },
        ],
      };
      this.row2.chart3.chartLine.setOption(option);
      if (this.row2.chart3.chartLine != null) {
        window.onresize = function () {
          this.row2.chart3.chartLine.resize();
        };
      }
    },
    getCarLength() {
      this.row2.chart3.listLoading2 = true;
      this.row2.chart3.getdataListParmList.pagecount = 0;
      GetDataByName(this.row2.chart3.getdataListParmList).then((response) => {
        if (response.data.list !== null) {
          this.carLength = response.data.total;
        } else {
          this.carLength = 0;
        }
        setTimeout(() => {
          this.row2.chart3.listLoading2 = false;
        }, 100);
      });
    },
    // 图三轮询列表
    getChart3List() {
      this.row2.chart3.listLoading2 = true;
      this.row2.chart3.getdataListParmList.pagecount = 2;
      GetDataByName(this.row2.chart3.getdataListParmList).then((response) => {
        if (response.data.list !== null) {
          this.$set(response.data.list[0], "background", "#f3f9f7");
          this.$set(response.data.list[0], "borderColor", "#009d6a");
          this.$set(response.data.list[0], "isChecked", true);
          if (response.data.list.length > 1) {
            this.$set(response.data.list[1], "background", "#f9f9f9");
            this.$set(response.data.list[1], "borderColor", "#f9f9f9");
            this.$set(response.data.list[1], "isChecked", false);
          }
          this.list = response.data.list;
          this.row2.chart3.getdataListParm.parammaps.pid =
            this.list[this.myKey].pid;
          this.row2.chart3.getdataListParm.parammaps.id =
            this.list[this.myKey].id;
          this.getChart3();
          this.row2.chart3.pageNum2 = response.data.pageNum;
          this.row2.chart3.pages2 = response.data.pages;
        } else {
          this.row2.chart3.list2 = [];
        }
        if (response.data.pageNum == 1) {
          if (response.data.total > 2) {
            this.row2.chart3.isLeftA = false;
            this.row2.chart3.isLeft = true;
            this.row2.chart3.isRightA = true;
            this.row2.chart3.isRight = false;
          } else {
            this.row2.chart3.isLeftA = false;
            this.row2.chart3.isLeft = true;
            this.row2.chart3.isRightA = true;
            this.row2.chart3.isRight = false;
          }
        } else {
          if (
            response.data.pageNum * response.data.pageSize >
              response.data.total ||
            response.data.pageNum * response.data.pageSize ==
              response.data.total
          ) {
            this.row2.chart3.isLeftA = true;
            this.row2.chart3.isLeft = false;
            this.row2.chart3.isRightA = false;
            this.row2.chart3.isRight = true;
          } else {
            this.row2.chart3.isLeftA = true;
            this.row2.chart3.isLeft = false;
            this.row2.chart3.isRightA = true;
            this.row2.chart3.isRight = false;
          }
        }
        setTimeout(() => {
          this.row2.chart3.listLoading2 = false;
        }, 100);
      });
    },
    // 向左切换
    handleLeft() {
      console.log("左");
      if (this.row2.chart3.isLeftA == false) {
        console.log("前边没有啦");
      } else {
        console.log(this.row2.chart3.getdataListParmList.offset);
        this.row2.chart3.getdataListParmList.offset =
          this.row2.chart3.getdataListParmList.offset - 1;
        this.getChart3List();
      }
    },
    // 向右切换
    handleRight() {
      if (this.row2.chart3.isRightA == false) {
        console.log("后边没有啦");
      } else {
        this.row2.chart3.getdataListParmList.offset =
          this.row2.chart3.getdataListParmList.offset + 1;
        console.log(this.row2.chart3.getdataListParmList.offset);
        this.getChart3List();
      }
    },
    handleList(key, item) {
      console.log(item, key);
      this.isClick = true;
      this.clickKey = key;
      clearInterval(this.timer);
      for (let i = 0; i < this.list.length; i++) {
        if (key == i) {
          this.$set(this.list[i], "background", "#f3f9f7");
          this.$set(this.list[i], "borderColor", "#009d6a");
          this.$set(this.list[i], "isChecked", true);
        } else {
          this.$set(this.list[i], "background", "#f9f9f9");
          this.$set(this.list[i], "borderColor", "#f9f9f9");
          this.$set(this.list[i], "isChecked", false);
        }
      }
      this.row2.chart3.getdataListParm.parammaps.pid = this.list[key].pid;
      this.row2.chart3.getdataListParm.parammaps.id = this.list[key].id;
      this.getChart3();
      // this.timer = null
      // clearInterval(this.timer)
      // setTimeout(() => {
      //   this.timer = null
      //   this.timer = setInterval(this.autoPlay, 15000)
      // }, 20000)
    },
    autoPlay() {
      if (this.list[0].isChecked == true) {
        if (this.list.length > 1) {
          this.$set(this.list[1], "background", "#f3f9f7");
          this.$set(this.list[1], "borderColor", "#009d6a");
          this.$set(this.list[1], "isChecked", true);
          this.$set(this.list[0], "background", "#f9f9f9");
          this.$set(this.list[0], "borderColor", "#f9f9f9");
          this.$set(this.list[0], "isChecked", false);
          this.row2.chart3.getdataListParm.parammaps.pid = this.list[1].pid;
          this.row2.chart3.getdataListParm.parammaps.id = this.list[1].id;
          this.getChart3();
        } else {
          if (
            this.row2.chart3.isRightA == false &&
            this.row2.chart3.isLeftA == true
          ) {
            this.row2.chart3.getdataListParmList.offset =
              this.row2.chart3.getdataListParmList.offset - 1;
            this.getChart3List();
          }
        }
      } else {
        if (this.row2.chart3.isRightA == true) {
          this.row2.chart3.getdataListParmList.offset =
            this.row2.chart3.getdataListParmList.offset + 1;
          console.log(this.row2.chart3.getdataListParmList.offset);
          this.getChart3List();
        } else {
          if (this.row2.chart3.isLeftA == true) {
            this.row2.chart3.getdataListParmList.offset =
              this.row2.chart3.getdataListParmList.offset - 1;
            console.log(this.row2.chart3.getdataListParmList.offset);
            this.getChart3List();
          } else {
            this.$set(this.list[0], "background", "#f3f9f7");
            this.$set(this.list[0], "borderColor", "#009d6a");
            this.$set(this.list[0], "isChecked", true);
            this.$set(this.list[1], "background", "#f9f9f9");
            this.$set(this.list[1], "borderColor", "#f9f9f9");
            this.$set(this.list[1], "isChecked", false);
            this.row2.chart3.getdataListParm.parammaps.pid = this.list[0].pid;
            this.row2.chart3.getdataListParm.parammaps.id = this.list[0].id;
            this.getChart3();
          }
        }
      }
    },

    // 计划统计
    getChart4() {
      this.row3.chart1.listLoading = true;
      GetReportform(this.row3.chart1.getdataListParm).then((response) => {
        if (response.data !== null && response.data.list !== null) {
          console.log("计划统计数据", response.data.list);
          if (response.data.data) {
            for (let i = 0; i < response.data.data.length; i++) {
              if (
                response.data.data[i].实际量 !== "" &&
                response.data.data[i].实际量 !== undefined
              ) {
                response.data.data[i].实际量 = parseFloat(
                  response.data.data[i].实际量
                );
              }
              if (
                response.data.data[i].理论量 !== "" &&
                response.data.data[i].理论量 !== undefined
              ) {
                response.data.data[i].理论量 = parseFloat(
                  response.data.data[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].计划取消重量 !== "" &&
                response.data.data[i].计划取消重量 !== undefined
              ) {
                response.data.data[i].计划取消重量 = parseFloat(
                  response.data.data[i].计划取消重量
                );
              }
              if (
                response.data.data[i].field3 !== "" &&
                response.data.data[i].field3 !== undefined
              ) {
                response.data.data[i].field3 = parseFloat(
                  response.data.data[i].field3
                );
              }
              if (
                response.data.data[i].正确数 !== "" &&
                response.data.data[i].正确数 !== undefined
              ) {
                response.data.data[i].正确数 = parseFloat(
                  response.data.data[i].正确数
                );
              }
              if (
                response.data.data[i].计划数 !== "" &&
                response.data.data[i].计划数 !== undefined
              ) {
                response.data.data[i].计划数 = parseFloat(
                  response.data.data[i].计划数
                );
              }
              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.chart1.table.list = response.data.data;
          console.log(this.row3.chart1.table.list, "123");
          this.row3.chart1.chartLine_data = response.data.list;
          this.row3.chart1.total = response.data.total;
        } else {
          this.row3.chart1.list = [];
          this.row3.chart1.chartLine_data = [];
          this.row3.chart1.chartLine_data.data1 = [];
        }
        if (this.row3.chart1.chartLine_data.data1.length == 0) {
          this.row3.chart1.chartLine_data.title = this.$t("common.noMsg");
        } else {
          this.row3.chart1.chartLine_data.title = "";
        }
        this.roadChartLine4(this.row3.chart1.chartLine_data);
        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: chartLine_data.title,
          x: "center",
          y: "center",
          textStyle: { color: "#909399", fontWeight: "normal", fontSize: 12 },
        },
        tooltip: { trigger: "axis" },
        color: ["#1abd88", "#549be9", "#fd8d75"],
        legend: {
          data: [
            this.$t("dashboard.table.PARate"),
            this.$t("dashboard.table.CNumR"),
            this.$t("dashboard.table.PCancelWeight"),
          ],
          top: 10,
          itemHeight: 7,
          itemWidth: 15,
          textStyle: { fontSize: 12 },
        },
        grid: {
          top: "30%",
          left: "10%",
          right: "10%",
          bottom: "10%",
          containLabel: true,
        },
        toolbox: {
          show: true,
          right: "2%",
          feature: {},
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: chartLine_data.data1,
          name: this.$t("dashboard.table.date"),
        },
        yAxis: {
          type: "value",
          name: this.$t("dashboard.cant"),
          axisLabel: { formatter: "{value} %" },
        },
        series: [
          {
            name: this.$t("dashboard.table.PARate"),
            type: "line",
            symbol: "none",
            smooth: true,
            itemStyle: { normal: { lineStyle: { color: "#1abd88" } } },
            data: chartLine_data.data2,
          },
          {
            name: this.$t("dashboard.table.CNumR"),
            type: "line",
            symbol: "none",
            smooth: true,
            itemStyle: { normal: { lineStyle: { color: "#549be9" } } },
            data: chartLine_data.data3,
          },
          {
            name: this.$t("dashboard.table.PCancelWeight"),
            type: "line",
            symbol: "none",
            smooth: true,
            itemStyle: { normal: { lineStyle: { color: "#fd8d75" } } },
            data: chartLine_data.data4,
          },
        ],
      };
      this.row3.chart1.chartLine.setOption(option);
      if (this.row3.chart1.chartLine != null) {
        window.onresize = function () {
          this.row3.chart1.chartLine.resize();
        };
      }
    },
    // 泌乳牛干物质采食量
    getChart5() {
      this.row3.chart2.listLoading = true;
      GetReportform(this.row3.chart2.getdataListParm).then((response) => {
        console.log("泌乳牛干物质采食量数据", response);
        if (
          response.data !== null &&
          response.data.list !== null &&
          response.data.data !== null
        ) {
          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;
        } else {
          this.row3.chart2.list = [];
          this.row3.chart2.chartLine_data = [];
          this.row3.chart2.chartLine_data.data1 = [];
        }
        if (this.row3.chart2.chartLine_data.data1.length == 0) {
          this.row3.chart2.chartLine_data.title = this.$t("common.noMsg");
        } else {
          this.row3.chart2.chartLine_data.title = "";
        }
        this.roadChartLine5(this.row3.chart2.chartLine_data);
        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 = {
        title: {
          text: chartLine_data.title,
          x: "center",
          y: "center",
          textStyle: { color: "#909399", fontWeight: "normal", fontSize: 12 },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross", crossStyle: { color: "#999" } },
        },
        grid: {
          top: "26%",
          left: "13%",
          right: "13%",
          bottom: "10%",
          containLabel: true,
        },
        legend: {
          data: [this.$t("dashboard.miruTitle"), this.$t("dashboard.miruMilk")],
          right: 10,
          itemHeight: 7,
          itemWidth: 15,
        },
        xAxis: [{ type: "category", data: chartLine_data.data1 }],
        yAxis: [
          {
            splitLine: { show: false },
            type: "value",
            name: this.$t("dashboard.miruCowMilk"),
            axisLabel: { formatter: "{value} " },
          },
          {
            splitLine: { show: false },
            type: "value",
            name: this.$t("dashboard.miruMilk"),
            axisLabel: { formatter: "{value} " },
          },
        ],
        series: [
          {
            name: this.$t("dashboard.miruTitle"),
            type: "bar",
            barWidth: 5,
            itemStyle: {
              barBorderRadius: [18, 18, 0, 0],
              normal: { color: "#5199e5" },
            },
            data: chartLine_data.data2,
          },
          {
            name: this.$t("dashboard.miruMilk"),
            type: "line",
            barWidth: 5,
            itemStyle: {
              barBorderRadius: [18, 18, 0, 0],
              normal: { color: "#36c293" },
            },
            yAxisIndex: 1,
            data: chartLine_data.data3,
          },
        ],
      };
      this.row3.chart2.chartLine.setOption(option);
      if (this.row3.chart2.chartLine != null) {
        window.onresize = function () {
          this.row3.chart2.chartLine.resize();
        };
      }
    },

    // 成本统计
    getChart6() {
      this.row4.chart1.table.listLoading = true;
      this.row4.chart1.listLoading = true;
      GetReportform(this.row4.chart1.getdataListParm).then((response) => {
        if (
          response.data !== null &&
          response.data.list !== null &&
          response.data.data !== null &&
          response.data.data !== ""
        ) {
          console.log("成本统计数据", response.data.data);
          console.log("成本统计数据", response.data.list);
          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.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.row4.chart1.chartLine_data.data1 = [];
        }
        if (this.row4.chart1.chartLine_data.data1.length == 0) {
          this.row4.chart1.chartLine_data.title = this.$t("common.noMsg");
        } else {
          this.row4.chart1.chartLine_data.title = "";
        }
        this.roadChartLine6(this.row4.chart1.chartLine_data);
        setTimeout(() => {
          this.row4.chart1.listLoading = false;
          this.row4.chart1.table.listLoading = false;
        }, 100);
      });
    },
    roadChartLine6(chartLine_data) {
      if (this.row4.chart1.chartLine != null) {
        this.row4.chart1.chartLine.dispose();
      }
      console.log(chartLine_data, "===666");
      this.row4.chart1.chartLine = echarts.init(
        document.getElementById("row4chartLine1")
      );
      var option = {
        title: {
          text: chartLine_data.title,
          x: "center",
          y: "center",
          textStyle: { color: "#909399", fontWeight: "normal", fontSize: 12 },
        },
        grid: {
          top: "30%",
          left: "10%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross", crossStyle: { color: "#999" } },
        },
        legend: {
          data: [
            this.$t("dashboard.feedCow"),
            this.$t("dashboard.table.signOx"),
          ],
          itemHeight: 4,
          itemWidth: 15,
        },
        xAxis: [
          {
            type: "category",
            data: chartLine_data.data1,
            axisPointer: { type: "shadow" },
            name: this.$t("dashboard.table.date"),
          },
        ],
        yAxis: [
          {
            splitLine: { show: false },
            type: "value",
            name: this.$t("dashboard.feedCows"),
            axisLabel: { formatter: "{value}" },
          },
          {
            splitLine: { show: false },
            type: "value",
            name: this.$t("dashboard.signOxs"),
            axisLabel: { formatter: "{value}" },
          },
        ],
        series: [
          {
            name: this.$t("dashboard.feedCow"),
            type: "bar",
            itemStyle: { normal: { color: "#1abd88" } },
            data: chartLine_data.data2,
          },
          {
            name: this.$t("dashboard.table.signOx"),
            type: "line",
            yAxisIndex: 1,
            itemStyle: { normal: { color: "#ff8d78" } },
            data: chartLine_data.data3,
          },
        ],
      };
      this.row4.chart1.chartLine.setOption(option);
      if (this.row4.chart1.chartLine != null) {
        window.onresize = function () {
          this.row4.chart1.chartLine.resize();
        };
      }
    },

    // 混料实际重量统计
    getChart7() {
      this.row4.chart2.listLoading = true;
      GetReportform(this.row4.chart2.getdataListParm).then((response) => {
        if (response.data !== null && response.data.list !== null) {
          console.log("混料实际重量统计数据", response.data.data);
          if (response.data.data) {
            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
                );
              }
            }
          }
          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.row4.chart2.chartLine_data.data1 = [];
        }
        if (this.row4.chart2.chartLine_data.data1.length == 0) {
          this.row4.chart2.chartLine_data.title = this.$t("common.noMsg");
        } else {
          this.row4.chart2.chartLine_data.title = "";
        }
        this.roadChartLine7(this.row4.chart2.chartLine_data);
        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: chartLine_data.title,
          x: "center",
          y: "center",
          textStyle: { color: "#909399", fontWeight: "normal", fontSize: 12 },
        },
        grid: { left: "10%", right: "10%", bottom: "3%", containLabel: true },
        tooltip: { trigger: "axis" },
        legend: { data: [""] },
        xAxis: [
          {
            type: "category",
            data: chartLine_data.data1,
            name: this.$t("dashboard.table.date"),
          },
        ],
        yAxis: [
          {
            type: "value",
            name: this.$t("dashboard.yWeight"),
            axisLabel: { formatter: "{value}" },
          },
        ],
        series: [
          {
            name: this.$t("dashboard.yWeight"),
            type: "bar",
            stack: "广告",
            itemStyle: { normal: { color: "#36C293" } },
            data: chartLine_data.data2,
          },
        ],
      };
      this.row4.chart2.chartLine.setOption(option);
      if (this.row4.chart2.chartLine != null) {
        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' })
      this.$router.push({ name: "Warning", params: { jmp: "jmp" } });
    },
    // 导出
    handleExport(item) {
      console.log(item);
      // 计划统计
      if (item == "row3chartLine1") {
        console.log(this.row3.chart1.table.list);
        var excelDatasTabChart1 = [
          {
            tHeader: this.$t("dashboard.tHeader1"),
            filterVal: [
              "日期",
              "实际量",
              "理论量",
              "field1",
              "计划取消重量",
              "field3",
              "正确数",
              "计划数",
              "field2",
            ],
            tableDatas: this.row3.chart1.table.list,
            sheetName: this.$t("dashboard.sheetName1"),
          },
        ];
        json2excel(
          excelDatasTabChart1,
          this.$t("dashboard.sheetName1"),
          true,
          "xlsx"
        );
      } else if (item == "row3chartLine2") {
        // 泌乳牛采食量
        var excelDatasTabChart2 = [
          {
            tHeader: this.$t("dashboard.tHeader2"),
            filterVal: ["日期", "field1", "field2"],
            tableDatas: this.row3.chart2.table.list,
            sheetName: this.$t("dashboard.sheetName2"),
          },
        ];
        json2excel(
          excelDatasTabChart2,
          this.$t("dashboard.sheetName2"),
          true,
          "xlsx"
        );
      } else if (item == "row4chartLine1") {
        // 成本统计
        console.log("成本统计");
        var excelDatasTabChart2 = [
          {
            tHeader: this.$t("dashboard.tHeader"),
            filterVal: ["日期", "field1", "field2"],
            tableDatas: this.row4.chart1.table.list,
            sheetName: this.$t("dashboard.CostStatistics"),
          },
        ];
        json2excel(
          excelDatasTabChart2,
          this.$t("dashboard.CostStatistics"),
          true,
          "xlsx"
        );
      } else if (item == "row4chartLine2") {
        console.log("混料实际重量统计");
        var excelDatasTabChart4 = [
          {
            tHeader: this.$t("dashboard.tHeader3"),
            filterVal: ["日期", "field1"],
            tableDatas: this.row4.chart2.table.list,
            sheetName: this.$t("dashboard.sheetName3"),
          },
        ];
        json2excel(
          excelDatasTabChart4,
          this.$t("dashboard.sheetName3"),
          true,
          "xlsx"
        );
      }
    },

    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.getChart4();
      } else if (item == "row3chartLine2") {
        console.log("泌乳牛采食量图表");
        this.row3.chart2.isTable = false;
        this.row3.chart2.isChart = true;
        this.getChart5();
      } else if (item == "row4chartLine1") {
        console.log("成本统计图表");
        this.row4.chart1.isTable = false;
        this.row4.chart1.isChart = true;
        this.getChart6();
      } else if (item == "row4chartLine2") {
        console.log("混料实际重量统计图表");
        this.row4.chart2.isTable = false;
        this.row4.chart2.isChart = true;
        this.getChart7();
      }
    },
  },
};
</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;
  color: #333333;
}
.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>

<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: 30px 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;
    }
  }
}
.row1-c-l-b {
  width: 100%;
  text-align: center;
  display: table;
  font-size: 12px;

  &:lang(en) {
    margin: -20px auto;
  }

  // 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: 16px;
    position: absolute;
    top: 7px;
    left: 55px;
    // &:lang(en){
    //   font-size: 16px;
    // }
  }
}
.title1 {
  height: 36px;
  padding-top: 7px;
  line-height: 36px;
  position: relative;
  &:lang(en) {
    line-height: 24px;
    height: 24px;
  }

  .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 10px 16px 20px;
            width: 18px;
            height: 18px;
            background: url(../../../assets/images/index/row-bg2.png) no-repeat;
            background-position: 0 8px;
          }
          .content {
            float: left;
            width: 54%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 14px;
            line-height: 50px;
            padding-left: 3px;
          }
          .img-r {
            float: left;
            padding: 16px 0 16px 17px;
            width: 30px;
            height: 15px;
            background: url(../../../assets/images/index/row-bg2.png) no-repeat;
            background-position: 0 -24px;
          }
        }
        .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;
            text-align: center;
            &:lang(en) {
              height: 84px;
            }
            div {
              flex: 1;
              height: 42px;
              color: #333333;
            }
            .bottom-l {
              border-right: 1px solid #e0e0e0;
              margin-top: 15px;
              width: 100%;
              .bottom-l-t {
                height: 30px;
                b {
                  font-size: 18px;
                }
              }
              .bottom-l-b {
                font-size: 12px;
              }
            }
            .bottom-r {
              margin-top: 15px;
              width: 100%;
              .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;
      .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 {
        height: 140px;
        position: relative;
        .iconLeft {
          width: 32px;
          height: 32px;
          position: absolute;
          top: 46px;
          left: 15px;
          z-index: 1;
        }
        .iconRight {
          width: 32px;
          height: 32px;
          position: absolute;
          top: 46px;
          right: 20px;
          z-index: 1;
        }
        .carList {
          padding: 0 30px;
          height: 120px;
          overflow: hidden;
          display: flex;
          &:lang(en) {
            height: 140px;
          }
          .listW {
            background: #f3f9f7;
            float: left;
            // flex: 1 1;
            margin: 0 5px;
            position: relative;
            width: 50%;
            .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;
                  }
                }
              }
            }
            .img-checked {
              width: 30px;
              height: 28px;
              position: absolute;
              top: 0;
              right: 0;
              background: url(../../../assets/images/index/row-r6.png);
            }
          }
        }
      }
    }

    .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>
