App/app-govern
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改 echart替换组件 完成置菜单按钮需要重新设计

Browse Source
This commit is contained in:
GGJ
2024-09-04 09:45:49 +08:00
parent fd55306d1a
commit d7c3069755
12 changed files with 1346 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pages/device/APF/comp/power.vue
View File

@@ -10,9 +10,9 @@
<view class="item item-title">功率因数</view>
<template v-for="(item, index) in renderData.电网侧">
<view class="item">{{ item.phase }}</view>
<view class="item">{{ (item['Apf_P_Sys(W)'] / 1000).toFixed(4) || '-' }}</view>
<view class="item">{{ (item['Apf_Q_Sys(Var)'] / 1000).toFixed(4) || '-' }}</view>
<view class="item">{{ (item['Apf_S_Sys(VA)'] / 1000).toFixed(4) || '-' }}</view>
<view class="item">{{ item['Apf_P_Sys(W)']=='-'? '-':(item['Apf_P_Sys(W)'] / 1000).toFixed(4) }}</view>
<view class="item">{{item['Apf_Q_Sys(Var)']=='-'? '-':(item['Apf_Q_Sys(Var)'] / 1000).toFixed(4) }}</view>
<view class="item">{{ item['Apf_S_Sys(VA)']=='-'?'-' :(item['Apf_S_Sys(VA)'] / 1000).toFixed(4) }}</view>
<view class="item">{{ item['Apf_PF_Sys(null)'] || '-' }}</view>
</template>
</view>
@@ -27,9 +27,9 @@
<view class="item item-title">功率因数</view>
<template v-for="(item, index) in renderData.负载侧">
<view class="item">{{ item.phase }}</view>
<view class="item">{{ (item['Apf_P_Load(W)'] / 1000).toFixed(4) || '-' }}</view>
<view class="item">{{ (item['Apf_Q_Load(Var)'] / 1000).toFixed(4) || '-' }}</view>
<view class="item">{{ (item['Apf_S_Load(VA)'] / 1000).toFixed(4) || '-' }}</view>
<view class="item">{{ item['Apf_P_Load(W)']=='-'?'-': (item['Apf_P_Load(W)'] / 1000).toFixed(4) }}</view>
<view class="item">{{ item['Apf_Q_Load(Var)']=='-'? '-':(item['Apf_Q_Load(Var)'] / 1000).toFixed(4) }}</view>
<view class="item">{{ item['Apf_S_Load(VA)']=='-'? '-':(item['Apf_S_Load(VA)'] / 1000).toFixed(4) }}</view>
<view class="item">{{ item['Apf_PF_Load(null)'] || '-' }}</view>
</template>
</view>

26
pages/device/APF/comp/xieBo.vue
View File

