谐波频谱添加奇次、偶次区分

历史趋势添加线区分指标

src/views/govern/device/control/tabs/components/realtrend.vue

@@ -1,6 +1,9 @@
 <!-- 实时数据 - 谐波频谱页面 -->
 <template>
     <div class="realtrend" v-loading="loading">
+        <el-select v-model="selectValue" v-if="!loading" style="width: 100px" class="select">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
         <el-tabs type="border-card" v-if="tabsList.length != 0" v-model="activeName" @tab-click="handleClick">
             <el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
                 <div>
@@ -35,13 +38,11 @@
                                         <span>{{ String(key).replace('data', ' ') }}次</span>
                                     </p>
                                     <p>
-                                        <span
+                                        <span v-if="
-                                            v-if="
                                             String(key).includes('data') &&
                                             String(key) != 'dataLevel' &&
                                             String(key) != 'dataTime'
-                                            "
+                                        ">
-                                        >
                                             {{ value }}
                                         </span>
                                     </p>
@@ -69,6 +70,23 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
 const activeName = ref(0)
 const emit = defineEmits(['changeTrendType'])
 const tableList: any = []
+const selectValue = ref('1')
+
+const options = [
+    {
+        value: '1',
+        label: '奇次',
+    },
+    {
+        value: '2',
+        label: '偶次',
+    },
+    {
+        value: '3',
+        label: '全部',
+    },
+
+]
 interface RowVO {
     [key: string]: any
 }
