fix: 组态优化 支持快速输入 默认置底 增加底座

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

@@ -10,7 +10,7 @@ import { GraphConfig } from './Graph/index'
 
 export default [
   // ProcessConfig,
-  RadarConfig,
+  // RadarConfig,
   // FunnelConfig,
   // HeatmapConfig,
   WaterPoloConfig,

src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/config.ts

@@ -14,7 +14,7 @@ export const option = {
   top: 0,
   scale: 1,
   // 展示标题
-  isThereATitleComponet: true,
+  isThereATitleComponet: false,
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType

src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/config.vue

@@ -1,5 +1,21 @@
 <template>
   <CollapseItem name="组态" :expanded="true">
+    <SettingItemBox name="标题">
+      <SettingItem name="如果有标题将展示">
+        <n-space justify="start">
+          <n-switch v-model:value="optionData.isThereATitleComponet" size="small" />
+        </n-space>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="快捷输入" :alone="true">
+      <SettingItem name="输入0,0,1相当于距离顶部0,距离左侧0,缩放为1">
+        <n-input
+          v-model:value="allValue"
+          size="small"
+          placeholder="请输入"
+        ></n-input>
+      </SettingItem>
+    </SettingItemBox>
     <SettingItemBox name="位置">
       <SettingItem name="距离顶部">
         <n-input-number
@@ -18,21 +34,20 @@
       <SettingItem name="缩放">
         <n-input-number
           v-model:value="optionData.scale"
+          step="0.1"
           size="small"
           placeholder="请输入"
         ></n-input-number>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="标题">
-      <SettingItem name="如果有将展示">
-        <n-switch v-model:value="optionData.isThereATitleComponet" size="small" />
-      </SettingItem>
+    <SettingItemBox name="提示" :alone="true">
+      <n-text>在预览页使用alt+滚轮进行缩放</n-text>
     </SettingItemBox>
   </CollapseItem>
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, ref, watch } from 'vue'
 import {
   CollapseItem,
   SettingItemBox,
@@ -46,6 +61,18 @@ const props = defineProps({
     required: true,
   },
 })
+
+const allValue = ref('')
+
+watch(() => allValue.value, v => {
+  v.split(',').forEach((item, i) => {
+    if(!isNaN(Number(item)) && item !== '') {
+      if(i === 0) props.optionData.top = Number(item)
+      else if(i === 1) props.optionData.left = Number(item)
+      else if(i === 2) props.optionData.scale = Number(item)
+    }
+  })
+})
 </script>
 
 <style lang="scss" scoped>

src/packages/components/Decorates/Base/Base/config.ts

@@ -0,0 +1,28 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { BaseConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  // 图片
+  dataset: '',
+  // 适应方式
+  fit: 'fill',
+  // 圆角
+  // borderRadius: 0
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType
+{
+  constructor() {
+    super();
+    this.attr = {
+      ...this.attr,
+      w: 500,
+      h: 500,
+    }
+  }
+  public key = BaseConfig.key
+  public chartConfig = cloneDeep(BaseConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/Base/Base/config.vue

@@ -0,0 +1,62 @@
+<template>
+  <collapse-item name="属性" :expanded="true">
+    <setting-item-box name="样式">
+      <setting-item name="类型">
+        <n-select
+          v-model:value="optionData.fit"
+          size="small"
+          :options="fitList"
+        ></n-select>
+      </setting-item>
+<!--      <setting-item name="圆角">-->
+<!--        <n-input-number-->
+<!--          v-model:value="optionData.borderRadius"-->
+<!--          size="small"-->
+<!--          :min="0"-->
+<!--          placeholder="圆角"-->
+<!--        ></n-input-number>-->
+<!--      </setting-item>-->
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true,
+  },
+})
+
+// 适应类型
+const fitList = [
+  {
+    value: 'fill',
+    label: 'fill'
+  },
+  {
+    value: 'contain',
+    label: 'contain'
+  },
+  {
+    value: 'cover',
+    label: 'cover'
+  },
+  {
+    value: 'scale-down',
+    label: 'scale-down'
+  },
+  {
+    value: 'none',
+    label: 'none'
+  },
+]
+</script>

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '@/packages/components/Decorates/index.d'
+
+export const BaseConfig: ConfigType = {
+  key: 'Base',
+  chartKey: 'VBase',
+  conKey: 'VCBase',
+  title: '底座',
+  category: ChatCategoryEnum.BASE,
+  categoryName: ChatCategoryEnumName.BASE,
+  package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: ''
+}

src/packages/components/Decorates/Base/Base/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div :style="getStyle(borderRadius)">
+    <n-image
+      :object-fit="fit"
+      preview-disabled
+      :src="imageInfo"
+      :fallback-src="requireErrorImg()"
+      :width="w"
+      lazy
+      style="position: absolute;left: 0;width: 100%;height: 100%"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, toRefs } from 'vue'
+import { requireErrorImg } from '@/utils'
+import { CreateComponentType } from '@/packages/index.d'
+import { fetchImages } from "@/packages/index";
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
+
+let imageInfo = ref('')
+// 获取图片
+const fetchImageUrl = async () => {
+  imageInfo.value = await fetchImages(props.chartConfig.chartConfig)
+}
+fetchImageUrl()
+
+const getStyle = (radius: number) => {
+  return {
+    // borderRadius: `${radius}px`,
+    overflow: 'hidden'
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,27 @@
+import { BaseConfig } from './Base/index'
+import { PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
+
+const topbarNames = [
+    'Base1.png',
+    'Base2.png',
+    'Base3.png',
+    'Base4.png',
+    'Base5.png',
+    'Base6.png',
+    'Base7.png',
+    'Base8.png',
+]
+const base = topbarNames.map((name, i) => ({
+    ...BaseConfig,
+    category: ChatCategoryEnum.BASE,
+    categoryName: ChatCategoryEnumName.BASE,
+    package: PackagesCategoryEnum.DECORATES,
+    dataset: name,
+    // 既是缩略图 又是背景图
+    image: name,
+    title: `底座${i + 1}`,
+    redirectComponent: `${BaseConfig.package}/${BaseConfig.category}/${BaseConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
+}))
+
+export default base

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

@@ -3,7 +3,8 @@ export enum ChatCategoryEnum {
   DECORATE = 'Decorates',
   THREE = 'Three',
   MORE = 'Mores',
-  TOPBARS = 'TopBars'
+  TOPBARS = 'TopBars',
+  BASE = 'Base'
 }
 
 export enum ChatCategoryEnumName {
@@ -11,5 +12,6 @@ export enum ChatCategoryEnumName {
   DECORATE = '装饰',
   THREE = '三维',
   MORE = '更多',
-  TOPBARS = '顶栏'
+  TOPBARS = '顶栏',
+  BASE = '底座'
 }

src/packages/components/Decorates/index.ts

@@ -1,8 +1,9 @@
 import Borders from './Borders'
 import TopBars from './TopBars'
+import Base from './Base'
 import Decorates from './Decorates'
 // import Three from './Three'
 import Mores from './Mores'
 
 // export const DecorateList = [...Borders, ...Decorates, ...Three, ...Mores]
-export const DecorateList = [...Borders, ...TopBars, ...Decorates, ...Mores]
+export const DecorateList = [...Borders, ...TopBars, ...Base, ...Decorates, ...Mores]

src/views/chart/ContentCharts/components/ChartsItemBox/index.vue

@@ -128,8 +128,11 @@ const dblclickHandle = async (item: ConfigType) => {
       newComponent.chartConfig.title = item.title
       newComponent.chartConfig.chartFrame = item.chartFrame
     }
+    let isHead = false
+    let isHeadList = ['EngineeringConfig']
+    if(isHeadList.includes(newComponent.chartConfig.key)) isHead = true
     // 添加
-    chartEditStore.addComponentList(newComponent, false, true)
+    chartEditStore.addComponentList(newComponent, isHead, true)
     // 选中
     chartEditStore.setTargetSelectChart(newComponent.id)
     loadingFinish()