Jcdm042-Mes.git

懒羊羊

2024-01-31 e57a8990ae56f657a59c435a0613c5f7a8728003

提交 \| 用户 \| 时间
e57a89	1	<template>
懒	2	<div class="app-container">
	3	<el-row :gutter="10">
	4	<el-col :span="8">
	5	<el-card style="height: calc(100vh - 125px)">
	6	<div slot="header">
	7	<span><i class="el-icon-collection"></i> 缓存列表</span>
	8	<el-button
	9	style="float: right; padding: 3px 0"
	10	type="text"
	11	icon="el-icon-refresh-right"
	12	@click="refreshCacheNames()"
	13	></el-button>
	14	</div>
	15	<el-table
	16	v-loading="loading"
	17	:data="cacheNames"
	18	:height="tableHeight"
	19	highlight-current-row
	20	@row-click="getCacheKeys"
	21	style="width: 100%"
	22	>
	23	<el-table-column
	24	label="序号"
	25	width="60"
	26	type="index"
	27	></el-table-column>
	28
	29	<el-table-column
	30	label="缓存名称"
	31	align="center"
	32	prop="cacheName"
	33	:show-overflow-tooltip="true"
	34	:formatter="nameFormatter"
	35	></el-table-column>
	36
	37	<el-table-column
	38	label="备注"
	39	align="center"
	40	prop="remark"
	41	:show-overflow-tooltip="true"
	42	/>
	43	<el-table-column
	44	label="操作"
	45	width="60"
	46	align="center"
	47	class-name="small-padding fixed-width"
	48	>
	49	<template slot-scope="scope">
	50	<el-button
	51	size="mini"
	52	type="text"
	53	icon="el-icon-delete"
	54	@click="handleClearCacheName(scope.row)"
	55	></el-button>
	56	</template>
	57	</el-table-column>
	58	</el-table>
	59	</el-card>
	60	</el-col>
	61
	62	<el-col :span="8">
	63	<el-card style="height: calc(100vh - 125px)">
	64	<div slot="header">
	65	<span><i class="el-icon-key"></i> 键名列表</span>
	66	<el-button
	67	style="float: right; padding: 3px 0"
	68	type="text"
	69	icon="el-icon-refresh-right"
	70	@click="refreshCacheKeys()"
	71	></el-button>
	72	</div>
	73	<el-table
	74	v-loading="subLoading"
	75	:data="cacheKeys"
	76	:height="tableHeight"
	77	highlight-current-row
	78	@row-click="handleCacheValue"
	79	style="width: 100%"
	80	>
	81	<el-table-column
	82	label="序号"
	83	width="60"
	84	type="index"
	85	></el-table-column>
	86	<el-table-column
	87	label="缓存键名"
	88	align="center"
	89	:show-overflow-tooltip="true"
	90	:formatter="keyFormatter"
	91	>
	92	</el-table-column>
	93	<el-table-column
	94	label="操作"
	95	width="60"
	96	align="center"
	97	class-name="small-padding fixed-width"
	98	>
	99	<template slot-scope="scope">
	100	<el-button
	101	size="mini"
	102	type="text"
	103	icon="el-icon-delete"
	104	@click="handleClearCacheKey(scope.row)"
	105	></el-button>
	106	</template>
	107	</el-table-column>
	108	</el-table>
	109	</el-card>
	110	</el-col>
	111
	112	<el-col :span="8">
	113	<el-card :bordered="false" style="height: calc(100vh - 125px)">
	114	<div slot="header">
	115	<span><i class="el-icon-document"></i> 缓存内容</span>
	116	<el-button
	117	style="float: right; padding: 3px 0"
	118	type="text"
	119	icon="el-icon-refresh-right"
	120	@click="handleClearCacheAll()"
	121	>清理全部</el-button
	122	>
	123	</div>
	124	<el-form :model="cacheForm">
	125	<el-row :gutter="32">
	126	<el-col :offset="1" :span="22">
	127	<el-form-item label="缓存名称:" prop="cacheName">
	128	<el-input v-model="cacheForm.cacheName" :readOnly="true" />
	129	</el-form-item>
	130	</el-col>
	131	<el-col :offset="1" :span="22">
	132	<el-form-item label="缓存键名:" prop="cacheKey">
	133	<el-input v-model="cacheForm.cacheKey" :readOnly="true" />
	134	</el-form-item>
	135	</el-col>
	136	<el-col :offset="1" :span="22">
	137	<el-form-item label="缓存内容:" prop="cacheValue">
	138	<el-input
	139	v-model="cacheForm.cacheValue"
	140	type="textarea"
	141	:rows="8"
	142	:readOnly="true"
	143	/>
	144	</el-form-item>
	145	</el-col>
	146	</el-row>
	147	</el-form>
	148	</el-card>
	149	</el-col>
	150	</el-row>
	151	</div>
	152	</template>
	153
	154	<script>
	155	import { listCacheName, listCacheKey, getCacheValue, clearCacheName, clearCacheKey, clearCacheAll } from "@/api/monitor/cache";
	156
	157	export default {
	158	name: "CacheList",
	159	data() {
	160	return {
	161	cacheNames: [],
	162	cacheKeys: [],
	163	cacheForm: {},
	164	loading: true,
	165	subLoading: false,
	166	nowCacheName: "",
	167	tableHeight: window.innerHeight - 200
	168	};
	169	},
	170	created() {
	171	this.getCacheNames();
	172	},
	173	methods: {
	174	/** 查询缓存名称列表 */
	175	getCacheNames() {
	176	this.loading = true;
	177	listCacheName().then(response => {
	178	this.cacheNames = response.data;
	179	this.loading = false;
	180	});
	181	},
	182	/** 刷新缓存名称列表 */
	183	refreshCacheNames() {
	184	this.getCacheNames();
	185	this.$modal.msgSuccess("刷新缓存列表成功");
	186	},
	187	/** 清理指定名称缓存 */
	188	handleClearCacheName(row) {
	189	clearCacheName(row.cacheName).then(response => {
	190	this.$modal.msgSuccess("清理缓存名称[" + row.cacheName + "]成功");
	191	this.getCacheKeys();
	192	});
	193	},
	194	/** 查询缓存键名列表 */
	195	getCacheKeys(row) {
	196	const cacheName = row !== undefined ? row.cacheName : this.nowCacheName;
	197	if (cacheName === "") {
	198	return;
	199	}
	200	this.subLoading = true;
	201	listCacheKey(cacheName).then(response => {
	202	this.cacheKeys = response.data;
	203	this.subLoading = false;
	204	this.nowCacheName = cacheName;
	205	});
	206	},
	207	/** 刷新缓存键名列表 */
	208	refreshCacheKeys() {
	209	this.getCacheKeys();
	210	this.$modal.msgSuccess("刷新键名列表成功");
	211	},
	212	/** 清理指定键名缓存 */
	213	handleClearCacheKey(cacheKey) {
	214	clearCacheKey(cacheKey).then(response => {
	215	this.$modal.msgSuccess("清理缓存键名[" + cacheKey + "]成功");
	216	this.getCacheKeys();
	217	});
	218	},
	219	/** 列表前缀去除 */
	220	nameFormatter(row) {
	221	return row.cacheName.replace(":", "");
	222	},
	223	/** 键名前缀去除 */
	224	keyFormatter(cacheKey) {
	225	return cacheKey.replace(this.nowCacheName, "");
	226	},
	227	/** 查询缓存内容详细 */
	228	handleCacheValue(cacheKey) {
	229	getCacheValue(this.nowCacheName, cacheKey).then(response => {
	230	this.cacheForm = response.data;
	231	});
	232	},
	233	/** 清理全部缓存 */
	234	handleClearCacheAll() {
	235	clearCacheAll().then(response => {
	236	this.$modal.msgSuccess("清理全部缓存成功");
	237	});
	238	}
	239	},
	240	};
	241	</script>