设备菜单组件及功能菜单组件的修改优化

src/packages/components/Units/Titles/DeviceMenu/config.ts

@@ -0,0 +1,25 @@
+import { PublicConfigClass } from '@/packages/public'
+import { DeviceMenuConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+const option = {
+  list: [
+    '无人机','摄像头','高空瞭望','卫星遥感','小程序'
+  ],
+  selectButton: '',
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = DeviceMenuConfig.key
+  public chartConfig = cloneDeep(DeviceMenuConfig)
+  public option = cloneDeep(option)
+  constructor() {
+    super(); 
+    this.attr.w = 947; 
+    this.attr.h = 168;
+    this.isChildEvent = true
+    this.events.interactConfigEvents = {}
+  }
+}

src/packages/components/Units/Titles/DeviceMenu/config.vue

@@ -0,0 +1,96 @@
+<template>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="默认选中" :alone="true">
+      <n-select v-model:value="optionData.selectButton" :options="selectButtonOptions" size="small" />
+    </SettingItemBox> 
+    <SettingItemBox name="按钮" :alone="true">
+      <div class="button-setting-div" v-for="index in optionData.list.length">
+        <n-input
+          class="button-setting-input"
+          size="small"
+          v-model:value="optionData.list[index-1]"
+          :minlength="1"
+          type="text"
+          placeholder="请输入按钮名称"
+        />
+        <div class="button-setting-del" @click="deleteButton(index-1)">
+          <Icon icon="ic:baseline-delete" size="18px"/>
+        </div>
+      </div>
+      <div class="button-insert-div" @click="insertButton"><Icon icon="material-symbols-light:new-window-sharp" size="18px" style="margin-right: 5px;"/>添加按钮</div>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import Icon from '@/components/Icon/Icon.vue';
+import { computed } from 'vue';
+const props = defineProps({
+  optionData: {
+    type: Object,
+    required: true
+  }
+})
+console.log('config',props)
+const selectButtonOptions = computed(() => {
+  let options = props.optionData.list.map(item => {
+    return {
+      value: item,
+      label: item,
+    }
+  })
+  options.unshift({
+    value: '',
+    label: '不默认选中'
+  })
+  return options
+})
+const insertButton = () => {
+  props.optionData.list.push("")
+}
+const deleteButton = (index) => {
+  props.optionData.list.splice(index,1)
+}
+</script>
+<style lang="scss" scoped>
+.button-setting-div{
+  display: flex;
+  margin-bottom: 10px;
+  .button-setting-input{
+    width: 80%;
+    margin-right: 20px;
+  }
+  .button-setting-del{
+    width: 28px;
+    height: 28px; 
+    background-color: #e2e2e2;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: 0.2s;
+  }
+  .button-setting-del:hover{
+    background-color: #ff4d4f;
+    color: #fff;
+  }
+}
+.button-insert-div{
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: #0960bd;
+  cursor: pointer;
+  user-select: none;
+  transition: 0.2s;
+}
+.button-insert-div:hover{
+  color: #4f99d6
+}
+</style>

src/packages/components/Units/Titles/DeviceMenu/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const DeviceMenuConfig: ConfigType = {
+  key: 'DeviceMenu',
+  chartKey: 'VDeviceMenu',
+  conKey: 'VCDeviceMenu',
+  title: '设备菜单',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'device_menu.png'
+}

src/packages/components/Units/Titles/DeviceMenu/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <div class="button-list-div">
+      <div :class="`button-item ${getClassName(item)}`"
+        v-for="item in list" 
+        @click=changeButton(item)
+      >
+        <div class="button-span">
+          {{ item }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { eventHandlerHook } from '@/hooks/eventHandler.hook';
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+
+const chartEditStore = useChartEditStore();
+
+const props = defineProps({
+  chartConfig: {
+    type: Object,
+    required: true
+  }
+})
+const changeButton = (type) => {
+  props.chartConfig.option.selectButton = type
+  eventHandlerHook(
+    chartEditStore.getComponentList,
+    props.chartConfig.events.interactConfigEvents[type],
+    'click',
+    type,
+  );
+}
+const getClassName = (type) => {
+  let className = ''
+  switch(type){
+    case '无人机':
+      className = 'drone'
+      break
+    case '摄像头':
+      className = 'camera'
+      break
+    case '高空瞭望':
+      className = 'sentry'
+      break
+    case '卫星遥感':
+      className = 'satellite'
+      break
+    default:
+      className = 'app'
+      break
+  }
+  if(props.chartConfig.option.selectButton == type){
+    className = className + '-select'
+  }
+  return className
+}
+
+const { list, selectButton } = props.chartConfig.option
+</script>
+<style lang="scss" scoped>
+.button-list-div{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  .button-item{
+    width: 186px;
+    height: 168px;
+    background-size: 100% 100%;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    margin-right: 5px;
+    .button-span{
+      width: 100%;
+      position: absolute;
+      bottom: 5px;
+      display: flex;
+      justify-content: center;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 20px;
+      color: #F1F8FF;
+      line-height: 28px;
+      letter-spacing: 1px;
+      text-shadow: 0px 1px 4px rgba(34,54,74,0.5);
+    }
+  }
+  .button-item:nth-last-child(1){
+    margin-right: 0px;
+  }
+  .drone{
+    background-image: url('/public/components/DeviceMenu/drone.png');
+  }
+  .drone-select{
+    background-image: url('/public/components/DeviceMenu/drone_select.png');
+  }
+  .camera{
+    background-image: url('/public/components/DeviceMenu/camera.png');
+  }
+  .camera-select{
+    background-image: url('/public/components/DeviceMenu/camera_select.png');
+  }
+  .sentry{
+    background-image: url('/public/components/DeviceMenu/sentry.png');
+  }
+  .sentry-select{
+    background-image: url('/public/components/DeviceMenu/sentry_select.png');
+  }
+  .satellite{
+    background-image: url('/public/components/DeviceMenu/satellite.png');
+  }
+  .satellite-select{
+    background-image: url('/public/components/DeviceMenu/satellite_select.png');
+  }
+  .app{
+    background-image: url('/public/components/DeviceMenu/app.png');
+  }
+  .app-select{
+    background-image: url('/public/components/DeviceMenu/app_select.png');
+  }
+}
+</style>

src/packages/components/Units/Titles/FeatureMenu/config.vue

@@ -11,7 +11,7 @@
           v-model:value="optionData.list[index-1]"
           :minlength="1"
           type="text"
-          placeholder="请输入Id"
+          placeholder="请输入按钮名称"
         />
         <div class="button-setting-del" @click="deleteButton(index-1)">
           <Icon icon="ic:baseline-delete" size="18px"/>
@@ -38,12 +38,17 @@ const props = defineProps({
 })
 console.log('config',props)
 const selectButtonOptions = computed(() => {
-  return props.optionData.list.map(item => {
+  let options = props.optionData.list.map(item => {
     return {
       value: item,
       label: item,
     }
   })
+  options.unshift({
+    value: '',
+    label: '不默认选中'
+  })
+  return options
 })
 const insertButton = () => {
   props.optionData.list.push("")

src/packages/components/Units/Titles/index.ts

@@ -31,6 +31,7 @@ import { UnitsBg02Config } from './UnitsBg02/index';
 import { UnitsBg03Config } from './UnitsBg03/index';
 import { UnitsBg04Config } from './UnitsBg04/index';
 import { FeatureMenuConfig } from './FeatureMenu/index';
+import { DeviceMenuConfig } from './DeviceMenu/index';
 
 
 export default [
@@ -67,4 +68,5 @@ export default [
     UnitsBg03Config,
     UnitsBg04Config,
     FeatureMenuConfig,
+    DeviceMenuConfig
 ];