<template>
  <div class="fullHeight">
    <div>
      <!-- <iframe src="http://101.43.164.214:11114/#/headNoise?token=bssbd" frameborder="0" style="width: 200px;height: 100px"></iframe> -->
      <div class="searchBox whiteBlock">
        <el-form :inline="true" size="medium" :model="queryInfo" class="demo-form-inline">
          <el-form-item label="设备名称">
            <el-select v-model="queryInfo.devName" placeholder="请选择" clearable>
              <el-option v-for="(item, index) in devOptions" :key="index" :label="item.devName" :value="item.devSn"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="使用层">
            <el-input v-model="queryInfo.useLayer" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item label="配比名称">
            <el-input v-model="queryInfo.proportionName" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryInfo.useStatus" placeholder="请选择" clearable>
              <el-option v-for="(item, index) in nameOptions" :key="index" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出料时间">
            <el-date-picker
              v-model="daterange"
              @change="changeDate"
              type="daterange"
              :range-separator="$t('message.energyManage.to')"
              :start-placeholder="$t('message.energyManage.start')"
              :end-placeholder="$t('message.energyManage.end')"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="getProgressListData">查询</el-button>
            <el-button type="warning" plain @click="refreshBtn">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table_wrap whiteBlock">
        <vue-scroll>
          <el-table height="650" class="tables" :data="listData" lazy row-key="id">
            <el-table-column align="center" prop="devName" label="设备名称"> </el-table-column>
            <el-table-column align="center" prop="taskNumber" label="任务单号"></el-table-column>
            <el-table-column align="center" prop="projectName" label="工程名称"> </el-table-column>
            <el-table-column align="center" prop="constructionSite" label="施工地点"></el-table-column>
            <el-table-column align="center" prop="useLayer" label="使用层"></el-table-column>
            <el-table-column align="center" prop="proportionName" label="配比名称"></el-table-column>
            <el-table-column align="center" prop="plateWeight" label="盘重"></el-table-column>
            <el-table-column align="center" prop="whetstoneRatio" label="油石比"></el-table-column>
            <el-table-column align="center" prop="dischargeTime" label="出料时间"></el-table-column>
            <!-- <el-table-column align="center" prop="kzdj" label="使用状态"></el-table-column> -->
            <!-- <el-table-column align="center" prop="sj" label="司机"></el-table-column>
            <el-table-column align="center" prop="clmc" label="材料名称"></el-table-column>
            <el-table-column align="center" prop="cldsfid" label="材料第三方ID"></el-table-column> -->
            <el-table-column align="center" prop="useStatus" label="状态">
              <template slot-scope="scope">
                <div class="" v-if="scope.row.useStatus">
                  <div v-if="scope.row.useStatus == 5" style="color:red">
                    {{ nameOptions[scope.row.useStatus - 1].label }}
                  </div>
                  <div v-else>
                    {{ nameOptions[scope.row.useStatus - 1].label }}
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <div class="">
                  <div class="operationText" @click.stop="openDetail(scope.row)">
                    <i class="el-icon-tickets" style="color: #8dacfa; font-size: 16px; margin-right: 2px"></i>
                    <span style="white-space: nowrap;">详情</span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </vue-scroll>
        <el-pagination
          class="pagerBox"
          style="position: absolute; top: 85%; left: 40%"
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="pagInfo.pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="pagInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="Number(pagInfo.total)"
          background
        ></el-pagination>
      </div>
    </div>
    <el-dialog :modal-append-to-body="false" @close="close" title="生产数据详情" :visible.sync="dialogShow" width="1250px">
      <div class="dialog-content">
        <div class="detail-form">
          <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="220px">
            <el-form-item label="任务单号" label-width="150px" style="margin-left: 20px">
              <el-input v-model="formInline.taskNumber" placeholder="" :disabled="true" style="width: 360px;"></el-input>
            </el-form-item>
            <el-form-item label="工程名称" label-width="150px" style="margin-left: 20px">
              <el-input v-model="formInline.projectName" placeholder="" :disabled="true" style="width: 360px;"></el-input>
            </el-form-item>
            <el-form-item label="施工地点" label-width="150px" style="margin-left: 20px">
              <el-input v-model="formInline.constructionSite" placeholder="" :disabled="true" style="width: 360px;"></el-input>
            </el-form-item>
            <el-form-item label="设备名称" label-width="150px" style="margin-left: 20px">
              <el-input v-model="formInline.devName" placeholder="" :disabled="true" style="width: 360px;"></el-input>
            </el-form-item>
            <el-form-item label="设备编号" label-width="150px" style="margin-left: 20px">
              <el-input v-model="formInline.devSn" placeholder="" :disabled="true" style="width: 360px;"></el-input>
            </el-form-item>
            <el-form-item label="试验员" label-width="150px" style="margin-left: 20px">
              <el-input v-model="formInline.operator" placeholder="" :disabled="true" style="width: 360px;"></el-input>
            </el-form-item>
            <el-form-item label="出料时间" label-width="150px" style="margin-left: 20px">
              <el-date-picker
                :disabled="true"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="formInline.dischargeTime"
                type="datetime"
                placeholder=""
                style="width: 360px;"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="使用层" label-width="150px" style="margin-left: 20px">
              <el-input v-model="formInline.useLayer" placeholder="" :disabled="true" style="width: 360px;"></el-input>
            </el-form-item>
            <el-form-item label="配比名称" label-width="150px" style="margin-left: 20px">
              <el-input v-model="formInline.proportionName" placeholder="" :disabled="true" style="width: 360px;"></el-input>
            </el-form-item>
            <el-form-item label="盘重" label-width="150px" style="margin-left: 20px">
              <el-input v-model="formInline.plateWeight" placeholder="" :disabled="true" style="width: 360px;"></el-input>
            </el-form-item>
            <el-form-item label="油石比" label-width="150px" style="margin-left: 20px">
              <el-input v-model="formInline.whetstoneRatio" placeholder="" :disabled="true" style="width: 360px;"></el-input>
            </el-form-item>
            <el-form-item label="状态" label-width="150px" style="margin-left: 20px;">
              <el-select style="width: 360px;" :disabled="true" v-model="formInline.useStatus" placeholder="请选择" clearable>
              <el-option v-for="(item, index) in nameOptions" :key="index" :label="item.label" :value="item.value"> </el-option>
            </el-select>
            </el-form-item>
            <!-- <el-form-item label="机组编号" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.jzbh" placeholder="" :disabled="true" style="width: 260px;"></el-input>
            </el-form-item>
            <el-form-item label="任务编号" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.rwbh" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="材料规格型号" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.clggxh" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="试验员" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.czy" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="强度等级" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.qddj" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="材料名称" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.clmc" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="同步编码" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.tbbm" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="配比编号" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.pbbh" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="计量单位" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.jldw" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="生产数量" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.scsl" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="塌落度" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.tld" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="收料单位" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.sldw" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="创建时间" label-width="100px" style="margin-left: 20px">
              <el-date-picker
                :disabled="true"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="formInline.createDate"
                type="datetime"
                placeholder=""
                style="width: 260px;"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="抗冻等级" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.kddj" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="工程名称" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.gcmc" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="机组" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.jzbh" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="抗渗等级" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.ksdj" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="使用部位" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.sybw" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="删除标识" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.scbzName" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="抗折等级" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.kzdj" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="骨粒最大粒径" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.glzdlj" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="生产/发料时间" label-width="110px" style="margin-left: 10px">
              <el-input
                :disabled="true"
                placeholder="请输入内容"
                prefix-icon="el-icon-time"
                v-model="formInline.scsj"
                style="width: 260px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="司机" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.sj" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="车牌号" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.cph" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="部位第三方ID" label-width="100px" style="margin-left: 20px">
              <el-input v-model="formInline.bwsfid" placeholder="" style="width: 260px;" :disabled="true"></el-input>
            </el-form-item> -->
          </el-form>
        </div>
        <div class="detail-list">
          <div class="whiteBlock">
            <vue-scroll>
              <el-table class="tables" :data="diskOrderList" lazy row-key="id" style="min-height: 350px">
                <el-table-column align="center" prop="materialName" label="材料名称"> </el-table-column>
                <el-table-column align="center" prop="theoreticalDosage" label="理论用量(kg)"></el-table-column>
                <el-table-column align="center" prop="actualAmount" label="实际用量(kg)"></el-table-column>
                <el-table-column align="center" prop="error" label="误差(%)"> </el-table-column>
                <!-- <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <div class="">
                      <div class="operationText" @click.stop="openDetailList(scope.row)">
                        <i class="el-icon-tickets" style="color: #8dacfa; font-size: 16px; margin-right: 2px"></i>
                        <span style="white-space: nowrap;">详情</span>
                      </div>
                    </div>
                  </template>
                </el-table-column> -->
              </el-table>
            </vue-scroll>
            <el-pagination
              class="pagerBox"
              style="position: absolute; bottom: 3%; left: 40%"
              @size-change="diskSizeChange"
              @current-change="diskCurrentChange"
              :current-page="diskInfo.pageNo"
              :page-sizes="$store.state.PAGESIZRS"
              :page-size="diskInfo.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="Number(diskInfo.total)"
              background
            ></el-pagination>
          </div>
        </div>
      </div>
      <el-dialog width="50%" title="原料详情" :visible.sync="showDetailLine" append-to-body :lazy="true" @close="materialClose">
        <div class="line-dialog">
          <div class="table_wrap whiteBlock">
            <vue-scroll>
              <el-table height="650" class="tables" :data="materialOrderList" lazy row-key="id">
                <el-table-column align="center" prop="jzyc" label="机组原材"> </el-table-column>
                <el-table-column align="center" prop="clmc" label="材料名"></el-table-column>
                <el-table-column align="center" prop="clbm" label="材料编码"></el-table-column>
                <el-table-column align="center" prop="cldsfid" label="材料第三方ID"> </el-table-column>
                <el-table-column align="center" prop="clggxh" label="材料规格型号"></el-table-column>
                <el-table-column align="center" prop="jldw" label="计量单位"></el-table-column>
                <el-table-column align="center" prop="bzhl" label="标准耗量"></el-table-column>
                <el-table-column align="center" prop="sjhl" label="实际耗量"></el-table-column>
              </el-table>
            </vue-scroll>
            <el-pagination
              class="pagerBox"
              style="position: absolute; top: 85%; left: 40%"
              @size-change="materialSizeChange"
              @current-change="materialCurrentChange"
              :current-page="materialInfo.pageNo"
              :page-sizes="$store.state.PAGESIZRS"
              :page-size="materialInfo.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="Number(pagInfo.total)"
              background
            ></el-pagination>
          </div>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script>
