绘制电脑治理信息页面
This commit is contained in:
@@ -1,71 +1,79 @@
|
|||||||
import request from '../js/request'
|
import request from '../js/request'
|
||||||
import config from '../js/config'
|
import config from '../js/config'
|
||||||
|
|
||||||
export function queryDictData(dictTypeName) {
|
export function queryDictData(dictTypeName) {
|
||||||
return request({
|
return request({
|
||||||
url: '/dictData/getDicDataByTypeName',
|
url: '/dictData/getDicDataByTypeName',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
data: {
|
data: {
|
||||||
dictTypeName,
|
dictTypeName,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function queryDictDataCache(dictTypeName) {
|
export function queryDictDataCache(dictTypeName) {
|
||||||
return request({
|
return request({
|
||||||
url: '/system-boot/dictType/dictDataCache',
|
url: '/system-boot/dictType/dictDataCache',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 字典树接口通过code
|
// 字典树接口通过code
|
||||||
export const queryByCode = (code) => {
|
export const queryByCode = (code) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/system-boot/dictTree/queryByCode',
|
url: '/system-boot/dictTree/queryByCode',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: {
|
data: {
|
||||||
code,
|
code,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 字典树接口
|
// 字典树接口
|
||||||
export const queryCsDictTree = (pid) => {
|
export const queryCsDictTree = (pid) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/system-boot/dictTree/query',
|
url: '/system-boot/dictTree/query',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: {
|
data: {
|
||||||
pid,
|
pid,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 字典树接口
|
||||||
// 字典树接口通过id
|
export const queryStatistical = (data) => {
|
||||||
export const queryByid = (id) => {
|
return request({
|
||||||
return request({
|
url: '/system-boot/csstatisticalset/queryStatistical',
|
||||||
url: '/system-boot/dictTree/queryByid',
|
method: 'post',
|
||||||
method: 'post',
|
data: data,
|
||||||
data: {
|
})
|
||||||
id,
|
}
|
||||||
},
|
|
||||||
})
|
// 字典树接口通过id
|
||||||
}
|
export const queryByid = (id) => {
|
||||||
|
return request({
|
||||||
// 程序版本
|
url: '/system-boot/dictTree/queryByid',
|
||||||
export const queryEdDataPage = () => {
|
method: 'post',
|
||||||
return request({
|
data: {
|
||||||
url: '/cs-device-boot/edData/queryEdDataPage',
|
id,
|
||||||
method: 'post',
|
},
|
||||||
header: {
|
})
|
||||||
'Content-Type': 'application/json;charset=UTF-8',
|
}
|
||||||
},
|
|
||||||
data: {
|
// 程序版本
|
||||||
pageNum: 1,
|
export const queryEdDataPage = () => {
|
||||||
devName: '',
|
return request({
|
||||||
devType: '',
|
url: '/cs-device-boot/edData/queryEdDataPage',
|
||||||
pageSize: 999,
|
method: 'post',
|
||||||
versionStartDate: '',
|
header: {
|
||||||
versionendDate: '',
|
'Content-Type': 'application/json;charset=UTF-8',
|
||||||
},
|
},
|
||||||
})
|
data: {
|
||||||
}
|
pageNum: 1,
|
||||||
|
devName: '',
|
||||||
|
devType: '',
|
||||||
|
pageSize: 999,
|
||||||
|
versionStartDate: '',
|
||||||
|
versionendDate: '',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
// export const MQTT_IP = 'pqmcn.com:8085/mqtt'//mqtt地址端口, 使用emqx时一定要加mqtt
|
// 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_USERNAME = 't_user'//mqtt用户名
|
||||||
const MQTT_PASSWORD = 'njcnpqs'//密码
|
const MQTT_PASSWORD = 'njcnpqs'//密码
|
||||||
|
|||||||
533
components/Cn-MultipleTree/Cn-MultipleTree.vue
Normal file
533
components/Cn-MultipleTree/Cn-MultipleTree.vue
Normal file
@@ -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>
|
||||||
195
components/Cn-MultipleTree/style.css
Normal file
195
components/Cn-MultipleTree/style.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -1,13 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<uni-card
|
<uni-card :title="device.equipmentName" :sub-title="device.mac" :extra="device.isPrimaryUser == 1 ? '主设备' : '分享设备'"
|
||||||
:title="device.equipmentName"
|
padding="0" @click="jump(device)" class="boxClick" :thumbnail="deviceIcon(device.runStatus)">
|
||||||
:sub-title="device.mac"
|
|
||||||
:extra="device.isPrimaryUser == 1 ? '主设备' : '分享设备'"
|
|
||||||
padding="0"
|
|
||||||
@click="jump(device)"
|
|
||||||
class="boxClick"
|
|
||||||
:thumbnail="deviceIcon(device.runStatus)"
|
|
||||||
>
|
|
||||||
<template v-slot:title>
|
<template v-slot:title>
|
||||||
<!-- 卡片标题 -->
|
<!-- 卡片标题 -->
|
||||||
<view class="uni-card__header" @click="jump(device)">
|
<view class="uni-card__header" @click="jump(device)">
|
||||||
@@ -25,35 +18,38 @@
|
|||||||
:color="device.runStatus == 1 ? '#ff3b30' : '#10B981'"
|
:color="device.runStatus == 1 ? '#ff3b30' : '#10B981'"
|
||||||
:size="device.devType == 'Direct_Connected_Device' ? '35' : '40'"
|
:size="device.devType == 'Direct_Connected_Device' ? '35' : '40'"
|
||||||
></uni-icons> -->
|
></uni-icons> -->
|
||||||
<Cn-icon-device
|
<Cn-icon-device :devType="device.devType" :runStatus="device.runStatus"
|
||||||
:devType="device.devType"
|
:alarmStatus="device.isAlarm ? 1 : 0"></Cn-icon-device>
|
||||||
:runStatus="device.runStatus"
|
|
||||||
:alarmStatus="device.isAlarm ? 1 : 0"
|
|
||||||
></Cn-icon-device>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="uni-card__header-content">
|
<view class="uni-card__header-content">
|
||||||
<text class="uni-card__header-content-title uni-ellipsis">
|
<text class="uni-card__header-content-title uni-ellipsis">
|
||||||
{{ device.equipmentName }}
|
{{ device.equipmentName }}
|
||||||
</text>
|
</text>
|
||||||
<text class="uni-card__header-content-subtitle uni-ellipsis">
|
<!-- <text class="uni-card__header-content-subtitle uni-ellipsis">
|
||||||
<!-- {{ device.mac }}-->
|
{{ device.mac }}
|
||||||
</text>
|
</text> -->
|
||||||
|
<view class="event-desc mt10 mb8">
|
||||||
|
<text>
|
||||||
|
工程名称:{{ device.engineeringName }}
|
||||||
|
</text>
|
||||||
|
<text>
|
||||||
|
项目名称:{{ device.projectName }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="tagBox">
|
<view class="tagBox">
|
||||||
<text class="event-tag" :class="device.runStatus == 1 ? 'lx-tag' : 'zx-tag'">
|
<text class="event-tag" :class="device.runStatus == 1 ? 'lx-tag' : 'zx-tag'">
|
||||||
{{ device.runStatus == 1 ? '离线' : '在线' }}
|
{{ device.runStatus == 1 ? '离线' : '在线' }}
|
||||||
</text>
|
</text>
|
||||||
<text
|
<text class="event-tag"
|
||||||
class="event-tag"
|
:class="device.devType == 'Direct_Connected_Device' ? 'zl-tag' : 'jc-tag'">
|
||||||
:class="device.devType == 'Direct_Connected_Device' ? 'zl-tag' : 'jc-tag'"
|
|
||||||
>
|
|
||||||
{{ device.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备' }}
|
{{ device.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备' }}
|
||||||
</text>
|
</text>
|
||||||
<text class="event-tag" :class="device.isPrimaryUser == 1 ? 'z-tag' : 'fx-tag'">
|
<text class="event-tag" :class="device.isPrimaryUser == 1 ? 'z-tag' : 'fx-tag'">
|
||||||
{{ device.isPrimaryUser == 1 ? '我的设备' : '他人设备' }}
|
{{ device.isPrimaryUser == 1 ? '我的设备' : '他人设备' }}
|
||||||
</text>
|
</text>
|
||||||
</view
|
</view>
|
||||||
>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="uni-card__header-extra" style="position: relative" @click.stop>
|
<view class="uni-card__header-extra" style="position: relative" @click.stop>
|
||||||
@@ -63,8 +59,8 @@
|
|||||||
</view>
|
</view>
|
||||||
<!-- <slot name="title"></slot> -->
|
<!-- <slot name="title"></slot> -->
|
||||||
</template>
|
</template>
|
||||||
<view class="device-body">
|
<!-- <view class="device-body">
|
||||||
<view class="device-body-item">
|
<view class="device-body-item">
|
||||||
<text>工程名称</text>
|
<text>工程名称</text>
|
||||||
<text>{{ device.engineeringName }}</text>
|
<text>{{ device.engineeringName }}</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -75,8 +71,8 @@
|
|||||||
<view class="device-body-item mt6" v-if="device.process == 2 || device.process == 3">
|
<view class="device-body-item mt6" v-if="device.process == 2 || device.process == 3">
|
||||||
<text>调试阶段</text>
|
<text>调试阶段</text>
|
||||||
<text>{{ device.process == 2 ? '功能调试' : '出厂调试' }}</text>
|
<text>{{ device.process == 2 ? '功能调试' : '出厂调试' }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
<view class="pinToTop" v-if="device.isTop == 1"> 置顶</view>
|
<view class="pinToTop" v-if="device.isTop == 1"> 置顶</view>
|
||||||
</uni-card>
|
</uni-card>
|
||||||
</template>
|
</template>
|
||||||
@@ -166,10 +162,10 @@ export default {
|
|||||||
|
|
||||||
/deep/ .uni-card__header {
|
/deep/ .uni-card__header {
|
||||||
display: flex;
|
display: flex;
|
||||||
border-bottom: 2rpx #ebeef5 solid;
|
// border-bottom: 2rpx #ebeef5 solid;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 20rpx 20rpx 10rpx 0;
|
padding: 20rpx 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -279,4 +275,16 @@ export default {
|
|||||||
transform: rotate(45deg) translate(50rpx, -10rpx);
|
transform: rotate(45deg) translate(50rpx, -10rpx);
|
||||||
transform-origin: top right;
|
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>
|
</style>
|
||||||
|
|||||||
234
components/Cn-filterInformation/Cn-filterInformation.vue
Normal file
234
components/Cn-filterInformation/Cn-filterInformation.vue
Normal file
@@ -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>
|
||||||
@@ -1,45 +1,45 @@
|
|||||||
<template>
|
<template>
|
||||||
<view v-html="svgHtml" class="svg-container"></view>
|
<view v-html="svgHtml" class="svg-container"></view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
// 父组件传递的参数
|
// 父组件传递的参数
|
||||||
name: {
|
name: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data() {
|
},
|
||||||
return {}
|
data() {
|
||||||
},
|
return {}
|
||||||
computed: {
|
},
|
||||||
svgHtml() {
|
computed: {
|
||||||
if (this.name == '电压暂降') {
|
svgHtml() {
|
||||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
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"/>
|
<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>`
|
</svg>`
|
||||||
} else if (this.name == '电压暂升') {
|
} else if (this.name == '电压暂升') {
|
||||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
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"/>
|
<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>`
|
</svg>`
|
||||||
} else if (this.name == '电压中断') {
|
} else if (this.name == '电压中断') {
|
||||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
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"/>
|
<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>`
|
</svg>`
|
||||||
} else if (this.name == '瞬态') {
|
} else if (this.name == '瞬态') {
|
||||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
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"/>
|
<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>`
|
</svg>`
|
||||||
} else if (this.name == '未知') {
|
} else if (this.name == '未知') {
|
||||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
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"/>
|
<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>
|
<text x="50" y="82" text-anchor="middle" font-size="18" fill="#6b7280" font-family="Arial, sans-serif" font-weight="bold">?</text>
|
||||||
</svg>`
|
</svg>`
|
||||||
} else if (this.name == '稳态越限') {
|
} else if (this.name == '稳态越限') {
|
||||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
||||||
<!-- Limit line -->
|
<!-- Limit line -->
|
||||||
<line x1="5" y1="40" x2="95" y2="40" stroke="#e6a23c" stroke-width="2" stroke-dasharray="4,4"/>
|
<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>
|
</marker>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>`
|
</svg>`
|
||||||
} else if (this.name == '运行告警') {
|
} else if (this.name == '运行告警') {
|
||||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="40" height="40">
|
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"/>
|
<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"/>
|
<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"/>
|
<circle cx="50" cy="62" r="4" fill="#007aff"/>
|
||||||
</svg>`
|
</svg>`
|
||||||
} else if (this.name == '治理设备') {
|
} else if (this.name == '治理设备') {
|
||||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="38" height="38">
|
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="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="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"/>
|
<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"/>
|
<circle cx="86" cy="69" r="2" fill="#007aff"/>
|
||||||
<polygon points="88,65 86,70 84,65" fill="#007aff" opacity="0.7"/>
|
<polygon points="88,65 86,70 84,65" fill="#007aff" opacity="0.7"/>
|
||||||
</svg>`
|
</svg>`
|
||||||
} else if (this.name == '监测设备') {
|
} else if (this.name == '监测设备') {
|
||||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="38" height="38">
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="38" height="38">
|
||||||
<style>
|
<style>
|
||||||
text { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
|
text { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
|
||||||
</style>
|
</style>
|
||||||
@@ -119,8 +119,8 @@ export default {
|
|||||||
<text x="54" y="65" font-size="7" fill="#007aff">Ic: 125.1A</text>
|
<text x="54" y="65" font-size="7" fill="#007aff">Ic: 125.1A</text>
|
||||||
|
|
||||||
</svg>`
|
</svg>`
|
||||||
} else if (this.name == '报告') {
|
} else if (this.name == '报告') {
|
||||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="47" height="47">
|
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="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"/>
|
<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"/>
|
<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"/>
|
<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"/>
|
<line x1="76" y1="74" x2="86" y2="84" stroke="#007aff" stroke-width="4" stroke-linecap="round"/>
|
||||||
</svg>`
|
</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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.svg-container {
|
.svg-container {
|
||||||
width: 100rpx;
|
width: 100rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -139,7 +139,8 @@
|
|||||||
"/api" : {
|
"/api" : {
|
||||||
"https" : true,
|
"https" : true,
|
||||||
// "target" : "https://pqmcn.com:8092/api",
|
// "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,
|
"changOrigin" : true,
|
||||||
"pathRewrite" : {
|
"pathRewrite" : {
|
||||||
"/api" : ""
|
"/api" : ""
|
||||||
|
|||||||
@@ -121,6 +121,13 @@
|
|||||||
"navigationBarTitleText": "个性化推荐"
|
"navigationBarTitleText": "个性化推荐"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"path": "pages/index/comp/monitoringPoint",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "监测点电能质量信息"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/mine/system",
|
"path": "pages/mine/system",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -420,6 +427,7 @@
|
|||||||
"navigationBarTitleText": "关注工程配置"
|
"navigationBarTitleText": "关注工程配置"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"path": "pages/mine/serverSetting",
|
"path": "pages/mine/serverSetting",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
@@ -6,20 +6,16 @@
|
|||||||
<view class="grid-card-title">温度</view>
|
<view class="grid-card-title">温度</view>
|
||||||
<view class="grid-card-content-4">
|
<view class="grid-card-content-4">
|
||||||
<template v-for="item in renderData">
|
<template v-for="item in renderData">
|
||||||
<view class="item item-title"
|
<view class="item item-title">{{ item[0].clDid }}
|
||||||
>{{ item[0].clDid }}
|
|
||||||
<template v-if="item[0].clDid"> (°C)</template>
|
<template v-if="item[0].clDid"> (°C)</template>
|
||||||
</view>
|
</view>
|
||||||
<view class="item item-title"
|
<view class="item item-title">{{ item[1].clDid }}
|
||||||
>{{ item[1].clDid }}
|
|
||||||
<template v-if="item[1].clDid"> (°C)</template>
|
<template v-if="item[1].clDid"> (°C)</template>
|
||||||
</view>
|
</view>
|
||||||
<view class="item item-title"
|
<view class="item item-title">{{ item[2].clDid }}
|
||||||
>{{ item[2].clDid }}
|
|
||||||
<template v-if="item[2].clDid"> (°C)</template>
|
<template v-if="item[2].clDid"> (°C)</template>
|
||||||
</view>
|
</view>
|
||||||
<view class="item item-title"
|
<view class="item item-title">{{ item[3].clDid }}
|
||||||
>{{ item[3].clDid }}
|
|
||||||
<template v-if="item[3].clDid"> (°C)</template>
|
<template v-if="item[3].clDid"> (°C)</template>
|
||||||
</view>
|
</view>
|
||||||
<view class="item">{{ item[0].clDid ? Math.round(item[0].value) || '-' : '' }}</view>
|
<view class="item">{{ item[0].clDid ? Math.round(item[0].value) || '-' : '' }}</view>
|
||||||
@@ -30,27 +26,21 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 运维管理员、工程用户 可看 -->
|
<!-- 运维管理员、工程用户 可看 -->
|
||||||
<view
|
<view class="grid-card"
|
||||||
class="grid-card"
|
v-if="(userInfo.authorities == 'operation_manager' || userInfo.authorities == 'engineering_user') && moduleData.length > 0">
|
||||||
v-if="userInfo.authorities == 'operation_manager' || userInfo.authorities == 'engineering_user'"
|
|
||||||
>
|
|
||||||
<view class="grid-card-title">状态</view>
|
<view class="grid-card-title">状态</view>
|
||||||
<view class="grid-card-content-4">
|
<view class="grid-card-content-4">
|
||||||
<template v-for="(item, index) in moduleData">
|
<template v-for="(item, index) in moduleData">
|
||||||
<view class="item item-title"
|
<view class="item item-title">{{ item[0].moduleName }}
|
||||||
>{{ item[0].moduleName }}
|
|
||||||
<template v-if="item[0].moduleName"></template>
|
<template v-if="item[0].moduleName"></template>
|
||||||
</view>
|
</view>
|
||||||
<view class="item item-title"
|
<view class="item item-title">{{ item[1].moduleName }}
|
||||||
>{{ item[1].moduleName }}
|
|
||||||
<template v-if="item[1].moduleName"></template>
|
<template v-if="item[1].moduleName"></template>
|
||||||
</view>
|
</view>
|
||||||
<view class="item item-title"
|
<view class="item item-title">{{ item[2].moduleName }}
|
||||||
>{{ item[2].moduleName }}
|
|
||||||
<template v-if="item[2].moduleName"></template>
|
<template v-if="item[2].moduleName"></template>
|
||||||
</view>
|
</view>
|
||||||
<view class="item item-title"
|
<view class="item item-title">{{ item[3].moduleName }}
|
||||||
>{{ item[3].moduleName }}
|
|
||||||
<template v-if="item[3].moduleName"></template>
|
<template v-if="item[3].moduleName"></template>
|
||||||
</view>
|
</view>
|
||||||
<!-- <uni-tag :text="item[0].moduleState" :type=" item[0].moduleState=='离线'?'error' : 'success'" /> -->
|
<!-- <uni-tag :text="item[0].moduleState" :type=" item[0].moduleState=='离线'?'error' : 'success'" /> -->
|
||||||
@@ -101,6 +91,7 @@ export default {
|
|||||||
computed: {
|
computed: {
|
||||||
renderData() {
|
renderData() {
|
||||||
let arr = []
|
let arr = []
|
||||||
|
|
||||||
// 把IOData转换成每4个一组的二维数组
|
// 把IOData转换成每4个一组的二维数组
|
||||||
for (let i = 0; i < this.IOData.length; i += 4) {
|
for (let i = 0; i < this.IOData.length; i += 4) {
|
||||||
this.IOData.slice(i, i + 4).forEach((item) => {
|
this.IOData.slice(i, i + 4).forEach((item) => {
|
||||||
@@ -120,7 +111,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
console.warn(arr)
|
|
||||||
return arr
|
return arr
|
||||||
},
|
},
|
||||||
moduleData() {
|
moduleData() {
|
||||||
@@ -159,6 +149,5 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.basic {
|
.basic {}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<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="basic" v-else>
|
||||||
<view class="grid-card">
|
<view class="grid-card">
|
||||||
<view class="grid-card-title">电网电流</view>
|
<view class="grid-card-title">电网电流</view>
|
||||||
@@ -12,10 +13,10 @@
|
|||||||
<view class="item">{{ item.phase }}</view>
|
<view class="item">{{ item.phase }}</view>
|
||||||
<view class="item">{{
|
<view class="item">{{
|
||||||
item['Apf_RmsI_Sys(A)'] > 0 ? item['Apf_RmsI_Sys(A)'].toFixed(2) : item['Apf_RmsI_Sys(A)']
|
item['Apf_RmsI_Sys(A)'] > 0 ? item['Apf_RmsI_Sys(A)'].toFixed(2) : item['Apf_RmsI_Sys(A)']
|
||||||
}}</view>
|
}}</view>
|
||||||
<view class="item">{{
|
<view class="item">{{
|
||||||
item['Apf_ThdA_Sys(%)'] > 0 ? item['Apf_ThdA_Sys(%)'].toFixed(2) : item['Apf_ThdA_Sys(%)']
|
item['Apf_ThdA_Sys(%)'] > 0 ? item['Apf_ThdA_Sys(%)'].toFixed(2) : item['Apf_ThdA_Sys(%)']
|
||||||
}}</view>
|
}}</view>
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -30,13 +31,13 @@
|
|||||||
<view class="item">{{ item.phase }}</view>
|
<view class="item">{{ item.phase }}</view>
|
||||||
<view class="item">{{
|
<view class="item">{{
|
||||||
item['Apf_PhV_Sys(V)'] > 0 ? item['Apf_PhV_Sys(V)'].toFixed(2) : item['Apf_PhV_Sys(V)']
|
item['Apf_PhV_Sys(V)'] > 0 ? item['Apf_PhV_Sys(V)'].toFixed(2) : item['Apf_PhV_Sys(V)']
|
||||||
}}</view>
|
}}</view>
|
||||||
<view class="item">{{
|
<view class="item">{{
|
||||||
item['Apf_Freq(Hz)'] > 0 ? item['Apf_Freq(Hz)'].toFixed(2) : item['Apf_Freq(Hz)']
|
item['Apf_Freq(Hz)'] > 0 ? item['Apf_Freq(Hz)'].toFixed(2) : item['Apf_Freq(Hz)']
|
||||||
}}</view>
|
}}</view>
|
||||||
<view class="item">{{
|
<view class="item">{{
|
||||||
item['Apf_ThdU_Sys(%)'] > 0 ? item['Apf_ThdU_Sys(%)'].toFixed(2) : item['Apf_ThdU_Sys(%)']
|
item['Apf_ThdU_Sys(%)'] > 0 ? item['Apf_ThdU_Sys(%)'].toFixed(2) : item['Apf_ThdU_Sys(%)']
|
||||||
}}</view>
|
}}</view>
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -73,15 +74,15 @@
|
|||||||
item['Apf_RmsI_TolOut(A)'] == 3.1415926
|
item['Apf_RmsI_TolOut(A)'] == 3.1415926
|
||||||
? '-'
|
? '-'
|
||||||
: item['Apf_RmsI_TolOut(A)'] > 0
|
: item['Apf_RmsI_TolOut(A)'] > 0
|
||||||
? item['Apf_RmsI_TolOut(A)'].toFixed(2)
|
? item['Apf_RmsI_TolOut(A)'].toFixed(2)
|
||||||
: item['Apf_RmsI_TolOut(A)']
|
: item['Apf_RmsI_TolOut(A)']
|
||||||
}}</view>
|
}}</view>
|
||||||
<view class="item">{{
|
<view class="item">{{
|
||||||
item['load_Rate'] == 3.1415926
|
item['load_Rate'] == 3.1415926
|
||||||
? '-'
|
? '-'
|
||||||
: item['load_Rate'] > 0
|
: item['load_Rate'] > 0
|
||||||
? item['load_Rate'].toFixed(2)
|
? item['load_Rate'].toFixed(2)
|
||||||
: item['load_Rate']
|
: item['load_Rate']
|
||||||
}}</view>
|
}}</view>
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
@@ -179,6 +180,5 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.basic {
|
.basic {}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<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="basic" v-else>
|
||||||
<view class="grid-card">
|
<view class="grid-card">
|
||||||
<view class="grid-card-title">电网侧</view>
|
<view class="grid-card-title">电网侧</view>
|
||||||
@@ -12,14 +12,14 @@
|
|||||||
<view class="item item-title">功率因数</view>
|
<view class="item item-title">功率因数</view>
|
||||||
<template v-for="(item, index) in renderData.电网侧">
|
<template v-for="(item, index) in renderData.电网侧">
|
||||||
<view class="item">{{ item.phase }}</view>
|
<view class="item">{{ item.phase }}</view>
|
||||||
<view class="item"
|
<view class="item">{{ item['Apf_P_Sys(W)'] == '-' ? '-' : (item['Apf_P_Sys(W)'] /
|
||||||
>{{ item['Apf_P_Sys(W)'] == '-' ? '-' : (item['Apf_P_Sys(W)'] / 1000).toFixed(2) }}
|
1000).toFixed(2) }}
|
||||||
</view>
|
</view>
|
||||||
<view class="item"
|
<view class="item">{{ item['Apf_Q_Sys(Var)'] == '-' ? '-' : (item['Apf_Q_Sys(Var)'] /
|
||||||
>{{ item['Apf_Q_Sys(Var)'] == '-' ? '-' : (item['Apf_Q_Sys(Var)'] / 1000).toFixed(2) }}
|
1000).toFixed(2) }}
|
||||||
</view>
|
</view>
|
||||||
<view class="item"
|
<view class="item">{{ item['Apf_S_Sys(VA)'] == '-' ? '-' : (item['Apf_S_Sys(VA)'] /
|
||||||
>{{ item['Apf_S_Sys(VA)'] == '-' ? '-' : (item['Apf_S_Sys(VA)'] / 1000).toFixed(2) }}
|
1000).toFixed(2) }}
|
||||||
</view>
|
</view>
|
||||||
<view class="item">{{ item['Apf_PF_Sys(null)'] || '-' }}</view>
|
<view class="item">{{ item['Apf_PF_Sys(null)'] || '-' }}</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -35,14 +35,14 @@
|
|||||||
<view class="item item-title">功率因数</view>
|
<view class="item item-title">功率因数</view>
|
||||||
<template v-for="(item, index) in renderData.负载侧">
|
<template v-for="(item, index) in renderData.负载侧">
|
||||||
<view class="item">{{ item.phase }}</view>
|
<view class="item">{{ item.phase }}</view>
|
||||||
<view class="item"
|
<view class="item">{{ item['Apf_P_Load(W)'] == '-' ? '-' : (item['Apf_P_Load(W)'] /
|
||||||
>{{ item['Apf_P_Load(W)'] == '-' ? '-' : (item['Apf_P_Load(W)'] / 1000).toFixed(2) }}
|
1000).toFixed(2) }}
|
||||||
</view>
|
</view>
|
||||||
<view class="item">{{
|
<view class="item">{{
|
||||||
item['Apf_Q_Load(Var)'] == '-' ? '-' : (item['Apf_Q_Load(Var)'] / 1000).toFixed(2)
|
item['Apf_Q_Load(Var)'] == '-' ? '-' : (item['Apf_Q_Load(Var)'] / 1000).toFixed(2)
|
||||||
}}</view>
|
}}</view>
|
||||||
<view class="item"
|
<view class="item">{{ item['Apf_S_Load(VA)'] == '-' ? '-' : (item['Apf_S_Load(VA)'] /
|
||||||
>{{ item['Apf_S_Load(VA)'] == '-' ? '-' : (item['Apf_S_Load(VA)'] / 1000).toFixed(2) }}
|
1000).toFixed(2) }}
|
||||||
</view>
|
</view>
|
||||||
<view class="item">{{ item['Apf_PF_Load(null)'] || '-' }}</view>
|
<view class="item">{{ item['Apf_PF_Load(null)'] || '-' }}</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -130,6 +130,5 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.basic {
|
.basic {}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -5,18 +5,10 @@
|
|||||||
<view class="detail-header">
|
<view class="detail-header">
|
||||||
<Cn-htmlToImg domId="header" @renderFinish="renderFinish">
|
<Cn-htmlToImg domId="header" @renderFinish="renderFinish">
|
||||||
<view class="header" id="header" ref="header" @click="previewImg">
|
<view class="header" id="header" ref="header" @click="previewImg">
|
||||||
<img
|
<img :src="topoImg" style="width: 375px; display: block" mode="widthFix"
|
||||||
:src="topoImg"
|
@load="domLoading = false" />
|
||||||
style="width: 375px; display: block"
|
<view class="point" :style="{ left: item.lat + 'px', top: item.lng + 'px' }"
|
||||||
mode="widthFix"
|
v-for="(item, index) in topolodyData" :key="index">
|
||||||
@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 mt10" style="width: fit-content">
|
||||||
<view class="grid-card-content-1">
|
<view class="grid-card-content-1">
|
||||||
<view class="item">{{ item.label }}</view>
|
<view class="item">{{ item.label }}</view>
|
||||||
@@ -51,13 +43,9 @@
|
|||||||
<text class="ml10">设备状态</text>
|
<text class="ml10">设备状态</text>
|
||||||
</view> -->
|
</view> -->
|
||||||
<view class="nav" style="margin-top: -10rpx">
|
<view class="nav" style="margin-top: -10rpx">
|
||||||
<view
|
<view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
|
||||||
class="nav-menu"
|
v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text
|
||||||
:class="{ 'nav-menu-active': navMenuActive == index }"
|
}}
|
||||||
v-for="(item, index) in navMenuList"
|
|
||||||
:key="index"
|
|
||||||
@click="navMenuClick(index)"
|
|
||||||
>{{ item.text }}
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -107,22 +95,10 @@
|
|||||||
</uni-popup> -->
|
</uni-popup> -->
|
||||||
<!-- 输入框示例 -->
|
<!-- 输入框示例 -->
|
||||||
<uni-popup ref="inputDialog" type="dialog">
|
<uni-popup ref="inputDialog" type="dialog">
|
||||||
<uni-popup-dialog
|
<uni-popup-dialog ref="inputClose" type="info" mode="input" :title="dialogType" value="对话框预置提示内容!"
|
||||||
ref="inputClose"
|
placeholder="请输入内容" @confirm="dialogInputConfirm">
|
||||||
type="info"
|
<uni-easyinput type="textarea" :maxlength="250" autoHeight v-model="remarkContent"
|
||||||
mode="input"
|
placeholder="请输入备注"></uni-easyinput>
|
||||||
:title="dialogType"
|
|
||||||
value="对话框预置提示内容!"
|
|
||||||
placeholder="请输入内容"
|
|
||||||
@confirm="dialogInputConfirm"
|
|
||||||
>
|
|
||||||
<uni-easyinput
|
|
||||||
type="textarea"
|
|
||||||
:maxlength="250"
|
|
||||||
autoHeight
|
|
||||||
v-model="remarkContent"
|
|
||||||
placeholder="请输入备注"
|
|
||||||
></uni-easyinput>
|
|
||||||
</uni-popup-dialog>
|
</uni-popup-dialog>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
</view>
|
</view>
|
||||||
@@ -140,6 +116,7 @@ import { manualAccess } from '@/common/api/accessBoot'
|
|||||||
import { MQTT_IP, MQTT_OPTIONS } from '@/common/js/mqtt.js'
|
import { MQTT_IP, MQTT_OPTIONS } from '@/common/js/mqtt.js'
|
||||||
import mqtt from 'mqtt/dist/mqtt.js'
|
import mqtt from 'mqtt/dist/mqtt.js'
|
||||||
import { base64ToPath, pathToBase64 } from 'image-tools'
|
import { base64ToPath, pathToBase64 } from 'image-tools'
|
||||||
|
import { queryByCode, queryStatistical } from '@/common/api/dictionary'
|
||||||
import hoverMenu from '@/hover-menu/components/hover-menu/hover-menu.vue'
|
import hoverMenu from '@/hover-menu/components/hover-menu/hover-menu.vue'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -164,6 +141,7 @@ export default {
|
|||||||
navHeight: 0,
|
navHeight: 0,
|
||||||
img: '',
|
img: '',
|
||||||
topoImg: '',
|
topoImg: '',
|
||||||
|
targetLists: [],
|
||||||
navMenuList: [
|
navMenuList: [
|
||||||
{
|
{
|
||||||
text: '基本',
|
text: '基本',
|
||||||
@@ -177,9 +155,6 @@ export default {
|
|||||||
text: '功率',
|
text: '功率',
|
||||||
id: 'a16aceae7d1565bf9f94dd7410cf9bce',
|
id: 'a16aceae7d1565bf9f94dd7410cf9bce',
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// text: '波形',
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
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')
|
console.log('init')
|
||||||
this.loading = true
|
this.loading = true
|
||||||
this.domLoading = true
|
this.domLoading = true
|
||||||
queryTopologyDiagram(this.devId).then((res) => {
|
|
||||||
|
await queryTopologyDiagram(this.devId).then((res) => {
|
||||||
res.data.filePath = this.$config.static + res.data.filePath
|
res.data.filePath = this.$config.static + res.data.filePath
|
||||||
this.deviceInfo = res.data
|
this.deviceInfo = res.data
|
||||||
this.downloadImg()
|
this.downloadImg()
|
||||||
@@ -371,6 +356,7 @@ export default {
|
|||||||
let index = this.deviceInfo.appsLineTopologyDiagramPO?.findIndex((element) => {
|
let index = this.deviceInfo.appsLineTopologyDiagramPO?.findIndex((element) => {
|
||||||
element.label = element.name
|
element.label = element.name
|
||||||
item.label = element.name
|
item.label = element.name
|
||||||
|
item.target = element.target
|
||||||
return element.linePostion === item.linePostion
|
return element.linePostion === item.linePostion
|
||||||
})
|
})
|
||||||
if (index > -1) {
|
if (index > -1) {
|
||||||
@@ -384,10 +370,14 @@ export default {
|
|||||||
})
|
})
|
||||||
console.log(this.topolodyData)
|
console.log(this.topolodyData)
|
||||||
if (this.client) {
|
if (this.client) {
|
||||||
|
this.client.publish(`/zl/askDevData/${this.devId}/${this.navMenuList[0].id}`)
|
||||||
this.loading = false
|
this.loading = false
|
||||||
} else {
|
} else {
|
||||||
this.initMqtt(this.navMenuList[0].id)
|
this.initMqtt(this.navMenuList[0].id)
|
||||||
}
|
}
|
||||||
|
console.log("🚀 ~ this.client:", this.client)
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
renderFinish(e) {
|
renderFinish(e) {
|
||||||
@@ -460,22 +450,28 @@ export default {
|
|||||||
console.log('连接断开')
|
console.log('连接断开')
|
||||||
})
|
})
|
||||||
.on('message', (topic, message) => {
|
.on('message', (topic, message) => {
|
||||||
console.log('接收推送信息:', JSON.parse(message.toString()), topic)
|
// console.log('接收推送信息:', JSON.parse(message.toString()), topic)
|
||||||
console.log('🚀 ~ .on ~ topic:', topic)
|
// console.log('🚀 ~ .on ~ topic:', topic)
|
||||||
|
|
||||||
if (topic === `/zl/devData/${this.devId}/${id}`) {
|
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) {
|
if ((!message.toString() || message.toString().length < 10) && this.loading) {
|
||||||
this.$util.toast('该设备暂无数据')
|
this.$util.toast('该设备暂无数据')
|
||||||
}
|
}
|
||||||
this.loading = false
|
this.loading = false
|
||||||
this.handlerData(JSON.parse(message.toString()))
|
this.handlerData(data)
|
||||||
} else if (topic === `/zl/TemperData/${this.devId}`) {
|
} else if (topic === `/zl/TemperData/${this.devId}`) {
|
||||||
|
const data = JSON.parse(message.toString())
|
||||||
|
if (Array.isArray(data) && !data.length) return
|
||||||
// this.basicData.forEach((item) => {
|
// this.basicData.forEach((item) => {
|
||||||
// if (item.statisticalName === '温度' && item.phase === 'avg') {
|
// if (item.statisticalName === '温度' && item.phase === 'avg') {
|
||||||
// item.statisticalData = message.toString()
|
// item.statisticalData = message.toString()
|
||||||
// }
|
// }
|
||||||
// })
|
// })
|
||||||
this.IOData = JSON.parse(message.toString())
|
this.IOData = data
|
||||||
// this.IOData = this.IOData.filter((item) => item.value !== 0)
|
// this.IOData = this.IOData.filter((item) => item.value !== 0)
|
||||||
this.IOData.forEach((item) => {
|
this.IOData.forEach((item) => {
|
||||||
if (!item.value) {
|
if (!item.value) {
|
||||||
@@ -490,37 +486,60 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
handlerData(data) {
|
async handlerData(data) {
|
||||||
this.basicData = data
|
this.basicData = data
|
||||||
|
|
||||||
this.topolodyData.forEach((element) => {
|
this.topolodyData.forEach((element) => {
|
||||||
let arr = []
|
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) => {
|
data.forEach((item) => {
|
||||||
if (item.statisticalName === key && item.phase === 'avg') {
|
if (item.statisticalIndex === id && item.phase === 'avg') {
|
||||||
if (key === 'Apf_RmsI_TolOut(A)') {
|
|
||||||
arr.push({
|
arr.push({
|
||||||
label: '总输出电流:',
|
label: list[0].dataTypeName.split('-')[1] + ':',
|
||||||
value: Math.round(item.statisticalData) + 'A',
|
value: (item.statisticalData) + `${item.unit || ''}`,
|
||||||
})
|
})
|
||||||
} else {
|
|
||||||
arr.push({
|
|
||||||
label: '电流畸变率:',
|
|
||||||
value: Math.round(item.statisticalData) + '%',
|
|
||||||
})
|
|
||||||
// arr.push('电流畸变率:' + item.statisticalData + '%')
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
if (item.time) {
|
if (item.time) {
|
||||||
this.dataTime = item.time.seconds
|
this.dataTime = item.time.seconds
|
||||||
this.time = this.$util.parseTime(this.dataTime - 8 * 60 * 60)
|
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
|
element.value = arr
|
||||||
})
|
})
|
||||||
|
console.log("🚀 ~ this.topolodyData:", this.topolodyData)
|
||||||
|
|
||||||
console.log(this.topolodyData)
|
console.log(this.topolodyData)
|
||||||
this.$forceUpdate()
|
this.$forceUpdate()
|
||||||
},
|
},
|
||||||
@@ -539,13 +558,16 @@ export default {
|
|||||||
}, 1000)
|
}, 1000)
|
||||||
},
|
},
|
||||||
|
|
||||||
onLoad(options) {
|
async onLoad(options) {
|
||||||
|
await this.getTarget()
|
||||||
|
|
||||||
this.pageOptions = options
|
this.pageOptions = options
|
||||||
this.device = JSON.parse(options.device)
|
this.device = JSON.parse(options.device)
|
||||||
console.log('🚀 ~ options:', options)
|
|
||||||
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||||||
this.devId = options.id
|
this.devId = options.id
|
||||||
this.isPrimaryUser = options.isPrimaryUser
|
this.isPrimaryUser = options.isPrimaryUser
|
||||||
|
|
||||||
if (this.pageOptions.process == 2 || this.pageOptions.process == 3) {
|
if (this.pageOptions.process == 2 || this.pageOptions.process == 3) {
|
||||||
this.content.splice(
|
this.content.splice(
|
||||||
0,
|
0,
|
||||||
@@ -626,9 +648,11 @@ export default {
|
|||||||
lng: '',
|
lng: '',
|
||||||
showKey: item.showKey, //要展示的指标key
|
showKey: item.showKey, //要展示的指标key
|
||||||
value: [],
|
value: [],
|
||||||
|
target: item.target
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
this.init()
|
this.init()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@@ -636,6 +660,7 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.detail {
|
.detail {
|
||||||
|
|
||||||
// background: $uni-theme-white;
|
// background: $uni-theme-white;
|
||||||
.header-bg {
|
.header-bg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -666,7 +691,7 @@ export default {
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #111;
|
color: #111;
|
||||||
width: 110rpx;
|
width: 150rpx;
|
||||||
font-size: 16rpx;
|
font-size: 16rpx;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -6,13 +6,8 @@
|
|||||||
<uni-forms-item label="设备识别码">
|
<uni-forms-item label="设备识别码">
|
||||||
<view style="display: flex">
|
<view style="display: flex">
|
||||||
<uni-easyinput type="text" v-model="formData.nDid" placeholder="请输入设备识别码" />
|
<uni-easyinput type="text" v-model="formData.nDid" placeholder="请输入设备识别码" />
|
||||||
<uni-icons
|
<uni-icons type="camera" color="#007aff" size="26" class="ml20"
|
||||||
type="camera"
|
@click="scanCode"></uni-icons>
|
||||||
color="#007aff"
|
|
||||||
size="26"
|
|
||||||
class="ml20"
|
|
||||||
@click="scanCode"
|
|
||||||
></uni-icons>
|
|
||||||
</view>
|
</view>
|
||||||
</uni-forms-item>
|
</uni-forms-item>
|
||||||
</uni-forms>
|
</uni-forms>
|
||||||
@@ -28,36 +23,18 @@
|
|||||||
<uni-forms>
|
<uni-forms>
|
||||||
<uni-forms-item label="工程">
|
<uni-forms-item label="工程">
|
||||||
<view style="display: flex; align-items: center">
|
<view style="display: flex; align-items: center">
|
||||||
<uni-data-select
|
<uni-data-select v-model="formData.engineeringId" :localdata="engineeringList"
|
||||||
v-model="formData.engineeringId"
|
@change="engineeringChang($event, true)" :clear="false"></uni-data-select>
|
||||||
:localdata="engineeringList"
|
<uni-icons type="plusempty" color="#007aff" size="26" class="ml20"
|
||||||
@change="engineeringChang($event, true)"
|
@click="createEngineering"></uni-icons>
|
||||||
:clear="false"
|
|
||||||
></uni-data-select>
|
|
||||||
<uni-icons
|
|
||||||
type="plusempty"
|
|
||||||
color="#007aff"
|
|
||||||
size="26"
|
|
||||||
class="ml20"
|
|
||||||
@click="createEngineering"
|
|
||||||
></uni-icons>
|
|
||||||
</view>
|
</view>
|
||||||
</uni-forms-item>
|
</uni-forms-item>
|
||||||
<uni-forms-item label="项目">
|
<uni-forms-item label="项目">
|
||||||
<view style="display: flex; align-items: center">
|
<view style="display: flex; align-items: center">
|
||||||
<uni-data-select
|
<uni-data-select v-model="formData.projectId" :localdata="projectRange"
|
||||||
v-model="formData.projectId"
|
@change="queryTopologyDiagramPage" :clear="false"></uni-data-select>
|
||||||
:localdata="projectRange"
|
<uni-icons type="plusempty" color="#007aff" size="26" class="ml20"
|
||||||
@change="queryTopologyDiagramPage"
|
@click="createProject"></uni-icons>
|
||||||
:clear="false"
|
|
||||||
></uni-data-select>
|
|
||||||
<uni-icons
|
|
||||||
type="plusempty"
|
|
||||||
color="#007aff"
|
|
||||||
size="26"
|
|
||||||
class="ml20"
|
|
||||||
@click="createProject"
|
|
||||||
></uni-icons>
|
|
||||||
</view>
|
</view>
|
||||||
</uni-forms-item>
|
</uni-forms-item>
|
||||||
|
|
||||||
@@ -69,25 +46,14 @@
|
|||||||
</view>
|
</view>
|
||||||
<view v-else class="gplot gplot-empty center" @click="chooseGplot"> 选择拓扑图</view>
|
<view v-else class="gplot gplot-empty center" @click="chooseGplot"> 选择拓扑图</view>
|
||||||
</view>
|
</view>
|
||||||
<uni-icons
|
<uni-icons type="image" color="#007aff" size="26" class="ml20"
|
||||||
type="image"
|
@click="chooseGplot"></uni-icons>
|
||||||
color="#007aff"
|
|
||||||
size="26"
|
|
||||||
class="ml20"
|
|
||||||
@click="chooseGplot"
|
|
||||||
></uni-icons>
|
|
||||||
</view>
|
</view>
|
||||||
</uni-forms-item>
|
</uni-forms-item>
|
||||||
<uni-forms-item
|
<uni-forms-item label="监测点"
|
||||||
label="监测点"
|
v-if="pointList.length && formData.topologyDiagramUrl && formData.projectId">
|
||||||
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
|
|
||||||
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" v-if="item2.name">{{ item2.name }}</view>
|
||||||
<view style="flex: 1; color: #999" v-else>请选择监测点</view>
|
<view style="flex: 1; color: #999" v-else>请选择监测点</view>
|
||||||
<uni-icons type="compose" color="#007aff" size="26" class="ml20"></uni-icons>
|
<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">
|
<uni-drawer ref="gplot" mode="right" :mask-click="false">
|
||||||
<scroll-view style="height: 100%" scroll-y="true">
|
<scroll-view style="height: 100%" scroll-y="true">
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<image
|
<image class="gplot gplot-box" mode="aspectFill" :class="{ 'gplot-active': key == activeGplot }"
|
||||||
class="gplot gplot-box"
|
:src="item.filePath" @click="activeGplot = key" v-for="(item, key) in imageList"
|
||||||
mode="aspectFill"
|
:key="key" />
|
||||||
:class="{ 'gplot-active': key == activeGplot }"
|
<view v-if="imageList.length === 0" style="text-align: center" class="mt50 mb50">暂无拓扑图
|
||||||
: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>
|
||||||
<view class="btn-wrap">
|
<view class="btn-wrap">
|
||||||
<view class="btn-wrap-item" @click="closeDrawer"> 取消</view>
|
<view class="btn-wrap-item" @click="closeDrawer"> 取消</view>
|
||||||
@@ -142,22 +101,18 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<view class="content-des">请拖动图中的文字选择监测点位置</view>
|
<view class="content-des">请拖动图中的文字选择监测点位置</view>
|
||||||
<uni-forms>
|
<uni-forms labelWidth="70px">
|
||||||
<uni-data-select
|
<uni-forms-item label="位置">
|
||||||
v-model="point.position"
|
<uni-data-select v-model="point.position" :localdata="positionList"
|
||||||
:localdata="positionList"
|
@change="positionChange" disabled :clear="false"></uni-data-select>
|
||||||
@change="positionChange"
|
</uni-forms-item>
|
||||||
disabled
|
<uni-forms-item label="别名">
|
||||||
:clear="false"
|
<uni-easyinput :clearable="false" type="text" v-model="point.alias"
|
||||||
></uni-data-select>
|
@change="aliasChange" placeholder="别名(非必填)" />
|
||||||
<uni-easyinput
|
</uni-forms-item>
|
||||||
:clearable="false"
|
<uni-forms-item label="绑定指标">
|
||||||
class="mt20"
|
<uni-data-select v-model="point.target" :localdata="targetList"></uni-data-select>
|
||||||
type="text"
|
</uni-forms-item>
|
||||||
v-model="point.alias"
|
|
||||||
@change="aliasChange"
|
|
||||||
placeholder="别名(非必填)"
|
|
||||||
/>
|
|
||||||
</uni-forms>
|
</uni-forms>
|
||||||
<view class="btn-wrap">
|
<view class="btn-wrap">
|
||||||
<view class="btn-wrap-item" @click="closeDrawer"> 取消</view>
|
<view class="btn-wrap-item" @click="closeDrawer"> 取消</view>
|
||||||
@@ -181,6 +136,7 @@ import {
|
|||||||
} from '@/common/api/device.js'
|
} from '@/common/api/device.js'
|
||||||
import { getProjectList, queryTopologyDiagramPage } from '@/common/api/project.js'
|
import { getProjectList, queryTopologyDiagramPage } from '@/common/api/project.js'
|
||||||
import ykAuthpup from '@/components/yk-authpup/yk-authpup'
|
import ykAuthpup from '@/components/yk-authpup/yk-authpup'
|
||||||
|
import { queryByCode, queryStatistical } from '@/common/api/dictionary'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
ykAuthpup,
|
ykAuthpup,
|
||||||
@@ -204,6 +160,8 @@ export default {
|
|||||||
activeGplot: 0,
|
activeGplot: 0,
|
||||||
positionList: [],
|
positionList: [],
|
||||||
imageList: [],
|
imageList: [],
|
||||||
|
targetLists: [],//总数据
|
||||||
|
targetList: [],//根据位置切换数据
|
||||||
isAdaptive: false, // 是否适应当前项目
|
isAdaptive: false, // 是否适应当前项目
|
||||||
dialogOpen: false,
|
dialogOpen: false,
|
||||||
options: {},
|
options: {},
|
||||||
@@ -226,9 +184,20 @@ export default {
|
|||||||
onLoad(o) {
|
onLoad(o) {
|
||||||
this.options = o
|
this.options = o
|
||||||
let dictData = uni.getStorageSync(this.$cacheKey.dictData)
|
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) => {
|
dictData.forEach((item) => {
|
||||||
if (item.code == 'Line_Position') {
|
if (item.code == 'Line_Position') {
|
||||||
this.positionList = item.children.map((item) => {
|
this.positionList = item.children.filter((child) => child.name !== 'PCC公共点').map((item) => {
|
||||||
return {
|
return {
|
||||||
...item,
|
...item,
|
||||||
text: item.name,
|
text: item.name,
|
||||||
@@ -264,6 +233,19 @@ export default {
|
|||||||
// })
|
// })
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
getEngineering() {
|
||||||
queryEngineeringPage({ pageNum: 1, pageSize: 9999 }).then((res) => {
|
queryEngineeringPage({ pageNum: 1, pageSize: 9999 }).then((res) => {
|
||||||
let arr = [
|
let arr = [
|
||||||
@@ -377,7 +359,7 @@ export default {
|
|||||||
console.log(e)
|
console.log(e)
|
||||||
},
|
},
|
||||||
|
|
||||||
projectChange(e) {},
|
projectChange(e) { },
|
||||||
scanCode() {
|
scanCode() {
|
||||||
if (plus.os.name == 'Android') {
|
if (plus.os.name == 'Android') {
|
||||||
this.$refs['authpup'].open()
|
this.$refs['authpup'].open()
|
||||||
@@ -509,6 +491,7 @@ export default {
|
|||||||
this.point.alias = ''
|
this.point.alias = ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
this.settarget()
|
||||||
this.dialogOpen = true
|
this.dialogOpen = true
|
||||||
this.$refs.point.open()
|
this.$refs.point.open()
|
||||||
this.$forceUpdate()
|
this.$forceUpdate()
|
||||||
|
|||||||
@@ -739,126 +739,129 @@ export default {
|
|||||||
// console.log('接收推送信息:', JSON.parse(message.toString()), topic)
|
// console.log('接收推送信息:', JSON.parse(message.toString()), topic)
|
||||||
if (!this.connection) return
|
if (!this.connection) return
|
||||||
// console.log('🚀 ~ .on ~ topic:', topic, this.userInfo.userIndex)
|
// 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())
|
let list = JSON.parse(message.toString())
|
||||||
|
if (list.lineId != this.lineId) return
|
||||||
// if (list.userId == this.userInfo.userIndex) {
|
// if (list.userId == this.userInfo.userIndex) {
|
||||||
// console.log(list)
|
// console.log(list)
|
||||||
this.realTime = list.dataTime
|
this.realTime = list.dataTime
|
||||||
let pt = list.pt || 0
|
let pt = list.pt || 0
|
||||||
let ct = list.ct || 0
|
let ct = list.ct || 0
|
||||||
|
|
||||||
let data = {
|
let data = {
|
||||||
vRmsA: ((list.vRmsA * pt) / 1000).toFixed(2),
|
vRmsA: ((list.vRmsA * pt) / 1000).toFixed(2),
|
||||||
vRmsB: ((list.vRmsB * pt) / 1000).toFixed(2),
|
vRmsB: ((list.vRmsB * pt) / 1000).toFixed(2),
|
||||||
vRmsC: ((list.vRmsC * pt) / 1000).toFixed(2),
|
vRmsC: ((list.vRmsC * pt) / 1000).toFixed(2),
|
||||||
iRmsA: (list.iRmsA * ct).toFixed(2),
|
iRmsA: (list.iRmsA * ct).toFixed(2),
|
||||||
iRmsB: (list.iRmsB * ct).toFixed(2),
|
iRmsB: (list.iRmsB * ct).toFixed(2),
|
||||||
iRmsC: (list.iRmsC * ct).toFixed(2),
|
iRmsC: (list.iRmsC * ct).toFixed(2),
|
||||||
v1A: ((list.v1A * pt) / 1000).toFixed(2),
|
v1A: ((list.v1A * pt) / 1000).toFixed(2),
|
||||||
v1B: ((list.v1B * pt) / 1000).toFixed(2),
|
v1B: ((list.v1B * pt) / 1000).toFixed(2),
|
||||||
v1C: ((list.v1C * pt) / 1000).toFixed(2),
|
v1C: ((list.v1C * pt) / 1000).toFixed(2),
|
||||||
v1AngA: list.v1AngA.toFixed(2),
|
v1AngA: list.v1AngA.toFixed(2),
|
||||||
v1AngB: list.v1AngB.toFixed(2),
|
v1AngB: list.v1AngB.toFixed(2),
|
||||||
v1AngC: list.v1AngC.toFixed(2),
|
v1AngC: list.v1AngC.toFixed(2),
|
||||||
|
|
||||||
i1A: (list.i1A * ct).toFixed(2),
|
i1A: (list.i1A * ct).toFixed(2),
|
||||||
i1B: (list.i1B * ct).toFixed(2),
|
i1B: (list.i1B * ct).toFixed(2),
|
||||||
i1C: (list.i1C * ct).toFixed(2),
|
i1C: (list.i1C * ct).toFixed(2),
|
||||||
i1AngA: list.i1AngA.toFixed(2),
|
i1AngA: list.i1AngA.toFixed(2),
|
||||||
i1AngB: list.i1AngB.toFixed(2),
|
i1AngB: list.i1AngB.toFixed(2),
|
||||||
i1AngC: list.i1AngC.toFixed(2),
|
i1AngC: list.i1AngC.toFixed(2),
|
||||||
vDevA: list.vDevA.toFixed(2),
|
vDevA: list.vDevA.toFixed(2),
|
||||||
vDevB: list.vDevB.toFixed(2),
|
vDevB: list.vDevB.toFixed(2),
|
||||||
vDevC: list.vDevC.toFixed(2),
|
vDevC: list.vDevC.toFixed(2),
|
||||||
vThdA: list.vThdA.toFixed(2),
|
vThdA: list.vThdA.toFixed(2),
|
||||||
vThdB: list.vThdB.toFixed(2),
|
vThdB: list.vThdB.toFixed(2),
|
||||||
vThdC: list.vThdC.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
|
|
||||||
|
|
||||||
// 电流
|
// this.echart0.setOption(this.echartsData0, true)
|
||||||
let aMax =
|
// this.echart1.setOption(this.echartsData1, true)
|
||||||
Math.ceil(
|
// this.echartV1.setOption(this.echartsDataV1, true)
|
||||||
(Math.max(
|
// this.echartV2.setOption(this.echartsDataV2, true)
|
||||||
...[
|
// this.echartV3.setOption(this.echartsDataV3, true)
|
||||||
Math.floor(data.iRmsA * 100) / 100 || 1,
|
// this.echartA1.setOption(this.echartsDataA1, true)
|
||||||
Math.floor(data.iRmsB * 100) / 100 || 1,
|
// this.echartA2.setOption(this.echartsDataA2, true)
|
||||||
Math.floor(data.iRmsC * 100) / 100 || 1,
|
// this.echartA3.setOption(this.echartsDataA3, true)
|
||||||
],
|
|
||||||
) *
|
|
||||||
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)
|
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -1029,7 +1032,8 @@ export default {
|
|||||||
.table-row {
|
.table-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 20rpx 30rpx;
|
padding: 15rpx 30rpx;
|
||||||
|
height: 20px;
|
||||||
border-bottom: 1rpx solid #eee;
|
border-bottom: 1rpx solid #eee;
|
||||||
text {
|
text {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
@@ -24,9 +24,10 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="content" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
|
<view class="content" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
|
||||||
<view v-show="navMenuActive == 0">
|
<view v-show="navMenuActive == 0">
|
||||||
|
<!-- extra="🔍" -->
|
||||||
<uni-card
|
<uni-card
|
||||||
:title="item.name"
|
:title="item.name"
|
||||||
extra="🔍"
|
|
||||||
@click="jumpProject(item)"
|
@click="jumpProject(item)"
|
||||||
v-for="(item, index) in store.data"
|
v-for="(item, index) in store.data"
|
||||||
:key="index"
|
:key="index"
|
||||||
@@ -258,7 +259,7 @@ export default {
|
|||||||
.term-list-bottom {
|
.term-list-bottom {
|
||||||
.term-list-bottom-item {
|
.term-list-bottom-item {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
margin-bottom: 20rpx;
|
// margin-bottom: 20rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
// view:first-of-type{
|
// view:first-of-type{
|
||||||
@@ -270,4 +271,10 @@ export default {
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/deep/ .uni-card__content {
|
||||||
|
padding: 5px 10px 10px !important;
|
||||||
|
}
|
||||||
|
/deep/ .uni-card__header-content-title {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -14,7 +14,8 @@
|
|||||||
<uni-swipe-action-item v-for="(item, index) in store.data"
|
<uni-swipe-action-item v-for="(item, index) in store.data"
|
||||||
:style="{ marginTop: index === 0 ? '0' : '' }" :key="index" :threshold="0"
|
:style="{ marginTop: index === 0 ? '0' : '' }" :key="index" :threshold="0"
|
||||||
:right-options="item.isTop == 0 ? options1 : options12" @click="bindClick($event, item)">
|
: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">
|
||||||
<view class="term-list-bottom-item">
|
<view class="term-list-bottom-item">
|
||||||
<view>区域</view>
|
<view>区域</view>
|
||||||
|
|||||||
@@ -142,6 +142,7 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
deviceListFilter() {
|
deviceListFilter() {
|
||||||
|
|
||||||
let arr = this.store.data.filter((item) => {
|
let arr = this.store.data.filter((item) => {
|
||||||
if (this.select.projectName && this.select.projectType) {
|
if (this.select.projectName && this.select.projectType) {
|
||||||
return item.project === this.select.projectName && item.type === this.select.projectType
|
return item.project === this.select.projectName && item.type === this.select.projectType
|
||||||
|
|||||||
@@ -151,8 +151,8 @@ export default {
|
|||||||
// 存储参数
|
// 存储参数
|
||||||
uni.setStorageSync('messageParams', {
|
uni.setStorageSync('messageParams', {
|
||||||
|
|
||||||
engineeringName: this.device.engineeringName,
|
engineeringName: item.engineeringName,
|
||||||
engineeringId: this.device.engineeringId, //工程ID
|
engineeringId: item.engineeringId, //工程ID
|
||||||
projectName: '',
|
projectName: '',
|
||||||
projectId: '', //項目ID
|
projectId: '', //項目ID
|
||||||
deviceName: '',
|
deviceName: '',
|
||||||
|
|||||||
349
pages/index/comp/monitoringPoint.vue
Normal file
349
pages/index/comp/monitoringPoint.vue
Normal file
@@ -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>
|
||||||
@@ -1,33 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<Cn-page :loading="loading" noPadding>
|
<Cn-page :loading="loading" noPadding>
|
||||||
<view slot="body" class="canneng-index">
|
<view slot="body" class="canneng-index">
|
||||||
<uni-nav-bar
|
<uni-nav-bar rightWidth="300rpx" leftWidth="300rpx" dark :fixed="true" status-bar background-color="#fff"
|
||||||
rightWidth="300rpx"
|
color="#111" @clickRight="selectEngineering">
|
||||||
leftWidth="300rpx"
|
|
||||||
dark
|
|
||||||
:fixed="true"
|
|
||||||
status-bar
|
|
||||||
background-color="#fff"
|
|
||||||
color="#111"
|
|
||||||
@clickRight="selectEngineering"
|
|
||||||
>
|
|
||||||
<template slot="left">
|
<template slot="left">
|
||||||
<text style="font-size: 32rpx; font-weight: 500">灿能物联</text>
|
<text style="font-size: 32rpx; font-weight: 500">灿能物联</text>
|
||||||
</template>
|
</template>
|
||||||
<template slot="right">
|
<template slot="right">
|
||||||
<text class="hide-txt mr5" style="font-size: 28rpx"
|
<text class="hide-txt mr5" style="font-size: 28rpx">{{
|
||||||
>{{
|
userInfo.authorities === 'engineering_user'
|
||||||
userInfo.authorities === 'engineering_user'
|
? '创建工程'
|
||||||
? '创建工程'
|
: select.engineeringName || emptyEngineeringName
|
||||||
: select.engineeringName || emptyEngineeringName
|
}}
|
||||||
}}
|
|
||||||
</text>
|
</text>
|
||||||
<uni-icons
|
<uni-icons type="bottom" size="16" color="#111"
|
||||||
type="bottom"
|
v-if="select.engineeringName && userInfo.authorities != 'engineering_user'"></uni-icons>
|
||||||
size="16"
|
|
||||||
color="#111"
|
|
||||||
v-if="select.engineeringName && userInfo.authorities != 'engineering_user'"
|
|
||||||
></uni-icons>
|
|
||||||
</template>
|
</template>
|
||||||
</uni-nav-bar>
|
</uni-nav-bar>
|
||||||
<view class="index">
|
<view class="index">
|
||||||
@@ -48,7 +35,10 @@
|
|||||||
</template>
|
</template>
|
||||||
<!-- 设备列表 -->
|
<!-- 设备列表 -->
|
||||||
<template v-else v-show="engineeringList.length">
|
<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" />
|
<Device ref="device" :store="store" />
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
@@ -227,6 +217,11 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 动态配置导航栏按钮
|
// 动态配置导航栏按钮
|
||||||
|
jump() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/index/comp/monitoringPoint`,
|
||||||
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
// 页面加载时,动态配置导航栏按钮
|
// 页面加载时,动态配置导航栏按钮
|
||||||
@@ -308,6 +303,7 @@ export default {
|
|||||||
.canneng-index-title {
|
.canneng-index-title {
|
||||||
padding: 0 20rpx;
|
padding: 0 20rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .uni-card {
|
/deep/ .uni-card {
|
||||||
@@ -317,4 +313,28 @@ export default {
|
|||||||
/deep/ .uni-drawer__content {
|
/deep/ .uni-drawer__content {
|
||||||
width: 100vw !important;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -2,13 +2,8 @@
|
|||||||
<Cn-page :loading="loading" class="messageBox" style="padding-top: 10px">
|
<Cn-page :loading="loading" class="messageBox" style="padding-top: 10px">
|
||||||
<view slot="body" class="message">
|
<view slot="body" class="message">
|
||||||
<view class="tabsBox">
|
<view class="tabsBox">
|
||||||
<uni-segmented-control
|
<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#376cf3"
|
||||||
:current="current"
|
@clickItem="onClickItem" />
|
||||||
:values="items"
|
|
||||||
style-type="text"
|
|
||||||
active-color="#376cf3"
|
|
||||||
@clickItem="onClickItem"
|
|
||||||
/>
|
|
||||||
<!-- 角标 -->
|
<!-- 角标 -->
|
||||||
<view class="badge-container">
|
<view class="badge-container">
|
||||||
<span v-for="(item, index) in items" :key="index" class="badge">
|
<span v-for="(item, index) in items" :key="index" class="badge">
|
||||||
@@ -17,59 +12,28 @@
|
|||||||
</span>
|
</span>
|
||||||
</view>
|
</view>
|
||||||
<!-- 筛选条件 -->
|
<!-- 筛选条件 -->
|
||||||
<Cn-filterCriteria
|
<Cn-filterCriteria ref="cnFilterCriteria" :level="current === 0 ? 3 : current === 1 ? 3 : 2"
|
||||||
ref="cnFilterCriteria"
|
@select="select">
|
||||||
:level="current === 0 ? 3 : current === 1 ? 3 : 2"
|
<picker v-if="current === 0" @change="bindPickerChange" :value="sortIndex" :range="sortOptions">
|
||||||
@select="select"
|
<view class="nav-menu nav-menu1">
|
||||||
>
|
<view class="nav-text">
|
||||||
<picker
|
{{ sortOptions[sortIndex] }}排序
|
||||||
v-if="current === 0"
|
</view>
|
||||||
@change="bindPickerChange"
|
|
||||||
:value="sortIndex"
|
<uni-icons type="bottom" size="14"></uni-icons>
|
||||||
: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>
|
|
||||||
</view>
|
</view>
|
||||||
</picker>
|
</picker>
|
||||||
</Cn-filterCriteria>
|
</Cn-filterCriteria>
|
||||||
</view>
|
</view>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<Transient
|
<Transient ref="TransientRef" v-if="current === 0" :navHeight="navHeight" :selectValue="selectValue"
|
||||||
ref="TransientRef"
|
:sortIndex="sortIndex" @getDevCount="getDevCount" />
|
||||||
v-if="current === 0"
|
<SteadyState ref="SteadyStateRef" v-if="current === 1" :navHeight="navHeight" :selectValue="selectValue"
|
||||||
:navHeight="navHeight"
|
@getDevCount="getDevCount" />
|
||||||
:selectValue="selectValue"
|
<Alarm ref="AlarmRef" v-if="current === 2" :navHeight="navHeight" :selectValue="selectValue"
|
||||||
@getDevCount="getDevCount"
|
@getDevCount="getDevCount" />
|
||||||
/>
|
<Run ref="RunRef" v-if="current === 3" :navHeight="navHeight" :selectValue="selectValue"
|
||||||
<SteadyState
|
@getDevCount="getDevCount" />
|
||||||
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>
|
||||||
</view>
|
</view>
|
||||||
</Cn-page>
|
</Cn-page>
|
||||||
@@ -100,7 +64,7 @@ export default {
|
|||||||
sortOptions: ['发生时间', '暂降深度', '持续时间'],
|
sortOptions: ['发生时间', '暂降深度', '持续时间'],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {},
|
onLoad() { },
|
||||||
mounted() {
|
mounted() {
|
||||||
this.setHeight()
|
this.setHeight()
|
||||||
},
|
},
|
||||||
@@ -204,9 +168,11 @@ export default {
|
|||||||
},
|
},
|
||||||
bindPickerChange(e) {
|
bindPickerChange(e) {
|
||||||
this.sortIndex = e.detail.value
|
this.sortIndex = e.detail.value
|
||||||
if (this.$refs.TransientRef) {
|
setTimeout(() => {
|
||||||
this.$refs.TransientRef.setSort(this.sortIndex)
|
if (this.$refs.TransientRef) {
|
||||||
}
|
this.$refs.TransientRef.init()
|
||||||
|
}
|
||||||
|
}, 0)
|
||||||
},
|
},
|
||||||
// 设置角标
|
// 设置角标
|
||||||
getDevCount() {
|
getDevCount() {
|
||||||
@@ -275,13 +241,16 @@ export default {
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.messageBox {
|
.messageBox {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
/deep/.tabsBox {
|
/deep/.tabsBox {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
.segmented-control {
|
.segmented-control {
|
||||||
// height: 40px;
|
// height: 40px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-bottom: 1px solid #cccccc70;
|
border-bottom: 1px solid #cccccc70;
|
||||||
|
|
||||||
.segmented-control__item {
|
.segmented-control__item {
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
@@ -292,10 +261,12 @@ export default {
|
|||||||
font-size: 30rpx !important;
|
font-size: 30rpx !important;
|
||||||
color: rgb(96, 98, 102);
|
color: rgb(96, 98, 102);
|
||||||
}
|
}
|
||||||
|
|
||||||
.segmented-control__item--text {
|
.segmented-control__item--text {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: 0 0 5rpx;
|
padding: 0 0 5rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose {
|
.choose {
|
||||||
// padding: 20rpx;
|
// padding: 20rpx;
|
||||||
// display: flex;
|
// display: flex;
|
||||||
@@ -309,16 +280,20 @@ export default {
|
|||||||
width: 90%;
|
width: 90%;
|
||||||
margin: 20rpx auto;
|
margin: 20rpx auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-container {
|
.badge-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -10rpx; /* 徽章向上偏移,与控件重叠 */
|
top: -10rpx;
|
||||||
|
/* 徽章向上偏移,与控件重叠 */
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0;
|
height: 0;
|
||||||
pointer-events: none; /* 确保徽章不干扰点击事件 */
|
pointer-events: none;
|
||||||
|
/* 确保徽章不干扰点击事件 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .uni-badge--error {
|
/deep/ .uni-badge--error {
|
||||||
background-color: #ff3b30;
|
background-color: #ff3b30;
|
||||||
}
|
}
|
||||||
@@ -326,6 +301,7 @@ export default {
|
|||||||
.badge {
|
.badge {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.uni-badge--x {
|
.uni-badge--x {
|
||||||
left: 70rpx;
|
left: 70rpx;
|
||||||
}
|
}
|
||||||
@@ -339,4 +315,32 @@ export default {
|
|||||||
white-space: nowrap;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -52,6 +52,7 @@
|
|||||||
<view class="mine-nav-label">项目管理</view>
|
<view class="mine-nav-label">项目管理</view>
|
||||||
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
|
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="mine-nav" @click="jump('feedback')" v-if="userInfo.authorities !== 'tourist'">
|
<view class="mine-nav" @click="jump('feedback')" v-if="userInfo.authorities !== 'tourist'">
|
||||||
<image mode="aspectFill" class="mine-nav-icon" src="/static/feedback.png" />
|
<image mode="aspectFill" class="mine-nav-icon" src="/static/feedback.png" />
|
||||||
<view class="mine-nav-label">反馈列表</view>
|
<view class="mine-nav-label">反馈列表</view>
|
||||||
@@ -81,12 +82,11 @@
|
|||||||
<view class="mine-nav-label">关注工程配置</view>
|
<view class="mine-nav-label">关注工程配置</view>
|
||||||
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
|
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
<view class="mine-nav" @click="jump('transientSetting')" v-if="userInfo.authorities !== 'tourist'">
|
<!-- <view class="mine-nav" @click="jump('transientSetting')" v-if="userInfo.authorities !== 'tourist'">
|
||||||
<!-- 调试内容配置 serverSetting-->
|
|
||||||
<image mode="aspectFill" class="mine-nav-icon" src="/static/tongji.png" />
|
<image mode="aspectFill" class="mine-nav-icon" src="/static/tongji.png" />
|
||||||
<view class="mine-nav-label">暂态统计配置</view>
|
<view class="mine-nav-label">暂态统计配置</view>
|
||||||
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
|
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
|
||||||
</view>
|
</view> -->
|
||||||
<view class="mine-nav" @click="jump('setup')" style="border-bottom: none">
|
<view class="mine-nav" @click="jump('setup')" style="border-bottom: none">
|
||||||
<image mode="aspectFill" class="mine-nav-icon" src="/static/setup.png" />
|
<image mode="aspectFill" class="mine-nav-icon" src="/static/setup.png" />
|
||||||
<view class="mine-nav-label">设置</view>
|
<view class="mine-nav-label">设置</view>
|
||||||
|
|||||||
@@ -3,23 +3,12 @@
|
|||||||
<!-- 运行告警 -->
|
<!-- 运行告警 -->
|
||||||
|
|
||||||
<!-- 卡片 -->
|
<!-- 卡片 -->
|
||||||
<scroll-view
|
<scroll-view scroll-y="true" @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower"
|
||||||
scroll-y="true"
|
:refresher-triggered="triggered" refresher-enabled="true" class="event-list"
|
||||||
@refresherrefresh="refresherrefresh"
|
:style="{ height: 'calc(100vh - ' + (navHeight + 10) + 'px)', overflow: 'auto' }">
|
||||||
@scrolltolower="scrolltolower"
|
|
||||||
:refresher-triggered="triggered"
|
|
||||||
refresher-enabled="true"
|
|
||||||
class="event-list"
|
|
||||||
:style="{ height: 'calc(100vh - ' + (navHeight + 10) + 'px)', overflow: 'auto' }"
|
|
||||||
>
|
|
||||||
<!-- 循环渲染事件项 -->
|
<!-- 循环渲染事件项 -->
|
||||||
<uni-card
|
<uni-card class="event-item boxClick" :class="item.type" v-for="(item, index) in this.store.data"
|
||||||
class="event-item boxClick"
|
:key="index" @click="jump(item)">
|
||||||
:class="item.type"
|
|
||||||
v-for="(item, index) in this.store.data"
|
|
||||||
:key="index"
|
|
||||||
@click="jump(item)"
|
|
||||||
>
|
|
||||||
<!-- 头部:图标 + 信息 + 操作 -->
|
<!-- 头部:图标 + 信息 + 操作 -->
|
||||||
<view class="event-header">
|
<view class="event-header">
|
||||||
<view class="event-icon">
|
<view class="event-icon">
|
||||||
@@ -39,8 +28,9 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="event-desc">
|
<view class="event-desc">
|
||||||
<text>告警终端总数:{{ item.warnNums }}台</text>
|
<text>告警终端总数:{{ item.warnNums }}台</text>
|
||||||
<text>质量指标告警终端数:{{ item.interruptCounts }}次</text>
|
<text v-if="item.onlineRateIsWarn ">在线率偏低</text>
|
||||||
<text>事件触发告警终端数:{{ item.warnCounts }}次</text>
|
<text v-if="item.integrityIsWarn">完整性偏低</text>
|
||||||
|
<text v-if="item.warnCounts > 0">事件触发终端告警:{{ item.warnCounts }}次</text>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -52,10 +42,8 @@
|
|||||||
<text> 告警终端总数{{ item.warnNums }}台 </text>
|
<text> 告警终端总数{{ item.warnNums }}台 </text>
|
||||||
</view> -->
|
</view> -->
|
||||||
</uni-card>
|
</uni-card>
|
||||||
<uni-load-more
|
<uni-load-more v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
||||||
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
:status="store.status"></uni-load-more>
|
||||||
:status="store.status"
|
|
||||||
></uni-load-more>
|
|
||||||
<Cn-empty v-else style="top: 20%"></Cn-empty>
|
<Cn-empty v-else style="top: 20%"></Cn-empty>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
@@ -102,8 +90,9 @@ export default {
|
|||||||
},
|
},
|
||||||
jump(item) {
|
jump(item) {
|
||||||
let str = JSON.stringify(item).replace(/%/g, '百分比')
|
let str = JSON.stringify(item).replace(/%/g, '百分比')
|
||||||
item.status = '1'
|
|
||||||
uni.navigateTo({ url: '/pages/message1/comp/alarmDetails?detail=' + encodeURIComponent(str) })
|
uni.navigateTo({ url: '/pages/message1/comp/alarmDetails?detail=' + encodeURIComponent(str) })
|
||||||
|
item.isRead = 1
|
||||||
|
|
||||||
},
|
},
|
||||||
// 下拉
|
// 下拉
|
||||||
refresherrefresh() {
|
refresherrefresh() {
|
||||||
@@ -138,6 +127,7 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import './index.scss';
|
@import './index.scss';
|
||||||
|
|
||||||
/* 列表容器 */
|
/* 列表容器 */
|
||||||
.event-list {
|
.event-list {
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
|
|||||||
@@ -225,7 +225,7 @@ export default {
|
|||||||
// 点击查看详情
|
// 点击查看详情
|
||||||
let item = params.value[3]
|
let item = params.value[3]
|
||||||
let str = JSON.stringify(item).replace(/%/g, '百分比')
|
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) })
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -217,7 +217,7 @@ export default {
|
|||||||
// 点击查看详情
|
// 点击查看详情
|
||||||
let item = params.value[3]
|
let item = params.value[3]
|
||||||
let str = JSON.stringify(item).replace(/%/g, '百分比')
|
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) })
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -13,10 +13,8 @@
|
|||||||
<uni-card class="event-item" :class="item.type" v-for="(item, index) in list" :key="index">
|
<uni-card class="event-item" :class="item.type" v-for="(item, index) in list" :key="index">
|
||||||
<!-- 头部:图标 + 信息 + 操作 -->
|
<!-- 头部:图标 + 信息 + 操作 -->
|
||||||
<view class="event-header">
|
<view class="event-header">
|
||||||
<view
|
<view class="event-icon"
|
||||||
class="event-icon"
|
:class="item.devType == 'Direct_Connected_Device' ? 'zl-bgc' : 'jc-bgc'">
|
||||||
:class="item.devType == 'Direct_Connected_Device' ? 'zl-bgc' : 'jc-bgc'"
|
|
||||||
>
|
|
||||||
<!-- 动态图标:根据类型切换 -->
|
<!-- 动态图标:根据类型切换 -->
|
||||||
<!-- <uni-icons
|
<!-- <uni-icons
|
||||||
custom-prefix="iconfont"
|
custom-prefix="iconfont"
|
||||||
@@ -25,46 +23,55 @@
|
|||||||
color="#FF0000"
|
color="#FF0000"
|
||||||
></uni-icons> -->
|
></uni-icons> -->
|
||||||
<!-- <Cn-icon-transient :name="`运行告警`" /> -->
|
<!-- <Cn-icon-transient :name="`运行告警`" /> -->
|
||||||
<Cn-icon-transient
|
<Cn-icon-transient :name="item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备'" />
|
||||||
:name="item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备'"
|
|
||||||
/>
|
|
||||||
<view class="badge1" v-if="item.status == 0"> </view>
|
<view class="badge1" v-if="item.status == 0"> </view>
|
||||||
</view>
|
</view>
|
||||||
<view class="event-info">
|
<view class="event-info">
|
||||||
<view class="event-title">
|
<view class="event-title">
|
||||||
<text class="event-id">{{ item.devName }}</text>
|
<text class="event-id">{{ item.devName }}</text>
|
||||||
<text
|
<text class="event-tag"
|
||||||
class="event-tag"
|
:class="item.devType == 'Direct_Connected_Device' ? 'zl-tag' : 'jc-tag'">{{
|
||||||
:class="item.devType == 'Direct_Connected_Device' ? 'zl-tag' : 'jc-tag'"
|
item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备' }}</text>
|
||||||
>{{ item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备' }}</text
|
|
||||||
>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="event-desc">
|
<view class="event-desc">
|
||||||
<text>工程名称:{{ item.engineeringName }}</text>
|
<text>工程名称:{{ item.engineeringName }}</text>
|
||||||
<text>项目名称:{{ item.projectName }}</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> -->
|
<!-- <text>事件时间:{{ item.startTime }}</text> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 详情区域 -->
|
<!-- 详情区域 -->
|
||||||
<view class="event-detail">
|
<view class="event-detail">
|
||||||
<view v-if="item.interruptCounts">
|
<view v-if="item.dataDetails.onlineRate.isAbnormal">
|
||||||
通讯中断 {{ item.interruptCounts }} 次,详情如下:
|
<text>在线率:
|
||||||
<view class="textBox">
|
{{item.dataDetails.onlineRate.value }}%
|
||||||
<view
|
</text>
|
||||||
v-for="date in String(item.interruptDetails || '').split(',')"
|
|
||||||
class="textBox mb5"
|
|
||||||
>{{ date }}</view
|
|
||||||
></view
|
|
||||||
>
|
|
||||||
</view>
|
</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 }} 次,详情如下:
|
终端告警 {{ item.warnCounts }} 次,详情如下:
|
||||||
<view class="textBox">
|
<view class="textBox">
|
||||||
<view v-for="val in item.warnDetails" class="textBox mb5">
|
<view v-for="val in item.warnDetails" class="textBox mb5">
|
||||||
{{ val.warnEventTime + '发生' + val.warnEventDesc }}
|
{{ val.warnEventTime + '发生' + val.warnEventDesc }}
|
||||||
</view></view
|
</view>
|
||||||
>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</uni-card>
|
</uni-card>
|
||||||
@@ -97,6 +104,11 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
init() {
|
||||||
queryAlarmDetail({
|
queryAlarmDetail({
|
||||||
devList: this.detail.devIds,
|
devList: this.detail.devIds,
|
||||||
@@ -115,6 +127,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../index.scss';
|
@import '../index.scss';
|
||||||
|
|
||||||
.detail {
|
.detail {
|
||||||
padding: 20rpx 0;
|
padding: 20rpx 0;
|
||||||
|
|
||||||
@@ -130,60 +143,102 @@ export default {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapseTop {
|
.collapseTop {
|
||||||
padding: 10rpx 0;
|
padding: 10rpx 0;
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.frequency {
|
.frequency {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
// color: #666666;
|
// color: #666666;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.textBox {
|
.textBox {
|
||||||
// border-bottom: 1px solid #eee;
|
// border-bottom: 1px solid #eee;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #666666;
|
color: #666666;
|
||||||
text-indent: 2em;
|
text-indent: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.event-list {
|
.event-list {
|
||||||
// background: #fff;
|
// background: #fff;
|
||||||
padding-bottom: 10rpx;
|
padding-bottom: 10rpx;
|
||||||
|
|
||||||
// .event-icon {
|
// .event-icon {
|
||||||
// background-color: #376cf320;
|
// background-color: #376cf320;
|
||||||
// }
|
// }
|
||||||
.zl-bgc {
|
.zl-bgc {
|
||||||
background-color: #376cf320;
|
background-color: #376cf320;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jc-bgc {
|
.jc-bgc {
|
||||||
background-color: #376cf320;
|
background-color: #376cf320;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zl-tag {
|
.zl-tag {
|
||||||
background-color: #007aff20;
|
background-color: #007aff20;
|
||||||
color: #007aff;
|
color: #007aff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jc-tag {
|
.jc-tag {
|
||||||
background-color: #007aff20;
|
background-color: #007aff20;
|
||||||
color: #007aff;
|
color: #007aff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .uni-collapse-item__title-box {
|
/deep/ .uni-collapse-item__title-box {
|
||||||
padding: 0 15px 0 0;
|
padding: 0 15px 0 0;
|
||||||
height: 56rpx;
|
height: 56rpx;
|
||||||
line-height: 56rpx;
|
line-height: 56rpx;
|
||||||
font-size: 26rpx !important;
|
font-size: 26rpx !important;
|
||||||
color: #666666;
|
color: #666666;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 26rpx !important;
|
font-size: 26rpx !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.textBox {
|
.textBox {
|
||||||
max-height: 120rpx;
|
max-height: 120rpx;
|
||||||
overflow-y: auto;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -13,13 +13,11 @@
|
|||||||
<view class="mb5"> 监测点名称:{{ detail.lineName }}</view>
|
<view class="mb5"> 监测点名称:{{ detail.lineName }}</view>
|
||||||
<view class="mb5" style="display: flex">
|
<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>
|
||||||
<view class="detail-content">
|
<view class="detail-content">
|
||||||
<view class="detail-content-title mb20"
|
<view class="detail-content-title mb20">指标越限详情<text class="prompt">(仅显示最严重的10组数据)</text></view>
|
||||||
>指标越限详情<text class="prompt">(仅显示最严重的10组数据)</text></view
|
|
||||||
>
|
|
||||||
|
|
||||||
<uni-collapse accordion v-model="collapseValue">
|
<uni-collapse accordion v-model="collapseValue">
|
||||||
<uni-collapse-item :title="item.targetName" v-for="item in list">
|
<uni-collapse-item :title="item.targetName" v-for="item in list">
|
||||||
@@ -35,7 +33,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="table-row" v-for="value in item.harmDetailList">
|
<view class="table-row" v-for="value in item.harmDetailList">
|
||||||
<text>{{ value.statisticsTime }}</text>
|
<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.dataA }}</text>
|
||||||
<text v-if="!value.hasT">{{ value.dataB }}</text>
|
<text v-if="!value.hasT">{{ value.dataB }}</text>
|
||||||
<text v-if="!value.hasT">{{ value.dataC }}</text>
|
<text v-if="!value.hasT">{{ value.dataC }}</text>
|
||||||
@@ -105,6 +103,7 @@ export default {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.limit {
|
.limit {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -112,46 +111,58 @@ export default {
|
|||||||
width: 450rpx;
|
width: 450rpx;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prompt {
|
.prompt {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #111;
|
color: #111;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-table {
|
.data-table {
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
.table-header,
|
.table-header,
|
||||||
.table-row {
|
.table-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 20rpx 0rpx;
|
padding: 15rpx 0rpx;
|
||||||
|
height: 20px;
|
||||||
border-bottom: 1rpx solid #eee;
|
border-bottom: 1rpx solid #eee;
|
||||||
|
|
||||||
text {
|
text {
|
||||||
width: 100rpx;
|
width: 100rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
|
|
||||||
// color: #333;
|
// color: #333;
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-header {
|
.table-header {
|
||||||
padding: 0rpx;
|
padding: 0rpx;
|
||||||
padding-bottom: 10rpx;
|
padding-bottom: 10rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .uni-collapse-item__title-text {
|
/deep/ .uni-collapse-item__title-text {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.details {
|
.details {
|
||||||
max-height: 70px;
|
max-height: 70px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|||||||
@@ -16,42 +16,28 @@
|
|||||||
<view class="mb5" v-if="detail.evtParamPhase"> 相别:{{ detail.evtParamPhase }}</view>
|
<view class="mb5" v-if="detail.evtParamPhase"> 相别:{{ detail.evtParamPhase }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="detail-tabs">
|
<view class="detail-tabs">
|
||||||
<uni-segmented-control
|
<uni-segmented-control :current="detailTab" active-color="#376cf3" :values="['波形图', 'ITIC', 'F47']"
|
||||||
:current="detailTab"
|
@clickItem="onDetailTabChange" />
|
||||||
active-color="#376cf3"
|
|
||||||
:values="['波形图', 'ITIC', 'F47']"
|
|
||||||
@clickItem="onDetailTabChange"
|
|
||||||
/>
|
|
||||||
</view>
|
</view>
|
||||||
<view v-if="detailTab == 0">
|
<view v-if="detailTab == 0">
|
||||||
<view class="detail-content">
|
<view class="detail-content">
|
||||||
<view class="detail-content-title mb20">瞬时波形图</view>
|
<view class="detail-content-title mb20">瞬时波形图</view>
|
||||||
<image
|
<image style="width: 100%" :src="detail.instantPics" mode="widthFix" v-if="detail.instantPics"
|
||||||
style="width: 100%"
|
@click="previewImage(detail.instantPics)" />
|
||||||
:src="detail.instantPics"
|
|
||||||
mode="widthFix"
|
|
||||||
v-if="detail.instantPics"
|
|
||||||
@click="previewImage(detail.instantPics)"
|
|
||||||
/>
|
|
||||||
<text v-else>暂无</text>
|
<text v-else>暂无</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="detail-content">
|
<view class="detail-content">
|
||||||
<view class="detail-content-title mb20">RMS波形图</view>
|
<view class="detail-content-title mb20">RMS波形图</view>
|
||||||
<image
|
<image style="width: 100%" :src="detail.rmsPics" mode="widthFix" v-if="detail.rmsPics"
|
||||||
style="width: 100%"
|
@click="previewImage(detail.rmsPics)" />
|
||||||
:src="detail.rmsPics"
|
|
||||||
mode="widthFix"
|
|
||||||
v-if="detail.rmsPics"
|
|
||||||
@click="previewImage(detail.rmsPics)"
|
|
||||||
/>
|
|
||||||
<text v-else>暂无</text>
|
<text v-else>暂无</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="detailTab == 1" class="chart-wrapper">
|
<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>
|
||||||
<view v-if="detailTab == 2" class="chart-wrapper">
|
<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>
|
||||||
</view>
|
</view>
|
||||||
</Cn-page>
|
</Cn-page>
|
||||||
@@ -143,4 +129,10 @@ export default {
|
|||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.segmented-control {
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 24rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -4,8 +4,8 @@
|
|||||||
<view class="transientBox">
|
<view class="transientBox">
|
||||||
<view class="statistics pd20">
|
<view class="statistics pd20">
|
||||||
<view
|
<view
|
||||||
class="box"
|
class="box boxClick"
|
||||||
:class="{ boxClick: item.label == filterValue }"
|
:class="{ boxClick1: item.label == filterValue }"
|
||||||
v-for="item in list"
|
v-for="item in list"
|
||||||
@click="
|
@click="
|
||||||
filterValue = item.label
|
filterValue = item.label
|
||||||
@@ -235,7 +235,7 @@ export default {
|
|||||||
|
|
||||||
jump(item) {
|
jump(item) {
|
||||||
let str = JSON.stringify(item).replace(/%/g, '百分比')
|
let str = JSON.stringify(item).replace(/%/g, '百分比')
|
||||||
item.status = '1'
|
item.isRead = '1'
|
||||||
|
|
||||||
uni.navigateTo({ url: '/pages/message1/comp/steadyStateDetails?detail=' + encodeURIComponent(str) })
|
uni.navigateTo({ url: '/pages/message1/comp/steadyStateDetails?detail=' + encodeURIComponent(str) })
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
<text class="label">{{ item.label }}</text>
|
<text class="label">{{ item.label }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="smallLabel"> </view>
|
<!-- <view class="smallLabel"> </view> -->
|
||||||
</view>
|
</view>
|
||||||
<!-- 卡片 -->
|
<!-- 卡片 -->
|
||||||
<scroll-view
|
<scroll-view
|
||||||
@@ -112,6 +112,10 @@ export default {
|
|||||||
type: Object,
|
type: Object,
|
||||||
// default: () => {},
|
// default: () => {},
|
||||||
},
|
},
|
||||||
|
sortIndex: {
|
||||||
|
type: [Number,String],
|
||||||
|
// default: () => {},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mixins: [list],
|
mixins: [list],
|
||||||
data() {
|
data() {
|
||||||
@@ -150,7 +154,7 @@ export default {
|
|||||||
this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
|
this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
|
||||||
this.store.params.type = 0
|
this.store.params.type = 0
|
||||||
// this.store.params.pageSize = 10000
|
// 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.engineeringid = this.selectValue.engineeringId
|
||||||
this.store.params.projectId = this.selectValue.projectId
|
this.store.params.projectId = this.selectValue.projectId
|
||||||
this.store.params.deviceId = this.selectValue.deviceId
|
this.store.params.deviceId = this.selectValue.deviceId
|
||||||
@@ -224,7 +228,9 @@ export default {
|
|||||||
uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
|
uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
|
||||||
},
|
},
|
||||||
setSort(index) {
|
setSort(index) {
|
||||||
this.sort = index
|
console.log(123,this.sortIndex);
|
||||||
|
|
||||||
|
// this.sort = index
|
||||||
this.init()
|
this.init()
|
||||||
},
|
},
|
||||||
// 下拉
|
// 下拉
|
||||||
|
|||||||
@@ -1,361 +1,350 @@
|
|||||||
<template>
|
<template>
|
||||||
<Cn-page :loading="loading" noPadding>
|
<Cn-page :loading="loading" noPadding>
|
||||||
<view slot="body">
|
<view slot="body">
|
||||||
<view class="detail">
|
<view class="detail">
|
||||||
<view class="header">
|
<view class="header">
|
||||||
<view class="header-title"
|
<view class="header-title"
|
||||||
>{{ project.name }}
|
>{{ project.name }}
|
||||||
<!-- <view class="header-title-extra">用能</view> -->
|
<!-- <view class="header-title-extra">用能</view> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="header-des">项目描述:{{ project.description }}</view>
|
<view class="header-des">项目描述:{{ project.description }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="nav">
|
<view class="nav">
|
||||||
<view
|
<view
|
||||||
class="nav-menu"
|
class="nav-menu"
|
||||||
:class="{ 'nav-menu-active': navMenuActive == index }"
|
:class="{ 'nav-menu-active': navMenuActive == index }"
|
||||||
v-for="(item, index) in navMenuList"
|
v-for="(item, index) in navMenuList"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="navMenuClick(index)"
|
@click="navMenuClick(index)"
|
||||||
>{{ item.text }}
|
>{{ item.text }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="content device" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
|
<view class="content device" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
|
||||||
<view v-show="navMenuActive == 0">
|
<view v-show="navMenuActive == 0">
|
||||||
<!-- <uni-card
|
<!-- <uni-card
|
||||||
:title="item.equipmentName"
|
:title="item.equipmentName"
|
||||||
:sub-title="'创建时间:' + item.createTime"
|
:sub-title="'创建时间:' + item.createTime"
|
||||||
:extra="item.mac"
|
:extra="item.mac"
|
||||||
v-for="item in store.data"
|
v-for="item in store.data"
|
||||||
:key="item.equipmentId"
|
:key="item.equipmentId"
|
||||||
@click="goDevice(item)"
|
@click="goDevice(item)"
|
||||||
padding="0"
|
padding="0"
|
||||||
:thumbnail="deviceIcon(item.runStatus)"
|
:thumbnail="deviceIcon(item.runStatus)"
|
||||||
>
|
>
|
||||||
</uni-card> -->
|
</uni-card> -->
|
||||||
<Cn-device-card v-for="(item, index) in store.data" :device="item" :key="index">
|
<Cn-device-card v-for="(item, index) in store.data" :device="item" :key="index">
|
||||||
</Cn-device-card>
|
<template v-slot:title>
|
||||||
<Cn-empty v-if="store.empty"></Cn-empty>
|
|
||||||
<uni-load-more
|
<view class="star-icon">
|
||||||
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
<uni-icons type="search" size="25" color="#376cf3"></uni-icons>
|
||||||
:status="store.status"
|
</view>
|
||||||
></uni-load-more>
|
</template>
|
||||||
</view>
|
</Cn-device-card>
|
||||||
<!-- <view style="padding: 0 20rpx" v-show="navMenuActive == 1">-->
|
<Cn-empty v-if="store.empty"></Cn-empty>
|
||||||
<!-- <uni-list>-->
|
<uni-load-more
|
||||||
<!-- <uni-list-item-->
|
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
||||||
<!-- title="张三"-->
|
:status="store.status"
|
||||||
<!-- note="2023-02-10 14:55"-->
|
></uni-load-more>
|
||||||
<!-- thumb="/static/head.png"-->
|
</view>
|
||||||
<!-- thumb-size="lg"-->
|
|
||||||
<!-- >-->
|
<view style="padding: 0 20rpx" v-show="navMenuActive == 1">
|
||||||
<!-- </uni-list-item>-->
|
<!-- <image
|
||||||
<!-- <uni-list-item-->
|
class="gplot gplot-box"
|
||||||
<!-- title="李四"-->
|
mode="aspectFill"
|
||||||
<!-- note="2023-02-10 14:55"-->
|
:src="item.filePath"
|
||||||
<!-- thumb="/static/head.png"-->
|
v-for="(item, key) in topologyDiagramPage"
|
||||||
<!-- thumb-size="lg"-->
|
:key="key"
|
||||||
<!-- >-->
|
/> -->
|
||||||
<!-- </uni-list-item>-->
|
<uni-file-picker
|
||||||
<!-- </uni-list>-->
|
ref="filePicker"
|
||||||
<!-- </view>-->
|
v-model="topologyDiagramPage"
|
||||||
<view style="padding: 0 20rpx" v-show="navMenuActive == 1">
|
:sourceType="['album']"
|
||||||
<!-- <image
|
:auto-upload="false"
|
||||||
class="gplot gplot-box"
|
@select="addAppTopologyDiagram"
|
||||||
mode="aspectFill"
|
@delete="deleteTopologyDiagramPage"
|
||||||
:src="item.filePath"
|
readonly
|
||||||
v-for="(item, key) in topologyDiagramPage"
|
></uni-file-picker>
|
||||||
:key="key"
|
</view>
|
||||||
/> -->
|
</view>
|
||||||
<uni-file-picker
|
<uni-fab
|
||||||
ref="filePicker"
|
ref="fab"
|
||||||
v-model="topologyDiagramPage"
|
direction="vertical"
|
||||||
:sourceType="['album']"
|
horizontal="right"
|
||||||
:auto-upload="false"
|
vertical="bottom"
|
||||||
@select="addAppTopologyDiagram"
|
:content="content"
|
||||||
@delete="deleteTopologyDiagramPage"
|
@trigger="trigger"
|
||||||
readonly
|
v-if="content.length"
|
||||||
></uni-file-picker>
|
/>
|
||||||
</view>
|
<uni-popup ref="share" type="share" background-color="#fff">
|
||||||
</view>
|
<uni-popup-share title="分享到"></uni-popup-share>
|
||||||
<uni-fab
|
</uni-popup>
|
||||||
ref="fab"
|
</view>
|
||||||
direction="vertical"
|
</view>
|
||||||
horizontal="right"
|
</Cn-page>
|
||||||
vertical="bottom"
|
</template>
|
||||||
:content="content"
|
<script>
|
||||||
@trigger="trigger"
|
import list from '../../common/js/list'
|
||||||
v-if="content.length"
|
import {
|
||||||
/>
|
queryTopologyDiagramPage,
|
||||||
<uni-popup ref="share" type="share" background-color="#fff">
|
deleteAppTopologyDiagram,
|
||||||
<uni-popup-share title="分享到"></uni-popup-share>
|
addAppTopologyDiagram,
|
||||||
</uni-popup>
|
deleteProject,
|
||||||
</view>
|
} from '../../common/api/project'
|
||||||
</view>
|
export default {
|
||||||
</Cn-page>
|
mixins: [list],
|
||||||
</template>
|
data() {
|
||||||
<script>
|
return {
|
||||||
import list from '../../common/js/list'
|
loading: false,
|
||||||
import {
|
project: {},
|
||||||
queryTopologyDiagramPage,
|
navMenuList: [
|
||||||
deleteAppTopologyDiagram,
|
{
|
||||||
addAppTopologyDiagram,
|
text: '设备',
|
||||||
deleteProject,
|
},
|
||||||
} from '../../common/api/project'
|
// {
|
||||||
export default {
|
// text: '用户',
|
||||||
mixins: [list],
|
// },
|
||||||
data() {
|
{
|
||||||
return {
|
text: '拓扑图',
|
||||||
loading: false,
|
},
|
||||||
project: {},
|
],
|
||||||
navMenuList: [
|
content: [],
|
||||||
{
|
navHeight: 0,
|
||||||
text: '设备',
|
navMenuActive: 0,
|
||||||
},
|
topologyDiagramPage: [],
|
||||||
// {
|
}
|
||||||
// text: '用户',
|
},
|
||||||
// },
|
methods: {
|
||||||
{
|
deviceIcon(e) {
|
||||||
text: '拓扑图',
|
let str = ''
|
||||||
},
|
switch (e) {
|
||||||
],
|
case 1:
|
||||||
content: [],
|
str = '/static/device_bad.png'
|
||||||
navHeight: 0,
|
break
|
||||||
navMenuActive: 0,
|
case 2:
|
||||||
topologyDiagramPage: [],
|
str = '/static/device.png'
|
||||||
}
|
break
|
||||||
},
|
default:
|
||||||
methods: {
|
str = '/static/device.png'
|
||||||
deviceIcon(e) {
|
break
|
||||||
let str = ''
|
}
|
||||||
switch (e) {
|
return str
|
||||||
case 1:
|
},
|
||||||
str = '/static/device_bad.png'
|
addAppTopologyDiagram(e) {
|
||||||
break
|
console.log(e)
|
||||||
case 2:
|
addAppTopologyDiagram(
|
||||||
str = '/static/device.png'
|
{
|
||||||
break
|
projectId: this.project.id,
|
||||||
default:
|
topologyDiagramName: e.tempFiles[0].name,
|
||||||
str = '/static/device.png'
|
},
|
||||||
break
|
e.tempFiles[0].path,
|
||||||
}
|
).then((res) => {
|
||||||
return str
|
console.log(res)
|
||||||
},
|
if (res.length > 1) {
|
||||||
addAppTopologyDiagram(e) {
|
const result = JSON.parse(res[1].data)
|
||||||
console.log(e)
|
console.log(result)
|
||||||
addAppTopologyDiagram(
|
if (result.code === 'A0000') {
|
||||||
{
|
this.topologyDiagramPage.push({
|
||||||
projectId: this.project.id,
|
name: result.name,
|
||||||
topologyDiagramName: e.tempFiles[0].name,
|
extname: 'img',
|
||||||
},
|
url: result.filePath,
|
||||||
e.tempFiles[0].path,
|
...result,
|
||||||
).then((res) => {
|
})
|
||||||
console.log(res)
|
} else {
|
||||||
if (res.length > 1) {
|
this.$refs.filePicker.clearFiles(this.topologyDiagramPage.length - 1)
|
||||||
const result = JSON.parse(res[1].data)
|
uni.showToast({
|
||||||
console.log(result)
|
title: result.message,
|
||||||
if (result.code === 'A0000') {
|
icon: 'none',
|
||||||
this.topologyDiagramPage.push({
|
})
|
||||||
name: result.name,
|
}
|
||||||
extname: 'img',
|
} else {
|
||||||
url: result.filePath,
|
uni.showToast({
|
||||||
...result,
|
title: '上传失败',
|
||||||
})
|
icon: 'none',
|
||||||
} else {
|
})
|
||||||
this.$refs.filePicker.clearFiles(this.topologyDiagramPage.length - 1)
|
this.$refs.filePicker.clearFiles(this.topologyDiagramPage.length - 1)
|
||||||
uni.showToast({
|
}
|
||||||
title: result.message,
|
})
|
||||||
icon: 'none',
|
},
|
||||||
})
|
deleteTopologyDiagramPage(e) {
|
||||||
}
|
console.log(e)
|
||||||
} else {
|
deleteAppTopologyDiagram(e.tempFile.id).then((res) => {
|
||||||
uni.showToast({
|
console.log(res)
|
||||||
title: '上传失败',
|
})
|
||||||
icon: 'none',
|
},
|
||||||
})
|
trigger(e) {
|
||||||
this.$refs.filePicker.clearFiles(this.topologyDiagramPage.length - 1)
|
console.log(this.$refs)
|
||||||
}
|
if (e.item.text == '移交') {
|
||||||
})
|
uni.navigateTo({
|
||||||
},
|
url: '/pages/project/transfer',
|
||||||
deleteTopologyDiagramPage(e) {
|
})
|
||||||
console.log(e)
|
} else if (e.item.text == '分享') {
|
||||||
deleteAppTopologyDiagram(e.tempFile.id).then((res) => {
|
this.$refs.share.open()
|
||||||
console.log(res)
|
} else if (e.item.text == '编辑') {
|
||||||
})
|
uni.navigateTo({
|
||||||
},
|
url: '/pages/project/new?project=' + encodeURIComponent(JSON.stringify(this.project)),
|
||||||
trigger(e) {
|
})
|
||||||
console.log(this.$refs)
|
} else if (e.item.text == '删除') {
|
||||||
if (e.item.text == '移交') {
|
uni.showModal({
|
||||||
uni.navigateTo({
|
title: '提示',
|
||||||
url: '/pages/project/transfer',
|
content: '删除项目后不可恢复,是否继续?',
|
||||||
})
|
success: (res) => {
|
||||||
} else if (e.item.text == '分享') {
|
if (res.confirm) {
|
||||||
this.$refs.share.open()
|
deleteProject(this.project.id).then((res) => {
|
||||||
} else if (e.item.text == '编辑') {
|
this.$util.toast('删除成功')
|
||||||
uni.navigateTo({
|
this.$util.refreshPrePage()
|
||||||
url: '/pages/project/new?project=' + encodeURIComponent(JSON.stringify(this.project)),
|
})
|
||||||
})
|
} else if (res.cancel) {
|
||||||
} else if (e.item.text == '删除') {
|
console.log('用户点击取消')
|
||||||
uni.showModal({
|
}
|
||||||
title: '提示',
|
},
|
||||||
content: '删除项目后不可恢复,是否继续?',
|
})
|
||||||
success: (res) => {
|
}
|
||||||
if (res.confirm) {
|
},
|
||||||
deleteProject(this.project.id).then((res) => {
|
navMenuClick(index) {
|
||||||
this.$util.toast('删除成功')
|
this.navMenuActive = index
|
||||||
this.$util.refreshPrePage()
|
},
|
||||||
})
|
goUserDetail() {
|
||||||
} else if (res.cancel) {
|
uni.navigateTo({
|
||||||
console.log('用户点击取消')
|
url: '/pages/mine/userDetail',
|
||||||
}
|
})
|
||||||
},
|
},
|
||||||
})
|
del() {
|
||||||
}
|
console.log('del')
|
||||||
},
|
uni.showModal({
|
||||||
navMenuClick(index) {
|
title: '提示',
|
||||||
this.navMenuActive = index
|
content: '确定要移除该成员吗?',
|
||||||
},
|
success: function (res) {
|
||||||
goUserDetail() {
|
if (res.confirm) {
|
||||||
uni.navigateTo({
|
console.log('用户点击确定')
|
||||||
url: '/pages/mine/userDetail',
|
} else if (res.cancel) {
|
||||||
})
|
console.log('用户点击取消')
|
||||||
},
|
}
|
||||||
del() {
|
},
|
||||||
console.log('del')
|
})
|
||||||
uni.showModal({
|
},
|
||||||
title: '提示',
|
goDevice(item) {
|
||||||
content: '确定要移除该成员吗?',
|
uni.navigateTo({
|
||||||
success: function (res) {
|
url: '/pages/device/APF/detail?id=' + item.equipmentId,
|
||||||
if (res.confirm) {
|
})
|
||||||
console.log('用户点击确定')
|
},
|
||||||
} else if (res.cancel) {
|
init() {
|
||||||
console.log('用户点击取消')
|
this.store = this.DataSource('/cs-device-boot/EquipmentDelivery/queryEquipmentByProject')
|
||||||
}
|
this.store.params.projectId = this.project.id
|
||||||
},
|
this.store.reload()
|
||||||
})
|
|
||||||
},
|
queryTopologyDiagramPage({
|
||||||
goDevice(item) {
|
projectId: this.project.id,
|
||||||
uni.navigateTo({
|
}).then((res) => {
|
||||||
url: '/pages/device/APF/detail?id=' + item.equipmentId,
|
console.log(res)
|
||||||
})
|
this.topologyDiagramPage = res.data.records.map((item) => {
|
||||||
},
|
return {
|
||||||
init() {
|
name: item.name,
|
||||||
this.store = this.DataSource('/cs-device-boot/EquipmentDelivery/queryEquipmentByProject')
|
extname: 'img',
|
||||||
this.store.params.projectId = this.project.id
|
url: this.$config.static + item.filePath,
|
||||||
this.store.reload()
|
...item,
|
||||||
|
}
|
||||||
queryTopologyDiagramPage({
|
})
|
||||||
projectId: this.project.id,
|
})
|
||||||
}).then((res) => {
|
},
|
||||||
console.log(res)
|
},
|
||||||
this.topologyDiagramPage = res.data.records.map((item) => {
|
onLoad(option) {
|
||||||
return {
|
let userInfo = uni.getStorageSync('userInfo')
|
||||||
name: item.name,
|
// this.content.push({
|
||||||
extname: 'img',
|
// iconPath: '/static/share.png',
|
||||||
url: this.$config.static + item.filePath,
|
// text: '编辑',
|
||||||
...item,
|
// })
|
||||||
}
|
// this.content.push({
|
||||||
})
|
// iconPath: '/static/delate.png',
|
||||||
})
|
// text: '删除',
|
||||||
},
|
// })
|
||||||
},
|
// this.content.push({
|
||||||
onLoad(option) {
|
// iconPath: '/static/transfer.png',
|
||||||
let userInfo = uni.getStorageSync('userInfo')
|
// text: '移交',
|
||||||
// this.content.push({
|
// })
|
||||||
// iconPath: '/static/share.png',
|
// this.content.push({
|
||||||
// text: '编辑',
|
// iconPath: '/static/share.png',
|
||||||
// })
|
// text: '分享',
|
||||||
// this.content.push({
|
// })
|
||||||
// iconPath: '/static/delate.png',
|
if (userInfo.authorities == 'engineering_user' || userInfo.authorities == 'app_vip_user') {
|
||||||
// text: '删除',
|
this.content.push(
|
||||||
// })
|
{
|
||||||
// this.content.push({
|
iconPath: '/static/share.png',
|
||||||
// iconPath: '/static/transfer.png',
|
text: '编辑',
|
||||||
// text: '移交',
|
},
|
||||||
// })
|
{
|
||||||
// this.content.push({
|
iconPath: '/static/delate.png',
|
||||||
// iconPath: '/static/share.png',
|
text: '删除',
|
||||||
// text: '分享',
|
},
|
||||||
// })
|
)
|
||||||
if (userInfo.authorities == 'engineering_user' || userInfo.authorities == 'app_vip_user') {
|
}
|
||||||
this.content.push(
|
setTimeout(() => {
|
||||||
{
|
// 获取nav高度
|
||||||
iconPath: '/static/share.png',
|
uni.createSelectorQuery()
|
||||||
text: '编辑',
|
.select('.nav')
|
||||||
},
|
.boundingClientRect((rect) => {
|
||||||
{
|
this.navHeight = rect.height
|
||||||
iconPath: '/static/delate.png',
|
})
|
||||||
text: '删除',
|
.exec()
|
||||||
},
|
}, 1000)
|
||||||
)
|
console.log(option.project)
|
||||||
}
|
this.project = JSON.parse(decodeURIComponent(option.project))
|
||||||
setTimeout(() => {
|
this.project.topologyDiagramPaths.forEach((item) => {
|
||||||
// 获取nav高度
|
item.filePath = this.$config.static + item.filePath
|
||||||
uni.createSelectorQuery()
|
})
|
||||||
.select('.nav')
|
this.init()
|
||||||
.boundingClientRect((rect) => {
|
// uni.setNavigationBarTitle({ title: this.project })
|
||||||
this.navHeight = rect.height
|
},
|
||||||
})
|
}
|
||||||
.exec()
|
</script>
|
||||||
}, 1000)
|
<style lang="scss">
|
||||||
console.log(option.project)
|
.detail {
|
||||||
this.project = JSON.parse(decodeURIComponent(option.project))
|
.content {
|
||||||
this.project.topologyDiagramPaths.forEach((item) => {
|
box-sizing: border-box;
|
||||||
item.filePath = this.$config.static + item.filePath
|
padding-bottom: 20rpx;
|
||||||
})
|
}
|
||||||
this.init()
|
|
||||||
// uni.setNavigationBarTitle({ title: this.project })
|
.header {
|
||||||
},
|
padding: 20rpx 20rpx 0;
|
||||||
}
|
|
||||||
</script>
|
.header-title {
|
||||||
<style lang="scss">
|
display: flex;
|
||||||
.detail {
|
justify-content: space-between;
|
||||||
.content {
|
align-items: center;
|
||||||
box-sizing: border-box;
|
font-size: 40rpx;
|
||||||
padding-bottom: 20rpx;
|
margin-bottom: 10rpx;
|
||||||
}
|
|
||||||
|
.header-title-extra {
|
||||||
.header {
|
font-size: 24rpx;
|
||||||
padding: 20rpx 20rpx 0;
|
color: #666;
|
||||||
|
padding-right: 10rpx;
|
||||||
.header-title {
|
}
|
||||||
display: flex;
|
}
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
.header-des {
|
||||||
font-size: 40rpx;
|
font-size: 28rpx;
|
||||||
margin-bottom: 10rpx;
|
color: #666;
|
||||||
|
}
|
||||||
.header-title-extra {
|
}
|
||||||
font-size: 24rpx;
|
|
||||||
color: #666;
|
.footer-btn {
|
||||||
padding-right: 10rpx;
|
padding: 0 20rpx;
|
||||||
}
|
height: 50rpx;
|
||||||
}
|
background-color: #007aff;
|
||||||
|
font-size: 24rpx;
|
||||||
.header-des {
|
color: #fff;
|
||||||
font-size: 28rpx;
|
text-align: center;
|
||||||
color: #666;
|
line-height: 50rpx;
|
||||||
}
|
border-radius: 10rpx;
|
||||||
}
|
}
|
||||||
|
/deep/ .is-add {
|
||||||
.footer-btn {
|
background-color: #fff;
|
||||||
padding: 0 20rpx;
|
}
|
||||||
height: 50rpx;
|
}
|
||||||
background-color: #007aff;
|
|
||||||
font-size: 24rpx;
|
.gplot {
|
||||||
color: #fff;
|
box-sizing: border-box;
|
||||||
text-align: center;
|
position: relative;
|
||||||
line-height: 50rpx;
|
width: 100%;
|
||||||
border-radius: 10rpx;
|
border: 8rpx solid #ccc;
|
||||||
}
|
}
|
||||||
/deep/ .is-add {
|
</style>
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.gplot {
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
border: 8rpx solid #ccc;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@
|
|||||||
<uni-search-bar v-model="store.params.searchValue" clearButton="none" bgColor="#fff" placeholder="请输入关键词"
|
<uni-search-bar v-model="store.params.searchValue" clearButton="none" bgColor="#fff" placeholder="请输入关键词"
|
||||||
@input="store.search()"></uni-search-bar>
|
@input="store.search()"></uni-search-bar>
|
||||||
<view class="message">
|
<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' : '' }">
|
v-for="(item, index) in store.data" :key="index" :style="{ marginTop: index === 0 ? '0' : '' }">
|
||||||
<view class="term-list-bottom">
|
<view class="term-list-bottom">
|
||||||
<view class="term-list-bottom-item">
|
<view class="term-list-bottom-item">
|
||||||
|
|||||||
@@ -136,7 +136,7 @@
|
|||||||
.uni-card {
|
.uni-card {
|
||||||
margin: $uni-card-spacing;
|
margin: $uni-card-spacing;
|
||||||
padding: 0 $uni-spacing-sm;
|
padding: 0 $uni-spacing-sm;
|
||||||
border-radius: 4px;
|
border-radius: 20rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|||||||
Reference in New Issue
Block a user