@@ -171,7 +189,7 @@ const init = () => {
         xAxis: {
             name: '次数',
             data: trendData.map((item: any) => {
-                return item.count + '次'
+                return (activeName.value == 2 ? item.count - 0.5 : item.count) + '次'
             })
         },
         yAxis: {
@@ -227,9 +245,39 @@ const setRealTrendData = (val: any) => {
     mqttMessage.value = val
     for (let key in val) {
         if (String(key).includes('data') && String(key) != 'dataLevel' && String(key) != 'dataTime') {
+            const numberPart = parseInt(key.replace('data', ''));
+            if (selectValue.value != '3') {
+                if (selectValue.value == '2') {
+                    if (activeName.value == 2) {
+                        if (numberPart % 2 !== 0) {
+                            tableData.value[key] = val[key]
+                        }
+                    } else {
+                        if (numberPart % 2 === 0) {
                             tableData.value[key] = val[key]
                         }
                     }
+
+                } else {
+                    if (activeName.value == 2) {
+                        if (numberPart % 2 === 0) {
+                            tableData.value[key] = val[key]
+                        }
+                    } else {
+                        if (numberPart % 2 !== 0) {
+                            tableData.value[key] = val[key]
+                        }
+                    }
+                }
+
+            } else {
+                tableData.value[key] = val[key]
+
+            }
+
+        }
+    }
+
     if (!tabsList.value[activeName.value].groupName.includes('间谐波')) {
         delete tableData.value.data1
     } else {
@@ -259,6 +307,12 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
 .realtrend {
     width: 100%;
     height: 100%;
+    position: relative;
+
+    .select {
+        position: absolute;
+        top: -40px;
+    }
 
     .realtrend_top {
         width: 100%;
@@ -306,12 +360,14 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
         // }
 
         .realtrend_table {
+
             width: 100%;
             height: auto;
             max-height: 150px;
             display: flex;
             border: 2px solid #eee;
             cursor: pointer;
+
             .thead_left {
                 width: 150px;
                 height: 100%;
@@ -322,6 +378,7 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
                 line-height: 50px;
                 font-weight: 800;
                 padding-bottom: 5px;
+
                 p {
                     width: 100%;
                     height: 100%;
@@ -331,25 +388,30 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
                     margin: 0 !important;
                 }
             }
+
             .thead_right {
                 flex: 1;
                 align-items: center;
                 overflow-x: auto;
                 overflow-y: hidden;
                 display: flex;
+                padding-bottom: 5px;
+
                 .right_cell {
                     width: 100%;
                     display: flex;
                     flex-direction: column;
+
                     p {
                         flex: none;
-                        width: 60px;
+                        min-width: 60px;
                         height: 100%;
                         text-align: center;
                         border: 1px solid #eee;
                         line-height: 50px;
                         margin: 0 !important;
                     }
+
                     p:nth-child(1) {
                         font-weight: 800;
                     }
@@ -378,6 +440,7 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
 
 .tab_info {
     width: 100%;
+
     // height: calc(100vh - 450px);
     // overflow: auto;
     // padding-bottom: 20px;
@@ -387,4 +450,8 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
         height: calc(100vh - 560px);
     }
 }
+
+:deep(.el-select) {
+    min-width: 100px;
+}
 </style>

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

@@ -134,6 +134,7 @@ const getTrendRequest = (val: any) => {
 //初始化趋势图
 const headerRef = ref()
 const datePickerRef = ref()
+const lineStyle = [{ type: 'solid', }, { type: 'dashed', }, { type: 'dotted', }]
 const init = async () => {
     loading.value = true
     // 选择指标的时候切换legend内容和data数据
@@ -340,7 +341,9 @@ const init = async () => {
                                 })
                             })
                             // console.log("🚀 ~ result.forEach ~ result:", result)
-
+                            // '电压负序分量', '电压正序分量', '电压零序分量'
+                            let ABCName = [...new Set(chartsList.map((item: any) => { return item.anotherName == '电压负序分量' ? '电压不平衡' : item.anotherName == '电压正序分量' ? '电压不平衡' : item.anotherName == '电压零序分量' ? '电压不平衡' : item.anotherName }))];
+                            console.log("🚀 ~ .then ~ ABCName:", ABCName)
                             result.forEach((item: any, index: any) => {
                                 let yMethodList: any = []
 
@@ -365,6 +368,9 @@ const init = async () => {
                                 // console.log("🚀 ~ ABCList.forEach ~ ABCList:", ABCList)
 
                                 ABCList.forEach((kk: any) => {
+                                    let colorName = kk[0].phase?.charAt(0).toUpperCase()
+                                    let lineS = ABCName.findIndex(item => item === (kk[0].anotherName == '电压负序分量' ? '电压不平衡' : kk[0].anotherName == '电压正序分量' ? '电压不平衡' : kk[0].anotherName == '电压零序分量' ? '电压不平衡' : kk[0].anotherName));
+
                                     let seriesList: any = []
                                     kk.forEach((cc: any) => {
                                         if (cc.statisticalData !== null) {
@@ -381,8 +387,10 @@ const init = async () => {
                                             : kk[0].anotherName,
                                         type: 'line',
                                         smooth: true,
+                                        color: colorName == 'A' ? '#FFCC00' : colorName == 'B' ? '#009900' : colorName == 'C' ? '#CC0000' : '',
                                         symbol: 'none',
                                         data: seriesList,
+                                        lineStyle: lineStyle[lineS],
                                         yAxisIndex: index
                                     })
                                 })

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

@@ -354,6 +354,9 @@ const refreshTree = () => {
 const range = (start: any, end: any, step: any) => {
     return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step)
 }
+const colors = ['#FFCC00', '#009900', '#CC0000']
+const lineStyle = [{ type: 'solid', }, { type: 'dashed', }, { type: 'dotted', }]
+
 const titleList: any = ref('')
 const init = (flag: boolean) => {
     titleList.value = ''
@@ -531,13 +534,14 @@ const init = (flag: boolean) => {
                                     const xname = params[0].value[0]
                                     let str = `${xname}<br>`
                                     params.forEach((el: any, index: any) => {
-                                        str += `${el.marker}${el.seriesName.split('(')[0]}：${el.value[1] ? el.value[1] + ' ' + el.value[2] : '-'
+
+                                        str += `${el.marker}${el.seriesName.split('(')[0]}：${el.value[1] ? el.value[1] + ' ' + (el.value[2] || '') : '-'
                                             }<br>`
                                     })
                                     return str
                                 }
                             },
-                            color: ['#FFCC00', '#009900', '#CC0000', ...color],
+                            // color: ['#FFCC00', '#009900', '#CC0000', ...color],
                             xAxis: {
                                 type: 'time',
                                 axisLabel: {
@@ -577,7 +581,13 @@ const init = (flag: boolean) => {
                                     ...(index > 0 ? right : null)
                                 })
                             })
+                            console.log("🚀 ~ result.forEach ~ result:", result)
 
+
+
+
+
+                            let ABCName = [...new Set(chartsList.map((item: any) => { return item.anotherName == '电压负序分量' ? '电压不平衡' : item.anotherName == '电压正序分量' ? '电压不平衡' : item.anotherName == '电压零序分量' ? '电压不平衡' : item.anotherName }))];
                             result.forEach((item: any, index: any) => {
                                 let yMethodList: any = []
 
@@ -587,9 +597,10 @@ const init = (flag: boolean) => {
                                         if (item.phase == null) {
                                             key = item.anotherName
                                         } else {
-
                                             key = item.phase
                                         }
+
+
                                         if (!acc[key]) {
                                             acc[key] = []
                                         }
@@ -597,13 +608,23 @@ const init = (flag: boolean) => {
                                         return acc
                                     }, {})
                                 )
+
+
+
+
+
                                 ABCList.forEach((kk: any) => {
+                                    let colorName = kk[0].phase?.charAt(0).toUpperCase()
+
+
+                                    let lineS = ABCName.findIndex(item => item === (kk[0].anotherName == '电压负序分量' ? '电压不平衡' : kk[0].anotherName == '电压正序分量' ? '电压不平衡' : kk[0].anotherName == '电压零序分量' ? '电压不平衡' : kk[0].anotherName));
+
+
                                     let seriesList: any = []
                                     kk.forEach((cc: any) => {
                                         if (cc.statisticalData !== null) {
                                             yMethodList.push(cc.statisticalData?.toFixed(2) - 0)
                                         }
-
                                         seriesList.push([cc.time, cc.statisticalData?.toFixed(2), cc.unit])
                                     })
                                     echartsData.value.options.series.push({
@@ -611,12 +632,15 @@ const init = (flag: boolean) => {
                                             ? kk[0].phase + '相' + kk[0].anotherName
                                             : kk[0].anotherName,
                                         type: 'line',
+                                        color: colorName == 'A' ? '#FFCC00' : colorName == 'B' ? '#009900' : colorName == 'C' ? '#CC0000' : '',
                                         smooth: true,
                                         symbol: 'none',
+                                        lineStyle: lineStyle[lineS],
                                         data: seriesList,
                                         yAxisIndex: index
                                     })
                                 })
+
                                 let [min, max] = yMethod(yMethodList)
                                 echartsData.value.yAxis[index].min = min
                                 echartsData.value.yAxis[index].max = max