feat: 文本组件添加接口

src/layout/components/LayoutHeader/index.vue

@@ -40,24 +40,28 @@ const isProject = computed(() => {
 <style lang="scss" scoped>
 $min-width: 520px;
 @include go(header) {
+  width: 100vw;
   &-box {
     display: grid;
-    grid-template-columns: repeat(3, 33%);
+    grid-template-columns: $min-width 1fr $min-width;
     &.is-project {
       grid-template-columns: none;
     }
     .header-item {
       display: flex;
       align-items: center;
-      min-width: $min-width;
+      //min-width: $min-width;
       &.left {
         justify-content: start;
+        min-width: $min-width;
       }
       &.center {
         justify-content: center;
+        flex: 1;
       }
       &.right {
         justify-content: end;
+        min-width: $min-width;
       }
     }
     height: $--header-height;

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

@@ -9,13 +9,13 @@ import { SankeyConfig } from './Sankey/index'
 import { GraphConfig } from './Graph/index'
 
 export default [
-  ProcessConfig,
-  RadarConfig,
-  FunnelConfig,
-  HeatmapConfig,
+  // ProcessConfig,
+  // RadarConfig,
+  // FunnelConfig,
+  // HeatmapConfig,
   WaterPoloConfig,
-  TreeMapConfig,
-  GraphConfig,
-  SankeyConfig,
-  DialConfig
+  // TreeMapConfig,
+  // GraphConfig,
+  // SankeyConfig,
+  // DialConfig
 ]

src/packages/components/Charts/Pies/PieCircle/index.vue

@@ -111,16 +111,16 @@ watch(() => props.chartConfig.option.titleContrl, (v) => {
   deep: true,
 })
 
-// 预览时
-useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
-  let d = parseFloat(`${resData}`) * 100
-  // @ts-ignore
-  option.value.title.text = `${+d.toFixed(2)}%`
-  // @ts-ignore
-  option.value.series[0].data[0].value[0] = d
-  // @ts-ignore
-  option.value.series[0].data[1].value[0] = 100 - d
-})
+// // 预览时
+// useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
+//   let d = parseFloat(`${resData}`) * 100
+//   // @ts-ignore
+//   option.value.title.text = `${+d.toFixed(2)}%`
+//   // @ts-ignore
+//   option.value.series[0].data[0].value[0] = d
+//   // @ts-ignore
+//   option.value.series[0].data[1].value[0] = 100 - d
+// })
 
 const { vChartRef } = useChartCommonData(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Charts/index.ts

@@ -2,8 +2,8 @@ import Bars from './Bars'
 import Pies from './Pies'
 import Lines from './Lines'
 // import Scatters from './Scatters'
-// import Mores from './Mores'
+import Mores from './Mores'
 // import Maps from './Maps'
 
 // export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps, ...Mores]
-export const ChartList = [...Bars, ...Lines, ...Pies]
+export const ChartList = [...Bars, ...Lines, ...Pies, ...Mores]

src/packages/components/Informations/Texts/TextBarrage/config.ts

@@ -17,6 +17,7 @@ export const FontWeightObject = {
 
 export const option = {
   dataset: '让数字化看得见',
+  showUnit: false,
   fontSize: 32,
   fontColor: '#ffffff',
   fontWeight: 'normal',

src/packages/components/Informations/Texts/TextBarrage/config.vue

@@ -4,6 +4,15 @@
       <setting-item>
         <n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
       </setting-item>
+      <SettingItem>
+        <n-text :depth="3">开启数据时，将会覆盖此文本</n-text>
+      </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.showUnit" size="small" />
+          <n-text>展示单位</n-text>
+        </n-space>
+      </SettingItem>
     </setting-item-box>
   </collapse-item>
 

src/packages/components/Informations/Texts/TextBarrage/index.ts

@@ -9,6 +9,6 @@ export const TextBarrageConfig: ConfigType = {
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
-  chartFrame: ChartFrameEnum.STATIC,
+  chartFrame: ChartFrameEnum.ECHARTS,
   image: 'text_barrage.png'
 }

src/packages/components/Informations/Texts/TextBarrage/index.vue

@@ -2,7 +2,12 @@
   <div class="go-text-box">
     <div class="content">
       <span>
-        {{ option.dataset }}
+        <template v-if="!dataEnable">
+          {{ option.dataset }}
+        </template>
+        <template v-else>
+          {{ dataValue }}{{ option.showUnit ? dataUnit : '' }}
+        </template>
       </span>
     </div>
   </div>
@@ -11,10 +16,11 @@
 <script setup lang="ts">
 import { PropType, toRefs, shallowReactive, watch, computed, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
-import { useChartDataFetch } from '@/hooks'
+import { useChartCommonData } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { option as configOption } from './config'
 import { values } from 'lodash'
+import { resultType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 const props = defineProps({
   chartConfig: {
@@ -30,14 +36,16 @@ const { fontColor, fontSize, letterSpacing, fontWeight, animationTime, animation
 )
 
 const option = shallowReactive({
-  dataset: configOption.dataset
+  dataset: configOption.dataset,
+  showUnit: configOption.showUnit
 })
 
 // 手动更新
 watch(
-  () => props.chartConfig.option.dataset,
-  (newData: any) => {
+  [() => props.chartConfig.option.dataset, () => props.chartConfig.option.showUnit],
+  ([newData, newShowUnit]: [any, boolean]) => {
     option.dataset = newData
+    option.showUnit = newShowUnit
   },
   {
     immediate: true,
@@ -64,20 +72,44 @@ watch(
   }
 )
 
+const dataEnable = ref()
+const dataValue = ref()
+const dataUnit = ref()
+watch(
+  () => props.chartConfig.commonData,
+  newData => {
+    try {
+      const data = newData[newData.currentSource] as Object & { enable: boolean, result: resultType }
+      dataEnable.value = data.enable
+      dataValue.value = data.result.value
+      dataUnit.value = data.result.unit
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
 const transitionDuration = computed(() => {
   return Math.floor((w.value as any) / (animationSpeed.value as any))
 })
 
-// 预览更新
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
-  option.dataset = newData
-})
+// // 预览更新
+// useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+//   option.dataset = newData
+// })
+
+useChartCommonData(props.chartConfig, useChartEditStore)
 </script>
 
 <style lang="scss" scoped>
 @include go('text-box') {
   display: flex;
   align-items: center;
+  overflow: hidden;
   .content {
     width: 100%;
     color: v-bind('fontColor');

src/packages/components/Informations/Texts/TextCommon/config.ts

@@ -28,6 +28,7 @@ export const option = {
   link: '',
   linkHead: 'http://',
   dataset: '我是文本',
+  showUnit: false,
   fontSize: 20,
   fontColor: '#ffffff',
   paddingX: 10,

src/packages/components/Informations/Texts/TextCommon/config.vue

@@ -4,6 +4,15 @@
       <setting-item>
         <n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
       </setting-item>
+      <SettingItem>
+        <n-text :depth="3">开启数据时，将会覆盖此文本</n-text>
+      </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.showUnit" size="small" />
+          <n-text>展示单位</n-text>
+        </n-space>
+      </SettingItem>
     </setting-item-box>
     <setting-item-box name="链接" :alone="true">
       <setting-item>

src/packages/components/Informations/Texts/TextCommon/index.ts

@@ -9,6 +9,6 @@ export const TextCommonConfig: ConfigType = {
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
-  chartFrame: ChartFrameEnum.STATIC,
+  chartFrame: ChartFrameEnum.ECHARTS,
   image: 'text_static.png'
 }

src/packages/components/Informations/Texts/TextCommon/index.vue

@@ -1,18 +1,30 @@
 <template>
   <div class="go-text-box">
     <div class="content">
-      <span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click">{{ option.dataset }}</span>
-      <span style="white-space: pre-wrap" v-else>{{ option.dataset }}</span>
+      <span
+        :style="{cursor: link ? 'pointer' : 'unset'}"
+        style="cursor: pointer; white-space: pre-wrap"
+        @click="link ? click : () => {}"
+      >
+        <template v-if="!dataEnable">
+          {{ option.dataset }}
+        </template>
+        <template v-else>
+          {{ dataValue }}{{ option.showUnit ? dataUnit : '' }}
+        </template>
+      </span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { PropType, toRefs, shallowReactive, watch, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { option as configOption } from './config'
+import { useChartCommonData } from '@/hooks'
+import { resultType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 const props = defineProps({
   chartConfig: {
@@ -39,14 +51,16 @@ const {
 } = toRefs(props.chartConfig.option)
 
 const option = shallowReactive({
-  dataset: configOption.dataset
+  dataset: configOption.dataset,
+  showUnit: configOption.showUnit
 })
 
 // 手动更新
 watch(
-  () => props.chartConfig.option.dataset,
-  (newData: any) => {
+  [() => props.chartConfig.option.dataset, () => props.chartConfig.option.showUnit],
+  ([newData, newShowUnit]: [any, boolean]) => {
     option.dataset = newData
+    option.showUnit = newShowUnit
   },
   {
     immediate: true,
@@ -54,10 +68,33 @@ watch(
   }
 )
 
-// 预览更新
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
-  option.dataset = newData
-})
+const dataEnable = ref()
+const dataValue = ref()
+const dataUnit = ref()
+watch(
+  () => props.chartConfig.commonData,
+  newData => {
+    try {
+      const data = newData[newData.currentSource] as Object & { enable: boolean, result: resultType }
+      dataEnable.value = data.enable
+      dataValue.value = data.result.value
+      dataUnit.value = data.result.unit
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+// // 预览更新
+// useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+//   option.dataset = newData
+// })
+
+useChartCommonData(props.chartConfig, useChartEditStore)
 
 //打开链接
 const click = () => {

src/views/chart/ContentHeader/headerTitle/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <n-space>
+  <n-space :wrap="false">
     <n-icon size="20" :depth="3">
       <fish-icon></fish-icon>
     </n-icon>
-    <n-text @click="handleFocus">
+    <n-text class="text" @click="handleFocus">
       工作空间 -
       <n-button v-show="!focus" secondary size="tiny">
         <span class="title">
@@ -81,6 +81,11 @@ const handleBlur = async () => {
 }
 </script>
 <style lang="scss" scoped>
+.text{
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 .title {
   padding-left: 5px;
   padding-right: 5px;