<script setup lang="ts">
|
import { nextTick, onMounted, PropType, toRefs } from 'vue'
|
import { BASE_VIEW_CONFIG } from '@/views/chart/components/editor/util/chart'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import Threshold from '@/views/chart/components/editor/editor-senior/components/Threshold.vue'
|
import { CollapseSwitchItem } from '@/components/collapse-switch-item'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
import { ElMessage } from 'element-plus-secondary'
|
const snapshotStore = snapshotStoreWithOut()
|
const { t } = useI18n()
|
|
const props = defineProps({
|
themes: {
|
type: String as PropType<EditorTheme>,
|
default: 'dark'
|
},
|
element: {
|
type: Object,
|
default() {
|
return {
|
propValue: {
|
urlList: []
|
}
|
}
|
}
|
},
|
view: {
|
type: Object as PropType<ChartObj>,
|
required: false,
|
default() {
|
return { ...BASE_VIEW_CONFIG }
|
}
|
}
|
})
|
const { view, element } = toRefs(props)
|
|
const onThresholdChange = val => {
|
// do
|
view.value.senior.threshold = val
|
if (val.enable) {
|
element.value.carousel.enable = false
|
}
|
nextTick(() => {
|
useEmitt().emitter.emit('calcData-' + element.value.id)
|
})
|
snapshotStore.recordSnapshotCache('calcData', view.value.id)
|
}
|
|
const onStyleChange = () => {
|
snapshotStore.recordSnapshotCache('onStyleChange')
|
}
|
|
const onRefreshChange = val => {
|
onStyleChange()
|
if (val === '' || parseFloat(val).toString() === 'NaN' || parseFloat(val) < 1) {
|
ElMessage.error(t('chart.only_input_number'))
|
return
|
}
|
}
|
|
const closeThreshold = () => {
|
view.value.senior.threshold.enable = false
|
}
|
onMounted(() => {
|
useEmitt({
|
name: 'carouselValueChange',
|
callback: () => closeThreshold()
|
})
|
})
|
</script>
|
|
<template>
|
<collapse-switch-item
|
:effect="themes"
|
:title="t('chart.threshold')"
|
:change-model="view.senior.threshold"
|
v-model="view.senior.threshold.enable"
|
name="threshold"
|
@modelChange="onThresholdChange"
|
>
|
<slot name="dataset" />
|
<threshold
|
:themes="themes"
|
:chart="view"
|
:property-inner="['tableThreshold']"
|
@onThresholdChange="onThresholdChange"
|
/>
|
<el-row v-if="view" class="refresh-area">
|
<el-form-item
|
style="width: 100%"
|
class="form-item no-margin-bottom"
|
:class="'form-item-' + themes"
|
>
|
<el-checkbox
|
v-model="view.refreshViewEnable"
|
:effect="themes"
|
size="small"
|
@change="onStyleChange()"
|
>
|
{{ t('visualization.refresh_frequency') }}
|
</el-checkbox>
|
</el-form-item>
|
<el-row style="width: 100%" v-if="view.refreshViewEnable">
|
<el-form-item
|
class="form-item no-margin-bottom select-append"
|
:class="'form-item-' + themes"
|
>
|
<el-input
|
v-model.number="view.refreshTime"
|
:effect="themes"
|
:class="[themes === 'dark' && 'dv-dark']"
|
size="small"
|
:min="1"
|
:max="3600"
|
:disabled="!view.refreshViewEnable"
|
@change="onRefreshChange"
|
>
|
<template #append>
|
<el-select
|
v-model="view.refreshUnit"
|
:effect="themes"
|
size="small"
|
placeholder="Select"
|
style="width: 80px"
|
@change="onStyleChange()"
|
>
|
<el-option :effect="themes" :label="t('visualization.minute')" :value="'minute'" />
|
<el-option :effect="themes" :label="t('visualization.second')" :value="'second'" />
|
</el-select>
|
</template>
|
</el-input>
|
</el-form-item>
|
</el-row>
|
</el-row>
|
</collapse-switch-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;
|
}
|
|
.pic-adaptor {
|
margin: 8px 0 16px 0;
|
:deep(.ed-form-item__content) {
|
margin-top: 8px !important;
|
}
|
}
|
|
.form-item-dark {
|
.ed-radio {
|
margin-right: 4px !important;
|
}
|
}
|
|
.drag-data {
|
padding-top: 8px;
|
padding-bottom: 16px;
|
|
.tree-btn {
|
width: 100%;
|
margin-top: 8px;
|
background: #fff;
|
height: 32px;
|
border-radius: 4px;
|
border: 1px solid #dcdfe6;
|
display: flex;
|
color: #cccccc;
|
align-items: center;
|
cursor: pointer;
|
justify-content: center;
|
font-size: 12px;
|
&.tree-btn--dark {
|
background: rgba(235, 235, 235, 0.05);
|
border-color: #5f5f5f;
|
}
|
|
&.active {
|
color: var(--ed-color-primary, #3370ff);
|
border-color: var(--ed-color-primary, #3370ff);
|
}
|
}
|
|
&.no-top-border {
|
border-top: none !important;
|
}
|
&.no-top-padding {
|
padding-top: 0 !important;
|
}
|
&:nth-child(n + 2) {
|
border-top: 1px solid @side-outline-border-color;
|
}
|
&:first-child {
|
border-top: none !important;
|
}
|
}
|
.refresh-area {
|
width: 100%;
|
padding: 0;
|
}
|
</style>
|
