<template>
  <div>
    <!-- 标题栏 -->
    <div class="topbar">
      <div class="topbar_left">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui"></use>
        </svg>
      </div>
      <div class="topbar_middle">
        设备管理
      </div>
      <div class="topbar_right" style="font-size:23px">
        <!-- 报修按钮 -->
        <svg class="icon" aria-hidden="true" style="margin-right:30px">
          <use xlink:href="#icon-weixiu"></use>
        </svg>

        <!-- 扫描按钮 -->
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-qrcode-scan"></use>
        </svg>
      </div>
    </div>


    <div class="maininfo">

      <!-- 设备信息 -->
      <div class="eqinfo">
        <div class="eqname">
          <div>2#气密机</div>
          <div class="eqstatus">正常</div>
        </div>
        <div v-for="(info,index) in eqinfo " :key="index" class="eqinfolist">
          <span class="eqlable">{{info.lable}}：</span>
          <span class="eqvalue">{{info.value}}</span>
        </div>
      </div>

      <div class="liubai_dt"></div>

      <!-- 维护计划列表，按计划开始时间倒序排列，列出前5条 -->
      <div class="subtitle_dt">维护计划</div>

      <div
        style="display:flex;font-size:13px;margin-top:5px;border-bottom: 1px solid #eee;padding:10px 10px 0px 10px;color:#666;line-height:30px">
        <div style="flex:0 0 10%;text-align: center;">完成</div>
        <div style="flex:0 0 25%;text-align: center;">计划时间</div>
        <div style="flex:0 0 15%;text-align: center;">负责人</div>
        <div style="flex:0 0 12%;text-align: center;">工时</div>
        <div style="flex:0 0 38%;text-align: center;">计划摘要</div>
      </div>

      <div style="padding:0 0 10px 0 ">
        <div v-for="(plan,index) in eqplan" :key="index"
          style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:20px;font-size:12px;padding:5px 10px;align-items: center">
          <div style="flex:0 0 10%;text-align: center;font-size:18px;">
            <svg class="icon" aria-hidden="true" v-if="plan.status == 0">
              <use xlink:href="#icon-jianzhanbuzhouweiwan"></use>
            </svg>
            <svg class="icon" aria-hidden="true" v-if="plan.status == 1">
              <use xlink:href="#icon-zhengque1"></use>
            </svg>
          </div>
          <div style="flex:0 0 25%;text-align: center;">
            <div>{{plan.stime}}</div>
            <div>{{plan.etime}}</div>
          </div>
          <div style="flex:0 0 15%;text-align: center;">{{plan.emp}}</div>
          <div style="flex:0 0 12%;text-align: center;">{{plan.workhour}}</div>
          <div style="flex:0 0 38%;text-align: center;">{{plan.dscrp}}</div>
        </div>
      </div>
      
      <div class="liubai_dt"></div>

      <div class="subtitle_dt">维修记录</div>

      <div
        style="display:flex;font-size:13px;margin-top:5px;border-bottom: 1px solid #eee;padding:10px 10px 0px 10px;color:#666;line-height:30px">
        <div style="flex:0 0 15%;text-align: center;">状态</div>
        <div style="flex:0 0 30%;text-align: center;">维修时间</div>
        <div style="flex:0 0 15%;text-align: center;">负责人</div>
        <div style="flex:0 0 40%;text-align: center;">项目摘要</div>
      </div>

      <div style="padding:0 0 10px 0 ">
        <div v-for="(fix,index) in eqfix" :key="index"
          style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:20px;font-size:12px;padding:5px 10px;align-items: center">
          <div style="flex:0 0 15%;text-align: center;" class="fixstatus" v-bind:class="{bg_red:(fix.status == '维修中')}">
            <span >{{fix.status}}</span>
          </div>
          <div style="flex:0 0 30%;text-align: center;">
            <div>{{fix.stime}}</div>
            <div>{{fix.etime}}</div>
          </div>
          <div style="flex:0 0 15%;text-align: center;">{{fix.emp}}</div>
          <div style="flex:0 0 40%;text-align: center;">{{fix.dscrp}}</div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    name: 'equipment',
    data() {
      return {
        eqinfo: [{
            lable: "设备类型",
            value: "生产设备"
          },
          {
            lable: "设备种类",
            value: "气密机"
          },
          {
            lable: "设备编号",
            value: "572-102"
          },
          {
            lable: "型号规格",
            value: "BD-QM"
          },
          {
            lable: "制造厂家",
            value: "浙江联风机械设备有限公司"
          },
          {
            lable: "启用年月",
            value: "2010年6月"
          },
          {
            lable: "生产线",
            value: "减震器焊接6线"
          },
          {
            lable: "所属车间",
            value: "焊接车间"
          },
          {
            lable: "重要设备",
            value: "是"
          },
          {
            lable: "维护人员",
            value: "李四 13600136000"
          },
          {
            lable: "本月累计故障次数",
            value: "4"
          },
          {
            lable: "本月累计故障时间",
            value: "14分17秒"
          },
          {
            lable: "本月累计故障率",
            value: "1.22%"
          }
        ],
        eqplan: [{
            status: 0,
            stime: "2019/11/1",
            etime: "13:00~14:00",
            emp: "李四",
            workhour: 1,
            dscrp: '检查后档板、刀架运行时有无震动噪音等现象'
          },
          {
            status: 1,
            stime: "2019/10/4",
            etime: "13:00~14:00",
            emp: "李四",
            workhour: 1,
            dscrp: '检查后档板、刀架运行时有无震动噪音等现象'
          },
          {
            status: 1,
            stime: "2019/9/15",
            etime: "17:30~18:00",
            emp: "张三",
            workhour: 0.5,
            dscrp: '紧固所有螺栓'
          },
          {
            status: 1,
            stime: "2019/9/1",
            etime: "18:00~19:00",
            emp: "李四",
            workhour: 1,
            dscrp: '检查后档板、刀架运行时有无震动噪音等现象'
          },
          {
            status: 1,
            stime: "2019/8/1",
            etime: "18:00~19:00",
            emp: "李四",
            workhour: 1,
            dscrp: '检查后档板、刀架运行时有无震动噪音等现象'
          }
        ],
        eqfix:[
            {status:"维修中",stime:"2019/10/25",etime:"15:20~现在",emp:"李四",dscrp:"设备部分器件失电"},
            {status:"完工",stime:"2019/10/12",etime:"16:40~17:04",emp:"李四",dscrp:"回程压力阀损坏"},
            {status:"完工",stime:"2019/9/19",etime:"13:20~14:40",emp:"李四",dscrp:"机器运转有异响"},
        ]

      }

    }


  }

