diff --git a/src/assets/images/big-data/bg/bg-content-top-1.png b/public/images/big-data/bg-content-top-1.png similarity index 100% rename from src/assets/images/big-data/bg/bg-content-top-1.png rename to public/images/big-data/bg-content-top-1.png diff --git a/src/assets/images/big-data/bg/bg-content-top-2.png b/public/images/big-data/bg-content-top-2.png similarity index 100% rename from src/assets/images/big-data/bg/bg-content-top-2.png rename to public/images/big-data/bg-content-top-2.png diff --git a/src/assets/images/big-data/bg/bg-content-top-3.png b/public/images/big-data/bg-content-top-3.png similarity index 100% rename from src/assets/images/big-data/bg/bg-content-top-3.png rename to public/images/big-data/bg-content-top-3.png diff --git a/src/assets/images/big-data/bg/bg-content-top-4.png b/public/images/big-data/bg-content-top-4.png similarity index 100% rename from src/assets/images/big-data/bg/bg-content-top-4.png rename to public/images/big-data/bg-content-top-4.png diff --git a/src/assets/images/business-supervision/bg/content/bg-card-1.png b/public/images/business-supervision/content/bg-card-1.png similarity index 100% rename from src/assets/images/business-supervision/bg/content/bg-card-1.png rename to public/images/business-supervision/content/bg-card-1.png diff --git a/src/assets/images/business-supervision/bg/content/bg-card-2.png b/public/images/business-supervision/content/bg-card-2.png similarity index 100% rename from src/assets/images/business-supervision/bg/content/bg-card-2.png rename to public/images/business-supervision/content/bg-card-2.png diff --git a/src/assets/images/business-supervision/bg/content/bg-card-3.png b/public/images/business-supervision/content/bg-card-3.png similarity index 100% rename from src/assets/images/business-supervision/bg/content/bg-card-3.png rename to public/images/business-supervision/content/bg-card-3.png diff --git a/src/assets/images/business-supervision/bg/content/bg-middle-1.png b/public/images/business-supervision/content/bg-middle-1.png similarity index 100% rename from src/assets/images/business-supervision/bg/content/bg-middle-1.png rename to public/images/business-supervision/content/bg-middle-1.png diff --git a/src/assets/images/business-supervision/bg/content/bg-middle-2.png b/public/images/business-supervision/content/bg-middle-2.png similarity index 100% rename from src/assets/images/business-supervision/bg/content/bg-middle-2.png rename to public/images/business-supervision/content/bg-middle-2.png diff --git a/src/assets/images/business-supervision/bg/content/bg-middle-3.png b/public/images/business-supervision/content/bg-middle-3.png similarity index 100% rename from src/assets/images/business-supervision/bg/content/bg-middle-3.png rename to public/images/business-supervision/content/bg-middle-3.png diff --git a/src/assets/images/business-supervision/bg/content/bg-middle-4.png b/public/images/business-supervision/content/bg-middle-4.png similarity index 100% rename from src/assets/images/business-supervision/bg/content/bg-middle-4.png rename to public/images/business-supervision/content/bg-middle-4.png diff --git a/public/images/business-supervision/sidebar/bg-frame-4.png b/public/images/business-supervision/sidebar/bg-frame-4.png new file mode 100644 index 0000000..b01f882 Binary files /dev/null and b/public/images/business-supervision/sidebar/bg-frame-4.png differ diff --git a/public/images/business-supervision/sidebar/bg-middle-coordinate.png b/public/images/business-supervision/sidebar/bg-middle-coordinate.png new file mode 100644 index 0000000..7d229c6 Binary files /dev/null and b/public/images/business-supervision/sidebar/bg-middle-coordinate.png differ diff --git a/public/images/business-supervision/sidebar/bg-middle-spin.png b/public/images/business-supervision/sidebar/bg-middle-spin.png new file mode 100644 index 0000000..4bd8371 Binary files /dev/null and b/public/images/business-supervision/sidebar/bg-middle-spin.png differ diff --git a/public/images/business-supervision/sidebar/bg-sidebar-bottom-panel.png b/public/images/business-supervision/sidebar/bg-sidebar-bottom-panel.png new file mode 100644 index 0000000..c58b281 Binary files /dev/null and b/public/images/business-supervision/sidebar/bg-sidebar-bottom-panel.png differ diff --git a/public/images/business-supervision/sidebar/bg-sidebar-panel.png b/public/images/business-supervision/sidebar/bg-sidebar-panel.png new file mode 100644 index 0000000..ab574b1 Binary files /dev/null and b/public/images/business-supervision/sidebar/bg-sidebar-panel.png differ diff --git a/public/images/business-supervision/sidebar/device-carriage.png b/public/images/business-supervision/sidebar/device-carriage.png new file mode 100644 index 0000000..5ccfbb3 Binary files /dev/null and b/public/images/business-supervision/sidebar/device-carriage.png differ diff --git a/public/images/business-supervision/sidebar/frame-1.png b/public/images/business-supervision/sidebar/frame-1.png new file mode 100644 index 0000000..9fa05be Binary files /dev/null and b/public/images/business-supervision/sidebar/frame-1.png differ diff --git a/src/assets/images/common/bg/bg-layout.png b/public/images/common/bg/bg-layout.png similarity index 100% rename from src/assets/images/common/bg/bg-layout.png rename to public/images/common/bg/bg-layout.png diff --git a/src/assets/images/common/bg/bg-secondary.png b/public/images/common/bg/bg-secondary.png similarity index 100% rename from src/assets/images/common/bg/bg-secondary.png rename to public/images/common/bg/bg-secondary.png diff --git a/src/assets/images/welcome/icon/center/car.png b/public/images/welcome/car.png similarity index 100% rename from src/assets/images/welcome/icon/center/car.png rename to public/images/welcome/car.png diff --git a/src/assets/images/welcome/icon/center/clean-city.png b/public/images/welcome/clean-city.png similarity index 100% rename from src/assets/images/welcome/icon/center/clean-city.png rename to public/images/welcome/clean-city.png diff --git a/src/assets/images/welcome/icon/center/distribution.png b/public/images/welcome/distribution.png similarity index 100% rename from src/assets/images/welcome/icon/center/distribution.png rename to public/images/welcome/distribution.png diff --git a/src/assets/images/welcome/icon/center/lamp.png b/public/images/welcome/lamp.png similarity index 100% rename from src/assets/images/welcome/icon/center/lamp.png rename to public/images/welcome/lamp.png diff --git a/src/assets/images/welcome/icon/center/muck.png b/public/images/welcome/muck.png similarity index 100% rename from src/assets/images/welcome/icon/center/muck.png rename to public/images/welcome/muck.png diff --git a/src/assets/styles/animations/animations.scss b/src/assets/styles/animations/animations.scss index 9785b03..cf7d603 100644 --- a/src/assets/styles/animations/animations.scss +++ b/src/assets/styles/animations/animations.scss @@ -1,2 +1,3 @@ @use "src/rotate"; -@use "src/transition"; \ No newline at end of file +@use "src/transition"; +@use "src/line-move"; \ No newline at end of file diff --git a/src/assets/styles/animations/src/line-move.scss b/src/assets/styles/animations/src/line-move.scss new file mode 100644 index 0000000..5aafe43 --- /dev/null +++ b/src/assets/styles/animations/src/line-move.scss @@ -0,0 +1,18 @@ +@keyframes line-move { + 0% { + transform: translateX(200%); + } + + 100% { + transform: translateX(-100%); + } +} + +@keyframes line-move-alternate { + 0% { + transform: rotateY(180deg) translateX(100%); + } + 100% { + transform: rotateY(180deg) translateX(-200%); + } +} \ No newline at end of file diff --git a/src/assets/styles/common/src/element.scss b/src/assets/styles/common/src/element.scss index 2d4e869..c3f08df 100644 --- a/src/assets/styles/common/src/element.scss +++ b/src/assets/styles/common/src/element.scss @@ -10,7 +10,7 @@ } .hover { - transition: all 0.3s; + transition: all 0.4s; cursor: pointer; &:hover { diff --git a/src/assets/styles/minix/sidebar.scss b/src/assets/styles/minix/sidebar.scss index 31b1e23..6a5ec59 100644 --- a/src/assets/styles/minix/sidebar.scss +++ b/src/assets/styles/minix/sidebar.scss @@ -1,4 +1,4 @@ -@mixin view-style-default($sidebar-width,$content-width) { +@mixin view-style-default($sidebar-width,$content-width,$item-bg) { &__sidebar { display: flex; flex-wrap: wrap; @@ -12,7 +12,7 @@ &-item { padding: 9px 15px; width: 100%; - background: rgba(14, 95, 255, 0.2); + background: $item-bg; } &-tag { diff --git a/src/layout/index.vue b/src/layout/index.vue index 58c67a9..4724e0d 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -11,7 +11,7 @@ const route = useRoute(); const appStore = useAppStore(); onBeforeMount(() => { - appStore.setBackground('@/assets/images/common/bg/bg-layout.png'); + appStore.setBackground('/images/common/bg/bg-layout.png'); }); diff --git a/src/store/app.ts b/src/store/app.ts index 86a3fcc..c0e649c 100644 --- a/src/store/app.ts +++ b/src/store/app.ts @@ -17,7 +17,7 @@ const useAppStore = defineStore('appStore', { const href = new URL(background, import.meta.url).href; this.background = `url(${href})`; } else { - const href = new URL('@/assets/images/common/bg/bg-layout.png', import.meta.url).href; + const href = new URL('/images/common/bg/bg-layout.png', import.meta.url).href; this.background = `url(${href})`; } }, diff --git a/src/views/big-data/charts/content-bottom.tsx b/src/views/big-data/charts/content-bottom.tsx index e69de29..05b8962 100644 --- a/src/views/big-data/charts/content-bottom.tsx +++ b/src/views/big-data/charts/content-bottom.tsx @@ -0,0 +1,51 @@ +import type { Ref } from 'vue'; + +import echarts from '@/plugins/echarts'; +import { debounceChart, graphicLinearGradient } from '@/utils/chart'; + +let myChart = null; + +const option = { + backgroundColor: 'transparent', + grid: { top: '54px', right: '14px', left: '14px', bottom: '24px' }, + title: { + text: '最近12个月税收概览', + textStyle: { color: '#fff', fontSize: 22, fontWeight: 'lighter' }, + }, + tooltip: {}, + legend: { show: false }, + xAxis: { + type: 'category', + show: true, + data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], + // data: category, + itemStyle: { color: '#ccc' }, + splitLine: { show: true, lineStyle: { color: '#333', width: 1, type: 'solid' } }, + splitArea: { show: false }, + }, + yAxis: { show: true, type: 'value', splitLine: { show: false } }, + series: [ + { + name: '金额', + type: 'bar', + barWidth: 14, + itemStyle: { + borderRadius: 5, + color: graphicLinearGradient('#66FFFF', '#66FFFF33'), + }, + data: [2, 8, 3, 7, 1, 9, 18, 3, 7, 1, 9, 6], + }, + ], +}; + +/** 渲染图表 */ +export const renderEcharts = (element: Ref) => { + myChart = echarts.init(element.value, null, { + renderer: 'svg', + devicePixelRatio: window.devicePixelRatio, + }); + + debounceChart(myChart); + + myChart.setOption(option); +}; diff --git a/src/views/big-data/charts/left-bottom.tsx b/src/views/big-data/charts/left-bottom.tsx index fac778a..0dc78d9 100644 --- a/src/views/big-data/charts/left-bottom.tsx +++ b/src/views/big-data/charts/left-bottom.tsx @@ -9,9 +9,10 @@ let myChart = null; const option = { backgroundColor: 'transparent', - grid: { top: '19%', right: 9, left: 9, bottom: '20%' }, + grid: { top: '9%', right: 9, left: 9, bottom: '20%' }, tooltip: {}, legend: { + show: false, data: [ { name: '出园', icon: 'rect', itemStyle: { color: '#32C5FF' } }, { name: '入园', icon: 'rect', itemStyle: { color: '#16CEB9' } }, diff --git a/src/views/big-data/components/big-data-content/components/content-bottom.vue b/src/views/big-data/components/big-data-content/components/content-bottom.vue index e14d6f9..0a474c6 100644 --- a/src/views/big-data/components/big-data-content/components/content-bottom.vue +++ b/src/views/big-data/components/big-data-content/components/content-bottom.vue @@ -1,19 +1,30 @@ diff --git a/src/views/big-data/components/big-data-content/components/content-middle.vue b/src/views/big-data/components/big-data-content/components/content-middle.vue index f281486..cdeede9 100644 --- a/src/views/big-data/components/big-data-content/components/content-middle.vue +++ b/src/views/big-data/components/big-data-content/components/content-middle.vue @@ -3,10 +3,15 @@ import { onMounted, ref } from 'vue'; const isActive = ref(true); -onMounted(() => { +/** 改变移动状态 */ +const changeMoveState = () => { setInterval(() => { isActive.value = !isActive.value; }, 2000); +}; + +onMounted(() => { + changeMoveState(); }); @@ -18,7 +23,9 @@ onMounted(() => { alt="" src="@/assets/images/big-data/bg/bg-middle-move.png" /> +

工作台

+ { } .move-bottom { - animation: 2s linear 0s infinite normal none running line-move-top; - } -} - -@keyframes line-move-top { - 0% { - transform: translateX(200%); - } - - 100% { - transform: translateX(-100%); - } -} - -@keyframes line-move { - 0% { - transform: rotateY(180deg) translateX(100%); - } - 100% { - transform: rotateY(180deg) translateX(-200%); + animation: 2s linear 0s infinite normal none running line-move-alternate; } } diff --git a/src/views/big-data/components/big-data-content/components/content-top.vue b/src/views/big-data/components/big-data-content/components/content-top.vue index fa79640..5ea6062 100644 --- a/src/views/big-data/components/big-data-content/components/content-top.vue +++ b/src/views/big-data/components/big-data-content/components/content-top.vue @@ -2,10 +2,10 @@ import { getImage } from '@/utils/image'; const list = [ - { title: '员工', img: '../assets/images/big-data/bg/bg-content-top-1.png' }, - { title: '智慧大楼', img: '../assets/images/big-data/bg/bg-content-top-2.png' }, - { title: '智慧设备', img: '../assets/images/big-data/bg/bg-content-top-3.png' }, - { title: '数据报表', img: '../assets/images/big-data/bg/bg-content-top-4.png' }, + { title: '员工', img: '/images/big-data/bg-content-top-1.png' }, + { title: '智慧大楼', img: '/images/big-data/bg-content-top-2.png' }, + { title: '智慧设备', img: '/images/big-data/bg-content-top-3.png' }, + { title: '数据报表', img: '/images/big-data/bg-content-top-4.png' }, ]; diff --git a/src/views/big-data/index.vue b/src/views/big-data/index.vue index 229db67..02636b1 100644 --- a/src/views/big-data/index.vue +++ b/src/views/big-data/index.vue @@ -9,7 +9,7 @@ import BigDataRight from '@/views/big-data/components/big-data-right/index.vue'; const appStore = useAppStore(); onBeforeMount(async () => { - appStore.setBackground('@/assets/images/common/bg/bg-secondary.png'); + appStore.setBackground('/images/common/bg/bg-secondary.png'); }); @@ -30,6 +30,6 @@ onBeforeMount(async () => { width: 100%; height: 100%; - @include view-style-default(530px, 748px); + @include view-style-default(530px, 748px, #122953b3); } diff --git a/src/views/business-supervision/components/business-supervision-content/components/content-middle.vue b/src/views/business-supervision/components/business-supervision-content/components/content-middle.vue index d77b238..a6e7ffd 100644 --- a/src/views/business-supervision/components/business-supervision-content/components/content-middle.vue +++ b/src/views/business-supervision/components/business-supervision-content/components/content-middle.vue @@ -1,38 +1,40 @@