123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564 |
- <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="handleSort"
- >
- <el-table-column v-for="(item, key) in columns" :key="key" :label="item.label" :width="item.width">
- <template slot-scope="scope">
- <span style="margin-left: 10px">{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
- </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";
- // 操作符类型
- const tyleObj = {
- create: "创建",
- update: "修改",
- delete: "删除",
- };
- export default {
- data() {
- return {
- groupCode: "", //集团id
- isShowTable: false, //是否显示table
- columns: [
- {
- label: "对象id",
- prop: "objId",
- width: 370,
- },
- {
- label: "时间",
- prop: "createTime",
- sortable: "custom",
- },
- {
- label: "名称",
- prop: "name",
- width: 120,
- },
- {
- label: "本地名称",
- prop: "localName",
- width: 120,
- },
- {
- label: "本地编码",
- prop: "localId",
- width: 120,
- },
- {
- label: "对象类型",
- prop: "objName",
- },
- {
- label: "操作类型",
- prop: "type",
- // render: (obj, a) => {
- // return tyleObj[obj.type];
- // },
- },
- {
- label: "对象分类",
- prop: "classCode",
- // render: (obj) => {
- // return obj.classCode && obj.classCodeName
- // ? obj.classCodeName + "-" + obj.classCode
- // : obj.classCode
- // ? obj.classCode
- // : "--";
- // },
- },
- {
- label: "报错信息",
- prop: "error",
- // render: (obj) => {
- // return obj.error ? obj.error : "--";
- // },
- },
- // {
- // label: "操作",
- // prop: "zip",
- // fixed: "right",
- // width: 160,
- // render: (obj) => {
- // return (
- // <span>
- // <Button
- // type="text"
- // @click="queryRecordSyn"
- // size="small"
- // >
- // 重新同步
- // </Button>
- // <Button
- // type="text"
- // size="small"
- // @click="hideMsg"
- // >
- // 隐藏
- // </Button>
- // </span>
- // );
- // },
- // },
- ],
- data: [],
- objClassify: [],
- //对象类型
- objType: [
- {
- value: "building",
- label: "建筑",
- },
- {
- value: "floor",
- label: "楼层",
- },
- {
- value: "equipment",
- label: "设备",
- },
- {
- value: "component",
- label: "部件",
- },
- {
- value: "space",
- label: "空间",
- },
- {
- value: "system",
- label: "系统",
- },
- {
- value: "shaft",
- label: "竖井",
- },
- ],
- //操作下拉框
- 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;
- if (val == "equipment" || val == "space" || val == "system") {
- 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 == "ascending") {
- this.order = "lastUpdate asc, objId asc";
- } else {
- this.order = "lastUpdate desc, objId desc";
- }
- 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>
|