Merge branch 'main' of http://47.107.152.87:3000/liubiao/APP
# Conflicts: # .gitignore # pages/common/index/index.vue # unpackage/dist/dev/app-plus/app-config-service.js # unpackage/dist/dev/app-plus/app-service.js # unpackage/dist/dev/app-plus/app-view.js # unpackage/dist/dev/app-plus/manifest.json # utils/request.js
This commit is contained in:
liub
106
pages/common/allType/index.vue
Normal file
106
pages/common/allType/index.vue
Normal file
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<view class="alltype">
|
||||
<!-- 车辆列表 -->
|
||||
<view class="vehicle-list" v-if="vehicles.length>0">
|
||||
<view v-for="(item, index) in vehicles" :key="index">
|
||||
<view class="vehicle-item" @click="alltypeInfo(item)">
|
||||
<image src="/static/images/bip.6.png" mode="" class="IMG"></image>
|
||||
</view>
|
||||
<view class="plate-number">{{ item.typeName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="noDATA" style="display: block;width: wight:100%">
|
||||
<view> <uni-icons type="image-filled" size="120" color="rgba(255, 255, 255, 0.9)"></uni-icons>
|
||||
</view>
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
deviceTypeList,
|
||||
} from '@/api/common/index.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
vehicles: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTab() {
|
||||
deviceTypeList({}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.vehicles = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
alltypeInfo(item) {
|
||||
uni.switchTab({
|
||||
url: '/pages/common/index/index',
|
||||
success: (res) => {
|
||||
res.eventChannel.emit('index', {
|
||||
data: item
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
this.getTab()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.alltype {
|
||||
padding: 30rpx;
|
||||
background: rgba(18, 18, 18, 1);
|
||||
min-height: 100vh;
|
||||
color: #FFFFFF;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
}
|
||||
|
||||
.vehicle-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.list-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.vehicle-item {
|
||||
padding: 24rpx 0;
|
||||
background: rgba(26, 26, 26, 1);
|
||||
border-radius: 16rpx;
|
||||
width: 156rpx;
|
||||
height: 156rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
line-height: 156rpx;
|
||||
|
||||
}
|
||||
|
||||
.IMG {
|
||||
width: 100rpx;
|
||||
height: 72rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.plate-number {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.noDATA {
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
transform: translate(-0%, 100%);
|
||||
}
|
||||
</style>
|
||||
@ -55,15 +55,14 @@
|
||||
<script>
|
||||
import {
|
||||
login,
|
||||
sendRegisterSms
|
||||
resourceSmsCode
|
||||
} from '@/api/common/login.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showView: false,
|
||||
//codebtn: '获取验证码',
|
||||
phone: '13058067817', //手机号码
|
||||
code: "123456", //验证码
|
||||
code: "", //验证码
|
||||
agreed: false,
|
||||
isCounting: false,
|
||||
countdown: 0,
|
||||
@ -92,20 +91,33 @@
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
// 调用发送验证码接口
|
||||
await sendRegisterSms({
|
||||
phoneNumber: this.phone
|
||||
})
|
||||
//倒计时
|
||||
this.countdown = 60
|
||||
const timer = setInterval(() => {
|
||||
this.countdown--
|
||||
if (this.countdown <= 0) clearInterval(timer)
|
||||
}, 1000)
|
||||
uni.showToast({
|
||||
title: '验证码已发送',
|
||||
icon: 'none'
|
||||
const res = await resourceSmsCode({
|
||||
phonenumber: this.phone
|
||||
})
|
||||
if (res.code == 200) {
|
||||
// 更新倒计时状态
|
||||
this.isCounting = true;
|
||||
this.showView = true;
|
||||
this.countdown = 60
|
||||
const timer = setInterval(() => {
|
||||
this.countdown--
|
||||
if (this.countdown <= 0) {
|
||||
clearInterval(timer)
|
||||
this.isCounting = false;
|
||||
this.showView = false;
|
||||
}
|
||||
}, 1000)
|
||||
uni.showToast({
|
||||
title: '验证码已发送',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
} catch (error) {}
|
||||
},
|
||||
// 勾选同意
|
||||
@ -146,6 +158,7 @@
|
||||
tenantId: '894078' //租户ID
|
||||
})
|
||||
if (res.code == 200) {
|
||||
console.log(res, 'ressss');
|
||||
uni.hideLoading()
|
||||
uni.setStorageSync('token', res.data.access_token) // 缓存token
|
||||
uni.setStorageSync('clientID', res.data.client_id) // 缓存token
|
||||
@ -256,7 +269,7 @@
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: rgb(187, 230, 0);
|
||||
}
|
||||
|
||||
.agreement {
|
||||
|
||||
@ -1,37 +1,236 @@
|
||||
<template>
|
||||
<view class="page-section page-section-gap">
|
||||
<map class="map" :latitude="latitude" :longitude="longitude":show-location="true"
|
||||
:markers="covers">
|
||||
</map>
|
||||
</view>
|
||||
<view class="map-container">
|
||||
<!-- 背景保护层 -->
|
||||
<view class="map-background"></view>
|
||||
<view id="mapWrapper" ref="mapRef" class="map-wrapper"></view>
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="loading" class="loading-mask">
|
||||
<view class="loading-content">地图加载中...</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: 0, // 使用 marker点击事件 需要填写id
|
||||
title: 'map',
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
covers: [{
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
|
||||
}],
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hideLoading() {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script module="amap" lang="renderjs">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
markers: [],
|
||||
customPopup: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 初始设置背景色
|
||||
const container = document.getElementById('mapWrapper')
|
||||
container.style.backgroundColor = '#121212'
|
||||
container.style.transition = 'background 0.5s'
|
||||
|
||||
this.initMap()
|
||||
},
|
||||
methods: {
|
||||
async loadScript(url) {
|
||||
return new Promise((resolve) => {
|
||||
const script = document.createElement('script')
|
||||
script.src = url
|
||||
script.onload = resolve
|
||||
document.head.appendChild(script)
|
||||
})
|
||||
},
|
||||
|
||||
async initMap() {
|
||||
try {
|
||||
// 动态加载SDK
|
||||
if (!window.AMap) {
|
||||
await this.loadScript(
|
||||
'https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307'
|
||||
)
|
||||
}
|
||||
|
||||
const container = document.getElementById('mapWrapper')
|
||||
container.innerHTML = `
|
||||
<div id="amapContainer" style="
|
||||
width:100%;
|
||||
height:100%;
|
||||
opacity:0;
|
||||
transition:opacity 0.8s ease-out;
|
||||
background:#121212;
|
||||
"></div>
|
||||
`
|
||||
|
||||
// 初始化地图
|
||||
this.map = new AMap.Map('amapContainer', {
|
||||
viewMode: '3D',
|
||||
zoom: 13,
|
||||
center: [114.305, 30.592],
|
||||
mapStyle: 'amap://styles/grey'
|
||||
})
|
||||
|
||||
// 地图加载完成后淡入
|
||||
this.map.on('complete', () => {
|
||||
document.getElementById('amapContainer').style.opacity = 1
|
||||
this.$ownerInstance.callMethod('hideLoading')
|
||||
|
||||
// 添加标记点
|
||||
const wuhanPoints = [
|
||||
{ lnglat: [114.404, 30.507], name: "华中科技大学" },
|
||||
{ lnglat: [114.428, 30.476], name: "光谷金融港" },
|
||||
{ lnglat: [114.433, 30.504], name: "武汉东站" }
|
||||
]
|
||||
wuhanPoints.forEach(point => {
|
||||
this.addMarker(point.lnglat, point.name)
|
||||
})
|
||||
})
|
||||
|
||||
// 创建自定义弹窗
|
||||
this.createCustomPopup()
|
||||
|
||||
} catch (e) {
|
||||
console.error('初始化失败:', e)
|
||||
this.$ownerInstance.callMethod('hideLoading')
|
||||
}
|
||||
},
|
||||
|
||||
createCustomPopup() {
|
||||
this.customPopup = document.createElement('div')
|
||||
this.customPopup.className = 'custom-map-popup'
|
||||
this.customPopup.innerHTML = `
|
||||
<div class="popup-content">
|
||||
<div class="popup-title"></div>
|
||||
</div>
|
||||
`
|
||||
this.customPopup.style.display = 'none'
|
||||
document.getElementById('amapContainer').appendChild(this.customPopup)
|
||||
},
|
||||
|
||||
addMarker(position, title) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(...position),
|
||||
map: this.map,
|
||||
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
|
||||
})
|
||||
|
||||
marker.on('click', () => {
|
||||
this.showCustomPopup(position, title)
|
||||
})
|
||||
|
||||
this.markers.push(marker)
|
||||
return marker
|
||||
},
|
||||
|
||||
showCustomPopup(position, title) {
|
||||
const pixel = this.map.lngLatToContainer(position)
|
||||
this.customPopup.querySelector('.popup-title').textContent = title
|
||||
this.customPopup.style.display = 'block'
|
||||
this.customPopup.style.left = `${pixel.x}px`
|
||||
this.customPopup.style.top = `${pixel.y}px`
|
||||
|
||||
this.map.on('click', this.hideCustomPopup)
|
||||
},
|
||||
|
||||
hideCustomPopup() {
|
||||
if (this.customPopup) {
|
||||
this.customPopup.style.display = 'none'
|
||||
}
|
||||
this.map.off('click', this.hideCustomPopup)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
/* 基础样式 */
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #121212;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.map-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 加载提示 */
|
||||
.loading-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #121212;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
color: rgba(255,255,255,0.9);
|
||||
font-size: 16px;
|
||||
padding: 12px 24px;
|
||||
background: rgba(0,0,0,0.7);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.custom-map-popup {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
transform: translate(-50%, -100%);
|
||||
min-width: 200rpx;
|
||||
pointer-events: none;
|
||||
animation: popupFadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background: rgba(18,45,74,0.95);
|
||||
border-radius: 16rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.popup-content:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-width: 8px 8px 0;
|
||||
border-style: solid;
|
||||
border-color: rgba(18,45,74,0.95) transparent transparent;
|
||||
}
|
||||
|
||||
@keyframes popupFadeIn {
|
||||
from { opacity: 0; transform: translate(-50%, -90%); }
|
||||
to { opacity: 1; transform: translate(-50%, -100%); }
|
||||
}
|
||||
</style>
|
||||
@ -139,7 +139,7 @@
|
||||
// 获取图片列表
|
||||
callOtherApi() {
|
||||
let data = {
|
||||
deviceId: this.deviceID,
|
||||
businessId: this.deviceID,
|
||||
fileType: '1' //文件类型(1:操作说明，2:产品参数)
|
||||
}
|
||||
fileInfo(data).then((res) => {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<custom-navbar title="操作视频" :showBack="true" backgroundColor="#202020" color="#FFFFFF"></custom-navbar>
|
||||
<view class="device-page" :style="{ paddingTop: navBarHeight + 'px' }">
|
||||
<scroll-view scroll-y>
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action ref="swipeAction">
|
||||
<block v-for="(item, index) in videoList" :key="index">
|
||||
<uni-swipe-action-item :right-options="item.showConfirm ? confirmOptions : deleteOptions"
|
||||
@click="handleSwipeClick($event, index,item)" class="content">
|
||||
@ -86,8 +86,8 @@
|
||||
// 如果是确认删除操作
|
||||
if (content.text === '确认删除') {
|
||||
let ids = item.id
|
||||
let data ={
|
||||
ids:item.id
|
||||
let data = {
|
||||
ids: item.id
|
||||
}
|
||||
deleteOperationVideo(ids).then((res) => {
|
||||
if (res.code == 200) {
|
||||
@ -96,6 +96,8 @@
|
||||
icon: 'success'
|
||||
});
|
||||
this.getData()
|
||||
// 关闭所有滑动项
|
||||
this.$refs.swipeAction.closeAll();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
@ -164,6 +166,13 @@
|
||||
},
|
||||
onShow() {
|
||||
this.getData()
|
||||
// 关闭所有滑动项
|
||||
// 使用$nextTick确保组件已渲染
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.swipeAction) {
|
||||
this.$refs.swipeAction.closeAll();
|
||||
}
|
||||
});
|
||||
},
|
||||
onLoad(options) {
|
||||
this.deviceID = options.id
|
||||
|
||||
@ -139,7 +139,7 @@
|
||||
// 获取图片列表
|
||||
callOtherApi() {
|
||||
let data = {
|
||||
deviceId: this.deviceID,
|
||||
businessId: this.deviceID,
|
||||
fileType: '2' //文件类型(1:操作说明，2:产品参数)
|
||||
}
|
||||
fileInfo(data).then((res) => {
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<view>
|
||||
<image src="/static/images/bip.6.png" class="bip"></image>
|
||||
</view>
|
||||
<text class="device-name">设备名：CLI</text>
|
||||
<text class="device-name">设备名：{{deviceId}}</text>
|
||||
<text class="device-model1">ID:{{deviceId}}</text>
|
||||
</view>
|
||||
<view class="connecting-line" v-if="isConnectNo">连接中...</view>
|
||||
@ -35,18 +35,21 @@
|
||||
return {
|
||||
deviceId: '',
|
||||
isConnecting: false, // 是否正在连接
|
||||
isConnected: false ,// 是否连接成功
|
||||
isConnectNo:false,
|
||||
isSuccess:false
|
||||
isConnected: false, // 是否连接成功
|
||||
isConnectNo: false,
|
||||
isSuccess: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async handleConnect() {
|
||||
if (this.isConnecting) {
|
||||
// 绑定成功,确认按钮跳转到首页并通知刷新数据
|
||||
uni.$emit('refreshDeviceList'); // 发出刷新事件
|
||||
// 绑定成功,确认按钮跳转到首页
|
||||
uni.switchTab({
|
||||
url: '/pages/common/index/index'
|
||||
})
|
||||
|
||||
} else {
|
||||
// 开始连接逻辑
|
||||
uni.showLoading({
|
||||
@ -54,7 +57,7 @@
|
||||
title: '加载中....'
|
||||
})
|
||||
this.isConnecting = true;
|
||||
this.isConnectNo=true
|
||||
this.isConnectNo = true
|
||||
try {
|
||||
// 调用绑定设备接口
|
||||
const res = await deviceBind({
|
||||
@ -62,10 +65,10 @@
|
||||
deviceMac: '',
|
||||
communicationMode: '0', //0是4g,1是蓝牙
|
||||
})
|
||||
console.log(this.deviceId,'deerer ere');
|
||||
if (res.code == 0) {
|
||||
this.isConnectNo=false
|
||||
this.isSuccess =true
|
||||
console.log(this.deviceId, 'deerer ere');
|
||||
if (res.code == 200) {
|
||||
this.isConnectNo = false
|
||||
this.isSuccess = true
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.data,
|
||||
@ -73,6 +76,7 @@
|
||||
});
|
||||
this.isConnecting = true;
|
||||
} else {
|
||||
this.isConnectNo = false
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
});
|
||||
|
||||
@ -11,42 +11,61 @@
|
||||
<view class="device-content">
|
||||
<view class="device-header">
|
||||
<view class="deviceIMG">
|
||||
<image src="/static/images/device.png" mode="" class="IMG"></image>
|
||||
<image :src="item.devicePic" mode="" class="IMG"></image>
|
||||
</view>
|
||||
<view class="device-name">
|
||||
<view>设备:001-00</view>
|
||||
<view class="ID">ID:{{ item.id }}</view>
|
||||
<view>设备:{{item.deviceName}}</view>
|
||||
<view class="ID">
|
||||
<view class="ID" v-if="item.communicationMode==0">ID:{{item.deviceImei}}
|
||||
</view>
|
||||
<view class="ID" v-else>ID:{{item.deviceMac}}</view>
|
||||
<!-- <view class="onlines" v-if="item.communicationMode==0">在线</view> -->
|
||||
<view class="unlines" v-if="item.communicationMode==0">离线</view>
|
||||
<view>电量：90%</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="device-status online">已连接</view>
|
||||
<view class="device-info">
|
||||
<text class="onlines">在线</text>
|
||||
<text class="line"></text>
|
||||
<text>电量：90℃</text>
|
||||
<view class="" v-if="item.communicationMode==1">
|
||||
<view class="device-status online">已连接</view>
|
||||
<view class="device-status unline">未连接</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding:20rpx;">
|
||||
<view class="editInfmation">
|
||||
<view class="ql-editor">编辑信息</view>
|
||||
<view class="ql-input">
|
||||
<textarea placeholder-style="color:rgba(255, 255, 255, 0.4)" placeholder="请输入内容" class="textarea"/>
|
||||
<textarea placeholder-style="color:rgba(255, 255, 255, 0.4)" placeholder="请输入内容" class="textarea"
|
||||
v-model="messageToSend" />
|
||||
</view>
|
||||
<button class="login-btn">发送</button>
|
||||
<button class="login-btn" @click="sendTextMessage">发送</button>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
<!-- 成功提示弹框 -->
|
||||
<CustomPopup :show="showPopupFlag" :title="popupTitle" :message="popupMessage" icon="/static/images/sendSucc.png"
|
||||
:confirm-text="popupConfirmText" :show-cancel="false" @confirm="onPopupConfirm" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomPopup from '@/components/CustomPopup/CustomPopup.vue'
|
||||
import {
|
||||
deviceInfo,
|
||||
} from '@/api/common/index.js'
|
||||
import {
|
||||
deviceSendMessage
|
||||
} from '@/api/6170/deviceControl.js'
|
||||
export default {
|
||||
components: {
|
||||
CustomPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deviceList: Array(6).fill().map((_, i) => ({
|
||||
id: `1321615${i}`,
|
||||
checked: false,
|
||||
showConfirm: false
|
||||
})),
|
||||
deviceList: [],
|
||||
messageToSend: '', //发送信息
|
||||
showPopupFlag: false,
|
||||
popupTitle: '',
|
||||
popupMessage: '信息发送成功！',
|
||||
popupConfirmText: '确认'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -54,43 +73,103 @@
|
||||
this.deviceList[index].checked = !this.deviceList[index].checked
|
||||
this.$forceUpdate()
|
||||
},
|
||||
sendMessage() {
|
||||
// 获取设备列表
|
||||
getData(deviceType) {
|
||||
this.loading = true;
|
||||
let data = {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
deviceType: deviceType
|
||||
}
|
||||
deviceInfo(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
const newDevices = res.rows.map(device => ({
|
||||
...device,
|
||||
showConfirm: false,
|
||||
checked: false
|
||||
}));
|
||||
this.total = res.total;
|
||||
this.deviceList = newDevices
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 发送文本消息
|
||||
sendTextMessage() {
|
||||
const selectedDevices = this.deviceList.filter(item => item.checked)
|
||||
console.log('选中的设备:', selectedDevices)
|
||||
uni.showToast({
|
||||
title: `已发送到${selectedDevices.length}台设备`,
|
||||
icon: 'success'
|
||||
const deviceIds = selectedDevices.map(item => item.id);
|
||||
if (selectedDevices.length === 0) {
|
||||
uni.showToast({
|
||||
title: '请选择一个设备',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!this.messageToSend) {
|
||||
uni.showToast({
|
||||
title: '请输入要发送的内容',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
let data = {
|
||||
sendMsg: this.messageToSend,
|
||||
deviceIds: deviceIds
|
||||
}
|
||||
deviceSendMessage(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.showPopupFlag = true
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
onPopupConfirm() {
|
||||
this.showPopupFlag = false
|
||||
uni.navigateBack()
|
||||
console.log('用户点击了确定')
|
||||
// 处理确认逻辑
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const eventChannel = this.getOpenerEventChannel();
|
||||
// 监听 'deviceSend' 事件，获取传过来的数据
|
||||
eventChannel.on('deviceSend', (data) => {
|
||||
console.log('Received detail data:', data);
|
||||
this.getData(data.data)
|
||||
});
|
||||
// 如果需要向调用页面返回数据，可以触发 'ack' 事件
|
||||
eventChannel.emit('ack', {})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: rgb(18, 18, 18);
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
.header {
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.device-list {
|
||||
flex: 1;
|
||||
padding: 0 20rpx;
|
||||
|
||||
}
|
||||
|
||||
.device-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 94%;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
@ -101,35 +180,45 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkbox.checked {
|
||||
background-color: rgb(187, 230, 0);
|
||||
border-color: rgb(187, 230, 0);
|
||||
}
|
||||
|
||||
.device-content {
|
||||
background-color: rgb(26, 26, 26);
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
/* display: flex; */
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
width: 93%;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.device-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
font-size: 32rpx;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
margin-left: 24rpx;
|
||||
margin-left: 12rpx;
|
||||
line-height: 50rpx;
|
||||
width: 83%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ID {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
width: 122rpx;
|
||||
height: 52rpx;
|
||||
@ -147,12 +236,17 @@
|
||||
color: rgb(187, 230, 0);
|
||||
}
|
||||
|
||||
.unline {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.device-info {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
padding-top: 10rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.deviceIMG {
|
||||
@ -171,6 +265,10 @@
|
||||
margin-left: 17%;
|
||||
}
|
||||
|
||||
.onlines {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.onlines::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -178,8 +276,23 @@
|
||||
height: 15rpx;
|
||||
background: rgb(0, 171, 103);
|
||||
border-radius: 50%;
|
||||
left: 98rpx;
|
||||
bottom: 32rpx
|
||||
top: 20rpx;
|
||||
left: -20rpx
|
||||
}
|
||||
|
||||
.unlines {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.unlines::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 15rpx;
|
||||
height: 15rpx;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 50%;
|
||||
top: 20rpx;
|
||||
left: -20rpx
|
||||
}
|
||||
|
||||
.line {
|
||||
@ -194,27 +307,41 @@
|
||||
|
||||
.ql-editor {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size:30rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.ql-input {
|
||||
width:95.9%;
|
||||
width: 95.9%;
|
||||
height: 200rpx;
|
||||
margin-top: 30rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx;
|
||||
border-radius:16rpx;
|
||||
border-radius: 16rpx;
|
||||
background: rgb(26, 26, 26);
|
||||
}
|
||||
.textarea{
|
||||
|
||||
.textarea {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: rgba(42, 42, 42, 1);
|
||||
border-radius: 16rpx;
|
||||
padding: 10rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
|
||||
.editInfmation {
|
||||
padding: 20rpx;
|
||||
border-radius: 40rpx 40rpx 0px 0px;
|
||||
background: rgba(28, 28, 28, 1);
|
||||
position: fixed;
|
||||
bottom: 50rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top:30rpx;
|
||||
margin-top: 30rpx;
|
||||
background-color: rgb(187, 230, 0);
|
||||
color: rgb(35, 35, 35);
|
||||
border-radius: 50rpx;
|
||||
width:90%;
|
||||
margin-left: 10rpx;
|
||||
width: 90%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user