admin-sjzx/src/views/pqs/business/log/TerminalLog/pushDisplay.vue

<!--生产线的新增编辑弹出框-->
<template>
    <el-dialog draggable v-model="productLineVisible" :title="title" style="width: 600px">
        <div v-for="(item, index) in List" :key="index">
            <div style="display: flex">
                <span class="span">{{ item.command }}</span>

                <span
                    v-if="item.result == 2"
                    v-loading="true"
                    :element-loading-svg="svg"
                    class="custom-loading-svg"
                    element-loading-svg-view-box="-10, -10, 50, 50"
                ></span>
                <CircleCheckFilled class="ml5" v-if="item.result == 1" style="width: 16px; color: #0e8780" />
                <CircleCloseFilled class="ml5" v-if="item.result == 0" style="width: 16px; color: #ff0000" />
            </div>
            <div v-if="item.result != 2" class="text mt5">
                <span class="span">推送结果：</span>
                <span :style="item.result == 1 ? 'color: #0e8780' : 'color: #ff0000'">
                    {{ item.text }}
                </span>
            </div>
            <el-divider />
        </div>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, inject } from 'vue'
import { ElMessage } from 'element-plus'
import { CircleCheckFilled, CircleCloseFilled } from '@element-plus/icons-vue'
import { getPushResult } from '@/api/device-boot/terminalTree'
const productLineVisible = ref(false)
const title = ref('台账变更推送')
const List: any = ref([])
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
const time: any = ref(null)
const val = ref(0)
const open = async (data: any) => {
    List.value = []
    val.value = 0
    List.value = data
    productLineVisible.value = true
    query()
    time.value = setInterval(() => {
        query()
    }, 1000 * 5)
}
const query = () => {
    val.value += 1
    if (val.value == 7) {
        clearInterval(time.value)
        time.value = null
        val.value = 0
        List.value.forEach((item: any) => {
            if (item.result == 2) {
                item.result = 0
                item.text = '推送超时!'
            }
        })
    } else {
        List.value.forEach(async (item: any) => {
            getPushResult({
                guid: item.guid
            }).then((res: any) => {
                item.result = res.data.code
                item.text = res.data.result
            })
        })
    }
}

defineExpose({ open })
</script>

<style scoped>
.el-upload-list__item {
    transition: none !important;
}

.el-select {
    min-width: 180px;
}
:deep(.el-divider--horizontal) {
    margin: 10px 0;
}
:deep(.circular) {
    height: 30px;
    width: 30px;
    margin-top: 5px;
}
.text {
    text-indent: 1em;
}
.span {
    font-weight: 600;
    font-size: 14px;
}
</style>