|
|
@@ -0,0 +1,304 @@
|
|
|
+<template>
|
|
|
+ <div class="goodInfo layout-pd" v-loading="goods.loading">
|
|
|
+ <el-row>
|
|
|
+ <!-- 基础信息 -->
|
|
|
+ <el-col :xs="24" >
|
|
|
+ <el-card shadow="hover" header="基础信息">
|
|
|
+ <div class="basicInformation" >
|
|
|
+ <div class="basicInformation-left">
|
|
|
+ <div v-for="(item, index) in goods.basicInformation" :key="index" class="item">
|
|
|
+ <el-popover
|
|
|
+ placement="top-start"
|
|
|
+ :title="item.title"
|
|
|
+ :width="200"
|
|
|
+ trigger="hover"
|
|
|
+ :content="item.value"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <span class="m-2">{{item.title}} : {{item.value}}</span>
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="basicInformation-right">
|
|
|
+ <div @click="showBigPic(goods.imageurl)">
|
|
|
+ <el-image loading="lazy"
|
|
|
+ alt="fgg"
|
|
|
+ class="img"
|
|
|
+ fit="fill"
|
|
|
+ :src="goods.imageurl" />
|
|
|
+ </div>
|
|
|
+ <div class="text">312312</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- 生产日志 -->
|
|
|
+ <el-col :xs="24">
|
|
|
+ <el-card shadow="hover" header="生产日志">
|
|
|
+ <div class="productionLog">
|
|
|
+ <el-table v-loading="goods.loading" :data="goods.productionLog" row-key="id" style="width: 100%">
|
|
|
+ <el-table-column prop="dateOfManufacture" label="生产时间" />
|
|
|
+ <el-table-column prop="operator" label="操作人" />
|
|
|
+ <el-table-column prop="workingProcedure" label="工序" />
|
|
|
+ <el-table-column prop="state" label="状态" />
|
|
|
+ <el-table-column prop="productionPictures" label="生产图片">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-link @click="showPic(row.productionPictures)" :underline="false">点击查看</el-link>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="remarks" label="备注" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- 报警日志 -->
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-card shadow="hover" header="报警日志">
|
|
|
+ <div class="alarmLog">
|
|
|
+ <el-table v-loading="goods.loading" :data="goods.alarmLog" row-key="id" style="width: 100%">
|
|
|
+ <el-table-column prop="alarmDate" label="报警日期" />
|
|
|
+ <el-table-column prop="eventName" label="事件名称" />
|
|
|
+ <el-table-column prop="remarks" label="备注" />
|
|
|
+ <el-table-column prop="state" label="状态" />
|
|
|
+ </el-table>
|
|
|
+ </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";
|
|
|
+const goods = reactive({
|
|
|
+ loading: false,
|
|
|
+ basicInformation: [],
|
|
|
+ productionLog: [],
|
|
|
+ alarmLog: [],
|
|
|
+ imageurl:"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
|
|
|
+ showBig:false
|
|
|
+ // token: storesUserInfo.getToken(),
|
|
|
+})
|
|
|
+
|
|
|
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
|
+const init = async () =>{
|
|
|
+ goods.loading = true
|
|
|
+ setTimeout(() =>{
|
|
|
+ goods.basicInformation =
|
|
|
+ [
|
|
|
+ {
|
|
|
+ "title": "部件名称",
|
|
|
+ "value": "TQC+主板12321312312311231231231231232312312312123"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "部件类型",
|
|
|
+ "value": "计控主板12312312311231231231231232323123112312312312312323231231231123123123123123232"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "物料号",
|
|
|
+ "value": "TOK-20021203"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "生产料号",
|
|
|
+ "value": "SC202307051"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "序列号",
|
|
|
+ "value": "20121221"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "软件版本",
|
|
|
+ "value": ""
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "厂商名称",
|
|
|
+ "value": "托肯恒山"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "中化密钥状态",
|
|
|
+ "value": "已绑定"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "团标密钥状态",
|
|
|
+ "value": "已备案"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "状态",
|
|
|
+ "value": "正常"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "创建时间",
|
|
|
+ "value": "2023-07-05"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "生产时间",
|
|
|
+ "value": "2023-07-05"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "备注",
|
|
|
+ "value": ""
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "检测时间",
|
|
|
+ "value": "2023-07-06"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "检测员",
|
|
|
+ "value": "生产员"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ goods.productionLog = [
|
|
|
+ {
|
|
|
+ dateOfManufacture:"2023-07-05",
|
|
|
+ operator:"蒋工1",
|
|
|
+ workingProcedure:"团标密钥灌注1",
|
|
|
+ state:true,
|
|
|
+ productionPictures:"111",
|
|
|
+ remarks:"222"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dateOfManufacture:"2023-07-05",
|
|
|
+ operator:"蒋工2",
|
|
|
+ workingProcedure:"团标密钥灌注2",
|
|
|
+ state:true,
|
|
|
+ productionPictures:"111",
|
|
|
+ remarks:"222"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dateOfManufacture:"2023-07-05",
|
|
|
+ operator:"蒋工3",
|
|
|
+ workingProcedure:"团标密钥灌3",
|
|
|
+ state:true,
|
|
|
+ productionPictures:"2323",
|
|
|
+ remarks:"333"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ goods.alarmLog = [
|
|
|
+ {
|
|
|
+ alarmDate:"23-07-06 09:14",
|
|
|
+ eventName:"通讯异常1",
|
|
|
+ remarks:"",
|
|
|
+ state:false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ alarmDate:"23-07-06 09:14",
|
|
|
+ eventName:"通讯异常2",
|
|
|
+ remarks:"",
|
|
|
+ state:false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ alarmDate:"23-07-06 09:14",
|
|
|
+ eventName:"通讯异常3",
|
|
|
+ remarks:"",
|
|
|
+ state:false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ goods.loading = false
|
|
|
+ },1000)
|
|
|
+}
|
|
|
+
|
|
|
+//点击查看详细
|
|
|
+const showPic = (val: string) => {
|
|
|
+ showBigPic(val)
|
|
|
+}
|
|
|
+// const showFullText = (val: any) => {
|
|
|
+// const e = val.target
|
|
|
+// // e.style.
|
|
|
+// // eslint-disable-next-line no-console
|
|
|
+// console.log(e)
|
|
|
+// }
|
|
|
+
|
|
|
+//查看大图
|
|
|
+const showBigPic = (val : string) => {
|
|
|
+ // eslint-disable-next-line no-console
|
|
|
+ console.log(val)
|
|
|
+ // goods.imageurl = val
|
|
|
+ goods.showBig = true
|
|
|
+}
|
|
|
+
|
|
|
+// const hideFullText = (val :any) => {
|
|
|
+// // eslint-disable-next-line no-console
|
|
|
+// console.log(val)
|
|
|
+// }
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ // Number($route.params) |
|
|
|
+ init()
|
|
|
+})
|
|
|
+
|
|
|
+</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>
|
52hz