|
|
@@ -0,0 +1,429 @@
|
|
|
+<template>
|
|
|
+ <view class="bigBox">
|
|
|
+ <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#14A478"></u-tabs>
|
|
|
+ <view class="infoBox">
|
|
|
+ <view :class="['info',equipInfo.is_online==1?'on':'off']">
|
|
|
+ <p @click="copy(equipInfo.imei)">设备ID：{{equipInfo.imei}}
|
|
|
+ <image src="http://www.hnyfwlw.com:8006/bigdata_app/image/environment/fuzhi.png" mode=""
|
|
|
+ class="tishi">
|
|
|
+ </image>
|
|
|
+ </p>
|
|
|
+ <p>设备名称：{{equipInfo.device_name==""?"无":equipInfo.device_name}}</p>
|
|
|
+ <p>最新上报时间：{{equipInfo.uptime | timeFormat}}</p>
|
|
|
+ <p>最新地址：{{equipInfo.address}}</p>
|
|
|
+ <p class="fillin">诱芯名称：{{equipInfo.decoy}}</p>
|
|
|
+ <!-- <p @click="glass_show=true">诱芯更换时间：<span style="margin:0 20rpx;">{{yxchangetime}}</span><u-icon
|
|
|
+ name="edit-pen" color="#f0ad4e" size="28"></u-icon></p> -->
|
|
|
+ <p>诱芯到期时间：{{equipInfo.xy_expire}}</p>
|
|
|
+ <!-- <u-calendar v-model="glass_show" mode="date" :max-date="date" @change="timeChange"></u-calendar>
|
|
|
+ <u-calendar v-model="glass_showtwo" mode="date" :max-date="date" @change="timeChangetwo"></u-calendar> -->
|
|
|
+ </view>
|
|
|
+ <view class="cardInfo">
|
|
|
+ <text class="title">设备控制</text>
|
|
|
+ <view class="controlCard">
|
|
|
+ <view class="preBtn" v-for="btn in btnList" :key="btn.class">
|
|
|
+ <view :class="`btnBox ${btn.class}`">
|
|
|
+ <text :class="btn.icon"></text>
|
|
|
+ </view>
|
|
|
+ <view>{{btn.text}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cardInfo">
|
|
|
+ <text class="title">监测数据</text>
|
|
|
+ <view class="controlCard noBg">
|
|
|
+ <u-row gutter="30" justify="between">
|
|
|
+ <u-col span="5.8" class="preInfo" v-for="btn in dataList" :key="btn.icon">
|
|
|
+ <view class="btnBox">
|
|
|
+ <text :class="btn.icon"></text>
|
|
|
+ </view>
|
|
|
+ <view class="textBox">
|
|
|
+ <view>
|
|
|
+ {{newDataObj[btn.unit]}}
|
|
|
+ </view>
|
|
|
+ <view class="name">{{btn.text}}</view>
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cardInfo">
|
|
|
+ <text class="title">设备信息</text>
|
|
|
+ <view class="controlCard noBg">
|
|
|
+ <u-cell-group>
|
|
|
+ <u-cell-item v-for="btn in deviceDataList" :key="btn.icon" :title="btn.text" :value="deviceObj[btn.key]" :arrow="false" :border-bottom="true"></u-cell-item>
|
|
|
+ </u-cell-group>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ btnList:[{
|
|
|
+ text:'更换信息素',
|
|
|
+ icon:'yficonfont icon-weimingming-34',
|
|
|
+ class:'green'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text:'设备清虫',
|
|
|
+ icon:'yficonfont icon-chouchongbug',
|
|
|
+ class:'danger'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text:'拍照定时',
|
|
|
+ icon:'yficonfont icon-dingshi',
|
|
|
+ class:'blue'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text:'一键拍照',
|
|
|
+ icon:'yficonfont icon-paizhao-xianxing',
|
|
|
+ class:'yellow'
|
|
|
+ }],
|
|
|
+ list: [{
|
|
|
+ name: '基本信息'
|
|
|
+ }, {
|
|
|
+ name: '数据分析'
|
|
|
+ }, {
|
|
|
+ name: '图片列表',
|
|
|
+ }, {
|
|
|
+ name: '设备控制',
|
|
|
+ }],
|
|
|
+ current: 0,
|
|
|
+ equipInfo: {},
|
|
|
+ dataList: [{
|
|
|
+ text: '空气温度', // 中文
|
|
|
+ unit: 'air_temp', // 对应字段
|
|
|
+ data: '',
|
|
|
+ icon: 'yficonfont icon-kongqiwendu', // iconclass名称
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '空气湿度',
|
|
|
+ unit: 'air_humi',
|
|
|
+ data: '',
|
|
|
+ icon: 'yficonfont icon-shuizhi',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '风力',
|
|
|
+ unit: 'wind_force',
|
|
|
+ isSmall: true,
|
|
|
+ data: '',
|
|
|
+ icon: 'yficonfont icon-fengli',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '风向',
|
|
|
+ unit: 'wind_dir',
|
|
|
+ isSmall: true,
|
|
|
+ data: '',
|
|
|
+ icon: 'yficonfont icon-fengxiang',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '虫数',
|
|
|
+ unit: 'bugcnt',
|
|
|
+ data: '',
|
|
|
+ icon: 'yficonfont icon-chouchongbug',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '光照强度',
|
|
|
+ unit: 'light',
|
|
|
+ data: '',
|
|
|
+ isSmall: true,
|
|
|
+ icon: 'yficonfont icon-qingtian',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '降雨',
|
|
|
+ unit: 'rain_status',
|
|
|
+ data: '',
|
|
|
+ icon: 'yficonfont icon-yu',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '电池电量',
|
|
|
+ unit: 'bat_level',
|
|
|
+ data: '',
|
|
|
+ icon: 'yficonfont icon-80dianliang',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '信号强度',
|
|
|
+ unit: 'gprs',
|
|
|
+ data: '',
|
|
|
+ icon: 'yficonfont icon-wifi',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '定位信噪比',
|
|
|
+ unit: 'cn0',
|
|
|
+ data: '',
|
|
|
+ isSmall: true,
|
|
|
+ icon: 'yficonfont icon-dingwei1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '太阳能电压',
|
|
|
+ unit: 'solar_voltage',
|
|
|
+ data: '',
|
|
|
+ icon: 'yficonfont icon-guangfuzujianshuliang',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '蓄电池电压',
|
|
|
+ unit: 'bat_val',
|
|
|
+ data: '',
|
|
|
+ icon: 'yficonfont icon-xudianchi',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ dataLoading: true,
|
|
|
+ newDataObj: {},
|
|
|
+ deviceDataList: [{
|
|
|
+ text: '设备名',
|
|
|
+ key: 'devname',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '设备版本号',
|
|
|
+ key: 'version',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '心跳间隔',
|
|
|
+ key: 'heart_time',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '太阳能电压阀值',
|
|
|
+ key: 'solar_threshold',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '太阳能电压最大值',
|
|
|
+ key: 'solarmax',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '数据上传频率',
|
|
|
+ key: 'upload_time',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '工作模式',
|
|
|
+ key: 'dev_work_mode',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '定时模式时间',
|
|
|
+ key: 'dev_work_time',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '高压包开关状态',
|
|
|
+ key: 'dev_work_onoff',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: 'SIM卡号',
|
|
|
+ key: 'sim',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ deviceLoading: true,
|
|
|
+ deviceObj: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.equipInfo = JSON.parse(option.detail);
|
|
|
+ console.log(this.equipInfo);
|
|
|
+ this.getData();
|
|
|
+ this.getDeviceData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getData() {
|
|
|
+ let res = await this.$myRequest({
|
|
|
+ method: 'post',
|
|
|
+ url: '/api/api_gateway?method=lpsxy.views.monitor_data',
|
|
|
+ data: {
|
|
|
+ device_id: this.equipInfo.imei,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ console.log(res);
|
|
|
+ // console.log(res.data.data);
|
|
|
+ this.newDataObj = res;
|
|
|
+ },
|
|
|
+ async getDeviceData() {
|
|
|
+ let res = await this.$myRequest({
|
|
|
+ method: 'post',
|
|
|
+ url: '/api/api_gateway?method=lpsxy.views.device_config',
|
|
|
+ data: {
|
|
|
+ d_id: this.equipInfo.d_id,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ console.log(res);
|
|
|
+ // console.log(res.data.data);
|
|
|
+ this.deviceObj = res;
|
|
|
+ },
|
|
|
+ change(index) {
|
|
|
+ this.current = index;
|
|
|
+ },
|
|
|
+ copy(item) {
|
|
|
+ console.log(item)
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: item,
|
|
|
+ success: function() {
|
|
|
+ console.log('success');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .bigBox {
|
|
|
+ position: relative;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background: #f7f7f7;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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%;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ p:first-child {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .expiretishi {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FF0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tishi {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin: 0rpx 0 0 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fillin {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ input {
|
|
|
+ width: 200rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ text-indent: 1em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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')
|
|
|
+ }
|
|
|
+
|
|
|
+ .infoBox {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cardInfo {
|
|
|
+ margin-top: 24rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .controlCard {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ background: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .preBtn{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 22%;
|
|
|
+ padding: 20rpx;
|
|
|
+ height: 80px;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ .btnBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 96rpx;
|
|
|
+ width: 96rpx;
|
|
|
+ border-radius: 96rpx;
|
|
|
+ color: #fff;
|
|
|
+ text{
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .preInfo{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 32rpx !important;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ .btnBox{
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ background: #14a478;
|
|
|
+ }
|
|
|
+ .textBox{
|
|
|
+ margin-left: 40rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ .name{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .green {
|
|
|
+ background: #14a478;
|
|
|
+ }
|
|
|
+ .yellow {
|
|
|
+ background: #f4a72f;
|
|
|
+ }
|
|
|
+ .danger {
|
|
|
+ background: #ff5951;
|
|
|
+ }
|
|
|
+ .blue{
|
|
|
+ background: #1890FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .noBg{
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ .u-border-bottom:after, .u-border-left:after, .u-border-right:after, .u-border-top-bottom:after, .u-border-top:after, .u-border:after{
|
|
|
+ content: " ";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+ -webkit-transform-origin: 0 0;
|
|
|
+ transform-origin: 0 0;
|
|
|
+ width: 199.8%;
|
|
|
+ height: 199.7%;
|
|
|
+ -webkit-transform: scale(.5);
|
|
|
+ transform: scale(.5);
|
|
|
+ border: .5px solid #E5EBE9;
|
|
|
+ z-index: 2;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
