|
@@ -16,8 +16,11 @@
|
|
<m-button type="orange" size="small" @click="onSave" :disabled="empty">保存图表</m-button>
|
|
<m-button type="orange" size="small" @click="onSave" :disabled="empty">保存图表</m-button>
|
|
</div>
|
|
</div>
|
|
</m-card>
|
|
</m-card>
|
|
- <m-card shadow="never" class="box-main-bottom" :bodyStyle="{ height: '100%', 'box-sizing': 'border-box' }">
|
|
|
|
|
|
+ <m-card ref="privateChartEditShowCardsRefs" shadow="never" class="box-main-bottom" :bodyStyle="{ height: '100%', 'box-sizing': 'border-box', position: 'relative' }">
|
|
<m-empty v-if="empty"></m-empty>
|
|
<m-empty v-if="empty"></m-empty>
|
|
|
|
+ <div v-else class="box-main-bottom-tool">
|
|
|
|
+ <span :class="`mdi mdi-fullscreen${tool.fullscreen ? '-exit' : ''}`" @click="onSetFullscreen"></span>
|
|
|
|
+ </div>
|
|
<PrivateChartEditShow
|
|
<PrivateChartEditShow
|
|
ref="privateChartEditShowRefs"
|
|
ref="privateChartEditShowRefs"
|
|
class="fullscreen"
|
|
class="fullscreen"
|
|
@@ -41,6 +44,10 @@
|
|
import PrivateChartEditShow from './privateChartEditShow.vue'
|
|
import PrivateChartEditShow from './privateChartEditShow.vue'
|
|
import PrivateChartEditType from './privateChartEditType.vue'
|
|
import PrivateChartEditType from './privateChartEditType.vue'
|
|
import PrivateChartEditParams from './privateChartEditParams.vue'
|
|
import PrivateChartEditParams from './privateChartEditParams.vue'
|
|
|
|
+import {
|
|
|
|
+ requestFullscreen,
|
|
|
|
+ exitFullscreen
|
|
|
|
+} from '@/utils/fullscreen'
|
|
import {
|
|
import {
|
|
getWebSetting,
|
|
getWebSetting,
|
|
saveWebSetting
|
|
saveWebSetting
|
|
@@ -54,6 +61,9 @@ export default {
|
|
},
|
|
},
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
|
|
+ tool: {
|
|
|
|
+ fullscreen: false
|
|
|
|
+ },
|
|
loading: false,
|
|
loading: false,
|
|
empty: false,
|
|
empty: false,
|
|
key: null,
|
|
key: null,
|
|
@@ -97,6 +107,14 @@ export default {
|
|
this.loading = false
|
|
this.loading = false
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ onSetFullscreen () {
|
|
|
|
+ this.tool.fullscreen = !this.tool.fullscreen
|
|
|
|
+ const $el = this.$refs.privateChartEditShowCardsRefs.$el
|
|
|
|
+ if (this.tool.fullscreen) {
|
|
|
|
+ return requestFullscreen($el)
|
|
|
|
+ }
|
|
|
|
+ exitFullscreen($el)
|
|
|
|
+ },
|
|
setData () {
|
|
setData () {
|
|
this.empty = false
|
|
this.empty = false
|
|
this.$refs.privateChartEditShowRefs.setData(this.data, this.key, this.option)
|
|
this.$refs.privateChartEditShowRefs.setData(this.data, this.key, this.option)
|
|
@@ -156,7 +174,7 @@ export default {
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
.box {
|
|
.box {
|
|
- $left: 146px;
|
|
|
|
|
|
+ $left: 100px;
|
|
$right: 650px;
|
|
$right: 650px;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
&-left {
|
|
&-left {
|
|
@@ -174,6 +192,25 @@ export default {
|
|
}
|
|
}
|
|
&-bottom {
|
|
&-bottom {
|
|
height: calc(100% - 84px);
|
|
height: calc(100% - 84px);
|
|
|
|
+ &-tool {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 24px;
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ z-index: 9;
|
|
|
|
+ span {
|
|
|
|
+ border: 1px solid #ddd;
|
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
|
+ color: #666;
|
|
|
|
+ width: 30px;
|
|
|
|
+ height: 30px;
|
|
|
|
+ // display: inline-block;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-right {
|
|
&-right {
|