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

页面切图

Browse Source
This commit is contained in:
仲么了
2023-02-07 17:59:54 +08:00
parent 6cd009f621
commit 3f50cca6db
35 changed files with 933 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
pages/device/APF/IO.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<view class='basic'>
<view class="grid-card">
<view class="grid-card-title">温度</view>
<view class="grid-card-content-4">
<view class="item">温度1(°C)</view>
<view class="item">温度2(°C)</view>
<view class="item">温度3(°C)</view>
<view class="item">温度4(°C)</view>
<view class="item">20.0</view>
<view class="item">20.0</view>
<view class="item">20.0</view>
<view class="item">20.0</view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-title">干接点</view>
<view class="grid-card-content-4">
<view class="item">干接点1</view>
<view class="item">干接点2</view>
<view class="item"></view>
<view class="item"></view>
<view class="item">正常</view>
<view class="item">正常</view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style lang='scss'>
.basic {}
</style>

163
pages/device/APF/oscillogram.vue Normal file
View File

@@ -0,0 +1,163 @@
<template>
<view>
<uni-data-checkbox multiple v-model="checkbox" :localdata="hobby"></uni-data-checkbox>
<view class="charts-box">
<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
</view>
</view>
</template>
<script>
export default {
data () {
return {
checkbox: [0,1,2],
hobby: [{
text: '电网电压1',
value: 0
}, {
text: '电网电压2',
value: 1
}, {
text: '电网电压3',
value: 2
}, {
text: '电网电压3',
value: 4
}],
chartData: {},
//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
opts: {
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
padding: [15, 15, 0, 0],
dataLabel: false,
dataPointShape: false,
enableScroll: false,
legend: {},
xAxis: {
disableGrid: true
},
yAxis: {
gridType: "dash",
dashLength: 2,
data: [
{
min: -100,
max: 100
}
]
},
extra: {
line: {
type: "curve",
width: 2,
activeType: "hollow",
linearType: "custom"
}
}
}
};
},
mounted () {
this.getServerData();
},
methods: {
getServerData () {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
categories: ["0", "90", "180", "270", "360"],
series: [
{
name: "成交量A",
linearColor: [
[
0,
"#1890FF"
],
[
0.25,
"#00B5FF"
],
[
0.5,
"#00D1ED"
],
[
0.75,
"#00E6BB"
],
[
1,
"#90F489"
]
],
data: [-50, 60, 15, 45, 15]
},
{
name: "成交量B",
linearColor: [
[
0,
"#91CB74"
],
[
0.25,
"#2BDCA8"
],
[
0.5,
"#2AE3A0"
],
[
0.75,
"#C4D06E"
],
[
1,
"#F2D375"
]
],
data: [-50, -80, 55, 85, 55]
},
{
name: "成交量C",
linearColor: [
[
0,
"#FAC858"
],
[
0.33,
"#FFC371"
],
[
0.66,
"#FFC2B2"
],
[
1,
"#FA7D8D"
]
],
data: [80, 60, 95, 50, 95]
}
]
};
this.chartData = JSON.parse(JSON.stringify(res));
}, 500);
},
}
};
</script>
<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
margin-top: 20rpx;
width: 100%;
height: 300px;
}
</style>

67
pages/device/APF/power.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<view class='basic'>
<view class="grid-card">
<view class="grid-card-title">电网侧</view>
<view class="grid-card-content-5">
<view class="item">名称</view>
<view class="item">有功功率(kw)</view>
<view class="item">无功功率(kVar)</view>
<view class="item">视在功率(kVA)</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">4.6</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">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">4.6</view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-title">负载侧</view>
<view class="grid-card-content-5">
<view class="item">名称</view>
<view class="item">有功功率(kw)</view>
<view class="item">无功功率(kVar)</view>
<view class="item">视在功率(kVA)</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">4.6</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">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">4.6</view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style lang='scss'>
.basic {}
</style>

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

