parent
6645e98de9
commit
6328052a3a
@ -0,0 +1,191 @@
|
|||||||
|
<template>
|
||||||
|
<div class="search-box">
|
||||||
|
<div class="select-search">
|
||||||
|
<el-select
|
||||||
|
v-model="queryParmas.color"
|
||||||
|
placeholder="分色"
|
||||||
|
clearable
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
:popper-append-to-body="false"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in dict.type.b_color_type"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-select
|
||||||
|
v-model="queryParmas.parentid"
|
||||||
|
placeholder="网格"
|
||||||
|
clearable
|
||||||
|
:popper-append-to-body="false"
|
||||||
|
@change="handleNetwork"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in networkOption"
|
||||||
|
:key="dict.dept_id"
|
||||||
|
:label="dict.dept_name"
|
||||||
|
:value="dict.dept_id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<el-checkbox-group v-model="checkList" @change="change">
|
||||||
|
<el-checkbox
|
||||||
|
:label="item.label"
|
||||||
|
v-for="(item, index) in multipleList"
|
||||||
|
:key="index"
|
||||||
|
:disabled="filterDisabled(item.label)"
|
||||||
|
></el-checkbox>
|
||||||
|
<!-- disabled -->
|
||||||
|
</el-checkbox-group>
|
||||||
|
<el-checkbox label="三维图层" @change="handleMapLayer"></el-checkbox>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getNetWorkId } from "@/api/home/index.js";
|
||||||
|
import { mapGetters } from "vuex";
|
||||||
|
export default {
|
||||||
|
dicts: ["b_color_type"],
|
||||||
|
computed: {
|
||||||
|
...mapGetters(["mapParmas", "queryParamsXiaoqu"]),
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
checkList: [],
|
||||||
|
networkOption: [],
|
||||||
|
multipleList: [
|
||||||
|
{ key: "type", label: "户籍", value: 1 },
|
||||||
|
{ key: "type", label: "流动", value: 2 },
|
||||||
|
{ key: "isd", label: "中共党员", value: 1 },
|
||||||
|
{ key: "isk", label: "帮扶对象", value: 1 },
|
||||||
|
{ key: "isx", label: "重点人群", value: 1 },
|
||||||
|
{ key: "isj", label: "退伍军人", value: 1 },
|
||||||
|
],
|
||||||
|
queryParmas: {
|
||||||
|
parentid: undefined,
|
||||||
|
color: undefined,
|
||||||
|
type: undefined,
|
||||||
|
isd: undefined,
|
||||||
|
isk: undefined,
|
||||||
|
isx: undefined,
|
||||||
|
isj: undefined,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getNetworkList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getNetworkList() {
|
||||||
|
let res = await getNetWorkId({
|
||||||
|
xiaoquId: this.queryParamsXiaoqu.xiaoquId,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.networkOption = res.data["网格list"];
|
||||||
|
},
|
||||||
|
handleNetwork(e) {
|
||||||
|
let networkName = "";
|
||||||
|
if (e) {
|
||||||
|
networkName = this.networkOption.filter((item) => item.dept_id == e)[0]
|
||||||
|
.dept_name;
|
||||||
|
console.log(networkName);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$store.commit("CHANGE_QUERY_MAP", { networkName: networkName });
|
||||||
|
},
|
||||||
|
handleMapLayer(e) {
|
||||||
|
this.$store.commit("CHANGE_QUERY_MAP", { sd: e });
|
||||||
|
},
|
||||||
|
change(e) {
|
||||||
|
this.reset();
|
||||||
|
e.map((item) => {
|
||||||
|
let itemData = this.multipleList.filter((it) => it.label == item)[0];
|
||||||
|
this.queryParmas[itemData.key] = itemData.value;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
filterDisabled(label) {
|
||||||
|
if (label == "户籍" || label == "流动") {
|
||||||
|
let letisTrue = this.checkList.some((item) => {
|
||||||
|
let text = label == "户籍" ? "流动" : "户籍";
|
||||||
|
return item == text;
|
||||||
|
});
|
||||||
|
return letisTrue;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.queryParmas.type = undefined;
|
||||||
|
this.queryParmas.isd = undefined;
|
||||||
|
this.queryParmas.isk = undefined;
|
||||||
|
this.queryParmas.isx = undefined;
|
||||||
|
this.queryParmas.isj = undefined;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.search-box {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 20;
|
||||||
|
left: 400px;
|
||||||
|
top: 115px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
::v-deep .el-checkbox {
|
||||||
|
margin-right: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #cdfbff;
|
||||||
|
background: url("~@/assets/images/ui/btn_bg.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding: 9px 15px 10px 15px;
|
||||||
|
.el-checkbox__label {
|
||||||
|
padding-left: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
|
||||||
|
color: #cdfbff;
|
||||||
|
}
|
||||||
|
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
::v-deep .el-checkbox__inner::after {
|
||||||
|
border-color: #16aa2d;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .select-search {
|
||||||
|
.el-select {
|
||||||
|
width: 130px;
|
||||||
|
.el-input {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.el-input__inner {
|
||||||
|
height: 38px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: #fff;
|
||||||
|
background: url("~@/assets/images/ui/img_btn_search.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
border: 0px !important;
|
||||||
|
}
|
||||||
|
.el-input__inner::placeholder,
|
||||||
|
.el-select__caret {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-select__tags {
|
||||||
|
padding-left: 6px;
|
||||||
|
.el-tag--small {
|
||||||
|
height: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue