提交app
This commit is contained in:
guanj
@@ -1,151 +1,164 @@
|
||||
<template>
|
||||
<view class="basic">
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">温度</view>
|
||||
<view class="grid-card-content-4">
|
||||
<template v-for="item in renderData">
|
||||
<view class="item item-title">{{ item[0].clDid }}
|
||||
<template v-if="item[0].clDid"> (°C)</template>
|
||||
</view>
|
||||
<view class="item item-title">{{ item[1].clDid }}
|
||||
<template v-if="item[1].clDid"> (°C)</template>
|
||||
</view>
|
||||
<view class="item item-title">{{ item[2].clDid }}
|
||||
<template v-if="item[2].clDid"> (°C)</template>
|
||||
</view>
|
||||
<view class="item item-title">{{ item[3].clDid }}
|
||||
<template v-if="item[3].clDid"> (°C)</template>
|
||||
</view>
|
||||
<view class="item">{{ item[0].clDid ? Math.round(item[0].value) || '-' : '' }}</view>
|
||||
<view class="item">{{ item[1].clDid ? Math.round(item[1].value) || '-' : '' }}</view>
|
||||
<view class="item">{{ item[2].clDid ? Math.round(item[2].value) || '-' : '' }}</view>
|
||||
<view class="item">{{ item[3].clDid ? Math.round(item[3].value) || '-' : '' }}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 运维管理员、工程用户 可看 -->
|
||||
<view class="grid-card" v-if="userInfo.authorities=='operation_manager'||userInfo.authorities=='engineering_user'">
|
||||
<view class="grid-card-title">状态</view>
|
||||
<view class="grid-card-content-4">
|
||||
<template v-for="(item, index) in moduleData">
|
||||
<view class="item item-title">{{ item[0].moduleName }}
|
||||
<template v-if="item[0].moduleName"></template>
|
||||
</view>
|
||||
<view class="item item-title">{{ item[1].moduleName }}
|
||||
<template v-if="item[1].moduleName"></template>
|
||||
</view>
|
||||
<view class="item item-title">{{ item[2].moduleName }}
|
||||
<template v-if="item[2].moduleName"></template>
|
||||
</view>
|
||||
<view class="item item-title">{{ item[3].moduleName }}
|
||||
<template v-if="item[3].moduleName"></template>
|
||||
</view>
|
||||
<!-- <uni-tag :text="item[0].moduleState" :type=" item[0].moduleState=='离线'?'error' : 'success'" /> -->
|
||||
<view class="item">{{ item[0].moduleState }}</view>
|
||||
<view class="item">{{ item[1].moduleState }}</view>
|
||||
<view class="item">{{ item[2].moduleState }}</view>
|
||||
<view class="item">{{ item[3].moduleState }}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="grid-card">-->
|
||||
<!-- <view class="grid-card-title">干接点</view>-->
|
||||
<!-- <view class="grid-card-content-4">-->
|
||||
<!-- <view class="item item-title">干接点1</view>-->
|
||||
<!-- <view class="item item-title">干接点2</view>-->
|
||||
<!-- <view class="item item-title"></view>-->
|
||||
<!-- <view class="item item-title"></view>-->
|
||||
<!-- <view class="item">正常</view>-->
|
||||
<!-- <view class="item">正常</view>-->
|
||||
<!-- <view class="item"></view>-->
|
||||
<!-- <view class="item"></view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getModuleState
|
||||
} from '@/common/api/harmonic.js'
|
||||
export default {
|
||||
|
||||
props: {
|
||||
IOData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
},
|
||||
ndid: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
userInfo: {},
|
||||
flag: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
renderData() {
|
||||
let arr = []
|
||||
// 把IOData转换成每4个一组的二维数组
|
||||
for (let i = 0; i < this.IOData.length; i += 4) {
|
||||
this.IOData.slice(i, i + 4).forEach((item) => {
|
||||
if (Number.isInteger(item.value) || item.value == '') {} else {
|
||||
item.value = (item.value - 0).toFixed(2)
|
||||
}
|
||||
})
|
||||
arr.push(this.IOData.slice(i, i + 4))
|
||||
}
|
||||
// 把每组的长度补齐到4
|
||||
arr.forEach((item) => {
|
||||
if (item.length < 4) {
|
||||
let length = 4 - item.length
|
||||
for (let i = 0; i < length; i++) {
|
||||
item.push({})
|
||||
}
|
||||
}
|
||||
})
|
||||
console.warn(arr)
|
||||
return arr
|
||||
},
|
||||
moduleData() {
|
||||
let arr = []
|
||||
// 把IOData转换成每4个一组的二维数组
|
||||
for (let i = 0; i < this.list.length; i += 4) {
|
||||
arr.push(this.list.slice(i, i + 4))
|
||||
}
|
||||
// 把每组的长度补齐到4
|
||||
arr.forEach((item) => {
|
||||
if (item.length < 4) {
|
||||
let length = 4 - item.length
|
||||
for (let i = 0; i < length; i++) {
|
||||
item.push({})
|
||||
}
|
||||
}
|
||||
})
|
||||
console.warn(arr)
|
||||
return arr
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
info() {
|
||||
getModuleState({
|
||||
id: this.ndid
|
||||
}).then((res) => {
|
||||
this.list = res.data
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||||
|
||||
this.info()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.basic {}
|
||||
</style>
|
||||
<template>
|
||||
<view>
|
||||
<uni-load-more status="loading" v-if="IOData.length == 0"></uni-load-more>
|
||||
<view class="basic" v-else>
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">温度</view>
|
||||
<view class="grid-card-content-4">
|
||||
<template v-for="item in renderData">
|
||||
<view class="item item-title"
|
||||
>{{ item[0].clDid }}
|
||||
<template v-if="item[0].clDid"> (°C)</template>
|
||||
</view>
|
||||
<view class="item item-title"
|
||||
>{{ item[1].clDid }}
|
||||
<template v-if="item[1].clDid"> (°C)</template>
|
||||
</view>
|
||||
<view class="item item-title"
|
||||
>{{ item[2].clDid }}
|
||||
<template v-if="item[2].clDid"> (°C)</template>
|
||||
</view>
|
||||
<view class="item item-title"
|
||||
>{{ item[3].clDid }}
|
||||
<template v-if="item[3].clDid"> (°C)</template>
|
||||
</view>
|
||||
<view class="item">{{ item[0].clDid ? Math.round(item[0].value) || '-' : '' }}</view>
|
||||
<view class="item">{{ item[1].clDid ? Math.round(item[1].value) || '-' : '' }}</view>
|
||||
<view class="item">{{ item[2].clDid ? Math.round(item[2].value) || '-' : '' }}</view>
|
||||
<view class="item">{{ item[3].clDid ? Math.round(item[3].value) || '-' : '' }}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 运维管理员、工程用户 可看 -->
|
||||
<view
|
||||
class="grid-card"
|
||||
v-if="userInfo.authorities == 'operation_manager' || userInfo.authorities == 'engineering_user'"
|
||||
>
|
||||
<view class="grid-card-title">状态</view>
|
||||
<view class="grid-card-content-4">
|
||||
<template v-for="(item, index) in moduleData">
|
||||
<view class="item item-title"
|
||||
>{{ item[0].moduleName }}
|
||||
<template v-if="item[0].moduleName"></template>
|
||||
</view>
|
||||
<view class="item item-title"
|
||||
>{{ item[1].moduleName }}
|
||||
<template v-if="item[1].moduleName"></template>
|
||||
</view>
|
||||
<view class="item item-title"
|
||||
>{{ item[2].moduleName }}
|
||||
<template v-if="item[2].moduleName"></template>
|
||||
</view>
|
||||
<view class="item item-title"
|
||||
>{{ item[3].moduleName }}
|
||||
<template v-if="item[3].moduleName"></template>
|
||||
</view>
|
||||
<!-- <uni-tag :text="item[0].moduleState" :type=" item[0].moduleState=='离线'?'error' : 'success'" /> -->
|
||||
<view class="item">{{ item[0].moduleState }}</view>
|
||||
<view class="item">{{ item[1].moduleState }}</view>
|
||||
<view class="item">{{ item[2].moduleState }}</view>
|
||||
<view class="item">{{ item[3].moduleState }}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="grid-card">-->
|
||||
<!-- <view class="grid-card-title">干接点</view>-->
|
||||
<!-- <view class="grid-card-content-4">-->
|
||||
<!-- <view class="item item-title">干接点1</view>-->
|
||||
<!-- <view class="item item-title">干接点2</view>-->
|
||||
<!-- <view class="item item-title"></view>-->
|
||||
<!-- <view class="item item-title"></view>-->
|
||||
<!-- <view class="item">正常</view>-->
|
||||
<!-- <view class="item">正常</view>-->
|
||||
<!-- <view class="item"></view>-->
|
||||
<!-- <view class="item"></view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { getModuleState } from '@/common/api/harmonic.js'
|
||||
export default {
|
||||
props: {
|
||||
IOData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
},
|
||||
ndid: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
userInfo: {},
|
||||
flag: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
renderData() {
|
||||
let arr = []
|
||||
// 把IOData转换成每4个一组的二维数组
|
||||
for (let i = 0; i < this.IOData.length; i += 4) {
|
||||
this.IOData.slice(i, i + 4).forEach((item) => {
|
||||
if (Number.isInteger(item.value) || item.value == '') {
|
||||
} else {
|
||||
item.value = (item.value - 0).toFixed(2)
|
||||
}
|
||||
})
|
||||
arr.push(this.IOData.slice(i, i + 4))
|
||||
}
|
||||
// 把每组的长度补齐到4
|
||||
arr.forEach((item) => {
|
||||
if (item.length < 4) {
|
||||
let length = 4 - item.length
|
||||
for (let i = 0; i < length; i++) {
|
||||
item.push({})
|
||||
}
|
||||
}
|
||||
})
|
||||
console.warn(arr)
|
||||
return arr
|
||||
},
|
||||
moduleData() {
|
||||
let arr = []
|
||||
// 把IOData转换成每4个一组的二维数组
|
||||
for (let i = 0; i < this.list.length; i += 4) {
|
||||
arr.push(this.list.slice(i, i + 4))
|
||||
}
|
||||
// 把每组的长度补齐到4
|
||||
arr.forEach((item) => {
|
||||
if (item.length < 4) {
|
||||
let length = 4 - item.length
|
||||
for (let i = 0; i < length; i++) {
|
||||
item.push({})
|
||||
}
|
||||
}
|
||||
})
|
||||
console.warn(arr)
|
||||
return arr
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
info() {
|
||||
getModuleState({
|
||||
id: this.ndid,
|
||||
}).then((res) => {
|
||||
this.list = res.data
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||||
|
||||
this.info()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.basic {
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,172 +1,184 @@
|
||||
<template>
|
||||
<view class="basic">
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">电网电流</view>
|
||||
<view class="grid-card-content-3">
|
||||
<view class="item item-title">名称</view>
|
||||
<view class="item item-title">有效值(A)</view>
|
||||
<view class="item item-title">畸变率(%)</view>
|
||||
<template v-for="(item, index) in renderData.电网电流">
|
||||
<view class="item">{{ item.phase }}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_RmsI_Sys(A)'] > 0 ? item['Apf_RmsI_Sys(A)'].toFixed(2) : item['Apf_RmsI_Sys(A)']
|
||||
}}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_ThdA_Sys(%)'] > 0 ? item['Apf_ThdA_Sys(%)'].toFixed(2) : item['Apf_ThdA_Sys(%)']
|
||||
}}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">电网电压</view>
|
||||
<view class="grid-card-content-4">
|
||||
<view class="item item-title">名称</view>
|
||||
<view class="item item-title">电压(V)</view>
|
||||
<view class="item item-title">频率(Hz)</view>
|
||||
<view class="item item-title">畸变率(%)</view>
|
||||
<template v-for="(item, index) in renderData.电网电压">
|
||||
<view class="item">{{ item.phase }}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_PhV_Sys(V)'] > 0 ? item['Apf_PhV_Sys(V)'].toFixed(2) : item['Apf_PhV_Sys(V)']
|
||||
}}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_Freq(Hz)'] > 0 ? item['Apf_Freq(Hz)'].toFixed(2) : item['Apf_Freq(Hz)']
|
||||
}}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_ThdU_Sys(%)'] > 0 ? item['Apf_ThdU_Sys(%)'].toFixed(2) : item['Apf_ThdU_Sys(%)']
|
||||
}}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">负载电流</view>
|
||||
<view class="grid-card-content-3">
|
||||
<view class="item item-title">名称</view>
|
||||
<view class="item item-title">有效值(A)</view>
|
||||
<view class="item item-title">畸变率(%)</view>
|
||||
<template v-for="(item, index) in renderData.负载电流">
|
||||
<view class="item">{{ item.phase }}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_RmsI_Load(A)'] > 0 ? item['Apf_RmsI_Load(A)'].toFixed(2) : item['Apf_RmsI_Load(A)']
|
||||
}}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_ThdA_Load(%)'] > 0 ? item['Apf_ThdA_Load(%)'].toFixed(2) : item['Apf_ThdA_Load(%)']
|
||||
}}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">补偿电流</view>
|
||||
<view class="grid-card-content-3">
|
||||
<view class="item item-title">名称</view>
|
||||
<view class="item item-title">有效值(A)</view>
|
||||
<view class="item item-title">负载率(%)</view>
|
||||
<template v-for="(item, index) in renderData.补偿电流">
|
||||
<view class="item">{{ item.phase }}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_RmsI_TolOut(A)'] == 3.1415926 ? '-' :
|
||||
item['Apf_RmsI_TolOut(A)'] > 0
|
||||
? item['Apf_RmsI_TolOut(A)'].toFixed(2)
|
||||
: item['Apf_RmsI_TolOut(A)']
|
||||
}}</view>
|
||||
<view class="item">{{
|
||||
item['load_Rate'] == 3.1415926 ? '-' : item['load_Rate'] > 0 ? item['load_Rate'].toFixed(2) :
|
||||
item['load_Rate']
|
||||
}}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
renderData: {
|
||||
电网电流: [],
|
||||
电网电压: [],
|
||||
负载电流: [],
|
||||
补偿电流: [],
|
||||
未知: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
props: {
|
||||
basicData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
basicData: {
|
||||
handler: function (newVal, oldVal) {
|
||||
newVal.forEach((item) => {
|
||||
if (item.phase === 'avg') {
|
||||
return
|
||||
}
|
||||
let key = ''
|
||||
switch (item.statisticalName) {
|
||||
case 'Apf_RmsI_Sys(A)':
|
||||
key = '电网电流'
|
||||
break
|
||||
case 'Apf_ThdA_Sys(%)':
|
||||
key = '电网电流'
|
||||
break
|
||||
case 'Apf_PhV_Sys(V)':
|
||||
key = '电网电压'
|
||||
break
|
||||
case 'Apf_Freq(Hz)':
|
||||
key = '电网电压'
|
||||
break
|
||||
case 'Apf_ThdU_Sys(%)':
|
||||
key = '电网电压'
|
||||
break
|
||||
case 'Apf_RmsI_Load(A)':
|
||||
key = '负载电流'
|
||||
break
|
||||
case 'Apf_ThdA_Load(%)':
|
||||
key = '负载电流'
|
||||
break
|
||||
case 'Apf_RmsI_TolOut(A)':
|
||||
key = '补偿电流'
|
||||
break
|
||||
case 'Apf_PhV_Sys(V)':
|
||||
key = '补偿电流'
|
||||
break
|
||||
case 'Apf_PhV_Sys(V)':
|
||||
key = '补偿电流'
|
||||
break
|
||||
case 'load_Rate':
|
||||
key = '补偿电流'
|
||||
break
|
||||
default:
|
||||
key = '未知'
|
||||
break
|
||||
}
|
||||
|
||||
let index = this.renderData[key].findIndex((item2) => {
|
||||
return item2.phase === item.phase
|
||||
})
|
||||
if (index > -1) {
|
||||
this.renderData[key][index][item.statisticalName] = item.statisticalData //
|
||||
} else {
|
||||
this.renderData[key].push({
|
||||
phase: item.phase,
|
||||
[item.statisticalName]: item.statisticalData, //,
|
||||
})
|
||||
}
|
||||
})
|
||||
console.log(this.renderData)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.basic {}
|
||||
</style>
|
||||
<template>
|
||||
<view>
|
||||
<uni-load-more status="loading" v-if="basicData.length == 0"></uni-load-more>
|
||||
<view class="basic" v-else>
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">电网电流</view>
|
||||
<view class="grid-card-content-3">
|
||||
<view class="item item-title">名称</view>
|
||||
<view class="item item-title">有效值(A)</view>
|
||||
<view class="item item-title">畸变率(%)</view>
|
||||
<template v-for="(item, index) in renderData.电网电流">
|
||||
<view class="item">{{ item.phase }}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_RmsI_Sys(A)'] > 0 ? item['Apf_RmsI_Sys(A)'].toFixed(2) : item['Apf_RmsI_Sys(A)']
|
||||
}}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_ThdA_Sys(%)'] > 0 ? item['Apf_ThdA_Sys(%)'].toFixed(2) : item['Apf_ThdA_Sys(%)']
|
||||
}}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">电网电压</view>
|
||||
<view class="grid-card-content-4">
|
||||
<view class="item item-title">名称</view>
|
||||
<view class="item item-title">电压(V)</view>
|
||||
<view class="item item-title">频率(Hz)</view>
|
||||
<view class="item item-title">畸变率(%)</view>
|
||||
<template v-for="(item, index) in renderData.电网电压">
|
||||
<view class="item">{{ item.phase }}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_PhV_Sys(V)'] > 0 ? item['Apf_PhV_Sys(V)'].toFixed(2) : item['Apf_PhV_Sys(V)']
|
||||
}}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_Freq(Hz)'] > 0 ? item['Apf_Freq(Hz)'].toFixed(2) : item['Apf_Freq(Hz)']
|
||||
}}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_ThdU_Sys(%)'] > 0 ? item['Apf_ThdU_Sys(%)'].toFixed(2) : item['Apf_ThdU_Sys(%)']
|
||||
}}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">负载电流</view>
|
||||
<view class="grid-card-content-3">
|
||||
<view class="item item-title">名称</view>
|
||||
<view class="item item-title">有效值(A)</view>
|
||||
<view class="item item-title">畸变率(%)</view>
|
||||
<template v-for="(item, index) in renderData.负载电流">
|
||||
<view class="item">{{ item.phase }}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_RmsI_Load(A)'] > 0
|
||||
? item['Apf_RmsI_Load(A)'].toFixed(2)
|
||||
: item['Apf_RmsI_Load(A)']
|
||||
}}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_ThdA_Load(%)'] > 0
|
||||
? item['Apf_ThdA_Load(%)'].toFixed(2)
|
||||
: item['Apf_ThdA_Load(%)']
|
||||
}}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">补偿电流</view>
|
||||
<view class="grid-card-content-3">
|
||||
<view class="item item-title">名称</view>
|
||||
<view class="item item-title">有效值(A)</view>
|
||||
<view class="item item-title">负载率(%)</view>
|
||||
<template v-for="(item, index) in renderData.补偿电流">
|
||||
<view class="item">{{ item.phase }}</view>
|
||||
<view class="item">{{
|
||||
item['Apf_RmsI_TolOut(A)'] == 3.1415926
|
||||
? '-'
|
||||
: item['Apf_RmsI_TolOut(A)'] > 0
|
||||
? item['Apf_RmsI_TolOut(A)'].toFixed(2)
|
||||
: item['Apf_RmsI_TolOut(A)']
|
||||
}}</view>
|
||||
<view class="item">{{
|
||||
item['load_Rate'] == 3.1415926
|
||||
? '-'
|
||||
: item['load_Rate'] > 0
|
||||
? item['load_Rate'].toFixed(2)
|
||||
: item['load_Rate']
|
||||
}}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
renderData: {
|
||||
电网电流: [],
|
||||
电网电压: [],
|
||||
负载电流: [],
|
||||
补偿电流: [],
|
||||
未知: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
props: {
|
||||
basicData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
basicData: {
|
||||
handler: function (newVal, oldVal) {
|
||||
newVal.forEach((item) => {
|
||||
if (item.phase === 'avg') {
|
||||
return
|
||||
}
|
||||
let key = ''
|
||||
switch (item.statisticalName) {
|
||||
case 'Apf_RmsI_Sys(A)':
|
||||
key = '电网电流'
|
||||
break
|
||||
case 'Apf_ThdA_Sys(%)':
|
||||
key = '电网电流'
|
||||
break
|
||||
case 'Apf_PhV_Sys(V)':
|
||||
key = '电网电压'
|
||||
break
|
||||
case 'Apf_Freq(Hz)':
|
||||
key = '电网电压'
|
||||
break
|
||||
case 'Apf_ThdU_Sys(%)':
|
||||
key = '电网电压'
|
||||
break
|
||||
case 'Apf_RmsI_Load(A)':
|
||||
key = '负载电流'
|
||||
break
|
||||
case 'Apf_ThdA_Load(%)':
|
||||
key = '负载电流'
|
||||
break
|
||||
case 'Apf_RmsI_TolOut(A)':
|
||||
key = '补偿电流'
|
||||
break
|
||||
case 'Apf_PhV_Sys(V)':
|
||||
key = '补偿电流'
|
||||
break
|
||||
case 'Apf_PhV_Sys(V)':
|
||||
key = '补偿电流'
|
||||
break
|
||||
case 'load_Rate':
|
||||
key = '补偿电流'
|
||||
break
|
||||
default:
|
||||
key = '未知'
|
||||
break
|
||||
}
|
||||
|
||||
let index = this.renderData[key].findIndex((item2) => {
|
||||
return item2.phase === item.phase
|
||||
})
|
||||
if (index > -1) {
|
||||
this.renderData[key][index][item.statisticalName] = item.statisticalData //
|
||||
} else {
|
||||
this.renderData[key].push({
|
||||
phase: item.phase,
|
||||
[item.statisticalName]: item.statisticalData, //,
|
||||
})
|
||||
}
|
||||
})
|
||||
console.log(this.renderData)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.basic {
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,125 +1,135 @@
|
||||
<template>
|
||||
<view class="basic">
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">电网侧</view>
|
||||
<view class="grid-card-content-5">
|
||||
<view class="item item-title">名称</view>
|
||||
<view class="item item-title">有功功率(kW)</view>
|
||||
<view class="item item-title">无功功率(kVar)</view>
|
||||
<view class="item item-title">视在功率(kVA)</view>
|
||||
<view class="item item-title">功率因数</view>
|
||||
<template v-for="(item, index) in renderData.电网侧">
|
||||
<view class="item">{{ item.phase }}</view>
|
||||
<view class="item">{{ item['Apf_P_Sys(W)'] == '-' ? '-' : (item['Apf_P_Sys(W)'] / 1000).toFixed(2) }}
|
||||
</view>
|
||||
<view class="item">{{ item['Apf_Q_Sys(Var)'] == '-' ? '-' : (item['Apf_Q_Sys(Var)'] / 1000).toFixed(2) }}
|
||||
</view>
|
||||
<view class="item">{{ item['Apf_S_Sys(VA)'] == '-' ? '-' : (item['Apf_S_Sys(VA)'] / 1000).toFixed(2) }}
|
||||
</view>
|
||||
<view class="item">{{ item['Apf_PF_Sys(null)'] || '-' }}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">负载侧</view>
|
||||
<view class="grid-card-content-5">
|
||||
<view class="item item-title">名称</view>
|
||||
<view class="item item-title">有功功率(kW)</view>
|
||||
<view class="item item-title">无功功率(kVar)</view>
|
||||
<view class="item item-title">视在功率(kVA)</view>
|
||||
<view class="item item-title">功率因数</view>
|
||||
<template v-for="(item, index) in renderData.负载侧">
|
||||
<view class="item">{{ item.phase }}</view>
|
||||
<view class="item">{{ item['Apf_P_Load(W)'] == '-' ? '-' : (item['Apf_P_Load(W)'] / 1000).toFixed(2) }}
|
||||
</view>
|
||||
<view class="item">{{ item['Apf_Q_Load(Var)'] == '-' ? '-' : (item['Apf_Q_Load(Var)'] / 1000).toFixed(2)
|
||||
}}</view>
|
||||
<view class="item">{{ item['Apf_S_Load(VA)'] == '-' ? '-' : (item['Apf_S_Load(VA)'] / 1000).toFixed(2) }}
|
||||
</view>
|
||||
<view class="item">{{ item['Apf_PF_Load(null)'] || '-' }}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
renderData: {
|
||||
电网侧: [],
|
||||
负载侧: [],
|
||||
未知: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
props: {
|
||||
basicData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
basicData: {
|
||||
handler: function (newVal, oldVal) {
|
||||
newVal.forEach((item) => {
|
||||
if (item.phase === 'avg') {
|
||||
return
|
||||
}
|
||||
let key = ''
|
||||
switch (item.statisticalName) {
|
||||
case 'Apf_P_Sys(W)':
|
||||
key = '电网侧'
|
||||
break
|
||||
case 'Apf_Q_Sys(Var)':
|
||||
key = '电网侧'
|
||||
break
|
||||
case 'Apf_S_Sys(VA)':
|
||||
key = '电网侧'
|
||||
break
|
||||
case 'Apf_PF_Sys(null)':
|
||||
key = '电网侧'
|
||||
break
|
||||
case 'Apf_P_Load(W)':
|
||||
key = '负载侧'
|
||||
break
|
||||
case 'Apf_Q_Load(Var)':
|
||||
key = '负载侧'
|
||||
break
|
||||
case 'Apf_S_Load(VA)':
|
||||
key = '负载侧'
|
||||
break
|
||||
case 'Apf_PF_Load(null)':
|
||||
key = '负载侧'
|
||||
break
|
||||
default:
|
||||
key = '未知'
|
||||
break
|
||||
}
|
||||
|
||||
let index = this.renderData[key].findIndex((item2) => {
|
||||
return item2.phase === item.phase
|
||||
})
|
||||
if (index > -1) {
|
||||
this.renderData[key][index][item.statisticalName] = item.statisticalData || '-'
|
||||
} else {
|
||||
this.renderData[key].push({
|
||||
phase: item.phase,
|
||||
[item.statisticalName]: item.statisticalData || '-',
|
||||
})
|
||||
}
|
||||
})
|
||||
console.log(this.renderData)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.basic {}
|
||||
</style>
|
||||
<template>
|
||||
<view>
|
||||
<uni-load-more status="loading" v-if="basicData.length == 0"></uni-load-more>
|
||||
<view class="basic" v-else>
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">电网侧</view>
|
||||
<view class="grid-card-content-5">
|
||||
<view class="item item-title">名称</view>
|
||||
<view class="item item-title">有功功率(kW)</view>
|
||||
<view class="item item-title">无功功率(kVar)</view>
|
||||
<view class="item item-title">视在功率(kVA)</view>
|
||||
<view class="item item-title">功率因数</view>
|
||||
<template v-for="(item, index) in renderData.电网侧">
|
||||
<view class="item">{{ item.phase }}</view>
|
||||
<view class="item"
|
||||
>{{ item['Apf_P_Sys(W)'] == '-' ? '-' : (item['Apf_P_Sys(W)'] / 1000).toFixed(2) }}
|
||||
</view>
|
||||
<view class="item"
|
||||
>{{ item['Apf_Q_Sys(Var)'] == '-' ? '-' : (item['Apf_Q_Sys(Var)'] / 1000).toFixed(2) }}
|
||||
</view>
|
||||
<view class="item"
|
||||
>{{ item['Apf_S_Sys(VA)'] == '-' ? '-' : (item['Apf_S_Sys(VA)'] / 1000).toFixed(2) }}
|
||||
</view>
|
||||
<view class="item">{{ item['Apf_PF_Sys(null)'] || '-' }}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">负载侧</view>
|
||||
<view class="grid-card-content-5">
|
||||
<view class="item item-title">名称</view>
|
||||
<view class="item item-title">有功功率(kW)</view>
|
||||
<view class="item item-title">无功功率(kVar)</view>
|
||||
<view class="item item-title">视在功率(kVA)</view>
|
||||
<view class="item item-title">功率因数</view>
|
||||
<template v-for="(item, index) in renderData.负载侧">
|
||||
<view class="item">{{ item.phase }}</view>
|
||||
<view class="item"
|
||||
>{{ item['Apf_P_Load(W)'] == '-' ? '-' : (item['Apf_P_Load(W)'] / 1000).toFixed(2) }}
|
||||
</view>
|
||||
<view class="item">{{
|
||||
item['Apf_Q_Load(Var)'] == '-' ? '-' : (item['Apf_Q_Load(Var)'] / 1000).toFixed(2)
|
||||
}}</view>
|
||||
<view class="item"
|
||||
>{{ item['Apf_S_Load(VA)'] == '-' ? '-' : (item['Apf_S_Load(VA)'] / 1000).toFixed(2) }}
|
||||
</view>
|
||||
<view class="item">{{ item['Apf_PF_Load(null)'] || '-' }}</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
renderData: {
|
||||
电网侧: [],
|
||||
负载侧: [],
|
||||
未知: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
props: {
|
||||
basicData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
basicData: {
|
||||
handler: function (newVal, oldVal) {
|
||||
newVal.forEach((item) => {
|
||||
if (item.phase === 'avg') {
|
||||
return
|
||||
}
|
||||
let key = ''
|
||||
switch (item.statisticalName) {
|
||||
case 'Apf_P_Sys(W)':
|
||||
key = '电网侧'
|
||||
break
|
||||
case 'Apf_Q_Sys(Var)':
|
||||
key = '电网侧'
|
||||
break
|
||||
case 'Apf_S_Sys(VA)':
|
||||
key = '电网侧'
|
||||
break
|
||||
case 'Apf_PF_Sys(null)':
|
||||
key = '电网侧'
|
||||
break
|
||||
case 'Apf_P_Load(W)':
|
||||
key = '负载侧'
|
||||
break
|
||||
case 'Apf_Q_Load(Var)':
|
||||
key = '负载侧'
|
||||
break
|
||||
case 'Apf_S_Load(VA)':
|
||||
key = '负载侧'
|
||||
break
|
||||
case 'Apf_PF_Load(null)':
|
||||
key = '负载侧'
|
||||
break
|
||||
default:
|
||||
key = '未知'
|
||||
break
|
||||
}
|
||||
|
||||
let index = this.renderData[key].findIndex((item2) => {
|
||||
return item2.phase === item.phase
|
||||
})
|
||||
if (index > -1) {
|
||||
this.renderData[key][index][item.statisticalName] = item.statisticalData || '-'
|
||||
} else {
|
||||
this.renderData[key].push({
|
||||
phase: item.phase,
|
||||
[item.statisticalName]: item.statisticalData || '-',
|
||||
})
|
||||
}
|
||||
})
|
||||
console.log(this.renderData)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.basic {
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,375 +1,385 @@
|
||||
<template>
|
||||
<view>
|
||||
<div class="header-form">
|
||||
<uni-data-select
|
||||
v-model="parity"
|
||||
:localdata="parityOption"
|
||||
@change="initEcharts"
|
||||
style="flex: 1"
|
||||
:clear="false"
|
||||
></uni-data-select>
|
||||
<!-- <uni-data-checkbox v-model="dataRadio" :localdata="dataOptions" @change="initEcharts"></uni-data-checkbox> -->
|
||||
<uni-data-select
|
||||
v-model="dataRadio"
|
||||
:localdata="dataOptions"
|
||||
@change="initEcharts"
|
||||
style="flex: 2; margin-left: 20rpx"
|
||||
:clear="false"
|
||||
></uni-data-select>
|
||||
</div>
|
||||
<view class="charts-box">
|
||||
<!-- <view class="data-time">{{ time }}</view> -->
|
||||
<!-- <qiun-data-charts type="bar" :ontouch="true" :opts="opts" :chartData="chartData" /> -->
|
||||
<view style="width: 100%; height: 100%"><l-echart ref="chartRef" @finished="init"></l-echart></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
||||
export default {
|
||||
props: {
|
||||
basicData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
dataTime: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
parityOption: [
|
||||
{
|
||||
text: '奇次',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: '偶次',
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
parity: 2,
|
||||
time: '',
|
||||
dataOptions: [],
|
||||
dataRadio: 0,
|
||||
renderData: {
|
||||
电网侧: {
|
||||
Apf_HarmI: {},
|
||||
Apf_HarmUR: {},
|
||||
},
|
||||
负载侧: {
|
||||
Apf_HarmI: {},
|
||||
Apf_HarmUR: {},
|
||||
},
|
||||
},
|
||||
chartData: {},
|
||||
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
confine: true,
|
||||
},
|
||||
color: [
|
||||
'#1890FF',
|
||||
'#91CB74',
|
||||
'#FAC858',
|
||||
'#EE6666',
|
||||
'#73C0DE',
|
||||
'#3CA272',
|
||||
'#FC8452',
|
||||
'#9A60B4',
|
||||
'#ea7ccc',
|
||||
],
|
||||
legend: {
|
||||
data: ['电网侧', '负载侧'],
|
||||
left: 0,
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 15,
|
||||
top: 30,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
minInterval: 0.5,
|
||||
position: 'top', // 设置 x 轴在顶部
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: [],
|
||||
splitLine: { show: true },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999999',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666666',
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '电网侧',
|
||||
type: 'bar',
|
||||
label: {
|
||||
normal: {
|
||||
color: '#666',
|
||||
show: true,
|
||||
position: 'right',
|
||||
fontSize: '8px',
|
||||
|
||||
},
|
||||
},
|
||||
barGap: '10%',
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: '负载侧',
|
||||
type: 'bar',
|
||||
barCateGoryGap:20,
|
||||
label: {
|
||||
normal: {
|
||||
color: '#666',
|
||||
show: true,
|
||||
position: 'right',
|
||||
fontSize: '8px',
|
||||
},
|
||||
},
|
||||
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
opts: {
|
||||
// enableScroll: true,
|
||||
dataLabel: false,
|
||||
color: [
|
||||
'#1890FF',
|
||||
'#91CB74',
|
||||
'#FAC858',
|
||||
'#EE6666',
|
||||
'#73C0DE',
|
||||
'#3CA272',
|
||||
'#FC8452',
|
||||
'#9A60B4',
|
||||
'#ea7ccc',
|
||||
],
|
||||
padding: [0, 20, 0, 0],
|
||||
legend: {
|
||||
position: 'top',
|
||||
float: 'left',
|
||||
},
|
||||
xAxis: {
|
||||
// disableGrid: true,
|
||||
boundaryGap: 'justify',
|
||||
itemCount: 8,
|
||||
// scrollShow: true,
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
},
|
||||
],
|
||||
min: 0,
|
||||
// max: 10,
|
||||
|
||||
position: 'top',
|
||||
formatter: (value, index, opts) => {
|
||||
console.log(123, value, index, opts)
|
||||
},
|
||||
},
|
||||
yAxis: {},
|
||||
extra: {
|
||||
bar: {
|
||||
type: 'group',
|
||||
width: 30,
|
||||
meterBorde: 1,
|
||||
meterFillColor: '#FFFFFF',
|
||||
activeBgColor: '#000000',
|
||||
activeBgOpacity: 0.08,
|
||||
barBorderCircle: true,
|
||||
seriesGap: 2,
|
||||
categoryGap: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
basicData: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(this.basicData)
|
||||
let basicData = JSON.parse(JSON.stringify(this.basicData))
|
||||
// this.dataRadio = 0
|
||||
this.renderData = {
|
||||
电网侧: {
|
||||
Apf_HarmI: {},
|
||||
Apf_HarmUR: {},
|
||||
},
|
||||
负载侧: {
|
||||
Apf_HarmI: {},
|
||||
Apf_HarmUR: {},
|
||||
},
|
||||
}
|
||||
let arr = [
|
||||
{
|
||||
name: '电网侧',
|
||||
key: 'Apf_HarmI_Sys',
|
||||
},
|
||||
{
|
||||
name: '电网侧',
|
||||
key: 'Apf_HarmUR_Sys',
|
||||
},
|
||||
{
|
||||
name: '负载侧',
|
||||
key: 'Apf_HarmI_Load',
|
||||
},
|
||||
{
|
||||
name: '负载侧',
|
||||
key: 'Apf_HarmUR_Load',
|
||||
},
|
||||
]
|
||||
basicData.forEach((item) => {
|
||||
let have = arr.find((item2) => {
|
||||
return item.statisticalName.indexOf(item2.key) > -1
|
||||
})
|
||||
if (!have) return
|
||||
let name1 = have['name']
|
||||
let name2 = have.key.split('_')[0] + '_' + have.key.split('_')[1]
|
||||
if (this.renderData[name1][name2][item.phase]) {
|
||||
this.renderData[name1][name2][item.phase][item.statisticalName] = item.statisticalData || 0
|
||||
} else {
|
||||
this.renderData[name1][name2][item.phase] = {
|
||||
[item.statisticalName]: item.statisticalData || 0,
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log(this.renderData)
|
||||
let dataOptions = []
|
||||
let type = [
|
||||
{
|
||||
name: '谐波电流幅值',
|
||||
key: 'Apf_HarmI',
|
||||
},
|
||||
{
|
||||
name: '谐波电压含有率',
|
||||
key: 'Apf_HarmUR',
|
||||
},
|
||||
]
|
||||
Object.keys(this.renderData['电网侧']['Apf_HarmI']).forEach((item, index) => {
|
||||
type.forEach((item2) => {
|
||||
dataOptions.push({
|
||||
text: item + '相' + item2.name,
|
||||
pointer: item2.key + '_' + item,
|
||||
value: dataOptions.length,
|
||||
})
|
||||
})
|
||||
})
|
||||
this.dataOptions = dataOptions
|
||||
console.log(dataOptions)
|
||||
this.initEcharts()
|
||||
|
||||
this.time = this.$util.parseTime(this.dataTime - 8 * 60 * 60)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
// chart 图表实例不能存在data里
|
||||
const chart = await this.$refs.chartRef.init(echarts)
|
||||
chart.setOption(this.option)
|
||||
},
|
||||
initEcharts() {
|
||||
setTimeout(() => {
|
||||
if(this.renderData['电网侧']['Apf_HarmI'][Object.keys(this.renderData['电网侧']['Apf_HarmI'])[0]] == undefined) return
|
||||
let obj = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.renderData['电网侧']['Apf_HarmI'][Object.keys(this.renderData['电网侧']['Apf_HarmI'])[0]],
|
||||
),
|
||||
)
|
||||
let key = this.dataOptions[this.dataRadio].pointer.split('_')
|
||||
console.log(key)
|
||||
let name1 = key[0] + '_' + key[1]
|
||||
let name2 = key[2]
|
||||
this.chartData = {
|
||||
categories: Object.keys(obj)
|
||||
.map((item) => {
|
||||
// Apf_HarmI_Sys_36(A) 匹配36
|
||||
return Number(item.match(/\d+/)[0])
|
||||
})
|
||||
.filter((item) => {
|
||||
return item % 2 === this.parity - 1
|
||||
}),
|
||||
series: [
|
||||
{
|
||||
name: '电网侧',
|
||||
data: Object.values(this.renderData['电网侧'][name1][name2]).filter((item, index) => {
|
||||
return index % 2 === this.parity - 1
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: '负载侧',
|
||||
data: Object.values(this.renderData['负载侧'][name1][name2]).filter((item, index) => {
|
||||
return index % 2 === this.parity - 1
|
||||
}),
|
||||
},
|
||||
],
|
||||
}
|
||||
// /传值到echart
|
||||
this.option.yAxis[0].data = Object.keys(obj)
|
||||
.map((item) => {
|
||||
// Apf_HarmI_Sys_36(A) 匹配36
|
||||
return Number(item.match(/\d+/)[0])
|
||||
})
|
||||
.filter((item) => {
|
||||
return item % 2 === this.parity - 1
|
||||
}).reverse()
|
||||
this.option.series[0].data = Object.values(this.renderData['电网侧'][name1][name2]).filter(
|
||||
(item, index) => {
|
||||
return index % 2 === this.parity - 1
|
||||
},
|
||||
).reverse().map(item=>item.toFixed(2))
|
||||
this.option.series[1].data = Object.values(this.renderData['负载侧'][name1][name2]).filter(
|
||||
(item, index) => {
|
||||
return index % 2 === this.parity - 1
|
||||
},
|
||||
).reverse().map(item=>item.toFixed(2))
|
||||
this.init()
|
||||
}, 100)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.charts-box {
|
||||
margin-top: 20rpx;
|
||||
height: 100vh;
|
||||
.data-time {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
margin-top: 18rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.header-form {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view>
|
||||
<uni-load-more status="loading" v-if="basicData.length == 0"></uni-load-more>
|
||||
|
||||
<view v-else>
|
||||
<div class="header-form">
|
||||
<uni-data-select
|
||||
v-model="parity"
|
||||
:localdata="parityOption"
|
||||
@change="initEcharts"
|
||||
style="flex: 1"
|
||||
:clear="false"
|
||||
></uni-data-select>
|
||||
<!-- <uni-data-checkbox v-model="dataRadio" :localdata="dataOptions" @change="initEcharts"></uni-data-checkbox> -->
|
||||
<uni-data-select
|
||||
v-model="dataRadio"
|
||||
:localdata="dataOptions"
|
||||
@change="initEcharts"
|
||||
style="flex: 2; margin-left: 20rpx"
|
||||
:clear="false"
|
||||
></uni-data-select>
|
||||
</div>
|
||||
<view class="charts-box">
|
||||
<!-- <view class="data-time">{{ time }}</view> -->
|
||||
<!-- <qiun-data-charts type="bar" :ontouch="true" :opts="opts" :chartData="chartData" /> -->
|
||||
<view style="width: 100%; height: 100%"><l-echart ref="chartRef" @finished="init"></l-echart></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
||||
export default {
|
||||
props: {
|
||||
basicData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
dataTime: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
parityOption: [
|
||||
{
|
||||
text: '奇次',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: '偶次',
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
parity: 2,
|
||||
time: '',
|
||||
dataOptions: [],
|
||||
dataRadio: 0,
|
||||
renderData: {
|
||||
电网侧: {
|
||||
Apf_HarmI: {},
|
||||
Apf_HarmUR: {},
|
||||
},
|
||||
负载侧: {
|
||||
Apf_HarmI: {},
|
||||
Apf_HarmUR: {},
|
||||
},
|
||||
},
|
||||
chartData: {},
|
||||
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
confine: true,
|
||||
},
|
||||
color: [
|
||||
'#1890FF',
|
||||
'#91CB74',
|
||||
'#FAC858',
|
||||
'#EE6666',
|
||||
'#73C0DE',
|
||||
'#3CA272',
|
||||
'#FC8452',
|
||||
'#9A60B4',
|
||||
'#ea7ccc',
|
||||
],
|
||||
legend: {
|
||||
data: ['电网侧', '负载侧'],
|
||||
left: 0,
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 15,
|
||||
top: 30,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
minInterval: 0.5,
|
||||
position: 'top', // 设置 x 轴在顶部
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: [],
|
||||
splitLine: { show: true },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999999',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666666',
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '电网侧',
|
||||
type: 'bar',
|
||||
label: {
|
||||
normal: {
|
||||
color: '#666',
|
||||
show: true,
|
||||
position: 'right',
|
||||
fontSize: '8px',
|
||||
},
|
||||
},
|
||||
barGap: '10%',
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: '负载侧',
|
||||
type: 'bar',
|
||||
barCateGoryGap: 20,
|
||||
label: {
|
||||
normal: {
|
||||
color: '#666',
|
||||
show: true,
|
||||
position: 'right',
|
||||
fontSize: '8px',
|
||||
},
|
||||
},
|
||||
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
opts: {
|
||||
// enableScroll: true,
|
||||
dataLabel: false,
|
||||
color: [
|
||||
'#1890FF',
|
||||
'#91CB74',
|
||||
'#FAC858',
|
||||
'#EE6666',
|
||||
'#73C0DE',
|
||||
'#3CA272',
|
||||
'#FC8452',
|
||||
'#9A60B4',
|
||||
'#ea7ccc',
|
||||
],
|
||||
padding: [0, 20, 0, 0],
|
||||
legend: {
|
||||
position: 'top',
|
||||
float: 'left',
|
||||
},
|
||||
xAxis: {
|
||||
// disableGrid: true,
|
||||
boundaryGap: 'justify',
|
||||
itemCount: 8,
|
||||
// scrollShow: true,
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
},
|
||||
],
|
||||
min: 0,
|
||||
// max: 10,
|
||||
|
||||
position: 'top',
|
||||
formatter: (value, index, opts) => {
|
||||
console.log(123, value, index, opts)
|
||||
},
|
||||
},
|
||||
yAxis: {},
|
||||
extra: {
|
||||
bar: {
|
||||
type: 'group',
|
||||
width: 30,
|
||||
meterBorde: 1,
|
||||
meterFillColor: '#FFFFFF',
|
||||
activeBgColor: '#000000',
|
||||
activeBgOpacity: 0.08,
|
||||
barBorderCircle: true,
|
||||
seriesGap: 2,
|
||||
categoryGap: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
basicData: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(this.basicData)
|
||||
let basicData = JSON.parse(JSON.stringify(this.basicData))
|
||||
// this.dataRadio = 0
|
||||
this.renderData = {
|
||||
电网侧: {
|
||||
Apf_HarmI: {},
|
||||
Apf_HarmUR: {},
|
||||
},
|
||||
负载侧: {
|
||||
Apf_HarmI: {},
|
||||
Apf_HarmUR: {},
|
||||
},
|
||||
}
|
||||
let arr = [
|
||||
{
|
||||
name: '电网侧',
|
||||
key: 'Apf_HarmI_Sys',
|
||||
},
|
||||
{
|
||||
name: '电网侧',
|
||||
key: 'Apf_HarmUR_Sys',
|
||||
},
|
||||
{
|
||||
name: '负载侧',
|
||||
key: 'Apf_HarmI_Load',
|
||||
},
|
||||
{
|
||||
name: '负载侧',
|
||||
key: 'Apf_HarmUR_Load',
|
||||
},
|
||||
]
|
||||
basicData.forEach((item) => {
|
||||
let have = arr.find((item2) => {
|
||||
return item.statisticalName.indexOf(item2.key) > -1
|
||||
})
|
||||
if (!have) return
|
||||
let name1 = have['name']
|
||||
let name2 = have.key.split('_')[0] + '_' + have.key.split('_')[1]
|
||||
if (this.renderData[name1][name2][item.phase]) {
|
||||
this.renderData[name1][name2][item.phase][item.statisticalName] = item.statisticalData || 0
|
||||
} else {
|
||||
this.renderData[name1][name2][item.phase] = {
|
||||
[item.statisticalName]: item.statisticalData || 0,
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log(this.renderData)
|
||||
let dataOptions = []
|
||||
let type = [
|
||||
{
|
||||
name: '谐波电流幅值',
|
||||
key: 'Apf_HarmI',
|
||||
},
|
||||
{
|
||||
name: '谐波电压含有率',
|
||||
key: 'Apf_HarmUR',
|
||||
},
|
||||
]
|
||||
Object.keys(this.renderData['电网侧']['Apf_HarmI']).forEach((item, index) => {
|
||||
type.forEach((item2) => {
|
||||
dataOptions.push({
|
||||
text: item + '相' + item2.name,
|
||||
pointer: item2.key + '_' + item,
|
||||
value: dataOptions.length,
|
||||
})
|
||||
})
|
||||
})
|
||||
this.dataOptions = dataOptions
|
||||
console.log(dataOptions)
|
||||
this.initEcharts()
|
||||
|
||||
this.time = this.$util.parseTime(this.dataTime - 8 * 60 * 60)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
// chart 图表实例不能存在data里
|
||||
const chart = await this.$refs.chartRef.init(echarts)
|
||||
chart.setOption(this.option)
|
||||
},
|
||||
initEcharts() {
|
||||
setTimeout(() => {
|
||||
if (
|
||||
this.renderData['电网侧']['Apf_HarmI'][Object.keys(this.renderData['电网侧']['Apf_HarmI'])[0]] ==
|
||||
undefined
|
||||
)
|
||||
return
|
||||
let obj = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.renderData['电网侧']['Apf_HarmI'][Object.keys(this.renderData['电网侧']['Apf_HarmI'])[0]],
|
||||
),
|
||||
)
|
||||
let key = this.dataOptions[this.dataRadio].pointer.split('_')
|
||||
console.log(key)
|
||||
let name1 = key[0] + '_' + key[1]
|
||||
let name2 = key[2]
|
||||
this.chartData = {
|
||||
categories: Object.keys(obj)
|
||||
.map((item) => {
|
||||
// Apf_HarmI_Sys_36(A) 匹配36
|
||||
return Number(item.match(/\d+/)[0])
|
||||
})
|
||||
.filter((item) => {
|
||||
return item % 2 === this.parity - 1
|
||||
}),
|
||||
series: [
|
||||
{
|
||||
name: '电网侧',
|
||||
data: Object.values(this.renderData['电网侧'][name1][name2]).filter((item, index) => {
|
||||
return index % 2 === this.parity - 1
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: '负载侧',
|
||||
data: Object.values(this.renderData['负载侧'][name1][name2]).filter((item, index) => {
|
||||
return index % 2 === this.parity - 1
|
||||
}),
|
||||
},
|
||||
],
|
||||
}
|
||||
// /传值到echart
|
||||
this.option.yAxis[0].data = Object.keys(obj)
|
||||
.map((item) => {
|
||||
// Apf_HarmI_Sys_36(A) 匹配36
|
||||
return Number(item.match(/\d+/)[0])
|
||||
})
|
||||
.filter((item) => {
|
||||
return item % 2 === this.parity - 1
|
||||
})
|
||||
.reverse()
|
||||
this.option.series[0].data = Object.values(this.renderData['电网侧'][name1][name2])
|
||||
.filter((item, index) => {
|
||||
return index % 2 === this.parity - 1
|
||||
})
|
||||
.reverse()
|
||||
.map((item) => item.toFixed(2))
|
||||
this.option.series[1].data = Object.values(this.renderData['负载侧'][name1][name2])
|
||||
.filter((item, index) => {
|
||||
return index % 2 === this.parity - 1
|
||||
})
|
||||
.reverse()
|
||||
.map((item) => item.toFixed(2))
|
||||
this.init()
|
||||
}, 100)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.charts-box {
|
||||
margin-top: 20rpx;
|
||||
height: 100vh;
|
||||
.data-time {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
margin-top: 18rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.header-form {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -186,7 +186,7 @@ export default {
|
||||
content: [
|
||||
{
|
||||
iconPath: '/static/report.png',
|
||||
text: '告警',
|
||||
text: '详情',
|
||||
},
|
||||
// {
|
||||
// iconPath: '/static/record.png',
|
||||
@@ -196,10 +196,10 @@ export default {
|
||||
iconPath: '/static/about.png',
|
||||
text: '关于',
|
||||
},
|
||||
{
|
||||
iconPath: '/static/access.png',
|
||||
text: '接入',
|
||||
},
|
||||
// {
|
||||
// iconPath: '/static/access.png',
|
||||
// text: '接入',
|
||||
// },
|
||||
],
|
||||
client: null,
|
||||
timer: null,
|
||||
@@ -243,7 +243,7 @@ export default {
|
||||
this.$util.toast('下载成功')
|
||||
} else if (e.text === '记录') {
|
||||
uni.navigateTo({ url: '/pages/device/APF/record' })
|
||||
} else if (e.text === '告警') {
|
||||
} else if (e.text === '详情') {
|
||||
uni.navigateTo({ url: '/pages/device/APF/report?id=' + this.devId })
|
||||
} else if (e.text === '关于') {
|
||||
uni.navigateTo({ url: '/pages/device/APF/about?id=' + this.devId })
|
||||
@@ -353,7 +353,7 @@ export default {
|
||||
this.downloadImg()
|
||||
uni.setNavigationBarTitle({ title: this.deviceInfo.devName || '设备详情' })
|
||||
this.topolodyData = this.topolodyData.filter((item) => {
|
||||
let index = this.deviceInfo.appsLineTopologyDiagramPO.findIndex((element) => {
|
||||
let index = this.deviceInfo.appsLineTopologyDiagramPO?.findIndex((element) => {
|
||||
element.label = element.name
|
||||
item.label = element.name
|
||||
return element.linePostion === item.linePostion
|
||||
@@ -577,6 +577,12 @@ export default {
|
||||
text: '用户',
|
||||
})
|
||||
}
|
||||
if (this.userInfo.authorities === 'operation_manager') {
|
||||
this.content.push({
|
||||
iconPath: '/static/access.png',
|
||||
text: '接入',
|
||||
})
|
||||
}
|
||||
}
|
||||
this.$util.getDictData('Line_Position').then((res) => {
|
||||
this.topolodyData = res.map((item) => {
|
||||
|
||||
@@ -1,286 +1,292 @@
|
||||
<template>
|
||||
<Cn-page :loading="loading" noPadding>
|
||||
<view slot="body">
|
||||
<view class="detail">
|
||||
<view class="detail-header">
|
||||
<view class="header">
|
||||
<image
|
||||
src="http://localhost:8088/api/system-boot/file/download?filePath=topology/1aca98ceb22a1fc33b81d9101275ef1.png"
|
||||
mode="widthFix" style="width: 100%" />
|
||||
</view>
|
||||
<!-- <view class="des">
|
||||
<text>设备基础信息</text>
|
||||
<text class="ml10">设备状态</text>
|
||||
</view> -->
|
||||
<view class="nav">
|
||||
<view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
|
||||
v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text
|
||||
}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<DianWang v-if="navMenuActive == 0"></DianWang>
|
||||
<NiBian v-else-if="navMenuActive == 1"></NiBian>
|
||||
<ShuChu v-else-if="navMenuActive == 2"></ShuChu>
|
||||
<GanJieDian v-else-if="navMenuActive == 3"></GanJieDian>
|
||||
<ZhuangTaiLiang v-else-if="navMenuActive == 4"> </ZhuangTaiLiang>
|
||||
<QiTa v-else-if="navMenuActive == 5"></QiTa>
|
||||
<view style="height: 20rpx"></view>
|
||||
</view>
|
||||
<!-- <uni-fab
|
||||
ref="fab"
|
||||
direction="vertical"
|
||||
horizontal="right"
|
||||
vertical="bottom"
|
||||
:content="content"
|
||||
@trigger="trigger"
|
||||
/> -->
|
||||
<hover-menu :btnList="content" @trigger='trigger'></hover-menu>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
</template>
|
||||
<script>
|
||||
import DianWang from './comp/dianWang.vue'
|
||||
import NiBian from './comp/niBian.vue'
|
||||
import ShuChu from './comp/shuChu.vue'
|
||||
import GanJieDian from './comp/ganJieDian.vue'
|
||||
import ZhuangTaiLiang from './comp/zhuangTaiLiang.vue'
|
||||
import QiTa from './comp/qiTa.vue'
|
||||
import { manualAccess } from '@/common/api/accessBoot'
|
||||
import hoverMenu from '@/hover-menu/components/hover-menu/hover-menu.vue';
|
||||
export default {
|
||||
components: {
|
||||
DianWang,
|
||||
NiBian,
|
||||
ShuChu,
|
||||
GanJieDian,
|
||||
ZhuangTaiLiang,
|
||||
QiTa,
|
||||
hoverMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
navMenuActive: 0,
|
||||
navHeight: 0,
|
||||
pageOptions: {},
|
||||
|
||||
navMenuList: [
|
||||
{
|
||||
text: '电网数据',
|
||||
},
|
||||
{
|
||||
text: '逆变数据',
|
||||
},
|
||||
{
|
||||
text: '输出数据',
|
||||
},
|
||||
{
|
||||
text: '干接点',
|
||||
},
|
||||
{
|
||||
text: '状态量',
|
||||
},
|
||||
{
|
||||
text: '其他',
|
||||
},
|
||||
],
|
||||
content: [
|
||||
{
|
||||
iconPath: '/static/report.png',
|
||||
text: '告警',
|
||||
},
|
||||
{
|
||||
iconPath: '/static/record.png',
|
||||
text: '记录',
|
||||
},
|
||||
{
|
||||
iconPath: '/static/about.png',
|
||||
text: '关于',
|
||||
},
|
||||
{
|
||||
iconPath: '/static/access.png',
|
||||
text: '接入',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
trigger(e) {
|
||||
console.log(e)
|
||||
if (e.text === '分享') {
|
||||
this.$refs.share.open()
|
||||
} else if (e.text === '删除') {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定删除该设备吗？',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定')
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
} else if (e.text === '下载') {
|
||||
this.$util.toast('下载成功')
|
||||
} else if (e.text === '记录') {
|
||||
uni.navigateTo({ url: '/pages/device/DVR/record' })
|
||||
} else if (e.text === '告警') {
|
||||
uni.navigateTo({ url: '/pages/device/DVR/report' })
|
||||
} else if (e.text === '关于') {
|
||||
uni.navigateTo({ url: '/pages/device/DVR/about' })
|
||||
} else if (e.text === '移交') {
|
||||
uni.navigateTo({ url: '/pages/device/transfer' })
|
||||
} else if (e.text === '反馈') {
|
||||
uni.navigateTo({ url: '/pages/device/feedback' })
|
||||
} else if (e.text === '用户') {
|
||||
uni.navigateTo({ url: '/pages/device/user' })
|
||||
} else if (e.text === '接入') {
|
||||
manualAccess({ nDid: this.pageOptions.ndid }).then((res) => {
|
||||
this.$util.toast(res.message)
|
||||
})
|
||||
}
|
||||
// this.$refs.fab.close()
|
||||
},
|
||||
navMenuClick(idx) {
|
||||
this.navMenuActive = idx
|
||||
uni.pageScrollTo({ scrollTop: 0, duration: 0 })
|
||||
},
|
||||
init() {
|
||||
let userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||||
console.log(userInfo.authorities)
|
||||
switch (userInfo.authorities) {
|
||||
case 1:
|
||||
this.content.splice(
|
||||
0,
|
||||
0,
|
||||
{
|
||||
iconPath: '/static/version.png',
|
||||
text: '版本',
|
||||
},
|
||||
{
|
||||
iconPath: '/static/template.png',
|
||||
text: '模版',
|
||||
},
|
||||
)
|
||||
break
|
||||
case 3:
|
||||
this.content.splice(1, 0, {
|
||||
iconPath: '/static/transfer.png',
|
||||
text: '移交',
|
||||
})
|
||||
break
|
||||
case 4:
|
||||
this.content.splice(
|
||||
0,
|
||||
0,
|
||||
{
|
||||
iconPath: '/static/subordinate.png',
|
||||
text: '用户',
|
||||
},
|
||||
{
|
||||
iconPath: '/static/delate.png',
|
||||
text: '删除',
|
||||
},
|
||||
)
|
||||
break
|
||||
case 5:
|
||||
this.content.push({
|
||||
iconPath: '/static/feedback.png',
|
||||
text: '反馈',
|
||||
})
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
setTimeout(() => {
|
||||
// 获取nav高度
|
||||
uni.createSelectorQuery()
|
||||
.select('.nav')
|
||||
.boundingClientRect((rect) => {
|
||||
this.navHeight = rect.height
|
||||
})
|
||||
.exec()
|
||||
}, 1000)
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.pageOptions = options
|
||||
this.init()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.detail {
|
||||
|
||||
// background: $uni-theme-white;
|
||||
.header {}
|
||||
|
||||
.des {
|
||||
padding: 20rpx 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
// .nav {
|
||||
// position: sticky;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// padding-top: 20rpx;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// background: rgb(243, 244, 245);
|
||||
|
||||
// .nav-menu {
|
||||
// padding: 10rpx 20rpx;
|
||||
// margin-left: 20rpx;
|
||||
// margin-bottom: 20rpx;
|
||||
// font-size: 28rpx;
|
||||
// border-radius: 8rpx;
|
||||
// background: $uni-theme-white;
|
||||
|
||||
// &-active {
|
||||
// background: $uni-theme-color;
|
||||
// color: #fff;
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
background: #f3f4f5;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .uni-fab__circle--rightBottom {
|
||||
right: 8px !important;
|
||||
bottom: 8px !important;
|
||||
}
|
||||
|
||||
/deep/ .uni-fab--rightBottom {
|
||||
right: 8px !important;
|
||||
bottom: 8px !important;
|
||||
}
|
||||
|
||||
/deep/ .uni-fab__circle {
|
||||
width: 50px;
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
/deep/ .uni-fab__content--flexDirectionEnd {
|
||||
width: 50px !important;
|
||||
// height: 50px !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<Cn-page :loading="loading" noPadding>
|
||||
<view slot="body">
|
||||
<view class="detail">
|
||||
<view class="detail-header">
|
||||
<view class="header">
|
||||
<image
|
||||
src="http://localhost:8088/api/system-boot/file/download?filePath=topology/1aca98ceb22a1fc33b81d9101275ef1.png"
|
||||
mode="widthFix" style="width: 100%" />
|
||||
</view>
|
||||
<!-- <view class="des">
|
||||
<text>设备基础信息</text>
|
||||
<text class="ml10">设备状态</text>
|
||||
</view> -->
|
||||
<view class="nav">
|
||||
<view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
|
||||
v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text
|
||||
}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<DianWang v-if="navMenuActive == 0"></DianWang>
|
||||
<NiBian v-else-if="navMenuActive == 1"></NiBian>
|
||||
<ShuChu v-else-if="navMenuActive == 2"></ShuChu>
|
||||
<GanJieDian v-else-if="navMenuActive == 3"></GanJieDian>
|
||||
<ZhuangTaiLiang v-else-if="navMenuActive == 4"> </ZhuangTaiLiang>
|
||||
<QiTa v-else-if="navMenuActive == 5"></QiTa>
|
||||
<view style="height: 20rpx"></view>
|
||||
</view>
|
||||
<!-- <uni-fab
|
||||
ref="fab"
|
||||
direction="vertical"
|
||||
horizontal="right"
|
||||
vertical="bottom"
|
||||
:content="content"
|
||||
@trigger="trigger"
|
||||
/> -->
|
||||
<hover-menu :btnList="content" @trigger='trigger'></hover-menu>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
</template>
|
||||
<script>
|
||||
import DianWang from './comp/dianWang.vue'
|
||||
import NiBian from './comp/niBian.vue'
|
||||
import ShuChu from './comp/shuChu.vue'
|
||||
import GanJieDian from './comp/ganJieDian.vue'
|
||||
import ZhuangTaiLiang from './comp/zhuangTaiLiang.vue'
|
||||
import QiTa from './comp/qiTa.vue'
|
||||
import { manualAccess } from '@/common/api/accessBoot'
|
||||
import hoverMenu from '@/hover-menu/components/hover-menu/hover-menu.vue';
|
||||
export default {
|
||||
components: {
|
||||
DianWang,
|
||||
NiBian,
|
||||
ShuChu,
|
||||
GanJieDian,
|
||||
ZhuangTaiLiang,
|
||||
QiTa,
|
||||
hoverMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
navMenuActive: 0,
|
||||
navHeight: 0,
|
||||
pageOptions: {},
|
||||
|
||||
navMenuList: [
|
||||
{
|
||||
text: '电网数据',
|
||||
},
|
||||
{
|
||||
text: '逆变数据',
|
||||
},
|
||||
{
|
||||
text: '输出数据',
|
||||
},
|
||||
{
|
||||
text: '干接点',
|
||||
},
|
||||
{
|
||||
text: '状态量',
|
||||
},
|
||||
{
|
||||
text: '其他',
|
||||
},
|
||||
],
|
||||
content: [
|
||||
{
|
||||
iconPath: '/static/report.png',
|
||||
text: '详情',
|
||||
},
|
||||
// {
|
||||
// iconPath: '/static/record.png',
|
||||
// text: '记录',
|
||||
// },
|
||||
{
|
||||
iconPath: '/static/about.png',
|
||||
text: '关于',
|
||||
},
|
||||
// {
|
||||
// iconPath: '/static/access.png',
|
||||
// text: '接入',
|
||||
// },
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
trigger(e) {
|
||||
console.log(e)
|
||||
if (e.text === '分享') {
|
||||
this.$refs.share.open()
|
||||
} else if (e.text === '删除') {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定删除该设备吗？',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定')
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
} else if (e.text === '下载') {
|
||||
this.$util.toast('下载成功')
|
||||
} else if (e.text === '记录') {
|
||||
uni.navigateTo({ url: '/pages/device/DVR/record' })
|
||||
} else if (e.text === '详情') {
|
||||
uni.navigateTo({ url: '/pages/device/DVR/report' })
|
||||
} else if (e.text === '关于') {
|
||||
uni.navigateTo({ url: '/pages/device/DVR/about' })
|
||||
} else if (e.text === '移交') {
|
||||
uni.navigateTo({ url: '/pages/device/transfer' })
|
||||
} else if (e.text === '反馈') {
|
||||
uni.navigateTo({ url: '/pages/device/feedback' })
|
||||
} else if (e.text === '用户') {
|
||||
uni.navigateTo({ url: '/pages/device/user' })
|
||||
} else if (e.text === '接入') {
|
||||
manualAccess({ nDid: this.pageOptions.ndid }).then((res) => {
|
||||
this.$util.toast(res.message)
|
||||
})
|
||||
}
|
||||
// this.$refs.fab.close()
|
||||
},
|
||||
navMenuClick(idx) {
|
||||
this.navMenuActive = idx
|
||||
uni.pageScrollTo({ scrollTop: 0, duration: 0 })
|
||||
},
|
||||
init() {
|
||||
let userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||||
console.log(userInfo.authorities)
|
||||
switch (userInfo.authorities) {
|
||||
case 1:
|
||||
this.content.splice(
|
||||
0,
|
||||
0,
|
||||
{
|
||||
iconPath: '/static/version.png',
|
||||
text: '版本',
|
||||
},
|
||||
{
|
||||
iconPath: '/static/template.png',
|
||||
text: '模版',
|
||||
},
|
||||
)
|
||||
break
|
||||
case 3:
|
||||
this.content.splice(1, 0, {
|
||||
iconPath: '/static/transfer.png',
|
||||
text: '移交',
|
||||
})
|
||||
break
|
||||
case 4:
|
||||
this.content.splice(
|
||||
0,
|
||||
0,
|
||||
{
|
||||
iconPath: '/static/subordinate.png',
|
||||
text: '用户',
|
||||
},
|
||||
{
|
||||
iconPath: '/static/delate.png',
|
||||
text: '删除',
|
||||
},
|
||||
)
|
||||
break
|
||||
case 5:
|
||||
this.content.push({
|
||||
iconPath: '/static/feedback.png',
|
||||
text: '反馈',
|
||||
})
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
if (this.userInfo.authorities === 'operation_manager') {
|
||||
this.content.push({
|
||||
iconPath: '/static/access.png',
|
||||
text: '接入',
|
||||
})
|
||||
}
|
||||
setTimeout(() => {
|
||||
// 获取nav高度
|
||||
uni.createSelectorQuery()
|
||||
.select('.nav')
|
||||
.boundingClientRect((rect) => {
|
||||
this.navHeight = rect.height
|
||||
})
|
||||
.exec()
|
||||
}, 1000)
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.pageOptions = options
|
||||
this.init()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.detail {
|
||||
|
||||
// background: $uni-theme-white;
|
||||
.header {}
|
||||
|
||||
.des {
|
||||
padding: 20rpx 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
// .nav {
|
||||
// position: sticky;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// padding-top: 20rpx;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// background: rgb(243, 244, 245);
|
||||
|
||||
// .nav-menu {
|
||||
// padding: 10rpx 20rpx;
|
||||
// margin-left: 20rpx;
|
||||
// margin-bottom: 20rpx;
|
||||
// font-size: 28rpx;
|
||||
// border-radius: 8rpx;
|
||||
// background: $uni-theme-white;
|
||||
|
||||
// &-active {
|
||||
// background: $uni-theme-color;
|
||||
// color: #fff;
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
background: #f3f4f5;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .uni-fab__circle--rightBottom {
|
||||
right: 8px !important;
|
||||
bottom: 8px !important;
|
||||
}
|
||||
|
||||
/deep/ .uni-fab--rightBottom {
|
||||
right: 8px !important;
|
||||
bottom: 8px !important;
|
||||
}
|
||||
|
||||
/deep/ .uni-fab__circle {
|
||||
width: 50px;
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
/deep/ .uni-fab__content--flexDirectionEnd {
|
||||
width: 50px !important;
|
||||
// height: 50px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
@finished="initChart('echartV3', 'echartsDataV3')"
|
||||
></l-echart>
|
||||
</view>
|
||||
<view class="text"> 电压有效值 </view>
|
||||
<view class="text"> 电压有效值(kV) </view>
|
||||
</view>
|
||||
<view class="middle" style="width: 100%">
|
||||
<l-echart
|
||||
@@ -103,7 +103,7 @@
|
||||
@finished="initChart('echartA3', 'echartsDataA3')"
|
||||
></l-echart>
|
||||
</view>
|
||||
<view class="text"> 电压有效值 </view>
|
||||
<view class="text"> 电流有效值(A) </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -125,6 +125,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<hover-menu :btnList="content" @trigger="trigger"></hover-menu>
|
||||
</view>
|
||||
</Cn-page>
|
||||
</template>
|
||||
@@ -133,12 +134,14 @@ const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
|
||||
import { MQTT_IP, MQTT_OPTIONS } from '@/common/js/mqtt.js'
|
||||
import mqtt from 'mqtt/dist/mqtt.js'
|
||||
import { getBaseRealData } from '@/common/api/harmonic.js'
|
||||
import hoverMenu from '@/hover-menu/components/hover-menu/hover-menu.vue'
|
||||
export default {
|
||||
components: {},
|
||||
components: { hoverMenu },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
devId: '',
|
||||
// 使用上面定义的图表配置项
|
||||
option: {},
|
||||
echartsData0: {},
|
||||
@@ -183,30 +186,72 @@ export default {
|
||||
equipmentName: '',
|
||||
runStatus: 1,
|
||||
connection: false,
|
||||
content: [
|
||||
{
|
||||
iconPath: '/static/report.png',
|
||||
text: '详情',
|
||||
},
|
||||
{
|
||||
iconPath: '/static/about.png',
|
||||
text: '关于',
|
||||
},
|
||||
],
|
||||
isPrimaryUser: 0,
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log('🚀 ~ options:', options)
|
||||
this.lineKey = 0
|
||||
this.devId = options.id
|
||||
this.lineList = JSON.parse(options.lineList)
|
||||
this.lineId = this.lineList[0].lineId
|
||||
this.engineeringName = options.engineeringName
|
||||
this.equipmentName = options.equipmentName
|
||||
this.runStatus = options.runStatus
|
||||
this.isPrimaryUser = options.isPrimaryUser
|
||||
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||||
this.echartsData0 = this.initEcharts0()
|
||||
this.echartsData1 = this.initEcharts1()
|
||||
this.echartsDataV1 = this.initEcharts('#DAA520', 0, 'A相(kV)')
|
||||
this.echartsDataV2 = this.initEcharts('#2E8B57', 0, 'B相(kV)')
|
||||
this.echartsDataV3 = this.initEcharts('#A52a2a', 0, 'C相(kV)')
|
||||
this.echartsDataA1 = this.initEcharts('#DAA520', 1, 'A相(A)')
|
||||
this.echartsDataA2 = this.initEcharts('#2E8B57', 1, 'B相(A)')
|
||||
this.echartsDataA3 = this.initEcharts('#A52a2a', 1, 'C相(A)')
|
||||
this.echartsDataV1 = this.initEcharts('#DAA520', 0, 'A相')
|
||||
this.echartsDataV2 = this.initEcharts('#2E8B57', 0, 'B相')
|
||||
this.echartsDataV3 = this.initEcharts('#A52a2a', 0, 'C相')
|
||||
this.echartsDataA1 = this.initEcharts('#DAA520', 1, 'A相')
|
||||
this.echartsDataA2 = this.initEcharts('#2E8B57', 1, 'B相')
|
||||
this.echartsDataA3 = this.initEcharts('#A52a2a', 1, 'C相')
|
||||
this.loading = false
|
||||
this.$nextTick(() => {
|
||||
this.setMqtt(0)
|
||||
this.initMqtt()
|
||||
})
|
||||
if (this.isPrimaryUser == 1) {
|
||||
this.content.splice(
|
||||
0,
|
||||
0,
|
||||
{
|
||||
iconPath: '/static/transfer.png',
|
||||
text: '移交',
|
||||
},
|
||||
{
|
||||
iconPath: '/static/feedback.png',
|
||||
text: '编辑',
|
||||
},
|
||||
{
|
||||
iconPath: '/static/delate.png',
|
||||
text: '删除',
|
||||
},
|
||||
)
|
||||
if (this.userInfo.authorities === 'app_vip_user') {
|
||||
this.content.splice(3, 0, {
|
||||
iconPath: '/static/share.png',
|
||||
text: '分享',
|
||||
})
|
||||
}
|
||||
}
|
||||
if (this.userInfo.authorities !== 'tourist') {
|
||||
this.content.splice(0, 0, {
|
||||
iconPath: '/static/subordinate.png',
|
||||
text: '用户',
|
||||
})
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
const charts = [
|
||||
@@ -623,7 +668,9 @@ export default {
|
||||
.then((res) => {
|
||||
if (res.code == 'A0000') {
|
||||
this.connection = true
|
||||
this.$util.toast(e == 0 ? '连接成功！' : '刷新成功！')
|
||||
setTimeout(() => {
|
||||
this.$util.toast(e == 0 ? '连接成功！' : '刷新成功！')
|
||||
}, 3000)
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
@@ -878,6 +925,46 @@ export default {
|
||||
await this.setMqtt(0)
|
||||
await this.initMqtt()
|
||||
},
|
||||
trigger(e) {
|
||||
console.log(e)
|
||||
if (e.text === '分享') {
|
||||
uni.navigateTo({ url: '/pages/device/share?id=' + this.lineId })
|
||||
} else if (e.text === '删除') {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定删除该设备吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定')
|
||||
deleteDevice(this.devId).then((res) => {
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'none',
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
} else if (e.text === '记录') {
|
||||
uni.navigateTo({ url: '/pages/device/APF/record' })
|
||||
} else if (e.text === '详情') {
|
||||
uni.navigateTo({ url: '/pages/device/APF/report?id=' + this.devId })
|
||||
} else if (e.text === '关于') {
|
||||
uni.navigateTo({ url: '/pages/device/APF/about?id=' + this.devId })
|
||||
} else if (e.text === '移交') {
|
||||
uni.navigateTo({ url: '/pages/device/transfer?id=' + this.devId })
|
||||
} else if (e.text === '反馈') {
|
||||
uni.navigateTo({ url: '/pages/device/feedback' })
|
||||
} else if (e.text === '用户') {
|
||||
uni.navigateTo({ url: '/pages/device/user?id=' + this.devId + '&isPrimaryUser=' + this.isPrimaryUser })
|
||||
}
|
||||
// this.$refs.fab.close()
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
@@ -990,7 +1077,7 @@ export default {
|
||||
}
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.text_center {
|
||||
position: absolute;
|
||||
|
||||
Reference in New Issue
Block a user