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

提交app

Browse Source
This commit is contained in:
guanj
2026-03-17 14:00:55 +08:00
parent b71200cb97
commit 00e34c168f
82 changed files with 13202 additions and 4602 deletions
Download Patch File Download Diff File Expand all files Collapse all files

859
pages/device/list.vue
View File

@@ -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
View 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>

224
pages/gateway/detail.vue
View File

@@ -1,113 +1,113 @@
<template>
<Cn-page :loading='loading' noPadding>
<view slot='body'>
<view class='detail device'>
<view class="header">
<image src="/static/test2.pic.png" mode="widthFix" style="width: 100%;" />
</view>
<view class="title">基本信息</view>
<view class="des">
<text>名称：监测网关</text>
<text class="ml20">项目：XXX项目1</text>
</view>
<view class="des">
<text>设备型号：PQS-882</text>
<text class="ml20">版本号：v1.0.0</text>
</view>
<view class="title mb20 m340">设备列表
<view class="footer-btn" v-if="userInfo.authorities != '2' && userInfo.authorities != '5'" @click="newDevice">注册设备
</view>
</view>
<uni-card :title="'设备' + item" :sub-title="'XXX项目1'" extra="用能" v-for="item in 2" :key="item"
@click="goDevice" padding="0" thumbnail="/static/device.png">
</uni-card>
<uni-load-more status="nomore"></uni-load-more>
<view style="height:20rpx"></view>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false,
userInfo: {},
deviceList: [
{
name: '设备1',
des: '设备描述1',
type: 'APF',
project: '监测',
},
{
name: '设备2',
des: '设备描述2',
type: 'DVR',
project: '监测'
},
]
}
},
methods: {
newDevice () {
uni.navigateTo({
url: '/pages/gateway/newDevice'
})
},
goDevice (item) {
uni.navigateTo({
url: `/pages/device/${item.type}/detail`
})
}
},
onLoad (options) {
this.userInfo = uni.getStorageSync('userInfo')
},
}
</script>
<style lang='scss'>
.detail {
// background: $uni-theme-white;
.header {
position: relative;
}
.title {
display: flex;
justify-content: space-between;
padding: 20rpx 20rpx 0;
font-size: 36rpx;
color: #111;
font-weight: 700;
.footer-btn {
padding: 0 20rpx;
height: 50rpx;
background-color: #007aff;
font-size: 24rpx;
color: #fff;
text-align: center;
line-height: 50rpx;
border-radius: 10rpx;
}
}
.des {
padding: 20rpx 20rpx 0;
font-size: 28rpx;
color: #333;
}
.content {
box-sizing: border-box;
}
}
<template>
<Cn-page :loading='loading' noPadding>
<view slot='body'>
<view class='detail device'>
<view class="header">
<image src="/static/test2.pic.png" mode="widthFix" style="width: 100%;" />
</view>
<view class="title">基本信息</view>
<view class="des">
<text>名称：监测网关</text>
<text class="ml20">项目：XXX项目1</text>
</view>
<view class="des">
<text>设备型号：PQS-882</text>
<text class="ml20">版本号：v1.0.0</text>
</view>
<view class="title mb20 m340">设备列表
<view class="footer-btn" v-if="userInfo.authorities != '2' && userInfo.authorities != '5'" @click="newDevice">注册设备
</view>
</view>
<uni-card :title="'设备' + item" :sub-title="'XXX项目1'" extra="用能" v-for="item in 2" :key="item"
@click="goDevice" padding="0" thumbnail="/static/device.png">
</uni-card>
<uni-load-more status="nomore"></uni-load-more>
<view style="height:20rpx"></view>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false,
userInfo: {},
deviceList: [
{
name: '设备1',
des: '设备描述1',
type: 'APF',
project: '监测',
},
{
name: '设备2',
des: '设备描述2',
type: 'DVR',
project: '监测'
},
]
}
},
methods: {
newDevice () {
uni.navigateTo({
url: '/pages/gateway/newDevice'
})
},
goDevice (item) {
uni.navigateTo({
url: `/pages/device/${item.type}/detail`
})
}
},
onLoad (options) {
this.userInfo = uni.getStorageSync('userInfo')
},
}
</script>
<style lang='scss'>
.detail {
// background: $uni-theme-white;
.header {
position: relative;
}
.title {
display: flex;
justify-content: space-between;
padding: 20rpx 20rpx 0;
font-size: 36rpx;
color: #111;
font-weight: 700;
.footer-btn {
padding: 0 20rpx;
height: 50rpx;
background-color: #007aff;
font-size: 24rpx;
color: #fff;
text-align: center;
line-height: 50rpx;
border-radius: 10rpx;
}
}
.des {
padding: 20rpx 20rpx 0;
font-size: 28rpx;
color: #333;
}
.content {
box-sizing: border-box;
}
}
</style>

232
pages/home/selectEngineering.vue
View File

@@ -1,97 +1,135 @@
<template>
<Cn-page :loading="loading">
<view slot="body">
<view class="select-enineering">
<uni-indexed-list
:options="engineeringListFilter"
:showSelect="false"
@click="confirm"
></uni-indexed-list>
</view>
</view>
</Cn-page>
</template>
<script>
import { pinyin } from 'pinyin-pro'
import { queryEngineering } from '@/common/api/engineering'
export default {
data() {
return {
loading: false,
engineeringList: [],
options: {},
}
},
computed: {
engineeringListFilter() {
let result = []
this.engineeringList.forEach((item) => {
let arr = pinyin(item.name[0], { toneType: 'none', type: 'array' })
let letter = arr[0][0].toUpperCase()
console.log(letter)
let index = result.findIndex((item) => item.letter === letter)
if (index === -1) {
result.push({
letter,
data: [item.name],
})
} else {
result[index].data.push(item.name)
}
})
return result
},
},
onLoad(options) {
this.options = options
this.engineeringList = uni.getStorageSync('engineeringList')
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
if (!(this.userInfo.authorities === 'app_vip_user' || this.userInfo.authorities === 'engineering_user')) {
// 修改buttons
// #ifdef APP-PLUS
var webView = this.$mp.page.$getAppWebview()
// 修改buttons
webView.setTitleNViewButtonStyle(0, {
width: '0',
})
// #endif
}
},
onShow() {
queryEngineering().then((res) => {
this.engineeringList = res.data
})
},
onNavigationBarButtonTap(e) {
if (this.userInfo.authorities === 'app_vip_user' || this.userInfo.authorities === 'engineering_user') {
uni.navigateTo({
url: `/pages/engineering/new`,
})
} else {
uni.showToast({
title: '暂无权限',
icon: 'none',
})
}
},
methods: {
confirm(e) {
console.log(e)
let engineering = this.engineeringList.find((item) => item.name === e.item.name)
if (this.options.from === 'once') {
// 创建项目的时候选择工程 用完即删
uni.setStorageSync('onceSelectEngineering', engineering)
} else {
uni.setStorageSync('engineering', engineering)
}
uni.navigateBack()
},
},
}
</script>
<style lang="scss">
.index {
padding: 34rpx;
}
</style>
<template>
<Cn-page :loading="loading">
<view slot="body">
<view class="select-enineering">
<view class="all" @click="all">全部工程</view>
<uni-indexed-list
:style="{ top: showAll ? '110rpx' : '0' }"
:options="engineeringListFilter"
:showSelect="false"
@click="confirm"
>
</uni-indexed-list>
</view>
</view>
</Cn-page>
</template>
<script>
import { pinyin } from 'pinyin-pro'
import { queryEngineering } from '@/common/api/engineering'
export default {
props: {},
data() {
return {
loading: false,
engineeringList: [],
options: {},
showAll: true,
}
},
computed: {
engineeringListFilter() {
let result = []
this.engineeringList.forEach((item) => {
let arr = pinyin(item.name[0], { toneType: 'none', type: 'array' })
let letter = arr[0][0].toUpperCase()
console.log(letter)
let index = result.findIndex((item) => item.letter === letter)
if (index === -1) {
result.push({
letter,
data: [item.name],
})
} else {
result[index].data.push(item.name)
}
})
return result
},
},
onLoad(options) {
this.options = options
this.showAll = this.options.showAll ? true : false
this.engineeringList = uni.getStorageSync('engineeringList')
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
if (!(this.userInfo.authorities === 'app_vip_user' || this.userInfo.authorities === 'engineering_user')) {
// 修改buttons
// #ifdef APP-PLUS
var webView = this.$mp.page.$getAppWebview()
// 修改buttons
webView.setTitleNViewButtonStyle(0, {
width: '0',
})
// #endif
}
},
onShow() {
queryEngineering().then((res) => {
this.engineeringList = res.data.sort((a, b) => {
return a.name.localeCompare(b.name, 'zh', { sensitivity: 'accent' })
})
})
},
onNavigationBarButtonTap(e) {
if (this.userInfo.authorities === 'app_vip_user' || this.userInfo.authorities === 'engineering_user') {
uni.navigateTo({
url: `/pages/engineering/new`,
})
} else {
uni.showToast({
title: '暂无权限',
icon: 'none',
})
}
},
methods: {
all() {
uni.setStorageSync('onceSelectEngineering', {
createBy: '',
createTime: '',
updateBy: '',
updateTime: '',
id: '',
name: '',
userId: null,
province: '',
provinceName: '',
city: '',
cityName: '',
description: '',
status: '1',
})
uni.navigateBack()
},
confirm(e) {
console.log(e)
let engineering = this.engineeringList.find((item) => item.name === e.item.name)
if (this.options.from === 'once') {
// 创建项目的时候选择工程 用完即删
uni.setStorageSync('onceSelectEngineering', engineering)
} else {
uni.setStorageSync('engineering', engineering)
}
uni.navigateBack()
},
},
}
</script>
<style lang="scss">
.index {
padding: 34rpx;
}
.all {
padding-left: 30rpx;
display: flex;
align-items: center;
cursor: pointer;
height: 50px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #dedede;
background-color: #ffffff;
}
</style>

246
pages/index/comp/apply.vue Normal file
View File

@@ -0,0 +1,246 @@
<template>
<view>
<view class="filterCriteria">
<!-- 筛选条件 -->
<Cn-filterCriteria @select="select" :showDatetime="false"> </Cn-filterCriteria>
<view class="choose1">
<view>
<checkbox-group @change="changeBox"
><checkbox value="true" :checked="checkedAll" />全选
</checkbox-group></view
>
<view class="nav-menu nav-menu-btn" @click="selectDevice('transfer')">申请报表 </view>
</view>
</view>
<view class="smallLabel mt20">
<view> 共 {{ store.total }} 条事件 | 已选择 {{ checkedTotal }} 条事件 </view>
<view style="width: 180rpx">
<picker @change="bindPickerChange" :value="sort" :range="array">
<view class="uni-input"
>{{ array[sort] }}排序
<uni-icons custom-prefix="iconfont" type="icon-paixu1" size="10" color="#2563EB"></uni-icons>
</view>
</picker>
</view>
</view>
<!-- 卡片 -->
<view class="event-list" :style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }">
<!-- 循环渲染事件项 -->
<uni-card
class="event-item"
:class="judgment(item.showName)"
v-for="(item, index) in store.data"
:key="index"
@click="clackCard(item)"
>
<!-- 头部：图标 + 信息 + 操作 -->
<view class="event-header">
<view class="event-icon">
<!-- 动态图标：根据类型切换 -->
<uni-icons
:custom-prefix="judgment(item.showName) == 'interrupt' ? 'custom-icon' : 'iconfont'"
:type="
judgment(item.showName) == 'sag'
? 'icon-xiajiang'
: judgment(item.showName) == 'swell'
? 'icon-shangsheng'
: 'minus'
"
:color="
judgment(item.showName) == 'sag'
? '#2563eb '
: judgment(item.showName) == 'swell'
? '#e6a23c'
: '#909399'
"
:size="judgment(item.showName) == 'interrupt' ? '50' : '25'"
></uni-icons>
</view>
<view class="event-info">
<view class="event-title">
<text class="event-id">{{ item.equipmentName }}</text>
<text class="event-tag" :class="`${judgment(item.showName)}-tag`">{{ item.showName }}</text>
</view>
<view class="event-desc">
<text>工程名称：{{ item.engineeringName }}</text>
<text>项目名称：{{ item.projectName }}</text>
<text>监测点名称：{{ item.lineName }}</text>
</view>
</view>
<view class="event-action">
<!-- 选择 -->
<checkbox-group @change="changeChild($event, item)"
><checkbox value="true" :checked="item.checked" />
</checkbox-group>
</view>
</view>
<!-- 详情区域 -->
<view class="event-detail">
<text>
发生时间：{{ item.startTime }}，幅值：{{ item.evtParamVVaDepth }}，持续时间：{{
item.evtParamTm
}}，相别：{{ item.evtParamPhase }}
</text>
</view>
</uni-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 style="top: 20%"></Cn-empty>
</view>
</view>
</template>
<script>
import list from '@/common/js/list'
export default {
components: {},
props: {
navHeight: {
type: Number,
default: 0,
},
},
mixins: [list],
data() {
return {
selectValue: {},
height: 0,
checkedAll: false,
checkedTotal: 0,
sort: 0,
array: ['发生时间', '暂降深度', '持续时间'],
}
},
mounted() {},
methods: {
setHeight() {
uni.createSelectorQuery()
.select('.filterCriteria')
.boundingClientRect((rect) => {
console.log('🚀 ~ rect:', rect)
//
// #ifdef H5
this.height = rect?.height + 100 || 0
// #endif
// #ifdef APP-PLUS
this.height = rect?.height + 100 || 0
// #endif
})
.exec()
},
async select(val) {
this.selectValue = val
await this.init()
this.setHeight()
},
init() {
this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
this.store.params.type = 0
this.store.params.pageSize = 10000
this.store.params.sortField = this.sort
this.store.params.engineeringid = this.selectValue.engineeringId
this.store.params.projectId = this.selectValue.projectId
this.store.params.deviceId = this.selectValue.deviceId
this.store.params.lineId = this.selectValue.lineId
this.store.params.startTime = this.selectValue.range[0]
this.store.params.endTime = this.selectValue.range[1]
this.store.loadedCallback = () => {
this.checkedTotal = 0
this.store.data = this.store.data.map((item) => {
item.checked = false
return item
})
}
this.store.reload()
},
// 全选
changeBox(e) {
this.checkedAll = !this.checkedAll
if (e.target.value.length > 0) {
this.store.data = this.store.data.map((item) => {
item.checked = true
return item
})
this.checkedTotal = this.store.total
} else {
this.store.data = this.store.data.map((item) => {
item.checked = false
return item
})
this.checkedTotal = 0
}
},
changeChild(e, item) {
item.checked = !item.checked
this.checkedAll = this.store.data.every((item) => item.checked === true)
this.checkedTotal = this.store.data.filter((item) => item.checked === true).length
},
// 点击卡片
clackCard() {},
// 切换排序
bindPickerChange(e) {
this.sort = e.detail.value
this.init()
},
judgment(val) {
switch (val) {
case '电压暂降':
return 'sag'
case '电压暂升':
return 'swell'
case '电压中断':
return 'interrupt'
}
},
},
computed: {},
watch: {},
}
</script>
<style lang="scss" scoped>
@import '@/pages/message1/index.scss';
.filterCriteria {
.nav {
background-color: #fff;
}
.choose1 {
background-color: #fff;
padding: 0 20rpx;
display: flex;
justify-content: space-between;
/deep/ .uni-checkbox-input {
width: 30rpx;
height: 30rpx;
}
font-size: 26rpx;
}
}
.nav-menu {
padding: 6rpx 20rpx;
margin-left: 20rpx;
margin-bottom: 20rpx;
font-size: 24rpx;
border-radius: 8rpx;
background: #ebeaec;
color: #666;
&-active {
background: #dfe5f7;
color: $uni-theme-color;
}
&-btn {
background: $uni-theme-color;
color: #fff;
}
}
/deep/.uni-card__content {
padding: 20rpx !important;
}
.smallLabel {
justify-content: space-between;
font-size: 24rpx !important;
}
</style>

74
pages/index/comp/device.vue
View File

@@ -61,33 +61,22 @@
</view>
<view class="content device" :style="{ minHeight: minHeight }">
<Cn-device-card v-for="(item, index) in deviceListFilter" :device="item" :key="index">
<template v-slot:title v-if="transfer || share">
<template v-slot:title>
<!-- 卡片标题 -->
<view class="uni-card__header">
<view class="uni-card__header-box">
<view class="uni-card__header-avatar">
<image
class="uni-card__header-avatar-image"
:src="deviceIcon(item.runStatus)"
mode="aspectFit"
/>
</view>
<view class="uni-card__header-content">
<text class="uni-card__header-content-title uni-ellipsis">
{{ item.equipmentName }}
</text>
<text class="uni-card__header-content-subtitle uni-ellipsis">
{{ item.mac }}
</text>
</view>
</view>
<view class="uni-card__header-extra" style="position: relative">
<switch
:checked="checkList.indexOf(item.equipmentId) > -1"
style="transform: scale(0.8); position: relative; left: 20rpx"
@change="switchChange(item)"
/>
</view>
<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>
@@ -102,7 +91,7 @@
<script>
import { getProjectList } from '@/common/api/project'
import { queryDictData } from '@/common/api/dictionary'
import { engineeringPinToTop } from '@/common/api/device'
export default {
props: {
store: {
@@ -133,7 +122,6 @@ export default {
},
computed: {
deviceListFilter() {
let arr = this.store.data.filter((item) => {
if (this.select.projectName && this.select.projectType) {
return item.project === this.select.projectName && item.type === this.select.projectType
@@ -145,9 +133,8 @@ export default {
return true
}
})
if (this.transfer || this.share) {
return arr.filter((item) => {
return item.isPrimaryUser === '1' //&& item.process == 4
})
@@ -161,6 +148,20 @@ export default {
},
mounted() {},
methods: {
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)
}
})
},
selectDevice(type) {
if (this.deviceListFilter.findIndex((item) => item.isPrimaryUser === '1') === -1) {
this.$util.toast('没有可操作的设备')
@@ -184,7 +185,6 @@ export default {
return str
},
switchChange(e) {
console.log(e)
let index = this.checkList.indexOf(e.equipmentId)
if (index > -1) {
this.checkList.splice(index, 1)
@@ -333,18 +333,22 @@ export default {
this.navMenuActive = index
},
jump(item) {
uni.navigateTo({
url: '/pages/device/APF/detail?id=' + item.equipmentId + '&isPrimaryUser=' + item.isPrimaryUser+ '&ndid=' + item.ndid,
url:
'/pages/device/APF/detail?id=' +
item.equipmentId +
'&isPrimaryUser=' +
item.isPrimaryUser +
'&ndid=' +
item.ndid,
})
},
},
}
</script>
<style lang="scss">
.index-device{
.index-device {
.nav-menu {
}
}
</style>

224
pages/index/comp/engineering.vue Normal file
View File

@@ -0,0 +1,224 @@
<template>
<view class="index-device">
<view class="nav" :style="{ top: navTabHeight + 'px' }"> </view>
<view class="content device project-list" :style="{ minHeight: minHeight }">
<uni-card v-for="(item, index) in store.data" :key="index">
<view class="card-header">
<view class="project-icon">
<uni-icons custom-prefix="iconfont" type="icon-gongcheng" color="#2563eb" size="45"></uni-icons>
</view>
<view class="project-info">
<view class="project-name">{{ item.engineeringName }}</view>
<view class="project-stats">
<view class="stat-item" @click="jump('nowEngineering', item)">
<text class="stat-value blue">{{ item.devTotal }}</text>
<text class="stat-label">设备总数</text>
</view>
<view class="stat-item" @click="jump('currentOnLineDevs', item)">
<text class="stat-value green">{{ item.onlineDevTotal }}</text>
<text class="stat-label">在线设备</text>
</view>
<view class="stat-item" @click="jump('currentOffLineDevs', item)">
<text class="stat-value red">{{ item.offlineDevTotal }}</text>
<text class="stat-label">离线设备</text>
</view>
<view class="stat-item" @click="jump('event', item)">
<text class="stat-value red">{{ item.alarmTotal }}</text>
<text class="stat-label">告警数量</text>
</view>
</view>
</view>
<view class="star-icon" @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>
</view>
</uni-card>
<uni-load-more
v-if="store.status == 'loading' || deviceListFilter.length > 0"
:status="store.status"
></uni-load-more>
<Cn-empty v-else></Cn-empty>
</view>
</view>
</template>
<script>
import { engineeringPinToTop } from '@/common/api/device'
export default {
props: {
store: {
type: Object,
default: {},
},
},
data() {
return {
loading: false,
minHeight: 0,
navTabHeight: 0,
userInfo: {},
}
},
computed: {
deviceListFilter() {
let arr = this.store.data
return arr
},
},
created() {
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
},
mounted() {
console.log(12333, this.store)
},
methods: {
toggleStar(item) {
engineeringPinToTop({
targetId: item.engineeringId,
targetType: 2,
userId: uni.getStorageSync(this.$cacheKey.userInfo).userIndex,
}).then((res) => {
if (res.code == 'A0000') {
this.$util.toast('操作成功!')
this.$emit('refresh')
} else {
this.$util.toast(res.message)
}
})
},
getDeviceList() {
this.store.params.pageSize = 50
this.store.firstCallBack = (res) => {
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()
},
async init() {
console.warn('init')
this.getDeviceList()
},
jump(type, item) {
if (type == 'event') {
uni.switchTab({
url: '/pages/index/message1',
})
} else {
uni.setStorageSync('engineering', { name: item.engineeringName, id: item.engineeringId })
uni.navigateTo({
url: '/pages/device/list?type=' + type,
})
}
},
},
}
</script>
<style lang="scss" scoped>
.index-device {
/* 列表容器 */
// .project-card {
// background-color: #ffffff;
// border-radius: 16rpx;
// margin-bottom: 16rpx;
// padding: 24rpx;
// box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
// }
.card-header {
display: flex;
align-items: center;
}
.project-icon {
width: 110rpx;
height: 110rpx;
border-radius: 12rpx;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20rpx;
background-color: #2563eb20;
}
.project-info {
flex: 1;
line-height: 36rpx;
}
.project-name {
font-size: 15px;
color: #3a3a3a;
margin-bottom: 10rpx;
}
.project-stats {
display: flex;
// justify-content: space-between;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
border-right: 2rpx solid #ccc;
&:last-child {
border-right: none;
}
}
.stat-value {
font-size: 30rpx;
font-weight: 700;
}
.stat-label {
font-size: 24rpx;
color: #6a6a6a;
}
.blue {
color: #007aff;
}
.green {
color: #34c759;
}
.red {
color: #ff3b30;
}
.icon-star {
color: #cccccc;
}
}
/deep/ .uni-card {
padding: 0 !important;
}
</style>

316
pages/index/comp/indexGongCheng.vue
View File

@@ -1,24 +1,38 @@
<template>
<view class="index-zhuyonghu">
<template v-if="devCount.engineeringListLength > 1">
<view class="canneng-index-title mb20">所有工程设备统计</view>
<view class="header">
<view class="header-item" @click="jump('allEngineering')">
<view class="header-item-value">{{ devCount.onLineDevCount + devCount.offLineDevCount || 0 }}</view>
<view class="header-item-label">设备总数</view>
</view>
<view class="header-item" @click="jump('onLineDevs')">
<view class="header-item-value">{{ devCount.onLineDevCount || 0 }}</view>
<view class="header-item-label">在线设备</view>
</view>
<view class="header-item" @click="jump('offLineDevs')">
<view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view>
<view class="header-item-label">离线设备</view>
</view>
</view>
<view class="mt20"></view>
</template>
<view class="canneng-index-title mb20">当前工程设备统计</view>
<view class="index-zhuyonghu">
<template v-if="devCount.engineeringListLength > 1">
<view class="canneng-index-title mb20">所有工程设备统计</view>
<view class="header">
<view class="header-item" @click="jump('allEngineering')">
<view class="header-item-value">{{ devCount.onLineDevCount + devCount.offLineDevCount || 0 }}</view>
<view class="header-item-label">设备总数</view>
</view>
<view class="header-item" @click="jump('onLineDevs')">
<view class="header-item-value">{{ devCount.onLineDevCount || 0 }}</view>
<view class="header-item-label">在线设备</view>
</view>
<view class="header-item" @click="jump('offLineDevs')">
<view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view>
<view class="header-item-label">离线设备</view>
</view>
<view class="header-item" @click="jumpMessage">
<view class="header-item-value">{{ devCount.alarmCount || 0 }}</view>
<view class="header-item-label">告警数量</view>
</view>
<view class="header-item" @click="jumpMessage">
<view class="header-item-value">{{
devCount.eventCount + devCount.runCount + devCount.harmonicCount || 0
}}</view>
<view class="header-item-label">事件数量</view>
</view>
<view class="header-item" @click="eningerNum">
<view class="header-item-value">{{ devCount.eningerCount || 0 }}</view>
<view class="header-item-label">工程个数</view>
</view>
</view>
<!-- <view class="mt20"></view> -->
</template>
<!-- <view class="canneng-index-title mb20">当前工程设备统计</view>
<view class="header">
<view class="header-item" @click="jump('nowEngineering')">
<view class="header-item-value"
@@ -34,135 +48,147 @@
<view class="header-item-value">{{ devCount.currentOffLineDevCount || 0 }}</view>
<view class="header-item-label">离线设备</view>
</view>
</view>
<view class="canneng-index-title mt20">常用功能</view>
<view style="padding: 20rpx 20rpx 0">
<Cn-grid title="" :auto-fill="false">
<Cn-grid-item src="/static/device2.png" text="设备注册" @click="registerDevice(4)"></Cn-grid-item>
<Cn-grid-item
src="/static/device2.png"
text="功能调试"
@click="registerDevice(2)"
v-if="config.feature"
></Cn-grid-item>
<Cn-grid-item
src="/static/device2.png"
text="出厂调试"
@click="registerDevice(3)"
v-if="config.factory"
></Cn-grid-item>
<Cn-grid-item background="#fff" v-if="!config.feature"></Cn-grid-item>
<Cn-grid-item background="#fff" v-if="!config.factory"></Cn-grid-item>
<Cn-grid-item background="#fff"></Cn-grid-item>
<!-- <Cn-grid-item src="/static/gateway2.png" text="网关注册" @click="registerGateway"></Cn-grid-item> -->
<!-- <Cn-grid-item src="/static/feedback2.png" text="问题反馈" @click="submitFeedBack"></Cn-grid-item>-->
</Cn-grid>
</view>
<uni-popup ref="popup" type="dialog" @maskClick="maskClick">
<uni-popup-dialog
mode="base"
type="info"
content="请选择设备类型"
:duration="0"
confirmText="直连设备"
cancelText="网关接入"
cancelColor="#007aff"
@close="close"
@confirm="confirm"
></uni-popup-dialog>
</uni-popup>
</view>
</view> -->
<view class="canneng-index-title mt20">常用功能</view>
<view style="padding: 20rpx 20rpx 0">
<Cn-grid title="" :auto-fill="false">
<Cn-grid-item src="/static/device2.png" text="设备注册" @click="registerDevice(4)"></Cn-grid-item>
<!-- <Cn-grid-item
src="/static/device2.png"
text="功能调试"
@click="registerDevice(2)"
v-if="config.feature"
></Cn-grid-item>
<Cn-grid-item
src="/static/device2.png"
text="出厂调试"
@click="registerDevice(3)"
v-if="config.factory"
></Cn-grid-item> -->
<!-- <Cn-grid-item background="#fff" v-if="!config.feature"></Cn-grid-item>
<Cn-grid-item background="#fff" v-if="!config.factory"></Cn-grid-item> -->
<Cn-grid-item background="#fff"></Cn-grid-item>
<Cn-grid-item background="#fff"></Cn-grid-item>
<Cn-grid-item background="#fff"></Cn-grid-item>
<!-- <Cn-grid-item src="/static/gateway2.png" text="网关注册" @click="registerGateway"></Cn-grid-item> -->
<!-- <Cn-grid-item src="/static/feedback2.png" text="问题反馈" @click="submitFeedBack"></Cn-grid-item>-->
</Cn-grid>
</view>
<uni-popup ref="popup" type="dialog" @maskClick="maskClick">
<uni-popup-dialog
mode="base"
type="info"
content="请选择设备类型"
:duration="0"
confirmText="直连设备"
cancelText="网关接入"
cancelColor="#007aff"
@close="close"
@confirm="confirm"
></uni-popup-dialog>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
loading: true,
config: {
feature: true,
factory: true,
},
type: 0,
}
},
props: {
devCount: {
type: Object,
default: {},
},
},
created() {
this.init()
},
methods: {
init() {
console.log('工程init')
let serverConfig = uni.getStorageSync(this.$cacheKey.serverConfig)
serverConfig && (this.config = serverConfig)
},
submitFeedBack() {
uni.navigateTo({ url: '/pages/home/feedback' })
},
registerDevice(type) {
this.type = type
this.$refs.popup.open()
// uni.showModal({
// title: '提示',
// content: '请选择设备类型',
// confirmText: '直连设备',
// cancelText: '网关接入',
// cancelColor: '#007aff',
// success: ({ confirm, cancel }) => {
// if (confirm) {
// if (this.devCount.engineeringListLength > 0) {
// uni.navigateTo({
// url: '/pages/device/new?type=' + type,
// })
// } else {
// uni.navigateTo({
// url: '/pages/engineering/new?from=index&type=' + type,
// })
// }
// } else if (cancel) {
// // uni.navigateTo({
// // url: '/pages/gateway/list',
// // })
// this.$util.toast('功能正在开发，敬请期待')
// }
// },
// })
},
maskClick() {
this.$refs.popup.close()
},
close() {
this.$util.toast('功能正在开发，敬请期待')
this.$refs.popup.close()
},
confirm(value) {
if (this.devCount.engineeringListLength > 0) {
uni.navigateTo({
url: '/pages/device/new?type=' + this.type,
})
} else {
uni.navigateTo({
url: '/pages/engineering/new?from=index&type=' + this.type,
})
}
data() {
return {
loading: true,
config: {
feature: true,
factory: true,
},
type: 0,
}
},
props: {
devCount: {
type: Object,
default: {},
},
},
created() {
this.init()
},
methods: {
init() {
console.log('工程init')
let serverConfig = uni.getStorageSync(this.$cacheKey.serverConfig)
serverConfig && (this.config = serverConfig)
},
submitFeedBack() {
uni.navigateTo({ url: '/pages/home/feedback' })
},
registerDevice(type) {
this.type = type
this.$refs.popup.open()
// uni.showModal({
// title: '提示',
// content: '请选择设备类型',
// confirmText: '直连设备',
// cancelText: '网关接入',
// cancelColor: '#007aff',
// success: ({ confirm, cancel }) => {
// if (confirm) {
// if (this.devCount.engineeringListLength > 0) {
// uni.navigateTo({
// url: '/pages/device/new?type=' + type,
// })
// } else {
// uni.navigateTo({
// url: '/pages/engineering/new?from=index&type=' + type,
// })
// }
// } else if (cancel) {
// // uni.navigateTo({
// // url: '/pages/gateway/list',
// // })
// this.$util.toast('功能正在开发，敬请期待')
// }
// },
// })
},
maskClick() {
this.$refs.popup.close()
},
close() {
this.$util.toast('功能正在开发，敬请期待')
this.$refs.popup.close()
},
confirm(value) {
if (this.devCount.engineeringListLength > 0) {
uni.navigateTo({
url: '/pages/device/new?type=' + this.type,
})
} else {
uni.navigateTo({
url: '/pages/engineering/new?from=index&type=' + this.type,
})
}
this.$refs.popup.close()
},
registerGateway() {
uni.navigateTo({
url: '/pages/gateway/new',
})
},
jump(type) {
uni.navigateTo({
url: '/pages/device/list?type=' + type,
})
},
},
this.$refs.popup.close()
},
registerGateway() {
uni.navigateTo({
url: '/pages/gateway/new',
})
},
jump(type) {
uni.navigateTo({
url: '/pages/device/list?type=' + type,
})
},
jumpMessage() {
uni.switchTab({
url: '/pages/index/message1',
})
},
eningerNum() {
uni.navigateTo({
url: '/pages/engineering/list',
})
},
},
}
</script>
<style lang="scss"></style>

244
pages/index/comp/indexYunWei.vue
View File

@@ -1,122 +1,122 @@
<template>
<view class="index-zhuanzhi">
<template v-if="devCount.engineeringListLength > 1">
<view class="canneng-index-title mb20">所有工程设备统计</view>
<view class="header">
<view class="header-item" @click="jump('allEngineering')">
<view class="header-item-value">{{ devCount.onLineDevCount + devCount.offLineDevCount || 0 }}</view>
<view class="header-item-label">设备总数</view>
</view>
<view class="header-item" @click="jump('onLineDevs')">
<view class="header-item-value">{{ devCount.onLineDevCount || 0 }}</view>
<view class="header-item-label">在线设备</view>
</view>
<view class="header-item" @click="jump('offLineDevs')">
<view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view>
<view class="header-item-label">离线设备</view>
</view>
<view class="header-item" @click="jumpMessage">
<view class="header-item-value">{{ devCount.alarmCount || 0 }}</view>
<view class="header-item-label">告警数量</view>
</view>
<view class="header-item" @click="jumpMessage">
<view class="header-item-value">{{
devCount.eventCount + devCount.runCount + devCount.harmonicCount || 0
}}</view>
<view class="header-item-label">事件数量</view>
</view>
<view class="header-item" @click="eningerNum">
<view class="header-item-value">{{ devCount.eningerCount || 0 }}</view>
<view class="header-item-label">工程个数</view>
</view>
</view>
<view class="mt20"></view>
</template>
<view class="canneng-index-title mb20">当前工程设备统计</view>
<view class="header">
<view class="header-item" @click="jump('nowEngineering')">
<view class="header-item-value">{{
devCount.currentOnLineDevCount + devCount.currentOffLineDevCount || 0
}}</view>
<view class="header-item-label">设备总数</view>
</view>
<view class="header-item" @click="jump('currentOnLineDevs')">
<view class="header-item-value">{{ devCount.currentOnLineDevCount || 0 }}</view>
<view class="header-item-label">在线设备</view>
</view>
<view class="header-item" @click="jump('currentOffLineDevs')">
<view class="header-item-value">{{ devCount.currentOffLineDevCount || 0 }}</view>
<view class="header-item-label">离线设备</view>
</view>
<view class="header-item" @click="jumpMessage">
<view class="header-item-value">{{ devCount.currentAlarmCount || 0 }}</view>
<view class="header-item-label">告警数量</view>
</view>
<view class="header-item" @click="jumpMessage">
<view class="header-item-value">{{
devCount.currentEventCount + devCount.currentRunCount + devCount.currentHarmonicCount || 0
}}</view>
<view class="header-item-label">事件数量</view>
</view>
<view class="header-item" @click="projectNum(true)">
<view class="header-item-value">{{ devCount.currentProjectCount || 0 }}</view>
<view class="header-item-label">项目个数</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
loading: false,
}
},
props: {
devCount: {
type: Object,
default: {},
},
},
methods: {
jumpMessage(){
uni.switchTab({
url: '/pages/index/message',
})
},
eningerNum(){
uni.navigateTo({
url: '/pages/engineering/list',
})
},
projectWarning() {
uni.navigateTo({
url: '/pages/zhuanzhi/warning',
})
},
projectNum() {
console.log(now)
if (now) {
let engineering = uni.getStorageSync('engineering')
uni.navigateTo({
url: '/pages/project/list?engineeringName=' + engineering.name + '&engineeringId=' + engineering.id,
})
} else {
uni.navigateTo({
url: '/pages/project/list',
})
}
},
jump(type) {
uni.navigateTo({
url: '/pages/device/list?type=' + type,
})
},
},
created() {},
}
</script>
<style lang="scss">
.index-zhuanzhi {
}
</style>
<template>
<view class="index-zhuanzhi">
<template v-if="devCount.engineeringListLength > 1">
<view class="canneng-index-title mb20">所有工程设备统计</view>
<view class="header">
<view class="header-item" @click="jump('allEngineering')">
<view class="header-item-value">{{ devCount.onLineDevCount + devCount.offLineDevCount || 0 }}</view>
<view class="header-item-label">设备总数</view>
</view>
<view class="header-item" @click="jump('onLineDevs')">
<view class="header-item-value">{{ devCount.onLineDevCount || 0 }}</view>
<view class="header-item-label">在线设备</view>
</view>
<view class="header-item" @click="jump('offLineDevs')">
<view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view>
<view class="header-item-label">离线设备</view>
</view>
<view class="header-item" @click="jumpMessage">
<view class="header-item-value">{{ devCount.alarmCount || 0 }}</view>
<view class="header-item-label">告警数量</view>
</view>
<view class="header-item" @click="jumpMessage">
<view class="header-item-value">{{
devCount.eventCount + devCount.runCount + devCount.harmonicCount || 0
}}</view>
<view class="header-item-label">事件数量</view>
</view>
<view class="header-item" @click="eningerNum">
<view class="header-item-value">{{ devCount.eningerCount || 0 }}</view>
<view class="header-item-label">工程个数</view>
</view>
</view>
<view class="mt20"></view>
</template>
<view class="canneng-index-title mb20">当前工程设备统计</view>
<view class="header">
<view class="header-item" @click="jump('nowEngineering')">
<view class="header-item-value">{{
devCount.currentOnLineDevCount + devCount.currentOffLineDevCount || 0
}}</view>
<view class="header-item-label">设备总数</view>
</view>
<view class="header-item" @click="jump('currentOnLineDevs')">
<view class="header-item-value">{{ devCount.currentOnLineDevCount || 0 }}</view>
<view class="header-item-label">在线设备</view>
</view>
<view class="header-item" @click="jump('currentOffLineDevs')">
<view class="header-item-value">{{ devCount.currentOffLineDevCount || 0 }}</view>
<view class="header-item-label">离线设备</view>
</view>
<view class="header-item" @click="jumpMessage">
<view class="header-item-value">{{ devCount.currentAlarmCount || 0 }}</view>
<view class="header-item-label">告警数量</view>
</view>
<view class="header-item" @click="jumpMessage">
<view class="header-item-value">{{
devCount.currentEventCount + devCount.currentRunCount + devCount.currentHarmonicCount || 0
}}</view>
<view class="header-item-label">事件数量</view>
</view>
<view class="header-item" @click="projectNum(true)">
<view class="header-item-value">{{ devCount.currentProjectCount || 0 }}</view>
<view class="header-item-label">项目个数</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
loading: false,
}
},
props: {
devCount: {
type: Object,
default: {},
},
},
methods: {
jumpMessage(){
uni.switchTab({
url: '/pages/index/message',
})
},
eningerNum(){
uni.navigateTo({
url: '/pages/engineering/list',
})
},
projectWarning() {
uni.navigateTo({
url: '/pages/zhuanzhi/warning',
})
},
projectNum(now) {
console.log(now)
if (now) {
let engineering = uni.getStorageSync('engineering')
uni.navigateTo({
url: '/pages/project/list?engineeringName=' + engineering.name + '&engineeringId=' + engineering.id,
})
} else {
uni.navigateTo({
url: '/pages/project/list',
})
}
},
jump(type) {
uni.navigateTo({
url: '/pages/device/list?type=' + type,
})
},
},
created() {},
}
</script>
<style lang="scss">
.index-zhuanzhi {
}
</style>

124
pages/index/comp/steadyState.vue Normal file
View File

@@ -0,0 +1,124 @@
<template>
<view class="dateReport">
<view class="pd20">
<uni-segmented-control
:current="curSub"
class="subsection"
active-color="#376cf3"
:values="subsectionList"
@clickItem="sectionChange"
/>
</view>
<!-- 卡片 -->
<view
class="event-list"
v-if="eventList.length != 0"
:style="{ height: 'calc(100vh - ' + (navHeight + 56) + 'px)', overflow: 'auto' }"
>
<!-- 循环渲染事件项 -->
<uni-card class="event-item" :class="item.type" v-for="(item, index) in eventList" :key="index">
<!-- 头部：图标 + 信息 + 操作 -->
<view class="event-header">
<view class="event-info">
<view class="event-title">
<text class="event-id" >{{ item.id }}</text>
<text class="event-tags">{{ item.tag }}</text>
</view>
</view>
</view>
<!-- 详情区域 -->
<view class="event-detail">
<text>频率偏差越限111次</text>
<text>不平衡度越限3次</text>
<text>电压畸变率越限5次</text>
<text>偶次电压越限5次</text>
</view>
<view class="downloadReport">
<uni-icons type="download" size="16" color="#376cf3"></uni-icons>下载报告
</view>
</uni-card>
<uni-load-more :status="status"></uni-load-more>
</view>
<Cn-empty v-else></Cn-empty>
</view>
</template>
<script>
export default {
components: {},
props: {
indexList: {
type: Array,
default: () => [],
},
total: {
type: Number,
default: 0,
},
navHeight: {
type: Number,
default: 0,
},
},
data() {
return {
status: 'noMore',
curSub: 0,
subsectionList: ['周报', '月报'],
eventList: [
{
id: '测试监测点',
tag: '2026-01-23至2026-01-23',
status: '1',
},
],
}
},
created() {},
methods: {
sectionChange(index) {
this.curSub = index.currentIndex
},
scrolltolower() {
if (this.total != this.indexList.length) {
this.$emit('scrolltolower')
} else {
// this.status = 'noMore'
}
},
},
computed: {},
watch: {},
}
</script>
<style lang="scss" scoped>
@import '@/pages/message1/index.scss';
.event-title {
justify-content: space-between;
}
.event-tags {
font-size: 24rpx;
}
.event-detail {
display: grid;
grid-template-columns: 1fr 1fr;
}
.downloadReport {
width: 100%;
background: #376cf320;
height: 60rpx;
line-height: 60rpx;
color: #376cf3;
font-weight: 600;
border-radius: 15rpx;
margin-top: 10rpx;
display: flex;
justify-content: center;
}
</style>

179
pages/index/comp/transient.vue Normal file
View File

@@ -0,0 +1,179 @@
<template>
<view class="dateReport">
<view class="pd20">
<uni-segmented-control
:current="curSub"
class="subsection"
active-color="#376cf3"
:values="subsectionList"
@clickItem="sectionChange"
/>
</view>
<!-- 申请报表 -->
<view v-if="curSub == 0">
<!-- apply -->
<Apply :navHeight="navHeight"/>
</view>
<!-- 申请记录 -->
<view v-if="curSub == 1">
<view
class="record event-list"
v-if="eventList.length != 0"
:style="{ height: 'calc(100vh - ' + (navHeight + 56) + 'px)', overflow: 'auto' }"
>
<!-- 循环渲染事件项 -->
<uni-card class="event-item" :class="item.type" v-for="(item, index) in eventList" :key="index">
<view class="title" :class="item.status == 1 ? 'completed' : 'incomplete'">
<view> {{ item.status == 1 ? '已完成' : '未完成' }} </view>
</view>
<!-- 头部：图标 + 信息 + 操作 -->
<view class="event-header">
<view class="event-info">
<view class="event-title">
<text class="event-id">{{ item.id }}</text>
<text class="event-tags">{{ item.tag }}</text>
</view>
</view>
</view>
<!-- 详情区域 -->
<view class="event-detail">
<text>申请人：xxx</text>
<text>电话号码：18888888888</text>
</view>
<view class="downloadReport">
<!-- <u-icon :name="item.status == 1 ? 'download' : 'upload'" color="#376cf3" size="40"></u-icon> -->
<uni-icons
:type="item.status == 1 ? 'download' : 'upload'"
size="16"
color="#376cf3"
></uni-icons>
{{ item.status == 1 ? '下载报告' : '生成报告' }}
</view>
</uni-card>
<uni-load-more :status="status"></uni-load-more>
</view>
<Cn-empty v-else></Cn-empty>
</view>
</view>
</template>
<script>
import Apply from './apply.vue'
export default {
components: { Apply },
props: {
indexList: {
type: Array,
default: () => [],
},
total: {
type: Number,
default: 0,
},
// status: {
// type: String,
// default: 'more',
// },
navHeight: {
type: Number,
default: 0,
},
},
data() {
return {
value: ['0'],
content: 123,
curSub: 0,
subsectionList: ['申请报表', '申请记录'],
form: {
type: 0,
lindId: '',
},
status: 'noMore',
eventList: [
{
id: '测试监测点',
tag: '2026-01-23至2026-01-23',
status: '1',
},
{
id: '测试监测点',
tag: '2026-01-23至2026-01-23',
status: '0',
},
],
}
},
created() {},
mounted() {},
computed: {},
methods: {
scrolltolower() {
this.$emit('scrolltolower')
},
getHeight() {},
sectionChange(index) {
this.curSub = index.currentIndex
},
},
watch: {},
}
</script>
<style lang="scss" scoped>
@import '@/pages/message1/index.scss';
.event-title {
justify-content: space-between;
}
.event-tags {
font-size: 24rpx;
}
.event-detail {
display: grid;
grid-template-columns: 1fr 1fr;
}
.downloadReport {
width: 100%;
background: #376cf320;
height: 60rpx;
line-height: 60rpx;
color: #376cf3;
font-weight: 600;
border-radius: 15rpx;
margin-top: 10rpx;
display: flex;
justify-content: center;
}
.title {
position: absolute;
left: 0px;
width: calc(100% - 36rpx);
// margin: 0 10px;
top: 0;
border-radius: 4px 4px 0 0;
padding: 2px 10px;
font-size: 24rpx;
font-weight: 600px;
display: flex;
justify-content: space-between;
font-weight: 700;
}
.completed {
background: #e1f3d8;
color: #67c23a;
}
.incomplete {
background: #fde2e2;
color: #f56c6c;
}
/deep/ .record {
.uni-card__content {
padding: 55rpx 20rpx 20rpx !important;
}
}
</style>

40
pages/index/index.vue
View File

@@ -16,9 +16,18 @@
</template>
<template slot="right">
<text class="hide-txt mr5" style="font-size: 28rpx"
>{{ select.engineeringName || emptyEngineeringName }}
>{{
userInfo.authorities === 'engineering_user'
? '创建工程'
: select.engineeringName || emptyEngineeringName
}}
</text>
<uni-icons type="bottom" size="16" color="#111" v-if="select.engineeringName"></uni-icons>
<uni-icons
type="bottom"
size="16"
color="#111"
v-if="select.engineeringName && userInfo.authorities != 'engineering_user'"
></uni-icons>
</template>
</uni-nav-bar>
<view class="index">
@@ -32,7 +41,13 @@
<ZhuYongHu :devCount="devCount" v-if="userInfo.authorities === 'app_vip_user'" />
<!-- 游客 -->
<YouKe :devCount="devCount" v-if="userInfo.authorities === 'tourist'"></YouKe>
<template v-show="engineeringList.length">
<!-- 工程列表 -->
<template v-show="engineeringList.length" v-if="userInfo.authorities === 'engineering_user'">
<view class="canneng-index-title mt20">工程列表</view>
<Engineering ref="engineering" :store="store" @refresh="store.search()"/>
</template>
<!-- 设备列表 -->
<template v-else v-show="engineeringList.length">
<view class="canneng-index-title mt20">设备列表</view>
<Device ref="device" :store="store" />
</template>
@@ -47,6 +62,7 @@ import ZhuYongHu from './comp/indexZhuYongHu.vue'
import ZhuanZhi from './comp/indexZhuanZhi.vue'
import YouKe from './comp/indexYouKe.vue'
import Device from './comp/device.vue'
import Engineering from './comp/engineering.vue'
import list from '../../common/js/list'
import { getDevCount } from '../../common/api/device.js'
import { queryEngineering } from '@/common/api/engineering.js'
@@ -60,6 +76,7 @@ export default {
ZhuanZhi,
YouKe,
Device,
Engineering,
},
data() {
return {
@@ -88,7 +105,11 @@ export default {
},
methods: {
selectEngineering() {
if (this.select.engineeringName) {
if (this.userInfo.authorities === 'engineering_user') {
uni.navigateTo({
url: '/pages/engineering/new',
})
} else if (this.select.engineeringName) {
uni.navigateTo({
url: '/pages/home/selectEngineering',
})
@@ -140,6 +161,7 @@ export default {
console.log(this.$refs.device, 'this.$refs.device')
this.$nextTick(() => {
this.$refs.device && this.$refs.device.init()
this.$refs.engineering && this.$refs.engineering.init()
})
}
this.$refs.gongCheng?.init()
@@ -175,7 +197,7 @@ export default {
if (messagePage) {
uni.setTabBarBadge({
index: 1,
text:messagePage ? (messagePage > 99 ? '99+' : messagePage + '') : '',
text: messagePage ? (messagePage > 99 ? '99+' : messagePage + '') : '',
})
} else {
uni.removeTabBarBadge({
@@ -197,8 +219,10 @@ export default {
// #endif
})
},
// 动态配置导航栏按钮
},
onLoad() {
// 页面加载时，动态配置导航栏按钮
if (!uni.getStorageSync(this.$cacheKey.access_token)) {
uni.reLaunch({
url: '/pages/user/login',
@@ -216,7 +240,11 @@ export default {
}, 1000)
}
this.timer = setInterval(this.getDevCount, 1000 * 60) // 定时请求
this.store = this.DataSource('/cs-device-boot/EquipmentDelivery/queryEquipmentByProject')
this.store =
uni.getStorageSync(this.$cacheKey.userInfo).authorities === 'engineering_user'
? this.DataSource('/cs-harmonic-boot/homePage/getEngineeringHomePage')
: this.DataSource('/cs-device-boot/EquipmentDelivery/queryEquipmentByProject')
// #ifdef APP-PLUS
setTimeout(() => {
// 获取nav高度

287
pages/index/message1.vue Normal file
View File

@@ -0,0 +1,287 @@
<template>
<Cn-page :loading="loading" class="messageBox" style="padding-top: 10px">
<view slot="body" class="message">
<view class="tabsBox">
<uni-segmented-control
:current="current"
:values="items"
style-type="text"
active-color="#376cf3"
@clickItem="onClickItem"
/>
<!-- 角标 -->
<view class="badge-container">
<span
v-for="(item, index) in items"
:key="index"
class="badge"
:style="{ left: getBadgeRightPosition(index) }"
v-if="badgeCounts[index] > 0"
>
{{ badgeCounts[index] > 99 ? '99+' : badgeCounts[index] }}
</span>
</view>
<!-- 筛选条件 -->
<Cn-filterCriteria
ref="cnFilterCriteria"
:level="current === 0 ? 3 : current === 1 ? 3 : 2"
@select="select"
>
</Cn-filterCriteria>
</view>
<view class="content">
<Transient
ref="TransientRef"
v-if="current === 0"
:navHeight="navHeight"
:selectValue="selectValue"
@getDevCount="getDevCount"
/>
<SteadyState
ref="SteadyStateRef"
v-if="current === 1"
:navHeight="navHeight"
:selectValue="selectValue"
@getDevCount="getDevCount"
/>
<Alarm
ref="AlarmRef"
v-if="current === 2"
:navHeight="navHeight"
:selectValue="selectValue"
@getDevCount="getDevCount"
/>
<Run
ref="RunRef"
v-if="current === 3"
:navHeight="navHeight"
:selectValue="selectValue"
@getDevCount="getDevCount"
/>
</view>
</view>
</Cn-page>
</template>
<script>
import Transient from '@/pages/message1/transient.vue'
import SteadyState from '@/pages/message1/steadyState.vue'
import Alarm from '@/pages/message1/alarm.vue'
import Run from '@/pages/message1/run.vue'
import { getDevCount } from '../../common/api/device.js'
import { updateStatus } from '@/common/api/message'
export default {
components: { Transient, SteadyState, Alarm, Run },
props: {},
data() {
return {
items: ['暂态事件', '稳态事件', '运行告警', '运行事件'],
badgeCounts: [0, 0, 0, 0],
current: 0,
colorIndex: 0,
item: '',
loading: false,
width: 0,
navHeight: 0,
selectValue: {},
devCount: [],
// 筛选数据
}
},
onLoad() {},
mounted() {
this.setHeight()
},
onPullDownRefresh() {
this.refresh()
},
onNavigationBarButtonTap(e) {
uni.showModal({
title: '提示',
content: '确定要全部标记为已读吗？',
success: (res) => {
if (res.confirm) {
updateStatus({
// '暂态事件', 0
// '稳态事件', 1
// '运行告警', 3
// '运行事件' 2
type: this.current == 2 ? 3 : this.current == 3 ? 2 : this.current,
eventIds: [],
}).then(() => {
this.refresh()
this.getDevCount()
})
}
},
})
},
onShow() {
this.getDevCount()
this.$nextTick(() => {
this.refresh()
this.$refs.cnFilterCriteria.getProjectList()
})
},
methods: {
setHeight() {
uni.createSelectorQuery()
.select('.tabsBox')
.boundingClientRect((rect) => {
this.width = rect.width
//
// #ifdef H5
this.navHeight = rect.height + 70
// #endif
// #ifdef APP-PLUS
this.navHeight = rect.height + 20
// #endif
})
.exec()
},
refresh() {
switch (this.current) {
case 0:
// this.$refs.TransientRef.getConfig()
// this.$refs.TransientRef.filterValue = ''
this.$refs.TransientRef.store.reload()
break
case 1:
this.$refs.SteadyStateRef.store.reload()
break
case 2:
this.$refs.AlarmRef.store.reload()
break
case 3:
this.$refs.RunRef.store.reload()
break
}
},
onClickItem(e) {
if (this.current !== e.currentIndex) {
this.current = e.currentIndex
}
},
select(value) {
this.selectValue = value
setTimeout(() => {
this.setHeight()
}, 100)
},
getDevCount() {
if (uni.getStorageSync('projectList')[1] != undefined) {
getDevCount(uni.getStorageSync('projectList')[1].engineeringId).then((res) => {
this.devCount = res.data
this.badgeCounts = [
this.devCount.eventCount,
this.devCount.harmonicCount,
this.devCount.alarmCount,
this.devCount.runCount,
]
uni.setStorage({
key: this.$cacheKey.messageCount,
data: this.devCount,
})
let messagePage =
this.devCount.runCount +
this.devCount.eventCount +
this.devCount.alarmCount +
this.devCount.harmonicCount
let minePage = this.devCount.feedBackCount
if (messagePage) {
uni.setTabBarBadge({
index: 1,
text: messagePage ? (messagePage > 99 ? '99+' : messagePage + '') : '',
})
} else {
uni.removeTabBarBadge({
index: 1,
})
}
if (minePage) {
uni.setTabBarBadge({
index: 2,
text: minePage + '',
})
} else {
uni.removeTabBarBadge({
index: 2,
})
}
// #ifdef APP-PLUS
plus.runtime.setBadgeNumber(messagePage + minePage)
// #endif
})
}
},
// 根据索引动态计算右侧偏移位置，使徽章对准每个标签的右上角
getBadgeRightPosition(index) {
return (index + 1) * (this.width / 4) + 'px'
},
},
computed: {},
}
</script>
<style lang="scss">
.messageBox {
overflow: hidden;
/deep/.tabsBox {
position: relative;
background-color: #fff;
.segmented-control {
height: 49px;
background-color: #fff;
border-bottom: 1px solid #cccccc70;
}
.segmented-control__text {
font-size: 27rpx !important;
color: rgb(96, 98, 102);
}
.segmented-control__item--text {
font-weight: bold;
}
.choose {
// padding: 20rpx;
// display: flex;
// justify-content: space-between;
// align-items: center;
background: #fff;
}
}
.subsection {
width: 90%;
margin: 20rpx auto;
}
.badge-container {
position: absolute;
top: 10rpx; /* 徽章向上偏移，与控件重叠 */
right: 0;
width: 100%;
height: 0;
pointer-events: none; /* 确保徽章不干扰点击事件 */
}
.badge {
position: absolute;
// min-width: 18px;
height: 16px;
padding: 0 4px;
background-color: #ff3b30; /* 红色徽章 */
color: white;
font-size: 22rpx;
line-height: 16px;
text-align: center;
border-radius: 9px;
transform: translateX(-150%); /* 使徽章中心对齐右上角 */
}
}
</style>

765
pages/index/mine.vue
View File

@@ -1,382 +1,383 @@
<template>
<view :loading="loading">
<view class="mine">
<view class="mine-header" @click="jump('basic')">
<image mode="aspectFill" class="mine-header-head" :src="userInfo.avatar" v-if="userInfo.avatar" />
<image mode="aspectFill" class="mine-header-head" src="/static/head.png" v-else />
<view class="mine-header-name hide-txt">
<view>{{ userInfo.nickname }}</view>
<view></view>
<view class="tag">{{ roleName }}</view>
</view>
<image
src="/static/erweima.png"
style="height: 50rpx; width: 50rpx; border-radius: 12rpx"
mode="scaleToFill"
/>
<uni-icons type="forward" color="#aaa" size="16"></uni-icons>
</view>
<view class="mine-nav" v-if="userInfo.authorities === 'tourist'" @click="jump('upgrade')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/server.png" />
<view class="mine-nav-label">角色升级</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<!-- <view class="mine-nav" @click="jump('audit')" v-if="userInfo.authorities === 'app_vip_user'">
<image mode="aspectFill" class="mine-nav-icon" src="/static/server.png" />
<view class="mine-nav-label">角色审核</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view> -->
<!-- <view class="mine-nav" @click="jump('user')" v-if="userInfo.authorities === 'app_vip_user'">
<image mode="aspectFill" class="mine-nav-icon" src="/static/subordinate.png" />
<view class="mine-nav-label">分享用户列表</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view> -->
<view
class="mine-nav"
@click="jump('scan')"
v-if="userInfo.authorities === 'app_vip_user' || userInfo.authorities === 'engineering_user'"
>
<image mode="aspectFill" class="mine-nav-icon" src="/static/scan.png" />
<view class="mine-nav-label">扫一扫</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('engineering')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/gongcheng.png" />
<view class="mine-nav-label">工程管理</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('project')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/project.png" />
<view class="mine-nav-label">项目管理</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('feedback')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/feedback.png" />
<view class="mine-nav-label">反馈列表</view>
<uni-badge :text="messageCount.feedBackCount"></uni-badge>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<!-- <view
class="mine-nav"
@click="jump('gateway')"
style="border-bottom: none; box-shadow: 0 4rpx 8rpx #e7e7e74c"
>
<image mode="aspectFill" class="mine-nav-icon" src="/static/gateway.png" />
<view class="mine-nav-label">网关列表</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view> -->
<view class="mine-nav" @click="jump('setupMessage')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/message4.png" />
<view class="mine-nav-label">推送通知设置</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view
class="mine-nav"
@click="jump('engineering/setting')"
v-if="userInfo.authorities === 'engineering_user'"
>
<image mode="aspectFill" class="mine-nav-icon" src="/static/like.png" />
<view class="mine-nav-label">关注工程配置</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('serverSetting')" v-if="userInfo.authorities === 'engineering_user'">
<image mode="aspectFill" class="mine-nav-icon" src="/static/server2.png" />
<view class="mine-nav-label">调试内容配置</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('setup')" style="border-bottom: none">
<image mode="aspectFill" class="mine-nav-icon" src="/static/setup.png" />
<view class="mine-nav-label">设置</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog
ref="inputClose"
mode="input"
title="角色升级"
placeholder="请输入六位邀请码"
@confirm="upgrade"
></uni-popup-dialog>
</uni-popup>
</view>
<uni-popup ref="alertDialog" type="dialog">
<uni-popup-dialog
style="width: 90%; margin: 5%"
type="info"
cancelText="禁止"
confirmText="允许"
title="权限说明"
content='是否允许"灿能物联"使用相机?'
@confirm="handleScon('camera')"
@close="dialogClose"
></uni-popup-dialog>
</uni-popup>
<uni-popup ref="message" type="message">
<uni-popup-message type="info" :duration="0" style="width: 90%; margin: 5%">
<view style="color: #909399; font-style: 16px">相机权限使用说明:</view>
<view style="color: #6c6c6c; margin-top: 3rpx; ">　用于相机扫描二维码!</view>
</uni-popup-message>
</uni-popup>
<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="CAMERA"></yk-authpup>
</view>
</template>
<script>
import { roleUpdate, autoLogin } from '@/common/api/user'
import { transferDevice, shareDevice } from '@/common/api/device'
import ykAuthpup from "@/components/yk-authpup/yk-authpup";
export default {
components: {
ykAuthpup
},
data() {
return {
loading: true,
userInfo: {},
messageCount: {},
timer: null,
}
},
computed: {
roleName() {
let roleName = ''
switch (this.userInfo.authorities) {
case 'tourist':
roleName = '游客'
break
case 'engineering_user':
roleName = '工程用户'
break
case 'app_vip_user':
roleName = '正式用户'
break
case 'market_user':
roleName = '营销用户'
break
case 'operation_manager':
roleName = '运维管理员'
break
}
return roleName
},
},
onLoad(options) {
this.init()
},
methods: {
init() {},
upgrade(code) {
console.log(code)
roleUpdate({
referralCode: code,
userId: this.userInfo.userIndex,
}).then((res) => {
uni.showToast({
title: '升级成功',
icon: 'none',
})
uni.removeStorageSync('access_token')
// 直接登录
autoLogin(this.userInfo.user_name).then((res) => {
this.$util.loginSuccess(res.data).then((userInfo) => {
this.userInfo = userInfo
})
})
})
},
changeAuth(){
//这里是权限通过后执行自己的代码逻辑
console.log('权限已授权，可执行自己的代码逻辑了');
// this.handleScon()
this.handleScon()
},
jump(type) {
switch (type) {
case 'scan':
if (
plus.os.name == 'Android'
// && plus.navigator.checkPermission('android.permission.CAMERA') === 'undetermined'
) {
//未授权
// this.$refs.alertDialog.open('bottom')
this.$refs['authpup'].open()
// this.$refs.message.open()
} else {
console.log(2)
this.handleScon()
}
break
case 'login':
uni.navigateTo({
url: `/pages/user/login`,
})
break
case 'gateway':
uni.navigateTo({
url: `/pages/gateway/list`,
})
break
case 'upgrade':
this.$refs.inputDialog.open()
break
case 'basic':
uni.navigateTo({
url: `/pages/user/basic`,
})
break
case 'project':
uni.navigateTo({
url: `/pages/project/list`,
})
break
case 'engineering':
uni.navigateTo({
url: `/pages/engineering/list`,
})
break
case 'engineering/setting':
uni.navigateTo({
url: `/pages/engineering/setting`,
})
break
case 'feedback':
uni.navigateTo({
url: `/pages/message/feedback`,
})
break
default:
uni.navigateTo({
url: `/pages/mine/${type}`,
})
break
}
},
handleScon(){
this.$refs.message.close()
uni.scanCode({
onlyFromCamera:true,
success: (res) => {
console.log('条码类型：' + res.scanType)
console.log('条码内容：' + res.result)
let content = JSON.parse(res.result)
switch (content.type) {
case 'transferDevice':
this.transferDevice(content.id.split(','))
break
case 'shareDevice':
this.shareDevice(content.id.split(','))
break
default:
this.$util.toast('无效二维码')
break
}
},
})
},
dialogClose(){this.$refs.message.close()},
transferDevice(id) {
transferDevice(id).then((res) => {
uni.navigateTo({ url: '/pages/mine/result?type=transferDevice&id=' + id })
})
},
shareDevice(id) {
shareDevice(id).then((res) => {
uni.navigateTo({ url: '/pages/mine/result?type=shareDevice&id=' + id })
})
},
},
onShow() {
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
this.loading = false
this.messageCount = uni.getStorageSync(this.$cacheKey.messageCount) || {}
this.timer = setInterval(() => {
this.messageCount = uni.getStorageSync(this.$cacheKey.messageCount) || {}
}, 1000) // 定时请求
},
onHide() {
clearInterval(this.timer)
},
}
</script>
<style lang="scss">
.mine {
.mine-header {
padding: 200rpx 34rpx 34rpx;
display: flex;
align-items: center;
background: $uni-theme-white;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 8rpx #e7e7e74c;
.mine-header-head {
margin-right: 30rpx;
height: 128rpx;
width: 128rpx;
border-radius: $uni-theme-radius;
overflow: hidden;
}
.mine-header-name {
margin-right: 30rpx;
flex: 1;
font-size: 36rpx;
color: #111;
font-weight: 700;
.tag {
display: flex;
align-items: center;
margin-top: 10rpx;
font-size: 24rpx;
color: #aaa;
.engineering-button {
margin-left: 10rpx;
font-size: 24rpx;
padding: 5rpx 12rpx;
color: #fff;
font-weight: 400;
border-radius: 16rpx;
background: $uni-theme-color;
}
}
}
}
.mine-nav {
padding: 34rpx;
display: flex;
align-items: center;
background: $uni-theme-white;
border-bottom: 1rpx solid #e8e8e8;
&-icon {
margin-right: 30rpx;
height: 44rpx;
width: 44rpx;
border-radius: $uni-theme-radius;
overflow: hidden;
}
&-label {
margin-right: 30rpx;
flex: 1;
font-size: 28rpx;
color: #111;
}
}
}
/deep/ .uni-popup-message__box {
border-radius: 10rpx !important;
background-color: #fff;
}
</style>
</style>
<template>
<view :loading="loading">
<view class="mine">
<view class="mine-header" @click="jump('basic')">
<image mode="aspectFill" class="mine-header-head" :src="userInfo.avatar" v-if="userInfo.avatar" />
<image mode="aspectFill" class="mine-header-head" src="/static/head.png" v-else />
<view class="mine-header-name hide-txt">
<view>{{ userInfo.nickname }}</view>
<view></view>
<view class="tag">{{ roleName }}</view>
</view>
<image
src="/static/erweima.png"
style="height: 50rpx; width: 50rpx; border-radius: 12rpx"
mode="scaleToFill"
/>
<uni-icons type="forward" color="#aaa" size="16"></uni-icons>
</view>
<view class="mine-nav" v-if="userInfo.authorities === 'tourist'" @click="jump('upgrade')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/server.png" />
<view class="mine-nav-label">角色升级</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<!-- <view class="mine-nav" @click="jump('audit')" v-if="userInfo.authorities === 'app_vip_user'">
<image mode="aspectFill" class="mine-nav-icon" src="/static/server.png" />
<view class="mine-nav-label">角色审核</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view> -->
<!-- <view class="mine-nav" @click="jump('user')" v-if="userInfo.authorities === 'app_vip_user'">
<image mode="aspectFill" class="mine-nav-icon" src="/static/subordinate.png" />
<view class="mine-nav-label">分享用户列表</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view> -->
<view
class="mine-nav"
@click="jump('scan')"
v-if="userInfo.authorities === 'app_vip_user' || userInfo.authorities === 'engineering_user'"
>
<image mode="aspectFill" class="mine-nav-icon" src="/static/scan.png" />
<view class="mine-nav-label">扫一扫</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('engineering')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/gongcheng.png" />
<view class="mine-nav-label">工程管理</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('project')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/project.png" />
<view class="mine-nav-label">项目管理</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('feedback')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/feedback.png" />
<view class="mine-nav-label">反馈列表</view>
<uni-badge :text="messageCount.feedBackCount"></uni-badge>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<!-- <view
class="mine-nav"
@click="jump('gateway')"
style="border-bottom: none; box-shadow: 0 4rpx 8rpx #e7e7e74c"
>
<image mode="aspectFill" class="mine-nav-icon" src="/static/gateway.png" />
<view class="mine-nav-label">网关列表</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view> -->
<view class="mine-nav" @click="jump('setupMessage')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/message4.png" />
<view class="mine-nav-label">推送通知设置</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view
class="mine-nav"
@click="jump('engineering/setting')"
v-if="userInfo.authorities === 'engineering_user'"
>
<image mode="aspectFill" class="mine-nav-icon" src="/static/like.png" />
<view class="mine-nav-label">关注工程配置</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('transientSetting')" >
<!-- 调试内容配置 serverSetting-->
<image mode="aspectFill" class="mine-nav-icon" src="/static/server2.png" />
<view class="mine-nav-label">暂态事件</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('setup')" style="border-bottom: none">
<image mode="aspectFill" class="mine-nav-icon" src="/static/setup.png" />
<view class="mine-nav-label">设置</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog
ref="inputClose"
mode="input"
title="角色升级"
placeholder="请输入六位邀请码"
@confirm="upgrade"
></uni-popup-dialog>
</uni-popup>
</view>
<uni-popup ref="alertDialog" type="dialog">
<uni-popup-dialog
style="width: 90%; margin: 5%"
type="info"
cancelText="禁止"
confirmText="允许"
title="权限说明"
content='是否允许"灿能物联"使用相机?'
@confirm="handleScon('camera')"
@close="dialogClose"
></uni-popup-dialog>
</uni-popup>
<uni-popup ref="message" type="message">
<uni-popup-message type="info" :duration="0" style="width: 90%; margin: 5%">
<view style="color: #909399; font-style: 16px">相机权限使用说明:</view>
<view style="color: #6c6c6c; margin-top: 3rpx; ">　用于相机扫描二维码!</view>
</uni-popup-message>
</uni-popup>
<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="CAMERA"></yk-authpup>
</view>
</template>
<script>
import { roleUpdate, autoLogin } from '@/common/api/user'
import { transferDevice, shareDevice } from '@/common/api/device'
import ykAuthpup from "@/components/yk-authpup/yk-authpup";
export default {
components: {
ykAuthpup
},
data() {
return {
loading: true,
userInfo: {},
messageCount: {},
timer: null,
}
},
computed: {
roleName() {
let roleName = ''
switch (this.userInfo.authorities) {
case 'tourist':
roleName = '游客'
break
case 'engineering_user':
roleName = '工程用户'
break
case 'app_vip_user':
roleName = '正式用户'
break
case 'market_user':
roleName = '营销用户'
break
case 'operation_manager':
roleName = '运维管理员'
break
}
return roleName
},
},
onLoad(options) {
this.init()
},
methods: {
init() {},
upgrade(code) {
console.log(code)
roleUpdate({
referralCode: code,
userId: this.userInfo.userIndex,
}).then((res) => {
uni.showToast({
title: '升级成功',
icon: 'none',
})
uni.removeStorageSync('access_token')
// 直接登录
autoLogin(this.userInfo.user_name).then((res) => {
this.$util.loginSuccess(res.data).then((userInfo) => {
this.userInfo = userInfo
})
})
})
},
changeAuth(){
//这里是权限通过后执行自己的代码逻辑
console.log('权限已授权，可执行自己的代码逻辑了');
// this.handleScon()
this.handleScon()
},
jump(type) {
switch (type) {
case 'scan':
if (
plus.os.name == 'Android'
// && plus.navigator.checkPermission('android.permission.CAMERA') === 'undetermined'
) {
//未授权
// this.$refs.alertDialog.open('bottom')
this.$refs['authpup'].open()
// this.$refs.message.open()
} else {
console.log(2)
this.handleScon()
}
break
case 'login':
uni.navigateTo({
url: `/pages/user/login`,
})
break
case 'gateway':
uni.navigateTo({
url: `/pages/gateway/list`,
})
break
case 'upgrade':
this.$refs.inputDialog.open()
break
case 'basic':
uni.navigateTo({
url: `/pages/user/basic`,
})
break
case 'project':
uni.navigateTo({
url: `/pages/project/list`,
})
break
case 'engineering':
uni.navigateTo({
url: `/pages/engineering/list`,
})
break
case 'engineering/setting':
uni.navigateTo({
url: `/pages/engineering/setting`,
})
break
case 'feedback':
uni.navigateTo({
url: `/pages/message/feedback`,
})
break
default:
uni.navigateTo({
url: `/pages/mine/${type}`,
})
break
}
},
handleScon(){
this.$refs.message.close()
uni.scanCode({
onlyFromCamera:true,
success: (res) => {
console.log('条码类型：' + res.scanType)
console.log('条码内容：' + res.result)
let content = JSON.parse(res.result)
switch (content.type) {
case 'transferDevice':
this.transferDevice(content.id.split(','))
break
case 'shareDevice':
this.shareDevice(content.id.split(','))
break
default:
this.$util.toast('无效二维码')
break
}
},
})
},
dialogClose(){this.$refs.message.close()},
transferDevice(id) {
transferDevice(id).then((res) => {
uni.navigateTo({ url: '/pages/mine/result?type=transferDevice&id=' + id })
})
},
shareDevice(id) {
shareDevice(id).then((res) => {
uni.navigateTo({ url: '/pages/mine/result?type=shareDevice&id=' + id })
})
},
},
onShow() {
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
this.loading = false
this.messageCount = uni.getStorageSync(this.$cacheKey.messageCount) || {}
this.timer = setInterval(() => {
this.messageCount = uni.getStorageSync(this.$cacheKey.messageCount) || {}
}, 1000) // 定时请求
},
onHide() {
clearInterval(this.timer)
},
}
</script>
<style lang="scss">
.mine {
.mine-header {
padding: 200rpx 34rpx 34rpx;
display: flex;
align-items: center;
background: $uni-theme-white;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 8rpx #e7e7e74c;
.mine-header-head {
margin-right: 30rpx;
height: 128rpx;
width: 128rpx;
border-radius: $uni-theme-radius;
overflow: hidden;
}
.mine-header-name {
margin-right: 30rpx;
flex: 1;
font-size: 36rpx;
color: #111;
font-weight: 700;
.tag {
display: flex;
align-items: center;
margin-top: 10rpx;
font-size: 24rpx;
color: #aaa;
.engineering-button {
margin-left: 10rpx;
font-size: 24rpx;
padding: 5rpx 12rpx;
color: #fff;
font-weight: 400;
border-radius: 16rpx;
background: $uni-theme-color;
}
}
}
}
.mine-nav {
padding: 34rpx;
display: flex;
align-items: center;
background: $uni-theme-white;
border-bottom: 1rpx solid #e8e8e8;
&-icon {
margin-right: 30rpx;
height: 44rpx;
width: 44rpx;
border-radius: $uni-theme-radius;
overflow: hidden;
}
&-label {
margin-right: 30rpx;
flex: 1;
font-size: 28rpx;
color: #111;
}
}
}
/deep/ .uni-popup-message__box {
border-radius: 10rpx !important;
background-color: #fff;
}
</style>

171
pages/index/report.vue Normal file
View File

@@ -0,0 +1,171 @@
<template>
<view :loading="loading" class="report" style="padding-top: 10px">
<view class="navReport">
<view class="tabsBox">
<uni-segmented-control
:current="curTabs"
:values="items"
style-type="text"
active-color="#376cf3"
@clickItem="onClickItem"
/>
</view>
</view>
<!-- 稳态报表 -->
<SteadyState
v-if="curTabs == 0"
:indexList="indexList"
:total="total"
:status="status"
:navHeight="navHeight"
@scrolltolower="scrolltolower"
/>
<!-- 暂态报表 -->
<Transient
v-if="curTabs == 1"
:indexList="indexList"
:total="total"
:status="status"
:navHeight="navHeight"
@scrolltolower="scrolltolower"
/>
</view>
</template>
<script>
import SteadyState from './comp/steadyState.vue'
import Transient from './comp/transient.vue'
export default {
components: {
SteadyState,
Transient,
},
props: {},
data() {
return {
curTabs: 0,
total: 6,
loading: false,
items: ['稳态报表', '暂态报表'],
status: 'more', //more加载前 loading加载中 noMore加载后
navHeight: 0,
indexList: [
{
name: '测试监测点',
item: '2022-01-01至2022-01-01',
type: '1',
status: '1',
},
{
name: '测试监测点',
item: '2022-01-01至2022-01-01',
type: '2',
status: '1',
},
{
name: '测试监测点',
item: '2022-01-01至2022-01-01',
type: '1',
status: '1',
},
{
name: '测试监测点',
item: '2022-01-01至2022-01-01',
type: '1',
status: '0',
},
{
name: '测试监测点',
item: '2022-01-01至2022-01-01',
type: '1',
status: '0',
},
{
name: '测试监测点',
item: '2022-01-01至2022-01-01',
type: '1',
status: '0',
},
],
}
},
created() {},
mounted() {
uni.createSelectorQuery()
.select('.navReport')
.boundingClientRect((rect) => {
//
// #ifdef H5
this.navHeight = rect.height + 60
// #endif
// #ifdef APP-PLUS
this.navHeight = rect.height + 10
// #endif
})
.exec()
},
methods: {
onClickItem(e) {
if (this.curTabs !== e.currentIndex) {
this.curTabs = e.currentIndex
}
},
scrolltolower() {
if (this.total != this.indexList.length) {
this.status = 'loading'
this.info()
} else {
this.status = 'noMore'
}
},
info() {
setTimeout(() => {
this.status = 'more'
}, 1000)
},
},
computed: {},
watch: {},
}
</script>
<style lang="scss">
.report {
overflow: hidden;
/deep/ .u-tabs__wrapper__nav {
background: #fff;
}
/deep/ .u-tabs__wrapper__nav__item {
flex: 1;
}
/deep/ .u-tabs__wrapper__nav__line {
left: 80rpx;
}
/deep/ .u-u-subsection {
width: 80% !important;
}
/deep/.tabsBox {
border-bottom: 1px solid #cccccc70;
.segmented-control {
height: 49px;
background-color: #fff;
}
.segmented-control__text {
font-size: 27rpx !important;
color: rgb(96, 98, 102);
}
.segmented-control__item--text {
font-weight: bold;
}
}
}
</style>

182
pages/message/messageDetail.vue
View File

@@ -1,91 +1,91 @@
<template>
<Cn-page :loading="loading">
<view class="detail" slot="body">
<view class="detail-content" style="font-size: 32rpx">
<!-- <view class="detail-content-title mb20">发生时间</view> -->
<view>{{ detail.startTime }}</view>
</view>
<view class="detail-content">
<view class="detail-content-title mb20">基础信息</view>
<view class="mb5"> 设备名称：{{ detail.equipmentName }}</view>
<view class="mb5"> 项目名称：{{ detail.projectName }} </view>
<view class="mb5"> 工程名称：{{ detail.engineeringName }} </view>
<view class="mb5"> 事件名称：{{ detail.showName }}</view>
<view class="mb5" v-for="(item, textIndex) in detail.dataSet" :key="textIndex">
{{ item.showName + '：' + (item.value == 3.1415926 ? '-' : item.value) + (item.unit || '') }}
</view>
</view>
<view class="detail-content">
<view class="detail-content-title mb20">瞬时波形图</view>
<image
style="width: 100%"
:src="detail.instantPics"
mode="widthFix"
v-if="detail.instantPics"
@click="previewImage(detail.instantPics)"
/>
<text v-else>暂无</text>
</view>
<view class="detail-content">
<view class="detail-content-title mb20">RMS波形图</view>
<image
style="width: 100%"
:src="detail.rmsPics"
mode="widthFix"
v-if="detail.rmsPics"
@click="previewImage(detail.rmsPics)"
/>
<text v-else>暂无</text>
</view>
</view>
</Cn-page>
</template>
<script>
import { updateStatus } from '@/common/api/message'
export default {
data() {
return {
loading: true,
detail: {},
}
},
onLoad(options) {
console.log(options.detail)
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
this.detail.rmsPics && (this.detail.rmsPics = this.$config.static + this.detail.rmsPics)
this.detail.instantPics && (this.detail.instantPics = this.$config.static + this.detail.instantPics)
this.loading = false
if (this.detail.status != 1) {
updateStatus({
eventIds: [this.detail.id],
})
}
},
methods: {
previewImage(url) {
uni.previewImage({
urls: [url],
})
},
},
}
</script>
<style lang="scss">
.detail {
padding: 20rpx 0;
.detail-content {
padding: 20rpx;
background: #fff;
margin-bottom: 20rpx;
font-size: 26rpx;
.detail-content-title {
font-size: 32rpx;
color: #111;
font-weight: 700;
}
}
}
</style>
<template>
<Cn-page :loading="loading">
<view class="detail" slot="body">
<view class="detail-content" style="font-size: 32rpx">
<!-- <view class="detail-content-title mb20">发生时间</view> -->
<view>{{ detail.startTime }}</view>
</view>
<view class="detail-content">
<view class="detail-content-title mb20">基础信息</view>
<view class="mb5"> 设备名称：{{ detail.equipmentName }}</view>
<view class="mb5"> 项目名称：{{ detail.projectName }} </view>
<view class="mb5"> 工程名称：{{ detail.engineeringName }} </view>
<view class="mb5"> 事件名称：{{ detail.showName }}</view>
<view class="mb5" v-for="(item, textIndex) in detail.dataSet" :key="textIndex">
{{ item.showName + '：' + (item.value == 3.1415926 ? '-' : item.value) + (item.unit || '') }}
</view>
</view>
<view class="detail-content">
<view class="detail-content-title mb20">瞬时波形图</view>
<image
style="width: 100%"
:src="detail.instantPics"
mode="widthFix"
v-if="detail.instantPics"
@click="previewImage(detail.instantPics)"
/>
<text v-else>暂无</text>
</view>
<view class="detail-content">
<view class="detail-content-title mb20">RMS波形图</view>
<image
style="width: 100%"
:src="detail.rmsPics"
mode="widthFix"
v-if="detail.rmsPics"
@click="previewImage(detail.rmsPics)"
/>
<text v-else>暂无</text>
</view>
</view>
</Cn-page>
</template>
<script>
import { updateStatus } from '@/common/api/message'
export default {
data() {
return {
loading: true,
detail: {},
}
},
onLoad(options) {
console.log(options.detail)
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
this.detail.rmsPics && (this.detail.rmsPics = this.$config.static + this.detail.rmsPics)
this.detail.instantPics && (this.detail.instantPics = this.$config.static + this.detail.instantPics)
this.loading = false
if (this.detail.status != 1) {
updateStatus({
eventIds: [this.detail.id],
})
}
},
methods: {
previewImage(url) {
uni.previewImage({
urls: [url],
})
},
},
}
</script>
<style lang="scss">
.detail {
padding: 20rpx 0;
.detail-content {
padding: 20rpx;
background: #fff;
margin-bottom: 20rpx;
font-size: 26rpx;
.detail-content-title {
font-size: 32rpx;
color: #111;
font-weight: 700;
}
}
}
</style>

126
pages/message1/alarm.vue Normal file
View File

@@ -0,0 +1,126 @@
<template>
<view style="position: relative">
<!-- 运行告警 -->
<!-- 卡片 -->
<view class="event-list" :style="{ height: 'calc(100vh - ' + (navHeight + 10) + 'px)', overflow: 'auto' }">
<!-- 循环渲染事件项 -->
<uni-card
class="event-item"
:class="item.type"
v-for="(item, index) in this.store.data"
:key="index"
@click="jump(item)"
>
<!-- 头部：图标 + 信息 + 操作 -->
<view class="event-header">
<view class="event-icon">
<!-- 动态图标：根据类型切换 -->
<uni-icons
custom-prefix="iconfont"
type="icon-terminal-box-fill"
size="22"
color="#FF0000"
></uni-icons>
<view class="badge1" v-if="item.isRead == 0"> </view>
</view>
<view class="event-info">
<view class="event-title">
<text class="event-id">{{ item.date }}发生告警终端{{ item.warnNums }}台</text>
</view>
</view>
<view class="event-action"> 🔍 </view>
</view>
</uni-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 style="top: 20%"></Cn-empty>
</view>
</view>
</template>
<script>
import list from '@/common/js/list'
export default {
components: {},
props: {
navHeight: {
type: Number,
default: 0,
},
selectValue: {
type: Object,
// default: () => {},
},
},
mixins: [list],
data() {
return {
status: 'noMore', //more加载前 loading加载中 noMore加载后
}
},
mounted() {},
methods: {
init() {
this.store = this.DataSource('/cs-harmonic-boot/csAlarm/queryAlarmList')
this.store.params.pageSize = 10000
this.store.params.engineerId = this.selectValue.engineeringId
this.store.params.projectId = this.selectValue.projectId
this.store.params.devId = this.selectValue.deviceId
this.store.params.lineId = this.selectValue.lineId
this.store.params.time = this.selectValue.date
this.store.loadedCallback = () => {
this.loading = false
}
this.store.reload()
},
jump(item) {
let str = JSON.stringify(item).replace(/%/g, '百分比')
item.status = '1'
uni.navigateTo({ url: '/pages/message1/comp/alarmDetails?detail=' + encodeURIComponent(str) })
},
},
computed: {},
watch: {
selectValue: {
handler(val, oldVal) {
if (Object.keys(val).length === 0) return
this.init()
},
deep: true,
immediate: true,
},
},
}
</script>
<style lang="scss" scoped>
@import './index.scss';
/* 列表容器 */
.event-list {
margin-top: 20rpx;
/* 头部：图标 + 信息 + 操作 */
.event-header {
margin-bottom: 0rpx;
}
.event-title {
margin-bottom: 0rpx;
}
/* 图标区域（按类型区分背景色） */
.event-icon {
width: 70rpx;
height: 70rpx;
background-color: #ff000020;
}
/* 信息区域 */
.event-info {
flex: 1;
}
}
</style>

231
pages/message1/comp/F47.vue Normal file
View File

@@ -0,0 +1,231 @@
<template>
<!-- ITIC -->
<view>
<l-echart v-if="status != 'loading'" ref="echartRef" @finished="initChart"></l-echart>
<uni-load-more v-else :status="status"></uni-load-more>
</view>
</template>
<script>
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
export default {
components: {},
props: {
store: {
type: [Object],
},
},
data() {
return {
option: {
backgroundColor: '#fff',
grid: {
left: '10px',
right: '40rpx',
bottom: '40rpx',
top: '10px',
containLabel: true,
},
legend: {
data: ['分割线', '可容忍事件', '不可容忍事件'],
right: '10px',
bottom: '10px',
textStyle: {
fontSize: 10,
},
itemWidth: 10,
itemHeight: 10,
itemGap: 8,
padding: [5, 5, 5, 10],
},
yAxis: {
type: 'log',
min: '0.001',
max: '1000',
name: 's',
inverse: true,
axisLabel: {
rotate: -90,
},
splitLine: { show: false },
},
xAxis: {
type: 'value',
splitNumber: 10,
minInterval: 3,
position: 'top',
rotate: 90,
axisLabel: {
rotate: -90,
},
name: '%',
},
series: [
{
name: '分割线',
type: 'line',
data: [
[0, 0.05],
[50, 0.05],
[50, 0.2],
[70, 0.2],
[70, 0.5],
[80, 0.5],
[80, 10],
[80, 1000],
],
showSymbol: false,
tooltips: {
show: false,
},
color: '#DAA520',
},
{
name: '可容忍事件',
type: 'scatter',
symbol: 'circle',
// data: this.pointF,
data: [],
color: 'green',
},
{
name: '不可容忍事件',
type: 'scatter',
symbol: 'circle',
// data: this.pointFun,
data: [],
color: 'red',
},
],
},
status: 'loading',
echartRef: null,
pointF: [],
pointFun: [],
data: [],
}
},
mounted() {
// this.initChart()
// console.log('🚀 ~ props.data:', this.props.data)
},
methods: {
init() {},
async initChart() {
if (!this.$refs.echartRef) return
try {
this.echartRef = await this.$refs.echartRef.init(echarts)
this.bindChartClickEvent()
this.echartRef.setOption(this.option, true)
} catch (error) {
console.error('图表初始化失败:', error)
}
},
gongfunction() {
var standF = 0
var unstandF = 0
this.pointF = []
this.pointFun = []
var total = 0
total = this.data.length
if (total == 0) {
} else {
for (var i = 0; i < this.data.length; i++) {
var point = []
var xx = this.data[i].evtParamTm.replace(/s/g, '')
var yy = this.data[i].evtParamVVaDepth.replace(/%/g, '')
var time = this.data[i].startTime.replace('T', ' ')
point = [yy, xx, time, this.data[i]]
if (xx < 0.05) {
standF++
this.pointF.push({
value: point,
itemStyle: { normal: { color: 'green' } },
})
} else if (xx < 0.2) {
if (yy > 50) {
standF++
this.pointF.push({
value: point,
itemStyle: { normal: { color: 'green' } },
})
} else {
unstandF++
this.pointFun.push({
value: point,
itemStyle: { normal: { color: 'red' } },
})
}
} else if (xx < 0.5) {
if (yy > 70) {
standF++
this.pointF.push({
value: point,
itemStyle: { normal: { color: 'green' } },
})
} else {
unstandF++
this.pointFun.push({
value: point,
itemStyle: { normal: { color: 'red' } },
})
}
} else {
if (yy > 80) {
standF++
this.pointF.push({
value: point,
itemStyle: { normal: { color: 'green' } },
})
} else {
unstandF++
this.pointFun.push({
value: point,
itemStyle: { normal: { color: 'red' } },
})
}
}
}
}
this.option.series[1].data = this.pointF
this.option.series[2].data = this.pointFun
if (this.echartRef) {
this.echartRef.setOption(this.option, true)
} else {
this.initChart()
}
},
bindChartClickEvent() {
if (!this.echartRef) return
this.echartRef.on('click', (params) => {
console.log('🚀 ~ params:', params.value[3])
// 点击查看详情
let item = params.value[3]
let str = JSON.stringify(item).replace(/%/g, '百分比')
uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
})
},
},
computed: {},
watch: {
store: {
handler(val, oldVal) {
this.status = val.status
this.data = val.data
this.gongfunction()
},
deep: true,
immediate: true,
},
},
}
</script>
<style lang="scss" scoped></style>

341
pages/message1/comp/ITIC.vue Normal file
View File

@@ -0,0 +1,341 @@
<template>
<!-- ITIC -->
<view>
<l-echart v-if="status != 'loading'" ref="echartRef" @finished="initChart"></l-echart>
<uni-load-more v-else :status="status"></uni-load-more>
</view>
</template>
<script>
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
export default {
components: {},
props: {
store: {
type: [Object],
},
},
data() {
return {
option: {
backgroundColor: '#fff',
grid: {
left: '10px',
right: '40rpx',
bottom: '40rpx',
top: '10px',
containLabel: true,
},
legend: {
data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
right: '10px',
bottom: '10px',
textStyle: {
fontSize: 10,
},
itemWidth: 10,
itemHeight: 10,
itemGap: 8,
padding: [5, 5 ,5 ,10],
},
color: ['#FF8C00', '#00BFFF', 'green', 'red'],
yAxis: {
type: 'log',
min: '0.001',
max: '1000',
name: 's',
inverse: true,
axisLabel: {
rotate: -90,
},
splitLine: { show: false },
},
xAxis: {
type: 'value',
splitNumber: 10,
minInterval: 3,
position: 'top',
rotate: 90,
axisLabel: {
rotate: 90,
},
name: '%',
},
series: [
{
name: '上限',
type: 'line',
data: [
[200, 0.001],
[140, 0.003],
[120, 0.003],
[120, 0.5],
[110, 0.5],
[110, 10],
[110, 1000],
],
showSymbol: false,
tooltips: {
show: false,
},
color: '#FF8C00',
},
{
name: '下限',
type: 'line',
data: [
[0, 0.02],
[70, 0.02],
[70, 0.5],
[80, 0.5],
[80, 10],
[90, 10],
[90, 1000],
],
showSymbol: false,
tooltips: {
show: false,
},
color: '#00BFFF',
},
{
name: '可容忍事件',
type: 'scatter',
symbol: 'circle',
// data: this.pointI,
data: [],
color: 'green',
},
{
name: '不可容忍事件',
type: 'scatter',
symbol: 'circle',
// data: this.pointIun,
data: [],
color: 'red',
},
],
},
status: 'loading',
echartRef: null,
pointI: [],
pointIun: [],
data: [],
}
},
mounted() {
// this.initChart()
// console.log('🚀 ~ props.data:', this.props.data)
},
methods: {
init() {},
async initChart() {
if (!this.$refs.echartRef) return
try {
this.echartRef = await this.$refs.echartRef.init(echarts)
this.bindChartClickEvent()
this.echartRef.setOption(this.option, true)
} catch (error) {
console.error('图表初始化失败:', error)
}
},
// gongfunction() {
// var standI = 0
// var unstandI = 0
// this.pointI = []
// this.pointIun = []
// var total = 0
// total = this.data.length
// if (total == 0) {
// } else {
// for (var i = 0; i < this.data.length; i++) {
// var point = []
// var xx = this.data[i].evtParamTm.replace(/s/g, '')
// var yy = this.data[i].evtParamVVaDepth.replace(/%/g, '')
// var time = this.data[i].startTime.replace('T', ' ')
// point = [yy, xx, time, this.data[i]]
// if (xx <= 0.003) {
// var line = 0
// line = 230 - 30000 * xx
// if (yy > line) {
// unstandI++
// this.pointIun.push({
// value: point,
// itemStyle: { normal: { color: 'red' } },
// })
// } else {
// standI++
// this.pointI.push({
// value: point,
// itemStyle: { normal: { color: 'green' } },
// })
// }
// } else if (xx <= 0.02) {
// if (yy > 120) {
// unstandI++
// this.pointIun.push({
// value: point,
// itemStyle: { normal: { color: 'red' } },
// })
// } else {
// standI++
// this.pointI.push({
// value: point,
// itemStyle: { normal: { color: 'green' } },
// })
// }
// } else if (xx <= 0.5) {
// if (yy > 120 || yy < 70) {
// unstandI++
// this.pointIun.push({
// value: point,
// itemStyle: { normal: { color: 'red' } },
// })
// } else {
// standI++
// this.pointI.push({
// value: point,
// itemStyle: { normal: { color: 'green' } },
// })
// }
// } else if (xx <= 10) {
// if (yy > 110 || yy < 80) {
// unstandI++
// this.pointIun.push({
// value: point,
// itemStyle: { normal: { color: 'red' } },
// })
// } else {
// standI++
// this.pointI.push({
// value: point,
// itemStyle: { normal: { color: 'green' } },
// })
// }
// } else {
// if (yy > 110 || yy < 90) {
// unstandI++
// this.pointIun.push({
// value: point,
// itemStyle: { normal: { color: 'red' } },
// })
// } else {
// standI++
// this.pointI.push({
// value: point,
// itemStyle: { normal: { color: 'green' } },
// })
// }
// }
// }
// }
// this.option.series[2].data = this.pointI
// this.option.series[3].data = this.pointIun
// if (this.echartRef) {
// this.echartRef.setOption(this.option, true)
// } else {
// this.initChart()
// }
// },
gongfunction() {
// 初始化计数与数据数组
let normalCount = 0
let abnormalCount = 0
this.normalPoints = []
this.abnormalPoints = []
if (!this.data || this.data.length === 0) {
this.updateChartOption()
return
}
// 缓存长度，遍历数据
const len = this.data.length
for (let i = 0; i < len; i++) {
const item = this.data[i]
// 建议确认正则意图，/s/g 仅移除字母 s，若去空格应为 /\s/g
const xx = parseFloat(item.evtParamTm.replace(/s/g, ''))
const yy = parseFloat(item.evtParamVVaDepth.replace(/%/g, ''))
const time = item.startTime.replace('T', ' ')
const pointData = [yy, xx, time, item]
const isNormal = this.checkPointStatus(xx, yy)
const pointObj = {
value: pointData,
itemStyle: { normal: { color: isNormal ? 'green' : 'red' } },
}
if (isNormal) {
normalCount++
this.normalPoints.push(pointObj)
} else {
abnormalCount++
this.abnormalPoints.push(pointObj)
}
}
this.updateChartOption()
},
// 提取判断逻辑为独立方法
checkPointStatus(xx, yy) {
if (xx <= 0.003) {
const line = 230 - 30000 * xx
return yy <= line
} else if (xx <= 0.02) {
return yy <= 120
} else if (xx <= 0.5) {
return yy > 70 && yy < 120
} else if (xx <= 10) {
return yy > 80 && yy < 110
} else {
return yy > 90 && yy < 110
}
},
updateChartOption() {
// 建议避免硬编码 series 索引，可通过 seriesName 查找
this.option.series[2].data = this.normalPoints
this.option.series[3].data = this.abnormalPoints
if (this.echartRef) {
this.echartRef.setOption(this.option, true)
} else {
this.initChart()
}
},
bindChartClickEvent() {
if (!this.echartRef) return
this.echartRef.on('click', (params) => {
console.log('🚀 ~ params:', params.value[3])
// 点击查看详情
let item = params.value[3]
let str = JSON.stringify(item).replace(/%/g, '百分比')
uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
})
},
},
computed: {},
watch: {
store: {
handler(val, oldVal) {
this.status = val.status
this.data = val.data
this.gongfunction()
},
deep: true,
immediate: true,
},
},
}
</script>
<style lang="scss" scoped></style>

134
pages/message1/comp/alarmDetails.vue Normal file
View File

@@ -0,0 +1,134 @@
<template>
<Cn-page :loading="loading">
<view class="detail" slot="body">
<view class="detail-content" style="font-size: 32rpx">
<!-- <view class="detail-content-title mb20">发生时间</view> -->
<view>{{ detail.date }}</view>
</view>
<view class="detail-content">
<view class="detail-content-title mb20">终端告警列表</view>
<uni-collapse accordion>
<uni-collapse-item :title="item.devName" v-for="item in list">
<template v-slot:title>
<view class="collapseTop">
<view class="mb5 name"> {{ item.devName }}</view>
<view class="mb5 frequency">
<view class="mr20"> 告警次数: {{ item.warnCounts }} 次</view>
<view> 通讯中断: {{ item.interruptCounts }} 次</view>
</view>
</view>
</template>
<view>
<view class="mb10 ml12 frequency">
<view>项目名称：{{ item.projectName }} </view></view
>
<view class="mb10 ml12 frequency">
<view>工程名称：{{ item.engineeringName }}</view></view
>
<view class="mb10 ml12 frequency">
<view>通讯信息：</view>
<view style="flex: 1">
<view v-if="item.interruptCounts == 0">通讯正常</view>
<view v-else>通讯中断{{ item.interruptCounts }}次，具体如下所示:</view
><view v-for="date in item.interruptDetails" class="mt15 textBox">{{
date
}}</view></view
></view
>
<view class="mb10 ml12 frequency">
<view>告警信息：</view>
<view style="flex: 1">
<view v-if="item.warnCounts == 0">暂无终端告警信息</view>
<view v-else>终端告警{{ item.warnCounts }}次，具体如下所示:</view
><view v-for="val in item.warnDetails" class="mt15 textBox">
{{ val.warnEventTime + '发生' + val.warnEventDesc }}
</view></view
></view
>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
</view>
</Cn-page>
</template>
<script>
import { updateStatus, queryAlarmDetail } from '@/common/api/message'
export default {
data() {
return {
loading: true,
detail: {},
limit: '',
accordionVal: '1',
list: [],
}
},
onLoad(options) {
this.loading = false
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
this.init()
if (this.detail.isRead != 1) {
updateStatus({
eventIds: [this.detail.eventId],
})
}
},
methods: {
init() {
this.loading = false
queryAlarmDetail({
devList: this.detail.devIds,
time: this.detail.date,
})
.then((res) => {
this.list = res.data
this.loading = false
})
.catch(() => {
this.loading = false
})
},
},
}
</script>
<style lang="scss">
.detail {
padding: 20rpx 0;
.detail-content {
padding: 20rpx;
background: #fff;
margin-bottom: 20rpx;
font-size: 28rpx;
.detail-content-title {
font-size: 32rpx;
color: #111;
font-weight: 700;
}
}
.collapseTop {
padding: 10rpx 0;
margin-left: 15px;
.name {
font-size: 26rpx;
font-weight: 700;
color: #333333;
}
}
.frequency {
display: flex;
font-size: 24rpx;
// color: #666666;
}
}
.textBox {
border-bottom: 1px solid #eee;
}
</style>

326
pages/message1/comp/preview.vue Normal file
View File

@@ -0,0 +1,326 @@
<template>
<view class="preview-container">
<!-- 右上角关闭按钮 -->
<view class="close-btn" @click="close">
<text class="close-icon">✕</text>
</view>
<!-- 下载按钮 -->
<view class="download-btn" @click="downloadImage">
<text class="download-icon">⬇️</text>
</view>
<!-- 图片预览区域，使用movable-area和movable-view实现缩放移动 -->
<movable-area class="movable-area" :style="{ width: '100vw', height: '100vh' }">
<movable-view
class="movable-view"
direction="all"
:scale="true"
:scale-min="0.5"
:scale-max="3"
:scale-value="scaleValue"
@scale="onScale"
:x="x"
:y="y"
:style="{
width: rotatedWidth + 'px',
height: rotatedHeight + 'px'
}"
>
<view
class="image-wrapper"
:style="{
width: imgWidth + 'px',
height: imgHeight + 'px',
transform: 'rotate(90deg)',
transformOrigin: 'center center'
}"
>
<image
:src="imageUrl"
class="preview-img"
mode="aspectFill"
:style="{
width: imgWidth + 'px',
height: imgHeight + 'px'
}"
@load="onImageLoad"
></image>
</view>
</movable-view>
</movable-area>
<!-- 图片信息提示 -->
<view class="scale-tip" v-if="showScaleTip">
当前缩放: {{ Math.round(scaleValue * 100) }}%
</view>
</view>
</template>
<script>
export default {
onLoad(options) {
this.imageUrl = decodeURIComponent(options.url) // 接收传递的图片URL，需要解码
},
data() {
return {
imageUrl: '',
// 缩放相关
scaleValue: 1,
x: 0,
y: 0,
// 图片原始尺寸
imgWidth: 0,
imgHeight: 0,
// 旋转后的尺寸（交换宽高）
rotatedWidth: 0,
rotatedHeight: 0,
// 提示显示控制
showScaleTip: false,
tipTimer: null,
// 屏幕尺寸
windowWidth: 0,
windowHeight: 0
}
},
mounted() {
// 获取屏幕尺寸
const systemInfo = uni.getSystemInfoSync();
this.windowWidth = systemInfo.windowWidth;
this.windowHeight = systemInfo.windowHeight;
},
methods: {
// 图片加载完成后获取尺寸
onImageLoad(e) {
const { width, height } = e.detail;
// 保存原始尺寸
this.imgWidth = width;
this.imgHeight = height;
// 旋转90度后，宽度和高度互换
this.rotatedWidth = height; // 旋转后宽度 = 原高度
this.rotatedHeight = width; // 旋转后高度 = 原宽度
// 计算初始位置居中
this.resetPosition();
console.log('图片加载:', {width, height}, '旋转后:', {rotatedWidth: this.rotatedWidth, rotatedHeight: this.rotatedHeight});
},
// 重置位置到中心
resetPosition() {
// 计算居中的偏移量
this.x = (this.windowWidth - this.rotatedWidth) / 2;
this.y = (this.windowHeight - this.rotatedHeight) / 2;
console.log('重置位置:', {x: this.x, y: this.y, windowWidth: this.windowWidth, windowHeight: this.windowHeight});
},
// 缩放事件处理
onScale(e) {
this.scaleValue = e.detail.scale;
// 显示缩放提示
this.showScaleTip = true;
if (this.tipTimer) {
clearTimeout(this.tipTimer);
}
this.tipTimer = setTimeout(() => {
this.showScaleTip = false;
}, 1500);
},
// 关闭预览
close() {
uni.navigateBack();
},
// 下载图片
downloadImage() {
uni.showLoading({
title: '下载中...'
});
// 先获取图片信息（如果是网络图片需要先下载）
uni.downloadFile({
url: this.imageUrl,
success: (res) => {
if (res.statusCode === 200) {
// 保存图片到相册
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
uni.hideLoading();
uni.showToast({
title: '保存成功',
icon: 'success'
});
},
fail: (err) => {
uni.hideLoading();
console.error('保存失败', err);
// 处理用户拒绝权限的情况
if (err.errMsg.includes('auth deny')) {
uni.showModal({
title: '提示',
content: '需要您授权保存图片到相册',
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (settingRes) => {
console.log('打开设置页面', settingRes);
}
});
}
}
});
} else {
uni.showToast({
title: '保存失败',
icon: 'none'
});
}
}
});
} else {
uni.hideLoading();
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
},
fail: (err) => {
uni.hideLoading();
console.error('下载失败', err);
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
});
},
// 双击重置缩放和位置（可选功能）
onDoubleTap() {
this.scaleValue = 1;
this.resetPosition();
}
},
// 页面返回前清理定时器
onUnload() {
if (this.tipTimer) {
clearTimeout(this.tipTimer);
}
}
}
</script>
<style lang="scss" scoped>
.preview-container {
position: relative;
width: 100vw;
height: 100vh;
background: #000;
overflow: hidden;
}
.movable-area {
width: 100vw;
height: 100vh;
background: #000;
}
.movable-view {
display: flex;
align-items: center;
justify-content: center;
}
.image-wrapper {
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.1s ease;
}
.preview-img {
display: block;
}
// 关闭按钮
.close-btn {
position: fixed;
top: 30rpx;
right: 30rpx;
width: 60rpx;
height: 60rpx;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
.close-icon {
color: #fff;
font-size: 40rpx;
line-height: 1;
}
}
// 下载按钮
.download-btn {
position: fixed;
top: 30rpx;
right: 110rpx;
width: 60rpx;
height: 60rpx;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
.download-icon {
color: #fff;
font-size: 40rpx;
line-height: 1;
}
}
// 缩放提示
.scale-tip {
position: fixed;
bottom: 100rpx;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 10rpx 30rpx;
border-radius: 40rpx;
font-size: 28rpx;
z-index: 1000;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
animation: fadeInOut 1.5s ease;
}
@keyframes fadeInOut {
0% { opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; }
}
</style>

148
pages/message1/comp/steadyStateDetails.vue Normal file
View File

@@ -0,0 +1,148 @@
<template>
<Cn-page :loading="loading">
<view class="detail" slot="body">
<view class="detail-content" style="font-size: 32rpx">
<!-- <view class="detail-content-title mb20">发生时间</view> -->
<view>{{ detail.statisticsDate }}</view>
</view>
<view class="detail-content">
<view class="detail-content-title mb20">基础信息</view>
<view class="mb5"> 监测点名称：{{ detail.lineName }}</view>
<view class="mb5"> 设备名称：{{ detail.devName }} </view>
<view class="mb5"> 项目名称：{{ detail.projectName }} </view>
<view class="mb5"> 工程名称：{{ detail.engineeringName }} </view>
<view class="mb5" style="display: flex">
越限详情：
<view style="flex: 1">{{ detail.overLimitDesc }}</view></view
>
</view>
<view class="detail-content">
<view class="detail-content-title mb20"
>指标越限详情<text class="prompt">（仅显示较为严重的10次）</text></view
>
<uni-collapse accordion>
<uni-collapse-item :title="item.targetName" v-for="item in list">
<view class="data-table">
<view class="table-header">
<text>时间</text>
<text>数据类型</text>
<text v-if="!item.harmDetailList[0].hasT">A相</text>
<text v-if="!item.harmDetailList[0].hasT">B相</text>
<text v-if="!item.harmDetailList[0].hasT">C相</text>
<text v-if="item.harmDetailList[0].hasT">总相</text>
<text>限值</text>
</view>
<view class="table-row" v-for="value in item.harmDetailList">
<text>{{ value.statisticsTime }}</text>
<text>{{ value.valueType }}</text>
<text v-if="!value.hasT">{{ value.dataA }}</text>
<text v-if="!value.hasT">{{ value.dataB }}</text>
<text v-if="!value.hasT">{{ value.dataC }}</text>
<text v-if="value.hasT">{{ value.dataT }}</text>
<text>{{ value.overLimitData }}</text>
</view>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
</view>
</Cn-page>
</template>
<script>
import { updateStatus, queryHarmonicDetail } from '@/common/api/message'
export default {
data() {
return {
loading: true,
detail: {},
list: [],
}
},
onLoad(options) {
// console.log(options.detail)
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
this.init()
if (this.detail.isRead != 1) {
updateStatus({
eventIds: [this.detail.eventId],
})
}
},
methods: {
init() {
queryHarmonicDetail({
lineId: this.detail.lineId,
time: this.detail.statisticsDate,
})
.then((res) => {
this.list = res.data
this.loading = false
})
.catch(() => {
this.loading = false
})
// }
},
},
}
</script>
<style lang="scss">
.detail {
padding: 20rpx 0;
.detail-content {
padding: 20rpx;
background: #fff;
margin-bottom: 20rpx;
font-size: 28rpx;
.detail-content-title {
font-size: 32rpx;
color: #111;
font-weight: 700;
}
}
.limit {
display: flex;
align-items: center;
justify-content: end;
width: 450rpx;
margin-left: auto;
}
.prompt {
font-size: 24rpx;
color: #111;
font-weight: 500;
}
}
.data-table {
margin-top: 20rpx;
background-color: #fff;
overflow: hidden;
.table-header,
.table-row {
display: flex;
justify-content: space-between;
padding: 20rpx 0rpx;
border-bottom: 1rpx solid #eee;
text {
flex: 1;
text-align: center;
font-size: 24rpx;
// color: #333;
&:first-child {
// text-align: left;
flex: 1.2;
}
}
}
.table-header {
padding: 0rpx;
}
}
/deep/ .uni-collapse-item__title-text{
font-weight: 700;
}
</style>

95
pages/message1/comp/transientDetails.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<Cn-page :loading="loading">
<view class="detail" slot="body">
<view class="detail-content" style="font-size: 32rpx">
<!-- <view class="detail-content-title mb20">发生时间</view> -->
<view>{{ detail.startTime }}</view>
</view>
<view class="detail-content">
<view class="detail-content-title mb20">基础信息</view>
<view class="mb5"> 设备名称：{{ detail.equipmentName }}</view>
<view class="mb5"> 项目名称：{{ detail.projectName }} </view>
<view class="mb5"> 工程名称：{{ detail.engineeringName }} </view>
<view class="mb5"> 暂态类型：{{ detail.showName }}</view>
<view class="mb5" v-for="(item, textIndex) in detail.dataSet" :key="textIndex">
{{ item.showName + '：' + (item.value == 3.1415926 ? '-' : item.value) + (item.unit || '') }}
</view>
</view>
<view class="detail-content">
<view class="detail-content-title mb20">瞬时波形图</view>
<image
style="width: 100%"
:src="detail.instantPics"
mode="widthFix"
v-if="detail.instantPics"
@click="previewImage(detail.instantPics)"
/>
<text v-else>暂无</text>
</view>
<view class="detail-content">
<view class="detail-content-title mb20">RMS波形图</view>
<image
style="width: 100%"
:src="detail.rmsPics"
mode="widthFix"
v-if="detail.rmsPics"
@click="previewImage(detail.rmsPics)"
/>
<text v-else>暂无</text>
</view>
</view>
</Cn-page>
</template>
<script>
import { updateStatus } from '@/common/api/message'
export default {
data() {
return {
loading: true,
detail: {},
}
},
onLoad(options) {
// console.log(options.detail)
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
this.detail.rmsPics && (this.detail.rmsPics = this.$config.static + this.detail.rmsPics)
this.detail.instantPics && (this.detail.instantPics = this.$config.static + this.detail.instantPics)
this.loading = false
if (this.detail.status != 1) {
updateStatus({
eventIds: [this.detail.id],
})
}
},
methods: {
previewImage(url) {
// uni.previewImage({
// urls: [url],
// })
uni.navigateTo({
url: `/pages/message1/comp/preview?url=${encodeURIComponent(url)}`,
})
},
},
}
</script>
<style lang="scss">
.detail {
padding: 20rpx 0;
.detail-content {
padding: 20rpx;
background: #fff;
margin-bottom: 20rpx;
font-size: 28rpx;
.detail-content-title {
font-size: 32rpx;
color: #111;
font-weight: 700;
}
}
}
</style>

182
pages/message1/index.scss Normal file
View File

@@ -0,0 +1,182 @@
/* 整体容器：横向排列，间距均匀 */
.statistics {
display: flex;
gap: 20rpx; /* 盒子之间的间距 */
/* 通用盒子样式 */
.box {
flex: 1; /* 四个盒子等分宽度 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 130rpx;
background-color: #ffffff;
border-radius: 16rpx;
}
/* 第一个盒子的特殊样式（蓝色背景） */
.box:first-child {
flex: 1.7;
background-color: $uni-theme-color;
color: #ffffff;
}
/* 数字样式 */
.num {
font-size: 38rpx;
font-weight: 600;
line-height: 1.2;
margin-bottom: 8rpx;
}
/* 标签文字样式 */
.label {
font-size: 24rpx;
color: inherit; /* 继承父元素颜色，适配蓝色背景 */
}
}
/* 列表容器 */
.event-list {
background-color: #f5f7fa;
box-sizing: border-box;
/* 通用项样式 */
/deep/ .uni-card:first-of-type {
margin-top: 0 !important;
}
/deep/ .uni-card {
padding: 0 !important;
}
/* 头部：图标 + 信息 + 操作 */
.event-header {
display: flex;
align-items: center;
margin-bottom: 10rpx;
}
/* 图标区域（按类型区分背景色） */
.event-icon {
position: relative;
width: 120rpx;
height: 120rpx;
border-radius: 12rpx;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20rpx;
}
.badge1 {
position: absolute;
top: -10rpx;
right: -10rpx;
width: 20rpx;
height: 20rpx;
background-color: #ff3b30; /* 红色徽章 */
border-radius: 20rpx;
}
/* 电压暂降 - 蓝色系 */
.sag .event-icon {
background-color: #2563eb20;
}
/* 电压暂升 - 橙色系 */
.swell .event-icon {
background-color: #e6a23c20;
}
.interrupt .event-icon {
background-color: #90939920;
}
.event-icon image {
width: 48rpx;
height: 48rpx;
}
/* 信息区域 */
.event-info {
flex: 1;
}
.event-title {
display: flex;
align-items: center;
margin-bottom: 5rpx;
flex-wrap: wrap; /* 适配小屏，防止文字溢出 */
}
.event-id {
font-size: 15px;
font-weight: 700;
color: #333333;
margin-right: 16rpx;
}
/* 标签样式（按类型区分） */
.event-tag {
font-size: 20rpx;
padding: 0rpx 10rpx;
border-radius: 8rpx;
color: #ffffff;
height: 38rpx;
}
.sag-tag {
background-color: #ecf5ff;
color: #2563eb;
}
.swell-tag {
background-color: #fdf6ec;
color: #e6a23c;
}
.interrupt-tag {
background-color: #f4f4f5;
color: #909399;
}
/* 描述文本 */
.event-desc {
display: flex;
flex-direction: column;
gap: 8rpx;
}
.event-desc text {
font-size: 26rpx;
color: #666666;
line-height: 1.2;
}
/* 操作按钮 */
.event-action {
display: flex;
justify-content: center;
align-items: center;
color: #999999;
font-size: 40rpx;
/* 点击反馈 */
touch-action: manipulation;
}
.event-action:active {
color: #376cf3;
transform: scale(0.95);
}
/* 详情文本 */
.event-detail {
font-size: 24rpx;
color: #666666;
line-height: 1.5;
padding-top: 10rpx;
border-top: 1rpx solid #f0f0f0;
word-wrap: break-word; /* 自动换行，防止长文本溢出 */
}
}
.smallLabel {
padding: 0 20rpx 20rpx 20rpx;
display: flex;
align-items: center;
justify-content: flex-end;
.segmented-control {
flex: 1;
margin-right: 20rpx;
height: 58rpx;
}
.uni-input {
font-size: 24rpx;
color: #2563eb;
margin-right: 10rpx;
}
}

127
pages/message1/run.vue Normal file
View File

@@ -0,0 +1,127 @@
<template>
<view style="position: relative">
<!-- 运行事件 -->
<!-- 卡片 -->
<view
class="event-list" :style="{ height: 'calc(100vh - ' + (navHeight + 10) + 'px)', overflow: 'auto' }">
<!-- 循环渲染事件项 -->
<uni-card
class="event-item"
:class="item.type"
v-for="(item, index) in store.data"
:key="index"
@click="jump(item)"
>
<!-- 头部：图标 + 信息 + 操作 -->
<view class="event-header">
<view class="event-icon">
<!-- 动态图标：根据类型切换 -->
<uni-icons custom-prefix="iconfont" type="icon-shebei" size="30" color="#10B981"></uni-icons>
<view class="badge1" v-if="item.status == 0"> </view>
</view>
<view class="event-info">
<view class="event-title">
<text class="event-id">{{ item.equipmentName }}</text>
</view>
<view class="event-desc">
<text>工程名称：{{ item.engineeringName }}</text>
<text>项目名称：{{ item.projectName }}</text>
</view>
</view>
</view>
<!-- 详情区域 -->
<view class="event-detail">
<text> 于{{ item.startTime }}发生{{ item.showName }} </text>
</view>
</uni-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 style="top: 20%"></Cn-empty>
</view>
</view>
</template>
<script>
import list from '@/common/js/list'
import { updateStatus } from '@/common/api/message'
export default {
components: {},
props: {
navHeight: {
type: Number,
default: 0,
},
selectValue: {
type: Object,
// default: () => {},
},
},
mixins: [list],
data() {
return {}
},
mounted() {},
methods: {
// 查詢
init() {
this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
this.store.params.type = 2
this.store.params.pageSize = 10000
this.store.params.sortField = this.sort
this.store.params.engineeringid = this.selectValue.engineeringId
this.store.params.projectId = this.selectValue.projectId
this.store.params.deviceId = this.selectValue.deviceId
this.store.params.lineId = this.selectValue.lineId
this.store.params.startTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).firstDay
this.store.params.endTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).lastDay
this.store.loadedCallback = () => {
this.loading = false
}
this.store.reload()
},
jump(item) {
if (item.status != '1') {
item.status = '1'
updateStatus({
eventIds: [item.id],
})
this.$emit('getDevCount')
}
},
},
computed: {},
watch: {
selectValue: {
handler(val, oldVal) {
if (Object.keys(val).length === 0) return
this.init()
},
deep: true,
immediate: true,
},
},
}
</script>
<style lang="scss" scoped>
@import './index.scss';
/* 列表容器 */
.event-list {
margin-top: 20rpx;
/* 头部：图标 + 信息 + 操作 */
/* 图标区域（按类型区分背景色） */
.event-icon {
width: 90rpx;
height: 90rpx;
background-color: #10b98120;
}
}
</style>

174
pages/message1/steadyState.vue Normal file
View File

@@ -0,0 +1,174 @@
<template>
<view style="position: relative">
<!-- 稳态 -->
<view class="transientBox">
<view class="statistics pd20">
<view class="box" v-for="item in list">
<text class="num">{{ item.value }}</text>
<text class="label">{{ item.label }}</text>
</view>
</view>
</view>
<!-- 卡片 -->
<view
class="event-list" :style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }">
<!-- 循环渲染事件项 -->
<uni-card
class="event-item"
:class="item.type"
v-for="(item, index) in store.data"
:key="index"
@click="jump(item)"
>
<!-- 头部：图标 + 信息 + 操作 -->
<view class="event-header">
<view class="event-icon">
<!-- 动态图标：根据类型切换 -->
<uni-icons
custom-prefix="iconfont"
type="icon-kouanjiancedian"
size="40"
color="#E6A23C"
></uni-icons>
<view class="badge1" v-if="item.isRead == 0"> </view>
</view>
<view class="event-info">
<view class="event-title">
<text class="event-id">{{ item.lineName }}</text>
</view>
<view class="event-desc">
<text>工程名称：{{ item.engineeringName }}</text>
<text>项目名称：{{ item.projectName }}</text>
<text>设备名称：{{ item.devName }}</text>
<text>统计日期：{{ item.statisticsDate }}</text>
</view>
</view>
<view class="event-action"> 🔍 </view>
</view>
<!-- 详情区域 -->
<view class="event-detail">
<text> {{ item.overLimitDesc }} </text>
</view>
</uni-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 style="top: 20%"></Cn-empty>
</view>
</view>
</template>
<script>
import list from '@/common/js/list'
export default {
components: {},
props: {
navHeight: {
type: Number,
default: 0,
},
selectValue: {
type: Object,
// default: () => {},
},
},
mixins: [list],
data() {
return {
height: 0,
list: [
{ value: 0, label: '稳态数量' },
{ value: 0, label: '越限天数' },
{ value: 0, label: '越限测点数' },
],
status: 'noMore', //more加载前 loading加载中 noMore加载后
}
},
mounted() {
uni.createSelectorQuery()
.select('.transientBox')
.boundingClientRect((rect) => {
//
// #ifdef H5
this.height = rect.height
// #endif
// #ifdef APP-PLUS
this.height = rect.height
// #endif
})
.exec()
},
methods: {
// "devId": "",
// "engineerId": "",
// "lineId": "",
// "projectId": "",
// "time": ""
// 查詢
init() {
this.store = this.DataSource('/cs-harmonic-boot/csHarmonic/queryHarmonicList')
this.store.params.pageSize = 10000
this.store.params.engineerId = this.selectValue.engineeringId
this.store.params.projectId = this.selectValue.projectId
this.store.params.devId = this.selectValue.deviceId
this.store.params.lineId = this.selectValue.lineId
this.store.params.time = this.selectValue.date
this.store.loadedCallback = () => {
this.list[0].value = this.store.copyData.harmonicNums
this.list[1].value = this.store.copyData.overDays
this.list[2].value = this.store.copyData.overLineNums
this.loading = false
}
this.store.reload()
},
jump(item) {
let str = JSON.stringify(item).replace(/%/g, '百分比')
item.status = '1'
uni.navigateTo({ url: '/pages/message1/comp/steadyStateDetails?detail=' + encodeURIComponent(str) })
},
},
computed: {},
watch: {
selectValue: {
handler(val, oldVal) {
if (Object.keys(val).length === 0) return
this.init()
},
deep: true,
immediate: true,
},
},
}
</script>
<style lang="scss" scoped>
@import './index.scss';
.box:first-child {
flex: 1.3 !important;
}
/* 列表容器 */
.event-list {
/* 头部：图标 + 信息 + 操作 */
.event-header {
display: flex;
align-items: center;
margin-bottom: 10rpx;
}
/* 图标区域（按类型区分背景色） */
.event-icon {
background-color: #e6a23c20;
}
.event-tags {
font-size: 24rpx;
}
}
</style>

251
pages/message1/transient.vue Normal file
View File

@@ -0,0 +1,251 @@
<template>
<view style="position: relative">
<!-- 暂态 -->
<view class="transientBox">
<view class="statistics pd20">
<view class="box" v-for="item in list" @click="filterValue = item.key">
<!-- <text class="num">{{ item.value }}</text> -->
<text class="num">{{
store &&
store.data &&
store.data.filter((k) => (item.key == '' ? item : k.showName == item.key)).length
}}</text>
<text class="label">{{ item.label }}</text>
</view>
</view>
<view class="smallLabel">
<uni-segmented-control
:current="curSub"
active-color="#376cf3"
:values="subsectionList"
@clickItem="sectionChange"
v-if="subsectionList.length > 1"
/>
<view style="width: 180rpx">
<picker @change="bindPickerChange" :value="sort" :range="array" v-if="curSub == 0">
<view class="uni-input"
>{{ array[sort] }}排序
<uni-icons
custom-prefix="iconfont"
type="icon-paixu1"
size="10"
color="#2563EB"
></uni-icons>
</view>
</picker>
</view>
</view>
</view>
<!-- 卡片 -->
<view
class="event-list"
v-if="curSub == 0"
:style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }"
>
<!-- 循环渲染事件项 -->
<uni-card
class="event-item"
:class="judgment(item.showName)"
v-for="(item, index) in (store.data || []).filter((k) =>
filterValue == '' ? k : k.showName == filterValue,
)"
:key="index"
@click="jump(item)"
>
<!-- 头部：图标 + 信息 + 操作 -->
<view class="event-header">
<view class="event-icon">
<!-- 动态图标：根据类型切换 -->
<uni-icons
:custom-prefix="judgment(item.showName) == 'interrupt' ? 'custom-icon' : 'iconfont'"
:type="
judgment(item.showName) == 'sag'
? 'icon-xiajiang'
: judgment(item.showName) == 'swell'
? 'icon-shangsheng'
: 'minus'
"
:color="
judgment(item.showName) == 'sag'
? '#2563eb '
: judgment(item.showName) == 'swell'
? '#e6a23c'
: '#909399'
"
:size="judgment(item.showName) == 'interrupt' ? '50' : '25'"
></uni-icons>
<!-- 0未读 1已读 -->
<view class="badge1" v-if="item.status == 0"> </view>
</view>
<view class="event-info">
<view class="event-title">
<text class="event-id">{{ item.equipmentName }}</text>
<text class="event-tag" :class="`${judgment(item.showName)}-tag`">{{ item.showName }}</text>
</view>
<view class="event-desc">
<text>工程名称：{{ item.engineeringName }}</text>
<text>项目名称：{{ item.projectName }}</text>
<text>监测点名称：{{ item.lineName }}</text>
</view>
</view>
<view class="event-action"> 🔍 </view>
</view>
<!-- 详情区域 -->
<view class="event-detail">
<text>
发生时间：{{ item.startTime }}，幅值：{{ item.evtParamVVaDepth }}，持续时间：{{
item.evtParamTm
}}，相别：{{ item.evtParamPhase }}
</text>
</view>
</uni-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 style="top: 20%"></Cn-empty>
</view>
<!-- ITIC 列表 -->
<ITIC
v-if="subsectionList[curSub] == 'ITIC'"
:store="store"
:style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }"
></ITIC>
<!-- F47 列表 -->
<F47
v-if="subsectionList[curSub] == 'F47'"
:store="store"
:style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }"
></F47>
</view>
</template>
<script>
import list from '@/common/js/list'
import { queryUserPushConfig } from '@/common/api/mine'
import ITIC from './comp/ITIC.vue'
import F47 from './comp/F47.vue'
export default {
components: { ITIC, F47 },
props: {
navHeight: {
type: Number,
default: 0,
},
selectValue: {
type: Object,
// default: () => {},
},
},
mixins: [list],
data() {
return {
height: 0,
filterValue: '',
list: [
{ value: 0, label: '暂态数量', key: '' },
{ value: 0, label: '暂降', key: '电压暂降' },
{ value: 0, label: '中断', key: '电压中断' },
{ value: 0, label: '暂升', key: '电压暂升' },
],
curSub: 0,
subsectionList: [], //'列表', 'ITIC', 'F47'
status: 'noMore', //more加载前 loading加载中 noMore加载后
sort: 0,
// config: {},
array: ['发生时间', '暂降深度', '持续时间'],
}
},
mounted() {
uni.createSelectorQuery()
.select('.transientBox')
.boundingClientRect((rect) => {
//
// #ifdef H5
this.height = rect?.height + 12 || 0
// #endif
// #ifdef APP-PLUS
this.height = rect?.height + 12 || 0
// #endif
})
.exec()
},
methods: {
// 查詢
init() {
this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
this.store.params.type = 0
this.store.params.pageSize = 10000
this.store.params.sortField = this.sort
this.store.params.engineeringid = this.selectValue.engineeringId
this.store.params.projectId = this.selectValue.projectId
this.store.params.deviceId = this.selectValue.deviceId
this.store.params.lineId = this.selectValue.lineId
this.store.params.startTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).firstDay
this.store.params.endTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).lastDay
this.store.loadedCallback = () => {
this.getConfig()
this.filterValue = ''
this.loading = false
}
this.store.reload()
},
getConfig() {
queryUserPushConfig().then((res) => {
// this.config = res.data
this.subsectionList = [
'列表',
res.data.iticFunction == 1 ? 'ITIC' : '',
res.data.f47Function == 1 ? 'F47' : '',
].filter((item) => item)
})
},
judgment(val) {
switch (val) {
case '电压暂降':
return 'sag'
case '电压暂升':
return 'swell'
case '电压中断':
return 'interrupt'
}
},
// 点击查看详情
jump(item) {
let str = JSON.stringify(item).replace(/%/g, '百分比')
item.status = '1'
uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
},
// 切换排序
bindPickerChange(e) {
this.sort = e.detail.value
this.init()
},
sectionChange(e) {
this.curSub = e.currentIndex
},
},
onShow() {
this.curSub = 0
},
computed: {},
watch: {
selectValue: {
handler(val, oldVal) {
if (Object.keys(val).length === 0) return
this.init()
},
deep: true,
immediate: true,
},
},
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>

