组件封装修改
userName
commit
006d754f83
15
src/App.vue
15
src/App.vue
|
|
@ -1,8 +1,12 @@
|
|||
<template>
|
||||
<ConfigProvider :locale="getAntdLocale" :theme="themeConfig">
|
||||
<AppProvider>
|
||||
<RouterView />
|
||||
</AppProvider>
|
||||
<NConfigProvider
|
||||
:theme="darkNTheme"
|
||||
>
|
||||
<AppProvider>
|
||||
<RouterView />
|
||||
</AppProvider>
|
||||
</NConfigProvider>
|
||||
</ConfigProvider>
|
||||
</template>
|
||||
|
||||
|
|
@ -15,6 +19,11 @@
|
|||
import { useDarkModeTheme } from '@/hooks/setting/useDarkModeTheme';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import { computed } from 'vue';
|
||||
import { NConfigProvider } from 'naive-ui'
|
||||
import { useDarkThemeHook, useThemeOverridesHook, useCode, useLang } from '@/hooks'
|
||||
|
||||
// 暗黑主题
|
||||
const darkNTheme = useDarkThemeHook()
|
||||
|
||||
// support Multi-language
|
||||
const { getAntdLocale } = useLocale();
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
|
|
@ -3,6 +3,7 @@ import { darkTheme, GlobalThemeOverrides } from 'naive-ui'
|
|||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
import { borderRadius } from '@/settings/designSetting'
|
||||
import { alpha, lighten } from '@/utils'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
|
||||
/**
|
||||
* * 设置全局主题
|
||||
|
|
@ -45,6 +46,6 @@ export const useThemeOverridesHook = () => {
|
|||
|
||||
// 返回暗黑主题
|
||||
export const useDarkThemeHook = () => {
|
||||
const designStore = useDesignStore()
|
||||
return computed(() => (designStore.getDarkTheme ? darkTheme : undefined))
|
||||
const appStore = useAppStore()
|
||||
return computed(() => (appStore.getDarkMode == 'dark' ? darkTheme : undefined))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,9 @@
|
|||
import { TableListConfig } from './TableList'
|
||||
import { TableScrollBoardConfig } from './TableScrollBoard'
|
||||
import { TablesBasicConfig } from "./TablesBasic/index";
|
||||
import { GeneralHeadConfig } from "./GeneralHead/index";
|
||||
import { ModalHeadConfig } from "./ModalHead/index";
|
||||
import { MoreButtonConfig } from "./MoreButton/index";
|
||||
import { WeiXingYaoGanConfig } from "./WeiXingYaoGan/index";
|
||||
import { XianSuoShangBaoConfig } from "./XianSuoShangBao/index";
|
||||
import { MeiRiShangBaoConfig } from "./MeiRiShangBao/index";
|
||||
|
||||
import { ModalFrameConfig } from "./ModalFrame/index";
|
||||
import { ModalFrameCloseConfig } from "./ModalFrameClose/index";
|
||||
import { ModalButtonConfig } from "./ModalButton/index";
|
||||
import { ModalTimeLineConfig } from "./ModalTimeLine/index";
|
||||
|
||||
|
||||
export default [
|
||||
TableListConfig,
|
||||
TableScrollBoardConfig,
|
||||
TablesBasicConfig,
|
||||
GeneralHeadConfig,
|
||||
ModalHeadConfig,
|
||||
MoreButtonConfig,
|
||||
WeiXingYaoGanConfig,
|
||||
XianSuoShangBaoConfig,
|
||||
MeiRiShangBaoConfig,
|
||||
// ModalFrameConfig,
|
||||
ModalFrameCloseConfig,
|
||||
ModalButtonConfig,
|
||||
ModalTimeLineConfig
|
||||
];
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ export const GeneralHeadConfig: ConfigType = {
|
|||
chartKey: 'VGeneralHead',
|
||||
conKey: 'VCGeneralHead',
|
||||
title: '组件标题栏',
|
||||
category: ChatCategoryEnum.TABLE,
|
||||
categoryName: ChatCategoryEnumName.TABLE,
|
||||
package: PackagesCategoryEnum.TABLES,
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'GeneralHead.png'
|
||||
}
|
||||
|
|
@ -6,9 +6,9 @@ export const MeiRiShangBaoConfig: ConfigType = {
|
|||
chartKey: 'VMeiRiShangBao',
|
||||
conKey: 'VCMeiRiShangBao',
|
||||
title: '每日上报数量统计',
|
||||
category: ChatCategoryEnum.TABLE,
|
||||
categoryName: ChatCategoryEnumName.TABLE,
|
||||
package: PackagesCategoryEnum.TABLES,
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'MeiRiShangBao.png'
|
||||
}
|
||||
|
|
@ -6,9 +6,9 @@ export const ModalButtonConfig: ConfigType = {
|
|||
chartKey: 'VModalButton',
|
||||
conKey: 'VCModalButton',
|
||||
title: '重复报警弹窗按钮',
|
||||
category: ChatCategoryEnum.TABLE,
|
||||
categoryName: ChatCategoryEnumName.TABLE,
|
||||
package: PackagesCategoryEnum.TABLES,
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'ModalButton.png'
|
||||
}
|
||||
|
|
@ -6,9 +6,9 @@ export const ModalFrameConfig: ConfigType = {
|
|||
chartKey: 'VModalFrame',
|
||||
conKey: 'VCModalFrame',
|
||||
title: '重复报警弹窗框架',
|
||||
category: ChatCategoryEnum.TABLE,
|
||||
categoryName: ChatCategoryEnumName.TABLE,
|
||||
package: PackagesCategoryEnum.TABLES,
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'ModalFrame.png'
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="ModalFrame">
|
||||
<n-modal v-model:show="showModal">
|
||||
<Frame />
|
||||
<n-modal v-model:show="option.showModal">
|
||||
<Frame />
|
||||
</n-modal>
|
||||
</div>
|
||||
|
|
@ -6,9 +6,9 @@ export const ModalFrameCloseConfig: ConfigType = {
|
|||
chartKey: 'VModalFrameClose',
|
||||
conKey: 'VCModalFrameClose',
|
||||
title: '重复报警弹窗关闭按钮',
|
||||
category: ChatCategoryEnum.TABLE,
|
||||
categoryName: ChatCategoryEnumName.TABLE,
|
||||
package: PackagesCategoryEnum.TABLES,
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'ModalFrameClose.png'
|
||||
}
|
||||
|
|
@ -6,9 +6,9 @@ export const ModalHeadConfig: ConfigType = {
|
|||
chartKey: 'VModalHead',
|
||||
conKey: 'VCModalHead',
|
||||
title: '重复报警弹窗内部组件标题栏',
|
||||
category: ChatCategoryEnum.TABLE,
|
||||
categoryName: ChatCategoryEnumName.TABLE,
|
||||
package: PackagesCategoryEnum.TABLES,
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'ModalHead.png'
|
||||
}
|
||||
|
|
@ -6,9 +6,9 @@ export const ModalTimeLineConfig: ConfigType = {
|
|||
chartKey: 'VModalTimeLine',
|
||||
conKey: 'VCModalTimeLine',
|
||||
title: '重复报警弹窗时间线',
|
||||
category: ChatCategoryEnum.TABLE,
|
||||
categoryName: ChatCategoryEnumName.TABLE,
|
||||
package: PackagesCategoryEnum.TABLES,
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'ModalTimeLine.png'
|
||||
}
|
||||
|
|
@ -82,8 +82,8 @@
|
|||
>
|
||||
<n-image
|
||||
preview-disabled
|
||||
:object-fit="option.dataset.fit"
|
||||
:src="item.imageurl"
|
||||
:object-fit="option.dataset.imagefit"
|
||||
:width="`${option.dataStyle.imagewidth}`"
|
||||
:height="`${option.dataStyle.imageheight}`"
|
||||
lazy
|
||||
|
|
@ -159,4 +159,9 @@
|
|||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
video {
|
||||
display: block;
|
||||
object-fit: v-bind('option.dataStyle.videofit');
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,9 +6,9 @@ export const MoreButtonConfig: ConfigType = {
|
|||
chartKey: 'VMoreButton',
|
||||
conKey: 'VCMoreButton',
|
||||
title: '更多按钮',
|
||||
category: ChatCategoryEnum.TABLE,
|
||||
categoryName: ChatCategoryEnumName.TABLE,
|
||||
package: PackagesCategoryEnum.TABLES,
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'MoreButton.png'
|
||||
}
|
||||
|
|
@ -6,9 +6,9 @@ export const WeiXingYaoGanConfig: ConfigType = {
|
|||
chartKey: 'VWeiXingYaoGan',
|
||||
conKey: 'VCWeiXingYaoGan',
|
||||
title: '卫星遥感信息',
|
||||
category: ChatCategoryEnum.TABLE,
|
||||
categoryName: ChatCategoryEnumName.TABLE,
|
||||
package: PackagesCategoryEnum.TABLES,
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'WeiXingYaoGan.png'
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { WuRenJiFeiXingShuJuConfig } from './index'
|
||||
import dataJson from './data.json'
|
||||
|
||||
const { source } = dataJson;
|
||||
|
||||
export const option = {
|
||||
dataset: source,
|
||||
dataStyle: {
|
||||
backgroud: '#FFFFFF00',
|
||||
margintop: 15,
|
||||
marginleft: 20,
|
||||
gap: 16,
|
||||
|
||||
topMarginTop: 5,
|
||||
iconSize: 45,
|
||||
iconX: 12,
|
||||
iconY: 12,
|
||||
topWidth: 80,
|
||||
topHeight: 80,
|
||||
|
||||
bottomFontColor1: '#A4F9AB',
|
||||
bottomFontSize1: 20,
|
||||
bottomFontColor2: '#FFFFFF',
|
||||
bottomFontSize2: 12,
|
||||
bottomFontColor3: '#FFFFFF',
|
||||
bottomFontSize3: 12,
|
||||
lineColor: '#A4F9AB',
|
||||
bottomMarginTop: 0,
|
||||
bottomWidth: 80,
|
||||
bottomHeight: 120,
|
||||
}
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = WuRenJiFeiXingShuJuConfig.key
|
||||
public attr = { ...chartInitConfig, w: 400, h: 225, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(WuRenJiFeiXingShuJuConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<template>
|
||||
<CollapseItem name="数据设置" :expanded="true">
|
||||
<SettingItemBox name="主题设置">
|
||||
<SettingItem name="背景颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.backgroud"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="上方边距">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.margintop"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="左侧边距">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.marginleft"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="组件间隔">
|
||||
<n-input-number v-model:value="optionData.dataStyle.gap" min="0" type="text" size="small" />
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="上方组件设置">
|
||||
<SettingItem name="上方距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.topMarginTop"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="图标大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.iconSize"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="图标横坐标位置">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.iconX"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="图标纵坐标位置">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.iconY"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="组件宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.topWidth"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="组件高度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.topHeight"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="下方组件设置">
|
||||
<SettingItem name="数量字体颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.bottomFontColor1"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="数量字体大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.bottomFontSize1"
|
||||
:min="0"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="单位字体颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.bottomFontColor2"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="单位字体大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.bottomFontSize2"
|
||||
:min="0"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题字体颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.bottomFontColor3"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题字体大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.bottomFontSize3"
|
||||
:min="0"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="横线颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.lineColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="距离上方组件的距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.bottomMarginTop"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem name="组件宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.bottomWidth"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="组件高度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.bottomHeight"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, watch, ref } from 'vue';
|
||||
import { option } from './config';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
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>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"source": [
|
||||
{
|
||||
"icon": "01",
|
||||
"num": "5463",
|
||||
"unit": "个",
|
||||
"title": "飞行总次数"
|
||||
},
|
||||
{
|
||||
"icon": "02",
|
||||
"num": "7267",
|
||||
"unit": "h",
|
||||
"title": "飞行总时长"
|
||||
},
|
||||
{
|
||||
"icon": "03",
|
||||
"num": "2463",
|
||||
"unit": "万km",
|
||||
"title": "飞行总里程"
|
||||
},
|
||||
{
|
||||
"icon": "04",
|
||||
"num": "1307",
|
||||
"unit": "个",
|
||||
"title": "无人机总数"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const WuRenJiFeiXingShuJuConfig: ConfigType = {
|
||||
key: 'WuRenJiFeiXingShuJu',
|
||||
chartKey: 'VWuRenJiFeiXingShuJu',
|
||||
conKey: 'VCWuRenJiFeiXingShuJu',
|
||||
title: '无人机飞行数据',
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'WuRenJiFeiXingShuJu.png'
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<div class="WuRenJiFeiXingShuJu">
|
||||
<div class="list">
|
||||
<div v-for="item in option.dataset" :key="item.key">
|
||||
<div class="item">
|
||||
<Top class="top" :item="item" :dataStyle="option.dataStyle" />
|
||||
<Bottom class="bottom" :item="item" :dataStyle="option.dataStyle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
|
||||
import { CreateComponentType } from '@/packages/index.d';
|
||||
import { icon } from '@/plugins';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import Top from './svg/top.vue';
|
||||
import Bottom from './svg/bottom.vue';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr);
|
||||
|
||||
const option = reactive({
|
||||
dataset: props.chartConfig.option.dataset,
|
||||
dataStyle: props.chartConfig.option.dataStyle,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.WuRenJiFeiXingShuJu {
|
||||
overflow-y: auto;
|
||||
background: v-bind('`${option.dataStyle.backgroud}`');
|
||||
width: v-bind('`${w}px`');
|
||||
height: v-bind('`${h}px`');
|
||||
}
|
||||
|
||||
.WuRenJiFeiXingShuJu::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.WuRenJiFeiXingShuJu {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
gap: v-bind('`${option.dataStyle.gap}px`');
|
||||
margin-top: v-bind('`${option.dataStyle.margintop}px`');
|
||||
margin-left: v-bind('`${option.dataStyle.marginleft}px`');
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.top {
|
||||
margin-top: v-bind('`${option.dataStyle.topMarginTop}px`');
|
||||
width: v-bind('`${option.dataStyle.topWidth}px`');
|
||||
height: v-bind('`${option.dataStyle.topHeight}px`');
|
||||
}
|
||||
.bottom {
|
||||
margin-top: v-bind('`${option.dataStyle.bottomMarginTop}px`');
|
||||
width: v-bind('`${option.dataStyle.bottomWidth}px`');
|
||||
height: v-bind('`${option.dataStyle.bottomHeight}px`');
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="43px" height="43px" viewBox="0 0 43 43" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
|
||||
<stop stop-color="#B8FDB4" offset="0%"></stop>
|
||||
<stop stop-color="#60EC8D" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<path
|
||||
d="M10.9626524,13.3304532 C11.3197125,13.1243044 11.539541,12.7432911 11.539541,12.3309937 L11.539541,1.946999 C11.5374517,1.57376524 11.354943,1.22459799 11.0496853,1.00982943 C10.7444276,0.795060873 10.3541343,0.741224873 10.0021329,0.86533289 C3.04517243,3.32754998 -1.08928183,10.4822778 0.251273414,17.7393242 C0.319529018,18.107955 0.562633287,18.4204408 0.903157524,18.5772549 C1.05438224,18.6479719 1.21935977,18.6844147 1.38630172,18.6839832 C1.58880838,18.6839832 1.78776893,18.6308362 1.96319031,18.5296616 L10.9626524,13.3304532 Z M9.23198659,3.69497144 L9.23198659,11.6646874 L2.32663013,15.6495453 C2.30932347,15.4317699 2.30932347,15.2125522 2.30932347,14.9991034 C2.31349764,10.2307443 4.98650358,5.86594831 9.23198659,3.69497144 Z M29.999988,14.9991034 C30.0023193,21.7681561 25.4705044,27.699965 18.9389252,29.4771966 C12.407346,31.2544282 5.49477434,28.4366176 2.06703026,22.5996106 C1.91003062,22.3347072 1.86543841,22.0180357 1.94317846,21.7200773 C2.02091851,21.422119 2.21453964,21.1675995 2.48094783,21.013167 L13.8470953,14.3976971 L13.8470953,1.15377719 C13.8470953,0.516563642 14.363659,0 15.0008725,0 C20.3269097,0.00271753692 25.2524528,2.82829093 27.9433681,7.4245562 C27.9592325,7.44763174 27.9736548,7.47070728 27.988077,7.49522505 C28.0024992,7.51974281 28.0169214,7.54858724 28.0299014,7.57454723 C29.3240379,9.83475067 30.0032902,12.3946269 29.999988,14.9991034 Z"
|
||||
id="path-2"></path>
|
||||
<filter x="-25.0%" y="-25.0%" width="150.0%" height="150.0%" filterUnits="objectBoundingBox" id="filter-3">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.517647059 0 0 0 0 1 0 0 0 0 0.470588235 0 0 0 0.5 0" type="matrix"
|
||||
in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1538, -846)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(46, 88)">
|
||||
<g id="标题模块--右侧1" transform="translate(1450, 684)">
|
||||
<g id="a" transform="translate(28.5, 60)">
|
||||
<g id="1" transform="translate(0.5, 0.5)">
|
||||
<g id="Panzer" transform="translate(13.5, 14.5)">
|
||||
<g id="编组-9" transform="translate(0.5, 0.0159)">
|
||||
<rect id="矩形" x="0" y="0" width="42" height="42"></rect>
|
||||
<g id="chart-pie-slice-fill" transform="translate(6, 6)" fill-rule="nonzero">
|
||||
<g id="形状">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-3)"
|
||||
xlink:href="#path-2"></use>
|
||||
<use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -0,0 +1,43 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="43px" height="43px" viewBox="0 0 43 43" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
|
||||
<stop stop-color="#B8FDB4" offset="0%"></stop>
|
||||
<stop stop-color="#68EE91" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<path
|
||||
d="M26.5323394,10.3942424 C26.5323394,9.43784568 27.3076521,8.66253293 28.2640488,8.66253293 C29.2204456,8.66253293 29.9957583,9.43784568 29.9957583,10.3942424 C29.9957583,11.3506392 29.2204456,12.1259519 28.2640488,12.1259519 C27.3076521,12.1259519 26.5323394,11.3506392 26.5323394,10.3942424 Z M24.8006299,6.93082343 C25.7570266,6.93082343 26.5323394,6.15551068 26.5323394,5.19911394 C26.5323394,4.24271719 25.7570266,3.46740444 24.8006299,3.46740444 C23.8442331,3.46740444 23.0689204,4.24271719 23.0689204,5.19911394 C23.0689204,6.15551068 23.8442331,6.93082343 24.8006299,6.93082343 Z M28.9365294,15.0121344 C28.3013941,14.9597558 27.7439519,15.4319346 27.6911416,16.0670341 C27.116192,22.7834987 21.4000376,27.8843162 14.6617,27.6938727 C7.92336235,27.5034291 2.50442805,22.087904 2.30974394,15.3496876 C2.11505982,8.61147112 7.21227903,2.89210776 13.9283804,2.31293145 C14.5659782,2.26032962 15.0402112,1.70081225 14.9876094,1.06321443 C14.9350075,0.425616606 14.3754902,-0.0486163577 13.7378924,0.00398545321 C5.80256263,0.686552266 -0.221520462,7.44249368 0.00625017976,15.4038677 C0.234020821,23.3652417 6.63450211,29.765723 14.5958761,29.9934936 C22.5572501,30.2212643 29.3131915,24.1971812 29.9957583,16.2618514 C30.022088,15.9554336 29.9250671,15.6511755 29.7262153,15.4165629 C29.5273635,15.1819503 29.2431193,15.0363779 28.9365294,15.0121344 Z M14.9876094,4.62187744 C20.7259899,4.62187744 25.3778664,9.27375394 25.3778664,15.0121344 C25.3778664,20.7505149 20.7259899,25.4023914 14.9876094,25.4023914 C9.24922891,25.4023914 4.59735241,20.7505149 4.59735241,15.0121344 C4.60371486,9.27639142 9.25186639,4.62823989 14.9876094,4.62187744 Z M13.8331364,15.0121344 C13.8331364,15.6497322 14.3500116,16.1666074 14.9876094,16.1666074 L21.9144474,16.1666074 C22.5520452,16.1666074 23.0689204,15.6497322 23.0689204,15.0121344 C23.0689204,14.3745366 22.5520452,13.8576614 21.9144474,13.8576614 L16.1420824,13.8576614 L16.1420824,8.08529643 C16.1420824,7.4476986 15.6252072,6.93082343 14.9876094,6.93082343 C14.3500116,6.93082343 13.8331364,7.4476986 13.8331364,8.08529643 L13.8331364,15.0121344 Z M19.6055014,3.46740444 C20.5618981,3.46740444 21.3372109,2.69209169 21.3372109,1.73569495 C21.3372109,0.779298203 20.5618981,0.00398545321 19.6055014,0.00398545321 C18.6491046,0.00398545321 17.8737919,0.779298203 17.8737919,1.73569495 C17.8737919,2.69209169 18.6491046,3.46740444 19.6055014,3.46740444 Z"
|
||||
id="path-2"></path>
|
||||
<filter x="-25.0%" y="-25.0%" width="150.0%" height="150.0%" filterUnits="objectBoundingBox" id="filter-3">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.517647059 0 0 0 0 1 0 0 0 0 0.470588235 0 0 0 0.45098877 0"
|
||||
type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1628, -846)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(46, 88)">
|
||||
<g id="标题模块--右侧1" transform="translate(1450, 684)">
|
||||
<g id="a" transform="translate(119, 60.5)">
|
||||
<g id="编组-6" transform="translate(0, 0.5)">
|
||||
<g id="编组-11" transform="translate(14, 14.0159)">
|
||||
<rect id="矩形" x="0" y="0" width="42" height="42"></rect>
|
||||
<g id="clock-countdown-fill" transform="translate(5, 5)" fill-rule="nonzero">
|
||||
<g id="形状">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-3)"
|
||||
xlink:href="#path-2"></use>
|
||||
<use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
|
|
@ -0,0 +1,30 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="43px" height="43px" viewBox="0 0 43 43" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#B7FCB3" offset="0%"></stop>
|
||||
<stop stop-color="#69EE91" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1718, -846)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(46, 88)">
|
||||
<g id="标题模块--右侧1" transform="translate(1450, 684)">
|
||||
<g id="a" transform="translate(209, 60.5)">
|
||||
<g id="编组-6" transform="translate(0, 0.5)">
|
||||
<g id="编组-14" transform="translate(14, 14.0159)">
|
||||
<rect id="矩形" x="0" y="0" width="42" height="42"></rect>
|
||||
<path
|
||||
d="M22.4403522,10.9841347 C29.9970401,11.4524749 36.0313601,17.486645 36.5,25.0419841 L33.7245785,25.0419841 C33.2052363,25.0419841 32.7842263,25.4629941 32.7842263,25.9823363 C32.7842263,26.5016785 33.2052363,26.9226885 33.7245785,26.9226885 L36.5,26.9226885 C36.4268981,28.1012262 36.2183717,29.242747 35.8897671,30.3319012 L7.1102329,30.3319012 C6.78162835,29.242747 6.57310192,28.1012262 6.5,26.9226885 L9.27542151,26.9226885 C9.79013388,26.9161905 10.2039772,26.4970897 10.2039772,25.9823363 C10.2039772,25.4675829 9.79013388,25.0484821 9.27542151,25.0419841 L6.5,25.0419841 C6.96863993,17.486645 13.0029599,11.4526248 20.5596478,10.9841347 L20.5596478,13.7577578 C20.5596478,14.2771 20.9806578,14.69811 21.5,14.69811 C22.0193422,14.69811 22.4403522,14.2771 22.4403522,13.7577578 L22.4403522,10.9841347 Z M29.9591233,17.5230632 C29.9591233,17.5230632 27.3551219,19.0377897 24.7345382,20.6284916 L24.1929606,20.9582145 C22.0324935,22.2776668 19.9828843,23.5811959 19.5107156,24.0532992 C18.4288123,25.1352025 18.4288123,26.8894176 19.5107156,27.9714708 C20.592619,29.0533742 22.346834,29.0533742 23.4288872,27.9714708 C23.9009905,27.4993022 25.2045197,25.449693 26.523972,23.2892258 L26.8536948,22.7476482 C28.4443967,20.1270645 29.9591233,17.5230632 29.9591233,17.5230632 Z"
|
||||
id="形状结合" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.7 KiB |
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<div>
|
||||
<svg
|
||||
:width="props.dataStyle.bottomWidth"
|
||||
:height="props.dataStyle.bottomHeight"
|
||||
:viewBox="`0 0 ${props.dataStyle.bottomWidth} ${props.dataStyle.bottomHeight}`"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
x1="-1.04083409e-15%"
|
||||
y1="68.6506732%"
|
||||
x2="100%"
|
||||
y2="68.6506732%"
|
||||
id="linearGradient-1"
|
||||
>
|
||||
<stop stop-color="#337D4E" offset="0%"></stop>
|
||||
<stop stop-color="#2D593B" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-2">
|
||||
<stop stop-color="#6FEF94" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#A8F8C6" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g
|
||||
id="监测平台"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
opacity="0.308761"
|
||||
>
|
||||
<g
|
||||
id="林业防火-智感-无人机实时画面-切图版"
|
||||
transform="translate(-1524, -908)"
|
||||
fill="url(#linearGradient-1)"
|
||||
stroke="url(#linearGradient-2)"
|
||||
>
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(46, 88)">
|
||||
<g id="标题模块--右侧1" transform="translate(1450, 684)">
|
||||
<g id="a" transform="translate(28.5, 60)">
|
||||
<g id="矩形-3" transform="translate(0.5, 77.5)">
|
||||
<rect
|
||||
id="矩形"
|
||||
transform="translate(35, 48) rotate(90) translate(-35, -48)"
|
||||
x="-12.5"
|
||||
y="13.5"
|
||||
width="95"
|
||||
height="69"
|
||||
></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<text
|
||||
x="45%"
|
||||
y="30"
|
||||
text-anchor="middle"
|
||||
:fill="props.dataStyle.bottomFontColor1"
|
||||
:font-size="props.dataStyle.bottomFontSize1"
|
||||
>
|
||||
{{ Number(props.item.num).toLocaleString() }}
|
||||
</text>
|
||||
<text
|
||||
x="45%"
|
||||
y="50"
|
||||
text-anchor="middle"
|
||||
:fill="props.dataStyle.bottomFontColor2"
|
||||
:font-size="props.dataStyle.bottomFontSize2"
|
||||
>
|
||||
{{ props.item.unit }}
|
||||
</text>
|
||||
<text x="45%" y="60" text-anchor="middle" :fill="props.dataStyle.lineColor" font-size="16">
|
||||
——
|
||||
</text>
|
||||
<text
|
||||
x="45%"
|
||||
y="80"
|
||||
text-anchor="middle"
|
||||
:fill="props.dataStyle.bottomFontColor3"
|
||||
:font-size="props.dataStyle.bottomFontSize3"
|
||||
>
|
||||
{{ props.item.title }}
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import dayjs from 'dayjs';
|
||||
const props = defineProps(['item', 'dataStyle']);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<div>
|
||||
<svg
|
||||
:width="props.dataStyle.topWidth"
|
||||
:height="props.dataStyle.topHeight"
|
||||
:viewBox="`0 0 ${props.dataStyle.topWidth} ${props.dataStyle.topHeight}`"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1524, -831)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(46, 88)">
|
||||
<g id="标题模块--右侧1" transform="translate(1450, 684)">
|
||||
<g id="a" transform="translate(28.5, 60)">
|
||||
<g id="编组-10" transform="translate(0.5, 0.5)">
|
||||
<rect
|
||||
id="矩形"
|
||||
stroke="#00611A"
|
||||
fill="#0A251E"
|
||||
x="0.5"
|
||||
y="1"
|
||||
width="69"
|
||||
height="69"
|
||||
></rect>
|
||||
<line
|
||||
x1="2.10281963"
|
||||
y1="2.60281963"
|
||||
x2="67.5754289"
|
||||
y2="68.0754289"
|
||||
id="路径-3"
|
||||
stroke="#3D4D3F"
|
||||
opacity="0.299999982"
|
||||
></line>
|
||||
<line
|
||||
x1="2.10281963"
|
||||
y1="2.49742212"
|
||||
x2="68.8474931"
|
||||
y2="69.2420956"
|
||||
id="路径-3"
|
||||
stroke="#3D4D3F"
|
||||
opacity="0.299999982"
|
||||
transform="translate(35.1054, 35.5) scale(1, -1) translate(-35.1054, -35.5)"
|
||||
></line>
|
||||
<g id="装饰" transform="translate(0, 0)" fill="#4FE985">
|
||||
<rect id="矩形" x="0.05" y="0" width="12" height="4.5"></rect>
|
||||
<rect
|
||||
id="矩形备份-16"
|
||||
transform="translate(2.25, 6.25) rotate(90) translate(-2.25, -6.25)"
|
||||
x="-3.75"
|
||||
y="4"
|
||||
width="12"
|
||||
height="4.5"
|
||||
></rect>
|
||||
</g>
|
||||
<g
|
||||
id="装饰"
|
||||
transform="translate(64.025, 64.125) scale(-1, -1) translate(-64.025, -64.125)translate(58, 58)"
|
||||
fill="#4FE985"
|
||||
>
|
||||
<rect id="矩形" x="0.05" y="0" width="12" height="4.5"></rect>
|
||||
<rect
|
||||
id="矩形备份-16"
|
||||
transform="translate(2.25, 6.25) rotate(90) translate(-2.25, -6.25)"
|
||||
x="-3.75"
|
||||
y="4"
|
||||
width="12"
|
||||
height="4.5"
|
||||
></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<image
|
||||
:x="props.dataStyle.iconX"
|
||||
:y="props.dataStyle.iconY"
|
||||
:width="props.dataStyle.iconSize"
|
||||
:height="props.dataStyle.iconSize"
|
||||
:href="`./${props.item.icon}.svg`"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(['item', 'dataStyle']);
|
||||
// console.log(`./${props.item.icon}.svg`);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { WuRenJiImageConfig } from './index'
|
||||
|
||||
export const option = {
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = WuRenJiImageConfig.key
|
||||
public attr = { ...chartInitConfig, w: 401, h: 273, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(WuRenJiImageConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template></template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, watch, ref } from 'vue';
|
||||
import { option } from './config';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const WuRenJiImageConfig: ConfigType = {
|
||||
key: 'WuRenJiImage',
|
||||
chartKey: 'VWuRenJiImage',
|
||||
conKey: 'VCWuRenJiImage',
|
||||
title: '无人机图片',
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'WuRenJiImage.png'
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div class="title">
|
||||
<Tupian :w="w" :h="h" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
|
||||
import { CreateComponentType } from '@/packages/index.d';
|
||||
import { icon } from '@/plugins';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import Tupian from './svg/tupian.vue';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr);
|
||||
|
||||
const option = reactive({});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
width: v-bind('`${w}px`');
|
||||
height: v-bind('`${h}px`');
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<div>
|
||||
<svg
|
||||
:width="props.w"
|
||||
:height="props.h"
|
||||
:viewBox="`0 0 ${props.w} ${props.h}`"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
x1="44.8535648%"
|
||||
y1="21.9340044%"
|
||||
x2="44.8535648%"
|
||||
y2="105.614796%"
|
||||
id="linearGradient-1"
|
||||
>
|
||||
<stop stop-color="#00AB4E" offset="0%"></stop>
|
||||
<stop stop-color="#00D78B" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="87.055629%" y1="0%" x2="0%" y2="86.1698764%" id="linearGradient-2">
|
||||
<stop stop-color="#00D586" offset="0%"></stop>
|
||||
<stop stop-color="#00AB4E" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
x1="6.17106015%"
|
||||
y1="0%"
|
||||
x2="67.7872653%"
|
||||
y2="117.560409%"
|
||||
id="linearGradient-3"
|
||||
>
|
||||
<stop stop-color="#007343" offset="0%"></stop>
|
||||
<stop stop-color="#89E5A1" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智感-卫星遥感信息-切图版" transform="translate(-1495, -91)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(45.5, 92)">
|
||||
<g id="标题模块--右侧1" transform="translate(1450.5, 0.9394)">
|
||||
<g id="边框" transform="translate(0, -0)">
|
||||
<polygon
|
||||
id="面"
|
||||
fill="#02221B"
|
||||
opacity="0.687237694"
|
||||
points="0.499001996 0.060630108 399.700599 0.060630108 399.539646 271.06063 183.224719 271.06063 0.499001996 271.06063 0.499001996 193.216031 0.499001996 131.02166"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="线框"
|
||||
stroke="url(#linearGradient-1)"
|
||||
points="0.499001996 0.060630108 400 0.060630108 400 55.3847053 395.840001 59.6773903 395.840001 112.760411 399.08581 117.14731 399.08581 271.06063 0.499001996 271.06063 0.499001996 117.305666 4.15053776 113.266563 4.15053776 59.9085984 0.499001996 55.1112961"
|
||||
></polygon>
|
||||
<g
|
||||
id="左1"
|
||||
transform="translate(12.2416, 13.075) scale(1, -1) translate(-12.2416, -13.075)"
|
||||
>
|
||||
<polygon
|
||||
id="路径-11"
|
||||
fill="url(#linearGradient-2)"
|
||||
transform="translate(3.6525, 22.4974) scale(1, -1) translate(-3.6525, -22.4974)"
|
||||
points="0 18.8448966 0 26.1499885 7.30509189 18.8448966"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="装饰线段-"
|
||||
fill="url(#linearGradient-3)"
|
||||
fill-rule="nonzero"
|
||||
points="3.65254594 3.65254594 3.65254594 11.0802231 14.2622788 22.4971686 20.9471886 22.4971686 24.4831325 26.1499885 12.6709441 26.1499885 12.1291089 25.566951 0.488499319 13.0411664 0 12.5155206 2.49903173e-11 -2.59476354e-14"
|
||||
></polygon>
|
||||
</g>
|
||||
<g
|
||||
id="右1"
|
||||
transform="translate(387.4911, 258.075) scale(-1, 1) translate(-387.4911, -258.075)translate(375.2495, 245)"
|
||||
>
|
||||
<polygon
|
||||
id="路径-11"
|
||||
fill="url(#linearGradient-2)"
|
||||
transform="translate(3.6525, 22.4974) scale(1, -1) translate(-3.6525, -22.4974)"
|
||||
points="0 18.8448966 0 26.1499885 7.30509189 18.8448966"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="装饰线段-"
|
||||
fill="url(#linearGradient-3)"
|
||||
fill-rule="nonzero"
|
||||
points="3.65254594 3.65254594 3.65254594 11.0802231 14.2622788 22.4971686 20.9471886 22.4971686 24.4831325 26.1499885 12.6709441 26.1499885 12.1291089 25.566951 0.488499319 13.0411664 0 12.5155206 2.49903173e-11 -2.59476354e-14"
|
||||
></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(['w', 'h']);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { WuRenJiShiShiHuaMianConfig } from './index'
|
||||
import dataJson from './data.json'
|
||||
|
||||
const { source } = dataJson;
|
||||
|
||||
export const option = {
|
||||
dataset: source,
|
||||
dataStyle: {
|
||||
backgroud: '#FFFFFF00',
|
||||
margintop: 15,
|
||||
marginleft: 15,
|
||||
|
||||
titleColor: '#FFFFFF',
|
||||
titleFontSize: 16,
|
||||
titleMarginTop: 5,
|
||||
titleWidth: 181,
|
||||
titleHeight: 30,
|
||||
|
||||
videoloop: true, // 视频-循环播放
|
||||
videomuted: true, // 视频-静音
|
||||
videofit: 'fill', // 视频-适应方式
|
||||
videowidth: 181,
|
||||
videoheight: 115,
|
||||
videoMarginTop: 10,
|
||||
}
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = WuRenJiShiShiHuaMianConfig.key
|
||||
public attr = { ...chartInitConfig, w: 400, h: 343, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(WuRenJiShiShiHuaMianConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<CollapseItem name="数据设置" :expanded="true">
|
||||
<SettingItemBox name="主题设置">
|
||||
<SettingItem name="背景颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.backgroud"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="上方边距">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.margintop"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="左侧边距">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.marginleft"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="视频设置">
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="optionData.dataStyle.videoloop" size="small">
|
||||
循环播放
|
||||
</n-checkbox>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="optionData.dataStyle.videomuted" size="small">
|
||||
静音
|
||||
</n-checkbox>
|
||||
</SettingItem>
|
||||
<SettingItem name="视频类型">
|
||||
<n-select v-model:value="optionData.dataStyle.videofit" size="small" :options="fitList" />
|
||||
</SettingItem>
|
||||
<SettingItem name="视频宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.videowidth"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="视频高度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.videoheight"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="标题设置">
|
||||
<SettingItem name="标题字体颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.titleColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题字体大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.titleFontSize"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="标题字体大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.titleWidth"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题高度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.titleHeight"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem name="与标题的间隔距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.titleMarginTop"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, watch, ref } from 'vue';
|
||||
import { option } from './config';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
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>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"source": [
|
||||
{
|
||||
"title":"DJA-72无人机监控画面",
|
||||
"videoUrl": "/src/assets/videos/earth.mp4"
|
||||
},
|
||||
{
|
||||
"title":"DJ-057无人机监控画面",
|
||||
"videoUrl": "/src/assets/videos/earth.mp4"
|
||||
},
|
||||
{
|
||||
"title":"DJA-20无人机监控画面",
|
||||
"videoUrl": "/src/assets/videos/earth.mp4"
|
||||
},
|
||||
{
|
||||
"title":"DJA-035无人机监控画面",
|
||||
"videoUrl": "/src/assets/videos/earth.mp4"
|
||||
},
|
||||
{
|
||||
"title":"DJA-11无人机监控画面",
|
||||
"videoUrl": "/src/assets/videos/earth.mp4"
|
||||
},
|
||||
{
|
||||
"title":"DJ-021无人机监控画面",
|
||||
"videoUrl": "/src/assets/videos/earth.mp4"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const WuRenJiShiShiHuaMianConfig: ConfigType = {
|
||||
key: 'WuRenJiShiShiHuaMian',
|
||||
chartKey: 'VWuRenJiShiShiHuaMian',
|
||||
conKey: 'VCWuRenJiShiShiHuaMian',
|
||||
title: '无人机实时画面',
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'WuRenJiShiShiHuaMian.png'
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<div class="WuRenJiShiShiHuaMian">
|
||||
<div class="list">
|
||||
<div v-for="item in option.dataset" :key="item.key">
|
||||
<div class="item">
|
||||
<video
|
||||
style="border: 2px solid green; padding: 5px"
|
||||
preload="auto"
|
||||
crossOrigin="anonymous"
|
||||
playsinline
|
||||
autoplay
|
||||
:object-fit="option.dataset.fit"
|
||||
:loop="option.dataStyle.videoloop"
|
||||
:muted="option.dataStyle.videomuted"
|
||||
:width="`${option.dataStyle.videowidth}`"
|
||||
:height="`${option.dataStyle.videoheight}`"
|
||||
:src="item.videoUrl"
|
||||
/>
|
||||
<Title class="title" :item="item" :dataStyle="option.dataStyle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
|
||||
import { CreateComponentType } from '@/packages/index.d';
|
||||
import { icon } from '@/plugins';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import Title from './svg/title.vue';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr);
|
||||
|
||||
const option = reactive({
|
||||
dataset: props.chartConfig.option.dataset,
|
||||
dataStyle: props.chartConfig.option.dataStyle,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.WuRenJiShiShiHuaMian {
|
||||
overflow-y: auto;
|
||||
background: v-bind('`${option.dataStyle.backgroud}`');
|
||||
width: v-bind('`${w}px`');
|
||||
height: v-bind('`${h}px`');
|
||||
}
|
||||
|
||||
.WuRenJiShiShiHuaMian::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.WuRenJiShiShiHuaMian {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
margin-top: v-bind('`${option.dataStyle.margintop}px`');
|
||||
margin-left: v-bind('`${option.dataStyle.marginleft}px`');
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
video {
|
||||
display: block;
|
||||
object-fit: v-bind('option.dataStyle.videofit');
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: v-bind('`${option.dataStyle.titleMarginTop}px`');
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<div>
|
||||
<svg
|
||||
:height="props.dataStyle.titleHeight"
|
||||
:width="props.dataStyle.titleWidth"
|
||||
:viewBox="`0 0 ${props.dataStyle.titleWidth} ${props.dataStyle.titleHeight}`"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient x1="100%" y1="50%" x2="2.30946189%" y2="50%" id="linearGradient-1">
|
||||
<stop stop-color="#1F6B55" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#0A392A" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1512, -711)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(46, 88)">
|
||||
<g id="标题模块--右侧1" transform="translate(1450, 285)">
|
||||
<g id="1" transform="translate(15.1305, 215.5427)">
|
||||
<g id="编组-16" transform="translate(1.3695, 123.4573)">
|
||||
<rect
|
||||
id="矩形"
|
||||
fill="url(#linearGradient-1)"
|
||||
transform="translate(90.5, 15) scale(1, -1) translate(-90.5, -15)"
|
||||
x="0"
|
||||
y="0"
|
||||
width="181"
|
||||
height="30"
|
||||
></rect>
|
||||
<rect
|
||||
id="矩形"
|
||||
fill="#00611A"
|
||||
transform="translate(1.5, 15) scale(1, -1) translate(-1.5, -15)"
|
||||
x="0"
|
||||
y="0"
|
||||
width="3"
|
||||
height="30"
|
||||
></rect>
|
||||
<rect
|
||||
id="矩形"
|
||||
fill="#00611A"
|
||||
transform="translate(179.5, 15) scale(1, -1) translate(-179.5, -15)"
|
||||
x="178"
|
||||
y="0"
|
||||
width="3"
|
||||
height="30"
|
||||
></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<image x="8" y="2" width="25" height="25" href="./wurenji.svg" />
|
||||
<text
|
||||
x="40"
|
||||
y="20"
|
||||
:fill="props.dataStyle.titleColor"
|
||||
:font-size="props.dataStyle.titleFontSize"
|
||||
>
|
||||
{{
|
||||
truncateText(
|
||||
props.item.title,
|
||||
props.dataStyle.titleWidth - 40,
|
||||
props.dataStyle.titleFontSize,
|
||||
)
|
||||
}}
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import dayjs from 'dayjs';
|
||||
const props = defineProps(['item', 'dataStyle']);
|
||||
|
||||
// 超过宽度的文字切换成...
|
||||
function truncateText(text, maxWidth, fontSize, fontFamily = 'Arial') {
|
||||
const canvas = document.createElement('canvas');
|
||||
const context = canvas.getContext('2d');
|
||||
context.font = `${fontSize}px ${fontFamily}`;
|
||||
|
||||
const metrics = context.measureText(text);
|
||||
if (metrics.width <= maxWidth) {
|
||||
return text;
|
||||
}
|
||||
|
||||
let truncatedText = text;
|
||||
for (let i = text.length; i > 0; i--) {
|
||||
truncatedText = text.slice(0, i) + '...';
|
||||
const newMetrics = context.measureText(truncatedText);
|
||||
if (newMetrics.width <= maxWidth) {
|
||||
return truncatedText;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -6,9 +6,9 @@ export const XianSuoShangBaoConfig: ConfigType = {
|
|||
chartKey: 'VXianSuoShangBao',
|
||||
conKey: 'VCXianSuoShangBao',
|
||||
title: '线索上报渠道',
|
||||
category: ChatCategoryEnum.TABLE,
|
||||
categoryName: ChatCategoryEnumName.TABLE,
|
||||
package: PackagesCategoryEnum.TABLES,
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'XianSuoShangBao.png'
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { GeneralHeadConfig } from "./GeneralHead/index";
|
||||
import { ModalHeadConfig } from "./ModalHead/index";
|
||||
import { MoreButtonConfig } from "./MoreButton/index";
|
||||
import { WeiXingYaoGanConfig } from "./WeiXingYaoGan/index";
|
||||
import { XianSuoShangBaoConfig } from "./XianSuoShangBao/index";
|
||||
import { MeiRiShangBaoConfig } from "./MeiRiShangBao/index";
|
||||
|
||||
import { WuRenJiImageConfig } from "./WuRenJiImage/index";
|
||||
import { WuRenJiShiShiHuaMianConfig } from "./WuRenJiShiShiHuaMian/index";
|
||||
import { WuRenJiFeiXingShuJuConfig } from "./WuRenJiFeiXingShuJu/index";
|
||||
import { ModalFrameConfig } from "./ModalFrame/index";
|
||||
import { ModalFrameCloseConfig } from "./ModalFrameClose/index";
|
||||
import { ModalButtonConfig } from "./ModalButton/index";
|
||||
import { ModalTimeLineConfig } from "./ModalTimeLine/index";
|
||||
|
||||
|
||||
export default [
|
||||
GeneralHeadConfig,
|
||||
ModalHeadConfig,
|
||||
MoreButtonConfig,
|
||||
WeiXingYaoGanConfig,
|
||||
XianSuoShangBaoConfig,
|
||||
MeiRiShangBaoConfig,
|
||||
|
||||
WuRenJiImageConfig,
|
||||
WuRenJiShiShiHuaMianConfig,
|
||||
WuRenJiFeiXingShuJuConfig,
|
||||
ModalFrameConfig,
|
||||
ModalFrameCloseConfig,
|
||||
ModalButtonConfig,
|
||||
ModalTimeLineConfig
|
||||
];
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export enum ChatCategoryEnum {
|
||||
ZHIGAN = 'Zhigan',
|
||||
}
|
||||
|
||||
export enum ChatCategoryEnumName {
|
||||
ZHIGAN = '智感',
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import Zhigan from './Zhigan'
|
||||
|
||||
export const ZhiganList = [...Zhigan]
|
||||
|
|
@ -202,6 +202,7 @@ export enum PackagesCategoryEnum {
|
|||
CUSTOM = 'Custom',
|
||||
DIY = 'Diy',
|
||||
UNITS = 'Units',
|
||||
ZHIGAN = 'Zhigan',
|
||||
}
|
||||
|
||||
// 包分类名称
|
||||
|
|
@ -215,7 +216,8 @@ export enum PackagesCategoryName {
|
|||
DECORATES = '小组件',
|
||||
CUSTOM = '预警信息',
|
||||
DIY = 'DIY',
|
||||
UNITS = '组件'
|
||||
UNITS = '组件',
|
||||
ZHIGAN = '智感',
|
||||
}
|
||||
|
||||
// 获取组件
|
||||
|
|
@ -236,4 +238,5 @@ export type PackagesType = {
|
|||
[PackagesCategoryEnum.CUSTOM]: ConfigType[];
|
||||
[PackagesCategoryEnum.DIY]: ConfigType[];
|
||||
[PackagesCategoryEnum.UNITS]: ConfigType[];
|
||||
[PackagesCategoryEnum.ZHIGAN]: ConfigType[];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { PhotoList } from '@/packages/components/Photos/index'
|
|||
import { IconList } from '@/packages/components/Icons/index'
|
||||
import { DiyList } from '@/packages/components/Diy/index'
|
||||
import { UnitsList } from '@/packages/components/Units/index'
|
||||
import { ZhiganList } from '@/packages/components/Zhigan/index'
|
||||
import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
|
||||
|
||||
const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
|
||||
|
|
@ -27,7 +28,8 @@ export let packagesList: PackagesType = {
|
|||
[PackagesCategoryEnum.PHOTOS]: PhotoList,
|
||||
[PackagesCategoryEnum.ICONS]: IconList,
|
||||
[PackagesCategoryEnum.DIY]: DiyList,
|
||||
[PackagesCategoryEnum.UNITS]: UnitsList
|
||||
[PackagesCategoryEnum.UNITS]: UnitsList,
|
||||
[PackagesCategoryEnum.ZHIGAN]: ZhiganList,
|
||||
}
|
||||
|
||||
// 组件缓存, 可以大幅度提升组件加载速度
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
$dark: (
|
||||
// 文字颜色
|
||||
color: $--color-text-4,
|
||||
// aside 背景
|
||||
aside-background-color: $--color-dark-bg-1,
|
||||
//背景
|
||||
background-color: $--color-dark-bg-1,
|
||||
background-color1: $--color-dark-bg-1,
|
||||
|
|
|
|||
|
|
@ -54,9 +54,15 @@ const packagesListObj = {
|
|||
icon: renderIcon(AirPlaneOutlineIcon),
|
||||
label: PackagesCategoryName.DIY
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
[PackagesCategoryEnum.UNITS]: {
|
||||
icon: renderIcon(AirPlaneOutlineIcon),
|
||||
label: PackagesCategoryName.UNITS
|
||||
=======
|
||||
[PackagesCategoryEnum.ZHIGAN]: {
|
||||
icon: renderIcon(AirPlaneOutlineIcon),
|
||||
label: PackagesCategoryName.ZHIGAN
|
||||
>>>>>>> d5e71f44a955a99ff7e0d5112bad46d854b7c7ac
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
:key="item.value"
|
||||
@click="handleMovementTypeChange(item.value, panelIndex)"
|
||||
:class="
|
||||
movementValue == item.value
|
||||
panel.movement == item.value
|
||||
? 'event-type__content__item active'
|
||||
: 'event-type__content__item'
|
||||
"
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<n-divider vertical style="height: 450px" />
|
||||
|
||||
<div class="movement-type">
|
||||
<div class="movement-type__element">
|
||||
<div class="movement-type__element" v-if="panel.movement != 'newaddress'">
|
||||
关联组件（可多选）
|
||||
<n-select
|
||||
v-model:value="panel.elementId"
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
multiple
|
||||
/>
|
||||
</div>
|
||||
<div class="movement-type__element">
|
||||
<div class="movement-type__element" v-if="panel.movement == 'map'">
|
||||
组件交互方法
|
||||
<n-select
|
||||
v-model:value="panel.funName"
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
:options="funSelectOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="movement-type__element">
|
||||
<div class="movement-type__element" v-if="panel.movement == 'newaddress'">
|
||||
跳转新地址
|
||||
<n-input v-model:value="panel.url" type="text" placeholder="请输入网址" />
|
||||
</div>
|
||||
|
|
@ -113,7 +113,6 @@
|
|||
});
|
||||
const emits = defineEmits(['changeTab']);
|
||||
const eventValue = ref(props.eventData.type);
|
||||
const movementValue = ref(props.eventData.movementList[0].movement);
|
||||
const handleEventTypeChange = (value: string) => {
|
||||
eventValue.value = value;
|
||||
props.eventData.type = value;
|
||||
|
|
@ -132,15 +131,25 @@
|
|||
};
|
||||
const handleClose = (name: string) => {
|
||||
const index = name.match(/动作(\S*)-/)[1];
|
||||
goDialog({
|
||||
message: '是否删除此动作?',
|
||||
onPositiveCallback: () => {
|
||||
movementData.value.splice(index - 1, 1);
|
||||
},
|
||||
});
|
||||
if (props.eventData.movementList.length > 1) {
|
||||
goDialog({
|
||||
message: '是否删除此动作?',
|
||||
onPositiveCallback: () => {
|
||||
props.eventData.movementList.splice(index - 1, 1);
|
||||
if (index > 1) {
|
||||
const movement = props.eventData.movementList[index - 2].movement;
|
||||
movementTab.value = '动作' + (index - 1) + '-' + getEventName(movement);
|
||||
} else {
|
||||
const movement = props.eventData.movementList[0].movement;
|
||||
movementTab.value = '动作1' + '-' + getEventName(movement);
|
||||
}
|
||||
},
|
||||
});
|
||||
} else {
|
||||
window['$message'].error('至少保留一个动作');
|
||||
}
|
||||
};
|
||||
const handleMovementTypeChange = (value: string, index: number) => {
|
||||
movementValue.value = value;
|
||||
props.eventData.movementList[index].movement = value;
|
||||
movementTab.value = '动作' + (index + 1) + '-' + getEventName(value);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,6 +21,5 @@
|
|||
import { useTargetData } from '../hooks/useTargetData.hook';
|
||||
|
||||
const { targetData } = useTargetData();
|
||||
console.log(targetData);
|
||||
const showModal = ref(false);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { WinKeyboard, MacKeyboard, MenuEnum } from '@/enums/editPageEnum'
|
||||
import throttle from 'lodash/throttle'
|
||||
import debounce from 'lodash/debounce'
|
||||
import keymaster from 'keymaster'
|
||||
import { setKeyboardDressShow } from '@/utils'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { WinKeyboard, MacKeyboard, MenuEnum } from '@/enums/editPageEnum';
|
||||
import throttle from 'lodash/throttle';
|
||||
import debounce from 'lodash/debounce';
|
||||
import keymaster from 'keymaster';
|
||||
import { setKeyboardDressShow } from '@/utils';
|
||||
import { useSync } from './useSync.hook';
|
||||
|
||||
const { dataSyncUpdate } = useSync();
|
||||
// Keymaster可以支持识别以下组合键： ⇧，shift，option，⌥，alt，ctrl，control，command，和⌘
|
||||
const chartEditStore = useChartEditStore()
|
||||
const chartEditStore = useChartEditStore();
|
||||
|
||||
const winCtrlMerge = (e: string) => `${WinKeyboard.CTRL}+${e}`
|
||||
const winShiftMerge = (e: string) => `${WinKeyboard.SHIFT}+${e}`
|
||||
const winAltMerge = (e: string) => `${WinKeyboard.ALT}+${e}`
|
||||
const winCtrlMerge = (e: string) => `${WinKeyboard.CTRL}+${e}`;
|
||||
const winShiftMerge = (e: string) => `${WinKeyboard.SHIFT}+${e}`;
|
||||
const winAltMerge = (e: string) => `${WinKeyboard.ALT}+${e}`;
|
||||
|
||||
export const winKeyboardValue = {
|
||||
[MenuEnum.ARROW_UP]: winCtrlMerge('up'),
|
||||
|
|
@ -28,13 +30,14 @@ export const winKeyboardValue = {
|
|||
[MenuEnum.LOCK]: winCtrlMerge('l'),
|
||||
[MenuEnum.UNLOCK]: winCtrlMerge(winShiftMerge('l')),
|
||||
[MenuEnum.HIDE]: winCtrlMerge('h'),
|
||||
[MenuEnum.SHOW]: winCtrlMerge(winShiftMerge('h'))
|
||||
}
|
||||
[MenuEnum.SHOW]: winCtrlMerge(winShiftMerge('h')),
|
||||
[MenuEnum.SAVE]: winCtrlMerge('s'),
|
||||
};
|
||||
|
||||
// 这个 Ctrl 后面还是换成了 ⌘
|
||||
const macCtrlMerge = (e: string) => `${MacKeyboard.CTRL}+${e}`
|
||||
const macShiftMerge = (e: string) => `${MacKeyboard.SHIFT}+${e}`
|
||||
const macAltMerge = (e: string) => `${MacKeyboard.ALT}+${e}`
|
||||
const macCtrlMerge = (e: string) => `${MacKeyboard.CTRL}+${e}`;
|
||||
const macShiftMerge = (e: string) => `${MacKeyboard.SHIFT}+${e}`;
|
||||
const macAltMerge = (e: string) => `${MacKeyboard.ALT}+${e}`;
|
||||
|
||||
// 没有测试 macOS 系统，因为我没有😤👻
|
||||
export const macKeyboardValue = {
|
||||
|
|
@ -53,8 +56,9 @@ export const macKeyboardValue = {
|
|||
[MenuEnum.LOCK]: macCtrlMerge('l'),
|
||||
[MenuEnum.UNLOCK]: macCtrlMerge(macShiftMerge('l')),
|
||||
[MenuEnum.HIDE]: macCtrlMerge('h'),
|
||||
[MenuEnum.SHOW]: macCtrlMerge(macShiftMerge('h'))
|
||||
}
|
||||
[MenuEnum.SHOW]: macCtrlMerge(macShiftMerge('h')),
|
||||
[MenuEnum.SAVE]: macCtrlMerge('s'),
|
||||
};
|
||||
|
||||
// Win 快捷键列表
|
||||
const winKeyList: Array<string> = [
|
||||
|
|
@ -78,8 +82,10 @@ const winKeyList: Array<string> = [
|
|||
winKeyboardValue.unLock,
|
||||
|
||||
winKeyboardValue.hide,
|
||||
winKeyboardValue.show
|
||||
]
|
||||
winKeyboardValue.show,
|
||||
|
||||
winKeyboardValue.save,
|
||||
];
|
||||
|
||||
// Mac 快捷键列表
|
||||
const macKeyList: Array<string> = [
|
||||
|
|
@ -103,129 +109,245 @@ const macKeyList: Array<string> = [
|
|||
macKeyboardValue.unLock,
|
||||
|
||||
macKeyboardValue.hide,
|
||||
macKeyboardValue.show
|
||||
]
|
||||
macKeyboardValue.show,
|
||||
|
||||
macKeyboardValue.save,
|
||||
];
|
||||
|
||||
// 处理键盘记录
|
||||
const keyRecordHandle = () => {
|
||||
// 默认赋值
|
||||
window.$KeyboardActive = {
|
||||
ctrl: false,
|
||||
space: false
|
||||
}
|
||||
space: false,
|
||||
};
|
||||
|
||||
document.onkeydown = (e: KeyboardEvent) => {
|
||||
const { keyCode } = e
|
||||
if (keyCode == 32 && e.target == document.body) e.preventDefault()
|
||||
const { keyCode } = e;
|
||||
if (keyCode == 32 && e.target == document.body) e.preventDefault();
|
||||
|
||||
if ([17, 32].includes(keyCode) && window.$KeyboardActive) {
|
||||
setKeyboardDressShow(e.keyCode)
|
||||
setKeyboardDressShow(e.keyCode);
|
||||
switch (keyCode) {
|
||||
case 17: window.$KeyboardActive.ctrl = true; break
|
||||
case 32: window.$KeyboardActive.space = true; break
|
||||
case 17:
|
||||
window.$KeyboardActive.ctrl = true;
|
||||
break;
|
||||
case 32:
|
||||
window.$KeyboardActive.space = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.onkeyup = (e: KeyboardEvent) => {
|
||||
const { keyCode } = e
|
||||
if (keyCode == 32 && e.target == document.body) e.preventDefault()
|
||||
const { keyCode } = e;
|
||||
if (keyCode == 32 && e.target == document.body) e.preventDefault();
|
||||
|
||||
if ([17, 32].includes(keyCode) && window.$KeyboardActive) {
|
||||
setKeyboardDressShow()
|
||||
setKeyboardDressShow();
|
||||
switch (keyCode) {
|
||||
case 17: window.$KeyboardActive.ctrl = false; break
|
||||
case 32: window.$KeyboardActive.space = false; break
|
||||
case 17:
|
||||
window.$KeyboardActive.ctrl = false;
|
||||
break;
|
||||
case 32:
|
||||
window.$KeyboardActive.space = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 初始化监听事件
|
||||
export const useAddKeyboard = () => {
|
||||
const throttleTime = 50
|
||||
const throttleTime = 50;
|
||||
const switchHandle = (keyboardValue: typeof winKeyboardValue, e: string) => {
|
||||
switch (e) {
|
||||
// ct+↑
|
||||
case keyboardValue.up:
|
||||
keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_UP); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
throttle(() => {
|
||||
chartEditStore.setMove(MenuEnum.ARROW_UP);
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
// ct+→
|
||||
case keyboardValue.right:
|
||||
keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_RIGHT); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
throttle(() => {
|
||||
chartEditStore.setMove(MenuEnum.ARROW_RIGHT);
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
// ct+↓
|
||||
case keyboardValue.down:
|
||||
keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_DOWN); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
throttle(() => {
|
||||
chartEditStore.setMove(MenuEnum.ARROW_DOWN);
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
// ct+←
|
||||
case keyboardValue.left:
|
||||
keymaster(e, throttle(() => { chartEditStore.setMove(MenuEnum.ARROW_LEFT); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
throttle(() => {
|
||||
chartEditStore.setMove(MenuEnum.ARROW_LEFT);
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
|
||||
// 删除 delete
|
||||
case keyboardValue.delete:
|
||||
keymaster(e, debounce(() => { chartEditStore.removeComponentList(); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
debounce(() => {
|
||||
chartEditStore.removeComponentList();
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
// 复制 ct+v
|
||||
case keyboardValue.copy:
|
||||
keymaster(e, debounce(() => { chartEditStore.setCopy(); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
debounce(() => {
|
||||
chartEditStore.setCopy();
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
// 剪切 ct+x
|
||||
case keyboardValue.cut:
|
||||
keymaster(e, debounce(() => { chartEditStore.setCut(); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
debounce(() => {
|
||||
chartEditStore.setCut();
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
// 粘贴 ct+v
|
||||
case keyboardValue.parse:
|
||||
keymaster(e, throttle(() => { chartEditStore.setParse(); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
throttle(() => {
|
||||
chartEditStore.setParse();
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
|
||||
// 撤回 ct+z
|
||||
case keyboardValue.back:
|
||||
keymaster(e, throttle(() => { chartEditStore.setBack(); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
throttle(() => {
|
||||
chartEditStore.setBack();
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
// 前进 ct+sh+z
|
||||
case keyboardValue.forward:
|
||||
keymaster(e, throttle(() => { chartEditStore.setForward(); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
throttle(() => {
|
||||
chartEditStore.setForward();
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
|
||||
|
||||
// 创建分组 ct+g
|
||||
case keyboardValue.group:
|
||||
keymaster(e, throttle(() => { chartEditStore.setGroup(); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
throttle(() => {
|
||||
chartEditStore.setGroup();
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
// 解除分组 ct+sh+g
|
||||
case keyboardValue.unGroup:
|
||||
keymaster(e, throttle(() => { chartEditStore.setUnGroup(); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
throttle(() => {
|
||||
chartEditStore.setUnGroup();
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
|
||||
// 锁定 ct+l
|
||||
case keyboardValue.lock:
|
||||
keymaster(e, throttle(() => { chartEditStore.setLock(); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
throttle(() => {
|
||||
chartEditStore.setLock();
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
// 解除锁定 ct+sh+l
|
||||
case keyboardValue.unLock:
|
||||
keymaster(e, throttle(() => { chartEditStore.setUnLock(); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
throttle(() => {
|
||||
chartEditStore.setUnLock();
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
|
||||
// 隐藏 ct+h
|
||||
case keyboardValue.hide:
|
||||
keymaster(e, throttle(() => { chartEditStore.setHide(); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
throttle(() => {
|
||||
chartEditStore.setHide();
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
// 解除隐藏 ct+sh+h
|
||||
case keyboardValue.show:
|
||||
keymaster(e, throttle(() => { chartEditStore.setShow(); return false }, throttleTime))
|
||||
keymaster(
|
||||
e,
|
||||
throttle(() => {
|
||||
chartEditStore.setShow();
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
// 复制 ct+s
|
||||
case keyboardValue.save:
|
||||
keymaster(
|
||||
e,
|
||||
throttle(() => {
|
||||
dataSyncUpdate();
|
||||
return false;
|
||||
}, throttleTime),
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
winKeyList.forEach((key: string) => {
|
||||
switchHandle(winKeyboardValue, key)
|
||||
})
|
||||
switchHandle(winKeyboardValue, key);
|
||||
});
|
||||
macKeyList.forEach((key: string) => {
|
||||
switchHandle(macKeyboardValue, key)
|
||||
})
|
||||
switchHandle(macKeyboardValue, key);
|
||||
});
|
||||
|
||||
keyRecordHandle()
|
||||
}
|
||||
keyRecordHandle();
|
||||
};
|
||||
|
||||
// 卸载监听事件
|
||||
export const useRemoveKeyboard = () => {
|
||||
|
|
@ -233,9 +355,9 @@ export const useRemoveKeyboard = () => {
|
|||
document.onkeyup = () => {};
|
||||
|
||||
winKeyList.forEach((key: string) => {
|
||||
keymaster.unbind(key)
|
||||
})
|
||||
keymaster.unbind(key);
|
||||
});
|
||||
macKeyList.forEach((key: string) => {
|
||||
keymaster.unbind(key)
|
||||
})
|
||||
}
|
||||
keymaster.unbind(key);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -303,6 +303,7 @@ export const useSync = () => {
|
|||
|
||||
// * 数据保存
|
||||
const dataSyncUpdate = throttle(async (updateImg = true) => {
|
||||
window['$message'].success('正在保存，请稍后...');
|
||||
if (!fetchRouteParamsLocation()) return;
|
||||
let projectId = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID];
|
||||
if (projectId === null || projectId === '') {
|
||||
|
|
@ -369,7 +370,6 @@ export const useSync = () => {
|
|||
// 失败状态
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE);
|
||||
window['$message'].error('保存失败！');
|
||||
|
||||
}, 3000);
|
||||
|
||||
// * 定时处理
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="login" style="background-color: #f0f0f0; width: 100%; height: 100%">
|
||||
<div class="login" style="background-color: #f0f0f0; width: 100%; height: 100vh">
|
||||
<div
|
||||
class="title"
|
||||
:style="{
|
||||
|
|
|
|||
Loading…
Reference in New Issue