修改全局报表功能

src/views/govern/device/control/supplementaryRecruitment/currentDevice.vue

@@ -16,14 +16,19 @@
             <el-button type="primary" :icon="Setting" @click="handleUpDevice">补召</el-button>
             <el-button :icon="Back" @click="go(-1)">返回</el-button>
         </template>
-
     </TableHeader>
     <!-- 设备补召 -->
-    <div class=" current_device" v-loading="loading">
-
+    <div class="current_device" v-loading="loading">
         <div class="current_body" ref="tbodyRef">
-            <vxe-table border ref="tableRef" :data="dirList" align="center" height="auto"
-                :style="{ height: tableHeight }" @radio-change="radioChangeEvent">
+            <vxe-table
+                border
+                ref="tableRef"
+                :data="dirList"
+                align="center"
+                height="auto"
+                :style="{ height: tableHeight }"
+                @radio-change="radioChangeEvent"
+            >
                 <vxe-column type="radio" width="60">
                     <template #header>
                         <vxe-button mode="text" @click="clearRadioRowEvent" :disabled="!selectRow">取消</vxe-button>
@@ -34,13 +39,20 @@
                 <vxe-column field="status" title="补召进度">
                     <template #default="{ row }">
                         <div class="finish" v-if="row.status == 100">
-                            <SuccessFilled style="width: 16px;" /><span class="ml5">补召完成</span>
+                            <SuccessFilled style="width: 16px" />
+                            <span class="ml5">补召完成</span>
                         </div>
-                        <el-progress v-model.trim="row.status" v-else :class="row.status == 100 ? 'progress' : ''"
-                            :format="format" :stroke-width="10" striped :percentage="row.status" :duration="30"
-                            striped-flow />
-
-
+                        <el-progress
+                            v-model.trim="row.status"
+                            v-else
+                            :class="row.status == 100 ? 'progress' : ''"
+                            :format="format"
+                            :stroke-width="10"
+                            striped
+                            :percentage="row.status"
+                            :duration="30"
+                            striped-flow
+                        />
                     </template>
                 </vxe-column>
                 <vxe-column field="startTime" title="起始时间"></vxe-column>
@@ -58,10 +70,7 @@ import { useRouter, useRoute } from 'vue-router'
 import { mainHeight } from '@/utils/layout'
 import { VxeUI, VxeTableInstance, VxeTableEvents } from 'vxe-table'
 import { SuccessFilled } from '@element-plus/icons-vue'
-import {
-    Back,
-    Setting, Search
-} from '@element-plus/icons-vue'
+import { Back, Setting, Search } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import mqtt from 'mqtt'
 defineOptions({
@@ -75,7 +84,7 @@ const loading = ref(false)
 const dirList = ref([])
 const route: any = ref({})
 const datePickerRef = ref()
-const format = (percentage) => (percentage === 100 ? '完成' : `${percentage}%`)
+const format = percentage => (percentage === 100 ? '完成' : `${percentage}%`)
 const getMakeUpDataList = (row: any) => {
     route.value = row
     loading.value = true
@@ -139,11 +148,11 @@ const handleUpDevice = () => {
 }
 
 const radioChangeEvent: VxeTableEvents.RadioChange = ({ row }) => {
+    datePickerRef.value.timeValue = [row.startTime.split(' ')[0] , row.endTime.split(' ')[0] ]
     selectRow.value = row
     // console.log('单选事件')
 }
 
-
 const clearRadioRowEvent = () => {
     const $table = tableRef.value
     if ($table) {
@@ -152,7 +161,7 @@ const clearRadioRowEvent = () => {
     }
 }
 const mqttRef = ref()
-const url: any =  window.localStorage.getItem('MQTTURL')
+const url: any = window.localStorage.getItem('MQTTURL')
 const connectMqtt = () => {
     if (mqttRef.value) {
         if (mqttRef.value.connected) {
@@ -173,10 +182,10 @@ const connectMqtt = () => {
 const handleSearch = () => {
     getMakeUpDataList(route.value)
 }
-function parseStringToObject(str:string) {
+function parseStringToObject(str: string) {
     const content = str.replace(/^{|}$/g, '')
     const pairs = content.split(',')
-    const result:any = {}
+    const result: any = {}
     pairs.forEach(pair => {
         const [key, value] = pair.split(':')
         // 尝试将数字转换为Number类型
@@ -210,7 +219,6 @@ mqttRef.value.on('message', (topic: any, message: any) => {
             let percentage = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100)) || 0
             if (percentage > 5) {
                 item.status = percentage
-
             }
         }
         // })
@@ -226,6 +234,8 @@ mqttRef.value.on('close', function () {
     console.log('mqtt客户端已断开连接.....')
 })
 onMounted(() => {
+    datePickerRef.value.setInterval(5)
+    datePickerRef.value.setTimeOptions([{ label: '自定义', value: 5 }])
 })
 onBeforeUnmount(() => {
     if (mqttRef.value) {
@@ -261,14 +271,21 @@ defineExpose({ getMakeUpDataList })
 //     }
 // }
 :deep(.el-progress-bar__inner--striped) {
-    background-image: linear-gradient(45deg, rgba(255, 255, 255, .3) 25%, transparent 0, transparent 50%, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .3) 75%, transparent 0, transparent);
-
+    background-image: linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.3) 25%,
+        transparent 0,
+        transparent 50%,
+        rgba(255, 255, 255, 0.3) 0,
+        rgba(255, 255, 255, 0.3) 75%,
+        transparent 0,
+        transparent
+    );
 }
 
 :deep(.progress) {
     .el-progress__text {
         color: green;
-
     }
 }
 
@@ -276,6 +293,6 @@ defineExpose({ getMakeUpDataList })
     display: flex;
     justify-content: center;
     font-weight: 550;
-    color: #009688
+    color: #009688;
 }
 </style>