feat: 实现供水运营专题大屏BI可视化
- 新增OperationDashboard.vue全屏大屏组件 - 添加6个核心KPI指标卡片: 进水总量/出水总量/产销差率/营收额/平均水质/报警次数 - 实现6个ECharts图表: 供水趋势/水质分布/报警统计/管网空间/设备状态/营收分析 - 创建静态HTML版本operation-dashboard.html，使用CDN加载Vue3/ECharts/Element Plus - 更新路由配置，添加/operation路径支持 - 修复nextTick导入问题，优化build脚本 🚧 开发者: bot_dev1 📝 任务: #38 [BI] 运营仪表盘 + 供水专题大屏
This commit is contained in:
+45
@@ -0,0 +1,45 @@
|
||||
@use 'sass:map';
|
||||
|
||||
// CSS3 var
|
||||
@use './var' as *;
|
||||
@use '../mixins/_var.scss' as *;
|
||||
@use '../mixins/mixins.scss' as *;
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
|
||||
// hex colors
|
||||
@each $type in (primary, success, warning, danger, error, info) {
|
||||
@include set-css-color-type($colors, $type);
|
||||
}
|
||||
|
||||
// --el-box-shadow-#{$type}
|
||||
@include set-component-css-var('box-shadow', $box-shadow);
|
||||
|
||||
// color-scheme
|
||||
// Background --el-bg-color-#{$type}
|
||||
@include set-component-css-var('bg-color', $bg-color);
|
||||
// --el-text-color-#{$type}
|
||||
@include set-component-css-var('text-color', $text-color);
|
||||
// --el-border-color-#{$type}
|
||||
@include set-component-css-var('border-color', $border-color);
|
||||
// Fill --el-fill-color-#{$type}
|
||||
@include set-component-css-var('fill-color', $fill-color);
|
||||
@include set-component-css-var('mask-color', $mask-color);
|
||||
}
|
||||
|
||||
@include dark(button) {
|
||||
@include set-component-css-var('button', $button);
|
||||
}
|
||||
|
||||
@include dark(card) {
|
||||
@include set-component-css-var('card', $card);
|
||||
@include set-css-var-value(
|
||||
('fill-color', 'blank'),
|
||||
getCssVar('card', 'bg-color')
|
||||
);
|
||||
}
|
||||
|
||||
@include dark(empty) {
|
||||
@include set-component-css-var('empty', $empty);
|
||||
}
|
||||
+224
@@ -0,0 +1,224 @@
|
||||
@use 'sass:map';
|
||||
@use 'sass:math';
|
||||
@use 'sass:color';
|
||||
|
||||
@use '../common/var.scss' as common;
|
||||
@use '../mixins/mixins.scss' as *;
|
||||
@use '../color/index.scss' as *;
|
||||
@use '../mixins/function.scss' as *;
|
||||
|
||||
$colors: () !default;
|
||||
@each $type in common.$types {
|
||||
$colors: map.deep-merge(
|
||||
(
|
||||
$type: (
|
||||
'base': map.get(common.$colors, $type, 'base'),
|
||||
),
|
||||
),
|
||||
$colors
|
||||
) !global;
|
||||
}
|
||||
|
||||
// https://sass-lang.com/documentation/values/maps#immutability
|
||||
// mix colors with white/black to generate light/dark level
|
||||
@mixin set-color-mix-level(
|
||||
$type,
|
||||
$number,
|
||||
$mode: 'light',
|
||||
$mix-color: $color-white
|
||||
) {
|
||||
// hex mix color
|
||||
$colors: map.deep-merge(
|
||||
(
|
||||
$type: (
|
||||
'#{$mode}-#{$number}': roundColor(
|
||||
color.mix(
|
||||
$mix-color,
|
||||
map.get($colors, $type, 'base'),
|
||||
math.percentage(math.div($number, 10))
|
||||
)
|
||||
),
|
||||
),
|
||||
),
|
||||
$colors
|
||||
) !global;
|
||||
|
||||
// for designer to view transparent
|
||||
// $colors: map.deep-merge(
|
||||
// (
|
||||
// $type: (
|
||||
// '#{$mode}-#{$number}':
|
||||
// rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
|
||||
// ),
|
||||
// ),
|
||||
// $colors
|
||||
// ) !global;
|
||||
}
|
||||
|
||||
// Background
|
||||
$bg-color: () !default;
|
||||
$bg-color: map.merge(
|
||||
(
|
||||
'page': #0a0a0a,
|
||||
'': #141414,
|
||||
'overlay': #1d1e1f,
|
||||
),
|
||||
$bg-color
|
||||
);
|
||||
|
||||
// dark-mode
|
||||
@each $type in common.$types {
|
||||
@for $i from 1 through 9 {
|
||||
@include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
|
||||
}
|
||||
}
|
||||
@each $type in common.$types {
|
||||
@include set-color-mix-level($type, 2, 'dark', common.$color-white);
|
||||
}
|
||||
|
||||
// border
|
||||
$border-color-base: #f5f8ff;
|
||||
$border-color: () !default;
|
||||
$border-color: map.merge(
|
||||
(
|
||||
'darker': rgba($border-color-base, 0.35),
|
||||
'dark': rgba($border-color-base, 0.3),
|
||||
'': rgba($border-color-base, 0.25),
|
||||
'light': rgba($border-color-base, 0.2),
|
||||
'lighter': rgba($border-color-base, 0.15),
|
||||
'extra-light': rgba($border-color-base, 0.1),
|
||||
),
|
||||
$border-color
|
||||
);
|
||||
|
||||
// mix to hex to avoid overlay issues
|
||||
@each $key, $val in $border-color {
|
||||
$border-color: map.merge(
|
||||
$border-color,
|
||||
(
|
||||
$key: mix-overlay-color($val, map.get($bg-color, '')),
|
||||
)
|
||||
) !global;
|
||||
}
|
||||
|
||||
// Box-shadow
|
||||
$box-shadow: () !default;
|
||||
$box-shadow: map.merge(
|
||||
(
|
||||
'': (
|
||||
0px 12px 32px 4px rgba(0, 0, 0, 0.36),
|
||||
0px 8px 20px rgba(0, 0, 0, 0.72),
|
||||
),
|
||||
'light': (
|
||||
0px 0px 12px rgba(0, 0, 0, 0.72),
|
||||
),
|
||||
'lighter': (
|
||||
0px 0px 6px rgba(0, 0, 0, 0.72),
|
||||
),
|
||||
'dark': (
|
||||
0px 16px 48px 16px rgba(0, 0, 0, 0.72),
|
||||
0px 12px 32px #000000,
|
||||
0px 8px 16px -8px #000000,
|
||||
),
|
||||
),
|
||||
$box-shadow
|
||||
);
|
||||
|
||||
// fill
|
||||
$fill-color-base: #fafcff;
|
||||
$fill-color: () !default;
|
||||
$fill-color: map.merge(
|
||||
(
|
||||
'darker': rgba($fill-color-base, 0.2),
|
||||
'dark': rgba($fill-color-base, 0.16),
|
||||
'': rgba($fill-color-base, 0.12),
|
||||
'light': rgba($fill-color-base, 0.08),
|
||||
'lighter': rgba($fill-color-base, 0.04),
|
||||
'extra-light': rgba($fill-color-base, 0.02),
|
||||
'blank': map.get($bg-color, ''),
|
||||
),
|
||||
$fill-color
|
||||
);
|
||||
|
||||
// mix to hex to avoid overlay issues
|
||||
@each $key, $val in $fill-color {
|
||||
@if ($key != 'blank') {
|
||||
$fill-color: map.merge(
|
||||
$fill-color,
|
||||
(
|
||||
$key: mix-overlay-color($val, map.get($bg-color, '')),
|
||||
)
|
||||
) !global;
|
||||
}
|
||||
}
|
||||
|
||||
// text
|
||||
$text-color-base: #f0f5ff;
|
||||
$text-color: () !default;
|
||||
$text-color: map.merge(
|
||||
(
|
||||
'primary': rgba($text-color-base, 0.95),
|
||||
'regular': rgba($text-color-base, 0.85),
|
||||
'secondary': rgba($text-color-base, 0.65),
|
||||
'placeholder': rgba($text-color-base, 0.55),
|
||||
'disabled': rgba($text-color-base, 0.4),
|
||||
),
|
||||
$text-color
|
||||
);
|
||||
// mix to hex to avoid overlay issues
|
||||
@each $key, $val in $text-color {
|
||||
$text-color: map.merge(
|
||||
$text-color,
|
||||
(
|
||||
$key: mix-overlay-color($val, map.get($bg-color, '')),
|
||||
)
|
||||
) !global;
|
||||
}
|
||||
|
||||
// mask
|
||||
$mask-color: () !default;
|
||||
$mask-color: map.merge(
|
||||
(
|
||||
'': rgba(0, 0, 0, 0.8),
|
||||
'extra-light': rgba(0, 0, 0, 0.3),
|
||||
),
|
||||
$mask-color
|
||||
);
|
||||
|
||||
// Button
|
||||
// css3 var in packages/theme-chalk/src/button.scss
|
||||
$button: () !default;
|
||||
$button: map.merge(
|
||||
(
|
||||
'disabled-text-color': rgba(255, 255, 255, 0.5),
|
||||
),
|
||||
$button
|
||||
);
|
||||
|
||||
// card
|
||||
$card: () !default;
|
||||
$card: map.merge(
|
||||
(
|
||||
'bg-color': getCssVar('bg-color', 'overlay'),
|
||||
),
|
||||
$card
|
||||
);
|
||||
|
||||
// Empty
|
||||
// css3 var in packages/theme-chalk/src/empty.scss
|
||||
$empty: () !default;
|
||||
$empty: map.merge(
|
||||
(
|
||||
'fill-color-0': getCssVar('color-black'),
|
||||
'fill-color-1': #4b4b52,
|
||||
'fill-color-2': #36383d,
|
||||
'fill-color-3': #1e1e20,
|
||||
'fill-color-4': #262629,
|
||||
'fill-color-5': #202124,
|
||||
'fill-color-6': #212224,
|
||||
'fill-color-7': #1b1c1f,
|
||||
'fill-color-8': #1c1d1f,
|
||||
'fill-color-9': #18181a,
|
||||
),
|
||||
$empty
|
||||
);
|
||||
Reference in New Issue
Block a user