|
@@ -0,0 +1,183 @@
|
|
|
+<template>
|
|
|
+ <view class="environment-index">
|
|
|
+ <view class="environment-box">
|
|
|
+ <view class="environment-box-title">实时数据</view>
|
|
|
+ <div class="air-item">
|
|
|
+ <div class="test-item">
|
|
|
+ <div class="name">温度(°C)</div>
|
|
|
+ <div class="number">{{realTimeData.temperature}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="test-item line">
|
|
|
+ <div class="name">湿度(%)</div>
|
|
|
+ <div class="number">{{realTimeData.humidity}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="test-item">
|
|
|
+ <div class="name">风速(m/s)</div>
|
|
|
+ <div class="number">{{realTimeData.windSpeed}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="air-item">
|
|
|
+ <div class="test-item">
|
|
|
+ <div class="name">粉尘(mg/m³)</div>
|
|
|
+ <div class="number">{{realTimeData.dust}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="test-item line">
|
|
|
+ <div class="name">噪声(dB)</div>
|
|
|
+ <div class="number">{{realTimeData.noise}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="test-item">
|
|
|
+ <div class="name">气压(Kpa)</div>
|
|
|
+ <div class="number">{{realTimeData.pressure}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ <view class="common-charts">
|
|
|
+ <view class="common-chart-title">温度监测</view>
|
|
|
+ <view class="common-chart-box">
|
|
|
+ <u-echart ref="temperature"></u-echart>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="common-charts">
|
|
|
+ <view class="common-chart-title">湿度监测</view>
|
|
|
+ <view class="common-chart-box">
|
|
|
+ <u-echart ref="humidity"></u-echart>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="common-charts">
|
|
|
+ <view class="common-chart-title">粉尘监测</view>
|
|
|
+ <view class="common-chart-box">
|
|
|
+ <u-echart ref="dust"></u-echart>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import uEchart from './uEchart.vue'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ realTimeData: {
|
|
|
+ dust: '1.2', //粉尘
|
|
|
+ noise: '55', //噪声
|
|
|
+ temperature: '26', //温度
|
|
|
+ humidity: '40', //湿度
|
|
|
+ pressure: '100', //气压
|
|
|
+ windSpeed: '1', //风速
|
|
|
+ windDirection: '东北' //风向
|
|
|
+ },
|
|
|
+ echart: [{
|
|
|
+ ref: 'temperature',
|
|
|
+ type: 'line',
|
|
|
+ color: ["#1890FF"],
|
|
|
+ categories: ['03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
|
|
|
+ series: [{
|
|
|
+ name: '温度',
|
|
|
+ data: [21.3, 24.0, 24.1, 24.1, 24.4, 24.0, 23.4, 23.3]
|
|
|
+ }]
|
|
|
+ }, {
|
|
|
+ ref: 'humidity',
|
|
|
+ type: 'line',
|
|
|
+ color: ["#73C0DE"],
|
|
|
+ categories: ['03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
|
|
|
+ series: [{
|
|
|
+ name: '湿度',
|
|
|
+ data: [37, 38, 38.1, 38.1, 38.4, 38.0, 36.4, 36]
|
|
|
+ }]
|
|
|
+ }, {
|
|
|
+ ref: 'dust',
|
|
|
+ type: 'line',
|
|
|
+ color: ["#FAC858"],
|
|
|
+ categories: ['03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
|
|
|
+ series: [{
|
|
|
+ name: '粉尘',
|
|
|
+ data: [7, 8, 3.1, 8.1, 8.4, 8, 6.4, 9]
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ setTimeout(() => {
|
|
|
+ for (var i = 0; i < this.echart.length; i++) {
|
|
|
+ let item = this.echart[i];
|
|
|
+ this.$refs[item.ref].initCharts({
|
|
|
+ type: item.type,
|
|
|
+ categories: item.categories,
|
|
|
+ series: item.series,
|
|
|
+ animation: true,
|
|
|
+ background: "#FFFFFF",
|
|
|
+ color: item.color,
|
|
|
+ padding: [10, 5, 0, 0],
|
|
|
+ enableScroll: false,
|
|
|
+ legend: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ disableGrid: true
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ gridType: "dash",
|
|
|
+ dashLength: 2
|
|
|
+ },
|
|
|
+ extra: {
|
|
|
+ line: {
|
|
|
+ type: "curve",
|
|
|
+ width: 2,
|
|
|
+ activeType: "hollow"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ uEchart
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .environment-index {
|
|
|
+ padding: 30rpx;
|
|
|
+
|
|
|
+ .environment-box {
|
|
|
+ background: #fff;
|
|
|
+ padding: 30rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
|
|
|
+ }
|
|
|
+
|
|
|
+ .air-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .test-item {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: center;
|
|
|
+ padding: 2px 0;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ color: $uni-secondary-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: $uni-success;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .environment-box-title {
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|