Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
a88ab7fa by 杨威
Options

首页和右侧树结构样式及图片修改

1 parent e0480c6f
Inline Side-by-side
Showing 15 changed files with 103 additions and 88 deletions
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>icon_files_collapse_</title>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 56.3 (81716) - https://sketch.com -->
<title>子</title>
<desc>Created with Sketch.</desc>
<g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1--报告工作站_书写报告" transform="translate(-100.000000, -217.000000)">
<g id="模板" transform="translate(80.000000, 51.000000)">
<g id="分组" transform="translate(20.000000, 135.000000)">
<g id="icon_files_collapse_" transform="translate(0.000000, 31.000000)">
<rect id="矩形-copy-18" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
<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>
</g>
<g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="画板" transform="translate(-4.000000, -58.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="子" transform="translate(4.000000, 58.000000)">
<path d="M2,0.5 L12,0.5 C12.8284271,0.5 13.5,1.17157288 13.5,2 L13.5,12 C13.5,12.8284271 12.8284271,13.5 12,13.5 L2,13.5 C1.17157288,13.5 0.5,12.8284271 0.5,12 L0.5,2 C0.5,1.17157288 1.17157288,0.5 2,0.5 Z M2,1.5 C1.72385763,1.5 1.5,1.72385763 1.5,2 L1.5,12 C1.5,12.2761424 1.72385763,12.5 2,12.5 L12,12.5 C12.2761424,12.5 12.5,12.2761424 12.5,12 L12.5,2 C12.5,1.72385763 12.2761424,1.5 12,1.5 L2,1.5 Z" id="矩形"></path>
<g id="编组-5" transform="translate(4.000000, 3.500000)">
<path d="M0,4 L6,4 C6.27614237,4 6.5,3.77614237 6.5,3.5 C6.5,3.22385763 6.27614237,3 6,3 L0,3 C-0.276142375,3 -0.5,3.22385763 -0.5,3.5 C-0.5,3.77614237 -0.276142375,4 0,4 Z" id="直线-3"></path>
</g>
</g>
</g>
......
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>icon_file_default_</title>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 56.3 (81716) - https://sketch.com -->
<title>正</title>
<desc>Created with Sketch.</desc>
<g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1--报告工作站_书写报告" transform="translate(-127.000000, -246.000000)">
<g id="模板" transform="translate(80.000000, 51.000000)">
<g id="分组" transform="translate(20.000000, 135.000000)">
<g id="icon_file_default_" transform="translate(27.000000, 60.000000)">
<rect id="矩形" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
<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>
</g>
</g>
<g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="画板" transform="translate(-4.000000, -77.000000)">
<g id="正" transform="translate(4.000000, 77.000000)">
<path d="M2,0.5 L12,0.5 C12.8284271,0.5 13.5,1.17157288 13.5,2 L13.5,12 C13.5,12.8284271 12.8284271,13.5 12,13.5 L2,13.5 C1.17157288,13.5 0.5,12.8284271 0.5,12 L0.5,2 C0.5,1.17157288 1.17157288,0.5 2,0.5 Z M2,1.5 C1.72385763,1.5 1.5,1.72385763 1.5,2 L1.5,12 C1.5,12.2761424 1.72385763,12.5 2,12.5 L12,12.5 C12.2761424,12.5 12.5,12.2761424 12.5,12 L12.5,2 C12.5,1.72385763 12.2761424,1.5 12,1.5 L2,1.5 Z" id="矩形" fill="#FFFFFF" fill-rule="nonzero"></path>
<g id="编组-5" transform="translate(3.000000, 3.500000)"></g>
</g>
</g>
</g>
......
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>icon_files_expand_</title>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 56.3 (81716) - https://sketch.com -->
<title>父</title>
<desc>Created with Sketch.</desc>
<g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1--报告工作站_书写报告" transform="translate(-100.000000, -187.000000)">
<g id="模板" transform="translate(80.000000, 51.000000)">
<g id="分组" transform="translate(20.000000, 135.000000)">
<g id="icon_files_expand_" transform="translate(0.000000, 1.000000)">
<rect id="矩形-copy-17" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
<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>
</g>
<g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="画板" transform="translate(-4.000000, -41.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="父" transform="translate(4.000000, 41.000000)">
<path d="M2,0.5 L12,0.5 C12.8284271,0.5 13.5,1.17157288 13.5,2 L13.5,12 C13.5,12.8284271 12.8284271,13.5 12,13.5 L2,13.5 C1.17157288,13.5 0.5,12.8284271 0.5,12 L0.5,2 C0.5,1.17157288 1.17157288,0.5 2,0.5 Z M2,1.5 C1.72385763,1.5 1.5,1.72385763 1.5,2 L1.5,12 C1.5,12.2761424 1.72385763,12.5 2,12.5 L12,12.5 C12.2761424,12.5 12.5,12.2761424 12.5,12 L12.5,2 C12.5,1.72385763 12.2761424,1.5 12,1.5 L2,1.5 Z" id="矩形"></path>
<g id="编组-5" transform="translate(4.000000, 3.500000)">
<path d="M0,4 L6,4 C6.27614237,4 6.5,3.77614237 6.5,3.5 C6.5,3.22385763 6.27614237,3 6,3 L0,3 C-0.276142375,3 -0.5,3.22385763 -0.5,3.5 C-0.5,3.77614237 -0.276142375,4 0,4 Z" id="直线-3"></path>
<path d="M0,4 L6,4 C6.27614237,4 6.5,3.77614237 6.5,3.5 C6.5,3.22385763 6.27614237,3 6,3 L0,3 C-0.276142375,3 -0.5,3.22385763 -0.5,3.5 C-0.5,3.77614237 -0.276142375,4 0,4 Z" id="直线-3" transform="translate(3.000000, 3.500000) rotate(-270.000000) translate(-3.000000, -3.500000) "></path>
</g>
</g>
</g>
......
......@@ -35,7 +35,7 @@
></div>
<div
class="layer_text nowrap"
@contextmenu.prevent="openMenu($event, item)"
@contextmenu.prevent="openMenu($event, item,list)"
:class="{
active_color: item.expand,
}"
......@@ -86,7 +86,8 @@ export default {
// 开启延时器，300ms的间隔区分单击和双击，解决双击时执行两次单击事件
clearTimeout(self.time);
self.time = setTimeout(() => {
item.expand = !item.expand;
item.expand = item.expand == undefined? true:!item.expand;
self.$emit("itemClick", item);
if (!item.children) {
self.$emit("valClick", item);
......@@ -94,10 +95,17 @@ export default {
}, 300);
},
// 右键点击事件
openMenu(e, item) {
openMenu(e, item,list) {
console.log(list,'右键list');
this.$emit("changeTop", e.pageY);
this.$emit("changeLeft", e.pageX);
this.$emit("changeZdData",item);
//判断所有权类型
console.log(item.dm,'item.dm ');
if(item.dm == 'G' || item.dm == 'J' ||item.dm == 'Z'){
this.$emit("changeCreateVisible", true);
}
//判断楼盘类型
switch (item.type) {
case 'zd':
this.$emit("changeIsZD", true);
......@@ -224,9 +232,10 @@ export default {
position: absolute;
height: 1px;
width: 16px;
left: 9px;
top: 9px;
background: url('../../assets/images/rowline.png');
left: 8px;
top: 8px;
opacity: .5;
background: url('../../assets/images/rowline1.png');
background-position-y: center;
}
.third_layer::before {
......@@ -234,9 +243,10 @@ export default {
position: absolute;
height: 1px;
width: 22px;
left: 9px;
top: 9px;
background: url('../../assets/images/rowline.png');
left: 8px;
top: 8px;
opacity: .5;
background: url('../../assets/images/rowline1.png');
background-position-y: center;
}
......@@ -247,7 +257,8 @@ export default {
width: 1px;
left: 7px;
top: 0px;
background: url('../../assets/images/colline.png');
opacity: .5;
background: url('../../assets/images/colline1.png');
background-position-x: center;
}
.linkLine_first::after {
......@@ -258,7 +269,8 @@ export default {
height: calc(100% + 14px);
width: 1px;
left: 7px;
background: url('../../assets/images/colline.png');
opacity: .5;
background: url('../../assets/images/colline1.png');
background-position-x: center;
}
// 上半截
......@@ -269,7 +281,8 @@ export default {
top: -14px;
width: 1px;
left: 7px;
background: url('../../assets/images/colline.png');
opacity: .5;
background: url('../../assets/images/colline1.png');
background-position-x: center;
}
.linkLine_last::after {
......@@ -279,28 +292,33 @@ export default {
width: 1px;
left: 7px;
top: 0px;
background: url('../../assets/images/colline.png');
opacity: .5;
background: url('../../assets/images/colline1.png');
background-position-x: center;
}
.reTree_collapse_icon {
opacity: .5;
background: url("../../assets/images/reTree_collapse_.svg") no-repeat center
center;
background-size: contain;
}
.reTree_default_icon {
opacity: .5;
background: url("../../assets/images/reTree_default_.svg") no-repeat center
center;
background-size: contain;
}
.reTree_expand_icon {
opacity: .5;
background: url("../../assets/images/reTree_expand_.svg") no-repeat center
center;
background-size: contain;
}
.reTree_focus_icon {
opacity: .5;
background: url("../../assets/images/reTree_focus_.svg") no-repeat center
center;
background-size: contain;
......
......@@ -40,6 +40,7 @@
@changeVisible="changeVisible"
@changeLpbVisible="changeLpbVisible"
@changeIsZD="changeIsZD"
@changeCreateVisible="changeCreateVisible"
:list="item.children"
:visible="visible"
:size="size"
......@@ -62,13 +63,20 @@
<li @click="deleteByBsm()">删除</li>
</ul>
<ul
v-show="createVisible"
:style="{ left: left + 'px', top: top + 'px' }"
class="contextmenu"
>
<li @click="openCreateDialog">新建宗地</li>
</ul>
<ul
v-show="lpbvisible"
:style="{ left: lpbleft + 'px', top: lpbtop + 'px' }"
class="contextmenu"
>
<li v-show="zdData.type == 'zrz'" @click="openLpbDialog('ljz')">添加逻辑幢</li>
<li v-show="zdData.type == 'zrz' || zdData.type == 'ljz'" @click="openLpbDialog('zdy')">添加幢单元</li>
<li @click="openLpbDialog('ch')">添加层户</li>
<li v-show="zdData.type == 'zrz' || zdData.type == 'ljz' || zdData.type == 'zdy'" @click="openLpbDialog('ch')">添加层户</li>
</ul>
<!-- 添加定着物弹框 -->
<el-dialog title="新建" :visible.sync="dialogVisible" width="40%">
......@@ -109,6 +117,8 @@ export default {
lpbvisible: false,
lpbtop: 0,
lpbleft: 0,
//控制新建宗地菜单
createVisible:false,
};
},
watch: {
......@@ -123,12 +133,20 @@ export default {
} else {
document.body.removeEventListener("click", this.closeMenu);
}
},
createVisible(value) {
if (value) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
}
},
created() {
console.log("lineTree create");
this.preDealData(this.pd);
this.expandTreeItemById(["6b5af49d803f97baf06afb897de257f5"]);
// this.preDealData(this.pd);
// this.expandTreeItemById(["6b5af49d803f97baf06afb897de257f5"]);
},
methods: {
......@@ -153,9 +171,12 @@ export default {
changeLpbVisible(data) {
this.lpbvisible = data;
},
changeCreateVisible(data){
this.createVisible = true;
},
//添加定着物
openCreateDialog(){
this.dialogVisible = true
this.dialogVisible = true;
this.$store.state.rightClickZdbsm = this.zdData.zdbsm;
},
//关闭添加定着物弹框
......@@ -163,12 +184,8 @@ export default {
this.dialogVisible = false;
},
preDealData(list) {
list.forEach((x) => {
if (!x.expand) this.$set(x, "expand", true);
if (x.children && x.children.length > 0) {
this.preDealData(x.children);
}
});
//楼盘表目录树没有expand属性
list[0].expand = list[0].expand == undefined ? true:list[0].expand;
return list;
},
// 根据id展开树的具体项
......@@ -189,7 +206,7 @@ export default {
console.log(this.formatData, "this.formatData");
},
itemClick(item) {
item.expand = !item.expand;
item.expand = item.expand == undefined? true:!item.expand;
this.$emit("itemClick", item);
},
// 详情点击
......@@ -202,14 +219,16 @@ export default {
},
//自然幢右键点击事件
openMenu(e,item){
console.log(item,'右键item');
this.lpbleft = e.pageX;
this.lpbtop = e.pageY;
this.zdData = item;
this.changeLpbVisible(true);
},
//关闭自然幢右击菜单
//关闭右键菜单
closeMenu(){
this.lpbvisible = false
this.lpbvisible = false;
this.createVisible = false;
},
//楼盘表右键菜单项打开父组件弹框
openLpbDialog(type){
......@@ -222,22 +241,7 @@ export default {
},
//右键菜单的删除
deleteByBsm(){
//let zdBsm = this.zdData.zdbsm;
//let type;
console.log(this.zdData.zdbsm);
//switch (this.zdData.type){
// case "zd":
// type="0";
// break;
// case "zrz":
// type="1";
// break;
// case "h":
// type="2";
// break;
// default:
// break;
//}
let params={"bsm":this.zdData.zdbsm,"type":this.zdData.type}
deleteZdInfoByBsm(params)
.then((res) => {
......
......@@ -18,8 +18,8 @@
<el-header>
<div class="header-top">
<div class="top-items" @click="toggleClick">
<i class="fa fa-outdent hamburger" v-show="!isActive"></i>
<i class="fa fa-indent hamburger" v-show="isActive"></i>
<i class="fa fa-outdent" v-show="!isActive"></i>
<i class="fa fa-indent" v-show="isActive"></i>
</div>
<div
class="top-items"
......@@ -163,23 +163,23 @@ export default {
let list = [
{
name: "新建",
icon: "fa fa-address-card-o",
icon: "fa fa-plus-square",
path: "/create",
},
{
name: "添加",
icon: "fa fa-address-card-o",
icon: "fa fa-plus-circle",
path: "/add",
},
{ name: "更正", icon: "fa fa-address-card-o", path: "/modify" },
{ name: "更正", icon: "fa fa-pencil-square", path: "/modify" },
{
name: "变更",
icon: "fa fa-address-card-o",
icon: "fa fa-exchange",
path: "/change",
},
{
name: "综合查询",
icon: "fa fa-address-card-o",
icon: "fa fa-search",
path: "/search",
},
];
......
......@@ -75,17 +75,17 @@ export default {
data() {
return {
workList: [
{ name: "待办箱", img: require("../../assets/images/temp1.png") },
{ name: "退件箱", img: require("../../assets/images/temp2.png") },
{ name: "待办箱", img: require("../../assets/images/dbx.png") },
{ name: "退件箱", img: require("../../assets/images/tjx.png") },
],
list: [
{ name: "宗地分割", img: require("../../assets/images/temp1.png") },
{ name: "宗地分割", img: require("../../assets/images/zdfg.png") },
{
name: "导入楼盘表模板",
img: require("../../assets/images/temp2.png"),
img: require("../../assets/images/drlpbmb.png"),
},
{ name: "新办房屋", img: require("../../assets/images/temp1.png") },
{ name: "重新落宗", img: require("../../assets/images/temp2.png") },
{ name: "新办房屋", img: require("../../assets/images/xbfw.png") },
{ name: "重新落宗", img: require("../../assets/images/cxlz.png") },
],
tableData: [
......