优化强制更新功能
This commit is contained in:
guanj
@@ -1,157 +1,142 @@
|
||||
<template>
|
||||
<view>
|
||||
<Cn-page :loading="loading" beforeRender>
|
||||
<view slot="body">
|
||||
<view class="transfer">
|
||||
<!-- <div class="transfer-img" ref="qrCodeUrl" /> -->
|
||||
<!-- <uqrcode ref="uqrcode" canvas-id="qrcode" :value="content" :options="{ margin: 10 }"></uqrcode> -->
|
||||
<uqrcode
|
||||
ref="uqrcode"
|
||||
canvas-id="qrcode"
|
||||
:value="content"
|
||||
size="200"
|
||||
@complete="complete"
|
||||
:loading="false"
|
||||
></uqrcode>
|
||||
<view style="height: 200rpx"></view>
|
||||
<view class="transfer-text">请让接收人员扫码接收</view>
|
||||
<view class="transfer-btn">
|
||||
<button class="transfer-btn-item" style="background-color: #fff; color: #111" @click="back">
|
||||
返回
|
||||
</button>
|
||||
<button class="transfer-btn-item ml20" @click="scan">扫一扫</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
<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>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// import QRCode from 'qrcodejs2'
|
||||
// import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
|
||||
|
||||
import { transferDevice } from '@/common/api/device'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
content: '',
|
||||
options: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
complete() {
|
||||
this.loading = false
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
},
|
||||
home() {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
},
|
||||
transferDevice(userId) {
|
||||
transferDevice(this.options.id, userId).then((res) => {
|
||||
uni.showToast({
|
||||
title: '移交成功',
|
||||
icon: 'none',
|
||||
})
|
||||
uni.navigateBack()
|
||||
})
|
||||
},
|
||||
scan() {
|
||||
if (
|
||||
plus.os.name == 'Android' &&
|
||||
plus.navigator.checkPermission('android.permission.CAMERA') === 'undetermined'
|
||||
) {
|
||||
//未授权
|
||||
this.$refs.message.open()
|
||||
this.$refs.alertDialog.open('bottom')
|
||||
} else {
|
||||
this.handleScon()
|
||||
}
|
||||
},
|
||||
handleScon() {
|
||||
this.$refs.message.close()
|
||||
uni.scanCode({
|
||||
onlyFromCamera:true,
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
let data = JSON.parse(res.result)
|
||||
if (data.type === 'userId') {
|
||||
this.transferDevice(data.id)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请扫描正确的二维码',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
dialogClose() {this.$refs.message.close()},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.options = options
|
||||
this.content = JSON.stringify({
|
||||
type: 'transferDevice',
|
||||
id: options.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.transfer {
|
||||
padding: 200rpx 34rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.transfer-img {
|
||||
}
|
||||
|
||||
.transfer-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.transfer-btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 100rpx;
|
||||
width: 100%;
|
||||
|
||||
.transfer-btn-item {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: $uni-theme-color;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view>
|
||||
<Cn-page :loading="loading" beforeRender>
|
||||
<view slot="body">
|
||||
<view class="transfer">
|
||||
<!-- <div class="transfer-img" ref="qrCodeUrl" /> -->
|
||||
<!-- <uqrcode ref="uqrcode" canvas-id="qrcode" :value="content" :options="{ margin: 10 }"></uqrcode> -->
|
||||
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="content" size="200" @complete="complete"
|
||||
:loading="false"></uqrcode>
|
||||
<view style="height: 200rpx"></view>
|
||||
<view class="transfer-text">请让接收人员扫码接收</view>
|
||||
<view class="transfer-btn">
|
||||
<button class="transfer-btn-item" style="background-color: #fff; color: #111" @click="back">
|
||||
返回
|
||||
</button>
|
||||
<button class="transfer-btn-item ml20" @click="scan">扫一扫</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
<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>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// import QRCode from 'qrcodejs2'
|
||||
// import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
|
||||
|
||||
import { transferDevice } from '@/common/api/device'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
content: '',
|
||||
options: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
complete() {
|
||||
this.loading = false
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
},
|
||||
home() {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
},
|
||||
transferDevice(userId) {
|
||||
transferDevice(this.options.id, userId).then((res) => {
|
||||
uni.showToast({
|
||||
title: '移交成功',
|
||||
icon: 'none',
|
||||
})
|
||||
uni.navigateBack()
|
||||
})
|
||||
},
|
||||
scan() {
|
||||
if (
|
||||
plus.os.name == 'Android' &&
|
||||
plus.navigator.checkPermission('android.permission.CAMERA') === 'undetermined'
|
||||
) {
|
||||
//未授权
|
||||
this.$refs.message.open()
|
||||
this.$refs.alertDialog.open('bottom')
|
||||
} else {
|
||||
this.handleScon()
|
||||
}
|
||||
},
|
||||
handleScon() {
|
||||
this.$refs.message.close()
|
||||
uni.scanCode({
|
||||
// onlyFromCamera:false,
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
let data = JSON.parse(res.result)
|
||||
if (data.type === 'userId') {
|
||||
this.transferDevice(data.id)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请扫描正确的二维码',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
dialogClose() { this.$refs.message.close() },
|
||||
},
|
||||
onLoad(options) {
|
||||
this.options = options
|
||||
this.content = JSON.stringify({
|
||||
type: 'transferDevice',
|
||||
id: options.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.transfer {
|
||||
padding: 200rpx 34rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.transfer-img {}
|
||||
|
||||
.transfer-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.transfer-btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 100rpx;
|
||||
width: 100%;
|
||||
|
||||
.transfer-btn-item {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: $uni-theme-color;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -222,21 +222,21 @@ export default {
|
||||
},
|
||||
judgment(val, key) {
|
||||
switch (val) {
|
||||
case '电压暂降':
|
||||
case '暂降':
|
||||
return {
|
||||
type: 'sag',
|
||||
icon: 'icon-a-svg4',
|
||||
color: '#2563eb',
|
||||
size: '25',
|
||||
}
|
||||
case '电压暂升':
|
||||
case '暂升':
|
||||
return {
|
||||
type: 'swell',
|
||||
icon: 'icon-a-svg5',
|
||||
color: '#e6a23c',
|
||||
size: '25',
|
||||
}
|
||||
case '电压中断':
|
||||
case '中断':
|
||||
return {
|
||||
type: 'interrupt',
|
||||
icon: 'icon-zhongduan2',
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="index-zhuyonghu">
|
||||
<template v-if="devCount.engineeringListLength > 0">
|
||||
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
|
||||
<view class="canneng-index-title mb20 ml20 canneng-index-title-with-icon">
|
||||
<uni-icons custom-prefix="iconfont" type="icon-gongcheng" size="18" color="#376cf3" />
|
||||
<text>所有工程设备统计</text>
|
||||
</view>
|
||||
@@ -33,7 +33,7 @@
|
||||
</view>
|
||||
<!-- <view class="mt20"></view> -->
|
||||
</template>
|
||||
<!-- <view class="canneng-index-title mb20">当前工程设备统计</view>
|
||||
<!-- <view class="canneng-index-title mb20 ml20">当前工程设备统计</view>
|
||||
<view class="header">
|
||||
<view class="header-item" @click="jump('nowEngineering')">
|
||||
<view class="header-item-value"
|
||||
@@ -50,7 +50,7 @@
|
||||
<view class="header-item-label">离线设备</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="canneng-index-title mt20 canneng-index-title-with-icon">
|
||||
<view class="canneng-index-title mt20 ml20 canneng-index-title-with-icon">
|
||||
<uni-icons type="settings" size="18" color="#376cf3" />
|
||||
<text>常用功能</text>
|
||||
</view>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="index-zhuyonghu">
|
||||
<template v-if="devCount.engineeringListLength > 1">
|
||||
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
|
||||
<view class="canneng-index-title mb20 ml20 canneng-index-title-with-icon">
|
||||
<uni-icons custom-prefix="iconfont" type="icon-gongcheng" size="18" color="#376cf3" />
|
||||
<text>所有工程设备统计</text>
|
||||
</view>
|
||||
@@ -21,7 +21,7 @@
|
||||
</view>
|
||||
<view class="mt20"></view>
|
||||
</template>
|
||||
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
|
||||
<view class="canneng-index-title mb20 ml20 canneng-index-title-with-icon">
|
||||
<uni-icons custom-prefix="iconfont" type="icon-zaixianjianceshebei" size="18" color="#376cf3" />
|
||||
<text>当前工程设备统计</text>
|
||||
</view>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="index-zhuanzhi">
|
||||
<template v-if="devCount.engineeringListLength > 1">
|
||||
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
|
||||
<view class="canneng-index-title mb20 ml20 canneng-index-title-with-icon">
|
||||
<uni-icons custom-prefix="iconfont" type="icon-gongcheng" size="18" color="#376cf3" />
|
||||
<text>所有工程设备统计</text>
|
||||
</view>
|
||||
@@ -35,7 +35,7 @@
|
||||
</view>
|
||||
<view class="mt20"></view>
|
||||
</template>
|
||||
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
|
||||
<view class="canneng-index-title mb20 ml20 canneng-index-title-with-icon">
|
||||
<uni-icons custom-prefix="iconfont" type="icon-zaixianjianceshebei" size="18" color="#376cf3" />
|
||||
<text>当前工程设备统计</text>
|
||||
</view>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="index-zhuyonghu">
|
||||
<template v-if="devCount.engineeringListLength > 1">
|
||||
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
|
||||
<view class="canneng-index-title mb20 ml20 canneng-index-title-with-icon">
|
||||
<uni-icons custom-prefix="iconfont" type="icon-gongcheng" size="18" color="#376cf3" />
|
||||
<text>所有工程设备统计</text>
|
||||
</view>
|
||||
@@ -21,7 +21,7 @@
|
||||
</view>
|
||||
<view class="mt20"></view>
|
||||
</template>
|
||||
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
|
||||
<view class="canneng-index-title mb20 ml20 canneng-index-title-with-icon">
|
||||
<uni-icons custom-prefix="iconfont" type="icon-zaixianjianceshebei" size="18" color="#376cf3" />
|
||||
<text>当前工程设备统计</text>
|
||||
</view>
|
||||
@@ -49,7 +49,7 @@
|
||||
<view class="header-item-label">稳态事件数</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="canneng-index-title mt20 canneng-index-title-with-icon">
|
||||
<view class="canneng-index-title mt20 ml20 canneng-index-title-with-icon">
|
||||
<uni-icons type="settings" size="18" color="#376cf3" />
|
||||
<text>常用功能</text>
|
||||
</view>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="index-zhuanzhi">
|
||||
<template v-if="devCount.engineeringListLength > 1">
|
||||
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
|
||||
<view class="canneng-index-title mb20 ml20 canneng-index-title-with-icon">
|
||||
<uni-icons custom-prefix="iconfont" type="icon-gongcheng" size="18" color="#376cf3" />
|
||||
<text>所有工程设备统计</text>
|
||||
</view>
|
||||
@@ -33,7 +33,7 @@
|
||||
</view>
|
||||
<view class="mt20"></view>
|
||||
</template>
|
||||
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
|
||||
<view class="canneng-index-title mb20 ml20 canneng-index-title-with-icon">
|
||||
<uni-icons custom-prefix="iconfont" type="icon-zaixianjianceshebei" size="18" color="#376cf3" />
|
||||
<text>当前工程设备统计</text>
|
||||
</view>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,307 +1,312 @@
|
||||
<template>
|
||||
<view class="target-info-page">
|
||||
<scroll-view class="target-info-scroll" scroll-y :show-scrollbar="false">
|
||||
<view class="monitor-card card">
|
||||
<view class="card-header">
|
||||
<view class="event-icon">
|
||||
<Cn-icon-transient name="监测点" />
|
||||
</view>
|
||||
<view class="card-header-info">
|
||||
<text class="point-name ellipsis">{{ pointInfo.pointName || '-' }}</text>
|
||||
<view class="meta-row">
|
||||
<text v-if="pointInfo.engineeringName" class="meta-item ellipsis">
|
||||
工程：{{ pointInfo.engineeringName }}
|
||||
</text>
|
||||
<text class="meta-item ellipsis">项目：{{ pointInfo.projectName || '-' }}</text>
|
||||
<text class="meta-item ellipsis">设备：{{ pointInfo.deviceName || '-' }}</text>
|
||||
</view>
|
||||
<text class="meta-time ellipsis">最新数据时间：{{ pointInfo.dataTime || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="legend-row">
|
||||
<view class="legend-item" v-for="phase in phaseColors" :key="phase.name">
|
||||
<view class="legend-dot" :style="{ background: phase.color }" />
|
||||
<text class="legend-text">{{ phase.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="moreChildren.length" class="params-section">
|
||||
<view
|
||||
v-for="(rowItems, rowIdx) in chunkedChildren(moreChildren)"
|
||||
:key="rowIdx"
|
||||
class="double-row"
|
||||
>
|
||||
<view v-for="(child, childIdx) in rowItems" :key="child.targetId || childIdx" class="param-group">
|
||||
<view class="param-title">
|
||||
<text>{{ child.name }}{{ child.unit ? ` (${child.unit})` : '' }}</text>
|
||||
</view>
|
||||
<view v-if="hasTPhaseData(child)" class="phase-single">
|
||||
<text class="phase-value-vertical phase-value-vertical--neutral">{{ child.T }}</text>
|
||||
</view>
|
||||
<view v-else class="phase-vertical">
|
||||
<view class="phase-item-vertical">
|
||||
<text class="phase-value-vertical" :style="{ color: phaseColors[0].color }">{{ child.A }}</text>
|
||||
</view>
|
||||
<view class="phase-divider" />
|
||||
<view class="phase-item-vertical">
|
||||
<text class="phase-value-vertical" :style="{ color: phaseColors[1].color }">{{ child.B }}</text>
|
||||
</view>
|
||||
<view class="phase-divider" />
|
||||
<view class="phase-item-vertical">
|
||||
<text class="phase-value-vertical" :style="{ color: phaseColors[2].color }">{{ child.C }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-wrap">
|
||||
<Cn-empty msg="暂无更多指标" :paddingTop="120"></Cn-empty>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pointInfo: {},
|
||||
phaseColors: [
|
||||
{ name: 'A相', color: '#F1B22E' },
|
||||
{ name: 'B相', color: '#2BA471' },
|
||||
{ name: 'C相', color: '#D54941' },
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
moreChildren() {
|
||||
const children = this.pointInfo.children || []
|
||||
const selected = this.getSelectedIndicators()
|
||||
return children.filter(
|
||||
(child) => !selected.some((name) => this.matchIndicator(child.name, name)),
|
||||
)
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
const point = uni.getStorageSync('monitorPointDetail')
|
||||
if (point) {
|
||||
this.pointInfo = {
|
||||
...point,
|
||||
selectedIndicators: this.getSelectedIndicatorsFromStorage(point.selectedIndicators),
|
||||
}
|
||||
if (point.pointName) {
|
||||
uni.setNavigationBarTitle({ title: point.pointName })
|
||||
}
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
uni.removeStorageSync('monitorPointDetail')
|
||||
},
|
||||
methods: {
|
||||
getSelectedIndicatorsFromStorage(fallback = []) {
|
||||
const cached = uni.getStorageSync(this.$cacheKey.monitorSelectedIndicators)
|
||||
if (Array.isArray(cached) && cached.length) {
|
||||
return cached
|
||||
}
|
||||
return Array.isArray(fallback) ? fallback : []
|
||||
},
|
||||
getSelectedIndicators() {
|
||||
return this.getSelectedIndicatorsFromStorage(this.pointInfo.selectedIndicators)
|
||||
},
|
||||
matchIndicator(name, selected) {
|
||||
if (!name || !selected) return false
|
||||
const base = (name || '').replace(/\(.*\)/, '').trim()
|
||||
const selectedBase = (selected || '').replace(/\(.*\)/, '').trim()
|
||||
return base === selectedBase
|
||||
},
|
||||
hasTPhaseData(child) {
|
||||
return child.T !== undefined && child.T !== null && child.T !== '-'
|
||||
},
|
||||
chunkedChildren(children) {
|
||||
const result = []
|
||||
for (let i = 0; i < children.length; i += 2) {
|
||||
result.push(children.slice(i, i + 2))
|
||||
}
|
||||
return result
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.target-info-page {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.target-info-scroll {
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 0 40rpx;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 1px 1px;
|
||||
margin: 0 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.monitor-card {
|
||||
border: 1rpx solid #eef2f6;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 20rpx 20rpx 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #eef2f6;
|
||||
}
|
||||
|
||||
.event-icon {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 20rpx;
|
||||
background-color: #376cf320;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-header-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.point-name {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6rpx 12rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.meta-time {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.legend-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
align-items: center;
|
||||
padding: 16rpx 20rpx;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.params-section {
|
||||
padding: 0 16rpx 20rpx;
|
||||
}
|
||||
|
||||
.empty-wrap {
|
||||
position: relative;
|
||||
min-height: 320rpx;
|
||||
}
|
||||
|
||||
.double-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.param-group {
|
||||
min-width: 0;
|
||||
background: #f3f3f3;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx 8rpx 12rpx;
|
||||
}
|
||||
|
||||
.param-title {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 8rpx;
|
||||
padding-left: 4rpx;
|
||||
}
|
||||
|
||||
.phase-vertical {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.phase-single {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 4rpx;
|
||||
}
|
||||
|
||||
.phase-item-vertical {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 4rpx;
|
||||
}
|
||||
|
||||
.phase-value-vertical {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
|
||||
&--neutral {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.phase-divider {
|
||||
width: 1px;
|
||||
background: #d2d2d2;
|
||||
margin: 8rpx 0;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="target-info-page">
|
||||
<scroll-view class="target-info-scroll" scroll-y :show-scrollbar="false">
|
||||
<view class="monitor-card card">
|
||||
<view class="card-header">
|
||||
<view class="event-icon">
|
||||
<Cn-icon-transient name="监测点" />
|
||||
</view>
|
||||
<view class="card-header-info">
|
||||
<text class="point-name ellipsis">{{ pointInfo.pointName || '-' }}</text>
|
||||
<view class="meta-row">
|
||||
<text v-if="pointInfo.engineeringName" class="meta-item ellipsis">
|
||||
工程：{{ pointInfo.engineeringName }}
|
||||
</text>
|
||||
<text class="meta-item ellipsis">项目：{{ pointInfo.projectName || '-' }}</text>
|
||||
<text class="meta-item ellipsis">设备：{{ pointInfo.deviceName || '-' }}</text>
|
||||
</view>
|
||||
<text class="meta-time ellipsis">最新数据时间：{{ pointInfo.dataTime || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="legend-row">
|
||||
<view class="legend-item" v-for="phase in phaseColors" :key="phase.name">
|
||||
<view class="legend-dot" :style="{ background: phase.color }" />
|
||||
<text class="legend-text">{{ phase.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="moreChildren.length" class="params-section">
|
||||
<view v-for="(rowItems, rowIdx) in chunkedChildren(moreChildren)" :key="rowIdx" class="double-row">
|
||||
<view v-for="(child, childIdx) in rowItems" :key="child.targetId || childIdx"
|
||||
class="param-group">
|
||||
<view class="param-title">
|
||||
<text>{{ child.name }}{{ child.unit ? ` (${child.unit})` : '' }}</text>
|
||||
</view>
|
||||
<view v-if="hasTPhaseData(child)" class="phase-single">
|
||||
<text class="phase-value-vertical phase-value-vertical--neutral">{{ child.T }}</text>
|
||||
</view>
|
||||
<view v-else class="phase-vertical">
|
||||
<view class="phase-item-vertical">
|
||||
<text class="phase-value-vertical" :style="{ color: phaseColors[0].color }">{{
|
||||
child.A }}</text>
|
||||
</view>
|
||||
<view class="phase-divider" />
|
||||
<view class="phase-item-vertical">
|
||||
<text class="phase-value-vertical" :style="{ color: phaseColors[1].color }">{{
|
||||
child.B }}</text>
|
||||
</view>
|
||||
<view class="phase-divider" />
|
||||
<view class="phase-item-vertical">
|
||||
<text class="phase-value-vertical" :style="{ color: phaseColors[2].color }">{{
|
||||
child.C }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-wrap">
|
||||
<Cn-empty msg="暂无更多指标" :paddingTop="120"></Cn-empty>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pointInfo: {},
|
||||
phaseColors: [
|
||||
{ name: 'A相', color: '#F1B22E' },
|
||||
{ name: 'B相', color: '#2BA471' },
|
||||
{ name: 'C相', color: '#D54941' },
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
moreChildren() {
|
||||
const children = this.pointInfo.children || []
|
||||
// 治理测点「更多指标」页展示全部
|
||||
if (this.pointInfo.lineType === 0 && this.pointInfo.showAllIndicators) {
|
||||
return children
|
||||
}
|
||||
const selected = this.getSelectedIndicators()
|
||||
return children.filter(
|
||||
(child) => !selected.some((name) => this.matchIndicator(child.name, name)),
|
||||
)
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
const point = uni.getStorageSync('monitorPointDetail')
|
||||
if (point) {
|
||||
this.pointInfo = {
|
||||
...point,
|
||||
selectedIndicators: this.getSelectedIndicatorsFromStorage(point.selectedIndicators),
|
||||
}
|
||||
if (point.pointName) {
|
||||
uni.setNavigationBarTitle({ title: point.pointName })
|
||||
}
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
uni.removeStorageSync('monitorPointDetail')
|
||||
},
|
||||
methods: {
|
||||
getSelectedIndicatorsFromStorage(fallback = []) {
|
||||
const cached = uni.getStorageSync(this.$cacheKey.monitorSelectedIndicators)
|
||||
if (Array.isArray(cached) && cached.length) {
|
||||
return cached
|
||||
}
|
||||
return Array.isArray(fallback) ? fallback : []
|
||||
},
|
||||
getSelectedIndicators() {
|
||||
return this.getSelectedIndicatorsFromStorage(this.pointInfo.selectedIndicators)
|
||||
},
|
||||
matchIndicator(name, selected) {
|
||||
if (!name || !selected) return false
|
||||
const base = (name || '').replace(/\(.*\)/, '').trim()
|
||||
const selectedBase = (selected || '').replace(/\(.*\)/, '').trim()
|
||||
return base === selectedBase
|
||||
},
|
||||
hasTPhaseData(child) {
|
||||
return child.T !== undefined && child.T !== null && child.T !== '-'
|
||||
},
|
||||
chunkedChildren(children) {
|
||||
const result = []
|
||||
for (let i = 0; i < children.length; i += 2) {
|
||||
result.push(children.slice(i, i + 2))
|
||||
}
|
||||
return result
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.target-info-page {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.target-info-scroll {
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 0 40rpx;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 1px 1px;
|
||||
margin: 0 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.monitor-card {
|
||||
border: 1rpx solid #eef2f6;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 20rpx 20rpx 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #eef2f6;
|
||||
}
|
||||
|
||||
.event-icon {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 20rpx;
|
||||
background-color: #376cf320;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-header-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.point-name {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6rpx 12rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.meta-time {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.legend-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
padding: 16rpx 20rpx;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.params-section {
|
||||
padding: 0 16rpx 20rpx;
|
||||
}
|
||||
|
||||
.empty-wrap {
|
||||
position: relative;
|
||||
min-height: 320rpx;
|
||||
}
|
||||
|
||||
.double-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.param-group {
|
||||
min-width: 0;
|
||||
background: #f3f3f3;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx 8rpx 12rpx;
|
||||
}
|
||||
|
||||
.param-title {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 8rpx;
|
||||
padding-left: 4rpx;
|
||||
}
|
||||
|
||||
.phase-vertical {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.phase-single {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 4rpx;
|
||||
}
|
||||
|
||||
.phase-item-vertical {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 4rpx;
|
||||
}
|
||||
|
||||
.phase-value-vertical {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
|
||||
&--neutral {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.phase-divider {
|
||||
width: 1px;
|
||||
background: #d2d2d2;
|
||||
margin: 8rpx 0;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -72,6 +72,7 @@ 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'
|
||||
import { checkAppUpdate } from '@/common/js/update.js'
|
||||
|
||||
export default {
|
||||
mixins: [list],
|
||||
@@ -252,6 +253,11 @@ export default {
|
||||
this.showBackTop = e.scrollTop > 200
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef APP-PLUS
|
||||
checkAppUpdate()
|
||||
// #endif
|
||||
|
||||
|
||||
// 页面加载时，动态配置导航栏按钮
|
||||
if (!uni.getStorageSync(this.$cacheKey.access_token)) {
|
||||
uni.reLaunch({
|
||||
@@ -289,6 +295,8 @@ export default {
|
||||
// #endif
|
||||
},
|
||||
onShow() {
|
||||
|
||||
|
||||
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||||
|
||||
let access_token = uni.getStorageSync(this.$cacheKey.access_token)
|
||||
@@ -319,7 +327,7 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.popup-content {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -101,7 +101,7 @@ export default {
|
||||
this.getDevCount()
|
||||
this.$nextTick(() => {
|
||||
if (params.type !== '') {
|
||||
this.current = params.type - 0
|
||||
this.current = (params.type - 0)||0
|
||||
}
|
||||
if (params.engineeringName != '') {
|
||||
this.$refs.cnFilterCriteria && this.$refs.cnFilterCriteria.external(params)
|
||||
|
||||
@@ -259,7 +259,7 @@ export default {
|
||||
handleScon() {
|
||||
this.$refs.message.close()
|
||||
uni.scanCode({
|
||||
onlyFromCamera: true,
|
||||
// onlyFromCamera: false,
|
||||
success: (res) => {
|
||||
console.log('条码类型：' + res.scanType)
|
||||
console.log('条码内容：' + res.result)
|
||||
|
||||
@@ -1,286 +1,286 @@
|
||||
<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" style="padding-top: 0px;padding-bottom: 0px">
|
||||
<view class="detail-content-title pb20 pt20 pl20">终端告警列表</view>
|
||||
</view>
|
||||
|
||||
<view class="event-list">
|
||||
<uni-card class="event-item" :class="item.type" v-for="(item, index) in list" :key="index">
|
||||
<!-- 头部：图标 + 信息 + 操作 -->
|
||||
<view class="event-header">
|
||||
<view class="event-icon"
|
||||
:class="item.devType == 'Direct_Connected_Device' ? 'zl-bgc' : 'jc-bgc'">
|
||||
|
||||
<Cn-icon-transient :name="item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备'" />
|
||||
<view class="badge1" v-if="item.status == 0"> </view>
|
||||
</view>
|
||||
<view class="event-info">
|
||||
<view class="event-title">
|
||||
<text class="event-id">{{ item.devName }}</text>
|
||||
<text class="event-tag"
|
||||
:class="item.devType == 'Direct_Connected_Device' ? 'zl-tag' : 'jc-tag'">{{
|
||||
item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备' }}</text>
|
||||
</view>
|
||||
<view class="event-desc">
|
||||
<text>工程：{{ item.engineeringName }}</text>
|
||||
<text>项目：{{ item.projectName }}</text>
|
||||
<!-- <text v-if="item.dataDetails.onlineRate.isAbnormal">在线率：{{
|
||||
item.dataDetails.onlineRate.value }}% 限值：{{ item.dataDetails.onlineRate.threshold
|
||||
}}% </text> -->
|
||||
<!-- <text>事件时间：{{ item.startTime }}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 详情区域 -->
|
||||
<view class="event-detail">
|
||||
<view v-if="item.dataDetails.onlineRate.isAbnormal">
|
||||
<text>在线率：
|
||||
<text class="integrity-value">{{ item.dataDetails.onlineRate.value }}%</text>
|
||||
</text>
|
||||
|
||||
</view>
|
||||
<view v-if="hasIntegrityAbnormal(item)" class="mt10">
|
||||
数据完整性：
|
||||
<view class="integrity-grid">
|
||||
<view
|
||||
v-for="(rowItems, rowIdx) in chunkedPoints(getAbnormalPoints(item))"
|
||||
:key="rowIdx"
|
||||
class="grid-row">
|
||||
<view
|
||||
v-for="(point, pIdx) in rowItems"
|
||||
:key="pIdx"
|
||||
class="param-group">
|
||||
<view class="param-title">
|
||||
<text>{{ point.monitorName }}</text>
|
||||
</view>
|
||||
<view class="integrity-value-row">
|
||||
<text class="integrity-value">{{ point.value }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.warnCounts" class="mt10 ">
|
||||
终端告警 {{ item.warnCounts }} 次，详情如下：
|
||||
<view class="textBox mt10">
|
||||
<view v-for="val in item.warnDetails" class="textBox mb5" style=" font-size: 26rpx;">
|
||||
{{ val.warnEventTime + '发生' + val.warnEventDesc }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
</template>
|
||||
<script>
|
||||
import { updateStatus, queryAlarmDetail } from '@/common/api/message'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
detail: {},
|
||||
limit: '',
|
||||
collapseValue: '0',
|
||||
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.loading = true
|
||||
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
|
||||
this.init()
|
||||
if (this.detail.isRead != 1) {
|
||||
updateStatus({
|
||||
eventIds: [this.detail.eventId],
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasIntegrityAbnormal(item) {
|
||||
const points = item?.dataDetails?.integrity?.monitorPoints
|
||||
if (!Array.isArray(points) || !points.length) return false
|
||||
return points.some((p) => p.isAbnormal === true)
|
||||
},
|
||||
getAbnormalPoints(item) {
|
||||
return item?.dataDetails?.integrity?.monitorPoints?.filter((p) => p.isAbnormal === true) || []
|
||||
},
|
||||
chunkedPoints(points) {
|
||||
const result = []
|
||||
for (let i = 0; i < points.length; i += 3) {
|
||||
result.push(points.slice(i, i + 3))
|
||||
}
|
||||
return result
|
||||
},
|
||||
init() {
|
||||
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" scoped>
|
||||
@import '../index.scss';
|
||||
|
||||
.detail {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.detail-content {
|
||||
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.detail-content-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8rpx;
|
||||
height: 28rpx;
|
||||
background: $uni-theme-color;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapseTop {
|
||||
padding: 10rpx 0;
|
||||
margin-left: 15px;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.frequency {
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
// color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.textBox {
|
||||
// border-bottom: 1px solid #eee;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.event-list {
|
||||
// background: #fff;
|
||||
padding-bottom: 10rpx;
|
||||
|
||||
// .event-icon {
|
||||
// background-color: #376cf320;
|
||||
// }
|
||||
.zl-bgc {
|
||||
background-color: #376cf320;
|
||||
}
|
||||
|
||||
.jc-bgc {
|
||||
background-color: #376cf320;
|
||||
}
|
||||
|
||||
.zl-tag {
|
||||
background-color: #007aff20;
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.jc-tag {
|
||||
background-color: #007aff20;
|
||||
color: #007aff;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .uni-collapse-item__title-box {
|
||||
padding: 0 15px 0 0;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
font-size: 26rpx !important;
|
||||
color: #666666;
|
||||
|
||||
span {
|
||||
font-size: 26rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.textBox {
|
||||
max-height: 150rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.integrity-grid {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.param-group {
|
||||
min-width: 0;
|
||||
background: #f3f3f3;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx 8rpx 12rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.param-title {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
// margin-bottom: 8rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.integrity-value-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rpx;
|
||||
}
|
||||
|
||||
.integrity-value {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
}
|
||||
<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" style="padding-top: 0px;padding-bottom: 0px">
|
||||
<view class="detail-content-title pb20 pt20 pl20">终端告警列表</view>
|
||||
</view>
|
||||
|
||||
<view class="event-list">
|
||||
<uni-card class="event-item" :class="item.type" v-for="(item, index) in list" :key="index">
|
||||
<!-- 头部：图标 + 信息 + 操作 -->
|
||||
<view class="event-header">
|
||||
<view class="event-icon"
|
||||
:class="item.devType == 'Direct_Connected_Device' ? 'zl-bgc' : 'jc-bgc'">
|
||||
|
||||
<Cn-icon-transient :name="item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备'" />
|
||||
<view class="badge1" v-if="item.status == 0"> </view>
|
||||
</view>
|
||||
<view class="event-info">
|
||||
<view class="event-title">
|
||||
<text class="event-id">{{ item.devName }}</text>
|
||||
<text class="event-tag"
|
||||
:class="item.devType == 'Direct_Connected_Device' ? 'zl-tag' : 'jc-tag'">{{
|
||||
item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备' }}</text>
|
||||
</view>
|
||||
<view class="event-desc">
|
||||
<text>工程：{{ item.engineeringName }}</text>
|
||||
<text>项目：{{ item.projectName }}</text>
|
||||
<!-- <text v-if="item.dataDetails.onlineRate.isAbnormal">在线率：{{
|
||||
item.dataDetails.onlineRate.value }}% 限值：{{ item.dataDetails.onlineRate.threshold
|
||||
}}% </text> -->
|
||||
<!-- <text>事件时间：{{ item.startTime }}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 详情区域 -->
|
||||
<view class="event-detail">
|
||||
<view v-if="item.dataDetails.onlineRate.isAbnormal">
|
||||
<text>在线率：
|
||||
<text class="integrity-value">{{ item.dataDetails.onlineRate.value }}%</text>
|
||||
</text>
|
||||
|
||||
</view>
|
||||
<view v-if="hasIntegrityAbnormal(item)" class="mt10">
|
||||
数据完整性：
|
||||
<view class="integrity-grid">
|
||||
<view
|
||||
v-for="(rowItems, rowIdx) in chunkedPoints(getAbnormalPoints(item))"
|
||||
:key="rowIdx"
|
||||
class="grid-row">
|
||||
<view
|
||||
v-for="(point, pIdx) in rowItems"
|
||||
:key="pIdx"
|
||||
class="param-group">
|
||||
<view class="param-title">
|
||||
<text>{{ point.monitorName }}</text>
|
||||
</view>
|
||||
<view class="integrity-value-row">
|
||||
<text class="integrity-value">{{ point.value }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.warnCounts" class="mt10 ">
|
||||
终端告警 {{ item.warnCounts }} 次，详情如下：
|
||||
<view class="textBox mt10">
|
||||
<view v-for="val in item.warnDetails" class="textBox mb5" style=" font-size: 26rpx;">
|
||||
{{ val.warnEventTime + '发生' + val.warnEventDesc }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
</template>
|
||||
<script>
|
||||
import { updateStatus, queryAlarmDetail } from '@/common/api/message'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
detail: {},
|
||||
limit: '',
|
||||
collapseValue: '0',
|
||||
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.loading = true
|
||||
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
|
||||
this.init()
|
||||
if (this.detail.isRead != 1) {
|
||||
updateStatus({
|
||||
eventIds: [this.detail.eventId],
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasIntegrityAbnormal(item) {
|
||||
const points = item?.dataDetails?.integrity?.monitorPoints
|
||||
if (!Array.isArray(points) || !points.length) return false
|
||||
return points.some((p) => p.isAbnormal === true)
|
||||
},
|
||||
getAbnormalPoints(item) {
|
||||
return item?.dataDetails?.integrity?.monitorPoints?.filter((p) => p.isAbnormal === true) || []
|
||||
},
|
||||
chunkedPoints(points) {
|
||||
const result = []
|
||||
for (let i = 0; i < points.length; i += 3) {
|
||||
result.push(points.slice(i, i + 3))
|
||||
}
|
||||
return result
|
||||
},
|
||||
init() {
|
||||
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" scoped>
|
||||
@import '../index.scss';
|
||||
|
||||
.detail {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.detail-content {
|
||||
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.detail-content-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8rpx;
|
||||
height: 28rpx;
|
||||
background: $uni-theme-color;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapseTop {
|
||||
padding: 10rpx 0;
|
||||
margin-left: 15px;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.frequency {
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
// color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.textBox {
|
||||
// border-bottom: 1px solid #eee;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.event-list {
|
||||
// background: #fff;
|
||||
padding-bottom: 10rpx;
|
||||
|
||||
// .event-icon {
|
||||
// background-color: #376cf320;
|
||||
// }
|
||||
.zl-bgc {
|
||||
background-color: #376cf320;
|
||||
}
|
||||
|
||||
.jc-bgc {
|
||||
background-color: #376cf320;
|
||||
}
|
||||
|
||||
.zl-tag {
|
||||
background-color: #007aff20;
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.jc-tag {
|
||||
background-color: #007aff20;
|
||||
color: #007aff;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .uni-collapse-item__title-box {
|
||||
padding: 0 15px 0 0;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
font-size: 26rpx !important;
|
||||
color: #666666;
|
||||
|
||||
span {
|
||||
font-size: 26rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.textBox {
|
||||
max-height: 150rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.integrity-grid {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.param-group {
|
||||
min-width: 0;
|
||||
background: #f3f3f3;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx 8rpx 12rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.param-title {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
// margin-bottom: 8rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.integrity-value-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rpx;
|
||||
}
|
||||
|
||||
.integrity-value {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
@@ -76,11 +76,11 @@
|
||||
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
/* 电压暂降 - 蓝色系 */
|
||||
/* 暂降 - 蓝色系 */
|
||||
.sag .event-icon {
|
||||
background-color: #2563eb20;
|
||||
}
|
||||
/* 电压暂升 - 橙色系 */
|
||||
/* 暂升 - 橙色系 */
|
||||
.swell .event-icon {
|
||||
background-color: #e6a23c20;
|
||||
}
|
||||
|
||||
@@ -115,9 +115,9 @@ export default {
|
||||
filterValue: 0,
|
||||
dataList: [
|
||||
{ value: 0, label: '暂态数量', key: '' },
|
||||
{ value: 0, label: '暂降', key: '电压暂降' },
|
||||
{ value: 0, label: '中断', key: '电压中断' },
|
||||
{ value: 0, label: '暂升', key: '电压暂升' },
|
||||
{ value: 0, label: '暂降', key: '暂降' },
|
||||
{ value: 0, label: '中断', key: '中断' },
|
||||
{ value: 0, label: '暂升', key: '暂升' },
|
||||
],
|
||||
status: 'noMore', //more加载前 loading加载中 noMore加载后
|
||||
sort: 0,
|
||||
@@ -177,21 +177,21 @@ export default {
|
||||
},
|
||||
judgment(val, key) {
|
||||
switch (val) {
|
||||
case '电压暂降':
|
||||
case '暂降':
|
||||
return {
|
||||
type: 'sag',
|
||||
icon: 'icon-a-svg4',
|
||||
color: '#2563eb',
|
||||
size: '25',
|
||||
}
|
||||
case '电压暂升':
|
||||
case '暂升':
|
||||
return {
|
||||
type: 'swell',
|
||||
icon: 'icon-a-svg5',
|
||||
color: '#e6a23c',
|
||||
size: '25',
|
||||
}
|
||||
case '电压中断':
|
||||
case '中断':
|
||||
return {
|
||||
type: 'interrupt',
|
||||
icon: 'icon-zhongduan2',
|
||||
|
||||
Reference in New Issue
Block a user