</script>

<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-family: "微软雅黑";
    font-size: 15px;
  }


  .topbar {
    min-height: 44px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 9999;
    display: flex;
    font-size: 18px;
    align-items: center;
  }

  .topbar_left {
    flex: 0 0 20px;
    margin-left: 10px;
  }

  .topbar_middle {
    /* text-align: center; */
    padding: 0 0 0 10px;
    flex: 0 0 89%;
  }

  .topbar_right {
    /* flex: 0 0 20px; */
    position: absolute;
    right: 20px;
  }

  .maininfo {
    position: absolute;
    top: 44px;
    width: 100%;
    margin-bottom: 80px;
  }

  .eqinfo {
    padding: 10px 20px;
  }

  .eqname {
    display: flex;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    align-items: center
  }

  .eqstatus {
    position: absolute;
    right: 20px;
    width: 55px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    border-radius: 15px;
    padding: 3px;
    text-align: center;
    margin-right: 5px;
    background-color: #8dc026;
  }

  .eqinfolist {
    line-height: 25px;
  }

  .eqlable {
    font-size: 15px;
    font-weight: bold;
    color: #555
  }

  .eqvalue {
    font-size: 15px;
    color: #777;
  }

  .liubai_dt {
    width: 100%;
    height: 10px;
    background-color: #f6f6f6;
    margin: 10px 0;
  }

  .subtitle_dt {
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    margin: 0 20px;
    /* height: 42px; */
    /* line-height: 43px; */
  }
  .fixstatus {
    width: 50px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    border-radius: 15px;
    padding: 2px;
    text-align: center;
    margin-right: 5px;
    background-color: #8dc026;
  }

  .bg_red{
      background-color:red
  }
</style>
