绘制电脑治理信息页面

common/api/dictionary.js

@@ -1,71 +1,79 @@
-import request from '../js/request'
-import config from '../js/config'
-
-export function queryDictData(dictTypeName) {
-    return request({
-        url: '/dictData/getDicDataByTypeName',
-        method: 'get',
-        data: {
-            dictTypeName,
-        },
-    })
-}
-
-export function queryDictDataCache(dictTypeName) {
-    return request({
-        url: '/system-boot/dictType/dictDataCache',
-        method: 'get',
-    })
-}
-
-// 字典树接口通过code
-export const queryByCode = (code) => {
-    return request({
-        url: '/system-boot/dictTree/queryByCode',
-        method: 'post',
-        data: {
-            code,
-        },
-    })
-}
-
-// 字典树接口
-export const queryCsDictTree = (pid) => {
-    return request({
-        url: '/system-boot/dictTree/query',
-        method: 'post',
-        data: {
-            pid,
-        },
-    })
-}
-
-// 字典树接口通过id
-export const queryByid = (id) => {
-    return request({
-        url: '/system-boot/dictTree/queryByid',
-        method: 'post',
-        data: {
-            id,
-        },
-    })
-}
-
-// 程序版本
-export const queryEdDataPage = () => {
-    return request({
-        url: '/cs-device-boot/edData/queryEdDataPage',
-        method: 'post',
-        header: {
-            'Content-Type': 'application/json;charset=UTF-8',
-        },
-        data: {
-            pageNum: 1,
-            devName: '',
-            devType: '',
-            pageSize: 999,
-            versionStartDate: '',
-            versionendDate: '',
-        },
-    })
-}
+import request from '../js/request'
+import config from '../js/config'
+
+export function queryDictData(dictTypeName) {
+    return request({
+        url: '/dictData/getDicDataByTypeName',
+        method: 'get',
+        data: {
+            dictTypeName,
+        },
+    })
+}
+
+export function queryDictDataCache(dictTypeName) {
+    return request({
+        url: '/system-boot/dictType/dictDataCache',
+        method: 'get',
+    })
+}
+
+// 字典树接口通过code
+export const queryByCode = (code) => {
+    return request({
+        url: '/system-boot/dictTree/queryByCode',
+        method: 'post',
+        data: {
+            code,
+        },
+    })
+}
+
+// 字典树接口
+export const queryCsDictTree = (pid) => {
+    return request({
+        url: '/system-boot/dictTree/query',
+        method: 'post',
+        data: {
+            pid,
+        },
+    })
+}
+// 字典树接口
+export const queryStatistical = (data) => {
+    return request({
+        url: '/system-boot/csstatisticalset/queryStatistical',
+        method: 'post',
+        data: data,
+    })
+}
+
+// 字典树接口通过id
+export const queryByid = (id) => {
+    return request({
+        url: '/system-boot/dictTree/queryByid',
+        method: 'post',
+        data: {
+            id,
+        },
+    })
+}
+
+// 程序版本
+export const queryEdDataPage = () => {
+    return request({
+        url: '/cs-device-boot/edData/queryEdDataPage',
+        method: 'post',
+        header: {
+            'Content-Type': 'application/json;charset=UTF-8',
+        },
+        data: {
+            pageNum: 1,
+            devName: '',
+            devType: '',
+            pageSize: 999,
+            versionStartDate: '',
+            versionendDate: '',
+        },
+    })
+}

common/js/mqtt.js

@@ -1,5 +1,5 @@
 // export const MQTT_IP = 'pqmcn.com:8085/mqtt'//mqtt地址端口, 使用emqx时一定要加mqtt
-export const MQTT_IP = '192.168.1.103:8083/mqtt'//mqtt地址端口, 使用emqx时一定要加mqtt
+export const MQTT_IP = '192.168.1.103:38083/mqtt'//mqtt地址端口, 使用emqx时一定要加mqtt
 
 const MQTT_USERNAME = 't_user'//mqtt用户名
 const MQTT_PASSWORD = 'njcnpqs'//密码

components/Cn-MultipleTree/Cn-MultipleTree.vue

@@ -0,0 +1,533 @@
+<template xlang="wxml">
+    <view class="tki-tree">
+        <view class="tki-tree-mask" :class="{ show: showTree }" @tap="_cancel"></view>
+        <view class="tki-tree-cnt" :class="{ show: showTree }">
+            <view class="tki-tree-bar">
+                <view class="tki-tree-bar-cancel" :style="{ color: cancelColor }" hover-class="hover-c" @tap="_cancel"
+                    >取消</view
+                >
+                <view class="tki-tree-bar-title" :style="{ color: titleColor }">{{ title }}</view>
+                <view
+                    class="tki-tree-bar-confirm"
+                    :style="{ color: confirmColor }"
+                    hover-class="hover-c"
+                    @tap="_confirm"
+                    >确定</view
+                >
+            </view>
+            <view class="tki-tree-bar1">
+                <uni-search-bar
+                    class="uni-input"
+                    radius="5"
+                    placeholder="请输入关键字搜索"
+                    clearButton="none"
+                    @input="input"
+                />
+
+                <!-- <uni-search-bar
+                    v-model="searchValue"
+                    clearButton="none"
+                    bgColor="#fff"
+                    placeholder="请输入关键词"
+                    @input="input"
+                ></uni-search-bar> -->
+            </view>
+
+            <view class="tki-tree-view">
+                <scroll-view class="tki-tree-view-sc" :scroll-y="true">
+                    <block v-for="(item, index) in treeList" :key="index">
+                        <view
+                            class="tki-tree-item"
+                            :style="[
+                                {
+                                    paddingLeft: item.rank * 15 + 'px',
+                                    zIndex: item.rank * -1 + 50,
+                                },
+                            ]"
+                            :class="{
+                                border: border === true,
+                                show: item.show,
+                                last: item.lastRank,
+                                showchild: item.showChild,
+                                open: item.open,
+                            }"
+                        >
+                            <view class="tki-tree-label" @tap.stop="_treeItemTap(item, index)">
+                                <image
+                                    class="tki-tree-icon"
+                                    :src="item.lastRank ? lastIcon : item.showChild ? currentIcon : defaultIcon"
+                                ></image>
+                                {{ item.name }}
+                            </view>
+                            <view
+                                class="tki-tree-check"
+                                @tap.stop="_treeItemSelect(item, index)"
+                                v-if="selectParent ? true : item.lastRank"
+                            >
+                                <view
+                                    class="tki-tree-check-yes"
+                                    v-if="item.checked"
+                                    :style="{ 'border-color': confirmColor }"
+                                >
+                                    <view
+                                        class="tki-tree-check-yes-b"
+                                        :style="{ 'background-color': confirmColor }"
+                                    ></view>
+                                </view>
+                                <view
+                                    class="tki-tree-check-no"
+                                    v-if="!item.checked"
+                                    :style="{ 'border-color': confirmColor }"
+                                ></view>
+                            </view>
+                        </view>
+                    </block>
+                </scroll-view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'Cn-MultipleTree',
+    props: {
+        lazy: {
+            type: Boolean,
+            default: false,
+        },
+        range: {
+            type: Array,
+            default: function () {
+                return []
+            },
+        },
+        idKey: {
+            type: String,
+            default: 'id',
+        },
+        rangeKey: {
+            type: String,
+            default: 'name',
+        },
+        title: {
+            type: String,
+            default: '',
+        },
+        multiple: {
+            type: Boolean,
+            default: true,
+        },
+        selectParent: {
+            //是否可以选父级
+            type: Boolean,
+            default: false,
+        },
+        foldAll: {
+            //折叠时关闭所有已经打开的子集，再次打开时需要一级一级打开
+            type: Boolean,
+            default: false,
+        },
+        confirmColor: {
+            // 确定按钮颜色
+            type: String,
+            default: '#376cf3', // #07bb07
+        },
+        cancelColor: {
+            // 取消按钮颜色
+            type: String,
+            default: '', // #757575
+        },
+        titleColor: {
+            // 标题颜色
+            type: String,
+            default: '', // #757575
+        },
+        currentIcon: {
+            // 展开时候的ic
+            type: String,
+            default:
+                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEQ0QTM0MzQ1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEQ0QTM0MzU1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRDRBMzQzMjVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRDRBMzQzMzVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PidwepsAAAK0SURBVHja7JxbTsJAFIYHww7ciStgCeoGvGxAiOsgURegoL5720AXYLiIr0aJviq3Zx3PhIEnKG3ndtr+f3KixrSUj/ZjzjClIqUUiFm2gAAQAREQEUAEREAERAQQAREQAREBREAEREBEEqa67h9RFDWllDv0awWYlqlQHmu1WjMRRMoV1QFttA12y3xRtdNczq8EsE4/f8FumX2q77ROvNXk8UGMEKdUz6tYJHljaZAbuyUH+UR1to5BEohTuqwPCeS4pAA/qY6o/kyHOAMCeRK3owJnj+rH1jjxhqpVsstaebCz6TmnHWyXyY+xHjSBWBY/bvSgadtXBj9u9KCN3rnIfkzkQVsTEEX0Y2IP2oKo/HhMICcFAThUcwVZNGU6FdbX/XURzkbVF4+ybGhjPrFdgP66QdXNurGtSdk6Xdb9nAJ8oDo3OQlsQZzkdPw41ONBo6vI5scDefRjZg+6gpg3Pxp50CXEvPjR2IOuIXL3oxUPuobI3Y9WPOgDIlc/WvOgL4iL/vqFCcD7LH0xB4hj7cfQ/fWH9qCT+FhG0tN+DBk1PzjOM0SVllixcsBT1AvYc/kAPhc0hRg/3uvxoCgKRN9+dOrBUBB9+9GpB0NC9OVH5x4MDdG1H714kANEV3705kEOEBf9dcPi/lQnsuvLg1wgSu3Ha0v7Uh4MMgUXeuG71H407a+VBy9CPQkOdw+MtB+nGbd/D+FBbhBNxo9SjwcngJjNj0E9yBFiFj8G9SBXiGn8GNyDnCEm8SMLD3KHGOdHNh7kDjHOj2w8mAeIi/5arX+c6b/fxHz9oADEdGdjR/fXCw/OOB5oVfCOgnepz8IB14PMw03jCmTE+QBx5z0gAmKSqK9OUF+hcAeIhu/QYr4Qie8rjW83hhMBERARQAREQAREBBABERCLnH8BBgA+TQI7U4t53AAAAABJRU5ErkJggg==',
+        },
+        defaultIcon: {
+            // 折叠时候的ic
+            type: String,
+            default:
+                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAACE0lEQVR4Xu3c200DMRCF4XEltJAOkEugA+ggpUAHoQMqiFMCdEAJUMEiS4mEELlIO7bPOeN9i6K1rG/952myyea1WiCtXmEuYBPR4RBMxInoIOCwhOtJLKVszWyXc/5y2BvNEq6I+/3+kFK6M7OHnPM7jcLKjbZAvD/uaZtzflm5P4rbWyJWgDcze1LPuzVihfxUz7sH4ilJ2bx7Isrm3RtRMu8RiHJ5j0SUyXs0okTeCIj0eSMh0uaNhkiZNyIiXd7IiDR5oyNS5M2ACJ83EyJs3myIkHkzIsLlzYwIkzc7IkTeCojD81ZCHJa3GuKQvBURu+etjNgtb3XELnlHQGyedyTEZnlHQ2ySd0RE97wjI7rlHR3RJe+JeIrbLOecD6ePpZQ6W1kn2epo4MUrPOKyLN8ppYq1+y1VStncOjIdGnFZlo+U0uOtWOeOY2TE12Ouq//pEA7xXL7XfvcufR8K0Svfv6CREN3yDYfYIt9QiK3yjYTYLF95xB75SiP2ylcZsVu+cogj8pVCHJWvEuKwfOkREfKlRkTJlxkRJl86RMR8qRBR82VChM0XHpEhX2hElnyREWnyhUNkzBcKkTVfJETafIcjKuQ7FFEl35GIMvl2R1TMtyuiar49EWXzbY5oZpv/hibXTF2h3+s60FRKeT6+3TjMS3nrA3ZFRD8xrfY3ER1kJ+JEdBBwWGKeRAfEH1wS5WFZSDB/AAAAAElFTkSuQmCC',
+        },
+        lastIcon: {
+            // 没有子集的ic
+            type: String,
+            default: '',
+        },
+        border: {
+            // 是否有分割线
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            showTree: false,
+            treeList: [],
+            selectIndex: -1,
+            returnedItem: [], //定义一个空数组
+            pids: [],
+            ancestorsIds: [],
+            childNums: [],
+            dataTree: [],
+            inputTimer: null, // 节流定时器标识
+            searchValue: '',
+        }
+    },
+    computed: {},
+    methods: {
+        _show() {
+            this.showTree = true
+            if (this.searchValue != '') {
+                this.searchValue = ''
+                this.input('')
+            }
+        },
+        _hide() {
+            this.showTree = false
+        },
+        _cancel() {
+            this._hide()
+            this.$emit('cancel', '')
+        },
+        _confirm() {
+            // 处理所选数据
+            let rt = [],
+                obj = {}
+            this.treeList.forEach((v, i) => {
+                if (this.treeList[i].checked) {
+                    // rt.push(this.treeList[i].id)
+                    rt.push(this.treeList[i])
+                }
+            })
+            this._hide()
+            console.log('🚀 ~ rt:', rt)
+
+            if (rt.length == 0) return
+            this.$emit('confirm', rt)
+        },
+        //扁平化树结构
+        _renderTreeList(list = [], rank = 0, parentId = [], parents = []) {
+            list.forEach((item) => {
+                this.treeList.push({
+                    id: item[this.idKey],
+                    name: item[this.rangeKey],
+                    source: item,
+                    parentId, // 父级id数组
+                    parents, // 父级id数组
+                    rank, // 层级
+                    showChild: false, //子级是否显示
+                    open: false, //是否打开
+                    show: rank === 0, // 自身是否显示
+                    hideArr: [],
+                    orChecked: item.checked ? item.checked : false,
+                    checked: item.checked ? item.checked : false,
+                    childNum: 0,
+                })
+
+                if (Array.isArray(item.children) && item.children.length > 0) {
+                    let parentid = [...parentId],
+                        parentArr = [...parents]
+                    delete parentArr.children
+                    parentid.push(item[this.idKey])
+                    parentArr.push({
+                        [this.idKey]: item[this.idKey],
+                        [this.rangeKey]: item[this.rangeKey],
+                        rank: rank,
+                    })
+                    // lazy
+                    if (!this.lazy) {
+                        this._renderTreeList(item.children, rank + 1, parentid, parentArr)
+                    }
+                } else {
+                    this.treeList[this.treeList.length - 1].lastRank = true
+                }
+            })
+        },
+        // 处理默认选择
+        _defaultSelect() {
+            this.treeList.forEach((v, i) => {
+                if (v.checked) {
+                    this.treeList.forEach((v2, i2) => {
+                        if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) {
+                            v2.show = true
+                            if (v.parentId.includes(v2.id)) {
+                                v2.showChild = true
+                                v2.open = true
+                            }
+                        }
+                    })
+                }
+            })
+        },
+        getOwn(id, arr) {
+            //利用foreach循环遍历
+            arr.forEach((item) => {
+                //判断递归结束条件
+                if (item[this.idKey] == id) {
+                    // 存储数据到空数组
+                    this.returnedItem = item
+                } else if (item.children != null) //判断chlidren是否有数据
+                {
+                    //递归调用
+                    this.getOwn(id, item.children)
+                }
+            })
+            return this.returnedItem
+        },
+        setShow(id, arr, isShow) {
+            arr.forEach((item, index) => {
+                if (item.parentId.includes(id)) {
+                    this.treeList[index].showChild = isShow
+                    this.treeList[index].show = isShow
+                } else if (item.children !== undefined) {
+                    this.setShow(id, item.children, isShow)
+                }
+            })
+        },
+        // 点击
+        _treeItemTap(item, index) {
+            // console.log(item)
+            if (item.lastRank === true) {
+                this.treeList[index].checked = !this.treeList[index].checked
+                if (!this.multiple) {
+                    this._fixSingle(index)
+                }
+                return
+            }
+            let id = item.id
+            item.showChild = !item.showChild
+            // qingqian
+            if (item.showChild) {
+                // const range = this.range
+                const range = this.dataTree
+                const parentIdArr = item.parentId
+                // 找到当前元素
+                const own = this.getOwn(id, range)
+                const checkedChildren = own.children
+                // 子元素插入的索引位置
+                const nextIndex = this.treeList.findIndex((itemT) => itemT.id === item.id)
+                console.log(checkedChildren)
+                if (checkedChildren === undefined || checkedChildren.length < 1) {
+                    return
+                }
+                // 子节点数量
+                this.treeList[index].childNum = checkedChildren.length
+                const newRank = item.rank + 1
+                checkedChildren.forEach((itemC) => {
+                    const childObj = {
+                        id: itemC[this.idKey],
+                        name: itemC[this.rangeKey],
+                        source: {},
+                        parentId: [item.id], // 父级id数组
+                        parents: [item], // 父级id数组
+                        rank: newRank, // 层级
+                        showChild: false, //子级是否显示
+                        open: false, //是否打开
+                        show: 1, // 自身是否显示
+                        hideArr: [],
+                        orChecked: this.treeList[index].checked,
+                        checked: this.treeList[index].checked,
+                    }
+                    if (!this.treeList.some((itemT) => itemT.id === itemC[this.idKey])) {
+                        this.treeList.splice(nextIndex + 1, 0, childObj)
+                    }
+                })
+            }
+            // 展开/隐藏子级/孙级
+            let list = this.treeList
+            item.open = item.showChild ? true : !item.open
+            list.forEach((childItem, i) => {
+                if (item.showChild === false) {
+                    //隐藏所有子级
+                    if (!childItem.parentId.includes(id)) {
+                        return
+                    }
+                    //TODO: 修改
+                    if (!this.foldAll) {
+                        if (childItem.lastRank !== true && !childItem.open) {
+                            childItem.showChild = false
+                            this.setShow(childItem.id, this.treeList, false)
+                        }
+                        // 为隐藏的内容添加一个标记
+                        if (childItem.show) {
+                            childItem.hideArr[item.rank] = id
+                        }
+                    } else {
+                        if (childItem.lastRank !== true) {
+                            childItem.showChild = false
+                            // 继续隐藏子级的的子级
+                            this.setShow(childItem.id, this.treeList, false)
+                        }
+                    }
+                    if (childItem.children !== undefined) {
+                        childItem.children.forEach((childItem1, i1) => {
+                            if (!childItem1.parentId.includes(childItem.id)) {
+                                return
+                            }
+                            childItem.children[i1].showChild = false
+                            childItem.children[i1].show = false
+                        })
+                    }
+                    childItem.show = false
+                } else {
+                    // 打开子集
+                    if (childItem.parentId[childItem.parentId.length - 1] === id) {
+                        childItem.show = true
+                    }
+                    // 打开被隐藏的子集
+                    if (childItem.parentId.includes(id) && !this.foldAll) {
+                        // console.log(childItem.hideArr)
+                        if (childItem.hideArr[item.rank] === id) {
+                            childItem.show = true
+                            if (childItem.open && childItem.showChild) {
+                                childItem.showChild = true
+                            } else {
+                                childItem.showChild = false
+                            }
+                            childItem.hideArr[item.rank] = null
+                        }
+                    }
+                }
+            })
+        },
+        // 通过父id处理子级
+        syncChecked(trees, pid, checked) {
+            trees.forEach((item, index) => {
+                if (item.parentId.includes(pid)) {
+                    this.treeList[index].checked = checked
+                    this.syncChecked(trees, item.id, checked)
+                } else if (item.children !== undefined) {
+                    this.syncChecked(item.children, pid, checked)
+                }
+            })
+        },
+        // 获取父级往上所有层级的id 并同步状态
+        setAncestors(pids, checked) {
+            this.treeList.forEach((item, index) => {
+                if (pids.includes(item.id)) {
+                    if (checked && this.childNums[item.id] !== undefined && item.childNum === this.childNums[item.id]) {
+                        // 子级全部选中, 父级才选中
+                        this.treeList[index].checked = true
+                    } else {
+                        this.treeList[index].checked = false
+                    }
+                    this.setAncestors(item.parentId, checked)
+                }
+            })
+        },
+        _treeItemSelect(item, index) {
+            this.treeList[index].checked = !this.treeList[index].checked
+            // 选父级, 子级自动全选
+            this.syncChecked(this.treeList, item.id, this.treeList[index].checked)
+
+            if (item.rank > 0) {
+                item.parentId.forEach((pid, indexP) => {
+                    const parent = this.treeList.filter((i) => i.id === pid)
+                    const childNum = parent.length > 0 ? parent[0].childNum : 0
+                    if (this.childNums[pid] === undefined) {
+                        this.childNums[pid] = 1
+                    } else if (this.childNums[pid] < childNum) {
+                        this.childNums[pid]++
+                    }
+                })
+                //子级选择/选满/取消选择, 父级往上同步状态
+                this.setAncestors(item.parentId, this.treeList[index].checked)
+            }
+            if (!this.multiple) {
+                this._fixSingle(index)
+            }
+        },
+        _fixSingle(index) {
+            this.treeList.forEach((v, i) => {
+                this.treeList[i].checked = i === index
+            })
+        },
+        // 重置数据
+        _reTreeList() {
+            this.treeList.forEach((v, i) => {
+                this.treeList[i].checked = v.orChecked
+            })
+        },
+        _initTree(range = this.range) {
+            this.treeList = []
+            this.dataTree = JSON.parse(JSON.stringify(range))
+            this._renderTreeList(range)
+            this.$nextTick(() => {
+                this._defaultSelect(range)
+            })
+        },
+        // 筛选
+        input(val) {
+            // 清除上一次的定时器，避免频繁执行
+            if (this.inputTimer) {
+                clearTimeout(this.inputTimer)
+            }
+
+            // 设置新的定时器，指定延迟后执行过滤逻辑
+            this.inputTimer = setTimeout(() => {
+                const keyword = val
+                // 执行树形过滤和初始化
+                this._initTree(this.filterNodes(this.range, keyword))
+                // 清空定时器标识
+                clearTimeout(this.inputTimer)
+                this.inputTimer = null
+            }, 500)
+            // this._initTree(this.filterNodes(this.range, val.detail.value))
+        },
+
+        filterNodes(node, query) {
+            const keyword = query.trim() // 获取搜索关键字并转换为小写
+            const nodes = node
+            // 使用递归函数过滤树形数据
+            const filteredNodes = []
+            for (const node of nodes) {
+                if (node.name.includes(keyword)) {
+                    // 如果节点的标签包含关键字，将其添加到结果中
+                    filteredNodes.push(node)
+                } else if (node.children && node.children.length > 0) {
+                    // 如果节点有子节点，则递归过滤子节点
+                    const filteredChildren = this.filterNodes(node.children, keyword)
+                    if (filteredChildren.length > 0) {
+                        // 如果子节点中有匹配的结果，则添加父节点
+                        const clonedNode = { ...node, children: filteredChildren }
+                        filteredNodes.push(clonedNode)
+                    }
+                }
+            }
+            return filteredNodes
+        },
+    },
+    watch: {
+        range(list) {
+            this._initTree(list)
+        },
+        multiple() {
+            if (this.range.length) {
+                this._reTreeList()
+            }
+        },
+        selectParent() {
+            if (this.range.length) {
+                this._reTreeList()
+            }
+        },
+    },
+    mounted() {
+        this._initTree()
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style.css';
+/deep/ .uni-searchbar__box {
+    justify-content: left !important;
+}
+</style>

components/Cn-MultipleTree/style.css

@@ -0,0 +1,195 @@
+.tki-tree-mask {
+    position: fixed;
+    top: 0rpx;
+    right: 0rpx;
+    bottom: 0rpx;
+    left: 0rpx;
+    z-index: 9998;
+    background-color: rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    transition: all 0.3s ease;
+    visibility: hidden;
+}
+.tki-tree-mask.show {
+    visibility: visible;
+    opacity: 1;
+}
+.tki-tree-cnt {
+    position: fixed;
+    top: 0rpx;
+    right: 0rpx;
+    bottom: 0rpx;
+    left: 0rpx;
+    z-index: 9999;
+    top: 40%;
+    transition: all 0.3s ease;
+    transform: translateY(100%);
+}
+.tki-tree-cnt.show {
+    transform: translateY(0);
+}
+.tki-tree-bar {
+    background-color: #fff;
+    height: 72rpx;
+    padding-left: 20rpx;
+    padding-right: 20rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    border-bottom-width: 1rpx !important;
+    border-bottom-style: solid;
+    border-bottom-color: #f5f5f5;
+    font-size: 32rpx;
+    color: #757575;
+    line-height: 1;
+}
+.tki-tree-bar1 {
+    background-color: #fff;
+}
+.tki-tree-bar-confirm {
+    color: #07bb07;
+}
+.tki-tree-view {
+    position: absolute;
+    top: 0rpx;
+    right: 0rpx;
+    bottom: 0rpx;
+    left: 0rpx;
+    top: 160rpx;
+    background-color: #fff;
+    padding-top: 20rpx;
+    padding-right: 20rpx;
+    padding-bottom: 20rpx;
+    padding-left: 20rpx;
+}
+.tki-tree-view-sc {
+    height: 100%;
+    overflow: hidden;
+}
+.tki-tree-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 26rpx;
+    /* color: #757575; */
+    line-height: 1;
+    height: 0;
+    opacity: 0;
+    transition: 0.2s;
+    position: relative;
+    overflow: hidden;
+}
+.tki-tree-item.show {
+    height: 80rpx;
+    opacity: 1;
+}
+.tki-tree-item.showchild:before {
+    transform: rotate(90deg);
+}
+.tki-tree-item.last:before {
+    opacity: 0;
+}
+.tki-tree-icon {
+    width: 26rpx;
+    height: 26rpx;
+    margin-right: 8rpx;
+}
+.tki-tree-label {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    line-height: 1.2;
+}
+.tki-tree-check {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.tki-tree-check-yes,
+.tki-tree-check-no {
+    width: 20px;
+    height: 20px;
+    border-top-left-radius: 20%;
+    border-top-right-radius: 20%;
+    border-bottom-right-radius: 20%;
+    border-bottom-left-radius: 20%;
+    border-top-width: 1rpx;
+    border-left-width: 1rpx;
+    border-bottom-width: 1rpx;
+    border-right-width: 1rpx;
+    border-style: solid;
+    border-color: #07bb07;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+}
+.tki-tree-check-yes-b {
+    width: 12px;
+    height: 12px;
+    border-top-left-radius: 20%;
+    border-top-right-radius: 20%;
+    border-bottom-right-radius: 20%;
+    border-bottom-left-radius: 20%;
+    background-color: #07bb07;
+}
+.tki-tree-check .radio {
+    border-top-left-radius: 50%;
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+    border-bottom-left-radius: 50%;
+}
+.tki-tree-check .radio .tki-tree-check-yes-b {
+    border-top-left-radius: 50%;
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+    border-bottom-left-radius: 50%;
+}
+.hover-c {
+    opacity: 0.6;
+}
+
+.search {
+    position: absolute;
+    left: 35rpx;
+}
+
+/* 基础输入框样式 */
+.uni-input {
+    width: 95%;
+    height: 60rpx;
+    line-height: 60rpx;
+    border-radius: 20rpx;
+    /* font-size: 32rpx;
+    color: #333;
+    background: #f5f5f5;
+    width: 100%;
+
+    padding: 0 24rpx 0 60rpx;
+    box-sizing: border-box;
+    border: none; */
+}
+
+/* 聚焦态样式 */
+.uni-input:focus {
+    background: #fff;
+    border: 2rpx solid #007aff;
+}
+
+/* 占位符样式 */
+.uni-input::placeholder {
+    color: #999;
+    font-size: 28rpx;
+}
+
+/* 兼容微信小程序 */
+.uni-input::-webkit-input-placeholder {
+    color: #999;
+    font-size: 28rpx;
+}
+
+

components/Cn-device-card/Cn-device-card.vue

@@ -1,13 +1,6 @@
 <template>
-    <uni-card
-        :title="device.equipmentName"
-        :sub-title="device.mac"
-        :extra="device.isPrimaryUser == 1 ? '主设备' : '分享设备'"
-        padding="0"
-        @click="jump(device)"
-        class="boxClick"
-        :thumbnail="deviceIcon(device.runStatus)"
-    >
+    <uni-card :title="device.equipmentName" :sub-title="device.mac" :extra="device.isPrimaryUser == 1 ? '主设备' : '分享设备'"
+        padding="0" @click="jump(device)" class="boxClick" :thumbnail="deviceIcon(device.runStatus)">
         <template v-slot:title>
             <!-- 卡片标题 -->
             <view class="uni-card__header" @click="jump(device)">
@@ -25,35 +18,38 @@
                                 :color="device.runStatus == 1 ? '#ff3b30' : '#10B981'"
                                 :size="device.devType == 'Direct_Connected_Device' ? '35' : '40'"
                             ></uni-icons> -->
-                            <Cn-icon-device
-                                :devType="device.devType"
-                                :runStatus="device.runStatus"
-                                :alarmStatus="device.isAlarm ? 1 : 0"
-                            ></Cn-icon-device>
+                            <Cn-icon-device :devType="device.devType" :runStatus="device.runStatus"
+                                :alarmStatus="device.isAlarm ? 1 : 0"></Cn-icon-device>
                         </view>
                     </view>
                     <view class="uni-card__header-content">
                         <text class="uni-card__header-content-title uni-ellipsis">
                             {{ device.equipmentName }}
                         </text>
-                        <text class="uni-card__header-content-subtitle uni-ellipsis">
-<!--                            {{ device.mac }}-->
-                        </text>
+                        <!-- <text class="uni-card__header-content-subtitle uni-ellipsis">
+                                                       {{ device.mac }}
+                        </text> -->
+                        <view class="event-desc mt10 mb8">
+                            <text>
+                                工程名称：{{ device.engineeringName }}
+                            </text>
+                            <text>
+                                项目名称：{{ device.projectName }}
+                            </text>
+                        </view>
+
                         <view class="tagBox">
                             <text class="event-tag" :class="device.runStatus == 1 ? 'lx-tag' : 'zx-tag'">
                                 {{ device.runStatus == 1 ? '离线' : '在线' }}
                             </text>
-                            <text
-                                class="event-tag"
-                                :class="device.devType == 'Direct_Connected_Device' ? 'zl-tag' : 'jc-tag'"
-                            >
+                            <text class="event-tag"
+                                :class="device.devType == 'Direct_Connected_Device' ? 'zl-tag' : 'jc-tag'">
                                 {{ device.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备' }}
                             </text>
                             <text class="event-tag" :class="device.isPrimaryUser == 1 ? 'z-tag' : 'fx-tag'">
                                 {{ device.isPrimaryUser == 1 ? '我的设备' : '他人设备' }}
                             </text>
-                        </view
-                        >
+                        </view>
                     </view>
                 </view>
                 <view class="uni-card__header-extra" style="position: relative" @click.stop>
@@ -63,8 +59,8 @@
             </view>
             <!-- <slot name="title"></slot> -->
         </template>
-        <view class="device-body">
-            <view class="device-body-item">
+        <!-- <view class="device-body">
+           <view class="device-body-item">
                 <text>工程名称</text>
                 <text>{{ device.engineeringName }}</text>
             </view>
@@ -75,8 +71,8 @@
             <view class="device-body-item mt6" v-if="device.process == 2 || device.process == 3">
                 <text>调试阶段</text>
                 <text>{{ device.process == 2 ? '功能调试' : '出厂调试' }}</text>
-            </view>
-        </view>
+            </view> 
+        </view> -->
         <view class="pinToTop" v-if="device.isTop == 1"> 置顶</view>
     </uni-card>
 </template>
@@ -166,10 +162,10 @@ export default {
 
     /deep/ .uni-card__header {
         display: flex;
-        border-bottom: 2rpx #ebeef5 solid;
+        // border-bottom: 2rpx #ebeef5 solid;
         flex-direction: row;
         align-items: center;
-        padding: 20rpx 20rpx 10rpx 0;
+        padding: 20rpx  0;
         overflow: hidden;
     }
 }
@@ -279,4 +275,16 @@ export default {
     transform: rotate(45deg) translate(50rpx, -10rpx);
     transform-origin: top right;
 }
+
+.event-desc {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+}
+
+.event-desc text {
+    font-size: 28rpx;
+    color: #666666;
+    line-height: 1.2;
+}
 </style>

components/Cn-filterInformation/Cn-filterInformation.vue

@@ -0,0 +1,234 @@
+<template>
+    <view class="nav choose">
+        <view class="nav-menu nav-menu1" @click="selectEngineering" v-if="showQianTree">
+            <view class="nav-text">
+                {{ lineDisplayText }}
+            </view>
+
+            <uni-icons type="bottom" size="14"></uni-icons>
+        </view>
+        <view class="nav-menu nav-menu1" @click="selectEngineering" v-if="showQianTree">
+            <view class="nav-text">
+                {{
+                    '指标配置'
+                }}
+            </view>
+
+            <uni-icons type="bottom" size="14"></uni-icons>
+        </view>
+        <!-- 弹框组件 -->
+        <Cn-MultipleTree ref="qiantree" :selectParent="true" :multiple="true" :range="list" :foldAll="true"
+            @confirm="treeConfirm" @cancel="treeCancel"></Cn-MultipleTree>
+
+
+
+        <slot />
+    </view>
+</template>
+<script>
+import { lineTree } from '@/common/api/device'
+export default {
+    components: {},
+    props: {
+        level: { type: Number, default: 3 },
+
+        singleChoice: { type: Boolean, default: false },
+        showQianTree: { type: Boolean, default: true },
+    },
+    data() {
+
+        return {
+            select: {
+                lineList: []//监测点id
+            },
+            list: [],
+        }
+    },
+    created() { },
+    onShow() { },
+
+    mounted() { },
+
+    methods: {
+        getTree() {
+            this.clear()
+            lineTree().then((res) => {
+                let list = {}
+                // if (this.singleChoice) {
+                //     let result = this.findFirstLevel(res.data)
+
+                // } else {
+                //     list = {
+                //         id: '',
+                //         pid: '0',
+                //         pids: '0',
+                //         name: '全部工程',
+                //         path: null,
+                //         provinceId: null,
+                //         cityId: null,
+                //         area: null,
+                //         remark: null,
+                //         sort: 0,
+                //         level: 0,
+                //         comFlag: null,
+                //         type: null,
+                //         lineType: null,
+                //         conType: null,
+                //         process: null,
+                //         isTop: 0,
+                //         children: [],
+                //         ndid: null,
+                //     }
+                // }
+
+                this.list = this.filterTreeByLevel(this.singleChoice ? res.data : [...res.data])
+                // this.findFirstLevel( this.list)
+            })
+        },
+        // 递归过滤函数：去除level > 2的节点
+        filterTreeByLevel(tree) {
+            // 遍历每一个节点
+            return tree.map((node) => {
+                // 复制当前节点（避免修改原数据）
+                const newNode = { ...node }
+
+                // 如果当前节点有子节点，并且当前节点的level <= 2（因为level=2的节点的子节点是level=3，需要过滤）
+                if (newNode.children && newNode.children.length > 0) {
+                    // 递归过滤子节点：只保留子节点中level <= 2的
+                    newNode.children = this.filterTreeByLevel(
+                        newNode.children.filter((child) => child.level <= this.level),
+                    )
+                }
+
+                return newNode
+            })
+        },
+
+
+
+        selectEngineering() {
+            this.$refs.qiantree._show()
+        },
+
+        // 确定回调事件
+        treeConfirm(e) {
+            this.select.lineList = e.filter(item => item.rank == 3)
+        },
+        // 清空
+        clear() {
+            this.select.lineList = []//监测点id
+        },
+
+
+        // 取消回调事件
+        treeCancel(e) {
+            console.log(e)
+        },
+        findFirstLevel(list, parents = []) {
+            for (const item of list) {
+                // 当前就是 level=3
+                if (item.level === 3) {
+                    return {
+                        node: item, // 第一个 level=3
+                        parents: parents, // 它的所有上级
+                    }
+                }
+
+                // 递归子节点
+                if (item.children && item.children.length) {
+                    const res = this.findFirstLevel(item.children, [...parents, item])
+                    if (res) return res // 找到直接返回，不再循环
+                }
+            }
+            return null
+        },
+    },
+
+    computed: {
+        lineDisplayText() {
+            const list = this.select.lineList || []
+            if (!list.length) {
+                return '全部工程'
+            }
+            const text = list
+                .map((item) => item.name)
+                .filter(Boolean)
+                .join('、')
+            if (text.length > 8) {
+                return text.slice(0, 8) + '...'
+            }
+            return text
+        },
+    },
+
+    watch: {
+        select: {
+            handler(val, oldVal) {
+                console.log("🚀 ~ val:", val)
+                if (this.loading) return
+                this.$emit('select', val)
+            },
+            deep: true,
+            immediate: true,
+        },
+        level: {
+            handler(val, oldVal) {
+                this.getTree()
+            },
+            deep: true,
+            immediate: true,
+        },
+        // showDatetime: {
+        //     handler(val, oldVal) {
+        //         if (val == false) {
+
+        //             console.log("🚀 ~  this.select.range:",  this.select.range)
+        //         }
+        //     },
+        //     deep: true,
+        // },
+    },
+}
+</script>
+<style lang="scss" scoped>
+/deep/ .uni-date-editor {
+    width: 360rpx;
+}
+
+.nav-menu {
+    display: flex;
+    align-items: center;
+}
+
+// .nav-menu1 {
+//     max-width: calc(100vw - 150px);
+//     overflow: hidden !important;
+//     -webkit-line-clamp: 1;
+//     display: -webkit-box;
+//     -webkit-box-orient: vertical;
+//     text-overflow: ellipsis;
+//     word-break: break-all;
+//     white-space: nowrap;
+// }
+.nav-menu1 {
+    display: flex;
+    align-items: center;
+    max-width: calc(100vw - 150px);
+}
+
+/* 文字容器：单行溢出省略 */
+.nav-text {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    /* 强制不换行 */
+    text-overflow: ellipsis;
+    // -webkit-line-clamp: 1;
+    // display: -webkit-box;
+    // -webkit-box-orient: vertical;
+    // text-overflow: ellipsis;
+    // word-break: break-all;
+    // white-space: nowrap;
+    line-height: 1;
+}
+</style>

components/Cn-icon-transient/Cn-icon-transient.vue

@@ -1,45 +1,45 @@
 <template>
-    <view v-html="svgHtml" class="svg-container"></view>
+  <view v-html="svgHtml" class="svg-container"></view>
 </template>
 
 <script>
 export default {
-    props: {
-        // 父组件传递的参数
-        name: {
-            type: String,
-            default: '',
-        },
+  props: {
+    // 父组件传递的参数
+    name: {
+      type: String,
+      default: '',
     },
-    data() {
-        return {}
-    },
-    computed: {
-        svgHtml() {
-            if (this.name == '电压暂降') {
-                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    svgHtml() {
+      if (this.name == '电压暂降') {
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   <path d="M8,50 L15,50 L18,38 L21,28 L24,38 L27,50 L30,62 L33,72 L36,62 L39,50 L42,38 L45,28 L48,38 L51,50 L54,56 L56,54 L58,55 L60,54 L63,56 L66,60 L68,62 L70,60 L72,56 L75,54 L77,52 L79,54 L81,56 L84,50 L87,38 L90,28 L93,38 L96,50" fill="none" stroke="#2563eb" stroke-width="4"/>
 </svg>`
-            } else if (this.name == '电压暂升') {
-                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+      } else if (this.name == '电压暂升') {
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   <path d="M8,50 L15,50 L18,38 L21,28 L24,38 L27,50 L30,62 L33,72 L36,62 L39,50 L42,38 L45,28 L48,38 L51,50 L54,43 L56,34 L58,26 L60,34 L63,43 L66,54 L68,60 L70,54 L72,43 L75,34 L77,26 L79,34 L81,43 L84,50 L87,38 L90,28 L93,38 L96,50" fill="none" stroke="#e6a23c" stroke-width="4"/>
 </svg>`
-            } else if (this.name == '电压中断') {
-                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+      } else if (this.name == '电压中断') {
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   <path d="M8,50 L15,50 L18,38 L21,28 L24,38 L27,50 L30,62 L33,72 L36,62 L39,50 L42,38 L45,28 L48,38 L51,50 L54,50 L57,50 L60,50 L63,50 L66,50 L69,50 L72,50 L75,50 L78,50 L81,50 L84,50 L87,38 L90,28 L93,38 L96,50" fill="none" stroke="#6b7280" stroke-width="4"/>
 </svg>`
-            } else if (this.name == '瞬态') {
-                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+      } else if (this.name == '瞬态') {
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   <path d="M8,50 L15,50 L18,38 L21,28 L24,38 L27,50 L30,62 L33,72 L36,62 L39,50 L42,38 L45,28 L48,38 L51,50 L53,50 L55,50 L57,20 L59,50 L61,50 L63,50 L66,60 L68,62 L70,60 L72,56 L75,54 L77,52 L79,54 L81,56 L84,50 L87,38 L90,28 L93,38 L96,50" fill="none" stroke="#8b5cf6" stroke-width="4"/>
 
 </svg>`
-            } else if (this.name == '未知') {
-                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+      } else if (this.name == '未知') {
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   <path d="M8,50 L15,50 L18,38 L21,28 L24,38 L27,50 L30,62 L33,72 L36,62 L39,50 L42,38 L45,28 L48,38 L51,50 L54,56 L56,54 L58,55 L60,54 L63,56 L66,60 L68,62 L70,60 L72,56 L75,54 L77,52 L79,54 L81,56 L84,50 L87,38 L90,28 L93,38 L96,50" fill="none" stroke="#6b7280" stroke-width="4"/>
   <text x="50" y="82" text-anchor="middle" font-size="18" fill="#6b7280" font-family="Arial, sans-serif" font-weight="bold">?</text>
 </svg>`
-            } else if (this.name == '稳态越限') {
-                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+      } else if (this.name == '稳态越限') {
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   <!-- Limit line -->
   <line x1="5" y1="40" x2="95" y2="40" stroke="#e6a23c" stroke-width="2" stroke-dasharray="4,4"/>
   
@@ -70,14 +70,14 @@ export default {
     </marker>
   </defs>
 </svg>`
-            } else if (this.name == '运行告警') {
-                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="40" height="40">
+      } else if (this.name == '运行告警') {
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="40" height="40">
   <path d="M78.43 4H20.06C9.48 4 1.16 12.33 1.16 22.9v38.37c0 10.57 8.32 18.9 18.9 18.9h26.49v7.27H25.77v7.41h47.96v-7.41H53.96v-7.27h26.47c10.58 0 18.9-8.33 18.9-18.9V22.9c0-10.57-8.32-18.9-18.9-18.9z m11.49 57.27c0 6.33-5.14 11.49-11.49 11.49H20.06c-6.34 0-11.49-5.15-11.49-11.49V22.9c0-6.33 5.14-11.49 11.49-11.49h59.37c6.34 0 11.49 5.15 11.49 11.49v38.37z" fill="#007aff"/>
   <line x1="50" y1="28" x2="50" y2="50" stroke="#007aff" stroke-width="6" stroke-linecap="round"/>
   <circle cx="50" cy="62" r="4" fill="#007aff"/>
 </svg>`
-            } else if (this.name == '治理设备') {
-                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="38" height="38">
+      } else if (this.name == '治理设备') {
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="38" height="38">
   <rect x="0" y="0" width="100" height="100" rx="8" ry="8" fill="#007aff30" stroke="#007aff" stroke-width="2"/>
   <rect x="8" y="8" width="84" height="84" rx="4" ry="4" fill="#FFFFFF" stroke="#007aff" stroke-width="1.5"/>
   <rect x="10" y="12" width="80" height="16" rx="2" ry="2" fill="#007aff30" stroke="#CCC" stroke-width="0.8"/>
@@ -95,8 +95,8 @@ export default {
   <circle cx="86" cy="69" r="2" fill="#007aff"/>
   <polygon points="88,65 86,70 84,65" fill="#007aff" opacity="0.7"/>
 </svg>`
-            } else if (this.name == '监测设备') {
-                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="38" height="38">
+      } else if (this.name == '监测设备') {
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="38" height="38">
   <style>
     text { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
   </style>
@@ -119,8 +119,8 @@ export default {
   <text x="54" y="65" font-size="7" fill="#007aff">Ic: 125.1A</text>
 
 </svg>`
-            } else if (this.name == '报告') {
-                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="47" height="47">
+      } else if (this.name == '报告') {
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="47" height="47">
   <path d="M12,12 L78,12 L88,22 L88,88 L12,88 Z" fill="none" stroke="#007aff" stroke-width="4" stroke-linejoin="round"/>
   <path d="M78,12 L78,22 L88,22" fill="none" stroke="#007aff" stroke-width="4" stroke-linejoin="round"/>
   <polyline points="20,50 26,50 28,46 30,42 32,46 34,50 36,54 38,58 40,54 42,50 44,46 46,42 48,46 50,50 56,50" fill="none" stroke="#007aff" stroke-width="4" stroke-linecap="round"/>
@@ -129,18 +129,20 @@ export default {
   <circle cx="70" cy="68" r="9" fill="none" stroke="#007aff" stroke-width="4"/>
   <line x1="76" y1="74" x2="86" y2="84" stroke="#007aff" stroke-width="4" stroke-linecap="round"/>
 </svg>`
-            }
-        },
+      } else if (this.name == '监测点') {
+        return `<svg t="1779762122379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3577" width="38" height="38"><path d="M875.17148 230.296136c30.706152 56.294611 46.059227 122.824606 46.059227 194.472293 0 107.47153-40.941535 209.825369-107.47153 286.590748 0 0 0 5.117692-5.117692 5.117692l-261.002288 286.590748c0 5.117692-5.117692 10.235384-5.117692 10.235383-15.353076 10.235384-30.706152 15.353076-46.059227 5.117692-5.117692 0-10.235384-5.117692-15.353076-10.235384v-5.117691L209.87153 716.476869s-5.117692-5.117692-5.117692-10.235384c-66.529995-76.765379-102.353838-174.001525-102.353838-281.473056C102.4 189.354601 286.636909 0 511.815354 0c81.883071 0 153.530758 25.58846 220.060752 66.529995 5.117692 0 5.117692 5.117692 10.235384 5.117692h5.117692c46.059227 35.823843 81.883071 81.883071 112.589222 133.05999 10.235384 5.117692 15.353076 15.353076 15.353076 25.588459z m-163.766141-92.118454c-5.117692 0-10.235384-5.117692-15.353076-10.235384-51.176919-35.823843-112.589222-56.294611-179.119217-56.294611-189.354601 0-337.767667 158.64845-337.767667 353.120742 0 92.118455 30.706152 174.001525 87.000762 235.413829l20.470768 20.470767 20.470768 20.470768 143.295374 153.530758L511.815354 931.41993l71.647687-76.765379 143.295373-153.530758 5.117692-5.117692 35.823844-40.941535c0-5.117692 5.117692-5.117692 10.235384-5.117692 51.176919-61.412303 81.883071-143.295374 81.88307-230.296136-5.117692-112.589222-66.529995-214.943061-148.413065-281.473056z m-199.589985 460.592273c-92.118455 0-163.766141-76.765379-163.766142-174.001526C348.049212 332.649975 419.696899 255.884596 511.815354 255.884596c92.118455 0 163.766141 76.765379 163.766141 174.001525 0 92.118455-71.647687 168.883833-163.766141 168.883834z m0-271.237672c-51.176919 0-97.236146 46.059227-97.236147 102.353838s46.059227 102.353838 97.236147 102.353839c51.176919 0 97.236146-46.059227 97.236146-102.353839s-46.059227-102.353838-97.236146-102.353838z" fill="#007aff" p-id="3578"></path></svg>`
+      }
     },
-    methods: {},
+  },
+  methods: {},
 }
 </script>
 
 <style scoped>
 .svg-container {
-    width: 100rpx;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  width: 100rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 </style>

manifest.json

@@ -139,7 +139,8 @@
                 "/api" : {
                     "https" : true,
                     // "target" : "https://pqmcn.com:8092/api",
-                    "target" : "http://192.168.1.103:10215",
+                    // "target" : "http://192.168.1.103:10215",
+					"target" : "http://192.168.1.103:10215",
                     "changOrigin" : true,
                     "pathRewrite" : {
                         "/api" : ""

pages.json

@@ -121,6 +121,13 @@
                 "navigationBarTitleText": "个性化推荐"
             }
         },
+
+        {
+            "path": "pages/index/comp/monitoringPoint",
+            "style": {
+                "navigationBarTitleText": "监测点电能质量信息"
+            }
+        },
         {
             "path": "pages/mine/system",
             "style": {
@@ -420,6 +427,7 @@
                 "navigationBarTitleText": "关注工程配置"
             }
         },
+  
         {
             "path": "pages/mine/serverSetting",
             "style": {

pages/device/APF/comp/IO.vue

@@ -6,20 +6,16 @@
                 <view class="grid-card-title">温度</view>
                 <view class="grid-card-content-4">
                     <template v-for="item in renderData">
-                        <view class="item item-title"
-                            >{{ item[0].clDid }}
+                        <view class="item item-title">{{ item[0].clDid }}
                             <template v-if="item[0].clDid"> (°C)</template>
                         </view>
-                        <view class="item item-title"
-                            >{{ item[1].clDid }}
+                        <view class="item item-title">{{ item[1].clDid }}
                             <template v-if="item[1].clDid"> (°C)</template>
                         </view>
-                        <view class="item item-title"
-                            >{{ item[2].clDid }}
+                        <view class="item item-title">{{ item[2].clDid }}
                             <template v-if="item[2].clDid"> (°C)</template>
                         </view>
-                        <view class="item item-title"
-                            >{{ item[3].clDid }}
+                        <view class="item item-title">{{ item[3].clDid }}
                             <template v-if="item[3].clDid"> (°C)</template>
                         </view>
                         <view class="item">{{ item[0].clDid ? Math.round(item[0].value) || '-' : '' }}</view>
@@ -30,27 +26,21 @@
                 </view>
             </view>
             <!-- 运维管理员、工程用户 可看 -->
-            <view
-                class="grid-card"
-                v-if="userInfo.authorities == 'operation_manager' || userInfo.authorities == 'engineering_user'"
-            >
+            <view class="grid-card"
+                v-if="(userInfo.authorities == 'operation_manager' || userInfo.authorities == 'engineering_user') && moduleData.length > 0">
                 <view class="grid-card-title">状态</view>
                 <view class="grid-card-content-4">
                     <template v-for="(item, index) in moduleData">
-                        <view class="item item-title"
-                            >{{ item[0].moduleName }}
+                        <view class="item item-title">{{ item[0].moduleName }}
                             <template v-if="item[0].moduleName"></template>
                         </view>
-                        <view class="item item-title"
-                            >{{ item[1].moduleName }}
+                        <view class="item item-title">{{ item[1].moduleName }}
                             <template v-if="item[1].moduleName"></template>
                         </view>
-                        <view class="item item-title"
-                            >{{ item[2].moduleName }}
+                        <view class="item item-title">{{ item[2].moduleName }}
                             <template v-if="item[2].moduleName"></template>
                         </view>
-                        <view class="item item-title"
-                            >{{ item[3].moduleName }}
+                        <view class="item item-title">{{ item[3].moduleName }}
                             <template v-if="item[3].moduleName"></template>
                         </view>
                         <!-- <uni-tag :text="item[0].moduleState" :type=" item[0].moduleState=='离线'?'error' : 'success'" /> -->
@@ -101,6 +91,7 @@ export default {
     computed: {
         renderData() {
             let arr = []
+
             // 把IOData转换成每4个一组的二维数组
             for (let i = 0; i < this.IOData.length; i += 4) {
                 this.IOData.slice(i, i + 4).forEach((item) => {
@@ -120,7 +111,6 @@ export default {
                     }
                 }
             })
-            console.warn(arr)
             return arr
         },
         moduleData() {
@@ -159,6 +149,5 @@ export default {
 }
 </script>
 <style lang="scss">
-.basic {
-}
+.basic {}
 </style>

pages/device/APF/comp/basic.vue

@@ -1,6 +1,7 @@
 <template>
     <view>
-        <uni-load-more status="loading" v-if="basicData.length == 0"></uni-load-more>
+        <uni-load-more status="loading"
+            v-if="renderData.电网电流.length == 0 || renderData.电网电压.length == 0 || renderData.负载电流.length == 0 || renderData.补偿电流.length == 0 "></uni-load-more>
         <view class="basic" v-else>
             <view class="grid-card">
                 <view class="grid-card-title">电网电流</view>
@@ -12,10 +13,10 @@
                         <view class="item">{{ item.phase }}</view>
                         <view class="item">{{
                             item['Apf_RmsI_Sys(A)'] > 0 ? item['Apf_RmsI_Sys(A)'].toFixed(2) : item['Apf_RmsI_Sys(A)']
-                        }}</view>
+                            }}</view>
                         <view class="item">{{
                             item['Apf_ThdA_Sys(%)'] > 0 ? item['Apf_ThdA_Sys(%)'].toFixed(2) : item['Apf_ThdA_Sys(%)']
-                        }}</view>
+                            }}</view>
                     </template>
                 </view>
             </view>
@@ -30,13 +31,13 @@
                         <view class="item">{{ item.phase }}</view>
                         <view class="item">{{
                             item['Apf_PhV_Sys(V)'] > 0 ? item['Apf_PhV_Sys(V)'].toFixed(2) : item['Apf_PhV_Sys(V)']
-                        }}</view>
+                            }}</view>
                         <view class="item">{{
                             item['Apf_Freq(Hz)'] > 0 ? item['Apf_Freq(Hz)'].toFixed(2) : item['Apf_Freq(Hz)']
-                        }}</view>
+                            }}</view>
                         <view class="item">{{
                             item['Apf_ThdU_Sys(%)'] > 0 ? item['Apf_ThdU_Sys(%)'].toFixed(2) : item['Apf_ThdU_Sys(%)']
-                        }}</view>
+                            }}</view>
                     </template>
                 </view>
             </view>
@@ -73,15 +74,15 @@
                             item['Apf_RmsI_TolOut(A)'] == 3.1415926
                                 ? '-'
                                 : item['Apf_RmsI_TolOut(A)'] > 0
-                                  ? item['Apf_RmsI_TolOut(A)'].toFixed(2)
-                                  : item['Apf_RmsI_TolOut(A)']
+                                    ? item['Apf_RmsI_TolOut(A)'].toFixed(2)
+                                    : item['Apf_RmsI_TolOut(A)']
                         }}</view>
                         <view class="item">{{
                             item['load_Rate'] == 3.1415926
                                 ? '-'
                                 : item['load_Rate'] > 0
-                                  ? item['load_Rate'].toFixed(2)
-                                  : item['load_Rate']
+                                    ? item['load_Rate'].toFixed(2)
+                                    : item['load_Rate']
                         }}</view>
                     </template>
                 </view>
@@ -179,6 +180,5 @@ export default {
 }
 </script>
 <style lang="scss">
-.basic {
-}
+.basic {}
 </style>

pages/device/APF/comp/power.vue

@@ -1,6 +1,6 @@
 <template>
     <view>
-        <uni-load-more status="loading" v-if="basicData.length == 0"></uni-load-more>
+        <uni-load-more status="loading" v-if="renderData.电网侧.length == 0 || renderData.负载侧.length == 0"></uni-load-more>
         <view class="basic" v-else>
             <view class="grid-card">
                 <view class="grid-card-title">电网侧</view>
@@ -12,14 +12,14 @@
                     <view class="item item-title">功率因数</view>
                     <template v-for="(item, index) in renderData.电网侧">
                         <view class="item">{{ item.phase }}</view>
-                        <view class="item"
-                            >{{ item['Apf_P_Sys(W)'] == '-' ? '-' : (item['Apf_P_Sys(W)'] / 1000).toFixed(2) }}
+                        <view class="item">{{ item['Apf_P_Sys(W)'] == '-' ? '-' : (item['Apf_P_Sys(W)'] /
+                            1000).toFixed(2) }}
                         </view>
-                        <view class="item"
-                            >{{ item['Apf_Q_Sys(Var)'] == '-' ? '-' : (item['Apf_Q_Sys(Var)'] / 1000).toFixed(2) }}
+                        <view class="item">{{ item['Apf_Q_Sys(Var)'] == '-' ? '-' : (item['Apf_Q_Sys(Var)'] /
+                            1000).toFixed(2) }}
                         </view>
-                        <view class="item"
-                            >{{ item['Apf_S_Sys(VA)'] == '-' ? '-' : (item['Apf_S_Sys(VA)'] / 1000).toFixed(2) }}
+                        <view class="item">{{ item['Apf_S_Sys(VA)'] == '-' ? '-' : (item['Apf_S_Sys(VA)'] /
+                            1000).toFixed(2) }}
                         </view>
                         <view class="item">{{ item['Apf_PF_Sys(null)'] || '-' }}</view>
                     </template>
@@ -35,14 +35,14 @@
                     <view class="item item-title">功率因数</view>
                     <template v-for="(item, index) in renderData.负载侧">
                         <view class="item">{{ item.phase }}</view>
-                        <view class="item"
-                            >{{ item['Apf_P_Load(W)'] == '-' ? '-' : (item['Apf_P_Load(W)'] / 1000).toFixed(2) }}
+                        <view class="item">{{ item['Apf_P_Load(W)'] == '-' ? '-' : (item['Apf_P_Load(W)'] /
+                            1000).toFixed(2) }}
                         </view>
                         <view class="item">{{
                             item['Apf_Q_Load(Var)'] == '-' ? '-' : (item['Apf_Q_Load(Var)'] / 1000).toFixed(2)
-                        }}</view>
-                        <view class="item"
-                            >{{ item['Apf_S_Load(VA)'] == '-' ? '-' : (item['Apf_S_Load(VA)'] / 1000).toFixed(2) }}
+                            }}</view>
+                        <view class="item">{{ item['Apf_S_Load(VA)'] == '-' ? '-' : (item['Apf_S_Load(VA)'] /
+                            1000).toFixed(2) }}
                         </view>
                         <view class="item">{{ item['Apf_PF_Load(null)'] || '-' }}</view>
                     </template>
