<template>
    <div class="home" ref="home" style="overflow: hidden; height: 100%">
        <div class="dash">
            <el-row>
                <el-col style="padding-left: 0%">
                    <el-button
                        type="text"
                        :disabled="disp"
                        size="mini"
                        @click="buttoncli"
                        style="float: right; margin-right: 5px; height: 28px; color: #fff"
                    >
                        <i class="el-icon-s-help"></i>
                        全屏
                    </el-button>
                    <el-button
                        type="text"
                        size="mini"
                        @click="save"
                        style="float: right; margin-right: 10px; height: 28px; color: #fff"
                    >
                        <i class="el-icon-circle-check"></i>
                        保存
                    </el-button>
                    <el-button
                        type="text"
                        size="mini"
                        @click="back"
                        style="float: right; margin-right: 0px; height: 28px; color: #fff"
                    >
                        <i class="el-icon-refresh"></i>
                        重置
                    </el-button>
                    <el-button
                        type="text"
                        size="mini"
                        @click="configuration"
                        style="float: right; margin-right: 0px; height: 28px; color: #fff"
                    >
                        <i class="el-icon-menu"></i>
                        组件配置
                    </el-button>
                    <el-button
                        type="text"
                        size="mini"
                        @click="delpage"
                        style="float: right; margin-right: 0px; height: 28px; color: #fff"
                    >
                        <i class="el-icon-delete-solid"></i>
                        删除首页
                    </el-button>
                    <!-- <el-button
                      :plain="true"
                      type="primary"
                      size="mini"
                      style="float: right; margin-right: 0px; height: 28px"
                      @click="drawerBuju"
                      ><i class="el-icon-s-grid">自定义布局</i></el-button
                    > -->
                </el-col>
            </el-row>
            <div id="conmentId" v-if="zooninfalg" class="component overview_scroll">
                <grid-layout
                    :layout="layout"
                    :col-num="24"
                    :row-height="screen"
                    :autoSize="true"
                    :is-draggable="false"
                    :is-resizable="true"
                    :useCssTransforms="true"
                    :vertical-compact="true"
                    :margin="[5.5, 5]"
                    :use-css-transforms="true"
                    :style="vhhfalg ? '' : 'height:' + vhh + 'px;overflow-y:auto;overflow-x:hidden;cursor:pointer'"
                >
                    <grid-item
                        :id="item.component"
                        v-for="(item, ind) in layout"
                        :key="ind"
                        :x="item.x"
                        :y="item.y"
                        :w="item.w"
                        :h="item.h"
                        :i="item.i"
                        @move="moveEvent"
                        @moved="movedEvent"
                        class="griditem"
                    >
                        <el-row class="drag-title">
                            <el-form :inline="true" :model="formb" class="demo-form-inline">
                                <div style="display: flex">
                                    <div style="display: flex; justify-content: space-between; flex-grow: 24">
                                        <el-form-item>
                                            <span style="color: #fff; font-weight: bold">{{ item.i }}</span>
                                        </el-form-item>
                                    </div>
                                    <div style="display: flex; justify-content: space-between; flex-grow: 1">
                                        <el-form-item>
                                            <el-tooltip
                                                class="item"
                                                effect="dark"
                                                content="切换组件功能"
                                                placement="top"
                                            >
                                                <el-button
                                                    type="primary"
                                                    size="mini"
                                                    @click.native="handleCommand(item, ind)"
                                                    icon="el-icon-menu"
                                                    circle
                                                ></el-button>
                                            </el-tooltip>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-tooltip class="item" effect="dark" content="进入该功能" placement="top">
                                                <el-button
                                                    type="primary"
                                                    size="mini"
                                                    @click.native="goto(item)"
                                                    icon="el-icon-position"
                                                    circle
                                                ></el-button>
                                            </el-tooltip>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-tooltip class="item" effect="dark" content="放大组件" placement="top">
                                                <el-button
                                                    type="primary"
                                                    size="mini"
                                                    @click.native="zoomin(item)"
                                                    icon="el-icon-view"
                                                    circle
                                                ></el-button>
                                            </el-tooltip>
                                        </el-form-item>
                                    </div>
                                </div>
                            </el-form>
                        </el-row>
                        <el-row class="drag-content">
                            <el-col :span="24">
                                <component
                                    v-bind:is="item.component"
                                    :fatherMethod="getlayout"
                                    :item="item"
                                    :height="item.h"
                                ></component>
                            </el-col>
                        </el-row>
                    </grid-item>
                </grid-layout>
            </div>
            <!--放大当前组件-->
            <div id="conmentId" v-if="zoonfalg" class="component overview_scroll" style="overflow-y: auto">
                <grid-layout
                    :layout="zoondata"
                    :col-num="24"
                    :row-height="screen"
                    :autoSize="true"
                    :is-draggable="false"
                    :is-resizable="true"
                    :useCssTransforms="true"
                    :vertical-compact="true"
                    :margin="[5, 5]"
                    :use-css-transforms="true"
                    :style="vhhfalg ? '' : 'height:' + vhh + 'px;overflow-y:auto;overflow-x:hidden;cursor:pointer'"
                >
                    <grid-item
                        :id="item.component"
                        v-for="(item, ind) in zoondata"
                        :key="ind"
                        :x="0"
                        :y="0"
                        :w="24"
                        :h="24"
                        :i="item.i"
                        class="griditem"
                    >
                        <el-row class="drag-title">
                            <el-form :inline="true" :model="formb" class="demo-form-inline">
                                <el-form-item>
                                    <span style="color: #fff; font-weight: bold">{{ item.i }}</span>
                                </el-form-item>
                                <el-form-item style="float: right">
                                    <el-tooltip class="item" effect="dark" content="返回" placement="top">
                                        <el-button
                                            type="primary"
                                            size="mini"
                                            @click.native="backff"
                                            icon="el-icon-refresh-left"
                                            circle
                                        ></el-button>
                                    </el-tooltip>
                                </el-form-item>
                            </el-form>
                        </el-row>
                        <el-row class="drag-content">
                            <el-col :span="24">
                                <component
                                    v-bind:is="item.component"
                                    :fatherMethod="getlayout"
                                    :item2="item"
                                    :height2="item.h"
                                ></component>
                            </el-col>
                        </el-row>
                    </grid-item>
                </grid-layout>
            </div>
        </div>
        <div class="formatLayout">
            <el-dialog
                :close-on-click-modal="false"
                title="版式布局"
                :visible.sync="formatLayoutVisible"
                :show-close="false"
                custom-class="dashDialog"
                size="small"
            >
                <div class="content">
                    <el-row>
                        <el-col :span="22" :push="1">
                            <div class="header bg-purple-dark">选择版式布局</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="4" v-for="(item, index) in layTable" :key="item.id">
                            <div class="grid-content bg-purple-light" @click="layView(item)">
                                <img v-bind:src="item.src" />
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="formatLayoutVisible = false">取 消</el-button>
                </span>
            </el-dialog>
        </div>
        <!--切换组件-->
        <el-dialog :close-on-click-modal="false" title="功能组件" :visible.sync="dialogTableVisible" width="30%">
            <el-form label-width="110px" style="height: 80px">
                <el-form-item label="组件功能切换:">
                    <el-cascader
                        clearable
                        placeholder="试试搜索：指南"
                        filterable
                        style="width: 100%"
                        ref="xzCascader"
                        v-model="componentlistchange"
                        :options="componentData"
                        :props="defaultProps"
                        @change="componentchange"
                    ></el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="back">取消切换</el-button>
                <el-button type="primary" @click="submitcomp">确认提交</el-button>
            </span>
        </el-dialog>
        <!--配置首页-->
        <el-dialog :close-on-click-modal="false" title="配置首页" :visible.sync="dialogTableVisible1">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-tag type="primary">配置页名称:</el-tag>
                    <el-tag type="danger" style="color: red">注意:同版式布局最多只能配置3个首页</el-tag>
                    <!-- <div class="demo-input-suffix" style="margin-top: 15px">
                      设置页面名称:
                      设置首页图标:
                    </div> -->
                    <el-form :inline="false" style="margin-top: 10px">
                        <el-form-item label="设置页面名称:">
                            <el-input style="width: 70%" v-model="input"></el-input>
                        </el-form-item>
                        <el-form-item label="设置首页图标:">
                            <el-popover
                                placement="bottom-start"
                                width="460"
                                trigger="click"
                                @show="$refs['iconSelect'].reset()"
                            >
                                <IconSelect ref="iconSelect" @selected="handleIconSelected" />
                                <el-input
                                    slot="reference"
                                    v-model="icon"
                                    placeholder="点击选择图标"
                                    style="width: 70%; margin-top: 5px"
                                >
                                    <svg-icon
                                        v-if="icon"
                                        slot="prefix"
                                        :icon-class="icon"
                                        class="el-input__icon"
                                        style="height: 40px; width: 16px"
                                    />
                                    <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                                </el-input>
                            </el-popover>
                        </el-form-item>
                    </el-form>
                    <el-tag type="primary" style="margin-top: 15px">布局版式</el-tag>
                    <div class="demo-input-suffix" style="margin-top: 15px; margin-left: 2%">
                        <el-radio-group v-model="radio" style="margin-top: 15px; width: 100px" @change="changeRadio">
                            <el-radio :label="1">
                                常规模式1
                                <el-image :src="layou1tsrc"></el-image>
                                <span style="float: right; position: absolute; margin-left: 90%; font-weight: bold">
                                    (8个)
                                </span>
                            </el-radio>
                            <el-radio class="radio" :label="3">
                                常规模式2
                                <el-image :src="layou3tsrc"></el-image>
                                <span style="float: right; position: absolute; margin-left: 90%; font-weight: bold">
                                    (6个)
                                </span>
                            </el-radio>
                            <el-radio class="radio" :label="4">
                                常规模式3
                                <el-image :src="layou4tsrc"></el-image>
                                <span style="float: right; position: absolute; margin-left: 90%; font-weight: bold">
                                    (8个)
                                </span>
                            </el-radio>
                            <el-radio class="radio" :label="5">
                                常规模式4
                                <el-image :src="layou5tsrc"></el-image>
                                <span style="float: right; position: absolute; margin-left: 90%; font-weight: bold">
                                    (9个)
                                </span>
                            </el-radio>
                        </el-radio-group>
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-tag type="primary">组件选取:</el-tag>
                    <el-tag type="danger" style="color: red">
                        注意:请根据布局板式个数选取组件个数,不得小于版式个数
                    </el-tag>
                    <span style="float: right; position: absolute; right: 10px; font-weight: bold; color: green">
                        {{ numble }}(个)
                    </span>
                    <el-input
                        placeholder="输入关键字检索"
                        v-model="filterText"
                        clearable
                        style="width: 100%; margin-top: 10px"
                    >
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                    <div
                        class="overview_scroll"
                        style="margin-top: 10px; height: 400px; overflow-y: auto; overflow-x: hidden"
                    >
                        <!-- <el-tree
                          style="left: 20%"
                          ref="tree"
                          :default-expanded-keys="expandedKeys"
                          :data="menuOptions"
                          :props="defaultProps"
                          show-checkbox
                          node-key="id"
                          :check-strictly="checkStrictly"
                          @check="treeckeck"
                          highlight-current
                        /> -->

                        <el-tree
                            style="left: 20%"
                            ref="tree"
                            default-expand-all
                            :data="menuOptions"
                            :props="defaultProps"
                            show-checkbox
                            node-key="id"
                            :check-strictly="checkStrictly"
                            :filter-node-method="filterNode"
                            @check="treeckeck"
                            highlight-current
                        />
                    </div>
                </el-col>
                <el-col :span="24" style="margin-top: 20px; text-align: center">
                    <el-button class="el-icon-s-tools" type="primary" @click="organizpage" :disabled="disabled">
                        合成首页
                    </el-button>
                    <el-button class="el-icon-check" type="primary" @click="submit" :disabled="disabled">
                        确认提交
                    </el-button>
                </el-col>
            </el-row>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" title="删除配置" :visible.sync="dialogTableVisibled">
            <el-table
                header-cell-class-name="table_header"
                :header-cell-style="{
                    height: '25px',
                    padding: '0px'
                }"
                :row-style="{ height: '28px' }"
                :cell-style="{ padding: '0px' }"
                ref="multipleTable"
                :data="homepagelist"
                border
                style="width: 100%; margin-top: 10px"
            >
                <el-table-column align="center" label="页面名称" prop="name"></el-table-column>
                <el-table-column align="center" prop="path" label="页面路径"></el-table-column>
                <el-table-column align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.path !== '/dashboard/index'"
                            @click="deletepage(scope.row.id)"
                            class="el-icon-delete"
                            size="mini"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!--自定义布局首页-->
        <el-dialog
            :close-on-click-modal="false"
            title="自定义布局样式绘制"
            :visible.sync="dialogTableVisible2"
            width="90%"
            height="1000px"
        >
            <el-button :plain="true" type="primary" size="mini" @click="draweraddBuju" style="margin: 0 0 10px 0">
                <i class="el-icon-plus">添加布局容器</i>
            </el-button>
            <el-button :plain="true" type="primary" size="mini" @click="drawerdeleteBuju">
                <i class="el-icon-close">删除布局容器</i>
            </el-button>
            <el-button type="primary" size="mini" @click="drawerdeleteBuju" style="float: right">
                <i class="el-icon-circle-check">提交</i>
            </el-button>
            <el-button
                class="el-icon-s-tools"
                type="primary"
                size="mini"
                @click="organizpage"
                :disabled="disabled"
                style="float: right"
            >
                合成首页
            </el-button>
            <div class="component">
                <grid-layout
                    style="width: 49%; z-index: 100; background: #0f0f10; border: 1px solid #fff; float: left"
                    :layout="layout2"
                    :col-num="24"
                    :row-height="40"
                    :autoSize="true"
                    :is-draggable="true"
                    :is-resizable="true"
                    :useCssTransforms="true"
                    :vertical-compact="true"
                    :margin="[10, 10]"
                    :use-css-transforms="true"
                >
                    <grid-item
                        v-for="item in layout2"
                        :key="item.i"
                        :x="item.x"
                        :y="item.y"
                        :w="item.w"
                        :h="item.h"
                        :i="item.i"
                        @move="moveEventd"
                        @moved="movedEventd"
                        class="griditem"
                    >
                        <el-row class="drag-title">
                            <el-col :span="23">
                                <span style="color: #fff; font-weight: bold">
                                    配置组件{{ item.i }}-----------{{ item }}
                                </span>
                            </el-col>
                            <el-col :span="1" class="ico" style="cursor: pointer">
                                <el-dropdown trigger="click">
                                    <span class="el-dropdown-link">
                                        <i class="el-icon-arrow-down el-icon--right"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item>切换组件功能</el-dropdown-item>
                                        <el-dropdown-item @click.native="goto(item)">进入该功能</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </el-col>
                        </el-row>
                        <el-row class="drag-content">
                            <el-col :span="24">
                                <component v-bind:is="item.component"></component>
                            </el-col>
                        </el-row>
                    </grid-item>
                </grid-layout>
                <el-col :span="12" style="margin-top: 10px; float: left; margin-left: 10px">
                    <div class="demo-input-suffix" style="margin-top: 0px">
                        设置页面名称:
                        <el-input style="width: 660px" v-model="input1"></el-input>
                    </div>
                    <el-tag type="primary" style="margin-top: 10px">组件列表</el-tag>
                    <el-tag type="danger" style="color: red">注意:请根据布局板式个数选取组件个数</el-tag>
                    <el-table
                        stripe
                        ref="multipleTable"
                        :data="componentData"
                        border
                        style="width: 100%; margin-top: 10px"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column align="center" type="selection" width="55" prop="id"></el-table-column>
                        <el-table-column align="center" label="功能名称" prop="name"></el-table-column>
                        <el-table-column align="center" prop="code" label="组件名称"></el-table-column>
                    </el-table>
                </el-col>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import axios from 'axios'
