<template>
  <div class="app-container homeA">
    <div clss="div-row">
      <div class="div-col1">
        <el-card>
          <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;">
            <img src="@/assets/images/d1@1x.png" width="15%" style="margin-top: 2.5rem;">
            <p>项目资料</p>
          </div>
          <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{ statisticInfo.proNum }}</div>
        </el-card>
      </div>

      <div class="div-col1">
        <el-card>
          <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;">
            <img src="@/assets/images/d2@1x.png" width="15%" style="margin-top: 2.5rem;">
            <p>图纸总数</p>
          </div>
           <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{ statisticInfo.drawNum }}</div>
        </el-card>
      </div>

      <div class="div-col1">
        <el-card>
          <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;">
            <img src="@/assets/images/d3@1x.png" width="15%" style="margin-top: 2.5rem;">
            <p>配件种类</p>
          </div>
           <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{ statisticInfo.storeNum }}</div>
        </el-card>
      </div>

      <div class="div-col1">
        <el-card>
          <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;">
            <img src="@/assets/images/d4@1x.png" width="15%" style="margin-top: 2.5rem;">
            <p>装配模板</p>
          </div>
           <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{ statisticInfo.markNum }}</div>
        </el-card>
      </div>

      <div class="div-col1">
        <el-card>
          <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;">
            <img src="@/assets/images/d5@1x.png" width="15%" style="margin-top: 2.5rem;">
            <p>生产计划</p>
          </div>
           <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{ statisticInfo.planNum }}</div>
        </el-card>
      </div>

      <div class="div-col1">
        <el-card>
          <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;">
            <img src="@/assets/images/d6@1x.png" width="15%" style="margin-top: 2.5rem;">
            <p>生产执行</p>
          </div>
          <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{ statisticInfo.exeNum }}</div>
        </el-card>
      </div>

      <div class="div-col1">
        <el-card>
          <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;">
            <img src="@/assets/images/d7@1x.png" width="15%" style="margin-top: 2.5rem;">
            <p>产品总数</p>
          </div>
          <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{ statisticInfo.deviceNum }}</div>
        </el-card>
      </div>

      <div class="div-col1">
        <el-card>
          <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;">
            <img src="@/assets/images/d8@1x.png" width="15%" style="margin-top: 2.5rem;">
            <p>发货批次</p>
          </div>
          <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{ statisticInfo.logisticsNum }}</div>
        </el-card>
      </div>
    </div>

    <div clss="div-row">
      <div class="div-col2" @click="$router.push('/baseinfo/staff')">
        <el-card>
          <img src="@/assets/images/8@1x.png" width="20%"/>
          <p>员工信息</p>
        </el-card>
      </div>

      <div class="div-col2" @click="$router.push('/train/trainingProgram')">
        <el-card>
          <img src="@/assets/images/7@1x.png" width="20%"/>
          <p>培训计划</p>
        </el-card>
      </div>

      <div class="div-col2" @click="$router.push('/track/plan')">
        <el-card>
          <img src="@/assets/images/6@1x.png" width="20%"/>
          <p>生产计划</p>
        </el-card>
      </div>

      <div class="div-col2" @click="$router.push('/track/execute')">
        <el-card>
          <img src="@/assets/images/5@1x.png" width="20%"/>
          <p>生产执行</p>
        </el-card>
      </div>

      <div class="div-col2" @click="$router.push('/track/device')">
        <el-card>
          <img src="@/assets/images/4@1x.png" width="20%"/>
          <p>产品信息</p>
        </el-card>
      </div>

      <div class="div-col2" @click="$router.push('/track/draw')">
        <el-card>
          <img src="@/assets/images/3@1x.png" width="20%"/>
          <p>图纸信息</p>
        </el-card>
      </div>

      <div class="div-col2" @click="$router.push('/track/mark')">
        <el-card>
          <img src="@/assets/images/2@1x.png" width="20%"/>
          <p>装配信息</p>
        </el-card>
      </div>

      <div class="div-col2" @click="$router.push('/track/logistics')">
        <el-card>
          <img src="@/assets/images/1@1x.png" width="20%"/>
          <p>发货信息</p>
        </el-card>
      </div>

    </div>

    <div class="div-row">
      <div class="div-col3">
        <el-card>
          <div slot="header">
            <span>生产计划</span>
            <span class="div-header" style="cursor: pointer; float: right;" @click="$router.push('/track/plan')">更多>></span>
          </div>
          <div class="body">
            <el-table v-loading="planLoading" :data="planList" height="354" style="width: 100%; border: 1px solid #e6ebf5;">
              <el-table-column label="计划名称" align="center" prop="title" />
              <el-table-column label="计划编号" align="center" prop="planNo" />
              <el-table-column label="生产总数" align="center" prop="total" />
              <el-table-column label="计划状态" align="center" prop="status" :formatter="planStatusFormat" />
              <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip/>
              <el-table-column label="创建人" align="center" prop="createBy" />
            </el-table>
          </div>
        </el-card>
      </div>
      <div class="div-col3">
        <el-card>
          <div slot="header">
            <span>生产执行</span>
            <span class="div-header" style="cursor: pointer; float: right;" @click="$router.push('/track/execute')">更多>></span>
          </div>
          <div class="body">
            <el-table v-loading="executeLoading" :data="executeList" height="355" style="width: 100%; border: 1px solid #e6ebf5;">
              <el-table-column label="计划编号" align="center" prop="planName" />
              <el-table-column label="批次号" align="center" prop="batchNo" />
              <el-table-column label="生产数量" align="center" prop="total" />
              <el-table-column label="开始时间" align="center" prop="starttime" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.starttime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="结束时间" align="center" prop="endtime" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.endtime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="执行状态" align="center" prop="status" :formatter="executeStatusFormat" />
              <el-table-column label="创建人" align="center" prop="createBy" />
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
  import { getStatistic } from "@/api/index/statistic";
  import { listPlan } from "@/api/track/plan";
  import { listInspect } from "@/api/track/execute";
  export default {
    name: "index",
    data() {
      return {
        planLoading: false,
        planList: [],
        executeLoading: false,
        executeList: [],
        planStatusOptions: [],
        executestatusOptions: [],
        statisticInfo: {
          proNum: 0,
          drawNum: 0,
          storeNum: 0,
          markNum: 0,
          planNum: 0,
          exeNum: 0,
          deviceNum: 0,
          logisticsNum: 0
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
      };
    },
    created(){
      this.getDicts("product_plan_status").then(response => {
          this.planStatusOptions = response.data;
      });
      this.getDicts("t_produce_execute").then(response => {
          this.executestatusOptions = response.data;
      });
      this.initData();
    },
    methods: {
      initData(){
        this.getStatisticInfo();
        this.getPlan();
        this.getExecute();
      },
      getStatisticInfo(){
        getStatistic().then(res =>{
          if(res.code == 200){
            this.statisticInfo = res.data;
          }
        })
      },
      //生产计划
      getPlan(){
        this.planLoading = true;
        listPlan(this.queryParams).then(res =>{
          this.planLoading = false;
          if(res.code == 200){
            this.planList = res.rows;
          }
        })
      },
      //生产执行
      getExecute(){
        this.executeLoading = true;
        listInspect().then(res =>{
          this.executeLoading = false;
          if(res.code == 200){
              this.executeList = res.rows;
          }
        })
      },
      // 计划状态字典翻译
      planStatusFormat(row, column) {
        return this.selectDictLabel(this.planStatusOptions, row.status);
      },
      executeStatusFormat(row, column) {
        return this.selectDictLabel(this.executestatusOptions, row.status);
      },
    },
  };
</script>

<style scoped lang="scss">
  .homeA {
    padding: 10px;
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    overflow-x: hidden;

    p {
      margin: 0px;
      color: #515a6e;
    }

    .div-col1 {
      width: 25%;
      padding: 6px;
      float: left;
    }

    .div-col2 {
      width: 12.5%;
      padding: 9px 6px;
      float: left;
      text-align: center;
      cursor: pointer;
    }


    .div-col3 {
      width: 50%;
      padding: 6px;
      float: left;
    }

    .div-header:hover {
      text-decoration:underline;
      color: #1890ff;
    }
  }
</style>

