智感-重复预警弹窗组件
parent
ffc7ddcb82
commit
4795acd2fe
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
|
|
@ -0,0 +1,37 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="26px" height="28px" viewBox="0 0 26 28" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient x1="87.055629%" y1="0%" x2="0%" y2="86.1698764%" id="linearGradient-1">
|
||||
<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-2">
|
||||
<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(-1870, -733)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(46, 88)">
|
||||
<g id="标题模块--右侧1" transform="translate(1450, 285)">
|
||||
<g id="底部背景" transform="translate(0, 0)">
|
||||
<g id="边框"
|
||||
transform="translate(199.8663, 194.0447) scale(-1, 1) translate(-199.8663, -194.0447)">
|
||||
<g id="编组-22" transform="translate(0, 361.9394)">
|
||||
<polygon id="路径-11" fill="url(#linearGradient-1)"
|
||||
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-2)" 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>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -20,7 +20,7 @@ export const option = {
|
|||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = HeadMoreButtonConfig.key
|
||||
public attr = { ...chartInitConfig, w: 80, h: 40, zIndex: 5 }
|
||||
public attr = { ...chartInitConfig, w: 80, h: 32, zIndex: 5 }
|
||||
public chartConfig = cloneDeep(HeadMoreButtonConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { LowerLeftConfig } from './index'
|
||||
|
||||
export const option = {
|
||||
imageStyle: {
|
||||
imageWidth: 26,
|
||||
imageHeight: 28,
|
||||
bottom: 0,
|
||||
right: 5,
|
||||
}
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = LowerLeftConfig.key
|
||||
public attr = { ...chartInitConfig, w: 400, h: 32, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(LowerLeftConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<CollapseItem name="图标设置" :expanded="true">
|
||||
<SettingItemBox name="属性设置">
|
||||
<SettingItem name="图标宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.imageStyle.imageWidth"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="图标宽度"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="图标高度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.imageStyle.imageHeight"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="图标高度"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="图标距离右侧的距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.imageStyle.right"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="高度"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="图标距离底部的距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.imageStyle.bottom"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="宽度"
|
||||
/>
|
||||
</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,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const LowerLeftConfig: ConfigType = {
|
||||
key: 'LowerLeft',
|
||||
chartKey: 'VLowerLeft',
|
||||
conKey: 'VCLowerLeft',
|
||||
title: '组件底部栏',
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'LowerLeft.png'
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<div class="lowerLeft">
|
||||
<div class="image">
|
||||
<n-image
|
||||
:width="option.imageStyle.imageWidth"
|
||||
:height="option.imageStyle.imageHeight"
|
||||
src="src/assets/images/chart/zhigan/component/lowerLeft.svg"
|
||||
/>
|
||||
</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';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr);
|
||||
|
||||
const option = reactive({
|
||||
imageStyle: props.chartConfig.option.imageStyle,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lowerLeft {
|
||||
width: v-bind('`${w}px`');
|
||||
height: v-bind('`${h}px`');
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// height: 32px;
|
||||
}
|
||||
.image {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: v-bind('`${option.imageStyle.right}px`');
|
||||
bottom: v-bind('`${option.imageStyle.bottom}px`');
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { ModalCarouselConfig } from './index'
|
||||
|
||||
export const option = {
|
||||
// 图片资源列表
|
||||
dataset: [
|
||||
'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg',
|
||||
'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg',
|
||||
'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg',
|
||||
],
|
||||
buttonStyle:{
|
||||
dotBottom: 10,
|
||||
dotLeft: 120,
|
||||
dotColor1: '#00611a',
|
||||
dotColor2: '#00cc13',
|
||||
|
||||
buttonWidth: 20,
|
||||
buttonHeight: 60,
|
||||
|
||||
buttonBottom: 80,
|
||||
buttonLeftAndRight: 0,
|
||||
buttonColor: '#A4A4A4FF',
|
||||
|
||||
iconFontSize: 20,
|
||||
iconColor: '#1EC233',
|
||||
|
||||
borderWidth: 2,
|
||||
borderColor: '#008000',
|
||||
},
|
||||
dataStyle: {
|
||||
// 自动播放
|
||||
autoplay: true,
|
||||
// 自动播放的间隔（豪秒）
|
||||
interval: 5000,
|
||||
// 每页显示的图片数量
|
||||
slidesPerview: 1,
|
||||
// 轮播方向
|
||||
direction: "horizontal",
|
||||
// 拖曳切换
|
||||
draggable: true,
|
||||
// 居中显示
|
||||
centeredSlides: false,
|
||||
// 过渡效果
|
||||
effect: "slide",
|
||||
// 是否显示指示点
|
||||
showDots: true,
|
||||
// 指示器样式
|
||||
dotType: "line",
|
||||
// 显示箭头
|
||||
showArrow: true,
|
||||
// 图片样式
|
||||
fit: "contain",
|
||||
}
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ModalCarouselConfig.key
|
||||
public attr = { ...chartInitConfig, w: 320, h: 250, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(ModalCarouselConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
<template>
|
||||
<CollapseItem name="路径" :expanded="true">
|
||||
<SettingItem v-for="(item, index) in optionData.dataset" :key="index">
|
||||
<n-input-group>
|
||||
<n-input
|
||||
v-model:value="optionData.dataset[index]"
|
||||
size="small"
|
||||
placeholder="请输入图片地址"
|
||||
></n-input>
|
||||
<n-button ghost @click="optionData.dataset.splice(index, 1)"> - </n-button>
|
||||
</n-input-group>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button size="small" @click="optionData.dataset.push('')"> + 新增</n-button>
|
||||
</SettingItem>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="轮播属性" :expanded="true">
|
||||
<SettingItem-box name="播放器">
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.dataStyle.autoplay" size="small" />
|
||||
<n-text>自动播放</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<!-- 开启自动播放时，设置间隔时间 -->
|
||||
<SettingItem name="间隔时间">
|
||||
<n-input-number v-model:value="optionData.dataStyle.interval" size="small" placeholder="">
|
||||
<template #suffix> 毫秒 </template>
|
||||
</n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="轮播方向">
|
||||
<n-select
|
||||
v-model:value="optionData.dataStyle.direction"
|
||||
:options="directions"
|
||||
placeholder="选择方向"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="过渡效果">
|
||||
<n-select
|
||||
v-model:value="optionData.dataStyle.effect"
|
||||
:options="effects"
|
||||
placeholder="效果"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="每页数量">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.slidesPerview"
|
||||
size="small"
|
||||
placeholder=""
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.dataStyle.centeredSlides" size="small" />
|
||||
<n-text>居中显示</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem name="图片样式">
|
||||
<n-select v-model:value="optionData.dataStyle.fit" :options="fitList" placeholder="样式" />
|
||||
</SettingItem>
|
||||
</SettingItem-box>
|
||||
<SettingItem-box name="指示器">
|
||||
<!-- <SettingItem name="样式">
|
||||
<n-select
|
||||
v-model:value="optionData.dataStyle.dotType"
|
||||
:options="dotTypes"
|
||||
placeholder="选择样式"
|
||||
/>
|
||||
</SettingItem> -->
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.dataStyle.showDots" size="small" />
|
||||
<n-text>显示</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.dataStyle.showArrow" size="small" />
|
||||
<n-text>箭头</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.dataStyle.draggable" size="small" />
|
||||
<n-text>拖曳切换</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
</SettingItem-box>
|
||||
|
||||
<SettingItem-box name="控制点和箭头样式">
|
||||
<SettingItem name="控制点位置（下）">
|
||||
<n-input-number
|
||||
v-model:value="optionData.buttonStyle.dotBottom"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="控制点位置（左）">
|
||||
<n-input-number
|
||||
v-model:value="optionData.buttonStyle.dotLeft"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="控制点颜色1">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.buttonStyle.dotColor1"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="控制点颜色2">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.buttonStyle.dotColor2"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="箭头按钮长度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.buttonStyle.buttonBottom"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="箭头按钮宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.buttonStyle.buttonHeight"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="箭头位置（上下）">
|
||||
<n-input-number
|
||||
v-model:value="optionData.buttonStyle.buttonBottom"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="箭头位置（左右）">
|
||||
<n-input-number
|
||||
v-model:value="optionData.buttonStyle.buttonWidth"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="箭头按钮颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.buttonStyle.buttonColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="箭头图标大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.buttonStyle.iconFontSize"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="箭头图标颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.buttonStyle.iconColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem name="边框颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.buttonStyle.borderColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="边框宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.buttonStyle.borderWidth"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItem-box>
|
||||
</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 dotTypes = [
|
||||
{
|
||||
label: '点',
|
||||
value: 'dot',
|
||||
},
|
||||
{
|
||||
label: '线',
|
||||
value: 'line',
|
||||
},
|
||||
];
|
||||
const directions = [
|
||||
{
|
||||
label: '水平方向',
|
||||
value: 'horizontal',
|
||||
},
|
||||
{
|
||||
label: '垂直方向',
|
||||
value: 'vertical',
|
||||
},
|
||||
];
|
||||
const effects = [
|
||||
{
|
||||
label: 'slide',
|
||||
value: 'slide',
|
||||
},
|
||||
{
|
||||
label: 'fade',
|
||||
value: 'fade',
|
||||
},
|
||||
{
|
||||
label: 'card',
|
||||
value: 'card',
|
||||
},
|
||||
{
|
||||
label: 'custom',
|
||||
value: 'custom',
|
||||
},
|
||||
];
|
||||
|
||||
// 适应类型
|
||||
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,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const ModalCarouselConfig: ConfigType = {
|
||||
key: 'ModalCarousel',
|
||||
chartKey: 'VModalCarousel',
|
||||
conKey: 'VCModalCarousel',
|
||||
title: '重复报警弹窗轮播图',
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'ModalCarousel.png'
|
||||
}
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<template>
|
||||
<div class="ModalCarousel">
|
||||
<n-carousel
|
||||
:autoplay="option.dataStyle.autoplay"
|
||||
:interval="option.dataStyle.interval"
|
||||
:centered-slides="option.dataStyle.centeredSlides"
|
||||
:direction="option.dataStyle.direction"
|
||||
:dot-placement="option.dataStyle.dotPlacement"
|
||||
:dot-type="option.dataStyle.dotType"
|
||||
:draggable="option.dataStyle.draggable"
|
||||
:effect="option.dataStyle.effect"
|
||||
:slides-per-view="option.dataStyle.slidesPerview"
|
||||
:show-arrow="option.dataStyle.showArrow"
|
||||
:show-dots="option.dataStyle.showDots"
|
||||
>
|
||||
<n-image
|
||||
v-for="(url, index) in option.dataset"
|
||||
preview-disabled
|
||||
:key="index"
|
||||
:object-fit="option.dataStyle.fit"
|
||||
:src="url"
|
||||
:fallback-src="requireErrorImg()"
|
||||
:width="w"
|
||||
:height="h"
|
||||
></n-image>
|
||||
<template #arrow="{ prev, next }">
|
||||
<div class="arrow-left">
|
||||
<n-button
|
||||
type="text"
|
||||
:color="option.buttonStyle.buttonColor"
|
||||
:style="{
|
||||
display: flex,
|
||||
alignItems: center,
|
||||
justifyContent: center,
|
||||
width: option.buttonStyle.buttonWidth + 'px',
|
||||
height: option.buttonStyle.buttonHeight + 'px',
|
||||
}"
|
||||
@click="prev"
|
||||
>
|
||||
<LeftOutlined
|
||||
:style="{
|
||||
color: option.buttonStyle.iconColor,
|
||||
fontSize: option.buttonStyle.iconFontSize + 'px',
|
||||
}"
|
||||
/>
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="arrow-right">
|
||||
<n-button
|
||||
type="text"
|
||||
:color="option.buttonStyle.buttonColor"
|
||||
:style="{
|
||||
display: flex,
|
||||
alignItems: center,
|
||||
justifyContent: center,
|
||||
width: option.buttonStyle.buttonWidth + 'px',
|
||||
height: option.buttonStyle.buttonHeight + 'px',
|
||||
}"
|
||||
@click="next"
|
||||
>
|
||||
<RightOutlined
|
||||
:style="{
|
||||
color: option.buttonStyle.iconColor,
|
||||
fontSize: option.buttonStyle.iconFontSize + 'px',
|
||||
}"
|
||||
/>
|
||||
</n-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #dots="{ total, currentIndex, to }">
|
||||
<ul class="dots">
|
||||
<li
|
||||
v-for="index of total"
|
||||
:key="index"
|
||||
:class="{ ['is-active']: currentIndex === index - 1 }"
|
||||
@click="to(index - 1)"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
</n-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ArrowBack, ArrowForward } from '@vicons/ionicons5';
|
||||
import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
|
||||
import { CreateComponentType } from '@/packages/index.d';
|
||||
import { requireErrorImg } from '@/utils';
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { icon } from '@/plugins';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { LeftOutlined, RightOutlined } from '@ant-design/icons-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,
|
||||
buttonStyle: props.chartConfig.option.buttonStyle,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ModalCarousel {
|
||||
// overflow-y: auto;
|
||||
border: v-bind('`${option.buttonStyle.borderWidth}px`') solid
|
||||
v-bind('`${option.buttonStyle.borderColor}`');
|
||||
padding: 2px;
|
||||
width: v-bind('`${w}px`');
|
||||
height: v-bind('`${h}px`');
|
||||
}
|
||||
.ModalCarousel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.ModalCarousel {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.arrow-left {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: v-bind('`${option.buttonStyle.buttonBottom}px`');
|
||||
left: v-bind('`${option.buttonStyle.buttonLeftAndRight}px`');
|
||||
}
|
||||
.arrow-right {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: v-bind('`${option.buttonStyle.buttonBottom}px`');
|
||||
right: v-bind('`${option.buttonStyle.buttonLeftAndRight}px`');
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
bottom: v-bind('`${option.buttonStyle.dotBottom}px`');
|
||||
left: v-bind('`${option.buttonStyle.dotLeft}px`');
|
||||
}
|
||||
|
||||
.dots li {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 4px;
|
||||
margin: 0 3px;
|
||||
border-radius: 4px;
|
||||
background-color: v-bind('`${option.buttonStyle.dotColor1}`');
|
||||
transition:
|
||||
width 0.3s,
|
||||
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dots li.is-active {
|
||||
width: 40px;
|
||||
background: v-bind('`${option.buttonStyle.dotColor2}`');
|
||||
}
|
||||
|
||||
::v-deep .n-button {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,7 +8,6 @@
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<title>编组 54</title>
|
||||
<defs>
|
||||
<linearGradient x1="100%" y1="50%" x2="2.30946189%" y2="50%" id="linearGradient-1">
|
||||
<stop stop-color="#1F6B55" stop-opacity="0" offset="0%"></stop>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { ModalInfoConfig } from './index'
|
||||
import dataJson from './data.json'
|
||||
|
||||
const { source } = dataJson;
|
||||
|
||||
export const option = {
|
||||
dataset: source,
|
||||
dataStyle:{
|
||||
backgroud: '#FFFFFF00',
|
||||
marginTop: 10,
|
||||
marginLeft: 20,
|
||||
listMarginTop: 0,
|
||||
listMarginLeft: 0,
|
||||
},
|
||||
titleStyle: {
|
||||
dotColor: '#C9FFC7',
|
||||
dotSize: 12,
|
||||
dotMarginRight: 10,
|
||||
width: 100,
|
||||
height: 20,
|
||||
fontcolor: '#CBE6CD',
|
||||
fontsize: 16,
|
||||
align: 'left',
|
||||
},
|
||||
contentStyle: {
|
||||
width: 250,
|
||||
fontcolor: '#FFFFFF',
|
||||
fontsize: 16,
|
||||
align: 'left',
|
||||
}
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ModalInfoConfig.key
|
||||
public attr = { ...chartInitConfig, w: 400, h: 300, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(ModalInfoConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<template>
|
||||
<CollapseItem name="设置" :expanded="true">
|
||||
<SettingItemBox name="整体设置">
|
||||
<SettingItem name="上方距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.marginTop"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="上方距离"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="左侧距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.marginLeft"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="左侧距离"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="单项上方距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.listMarginTop"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="单项上方距离"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="单项左侧距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.listMarginLeft"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="单项左侧距离"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="背景颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.backgroud"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="标题设置">
|
||||
<SettingItem name="标题点颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.titleStyle.dotColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题点大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.titleStyle.dotSize"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="标题宽度"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题点与文字间的距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.titleStyle.dotMarginRight"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="标题宽度"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.titleStyle.width"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="标题宽度"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题高度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.titleStyle.height"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="标题高度"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题字体颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.titleStyle.fontcolor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题字体大小">
|
||||
<n-input-number v-model:value="optionData.titleStyle.fontsize" :min="0" size="small" />
|
||||
</SettingItem>
|
||||
<SettingItem name="标题排列方式">
|
||||
<n-select
|
||||
v-model:value="optionData.titleStyle.align"
|
||||
size="small"
|
||||
:options="[
|
||||
{ label: '左侧', value: 'left' },
|
||||
{ label: '中间', value: 'center' },
|
||||
{ label: '右侧', value: 'right' },
|
||||
]"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="内容设置">
|
||||
<SettingItem name="内容宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.contentStyle.width"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="内容宽度"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="内容字体颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.contentStyle.fontcolor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="内容字体大小">
|
||||
<n-input-number v-model:value="optionData.contentStyle.fontsize" :min="0" size="small" />
|
||||
</SettingItem>
|
||||
<SettingItem name="内容排列方式">
|
||||
<n-select
|
||||
v-model:value="optionData.contentStyle.align"
|
||||
size="small"
|
||||
:options="[
|
||||
{ label: '左侧', value: 'left' },
|
||||
{ label: '中间', value: 'center' },
|
||||
{ label: '右侧', value: 'right' },
|
||||
]"
|
||||
/>
|
||||
</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,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"source": [
|
||||
{
|
||||
"title": "预警描述",
|
||||
"content": "费县马庄镇牛田村村委东北方向375.75°1.197公里处发现火情"
|
||||
},
|
||||
{
|
||||
"title": "水平角",
|
||||
"content": "375.75°"
|
||||
},
|
||||
{
|
||||
"title": "俯视角",
|
||||
"content": "98°"
|
||||
},
|
||||
{
|
||||
"title": "经纬度",
|
||||
"content": "117.90911.3012349"
|
||||
},
|
||||
{
|
||||
"title": "预警时间",
|
||||
"content": "2024.12.24 13:08:07"
|
||||
},
|
||||
{
|
||||
"title": "瞭望塔",
|
||||
"content": "费县瞭望塔"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const ModalInfoConfig: ConfigType = {
|
||||
key: 'ModalInfo',
|
||||
chartKey: 'VModalInfo',
|
||||
conKey: 'VCModalInfo',
|
||||
title: '重复报警弹窗信息展示',
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'ModalInfo.png'
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<div class="ModalInfo">
|
||||
<div class="list">
|
||||
<div v-for="item in option.dataset" :key="item.key">
|
||||
<div class="item">
|
||||
<div class="title">
|
||||
<!-- <n-image
|
||||
:width="option.dataStyle.dotSize"
|
||||
:height="option.dataStyle.dotSize"
|
||||
src="src/assets/images/chart/zhigan/component/modalInfoDot.svg"
|
||||
/> -->
|
||||
<Dot :dotSize="option.titleStyle.dotSize" :dotColor="option.titleStyle.dotColor" />
|
||||
<span class="dot">{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="content"> {{ item.content }} </div>
|
||||
</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 Dot from './svg/dot.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,
|
||||
titleStyle: props.chartConfig.option.titleStyle,
|
||||
contentStyle: props.chartConfig.option.contentStyle,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ModalInfo {
|
||||
overflow-y: auto;
|
||||
background: v-bind('`${option.dataStyle.backgroud}`');
|
||||
width: v-bind('`${w}px`');
|
||||
height: v-bind('`${h}px`');
|
||||
}
|
||||
.ModalInfo::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.ModalInfo {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: inline-block;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin-top: v-bind('`${option.dataStyle.marginTop}px`');
|
||||
margin-left: v-bind('`${option.dataStyle.marginLeft}px`');
|
||||
}
|
||||
.item {
|
||||
display: inline-flex;
|
||||
margin-top: v-bind('`${option.dataStyle.listMarginTop}px`');
|
||||
margin-left: v-bind('`${option.dataStyle.listMarginLeft}px`');
|
||||
}
|
||||
.title {
|
||||
display: inline-flex;
|
||||
width: v-bind('`${option.titleStyle.width}px`');
|
||||
height: v-bind('`${option.titleStyle.height}px`');
|
||||
color: v-bind('`${option.titleStyle.fontcolor}`');
|
||||
font-size: v-bind('`${option.titleStyle.fontsize}px`');
|
||||
text-align: v-bind('`${option.titleStyle.align}`');
|
||||
}
|
||||
.dot {
|
||||
margin-left: v-bind('`${option.titleStyle.dotMarginRight}px`');
|
||||
}
|
||||
.content {
|
||||
width: v-bind('`${option.contentStyle.width}px`');
|
||||
// height: v-bind('`${option.contentStyle.height}px`');
|
||||
height: 100%;
|
||||
color: v-bind('`${option.contentStyle.fontcolor}`');
|
||||
font-size: v-bind('`${option.contentStyle.fontsize}px`');
|
||||
text-align: v-bind('`${option.contentStyle.align}`');
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<div>
|
||||
<svg
|
||||
:width="props.dotSize"
|
||||
:height="props.dotSize"
|
||||
:viewBox="`0 0 ${props.dotSize} ${props.dotSize}`"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<ellipse
|
||||
id="path-1"
|
||||
cx="1.4433567"
|
||||
cy="10.4439893"
|
||||
rx="1.4433567"
|
||||
ry="1.44398933"
|
||||
></ellipse>
|
||||
<filter
|
||||
x="-311.8%"
|
||||
y="-311.6%"
|
||||
width="723.5%"
|
||||
height="723.3%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-2"
|
||||
>
|
||||
<feMorphology
|
||||
radius="0.5"
|
||||
operator="dilate"
|
||||
in="SourceAlpha"
|
||||
result="shadowSpreadOuter1"
|
||||
></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur
|
||||
stdDeviation="2.5"
|
||||
in="shadowOffsetOuter1"
|
||||
result="shadowBlurOuter1"
|
||||
></feGaussianBlur>
|
||||
<feComposite
|
||||
in="shadowBlurOuter1"
|
||||
in2="SourceAlpha"
|
||||
operator="out"
|
||||
result="shadowBlurOuter1"
|
||||
></feComposite>
|
||||
<feColorMatrix
|
||||
values="0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.314202964 0 0 0 0.6 0"
|
||||
type="matrix"
|
||||
in="shadowBlurOuter1"
|
||||
></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g
|
||||
id="林业防火-智感-重复报警弹窗-切图版"
|
||||
transform="translate(-240, -490)"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<g id="弹窗----" transform="translate(175.2674, 165.0542)">
|
||||
<g id="文字" transform="translate(64.7326, 10.2458)">
|
||||
<g id="预警信息-" transform="translate(0, 36.7)">
|
||||
<g id="编组-47" transform="translate(0.5, 44)">
|
||||
<g id="椭圆形" transform="translate(6.4709, 231.1981)">
|
||||
<use
|
||||
fill="black"
|
||||
fill-opacity="1"
|
||||
filter="url(#filter-2)"
|
||||
xlink:href="#path-1"
|
||||
></use>
|
||||
<ellipse
|
||||
stroke-opacity="0.338068182"
|
||||
stroke="#FFFFFF"
|
||||
stroke-width="0.255938697"
|
||||
stroke-linejoin="square"
|
||||
:fill="props.dotColor"
|
||||
fill-rule="evenodd"
|
||||
cx="1.4433567"
|
||||
cy="10.4439893"
|
||||
rx="1.31538735"
|
||||
ry="1.31601998"
|
||||
></ellipse>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(['dotSize', 'dotColor']);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { ModalVideoConfig } from './index'
|
||||
|
||||
export const option = {
|
||||
dataset: '/src/assets/videos/earth.mp4',
|
||||
dataStyle: {
|
||||
backgroud: '#FFFFFF00',
|
||||
videoloop: true, // 视频-循环播放
|
||||
videomuted: true, // 视频-静音
|
||||
videofit: 'fill', // 视频-适应方式
|
||||
videoMarginTop: 10,
|
||||
|
||||
borderWidth: 2,
|
||||
borderColor: '#008000',
|
||||
padding: 4,
|
||||
}
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ModalVideoConfig.key
|
||||
public attr = { ...chartInitConfig, w: 320, h: 220, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(ModalVideoConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<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>
|
||||
</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>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="边框设置">
|
||||
<SettingItem name="边框颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.dataStyle.borderColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="边框宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.borderWidth"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="边框距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.padding"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</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,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const ModalVideoConfig: ConfigType = {
|
||||
key: 'ModalVideo',
|
||||
chartKey: 'VModalVideo',
|
||||
conKey: 'VCModalVideo',
|
||||
title: '重复报警弹窗视频组件',
|
||||
category: ChatCategoryEnum.ZHIGAN,
|
||||
categoryName: ChatCategoryEnumName.ZHIGAN,
|
||||
package: PackagesCategoryEnum.ZHIGAN,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'ModalVideo.png'
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div class="WuRenJiShiShiHuaMian">
|
||||
<video
|
||||
preload="auto"
|
||||
crossOrigin="anonymous"
|
||||
playsinline
|
||||
autoplay
|
||||
:object-fit="option.dataset.fit"
|
||||
:loop="option.dataStyle.videoloop"
|
||||
:muted="option.dataStyle.videomuted"
|
||||
:width="`${w - option.dataStyle.padding}`"
|
||||
:height="`${h - option.dataStyle.padding}`"
|
||||
:src="option.dataset"
|
||||
/>
|
||||
</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 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;
|
||||
border: v-bind('`${option.dataStyle.borderWidth}px`') solid
|
||||
v-bind('`${option.dataStyle.borderColor}`');
|
||||
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;
|
||||
}
|
||||
video {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
object-fit: v-bind('option.dataStyle.videofit');
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,24 +1,26 @@
|
|||
import { GeneralHeadConfig } from "./GeneralHead/index";
|
||||
import { ModalHeadConfig } from "./ModalHead/index";
|
||||
import { HeadMoreButtonConfig } from "./HeadMoreButton/index";
|
||||
import { WuRenJiImageConfig } from "./WuRenJiImage/index";
|
||||
|
||||
import { WeiXingYaoGanConfig } from "./WeiXingYaoGan/index";
|
||||
import { XianSuoShangBaoConfig } from "./XianSuoShangBao/index";
|
||||
import { MeiRiShangBaoConfig } from "./MeiRiShangBao/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 { ModalHeadConfig } from "./ModalHead/index";
|
||||
import { ModalCarouselConfig } from "./ModalCarousel/index";
|
||||
import { ModalVideoConfig } from "./ModalVideo/index";
|
||||
import { ModalInfoConfig } from "./ModalInfo/index";
|
||||
import { ModalTimeLineConfig } from "./ModalTimeLine/index";
|
||||
import { ModalButtonConfig } from "./ModalButton/index";
|
||||
|
||||
import { LowerLeftConfig } from "./LowerLeft/index";
|
||||
|
||||
export default [
|
||||
GeneralHeadConfig,
|
||||
ModalHeadConfig,
|
||||
HeadMoreButtonConfig,
|
||||
WuRenJiImageConfig,
|
||||
|
||||
|
|
@ -28,8 +30,15 @@ export default [
|
|||
|
||||
WuRenJiShiShiHuaMianConfig,
|
||||
WuRenJiFeiXingShuJuConfig,
|
||||
|
||||
LowerLeftConfig,
|
||||
|
||||
ModalFrameConfig,
|
||||
ModalFrameCloseConfig,
|
||||
ModalFrameCloseConfig,
|
||||
ModalHeadConfig,
|
||||
ModalCarouselConfig,
|
||||
ModalVideoConfig,
|
||||
ModalInfoConfig,
|
||||
ModalTimeLineConfig,
|
||||
ModalButtonConfig,
|
||||
ModalTimeLineConfig
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in New Issue