262 lines
6.3 KiB
Vue
262 lines
6.3 KiB
Vue
|
<template>
|
||
|
|
<div class="workbench-edit" ref="workbenchEditRef">
|
||
|
|
<GridLayout
|
||
|
|
:layout.sync="layoutList"
|
||
|
|
:col-num="12"
|
||
|
|
:rowHeight="rowHeight"
|
||
|
|
:is-draggable="false"
|
||
|
|
:is-resizable="false"
|
||
|
|
:is-mirrored="false"
|
||
|
|
:vertical-compact="true"
|
||
|
|
:margin="[5, 5]"
|
||
|
|
>
|
||
|
|
<GridItem
|
||
|
|
v-for="item in layoutList"
|
||
|
|
:x="item.x"
|
||
|
|
:y="item.y"
|
||
|
|
:w="item.w"
|
||
|
|
:h="item.h"
|
||
|
|
:i="item.i"
|
||
|
|
:key="item.i"
|
||
|
|
class="gridItem"
|
||
|
|
>
|
||
|
|
<div class="item-box">
|
||
|
|
<component v-if="item.componentName === 'CountryMap'" :is="item.componentName" :send-geo="sendGeo"/>
|
||
|
|
<component v-else :is="item.componentName" @openDialog="handleDialog"/>
|
||
|
|
</div>
|
||
|
|
</GridItem>
|
||
|
|
</GridLayout>
|
||
|
|
|
||
|
|
<common-dialog
|
||
|
|
ref="dialogRef"
|
||
|
|
>
|
||
|
|
</common-dialog>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import VueGridLayout from 'vue-grid-layout'
|
||
|
|
import ItemOne from './item-one.vue'
|
||
|
|
import ItemTwo from './item-two.vue'
|
||
|
|
import ItemThree from './item-three.vue'
|
||
|
|
import ItemFour from './item-four.vue'
|
||
|
|
import ItemFive from './item-five.vue'
|
||
|
|
import ItemSix from './item-six.vue'
|
||
|
|
import LeftOne from '@/components/home/leftOne.vue'
|
||
|
|
import LeftTwo from '@/components/home/leftTwo.vue'
|
||
|
|
import LeftThree from '@/components/home/leftThree.vue'
|
||
|
|
import RightOne from '@/components/home/rightOne.vue'
|
||
|
|
import RightTwo from '@/components/home/rightTwo.vue'
|
||
|
|
import CountryMap from '@/components/home/countryMap.vue'
|
||
|
|
import CommonDialog from '@/components/home/commonDialog.vue'
|
||
|
|
import {
|
||
|
|
queryTableApi
|
||
|
|
} from '@/api/home/home'
|
||
|
|
import {
|
||
|
|
querySubProjInfoApi
|
||
|
|
} from '@/api/substation/substation'
|
||
|
|
export default {
|
||
|
|
/* props: {
|
||
|
|
layoutList: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [
|
||
|
|
// 第一行
|
||
|
|
],
|
||
|
|
},
|
||
|
|
}, */
|
||
|
|
components: {
|
||
|
|
GridLayout: VueGridLayout.GridLayout,
|
||
|
|
GridItem: VueGridLayout.GridItem,
|
||
|
|
LeftOne,
|
||
|
|
LeftTwo,
|
||
|
|
LeftThree,
|
||
|
|
RightOne,
|
||
|
|
RightTwo,
|
||
|
|
CountryMap,
|
||
|
|
CommonDialog
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
rowHeight: 30,
|
||
|
|
sendGeo: undefined,
|
||
|
|
layoutList: [ // 第一行
|
||
|
|
{
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
w: 3,
|
||
|
|
h: 4,
|
||
|
|
i: 0,
|
||
|
|
isAccord: '1*1',
|
||
|
|
componentName: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
x: 3,
|
||
|
|
y: 0,
|
||
|
|
w: 3,
|
||
|
|
h: 4,
|
||
|
|
i: 1,
|
||
|
|
isAccord: '1*1',
|
||
|
|
componentName: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
x: 6,
|
||
|
|
y: 0,
|
||
|
|
w: 3,
|
||
|
|
h: 4,
|
||
|
|
i: 2,
|
||
|
|
isAccord: '1*1',
|
||
|
|
componentName: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
x: 9,
|
||
|
|
y: 0,
|
||
|
|
w: 3,
|
||
|
|
h: 4,
|
||
|
|
i: 3,
|
||
|
|
isAccord: '1*1',
|
||
|
|
componentName: '',
|
||
|
|
},
|
||
|
|
|
||
|
|
// 第二行
|
||
|
|
{
|
||
|
|
x: 0,
|
||
|
|
y: 1,
|
||
|
|
w: 3,
|
||
|
|
h: 4,
|
||
|
|
i: 4,
|
||
|
|
isAccord: '1*1',
|
||
|
|
componentName: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
x: 3,
|
||
|
|
y: 1,
|
||
|
|
w: 3,
|
||
|
|
h: 4,
|
||
|
|
i: 5,
|
||
|
|
isAccord: '1*1',
|
||
|
|
componentName: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
x: 6,
|
||
|
|
y: 1,
|
||
|
|
w: 3,
|
||
|
|
h: 4,
|
||
|
|
i: 6,
|
||
|
|
isAccord: '1*1',
|
||
|
|
componentName: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
x: 9,
|
||
|
|
y: 1,
|
||
|
|
w: 3,
|
||
|
|
h: 4,
|
||
|
|
i: 7,
|
||
|
|
isAccord: '1*1',
|
||
|
|
componentName: '',
|
||
|
|
},
|
||
|
|
|
||
|
|
// 第三行
|
||
|
|
{
|
||
|
|
x: 0,
|
||
|
|
y: 2,
|
||
|
|
w: 3,
|
||
|
|
h: 4,
|
||
|
|
i: 8,
|
||
|
|
isAccord: '1*1',
|
||
|
|
componentName: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
x: 3,
|
||
|
|
y: 2,
|
||
|
|
w: 3,
|
||
|
|
h: 4,
|
||
|
|
i: 9,
|
||
|
|
isAccord: '1*1',
|
||
|
|
componentName: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
x: 6,
|
||
|
|
y: 2,
|
||
|
|
w: 3,
|
||
|
|
h: 4,
|
||
|
|
i: 10,
|
||
|
|
isAccord: '1*1',
|
||
|
|
componentName: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
x: 9,
|
||
|
|
y: 2,
|
||
|
|
w: 3,
|
||
|
|
h: 4,
|
||
|
|
i: 11,
|
||
|
|
isAccord: '1*1',
|
||
|
|
componentName: '',
|
||
|
|
},]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getGeoData()
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getTableData()
|
||
|
|
this.rowHeight = (this.$refs['workbenchEditRef'].clientHeight - 65) / 12
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleDialog(val) {
|
||
|
|
this.$refs.dialogRef.setOpen({
|
||
|
|
open: true,
|
||
|
|
param: val
|
||
|
|
})
|
||
|
|
},
|
||
|
|
async getTableData() {
|
||
|
|
let res = await queryTableApi()
|
||
|
|
this.layoutList = res.data
|
||
|
|
},
|
||
|
|
async getGeoData() {
|
||
|
|
let res = await querySubProjInfoApi()
|
||
|
|
console.log(res, 'geo')
|
||
|
|
this.sendGeo = res.data.data.map(item => {
|
||
|
|
return {
|
||
|
|
name: item.projectName,
|
||
|
|
province: item.areaName,
|
||
|
|
projName: item.projectName,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
areaColor: '#7DDEFF'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
value: [
|
||
|
|
Number(item.lon),
|
||
|
|
Number(item.lat)
|
||
|
|
]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.workbench-edit {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
// background-color: skyblue;
|
||
|
|
|
||
|
|
.left-content {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gridItem {
|
||
|
|
color: #000;
|
||
|
|
border: 1px solid #EFF2FC;
|
||
|
|
box-shadow: 3px 3px 3px #D9E0F3;
|
||
|
|
.item-box {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: #F3F7FF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|