|
@@ -0,0 +1,497 @@
|
|
|
+import React, { Component } from 'react';
|
|
|
+import "./../page-style/datalog.css"
|
|
|
+import { Table, Button, Input, Select, Message, Loading, Pagination, Popover } from 'element-react';
|
|
|
+import { queryGroupCode, queryTableList, queryobjType, queryIsOnline, queryRecordSyn, queryRecordUpdata } from "./../api/dataLogApi"
|
|
|
+class DataLog extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ // 操作符类型
|
|
|
+ const tyleObj = {
|
|
|
+ create: '创建',
|
|
|
+ update: '修改',
|
|
|
+ delete: '删除',
|
|
|
+ }
|
|
|
+ this.state = {
|
|
|
+ projectId: 'Pj1101051029', // 项目id
|
|
|
+ groupCode: '', //集团id
|
|
|
+ isShowTable: false, //是否显示table
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ label: "对象id",
|
|
|
+ prop: "objId",
|
|
|
+ width: 370
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "名称",
|
|
|
+ prop: "name",
|
|
|
+ width: 120,
|
|
|
+ render: (obj, a) => {
|
|
|
+ return obj.name ? obj.name : '--'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "本地名称",
|
|
|
+ prop: "localName",
|
|
|
+ width: 120,
|
|
|
+ render: (obj) => {
|
|
|
+ return obj.localName ? obj.localName : '--'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ label: "本地编码",
|
|
|
+ prop: "localId",
|
|
|
+ width: 120,
|
|
|
+ render: (obj) => {
|
|
|
+ return obj.localId ? obj.localId : '--'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "对象类型",
|
|
|
+ prop: "objName",
|
|
|
+ render: (obj) => {
|
|
|
+ return obj.objName ? obj.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" onClick={this.queryRecordSyn.bind(this, obj)} size="small">重新同步</Button><Button type="text" size="small" onClick={this.hideMsg.bind(this, obj)} >隐藏</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, //是否加载
|
|
|
+ pageObj: {
|
|
|
+ total: 0, //总计
|
|
|
+ pageSize: 15,//每页数量
|
|
|
+ pageNumber: 1 //第几页
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 项目id回车请求接口
|
|
|
+ enter(e) {
|
|
|
+ if (e.keyCode === 13 || e.type === "blur") {
|
|
|
+ // 判断项目id是否为真
|
|
|
+ this.setState({
|
|
|
+ loading: true,
|
|
|
+ groupCode: ''
|
|
|
+ });
|
|
|
+ queryGroupCode({
|
|
|
+ projectId: this.state.projectId
|
|
|
+ }).then(res => {
|
|
|
+ if (res.content.length) {
|
|
|
+ // 允许显示table
|
|
|
+ this.setState({
|
|
|
+ isShowTable: true,
|
|
|
+ groupCode: res.content[0].groupCode
|
|
|
+ })
|
|
|
+ console.log('groupcode', this.state.groupCode)
|
|
|
+ this.getTable();
|
|
|
+ this.queryIsOnline();
|
|
|
+ } else {
|
|
|
+ this.setState({
|
|
|
+ isShowTable: false,
|
|
|
+ projectId: '',
|
|
|
+ loading: false,
|
|
|
+ })
|
|
|
+ Message({
|
|
|
+ showClose: true,
|
|
|
+ message: '项目id不存在!请重新输入',
|
|
|
+ type: 'error',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.setState({
|
|
|
+ loading: false,
|
|
|
+ isShowTable: false,
|
|
|
+ projectId: ''
|
|
|
+ });
|
|
|
+ Message({
|
|
|
+ showClose: true,
|
|
|
+ message: '接口报错;请联系运维人员',
|
|
|
+ type: 'error',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 中台是否在线
|
|
|
+ queryIsOnline() {
|
|
|
+ const data = {
|
|
|
+ projectId: this.state.projectId,
|
|
|
+ groupCode: this.state.groupCode
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ })
|
|
|
+ queryIsOnline(data).then(res => {
|
|
|
+ Message({
|
|
|
+ showClose: true,
|
|
|
+ message: res.message,
|
|
|
+ type: res.result,
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ })
|
|
|
+ if (res.result == "success") {
|
|
|
+ this.refs.status.style.background = '#19F704'
|
|
|
+ } else {
|
|
|
+ this.refs.status.style.background = '#4a4a4a'
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ })
|
|
|
+ Message({
|
|
|
+ showClose: true,
|
|
|
+ message: error,
|
|
|
+ type: 'error',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 获取对象类型下拉框
|
|
|
+ getObjTypeList() {
|
|
|
+ let data = {
|
|
|
+ projectId: this.state.projectId,
|
|
|
+ objType: this.state.objTypeValue
|
|
|
+ }
|
|
|
+ queryobjType(data).then(res => {
|
|
|
+ const objClassify = res.content.map((item) => {
|
|
|
+ return {
|
|
|
+ value: item.code,
|
|
|
+ label: item.name
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.setState({
|
|
|
+ objClassify: objClassify
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 对象类型发生变化
|
|
|
+ objTypeChange(val) {
|
|
|
+ this.state.objTypeValue = val;
|
|
|
+ if (val == "equipment" || val == "space" || val == "system") {
|
|
|
+ this.getObjTypeList()
|
|
|
+ } else {
|
|
|
+ this.setState({
|
|
|
+ objClassify: []
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.getTable()
|
|
|
+ }
|
|
|
+ // change变化触发获取tablelist
|
|
|
+ operationChange(val) {
|
|
|
+ this.state.operationValue = val;
|
|
|
+ this.getTable()
|
|
|
+ }
|
|
|
+ // 对象类型编号
|
|
|
+ objClassChange(val) {
|
|
|
+ this.state.objClassifyValue = val;
|
|
|
+ this.getTable()
|
|
|
+ }
|
|
|
+ // 请求table
|
|
|
+ getTable() {
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ if (this.state.projectId) {
|
|
|
+ // 请求table以及中台状态接口
|
|
|
+ //对象类型
|
|
|
+ const objectType = this.state.objTypeValue ? `;objectType='${this.state.objTypeValue}'` : '';
|
|
|
+ // 对象分类
|
|
|
+ const classCodeName = this.state.objClassifyValue ? `;classCode='${this.state.objClassifyValue}'` : '';
|
|
|
+ // 操作符状态
|
|
|
+ const type = this.state.operationValue ? `;type='${this.state.operationValue}'` : '';
|
|
|
+
|
|
|
+ const postParam = {
|
|
|
+ pageNumber: this.state.pageObj.pageNumber,
|
|
|
+ pageSize: this.state.pageObj.pageSize,
|
|
|
+ filters: `projectId='${this.state.projectId}';sign=2${type}${classCodeName}${objectType}`
|
|
|
+ }
|
|
|
+
|
|
|
+ queryTableList(postParam).then(res => {
|
|
|
+ this.setState({
|
|
|
+ isShowTable: true,
|
|
|
+ data: res.content,
|
|
|
+ loading: false,
|
|
|
+ pageObj: Object.assign(this.state.pageObj, {
|
|
|
+ total: res.total,
|
|
|
+ pageNumber: res.pageNumber,
|
|
|
+ pageSize: res.pageSize
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }).catch((res) => {
|
|
|
+ console.log('error', res)
|
|
|
+ this.setState({
|
|
|
+ isShowTable: false,
|
|
|
+ loading: false,
|
|
|
+ data: []
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.state.isShowTable = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 输入改变输入参数
|
|
|
+ onChange(key, value) {
|
|
|
+ this.state[key] = value;
|
|
|
+ this.forceUpdate();
|
|
|
+ }
|
|
|
+ // 隐藏该条信息
|
|
|
+ hideMsg(res) {
|
|
|
+ const data = {
|
|
|
+
|
|
|
+ content: [{
|
|
|
+ ...Object.assign(res, {
|
|
|
+ sign: 3
|
|
|
+ })
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ queryRecordUpdata(data).then((res) => {
|
|
|
+ if (res.result == "success")
|
|
|
+ Message({
|
|
|
+ showClose: true,
|
|
|
+ message: '隐藏完成',
|
|
|
+ type: 'success',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ this.getTable()
|
|
|
+ }).catch(res => {
|
|
|
+ Message({
|
|
|
+ showClose: true,
|
|
|
+ message: '隐藏失败,请重新同步或联系管理人员!',
|
|
|
+ type: 'error',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 同步信息
|
|
|
+ queryRecordSyn(res) {
|
|
|
+ const data = {
|
|
|
+ content: [{
|
|
|
+ ...res
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ queryRecordSyn(data).then((res) => {
|
|
|
+ if (res.result == "success")
|
|
|
+ Message({
|
|
|
+ showClose: true,
|
|
|
+ message: '同步完成!',
|
|
|
+ type: 'success',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ this.getTable()
|
|
|
+ }).catch(res => {
|
|
|
+ Message({
|
|
|
+ showClose: true,
|
|
|
+ message: '同步失败,请重新同步或联系管理人员!',
|
|
|
+ type: 'error',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 改变pageSize
|
|
|
+ onSizeChange(val) {
|
|
|
+ this.setState({
|
|
|
+ pageObj: Object.assign(this.state.pageObj, {
|
|
|
+ pageSize: val
|
|
|
+ })
|
|
|
+ });
|
|
|
+ this.getTable()
|
|
|
+ }
|
|
|
+ // 改变当前页
|
|
|
+ onCurrentChange(val) {
|
|
|
+ this.setState({
|
|
|
+ pageObj: Object.assign(this.state.pageObj, {
|
|
|
+ pageNumber: val
|
|
|
+ })
|
|
|
+ });
|
|
|
+ this.getTable()
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ let showTable = null;
|
|
|
+ let showObjClass = null;
|
|
|
+ let CenterStatus = null; //数据中台状态
|
|
|
+ if (this.state.objClassify.length) {
|
|
|
+ showObjClass = <li>
|
|
|
+ <span>对象分类:</span>
|
|
|
+ <Select clearable={true} onChange={this.objClassChange.bind(this)} value={this.state.objClassifyValue} placeholder="请选择">
|
|
|
+ {
|
|
|
+ this.state.objClassify.map(el => {
|
|
|
+ return <Select.Option key={el.value} label={el.label} value={el.value} />
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </Select>
|
|
|
+ </li>
|
|
|
+ }
|
|
|
+ if (this.state.isShowTable) {
|
|
|
+ showTable = <div>
|
|
|
+ <div class="screen">
|
|
|
+ <p>
|
|
|
+ 筛选条件
|
|
|
+ </p>
|
|
|
+ <ul class="screen-list">
|
|
|
+ <li>
|
|
|
+ <span>操作符:</span>
|
|
|
+ <Select clearable={true} onChange={this.operationChange.bind(this,)} value={this.state.operationValue} placeholder="请选择">
|
|
|
+ {
|
|
|
+ this.state.operation.map(el => {
|
|
|
+ return <Select.Option key={el.value} label={el.label} value={el.value} />
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </Select>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>对象类型:</span>
|
|
|
+ <Select clearable={true} onChange={this.objTypeChange.bind(this)} value={this.state.objTypeValue} placeholder="请选择">
|
|
|
+ {
|
|
|
+ this.state.objType.map(el => {
|
|
|
+ return <Select.Option key={el.value} label={el.label} value={el.value} />
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </Select>
|
|
|
+ </li>
|
|
|
+ {showObjClass}
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <Loading loading={this.state.loading} text="拼命加载中">
|
|
|
+ <Table
|
|
|
+ style={{ width: '100%' }}
|
|
|
+ columns={this.state.columns}
|
|
|
+ data={this.state.data}
|
|
|
+ stripe={true}
|
|
|
+ maxHeight={600}
|
|
|
+ />
|
|
|
+ </Loading>
|
|
|
+ {/* 分页 */}
|
|
|
+ <div class="pages">
|
|
|
+ <Pagination layout="total, sizes, prev, pager, next, jumper" total={this.state.pageObj.total} pageSizes={[15, 30, 50, 100]} onSizeChange={this.onSizeChange.bind(this)} onCurrentChange={this.onCurrentChange.bind(this)} pageSize={this.state.pageObj.pageSize} currentPage={this.state.pageObj.pageNumber} />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ } else {
|
|
|
+ showTable = <div class="no-data">
|
|
|
+ <img src='/no-data.png' />
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ // 是否显示中台状态
|
|
|
+ if (this.state.groupCode) {
|
|
|
+ CenterStatus = <div class="serve-updata">
|
|
|
+
|
|
|
+ <span>
|
|
|
+ 中台状态
|
|
|
+ </span>
|
|
|
+ <Popover placement="bottom" width="200" trigger="hover" content={(
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <span class="status-1"></span><span>:正常</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="status-2"></span><span>:异常</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}>
|
|
|
+ <i className="infomations el-icon-information"></i>
|
|
|
+ </Popover>:
|
|
|
+ <div ref="status" class="state" ></div>
|
|
|
+ <Button onClick={this.queryIsOnline.bind(this)} type="text">刷新</Button>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return <div id="DataLog">
|
|
|
+ <div class="top">
|
|
|
+ <h2>数据同步日志</h2>
|
|
|
+ {CenterStatus}
|
|
|
+ </div>
|
|
|
+ <div class="project">
|
|
|
+ <p>项目id:</p>
|
|
|
+ <Input onBlur={this.enter.bind(this)} onChange={this.onChange.bind(this, 'projectId')} onKeyUp={this.enter.bind(this)} value={this.state.projectId} placeholder="请输入项目id,回车键搜索" />
|
|
|
+ </div>
|
|
|
+ {showTable}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default DataLog;
|