| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655 |
- <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>
- </div> -->
- </div>
- <div style="margin-top: 8px" class="">
-
- <div class="modify">
- <el-button type="primary" icon="el-icon-download" @click="exportSqlHandle" :loading='sqlBtnLoading' :disabled='sqlBtnLoading'>导出SQL文件</el-button>
- <div>
- <el-input style="width: 220px" placeholder="请输入内容" @input="httpInputChange" @blur="httpInputBlur" :value="httpValue" />
- <el-button type="primary" style="margin-left: 8px" :loading='httpBtnLoading' :disabled='!httpValue' @click="httpExportHandle">导出Excel</el-button>
- <el-button type="primary" :loading='syncBtnLoading' :disabled='!httpValue || !isExported' @click="syncDataHandle">同步</el-button>
- </div>
- </div>
- <el-divider />
- <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="sign" @change="signChange">
- <el-option label="成功" :value="2"> </el-option>
- <el-option label="失败" :value="1"> </el-option>
- </el-select>
- </li>
- <li>
- <span> 目标id:</span>
- <el-input v-model="targetId" :clearable="true" placeholder="请输入对象id" style="width: 220px" @change="objIdChange"></el-input>
- </li>
-
- <li>
- <span> 对象表:</span>
- <el-select v-model="tableName" @change="objTableChange" placeholder="请选择">
- <el-option v-for="(item, key) in ENUM_OBJECT_TABLE" :key="key" :label="item" :value="key"></el-option>
- </el-select>
- </li>
-
- </ul>
- <ul class="screen-list">
- <li v-if="tableName === 'dt_object'">
- <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>
- <span>同步时间:</span>
- <el-date-picker
- v-model="timeParam"
- type="datetimerange"
- format="yyyy-MM-dd HH:mm"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- @change="timeChange"
- >
- </el-date-picker>
- </li>
- <li></li>
- <li></li>
- </ul>
- <el-table
- v-loading="loading"
- element-loading-text="拼命加载中"
- style="width: 100%; margin-top: 24px"
- :data="data"
- :stripe="true"
- :maxHeight="620"
- size='small'
- @sort-change="handleSort"
- >
- <el-table-column label="Id" >
- <template slot-scope="scope">
- <span style="margin-left: 10px">{{ scope.row.targetId ? scope.row.targetId : "--" }}</span>
- </template>
- </el-table-column>
- <el-table-column :label='TABLE_NAME[tableName]' >
- <template slot-scope="scope">
- <span style="margin-left: 10px">{{ scope.row.name ? scope.row.name : "--" }}</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>
- <!-- 关系实例表 -->
- <template v-if="tableName === 'dt_relation'">
- <el-table-column label="fromId" >
- <template slot-scope="scope">
- <span style="margin-left: 10px">{{ scope.row.fromId ? scope.row.fromId : "--" }}</span>
- </template>
- </el-table-column>
- <el-table-column label="toId" >
- <template slot-scope="scope">
- <span style="margin-left: 10px">{{ scope.row.toId ? scope.row.toId : "--" }}</span>
- </template>
- </el-table-column>
- </template>
- <!-- 对象实例表 -->
- <template v-else-if="tableName === 'dt_object'">
- <el-table-column label="本地名称" >
- <template slot-scope="scope">
- <span style="margin-left: 10px">{{ scope.row.localName ? scope.row.localName : "--" }}</span>
- </template>
- </el-table-column>
- <el-table-column label="本地编码">
- <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.objectType ? OBJ_TYPE[scope.row.objectType] : "--" }}</span>
- </template>
- </el-table-column>
- </template>
- <!-- 其他表 -->
- <template v-else>
- <el-table-column label="编码" >
- <template slot-scope="scope">
- <span style="margin-left: 10px">{{ scope.row.code ? scope.row.code : "--" }}</span>
- </template>
- </el-table-column>
- </template>
- <el-table-column label="状态" >
- <template slot-scope="scope">
- <span style="margin-left: 10px">{{ scope.row.sign ? (scope.row.sign === 1 ? '失败' : '成功') : "--" }}</span>
- </template>
- </el-table-column>
- <el-table-column label="同步时间" >
- <template slot-scope="scope">
- <span style="margin-left: 10px">{{ scope.row.creationTime | timeFormat }}</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>
- <!-- {/* 分页 */} -->
- <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 {
- queryobjType,
- syncDataLogList,
- syncData,
- queryRecordUpdata,
- dHttpExport,
- exportSql
- } from "@/api/synclog";
- import moment from 'moment'
- import { ENUM_OBJECT_TABLE, OBJ_TYPE, TABLE_NAME } from './constant'
- export default {
- data() {
- return {
- ENUM_OBJECT_TABLE,
- OBJ_TYPE,
- TABLE_NAME,
- 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: "", //对象类型状态
- sign: 2, //状态(默认成功),1:失败, 2成功
- targetId: '', //对象id
- tableName: 'dt_object', //对象表
- loading: false, //是否加载
- order: "creationTime desc", //时间倒序排列
- pageObj: {
- total: 0, //总计
- pageSize: 50, //每页数量
- pageNumber: 1, //第几页
- },
-
- httpBtnLoading: false, //域名导出按钮状态
- httpBtnDisable: true, //域名导出按钮禁用状态
- httpValue: '', //域名内容
- isExported: false, //是否已导出excel,未导出则不可同步
- syncBtnLoading: false, //同步按钮状态
- sqlBtnLoading: false, //导出sql文件按钮状态
- timeParam: []
- }
- },
- computed: {
- ...mapGetters("layout", ["projectId", "projectName"]),
- },
- filters: {
- timeFormat(val) {
- if(!val) return '--';
- return moment(val).format('YYYY-MM-DD HH:mm:ss')
- }
- },
- methods: {
- // 同步数据
- syncDataHandle() {
- this.$message.closeAll();
- this.$confirm('同步前,请确认导出表格数据正确?', '警告', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- this.syncBtnLoading = true;
- syncData(
- {
- targetUrl: this.httpValue
- },
- res => {
- this.pageObj = {
- ...this.pageObj,
- pageNumber: 1
- }
- this.syncBtnLoading = false;
- this.isExported = false; //同步成功后禁用同步按钮
- this.getData();
- },
- err => {
- this.syncBtnLoading = false;
- // this.getData();
- }
- )
-
- }).catch(() => {
- this.$message({
- type: 'info',
- message: '已取消同步操作'
- });
- });
-
- },
- httpInputChange(val) {
- this.httpValue = val.trim();
- },
- httpInputBlur(e) {
- const value = e.target.value;
- const regExp = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/ //域名校验正则
- this.$message.closeAll();
- const { origin } = location;
- if ( origin == value) {
- this.httpValue = '';
- this.$message.warning('不可同步当前域名数据!')
- }
- if (value && !regExp.test(value)) {
- this.httpValue = '';
- this.$message.warning('请输入合法的域名')
- }
- },
- httpExportHandle() {
- this.httpBtnLoading = true;
-
- dHttpExport(
- {
- targetUrl: this.httpValue
- },
- () => {
- this.httpBtnLoading = false;
- this.isExported = true
- }
- )
- },
- /**
- * @description: 导出sql文件
- * @param {*}
- * @return {*}
- */
- exportSqlHandle() {
- this.sqlBtnLoading = true
- exportSql({}, res => {
- this.sqlBtnLoading = false;
- this.$message.success('导出sql文件操作成功!')
- })
- },
- // 项目id请求接口
- getData() {
- this.getTable();
- this.loading = true;
-
- },
-
- // 获取对象类型下拉框
- 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();
- },
- // 状态变化
- signChange(val) {
- this.sign = val;
- this.getTable();
- },
- // 对象表变化
- objTableChange(val) {
- this.tableName = val;
-
- },
- // 时间变动
- timeChange() {
-
- this.getTable();
- },
- // 对象id变化
- objIdChange(val) {
- this.targetId = val.trim();
- 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 tableName = this.tableName ? `;tableName='${this.tableName}'` : ''
- // 对象id
- const targetId = this.targetId ? `;targetId='${this.targetId}'` : ''
- // 时间范围
- let creationTime = this.timeParam && this.timeParam.map(item => moment(item).format('YYYYMMDDHHmm'))
- creationTime = creationTime && !!creationTime.length ? `;creationTime in [${creationTime}]` : ''
- const postParam = {
- orders: this.order,
- pageNumber: this.pageObj.pageNumber,
- pageSize: this.pageObj.pageSize,
- filters: `projectId='${this.projectId}';sign=${this.sign}${type}${classCodeName}${objectType}${tableName}${targetId}${creationTime}`,
- };
- syncDataLogList(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;
- })
- },
- // 改变pageSize
- onSizeChange(val) {
- this.pageObj = Object.assign(this.pageObj, {
- pageSize: val,
- pageNumber: 1,
- });
- 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();
- },
- },
- mounted() {
- this.getData();
- // this.ENUM_OBJECT_TABLE = ;
- // this. = OBJ_TYPE
- },
- 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;
- justify-content: space-between;
- padding: 12px;
- li {
- width: 25%;
- }
- }
- .screen ul li {
- margin-left: 12px;
- }
- .infomations {
- cursor: pointer;
- }
- .no-data {
- width: 100%;
- min-height: 600px;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .mlr8 {
- margin: 0 8px;
- }
- .el-divider--horizontal {
- height: 0.5px;
- }
- .modify {
-
- display: flex;
- justify-content: space-between;
- }
- </style>
|