Merge branch 'dev' into master-fetch-dev

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/packages/components/Informations/Inputs/InputsInput/index.ts

@@ -10,5 +10,5 @@ export const InputsInputConfig: ConfigType = {
     categoryName: ChatCategoryEnumName.INPUTS,
     package: PackagesCategoryEnum.INFORMATIONS,
     chartFrame: ChartFrameEnum.STATIC,
-    image: 'inputs_select.png'
+    image: 'inputs_input.png'
 }

src/views/chart/ContentEdit/components/EditRange/index.vue

@@ -55,7 +55,6 @@ const rangeModelStyle = computed(() => {
   position: relative;
   transform-origin: left top;
   background-size: cover;
-  border-radius: 10px;
   overflow: hidden;
   @include fetch-border-color('hover-border-color');
   @include fetch-bg-color('background-color2');

src/views/chart/ContentEdit/components/EditSelect/index.vue

@@ -93,21 +93,20 @@ watch(
     position: absolute;
     width: 100%;
     height: 100%;
-    border-radius: 5px;
     overflow: hidden;
   }
   .select-border {
     left: 0;
     top: 0;
-    opacity: 0.5;
-    border-width: 2px;
+    opacity: 1;
+    border-width: 1px;
     border-style: solid;
     border-color: v-bind('themeColor');
   }
   .select-background {
     top: 2px;
     left: 2px;
-    opacity: 0.2;
+    opacity: 0.08;
     background-color: v-bind('themeColor');
   }
 }

src/views/chart/ContentEdit/components/EditShapeBox/index.vue

@@ -139,7 +139,7 @@ const hide = computed(() => {
       position: absolute;
       width: 100%;
       height: 100%;
-      border-radius: 10px;
+      border-radius: 4px;
     }
 
     .shape-modal-select {

src/views/chart/ContentEdit/components/EditTools/index.vue

@@ -182,13 +182,13 @@ const btnList: BtnListType[] = [
     key: 'import',
     type: TypeEnum.IMPORTUPLOAD,
     name: '导入',
-    icon: ShareIcon
+    icon: DownloadIcon
   },
   {
     key: 'export',
     type: TypeEnum.BUTTON,
     name: '导出',
-    icon: DownloadIcon,
+    icon: ShareIcon,
     handle: exportHandle
   },
   {
@@ -231,6 +231,8 @@ $asideBottom: 70px;
   border: 1px solid;
   @include fetch-border-color('hover-border-color-shallow');
   &.aside {
+    display: flex;
+    justify-content: center;
     flex-direction: column-reverse;
     height: auto;
     right: 20px;

src/views/chart/ContentEdit/index.vue

@@ -209,7 +209,6 @@ onMounted(() => {
   @include background-image('background-point');
 
   @include goId('chart-edit-content') {
-    border-radius: 10px;
     overflow: hidden;
     @extend .go-transition;
     @include fetch-theme('box-shadow');

src/views/project/templateMarket/index.vue

@@ -1,19 +1,41 @@
 <template>
   <div class="go-project-template-market">
+    <div class="content-box">
       <n-space vertical>
-      <n-image object-fit="contain" height="300" preview-disabled :src="requireErrorImg()"></n-image>
-      <n-h3>暂时还没有东西呢</n-h3>
+        <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>
 
-<script setup lang="ts">
-import { requireErrorImg } from '@/utils'
-</script>
+<script setup lang="ts"></script>
 
 <style lang="scss" scoped>
-@include go("project-template-market") {
-  margin-top: 100px;
+@include go('project-template-market') {
+  box-sizing: border-box;
+  height: calc(100vh - 62px);
+  padding-top: 3vh;
+  .content-box {
+    width: 700px;
+    margin: 0 auto 0;
+    padding: 20px;
+    border-radius: 10px;
+    background: linear-gradient(120deg, rgba(255, 255, 255, 0.15) 0%, rgba(29, 83, 163, 0.3) 99.09%);
+    box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.04);
     @extend .go-flex-center;
+    img {
+      border-radius: 6px;
+    }
+  }
+}
+
+@include dark() {
+  @include go('project-template-market') {
+    background-color: #18181c;
+  }
 }
 </style>