<template>
  <div class="app-container">
    <!-- <h1>牧场</h1> -->
    <div class="search">
      <el-date-picker v-model="table.getdataListParm.parammaps.inputDatetime" :clearable="false" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 250px;" :picker-options="pickerOptions" />
      <el-select v-model="table.getdataListParm.parammaps.lpplantype" placeholder="计划类型" class="filter-item" style="width: 120px;" clearable>
        <el-option v-for="item in planTypeList" :key="item.value" :label="item.lable" :value="item.value" />
      </el-select>
      <el-input v-model="table.getdataListParm.parammaps.tmrtname" placeholder="TMR名称" style="width: 180px;" class="filter-item" clearable />
      <el-select v-model="table.getdataListParm.parammaps.iscompleted" placeholder="工作状态" class="filter-item" style="width: 120px;" clearable>
        <el-option v-for="item in workingConditionList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button class="successBorder" @click="handleSearch">查询</el-button>
      <el-button class="successBorder" @click="handleRefresh">重置</el-button>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <h4>TMR设备列表</h4>
        <div class="table">
          <el-table
            :key="table.tableKey"
            v-loading="table.listLoading"
            element-loading-text="给我一点时间"
            :data="table.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="970px"
            @row-click="rowClick"
          >
            <el-table-column label="开始时间" min-width="100px" align="center" prop="intime" />
            <el-table-column label="计划类型" min-width="80px" align="center" prop="lpplantype" />
            <el-table-column label="描述" min-width="90px" align="center" prop="remark" />
            <el-table-column label="TMR名称" min-width="80px" align="center" prop="tmrtname" />
          </el-table>
        </div>
      </el-col>
      <!-- 预混计划 -->
      <el-col v-if="isPremixedPlan" :span="16">
        <h4>{{ title }}</h4>
        <div class="detail">
          <div class="detail-t">
            过程时间：<span v-if="table2.list.length !== 0">{{ table2.list[0].proesstime }}</span>;
            工作状态：<span v-if="table2.list.length !== 0">{{ table2.list[0].iscompleted }}</span>
          </div>
          <div class="detail-b">
            <span>混料误差值：<span v-if="table2.list.length !== 0">{{ table2.list[0].Hdif }}kg</span>;</span>
            <span>混料准确率：<span v-if="table2.list.length !== 0">{{ table2.list[0].HdifRate }}</span>;</span>
          </div>
        </div>
        <div class="Mixture">
          <h4>混料详情</h4>
          <el-table
            :key="table3.tableKey"
            v-loading="table3.listLoading"
            element-loading-text="给我一点时间"
            :data="table3.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="200px"
            show-summary
          >
            <el-table-column label="操作编号" min-width="70px" align="center" prop="sort" />
            <el-table-column label="饲料名称" min-width="70px" align="center" prop="fname" />
            <el-table-column label="计划重量" min-width="70px" align="center" prop="lweight" />
            <el-table-column label="实际重量" min-width="70px" align="center" prop="actualweightminus" />
            <el-table-column label="误差值" min-width="70px" align="center" prop="diff" />
            <el-table-column label="准确率" min-width="70px" align="center" prop="diffRate" />
            <el-table-column label="完成时间" min-width="70px" align="center" prop="intime" />
            <el-table-column label="过程时间" min-width="70px" align="center" prop="proesstime" />
            <el-table-column label="跳转方式" min-width="70px" align="center" prop="buttontype" />
            <el-table-column label="开始重量" min-width="70px" align="center" prop="lastactualweight" />
            <el-table-column label="结束重量" min-width="70px" align="center" prop="actualweight" />
          </el-table>
        </div>
      </el-col>
      <!-- 撒料计划 -->
      <el-col v-if="isSpreadingPlan" :span="16">
        <h4>{{ title }}</h4>
        <div class="detail">
          <div class="detail-t">
            过程时间：<span v-if="table2.list.length !== 0">{{ table2.list[0].proesstime }}</span>;
            工作状态：<span v-if="table2.list.length !== 0">{{ table2.list[0].iscompleted }}</span>
          </div>
          <div class="detail-b">
            <span>混料误差值：<span v-if="table2.list.length !== 0">{{ table2.list[0].Hdif }}kg</span>;</span>
            <span>混料准确率：<span v-if="table2.list.length !== 0">{{ table2.list[0].HdifRate }}</span>;</span>
            <span>撒料误差值：<span v-if="table2.list.length !== 0">{{ table2.list[0].Sdif }}kg</span>;</span>
            <span>撒料准确率：<span v-if="table2.list.length !== 0">{{ table2.list[0].SdifRate }}</span></span>
          </div>
        </div>
        <div class="Mixture">
          <h4>混料详情</h4>
          <el-table
            :key="table3.tableKey"
            v-loading="table3.listLoading"
            element-loading-text="给我一点时间"
            :data="table3.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="200px"
            show-summary
          >
            <el-table-column label="操作编号" min-width="70px" align="center" prop="sort" />
            <el-table-column label="饲料名称" min-width="70px" align="center" prop="fname" />
            <el-table-column label="计划重量" min-width="50px" align="center" prop="lweight" />
            <el-table-column label="实际重量" min-width="70px" align="center" prop="actualweightminus" />
            <el-table-column label="误差值" min-width="70px" align="center" prop="diff" />
            <el-table-column label="准确率" min-width="70px" align="center" prop="diffRate" />
            <el-table-column label="完成时间" min-width="70px" align="center" prop="intime" />
            <el-table-column label="过程时间" min-width="70px" align="center" prop="proesstime" />
            <el-table-column label="跳转方式" min-width="70px" align="center" prop="buttontype" />
            <el-table-column label="开始重量" min-width="70px" align="center" prop="lastactualweight" />
            <el-table-column label="结束重量" min-width="70px" align="center" prop="actualweight" />
          </el-table>
        </div>

        <div class="SpreadingMaterials">
          <h4>撒料详情</h4>
          <el-table
            :key="table4.tableKey"
            v-loading="table4.listLoading"
            element-loading-text="给我一点时间"
            :data="table4.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="200px"
            show-summary
          >
            <el-table-column label="操作编号" min-width="70px" align="center" prop="sort" />
            <el-table-column label="栏舍名称" min-width="70px" align="center" prop="fname" />
            <el-table-column label="计划重量" min-width="70px" align="center" prop="lweight" />
            <el-table-column label="实际重量" min-width="70px" align="center" prop="actualweightminus" />
            <el-table-column label="误差值" min-width="70px" align="center" prop="diff" />
            <el-table-column label="准确率" min-width="70px" align="center" prop="diffRate" />
            <el-table-column label="完成时间" min-width="70px" align="center" prop="intime" />
            <el-table-column label="过程时间" min-width="70px" align="center" prop="proesstime" />
            <el-table-column label="跳转方式" min-width="70px" align="center" prop="buttontype" />
            <el-table-column label="开始重量" min-width="70px" align="center" prop="lastactualweight" />
            <el-table-column label="结束重量" min-width="70px" align="center" prop="actualweight" />
          </el-table>
        </div>
        <div class="ControlChart">
          <h4>监控图</h4>
          <div id="chartLine" style="width: 100%;height:300px;" />
        </div>
      </el-col>
      <!-- 剩料计划 -->
      <el-col v-if="isResidualMaterialPlan" :span="16">
        <h4>{{ title }}</h4>
        <div class="detail">
          <div class="detail-t">
            过程时间：<span v-if="table2.list.length !== 0">{{ table2.list[0].proesstime }}</span>;
            工作状态：<span v-if="table2.list.length !== 0">{{ table2.list[0].iscompleted }}</span>
          </div>
          <div class="detail-b" />
        </div>
        <div class="Mixture">
          <h4>剩料收集详情</h4>
          <el-table
            :key="table3.tableKey"
            v-loading="table3.listLoading"
            element-loading-text="给我一点时间"
            :data="table3.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="200px"
            show-summary
          >
            <el-table-column label="操作编号" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sort }}</span>
              </template>
            </el-table-column>
            <el-table-column label="栏舍名称" min-width="90px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.fname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="剩料采集重量（kg）" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sweight }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="SpreadingMaterials">
          <h4>撒料详情</h4>
          <el-table
            :key="table4.tableKey"
            v-loading="table4.listLoading"
            :span-method="objectSpanMethod"
            element-loading-text="给我一点时间"
            :data="table4.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="200px"
            show-summary
          >
            <el-table-column label="操作编号" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sort }}</span>
              </template>
            </el-table-column>
            <el-table-column label="转投栏舍" min-width="90px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.fname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="允许分配剩料量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.lweight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实际分配重量（kg）" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.actualweightminus }}</span>
              </template>
            </el-table-column>
            <el-table-column label="废弃剩料重量" min-width="110px" align="center" prop="aweight">
              <template slot-scope="scope">
                <span>{{ scope.row.aweight }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <!-- 撒料计划-混料 -->
      <el-col v-if="isSpreadingPlanSH" :span="16">
        <h4>{{ title }}</h4>
        <div class="detail">
          <div class="detail-t">
            过程时间：<span v-if="table2.list.length !== 0">{{ table2.list[0].proesstime }}</span>;
            工作状态：<span v-if="table2.list.length !== 0">{{ table2.list[0].iscompleted }}</span>
          </div>
          <div class="detail-b">
            <span>混料误差值：<span v-if="table2.list.length !== 0">{{ table2.list[0].Hdif }}kg</span>;</span>
            <span>混料准确率：<span v-if="table2.list.length !== 0">{{ table2.list[0].HdifRate }}</span>;</span>
            <span>撒料误差值：<span v-if="table2.list.length !== 0">{{ table2.list[0].Sdif }}kg</span>;</span>
            <span>撒料准确率：<span v-if="table2.list.length !== 0">{{ table2.list[0].SdifRate }}</span></span>
          </div>
        </div>
        <div class="Mixture">
          <h4>混料详情</h4>
          <el-table
            :key="table3.tableKey"
            v-loading="table3.listLoading"
            element-loading-text="给我一点时间"
            :data="table3.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="200px"
            show-summary
          >
            <el-table-column label="操作编号" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sort }}</span>
              </template>
            </el-table-column>
            <el-table-column label="饲料名称" min-width="90px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.fname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="计划重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.lweight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实际重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.actualweightminus }}</span>
              </template>
            </el-table-column>
            <el-table-column label="误差值" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.diff }}</span>
              </template>
            </el-table-column>
            <el-table-column label="准确率" min-width="90px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.diffRate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="完成时间" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.intime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="过程时间" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.proesstime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="跳转方式" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.buttontype }}</span>
              </template>
            </el-table-column>
            <el-table-column label="开始重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.lastactualweight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="结束重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.actualweight }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="SpreadingMaterials">
          <h4>撒料详情</h4>
          <el-table
            :key="table4.tableKey"
            v-loading="table4.listLoading"
            element-loading-text="给我一点时间"
            :data="table4.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="200px"
            show-summary
          >
            <el-table-column label="操作编号" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sort }}</span>
              </template>
            </el-table-column>
            <el-table-column label="撒料车辆" min-width="90px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.fname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="计划重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.lweight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实际重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.actualweightminus }}</span>
              </template>
            </el-table-column>
            <el-table-column label="误差值" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.diff }}</span>
              </template>
            </el-table-column>
            <el-table-column label="准确率" min-width="90px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.diffRate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="完成时间" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.intime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="过程时间" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.proesstime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="跳转方式" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.buttontype }}</span>
              </template>
            </el-table-column>
            <el-table-column label="开始重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.lastactualweight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="结束重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.actualweight }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="ControlChart">
          <h4>监控图</h4>
          <div id="chartLine" style="width: 100%;height:300px;" />
        </div>
      </el-col>
      <!-- 撒料计划-撒料 -->
      <el-col v-if="isSpreadingPlanSS" :span="16">
        <h4>{{ title }}</h4>
        <div class="detail">
          <div class="detail-t">
            过程时间：<span v-if="table2.list.length !== 0">{{ table2.list[0].proesstime }}</span>;
            工作状态：<span v-if="table2.list.length !== 0">{{ table2.list[0].iscompleted }}</span>
          </div>
          <div class="detail-b">
            <span>混料误差值：<span v-if="table2.list.length !== 0">{{ table2.list[0].Hdif }}kg</span>;</span>
            <span>混料准确率：<span v-if="table2.list.length !== 0">{{ table2.list[0].HdifRate }}</span>;</span>
            <span>撒料误差值：<span v-if="table2.list.length !== 0">{{ table2.list[0].Sdif }}kg</span>;</span>
            <span>撒料准确率：<span v-if="table2.list.length !== 0">{{ table2.list[0].SdifRate }}</span></span>
          </div>
        </div>
        <div class="Mixture">
          <h4>混料详情</h4>
          <el-table
            :key="table3.tableKey"
            v-loading="table3.listLoading"
            element-loading-text="给我一点时间"
            :data="table3.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="200px"
            show-summary
          >
            <el-table-column label="操作编号" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sort }}</span>
              </template>
            </el-table-column>
            <el-table-column label="撒料车辆" min-width="90px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.fname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="计划重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.lweight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实际重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.actualweightminus }}</span>
              </template>
            </el-table-column>
            <el-table-column label="误差值" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.diff }}</span>
              </template>
            </el-table-column>
            <el-table-column label="准确率" min-width="90px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.diffRate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="完成时间" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.intime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="过程时间" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.proesstime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="跳转方式" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.buttontype }}</span>
              </template>
            </el-table-column>
            <el-table-column label="开始重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.lastactualweight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="结束重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.actualweight }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="SpreadingMaterials">
          <h4>撒料详情</h4>
          <el-table
            :key="table4.tableKey"
            v-loading="table4.listLoading"
            element-loading-text="给我一点时间"
            :data="table4.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="200px"
            show-summary
          >
            <el-table-column label="操作编号" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sort }}</span>
              </template>
            </el-table-column>
            <el-table-column label="撒料车辆" min-width="90px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.fname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="计划重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.lweight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实际重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.actualweightminus }}</span>
              </template>
            </el-table-column>
            <el-table-column label="误差值" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.diff }}</span>
              </template>
            </el-table-column>
            <el-table-column label="准确率" min-width="90px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.diffRate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="完成时间" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.intime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="过程时间" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.proesstime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="跳转方式" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.buttontype }}</span>
              </template>
            </el-table-column>
            <el-table-column label="开始重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.lastactualweight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="结束重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.actualweight }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="ControlChart">
          <h4>监控图</h4>
          <div id="chartLine" style="width: 100%;height:300px;" />
        </div>
      </el-col>

    </el-row>

  </div>

