v3-lab-web/src/views/iotDevice/hardwareManagement/hardwareEquipment/infoPage.vue

<template>
  <div class="page-container hardwareEquipment-infoPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">详情</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
    </div>
    <div class="content-box scrollbar-box">
      <div class="info-max-box">
        <div class="info-left-max-box">
          <span class="iconfont icon-yingjianshebei"></span>
          <p :class="newData.operatingState?'onlineTypeA':'onlineTypeB'">{{newData.operatingState?'开启':'关闭'}}</p>
        </div>
        <div class="info-right-max-box scrollbar-box">
          <div class="info-min-box">
            <div>
              <p>硬件ID：</p>
              <p>{{newData.deviceId}}</p>
            </div>
          </div>
          <div class="info-min-box">
            <div>
              <p>硬件名称：</p>
              <p>{{newData.hardwareName}}</p>
            </div>
          </div>
          <div class="info-min-box">
            <div>
              <p>硬件编号：</p>
              <p>{{newData.deviceNo}}</p>
            </div>
          </div>
          <div class="info-min-box">
            <div>
              <p>硬件类型：</p>
              <p>{{newData.hardwareTypeName}}</p>
            </div>
          </div>
          <div class="info-min-box">
            <div>
              <p>状态：</p>
              <p>{{newData.state?'启用':'停用'}}</p>
            </div>
          </div>
          <div class="info-min-box">
            <div>
              <p>创建时间：</p>
              <p>{{parseTime(newData.createTime)}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="table-max-box">
        <div class="table-button-box" @click="tableCheck(1)" :class="tableType==1?'check-table-box':''">
          <p>日志</p>
          <p></p>
        </div>
        <div class="table-button-box" @click="tableCheck(2)" :class="tableType==2?'check-table-box':''">
          <p>调试</p>
          <p></p>
        </div>
        <div class="table-null-box">
          <p></p>
          <p></p>
        </div>
      </div>
      <div class="table-content-box" v-if="tableType == 1">
        <hardware-log></hardware-log>
      </div>
      <div class="table-content-box" v-if="tableType == 2">
        <hardware-debug></hardware-debug>
      </div>
    </div>
  </div>
</template>

<script>
  import hardwareLog from "./bottomModule/hardwareLog.vue";
  import hardwareDebug from "./bottomModule/hardwareDebug.vue";
  import { iotHardwareDetail } from '@/api/iotDevice/index'
  export default {
    name: 'infoPage',
    components: {
      hardwareLog,
      hardwareDebug
    },
    props: {
      propsData: {}
    },
    data() {
      return {
        tableType: 1,
        newData: {},
        models: []
      }
    },
    created() {
      this.initialize()
    },
    mounted() {

    },
    methods: {
      tableCheck(type) {
        if (this.tableType != type) {
          this.$set(this, 'tableType', type)
        }
      },
      //初始化
      initialize() {
        this.$set(this,'newData',this.propsData);
      },
      // 返回按钮
      backPage() {
        this.$parent.tableButton(6)
      },
      //获取详情
      iotHardwareDetail(){
        iotHardwareDetail({id:this.$parent.propsData.id}).then(response =>{
          this.$set(this.propsData,'operatingState',response.data.operatingState);
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .hardwareEquipment-infoPage {
    .content-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      .info-max-box {
        padding: 20px;
        display: flex;
        .info-left-max-box {
          width: 180px;
          height: 180px;
          img {
            width: 100px;
            height: 100px;
            margin: 20px 40px 0;
          }
          .iconfont{
            display: inline-block;
            width: 100px;
            height: 100px;
            line-height:100px;
            text-align: center;
            margin: 20px 40px 0;
            color:#0183FA;
            font-size:100px;
          }
          p {
            width: 100px;
            line-height: 30px;
            height: 30px;
            text-align: center;
            font-size: 14px;
            margin: 10px 40px 0;
            border-radius: 4px;
          }
          .onlineTypeA {
            background-color: #0183FA;
            color: #fff;
          }
          .onlineTypeB {
            background-color: #E65D6E;
            color: #fff;
          }
        }
        .info-right-max-box {
          height: 180px;
          padding: 20px 0;
          .info-min-box {
            width: 440px;
            display: inline-block;
            div {
              display: flex;
              padding: 10px;
              p {
                color: #333;
                font-size: 14px;
                line-height: 20px;
              }
              p:nth-child(1) {
                width: 140px;
                text-align: right;
              }
              p:nth-child(2) {
                width: 300px;
                word-wrap: break-word;
                word-break: break-all;
                overflow: hidden;
              }
            }
          }
        }
      }
      .table-max-box {
        display: flex;
        .table-button-box {
          cursor: pointer;
          display: flex;
          height: 44px;
          flex-direction: column;
          p:nth-child(1) {
            padding: 0 40px;
            font-size: 14px;
            line-height: 40px;
            height: 40px;
            text-align: center;
          }
          p:nth-child(2) {
            height: 4px;
            background-color: #dedede;
          }
        }
        .table-null-box {
          flex: 1;
          display: flex;
          height: 44px;
          flex-direction: column;
          p:nth-child(1) {
            height: 40px;
          }
          p:nth-child(2) {
            height: 4px;
            background-color: #dedede;
          }
        }
        .check-table-box {
          p:nth-child(1) {
            font-weight: 700;
            color: #0045AF;
          }
          p:nth-child(2) {
            background-color: #0045AF;
          }
        }
      }
      .table-content-box {
        flex: 1;
        flex-direction: column;
        display: flex;
        overflow: hidden;
      }
    }
  }
</style>