页面切图
This commit is contained in:
仲么了
103
pages/device/APF/basic.vue
Normal file
103
pages/device/APF/basic.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<view class='basic'>
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">电网电流</view>
|
||||
<view class="grid-card-content-4">
|
||||
<view class="item">名称</view>
|
||||
<view class="item">有效值(A)</view>
|
||||
<view class="item">cosp</view>
|
||||
<view class="item">THDI(%)</view>
|
||||
<view class="item">L1</view>
|
||||
<view class="item">226.8</view>
|
||||
<view class="item">50.0</view>
|
||||
<view class="item">4.6</view>
|
||||
<view class="item">L2</view>
|
||||
<view class="item">226.8</view>
|
||||
<view class="item">50.0</view>
|
||||
<view class="item">4.6</view>
|
||||
<view class="item">L3</view>
|
||||
<view class="item">226.8</view>
|
||||
<view class="item">50.0</view>
|
||||
<view class="item">4.6</view>
|
||||
<view class="item">N</view>
|
||||
<view class="item">3.9</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">电网电压</view>
|
||||
<view class="grid-card-content-4">
|
||||
<view class="item">名称</view>
|
||||
<view class="item">电压(V)</view>
|
||||
<view class="item">频率(Hz)</view>
|
||||
<view class="item">THDU(%)</view>
|
||||
<view class="item">L1</view>
|
||||
<view class="item">226.8</view>
|
||||
<view class="item">50.0</view>
|
||||
<view class="item">4.6</view>
|
||||
<view class="item">L2</view>
|
||||
<view class="item">226.8</view>
|
||||
<view class="item">50.0</view>
|
||||
<view class="item">4.6</view>
|
||||
<view class="item">L3</view>
|
||||
<view class="item">226.8</view>
|
||||
<view class="item">50.0</view>
|
||||
<view class="item">4.6</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">负载电流</view>
|
||||
<view class="grid-card-content-4">
|
||||
<view class="item">名称</view>
|
||||
<view class="item">有效值(A)</view>
|
||||
<view class="item">cosp</view>
|
||||
<view class="item">THDI(%)</view>
|
||||
<view class="item">L1</view>
|
||||
<view class="item">226.8</view>
|
||||
<view class="item">50.0</view>
|
||||
<view class="item">4.6</view>
|
||||
<view class="item">L2</view>
|
||||
<view class="item">226.8</view>
|
||||
<view class="item">50.0</view>
|
||||
<view class="item">4.6</view>
|
||||
<view class="item">L3</view>
|
||||
<view class="item">226.8</view>
|
||||
<view class="item">50.0</view>
|
||||
<view class="item">4.6</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-card">
|
||||
<view class="grid-card-title">补偿电流</view>
|
||||
<view class="grid-card-content-4">
|
||||
<view class="item">名称</view>
|
||||
<view class="item">有效值(A)</view>
|
||||
<view class="item">负载率(%)</view>
|
||||
<view class="item"></view>
|
||||
<view class="item">L1</view>
|
||||
<view class="item">226.8</view>
|
||||
<view class="item">50.0</view>
|
||||
<view class="item"></view>
|
||||
<view class="item">L2</view>
|
||||
<view class="item">226.8</view>
|
||||
<view class="item">50.0</view>
|
||||
<view class="item"></view>
|
||||
<view class="item">L3</view>
|
||||
<view class="item">226.8</view>
|
||||
<view class="item">50.0</view>
|
||||
<view class="item"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.basic {}
|
||||
</style>
|
||||
89
pages/device/APF/xieBo.vue
Normal file
89
pages/device/APF/xieBo.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-checkbox v-model="radio" :localdata="sex"></uni-data-checkbox>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts :ontouch="true" type="column" :opts="opts" :chartData="chartData" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio: 0,
|
||||
sex: [{
|
||||
text: 'THDI L1',
|
||||
value: 0
|
||||
}, {
|
||||
text: 'THDI L2',
|
||||
value: 1
|
||||
}, {
|
||||
text: 'THDI L3',
|
||||
value: 2
|
||||
}],
|
||||
chartData: {},
|
||||
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
||||
opts: {
|
||||
enableScroll: true,
|
||||
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
|
||||
padding: [15, 15, 0, 5],
|
||||
legend: {},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
itemCount: 8,
|
||||
scrollShow: true,
|
||||
},
|
||||
yAxis: {
|
||||
data: [
|
||||
{
|
||||
min: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: "group",
|
||||
width: 30,
|
||||
activeBgColor: "#000000",
|
||||
activeBgOpacity: 0.08
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.getServerData();
|
||||
},
|
||||
methods: {
|
||||
getServerData () {
|
||||
//模拟从服务器获取数据时的延时
|
||||
setTimeout(() => {
|
||||
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
||||
let res = {
|
||||
categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
|
||||
series: [
|
||||
{
|
||||
name: "电网侧",
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
|
||||
},
|
||||
{
|
||||
name: "负载册",
|
||||
data: [30, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chartData = JSON.parse(JSON.stringify(res));
|
||||
}, 1500);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.charts-box {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
138
pages/device/detailAPF.vue
Normal file
138
pages/device/detailAPF.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<Cn-page :loading='loading' noPadding>
|
||||
<view slot='body'>
|
||||
<view class='detail'>
|
||||
<view class="header"> </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 class="content" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
|
||||
<view v-show="navMenuActive == 0">
|
||||
<basic></basic>
|
||||
</view>
|
||||
<view v-show="navMenuActive == 1">
|
||||
<xieBo></xieBo>
|
||||
</view>
|
||||
<view v-show="navMenuActive == 2">
|
||||
<view>
|
||||
<text>设备功率信息</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="navMenuActive == 3">
|
||||
<view>
|
||||
<text>设备波形信息</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="navMenuActive == 4">
|
||||
<view>
|
||||
<text>设备I/O信息</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height:20rpx"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
</template>
|
||||
<script>
|
||||
import basic from "./APF/basic.vue";
|
||||
import xieBo from "./APF/xieBo.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
basic,
|
||||
xieBo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
navMenuActive: 0,
|
||||
navHeight: 0,
|
||||
navMenuList: [{
|
||||
text: '基本'
|
||||
}, {
|
||||
text: '谐波'
|
||||
}, {
|
||||
text: '功率'
|
||||
}, {
|
||||
text: '波形'
|
||||
}, {
|
||||
text: 'I/O'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navMenuClick (idx) {
|
||||
this.navMenuActive = idx
|
||||
},
|
||||
init () {
|
||||
setTimeout(() => {
|
||||
// 获取nav高度
|
||||
uni.createSelectorQuery().select('.nav').boundingClientRect((rect) => {
|
||||
this.navHeight = rect.height
|
||||
}).exec()
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
onLoad (options) {
|
||||
this.init()
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.detail {
|
||||
|
||||
// background: #fff;
|
||||
.header {
|
||||
height: 400rpx;
|
||||
background: $uni-color-primary;
|
||||
}
|
||||
|
||||
.des {
|
||||
padding: 20rpx 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
background: rgb(243, 244, 245);
|
||||
|
||||
.nav-menu {
|
||||
padding: 10rpx 20rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #fff;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-active {
|
||||
background: $uni-color-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user