index.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564
  1. <template>
  2. <div id="DataLog">
  3. <div class="top">
  4. <h2>数据同步日志</h2>
  5. <div class="serve-updata">
  6. <span> 中台状态 </span>
  7. <el-popover placement="bottom" width="200" trigger="hover">
  8. <div>
  9. <div><span class="status-1"></span><span>:正常</span></div>
  10. <div><span class="status-2"></span><span>:异常</span></div>
  11. </div>
  12. <i slot="reference" className="infomations el-icon-information"></i> </el-popover
  13. >:
  14. <div ref="status" class="state"></div>
  15. <el-button @click="queryIsOnline" type="text">刷新</el-button>
  16. </div>
  17. </div>
  18. <div>
  19. <div v-if="isShowTable" class="screen">
  20. <p>筛选条件</p>
  21. <ul class="screen-list">
  22. <li>
  23. <span>操作符:</span>
  24. <el-select v-model="operationValue" :clearable="true" @change="operationChange" placeholder="请选择">
  25. <el-option v-for="item in operation" :key="item.value" :label="item.label" :value="item.value"> </el-option>
  26. </el-select>
  27. </li>
  28. <li>
  29. <span>对象类型:</span>
  30. <el-select v-model="objTypeValue" :clearable="true" @change="objTypeChange" placeholder="请选择">
  31. <el-option v-for="item in objType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
  32. </el-select>
  33. </li>
  34. <li v-if="objClassify.length">
  35. <span>对象分类:</span>
  36. <el-select v-model="objClassifyValue" :clearable="true" @change="objClassChange" placeholder="请选择">
  37. <el-option v-for="item in objClassify" :key="item.value" :label="item.label" :value="item.value"> </el-option>
  38. </el-select>
  39. </li>
  40. </ul>
  41. <el-table
  42. v-loading="loading"
  43. element-loading-text="拼命加载中"
  44. style="width: 100%"
  45. :data="data"
  46. :stripe="true"
  47. :maxHeight="620"
  48. @sort="handleSort"
  49. >
  50. <el-table-column v-for="(item, key) in columns" :key="key" :label="item.label" :width="item.width">
  51. <template slot-scope="scope">
  52. <span style="margin-left: 10px">{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
  53. </template>
  54. </el-table-column>
  55. </el-table>
  56. <!-- {/* 分页 */} -->
  57. <div class="pages">
  58. <el-pagination
  59. layout="total, sizes, prev, pager, next, jumper"
  60. :total="this.pageObj.total"
  61. :pageSizes="[15, 30, 50, 100]"
  62. @size-change="onSizeChange"
  63. @current-change="onCurrentChange"
  64. :pageSize="pageObj.pageSize"
  65. :currentPage="pageObj.pageNumber"
  66. />
  67. </div>
  68. </div>
  69. <div v-else class="no-data">
  70. <img src="@/assets/image/no-data.png" />
  71. </div>
  72. </div>
  73. </div>
  74. </template>
  75. <script>
  76. import { mapGetters } from 'vuex'
  77. import {
  78. queryGroupCode,
  79. queryTableList,
  80. queryobjType,
  81. queryIsOnline,
  82. queryRecordSyn,
  83. queryRecordUpdata,
  84. } from "@/api/synclog";
  85. // 操作符类型
  86. const tyleObj = {
  87. create: "创建",
  88. update: "修改",
  89. delete: "删除",
  90. };
  91. export default {
  92. data() {
  93. return {
  94. groupCode: "", //集团id
  95. isShowTable: false, //是否显示table
  96. columns: [
  97. {
  98. label: "对象id",
  99. prop: "objId",
  100. width: 370,
  101. },
  102. {
  103. label: "时间",
  104. prop: "createTime",
  105. sortable: "custom",
  106. },
  107. {
  108. label: "名称",
  109. prop: "name",
  110. width: 120,
  111. },
  112. {
  113. label: "本地名称",
  114. prop: "localName",
  115. width: 120,
  116. },
  117. {
  118. label: "本地编码",
  119. prop: "localId",
  120. width: 120,
  121. },
  122. {
  123. label: "对象类型",
  124. prop: "objName",
  125. },
  126. {
  127. label: "操作类型",
  128. prop: "type",
  129. // render: (obj, a) => {
  130. // return tyleObj[obj.type];
  131. // },
  132. },
  133. {
  134. label: "对象分类",
  135. prop: "classCode",
  136. // render: (obj) => {
  137. // return obj.classCode && obj.classCodeName
  138. // ? obj.classCodeName + "-" + obj.classCode
  139. // : obj.classCode
  140. // ? obj.classCode
  141. // : "--";
  142. // },
  143. },
  144. {
  145. label: "报错信息",
  146. prop: "error",
  147. // render: (obj) => {
  148. // return obj.error ? obj.error : "--";
  149. // },
  150. },
  151. // {
  152. // label: "操作",
  153. // prop: "zip",
  154. // fixed: "right",
  155. // width: 160,
  156. // render: (obj) => {
  157. // return (
  158. // <span>
  159. // <Button
  160. // type="text"
  161. // @click="queryRecordSyn"
  162. // size="small"
  163. // >
  164. // 重新同步
  165. // </Button>
  166. // <Button
  167. // type="text"
  168. // size="small"
  169. // @click="hideMsg"
  170. // >
  171. // 隐藏
  172. // </Button>
  173. // </span>
  174. // );
  175. // },
  176. // },
  177. ],
  178. data: [],
  179. objClassify: [],
  180. //对象类型
  181. objType: [
  182. {
  183. value: "building",
  184. label: "建筑",
  185. },
  186. {
  187. value: "floor",
  188. label: "楼层",
  189. },
  190. {
  191. value: "equipment",
  192. label: "设备",
  193. },
  194. {
  195. value: "component",
  196. label: "部件",
  197. },
  198. {
  199. value: "space",
  200. label: "空间",
  201. },
  202. {
  203. value: "system",
  204. label: "系统",
  205. },
  206. {
  207. value: "shaft",
  208. label: "竖井",
  209. },
  210. ],
  211. //操作下拉框
  212. operation: [
  213. {
  214. value: "create",
  215. label: "创建",
  216. },
  217. {
  218. value: "update",
  219. label: "修改",
  220. },
  221. {
  222. value: "delete",
  223. label: "删除",
  224. },
  225. ],
  226. objClassifyValue: "", //对象分类状态
  227. operationValue: "", //操作符状态
  228. objTypeValue: "", //对象类型状态
  229. loading: false, //是否加载
  230. order: "lastUpdate asc, objId asc", //顺序
  231. pageObj: {
  232. total: 0, //总计
  233. pageSize: 15, //每页数量
  234. pageNumber: 1, //第几页
  235. },
  236. };
  237. },
  238. computed: {
  239. ...mapGetters("layout", ["projectId"])
  240. },
  241. created() {
  242. this.getData();
  243. },
  244. methods: {
  245. // 项目id请求接口
  246. getData() {
  247. // 判断项目id是否为真
  248. this.loading = true;
  249. this.groupCode = "";
  250. queryGroupCode({ projectId: this.projectId }, res => {
  251. if (res.content.length) {
  252. // 允许显示table
  253. this.isShowTable = true;
  254. this.groupCode = res.content[0].groupCode;
  255. this.getTable();
  256. this.queryIsOnline();
  257. } else {
  258. this.isShowTable = false;
  259. this.projectId = "";
  260. this.loading = false;
  261. this.$message({
  262. showClose: true,
  263. message: "项目id不存在!请重新输入",
  264. type: "error",
  265. duration: 3000,
  266. });
  267. }
  268. }, () => {
  269. this.loading = false;
  270. this.isShowTable = false;
  271. this.projectId = "";
  272. this.$message({
  273. showClose: true,
  274. message: "接口报错;请联系运维人员",
  275. type: "error",
  276. duration: 3000,
  277. });
  278. })
  279. },
  280. // 中台是否在线
  281. queryIsOnline() {
  282. const data = {
  283. projectId: this.projectId,
  284. groupCode: this.groupCode,
  285. };
  286. this.loading = true;
  287. queryIsOnline(data, res => {
  288. this.$message({
  289. showClose: true,
  290. message: res.message,
  291. type: res.result,
  292. duration: 3000,
  293. });
  294. this.loading = false;
  295. if (res.result == "success") {
  296. this.$refs.status.style.background = "#19F704";
  297. } else {
  298. this.$refs.status.style.background = "#4a4a4a";
  299. }
  300. }, () => {
  301. this.loading = false;
  302. this.$message({
  303. showClose: true,
  304. message: error,
  305. type: "error",
  306. duration: 3000,
  307. });
  308. });
  309. },
  310. // 获取对象类型下拉框
  311. getObjTypeList() {
  312. const data = {
  313. projectId: this.projectId,
  314. objType: this.objTypeValue,
  315. };
  316. queryobjType(data, res => {
  317. const objClassify = res.content.map((item) => {
  318. return {
  319. value: item.code,
  320. label: item.name,
  321. };
  322. });
  323. this.objClassify = objClassify;
  324. });
  325. },
  326. // 对象类型发生变化
  327. objTypeChange(val) {
  328. this.objTypeValue = val;
  329. if (val == "equipment" || val == "space" || val == "system") {
  330. this.getObjTypeList();
  331. } else {
  332. this.objClassify = [];
  333. }
  334. this.getTable();
  335. },
  336. // change变化触发获取tablelist
  337. operationChange(val) {
  338. this.operationValue = val;
  339. this.getTable();
  340. },
  341. // 对象类型编号
  342. objClassChange(val) {
  343. this.objClassifyValue = val;
  344. this.getTable();
  345. },
  346. // 请求table
  347. getTable() {
  348. this.loading = true;
  349. if (this.projectId) {
  350. // 请求table以及中台状态接口
  351. //对象类型
  352. const objectType = this.objTypeValue
  353. ? `;objectType='${this.objTypeValue}'`
  354. : "";
  355. // 对象分类
  356. const classCodeName = this.objClassifyValue
  357. ? `;classCode='${this.objClassifyValue}'`
  358. : "";
  359. // 操作符状态
  360. const type = this.operationValue
  361. ? `;type='${this.operationValue}'`
  362. : "";
  363. const postParam = {
  364. order: this.order,
  365. pageNumber: this.pageObj.pageNumber,
  366. pageSize: this.pageObj.pageSize,
  367. filters: `projectId='${this.projectId}';sign=2${type}${classCodeName}${objectType}`,
  368. };
  369. queryTableList(postParam, res => {
  370. this.isShowTable = true;
  371. this.data = res.content;
  372. this.loading = false;
  373. this.pageObj = Object.assign(this.pageObj, {
  374. total: res.total,
  375. pageNumber: res.pageNumber,
  376. pageSize: res.pageSize,
  377. });
  378. }, () => {
  379. this.isShowTable = false;
  380. this.loading = false;
  381. this.data = [];
  382. })
  383. } else {
  384. this.isShowTable = false;
  385. }
  386. },
  387. // 输入改变输入参数
  388. onChange(key, value) {
  389. this[key] = value;
  390. // this.forceUpdate();
  391. },
  392. // 隐藏该条信息
  393. hideMsg(res) {
  394. const data = {
  395. content: [
  396. {
  397. ...Object.assign(res, {
  398. sign: 3,
  399. }),
  400. },
  401. ],
  402. };
  403. this.loading = true;
  404. queryRecordUpdata(data, res => {
  405. if (res.result == "success")
  406. this.$message({
  407. showClose: true,
  408. message: "隐藏完成",
  409. type: "success",
  410. duration: 3000,
  411. });
  412. this.getTable();
  413. }, () => {
  414. this.$message({
  415. showClose: true,
  416. message: "隐藏失败,请重新同步或联系管理人员!",
  417. type: "error",
  418. duration: 3000,
  419. });
  420. this.loading = false;
  421. })
  422. },
  423. // 同步信息
  424. queryRecordSyn(res) {
  425. const data = {
  426. content: [
  427. {
  428. ...res,
  429. },
  430. ],
  431. };
  432. this.loading = true;
  433. queryRecordSyn(data, res => {
  434. if (res.result == "success")
  435. this.$message({
  436. showClose: true,
  437. message: "同步完成!",
  438. type: "success",
  439. duration: 3000,
  440. });
  441. this.getTable();
  442. }, () => {
  443. this.$message({
  444. showClose: true,
  445. message: "同步失败,请重新同步或联系管理人员!",
  446. type: "error",
  447. duration: 3000,
  448. });
  449. this.loading = false;
  450. })
  451. },
  452. // 改变pageSize
  453. onSizeChange(val) {
  454. this.pageObj = Object.assign(this.pageObj, {
  455. pageSize: val,
  456. });
  457. this.getTable();
  458. },
  459. // 改变当前页
  460. onCurrentChange(val) {
  461. this.pageObj = Object.assign(this.pageObj, {
  462. pageNumber: val,
  463. });
  464. this.getTable();
  465. },
  466. // 时间排序
  467. handleSort(data) {
  468. if (data.order == "ascending") {
  469. this.order = "lastUpdate asc, objId asc";
  470. } else {
  471. this.order = "lastUpdate desc, objId desc";
  472. }
  473. this.getTable();
  474. },
  475. },
  476. watch: {
  477. projectId() {
  478. this.getData();
  479. }
  480. },
  481. };
  482. </script>
  483. <style lang="less">
  484. #DataLog {
  485. padding: 20px 20px;
  486. box-sizing: border-box;
  487. }
  488. .pages {
  489. float: right;
  490. margin-top: 12px;
  491. margin-right: 24px;
  492. }
  493. .top {
  494. display: flex;
  495. align-items: center;
  496. justify-content: space-between;
  497. }
  498. .top .serve-updata {
  499. display: flex;
  500. align-items: center;
  501. margin-right: 12px;
  502. }
  503. .top .serve-updata .state {
  504. width: 20px;
  505. height: 20px;
  506. /* background: ; */
  507. border-radius: 50% 50%;
  508. margin-left: 6px;
  509. margin-right: 6px;
  510. }
  511. .status-1 {
  512. background: #19f704;
  513. border-radius: 50% 50%;
  514. width: 12px;
  515. height: 12px;
  516. display: inline-block;
  517. }
  518. .status-2 {
  519. display: inline-block;
  520. width: 12px;
  521. height: 12px;
  522. background: #4a4a4a;
  523. border-radius: 50% 50%;
  524. }
  525. .project {
  526. display: flex;
  527. width: 300px;
  528. align-items: center;
  529. justify-content: space-between;
  530. margin-bottom: 24px;
  531. }
  532. .project p {
  533. width: 90px;
  534. }
  535. .screen {
  536. margin-bottom: 12px;
  537. }
  538. .screen .screen-list {
  539. display: flex;
  540. align-items: center;
  541. padding: 12px;
  542. }
  543. .screen ul li {
  544. margin-left: 12px;
  545. }
  546. .infomations {
  547. cursor: pointer;
  548. }
  549. .no-data {
  550. width: 100%;
  551. min-height: 600px;
  552. display: flex;
  553. justify-content: center;
  554. align-items: center;
  555. }
  556. </style>