@@ -66,7 +66,7 @@ export default {
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
opts: {
// enableScroll: true,
dataLabel: false,
// dataLabel: false,
color: [
'#1890FF',
'#91CB74',
@@ -78,33 +78,45 @@ export default {
'#9A60B4',
'#ea7ccc',
],
padding: [0, 10, 0, 0],
padding: [0, 20, 0, 0],
legend: {
position: 'top',
float: 'left',
},
xAxis: {
disableGrid: true,
// disableGrid: true,
boundaryGap: "justify",
itemCount: 8,
// scrollShow: true,
data: [
{
min: 0,
},
],
min: 0,
max: 10,
position: 'top',
formatter:(value,index,opts)=>{
console.log(123,value,index,opts);
}
},
yAxis: {},
yAxis: {
},
extra: {
bar: {
type: 'group',
width: 30,
meterBorde: 1,
meterBorde: 1 ,
meterFillColor: '#FFFFFF',
activeBgColor: '#000000',
activeBgOpacity: 0.08,
seriesGap: 1,
categoryGap: 4,
barBorderCircle: true,
seriesGap: 2,
categoryGap: 6,
},
},
},

38
pages/device/APF/detail.vue
View File

@@ -88,6 +88,7 @@
:content="content"
@trigger="trigger"
/>
<uni-popup ref="share" type="share" :safe-area="false">
<uni-popup-share title="分享到"></uni-popup-share>
<view style="height: 40rpx; background: #fff"></view>
@@ -139,7 +140,7 @@ import { manualAccess } from '@/common/api/accessBoot'
import { MQTT_IP, MQTT_OPTIONS } from '@/common/js/mqtt.js'
import mqtt, { log } from 'mqtt/dist/mqtt.js'
import { base64ToPath, pathToBase64 } from 'image-tools'
// import hoverMenu from '@/components/hover-menu/hover-menu.vue'
export default {
components: {
basic,
@@ -147,6 +148,7 @@ export default {
power,
oscillogram,
IO,
hoverMenu
},
data() {
return {
@@ -206,6 +208,7 @@ export default {
basicData: [],
IOData: [],
pageOptions: {},
}
},
methods: {
@@ -273,6 +276,9 @@ export default {
}
this.$refs.fab.close()
},
clickItem(item) {
console.log(item);
},
// 取消调试
cancelDebug() {
this.dialogType = '取消调试'
@@ -461,12 +467,12 @@ export default {
if (key === 'Apf_RmsI_TolOut(A)') {
arr.push({
label: '总输出电流:',
value: Math.round(item.statisticalData) + 'A',
value: Math.round(item.statisticalData) + 'A',
})
} else {
arr.push({
label: '电流畸变率:',
value:Math.round(item.statisticalData) + '%',
value: Math.round(item.statisticalData) + '%',
})
// arr.push('电流畸变率:' + item.statisticalData + '%')
}
@@ -668,4 +674,28 @@ export default {
background: #f3f4f5;
}
}
</style>
/deep/ .uni-fab__circle--rightBottom {
right: 8px !important;
bottom: 8px !important;
}
/deep/ .uni-fab--rightBottom {
right: 8px !important;
bottom: 8px !important;
}
/deep/ .uni-fab__circle {
width: 40px;
height: 40px;
}
/deep/ .uni-fab__content--flexDirectionEnd {
width: 40px !important;
// height: 50px !important;
}
/deep/.uni-fab__item {
// height: 45px;
width: 40px !important;
}
/deep/.uni-fab__item--first {
height: 40px !important;
}
</style>

2
pages/device/APF/report.vue
View File

@@ -88,7 +88,7 @@ export default {
onNavigationBarButtonTap(e) {
uni.showModal({
title: '提示',
content: '确定要全部标记为已读吗？',
content: '确定要全部标记为已读吗1？',
success: (res) => {
if (res.confirm) {
updateStatus({

480
pages/device/DVR/detail.vue
View File

@@ -1,236 +1,286 @@
<template>
<Cn-page :loading='loading' noPadding>
<view slot='body'>
<view class='detail'>
<view class="detail-header">
<view class="header">
<image src="http://localhost:8088/api/system-boot/image/toStream?bgImage=topology/1aca98ceb22a1fc33b81d9101275ef1.png" mode="widthFix" style="width: 100%;" />
</view>
<!-- <view class="des">
<Cn-page :loading="loading" noPadding>
<view slot="body">
<view class="detail">
<view class="detail-header">
<view class="header">
<image
src="http://localhost:8088/api/system-boot/image/toStream?bgImage=topology/1aca98ceb22a1fc33b81d9101275ef1.png"
mode="widthFix"
style="width: 100%"
/>
</view>
<!-- <view class="des">
<text>设备基础信息</text>
<text class="ml10">设备状态</text>
</view> -->
<view class="nav">
<view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text }}
</view>
</view>
</view>
<view class="content">
<DianWang v-if="navMenuActive == 0"></DianWang>
<NiBian v-else-if="navMenuActive == 1"></NiBian>
<ShuChu v-else-if="navMenuActive == 2"></ShuChu>
<GanJieDian v-else-if="navMenuActive == 3"></GanJieDian>
<ZhuangTaiLiang v-else-if="navMenuActive == 4"> </ZhuangTaiLiang>
<QiTa v-else-if="navMenuActive == 5"></QiTa>
<view style="height:20rpx"></view>
</view>
<uni-fab ref="fab" direction="vertical" horizontal="right" vertical="bottom" :content="content"
@trigger="trigger" />
</view>
</view>
</Cn-page>
<view class="nav">
<view
class="nav-menu"
:class="{ 'nav-menu-active': navMenuActive == index }"
v-for="(item, index) in navMenuList"
:key="index"
@click="navMenuClick(index)"
>{{ item.text }}
</view>
</view>
</view>
<view class="content">
<DianWang v-if="navMenuActive == 0"></DianWang>
<NiBian v-else-if="navMenuActive == 1"></NiBian>
<ShuChu v-else-if="navMenuActive == 2"></ShuChu>
<GanJieDian v-else-if="navMenuActive == 3"></GanJieDian>
<ZhuangTaiLiang v-else-if="navMenuActive == 4"> </ZhuangTaiLiang>
<QiTa v-else-if="navMenuActive == 5"></QiTa>
<view style="height: 20rpx"></view>
</view>
<uni-fab
ref="fab"
direction="vertical"
horizontal="right"
vertical="bottom"
:content="content"
@trigger="trigger"
/>
</view>
</view>
</Cn-page>
</template>
<script>
import DianWang from "./comp/dianWang.vue";
import NiBian from "./comp/niBian.vue";
import ShuChu from "./comp/shuChu.vue";
import GanJieDian from "./comp/ganJieDian.vue";
import ZhuangTaiLiang from "./comp/zhuangTaiLiang.vue";
import QiTa from "./comp/qiTa.vue";
import DianWang from './comp/dianWang.vue'
import NiBian from './comp/niBian.vue'
import ShuChu from './comp/shuChu.vue'
import GanJieDian from './comp/ganJieDian.vue'
import ZhuangTaiLiang from './comp/zhuangTaiLiang.vue'
import QiTa from './comp/qiTa.vue'
import { manualAccess } from '@/common/api/accessBoot'
export default {
components: {
DianWang,
NiBian,
ShuChu,
GanJieDian,
ZhuangTaiLiang,
QiTa,
},
data () {
return {
loading: false,
navMenuActive: 0,
navHeight: 0,
pageOptions:{},
navMenuList: [{
text: '电网数据'
}, {
text: '逆变数据'
}, {
text: '输出数据'
}, {
text: '干接点'
}, {
text: '状态量'
}, {
text: '其他'
}],
content: [{
iconPath: '/static/report.png',
text: '告警',
}, {
iconPath: '/static/record.png',
text: '记录',
}, {
iconPath: '/static/about.png',
text: '关于',
},
{
iconPath: '/static/access.png',
text: '接入',
},
]
}
},
methods: {
trigger (e) {
console.log(e);
if (e.item.text === '分享') {
this.$refs.share.open()
} else if (e.item.text === '删除') {
uni.showModal({
title: '提示',
content: '确定删除该设备吗？',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
});
} else if (e.item.text === '下载') {
this.$util.toast('下载成功')
} else if (e.item.text === '记录') {
uni.navigateTo({ url: '/pages/device/DVR/record' })
} else if (e.item.text === '告警') {
uni.navigateTo({ url: '/pages/device/DVR/report' })
} else if (e.item.text === '关于') {
uni.navigateTo({ url: '/pages/device/DVR/about' })
} else if (e.item.text === '移交') {
uni.navigateTo({ url: '/pages/device/transfer' })
} else if (e.item.text === '反馈') {
uni.navigateTo({ url: '/pages/device/feedback' })
} else if (e.item.text === '用户') {
uni.navigateTo({ url: '/pages/device/user' })
}else if (e.item.text === '接入') {
manualAccess({nDid:this.pageOptions.ndid}).then((res) => {
this.$util.toast(res.message)
})
}
this.$refs.fab.close()
},
navMenuClick (idx) {
this.navMenuActive = idx
uni.pageScrollTo({ scrollTop: 0, duration: 0 })
},
init () {
let userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
console.log(userInfo.authorities);
switch (userInfo.authorities) {
case 1:
this.content.splice(0, 0, {
iconPath: '/static/version.png',
text: '版本',
}, {
iconPath: '/static/template.png',
text: '模版',
})
break;
case 3:
this.content.splice(1, 0, {
iconPath: '/static/transfer.png',
text: '移交',
})
break;
case 4:
this.content.splice(0, 0, {
iconPath: '/static/subordinate.png',
text: '用户',
}, {
iconPath: '/static/delate.png',
text: '删除',
})
break;
case 5:
this.content.push({
iconPath: '/static/feedback.png',
text: '反馈',
})
break;
default:
break;
components: {
DianWang,
NiBian,
ShuChu,
GanJieDian,
ZhuangTaiLiang,
QiTa,
},
data() {
return {
loading: false,
navMenuActive: 0,
navHeight: 0,
pageOptions: {},
}
setTimeout(() => {
// 获取nav高度
uni.createSelectorQuery().select('.nav').boundingClientRect((rect) => {
this.navHeight = rect.height
}).exec()
}, 1000);
}
},
onLoad (options) {
navMenuList: [
{
text: '电网数据',
},
{
text: '逆变数据',
},
{
text: '输出数据',
},
{
text: '干接点',
},
{
text: '状态量',
},
{
text: '其他',
},
],
content: [
{
iconPath: '/static/report.png',
text: '告警',
},
{
iconPath: '/static/record.png',
text: '记录',
},
{
iconPath: '/static/about.png',
text: '关于',
},
{
iconPath: '/static/access.png',
text: '接入',
},
],
}
},
methods: {
trigger(e) {
console.log(e)
if (e.item.text === '分享') {
this.$refs.share.open()
} else if (e.item.text === '删除') {
uni.showModal({
title: '提示',
content: '确定删除该设备吗？',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
},
})
} else if (e.item.text === '下载') {
this.$util.toast('下载成功')
} else if (e.item.text === '记录') {
uni.navigateTo({ url: '/pages/device/DVR/record' })
} else if (e.item.text === '告警') {
uni.navigateTo({ url: '/pages/device/DVR/report' })
} else if (e.item.text === '关于') {
uni.navigateTo({ url: '/pages/device/DVR/about' })
} else if (e.item.text === '移交') {
uni.navigateTo({ url: '/pages/device/transfer' })
} else if (e.item.text === '反馈') {
uni.navigateTo({ url: '/pages/device/feedback' })
} else if (e.item.text === '用户') {
uni.navigateTo({ url: '/pages/device/user' })
} else if (e.item.text === '接入') {
manualAccess({ nDid: this.pageOptions.ndid }).then((res) => {
this.$util.toast(res.message)
})
}
this.$refs.fab.close()
},
navMenuClick(idx) {
this.navMenuActive = idx
uni.pageScrollTo({ scrollTop: 0, duration: 0 })
},
init() {
let userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
console.log(userInfo.authorities)
switch (userInfo.authorities) {
case 1:
this.content.splice(
0,
0,
{
iconPath: '/static/version.png',
text: '版本',
},
{
iconPath: '/static/template.png',
text: '模版',
},
)
break
case 3:
this.content.splice(1, 0, {
iconPath: '/static/transfer.png',
text: '移交',
})
break
case 4:
this.content.splice(
0,
0,
{
iconPath: '/static/subordinate.png',
text: '用户',
},
{
iconPath: '/static/delate.png',
text: '删除',
},
)
break
case 5:
this.content.push({
iconPath: '/static/feedback.png',
text: '反馈',
})
break
default:
break
}
setTimeout(() => {
// 获取nav高度
uni.createSelectorQuery()
.select('.nav')
.boundingClientRect((rect) => {
this.navHeight = rect.height
})
.exec()
}, 1000)
},
},
onLoad(options) {
this.pageOptions = options
this.init()
},
this.init()
},
}
</script>
<style lang='scss'>
<style lang="scss">
.detail {
// background: $uni-theme-white;
.header {
}
// background: $uni-theme-white;
.header {}
.des {
padding: 20rpx 20rpx 0;
font-size: 28rpx;
color: #999;
}
.des {
padding: 20rpx 20rpx 0;
font-size: 28rpx;
color: #999;
}
// .nav {
// position: sticky;
// top: 0;
// left: 0;
// padding-top: 20rpx;
// display: flex;
// flex-wrap: wrap;
// background: rgb(243, 244, 245);
// .nav {
// position: sticky;
// top: 0;
// left: 0;
// padding-top: 20rpx;
// display: flex;
// flex-wrap: wrap;
// background: rgb(243, 244, 245);
// .nav-menu {
// padding: 10rpx 20rpx;
// margin-left: 20rpx;
// margin-bottom: 20rpx;
// font-size: 28rpx;
// border-radius: 8rpx;
// background: $uni-theme-white;
// .nav-menu {
// padding: 10rpx 20rpx;
// margin-left: 20rpx;
// margin-bottom: 20rpx;
// font-size: 28rpx;
// border-radius: 8rpx;
// background: $uni-theme-white;
// &-active {
// background: $uni-theme-color;
// color: #fff;
// }
// }
// }
// &-active {
// background: $uni-theme-color;
// color: #fff;
// }
// }
// }
.content {
box-sizing: border-box;
padding: 0 20rpx;
}
.detail-header {
position: sticky;
top: 0;
left: 0;
z-index: 2;
background: #f3f4f5;
}
.content {
box-sizing: border-box;
padding: 0 20rpx;
}
.detail-header {
position: sticky;
top: 0;
left: 0;
z-index: 2;
background: #f3f4f5;
}
}
</style>
/deep/ .uni-fab__circle--rightBottom {
right: 8px !important;
bottom: 8px !important;
}
/deep/ .uni-fab--rightBottom {
right: 8px !important;
bottom: 8px !important;
}
/deep/ .uni-fab__circle {
width: 50px;
height: 54px;
}
/deep/ .uni-fab__content--flexDirectionEnd {
width: 50px !important;
// height: 50px !important;
}
</style>

38
pages/device/transfer.vue
View File

@@ -24,17 +24,24 @@
</view>
</view>
</Cn-page>
<uni-popup ref="alertDialog" type="dialog">
<uni-popup-dialog
type="info"
cancelText="禁止"
confirmText="允许"
title="权限说明"
content='是否允许"灿能物联"使用相机?'
@confirm="handleScon"
@close="dialogClose"
></uni-popup-dialog>
</uni-popup>
<uni-popup ref="alertDialog" type="dialog">
<uni-popup-dialog
style="width: 90%; margin: 5%"
type="info"
cancelText="禁止"
confirmText="允许"
title="权限说明"
content='是否允许"灿能物联"使用相机?'
@confirm="handleScon('camera')"
@close="dialogClose"
></uni-popup-dialog>
</uni-popup>
<uni-popup ref="message" type="message">
<uni-popup-message type="info" :duration="0" style="width: 90%; margin: 5%">
<view style="color: #909399; font-style: 16px">相机权限使用说明:</view>
<view style="color: #6c6c6c; margin-top: 3rpx; ">　用于相机扫描二维码!</view>
</uni-popup-message>
</uni-popup>
</view>
</template>
<script>
@@ -75,14 +82,15 @@ export default {
plus.os.name == 'Android' &&
plus.navigator.checkPermission('android.permission.CAMERA') === 'undetermined'
) {
//未授权
this.$refs.alertDialog.open()
//未授权
this.$refs.message.open()
this.$refs.alertDialog.open('bottom')
} else {
this.handleScon()
}
},
handleScon() {
this.$refs.message.close()
uni.scanCode({
success: (res) => {
console.log(res)
@@ -98,7 +106,7 @@ export default {
},
})
},
dialogClose() {},
dialogClose() {this.$refs.message.close()},
},
onLoad(options) {
this.options = options