From 9b1292d7adf9650484ae90414100e832adac35c6 Mon Sep 17 00:00:00 2001
From: wxc <191104855@qq.com>
Date: Thu, 28 Mar 2024 18:04:06 +0800
Subject: [PATCH] =?UTF-8?q?BUG=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FlowLimited.vue            | 66 +++++++++++++++++++++++
 src/components/FlowLimitedExplanation.vue | 14 +++++
 2 files changed, 80 insertions(+)
 create mode 100644 src/components/FlowLimited.vue
 create mode 100644 src/components/FlowLimitedExplanation.vue

diff --git a/src/components/FlowLimited.vue b/src/components/FlowLimited.vue
new file mode 100644
index 0000000..23134e5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/FlowLimitedExplanation.vue b/src/components/FlowLimitedExplanation.vue
new file mode 100644
index 0000000..7d74355
--- /dev/null
+++ b/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>
\ No newline at end of file