SafetyScreen-ui/src/views/Workbench/components/workbenchTemp.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" :proId="proId" @handlePieDialog="handlePieDialog"/>
                </div>
            </GridItem>
        </GridLayout>

        <common-dialog
          ref="dialogRef"
        >
        </common-dialog>
        <PieDialog ref="pieDialog" :proId="proId" />
        <TeamDialog ref="teamDialog" :proId="proId" />
        <LocationDialog ref="locationDialog" :proId="proId" />
    </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 LeftFive from '@/components/home/leftFive.vue'
import LeftSix from '@/components/home/leftSix.vue'
import LeftSeven from '@/components/home/leftSeven.vue'
import leftEight from '@/components/home/leftEight.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 PieDialog from '@/components/home/pieDialog.vue'
import TeamDialog from '@/components/home/teamDialog.vue'
import LocationDialog from '@/components/home/locationDialog.vue'
import {
  queryTableApi
} from '@/api/home/home'
import {
  querySubProjInfoApi
} from '@/api/substation/substation'
export default {
    props: {
        // layoutList: {
        //     type: Array,
        //     default: () => [
        //       // 第一行
        //     ],
        // },
        proId: {
            type: Number,
            default: undefined,
        }
    },
    components: {
        GridLayout: VueGridLayout.GridLayout,
        GridItem: VueGridLayout.GridItem,
        LeftOne,
        LeftTwo,
        LeftThree,
        RightOne,
        RightTwo,
        CountryMap,
        CommonDialog,
        LeftFive,
        LeftSix,
        LeftSeven,
        leftEight,
        PieDialog,
        TeamDialog,
        LocationDialog
    },
    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() {
      setTimeout(() => {
        console.log('created-->工程id', this.proId)
      }, 200)
      this.getGeoData()
    },
    // 监听工程id变化
    watch: {
      proId: {
        handler: function (val) {
          console.log('workbench--watch-->工程id', val)
        },
        immediate: true
      }
    },
    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,
            projectId: item.projectId,
            province: item.areaName,
            projName: item.projectName,
            devTypeNum: item.devTypeNum,
            devNum: item.devNum,
            successNum: item.successNum,
            errorNum: item.errorNum,
            itemStyle: {
              normal: {
                areaColor: '#7DDEFF'
              }
            },
            value: [
              Number(item.lon),
              Number(item.lat)
            ]
          }
        })
      },
      handlePieDialog(val) {
        if (val == 1) {
          this.$refs.pieDialog.openDialog(this.proId)
        } else if (val == 2) {
          this.$refs.teamDialog.openDialog(this.proId)
        } else {
          this.$refs.locationDialog.openDialog(this.proId)
        }
      }
    }
}
</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>