291 lines
8.9 KiB
Vue
291 lines
8.9 KiB
Vue
<template>
|
||
<uni-card :title="device.equipmentName" :sub-title="device.mac" :extra="device.isPrimaryUser == 1 ? '主设备' : '分享设备'"
|
||
padding="0" @click="jump(device)" class="boxClick" :thumbnail="deviceIcon(device.runStatus)">
|
||
<template v-slot:title>
|
||
<!-- 卡片标题 -->
|
||
<view class="uni-card__header" @click="jump(device)">
|
||
<view class="uni-card__header-box">
|
||
<view class="uni-card__header-avatar">
|
||
<view class="event-icon">
|
||
<!-- 动态图标：根据类型切换 -->
|
||
<!-- <uni-icons
|
||
custom-prefix="iconfont"
|
||
:type="
|
||
device.devType == 'Direct_Connected_Device'
|
||
? 'icon-zaixianjianceshebei'
|
||
: 'icon-shebei1'
|
||
"
|
||
:color="device.runStatus == 1 ? '#ff3b30' : '#10B981'"
|
||
:size="device.devType == 'Direct_Connected_Device' ? '35' : '40'"
|
||
></uni-icons> -->
|
||
<Cn-icon-device :devType="device.devType" :runStatus="device.runStatus"
|
||
:alarmStatus="device.isAlarm ? 1 : 0"></Cn-icon-device>
|
||
</view>
|
||
</view>
|
||
<view class="uni-card__header-content">
|
||
<text class="uni-card__header-content-title uni-ellipsis">
|
||
{{ device.equipmentName }}
|
||
</text>
|
||
<!-- <text class="uni-card__header-content-subtitle uni-ellipsis">
|
||
{{ device.mac }}
|
||
</text> -->
|
||
<view class="event-desc mt10 mb8">
|
||
<text>
|
||
工程名称：{{ device.engineeringName }}
|
||
</text>
|
||
<text>
|
||
项目名称：{{ device.projectName }}
|
||
</text>
|
||
</view>
|
||
|
||
<view class="tagBox">
|
||
<text class="event-tag" :class="device.runStatus == 1 ? 'lx-tag' : 'zx-tag'">
|
||
{{ device.runStatus == 1 ? '离线' : '在线' }}
|
||
</text>
|
||
<text class="event-tag"
|
||
:class="device.devType == 'Direct_Connected_Device' ? 'zl-tag' : 'jc-tag'">
|
||
{{ device.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备' }}
|
||
</text>
|
||
<text class="event-tag" :class="device.isPrimaryUser == 1 ? 'z-tag' : 'fx-tag'">
|
||
{{ device.isPrimaryUser == 1 ? '我的设备' : '他人设备' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="uni-card__header-extra" style="position: relative" @click.stop>
|
||
<text class="uni-card__header-extra-text"></text>
|
||
<slot name="title"></slot>
|
||
</view>
|
||
</view>
|
||
<!-- <slot name="title"></slot> -->
|
||
</template>
|
||
<!-- <view class="device-body">
|
||
<view class="device-body-item">
|
||
<text>工程名称</text>
|
||
<text>{{ device.engineeringName }}</text>
|
||
</view>
|
||
<view class="device-body-item mt6">
|
||
<text>项目名称</text>
|
||
<text>{{ device.projectName }}</text>
|
||
</view>
|
||
<view class="device-body-item mt6" v-if="device.process == 2 || device.process == 3">
|
||
<text>调试阶段</text>
|
||
<text>{{ device.process == 2 ? '功能调试' : '出厂调试' }}</text>
|
||
</view>
|
||
</view> -->
|
||
<view class="pinToTop" v-if="device.isTop == 1"> 置顶</view>
|
||
</uni-card>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {}
|
||
},
|
||
props: {
|
||
device: {
|
||
type: Object,
|
||
default: () => {
|
||
},
|
||
},
|
||
},
|
||
methods: {
|
||
deviceIcon(e) {
|
||
let str = ''
|
||
switch (e) {
|
||
case 1:
|
||
str = '/static/device_bad.png'
|
||
break
|
||
case 2:
|
||
str = '/static/device_success.png'
|
||
break
|
||
default:
|
||
str = '/static/device_success.png'
|
||
break
|
||
}
|
||
return str
|
||
},
|
||
jump() {
|
||
if (this.device.devType == 'Direct_Connected_Device') {
|
||
uni.navigateTo({
|
||
url:
|
||
'/pages/device/APF/detail?id=' +
|
||
this.device.equipmentId +
|
||
'&isPrimaryUser=' +
|
||
this.device.isPrimaryUser +
|
||
'&process=' +
|
||
this.device.process +
|
||
'&ndid=' +
|
||
this.device.ndid +
|
||
'&device=' +
|
||
JSON.stringify(this.device),
|
||
})
|
||
} else {
|
||
if (this.device.lineList.length == 0) {
|
||
return this.$util.toast('暂无监测点！')
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/device/realTime/index?device=' + JSON.stringify(this.device),
|
||
})
|
||
}
|
||
},
|
||
getColor(status, type) {
|
||
if (status == 1) {
|
||
return '#ff3b3020'
|
||
} else {
|
||
return '#10b98120' //type == 'Direct_Connected_Device' ? '#10b98120' : ''
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.device-body {
|
||
padding: 10rpx 20rpx 20rpx;
|
||
|
||
.device-body-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
line-height: 1.2;
|
||
}
|
||
}
|
||
|
||
.uni-card {
|
||
/deep/ .uni-card__header-box {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/deep/ .uni-card__header {
|
||
display: flex;
|
||
// border-bottom: 2rpx #ebeef5 solid;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-title {
|
||
font-size: 30rpx;
|
||
color: #3a3a3a;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-subtitle {
|
||
margin-top: 15rpx;
|
||
font-size: 24rpx;
|
||
// margin-top: 5px;
|
||
color: #666666;
|
||
}
|
||
|
||
.uni-card .uni-card__header .uni-card__header-avatar .uni-card__header-avatar-image {
|
||
width: 40px;
|
||
height: 40px;
|
||
overflow: hidden;
|
||
border-radius: 5px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.uni-card .uni-card__header .uni-card__header-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tagBox {
|
||
display: flex;
|
||
gap: 15rpx;
|
||
}
|
||
|
||
.event-icon {
|
||
position: relative;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.event-tag {
|
||
font-size: 22rpx;
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 8rpx;
|
||
margin-top: 5rpx;
|
||
// height: 38rpx;
|
||
}
|
||
|
||
// 在线
|
||
.zx-tag {
|
||
background-color: #10b98120;
|
||
color: #10b981;
|
||
}
|
||
|
||
.lx-tag {
|
||
background-color: #ff3b3020;
|
||
color: #ff3b30;
|
||
}
|
||
|
||
.z-tag {
|
||
background-color: #2563eb20;
|
||
color: #2563eb;
|
||
}
|
||
|
||
.fx-tag {
|
||
background-color: #90939920;
|
||
color: #909399;
|
||
}
|
||
|
||
.zl-tag {
|
||
// background-color: #007aff20;
|
||
// color: #007aff;
|
||
background-color: #007aff20;
|
||
color: #007aff;
|
||
}
|
||
|
||
.jc-tag {
|
||
background-color: #007aff20;
|
||
color: #007aff;
|
||
}
|
||
|
||
.pinToTop {
|
||
background-color: $uni-theme-color;
|
||
width: 100rpx;
|
||
height: 60rpx;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
position: absolute;
|
||
top: 0rpx;
|
||
right: 0rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
|
||
/* 核心：旋转成斜三角效果 */
|
||
transform: rotate(45deg) translate(50rpx, -10rpx);
|
||
transform-origin: top right;
|
||
}
|
||
|
||
.event-desc {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.event-desc text {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
line-height: 1.2;
|
||
}
|
||
</style>
|