From 0721f5cb410d9badbbfdf0595b31200e63dc7939 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期五, 03 十一月 2023 15:14:22 +0800
Subject: [PATCH] 工艺详情，更新设置，更新操作的动画 开发
---
src/views/dashboard/components/CraftDetailModal.vue | 277 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 273 insertions(+), 4 deletions(-)
diff --git a/src/views/dashboard/components/CraftDetailModal.vue b/src/views/dashboard/components/CraftDetailModal.vue
index e116a60..22c3030 100644
--- a/src/views/dashboard/components/CraftDetailModal.vue
+++ b/src/views/dashboard/components/CraftDetailModal.vue
@@ -4,21 +4,75 @@
<template #title>宸ヨ壓璇︽儏 </template>
<div class="modal-content">
<el-scrollbar always class="scroller">
- <div class="trouble"></div>
+ <div :class="processObj.isUpdate ? 'modal-t margin_bottom_20' : 'modal-t modal-t-two'">
+ <div class="modal-t-l">
+ <div class="modal-t-l-t">{{ processObj.procedure }}</div>
+ <div class="modal-t-l-b">
+ <span v-for="(item, index) in processObj.paramsMap" :key="index"> {{ index }} : {{ item }}锛� </span>
+ </div>
+ </div>
+ <div class="modal-t-r">宸ヨ壓缂栧彿锛歿{ processObj.number }}</div>
+ </div>
+ <div v-if="processObj.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>宸叉鏌ュ埌鏂扮増鏈細{{ processObj.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">{{ processObj.procedure }}</div>
+ <div class="modal-b-b-l-b">
+ <span v-for="(item, index) in processObj.newParamsMap" :key="index">
+ {{ index }} : {{ item }}锛�
+ </span>
+ </div>
+ </div>
+ <div class="modal-b-b-r">鏂扮増鏈細{{ processObj.newNumber }}</div>
+ </div>
+ </template>
+ <template v-else-if="isUpdate == 2">
+ <div class="refresh-box">
+ <template v-if="isLoading">
+ <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 } from 'vue'
export interface CraftDetailModalProps {
modelValue: boolean
}
const props = withDefaults(defineProps<CraftDetailModalProps>(), {
modelValue: false
})
+
const emit = defineEmits<{
'update:modelValue': [show: boolean]
close: []
@@ -28,8 +82,223 @@
function closeModal() {
emit('close')
}
-
+const processObj = {
+ isUpdate: 1, //1==鏃犱笅闈㈢殑鏇存柊璁剧疆 2==鏈夋洿鏂拌缃�
+ procedure: '111',
+ number: 111,
+ paramsMap: {
+ 鍘嬪己: 111
+ },
+ newNumber: '鏂�222',
+ newParamsMap: {
+ 鍘嬪己: 222
+ }
+}
+// 鏈夋洿鏂拌缃殑鍒濆鍊�
+const isUpdate = ref(1)
+const isLoading = ref(false)
+function updateProcess() {
+ isUpdate.value = 2
+ isLoading.value = true
+ // 璇锋眰鏇存柊鎺ュ彛 鑾峰緱鏁版嵁涔嬪悗isLoading.value=false;
+}
//TODO: 宸ヨ壓璇︽儏寮圭獥
</script>
-<style scoped lang="scss"></style>
+<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;
+ .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>
--
Gitblit v1.8.0