Skip to content

D
datax-cloud
Commit 6e32cec9 by yuwei
Options

Feature: 酷屏图表新增边框配置

parent 64b5bcac
Showing with 2115 additions and 21 deletions
datax-ui/src/views/visual/datascreen/DataScreenBuild.vue
...@@ -48,10 +48,12 @@ ...@@ -48,10 +48,12 @@
:is-conflict-check="true" :is-conflict-check="true"
:grid=[20,20] :grid=[20,20]
> >
<div v-loading="getChartItem(item.i).loading" :style="{backgroundColor: `${getChartProperty(item.i) ? getChartProperty(item.i).backgroundColor : 'rgba(255, 255, 255, 0.1)'}`}" @dblclick.stop="handleItemClick(item.i)"> <screen-border :border-box="`${getChartProperty(item.i) ? getChartProperty(item.i).border : 'BorderBox0'}`" :border-title="getChartItem(item.i).chartName" :border-style="{ height: `${item.h}`, width: `${item.w}` }">
<chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartSchema" :chart-data="getChartItem(item.i).data" :chart-style="{ height: `${item.h}px`, width: `${item.w}px` }" /> <div v-loading="getChartItem(item.i).loading" :style="{backgroundColor: `${getChartProperty(item.i) ? getChartProperty(item.i).backgroundColor : 'rgba(255, 255, 255, 0.1)'}`}" @dblclick.stop="handleItemClick(item.i)">
<div v-else :style="{height: `${item.h}px`, width: `${item.w}px` }" /> <chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartSchema" :chart-data="getChartItem(item.i).data" :chart-style="{ height: `${item.h}px`, width: `${item.w}px` }" />
</div> <div v-else :style="{ height: `${item.h}px`, width: `${item.w}px` }" />
</div>
</screen-border>
</vdr> </vdr>
</div> </div>
</div> </div>
...@@ -108,16 +110,16 @@ ...@@ -108,16 +110,16 @@
<el-input v-model="currentChartProperty.chartName" :disabled="true" style="width: 89%;" /> <el-input v-model="currentChartProperty.chartName" :disabled="true" style="width: 89%;" />
<el-button v-if="currentChartProperty.id" type="danger" icon="el-icon-delete" circle @click="handleDeleteChart(currentChartProperty.id)" /> <el-button v-if="currentChartProperty.id" type="danger" icon="el-icon-delete" circle @click="handleDeleteChart(currentChartProperty.id)" />
</el-form-item> </el-form-item>
<!-- <el-form-item label="图表边框">--> <el-form-item label="图表边框">
<!-- <el-select v-model="currentChartProperty.border">--> <el-select v-model="currentChartProperty.border">
<!-- <el-option--> <el-option
<!-- v-for="(border, index) in borders"--> v-for="(border, index) in borders"
<!-- :key="index"--> :key="index"
<!-- :label="border.label"--> :label="border.label"
<!-- :value="border.component"--> :value="border.component"
<!-- />--> />
<!-- </el-select>--> </el-select>
<!-- </el-form-item>--> </el-form-item>
<el-form-item label="背景颜色"> <el-form-item label="背景颜色">
<el-color-picker v-model="currentChartProperty.backgroundColor" show-alpha /> <el-color-picker v-model="currentChartProperty.backgroundColor" show-alpha />
</el-form-item> </el-form-item>
...@@ -139,12 +141,14 @@ import ChartPanel from '../datachart/components/ChartPanel' ...@@ -139,12 +141,14 @@ import ChartPanel from '../datachart/components/ChartPanel'
import { compressImg, dataURLtoBlob } from '@/utils/compressImage' import { compressImg, dataURLtoBlob } from '@/utils/compressImage'
import vdr from 'vue-draggable-resizable-gorkys' import vdr from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css' import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
import ScreenBorder from './components/ScreenBorder'
export default { export default {
name: 'DataScreenBuild', name: 'DataScreenBuild',
components: { components: {
vdr, vdr,
ChartPanel ChartPanel,
ScreenBorder
}, },
data() { data() {
return { return {
...@@ -181,6 +185,22 @@ export default { ...@@ -181,6 +185,22 @@ export default {
{ src: 'images/bg8.jpg' }, { src: 'images/bg8.jpg' },
{ src: 'images/bg9.jpg' }, { src: 'images/bg9.jpg' },
{ src: 'images/bg10.jpg' } { src: 'images/bg10.jpg' }
],
borders: [
{ label: 'dv-border-box-0', component: 'BorderBox0' },
{ label: 'dv-border-box-1', component: 'BorderBox1' },
{ label: 'dv-border-box-2', component: 'BorderBox2' },
{ label: 'dv-border-box-3', component: 'BorderBox3' },
{ label: 'dv-border-box-4', component: 'BorderBox4' }, { label: 'dv-border-box-4-reverse', component: 'BorderBox4Reverse' },
{ label: 'dv-border-box-5', component: 'BorderBox5' }, { label: 'dv-border-box-5-reverse', component: 'BorderBox5Reverse' },
{ label: 'dv-border-box-6', component: 'BorderBox6' },
{ label: 'dv-border-box-7', component: 'BorderBox7' },
{ label: 'dv-border-box-8', component: 'BorderBox8' }, { label: 'dv-border-box-8-reverse', component: 'BorderBox8Reverse' },
{ label: 'dv-border-box-9', component: 'BorderBox9' },
{ label: 'dv-border-box-10', component: 'BorderBox10' },
{ label: 'dv-border-box-11', component: 'BorderBox11' },
{ label: 'dv-border-box-12', component: 'BorderBox12' },
{ label: 'dv-border-box-13', component: 'BorderBox13' }
] ]
} }
}, },
...@@ -350,7 +370,7 @@ export default { ...@@ -350,7 +370,7 @@ export default {
property = { property = {
id: id, id: id,
chartName: chart.chartName, chartName: chart.chartName,
border: '', border: 'BorderBox0',
milliseconds: 0, milliseconds: 0,
backgroundColor: 'rgba(255, 255, 255, 0.1)' backgroundColor: 'rgba(255, 255, 255, 0.1)'
} }
......
datax-ui/src/views/visual/datascreen/DataScreenView.vue
...@@ -14,10 +14,12 @@ ...@@ -14,10 +14,12 @@
:is-conflict-check="true" :is-conflict-check="true"
:grid=[20,20] :grid=[20,20]
> >
<div v-loading="getChartItem(item.i).loading" :style="{backgroundColor: `${getChartProperty(item.i) ? getChartProperty(item.i).backgroundColor : 'rgba(255, 255, 255, 0.1)'}`}"> <screen-border :border-box="`${getChartProperty(item.i) ? getChartProperty(item.i).border : 'BorderBox0'}`" :border-title="getChartItem(item.i).chartName" :border-style="{ height: `${item.h}`, width: `${item.w}` }">
<chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartSchema" :chart-data="getChartItem(item.i).data" :chart-style="{ height: `${item.h}px`, width: `${item.w}px` }" /> <div v-loading="getChartItem(item.i).loading" :style="{backgroundColor: `${getChartProperty(item.i) ? getChartProperty(item.i).backgroundColor : 'rgba(255, 255, 255, 0.1)'}`}">
<div v-else :style="{height: `${item.h}px`, width: `${item.w}px` }" /> <chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartSchema" :chart-data="getChartItem(item.i).data" :chart-style="{ height: `${item.h}px`, width: `${item.w}px` }" />
</div> <div v-else :style="{height: `${item.h}px`, width: `${item.w}px` }" />
</div>
</screen-border>
</vdr> </vdr>
</div> </div>
</div> </div>
...@@ -29,12 +31,14 @@ import { dataParser } from '@/api/visual/datachart' ...@@ -29,12 +31,14 @@ import { dataParser } from '@/api/visual/datachart'
import vdr from 'vue-draggable-resizable-gorkys' import vdr from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css' import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
import ChartPanel from '../datachart/components/ChartPanel' import ChartPanel from '../datachart/components/ChartPanel'
import ScreenBorder from './components/ScreenBorder'
export default { export default {
name: 'DataScreenView', name: 'DataScreenView',
components: { components: {
vdr, vdr,
ChartPanel ChartPanel,
ScreenBorder
}, },
data() { data() {
return { return {
......
datax-ui/src/views/visual/datascreen/components/ScreenBorder.vue 0 → 100644
<template>
<component :is="borderBox" :title="borderTitle" :width="Number(borderStyle.width)" :height="Number(borderStyle.height)">
<slot />
</component>
</template>
<script>
import BorderBox0 from './borders/BorderBox0'
import BorderBox1 from './borders/BorderBox1'
import BorderBox2 from './borders/BorderBox2'
import BorderBox3 from './borders/BorderBox3'
import BorderBox4 from './borders/BorderBox4'
import BorderBox4Reverse from './borders/BorderBox4Reverse'
import BorderBox5 from './borders/BorderBox5'
import BorderBox5Reverse from './borders/BorderBox5Reverse'
import BorderBox6 from './borders/BorderBox6'
import BorderBox7 from './borders/BorderBox7'
import BorderBox8 from './borders/BorderBox8'
import BorderBox8Reverse from './borders/BorderBox8Reverse'
import BorderBox9 from './borders/BorderBox9'
import BorderBox10 from './borders/BorderBox10'
import BorderBox11 from './borders/BorderBox11'
import BorderBox12 from './borders/BorderBox12'
import BorderBox13 from './borders/BorderBox13'
export default {
name: 'ScreenBorder',
components: {
BorderBox0,
BorderBox1,
BorderBox2,
BorderBox3,
BorderBox4, BorderBox4Reverse,
BorderBox5, BorderBox5Reverse,
BorderBox6,
BorderBox7,
BorderBox8, BorderBox8Reverse,
BorderBox9,
BorderBox10,
BorderBox11,
BorderBox12,
BorderBox13
},
props: {
borderBox: {
type: String,
required: true,
default: 'BorderBox0'
},
borderTitle: {
type: String,
default: ''
},
borderStyle: {
type: Object,
default: () => {
return {
width: '0',
height: '0'
}
}
}
}
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox0.vue 0 → 100644
<template>
<div class="border-box-content">
<slot />
</div>
</template>
<script>
export default {
name: 'BorderBox0'
}
</script>
<style lang="scss" scoped>
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox1.vue 0 → 100644
<template>
<div :ref="ref" class="dv-border-box-1">
<svg class="border" :width="width" :height="height">
<polygon
:fill="backgroundColor"
:points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`"
/>
</svg>
<svg
v-for="item in border"
:key="item"
width="150px"
height="150px"
:class="`${item} border`"
>
<polygon
:fill="mergedColor[0]"
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
>
<animate
attributeName="fill"
:values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
dur="0.5s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:fill="mergedColor[1]"
points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
>
<animate
attributeName="fill"
:values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
dur="0.5s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:fill="mergedColor[0]"
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
>
<animate
attributeName="fill"
:values="`${mergedColor[0]};${mergedColor[1]};transparent`"
dur="1s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
</svg>
<div class="border-box-content">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox1',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data() {
return {
ref: 'border-box-1',
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
backgroundColor: 'transparent',
mergedColor: ['#4fd2dd', '#235fa7']
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-1 {
position: relative;
width: 100%;
height: 100%;
.border {
position: absolute;
display: block;
}
.right-top {
right: 0px;
transform: rotateY(180deg);
}
.left-bottom {
bottom: 0px;
transform: rotateX(180deg);
}
.right-bottom {
right: 0px;
bottom: 0px;
transform: rotateX(180deg) rotateY(180deg);
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox10.vue 0 → 100644
<template>
<div :ref="ref" class="dv-border-box-10" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
<svg class="dv-border-svg-container" :width="width" :height="height">
<polygon
:fill="backgroundColor"
:points="`
4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
4, ${height} 0, ${height - 4} 0, 4
`"
/>
</svg>
<svg
v-for="item in border"
:key="item"
width="150px"
height="150px"
:class="`${item} dv-border-svg-container`"
>
<polygon
:fill="mergedColor[1]"
points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
/>
</svg>
<div class="border-box-content">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox10',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data() {
return {
ref: 'border-box-10',
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
backgroundColor: 'transparent',
mergedColor: ['#1d48c4', '#d3e1f8']
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-10 {
position: relative;
width: 100%;
height: 100%;
border-radius: 6px;
.dv-border-svg-container {
position: absolute;
display: block;
}
.right-top {
right: 0px;
transform: rotateY(180deg);
}
.left-bottom {
bottom: 0px;
transform: rotateX(180deg);
}
.right-bottom {
right: 0px;
bottom: 0px;
transform: rotateX(180deg) rotateY(180deg);
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox11.vue 0 → 100644
<template>
<div :ref="ref" class="dv-border-box-11">
<svg class="dv-border-svg-container" :width="width" :height="height">
<defs>
<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
<feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
<feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
<feFlood :flood-color="mergedColor[1]" result="glowColor" />
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
<feMerge>
<feMergeNode in="softGlowColored" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<polygon
:fill="backgroundColor"
:points="`
20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
20, ${height - 8} 8, ${height - 25} 8, 50
`"
/>
<polyline
:stroke="mergedColor[0]"
:filter="`url(#${filterId})`"
:points="`
${(width - titleWidth) / 2}, 30
20, 30 7, 50 7, ${50 + (height - 167) / 2}
13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
7, ${140 + (height - 167) / 2} 7, ${height - 27}
20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30
${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52
${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
`"
/>
<polygon
:stroke="mergedColor[0]"
fill="transparent"
:points="`
${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
`"
/>
<polygon
:stroke="mergedColor[0]"
fill="transparent"
:points="`
${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
`"
/>
<polygon
:stroke="mergedColor[0]"
:fill="mergedColor[0]"
:filter="`url(#${filterId})`"
:points="`
${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
`"
/>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="1"
:points="`
${(width - titleWidth) / 2 - 10}, 37 ${(width - titleWidth) / 2 - 31}, 37
${(width - titleWidth) / 2 - 25}, 46 ${(width - titleWidth) / 2 - 4}, 46
`"
>
<animate
attributeName="opacity"
values="1;0.7;1"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="0.7"
:points="`
${(width - titleWidth) / 2 - 40}, 37 ${(width - titleWidth) / 2 - 61}, 37
${(width - titleWidth) / 2 - 55}, 46 ${(width - titleWidth) / 2 - 34}, 46
`"
>
<animate
attributeName="opacity"
values="0.7;0.4;0.7"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="0.5"
:points="`
${(width - titleWidth) / 2 - 70}, 37 ${(width - titleWidth) / 2 - 91}, 37
${(width - titleWidth) / 2 - 85}, 46 ${(width - titleWidth) / 2 - 64}, 46
`"
>
<animate
attributeName="opacity"
values="0.5;0.2;0.5"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="1"
:points="`
${(width + titleWidth) / 2 + 30}, 37 ${(width + titleWidth) / 2 + 9}, 37
${(width + titleWidth) / 2 + 3}, 46 ${(width + titleWidth) / 2 + 24}, 46
`"
>
<animate
attributeName="opacity"
values="1;0.7;1"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="0.7"
:points="`
${(width + titleWidth) / 2 + 60}, 37 ${(width + titleWidth) / 2 + 39}, 37
${(width + titleWidth) / 2 + 33}, 46 ${(width + titleWidth) / 2 + 54}, 46
`"
>
<animate
attributeName="opacity"
values="0.7;0.4;0.7"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="0.5"
:points="`
${(width + titleWidth) / 2 + 90}, 37 ${(width + titleWidth) / 2 + 69}, 37
${(width + titleWidth) / 2 + 63}, 46 ${(width + titleWidth) / 2 + 84}, 46
`"
>
<animate
attributeName="opacity"
values="0.5;0.2;0.5"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<text
class="dv-border-box-11-title"
:x="`${width / 2}`"
y="32"
fill="#fff"
font-size="18"
text-anchor="middle"
dominant-baseline="middle"
>
{{ title }}
</text>
<polygon
:fill="mergedColor[0]"
:filter="`url(#${filterId})`"
:points="`
7, ${53 + (height - 167) / 2} 11, ${57 + (height - 167) / 2}
11, ${133 + (height - 167) / 2} 7, ${137 + (height - 167) / 2}
`"
/>
<polygon
:fill="mergedColor[0]"
:filter="`url(#${filterId})`"
:points="`
${width - 7}, ${53 + (height - 167) / 2} ${width - 11}, ${57 + (height - 167) / 2}
${width - 11}, ${133 + (height - 167) / 2} ${width - 7}, ${137 + (height - 167) / 2}
`"
/>
</svg>
<div class="border-box-content">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox11',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
},
titleWidth: {
type: Number,
default: 250
},
title: {
type: String,
default: ''
}
},
data() {
const id = new Date().getTime()
return {
ref: 'border-box-11',
backgroundColor: 'transparent',
mergedColor: ['#8aaafb', '#1f33a2'],
filterId: `border-box-11-filterId-${id}`
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-11 {
position: relative;
width: 100%;
height: 100%;
.dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
& > polyline {
fill: none;
stroke-width: 1;
}
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox12.vue 0 → 100644
<template>
<div class="dv-border-box-12" :ref="ref">
<svg class="dv-border-svg-container" :width="width" :height="height">
<defs>
<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
<feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken" />
<feGaussianBlur in="thicken" stdDeviation="2" result="blurred" />
<feFlood flood-color="rgba(124, 231, 253, 0.7)" result="glowColor">
<animate
attributeName="flood-color"
values="
rgba(124,231,253,0.7);
rgba(124,231,253,0.3);
rgba(124,231,253,0.7);
"
dur="3s"
begin="0s"
repeatCount="indefinite"
/>
</feFlood>
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
<feMerge>
<feMergeNode in="softGlowColored"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path
v-if="width && height"
:fill="backgroundColor"
stroke-width="2"
:stroke="mergedColor[0]"
:d="`
M15 5 L ${width - 15} 5 Q ${width - 5} 5, ${width - 5} 15
L ${width - 5} ${height - 15} Q ${width - 5} ${height - 5}, ${width - 15} ${height - 5}
L 15, ${height - 5} Q 5 ${height - 5} 5 ${height - 15} L 5 15
Q 5 5 15 5
`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="mergedColor[1]"
:d="`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="mergedColor[1]"
:d="`M ${width - 20} 5 L ${width - 15} 5 Q ${width - 5} 5 ${width - 5} 15 L ${width - 5} 20`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="mergedColor[1]"
:d="`
M ${width - 20} ${height - 5} L ${width - 15} ${height - 5}
Q ${width - 5} ${height - 5} ${width - 5} ${height - 15}
L ${width - 5} ${height - 20}
`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="mergedColor[1]"
:d="`
M 20 ${height - 5} L 15 ${height - 5}
Q 5 ${height - 5} 5 ${height - 15}
L 5 ${height - 20}
`"
/>
</svg>
<div class="border-box-content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox12',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data() {
const id = new Date().getTime()
return {
ref: 'border-box-12',
backgroundColor: 'transparent',
mergedColor: ['#2e6099', '#7ce7fd'],
filterId: `borderr-box-12-filterId-${id}`
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-12 {
position: relative;
width: 100%;
height: 100%;
.dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox13.vue 0 → 100644
<template>
<div class="dv-border-box-13" :ref="ref">
<svg class="dv-border-svg-container" :width="width" :height="height">
<path
:fill="backgroundColor"
:stroke="mergedColor[0]"
:d="`
M 5 20 L 5 10 L 12 3 L 60 3 L 68 10
L ${width - 20} 10 L ${width - 5} 25
L ${width - 5} ${height - 5} L 20 ${height - 5}
L 5 ${height - 20} L 5 20
`"
/>
<path
fill="transparent"
stroke-width="3"
stroke-linecap="round"
stroke-dasharray="10, 5"
:stroke="mergedColor[0]"
:d="`M 16 9 L 61 9`"
/>
<path
fill="transparent"
:stroke="mergedColor[1]"
:d="`M 5 20 L 5 10 L 12 3 L 60 3 L 68 10`"
/>
<path
fill="transparent"
:stroke="mergedColor[1]"
:d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${width - 30} ${height - 5}`"
/>
</svg>
<div class="border-box-content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox13',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data() {
return {
ref: 'border-box-13',
backgroundColor: 'transparent',
mergedColor: ['#6586ec', '#2cf7fe']
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-13 {
position: relative;
width: 100%;
height: 100%;
.dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox2.vue 0 → 100644
<template>
<div :ref="ref" class="dv-border-box-2">
<svg class="dv-border-svg-container" :width="width" :height="height">
<polygon
:fill="backgroundColor"
:points="`
7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
`"
/>
<polyline
:stroke="mergedColor[0]"
:points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
/>
<polyline
:stroke="mergedColor[1]"
:points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`"
/>
<circle :fill="mergedColor[0]" cx="11" cy="11" r="1" />
<circle :fill="mergedColor[0]" :cx="width - 11" cy="11" r="1" />
<circle :fill="mergedColor[0]" :cx="width - 11" :cy="height - 11" r="1" />
<circle :fill="mergedColor[0]" cx="11" :cy="height - 11" r="1" />
</svg>
<div class="border-box-content">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox2',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data() {
return {
ref: 'border-box-2',
backgroundColor: 'transparent',
mergedColor: ['#fff', 'rgba(255, 255, 255, 0.6)']
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-2 {
position: relative;
width: 100%;
height: 100%;
.dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
& > polyline {
fill: none;
stroke-width: 1;
}
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox3.vue 0 → 100644
<template>
<div :ref="ref" class="dv-border-box-3">
<svg class="dv-border-svg-container" :width="width" :height="height">
<polygon
:fill="backgroundColor"
:points="`
23, 23 ${width - 24}, 23 ${width - 24}, ${height - 24} 23, ${height - 24}
`"
/>
<polyline
class="dv-bb3-line1"
:stroke="mergedColor[0]"
:points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
/>
<polyline
class="dv-bb3-line2"
:stroke="mergedColor[1]"
:points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`"
/>
<polyline
class="dv-bb3-line2"
:stroke="mergedColor[1]"
:points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`"
/>
<polyline
class="dv-bb3-line2"
:stroke="mergedColor[1]"
:points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`"
/>
</svg>
<div class="border-box-content">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox3',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data() {
return {
ref: 'border-box-3',
backgroundColor: 'transparent',
mergedColor: ['#2862b7', '#2862b7']
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-3 {
position: relative;
width: 100%;
height: 100%;
.dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
& > polyline {
fill: none;
}
}
.dv-bb3-line1 {
stroke-width: 3;
}
.dv-bb3-line2 {
stroke-width: 1;
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox4.vue 0 → 100644
<template>
<div :ref="ref" class="dv-border-box-4">
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
<polygon
:fill="backgroundColor"
:points="`
${width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
16, 42 16, ${height - 32} 41, ${height - 7} ${width - 15}, ${height - 7}
`"
/>
<polyline
class="dv-bb4-line-1"
:stroke="mergedColor[0]"
:points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"
/>
<polyline
:stroke="mergedColor[1]"
class="dv-bb4-line-2"
:points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
14, ${height - 100}`"
/>
<polyline class="dv-bb4-line-3" :stroke="mergedColor[0]" :points="`7, ${height - 40} 7, ${height - 75}`" />
<polyline class="dv-bb4-line-4" :stroke="mergedColor[0]" :points="`28, 24 13, 41 13, 64`" />
<polyline class="dv-bb4-line-5" :stroke="mergedColor[0]" :points="`5, 45 5, 140`" />
<polyline class="dv-bb4-line-6" :stroke="mergedColor[1]" :points="`14, 75 14, 180`" />
<polyline class="dv-bb4-line-7" :stroke="mergedColor[1]" :points="`55, 11 147, 11 167, 26 250, 26`" />
<polyline class="dv-bb4-line-8" :stroke="mergedColor[1]" :points="`158, 5 173, 16`" />
<polyline class="dv-bb4-line-9" :stroke="mergedColor[0]" :points="`200, 17 ${width - 10}, 17`" />
<polyline class="dv-bb4-line-10" :stroke="mergedColor[1]" :points="`385, 17 ${width - 10}, 17`" />
</svg>
<div class="border-box-content">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox4',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data() {
return {
ref: 'border-box-4',
reverse: false,
backgroundColor: 'transparent',
mergedColor: ['red', 'rgba(0,0,255,0.8)']
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-4 {
position: relative;
width: 100%;
height: 100%;
.dv-reverse {
transform: rotate(180deg);
}
.dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
& > polyline {
fill: none;
}
}
.sw1 {
stroke-width: 1;
}
.sw3 {
stroke-width: 3px;
stroke-linecap: round;
}
.dv-bb4-line-1 {
stroke-width: 1;
}
.dv-bb4-line-2 {
stroke-width: 1;
}
.dv-bb4-line-3 {
stroke-width: 3px;
stroke-linecap: round;
}
.dv-bb4-line-4 {
stroke-width: 3px;
stroke-linecap: round;
}
.dv-bb4-line-5 {
stroke-width: 1;
}
.dv-bb4-line-6 {
stroke-width: 1;
}
.dv-bb4-line-7 {
stroke-width: 1;
}
.dv-bb4-line-8 {
stroke-width: 3px;
stroke-linecap: round;
}
.dv-bb4-line-9 {
stroke-width: 3px;
stroke-linecap: round;
stroke-dasharray: 100, 250;
}
.dv-bb4-line-10 {
stroke-width: 1;
stroke-dasharray: 80, 270;
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox4Reverse.vue 0 → 100644
<template>
<div :ref="ref" class="dv-border-box-4-reverse">
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
<polygon
:fill="backgroundColor"
:points="`
${width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
16, 42 16, ${height - 32} 41, ${height - 7} ${width - 15}, ${height - 7}
`"
/>
<polyline
class="dv-bb4-line-1"
:stroke="mergedColor[0]"
:points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"
/>
<polyline
:stroke="mergedColor[1]"
class="dv-bb4-line-2"
:points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
14, ${height - 100}`"
/>
<polyline class="dv-bb4-line-3" :stroke="mergedColor[0]" :points="`7, ${height - 40} 7, ${height - 75}`" />
<polyline class="dv-bb4-line-4" :stroke="mergedColor[0]" :points="`28, 24 13, 41 13, 64`" />
<polyline class="dv-bb4-line-5" :stroke="mergedColor[0]" :points="`5, 45 5, 140`" />
<polyline class="dv-bb4-line-6" :stroke="mergedColor[1]" :points="`14, 75 14, 180`" />
<polyline class="dv-bb4-line-7" :stroke="mergedColor[1]" :points="`55, 11 147, 11 167, 26 250, 26`" />
<polyline class="dv-bb4-line-8" :stroke="mergedColor[1]" :points="`158, 5 173, 16`" />
<polyline class="dv-bb4-line-9" :stroke="mergedColor[0]" :points="`200, 17 ${width - 10}, 17`" />
<polyline class="dv-bb4-line-10" :stroke="mergedColor[1]" :points="`385, 17 ${width - 10}, 17`" />
</svg>
<div class="border-box-content">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox4Reverse',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data() {
return {
ref: 'border-box-4-reverse',
reverse: true,
backgroundColor: 'transparent',
mergedColor: ['red', 'rgba(0,0,255,0.8)']
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-4-reverse {
position: relative;
width: 100%;
height: 100%;
.dv-reverse {
transform: rotate(180deg);
}
.dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
& > polyline {
fill: none;
}
}
.sw1 {
stroke-width: 1;
}
.sw3 {
stroke-width: 3px;
stroke-linecap: round;
}
.dv-bb4-line-1 {
stroke-width: 1;
}
.dv-bb4-line-2 {
stroke-width: 1;
}
.dv-bb4-line-3 {
stroke-width: 3px;
stroke-linecap: round;
}
.dv-bb4-line-4 {
stroke-width: 3px;
stroke-linecap: round;
}
.dv-bb4-line-5 {
stroke-width: 1;
}
.dv-bb4-line-6 {
stroke-width: 1;
}
.dv-bb4-line-7 {
stroke-width: 1;
}
.dv-bb4-line-8 {
stroke-width: 3px;
stroke-linecap: round;
}
.dv-bb4-line-9 {
stroke-width: 3px;
stroke-linecap: round;
stroke-dasharray: 100, 250;
}
.dv-bb4-line-10 {
stroke-width: 1;
stroke-dasharray: 80, 270;
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox5.vue 0 → 100644
<template>
<div :ref="ref" class="dv-border-box-5">
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
<polygon
:fill="backgroundColor"
:points="`
10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
`"
/>
<polyline
class="dv-bb5-line-1"
:stroke="mergedColor[0]"
:points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`"
/>
<polyline
class="dv-bb5-line-2"
:stroke="mergedColor[1]"
:points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`"
/>
<polyline class="dv-bb5-line-3" :stroke="mergedColor[1]" :points="`50, 13 ${width - 35}, 13`" />
<polyline class="dv-bb5-line-4" :stroke="mergedColor[1]" :points="`15, 20 ${width - 35}, 20`" />
<polyline class="dv-bb5-line-5" :stroke="mergedColor[1]" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
<polyline class="dv-bb5-line-6" :stroke="mergedColor[1]" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
</svg>
<div class="border-box-content">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox5',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data() {
return {
ref: 'border-box-5',
reverse: false,
backgroundColor: 'transparent',
mergedColor: ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)']
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-5 {
position: relative;
width: 100%;
height: 100%;
.dv-reverse {
transform: rotate(180deg);
}
.dv-border-svg-container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
& > polyline {
fill: none;
}
}
.dv-bb5-line-1, .dv-bb5-line-2 {
stroke-width: 1;
}
.dv-bb5-line-3, .dv-bb5-line-6 {
stroke-width: 5;
}
.dv-bb5-line-4, .dv-bb5-line-5 {
stroke-width: 2;
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox5Reverse.vue 0 → 100644
<template>
<div :ref="ref" class="dv-border-box-5-reverse">
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
<polygon
:fill="backgroundColor"
:points="`
10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
`"
/>
<polyline
class="dv-bb5-line-1"
:stroke="mergedColor[0]"
:points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`"
/>
<polyline
class="dv-bb5-line-2"
:stroke="mergedColor[1]"
:points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`"
/>
<polyline class="dv-bb5-line-3" :stroke="mergedColor[1]" :points="`50, 13 ${width - 35}, 13`" />
<polyline class="dv-bb5-line-4" :stroke="mergedColor[1]" :points="`15, 20 ${width - 35}, 20`" />
<polyline class="dv-bb5-line-5" :stroke="mergedColor[1]" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
<polyline class="dv-bb5-line-6" :stroke="mergedColor[1]" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
</svg>
<div class="border-box-content">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox5Reverse',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data() {
return {
ref: 'border-box-5-reverse',
reverse: true,
backgroundColor: 'transparent',
mergedColor: ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)']
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-5-reverse {
position: relative;
width: 100%;
height: 100%;
.dv-reverse {
transform: rotate(180deg);
}
.dv-border-svg-container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
& > polyline {
fill: none;
}
}
.dv-bb5-line-1, .dv-bb5-line-2 {
stroke-width: 1;
}
.dv-bb5-line-3, .dv-bb5-line-6 {
stroke-width: 5;
}
.dv-bb5-line-4, .dv-bb5-line-5 {
stroke-width: 2;
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox6.vue 0 → 100644
<template>
<div :ref="ref" class="dv-border-box-6">
<svg class="dv-border-svg-container" :width="width" :height="height">
<polygon
:fill="backgroundColor"
:points="`
9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
`"
/>
<circle :fill="mergedColor[1]" cx="5" cy="5" r="2" />
<circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
<circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
<circle :fill="mergedColor[1]" cx="5" :cy="height - 5" r="2" />
<polyline :stroke="mergedColor[0]" :points="`10, 4 ${width - 10}, 4`" />
<polyline :stroke="mergedColor[0]" :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
<polyline :stroke="mergedColor[0]" :points="`5, 70 5, ${height - 70}`" />
<polyline :stroke="mergedColor[0]" :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
<polyline :stroke="mergedColor[0]" :points="`3, 10, 3, 50`" />
<polyline :stroke="mergedColor[0]" :points="`7, 30 7, 80`" />
<polyline :stroke="mergedColor[0]" :points="`${width - 3}, 10 ${width - 3}, 50`" />
<polyline :stroke="mergedColor[0]" :points="`${width - 7}, 30 ${width - 7}, 80`" />
<polyline :stroke="mergedColor[0]" :points="`3, ${height - 10} 3, ${height - 50}`" />
<polyline :stroke="mergedColor[0]" :points="`7, ${height - 30} 7, ${height - 80}`" />
<polyline :stroke="mergedColor[0]" :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
<polyline :stroke="mergedColor[0]" :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
</svg>
<div class="border-box-content">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox6',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data() {
return {
ref: 'border-box-6',
backgroundColor: 'transparent',
mergedColor: ['rgba(255, 255, 255, 0.35)', 'gray']
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-6 {
position: relative;
width: 100%;
height: 100%;
.dv-border-svg-container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
& > polyline {
fill: none;
stroke-width: 1;
}
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox7.vue 0 → 100644
<template>
<div
class="dv-border-box-7"
:style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
:ref="ref"
>
<svg class="dv-border-svg-container" :width="width" :height="height">
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, 10 0, 0 10, 0`" />
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
</svg>
<div class="border-box-content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox7',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data() {
return {
ref: 'border-box-7',
backgroundColor: 'transparent',
mergedColor: ['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)']
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-7 {
position: relative;
width: 100%;
height: 100%;
.dv-border-svg-container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
& > polyline {
fill: none;
stroke-linecap: round;
}
}
.dv-bb7-line-width-2 {
stroke-width: 2;
}
.dv-bb7-line-width-5 {
stroke-width: 5;
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox8.vue 0 → 100644
<template>
<div :ref="ref" class="dv-border-box-8">
<svg class="dv-border-svg-container" :width="width" :height="height">
<defs>
<path
:id="path"
:d="pathD"
fill="transparent"
/>
<radialGradient
:id="gradient"
cx="50%"
cy="50%"
r="50%"
>
<stop
offset="0%"
stop-color="#fff"
stop-opacity="1"
/>
<stop
offset="100%"
stop-color="#fff"
stop-opacity="0"
/>
</radialGradient>
<mask :id="mask">
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
<animateMotion
:dur="`${dur}s`"
:path="pathD"
rotate="auto"
repeatCount="indefinite"
/>
</circle>
</mask>
</defs>
<polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
<use
:stroke="mergedColor[0]"
stroke-width="1"
:xlink:href="`#${path}`"
/>
<use
:stroke="mergedColor[1]"
stroke-width="3"
:xlink:href="`#${path}`"
:mask="`url(#${mask})`"
>
<animate
attributeName="stroke-dasharray"
:from="`0, ${length}`"
:to="`${length}, 0`"
:dur="`${dur}s`"
repeatCount="indefinite"
/>
</use>
</svg>
<div class="border-box-content">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox8',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data() {
const id = new Date().getTime()
return {
ref: 'border-box-8',
dur: 3,
reverse: false,
backgroundColor: 'transparent',
mergedColor: ['#235fa7', '#4fd2dd'],
path: `border-box-8-path-${id}`,
gradient: `border-box-8-gradient-${id}`,
mask: `border-box-8-mask-${id}`
}
},
computed: {
length() {
const { width, height } = this
return (width + height - 5) * 2
},
pathD() {
const { reverse, width, height } = this
if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-8 {
position: relative;
width: 100%;
height: 100%;
.dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox8Reverse.vue 0 → 100644
<template>
<div :ref="ref" class="dv-border-box-8-reverse">
<svg class="dv-border-svg-container" :width="width" :height="height">
<defs>
<path
:id="path"
:d="pathD"
fill="transparent"
/>
<radialGradient
:id="gradient"
cx="50%"
cy="50%"
r="50%"
>
<stop
offset="0%"
stop-color="#fff"
stop-opacity="1"
/>
<stop
offset="100%"
stop-color="#fff"
stop-opacity="0"
/>
</radialGradient>
<mask :id="mask">
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
<animateMotion
:dur="`${dur}s`"
:path="pathD"
rotate="auto"
repeatCount="indefinite"
/>
</circle>
</mask>
</defs>
<polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
<use
:stroke="mergedColor[0]"
stroke-width="1"
:xlink:href="`#${path}`"
/>
<use
:stroke="mergedColor[1]"
stroke-width="3"
:xlink:href="`#${path}`"
:mask="`url(#${mask})`"
>
<animate
attributeName="stroke-dasharray"
:from="`0, ${length}`"
:to="`${length}, 0`"
:dur="`${dur}s`"
repeatCount="indefinite"
/>
</use>
</svg>
<div class="border-box-content">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox8Reverse',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data() {
const id = new Date().getTime()
return {
ref: 'border-box-8-reverse',
dur: 3,
reverse: true,
backgroundColor: 'transparent',
mergedColor: ['#235fa7', '#4fd2dd'],
path: `border-box-8-reverse-path-${id}`,
gradient: `border-box-8-reverse-gradient-${id}`,
mask: `border-box-8-reverse-mask-${id}`
}
},
computed: {
length() {
const { width, height } = this
return (width + height - 5) * 2
},
pathD() {
const { reverse, width, height } = this
if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-8-reverse {
position: relative;
width: 100%;
height: 100%;
.dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
datax-ui/src/views/visual/datascreen/components/borders/BorderBox9.vue 0 → 100644
<template>
<div :ref="ref" class="dv-border-box-9">
<svg class="dv-border-svg-container" :width="width" :height="height">
<defs>
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
<animate
attributeName="x1"
values="0%;100%;0%"
dur="10s"
begin="0s"
repeatCount="indefinite"
/>
<animate
attributeName="x2"
values="100%;0%;100%"
dur="10s"
begin="0s"
repeatCount="indefinite"
/>
<stop offset="0%" :stop-color="mergedColor[0]">
<animate
attributeName="stop-color"
:values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
dur="10s"
begin="0s"
repeatCount="indefinite"
/>
</stop>
<stop offset="100%" :stop-color="mergedColor[1]">
<animate
attributeName="stop-color"
:values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
dur="10s"
begin="0s"
repeatCount="indefinite"
/>
</stop>
</linearGradient>
<mask :id="maskId">
<polyline
stroke="#fff"
stroke-width="3"
fill="transparent"
:points="`8, ${height * 0.4} 8, 3, ${width * 0.4 + 7}, 3`"
/>
<polyline
fill="#fff"
:points="
`8, ${height * 0.15} 8, 3, ${width * 0.1 + 7}, 3
${width * 0.1}, 8 14, 8 14, ${height * 0.15 - 7}
`"
/>
<polyline
stroke="#fff"
stroke-width="3"
fill="transparent"
:points="`${width * 0.5}, 3 ${width - 3}, 3, ${width - 3}, ${height * 0.25}`"
/>
<polyline
fill="#fff"
:points="`
${width * 0.52}, 3 ${width * 0.58}, 3
${width * 0.58 - 7}, 9 ${width * 0.52 + 7}, 9
`"
/>
<polyline
fill="#fff"
:points="`
${width * 0.9}, 3 ${width - 3}, 3 ${width - 3}, ${height * 0.1}
${width - 9}, ${height * 0.1 - 7} ${width - 9}, 9 ${width * 0.9 + 7}, 9
`"
/>
<polyline
stroke="#fff"
stroke-width="3"
fill="transparent"
:points="`8, ${height * 0.5} 8, ${height - 3} ${width * 0.3 + 7}, ${height - 3}`"
/>
<polyline
fill="#fff"
:points="`
8, ${height * 0.55} 8, ${height * 0.7}
2, ${height * 0.7 - 7} 2, ${height * 0.55 + 7}
`"
/>
<polyline
stroke="#fff"
stroke-width="3"
fill="transparent"
:points="`${width * 0.35}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.35}`"
/>
<polyline
fill="#fff"
:points="`
${width * 0.92}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.8}
${width - 9}, ${height * 0.8 + 7} ${width - 9}, ${height - 9} ${width * 0.92 + 7}, ${height - 9}
`"
/>
</mask>
</defs>
<polygon
:fill="backgroundColor"
:points="`
15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10} ${width * 0.92 + 2}, ${height - 6}
11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
`"
/>
<rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
</svg>
<div class="border-box-content">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'BorderBox9',
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data() {
const id = new Date().getTime()
return {
ref: 'border-box-9',
backgroundColor: 'transparent',
mergedColor: ['#11eefd', '#0078d2'],
gradientId: `border-box-9-gradient-${id}`,
maskId: `border-box-9-mask-${id}`
}
}
}
</script>
<style lang="scss" scoped>
.dv-border-box-9 {
position: relative;
width: 100%;
height: 100%;
.dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment