<!--
 描述: 动态列表动画
 作者: Jack Chen
 日期: 2020-04-18
-->

<template>
    <div class="wrap-container sn-container"> 
        <div class="sn-content">
            <div class="sn-title" @click="getList">设置</div>
            <div class="wrap-container pd-info">
            <div class="pd-info-center">
                <div class="y-center">
                <div class="info-1-0 animated infinite rotateF"></div>
                <div class="info-1-1 animated infinite rotateF"></div>
                <div class="info-1-2 animated infinite rotate"></div>
                <div class="info-1-3 animated infinite rotate"></div>
                <div class="info-1-4 animated infinite flashPD"></div>
                </div>    
                <div class="y-number-box" v-for="(item, index) in list" :key="index">
                <div class="y-number animated fadeInLeft" :class="`y-number-${index + 1}`">
                    <div class="y-number-bg animated infinite rotate"></div>
                    <div class="y-number-icon"></div>
                    <div class="y-number-text">
                    <span>{{ item.name }}</span>
                    <span id="number1" class="odometer odometer-theme-digital">
                        {{ data[item.key] ? data[item.key] : item.value }}
                    </span>
                    </div>
                </div>
                </div>
    
            </div>
            </div>
        </div>
        
        <el-dialog style="margin-top: 10vh;" :visible.sync="tableVisible" width="50%" size="small" :before-close="tableClose">
            <el-table :data="tableData" border style="width: 100%">
            <el-table-column property="machineName" label="机器名称" ></el-table-column>
            <el-table-column property="tblMachineNo" label="机器编码" ></el-table-column>
            <el-table-column property="capacity" label="目标产能" ></el-table-column>
            <el-table-column property="confiTime" label="上班时间"></el-table-column>
            <el-table-column label="操作" align="center" width="100">
                <template slot-scope="scope">
                <el-button type="text" @click="update(scope.row)">修改</el-button>
                </template>
            </el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog style="margin-top: 10vh;" title="修改" label-suffix=":" :visible.sync="addVisible" right width="30%" size="small" :before-close="addClose">
        <el-form :model="form">
            <el-form-item label="目标产能">
            <el-input-number v-model="form.capacity" placeholder="目标产能" style="width: 60%;" />
            </el-form-item>
            <el-form-item label="上班时间">
            <el-time-select v-model="form.confiTime" value-format="hh:mm" :picker-options="{
                start: '08:00',
                step: '00:05',
                end: '10:00'
            }" style="width: 60%;" placeholder="上班时间" />
            </el-form-item>
        </el-form>
        <span slot="footer">
            <el-button @click="addClose">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import countTo from 'vue-count-to';
import { query } from "@/api/product/dashboard.js";
import { list, update } from "@/api/product/dashboard.js";

export default {
    name: "ProductList",
    components: {
        countTo
    },
    data() {
      return {
        tableData: [],
        form: {
          id: '',
          capacity: '',
          confiTime: '',
          tblMachineNo: ''
        },
        tableVisible: false,
        addVisible: false,
        startVal: 0,
        data: {},
        list: [
          { name: '机器名称', key: 'name', value: '--' },
          { name: '型体文件', key: 'tblSoftwareopertMemo', value: '--' },
          { name: '目标产能', key: 'target', value: '--' },
          { name: '已切割刀数', key: 'count', value: '--' },
          { name: '完成率', key: 'finish', value: '--'},
          // { name: '机器编码', key: 'tblMachineNo', value: '--' },
          { name: '上班时间', key: 'workingTime', value: '--' },
          { name: '开机时间', key: 'startTime', value: '--' },
          { name: '运行时间', key: 'runTime', value: '--' },
          { name: '空闲时间', key: 'freeTime', value: '--' },
          { name: '数据上传时间', key: 'startTime', value: '--' }
        ]
      }
    },
    mounted() {
    let titleOptions = [];
    query().then(res => {
        res.data.forEach((item) => {
            titleOptions.push(item.tblSoftwareopertMemo?.split('\\')[1]);
            if (item.tblSoftwareopertMemo && item.tblSoftwareopertMemo.split('\\')[1] == titleOptions[0]) {
            this.data = {
                tblSoftwareopertMemo: item.tblSoftwareopertMemo ? item.tblSoftwareopertMemo.split("\\")[2] : '',
                name: item.tblSoftwareopertMemo ? item.tblSoftwareopertMemo.split("\\")[1] : '',
                target: item.target,
                finish: item.finish ? item.finish.toFixed(2) + '%' : '',
                count: item.count,
                tblMachineNo: item.tblMachineNo,
                workingTime: item.workingTime ? item.workingTime.split(' ')[0] : '',
                startTime: item.startTime ? item.startTime.split(".")[0] : '',
                runTime: item.runTime,
                freeTime: item.freeTime
                }
            }
        })

        this.getEchart(titleOptions);
        }).catch();
        
    },
    methods: {
      /** 关闭新增弹窗 */
      addClose() {
        this.addVisible = false;
        this.form = {
          id: '',
          capacity: '',
          confiTime: '',
          tblMachineNo: ''
        }
      },
  
      /** 关闭列表弹窗 */
      tableClose() {
        this.tableVisible = false;
        this.tableData = [];
      },
  
      /** 提交 */
      confirm() {
        if (!this.form.confiTime || !this.form.confiTime.split(':')[2]) {
          this.form.confiTime = this.form.confiTime + ':00';
        }
        update(this.form).then(res => {
          this.$message({ message: '更改成功', type: 'success' });
          this.addVisible = false;
          this.getList();
        }).catch();
      },
  
      /** 获取列表数据 */
      getList() {
        this.tableVisible = true;
        list().then(res => {
          this.tableData = res.data.rows ? res.data.rows : [];
        }).catch();
      },
  
      /** 修改 */
      update(row) {
        this.addVisible = true;
        this.form = row;
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .sn-container {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    .sn-content {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
  
    .sn-title {
        cursor: pointer;
        z-index: 10000;
        font-size: 20px;
        width: 60px;
        position: absolute;
        top: 20px;
        right: 20px;
        color: #9dd1ff;
    }
    .pd-info {
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    .pd-info-center {
      width: 100%;
      height: 100%;
      .y-center {
        // position: absolute;
        // top: 16px;
        // left: 30px;
        width: 100%;
        height: 100%;
        > [class^=info-1] {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-repeat: no-repeat; 
          background-position: center center;
        }
        .info-1-0 {
          background-image: url(../../assets/images/dynamic/info-1-0.png);
          -webkit-animation-duration: 20s;
          -moz-animation-duration: 20s;
          -o-animation-duration: 20s;
          animation-duration: 20s;
        }
        .info-1-1 {
          background-image: url(../../assets/images/dynamic/info-1-1.png);
          -webkit-animation-duration: 20s;
          -moz-animation-duration: 20s;
          -o-animation-duration: 20s;
          animation-duration: 20s;
          -webkit-animation-delay: 3s;
          -moz-animation-delay: 3s;
          -o-animation-delay: 3s;
          animation-delay: 3s;
        }
        .info-1-2 {
          background-image: url(../../assets/images/dynamic/info-1-2.png);
          -webkit-animation-duration: 20s;
          -moz-animation-duration: 20s;
          -o-animation-duration: 20s;
          animation-duration: 20s;
          -webkit-animation-delay: 8s;
          -moz-animation-delay: 8s;
          -o-animation-delay: 8s;
          animation-delay: 8s;
        }
        .info-1-3 {
          background-image: url(../../assets/images/dynamic/info-1-3.png);
          -webkit-animation-duration: 10s;
          -moz-animation-duration: 10s;
          -o-animation-duration: 10s;
          animation-duration: 10s;
          -webkit-animation-delay: 5s;
          -moz-animation-delay: 5s;
          -o-animation-delay: 5s;
          animation-delay: 5s;
        }
        .info-1-4 {
          background-image: url(../../assets/images/dynamic/info-1-4.png);
          -webkit-animation-duration: 5s;
          -moz-animation-duration: 5s;
          -o-animation-duration: 5s;
          animation-duration: 5s;
        }
      }
  
      .y-number-box {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 150px;
        left: 0;
  
        .y-number {
          position: absolute;
          left: 0;
          padding-left: 290px;
          -webkit-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
          -moz-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
          -o-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
          animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
          .y-number-bg {
            width: 80px;
            height: 80px;
            position: absolute;
            -webkit-animation-duration: 5s;
            -moz-animation-duration: 5s;
            -o-animation-duration: 5s;
            animation-duration: 5s;
          }
          .y-number-icon {
            width: 80px;
            height: 80px;
            position: absolute;
          }
          .y-number-text {
            display: inline-block;
            color: #e3eff7;
            font-size: 28px;
            padding: 6px 0 0 100px;
            > span {
              display: block;
              &:nth-child(2) {
                font-size: 36px;
                color: #49cdff;
                line-height: 40px;
                margin-top: 18px;
                margin-left: -10px;
                background: transparent;
              }
            }
          }
  
  
          &.y-number-1 {
            -webkit-animation-delay: 1s;
            -moz-animation-delay: 1s;
            -o-animation-delay: 1s;
            animation-delay: 1s;
            // background: url(../../assets/images/dynamic/info-line-01.png) no-repeat 40% center;
            height: 80px;
            top: 80px;
            left: -5%;
            .y-number-bg {
              -webkit-animation-delay: 2s;
              -moz-animation-delay: 2s;
              -o-animation-delay: 2s;
              animation-delay: 2s;
              background: url(../../assets/images/dynamic/info-bg-01.png) no-repeat 50% 50%;
            }
            .y-number-icon {
              background: url(../../assets/images/dynamic/info-icon-1.png) no-repeat 50% 50%;
            }
          }
          &.y-number-2 {
            -webkit-animation-delay: 1.25s;
            -moz-animation-delay: 1.25s;
            -o-animation-delay: 1.25s;
            animation-delay: 1.25s;
            // background: url(../../assets/images/dynamic/info-line-01.png) no-repeat 26% center;
            height: 80px;
            top: 220px;
            left: -5%;
            .y-number-bg {
              -webkit-animation-delay: 2.5s;
              -moz-animation-delay: 2.5s;
              -o-animation-delay: 2.5s;
              animation-delay: 2.5s;
              background: url(../../assets/images/dynamic/info-bg-02.png) no-repeat 50% 50%;
            }
            .y-number-icon {
              background: url(../../assets/images/dynamic/info-icon-2.png) no-repeat 50% 50%;
            }
          }
          &.y-number-3 {
            -webkit-animation-delay: 1.5s;
            -moz-animation-delay: 1.5s;
            -o-animation-delay: 1.5s;
            animation-delay: 1.5s;
            // background: url(../../assets/images/dynamic/info-line-01.png) no-repeat 40% center;
            height: 80px;
            top: 360px;
            left: -5%;
            .y-number-bg {
              -webkit-animation-delay: 3s;
              -moz-animation-delay: 3s;
              -o-animation-delay: 3s;
              animation-delay: 3s;
              background: url(../../assets/images/dynamic/info-bg-03.png) no-repeat 50% 50%;
            }
            .y-number-icon {
              background: url(../../assets/images/dynamic/info-icon-3.png) no-repeat 50% 50%;
            }
          }
          &.y-number-4 {
            -webkit-animation-delay: 1.75s;
            -moz-animation-delay: 1.75s;
            -o-animation-delay: 1.75s;
            animation-delay: 1.75s;
            // background: url(../../assets/images/dynamic/info-line-01.png) no-repeat 44% center;
            height: 80px;
            top: 500px;
            left: -5%;
            .y-number-bg {
              -webkit-animation-delay: 3.5s;
              -moz-animation-delay: 3.5s;
              -o-animation-delay: 3.5s;
              animation-delay: 3.5s;
              background: url(../../assets/images/dynamic/info-bg-04.png) no-repeat 50% 50%;
            }
            .y-number-icon {
              background: url(../../assets/images/dynamic/info-icon-4.png) no-repeat 50% 50%;
            }
          }
          &.y-number-5 {
            -webkit-animation-delay: 1s;
            -moz-animation-delay: 1s;
            -o-animation-delay: 1s;
            animation-delay: 1s;
            // background: url(../../assets/images/dynamic/info-line-01.png) no-repeat 40% center;
            height: 80px;
            top: 640px;
            left: -5%;
            .y-number-bg {
              -webkit-animation-delay: 2s;
              -moz-animation-delay: 2s;
              -o-animation-delay: 2s;
              animation-delay: 2s;
              background: url(../../assets/images/dynamic/info-bg-01.png) no-repeat 50% 50%;
            }
            .y-number-icon {
              background: url(../../assets/images/dynamic/info-icon-1.png) no-repeat 50% 50%;
            }
          }
          &.y-number-6 {
            -webkit-animation-delay: 1s;
            -moz-animation-delay: 1s;
            -o-animation-delay: 1s;
            animation-delay: 1s;
            // background: url(../../assets/images/dynamic/info-line-01.png) no-repeat 40% center;
            height: 80px;
            top: 80px;
            left: 44%;
            .y-number-bg {
              -webkit-animation-delay: 2s;
              -moz-animation-delay: 2s;
              -o-animation-delay: 2s;
              animation-delay: 2s;
              background: url(../../assets/images/dynamic/info-bg-01.png) no-repeat 50% 50%;
            }
            .y-number-icon {
              background: url(../../assets/images/dynamic/info-icon-1.png) no-repeat 50% 50%;
            }
          }
          &.y-number-7 {
            -webkit-animation-delay: 1.25s;
            -moz-animation-delay: 1.25s;
            -o-animation-delay: 1.25s;
            animation-delay: 1.25s;
            // background: url(../../assets/images/dynamic/info-line-01.png) no-repeat 50% center;
            height: 80px;
            top: 220px;
            left: 44%;
            .y-number-bg {
              -webkit-animation-delay: 2.5s;
              -moz-animation-delay: 2.5s;
              -o-animation-delay: 2.5s;
              animation-delay: 2.5s;
              background: url(../../assets/images/dynamic/info-bg-02.png) no-repeat 50% 50%;
            }
            .y-number-icon {
              background: url(../../assets/images/dynamic/info-icon-2.png) no-repeat 50% 50%;
            }
          }
          &.y-number-8 {
            -webkit-animation-delay: 1.5s;
            -moz-animation-delay: 1.5s;
            -o-animation-delay: 1.5s;
            animation-delay: 1.5s;
            // background: url(../../assets/images/dynamic/info-line-01.png) no-repeat 50% center;
            height: 80px;
            top: 360px;
            left: 44%;
            .y-number-bg {
              -webkit-animation-delay: 3s;
              -moz-animation-delay: 3s;
              -o-animation-delay: 3s;
              animation-delay: 3s;
              background: url(../../assets/images/dynamic/info-bg-03.png) no-repeat 50% 50%;
            }
            .y-number-icon {
              background: url(../../assets/images/dynamic/info-icon-3.png) no-repeat 50% 50%;
            }
          }
          &.y-number-9 {
            -webkit-animation-delay: 1.75s;
            -moz-animation-delay: 1.75s;
            -o-animation-delay: 1.75s;
            animation-delay: 1.75s;
            // background: url(../../assets/images/dynamic/info-line-01.png) no-repeat 50% center;
            height: 80px;
            top: 500px;
            left: 44%;
            .y-number-bg {
              -webkit-animation-delay: 3.5s;
              -moz-animation-delay: 3.5s;
              -o-animation-delay: 3.5s;
              animation-delay: 3.5s;
              background: url(../../assets/images/dynamic/info-bg-04.png) no-repeat 50% 50%;
            }
            .y-number-icon {
              background: url(../../assets/images/dynamic/info-icon-4.png) no-repeat 50% 50%;
            }
          }
          &.y-number-10 {
            -webkit-animation-delay: 1s;
            -moz-animation-delay: 1s;
            -o-animation-delay: 1s;
            animation-delay: 1s;
            // background: url(../../assets/images/dynamic/info-line-01.png) no-repeat 43% center;
            height: 80px;
            top: 640px;
            left: 44%;
            .y-number-bg {
              -webkit-animation-delay: 2s;
              -moz-animation-delay: 2s;
              -o-animation-delay: 2s;
              animation-delay: 2s;
              background: url(../../assets/images/dynamic/info-bg-01.png) no-repeat 50% 50%;
            }
            .y-number-icon {
              background: url(../../assets/images/dynamic/info-icon-1.png) no-repeat 50% 50%;
            }
          }
        }
      }
    }
  
  }
  
  .animated {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  
  @-webkit-keyframes rotate {
    0% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  @-moz-keyframes rotate {
    0% {
      -webkit-transform-origin: center;
      -moz-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform-origin: center;
      -moz-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  @-o-keyframes rotate {
    0% {
      -webkit-transform-origin: center;
      -o-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform-origin: center;
      -o-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  @keyframes rotate {
    0% {
      -webkit-transform-origin: center;
      -moz-transform-origin: center;
      -o-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform-origin: center;
      -moz-transform-origin: center;
      -o-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  .rotate {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -o-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  
  @-webkit-keyframes rotateF {
    100% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg);
    }
  }
  
  @-moz-keyframes rotateF {
    100% {
      -webkit-transform-origin: center;
      -moz-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(-360deg);
      -moz-transform: rotate(-360deg);
      transform: rotate(-360deg);
    }
  }
  
  @-o-keyframes rotateF {
    100% {
      -webkit-transform-origin: center;
      -o-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(-360deg);
      -o-transform: rotate(-360deg);
      transform: rotate(-360deg);
    }
  }
  
  @keyframes rotateF {
    100% {
      -webkit-transform-origin: center;
      -moz-transform-origin: center;
      -o-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(-360deg);
      -moz-transform: rotate(-360deg);
      -o-transform: rotate(-360deg);
      transform: rotate(-360deg);
    }
  }
  
  .rotateF {
    -webkit-animation-name: rotateF;
    -moz-animation-name: rotateF;
    -o-animation-name: rotateF;
    animation-name: rotateF;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  
  @-webkit-keyframes flashPD {
    0%,
    90% {
      opacity: 1;
    }
    92%,
    98% {
      opacity: 0;
    }
    96%,
    100% {
      opacity: 1;
    }
  }
  
  @-moz-keyframes flashPD {
    0%,
    90% {
      opacity: 1;
    }
    92%,
    98% {
      opacity: 0;
    }
    96%,
    100% {
      opacity: 1;
    }
  }
  
  @-o-keyframes flashPD {
    0%,
    90% {
      opacity: 1;
    }
    92%,
    98% {
      opacity: 0;
    }
    96%,
    100% {
      opacity: 1;
    }
  }
  
  @keyframes flashPD {
    0%,
    90% {
      opacity: 1;
    }
    92%,
    98% {
      opacity: 0;
    }
    96%,
    100% {
      opacity: 1;
    }
  }
  
  .flashPD {
    -webkit-animation-name: flashPD;
    -moz-animation-name: flashPD;
    -o-animation-name: flashPD;
    animation-name: flashPD;
  }
  </style>
  