125
pages/mine/transientSetting.vue Normal file
View File

@@ -0,0 +1,125 @@
<template>
<Cn-page :loading="loading">
<view class="mine" slot="body">
<view class="mine-nav" style="margin-top: 20rpx">
<view class="mine-nav-label">ITIC</view>
<switch
style="transform: scale(0.8)"
color="#376cf3"
@change="change('iticFunction')"
:checked="config.iticFunction === 1"
/>
</view>
<view class="mine-nav" style="border-bottom: none">
<view class="mine-nav-label">F47</view>
<switch
style="transform: scale(0.8)"
color="#376cf3"
@change="change('f47Function')"
:checked="config.f47Function === 1"
/>
</view>
</view>
</Cn-page>
</template>
<script>
import { queryUserPushConfig, updatePushConfig } from '@/common/api/mine'
export default {
data() {
return {
loading: true,
config: {},
}
},
onLoad() {
this.init()
},
methods: {
init() {
queryUserPushConfig().then((res) => {
this.config = res.data
this.loading = false
})
},
change(type) {
this.config[type] = this.config[type] === 1 ? 0 : 1
updatePushConfig(this.config).then((res) => {
let str = ''
switch (type) {
case 'iticFunction':
str = 'ITIC'
break
case 'f47Function':
str = 'F47'
break
}
this.$util.toast(`${str}配置${this.config[type] === 1 ? '开启' : '关闭'}成功`)
})
},
},
onLoad() {
this.init()
},
}
</script>
<style lang="scss">
.mine {
.title {
padding: 0 20rpx;
font-size: 28rpx;
font-weight: 500;
}
.mine-header {
padding: 200rpx 34rpx 34rpx;
display: flex;
align-items: center;
background: $uni-theme-white;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 8rpx #e7e7e74c;
.mine-header-head {
margin-right: 30rpx;
height: 128rpx;
width: 128rpx;
border-radius: $uni-theme-radius;
overflow: hidden;
}
.mine-header-name {
margin-right: 30rpx;
flex: 1;
font-size: 36rpx;
color: #111;
font-weight: 700;
}
}
.mine-nav {
padding: 34rpx;
display: flex;
align-items: center;
background: $uni-theme-white;
border-bottom: 1rpx solid #e8e8e8;
&-icon {
margin-right: 30rpx;
height: 44rpx;
width: 44rpx;
border-radius: $uni-theme-radius;
overflow: hidden;
}
&-label {
margin-right: 30rpx;
flex: 1;
font-size: 28rpx;
color: #111;
}
}
}
</style>

