ibms/src/components/ledger/details/tableDisplay.vue

<template>
  <div class="tableDisplay">
    <!-- <el-row :gutter="24">
      <el-col :span="18">
        设备信息点
        <div class="grid-content bgc-white">
          <selectRadio :selectRadio="selectRadio"/>
          <el-row>
            :span的值可以根据条件改变 是一个24 or 两个 16:8
            <el-col :span="16">
              <exhibitionBaseInformation/>
            </el-col>
            <el-col :span="8">
              能耗信息点
            </el-col>
          </el-row>

        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bgc-white">
          <exhibitionImage :exhibitionImage="exhibitionImage"/>
        </div>
      </el-col>
    </el-row> -->
    <div class="header">
      <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
      <span class="details-title"><b>设备本地名称-设备本地编码</b></span>
    </div>
    <div class="content"></div>
    <div class="footer"></div>
  </div>
</template>

<script>
  import exhibitionBaseInformation from "./detail/exhibitionBaseInformation";
  import exhibitionFile from "./detail/exhibitionFile";
  import exhibitionImage from "./detail/exhibitionImage";
  import selectRadio from "./detail/selectRadio";

  export default {
    name: "tableDisplay",
    components: {exhibitionBaseInformation, exhibitionFile, exhibitionImage, selectRadio},
    data() {
      return {
        selectRadio: {
          information: '设备信息点',
          radioList: [
            {
              value: '显示需采集信息点',
              label: '1'
            },
            {
              value: '显示需采集信息点',
              label: '2'
            },
            {
              value: '显示需采集信息点',
              label: '3'
            }
          ]
        },
        exhibitionBaseInformation: {
          //产品说所有信息的key和value是动态生成的
          base: {
            baseInformation: '基本信息',
            list: [
              {
                text: '设备本地编码：',
                val: '123--22：'
              },
              {
                text: '设备二维码图片：',
                val: '2：'
              },
            ]
          },
          manufacture: {
            manufacturerParameter: '台账参数 / 设备厂家',
          },
          supplier: {
            supplierParameters: '台账参数 / 供应购买'
          }
        },
        exhibitionFile: {},
        exhibitionImage: {
          title:'图片'
        }
      }
    },
    created() {
      // 疑问？
      this.$store.dispatch('setBreadcrumb', [{
        label: '台账管理',
        path: '/relation/data'
      }, {
        label: ' 资产台账 ',
        path: '/relation/data'
      }, {
        label: '资产详情'
      }])
    }
  }
</script>

<style scoped lang="less">
  .tableDisplay {
    .header {
      padding-bottom: 10px;
      .details-title {
        color: #333;
        font-size: 16px;
        margin-left: 20px;
        line-height: 32px;
      }
    }

    .content {
      box-sizing: border-box;
      border: 1px solid #ccc;
      height: calc(100% - 82px);
    }

    .footer {
      height: 40px;
    }
  }

</style>