This commit is contained in:
3321822538@qq.com 2024-09-02 18:03:58 +08:00
parent 3ba83c677e
commit eba1773286
2 changed files with 573 additions and 444 deletions

View File

@ -10,14 +10,13 @@
设备
</view>
<view class="right">
<!-- <image class="img1" src="https://api.ccttiot.com/smartmeter/img/static/uGvS4RQvbw7OOfhzy6xf" mode="" style="margin-right: 30rpx;" @click="opendevices"></image>
<image class="img1" src="https://api.ccttiot.com/smartmeter/img/static/uNEKwe2WKsJdtQzOdEay" mode="" @click="toewm()"></image> -->
</view>
</view>
<view class="mid">
<view class="mid_left">
<view v-if="opflag" style="border: 0;outline: none;width: 143rpx;padding-left: 0rpx;height: 143rpx;border-radius: 16rpx;"
<view v-if="opflag"
style="border: 0;outline: none;width: 143rpx;padding-left: 0rpx;height: 143rpx;border-radius: 16rpx;"
@click="btnpic">
<image :src="imglist" mode="aspectFit"
style="width: 142rpx;height: 142rpx;border-radius: 20rpx;"></image>
@ -25,23 +24,28 @@
<image v-else :src="imglist" mode="aspectFit"
style="width: 142rpx;height: 142rpx;border-radius: 20rpx;"></image>
<ksp-cropper mode="free" :width="142" :height="142" :maxWidth="1024" :maxHeight="1024" :url="url"
@cancel="oncancel" @ok="onok"></ksp-cropper>
<ksp-cropper mode="free" :width="142" :height="142" :maxWidth="1024" :maxHeight="1024"
:url="url" @cancel="oncancel" @ok="onok"></ksp-cropper>
</view>
<view class="mid_right">
<view class="mid_top">
{{ deviceInfo.deviceName == null ? '' : deviceInfo.deviceName }}
<view class="" style="font-size: 26rpx;margin-top: 8rpx;">
更新时间{{deviceInfo.lastPullTime == null ? '--' : deviceInfo.lastPullTime}}</view>
<text
style="font-size: 24rpx;color: #8883F0;display: inline-block;border: 1px solid #8883F0;padding: 5rpx;box-sizing: border-box;border-radius: 10rpx;">{{deviceInfo.model == undefined ? '' : deviceInfo.model}}</text>
</view>
<view class="mid_bot">
<view class="txt" v-if="deviceInfo">
S/N码{{ deviceInfo.deviceNo == null ? '' : deviceInfo.deviceNo }}</view>
<div class="tip" v-if="deviceInfo.onlineStatus==1" style="color: seagreen;border: 2rpx solid;">在线</div>
<div class="tip" v-if="deviceInfo.onlineStatus==0" style="color: red;border: 2rpx solid;">离线</div>
<div class="tip" v-if="deviceInfo.status==1" style="color: seagreen;border: 2rpx solid;">空闲</div>
<div class="tip" v-if="deviceInfo.status==2" style="color: seagreen;border: 2rpx solid;">使用中</div>
<div class="tip" v-if="deviceInfo.onlineStatus==1"
style="color: seagreen;border: 2rpx solid;">在线</div>
<div class="tip" v-if="deviceInfo.onlineStatus==0" style="color: red;border: 2rpx solid;">离线
</div>
<div class="tip" v-if="deviceInfo.status==1" style="color: seagreen;border: 2rpx solid;">空闲
</div>
<div class="tip" v-if="deviceInfo.status==2" style="color: seagreen;border: 2rpx solid;">使用中
</div>
<div class="tip" v-if="deviceInfo.status==3" style="color: red;">维修中</div>
</view>
</view>
@ -102,7 +106,9 @@
</view>
<view class="cont" @click="topage(6)">
<view class="top">
<image style="width: 58rpx;height: 58rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uAnBmmayp3tVGwXntdaM" mode=""></image>
<image style="width: 58rpx;height: 58rpx;"
src="https://api.ccttiot.com/smartmeter/img/static/uAnBmmayp3tVGwXntdaM" mode="">
</image>
</view>
<view class="bot">充值</view>
</view>
@ -124,32 +130,41 @@
</view>
<view class="cont" @click="topage(5)">
<view class="top">
<image style="width: 58rpx;height: 58rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uik9veDG6pMVG5M1Vxze" mode="">
<image style="width: 58rpx;height: 58rpx;"
src="https://api.ccttiot.com/smartmeter/img/static/uik9veDG6pMVG5M1Vxze" mode="">
</image>
</view>
<view class="bot">配网</view>
</view>
<view class="cont" @click="topage(4)">
<view class="top">
<image style="width: 58rpx;height: 58rpx;" src="https://api.ccttiot.com/smartmeter/img/static/u2Uco0iXf8aure0H2ihz" mode="">
<image style="width: 58rpx;height: 58rpx;"
src="https://api.ccttiot.com/smartmeter/img/static/u2Uco0iXf8aure0H2ihz" mode="">
</image>
</view>
<view class="bot">设置</view>
</view>
<view class="cont" @click="btnkq">
<view class="cont" @click="qrFun">
<view class="top">
<u-switch v-model="checked" active-color="#8883F0"></u-switch>
<image style="width: 58rpx;height: 58rpx;"
src="https://api.ccttiot.com/smartmeter/img/static/u7o1YnOGEKxM6KZ4WGXO" mode="">
</image>
</view>
<view class="bot" style="margin-top: 12rpx;">{{tdtxt}}</view>
<view class="bot">分享</view>
</view>
</view>
</view>
<view class="cont_box" style="padding-left: 30rpx;">
</view>
</view>
<view class="conts" @click="btnkq">
<view class="top">
<u-switch v-model="checked" active-color="#8883F0"></u-switch>
</view>
<view class="bot" >手动操作:{{tdtxt}}</view>
</view>
</view>
<view class="tanc" v-if="vipflag">
@ -162,8 +177,6 @@
</view>
</view>
<view class="maskss" v-if="vipflag"></view>
<!-- 蓝牙连接 -->
<view class="bluetoothbox" v-if="bluetoothflag">
<view class="stop">
@ -173,9 +186,6 @@
请将手机与设备尽量靠近
</view>
<image src="https://api.ccttiot.com/smartmeter/img/static/ucDphMKsozqwwllJTAKL" mode=""></image>
<!-- <view class="xqx" @click="bluetoothflag = false">
取消连接
</view> -->
</view>
<!-- 蓝牙连接失败 -->
@ -200,13 +210,28 @@
</view>
</view>
<view v-if="btnmsk" style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background-color: #000;opacity: .1;z-index: 999;"></view>
<!-- 展示二维码 -->
<view class="imgewm" v-if="wemflag" @longpress="saveCanvas">
<canvas canvas-id="qrcode" style="height: 100%;margin: 0 auto;" />
<view class="" style="width: 100%;text-align: center;margin-top: 20rpx;">
SN:{{deviceNo}}
</view>
<view class="" style="border: 1px solid; padding: 20rpx;box-sizing: border-box;width: 100%;text-align: center;margin-top: 400rpx;" @click="wemflag = false">
关闭二维码
</view>
</view>
<view class="imgewmflag" v-if="wemflag" @click.stop="ewmyc"></view>
<view v-if="btnmsk"
style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background-color: #000;opacity: .1;z-index: 999;">
</view>
</view>
</template>
<script>
var xBlufi = require("@/page_components/blufi/xBlufi.js")
import uQRCode from '@/common/uqrcode.js'
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts'
let chart = null
@ -216,9 +241,10 @@
},
data() {
return {
btnmsk:false,
bluetoothflag:false,
shibaiflag:false,
wemflag: false,
btnmsk: false,
bluetoothflag: false,
shibaiflag: false,
bgc: {
backgroundColor: "#8883f0",
},
@ -228,18 +254,13 @@
deviceInfo: {},
loadings: false,
info: '',
checked:false,
checked: false,
tittxt: "设备详情",
titlist: [
"全部",
"电表",
"水表",
],
tdtxt:'开启',
titlist: [],
tdtxt: '开启',
curtitidx: 0,
id: '',
focus:false,
focus: false,
timeday: '',
imglist: '',
token: '',
@ -251,21 +272,22 @@
storeId: '',
qrResult: '',
devicesList: [],
setMode:null,
vipflag:false,
cztime:'',
opflag:true,
setMode: null,
vipflag: false,
cztime: '',
opflag: true,
timer: null,
url: "",
deviceNo: ''
}
},
onLoad(option) {
let id = option.id
this.id = id
// this.getDevice(id)
if(option.flag){
if (option.flag) {
this.opflag = false
}else{
} else {
this.opflag = true
}
// xBlufi.initXBlufi(1);
@ -292,7 +314,7 @@
},
//
onShareAppMessage: function () {
onShareAppMessage: function() {
return {
title: '创想物联',
path: '/pages/shouye/index'
@ -300,7 +322,7 @@
},
//
onShareTimeline: function () {
onShareTimeline: function() {
return {
title: '创想物联',
query: '',
@ -345,16 +367,65 @@
}, 100)
this.getQiniuToken()
},
mounted() {
this.drawCanvas()
},
methods: {
btnlyqx(){
drawCanvas() {
const ctx = uni.createCanvasContext('qrcode', this);
ctx.setFillStyle('#fff');
ctx.fillRect(10, 10, 250, 250);
ctx.draw();
},
//
saveCanvas() {
uni.canvasToTempFilePath({
canvasId: 'qrcode',
success: (res) => {
console.log(res.tempFilePath); //
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
uni.showToast({
title: '保存成功',
icon: 'success'
});
}
});
},
fail: (err) => {
console.error(err);
}
});
},
//****//
qrFun: function() {
this.wemflag = true
uQRCode.make({
canvasId: 'qrcode',
// componentInstance: this,
text: 'https://kg.chuantewulian.cn/w?s=' + this.deviceNo,
size: 250,
margin: 0,
backgroundColor: '#ffffff',
foregroundColor: '#000000',
fileType: 'jpg',
errorCorrectLevel: uQRCode.errorCorrectLevel.H,
})
},
ewmyc() {
this.wemflag = false
},
btnlyqx() {
this.shibaiflag = false
this.bluetoothflag = false
},
//
btnkq(){
if(this.deviceInfo.onlineStatus == 1){
if(this.tdtxt == '开启'){
btnkq() {
if (this.deviceInfo.onlineStatus == 1) {
if (this.tdtxt == '开启') {
this.$u.put(`/app/device/${this.id}/changePower?status=0`).then((res) => {
if (res.code == 200) {
this.tdtxt = '关闭'
@ -364,7 +435,7 @@
icon: 'success',
duration: 2000
})
}else{
} else {
this.checked = false
uni.showToast({
title: res.msg,
@ -373,7 +444,7 @@
})
}
})
}else{
} else {
this.$u.put(`/app/device/${this.id}/changePower?status=1`).then((res) => {
if (res.code == 200) {
this.checked = true
@ -383,7 +454,7 @@
icon: 'success',
duration: 2000
})
}else{
} else {
this.checked = false
uni.showToast({
title: res.msg,
@ -393,8 +464,8 @@
}
})
}
}else{
if(this.setMode == null){
} else {
if (this.setMode == null) {
this.btnmsk = false
this.shibaiflag = false
this.bluetoothflag = true
@ -421,55 +492,55 @@
if (index !== -1) {
name = this.name.slice(index + 1)
}
if(this.deviceInfo.powerStatus == 0){
if (this.deviceInfo.powerStatus == 0) {
this.checked = false
}else{
} else {
this.checked = true
}
}, 1000)
}else{
} else {
// console.log(this.tdtxt,'020202');
if(this.tdtxt == '开启'){
if (this.tdtxt == '开启') {
let that = this
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
setTimeout(()=> {
setTimeout(() => {
// console.log('close');
that.tdtxt = '关闭'
that.checked = false
xBlufi.notifySendCustomData({
customData: 'close'
})
},1000)
}, 1000)
},
fail(err) {
console.error('获取已连接蓝牙设备信息失败:',err)
console.error('获取已连接蓝牙设备信息失败:', err)
}
})
}
}
})
}else{
} else {
let that = this
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
setTimeout(()=> {
setTimeout(() => {
// console.log('open');
that.tdtxt = '开启'
that.checked = true
xBlufi.notifySendCustomData({
customData: 'open'
})
},1000)
}, 1000)
},
fail(err) {
console.error('获取已连接蓝牙设备信息失败:',err)
console.error('获取已连接蓝牙设备信息失败:', err)
}
})
}
@ -516,8 +587,8 @@
_this.imglist = _this.userImgs
// console.log(_this.imglist,'_this.imglist_this.imglist')
let data = {
deviceId:_this.id,
customPicture:_this.imglist
deviceId: _this.id,
customPicture: _this.imglist
}
_this.putdevice(data)
}
@ -548,10 +619,10 @@
//
getDevice(id) {
this.$u.get("/app/device/" + id).then((res) => {
// this.$forceUpdate()
if (res.code == 200) {
this.deviceInfo = res.data
this.storeId = res.data.storeId
this.deviceNo = res.data.deviceNo
// this.qrResult = 'CTKG-' + res.data.mac
this.qrResult = res.data.mac
if (res.data.customPicture != null) {
@ -559,14 +630,14 @@
} else {
this.imglist = res.data.picture
}
if(this.deviceInfo.expireTime == null){
if (this.deviceInfo.expireTime == null) {
this.timeday = 0
}else{
} else {
let expireTimeStr = this.deviceInfo.expireTime
let expireTimeParts = expireTimeStr.split(" ");
let expireDateParts = expireTimeParts[0].split("-");
let expireTimePartsTime = expireTimeParts[1].split(":");
let expireDate = new Date(expireDateParts[0], expireDateParts[1] - 1, expireDateParts[2],expireTimePartsTime[0], expireTimePartsTime[1], expireTimePartsTime[2])
let expireDate = new Date(expireDateParts[0], expireDateParts[1] - 1, expireDateParts[2], expireTimePartsTime[0], expireTimePartsTime[1], expireTimePartsTime[2])
let now = new Date()
let differenceInMs = expireDate - now
if (differenceInMs <= 0) {
@ -576,10 +647,10 @@
this.startTimer()
}
}
if(res.data.powerStatus == 0){
if (res.data.powerStatus == 0) {
this.checked = false
this.tdtxt = '关闭'
}else{
} else {
this.checked = true
this.tdtxt = '开启'
}
@ -638,7 +709,6 @@
}
// console.log(stause, 'stausestause');
this.$u.put(`/app/device/${this.deviceInfo.deviceId}/changePower?status=` + stause).then((res) => {
// this.$forceUpdate()
if (res.code == 200) {
// this.groupList=res.rows
setTimeout(() => {
@ -646,7 +716,6 @@
}, 2000)
// this.loadings=true
// this.initChart()
} else {
uni.showToast({
title: res.msg,
@ -672,7 +741,6 @@
})
},
//
topage(num) {
this.btnmsk = true
@ -685,7 +753,7 @@
let that = this
uni.showModal({
title: '提示',
content: '您确定要将电表时间归零吗?',
content: '您确定要将设备时间归零吗?',
success: function(res) {
if (res.confirm) {
that.btnmsk = false
@ -707,7 +775,7 @@
icon: 'none',
duration: 2000
})
}else if(res.code == 500){
} else if (res.code == 500) {
uni.showToast({
title: res.msg,
icon: 'none',
@ -776,7 +844,7 @@
this.shibaiflag = false
this.bluetoothflag = true
// console.log(this.deviceId,'idididididdidii');
if(this.setMode == null){
if (this.setMode == null) {
xBlufi.initXBlufi(1)
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
xBlufi.notifyStartDiscoverBle({
@ -815,15 +883,15 @@
if (systemInfo.platform == 'android') {
// Android
uni.navigateTo({
url: '/page_components/wifilist/index?deviceId=' +this.deviceId + '&name=' +this.name
url: '/page_components/wifilist/index?deviceId=' + this.deviceId + '&name=' + this.name
})
} else if (systemInfo.platform == 'ios') {
// iOS
uni.navigateTo({
url: '/page_fenbao/device/wifivideo?deviceId=' +this.deviceId + '&name=' +this.name
url: '/page_fenbao/device/wifivideo?deviceId=' + this.deviceId + '&name=' + this.name
})
}
}else if(res.msg == '设备编号和mac不能同时为空'){
} else if (res.msg == '设备编号和mac不能同时为空') {
this.shibaiflag = true
this.bluetoothflag = false
// uni.showToast({
@ -841,7 +909,7 @@
}
})
}, 1000)
}else{
} else {
let name = ''
let index = this.name.indexOf('-')
if (index !== -1) {
@ -866,16 +934,18 @@
if (systemInfo.platform == 'android') {
// Android
uni.navigateTo({
url: '/page_components/wifilist/index?deviceId=' +this.deviceId + '&name=' +this.name
url: '/page_components/wifilist/index?deviceId=' + this.deviceId +
'&name=' + this.name
})
} else if (systemInfo.platform == 'ios') {
// iOS
uni.navigateTo({
url: '/page_fenbao/device/wifivideo?deviceId=' +this.deviceId + '&name=' +this.name
url: '/page_fenbao/device/wifivideo?deviceId=' + this.deviceId +
'&name=' + this.name
})
}
}else {
if(res.msg == '设备编号和mac不能同时为空'){
} else {
if (res.msg == '设备编号和mac不能同时为空') {
this.shibaiflag = true
this.bluetoothflag = false
uni.hideLoading()
@ -889,7 +959,7 @@
this.bluetoothflag = false
uni.hideLoading()
uni.showToast({
title:res.msg,
title: res.msg,
icon: 'none',
duration: 2000
})
@ -898,13 +968,13 @@
}
})
}
}else if (num == 6){
} else if (num == 6) {
this.btnmsk = false
this.vipflag = true
this.focus = true
}
},
trueje(){
trueje() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
@ -912,7 +982,7 @@
let id = this.deviceInfo.deviceId
this.vipflag = false
this.$u.put('/app/device/addTime/' + id + '?amount=' + this.cztime).then(res => {
if(res.code == 200){
if (res.code == 200) {
uni.showToast({
title: '充值成功',
icon: 'success',
@ -920,7 +990,7 @@
})
this.getDevice(this.id)
this.cztime = ''
}else if(res.code == 500){
} else if (res.code == 500) {
uni.showToast({
title: res.msg,
icon: 'none',
@ -957,7 +1027,7 @@
}
})
},
btnqx(){
btnqx() {
this.vipflag = false
this.cztime = ''
},
@ -973,7 +1043,7 @@
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
let ver_data = this.parseCustomData(options.data)
this.setMode = Math.floor(ver_data.setMode / 60)
console.log("1收到设备发来的自定义数据结果", ver_data,this.setMode)
console.log("1收到设备发来的自定义数据结果", ver_data, this.setMode)
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
if (options.result) {
@ -1020,11 +1090,12 @@
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
if (!options.result) {
setTimeout(()=>{
setTimeout(() => {
uni.hideLoading()
this.bluetoothflag = false
},3000)
}, 3000)
console.log("蓝牙未开启", options)
this.shibaiflag = true
// uni.showToast({
// title: '',
// icon: 'none',
@ -1142,8 +1213,7 @@
</script>
<style lang="scss">
/deep/ .panel{
/deep/ .panel {
position: fixed;
width: 100%;
height: 100%;
@ -1154,8 +1224,51 @@
overflow: hidden;
}
.imgewmflag {
width: 750rpx;
height: 100vh;
background: #fff;
border-radius: 0rpx 0rpx 0rpx 0rpx;
z-index: 1;
position: fixed;
top: 0;
left: 0;
}
.bluetoothbox{
.imgewm {
width: 250px;
height: 250px;
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.conts {
display: flex;
justify-content: space-between;
margin-top: 50rpx;
align-items: center;
width: 100%;
height: 100%;
padding: 20rpx;
border-radius: 30rpx;
box-sizing: border-box;
background-color: #fff;
.bot {
// width: 100%;
// height: 80rpx;
// line-height: 80rpx;
// text-align: center;
// border-radius: 30rpx;
// background-color: #fff;
// margin-top: 30rpx;
font-size: 30rpx;
}
}
.bluetoothbox {
width: 100%;
height: 100vh;
background-color: #f4f1f6;
@ -1164,32 +1277,38 @@
left: 0;
z-index: 99;
text-align: center;
.img{
.img {
margin-top: 400rpx;
width: 320rpx;
height: 320rpx;
}
.one{
.one {
font-size: 36rpx;
color: #000;
}
.two{
.two {
margin-top: 30rpx;
font-size: 24rpx;
color: #ccc;
}
.thr{
.thr {
margin-top: 30rpx;
font-size: 28rpx;
color: #ccc;
}
.anfour{
.anfour {
display: flex;
margin-top: 30rpx;
justify-content: space-between;
padding: 0 220rpx;
box-sizing: border-box;
.qx{
.qx {
width: 100rpx;
height: 70rpx;
line-height: 70rpx;
@ -1197,7 +1316,8 @@
border: 1px solid #3D3D3D;
border-radius: 10rpx;
}
.cx{
.cx {
width: 200rpx;
height: 70rpx;
line-height: 70rpx;
@ -1207,17 +1327,20 @@
border-radius: 10rpx;
}
}
.stop{
.stop {
font-size: 36rpx;
color: #000;
margin-top: 380rpx;
}
.xtop{
.xtop {
margin-top: 30rpx;
font-size: 24rpx;
color: #ccc;
}
.xqx{
.xqx {
width: 530rpx;
height: 90rpx;
line-height: 90rpx;
@ -1227,12 +1350,14 @@
margin: auto;
margin-top: 200rpx;
}
image{
image {
width: 500rpx;
height: 500rpx;
margin-top: 100rpx;
}
}
/deep/ .u-title {
padding-bottom: 22rpx;
}
@ -1244,6 +1369,7 @@
page {
background-color: #F7FAFE;
}
.maskss {
width: 750rpx;
height: 100vh;
@ -1255,6 +1381,7 @@
top: 0;
left: 0;
}
.tanc {
width: 610rpx;
height: 282rpx;
@ -1320,7 +1447,7 @@
.card1 {
padding: 34rpx 0 0 40rpx;
width: 670rpx;
height: 300rpx;
height: 320rpx;
background: #FFFFFF;
box-shadow: 0rpx 14rpx 35rpx 0rpx rgba(53, 140, 255, 0.1);
border-radius: 28rpx 28rpx 28rpx 28rpx;
@ -1363,7 +1490,7 @@
}
.mid_right {
margin-left: 40rpx;
margin-left: 20rpx;
display: flex;
flex-wrap: wrap;
@ -1379,6 +1506,7 @@
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-top: 6rpx;
.txt {
font-size: 26rpx;
@ -1457,6 +1585,7 @@
}
}
}
.bot_right {
display: flex;
width: 100%;
@ -1465,6 +1594,7 @@
padding-right: 80rpx;
box-sizing: border-box;
margin-top: 30rpx;
.cont {
.tit {
font-size: 28rpx;

View File

@ -93,7 +93,6 @@
sjmeoey:'',
txlist:'',
channelId:'',
listflag:true
}
},