@@ -74,7 +74,7 @@ export default {
]
};
this.chartData = JSON.parse(JSON.stringify(res));
}, 1500);
}, 500);
},
}
};

44
pages/device/about.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='about'>
<view class='about-title'>盛弘APF</view>
<view class='about-text'>杋器码：0000000</view>
<view class='about-text'>软件版本：1.0.0</view>
<view class='about-text'>使用期限：永久使用</view>
<view class='about-text'>软件版本：380-250/250-4-0-1</view>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false,
}
},
methods: {
}
}
</script>
<style lang='scss'>
.about {
padding: 34rpx;
.about-title {
font-size: 34rpx;
font-weight: bold;
color: #333333;
margin-bottom: 34rpx;
}
.about-text {
font-size: 28rpx;
color: #666666;
margin-bottom: 34rpx;
}
}
</style>

95
pages/device/detailAPF.vue
View File

@@ -2,7 +2,9 @@
<Cn-page :loading='loading' noPadding>
<view slot='body'>
<view class='detail'>
<view class="header"> </view>
<view class="header">
<image src="/static/test.pic.jpg" mode="widthFix" style="width: 100%;" />
</view>
<view class="des">
<text>设备基础信息</text>
<text class="ml10">设备状态</text>
@@ -13,29 +15,28 @@
</view>
</view>
<view class="content" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
<view v-show="navMenuActive == 0">
<view v-if="navMenuActive == 0">
<basic></basic>
</view>
<view v-show="navMenuActive == 1">
<view v-else-if="navMenuActive == 1">
<xieBo></xieBo>
</view>
<view v-show="navMenuActive == 2">
<view>
<text>设备功率信息</text>
</view>
<view v-else-if="navMenuActive == 2">
<power></power>
</view>
<view v-show="navMenuActive == 3">
<view>
<text>设备波形信息</text>
</view>
<view v-else-if="navMenuActive == 3">
<oscillogram></oscillogram>
</view>
<view v-show="navMenuActive == 4">
<view>
<text>设备I/O信息</text>
</view>
<view v-else-if="navMenuActive == 4">
<IO></IO>
</view>
<view style="height:20rpx"></view>
</view>
<uni-fab ref="fab" direction="vertical" horizontal="right" vertical="bottom" :content="content"
@trigger="trigger" />
<uni-popup ref="share" type="share" background-color="#fff">
<uni-popup-share title="分享到"></uni-popup-share>
</uni-popup>
</view>
</view>
</Cn-page>
@@ -43,11 +44,17 @@
<script>
import basic from "./APF/basic.vue";
import xieBo from "./APF/xieBo.vue";
import power from "./APF/power.vue";
import oscillogram from "./APF/oscillogram.vue";
import IO from "./APF/IO.vue";
export default {
components: {
basic,
xieBo
xieBo,
power,
oscillogram,
IO
},
data () {
return {
@@ -64,10 +71,55 @@ export default {
text: '波形'
}, {
text: 'I/O'
}]
}],
content: [{
iconPath: '/static/share.png',
text: '分享',
}, {
iconPath: '/static/delate.png',
text: '删除',
}, {
iconPath: '/static/download.png',
text: '下载',
}, {
iconPath: '/static/record.png',
text: '记录',
}, {
iconPath: '/static/report2.png',
text: '告警',
}, {
iconPath: '/static/about.png',
text: '关于',
},
]
}
},
methods: {
trigger (e) {
if (e.index === 0) {
this.$refs.share.open()
} else if (e.index === 1) {
uni.showModal({
title: '提示',
content: '确定删除该设备吗？',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
});
} else if (e.index === 2) {
this.$util.toast('下载成功')
} else if (e.index === 3) {
uni.navigateTo({ url: '/pages/device/record' })
} else if (e.index === 4) {
uni.navigateTo({ url: '/pages/device/report' })
} else if (e.index === 5) {
uni.navigateTo({ url: '/pages/device/about' })
}
},
navMenuClick (idx) {
this.navMenuActive = idx
},
@@ -89,11 +141,8 @@ export default {
<style lang='scss'>
.detail {
// background: #fff;
.header {
height: 400rpx;
background: $uni-color-primary;
}
// background: $uni-theme-white;
.header {}
.des {
padding: 20rpx 20rpx 0;
@@ -114,7 +163,7 @@ export default {
margin-left: 20rpx;
font-size: 28rpx;
border-radius: 8rpx;
background: #fff;
background: $uni-theme-white;
&:first-of-type {
margin-left: 0;

71
pages/device/new.vue
View File

@@ -1,25 +1,78 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
添加新设备
<view class='new'>
<template v-if="type == 1">
<view style="display:flex">
<uni-easyinput type="number" v-model="code" placeholder="请输入设备DID" />
<uni-icons type="camera" color="#007aff" size="30" class="ml20" @click="scanCode"></uni-icons>
</view>
</view>
</Cn-page>
<view class="new-btn" @click="register"> 发起注册 </view>
</template>
<template v-else>
<view style="display:flex;">
<uni-easyinput :clearable="false" type="text" v-model="address" placeholder="请输入地址" />
<uni-icons type="location" color="#007aff" size="30" class="ml20" @click="chooseLocation"></uni-icons>
</view>
<view class="new-btn" @click="submit"> 提交 </view>
</template>
</view>
</template>
<script>
export default {
data () {
return {
loading: false
loading: false,
code: '',
type: 1,
formData: {
address: '',
},
}
},
methods: {
scanCode () {
uni.scanCode({
success: function (res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
}
});
},
register () {
this.type = 2
},
chooseLocation () {
uni.chooseLocation({
success: function (res) {
this.address = res.name
console.log('位置名称：' + res.name);
console.log('详细地址：' + res.address);
console.log('纬度：' + res.latitude);
console.log('经度：' + res.longitude);
}
});
},
submit(){
this.$util.toast('提交成功')
uni.navigateBack({ delta: 1 })
},
}
}
</script>
<style lang='scss'>
.index {
padding: 34rpx;
.new {
padding: 100rpx 100rpx 0;
.new-btn {
display: flex;
align-items: center;
justify-content: center;
margin: 80rpx auto 0;
width: 320rpx;
background: $uni-theme-blue;
color: #fff;
height: 80rpx;
border-radius: 12rpx;
}
}
</style>

43
pages/device/record.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='record'>
<uni-list :border="false">
<uni-list-item title="操作记录" note="0.20->0.20" rightText="2023-02-01 15:10:29" v-for="item in 5" />
</uni-list>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false,
}
},
methods: {
}
}
</script>
<style lang='scss'>
.record {
.header {
position: sticky;
top: 0;
left: 0;
z-index: 10;
background: $uni-theme-white;
padding: 10rpx 20rpx 20rpx;
box-shadow: 0 0 10rpx #eee;
}
}
/deep/ .uni-list-item {
background-color: $uni-theme-white !important;
}
</style>

51
pages/device/report.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='record'>
<div class="header">
<uni-segmented-control :current="current" :values="items" :style-type="styleType"
:active-color="activeColor" @clickItem="onClickItem" />
</div>
<uni-list :border="false">
<uni-list-item title="输入电压异常" rightText="2023-02-01 15:10:29" v-for="item in 5" />
</uni-list>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false,
current: 0,
items: ['当前告警', '历史告警'],
styleType: 'text',
activeColor: '#007aff',
}
},
methods: {
onClickItem (e) {
this.current = e.currentIndex
},
}
}
</script>
<style lang='scss'>
.record {
.header {
position: sticky;
top: 0;
left: 0;
z-index: 10;
background: $uni-theme-white;
padding: 10rpx 20rpx 20rpx;
box-shadow: 0 0 10rpx #eee;
}
}
/deep/ .uni-list-item {
background-color: $uni-theme-white !important;
}
</style>