|
|
@@ -1,5 +1,8 @@
|
|
|
<template>
|
|
|
<m-dialog title="绩效明细" ref="dialog">
|
|
|
+ <div style="height: 200px">
|
|
|
+ <RelationGraph ref="graphRef" :options="graphOptions" />
|
|
|
+ </div>
|
|
|
<div class="mb-3">
|
|
|
<span
|
|
|
v-for="(type, index) in parentDetailTypes"
|
|
|
@@ -31,22 +34,118 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import RelationGraph from 'relation-graph'
|
|
|
import {
|
|
|
drilling
|
|
|
} from '@/api/system'
|
|
|
export default {
|
|
|
name: 'StaffWageDrill',
|
|
|
+ components: { RelationGraph },
|
|
|
data () {
|
|
|
return {
|
|
|
loading: false,
|
|
|
items: [],
|
|
|
headers: [],
|
|
|
- parentDetailTypes: []
|
|
|
+ parentDetailTypes: [],
|
|
|
+ graphOptions: {
|
|
|
+ defaultJunctionPoint: 'lr',
|
|
|
+ // 这里可以参考"Graph 图谱"中的参数进行设置 https://www.relation-graph.com/#/docs/graph
|
|
|
+ debug: false, // 是否开始调试模式，调试模式下会在控制台打印额外的日志信息
|
|
|
+ allowShowMiniToolBar: false, // 是否显示工具栏
|
|
|
+ showDebugPanel: false, // 是否显示调试按钮，通过此按钮可以打印配置、数据等
|
|
|
+ backgroundImage: '', // 图谱水印url,如：https://ssl.relation-graph.com/images/relatioon-graph-canvas-bg.png
|
|
|
+ downloadImageFileName: '', // 下载图片时，图片的名称
|
|
|
+ disableZoom: false, // 是否禁用图谱的缩放功能
|
|
|
+ disableDragNode: false, // 是否禁用图谱中节点的拖动
|
|
|
+ moveToCenterWhenRefresh: true, // 当图谱刷新后（调用setJsonData或refresh方法都会触发），让图谱根据节点居中（图片会默认将根节点作为中心展示，此选项会根据节点分布寻找中心）
|
|
|
+ zoomToFitWhenRefresh: true, // 当图谱刷新后（调用setJsonData或refresh方法都会触发），是否让图谱缩放到适合可见区域大小，此选项不适用于fixed和force布局
|
|
|
+ useAnimationWhenRefresh: true, // 当图谱刷新后（调用setJsonData或refresh方法都会触发），使用动画让图居中、缩放
|
|
|
+ useAnimationWhenExpanded: true,
|
|
|
+ defaultFocusRootNode: true, // 默认为根节点添加一个被选中的样式
|
|
|
+ disableNodeClickEffect: false, // 是否禁用节点默认的点击效果（选中、闪烁）
|
|
|
+ disableLineClickEffect: false, // 是否禁用线条默认的点击效果（选中、闪烁）
|
|
|
+ allowShowZoomMenu: false, // 是否在右侧菜单栏显示放大缩小的按钮，此设置和disableZoom不冲突
|
|
|
+ allowAutoLayoutIfSupport: false, // 是否在工具栏中显示【自动布局】按钮（只有在布局支持且此选项为true时才会显示的按钮）
|
|
|
+ allowShowRefreshButton: false, // 是否在工具栏中显示【刷新】按钮
|
|
|
+ allowShowDownloadButton: false, // 是否在工具栏中显示【下载图片】按钮
|
|
|
+ backgroundImageNoRepeat: false, // 只在右下角显示水印，不重复显示水印
|
|
|
+ allowSwitchLineShape: false, // 是否在工具栏中显示切换线条形状的按钮
|
|
|
+ allowSwitchJunctionPoint: false, // 是否在工具栏中显示切换连接点位置的按钮
|
|
|
+ isMoveByParentNode: false, // 是否在拖动节点后让子节点跟随
|
|
|
+ defaultExpandHolderPosition: 'hide', // 默认的节点展开/关闭按钮位置（left/top/right/bottom/hide）
|
|
|
+ defaultNodeColor: '#FD8B37', // 默认的节点背景颜色
|
|
|
+ checkedLineColor: '#FD8B37', // 当线条被选中时的颜色
|
|
|
+ defaultNodeFontColor: '#ffffff', // 默认的节点文字颜色
|
|
|
+ defaultNodeBorderColor: '#90EE90', // 默认的节点边框颜色
|
|
|
+ defaultNodeBorderWidth: 0, // 默认的节点边框粗细（像素）
|
|
|
+ defaultLineColor: '#cccccc', // 默认的线条颜色
|
|
|
+ defaultLineWidth: 2, // 默认的线条粗细（像素）
|
|
|
+ defaultLineShape: 2, // 默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）使用示例
|
|
|
+ defaultNodeShape: 1, // 默认的节点形状，0:圆形；1:矩形
|
|
|
+ defaultShowLineLabel: true, // 默认是否显示连线文字，v2版本此选项已无效，主要是这个选项没什么用
|
|
|
+ hideNodeContentByZoom: true, // 是否根据缩放比例隐藏节点内容
|
|
|
+ // disableDragCanvas: false,
|
|
|
+ // lineUseTextPath: false,
|
|
|
+ defaultLineMarker: { // 默认的线条箭头样式，示例参考：配置工具中的选项：连线箭头样式
|
|
|
+ markerWidth: 24,
|
|
|
+ markerHeight: 24,
|
|
|
+ refX: 6,
|
|
|
+ refY: 6,
|
|
|
+ data: 'M2,2 L10,6 L2,10 L6,6 L2,2'
|
|
|
+ },
|
|
|
+ layouts: [
|
|
|
+ {
|
|
|
+ label: '自动布局',
|
|
|
+ layoutName: 'tree', // 布局方式（tree树状布局/center中心布局/force自动布局）
|
|
|
+ from: 'left',
|
|
|
+ maxLayoutTimes: 20,
|
|
|
+ layoutClassName: 'seeks-layout-force',
|
|
|
+ useLayoutStyleOptions: false,
|
|
|
+ defaultNodeColor: '#FFC5A6',
|
|
|
+ defaultNodeFontColor: '#000000',
|
|
|
+ defaultNodeBorderColor: '#efefef',
|
|
|
+ defaultNodeBorderWidth: 1,
|
|
|
+ defaultLineColor: '#FD8B37',
|
|
|
+ defaultLineWidth: 1,
|
|
|
+ defaultShowLineLabel: true,
|
|
|
+ defaultLineMarker: {
|
|
|
+ markerWidth: 12,
|
|
|
+ markerHeight: 12,
|
|
|
+ refX: 6,
|
|
|
+ refY: 6,
|
|
|
+ data: 'M2,2 L10,6 L2,10 L6,6 L2,2'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
async open (item) {
|
|
|
this.$refs.dialog.open()
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const jsonData = {
|
|
|
+ rootId: 'a',
|
|
|
+ nodes: [
|
|
|
+ { id: 'a', text: 'a' },
|
|
|
+ { id: 'b', text: 'b' },
|
|
|
+ { id: 'b1', text: 'b1' },
|
|
|
+ { id: 'b1-1', text: 'b1-1' },
|
|
|
+ { id: 'b1-2', text: 'b1-2' }
|
|
|
+ ],
|
|
|
+ lines: [
|
|
|
+ { from: 'a', to: 'b' },
|
|
|
+ { from: 'b', to: 'b1' },
|
|
|
+ { from: 'b1', to: 'b1-1' },
|
|
|
+ { from: 'b1', to: 'b1-2' },
|
|
|
+ { from: 'b1', to: 'b1-3' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.$refs.graphRef.setOptions(this.graphOptions)
|
|
|
+ this.$refs.graphRef.setJsonData(jsonData, (graphInstance) => {
|
|
|
+ // 这些写上当图谱初始化完成后需要执行的代码
|
|
|
+ })
|
|
|
+ })
|
|
|
this.parentDetailTypes = [{
|
|
|
label: '上级员工薪资绩效钻取',
|
|
|
detailType: '员工薪资绩效钻取',
|
zhengnaiwen_citu