Commit 09238138 authored by neogcg's avatar neogcg

导航栏高度

parent c4679ea1
......@@ -10,8 +10,24 @@
>
</el-option>
</el-select>
<el-button class="ml10" type="primary" icon="el-icon-s-unfold" size="mini" :loading="flag" @click="flag=true">展开</el-button>
<el-button class="ml10" type="primary" size="mini" icon="el-icon-refresh-right" :loading="flag1" @click="flag1=true">刷新</el-button>
<el-button
class="ml10"
type="primary"
icon="el-icon-s-unfold"
size="mini"
:loading="flag"
@click="flag = true"
>展开</el-button
>
<el-button
class="ml10"
type="primary"
size="mini"
icon="el-icon-refresh-right"
:loading="flag1"
@click="flag1 = true"
>刷新</el-button
>
</el-row>
<el-tree
v-loading="loading"
......@@ -19,19 +35,20 @@
:props="defaultProps"
:data="data"
:render-content="renderContent"
:default-expand-all = 'true'
:default-expand-all="true"
nodeKey="id"
class="el-tree"
:current-node-key='id'
current-node-key="id"
:expand-on-click-node="false"
@node-click="handleClick"
>
<!-- :current-node-key='id' -->
</el-tree>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { mapGetters } from "vuex";
export default {
data() {
......@@ -42,169 +59,175 @@ export default {
options: [
{
id: 0,
label: '手动监控'
label: "手动监控",
},
{
id: 1,
label: '自动监控'
}
label: "自动监控",
},
],
data: [
{
type: 1,
id: 0,
iconName: "level1_Z",
label: "张呼铁路客运专线",
children: [
{
id: 1,
type: 2,
iconName: "level2_R",
label: "STATION1未开通",
children: [],
},
{
id: 2,
type: 2,
iconName: "level2_R",
label: "STATION2未开通",
children: [],
},
{
id: 3,
type: 2,
iconName: "level2_R",
label: "STATION3未开通",
children: [],
},
{
id: 4,
type: 2,
iconName: "level2_R",
label: "STATION4未开通",
children: [],
},
{
id: 5,
type: 2,
iconName: "level2_R",
label: "STATION5未开通",
children: [],
},
{
id: 6,
type: 2,
iconName: "level2_R",
label: "STATION6未开通",
children: [],
},
{
id: 7,
type: 2,
iconName: "level2_Z",
label: "(7)VLCB-ZZT02",
children: [
{
id: 4,
type: 4,
iconName: "level3_R",
label: "PSU(现场管理单元7)",
children: [
{
id: 5,
type: 4,
iconName: "level4_R",
label: "故障定位单位_K362",
children: [
{
id: 1,
type: 5,
iconName: "level5_R",
label: "漏缆K362+784张家...",
},
{
id: 2,
type: 5,
iconName: "level5_R",
label: "漏缆K362+7呼和浩...",
},
],
},
{
type: 5,
id: 6,
iconName: "level4_R",
label: "故障定位单位_K365",
},
{
type: 5,
id: 7,
iconName: "level4_R",
label: "故障定位单位_K368",
},
],
},
{
id: 7,
type: 2,
iconName: "level3_R",
label: "故障定位单位_K3...",
children: [
{
id: 8,
type: 3,
iconName: "level4_R",
label: "漏缆K362+784张...",
},
{
id: 9,
type: 2,
iconName: "level4_R",
label: "漏缆K362+784张...",
},
],
},
],
},
{
id: 8,
type: 2,
iconName: "level2_R",
label: "(8)VLCB-ZZT02",
children: [],
},
],
},
],
data: [
        { 
          type: 1,
          id: 0,
          iconName: 'level1_Z',
          label: '张呼铁路客运专线',
          children: [
            {
              id: 1,
              type: 2,
              iconName: 'level2_R',
              label: 'STATION1未开通',
              children: []
            },
            {
              id: 2,
              type: 2,
              iconName: 'level2_R',
              label: 'STATION2未开通',
              children: []
            },
{
              id: 3,
              type: 2,
              iconName: 'level2_R',
              label: 'STATION3未开通',
              children: []
            },
{
              id: 4,
              type: 2,
              iconName: 'level2_R',
              label: 'STATION4未开通',
              children: []
            },
{
              id: 5,
              type: 2,
              iconName: 'level2_R',
              label: 'STATION5未开通',
              children: []
            },
{
              id: 6,
              type: 2,
              iconName: 'level2_R',
              label: 'STATION6未开通',
              children: []
            },
            {
              id: 7,
              type: 2,
              iconName: 'level2_Z',
              label: '(7)VLCB-ZZT02',
              children: [
{
                id: 4,
                type: 4,
                iconName: 'level3_R',
                label: 'PSU(现场管理单元7)',
                children: [{
                  id: 5,
                  type: 4,
                  iconName: 'level4_R',
                  label: '故障定位单位_K362',
children: [{
id: 1,
                  type: 5,
                  iconName: 'level5_R',
                  label: '漏缆K362+784张家...'
},{
id: 2,
                  type: 5,
                  iconName: 'level5_R',
                  label: '漏缆K362+7呼和浩...'
}
]
                },
                { 
                  type: 5,
                  id: 6,
                  iconName: 'level4_R',
                  label: '故障定位单位_K365'
                },
                { 
                  type: 5,
                  id: 7,
                  iconName: 'level4_R',
                  label: '故障定位单位_K368'
                }
]
              },
              {
                id: 7,
                type: 2,
                iconName: 'level3_R',
                label: '故障定位单位_K3...',
                children: [{
                  id: 8,
                  type: 3,
                  iconName: 'level4_R',
                  label: '漏缆K362+784张...'
                },
                {
                  id:9,
                  type: 2,
                  iconName: 'level4_R',
                  label: '漏缆K362+784张...'
                }]
              }
]
            },
{
              id: 8,
              type: 2,
              iconName: 'level2_R',
              label: '(8)VLCB-ZZT02',
              children: []
            }
          ]
        }
      ],
defaultProps: {
children: 'children',
label: 'label'
children: "children",
label: "label",
},
loading: false,
}
};
},
name: 'org-tree',
name: "org-tree",
computed: {
...mapGetters('tree', [
'treeData',
])
...mapGetters("tree", ["treeData"]),
},
methods: {
handleClick(data) {
console.log(data);
},
renderContent (h, {node, data, store}) {
renderContent(h, { node, data, store }) {
return (
<div>
<span style="padding-right:10px;" >
<span style={{ marginRight: '5px', fontSize: '16px' }}><svg-icon icon-class={data.iconName} /></span>
<span style={{ marginRight: '5px', fontSize: '16px' }}>{node.label}</span>
<span style="padding-right:10px;">
<span style={{ marginRight: "5px", fontSize: "16px" }}>
<svg-icon icon-class={data.iconName} />
</span>
<span style={{ marginRight: "5px", fontSize: "16px" }}>
{node.label}
</span>
</span>
</div>
)
);
},
}
}
},
};
</script>
<style lang="scss">
@import '@/styles/variables';
@import "@/styles/variables";
.el-select-tree {
width: 300px;
......
......@@ -81,8 +81,8 @@ export default {
return {};
},
mounted() {
console.log(this.$refs['subMenu']);
console.log(document.getElementById('subid'));
// console.log(this.$refs['subMenu']);
// console.log(document.getElementById('subid'));
},
methods: {
hasOneShowingChild(children = [], parent) {
......
......@@ -58,7 +58,7 @@ export default {
.frame-menu {
padding-left: 30px;
border: none;
height: 100%;
height: 55px;
// width: 100% !important;
white-space: nowrap;
&.el-menu--horizontal {
......
......@@ -156,6 +156,7 @@ export default {
.value_handle {
color:red;
margin-right: 10px;
min-width: 52px;
}
.alarmbtn{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment