From 9b4e4f6822a9f4582dc3f1c41ac552e75ae66db5 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 13 May 2021 15:38:26 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=99=8B=E6=81=92=E9=80=9A=E5=9B=AD?= =?UTF-8?q?=E5=8C=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/dashboardOne.vue | 96 ++++++++++++++++++----------- src/components/dashboardTow.vue | 103 ++++++++++++++++++++------------ src/components/memorabilia.vue | 78 +++++++++++++++++------- src/views/jht.vue | 2 +- src/views/style.css | 8 +++ 5 files changed, 193 insertions(+), 94 deletions(-) diff --git a/src/components/dashboardOne.vue b/src/components/dashboardOne.vue index 84bf4c8..9800155 100644 --- a/src/components/dashboardOne.vue +++ b/src/components/dashboardOne.vue @@ -1,6 +1,6 @@ @@ -96,42 +96,61 @@ export default defineComponent({ this.myCharts.setOption({ series: [ { - name: '停车位', - type: 'gauge', + type: "gauge", progress: { - show: true, - }, - axisLine: { - lineStyle: { - } - }, - axisTick: { - show: false - }, - splitLine: { - distance: 2, - length: 3, - lineStyle: { + show: true, + width: -15, + }, + axisLine: { + lineStyle: { + width: -15, + }, + }, + axisTick: { + show: false, + }, + splitLine: { + length: 20, + lineStyle: { width: 1, - color: '#999' - } - }, - axisLabel: { - distance: 15, - color: '#3AC7D7', - fontSize: 7 - }, - detail: { - fontSize: 10, - color: '#7C7C1C', - offsetCenter: [0, '70%'] - }, - data: [{ - value: 70 - }] - + color: "#999", + }, + }, + axisLabel: { + distance: -10, + color: "#999", + fontSize: 12, + }, + anchor: { + show: true, + showAbove: true, + size: 15, + itemStyle: { + borderWidth: 10, + }, + }, + title: { + fontSize: 12, + color: "#fff", + }, + detail: { + valueAnimation: true, + fontSize: 18, + color: "#fff", + }, + data: [ + { + value: 62.89, + name: "停车位", + title: { + offsetCenter: ["0%", "70%"], + }, + detail: { + offsetCenter: ["0%", "100%"], + }, + }, + ], }, - ], }) }, @@ -140,9 +159,14 @@ export default defineComponent({ diff --git a/src/components/dashboardTow.vue b/src/components/dashboardTow.vue index b21f66a..363e0a6 100644 --- a/src/components/dashboardTow.vue +++ b/src/components/dashboardTow.vue @@ -1,6 +1,6 @@ @@ -96,42 +96,67 @@ export default defineComponent({ this.myCharts.setOption({ series: [ { - name: '饱和度', - type: 'gauge', - progress: { - show: true, - }, - axisLine: { - lineStyle: { - } - }, - axisTick: { - show: false - }, - splitLine: { - distance: 2, - length: 3, - lineStyle: { - width: 1, - color: '#999' - } - }, - axisLabel: { - distance: 15, - color: '#3AC7D7', - fontSize: 7 - }, - detail: { - fontSize: 10, - color: '#7C7C1C', - offsetCenter: [0, '70%'] - }, - data: [{ - value: 70 - }] - + type: "gauge", + axisLine: { + lineStyle: { + width: 15, + color: [ + [0.3, "#67e0e3"], + [0.7, "#37a2da"], + [1, "#fd666d"], + ], + }, + }, + pointer: { + itemStyle: { + color: "auto", + }, + }, + axisTick: { + distance: -30, + length: 8, + lineStyle: { + color: "#fff", + width: 2, + }, + }, + splitLine: { + distance: -30, + length: 30, + lineStyle: { + color: "#fff", + width: 4, + }, + }, + axisLabel: { + color: "auto", + distance: 20, + fontSize: 12, + }, + title: { + fontSize: 12, + color: "#fff", + }, + detail: { + valueAnimation: true, + formatter: "{value} %", + color: "#fff", + fontSize: 18, + offsetCenter: [0, "90%"], + }, + data: [ + { + value: 73, + name: "使用面积", + title: { + offsetCenter: ["0%", "70%"], + }, + detail: { + offsetCenter: ["0%", "100%"], + }, + }, + ], }, - ], }) }, @@ -145,4 +170,8 @@ export default defineComponent({ width: 1440rem; height: 1110rem; } +.clock{ + width: 200rem; + height: 200rem; +} diff --git a/src/components/memorabilia.vue b/src/components/memorabilia.vue index 8bed27e..bde6517 100644 --- a/src/components/memorabilia.vue +++ b/src/components/memorabilia.vue @@ -3,34 +3,28 @@
大事记
-
-
+
+
+
-
防火墙
-
2021-04-08
+
{{detail.title}}
+
{{detail.time}}
-

有助于提高计算机的安全性。Windows防火墙能够限制从其他计算机送到用户计算机上的信息...

+

{{detail.describe}}

-
+
-
防火墙
-
2021-04-08
+
{{detail.title}}
+
{{detail.time}}
-

有助于提高计算机的安全性。Windows防火墙能够限制从其他计算机送到用户计算机上的信息...

-
-
-
-
-
防火墙
-
2021-04-08
-
-
-

有助于提高计算机的安全性。Windows防火墙能够限制从其他计算机送到用户计算机上的信息...

+

{{detail.describe}}

+ +
@@ -45,11 +39,41 @@ export default defineComponent({ name: 'memorabilia', data() { return { - myCharts: {}, - temps: [], + + details:[ + { + title:'防火墙', + time:'2021-04-08', + describe:'有助于提高计算机的安全性。Windows防火墙能够限制从其他计算机送到用户计算机上的信息,这使得用户可以更好的控制' + }, + { + title:'防火墙', + time:'2021-04-08', + describe:'是一种建立在现代通信网络技术和信息安全技术基础上的应用性安全技术,隔离技术。' + }, + { + title:'防火墙', + time:'2021-04-08', + describe:'越来越多地应用于专用网络与公用网络的互联环境之中,尤其以接入Internet网络为最甚。' + }, + { + title:'防火墙', + time:'2021-04-08', + describe:'防火墙代主要是借助硬件和软件的作用于内部和外部网络的环境间产生一种保护的屏障,从而实现对计算机不安全网络因素的阻断。' + }, + { + title:'防火墙', + time:'2021-04-08', + describe:'只有在防火墙同意情况下,用户才能够进入计算机内,如果不同意就会被阻挡于外,防火墙技术的警报功能十分强大,在外部的用户要进入到计算机内时,防火墙就会迅速的发出相应的警报,并提醒用户的行为' + } + ] } + }, + methods: { + + }, }) @@ -59,4 +83,18 @@ export default defineComponent({ width: 1440rem; height: 1110rem; } +.matter { + animation: myMove 8s linear infinite; + animation-fill-mode: forwards; + overflow: hidden; +} + /*文字无缝滚动*/ +@keyframes myMove { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(-392rem); + } +} diff --git a/src/views/jht.vue b/src/views/jht.vue index 409b6e3..8f3c315 100644 --- a/src/views/jht.vue +++ b/src/views/jht.vue @@ -85,7 +85,7 @@ export default defineComponent({ Heat, Curve, Memorabilia, - Throughput + Throughput, }, data() { diff --git a/src/views/style.css b/src/views/style.css index b85cfaf..32282f7 100644 --- a/src/views/style.css +++ b/src/views/style.css @@ -183,7 +183,15 @@ iframe { } .firewall3{ color: #19A2CC; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; } .dashboardFather{ display: flex; +} +.matter{ + overflow:auto; + /* overflow: hidden; */ } \ No newline at end of file From 221f209f5d47525c4a79e4516f139f2c99fb3153 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 13 May 2021 15:47:13 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=99=8B=E6=81=92=E9=80=9A=E5=9B=AD?= =?UTF-8?q?=E5=8C=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/memorabilia.vue | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/memorabilia.vue b/src/components/memorabilia.vue index bde6517..599cbd6 100644 --- a/src/components/memorabilia.vue +++ b/src/components/memorabilia.vue @@ -47,24 +47,24 @@ export default defineComponent({ describe:'有助于提高计算机的安全性。Windows防火墙能够限制从其他计算机送到用户计算机上的信息,这使得用户可以更好的控制' }, { - title:'防火墙', + title:'代理服务器', time:'2021-04-08', - describe:'是一种建立在现代通信网络技术和信息安全技术基础上的应用性安全技术,隔离技术。' + describe:'代理服务器代表内部客户端与外部的服务器通信,代理服务器这个术语通常是指一个应用级的网关,虽然电路级网关也可作为代理服务器的一种' }, { - title:'防火墙', + title:'包过滤', time:'2021-04-08', - describe:'越来越多地应用于专用网络与公用网络的互联环境之中,尤其以接入Internet网络为最甚。' + describe:'包过滤是处理网络上基于packet-by-packet流量的设备,包过滤设备允许或阻止包,典型的实施方法是通过标准的路由器,包过滤是几种不同防火墙的类型之一.' }, { - title:'防火墙', + title:'电路级网关', time:'2021-04-08', - describe:'防火墙代主要是借助硬件和软件的作用于内部和外部网络的环境间产生一种保护的屏障,从而实现对计算机不安全网络因素的阻断。' + describe:'电路级网关用来监控受信任的客户或服务器与不受信任的主机间的TCP握手信息,这样来决定这个会话是否悠哉游哉,电路级网关是在OSI模型中会话层上来过滤数据包' }, { - title:'防火墙', + title:'代理服务器', time:'2021-04-08', - describe:'只有在防火墙同意情况下,用户才能够进入计算机内,如果不同意就会被阻挡于外,防火墙技术的警报功能十分强大,在外部的用户要进入到计算机内时,防火墙就会迅速的发出相应的警报,并提醒用户的行为' + describe:'代理服务器代表内部客户端与外部的服务器通信,代理服务器这个术语通常是指一个应用级的网关,虽然电路级网关也可作为代理服务器的一种.' } ] } @@ -84,7 +84,7 @@ export default defineComponent({ height: 1110rem; } .matter { - animation: myMove 8s linear infinite; + animation: myMove 20s linear infinite; animation-fill-mode: forwards; overflow: hidden; }