修改看板
夜笙歌
1 day ago
parent
b3654b66c4
commit
4477d764a7
@ -0,0 +1,149 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
|
||||||
|
|
||||||
|
<div class="custom-node"
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||||
|
<swiper-container style="color: #fff" v-bind="swiperOptions" v-if="swiperShow"
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<swiper-slide v-for="i in list"
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<el-image :style="{width:'100%',height:'100%'}" :src="i" :fit="props.data.options.imageFit || 'contain'" />
|
||||||
|
/>
|
||||||
|
<!-- <img :src="i" style="width: 100%; height: 100%; object-fit: contain;" />-->
|
||||||
|
</swiper-slide>
|
||||||
|
</swiper-container>
|
||||||
|
<div class="swiper-button-next"></div>
|
||||||
|
<div class="swiper-button-prev"></div>
|
||||||
|
</div>
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
|
||||||
|
const swiperShow = ref(true);
|
||||||
|
const props = defineProps({
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const list = ref([
|
||||||
|
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||||
|
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
|
||||||
|
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
|
||||||
|
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
|
||||||
|
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
|
||||||
|
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
|
||||||
|
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
|
||||||
|
]);
|
||||||
|
const swiperOptions = ref({});
|
||||||
|
const getSwiperOptions = () => {
|
||||||
|
let obj = {};
|
||||||
|
let data = props.data.options.swiperOptions || {};
|
||||||
|
if (data.autoplay) {
|
||||||
|
obj.autoplay = {};
|
||||||
|
if (data.delay > 0) {
|
||||||
|
obj.autoplay = {
|
||||||
|
delay: data.delay
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (data.pauseOnMouseEnter) {
|
||||||
|
obj.pauseOnMouseEnter = data.pauseOnMouseEnter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (data.speed) {
|
||||||
|
obj.speed = data.speed;
|
||||||
|
}
|
||||||
|
if (data.loop) {
|
||||||
|
obj.loop = data.loop;
|
||||||
|
}
|
||||||
|
if (data.navigation) {
|
||||||
|
obj.navigation = { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' };
|
||||||
|
}
|
||||||
|
if (data.effect) {
|
||||||
|
obj.effect = data.effect;
|
||||||
|
}
|
||||||
|
swiperOptions.value = obj;
|
||||||
|
};
|
||||||
|
watch(() => JSON.parse(JSON.stringify(props.data?.options?.swiperOptions || '{}')), (obj1, obj2) => {
|
||||||
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||||
|
swiperShow.value = false;
|
||||||
|
getSwiperOptions();
|
||||||
|
nextTick(() => {
|
||||||
|
swiperShow.value = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, { deep: true, immediate: true });
|
||||||
|
watch(() => JSON.parse(JSON.stringify(props.data?.options?.carouselImages || '[]')), (obj1, obj2) => {
|
||||||
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||||
|
if (props.data?.options?.carouselImages?.length >= 1) {
|
||||||
|
list.value = props.data?.options?.carouselImages;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, { deep: true, immediate: true });
|
||||||
|
onMounted(() => {
|
||||||
|
});
|
||||||
|
const emit = defineEmits(['resize']);
|
||||||
|
const resize = (e) => {
|
||||||
|
emit('resize', e, props.id);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-node {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.swiper-button-next {
|
||||||
|
right: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-button-prev {
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.swiper-button-next {
|
||||||
|
right: 10px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-button-prev {
|
||||||
|
left: 10px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,165 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
|
||||||
|
|
||||||
|
<div class="custom-node"
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||||
|
<div style="width: 100%;height: 100%" ref="chartRef" />
|
||||||
|
</div>
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const chartRef = ref();
|
||||||
|
let chart = null;
|
||||||
|
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
|
||||||
|
const getOption = () => {
|
||||||
|
const chartOption = {
|
||||||
|
title: {
|
||||||
|
text: props.data.options.title || '设备运行数量',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: 400,
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
left: '0',
|
||||||
|
top: '5%'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: props.data?.options?.legend || false,
|
||||||
|
icon: 'circle',
|
||||||
|
top: '5%',
|
||||||
|
right: '5%',
|
||||||
|
itemWidth: 6,
|
||||||
|
itemGap: 20,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: props.data?.options?.tooltip || false,
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
color: '#000',
|
||||||
|
borderColor: 'rgba(0,0,0,0)',
|
||||||
|
shadowColor: 'rgba(0,0,0,0)',
|
||||||
|
shadowOffsetY: 0
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
textStyle: {
|
||||||
|
color: '#000'
|
||||||
|
},
|
||||||
|
padding: [10, 10],
|
||||||
|
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '30%',
|
||||||
|
bottom: '10%'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
roseType: 'area',
|
||||||
|
radius: '50%',
|
||||||
|
label: {
|
||||||
|
show: props.data?.options?.label || false,
|
||||||
|
formatter: '{b}: {d}%'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
let xData = [props.inputData?.x1 || []];
|
||||||
|
let yData = [props.inputData?.y1 || []];
|
||||||
|
console.log(chartOption);
|
||||||
|
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
|
||||||
|
let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
|
||||||
|
Array(length).fill(0).forEach((_, i) => {
|
||||||
|
let item = [];
|
||||||
|
xData.forEach(e => {
|
||||||
|
item.push(e[i]);
|
||||||
|
});
|
||||||
|
yData.forEach(e => {
|
||||||
|
item.push(e[i]);
|
||||||
|
});
|
||||||
|
source.push(item);
|
||||||
|
});
|
||||||
|
console.log(source);
|
||||||
|
return {
|
||||||
|
...chartOption,
|
||||||
|
dataset: {
|
||||||
|
source
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
chart = echarts.init(chartRef.value, 'macarons', {
|
||||||
|
renderer: 'svg'
|
||||||
|
});
|
||||||
|
chart.setOption(getOption(), true);
|
||||||
|
});
|
||||||
|
watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
|
||||||
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||||
|
chart && chart.setOption(getOption(), true);
|
||||||
|
}
|
||||||
|
}, { deep: true, immediate: true });
|
||||||
|
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
|
||||||
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||||
|
chart?.resize();
|
||||||
|
}
|
||||||
|
}, { deep: true, immediate: true });
|
||||||
|
const emit = defineEmits(['resize']);
|
||||||
|
const resize = (e) => {
|
||||||
|
chart.resize();
|
||||||
|
emit('resize', e, props.id);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-node {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
|
||||||
|
@resize="resize" />
|
||||||
|
<div class="custom-node"
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||||
|
<el-timeline style="width: 100%">
|
||||||
|
<el-timeline-item
|
||||||
|
:hide-timestamp="!props.data.options.isTimestamp"
|
||||||
|
placement="top"
|
||||||
|
v-for="(activity, index) in list"
|
||||||
|
:key="index"
|
||||||
|
:style="{'--el-text-color-secondary': props.data.options.timestampColor}"
|
||||||
|
:timestamp="activity[props.data.options.timestampField || 'timestamp']"
|
||||||
|
>
|
||||||
|
<span :style="{color: props.data.options.color}">
|
||||||
|
{{ activity[props.data.options.field || 'content'] }}
|
||||||
|
</span>
|
||||||
|
</el-timeline-item>
|
||||||
|
</el-timeline>
|
||||||
|
</div>
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
|
||||||
|
const list = ref([
|
||||||
|
{
|
||||||
|
content: '事件1',
|
||||||
|
timestamp: '2018-04-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: '事件2',
|
||||||
|
timestamp: '2018-04-13'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: '事件3',
|
||||||
|
timestamp: '2018-04-11'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
const props = defineProps({
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['resize']);
|
||||||
|
const resize = (e) => {
|
||||||
|
emit('resize', e, props.id);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-node {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
|
||||||
|
@resize="resize" />
|
||||||
|
|
||||||
|
<div class="custom-node"
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||||
|
|
||||||
|
<video autoplay muted playsinline :width="props.dimensions.width" :height="props.dimensions.height" controls
|
||||||
|
v-if="videoShow">
|
||||||
|
<source :src="props.inputData?.videoSrc ||props.data.options.videoSrc" type="video/mp4">
|
||||||
|
您的浏览器不支持播放视频。
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
|
||||||
|
const videoShow = ref(true);
|
||||||
|
const props = defineProps({
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(() => JSON.parse(JSON.stringify([props.data?.options?.videoSrc, props.inputData?.videoSrc])), (obj1, obj2) => {
|
||||||
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||||
|
videoShow.value = false;
|
||||||
|
nextTick(() => {
|
||||||
|
videoShow.value = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, { deep: true, immediate: true });
|
||||||
|
|
||||||
|
const emit = defineEmits(['resize']);
|
||||||
|
const resize = (e) => {
|
||||||
|
emit('resize', e, props.id);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-node {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue