初始化

2025-11-08 10:38:36 +08:00
commit 3beeec7296
1626 changed files with 198488 additions and 0 deletions
--- a/frontend/packages/Configuration/HorizontalLine2/index
+++ b/frontend/packages/Configuration/HorizontalLine2/index
@@ -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>
--- a/frontend/packages/Configuration/HorizontalLine2/index.vue
+++ b/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>
--- a/frontend/packages/Configuration/HorizontalLine2/setting.vue
+++ b/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>
--- a/frontend/packages/Configuration/HorizontalLine2/settingConfig.js
+++ b/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),
+};