import $ from 'jquery'
import { getMenus } from '@/utils/auth'
import screenfull from 'screenfull'
import IconSelect from '@/components/IconSelect'
import { homepage, addOverview, componentlist, homepath, detehomepage, updatehomepage } from '@/api/admin/user'

import user from '@/views/sys/user-boot/user/index.vue'

import vueGridLayout from 'vue-grid-layout'
var GridLayout = vueGridLayout.GridLayout
var GridItem = vueGridLayout.GridItem
export default {
    data() {
        return {
            disp: false,
            filterText: '',
            homepagelist: [],
            dialogTableVisibled: false,
            vhh: null,
            vhhfalg: false,
            formb: {},
            zooninfalg: true,
            zoonfalg: false,
            icon: '',
            zoondata: [],
            menuOptions: [],
            expandedKeys: [],
            menu: undefined,
            initialCheckedMenuIds: [], //初始选中值
            checkedMenuIds: [],
            isRoot: false, // 是否是超级管理员账户
            checkStrictly: true,
            defaultProps: {
                children: 'children',
                label: 'name',
                value: 'id',
                expandTrigger: 'hover'
            },
            screen: null,
            numble: 0,
            isFullscreen: false,
            dialogTableVisible: false,
            dialogTableVisible1: false,
            dialogTableVisible2: false,
            disabled: false,
            /*看板*/
            layout: [],
            layouttype: 'A',
            beforemove: {},
            aftermoved: {},
            formatLayoutVisible: false,
            layTable: [
                { id: 1, src: require('../../assets/sybju/A.png'), laytype: 'A' },
                { id: 2, src: require('../../assets/sybju/B.png'), laytype: 'AA' },
                { id: 3, src: require('../../assets/sybju/D.png'), laytype: 'AAA' },
                { id: 4, src: require('../../assets/sybju/C.png'), laytype: 'AB' },
                { id: 5, src: require('../../assets/sybju/E.png'), laytype: 'BA' },
                { id: 6, src: require('../../assets/sybju/G.png'), laytype: 'BA' },
                { id: 7, src: require('../../assets/sybju/H.png'), laytype: 'HA' }
            ],
            addDashVisiable: false,
            searchType: [
                { name: '所有', num: '46' },
                { name: '图表', num: '18' },
                { name: '列表', num: '17' },
                { name: '其他', num: '10' }
            ] /*看板搜索类型*/,
            searchIndex: 0,
            addDashInput: '',
            gadgetList: [],
            layou1tsrc: require('../../assets/sybju/A.png'),
            layou2tsrc: require('../../assets/sybju/B.png'),
            layou3tsrc: require('../../assets/sybju/C.png'),
            layou4tsrc: require('../../assets/sybju/D.png'),
            layou5tsrc: require('../../assets/sybju/E.png'),
            layou6tsrc: require('../../assets/sybju/G.png'),
            layou7tsrc: require('../../assets/sybju/H.png'),
            layout1: [
                //大屏1
                {
                    id: 1,
                    buju: [
                        { x: 0, y: 0, w: 7, h: 8, i: '1' },
                        { x: 7, y: 0, w: 10, h: 16, i: '2' },
                        { x: 17, y: 0, w: 7, h: 8, i: '3' },
                        { x: 0, y: 8, w: 7, h: 8, i: '4' },
                        { x: 17, y: 8, w: 7, h: 8, i: '5' },
                        { x: 0, y: 16, w: 7, h: 8, i: '6' },
                        { x: 7, y: 16, w: 10, h: 8, i: '7' },
                        { x: 17, y: 16, w: 7, h: 8, i: '8' }
                    ]
                },
                {
                    id: 2,
                    buju: [
                        { x: 0, y: 0, w: 7, h: 8, i: '1' },
                        { x: 7, y: 0, w: 10, h: 24, i: '2' },
                        { x: 17, y: 0, w: 7, h: 8, i: '3' },
                        { x: 0, y: 8, w: 7, h: 8, i: '4' },
                        { x: 17, y: 8, w: 7, h: 8, i: '5' },
                        { x: 0, y: 16, w: 7, h: 8, i: '6' },
                        { x: 17, y: 16, w: 7, h: 8, i: '7' }
                    ]
                },
                {
                    id: 3,
                    buju: [
                        { x: 0, y: 0, w: 12, h: 8, i: '1' },
                        { x: 12, y: 0, w: 12, h: 8, i: '2' },
                        { x: 0, y: 8, w: 12, h: 8, i: '3' },
                        { x: 12, y: 8, w: 12, h: 8, i: '4' },
                        { x: 0, y: 16, w: 12, h: 8, i: '5' },
                        { x: 12, y: 16, w: 12, h: 8, i: '6' }
                    ]
                },
                {
                    id: 4,
                    buju: [
                        { x: 0, y: 0, w: 6, h: 6, i: '1' },
                        { x: 6, y: 0, w: 6, h: 6, i: '2' },
                        { x: 12, y: 0, w: 6, h: 6, i: '3' },
                        { x: 18, y: 0, w: 6, h: 6, i: '4' },
                        { x: 0, y: 6, w: 12, h: 9, i: '5' },
                        { x: 12, y: 6, w: 12, h: 9, i: '6' },
                        { x: 0, y: 15, w: 12, h: 9, i: '7' },
                        { x: 12, y: 15, w: 12, h: 9, i: '8' }
                    ]
                },
                {
                    id: 5,
                    buju: [
                        { x: 0, y: 0, w: 8, h: 8, i: '1' },
                        { x: 8, y: 0, w: 8, h: 8, i: '2' },
                        { x: 16, y: 0, w: 8, h: 8, i: '3' },
                        { x: 0, y: 8, w: 8, h: 8, i: '4' },
                        { x: 8, y: 8, w: 8, h: 8, i: '5' },
                        { x: 16, y: 8, w: 8, h: 8, i: '6' },
                        { x: 0, y: 16, w: 8, h: 8, i: '7' },
                        { x: 8, y: 16, w: 8, h: 8, i: '8' },
                        { x: 16, y: 16, w: 8, h: 8, i: '9' }
                    ]
                },
                {
                    id: 6,
                    buju: [
                        { x: 0, y: 0, w: 24, h: 8, i: '1' },
                        { x: 0, y: 8, w: 6, h: 8, i: '2' },
                        { x: 6, y: 8, w: 18, h: 8, i: '3' },
                        { x: 0, y: 16, w: 8, h: 8, i: '4' },
                        { x: 8, y: 16, w: 8, h: 8, i: '5' },
                        { x: 16, y: 16, w: 8, h: 8, i: '6' }
                    ]
                },
                {
                    id: 7,
                    buju: [
                        { x: 0, y: 0, w: 6, h: 6, i: '1' },
                        { x: 6, y: 0, w: 6, h: 6, i: '2' },
                        { x: 12, y: 0, w: 6, h: 6, i: '3' },
                        { x: 18, y: 0, w: 6, h: 6, i: '4' },
                        { x: 0, y: 6, w: 12, h: 9, i: '5' },
                        { x: 12, y: 6, w: 12, h: 9, i: '6' },
                        { x: 0, y: 15, w: 24, h: 9, i: '7' }
                    ]
                }
            ],
            layout2: [
                { x: 0, y: 0, w: 6, h: 6, i: '自定义1' },
                { x: 6, y: 0, w: 6, h: 6, i: '自定义2' },
                { x: 12, y: 0, w: 6, h: 6, i: '自定义3' },
                { x: 18, y: 0, w: 6, h: 6, i: '自定义4' },
                { x: 4, y: 6, w: 24, h: 9, i: '自定义5' }
            ],
            options: [
                {
                    value: '/home/home1',
                    label: '/home/home1'
                },
                {
                    value: '/home/home2',
                    label: '/home/home2'
                },
                {
                    value: '/home/home3',
                    label: '/home/home3'
                },
                {
                    value: '/home/home4',
                    label: '/home/home4'
                },
                {
                    value: '/home/home5',
                    label: '/home/home5'
                },
                {
                    value: '/home/home6',
                    label: '/home/home6'
                }
            ],
            pathvalue: '',
            radio: null,
            input: '',
            input1: '',
            componentData: [],
            componentlist: [],
            componentlistchange: [],
            falgid: '',
            formList: [],
            menusArray: [],
            falg: true,
            device: 1,
            homepagelist: []
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        }
    },
    components: {
        areaconstf47: () => import('@/views/componentschild/areaconstf47'),
        areaconstitic: () => import('@/views/componentschild/areaconstitic'),
        areaconsttype: () => import('@/views/componentschild/areaconsttype'),
        areaconsttypetable: () => import('@/views/componentschild/areaconsttypetable'),
        areaconstyy: () => import('@/views/componentschild/areaconstyy'),
        areaconstyytable: () => import('@/views/componentschild/areaconstyytable'),
        areahotable: () => import('@/views/componentschild/areahotable'),
        areahottu: () => import('@/views/componentschild/areahottu'),
        areamontormap: () => import('@/views/componentschild/areamontormap'),
        areamontortable: () => import('@/views/componentschild/areamontortable'),
        areaseveritytu: () => import('@/views/componentschild/areaseveritytu'),
        areatransienttableJb: () => import('@/views/componentschild/areatransienttable-jb'),
        areatransienttable: () => import('@/views/componentschild/areatransienttable'),
        areaview: () => import('@/views/componentschild/areaview'),
        areaviewdydj: () => import('@/views/componentschild/areaviewdydj'),
        areaviewmonth: () => import('@/views/componentschild/areaviewmonth'),
        compevaluation: () => import('@/views/componentschild/compevaluation'),
        datantegritydiagram: () => import('@/views/componentschild/datantegritydiagram'),
        dstortionratest: () => import('@/views/componentschild/dstortionratest'),
        f47curveianalysisi: () => import('@/views/componentschild/f47curveianalysisi'),
        harmonicfz: () => import('@/views/componentschild/harmonicfz'),
        harmonicspectrum: () => import('@/views/componentschild/harmonicspectrum'),
        harmonictable: () => import('@/views/componentschild/harmonictable'),
        harmonictu: () => import('@/views/componentschild/harmonictu'),
        iticcurveianalysisi: () => import('@/views/componentschild/iticcurveianalysisi'),
        onliedataity: () => import('@/views/componentschild/onliedataity'),
        onlinerate: () => import('@/views/componentschild/onlinerate'),
        operationanalysis: () => import('@/views/componentschild/operationanalysis'),
        overviewdistrib: () => import('@/views/componentschild/overviewdistrib'),
        powerquality: () => import('@/views/componentschild/powerquality'),
        powerqualitybg: () => import('@/views/componentschild/powerqualitybg'),
        powerqualitymap: () => import('@/views/componentschild/powerqualitymap'),
        sagdistribution: () => import('@/views/componentschild/sagdistribution'),
        seadsstatestandard: () => import('@/views/componentschild/seadsstatestandard'),
        steadyratechart: () => import('@/views/componentschild/steadyratechart'),
        steadystaterate: () => import('@/views/componentschild/steadystaterate'),
        tenharmonictabletu: () => import('@/views/componentschild/tenharmonictabletu'),
        terminalconts: () => import('@/views/componentschild/terminalconts'),
        terminalstatus: () => import('@/views/componentschild/terminalstatus'),
        terminaonlinetu: () => import('@/views/componentschild/terminaonlinetu'),
        terminaoptstatustu: () => import('@/views/componentschild/terminaoptstatustu'),
        timedistribution: () => import('@/views/componentschild/timedistribution'),
        voltagecause: () => import('@/views/componentschild/voltagecause'),
        voltagesagdensity: () => import('@/views/componentschild/voltagesagdensity'),
        voltagesagtable: () => import('@/views/componentschild/voltagesagtable'),
        voltagetype: () => import('@/views/componentschild/voltagetype'),
        areaseveritytable: () => import('@/views/componentschild/areaseveritytable'),
        compentwuqutu: () => import('@/views/componentschild/compentwuqutu'),
        areamontortu: () => import('@/views/componentschild/areamontortu'),
        wtzbtjbg: () => import('@/views/componentschild/wtzbtjbg'),
        wtzbcbmxbg: () => import('@/views/componentschild/wtzbcbmxbg'),
        zwqyzbwqt: () => import('@/views/componentschild/zwqyzbwqt'),
        IconSelect,
        GridLayout,
        GridItem,
        user
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.getlayout()
        this.getcomponent()
        var menuslist = window.sessionStorage.getItem('menus')

        var menusArray = eval('(' + menuslist + ')')
        this.menusArray = menusArray[0].children
        // setTimeout(() => {
        //   this.chilheight = this.$refs.this.refzhi.height;
        //   console.log('测试高度',this.chilheight)
        // },0)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vhh = document.body.clientHeight - 123
            this.screen = window.sessionStorage.getItem('appheight') / 27.2
        },
        //过滤
        filterNode(value, data, node) {
            if (!value) {
                return true
            }
            let _array = [] //这里使用数组存储 只是为了存储值。
            this.getReturnNode(node, _array, value)
            let result = false
            _array.forEach(item => {
                result = result || item
            })
            return result
        },
        getReturnNode(node, _array, value) {
            let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1
            isPass ? _array.push(isPass) : ''
            this.index++
            if (!isPass && node.name != 1 && node.parent) {
                this.getReturnNode(node.parent, _array, value)
            }
        },
        delpage() {
            this.dialogTableVisibled = true
        },
        zoomin(item) {
            this.disp = true
            item.w = 24
            item.h = 24
            this.zoondata = []
            this.zoondata.push(item)
            this.zooninfalg = false
            this.zoonfalg = true
        },
        backff() {
            this.disp = false
            this.zooninfalg = true
            this.zoonfalg = false
            this.getlayout()
        },
        treeckeck() {
            let arr = []
            const checkedMenuIds = this.$refs.tree.getCheckedNodes(false, true).map(node => node)
            // checkedMenuIds.forEach(item=>{
            //   item.children.forEach(item2=>{
            //     arr.push(item2.children)
            //   })
            // })
            this.componentlist = checkedMenuIds
            this.numble = this.componentlist.length
        },
        handleConpent() {
            componentlist().then(response => {
                this.menuOptions = response.data
                this.expandedKeys = this.menuOptions.map(node => node.id) //展开所有节点
            })
        },
        draweraddBuju() {
            var x = Math.floor(Math.random() * 10)
            var y = Math.floor(Math.random() * 10)
            var i = Math.floor(Math.random() * 10)
            this.layout2.push({ x: x, y: y, w: 24, h: 9, i: i })
        },
        drawerdeleteBuju() {
            this.layout2.pop()
        },
        //下拉框选取组件
        componentchange(val) {
            const obj = this.$refs['xzCascader'].getCheckedNodes() //标签上定义的 ref值

            //console.log("选中的行政区 obj.data=", obj[0].data.code, obj[0].data.name, obj[0].data.path);
            // 打印出当前选择的value所对应的对象
            let v = obj[0].data.code
            let m = obj[0].data.name
            let p = obj[0].data.path

            for (var i = 0; i < this.layout.length; i++) {
                if (i == this.falgid) {
                    // this.layout[i].component = "";
                    this.layout[i].component = v
                    this.layout[i].i = m
                    this.layout[i].path = p
                }
            }
        },
        //常规布局判断使用当前用户使用的驾驶舱逻辑
        changeRadio(val) {
            //获取的结果
            var arr = []
            //大屏模式1
            if (val == 1) {
                //大屏模式2
                let path = '/home/screen1'
                homepath(path).then(response => {
                    arr = response.data
                    if (arr.length == 0) {
                        this.disabled = false
                        this.pathvalue = '/home/screen1/home1'
                    } else if (arr.length == 1) {
                        this.disabled = false
                        for (var i = 0; i < arr.length; i++) {
                            if (arr[i] == '/home/screen1/home1') {
                                this.pathvalue = '/home/screen1/home2'
                            } else if (arr[i] == '/home/screen1/home2') {
                                this.pathvalue = '/home/screen1/home3'
                            } else if (arr[i] == '/home/screen1/home3') {
                                this.pathvalue = '/home/screen1/home1'
                            }
                        }
                    } else if (arr.length == 2) {
                        this.disabled = false
                        for (var i = 0; i < arr.length; i++) {
                            if (
                                (arr[i] == '/home/screen1/home1' && arr[i + 1] == '/home/screen1/home2') ||
                                (arr[i] == '/home/screen1/home2' && arr[i + 1] == '/home/screen1/home1')
                            ) {
                                this.pathvalue = '/home/screen1/home3'
                            } else if (
                                (arr[i] == '/home/screen1/home2' && arr[i + 1] == '/home/screen1/home3') ||
                                (arr[i] == '/home/screen1/home3' && arr[i + 1] == '/home/screen1/home2')
                            ) {
                                this.pathvalue = '/home/screen1/home1'
                            } else if (
                                (arr[i] == '/home/screen1/home3' && arr[i + 1] == '/home/screen1/home1') ||
                                (arr[i] == '/home/screen1/home1' && arr[i + 1] == '/home/screen1/home3')
                            ) {
                                this.pathvalue = '/home/screen1/home2'
                            }
                        }
                    } else if (arr.length == 3) {
                        this.$message.warning('该布局最多3个已被使用完了')
                        this.disabled = true
                    }
                })
            } else if (val == 2) {
                //大屏模式2
                let path = '/home/screen2'
                homepath(path).then(response => {
                    arr = response.data
                    if (arr.length == 0) {
                        this.disabled = false
                        this.pathvalue = '/home/screen2/home1'
                    } else if (arr.length == 1) {
                        this.disabled = false
                        for (var i = 0; i < arr.length; i++) {
                            if (arr[i] == '/home/screen2/home1') {
                                this.pathvalue = '/home/screen2/home2'
                            } else if (arr[i] == '/home/screen2/home2') {
                                this.pathvalue = '/home/screen2/home3'
                            } else if (arr[i] == '/home/screen2/home3') {
                                this.pathvalue = '/home/screen2/home1'
                            }
                        }
                    } else if (arr.length == 2) {
                        this.disabled = false
                        for (var i = 0; i < arr.length; i++) {
                            if (
                                (arr[i] == '/home/screen2/home1' && arr[i + 1] == '/home/screen2/home2') ||
                                (arr[i] == '/home/screen2/home2' && arr[i + 1] == '/home/screen2/home1')
                            ) {
                                this.pathvalue = '/home/screen2/home3'
                            } else if (
                                (arr[i] == '/home/screen2/home2' && arr[i + 1] == '/home/screen2/home3') ||
                                (arr[i] == '/home/screen2/home3' && arr[i + 1] == '/home/screen2/home2')
                            ) {
                                this.pathvalue = '/home/screen2/home1'
                            } else if (
                                (arr[i] == '/home/screen2/home3' && arr[i + 1] == '/home/screen2/home1') ||
                                (arr[i] == '/home/screen2/home1' && arr[i + 1] == '/home/screen2/home3')
                            ) {
                                this.pathvalue = '/home/screen2/home2'
                            }
                        }
                    } else if (arr.length == 3) {
                        this.$message.warning('该布局最多3个已被使用完了')
                        this.disabled = true
                    }
                })
            } else if (val == 3) {
                //常规模式1
                let path = '/home/buju1'
                homepath(path).then(response => {
                    arr = response.data
                    if (arr.length == 0) {
                        this.disabled = false
                        this.pathvalue = '/home/buju1/home1'
                    } else if (arr.length == 1) {
                        this.disabled = false
                        for (var i = 0; i < arr.length; i++) {
                            if (arr[i] == '/home/buju1/home1') {
                                this.pathvalue = '/home/buju1/home2'
                            } else if (arr[i] == '/home/buju1/home2') {
                                this.pathvalue = '/home/buju1/home3'
                            } else if (arr[i] == '/home/buju1/home3') {
                                this.pathvalue = '/home/buju1/home1'
                            }
                        }
                    } else if (arr.length == 2) {
                        this.disabled = false
                        for (var i = 0; i < arr.length; i++) {
                            if (
                                (arr[i] == '/home/buju1/home1' && arr[i + 1] == '/home/buju1/home2') ||
                                (arr[i] == '/home/buju1/home2' && arr[i + 1] == '/home/buju1/home1')
                            ) {
                                this.pathvalue = '/home/buju1/home3'
                            } else if (
                                (arr[i] == '/home/buju1/home2' && arr[i + 1] == '/home/buju1/home3') ||
                                (arr[i] == '/home/buju1/home3' && arr[i + 1] == '/home/buju1/home2')
                            ) {
                                this.pathvalue = '/home/buju1/home1'
                            } else if (
                                (arr[i] == '/home/buju1/home3' && arr[i + 1] == '/home/buju1/home1') ||
                                (arr[i] == '/home/buju1/home1' && arr[i + 1] == '/home/buju1/home3')
                            ) {
                                this.pathvalue = '/home/buju1/home2'
                            }
                        }
                    } else if (arr.length == 3) {
                        this.$message.warning('该布局最多3个已被使用完了')
                        this.disabled = true
                    }
                })
            } else if (val == 4) {
                //常规模式2
                let path = '/home/buju2'
                homepath(path).then(response => {
                    arr = response.data

                    if (arr.length == 0) {
                        this.disabled = false
                        this.pathvalue = '/home/buju2/home1'
                    } else if (arr.length == 1) {
                        this.disabled = false
                        for (var i = 0; i < arr.length; i++) {
                            if (arr[i] == '/home/buju2/home1') {
                                this.pathvalue = '/home/buju2/home2'
                            } else if (arr[i] == '/home/buju2/home2') {
                                this.pathvalue = '/home/buju2/home3'
                            } else if (arr[i] == '/home/buju2/home3') {
                                this.pathvalue = '/home/buju2/home1'
                            }
                        }
                    } else if (arr.length == 2) {
                        this.disabled = false
                        for (var i = 0; i < arr.length; i++) {
                            if (
                                (arr[i] == '/home/buju2/home1' && arr[i + 1] == '/home/buju2/home2') ||
                                (arr[i] == '/home/buju2/home2' && arr[i + 1] == '/home/buju2/home1')
                            ) {
                                this.pathvalue = '/home/buju2/home3'
                            } else if (
                                (arr[i] == '/home/buju2/home2' && arr[i + 1] == '/home/buju2/home3') ||
                                (arr[i] == '/home/buju2/home3' && arr[i + 1] == '/home/buju2/home2')
                            ) {
                                this.pathvalue = '/home/buju2/home1'
                            } else if (
                                (arr[i] == '/home/buju2/home3' && arr[i + 1] == '/home/buju2/home1') ||
                                (arr[i] == '/home/buju2/home1' && arr[i + 1] == '/home/buju2/home3')
                            ) {
                                this.pathvalue = '/home/buju2/home2'
                            }
                        }
                    } else if (arr.length == 3) {
                        this.$message.warning('该布局最多3个已被使用完了')
                        this.disabled = true
                    }
                })
            } else if (val == 5) {
                let path = '/home/buju3'
                homepath(path).then(response => {
                    arr = response.data

                    //常规模式3
                    if (arr.length == 0) {
                        this.disabled = false
                        this.pathvalue = '/home/buju3/home1'
                    } else if (arr.length == 1) {
                        this.disabled = false
                        for (var i = 0; i < arr.length; i++) {
                            if (arr[i] == '/home/buju3/home1') {
                                this.pathvalue = '/home/buju3/home2'
                            } else if (arr[i] == '/home/buju3/home2') {
                                this.pathvalue = '/home/buju3/home3'
                            } else if (arr[i] == '/home/buju3/home3') {
                                this.pathvalue = '/home/buju3/home1'
                            }
                        }
                    } else if (arr.length == 2) {
                        this.disabled = false
                        for (var i = 0; i < arr.length; i++) {
                            if (
                                (arr[i] == '/home/buju3/home1' && arr[i + 1] == '/home/buju3/home2') ||
                                (arr[i] == '/home/buju3/home2' && arr[i + 1] == '/home/buju3/home1')
                            ) {
                                this.pathvalue = '/home/buju3/home3'
                            } else if (
                                (arr[i] == '/home/buju3/home2' && arr[i + 1] == '/home/buju3/home3') ||
                                (arr[i] == '/home/buju3/home3' && arr[i + 1] == '/home/buju3/home2')
                            ) {
                                this.pathvalue = '/home/buju3/home1'
                            } else if (
                                (arr[i] == '/home/buju3/home3' && arr[i + 1] == '/home/buju3/home1') ||
                                (arr[i] == '/home/buju3/home1' && arr[i + 1] == '/home/buju3/home3')
                            ) {
                                this.pathvalue = '/home/buju3/home2'
                            }
                        }
                    } else if (arr.length == 3) {
                        this.$message.warning('该布局最多3个已被使用完了')
                        this.disabled = true
                    }
                })
            } else if (val == 6) {
                let path = '/home/buju4'
                homepath(path).then(response => {
                    arr = response.data

                    //常规模式4
                    if (arr.length == 0) {
                        this.disabled = false
                        this.pathvalue = '/home/buju4/home1'
                    } else if (arr.length == 1) {
                        this.disabled = false
                        for (var i = 0; i < arr.length; i++) {
                            if (arr[i] == '/home/buju4/home1') {
                                this.pathvalue = '/home/buju4/home2'
                            } else if (arr[i] == '/home/buju4/home2') {
                                this.pathvalue = '/home/buju4/home3'
                            } else if (arr[i] == '/home/buju4/home3') {
                                this.pathvalue = '/home/buju4/home1'
                            }
                        }
                    } else if (arr.length == 2) {
                        this.disabled = false
                        for (var i = 0; i < arr.length; i++) {
                            if (
                                (arr[i] == '/home/buju4/home1' && arr[i + 1] == '/home/buju4/home2') ||
                                (arr[i] == '/home/buju4/home2' && arr[i + 1] == '/home/buju4/home1')
                            ) {
                                this.pathvalue = '/home/buju4/home3'
                            } else if (
                                (arr[i] == '/home/buju4/home2' && arr[i + 1] == '/home/buju4/home3') ||
                                (arr[i] == '/home/buju4/home3' && arr[i + 1] == '/home/buju4/home2')
                            ) {
                                this.pathvalue = '/home/buju4/home1'
                            } else if (
                                (arr[i] == '/home/buju4/home3' && arr[i + 1] == '/home/buju4/home1') ||
                                (arr[i] == '/home/buju4/home1' && arr[i + 1] == '/home/buju4/home3')
                            ) {
                                this.pathvalue = '/home/buju4/home2'
                            }
                        }
                    } else if (arr.length == 3) {
                        this.$message.warning('该布局最多3个已被使用完了')
                        this.disabled = true
                    }
                })
            } else if (val == 7) {
                let path = '/home/buju5'
                homepath(path).then(response => {
                    arr = response.data

                    //常规模式5
                    if (arr.length == 0) {
                        this.disabled = false
                        this.pathvalue = '/home/buju5/home1'
                    } else if (arr.length == 1) {
                        this.disabled = false
                        for (var i = 0; i < arr.length; i++) {
                            if (arr[i] == '/home/buju5/home1') {
                                this.pathvalue = '/home/buju5/home2'
                            } else if (arr[i] == '/home/buju5/home2') {
                                this.pathvalue = '/home/buju5/home3'
                            } else if (arr[i] == '/home/buju5/home3') {
                                this.pathvalue = '/home/buju5/home1'
                            }
                        }
                    } else if (arr.length == 2) {
                        this.disabled = false
                        for (var i = 0; i < arr.length; i++) {
                            if (
                                (arr[i] == '/home/buju5/home1' && arr[i + 1] == '/home/buju5/home2') ||
                                (arr[i] == '/home/buju5/home2' && arr[i + 1] == '/home/buju5/home1')
                            ) {
                                this.pathvalue = '/home/buju5/home3'
                            } else if (
                                (arr[i] == '/home/buju5/home2' && arr[i + 1] == '/home/buju5/home3') ||
                                (arr[i] == '/home/buju5/home3' && arr[i + 1] == '/home/buju5/home2')
                            ) {
                                this.pathvalue = '/home/buju5/home1'
                            } else if (
                                (arr[i] == '/home/buju5/home3' && arr[i + 1] == '/home/buju5/home1') ||
                                (arr[i] == '/home/buju5/home1' && arr[i + 1] == '/home/buju5/home3')
                            ) {
                                this.pathvalue = '/home/buju5/home2'
                            }
                        }
                    } else if (arr.length == 3) {
                        this.$message.warning('该布局最多3个已被使用完了')
                        this.disabled = true
                    }
                })
            }
        },
        //自定义布局逻辑
        drawerBuju() {
            this.dialogTableVisible2 = true
        },
        back() {
            this.getlayout()
        },
        goto(item) {
            this.$router.push({ path: item.path })
        },
        submitcomp() {
            this.dialogTableVisible = false
        },
        //获取布局
        getlayout() {
            homepage().then(response => {
                this.homepagelist = []
                this.homepagelist = response.data
                const data = response.data
                for (var i = 0; i < data.length; i++) {
                    if (data[i].path == '/dashboard/index') {
                        this.layout = eval('(' + data[i].layout + ')')
                        return
                    }
                }
            })
        },
        //获取组件
        getcomponent() {
            componentlist().then(response => {
                var arr = []
                for (var i = 0; i < response.data.length; i++) {
                    response.data[i].code = 'aaa'
                    for (var j = 0; j < response.data[i].children.length; j++) {
                        response.data[i].children[j].code = 'aaa'
                        for (var k = 0; k < response.data[i].children[j].children.length; k++) {
                            arr.push(response.data[i].children[j].children[k])
                        }
                        // arr.push(response.data[i].children[j]);
                    }
                }
                response.data.forEach(item => {
                    item.children.forEach(item1 => {
                        item1.children.forEach(item2 => {
                            delete item2.children
                        })
                    })
                })
                this.componentData = response.data
                this.menuOptions = response.data
                this.expandedKeys = this.menuOptions.map(node => node.id)
            })
        },
        //合成首页
        organizpage() {
            var arr = []
            for (var n = 0; n < this.componentlist.length; n++) {
                if (this.componentlist[n].code != 'aaa') {
                    arr.push(this.componentlist[n])
                }
            }
            this.componentlist = arr
            if (this.input != '') {
                if (this.radio != null) {
                    if (this.radio == 1) {
                        if (this.componentlist.length >= 8) {
                            for (var j = 0; j < this.componentlist.length; j++) {
                                for (var i = 0; i < this.layout1[0].buju.length; i++) {
                                    this.layout1[0].buju[i].i = this.componentlist[i].name
                                    this.layout1[0].buju[i].component = this.componentlist[i].code
                                    this.layout1[0].buju[i].path = this.componentlist[i].path
                                    this.layout1[0].buju[i].functionGroup = this.componentlist[i].functionGroup
                                }
                            }
                            this.formList = this.layout1[0].buju

                            this.$message.success('合成成功，请确认提交录入数据库')
                        } else {
                            this.$message.warning('选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数')
                        }
                    } else if (this.radio == 2) {
                        if (this.componentlist.length >= 7) {
                            for (var j = 0; j < this.componentlist.length; j++) {
                                for (var i = 0; i < this.layout1[1].buju.length; i++) {
                                    this.layout1[1].buju[i].i = this.componentlist[i].name
                                    this.layout1[1].buju[i].component = this.componentlist[i].code
                                    this.layout1[1].buju[i].path = this.componentlist[i].path
                                    this.layout1[1].buju[i].functionGroup = this.componentlist[i].functionGroup
                                }
                            }
                            this.formList = this.layout1[1].buju

                            this.$message.success('合成成功，请确认提交录入数据库')
                        } else {
                            this.$message.warning('选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数')
                        }
                    } else if (this.radio == 3) {
                        if (this.componentlist.length >= 6) {
                            for (var j = 0; j < this.componentlist.length; j++) {
                                for (var i = 0; i < this.layout1[2].buju.length; i++) {
                                    this.layout1[2].buju[i].i = this.componentlist[i].name
                                    this.layout1[2].buju[i].component = this.componentlist[i].code
                                    this.layout1[2].buju[i].path = this.componentlist[i].path
                                    this.layout1[2].buju[i].functionGroup = this.componentlist[i].functionGroup
                                }
                            }
                            this.formList = this.layout1[2].buju

                            this.$message.success('合成成功，请确认提交录入数据库')
                        } else {
                            this.$message.warning('选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数')
                        }
                    } else if (this.radio == 4) {
                        if (this.componentlist.length >= 8) {
                            for (var j = 0; j < this.componentlist.length; j++) {
                                for (var i = 0; i < this.layout1[3].buju.length; i++) {
                                    this.layout1[3].buju[i].i = this.componentlist[i].name
                                    this.layout1[3].buju[i].component = this.componentlist[i].code
                                    this.layout1[3].buju[i].path = this.componentlist[i].path
                                    this.layout1[3].buju[i].functionGroup = this.componentlist[i].functionGroup
                                }
                            }
                            this.formList = this.layout1[3].buju

                            this.$message.success('合成成功，请确认提交录入数据库')
                        } else {
                            this.$message.warning('选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数')
                        }
                    } else if (this.radio == 5) {
                        if (this.componentlist.length >= 9) {
                            for (var j = 0; j < this.componentlist.length; j++) {
                                for (var i = 0; i < this.layout1[4].buju.length; i++) {
                                    this.layout1[4].buju[i].i = this.componentlist[i].name
                                    this.layout1[4].buju[i].component = this.componentlist[i].code
                                    this.layout1[4].buju[i].path = this.componentlist[i].path
                                    this.layout1[4].buju[i].functionGroup = this.componentlist[i].functionGroup
                                }
                            }
                            this.formList = this.layout1[4].buju

                            this.$message.success('合成成功，请确认提交录入数据库')
                        } else {
                            this.$message.warning('选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数')
                        }
                    } else if (this.radio == 6) {
                        if (this.componentlist.length >= 6) {
                            for (var j = 0; j < this.componentlist.length; j++) {
                                for (var i = 0; i < this.layout1[5].buju.length; i++) {
                                    this.layout1[5].buju[i].i = this.componentlist[i].name
                                    this.layout1[5].buju[i].component = this.componentlist[i].code
                                    this.layout1[5].buju[i].path = this.componentlist[i].path
                                    this.layout1[5].buju[i].functionGroup = this.componentlist[i].functionGroup
                                }
                            }
                            this.formList = this.layout1[5].buju

                            this.$message.success('合成成功，请确认提交录入数据库')
                        } else {
                            this.$message.warning('选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数')
                        }
                    } else if (this.radio == 7) {
                        if (this.componentlist.length >= 7) {
                            for (var j = 0; j < this.componentlist.length; j++) {
                                for (var i = 0; i < this.layout1[6].buju.length; i++) {
                                    this.layout1[6].buju[i].i = this.componentlist[i].name
                                    this.layout1[6].buju[i].component = this.componentlist[i].code
                                    this.layout1[6].buju[i].path = this.componentlist[i].path
                                    this.layout1[6].buju[i].functionGroup = this.componentlist[i].functionGroup
                                }
                            }
                            this.formList = this.layout1[6].buju

                            this.$message.success('合成成功，请确认提交录入数据库')
                        } else {
                            this.$message.warning('选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数')
                        }
                    }
                } else {
                    this.$message.warning('请选择布局版式')
                }
            } else {
                this.$message.warning('请设置页面名称')
            }
        },
        //选取的组件集合
        handleSelectionChange(val) {
            this.numble = val.length
            this.componentlist = val
        },
        //切花组件集和
        SelectionChange(val) {
            //alert(val)
            //this.componentlistchange=val
        },
        handleIconSelected(name) {
            this.icon = name
            this.$forceUpdate()
        },
        //提交数据
        submit() {
            this.organizpage()
            let componentList = JSON.stringify(this.formList)
            let data = {
                icon: this.icon,
                path: this.pathvalue,
                name: this.input,
                layout: componentList,
                sort: 0
            }
            addOverview(data).then(response => {
                if (response.message) {
                    this.$message({
                        message: response.message,
                        type: 'success'
                    })
                }
                this.dialogTableVisible1 = false
            })
        },
        configuration() {
            this.dialogTableVisible1 = true
        },
        buttoncli() {
            if (!this.vhhfalg) {
                this.vhhfalg = true
            } else {
                this.vhhfalg = false
            }
            if (screenfull.enabled) {
                // 如果不允许进入全屏，发出不允许提示
                this.$message({
                    message: '不支持全屏',
                    type: 'warning'
                })
                return false
            }
            if (this.falg) {
                this.falg = false
                this.screen = window.sessionStorage.getItem('appheight') / 22.6
            } else {
                this.falg = true
                this.screen = window.sessionStorage.getItem('appheight') / 27.1
            }
            // debugger
            screenfull.toggle(this.$refs.home)
            this.$message({
                message: '全屏啦',
                type: 'success'
            })
        },
        //删除页面
        deletepage(id) {
            var data = {
                id: id
            }
            detehomepage(data).then(response => {
                if (response.code == 'A0000') {
                    this.$message.success('删除首页成功')
                    this.pageget()
                }
            })
        },
        pageget() {
            homepage().then(response => {
                this.homepagelist = response.data
            })
        },
        formatter(row, column) {
            return row.address
        },
        cellClick(row, column, cell, event) {
            this.$message({ type: 'info', message: '点我' })
        },
        moveEvent: function (i, newX, newY) {
            this.beforemove = { i: i, x: newX, y: newY }
        },
        moveEventd: function (i, newX, newY) {
            this.beforemove = { i: i, x: newX, y: newY }
        },
        movedEvent: function (i, newX, newY, newW, newH) {
            for (var j = 0; j < this.layout.length; j++) {
                if (this.layout[j].i == i) {
                    'X=' + newX, 'Y=' + newY, 'W=' + newW, 'H=' + newH
                }
            }
        },
        movedEventd: function (i, newX, newY, newW, newH) {
            for (var j = 0; j < this.layout.length; j++) {
                if (this.layout[j].i == i) {
                    'X=' + newX, 'Y=' + newY, 'W=' + newW, 'H=' + newH
                }
            }
        },
        //保存
        save() {
            var Index = ''
            for (var i = 0; i < this.homepagelist.length; i++) {
                if (this.homepagelist[i].path == '/dashboard/index') {
                    var Index = this.homepagelist[i].id
                }
            }
            let homePageBO = {
                //  icon: this.icon,
                id: Index,
                name: '默认首页',
                path: '/dashboard/index',
                layout: JSON.stringify(this.layout),
                sort: 0
            }
            updatehomepage(homePageBO).then(response => {
                if (response.message) {
                    this.$message({
                        message: response.message,
                        type: 'success'
                    })
                }
            })
        },
        //切换组件功能
        handleCommand(item, ind) {
            //debugger
            this.falgid = ''
            this.falgid = ind
            this.dialogTableVisible = true
        },
        addDashButton() {
            this.addDashVisiable = true
            this.$$api_dashBoard_getGadgetList({
                data: { queryCriteria: {} },
                fn: data => {
                    this.gadgetList = data.data
                },
                errFn: err => {
                    this.$message.error(err.msg)
                },
                tokenFlag: true
            })
        },
        searchType_Click(index) {
            this.searchIndex = index
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep.el-button--primary {
    color: #fefefe;
    background-color: $themeColor !important;
    border-color: $themeColor !important;
}

::v-deep.el-button--primary:hover {
    color: #fefefe;
    background-color: $themeColor !important;
    border-color: $themeColor !important;
}
::v-deep.icon-body .icon-list span[data-v-6504d548] {
    display: inline-block;
    vertical-align: -0.15em;
    fill: currentColor;
    //   color:#7cdbe3 !important;
    overflow: hidden;
}
::v-deep.el-button--info.is-plain:hover {
    color: #09d2ec;
    background: $themeColor_8;
    border-color: $themeColor_8;
}
::v-deep.el-button--info.is-disabled {
    color: #fcffff;
    background: $themeColor_8;
    border-color: $themeColor_8;
}

.dash {
    width: 100%;
    margin-top: 0px;
    height: 30px;
    padding-top: 0px;
    background-color: $themeColor;
}

.radio {
    margin-top: 50px;
}
.el-image {
    width: 60px;
    height: 60px;
    position: absolute;
    margin-top: -20px;
    margin-left: 10px;
}

.drag-title {
    font-size: 13px;
    background-color: $themeColor;
    height: 35px;
    line-height: 40px;
    padding-left: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: #d3d4d434;
}
.dw {
    position: absolute !important;
}
</style>
<style lang="less">
@import url('./dashView.less');
</style>
