工艺详情，更新设置，更新操作的动画 开发

haoxuan

2023-11-03 0721f5cb410d9badbbfdf0595b31200e63dc7939

工艺详情，更新设置，更新操作的动画 开发

 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>