You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
1.9 KiB
95 lines
1.9 KiB
<template>
|
|
<div>
|
|
<grid-layout
|
|
id="grid-card"
|
|
class="gird-card"
|
|
:layout.sync="layoutList"
|
|
:col-num="12"
|
|
:row-height="40"
|
|
:is-draggable="false"
|
|
:is-resizable="false"
|
|
:is-mirrored="false"
|
|
:vertical-compact="true"
|
|
:margin="[10, 10]"
|
|
:auto-size="true"
|
|
:use-css-transforms="true"
|
|
>
|
|
<grid-item
|
|
v-for="item in layoutList"
|
|
:key="item.i"
|
|
:x="item.x"
|
|
:y="item.y"
|
|
:w="item.w"
|
|
:h="item.h"
|
|
:i="item.i"
|
|
style="touch-action: none"
|
|
>
|
|
<component
|
|
:is="item.component"
|
|
style="position: absolute; inset: 0 0 0 0"
|
|
@send-data="sendData"
|
|
/>
|
|
</grid-item>
|
|
</grid-layout>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import VueGridLayout from 'vue-grid-layout'
|
|
const files = require.context(
|
|
'@/views/system/DashboardComponents',
|
|
false,
|
|
/.vue$/
|
|
)
|
|
const cpns = files.keys().map((key) => {
|
|
return files(key).default || files(key)
|
|
})
|
|
const layout = cpns.map((item) => {
|
|
return {
|
|
...item.layout,
|
|
component: item
|
|
}
|
|
})
|
|
export default {
|
|
components: {
|
|
'GridLayout': VueGridLayout.GridLayout,
|
|
'GridItem': VueGridLayout.GridItem
|
|
},
|
|
data() {
|
|
return {
|
|
layoutList: [],
|
|
data: {
|
|
statistic: {}
|
|
}
|
|
}
|
|
},
|
|
computed: {},
|
|
created() {
|
|
this.$store.dispatch('app/getLayout').then(res => {
|
|
this.layoutList = res.map(item => {
|
|
layout.forEach(lay => {
|
|
lay.i === item.i ? item.component = lay.component : ''
|
|
})
|
|
return item
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
sendData(data) {
|
|
this.data.statistic = data
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@media (max-width: 768px) {
|
|
::v-deep .vue-grid-item {
|
|
width: 100% !important;
|
|
position: relative !important;
|
|
transform: none !important;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
</style>
|