Merge branch 'dev' into master

src/hooks/useChartDataFetch.hook.ts

@@ -107,8 +107,6 @@ export const useChartDataFetch = (
         // 开启轮询
         if (time) {
           fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
-        } else {
-          fetchFn()
         }
       }
       // eslint-disable-next-line no-empty

src/packages/components/Decorates/FlowChart/FlowChartLine/config.ts

@@ -0,0 +1,19 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlowChartLineConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  endWidth: 15,
+  lineWidth: 2, //线条粗细
+  lineNum: 2, //向下数量
+  lineNumUp: 2, //向上数量
+  backgroundCol: '#303a4c', //线条背景
+  animateCol: '#3788ea' //流动动画背景
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = FlowChartLineConfig.key
+  public chartConfig = cloneDeep(FlowChartLineConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/FlowChart/FlowChartLine/config.vue

@@ -0,0 +1,37 @@
+<template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox name="折线数量">
+      <SettingItem name="向下增加">
+        <n-input-number size="small" :min="0" v-model:value="optionData.lineNum"></n-input-number>
+      </SettingItem>
+      <SettingItem name="向上增加">
+        <n-input-number size="small" :min="0" v-model:value="optionData.lineNumUp"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="折线样式">
+      <SettingItem name="折线粗细">
+        <n-input-number size="small" :min="1" v-model:value="optionData.lineWidth"></n-input-number>
+      </SettingItem>
+      <SettingItem name="背景条颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backgroundCol"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="流动颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animateCol"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Decorates/FlowChart/FlowChartLine/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const FlowChartLineConfig: ConfigType = {
+    key: 'FlowChartLine',
+    chartKey: 'VFlowChartLine',
+    conKey: 'VCFlowChartLine',
+    title: '流程线',
+    category: ChatCategoryEnum.FlowChart,
+    categoryName: ChatCategoryEnumName.FlowChart,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'flow-zhexian.png'
+}

src/packages/components/Decorates/FlowChart/FlowChartLine/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <svg :width="w" :height="h">
+    <polyline :stroke-width="lineWidth" :points="getStartPoint(-1, '')" :stroke="backgroundCol" fill="none" />
+    <polyline
+      :stroke-width="lineWidth"
+      class="g-dashed-line"
+      :points="getStartPoint(-1, '')"
+      :stroke="animateCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      v-for="(item, index) in lineNum"
+      :key="index"
+      :points="getStartPoint(index + 1, 'down')"
+      :stroke="backgroundCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      class="g-dashed-line"
+      v-for="(item, index) in lineNum"
+      :key="index"
+      :points="getStartPoint(index + 1, 'down')"
+      :stroke="animateCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      v-for="(item, index) in lineNumUp"
+      :key="index"
+      :points="getStartPoint(index + 1, 'up')"
+      :stroke="backgroundCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      class="g-dashed-line"
+      v-for="(item, index) in lineNumUp"
+      :key="index"
+      :points="getStartPoint(index + 1, 'up')"
+      :stroke="animateCol"
+      fill="none"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, computed } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { lineNum, lineNumUp, lineWidth, backgroundCol, animateCol } = toRefs(props.chartConfig.option)
+const getStartPoint = (num: number, direction: string) => {
+  const lineLength = w.value / 2
+  const lineColLength =
+    h.value / (lineNumUp.value + lineNum.value) - lineWidth.value / (lineNumUp.value + lineNum.value)
+  if (num === -1 && direction === '') {
+    return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength * 2},${h.value / 2}`
+  } else if (num !== -1 && direction === 'down') {
+    return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength},${h.value / 2 + num * lineColLength},${
+      lineLength * 2
+    },${h.value / 2 + num * lineColLength}`
+  } else if (num !== -1 && direction === 'up') {
+    return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength},${h.value / 2 - num * lineColLength},${
+      lineLength * 2
+    },${h.value / 2 - num * lineColLength}`
+  }
+}
+</script>
+
+<style scoped>
+.g-dashed-line {
+  stroke-dasharray: 20 130;
+  stroke-dashoffset: 0;
+  animation: move 3s infinite linear;
+}
+@keyframes move {
+  0% {
+    stroke-dashoffset: 20;
+  }
+  100% {
+    stroke-dashoffset: -130;
+  }
+}
+</style>

src/packages/components/Decorates/FlowChart/index.ts

@@ -0,0 +1,3 @@
+import { FlowChartLineConfig } from './FlowChartLine/index'
+
+export default [FlowChartLineConfig]

src/packages/components/Decorates/Mores/CirclePoint/config.ts

@@ -0,0 +1,20 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { CirclePointConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export const option = {
+  outCircle: 15,
+  inCircle: 5,
+  outCircleColor: '#3f5261',
+  inCircleColor: '#fff',
+  outCircleWidth: 2
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = CirclePointConfig.key
+  public attr = { ...chartInitConfig, w: 97, h: 97, zIndex: 1 }
+  public chartConfig = cloneDeep(CirclePointConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/Mores/CirclePoint/config.vue

@@ -0,0 +1,51 @@
+<template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox name="具体">
+      <SettingItem name="外圆环半径">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outCircle"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="内部圆形半径">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.inCircle"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="外圆环粗细">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outCircleWidth"
+        ></n-input-number>
+      </SettingItem>
+
+      <SettingItem name="外圆环颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.outCircleColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="内部圆形颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.inCircleColor"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+
+  </CollapseItem>
+
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+</script>

src/packages/components/Decorates/Mores/CirclePoint/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const CirclePointConfig: ConfigType = {
+    key: 'CirclePoint',
+    chartKey: 'VCirclePoint',
+    conKey: 'VCCirclePoint',
+    title: '圆点光环',
+    category: ChatCategoryEnum.MORE,
+    categoryName: ChatCategoryEnumName.MORE,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'flow-circle.png'
+}

src/packages/components/Decorates/Mores/CirclePoint/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg :width="w" :height="h">
+    <defs>
+      <filter id="blurFilter" x="-20%" y="-20%" width="140%" height="140%">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
+      </filter>
+    </defs>
+    <circle :cx="w / 2 " :cy="h / 2" :r="inCircle" :fill="inCircleColor" filter="url(#blurFilter)"/>
+    <!-- 外部圆环 -->
+    <circle :cx="w / 2 " :cy="h / 2" :r="outCircle" fill="none" :stroke="outCircleColor"  :stroke-width="outCircleWidth"/>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true,
+  },
+})
+const { w, h } = toRefs(props.chartConfig.attr)
+const { outCircle,inCircle,outCircleColor,inCircleColor,outCircleWidth} = toRefs(props.chartConfig.option)
+
+</script>
+

src/packages/components/Decorates/Mores/index.ts

@@ -6,6 +6,7 @@ import { CountDownConfig } from './CountDown/index'
 import { FlipperNumberConfig } from './FlipperNumber'
 import { PipelineHConfig } from './PipelineH/index'
 import { PipelineVConfig } from './PipelineV/index'
+import { CirclePointConfig } from './CirclePoint/index'
 
 export default [
   NumberConfig,
@@ -15,5 +16,6 @@ export default [
   ClockConfig,
   FullScreenConfig,
   PipelineHConfig,
-  PipelineVConfig
+  PipelineVConfig,
+  CirclePointConfig
 ]

src/packages/components/Decorates/index.d.ts

@@ -1,6 +1,7 @@
 export enum ChatCategoryEnum {
   BORDER = 'Borders',
   DECORATE = 'Decorates',
+  FlowChart = 'FlowChart',
   THREE = 'Three',
   MORE = 'Mores'
 }
@@ -8,6 +9,7 @@ export enum ChatCategoryEnum {
 export enum ChatCategoryEnumName {
   BORDER = '边框',
   DECORATE = '装饰',
+  FlowChart = '流程',
   THREE = '三维',
   MORE = '更多'
-}
+}

src/packages/components/Decorates/index.ts

@@ -1,6 +1,7 @@
 import Borders from './Borders'
 import Decorates from './Decorates'
+import FlowChart from './FlowChart'
 import Three from './Three'
 import Mores from './Mores'
 
-export const DecorateList = [...Borders, ...Decorates, ...Three, ...Mores]
+export const DecorateList = [...Borders, ...Decorates,...FlowChart, ...Three, ...Mores]

src/views/project/templateMarket/index.vue

@@ -9,6 +9,15 @@
         </n-button>
       </n-space>
     </div>
+    <div class="content-box">
+      <n-space vertical>
+        <img src="https://goviewpro.goviewlink.com/charts-img-db/charts-img-db_id_5pimyysnnh8000.png" style="width: 100%" />
+        <img src="https://goviewpro.goviewlink.com/charts-img-db/charts-img-db_id_izetnl0654w00.png" style="height: 400px" />
+        <n-button text tag="a" href="https://ai.goviewlink.com/?channel=mayun" target="_blank" type="primary">
+          前往 GoViewPro 查看 👆
+        </n-button>
+      </n-space>
+    </div>
   </div>
 </template>
 

types/shims-vue.d.ts

@@ -7,3 +7,7 @@ declare module '*.vue' {
 declare module 'lodash/*'
 declare module 'dom-helpers'
 declare module 'vue3-sketch-ruler';
+
+declare module 'lodash/*'
+declare module 'dom-helpers'
+declare module 'vue3-sketch-ruler';