admin-fiveFollowing/src/views/patrolManage/patrolPlan/inspePlanDetails.vue

<template>
  <div class="powerEquip">
    <div class="model">
      <div class="modelHeader">
        <div class="headerTitle">
          <span class="span">巡检计划详情</span>
          <el-button class="goBack" @click="goBack">返回</el-button>
        </div>
        <div class="pro-common-basicInfo">
          <div class="pro-common-left">
            <div class="pro-common-top">
              <div class="pro-common-mainIcon">
                <img src="@/assets/images/common-mainIcon.jpg" alt="" />
              </div>
              <div class="pro-common-mainInfo">
                <div class="pro-common-subTitle">计划编号：RIP23_211020001</div>
                <div class="pro-common-name">测试巡检one</div>
                <div class="pro-common-status">
                  <label class="pro-common-name">计划状态：</label>
                  已开始
                </div>
              </div>
            </div>
            <div class="pro-common-bottom">
              <label>
                <span>创建人</span>
                ：运维管理员/123
              </label>
              <label>巡检周期：2021-10-21 ~ 2021-10-31</label>
            </div>
          </div>
          <div class="pro-common-right">
            <div class="pro-common-card">
              <label class="pro-common-name">负责人</label>
              <div class="pro-common-value" style="font-size: 15px">
                蒋跃宗/
                <br />
                13916238398
              </div>
            </div>
            <div class="pro-common-card">
              <label class="pro-common-name">巡检班组</label>
              <div class="pro-common-value">嘉定组</div>
            </div>
            <div class="pro-common-card">
              <label class="pro-common-name">工单创建时间</label>
              <div class="pro-common-value">执行当日</div>
            </div>
          </div>
        </div>
        <div class="pro-common-pageArea">
          <div class="pro-common-areaTitle"><span>巡检人员</span></div>
          <div class="pro-common-operators">
            <div class="pro-common-operatorCell">
              <img src="@/assets/images/default_head.jpg" />
              <div>
                蒋跃宗
                <span>13916238398</span>
              </div>
            </div>
            <div class="pro-common-operatorCell">
              <img src="@/assets/images/default_head.jpg" />
              <div>
                李文钧
                <span>13611609628</span>
              </div>
            </div>
            <div class="pro-common-operatorCell">
              <img src="@/assets/images/default_head.jpg" />
              <div>
                赵庆
                <span>13122007679</span>
              </div>
            </div>
          </div>
        </div>
        <div class="pro-common-pageArea">
          <div class="pro-common-areaTitle">
            <span>巡检路线</span>
            <a class="pro-pages-inspect-plandetail-routeBtn">
              <svg-icon
                class="anticon-dingwei"
                iconClass="anticon-dingwei"
              ></svg-icon>
              站点地图
            </a>
          </div>
          <div class="pro-pages-inspect-plandetail-stationCards">
            <div class="pro-pages-inspect-plandetail-stationCard">
              <div class="pro-pages-inspect-plandetail-left">
                <div>
                  <label class="antd-pro-pages-inspect-plandetail-count">
                    3
                  </label>
                  个设备
                </div>
              </div>
              <div class="antd-pro-pages-inspect-plandetail-right">
                <div class="antd-pro-pages-inspect-plandetail-name">
                  测试站点
                </div>
                <div class="antd-pro-pages-inspect-plandetail-address">
                  上海徐乐路208号
                </div>
              </div>
            </div>
            <div class="pro-pages-inspect-plandetail-stationCard">
              <div class="pro-pages-inspect-plandetail-left">
                <div>
                  <label class="antd-pro-pages-inspect-plandetail-count">
                    1
                  </label>
                  个设备
                </div>
              </div>
              <div class="antd-pro-pages-inspect-plandetail-right">
                <div class="antd-pro-pages-inspect-plandetail-name">
                  宝辉冶金13433
                </div>
                <div class="antd-pro-pages-inspect-plandetail-address">
                  上海上海城区闵行区
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'powerEquip',
  components: {},
  props: {},
  setup(props, { emit }) {
    props
    ref

    const goBack = () => {
      emit('modle', true)
    }

    return {
      goBack,
    }
  },
})
</script>

