Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改进度条样式

Browse Source
This commit is contained in:
GGJ
2024-11-06 13:25:42 +08:00
parent 7dab1302b8
commit 058fc4b2bf
7 changed files with 117 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

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

6
src/styles/vxeTable.scss
View File

@@ -54,3 +54,9 @@
.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon { .vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon {
color: var(--el-color-primary-light-8); 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);
}

1
src/views/govern/alarm/Transient.vue
View File

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

3
src/views/govern/device/control/supplementaryRecruitment.vue
View File

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

151
src/views/govern/device/control/supplementaryRecruitment/currentDevice.vue
View File

@@ -1,7 +1,6 @@
<template> <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="日期"> <el-form-item label="日期">
<DatePicker ref="datePickerRef"></DatePicker> <DatePicker ref="datePickerRef"></DatePicker>
</el-form-item> </el-form-item>
@@ -11,30 +10,36 @@
<el-checkbox label="暂态" :value="1" /> <el-checkbox label="暂态" :value="1" />
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item> </template>
<template #operation>
<!-- <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button> --> <!-- <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button> -->
<el-button type="primary" :icon="Setting" @click="handleUpDevice">补召</el-button> <el-button type="primary" :icon="Setting" @click="handleUpDevice">补召</el-button>
<el-button :icon="Back" @click="go(-1)">返回</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"> <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> </template>
</vxe-column> </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> </vxe-table>
</div> </div>
</div> </div>
@@ -43,21 +48,25 @@
import { ref, onMounted, defineExpose, onBeforeUnmount, inject } from 'vue' import { ref, onMounted, defineExpose, onBeforeUnmount, inject } from 'vue'
import { getMakeUpData, getAskDirOrFile, offlineDataUploadMakeUp } from '@/api/cs-harmonic-boot/recruitment.ts' import { getMakeUpData, getAskDirOrFile, offlineDataUploadMakeUp } from '@/api/cs-harmonic-boot/recruitment.ts'
import DatePicker from '@/components/form/datePicker/index.vue' import DatePicker from '@/components/form/datePicker/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import { VxeUI, VxeTableInstance, VxeTableEvents } from 'vxe-table'
import { import {
Back, Back,
Setting} from '@element-plus/icons-vue' Setting
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import mqtt from 'mqtt' import mqtt from 'mqtt'
const checkList: any = ref([]) const checkList: any = ref([])
// const props = defineProps(['lineId']) // const props = defineProps(['lineId'])
const { go } = useRouter() // 路由 const { go } = useRouter() // 路由
const selectRow: any = ref(null)
const loading = ref(false) const loading = ref(false)
const dirList = ref([]) const dirList = ref([])
const route: any = ref({}) const route: any = ref({})
const datePickerRef = ref() const datePickerRef = ref()
const format = (percentage) => (percentage === 100 ? '完成' : `${percentage}%`)
const getMakeUpDataList = (row: any) => { const getMakeUpDataList = (row: any) => {
route.value = row route.value = row
loading.value = true loading.value = true
@@ -77,9 +86,10 @@ const getMakeUpDataList = (row: any) => {
// 进入文件夹 // 进入文件夹
const dirCheckedList: any = ref([]) const dirCheckedList: any = ref([])
const tbodyRef = ref() const tbodyRef = ref()
const tableHeight = mainHeight(90).height const tableHeight = mainHeight(105).height
const routes = useRoute() const routes = useRoute()
const tableRef = ref() const tableRef = ref()
const selectRowCopy: any = ref(null)
const handleUpDevice = () => { const handleUpDevice = () => {
let proList = tableRef.value.getCheckboxRecords().map((item: any) => { let proList = tableRef.value.getCheckboxRecords().map((item: any) => {
return item.prjDataPath return item.prjDataPath
@@ -87,21 +97,30 @@ const handleUpDevice = () => {
if (checkList.value.length == 0) { if (checkList.value.length == 0) {
return ElMessage.warning('请选择暂态稳态') return ElMessage.warning('请选择暂态稳态')
} }
if (proList.length == 0) { if (selectRow.value == null) {
return ElMessage.warning('请选择工程') return ElMessage.warning('请选择工程')
} }
selectRowCopy.value = JSON.parse(JSON.stringify(selectRow.value))
let form = { let form = {
dataTypeList: checkList.value, dataTypeList: checkList.value,
startTime: datePickerRef.value && datePickerRef.value.timeValue[0], startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
endTime: datePickerRef.value && datePickerRef.value.timeValue[1], endTime: datePickerRef.value && datePickerRef.value.timeValue[1],
lineId: routes.query.id, lineId: routes.query.id,
ndid: routes.query.ndid, ndid: routes.query.ndid,
proList: proList proList: [selectRow.value?.prjDataPath]
} }
ElMessage.warning('补召中, 请稍等...')
offlineDataUploadMakeUp(form) offlineDataUploadMakeUp(form)
.then((res: any) => { .then((res: any) => {
if (res.code == 'A0000') { 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 // 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 mqttRef = ref()
const url: any = inject('MQTTURL') const url: any = inject('MQTTURL')
const connectMqtt = () => { const connectMqtt = () => {
@@ -153,11 +185,15 @@ mqttRef.value.on('message', (topic: any, message: any) => {
return item.name return item.name
}) })
dirList.value.map((item: any) => { 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 }) defineExpose({ getMakeUpDataList })
</script> </script>
<style lang="scss" scoped> <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 {
// 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);
} }
}
.current_body { :deep(.progress) {
margin-top: 10px; .el-progress__text {
flex: 1; color: green;
} }
} }
</style> </style>

4
src/views/govern/device/control/tabs/trend.vue
View File

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

4
src/views/govern/device/planData/index.vue
View File

@@ -120,8 +120,8 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item for="-" v-for="(item, index) in countData" :key="index" <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 --> <!-- multiple -->
<el-select v-model="item.count" collapse-tags collapse-tags-tooltip <el-select v-model="item.count" collapse-tags collapse-tags-tooltip
placeholder="请选择谐波次数" style="width: 120px"> placeholder="请选择谐波次数" style="width: 120px">