app-govern/pages/device/APF/detail.vue

<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">
                                            {{ child }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="module">
                                <view class="grid-card">
                                    <view class="grid-card-content-2">
                                        <template v-for="(item, index) in IOData">
                                            <view class="item">{{ item.clDid }}</view>
                                            <view class="item">
                                                <view style="width: 30rpx"> {{ item.value || '-' }}</view>
                                                <view v-if="item.value"> °C</view>
                                            </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 class="content" v-if="!loading">
                    <view v-if="navMenuActive == 0">
                        <basic :basicData="basicData"></basic>
                    </view>
                    <view v-else-if="navMenuActive == 1">
                        <xieBo :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
                    ref="fab"
                    direction="vertical"
                    horizontal="right"
                    vertical="bottom"
                    :content="content"
                    @trigger="trigger"
                />
                <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"
                        :title="dialogType"
                        placeholder="请输入备注"
                        :before-close="true"
                        @close="dialogInputClose"
                        @confirm="dialogInputConfirm"
                    ></uni-popup-dialog>
                </uni-popup>
            </view>
        </view>
    </Cn-page>
</template>
<script>
import basic from './comp/basic.vue'
import xieBo from './comp/xieBo.vue'
import power from './comp/power.vue'
import oscillogram from './comp/oscillogram.vue'
import IO from './comp/IO.vue'
import { queryTopologyDiagram, deleteDevice, cancelDebug, finishDebug } from '@/common/api/device'
import { MQTT_IP, MQTT_OPTIONS } from '@/common/js/mqtt.js'
import mqtt from 'mqtt/dist/mqtt.js'
import { base64ToPath, pathToBase64 } from 'image-tools'

export default {
    components: {
        basic,
        xieBo,
        power,
        oscillogram,
        IO,
    },
    data() {
        return {
            dialogType: '',
            domLoading: true,
            loading: true,
            deviceInfo: {},
            navMenuActive: 0,
            navHeight: 0,
            img: '',
            topoImg: '',
            navMenuList: [
                {
                    text: '基本',
                },
                {
                    text: '谐波',
                },
                {
                    text: '功率',
                },
                // {
                //     text: '波形',
                // },
                {
                    text: '其他',
                },
            ],
            content: [
                {
                    iconPath: '/static/report.png',
                    text: '告警',
                },
                // {
                //     iconPath: '/static/record.png',
                //     text: '记录',
                // },
                {
                    iconPath: '/static/about.png',
                    text: '关于',
                },
            ],
            client: null,
            timer: null,
            devId: '',
            dictData: [],
            isPrimaryUser: 0,
            userInfo: {},
            topolodyData: [],
            basicData: [],
            IOData: [],
            pageOptions: {},
        }
    },
    methods: {
        trigger(e) {
            console.log(e)
            if (e.item.text === '分享') {
                uni.navigateTo({ url: '/pages/device/share?id=' + this.devId })
            } else if (e.item.text === '删除') {
                uni.showModal({
                    title: '提示',
                    content: '确定删除该设备吗？',
                    success: (res) => {
                        if (res.confirm) {
                            console.log('用户点击确定')
                            deleteDevice(this.devId).then((res) => {
                                uni.showToast({
                                    title: '删除成功',
                                    icon: 'none',
                                })
                                setTimeout(() => {
                                    uni.navigateBack()
                                }, 1500)
                            })
                        } else if (res.cancel) {
                            console.log('用户点击取消')
                        }
                    },
                })
            } else if (e.item.text === '下载') {
                this.$util.toast('下载成功')
            } else if (e.item.text === '记录') {
                uni.navigateTo({ url: '/pages/device/APF/record' })
            } else if (e.item.text === '告警') {
                uni.navigateTo({ url: '/pages/device/APF/report?id=' + this.devId })
            } else if (e.item.text === '关于') {
                uni.navigateTo({ url: '/pages/device/APF/about?id=' + this.devId })
            } else if (e.item.text === '移交') {
                uni.navigateTo({ url: '/pages/device/transfer?id=' + this.devId })
            } else if (e.item.text === '反馈') {
                uni.navigateTo({ url: '/pages/device/feedback' })
            } else if (e.item.text === '用户') {
                uni.navigateTo({ url: '/pages/device/user?id=' + this.devId + '&isPrimaryUser=' + this.isPrimaryUser })
            } else if (e.item.text === '报表') {
                this.$util.toast('效果是直接打开报表')
            } else if (e.item.text === '版本') {
                this.$util.toast('功能暂未开放')
            } else if (e.item.text === '模版') {
                this.$util.toast('效果是功能暂未开放直接打开报表')
            } else if (e.item.text === '编辑') {
                let data = JSON.parse(JSON.stringify(this.deviceInfo))
                data.appsLineTopologyDiagramPO.forEach((item) => {
                    delete item.value
                })
                uni.navigateTo({
                    url: '/pages/device/edit?deviceInfo=' + encodeURIComponent(JSON.stringify(data)),
                })
            } else if (e.item.text === '取消调试') {
                this.cancelDebug()
            } else if (e.item.text === '完成调试') {
                this.finishDebug()
            }
            this.$refs.fab.close()
        },
        // 取消调试
        cancelDebug() {
            this.dialogType = '取消调试'
            this.$refs.inputDialog.open()
        },
        // 完成调试
        finishDebug() {
            this.dialogType = '完成调试'
            this.$refs.inputDialog.open()
        },
        dialogInputClose() {
            this.$refs.inputDialog.close()
        },
        dialogInputConfirm(val) {
            if (this.dialogType == '取消调试') {
                cancelDebug({
                    deviceId: this.devId,
                    remark: val,
                    type: Number(this.pageOptions.process),
                }).then((res) => {
                    this.$util.toast(res.message)
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500)
                })
            } else {
                finishDebug({
                    deviceId: this.devId,
                    remark: val,
                    type: Number(this.pageOptions.process),
                }).then((res) => {
                    console.log(res)
                    this.$util.toast(res.message)
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500)
                })
            }
        },
        navMenuClick(idx) {
            this.navMenuActive = idx
            uni.pageScrollTo({ scrollTop: 0, duration: 0 })
        },
        downloadImg() {
            uni.downloadFile({
                url: this.deviceInfo.filePath,
                success: (res) => {
                    pathToBase64(res.tempFilePath).then((res) => {
                        this.topoImg = res
                    })
                },
            })
        },
        init() {
            console.log('init')
            this.loading = true
            this.domLoading = true
            queryTopologyDiagram(this.devId).then((res) => {
                res.data.filePath = this.$config.static + res.data.filePath
                this.deviceInfo = res.data
                this.downloadImg()
                uni.setNavigationBarTitle({ title: this.deviceInfo.devName || '设备详情' })
                this.topolodyData = this.topolodyData.filter((item) => {
                    let index = this.deviceInfo.appsLineTopologyDiagramPO.findIndex((element) => {
                        element.label = element.name
                        item.label = element.name
                        return element.linePostion === item.linePostion
                    })
                    if (index > -1) {
                        item.lat = this.deviceInfo.appsLineTopologyDiagramPO[index].lat
                        item.lng = this.deviceInfo.appsLineTopologyDiagramPO[index].lng
                        return true
                    } else {
                        // 把多余的监测点过滤掉
                        return false
                    }
                })
                console.log(this.topolodyData)
                if (this.client) {
                    this.loading = false
                } else {
                    this.initMqtt()
                }
            })
        },
        renderFinish(e) {
            this.img = e
        },
        previewImg() {
            if (!this.img) {
                uni.showLoading({
                    title: '图片生成中',
                    mask: false,
                })
                setTimeout(() => {
                    this.previewImg()
                }, 500)
            } else {
                uni.hideLoading()
                base64ToPath(this.img).then((res) => {
                    console.log(res)
                    uni.previewImage({
                        urls: [res],
                    })
                })
            }
        },
        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(`/zl/TemperData/${this.devId}`, (err) => {
                        if (!err) {
                            console.log(`订阅成功:/zl/TemperData/${this.devId}`)
                        }
                    })
                    this.client.subscribe(`/zl/devData/${this.devId}`, (err) => {
                        if (!err) {
                            console.log(`订阅成功:/zl/devData/${this.devId}`)

                            // 默认推送
                            this.client.publish(`/zl/askDevData/${this.devId}`)
                            this.client.publish(`/zl/askTemperData/${this.devId}`)
                            this.timer = setInterval(() => {
                                console.log('askDevData')
                                this.client.publish(`/zl/askDevData/${this.devId}`)
                                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('接收推送信息：', message.toString(), topic)
                    if (topic === `/zl/devData/${this.devId}`) {
                        if ((!message.toString() || message.toString().length < 10) && this.loading) {
                            this.$util.toast('该设备暂无数据')
                        }
                        this.loading = false
                        this.handlerData(JSON.parse(message.toString()))
                    } else if (topic === `/zl/TemperData/${this.devId}`) {
                        // this.basicData.forEach((item) => {
                        //     if (item.statisticalName === '温度' && item.phase === 'avg') {
                        //         item.statisticalData = message.toString()
                        //     }
                        // })
                        this.IOData = JSON.parse(message.toString())
                        this.IOData.forEach((item) => {
                            if (item.value === 0) {
                                item.value = '0'
                            } else if (!item.value) {
                                item.value = ''
                            }
                        })
                    }
                })
        },
        handlerData(data) {
            this.basicData = data
            this.topolodyData.forEach((element) => {
                let arr = []
                element.showKey.forEach((key) => {
                    data.forEach((item) => {
                        if (item.statisticalName === key && item.phase === 'avg') {
                            if(key === 'Apf_RmsI_TolOut(A)'){
                                arr.push(  '总输出电流:' + item.statisticalData + 'A')
                            }else{
                                arr.push(  '电流畸变率:' + item.statisticalData + '%')
                            }
                        }
                    })
                })
                element.value = arr
            })
            console.log(this.topolodyData)
            this.$forceUpdate()
        },
    },
    // 页面销毁
    onUnload() {
        clearInterval(this.timer)
        this.client.end()
    },
    onLoad(options) {
        this.pageOptions = options
        this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
        this.devId = options.id
        this.isPrimaryUser = options.isPrimaryUser
        if (this.pageOptions.process == 2 || this.pageOptions.process == 3) {
            this.content.splice(
                0,
                0,
                {
                    iconPath: '/static/feedback.png',
                    text: '编辑',
                },
                {
                    iconPath: '/static/delate.png',
                    text: '取消调试',
                },
                {
                    iconPath: '/static/delate.png',
                    text: '完成调试',
                },
            )
        } else {
            if (this.isPrimaryUser == 1) {
                this.content.splice(
                    0,
                    0,
                    {
                        iconPath: '/static/transfer.png',
                        text: '移交',
                    },
                    {
                        iconPath: '/static/feedback.png',
                        text: '编辑',
                    },
                    {
                        iconPath: '/static/delate.png',
                        text: '删除',
                    },
                )
                if (this.userInfo.authorities === 'app_vip_user') {
                    this.content.splice(3, 0, {
                        iconPath: '/static/share.png',
                        text: '分享',
                    })
                }
            }
            if (this.userInfo.authorities !== 'tourist') {
                this.content.splice(0, 0, {
                    iconPath: '/static/subordinate.png',
                    text: '用户',
                })
            }
        }
        this.$util.getDictData('Line_Position').then((res) => {
            this.topolodyData = res.map((item) => {
                switch (item.name) {
                    case '电网侧':
                        item.showKey = ['Apf_ThdA_Sys(%)']
                        break
                    case '负载侧':
                        item.showKey = ['Apf_ThdA_Load(%)']
                        break
                    case '输出侧':
                        item.showKey = ['Apf_RmsI_TolOut(A)']
                        break
                    case 'PCC公共点':
                        item.showKey = []
                        break
                    default:
                        break
                }
                return {
                    label: item.name,
                    linePostion: item.id,
                    lat: '',
                    lng: '',
                    showKey: item.showKey, //要展示的指标key
                    value: [],
                }
            })
        })
        this.init()
    },
}
</script>

<style lang="scss">
.detail {
    // 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;

        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;

            .grid-card-content-2,
            .grid-card-content-1 {
                font-size: 16rpx;

                .item {
                    min-height: unset;
                    white-space: nowrap;
                }
            }
        }

        .module {
            position: absolute;
            bottom: 0;
            right: 10rpx;
            width: 200rpx;
            opacity: 0.8;

            .grid-card-content-2,
            .grid-card-content-1 {
                font-size: 16rpx;

                .item {
                    min-height: unset;
                }
            }
        }
    }

    .des {
        padding: 20rpx 20rpx 0;
        font-size: 28rpx;
        color: #999;
    }

    .content {
        box-sizing: border-box;
        padding: 0 20rpx;
    }

    .detail-header {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 2;
        background: #f3f4f5;
    }
}
</style>