style:宗地图
Showing
2 changed files
with
45 additions
and
275 deletions
src/views/workflow/components/zdt.vue
0 → 100644
1 | <!-- | ||
2 | * @Description: | ||
3 | * @Autor: renchao | ||
4 | * @LastEditTime: 2023-06-01 09:48:15 | ||
5 | --> | ||
6 | <template> | ||
7 | <canvas id="mxcad"> | ||
8 | </canvas> | ||
9 | </template> | ||
10 | <script> | ||
11 | import Mx from "mxdraw" | ||
12 | export default { | ||
13 | mounted () { | ||
14 | // 动态加载 js库核心代码 | ||
15 | Mx.loadCoreCode().then(() => { | ||
16 | // Mx.MxFun.setMxServer("ws://localhost:5090") // 开启socket通信 可编辑图纸 | ||
17 | // 创建控件对象 | ||
18 | Mx.MxFun.createMxObject({ | ||
19 | canvasId: "mxcad", // canvas元素的id | ||
20 | cadFile: "/buf/hhhh.dwg", // http方式(预览): 加载public/demo文件夹下转换后的图纸 | ||
21 | // cadFile: "test2.dwg", // socket通信方式请直接提供图纸名称 如:text.dwg | ||
22 | callback: (mxDraw, { | ||
23 | canvas, | ||
24 | canvasParent | ||
25 | }) => { | ||
26 | // 可以拿到canvas元素和它的父级元素 | ||
27 | console.log(canvas, canvasParent) | ||
28 | console.log(mxDraw) | ||
29 | // 拿到图层数据 | ||
30 | mxDraw.addEvent('uiSetLayerData', (listLayer) => { | ||
31 | console.log(listLayer) | ||
32 | }) | ||
33 | }, | ||
34 | isNewFile: true // 是否新建文件 | ||
35 | }) | ||
36 | }) | ||
37 | } | ||
38 | } | ||
39 | </script> | ||
40 | <style scoped lang='scss'> | ||
41 | #cad-container { | ||
42 | width: 100%; | ||
43 | height: 100%; | ||
44 | } | ||
45 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
1 | <template> | ||
2 | <div class="ywsq" id="ywsq"> | ||
3 | <div class="ywsq-left"> | ||
4 | <p v-for="(item, index) in sqywlxList" @click="sqywlxClick(item)" :key="index" | ||
5 | :class="{ 'active': selectType == item.type }">{{ item.name }}</p> | ||
6 | <el-collapse disabled v-model="activeNames"> | ||
7 | <el-collapse-item title="业务申请" name="1"> | ||
8 | <ul class="item-list"> | ||
9 | <li v-for="(item, index) in sqywQllxList" :key="index" @click="qllxClick(index)" | ||
10 | :class="item.check ? 'active' : ''"> | ||
11 | {{ item.nodename }}</li> | ||
12 | </ul> | ||
13 | </el-collapse-item> | ||
14 | </el-collapse> | ||
15 | </div> | ||
16 | <div class="ywsq-right"> | ||
17 | <!-- 常办业务 --> | ||
18 | <div v-show="selectType == 'collect'" class="right-situation el-card"> | ||
19 | <div class="right-title">常办业务列表</div> | ||
20 | <ul> | ||
21 | <li :class="item.selected ? 'cactive' : ''" v-for="(item, index) in collectList" :key="index" | ||
22 | @dblclick="dblclick(collectList, index, item)" @click="selectSqywClick(collectList, index)"> | ||
23 | <p v-if="item.nodetype == 'djqx'">{{ item.djywmc }}<br>{{ item.nodename }}</p> | ||
24 | <dt v-else>{{ item.djywmc }}</dt> | ||
25 | <p class="active" @click.stop="handleCollection(item)"> | ||
26 | <i class="el-icon-star-off"></i> | ||
27 | </p> | ||
28 | </li> | ||
29 | </ul> | ||
30 | </div> | ||
31 | <!-- 一并申请 --> | ||
32 | <div v-if="selectType == 'together'" class="right-title">一并申请</div> | ||
33 | <!-- 登记簿补录 --> | ||
34 | <div v-if="selectType == 'amend'" class="right-title">登记簿补录</div> | ||
35 | <!-- 业务申请 --> | ||
36 | <template v-if="selectType == 'apply'"> | ||
37 | <div class="right-type el-card box-card is-always-shadow"> | ||
38 | <div class="right-title">登记类型</div> | ||
39 | <ul class="type-content"> | ||
40 | <li :class="item.selected ? 'cactive' : ''" @dblclick="item.sffqlc == 1 && dblclick(djlxList, index, item)" | ||
41 | @click="selectSqywClick(djlxList, index)" v-for="(item, index) in djlxList" :key="index"> | ||
42 | <p> | ||
43 | {{ item.nodename }} | ||
44 | </p> | ||
45 | <p v-if="item.sffqlc == 1" :class="item.userCollect == 1 ? 'active' : ''" | ||
46 | @click.stop="handleCollection(item)"> | ||
47 | <i class="el-icon-star-off"></i> | ||
48 | </p> | ||
49 | </li> | ||
50 | </ul> | ||
51 | </div> | ||
52 | <div class="right-situation el-card box-card is-always-shadow"> | ||
53 | <div class="right-title">登记情形</div> | ||
54 | <ul> | ||
55 | <li :class="item.selected ? 'cactive' : ''" v-for="(item, index) in djqxList" :key="index" | ||
56 | @dblclick="dblclick(djqxList, index, item)" @click="selectSqywClick(djqxList, index)"> | ||
57 | <dt>{{ item.nodename }}</dt> | ||
58 | <p :class="item.userCollect == 1 ? 'active' : ''" @click.stop="handleCollection(item)"> | ||
59 | <i class="el-icon-star-off"></i> | ||
60 | </p> | ||
61 | </li> | ||
62 | </ul> | ||
63 | </div> | ||
64 | </template> | ||
65 | <div class="submit-button"> | ||
66 | <el-button type="primary" :disabled="btnDisabled" @click="dialogClick">选择不动产</el-button> | ||
67 | </div> | ||
68 | </div> | ||
69 | </div> | ||
70 | </template> | ||
71 | <script> | ||
72 | import { getCollectBiz, getleftMenu, getNextNode, addCollectBiz, deleteCollectBiz } from "@/api/ywbl" | ||
73 | export default { | ||
74 | data () { | ||
75 | return { | ||
76 | //申请业务类型集合 | ||
77 | sqywlxList: [ | ||
78 | { name: "常办业务", type: "collect" }, | ||
79 | { name: "一并申请", type: "together" }, | ||
80 | { name: "登记簿补录", type: "amend" } | ||
81 | ], | ||
82 | //类型默认选择常办业务 | ||
83 | selectType: "collect", | ||
84 | //堆叠框选中第一个 | ||
85 | activeNames: ['1'], | ||
86 | //收藏业务集合 | ||
87 | collectList: [], | ||
88 | //申请权利类型集合 | ||
89 | sqywQllxList: [], | ||
90 | //登记类型集合 | ||
91 | djlxList: [], | ||
92 | //申请权利类型集合 | ||
93 | djqxList: [], | ||
94 | //选中业务的参数 | ||
95 | selectParam: {}, | ||
96 | //选择按钮显示或隐藏 | ||
97 | btnDisabled: true, | ||
98 | } | ||
99 | }, | ||
100 | created () { | ||
101 | this.getDataList(); | ||
102 | }, | ||
103 | methods: { | ||
104 | getDataList () { | ||
105 | //获取收藏信息集合 | ||
106 | getCollectBiz().then(res => { | ||
107 | this.collectList = res.result; | ||
108 | this.collectList.forEach(item => { | ||
109 | this.$set(item, 'selected', false); | ||
110 | }); | ||
111 | }); | ||
112 | //获取申请权利信息集合 | ||
113 | getleftMenu().then(res => { | ||
114 | this.sqywQllxList = res.result; | ||
115 | }) | ||
116 | }, | ||
117 | //申请业务类型菜单事件 | ||
118 | sqywlxClick (item) { | ||
119 | this.btnDisabled = true; | ||
120 | this.selectType = item.type; | ||
121 | this.sqywQllxList.forEach(item => { | ||
122 | if (item.check) item.check = false; | ||
123 | }) | ||
124 | }, | ||
125 | //权利类型菜单事件 | ||
126 | qllxClick (index) { | ||
127 | this.btnDisabled = true; | ||
128 | this.sqywQllxList.forEach(item => { | ||
129 | if (item.check) item.check = false; | ||
130 | }) | ||
131 | this.sqywQllxList[index].check = true; | ||
132 | this.selectType = "apply"; | ||
133 | this.djlxList = []; | ||
134 | this.djqxList = []; | ||
135 | this.getNextNode(this.sqywQllxList[index].bsmSqyw); | ||
136 | }, | ||
137 | //选择申请业务事件 | ||
138 | selectSqywClick (data, index) { | ||
139 | data.forEach(item => { | ||
140 | item.selected = false; | ||
141 | }); | ||
142 | data[index].selected = true; | ||
143 | if (data[index].sffqlc == "1") { | ||
144 | this.selectParam = data[index]; | ||
145 | this.btnDisabled = false; | ||
146 | } else { | ||
147 | this.btnDisabled = true; | ||
148 | this.getNextNode(data[index].bsmSqyw); | ||
149 | } | ||
150 | }, | ||
151 | //获取下个节点类型数据 | ||
152 | getNextNode (bsmSqyw) { | ||
153 | getNextNode(bsmSqyw).then(res => { | ||
154 | if (res.result.djqx) { | ||
155 | this.djqxList = res.result.djqx; | ||
156 | this.djqxList.forEach(item => { | ||
157 | this.$set(item, 'selected', false); | ||
158 | }); | ||
159 | } | ||
160 | if (res.result.djlx) { | ||
161 | this.djlxList = res.result.djlx; | ||
162 | this.djlxList.forEach(item => { | ||
163 | this.$set(item, 'selected', false); | ||
164 | }); | ||
165 | } | ||
166 | }) | ||
167 | }, | ||
168 | //双击事件 | ||
169 | dblclick (data, index, item) { | ||
170 | localStorage.setItem('ywbl', JSON.stringify(item)); | ||
171 | this.selectSqywClick(data, index); | ||
172 | this.dialogClick(); | ||
173 | }, | ||
174 | //打开弹框内容 | ||
175 | dialogClick () { | ||
176 | this.openDialog(); | ||
177 | }, | ||
178 | //收藏操作 | ||
179 | handleCollection (item) { | ||
180 | let that = this | ||
181 | if (item.userCollect == '2') { | ||
182 | addCollectBiz(item.bsmSqyw).then(res => { | ||
183 | if (res.code == 200) { | ||
184 | item.userCollect = '1' | ||
185 | that.$message({ | ||
186 | message: '收藏成功!', | ||
187 | type: 'success' | ||
188 | }) | ||
189 | that.getDataList() | ||
190 | } | ||
191 | }) | ||
192 | } else { | ||
193 | this.$confirm('此操作将取消收藏, 是否继续?', '提示', { | ||
194 | confirmButtonText: '确定', | ||
195 | cancelButtonText: '取消', | ||
196 | type: 'warning' | ||
197 | }).then(() => { | ||
198 | deleteCollectBiz(item.bsmSqyw).then(res => { | ||
199 | if (res.code == 200) { | ||
200 | item.userCollect = '2' | ||
201 | that.$message({ | ||
202 | message: '取消收藏成功!', | ||
203 | type: 'success' | ||
204 | }) | ||
205 | that.getDataList() | ||
206 | } | ||
207 | }) | ||
208 | }) | ||
209 | } | ||
210 | }, | ||
211 | handleSelect (item) { | ||
212 | this.busList.forEach(item => { | ||
213 | item.cselect = false | ||
214 | }) | ||
215 | item.cselect = !item.cselect | ||
216 | }, | ||
217 | // 登记类型 | ||
218 | handleDjlxSelect (item) { | ||
219 | this.djlxList.forEach(item => { | ||
220 | item.cselect = false | ||
221 | }) | ||
222 | this.btnDisabled = true | ||
223 | item.cselect = true; | ||
224 | this.djqxObj = item; | ||
225 | if (item.sffqlc == '1') { | ||
226 | this.btnDisabled = false | ||
227 | this.bsmSqyw = item.bsmSqyw | ||
228 | this.djywbm = item.djywbm; | ||
229 | } else { | ||
230 | this.getNextNode(item.bsmSqyw, false) | ||
231 | } | ||
232 | this.djqxList = [] | ||
233 | }, | ||
234 | handleDjqxItem (item) { | ||
235 | this.djlxList.forEach(item => { | ||
236 | item.cselect = false | ||
237 | }) | ||
238 | if (item.sffqlc == 1) { | ||
239 | this.djywbm = item.djywbm | ||
240 | this.bsmSqyw = item.bsmSqyw | ||
241 | item.cselect = true | ||
242 | this.openDialog() | ||
243 | this.btnDisabled = true | ||
244 | } | ||
245 | }, | ||
246 | handleSelectItem (item, list) { | ||
247 | this.handleSelectYw(item, list) | ||
248 | this.openDialog() | ||
249 | }, | ||
250 | // 选择不动产信息 | ||
251 | bthSelectClick () { | ||
252 | this.openDialog() | ||
253 | }, | ||
254 | openDialog () { | ||
255 | let title = "申请业务:" + this.selectParam?.djywmc ? this.selectParam?.djywmc : ''; | ||
256 | this.$popupDialog(title, "ywbl/ywsq/selectBdc", { 'sqywInfo': this.selectParam }, "80%") | ||
257 | }, | ||
258 | loadView (view) { | ||
259 | return r => require.ensure([], () => r(require(`./components/${view}/${view}.vue`))) | ||
260 | } | ||
261 | } | ||
262 | } | ||
263 | </script> | ||
264 | <style scoped lang='scss'> | ||
265 | @import "~@/styles/mixin.scss"; | ||
266 | @import "./ywsq.scss"; | ||
267 | |||
268 | /deep/.el-collapse-item__content { | ||
269 | padding-bottom: 0; | ||
270 | } | ||
271 | |||
272 | /deep/.el-collapse-item__wrap { | ||
273 | border-bottom: none; | ||
274 | } | ||
275 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or sign in to post a comment