diff --git a/nezha-fronted/src/components/common/js/common.js b/nezha-fronted/src/components/common/js/common.js index 2fc6a0787..9705de778 100644 --- a/nezha-fronted/src/components/common/js/common.js +++ b/nezha-fronted/src/components/common/js/common.js @@ -120,3 +120,300 @@ export function lineChartMove (e) { export function getMousePoint () { return mousePoint } +export const coordinatePoint = { + Libra: { + name: 'Libra', + offsetX: '6.5%', + offsetY: '15.6%', + point: [ + { x: 10, y: 70 }, + { x: 45, y: 55 }, + { x: 70, y: 10 }, + { x: 110, y: 50 }, + { x: 100, y: 110 }, + { x: 60, y: 130 }, + { x: 58, y: 150 }, + { x: 60, y: 130 }, + { x: 100, y: 110 }, + { x: 70, y: 10 } + ], + dot: [ + [[10, 70], [45, 55]], + [[45, 55], [70, 10]], + [[100, 110], [70, 10]] + ] + }, + Cancer: { + name: 'Cancer', + offsetX: '20%', + offsetY: '12.4%', + point: [ + { x: 65, y: 130 }, + { x: 60, y: 70 }, + { x: 145, y: 100 }, + { x: 60, y: 70 }, + // { x: 45, y: 50 }, + { x: 10, y: 10 }], + dot: [ + [[60, 70], [145, 100]] + ] + }, + Taurus: { + name: 'Taurus', + offsetX: '34.9%', + offsetY: '6.5%', + point: [ + { x: 200, y: 240 }, + // { x: 198, y: 225 }, + { x: 140, y: 190, disabled: true }, + { x: 110, y: 145 }, + // { x: 95, y: 135 }, + { x: 83, y: 130, disabled: true }, + { x: 10, y: 55 }, + { x: 83, y: 130, disabled: true }, + // { x: 95, y: 135 }, + { x: 110, y: 145 }, + // { x: 115, y: 125 }, + // { x: 105, y: 120 }, + // { x: 105, y: 105 }, + { x: 90, y: 70 }, + { x: 50, y: 10 }], + dot: [ + [[110, 145], [83, 130]], + [[83, 130], [10, 55]] + ] + }, + Gemini: { + name: 'Gemini', + offsetX: '53%', + offsetY: '5.1%', + point: [ + { x: 175, y: 180 }, + { x: 185, y: 140, disabled: true }, + { x: 65, y: 100 }, + { x: 15, y: 80 }, + { x: 10, y: 55 }, + { x: 30, y: 10 }, + // { x: 45, y: 10 , disabled: true}, + { x: 70, y: 15 }, + { x: 165, y: 55 }, + { x: 205, y: 65 }, + { x: 225, y: 60 }, + { x: 205, y: 65 }, + { x: 185, y: 140, disabled: true }], + dot: [ + [[205, 65], [185, 140]] + ] + }, + Gapricorn: { + name: 'Gapricorn', + offsetX: '73.4%', + offsetY: '12.5%', + point: [ + { x: 10, y: 180 }, + // { x: 15, y: 160 }, + { x: 30, y: 140 }, + { x: 50, y: 110 }, + { x: 80, y: 10 }, + { x: 130, y: 110 }, + { x: 135, y: 130 }, + { x: 110, y: 140 }, + { x: 70, y: 165 }, + { x: 35, y: 170 }, + { x: 10, y: 180 }] + }, + Leo: { + name: 'Leo', + offsetX: '86.6%', + offsetY: '31.5%', + point: [ + { x: 80, y: 10 }, + { x: 60, y: 15 }, + { x: 55, y: 60 }, + { x: 70, y: 80 }, + { x: 100, y: 75 }, + { x: 130, y: 95 }, + { x: 40, y: 195 }, + { x: 10, y: 245 }, + { x: 10, y: 160 }, + { x: 70, y: 80 }], + dot: [ + [[80, 10], [60, 15]], + [[60, 15], [55, 60]], + [[55, 60], [70, 80]] + ], + dasharray: '4 10' + }, + Aries: { + name: 'Aries', + offsetX: '89%', + offsetY: '57.8%', + point: [ + { x: 10, y: 10 }, + { x: 130, y: 40 }, + { x: 180, y: 70 }, + { x: 190, y: 90 }] + }, + Pisces: { + name: 'Pisces', + offsetX: '79.6%', + offsetY: '71.4%', + point: [ + { x: 10, y: 275 }, + { x: 30, y: 295 }, + { x: 50, y: 270 }, + { x: 110, y: 270 }, + { x: 150, y: 270 }, + { x: 200, y: 285 }, + { x: 160, y: 235 }, + { x: 130, y: 205 }, + { x: 115, y: 175 }, + { x: 90, y: 105 }, + { x: 80, y: 75 }, + { x: 65, y: 55 }, + { x: 70, y: 25 }, + { x: 90, y: 10 }, + { x: 120, y: 30 }, + { x: 125, y: 55 }, + { x: 110, y: 80 }, + { x: 80, y: 75 }], + dot: [ + [[10, 275], [30, 295]], + [[30, 295], [50, 270]], + [[50, 270], [110, 270]], + [[110, 270], [150, 270]], + [[150, 270], [200, 285]] + ] + }, + Sagittarius: { + name: 'Sagittarius', + offsetX: '61.8%', + offsetY: '82.9%', + point: [ + { x: 90, y: 185 }, + { x: 60, y: 205 }, + { x: 95, y: 215 }, + { x: 60, y: 205 }, + { x: 35, y: 165 }, + { x: 10, y: 115 }, + { x: 15, y: 100, disabled: true }, + { x: 45, y: 65 }, + { x: 95, y: 85 }, + { x: 120, y: 70 }, + { x: 100, y: 35 }, + { x: 85, y: 30, disabled: true }, + { x: 55, y: 10 }, + { x: 85, y: 30, disabled: true }, + { x: 100, y: 35 }, + { x: 115, y: 20 }, + { x: 100, y: 35 }, + { x: 120, y: 70 }, + { x: 135, y: 75 }, + { x: 135, y: 75 }, + { x: 170, y: 65 }, + { x: 185, y: 15 }, + { x: 170, y: 65 }, + { x: 180, y: 95 }, + { x: 210, y: 105 }, + { x: 215, y: 95, disabled: true }, + { x: 255, y: 65 }, + { x: 215, y: 95, disabled: true }, + { x: 210, y: 105 }, + { x: 180, y: 95 }, + { x: 180, y: 125 }, + { x: 195, y: 145 }, + { x: 180, y: 125 }, + { x: 180, y: 95 }, + { x: 170, y: 65 }, + { x: 135, y: 75 }, + { x: 110, y: 105 }, + { x: 95, y: 85 }], + dot: [ + [[110, 105], [135, 75]], + [[135, 75], [170, 65]], + [[170, 65], [185, 15]], + [[170, 65], [180, 95]], + [[180, 95], [210, 105]], + [[210, 105], [215, 95]], + [[255, 65], [215, 95]] + ] + }, + Virgo: { + name: 'Virgo', + offsetX: '37.1%', + offsetY: '81.2%', + point: [ + { x: 110, y: 10 }, + { x: 115, y: 50 }, + { x: 105, y: 80 }, + { x: 70, y: 90 }, + { x: 20, y: 80 }, + { x: 70, y: 90 }, + { x: 75, y: 150 }, + { x: 40, y: 180 }, + { x: 10, y: 240 }, + { x: 40, y: 180 }, + { x: 75, y: 150 }, + { x: 130, y: 170 }, + { x: 110, y: 220 }, + { x: 90, y: 215 }, + { x: 75, y: 265 }, + { x: 90, y: 215 }, + { x: 110, y: 220 }, + { x: 130, y: 170 }, + { x: 110, y: 135 }, + { x: 105, y: 80 }], + dot: [ + [[130, 170], [110, 220]], + [[110, 220], [90, 215]], + [[90, 215], [75, 265]] + ] + }, + Scorpio: { + name: 'Scorpio', + offsetX: '17.2%', + offsetY: '77.5%', + point: [ + { x: 40, y: 130 }, + { x: 20, y: 150 , disabled: true}, + { x: 10, y: 160 }, + { x: 30, y: 180 }, + { x: 70, y: 185 }, + { x: 100, y: 175 }, + { x: 110, y: 150 }, + { x: 120, y: 120 }, + { x: 160, y: 70 }, + { x: 170, y: 60 , disabled: true}, + { x: 190, y: 50 }, + { x: 230, y: 30 }, + { x: 220, y: 10 }, + { x: 230, y: 30 }, + { x: 235, y: 50 }, + { x: 235, y: 70 }] + }, + Aquarius: { + name: 'Aquarius', + offsetX: '12%', + offsetY: '47.5%', + point: [ + { x: 160, y: 260 }, + { x: 120, y: 230 , disabled: true}, + { x: 110, y: 220 }, + { x: 70, y: 225 }, + { x: 65, y: 260 }, + { x: 10, y: 180 }, + { x: 15, y: 165 }, + { x: 30, y: 150 }, + { x: 25, y: 120 }, + { x: 80, y: 140 }, + { x: 130, y: 130 }, + { x: 80, y: 140 }, + { x: 25, y: 120 }, + { x: 90, y: 70 }, + { x: 160, y: 10 }], + dot: [ + [[25, 120], [80, 140]], + [[80, 140], [130, 130]] + ] + } +} diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue index 76eea54a9..ad16edc34 100644 --- a/nezha-fronted/src/components/common/login.vue +++ b/nezha-fronted/src/components/common/login.vue @@ -2,7 +2,30 @@
- + + + + + + + + + + + + + + + + + + + + + + + +
@@ -120,7 +143,7 @@ import { mapActions } from 'vuex' import QRCode from 'qrcodejs2' import bus from '@/libs/bus.js' import { SVG } from '@svgdotjs/svg.js' -import svgCloud1 from '@/assets/img/starCloud1.svg' +import { coordinatePoint } from '@/components/common/js/common' import { get } from '@/http' export default { name: 'login', @@ -153,6 +176,10 @@ export default { fileContent: '', recoveryCode: [], userInfo: {}, + zoom: 0.75, + circleStar: [], + starTimer: '', + starTimerIndex: 0, bgImg: '' // 背景图 } }, @@ -378,21 +405,62 @@ export default { }) }, initStar () { + this.circleStar = [[], [], [], []] document.getElementById('login-bgimg').style['background-image'] = 'url()' const box = document.getElementById('stars-wrapper') for (let i = 0; i < 3; i++) { const svg = SVG().addTo(box).size('100%', '100%') - svg.attr('class', 'stars' + i) + svg.attr('class', 'stars' + (i + 1)) svg.attr('width', '100%') svg.attr('height', '100%') svg.attr('preserveAspectRatio', 'none') - for (let j = 0; j < 100; j++) { - const circle = svg.circle(r(0.5, 3)) + for (let j = 0; j < 50; j++) { + const circle = svg.circle(r(0.5, 2)) circle.attr('class', 'star') circle.attr('cx', r(0, 100) + '%') circle.attr('cy', r(0, 100) + '%') + this.circleStar[i].push(circle) } } + Object.keys(coordinatePoint).forEach((key, index) => { + const group = SVG().addTo(box).attr('id', key).size('255', '305') + group.attr('width', '265') + group.attr('height', '305') + group.attr('style', `left: ${coordinatePoint[key].offsetX};top:${coordinatePoint[key].offsetY};transform:scale(${this.zoom}) translate(0, -50px)`) + group.attr('class', 'constellation') + const polyline = group.polyline(coordinatePoint[key].point.map(item => [item.x, item.y])) // 先将所有点 用直线链接 + polyline.fill('none') + polyline.stroke({ color: '#868096', width: 4, linecap: 'round', linejoin: 'round' }) + if (coordinatePoint[key].dot && coordinatePoint[key].dot.length) { // 再用虚线 覆盖原本直线 + coordinatePoint[key].dot.forEach(point => { + group.line(point).fill('none').stroke({ color: '#07011D', width: 4, linecap: 'round', linejoin: 'round', dasharray: coordinatePoint[key].dasharray || '10 15' }) + }) + // const polyline1 = group.polyline([[165, 210], [250, 240]]) + // polyline1.fill('none') + // polyline1.stroke({ color: '#07011D', width: 3, linecap: 'round', linejoin: 'round', dasharray: '8 8' }) + } + coordinatePoint[key].point.forEach(item => { // 最后添加所有点 + if (item.disabled) return + group.circle(14) + .fill('#868096') + .attr('cx', item.x) + .attr('cy', item.y) + }) + }) + this.starTimer = setInterval(() => { + this.starTimerIndex++ + let index = 0 + if (this.starTimerIndex === 1) return + if (this.starTimerIndex === 2) index = 2 + if (this.starTimerIndex === 3) index = 1 + if (this.starTimerIndex === 0) index = 0 + this.starTimerIndex = this.starTimerIndex === 3 ? -1 : this.starTimerIndex + this.circleStar[index] && this.circleStar[index].forEach(circle => { + circle.radius(r(0.5, 2)) + circle.attr('cx', r(0, 100) + '%') + circle.attr('cy', r(0, 100) + '%') + }) + }, 1000) function r (m, n) { return (Math.random() * (n - m) + m).toFixed(2) } @@ -414,6 +482,10 @@ export default { } else { this.initStar() } + }, + beforeDestroy () { + clearInterval(this.starTimer) + this.starTimer = null } } @@ -433,6 +505,38 @@ export default { .license-upload .el-upload-list{ display: none; } + .cls-1{ + fill: #150F29; + } + .cls-2{ + fill: #201B33; + } + .star-cloud{ + width: 70%; + height: 70%; + position: absolute; + opacity: 0.9; + } + .star-cloud1{ + right: 0; + top: 0; + transform: translate(40%, -50%); + } + .star-cloud2{ + left: 5%; + bottom: 0; + transform: translate(-60%, -10%); + width: 60%; + height: 60%; + } + .star-cloud3{ + right: 0; + bottom: 0; + transform: translate(50%, 15%); + } + .constellation{ + position: absolute; + } :root { --twinkle-duration: 4s; } @@ -441,14 +545,15 @@ export default { pointer-events: none; width: 100vw; height: 100vh; - background: -webkit-gradient(linear, left top, left bottom, from(#16161d), color-stop(#080430), to(#0D0635)); - background: linear-gradient(#16161d, #080430, #0D0635); + /*background: -webkit-gradient(linear, left top, left bottom, from(#16161d), to(#07011D));*/ + background: #07011D; overflow: hidden; z-index: 1; } .stars0, .stars1, - .stars2 { + .stars2, + .stars3{ position: absolute; top: 0; left: 0; @@ -457,17 +562,17 @@ export default { -webkit-animation: twinkle var(--twinkle-duration) ease-in-out infinite; animation: twinkle var(--twinkle-duration) ease-in-out infinite; } - .stars0 { - -webkit-animation-delay: calc(var(--twinkle-duration) * -0.22); - animation-delay: calc(var(--twinkle-duration) * -0.22); - } .stars1 { - -webkit-animation-delay: calc(var(--twinkle-duration) * -0.44); - animation-delay: calc(var(--twinkle-duration) * -0.44); + -webkit-animation-delay: -1s; + animation-delay: -1s; } .stars2 { - -webkit-animation-delay: calc(var(--twinkle-duration) * -0.66); - animation-delay: calc(var(--twinkle-duration) * -0.66); + -webkit-animation-delay: -2s; + animation-delay: -2s; + } + .stars3 { + -webkit-animation-delay: -3s; + animation-delay: -3s; } @-webkit-keyframes twinkle { 25% { diff --git a/nezha-fronted/test/unit/jest.conf.js b/nezha-fronted/test/unit/jest.conf.js index 3c3d0c999..c6a9eee23 100644 --- a/nezha-fronted/test/unit/jest.conf.js +++ b/nezha-fronted/test/unit/jest.conf.js @@ -30,6 +30,7 @@ module.exports = { '@interactjs': '/test/unit/__mocks__/fileMock.js', 'pl-table': '/test/unit/__mocks__/fileMock.js', '/htmlToPdf': '/test/unit/__mocks__/fileMock.js', + 'maplibre-gl': '/test/unit/__mocks__/fileMock.js', '\/*\/http': '/test/unit/__mocks__/axios.js', // '\/*\/permission': '/test/unit/__mocks__/fileMock.js', '/i18n': '/test/unit/__mocks__/i18nMock.js', @@ -41,7 +42,8 @@ module.exports = { testMatch: [ // 匹配测试用例的文件 '/test/unit/specs/*.spec.js', '/test/unit/specs/lib/*.spec.js', - '/test/unit/specs/components/*.spec.js' + '/test/unit/specs/components/*.spec.js', + '/test/unit/specs/components/chart/*.spec.js' ], moduleDirectories: [ 'node_modules' @@ -57,6 +59,7 @@ module.exports = { 'src/components/common/js/example.js', 'src/libs/bus.js', 'src/components/common/mixin/*.js', + 'src/components/chart/chart.vue', // 'src/components/common/js/tools.js', // '!src/*.(js)', '!src/http.js', diff --git a/nezha-fronted/test/unit/specs/components/chart/chart.spec.js b/nezha-fronted/test/unit/specs/components/chart/chart.spec.js new file mode 100644 index 000000000..c977a08c4 --- /dev/null +++ b/nezha-fronted/test/unit/specs/components/chart/chart.spec.js @@ -0,0 +1,15 @@ +import { shallowMount } from '@vue/test-utils' +import chart from '@/components/chart/chart.vue' + +describe('Counter.vue', () => { + it('increments count when button is clicked', () => { + const wrapper = shallowMount(chart, { + propsData: { + chartInfo: { + param: {} + } + } + }) + expect(chart.methods.add(1, 2)).toBe(3) + }) +})