SmartCommunity/operationSupport/src/views/newWorkBench/components/alarmManagement/alarmInformation.vue

<template>
    <div class="modelBlock">
        <template v-if="permissionFiltering">
            <div class="model-title">
                <div class="model-title-text">设备告警信息</div>
                <div class="buttons" @click="$router.push({ path: '/alarmManagement/details' })">
                    <span class="text">查看更多</span> <span class="triangle"></span>
                </div>
            </div>
            <div class="model-content">
                <div class="listInformation" v-for="(item, index) in datas" :key="index">
                    <div class="listInformation_text">
                        <span class="mainTextColor">【{{ item.deviceName }}告警】</span>{{ item.address }}
                    </div>
                    <div class="listInformation_operation">{{ item.alarmStartTime }}</div>
                </div>
                <div v-if="datas.length <= 0" class="noData">暂无数据</div>
            </div>
        </template>
        <no-permission v-else tipsText="设备告警信息"></no-permission>
    </div>
</template>
<script>
import permissionComponent from '../permissionComponent';
export default {
    mixins: [permissionComponent],
    data() {
        return {
            defaultModel: {
                permissUrl: '16',
                titleName: '告警管理'
            },
            datas: [],
            // 详情显示数据
            mixins_query: {
                communityId: '',
                alarmCategory: 1,
                sceneType: '5',
                state: '1'
            },
            peopleData: [],
            houseData: []
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            this.$http
                .post('/sc-community/alarm/details/selectPage', this.mixins_query)
                .then(({ status, data, msg }) => {
                    if (status == 0) {
                        this.datas = data.list;
                    }
                })
                .catch((err) => {});
        }
    }
};
</script>
<style scoped lang="scss">
@import '../style.scss';
.noData {
    text-align: center;
    line-height: rem(100);
}
.modelBlock {
    .model-content {
        display: block;
        font-size: 14px;
        .flex {
            display: flex;
        }
        .listInformation {
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            margin-top: rem(10);
            .listInformation_img {
                width: rem(46);
                height: rem(46);
                margin-right: rem(20);
            }
            .listInformation_text {
                display: flex;
                opacity: 0.7;
                width: calc(100% - 250px);
                max-width: 500px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .listInformation_operation {
                width: 150px;
                opacity: 0.5;
                text-align: end;
            }
        }
    }
}
</style>