BUG修复

src/components/FlowLimited.vue

@@ -0,0 +1,66 @@
+<template>
+    <div v-if="timeVal > 0" class="success">
+        <span class="mr-4">剩余</span>
+        <span class="text">{{
+            formatTimeText(timeVal)
+        }}</span>
+    </div>
+    <div v-if="timeVal < 0" class="error">
+        <span class="mr-4">超时</span>
+        <span class="text">{{
+            formatTimeText(-timeVal)
+        }}</span>
+    </div>
+</template>
+<script setup>
+import { formatTimeText } from "@/utils/util";
+
+const props = defineProps({
+    time: {
+        type: Number,
+        default: 0
+    }
+})
+
+const timeVal = ref(props.time)
+
+watch(() => props.time, (val) => {
+    timeVal.value = val;
+    startTimeInterval()
+})
+
+let timer = 0;
+startTimeInterval()
+function startTimeInterval() {
+    if (timeVal.value < 3600 && timeVal.value > -3600) {
+        clearInterval(timer)
+        timer = setInterval(() => {
+            timeVal.value -= 1;
+        }, 1000);
+    } else {
+        clearInterval(timer)
+    }
+}
+</script>
+<style lang="scss" scoped>
+.success {
+    padding: 0 8px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+
+    .text {
+        color: #128009;
+    }
+}
+
+.error {
+    background-color: #ff0000;
+    color: #fff;
+    padding: 0 8px;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 20px;
+    text-align: center;
+}
+</style>

src/components/FlowLimitedExplanation.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="flex v-center">
+        <span class="mr-4">流程限时</span>
+        <el-tooltip effect="dark" :content="'根据流程环节的限时配置<br/>市局签收/下发：10分钟<br/>二级机构签收/下发：5分钟<br/>三级机构签收：5分钟<br/>联系群众：30分钟<br/>信件办理全流程：4天<br/>信件办理中遇到非工作日不计算在内，从工作日的 00:00 开始计时'" raw-content placement="top">
+            <icon name="el-icon-QuestionFilled" :size="18" class="pointer" />
+        </el-tooltip>
+    </div>
+</template>
+<script setup>
+
+</script>
+<style lang="scss" scoped>
+
+</style>