forked from github/dataease
Merge branch 'dev-v2' into pr@dev-v2@perf_iframe_embedded
This commit is contained in:
fit2cloud-chenyw
GitHub
commit
553833fab3
@ -0,0 +1,35 @@
|
||||
package io.dataease.commons.utils;
|
||||
|
||||
import io.dataease.constant.SortConstants;
|
||||
import io.dataease.visualization.dto.VisualizationNodeBO;
|
||||
import org.apache.commons.lang3.StringUtils;
|
||||
|
||||
import java.text.Collator;
|
||||
import java.util.*;
|
||||
import java.util.stream.Collectors;
|
||||
|
||||
/**
|
||||
* @author : WangJiaHao
|
||||
* @date : 2024/3/18 10:53
|
||||
*/
|
||||
public class CoreTreeUtils {
|
||||
|
||||
public static List<VisualizationNodeBO> customSortBO(List<VisualizationNodeBO> list, String sortType) {
|
||||
Collator collator = Collator.getInstance(Locale.CHINA);
|
||||
if (StringUtils.equalsIgnoreCase(SortConstants.NAME_DESC, sortType)) {
|
||||
Set<VisualizationNodeBO> poSet = new TreeSet<>(Comparator.comparing(VisualizationNodeBO::getName, collator));
|
||||
poSet.addAll(list);
|
||||
return poSet.stream().collect(Collectors.toList());
|
||||
} else if (StringUtils.equalsIgnoreCase(SortConstants.NAME_ASC, sortType)) {
|
||||
Set<VisualizationNodeBO> poSet = new TreeSet<>(Comparator.comparing(VisualizationNodeBO::getName, collator).reversed());
|
||||
poSet.addAll(list);
|
||||
return poSet.stream().collect(Collectors.toList());
|
||||
} else if (StringUtils.equalsIgnoreCase(SortConstants.TIME_ASC, sortType)) {
|
||||
Collections.reverse(list);
|
||||
return list;
|
||||
} else {
|
||||
// 默认时间倒序
|
||||
return list;
|
||||
}
|
||||
}
|
||||
}
|
||||
1
core/core-frontend/src/assets/svg/dv-more-com.svg
Normal file
1
core/core-frontend/src/assets/svg/dv-more-com.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710744481632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5131" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M928 960H576c-17.67 0-32-14.33-32-32V576c0-17.67 14.33-32 32-32h352c17.67 0 32 14.33 32 32v352c0 17.67-14.33 32-32 32z m-320-64h288V608H608v288zM448 960H96c-17.67 0-32-14.33-32-32V576c0-17.67 14.33-32 32-32h352c17.67 0 32 14.33 32 32v352c0 17.67-14.33 32-32 32z m-320-64h288V608H128v288zM448 480H96c-17.67 0-32-14.33-32-32V96c0-17.67 14.33-32 32-32h352c17.67 0 32 14.33 32 32v352c0 17.67-14.33 32-32 32z m-320-64h288V128H128v288zM752 480c-8.19 0-16.38-3.12-22.63-9.37l-176-176c-12.5-12.5-12.5-32.76 0-45.25l176-176c12.5-12.5 32.76-12.5 45.25 0l176 176c12.5 12.5 12.5 32.76 0 45.25l-176 176c-6.24 6.25-14.43 9.37-22.62 9.37zM621.25 272L752 402.75 882.75 272 752 141.25 621.25 272z" p-id="5132"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
1
core/core-frontend/src/assets/svg/dv-more-time-clock.svg
Normal file
1
core/core-frontend/src/assets/svg/dv-more-time-clock.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710745564820" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4252" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 924c-55.6 0-109.6-10.9-160.4-32.4-49.1-20.8-93.1-50.5-131-88.3-37.8-37.8-67.5-81.9-88.3-131C110.9 621.6 100 567.6 100 512s10.9-109.6 32.4-160.4c20.8-49.1 50.5-93.1 88.3-131 37.8-37.8 81.9-67.5 131-88.3C402.4 110.9 456.4 100 512 100c75.8 0 150 20.8 214.4 60.1 11.8 7.2 15.5 22.6 8.3 34.4-7.2 11.8-22.6 15.5-34.4 8.3C643.8 168.2 578.6 150 512 150c-199.6 0-362 162.4-362 362s162.4 362 362 362 362-162.4 362-362c0-11.6-0.6-23.3-1.7-34.8-1.3-13.7 8.8-26 22.5-27.3 13.7-1.3 26 8.8 27.3 22.5 1.2 13.1 1.9 26.4 1.9 39.6 0 55.6-10.9 109.6-32.4 160.4-20.8 49.1-50.5 93.1-88.3 131-37.8 37.8-81.9 67.5-131 88.3C621.6 913.1 567.6 924 512 924z" p-id="4253"></path><path d="M696.4 512.5H508.3c-13.8 0-25 11.3-25 25s11.2 25 25 25h188.1c13.8 0 25-11.3 25-25s-11.2-25-25-25z" p-id="4254"></path><path d="M508.3 313c-13.8 0-25 11.3-25 25v199.5c0 13.8 11.3 25 25 25s25-11.3 25-25V338c0-13.7-11.2-25-25-25z m357.4-54.1l-42.4-137.7c-7.2-23.4-37.9-28.8-52.6-9.3L669 246.4c-14.8 19.5-1.2 47.5 23.3 48.1l144.1 3.2c20.4 0.5 35.3-19.2 29.3-38.8zM510 798.3c-13.8 0-25 11.3-25 25v11.5c0 13.8 11.3 25 25 25s25-11.3 25-25v-11.5c0-13.8-11.2-25-25-25z m-1-631c-13.8 0-25 11.3-25 25v11.5c0 13.8 11.3 25 25 25s25-11.3 25-25v-11.5c0-13.8-11.2-25-25-25zM205.3 515.5h-11.5c-13.8 0-25 11.3-25 25s11.3 25 25 25h11.5c13.8 0 25-11.3 25-25s-11.3-25-25-25z m623 0h-12.5c-13.8 0-25 11.3-25 25s11.3 25 25 25h12.5c13.8 0 25-11.3 25-25s-11.3-25-25-25z" p-id="4255"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -15,6 +15,7 @@ import CommonGroup from '@/custom-component/component-group/CommonGroup.vue'
|
||||
import DeResourceGroupOpt from '@/views/common/DeResourceGroupOpt.vue'
|
||||
import { canvasSave } from '@/utils/canvasUtils'
|
||||
import { changeSizeWithScale } from '@/utils/changeComponentsSizeWithScale'
|
||||
import MoreComGroup from '@/custom-component/component-group/MoreComGroup.vue'
|
||||
let nameEdit = ref(false)
|
||||
let inputName = ref('')
|
||||
let nameInput = ref(null)
|
||||
@ -201,6 +202,9 @@ eventBus.on('clearCanvas', clearCanvas)
|
||||
<component-group is-label :base-width="115" icon-name="dv-media" title="媒体">
|
||||
<media-group></media-group>
|
||||
</component-group>
|
||||
<component-group is-label :base-width="115" icon-name="dv-more-com" title="更多">
|
||||
<more-com-group></more-com-group>
|
||||
</component-group>
|
||||
<component-group is-label :base-width="410" icon-name="dv-material" title="素材">
|
||||
<common-group></common-group>
|
||||
</component-group>
|
||||
|
||||
@ -134,7 +134,7 @@ const stopEvent = e => {
|
||||
:background-border-select-width="backgroundBorderSelectWidth"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
|
||||
<slot></slot>
|
||||
<el-collapse-item
|
||||
v-if="showStyle"
|
||||
:effect="themes"
|
||||
@ -257,7 +257,6 @@ const stopEvent = e => {
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
<slot></slot>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -0,0 +1,64 @@
|
||||
<script setup lang="ts">
|
||||
import { toRefs } from 'vue'
|
||||
import eventBus from '@/utils/eventBus'
|
||||
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
|
||||
import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
|
||||
|
||||
const props = defineProps({
|
||||
propValue: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
dvModel: {
|
||||
type: String,
|
||||
default: 'dv'
|
||||
},
|
||||
element: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
propValue: null
|
||||
}
|
||||
}
|
||||
},
|
||||
themes: {
|
||||
type: String,
|
||||
default: 'dark'
|
||||
}
|
||||
})
|
||||
|
||||
const { dvModel } = toRefs(props)
|
||||
const newComponent = () => {
|
||||
eventBus.emit('handleNew', { componentName: 'DeTimeClock', innerType: 'DeTimeClock' })
|
||||
}
|
||||
|
||||
const handleDragStart = e => {
|
||||
commonHandleDragStart(e, dvModel.value)
|
||||
}
|
||||
|
||||
const handleDragEnd = e => {
|
||||
commonHandleDragEnd(e, dvModel.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="group"
|
||||
@dragstart="handleDragStart"
|
||||
@dragend="handleDragEnd"
|
||||
v-on:click="newComponent"
|
||||
>
|
||||
<drag-component
|
||||
:themes="themes"
|
||||
name="YYYY-MM-DD 08:00:00"
|
||||
label="日期时间"
|
||||
drag-info="DeTimeClock&DeTimeClock"
|
||||
></drag-component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.group {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
</style>
|
||||
@ -119,6 +119,36 @@ const list = [
|
||||
},
|
||||
matrixStyle: {}
|
||||
},
|
||||
{
|
||||
component: 'DeTimeClock',
|
||||
name: '时间组件',
|
||||
label: '时间组件',
|
||||
icon: 'dv-more-time-clock',
|
||||
innerType: 'DeTimeClock',
|
||||
editing: false,
|
||||
canvasActive: false,
|
||||
x: 1,
|
||||
y: 1,
|
||||
sizeX: 18,
|
||||
sizeY: 6,
|
||||
propValue: {},
|
||||
style: {
|
||||
width: 300,
|
||||
height: 100,
|
||||
fontSize: 22,
|
||||
fontWeight: 400,
|
||||
textAlign: 'center',
|
||||
color: '#000000'
|
||||
},
|
||||
formatInfo: {
|
||||
openMode: '0',
|
||||
showWeek: false,
|
||||
showDate: true,
|
||||
dateFormat: 'yyyy-MM-dd',
|
||||
timeFormat: 'hh:mm:ss'
|
||||
},
|
||||
matrixStyle: {}
|
||||
},
|
||||
{
|
||||
component: 'Picture',
|
||||
name: '图片',
|
||||
|
||||
@ -1,257 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<canvas :id="'complex_canvas' + element.id" width="500" height="500" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toRefs } from 'vue/dist/vue'
|
||||
import { getCurrentInstance, onMounted, reactive } from 'vue'
|
||||
|
||||
let milliseconds = 0
|
||||
let minutes = 0
|
||||
let hour = 0
|
||||
let date = ''
|
||||
|
||||
const props = defineProps({
|
||||
element: {
|
||||
type: Object
|
||||
}
|
||||
})
|
||||
const { element } = toRefs(props)
|
||||
|
||||
const state = reactive({
|
||||
time: '',
|
||||
date: '',
|
||||
week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
ctxBack: null,
|
||||
numBack: null,
|
||||
timer: null
|
||||
})
|
||||
|
||||
const currentTime = () => {
|
||||
state.timer = setInterval(pageInit, 500)
|
||||
}
|
||||
const initCtx = () => {
|
||||
state.ctx = state.canvas.getContext('2d')
|
||||
state.ctx.strokeStyle = '#7FFFD4'
|
||||
state.ctx.lineWidth = 3
|
||||
state.ctx.shadowBlur = 5
|
||||
state.ctx.shadowColor = '#7FFFD4'
|
||||
}
|
||||
const initCtxBack = () => {
|
||||
state.ctxBack = state.canvas.getContext('2d')
|
||||
state.ctxBack.lineWidth = 1
|
||||
state.ctxBack.shadowBlur = 0
|
||||
state.ctxBack.shadowColor = '#F0F8FF'
|
||||
}
|
||||
const initNumBack = () => {
|
||||
state.numBack = state.canvas.getContext('2d')
|
||||
}
|
||||
const pageInit = () => {
|
||||
showTime()
|
||||
showBack()
|
||||
drawSecPin()
|
||||
drawMinPin()
|
||||
drawHouPin()
|
||||
setPoint()
|
||||
setNum()
|
||||
},
|
||||
setNum = () => {
|
||||
state.numBack.save()
|
||||
state.numBack.translate(250, 250)
|
||||
state.numBack.beginPath()
|
||||
state.numBack.fillStyle = '#7FFFD4'
|
||||
state.numBack.font = '30px Helvetica'
|
||||
for (let i = 0; i < 60; i++) {
|
||||
if (i % 5 === 0) {
|
||||
state.numBack.lineWidth = 5
|
||||
let xPoint = Math.sin((i * 6 * 2 * Math.PI) / 360) * 195
|
||||
let yPoint = -Math.cos((i * 6 * 2 * Math.PI) / 360) * 195
|
||||
state.numBack.fillText(
|
||||
i === 0 ? 12 : i / 5,
|
||||
i === 0 ? -15 : xPoint - 10,
|
||||
i === 0 ? -185 : i <= 30 ? yPoint + 5 : yPoint + 10
|
||||
)
|
||||
}
|
||||
}
|
||||
state.numBack.stroke()
|
||||
state.numBack.closePath()
|
||||
state.numBack.restore()
|
||||
}
|
||||
|
||||
const drawSecPin = () => {
|
||||
state.ctxBack.save()
|
||||
state.ctxBack.translate(250, 250)
|
||||
state.ctxBack.rotate((milliseconds / 60) * 2 * Math.PI)
|
||||
state.ctxBack.beginPath()
|
||||
state.ctxBack.strokeStyle = '#AFEEEE'
|
||||
state.ctxBack.lineWidth = 1
|
||||
state.ctxBack.lineJoin = 'bevel'
|
||||
state.ctxBack.miterLimit = 10
|
||||
state.ctxBack.moveTo(0, 30)
|
||||
state.ctxBack.lineTo(3, -175)
|
||||
state.ctxBack.lineTo(13, -165)
|
||||
state.ctxBack.lineTo(0, -210)
|
||||
state.ctxBack.lineTo(-13, -165)
|
||||
state.ctxBack.lineTo(-3, -175)
|
||||
state.ctxBack.lineTo(0, 30)
|
||||
state.ctxBack.stroke()
|
||||
state.ctxBack.closePath()
|
||||
state.ctxBack.restore()
|
||||
}
|
||||
|
||||
const drawMinPin = () => {
|
||||
state.ctxBack.save()
|
||||
state.ctxBack.translate(250, 250)
|
||||
state.ctxBack.rotate((minutes * 6 * Math.PI) / 180)
|
||||
state.ctxBack.beginPath()
|
||||
state.ctxBack.strokeStyle = '#20B2AA'
|
||||
state.ctxBack.lineWidth = 1
|
||||
state.ctxBack.lineJoin = 'bevel'
|
||||
state.ctxBack.miterLimit = 10
|
||||
state.ctxBack.moveTo(0, 20)
|
||||
state.ctxBack.lineTo(3, -145)
|
||||
state.ctxBack.lineTo(10, -135)
|
||||
state.ctxBack.lineTo(0, -180)
|
||||
state.ctxBack.lineTo(-10, -135)
|
||||
state.ctxBack.lineTo(-3, -145)
|
||||
state.ctxBack.lineTo(0, 20)
|
||||
state.ctxBack.stroke()
|
||||
state.ctxBack.closePath()
|
||||
state.ctxBack.restore()
|
||||
}
|
||||
|
||||
const drawHouPin = () => {
|
||||
state.ctxBack.save()
|
||||
state.ctxBack.translate(250, 250)
|
||||
state.ctxBack.rotate((hour * 30 * Math.PI) / 180)
|
||||
state.ctxBack.beginPath()
|
||||
state.ctxBack.strokeStyle = '#87CEFA'
|
||||
state.ctxBack.lineWidth = 1
|
||||
state.ctxBack.lineJoin = 'bevel'
|
||||
state.ctxBack.miterLimit = 10
|
||||
state.ctxBack.moveTo(0, 20)
|
||||
state.ctxBack.lineTo(3, -110)
|
||||
state.ctxBack.lineTo(10, -100)
|
||||
state.ctxBack.lineTo(0, -150)
|
||||
state.ctxBack.lineTo(-10, -100)
|
||||
state.ctxBack.lineTo(-3, -110)
|
||||
state.ctxBack.lineTo(0, 20)
|
||||
state.ctxBack.stroke()
|
||||
state.ctxBack.closePath()
|
||||
state.ctxBack.restore()
|
||||
}
|
||||
|
||||
const setPoint = () => {
|
||||
state.ctxBack.beginPath()
|
||||
state.ctxBack.fillStyle = 'black'
|
||||
state.ctxBack.arc(250, 250, 3, 0, 2 * Math.PI)
|
||||
state.ctxBack.stroke()
|
||||
}
|
||||
|
||||
const showBack = () => {
|
||||
for (let i = 0; i < 60; i++) {
|
||||
state.ctxBack.save()
|
||||
state.ctxBack.translate(250, 250)
|
||||
state.ctxBack.rotate((i / 60) * 2 * Math.PI)
|
||||
state.ctxBack.beginPath()
|
||||
state.ctxBack.strokeStyle = '#7FFFD4'
|
||||
state.ctxBack.moveTo(0, -250)
|
||||
state.ctxBack.lineWidth = i % 5 === 0 ? 5 : 2
|
||||
state.ctxBack.lineTo(0, -230)
|
||||
state.ctxBack.stroke()
|
||||
state.ctxBack.closePath()
|
||||
state.ctxBack.restore()
|
||||
}
|
||||
state.ctxBack.beginPath()
|
||||
state.ctxBack.arc(250, 250, 230, 0, 2 * Math.PI)
|
||||
state.ctxBack.stroke()
|
||||
}
|
||||
|
||||
const degToRad = degree => {
|
||||
let result
|
||||
let factor = Math.PI / 180
|
||||
if (degree === 0) {
|
||||
result = 270 * factor
|
||||
} else {
|
||||
result = degree * factor
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
const showTime = () => {
|
||||
let now = new Date()
|
||||
let today = now.toLocaleDateString()
|
||||
let time = now.toLocaleTimeString()
|
||||
let day = now.getDay()
|
||||
let hrs = now.getHours()
|
||||
let min = now.getMinutes()
|
||||
let sec = now.getSeconds()
|
||||
let mil = now.getMilliseconds()
|
||||
let smoothsec = sec + mil / 1000
|
||||
let smoothmin = min + smoothsec / 60
|
||||
let hours = hrs + smoothmin / 60
|
||||
milliseconds = smoothsec
|
||||
minutes = smoothmin
|
||||
hour = hours
|
||||
switch (day) {
|
||||
case 1:
|
||||
date = '一'
|
||||
break
|
||||
case 2:
|
||||
date = '二'
|
||||
break
|
||||
case 3:
|
||||
date = '三'
|
||||
break
|
||||
case 4:
|
||||
date = '四'
|
||||
break
|
||||
case 5:
|
||||
date = '五'
|
||||
break
|
||||
case 6:
|
||||
date = '六'
|
||||
break
|
||||
case 0:
|
||||
date = '日'
|
||||
break
|
||||
}
|
||||
const gradient = state.ctx.createRadialGradient(250, 250, 5, 250, 250, 300)
|
||||
gradient.addColorStop(0, '#03303a')
|
||||
gradient.addColorStop(1, 'black')
|
||||
state.ctx.fillStyle = gradient
|
||||
state.ctx.fillRect(0, 0, 500, 500)
|
||||
state.ctx.beginPath()
|
||||
state.ctx.strokeStyle = '#87CEFA'
|
||||
state.ctx.arc(250, 250, 215, degToRad(0), degToRad(hours * 30 - 90))
|
||||
state.ctx.stroke()
|
||||
state.ctx.beginPath()
|
||||
state.ctx.strokeStyle = '#20B2AA'
|
||||
state.ctx.arc(250, 250, 220, degToRad(0), degToRad(smoothmin * 6 - 90))
|
||||
state.ctx.stroke()
|
||||
state.ctx.beginPath()
|
||||
state.ctx.strokeStyle = '#AFEEEE'
|
||||
state.ctx.arc(250, 250, 225, degToRad(0), degToRad(smoothsec * 6 - 90))
|
||||
state.ctx.stroke()
|
||||
state.ctx.font = '25px Helvetica Bold'
|
||||
state.ctx.fillStyle = '#7FFFD4'
|
||||
state.ctx.fillText(today + '/星期' + date, 150, 230)
|
||||
state.ctx.font = '23px Helvetica Bold'
|
||||
state.ctx.fillStyle = '#7FFFD4'
|
||||
state.ctx.fillText(time, 190, 280)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
state.canvas = document.getElementById('complex_canvas' + element.value.id)
|
||||
initCtx()
|
||||
initCtxBack()
|
||||
initNumBack()
|
||||
currentTime()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -10,6 +10,7 @@ import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
|
||||
import { imgUrlTrans } from '@/utils/imgUtils'
|
||||
import eventBus from '@/utils/eventBus'
|
||||
import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
|
||||
import TimeClockFormat from '@/custom-component/de-time-clock/TimeClockFormat.vue'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
@ -101,6 +102,17 @@ onBeforeUnmount(() => {
|
||||
:background-color-picker-width="197"
|
||||
:background-border-select-width="197"
|
||||
>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
title="日期格式"
|
||||
name="timeClockFormat"
|
||||
v-if="curComponent && curComponent.formatInfo"
|
||||
>
|
||||
<time-clock-format
|
||||
:format-info="curComponent.formatInfo"
|
||||
:themes="themes"
|
||||
></time-clock-format>
|
||||
</el-collapse-item>
|
||||
</CommonAttr>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,29 +1,12 @@
|
||||
<template>
|
||||
<div style="height: 100%">
|
||||
<time-default
|
||||
v-if="element?.formatInfo?.openMode === '0'"
|
||||
:ref="element.id"
|
||||
:element="element"
|
||||
/>
|
||||
|
||||
<time-elec v-if="element?.formatInfo?.openMode === '1'" :ref="element.id" :element="element" />
|
||||
|
||||
<time-simple
|
||||
v-if="element?.formatInfo?.openMode === '2'"
|
||||
:ref="element.id"
|
||||
:element="element"
|
||||
/>
|
||||
|
||||
<time-complex
|
||||
v-if="element?.formatInfo?.openMode === '3'"
|
||||
:ref="element.id"
|
||||
:element="element"
|
||||
/>
|
||||
<time-default :ref="element.id" :element="element" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, toRefs, getCurrentInstance, onMounted } from 'vue'
|
||||
import TimeDefault from '@/custom-component/de-time-clock/TimeDefault.vue'
|
||||
const props = defineProps({
|
||||
element: {
|
||||
type: Object
|
||||
@ -0,0 +1,133 @@
|
||||
<script setup lang="ts">
|
||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||
|
||||
import { storeToRefs } from 'pinia'
|
||||
import {onMounted, reactive} from "vue";
|
||||
|
||||
|
||||
|
||||
const state = reactive({
|
||||
|
||||
})
|
||||
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const snapshotStore = snapshotStoreWithOut()
|
||||
|
||||
const { curComponent } = storeToRefs(dvMainStore)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-collapse-item :effect="themes" title="位置" name="position" v-if="!dashboardActive">
|
||||
<component-position :themes="themes" />
|
||||
</el-collapse-item>
|
||||
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.de-collapse-style {
|
||||
:deep(.ed-collapse-item__header) {
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
font-size: 12px !important;
|
||||
padding: 0 !important;
|
||||
font-weight: 500 !important;
|
||||
|
||||
.ed-collapse-item__arrow {
|
||||
margin: 0 6px 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ed-collapse-item__content) {
|
||||
padding: 16px 8px 0;
|
||||
}
|
||||
:deep(.ed-form-item) {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
:deep(.ed-form-item__label) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled :deep(.el-upload--picture-card) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.avatar-uploader :deep(.ed-upload) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
.avatar-uploader :deep(.ed-upload-list li) {
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
}
|
||||
|
||||
:deep(.ed-upload--picture-card) {
|
||||
background: #eff0f1;
|
||||
border: 1px dashed #dee0e3;
|
||||
border-radius: 4px;
|
||||
|
||||
.ed-icon {
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.ed-icon {
|
||||
color: var(--ed-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.img-area {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
&.img-area_dark {
|
||||
:deep(.ed-upload-list__item).is-success {
|
||||
border-color: #434343;
|
||||
}
|
||||
:deep(.ed-upload--picture-card) {
|
||||
background: #373737;
|
||||
border-color: #434343;
|
||||
.ed-icon {
|
||||
color: #ebebeb;
|
||||
}
|
||||
&:hover {
|
||||
.ed-icon {
|
||||
color: var(--ed-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.img-area_light {
|
||||
:deep(.ed-upload-list__item).is-success {
|
||||
border-color: #dee0e3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-hint {
|
||||
color: #8f959e;
|
||||
size: 14px;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
margin-top: 2px;
|
||||
&.image-hint_dark {
|
||||
color: #757575;
|
||||
}
|
||||
}
|
||||
|
||||
.re-update-span {
|
||||
cursor: pointer;
|
||||
color: var(--ed-color-primary);
|
||||
size: 14px;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-form ref="form">
|
||||
<el-form-item v-show="formatInfo.showDate" label="显示日期">
|
||||
<el-select
|
||||
v-model="formatInfo.dateFormat"
|
||||
:effect="themes"
|
||||
style="width: 100%"
|
||||
@change="onFormatChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.dateOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="显示时间">
|
||||
<el-select
|
||||
v-model="formatInfo.timeFormat"
|
||||
:effect="themes"
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
style="width: 100%"
|
||||
@change="onFormatChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.timeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRefs } from 'vue'
|
||||
|
||||
const state = reactive({
|
||||
timeOptions: [
|
||||
{ value: 'hh:mm:ss', label: 'hh:mm:ss' },
|
||||
{ value: 'hh时mm分ss秒', label: 'hh时mm分ss秒' },
|
||||
{ value: '', label: '无' }
|
||||
],
|
||||
dateOptions: [
|
||||
{ value: 'yyyy-MM-dd', label: 'yyyy-MM-dd' },
|
||||
{ value: 'yyyy/MM/dd', label: 'yyyy/MM/dd' },
|
||||
{ value: 'yyyy年MM月dd日', label: 'yyyy年MM月dd日' }
|
||||
]
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
canvasId: {
|
||||
type: String,
|
||||
require: true
|
||||
},
|
||||
formatInfo: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themes: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: 'dark'
|
||||
}
|
||||
})
|
||||
|
||||
const { formatInfo } = toRefs(props)
|
||||
|
||||
const onFormatChange = () => {
|
||||
// doFormatChange
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -1,9 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
style="display: flex; align-items: center"
|
||||
:style="{ height: containerHeight, margin: timeMargin + 'px' }"
|
||||
>
|
||||
<p style="width: 100%; margin: auto">{{ nowDate }}</p>
|
||||
<div style="width: 100%; height: 100%; display: flex; align-items: center">
|
||||
<p>{{ state.nowDate }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -22,13 +19,6 @@ const state = reactive({
|
||||
nowWeek: '',
|
||||
timer: null
|
||||
})
|
||||
const timeMargin = computed(() => {
|
||||
return element.value.style.time_margin
|
||||
})
|
||||
|
||||
const containerHeight = computed(() => {
|
||||
return 'calc(100% - ' + element.value.style.time_margin * 2 + 'px)'
|
||||
})
|
||||
|
||||
const currentTime = () => {
|
||||
state.timer = setInterval(formatDate, 500)
|
||||
@ -5,6 +5,7 @@
|
||||
@keydown.stop
|
||||
@keyup.stop
|
||||
@dblclick="setEdit"
|
||||
@click="onClick"
|
||||
>
|
||||
<chart-error v-if="isError" :err-msg="errMsg" />
|
||||
<Editor
|
||||
@ -14,7 +15,6 @@
|
||||
class="custom-text-content"
|
||||
:init="init"
|
||||
:disabled="!canEdit || disabled"
|
||||
@onClick="onClick"
|
||||
/>
|
||||
<div
|
||||
class="rich-placeholder"
|
||||
@ -232,8 +232,10 @@ const fieldSelect = field => {
|
||||
snapshotStore.resetStyleChangeTimes()
|
||||
}
|
||||
const onClick = () => {
|
||||
const node = tinymce.activeEditor.selection.getNode()
|
||||
resetSelect(node)
|
||||
if (canEdit.value) {
|
||||
const node = tinymce.activeEditor.selection.getNode()
|
||||
resetSelect(node)
|
||||
}
|
||||
}
|
||||
const resetSelect = (node?) => {
|
||||
const edInner = tinymce.get(tinymceId)
|
||||
|
||||
@ -1,198 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="rich-main-class dark-theme"
|
||||
:class="{ 'edit-model': canEdit, 'dark-theme': themes === 'dark' }"
|
||||
@dblclick="setEdit"
|
||||
>
|
||||
<Editor
|
||||
v-if="editShow"
|
||||
:id="tinymceId"
|
||||
v-model="myValue"
|
||||
style="width: 100%; height: 100%"
|
||||
:init="init"
|
||||
:disabled="!canEdit"
|
||||
@onClick="onClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { formatDataEaseBi } from '@/utils/url'
|
||||
import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显示
|
||||
import Editor from '@tinymce/tinymce-vue' // 编辑器引入
|
||||
import 'tinymce/themes/silver/theme' // 编辑器主题
|
||||
import 'tinymce/icons/default' // 引入编辑器图标icon，不引入则不显示对应图标
|
||||
// 引入编辑器插件（基本免费插件都在这儿了）
|
||||
import 'tinymce/plugins/advlist' // 高级列表
|
||||
import 'tinymce/plugins/autolink' // 自动链接
|
||||
import 'tinymce/plugins/link' // 超链接
|
||||
import 'tinymce/plugins/image' // 插入编辑图片
|
||||
import 'tinymce/plugins/lists' // 列表插件
|
||||
import 'tinymce/plugins/charmap' // 特殊字符
|
||||
import 'tinymce/plugins/media' // 插入编辑媒体
|
||||
import 'tinymce/plugins/wordcount' // 字数统计
|
||||
import 'tinymce/plugins/table' // 表格
|
||||
import 'tinymce/plugins/contextmenu' // contextmenu
|
||||
import 'tinymce/plugins/directionality'
|
||||
import 'tinymce/plugins/nonbreaking'
|
||||
import 'tinymce/plugins/pagebreak'
|
||||
import { computed, nextTick, PropType, ref, toRefs, watch } from 'vue'
|
||||
const props = defineProps({
|
||||
terminal: {
|
||||
type: String,
|
||||
default: 'pc'
|
||||
},
|
||||
propValue: {
|
||||
type: String,
|
||||
require: true
|
||||
},
|
||||
element: {
|
||||
type: Object
|
||||
},
|
||||
editMode: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: 'edit'
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
themes: {
|
||||
type: String as PropType<EditorTheme>,
|
||||
default: 'dark'
|
||||
}
|
||||
})
|
||||
|
||||
const { element, editMode, active } = toRefs(props)
|
||||
const emits = defineEmits(['onClick'])
|
||||
|
||||
const editShow = ref(true)
|
||||
const canEdit = ref(false)
|
||||
// 初始化配置
|
||||
const tinymceId = 'tinymce-view-' + element.value['id']
|
||||
const myValue = ref(element.value.propValue.textValue)
|
||||
const init = ref({
|
||||
selector: '#' + tinymceId,
|
||||
toolbar_items_size: 'small',
|
||||
language_url: formatDataEaseBi('/tinymce-dataease-private/langs/zh_CN.js'), // 汉化路径是自定义的，一般放在public或static里面
|
||||
language: 'zh_CN',
|
||||
skin_url: formatDataEaseBi('/tinymce-dataease-private/skins/ui/oxide'), // 皮肤
|
||||
content_css: formatDataEaseBi('/tinymce-dataease-private/skins/content/default/content.css'),
|
||||
plugins:
|
||||
'advlist autolink link image lists charmap media wordcount table contextmenu directionality pagebreak', // 插件
|
||||
// 工具栏
|
||||
toolbar:
|
||||
'undo redo |fontselect fontsizeselect |forecolor backcolor bold italic |underline strikethrough link| alignleft aligncenter alignright |' +
|
||||
'formatselect | bullist numlist |' +
|
||||
' blockquote subscript superscript removeformat | table image media | fullscreen ' +
|
||||
'| bdmap indent2em lineheight formatpainter axupimgs',
|
||||
toolbar_location: '/',
|
||||
font_formats:
|
||||
'微软雅黑=Microsoft YaHei;宋体=SimSun;黑体=SimHei;仿宋=FangSong;华文黑体=STHeiti;华文楷体=STKaiti;华文宋体=STSong;华文仿宋=STFangsong;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings',
|
||||
fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
|
||||
menubar: false,
|
||||
placeholder: '双击锁定富文本',
|
||||
inline: true, // 开启内联模式
|
||||
branding: false
|
||||
})
|
||||
|
||||
const editStatus = computed(() => editMode.value === 'edit')
|
||||
|
||||
watch(
|
||||
() => active.value,
|
||||
val => {
|
||||
if (!val) {
|
||||
element.value['editing'] = false
|
||||
canEdit.value = false
|
||||
reShow()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => element.value.propValue.textValue,
|
||||
newValue => {
|
||||
myValue.value = newValue == null ? '' : newValue
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => myValue.value,
|
||||
newValue => {
|
||||
element.value.propValue.textValue = newValue
|
||||
}
|
||||
)
|
||||
|
||||
const onClick = e => {
|
||||
emits('onClick', e, tinymce)
|
||||
}
|
||||
const setEdit = () => {
|
||||
if (editStatus.value) {
|
||||
canEdit.value = true
|
||||
element.value['editing'] = true
|
||||
reShow()
|
||||
}
|
||||
}
|
||||
const reShow = () => {
|
||||
editShow.value = false
|
||||
nextTick(() => {
|
||||
editShow.value = true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.edit-model {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.rich-main-class {
|
||||
color: #00feff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0px !important;
|
||||
height: 0px !important;
|
||||
}
|
||||
|
||||
:deep(ol) {
|
||||
display: block !important;
|
||||
list-style-type: decimal;
|
||||
margin-block-start: 1em !important;
|
||||
margin-block-end: 1em !important;
|
||||
margin-inline-start: 0px !important;
|
||||
margin-inline-end: 0px !important;
|
||||
padding-inline-start: 40px !important;
|
||||
}
|
||||
|
||||
:deep(ul) {
|
||||
display: block !important;
|
||||
list-style-type: disc;
|
||||
margin-block-start: 1em !important;
|
||||
margin-block-end: 1em !important;
|
||||
margin-inline-start: 0px !important;
|
||||
margin-inline-end: 0px !important;
|
||||
padding-inline-start: 40px !important;
|
||||
}
|
||||
|
||||
:deep(li) {
|
||||
display: list-item !important;
|
||||
text-align: -webkit-match-parent !important;
|
||||
}
|
||||
|
||||
:deep(p) {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -388,6 +388,7 @@ const formatDate = computed(() => {
|
||||
v-else
|
||||
v-model="selectValue"
|
||||
:type="config.timeGranularity"
|
||||
@change="handleValueChange"
|
||||
:prefix-icon="calendar"
|
||||
:style="selectStyle"
|
||||
:placeholder="$t('commons.date.select_date_time')"
|
||||
|
||||
@ -12,4 +12,5 @@ export interface BusiTreeRequest {
|
||||
busiFlag?: string
|
||||
leaf?: boolean
|
||||
weight?: number
|
||||
sortType: string
|
||||
}
|
||||
|
||||
@ -37,7 +37,9 @@ const getPrefix = (): string => {
|
||||
}
|
||||
if (url.includes(suffix)) {
|
||||
const { origin, pathname } = new URL(url)
|
||||
prefix = `${origin}${pathname.slice(0, pathname.length - 1)}`
|
||||
const splitArr = pathname.split('/')
|
||||
splitArr.pop()
|
||||
prefix = `${origin}${splitArr.join('/')}`
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,7 +21,8 @@ import RectShape from '@/custom-component/rect-shape/Component.vue'
|
||||
import RectShapeAttr from '@/custom-component/rect-shape/Attr.vue'
|
||||
import SvgTriangle from '@/custom-component/svgs/svg-triangle/Component.vue'
|
||||
import SvgTriangleAttr from '@/custom-component/svgs/svg-triangle/Attr.vue'
|
||||
|
||||
import DeTimeClock from '@/custom-component/de-time-clock/Component.vue'
|
||||
import DeTimeClockAttr from '@/custom-component/de-time-clock/Attr.vue'
|
||||
export const componentsMap = {
|
||||
VText: VText,
|
||||
VQuery,
|
||||
@ -45,7 +46,9 @@ export const componentsMap = {
|
||||
RectShape: RectShape,
|
||||
RectShapeAttr: RectShapeAttr,
|
||||
SvgTriangle: SvgTriangle,
|
||||
SvgTriangleAttr: SvgTriangleAttr
|
||||
SvgTriangleAttr: SvgTriangleAttr,
|
||||
DeTimeClock: DeTimeClock,
|
||||
DeTimeClockAttr: DeTimeClockAttr
|
||||
}
|
||||
|
||||
export default function findComponent(key) {
|
||||
|
||||
23
core/core-frontend/src/utils/treeSortUtils.ts
Normal file
23
core/core-frontend/src/utils/treeSortUtils.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { BusiTreeNode } from '@/models/tree/TreeNode'
|
||||
import _ from 'lodash'
|
||||
|
||||
export default function treeSort(tree: BusiTreeNode[], sortType: string, historySortType: string) {
|
||||
const result = _.cloneDeep(tree)
|
||||
sortPer(result, sortType, historySortType)
|
||||
_.forEach(result, node => {
|
||||
if (node.children && node.children.length > 0) {
|
||||
sortPer(node.children, sortType, historySortType)
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
export const sortPer = (subTree: BusiTreeNode[], sortType: string, historySortType: string) => {
|
||||
if (sortType === 'name_desc') {
|
||||
subTree.sort((a, b) => b.name.localeCompare(a.name, 'zh-Hans-CN', { sensitivity: 'accent' }))
|
||||
} else if (sortType === 'name_asc') {
|
||||
subTree.sort((a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN', { sensitivity: 'accent' }))
|
||||
} else if (sortType !== historySortType) {
|
||||
return subTree.reverse()
|
||||
}
|
||||
}
|
||||
@ -20,6 +20,7 @@ import DeResourceCreateOptV2 from '@/views/common/DeResourceCreateOptV2.vue'
|
||||
import { useCache } from '@/hooks/web/useCache'
|
||||
import { findParentIdByChildIdRecursive } from '@/utils/canvasUtils'
|
||||
import { XpackComponent } from '@/components/plugin'
|
||||
import treeSort from '@/utils/treeSortUtils'
|
||||
const { wsCache } = useCache()
|
||||
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
@ -57,6 +58,7 @@ const resourceGroupOpt = ref()
|
||||
const resourceCreateOpt = ref()
|
||||
const returnMounted = ref(false)
|
||||
const state = reactive({
|
||||
curSortType: 'time_desc',
|
||||
resourceTree: [] as BusiTreeNode[],
|
||||
folderMenuList: [
|
||||
{
|
||||
@ -76,6 +78,24 @@ const state = reactive({
|
||||
divided: true
|
||||
}
|
||||
],
|
||||
sortType: [
|
||||
{
|
||||
label: '按时间升序',
|
||||
value: 'time_asc'
|
||||
},
|
||||
{
|
||||
label: '按时间降序',
|
||||
value: 'time_desc'
|
||||
},
|
||||
{
|
||||
label: '按名称升序',
|
||||
value: 'name_asc'
|
||||
},
|
||||
{
|
||||
label: '按名称降序',
|
||||
value: 'time_asc'
|
||||
}
|
||||
],
|
||||
templateCreatePid: 0
|
||||
})
|
||||
|
||||
@ -370,6 +390,11 @@ const getDefaultExpandedKeys = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const sortTypeChange = sortType => {
|
||||
state.resourceTree = treeSort(state.resourceTree, sortType, state.curSortType)
|
||||
state.curSortType = sortType
|
||||
}
|
||||
|
||||
watch(filterText, val => {
|
||||
resourceListTree.value.filter(val)
|
||||
})
|
||||
@ -454,6 +479,43 @@ defineExpose({
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-dropdown trigger="click">
|
||||
<el-icon class="insert-filter filter-icon-span"><Filter /></el-icon>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu style="width: 140px">
|
||||
<el-dropdown-item
|
||||
class="sort-type-normal"
|
||||
:class="{ 'sort-type-checked': state.curSortType === 'time_asc' }"
|
||||
@click="sortTypeChange('time_asc')"
|
||||
>
|
||||
<span>按照时间升序</span>
|
||||
<el-icon><Check /></el-icon>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
class="sort-type-normal"
|
||||
:class="{ 'sort-type-checked': state.curSortType === 'time_desc' }"
|
||||
@click="sortTypeChange('time_desc')"
|
||||
>
|
||||
<span>按照时间降序</span> <el-icon><Check /></el-icon>
|
||||
</el-dropdown-item>
|
||||
<el-divider />
|
||||
<el-dropdown-item
|
||||
class="sort-type-normal"
|
||||
:class="{ 'sort-type-checked': state.curSortType === 'name_asc' }"
|
||||
@click="sortTypeChange('name_asc')"
|
||||
>
|
||||
<span>按照名称升序</span><el-icon><Check /></el-icon>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
class="sort-type-normal"
|
||||
:class="{ 'sort-type-checked': state.curSortType === 'name_desc' }"
|
||||
@click="sortTypeChange('name_desc')"
|
||||
>
|
||||
<span>按照名称降序</span><el-icon><Check /></el-icon>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<el-scrollbar class="custom-tree">
|
||||
<el-tree
|
||||
@ -530,6 +592,43 @@ defineExpose({
|
||||
<XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.insert-filter {
|
||||
display: inline-block;
|
||||
font-weight: 400 !important;
|
||||
font-family: '阿里巴巴普惠体 3.0 55 Regular L3';
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
color: var(--TextPrimary, #1f2329);
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
transition: 0.1s;
|
||||
border-radius: 3px;
|
||||
|
||||
&:active {
|
||||
color: #000;
|
||||
border-color: #3a8ee6;
|
||||
background-color: red;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(31, 35, 41, 0.1);
|
||||
color: #3a8ee6;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-icon-span {
|
||||
border: 1px solid #dcdfe6;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
padding: 7px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.resource-tree {
|
||||
padding: 16px 0 0;
|
||||
width: 100%;
|
||||
@ -568,6 +667,7 @@ defineExpose({
|
||||
}
|
||||
.search-bar {
|
||||
padding-bottom: 10px;
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
.title-area {
|
||||
@ -647,4 +747,17 @@ defineExpose({
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.sort-type-normal {
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sort-type-checked {
|
||||
color: blueviolet;
|
||||
i {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user