iailab-plat-ui-vue2.git

houzhongjian

2024-07-23 8501060c4f921d1e744c477e4dc08eb47b52693c

提交 \| 用户 \| 时间
850106	1	<template>
H	2	<div>
	3	<div ref="myPage" v-show="tab==='a'" class="my-graph" style="height:calc(100vh);">
	4	<RelationGraph
	5	ref="graphRef"
	6	:options="graphOptions"
	7	:on-node-click="onNodeClick"
	8	:on-line-click="onLineClick">
	9	<div slot="graph-plug" class="c-my-panel">
	10	<el-radio-group v-model="tab" size="mini">
	11	<el-radio-button label="a">全局展示</el-radio-button>
	12	<el-radio-button label="b">列表展示</el-radio-button>
	13	</el-radio-group>
	14	</div>
	15	<template #node="{node}">
	16	<div class="item" @click.stop="apiHandleByBode(node)">
	17	<div class="text-overlay">{{ node.text }}</div>
	18	</div>
	19	</template>
	20	</RelationGraph>
	21	<div v-show="isShowNodeTipsPanel"
	22	:style="{left: nodeMenuPanelPosition.x + 'px', top: nodeMenuPanelPosition.y + 'px' }"
	23	style="z-index: 999;padding:10px;background-color: #ffffff;border:#eeeeee solid 1px;box-shadow: 0px 0px 8px #cccccc;position: absolute;">
	24	<div style="line-height: 25px;padding-left: 10px;color: #888888;font-size: 12px;">节点名称：{{currentNode.text}}
	25	</div>
	26	<div style="line-height: 25px;padding-left: 10px;color: #888888;font-size: 12px;">id: {{currentNode.id}}</div>
	27	<div style="line-height: 25px;padding-left: 10px;color: #888888;font-size: 12px;">类别：评价类</div>
	28	<div style="line-height: 25px;padding-left: 10px;color: #888888;font-size: 12px;">参数：控制成功率、网络稳定性</div>
	29	<div style="line-height: 25px;padding-left: 10px;color: #888888;font-size: 12px;">输出：控制系统性能评价</div>
	30	</div>
	31	</div>
	32	<div v-show="tab==='b'">
	33	<div class="else-panel">
	34	<el-radio-group v-model="tab" size="mini">
	35	<el-radio-button label="a">全局展示</el-radio-button>
	36	<el-radio-button label="b">列表展示</el-radio-button>
	37	</el-radio-group>
	38	</div>
	39	<el-card shadow="never" class="aui-card--fill">
	40	<div class="mod-znfx__st-model}">
	41	<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
	42	<el-form-item>
	43	<el-input v-model="dataForm.modelCode" placeholder="模型编码" clearable></el-input>
	44	</el-form-item>
	45	<el-form-item>
	46	<el-input v-model="dataForm.modelName" placeholder="模型名称" clearable></el-input>
	47	</el-form-item>
	48	<el-form-item>
	49	<el-button @click="getDataList()">{{ $t('query') }}</el-button>
	50	</el-form-item>
	51	</el-form>
	52	<el-table v-loading="dataListLoading" :data="dataList" border
	53	@selection-change="dataListSelectionChangeHandle"
	54	style="width: 100%;">
	55	<el-table-column type="index" align="center" width="50" label="序号"></el-table-column>
	56	<!--<el-table-column prop="modelCode" :label="$t('model.modelCode')" header-align="center"
	57	align="left" min-width="150"></el-table-column>-->
	58	<el-table-column prop="modelName" :label="$t('model.modelName')" header-align="center"
	59	align="left" min-width="200"></el-table-column>
	60	<el-table-column prop="modelTypeName" :label="$t('model.modelType')" header-align="center"
	61	align="center" min-width="100"></el-table-column>
	62	<el-table-column prop="modelVersion" :label="$t('model.modelVersion')" header-align="center"
	63	align="left" min-width="100"></el-table-column>
	64	<el-table-column prop="isEnable" :label="$t('user.status')" header-align="center" align="center">
	65	<template slot-scope="scope">
	66	<el-tag v-if="scope.row.isEnable === 0" size="small" type="danger">禁用</el-tag>
	67	<el-tag v-else size="small" type="success">启用</el-tag>
	68	</template>
	69	</el-table-column>
	70	<el-table-column prop="remark" :label="$t('model.remark')" header-align="center"
	71	align="left" min-width="200"></el-table-column>
	72	<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
	73	<template slot-scope="scope">
	74	<el-button type="text" size="small"
	75	@click="logHandle(scope.row.id)">调用日志
	76	</el-button>
	77	<el-button type="text" size="small"
	78	@click="apiHandle(scope.row)">接口详情
	79	</el-button>
	80	</template>
	81	</el-table-column>
	82	</el-table>
	83	<el-pagination
	84	:current-page="page"
	85	:page-sizes="[10, 20, 50, 100]"
	86	:page-size="limit"
	87	:total="total"
	88	layout="total, sizes, prev, pager, next, jumper"
	89	@size-change="pageSizeChangeHandle"
	90	@current-change="pageCurrentChangeHandle">
	91	</el-pagination>
	92	<!-- 弹窗, 调用日志 -->
	93	<log v-if="logVisible" ref="log"></log>
	94	<!-- 弹窗, 接口详情 -->
	95	<api v-if="apiVisible" ref="api"></api>
	96	</div>
	97	</el-card>
	98	</div>
	99	</div>
	100	</template>
	101
	102	<script>
	103	import RelationGraph from 'relation-graph';
	104	import mixinViewModule from '@/mixins/view-module'
	105	import Log from './model-log'
	106	import Api from './model-api'
	107
	108	export default {
	109	mixins: [mixinViewModule],
	110	components: {RelationGraph, Log, Api},
	111	data() {
	112	return {
	113	mixinViewModuleOptions: {
	114	getDataListURL: '/iailab-ntt-model/mcs/st-model/page',
	115	getDataListIsPage: true,
	116	exportURL: '/iailab-ntt-model/mcs/st-model/export',
	117	deleteURL: '/iailab-ntt-model/mcs/st-model',
	118	deleteIsBatch: true
	119	},
	120	dataForm: {
	121	modelCode: '',
	122	modelName: ''
	123	},
	124	logVisible: false,
	125	apiVisible: false,
	126	tab: 'a',
	127	isShowCodePanel: false,
	128	isShowNodeTipsPanel: false,
	129	nodeMenuPanelPosition: {x: 0, y: 0},
	130	currentNode: {},
	131	graphOptions: {
	132	allowSwitchLineShape: true,
	133	allowSwitchJunctionPoint: true,
	134	defaultLineColor: '#178AB9',
	135	defaultNodeColor: 'transparent',
	136	defaultNodeBorderWidth: 0,
	137	defaultNodeBorderColor: 'transpanret',
	138	defaultNodeFontColor: '#ffffff',
	139	defaultNodeShape: 1,
	140	toolBarDirection: 'h',
	141	toolBarPositionH: 'right',
	142	toolBarPositionV: 'bottom',
	143	defaultPloyLineRadius: 10,
	144	defaultLineShape: 1,
	145	// defaultJunctionPoint: 'lr',
	146	disableNodeClickEffect: true,
	147	layout: {
	148	layoutName: 'force',
	149	from: 'left',
	150	force_node_repulsion: 1.8,
	151	}
	152	// 这里可以参考"Graph 图谱"中的参数进行设置
	153	},
	154	filterText: '',
	155	};
	156	},
	157	watch: {
	158	tab(newVal, oldVal) {
	159	if (newVal === 'a') {
	160	console.log(123)
	161	this.showSeeksGraph();
	162	}
	163	},
	164	filterText(val) {
	165	this.$refs.tree.filter(val)
	166	}
	167	},
	168	activated() {
	169	this.limit = 50
	170	this.getDataList()
	171	},
	172	mounted() {
	173	this.showSeeksGraph();
	174	},
	175	methods: {
	176	showSeeksGraph() {
	177	this.$http.get(`/iailab-ntt-model/mcs/st-model/relation`).then(({data: res}) => {
	178	if (res.code !== 0) {
	179	return this.$message.error(res.msg)
	180	}
	181	const __graph_json_data = {
	182	'rootId': 'root',
	183	'nodes': res.data.nodes,
	184	'lines': res.data.lines
	185	};
	186	this.$refs.graphRef.setJsonData(__graph_json_data, (graphInstance) => {
	187	// 这些写上当图谱初始化完成后需要执行的代码
	188	});
	189	}).catch(() => {
	190	})
	191	},
	192	onNodeClick(nodeObject, $event) {
	193	console.log('onNodeClick:', nodeObject);
	194	},
	195	onLineClick(lineObject, linkObject, $event) {
	196	console.log('onLineClick:', lineObject);
	197	},
	198	// 日志列表
	199	logHandle(id) {
	200	this.logVisible = true
	201	this.$nextTick(() => {
	202	this.$refs.log.init(id)
	203	})
	204	},
	205	// api详情
	206	apiHandle(row) {
	207	this.apiVisible = true
	208	this.$nextTick(() => {
	209	this.$refs.api.init(row)
	210	})
	211	},
	212
	213	apiHandleByBode(nodeObject) {
	214	this.apiVisible = true
	215	this.$nextTick(() => {
	216	if (nodeObject.data != null){
	217	this.rowData = this.createObject(nodeObject.id,nodeObject.data.modelCode,nodeObject.text,nodeObject.data.modelVersion,false)
	218	this.$refs.api.init(this.rowData)
	219	}
	220	})
	221	},
	222
	223	createObject: function(id,modelCode,modelName,modelVersion,isShow) {
	224	return {
	225	id: id,
	226	modelCode: modelCode,
	227	modelName: modelName,
	228	modelVersion: modelVersion,
	229	isShow: isShow
	230	};
	231	},
	232
	233	// 启用
	234	enableHandle(id) {
	235	if (!id && this.dataListSelections.length <= 0) {
	236	return this.$message({
	237	message: this.$t('prompt.checkBatch'),
	238	type: 'warning',
	239	duration: 500
	240	})
	241	}
	242	this.$confirm(this.$t('prompt.info', {'handle': '启用'}), this.$t('prompt.title'), {
	243	confirmButtonText: this.$t('confirm'),
	244	cancelButtonText: this.$t('cancel'),
	245	type: 'warning'
	246	}).then(() => {
	247	this.$http.put('/iailab-ntt-model/mcs/st-model/enable', id ? [id] : this.dataListSelections.map(item => item.id)).then(({data: res}) => {
	248	if (res.code !== 0) {
	249	return this.$message.error(res.msg)
	250	}
	251	this.$message({
	252	message: this.$t('prompt.success'),
	253	type: 'success',
	254	duration: 500,
	255	onClose: () => {
	256	this.getDataList()
	257	}
	258	})
	259	}).catch(() => {
	260	})
	261	}).catch(() => {
	262	})
	263	},
	264
	265	// 禁用
	266	disableHandle(id) {
	267	if (!id && this.dataListSelections.length <= 0) {
	268	return this.$message({
	269	message: this.$t('prompt.checkBatch'),
	270	type: 'warning',
	271	duration: 500
	272	})
	273	}
	274	this.$confirm(this.$t('prompt.info', {'handle': '禁用'}), this.$t('prompt.title'), {
	275	confirmButtonText: this.$t('confirm'),
	276	cancelButtonText: this.$t('cancel'),
	277	type: 'warning'
	278	}).then(() => {
	279	this.$http.put('/iailab-ntt-model/mcs/st-model/disable', id ? [id] : this.dataListSelections.map(item => item.id)).then(({data: res}) => {
	280	if (res.code !== 0) {
	281	return this.$message.error(res.msg)
	282	}
	283	this.$message({
	284	message: this.$t('prompt.success'),
	285	type: 'success',
	286	duration: 500,
	287	onClose: () => {
	288	this.getDataList()
	289	}
	290	})
	291	}).catch(() => {
	292	})
	293	}).catch(() => {
	294	})
	295	}
	296	}
	297	};
	298	</script>
	299	<style lang="scss" scoped>
	300	::v-deep .rel-map {
	301	background: none !important;
	302
	303	.rel-node-shape-1 {
	304	}
	305	}
	306
	307	::v-deep .rel-toolbar {
	308	color: #ffffff;
	309
	310	.c-current-zoom {
	311	color: #ffffff;
	312	}
	313	}
	314
	315	.my-graph {
	316	background-image: url('img/model_2.png');
	317	background-size: cover;
	318	}
	319
	320	.c-my-panel {
	321	position: absolute;
	322	right: 10px;
	323	top: 10px;
	324	border-radius: 10px;
	325	z-index: 800;
	326	background-color: transparent;
	327	border: transparent;
	328	}
	329
	330	.else-panel {
	331	position: absolute;
	332	right: 35px;
	333	top: 20px;
	334	border-radius: 10px;
	335	z-index: 800;
	336	background-color: transparent;
	337	border: transparent;
	338	}
	339
	340	.item {
	341	background-image: url('img/model_1.png');
	342	background-size: cover;
	343	width: 170px;
	344	height: 170px
	345	}
	346
	347	.text-overlay {
	348	position: absolute;
	349	top: 50%;
	350	left: 50%;
	351	transform: translate(-50%, -50%);
	352	color: #ffffff;
	353	color: #07abe2;
	354	font-weight: bold;
	355	}
	356	</style>
	357
	358	<style lang="scss" scoped>
	359	.icon-btn {
	360	border: none;
	361	background-color: transparent;
	362	outline: transparent;
	363	position: relative;
	364	width: 4.5em;
	365	height: 4.5em;
	366	perspective: 24em;
	367	transform-style: preserve-3d;
	368	-webkit-tap-highlight-color: transparent
	369	}
	370
	371	.icon-btn__back, .icon-btn__front, .icon-btn__label {
	372	transition: opacity var(--trans-dur) cubic-bezier(0.83, 0, 0.17, 1), transform var(--trans-dur) cubic-bezier(0.83, 0, 0.17, 1)
	373	}
	374
	375	.icon-btn__back, .icon-btn__front {
	376	border-radius: 1.25em;
	377	position: absolute;
	378	top: 0;
	379	left: 0;
	380	width: 100%;
	381	height: 100%
	382	}
	383
	384	.icon-btn__back {
	385	background: linear-gradient(hsl(var(--hue), 10%, 50%), hsl(208, 10%, 50%));
	386	box-shadow: .5em -0.5em .75em hsla(var(--hue), 10%, 10%, 0.15);
	387	display: block;
	388	transform: rotate(15deg);
	389	transform-origin: 100% 100%
	390	}
	391
	392	.icon-btn__front {
	393	background-color: hsla(0, 0%, 100%, 0.3);
	394	box-shadow: 0 0 0 .125em hsla(0, 0%, 100%, 0.3) inset;
	395	backdrop-filter: blur(0.75em);
	396	-webkit-backdrop-filter: blur(0.75em);
	397	display: flex;
	398	transform-origin: 80% 50%;
	399	color: #ffffff;
	400	align-items: center;
	401	justify-content: center;
	402
	403	& svg {
	404	width: 70%;
	405	height: 70%;
	406	}
	407	}
	408
	409	//.icon-btn--blue .icon-btn__back {
	410	// background: linear-gradient(hsl(var(--hue),90%,50%),hsl(208,90%,50%))
	411	//}
	412
	413	//.icon-btn--yellow .icon-btn__back {
	414	// background: linear-gradient(hsl(43,90%,50%),hsl(28,90%,50%))
	415	//}
	416	.icon-btn--blue .icon-btn__back {
	417	background: linear-gradient(hsl(253, 90%, 50%), hsl(238, 90%, 50%))
	418	}
	419
	420	.icon-btn--purple .icon-btn__back {
	421	background: linear-gradient(hsl(283, 90%, 50%), hsl(268, 90%, 50%))
	422	}
	423
	424	.icon-btn--red .icon-btn__back {
	425	background: linear-gradient(hsl(3, 90%, 50%), hsl(348, 90%, 50%))
	426	}
	427
	428	.icon-btn--yellow .icon-btn__back {
	429	background: linear-gradient(hsl(43, 90%, 50%), hsl(28, 90%, 50%))
	430	}
	431
	432	.icon-btn__icon {
	433	margin: auto;
	434	width: 1.5em;
	435	height: 1.5em
	436	}
	437
	438	.icon-btn__label {
	439	font-size: .75em;
	440	line-height: 2;
	441	opacity: 0;
	442	position: absolute;
	443	top: 100%;
	444	right: 0;
	445	left: 0;
	446	transform: translateY(0);
	447	color: #ffffff;
	448	}
	449
	450	.icon-btn:focus-visible .icon-btn__back, .icon-btn:hover .icon-btn__back {
	451	transform: rotate(22.5deg)
	452	}
	453
	454	.icon-btn:focus-visible .icon-btn__front, .icon-btn:hover .icon-btn__front {
	455	transform: translateZ(3em) rotateX(20deg) rotateY(20deg)
	456	}
	457
	458	.icon-btn:focus-visible .icon-btn__label, .icon-btn:hover .icon-btn__label {
	459	opacity: 1;
	460	transform: translateY(20%)
	461	}
	462	</style>