Merge branch 'dev_by_ft' into 'main_dev'

feat(src/views/chart): 新增图标，可配置自定义内容弹窗和优化多个摄像头，可以自动切换也可以手动切换

See merge request yunteng/thingskit-view!177

+<template>
+  <div class="smallcircle2"></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.smallcircle2 {
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  opacity: 0.4;
+  background: radial-gradient(circle at center, red 0, blue, #2277b2 100%);
+}
+</style>

@@ -16,8 +16,34 @@ export interface IconOptions {
   pointColor?: string
   pointColor?: string
   dynamicEffect?: IconDynamicEffectEnum[]
   dynamicEffect?: IconDynamicEffectEnum[]
   backgroundColor?: string
   backgroundColor?: string
+  popupConfig: PopupConfig
+  dataset: bodyItem[]
 }
 }
 
 
+interface bodyItem {
+  label: string
+  value: string
+}
+
+interface PopupConfig {
+  borderWidth: number
+  borderHeight: number
+  borderColor: string
+  boxShadowColor: string
+  linearLeftColor: string
+  linearRightColor: string
+  arrowColor: string
+  lineColor: string
+  fontColor: string
+  fontSize: number
+  fontWeight: number
+  fontContent: string
+  labelColor: string
+  valueColor: string
+  placement: string
+}
+
+
 export const option: IconOptions = {
 export const option: IconOptions = {
   icon: 'turangshuifen',
   icon: 'turangshuifen',
   iconColor: '#1C9276',
   iconColor: '#1C9276',
@@ -28,7 +54,30 @@ export const option: IconOptions = {
   pointSize: 4,
   pointSize: 4,
   pointColor: '#9ADED7',
   pointColor: '#9ADED7',
   dynamicEffect: [],
   dynamicEffect: [],
-  backgroundColor: '#082B2A'
+  backgroundColor: '#082B2A',
+  dataset: [
+    { label: '设备：', value: 'xxxxxxxxx设备' },
+    { label: '产品：', value: 'xxxxxxxxx产品' },
+    { label: '位置：', value: 'xxxxxxxxx位置' },
+    { label: '创建时间：', value: '2024-01-01' }
+  ],
+  popupConfig: {
+    borderWidth: 380,
+    borderHeight: 200,
+    borderColor: 'red',
+    boxShadowColor: '#356A82FF',
+    linearLeftColor: '#385391FF',
+    linearRightColor: '#385391FF',
+    arrowColor: '#427FB4',
+    lineColor: '#427FB4',
+    fontColor: '#ffffff',
+    fontSize: 16,
+    fontWeight: 500,
+    fontContent: '我是标题',
+    labelColor: '#3d6e9d',
+    valueColor: '#ffffff',
+    placement: 'top'
+  }
 }
 }
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -42,6 +42,95 @@
       </SettingItem>
       </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
   </CollapseItem>
   </CollapseItem>
+  <CollapseItem name="弹窗配置" expanded>
+    <SettingItemBox name="宽高">
+      <SettingItem name="宽">
+        <NInputNumber
+          v-model:value="optionData.popupConfig.borderWidth"
+          size="small"
+          :step="10"
+          :min="0"
+        ></NInputNumber>
+      </SettingItem>
+      <SettingItem name="高">
+        <NInputNumber
+          v-model:value="optionData.popupConfig.borderHeight"
+          size="small"
+          :step="10"
+          :min="0"
+        ></NInputNumber>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="位置">
+      <SettingItem name="">
+        <NSelect v-model:value="optionData.popupConfig.placement" size="small" :options="placementOptions"> </NSelect>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="颜色">
+      <SettingItem name="边框阴影">
+        <NColorPicker
+          size="small"
+          :modes="['hex']"
+          :actions="['clear']"
+          v-model:value="optionData.popupConfig.boxShadowColor"
+        >
+        </NColorPicker>
+      </SettingItem>
+      <SettingItem name="背景线性渐变左">
+        <NColorPicker size="small" v-model:value="optionData.popupConfig.linearLeftColor"> </NColorPicker>
+      </SettingItem>
+      <SettingItem name="背景线性渐变右">
+        <NColorPicker size="small" v-model:value="optionData.popupConfig.linearRightColor"> </NColorPicker>
+      </SettingItem>
+      <SettingItem name="箭头颜色">
+        <NColorPicker size="small" v-model:value="optionData.popupConfig.arrowColor"> </NColorPicker>
+      </SettingItem>
+      <SettingItem name="线条颜色">
+        <NColorPicker size="small" v-model:value="optionData.popupConfig.lineColor"> </NColorPicker>
+      </SettingItem>
+      <SettingItem name="标题内容">
+        <NInput v-model:value="optionData.popupConfig.fontContent"> </NInput>
+      </SettingItem>
+      <SettingItem name="标题颜色">
+        <NColorPicker size="small" v-model:value="optionData.popupConfig.fontColor"> </NColorPicker>
+      </SettingItem>
+      <SettingItem name="标题加粗">
+        <NInputNumber
+          v-model:value="optionData.popupConfig.fontWeight"
+          size="small"
+          :step="100"
+          :min="0"
+        ></NInputNumber>
+      </SettingItem>
+      <SettingItem name="内容键文本颜色">
+        <NColorPicker size="small" v-model:value="optionData.popupConfig.labelColor"> </NColorPicker>
+      </SettingItem>
+      <SettingItem name="内容值文本颜色">
+        <NColorPicker size="small" v-model:value="optionData.popupConfig.valueColor"> </NColorPicker>
+      </SettingItem>
+    </SettingItemBox>
+    <template v-for="(item, index) in optionData.dataset" :key="index">
+      <setting-item-box name="内容键" :alone="true">
+        <setting-item>
+          <NInput v-model:value="item.label"> </NInput>
+        </setting-item>
+      </setting-item-box>
+      <setting-item-box name="内容值" :alone="true">
+        <setting-item>
+          <NInput v-model:value="item.value"> </NInput>
+        </setting-item>
+      </setting-item-box>
+      <n-button size="small" @click="optionData.dataset.splice(index, 1)"> - </n-button>
+    </template>
+    <n-button
+      style="margin-left: 10px"
+      v-if="optionData.dataset.length < 8"
+      size="small"
+      @click="optionData.dataset.push({ label: '', value: '' })"
+    >
+      +
+    </n-button>
+  </CollapseItem>
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
@@ -79,4 +168,24 @@ const getDynamicEffectOptions = computed<SelectOption[]>(() => {
   ]
   ]
 
 
 })
 })
