JG-CLIENT-TEMP/src/views/pro-steps/components/leftBarInfo.vue

<template>
  <div class="container">
    <div class="textBox">
      <div class="titleText blackColor">
        <el-tooltip class="box-item" effect="dark" :content="processInfo.materialName" placement="left" trigger="click">
          {{ substringInfo.materialName }}
        </el-tooltip>
      </div>
      <div class="simpleText greyColor">
        <el-tooltip class="box-item" effect="dark" :content="processInfo.materialModel" placement="left" trigger="click">
          {{ processInfo.materialModel.substring(0, 15) }}
        </el-tooltip>
      </div>
    </div>
    <div class="textBox" style="margin: 10px 0">
      <div class="simpleText greyColor">序列号</div>
      <div class="simpleText blackColor">{{ processInfo.operationCode }}</div>
    </div>
    <div class="textBox">
      <div class="simpleText greyColor">当前工序</div>
      <div class="simpleText blackColor">{{ processInfo.operationName }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { processViewStore } from "@/store";
const store = processViewStore();
const processInfo = ref({ materialName: "...", materialModel: "..." });
const substringInfo = ref({});
onMounted(() => {
  let obj = {};
  processInfo.value = store.processInfo;
  obj = JSON.parse(JSON.stringify(store.processInfo));
  obj.materialName = obj.materialName.substring(0, 15);
  substringInfo.value = obj;
});
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 200px;
  border-radius: 16px;
  background-color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  .textBox {
    .titleText {
      font-size: $f24;
      line-height: 24px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }

    .simpleText {
      font-size: $f20;
      line-height: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      max-width: 100%;
    }
  }
}

.blackColor {
  font-weight: $Medium;
}

.greyColor {
  color: $font-default-60;
}
</style>