124 lines
3.0 KiB
Vue
124 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<view class="device-status">
|
||
|
|
<view class="title-wrap">
|
||
|
|
<view style="width: 175px;">
|
||
|
|
<u-subsection :list="modeList" mode="subsection" :current="current"
|
||
|
|
@change="sectionChange"></u-subsection>
|
||
|
|
</view>
|
||
|
|
<u--text iconStyle="color: #3c9cff; margin-right: 4px; font-size: 26px;" type="primary"
|
||
|
|
prefixIcon="file-text" align="right" :text="$tt('status.devDetail')"
|
||
|
|
@click="handleGoToDeviceDetail"></u--text>
|
||
|
|
<u--text iconStyle="color: #3c9cff; margin-right: 4px; font-size: 26px;" type="primary" prefixIcon="map"
|
||
|
|
align="right" :text="$tt('status.map')" @click="Navigation"></u--text>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<view class="running-status" v-show="current==0">
|
||
|
|
<base-status :device="device" ref="baseStatus"></base-status>
|
||
|
|
</view>
|
||
|
|
<view class="deviceVariable" v-show="current==1">
|
||
|
|
<device-variable ref="deviceVariable" :device="device"></device-variable>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import baseStatus from './base.vue';
|
||
|
|
import deviceVariable from './variable.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'running-status',
|
||
|
|
components: {
|
||
|
|
baseStatus,
|
||
|
|
deviceVariable
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
device: {
|
||
|
|
type: Object,
|
||
|
|
default: null,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
// 兼容小程序
|
||
|
|
device: function(newVal, oldVal) {
|
||
|
|
this.deviceInfo = newVal;
|
||
|
|
this.isSubDev = newVal.subDeviceList && newVal.subDeviceList.length > 0;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
modeList: [this.$tt('status.stateModel'), this.$tt('status.dataModel')],
|
||
|
|
current: 0,
|
||
|
|
isSubDev: false,
|
||
|
|
deviceInfo: {} // 设备信息
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
// 获取设备状态(兼容H5和APP)
|
||
|
|
if (this.device.subDeviceList) {
|
||
|
|
this.deviceInfo = this.device;
|
||
|
|
this.isSubDev = this.device.subDeviceList.length > 0;
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
sectionChange(index) {
|
||
|
|
this.current = index;
|
||
|
|
},
|
||
|
|
baseStatusRefresh() {
|
||
|
|
this.$refs.baseStatus.deviceStatusRefresh();
|
||
|
|
},
|
||
|
|
// 调整到设备详情
|
||
|
|
handleGoToDeviceDetail() {
|
||
|
|
const {
|
||
|
|
deviceId
|
||
|
|
} = this.deviceInfo;
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pagesA/home/device/detail/index?deviceId=' + deviceId
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
Navigation() {
|
||
|
|
const {
|
||
|
|
longitude,
|
||
|
|
latitude,
|
||
|
|
deviceName
|
||
|
|
} = this.deviceInfo;
|
||
|
|
|
||
|
|
// 打印经纬度信息
|
||
|
|
console.log("Longitude:", longitude);
|
||
|
|
console.log("Latitude:", latitude);
|
||
|
|
|
||
|
|
// 使用 uni.openLocation 打开导航
|
||
|
|
uni.openLocation({
|
||
|
|
longitude: parseFloat(longitude), // 经度，确保为浮点数
|
||
|
|
latitude: parseFloat(latitude), // 纬度，确保为浮点数
|
||
|
|
name: deviceName || "目标位置", // 可选：目标位置的名称
|
||
|
|
address: '这是设备的地址', // 可选：具体地址信息
|
||
|
|
success: function() {
|
||
|
|
console.log('导航启动成功');
|
||
|
|
},
|
||
|
|
fail: function(err) {
|
||
|
|
console.log('导航启动失败:', err);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.device-status {
|
||
|
|
.title-wrap {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|