Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
0e9a5c1d by 杨威
Options

新增左侧树目录及部分样式修改

1 parent 1e902b9e
Inline Side-by-side
Showing 7 changed files with 824 additions and 130 deletions
1 <?xml version="1.0" encoding="UTF-8"?>
2 <svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
4 <title>icon_files_collapse_</title>
5 <desc>Created with Sketch.</desc>
6 <g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 <g id="1--报告工作站_书写报告" transform="translate(-100.000000, -217.000000)">
8 <g id="模板" transform="translate(80.000000, 51.000000)">
9 <g id="分组" transform="translate(20.000000, 135.000000)">
10 <g id="icon_files_collapse_" transform="translate(0.000000, 31.000000)">
11 <rect id="矩形-copy-18" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
12 <path d="M5,10 L12,10 L12,11 L5,11 L5,10 Z M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#7FB9A2"></path>
13 </g>
14 </g>
15 </g>
16 </g>
17 </g>
18 </svg>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" encoding="UTF-8"?>
2 <svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
4 <title>icon_file_default_</title>
5 <desc>Created with Sketch.</desc>
6 <g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 <g id="1--报告工作站_书写报告" transform="translate(-127.000000, -246.000000)">
8 <g id="模板" transform="translate(80.000000, 51.000000)">
9 <g id="分组" transform="translate(20.000000, 135.000000)">
10 <g id="icon_file_default_" transform="translate(27.000000, 60.000000)">
11 <rect id="矩形" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
12 <path d="M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#C3C5C8"></path>
13 </g>
14 </g>
15 </g>
16 </g>
17 </g>
18 </svg>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" encoding="UTF-8"?>
2 <svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
4 <title>icon_files_expand_</title>
5 <desc>Created with Sketch.</desc>
6 <g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 <g id="1--报告工作站_书写报告" transform="translate(-100.000000, -187.000000)">
8 <g id="模板" transform="translate(80.000000, 51.000000)">
9 <g id="分组" transform="translate(20.000000, 135.000000)">
10 <g id="icon_files_expand_" transform="translate(0.000000, 1.000000)">
11 <rect id="矩形-copy-17" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
12 <path d="M8,10 L8,7 L9,7 L9,10 L12,10 L12,11 L9,11 L9,14 L8,14 L8,11 L5,11 L5,10 L8,10 Z M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#C3C5C8"></path>
13 </g>
14 </g>
15 </g>
16 </g>
17 </g>
18 </svg>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" encoding="UTF-8"?>
2 <svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
4 <title>icon_file_focus_</title>
5 <desc>Created with Sketch.</desc>
6 <g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 <g id="1--报告工作站_书写报告" transform="translate(-127.000000, -276.000000)">
8 <g id="模板" transform="translate(80.000000, 51.000000)">
9 <g id="分组" transform="translate(20.000000, 135.000000)">
10 <g id="icon_file_focus_" transform="translate(27.000000, 90.000000)">
11 <rect id="矩形" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
12 <path d="M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#7FB9A2"></path>
13 </g>
14 </g>
15 </g>
16 </g>
17 </g>
18 </svg>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="tree_item_box">
3 <div
4 class="column-start-start linkLine_default"
5 v-for="(item,s_index) in list"
6 :key="s_index"
7 :class="{
8 'linkLine_first': s_index===0&list.length>1,
9 'linkLine_half_top': s_index===0&&list.length===1,
10 'linkLine_last': (s_index===(list.length-1)&&s_index!==0),
11 'third_layer':!item.children,
12 'second_layer':item.children
13 }"
14 >
15 <div
16 class="row-flex-start basic_banner"
17 @click="itemClick(item)"
18 :class="{
19 'active_color': item.expand
20 }"
21 >
22 <div
23 v-if="item.children"
24 class="reTree_icon"
25 :style="{height: (size||14*1.2) +'px',width: (size||14*1.2) +'px'}"
26 :class="{
27 'reTree_default_icon': item.children.length===0,
28 'reTree_collapse_icon': item.expand && item.children.length>0,
29 'reTree_expand_icon': !item.expand && item.children.length>0,
30 }"
31 ></div>
32 <div
33 class="layer_text nowrap"
34 :class="{
35 'active_color': item.expand
36 }"
37 >{{item.label}}</div>
38 </div>
39 <line-item
40 :list="item.children"
41 v-on="$listeners"
42 :size="size"
43 v-if="item.expand&&item.children&&item.children.length>0"
44 ></line-item>
45 </div>
46 </div>
47 </template>
48 <script>
49 export default {
50 name: "line-item",
51 props: {
52 list: {
53 type: Array,
54 default: () => {
55 return [];
56 }
57 },
58 size: {
59 type: Number,
60 default: 14
61 }
62 },
63 methods: {
64 itemClick(item) {
65 item.expand = !item.expand;
66 this.$emit("itemClick", item);
67 if (!item.children) {
68 this.$emit("valClick", item);
69 }
70 }
71 }
72 };
73 </script>
74 <style lang='less'>
75 .content {
76 height: 100%;
77 width: 100%;
78 }
79 .column-start-center {
80 display: flex;
81 display: -webkit-flex;
82 flex-direction: column;
83 justify-content: flex-start;
84 align-items: center;
85 }
86 .row-flex-start {
87 display: flex;
88 display: -webkit-flex;
89 flex-direction: row;
90 justify-content: flex-start;
91 align-items: center;
92 }
93 .nowrap {
94 overflow: hidden;
95 text-overflow: ellipsis;
96 white-space: nowrap;
97 }
98 .active_color {
99 color: #ffffff;
100 }
101 .reTree_icon {
102 width: 17px;
103 height: 17px;
104 margin-right: 10px;
105 }
106 .no_icon {
107 width: 17px;
108 height: 17px;
109 }
110 .tree_item_box {
111 position: relative;
112 width: 100%;
113 cursor: pointer;
114 }
115 .basic_layer {
116 width: 100%;
117 position: relative;
118 color: #FFFFFF;
119 cursor: pointer;
120 .layer_text {
121 flex: 1;
122 }
123 }
124 .first_vertical_line {
125 content: "";
126 position: absolute;
127 width: 1px;
128 left: 6px;
129 top: 17px;
130 background: #c3c5c8;
131 }
132 .basic_banner {
133 position: relative;
134 width: 100%;
135 padding-bottom: 13px;
136 }
137 .second_layer {
138 position: relative;
139 width: 100%;
140 cursor: pointer;
141 padding-left: 25px;
142 }
143 .third_layer {
144 position: relative;
145 // padding-bottom: 15px;
146 width: 100%;
147 padding-left: 40px;
148 color: #FFFFFF;
149 }
150
151 .second_layer::before {
152 content: "";
153 position: absolute;
154 height: 1px;
155 width: 16px;
156 left: 9px;
157 top: 9px;
158 background: #c3c5c8;
159 }
160 .third_layer::before {
161 content: "";
162 position: absolute;
163 height: 1px;
164 width: 22px;
165 left: 9px;
166 top: 9px;
167 background: #c3c5c8;
168 }
169
170 .linkLine_default::after {
171 content: "";
172 position: absolute;
173 height: 100%;
174 width: 1px;
175 left: 9px;
176 top: 0px;
177 background: #c3c5c8;
178 }
179 .linkLine_first::after {
180 content: "";
181 position: absolute;
182 /* 为了触顶 */
183 top: -14px;
184 height: calc(100% + 14px);
185 width: 1px;
186 left: 9px;
187 background: #c3c5c8;
188 }
189 // 上半截
190 .linkLine_half_top::after {
191 content: "";
192 position: absolute;
193 height: 24px;
194 top: -14px;
195 width: 1px;
196 left: 9px;
197 background: #c3c5c8;
198 }
199 .linkLine_last::after {
200 content: "";
201 position: absolute;
202 height: 9px;
203 width: 1px;
204 left: 9px;
205 top: 0px;
206 background: #c3c5c8;
207 }
208 .reTree_collapse_icon {
209 background: url("../../assets/images/reTree_collapse_.svg") no-repeat center center;
210 background-size: contain;
211 }
212
213 .reTree_default_icon {
214 background: url("../../assets/images/reTree_default_.svg") no-repeat center center;
215 background-size: contain;
216 }
217
218 .reTree_expand_icon {
219 background: url("../../assets/images/reTree_expand_.svg") no-repeat center center;
220 background-size: contain;
221 }
222
223 .reTree_focus_icon {
224 background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
225 background-size: contain;
226 }
227 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div
3 class="content column-start-center reTree_box"
4 :style="{fontSize: (size||14) +'px',lineHeight:(size||14) +'px'}"
5 style="width:347px"
6 >
7 <div class="column-start-center basic_layer" v-for="(item,index) in formatData" :key="index">
8 <div
9 class="row-flex-start basic_banner"
10 :class="{
11 'active_color': item.expand && item.children.length>0,
12
13 }"
14 @click="itemClick(item)"
15 >
16 <div
17 class="reTree_icon"
18 :style="{height: (size||14*1.2 )+'px',width: (size||14*1.2) +'px'}"
19 :class="{
20 'reTree_default_icon': item.children.length===0,
21 'reTree_collapse_icon': item.expand && item.children.length>0,
22 'reTree_expand_icon': !item.expand && item.children.length>0,
23 }"
24 ></div>
25 <div class="layer_text nowrap">{{item.label}}</div>
26 </div>
27
28 <lineItem v-if="item.expand&&item.children.length>0" v-on="$listeners" :list="item.children" :size="size"></lineItem>
29 </div>
30 </div>
31 </template>
32 <script>
33 import lineItem from "./lineItem.vue";
34 export default {
35 inheritAttrs: false,
36 props: {
37 pd: {},
38 size: {
39 type: Number,
40 default: 14
41 }
42 },
43 components: { lineItem },
44 data() {
45 return {
46 selectedDetail: {},
47 timer: {},
48 formatData: []
49 };
50 },
51 watch: {
52 pd(n, o) {
53 this.formatData = this.preDealData(n);
54 console.log(this.formatData);
55 }
56 },
57 created() {
58 console.log("lineTree create");
59 this.preDealData(this.pd);
60 },
61
62 methods: {
63 preDealData(list) {
64 list.forEach(x => {
65 if (!x.expand) this.$set(x, "expand", false);
66 if (x.children && x.children.length > 0) this.preDealData(x.children);
67 });
68 return list;
69 },
70 // 根据id展开树的具体项
71 expandTreeItemById(idList) {
72 let _this = this;
73 function loopTree(list) {
74 list.forEach(x => {
75 if (idList.includes(x.id)) {
76 _this.$set(x, "expand", true);
77 } else {
78 _this.$set(x, "expand", false);
79 }
80 if (x.children && x.children.length > 0) loopTree(x.children);
81 });
82 return list;
83 }
84 this.formatData = loopTree(this.pd);
85 },
86 itemClick(item){
87 item.expand=!item.expand
88 this.$emit('itemClick',item)
89 },
90 // 详情点击
91 detailClick(data) {
92 clearTimeout(this.timer);
93 this.timer = setTimeout(() => {
94 this.selectedDetail = data;
95 this.$emit("detailClick", data);
96 }, 300);
97 },
98 detailDoubleClick(data) {
99 clearTimeout(this.timer);
100 this.selectedDetail = data;
101 this.$emit("detailDoubleClick", data);
102 }
103 }
104 };
105 </script>
106 <style lang="less" scoped>
107 .content {
108 height: 100%;
109 width: 100%;
110 }
111 .column-start-center {
112 display: flex;
113 display: -webkit-flex;
114 flex-direction: column;
115 justify-content: flex-start;
116 align-items: center;
117 }
118 .row-flex-start {
119 display: flex;
120 display: -webkit-flex;
121 flex-direction: row;
122 justify-content: flex-start;
123 align-items: center;
124 }
125 .nowrap {
126 overflow: hidden;
127 text-overflow: ellipsis;
128 white-space: nowrap;
129 }
130 .active_color{
131 color: #FFFFFF ;
132 }
133 .reTree_box {
134 // overflow-y: auto;
135 }
136 .reTree_icon {
137 width: 17px;
138 height: 17px;
139 margin-right: 10px;
140 }
141
142 .basic_layer {
143 width: 100%;
144 position: relative;
145 color: #FFFFFF;
146 cursor: pointer;
147 .layer_text {
148 flex: 1;
149 }
150 }
151 .first_vertical_line {
152 content: "";
153 position: absolute;
154 width: 1px;
155 left: 6px;
156 top: 17px;
157 background: #c3c5c8;
158 }
159 .basic_banner {
160 position: relative;
161 width: 100%;
162 padding-bottom: 13px;
163 }
164 .second_layer {
165 position: relative;
166 width: 100%;
167 cursor: pointer;
168 padding-left: 25px;
169 }
170 .third_layer {
171 position: relative;
172 padding-bottom: 15px;
173 width: 100%;
174 padding-left: 40px;
175 color: #ffffff;
176 }
177
178 .second_layer::before {
179 content: "";
180 position: absolute;
181 height: 1px;
182 width: 16px;
183 left: 9px;
184 top: 9px;
185 background: #c3c5c8;
186 }
187 .third_layer::before {
188 content: "";
189 position: absolute;
190 height: 1px;
191 width: 20px;
192 left: 9px;
193 top: 9px;
194 background: #c3c5c8;
195 }
196
197 .linkLine_default::after {
198 content: "";
199 position: absolute;
200 height: 100%;
201 width: 1px;
202 left: 9px;
203 top: 0px;
204 background: #c3c5c8;
205 }
206 .linkLine_first::after {
207 content: "";
208 position: absolute;
209 /* 为了触顶 */
210 top: -14px;
211 height: calc(100% + 14px);
212 width: 1px;
213 left: 9px;
214 background: #c3c5c8;
215 }
216 // 上半截
217 .linkLine_half_top::after {
218 content: "";
219 position: absolute;
220 height: 24px;
221 top: -14px;
222 width: 1px;
223 left: 9px;
224 background: #c3c5c8;
225 }
226 .linkLine_last::after {
227 content: "";
228 position: absolute;
229 height: 9px;
230 width: 1px;
231 left: 9px;
232 top: 0px;
233 background: #c3c5c8;
234 }
235 .reTree_collapse_icon {
236 background: url("../../assets/images/reTree_collapse_.svg") no-repeat center center;
237 background-size: contain;
238 }
239
240 .reTree_default_icon {
241 background: url("../../assets/images/reTree_default_.svg") no-repeat center center;
242 background-size: contain;
243 }
244
245 .reTree_expand_icon {
246 background: url("../../assets/images/reTree_expand_.svg") no-repeat center center;
247 background-size: contain;
248 }
249
250 .reTree_focus_icon {
251 background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
252 background-size: contain;
253 }
254 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template> 1 <template>
2 <div class="home-box"> 2 <div class="home-box">
3 <el-container> 3 <el-container>
4 <el-aside :class="{'aside-show':isActive}"> 4 <el-aside :class="{ 'aside-show': isActive }">
5 <div class="logo-box" :class="{'logo-box-show':isActive}"> 5 <div class="logo-box" :class="{ 'logo-box-show': isActive }">
6 <img class="logo-img" src="@/assets/images/logo-realestate.png" alt=""> 6 <img
7 <span class="logo-text" v-show="!textLogo">不动产+互联网</span> 7 class="logo-img"
8 src="@/assets/images/logo-realestate.png"
9 alt=""
10 />
11 <span class="logo-text" v-show="!textLogo">不动产权籍调查系统</span>
8 </div> 12 </div>
9 <el-menu :default-active="defaultActive" :unique-opened="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isActive" background-color="#121958" text-color="#fff" active-text-color="#21FAFD" :collapse-transition="false" :router='true'> 13 <div class="treeModule">
14 <LineTree :pd="pd"></LineTree>
15 </div>
16 <el-menu
17 :default-active="defaultActive"
18 :unique-opened="true"
19 class="el-menu-vertical-demo"
20 @open="handleOpen"
21 @close="handleClose"
22 :collapse="isActive"
23 background-color="#121958"
24 text-color="#fff"
25 active-text-color="#21FAFD"
26 :collapse-transition="false"
27 :router="true"
28 >
10 <template v-for="item in menuList"> 29 <template v-for="item in menuList">
11 <el-submenu :index="item.code" :key="item.code" v-if="item.children&&item.children.length>0"> 30 <el-submenu
31 :index="item.code"
32 :key="item.code"
33 v-if="item.children && item.children.length > 0"
34 >
12 <template slot="title"> 35 <template slot="title">
13 <i :class="item.icon" style="margin-right:10px;"></i> 36 <i :class="item.icon" style="margin-right:10px;"></i>
14 <span slot="title">{{item.name}}</span> 37 <span slot="title">{{ item.name }}</span>
15 </template> 38 </template>
16 <template v-for="seconditem in item.children"> 39 <template v-for="seconditem in item.children">
17 <el-menu-item :index="seconditem.code" :key="seconditem.code" v-if="!seconditem.children" :route="{path: seconditem.path}"> 40 <el-menu-item
18 {{seconditem.name}} 41 :index="seconditem.code"
42 :key="seconditem.code"
43 v-if="!seconditem.children"
44 :route="{ path: seconditem.path }"
45 >
46 {{ seconditem.name }}
19 </el-menu-item> 47 </el-menu-item>
20 </template> 48 </template>
21 <template v-for="seconditem in item.children"> 49 <template v-for="seconditem in item.children">
22 <el-submenu :index="seconditem.code" :key="seconditem.code" v-if="seconditem.children"> 50 <el-submenu
23 <span slot="title" style="padding-left:15px;">{{seconditem.name}}</span> 51 :index="seconditem.code"
24 <el-menu-item v-for="threeitem in seconditem.children" :index="threeitem.code" :key="threeitem.code" :route="{path: threeitem.path}">{{threeitem.name}}</el-menu-item> 52 :key="seconditem.code"
53 v-if="seconditem.children"
54 >
55 <span slot="title" style="padding-left:15px;">{{
56 seconditem.name
57 }}</span>
58 <el-menu-item
59 v-for="threeitem in seconditem.children"
60 :index="threeitem.code"
61 :key="threeitem.code"
62 :route="{ path: threeitem.path }"
63 >{{ threeitem.name }}</el-menu-item
64 >
25 </el-submenu> 65 </el-submenu>
26 </template> 66 </template>
27 </el-submenu> 67 </el-submenu>
28 <el-menu-item :index="item.code" :key="item.code" v-else :route="{path: item.path}"> 68 <el-menu-item
69 :index="item.code"
70 :key="item.code"
71 v-else
72 :route="{ path: item.path }"
73 >
29 <i :class="item.icon" style="margin-right:10px;"></i> 74 <i :class="item.icon" style="margin-right:10px;"></i>
30 <span slot="title">{{item.name}}</span> 75 <span slot="title">{{ item.name }}</span>
31 </el-menu-item> 76 </el-menu-item>
32 </template> 77 </template>
33 </el-menu> 78 </el-menu>
...@@ -39,9 +84,15 @@ ...@@ -39,9 +84,15 @@
39 <i class="fa fa-outdent hamburger" v-show="!isActive"></i> 84 <i class="fa fa-outdent hamburger" v-show="!isActive"></i>
40 <i class="fa fa-indent hamburger" v-show="isActive"></i> 85 <i class="fa fa-indent hamburger" v-show="isActive"></i>
41 </div> 86 </div>
42 <div class="top-items" v-for="(item,index) in headTop" :key="index+'1'" :class="{'is-active':item.select}" @click="selectTopItems(index)"> 87 <div
88 class="top-items"
89 v-for="(item, index) in headTop"
90 :key="index + '1'"
91 :class="{ 'is-active': item.select }"
92 @click="selectTopItems(index)"
93 >
43 <i :class="item.icon"></i> 94 <i :class="item.icon"></i>
44 <span>{{item.name}}</span> 95 <span>{{ item.name }}</span>
45 </div> 96 </div>
46 </div> 97 </div>
47 <div class="header-bottom"> 98 <div class="header-bottom">
...@@ -56,87 +107,173 @@ ...@@ -56,87 +107,173 @@
56 </div> 107 </div>
57 </template> 108 </template>
58 <script> 109 <script>
59 import util from '@/libs/util.js' 110 import util from "@/libs/util.js";
60 import screenfull from "screenfull" 111 import screenfull from "screenfull";
61 import Navigation from "../components/IvyElement/navigation" 112 import Navigation from "../components/IvyElement/navigation";
62 import { setTimeout } from 'timers' 113 import LineTree from "../components/lineTree/lineTree";
63 export default { 114 import { setTimeout } from "timers";
115 export default {
64 components: { 116 components: {
65 Navigation 117 Navigation,
118 LineTree,
66 }, 119 },
67 data() { 120 data() {
68 return { 121 return {
69 navigationList: [], 122 navigationList: [],
70 isActive: false, 123 isActive: false,
71 textLogo: false, 124 textLogo: false,
72 activePath: '', 125 activePath: "",
73 defaultActive: '', 126 defaultActive: "",
74 headTop:[{ 127 headTop: [
75 select:true, 128 {
76 },{ 129 select: true,
77 select:false, 130 },
78 },{ 131 {
79 select:false, 132 select: false,
80 },{ 133 },
81 select:false, 134 {
82 },{ 135 select: false,
83 select:false, 136 },
84 } 137 {
138 select: false,
139 },
140 {
141 select: false,
142 },
85 ], 143 ],
86 // 上导航选中id 144 // 上导航选中id
87 indId: undefined, 145 indId: undefined,
88 menuList:[], 146 menuList: [],
89 pathAndCodeObj:{ 147 pathAndCodeObj: {
90 '/article-draft' : "PSH004", 148 "/article-draft": "PSH004",
91 '/article-publish': "PSH005", 149 "/article-publish": "PSH005",
92 "/article-recycle":"PSH006", 150 "/article-recycle": "PSH006",
93 "/notice-draft":"PSH007", 151 "/notice-draft": "PSH007",
94 "/notice-publish":'PSH008', 152 "/notice-publish": "PSH008",
95 "/notice-recycle":"PSH009", 153 "/notice-recycle": "PSH009",
96 "/column_management":"PSH018", 154 "/column_management": "PSH018",
97 "/announcement_template":"PSH019", 155 "/announcement_template": "PSH019",
98 "/business_management":"PSH020" 156 "/business_management": "PSH020",
99 } 157 },
158 pd: [
159 {
160 label: "第一层(1)",
161 children: [],
162 },
163 {
164 label: "第一层(2)",
165 children: [
166 {
167 label: "第二层(1)",
168 children: [],
169 },
170 {
171 label: "第二层(2)",
172 children: [
173 {
174 label: "第三层(1)",
175 children: [
176 {
177 label: "第四层",
178 children: [
179 {
180 label: "第五层",
181 children: [{ label: "第六层", }],
182 },
183 ],
184 },
185 ],
186 },
187 {
188 label: "第三层(2)",
189 },
190 {
191 label: "第三层(3)",
192 },
193 ],
194 },
195 {
196 label: "第二层(3)",
197 children: [],
198 },
199 {
200 label: "第二层(4)",
201 children: [],
202 },
203 ],
204 },
205 {
206 label: "第一层(3)",
207 children: [],
208 },
209 {
210 label: "第一层(4)",
211 children: [],
212 },
213 {
214 label: "第一层(5)",
215 children: [],
216 },
217 ],
100 }; 218 };
101 }, 219 },
102 computed: { 220 computed: {
103 permission_routes() { 221 permission_routes() {
104 return this.$store.state.permission_routes.navigation 222 return this.$store.state.permission_routes.navigation;
105 } 223 },
224 },
225 watch: {
226 "$route.path": function(newPath) {
227 this.defaultActive = this.pathAndCodeObj[newPath];
106 }, 228 },
107 watch:{
108 '$route.path':function(newPath){
109 this.defaultActive = this.pathAndCodeObj[newPath]
110 }
111 }, 229 },
112 created() { 230 created() {
113 if ( this.$route.meta ) { 231 if (this.$route.meta) {
114 this.defaultActive = this.$route.meta.code 232 this.defaultActive = this.$route.meta.code;
115 } 233 }
116 if( this.permission_routes.length!==0 ){ 234 if (this.permission_routes.length !== 0) {
117 this.navigationList = this.permission_routes 235 this.navigationList = this.permission_routes;
118 } else { 236 } else {
119 let list = JSON.parse(util.cookies.get('navigation-1')).concat(JSON.parse(util.cookies.get('navigation'))) 237 // let list = JSON.parse(util.cookies.get('navigation-1')).concat(JSON.parse(util.cookies.get('navigation')))
120 this.navigationList = list 238 //mock数据
239 let list = [
240 {
241 name: "新建",
242 icon: "fa fa-address-card-o",
243 path: "/officialAccount_panel",
244 },
245 { name: "更正", icon: "fa fa-address-card-o", path: "/applets_panel" },
246 {
247 name: "变更",
248 icon: "fa fa-address-card-o",
249 path: "/appointment_panel",
250 },
251 {
252 name: "综合查询",
253 icon: "fa fa-address-card-o",
254 path: "/system_panel",
255 },
256 ];
257 this.navigationList = list;
121 } 258 }
122 this.sortNavigation(this.navigationList,0) 259 this.sortNavigation(this.navigationList, 0);
123 if (util.cookies.get('indId')) { 260 if (util.cookies.get("indId")) {
124 let indId = util.cookies.get('indId')-0 261 let indId = util.cookies.get("indId") - 0;
125 this.navSelect(indId) 262 this.navSelect(indId);
126 this.sortNavigation(this.navigationList,indId) 263 this.sortNavigation(this.navigationList, indId);
127 } 264 }
128 }, 265 },
129 methods: { 266 methods: {
130 sortNavigation( data,selectId) { 267 sortNavigation(data, selectId) {
131 let headTop = this.headTop 268 let headTop = this.headTop;
132 data.forEach((item, index) => { 269 data.forEach((item, index) => {
133 headTop[index].name = item.name 270 headTop[index].name = item.name;
134 headTop[index].icon = item.icon 271 headTop[index].icon = item.icon;
135 }) 272 });
136 this.menuSelect(data,selectId) 273 this.menuSelect(data, selectId);
137 }, 274 },
138 menuSelect(data,selectId) { 275 menuSelect(data, selectId) {
139 this.menuList = data[selectId].children 276 this.menuList = data[selectId].children;
140 }, 277 },
141 handleOpen(key, keyPath) { 278 handleOpen(key, keyPath) {
142 console.log(key, keyPath); 279 console.log(key, keyPath);
...@@ -144,33 +281,33 @@ ...@@ -144,33 +281,33 @@
144 handleClose(key, keyPath) { 281 handleClose(key, keyPath) {
145 console.log(key, keyPath); 282 console.log(key, keyPath);
146 }, 283 },
147 toggleClick(){ 284 toggleClick() {
148 this.isActive=!this.isActive; 285 this.isActive = !this.isActive;
149 if(!this.isActive){ 286 if (!this.isActive) {
150 setTimeout(()=>{ 287 setTimeout(() => {
151 this.textLogo=this.isActive; 288 this.textLogo = this.isActive;
152 },200) 289 }, 200);
153 }else{ 290 } else {
154 this.textLogo=this.isActive; 291 this.textLogo = this.isActive;
155 } 292 }
156 }, 293 },
157 selectTopItems(ind){ 294 selectTopItems(ind) {
158 this.indId = ind 295 this.indId = ind;
159 this.menuSelect(this.navigationList,ind) 296 this.menuSelect(this.navigationList, ind);
160 this.$store.dispatch("setTabs/init_tabs") 297 this.$store.dispatch("setTabs/init_tabs");
161 this.$store.dispatch("setTabs/set_active_index", "/panel") 298 this.$store.dispatch("setTabs/set_active_index", "/panel");
162 this.$router.push("/panel") 299 this.$router.push("/panel");
163 this.navSelect(ind) 300 this.navSelect(ind);
164 util.cookies.set('indId',ind) 301 util.cookies.set("indId", ind);
165 }, 302 },
166 // 上导航选中id 303 // 上导航选中id
167 navSelect (id) { 304 navSelect(id) {
168 this.headTop.forEach((item,index)=>{ 305 this.headTop.forEach((item, index) => {
169 item.select=false 306 item.select = false;
170 if(index==id){ 307 if (index == id) {
171 item.select=true 308 item.select = true;
172 } 309 }
173 }) 310 });
174 }, 311 },
175 screen() { 312 screen() {
176 // 如果不允许进入全屏，发出不允许提示 313 // 如果不允许进入全屏，发出不允许提示
...@@ -179,25 +316,25 @@ ...@@ -179,25 +316,25 @@
179 // return false 316 // return false
180 // } 317 // }
181 screenfull.toggle(); 318 screenfull.toggle();
182 } 319 },
183 } 320 },
184 }; 321 };
185 </script> 322 </script>
186 <style lang="less" scoped> 323 <style lang="less" scoped>
187 .home-box { 324 .home-box {
188 width: 100%; 325 width: 100%;
189 height: 100vh; 326 height: 100vh;
190 .el-container { 327 .el-container {
191 height: 100%; 328 height: 100%;
192 } 329 }
193 .el-header{ 330 .el-header {
194 background-color: #fff; 331 background-color: #fff;
195 padding: 0 !important; 332 padding: 0 !important;
196 .header-top{ 333 .header-top {
197 height: 60px; 334 height: 60px;
198 border-bottom:1px solid rgba(242,242,242,1); 335 border-bottom: 1px solid rgba(242, 242, 242, 1);
199 box-sizing: border-box; 336 box-sizing: border-box;
200 .top-items{ 337 .top-items {
201 cursor: pointer; 338 cursor: pointer;
202 height: 60px; 339 height: 60px;
203 padding: 0 30px; 340 padding: 0 30px;
...@@ -205,76 +342,80 @@ ...@@ -205,76 +342,80 @@
205 line-height: 60px; 342 line-height: 60px;
206 float: left; 343 float: left;
207 position: relative; 344 position: relative;
208 color: #4A4A4A; 345 color: #4a4a4a;
209 i{ 346 i {
210 margin-right: 6px; 347 margin-right: 6px;
211 } 348 }
212 .hamburger{ 349 .hamburger {
213 font-size: 16px; 350 font-size: 16px;
214 line-height: 60px; 351 line-height: 60px;
215 color: #000; 352 color: #000;
216 } 353 }
217 } 354 }
218 .top-items:not(:last-child)::after{ 355 .top-items:not(:last-child)::after {
219 content: ""; 356 content: "";
220 width:1px; 357 width: 1px;
221 height: 14px; 358 height: 14px;
222 background: #EAEAEA; 359 background: #eaeaea;
223 position: absolute; 360 position: absolute;
224 right: -1px; 361 right: -1px;
225 top: 24px; 362 top: 24px;
226 } 363 }
227 .top-items.is-active { 364 .top-items.is-active {
228 color: #00CACD; 365 color: #006cff;
229 } 366 }
230 } 367 }
231 .header-bottom{ 368 .header-bottom {
232 height: 50px; 369 height: 50px;
233 box-shadow:0px 2px 4px 0px rgba(222,222,222,0.7); 370 box-shadow: 0px 2px 4px 0px rgba(222, 222, 222, 0.7);
234 border-bottom:1px solid rgba(234,234,234,1); 371 border-bottom: 1px solid rgba(234, 234, 234, 1);
235 box-sizing: border-box; 372 box-sizing: border-box;
236 } 373 }
237 } 374 }
238 .el-aside { 375 .el-aside {
239 width: 200px !important; 376 width: 290px !important;
240 background-color: #121958; 377 background-color: #1d50dd;
241 color: #333; 378 color: #333;
242 // text-align: center; 379 // text-align: center;
243 overflow: hidden; 380 overflow: hidden;
244 transition:width 0.3s; 381 transition: width 0.3s;
245 .logo-box{ 382 .logo-box {
246 width: 200px; 383 width: 100%;
247 height: 120px; 384 height: 120px;
248 border-bottom:1px solid rgba(255, 255, 255, 0.2); 385 border-bottom: 1px solid rgba(255, 255, 255, 0.2);
249 padding: 30px 0 28px 0; 386 padding: 30px 0 28px 0;
250 box-sizing: border-box; 387 box-sizing: border-box;
251 display: flex; 388 display: flex;
252 flex-direction: column; 389 flex-direction: column;
253 justify-content: space-between; 390 justify-content: space-between;
254 align-items: center; 391 align-items: center;
255 transition:width 0.3s; 392 transition: width 0.3s;
256 .logo-img{ 393 .logo-img {
257 width: 38px; 394 width: 38px;
258 height: 38px;; 395 height: 38px;
259 } 396 }
260 .logo-text{ 397 .logo-text {
261 font-size:14px; 398 font-size: 14px;
262 color:rgba(255,255,255,1); 399 color: rgba(255, 255, 255, 1);
263 line-height: 14px; 400 line-height: 14px;
264 } 401 }
265 } 402 }
266 .logo-box-show{ 403 .treeModule {
404 box-sizing: border-box;
405 padding: 20px 10px;
406 }
407 .logo-box-show {
267 width: 64px; 408 width: 64px;
268 } 409 }
269 .el-menu{ 410 .el-menu {
270 border-right:0; 411 border-right: 0;
271 } 412 }
272 .el-submenu .el-menu-item{ 413 .el-submenu .el-menu-item {
273 text-align: left; 414 text-align: left;
274 text-indent: 15px; 415 text-indent: 15px;
275 } 416 }
276 } 417 }
277 .aside-show{ 418 .aside-show {
278 width: 64px !important; 419 width: 64px !important;
279 } 420 }
280 421
...@@ -285,5 +426,5 @@ ...@@ -285,5 +426,5 @@
285 // line-height: 160px; 426 // line-height: 160px;
286 padding: 0; 427 padding: 0;
287 } 428 }
288 } 429 }
289 </style> 430 </style>
......