import {
  stableWaterMixDataPage,
  stableWaterMixSetDataPage,
  stableWaterMixDevList,
} from '@/assets/js/api/asphaltMixStation.js'

export default {
  components: {},
  mounted() {
    // this.createdEcharts()
  },
  data() {
    return {
      materialDetailId: "",
      diskDetailId: "", //ID
      materialOrderList: [], //材料列表
      section: '', // 断面
      diskOrderList: [],
      detailData: {},
      dialogShow: false, //详情弹窗
      showDetailLine: false, // 详情内详情弹窗
      rowData: {},
      parentTaskName: '', // 用于存储父级taskName
      // 使用状态：1正常2初级超标3中级超标4高级超标5异常
      nameOptions: [
        {
          label: '正常',
          value: 1
        },
        {
          label: '初级超标',
          value: 2
        },
        {
          label: '中级超标',
          value: 3
        },
        {
          label: '高级超标',
          value: 4
        },
        {
          label: '异常',
          value: 5
        },
        
      ],
      devOptions: [
        {
          label: '设备',
          value: 0
        },
        {
          label: '设备1',
          value: 1
        },
        {
          label: '设备2',
          value: 2
        }
      ],
      pagInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0 //总条数
      },
      diskInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0 //总条数
      },
      materialInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0 //总条数
      },
      
      radio: 1,
      title: '',
      daterange: [],
      projectSn: '',
      createUserId: '',
      listData: [],
      uploadUrl: '',
      fileUrl: '',
      dialogVisible: false, //新增弹窗
      workerInfo: {
        taskName: '',
        startDate: '',
        finishDate: '',
        actualStartDate: '',
        actualFinishDate: '',
        dutyUserId: '',
        progressRatio: '',
        remark: '',
        parentId: 0,
        status: 0
      },
      principalLsit: [], //负责人
      seedId: '',
      showTime: false, //工期
      queryInfo: {
        useLayer: '',
        proportionName: '',
        devName: '',
        useStatus: '',
      },
      formInline: {
        bwsfid: ' ',
        clbm: ' ',
        cldsfid: ' ',
        clggxh: ' ',
        clmc: ' ',
        cph: ' ',
        createDate: ' ',
        czy: ' ',
        devSn: ' ',
        gcmc: ' ',
        glzdlj: ' ',
        id: 0,
        jldw: ' ',
        jzbh: ' ',
        kddj: ' ',
        ksdj: ' ',
        kzdj: ' ',
        pbbh: ' ',
        qddj: ' ',
        rwbh: ' ',
        scbz: ' ',
        scsj: ' ',
        scsl: 0
      },
      dialogImageUrl: '',
      showBigImg: false,
      times: '',
      fileName: '',
      xData: ['0', '25', '50', '75', '100', '125', '150'],
      yData1: [820, 932, 901, 934, 1290, 1330, 1320],
      yData2: [820, 932, 901, 934, 1290, 1330, 1320],
      yData3: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  },
  computed: {
    headers() {
      return { Authorization: this.$store.state.userInfo.token }
    },
    dateAfter() {
      // 动态起始时间
      const startTimestamp = Date.now() * 1 - 24 * 60 * 60 * 1000
      const endTimestamp = Date.parse(this.workerInfo.finishDate) * 1 - 24 * 60 * 60 * 1000
      return {
        disabledDate(time) {
          const timestamp = time.getTime()
          if (endTimestamp) {
            if (timestamp >= startTimestamp && timestamp <= endTimestamp) {
              return false
            } else {
              return true
            }
          } else {
            return timestamp <= startTimestamp
          }
        }
      }
    },
    dateBefore() {
      // 动态起始时间
      // const startTimestamp = Date.parse(this.workerInfo.startDate)
      const specifiedDate = new Date(this.workerInfo.startDate) // 指定的日期
      const prevDay = new Date(specifiedDate) // 创建一个新的 Date 对象，使用同样的日期
      prevDay.setDate(specifiedDate.getDate() - 1) // 将日期设置为前一天的日期

      const lastTime = prevDay.getTime() // 获取前一天的时间戳
      // const startTimestamp = new Date(this.workerInfo.startDate)
      return {
        disabledDate(time) {
          const timestamp = time.getTime()
          if (timestamp > lastTime) {
            // console.log("计划结束时间",startTimestamp,timestamp)
            return false
          }
          return true
        }
      }
    },
    actualDateBefore() {
      // 动态起始时间
      // const startTimestamp = Date.parse(this.workerInfo.startDate)
      const specifiedDate = new Date(this.workerInfo.actualStartDate) // 指定的日期
      const prevDay = new Date(specifiedDate) // 创建一个新的 Date 对象，使用同样的日期
      prevDay.setDate(specifiedDate.getDate() - 1) // 将日期设置为前一天的日期

      const lastTime = prevDay.getTime() // 获取前一天的时间戳
      // const startTimestamp = new Date(this.workerInfo.startDate)
      return {
        disabledDate(time) {
          const timestamp = time.getTime()
          if (timestamp > lastTime) {
            // console.log("计划结束时间",startTimestamp,timestamp)
            return false
          }
          return true
        }
      }
    }
  },

  created() {
    this.projectSn = this.$store.state.projectSn
    this.createUserId = this.$store.state.userInfo.userId
    this.uploadUrl = this.$store.state.UPLOADURL
    this.fileUrl = this.$store.state.FILEURL
    this.getProgressListData()
    this.getDevListData()
  },
  methods: {
    // 打开列表详情
    openDetail(row) {
      console.log('打开详情', row)
      this.formInline = row
      this.detailData = row
      this.diskDetailId = row.id
      this.getDetailList()
    },
    // openDetailList(row) {
    //   console.log('打开详情内列表详情', row)
    //   this.showDetailLine = true
    //   this.materialDetailId = row.id
    //   this.getMaterialList()
    // },

    close() {
      this.diskDetailId = ""
      this.diskInfo = {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0 //总条数
      },
      this.materialInfo = {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0 //总条数
      },
      console.log('弹窗关闭')
    },
    materialClose() {
      this.materialInfo = {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0 //总条数
      },
      this.materialDetailId = ""
      console.log('材料弹窗关闭')
    },

    //获取详情 盘次列表详情列表
    getMaterialList() {
      let data = {
        pageNo: this.materialInfo.pageNo,
        pageSize: this.materialInfo.pageSize,
        projectSn: this.$store.state.projectSn,
        stableWaterMixStationSetDataId: this.materialDetailId
      }
      // stableWaterMixMaterialDataPage(data).then(res => {
      //   if (res.code == 200) {
      //     console.log('原材料数据(盘次列表详情)', res.result)
      //     this.materialOrderList = res.result.records
      //     this.dialogShow = true
      //     this.materialInfo.total = res.result.total
      //   }
      // })
    },

    //获取详情 盘次列表数据
    getDetailList() {
      let data = {
        pageNo: this.diskInfo.pageNo,
        pageSize: this.diskInfo.pageSize,
        projectSn: this.$store.state.projectSn,
        pitchMixStationProdDataId: this.diskDetailId
      }
      stableWaterMixSetDataPage(data).then(res => {
        if (res.code == 200) {
          console.log('盘次列表数据', res.result)
          this.diskOrderList = res.result.records
          this.dialogShow = true
          this.diskInfo.total = res.result.total
        }
      })
    },
    //获取列表数据
    getProgressListData() {
      let data = {
        pageNo: this.pagInfo.pageNo,
        pageSize: this.pagInfo.pageSize,
        projectSn: this.$store.state.projectSn,
        devSn: this.queryInfo.devName,
        useLayer: this.queryInfo.useLayer,
        proportionName: this.queryInfo.proportionName,
        useStatus: this.queryInfo.useStatus,
        dischargeTime_begin: this.queryInfo.actualStartDate,
        dischargeTime_end: this.queryInfo.actualFinishDate
      }
      console.log('生产数据', data)
      stableWaterMixDataPage(data).then(res => {
        if (res.code == 200) {
          console.log('生产数据', res.result)
          this.listData = res.result.records
          this.pagInfo.total = res.result.total
        }
      })
    },
    //获取查询下拉
    getDevListData() {
      let data = {
        projectSn: this.projectSn
      }
      stableWaterMixDevList(data).then(res => {
        if (res.code == 200) {
          this.devOptions = res.result
          console.log('设备下拉', res)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //刷新
    refreshBtn() {
      this.daterange = []
      this.pagInfo.pageNo = 1
      this.pagInfo.pageSize = 10
      this.queryInfo = {
        devSn: '',
        status: '',
        actualStartDate: '',
        actualFinishDate: '',
        taskName: ''
      }
      this.getProgressListData()
    },
    // 生产数据列表
    SizeChange(val) {
      this.pagInfo.pageSize = val
      this.getProgressListData()
    },
    CurrentChange(val) {
      this.pagInfo.pageNo = val
      this.getProgressListData()
    },

    // 详情内盘次列表
    diskSizeChange(val) {
      this.diskInfo.pageSize = val
      this.getDetailList()
    },
    diskCurrentChange(val) {
      this.diskInfo.pageNo = val
      this.getDetailList()
    },

    materialSizeChange(val) {
      this.materialInfo.pageSize = val
      this.getMaterialList()
    },
    materialCurrentChange(val) {
      this.materialInfo.pageNo = val
      this.getMaterialList()
    },
    
    //---------------
    //关闭详请组件
    changeDate() {
      if (this.daterange) {
        this.queryInfo.actualStartDate = this.daterange[0]
        this.queryInfo.actualFinishDate = this.daterange[1]
      } else {
        this.queryInfo.actualStartDate = ''
        this.queryInfo.actualFinishDate = ''
      }
    },
    validateInput() {
      let value = parseInt(this.workerInfo.progressRatio, 10)
      if (isNaN(value) || value < 0 || value > 100 || Math.floor(value) !== value) {
        this.workerInfo.progressRatio = ''
      }
    },
    time1(val) {
      console.log('开始时间', val)
      this.times = val
    },
    time2(val) {
      console.log('结束时间', val)
    }
  }
}
</script>
<style lang="scss" scoped>
.down {
  text-decoration: none;
  color: #fff;
}
.expintBtn {
  display: inline-block !important;
  margin-right: 10px;
}
.table_wrap {
  margin-top: 15px;
  height: 700px;
  overflow: auto;
}
.delete-btn {
  color: #fe6565;
}
.dialogUplod {
  height: 100px;
  margin-left: 70px;
  margin-top: 40px;
  div {
    margin-bottom: 20px;
  }
}

.dialog-content {
  padding-bottom: 50px;
  .product-state {
    display: flex;
    position: absolute;
    right: 5%;
    top: 10%;
    width: 100px;
    height: 30px;
    color: #fff;
    background: #e69436;
    justify-content: center;
    align-items: center;
  }
  .detail-text {
    margin-left: 20px;
    .detail-row {
      display: flex;
      margin-top: 20px;
      .left-text {
        display: flex;
        width: 500px;
      }
      .right-text {
        display: flex;
      }
      .title {
        width: 100px;
        color: #737996;
      }
      .text {
      }
    }
  }
}

.detail-table {
  width: 91%;
  margin-left: 20px;
  position: relative;
  .table-list {
    z-index: 1;
    display: flex;
    margin-top: 35px;
    overflow-x: scroll;
    .table-item {
      white-space: nowrap;
      .table-head {
        display: flex;
        align-items: center;
        height: 20px;
        padding: 10px 15px;
        background: #ededed;
      }
      .table-body {
        display: flex;
        align-items: center;
        height: 100px;
        padding: 0 15px;
        border-left: 1px solid #ededed;
        border-bottom: 1px solid #ededed;
      }
    }
    .trip-table {
      white-space: nowrap;
      .trip-head {
        display: flex;
        align-items: center;
        height: 20px;
        padding: 10px 15px;
        background: #ededed;
      }
      .trip-body {
        height: 110px;
        .body-row {
          display: flex;
          align-items: center;
          height: 30%;
          padding: 0 15px;
          border-left: 1px solid #ededed;
          border-bottom: 1px solid #ededed;
        }
        div:nth-of-type(odd) {
        }
        div:nth-of-type(even) {
          background: #ededed;
        }
      }
    }
  }
}
.table-operate {
  white-space: nowrap;
  z-index: 5;
  position: absolute;
  right: -77px;
  bottom: 26px;
  .table-head {
    display: flex;
    align-items: center;
    height: 20px;
    padding: 10px 15px;
    background: #ededed;
  }
  .table-body {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 100px;
    padding: 0 15px;
    border-left: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
  }
}
.dialog-chart {
  width: 100%;
  height: 300px;
}

.line-dialog {
  .dialog-title {
    margin-left: 30px;
    margin-bottom: 30px;
  }
  .first-title {
    margin-left: 30px;
  }
  .second-title {
    margin-left: 30px;
  }
  .third-title {
    margin-left: 30px;
  }
}
</style>
