152 lines
3.0 KiB
Vue
152 lines
3.0 KiB
Vue
<template>
|
||
<view class="event-card">
|
||
<u-checkbox-group @change="checkboxGroupChange" size="28">
|
||
<view class="flex_row">
|
||
<view class="state">
|
||
<view class="alarm-content"> {{ formatValue("string", alarmContent) }} </view>
|
||
<view class="status">
|
||
{{ title }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex_row">
|
||
<view class="state">
|
||
<text class="text-label">{{ $t('homePage.alarm.status') }}：</text>
|
||
<text :style="{ color: state === '未确认' ? '#FF0000' : '#4C9CE7' }">{{ state }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex_row">
|
||
<view class="alarm-time">
|
||
<text class="text-label">{{ $t('homePage.alarm.station') }}：</text>
|
||
{{ formatValue("string", belongs) }}
|
||
</view>
|
||
</view>
|
||
<view class="flex_row">
|
||
<view class="alarm-time">
|
||
<text class="text-label">{{ $t('homePage.alarm.device') }}：</text>
|
||
{{ formatValue("string", name) }}
|
||
</view>
|
||
</view>
|
||
<view class="flex_row">
|
||
<text class="text-label">{{ $t('homePage.alarm.alarmTime') }}：</text>
|
||
{{ formatValue("string", alarmTime) }}
|
||
</view>
|
||
<view class="flex_row">
|
||
<text class="text-label">{{ $t('homePage.alarm.confirmTime') }}：</text>
|
||
{{ formatValue("string", confirmTime) }}
|
||
</view>
|
||
<view class="flex_row">
|
||
|
||
<view class="alarm-time">
|
||
<text class="text-label">{{ $t('homePage.alarm.confirmer') }}：</text>
|
||
|
||
<text>{{ formatValue("string", confirmPeople) }}</text>
|
||
</view>
|
||
</view>
|
||
</u-checkbox-group>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
check: false,
|
||
choice: [],
|
||
transfer: {
|
||
width: "110rpx",
|
||
height: "35rpx",
|
||
padding: 0,
|
||
margin: 0,
|
||
fontSize: "24rpx",
|
||
color: "#4C9CE7",
|
||
backgroundColor: "white",
|
||
marginRight: "10rpx",
|
||
},
|
||
formatValue: this.$formatValue
|
||
|
||
}
|
||
},
|
||
created() { },
|
||
props: [
|
||
"title",
|
||
"state",
|
||
"alarmTime",
|
||
"deviceType",
|
||
"belongs",
|
||
"confirmPeople",
|
||
"confirmTime",
|
||
"alarmContent",
|
||
"conversionStatus",
|
||
"pid",
|
||
"name"
|
||
],
|
||
methods: {
|
||
// 选中某个复选框时，由checkbox时触发
|
||
checkboxChange(e) {
|
||
this.$emit("choice", e.name)
|
||
},
|
||
// 选中任一checkbox时，由checkbox-group触发
|
||
checkboxGroupChange(e) { },
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.event-card {
|
||
width: 100%;
|
||
margin-top: 30rpx;
|
||
padding: 20rpx;
|
||
|
||
box-sizing: border-box;
|
||
background: #ffffff !important;
|
||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
|
||
border-radius: 8px;
|
||
|
||
.state {
|
||
display: flex;
|
||
width: 100%;
|
||
|
||
.alarm-content {
|
||
flex: 1;
|
||
font-weight: 700;
|
||
color: #282828;
|
||
}
|
||
.status {
|
||
width: 80px;
|
||
text-align: right;
|
||
color: #009458;
|
||
}
|
||
}
|
||
|
||
|
||
.flex_row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
color: #333333;
|
||
width: 100%;
|
||
}
|
||
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
text {
|
||
color: #979797;
|
||
}
|
||
|
||
.text-label {
|
||
color: #999999;
|
||
display: inline-block;
|
||
// width: 140rpx;
|
||
text-align: right;
|
||
}
|
||
}
|
||
</style> |