114
pages/zhuanzhi/warning.vue
View File

@@ -1,57 +1,57 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
<view class="content device" :style="{ minHeight: minHeight }">
<uni-card :title="item.name" :sub-title="item.project" :extra="item.type" padding="0"
v-for="(item, index) in deviceList" :key="index" thumbnail="/static/device.png">
<!-- <text>{{ item.project }} {{ item.type }}</text> -->
</uni-card>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false,
deviceList: [
{
name: '设备APF-1',
des: '设备描述1',
type: '监测',
project: 'XXX项目1',
},
{
name: '设备APF-2',
des: '设备描述1',
type: '监测',
project: 'XXX项目1',
},
{
name: '设备APF-3',
des: '设备描述2',
type: '用能',
project: 'XXX项目2'
},
{
name: '设备DVR-1',
des: '设备描述3',
type: '监测',
project: 'XXX项目3'
}
]
}
},
methods: {
}
}
</script>
<style lang='scss'>
.index {
padding: 20rpx 0;
}
</style>
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
<view class="content device" :style="{ minHeight: minHeight }">
<uni-card :title="item.name" :sub-title="item.project" :extra="item.type" padding="0"
v-for="(item, index) in deviceList" :key="index" thumbnail="/static/device.png">
<!-- <text>{{ item.project }} {{ item.type }}</text> -->
</uni-card>
<!-- <uni-load-more status="nomore"></uni-load-more> -->
</view>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false,
deviceList: [
{
name: '设备APF-1',
des: '设备描述1',
type: '监测',
project: 'XXX项目1',
},
{
name: '设备APF-2',
des: '设备描述1',
type: '监测',
project: 'XXX项目1',
},
{
name: '设备APF-3',
des: '设备描述2',
type: '用能',
project: 'XXX项目2'
},
{
name: '设备DVR-1',
des: '设备描述3',
type: '监测',
project: 'XXX项目3'
}
]
}
},
methods: {
}
}
</script>
<style lang='scss'>
.index {
padding: 20rpx 0;
}
</style>