Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo
commit
7d56e25910
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
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 |
|
|
@ -10,7 +10,7 @@ export const option = {
|
|||
borderTitleHeight: 98,
|
||||
borderTitleSize: 18,
|
||||
borderTitleColor: '#fff',
|
||||
colors: ['#608561', '#374536'],
|
||||
colors: ['#608561','#EEEEEE','#EAEAEA','#DCDCDC','#D8D8D8','#374536','#98B394','#DCFFD9','#687B66','#A1E6AC','#3D6644','#122115','#6C8069','#4E5C4C','#FFE6B3'],
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,39 +5,39 @@
|
|||
<title>大标题@2x</title>
|
||||
<defs>
|
||||
<radialGradient cx="50%" cy="155.043268%" fx="50%" fy="155.043268%" r="100.482374%" gradientTransform="translate(0.5, 1.5504), scale(0.0963, 1), rotate(90), scale(1, 4.0569), translate(-0.5, -1.5504)" id="radialGradient-1">
|
||||
<stop :stop-color="colors[0]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[0]" stop-opacity="0.276934003" offset="48.9346591%"></stop>
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="100%"></stop>
|
||||
<stop :stop-color="colors[0]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[0]" stop-opacity="0.276934003" offset="48.9346591%"></stop>
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="100%"></stop>
|
||||
</radialGradient>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient01-2">
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[0]" offset="24.5007328%"></stop>
|
||||
<stop :stop-color="colors[0]" offset="74.8333658%"></stop>
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="100%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[2]" offset="24.5007328%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="74.8333658%"></stop>
|
||||
<stop :stop-color="colors[4]" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<rect id="path-3" x="0" y="0" width="899" height="54.0955035"></rect>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient01-5">
|
||||
<stop :stop-color="colors[1]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||
<stop :stop-color="colors[5]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[6]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<rect id="path-6" x="0" y="0" width="899" height="54.0955035"></rect>
|
||||
<linearGradient x1="102.302587%" y1="50%" x2="-24.4700794%" y2="50%" id="linearGradient01-8">
|
||||
<stop :stop-color="colors[1]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="12.3606862%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.4" offset="99.9262456%"></stop>
|
||||
<stop :stop-color="colors[7]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[7]" offset="12.3606862%"></stop>
|
||||
<stop :stop-color="colors[7]" stop-opacity="0.4" offset="99.9262456%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient01-9">
|
||||
<stop :stop-color="colors[1]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||
<stop :stop-color="colors[5]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[8]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient01-10">
|
||||
<stop :stop-color="colors[1]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||
<stop :stop-color="colors[5]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[8]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="100%" y1="50%" x2="0.641936189%" y2="50%" id="linearGradient01-11">
|
||||
<stop :stop-color="colors[1]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="36.0686189%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.8" offset="99.9808785%"></stop>
|
||||
<stop :stop-color="colors[9]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[10]" offset="36.0686189%"></stop>
|
||||
<stop :stop-color="colors[11]" stop-opacity="0.8" offset="99.9808785%"></stop>
|
||||
</linearGradient>
|
||||
<polygon id="path-12" points="-7.8938096e-15 -2.62257315e-13 11 -2.62257315e-13 13.1616243 1.5 2.1616243 1.5"></polygon>
|
||||
<filter x="-119.2%" y="-900.0%" width="338.5%" height="1900.0%" filterUnits="objectBoundingBox" id="filter-13">
|
||||
|
|
@ -54,9 +54,9 @@
|
|||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.5 0 0 0 0 0 0 0 0 0.7 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient x1="100%" y1="50%" x2="0.641936189%" y2="50%" id="linearGradient01-16">
|
||||
<stop :stop-color="colors[1]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="36.0686189%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.8" offset="99.9808785%"></stop>
|
||||
<stop :stop-color="colors[9]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[10]" offset="36.0686189%"></stop>
|
||||
<stop :stop-color="colors[11]" stop-opacity="0.8" offset="99.9808785%"></stop>
|
||||
</linearGradient>
|
||||
<polygon id="path-17" points="4.12319693e-14 3.81916286e-14 11 3.81916286e-14 13.1616243 1.5 2.1616243 1.5"></polygon>
|
||||
<filter x="-119.2%" y="-900.0%" width="338.5%" height="1900.0%" filterUnits="objectBoundingBox" id="filter-18">
|
||||
|
|
@ -110,34 +110,34 @@
|
|||
<circle id="椭圆形备份" fill="#60715C" cx="986.203603" cy="91.6910069" r="1.5"></circle>
|
||||
<g id="编组-5" transform="translate(797.7707, 107.191)">
|
||||
<line x1="0" y1="1.5" x2="91.5306326" y2="1.5" id="路径-6" stroke="url(#linearGradient01-9)" opacity="0.6"></line>
|
||||
<circle id="椭圆形" fill="#6C8069" cx="58.0306326" cy="1.5" r="1.5"></circle>
|
||||
<circle id="椭圆形" :fill="colors[12]" cx="58.0306326" cy="1.5" r="1.5"></circle>
|
||||
</g>
|
||||
<g id="编组-5" transform="translate(1079.3551, 108.691) scale(-1, 1) translate(-1079.3551, -108.691)translate(1033.5898, 107.191)">
|
||||
<line x1="0" y1="1.5" x2="91.5306326" y2="1.5" id="路径-6" stroke="url(#linearGradient01-9)" opacity="0.6"></line>
|
||||
<circle id="椭圆形" fill="#6C8069" cx="28.0306326" cy="1.5" r="1.5"></circle>
|
||||
<circle id="椭圆形" fill="#6C8069" cx="90.0306326" cy="1.5" r="1.5"></circle>
|
||||
<circle id="椭圆形" :fill="colors[12]" cx="28.0306326" cy="1.5" r="1.5"></circle>
|
||||
<circle id="椭圆形" :fill="colors[12]" cx="90.0306326" cy="1.5" r="1.5"></circle>
|
||||
</g>
|
||||
<g id="编组-5" transform="translate(277.3287, 74.1433)">
|
||||
<line x1="2.1801759e-14" y1="1.5" x2="365.462877" y2="1.5" id="路径-6" stroke="url(#linearGradient01-10)" opacity="0.399999976"></line>
|
||||
<path d="M301.962877,3 C302.791304,3 303.462877,2.32842712 303.462877,1.5 C303.462877,0.671572875 302.791304,0 301.962877,0 C301.13445,0 300.462877,0.671572875 300.462877,1.5 C300.462877,2.32842712 301.13445,3 301.962877,3 Z" id="椭圆形" fill="#4E5C4C"></path>
|
||||
<circle id="椭圆形" fill="#4E5C4C" cx="131.962877" cy="1.5" r="1.5"></circle>
|
||||
<path d="M363.962877,3 C364.791304,3 365.462877,2.32842712 365.462877,1.5 C365.462877,0.671572875 364.791304,0 363.962877,0 C363.13445,0 362.462877,0.671572875 362.462877,1.5 C362.462877,2.32842712 363.13445,3 363.962877,3 Z" id="椭圆形" fill="#4E5C4C"></path>
|
||||
<path d="M301.962877,3 C302.791304,3 303.462877,2.32842712 303.462877,1.5 C303.462877,0.671572875 302.791304,0 301.962877,0 C301.13445,0 300.462877,0.671572875 300.462877,1.5 C300.462877,2.32842712 301.13445,3 301.962877,3 Z" id="椭圆形" :fill="colors[13]"></path>
|
||||
<circle id="椭圆形" :fill="colors[13]" cx="131.962877" cy="1.5" r="1.5"></circle>
|
||||
<path d="M363.962877,3 C364.791304,3 365.462877,2.32842712 365.462877,1.5 C365.462877,0.671572875 364.791304,0 363.962877,0 C363.13445,0 362.462877,0.671572875 362.462877,1.5 C362.462877,2.32842712 363.13445,3 363.962877,3 Z" id="椭圆形" :fill="colors[13]"></path>
|
||||
</g>
|
||||
<g id="编组-5" transform="translate(1461.7682, 75.6433) scale(-1, 1) translate(-1461.7682, -75.6433)translate(1279.0368, 74.1433)">
|
||||
<line x1="-6.61995048e-15" y1="1.5" x2="365.462877" y2="1.5" id="路径-6" stroke="url(#linearGradient01-10)" opacity="0.399999976"></line>
|
||||
<path d="M273.962877,3 C274.791304,3 275.462877,2.32842712 275.462877,1.5 C275.462877,0.671572875 274.791304,0 273.962877,0 C273.13445,0 272.462877,0.671572875 272.462877,1.5 C272.462877,2.32842712 273.13445,3 273.962877,3 Z" id="椭圆形" fill="#4E5C4C"></path>
|
||||
<circle id="椭圆形" fill="#4E5C4C" cx="47.9628773" cy="1.5" r="1.5"></circle>
|
||||
<path d="M273.962877,3 C274.791304,3 275.462877,2.32842712 275.462877,1.5 C275.462877,0.671572875 274.791304,0 273.962877,0 C273.13445,0 272.462877,0.671572875 272.462877,1.5 C272.462877,2.32842712 273.13445,3 273.962877,3 Z" id="椭圆形" :fill="colors[13]"></path>
|
||||
<circle id="椭圆形" :fill="colors[13]" cx="47.9628773" cy="1.5" r="1.5"></circle>
|
||||
</g>
|
||||
<g id="编组-3" transform="translate(591.0082, 48.0955)">
|
||||
<path d="M0,5.07965553 L5.07965553,0 L64.7090785,-8.8817842e-15 C67.8916764,-1.22931327e-14 70.9439234,1.26428208 73.1943599,3.51471863 L104.538881,34.85924 C106.039172,36.359531 108.074004,37.2023858 110.195736,37.2023858 L170.93164,37.2023858 L170.93164,37.2023858 L176.824757,42.0955035 L107.225226,42.0955035 C105.140415,42.0955035 103.13796,41.2816494 101.644261,39.8272415 L69.4522629,8.48204842 C67.2117139,6.30043667 64.2080318,5.07965553 61.0808143,5.07965553 L0,5.07965553 L0,5.07965553 Z" id="路径-4" fill="url(#linearGradient01-11)"></path>
|
||||
<g id="编组" transform="translate(178.9918, 36.9045)">
|
||||
<g id="矩形">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
|
||||
<use fill="#FFE6B3" fill-rule="evenodd" xlink:href="#path-12"></use>
|
||||
<use :fill="colors[14]" fill-rule="evenodd" xlink:href="#path-12"></use>
|
||||
</g>
|
||||
<g id="矩形" opacity="0.399999976">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
|
||||
<use fill="#FFE6B3" fill-rule="evenodd" xlink:href="#path-14"></use>
|
||||
<use :fill="colors[14]" fill-rule="evenodd" xlink:href="#path-14"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
|
@ -146,11 +146,11 @@
|
|||
<g id="编组" transform="translate(14.4278, 37.6545) scale(-1, 1) translate(-14.4278, -37.6545)translate(0, 36.9045)">
|
||||
<g id="矩形">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
|
||||
<use fill="#FFE6B3" fill-rule="evenodd" xlink:href="#path-17"></use>
|
||||
<use :fill="colors[14]" fill-rule="evenodd" xlink:href="#path-17"></use>
|
||||
</g>
|
||||
<g id="矩形" opacity="0.399999976">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
|
||||
<use fill="#FFE6B3" fill-rule="evenodd" xlink:href="#path-19"></use>
|
||||
<use :fill="colors[14]" fill-rule="evenodd" xlink:href="#path-19"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
|
|
|||
|
|
@ -7,14 +7,15 @@
|
|||
:rotate="rotate"
|
||||
@click="clickBtn"
|
||||
@dblclick="dblclickBtn"
|
||||
@rightclick="rightclickBtn"
|
||||
@contextmenu="rightclickBtn"
|
||||
@mouseenter="mouseenterBtn"
|
||||
@mouseleave="mouseleaveBtn"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, ref } from 'vue';
|
||||
import { PropType, toRefs, ref, watch, onMounted } from 'vue';
|
||||
import { CreateComponentType } from '@/packages/index.d';
|
||||
import { GoIconify } from '@/components/GoIconify';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
|
@ -27,7 +28,7 @@
|
|||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
console.log(props.chartConfig.option);
|
||||
const { w, h } = toRefs(props.chartConfig.attr);
|
||||
const { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
|
||||
// 单击交互
|
||||
|
|
@ -36,6 +37,11 @@
|
|||
const dbclickElementItem = ref([]);
|
||||
// 右击交互
|
||||
const rightclickElementItem = ref([]);
|
||||
// 鼠标移入交互
|
||||
const mouseenterElementItem = ref([]);
|
||||
// 鼠标移出交互
|
||||
const mouseleaveElementItem = ref([]);
|
||||
|
||||
const list = props.chartConfig.events.interactConfigEvents;
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (list[i].type == 'click') {
|
||||
|
|
@ -50,21 +56,32 @@
|
|||
for (let j = 0; j < list[i].movementList.length; j++) {
|
||||
rightclickElementItem.value.push(list[i].movementList[j]);
|
||||
}
|
||||
} else if (list[i].type == 'mousein') {
|
||||
for (let j = 0; j < list[i].movementList.length; j++) {
|
||||
mouseenterElementItem.value.push(list[i].movementList[j]);
|
||||
}
|
||||
} else if (list[i].type == 'mouseout') {
|
||||
for (let j = 0; j < list[i].movementList.length; j++) {
|
||||
mouseleaveElementItem.value.push(list[i].movementList[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
const clickBtn = () => {
|
||||
console.log('单击');
|
||||
eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
|
||||
};
|
||||
const dblclickBtn = () => {
|
||||
console.log('双击');
|
||||
eventHandlerHook(chartEditStore.getComponentList, dbclickElementItem.value);
|
||||
};
|
||||
const rightclickBtn = (event) => {
|
||||
console.log('右击');
|
||||
event.preventDefault(); // 阻止默认的右键菜单
|
||||
eventHandlerHook(chartEditStore.getComponentList, rightclickElementItem.value);
|
||||
};
|
||||
const mouseenterBtn = () => {
|
||||
eventHandlerHook(chartEditStore.getComponentList, mouseenterElementItem.value);
|
||||
};
|
||||
const mouseleaveBtn = () => {
|
||||
eventHandlerHook(chartEditStore.getComponentList, mouseleaveElementItem.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,10 @@ export const option = {
|
|||
// 适应方式
|
||||
fit: 'contain',
|
||||
// 圆角
|
||||
borderRadius: 10
|
||||
borderRadius: 10,
|
||||
photoMouseEventClose: false,
|
||||
mouseSelectClose: false,
|
||||
mouseCursor: 'default'
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType
|
||||
|
|
|
|||
|
|
@ -22,6 +22,31 @@
|
|||
></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="鼠标样式" :alone="true">
|
||||
<setting-item>
|
||||
<n-select
|
||||
v-model:value="optionData.mouseCursor"
|
||||
size="small"
|
||||
:options="mouseCursor"
|
||||
></n-select>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="是否禁止选中属性" :alone="true">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mouseSelectClose" size="small" />
|
||||
<n-text>是否禁用</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="是否允许鼠标穿透事件" :alone="true">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.photoMouseEventClose" size="small" />
|
||||
<n-text>是否允许</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
|
|
@ -64,4 +89,22 @@ const fitList = [
|
|||
label: 'none'
|
||||
},
|
||||
]
|
||||
const mouseCursor = [
|
||||
{ value: 'default', label: 'default', },
|
||||
{ value: 'none', label: 'none', },
|
||||
{ value: 'context-menu', label: 'context-menu', },
|
||||
{ value: 'pointer', label: 'pointer', },
|
||||
{ value: 'help', label: 'help', },
|
||||
{ value: 'wait', label: 'wait', },
|
||||
{ value: 'progress', label: 'progress', },
|
||||
{ value: 'text', label: 'text', },
|
||||
{ value: 'vertical-text', label: 'vertical-text', },
|
||||
{ value: 'move', label: 'move', },
|
||||
{ value: 'grab', label: 'grab', },
|
||||
{ value: 'grabbing', label: 'grabbing', },
|
||||
{ value: 'move', label: 'move', },
|
||||
{ value: 'move', label: 'move', },
|
||||
{ value: 'move', label: 'move', },
|
||||
{ value: 'move', label: 'move', },
|
||||
]
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import cloneDeep from 'lodash/cloneDeep'
|
|||
|
||||
export const option = {
|
||||
boxId: 'linearGradientContentTitle',
|
||||
colors: ['#08251E','#00A374','#11B472','#00FF8C','#00F4B6','#00FF77','#00BF6B','#00673F','#00683F','#72A18A','#1CC370'],
|
||||
colors: ['#08251E','#00A374','#11B472','#00FF8C','#00F4B6','#00FF77','#00BF6B','#00673F','#00683F','#72A18A','#1CC370','#EBBE10','#4FE985'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
</linearGradient>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`9-${boxId}`">
|
||||
<stop :stop-color="colors[9]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#1CC370" offset="100%"></stop>
|
||||
<stop :stop-color="colors[10]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
|
|
@ -39,7 +39,10 @@
|
|||
<g id="标题模块--右侧2" transform="translate(0, 318)">
|
||||
<g id="小标题-三站覆盖面积" transform="translate(1.5, 0)">
|
||||
<g id="小标题">
|
||||
<polygon id="矩形" :fill="`url(#1-${boxId})`" points="10.3064025 0 166.362718 0 176.570151 13.6763066 255.888803 13.6763066 399.202062 13.6763066 399.201597 38.3517324 205.452516 38.3517324 0 38.3517324 0 11.1814815"></polygon>
|
||||
<polygon
|
||||
id="矩形" :fill="`url(#1-${boxId})`"
|
||||
points="10.3064025 0 166.362718 0 176.570151 13.6763066 255.888803 13.6763066 399.202062 13.6763066 399.201597 38.3517324 205.452516 38.3517324 0 38.3517324 0 11.1814815"
|
||||
></polygon>
|
||||
<g id="椭圆形">
|
||||
<mask id="mask-4" fill="white">
|
||||
<use xlink:href="#path-3"></use>
|
||||
|
|
@ -49,7 +52,7 @@
|
|||
</g>
|
||||
<polyline id="路径" :stroke="`url(#7-${boxId})`" stroke-width="0.616921269" points="0 25.7188334 0 11.1814815 11.0190925 0 177.866737 0 188.53316 13.2759293 264.809581 13.2759293"></polyline>
|
||||
<polygon id="矩形" :fill="`url(#8-${boxId})`" points="118.3 2.99401198 393.561275 2.99401198 393.561275 9.76196476 122.229351 9.76196476"></polygon>
|
||||
<polygon id="路径-11" fill="#EBBE10" points="0 0 0 7.33194884 7.88666648 0"></polygon>
|
||||
<polygon id="路径-11" :fill="colors[11]" points="0 0 0 7.33194884 7.88666648 0"></polygon>
|
||||
<g id="编组-2" opacity="0.691816057" transform="translate(370.7821, 6.5393) scale(-1, -1) translate(-370.7821, -6.5393)translate(345.3094, 3.992)" fill="#00C157">
|
||||
<polygon id="矩形" opacity="0.558652605" points="46.5583547 0 50.945502 0 46.48422 5.0945502 42.0970727 5.0945502"></polygon>
|
||||
<polygon id="矩形备份" opacity="0.385865711" points="38.2461939 0 42.6333411 0 38.1720591 5.0945502 33.7849118 5.0945502"></polygon>
|
||||
|
|
@ -60,8 +63,8 @@
|
|||
</g>
|
||||
</g>
|
||||
<g id="装饰线" transform="translate(7.3051, 36.5255)">
|
||||
<polygon id="矩形" fill="#EBBE10" points="1.58053304 0 11.6250344 0 10.0445013 1.82627297 0 1.82627297"></polygon>
|
||||
<polygon id="矩形备份-13" fill="#4FE985" points="14.4276265 0 24.4721279 0 22.8284122 1.82627297 12.7839108 1.82627297"></polygon>
|
||||
<polygon id="矩形" :fill="colors[11]" points="1.58053304 0 11.6250344 0 10.0445013 1.82627297 0 1.82627297"></polygon>
|
||||
<polygon id="矩形备份-13" :fill="colors[12]" points="14.4276265 0 24.4721279 0 22.8284122 1.82627297 12.7839108 1.82627297"></polygon>
|
||||
<polygon id="矩形备份-14" :fill="`url(#9-${boxId})`" points="27.2666802 0 390.822416 0 390.822416 1.82627297 25.5678216 1.82627297"></polygon>
|
||||
</g>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/units/texttitle02bg.png" />
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/units/texttitlebg.png" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@ import cloneDeep from 'lodash/cloneDeep'
|
|||
|
||||
export const option = {
|
||||
boxId: 'linearGradientContentTitle02',
|
||||
colors: [],
|
||||
colors: ['#1F6B55','#0A392A','#396754','#457453'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ContentTitle02Config.key
|
||||
public attr = { ...chartInitConfig, w: 401, h: 40, zIndex: 1 }
|
||||
public attr = { ...chartInitConfig, w: 172, h: 71, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ContentTitle02Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,38 @@
|
|||
<template>
|
||||
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="ID" :alone="true">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.boxId"
|
||||
:minlength="1"
|
||||
type="text"
|
||||
placeholder="请输入Id"
|
||||
/>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.colors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.colors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.colors[index] = option.colors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,37 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/units/texttitlebg.png" />
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 44</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`1-${boxId}`">
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`2-${boxId}`">
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智览-切图版" transform="translate(-64, -150)">
|
||||
<g id="可视化" transform="translate(-11, -21)">
|
||||
<g id="B" transform="translate(53, 114)">
|
||||
<g id="标题模块--左侧1" transform="translate(0, -0)">
|
||||
<g id="取水点" transform="translate(22, 57)">
|
||||
<g id="编组-44" transform="translate(0.9551, 0.8862)">
|
||||
<!-- w: 172, h: 71 -->
|
||||
<rect id="矩形" :stroke="colors[3]" x="0" y="0" :width="`${w-2}`" :height="`${h-2}`" rx="8"></rect>
|
||||
<path :d="`M8,0 ${w/2.13},0 ${w/2.13},0 ${w/3.75},${h-2} L8,${h-2} C3.581722,${h-2} 2.705415e-16,${h-5} 0,${h-10} L0,8 C-5.41083001e-16,3.581722 3.581722,5.41083001e-16 8,0 Z`" id="矩形" :fill="`url(#1-${boxId})`"></path>
|
||||
<path :d="`M8,0 ${w/2.46},0 ${w/2.46},0 ${w/3.34},${h-2} L8,${h-2} C3.581722,${h-2} 2.705415e-16,${h-5} 0,${h-10} L0,8 C-5.41083001e-16,3.581722 3.581722,5.41083001e-16 8,0 Z`" id="矩形" :fill="`url(#2-${boxId})`"></path>
|
||||
<rect id="矩形" :fill="colors[2]" :x="`${w/2.18}`" :y="`${h/2.03}`" :width="`${w/2.3}`" height="1"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ContentTitle03Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'linearGradientContentTitle03',
|
||||
colors: ['#067847','#0EB07D','#1F6B55','#0A392A','#EBBE10','#0CB170','#0CB26F'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ContentTitle03Config.key
|
||||
public attr = { ...chartInitConfig, w: 368, h: 70, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ContentTitle03Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="ID" :alone="true">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.boxId"
|
||||
:minlength="1"
|
||||
type="text"
|
||||
placeholder="请输入Id"
|
||||
/>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.colors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.colors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.colors[index] = option.colors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
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 ContentTitle03Config: ConfigType = {
|
||||
key: 'ContentTitle03',
|
||||
chartKey: 'VContentTitle03',
|
||||
conKey: 'VCContentTitle03',
|
||||
title: '模块标题-03',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.UNITS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'texttitle03bg.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 54</title>
|
||||
<defs>
|
||||
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" :id="`1-${boxId}`">
|
||||
<stop :stop-color="colors[0]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`2-${boxId}`">
|
||||
<stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`3-${boxId}`">
|
||||
<stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智览-切图版" transform="translate(-59, -477)">
|
||||
<g id="可视化" transform="translate(-11, -21)">
|
||||
<g id="B" transform="translate(53, 114)">
|
||||
<g id="标题模块--左侧3" transform="translate(0.5, 321)">
|
||||
<g id="设备" transform="translate(16.5, 63)">
|
||||
<g id="编组-54" transform="translate(0.8994, 0.8862)">
|
||||
<path :d="`M2.05570911,0 ${w-3},0 ${w-2},-2.02906125e-16 ${w-1},0.8954305 ${w-1},2 ${w-1},${h-3} ${w-1},${h-2} ${w-2},${h-1} ${w-3},${h-1} L2.05570911,${h-1} C0.951139614,${h-1} 0.0557091139,${h-2} 0.0557091139,${h-3} L0.0557091139,143.1399652 L0.0557091139,43.1399652 L3.05570911,40.1566203 L3.05570911,27.6227405 L0.0557091139,25.4763963 L0.0557091139,2 C0.0557091139,0.8954305 0.951139614,1.3527075e-16 2.05570911,0 Z`" id="矩形" :fill="`url(#1-${boxId})`"></path>
|
||||
<path :d="`M2.05570911,0 ${w/4.84},0 ${w/4.84},0 ${w/5.4},${h-1} L2.05570911,${h-1} C0.951139614,${h-1} 0.0557091139,${h-2} 0.0557091139,${h-3} L0.0557091139,43.3858792 L0.0557091139,43.3858792 L3.05570911,41.239535 L3.05570911,28.7056551 L0.0557091139,25.7223102 L0.0557091139,2 C0.0557091139,0.8954305 0.951139614,-8.67738547e-17 2.05570911,-2.22044605e-16 Z`" id="矩形" :fill="`url(#2-${boxId})`" :transform="`translate(${w/9.66}, ${h/2.03}) scale(1, -1) translate(-${w/9.66}, -${h/2.03})`"></path>
|
||||
<path :d="`M2.05570911,0 ${w/3.48},0 ${w/3.48},0 ${w/7.34},${h-1} L2.05570911,${h-1} C0.951139614,${h-1} 0.0557091139,${h-2} 0.0557091139,${h-3} L0.0557091139,43.3858792 L0.0557091139,43.3858792 L3.05570911,41.239535 L3.06101275,28.7056551 L0.0557091139,25.7223102 L0.0557091139,2 C0.0557091139,0.8954305 0.951139614,1.3527075e-16 2.05570911,0 Z`" id="矩形" :fill="`url(#3-${boxId})`" :transform="`translate(${w/6.95}, ${h/2.03}) scale(1, -1) translate(-${w/6.95}, -${h/2.03})`"></path>
|
||||
<polygon id="矩形" :fill="colors[4]" transform="translate(0.9131, 34.0269) rotate(90) translate(-0.9131, -34.0269)"
|
||||
:points="`-13.31884767 33.1137725 6.72565368 33.1137725 5.14512064 34.9400454 -4.89938071 34.9400454`"
|
||||
></polygon>
|
||||
<rect id="矩形" :fill="colors[5]" :x="`${w/3.92}`" :y="`${h/2.01}`" :width="`${w/4.91}`" height="1"></rect>
|
||||
<path :d="`M${w/2.24},${h/2} L${w/1.67},${h/2} L${w/1.67},${h/1.97} L${w/2.24},${h/1.97} Z`" id="竖线" :stroke="colors[6]" stroke-dasharray="2" :transform="`translate(${w/1.91}, ${h/1.99}) rotate(90) translate(-${w/1.91}, -${h/1.99})`"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
boxId
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.fill {
|
||||
fill: v-bind('colors[0]');
|
||||
}
|
||||
.fill-none {
|
||||
fill: none;
|
||||
}
|
||||
.stroke {
|
||||
stroke: v-bind('colors[1]');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ContentTitle04Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'linearGradientContentTitle04',
|
||||
colors: ['#067847','#0EB07D','#FFB111','#FFB217','#457453','#0CB170'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ContentTitle04Config.key
|
||||
public attr = { ...chartInitConfig, w: 176, h: 60, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ContentTitle04Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="ID" :alone="true">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.boxId"
|
||||
:minlength="1"
|
||||
type="text"
|
||||
placeholder="请输入Id"
|
||||
/>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.colors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.colors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.colors[index] = option.colors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
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 ContentTitle04Config: ConfigType = {
|
||||
key: 'ContentTitle04',
|
||||
chartKey: 'VContentTitle04',
|
||||
conKey: 'VCContentTitle04',
|
||||
title: '模块标题-04',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.UNITS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'texttitle04bg.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 62</title>
|
||||
<defs>
|
||||
<linearGradient x1="0%" y1="50%" x2="109.584556%" y2="50%" :id="`1-${boxId}`">
|
||||
<stop :stop-color="colors[0]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%" y1="26.0411944%" x2="50%" y2="60.9089071%" :id="`2-${boxId}`">
|
||||
<stop :stop-color="colors[2]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智览-切图版" transform="translate(-59, -635)">
|
||||
<g id="可视化" transform="translate(-11, -21)">
|
||||
<g id="B" transform="translate(53, 114)">
|
||||
<g id="标题模块--左侧4" transform="translate(0.5, 483)">
|
||||
<g id="巡护内容" transform="translate(17, 60)">
|
||||
<g id="编组-62" transform="translate(0, 0)">
|
||||
<path :d="`M10.5834008,0 L${w-2},0 L${w-2},${h/1.24} L${w/1.1},${h-2} L0,${h-2} C0,55.6727336 0,48.4525336 0,36.3394002 L0,9.07473657 L10.5834008,0 Z`" id="矩形" :stroke="colors[4]"></path>
|
||||
<polygon
|
||||
id="矩形" :fill="`url(#1-${boxId})`"
|
||||
:points="`14.1332538 3.11724138 ${w-5} 3.11724138 ${w-5} ${h/2} ${w-14} ${h/1.68} 3.60994506 ${h/1.68} 3.60994506 11.623884`"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="路径-11" :fill="`url(#2-${boxId})`"
|
||||
:transform="`translate(${w/1.04}, ${h/1.09}) scale(-1, -1) translate(-${w/1.04}, -${h/1.09})`"
|
||||
:points="`${w/1.07} ${h/1.17} ${w/1.07} ${h/1.02} ${w-1} ${h/1.17}`"
|
||||
></polygon>
|
||||
<rect id="矩形" :fill="colors[5]" :x="`${w/9.26}`" :y="`${h/1.71}`" :width="`${w/1.95}`" height="1"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
boxId
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.fill {
|
||||
fill: v-bind('colors[0]');
|
||||
}
|
||||
.fill-none {
|
||||
fill: none;
|
||||
}
|
||||
.stroke {
|
||||
stroke: v-bind('colors[1]');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ContentTitle05Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'linearGradientContentTitle05',
|
||||
colors: ['#583700','#FF9538','#E3AC5C','#C2742F','#F5A500','#0CB170'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ContentTitle05Config.key
|
||||
public attr = { ...chartInitConfig, w: 81, h: 23, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ContentTitle05Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="ID" :alone="true">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.boxId"
|
||||
:minlength="1"
|
||||
type="text"
|
||||
placeholder="请输入Id"
|
||||
/>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.colors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.colors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.colors[index] = option.colors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
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 ContentTitle05Config: ConfigType = {
|
||||
key: 'ContentTitle05',
|
||||
chartKey: 'VContentTitle05',
|
||||
conKey: 'VCContentTitle05',
|
||||
title: '模块标题-05',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.UNITS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'texttitle05bg.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 64</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`1-${boxId}`">
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.73789882" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`2-${boxId}`">
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.751748252" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`3-${boxId}`">
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.73789882" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`4-${boxId}`">
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.751748252" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<polygon :id="`5-${boxId}`" :points="`${w/5.41} 0 ${w-1} 0 ${w/1.26} ${h} ${w/16.46} ${h} ${w/40.5} ${h/1.21}`"></polygon>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`7-${boxId}`">
|
||||
<stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`8-${boxId}`">
|
||||
<stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智览-切图版" transform="translate(-321, -806)">
|
||||
<g id="可视化" transform="translate(-11, -21)">
|
||||
<g id="B" transform="translate(53, 114)">
|
||||
<g id="标题模块--左侧5" transform="translate(0.5, 701)">
|
||||
<g id="小标题-火情趋势分析" transform="translate(0.499, 0)">
|
||||
<g id="编组-64" transform="translate(278.001, 12)">
|
||||
<!-- w: 81, h: 23 -->
|
||||
<path :d="`M${w-7},0.5 L${w-4},4.31042769 L${w/1.26},${h/1.02} L${w/14.75},${h/1.02} L${w/30.8},${h/1.21} L${w/5.28},0.5 L${w/1.09},0.5 Z`" id="矩形" :fill="`url(#1-${boxId})`" :stroke="`url(#2-${boxId})`" ></path>
|
||||
<mask :id="`6-${boxId}`" fill="white">
|
||||
<use xlink:href="#path-5"></use>
|
||||
</mask>
|
||||
<path :stroke="`url(#4-${boxId})`" :d="`M${w-2},0.5 L${w/1.26},${h/1.02} L${w/15.64},${h/1.02} L${w/31.03},${h/1.21} L${w/5.31},0.5 L${w-1},0.5 Z`"></path>
|
||||
<!-- <polygon
|
||||
id="矩形" :fill="`url(#7-${boxId})`" :mask="`url(#6-${boxId})`"
|
||||
:points="`${w/17.02} -${h/2.64} ${w/4.32} -${h/2.64} ${w/2.09} ${h/0.6} ${w/3.27} ${h/0.6}`"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="矩形备份-6" :fill="`url(#8-${boxId})`" :mask="`url(#6-${boxId})`"
|
||||
:transform="`translate(${w/3.72}, ${h/0.72}) scale(-1, 1) translate(-${w/3.72}, -${h/0.72})`"
|
||||
:points="`-${w/9.83} -${h/2.37} ${w/4.92} -${h/2.37} ${w/1.56} ${h/0.31} ${w/2.99} ${h/0.31}`"
|
||||
></polygon> -->
|
||||
<polygon id="路径-2" :fill="colors[4]" :points="`${w/44.51} ${h/1.13} 0 ${h} ${w/20.44} ${h}`"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
boxId
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.fill {
|
||||
fill: v-bind('colors[0]');
|
||||
}
|
||||
.fill-none {
|
||||
fill: none;
|
||||
}
|
||||
.stroke {
|
||||
stroke: v-bind('colors[1]');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LeftChartsConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { graphic } from 'echarts/core'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['xAxis', 'yAxis', 'grid']
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 10, //设定实心点的大小
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
type: 'solid'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColorsSearch[defaultTheme][3]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = LeftChartsConfig.key
|
||||
public chartConfig = cloneDeep(LeftChartsConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
name="单折线面积图"
|
||||
:expanded="true"
|
||||
>
|
||||
<SettingItemBox name="线条">
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select
|
||||
v-model:value="item.lineStyle.type"
|
||||
size="small"
|
||||
:options="lineConf.lineStyle.type"
|
||||
></n-select>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实心点">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="item.symbolSize"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="item.label.show" size="small" />
|
||||
<n-text>展示标签</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number
|
||||
v-model:value="item.label.fontSize"
|
||||
size="small"
|
||||
:min="1"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.label.color"
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
v-model:value="item.label.position"
|
||||
:options="[
|
||||
{ label: 'top', value: 'top' },
|
||||
{ label: 'left', value: 'left' },
|
||||
{ label: 'right', value: 'right' },
|
||||
{ label: 'bottom', value: 'bottom' },
|
||||
]"
|
||||
/>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import {
|
||||
GlobalSetting,
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
},
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"dimensions": ["product", "data1", "data2"],
|
||||
"source": [
|
||||
{
|
||||
"product": "Mon",
|
||||
"data1": 120,
|
||||
"data2": 130
|
||||
},
|
||||
{
|
||||
"product": "Tue",
|
||||
"data1": 200,
|
||||
"data2": 130
|
||||
},
|
||||
{
|
||||
"product": "Wed",
|
||||
"data1": 150,
|
||||
"data2": 312
|
||||
},
|
||||
{
|
||||
"product": "Thu",
|
||||
"data1": 80,
|
||||
"data2": 268
|
||||
},
|
||||
{
|
||||
"product": "Fri",
|
||||
"data1": 70,
|
||||
"data2": 155
|
||||
},
|
||||
{
|
||||
"product": "Sat",
|
||||
"data1": 110,
|
||||
"data2": 117
|
||||
},
|
||||
{
|
||||
"product": "Sun",
|
||||
"data1": 130,
|
||||
"data2": 160
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const LeftChartsConfig: ConfigType = {
|
||||
key: 'LeftCharts',
|
||||
chartKey: 'VLeftCharts',
|
||||
conKey: 'VCLeftCharts',
|
||||
title: '单折线渐变图',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.UNITS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'leftchartsbg.png'
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use, graphic } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import config, { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { isPreview, colorGradientCustomMerge} from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
const option = reactive({
|
||||
value: {}
|
||||
})
|
||||
|
||||
// 渐变色处理
|
||||
watch(
|
||||
() => chartEditStore.getEditCanvasConfig.chartThemeColor,
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: themeColor[3 + index]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0, 0)'
|
||||
}
|
||||
])
|
||||
})
|
||||
}
|
||||
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
props.chartConfig.option = option.value
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
() => {
|
||||
option.value = props.chartConfig.option
|
||||
}
|
||||
)
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { SearchBoxConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'linearGradientSearchBox',
|
||||
colors: ['#00AF4A','#00751E','#344534','#647B64','#04691A','#0EF840','#07261E','#4A5C4A','#FFE4AC','#84DC9B'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = SearchBoxConfig.key
|
||||
public attr = { ...chartInitConfig, w: 205, h: 53, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(SearchBoxConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="ID" :alone="true">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.boxId"
|
||||
:minlength="1"
|
||||
type="text"
|
||||
placeholder="请输入Id"
|
||||
/>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.colors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.colors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.colors[index] = option.colors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
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 SearchBoxConfig: ConfigType = {
|
||||
key: 'SearchBox',
|
||||
chartKey: 'VSearchBox',
|
||||
conKey: 'VCSearchBox',
|
||||
title: '全局搜索',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.UNITS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'searchBtn.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 41</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop :stop-color="colors[0]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.206314727" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop :stop-color="colors[2]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<polygon id="path-3" points="-7.8938096e-15 -3.28814141e-13 11 -3.28814141e-13 13.1616243 1.88067666 2.1616243 1.88067666"></polygon>
|
||||
<filter x="-115.3%" y="-717.8%" width="330.6%" height="1535.7%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" 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-5" points="15.6938967 4.78840697e-14 26.6938967 4.78840697e-14 28.855521 1.88067666 17.855521 1.88067666"></polygon>
|
||||
<filter x="-115.3%" y="-717.8%" width="330.6%" height="1535.7%" filterUnits="objectBoundingBox" id="filter-6">
|
||||
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" 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="100%" x2="50.3209681%" y2="0.320968094%" id="linearGradient-7">
|
||||
<stop :stop-color="colors[4]" offset="0.00819493007%"></stop>
|
||||
<stop :stop-color="colors[5]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智览-切图版" transform="translate(-460, -92)">
|
||||
<g id="全局搜索" transform="translate(460, 92)">
|
||||
<g id="编组-41" transform="translate(0.6886, 0.0542)">
|
||||
<path d="M0.997855372,50.7938722 L191.268499,50.7938722 L203.480404,39.0576371 L203.480404,0.490133526 C175.182522,0.490133526 155.473471,0.490133526 144.353252,0.490133526 C142.74063,0.490133526 141.927384,0.490133526 139.501517,0.490133526 C100.678123,0.490133526 100.678123,0.490133526 61.8547296,0.490133526 C59.5833877,0.490133526 58.7487514,0.490133526 57.3062013,0.490133526 C57.2171967,0.490133526 57.1258779,0.490133526 57.0317647,0.490133526 C42.0630356,0.490133526 27.1787008,0.490133526 12.3787602,0.490133526 L0.48040407,11.205526 L0.997855372,50.7938722 Z" id="路径-22" stroke="url(#linearGradient-1)" fill-opacity="0.85" :fill="colors[6]"></path>
|
||||
<g id="编组-5" transform="translate(126.6009, 11.9901) scale(-1, 1) rotate(-180) translate(-126.6009, -11.9901)translate(49.6009, 10.4901)">
|
||||
<line x1="-3.96190285e-13" y1="1.5" x2="153.992505" y2="1.5" id="路径-6" stroke="url(#linearGradient-2)" opacity="0.399999976"></line>
|
||||
<path d="M111.756559,3 C112.584986,3 113.256559,2.32842712 113.256559,1.5 C113.256559,0.671572875 112.584986,-5.6600229e-14 111.756559,-5.6600229e-14 C110.928132,-5.6600229e-14 110.256559,0.671572875 110.256559,1.5 C110.256559,2.32842712 110.928132,3 111.756559,3 Z" id="椭圆形" fill="#4A5C4A"></path>
|
||||
<circle id="椭圆形" :fill="colors[7]" cx="54.7565588" cy="1.5" r="1.5"></circle>
|
||||
</g>
|
||||
<g id="黄色棱形" transform="translate(47.3111, 49.8535) scale(1, -1) translate(-47.3111, -49.8535)translate(32.8833, 48.9132)">
|
||||
<g id="矩形">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
|
||||
<use :fill="colors[8]" fill-rule="evenodd" xlink:href="#path-3"></use>
|
||||
</g>
|
||||
<g id="矩形" opacity="0.399999976">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
|
||||
<use :fill="colors[8]" fill-rule="evenodd" xlink:href="#path-5"></use>
|
||||
</g>
|
||||
</g>
|
||||
<g id="装饰线-">
|
||||
<polygon id="矩形" :fill="colors[9]" points="33.883293 0.119323339 50.7322536 0.119323339 54.0432648 3.00000034 37.1943042 3.00000034"></polygon>
|
||||
<polygon id="路径-21" fill="url(#linearGradient-7)" points="0.280015515 23.0451271 0 10.5120201 10.7260003 0.119323339 29.3354202 3.1827193e-13 33.1074945 3.70128702 13.3177491 3.70128702 4.25149047 12.8512446 4.25149047 25.5958812"></polygon>
|
||||
</g>
|
||||
<g id="装饰线-" transform="translate(177.0216, 37.7979) scale(-1, -1) translate(-177.0216, -37.7979)translate(150, 25)">
|
||||
<polygon id="矩形" :fill="colors[9]" points="33.883293 0.119323339 50.7322536 0.119323339 54.0432648 3.00000034 37.1943042 3.00000034"></polygon>
|
||||
<polygon id="路径-21" fill="url(#linearGradient-7)" points="0.280015515 23.0451271 0 10.5120201 10.7260003 0.119323339 29.3354202 3.1827193e-13 33.1074945 3.70128702 13.3177491 3.70128702 4.25149047 12.8512446 4.25149047 25.5958812"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { getUUID } from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const filterId = `border-box-04-filterId-${getUUID()}`
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
boxId
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.fill {
|
||||
fill: v-bind('colors[0]');
|
||||
}
|
||||
.fill-none {
|
||||
fill: none;
|
||||
}
|
||||
.stroke {
|
||||
stroke: v-bind('colors[1]');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,7 +5,12 @@ import { TitlesBtnActiveConfig } from './TitlesBtnActive/index';
|
|||
import { ContentBackgroundConfig } from './ContentBackground/index';
|
||||
import { ContentTitleConfig } from './ContentTitle/index';
|
||||
import { ContentTitle01Config } from './ContentTitle01/index';
|
||||
// import { ContentTitle02Config } from './ContentTitle02/index';
|
||||
import { ContentTitle02Config } from './ContentTitle02/index';
|
||||
import { ContentTitle03Config } from './ContentTitle03/index';
|
||||
import { ContentTitle04Config } from './ContentTitle04/index';
|
||||
import { ContentTitle05Config } from './ContentTitle05/index';
|
||||
import { LeftChartsConfig } from './LeftCharts/index';
|
||||
import { SearchBoxConfig } from './SearchBox/index';
|
||||
|
||||
export default [
|
||||
TopTitlesConfig,
|
||||
|
|
@ -15,5 +20,10 @@ export default [
|
|||
ContentBackgroundConfig,
|
||||
ContentTitleConfig,
|
||||
ContentTitle01Config,
|
||||
// ContentTitle02Config
|
||||
ContentTitle02Config,
|
||||
ContentTitle03Config,
|
||||
ContentTitle04Config,
|
||||
ContentTitle05Config,
|
||||
LeftChartsConfig,
|
||||
SearchBoxConfig
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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
|
||||
];
|
||||
|
|
|
|||
|
|
@ -528,6 +528,7 @@ export const useChartEditStore = defineStore({
|
|||
type: isCut ? HistoryActionTypeEnum.CUT : HistoryActionTypeEnum.COPY,
|
||||
};
|
||||
this.setRecordChart(copyData);
|
||||
localStorage.setItem('copyData', JSON.stringify(copyData));
|
||||
window['$message'].success(isCut ? '剪切图表成功' : '复制图表成功！');
|
||||
loadingFinish();
|
||||
}
|
||||
|
|
@ -541,9 +542,13 @@ export const useChartEditStore = defineStore({
|
|||
},
|
||||
// * 粘贴
|
||||
setParse() {
|
||||
console.log('setParse');
|
||||
try {
|
||||
loadingStart();
|
||||
const recordCharts = this.getRecordChart;
|
||||
const recordCharts = this.getRecordChart
|
||||
? this.getRecordChart
|
||||
: JSON.parse(localStorage.getItem('copyData'));
|
||||
|
||||
if (recordCharts === undefined) {
|
||||
loadingFinish();
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -5,5 +5,5 @@ export { ConfigType }
|
|||
export { PackagesType }
|
||||
export interface PackagesStoreType {
|
||||
packagesList: PackagesType,
|
||||
newPhoto?: ConfigType
|
||||
newPhoto?: ConfigType[]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@ export const usePackagesStore = defineStore({
|
|||
}
|
||||
},
|
||||
actions: {
|
||||
addPhotos(newPhoto: ConfigType, index: number) {
|
||||
addPhotos(newPhoto: ConfigType[], index: number) {
|
||||
this.newPhoto = newPhoto
|
||||
this.packagesList.Photos.splice(index, 0, newPhoto)
|
||||
this.packagesList.Photos.splice(index, 0, ...newPhoto)
|
||||
},
|
||||
deletePhotos(photoInfo: ConfigType, index: number) {
|
||||
this.packagesList.Photos.splice(index, 1)
|
||||
|
|
|
|||
|
|
@ -105,10 +105,10 @@ watch(
|
|||
watch(
|
||||
() => packagesStore.newPhoto,
|
||||
newPhoto => {
|
||||
if (!newPhoto) return
|
||||
const newPhotoCategory = newPhoto.category
|
||||
packages.categorys[newPhotoCategory].splice(1, 0, newPhoto)
|
||||
packages.categorys['all'].splice(1, 0, newPhoto)
|
||||
if (!newPhoto || newPhoto.length <= 0) return
|
||||
const newPhotoCategory = newPhoto[0].category
|
||||
packages.categorys[newPhotoCategory].splice(1, 0, ...newPhoto)
|
||||
packages.categorys['all'].splice(1, 0, ...newPhoto)
|
||||
}
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -7,20 +7,20 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="content-div">
|
||||
<div class="photo-item" v-for="(item, index) in photoList" :key="index">
|
||||
<div class="photo-item" v-for="(item, index) in photoList" :key="index" @click="changeSelect(selectPhotoList.some(obj => obj.id === item.id)? 1: 2,item)">
|
||||
<Image
|
||||
|
||||
:src="`${apiUrl}/${item.filePath}`"
|
||||
/>
|
||||
<div class="select-div">
|
||||
<Icon v-if="selectPhotoList.some(obj => obj.id === item.id)" icon="material-symbols-light:check-circle" :size="25" style="color: #18a058;cursor: pointer;" @click="changeSelect(1,item)"/>
|
||||
<Icon v-else icon="material-symbols-light:check-circle-outline" :size="25" style="color: #cacdcd;cursor: pointer;" @click="changeSelect(2,item)"/>
|
||||
<Icon v-if="selectPhotoList.some(obj => obj.id === item.id)" icon="material-symbols-light:check-circle" :size="25" style="color: #18a058;"/>
|
||||
<Icon v-else icon="material-symbols-light:check-circle-outline" :size="25" style="color: #cacdcd;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<Button type="primary" style="margin-right: 10px;background-color: #ed6f6f;" @click="deleteImage">删除图片</Button>
|
||||
<Upload
|
||||
:multiple="true"
|
||||
:accept="'.jpg,.png,.jpeg'"
|
||||
:showUploadList="false"
|
||||
:custom-request="customRequest"
|
||||
|
|
@ -113,6 +113,7 @@ const addPhotoToList = () =>{
|
|||
return
|
||||
}
|
||||
const userPhotosList: ConfigType[] = getLocalStorage(StoreKey) || []
|
||||
const addNewPhotosList: ConfigType[] = []
|
||||
selectPhotoList.value.forEach(item => {
|
||||
const newPhoto = {
|
||||
...ImageConfig,
|
||||
|
|
@ -126,9 +127,11 @@ const addPhotoToList = () =>{
|
|||
redirectComponent: `${ImageConfig.package}/${ImageConfig.category}/${ImageConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
|
||||
}
|
||||
userPhotosList.unshift(newPhoto)
|
||||
packagesStore.addPhotos(newPhoto, 1)
|
||||
addNewPhotosList.unshift(newPhoto)
|
||||
})
|
||||
setLocalStorage(StoreKey, userPhotosList)
|
||||
packagesStore.addPhotos(addNewPhotosList, 1)
|
||||
selectPhotoList.value = []
|
||||
closeModal()
|
||||
}
|
||||
</script>
|
||||
|
|
@ -177,6 +180,7 @@ const addPhotoToList = () =>{
|
|||
background-color: rgb(24,24,28);
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
.select-div{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,14 @@ export const eventTypeOptions: EventOptionsItemType[] = [
|
|||
label: '右击',
|
||||
value: 'rightclick',
|
||||
},
|
||||
{
|
||||
label: '鼠标移入',
|
||||
value: 'mousein',
|
||||
},
|
||||
{
|
||||
label: '鼠标移出',
|
||||
value: 'mouseout',
|
||||
},
|
||||
];
|
||||
// * 动作类型
|
||||
export const movementTypeOptions: EventOptionsItemType[] = [
|
||||
|
|
|
|||
|
|
@ -37,7 +37,13 @@
|
|||
</n-tabs>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<n-tabs v-if="selectTarget" v-model:value="tabsSelect" class="tabs-box" size="small" type="segment">
|
||||
<n-tabs
|
||||
v-if="selectTarget"
|
||||
v-model:value="tabsSelect"
|
||||
class="tabs-box"
|
||||
size="small"
|
||||
type="segment"
|
||||
>
|
||||
<n-tab-pane
|
||||
v-for="item in selectTarget.isGroup ? chartsDefaultTabList : chartsTabList"
|
||||
:key="item.key"
|
||||
|
|
@ -62,111 +68,119 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, toRefs, watch, computed } from 'vue'
|
||||
import { icon } from '@/plugins'
|
||||
import { loadAsyncComponent ,acquiesceAsyncComponent} from '@/utils'
|
||||
import { ContentBox } from '../ContentBox/index'
|
||||
import { TabsEnum } from './index.d'
|
||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
||||
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { ref, toRefs, watch, computed } from 'vue';
|
||||
import { icon } from '@/plugins';
|
||||
import { loadAsyncComponent, acquiesceAsyncComponent } from '@/utils';
|
||||
import { ContentBox } from '../ContentBox/index';
|
||||
import { TabsEnum } from './index.d';
|
||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore';
|
||||
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
||||
const { getDetails } = toRefs(useChartLayoutStore())
|
||||
const { setItem } = useChartLayoutStore()
|
||||
const chartEditStore = useChartEditStore()
|
||||
const { getDetails } = toRefs(useChartLayoutStore());
|
||||
const { setItem } = useChartLayoutStore();
|
||||
const chartEditStore = useChartEditStore();
|
||||
|
||||
const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5
|
||||
const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5;
|
||||
|
||||
const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
|
||||
const CanvasPage = acquiesceAsyncComponent(() => import('./components/CanvasPage/index.vue'))
|
||||
const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'))
|
||||
const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
|
||||
const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'))
|
||||
const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'))
|
||||
const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'));
|
||||
const CanvasPage = acquiesceAsyncComponent(() => import('./components/CanvasPage/index.vue'));
|
||||
const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'));
|
||||
const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'));
|
||||
const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'));
|
||||
const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'));
|
||||
|
||||
const collapsed = ref<boolean>(getDetails.value)
|
||||
const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING)
|
||||
const collapsed = ref<boolean>(getDetails.value);
|
||||
const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING);
|
||||
|
||||
const collapsedHandle = () => {
|
||||
collapsed.value = true
|
||||
setItem(ChartLayoutStoreEnum.DETAILS, true)
|
||||
}
|
||||
const collapsedHandle = () => {
|
||||
collapsed.value = true;
|
||||
setItem(ChartLayoutStoreEnum.DETAILS, true);
|
||||
};
|
||||
|
||||
const expandHandle = () => {
|
||||
collapsed.value = false
|
||||
setItem(ChartLayoutStoreEnum.DETAILS, false)
|
||||
}
|
||||
const expandHandle = () => {
|
||||
collapsed.value = false;
|
||||
setItem(ChartLayoutStoreEnum.DETAILS, false);
|
||||
};
|
||||
|
||||
const selectTarget = computed(() => {
|
||||
const selectId = chartEditStore.getTargetChart.selectId
|
||||
// 排除多个
|
||||
if (selectId.length !== 1) return undefined
|
||||
const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
|
||||
if (target?.isGroup) {
|
||||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
||||
tabsSelect.value = TabsEnum.CHART_SETTING
|
||||
}
|
||||
return target
|
||||
})
|
||||
const selectTarget = computed(() => {
|
||||
const selectId = chartEditStore.getTargetChart.selectId;
|
||||
// 排除多个
|
||||
if (selectId.length !== 1) return undefined;
|
||||
const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()];
|
||||
if (target?.isGroup) {
|
||||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
||||
tabsSelect.value = TabsEnum.CHART_SETTING;
|
||||
}
|
||||
return target;
|
||||
});
|
||||
|
||||
watch(getDetails, newData => {
|
||||
if (newData) {
|
||||
collapsedHandle()
|
||||
} else {
|
||||
expandHandle()
|
||||
}
|
||||
})
|
||||
watch(getDetails, (newData) => {
|
||||
if (newData) {
|
||||
collapsedHandle();
|
||||
} else {
|
||||
expandHandle();
|
||||
}
|
||||
});
|
||||
|
||||
// 页面设置
|
||||
const globalTabList = [
|
||||
{
|
||||
key: TabsEnum.PAGE_SETTING,
|
||||
title: '页面配置',
|
||||
icon: DesktopOutlineIcon,
|
||||
render: CanvasPage
|
||||
}
|
||||
]
|
||||
// 页面设置
|
||||
const globalTabList = [
|
||||
{
|
||||
key: TabsEnum.PAGE_SETTING,
|
||||
title: '页面配置',
|
||||
icon: DesktopOutlineIcon,
|
||||
render: CanvasPage,
|
||||
},
|
||||
];
|
||||
const defaultTabList = [
|
||||
{
|
||||
key: TabsEnum.CHART_SETTING,
|
||||
title: '定制',
|
||||
icon: ConstructIcon,
|
||||
render: ChartSetting,
|
||||
},
|
||||
{
|
||||
key: TabsEnum.CHART_ANIMATION,
|
||||
title: '动画',
|
||||
icon: LeafIcon,
|
||||
render: ChartAnimation,
|
||||
},
|
||||
];
|
||||
const chartsDefaultTabList = [
|
||||
...defaultTabList,
|
||||
{
|
||||
key: TabsEnum.CHART_EVENT,
|
||||
title: '事件',
|
||||
icon: RocketIcon,
|
||||
render: ChartEvent,
|
||||
},
|
||||
];
|
||||
|
||||
const chartsDefaultTabList = [
|
||||
{
|
||||
key: TabsEnum.CHART_SETTING,
|
||||
title: '定制',
|
||||
icon: ConstructIcon,
|
||||
render: ChartSetting
|
||||
},
|
||||
{
|
||||
key: TabsEnum.CHART_ANIMATION,
|
||||
title: '动画',
|
||||
icon: LeafIcon,
|
||||
render: ChartAnimation
|
||||
}
|
||||
]
|
||||
|
||||
const chartsTabList = [
|
||||
...chartsDefaultTabList,
|
||||
{
|
||||
key: TabsEnum.CHART_DATA,
|
||||
title: '数据',
|
||||
icon: FlashIcon,
|
||||
render: ChartData
|
||||
},
|
||||
{
|
||||
key: TabsEnum.CHART_EVENT,
|
||||
title: '事件',
|
||||
icon: RocketIcon,
|
||||
render: ChartEvent
|
||||
}
|
||||
]
|
||||
const chartsTabList = [
|
||||
...defaultTabList,
|
||||
{
|
||||
key: TabsEnum.CHART_DATA,
|
||||
title: '数据',
|
||||
icon: FlashIcon,
|
||||
render: ChartData,
|
||||
},
|
||||
{
|
||||
key: TabsEnum.CHART_EVENT,
|
||||
title: '事件',
|
||||
icon: RocketIcon,
|
||||
render: ChartEvent,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go(content-configurations) {
|
||||
overflow: hidden;
|
||||
.tabs-box {
|
||||
padding: 10px;
|
||||
.icon-position {
|
||||
padding-top: 2px;
|
||||
@include go(content-configurations) {
|
||||
overflow: hidden;
|
||||
.tabs-box {
|
||||
padding: 10px;
|
||||
.icon-position {
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
...useSizeStyle(groupData.attr),
|
||||
...getFilterStyle(groupData.styles),
|
||||
...getTransformStyle(groupData.styles),
|
||||
...getBlendModeStyle(groupData.styles) as any
|
||||
...(getBlendModeStyle(groupData.styles) as any),
|
||||
}"
|
||||
@click="mouseClickHandle($event, groupData)"
|
||||
@mousedown="mousedownHandle($event, groupData)"
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
:item="item"
|
||||
:hiddenPoint="true"
|
||||
:style="{
|
||||
...useComponentStyle(item.attr, groupIndex)
|
||||
...useComponentStyle(item.attr, groupIndex),
|
||||
}"
|
||||
>
|
||||
<component
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
:style="{
|
||||
...useSizeStyle(item.attr),
|
||||
...getFilterStyle(item.styles),
|
||||
...getTransformStyle(item.styles)
|
||||
...getTransformStyle(item.styles),
|
||||
}"
|
||||
></component>
|
||||
</edit-shape-box>
|
||||
|
|
@ -51,79 +51,88 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType } from 'vue'
|
||||
import { MenuEnum } from '@/enums/editPageEnum'
|
||||
import { chartColors } from '@/settings/chartThemes/index'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
|
||||
import { useMouseHandle } from '../../hooks/useDrag.hook'
|
||||
import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook'
|
||||
import { EditShapeBox } from '../../components/EditShapeBox'
|
||||
import { computed, PropType } from 'vue';
|
||||
import { MenuEnum } from '@/enums/editPageEnum';
|
||||
import { chartColors } from '@/settings/chartThemes/index';
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
|
||||
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d';
|
||||
import {
|
||||
animationsClass,
|
||||
getFilterStyle,
|
||||
getTransformStyle,
|
||||
getBlendModeStyle,
|
||||
colorCustomMerge,
|
||||
} from '@/utils';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook';
|
||||
import { useMouseHandle } from '../../hooks/useDrag.hook';
|
||||
import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook';
|
||||
import { EditShapeBox } from '../../components/EditShapeBox';
|
||||
|
||||
const props = defineProps({
|
||||
groupData: {
|
||||
type: Object as PropType<CreateComponentGroupType>,
|
||||
required: true
|
||||
},
|
||||
groupIndex: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const props = defineProps({
|
||||
groupData: {
|
||||
type: Object as PropType<CreateComponentGroupType>,
|
||||
required: true,
|
||||
},
|
||||
groupIndex: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
const { handleContextMenu } = useContextMenu()
|
||||
const chartEditStore = useChartEditStore();
|
||||
const { handleContextMenu } = useContextMenu();
|
||||
|
||||
// 点击事件
|
||||
const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
|
||||
// 点击事件
|
||||
const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } =
|
||||
useMouseHandle();
|
||||
|
||||
// 右键
|
||||
const optionsHandle = (
|
||||
targetList: MenuOptionsItemType[],
|
||||
allList: MenuOptionsItemType[],
|
||||
targetInstance: CreateComponentType
|
||||
) => {
|
||||
const filter = (menulist: MenuEnum[]) => {
|
||||
return allList.filter(i => menulist.includes(i.key as MenuEnum))
|
||||
}
|
||||
// 右键
|
||||
const optionsHandle = (
|
||||
targetList: MenuOptionsItemType[],
|
||||
allList: MenuOptionsItemType[],
|
||||
targetInstance: CreateComponentType,
|
||||
) => {
|
||||
const filter = (menulist: MenuEnum[]) => {
|
||||
return allList.filter((i) => menulist.includes(i.key as MenuEnum));
|
||||
};
|
||||
|
||||
// 多选处理
|
||||
if (chartEditStore.getTargetChart.selectId.length > 1) {
|
||||
return filter([MenuEnum.GROUP, MenuEnum.DELETE])
|
||||
} else {
|
||||
const statusMenuEnums: MenuEnum[] = []
|
||||
if (targetInstance.status.lock) {
|
||||
statusMenuEnums.push(MenuEnum.LOCK)
|
||||
// 多选处理
|
||||
if (chartEditStore.getTargetChart.selectId.length > 1) {
|
||||
return filter([MenuEnum.GROUP, MenuEnum.DELETE]);
|
||||
} else {
|
||||
statusMenuEnums.push(MenuEnum.UNLOCK)
|
||||
const statusMenuEnums: MenuEnum[] = [];
|
||||
if (targetInstance.status.lock) {
|
||||
statusMenuEnums.push(MenuEnum.LOCK);
|
||||
} else {
|
||||
statusMenuEnums.push(MenuEnum.UNLOCK);
|
||||
}
|
||||
if (targetInstance.status.hide) {
|
||||
statusMenuEnums.push(MenuEnum.HIDE);
|
||||
} else {
|
||||
statusMenuEnums.push(MenuEnum.SHOW);
|
||||
}
|
||||
// 单选
|
||||
const singleMenuEnums = [MenuEnum.UN_GROUP];
|
||||
return [
|
||||
...filter(singleMenuEnums),
|
||||
divider(),
|
||||
...targetList.filter((i) => !statusMenuEnums.includes(i.key as MenuEnum)),
|
||||
];
|
||||
}
|
||||
if (targetInstance.status.hide) {
|
||||
statusMenuEnums.push(MenuEnum.HIDE)
|
||||
} else {
|
||||
statusMenuEnums.push(MenuEnum.SHOW)
|
||||
}
|
||||
// 单选
|
||||
const singleMenuEnums = [MenuEnum.UN_GROUP]
|
||||
return [
|
||||
...filter(singleMenuEnums),
|
||||
divider(),
|
||||
...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 配置项
|
||||
const themeColor = computed(() => {
|
||||
const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
|
||||
return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor]
|
||||
})
|
||||
// 配置项
|
||||
const themeColor = computed(() => {
|
||||
const colorCustomMergeData = colorCustomMerge(
|
||||
chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo,
|
||||
);
|
||||
return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor];
|
||||
});
|
||||
|
||||
// 主题色
|
||||
const themeSetting = computed(() => {
|
||||
const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
|
||||
return chartThemeSetting
|
||||
})
|
||||
// 主题色
|
||||
const themeSetting = computed(() => {
|
||||
const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting;
|
||||
return chartThemeSetting;
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -21,149 +21,149 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType } from 'vue'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import { computed, PropType } from 'vue';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
|
||||
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook'
|
||||
import { useMousePointHandle } from '../../hooks/useDrag.hook'
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore';
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
|
||||
import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook';
|
||||
import { useMousePointHandle } from '../../hooks/useDrag.hook';
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
|
||||
required: true
|
||||
},
|
||||
hiddenPoint: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
}
|
||||
})
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
|
||||
required: true,
|
||||
},
|
||||
hiddenPoint: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const designStore = useDesignStore()
|
||||
const chartEditStore = useChartEditStore()
|
||||
const designStore = useDesignStore();
|
||||
const chartEditStore = useChartEditStore();
|
||||
|
||||
// 锚点
|
||||
const pointList = ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb']
|
||||
// 锚点
|
||||
const pointList = ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb'];
|
||||
|
||||
// 光标朝向
|
||||
const cursorResize = ['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se']
|
||||
// 光标朝向
|
||||
const cursorResize = ['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se'];
|
||||
|
||||
// 颜色
|
||||
const themeColor = computed(() => {
|
||||
return designStore.getAppTheme
|
||||
})
|
||||
// 颜色
|
||||
const themeColor = computed(() => {
|
||||
return designStore.getAppTheme;
|
||||
});
|
||||
|
||||
// 计算当前选中目标
|
||||
const hover = computed(() => {
|
||||
const isDrag = chartEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG]
|
||||
if (isDrag) return false
|
||||
// 计算当前选中目标
|
||||
const hover = computed(() => {
|
||||
const isDrag = chartEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG];
|
||||
if (isDrag) return false;
|
||||
|
||||
if (props.item.status.lock) return false
|
||||
return props.item.id === chartEditStore.getTargetChart.hoverId
|
||||
})
|
||||
if (props.item.status.lock) return false;
|
||||
return props.item.id === chartEditStore.getTargetChart.hoverId;
|
||||
});
|
||||
|
||||
// 兼容多值场景
|
||||
const select = computed(() => {
|
||||
const id = props.item.id
|
||||
if (props.item.status.lock) return false
|
||||
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
|
||||
})
|
||||
// 兼容多值场景
|
||||
const select = computed(() => {
|
||||
const id = props.item.id;
|
||||
if (props.item.status.lock) return false;
|
||||
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id);
|
||||
});
|
||||
|
||||
// 锁定
|
||||
const lock = computed(() => {
|
||||
return props.item.status.lock
|
||||
})
|
||||
// 锁定
|
||||
const lock = computed(() => {
|
||||
return props.item.status.lock;
|
||||
});
|
||||
|
||||
// 隐藏
|
||||
const hide = computed(() => {
|
||||
return props.item.status.hide
|
||||
})
|
||||
// 隐藏
|
||||
const hide = computed(() => {
|
||||
return props.item.status.hide;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go(shape-box) {
|
||||
position: absolute;
|
||||
cursor: move;
|
||||
|
||||
&.lock {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 锚点 */
|
||||
.shape-point {
|
||||
z-index: 1;
|
||||
@include go(shape-box) {
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border: 3px solid v-bind('themeColor');
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
transform: translate(-40%, -30%);
|
||||
&.t {
|
||||
width: 30px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
&.b {
|
||||
width: 30px;
|
||||
transform: translate(-50%, -30%);
|
||||
}
|
||||
&.l,
|
||||
&.r {
|
||||
height: 30px;
|
||||
}
|
||||
&.r {
|
||||
transform: translate(-20%, -50%);
|
||||
}
|
||||
&.l {
|
||||
transform: translate(-45%, -50%);
|
||||
}
|
||||
&.rt,
|
||||
&.rb {
|
||||
transform: translate(-30%, -30%);
|
||||
}
|
||||
}
|
||||
/* 选中 */
|
||||
.shape-modal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: move;
|
||||
|
||||
.shape-modal-select,
|
||||
.shape-modal-change {
|
||||
&.lock {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 锚点 */
|
||||
.shape-point {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border: 3px solid v-bind('themeColor');
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
transform: translate(-40%, -30%);
|
||||
&.t {
|
||||
width: 30px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
&.b {
|
||||
width: 30px;
|
||||
transform: translate(-50%, -30%);
|
||||
}
|
||||
&.l,
|
||||
&.r {
|
||||
height: 30px;
|
||||
}
|
||||
&.r {
|
||||
transform: translate(-20%, -50%);
|
||||
}
|
||||
&.l {
|
||||
transform: translate(-45%, -50%);
|
||||
}
|
||||
&.rt,
|
||||
&.rb {
|
||||
transform: translate(-30%, -30%);
|
||||
}
|
||||
}
|
||||
/* 选中 */
|
||||
.shape-modal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
.shape-modal-select {
|
||||
opacity: 0.1;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
&.active {
|
||||
background-color: v-bind('themeColor');
|
||||
.shape-modal-select,
|
||||
.shape-modal-change {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.shape-modal-change {
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
&.selectActive,
|
||||
&.hoverActive {
|
||||
border-color: v-bind('themeColor');
|
||||
border-width: 2px;
|
||||
|
||||
.shape-modal-select {
|
||||
opacity: 0.1;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
&.active {
|
||||
background-color: v-bind('themeColor');
|
||||
}
|
||||
}
|
||||
&.hoverActive {
|
||||
border-style: dotted;
|
||||
}
|
||||
&.selectActive {
|
||||
border-style: solid;
|
||||
.shape-modal-change {
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
&.selectActive,
|
||||
&.hoverActive {
|
||||
border-color: v-bind('themeColor');
|
||||
border-width: 2px;
|
||||
}
|
||||
&.hoverActive {
|
||||
border-style: dotted;
|
||||
}
|
||||
&.selectActive {
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,11 @@
|
|||
...getSizeStyle(groupData.attr),
|
||||
...getFilterStyle(groupData.styles),
|
||||
}"
|
||||
@click="clickBtn"
|
||||
@dblclick="dblclickBtn"
|
||||
@contextmenu="rightclickBtn"
|
||||
@mouseenter="mouseenterBtn"
|
||||
@mouseleave="mouseleaveBtn"
|
||||
>
|
||||
<div
|
||||
class="chart-item"
|
||||
|
|
@ -36,7 +41,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue';
|
||||
import { PropType, ref } from 'vue';
|
||||
import { CreateComponentGroupType } from '@/packages/index.d';
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils';
|
||||
import {
|
||||
|
|
@ -46,7 +51,10 @@
|
|||
getPreviewConfigStyle,
|
||||
} from '../../utils';
|
||||
import { useLifeHandler } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
|
||||
|
||||
const chartEditStore = useChartEditStore();
|
||||
const props = defineProps({
|
||||
groupData: {
|
||||
type: Object as PropType<CreateComponentGroupType>,
|
||||
|
|
@ -65,6 +73,58 @@
|
|||
required: true,
|
||||
},
|
||||
});
|
||||
console.log(props.groupData);
|
||||
// 单击交互
|
||||
const clickElementItem = ref([]);
|
||||
// 双击交互
|
||||
const dbclickElementItem = ref([]);
|
||||
// 右击交互
|
||||
const rightclickElementItem = ref([]);
|
||||
// 鼠标移入交互
|
||||
const mouseenterElementItem = ref([]);
|
||||
// 鼠标移出交互
|
||||
const mouseleaveElementItem = ref([]);
|
||||
|
||||
const list = props.groupData.events.interactConfigEvents;
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (list[i].type == 'click') {
|
||||
for (let j = 0; j < list[i].movementList.length; j++) {
|
||||
clickElementItem.value.push(list[i].movementList[j]);
|
||||
}
|
||||
} else if (list[i].type == 'dblclick') {
|
||||
for (let j = 0; j < list[i].movementList.length; j++) {
|
||||
dbclickElementItem.value.push(list[i].movementList[j]);
|
||||
}
|
||||
} else if (list[i].type == 'rightclick') {
|
||||
for (let j = 0; j < list[i].movementList.length; j++) {
|
||||
rightclickElementItem.value.push(list[i].movementList[j]);
|
||||
}
|
||||
} else if (list[i].type == 'mousein') {
|
||||
for (let j = 0; j < list[i].movementList.length; j++) {
|
||||
mouseenterElementItem.value.push(list[i].movementList[j]);
|
||||
}
|
||||
} else if (list[i].type == 'mouseout') {
|
||||
for (let j = 0; j < list[i].movementList.length; j++) {
|
||||
mouseleaveElementItem.value.push(list[i].movementList[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
const clickBtn = () => {
|
||||
eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
|
||||
};
|
||||
const dblclickBtn = () => {
|
||||
eventHandlerHook(chartEditStore.getComponentList, dbclickElementItem.value);
|
||||
};
|
||||
const rightclickBtn = (event) => {
|
||||
event.preventDefault(); // 阻止默认的右键菜单
|
||||
eventHandlerHook(chartEditStore.getComponentList, rightclickElementItem.value);
|
||||
};
|
||||
const mouseenterBtn = () => {
|
||||
eventHandlerHook(chartEditStore.getComponentList, mouseenterElementItem.value);
|
||||
};
|
||||
const mouseleaveBtn = () => {
|
||||
eventHandlerHook(chartEditStore.getComponentList, mouseleaveElementItem.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
...getPreviewConfigStyle(item.preview),
|
||||
...(getBlendModeStyle(item.styles) as any),
|
||||
...getSizeStyle(item.attr),
|
||||
...setMouseEventClose(item.option)
|
||||
}"
|
||||
>
|
||||
<!-- 分组 -->
|
||||
|
|
@ -60,6 +61,7 @@
|
|||
getComponentAttrStyle,
|
||||
getStatusStyle,
|
||||
getPreviewConfigStyle,
|
||||
setMouseEventClose,
|
||||
} from '../../utils';
|
||||
import { useLifeHandler } from '@/hooks';
|
||||
|
||||
|
|
|
|||
|
|
@ -56,3 +56,17 @@ export const getEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => {
|
|||
...computedBackground
|
||||
}
|
||||
}
|
||||
// 图片设置禁用鼠标事件
|
||||
export const setMouseEventClose = (option) => {
|
||||
let resultObj = {}
|
||||
if(option.photoMouseEventClose){
|
||||
resultObj['pointer-events'] = 'none'
|
||||
}
|
||||
if(option.mouseSelectClose){
|
||||
resultObj['user-select'] = 'none'
|
||||
}
|
||||
if(option.mouseCursor){
|
||||
resultObj['cursor'] = option.mouseCursor
|
||||
}
|
||||
return resultObj
|
||||
}
|
||||
Loading…
Reference in New Issue