修改进度条样式

src/App.vue

@@ -15,7 +15,7 @@ import { provide, getCurrentInstance } from 'vue'
 let buildUrl = 'ws://pqmcn.com:8073/mqtt'//27
 //本地mqtt
 let devUrl = 'ws://192.168.1.24:8085/mqtt'
-provide('MQTTURL', devUrl)
+provide('MQTTURL', buildUrl)
 useSetTheme()
 </script>
 

src/styles/vxeTable.scss

@@ -54,3 +54,9 @@
 .vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon {
     color: var(--el-color-primary-light-8);
 }
+.vxe-table--render-default .vxe-cell--radio.is--checked,
+.vxe-table--render-default .vxe-cell--radio.is--checked .vxe-radio--icon,
+.vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon,
+.vxe-button.type--text:not(.is--disabled):hover {
+    color: var(--el-color-primary);
+}

src/views/govern/alarm/Transient.vue

@@ -136,6 +136,7 @@ const tableStore = new TableStore({
         { title: '设备名称', field: 'equipmentName', align: 'center' },
         { title: '工程名称', field: 'engineeringName', align: 'center' },
         { title: '项目名称', field: 'projectName', align: 'center' },
+        { title: '监测点名称', field: 'lineName', align: 'center' },
         { title: '事件描述', field: 'showName', align: 'center' },
         { title: '事件发生位置', field: 'evtParamPosition', align: 'center' },
         { title: '相别', field: 'evtParamPhase', align: 'center' },

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

@@ -31,7 +31,6 @@ onMounted(() => {
 </script>
 <style lang="scss" scoped>
 .device {
-    width: 100%;
+    height: calc(100vh - 130px);
-    height: 100%;
 }
 </style>

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

@@ -1,7 +1,6 @@
 <template>
-    <!-- 设备补召 -->
+    <TableHeader ref="refheader" :showSearch="false">
-    <div class="default-main current_device" v-loading="loading">
+        <template #select>
-        <div class="current_header">
             <el-form-item label="日期">
                 <DatePicker ref="datePickerRef"></DatePicker>
             </el-form-item>
@@ -11,30 +10,36 @@
                     <el-checkbox label="暂态" :value="1" />
                 </el-checkbox-group>
             </el-form-item>
-            <el-form-item>
+        </template>
+        <template #operation>
             <!-- <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button> -->
             <el-button type="primary" :icon="Setting" @click="handleUpDevice">补召</el-button>
             <el-button :icon="Back" @click="go(-1)">返回</el-button>
-            </el-form-item>
+        </template>
-        </div>
+
+    </TableHeader>
+    <!-- 设备补召 -->
+    <div class="default-main current_device" v-loading="loading">
+
         <div class="current_body" ref="tbodyRef">
-            <vxe-table
+            <vxe-table border ref="tableRef" :data="dirList" align="center" height="auto"
-                border
+                :style="{ height: tableHeight }" @radio-change="radioChangeEvent">
-                ref="tableRef"
+                <vxe-column type="radio" width="60">
-                :data="dirList"
+                    <template #header>
-                height="auto"
+                        <vxe-button mode="text" @click="clearRadioRowEvent" :disabled="!selectRow">取消</vxe-button>
-                style="margin-right: 30px; overflow-y: auto"
-                :style="{ height: tableHeight }"
-            >
-                <vxe-column align="center" type="checkbox" width="60"></vxe-column>
-                <vxe-column align="center" field="name" title="名称"></vxe-column>
-                <vxe-column align="center" field="status" title="补召进度">
-                    <template #default="{ row }">
-                        <el-progress v-model="row.status" :percentage="row.status" />
                     </template>
                 </vxe-column>
-                <vxe-column align="center" field="startTime" title="起始时间"></vxe-column>
+                <!-- <vxe-column  type="checkbox" width="60"></vxe-column> -->
-                <vxe-column align="center" field="endTime" title="结束时间"></vxe-column>
+                <vxe-column field="name" title="名称"></vxe-column>
+                <vxe-column field="status" title="补召进度">
+                    <template #default="{ row }">
+                        <el-progress v-model="row.status" :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>
+                <vxe-column field="endTime" title="结束时间"></vxe-column>
             </vxe-table>
         </div>
     </div>
@@ -43,21 +48,25 @@
 import { ref, onMounted, defineExpose, onBeforeUnmount, inject } from 'vue'
 import { getMakeUpData, getAskDirOrFile, offlineDataUploadMakeUp } from '@/api/cs-harmonic-boot/recruitment.ts'
 import DatePicker from '@/components/form/datePicker/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
 import { useRouter, useRoute } from 'vue-router'
 import { mainHeight } from '@/utils/layout'
+import { VxeUI, VxeTableInstance, VxeTableEvents } from 'vxe-table'
 import {
     Back,
-    Setting} from '@element-plus/icons-vue'
+    Setting
+} from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import mqtt from 'mqtt'
 const checkList: any = ref([])
 // const props = defineProps(['lineId'])
 const { go } = useRouter() // 路由
-
+const selectRow: any = ref(null)
 const loading = ref(false)
 const dirList = ref([])
 const route: any = ref({})
 const datePickerRef = ref()
+const format = (percentage) => (percentage === 100 ? '完成' : `${percentage}%`)
 const getMakeUpDataList = (row: any) => {
     route.value = row
     loading.value = true
@@ -77,9 +86,10 @@ const getMakeUpDataList = (row: any) => {
 // 进入文件夹
 const dirCheckedList: any = ref([])
 const tbodyRef = ref()
-const tableHeight = mainHeight(90).height
+const tableHeight = mainHeight(105).height
 const routes = useRoute()
 const tableRef = ref()
+const selectRowCopy: any = ref(null)
 const handleUpDevice = () => {
     let proList = tableRef.value.getCheckboxRecords().map((item: any) => {
         return item.prjDataPath
@@ -87,21 +97,30 @@ const handleUpDevice = () => {
     if (checkList.value.length == 0) {
         return ElMessage.warning('请选择暂态稳态')
     }
-    if (proList.length == 0) {
+    if (selectRow.value == null) {
         return ElMessage.warning('请选择工程')
     }
+    selectRowCopy.value = JSON.parse(JSON.stringify(selectRow.value))
     let form = {
         dataTypeList: checkList.value,
         startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
         endTime: datePickerRef.value && datePickerRef.value.timeValue[1],
         lineId: routes.query.id,
         ndid: routes.query.ndid,
-        proList: proList
+        proList: [selectRow.value?.prjDataPath]
     }
+    ElMessage.warning('补召中, 请稍等...')
     offlineDataUploadMakeUp(form)
         .then((res: any) => {
             if (res.code == 'A0000') {
-                ElMessage.success(res.message)
+                ElMessage.success(res.data)
+                dirList.value.map((item: any) => {
+                    // checkedList.map((vv: any) => {
+                    if (item.name == selectRowCopy.value?.name) {
+                        item.status = 5
+                    }
+                    // })
+                })
                 // loading.value = false
             }
         })
@@ -110,6 +129,19 @@ const handleUpDevice = () => {
         })
 }
 
+const radioChangeEvent: VxeTableEvents.RadioChange = ({ row }) => {
+    selectRow.value = row
+    console.log('单选事件')
+}
+
+
+const clearRadioRowEvent = () => {
+    const $table = tableRef.value
+    if ($table) {
+        selectRow.value = null
+        $table.clearRadioRow()
+    }
+}
 const mqttRef = ref()
 const url: any = inject('MQTTURL')
 const connectMqtt = () => {
@@ -153,11 +185,15 @@ mqttRef.value.on('message', (topic: any, message: any) => {
         return item.name
     })
     dirList.value.map((item: any) => {
-        checkedList.map((vv: any) => {
+        // checkedList.map((vv: any) => {
-            if (item.name == vv) {
+        if (item.name == selectRowCopy.value?.name) {
-                item.status = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100)) || 0
+            let percentage = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100)) || 0
+            if (percentage > 5) {
+                item.status = percentage
+
             }
-        })
+        }
+        // })
     })
 })
 
@@ -179,27 +215,40 @@ onBeforeUnmount(() => {
 defineExpose({ getMakeUpDataList })
 </script>
 <style lang="scss" scoped>
-.current_device {
+// .current_device {
-    width: 100%;
+//     width: 100%;
-    height: calc(100vh - 200px);
+
-    display: flex;
+//     display: flex;
-    flex-direction: column;
+//     flex-direction: column;
-    .current_header {
+
-        width: 100%;
+//     .current_header {
-        height: 60px;
+//         width: 100%;
-        padding: 15px;
+//         height: 60px;
-        display: flex;
+//         padding: 15px;
-        align-items: center;
+//         display: flex;
-        box-sizing: border-box;
+//         align-items: center;
-        .el-form-item {
+//         box-sizing: border-box;
-            display: flex;
+
-            align-items: center;
+//         .el-form-item {
-            margin-bottom: 0;
+//             display: flex;
-        }
+//             align-items: center;
-    }
+//             margin-bottom: 0;
-    .current_body {
+//         }
-        margin-top: 10px;
+//     }
-        flex: 1;
+
+//     .current_body {
+//         flex: 1;
+//     }
+// }
+: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);
+
+}
+
+:deep(.progress) {
+    .el-progress__text {
+        color: green;
+
     }
 }
 </style>

src/views/govern/device/control/tabs/trend.vue

@@ -325,7 +325,7 @@ const init = async () => {
                                     position: 'right',
                                     offset: (index - 1) * 80
                                 }
-                                console.log("🚀 ~ unitList.forEach ~ right.index:", index)
+                                // console.log("🚀 ~ unitList.forEach ~ right.index:", index)
                                 echartsData.value.yAxis.push({
                                     name: item,
                                     yAxisIndex: index,
@@ -388,7 +388,7 @@ const init = async () => {
                                 echartsData.value.yAxis[index].min = min
                                 echartsData.value.yAxis[index].max = max
                             })
-                            console.log("🚀 ~ result.forEach ~ echartsData.value:", echartsData.value)
+                            // console.log("🚀 ~ result.forEach ~ echartsData.value:", echartsData.value)
                         }
                         loading.value = false
                     }

src/views/govern/device/planData/index.vue

@@ -120,8 +120,8 @@
                                     </el-select>
                                 </el-form-item>
                                 <el-form-item for="-" v-for="(item, index) in countData" :key="index"
-                                    :label="item.name.includes('次数') ? item.name : item.name + '谐波次数'"
+                                    :label="item.name.includes('次数') ? item.name : item.name.includes('幅值') ? item.name.slice(0, -2) + '次数' : item.name + '谐波次数'"
-                                    label-width="180px" v-show="item.countOptions.length != 0">
+                                    v-show="item.countOptions.length != 0">
                                     <!-- multiple -->
                                     <el-select v-model="item.count" collapse-tags collapse-tags-tooltip
                                         placeholder="请选择谐波次数" style="width: 120px">