Web/admin.ui.plus-master/src/views/admin/product/goodInfo.vue

<template>
  <div class="goodInfo layout-pd" >
    <!--部件详情-->
    <el-row>
      <!-- 基础信息 -->
      <el-col :xs="24" >
        <el-card shadow="hover" header="基础信息">
          <div class="basicInformation" v-loading="goods.loadingBasic">
            <div class="basicInformation-left">
              <div v-for="(item, index) in goods.basicInformation.basicInfo" :key="index" class="item">
                <el-popover
                  placement="top-start"
                  :title="item.goodsTitle"
                  :width="200"
                  trigger="hover"
                  :content="item.goodsValue"
                >
                  <template #reference>
                    <span class="m-2">{{item.goodsTitle}} : {{item.goodsValue}}</span>
                  </template>
                </el-popover>
              </div>
            </div>
            <div class="basicInformation-right" v-if="goods.basicInformation.goodsImg">
              <div @click="showBigPic(goods.basicInformation.goodsImg.imgUrl)">
                <el-image loading="lazy"
                          alt="fgg"
                          class="img"
                          fit="fill"
                          :src="goods.basicInformation.goodsImg.imgUrl" />
              </div>
              <div class="text">{{goods.basicInformation.goodsImg.title}}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 生产日志 -->
      <el-col :xs="24" >
        <el-card style="height: 70vh" class="my-fill mt8"  shadow="hover" header="生产日志">
          <el-table v-loading="goods.loadingProduct" :data="goods.productionLog.tableData" row-key="id" style="width: 100%">
            <el-table-column v-for="column in goods.productionLog.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label"  />
          </el-table>
          <div class="my-flex my-flex-end" v-if="goods.productionLog.pageInput" style="margin-top: 20px">
            <el-pagination
              v-model:currentPage="goods.productionLog.pageInput.CurrentPage"
              v-model:page-size="goods.productionLog.pageInput.PageSize"
              :total="goods.productionLog.total"
              :page-sizes="[10, 20, 50, 100]"
              small
              background
              @size-change="onProductionLogSizeChange"
              @current-change="onProductionLogCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
        </el-card>
      </el-col>

      <!-- 报警日志 -->
      <el-col :span="24" >
        <el-card style="height: 70vh" class="my-fill mt8" shadow="hover" header="报警日志">
          <el-table v-loading="goods.loadingAlarm" :data="goods.alarmLog.tableData" row-key="id" style="width: 100%">
            <el-table-column v-for="column in goods.alarmLog.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label"  />
          </el-table>
          <div class="my-flex my-flex-end" v-if="goods.alarmLog.pageInput" style="margin-top: 20px">
            <el-pagination
              v-model:currentPage="goods.alarmLog.pageInput.CurrentPage"
              v-model:page-size="goods.alarmLog.pageInput.PageSize"
              :total="goods.alarmLog.total"
              :page-sizes="[10, 20, 50, 100]"
              small
              background
              @size-change="onAlarmLogSizeChange"
              @current-change="onAlarmLogCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--大图显示-->
    <el-dialog
      v-model="goods.showBig"
      :close-on-click-modal="true"
      :show-close="false"
      width="80%"
    >
      <img :src="goods.imageUrl" class="fullscreen-image"  alt="放大的图片"/>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="goodInfo">
import {onMounted, reactive} from "vue";
import {ComponentDetails} from "/@/api/admin/productionManagement/ComponentDetails";
import router from "/@/router";
import type {
  alarmLog,
  goodsInformationBasic,
  productionLog
} from "/@/api/admin/productionManagement/ComponentDetailsDto";
import {adminProductGoodsInfoDto} from "/@/api/admin/productionManagement/ComponentDetailsDto";
import type {columnsProps, pageInput} from "/@/api/admin/shareDto/shareDto";

