forked from github/dataease
refator: 调整仪表板样式面板 (#2527)
Co-authored-by: wangjiahao <1522128093@qq.com>
This commit is contained in:
fit2cloudrd
GitHub
parent
2ac85d2d4e
commit
1ea1e79a76
98
frontend/src/components/AssistButton/ColorButton.vue
Normal file
98
frontend/src/components/AssistButton/ColorButton.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="color-button-main">
|
||||
<div class="color-button-outer" :class="active?'color-button-active':''" @click.stop="colorButtonClick">
|
||||
<div class="color-button-inner" :class="'color-button-inner-'+colorType" />
|
||||
</div>
|
||||
<span class="text-area">
|
||||
<slot />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'ColorButton',
|
||||
inheritAttrs: true,
|
||||
props: {
|
||||
colorType: {
|
||||
type: String,
|
||||
default: 'light'
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
active() {
|
||||
return this.label === this.colorType
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
colorButtonClick() {
|
||||
this.$emit('onClick', this.colorType)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.color-button-main{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.color-button-outer {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 2px;
|
||||
border-width: 1px;
|
||||
border-color: #DEE0E3;
|
||||
cursor: pointer;
|
||||
border-style: solid;
|
||||
padding-left: 3px;
|
||||
padding-top: 3px;
|
||||
&:hover {
|
||||
padding-left: 2px;
|
||||
padding-top: 2px;
|
||||
border-width: 2px;
|
||||
border-color: #DEE0E3;
|
||||
}
|
||||
}
|
||||
.color-button-active{
|
||||
padding-left: 2px;
|
||||
padding-top: 2px;
|
||||
border-width: 2px;
|
||||
border-color: #3370FF!important;
|
||||
}
|
||||
|
||||
.color-button-inner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #DEE0E3;
|
||||
}
|
||||
.color-button-inner-light{
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.color-button-inner-dark{
|
||||
background-color: #0C296E;
|
||||
}
|
||||
.text-area{
|
||||
font-weight: 400;
|
||||
size: 14px;
|
||||
line-height: 22px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,56 +1,115 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="overallSettingForm" :model="overallSettingForm" label-width="70px" size="mini">
|
||||
<el-form-item :label="$t('panel.theme_color')" class="form-item">
|
||||
<el-radio-group v-model="overallSettingForm.panel.themeColor" @change="themeChange('themeColor')">
|
||||
<el-radio label="light">{{ $t('panel.theme_color_light') }}</el-radio>
|
||||
<el-radio label="dark">{{ $t('panel.theme_color_dark') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('panel.component_gap')" class="form-item">
|
||||
<el-row class="margin-top12">
|
||||
<el-row class="custom-item-text-row"><span class="custom-item-text bl">{{ $t('panel.theme_color') }}</span>
|
||||
</el-row>
|
||||
<el-row class="custom-theme-color-button function-area">
|
||||
<color-button
|
||||
class="margin-left2"
|
||||
:color-type="'light'"
|
||||
:label="overallSettingForm.panel.themeColor"
|
||||
@onClick="colorButtonClick"
|
||||
>{{ $t('panel.theme_color_light') }}
|
||||
</color-button>
|
||||
<color-button
|
||||
class="margin-left32"
|
||||
:color-type="'dark'"
|
||||
:label="overallSettingForm.panel.themeColor"
|
||||
@onClick="colorButtonClick"
|
||||
>{{ $t('panel.theme_color_dark') }}
|
||||
</color-button>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-row class="margin-top20">
|
||||
<el-row class="custom-item-text-row"><span class="custom-item-text bl">{{ $t('panel.component_gap') }}</span>
|
||||
</el-row>
|
||||
<el-row class="function-area">
|
||||
<el-radio-group v-model="overallSettingForm.panel.gap" size="mini" @change="themeChange()">
|
||||
<el-radio label="yes">{{ $t('panel.gap') }}</el-radio>
|
||||
<el-radio label="no">{{ $t('panel.no_gap') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('panel.refresh_frequency')" class="form-item">
|
||||
<el-input v-model="overallSettingForm.refreshTime" class="el-input-refresh-time" type="number" size="mini" controls-position="right" :min="1" :max="3600" @change="themeChange" />
|
||||
<el-select v-model="overallSettingForm.refreshUnit" class="el-input-refresh-unit margin-left4" @change="themeChange">
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-row class="margin-top20">
|
||||
<el-row class="custom-item-text-row">
|
||||
<span class="custom-item-text bl"> {{ $t('panel.refresh_frequency') }}</span>
|
||||
<span class="custom-item-text br">
|
||||
<el-checkbox
|
||||
v-model="overallSettingForm.refreshViewLoading"
|
||||
class="el-input-refresh-loading"
|
||||
@change="themeChange"
|
||||
>视图加载提示</el-checkbox>
|
||||
</span>
|
||||
</el-row>
|
||||
<el-row class="function-area">
|
||||
<el-input
|
||||
v-model="overallSettingForm.refreshTime"
|
||||
class="el-input-refresh-time"
|
||||
type="number"
|
||||
size="mini"
|
||||
controls-position="right"
|
||||
:min="1"
|
||||
:max="3600"
|
||||
@change="themeChange"
|
||||
/>
|
||||
<el-select
|
||||
v-model="overallSettingForm.refreshUnit"
|
||||
class="el-input-refresh-unit margin-left8"
|
||||
size="mini"
|
||||
@change="themeChange"
|
||||
>
|
||||
<el-option :label="$t('panel.minute')" :value="'minute'" />
|
||||
<el-option :label="$t('panel.second')" :value="'second'" />
|
||||
</el-select>
|
||||
<el-checkbox v-model="overallSettingForm.refreshViewLoading" class="el-input-refresh-loading" @change="themeChange">提示</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('panel.panel_view_result_show')" class="form-item form-item-result">
|
||||
<div style="width: 100%;">
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<el-radio-group v-model="overallSettingForm.panel.resultMode" class="radio-span" size="mini" @change="themeChange">
|
||||
<el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
|
||||
<el-radio label="custom">
|
||||
<span>{{ $t('panel.panel') }} </span>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
<el-col :span="8" class="slider-area">
|
||||
<el-slider
|
||||
v-model="overallSettingForm.panel.resultCount"
|
||||
:disabled="overallSettingForm.panel.resultMode==='all'"
|
||||
style="margin-left: 5px"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
:show-tooltip="false"
|
||||
input-size="mini"
|
||||
:min="1"
|
||||
:max="10000"
|
||||
@change="themeChange"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-row class="margin-top20 margin-bottom20">
|
||||
<el-row class="custom-item-text-row">
|
||||
<span class="custom-item-text bl">
|
||||
{{ $t('panel.panel_view_result_show') }}
|
||||
<span>
|
||||
<el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
{{ $t('panel.panel_view_result_tips') }}
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer;" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</span>
|
||||
</el-row>
|
||||
<el-row class="function-area">
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<el-radio-group
|
||||
v-model="overallSettingForm.panel.resultMode"
|
||||
class="radio-span"
|
||||
size="mini"
|
||||
@change="themeChange"
|
||||
>
|
||||
<el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
|
||||
<el-radio label="custom">
|
||||
<span>{{ $t('panel.panel') }} </span>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
<el-col :span="8" class="slider-area">
|
||||
<el-slider
|
||||
v-model="overallSettingForm.panel.resultCount"
|
||||
:disabled="overallSettingForm.panel.resultMode==='all'"
|
||||
style="margin-left: 5px"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
:show-tooltip="false"
|
||||
input-size="mini"
|
||||
:min="1"
|
||||
:max="10000"
|
||||
@change="themeChange"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
@ -65,20 +124,26 @@ import {
|
||||
LIGHT_THEME_PANEL_BACKGROUND
|
||||
} from '@/components/canvas/utils/style'
|
||||
import bus from '@/utils/bus'
|
||||
import { DEFAULT_COLOR_CASE_DARK, DEFAULT_TITLE_STYLE_DARK, DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
|
||||
import {
|
||||
DEFAULT_COLOR_CASE_DARK,
|
||||
DEFAULT_TITLE_STYLE_DARK,
|
||||
DEFAULT_COLOR_CASE,
|
||||
DEFAULT_TITLE_STYLE
|
||||
} from '@/views/chart/chart/chart'
|
||||
import { FILTER_COMMON_STYLE, FILTER_COMMON_STYLE_DARK } from '@/views/panel/panel'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
import ColorButton from '@/components/AssistButton/ColorButton'
|
||||
|
||||
export default {
|
||||
name: 'OverallSetting',
|
||||
components: { ColorButton },
|
||||
data() {
|
||||
return {
|
||||
colorIndex: 0,
|
||||
overallSettingForm: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
watch: {},
|
||||
computed: {
|
||||
...mapState([
|
||||
'canvasStyleData'
|
||||
@ -113,6 +178,14 @@ export default {
|
||||
bus.$emit('onThemeColorChange')
|
||||
}
|
||||
this.$store.commit('recordSnapshot')
|
||||
},
|
||||
colorButtonClick(val) {
|
||||
if (val !== this.overallSettingForm.panel.themeColor) {
|
||||
this.overallSettingForm.panel.themeColor = val
|
||||
this.themeChange('themeColor')
|
||||
} else {
|
||||
this.overallSettingForm.panel.themeColor = val
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -120,35 +193,42 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
|
||||
.el-input-refresh-time{
|
||||
width: 55px!important;
|
||||
.el-input-refresh-time {
|
||||
width: calc(50% - 4px) !important;
|
||||
}
|
||||
|
||||
.el-input-refresh-unit{
|
||||
width: 55px!important;
|
||||
.el-input-refresh-unit {
|
||||
width: calc(50% - 4px) !important;
|
||||
}
|
||||
|
||||
.el-input-refresh-loading{
|
||||
.el-input-refresh-loading {
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.margin-left4{
|
||||
|
||||
.margin-left4 {
|
||||
margin-left: 4px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
padding: 0px 5px!important;
|
||||
|
||||
.margin-left8 {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
::v-deep .el-slider__input{
|
||||
width: 50px;
|
||||
::v-deep .el-input__inner {
|
||||
padding: 0px 5px !important;
|
||||
}
|
||||
|
||||
::v-deep .el-slider__input {
|
||||
width: 100px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.form-item-slider ::v-deep .el-form-item__label{
|
||||
.form-item-slider ::v-deep .el-form-item__label {
|
||||
font-size: 12px;
|
||||
line-height: 38px;
|
||||
}
|
||||
.form-item ::v-deep .el-form-item__label{
|
||||
|
||||
.form-item ::v-deep .el-form-item__label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -159,8 +239,58 @@ export default {
|
||||
.result-count {
|
||||
width: 80px;
|
||||
}
|
||||
.form-item-result ::v-deep .el-radio{
|
||||
|
||||
.form-item-result ::v-deep .el-radio {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.custom-item-text-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.custom-item-text {
|
||||
font-weight: 400 !important;
|
||||
font-size: 14px !important;
|
||||
color: var(--TextPrimary, #1F2329) !important;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.custom-theme-color-button {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.margin-left2 {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.margin-left32 {
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
.bl {
|
||||
justify-content: flex-start;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.br {
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
}
|
||||
.function-area{
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.margin-top12{
|
||||
margin-top: 12px!important;
|
||||
}
|
||||
|
||||
.margin-top20{
|
||||
margin-top: 20px!important;
|
||||
}
|
||||
|
||||
.margin-bottom20{
|
||||
margin-bottom: 20px!important;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,20 +1,32 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-row v-loading="slidersLoading">
|
||||
<el-col :span="2">
|
||||
<div class="direction-left">
|
||||
<span> </span>
|
||||
<ul v-show="currentIndex>1" class="direction">
|
||||
<li class="left" @click="move(sliderWidth, 1, speed)">
|
||||
<svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" /></svg>
|
||||
<svg
|
||||
class="icon"
|
||||
width="15px"
|
||||
height="15.00px"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill="#ffffff"
|
||||
d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"
|
||||
/>
|
||||
</svg>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
</div>
|
||||
<el-col :span="24">
|
||||
<el-row id="slider">
|
||||
<div class="window">
|
||||
<ul v-if="!slidersLoading" class="container" :style="containerStyle">
|
||||
<li>
|
||||
<div style="width:240px; height: 208px;overflow: hidden">
|
||||
<div style="width:290px; height: 250px;overflow: hidden">
|
||||
<subject-template-item
|
||||
v-for="item in sliders[sliders.length - 1]"
|
||||
:key="item.id"
|
||||
@ -24,7 +36,7 @@
|
||||
</div>
|
||||
</li>
|
||||
<li v-for="(itemSlider, index) in sliders" :key="index">
|
||||
<div style="width:240px; height: 208px;">
|
||||
<div style="width:290px; height: 250px;">
|
||||
<subject-template-item
|
||||
v-for="item in itemSlider"
|
||||
:key="item.id"
|
||||
@ -34,7 +46,7 @@
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div style="width:240px; height: 208px;">
|
||||
<div style="width:290px; height: 250px;">
|
||||
<subject-template-item
|
||||
v-for="item in sliders[0]"
|
||||
:key="item.id"
|
||||
@ -47,14 +59,26 @@
|
||||
</div>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div class="direction-right">
|
||||
<span> </span>
|
||||
<ul v-show="currentIndex<sliders.length" class="direction">
|
||||
<li class="right" @click="move(sliderWidth, -1, speed)">
|
||||
<svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" /></svg>
|
||||
<svg
|
||||
class="icon"
|
||||
width="15px"
|
||||
height="15.00px"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill="#ffffff"
|
||||
d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z"
|
||||
/>
|
||||
</svg>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="7" style="height: 30px" />
|
||||
@ -84,7 +108,6 @@ import { mapState } from 'vuex'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
import { uuid } from 'vue-uuid'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'Slider',
|
||||
components: {
|
||||
@ -104,10 +127,10 @@ export default {
|
||||
return {
|
||||
sliders: [],
|
||||
slidersLoading: false,
|
||||
sliderWidth: 240,
|
||||
imgWidth: 240,
|
||||
sliderWidth: 290,
|
||||
imgWidth: 290,
|
||||
currentIndex: 1,
|
||||
distance: -240,
|
||||
distance: -290,
|
||||
transitionEnd: true,
|
||||
speed: this.initialSpeed,
|
||||
saveSubjectVisible: false
|
||||
@ -210,69 +233,99 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
ol,ul{
|
||||
list-style: none;
|
||||
}
|
||||
#slider{
|
||||
text-align: center;
|
||||
}
|
||||
.window{
|
||||
position:relative;
|
||||
width:240px;
|
||||
height:208px;
|
||||
margin:0 auto;
|
||||
overflow:hidden;
|
||||
}
|
||||
.container{
|
||||
display:flex;
|
||||
position:absolute;
|
||||
}
|
||||
.left, .right{
|
||||
position:absolute;
|
||||
top:50%;
|
||||
transform:translateY(-50%);
|
||||
width:20px;
|
||||
height:20px;
|
||||
background-color:rgba(0,0,0,.3);
|
||||
border-radius:50%;
|
||||
cursor:pointer;
|
||||
}
|
||||
.left{
|
||||
padding-left:5px;
|
||||
padding-top:2px;
|
||||
}
|
||||
.right{
|
||||
padding-right:5px;
|
||||
padding-top:2px;
|
||||
}
|
||||
img{
|
||||
user-select: none;
|
||||
}
|
||||
.dots{
|
||||
position:absolute;
|
||||
bottom:10px;
|
||||
left:50%;
|
||||
transform:translateX(-50%);
|
||||
}
|
||||
.dots li{
|
||||
display:inline-block;
|
||||
width:7px;
|
||||
height:7px;
|
||||
margin:0 3px;
|
||||
border:1px solid white;
|
||||
border-radius:50%;
|
||||
background-color:#333;
|
||||
cursor:pointer;
|
||||
}
|
||||
.dots .dotted{
|
||||
background-color:orange;
|
||||
}
|
||||
.direction{
|
||||
width: 100%;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#slider {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.window {
|
||||
position: relative;
|
||||
width: 290px;
|
||||
height: 250px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.left, .right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.left {
|
||||
padding-left: 5px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.right {
|
||||
padding-right: 5px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
img {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.dots {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.dots li {
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
margin: 0 3px;
|
||||
border: 1px solid white;
|
||||
border-radius: 50%;
|
||||
background-color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dots .dotted {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.direction {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.direction-left {
|
||||
z-index: 2;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
.direction-right {
|
||||
z-index: 2;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
right: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,42 +1,78 @@
|
||||
<template>
|
||||
<div class="subject-template">
|
||||
<div
|
||||
:class="[
|
||||
{
|
||||
['background-selected']: themeSelected
|
||||
},
|
||||
'subject-template'
|
||||
]"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
{
|
||||
['vertical-layout-selected']: themeSelected
|
||||
},
|
||||
'vertical-layout'
|
||||
]"
|
||||
class="vertical-layout"
|
||||
@click.stop="subjectChange"
|
||||
>
|
||||
<i v-if="subjectItem.type==='self'" class="el-icon-error" @click.stop="subjectDelete" />
|
||||
<span v-show="themeSelected" class="el-icon-success theme-selected-icon" />
|
||||
<!-- 背景-->
|
||||
<div class="allBack" :style="customBackground" style="inset: 1px; position: absolute;" />
|
||||
<div class="allBack common-background" :style="customBackground" />
|
||||
<!-- 视图组件 背景-->
|
||||
<div style="inset: 17px 10px 10px; position: absolute;" :style="chartBackground" />
|
||||
<!-- 视图组件 主题-->
|
||||
<div style="inset: 20px 13px 15px; position: absolute;">
|
||||
<div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
|
||||
<!--柱形-->
|
||||
<div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
|
||||
<div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
|
||||
<div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundRight" />
|
||||
<div
|
||||
style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;"
|
||||
:style="columnBackgroundLeft"
|
||||
/>
|
||||
<div
|
||||
style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
|
||||
:style="columnBackgroundMiddle"
|
||||
/>
|
||||
<div
|
||||
style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;"
|
||||
:style="columnBackgroundRight"
|
||||
/>
|
||||
|
||||
<!--柱形-->
|
||||
<div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
|
||||
<div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
|
||||
<div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
|
||||
<div
|
||||
style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;"
|
||||
:style="columnBackgroundLeft"
|
||||
/>
|
||||
<div
|
||||
style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; "
|
||||
:style="columnBackgroundMiddle"
|
||||
/>
|
||||
<div
|
||||
style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
|
||||
:style="columnBackgroundRight"
|
||||
/>
|
||||
|
||||
<!--柱形-->
|
||||
<div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
|
||||
<div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
|
||||
<div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
|
||||
<div
|
||||
style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;"
|
||||
:style="columnBackgroundLeft"
|
||||
/>
|
||||
<div
|
||||
style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
|
||||
:style="columnBackgroundMiddle"
|
||||
/>
|
||||
<div
|
||||
style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; "
|
||||
:style="columnBackgroundRight"
|
||||
/>
|
||||
|
||||
<!--柱形-->
|
||||
<div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
|
||||
<div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
|
||||
<div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
|
||||
<div
|
||||
style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;"
|
||||
:style="columnBackgroundLeft"
|
||||
/>
|
||||
<div
|
||||
style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; "
|
||||
:style="columnBackgroundMiddle"
|
||||
/>
|
||||
<div
|
||||
style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; "
|
||||
:style="columnBackgroundRight"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -45,17 +81,36 @@
|
||||
|
||||
<!-- 字体颜色 -->
|
||||
<div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div
|
||||
style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
|
||||
:style="tableFontColor"
|
||||
/>
|
||||
<div
|
||||
style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
|
||||
:style="tableFontColor"
|
||||
/>
|
||||
<div
|
||||
style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
|
||||
:style="tableFontColor"
|
||||
/>
|
||||
<div
|
||||
style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
|
||||
:style="tableFontColor"
|
||||
/>
|
||||
<div
|
||||
style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
|
||||
:style="tableFontColor"
|
||||
/>
|
||||
<div
|
||||
style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
|
||||
:style="tableFontColor"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;" @dblclick="setEdit">
|
||||
<div style=" background-color:#f7f8fa;color:#3d4d66;font-size:12px;height: 30px; line-height: 30px; text-align: center; white-space: pre; text-overflow: ellipsis; margin-left: 1px; margin-right: 1px;overflow: hidden">
|
||||
<div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px; float: left" @dblclick="setEdit">
|
||||
|
||||
<div class="title-area">
|
||||
<el-input
|
||||
v-if="canEdit"
|
||||
ref="nameInput"
|
||||
@ -63,7 +118,12 @@
|
||||
size="mini"
|
||||
@blur="loseFocus()"
|
||||
/>
|
||||
<span v-if="!canEdit" style="margin-top: 8px" :title="subjectItem.name">{{ subjectItem.name }}</span>
|
||||
<span
|
||||
v-if="!canEdit"
|
||||
style="margin-top: 8px;margin-left: 8px"
|
||||
:title="subjectItem.name"
|
||||
>{{ subjectItem.name }}</span>
|
||||
<i v-if="subjectItem.type==='self' && !canEdit" class="el-icon-delete delete-icon" @click.stop="subjectDelete" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -74,7 +134,6 @@ import { chartTransStr2Object } from '@/views/panel/panel'
|
||||
import { mapState } from 'vuex'
|
||||
import bus from '@/utils/bus'
|
||||
import { saveOrUpdateSubject } from '@/api/panel/panel'
|
||||
import { resetViewCacheCallBack } from '@/api/chart/chart'
|
||||
|
||||
export default {
|
||||
name: 'StyleTemplateItem',
|
||||
@ -86,9 +145,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultSubject: {
|
||||
|
||||
},
|
||||
defaultSubject: {},
|
||||
subjectItemDetails: null,
|
||||
canEdit: false
|
||||
}
|
||||
@ -263,77 +320,98 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
|
||||
.allBack {
|
||||
background-size: 100% 100%!important;
|
||||
}
|
||||
.subject-template {
|
||||
width: 110px;
|
||||
height: 90px;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
.allBack {
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
|
||||
.demonstration {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 10px auto;
|
||||
width: 150px;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
.subject-template {
|
||||
width: 135px;
|
||||
height: 110px;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
display: inline-block;
|
||||
border: 1px solid #DEE0E3;
|
||||
border-radius: 5px;
|
||||
z-index: 2;
|
||||
|
||||
.vertical-layout {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
inset: 0px 0px 30px;
|
||||
width: 108px; height: 58px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
|
||||
border: solid 1px #fff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
.subject-template:hover {
|
||||
border: solid 1px #4b8fdf;
|
||||
color: deepskyblue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vertical-layout-selected{
|
||||
border: solid 2px #4b8fdf;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.demonstration {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 10px auto;
|
||||
width: 150px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.vertical-layout:hover {
|
||||
border: solid 1px #4b8fdf;
|
||||
border-radius: 3px;
|
||||
color: deepskyblue;
|
||||
cursor: pointer;
|
||||
}
|
||||
.vertical-layout {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
inset: 0px 0px 30px;
|
||||
width: 131px;
|
||||
height: 78px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 2px 0 rgba(31, 31, 31, 0.15), 0 1px 2px 0 rgba(31, 31, 31, 0.15);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.vertical-layout > i{
|
||||
float: right;
|
||||
color: gray;
|
||||
margin: 2px;
|
||||
position: relative;
|
||||
}
|
||||
.vertical-layout > i {
|
||||
float: right;
|
||||
color: gray;
|
||||
margin: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vertical-layout > i:hover {
|
||||
color: red;
|
||||
}
|
||||
.vertical-layout > i:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.vertical-layout:hover > .el-icon-error {
|
||||
z-index: 10;
|
||||
display:block;
|
||||
}
|
||||
.vertical-layout>>>.el-icon-error {
|
||||
display:none
|
||||
}
|
||||
.theme-selected-icon {
|
||||
z-index: 2;
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
color: #4b8fdf;
|
||||
}
|
||||
.theme-selected-icon {
|
||||
z-index: 2;
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
color: #4b8fdf;
|
||||
}
|
||||
|
||||
.title-area {
|
||||
background-color: #ffffff;
|
||||
color: #1F2329;
|
||||
font-size: 12px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.common-background{
|
||||
border-radius: 5px 5px 0 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.background-selected {
|
||||
border: solid 2px #4b8fdf;
|
||||
}
|
||||
|
||||
.delete-icon{
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
}
|
||||
.delete-icon:hover{
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-row v-loading="slidersLoading">
|
||||
<el-col :span="2">
|
||||
<span> </span>
|
||||
<ul v-show="currentIndex>1" class="direction">
|
||||
<li class="left" @click="move(sliderWidth, 1, speed)">
|
||||
<svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" /></svg>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-row id="slider">
|
||||
<div class="window">
|
||||
<ul v-if="!slidersLoading" class="container" :style="containerStyle">
|
||||
<li>
|
||||
<div style="width:240px; height: 208px;overflow: hidden">
|
||||
<subject-template-item
|
||||
v-for="item in sliders[sliders.length - 1]"
|
||||
:key="item.id"
|
||||
:subject-item="item"
|
||||
@subjectDelete="subjectDelete"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
<li v-for="(itemSlider, index) in sliders" :key="index">
|
||||
<div style="width:240px; height: 208px;">
|
||||
<subject-template-item
|
||||
v-for="item in itemSlider"
|
||||
:key="item.id"
|
||||
:subject-item="item"
|
||||
@subjectDelete="subjectDelete"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div style="width:240px; height: 208px;">
|
||||
<subject-template-item
|
||||
v-for="item in sliders[0]"
|
||||
:key="item.id"
|
||||
:subject-item="item"
|
||||
@subjectDelete="subjectDelete"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<span> </span>
|
||||
<ul v-show="currentIndex<sliders.length" class="direction">
|
||||
<li class="right" @click="move(sliderWidth, -1, speed)">
|
||||
<svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" /></svg>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="7" style="height: 30px" />
|
||||
<el-col :span="10" style="height: 30px">
|
||||
<span hidden>B</span>
|
||||
<ul class="dots">
|
||||
<li
|
||||
v-for="(dot, i) in sliders"
|
||||
:key="i"
|
||||
:class="{dotted: i === (currentIndex-1)}"
|
||||
@click="jump(i+1)"
|
||||
/>
|
||||
</ul>
|
||||
</el-col>
|
||||
<el-col :span="7" style="margin: auto;height: 30px;font-size:12px;color:#3685f2">
|
||||
<span><a @click="saveSelfSubject">{{ $t('commons.save') }}</a></span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SubjectTemplateItem from './SubjectTemplateItem'
|
||||
import { querySubjectWithGroup, saveOrUpdateSubject, deleteSubject } from '@/api/panel/panel'
|
||||
import { mapState } from 'vuex'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
import { uuid } from 'vue-uuid'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'Slider',
|
||||
components: {
|
||||
SubjectTemplateItem
|
||||
},
|
||||
props: {
|
||||
initialSpeed: {
|
||||
type: Number,
|
||||
default: 30
|
||||
},
|
||||
initialInterval: {
|
||||
type: Number,
|
||||
default: 3
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sliders: [],
|
||||
slidersLoading: false,
|
||||
sliderWidth: 240,
|
||||
imgWidth: 240,
|
||||
currentIndex: 1,
|
||||
distance: -240,
|
||||
transitionEnd: true,
|
||||
speed: this.initialSpeed,
|
||||
saveSubjectVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerStyle() {
|
||||
return {
|
||||
transform: `translate3d(${this.distance}px, 0, 0)`
|
||||
}
|
||||
},
|
||||
interval() {
|
||||
return this.initialInterval * 1000
|
||||
},
|
||||
...mapState([
|
||||
'canvasStyleData'
|
||||
])
|
||||
},
|
||||
mounted() {
|
||||
this.querySubjectWithGroup()
|
||||
},
|
||||
methods: {
|
||||
subjectDelete(id) {
|
||||
deleteSubject(id).then(response => {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
showClose: true
|
||||
})
|
||||
this.querySubjectWithGroup()
|
||||
})
|
||||
},
|
||||
saveSelfSubject() {
|
||||
const canvasStyle = deepCopy(this.canvasStyleData)
|
||||
canvasStyle.themeId = uuid.v1()
|
||||
const request = {
|
||||
details: JSON.stringify(canvasStyle)
|
||||
}
|
||||
this.slidersLoading = true
|
||||
saveOrUpdateSubject(request).then(response => {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success',
|
||||
showClose: true
|
||||
})
|
||||
this.querySubjectWithGroup()
|
||||
}).catch(() => {
|
||||
this.slidersLoading = false
|
||||
})
|
||||
},
|
||||
querySubjectWithGroup() {
|
||||
const _this = this
|
||||
_this.slidersLoading = true
|
||||
querySubjectWithGroup({}).then(response => {
|
||||
_this.sliders = []
|
||||
_this.sliders = response.data
|
||||
_this.slidersLoading = false
|
||||
if (_this.sliders.length < _this.currentIndex) {
|
||||
_this.currentIndex = 1
|
||||
this.$emit('reload')
|
||||
}
|
||||
}).catch(() => {
|
||||
this.slidersLoading = false
|
||||
})
|
||||
},
|
||||
move(offset, direction, speed) {
|
||||
if (!this.transitionEnd) return
|
||||
this.transitionEnd = false
|
||||
direction === -1 ? this.currentIndex += offset / this.sliderWidth : this.currentIndex -= offset / this.sliderWidth
|
||||
if (this.currentIndex > this.sliders.length) this.currentIndex = 1
|
||||
if (this.currentIndex < 1) this.currentIndex = this.sliders.length
|
||||
|
||||
const destination = this.distance + offset * direction
|
||||
this.animate(destination, direction, speed)
|
||||
},
|
||||
animate(des, direc, speed) {
|
||||
if (this.temp) {
|
||||
window.clearInterval(this.temp)
|
||||
this.temp = null
|
||||
}
|
||||
this.temp = window.setInterval(() => {
|
||||
if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {
|
||||
this.distance += speed * direc
|
||||
} else {
|
||||
this.transitionEnd = true
|
||||
window.clearInterval(this.temp)
|
||||
this.distance = des
|
||||
if (des < -this.sliderWidth * this.sliders.length) this.distance = -this.sliderWidth
|
||||
if (des > -this.sliderWidth) this.distance = -this.sliderWidth * this.sliders.length
|
||||
}
|
||||
}, 20)
|
||||
},
|
||||
jump(index) {
|
||||
const direction = index - this.currentIndex >= 0 ? -1 : 1
|
||||
const offset = Math.abs(index - this.currentIndex) * this.sliderWidth
|
||||
const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed
|
||||
this.move(offset, direction, jumpSpeed)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
ol,ul{
|
||||
list-style: none;
|
||||
}
|
||||
#slider{
|
||||
text-align: center;
|
||||
}
|
||||
.window{
|
||||
position:relative;
|
||||
width:240px;
|
||||
height:208px;
|
||||
margin:0 auto;
|
||||
overflow:hidden;
|
||||
}
|
||||
.container{
|
||||
display:flex;
|
||||
position:absolute;
|
||||
}
|
||||
.left, .right{
|
||||
position:absolute;
|
||||
top:50%;
|
||||
transform:translateY(-50%);
|
||||
width:20px;
|
||||
height:20px;
|
||||
background-color:rgba(0,0,0,.3);
|
||||
border-radius:50%;
|
||||
cursor:pointer;
|
||||
}
|
||||
.left{
|
||||
padding-left:5px;
|
||||
padding-top:2px;
|
||||
}
|
||||
.right{
|
||||
padding-right:5px;
|
||||
padding-top:2px;
|
||||
}
|
||||
img{
|
||||
user-select: none;
|
||||
}
|
||||
.dots{
|
||||
position:absolute;
|
||||
bottom:10px;
|
||||
left:50%;
|
||||
transform:translateX(-50%);
|
||||
}
|
||||
.dots li{
|
||||
display:inline-block;
|
||||
width:7px;
|
||||
height:7px;
|
||||
margin:0 3px;
|
||||
border:1px solid white;
|
||||
border-radius:50%;
|
||||
background-color:#333;
|
||||
cursor:pointer;
|
||||
}
|
||||
.dots .dotted{
|
||||
background-color:orange;
|
||||
}
|
||||
.direction{
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<div class="subject-template">
|
||||
<div
|
||||
:class="[
|
||||
{
|
||||
['vertical-layout-selected']: themeSelected
|
||||
},
|
||||
'vertical-layout'
|
||||
]"
|
||||
@click.stop="subjectChange"
|
||||
>
|
||||
<i v-if="subjectItem.type==='self'" class="el-icon-error" @click.stop="subjectDelete" />
|
||||
<span v-show="themeSelected" class="el-icon-success theme-selected-icon" />
|
||||
<!-- 背景-->
|
||||
<div class="allBack" :style="customBackground" style="inset: 1px; position: absolute;" />
|
||||
<!-- 视图组件 背景-->
|
||||
<div style="inset: 17px 10px 10px; position: absolute;" :style="chartBackground" />
|
||||
<!-- 视图组件 主题-->
|
||||
<div style="inset: 20px 13px 15px; position: absolute;">
|
||||
<div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
|
||||
<!--柱形-->
|
||||
<div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
|
||||
<div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
|
||||
<div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundRight" />
|
||||
|
||||
<!--柱形-->
|
||||
<div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
|
||||
<div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
|
||||
<div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
|
||||
|
||||
<!--柱形-->
|
||||
<div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
|
||||
<div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
|
||||
<div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
|
||||
|
||||
<!--柱形-->
|
||||
<div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
|
||||
<div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
|
||||
<div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格表头颜色 -->
|
||||
<div style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;" :style="tableHeadBackground" />
|
||||
|
||||
<!-- 字体颜色 -->
|
||||
<div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;" @dblclick="setEdit">
|
||||
<div style=" background-color:#f7f8fa;color:#3d4d66;font-size:12px;height: 30px; line-height: 30px; text-align: center; white-space: pre; text-overflow: ellipsis; margin-left: 1px; margin-right: 1px;overflow: hidden">
|
||||
<el-input
|
||||
v-if="canEdit"
|
||||
ref="nameInput"
|
||||
v-model="subjectItem.name"
|
||||
size="mini"
|
||||
@blur="loseFocus()"
|
||||
/>
|
||||
<span v-if="!canEdit" style="margin-top: 8px" :title="subjectItem.name">{{ subjectItem.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { chartTransStr2Object } from '@/views/panel/panel'
|
||||
import { mapState } from 'vuex'
|
||||
import bus from '@/utils/bus'
|
||||
import { saveOrUpdateSubject } from '@/api/panel/panel'
|
||||
import { resetViewCacheCallBack } from '@/api/chart/chart'
|
||||
|
||||
export default {
|
||||
name: 'StyleTemplateItem',
|
||||
props: {
|
||||
subjectItem: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultSubject: {
|
||||
|
||||
},
|
||||
subjectItemDetails: null,
|
||||
canEdit: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
customBackground() {
|
||||
let style = {
|
||||
background: 'background: 0% 0% / cover rgb(255, 255, 255)'
|
||||
}
|
||||
if (this.subjectItemDetails) {
|
||||
if (this.subjectItemDetails.panel.backgroundType === 'image' && this.subjectItemDetails.panel.imageUrl) {
|
||||
style = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: `url(${this.subjectItemDetails.panel.imageUrl}) no-repeat`,
|
||||
'background-size': '100% 100% !important'
|
||||
}
|
||||
} else {
|
||||
style = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: this.subjectItemDetails.panel.color
|
||||
}
|
||||
}
|
||||
}
|
||||
return style
|
||||
},
|
||||
columnBackgroundLeft() {
|
||||
let style = {}
|
||||
if (this.subjectItemDetails) {
|
||||
style = {
|
||||
opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
|
||||
background: this.subjectItemDetails.chartInfo.chartColor.colors[0]
|
||||
}
|
||||
}
|
||||
return style
|
||||
},
|
||||
columnBackgroundMiddle() {
|
||||
let style = {}
|
||||
if (this.subjectItemDetails) {
|
||||
style = {
|
||||
opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
|
||||
background: this.subjectItemDetails.chartInfo.chartColor.colors[1]
|
||||
}
|
||||
}
|
||||
return style
|
||||
},
|
||||
columnBackgroundRight() {
|
||||
let style = {}
|
||||
if (this.subjectItemDetails) {
|
||||
style = {
|
||||
opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
|
||||
background: this.subjectItemDetails.chartInfo.chartColor.colors[2]
|
||||
}
|
||||
}
|
||||
return style
|
||||
},
|
||||
tableHeadBackground() {
|
||||
let style = {}
|
||||
if (this.subjectItemDetails) {
|
||||
style = {
|
||||
opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
|
||||
background: this.subjectItemDetails.chartInfo.chartColor.tableHeaderBgColor
|
||||
}
|
||||
}
|
||||
return style
|
||||
},
|
||||
tableFontColor() {
|
||||
let style = {}
|
||||
if (this.subjectItemDetails) {
|
||||
style = {
|
||||
background: this.subjectItemDetails.chartInfo.chartColor.tableFontColor
|
||||
}
|
||||
}
|
||||
return style
|
||||
},
|
||||
chartBackground() {
|
||||
let style = {}
|
||||
if (this.subjectItemDetails && this.subjectItemDetails.chartInfo.chartCommonStyle.backgroundColorSelect) {
|
||||
style = {
|
||||
background: this.subjectItemDetails.chartInfo.chartCommonStyle.color,
|
||||
opacity: this.subjectItemDetails.chartInfo.chartCommonStyle.alpha / 100
|
||||
}
|
||||
}
|
||||
return style
|
||||
},
|
||||
themeSelected() {
|
||||
return this.subjectItemDetails && this.subjectItemDetails.themeId === this.canvasStyleData.themeId
|
||||
},
|
||||
...mapState([
|
||||
'canvasStyleData'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
subjectItem: {
|
||||
handler(newVal, oldVla) {
|
||||
this.subjectItemDetails = chartTransStr2Object(JSON.parse(newVal.details), 'Y')
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
resize() {
|
||||
this.drawEcharts()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.subjectItemDetails = chartTransStr2Object(JSON.parse(this.subjectItem.details), 'Y')
|
||||
},
|
||||
methods: {
|
||||
subjectDelete() {
|
||||
this.$emit('subjectDelete', this.subjectItem.id)
|
||||
},
|
||||
subjectChange() {
|
||||
if (!this.themeSelected) {
|
||||
this.$confirm(this.$t('panel.theme_change_tips'), this.$t('panel.theme_change_warn'), {
|
||||
confirmButtonText: this.$t('commons.confirm'),
|
||||
cancelButtonText: this.$t('commons.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$store.commit('setCanvasStyle', JSON.parse(this.subjectItem.details))
|
||||
this.$store.commit('recordSnapshot', 'subjectChange')
|
||||
bus.$emit('onSubjectChange')
|
||||
}).catch(() => {
|
||||
// Do Nothing
|
||||
})
|
||||
}
|
||||
},
|
||||
templateEdit() {
|
||||
this.$emit('templateEdit', this.template)
|
||||
},
|
||||
handleDelete() {
|
||||
},
|
||||
// 双击事件
|
||||
setEdit() {
|
||||
if (this.subjectItem.type === 'self') {
|
||||
this.canEdit = true
|
||||
} else {
|
||||
this.$warning(this.$t('panel.subject_no_edit'))
|
||||
}
|
||||
// 将单元格变为输入框
|
||||
// // 聚焦到单元格
|
||||
setTimeout(() => {
|
||||
this.$refs['nameInput'].focus()
|
||||
}, 20)
|
||||
},
|
||||
// 当输入框失去焦点时不显示输入框
|
||||
loseFocus() {
|
||||
if (this.subjectItem.name && this.subjectItem.name.length > 0 && this.subjectItem.name.length < 20) {
|
||||
const request = {
|
||||
id: this.subjectItem.id,
|
||||
name: this.subjectItem.name
|
||||
}
|
||||
saveOrUpdateSubject(request).then(response => {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success',
|
||||
showClose: true
|
||||
})
|
||||
this.canEdit = false
|
||||
})
|
||||
} else {
|
||||
this.$warning(this.$t('panel.subject_name_not_null'))
|
||||
}
|
||||
},
|
||||
selectChange(callback, editCell) {
|
||||
if (!callback) {
|
||||
editCell.edit = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.allBack {
|
||||
background-size: 100% 100%!important;
|
||||
}
|
||||
.subject-template {
|
||||
width: 110px;
|
||||
height: 90px;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.demonstration {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 10px auto;
|
||||
width: 150px;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
|
||||
.vertical-layout {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
inset: 0px 0px 30px;
|
||||
width: 108px; height: 58px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
|
||||
border: solid 1px #fff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.vertical-layout-selected{
|
||||
border: solid 2px #4b8fdf;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.vertical-layout:hover {
|
||||
border: solid 1px #4b8fdf;
|
||||
border-radius: 3px;
|
||||
color: deepskyblue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vertical-layout > i{
|
||||
float: right;
|
||||
color: gray;
|
||||
margin: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vertical-layout > i:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.vertical-layout:hover > .el-icon-error {
|
||||
z-index: 10;
|
||||
display:block;
|
||||
}
|
||||
.vertical-layout>>>.el-icon-error {
|
||||
display:none
|
||||
}
|
||||
.theme-selected-icon {
|
||||
z-index: 2;
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
color: #4b8fdf;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<div class="subject-template">
|
||||
<div class="vertical-layout">
|
||||
<i class="el-icon-error" />
|
||||
<i class="el-icon-edit" />
|
||||
<!-- 背景-->
|
||||
<div style="inset: 0px; position: absolute;" :style="customBackground" />
|
||||
<!-- 视图组件 背景-->
|
||||
<div style="inset: 17px 10px 10px; position: absolute; background: 0% 0% / cover rgb(255, 255, 255);" />
|
||||
<!-- 视图组件 主题-->
|
||||
<div style="inset: 20px 13px 15px; position: absolute;">
|
||||
<div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
|
||||
<!--柱形-->
|
||||
<div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
|
||||
<div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
|
||||
<div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundRight" />
|
||||
|
||||
<!--柱形-->
|
||||
<div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
|
||||
<div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
|
||||
<div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
|
||||
|
||||
<!--柱形-->
|
||||
<div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
|
||||
<div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
|
||||
<div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
|
||||
|
||||
<!--柱形-->
|
||||
<div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
|
||||
<div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
|
||||
<div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格表头颜色 -->
|
||||
<div style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;" :style="tableHeadBackground" />
|
||||
|
||||
<!-- 字体颜色 -->
|
||||
<div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;">
|
||||
<div style=" background-color:#f7f8fa;color:#3d4d66;font-size:12px;height: 30px; line-height: 30px; text-align: center; white-space: pre; text-overflow: ellipsis; margin-left: 1px; margin-right: 1px;">
|
||||
<span style="margin-top: 8px">{{ subjectItem.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { chartTransStr2Object } from '@/views/panel/panel'
|
||||
export default {
|
||||
name: 'StyleTemplateItem',
|
||||
props: {
|
||||
subjectItem: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultSubject: {
|
||||
|
||||
},
|
||||
subjectItemDetails: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
customBackground() {
|
||||
let style = {
|
||||
background: '0% 0% / cover rgb(239, 241, 244)'
|
||||
}
|
||||
if (this.subjectItemDetails) {
|
||||
if (this.subjectItemDetails.panel.backgroundType === 'image' && this.subjectItemDetails.panel.imageUrl) {
|
||||
style = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: `url(${this.subjectItemDetails.panel.imageUrl}) no-repeat`
|
||||
}
|
||||
} else {
|
||||
style = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: this.subjectItemDetails.panel.color
|
||||
}
|
||||
}
|
||||
}
|
||||
return style
|
||||
},
|
||||
columnBackgroundLeft() {
|
||||
let style = {}
|
||||
if (this.subjectItemDetails) {
|
||||
style = {
|
||||
background: this.subjectItemDetails.chart.customAttr.color.colors[0]
|
||||
}
|
||||
}
|
||||
return style
|
||||
},
|
||||
columnBackgroundMiddle() {
|
||||
let style = {}
|
||||
if (this.subjectItemDetails) {
|
||||
style = {
|
||||
background: this.subjectItemDetails.chart.customAttr.color.colors[1]
|
||||
}
|
||||
}
|
||||
return style
|
||||
},
|
||||
columnBackgroundRight() {
|
||||
let style = {}
|
||||
if (this.subjectItemDetails) {
|
||||
style = {
|
||||
background: this.subjectItemDetails.chart.customAttr.color.colors[2]
|
||||
}
|
||||
}
|
||||
return style
|
||||
},
|
||||
tableHeadBackground() {
|
||||
let style = {}
|
||||
if (this.subjectItemDetails) {
|
||||
style = {
|
||||
background: this.subjectItemDetails.chart.customAttr.color.tableHeaderBgColor
|
||||
}
|
||||
}
|
||||
return style
|
||||
},
|
||||
tableFontColor() {
|
||||
let style = {}
|
||||
if (this.subjectItemDetails) {
|
||||
style = {
|
||||
background: this.subjectItemDetails.chart.customAttr.color.tableFontColor
|
||||
}
|
||||
}
|
||||
return style
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
subjectItem: {
|
||||
handler(newVal, oldVla) {
|
||||
this.subjectItemDetails = chartTransStr2Object(newVal.details, 'Y')
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
resize() {
|
||||
this.drawEcharts()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
templateDelete() {
|
||||
this.$alert('是否删除模板：' + this.template.name + '？', '', {
|
||||
confirmButtonText: '确认',
|
||||
callback: (action) => {
|
||||
if (action === 'confirm') {
|
||||
this.$emit('templateDelete', this.template.id)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
templateEdit() {
|
||||
this.$emit('templateEdit', this.template)
|
||||
},
|
||||
handleDelete() {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.subject-template {
|
||||
width: 110px;
|
||||
height: 90px;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.demonstration {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 10px auto;
|
||||
width: 150px;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
|
||||
.vertical-layout {
|
||||
overflow: hidden auto;
|
||||
position: absolute;
|
||||
inset: 0px 0px 30px;
|
||||
width: 108px; height: 58px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
|
||||
border: solid 1px #fff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.vertical-layout:hover {
|
||||
border: solid 1px #4b8fdf;
|
||||
border-radius: 3px;
|
||||
color: deepskyblue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vertical-layout > i{
|
||||
float: right;
|
||||
color: gray;
|
||||
margin: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vertical-layout > i:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.vertical-layout:hover > .el-icon-error {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.vertical-layout:hover > .el-icon-edit {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -8,7 +8,7 @@
|
||||
<slider v-if="sliderShow" @reload="sliderReload" />
|
||||
</div>
|
||||
<!--折叠面板-->
|
||||
<div v-if="collapseShow" style="margin: 10px;overflow-y: auto">
|
||||
<div v-if="collapseShow" style="margin: 12px;overflow-y: auto">
|
||||
<div>
|
||||
<el-collapse v-model="activeNames" @change="handleChange">
|
||||
<el-collapse-item :title="'整体配置'" name="panel">
|
||||
@ -155,7 +155,6 @@ export default {
|
||||
|
||||
.selector-div {
|
||||
background-color: var(--MainBG);
|
||||
margin: 5px
|
||||
}
|
||||
|
||||
.padding-lr {
|
||||
@ -184,4 +183,12 @@ export default {
|
||||
border-bottom: 1px solid #e8eaed
|
||||
}
|
||||
|
||||
::v-deep .el-collapse-item__header{
|
||||
font-weight: 500!important;
|
||||
font-size: 14px!important;
|
||||
color: var(--TextPrimary, #1F2329);
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user