adm/src/views/synclog/index.vue

<template>
    <div id="DataLog">
        <div class="top">
            <h2>数据同步日志</h2>
            <div class="serve-updata">
                <span> 中台状态 </span>
                <el-popover placement="bottom" width="200" trigger="hover">
                    <div>
                        <div><span class="status-1"></span><span>:正常</span></div>
                        <div><span class="status-2"></span><span>:异常</span></div>
                    </div>
                    <i slot="reference" className="infomations el-icon-information"></i> </el-popover
                >：
                <div ref="status" class="state"></div>
                <el-button @click="queryIsOnline" type="text">刷新</el-button>
            </div>
        </div>
        <div>
            <div v-if="isShowTable" class="screen">
                <p>筛选条件</p>
                <ul class="screen-list">
                    <li>
                        <span>操作符：</span>
                        <el-select v-model="operationValue" :clearable="true" @change="operationChange" placeholder="请选择">
                            <el-option v-for="item in operation" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </li>
                    <li>
                        <span>对象类型：</span>
                        <el-select v-model="objTypeValue" :clearable="true" @change="objTypeChange" placeholder="请选择">
                            <el-option v-for="item in objType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </li>
                    <li v-if="objClassify.length">
                        <span>对象分类：</span>
                        <el-select v-model="objClassifyValue" :clearable="true" @change="objClassChange" placeholder="请选择">
                            <el-option v-for="item in objClassify" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </li>
                </ul>

                <el-table
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    style="width: 100%"
                    :data="data"
                    :stripe="true"
                    :maxHeight="620"
                    @sort-change="handleSort"
                >
                    <el-table-column label="对象id" :width="370">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.objId ? scope.row.objId : "--" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="时间" sortable="custom">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.createTime ? scope.row.createTime : "--" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" :width="120">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.name ? scope.row.name : "--" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="本地名称" :width="120">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.localName ? scope.row.localName : "--" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="本地编码" :width="120">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.localId ? scope.row.localId : "--" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="对象类型">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.objName ? scope.row.objName : "--" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作类型">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ typeObj[scope.row.type] ? typeObj[scope.row.type] : "--" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="对象分类">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">
                                {{
                                    scope.row.classCode && scope.row.classCodeName
                                        ? `${scope.row.classCodeName} - ${scope.row.classCode}`
                                        : scope.row.classCode
                                        ? scope.row.classCode
                                        : "--"
                                }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="报错信息">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.error ? scope.row.error : "--" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="180">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="queryRecordSyn(scope.row)"> 重新同步 </el-button>
                            <el-button @click.native.prevent="hideMsg(scope.row)"> 忽略 </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- {/* 分页 */} -->
                <div class="pages">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="this.pageObj.total"
                        :pageSizes="[15, 30, 50, 100]"
                        @size-change="onSizeChange"
                        @current-change="onCurrentChange"
                        :pageSize="pageObj.pageSize"
                        :currentPage="pageObj.pageNumber"
                    />
                </div>
            </div>
            <div v-else class="no-data">
                <img src="@/assets/image/no-data.png" />
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
    queryGroupCode,
    queryTableList,
    queryobjType,
    queryIsOnline,
    queryRecordSyn,
    queryRecordUpdata,
} from "@/api/synclog";
export default {
    data() {
        return {
            groupCode: "", //集团id
            isShowTable: false, //是否显示table
            data: [],
            objClassify: [],
            //对象类型
            objType: [
                {
                    value: "building",
                    label: "建筑",
                },
                {
                    value: "floor",
                    label: "楼层",
                },
                {
                    value: "equipment",
                    label: "设备",
                },
                {
                    value: "component",
                    label: "部件",
                },
                {
                    value: "space",
                    label: "空间",
                },
                {
                    value: "system",
                    label: "系统",
                },
                {
                    value: "shaft",
                    label: "竖井",
                },
            ],
            typeObj: { // 操作符类型
                create: "创建",
                update: "修改",
                delete: "删除",
            },
            //操作下拉框
            operation: [
                {
                    value: "create",
                    label: "创建",
                },
                {
                    value: "update",
                    label: "修改",
                },
                {
                    value: "delete",
                    label: "删除",
                },
            ],
            objClassifyValue: "", //对象分类状态
            operationValue: "", //操作符状态
            objTypeValue: "", //对象类型状态
            loading: false, //是否加载
            order: "lastUpdate asc, objId asc", //顺序
            pageObj: {
                total: 0, //总计
                pageSize: 15, //每页数量
                pageNumber: 1, //第几页
            },
        };
    },
    computed: {
        ...mapGetters("layout", ["projectId"])
    },
    created() {
        this.getData();
    },
    methods: {
        // 项目id请求接口
        getData() {
            // 判断项目id是否为真
            this.loading = true;
            this.groupCode = "";
            queryGroupCode({ projectId: this.projectId }, res => {
                if (res.content.length) {
                    // 允许显示table
                    this.isShowTable = true;
                    this.groupCode = res.content[0].groupCode;
                    this.getTable();
                    this.queryIsOnline();
                } else {
                    this.isShowTable = false;
                    this.projectId = "";
                    this.loading = false;
                    this.$message({
                        showClose: true,
                        message: "项目id不存在！请重新输入",
                        type: "error",
                        duration: 3000,
                    });
                }
            }, () => {
                this.loading = false;
                this.isShowTable = false;
                this.projectId = "";
                this.$message({
                    showClose: true,
                    message: "接口报错；请联系运维人员",
                    type: "error",
                    duration: 3000,
                });
            })
        },
        // 中台是否在线
        queryIsOnline() {
            const data = {
                projectId: this.projectId,
                groupCode: this.groupCode,
            };
            this.loading = true;
            queryIsOnline(data, res => {
                this.$message({
                    showClose: true,
                    message: res.message,
                    type: res.result,
                    duration: 3000,
                });
                this.loading = false;
                if (res.result == "success") {
                    this.$refs.status.style.background = "#19F704";
                } else {
                    this.$refs.status.style.background = "#4a4a4a";
                }
            }, () => {
                this.loading = false;
                this.$message({
                    showClose: true,
                    message: error,
                    type: "error",
                    duration: 3000,
                });
            });
        },
        // 获取对象类型下拉框
        getObjTypeList() {
            const data = {
                projectId: this.projectId,
                objType: this.objTypeValue,
            };
            queryobjType(data, res => {
                const objClassify = res.content.map((item) => {
                    return {
                        value: item.code,
                        label: item.name,
                    };
                });
                this.objClassify = objClassify;
            });
        },
        // 对象类型发生变化
        objTypeChange(val) {
            this.objTypeValue = val;
            this.objClassifyValue = "";
            if (val == "equipment" || val == "space" || val == "system" || val == "component") {
                this.getObjTypeList();
            } else {
                this.objClassify = [];
            }
            this.getTable();
        },
        // change变化触发获取tablelist
        operationChange(val) {
            this.operationValue = val;
            this.getTable();
        },
        // 对象类型编号
        objClassChange(val) {
            this.objClassifyValue = val;
            this.getTable();
        },
        // 请求table
        getTable() {
            this.loading = true;
            if (this.projectId) {
                // 请求table以及中台状态接口
                //对象类型
                const objectType = this.objTypeValue
                    ? `;objectType='${this.objTypeValue}'`
                    : "";
                // 对象分类
                const classCodeName = this.objClassifyValue
                    ? `;classCode='${this.objClassifyValue}'`
                    : "";
                // 操作符状态
                const type = this.operationValue
                    ? `;type='${this.operationValue}'`
                    : "";

                const postParam = {
                    order: this.order,
                    pageNumber: this.pageObj.pageNumber,
                    pageSize: this.pageObj.pageSize,
                    filters: `projectId='${this.projectId}';sign=2${type}${classCodeName}${objectType}`,
                };

                queryTableList(postParam, res => {
                    this.isShowTable = true;
                    this.data = res.content;
                    this.loading = false;
                    this.pageObj = Object.assign(this.pageObj, {
                        total: res.total,
                        pageNumber: res.pageNumber,
                        pageSize: res.pageSize,
                    });
                }, () => {
                    this.isShowTable = false;
                    this.loading = false;
                    this.data = [];
                })
            } else {
                this.isShowTable = false;
            }
        },
        // 输入改变输入参数
        onChange(key, value) {
            this[key] = value;
            // this.forceUpdate();
        },
        // 忽略该条信息
        hideMsg(res) {
            const data = {
                content: [
                    {
                        ...Object.assign(res, {
                            sign: 3,
                        }),
                    },
                ],
            };
            this.loading = true;
            queryRecordUpdata(data, res => {
                if (res.result == "success")
                    this.$message({
                        showClose: true,
                        message: "忽略完成",
                        type: "success",
                        duration: 3000,
                    });
                this.getTable();
            }, () => {
                this.$message({
                    showClose: true,
                    message: "忽略失败，请重新同步或联系管理人员！",
                    type: "error",
                    duration: 3000,
                });
                this.loading = false;
            })
        },
        // 同步信息
        queryRecordSyn(res) {
            const data = {
                content: [
                    {
                        ...res,
                    },
                ],
            };
            this.loading = true;
            queryRecordSyn(data, res => {
                if (res.result == "success")
                    this.$message({
                        showClose: true,
                        message: "同步完成！",
                        type: "success",
                        duration: 3000,
                    });
                this.getTable();
            }, () => {
                this.$message({
                    showClose: true,
                    message: "同步失败，请重新同步或联系管理人员！",
                    type: "error",
                    duration: 3000,
                });
                this.loading = false;
            })
        },
        // 改变pageSize
        onSizeChange(val) {
            this.pageObj = Object.assign(this.pageObj, {
                pageSize: val,
            });
            this.getTable();
        },
        // 改变当前页
        onCurrentChange(val) {
            this.pageObj = Object.assign(this.pageObj, {
                pageNumber: val,
            });
            this.getTable();
        },
        // 时间排序
        handleSort(data) {
            if (data.order == "descending") {
                this.order = "lastUpdate desc, objId desc";
            } else {
                this.order = "lastUpdate asc, objId asc";
            }
            this.getTable();
        },
    },
    watch: {
        projectId() {
            this.getData();
        }
    },
};
</script>
<style lang="less">
#DataLog {
    padding: 20px 20px;
    box-sizing: border-box;
}
.pages {
    float: right;
    margin-top: 12px;
    margin-right: 24px;
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top .serve-updata {
    display: flex;
    align-items: center;
    margin-right: 12px;
}
.top .serve-updata .state {
    width: 20px;
    height: 20px;
    /* background: ; */
    border-radius: 50% 50%;
    margin-left: 6px;
    margin-right: 6px;
}
.status-1 {
    background: #19f704;
    border-radius: 50% 50%;
    width: 12px;
    height: 12px;
    display: inline-block;
}
.status-2 {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #4a4a4a;
    border-radius: 50% 50%;
}

.project {
    display: flex;
    width: 300px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.project p {
    width: 90px;
}
.screen {
    margin-bottom: 12px;
}
.screen .screen-list {
    display: flex;
    align-items: center;
    padding: 12px;
}
.screen ul li {
    margin-left: 12px;
}
.infomations {
    cursor: pointer;
}
.no-data {
    width: 100%;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>