water_affairs/pages/alerts/modules/list.vue

<template>
    <view>
        <navigator :url="'/pages/alerts/detail?id=' + item.w_event_logid" class="item" hover-class="navigator-hover"
            v-for="item in list" :key="item.w_event_logid">
            <view class="tag" :style="{
                color: tagStyleList[item.lasteventlevel - 1].color,
                backgroundColor: tagStyleList[item.lasteventlevel - 1].backgroundColor,
            }">{{ tagStyleList[item.lasteventlevel - 1].name }}</view>
            <view class="title u-line-1">{{ item.eventname || "--" }}</view>
            <view v-if="isShowProdname" class="row u-line-1">产品名称：{{ item.prodname || ' --' }}</view>
            <view class="row u-line-1">告警描述：
                <text v-for="it in item.lasteventparamvalues" :key="it.w_dataparamid">
                    当前设备
                    <text><!-- style="color: rgb(234, 22, 45);" -->
                        {{ it.paramname }}
                    </text>
                    值为
                    <text>
                        {{ it.paramvalue }}
                    </text>
                    ,
                    <text>
                        {{ it.symbol + it.eventvalue }}
                    </text>
                    时触发警告;
                </text>
            </view><!--  :style="{
                color: item.status == '待处理' ? '#EA162D' : '#55B43A'
            }" -->
            <view class="row u-line-1">告警状态：<text>{{ item.status || ' --' }}</text></view>
            <view class="time">最新告警时间：{{ item.lasteventtime }}</view>
        </navigator>
    </view>
</template>
<script>
import { styleList } from "./styleList";
export default {
    name: 'List',
    props: {
        list: Array,
        isShowProdname: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            tagStyleList: styleList
        }
    },
}
</script>

<style lang="scss" scoped>
.item {
    position: relative;
    width: 355px;
    padding: 0 10px;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0 auto;
    margin-bottom: 10px;
    background: #fff;
    overflow: hidden;

    .title {
        color: #004684;
        font-weight: bold;
        line-height: 20px;
        text-indent: 34px;
        margin-top: 4px;
    }

    .tag {
        position: absolute;
        top: 0;
        left: 0;
        padding: 2px 6px;
        font-size: 14px;
        border-radius: 0 0 4px 0;
    }

    .row {
        font-size: 12px;
        color: #666;
        line-height: 24px;
    }

    .time {
        margin-top: 2px;
        padding: 8px 0;
        color: #555;
        font-size: 12px;
        border-top: 1px solid #999;
    }
}
</style>