Skip to content

任超 / js.CadastralSystem

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

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

1 parent 1e902b9e
Expand all
Inline Side-by-side
Showing 7 changed files with 553 additions and 0 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