TelpoH5FrontendWeb/src/views/gps-card-frontend/drown-white-list/index.vue

<template>
    <div class="drown-white-list">
        <van-nav-bar title="免告警水域" :border="true"  left-arrow @click-left="onNavBack"/>
        <div class="main">
            <div class="list" v-if="drownList.length > 0">
                <div class="item" v-for="(item, index) in drownList" :key="index">
                    <p><span>poiId：{{ item.poiId }}</span></p>
                    <p><span>水域类型：{{ item.title }}</span></p>
                    <p><span>水域名称：{{ item.address }}</span></p>
                    <p><span>设置时间：{{ item.createTime }}</span></p>
                    <!-- <div class="btn-con">
                        <div class="btn" @click="onDelete(item.imei, item.poiId)">
                            <p>删除</p>
                        </div>
                    </div> -->
                </div>
            </div>
            <div class="noData" v-else>
                <p>暂无数据~</p>
            </div>
        </div>
    </div>
</template>

<script>
import { isNotNull} from "@/utils/index";
import APICore from "@/api/core";
export default {
  name:'',
  data(){
   return {
       drownList: [],
   }
  },
  computed: {
    imei() {
        return this.$store.getters.imei;
    },
  },
  mounted() {
    this.getDrownReportFilterQuery();
  },
  methods: {
    onNavBack(){
        this.$router.push({
            name: 'deviceSetting'
        })
    },
    // 获取免告警水域
    getDrownReportFilterQuery() {
        this.$toast.loading({ message: '数据加载中' });
        APICore.getDrownReportFilterQuery({imei: this.imei}).then(res => {
            let data = res.data.data;
            console.log(data);
            if(data) {
                if(isNotNull(data)) {
                    this.drownList = data;
                    this.$toast.success({ message: '数据加载完成' });
                }
            }
        })
    },
  }
}
</script>

<style scoped lang="scss">
    .drown-white-list {
        position: relative;
        height: 100vh;
        width: 100%;
        overflow: hidden;
        .main {
           /*  height: calc(100vh - 88px);
            overflow: auto; */
            overflow: auto;
            .list {
                @media screen and (max-width: 1920px) and (min-width: 750px){
                   padding: 2vh;
                   height: 70vh;
                   display: flex;
                   justify-content: flex-start;
                   align-content: center;
                   align-items: center;
                   flex-wrap: wrap;
                }
                @media screen and (max-width: 750px) and (min-width: 200px){
                    display: flex;
                    justify-content: flex-start;
                    align-content: center;
                    align-items: center;
                    flex-direction: column;
                    height: calc(100vh - 88px);
                }
                .item {
                    @media screen and (max-width: 1920px) and (min-width: 750px){
                        width: 25%;
                    }
                    @media screen and (max-width: 750px) and (min-width: 200px){
                        width: 300px;
                        font-size: 16px;
                    }
                    margin: 2vh;
                    padding: 1vh;
                    /* font-size: 16px; */
                    border: 1px solid $border_color;
                    border-radius: 8px;
                    p {
                        padding: 4px 0;
                    }
                    .btn-con {
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        .btn {
                            height: 30px;
                            width: 110px;
                            @include center();
                            border-radius: 15px;
                            margin-top: 10px;
                            background-color: red;
                            color: #fff;

                        }
                    }
                }
            }
            .noData {

                @media screen and (max-width: 1920px) and (min-width: 750px){
                    height: 100px;
                    width: 100%;
                }
                @media screen and (max-width: 750px) and (min-width: 200px){
                    height: 225px;
                    width: 100%;
                }
                @include center();
                margin: 100px auto 0;
                background-size: 165px 120px;
                p {
                    @include colorAndFont(#999, 28);
                    margin: 100px auto 0;
                }
            }
        }
    }
</style>