diff --git a/src/assets/font/PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf b/src/assets/font/PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf new file mode 100644 index 0000000..cd65b62 Binary files /dev/null and b/src/assets/font/PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf differ diff --git a/src/assets/images/dashboard/bg.png b/src/assets/images/dashboard/bg.png new file mode 100644 index 0000000..6060632 Binary files /dev/null and b/src/assets/images/dashboard/bg.png differ diff --git a/src/assets/images/dashboard/item/0.png b/src/assets/images/dashboard/item/0.png new file mode 100644 index 0000000..6190fa6 Binary files /dev/null and b/src/assets/images/dashboard/item/0.png differ diff --git a/src/assets/images/dashboard/item/1.png b/src/assets/images/dashboard/item/1.png new file mode 100644 index 0000000..21a5eb6 Binary files /dev/null and b/src/assets/images/dashboard/item/1.png differ diff --git a/src/styles/base/base.less b/src/styles/base/base.less index f92e733..6fd7e94 100644 --- a/src/styles/base/base.less +++ b/src/styles/base/base.less @@ -202,6 +202,11 @@ src: url('../../assets/font/Alibaba-PuHuiTi-Heavy.ttf'); } +@font-face { + font-family: 'pmzt'; //庞门正体 + src: url('../../assets/font/PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf'); +} + ::-webkit-scrollbar-corner { background: transparent; } diff --git a/src/views/dashboard/common/model.ts b/src/views/dashboard/common/model.ts index e562434..e216759 100644 --- a/src/views/dashboard/common/model.ts +++ b/src/views/dashboard/common/model.ts @@ -537,3 +537,45 @@ export const energyUsageDistribution = (data = []): IObject => { series: seriesData, }; }; + +export const yearUsageRank = (data = []): IObject => { + return { + grid: { + bottom: 45, + top: 30, + left: 40, + }, + xAxis: { + type: 'value', + axisLine: { lineStyle: { color: '#fff' }, show: true }, + splitLine: { lineStyle: { type: 'dashed', color: 'rgba(255,255,255,0.3)' } }, + }, + yAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + axisLine: { lineStyle: { color: '#fff' } }, + axisLabel: { fontSize: 10 }, + }, + series: [ + { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar', + barWidth: 12, + itemStyle: { + normal: { + color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#1898C3', + }, + { + offset: 1, + color: '#0B4F98', + }, + ]), + }, + }, + }, + ], + }; +}; diff --git a/src/views/dashboard/comp/item.vue b/src/views/dashboard/comp/item.vue new file mode 100644 index 0000000..5adfd80 --- /dev/null +++ b/src/views/dashboard/comp/item.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/views/dashboard/main.vue b/src/views/dashboard/main.vue index 5ede6b3..d899fab 100644 --- a/src/views/dashboard/main.vue +++ b/src/views/dashboard/main.vue @@ -47,11 +47,12 @@ import ScreenAdapter from '@/components/screen-adapter.vue'; import Block from './comp/block.vue'; import Bar from './comp/bar.vue'; import Pop from './comp/pop.vue'; +import Item from './comp/item.vue'; import timeCountHooks from '@/hooks/time-count'; import { useFetch } from '@/hooks/fetch'; import utilService from '@/service/utilService'; import Chart from '@/components/chart.vue'; -import { costStatistic, elecPayload, monthEnergyUsageTrend, usageRanking, energyUsageDistribution } from './common/model'; +import { costStatistic, elecPayload, monthEnergyUsageTrend, usageRanking, energyUsageDistribution, yearUsageRank } from './common/model'; import { IObject } from '@/types/interface'; import moment from 'moment'; import toolHooks from '@/hooks/tool'; @@ -64,7 +65,7 @@ export default defineComponent({ Tooltip, Block, Chart, - + Item, Bar, Pop, }, @@ -73,7 +74,7 @@ export default defineComponent({ const { generateSvg2Dom } = toolHooks(); const state = reactive({ - opt: { scale: 0.8 }, + opt: { scale: 1.0 }, dragStretch: null, toolTipData: {}, timer: null, @@ -86,30 +87,30 @@ export default defineComponent({ { key: 'yearCarbon', icon: '', - label: '年碳排放量', + label: '年度综合能耗', value: '--', - unit: 'tCO₂', + unit: 'tce', toFixed: 2, }, { key: 'monthConsumptionValue', icon: '', - label: '月综合能耗', + label: '光伏发电量', value: '--', - unit: 'tce', + unit: 'kWh', }, { key: 'yearConsumptionValue', icon: '', - label: '年综合能耗', + label: '碳排放量', value: '--', - unit: 'tce', + unit: 'tCO₂', }, ], left: [ { - comp: 'bar', - title: '月用能统计', + comp: 'item', + title: '日用能统计', data: [ { key: 'electricDayValue', @@ -125,69 +126,12 @@ export default defineComponent({ value: '', unit: 't', }, - { - key: 'steamDayValue', - icon: 'steam', - label: '蒸汽用量', - value: '', - unit: 't', - }, - { - key: 'airDayValue', - icon: 'air', - label: '压缩空气用量', - value: '', - unit: 'Nm³', - }, - { - key: 'gasValue', - icon: 'gas', - label: '天然气用量', - value: '', - unit: 'Nm³', - }, ], }, { - title: '年用能统计', - comp: 'bar', - data: [ - { - key: 'electricDayValue', - icon: 'elec', - label: '电用量', - value: '', - unit: 'kWh', - }, - { - key: 'waterDayValue', - icon: 'water', - label: '水用量', - value: '', - unit: 't', - }, - { - key: 'steamDayValue', - icon: 'steam', - label: '蒸汽用量', - value: '', - unit: 't', - }, - { - key: 'airDayValue', - icon: 'air', - label: '压缩空气用量', - value: '', - unit: 'Nm³', - }, - { - key: 'gasValue', - icon: 'gas', - label: '天然气用量', - value: '', - unit: 'Nm³', - }, - ], + title: '年度用能排行', + comp: 'chart', + option: yearUsageRank(), }, { comp: 'chart', @@ -356,16 +300,15 @@ export default defineComponent({ const target = document.querySelector('.boards-container .center') as HTMLElement; generateSvg2Dom('/cdn/normal_bg.svg', target, () => { target.style.transform = 'scale(0.7)'; - - nextTick(() => { - init(state, target); - // document.getElementById("layer-d-animate").innerHTML = ''; - }); }); }; onMounted(() => { - getSvg(); + nextTick(() => { + const target = document.querySelector('.boards-container .center') as HTMLElement; + + init(state, target); + }); state.timer = setInterval(() => { changeType(state.dataForm.code); fn(); @@ -470,25 +413,10 @@ export default defineComponent({ width: 1920px; height: 1080px; cursor: move; - //background: url("@/assets/images/njhl/bg.png"); - //transform: translate(-50%, -50%); - /* 初始阴影设置（透明） */ - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: inherit; - //opacity: 0; - //transition: opacity 0.4s; - box-shadow: inset 0 0 80px 30px #000b31; - } + background: url('@/assets/images/dashboard/bg.png') no-repeat; + background-position: center 75%; - &:hover::before { - // opacity: 1; - } + //transform: translate(-50%, -50%); } .icon { @@ -520,7 +448,7 @@ export default defineComponent({ > * { margin: 0 40px; - background: rgba(#000b31, 0.7); + //background: rgba(#000b31, 0.7); } }