@@ -130,6 +130,5 @@ export default {
 }
 </script>
 <style lang="scss">
-.basic {
-}
+.basic {}
 </style>

pages/device/APF/detail.vue

@@ -5,18 +5,10 @@
                 <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"
-                            >
+                            <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>
@@ -51,13 +43,9 @@
                         <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 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>
@@ -107,22 +95,10 @@
                 </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 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>
@@ -140,6 +116,7 @@ import { manualAccess } from '@/common/api/accessBoot'
 import { MQTT_IP, MQTT_OPTIONS } from '@/common/js/mqtt.js'
 import mqtt from 'mqtt/dist/mqtt.js'
 import { base64ToPath, pathToBase64 } from 'image-tools'
+import { queryByCode, queryStatistical } from '@/common/api/dictionary'
 import hoverMenu from '@/hover-menu/components/hover-menu/hover-menu.vue'
 export default {
     components: {
@@ -164,6 +141,7 @@ export default {
             navHeight: 0,
             img: '',
             topoImg: '',
+            targetLists: [],
             navMenuList: [
                 {
                     text: '基本',
@@ -177,9 +155,6 @@ export default {
                     text: '功率',
                     id: 'a16aceae7d1565bf9f94dd7410cf9bce',
                 },
-                // {
-                //     text: '波形',
-                // },
                 {
                     text: '其他',
                 },
@@ -358,11 +333,21 @@ export default {
                 },
             })
         },
-        init() {
+
+        getTarget() {
+            return queryByCode('app_harmonic_code').then((res) => {
+                return queryStatistical({ id: res.data.id }).then((resp) => {
+                    this.targetLists = resp.data.selectedList
+                })
+            })
+        },
+
+        async init() {
             console.log('init')
             this.loading = true
             this.domLoading = true
-            queryTopologyDiagram(this.devId).then((res) => {
+
+            await queryTopologyDiagram(this.devId).then((res) => {
                 res.data.filePath = this.$config.static + res.data.filePath
                 this.deviceInfo = res.data
                 this.downloadImg()
@@ -371,6 +356,7 @@ export default {
                     let index = this.deviceInfo.appsLineTopologyDiagramPO?.findIndex((element) => {
                         element.label = element.name
                         item.label = element.name
+                        item.target = element.target
                         return element.linePostion === item.linePostion
                     })
                     if (index > -1) {
@@ -384,10 +370,14 @@ export default {
                 })
                 console.log(this.topolodyData)
                 if (this.client) {
+                    this.client.publish(`/zl/askDevData/${this.devId}/${this.navMenuList[0].id}`)
                     this.loading = false
                 } else {
                     this.initMqtt(this.navMenuList[0].id)
                 }
+                console.log("🚀 ~ this.client:", this.client)
+
+
             })
         },
         renderFinish(e) {
@@ -460,22 +450,28 @@ export default {
                     console.log('连接断开')
                 })
                 .on('message', (topic, message) => {
-                    console.log('接收推送信息：', JSON.parse(message.toString()), topic)
-                    console.log('🚀 ~ .on ~ topic:', topic)
+                    // console.log('接收推送信息：', JSON.parse(message.toString()), topic)
+                    // console.log('🚀 ~ .on ~ topic:', topic)
 
                     if (topic === `/zl/devData/${this.devId}/${id}`) {
+
+                        const data = JSON.parse(message.toString())
+                        if (Array.isArray(data) && !data.length) return
+
                         if ((!message.toString() || message.toString().length < 10) && this.loading) {
                             this.$util.toast('该设备暂无数据')
                         }
                         this.loading = false
-                        this.handlerData(JSON.parse(message.toString()))
+                        this.handlerData(data)
                     } else if (topic === `/zl/TemperData/${this.devId}`) {
+                        const data = JSON.parse(message.toString())
+                        if (Array.isArray(data) && !data.length) return
                         // this.basicData.forEach((item) => {
                         //     if (item.statisticalName === '温度' && item.phase === 'avg') {
                         //         item.statisticalData = message.toString()
                         //     }
                         // })
-                        this.IOData = JSON.parse(message.toString())
+                        this.IOData = data
                         // this.IOData = this.IOData.filter((item) => item.value !== 0)
                         this.IOData.forEach((item) => {
                             if (!item.value) {
@@ -490,37 +486,60 @@ export default {
                 })
         },
 
-        handlerData(data) {
+        async handlerData(data) {
             this.basicData = data
 
             this.topolodyData.forEach((element) => {
                 let arr = []
+                let list = this.targetLists.filter(key => key.dataType == element.target)
 
-                element.showKey.forEach((key) => {
+                if (list.length > 0) {
+                    let id = list[0]?.eleEpdPqdVOS.filter(key => key.phase == 'A')[0]?.id || ''
                     data.forEach((item) => {
-                        if (item.statisticalName === key && item.phase === 'avg') {
-                            if (key === 'Apf_RmsI_TolOut(A)') {
-                                arr.push({
-                                    label: '总输出电流:',
-                                    value: Math.round(item.statisticalData) + 'A',
-                                })
-                            } else {
-                                arr.push({
-                                    label: '电流畸变率:',
-                                    value: Math.round(item.statisticalData) + '%',
-                                })
-                                // arr.push('电流畸变率:' + item.statisticalData + '%')
-                            }
+                        if (item.statisticalIndex === id && item.phase === 'avg') {
+
+                            arr.push({
+                                label: list[0].dataTypeName.split('-')[1] + ':',
+                                value: (item.statisticalData) + `${item.unit || ''}`,
+                            })
+
                         }
                         if (item.time) {
                             this.dataTime = item.time.seconds
                             this.time = this.$util.parseTime(this.dataTime - 8 * 60 * 60)
-                            // console.log(11111111,this.dataTime);
                         }
+
                     })
-                })
+                }
+                else {
+                    element.showKey.forEach((key) => {
+                        data.forEach((item) => {
+                            if (item.statisticalName === key && item.phase === 'avg') {
+                                if (key === 'Apf_RmsI_TolOut(A)') {
+                                    arr.push({
+                                        label: '总输出电流:',
+                                        value: (item.statisticalData) + 'A',
+                                    })
+                                } else {
+                                    arr.push({
+                                        label: '电流畸变率:',
+                                        value: (item.statisticalData) + '%',
+                                    })
+                                }
+                            }
+                            if (item.time) {
+                                this.dataTime = item.time.seconds
+                                this.time = this.$util.parseTime(this.dataTime - 8 * 60 * 60)
+                            }
+                        })
+                    })
+                }
+
+
                 element.value = arr
             })
+            console.log("🚀 ~  this.topolodyData:", this.topolodyData)
+
             console.log(this.topolodyData)
             this.$forceUpdate()
         },
@@ -539,13 +558,16 @@ export default {
         }, 1000)
     },
 
-    onLoad(options) {
+    async onLoad(options) {
+        await this.getTarget()
+
         this.pageOptions = options
         this.device = JSON.parse(options.device)
-        console.log('🚀 ~ options:', 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,
@@ -626,9 +648,11 @@ export default {
                     lng: '',
                     showKey: item.showKey, //要展示的指标key
                     value: [],
+                    target: item.target
                 }
             })
         })
+
         this.init()
     },
 }
@@ -636,6 +660,7 @@ export default {
 
 <style lang="scss">
 .detail {
+
     // background: $uni-theme-white;
     .header-bg {
         position: absolute;
@@ -666,7 +691,7 @@ export default {
             z-index: 2;
             text-align: center;
             color: #111;
-            width: 110rpx;
+            width: 150rpx;
             font-size: 16rpx;
             opacity: 0.8;
 

pages/device/new.vue

@@ -6,13 +6,8 @@
                     <uni-forms-item label="设备识别码">
                         <view style="display: flex">
                             <uni-easyinput type="text" v-model="formData.nDid" placeholder="请输入设备识别码" />
-                            <uni-icons
-                                type="camera"
-                                color="#007aff"
-                                size="26"
-                                class="ml20"
-                                @click="scanCode"
-                            ></uni-icons>
+                            <uni-icons type="camera" color="#007aff" size="26" class="ml20"
+                                @click="scanCode"></uni-icons>
                         </view>
                     </uni-forms-item>
                 </uni-forms>
@@ -28,36 +23,18 @@
                 <uni-forms>
                     <uni-forms-item label="工程">
                         <view style="display: flex; align-items: center">
-                            <uni-data-select
-                                v-model="formData.engineeringId"
-                                :localdata="engineeringList"
-                                @change="engineeringChang($event, true)"
-                                :clear="false"
-                            ></uni-data-select>
-                            <uni-icons
-                                type="plusempty"
-                                color="#007aff"
-                                size="26"
-                                class="ml20"
-                                @click="createEngineering"
-                            ></uni-icons>
+                            <uni-data-select v-model="formData.engineeringId" :localdata="engineeringList"
+                                @change="engineeringChang($event, true)" :clear="false"></uni-data-select>
+                            <uni-icons type="plusempty" color="#007aff" size="26" class="ml20"
+                                @click="createEngineering"></uni-icons>
                         </view>
                     </uni-forms-item>
                     <uni-forms-item label="项目">
                         <view style="display: flex; align-items: center">
-                            <uni-data-select
-                                v-model="formData.projectId"
-                                :localdata="projectRange"
-                                @change="queryTopologyDiagramPage"
-                                :clear="false"
-                            ></uni-data-select>
-                            <uni-icons
-                                type="plusempty"
-                                color="#007aff"
-                                size="26"
-                                class="ml20"
-                                @click="createProject"
-                            ></uni-icons>
+                            <uni-data-select v-model="formData.projectId" :localdata="projectRange"
+                                @change="queryTopologyDiagramPage" :clear="false"></uni-data-select>
+                            <uni-icons type="plusempty" color="#007aff" size="26" class="ml20"
+                                @click="createProject"></uni-icons>
                         </view>
                     </uni-forms-item>
 
@@ -69,25 +46,14 @@
                                 </view>
                                 <view v-else class="gplot gplot-empty center" @click="chooseGplot"> 选择拓扑图</view>
                             </view>
-                            <uni-icons
-                                type="image"
-                                color="#007aff"
-                                size="26"
-                                class="ml20"
-                                @click="chooseGplot"
-                            ></uni-icons>
+                            <uni-icons type="image" color="#007aff" size="26" class="ml20"
+                                @click="chooseGplot"></uni-icons>
                         </view>
                     </uni-forms-item>
-                    <uni-forms-item
-                        label="监测点"
-                        v-if="pointList.length && formData.topologyDiagramUrl && formData.projectId"
-                    >
-                        <view
-                            class="point-item"
-                            v-for="(item2, index2) in pointList"
-                            :key="index2"
-                            @click="editPoint(item2, index2)"
-                        >
+                    <uni-forms-item label="监测点"
+                        v-if="pointList.length && formData.topologyDiagramUrl && formData.projectId">
+                        <view class="point-item" v-for="(item2, index2) in pointList" :key="index2"
+                            @click="editPoint(item2, index2)">
                             <view style="flex: 1" v-if="item2.name">{{ item2.name }}</view>
                             <view style="flex: 1; color: #999" v-else>请选择监测点</view>
                             <uni-icons type="compose" color="#007aff" size="26" class="ml20"></uni-icons>
@@ -106,17 +72,10 @@
             <uni-drawer ref="gplot" mode="right" :mask-click="false">
                 <scroll-view style="height: 100%" scroll-y="true">
                     <view class="content">
-                        <image
-                            class="gplot gplot-box"
-                            mode="aspectFill"
-                            :class="{ 'gplot-active': key == activeGplot }"
-                            :src="item.filePath"
-                            @click="activeGplot = key"
-                            v-for="(item, key) in imageList"
-                            :key="key"
-                        />
-                        <view v-if="imageList.length === 0" style="text-align: center" class="mt50 mb50"
-                            >暂无拓扑图
+                        <image class="gplot gplot-box" mode="aspectFill" :class="{ 'gplot-active': key == activeGplot }"
+                            :src="item.filePath" @click="activeGplot = key" v-for="(item, key) in imageList"
+                            :key="key" />
+                        <view v-if="imageList.length === 0" style="text-align: center" class="mt50 mb50">暂无拓扑图
                         </view>
                         <view class="btn-wrap">
                             <view class="btn-wrap-item" @click="closeDrawer"> 取消</view>
@@ -142,22 +101,18 @@
                     </view>
                     <view class="content">
                         <view class="content-des">请拖动图中的文字选择监测点位置</view>
-                        <uni-forms>
-                            <uni-data-select
-                                v-model="point.position"
-                                :localdata="positionList"
-                                @change="positionChange"
-                                disabled
-                                :clear="false"
-                            ></uni-data-select>
-                            <uni-easyinput
-                                :clearable="false"
-                                class="mt20"
-                                type="text"
-                                v-model="point.alias"
-                                @change="aliasChange"
-                                placeholder="别名（非必填）"
-                            />
+                        <uni-forms labelWidth="70px">
+                            <uni-forms-item label="位置">
+                                <uni-data-select v-model="point.position" :localdata="positionList"
+                                    @change="positionChange" disabled :clear="false"></uni-data-select>
+                            </uni-forms-item>
+                            <uni-forms-item label="别名">
+                                <uni-easyinput :clearable="false"  type="text" v-model="point.alias"
+                                    @change="aliasChange" placeholder="别名（非必填）" />
+                            </uni-forms-item>
+                            <uni-forms-item label="绑定指标">
+                                <uni-data-select v-model="point.target" :localdata="targetList"></uni-data-select>
+                            </uni-forms-item>
                         </uni-forms>
                         <view class="btn-wrap">
                             <view class="btn-wrap-item" @click="closeDrawer"> 取消</view>
@@ -181,6 +136,7 @@ import {
 } from '@/common/api/device.js'
 import { getProjectList, queryTopologyDiagramPage } from '@/common/api/project.js'
 import ykAuthpup from '@/components/yk-authpup/yk-authpup'
+import { queryByCode, queryStatistical } from '@/common/api/dictionary'
 export default {
     components: {
         ykAuthpup,
@@ -204,6 +160,8 @@ export default {
             activeGplot: 0,
             positionList: [],
             imageList: [],
+            targetLists: [],//总数据
+            targetList: [],//根据位置切换数据
             isAdaptive: false, // 是否适应当前项目
             dialogOpen: false,
             options: {},
@@ -226,9 +184,20 @@ export default {
     onLoad(o) {
         this.options = o
         let dictData = uni.getStorageSync(this.$cacheKey.dictData)
+        queryByCode('app_harmonic_code').then((res) => {
+            queryStatistical({ id: res.data.id }).then((resp) => {
+                this.targetLists = resp.data.selectedList.map((item) => {
+                    return {
+                        ...item,
+                        text: item.dataTypeName,
+                        value: item.dataType,
+                    }
+                })
+            })
+        })
         dictData.forEach((item) => {
             if (item.code == 'Line_Position') {
-                this.positionList = item.children.map((item) => {
+                this.positionList = item.children.filter((child) => child.name !== 'PCC公共点').map((item) => {
                     return {
                         ...item,
                         text: item.name,
@@ -264,6 +233,19 @@ export default {
         //     })
     },
     methods: {
+        // 设置绑定指标
+        settarget(e) {
+            let pointName = this.positionList.find((item) => item.id == this.point.position).name
+
+            this.targetList = this.targetLists.filter(item => item.dataTypeName.includes(pointName)).map((item) => {
+                return {
+                    ...item,
+                    text: item.dataTypeName.split('-')[1],
+                    value: item.dataType,
+                }
+            })
+
+        },
         getEngineering() {
             queryEngineeringPage({ pageNum: 1, pageSize: 9999 }).then((res) => {
                 let arr = [
@@ -377,7 +359,7 @@ export default {
             console.log(e)
         },
 
-        projectChange(e) {},
+        projectChange(e) { },
         scanCode() {
             if (plus.os.name == 'Android') {
                 this.$refs['authpup'].open()
@@ -509,6 +491,7 @@ export default {
                     this.point.alias = ''
                 }
             }
+            this.settarget()
             this.dialogOpen = true
             this.$refs.point.open()
             this.$forceUpdate()

pages/device/realTime/index.vue

@@ -739,126 +739,129 @@ export default {
                     // console.log('接收推送信息：', JSON.parse(message.toString()), topic)
                     if (!this.connection) return
                     // console.log('🚀 ~ .on ~ topic:', topic, this.userInfo.userIndex)
-             
 
-                    if (topic == `/Web/RealData/${this.lineId}`) {
+                    if (
+                        topic == `/Web/RealData/${this.lineId}` ||
+                        topic == `/Web/RealData/${this.userInfo.userIndex}`
+                    ) {
                         let list = JSON.parse(message.toString())
+                        if (list.lineId != this.lineId) return
                         // if (list.userId == this.userInfo.userIndex) {
-                            // console.log(list)
-                            this.realTime = list.dataTime
-                            let pt = list.pt || 0
-                            let ct = list.ct || 0
+                        // 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),
+                        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),
+                            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.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)
+                        // 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)
                         // }
                     }
                 })
@@ -1029,7 +1032,8 @@ export default {
         .table-row {
             display: flex;
             justify-content: space-between;
-            padding: 20rpx 30rpx;
+            padding: 15rpx 30rpx;
+            height: 20px;
             border-bottom: 1rpx solid #eee;
             text {
                 flex: 1;

pages/engineering/detail.vue

@@ -24,9 +24,10 @@
                 </view>
                 <view class="content" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
                     <view v-show="navMenuActive == 0">
+                        <!-- extra="🔍" -->
                         <uni-card
                             :title="item.name"
-                            extra="🔍"
+                       
                             @click="jumpProject(item)"
                             v-for="(item, index) in store.data"
                             :key="index"
@@ -258,7 +259,7 @@ export default {
 .term-list-bottom {
     .term-list-bottom-item {
         font-size: 28rpx;
-        margin-bottom: 20rpx;
+        // margin-bottom: 20rpx;
         display: flex;
         justify-content: space-between;
         // view:first-of-type{
@@ -270,4 +271,10 @@ export default {
         margin-bottom: 0;
     }
 }
+/deep/ .uni-card__content {
+    padding: 5px 10px 10px !important;
+}
+/deep/ .uni-card__header-content-title {
+    font-weight: 700;
+}
 </style>

pages/engineering/list.vue

@@ -14,7 +14,8 @@
                 <uni-swipe-action-item v-for="(item, index) in store.data"
                     :style="{ marginTop: index === 0 ? '0' : '' }" :key="index" :threshold="0"
                     :right-options="item.isTop == 0 ? options1 : options12" @click="bindClick($event, item)">
-                    <uni-card class="boxClick" :title="item.name" extra="🔍" @click="jump(item)">
+                    <!-- extra="🔍" -->
+                    <uni-card class="boxClick" :title="item.name"  @click="jump(item)">
                         <view class="term-list-bottom">
                             <view class="term-list-bottom-item">
                                 <view>区域</view>

pages/index/comp/device.vue

@@ -142,6 +142,7 @@ 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

pages/index/comp/engineering.vue

@@ -151,8 +151,8 @@ export default {
                 // 存储参数
                 uni.setStorageSync('messageParams', {
         
-                    engineeringName: this.device.engineeringName,
-                    engineeringId: this.device.engineeringId, //工程ID
+                    engineeringName: item.engineeringName,
+                    engineeringId: item.engineeringId, //工程ID
                     projectName: '',
                     projectId: '', //項目ID
                     deviceName: '',

pages/index/comp/monitoringPoint.vue

@@ -0,0 +1,349 @@
+<template>
+    <view class="dashboard-container">
+        <!-- 页面头部 -->
+        <view class="page-header">
+            <Cn-filterInformation @select="select" />
+            <view class="legend-row">
+                <view class="legend-item">
+                    <view class="legend-color" style="background:#DAA520"></view>
+                    <text class="legend-text">A相</text>
+                </view>
+                <view class="legend-item">
+                    <view class="legend-color" style="background:#2E8B57"></view>
+                    <text class="legend-text">B相</text>
+                </view>
+                <view class="legend-item">
+                    <view class="legend-color" style="background:#A52A2A"></view>
+                    <text class="legend-text">C相</text>
+                </view>
+            </view>
+        </view>
+
+        <!-- 监测点列表 - 竖向滚动 -->
+        <scroll-view class="monitors-scroll" scroll-y :show-scrollbar="true">
+            <view class="monitors-list">
+                <view v-for="(point, idx) in monitoringPoints" :key="idx" class="monitor-card">
+                    <!-- 卡片头部 -->
+                    <view class="card-header">
+                        <view class="event-icon">
+
+                            <Cn-icon-transient :name="`监测点`" />
+                        </view>
+                        <view class="card-header-info">
+                            <view class="point-name">
+                                <text class="point-text ellipsis">{{ point.pointName }}</text>
+                            </view>
+                            <view class="meta-row">
+                                <text class="meta-item ellipsis">工程: {{ point.projectName }}</text>
+                                <text class="meta-item ellipsis">项目: {{ point.siteName }}</text>
+                                <text class="meta-item ellipsis meta-item-full">设备: {{ point.deviceName }}</text>
+                            </view>
+                        </view>
+                    </view>
+
+                    <!-- 参数区域：使用 children 数据循环，每两个指标放一行 -->
+                    <view class="params-section">
+                        <view v-for="(rowItems, rowIdx) in chunkedChildren(point.children)" :key="rowIdx"
+                            class="double-row">
+                            <view v-for="(child, childIdx) in rowItems" :key="childIdx" class="param-group">
+                                <view class="param-title">
+                                    <text>{{ child.name }}</text>
+                                </view>
+                                <!-- 三相数据：颜色区分，无文字 -->
+                                <view class="phase-vertical">
+                                    <view class="phase-item-vertical">
+                                        <text class="phase-value-vertical" style="color:#DAA520">{{ child.A }}</text>
+                                    </view>
+                                    <view class="phase-divider"></view>
+                                    <view class="phase-item-vertical">
+                                        <text class="phase-value-vertical" style="color:#2E8B57">{{ child.B }}</text>
+                                    </view>
+                                    <view class="phase-divider"></view>
+                                    <view class="phase-item-vertical">
+                                        <text class="phase-value-vertical" style="color:#A52A2A">{{ child.C }}</text>
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </scroll-view>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            // 监测点基础信息 + children 指标数据
+            monitoringPoints: [
+                {
+                    pointName: "升压站#1主变测点",
+                    projectName: "华光100MW工程11111",
+                    siteName: "绿色智慧能源11111",
+                    deviceName: "PMC-800终端",
+                    children: [
+                        { name: '电压有效值(kV)', A: '10.52', B: '10.45', C: '10.39' },
+                        { name: '电流有效值(A)', A: '408.0', B: '395.0', C: '403.0' },
+                        { name: '基波电压幅值(kV)', A: '10.48', B: '10.42', C: '10.35' },
+                        { name: '基波电流幅值(A)', A: '405.5', B: '392.8', C: '400.2' }
+                    ]
+                },
+                {
+                    pointName: "光伏区#3汇流箱",
+                    projectName: "华光100MW工程",
+                    siteName: "绿色智慧能源示范",
+                    deviceName: "汇流监测单元",
+                    children: [
+                        { name: '电压有效值(kV)', A: '10.72', B: '10.65', C: '10.59' },
+                        { name: '电流有效值(A)', A: '426.0', B: '413.0', C: '421.0' },
+                        { name: '基波电压幅值(kV)', A: '10.68', B: '10.62', C: '10.55' },
+                        { name: '基波电流幅值(A)', A: '423.5', B: '410.8', C: '418.2' }
+                    ]
+                },
+
+            ],
+            // 三相颜色配置
+            phaseColors: [
+                { name: 'A相', color: '#DAA520' },
+                { name: 'B相', color: '#2E8B57' },
+                { name: 'C相', color: '#A52A2A' }
+            ]
+        }
+    },
+    methods: {
+        // 将 children 数组每两个一组进行分组，用于一行显示两个指标
+        chunkedChildren(children) {
+            const result = []
+            for (let i = 0; i < children.length; i += 2) {
+                result.push(children.slice(i, i + 2))
+            }
+            return result
+        },
+        select(value) {
+            console.log("🚀 ~ value:", value)
+        },
+    }
+}
+</script>
+
+<style>
+* {
+    box-sizing: border-box;
+}
+
+.dashboard-container {
+    min-height: 100vh;
+    background: #f5f7fb;
+    padding: 20rpx 20rpx 0rpx 20rpx;
+    display: flex;
+    flex-direction: column;
+}
+
+/* 头部样式 */
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+}
+
+.title-section {
+    display: flex;
+    align-items: baseline;
+    gap: 12rpx;
+}
+
+.title-icon {
+    font-size: 40rpx;
+}
+
+.title {
+    font-size: 34rpx;
+    font-weight: 700;
+    color: #2c3e50;
+}
+
+/* 图例 */
+.legend-row {
+    display: flex;
+    gap: 20rpx;
+    align-items: center;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+}
+
+.legend-color {
+    width: 24rpx;
+    height: 24rpx;
+    border-radius: 50%;
+}
+
+.legend-text {
+    font-size: 24rpx;
+    color: #333;
+    font-weight: 500;
+}
+
+/* 竖向滚动区域 */
+.monitors-scroll {
+    flex: 1;
+    max-height: calc(100vh - 100rpx);
+}
+
+.monitors-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx;
+    padding-bottom: 20rpx;
+}
+
+/* 卡片样式 */
+.monitor-card {
+    background: #ffffff;
+    border-radius: 20rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    border: 1rpx solid #e8ecf0;
+}
+
+.card-header {
+    padding: 20rpx 20rpx 10rpx 20rpx;
+    border-bottom: 1rpx solid #eef2f6;
+    display: flex;
+    align-items: center;
+}
+
+.card-header-info {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.point-name {
+    margin-bottom: 4rpx;
+}
+
+.point-text {
+    display: block;
+    font-size: 30rpx;
+    font-weight: 700;
+    color: #333333;
+}
+
+/* 工程、项目、设备：两列布局，超出显示省略号 */
+.meta-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 6rpx 8rpx;
+    width: 100%;
+}
+
+.meta-item {
+    display: block;
+    min-width: 0;
+    font-size: 24rpx;
+    color: #666666;
+    line-height: 1.3;
+}
+
+.meta-item-full {
+    grid-column: 1 / -1;
+}
+
+/* 参数区域 */
+.params-section {
+    padding: 20rpx 16rpx 24rpx 16rpx;
+    flex: 1;
+}
+
+.double-row {
+    display: flex;
+    gap: 16rpx;
+    margin-bottom: 16rpx;
+    flex-wrap: wrap;
+}
+
+.double-row:last-child {
+    margin-bottom: 0;
+}
+
+.param-group {
+    flex: 1;
+    min-width: 200rpx;
+    background: transparent;
+    border-radius: 20rpx;
+    padding: 12rpx 8rpx 8rpx;
+    border: 1rpx solid #e8ecf0;
+}
+
+.param-title {
+    font-size: 24rpx;
+    color: #666666;
+    font-weight: 650;
+    margin-bottom: 4rpx;
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    padding-left: 4rpx;
+}
+
+/* 三相数据垂直布局 */
+.phase-vertical {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    gap: 0;
+}
+
+.phase-item-vertical {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 4rpx 4rpx;
+}
+
+.phase-value-vertical {
+    font-size: 28rpx;
+    font-weight: 700;
+    display: block;
+    letter-spacing: -0.5rpx;
+}
+
+/* 竖线分割 */
+.phase-divider {
+    width: 1rpx;
+    background-color: #e0e4e8;
+    margin: 8rpx 0;
+}
+
+/* 文字溢出显示省略号 */
+.ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.event-icon {
+    position: relative;
+    width: 110rpx;
+    height: 110rpx;
+    border-radius: 12rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 20rpx;
+    background-color: #376cf320;
+}
+</style>

pages/index/index.vue

@@ -1,33 +1,20 @@
 <template>
     <Cn-page :loading="loading" noPadding>
         <view slot="body" class="canneng-index">
-            <uni-nav-bar
-                rightWidth="300rpx"
-                leftWidth="300rpx"
-                dark
-                :fixed="true"
-                status-bar
-                background-color="#fff"
-                color="#111"
-                @clickRight="selectEngineering"
-            >
+            <uni-nav-bar rightWidth="300rpx" leftWidth="300rpx" dark :fixed="true" status-bar background-color="#fff"
+                color="#111" @clickRight="selectEngineering">
                 <template slot="left">
                     <text style="font-size: 32rpx; font-weight: 500">灿能物联</text>
                 </template>
                 <template slot="right">
-                    <text class="hide-txt mr5" style="font-size: 28rpx"
-                        >{{
-                            userInfo.authorities === 'engineering_user'
-                                ? '创建工程'
-                                : select.engineeringName || emptyEngineeringName
-                        }}
+                    <text class="hide-txt mr5" style="font-size: 28rpx">{{
+                        userInfo.authorities === 'engineering_user'
+                            ? '创建工程'
+                            : select.engineeringName || emptyEngineeringName
+                    }}
                     </text>
-                    <uni-icons
-                        type="bottom"
-                        size="16"
-                        color="#111"
-                        v-if="select.engineeringName && userInfo.authorities != 'engineering_user'"
-                    ></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">
@@ -48,7 +35,10 @@
                 </template>
                 <!-- 设备列表 -->
                 <template v-else v-show="engineeringList.length">
-                    <view class="canneng-index-title mt20">设备列表</view>
+                    <view class="canneng-index-title mt20">
+                        <view>设备列表</view>
+                        <view class="nav-menu nav-menu-btn boxClick" @click="jump">电能质量信息 </view>
+                    </view>
                     <Device ref="device" :store="store" />
                 </template>
             </view>
@@ -227,6 +217,11 @@ export default {
             })
         },
         // 动态配置导航栏按钮
+        jump() {
+            uni.navigateTo({
+                url: `/pages/index/comp/monitoringPoint`,
+            })
+        }
     },
     onLoad() {
         // 页面加载时，动态配置导航栏按钮
@@ -308,6 +303,7 @@ export default {
 .canneng-index-title {
     padding: 0 20rpx;
     font-weight: 500;
+    display: flex;
 }
 
 /deep/ .uni-card {
@@ -317,4 +313,28 @@ export default {
 /deep/ .uni-drawer__content {
     width: 100vw !important;
 }
+
+.nav-menu {
+    height: 40rpx;
+    padding: 4rpx 20rpx;
+    // margin-left: 20rpx;
+    // margin-bottom: 20rpx;
+    line-height: 38rpx;
+    font-size: 24rpx;
+    border-radius: 8rpx;
+    background: #ebeaec;
+    color: #666;
+
+    &-active {
+        background: #dfe5f7;
+        color: $uni-theme-color;
+    }
+
+    &-btn {
+        background: $uni-theme-color;
+        color: #fff;
+    }
+
+    margin-left: auto;
+}
 </style>

pages/index/message1.vue

@@ -2,13 +2,8 @@
     <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"
-                />
+                <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">
@@ -17,59 +12,28 @@
                     </span>
                 </view>
                 <!-- 筛选条件 -->
-                <Cn-filterCriteria
-                    ref="cnFilterCriteria"
-                    :level="current === 0 ? 3 : current === 1 ? 3 : 2"
-                    @select="select"
-                >
-                    <picker
-                        v-if="current === 0"
-                        @change="bindPickerChange"
-                        :value="sortIndex"
-                        :range="sortOptions"
-                        style="margin-left: auto"
-                    >
-                        <view class="sort-picker">
-                            {{ sortOptions[sortIndex] }}排序
-                            <uni-icons
-                                custom-prefix="iconfont"
-                                type="icon-paixu1"
-                                size="10"
-                                color="#2563EB"
-                            ></uni-icons>
+                <Cn-filterCriteria ref="cnFilterCriteria" :level="current === 0 ? 3 : current === 1 ? 3 : 2"
+                    @select="select">
+                    <picker v-if="current === 0" @change="bindPickerChange" :value="sortIndex" :range="sortOptions">
+                        <view class="nav-menu nav-menu1">
+                            <view class="nav-text">
+                                {{ sortOptions[sortIndex] }}排序
+                            </view>
+
+                            <uni-icons type="bottom" size="14"></uni-icons>
                         </view>
                     </picker>
                 </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"
-                />
+                <Transient ref="TransientRef" v-if="current === 0" :navHeight="navHeight" :selectValue="selectValue"
+                    :sortIndex="sortIndex" @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>
@@ -100,7 +64,7 @@ export default {
             sortOptions: ['发生时间', '暂降深度', '持续时间'],
         }
     },
-    onLoad() {},
+    onLoad() { },
     mounted() {
         this.setHeight()
     },
@@ -204,9 +168,11 @@ export default {
         },
         bindPickerChange(e) {
             this.sortIndex = e.detail.value
-            if (this.$refs.TransientRef) {
-                this.$refs.TransientRef.setSort(this.sortIndex)
-            }
+            setTimeout(() => {
+                if (this.$refs.TransientRef) {
+                    this.$refs.TransientRef.init()
+                }
+            }, 0)
         },
         // 设置角标
         getDevCount() {
@@ -275,13 +241,16 @@ export default {
 <style lang="scss">
 .messageBox {
     overflow: hidden;
+
     /deep/.tabsBox {
         position: relative;
         background-color: #fff;
+
         .segmented-control {
             // height: 40px;
             background-color: #fff;
             border-bottom: 1px solid #cccccc70;
+
             .segmented-control__item {
                 align-items: baseline;
                 margin-top: 5px;
@@ -292,10 +261,12 @@ export default {
             font-size: 30rpx !important;
             color: rgb(96, 98, 102);
         }
+
         .segmented-control__item--text {
             font-weight: bold;
             padding: 0 0 5rpx;
         }
+
         .choose {
             // padding: 20rpx;
             // display: flex;
@@ -309,16 +280,20 @@ export default {
         width: 90%;
         margin: 20rpx auto;
     }
+
     .badge-container {
         position: absolute;
-        top: -10rpx; /* 徽章向上偏移，与控件重叠 */
+        top: -10rpx;
+        /* 徽章向上偏移，与控件重叠 */
         display: flex;
         justify-content: space-around;
         right: 0;
         width: 100%;
         height: 0;
-        pointer-events: none; /* 确保徽章不干扰点击事件 */
+        pointer-events: none;
+        /* 确保徽章不干扰点击事件 */
     }
+
     /deep/ .uni-badge--error {
         background-color: #ff3b30;
     }
@@ -326,6 +301,7 @@ export default {
     .badge {
         flex: 1;
         text-align: center;
+
         .uni-badge--x {
             left: 70rpx;
         }
@@ -339,4 +315,32 @@ export default {
         white-space: nowrap;
     }
 }
+
+.nav-menu {
+    display: flex;
+    align-items: center;
+}
+
+
+.nav-menu1 {
+    display: flex;
+    align-items: center;
+    max-width: calc(100vw - 150px);
+}
+
+/* 文字容器：单行溢出省略 */
+.nav-text {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    /* 强制不换行 */
+    text-overflow: ellipsis;
+    // -webkit-line-clamp: 1;
+    // display: -webkit-box;
+    // -webkit-box-orient: vertical;
+    // text-overflow: ellipsis;
+    // word-break: break-all;
+    // white-space: nowrap;
+    line-height: 1;
+}
 </style>

pages/index/mine.vue

@@ -52,6 +52,7 @@
                 <view class="mine-nav-label">项目管理</view>
                 <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
             </view>
+    
             <view class="mine-nav" @click="jump('feedback')" v-if="userInfo.authorities !== 'tourist'">
                 <image mode="aspectFill" class="mine-nav-icon" src="/static/feedback.png" />
                 <view class="mine-nav-label">反馈列表</view>
@@ -81,12 +82,11 @@
                 <view class="mine-nav-label">关注工程配置</view>
                 <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
             </view>
-            <view class="mine-nav" @click="jump('transientSetting')" v-if="userInfo.authorities !== 'tourist'">
-                <!-- 调试内容配置  serverSetting-->
+            <!-- <view class="mine-nav" @click="jump('transientSetting')" v-if="userInfo.authorities !== 'tourist'">
                 <image mode="aspectFill" class="mine-nav-icon" src="/static/tongji.png" />
                 <view class="mine-nav-label">暂态统计配置</view>
                 <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
-            </view>
+            </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>

pages/message1/alarm.vue

@@ -3,23 +3,12 @@
         <!-- 运行告警 -->
 
         <!-- 卡片 -->
-        <scroll-view
-            scroll-y="true"
-            @refresherrefresh="refresherrefresh"
-            @scrolltolower="scrolltolower"
-            :refresher-triggered="triggered"
-            refresher-enabled="true"
-            class="event-list"
-            :style="{ height: 'calc(100vh - ' + (navHeight + 10) + 'px)', overflow: 'auto' }"
-        >
+        <scroll-view scroll-y="true" @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower"
+            :refresher-triggered="triggered" refresher-enabled="true" class="event-list"
+            :style="{ height: 'calc(100vh - ' + (navHeight + 10) + 'px)', overflow: 'auto' }">
             <!-- 循环渲染事件项 -->
-            <uni-card
-                class="event-item boxClick"
-                :class="item.type"
-                v-for="(item, index) in this.store.data"
-                :key="index"
-                @click="jump(item)"
-            >
+            <uni-card class="event-item boxClick" :class="item.type" v-for="(item, index) in this.store.data"
+                :key="index" @click="jump(item)">
                 <!-- 头部：图标 + 信息 + 操作 -->
                 <view class="event-header">
                     <view class="event-icon">
@@ -39,8 +28,9 @@
                         </view>
                         <view class="event-desc">
                             <text>告警终端总数：{{ item.warnNums }}台</text>
-                            <text>质量指标告警终端数：{{ item.interruptCounts }}次</text>
-                            <text>事件触发告警终端数：{{ item.warnCounts }}次</text>
+                            <text v-if="item.onlineRateIsWarn ">在线率偏低</text>
+                            <text v-if="item.integrityIsWarn">完整性偏低</text>
+                            <text v-if="item.warnCounts > 0">事件触发终端告警：{{ item.warnCounts }}次</text>
 
                         </view>
                     </view>
@@ -52,10 +42,8 @@
                     <text> 告警终端总数{{ item.warnNums }}台 </text>
                 </view> -->
             </uni-card>
-            <uni-load-more
-                v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
-                :status="store.status"
-            ></uni-load-more>
+            <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>
         </scroll-view>
     </view>
@@ -102,8 +90,9 @@ export default {
         },
         jump(item) {
             let str = JSON.stringify(item).replace(/%/g, '百分比')
-            item.status = '1'
             uni.navigateTo({ url: '/pages/message1/comp/alarmDetails?detail=' + encodeURIComponent(str) })
+            item.isRead = 1
+        
         },
         // 下拉
         refresherrefresh() {
@@ -138,6 +127,7 @@ export default {
 
 <style lang="scss" scoped>
 @import './index.scss';
+
 /* 列表容器 */
 .event-list {
     margin-top: 20rpx;

pages/message1/comp/F47.vue

@@ -225,7 +225,7 @@ export default {
                 // 点击查看详情
                 let item = params.value[3]
                 let str = JSON.stringify(item).replace(/%/g, '百分比')
-                uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
+                // uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
             })
         },
     },

pages/message1/comp/ITIC.vue

@@ -217,7 +217,7 @@ export default {
                 // 点击查看详情
                 let item = params.value[3]
                 let str = JSON.stringify(item).replace(/%/g, '百分比')
-                uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
+                // uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
             })
         },
     },

pages/message1/comp/alarmDetails.vue

@@ -13,10 +13,8 @@
                 <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'"
-                        >
+                        <view class="event-icon"
+                            :class="item.devType == 'Direct_Connected_Device' ? 'zl-bgc' : 'jc-bgc'">
                             <!-- 动态图标：根据类型切换 -->
                             <!-- <uni-icons
                                 custom-prefix="iconfont"
@@ -25,46 +23,55 @@
                                 color="#FF0000"
                             ></uni-icons> -->
                             <!-- <Cn-icon-transient :name="`运行告警`" /> -->
-                            <Cn-icon-transient
-                                :name="item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备'"
-                            />
+                            <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
-                                >
+                                <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.interruptCounts">
-                            通讯中断 {{ item.interruptCounts }} 次，详情如下：
-                            <view class="textBox">
-                                <view
-                                    v-for="date in String(item.interruptDetails || '').split('，')"
-                                    class="textBox mb5"
-                                    >{{ date }}</view
-                                ></view
-                            >
+                        <view v-if="item.dataDetails.onlineRate.isAbnormal">
+                            <text>在线率：
+                                {{item.dataDetails.onlineRate.value }}%　
+                            </text>
+
                         </view>
-                        <view v-if="item.warnCounts">
+                        <view v-if="hasIntegrityAbnormal(item)" class="mt10">
+                            数据完整性：
+                            <view class="data-table">
+                                <view class="table-header">
+                                    <text>监测点名称</text>
+                                    <text>完整性</text>
+                                </view>
+                                <view class="table-row"
+                                    v-for="value in item.dataDetails.integrity.monitorPoints.filter((p) => p.isAbnormal === true)">
+                                    <text>{{ value.monitorName }}</text>
+                                    <text>{{ value.value }}%</text>
+                                </view>
+                            </view>
+                        </view>
+                        <view v-if="item.warnCounts" class="mt10">
                             终端告警 {{ item.warnCounts }} 次，详情如下：
                             <view class="textBox">
                                 <view v-for="val in item.warnDetails" class="textBox mb5">
                                     {{ val.warnEventTime + '发生' + val.warnEventDesc }}
-                                </view></view
-                            >
+                                </view>
+                            </view>
                         </view>
                     </view>
                 </uni-card>
@@ -97,6 +104,11 @@ export default {
         }
     },
     methods: {
+        hasIntegrityAbnormal(item) {
+            const points = item?.dataDetails?.integrity?.monitorPoints
+            if (!Array.isArray(points) || !points.length) return false
+            return points.every((p) => p.isAbnormal === true)
+        },
         init() {
             queryAlarmDetail({
                 devList: this.detail.devIds,
@@ -115,6 +127,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '../index.scss';
+
 .detail {
     padding: 20rpx 0;
 
@@ -130,60 +143,102 @@ export default {
             font-weight: 700;
         }
     }
+
     .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: 120rpx;
     overflow-y: auto;
 }
+
+.data-table {
+    margin-top: 10rpx;
+    background-color: #fff;
+    overflow: hidden;
+
+    .table-header,
+    .table-row {
+        display: flex;
+        justify-content: space-between;
+        padding: 15rpx 0rpx;
+        border-bottom: 1rpx solid #eee;
+        height: 20px;
+
+        text {
+            text-align: center;
+            font-size: 28rpx;
+            flex: 1;
+
+
+
+
+        }
+    }
+
+    .table-header {
+        padding: 0rpx;
+        padding-bottom: 10rpx;
+    }
+}
 </style>

pages/message1/comp/steadyStateDetails.vue

@@ -13,13 +13,11 @@
                 <view class="mb5"> 监测点名称：{{ detail.lineName }}</view>
                 <view class="mb5" style="display: flex">
                     越限详情：
-                    <view style="flex: 1" class="details">{{ detail.overLimitDesc }}</view></view
-                >
+                    <view style="flex: 1" class="details">{{ detail.overLimitDesc }}</view>
+                </view>
             </view>
             <view class="detail-content">
-                <view class="detail-content-title mb20"
-                    >指标越限详情<text class="prompt">（仅显示最严重的10组数据）</text></view
-                >
+                <view class="detail-content-title mb20">指标越限详情<text class="prompt">（仅显示最严重的10组数据）</text></view>
 
                 <uni-collapse accordion v-model="collapseValue">
                     <uni-collapse-item :title="item.targetName" v-for="item in list">
@@ -35,7 +33,7 @@
                             </view>
                             <view class="table-row" v-for="value in item.harmDetailList">
                                 <text>{{ value.statisticsTime }}</text>
-                                <text>{{ value.valueType }}</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>
@@ -105,6 +103,7 @@ export default {
             font-weight: 700;
         }
     }
+
     .limit {
         display: flex;
         align-items: center;
@@ -112,46 +111,58 @@ export default {
         width: 450rpx;
         margin-left: auto;
     }
+
     .prompt {
         font-size: 24rpx;
         color: #111;
         font-weight: 500;
     }
 }
+
 .data-table {
     margin-top: 20rpx;
     background-color: #fff;
     overflow: hidden;
+    color: #666;
+
     .table-header,
     .table-row {
         display: flex;
         justify-content: space-between;
-        padding: 20rpx 0rpx;
+        padding: 15rpx 0rpx;
+        height: 20px;
         border-bottom: 1rpx solid #eee;
+
         text {
             width: 100rpx;
             text-align: center;
             font-size: 28rpx;
+
             // color: #333;
             &:nth-child(1) {
                 flex: 1;
             }
+
             &:nth-child(2) {
                 flex: 1;
             }
         }
     }
+
     .table-header {
         padding: 0rpx;
         padding-bottom: 10rpx;
     }
 }
+
 /deep/ .uni-collapse-item__title-text {
     font-weight: 700;
+
     span {
         font-size: 28rpx;
     }
 }
+
 .details {
     max-height: 70px;
     overflow-y: auto;

pages/message1/comp/transientDetails.vue

@@ -16,42 +16,28 @@
                 <view class="mb5" v-if="detail.evtParamPhase"> 相别：{{ detail.evtParamPhase }}</view>
             </view>
             <view class="detail-tabs">
-                <uni-segmented-control
-                    :current="detailTab"
-                    active-color="#376cf3"
-                    :values="['波形图', 'ITIC', 'F47']"
-                    @clickItem="onDetailTabChange"
-                />
+                <uni-segmented-control :current="detailTab" active-color="#376cf3" :values="['波形图', 'ITIC', 'F47']"
+                    @clickItem="onDetailTabChange" />
             </view>
             <view v-if="detailTab == 0">
                 <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)"
-                    />
+                    <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)"
-                    />
+                    <image style="width: 100%" :src="detail.rmsPics" mode="widthFix" v-if="detail.rmsPics"
+                        @click="previewImage(detail.rmsPics)" />
                     <text v-else>暂无</text>
                 </view>
             </view>
             <view v-if="detailTab == 1" class="chart-wrapper">
-                <ITIC :store="eventStore" style="min-height: 600rpx;" />
+                <ITIC :store="eventStore" style="height: calc(100vh - 360px);" />
             </view>
             <view v-if="detailTab == 2" class="chart-wrapper">
-                <F47 :store="eventStore" style="min-height: 600rpx;" />
+                <F47 :store="eventStore" style="height: calc(100vh - 360px);" />
             </view>
         </view>
     </Cn-page>
@@ -143,4 +129,10 @@ export default {
         padding: 20rpx;
     }
 }
+
+.segmented-control {
+    flex: 1;
+    margin-right: 24rpx;
+    height: 60rpx;
+}
 </style>

pages/message1/steadyState.vue

@@ -4,8 +4,8 @@
         <view class="transientBox">
             <view class="statistics pd20">
                 <view
-                    class="box"
-                    :class="{ boxClick: item.label == filterValue }"
+                    class="box boxClick"
+                    :class="{ boxClick1: item.label == filterValue }"
                     v-for="item in list"
                     @click="
                         filterValue = item.label
@@ -235,7 +235,7 @@ export default {
 
         jump(item) {
             let str = JSON.stringify(item).replace(/%/g, '百分比')
-            item.status = '1'
+            item.isRead = '1'
 
             uni.navigateTo({ url: '/pages/message1/comp/steadyStateDetails?detail=' + encodeURIComponent(str) })
         },

pages/message1/transient.vue

@@ -17,7 +17,7 @@
                     <text class="label">{{ item.label }}</text>
                 </view>
             </view>
-            <view class="smallLabel"> </view>
+            <!-- <view class="smallLabel"> </view> -->
         </view>
         <!-- 卡片 -->
         <scroll-view
@@ -112,6 +112,10 @@ export default {
             type: Object,
             // default: () => {},
         },
+        sortIndex: {
+            type: [Number,String],
+            // default: () => {},
+        },
     },
     mixins: [list],
     data() {
@@ -150,7 +154,7 @@ export default {
             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.sortField = this.sortIndex
             this.store.params.engineeringid = this.selectValue.engineeringId
             this.store.params.projectId = this.selectValue.projectId
             this.store.params.deviceId = this.selectValue.deviceId
@@ -224,7 +228,9 @@ export default {
             uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
         },
         setSort(index) {
-            this.sort = index
+            console.log(123,this.sortIndex);
+            
+            // this.sort = index
             this.init()
         },
         // 下拉

pages/project/detail.vue

@@ -1,361 +1,350 @@
-<template>
-    <Cn-page :loading="loading" noPadding>
-        <view slot="body">
-            <view class="detail">
-                <view class="header">
-                    <view class="header-title"
-                        >{{ project.name }}
-                        <!-- <view class="header-title-extra">用能</view> -->
-                    </view>
-                    <view class="header-des">项目描述：{{ project.description }}</view>
-                </view>
-                <view class="nav">
-                    <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 class="content device" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
-                    <view v-show="navMenuActive == 0">
-                        <!-- <uni-card
-                            :title="item.equipmentName"
-                            :sub-title="'创建时间：' + item.createTime"
-                            :extra="item.mac"
-                            v-for="item in store.data"
-                            :key="item.equipmentId"
-                            @click="goDevice(item)"
-                            padding="0"
-                            :thumbnail="deviceIcon(item.runStatus)"
-                        >
-                        </uni-card> -->
-                        <Cn-device-card v-for="(item, index) in store.data" :device="item" :key="index">
-                        </Cn-device-card>
-                        <Cn-empty v-if="store.empty"></Cn-empty>
-                        <uni-load-more
-                            v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
-                            :status="store.status"
-                        ></uni-load-more>
-                    </view>
-                    <!--                    <view style="padding: 0 20rpx" v-show="navMenuActive == 1">-->
-                    <!--                        <uni-list>-->
-                    <!--                            <uni-list-item-->
-                    <!--                                title="张三"-->
-                    <!--                                note="2023-02-10 14:55"-->
-                    <!--                                thumb="/static/head.png"-->
-                    <!--                                thumb-size="lg"-->
-                    <!--                            >-->
-                    <!--                            </uni-list-item>-->
-                    <!--                            <uni-list-item-->
-                    <!--                                title="李四"-->
-                    <!--                                note="2023-02-10 14:55"-->
-                    <!--                                thumb="/static/head.png"-->
-                    <!--                                thumb-size="lg"-->
-                    <!--                            >-->
-                    <!--                            </uni-list-item>-->
-                    <!--                        </uni-list>-->
-                    <!--                    </view>-->
-                    <view style="padding: 0 20rpx" v-show="navMenuActive == 1">
-                        <!-- <image
-                            class="gplot gplot-box"
-                            mode="aspectFill"
-                            :src="item.filePath"
-                            v-for="(item, key) in topologyDiagramPage"
-                            :key="key"
-                        /> -->
-                        <uni-file-picker
-                            ref="filePicker"
-                            v-model="topologyDiagramPage"
-                            :sourceType="['album']"
-                            :auto-upload="false"
-                            @select="addAppTopologyDiagram"
-                            @delete="deleteTopologyDiagramPage"
-                            readonly
-                        ></uni-file-picker>
-                    </view>
-                </view>
-                <uni-fab
-                    ref="fab"
-                    direction="vertical"
-                    horizontal="right"
-                    vertical="bottom"
-                    :content="content"
-                    @trigger="trigger"
-                    v-if="content.length"
-                />
-                <uni-popup ref="share" type="share" background-color="#fff">
-                    <uni-popup-share title="分享到"></uni-popup-share>
-                </uni-popup>
-            </view>
-        </view>
-    </Cn-page>
-</template>
-<script>
-import list from '../../common/js/list'
-import {
-    queryTopologyDiagramPage,
-    deleteAppTopologyDiagram,
-    addAppTopologyDiagram,
-    deleteProject,
-} from '../../common/api/project'
-export default {
-    mixins: [list],
-    data() {
-        return {
-            loading: false,
-            project: {},
-            navMenuList: [
-                {
-                    text: '设备',
-                },
-                // {
-                //     text: '用户',
-                // },
-                {
-                    text: '拓扑图',
-                },
-            ],
-            content: [],
-            navHeight: 0,
-            navMenuActive: 0,
-            topologyDiagramPage: [],
-        }
-    },
-    methods: {
-        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
-        },
-        addAppTopologyDiagram(e) {
-            console.log(e)
-            addAppTopologyDiagram(
-                {
-                    projectId: this.project.id,
-                    topologyDiagramName: e.tempFiles[0].name,
-                },
-                e.tempFiles[0].path,
-            ).then((res) => {
-                console.log(res)
-                if (res.length > 1) {
-                    const result = JSON.parse(res[1].data)
-                    console.log(result)
-                    if (result.code === 'A0000') {
-                        this.topologyDiagramPage.push({
-                            name: result.name,
-                            extname: 'img',
-                            url: result.filePath,
-                            ...result,
-                        })
-                    } else {
-                        this.$refs.filePicker.clearFiles(this.topologyDiagramPage.length - 1)
-                        uni.showToast({
-                            title: result.message,
-                            icon: 'none',
-                        })
-                    }
-                } else {
-                    uni.showToast({
-                        title: '上传失败',
-                        icon: 'none',
-                    })
-                    this.$refs.filePicker.clearFiles(this.topologyDiagramPage.length - 1)
-                }
-            })
-        },
-        deleteTopologyDiagramPage(e) {
-            console.log(e)
-            deleteAppTopologyDiagram(e.tempFile.id).then((res) => {
-                console.log(res)
-            })
-        },
-        trigger(e) {
-            console.log(this.$refs)
-            if (e.item.text == '移交') {
-                uni.navigateTo({
-                    url: '/pages/project/transfer',
-                })
-            } else if (e.item.text == '分享') {
-                this.$refs.share.open()
-            } else if (e.item.text == '编辑') {
-                uni.navigateTo({
-                    url: '/pages/project/new?project=' + encodeURIComponent(JSON.stringify(this.project)),
-                })
-            } else if (e.item.text == '删除') {
-                uni.showModal({
-                    title: '提示',
-                    content: '删除项目后不可恢复，是否继续？',
-                    success: (res) => {
-                        if (res.confirm) {
-                            deleteProject(this.project.id).then((res) => {
-                                this.$util.toast('删除成功')
-                                this.$util.refreshPrePage()
-                            })
-                        } else if (res.cancel) {
-                            console.log('用户点击取消')
-                        }
-                    },
-                })
-            }
-        },
-        navMenuClick(index) {
-            this.navMenuActive = index
-        },
-        goUserDetail() {
-            uni.navigateTo({
-                url: '/pages/mine/userDetail',
-            })
-        },
-        del() {
-            console.log('del')
-            uni.showModal({
-                title: '提示',
-                content: '确定要移除该成员吗？',
-                success: function (res) {
-                    if (res.confirm) {
-                        console.log('用户点击确定')
-                    } else if (res.cancel) {
-                        console.log('用户点击取消')
-                    }
-                },
-            })
-        },
-        goDevice(item) {
-            uni.navigateTo({
-                url: '/pages/device/APF/detail?id=' + item.equipmentId,
-            })
-        },
-        init() {
-            this.store = this.DataSource('/cs-device-boot/EquipmentDelivery/queryEquipmentByProject')
-            this.store.params.projectId = this.project.id
-            this.store.reload()
-
-            queryTopologyDiagramPage({
-                projectId: this.project.id,
-            }).then((res) => {
-                console.log(res)
-                this.topologyDiagramPage = res.data.records.map((item) => {
-                    return {
-                        name: item.name,
-                        extname: 'img',
-                        url: this.$config.static + item.filePath,
-                        ...item,
-                    }
-                })
-            })
-        },
-    },
-    onLoad(option) {
-        let userInfo = uni.getStorageSync('userInfo')
-        // this.content.push({
-        //     iconPath: '/static/share.png',
-        //     text: '编辑',
-        // })
-        // this.content.push({
-        //     iconPath: '/static/delate.png',
-        //     text: '删除',
-        // })
-        // this.content.push({
-        //     iconPath: '/static/transfer.png',
-        //     text: '移交',
-        // })
-        // this.content.push({
-        //     iconPath: '/static/share.png',
-        //     text: '分享',
-        // })
-        if (userInfo.authorities == 'engineering_user' || userInfo.authorities == 'app_vip_user') {
-            this.content.push(
-                {
-                    iconPath: '/static/share.png',
-                    text: '编辑',
-                },
-                {
-                    iconPath: '/static/delate.png',
-                    text: '删除',
-                },
-            )
-        }
-        setTimeout(() => {
-            // 获取nav高度
-            uni.createSelectorQuery()
-                .select('.nav')
-                .boundingClientRect((rect) => {
-                    this.navHeight = rect.height
-                })
-                .exec()
-        }, 1000)
-        console.log(option.project)
-        this.project = JSON.parse(decodeURIComponent(option.project))
-        this.project.topologyDiagramPaths.forEach((item) => {
-            item.filePath = this.$config.static + item.filePath
-        })
-        this.init()
-        // uni.setNavigationBarTitle({ title: this.project })
-    },
-}
-</script>
-<style lang="scss">
-.detail {
-    .content {
-        box-sizing: border-box;
-        padding-bottom: 20rpx;
-    }
-
-    .header {
-        padding: 20rpx 20rpx 0;
-
-        .header-title {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-size: 40rpx;
-            margin-bottom: 10rpx;
-
-            .header-title-extra {
-                font-size: 24rpx;
-                color: #666;
-                padding-right: 10rpx;
-            }
-        }
-
-        .header-des {
-            font-size: 28rpx;
-            color: #666;
-        }
-    }
-
-    .footer-btn {
-        padding: 0 20rpx;
-        height: 50rpx;
-        background-color: #007aff;
-        font-size: 24rpx;
-        color: #fff;
-        text-align: center;
-        line-height: 50rpx;
-        border-radius: 10rpx;
-    }
-    /deep/ .is-add {
-        background-color: #fff;
-    }
-}
-
-.gplot {
-    box-sizing: border-box;
-    position: relative;
-    width: 100%;
-    border: 8rpx solid #ccc;
-}
-</style>
+<template>
+    <Cn-page :loading="loading" noPadding>
+        <view slot="body">
+            <view class="detail">
+                <view class="header">
+                    <view class="header-title"
+                        >{{ project.name }}
+                        <!-- <view class="header-title-extra">用能</view> -->
+                    </view>
+                    <view class="header-des">项目描述：{{ project.description }}</view>
+                </view>
+                <view class="nav">
+                    <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 class="content device" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
+                    <view v-show="navMenuActive == 0">
+                        <!-- <uni-card
+                            :title="item.equipmentName"
+                            :sub-title="'创建时间：' + item.createTime"
+                            :extra="item.mac"
+                            v-for="item in store.data"
+                            :key="item.equipmentId"
+                            @click="goDevice(item)"
+                            padding="0"
+                            :thumbnail="deviceIcon(item.runStatus)"
+                        >
+                        </uni-card> -->
+                        <Cn-device-card v-for="(item, index) in store.data" :device="item" :key="index">
+                            <template v-slot:title>
+                                   
+                                    <view class="star-icon">
+                                        <uni-icons type="search" size="25" color="#376cf3"></uni-icons>
+                                    </view>
+                                </template>
+                        </Cn-device-card>
+                        <Cn-empty v-if="store.empty"></Cn-empty>
+                        <uni-load-more
+                            v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
+                            :status="store.status"
+                        ></uni-load-more>
+                    </view>
+                   
+                    <view style="padding: 0 20rpx" v-show="navMenuActive == 1">
+                        <!-- <image
+                            class="gplot gplot-box"
+                            mode="aspectFill"
+                            :src="item.filePath"
+                            v-for="(item, key) in topologyDiagramPage"
+                            :key="key"
+                        /> -->
+                        <uni-file-picker
+                            ref="filePicker"
+                            v-model="topologyDiagramPage"
+                            :sourceType="['album']"
+                            :auto-upload="false"
+                            @select="addAppTopologyDiagram"
+                            @delete="deleteTopologyDiagramPage"
+                            readonly
+                        ></uni-file-picker>
+                    </view>
+                </view>
+                <uni-fab
+                    ref="fab"
+                    direction="vertical"
+                    horizontal="right"
+                    vertical="bottom"
+                    :content="content"
+                    @trigger="trigger"
+                    v-if="content.length"
+                />
+                <uni-popup ref="share" type="share" background-color="#fff">
+                    <uni-popup-share title="分享到"></uni-popup-share>
+                </uni-popup>
+            </view>
+        </view>
+    </Cn-page>
+</template>
+<script>
+import list from '../../common/js/list'
+import {
+    queryTopologyDiagramPage,
+    deleteAppTopologyDiagram,
+    addAppTopologyDiagram,
+    deleteProject,
+} from '../../common/api/project'
+export default {
+    mixins: [list],
+    data() {
+        return {
+            loading: false,
+            project: {},
+            navMenuList: [
+                {
+                    text: '设备',
+                },
+                // {
+                //     text: '用户',
+                // },
+                {
+                    text: '拓扑图',
+                },
+            ],
+            content: [],
+            navHeight: 0,
+            navMenuActive: 0,
+            topologyDiagramPage: [],
+        }
+    },
+    methods: {
+        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
+        },
+        addAppTopologyDiagram(e) {
+            console.log(e)
+            addAppTopologyDiagram(
+                {
+                    projectId: this.project.id,
+                    topologyDiagramName: e.tempFiles[0].name,
+                },
+                e.tempFiles[0].path,
+            ).then((res) => {
+                console.log(res)
+                if (res.length > 1) {
+                    const result = JSON.parse(res[1].data)
+                    console.log(result)
+                    if (result.code === 'A0000') {
+                        this.topologyDiagramPage.push({
+                            name: result.name,
+                            extname: 'img',
+                            url: result.filePath,
+                            ...result,
+                        })
+                    } else {
+                        this.$refs.filePicker.clearFiles(this.topologyDiagramPage.length - 1)
+                        uni.showToast({
+                            title: result.message,
+                            icon: 'none',
+                        })
+                    }
+                } else {
+                    uni.showToast({
+                        title: '上传失败',
+                        icon: 'none',
+                    })
+                    this.$refs.filePicker.clearFiles(this.topologyDiagramPage.length - 1)
+                }
+            })
+        },
+        deleteTopologyDiagramPage(e) {
+            console.log(e)
+            deleteAppTopologyDiagram(e.tempFile.id).then((res) => {
+                console.log(res)
+            })
+        },
+        trigger(e) {
+            console.log(this.$refs)
+            if (e.item.text == '移交') {
+                uni.navigateTo({
+                    url: '/pages/project/transfer',
+                })
+            } else if (e.item.text == '分享') {
+                this.$refs.share.open()
+            } else if (e.item.text == '编辑') {
+                uni.navigateTo({
+                    url: '/pages/project/new?project=' + encodeURIComponent(JSON.stringify(this.project)),
+                })
+            } else if (e.item.text == '删除') {
+                uni.showModal({
+                    title: '提示',
+                    content: '删除项目后不可恢复，是否继续？',
+                    success: (res) => {
+                        if (res.confirm) {
+                            deleteProject(this.project.id).then((res) => {
+                                this.$util.toast('删除成功')
+                                this.$util.refreshPrePage()
+                            })
+                        } else if (res.cancel) {
+                            console.log('用户点击取消')
+                        }
+                    },
+                })
+            }
+        },
+        navMenuClick(index) {
+            this.navMenuActive = index
+        },
+        goUserDetail() {
+            uni.navigateTo({
+                url: '/pages/mine/userDetail',
+            })
+        },
+        del() {
+            console.log('del')
+            uni.showModal({
+                title: '提示',
+                content: '确定要移除该成员吗？',
+                success: function (res) {
+                    if (res.confirm) {
+                        console.log('用户点击确定')
+                    } else if (res.cancel) {
+                        console.log('用户点击取消')
+                    }
+                },
+            })
+        },
+        goDevice(item) {
+            uni.navigateTo({
+                url: '/pages/device/APF/detail?id=' + item.equipmentId,
+            })
+        },
+        init() {
+            this.store = this.DataSource('/cs-device-boot/EquipmentDelivery/queryEquipmentByProject')
+            this.store.params.projectId = this.project.id
+            this.store.reload()
+
+            queryTopologyDiagramPage({
+                projectId: this.project.id,
+            }).then((res) => {
+                console.log(res)
+                this.topologyDiagramPage = res.data.records.map((item) => {
+                    return {
+                        name: item.name,
+                        extname: 'img',
+                        url: this.$config.static + item.filePath,
+                        ...item,
+                    }
+                })
+            })
+        },
+    },
+    onLoad(option) {
+        let userInfo = uni.getStorageSync('userInfo')
+        // this.content.push({
+        //     iconPath: '/static/share.png',
+        //     text: '编辑',
+        // })
+        // this.content.push({
+        //     iconPath: '/static/delate.png',
+        //     text: '删除',
+        // })
+        // this.content.push({
+        //     iconPath: '/static/transfer.png',
+        //     text: '移交',
+        // })
+        // this.content.push({
+        //     iconPath: '/static/share.png',
+        //     text: '分享',
+        // })
+        if (userInfo.authorities == 'engineering_user' || userInfo.authorities == 'app_vip_user') {
+            this.content.push(
+                {
+                    iconPath: '/static/share.png',
+                    text: '编辑',
+                },
+                {
+                    iconPath: '/static/delate.png',
+                    text: '删除',
+                },
+            )
+        }
+        setTimeout(() => {
+            // 获取nav高度
+            uni.createSelectorQuery()
+                .select('.nav')
+                .boundingClientRect((rect) => {
+                    this.navHeight = rect.height
+                })
+                .exec()
+        }, 1000)
+        console.log(option.project)
+        this.project = JSON.parse(decodeURIComponent(option.project))
+        this.project.topologyDiagramPaths.forEach((item) => {
+            item.filePath = this.$config.static + item.filePath
+        })
+        this.init()
+        // uni.setNavigationBarTitle({ title: this.project })
+    },
+}
+</script>
+<style lang="scss">
+.detail {
+    .content {
+        box-sizing: border-box;
+        padding-bottom: 20rpx;
+    }
+
+    .header {
+        padding: 20rpx 20rpx 0;
+
+        .header-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 40rpx;
+            margin-bottom: 10rpx;
+
+            .header-title-extra {
+                font-size: 24rpx;
+                color: #666;
+                padding-right: 10rpx;
+            }
+        }
+
+        .header-des {
+            font-size: 28rpx;
+            color: #666;
+        }
+    }
+
+    .footer-btn {
+        padding: 0 20rpx;
+        height: 50rpx;
+        background-color: #007aff;
+        font-size: 24rpx;
+        color: #fff;
+        text-align: center;
+        line-height: 50rpx;
+        border-radius: 10rpx;
+    }
+    /deep/ .is-add {
+        background-color: #fff;
+    }
+}
+
+.gplot {
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+    border: 8rpx solid #ccc;
+}
+</style>

pages/project/list.vue

@@ -8,7 +8,8 @@
         <uni-search-bar v-model="store.params.searchValue" clearButton="none" bgColor="#fff" placeholder="请输入关键词"
             @input="store.search()"></uni-search-bar>
         <view class="message">
-            <uni-card class="boxClick" :title="item.name" @click="jump(item)" extra="🔍"
+            <!-- extra="🔍" -->
+            <uni-card class="boxClick" :title="item.name" @click="jump(item)"
                 v-for="(item, index) in store.data" :key="index" :style="{ marginTop: index === 0 ? '0' : '' }">
                 <view class="term-list-bottom">
                     <view class="term-list-bottom-item">

uni_modules/uni-card/components/uni-card/uni-card.vue

@@ -136,7 +136,7 @@
 	.uni-card {
 		margin: $uni-card-spacing;
 		padding: 0 $uni-spacing-sm;
-		border-radius: 4px;
+		border-radius: 20rpx;
 		overflow: hidden;
 		font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
 		background-color: #fff;