fix(BasicComponents): 修复资金格式化函数处理字符串输入的问题

将formatFundsRmb函数修改为接受字符串输入并转换为数值，确保金额计算正确
perf(InfoCardCollection): 调整滚动动画时间为100秒以提升用户体验
2025-11-12 16:09:32 +08:00 · 2025-11-12 14:45:58 +08:00 · 2025-11-12 11:28:42 +08:00 · 2025-11-10 16:42:08 +08:00 · 2025-11-10 16:41:00 +08:00 · 2025-11-10 16:38:53 +08:00
9 changed files with 590 additions and 11 deletions
--- a/backend/swiot-admin/src/main/resources/application-dev.yml
+++ b/backend/swiot-admin/src/main/resources/application-dev.yml
@@ -9,9 +9,9 @@ spring:
        druid:
            # 主库数据源
            master:
-                url: jdbc:mysql://localhost:3306/dashboard?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+                url: jdbc:mysql://49.232.154.205:13306/dashboard?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
                username: root
-                password: 123456
+                password: Root@12345
            # 从库数据源
            slave:
                # 从数据源开关/默认关闭
--- a/frontend/packages/BasicComponents/InfoCardCollection/index.vue
+++ b/frontend/packages/BasicComponents/InfoCardCollection/index.vue
@@ -0,0 +1,327 @@
+<template>
+  <div
+    style="width: 100%; height: 100%"
+    class="bs-design-wrap"
+  >
+    <!-- 滚动容器 -->
+    <div class="scroll-container">
+      <!-- 内容容器，使用CSS动画实现滚动 -->
+      <div class="content-wrapper" :class="{ 'scroll-animation': shouldScroll }">
+        <!-- 第一组卡片 -->
+        <div class="card-grid">
+          <div 
+            v-for="(item, index) in config.option.tableData" 
+            :key="item.projectId" 
+            class="info-card" 
+            :class="`card-theme-${getCardTheme(index)}`"
+          >
+            <h3 class="card-title">{{ item.projectName }}</h3>
+            <dl class="card-info-list">
+              <dt>项目编号：{{ item.projectNum }}</dt>
+              <dt>负责人：{{ item.functionary }}</dt>
+              <dt>金额区间：{{ formatFundsRmb(item.fundsRmb) }}</dt>
+              <dt>贸易类型：{{ formatTradeType(item.tradeType) }}</dt>
+            </dl>
+          </div>
+        </div>
+        <!-- 第二组卡片（完全相同的副本） -->
+        <div class="card-grid copy-grid">
+          <div 
+            v-for="(item, index) in config.option.tableData" 
+            :key="item.projectId + '-copy'" 
+            class="info-card" 
+            :class="`card-theme-${getCardTheme(index)}`"
+          >
+            <h3 class="card-title">{{ item.projectName }}</h3>
+            <dl class="card-info-list">
+              <dt>项目编号：{{ item.projectNum }}</dt>
+              <dt>负责人：{{ item.functionary }}</dt>
+              <dt>金额区间：{{ formatFundsRmb(item.fundsRmb) }}</dt>
+              <dt>贸易类型：{{ formatTradeType(item.tradeType) }}</dt>
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+  </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'
+import cloneDeep from 'lodash/cloneDeep'
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+
+export default {
+  name: 'tables',
+  mixins: [paramsMixins, commonMixins, linkageMixins],
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      updateKey: 0,
+      headerCellStyleObj: {
+        backgroundColor: 'transparent'
+      },
+      cellStyleObj: {
+        backgroundColor: 'transparent'
+      },
+      columnData: {},
+      isInit: true,
+      cardThemes: [] // 存储每个卡片的主题，确保副本颜色一致
+    }
+  },
+  computed: {
+    headerCellStyle () {
+      const headerBackgroundColor = {
+        light: '#ffffff',
+        dark: 'transparent'
+      }
+      if (document.getElementById(this.config.code)?.querySelector('tr')) {
+        document
+          .getElementById(this.config.code)
+          .querySelector('tr').style.backgroundColor =
+          this.customTheme !== 'custom'
+            ? this.config.customize.headerBackgroundColor ||
+              headerBackgroundColor[this.customTheme]
+            : this.headerCellStyleObj.backgroundColor
+      }
+      const style = {
+        height: '48px',
+        borderBottom: 'solid 2px #007aff',
+        backgroundColor:
+          this.customTheme !== 'custom'
+            ? this.config.customize.headerBackgroundColor ||
+              headerBackgroundColor[this.customTheme]
+            : this.headerCellStyleObj.backgroundColor,
+        color:
+          this.customTheme === 'light'
+            ? '#000000'
+            : this.config.customize.headerFontColor || '#000000',
+        fontSize: this.config.customize.headerFontSize + 'px' || '14px'
+      }
+      return style
+    },
+    shouldShowCopy() {
+      return this.config.option.tableData && this.config.option.tableData.length > 0
+    },
+    shouldScroll() {
+      return this.config.option.tableData && this.config.option.tableData.length > 0
+    }
+  },
+  watch: {
+    activeItemConfig (val) {
+      console.dir(val)
+    },
+    // 监听数据变化，重新生成主题
+    'config.option.tableData': {
+      handler(newData) {
+        if (newData && newData.length > 0) {
+          this.generateCardThemes(newData.length)
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  mounted () {
+    this.chartInit()
+    console.log(this.config.option, '信息卡片初始化')
+  },
+  methods: {
+    // 生成卡片主题，确保颜色一致性
+    generateCardThemes(count) {
+      this.cardThemes = []
+      for (let i = 0; i < count; i++) {
+        // 使用固定的算法生成主题，确保相同位置的卡片颜色一致
+        this.cardThemes.push((i % 3) + 1)
+      }
+    },
+    // 获取卡片主题
+    getCardTheme(index) {
+      if (this.cardThemes.length > index) {
+        return this.cardThemes[index]
+      }
+      return (index % 3) + 1
+    },
+    formatFundsRmb (str) {
+      const amount = Number(str) / 10000;
+      if (amount === undefined || amount === null) return '未知'
+      if (amount < 10) return '0w-10w'
+      else if (amount < 20) return '10w-20w'
+      else if (amount < 50) return '20w-50w'
+      else if (amount < 100) return '50w-100w'
+      else if (amount < 200) return '100w-200w'
+      else return '200w以上'
+    },
+    formatTradeType (type) {
+      return type === 0 ? '内贸' : '外贸'
+    },
+    changeStyle (config) {
+      config = { ...this.config, ...config }
+      config.theme = settingToTheme(cloneDeep(config), this.customTheme)
+      this.changeChartConfig(config)
+      if (config.code === this.activeCode) {
+        this.changeActiveItemConfig(config)
+      }
+      return config
+    },
+    dataFormatting (config, data) {
+      config.option.tableData =
+        data?.data && data.data.length > 0 ? data.data : []
+      const filteredData = {}
+      const columnData = data?.columnData || {}
+      const dimensionFieldList = config.dataSource.dimensionFieldList || []
+      if (
+        config.dataSource.dimensionFieldList &&
+        config.dataSource.dimensionFieldList.length > 0
+      ) {
+        const sortedColumnData = {}
+        dimensionFieldList.forEach((item, index) => {
+          sortedColumnData[item] = columnData[item]
+        })
+        Object?.keys(sortedColumnData).forEach((key) => {
+          if (
+            config.dataSource.dimensionFieldList.includes(
+              sortedColumnData[key]?.alias
+            )
+          ) {
+            filteredData[key] = sortedColumnData[key]
+          }
+        })
+        config.option.columnData = filteredData
+      } else {
+        config.option.columnData = columnData
+      }
+      this.columnData = cloneDeep(config.option.columnData)
+      this.updateKey = new Date().getTime()
+      
+      // 数据更新时重新生成主题
+      if (config.option.tableData && config.option.tableData.length > 0) {
+        this.generateCardThemes(config.option.tableData.length)
+      }
+      
+      return config
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+// 滚动容器
+.scroll-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+// 内容容器
+.content-wrapper {
+  width: 100%;
+  
+  // 滚动动画 - 使用更精确的动画
+  &.scroll-animation {
+    animation: seamlessScroll 100s linear infinite;
+    
+    // 悬停时暂停
+    &:hover {
+      animation-play-state: paused;
+    }
+  }
+}
+
+// 无缝滚动动画 - 精确控制动画距离
+@keyframes seamlessScroll {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    // 滚动一个完整内容区域的高度
+    transform: translate3d(0, -50%, 0);
+  }
+}
+
+// 瀑布流布局
+.card-grid {
+  column-count: 6;
+  column-gap: 20px;
+  padding: 10px;
+  
+  // 确保副本与原始内容完全一致
+  &.copy-grid {
+    // 不再使用绝对定位，而是正常文档流
+  }
+}
+
+// 单个信息卡片
+.info-card {
+  break-inside: avoid;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  padding: 15px;
+  color: #fff;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  }
+}
+
+// 科技感主题色
+.card-theme-1 {
+  background: linear-gradient(135deg, rgba(0, 128, 255, 0.3), rgba(0, 128, 255, 0.1));
+  border: 1px solid rgba(0, 128, 255, 0.5);
+}
+.card-theme-2 {
+  background: linear-gradient(135deg, rgba(0, 255, 128, 0.3), rgba(0, 255, 128, 0.1));
+  border: 1px solid rgba(0, 255, 128, 0.5);
+}
+.card-theme-3 {
+  background: linear-gradient(135deg, rgba(128, 0, 255, 0.3), rgba(128, 0, 255, 0.1));
+  border: 1px solid rgba(128, 0, 255, 0.5);
+}
+
+// 卡片标题
+.card-title {
+  margin-top: 0;
+  margin-bottom: 10px;
+  font-size: 18px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+  padding-bottom: 8px;
+  font-weight: bold;
+}
+
+// 卡片信息列表
+.card-info-list {
+  margin: 0;
+  dt {
+    font-weight: normal;
+    margin-top: 8px;
+    font-size: 14px;
+    line-height: 1.4;
+  }
+}
+</style>
--- a/frontend/packages/BasicComponents/InfoCardCollection/setting.vue
+++ b/frontend/packages/BasicComponents/InfoCardCollection/setting.vue
@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <el-form
+      ref="form"
+      :model="config"
+      :rules="customRules"
+      label-width="120px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <SettingTitle>基础</SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item
+          label="名称"
+        >
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+      </div>
+      <SettingTitle v-if="config.border">
+        边框
+      </SettingTitle>
+      <div class="lc-field-body">
+        <BorderSetting
+          v-if="config.border"
+          label-width="120px"
+          :config="config.border"
+          :big-title="config.title"
+        />
+      </div>
+      <SettingTitle>位置</SettingTitle>
+      <div class="lc-field-body">
+        <PosWhSetting
+          :config="config"
+          label-width="120px"
+        />
+      </div>
+      <SettingTitle>旋转</SettingTitle>
+      <div class="lc-field-body">
+        <RotateSetting
+          :config="config"
+        />
+      </div>
+      <SettingTitle>基础</SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item label="表头颜色">
+          <ColorPicker
+            v-model="config.customize.headerBackgroundColor"
+            placeholder="请选择表头颜色"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item label="表头字体颜色">
+          <ColorPicker
+            v-model="config.customize.headerFontColor"
+            style="width:180px"
+            placeholder="请选择表头字体颜色"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item label="表头字体大小">
+          <el-input-number
+            v-model="config.customize.headerFontSize"
+            class="bs-el-input-number"
+            :min="12"
+            :max="100"
+            :step="1"
+          />
+        </el-form-item>
+        <el-form-item label="主体背景颜色">
+          <ColorPicker
+            v-model="config.customize.bodyBackgroundColor"
+            placeholder="请选择主体背景颜色"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item label="主体字体颜色">
+          <ColorPicker
+            v-model="config.customize.bodyFontColor"
+            placeholder="请选择主体字体颜色"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item label="主体字体大小">
+          <el-input-number
+            v-model="config.customize.bodyFontSize"
+            class="bs-el-input-number"
+            :min="12"
+            :max="100"
+            :step="1"
+          />
+        </el-form-item>
+        <el-form-item label="奇数行背景颜色">
+          <ColorPicker
+            v-model="config.customize.evenRowBackgroundColor"
+            placeholder="请选择奇数行背景颜色"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item label="偶数行背景颜色">
+          <ColorPicker
+            v-model="config.customize.oddRowBackgroundColor"
+            placeholder="请选择偶数行背景颜色"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import { chartSettingMixins } from 'data-room-ui/js/mixins/chartSettingMixins'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import { predefineColors } from 'data-room-ui/js/utils/colorList'
+export default {
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    SettingTitle,
+    BorderSetting,
+    RotateSetting
+  },
+  mixins: [chartSettingMixins],
+  data () {
+    return {
+      predefineThemeColors: predefineColors
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    },
+    pageCode () {
+      return this.$route.query.code
+    }
+  },
+  watch: {},
+  mounted () { },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/settingWrap.scss";
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>
--- a/frontend/packages/BasicComponents/InfoCardCollection/settingConfig.js
+++ b/frontend/packages/BasicComponents/InfoCardCollection/settingConfig.js
@@ -0,0 +1,77 @@
+import { commonConfig, displayOption } from 'data-room-ui/js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 50, 80],
+  legend: false,
+  isGroup: true,
+  data: [],
+  color: '',
+  theme: 'dark',
+  label: {
+    // 可手动配置 label 数据标签位置
+    position: 'top', // 'top', 'bottom', 'middle',
+    // 配置样式
+    content: ''
+  },
+  seriesField: '', // 分组
+  displayOption: {
+    ...displayOption,
+    metricField: {
+      // 指标
+      label: '指标',
+      enable: false,
+      multiple: false // 是否多选
+    },
+    dimensionField: {
+      // 表格列
+      label: '表格列', // 维度/查询字段
+      enable: true,
+      multiple: true // 是否多选
+    }
+  }
+}
+const customConfig = {
+  type: 'tables',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    loading: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+
+  customize: {
+    theme: 'dark', // 'light'、'dark'
+    // 表格头部背景颜色
+    headerBackgroundColor: '#232832',
+    // 表格头部字体颜色
+    headerFontColor: '#fff',
+    // 表格头部字体大小
+    headerFontSize: 14,
+    // 表格主体背景颜色
+    bodyBackgroundColor: '',
+    // 表格主体字体颜色
+    bodyFontColor: 'rgb(155 159 172)',
+    // 表格主体字体大小
+    bodyFontSize: 14,
+    // 表格是否需要斑马纹
+    stripe: false,
+    // 表格奇数行背景颜色
+    oddRowBackgroundColor: '',
+    // 表格偶数行背景颜色‘
+    evenRowBackgroundColor: ''
+    // 表格是否需要边框
+    // border: false,
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}
--- a/frontend/packages/BigScreenDesign/DataViewDialog/index.vue
+++ b/frontend/packages/BigScreenDesign/DataViewDialog/index.vue
@@ -142,6 +142,7 @@ export default {
    // 通过option获取数据
    getDataByOption (config) {
      let list = []
+      // console.log(config.option, 'config.option')
      if (config.chartType === 'Treemap') {
        list = config.option.data.children
      } else if (config.type === 'tables') {
--- a/frontend/packages/BigScreenRun/index.vue
+++ b/frontend/packages/BigScreenRun/index.vue
@@ -76,7 +76,7 @@ export default {
    // 画布样式
    canvasStyle() {
      return {
-        backgroundColor: this.fitPageConfig.customTheme === 'light' ? this.fitPageConfig.lightBgColor : this.fitPageConfig.bgColor,
+        // backgroundColor: this.fitPageConfig.customTheme === 'light' ? this.fitPageConfig.lightBgColor : this.fitPageConfig.bgColor,
        transform: `scale(${this.scale}) translate(${this.translateX}px, ${this.translateY}px)`,
        transformOrigin: '0 0'
      };
@@ -279,12 +279,12 @@ export default {
      })
    },
    permission() {
-      this.$dataRoomAxios.get(`/bigScreen/permission/check/${this.pageCode}`).then(res => {
-        this.hasPermission = res
-        if (res) {
+      // this.$dataRoomAxios.get(`/bigScreen/permission/check/${this.pageCode}`).then(res => {
+        this.hasPermission = true
+        // if (res) {
          this.init()
-        }
-      })
+        // }
+      // })
    },
    init() {
      if (!this.pageCode) { return }
--- a/frontend/packages/js/config/basicComponentsConfig.js
+++ b/frontend/packages/js/config/basicComponentsConfig.js
@@ -40,6 +40,7 @@ const typeList = [
  "indicatorCard2",
  "indexCard",
  "indexCard2",
+  "infoCardCollection"
 ];
 let basicConfigList = [];
 basicConfigList = typeList.map((type) => {
--- a/frontend/packages/js/utils/file.js
+++ b/frontend/packages/js/utils/file.js
@@ -8,9 +8,9 @@ function getFileUrl(url){
    return url
  }
  // 如果没有以/开头的加上/
-  // if (!/^\//.test(url)) {
-  //   url = `/${url}`
-  // }
+  if (!/^\//.test(url)) {
+    url = `/${url}`
+  }
  // return `${window.BS_CONFIG?.httpConfigs?.fileUrlPrefix}${url}`
  return `http://49.232.154.205:10900${url}`
 }
--- a/frontend/packages/js/utils/getComponentConfig.js
+++ b/frontend/packages/js/utils/getComponentConfig.js
@@ -136,6 +136,19 @@ export default function getComponentConfig(type) {
        y: 0,
        type,
      };
+    case 'infoCardCollection':
+      return {
+        name: "信息卡片集合",
+        title: "信息卡片集合",
+        icon: Icon.getNameList()[4],
+        className:
+          "com.gccloud.dataroom.core.module.chart.components.ScreenTablesChart",
+        w: 600,
+        h: 400,
+        x: 0,
+        y: 0,
+        type,
+      };
    case "timeCountDown":
      return {
        name: "倒计时",
Author	SHA1	Message	Date
砂糖	b5c3c34b81	fix(BasicComponents): 修复资金格式化函数处理字符串输入的问题将formatFundsRmb函数修改为接受字符串输入并转换为数值，确保金额计算正确	2025-11-12 16:09:32 +08:00
砂糖	dd9e02d388	perf(InfoCardCollection): 调整滚动动画时间为100秒以提升用户体验将无缝滚动动画时间从40秒延长至100秒，使动画更加平滑，减少视觉疲劳	2025-11-12 14:45:58 +08:00
砂糖	b1ec79ee81	feat(组件): 新增信息卡片集合组件添加信息卡片集合组件，支持瀑布流布局和无缝滚动效果包含组件配置、样式设置和交互逻辑实现	2025-11-12 11:28:42 +08:00
砂糖	8f5877505d	fix: 更新开发环境数据库连接配置修改数据库连接URL和密码以匹配新的生产环境配置	2025-11-10 16:42:08 +08:00
砂糖	e26e33ea59	Merge branch 'master' of http://49.232.154.205:10100/DeXun/fad-dashboard	2025-11-10 16:41:00 +08:00
Joshi	b0a20f15f8	chore(config): 更新开发环境数据库连接配置 - 将主库URL从本地地址更改为远程服务器地址 - 更新主库用户名密码为新的认证信息- 保持从库配置不变，仅调整主库连接参数	2025-11-10 16:38:53 +08:00
砂糖	1fd03fe959	fix: 修复文件URL处理并临时禁用权限检查 - 恢复文件URL路径前自动添加斜杠的功能 - 临时注释掉大屏设计和运行页面的权限检查逻辑 - 临时注释掉画布背景颜色的动态设置	2025-11-10 16:11:09 +08:00