|
@@ -1,340 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="app-container page-nesting" style="position: relative">
|
|
|
- <!-- 树形组件start -->
|
|
|
- <div class="grid-content treeDom">
|
|
|
- <div style="text-align: center" class="mb-20">
|
|
|
- <el-button v-if="this.treeLevel == 3" disabled @click="addGroup()">
|
|
|
- 添加分组
|
|
|
- </el-button>
|
|
|
- <el-button type="primary" v-else @click="addGroup()">
|
|
|
- 添加分组
|
|
|
- </el-button>
|
|
|
- <el-button v-if="this.treeLevel == 3" disabled @click="addSite()">
|
|
|
- 添加站点
|
|
|
- </el-button>
|
|
|
- <el-button type="primary" v-else @click="addSite()">添加站点</el-button>
|
|
|
- </div>
|
|
|
- <el-input
|
|
|
- placeholder="输入关键字进行过滤"
|
|
|
- v-model="filterText"
|
|
|
- class="mb-20 searchInput"
|
|
|
- >
|
|
|
- <template>
|
|
|
- <i class="el-icon-search el-input__icon"></i>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
-
|
|
|
- <el-tree
|
|
|
- class="filter-tree siteTree"
|
|
|
- :data="data"
|
|
|
- node-key="id"
|
|
|
- :props="defaultProps"
|
|
|
- :expand-on-click-node="false"
|
|
|
- default-expand-all
|
|
|
- @node-click="handleNodeClick"
|
|
|
- :filter-node-method="filterNode"
|
|
|
- ref="tree"
|
|
|
- >
|
|
|
- <template #default="{ node, data }">
|
|
|
- <span
|
|
|
- class="custom-tree-node"
|
|
|
- style="width: 100%"
|
|
|
- @mouseenter="mouseenter(data)"
|
|
|
- @mouseleave="mouseleave(data)"
|
|
|
- >
|
|
|
- <span>{{ node.label }}</span>
|
|
|
- <span>
|
|
|
- <a
|
|
|
- class="deleteLink"
|
|
|
- v-show="data.show"
|
|
|
- @click="remove(node, data)"
|
|
|
- >
|
|
|
- <i size="mini" class="el-icon-delete"></i>
|
|
|
- </a>
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-tree>
|
|
|
- </div>
|
|
|
- <!-- 树形组件end -->
|
|
|
-
|
|
|
- <!-- 站点主题start -->
|
|
|
- <div class="grid-content nestingDom" style="width: calc(100% - 300px);">
|
|
|
- <el-tabs
|
|
|
- v-if="this.treeLevel == 3"
|
|
|
- v-model="activeName"
|
|
|
- type="card"
|
|
|
- >
|
|
|
- <el-tab-pane label="基本信息" name="first">
|
|
|
- <basic-info class="basicInfo"></basic-info>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="监控设备" name="second">
|
|
|
- <watch-dog
|
|
|
- v-on:success="success(res)"
|
|
|
- :avtiveName="activeName"
|
|
|
- @func="getMsgFormSon"
|
|
|
- ></watch-dog>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="变量列表" name="third">
|
|
|
- <variable-list :activeName="activeName"></variable-list>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="摄像头" name="five">
|
|
|
- <camera></camera>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="电能质量评分配置" name="six">
|
|
|
- <power-Score></power-Score>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
-
|
|
|
- <!-- 分组信息start -->
|
|
|
- <group-info-com
|
|
|
- v-if="this.treeLevel == 2 || this.treeLevel == 1"
|
|
|
- ></group-info-com>
|
|
|
- <!-- 分组信息end -->
|
|
|
-
|
|
|
- <!-- 新建分组start -->
|
|
|
- <add-group-com
|
|
|
- v-if="showDialog"
|
|
|
- ref="addGroupCom"
|
|
|
- :dialog-title="dialogTitle"
|
|
|
- :item-info="tableItem"
|
|
|
- @closeDialog="closeDialog"
|
|
|
- ></add-group-com>
|
|
|
- <!-- 新建分组end -->
|
|
|
-
|
|
|
- <!-- 新建站点start -->
|
|
|
- <add-site-com
|
|
|
- v-if="showDialog"
|
|
|
- ref="addSiteCom"
|
|
|
- :dialog-title="dialogTitle"
|
|
|
- :item-info="tableItem"
|
|
|
- @closeDialog="closeDialog"
|
|
|
- ></add-site-com>
|
|
|
- <!-- 新建站点end -->
|
|
|
- </div>
|
|
|
- <!-- 站点主题end -->
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import basicInfo from './basicInfo'
|
|
|
-import WatchDog from './watchDog'
|
|
|
-import variableList from './variableList'
|
|
|
-import camera from './camera'
|
|
|
-import PowerScore from './powerScore'
|
|
|
-
|
|
|
-import groupInfoCom from './groupInfoCom'
|
|
|
-import addGroupCom from './addGroupCom'
|
|
|
-import addSiteCom from './addSiteCom'
|
|
|
-
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- basicInfo,
|
|
|
- WatchDog,
|
|
|
- variableList,
|
|
|
- camera,
|
|
|
- PowerScore,
|
|
|
- groupInfoCom,
|
|
|
- addGroupCom,
|
|
|
- addSiteCom,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- showDialog: false,
|
|
|
- treeLevel: 0,
|
|
|
- activeName: 'first',
|
|
|
- filterText: '',
|
|
|
- data: [
|
|
|
- {
|
|
|
- label: '所有站点',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: '分组一',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: '站点 1-1',
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- label: '站点 1-2',
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- label: '站点 1-3',
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- label: '站点 1-4',
|
|
|
- show: false,
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- label: '分组二',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: '站点 2-1',
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- label: '站点 2-2',
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- label: '站点 2-3',
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- label: '站点 2-4',
|
|
|
- show: false,
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- label: '其他分组',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: '其他 3-1',
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- label: '其他 3-2',
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- label: '其他 3-3',
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- label: '其他 3-4',
|
|
|
- show: false,
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- defaultProps: {
|
|
|
- children: 'children',
|
|
|
- label: 'label',
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- filterText(val) {
|
|
|
- this.$refs.tree.filter(val)
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- getMsgFormSon() {
|
|
|
- this.activeName = 'third';
|
|
|
- },
|
|
|
- mouseenter(data) {
|
|
|
- data.show = true
|
|
|
- },
|
|
|
- mouseleave(data) {
|
|
|
- data.show = false
|
|
|
- },
|
|
|
- filterNode(value, data) {
|
|
|
- if (!value) return true
|
|
|
- return data.label.indexOf(value) !== -1
|
|
|
- },
|
|
|
- handleNodeClick(data, obj, node) {
|
|
|
- data, node
|
|
|
- this.treeLevel = obj.level
|
|
|
- },
|
|
|
-
|
|
|
- // 关闭操作
|
|
|
- closeDialog() {
|
|
|
- this.showDialog = false
|
|
|
- },
|
|
|
- //新建分组
|
|
|
- addGroup() {
|
|
|
- this.tableItem = {
|
|
|
- id: '',
|
|
|
- name: '',
|
|
|
- }
|
|
|
- this.dialogTitle = '新建分组'
|
|
|
- this.showDialog = true
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs['addGroupCom'].showDialog = true
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- //新建站点
|
|
|
- addSite() {
|
|
|
- this.tableItem = {
|
|
|
- stationName: '',
|
|
|
- }
|
|
|
- this.dialogTitle = '新建站点'
|
|
|
- this.showDialog = true
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs['addSiteCom'].showDialog = true
|
|
|
- })
|
|
|
- },
|
|
|
- remove(node, data) {
|
|
|
- const parent = node.parent
|
|
|
- const children = parent.data.children || parent.data
|
|
|
- const index = children.findIndex((d) => d.id === data.id)
|
|
|
- children.splice(index, 1)
|
|
|
- this.dataSource = [...this.dataSource]
|
|
|
- },
|
|
|
- },
|
|
|
-}
|
|
|
-</script>
|
|
|
-<style scoped lang="scss">
|
|
|
-.app-container.page-nesting {
|
|
|
- padding: 0;
|
|
|
- background: rgba(0, 0, 0, 0);
|
|
|
-}
|
|
|
-.grid-content {
|
|
|
- background: #fff;
|
|
|
- height: calc(100vh - 130px);
|
|
|
- overflow-y: auto;
|
|
|
-}
|
|
|
-.el-input__inner {
|
|
|
- border-radius: 20px !important;
|
|
|
-}
|
|
|
-.treeDom {
|
|
|
- width: 270px;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- // margin-left: 20px;
|
|
|
- padding: 20px;
|
|
|
- min-height: calc(100vh - 130px);
|
|
|
-
|
|
|
- .el-icon-search {
|
|
|
- color: #409eff;
|
|
|
- }
|
|
|
- .el-button {
|
|
|
- width: 100px;
|
|
|
- }
|
|
|
-}
|
|
|
-.nestingDom {
|
|
|
- margin-left: 300px;
|
|
|
-}
|
|
|
-</style>
|
|
|
-<style lang="scss">
|
|
|
-// tab重置样式
|
|
|
-.el-tabs--card > .el-tabs__header .el-tabs__item {
|
|
|
- line-height: 50px;
|
|
|
- height: 50px;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
|
|
|
- border-bottom: 2px solid #409eff;
|
|
|
- color: #409eff;
|
|
|
-}
|
|
|
-.el-tabs--card .el-tabs__header:hover,
|
|
|
-.el-tabs__item:hover {
|
|
|
- color: #409eff !important;
|
|
|
-}
|
|
|
-.el-tabs__header {
|
|
|
- margin-bottom: 0;
|
|
|
-}
|
|
|
-.el-tabs--card > .el-tabs__header .el-tabs__item,
|
|
|
-.el-tabs--card > .el-tabs__header .el-tabs__nav {
|
|
|
- border: none;
|
|
|
-}
|
|
|
-</style>
|