页面切图
This commit is contained in:
仲么了
41
pages/device/APF/IO.vue
Normal file
41
pages/device/APF/IO.vue
Normal 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
163
pages/device/APF/oscillogram.vue
Normal 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
67
pages/device/APF/power.vue
Normal 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>
|
||||
@@ -74,7 +74,7 @@ export default {
|
||||
]
|
||||
};
|
||||
this.chartData = JSON.parse(JSON.stringify(res));
|
||||
}, 1500);
|
||||
}, 500);
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user