<style lang="scss" scoped>
.powerEquip {
  height: calc(100vh - 130px);
  min-width: 810px;
  .model {
    height: 100%;
    padding: 15px;
    .modelHeader {
      .headerTitle {
        .span {
          border-left: 3px #1890ff solid;
          padding-left: 5px;
          margin-right: 15px;
          font-size: 17px;
        }
        .goBack {
          min-height: 24px;
          padding: 0px 5px;
        }
      }
      .pro-common-basicInfo {
        display: -webkit-box;
        -webkit-box-pack: justify;
        border-bottom: 3px #1890ff solid;
        margin-top: 15px;
        padding-bottom: 10px;
        .pro-common-left {
          .pro-common-top {
            display: flex;
            .pro-common-mainIcon {
              width: 110px;
              height: 110px;
              .anticon_user {
                margin: 0 auto;
                display: block;
                font-size: 50px;
                margin-bottom: 8px;
              }
            }
            .pro-common-mainInfo {
              min-height: 110px;
              margin-left: 20px;
              font-size: 14px;
              > .pro-common-subTitle {
                color: rgba(0, 0, 0, 0.65);
                font-size: 13px;
              }
              > .pro-common-name {
                font-size: 24px;
                color: #000;
                line-height: 32px;
                min-height: 64px;
                max-width: 450px;
                margin-top: 4px;
                font-weight: 600;
                display: inline-block;
              }
              > .pro-common-status {
                font-weight: 700;
                color: #52c41a;
                .pro-common-name {
                  display: inline-block;
                  margin-right: 4px;
                  color: #000;
                }
              }
            }
          }
          .pro-common-bottom {
            color: rgba(0, 0, 0, 0.65);
            font-size: 13px;
            margin-top: 12px;
            > label {
              margin-right: 18px;
            }
          }
        }
        .pro-common-right {
          .pro-common-card {
            min-width: 8.5rem;
            max-width: 170px;
            height: 138px;
            text-align: center;
            float: left;
            margin-right: 12px;
            background-color: #f0f2f5;
            border: 1px solid hsla(0, 0%, 85.1%, 0.3);
            > .pro-common-name {
              font-size: 13px;
              color: rgba(0, 0, 0, 0.65);
              margin-top: 24px;
              display: block;
              font-weight: 500;
            }
            > .pro-common-value {
              color: #000;
              font-size: 18px;
              font-weight: 500;
              height: 84px;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              display: flex;
              width: 100%;
            }
          }
        }
      }
      .pro-common-pageArea {
        padding: 12px 12px 12px 24px;
        margin-top: 12px;
        overflow: hidden;
        .pro-common-areaTitle {
          color: #000;
          font-size: 15px;
          margin-right: 8px;
          padding-bottom: 6px;
          font-weight: 500;
          .pro-pages-inspect-plandetail-routeBtn {
            margin-left: 12px;
            font-size: 13px;
            cursor: pointer;
            .anticon-dingwei {
              font-size: 13px;
              margin-right: 0px;
            }
          }
        }
        .pro-common-operators {
          margin-left: 12px;
          .pro-common-operatorCell {
            padding: 7px 8px;
            color: rgba(0, 0, 0, 0.65);
            margin: 6px 4px 8px;
            display: flex;
            text-align: center;
            float: left;
            align-items: center;
            border: 1px solid #d9d9d9;
            line-height: 24px;
            background-color: #f0f2f5;
            img {
              width: 24px;
              max-height: 24px;
            }
            > div {
              margin-left: 8px;
            }
          }
        }
        .pro-pages-inspect-plandetail-stationCards {
          .pro-pages-inspect-plandetail-stationCard {
            background-color: #fef3e7;
            .pro-pages-inspect-plandetail-left {
              background-color: #fed494;
              width: 82px;
              height: 100%;
              color: #333;
              font-size: 12px;
              font-weight: 500;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              display: flex;
              padding-bottom: 4px;
            }
          }
        }
      }
    }
    .modelHeader::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>