+
+//native-ui 组件popover内置弹窗位置，不需要通过枚举方式
+const placementOptions: SelectOption[] = [
+  {
+    label: '顶部',
+    value: 'top'
+  },
+  {
+    label: '右边',
+    value: 'right'
+  },
+  {
+    label: '左边',
+    value: 'left'
+  },
+  {
+    label: '底部',
+    value: 'bottom'
+  }
+]
 </script>
 </script>

@@ -8,7 +8,7 @@ export const PickIconConfig: ConfigType = {
   key,
   key,
   chartKey,
   chartKey,
   conKey,
   conKey,
-  title: '图标',
+  title: '图标（可配置弹窗）',
   category: ChatCategoryEnum.MORE,
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
   package: PackagesCategoryEnum.DECORATES,

 <script lang="ts" setup>
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed, PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import { option } from './config'
 import { option } from './config'
 import SvgBorder from './SvgBorder.vue';
 import SvgBorder from './SvgBorder.vue';
@@ -17,14 +17,144 @@ const size = computed(() => {
   return Math.min(w, h) / 2
   return Math.min(w, h) / 2
 })
 })
 
 
-
+const { popupConfig, dataset } = toRefs(props.chartConfig.option)
 </script>
 </script>
 
 
 <template>
 <template>
-  <section>
-    <SvgBorder :option="chartConfig.option">
-      <SvgIcon :style="{ color: chartConfig.option.iconColor }" :size="size" :name="chartConfig.option.icon!"
-        prefix="iconfont" />
-    </SvgBorder>
+ <section>
+    <n-popover :placement="popupConfig.placement" trigger="click" raw>
+      <template #trigger>
+        <SvgBorder :option="chartConfig.option">
+          <SvgIcon
+            :style="{ color: chartConfig.option.iconColor }"
+            :size="size"
+            :name="chartConfig.option.icon!"
+            prefix="iconfont"
+          />
+        </SvgBorder>
+      </template>
+      <div
+        style="transform-origin: inherit"
+        :style="`width:${popupConfig.borderWidth}px;
+         height: ${popupConfig.borderHeight}px; 
+         box-shadow: 0 0 10px 10px ${popupConfig.boxShadowColor};
+         background:linear-gradient(to right, ${popupConfig.linearLeftColor} , ${popupConfig.linearRightColor});
+         `"
+      >
+        <div class="popup-body">
+          <div class="popup-arrow-right" :style="`border-color:${popupConfig.arrowColor}`"></div>
+          <div class="popup-header-content">
+            <p
+              class="header-title"
+              :style="`color:${popupConfig.fontColor};font-size:${popupConfig.fontSize}px;font-weight:${popupConfig.fontWeight}`"
+            >
+              {{ popupConfig.fontContent }}
+            </p>
+            <div class="header-content-graphical">
+              <div class="graphical-circle-left"><Circle /></div>
+              <div class="graphical-line">
+                <div class="line-left" :style="`background-color:${popupConfig.lineColor}`"></div>
+                <div class="line-center" :style="`background-color:${popupConfig.lineColor}`"></div>
+                <div class="line-right" :style="`background-color:${popupConfig.lineColor}`"></div>
+              </div>
+              <div class="graphical-circle-right"><Circle /></div>
+            </div>
+          </div>
+        </div>
+        <div class="content-body">
+          <div class="body" v-for="(item, index) in dataset" :key="index">
+            <span :style="`color:${popupConfig.labelColor};`">{{ item.label }}</span>
+            <span :style="`color:${popupConfig.valueColor};`">{{ item.value }}</span>
+          </div>
+        </div>
+      </div>
+    </n-popover>
   </section>
   </section>
 </template>
 </template>
+
+<style lang="scss" scoped>
+@mixin base-text-ellipsis() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+}
+.popup-body {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  .popup-arrow-right {
+    position: absolute;
+    top: 15px;
+    left: 10px;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    width: 7px;
+    height: 7px;
+    transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+  }
+  .popup-header-content {
+    margin: 23px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    .header-title {
+      @include base-text-ellipsis;
+    }
+    .header-content-graphical {
+      display: flex;
+      align-items: center;
+      .graphical-circle-left {
+        position: relative;
+        left: -2px;
+      }
+      .graphical-line {
+        display: flex;
+        .line-left {
+          width: 115px;
+          height: 2px;
+          position: relative;
+        }
+        .line-center {
+          width: 35px;
+          height: 2px;
+          transform: rotateZ(145deg);
+          position: absolute;
+          top: 44px;
+          left: 146px;
+        }
+        .line-right {
+          width: 50px;
+          height: 2px;
+          position: absolute;
+          top: 34px;
+          left: 178px;
+        }
+      }
+      .graphical-circle-right {
+        position: absolute;
+        top: 29px;
+        left: 231px;
+      }
+    }
+  }
+}
+.content-body {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: -10px 0;
+  .body {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 27px;
+    margin-left: 15px;
+    margin-top: 1px;
+  }
+}
+</style>

@@ -9,6 +9,7 @@ export enum sourceTypeEnum {
 }
 }
 
 
 export const option = {
 export const option = {
+  autoSwitch: false,
   dataset: [
   dataset: [
     {
     {
       byIdUrl: '', //通过接口获取的url
       byIdUrl: '', //通过接口获取的url
@@ -18,7 +19,7 @@ export const option = {
     }
     }
   ] as any,
   ] as any,
   // 自动播放的间隔（ms）
   // 自动播放的间隔（ms）
-  interval: 5000,
+  interval: 2000,
   autoplay: true,
   autoplay: true,
   effect: 'slide',
   effect: 'slide',
   displayMode: 'singleGrid'
   displayMode: 'singleGrid'

 <template>
 <template>
   <CollapseItem name="播放器配置" :expanded="true">
   <CollapseItem name="播放器配置" :expanded="true">
+    <setting-item-box name="开启切换" :alone="true">
+      <setting-item>
+        <n-switch v-model:value="optionData.autoSwitch" size="small"></n-switch>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="间隔时长" :alone="true">
+      <setting-item>
+        <n-input-number v-model:value="optionData.interval" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
     <template v-for="(item, index) in optionData.dataset" :key="index">
     <template v-for="(item, index) in optionData.dataset" :key="index">
       <setting-item-box name="源类型" :alone="true">
       <setting-item-box name="源类型" :alone="true">
         <setting-item>
         <setting-item>

@@ -37,6 +37,8 @@ const isShowSvg = ref(false)
 
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)
 
 
+const { autoSwitch, interval } = toRefs(props.chartConfig.option)
+
 const option = shallowReactive({
 const option = shallowReactive({
   dataset: configOption.dataset
   dataset: configOption.dataset
 })
 })
@@ -45,8 +47,6 @@ const cameraRef = ref<InstanceType<typeof CameraItem>>()
 
 
 let initial = ref(0)
 let initial = ref(0)
 
 
-let interval = ref(2500)
-
 const computedFunc = (initial: number, source: any) => {
 const computedFunc = (initial: number, source: any) => {
   if (initial < 0) initial = 0
   if (initial < 0) initial = 0
   if (Array.isArray(source)) {
   if (Array.isArray(source)) {
@@ -130,10 +130,12 @@ let root = ref(null)
 
 
 onMounted(() => {
 onMounted(() => {
   clearInterval(timer)
   clearInterval(timer)
-  autoPlay()
   const box: any = root.value
   const box: any = root.value
   box.onmouseenter = () => clearInterval(timer)
   box.onmouseenter = () => clearInterval(timer)
-  box.onmouseleave = () => autoPlay()
+  if (autoSwitch.value) {
+    autoPlay()
+    box.onmouseleave = () => autoPlay()
+  }
 })
 })
 
 
 // 点击左右按钮切换图片
 // 点击左右按钮切换图片