//组件的页面对象
const goods = reactive({
  /**部件id */
  id:"",
  /**显示加载效果 */
  loadingBasic: false,
  loadingProduct: false,
  loadingAlarm: false,
  /**图片是否方法显示 */
  showBig: false,
  /**放大图片的url */
  imageUrl: "",
  /**基础信息 */
  basicInformation: {} as goodsInformationBasic,
  /**生产日志 */
  productionLog: {
    /**表格数据 */
    tableData:  [] as Array<productionLog>,
    /**动态表头 */
    dynamicColumns: [] as Array<columnsProps>,
    /**页面分页 */
    pageInput: {
      currentPage: 1,
      pageSize: 20
    } as pageInput,
    /**总数 */
    total: 0
  } as productionLog,
  /**报警日志 */
  alarmLog: {
    /**表格数据 */
    tableData:  [] as Array<alarmLog>,
    /**动态表头 */
    dynamicColumns: [] as Array<columnsProps>,
    /**页面分页 */
    pageInput: {
      CurrentPage: 1,
      PageSize: 20
    } as pageInput,
    /**总数 */
    total: 0
  } as alarmLog,
} as adminProductGoodsInfoDto)


//查看大图
const showBigPic = (val) => {
  // eslint-disable-next-line no-console
  console.log(val)
  goods.imageUrl = val
  goods.showBig = true
}

/**生产日志分页size变化 */
const onProductionLogSizeChange = (val) => {
  goods.productionLog.pageInput.PageSize = val
  initProductionLog()
}

/**生产日志分页Current变化 */
const onProductionLogCurrentChange = (val) => {
  goods.productionLog.pageInput.CurrentPage = val
  initProductionLog()
}

/**报警日志分页size变化 */
const onAlarmLogSizeChange = (val) => {
  goods.alarmLog.pageInput.CurrentPage = val
  initAlarmLog()
}

/**报警日志分页Current变化 */
const onAlarmLogCurrentChange = (val) => {
  goods.alarmLog.pageInput.CurrentPage = val
  initAlarmLog()
}

/**
 * 初始化数据
 */
const initBasicInformation =  async () => {
  goods.loadingBasic = true
  goods.basicInformation = await new ComponentDetails().getBasicInfo(goods.id)
  goods.loadingBasic = false
  // console.log(goods.basicInformation)
}

const initProductionLog = async () => {
  goods.loadingProduct = true
  goods.productionLog = await new ComponentDetails().getProductionLog(goods.productionLog.pageInput, goods.id)
  goods.loadingProduct = false
  // console.log(goods.productionLog)
}

const initAlarmLog = async () => {
  goods.loadingAlarm = true
  goods.alarmLog = await new ComponentDetails().getAlarmLog(goods.productionLog.pageInput, goods.id)
  goods.loadingAlarm = false
  // console.log(goods.alarmLog)

}


onMounted(() => {
  goods.id = <string>router.currentRoute.value.params.id
  /**初始化 */
  initBasicInformation()
  initProductionLog()
  initAlarmLog()
})

</script>
<style scoped lang="scss">
.goodInfo{
  font-weight: 600;
  .el-card{
    margin-bottom: 20px;
  }

  .basicInformation{
    display: flex;
    display: -webkit-flex; /* Safari */
    justify-content: space-around;
    align-items:center;
    align-content:space-around;
    flex-wrap: wrap-reverse;
    .basicInformation-left{
      display: flex;
      display: -webkit-flex; /* Safari */
      justify-content: space-around;
      flex-wrap: wrap;
      padding: 12px;
      height: 100%;
      max-width: 65%;
      min-width: 300px;
      .item{
        cursor: pointer;
        width: 240px;/*设置显示的最大宽度*/
        height: 50px;
        overflow:hidden;/*超出部分隐藏*/
        white-space:nowrap;/*强制单行显示*/
        text-overflow: ellipsis;
      }

    }
    .basicInformation-right{
      width: 50%;
      height: 100%;
      max-width: 400px;
      min-width: 300px;
      margin: 20px 10px;
      .img {
        cursor: pointer;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 8px;
      }
      .img:hover {
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      }
      .text {
        height: 50px;
        display: flex;
        display: -webkit-flex; /* Safari */
        justify-content: center;
        align-items: center;
        font-size: 1.4rem;
      }
    }
  }
  .fullscreen-image {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
  }
}
</style>