智库-弹窗框架分割成两个，适配单独按钮都能进行事件配置
parent
525086cebf
commit
945a8f24c3
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -1,49 +0,0 @@
|
|||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { HuoQingDetailModalConfig } from './index'
|
||||
|
||||
export const option = {
|
||||
dataStyle:{
|
||||
onlyShowLeftFrame: true,
|
||||
mouseListener: true,
|
||||
|
||||
mask: false,
|
||||
maskClickClose: false,
|
||||
maskColor: '#FFFFFF00',
|
||||
maskFrameX: 0,
|
||||
maskFrameY: 0,
|
||||
maskFrameW: 0,
|
||||
maskFrameH: 0,
|
||||
maskFrameColor: '#FFFFFF00',
|
||||
|
||||
// 总矩形边框颜色
|
||||
allUseStrokeColor: '#435A4E',
|
||||
// 总矩形填充颜色
|
||||
allUseFillColor: '#021E17',
|
||||
|
||||
// 左侧矩形边框颜色
|
||||
leftStrokeColor1: '#435A4E',
|
||||
leftStrokeColor2: '#7CA791',
|
||||
// 左侧矩形填充颜色
|
||||
leftFillColor: '#161A1A',
|
||||
// 左侧矩形左上、右下修饰边角颜色
|
||||
leftStopColor1: '#25673D',
|
||||
leftStopColor2: '#3E674A',
|
||||
leftStopColor3: '#8BE8A3',
|
||||
|
||||
// 左上、左下修饰矩形颜色
|
||||
topLeftFillColor: '#4D815D',
|
||||
bottomLeftFillColor: '#FFE4AC',
|
||||
// 左上、修饰圆形颜色
|
||||
topLeftEllipseColor: '#4A5C4A',
|
||||
},
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = HuoQingDetailModalConfig.key
|
||||
public attr = { ...chartInitConfig, w: 417, h: 891, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(HuoQingDetailModalConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -1,275 +0,0 @@
|
|||
<template>
|
||||
<CollapseItem name="弹窗设置" :expanded="true">
|
||||
<SettingItemBox name="样式设置">
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.dataStyle.onlyShowLeftFrame" size="small" />
|
||||
<n-text>默认弹窗只显示左侧部分</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.dataStyle.mouseListener" size="small" />
|
||||
<n-text>是否开启弹窗拖动</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.dataStyle.mask" size="small" />
|
||||
<n-text>展示遮罩</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.dataStyle.maskClickClose" size="small" />
|
||||
<n-text>点击非弹窗部分是否关闭弹窗</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem name="遮罩颜色" v-if="optionData.dataStyle.mask">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.maskColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="弹窗宽度" v-if="optionData.dataStyle.mask">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.maskFrameW"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="弹窗宽度"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="弹窗X轴位置" v-if="optionData.dataStyle.mask">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.maskFrameX"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="弹窗X轴位置"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="弹窗Y轴位置" v-if="optionData.dataStyle.mask">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.maskFrameY"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="弹窗Y轴位置"
|
||||
/>
|
||||
</SettingItem>
|
||||
<!-- <SettingItem name="弹窗高度" v-if="optionData.dataStyle.mask">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.maskFrameH"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="弹窗高度"
|
||||
/>
|
||||
</SettingItem> -->
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="颜色设置">
|
||||
<SettingItem name="总矩形边框颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.allUseStrokeColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.dataStyle.allUseStrokeColor = dataStyleClone.allUseStrokeColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="总矩形填充颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.allUseFillColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.dataStyle.allUseFillColor = dataStyleClone.allUseFillColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="左侧矩形边框颜色1">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.leftStrokeColor1"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.dataStyle.leftStrokeColor1 = dataStyleClone.leftStrokeColor1"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="左侧矩形边框颜色2">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.leftStrokeColor2"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.dataStyle.leftStrokeColor2 = dataStyleClone.leftStrokeColor2"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="左侧矩形填充颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.leftFillColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.dataStyle.leftFillColor = dataStyleClone.leftFillColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="左侧矩形左上、右下修饰边角颜色1">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.leftStopColor1"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.dataStyle.leftStopColor1 = dataStyleClone.leftStopColor1"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="左侧矩形左上、右下修饰边角颜色2">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.leftStopColor2"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.dataStyle.leftStopColor2 = dataStyleClone.leftStopColor2"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="左侧矩形左上、右下修饰边角颜色3">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.leftStopColor3"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.dataStyle.leftStopColor3 = dataStyleClone.leftStopColor3"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="左上修饰矩形颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.topLeftFillColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.dataStyle.topLeftFillColor = dataStyleClone.topLeftFillColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="左下修饰矩形颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.bottomLeftFillColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.dataStyle.bottomLeftFillColor = dataStyleClone.bottomLeftFillColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="左上、修饰圆形颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.topLeftEllipseColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.dataStyle.topLeftEllipseColor = dataStyleClone.topLeftEllipseColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</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 dataStyleClone = {
|
||||
maskColor: '#000000FF',
|
||||
// 总矩形边框颜色
|
||||
allUseStrokeColor: '#435A4E',
|
||||
// 总矩形填充颜色
|
||||
allUseFillColor: '#021E17',
|
||||
|
||||
// 左侧矩形边框颜色
|
||||
leftStrokeColor1: '#435A4E',
|
||||
leftStrokeColor2: '#7CA791',
|
||||
// 左侧矩形填充颜色
|
||||
leftFillColor: '#161A1A',
|
||||
// 左侧矩形左上、右下修饰边角颜色
|
||||
leftStopColor1: '#25673D',
|
||||
leftStopColor2: '#3E674A',
|
||||
leftStopColor3: '#8BE8A3',
|
||||
|
||||
// 左上、左下修饰矩形颜色
|
||||
topLeftFillColor: '#4D815D',
|
||||
bottomLeftFillColor: '#FFE4AC',
|
||||
// 左上、修饰圆形颜色
|
||||
topLeftEllipseColor: '#4A5C4A',
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,311 +0,0 @@
|
|||
<template>
|
||||
<div class="HuoQingDetailModal" @click="clickFrame">
|
||||
<div class="frame">
|
||||
<Frame :w="frameWidth" :h="frameHeight" :dataStyle="option.dataStyle" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
computed,
|
||||
PropType,
|
||||
toRefs,
|
||||
watch,
|
||||
reactive,
|
||||
ref,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
} from 'vue';
|
||||
import { CreateComponentType } from '@/packages/index.d';
|
||||
import { icon } from '@/plugins';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import Frame from './svg/frame.vue';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
|
||||
const chartEditStore = useChartEditStore();
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { w, h, x, y } = toRefs(props.chartConfig.attr);
|
||||
|
||||
const option = reactive({
|
||||
dataStyle: props.chartConfig.option.dataStyle,
|
||||
});
|
||||
watch(
|
||||
() => option.dataStyle.onlyShowLeftFrame,
|
||||
() => {
|
||||
if (option.dataStyle.onlyShowLeftFrame) {
|
||||
w.value = (h.value / 891) * 417;
|
||||
} else {
|
||||
w.value = (h.value / 891) * 1343;
|
||||
}
|
||||
},
|
||||
),
|
||||
{
|
||||
immediate: true,
|
||||
};
|
||||
|
||||
// 弹窗样式
|
||||
const frameWidth = computed(() => {
|
||||
if (option.dataStyle.mask) {
|
||||
return option.dataStyle.maskFrameW;
|
||||
} else {
|
||||
return w.value;
|
||||
}
|
||||
});
|
||||
const frameHeight = computed(() => {
|
||||
if (option.dataStyle.mask) {
|
||||
return option.dataStyle.maskFrameH;
|
||||
} else {
|
||||
return h.value;
|
||||
}
|
||||
});
|
||||
const frameTop = computed(() => {
|
||||
if (option.dataStyle.mask) {
|
||||
return option.dataStyle.maskFrameY;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
const frameLeft = computed(() => {
|
||||
if (option.dataStyle.mask) {
|
||||
return option.dataStyle.maskFrameX;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
// 监听遮罩
|
||||
watch(
|
||||
() => option.dataStyle.mask,
|
||||
() => {
|
||||
if (option.dataStyle.mask) {
|
||||
option.dataStyle.maskFrameX = cloneDeep(x.value);
|
||||
option.dataStyle.maskFrameY = cloneDeep(y.value);
|
||||
option.dataStyle.maskFrameW = cloneDeep(w.value);
|
||||
option.dataStyle.maskFrameH = cloneDeep(h.value);
|
||||
x.value = 0;
|
||||
y.value = 0;
|
||||
w.value = chartEditStore.getEditCanvasConfig.width;
|
||||
h.value = chartEditStore.getEditCanvasConfig.height;
|
||||
option.dataStyle.maskColor = option.dataStyle.maskFrameColor;
|
||||
} else {
|
||||
x.value = option.dataStyle.maskFrameX;
|
||||
y.value = option.dataStyle.maskFrameY;
|
||||
w.value = option.dataStyle.maskFrameW;
|
||||
h.value = option.dataStyle.maskFrameH;
|
||||
option.dataStyle.maskFrameColor = option.dataStyle.maskColor;
|
||||
option.dataStyle.maskColor = '#FFFFFF00';
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => option.dataStyle.maskFrameW,
|
||||
() => {
|
||||
if (option.dataStyle.onlyShowLeftFrame) {
|
||||
option.dataStyle.maskFrameH = (option.dataStyle.maskFrameW * 891) / 417;
|
||||
} else {
|
||||
option.dataStyle.maskFrameH = (option.dataStyle.maskFrameW * 891) / 1343;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// 有遮罩的情况点击
|
||||
function clickFrame(event) {
|
||||
if (!window.location.href.includes('/chart/home/')) {
|
||||
if (option.dataStyle.mask && option.dataStyle.maskClickClose) {
|
||||
chartEditStore.getComponentList.forEach((element) => {
|
||||
if (
|
||||
element.key == props.chartConfig.key ||
|
||||
(element.isGroup && element?.groupList.some((li) => li.key == props.chartConfig.key))
|
||||
) {
|
||||
if (
|
||||
!(
|
||||
element.option.maskFrameX <= event.x &&
|
||||
event.x <= element.option.maskFrameX + element.option.maskFrameW &&
|
||||
element.option.maskFrameY <= event.y &&
|
||||
event.y <= element.option.maskFrameY + element.option.maskFrameH
|
||||
)
|
||||
) {
|
||||
if (!element.status.hide) {
|
||||
element.status.hide = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const num = ref(0);
|
||||
function getHuoQingDetailModalIsNum() {
|
||||
chartEditStore.getComponentList.forEach((element, index) => {
|
||||
if (
|
||||
element.key == props.chartConfig.key ||
|
||||
(element.isGroup && element?.groupList.some((li) => li.key == props.chartConfig.key))
|
||||
) {
|
||||
num.value = index;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let isClickUpdate = false;
|
||||
watch(
|
||||
() => chartEditStore.getComponentList[num.value]?.status?.hide,
|
||||
() => {
|
||||
// if (!chartEditStore.getComponentList[num.value]?.status?.hide) {
|
||||
isClickUpdate = true;
|
||||
// }
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
// 处理无遮罩的情况下的鼠标点击事件
|
||||
const handleKeydown = (event: MouseEvent) => {
|
||||
if (!window.location.href.includes('/chart/home/')) {
|
||||
if (!option.dataStyle.mask && option.dataStyle.maskClickClose) {
|
||||
chartEditStore.getComponentList.forEach((element) => {
|
||||
// 单个
|
||||
if (
|
||||
element.key == props.chartConfig.key ||
|
||||
(element.isGroup && element?.groupList.some((li) => li.key == props.chartConfig.key))
|
||||
) {
|
||||
if (
|
||||
!(
|
||||
element.attr.x <= event.x &&
|
||||
event.x <= element.attr.x + element.attr.w &&
|
||||
element.attr.y <= event.y &&
|
||||
event.y <= element.attr.y + element.attr.h
|
||||
)
|
||||
) {
|
||||
if (!element.status.hide && !isClickUpdate) {
|
||||
element.status.hide = true;
|
||||
} else {
|
||||
isClickUpdate = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 在组件挂载时添加监听器
|
||||
onMounted(() => {
|
||||
getHuoQingDetailModalIsNum();
|
||||
window.addEventListener('click', handleKeydown);
|
||||
});
|
||||
// 在组件卸载时移除监听器
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('click', handleKeydown);
|
||||
});
|
||||
|
||||
// 添加鼠标拖动监听器
|
||||
let isGroup = 0;
|
||||
addListener();
|
||||
// 监听器-参数
|
||||
let isDragging = false;
|
||||
let initialMouseX;
|
||||
let initialMouseY;
|
||||
let initialDocumentX;
|
||||
let initialDocumentY;
|
||||
|
||||
// 添加鼠标拖动监听器
|
||||
function addListener() {
|
||||
if (option.dataStyle.mouseListener) {
|
||||
chartEditStore.getComponentList.forEach((element) => {
|
||||
// 未分组
|
||||
if (isGroup == 1 || element.key == 'HuoQingDetailModal') {
|
||||
isGroup = 1;
|
||||
setTimeout(() => {
|
||||
const dragDocument: any = document.querySelector('.HuoQingDetailModal');
|
||||
if (dragDocument) {
|
||||
// 鼠标按下
|
||||
dragDocument.addEventListener('mousedown', function (event) {
|
||||
isDragging = true;
|
||||
initialMouseX = event.clientX;
|
||||
initialMouseY = event.clientY;
|
||||
initialDocumentX = cloneDeep(x.value);
|
||||
initialDocumentY = cloneDeep(y.value);
|
||||
dragDocument.style.cursor = 'grabbing';
|
||||
});
|
||||
// 鼠标移动
|
||||
dragDocument.addEventListener('mousemove', function (event) {
|
||||
if (isDragging) {
|
||||
const deltaX = event.clientX - initialMouseX;
|
||||
const deltaY = event.clientY - initialMouseY;
|
||||
x.value = initialDocumentX + deltaX;
|
||||
y.value = initialMouseY + deltaY;
|
||||
}
|
||||
});
|
||||
// 鼠标放开
|
||||
dragDocument.addEventListener('mouseup', function (event) {
|
||||
isDragging = false;
|
||||
dragDocument.style.cursor = 'default';
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
// 分组
|
||||
if (
|
||||
isGroup == 2 ||
|
||||
(element.isGroup && element?.groupList?.some((li) => li.key == 'HuoQingDetailModal'))
|
||||
) {
|
||||
isGroup = 2;
|
||||
setTimeout(() => {
|
||||
const dragDocument = document.getElementById(element.id); // 使用 id 获取元素
|
||||
if (dragDocument) {
|
||||
// 鼠标按下
|
||||
dragDocument.addEventListener('mousedown', function (event) {
|
||||
isDragging = true;
|
||||
initialMouseX = event.clientX;
|
||||
initialMouseY = event.clientY;
|
||||
initialDocumentX = dragDocument.offsetLeft;
|
||||
initialDocumentY = dragDocument.offsetTop;
|
||||
dragDocument.style.cursor = 'grabbing';
|
||||
});
|
||||
// 鼠标移动
|
||||
dragDocument.addEventListener('mousemove', function (event) {
|
||||
if (isDragging) {
|
||||
const deltaX = event.clientX - initialMouseX;
|
||||
const deltaY = event.clientY - initialMouseY;
|
||||
dragDocument.style.left = initialDocumentX + deltaX + 'px';
|
||||
dragDocument.style.top = initialDocumentY + deltaY + 'px';
|
||||
}
|
||||
});
|
||||
// 鼠标放开
|
||||
dragDocument.addEventListener('mouseup', function (event) {
|
||||
isDragging = false;
|
||||
dragDocument.style.cursor = 'default';
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.HuoQingDetailModal {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: v-bind('`${w}px`');
|
||||
height: v-bind('`${h}px`');
|
||||
background: v-bind('`${option.dataStyle.maskColor}`');
|
||||
}
|
||||
.frame {
|
||||
position: absolute;
|
||||
top: v-bind('`${frameTop}px`');
|
||||
left: v-bind('`${frameLeft}px`');
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,596 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<svg
|
||||
v-if="props.dataStyle.onlyShowLeftFrame"
|
||||
:width="props.w"
|
||||
:height="props.h"
|
||||
viewBox="0 0 417 891"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
d="M45.3704527,854.367225 L117.212468,854.367225 L117.212468,854.367225 L126.073687,847.147278 L269.344908,847.147278 L277.634385,855 L378.749294,855 C390.764133,855 400.504084,845.260049 400.504084,833.245211 L400.504084,4.46630114 L400.504084,4.46630114 L50.4892271,4.46630114 C38.4743887,4.46630114 28.7344378,14.2062521 28.7344378,26.2210905 L28.7344378,837.73121 C28.7344378,846.919027 36.1826354,854.367225 45.3704527,854.367225 Z"
|
||||
id="path-HuoQingDetailModal-0-1"
|
||||
></path>
|
||||
<filter
|
||||
x="-8.9%"
|
||||
y="-2.1%"
|
||||
width="117.8%"
|
||||
height="108.4%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-HuoQingDetailModal-0-2"
|
||||
>
|
||||
<feMorphology
|
||||
radius="0.639846743"
|
||||
operator="dilate"
|
||||
in="SourceAlpha"
|
||||
result="shadowSpreadOuter1"
|
||||
></feMorphology>
|
||||
<feOffset dx="0" dy="20" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur
|
||||
stdDeviation="7.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 0 0 0 0 0 0 0 0 0 0.5 0"
|
||||
type="matrix"
|
||||
in="shadowBlurOuter1"
|
||||
></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient
|
||||
x1="50%"
|
||||
y1="0%"
|
||||
x2="50%"
|
||||
y2="100%"
|
||||
id="linearGradient-HuoQingDetailModal-0-3"
|
||||
>
|
||||
<stop stop-color="#344534" offset="0%"></stop>
|
||||
<stop stop-color="#647B64" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<polygon
|
||||
id="path-HuoQingDetailModal-0-4"
|
||||
points="-1.00972311e-14 -4.20781315e-13 14.0704612 -4.20781315e-13 16.8354658 2.40668967 2.76500463 2.40668967"
|
||||
></polygon>
|
||||
<filter
|
||||
x="-107.9%"
|
||||
y="-685.6%"
|
||||
width="315.9%"
|
||||
height="1471.2%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-HuoQingDetailModal-0-5"
|
||||
>
|
||||
<feMorphology
|
||||
radius="0.5"
|
||||
operator="dilate"
|
||||
in="SourceAlpha"
|
||||
result="shadowSpreadOuter1"
|
||||
></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur
|
||||
stdDeviation="5"
|
||||
in="shadowOffsetOuter1"
|
||||
result="shadowBlurOuter1"
|
||||
></feGaussianBlur>
|
||||
<feColorMatrix
|
||||
values="0 0 0 0 1 0 0 0 0 0.462494493 0 0 0 0 0 0 0 0 0.7 0"
|
||||
type="matrix"
|
||||
in="shadowBlurOuter1"
|
||||
></feColorMatrix>
|
||||
</filter>
|
||||
<polygon
|
||||
id="path-HuoQingDetailModal-0-6"
|
||||
points="20.0745787 6.12769321e-14 34.1450399 6.12769321e-14 36.9100445 2.40668967 22.8395833 2.40668967"
|
||||
></polygon>
|
||||
<filter
|
||||
x="-107.9%"
|
||||
y="-685.6%"
|
||||
width="315.9%"
|
||||
height="1471.2%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-HuoQingDetailModal-0-7"
|
||||
>
|
||||
<feMorphology
|
||||
radius="0.5"
|
||||
operator="dilate"
|
||||
in="SourceAlpha"
|
||||
result="shadowSpreadOuter1"
|
||||
></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur
|
||||
stdDeviation="5"
|
||||
in="shadowOffsetOuter1"
|
||||
result="shadowBlurOuter1"
|
||||
></feGaussianBlur>
|
||||
<feColorMatrix
|
||||
values="0 0 0 0 1 0 0 0 0 0.462494493 0 0 0 0 0 0 0 0 0.7 0"
|
||||
type="matrix"
|
||||
in="shadowBlurOuter1"
|
||||
></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient
|
||||
x1="50.3209681%"
|
||||
y1="99.6790319%"
|
||||
x2="50.3209681%"
|
||||
y2="0.320968094%"
|
||||
id="linearGradient-HuoQingDetailModal-0-8"
|
||||
>
|
||||
<stop stop-color="#25673D" stop-opacity="0.8" offset="0.00819493007%"></stop>
|
||||
<stop stop-color="#3E674A" offset="38.6691434%"></stop>
|
||||
<stop stop-color="#8BE8A3" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
x1="50.3209681%"
|
||||
y1="99.6790319%"
|
||||
x2="50.3209681%"
|
||||
y2="0.320968094%"
|
||||
id="linearGradient-HuoQingDetailModal-0-9"
|
||||
>
|
||||
<stop
|
||||
:stop-color="props.dataStyle.leftStopColor1"
|
||||
stop-opacity="0.8"
|
||||
offset="0.00819493007%"
|
||||
></stop>
|
||||
<stop :stop-color="props.dataStyle.leftStopColor2" offset="38.6691434%"></stop>
|
||||
<stop :stop-color="props.dataStyle.leftStopColor3" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智库-切图版" transform="translate(-416, -168)">
|
||||
<g id="弹窗---" transform="translate(416, 168)">
|
||||
<g id="编组-34" transform="translate(0.2674, 0.0542)">
|
||||
<g id="路径-22">
|
||||
<use
|
||||
fill="black"
|
||||
fill-opacity="1"
|
||||
filter="url(#filter-HuoQingDetailModal-0-2)"
|
||||
xlink:href="#path-HuoQingDetailModal-0-1"
|
||||
></use>
|
||||
<use
|
||||
:stroke="props.dataStyle.leftStrokeColor1"
|
||||
stroke-width="1.27969349"
|
||||
fill-opacity="0.85"
|
||||
:fill="props.dataStyle.leftFillColor"
|
||||
fill-rule="evenodd"
|
||||
xlink:href="#path-HuoQingDetailModal-0-1"
|
||||
></use>
|
||||
</g>
|
||||
<g
|
||||
id="编组-5"
|
||||
transform="translate(297.4837, 17.9031) scale(-1, 1) rotate(-180) translate(-297.4837, -17.9031)translate(198.9905, 15.9835)"
|
||||
>
|
||||
<line
|
||||
x1="-5.06780004e-13"
|
||||
y1="1.91954023"
|
||||
x2="196.976869"
|
||||
y2="1.91954023"
|
||||
id="路径-6"
|
||||
stroke="url(#linearGradient-HuoQingDetailModal-0-3)"
|
||||
stroke-width="1.27969349"
|
||||
opacity="0.399999976"
|
||||
></line>
|
||||
<path
|
||||
d="M142.951484,3.83908046 C144.011153,3.83908046 144.870183,2.97967303 144.870183,1.91954023 C144.870183,0.859407434 144.011153,0 142.951484,0 C141.891816,0 141.032785,0.859407434 141.032785,1.91954023 C141.032785,2.97967303 141.891816,3.83908046 142.951484,3.83908046 Z"
|
||||
id="椭圆形"
|
||||
:fill="props.dataStyle.topLeftEllipseColor"
|
||||
></path>
|
||||
<ellipse
|
||||
id="椭圆形"
|
||||
:fill="props.dataStyle.topLeftEllipseColor"
|
||||
cx="70.0409125"
|
||||
cy="1.91954023"
|
||||
rx="1.91869926"
|
||||
ry="1.91954023"
|
||||
></ellipse>
|
||||
</g>
|
||||
<path
|
||||
d="M52.8631705,861.176833 L124.732625,861.176833 L124.732625,861.176833 L132.371139,853.956886 L276.274974,853.956886 L283.750917,861.176833 L381.026745,861.176833 C395.161849,861.176833 406.620615,849.718067 406.620615,835.582962 L406.620615,10.8647686 L406.620615,10.8647686 L56.6416991,10.8647686 C44.6268607,10.8647686 34.8869098,20.6047195 34.8869098,32.6195579 C34.8869098,32.6315283 34.8869197,32.6434986 34.8869394,32.6554689 L36.2271782,844.568279 C36.242327,853.745361 43.6860756,861.176833 52.8631705,861.176833 Z"
|
||||
id="路径-22"
|
||||
:stroke="props.dataStyle.leftStrokeColor2"
|
||||
stroke-width="1.27969349"
|
||||
></path>
|
||||
<g
|
||||
id="编组"
|
||||
transform="translate(150.0126, 859.9735) scale(1, -1) translate(-150.0126, -859.9735)translate(131.5576, 858.7701)"
|
||||
>
|
||||
<g id="矩形">
|
||||
<use
|
||||
fill="black"
|
||||
fill-opacity="1"
|
||||
filter="url(#filter-HuoQingDetailModal-0-5)"
|
||||
xlink:href="#path-HuoQingDetailModal-0-4"
|
||||
></use>
|
||||
<use
|
||||
:fill="props.dataStyle.bottomLeftFillColor"
|
||||
fill-rule="evenodd"
|
||||
xlink:href="#path-HuoQingDetailModal-0-4"
|
||||
></use>
|
||||
</g>
|
||||
<g id="矩形" opacity="0.399999976">
|
||||
<use
|
||||
fill="black"
|
||||
fill-opacity="1"
|
||||
filter="url(#filter-HuoQingDetailModal-0-7)"
|
||||
xlink:href="#path-HuoQingDetailModal-0-6"
|
||||
></use>
|
||||
<use
|
||||
:fill="props.dataStyle.bottomLeftFillColor"
|
||||
fill-rule="evenodd"
|
||||
xlink:href="#path-HuoQingDetailModal-0-6"
|
||||
></use>
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="编组"
|
||||
transform="translate(114.9289, 1.4324)"
|
||||
:fill="props.dataStyle.topLeftFillColor"
|
||||
>
|
||||
<polygon
|
||||
id="矩形"
|
||||
points="-1.54661681e-14 -6.4452071e-13 21.5520588 -6.4452071e-13 25.7872819 3.68638359 4.2352231 3.68638359"
|
||||
></polygon>
|
||||
</g>
|
||||
<g
|
||||
id="编组备份"
|
||||
opacity="0.59407988"
|
||||
transform="translate(147.9289, 1.4324)"
|
||||
:fill="props.dataStyle.topLeftFillColor"
|
||||
>
|
||||
<polygon
|
||||
id="矩形"
|
||||
points="-1.54661681e-14 -6.4452071e-13 21.5520588 -6.4452071e-13 25.7872819 3.68638359 4.2352231 3.68638359"
|
||||
></polygon>
|
||||
</g>
|
||||
<polygon
|
||||
id="路径-21"
|
||||
fill="url(#linearGradient-HuoQingDetailModal-0-8)"
|
||||
points="25 113.435276 25 26.2109979 51.1995145 8.19751628e-13 101.795125 8.19751628e-13 107.97292 4.73651289 54.0862279 4.73651289 29.7344378 29.0989765 29.7344378 120.104002"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="路径-21"
|
||||
fill="url(#linearGradient-HuoQingDetailModal-0-9)"
|
||||
transform="translate(369.9569, 767.0012) scale(-1, -1) translate(-369.9569, -767.0012)"
|
||||
points="329.913794 858.775264 329.913794 693.161091 354.341504 670.002367 405.265562 670.002367 410 673.294891 358.671574 673.294891 333.204875 698.772752 333.204875 864"
|
||||
></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<svg
|
||||
v-if="!props.dataStyle.onlyShowLeftFrame"
|
||||
:width="props.w"
|
||||
:height="props.h"
|
||||
viewBox="0 0 1343 891"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
d="M54.4074739,833.437486 L344.542554,833.437486 L344.542554,833.437486 L375.26618,826.400333 L872.016265,826.400333 L900.757548,834.05424 L1305.01667,834.05424 C1317.03151,834.05424 1326.77146,824.31429 1326.77146,812.299451 L1326.77146,5.0542405 L1326.77146,5.0542405 L59.5262483,5.0542405 C47.5114099,5.0542405 37.771459,14.7941915 37.771459,26.8090299 L37.771459,816.801471 C37.771459,825.989288 45.2196565,833.437486 54.4074739,833.437486 Z"
|
||||
id="path-HuoQingDetailModal-1-1"
|
||||
></path>
|
||||
<filter
|
||||
x="-2.6%"
|
||||
y="-2.2%"
|
||||
width="105.1%"
|
||||
height="108.6%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-HuoQingDetailModal-1-3"
|
||||
>
|
||||
<feMorphology
|
||||
radius="0.639846743"
|
||||
operator="dilate"
|
||||
in="SourceAlpha"
|
||||
result="shadowSpreadOuter1"
|
||||
></feMorphology>
|
||||
<feOffset dx="0" dy="20" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur
|
||||
stdDeviation="7.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 0 0 0 0 0 0 0 0 0 0.5 0"
|
||||
type="matrix"
|
||||
in="shadowBlurOuter1"
|
||||
></feColorMatrix>
|
||||
</filter>
|
||||
<path
|
||||
d="M45.3704527,854.367225 L117.212468,854.367225 L117.212468,854.367225 L126.073687,847.147278 L269.344908,847.147278 L277.634385,855 L378.749294,855 C390.764133,855 400.504084,845.260049 400.504084,833.245211 L400.504084,4.46630114 L400.504084,4.46630114 L50.4892271,4.46630114 C38.4743887,4.46630114 28.7344378,14.2062521 28.7344378,26.2210905 L28.7344378,837.73121 C28.7344378,846.919027 36.1826354,854.367225 45.3704527,854.367225 Z"
|
||||
id="path-HuoQingDetailModal-1-4"
|
||||
></path>
|
||||
<filter
|
||||
x="-8.9%"
|
||||
y="-2.1%"
|
||||
width="117.8%"
|
||||
height="108.4%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-HuoQingDetailModal-1-5"
|
||||
>
|
||||
<feMorphology
|
||||
radius="0.639846743"
|
||||
operator="dilate"
|
||||
in="SourceAlpha"
|
||||
result="shadowSpreadOuter1"
|
||||
></feMorphology>
|
||||
<feOffset dx="0" dy="20" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur
|
||||
stdDeviation="7.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 0 0 0 0 0 0 0 0 0 0.5 0"
|
||||
type="matrix"
|
||||
in="shadowBlurOuter1"
|
||||
></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient
|
||||
x1="50%"
|
||||
y1="0%"
|
||||
x2="50%"
|
||||
y2="100%"
|
||||
id="linearGradient-HuoQingDetailModal-1-6"
|
||||
>
|
||||
<stop stop-color="#344534" offset="0%"></stop>
|
||||
<stop stop-color="#647B64" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<polygon
|
||||
id="path-HuoQingDetailModal-1-7"
|
||||
points="-1.00972311e-14 -4.20781315e-13 14.0704612 -4.20781315e-13 16.8354658 2.40668967 2.76500463 2.40668967"
|
||||
></polygon>
|
||||
<filter
|
||||
x="-107.9%"
|
||||
y="-685.6%"
|
||||
width="315.9%"
|
||||
height="1471.2%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-HuoQingDetailModal-1-8"
|
||||
>
|
||||
<feMorphology
|
||||
radius="0.5"
|
||||
operator="dilate"
|
||||
in="SourceAlpha"
|
||||
result="shadowSpreadOuter1"
|
||||
></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur
|
||||
stdDeviation="5"
|
||||
in="shadowOffsetOuter1"
|
||||
result="shadowBlurOuter1"
|
||||
></feGaussianBlur>
|
||||
<feColorMatrix
|
||||
values="0 0 0 0 1 0 0 0 0 0.462494493 0 0 0 0 0 0 0 0 0.7 0"
|
||||
type="matrix"
|
||||
in="shadowBlurOuter1"
|
||||
></feColorMatrix>
|
||||
</filter>
|
||||
<polygon
|
||||
id="path-HuoQingDetailModal-1-9"
|
||||
points="20.0745787 6.12769321e-14 34.1450399 6.12769321e-14 36.9100445 2.40668967 22.8395833 2.40668967"
|
||||
></polygon>
|
||||
<filter
|
||||
x="-107.9%"
|
||||
y="-685.6%"
|
||||
width="315.9%"
|
||||
height="1471.2%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-HuoQingDetailModal-1-10"
|
||||
>
|
||||
<feMorphology
|
||||
radius="0.5"
|
||||
operator="dilate"
|
||||
in="SourceAlpha"
|
||||
result="shadowSpreadOuter1"
|
||||
></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur
|
||||
stdDeviation="5"
|
||||
in="shadowOffsetOuter1"
|
||||
result="shadowBlurOuter1"
|
||||
></feGaussianBlur>
|
||||
<feColorMatrix
|
||||
values="0 0 0 0 1 0 0 0 0 0.462494493 0 0 0 0 0 0 0 0 0.7 0"
|
||||
type="matrix"
|
||||
in="shadowBlurOuter1"
|
||||
></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient
|
||||
x1="50.3209681%"
|
||||
y1="99.6790319%"
|
||||
x2="50.3209681%"
|
||||
y2="0.320968094%"
|
||||
id="linearGradient-HuoQingDetailModal-1-11"
|
||||
>
|
||||
<stop
|
||||
:stop-color="props.dataStyle.leftStopColor1"
|
||||
stop-opacity="0.8"
|
||||
offset="0.00819493007%"
|
||||
></stop>
|
||||
<stop :stop-color="props.dataStyle.leftStopColor2" offset="38.6691434%"></stop>
|
||||
<stop :stop-color="props.dataStyle.leftStopColor3" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
x1="50.3209681%"
|
||||
y1="99.6790319%"
|
||||
x2="50.3209681%"
|
||||
y2="0.320968094%"
|
||||
id="linearGradient-HuoQingDetailModal-1-12"
|
||||
>
|
||||
<stop
|
||||
:stop-color="props.dataStyle.leftStopColor1"
|
||||
stop-opacity="0.8"
|
||||
offset="0.00819493007%"
|
||||
></stop>
|
||||
<stop :stop-color="props.dataStyle.leftStopColor2" offset="38.6691434%"></stop>
|
||||
<stop :stop-color="props.dataStyle.leftStopColor3" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智库-切图版" transform="translate(-416, -168)">
|
||||
<g id="编组-35" transform="translate(416, 168)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-HuoQingDetailModal-1-1"></use>
|
||||
</mask>
|
||||
<g id="蒙版">
|
||||
<use
|
||||
fill="black"
|
||||
fill-opacity="1"
|
||||
filter="url(#filter-HuoQingDetailModal-1-3)"
|
||||
xlink:href="#path-HuoQingDetailModal-1-1"
|
||||
></use>
|
||||
<use
|
||||
:stroke="props.dataStyle.allUseStrokeColor"
|
||||
stroke-width="1.27969349"
|
||||
:fill="props.dataStyle.allUseFillColor"
|
||||
fill-rule="evenodd"
|
||||
xlink:href="#path-HuoQingDetailModal-1-1"
|
||||
></use>
|
||||
</g>
|
||||
<g id="编组-34" transform="translate(0.2674, 0.0542)">
|
||||
<g id="路径-22">
|
||||
<use
|
||||
fill="black"
|
||||
fill-opacity="1"
|
||||
filter="url(#filter-HuoQingDetailModal-1-5)"
|
||||
xlink:href="#path-HuoQingDetailModal-1-4"
|
||||
></use>
|
||||
<use
|
||||
:stroke="props.dataStyle.leftStrokeColor1"
|
||||
stroke-width="1.27969349"
|
||||
fill-opacity="0.85"
|
||||
:fill="props.dataStyle.leftFillColor"
|
||||
fill-rule="evenodd"
|
||||
xlink:href="#path-HuoQingDetailModal-1-4"
|
||||
></use>
|
||||
</g>
|
||||
<g
|
||||
id="编组-5"
|
||||
transform="translate(297.4837, 17.9031) scale(-1, 1) rotate(-180) translate(-297.4837, -17.9031)translate(198.9905, 15.9835)"
|
||||
>
|
||||
<line
|
||||
x1="-5.06780004e-13"
|
||||
y1="1.91954023"
|
||||
x2="196.976869"
|
||||
y2="1.91954023"
|
||||
id="路径-6"
|
||||
stroke="url(#linearGradient-HuoQingDetailModal-1-6)"
|
||||
stroke-width="1.27969349"
|
||||
opacity="0.399999976"
|
||||
></line>
|
||||
<path
|
||||
d="M142.951484,3.83908046 C144.011153,3.83908046 144.870183,2.97967303 144.870183,1.91954023 C144.870183,0.859407434 144.011153,0 142.951484,0 C141.891816,0 141.032785,0.859407434 141.032785,1.91954023 C141.032785,2.97967303 141.891816,3.83908046 142.951484,3.83908046 Z"
|
||||
id="椭圆形"
|
||||
:fill="props.dataStyle.topLeftEllipseColor"
|
||||
></path>
|
||||
<ellipse
|
||||
id="椭圆形"
|
||||
:fill="props.dataStyle.topLeftEllipseColor"
|
||||
cx="70.0409125"
|
||||
cy="1.91954023"
|
||||
rx="1.91869926"
|
||||
ry="1.91954023"
|
||||
></ellipse>
|
||||
</g>
|
||||
<path
|
||||
d="M52.8631705,861.176833 L124.732625,861.176833 L124.732625,861.176833 L132.371139,853.956886 L276.274974,853.956886 L283.750917,861.176833 L381.026745,861.176833 C395.161849,861.176833 406.620615,849.718067 406.620615,835.582962 L406.620615,10.8647686 L406.620615,10.8647686 L56.6416991,10.8647686 C44.6268607,10.8647686 34.8869098,20.6047195 34.8869098,32.6195579 C34.8869098,32.6315283 34.8869197,32.6434986 34.8869394,32.6554689 L36.2271782,844.568279 C36.242327,853.745361 43.6860756,861.176833 52.8631705,861.176833 Z"
|
||||
id="路径-22"
|
||||
:stroke="props.dataStyle.leftStrokeColor2"
|
||||
stroke-width="1.27969349"
|
||||
></path>
|
||||
<g
|
||||
id="编组"
|
||||
transform="translate(150.0126, 859.9735) scale(1, -1) translate(-150.0126, -859.9735)translate(131.5576, 858.7701)"
|
||||
>
|
||||
<g id="矩形">
|
||||
<use
|
||||
fill="black"
|
||||
fill-opacity="1"
|
||||
filter="url(#filter-HuoQingDetailModal-1-8)"
|
||||
xlink:href="#path-HuoQingDetailModal-1-7"
|
||||
></use>
|
||||
<use
|
||||
:fill="props.dataStyle.bottomLeftFillColor"
|
||||
fill-rule="evenodd"
|
||||
xlink:href="#path-HuoQingDetailModal-1-7"
|
||||
></use>
|
||||
</g>
|
||||
<g id="矩形" opacity="0.399999976">
|
||||
<use
|
||||
fill="black"
|
||||
fill-opacity="1"
|
||||
filter="url(#filter-HuoQingDetailModal-1-10)"
|
||||
xlink:href="#path-HuoQingDetailModal-1-9"
|
||||
></use>
|
||||
<use
|
||||
:fill="props.dataStyle.bottomLeftFillColor"
|
||||
fill-rule="evenodd"
|
||||
xlink:href="#path-HuoQingDetailModal-1-9"
|
||||
></use>
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="编组"
|
||||
transform="translate(114.9289, 1.4324)"
|
||||
:fill="props.dataStyle.topLeftFillColor"
|
||||
>
|
||||
<polygon
|
||||
id="矩形"
|
||||
points="-1.54661681e-14 -6.4452071e-13 21.5520588 -6.4452071e-13 25.7872819 3.68638359 4.2352231 3.68638359"
|
||||
></polygon>
|
||||
</g>
|
||||
<g
|
||||
id="编组备份"
|
||||
opacity="0.59407988"
|
||||
transform="translate(147.9289, 1.4324)"
|
||||
:fill="props.dataStyle.topLeftFillColor"
|
||||
>
|
||||
<polygon
|
||||
id="矩形"
|
||||
points="-1.54661681e-14 -6.4452071e-13 21.5520588 -6.4452071e-13 25.7872819 3.68638359 4.2352231 3.68638359"
|
||||
></polygon>
|
||||
</g>
|
||||
<polygon
|
||||
id="路径-21"
|
||||
fill="url(#linearGradient-HuoQingDetailModal-1-11)"
|
||||
points="25 113.435276 25 26.2109979 51.1995145 8.19751628e-13 101.795125 8.19751628e-13 107.97292 4.73651289 54.0862279 4.73651289 29.7344378 29.0989765 29.7344378 120.104002"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="路径-21"
|
||||
fill="url(#linearGradient-HuoQingDetailModal-1-12)"
|
||||
transform="translate(369.9569, 767.0012) scale(-1, -1) translate(-369.9569, -767.0012)"
|
||||
points="329.913794 858.775264 329.913794 693.161091 354.341504 670.002367 405.265562 670.002367 410 673.294891 358.671574 673.294891 333.204875 698.772752 333.204875 864"
|
||||
></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(['w', 'h', 'dataStyle']);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { HuoQingDetailModalLeftConfig } from './index'
|
||||
|
||||
export const option = {
|
||||
dataStyle:{
|
||||
mouseListener: true,
|
||||
},
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = HuoQingDetailModalLeftConfig.key
|
||||
public attr = { ...chartInitConfig, w: 394, h: 891, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(HuoQingDetailModalLeftConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<CollapseItem name="弹窗设置" :expanded="true">
|
||||
<SettingItemBox name="样式设置">
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.dataStyle.mouseListener" size="small" />
|
||||
<n-text>是否开启弹窗拖动</n-text>
|
||||
</n-space>
|
||||
</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>
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const HuoQingDetailModalConfig: ConfigType = {
|
||||
key: 'HuoQingDetailModal',
|
||||
chartKey: 'VHuoQingDetailModal',
|
||||
conKey: 'VCHuoQingDetailModal',
|
||||
title: '火情详情弹窗框架',
|
||||
export const HuoQingDetailModalLeftConfig: ConfigType = {
|
||||
key: 'HuoQingDetailModalLeft',
|
||||
chartKey: 'VHuoQingDetailModalLeft',
|
||||
conKey: 'VCHuoQingDetailModalLeft',
|
||||
title: '火情详情弹窗框架（左）',
|
||||
category: ChatCategoryEnum.ZHIKU,
|
||||
categoryName: ChatCategoryEnumName.ZHIKU,
|
||||
package: PackagesCategoryEnum.ZHIKU,
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<div class="HuoQingDetailModalLeft"> </div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType, toRefs, reactive } from 'vue';
|
||||
import { CreateComponentType } from '@/packages/index.d';
|
||||
import { icon } from '@/plugins';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
|
||||
const chartEditStore = useChartEditStore();
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { w, h, x, y } = toRefs(props.chartConfig.attr);
|
||||
|
||||
const option = reactive({
|
||||
dataStyle: props.chartConfig.option.dataStyle,
|
||||
});
|
||||
|
||||
// 添加鼠标拖动监听器
|
||||
let isGroup = 0;
|
||||
addListener();
|
||||
// 监听器-参数
|
||||
let isDragging = false;
|
||||
let initialMouseX;
|
||||
let initialMouseY;
|
||||
let initialDocumentX;
|
||||
let initialDocumentY;
|
||||
|
||||
// 添加鼠标拖动监听器
|
||||
function addListener() {
|
||||
if (option.dataStyle.mouseListener) {
|
||||
chartEditStore.getComponentList.forEach((element) => {
|
||||
// 未分组
|
||||
if (isGroup == 1 || element.key == 'HuoQingDetailModalLeft') {
|
||||
isGroup = 1;
|
||||
setTimeout(() => {
|
||||
const dragDocument: any = document.querySelector('.HuoQingDetailModalLeft');
|
||||
if (dragDocument) {
|
||||
// 鼠标按下
|
||||
dragDocument.addEventListener('mousedown', function (event) {
|
||||
isDragging = true;
|
||||
initialMouseX = event.clientX;
|
||||
initialMouseY = event.clientY;
|
||||
initialDocumentX = cloneDeep(x.value);
|
||||
initialDocumentY = cloneDeep(y.value);
|
||||
dragDocument.style.cursor = 'grabbing';
|
||||
});
|
||||
// 鼠标移动
|
||||
dragDocument.addEventListener('mousemove', function (event) {
|
||||
if (isDragging) {
|
||||
const deltaX = event.clientX - initialMouseX;
|
||||
const deltaY = event.clientY - initialMouseY;
|
||||
x.value = initialDocumentX + deltaX;
|
||||
y.value = initialMouseY + deltaY;
|
||||
}
|
||||
});
|
||||
// 鼠标放开
|
||||
dragDocument.addEventListener('mouseup', function (event) {
|
||||
isDragging = false;
|
||||
dragDocument.style.cursor = 'default';
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
// 分组
|
||||
if (
|
||||
isGroup == 2 ||
|
||||
(element.isGroup && element?.groupList?.some((li) => li.key == 'HuoQingDetailModalLeft'))
|
||||
) {
|
||||
isGroup = 2;
|
||||
setTimeout(() => {
|
||||
const dragDocument = document.getElementById(element.id); // 使用 id 获取元素
|
||||
if (dragDocument) {
|
||||
// 鼠标按下
|
||||
dragDocument.addEventListener('mousedown', function (event) {
|
||||
isDragging = true;
|
||||
initialMouseX = event.clientX;
|
||||
initialMouseY = event.clientY;
|
||||
initialDocumentX = dragDocument.offsetLeft;
|
||||
initialDocumentY = dragDocument.offsetTop;
|
||||
dragDocument.style.cursor = 'grabbing';
|
||||
});
|
||||
// 鼠标移动
|
||||
dragDocument.addEventListener('mousemove', function (event) {
|
||||
if (isDragging) {
|
||||
const deltaX = event.clientX - initialMouseX;
|
||||
const deltaY = event.clientY - initialMouseY;
|
||||
dragDocument.style.left = initialDocumentX + deltaX + 'px';
|
||||
dragDocument.style.top = initialDocumentY + deltaY + 'px';
|
||||
}
|
||||
});
|
||||
// 鼠标放开
|
||||
dragDocument.addEventListener('mouseup', function (event) {
|
||||
isDragging = false;
|
||||
dragDocument.style.cursor = 'default';
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.HuoQingDetailModalLeft {
|
||||
width: v-bind('`${w}px`');
|
||||
height: v-bind('`${h}px`');
|
||||
background-image: url('@/assets/images/chart/zhiku/component/HuoQingDetailModalLeft.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</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 { HuoQingDetailModalRightConfig } from './index'
|
||||
|
||||
export const option = {
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = HuoQingDetailModalRightConfig.key
|
||||
public attr = { ...chartInitConfig, w: 935, h: 866, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(HuoQingDetailModalRightConfig)
|
||||
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 HuoQingDetailModalRightConfig: ConfigType = {
|
||||
key: 'HuoQingDetailModalRight',
|
||||
chartKey: 'VHuoQingDetailModalRight',
|
||||
conKey: 'VCHuoQingDetailModalRight',
|
||||
title: '火情详情弹窗框架(右)',
|
||||
category: ChatCategoryEnum.ZHIKU,
|
||||
categoryName: ChatCategoryEnumName.ZHIKU,
|
||||
package: PackagesCategoryEnum.ZHIKU,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'HuoQingDetailModal.png'
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="HuoQingDetailModalRight"> </div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue';
|
||||
import { CreateComponentType } from '@/packages/index.d';
|
||||
import { icon } from '@/plugins';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
|
||||
const chartEditStore = useChartEditStore();
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const { w, h } = toRefs(props.chartConfig.attr);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.HuoQingDetailModalRight {
|
||||
width: v-bind('`${w}px`');
|
||||
height: v-bind('`${h}px`');
|
||||
background-image: url('@/assets/images/chart/zhiku/component/HuoQingDetailModalRight.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,12 +6,7 @@
|
|||
"content": "临沂市，山东省辖地级市，位于山东省东南部，地跨北纬34°22′～36°13′，东经117°24′～119°11′之间，属温带季风气候，四季分明，雨热同季，地势自北而南有沂山、蒙山、尼山3条主要山脉延伸，控制着沂沭河上游及其支流的流向，向南构成的扇状临郯苍平原是山东三平原之一。",
|
||||
"time": "2025-02-11 01:27:14",
|
||||
"imageurl": [ "@/assets/images/chart/zhigan/component/ModalCarouselPng01.png", "@/assets/images/chart/zhigan/component/ModalCarouselPng02.png" ],
|
||||
"videos": [
|
||||
{
|
||||
"title": "XZD153狼窝沟西南",
|
||||
"videourl": "74b95e6575d741489b9a9061bb646467",
|
||||
"manufacturer": "海康"
|
||||
},
|
||||
"videos": [
|
||||
{
|
||||
"title":"费县马庄镇陈家鱼后村南斜坡后村",
|
||||
"videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv",
|
||||
|
|
@ -34,12 +29,7 @@
|
|||
"type": "success",
|
||||
"content": "",
|
||||
"time": "2025-02-11 01:27:15",
|
||||
"imageurl": "@/assets/images/chart/zhigan/component/ModalCarouselPng03.png",
|
||||
"videos": {
|
||||
"title": "XZD153狼窝沟西南",
|
||||
"videourl": "74b95e6575d741489b9a9061bb646467",
|
||||
"manufacturer": "海康"
|
||||
}
|
||||
"imageurl": "@/assets/images/chart/zhigan/component/ModalCarouselPng03.png"
|
||||
},
|
||||
{
|
||||
"title":"临沂市",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ import { HuoQingButtonConfig } from "./HuoQingButton/index";
|
|||
|
||||
import { HuoQingListConfig } from "./HuoQingList/index";
|
||||
|
||||
import { HuoQingDetailModalConfig } from "./HuoQingDetailModal/index";
|
||||
import { HuoQingDetailModalLeftConfig } from "./HuoQingDetailModalLeft/index";
|
||||
import { HuoQingDetailModalRightConfig } from "./HuoQingDetailModalRight/index";
|
||||
import { HuoQingDetailModalCloseConfig } from "./HuoQingDetailModalClose/index";
|
||||
import { HuoQingDetailRadioConfig } from "./HuoQingDetailRadio/index";
|
||||
import { HuoQingDetailTiltButtonConfig } from "./HuoQingDetailTiltButton/index";
|
||||
|
|
@ -17,7 +18,8 @@ export default [
|
|||
|
||||
HuoQingListConfig,
|
||||
|
||||
HuoQingDetailModalConfig,
|
||||
HuoQingDetailModalLeftConfig,
|
||||
HuoQingDetailModalRightConfig,
|
||||
HuoQingDetailModalCloseConfig,
|
||||
HuoQingDetailRadioConfig,
|
||||
HuoQingDetailTiltButtonConfig,
|
||||
|
|
|
|||
Loading…
Reference in New Issue