提交app
This commit is contained in:
guanj
@@ -1,379 +1,480 @@
|
||||
<template>
|
||||
<Cn-page :loading="loading">
|
||||
<template slot="body">
|
||||
<view class="device">
|
||||
<view class="nav" :style="{ top: navTabHeight + 'px' }">
|
||||
<view
|
||||
class="nav-menu"
|
||||
:class="{ 'nav-menu-active': select.engineeringName }"
|
||||
@click="selectEngineering"
|
||||
>{{ select.engineeringName || '全部工程' }}
|
||||
<uni-icons
|
||||
type="bottom"
|
||||
size="14"
|
||||
:color="select.engineeringName ? '#376cf3' : '#666'"
|
||||
></uni-icons>
|
||||
</view>
|
||||
<picker
|
||||
@change="projectNameChange"
|
||||
@cancel="select.selectProject = false"
|
||||
:value="select.projectNameIndex"
|
||||
:range="filterProjectList"
|
||||
range-key="text"
|
||||
v-if="select.engineeringId"
|
||||
>
|
||||
<view
|
||||
class="nav-menu"
|
||||
:class="{ 'nav-menu-active': select.projectName }"
|
||||
@click="select.selectProject = true"
|
||||
>
|
||||
{{
|
||||
select.projectName
|
||||
? select.projectName.length > 6
|
||||
? select.projectName.substring(0, 6) + '...'
|
||||
: select.projectName
|
||||
: '全部项目'
|
||||
}}
|
||||
<uni-icons
|
||||
type="top"
|
||||
size="14"
|
||||
:color="select.projectName ? '#376cf3' : '#666'"
|
||||
v-if="select.selectProject"
|
||||
></uni-icons>
|
||||
<uni-icons
|
||||
type="bottom"
|
||||
size="14"
|
||||
:color="select.projectName ? '#376cf3' : '#666'"
|
||||
v-else
|
||||
></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
<picker
|
||||
@change="runStatusChange"
|
||||
@cancel="select.runStatusSelect = false"
|
||||
:value="select.runStatusIndex"
|
||||
:range="projectType"
|
||||
range-key="text"
|
||||
>
|
||||
<view
|
||||
class="nav-menu"
|
||||
:class="{ 'nav-menu-active': select.runStatusName }"
|
||||
@click="select.runStatusSelect = true"
|
||||
>
|
||||
{{
|
||||
select.runStatusName
|
||||
? select.runStatusName.length > 4
|
||||
? select.runStatusName.substring(0, 4) + '...'
|
||||
: select.runStatusName
|
||||
: '全部状态'
|
||||
}}
|
||||
<uni-icons
|
||||
type="top"
|
||||
size="14"
|
||||
:color="select.runStatusName ? '#376cf3' : '#666'"
|
||||
v-if="select.runStatusSelect"
|
||||
></uni-icons>
|
||||
<uni-icons
|
||||
type="bottom"
|
||||
size="14"
|
||||
:color="select.runStatusName ? '#376cf3' : '#666'"
|
||||
v-else
|
||||
></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
<view style="flex: 1"></view>
|
||||
<!-- <picker @change="runStatusChange" :value="select.projectTypeIndex" :range="projectType" range-key="text">
|
||||
<view class="nav-menu" :class="{ 'nav-menu-active': select.projectType }"
|
||||
>{{ select.projectType || '类型' }}
|
||||
</view>
|
||||
</picker> -->
|
||||
</view>
|
||||
<view class="content device" :style="{ minHeight: minHeight }">
|
||||
<Cn-device-card v-for="(item, index) in store.data" :device="item" :key="index"> </Cn-device-card>
|
||||
<uni-load-more
|
||||
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
||||
:status="store.status"
|
||||
></uni-load-more>
|
||||
<Cn-empty v-else></Cn-empty>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</Cn-page>
|
||||
</template>
|
||||
<script>
|
||||
import { getProjectList } from '@/common/api/project'
|
||||
import { queryDictData } from '@/common/api/dictionary'
|
||||
import list from '@/common/js/list'
|
||||
|
||||
export default {
|
||||
mixins: [list],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
transfer: false,
|
||||
share: false,
|
||||
checkList: [],
|
||||
select: {
|
||||
projectName: '',
|
||||
projectNameIndex: 0,
|
||||
projectSelect: false,
|
||||
engineeringName: '',
|
||||
engineeringId: '',
|
||||
runStatusName: '',
|
||||
runStatusIndex: 0,
|
||||
runStatusSelect: false,
|
||||
},
|
||||
minHeight: 0,
|
||||
navTabHeight: 0,
|
||||
engineeringList: [],
|
||||
projectList: [],
|
||||
projectType: [
|
||||
{
|
||||
text: '全部',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
text: '离线',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: '在线',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
pageOptions: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val, oldVal) {
|
||||
if (this.loading) return
|
||||
this.store.params.projectId =
|
||||
val.projectNameIndex === 0 ? '' : this.filterProjectList[val.projectNameIndex].value
|
||||
this.store.params.runStatus = val.runStatusIndex === 0 ? '' : this.projectType[val.runStatusIndex].value
|
||||
this.store.params.engineerId = val.engineeringId || ''
|
||||
this.store.reload()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
filterProjectList() {
|
||||
return this.projectList.filter(
|
||||
(item) => item.engineeringId === this.select.engineeringId || item.value === '-1',
|
||||
)
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
let engineering = uni.getStorageSync('engineering')
|
||||
this.pageOptions = options
|
||||
switch (options.type) {
|
||||
case 'onLineDevs':
|
||||
this.select.runStatusIndex = 2
|
||||
this.select.runStatusName = '在线'
|
||||
break
|
||||
case 'offLineDevs':
|
||||
this.select.runStatusIndex = 1
|
||||
this.select.runStatusName = '离线'
|
||||
break
|
||||
case 'currentOnLineDevs':
|
||||
this.select.runStatusIndex = 2
|
||||
this.select.engineeringName = engineering.name
|
||||
this.select.engineeringId = engineering.id
|
||||
this.select.runStatusName = '在线'
|
||||
break
|
||||
case 'currentOffLineDevs':
|
||||
this.select.runStatusIndex = 1
|
||||
this.select.engineeringName = engineering.name
|
||||
this.select.engineeringId = engineering.id
|
||||
this.select.runStatusName = '离线'
|
||||
break
|
||||
case 'allEngineering':
|
||||
this.select.engineeringName = ''
|
||||
this.select.engineeringId = ''
|
||||
break
|
||||
case 'nowEngineering':
|
||||
this.select.engineeringName = engineering.name
|
||||
this.select.engineeringId = engineering.id
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
this.init()
|
||||
},
|
||||
onShow() {
|
||||
let engineering = uni.getStorageSync('onceSelectEngineering')
|
||||
if (engineering) {
|
||||
uni.removeStorageSync('onceSelectEngineering')
|
||||
this.select.engineeringId = engineering.id
|
||||
this.select.engineeringName = engineering.name
|
||||
this.select.projectNameIndex = 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectEngineering() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/home/selectEngineering?from=once',
|
||||
})
|
||||
},
|
||||
deviceIcon(e) {
|
||||
let str = ''
|
||||
switch (e) {
|
||||
case 1:
|
||||
str = '/static/device_bad.png'
|
||||
break
|
||||
case 2:
|
||||
str = '/static/device.png'
|
||||
break
|
||||
default:
|
||||
str = '/static/device.png'
|
||||
break
|
||||
}
|
||||
return str
|
||||
},
|
||||
switchChange(e) {
|
||||
console.log(e)
|
||||
let index = this.checkList.indexOf(e.equipmentId)
|
||||
if (index > -1) {
|
||||
this.checkList.splice(index, 1)
|
||||
} else {
|
||||
this.checkList.push(e.equipmentId)
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.transfer = false
|
||||
this.share = false
|
||||
this.checkList = []
|
||||
},
|
||||
submit() {
|
||||
console.log(this.checkList)
|
||||
if (this.checkList.length === 0) {
|
||||
this.$util.toast('请选择设备')
|
||||
return
|
||||
}
|
||||
if (this.transfer) {
|
||||
uni.navigateTo({ url: '/pages/device/transfer?id=' + this.checkList.join(',') })
|
||||
} else if (this.share) {
|
||||
uni.navigateTo({ url: '/pages/device/share?id=' + this.checkList.join(',') })
|
||||
}
|
||||
this.cancel()
|
||||
},
|
||||
async init() {
|
||||
console.warn('init')
|
||||
this.getEngineeringList()
|
||||
this.getProjectList()
|
||||
this.getDeviceList()
|
||||
},
|
||||
getDeviceList() {
|
||||
this.store = this.DataSource('/cs-device-boot/EquipmentDelivery/queryEquipmentByProject')
|
||||
this.store.params.engineerId = this.select.engineeringId
|
||||
this.store.params.runStatus =
|
||||
this.select.runStatusIndex === 0 ? '' : this.projectType[this.select.runStatusIndex].value
|
||||
this.store.params.pageSize = 50
|
||||
this.store.firstCallBack = (res) => {
|
||||
this.loading = false
|
||||
uni.createSelectorQuery()
|
||||
.select('.uni-navbar')
|
||||
.boundingClientRect((rect1) => {
|
||||
if (!rect1) return
|
||||
this.navTabHeight = rect1.height
|
||||
uni.createSelectorQuery()
|
||||
.select('.nav')
|
||||
.boundingClientRect((rect2) => {
|
||||
if (!rect2) return
|
||||
// #ifdef H5
|
||||
this.minHeight = 'calc(100vh - ' + (this.navTabHeight + rect2.height + 50) + 'px)'
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
this.minHeight = 'calc(100vh - ' + (this.navTabHeight + rect2.height) + 'px)'
|
||||
console.log(this.minHeight)
|
||||
// #endif
|
||||
})
|
||||
.exec()
|
||||
})
|
||||
.exec()
|
||||
}
|
||||
this.store.reload()
|
||||
},
|
||||
getProjectList() {
|
||||
this.projectList = uni.getStorageSync('projectList')
|
||||
},
|
||||
getEngineeringList() {
|
||||
this.engineeringList = uni.getStorageSync('engineeringList')
|
||||
},
|
||||
queryDictData() {
|
||||
queryDictData('项目类型').then((res) => {
|
||||
this.projectType = [
|
||||
{
|
||||
text: '全部类型',
|
||||
value: '',
|
||||
},
|
||||
...res.data.map((item) => {
|
||||
return {
|
||||
text: item.anotherName,
|
||||
value: item.id,
|
||||
}
|
||||
}),
|
||||
]
|
||||
})
|
||||
},
|
||||
submitFeedBack() {
|
||||
uni.navigateTo({ url: '/pages/home/feedback' })
|
||||
},
|
||||
runStatusChange(e) {
|
||||
this.select.runStatusSelect = false
|
||||
this.select.runStatusIndex = e.detail.value
|
||||
if (e.detail.value === 0) {
|
||||
this.select.runStatusName = ''
|
||||
return
|
||||
}
|
||||
this.select.runStatusName = this.projectType[e.detail.value].text
|
||||
},
|
||||
projectNameChange(e) {
|
||||
this.select.selectProject = false
|
||||
console.log(e)
|
||||
this.select.projectNameIndex = e.detail.value
|
||||
if (e.detail.value === 0) {
|
||||
this.select.projectName = ''
|
||||
return
|
||||
}
|
||||
this.select.projectName = this.projectList[e.detail.value].text
|
||||
},
|
||||
registerDevice() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请选择设备类型',
|
||||
confirmText: '直连设备',
|
||||
cancelText: '网关接入',
|
||||
cancelColor: '#007aff',
|
||||
success: ({ confirm, cancel }) => {
|
||||
if (confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/device/new',
|
||||
})
|
||||
} else if (cancel) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/gateway/list',
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
registerGateway() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/gateway/new',
|
||||
})
|
||||
},
|
||||
navMenuClick(index) {
|
||||
this.navMenuActive = index
|
||||
},
|
||||
jump(item) {
|
||||
console.log(12321,item);
|
||||
uni.navigateTo({
|
||||
url: '/pages/device/APF/detail?id=' + item.equipmentId + '&isPrimaryUser=' + item.isPrimaryUser + '&ndid=' + item.ndid,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
<template>
|
||||
<Cn-page :loading="loading">
|
||||
<template slot="body">
|
||||
<view class="device">
|
||||
<view class="nav" :style="{ top: navTabHeight + 'px' }">
|
||||
<view
|
||||
class="nav-menu"
|
||||
:class="{ 'nav-menu-active': select.engineeringName }"
|
||||
@click="selectEngineering"
|
||||
>{{ select.engineeringName || '全部工程' }}
|
||||
<uni-icons
|
||||
type="bottom"
|
||||
size="14"
|
||||
:color="select.engineeringName ? '#376cf3' : '#666'"
|
||||
></uni-icons>
|
||||
</view>
|
||||
<picker
|
||||
@change="projectNameChange"
|
||||
@cancel="select.selectProject = false"
|
||||
:value="select.projectNameIndex"
|
||||
:range="filterProjectList"
|
||||
range-key="text"
|
||||
v-if="select.engineeringId"
|
||||
>
|
||||
<view
|
||||
class="nav-menu"
|
||||
:class="{ 'nav-menu-active': select.projectName }"
|
||||
@click="select.selectProject = true"
|
||||
>
|
||||
{{
|
||||
select.projectName
|
||||
? select.projectName.length > 6
|
||||
? select.projectName.substring(0, 6) + '...'
|
||||
: select.projectName
|
||||
: '全部项目'
|
||||
}}
|
||||
<uni-icons
|
||||
type="top"
|
||||
size="14"
|
||||
:color="select.projectName ? '#376cf3' : '#666'"
|
||||
v-if="select.selectProject"
|
||||
></uni-icons>
|
||||
<uni-icons
|
||||
type="bottom"
|
||||
size="14"
|
||||
:color="select.projectName ? '#376cf3' : '#666'"
|
||||
v-else
|
||||
></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
<picker
|
||||
@change="runStatusChange"
|
||||
@cancel="select.runStatusSelect = false"
|
||||
:value="select.runStatusIndex"
|
||||
:range="projectType"
|
||||
range-key="text"
|
||||
>
|
||||
<view
|
||||
class="nav-menu"
|
||||
:class="{ 'nav-menu-active': select.runStatusName }"
|
||||
@click="select.runStatusSelect = true"
|
||||
>
|
||||
{{
|
||||
select.runStatusName
|
||||
? select.runStatusName.length > 4
|
||||
? select.runStatusName.substring(0, 4) + '...'
|
||||
: select.runStatusName
|
||||
: '全部状态'
|
||||
}}
|
||||
<uni-icons
|
||||
type="top"
|
||||
size="14"
|
||||
:color="select.runStatusName ? '#376cf3' : '#666'"
|
||||
v-if="select.runStatusSelect"
|
||||
></uni-icons>
|
||||
<uni-icons
|
||||
type="bottom"
|
||||
size="14"
|
||||
:color="select.runStatusName ? '#376cf3' : '#666'"
|
||||
v-else
|
||||
></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="nav" style="padding: 0 10px !important">
|
||||
<view style="flex: 1"></view>
|
||||
<template v-if="transfer || share">
|
||||
<view class="nav-menu nav-menu-btn" @click="cancel">取消</view>
|
||||
<view class="nav-menu nav-menu-btn" @click="submit">确定</view>
|
||||
</template>
|
||||
<template v-else-if="store.data.length">
|
||||
<view
|
||||
class="nav-menu nav-menu-btn"
|
||||
@click="selectDevice('transfer')"
|
||||
v-if="
|
||||
userInfo.authorities === 'app_vip_user' || userInfo.authorities === 'engineering_user'
|
||||
"
|
||||
>移交
|
||||
</view>
|
||||
<view
|
||||
class="nav-menu nav-menu-btn"
|
||||
@click="selectDevice('share')"
|
||||
v-if="userInfo.authorities === 'app_vip_user'"
|
||||
>分享
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<view class="content device" :style="{ minHeight: minHeight }">
|
||||
<Cn-device-card v-for="(item, index) in store.data" :device="item" :key="index">
|
||||
<template v-slot:title>
|
||||
<!-- 卡片标题 -->
|
||||
|
||||
<switch
|
||||
v-if="transfer || share"
|
||||
:checked="checkList.indexOf(item.equipmentId) > -1"
|
||||
style="transform: scale(0.8); position: relative; left: 20rpx"
|
||||
@change="switchChange(item)"
|
||||
/>
|
||||
<view class="star-icon" v-else @click="toggleStar(item)">
|
||||
<uni-icons
|
||||
custom-prefix="custom-icon"
|
||||
:type="item.isTop == 1 ? 'star-filled' : 'star'"
|
||||
:color="item.isTop == 1 ? '#ffcc00' : ''"
|
||||
size="25"
|
||||
></uni-icons>
|
||||
</view>
|
||||
</template>
|
||||
</Cn-device-card>
|
||||
<uni-load-more
|
||||
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
||||
:status="store.status"
|
||||
></uni-load-more>
|
||||
<Cn-empty v-else></Cn-empty>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</Cn-page>
|
||||
</template>
|
||||
<script>
|
||||
import { getProjectList } from '@/common/api/project'
|
||||
import { queryDictData } from '@/common/api/dictionary'
|
||||
import list from '@/common/js/list'
|
||||
import { engineeringPinToTop } from '@/common/api/device'
|
||||
export default {
|
||||
mixins: [list],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
transfer: false,
|
||||
share: false,
|
||||
checkList: [],
|
||||
select: {
|
||||
projectName: '',
|
||||
projectNameIndex: 0,
|
||||
projectSelect: false,
|
||||
engineeringName: '',
|
||||
engineeringId: '',
|
||||
runStatusName: '',
|
||||
runStatusIndex: 0,
|
||||
runStatusSelect: false,
|
||||
},
|
||||
userInfo: {},
|
||||
minHeight: 0,
|
||||
navTabHeight: 0,
|
||||
engineeringList: [],
|
||||
projectList: [],
|
||||
projectType: [
|
||||
{
|
||||
text: '全部',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
text: '离线',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: '在线',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
pageOptions: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val, oldVal) {
|
||||
if (this.loading) return
|
||||
this.store.params.projectId =
|
||||
val.projectNameIndex === 0 ? '' : this.filterProjectList[val.projectNameIndex].value
|
||||
this.store.params.runStatus = val.runStatusIndex === 0 ? '' : this.projectType[val.runStatusIndex].value
|
||||
this.store.params.engineerId = val.engineeringId || ''
|
||||
this.store.reload()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
filterProjectList() {
|
||||
return this.projectList.filter(
|
||||
(item) => item.engineeringId === this.select.engineeringId || item.value === '-1',
|
||||
)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||||
},
|
||||
onLoad(options) {
|
||||
let engineering = uni.getStorageSync('engineering')
|
||||
this.pageOptions = options
|
||||
switch (options.type) {
|
||||
case 'onLineDevs':
|
||||
this.select.runStatusIndex = 2
|
||||
this.select.runStatusName = '在线'
|
||||
break
|
||||
case 'offLineDevs':
|
||||
this.select.runStatusIndex = 1
|
||||
this.select.runStatusName = '离线'
|
||||
break
|
||||
case 'currentOnLineDevs':
|
||||
this.select.runStatusIndex = 2
|
||||
this.select.engineeringName = engineering.name
|
||||
this.select.engineeringId = engineering.id
|
||||
this.select.runStatusName = '在线'
|
||||
break
|
||||
case 'currentOffLineDevs':
|
||||
this.select.runStatusIndex = 1
|
||||
this.select.engineeringName = engineering.name
|
||||
this.select.engineeringId = engineering.id
|
||||
this.select.runStatusName = '离线'
|
||||
break
|
||||
case 'allEngineering':
|
||||
this.select.engineeringName = ''
|
||||
this.select.engineeringId = ''
|
||||
break
|
||||
case 'nowEngineering':
|
||||
this.select.engineeringName = engineering.name
|
||||
this.select.engineeringId = engineering.id
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
this.init()
|
||||
},
|
||||
onShow() {
|
||||
let engineering = uni.getStorageSync('onceSelectEngineering')
|
||||
if (engineering) {
|
||||
uni.removeStorageSync('onceSelectEngineering')
|
||||
this.select.engineeringId = engineering.id
|
||||
this.select.engineeringName = engineering.name
|
||||
this.select.projectNameIndex = 0
|
||||
this.getProjectList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectEngineering() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/home/selectEngineering?from=once',
|
||||
})
|
||||
},
|
||||
deviceIcon(e) {
|
||||
let str = ''
|
||||
switch (e) {
|
||||
case 1:
|
||||
str = '/static/device_bad.png'
|
||||
break
|
||||
case 2:
|
||||
str = '/static/device.png'
|
||||
break
|
||||
default:
|
||||
str = '/static/device.png'
|
||||
break
|
||||
}
|
||||
return str
|
||||
},
|
||||
switchChange(e) {
|
||||
console.log(e)
|
||||
let index = this.checkList.indexOf(e.equipmentId)
|
||||
if (index > -1) {
|
||||
this.checkList.splice(index, 1)
|
||||
} else {
|
||||
this.checkList.push(e.equipmentId)
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.transfer = false
|
||||
this.share = false
|
||||
this.checkList = []
|
||||
},
|
||||
submit() {
|
||||
console.log(this.checkList)
|
||||
if (this.checkList.length === 0) {
|
||||
this.$util.toast('请选择设备')
|
||||
return
|
||||
}
|
||||
if (this.transfer) {
|
||||
uni.navigateTo({ url: '/pages/device/transfer?id=' + this.checkList.join(',') })
|
||||
} else if (this.share) {
|
||||
uni.navigateTo({ url: '/pages/device/share?id=' + this.checkList.join(',') })
|
||||
}
|
||||
this.cancel()
|
||||
},
|
||||
async init() {
|
||||
console.warn('init')
|
||||
this.getEngineeringList()
|
||||
this.getProjectList()
|
||||
this.getDeviceList()
|
||||
},
|
||||
getDeviceList() {
|
||||
this.store = this.DataSource('/cs-device-boot/EquipmentDelivery/queryEquipmentByProject')
|
||||
this.store.params.engineerId = this.select.engineeringId
|
||||
this.store.params.runStatus =
|
||||
this.select.runStatusIndex === 0 ? '' : this.projectType[this.select.runStatusIndex].value
|
||||
this.store.params.pageSize = 50
|
||||
this.store.firstCallBack = (res) => {
|
||||
this.loading = false
|
||||
uni.createSelectorQuery()
|
||||
.select('.uni-navbar')
|
||||
.boundingClientRect((rect1) => {
|
||||
if (!rect1) return
|
||||
this.navTabHeight = rect1.height
|
||||
uni.createSelectorQuery()
|
||||
.select('.nav')
|
||||
.boundingClientRect((rect2) => {
|
||||
if (!rect2) return
|
||||
// #ifdef H5
|
||||
this.minHeight = 'calc(100vh - ' + (this.navTabHeight + rect2.height + 50) + 'px)'
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
this.minHeight = 'calc(100vh - ' + (this.navTabHeight + rect2.height) + 'px)'
|
||||
console.log(this.minHeight)
|
||||
// #endif
|
||||
})
|
||||
.exec()
|
||||
})
|
||||
.exec()
|
||||
}
|
||||
this.store.reload()
|
||||
},
|
||||
|
||||
getProjectList() {
|
||||
getProjectList({
|
||||
pageNum: 1,
|
||||
pageSize: 9999,
|
||||
engineeringId: this.select.engineeringId,
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
let arr = [
|
||||
{
|
||||
text: '全部项目',
|
||||
value: '-1',
|
||||
},
|
||||
...res.data.records.map((item) => {
|
||||
return {
|
||||
text: item.name,
|
||||
value: item.id,
|
||||
...item,
|
||||
}
|
||||
}),
|
||||
]
|
||||
this.projectList = arr
|
||||
uni.setStorageSync('projectList', arr)
|
||||
})
|
||||
},
|
||||
getEngineeringList() {
|
||||
this.engineeringList = uni.getStorageSync('engineeringList')
|
||||
},
|
||||
queryDictData() {
|
||||
queryDictData('项目类型').then((res) => {
|
||||
this.projectType = [
|
||||
{
|
||||
text: '全部类型',
|
||||
value: '',
|
||||
},
|
||||
...res.data.map((item) => {
|
||||
return {
|
||||
text: item.anotherName,
|
||||
value: item.id,
|
||||
}
|
||||
}),
|
||||
]
|
||||
})
|
||||
},
|
||||
submitFeedBack() {
|
||||
uni.navigateTo({ url: '/pages/home/feedback' })
|
||||
},
|
||||
runStatusChange(e) {
|
||||
this.select.runStatusSelect = false
|
||||
this.select.runStatusIndex = e.detail.value
|
||||
if (e.detail.value === 0) {
|
||||
this.select.runStatusName = ''
|
||||
return
|
||||
}
|
||||
this.select.runStatusName = this.projectType[e.detail.value].text
|
||||
},
|
||||
projectNameChange(e) {
|
||||
this.select.selectProject = false
|
||||
console.log(e)
|
||||
this.select.projectNameIndex = e.detail.value
|
||||
if (e.detail.value === 0) {
|
||||
this.select.projectName = ''
|
||||
return
|
||||
}
|
||||
this.select.projectName = this.projectList[e.detail.value].text
|
||||
},
|
||||
registerDevice() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请选择设备类型',
|
||||
confirmText: '直连设备',
|
||||
cancelText: '网关接入',
|
||||
cancelColor: '#007aff',
|
||||
success: ({ confirm, cancel }) => {
|
||||
if (confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/device/new',
|
||||
})
|
||||
} else if (cancel) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/gateway/list',
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
registerGateway() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/gateway/new',
|
||||
})
|
||||
},
|
||||
navMenuClick(index) {
|
||||
this.navMenuActive = index
|
||||
},
|
||||
jump(item) {
|
||||
console.log(12321, item)
|
||||
uni.navigateTo({
|
||||
url:
|
||||
'/pages/device/APF/detail?id=' +
|
||||
item.equipmentId +
|
||||
'&isPrimaryUser=' +
|
||||
item.isPrimaryUser +
|
||||
'&ndid=' +
|
||||
item.ndid,
|
||||
})
|
||||
},
|
||||
selectDevice(type) {
|
||||
if (this.store.data.findIndex((item) => item.isPrimaryUser === '1') === -1) {
|
||||
this.$util.toast('没有可操作的设备')
|
||||
} else {
|
||||
this[type] = true
|
||||
}
|
||||
},
|
||||
switchChange(e) {
|
||||
let index = this.checkList.indexOf(e.equipmentId)
|
||||
if (index > -1) {
|
||||
this.checkList.splice(index, 1)
|
||||
} else {
|
||||
this.checkList.push(e.equipmentId)
|
||||
}
|
||||
},
|
||||
toggleStar(item) {
|
||||
engineeringPinToTop({
|
||||
targetId: item.equipmentId,
|
||||
targetType: 1,
|
||||
userId: uni.getStorageSync(this.$cacheKey.userInfo).userIndex,
|
||||
}).then((res) => {
|
||||
if (res.code == 'A0000') {
|
||||
this.$util.toast('操作成功!')
|
||||
this.store.search()
|
||||
}else{
|
||||
this.$util.toast(res.message)
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
|
||||
988
pages/device/realTime/index.vue
Normal file
988
pages/device/realTime/index.vue
Normal file
@@ -0,0 +1,988 @@
|
||||
<template>
|
||||
<Cn-page :loading="loading" noPadding>
|
||||
<view slot="body">
|
||||
<view class="realTime">
|
||||
<!-- 头部卡片 -->
|
||||
<view class="info-card-wrap">
|
||||
<view class="info-card">
|
||||
<view class="info-item">
|
||||
监测点名称：<view
|
||||
><picker
|
||||
@change="lineChange"
|
||||
@cancel="selectProject = false"
|
||||
:value="lineId"
|
||||
:range="lineList"
|
||||
range-key="name"
|
||||
>
|
||||
<view class="nav-menu" @click="selectProject = true">
|
||||
{{ lineList[lineKey].name }}
|
||||
|
||||
<uni-icons type="bottom" size="18" color="#fff"></uni-icons>
|
||||
</view> </picker
|
||||
></view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
所属工程：<view>{{ engineeringName }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
所属项目：<view>{{ equipmentName }}</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item status">
|
||||
通讯状态：<view
|
||||
class="status-normal"
|
||||
:style="{ color: runStatus == 1 ? '#ff3b30' : '#00ff88' }"
|
||||
>{{ runStatus == 1 ? '离线' : '在线' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="time-bar">
|
||||
<view class="time">
|
||||
<u-icon name="clock" size="36"></u-icon>
|
||||
<text>{{ realTime }}</text>
|
||||
</view>
|
||||
<button class="mini-btn" type="primary" :disabled="disabled" size="mini" @click="handleRefresh">
|
||||
{{ disabled ? `刷新(${countdown}s)` : '刷新' }}
|
||||
</button>
|
||||
</view>
|
||||
<!-- 仪表盘 -->
|
||||
<view>
|
||||
<view class="chartBox">
|
||||
<view>
|
||||
<view class="chart">
|
||||
<l-echart
|
||||
ref="echartV1"
|
||||
@finished="initChart('echartV1', 'echartsDataV1')"
|
||||
></l-echart>
|
||||
</view>
|
||||
<view class="chart">
|
||||
<l-echart
|
||||
ref="echartV2"
|
||||
@finished="initChart('echartV2', 'echartsDataV2')"
|
||||
></l-echart>
|
||||
</view>
|
||||
<view class="chart">
|
||||
<l-echart
|
||||
ref="echartV3"
|
||||
@finished="initChart('echartV3', 'echartsDataV3')"
|
||||
></l-echart>
|
||||
</view>
|
||||
<view class="text"> 电压有效值 </view>
|
||||
</view>
|
||||
<view class="middle" style="width: 100%">
|
||||
<l-echart
|
||||
class="echart1"
|
||||
ref="echart0"
|
||||
@finished="initChart('echart0', 'echartsData0')"
|
||||
></l-echart>
|
||||
<l-echart
|
||||
class="echart1"
|
||||
ref="echart1"
|
||||
@finished="initChart('echart1', 'echartsData1')"
|
||||
></l-echart>
|
||||
<view class="text text_center"> 基波电压/电流<br />幅值(相位) </view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="chart">
|
||||
<l-echart
|
||||
ref="echartA1"
|
||||
@finished="initChart('echartA1', 'echartsDataA1')"
|
||||
></l-echart>
|
||||
</view>
|
||||
<view class="chart">
|
||||
<l-echart
|
||||
ref="echartA2"
|
||||
@finished="initChart('echartA2', 'echartsDataA2')"
|
||||
></l-echart>
|
||||
</view>
|
||||
<view class="chart">
|
||||
<l-echart
|
||||
ref="echartA3"
|
||||
@finished="initChart('echartA3', 'echartsDataA3')"
|
||||
></l-echart>
|
||||
</view>
|
||||
<view class="text"> 电压有效值 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部数据表格 -->
|
||||
<view class="data-table">
|
||||
<view class="table-header">
|
||||
<text></text>
|
||||
<text>A相</text>
|
||||
<text>B相</text>
|
||||
<text>C相</text>
|
||||
</view>
|
||||
<view class="table-row" v-for="value in realTimeData">
|
||||
<text>{{ value.name }}</text>
|
||||
<text>{{ value.A }}</text>
|
||||
<text>{{ value.B }}</text>
|
||||
<text>{{ value.C }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
</template>
|
||||
<script>
|
||||
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'
|
||||
export default {
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
// 使用上面定义的图表配置项
|
||||
option: {},
|
||||
echartsData0: {},
|
||||
echartsData1: {},
|
||||
echartsDataV1: {},
|
||||
echartsDataV2: {},
|
||||
echartsDataV3: {},
|
||||
echartsDataA1: {},
|
||||
echartsDataA2: {},
|
||||
echartsDataA3: {},
|
||||
// 图表实例，用于后续操作
|
||||
echart0: null,
|
||||
echart1: null,
|
||||
echartV1: null,
|
||||
echartV2: null,
|
||||
echartV3: null,
|
||||
echartA1: null,
|
||||
echartA2: null,
|
||||
echartA3: null,
|
||||
ptName: 'star',
|
||||
client: null,
|
||||
timer: null,
|
||||
numTimer: null,
|
||||
userInfo: {},
|
||||
realTime: '',
|
||||
realTimeData: [
|
||||
{ name: '电压有效值(kV)', A: '/', B: '/', C: '/' },
|
||||
{ name: '电流有效值(A)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电压幅值(kV)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电压相位(°)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电流幅值(A)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电流相位(°)', A: '/', B: '/', C: '/' },
|
||||
{ name: '电压偏差(%)', A: '/', B: '/', C: '/' },
|
||||
{ name: '电压总谐波畸变率(%)', A: '/', B: '/', C: '/' },
|
||||
],
|
||||
disabled: false,
|
||||
countdown: 60,
|
||||
lineId: '00B78D00A87A1',
|
||||
lineKey: 0,
|
||||
lineList: [],
|
||||
engineeringName: '',
|
||||
equipmentName: '',
|
||||
runStatus: 1,
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log('🚀 ~ options:', options)
|
||||
this.lineKey = 0
|
||||
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.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.$nextTick(() => {
|
||||
this.setMqtt(0)
|
||||
this.initMqtt()
|
||||
})
|
||||
},
|
||||
onUnload() {
|
||||
const charts = [
|
||||
this.echart0,
|
||||
this.echart1,
|
||||
this.echartV1,
|
||||
this.echartV2,
|
||||
this.echartV3,
|
||||
this.echartA1,
|
||||
this.echartA2,
|
||||
this.echartA3,
|
||||
]
|
||||
charts.forEach((chart) => {
|
||||
if (chart && chart.dispose) {
|
||||
chart.dispose()
|
||||
chart = null
|
||||
}
|
||||
})
|
||||
clearInterval(this.timer)
|
||||
this.client.end()
|
||||
},
|
||||
|
||||
methods: {
|
||||
initEcharts0() {
|
||||
return {
|
||||
tooltip: { show: false },
|
||||
toolbox: {
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
// 外圈电压 内圈电流
|
||||
{
|
||||
zlevel: 2,
|
||||
name: '基波电流相位',
|
||||
type: 'gauge',
|
||||
// 表盘最小值
|
||||
min: 180,
|
||||
// 表盘最大值
|
||||
max: -180,
|
||||
// 表盘分割数
|
||||
splitNumber: 6,
|
||||
// 圆心位置
|
||||
center: ['50%', '50%'],
|
||||
// 半径
|
||||
radius: '60%',
|
||||
startAngle: 180,
|
||||
endAngle: -179.99,
|
||||
|
||||
// 指针方向
|
||||
clockWise: true,
|
||||
title: false,
|
||||
// 表盘外框
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: [
|
||||
[0.25, '#9D322D'],
|
||||
[0.5, '#9D322D'],
|
||||
[0.75, '#9D322D'],
|
||||
[1, '#9D322D'],
|
||||
],
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
// 表盘细分数
|
||||
axisTick: {
|
||||
show: true,
|
||||
splitNumber: 5,
|
||||
distance: 0,
|
||||
length: 4,
|
||||
lineStyle: {
|
||||
color: '#9D322D',
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
// 分割线
|
||||
splitLine: {
|
||||
show: true,
|
||||
length: 10,
|
||||
distance: 0,
|
||||
lineStyle: {
|
||||
color: '#9D322D',
|
||||
width: 2,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
// 分割线标识
|
||||
axisLabel: {
|
||||
show: true,
|
||||
distance: 2,
|
||||
fontSize: 10,
|
||||
formatter: function (v) {
|
||||
switch (v + '') {
|
||||
case '-180':
|
||||
return ''
|
||||
default:
|
||||
return v
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// 指针设置
|
||||
pointer: {
|
||||
icon: 'path://m368.01136,209.80637l173.00807,-193.72679c19.14653,-21.43943 50.16392,-21.43943 69.31045,0l172.93149,193.72679c1.22537,1.37213 1.22537,3.51607 0,4.8882l-47.63657,53.34133c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-113.65381,-127.26452c-1.91465,-2.14395 -5.20785,-0.60031 -5.20785,2.40122l0,731.94254c0,1.88667 -1.37855,3.43031 -3.06345,3.43031l-67.39579,0c-1.6849,0 -3.06345,-1.54364 -3.06345,-3.43031l0,-731.94254c0,-3.08728 -3.2932,-4.54517 -5.20785,-2.40122l-113.65381,127.26452c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-47.63657,-53.34133c-1.22537,-1.37213 -1.22537,-3.51607 0,-4.88819l0,-0.00001M539,861.23064h73v800h-73z',
|
||||
length: '90%',
|
||||
width: 15,
|
||||
opacity: 1,
|
||||
},
|
||||
detail: {
|
||||
show: false,
|
||||
},
|
||||
//数值位置
|
||||
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
name: 'A相',
|
||||
itemStyle: {
|
||||
color: '#DAA520',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: 'B相',
|
||||
itemStyle: {
|
||||
color: '#2E8B57',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: 'C相',
|
||||
itemStyle: {
|
||||
color: '#A52a2a',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
initEcharts1() {
|
||||
let _this = this
|
||||
let color = '#DAA520'
|
||||
return {
|
||||
tooltip: { show: false },
|
||||
toolbox: {
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
zlevel: 1,
|
||||
name: '基波电压相位',
|
||||
type: 'gauge',
|
||||
// 表盘最小值
|
||||
min: 180,
|
||||
// 表盘最大值
|
||||
max: -180,
|
||||
// 表盘分割数
|
||||
splitNumber: 6,
|
||||
// 圆心位置
|
||||
center: ['50%', '50%'],
|
||||
// 半径
|
||||
radius: '100%',
|
||||
startAngle: 180,
|
||||
endAngle: -179.99,
|
||||
|
||||
// 指针方向
|
||||
clockWise: true,
|
||||
title: false,
|
||||
// 表盘外框
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: [
|
||||
[0.25, '#9D322D'],
|
||||
[0.5, '#9D322D'],
|
||||
[0.75, '#9D322D'],
|
||||
[1, '#9D322D'],
|
||||
],
|
||||
width: 1.5,
|
||||
},
|
||||
},
|
||||
// 表盘细分数
|
||||
axisTick: {
|
||||
show: true,
|
||||
splitNumber: 5,
|
||||
distance: 0,
|
||||
length: 6,
|
||||
lineStyle: {
|
||||
color: '#9D322D',
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
// 分割线
|
||||
splitLine: {
|
||||
show: true,
|
||||
length: 10,
|
||||
distance: 0,
|
||||
lineStyle: {
|
||||
color: '#9D322D',
|
||||
width: 2,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
// 分割线标识
|
||||
axisLabel: {
|
||||
show: true,
|
||||
distance: 2,
|
||||
fontSize: 10,
|
||||
formatter: function (v) {
|
||||
switch (v + '') {
|
||||
case '-180':
|
||||
return ''
|
||||
default:
|
||||
return v
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// 指针设置
|
||||
pointer: {
|
||||
icon: 'path://m368.01136,209.80637l173.00807,-193.72679c19.14653,-21.43943 50.16392,-21.43943 69.31045,0l172.93149,193.72679c1.22537,1.37213 1.22537,3.51607 0,4.8882l-47.63657,53.34133c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-113.65381,-127.26452c-1.91465,-2.14395 -5.20785,-0.60031 -5.20785,2.40122l0,731.94254c0,1.88667 -1.37855,3.43031 -3.06345,3.43031l-67.39579,0c-1.6849,0 -3.06345,-1.54364 -3.06345,-3.43031l0,-731.94254c0,-3.08728 -3.2932,-4.54517 -5.20785,-2.40122l-113.65381,127.26452c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-47.63657,-53.34133c-1.22537,-1.37213 -1.22537,-3.51607 0,-4.88819l0,-0.00001M539,861.23064h73v800h-73z',
|
||||
length: '90%',
|
||||
width: 15,
|
||||
opacity: 1,
|
||||
},
|
||||
detail: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
name: 'A相', //'A相',
|
||||
itemStyle: {
|
||||
color: '#DAA520',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: 'B相', //'B相',
|
||||
itemStyle: {
|
||||
color: '#2E8B57',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: 'C相', //'C相',
|
||||
itemStyle: {
|
||||
color: '#A52a2a',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
initEcharts(color, key, name) {
|
||||
return {
|
||||
tooltip: { show: false },
|
||||
toolbox: {
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: key == 0 ? 180 : 90,
|
||||
endAngle: key == 0 ? 90 : 0,
|
||||
min: 0,
|
||||
max: key == 0 ? 12 : 200,
|
||||
radius: '150%',
|
||||
center: key == 0 ? ['90%', '75%'] : ['10%', '75%'],
|
||||
splitNumber: 2, //刻度数量
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: [
|
||||
[0.3, color],
|
||||
[0.7, color],
|
||||
[1, color],
|
||||
],
|
||||
},
|
||||
},
|
||||
color: color,
|
||||
// 表盘细分数
|
||||
axisTick: {
|
||||
show: true,
|
||||
distance: -2,
|
||||
length: 8,
|
||||
lineStyle: {
|
||||
color: color,
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: color,
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
distance: -2,
|
||||
length: 12,
|
||||
|
||||
lineStyle: {
|
||||
color: color,
|
||||
width: 2,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
|
||||
//标题位置
|
||||
title: {
|
||||
fontWeight: 'bolder',
|
||||
fontSize: 10,
|
||||
offsetCenter: key == 0 ? ['-80%', '-100%'] : ['85%', '-100%'],
|
||||
},
|
||||
//数值位置
|
||||
detail: {
|
||||
fontSize: 10,
|
||||
valueAnimation: true,
|
||||
formatter: '{value}',
|
||||
offsetCenter: key == 0 ? ['-40%', '25%'] : ['40%', '25%'],
|
||||
color: color,
|
||||
},
|
||||
|
||||
// 指针设置
|
||||
pointer: {
|
||||
length: '80%',
|
||||
width: 2,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
name: name,
|
||||
itemStyle: {
|
||||
color: color,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
// 初始化图表
|
||||
async initChart(key, value) {
|
||||
// console.log('🚀 ~ key,value:', key, value)
|
||||
if (!this.$refs[key]) return
|
||||
|
||||
try {
|
||||
this[key] = await this.$refs[key].init(echarts)
|
||||
this[key].setOption(this[value])
|
||||
} catch (error) {
|
||||
console.error('图表初始化失败:', error)
|
||||
}
|
||||
},
|
||||
|
||||
// 更新图表数据
|
||||
updateChart(newOption) {
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.setOption(newOption)
|
||||
} else if (this.$refs.chartRef) {
|
||||
this.$refs.chartRef.setOption(newOption)
|
||||
}
|
||||
},
|
||||
// 调整图表大小
|
||||
resizeChart() {
|
||||
if (this.$refs.chartRef) {
|
||||
this.$refs.chartRef.resize()
|
||||
}
|
||||
},
|
||||
// 页面卸载时销毁图表实例
|
||||
beforeUnmount() {
|
||||
if (this.$refs.chartRef) {
|
||||
this.$refs.chartRef.dispose()
|
||||
}
|
||||
},
|
||||
// 刷新
|
||||
handleRefresh() {
|
||||
this.disabled = true
|
||||
this.client.end()
|
||||
this.setMqtt(1)
|
||||
this.initMqtt()
|
||||
if (this.numTimer) {
|
||||
clearInterval(this.numTimer)
|
||||
}
|
||||
|
||||
// 设置定时器，每秒执行一次
|
||||
this.numTimer = setInterval(() => {
|
||||
this.countdown--
|
||||
|
||||
// 倒计时结束
|
||||
if (this.countdown <= 0) {
|
||||
clearInterval(this.numTimer) // 清除定时器
|
||||
this.disabled = false // 启用按钮
|
||||
this.countdown = 60 // 重置倒计时
|
||||
this.numTimer = null // 清空定时器标识
|
||||
}
|
||||
}, 1000)
|
||||
},
|
||||
async setMqtt(e) {
|
||||
this.clear()
|
||||
await getBaseRealData(this.lineId)
|
||||
.then((res) => {
|
||||
if (res.code == 'A0000') {
|
||||
this.$util.toast(e == 0 ? '连接成功！' : '刷新成功！')
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
this.loading = false
|
||||
this.timer = setInterval(() => {
|
||||
getBaseRealData(this.lineId).then((res) => {
|
||||
console.log(res, '获取基础实时数据')
|
||||
})
|
||||
}, 30000)
|
||||
} else {
|
||||
this.countdown = 60 // 重置倒计时
|
||||
this.disabled = false
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
initMqtt() {
|
||||
MQTT_OPTIONS.clientId = uni.getStorageSync('devCode')
|
||||
// #ifdef APP-PLUS
|
||||
this.client = mqtt.connect('wx://' + MQTT_IP, MQTT_OPTIONS)
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
|
||||
this.client = mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)
|
||||
// #endif
|
||||
this.client
|
||||
.on('connect', () => {
|
||||
console.log('连接成功')
|
||||
this.client.subscribe(`/Web/RealData/+`, (err) => {
|
||||
if (!err) {
|
||||
console.log(`订阅成功:/Web/RealData/+`)
|
||||
}
|
||||
})
|
||||
|
||||
// this.client.subscribe(`/zl/devData/${this.devId}/${id}`, (err) => {
|
||||
// if (!err) {
|
||||
// console.log(`订阅成功:/zl/devData/${this.devId}/${id}`)
|
||||
|
||||
// // 默认推送
|
||||
// this.client.publish(`/zl/askDevData/${this.devId}/${id}`)
|
||||
// this.client.publish(`/zl/askTemperData/${this.devId}`)
|
||||
// if (this.timer) {
|
||||
// clearInterval(this.timer)
|
||||
// this.timer = null
|
||||
// }
|
||||
// this.timer = setInterval(() => {
|
||||
// console.log('askDevData')
|
||||
// this.client.publish(`/zl/askDevData/${this.devId}/${id}`)
|
||||
// this.client.publish(`/zl/askTemperData/${this.devId}`)
|
||||
// }, 1000 * 60)
|
||||
// }
|
||||
// })
|
||||
})
|
||||
.on('reconnect', function (error) {
|
||||
console.log(error)
|
||||
// console.log('正在重连...', that.topic)
|
||||
})
|
||||
.on('error', function (error) {
|
||||
console.log('连接失败...', error)
|
||||
})
|
||||
.on('end', function () {
|
||||
console.log('连接断开')
|
||||
})
|
||||
.on('message', (topic, message) => {
|
||||
// console.log('接收推送信息：', JSON.parse(message.toString()), topic)
|
||||
// console.log('🚀 ~ .on ~ topic:', topic)
|
||||
if (topic === `/Web/RealData/${this.userInfo.userIndex}`) {
|
||||
let list = JSON.parse(message.toString())
|
||||
if (list.lineId == this.lineId) {
|
||||
// console.log(list)
|
||||
this.realTime = list.dataTime
|
||||
let pt = list.pt || 0
|
||||
let ct = list.ct || 0
|
||||
|
||||
let data = {
|
||||
vRmsA: ((list.vRmsA * pt) / 1000).toFixed(2),
|
||||
vRmsB: ((list.vRmsB * pt) / 1000).toFixed(2),
|
||||
vRmsC: ((list.vRmsC * pt) / 1000).toFixed(2),
|
||||
iRmsA: (list.iRmsA * ct).toFixed(2),
|
||||
iRmsB: (list.iRmsB * ct).toFixed(2),
|
||||
iRmsC: (list.iRmsC * ct).toFixed(2),
|
||||
v1A: ((list.v1A * pt) / 1000).toFixed(2),
|
||||
v1B: ((list.v1B * pt) / 1000).toFixed(2),
|
||||
v1C: ((list.v1C * pt) / 1000).toFixed(2),
|
||||
v1AngA: list.v1AngA.toFixed(2),
|
||||
v1AngB: list.v1AngB.toFixed(2),
|
||||
v1AngC: list.v1AngC.toFixed(2),
|
||||
|
||||
i1A: (list.i1A * ct).toFixed(2),
|
||||
i1B: (list.i1B * ct).toFixed(2),
|
||||
i1C: (list.i1C * ct).toFixed(2),
|
||||
i1AngA: list.i1AngA.toFixed(2),
|
||||
i1AngB: list.i1AngB.toFixed(2),
|
||||
i1AngC: list.i1AngC.toFixed(2),
|
||||
vDevA: list.vDevA.toFixed(2),
|
||||
vDevB: list.vDevB.toFixed(2),
|
||||
vDevC: list.vDevC.toFixed(2),
|
||||
vThdA: list.vThdA.toFixed(2),
|
||||
vThdB: list.vThdB.toFixed(2),
|
||||
vThdC: list.vThdC.toFixed(2),
|
||||
}
|
||||
this.realTimeData = [
|
||||
{ name: '电压有效值(kV)', A: data.vRmsA, B: data.vRmsB, C: data.vRmsC },
|
||||
{ name: '电流有效值(A)', A: data.iRmsA, B: data.iRmsB, C: data.iRmsC },
|
||||
{ name: '基波电压幅值(kV)', A: data.v1A, B: data.v1B, C: data.v1C },
|
||||
{ name: '基波电压相位(°)', A: data.v1AngA, B: data.v1AngB, C: data.v1AngC },
|
||||
{ name: '基波电流幅值(A)', A: data.i1A, B: data.i1B, C: data.i1C },
|
||||
{ name: '基波电流相位(°)', A: data.i1AngA, B: data.i1AngB, C: data.i1AngC },
|
||||
{ name: '电压偏差(%)', A: data.vDevA, B: data.vDevB, C: data.vDevC },
|
||||
{ name: '电压总谐波畸变率(%)', A: data.vThdA, B: data.vThdB, C: data.vThdC },
|
||||
]
|
||||
// 电压
|
||||
let vMax =
|
||||
Math.ceil(
|
||||
(Math.max(
|
||||
...[
|
||||
Math.floor(data.vRmsA * 100) / 100 || 1,
|
||||
Math.floor(data.vRmsB * 100) / 100 || 1,
|
||||
Math.floor(data.vRmsC * 100) / 100 || 1,
|
||||
],
|
||||
) *
|
||||
1.2) /
|
||||
10,
|
||||
) * 10
|
||||
this.echartsDataV1.series[0].max = vMax
|
||||
this.echartsDataV2.series[0].max = vMax
|
||||
this.echartsDataV3.series[0].max = vMax
|
||||
this.echartsDataV1.series[0].data[0].value = data.vRmsA
|
||||
this.echartsDataV2.series[0].data[0].value = data.vRmsB
|
||||
this.echartsDataV3.series[0].data[0].value = data.vRmsC
|
||||
|
||||
// 电流
|
||||
let aMax =
|
||||
Math.ceil(
|
||||
(Math.max(
|
||||
...[
|
||||
Math.floor(data.iRmsA * 100) / 100 || 1,
|
||||
Math.floor(data.iRmsB * 100) / 100 || 1,
|
||||
Math.floor(data.iRmsC * 100) / 100 || 1,
|
||||
],
|
||||
) *
|
||||
1.2) /
|
||||
10,
|
||||
) * 10
|
||||
this.echartsDataA1.series[0].max = aMax
|
||||
this.echartsDataA2.series[0].max = aMax
|
||||
this.echartsDataA3.series[0].max = aMax
|
||||
this.echartsDataA1.series[0].data[0].value = data.iRmsA
|
||||
this.echartsDataA2.series[0].data[0].value = data.iRmsB
|
||||
this.echartsDataA3.series[0].data[0].value = data.iRmsC
|
||||
|
||||
this.echartsData0.series[0].data[0].value = data.i1AngA
|
||||
this.echartsData0.series[0].data[1].value = data.i1AngB
|
||||
this.echartsData0.series[0].data[2].value = data.i1AngC
|
||||
|
||||
this.echartsData1.series[0].data[0].value = data.v1AngA
|
||||
this.echartsData1.series[0].data[1].value = data.v1AngB
|
||||
this.echartsData1.series[0].data[2].value = data.v1AngC
|
||||
|
||||
const charts = [
|
||||
{ instance: this.echart0, data: this.echartsData0 },
|
||||
{ instance: this.echart1, data: this.echartsData1 },
|
||||
{ instance: this.echartV1, data: this.echartsDataV1 },
|
||||
{ instance: this.echartV2, data: this.echartsDataV2 },
|
||||
{ instance: this.echartV3, data: this.echartsDataV3 },
|
||||
{ instance: this.echartA1, data: this.echartsDataA1 },
|
||||
{ instance: this.echartA2, data: this.echartsDataA2 },
|
||||
{ instance: this.echartA3, data: this.echartsDataA3 },
|
||||
]
|
||||
|
||||
charts.forEach(({ instance, data }) => {
|
||||
if (instance && instance.setOption) {
|
||||
instance.setOption(data, true)
|
||||
}
|
||||
})
|
||||
|
||||
// this.echart0.setOption(this.echartsData0, true)
|
||||
// this.echart1.setOption(this.echartsData1, true)
|
||||
// this.echartV1.setOption(this.echartsDataV1, true)
|
||||
// this.echartV2.setOption(this.echartsDataV2, true)
|
||||
// this.echartV3.setOption(this.echartsDataV3, true)
|
||||
// this.echartA1.setOption(this.echartsDataA1, true)
|
||||
// this.echartA2.setOption(this.echartsDataA2, true)
|
||||
// this.echartA3.setOption(this.echartsDataA3, true)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 清空数据
|
||||
clear() {
|
||||
this.realTime = ''
|
||||
this.realTimeData = [
|
||||
{ name: '电压有效值(kV)', A: '/', B: '/', C: '/' },
|
||||
{ name: '电流有效值(A)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电压幅值(kV)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电压相位(°)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电流幅值(A)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电流相位(°)', A: '/', B: '/', C: '/' },
|
||||
{ name: '电压偏差(%)', A: '/', B: '/', C: '/' },
|
||||
{ name: '电压总谐波畸变率(%)', A: '/', B: '/', C: '/' },
|
||||
]
|
||||
this.echartsDataV1.series[0].data[0].value = 0
|
||||
this.echartsDataV2.series[0].data[0].value = 0
|
||||
this.echartsDataV3.series[0].data[0].value = 0
|
||||
this.echartsDataA1.series[0].data[0].value = 0
|
||||
this.echartsDataA2.series[0].data[0].value = 0
|
||||
this.echartsDataA3.series[0].data[0].value = 0
|
||||
this.echartsData0.series[0].data[0].value = 0
|
||||
this.echartsData0.series[0].data[1].value = 0
|
||||
this.echartsData0.series[0].data[2].value = 0
|
||||
this.echartsData1.series[0].data[0].value = 0
|
||||
this.echartsData1.series[0].data[1].value = 0
|
||||
this.echartsData1.series[0].data[2].value = 0
|
||||
const charts = [
|
||||
{ instance: this.echart0, data: this.echartsData0 },
|
||||
{ instance: this.echart1, data: this.echartsData1 },
|
||||
{ instance: this.echartV1, data: this.echartsDataV1 },
|
||||
{ instance: this.echartV2, data: this.echartsDataV2 },
|
||||
{ instance: this.echartV3, data: this.echartsDataV3 },
|
||||
{ instance: this.echartA1, data: this.echartsDataA1 },
|
||||
{ instance: this.echartA2, data: this.echartsDataA2 },
|
||||
{ instance: this.echartA3, data: this.echartsDataA3 },
|
||||
]
|
||||
|
||||
charts.forEach(({ instance, data }) => {
|
||||
if (instance && instance.setOption) {
|
||||
instance.setOption(data, true)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 监测点变化
|
||||
lineChange(e) {
|
||||
this.clear()
|
||||
this.lineKey = e.detail.value
|
||||
this.lineId = this.lineList[e.detail.value].lineId
|
||||
this.client.end()
|
||||
this.setMqtt(0)
|
||||
this.initMqtt()
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.realTime {
|
||||
.info-card-wrap {
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
// padding: 20rpx;
|
||||
.info-card {
|
||||
background-image: url('/static/background.png');
|
||||
background-position: center center; /* 水平+垂直居中 */
|
||||
background-repeat: no-repeat; /* 不平铺 */
|
||||
background-size: 100% 100%; /* 覆盖整个容器（可选，根据需求调整） */
|
||||
color: #fff;
|
||||
padding: 20rpx 40rpx;
|
||||
border-radius: 20rpx;
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
view {
|
||||
// font-size: 28rpx;
|
||||
.nav-menu {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0rpx;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
.status-normal {
|
||||
// font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-table {
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
.table-header,
|
||||
.table-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 30rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
// color: #333;
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
flex: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-header {
|
||||
// background-color: #fafafa;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.time-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
margin: 20rpx 0 0;
|
||||
border-radius: 10rpx;
|
||||
.time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
text {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chartBox {
|
||||
background-color: #fff;
|
||||
padding: 0 0rpx 20rpx;
|
||||
display: flex;
|
||||
.middle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 600rpx;
|
||||
flex: 1;
|
||||
.echart1 {
|
||||
position: absolute;
|
||||
height: 500rpx;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.chart {
|
||||
width: 170rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.text_center {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(50%);
|
||||
}
|
||||
}
|
||||
.mini-btn {
|
||||
font-size: 24rpx;
|
||||
border-radius: 45rpx;
|
||||
height: 45rpx;
|
||||
line-height: 45rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user