添加er-表格视图
This commit is contained in:
20932067@zju.edu.cn
parent
a51df52710
commit
68e6c50def
|
|
@ -27,6 +27,24 @@ export default {
|
|||
return {
|
||||
graphData: {
|
||||
nodes: [
|
||||
// {
|
||||
// id: "job",
|
||||
// label: "Job",
|
||||
// type:'base',
|
||||
// attrs: [{
|
||||
// key: "id",
|
||||
// type: "number(3)"
|
||||
// },
|
||||
// {
|
||||
// key: "title",
|
||||
// type: "varchar(255)"
|
||||
// },
|
||||
// {
|
||||
// key: "level",
|
||||
// type: "number(3)"
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
id: 'client-01',
|
||||
x: -95,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* @author: clay
|
||||
* @data: 2021/5/10
|
||||
* @description: 节点基础方法
|
||||
*/
|
||||
|
||||
import utils from '../utils'
|
||||
|
||||
export default {
|
||||
setState(name, value, item) {
|
||||
// 设置节点状态
|
||||
utils.node.setState(name, value, item)
|
||||
// 设置锚点状态
|
||||
utils.anchor.setState(name, value, item)
|
||||
},
|
||||
// 绘制后附加锚点
|
||||
afterDraw(cfg, group) {
|
||||
// 绘制锚点
|
||||
utils.anchor.draw(cfg, group)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<template>
|
||||
<div class="demo-topology">
|
||||
<cc-topology
|
||||
ref="topology"
|
||||
:graph-data="graphData"
|
||||
:node-app-config="nodeAppConfig"
|
||||
:edge-app-config="edgeAppConfig"
|
||||
:graph-mode-config="graphModeConfig"
|
||||
:node-type-list="nodeTypeList"
|
||||
@doAutoRefresh="doAutoRefresh"
|
||||
@doManualRefresh="doManualRefresh"
|
||||
@doChangeMode="doChangeMode"
|
||||
@doSaveData="doSaveData"
|
||||
@submitDataHandler="submitDataHandler"
|
||||
@reviewPassed="reviewPassed"
|
||||
@reviewRejected="reviewRejected"
|
||||
>
|
||||
</cc-topology>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* 局部注册 */
|
||||
import {dataSave, dataParsing, review} from '@/api/top/top'
|
||||
import {CCTopology} from '../../../packages/index'
|
||||
import {deepClone} from '../../utils/index'
|
||||
|
||||
export default {
|
||||
name: 'DemoTopology',
|
||||
components: {
|
||||
'cc-topology': CCTopology
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eid: '',
|
||||
graphData: {},
|
||||
nodeTypeList: [],
|
||||
// 节点配置
|
||||
nodeAppConfig: {
|
||||
videoAddress: '视频地址',
|
||||
uuid: 'uuid',
|
||||
ip: '设备ip',
|
||||
gatewayType: '网关类型',
|
||||
equipmentNum: '设备序号',
|
||||
tubeNum: '管道号'
|
||||
},
|
||||
edgeAppConfig: {
|
||||
threshold: '阈值'
|
||||
},
|
||||
// todo 配置预览
|
||||
graphModeConfig: 'edit',
|
||||
autoRefreshTimer: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.eid = this.$route.query.eid
|
||||
let graphData = deepClone(this.graphData)
|
||||
this.$refs.topology.initTopo(graphData)
|
||||
},
|
||||
methods: {
|
||||
//todo
|
||||
doAutoRefresh(interval) {
|
||||
if (interval === -1) {
|
||||
clearInterval(this.autoRefreshTimer)
|
||||
} else {
|
||||
clearInterval(this.autoRefreshTimer)
|
||||
this.autoRefreshTimer = setInterval(() => {
|
||||
}, interval)
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
clearInterval(this.autoRefreshTimer)
|
||||
})
|
||||
}
|
||||
},
|
||||
doChangeMode(graphMode) {
|
||||
clearInterval(this.autoRefreshTimer)
|
||||
let graphData = deepClone(this.graphData)
|
||||
this.$refs.topology.changeGraphMode(graphData, graphMode)
|
||||
},
|
||||
doManualRefresh() {
|
||||
// this.randomChange()
|
||||
},
|
||||
doSaveData(graphData) {
|
||||
this.$XModal.confirm('您确定要保存该数据?').then(type => {
|
||||
if (type === 'confirm') {
|
||||
var data = {
|
||||
id: this.eid,
|
||||
dsdata: JSON.stringify(graphData)
|
||||
}
|
||||
this.uploadData(data)
|
||||
}
|
||||
})
|
||||
},
|
||||
submitDataHandler(graphData) {
|
||||
this.$XModal.confirm('您确定要提交该数据?').then(type => {
|
||||
if (type === 'confirm') {
|
||||
var data = {
|
||||
id: this.eid,
|
||||
dsdata: JSON.stringify(graphData)
|
||||
}
|
||||
this.submitData(data)
|
||||
}
|
||||
})
|
||||
},
|
||||
submitData(data) {
|
||||
dataParsing(data).then((res) => {
|
||||
let data = res.data
|
||||
if (data.code == 1) {
|
||||
this.$XModal.message({message: data.msg, status: 'success'})
|
||||
this.$router.replace('/pl')
|
||||
} else {
|
||||
this.$XModal.message({message: data.msg})
|
||||
}
|
||||
})
|
||||
},
|
||||
reviewPassed(state) {
|
||||
this.$XModal.confirm('您确定要通过该项目?').then(type => {
|
||||
if (type === 'confirm') {
|
||||
var data = {
|
||||
id: this.eid,
|
||||
state: state
|
||||
}
|
||||
this.uploadReview(data)
|
||||
}
|
||||
})
|
||||
},
|
||||
reviewRejected(state) {
|
||||
this.$XModal.confirm('您确定要拒绝该项目?').then(type => {
|
||||
if (type === 'confirm') {
|
||||
var data = {
|
||||
id: this.eid,
|
||||
state: state
|
||||
}
|
||||
this.uploadReview(data)
|
||||
}
|
||||
})
|
||||
},
|
||||
uploadReview(data) {
|
||||
var vm = this
|
||||
review(data).then((res) => {
|
||||
let data = res.data
|
||||
if (data.code == 1) {
|
||||
this.$XModal.message({message: data.msg, status: 'success'})
|
||||
vm.$router.replace('/pl')
|
||||
} else {
|
||||
this.$XModal.message({message: data.msg})
|
||||
}
|
||||
})
|
||||
},
|
||||
uploadData(datas) {
|
||||
dataSave(datas).then((res) => {
|
||||
let data = res.data
|
||||
if (data.code == 1) {
|
||||
this.$XModal.message({message: data.msg, status: 'success'})
|
||||
// vm.$router.replace('/pl')
|
||||
} else {
|
||||
this.$XModal.message({message: data.msg})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo-topology {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue