故障录波:图表显示时间添加毫秒

单风机:添加风机切换按钮,添加风机名称型号,子系统分类显示调整
风机矩阵:跳转单风机,添加风机名称型号
This commit is contained in:
高云鹏 2024-12-03 13:52:11 +08:00
parent 6af3c059c0
commit 77e7e0f050
7 changed files with 138 additions and 12 deletions

View File

@ -8,6 +8,7 @@ export const getAirBlowerListReq = () => {
belongLine: string belongLine: string
irn: string irn: string
madeinfactory: string madeinfactory: string
deviceCode: string
model: string model: string
modelId: string modelId: string
name: string name: string

View File

@ -35,7 +35,9 @@
<div class="cardContentLeft"> <div class="cardContentLeft">
<!--实时预览--> <!--实时预览-->
<div class="overview"> <div class="overview">
<div class="cardLabel">实时预览</div> <div class="cardLabel">
{{ '名称:' + route.query.name + '&nbsp;&nbsp;&nbsp;&nbsp;' + '型号:' + route.query.model }}
</div>
<div class="overviewDataSection" ref="listContainer"> <div class="overviewDataSection" ref="listContainer">
<div class="overviewDataSectionItem"> <div class="overviewDataSectionItem">
<span class="realLeft">机组运行状态</span> <span class="realLeft">机组运行状态</span>
@ -101,6 +103,14 @@
<div class="cardContentCenter"> <div class="cardContentCenter">
<!--风机控制--> <!--风机控制-->
<div class="controlBackgroundImg"> <div class="controlBackgroundImg">
<div class="switchWindBlower">
<el-tooltip :content="beforeAirBlower.name">
<el-icon color="#fff" size="30" @click="switchAirblower(0)"><ArrowLeftBold /></el-icon>
</el-tooltip>
<el-tooltip :content="afterAirBlower.name">
<el-icon color="#fff" size="30" @click="switchAirblower(1)"><ArrowRightBold /></el-icon>
</el-tooltip>
</div>
<div class="control-type"> <div class="control-type">
<el-tag v-if="realTimeData.locked === 1" class="control-tag control-tag-left" type="primary">已锁定</el-tag> <el-tag v-if="realTimeData.locked === 1" class="control-tag control-tag-left" type="primary">已锁定</el-tag>
<el-tag class="control-tag" type="primary">{{ realTimeDataState }}</el-tag> <el-tag class="control-tag" type="primary">{{ realTimeDataState }}</el-tag>
@ -305,14 +315,15 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { nextTick, onActivated, onMounted, reactive, ref, computed, onBeforeMount, onUnmounted, VNode, VNodeRef } from 'vue' import { nextTick, onActivated, onMounted, reactive, ref, computed, watch, onBeforeMount, onUnmounted, VNode, VNodeRef } from 'vue'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { useEventListener } from '@vueuse/core' import { useEventListener } from '@vueuse/core'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { DArrowRight } from '@element-plus/icons-vue' import { DArrowRight, ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import { getRealValueListReq, getRealValueRangeReq } from '/@/api/backend/deviceModel/request' import { getRealValueListReq, getRealValueRangeReq } from '/@/api/backend/deviceModel/request'
import { getModelAttributeListReq } from '/@/api/backend/deviceModel/request' import { getModelAttributeListReq } from '/@/api/backend/deviceModel/request'
import { useRoute } from 'vue-router' import { getAirBlowerListReq } from '/@/api/backend/airBlower/request'
import { useRoute, useRouter } from 'vue-router'
import Overview from './overview.vue' import Overview from './overview.vue'
import { TableInstance } from 'element-plus' import { TableInstance } from 'element-plus'
import { dayjs, ElMessage, ElMessageBox } from 'element-plus' import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
@ -323,7 +334,7 @@ import { useEnumStore } from '/@/stores/enums'
const enumStore = useEnumStore() const enumStore = useEnumStore()
const route = useRoute() const route = useRoute()
const router = useRouter()
const { t } = useI18n() const { t } = useI18n()
const windBlower = ref() const windBlower = ref()
@ -400,8 +411,9 @@ const initpowerChart = () => {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow', type: 'line',
}, },
show: true,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@ -602,7 +614,7 @@ const initTrendChart = (type: 'day' | 'month') => {
top: 30, top: 30,
right: 10, right: 10,
bottom: 20, bottom: 20,
left: 45, left: 100,
borderColor: '#dadada', borderColor: '#dadada',
}, },
tooltip: { tooltip: {
@ -1054,7 +1066,7 @@ const createRealTimeData = async () => {
realDataForSub[index].type138.push(showData) realDataForSub[index].type138.push(showData)
} else if (item.attributeType === 140) { } else if (item.attributeType === 140) {
const copyData = { const copyData = {
name: item.attributeName +' '+ item.attributeCode, name: item.attributeCode + ' ' + item.attributeName,
value: showData.value, value: showData.value,
} }
realDataForSub[index].type140.push(copyData) realDataForSub[index].type140.push(copyData)
@ -1150,6 +1162,7 @@ const getChartData = <T extends string = any>(params: {
getRealValueRangeReq(data).then((res) => { getRealValueRangeReq(data).then((res) => {
if (res.success) { if (res.success) {
const data = res.data[route.query.irn as string] const data = res.data[route.query.irn as string]
if (!data) return
const rangeKeys = Object.keys(data) const rangeKeys = Object.keys(data)
const times: any = {} const times: any = {}
const val: any = {} const val: any = {}
@ -1248,6 +1261,8 @@ const getThisDayChartDataForMinute = () => {
} }
const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', 'trend', 'frequency']) => { const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', 'trend', 'frequency']) => {
console.log(type, '-_-----')
if (type.includes('power')) { if (type.includes('power')) {
getThisDayChartData().then(() => { getThisDayChartData().then(() => {
initpowerChart() initpowerChart()
@ -1338,7 +1353,60 @@ const getAlarmList = () => {
} }
}) })
} }
getAlarmList() const airBlowerList = ref<
{
irn: string
model: string
name: string
deviceCode: string
iotModelId: string
}[]
>([])
const getAirBlowerList = () => {
getAirBlowerListReq().then((res) => {
if (res.success) {
airBlowerList.value = res.data.map((item) => {
return {
irn: item.irn,
model: item.model,
name: item.name,
deviceCode: item.deviceCode,
iotModelId: item.modelId,
}
})
}
})
}
const beforeAirBlower = computed(() => {
const len = airBlowerList.value.length
if (len === 0) return { irn: '', model: '', name: '', deviceCode: '', iotModelId: '' }
const curIndex = airBlowerList.value.findIndex((item) => item.irn === route.query.irn)
if (curIndex === 0) return airBlowerList.value[len - 1]
return airBlowerList.value[curIndex - 1]
})
const afterAirBlower = computed(() => {
const len = airBlowerList.value.length
if (len === 0) return { irn: '', model: '', name: '', deviceCode: '', iotModelId: '' }
const curIndex = airBlowerList.value.findIndex((item) => item.irn === route.query.irn)
if (curIndex === len - 1) return airBlowerList.value[0]
return airBlowerList.value[curIndex + 1]
})
const switchAirblower = (type: 0 | 1) => {
const data = type === 0 ? beforeAirBlower.value : afterAirBlower.value
const query = {
irn: data.irn,
iotModelId: data.iotModelId,
deviceCode: data.deviceCode,
model: data.model,
name: data.name,
}
router.push({
name: 'windTurbine',
query,
})
}
onMounted(() => { onMounted(() => {
window.addEventListener('resize', sizeChange) window.addEventListener('resize', sizeChange)
sizeChange() sizeChange()
@ -1346,6 +1414,8 @@ onMounted(() => {
createScroll() createScroll()
useEventListener(window, 'resize', echartsResize) useEventListener(window, 'resize', echartsResize)
autoUpdate() autoUpdate()
getAlarmList()
getAirBlowerList()
}) })
onUnmounted(() => { onUnmounted(() => {
@ -1356,8 +1426,34 @@ onUnmounted(() => {
const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts> const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
chartKeys.forEach((key) => { chartKeys.forEach((key) => {
state.charts[key] && state.charts[key].dispose() state.charts[key] && state.charts[key].dispose()
state.charts[key] = null
}) })
}) })
watch(
() => route.query.irn,
() => {
console.log('切换风机', route.query.name)
autoUpdateForSecondTimer && clearInterval(autoUpdateForSecondTimer)
autoUpdateForSecondTimer = null
autoUpdateTimerForHourTimer && clearInterval(autoUpdateTimerForHourTimer)
autoUpdateTimerForHourTimer = null
autoUpdateTimerForMinuteTimer && clearInterval(autoUpdateTimerForMinuteTimer)
autoUpdateTimerForMinuteTimer = null
const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
chartKeys.forEach((key) => {
state.charts[key] && state.charts[key].dispose()
state.charts[key] = null
})
nextTick(() => {
autoUpdate()
getAlarmList()
getAllChartData()
})
}
)
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -1515,6 +1611,28 @@ $labelHeight: 38px;
aspect-ratio: 43 / 24; aspect-ratio: 43 / 24;
background: url('/@/assets/WindBlower/bg.png') no-repeat; background: url('/@/assets/WindBlower/bg.png') no-repeat;
background-size: contain; background-size: contain;
&:hover {
.switchWindBlower {
opacity: 1;
}
}
.switchWindBlower {
position: absolute;
left: 50%;
top: 5%;
transform: translateX(-50%);
width: 100px;
height: 40px;
// background-color: red;
opacity: 0;
display: flex;
justify-content: space-between;
transition: opacity 0.4s;
.el-icon:hover {
cursor: pointer;
color: rgba(255, 255, 255, 0.7);
}
}
.control-type { .control-type {
width: 100%; width: 100%;
display: flex; display: flex;

View File

@ -655,6 +655,8 @@ const openWindTurbine = (row: TableDataObjType) => {
irn: row.irn, irn: row.irn,
iotModelId: row.iotModelId, iotModelId: row.iotModelId,
deviceCode: row.deviceCode, deviceCode: row.deviceCode,
model: row.model,
name:row.name
}, },
}) })
} }

View File

@ -39,6 +39,7 @@ export type TableColumnType = {
align?: 'left' | 'right' | 'center' align?: 'left' | 'right' | 'center'
custom?: 'header' | 'default' custom?: 'header' | 'default'
type?: 'default' | 'selection' | 'index' | 'expand' type?: 'default' | 'selection' | 'index' | 'expand'
sortable?:boolean
} }
export type CommandReqType = { export type CommandReqType = {

View File

@ -126,6 +126,8 @@ const handleDoubleClick = (row) => {
irn: row.irn, irn: row.irn,
iotModelId: row.modelId, iotModelId: row.modelId,
name: row.name, name: row.name,
deviceCode: row.deviceCode,
model: row.model,
}, },
}) })
} }

View File

@ -125,6 +125,8 @@ const handleClick = (row) => {
irn: row.irn, irn: row.irn,
iotModelId: row.modelId, iotModelId: row.modelId,
deviceCode: row.deviceCode, deviceCode: row.deviceCode,
name: row.name,
model: row.model,
}, },
}) })
} }

View File

@ -466,11 +466,11 @@ const readFile = (data: tableItemData) => {
attrName.forEach((item) => { attrName.forEach((item) => {
if (item === 'TimeStamp') { if (item === 'TimeStamp') {
previewChartData.TimeStamp = previewChartData.TimeStamp.map((item: any) => { previewChartData.TimeStamp = previewChartData.TimeStamp.map((item: any) => {
return dayjs(item).format('YYYY-MM-DD HH:mm:ss') return dayjs(item).format('YYYY-MM-DD HH:mm:ss.SSS')
}) })
} else if (item === 'TimeStampUTC') { } else if (item === 'TimeStampUTC') {
previewChartData.TimeStamp = previewChartData.TimeStampUTC.map((item: any) => { previewChartData.TimeStamp = previewChartData.TimeStampUTC.map((item: any) => {
return dayjs(item).format('YYYY-MM-DD HH:mm:ss') return dayjs(item).format('YYYY-MM-DD HH:mm:ss.SSS')
}) })
} else { } else {
data.push({ data.push({
@ -625,7 +625,7 @@ const initPreviewChart = () => {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow', type: 'line',
}, },
}, },
xAxis: { xAxis: {