企微迁移智慧监护(手环)
This commit is contained in:
aixianling
279
src/apps/AppGuardianship/userDetail.vue
Normal file
279
src/apps/AppGuardianship/userDetail.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<section class="userDetail">
|
||||
<div class="selectedInfo">
|
||||
<div class="header" flex>
|
||||
<img :src="`${$cdn}guardianship/tx.png`"/>
|
||||
<b v-text="detail.name"/>
|
||||
<div v-if="detail.abnormalStatus==1" class="abnormal">异常</div>
|
||||
<div class="fill"/>
|
||||
<make-calls :list="phoneList" :label="`<p>拨打电话</p>`"/>
|
||||
</div>
|
||||
<div class="content">
|
||||
<ai-cell label="所属地区">{{ detail.areaName }}</ai-cell>
|
||||
<ai-cell label="联系电话">{{ detail.phone }}</ai-cell>
|
||||
<ai-cell label="性别">{{ $dict.getLabel('sex', detail.sex) }}</ai-cell>
|
||||
<ai-cell label="年龄">{{ $calcAge(detail.idNumber) }}</ai-cell>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div flex class="spb header">
|
||||
<b v-text="`设备状况`"/>
|
||||
<span class="onlineStatus" v-html="detail.onlineStatus==1?'设备在线':'<p>设备离线</p>'"/>
|
||||
</div>
|
||||
<div flex class="spb wrap quotas">
|
||||
<div class="quota" v-for="(op,i) in quotas" :key="i" flex @tap="handleShowHistory(op)">
|
||||
<img :src="op.icon"/>
|
||||
<div class="fill" v-text="op.label"/>
|
||||
<div :class="{abnormal:op.abnormal}" v-text="op.value"/>
|
||||
<u-icon name="arrow-right" color="#ddd"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navigation">
|
||||
<div class="content spb" flex>
|
||||
<div flex class="spb wrap">
|
||||
<div class="fill" v-text="detail.gpsDesc"/>
|
||||
<span>最后更新：{{ detail.lastUpdateTime }}</span>
|
||||
<div class="battery" flex>
|
||||
<img :src="batteryIcon"/>
|
||||
<div v-text="`剩余${detail.electricQuantity||0}%`"/>
|
||||
</div>
|
||||
</div>
|
||||
<open-map :data="detail"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div flex class="spb header">
|
||||
<b v-text="`监护人信息`"/>
|
||||
</div>
|
||||
<div flex class="spb guardian" v-for="row in detail.guardians" :key="row.id">
|
||||
<span v-text="row.guardianName"/>
|
||||
<div v-text="row.guardianPhone"/>
|
||||
</div>
|
||||
</div>
|
||||
<ai-back/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MakeCalls from "./component/makeCalls";
|
||||
import OpenMap from "./component/openMap";
|
||||
import AiCell from "../../components/AiCell";
|
||||
import AiBack from "../../components/AiBack";
|
||||
|
||||
export default {
|
||||
name: "userDetail",
|
||||
components: {AiBack, AiCell, OpenMap, MakeCalls},
|
||||
computed: {
|
||||
batteryIcon() {
|
||||
return this.cdn(this.detail.electricQuantity == 100 ? 'dcm' : 'dcq')
|
||||
},
|
||||
quotas() {
|
||||
let quota = [
|
||||
{key: "0", icon: "1"},
|
||||
{key: "1", icon: "2"},
|
||||
{key: "2", icon: "3"},
|
||||
{key: "3", icon: "4"},
|
||||
]
|
||||
return quota.map(e => {
|
||||
let item = this.detail.quota?.find(d => d.item == e.key)
|
||||
let label = this.$dict.getLabel('intelligentGuardianshipItem', e.key)
|
||||
return {
|
||||
label, icon: this.cdn(e.icon), type: e.key,
|
||||
value: item?.itemValue || "-",
|
||||
abnormal: item?.abnormalStatus == 1
|
||||
}
|
||||
})
|
||||
},
|
||||
phoneList() {
|
||||
let {name: guardianName, phone: guardianPhone} = this.detail
|
||||
return [{guardianName, guardianPhone}, ...this.detail.guardians]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
detail: {
|
||||
guardians: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cdn(icon) {
|
||||
return `${this.$cdn}guardianship/${icon}.png`
|
||||
},
|
||||
getDetail(deviceId) {
|
||||
this.$http.post("/app/appintelligentguardianshipdevice/queryMonitorList", null, {
|
||||
params: {type: 1, deviceId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.$set(this.detail, 'quota', res.data.records)
|
||||
}
|
||||
})
|
||||
this.$http.post("/app/appintelligentguardianshipdevice/queryDetailById", null, {
|
||||
params: {id: deviceId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.detail = {...this.detail, ...res.data}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleShowHistory(item) {
|
||||
uni.navigateTo({url: `./historyList?type=${item.type}&id=${this.$route.query.id}`})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$dict.load("intelligentGuardianshipItem", 'sex')
|
||||
this.getDetail(this.$route.query.id)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.userDetail {
|
||||
padding-bottom: 60px;
|
||||
|
||||
& > * {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
font-size: 32px;
|
||||
box-shadow: 0 1px 1px 0 rgba(221, 221, 221, 1);
|
||||
|
||||
.header {
|
||||
height: 96px;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
& > .spb {
|
||||
padding: 0 32px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .selectedInfo {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
.header {
|
||||
height: 136px;
|
||||
font-size: 40px;
|
||||
padding: 0 32px;
|
||||
border-bottom: 1px solid #D8DDE6;
|
||||
|
||||
& > img {
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.abnormal {
|
||||
color: #FF4466;
|
||||
font-size: 24px;
|
||||
padding: 12px;
|
||||
background: rgba(#EC4461, .1);
|
||||
border-radius: 8px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 0;
|
||||
color: #999;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
& > .content {
|
||||
padding: 32px;
|
||||
font-size: 30px;
|
||||
|
||||
::v-deep .AiCell {
|
||||
padding: 0;
|
||||
min-height: 58px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quotas {
|
||||
margin-top: 24px;
|
||||
|
||||
.quota {
|
||||
cursor: pointer;
|
||||
width: 318px;
|
||||
height: 84px;
|
||||
background: #F4F5F6;
|
||||
border-radius: 8px;
|
||||
padding: 0 8px 0 24px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 36px;
|
||||
font-size: 28px;
|
||||
|
||||
img {
|
||||
margin-right: 16px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.abnormal {
|
||||
color: #FF4466;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navigation {
|
||||
.content {
|
||||
padding: 10px 40px 32px;
|
||||
font-size: 26px;
|
||||
|
||||
& > .spb {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.fill {
|
||||
min-width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 0;
|
||||
color: #999;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.battery > img {
|
||||
margin-left: 32px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .onlineStatus {
|
||||
font-size: 30px;
|
||||
color: #5AAD6A;
|
||||
|
||||
p {
|
||||
color: #F5A319;
|
||||
}
|
||||
}
|
||||
|
||||
.guardian {
|
||||
height: 96px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-size: 28px;
|
||||
color: #222;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user