</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons')
import { GetDataByName, GetReportform } from '@/api/common'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
export default {
  name: 'PastureProcessAnalysis',
  data() {
    return {
      title: '',
      isPremixedPlan: '', // 预混计划
      isSpreadingPlan: '', // 撒料计划
      isResidualMaterialPlan: '', // 剩料计划,
      isSpreadingPlanSH: '', // 撒料计划-混料
      isSpreadingPlanSS: '', // 撒料计划-撒料
      pickerMinDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime()
          if (maxDate) {
            this.pickerMinDate = ''
          }
        },
        // 限制不能选择今天之后的日期
        disabledDate: (time) => {
          if (this.pickerMinDate !== '') {
            const one = 31 * 24 * 3600 * 1000
            const minTime = this.pickerMinDate - one
            let maxTime = this.pickerMinDate + one
            if (maxTime > new Date()) {
              maxTime = new Date()
            }
            return time.getTime() < minTime || time.getTime() > maxTime
          }
          return time.getTime() > Date.now()
        }
      },
      requestParams: [
        { name: 'getBarListEnable', offset: 0, pagecount: 0, parammaps: { 'pastureid': Cookies.get('pastureid') }},
        { name: 'getCowclassListEnable', offset: 0, pagecount: 0, parammaps: { 'pastureid': Cookies.get('pastureid') }}
      ],
      planTypeList: [{ lable: '预混计划', value: '4' }, { lable: '撒料计划', value: '0' }, { lable: '剩料计划', value: '3' }, { lable: '撒料计划-混料', value: '1' }, { lable: '撒料计划-撒料', value: '2' }, { lable: '预称重计划', value: '5' }], // 计划类型
      workingConditionList: [{ id: '0', name: '进行中' }, { id: '1', name: '已完成' }], // 工作状态
      // TMR设备列表
      table: {
        getdataListParm: {
          name: 'getprocessAnalysis',
          page: 1,
          offset: 1,
          pagecount: '',
          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()],
            iscompleted: '',
            tmrtname: '',
            lpplantype: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true
      },
      // 过程详情
      table2: {
        getdataListParm: {
          name: 'getprocessAnalysisStr',
          page: 1,
          offset: 1,
          pagecount: 1,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            id: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true
      },
      // 混料详情
      table3: {
        getdataListParm: {
          name: 'getprocessAnalysisHL',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            id: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true
      },
      // 撒料详情
      table4: {
        getdataListParm: {
          name: 'getprocessAnalysisSL',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            id: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true
      },
      chart1: {
        getdataListParm: {
          name: 'getprocessAnalysisTB',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            id: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: false,
        chartLine_data: []
      },
      chartLine: null,
      chartLine_data: {},
      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },
  created() {
    this.getList()
  },
  methods: {

    // TMR设备列表
    getList() {
      this.table.listLoading = true
      GetDataByName(this.table.getdataListParm).then(response => {
        console.log('TMR设备列表table数据', response.data.list)
        if (response.data.list !== null) {
          this.table.list = response.data.list
          if (response.data.list[0].lpplantype == '预混计划') {
            this.isPremixedPlan = true
            this.isSpreadingPlan = false
            this.isResidualMaterialPlan = false
            this.isSpreadingPlanSH = false
            this.isSpreadingPlanSS = false
            this.table2.getdataListParm.parammaps.id = response.data.list[0].id
            this.table3.getdataListParm.parammaps.pid = response.data.list[0].id
            this.getList2()
            this.getList3()
          } else if (response.data.list[0].lpplantype == '剩料计划') {
            this.isResidualMaterialPlan = true
            this.isPremixedPlan = false
            this.isSpreadingPlan = false
            this.isSpreadingPlanSH = false
            this.isSpreadingPlanSS = false
            this.table2.getdataListParm.name = 'getprocessAnalysisStrSH'
            this.table3.getdataListParm.name = 'getprocessAnalysisHLSH'
            this.table4.getdataListParm.name = 'getprocessAnalysisSLSH'
            this.table2.getdataListParm.parammaps.id = response.data.list[0].id
            this.table3.getdataListParm.parammaps.pid = response.data.list[0].id
            this.table4.getdataListParm.parammaps.pid = response.data.list[0].id
            this.getList2()
            this.getList3()
            this.getList4()
          } else if (response.data.list[0].lpplantype == '撒料计划-混料') {
            // 撒料计划-混料
            this.isSpreadingPlan = false
            this.isResidualMaterialPlan = false
            this.isPremixedPlan = false
            this.isSpreadingPlanSH = true
            this.isSpreadingPlanSS = false
            this.table2.getdataListParm.parammaps.id = response.data.list[0].id
            this.table3.getdataListParm.parammaps.pid = response.data.list[0].id
            this.table4.getdataListParm.parammaps.pid = response.data.list[0].id
            this.getList2()
            this.getList3()
            this.getList4()
            this.chart1.getdataListParm.parammaps.pid = response.data.list[0].id
            this.getChart1()
          } else if (response.data.list[0].lpplantype == '撒料计划-撒料') {
            // 撒料计划-撒料
            this.isSpreadingPlan = false
            this.isResidualMaterialPlan = false
            this.isPremixedPlan = false
            this.isSpreadingPlanSH = false
            this.isSpreadingPlanSS = true
            this.table2.getdataListParm.parammaps.id = response.data.list[0].id
            this.table3.getdataListParm.parammaps.pid = response.data.list[0].id
            this.table4.getdataListParm.parammaps.pid = response.data.list[0].id
            this.getList2()
            this.getList3()
            this.getList4()
            this.chart1.getdataListParm.parammaps.pid = response.data.list[0].id
            this.getChart1()
          } else if (response.data.list[0].lpplantype == '预称重计划') {
            // 撒料计划-混料
            this.isSpreadingPlan = false
            this.isResidualMaterialPlan = false
            this.isPremixedPlan = false
            this.isSpreadingPlanSH = true
            this.isSpreadingPlanSS = false
            this.table2.getdataListParm.parammaps.id = response.data.list[0].id
            this.table3.getdataListParm.parammaps.pid = response.data.list[0].id
            this.table4.getdataListParm.parammaps.pid = response.data.list[0].id
            this.getList2()
            this.getList3()
            this.getList4()
            this.chart1.getdataListParm.parammaps.pid = response.data.list[0].id
            this.getChart1()
          } else {
            // 撒料
            this.isSpreadingPlan = true
            this.isResidualMaterialPlan = false
            this.isPremixedPlan = false
            this.isSpreadingPlanSH = false
            this.isSpreadingPlanSS = false
            this.table2.getdataListParm.parammaps.id = response.data.list[0].id
            this.table3.getdataListParm.parammaps.pid = response.data.list[0].id
            this.table4.getdataListParm.parammaps.pid = response.data.list[0].id
            this.getList2()
            this.getList3()
            this.getList4()
            this.chart1.getdataListParm.parammaps.pid = response.data.list[0].id
            this.getChart1()
          }
          this.title = '过程详情-' + response.data.list[0].lpplantype
        } else {
          this.table.list = []
          this.table2.list = []
          this.table3.list = []
          this.table2.listLoading = false
          this.table3.listLoading = false
          this.table4.listLoading = false
          this.chart1.listLoading = false
        }
        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    },
    handleSearch() {
      console.log('点击了查询')
      if (this.table.getdataListParm.parammaps.inputDatetime !== '' && this.table.getdataListParm.parammaps.inputDatetime !== null) {
        this.table.getdataListParm.parammaps.startTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
        this.table.getdataListParm.parammaps.stopTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
      } else {
        this.table.getdataListParm.parammaps.inputDatetime = ''
        this.table.getdataListParm.parammaps.startTime = ''
        this.table.getdataListParm.parammaps.stopTime = ''
      }
      this.table.getdataListParm.offset = 1
      this.getList()
    },
    handleRefresh() {
      console.log('点击了重置')
      this.table.getdataListParm.parammaps.tmrtname = ''
      this.table.getdataListParm.parammaps.iscompleted = ''
      this.table.getdataListParm.parammaps.lpplantype = ''
      this.table.getdataListParm.parammaps.startTime = parseTime(new Date(), '{y}-{m}-{d}')
      this.table.getdataListParm.parammaps.stopTime = parseTime(new Date(), '{y}-{m}-{d}')
      this.table.getdataListParm.parammaps.inputDatetime = [new Date(), new Date()]
      this.table.getdataListParm.offset = 1
      this.getList()
    },
    rowClick(row, column, event) {
      this.table2.getdataListParm.parammaps.id = row.id
      this.table3.getdataListParm.parammaps.pid = row.id
      this.table4.getdataListParm.parammaps.pid = row.id
      this.chart1.getdataListParm.parammaps.pid = row.id
      if (row.lpplantype == '预混计划') {
        this.isPremixedPlan = true
        this.isResidualMaterialPlan = false
        this.isSpreadingPlan = false

        this.isSpreadingPlanSH = false
        this.isSpreadingPlanSS = false
        this.table2.getdataListParm.name = 'getprocessAnalysisStr'
        this.table3.getdataListParm.name = 'getprocessAnalysisHL'
        this.getList2()
        this.getList3()
      } else if (row.lpplantype == '剩料计划') {
        this.isResidualMaterialPlan = true
        this.isPremixedPlan = false
        this.isSpreadingPlan = false

        this.isSpreadingPlanSH = false
        this.isSpreadingPlanSS = false
        this.table2.getdataListParm.name = 'getprocessAnalysisStrSH'
        this.table3.getdataListParm.name = 'getprocessAnalysisHLSH'
        this.table4.getdataListParm.name = 'getprocessAnalysisSLSH'
        this.getList2()
        this.getList3()
        this.getList4()
      } else if (row.lpplantype == '撒料计划-混料') {
        this.isSpreadingPlan = false
        this.isPremixedPlan = false
        this.isResidualMaterialPlan = false
        this.isSpreadingPlanSH = true
        this.isSpreadingPlanSS = false
        this.table2.getdataListParm.name = 'getprocessAnalysisStr'
        this.table3.getdataListParm.name = 'getprocessAnalysisHL'
        this.table4.getdataListParm.name = 'getprocessAnalysisSL'
        this.getList2()
        this.getList3()
        this.getList4()
        this.getChart1()
      } else if (row.lpplantype == '撒料计划-撒料') {
        this.isSpreadingPlan = false
        this.isPremixedPlan = false
        this.isResidualMaterialPlan = false
        this.isSpreadingPlanSH = false
        this.isSpreadingPlanSS = true
        this.table2.getdataListParm.name = 'getprocessAnalysisStr'
        this.table3.getdataListParm.name = 'getprocessAnalysisHL'
        this.table4.getdataListParm.name = 'getprocessAnalysisSL'
        this.getList2()
        this.getList3()
        this.getList4()
        this.getChart1()
      } else if (row.lpplantype == '预称重计划') {
        this.isSpreadingPlan = false
        this.isPremixedPlan = false
        this.isResidualMaterialPlan = false
        this.isSpreadingPlanSH = true
        this.isSpreadingPlanSS = false
        this.table2.getdataListParm.name = 'getprocessAnalysisStr'
        this.table3.getdataListParm.name = 'getprocessAnalysisHL'
        this.table4.getdataListParm.name = 'getprocessAnalysisSL'
        this.getList2()
        this.getList3()
        this.getList4()
        this.getChart1()
      } else {
        this.isSpreadingPlan = true
        this.isPremixedPlan = false
        this.isResidualMaterialPlan = false
        this.isSpreadingPlanSH = false
        this.isSpreadingPlanSS = false

        this.table2.getdataListParm.name = 'getprocessAnalysisStr'
        this.table3.getdataListParm.name = 'getprocessAnalysisHL'
        this.table4.getdataListParm.name = 'getprocessAnalysisSL'
        this.getList2()
        this.getList3()
        this.getList4()
        this.getChart1()
      }
      this.title = '过程详情-' + row.lpplantype
    },
    // 过程详情
    getList2() {
      this.table2.listLoading = false
      GetDataByName(this.table2.getdataListParm).then(response => {
        console.log('过程详情table数据', response.data.list)
        if (response.data.list !== null) {
          this.table2.list = response.data.list
        } else {
          this.table2.list = []
        }
        setTimeout(() => {
          this.table2.listLoading = false
        }, 100)
      })
    },
    // 混料详情
    getList3() {
      this.table3.listLoading = false
      GetDataByName(this.table3.getdataListParm).then(response => {
        console.log('混料详情table数据', response.data.list)
        if (response.data.list !== null) {
          this.table3.list = response.data.list
        } else {
          this.table3.list = []
        }
        setTimeout(() => {
          this.table3.listLoading = false
        }, 100)
      })
    },
    // 撒料详情
    getList4() {
      this.table4.listLoading = false
      GetDataByName(this.table4.getdataListParm).then(response => {
        console.log('撒料详情table数据', response.data.list)
        if (response.data.list !== null) {
          this.table4.list = response.data.list
          this.rowspan()
        } else {
          this.table4.list = []
        }
        setTimeout(() => {
          this.table4.listLoading = false
        }, 100)
      })
    },
    rowspan() {
      this.spanArr = []
      this.table4.list.forEach((item, index) => {
        if (index == 0) {
          this.spanArr.push(1)
          this.position = 0
        } else {
          console.log(item, index, '======')
          if (this.table4.list[index].aweight == this.table4.list[index - 1].aweight) {
            this.spanArr[this.position] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.position = index
          }
        }
      })
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 4) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    getChart1() {
      this.chart1.listLoading = true
      GetReportform(this.chart1.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.chart1.list = response.data.data
          console.log('实时监控', response.data.list)
          // console.log('实时监控', response.data.list.data4)
          var evenNumbers = []// 偶数
          var oddNumbers = []// 奇数
          for (let i = 0; i < response.data.list.data4.length; i++) {
            console.log(response.data.list.data4[i])
            if (i == 0) {
              oddNumbers.push(response.data.list.data4[i])
            } else {
              if (i % 2 == 0) {
                evenNumbers.push(response.data.list.data4[i])
              } else {
                oddNumbers.push(response.data.list.data4[i])
              }
            }
          }
          response.data.list.data4 = oddNumbers
          response.data.list.data5 = evenNumbers
          this.chart1.chartLine_data = response.data.list
          this.chart1.total = response.data.total
          this.roadChartLine1(this.chart1.chartLine_data)
        } else {
          this.chart1.list = []
        }
        setTimeout(() => {
          this.chart1.listLoading = false
        }, 100)
      })
    },
    roadChartLine1(chartLine_data) {
      if (this.chartLine != null) {
        this.chartLine.dispose()
      }
      this.chartLine = echarts.init(document.getElementById('chartLine'))
      var option = {
        title: {
          text: '',
          subtext: ''
        },
        color: ['#38c193', '#5199e5', '#fdb06a', '#fb8b73'], // 关键加上这句话，legend的颜色和折线的自定义颜色就一致了
        legend: [{
          itemWidth: 15, itemHeight: 7, right: '25%', textStyle: { fontSize: 12 },
          data: [{ name: '设计重量' }, { name: '实际重量' }]
        }, {
          itemWidth: 15, itemHeight: 15, right: '0', textStyle: { fontSize: 12 },
          data: [{ name: '开始重量', icon: 'image://https://kptyun.cn:8081/file/pic/3.png' }, { name: '结束重量', icon: 'image://https://kptyun.cn:8081/file/pic/4.png' }]
        }],
        tooltip: {
          trigger: 'axis'
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            splitLine: { show: false }, // 去除网格线
            name: '时间',
            data: chartLine_data.data1,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#666' // 这里用参数代替了
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            symbol: 'none',
            name: '实际重量',
            type: 'line',
            // step: 'end',
            data: chartLine_data.data3,
            smooth: true,
            barWidth: '37',
            itemStyle: {
              normal: {
                lineStyle: { color: '#ff3131' }
              }
            }
          },
          {
            symbol: 'none',
            name: '设计重量',
            type: 'line',
            step: 'middle',
            // symbol: 'rect',
            // symbolSize: [100, 2],
            // label: { show: true, formatter: '{b}  {c}kg' },
            data: chartLine_data.data2
          }, , {
            name: '开始重量',
            symbol: 'image://https://kptyun.cn:8081/file/pic/3.png',
            symbolSize: 10,
            type: 'scatter',
            data: chartLine_data.data4
          }, {
            name: '结束重量',
            symbol: 'image://https://kptyun.cn:8081/file/pic/4.png',
            symbolSize: 10,
            type: 'scatter',
            data: chartLine_data.data5
          }]
      }
      this.chartLine.setOption(option)
      window.onresize = function() {
        this.chartLine.resize()
      }
    }

  }
}

</script>
<style lang="scss" scoped>
  .search{padding-top:10px;clear: both;}
  .table{margin-top:10px;}
  .detail{
    height:84px;border: 1px solid #EBEEF5;padding-left:10px;font:16px/32px '';color:#333;
    .detail-t{margin-top: 10px;}
    .detail-b{margin-bottom: 10px;}
  }
</style>