1354 lines
43 KiB
Vue
1354 lines
43 KiB
Vue
<template>
|
|
<div class="home" ref="home" style="overflow: hidden; height: 100%">
|
|
<div class="dash">
|
|
<el-row>
|
|
<el-col :span="5" class="dashtitle"
|
|
><h4 style="color: #fff"></h4
|
|
></el-col>
|
|
<el-col style="padding-left: 0%">
|
|
<el-button
|
|
:plain="true"
|
|
type=""
|
|
size="mini"
|
|
@click="buttoncli"
|
|
style="float: right; margin-right: 5px; height: 28px"
|
|
><i class="el-icon-s-help"></i>全屏</el-button
|
|
>
|
|
<el-button
|
|
:plain="true"
|
|
type=""
|
|
size="mini"
|
|
@click="save"
|
|
style="float: right; margin-right: 10px; height: 28px"
|
|
><i class="el-icon-circle-check"></i>保存</el-button
|
|
>
|
|
<el-button
|
|
:plain="true"
|
|
type=""
|
|
size="mini"
|
|
@click="back"
|
|
style="float: right; margin-right: 0px; height: 28px"
|
|
><i class="el-icon-refresh"></i>重置</el-button
|
|
>
|
|
<el-button
|
|
:plain="true"
|
|
type=""
|
|
size="mini"
|
|
@click="configuration"
|
|
style="float: right; margin-right: 0px; height: 28px"
|
|
><i class="el-icon-menu"></i>修改配置</el-button
|
|
>
|
|
</el-col>
|
|
</el-row>
|
|
<div
|
|
v-if="zooninfalg"
|
|
id="conmentId"
|
|
class="component overview_scroll"
|
|
ref="home1"
|
|
>
|
|
<grid-layout
|
|
:layout="layout"
|
|
:col-num="24"
|
|
:row-height="screen"
|
|
:autoSize="true"
|
|
:is-draggable="true"
|
|
: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 in layout"
|
|
:key="item.i"
|
|
: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" 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
|
|
v-if="
|
|
item.functionGroup[0] == 0 ||
|
|
item.functionGroup[1] == 0 ||
|
|
item.functionGroup[2] == 0
|
|
"
|
|
>
|
|
<el-tooltip
|
|
class="item"
|
|
effect="dark"
|
|
content="切换组件功能"
|
|
placement="top"
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
size="mini"
|
|
@click.native="handleCommand(item)"
|
|
icon="el-icon-menu"
|
|
circle
|
|
></el-button>
|
|
</el-tooltip>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="
|
|
item.functionGroup[0] == 1 ||
|
|
item.functionGroup[1] == 1 ||
|
|
item.functionGroup[2] == 1
|
|
"
|
|
>
|
|
<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
|
|
v-if="
|
|
item.functionGroup[0] == 2 ||
|
|
item.functionGroup[1] == 2 ||
|
|
item.functionGroup[2] == 2
|
|
"
|
|
>
|
|
<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
|
|
v-for="item in zoondata"
|
|
:key="item.i"
|
|
:x="0"
|
|
:y="0"
|
|
:w="24"
|
|
:h="24"
|
|
:i="item.i"
|
|
class="griditem"
|
|
>
|
|
<el-row class="drag-title">
|
|
<el-form :inline="true" 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
|
|
v-if="falg"
|
|
type="primary"
|
|
size="mini"
|
|
@click.native="backff"
|
|
icon="el-icon-refresh-left"
|
|
circle
|
|
></el-button>
|
|
</el-tooltip>
|
|
</el-form-item>
|
|
<el-form-item> </el-form-item>
|
|
</el-form>
|
|
</el-row>
|
|
<el-row class="drag-content">
|
|
<el-col :span="24">
|
|
<component
|
|
v-if="zoomfalg"
|
|
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"
|
|
>
|
|
选取功能切换:<el-select
|
|
v-model="componentlistchange"
|
|
filterable
|
|
style="width: 90%"
|
|
@change="componentchange"
|
|
placeholder="请选择功能组件"
|
|
>
|
|
<el-option
|
|
v-for="item in componentData"
|
|
:key="item.code"
|
|
:label="item.name"
|
|
:value="{
|
|
value: item.code,
|
|
label: item.name,
|
|
path: item.path,
|
|
functionGroup: item.functionGroup,
|
|
}"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<el-table
|
|
stripe
|
|
ref="multipleTable"
|
|
:data="componentData"
|
|
border
|
|
height="450"
|
|
style="width: 100%; margin-top: 10px"
|
|
@selection-change="SelectionChange"
|
|
>
|
|
<el-table-column align="center" label="功能名称" prop="name">
|
|
</el-table-column>
|
|
<!-- <el-table-column align="center" prop="componentPath" label="组件路径" > </el-table-column> -->
|
|
<el-table-column align="center" prop="code" label="组件描述">
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-col :span="24" style="margin-top: 15px; text-align: center">
|
|
<el-button type="primary" @click="submitcomp">确认提交</el-button>
|
|
</el-col>
|
|
</el-dialog>
|
|
<!--配置修改-->
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
title="修改配置"
|
|
:visible.sync="dialogTableVisible1"
|
|
>
|
|
<el-table
|
|
stripe
|
|
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="editpage(scope.row.id)"
|
|
type="primary"
|
|
class="el-icon-edit"
|
|
>修改</el-button
|
|
>
|
|
<el-button
|
|
v-if="scope.row.path !== '/dashboard/index'"
|
|
@click="deletepage(scope.row.id)"
|
|
class="el-icon-delete"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-dialog>
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
title="修改"
|
|
:visible.sync="dialogTableVisible3"
|
|
>
|
|
<el-row :gutter="20" style="padding: 15px">
|
|
<el-col :span="10">
|
|
<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">
|
|
设置页面名称:<el-input style="width: 255px" v-model="input">
|
|
</el-input>
|
|
设置首页图标:<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: 73%; 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>
|
|
</div>
|
|
<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"
|
|
disabled
|
|
style="margin-top: 15px; width: 100px"
|
|
>
|
|
<el-radio :label="1"
|
|
>大屏模式1<el-image :src="layou1tsrc"></el-image
|
|
></el-radio>
|
|
<el-radio class="radio" :label="2"
|
|
>大屏模式2<el-image :src="layou2tsrc"></el-image
|
|
></el-radio>
|
|
<el-radio class="radio" :label="3"
|
|
>常规模式1<el-image :src="layou3tsrc"></el-image
|
|
></el-radio>
|
|
<el-radio class="radio" :label="4"
|
|
>常规模式2<el-image :src="layou4tsrc"></el-image
|
|
></el-radio>
|
|
<el-radio class="radio" :label="5"
|
|
>常规模式3<el-image :src="layou5tsrc"></el-image
|
|
></el-radio>
|
|
<el-radio class="radio" :label="6"
|
|
>常规模式4<el-image :src="layou6tsrc"></el-image
|
|
></el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<el-tag type="primary">组件列表</el-tag>
|
|
<el-tag type="danger" style="color: red"
|
|
>注意:请根据布局板式个数选取组件个数</el-tag
|
|
>
|
|
<!-- <el-table
|
|
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="componentName"> </el-table-column>
|
|
<el-table-column align="center" prop="componentAlias" label="组件名称" > </el-table-column>
|
|
</el-table> -->
|
|
<div
|
|
class="overview_scroll"
|
|
style="
|
|
margin-top: 10px;
|
|
height: 500px;
|
|
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
|
|
/>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="24" style="margin-top: 15px; text-align: center">
|
|
<el-button class="el-icon-s-tools" type="primary" @click="organizpage"
|
|
>合成首页</el-button
|
|
>
|
|
<el-button class="el-icon-check" type="primary" @click="submit"
|
|
>确认提交</el-button
|
|
>
|
|
</el-col>
|
|
</el-row>
|
|
</el-dialog>
|
|
<!--自定义布局首页-->
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
title="自定义布局样式绘制"
|
|
:visible.sync="dialogTableVisible2"
|
|
>
|
|
<div class="component" style="overflow-y: auto">
|
|
<grid-layout
|
|
:layout="layout"
|
|
:col-num="24"
|
|
:row-height="33.4"
|
|
: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="moveEvent"
|
|
@moved="movedEvent"
|
|
class="griditem"
|
|
>
|
|
<el-row class="drag-title">
|
|
<el-col :span="23"
|
|
><span style="color: green; font-weight: bold"
|
|
>配置组件{{ item.i }}</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()"
|
|
>进入该功能</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>
|
|
</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,
|
|
detehomepage,
|
|
gethomepage,
|
|
updatehomepage,
|
|
} from "@/api/admin/user";
|
|
import compevaluation from "@/views/componentschild/compevaluation";
|
|
import powerquality from "@/views/componentschild/powerquality";
|
|
import powerqualitybg from "@/views/componentschild/powerqualitybg";
|
|
import datantegritydiagram from "@/views/componentschild/datantegritydiagram";
|
|
import terminaonlinetu from "@/views/componentschild/terminaonlinetu";
|
|
import steadyratechart from "@/views/componentschild/steadyratechart";
|
|
import dstortionratest from "@/views/componentschild/dstortionratest";
|
|
import seadsstatestandard from "@/views/componentschild/seadsstatestandard";
|
|
import terminaoptstatustu from "@/views/componentschild/terminaoptstatustu";
|
|
import steadystaterate from "@/views/componentschild/steadystaterate";
|
|
import harmonicspectrum from "@/views/componentschild/harmonicspectrum";
|
|
import harmonicfz from "@/views/componentschild/harmonicfz";
|
|
import onliedataity from "@/views/componentschild/onliedataity";
|
|
import operationanalysis from "@/views/componentschild/operationanalysis";
|
|
import terminalstatus from "@/views/componentschild/terminalstatus";
|
|
import harmonictable from "@/views/componentschild/harmonictable";
|
|
import harmonictu from "@/views/componentschild/harmonictu";
|
|
import powerqualitymap from "@/views/componentschild/powerqualitymap";
|
|
import areamontormap from "@/views/componentschild/areamontormap";
|
|
import terminalconts from "@/views/componentschild/terminalconts";
|
|
import f47curveianalysisi from "@/views/componentschild/f47curveianalysisi";
|
|
import iticcurveianalysisi from "@/views/componentschild/iticcurveianalysisi";
|
|
import areaconstf47 from "@/views/componentschild/areaconstf47";
|
|
import voltagesagdensity from "@/views/componentschild/voltagesagdensity";
|
|
import sagdistribution from "@/views/componentschild/sagdistribution";
|
|
import voltagecause from "@/views/componentschild/voltagecause";
|
|
import voltagetype from "@/views/componentschild/voltagetype";
|
|
import overviewdistrib from "@/views/componentschild/overviewdistrib";
|
|
import timedistribution from "@/views/componentschild/timedistribution";
|
|
import onlinerate from "@/views/componentschild/onlinerate";
|
|
import voltagesagtable from "@/views/componentschild/voltagesagtable";
|
|
//import eventtable from "@/views/componentschild/eventtable";
|
|
import vueGridLayout from "vue-grid-layout";
|
|
var GridLayout = vueGridLayout.GridLayout;
|
|
var GridItem = vueGridLayout.GridItem;
|
|
export default {
|
|
data() {
|
|
return {
|
|
vhh: null,
|
|
icon: "",
|
|
vhhfalg: false,
|
|
zoondata: [],
|
|
qrfalg: false,
|
|
jrfalg: false,
|
|
fdfalg: false,
|
|
falg: true,
|
|
zoomfalg: true,
|
|
zooninfalg: true,
|
|
zoonfalg: false,
|
|
mainHeight: undefined,
|
|
mainHeight1: undefined,
|
|
menuOptions: [],
|
|
expandedKeys: [],
|
|
menu: undefined,
|
|
initialCheckedMenuIds: [], //初始选中值
|
|
checkedMenuIds: [],
|
|
isRoot: false, // 是否是超级管理员账户
|
|
checkStrictly: false,
|
|
defaultProps: {
|
|
children: "children",
|
|
label: "name",
|
|
},
|
|
screen: 30,
|
|
device: 1,
|
|
isFullscreen: false,
|
|
dialogTableVisible: false,
|
|
dialogTableVisible1: false,
|
|
dialogTableVisible2: false,
|
|
dialogTableVisible3: 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" },
|
|
],
|
|
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"),
|
|
layout1: [
|
|
{
|
|
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" },
|
|
],
|
|
},
|
|
],
|
|
layout2: [
|
|
{ x: 0, y: 0, w: 2, h: 6, i: "1" },
|
|
{ x: 2, y: 0, w: 2, h: 6, i: "2" },
|
|
{ x: 4, y: 0, w: 2, h: 6, i: "3" },
|
|
{ x: 0, y: 6, w: 3, h: 8, i: "4" },
|
|
{ x: 3, y: 6, w: 3, h: 8, i: "5" },
|
|
{ x: 0, y: 12, w: 3, h: 8, i: "6" },
|
|
{ x: 3, y: 12, w: 3, h: 8, i: "7" },
|
|
],
|
|
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: "",
|
|
path: "",
|
|
componentData: [],
|
|
componentlist: [],
|
|
componentlistchange: "",
|
|
falgid: "",
|
|
homePageIndex: "",
|
|
formList: [],
|
|
homepagelist: [],
|
|
componentarr: [],
|
|
falg: true,
|
|
grid1: "grid1",
|
|
grid2: "grid2",
|
|
};
|
|
},
|
|
components: {
|
|
GridLayout,
|
|
GridItem,
|
|
compevaluation,
|
|
powerquality,
|
|
powerqualitybg,
|
|
datantegritydiagram,
|
|
terminaonlinetu,
|
|
steadyratechart,
|
|
dstortionratest,
|
|
seadsstatestandard,
|
|
terminaoptstatustu,
|
|
steadystaterate,
|
|
harmonicspectrum,
|
|
harmonicfz,
|
|
onliedataity,
|
|
operationanalysis,
|
|
terminalstatus,
|
|
harmonictable,
|
|
harmonictu,
|
|
powerqualitymap,
|
|
areamontormap,
|
|
terminalconts,
|
|
f47curveianalysisi,
|
|
iticcurveianalysisi,
|
|
areaconstf47,
|
|
voltagesagdensity,
|
|
sagdistribution,
|
|
voltagecause,
|
|
voltagetype,
|
|
overviewdistrib,
|
|
timedistribution,
|
|
onlinerate,
|
|
voltagesagtable,
|
|
//eventtable,
|
|
IconSelect,
|
|
},
|
|
mounted() {
|
|
this.vhh = document.body.clientHeight - 123;
|
|
this.screen = window.sessionStorage.getItem("appheight") / 27.1;
|
|
this.getlayout();
|
|
this.getcomponent();
|
|
var menuslist = window.sessionStorage.getItem("menus");
|
|
//console.log(eval("(" + menuslist + ")"));
|
|
var menusArray = eval("(" + menuslist + ")");
|
|
this.homepagelist = menusArray[0].children;
|
|
// console.log(this.homepagelist);
|
|
this.pageget();
|
|
},
|
|
methods: {
|
|
//放大组件功能
|
|
zoomin(item) {
|
|
// console.log(item)
|
|
item.w = 24;
|
|
item.h = 24;
|
|
this.zoondata = [];
|
|
this.zoondata.push(item);
|
|
this.zoomfalg = true;
|
|
this.zooninfalg = false;
|
|
this.zoonfalg = true;
|
|
},
|
|
backff() {
|
|
this.zooninfalg = true;
|
|
this.zoonfalg = false;
|
|
this.zoomfalg = false;
|
|
this.getlayout();
|
|
},
|
|
treeckeck() {
|
|
const checkedMenuIds = this.$refs.tree
|
|
.getCheckedNodes(false, true)
|
|
.map((node) => node);
|
|
this.componentlist = checkedMenuIds;
|
|
// console.log(checkedMenuIds);
|
|
},
|
|
handleIconSelected(name) {
|
|
this.icon = name;
|
|
this.$forceUpdate();
|
|
},
|
|
editpage(id) {
|
|
this.dialogTableVisible1 = false;
|
|
this.dialogTableVisible3 = true;
|
|
this.homePageIndex = id;
|
|
var data = {
|
|
id: id,
|
|
};
|
|
gethomepage(data).then((response) => {
|
|
this.input = response.data.name;
|
|
this.icon = response.data.icon;
|
|
var arr = eval("(" + response.data.layout + ")");
|
|
this.componentarr = arr;
|
|
var arr2 = [];
|
|
for (var i = 0; i < this.componentlist.length; i++) {
|
|
for (var j = 0; j < arr.length; j++) {
|
|
if (this.componentlist[i].code === arr[j].component) {
|
|
arr2.push(this.componentlist[i].id);
|
|
}
|
|
}
|
|
}
|
|
this.$refs.tree.setCheckedKeys(arr2);
|
|
this.checkStrictly = false;
|
|
|
|
this.path = response.data.path;
|
|
if (
|
|
response.data.path == "/home/screen1/home1" ||
|
|
response.data.path == "/home/screen1/home2" ||
|
|
response.data.path == "/home/screen1/home3"
|
|
) {
|
|
this.radio = 1;
|
|
} else if (
|
|
response.data.path == "/home/screen2/home1" ||
|
|
response.data.path == "/home/screen2/home2" ||
|
|
response.data.path == "/home/screen2/home3"
|
|
) {
|
|
this.radio = 2;
|
|
} else if (
|
|
response.data.path == "/home/buju1/home1" ||
|
|
response.data.path == "/home/buju1/home2" ||
|
|
response.data.path == "/home/buju1/home3"
|
|
) {
|
|
this.radio = 3;
|
|
} else if (
|
|
response.data.path == "/home/buju2/home1" ||
|
|
response.data.path == "/home/buju2/home2" ||
|
|
response.data.path == "/home/buju2/home3"
|
|
) {
|
|
this.radio = 4;
|
|
} else if (
|
|
response.data.path == "/home/buju3/home1" ||
|
|
response.data.path == "/home/buju3/home2" ||
|
|
response.data.path == "/home/buju3/home3"
|
|
) {
|
|
this.radio = 5;
|
|
} else if (
|
|
response.data.path == "/home/buju4/home1" ||
|
|
response.data.path == "/home/buju4/home2" ||
|
|
response.data.path == "/home/buju4/home3"
|
|
) {
|
|
this.radio = 6;
|
|
}
|
|
});
|
|
},
|
|
deletepage(id) {
|
|
var data = {
|
|
id: id,
|
|
};
|
|
detehomepage(data).then((response) => {
|
|
this.$message.success("删除首页成功");
|
|
this.pageget();
|
|
});
|
|
},
|
|
pageget() {
|
|
homepage().then((response) => {
|
|
this.homepagelist = response.data;
|
|
});
|
|
},
|
|
componentchange(val) {
|
|
for (var i = 0; i < this.layout.length; i++) {
|
|
if (this.layout[i].i == this.falgid) {
|
|
this.layout[i].component = "";
|
|
this.layout[i].component = val.value;
|
|
this.layout[i].path = val.path;
|
|
this.layout[i].functionGroup = val.functionGroup;
|
|
this.layout[i].i = val.label;
|
|
}
|
|
}
|
|
},
|
|
|
|
//自定义布局逻辑
|
|
drawerBuju() {
|
|
this.dialogTableVisible2 = true;
|
|
},
|
|
back() {
|
|
this.getlayout();
|
|
},
|
|
goto(item) {
|
|
this.$router.push({ path: item.path });
|
|
},
|
|
submitcomp() {
|
|
this.dialogTableVisible = false;
|
|
},
|
|
//获取布局
|
|
getlayout() {
|
|
homepage().then((response) => {
|
|
const data = response.data;
|
|
for (var i = 0; i < data.length; i++) {
|
|
if (data[i].path == "/home/buju5/home2") {
|
|
this.layout = eval("(" + data[i].layout + ")");
|
|
// console.log(this.layout);
|
|
return;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//获取组件
|
|
getcomponent() {
|
|
componentlist().then((response) => {
|
|
var arr = [];
|
|
for (var i = 0; i < response.data.length; i++) {
|
|
for (var j = 0; j < response.data[i].children.length; j++) {
|
|
arr.push(response.data[i].children[j]);
|
|
}
|
|
}
|
|
this.componentData = arr;
|
|
this.componentlist = arr;
|
|
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;
|
|
// console.log(this.formList);
|
|
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.formList = this.layout1[1].buju;
|
|
// console.log(this.formList);
|
|
this.$message.success("合成成功，请确认提交录入数据库");
|
|
} else {
|
|
this.$message.warning(
|
|
"选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
|
|
);
|
|
}
|
|
//console.log(this.layout)
|
|
} else if (this.radio == 3) {
|
|
if (this.componentlist.length >= 9) {
|
|
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.formList = this.layout1[2].buju;
|
|
// console.log(this.formList);
|
|
this.$message.success("合成成功，请确认提交录入数据库");
|
|
} else {
|
|
this.$message.warning(
|
|
"选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
|
|
);
|
|
}
|
|
// console.log(this.layout)
|
|
} else if (this.radio == 4) {
|
|
if (this.componentlist.length >= 6) {
|
|
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.formList = this.layout1[3].buju;
|
|
// console.log(this.formList);
|
|
this.$message.success("合成成功，请确认提交录入数据库");
|
|
} else {
|
|
this.$message.warning(
|
|
"选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
|
|
);
|
|
}
|
|
//console.log(this.layout)
|
|
} 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.formList = this.layout1[4].buju;
|
|
//console.log(this.formList);
|
|
this.$message.success("合成成功，请确认提交录入数据库");
|
|
} else {
|
|
this.$message.warning(
|
|
"选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
|
|
);
|
|
}
|
|
// console.log(this.layout)
|
|
} 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;
|
|
//console.log(this.formList);
|
|
this.$message.success("合成成功，请确认提交录入数据库");
|
|
} else {
|
|
this.$message.warning(
|
|
"选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
|
|
);
|
|
}
|
|
}
|
|
} else {
|
|
this.$message.warning("请选择布局版式");
|
|
}
|
|
} else {
|
|
this.$message.warning("请设置页面名称");
|
|
}
|
|
},
|
|
//选取的组件集合
|
|
handleSelectionChange(val) {
|
|
this.componentlist = val;
|
|
},
|
|
//切花组件集和
|
|
SelectionChange(val) {
|
|
//alert(val)
|
|
//this.componentlistchange=val
|
|
},
|
|
//提交数据
|
|
submit() {
|
|
this.organizpage();
|
|
let homePageBO = {
|
|
icon: this.icon,
|
|
id: this.homePageIndex,
|
|
name: this.input,
|
|
path: this.path,
|
|
layout: JSON.stringify(this.formList),
|
|
sort: 0,
|
|
};
|
|
updatehomepage(homePageBO).then((response) => {
|
|
if (response.message) {
|
|
this.$message({
|
|
message: response.message,
|
|
type: "success",
|
|
});
|
|
}
|
|
this.dialogTableVisible1 = false;
|
|
this.dialogTableVisible3 = 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;
|
|
}
|
|
screenfull.toggle(this.$refs.home);
|
|
|
|
this.$message({
|
|
message: "全屏啦",
|
|
type: "success",
|
|
});
|
|
},
|
|
|
|
formatter(row, column) {
|
|
return row.address;
|
|
},
|
|
cellClick(row, column, cell, event) {
|
|
this.$message({ type: "info", message: "点我" });
|
|
},
|
|
moveEvent: function (i, newX, newY) {
|
|
console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + 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;
|
|
}
|
|
}
|
|
console.log("MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
|
|
},
|
|
save() {
|
|
// console.log("=========================================");
|
|
//console.log(this.homepagelist);
|
|
var Index = "";
|
|
var name = "";
|
|
for (var i = 0; i < this.homepagelist.length; i++) {
|
|
if (this.homepagelist[i].path === "/home/buju5/home2") {
|
|
Index = this.homepagelist[i].id;
|
|
name = this.homepagelist[i].name;
|
|
}
|
|
}
|
|
let homePageBO = {
|
|
//icon: this.icon,
|
|
id: Index,
|
|
name: name,
|
|
path: "/home/buju5/home2",
|
|
layout: JSON.stringify(this.layout),
|
|
sort: 0,
|
|
};
|
|
updatehomepage(homePageBO).then((response) => {
|
|
if (response.message) {
|
|
this.$message({
|
|
message: response.message,
|
|
type: "success",
|
|
});
|
|
}
|
|
// console.log(this.layout);
|
|
|
|
//console.log('=========================================')
|
|
});
|
|
},
|
|
|
|
//切换组件功能
|
|
handleCommand(item) {
|
|
console.log(item);
|
|
this.falgid = item.i;
|
|
this.dialogTableVisible = true;
|
|
|
|
// item.component=this.componentlistchange
|
|
},
|
|
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;
|
|
},
|
|
// getTemplate(templateName){
|
|
// return require("./../dashComponent/"+templateName+".vue");
|
|
// }
|
|
},
|
|
watch: {
|
|
/*
|
|
layout: {
|
|
handler: function (val, oldVal) {
|
|
console.log( val)
|
|
},
|
|
deep: true
|
|
}*/
|
|
},
|
|
};
|
|
</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;
|
|
}
|
|
.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;
|
|
//border-bottom: 1px solid #EAEAEF;
|
|
}
|
|
.cssTransforms {
|
|
// border:1px solid #cecece;
|
|
// border-top: 30px solid $themeColor;
|
|
}
|
|
.but {
|
|
float: right;
|
|
margin-right: 5px;
|
|
height: 25px;
|
|
}
|
|
.grid1 {
|
|
height: 80vh;
|
|
}
|
|
.grid2 {
|
|
height: 100vh;
|
|
}
|
|
</style>
|
|
<style>
|
|
@import url("../dashView.less");
|
|
</style>
|