|
|
@@ -0,0 +1,207 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view :class="['info', equipInfo.is_online == 1 ? 'on' : 'off']">
|
|
|
+ <view class="">
|
|
|
+ 设备ID：{{ equipInfo.device_id }}
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ 设备名称：{{ equipInfo.device_name == "" ? "无" : equipInfo.device_name }}水肥机
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ 设备类型：{{ equipInfo.dver_num }}
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ 设备地址：{{ equipInfo.city }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infoText">设备变量</view>
|
|
|
+ <view class="realtime">
|
|
|
+ <scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
|
|
|
+ <table class="table">
|
|
|
+ <tr class="tr">
|
|
|
+ <th class="th" v-for="(item, index) in thdata" :key="'a' + index">{{ item }}</th>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr" v-for="(items, indexs) in statusList" :key="'b' + indexs" v-if="statusList.length > 0">
|
|
|
+ <td class="td">{{ items.d_id }}</td>
|
|
|
+ <td class="td">{{ items.name }}</td>
|
|
|
+ <td class="td"><u-button type="success" size="mini" @click="goHistory(items)">历史记录</u-button></td>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr" v-else>
|
|
|
+ <td class="td" v-for="item in 4">暂无数据</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ equipInfo: {},
|
|
|
+ statusList: [],
|
|
|
+ thdata: [
|
|
|
+ '变量ID',
|
|
|
+ '变量名称',
|
|
|
+ '操作'
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ copy(item) {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: item.imei || item.device_id,
|
|
|
+ success: function () {
|
|
|
+ console.log('success');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goHistory(items) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `./history?device_id=${items.d_id}&type=${items.types}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async geDetail() {
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: '/api/api_gateway?method=irrigation_system.waterfertilizer.water_fertilizer_list',
|
|
|
+ data: {
|
|
|
+ content: this.equipInfo.device_id,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (res.data.length > 0) {
|
|
|
+ this.equipInfo = res.data[0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async geList() {
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: '/api/api_gateway?method=irrigation_system.waterfertilizer.water_fertilizer_data_list',
|
|
|
+ data: {
|
|
|
+ device_id: this.equipInfo.device_id,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (res.length > 0) {
|
|
|
+ this.statusList = res
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ var times = new Date()
|
|
|
+ this.date = times.getFullYear() + 1 + "-" + Number(times.getMonth() + 1) + "-" + times.getDate()
|
|
|
+ this.equipInfo = JSON.parse(option.detail);
|
|
|
+ this.geDetail()
|
|
|
+ this.geList()
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang='less'>
|
|
|
+page {
|
|
|
+ padding: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .infoText {
|
|
|
+ color: #0DC6B6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 50rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ background-size: 100% auto;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-color: #0DC6B6;
|
|
|
+ background-position: top left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .tishi {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin: 0rpx 0 0 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .on {
|
|
|
+ background-image: url('http://www.hnyfwlw.com:8006/bigdata_app/image/cb/onBg.png')
|
|
|
+ }
|
|
|
+
|
|
|
+ .off {
|
|
|
+ background-image: url('http://www.hnyfwlw.com:8006/bigdata_app/image/cb/offBg.png')
|
|
|
+ }
|
|
|
+
|
|
|
+ .caobox {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ line-height: 50rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 52rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .caobox_item {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ flex-basis: 25%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .realtime {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 100%;
|
|
|
+ box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
+ margin: 20rpx auto 30rpx;
|
|
|
+
|
|
|
+ .scroll-X {
|
|
|
+ width: 95%;
|
|
|
+ margin: 20rpx auto;
|
|
|
+
|
|
|
+ .tr {
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .th,
|
|
|
+ .td {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 5rpx;
|
|
|
+ width: 300rpx;
|
|
|
+ text-align: center;
|
|
|
+ height: 52rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ border: 2rpx solid #f1f1f1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tr:nth-child(2n-1) {
|
|
|
+ background-color: #f5fff8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tr:first-child {
|
|
|
+ background-color: #57c878;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.btn-box {
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.u-calendar__action {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .u-calendar__action__text {
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
