admin-fiveFollowing/src/views/patrolManage/patrolRecord/dialog/select.vue

<template>
  <div style="margin: 0px 15px">
    <el-dialog
      class="recorddetail-select"
      style="font-weight: 600"
      v-model="dialogVisible"
      title="测试"
      width="900px"
      @close="close"
      center
    >
      <div class="recorddetail-span">
        <span>（第1次）</span>
        巡检开始：2021-10-20 18:00
        <span style="color: red">（巡检中）</span>
      </div>
      <div class="recorddetail-top">
        <div class="recorddetail-flex">
          <div>
            <i class="recorddetail-icon recorddetail-stationIcon"></i>
            <div>
              <span>1</span>
              <span>站点数</span>
            </div>
          </div>
          <div>
            <i class="recorddetail-icon recorddetail-itemIcon"></i>
            <div>
              <span>3</span>
              <span>巡检设备数</span>
            </div>
          </div>
          <div>
            <i class="recorddetail-icon recorddetail-exceptionIcon"></i>
            <div>
              <span>0</span>
              <span>异常设备</span>
            </div>
          </div>
          <div>
            <i class="recorddetail-icon recorddetail-dtsIcon"></i>
            <div>
              <span>0</span>
              <span>缺陷</span>
            </div>
          </div>
        </div>
      </div>
      <div class="recorddetail-body">
        <div class="recorddetail-infoGroup">
          <div>
            <span>计划计划编号:</span>
            <span>RIP23_211018001</span>
          </div>
          <div>
            <span>巡检公司:</span>
            <span>伍继智能</span>
          </div>
          <div>
            <span>负责人:</span>
            <span>蒋跃宗</span>
          </div>
          <div>
            <span>巡检班组:</span>
            <span>嘉定组</span>
          </div>
          <div>
            <span>巡检人员:</span>
            <span></span>
          </div>
        </div>
        <div class="recorddetail-separatorTitle">巡检结果</div>

        <div class="recorddetail-resultWrapper">
          <div class="recorddetail-result">
            <div class="recorddetail-stationName">
              <div>测试站点</div>
              <div class="divIcon">
                <span role="img" aria-label="star" class="anticon anticon-star">
                  <svg-icon iconClass="stationName"></svg-icon>
                </span>
                巡检中
              </div>
            </div>
            <div class="recorddetail-items">
              <div>
                <span>3</span>
                <span>巡检设备数</span>
              </div>
              <div>
                <span class="">0</span>
                <span>异常设备</span>
              </div>
              <div>
                <span class="">0</span>
                <span>缺陷</span>
              </div>
              <div>
                <div class="recorddetail-detailBtn">
                  <a @click="iconContent">
                    {{ iconTitle }}
                    <span
                      role="img"
                      aria-label="caret-up"
                      class="anticon anticon-caret-up"
                    >
                      <svg-icon
                        iconClass="detailBtn1"
                        v-if="!iconBool"
                      ></svg-icon>
                      <svg-icon
                        iconClass="detailBtn2"
                        v-if="iconBool"
                      ></svg-icon>
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top: 12px" v-if="!iconBool">
            <div style="margin: 8px 0px">
              <strong>巡检设备：测试2</strong>
              <span class="antd-pro-pages-inspect-recorddetail-headerItem">
                设备状态：
                <span>待巡检</span>
              </span>
              <div style="float: right">
                <span class="antd-pro-pages-inspect-recorddetail-headerItem">
                  检查项数：1
                </span>
                <span class="antd-pro-pages-inspect-recorddetail-headerItem">
                  异常项：0
                </span>
              </div>
            </div>
            <div style="padding-left: 16px"></div>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { defineComponent, ref, watchEffect } from 'vue'
import { ElMessageBox } from 'element-plus'

