<template>
|
<div class="craft-detail-modal">
|
<BaseModal v-model="modelData" :wider="true" @close="closeModal">
|
<template #title>工艺详情 </template>
|
<div v-if="craftModel" class="modal-content">
|
<el-scrollbar always class="scroller">
|
<div :class="!craftModel?.isUpdate ? 'modal-t margin_bottom_20' : 'modal-t modal-t-two'">
|
<div class="modal-t-l">
|
<div class="modal-t-l-t">{{ craftModel?.procedure }}</div>
|
<div class="modal-t-l-b">
|
<span v-for="(item, index) in craftModel?.paramsMap" :key="index"> {{ index }} : {{ item }}； </span>
|
</div>
|
</div>
|
<div class="modal-t-r">工艺编号：{{ craftModel?.number }}</div>
|
</div>
|
<div v-if="!craftModel?.isUpdate" class="modal-b">
|
<div class="modal-b-t">更新设置</div>
|
<template v-if="isUpdate == 1">
|
<div class="modal-b-m">
|
<div class="modal-b-m-l">
|
<el-icon class="refresh-icon">
|
<Refresh />
|
</el-icon>
|
</div>
|
<div class="modal-b-m-r">
|
<span>已检查到新版本：{{ craftModel?.newNumber }}</span>
|
<BigButton class="btn" bg-color="#4343f5" @click="updateProcess">更新工艺</BigButton>
|
</div>
|
</div>
|
<div class="modal-b-b">
|
<div class="modal-b-b-l">
|
<div class="modal-b-b-l-t">{{ craftModel?.procedure }}</div>
|
<div class="modal-b-b-l-b">
|
<span v-for="(item, index) in craftModel?.newParamsMap" :key="index">
|
{{ index }} : {{ item }}；
|
</span>
|
</div>
|
</div>
|
<div class="modal-b-b-r">新版本：{{ craftModel?.newNumber }}</div>
|
</div>
|
</template>
|
<template v-else-if="isUpdate == 2">
|
<div class="refresh-box">
|
<template v-if="loading">
|
<el-icon class="refresh-icon transform">
|
<Refresh />
|
</el-icon>
|
<div class="refresh-line">更新中，请稍后...</div>
|
</template>
|
<template v-else>
|
<el-icon class="refresh-top-icon">
|
<Top />
|
</el-icon>
|
<div class="refresh-line">已是最新版本</div>
|
</template>
|
</div>
|
</template>
|
</div>
|
</el-scrollbar>
|
</div>
|
</BaseModal>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { Refresh, Top } from '@element-plus/icons-vue'
|
import { useVModel } from '@vueuse/core'
|
import BigButton from '@/views/dashboard/components/BigButton.vue'
|
import { ref, toRefs, watch } from 'vue'
|
import type { CraftModel } from '@/api/craftModel'
|
export interface CraftDetailModalProps {
|
craftModel: CraftModel
|
activeArr: string[]
|
modelValue: boolean
|
}
|
const props = withDefaults(defineProps<CraftDetailModalProps>(), {
|
modelValue: false
|
})
|
const { craftModel, activeArr, modelValue } = toRefs(props)
|
const emit = defineEmits<{
|
'update:modelValue': [show: boolean]
|
close: []
|
renew: [craftModel: CraftModel, true]
|
}>()
|
const modelData = useVModel(props, 'modelValue', emit)
|
function closeModal() {
|
emit('close')
|
}
|
// 有更新设置的初始值
|
const isUpdate = ref(1)
|
const loading = ref(false)
|
watch(modelData, () => {
|
// 弹窗显示时获取工艺参数
|
if (modelData.value) {
|
getLoading()
|
}
|
})
|
function getLoading() {
|
for (let i in activeArr.value) {
|
if (activeArr.value[i] == craftModel?.value?.number) {
|
isUpdate.value = 2
|
loading.value = true
|
return true
|
}
|
}
|
isUpdate.value = 1
|
}
|
|
function updateProcess() {
|
isUpdate.value = 2
|
if (loading.value) {
|
return true
|
}
|
// 请求更新接口 获得数据之后isLoading.value=false;
|
emit('renew', craftModel?.value, true)
|
}
|
//TODO: 工艺详情弹窗
|
</script>
|
|
<style scoped lang="scss">
|
$status-default: #b0b0b0;
|
$status-running: #33ccff;
|
$status-ready: blue;
|
$status-done: #0dfde6;
|
.refresh-icon {
|
width: 60px;
|
height: 60px;
|
background: #fff;
|
border-radius: 50%;
|
color: $status-ready;
|
font-size: 31px;
|
text-align: center;
|
margin-right: 30px;
|
font-weight: bold;
|
display: flex;
|
align-items: center;
|
}
|
.refresh-top-icon {
|
width: 60px;
|
height: 60px;
|
border: 4px solid $status-default;
|
border-radius: 50%;
|
color: $status-default;
|
font-size: 31px;
|
text-align: center;
|
display: flex;
|
align-items: center;
|
font-weight: 700;
|
margin-right: 30px;
|
}
|
.transform {
|
-webkit-animation: spin 1s linear infinite;
|
-ms-amimation: spin 1s linear infinite;
|
-moz-amimation: spin 1s linear infinite;
|
-o-amimation: spin 1s linear infinite;
|
}
|
@keyframes spin {
|
0%,
|
15% {
|
transform: rotate(0);
|
}
|
100% {
|
transform: rotate(360deg);
|
}
|
}
|
.modal-content {
|
height: 600px;
|
overflow: auto;
|
width: calc(100% - 60px);
|
margin: 0 auto;
|
:deep(.el-scrollbar__view) {
|
height: 100%;
|
}
|
.modal-t-two {
|
height: calc(100% - 55px) !important;
|
}
|
.margin_bottom_20 {
|
margin-bottom: 200px;
|
}
|
.modal-t {
|
overflow: hidden;
|
width: 100%;
|
min-height: 150px;
|
height: auto;
|
color: #fff;
|
padding: 15px 20px 30px;
|
border-radius: 6px;
|
margin-bottom: 20px;
|
position: relative;
|
border: 1px dotted $status-running;
|
.modal-t-l {
|
width: 100%;
|
height: 100%;
|
float: left;
|
font-size: 17px;
|
.modal-t-l-t {
|
width: calc(100% - 180px);
|
color: $status-running;
|
margin-bottom: 10px;
|
}
|
.modal-t-l-b {
|
width: 100%;
|
height: calc(100% - 40px);
|
font-size: 16px;
|
}
|
}
|
.modal-t-r {
|
width: 180px;
|
padding: 8px 5px;
|
border-radius: 10px;
|
position: absolute;
|
right: 10px;
|
top: 10px;
|
text-align: center;
|
}
|
}
|
.modal-b {
|
overflow: hidden;
|
width: 100%;
|
min-height: 350px;
|
height: auto;
|
color: #fff;
|
padding: 5px 0px 0 0px;
|
border-radius: 6px;
|
.modal-b-t {
|
font-size: 18px;
|
color: #eee;
|
height: 40px;
|
line-height: 40px;
|
}
|
.refresh-box {
|
width: 240px;
|
margin: 0 auto;
|
.refresh-icon,
|
.refresh-top-icon {
|
margin: 0 auto;
|
margin-left: 95px;
|
}
|
.refresh-line {
|
width: 100%;
|
height: 40px;
|
border-top: 5px solid #fff;
|
line-height: 40px;
|
text-align: center;
|
font-size: 18px;
|
color: #999;
|
margin-top: 15px;
|
}
|
}
|
.modal-b-m {
|
width: 100%;
|
margin: 0 auto;
|
overflow: hidden;
|
.modal-b-m-l {
|
float: left;
|
width: calc(40% - 5px);
|
border-right: 3px solid #fff;
|
.refresh-icon {
|
float: right;
|
}
|
}
|
.modal-b-m-r {
|
width: calc(60% - 30px);
|
margin-left: 30px;
|
float: left;
|
span {
|
display: inline-block;
|
width: 100%;
|
}
|
.btn {
|
width: 100px;
|
height: 35px;
|
line-height: 35px;
|
border-radius: 10px;
|
float: left;
|
font-size: 14px;
|
cursor: pointer;
|
text-align: center;
|
margin-top: 10px;
|
}
|
}
|
}
|
.modal-b-b {
|
width: 75%;
|
margin: 40px auto 0;
|
border: 1px dotted $status-running;
|
height: calc(100% - 40px - 110px);
|
min-height: 180px;
|
overflow: hidden;
|
color: #fff;
|
padding: 10px 10px 10px 30px;
|
position: relative;
|
.modal-b-b-l {
|
width: 100%;
|
height: 100%;
|
font-size: 14px;
|
.modal-b-b-l-t {
|
width: calc(100% - 180px);
|
margin-bottom: 10px;
|
}
|
.modal-b-b-l-b {
|
width: 100%;
|
height: calc(100% - 40px);
|
font-size: 14px;
|
}
|
}
|
.modal-b-b-r {
|
width: 180px;
|
padding: 10px 10px;
|
border-radius: 10px;
|
position: absolute;
|
right: 5px;
|
top: 0px;
|
text-align: right;
|
}
|
}
|
}
|
}
|
</style>
|
