TelpoUserManageAdmin/src/views/off-limits-manage/alarm-query/index.vue

<!--
 * @Date: 2021-11-30 09:44:24
 * @LastEditors: JinxuChen
 * @LastEditTime: 2021-12-10 11:40:14
 * @FilePath: \GpsCardAdmin\src\views\off-limits-manage\alarm-query\index.vue
 * @description:
-->
<template>
    <div class="app-container">
        <div class="filter-container">
            <!-- 搜索 -->
            <el-input
                v-model="searchValue"
                placeholder="请输入关键字"
                style="width: 200px; margin-left: 10px;"
                class="filter-item"
                @keyup.enter.native="onSearch"
                clearable
                @clear="onClear"
            />
            <el-button
                class="filter-item"
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-search"
                @click="onSearch"
            >搜索</el-button>
        </div>
        <!-- 表格 -->
        <!-- <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            @sort-change="sortChange"
        ></el-table>-->
        <TTable :tableData="list" :columns="columns" @update="onUpdate" @delete="onDelete"></TTable>
        <!-- 分页 -->
        <pagination
            v-show="total>0"
            :total="total"
            ref="pages"
            :page.sync="page"
            :limit.sync="limit"
            @pagination="getList"
        />
    </div>
</template>

<script>
import TopMenu from "@/components/TopMenu";
import TTable from "../../../components/TTable/TTable";
import Pagination from "@/components/Pagination";
import APIAlarmQuery from "@/api/alarm-query";
export default {
    name: "",
    components: { TTable, TopMenu, Pagination },
    data() {
        return {
            model: "",
            modelOptions: [
                {
                    value: "1",
                    label: "类别1"
                },
                {
                    value: "2",
                    label: "类别1"
                }
            ],
            searchValue: "",
            columns: [
                { prop: "alarmType", title: "告警类别", fixed: 'left' },
                { prop: "imei", title: "设备IMEI" },
                { prop: "alarmAddress", title: "告警地址/经纬度" },
                { prop: "createTime", title: "创建时间", fixed: 'right' }
                /* {
                    action: true,
                    title: "操作",
                    actions: [
                        { fnName: "delete", title: "删除", type: "error" },
                    ]
                } */
            ],
            list: [
                {
                    alarmType: "出走风险",
                    imei: "141152552521",
                    alarmAddress: "广东省佛山市南海区",
                    createTime: "2021-11-30"
                }
            ],
            total: 0,
            page: 1,
            limit: 10
        };
    },
    watch: {
        searchValue(value) {
            if (value === "") {
                this.$refs['pages'].currentPage = 1;
                this.getList();
            }
        }
    },
    methods: {
        // 搜索
        onSearch() {
            this.$refs['pages'].currentPage = 1;
            this.getList();
        },
        // 修改
        onUpdate(row) {
            console.log("修改", row);
        },
        // 删除
        onDelete(row) {
            console.log("删除", row);
        },
        // 获取分页数据
        getList() {
            let reqBody = {
                pageNumber: this.page,
                begNumber: this.limit,
                imei: this.searchValue
            };
            APIAlarmQuery.getAlarmQuery(reqBody).then(res => {
                this.list = res.data.map(m => {
                    return {
                        imei: m.serialno,
                        alarmType: m.typeId,
                        content: m.address,
                        createTime: m.createTime || "无",
                        glat: m.glat,
                        glng: m.glng,
                        keyId: m.keyId
                    };
                });
                this.total = res.count;
            });
        },
        // 点击清除按钮时
        onClear() {
            this.$refs["pages"].currentPage = 1;
            this.getList();
        }
    },
    mounted() {
        this.getList();
    }
};
</script>

<style scoped>
</style>