kd-aiot-frontend/src/views/ledgerAssets/equipment/components/baseInfo.vue

<template>
  <div class="baseinfo-container">
    <div class="basic-details-title border-none">
      <span class="border-span">基本信息</span>
    </div>
    <el-descriptions title="" :column="4" size="medium" border>
      <el-descriptions-item>
        <template slot="label"> 设备编码 </template>
        {{ basicInfo.code }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 设备名称 </template>
        {{ basicInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 型号</template>
        {{ basicInfo.modelType }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 规格 </template>
        {{ basicInfo.specification }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label"> 分类 </template>
        {{ basicInfo.categoryLevelPath }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 采购日期 </template>
        {{
          basicInfo.warehouseDetail && basicInfo.warehouseDetail.procurementTime
        }}
      </el-descriptions-item>
      <!-- <el-descriptions-item>
        <template slot="label"> 生产日期 </template>
        {{ basicInfo.productTime }}
      </el-descriptions-item> -->
      <el-descriptions-item>
        <template slot="label"> 过保日期 </template>
        {{ basicInfo.expirationTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 计量单位 </template>
        {{ basicInfo.measuringUnit }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 标准产能 </template>
        {{ setbzcn(basicInfo.extendField) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 生命周期</template>
        <div v-if="info.source == 1" style="color: #70b603">在用</div>
        <div v-if="info.source == 2" style="color: #f59a23">在库</div>
        <div v-if="info.source == 3" style="color: #aaaaaa">消耗</div>
        <!-- {{ basicInfo.sourceDICT }} -->
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 网络状态</template>
        {{ basicInfo.networkStatus == 1 ? '在线' : '离线' }}
      </el-descriptions-item>
    </el-descriptions>

    <div class="basic-details-title border-none">
      <span class="border-span">投产信息</span>
    </div>

    <el-descriptions title="" :column="4" size="medium" border>
      <el-descriptions-item
        v-for="(item, index) in prodOpt"
        :key="index"
        :span="item.span || 1"
      >
        <template slot="label" v-if="item.key == 'bizNum'">{{
          info.source == 2 ? '入库单号' : '出库单号'
        }}</template>
        <template slot="label" v-else> {{ item.label }} </template>
        <div v-if="item.key == 'bizNum'">
          <el-link style="color: #70b603" @click="jumpDetails">{{
            info.warehouseDetail && info.warehouseDetail.bizNum
          }}</el-link>
        </div>
        <div v-else-if="item.key == 'detailLocation'">
          {{ initDetailLocation(item.value) }}
        </div>
        <div v-else>{{ item.value }}</div>
      </el-descriptions-item>
    </el-descriptions>
    <div class="basic-details-title border-none">
      <span class="border-span">文档信息</span>
    </div>
    <!-- <div class="upload-container">
      <div class="img-box">
        <img
          src="~@/assets/img/upload-placeholder.svg"
          alt=""
          v-if="!imageUrl"
        />
        <img v-else :src="imageUrl" alt="设备图片" />
      </div>
      <div class="file-list">
        <div
          :class="{ disabled: !item.accessUrl }"
          @click="openfile(item)"
          v-for="(item, index) in fileList"
          :key="index"
          class="file-box"
        >
          {{ item.t_name }}
        </div>
      </div>
    </div> -->
    <div class="basic-details-title border-none">
      <span class="border-span">物联参数</span>
    </div>
    <el-row>
      <el-col style="padding-left: 30px">
        <span style="color: #3e3e3e; padding-right: 20px; font-size: 14px"
          >是否启用物联</span
        >
        <el-switch
          v-model="info.isIotEnable"
          disabled
          active-text="开"
          inactive-text="关"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </el-col>
      <el-col style="margin-top: 20px; padding-left: 30px; font-size: 14px">
        <span style="color: #3e3e3e">物联ID</span>
        <span style="color: #3e3e3e; padding-left: 10px">{{ info.iotId }}</span>
      </el-col>
    </el-row>
    <div class="basic-details-title border-none">
      <span class="border-span">扩展信息</span>
    </div>
    <div class="kzzd">
      <el-row>
        <el-col
          :span="24"
          v-for="(item, index) in info.extInfoSelf"
          :key="index"
          style="margin-bottom: 20px"
        >
          <div class="add-col">
            <el-input
              disabled
              class="col-input"
              v-model="item.key"
              placeholder="参数名称"
            ></el-input>
            <el-input
              disabled
              class="col-input"
              v-model="item.value"
              placeholder="参数值"
            ></el-input>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <DetailsDialog ref="detailsDialogRef" /> -->
  </div>
</template>

<script>
  import { getAssetInfo } from '@/api/ledgerAssets';
  // import { imageView, fileSystemDownload } from '@/utils'
  // import DetailsDialog from '@/views/ledgerAssets/components/outstoreDetailsDialog.vue'
  export default {
    props: ['id'],
    components: {
      // DetailsDialog
    },
    data () {
      return {
        prodOpt: [
          { label: '固资编码', key: 'fixCode', value: '' },
          { label: '投产日期', key: 'startUpTime', value: '' },
          { label: '所属工厂', key: 'factoryName', value: '' },
          { label: '所属工序', key: 'roteName', value: '' },
          { label: '维护部门', key: 'repairGroupName', value: '' },
          { label: '维护人', key: 'repairUserName', value: '' },
          { label: '维护人电话', key: 'repairUserMobile', value: '' },
          { label: '出库单号', key: 'bizNum', value: '' },
          { label: '权属部门', key: 'ownershipGroupName', value: '' },
          { label: '权属人', key: 'ownershipUserName', value: '' },
          { label: '权属人电话', key: 'ownershipUserMobile', value: '' },
          { label: '品牌', key: 'brand', value: '' },
          { label: '供应商', key: 'supplierName', span: 2, value: '' },
          { label: '供应商电话', key: 'supplierMobile', value: '' },
          { label: '设备用途', key: 'purpose', value: '' },
          { label: '设备位置', key: 'detailLocation', span: 2, value: '' },
          { label: '颜色', key: 'color', value: '' },
          { label: '重量', key: 'weight', value: '' }
        ],
        fileList: [
          { t_name: '使用说明书' },
          { t_name: '生产许可证书' },
          { t_name: '防爆合格证书' },
          { t_name: '检验报告' },
          { t_name: '检验周期说明' },
          { t_name: '图纸资料' },
          { t_name: '产品合格证' }
        ],
        // 基本信息
        basicInfo: {
          assetCode: '',
          assetName: '',
          // 资产管理物品信息
          information: '',
          productTime: '',
          expirationTime: '',
          networkStatus: '',
          sourceDICT: ''
        },
        // 设备图片
        imageUrl: '',
        // 扩展字段
        extInfoSelf: [],
        // 所有信息
        info: {}
      };
    },
    created () {
      this.getInfo();
    },
    methods: {
      // 获取设备详情
      getInfo () {
        getAssetInfo(this.id).then((data) => {
          this.info = data;
          this.basicInfo = data.category;
          if (data.attUrl && data.attUrl.length > 0) {
            // 文档信息
            // Object.keys(this.attUrl).forEach((n, index) => {
            //   if (data.attUrl[index].accessUrl) {
            //     this.attUrl[n] = data.attUrl[index];
            //   }
            // });
          }

          // 资产信息
          for (const item of this.prodOpt) {
            // 地址
            if (item.key == 'detailLocation') {
              item.value = data.positionList[0]?.path
                ?.map((i) => i.name)
                .join(',');
            } else {
              item.value = data[item.key] || this.basicInfo[item.key];
            }
          }

          console.log('this.prodOpt', this.prodOpt);

          // 设备图片
          this.imageUrl = data.imageUrl;
          if (this.imageUrl) {
            // imageView(this.imageUrl).then((res) => {
            //   this.$refs.UploadImg.setImg(res);
            // });
          }
        });
      },
      // 设置标准产能
      setbzcn (val) {
        if (!val) {
          return '';
        }
        let item = JSON.parse(val);
        return item.standardCapacity || '';
      },
      openfile (row) {
        if (row.accessUrl) {
          fileSystemDownload(row);
        }
      },
      // 打开详情弹窗
      jumpDetails () {
        if (!this.info.warehouseDetail) {
          return;
        }
        this.$refs.detailsDialogRef.init(
          this.info.warehouseDetail,
          this.info.source
        );
      },
      // 设备位置
      initDetailLocation (val) {
        console.log(val);
        let list = String(val)
          .split('/')
          .filter((n) => {
            return n !== 'null';
          });
        return list.join('/');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .baseinfo-container .basic-details-title {
    font-size: 16px;
    margin: 15px 0;
  }
  .baseinfo-container {
    background-color: #fff;
    padding: 20px;
    .content {
      padding: 0 20px;
    }
    .upload-container {
      display: flex;
      .img-box {
        width: 280px;
        height: 342px;
        border: 1px solid rgba(215, 215, 215, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          max-width: 100%;
        }
      }
      .file-list {
        margin-left: 50px;
        flex: 1;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        justify-items: baseline;
        align-content: flex-start;
        .file-box {
          width: 30%;
          margin-bottom: 20px;
          height: 57px;
          text-align: center;
          line-height: 55px;
          border: 1px solid var(--mainColor);
          color: var(--mainColor);
          cursor: pointer;

          &.disabled {
            cursor: not-allowed;
            border-color: rgba(215, 215, 215, 1);
            color: rgba(215, 215, 215, 1);
          }
        }
      }
    }
  }
  .kzxx-wrap {
    .item {
      display: flex;
      .key {
        margin-right: 10px;
      }
    }
  }
  .kzzd {
    width: 500px;
    .add-col {
      display: flex;
      .col-input {
        & + .col-input {
          margin-left: 10px;
        }
      }
      .del {
        margin-left: 10px;
      }
    }
  }
</style>