Skip to content

D
dataease
提交 69ae877b authored 作者: wangjiahao's avatar wangjiahao
浏览文件
操作

feat:格式化代码

上级 da17802f
隐藏空白字符变更
内嵌 并排
正在显示 包含 119 行增加 和 115 行删除
frontend/src/views/panel/list/PanelViewShow.vue
浏览文件 @ 69ae877b
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<!--通用组件操作--> <!--通用组件操作-->
<el-tab-pane name="PublicTools"> <el-tab-pane name="PublicTools">
<span slot="label"><i class="el-icon-s-grid"/>组件</span> <span slot="label"><i class="el-icon-s-grid" />组件</span>
开发中... 开发中...
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<el-col class="panel-design"> <el-col class="panel-design">
<!--TODO 仪表盘设计公共设置区域--> <!--TODO 仪表盘设计公共设置区域-->
<el-row class="panel-design-head"> <el-row class="panel-design-head">
<span style="float: left;line-height: 40px; color: gray">名称：{{panelInfo.name}}</span> <span style="float: left;line-height: 40px; color: gray">名称：{{ panelInfo.name }}</span>
<span style="float: right;line-height: 40px;"> <span style="float: right;line-height: 40px;">
<el-button size="mini"> <el-button size="mini">
背景图 背景图
...@@ -46,12 +46,17 @@ ...@@ -46,12 +46,17 @@
</el-row> </el-row>
<el-row class="panel-design-show"> <el-row class="panel-design-show">
<div class="container" :style="panelDetails.gridStyle"> <div class="container" :style="panelDetails.gridStyle">
<vue-drag-resize-rotate v-for="panelDesign in panelDetails.panelDesigns" v-show="panelDesign.keepFlag" <vue-drag-resize-rotate
:key="panelDesign.id" v-for="panelDesign in panelDetails.panelDesigns"
:panel-design-id="panelDesign.id" :parent="true" @newStyle="newStyle" v-show="panelDesign.keepFlag"
@removeView="removeView"> :key="panelDesign.id"
:panel-design-id="panelDesign.id"
:parent="true"
@newStyle="newStyle"
@removeView="removeView"
>
<!--视图显示 panelDesign.componentType==='view'--> <!--视图显示 panelDesign.componentType==='view'-->
<chart-component v-if="panelDesign.componentType==='view'" :ref="panelDesign.id" :chart-id="panelDesign.id" :chart="panelDesign.chartView"/> <chart-component v-if="panelDesign.componentType==='view'" :ref="panelDesign.id" :chart-id="panelDesign.id" :chart="panelDesign.chartView" />
<!--组件显示（待开发）--> <!--组件显示（待开发）-->
...@@ -65,124 +70,123 @@ ...@@ -65,124 +70,123 @@
</template> </template>
<script> <script>
import {post, get} from '@/api/panel/panel' import { get } from '@/api/panel/panel'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import ChartComponent from '../../chart/components/ChartComponent' import ChartComponent from '../../chart/components/ChartComponent'
import VueDragResizeRotate from '@/components/vue-drag-resize-rotate' import VueDragResizeRotate from '@/components/vue-drag-resize-rotate'
import { uuid } from 'vue-uuid'; import { uuid } from 'vue-uuid'
export default {
name: 'PanelViewShow',
components: { draggable, ChartComponent, VueDragResizeRotate },
data() {
return {
panelDetails: {
viewsUsable: [],
panelDesigns: [],
gridStyle: null
},
gridStyleDefault: {
position: 'relative',
height: '100%',
width: '100%',
backgroundColor: '#808080',
background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)',
backgroundSize: '20px 20px, 20px 20px'
},
ViewActiveName: 'Views'
}
},
computed: {
panelInfo() {
return this.$store.state.panel.panelInfo
}
},
watch: {
panelInfo(newVal, oldVal) {
this.panelDesign(newVal.id)
}
},
created() {
// this.get(this.$store.state.chart.viewId);
},
mounted() {
const panelId = this.$store.state.panel.panelInfo.id
if (panelId) {
this.panelDesign(panelId)
}
},
activated() {
},
methods: {
// 加载公共组件
export default { // 加载panel design
name: 'PanelViewShow', panelDesign(panelId) {
components: {draggable, ChartComponent, VueDragResizeRotate}, get('panel/group/findOne/' + panelId).then(res => {
data() { const panelDetailsInfo = res.data
return { if (panelDetailsInfo) {
panelDetails: { this.panelDetails = panelDetailsInfo
viewsUsable: [], }
panelDesigns: [], if (!panelDetailsInfo.gridStyle) {
gridStyle: null this.panelDetails.gridStyle = this.gridStyleDefault
}, }
gridStyleDefault: { })
position: 'relative',
height: '100%',
width: '100%',
backgroundColor: '#808080',
background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)',
backgroundSize: '20px 20px, 20px 20px'
},
ViewActiveName: 'Views'
}
}, },
computed: { panelViewAdd(view) {
panelInfo() { const panelDesigns = this.panelDetails.panelDesigns
return this.$store.state.panel.panelInfo this.panelDetails.viewsUsable.forEach(function(item, index) {
} if (item.id === view.id) {
const newComponent = {
id: uuid.v1(),
keepFlag: true,
chartView: item,
componentType: 'view'
}
panelDesigns.push(newComponent)
}
})
}, },
watch: { removeView(panelDesignId) {
panelInfo(newVal, oldVal) { this.panelDetails.panelDesigns.forEach(function(panelDesign, index) {
this.panelDesign(newVal.id); if (panelDesign.id === panelDesignId) {
} panelDesign.keepFlag = false
}
})
}, },
created() { newStyle(viewId, newStyleInfo) {
// this.get(this.$store.state.chart.viewId); this.$nextTick(() => {
this.$refs[viewId][0].chartResize()
})
console.log(viewId)
console.log(JSON.stringify(newStyleInfo))
}, },
mounted() {
let panelId = this.$store.state.panel.panelInfo.id; // 左边往右边拖动时的事件
if (panelId) { start1(e) {
this.panelDesign(panelId); console.log(e)
}
}, },
activated() { end1(e) {
console.log(e)
}, },
methods: { // 右边往左边拖动时的事件
//加载公共组件 start2(e) {
console.log(e)
//加载panel design },
panelDesign(panelId) { end2(e) {
get('panel/group/findOne/' + panelId).then(res => { console.log(e)
let panelDetailsInfo = res.data; },
if (panelDetailsInfo) { // move回调方法
this.panelDetails = panelDetailsInfo; onMove(e, originalEvent) {
} console.log(e)
if (!panelDetailsInfo.gridStyle) { return true
this.panelDetails.gridStyle = this.gridStyleDefault; },
} preViewShow() {
});
},
panelViewAdd(view) {
let panelDesigns = this.panelDetails.panelDesigns;
this.panelDetails.viewsUsable.forEach(function (item, index) {
if (item.id === view.id) {
let newComponent = {
id: uuid.v1(),
keepFlag : true,
chartView: item,
componentType: 'view'
}
panelDesigns.push(newComponent)
}
});
},
removeView(panelDesignId) {
this.panelDetails.panelDesigns.forEach(function (panelDesign, index) {
if (panelDesign.id === panelDesignId) {
panelDesign.keepFlag = false
}
})
},
newStyle(viewId, newStyleInfo) {
this.$nextTick(() => {
this.$refs[viewId][0].chartResize()
})
console.log(viewId)
console.log(JSON.stringify(newStyleInfo))
},
// 左边往右边拖动时的事件
start1(e) {
console.log(e)
},
end1(e) {
console.log(e)
},
// 右边往左边拖动时的事件
start2(e) {
console.log(e)
},
end2(e) {
console.log(e)
},
// move回调方法
onMove(e, originalEvent) {
console.log(e)
return true
},
preViewShow(){
}
} }
} }
}
</script> </script>
<style scoped> <style scoped>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论