Compare commits
4 Commits
654dac65e2
...
ae608e04c0
Author | SHA1 | Date | |
---|---|---|---|
ae608e04c0 | |||
77d1fdbe64 | |||
566fb77648 | |||
6c5a702ff9 |
18
App.vue
18
App.vue
@ -15,12 +15,9 @@
|
||||
|
||||
<style lang="scss">
|
||||
@import 'vk-uview-ui/index.scss';
|
||||
|
||||
uni-slider .uni-slider-handle-wrapper {
|
||||
border-radius: 20rpx;
|
||||
|
||||
}
|
||||
|
||||
uni-slider .uni-slider-thumb {
|
||||
width: 66rpx !important;
|
||||
height: 80rpx !important;
|
||||
@ -29,7 +26,6 @@
|
||||
margin-left: -72rpx !important;
|
||||
|
||||
}
|
||||
|
||||
uni-slider .uni-slider-handle-wrapper {
|
||||
height: 88rpx;
|
||||
position: relative;
|
||||
@ -41,17 +37,21 @@
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
|
||||
.uni-file-picker.custom-file-picker {
|
||||
overflow: inherit !important;
|
||||
}
|
||||
|
||||
.custom-file-picker .icon-add {
|
||||
height: 5rpx !important;
|
||||
width: 70rpx !important;
|
||||
}
|
||||
|
||||
.custom-file-picker .file-picker__box-content {
|
||||
// display: none
|
||||
.uni-picker-view-mask{
|
||||
background: rgba(42, 42, 42, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
.uni-picker-view-content{
|
||||
position: inherit;
|
||||
}
|
||||
.uni-picker-view-wrapper{
|
||||
background: rgba(42, 42, 42, 1);
|
||||
}
|
||||
</style>
|
||||
|
9
api/6170/callPolice.js
Normal file
9
api/6170/callPolice.js
Normal file
@ -0,0 +1,9 @@
|
||||
import request from '@/utils/request'
|
||||
//报警
|
||||
export function deviceSendAlarmMessage(data) {
|
||||
return request({
|
||||
url: '/app/device/sendAlarmMessage',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
@ -1,87 +1,62 @@
|
||||
<template>
|
||||
<view class="agreement-mask" v-if="show" @click.stop="closePopup">
|
||||
<!-- 弹窗主体:支持自定义边框、背景 -->
|
||||
<view
|
||||
class="agreement-popup"
|
||||
@click.stop
|
||||
:style="{
|
||||
<view class="agreement-popup" @click.stop :style="{
|
||||
border: popupBorder,
|
||||
backgroundColor: popupBg,
|
||||
borderRadius: popupRadius
|
||||
}"
|
||||
:class="popupClass"
|
||||
>
|
||||
<view class="popup-content">
|
||||
<!-- 动态图标:支持自定义大小、边距 -->
|
||||
<image
|
||||
v-if="showIcon && icon"
|
||||
:src="icon"
|
||||
mode="aspectFit"
|
||||
class="svg"
|
||||
:style="iconStyle"
|
||||
></image>
|
||||
|
||||
<view class="text-content">
|
||||
<!-- 动态标题:支持自定义颜色、字体大小 -->
|
||||
<view
|
||||
class="popup-Title"
|
||||
v-if="title"
|
||||
:style="{
|
||||
color: titleColor,
|
||||
fontSize: titleSize,
|
||||
padding: titlePadding
|
||||
}"
|
||||
>
|
||||
{{ title }}
|
||||
</view>
|
||||
|
||||
}" :class="popupClass">
|
||||
<view class="text-content">
|
||||
<!-- 动态标题:支持自定义颜色、字体大小 -->
|
||||
<view class="popup-Title" v-if="title" :style="{
|
||||
color: titleColor,
|
||||
fontSize: titleSize,
|
||||
padding: titlePadding
|
||||
}">
|
||||
{{ title }}
|
||||
</view>
|
||||
<view class="popup-content">
|
||||
<!-- 动态图标:支持自定义大小、边距 -->
|
||||
<image v-if="showIcon && icon" :src="icon" mode="aspectFit" class="svg" :style="iconStyle"></image>
|
||||
|
||||
|
||||
|
||||
<!-- 动态消息内容:支持自定义颜色、换行、字体大小 -->
|
||||
<view
|
||||
class="popup-Message"
|
||||
v-if="message"
|
||||
:style="{
|
||||
<view class="popup-Message" v-if="message" :style="{
|
||||
color: messageColor,
|
||||
fontSize: messageSize,
|
||||
whiteSpace: messageWrap ? 'normal' : 'nowrap',
|
||||
padding: messagePadding
|
||||
}"
|
||||
>
|
||||
}">
|
||||
{{ message }}
|
||||
</view>
|
||||
<!-- 倒计时显示 -->
|
||||
<!-- <view v-if="showCountdown" class="countdown" :style="countdownStyle">
|
||||
{{ countdownFormat.replace('{time}', currentCountdown) }}
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 按钮组:支持自定义按钮样式 -->
|
||||
<view class="popup-buttons" :style="{ marginTop: buttonGroupMargin }">
|
||||
<button
|
||||
v-if="showCancel"
|
||||
class="btn cancelBtn"
|
||||
@click="handleCancel"
|
||||
:style="{
|
||||
<button v-if="showCancel" class="btn cancelBtn" @click="handleCancel" :style="{
|
||||
border: cancelBtnBorder,
|
||||
color: cancelBtnColor,
|
||||
backgroundColor: cancelBtnBg,
|
||||
fontSize: cancelBtnSize,
|
||||
borderRadius: buttonRadius,
|
||||
margin: buttonMargin
|
||||
}"
|
||||
:class="cancelBtnClass"
|
||||
>
|
||||
}" :class="cancelBtnClass">
|
||||
{{ cancelText }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn agreeBtn"
|
||||
@click="handleConfirm"
|
||||
:style="{
|
||||
|
||||
<button class="btn agreeBtn" @click="handleConfirm" :style="{
|
||||
backgroundColor: confirmBtnBg,
|
||||
color: confirmBtnColor,
|
||||
fontSize: confirmBtnSize,
|
||||
borderRadius: buttonRadius,
|
||||
margin: buttonMargin
|
||||
}"
|
||||
:class="confirmBtnClass"
|
||||
>
|
||||
}" :class="confirmBtnClass">
|
||||
{{ confirmText }}
|
||||
</button>
|
||||
</view>
|
||||
@ -106,6 +81,10 @@
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showCountdown: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确定'
|
||||
@ -131,7 +110,7 @@
|
||||
type: Boolean,
|
||||
default: false // 默认不换行,true则自动换行
|
||||
},
|
||||
|
||||
|
||||
// 弹窗样式自定义
|
||||
popupBorder: {
|
||||
type: String,
|
||||
@ -139,7 +118,7 @@
|
||||
},
|
||||
popupBg: {
|
||||
type: String,
|
||||
default: 'rgb(42, 42, 42)'
|
||||
default: 'rgb(42, 42, 42, 0.9)'
|
||||
},
|
||||
popupRadius: {
|
||||
type: String,
|
||||
@ -149,7 +128,7 @@
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
|
||||
// 标题样式自定义
|
||||
titleColor: {
|
||||
type: String,
|
||||
@ -163,7 +142,7 @@
|
||||
type: String,
|
||||
default: '10rpx 0 10rpx'
|
||||
},
|
||||
|
||||
|
||||
// 消息样式自定义
|
||||
messageColor: {
|
||||
type: String,
|
||||
@ -177,7 +156,7 @@
|
||||
type: String,
|
||||
default: '10rpx 20rpx 30rpx'
|
||||
},
|
||||
|
||||
|
||||
// 图标样式自定义
|
||||
iconStyle: {
|
||||
type: Object,
|
||||
@ -187,7 +166,7 @@
|
||||
marginBottom: '20rpx'
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 按钮组样式
|
||||
buttonGroupMargin: {
|
||||
type: String,
|
||||
@ -201,7 +180,7 @@
|
||||
type: String,
|
||||
default: '0 10rpx'
|
||||
},
|
||||
|
||||
|
||||
// 确认按钮样式
|
||||
confirmBtnBg: {
|
||||
type: String,
|
||||
@ -219,7 +198,7 @@
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
|
||||
// 取消按钮样式
|
||||
cancelBtnBorder: {
|
||||
type: String,
|
||||
@ -267,7 +246,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
88
components/TimePicker/TimePicker.vue
Normal file
88
components/TimePicker/TimePicker.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<picker-view
|
||||
class="picker-body"
|
||||
:value="timeIndex"
|
||||
@change="handleTimeChange"
|
||||
>
|
||||
<!-- 分钟列 -->
|
||||
<picker-view-column>
|
||||
<view
|
||||
v-for="min in minutes"
|
||||
:key="min"
|
||||
class="item"
|
||||
:class="{ active: timeIndex[0] === minutes.indexOf(min) }"
|
||||
>{{ min }}分</view>
|
||||
</picker-view-column>
|
||||
|
||||
<!-- 秒数列 -->
|
||||
<picker-view-column>
|
||||
<view
|
||||
v-for="sec in seconds"
|
||||
:key="sec"
|
||||
class="item"
|
||||
:class="{ active: timeIndex[1] === seconds.indexOf(sec) }"
|
||||
>{{ sec }}秒</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TimePicker",
|
||||
props: {
|
||||
// 初始时间(格式:{ minutes: '02', seconds: '30' })
|
||||
defaultTime: {
|
||||
type: Object,
|
||||
default: () => ({ minutes: '00', seconds: '00' })
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
minutes: Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')), // 00-59
|
||||
seconds: Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')), // 00-59
|
||||
timeIndex: [0, 0], // 当前选中索引
|
||||
selectedTime: { minutes: '00', seconds: '00' } // 当前选择的时间
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 初始化默认时间
|
||||
const minIndex = this.minutes.indexOf(this.defaultTime.minutes);
|
||||
const secIndex = this.seconds.indexOf(this.defaultTime.seconds);
|
||||
this.timeIndex = [minIndex, secIndex];
|
||||
this.selectedTime = { ...this.defaultTime };
|
||||
},
|
||||
methods: {
|
||||
// 时间变化时更新选中值
|
||||
handleTimeChange(e) {
|
||||
this.timeIndex = e.detail.value;
|
||||
const [minIdx, secIdx] = this.timeIndex;
|
||||
this.selectedTime = {
|
||||
minutes: this.minutes[minIdx],
|
||||
seconds: this.seconds[secIdx]
|
||||
};
|
||||
this.$emit("change", this.selectedTime); // 实时通知父组件
|
||||
},
|
||||
|
||||
// 提供给父组件的方法:获取当前时间
|
||||
getCurrentTime() {
|
||||
return this.selectedTime;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.picker-body {
|
||||
height: 180px;
|
||||
background: #3A3A3A;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.item {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.item.active {
|
||||
color: #A3FF00; /* 选中项高亮 */
|
||||
}
|
||||
</style>
|
@ -22,9 +22,17 @@
|
||||
<text v-if="rightText" :style="{ color: rightColor }" @click="handleRightClick">
|
||||
{{ rightText }}
|
||||
</text>
|
||||
<!-- 显示多个图标 -->
|
||||
<template v-if="rightIcons && rightIcons.length > 0">
|
||||
<image v-for="(icon, index) in rightIcons" :key="index" :src="icon.src"
|
||||
@click="handleIconClick(index)" class="pathIMG" :style="{
|
||||
width: icon.size || '40rpx',
|
||||
height: icon.size || '40rpx',
|
||||
marginLeft: index > 0 ? '20rpx' : '0'
|
||||
}" />
|
||||
</template>
|
||||
<!-- 或显示图标 -->
|
||||
<image v-if="rightIcon" :src="rightIcon" @click="handleRightClick" mode=""
|
||||
class="pathIMG">
|
||||
<image v-if="rightIcon" :src="rightIcon" @click="handleRightClick" class="pathIMG">
|
||||
</image>
|
||||
</slot>
|
||||
</view>
|
||||
@ -60,6 +68,11 @@
|
||||
rightIconSize: { // 图标大小
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
rightIcons: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
// 格式: [{src: '/path/icon1.png'}, {src: '/path/icon2.png'}]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -76,6 +89,10 @@
|
||||
},
|
||||
handleRightClick() {
|
||||
this.$emit('right-click'); // 触发右侧点击事件
|
||||
},
|
||||
// 新增图标点击方法
|
||||
handleIconClick(index) {
|
||||
this.$emit('icon-click', index)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -84,7 +84,8 @@
|
||||
"name" : "amapHG8nIFW5",
|
||||
"appkey_ios" : "065c43f02c7b627a74ad7dd23b16bb4f",
|
||||
"appkey_android" : "d7d852dbda2b95f6f796fb9a711a9fee"
|
||||
}
|
||||
},
|
||||
"customStyle": true
|
||||
},
|
||||
"oauth" : {},
|
||||
"push" : {}
|
||||
|
@ -178,7 +178,14 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "添加联机设备"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/210/historyRecords/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "历史记录"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
],
|
||||
"tabBar": {
|
||||
|
@ -5,9 +5,11 @@
|
||||
</view>
|
||||
<!-- 使用自定义导航栏 -->
|
||||
<view v-show="!pageLoading">
|
||||
<custom-navbar :title="navTitle" :showBack="true" color="#FFFFFF"
|
||||
:rightIcon="isRightIconVisible ? '/static/images/shape.png' : ''"
|
||||
@right-click="shareUp"></custom-navbar>
|
||||
<custom-navbar :title="navTitle" :showBack="true" color="#FFFFFF" :rightIcons="[
|
||||
{src: '/static/images/210/ls.png'},
|
||||
...(isRightIconVisible ? [{src: '/static/images/common/shape.png'}] : [])
|
||||
]" @right-click="shareUp" @icon-click="handleIconClick"></custom-navbar>
|
||||
|
||||
<view class="device-detail-container" :style="{ paddingTop: navBarHeight + 'px' }">
|
||||
<!-- 设备电量信息 -->
|
||||
<view class="battery-section">
|
||||
@ -59,8 +61,7 @@
|
||||
<!-- ===========主副机选择============= -->
|
||||
<view class="mode-section">
|
||||
<view class="radio-group">
|
||||
<view v-for="(item, index) in radioList" :key="index" @click="handleRadioSelect(index)"
|
||||
class="group-item">
|
||||
<view v-for="(item, index) in radioList" :key="index" class="group-item">
|
||||
<view class="radio-icon" :class="{ 'selected': radioSelected === index }">
|
||||
{{ item }}
|
||||
<view class="uni-border"></view>
|
||||
@ -89,7 +90,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="mode-v1">
|
||||
<view class="mode-v2" @click="lasermode">
|
||||
<view class="mode-v2" @click="automaticAlarm">
|
||||
<image src="/static/images/210/zd.png" class="setIMG" mode="aspectFit"></image>
|
||||
<view>
|
||||
<view class="battery-v2">自动报警</view>
|
||||
@ -97,7 +98,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="mode-v1">
|
||||
<view class="mode-v2" @click="lasermode">
|
||||
<view class="mode-v2" @click="anualAlarm">
|
||||
<image src="/static/images/210/zd-HL.png" class="setIMG" mode="aspectFit"></image>
|
||||
<view>
|
||||
<view class="battery-v2">手动报警</view>
|
||||
@ -105,7 +106,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="mode-v1">
|
||||
<view class="mode-v2" @click="lasermode">
|
||||
<view class="mode-v2">
|
||||
<image src="/static/images/210/bj.png" class="setIMG" mode="aspectFit"></image>
|
||||
<view>
|
||||
<view class="battery-v2">报警声音</view>
|
||||
@ -114,11 +115,11 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="mode-v1">
|
||||
<view class="mode-v2" @click="lasermode">
|
||||
<image src="/static/images/jg.png" class="setIMG" mode="aspectFit"></image>
|
||||
<view class="mode-v2" @click="alarmTime">
|
||||
<image src="/static/images/210/time.png" class="setIMG" mode="aspectFit"></image>
|
||||
<view>
|
||||
<view class="battery-v2">报警时长</view>
|
||||
<view class="mode-v3">2分30秒</view>
|
||||
<view class="mode-v3">{{alarmTimeDisplay }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -187,21 +188,18 @@
|
||||
</view>
|
||||
<!-- 弹框 -->
|
||||
<view class="agreement-mask" v-if="lightModeA" @click.stop="closePopup">
|
||||
<!-- 灯光模式弹窗 -->
|
||||
<!-- 报警时长弹窗 -->
|
||||
<view class="agreement-popup" @click.stop>
|
||||
<!-- 标题 -->
|
||||
<view class="popup-title"> {{ popupTitle }}</view>
|
||||
<view class="popup-title">报警时长</view>
|
||||
<view class="popup-content">
|
||||
<view v-for="(item, index) in items" :key="index">
|
||||
<view class="item" :class="{'selected': item.selected}" @click="onItemClick(index)">
|
||||
<image :src="item.image" class="setIMG"></image>
|
||||
{{item.text}}
|
||||
</view>
|
||||
<view class="time-picker-container">
|
||||
<TimePicker ref="timePicker" :defaultTime="currentAlarmTime" @change="handleTimeChange" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 按钮组 -->
|
||||
<view class="popup-buttons">
|
||||
<button class="agree" @click="handleSumbit">确定</button>
|
||||
<button class="agree" @click="saveAlarmTime">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -213,10 +211,7 @@
|
||||
<view class="popup-title">上传开机画面</view>
|
||||
<view class="popup-content">
|
||||
<view class="example-body">
|
||||
<!-- <uni-file-picker limit="1" class="custom-file-picker"></uni-file-picker> -->
|
||||
<view class="icoContent" @click="checkImgUpload">
|
||||
<!-- <image mode="aspectFit" class="img" src="/static/images/6155/DeviceDetail/add.png">
|
||||
</image> -->
|
||||
<image v-if="selectedImage" :src="selectedImage" mode="aspectFit" class="img"
|
||||
style="width: 100%; height: 100%;"></image>
|
||||
<image v-else mode="aspectFit" class="img"
|
||||
@ -230,51 +225,95 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--===================== 激光提示框================== -->
|
||||
<view class="agreement-mask" v-if="lightModeC" @click.stop="closePopup">
|
||||
<!-- 上传画面弹窗 -->
|
||||
<view class="agreement-popupC" @click.stop>
|
||||
<!-- 标题 -->
|
||||
<view class="popup-title">确认开启激光模式?</view>
|
||||
<view class="popup-content">
|
||||
<view class="popup-Title">
|
||||
<view>注意事项</view>
|
||||
<view>1.禁止直视光源或反射面!</view>
|
||||
<view>2.避免直射人或易燃物!</view>
|
||||
<view>3.需佩戴相应专业防护眼镜!</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 按钮组 -->
|
||||
<view class="popup-buttons">
|
||||
<button class="btn disagree" @click="handleDisagree">取消</button>
|
||||
<button class="btn agreeBtn" @click.stop="handleBtn">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 人员信息成功提示弹框 -->
|
||||
<CustomPopup v-if="popupType === 'person'" :show="showPopupFlag" :message="popupMessage"
|
||||
icon="/static/images/common/sendSucc.png" :confirm-text="popupConfirmText" :show-cancel="false"
|
||||
@confirm="onPopupConfirm" />
|
||||
<!-- 开机log上传成功的弹框提示 -->
|
||||
<CustomPopup v-if="popupType === 'logo'" :show="showPopupFlag" :message="popupMessage"
|
||||
icon="/static/images/common/upload.png" :confirm-text="popupConfirmText" :show-cancel="false"
|
||||
@confirm="onPopupConfirm" />
|
||||
<!--============= 电量低于提示弹框=========== -->
|
||||
<CustomPopup v-if="popupType === 'bettery'" :show="showPopupFlag"
|
||||
popupBorder="1rpx solid rgba(224, 52, 52, 0.3)" :message="popupMessage" title="设备电量低于20%"
|
||||
titleColor="rgba(224, 52, 52, 1)" icon="/static/images/common/path.png" :confirm-text="popupConfirmText"
|
||||
:show-cancel="true" @cancel="onPopupConfirm" @confirm="onPopupConfirm"
|
||||
confirmBtnBg="rgba(224, 52, 52, 1)" confirmBtnColor="#fff" />
|
||||
<!-- 解除报警 -->
|
||||
<CustomPopup v-if="popupType === 'cancel'" :show="showPopupFlag"
|
||||
popupBorder="1rpx solid rgba(224, 52, 52, 0.3)" :message="popupMessage"
|
||||
icon="/static/images/6170/svg.png" :confirm-text="popupConfirmText" :show-cancel="false"
|
||||
@confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)" confirmBtnColor="#fff" />
|
||||
<!-- ======各个弹框类型======= -->
|
||||
<CustomPopup :show="currentPopup.show" v-bind="currentPopup.config" @confirm="handleConfirm"
|
||||
@cancel="handleCancel" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 弹框配置中心
|
||||
const POPUP_CONFIGS = {
|
||||
person: {
|
||||
config: {
|
||||
icon: '/static/images/common/sendSucc.png',
|
||||
message: '信息发送成功',
|
||||
showCancel: false
|
||||
},
|
||||
|
||||
},
|
||||
// 开机log
|
||||
logo: {
|
||||
config: {
|
||||
icon: '/static/images/common/upload.png',
|
||||
message: '上传成功',
|
||||
showCancel: false
|
||||
},
|
||||
|
||||
},
|
||||
bettery: {
|
||||
config: {
|
||||
title: '设备电量低于20%',
|
||||
titleColor: 'rgba(224, 52, 52, 1)',
|
||||
message: '请及时充电',
|
||||
icon: '/static/images/common/path.png',
|
||||
popupBorder: '1rpx solid rgba(224, 52, 52, 0.3)',
|
||||
confirmBtnBg: 'rgba(224, 52, 52, 1)',
|
||||
showCancel: true
|
||||
},
|
||||
onConfirm() {
|
||||
console.log('确认按钮');
|
||||
return true; // 直接关闭
|
||||
}
|
||||
},
|
||||
|
||||
cancel: {
|
||||
config: {
|
||||
titleColor: 'rgba(224, 52, 52, 1)',
|
||||
icon: '/static/images/common/svg.png',
|
||||
popupBorder: '1rpx solid rgba(224, 52, 52, 0.3)',
|
||||
confirmBtnBg: 'rgba(224, 52, 52, 1)',
|
||||
showCancel: true //取消按钮
|
||||
},
|
||||
onConfirm() {
|
||||
console.log('解除报警确认');
|
||||
}
|
||||
},
|
||||
del: {
|
||||
config: {
|
||||
message: '确定开启报警?',
|
||||
icon: '/static/images/210/bj_1.png',
|
||||
popupBorder: '1rpx solid rgba(255, 200, 78, 1)',
|
||||
confirmBtnBg: 'rgba(255, 200, 78, 1)',
|
||||
showCancel: true
|
||||
},
|
||||
onConfirm() {
|
||||
console.log('删除确认');
|
||||
}
|
||||
},
|
||||
// 自动报警
|
||||
autoAlarm: {
|
||||
config: {
|
||||
icon: '/static/images/6170/svg.png',
|
||||
title: '报警信息',
|
||||
message: '002号设备(ID:123456)\n出现报警', // 使用\n换行
|
||||
showCountdown: true,
|
||||
countdownTime: 59,
|
||||
confirmText: '解除报警',
|
||||
popupBorder: '1rpx solid rgba(224, 52, 52, 0.3)',
|
||||
confirmBtnBg: 'rgba(224, 52, 52, 1)',
|
||||
confirmBtnColor: "rgba(255, 255, 255, 0.87)",
|
||||
showCancel: false,
|
||||
},
|
||||
onConfirm() {
|
||||
console.log('自动报警确认');
|
||||
// 这里可以添加自动报警的逻辑
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
import MqttClient from '@/utils/mqtt.js';
|
||||
import {
|
||||
deviceDetail,
|
||||
@ -296,6 +335,11 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentPopup: {
|
||||
show: false,
|
||||
config: {},
|
||||
callback: null
|
||||
},
|
||||
pageLoading: true,
|
||||
mainMode: 'string',
|
||||
secondaryMode: 'string',
|
||||
@ -303,11 +347,14 @@
|
||||
navTitle: "",
|
||||
lightModeA: false,
|
||||
lightModeB: false,
|
||||
lightModeC: false, //激光提示框
|
||||
items: [],
|
||||
isFormExpanded: true, // 默认展开
|
||||
deviceID: '',
|
||||
itemInfo: {},
|
||||
alarmTimeDisplay: '',
|
||||
currentAlarmTime: {
|
||||
minutes: '0',
|
||||
seconds: '30'
|
||||
},
|
||||
mqttClient: null,
|
||||
messageToSend: '',
|
||||
personnelInfo: {
|
||||
@ -330,7 +377,7 @@
|
||||
radioList: ['M', 'S'],
|
||||
radioSelected: 0, // -1表示未选中任何项
|
||||
deviceType: '',
|
||||
popupType:'popupType' //弹框类型
|
||||
popupType: '', //弹框类型
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -338,12 +385,35 @@
|
||||
closePopup() {
|
||||
this.lightModeA = false;
|
||||
this.lightModeB = false;
|
||||
this.lightModeC = false;
|
||||
},
|
||||
// 打开弹框
|
||||
showPopup(type) {
|
||||
this.currentPopup = {
|
||||
show: true,
|
||||
config: POPUP_CONFIGS[type].config,
|
||||
callback: POPUP_CONFIGS[type].onConfirm
|
||||
}
|
||||
},
|
||||
handleConfirm() {
|
||||
this.currentPopup.show = false;
|
||||
console.log('这是点击了确认');
|
||||
},
|
||||
// 统一处理取消
|
||||
handleCancel() {
|
||||
this.currentPopup.show = false;
|
||||
},
|
||||
// 手动报警
|
||||
anualAlarm() {
|
||||
this.showPopup('del');
|
||||
},
|
||||
handleRadioSelect(index) {
|
||||
this.radioSelected = index;
|
||||
console.log('选中了单选选项:', this.radioList[index]);
|
||||
},
|
||||
// 自动报警
|
||||
automaticAlarm() {
|
||||
this.showPopup('autoAlarm');
|
||||
},
|
||||
// *******定位******
|
||||
gpsPosition() {
|
||||
uni.navigateTo({
|
||||
@ -369,78 +439,6 @@
|
||||
toggleForm() {
|
||||
this.isFormExpanded = !this.isFormExpanded;
|
||||
},
|
||||
onItemClick(index) {
|
||||
const selectedItem = this.items[index];
|
||||
if (selectedItem.text === '激光') {
|
||||
this.lightModeC = true;
|
||||
} else {
|
||||
// 更新选中状态
|
||||
this.items = this.items.map((item, i) => ({
|
||||
...item,
|
||||
selected: i === index
|
||||
}));
|
||||
this.currentMainMode = selectedItem.text;
|
||||
this.selectedItemIndex = index;
|
||||
// 强制更新视图(如果需要)
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
// 灯光模式的确认
|
||||
handleSumbit() {
|
||||
if (this.selectedItemIndex === null) return;
|
||||
const selectedItem = this.items[this.selectedItemIndex];
|
||||
console.log(selectedItem, 'selectedItemselectedItem');
|
||||
// 修正这里的赋值错误,应该保存索引而不是文本
|
||||
this.selectedItemIndex = this.selectedItemIndex;
|
||||
let data = {
|
||||
deviceId: this.deviceID,
|
||||
instructValue: selectedItem.instructValue
|
||||
}
|
||||
lightModeSettings(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: res.msg
|
||||
})
|
||||
this.lightModeA = false;
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: res.msg
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 激光模式
|
||||
lasermode() {
|
||||
this.lightModeC = true
|
||||
},
|
||||
// 激光确认框提交
|
||||
handleBtn() {
|
||||
let data = {
|
||||
deviceId: this.deviceID,
|
||||
instructValue: 1
|
||||
}
|
||||
laserModeSettings(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: res.msg
|
||||
})
|
||||
this.lightModeC = false
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: res.msg
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
//激光取消
|
||||
handleDisagree() {
|
||||
this.lightModeC = false
|
||||
},
|
||||
// 上传开机画面
|
||||
uploadStartup() {
|
||||
this.lightModeB = true
|
||||
@ -508,9 +506,7 @@
|
||||
try {
|
||||
const responseData = JSON.parse(res.data);
|
||||
if (responseData.code === 200) {
|
||||
this.popupType = 'logo'; //弹框类型
|
||||
this.showPopupFlag = true;
|
||||
this.popupMessage = '上传成功';
|
||||
this.showPopup('logo');
|
||||
this.selectedImage = '';
|
||||
this.file = null;
|
||||
this.lightModeB = false
|
||||
@ -531,19 +527,52 @@
|
||||
}
|
||||
})
|
||||
},
|
||||
// 报警时长
|
||||
alarmTime() {
|
||||
this.lightModeA = true
|
||||
},
|
||||
handleTimeChange(time) {
|
||||
this.currentAlarmTime = time;
|
||||
},
|
||||
// 保存时间
|
||||
saveAlarmTime() {
|
||||
const time = this.$refs.timePicker.getCurrentTime();
|
||||
this.alarmTimeDisplay = `${time.minutes}分${time.seconds}秒`;
|
||||
this.lightModeA = false;
|
||||
console.log("保存的时间:", time);
|
||||
},
|
||||
handleIconClick(index) {
|
||||
// 历史记录
|
||||
if (index === 0) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/210/historyRecords/index',
|
||||
events: {
|
||||
ack: function(data) {}
|
||||
},
|
||||
success: (res) => {
|
||||
res.eventChannel.emit('share', {
|
||||
data: this.itemInfo,
|
||||
});
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '/pages/6170/share/index',
|
||||
events: {
|
||||
ack: function(data) {}
|
||||
},
|
||||
success: (res) => {
|
||||
res.eventChannel.emit('share', {
|
||||
data: this.itemInfo,
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 分享
|
||||
shareUp() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/6170/share/index',
|
||||
events: {
|
||||
ack: function(data) {}
|
||||
},
|
||||
success: (res) => {
|
||||
res.eventChannel.emit('share', {
|
||||
data: this.itemInfo,
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
// 操作说明
|
||||
@ -610,9 +639,7 @@
|
||||
registerPersonInfo(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
uni.hideLoading()
|
||||
this.popupType = 'person'; //弹框类型
|
||||
this.showPopupFlag = true;
|
||||
this.popupMessage = '人员信息发送成功'
|
||||
this.showPopup('person');
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
@ -621,10 +648,6 @@
|
||||
}
|
||||
})
|
||||
},
|
||||
onPopupConfirm() {
|
||||
this.showPopupFlag = false
|
||||
console.log('用户点击了确定')
|
||||
},
|
||||
// 发送文本消息
|
||||
sendTextMessage() {
|
||||
if (!this.messageToSend) {
|
||||
@ -645,9 +668,7 @@
|
||||
deviceSendMessage(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
uni.hideLoading()
|
||||
this.popupType = 'person'; //弹框类型
|
||||
this.showPopupFlag = true;
|
||||
this.popupMessage = '发送信息成功'
|
||||
this.showPopup('person');
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
@ -1142,7 +1163,7 @@
|
||||
/* 弹窗主体 */
|
||||
.agreement-popup {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
height: 40%;
|
||||
background-color: rgb(42, 42, 42);
|
||||
border-radius: 60rpx 60rpx 0rpx 0rpx;
|
||||
padding: 40rpx;
|
||||
|
8
pages/210/historyRecords/index.vue
Normal file
8
pages/210/historyRecords/index.vue
Normal file
@ -0,0 +1,8 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
@ -35,11 +35,13 @@
|
||||
<!-- 强制报警提示弹框 -->
|
||||
<CustomPopup v-if="popupType === 'force'" :show="showPopupFlag" popupBorder="1rpx solid rgba(224, 52, 52, 0.3)"
|
||||
:message="popupMessage" icon="/static/images/6170/bj.png" :confirm-text="popupConfirmText"
|
||||
:show-cancel="false" @confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)" confirmBtnColor="#fff" />
|
||||
:show-cancel="false" @close="onclosePopup" @confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)"
|
||||
confirmBtnColor="#fff" />
|
||||
<!-- 解除报警 -->
|
||||
<CustomPopup v-if="popupType === 'cancel'" :show="showPopupFlag" popupBorder="1rpx solid rgba(224, 52, 52, 0.3)"
|
||||
:message="popupMessage" icon="/static/images/6170/svg.png" :confirm-text="popupConfirmText"
|
||||
:show-cancel="false" @confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)" confirmBtnColor="#fff" />
|
||||
:show-cancel="false" @close="onclosePopup" @confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)"
|
||||
confirmBtnColor="#fff" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -49,8 +51,8 @@
|
||||
deviceInfo,
|
||||
} from '@/api/common/index.js'
|
||||
import {
|
||||
deviceSendMessage
|
||||
} from '@/api/6170/deviceControl.js'
|
||||
deviceSendAlarmMessage
|
||||
} from '@/api/6170/callPolice.js'
|
||||
export default {
|
||||
components: {
|
||||
CustomPopup
|
||||
@ -64,6 +66,7 @@
|
||||
popupMessage: '确认要对所选设备开启强制报警?',
|
||||
popupConfirmText: '确认',
|
||||
popupType: 'force', // 'force' or 'cancel'
|
||||
pendingAlarmAction: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -72,6 +75,9 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onclosePopup() {
|
||||
this.showPopupFlag = false
|
||||
},
|
||||
toggleSelect(index) {
|
||||
this.deviceList[index].checked = !this.deviceList[index].checked
|
||||
this.$forceUpdate()
|
||||
@ -122,6 +128,8 @@
|
||||
this.popupType = 'force';
|
||||
this.popupMessage = '确认要对所选设备开启强制报警?';
|
||||
this.showPopupFlag = true;
|
||||
this.pendingAlarmAction = 1
|
||||
|
||||
},
|
||||
// 解除报警
|
||||
cancelAlarm() {
|
||||
@ -136,6 +144,8 @@
|
||||
this.popupType = 'cancel';
|
||||
this.popupMessage = '确认要解除所选设备的报警状态?';
|
||||
this.showPopupFlag = true;
|
||||
this.pendingAlarmAction = 1
|
||||
|
||||
},
|
||||
sendAlarmCommand(type) {
|
||||
const selectedDevices = this.deviceList.filter(item => item.checked);
|
||||
@ -143,12 +153,20 @@
|
||||
|
||||
let data = {
|
||||
deviceIds: deviceIds,
|
||||
commandType: type // '强制或者解除'
|
||||
instructValue: this.pendingAlarmAction, // '强制或者解除'
|
||||
}
|
||||
|
||||
deviceSendMessage(data).then((res) => {
|
||||
deviceSendAlarmMessage(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.showPopupFlag = true;
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
});
|
||||
this.showPopupFlag = false
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 500)
|
||||
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
@ -159,10 +177,8 @@
|
||||
},
|
||||
// 点击确认状态
|
||||
onPopupConfirm() {
|
||||
this.showPopupFlag = false
|
||||
uni.navigateBack()
|
||||
console.log('用户点击了确定')
|
||||
this.sendAlarmCommand(this.popupType);
|
||||
|
||||
// 处理确认逻辑
|
||||
},
|
||||
},
|
||||
|
@ -222,9 +222,9 @@
|
||||
<!-- 上传画面弹窗 -->
|
||||
<view class="agreement-popupC" @click.stop>
|
||||
<!-- 标题 -->
|
||||
<view class="popup-title">确认开启激光模式?</view>
|
||||
<view class="popup-title">{{ isLaserOn ? '确认关闭激光模式?' : '确认开启激光模式?' }}</view>
|
||||
<view class="popup-content">
|
||||
<view class="popup-Title">
|
||||
<view class="popup-Title" v-if="!isLaserOn">
|
||||
<view>注意事项</view>
|
||||
<view>1.禁止直视光源或反射面!</view>
|
||||
<view>2.避免直射人或易燃物!</view>
|
||||
@ -294,7 +294,7 @@
|
||||
secondaryMode: 'string',
|
||||
navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
|
||||
navTitle: "",
|
||||
sliderValue: 30,
|
||||
sliderValue: 25,
|
||||
lightModeA: false,
|
||||
currentMainMode: '强光',
|
||||
lightModeB: false,
|
||||
@ -326,7 +326,7 @@
|
||||
file: '',
|
||||
selectedItemIndex: 0,
|
||||
popupType: 'person', //弹框类型
|
||||
timer: null
|
||||
isLaserOn: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -346,20 +346,13 @@
|
||||
// 添加调试日志
|
||||
uni.navigateTo({
|
||||
url: '/pages/common/map/index',
|
||||
success: (res) => {
|
||||
// 确保使用深拷贝
|
||||
const mapData = {
|
||||
deviceLocation: {
|
||||
longitude: String(item.longitude), // 强制转为字符串
|
||||
latitude: String(item.latitude),
|
||||
deviceImage: item.devicePic || '',
|
||||
deviceName: item.deviceImei || ''
|
||||
}
|
||||
}
|
||||
res.eventChannel.emit('MapData', JSON.parse(JSON.stringify(mapData)))
|
||||
events: {
|
||||
ack: function(data) {}
|
||||
},
|
||||
fail: (err) => {
|
||||
|
||||
success: (res) => {
|
||||
res.eventChannel.emit('Map', {
|
||||
data: item
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
@ -558,9 +551,10 @@
|
||||
},
|
||||
// 激光确认框提交
|
||||
handleBtn() {
|
||||
const instructValue = this.isLaserOn ? 0 : 1;
|
||||
let data = {
|
||||
deviceId: this.deviceID,
|
||||
instructValue: 1
|
||||
instructValue: instructValue
|
||||
}
|
||||
laserModeSettings(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
@ -568,6 +562,7 @@
|
||||
icon: 'none',
|
||||
title: res.msg
|
||||
})
|
||||
this.isLaserOn = !this.isLaserOn;
|
||||
this.lightModeC = false
|
||||
} else {
|
||||
uni.showToast({
|
||||
@ -885,7 +880,8 @@
|
||||
this.mqttClient.subscribe(statusTopic, (payload) => {
|
||||
console.log(`收到来自 ${statusTopic} 的消息:`, payload);
|
||||
//收到电量上报。延迟20s请求接口数据
|
||||
const parsedMessage = typeof payload === 'string' ? JSON.parse(payload) : payload;
|
||||
const parsedMessage = typeof payload === 'string' ? JSON.parse(payload) :
|
||||
payload;
|
||||
const deviceState = parsedMessage.state; // 直接取 state 数组
|
||||
// ✅ 发送全局事件通知主页面更新
|
||||
uni.$emit('deviceStatusUpdate', {
|
||||
@ -896,7 +892,7 @@
|
||||
setTimeout(() => {
|
||||
this.fetchDeviceDetail(data.data.id);
|
||||
}, 20000);
|
||||
|
||||
|
||||
// 这里判断电量低于20%,弹框提示
|
||||
if (this.deviceInfo.batteryPercentage < 20) {
|
||||
this.popupType = 'bettery'
|
||||
|
@ -442,7 +442,16 @@
|
||||
// 位置
|
||||
location() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/common/map/index'
|
||||
url: '/pages/common/map/index',
|
||||
events: {
|
||||
ack: function(data) {}
|
||||
},
|
||||
success: (res) => {
|
||||
// 页面跳转成功后的回调函数
|
||||
res.eventChannel.emit('Map', {
|
||||
data: this.deviceList,
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
handleFile(item) {
|
||||
@ -473,7 +482,8 @@
|
||||
// 页面跳转成功后的回调函数
|
||||
res.eventChannel.emit('deviceControl', {
|
||||
data: item,
|
||||
deviceType: deviceType
|
||||
deviceType: deviceType,
|
||||
apiType: 'listA' // 自定义标识
|
||||
});
|
||||
}
|
||||
})
|
||||
@ -498,29 +508,29 @@
|
||||
this.getData(this.deviceType); // 重新加载第一页数据
|
||||
},
|
||||
updateDeviceStatus(data) {
|
||||
// 只更新 communicationMode == 0 的设备
|
||||
this.deviceList = this.deviceList.map(item => {
|
||||
console.log(item,'item444');
|
||||
if (item.communicationMode == 0) {
|
||||
console.log(item, 'item2222');
|
||||
let messageData;
|
||||
try {
|
||||
messageData = data.message; // 双重解析(如果消息被转义)
|
||||
} catch (e) {
|
||||
return item; // 解析失败则不更新
|
||||
this.deviceList = this.deviceList
|
||||
.map(item => {
|
||||
if (!item) return null; // 如果 item 是 undefined/null,返回 null
|
||||
if (item.communicationMode == 0) {
|
||||
let messageData;
|
||||
try {
|
||||
messageData = data.message;
|
||||
} catch (e) {
|
||||
return item; // 解析失败则返回原 item
|
||||
}
|
||||
const [deviceId, onlineStatus, battery] = messageData.state || [];
|
||||
console.log('我收到消息了没',item.battery);
|
||||
return {
|
||||
...item,
|
||||
battery: battery ?? item.battery,
|
||||
onlineStatus: onlineStatus ?? item.onlineStatus,
|
||||
lastUpdate: data.timestamp,
|
||||
};
|
||||
}
|
||||
const [deviceId, onlineStatus, batteryPercentage] = messageData.state || [];
|
||||
// 只更新电量 & 在线状态(避免覆盖其他字段)
|
||||
return {
|
||||
...item,
|
||||
batteryPercentage: batteryPercentage ?? item.batteryPercentage, // 如果新电量有效则更新,否则保留旧值
|
||||
onlineStatus: onlineStatus ?? item.onlineStatus, // 如果新状态有效则更新,否则保留旧值
|
||||
lastUpdate: data.timestamp // 更新时间戳
|
||||
};
|
||||
return item;
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
.filter(Boolean);
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
this.getTab()
|
||||
@ -530,22 +540,19 @@
|
||||
this.getTab() // 刷新数据
|
||||
this.onIntall()
|
||||
});
|
||||
// 监听设备状态更新事件
|
||||
uni.$on('deviceStatusUpdate', (data) => {
|
||||
console.log('收到设备状态更新通知:', data);
|
||||
this.onIntall()
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 组件销毁前移除监听器
|
||||
uni.$off('refreshDeviceList');
|
||||
},
|
||||
onShow() {
|
||||
// 监听设备状态更新事件
|
||||
uni.$on('deviceStatusUpdate', (data) => {
|
||||
console.log('收到设备状态更新通知:', data);
|
||||
this.updateDeviceStatus(data);
|
||||
});
|
||||
},
|
||||
onHide() {
|
||||
// 页面隐藏时取消监听,避免内存泄漏
|
||||
onUnload() {
|
||||
uni.$off('deviceStatusUpdate');
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
@ -1,73 +1,151 @@
|
||||
<template>
|
||||
<view class="map-container">
|
||||
<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="markers"
|
||||
:custom-map-style="customMapStyle" :enable-custom="true">
|
||||
</map>
|
||||
<view>
|
||||
<view class="page-body">
|
||||
<view class="page-section page-section-gap">
|
||||
<map style="width: 100%; height: 100vh;"
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:markers="covers"
|
||||
@markertap="onMarkerTap"
|
||||
:scale="16">
|
||||
</map>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="loading" class="loading-mask">
|
||||
<view class="loading-content">地图加载中...</view>
|
||||
<view class="loading-content">加载中...</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 默认显示加载提示
|
||||
latitude: 30.592,
|
||||
longitude: 114.305,
|
||||
customMapStyle: '8c3efc37298895fd78e6aa0e799e78ce',
|
||||
markers: [{
|
||||
id: 1,
|
||||
latitude: 30.507,
|
||||
longitude: 114.404,
|
||||
title: '华中科技大学'
|
||||
}, {
|
||||
id: 2,
|
||||
latitude: 30.476,
|
||||
longitude: 114.428,
|
||||
title: '光谷金融港'
|
||||
}, {
|
||||
id: 3,
|
||||
latitude: 30.504,
|
||||
longitude: 114.433,
|
||||
title: '武汉东站'
|
||||
}]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 尝试获取当前位置
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
this.latitude = res.latitude;
|
||||
this.longitude = res.longitude;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'map',
|
||||
latitude: 39.909, // 默认纬度
|
||||
longitude: 116.39742, // 默认经度
|
||||
covers: [], // 标记点数组
|
||||
loading: true, // 加载状态
|
||||
markerData: [] // 存储原始标记数据
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 获取事件通道
|
||||
const eventChannel = this.getOpenerEventChannel();
|
||||
// 监听传递过来的位置数据
|
||||
eventChannel.on('Map', (receivedData) => {
|
||||
this.loading = true;
|
||||
this.covers = [];
|
||||
//先获取data属性内容
|
||||
const dataContent = receivedData.data;
|
||||
//data是数组
|
||||
if (Array.isArray(dataContent)) {
|
||||
// 过滤掉经纬度为空的设备
|
||||
const validDevices = dataContent.filter(device =>
|
||||
device.latitude !== null &&
|
||||
device.longitude !== null &&
|
||||
device.latitude !== '' &&
|
||||
device.longitude !== ''
|
||||
);
|
||||
this.markerData = validDevices;
|
||||
if (validDevices.length > 0) {
|
||||
this.processMultipleMarkers(validDevices);
|
||||
} else {
|
||||
console.log('没有有效的设备经纬度数据');
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
onReady() {
|
||||
// 页面初次渲染完成时,隐藏加载提示
|
||||
}
|
||||
//data是单个设备对象
|
||||
else if (typeof dataContent === 'object' && dataContent !== null) {
|
||||
if (this.validateMarker(dataContent)) {
|
||||
this.markerData = [dataContent];
|
||||
this.processSingleMarker(dataContent);
|
||||
} else {
|
||||
console.log('单个设备数据缺少有效的经纬度');
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 处理单个标记点
|
||||
processSingleMarker(marker) {
|
||||
// 转换经纬度为数字
|
||||
const lat = parseFloat(marker.latitude);
|
||||
const lng = parseFloat(marker.longitude);
|
||||
// 设置地图中心
|
||||
this.latitude = lat;
|
||||
this.longitude = lng;
|
||||
// 创建标记点
|
||||
this.covers = [{
|
||||
id: marker.deviceImei, // 适配deviceId字段
|
||||
latitude: lat,
|
||||
longitude: lng,
|
||||
iconPath: marker.devicePic || '/static/images/common/device.png',
|
||||
width: 40,
|
||||
height: 40,
|
||||
anchor: {x: 0.5, y: 0.5}, // 锚点在中心
|
||||
callout: {
|
||||
content: `ID: ${marker.deviceImei}`
|
||||
}
|
||||
}];
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
// 处理多个标记点
|
||||
processMultipleMarkers(markers) {
|
||||
// 使用第一个有效标记点的位置作为地图中心
|
||||
const firstMarker = markers[0];
|
||||
this.latitude = parseFloat(firstMarker.latitude);
|
||||
this.longitude = parseFloat(firstMarker.longitude);
|
||||
|
||||
// 转换所有有效标记点
|
||||
this.covers = markers.map((marker, index) => ({
|
||||
id: marker.deviceId || marker.id || marker.deviceImei || index + 1,
|
||||
latitude: parseFloat(marker.latitude),
|
||||
longitude: parseFloat(marker.longitude),
|
||||
iconPath: marker.devicePic || '/static/images/common/device.png',
|
||||
width: 40,
|
||||
height: 40,
|
||||
anchor: {x: 0.5, y: 0.5},
|
||||
callout: {
|
||||
content: `ID: ${marker.deviceImei}`,
|
||||
}
|
||||
}));
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
// 验证标记点是否包含必要信息
|
||||
validateMarker(marker) {
|
||||
// 验证经纬度是否有效
|
||||
const hasValidLat = marker.latitude && marker.latitude !== '' && !isNaN(parseFloat(marker.latitude));
|
||||
const hasValidLng = marker.longitude && marker.longitude !== '' && !isNaN(parseFloat(marker.longitude));
|
||||
return hasValidLat && hasValidLng;
|
||||
},
|
||||
|
||||
// 标记点点击事件
|
||||
onMarkerTap(e) {
|
||||
const clickedMarker = this.markerData.find(
|
||||
item =>item.deviceImei === e.markerId
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 加载提示 */
|
||||
<style>
|
||||
.loading-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #121212;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -75,10 +153,23 @@
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 12px 24px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
z-index: 99;
|
||||
}
|
||||
</style>
|
||||
|
@ -32,7 +32,7 @@
|
||||
<view class="ql-editor">编辑信息</view>
|
||||
<view class="ql-input">
|
||||
<textarea placeholder-style="color:rgba(255, 255, 255, 0.4)" placeholder="请输入内容" class="textarea"
|
||||
v-model="messageToSend" />
|
||||
v-model="messageToSend" :maxlength="20"/>
|
||||
</view>
|
||||
<button class="login-btn" @click="sendTextMessage">发送</button>
|
||||
</view>
|
||||
|
BIN
static/images/210/bj_1.png
Normal file
BIN
static/images/210/bj_1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.8 KiB |
BIN
static/images/210/ls.png
Normal file
BIN
static/images/210/ls.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.0 KiB |
BIN
static/images/210/time.png
Normal file
BIN
static/images/210/time.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 510 B |
BIN
static/images/common/device.png
Normal file
BIN
static/images/common/device.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.1 KiB |
@ -1,5 +1,5 @@
|
||||
import config from '../config/index.js';
|
||||
const env = 'development'; //production development //开发of线上 改这里就行
|
||||
const env = 'production'; //production development //开发of线上 改这里就行
|
||||
const BASE = config[env];
|
||||
const request = (options) => {
|
||||
console.log("options"+JSON.stringify(options),BASE.BASE_URL)
|
||||
|
Reference in New Issue
Block a user