From 817cc11b37d74fcabb183226cc784019b11d2a0f Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Sat, 9 Oct 2021 17:23:43 +0800
Subject: [PATCH] add server template

---
 src/views/template/server.vue | 513 ++++++++++++++++++++++++++++++++++
 1 file changed, 513 insertions(+)
 create mode 100644 src/views/template/server.vue

diff --git a/src/views/template/server.vue b/src/views/template/server.vue
new file mode 100644
index 00000000..dca7af11
--- /dev/null
+++ b/src/views/template/server.vue
@@ -0,0 +1,513 @@
+<template>
+	<el-container>
+		<el-aside width="220px">
+			<el-tree class="menu" :data="group" highlight-current></el-tree>
+		</el-aside>
+		<el-main>
+			<el-card shadow="never" header="Server hardware status">
+				<el-row>
+					<el-col :span="8">
+						<div class="server-top-item">
+							<el-progress type="dashboard" :percentage="25" :stroke-width="8" :width="150"
+								:color="colors">
+								<template #default="{ percentage }">
+									<span class="percentage-value">{{ percentage }}<em>%</em></span>
+									<span class="percentage-label">CPU</span>
+								</template>
+							</el-progress>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div class="server-top-item">
+							<el-progress type="dashboard" :percentage="33.2" :stroke-width="8" :width="150"
+								:color="colors">
+								<template #default="{ percentage }">
+									<span class="percentage-value">{{ percentage }}<em>%</em></span>
+									<span class="percentage-label">Memory</span>
+								</template>
+							</el-progress>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div class="server-top-item">
+							<el-progress type="dashboard" :percentage="81.0" :stroke-width="8" :width="150"
+								:color="colors">
+								<template #default="{ percentage }">
+									<span class="percentage-value">{{ percentage }}<em>%</em></span>
+									<span class="percentage-label">Disk</span>
+								</template>
+							</el-progress>
+						</div>
+					</el-col>
+				</el-row>
+				<el-tabs style="margin-top: 20px;" @tab-click="tabClick">
+					<el-tab-pane label="CPU" lazy>
+						<div class="server-item-info">
+							<div class="title">
+								<label>CPU</label>
+								<span>Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz</span>
+							</div>
+							<div class="chart" style="border-color: #409EFF;background: rgba(64,158,255,0.05);">
+								<scEcharts ref="cpu" height="100%" :option="option.cpu"></scEcharts>
+							</div>
+							<div class="data">
+								<el-descriptions :column="2" size="mini" border>
+									<el-descriptions-item label="利用率">35%</el-descriptions-item>
+									<el-descriptions-item label="速度">2.67 GHz</el-descriptions-item>
+									<el-descriptions-item label="内核">4</el-descriptions-item>
+									<el-descriptions-item label="逻辑处理器">8</el-descriptions-item>
+									<el-descriptions-item label="正常运行时间">0:06:06:04</el-descriptions-item>
+								</el-descriptions>
+							</div>
+						</div>
+					</el-tab-pane>
+					<el-tab-pane label="Memory" lazy>
+						<div class="server-item-info">
+							<div class="title">
+								<label>Memory</label>
+								<span>16.0 GB</span>
+							</div>
+							<div class="chart" style="border-color: #8b12ae;background: rgba(139,18,174,0.05);">
+								<scEcharts ref="memory" height="100%" :option="option.memory"></scEcharts>
+							</div>
+						</div>
+					</el-tab-pane>
+					<el-tab-pane label="Disk" lazy>
+						<div class="server-item-info">
+							<div class="title">
+								<label>Disk</label>
+								<span>SAMSUNG MZVLB512HBJQ-000L7</span>
+							</div>
+							<div class="disk-list">
+								<el-row :gutter="20">
+									<el-col :span="6">
+										<div class="disk-list-item">
+											<h2>本地磁盘(C)</h2>
+											<el-progress :stroke-width="10" :percentage="50" :color="colors"/>
+											<p>66.2 GB 可用，共 175 GB</p>
+										</div>
+									</el-col>
+									<el-col :span="6">
+										<div class="disk-list-item">
+											<h2>本地磁盘(D)</h2>
+											<el-progress :stroke-width="10" :percentage="60" :color="colors"/>
+											<p>66.2 GB 可用，共 175 GB</p>
+										</div>
+									</el-col>
+									<el-col :span="6">
+										<div class="disk-list-item">
+											<h2>本地磁盘(E)</h2>
+											<el-progress :stroke-width="10" :percentage="81" :color="colors"/>
+											<p>66.2 GB 可用，共 175 GB</p>
+										</div>
+									</el-col>
+									<el-col :span="6">
+										<div class="disk-list-item">
+											<h2>本地磁盘(F)</h2>
+											<el-progress :stroke-width="10" :percentage="15.5" :color="colors"/>
+											<p>66.2 GB 可用，共 175 GB</p>
+										</div>
+									</el-col>
+								</el-row>
+							</div>
+						</div>
+					</el-tab-pane>
+					<el-tab-pane label="Network" lazy>
+						<div class="server-item-info">
+							<div class="title">
+								<label>Network</label>
+								<span>Intel(R) Ethernet Connection (6) 1219-V</span>
+							</div>
+							<div class="chart" style="border-color: #a74f01;background: rgba(167,79,1,0.05);">
+								<scEcharts ref="network" height="100%" :option="option.network"></scEcharts>
+							</div>
+						</div>
+					</el-tab-pane>
+				</el-tabs>
+			</el-card>
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+	import scEcharts from '@/components/scEcharts';
+
+	export default {
+		name: 'server',
+		components: {
+			scEcharts
+		},
+		data() {
+			return {
+				group: [{
+					label: "SQL Server",
+					icon: "el-icon-coin",
+					code: "1",
+
+				},{
+					label: "Web Server",
+					icon: "el-icon-monitor",
+					code: "2",
+				},{
+					label: "Api Server",
+					icon: "el-icon-monitor",
+					code: "3",
+				},{
+					label: "Nginx Server",
+					icon: "el-icon-guide",
+					code: "4",
+				}
+				],
+				colors: [{
+						color: '#409EFF',
+						percentage: 60
+					},
+					{
+						color: '#E6A23C',
+						percentage: 80
+					},
+					{
+						color: '#F56C6C',
+						percentage: 100
+					}
+				],
+				option: {
+					cpu: {
+						tooltip: {
+							trigger: 'axis'
+						},
+						grid: {
+							top: '0',
+							bottom: '0',
+							left: '0',
+							right: '0'
+						},
+						animation: false,
+						xAxis: {
+							type: 'category',
+							boundaryGap: false,
+							data: (function() {
+								var now = new Date();
+								var res = [];
+								var len = 60;
+								while (len--) {
+									res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
+									now = new Date(now - 2000);
+								}
+								return res;
+							})(),
+							splitLine: {
+								show: false
+							},
+							axisTick: {
+								show: false
+							},
+							axisLabel: {
+								show: false
+							}
+						},
+						yAxis: {
+							type: 'value',
+							min: 0,
+							max: 100,
+							splitLine: {
+								show: false
+							},
+							axisTick: {
+								show: false
+							},
+							axisLabel: {
+								show: false
+							}
+						},
+						series: [{
+							data: (function() {
+								var res = [];
+								var len = 60;
+								while (len--) {
+									res.push(Math.round(Math.random() * 0));
+								}
+								return res;
+							})(),
+							type: 'line',
+							symbol: 'none',
+							lineStyle: {
+								width: 1,
+								color: '#409EFF'
+							},
+							areaStyle: {
+								opacity: 0.1,
+								color: '#409EFF'
+							},
+						}]
+					},
+					memory: {
+						tooltip: {
+							trigger: 'axis'
+						},
+						grid: {
+							top: '0',
+							bottom: '0',
+							left: '0',
+							right: '0'
+						},
+						animation: false,
+						xAxis: {
+							type: 'category',
+							boundaryGap: false,
+							data: (function() {
+								var now = new Date();
+								var res = [];
+								var len = 60;
+								while (len--) {
+									res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
+									now = new Date(now - 2000);
+								}
+								return res;
+							})(),
+							splitLine: {
+								show: false
+							},
+							axisTick: {
+								show: false
+							},
+							axisLabel: {
+								show: false
+							}
+						},
+						yAxis: {
+							type: 'value',
+							min: 0,
+							max: 100,
+							splitLine: {
+								show: false
+							},
+							axisTick: {
+								show: false
+							},
+							axisLabel: {
+								show: false
+							}
+						},
+						series: [{
+							data: (function() {
+								var res = [];
+								var len = 60;
+								while (len--) {
+									res.push(Math.round(Math.random() * 0));
+								}
+								return res;
+							})(),
+							type: 'line',
+							symbol: 'none',
+							lineStyle: {
+								width: 1,
+								color: '#8b12ae'
+							},
+							areaStyle: {
+								opacity: 0.1,
+								color: '#8b12ae'
+							},
+						}]
+					},
+					network: {
+						tooltip: {
+							trigger: 'axis'
+						},
+						grid: {
+							top: '0',
+							bottom: '0',
+							left: '0',
+							right: '0'
+						},
+						animation: false,
+						legend: {
+							data: ['接收 Kbps', '发送 Kbps'],
+							top: '10px',
+							right: '10px',
+							itemStyle: {
+								opacity: 0
+							}
+						},
+						xAxis: {
+							type: 'category',
+							boundaryGap: false,
+							data: (function() {
+								var now = new Date();
+								var res = [];
+								var len = 60;
+								while (len--) {
+									res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
+									now = new Date(now - 2000);
+								}
+								return res;
+							})(),
+							splitLine: {
+								show: false
+							},
+							axisTick: {
+								show: false
+							},
+							axisLabel: {
+								show: false
+							}
+						},
+						yAxis: {
+							type: 'value',
+							min: 0,
+							max: 100,
+							splitLine: {
+								show: false
+							},
+							axisTick: {
+								show: false
+							},
+							axisLabel: {
+								show: false
+							}
+						},
+						series: [{
+							name: '接收 Kbps',
+							data: (function() {
+								var res = [];
+								var len = 60;
+								while (len--) {
+									res.push(Math.round(Math.random() * 0));
+								}
+								return res;
+							})(),
+							type: 'line',
+							symbol: 'none',
+							lineStyle: {
+								width: 1,
+								color: '#a74f01'
+							},
+							areaStyle: {
+								opacity: 0.1,
+								color: '#a74f01'
+							},
+						},{
+							name: '发送 Kbps',
+							data: (function() {
+								var res = [];
+								var len = 60;
+								while (len--) {
+									res.push(Math.round(Math.random() * 0));
+								}
+								return res;
+							})(),
+							type: 'line',
+							smooth: false,
+							symbol: 'none',
+							lineStyle: {
+								width: 1,
+								type:'dashed',
+								color: '#a74f01'
+							}
+						}
+						]
+					}
+				}
+			}
+		},
+		mounted() {
+			setInterval(() => {
+				this.option.cpu.series[0].data.shift()
+				this.option.cpu.series[0].data.push(Math.round(Math.random() * 100));
+				this.option.cpu.xAxis.data.shift();
+				this.option.cpu.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
+
+				this.option.memory.series[0].data.shift()
+				this.option.memory.series[0].data.push(Math.round(Math.random() * 50));
+				this.option.memory.xAxis.data.shift();
+				this.option.memory.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
+
+				this.option.network.series[0].data.shift()
+				this.option.network.series[0].data.push(Math.round(Math.random() * 20));
+				this.option.network.series[1].data.shift()
+				this.option.network.series[1].data.push(Math.round(Math.random() * 10));
+				this.option.network.xAxis.data.shift();
+				this.option.network.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
+
+
+
+			}, 1000)
+		},
+		methods: {
+			tabClick(){
+				this.$nextTick(() => {
+					// this.$refs.cpu.myChart && this.$refs.cpu.myChart.resize()
+					// this.$refs.memory.myChart && this.$refs.memory.myChart.resize()
+					// this.$refs.netword.myChart && this.$refs.netword.myChart.resize()
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.server-top-item {
+		text-align: center;
+	}
+
+	.server-top-item .percentage-value {
+		display: block;
+		font-size: 24px;
+		font-weight: bold;
+	}
+
+	.server-top-item .percentage-value em {
+		font-size: 14px;
+		font-style: normal;
+		margin-left: 5px;
+		font-weight: normal;
+	}
+
+	.server-top-item .percentage-label {
+		display: block;
+		font-size: 12px;
+		margin-top: 10px;
+	}
+
+	.server-item-info {}
+
+	.server-item-info .title {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 15px;
+	}
+
+	.server-item-info .title label {
+		font-size: 26px;
+	}
+
+	.server-item-info .title span {
+		font-size: 14px;
+	}
+
+	.server-item-info .chart {
+		height: 250px;
+		border: 1px solid #eee;
+	}
+
+	.server-item-info .data {
+		margin-top: 15px;
+	}
+
+	.disk-list-item {
+		margin: 10px 0;
+	}
+
+	.disk-list-item h2 {
+		font-weight: normal;
+		font-size: 12px;
+	}
+	.disk-list-item .el-progress {
+		margin:5px 0;
+	}
+	.disk-list-item p {
+		color: #999;
+		font-size: 12px;
+	}
+</style>