初始化

frontend/packages/Configuration/HorizontalLine2/index copy.vue

@@ -0,0 +1,73 @@
+<template>
+  <div style="width: 100%; height: 100%" class="bs-design-wrap">
+    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="10" :key="updateKey"
+      :style="{ animation: 'dash 5s linear infinite' }">
+      <line :x1="0" :y1="5" :x2="config.w" :y2="5" :stroke="config.customize.decorationColor1"
+        :stroke-width="config.customize.lineWidth" stroke-dasharray="10 10 2 10" :opacity="config.customize.opacity" />
+    </svg>
+  </div>
+</template>
+
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'HorizontalLine2',
+  mixins: [refreshComponentMixin],
+  props: {
+    config: {
+      type: Object,
+      default: () => ({}),
+      required: true
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    color() {
+      return this.config.customize.decorationColor1 ? this.config.customize.decorationColor1 : null
+    }
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.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;
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 0;
+  }
+
+  100% {
+    stroke-dashoffset: -1000;
+  }
+}
+
+/* 滚动条样式 */
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/Configuration/HorizontalLine2/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <div style="width: 100%; height: 100%" class="bs-design-wrap">
+    <!-- 添加背景色 -->
+    <div class="svg-box" :style="{
+      backgroundColor: colorWithOpacity,
+      paddingLeft: paddingValue,
+      paddingRight: paddingValue,
+      borderRadius: borderRadiusValue
+    }">
+      <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none meet" version="1.1" width="100%" height="100%">
+        <!-- 使用 Vue 变量动态设置属性 -->
+        <g fill="none" :stroke="config.customize.decorationColor1" :stroke-width="config.customize.lineWidth"
+          :opacity="config.customize.opacity">
+          <path :class="[lineTypeClass, lineAnimationClass]" class="reverse-water-run"
+            :d="'M0 ' + (config.h / 2) + ' l' + config.w + ' 0'" />
+        </g>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'HorizontalLine2',
+  mixins: [refreshComponentMixin],
+  props: {
+    config: {
+      type: Object,
+      default: () => ({}),
+      required: true
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    // 动态设置内边距
+    paddingValue() {
+      return `${this.config.h / 2}px`;
+    },
+    // 动态设置倒圆角
+    borderRadiusValue() {
+      return `${this.config.h / 2}px`;
+    },
+    // 提取原始 rgba 颜色中的 rgba 值（格式：rgba(r, g, b, a)）
+    colorWithOpacity() {
+      const { decorationColor1 } = this.config.customize;
+      const rgbaMatch = decorationColor1.match(/rgba?\((\d+), (\d+), (\d+), (\d*(?:\.\d+)?)\)/);
+      if (rgbaMatch) {
+        return `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0.2)`;
+      }
+      return decorationColor1;
+    },
+    color() {
+      return this.config.customize.decorationColor1 ? this.config.customize.decorationColor1 : null
+    },
+    // 动态返回线条的动画类（根据流动方向）
+    lineAnimationClass() {
+      const flowDirection = this.config.customize.flowDirection;
+      switch (flowDirection) {
+        case 'R':
+          return 'reverse-water-run-R';
+        case 'L':
+          return 'reverse-water-run-L';
+        default:
+          return '';
+      }
+    },
+
+    // 动态返回线条的类型类（点线、虚线、混合线等）
+    lineTypeClass() {
+      const lineType = this.config.customize.lineType;
+      switch (lineType) {
+        case 'dotted':
+          return 'reverse-water-run-dotted';
+        case 'dashed':
+          return 'reverse-water-run-dashed';
+        case 'blend':
+          return 'reverse-water-run-blend';
+        default:
+          return '';
+      }
+    },
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 100px;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+.svg-box {
+  height: 100%;
+  width: 100%;
+}
+
+svg {
+  display: block;
+  /* 使SVG成为块级元素 */
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* 定义SVG路径动画 */
+@keyframes dashSmooth-L {
+  0% {
+    stroke-dashoffset: 1000;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes dashSmooth-R {
+  0% {
+    stroke-dashoffset: 0;
+  }
+
+  100% {
+    stroke-dashoffset: 1000;
+  }
+}
+
+/* 通用的动画类 */
+.reverse-water-run-L {
+  stroke-dashoffset: 1000;
+  animation: dashSmooth-L 20s linear infinite;
+}
+
+.reverse-water-run-R {
+  stroke-dashoffset: 1000;
+  animation: dashSmooth-R 20s linear infinite;
+}
+
+/* 针对不同的虚线类型，动态设置 stroke-dasharray */
+//点线
+.reverse-water-run-dotted {
+  stroke-dasharray: 5 5;
+}
+
+//虚线
+.reverse-water-run-dashed {
+  stroke-dasharray: 10 10;
+}
+
+//混合线
+.reverse-water-run-blend {
+  stroke-dasharray: 10 10 2 10;
+}
+</style>

frontend/packages/Configuration/HorizontalLine2/setting.vue

@@ -0,0 +1,125 @@
+<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.lineType" placeholder="请选择">
+              <el-option v-for="item in lineTypeOptions" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="线条颜色">
+            <ColorPicker v-model="config.customize.decorationColor1" :predefine="predefineThemeColors" />
+          </el-form-item>
+          <el-form-item label="线条粗细">
+            <el-input-number v-model="config.customize.lineWidth" class="bs-el-input-number" :min="1" :max="20"
+              :step="1" />
+          </el-form-item>
+          <el-form-item label="透明度">
+            <el-input-number v-model="config.customize.opacity" class="bs-el-input-number" :min="0.01" :max="1"
+              :precision="2" :step="0.01" />
+          </el-form-item>
+          <el-form-item label="线条动画">
+            <el-select v-model="config.customize.animation" placeholder="请选择" clearable @change="updateState">
+              <el-option v-for="item in animationOptions" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="流向" v-if="isActive">
+            <el-radio v-model="config.customize.flowDirection" label="L">正向</el-radio>
+            <el-radio v-model="config.customize.flowDirection" label="R">反向</el-radio>
+          </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: 'HorizontalLine2Setting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle
+  },
+  data() {
+    return {
+      //是否显示动画流向
+      isActive: true,
+      //动画类型
+      animationOptions: [{
+        value: 'waterRun',
+        label: '水流'
+      }],
+      //线条类型
+      lineTypeOptions: [{
+        value: '',
+        label: '实线'
+      }, {
+        value: 'dotted',
+        label: '点线'
+      }, {
+        value: 'dashed',
+        label: '虚线'
+      }, {
+        value: 'blend',
+        label: '混合线'
+      }],
+      // 预设主题色
+      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>

frontend/packages/Configuration/HorizontalLine2/settingConfig.js

@@ -0,0 +1,47 @@
+import { commonConfig } from "../../js/config";
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false,
+    },
+  },
+};
+const customConfig = {
+  type: "horizontalLine2",
+  root: {
+    version: "2023071001",
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0,
+  },
+  customize: {
+    decorationColor1: "rgba(18, 150, 219, 1)", //线条颜色
+    lineWidth: 5, //线条宽度
+    opacity: 1, //透明度
+    lineType: "dashed",
+    flowDirection: "L",
+    animation: "waterRun",
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2,
+  },
+};
+export const dataConfig = {
+  ...commonConfig(customConfig),
+};

frontend/packages/Configuration/VerticalLine2/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <div style="width: 100%; height: 100%" class="bs-design-wrap">
+    <!-- 添加背景色 -->
+    <div class="svg-box" :style="{
+      backgroundColor: colorWithOpacity,
+      paddingTop: paddingValue,
+      paddingBottom: paddingValue,
+      borderRadius: borderRadiusValue
+    }">
+      <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none meet" version="1.1" width="100%" height="100%">
+        <!-- 使用 Vue 变量动态设置属性 -->
+        <g fill="none" :stroke="config.customize.decorationColor1" :stroke-width="config.customize.lineWidth"
+          :opacity="config.customize.opacity">
+          <path :class="[lineTypeClass, lineAnimationClass]" class="reverse-water-run"
+            :d="'M' + (config.w / 2) + ' 0 l0 ' + config.h">
+          </path>
+        </g>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'VerticalLine2',
+  mixins: [refreshComponentMixin],
+  props: {
+    config: {
+      type: Object,
+      default: () => ({}),
+      required: true
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    // 动态设置内边距
+    paddingValue() {
+      return `${this.config.w / 2}px`;
+    },
+    // 动态设置倒圆角
+    borderRadiusValue() {
+      return `${this.config.w / 2}px`;
+    },
+    // 提取原始 rgba 颜色中的 rgba 值（格式：rgba(r, g, b, a)）
+    colorWithOpacity() {
+      const { decorationColor1 } = this.config.customize;
+      const rgbaMatch = decorationColor1.match(/rgba?\((\d+), (\d+), (\d+), (\d*(?:\.\d+)?)\)/);
+      if (rgbaMatch) {
+        return `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0.2)`;
+      }
+      return decorationColor1;
+    },
+    color() {
+      return this.config.customize.decorationColor1 ? this.config.customize.decorationColor1 : null
+    },
+    // 动态返回线条的动画类（根据流动方向）
+    lineAnimationClass() {
+      const flowDirection = this.config.customize.flowDirection;
+      switch (flowDirection) {
+        case 'R':
+          return 'reverse-water-run-R';
+        case 'L':
+          return 'reverse-water-run-L';
+        default:
+          return '';
+      }
+    },
+
+    // 动态返回线条的类型类（点线、虚线、混合线等）
+    lineTypeClass() {
+      const lineType = this.config.customize.lineType;
+      switch (lineType) {
+        case 'dotted':
+          return 'reverse-water-run-dotted';
+        case 'dashed':
+          return 'reverse-water-run-dashed';
+        case 'blend':
+          return 'reverse-water-run-blend';
+        default:
+          return '';
+      }
+    },
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.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;
+}
+
+.svg-box {
+  height: 100%;
+  width: 100%;
+}
+
+svg {
+  display: block;
+  /* 使SVG成为块级元素 */
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* 定义SVG路径动画 */
+@keyframes dashSmooth-L {
+  0% {
+    stroke-dashoffset: 1000;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes dashSmooth-R {
+  0% {
+    stroke-dashoffset: 0;
+  }
+
+  100% {
+    stroke-dashoffset: 1000;
+  }
+}
+
+/* 通用的动画类 */
+.reverse-water-run-L {
+  stroke-dashoffset: 1000;
+  animation: dashSmooth-L 20s linear infinite;
+}
+
+.reverse-water-run-R {
+  stroke-dashoffset: 1000;
+  animation: dashSmooth-R 20s linear infinite;
+}
+
+/* 针对不同的虚线类型，动态设置 stroke-dasharray */
+//点线
+.reverse-water-run-dotted {
+  stroke-dasharray: 5 5;
+}
+
+//虚线
+.reverse-water-run-dashed {
+  stroke-dasharray: 10 10;
+}
+
+//混合线
+.reverse-water-run-blend {
+  stroke-dasharray: 10 10 2 10;
+}
+</style>

frontend/packages/Configuration/VerticalLine2/setting.vue

@@ -0,0 +1,125 @@
+<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.lineType" placeholder="请选择">
+              <el-option v-for="item in lineTypeOptions" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="线条颜色">
+            <ColorPicker v-model="config.customize.decorationColor1" :predefine="predefineThemeColors" />
+          </el-form-item>
+          <el-form-item label="线条粗细">
+            <el-input-number v-model="config.customize.lineWidth" class="bs-el-input-number" :min="1" :max="20"
+              :step="1" />
+          </el-form-item>
+          <el-form-item label="透明度">
+            <el-input-number v-model="config.customize.opacity" class="bs-el-input-number" :min="0.01" :max="1"
+              :precision="2" :step="0.01" />
+          </el-form-item>
+          <el-form-item label="线条动画">
+            <el-select v-model="config.customize.animation" placeholder="请选择" clearable @change="updateState">
+              <el-option v-for="item in animationOptions" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="流向" v-if="isActive">
+            <el-radio v-model="config.customize.flowDirection" label="L">正向</el-radio>
+            <el-radio v-model="config.customize.flowDirection" label="R">反向</el-radio>
+          </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: 'VerticalLine2Setting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle
+  },
+  data() {
+    return {
+      //是否显示动画流向
+      isActive: true,
+      //动画类型
+      animationOptions: [{
+        value: 'waterRun',
+        label: '水流'
+      }],
+      //线条类型
+      lineTypeOptions: [{
+        value: '',
+        label: '实线'
+      }, {
+        value: 'dotted',
+        label: '点线'
+      }, {
+        value: 'dashed',
+        label: '虚线'
+      }, {
+        value: 'blend',
+        label: '混合线'
+      }],
+      // 预设主题色
+      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>

frontend/packages/Configuration/VerticalLine2/settingConfig.js

@@ -0,0 +1,46 @@
+import { commonConfig } from "../../js/config";
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false,
+    },
+  },
+};
+const customConfig = {
+  type: "verticalLine2",
+  root: {
+    version: "2023071001",
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0,
+  },
+  customize: {
+    decorationColor1: "rgba(18, 150, 219, 1)", //线条颜色
+    lineWidth: 5, //线条宽度
+    opacity: 1, //透明度
+    lineType: "dashed",
+    flowDirection: "L",
+    animation: "waterRun",
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2,
+  },
+};
+export const dataConfig = {
+  ...commonConfig(customConfig),
+};

frontend/packages/Configuration/Warning/index.vue

@@ -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>

frontend/packages/Configuration/Warning/setting.vue

@@ -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>

frontend/packages/Configuration/Warning/settingConfig.js

@@ -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,
+}