App端添加治理模块主动询问状态功能；
This commit is contained in:
guanj
@@ -1,74 +1,86 @@
|
||||
<template>
|
||||
<Cn-page :loading="loading" noPadding>
|
||||
<view slot="body">
|
||||
<view class="detail" :style="{ opacity: domLoading ? '0' : '1' }" style="overflow: hidden">
|
||||
<view class="detail-header">
|
||||
<Cn-htmlToImg domId="header" @renderFinish="renderFinish">
|
||||
<view class="header" id="header" ref="header" @click="previewImg">
|
||||
<img :src="topoImg" style="width: 375px; display: block" mode="widthFix"
|
||||
@load="domLoading = false" />
|
||||
<view class="point" :style="{ left: item.lat + 'px', top: item.lng + 'px' }"
|
||||
v-for="(item, index) in topolodyData" :key="index">
|
||||
<view class="grid-card mt10" style="width: fit-content">
|
||||
<view class="grid-card-content-1">
|
||||
<view class="item">{{ item.label }}</view>
|
||||
<view class="item" v-for="(child, childIndex) in item.value" :key="childIndex">
|
||||
<text>{{ child.label }}</text>
|
||||
<text style="font-weight: 700">{{ child.value }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="module" v-if="IOData.length">
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-content-6">
|
||||
<template v-for="(item, index) in IOData">
|
||||
<view class="item">{{ item.clDid }}</view>
|
||||
<view class="item" style="font-weight: 700">
|
||||
{{ Math.floor(item.value) || '-' }}
|
||||
<view v-if="item.value"> °C</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-for="(item, index) in 3 - (IOData.length % 3)">
|
||||
<view class="item"></view>
|
||||
<view class="item"> </view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-htmlToImg>
|
||||
<!-- <view class="des">
|
||||
<Cn-page :loading="loading" noPadding>
|
||||
<view slot="body">
|
||||
<view class="detail" :style="{ opacity: domLoading ? '0' : '1' }" style="overflow: hidden">
|
||||
<view class="detail-header">
|
||||
<Cn-htmlToImg domId="header" @renderFinish="renderFinish">
|
||||
<view class="header" id="header" ref="header" @click="previewImg">
|
||||
<img
|
||||
:src="topoImg"
|
||||
style="width: 375px; display: block"
|
||||
mode="widthFix"
|
||||
@load="domLoading = false"
|
||||
/>
|
||||
<view
|
||||
class="point"
|
||||
:style="{ left: item.lat + 'px', top: item.lng + 'px' }"
|
||||
v-for="(item, index) in topolodyData"
|
||||
:key="index"
|
||||
>
|
||||
<view class="grid-card mt10" style="width: fit-content">
|
||||
<view class="grid-card-content-1">
|
||||
<view class="item">{{ item.label }}</view>
|
||||
<view class="item" v-for="(child, childIndex) in item.value" :key="childIndex">
|
||||
<text>{{ child.label }}</text>
|
||||
<text style="font-weight: 700">{{ child.value }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="module" v-if="IOData.length">
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-content-6">
|
||||
<template v-for="(item, index) in IOData">
|
||||
<view class="item">{{ item.clDid }}</view>
|
||||
<view class="item" style="font-weight: 700">
|
||||
{{ Math.floor(item.value) || '-' }}
|
||||
<view v-if="item.value"> °C</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-for="(item, index) in 3 - (IOData.length % 3)">
|
||||
<view class="item"></view>
|
||||
<view class="item"> </view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-htmlToImg>
|
||||
<!-- <view class="des">
|
||||
<text>设备基础信息</text>
|
||||
<text class="ml10">设备状态</text>
|
||||
</view> -->
|
||||
<view class="nav" style="margin-top: -10rpx">
|
||||
<view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
|
||||
v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text
|
||||
}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding: 0 20rpx">最新数据时间： {{ time }}</view>
|
||||
<view class="content" v-if="!loading">
|
||||
<view v-if="navMenuActive == 0">
|
||||
<basic :basicData="basicData"></basic>
|
||||
</view>
|
||||
<view v-else-if="navMenuActive == 1">
|
||||
<xieBo :dataTime="dataTime" :basicData="basicData"></xieBo>
|
||||
</view>
|
||||
<view v-else-if="navMenuActive == 2">
|
||||
<power :basicData="basicData"></power>
|
||||
</view>
|
||||
<!-- <view v-else-if="navMenuActive == 3">
|
||||
<view class="nav" style="margin-top: -10rpx">
|
||||
<view
|
||||
class="nav-menu"
|
||||
:class="{ 'nav-menu-active': navMenuActive == index }"
|
||||
v-for="(item, index) in navMenuList"
|
||||
:key="index"
|
||||
@click="navMenuClick(index)"
|
||||
>{{ item.text }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding: 0 20rpx">最新数据时间： {{ time }}</view>
|
||||
<view class="content" v-if="!loading">
|
||||
<view v-if="navMenuActive == 0">
|
||||
<basic :basicData="basicData"></basic>
|
||||
</view>
|
||||
<view v-else-if="navMenuActive == 1">
|
||||
<xieBo :dataTime="dataTime" :basicData="basicData"></xieBo>
|
||||
</view>
|
||||
<view v-else-if="navMenuActive == 2">
|
||||
<power :basicData="basicData"></power>
|
||||
</view>
|
||||
<!-- <view v-else-if="navMenuActive == 3">
|
||||
<oscillogram></oscillogram>
|
||||
</view> -->
|
||||
<view v-else-if="navMenuActive == 3">
|
||||
<IO :IOData="IOData"></IO>
|
||||
</view>
|
||||
<view style="height: 20rpx"></view>
|
||||
</view>
|
||||
<!-- <uni-fab
|
||||
<view v-else-if="navMenuActive == 3">
|
||||
<IO :IOData="IOData" :ndid="pageOptions.ndid"></IO>
|
||||
</view>
|
||||
<view style="height: 20rpx"></view>
|
||||
</view>
|
||||
<!-- <uni-fab
|
||||
ref="fab"
|
||||
direction="vertical"
|
||||
horizontal="right"
|
||||
@@ -76,13 +88,13 @@
|
||||
:content="content"
|
||||
@trigger="trigger"
|
||||
/> -->
|
||||
<hover-menu :btnList="content" @trigger='trigger'></hover-menu>
|
||||
<uni-popup ref="share" type="share" :safe-area="false">
|
||||
<uni-popup-share title="分享到"></uni-popup-share>
|
||||
<view style="height: 40rpx; background: #fff"></view>
|
||||
</uni-popup>
|
||||
<!-- 完成调试输入框 -->
|
||||
<!-- <uni-popup ref="inputDialog" type="dialog">
|
||||
<hover-menu :btnList="content" @trigger="trigger"></hover-menu>
|
||||
<uni-popup ref="share" type="share" :safe-area="false">
|
||||
<uni-popup-share title="分享到"></uni-popup-share>
|
||||
<view style="height: 40rpx; background: #fff"></view>
|
||||
</uni-popup>
|
||||
<!-- 完成调试输入框 -->
|
||||
<!-- <uni-popup ref="inputDialog" type="dialog">
|
||||
<uni-popup-dialog
|
||||
ref="inputClose"
|
||||
mode="input"
|
||||
@@ -93,17 +105,29 @@
|
||||
@confirm="dialogInputConfirm"
|
||||
></uni-popup-dialog>
|
||||
</uni-popup> -->
|
||||
<!-- 输入框示例 -->
|
||||
<uni-popup ref="inputDialog" type="dialog">
|
||||
<uni-popup-dialog ref="inputClose" type="info" mode="input" :title="dialogType" value="对话框预置提示内容!"
|
||||
placeholder="请输入内容" @confirm="dialogInputConfirm">
|
||||
<uni-easyinput type="textarea" :maxlength="250" autoHeight v-model="remarkContent"
|
||||
placeholder="请输入备注"></uni-easyinput>
|
||||
</uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
<!-- 输入框示例 -->
|
||||
<uni-popup ref="inputDialog" type="dialog">
|
||||
<uni-popup-dialog
|
||||
ref="inputClose"
|
||||
type="info"
|
||||
mode="input"
|
||||
:title="dialogType"
|
||||
value="对话框预置提示内容!"
|
||||
placeholder="请输入内容"
|
||||
@confirm="dialogInputConfirm"
|
||||
>
|
||||
<uni-easyinput
|
||||
type="textarea"
|
||||
:maxlength="250"
|
||||
autoHeight
|
||||
v-model="remarkContent"
|
||||
placeholder="请输入备注"
|
||||
></uni-easyinput>
|
||||
</uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
</template>
|
||||
<script>
|
||||
import basic from './comp/basic.vue'
|
||||
@@ -114,7 +138,7 @@ import IO from './comp/IO.vue'
|
||||
import { queryTopologyDiagram, deleteDevice, cancelDebug, finishDebug } from '@/common/api/device'
|
||||
import { manualAccess } from '@/common/api/accessBoot'
|
||||
import { MQTT_IP, MQTT_OPTIONS } from '@/common/js/mqtt.js'
|
||||
import mqtt, { log } from 'mqtt/dist/mqtt.js'
|
||||
import mqtt from 'mqtt'
|
||||
import { base64ToPath, pathToBase64 } from 'image-tools'
|
||||
import hoverMenu from '@/hover-menu/components/hover-menu/hover-menu.vue';
|
||||
export default {
|
||||
@@ -305,7 +329,7 @@ export default {
|
||||
await this.client.end()
|
||||
await setTimeout(() => {
|
||||
this.initMqtt(this.navMenuList[idx].id)
|
||||
|
||||
|
||||
},500)
|
||||
|
||||
}
|
||||
@@ -384,6 +408,8 @@ export default {
|
||||
this.client = mqtt.connect('wx://' + MQTT_IP, MQTT_OPTIONS)
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
|
||||
|
||||
this.client = mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)
|
||||
// #endif
|
||||
this.client
|
||||
@@ -594,116 +620,115 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.detail {
|
||||
// background: $uni-theme-white;
|
||||
.header-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
// background: $uni-theme-white;
|
||||
.header-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
width: 375px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
width: 375px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
image {
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
}
|
||||
|
||||
image {
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
}
|
||||
.point {
|
||||
position: absolute;
|
||||
color: #111;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
color: #111;
|
||||
width: 110rpx;
|
||||
font-size: 16rpx;
|
||||
opacity: 0.8;
|
||||
|
||||
.point {
|
||||
position: absolute;
|
||||
color: #111;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
color: #111;
|
||||
width: 110rpx;
|
||||
font-size: 16rpx;
|
||||
opacity: 0.8;
|
||||
.grid-card-content-2,
|
||||
.grid-card-content-1 {
|
||||
font-size: 16rpx;
|
||||
|
||||
.grid-card-content-2,
|
||||
.grid-card-content-1 {
|
||||
font-size: 16rpx;
|
||||
.item {
|
||||
min-height: unset;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
min-height: unset;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.module {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 10rpx;
|
||||
opacity: 0.8;
|
||||
|
||||
.module {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 10rpx;
|
||||
opacity: 0.8;
|
||||
.grid-card-content-2,
|
||||
.grid-card-content-6,
|
||||
.grid-card-content-1 {
|
||||
font-size: 16rpx;
|
||||
|
||||
.grid-card-content-2,
|
||||
.grid-card-content-6,
|
||||
.grid-card-content-1 {
|
||||
font-size: 16rpx;
|
||||
.item {
|
||||
min-height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
min-height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.des {
|
||||
padding: 20rpx 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.des {
|
||||
padding: 20rpx 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
background: #f3f4f5;
|
||||
}
|
||||
.detail-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
background: #f3f4f5;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .uni-fab__circle--rightBottom {
|
||||
right: 8px !important;
|
||||
bottom: 8px !important;
|
||||
right: 8px !important;
|
||||
bottom: 8px !important;
|
||||
}
|
||||
|
||||
/deep/ .uni-fab--rightBottom {
|
||||
right: 8px !important;
|
||||
bottom: 8px !important;
|
||||
right: 8px !important;
|
||||
bottom: 8px !important;
|
||||
}
|
||||
|
||||
/deep/ .uni-fab__circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/deep/ .uni-fab__content--flexDirectionEnd {
|
||||
width: 40px !important;
|
||||
// height: 50px !important;
|
||||
width: 40px !important;
|
||||
// height: 50px !important;
|
||||
}
|
||||
|
||||
/deep/.uni-fab__item {
|
||||
// height: 45px;
|
||||
width: 40px !important;
|
||||
// height: 45px;
|
||||
width: 40px !important;
|
||||
}
|
||||
|
||||
/deep/.uni-fab__item--first {
|
||||
height: 40px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user