DeXun/fad-dashboard
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
砂糖
2025-11-08 10:38:36 +08:00
commit 3beeec7296
1626 changed files with 198488 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
frontend/packages/Configuration/Warning/index.vue Normal file
View File

@@ -0,0 +1,213 @@
<template>
<!-- <div class="bs-design-wrap" :class="`bs-text-${customTheme}`">
<div class="content-box" :key="domkey"
:style="{ 'text-align': config.customize.align, 'letter-spacing': config.customize.letterSpacing + 'px', 'font-family': config.customize.fontFamily, 'font-size': config.customize.fontSize + 'px', 'font-weight': +config.customize.fontWeight, 'background-image': `-webkit-linear-gradient(${config.customize.color})` }">
{{ config.customize.title }}
</div>
</div> -->
<div style="width: 100%; height: 100%" class="bs-design-wrap">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150">
<defs>
<radialGradient id="渐变_22" cx="74.95" cy="74.95" r="74.95" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#919191" />
<stop offset="0.35" stop-color="#989898" stop-opacity="0.99" />
<stop offset="0.62" stop-color="#adadad" stop-opacity="0.94" />
<stop offset="0.87" stop-color="#d0d0d0" stop-opacity="0.86" />
<stop offset="1" stop-color="#eaeaea" stop-opacity="0.8" />
</radialGradient>
<radialGradient id="渐变_31" cx="74.32" cy="75.31" r="43.76" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f4f4f4" stop-opacity="0" />
<stop offset="0.38" stop-color="#f4f4f4" stop-opacity="0.01" />
<stop offset="0.52" stop-color="#f3f3f3" stop-opacity="0.04" />
<stop offset="0.62" stop-color="#f2f2f2" stop-opacity="0.09" />
<stop offset="0.7" stop-color="#f1f1f1" stop-opacity="0.17" />
<stop offset="0.76" stop-color="#efefef" stop-opacity="0.26" />
<stop offset="0.82" stop-color="#ededed" stop-opacity="0.38" />
<stop offset="0.88" stop-color="#ebebeb" stop-opacity="0.53" />
<stop offset="0.93" stop-color="#e8e8e8" stop-opacity="0.69" />
<stop offset="0.97" stop-color="#e4e4e4" stop-opacity="0.88" />
<stop offset="1" stop-color="#e2e2e2" />
</radialGradient>
</defs>
<g id="图层_3" data-name="图层 3">
<circle class="cls-1" cx="74.95" cy="74.95" r="74.95" />
<circle :key="domkey" :class="'cls-2-' + config.customize.statusColor" cx="74.32" cy="75.31" r="53.38" />
<circle class="cls-3" cx="74.32" cy="75.31" r="45.29" />
</g>
</svg>
</div>
</template>
<script>
import commonMixins from 'data-room-ui/js/mixins/commonMixins'
import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
export default {
name: 'warning',
components: {},
mixins: [paramsMixins, commonMixins, linkageMixins],
props: {
// 卡片的属性
config: {
type: Object,
default: () => ({})
}
},
data() {
return {
domkey: 0,
customClass: {}
}
},
computed: {
},
mounted() {
this.chartInit()
},
methods: {
// 通过表达式计算得来的值
getDataByExpression(config) {
// 如果表达式是由其他组件的值构成的
// eslint-disable-next-line no-new-func
try {
const result = new Function('dataset', 'computedDatas', this.config.expression)
config.customize.statusColor = result(this.dataset, this.computedDatas)
} catch (e) {
}
// 同时将计算得来的值保存到公共的数据存储的地方
this.updateComputedDatas({ code: config.code, title: config.title, data: config.customize.title })
// this.changeChartConfig(config)
// }
},
// dataFormatting(config, data) {
// // 文本数据配置原则：选择数据集则以后端返回的数据为主，否则以设置面板中标题设置为准
// if (config.dataSource.businessKey && config.dataSource.source === 'dataset') {
// config.customize.title = data && data.data && data.data.length ? data.data[0][config.dataSource.metricField] : '暂无数据'
// config.option.data = data && data.data && data.data.length ? data.data : []
// }
// this.domkey += 1;
// return config
// }
dataFormatting(config, data) {
// 文本数据配置原则：选择数据集则以后端返回的数据为主，否则以设置面板中标题设置为准
if (config.dataSource.businessKey && config.dataSource.source === 'dataset') {
if (data && data.data && data.data.length) {
let resp = data.data[0][config.dataSource.metricField];
config.option.data = data.data;
if (config.dataHandler) {
try {
// 此处函数处理data
eval(config.dataHandler)
} catch (e) {
console.info(e)
}
}
config.customize.statusColor = (typeof resp === 'string') ? resp : JSON.stringify(resp);
if (config.customize.statusColor === 'true') {
config.customize.statusColor = "green"
} else if (config.customize.statusColor === 'false') {
config.customize.statusColor = "red"
} else {
config.customize.statusColor = "gray"
}
} else {
config.customize.statusColor = 'gray';
config.option.data = [];
}
} else {
// 如果不是选择数据集的情况
config.customize.statusColor = 'gray';
config.option.data = [];
}
this.domkey += 1;
return config;
}
}
}
</script>
<style lang="scss" scoped>
@import "../../assets/fonts/numberFont/stylesheet.css";
// .bs-design-wrap {
// width: 100%;
// display: flex;
// align-items: center;
// justify-content: center;
// }
// .content-box {
// width: 100%;
// text-align: center;
// /* 将背景设为渐变 */
// /*background-image: -webkit-linear-gradient(left, #6294F7, #C85D14);*/
// /* 规定背景绘制区域 */
// -webkit-background-clip: text;
// /* 将文字隐藏 */
// -webkit-text-fill-color: transparent;
// }
.bs-design-wrap {
position: relative;
width: 100%;
height: 100%;
background-color: transparent;
border-radius: 4px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
display: flex;
align-items: center;
}
.cls-1 {
stroke: #848484;
fill: url(#渐变_22);
}
.cls-1,
.cls-2 {
stroke-miterlimit: 10;
stroke-width: 0.5px;
}
.cls-2-green {
fill: #31c66c;
/* 绿色 */
stroke: #245b37;
/* 深绿色 */
}
.cls-2-red {
fill: #e74c3c;
/* 红色 */
stroke: #c0392b;
/* 深红色 */
}
.cls-2-yellow {
fill: #f39c12;
/* 黄色 */
stroke: #e67e22;
/* 橙黄色 */
}
.cls-2-gray {
fill: #7f8c8d;
/* 灰色 */
stroke: #95a5a6;
/* 浅灰色 */
}
.cls-2-blue {
fill: #3498db;
/* 蓝色 */
stroke: #2980b9;
/* 深蓝色 */
}
.cls-3 {
opacity: 0.18;
fill: url(#渐变_31);
}
</style>

91
frontend/packages/Configuration/Warning/setting.vue Normal file
View File

@@ -0,0 +1,91 @@
<template>
<div class="bs-setting-wrap">
<el-form ref="form" :model="config" label-width="90px" label-position="left" class="setting-body bs-el-form">
<el-form :model="config.customize" label-position="left" class="setting-body bs-el-form" label-width="90px">
<SettingTitle>标题</SettingTitle>
<el-form-item label="装饰名称" class="lc-field-body">
<el-input v-model="config.title" clearable />
</el-form-item>
<SettingTitle>位置</SettingTitle>
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting :config="config" />
</div>
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="状态颜色">
<el-select v-model="config.customize.statusColor" placeholder="请选择状态颜色">
<el-option v-for="option in statusColorOptions" :key="option.value" :label="option.label"
:value="option.value"></el-option>
</el-select>
</el-form-item>
</div>
</el-form>
</el-form>
</div>
</template>
<script>
import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
import { predefineColors } from "data-room-ui/js/utils/colorList";
export default {
name: 'LightSetting',
components: {
ColorPicker,
PosWhSetting,
RotateSetting,
SettingTitle
},
data() {
return {
//状态颜色
statusColorOptions: [
{ label: '绿色', value: 'green' },
{ label: '红色', value: 'red' },
{ label: '黄色', value: 'yellow' },
{ label: '蓝色', value: 'blue' },
{ label: '灰色', value: 'gray' },
],
// 预设主题色
predefineThemeColors: predefineColors
}
},
computed: {
config: {
get() {
return this.$store.state.bigScreen.activeItemConfig
},
set(val) {
this.$store.state.bigScreen.activeItemConfig = val
}
}
},
watch: {},
mounted() {
},
methods: {
updateState(e) {
if (e === '') {
this.isActive = false;
this.config.customize.flowDirection = '';
} else {
this.isActive = true;
this.config.customize.flowDirection = 'L';
}
}
}
}
</script>
<style lang="scss" scoped>
@import "../../assets/style/borderAndDecoraSetting.scss";
.lc-field-body {
padding: 12px 16px;
}
</style>

73
frontend/packages/Configuration/Warning/settingConfig.js Normal file
View File

@@ -0,0 +1,73 @@
/*
* @Descripttion:
* @Author: liu.shiyi
* @Date: 2022-10-13 11:18:03
* @LastEditTime: 2022-10-13 13:55:11
*/
import { commonConfig, displayOption } from 'data-room-ui/js/config'
export const settingConfig = {
theme: 'dark',
data: [],
text: '文本标签占位符', // text内容
// 设置面板属性的显隐
displayOption: {
...displayOption,
metricField: {
// 指标
label: '指标',
enable: true,
multiple: false // 是否多选
},
dimensionField: {
// 维度
label: '维度', // 维度/查询字段
enable: false,
multiple: true // 是否多选
},
text: { // 文本占位符
label: '文本内容', // 维度/查询字段
enable: true
},
expression: { // 文本占位符
label: '表达式', // 维度/查询字段
enable: true
}
}
}
const customConfig = {
type: 'warning',
root: {
version: '2023111401',
url: 'https://www.runoob.com/',
expression: 'return ',
expressionCodes: [],
// 绕x轴旋转角度
rotateX: 0,
// 绕y轴旋转角度
rotateY: 0,
// 绕z轴旋转角度
rotateZ: 0,
// 透视距离
perspective: 0,
skewX: 0,
skewY: 0
},
customize: {
title: '文本标签占位符',
fontSize: 20,
fontWeight: 700,
fontFamily: '', // 字体类型
color: 'left,#ffffff,#ffffff',
align: 'center', // 文字对齐方式
letterSpacing: 1,// 文字间距
statusColor: "green",
},
}
const dataHandler = 'data = data[0]'
export const dataConfig = {
...commonConfig(customConfig),
dataHandler,
}