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>
<view class="right"> <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> </view>
<view class="mid"> <view class="mid">
<view class="mid_left"> <view class="mid_left">
<view v-if="opflag"
<view v-if="opflag" style="border: 0;outline: none;width: 143rpx;padding-left: 0rpx;height: 143rpx;border-radius: 16rpx;" style="border: 0;outline: none;width: 143rpx;padding-left: 0rpx;height: 143rpx;border-radius: 16rpx;"
@click="btnpic"> @click="btnpic">
<image :src="imglist" mode="aspectFit" <image :src="imglist" mode="aspectFit"
style="width: 142rpx;height: 142rpx;border-radius: 20rpx;"></image> style="width: 142rpx;height: 142rpx;border-radius: 20rpx;"></image>
@ -25,23 +24,28 @@
<image v-else :src="imglist" mode="aspectFit" <image v-else :src="imglist" mode="aspectFit"
style="width: 142rpx;height: 142rpx;border-radius: 20rpx;"></image> style="width: 142rpx;height: 142rpx;border-radius: 20rpx;"></image>
<ksp-cropper mode="free" :width="142" :height="142" :maxWidth="1024" :maxHeight="1024" :url="url" <ksp-cropper mode="free" :width="142" :height="142" :maxWidth="1024" :maxHeight="1024"
@cancel="oncancel" @ok="onok"></ksp-cropper> :url="url" @cancel="oncancel" @ok="onok"></ksp-cropper>
</view> </view>
<view class="mid_right"> <view class="mid_right">
<view class="mid_top"> <view class="mid_top">
{{ deviceInfo.deviceName == null ? '' : deviceInfo.deviceName }} {{ deviceInfo.deviceName == null ? '' : deviceInfo.deviceName }}
<view class="" style="font-size: 26rpx;margin-top: 8rpx;"> <view class="" style="font-size: 26rpx;margin-top: 8rpx;">
更新时间{{deviceInfo.lastPullTime == null ? '--' : deviceInfo.lastPullTime}}</view> 更新时间{{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>
<view class="mid_bot"> <view class="mid_bot">
<view class="txt" v-if="deviceInfo"> <view class="txt" v-if="deviceInfo">
S/N码{{ deviceInfo.deviceNo == null ? '' : deviceInfo.deviceNo }}</view> 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==1"
<div class="tip" v-if="deviceInfo.onlineStatus==0" style="color: red;border: 2rpx solid;">离线</div> style="color: seagreen;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.onlineStatus==0" style="color: red;border: 2rpx solid;">离线
<div class="tip" v-if="deviceInfo.status==2" style="color: seagreen;border: 2rpx solid;">使用中</div> </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> <div class="tip" v-if="deviceInfo.status==3" style="color: red;">维修中</div>
</view> </view>
</view> </view>
@ -102,7 +106,9 @@
</view> </view>
<view class="cont" @click="topage(6)"> <view class="cont" @click="topage(6)">
<view class="top"> <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>
<view class="bot">充值</view> <view class="bot">充值</view>
</view> </view>
@ -124,32 +130,41 @@
</view> </view>
<view class="cont" @click="topage(5)"> <view class="cont" @click="topage(5)">
<view class="top"> <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> </image>
</view> </view>
<view class="bot">配网</view> <view class="bot">配网</view>
</view> </view>
<view class="cont" @click="topage(4)"> <view class="cont" @click="topage(4)">
<view class="top"> <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> </image>
</view> </view>
<view class="bot">设置</view> <view class="bot">设置</view>
</view> </view>
<view class="cont" @click="qrFun">
<view class="cont" @click="btnkq">
<view class="top"> <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>
<view class="bot" style="margin-top: 12rpx;">{{tdtxt}}</view> <view class="bot">分享</view>
</view> </view>
</view> </view>
</view> </view>
<view class="cont_box" style="padding-left: 30rpx;"> <view class="cont_box" style="padding-left: 30rpx;">
</view> </view>
</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>
<view class="tanc" v-if="vipflag"> <view class="tanc" v-if="vipflag">
@ -162,8 +177,6 @@
</view> </view>
</view> </view>
<view class="maskss" v-if="vipflag"></view> <view class="maskss" v-if="vipflag"></view>
<!-- 蓝牙连接 --> <!-- 蓝牙连接 -->
<view class="bluetoothbox" v-if="bluetoothflag"> <view class="bluetoothbox" v-if="bluetoothflag">
<view class="stop"> <view class="stop">
@ -173,9 +186,6 @@
请将手机与设备尽量靠近 请将手机与设备尽量靠近
</view> </view>
<image src="https://api.ccttiot.com/smartmeter/img/static/ucDphMKsozqwwllJTAKL" mode=""></image> <image src="https://api.ccttiot.com/smartmeter/img/static/ucDphMKsozqwwllJTAKL" mode=""></image>
<!-- <view class="xqx" @click="bluetoothflag = false">
取消连接
</view> -->
</view> </view>
<!-- 蓝牙连接失败 --> <!-- 蓝牙连接失败 -->
@ -200,13 +210,28 @@
</view> </view>
</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> </view>
</template> </template>
<script> <script>
var xBlufi = require("@/page_components/blufi/xBlufi.js") 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 uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts' import * as echarts from '@/components/uni-ec-canvas/echarts'
let chart = null let chart = null
@ -216,6 +241,7 @@
}, },
data() { data() {
return { return {
wemflag: false,
btnmsk: false, btnmsk: false,
bluetoothflag: false, bluetoothflag: false,
shibaiflag: false, shibaiflag: false,
@ -230,12 +256,7 @@
info: '', info: '',
checked: false, checked: false,
tittxt: "设备详情", tittxt: "设备详情",
titlist: [ titlist: [],
"全部",
"电表",
"水表",
],
tdtxt: '开启', tdtxt: '开启',
curtitidx: 0, curtitidx: 0,
id: '', id: '',
@ -257,6 +278,7 @@
opflag: true, opflag: true,
timer: null, timer: null,
url: "", url: "",
deviceNo: ''
} }
}, },
onLoad(option) { onLoad(option) {
@ -345,8 +367,57 @@
}, 100) }, 100)
this.getQiniuToken() this.getQiniuToken()
}, },
mounted() {
this.drawCanvas()
},
methods: { methods: {
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() { btnlyqx() {
this.shibaiflag = false this.shibaiflag = false
this.bluetoothflag = false this.bluetoothflag = false
@ -548,10 +619,10 @@
// //
getDevice(id) { getDevice(id) {
this.$u.get("/app/device/" + id).then((res) => { this.$u.get("/app/device/" + id).then((res) => {
// this.$forceUpdate()
if (res.code == 200) { if (res.code == 200) {
this.deviceInfo = res.data this.deviceInfo = res.data
this.storeId = res.data.storeId this.storeId = res.data.storeId
this.deviceNo = res.data.deviceNo
// this.qrResult = 'CTKG-' + res.data.mac // this.qrResult = 'CTKG-' + res.data.mac
this.qrResult = res.data.mac this.qrResult = res.data.mac
if (res.data.customPicture != null) { if (res.data.customPicture != null) {
@ -638,7 +709,6 @@
} }
// console.log(stause, 'stausestause'); // console.log(stause, 'stausestause');
this.$u.put(`/app/device/${this.deviceInfo.deviceId}/changePower?status=` + stause).then((res) => { this.$u.put(`/app/device/${this.deviceInfo.deviceId}/changePower?status=` + stause).then((res) => {
// this.$forceUpdate()
if (res.code == 200) { if (res.code == 200) {
// this.groupList=res.rows // this.groupList=res.rows
setTimeout(() => { setTimeout(() => {
@ -646,7 +716,6 @@
}, 2000) }, 2000)
// this.loadings=true // this.loadings=true
// this.initChart()
} else { } else {
uni.showToast({ uni.showToast({
title: res.msg, title: res.msg,
@ -672,7 +741,6 @@
}) })
}, },
// //
topage(num) { topage(num) {
this.btnmsk = true this.btnmsk = true
@ -685,7 +753,7 @@
let that = this let that = this
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '您确定要将电表时间归零吗?', content: '您确定要将设备时间归零吗?',
success: function(res) { success: function(res) {
if (res.confirm) { if (res.confirm) {
that.btnmsk = false that.btnmsk = false
@ -866,12 +934,14 @@
if (systemInfo.platform == 'android') { if (systemInfo.platform == 'android') {
// Android // Android
uni.navigateTo({ 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') { } else if (systemInfo.platform == 'ios') {
// iOS // iOS
uni.navigateTo({ 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 { } else {
@ -1025,6 +1095,7 @@
this.bluetoothflag = false this.bluetoothflag = false
}, 3000) }, 3000)
console.log("蓝牙未开启", options) console.log("蓝牙未开启", options)
this.shibaiflag = true
// uni.showToast({ // uni.showToast({
// title: '', // title: '',
// icon: 'none', // icon: 'none',
@ -1142,7 +1213,6 @@
</script> </script>
<style lang="scss"> <style lang="scss">
/deep/ .panel { /deep/ .panel {
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -1154,6 +1224,49 @@
overflow: hidden; overflow: hidden;
} }
.imgewmflag {
width: 750rpx;
height: 100vh;
background: #fff;
border-radius: 0rpx 0rpx 0rpx 0rpx;
z-index: 1;
position: fixed;
top: 0;
left: 0;
}
.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 { .bluetoothbox {
width: 100%; width: 100%;
@ -1164,31 +1277,37 @@
left: 0; left: 0;
z-index: 99; z-index: 99;
text-align: center; text-align: center;
.img { .img {
margin-top: 400rpx; margin-top: 400rpx;
width: 320rpx; width: 320rpx;
height: 320rpx; height: 320rpx;
} }
.one { .one {
font-size: 36rpx; font-size: 36rpx;
color: #000; color: #000;
} }
.two { .two {
margin-top: 30rpx; margin-top: 30rpx;
font-size: 24rpx; font-size: 24rpx;
color: #ccc; color: #ccc;
} }
.thr { .thr {
margin-top: 30rpx; margin-top: 30rpx;
font-size: 28rpx; font-size: 28rpx;
color: #ccc; color: #ccc;
} }
.anfour { .anfour {
display: flex; display: flex;
margin-top: 30rpx; margin-top: 30rpx;
justify-content: space-between; justify-content: space-between;
padding: 0 220rpx; padding: 0 220rpx;
box-sizing: border-box; box-sizing: border-box;
.qx { .qx {
width: 100rpx; width: 100rpx;
height: 70rpx; height: 70rpx;
@ -1197,6 +1316,7 @@
border: 1px solid #3D3D3D; border: 1px solid #3D3D3D;
border-radius: 10rpx; border-radius: 10rpx;
} }
.cx { .cx {
width: 200rpx; width: 200rpx;
height: 70rpx; height: 70rpx;
@ -1207,16 +1327,19 @@
border-radius: 10rpx; border-radius: 10rpx;
} }
} }
.stop { .stop {
font-size: 36rpx; font-size: 36rpx;
color: #000; color: #000;
margin-top: 380rpx; margin-top: 380rpx;
} }
.xtop { .xtop {
margin-top: 30rpx; margin-top: 30rpx;
font-size: 24rpx; font-size: 24rpx;
color: #ccc; color: #ccc;
} }
.xqx { .xqx {
width: 530rpx; width: 530rpx;
height: 90rpx; height: 90rpx;
@ -1227,12 +1350,14 @@
margin: auto; margin: auto;
margin-top: 200rpx; margin-top: 200rpx;
} }
image { image {
width: 500rpx; width: 500rpx;
height: 500rpx; height: 500rpx;
margin-top: 100rpx; margin-top: 100rpx;
} }
} }
/deep/ .u-title { /deep/ .u-title {
padding-bottom: 22rpx; padding-bottom: 22rpx;
} }
@ -1244,6 +1369,7 @@
page { page {
background-color: #F7FAFE; background-color: #F7FAFE;
} }
.maskss { .maskss {
width: 750rpx; width: 750rpx;
height: 100vh; height: 100vh;
@ -1255,6 +1381,7 @@
top: 0; top: 0;
left: 0; left: 0;
} }
.tanc { .tanc {
width: 610rpx; width: 610rpx;
height: 282rpx; height: 282rpx;
@ -1320,7 +1447,7 @@
.card1 { .card1 {
padding: 34rpx 0 0 40rpx; padding: 34rpx 0 0 40rpx;
width: 670rpx; width: 670rpx;
height: 300rpx; height: 320rpx;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0rpx 14rpx 35rpx 0rpx rgba(53, 140, 255, 0.1); box-shadow: 0rpx 14rpx 35rpx 0rpx rgba(53, 140, 255, 0.1);
border-radius: 28rpx 28rpx 28rpx 28rpx; border-radius: 28rpx 28rpx 28rpx 28rpx;
@ -1363,7 +1490,7 @@
} }
.mid_right { .mid_right {
margin-left: 40rpx; margin-left: 20rpx;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -1379,6 +1506,7 @@
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
margin-top: 6rpx;
.txt { .txt {
font-size: 26rpx; font-size: 26rpx;
@ -1457,6 +1585,7 @@
} }
} }
} }
.bot_right { .bot_right {
display: flex; display: flex;
width: 100%; width: 100%;
@ -1465,6 +1594,7 @@
padding-right: 80rpx; padding-right: 80rpx;
box-sizing: border-box; box-sizing: border-box;
margin-top: 30rpx; margin-top: 30rpx;
.cont { .cont {
.tit { .tit {
font-size: 28rpx; font-size: 28rpx;

View File

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