1642 lines
75 KiB
Vue
1642 lines
75 KiB
Vue
<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>
|