export default defineComponent({
  name: 'patolPlan',
  components: {},
  props: {
    flag: Boolean,
  },
  setup(props, context) {
    ref
    const dialogVisible = ref(false)

    const handleClose = (done) => {
      ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
          done()
        })
        .catch(() => {
          // catch error
        })
    }

    const close = () => {
      context.emit('dialog', false)
      dialogVisible.value = false
    }

    const iconCont = ref(1)
    const iconBool = ref(false)
    const iconTitle = ref('隐藏详情')
    const iconContent = () => {
      if (iconCont.value == 1) {
        iconBool.value = true
        iconTitle.value = '显示详情'
        iconCont.value = 2
      } else {
        iconBool.value = false
        iconTitle.value = '隐藏详情'
        iconCont.value = 1
      }
      console.log('')
    }

    watchEffect((fn, options) => {
      fn, options
      dialogVisible.value = props.flag
    })
    return {
      close,
      iconBool,
      iconCont,
      iconTitle,
      iconContent,
      dialogVisible,
      handleClose,
    }
  },
})
</script>

<style lang="scss" scoped>
.recorddetail-span {
  margin-top: -25px;
  text-align: center;
}
.recorddetail-top {
  background: url('~@/assets/images/record-bg2.png') 50% no-repeat;
  background-size: cover;
  margin: 0px -25px;
  .recorddetail-flex {
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 50px;
    > div {
      display: flex;
      flex: 1 1;
      justify-content: center;
      > div {
        text-align: center;
        margin-left: 20px;
        span {
          color: #fff;
        }
        span:first-child {
          font-size: 23px;
          display: block;
        }
        span:last-child {
          font-size: 13px;
          display: block;
        }
      }
    }
    .recorddetail-icon {
      width: 50px;
      height: 50px;
      display: block;
      margin-top: 5px;
    }
    .recorddetail-stationIcon {
      background: url('~@/assets/images/record-station.png') 50% no-repeat;
      background-size: cover;
    }
    .recorddetail-itemIcon {
      background: url('~@/assets/images/record-item.png') 50% no-repeat;
      background-size: cover;
    }
    .recorddetail-exceptionIcon {
      background: url('~@/assets/images/record-exception.png') 50% no-repeat;
      background-size: cover;
    }
    .recorddetail-dtsIcon {
      background: url('~@/assets/images/record-dts.png') 50% no-repeat;
      background-size: cover;
    }
  }
}
.recorddetail-body {
  margin-top: 20px;
  .recorddetail-infoGroup {
    > div {
      background-color: #f7f8fa;
      margin-bottom: 8px;
      color: #666;
      padding: 8px 12px;
      font-weight: 500;
      span:first-child {
        color: #000;
        display: inline-block;
        margin-right: 12px;
      }
      span:last-child {
        color: #000;
        font-weight: 600;
      }
    }
  }
  .recorddetail-separatorTitle {
    width: 100%;
    color: #22a97e;
    font-size: 20px;
    font-weight: 700;
    margin: 12px 0;
    text-align: center;
  }
  .recorddetail-resultWrapper {
    .recorddetail-result {
      background-color: #e9ebf4;
      border-radius: 4px;
      height: 81px;
      display: flex;
      position: relative;
      .recorddetail-stationName {
        display: inline-block;
        height: 100%;
        width: 200px;
        background-color: #d5d6e3;
        padding: 12px;
        text-align: center;
        color: rgba(0, 0, 0, 0.65);
        .divIcon {
          color: rgb(76, 142, 250);
          font-size: 15px;
          margin-top: 12px;
        }
      }
      .recorddetail-items {
        display: flex;
        justify-content: space-evenly;
        flex: 1 1;
        align-items: center;
        > div {
          text-align: center;
          > span:first-child {
            font-size: 19px;
            color: #333;
            display: block;
            margin-bottom: 4px;
          }
          > span:last-child {
            font-size: 15px;
            color: #a0a2bf;
          }
        }
        .recorddetail-detailBtn {
          font-size: 14px;
          color: #6c7fff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>