~xingchuan/SewerAndRainNetwork.git

			@@ -3,57 +3,236 @@
			<div class="affiliatedFacilities">
			<el-dialog
			custom-class="affiliatedFacilities-dialog"
			title="提示"
			:title="facilitiesParameter && facilitiesParameter.properties.pipename"
			:visible.sync="dialogVisible"
			:append-to-body="true"
			:modal="false"
			v-dialogDrag
			>
			<div>
			<h3>附属设施分类</h3>
			<ul>
			<li>附属设施子类</li>
			<li>附属设施子类</li>
			<li>附属设施子类</li>
			<li>附属设施子类</li>
			<li>附属设施子类</li>
			</ul>
			v-dialogDragBottom
			>
			<div class="search-panel">
			<el-form ref="form" :model="form" label-width="90px" class="search-form">
			<!-- <el-form-item label="管线信息：" size="mini" class="search-panel-item">
			<div class="el-select el-select--mini">8888</div>
			</el-form-item> -->
			<el-form-item label="设施类型：" size="mini" class="search-panel-item">
			<el-select style="width: 100%" v-model="dataType" value-key="code" @change="handleDataType"
			:popper-class="'select-down'">
			<el-option v-for="(item,index) in classification" :key="index" :label="item.name"
			:value="item"></el-option>
			</el-select>
			</el-form-item>
			<div class="rightButtonSearch">
			<el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input>
			<el-button class="el-icon-search" @click="handleSearch"></el-button>
			</div>
			</el-form>
			</div>

			<el-scrollbar style="height:300px;">
			<div class="environmental-risk-list" v-for="(item,index) in list" :key="index"
			:class="activeNum===index?'hover':''">
			<img class="state" :src="getImgSrc()" style="background: none"/>
			<div>
			<h3 @click="handleLocation(item,index)">{{ item.properties.pipename }}</h3>
			<p>所属企业：<span>{{ item.properties.orgcode }}</span>
			<p>设施类型：<span>{{ item.properties.teetype }}</span>
			<!-- <el-button v-if="fuShuSheShiShow" class="rt" size="mini" style="margin-right: 0.04rem" @click="btnAffiliatedFacilities(item)" >附属设施</el-button> -->
			</p>
			</div>
			</div>
			</el-scrollbar>
			<!-- <div v-for="(item,index) in classification" :key="index">
			<h3 @click="btnfuShuSheShiSubItems(item,index)"> <i :class="item.isShow?'icon iconfont iconcaret-right':'icon iconfont iconsort-down'"></i> {{item.name}}</h3>
			<ul v-if="item.isShow">
			<li v-for="(item1,index1) in item.features" :key="index1" @click="btnFeatures(item,item1,index,index1)" :class="item.activeNum==index1?'hover':''" >{{item1.properties.pipename}}</li>
			</ul>
			</div> -->
			</el-dialog>
			</div>
			</template>

			<script>
			import WfsHelper from '@components/helpers/WfsHelper'
			import AjaxUtils from '@utils/AjaxUtils'
			import { LayerFsss } from '@src/conf/layers/LayerFsss'
			import { locate } from '../../helpers/LocateHelper'

			// console.log(LayerFsss, 8888888888)
			export default {
			name: 'AffiliatedFacilities',
			data () {
			return {
			dialogVisible: true
			dialogVisible: false,
			form: {
			areaVal: '',
			keyword: ''
			},
			dataType: '',
			list: [],
			activeNum: -1
			}
			},
			props: ['facilitiesParameter', 'fuShuSheShiSubItems'],
			watch: {
			facilitiesParameter: {
			handler (newValue, oldValue) {
			this.dialogVisible = true
			this.list = []
			},
			deep: true
			}
			},
			computed: {
			classification () {
			const layers = LayerFsss.layers
			console.log(layers)
			const filtered = layers.filter(function (value, index, array) {
			console.log(value)
			return value.name !== '流向'
			})
			return filtered
			}
			},
			methods: {
			getImgSrc () {
			const icon = this.dataType.icon
			return icon ? 'assets/images/map/' + icon : ''
			},

			handleClose (done) {
			this.$confirm('确认关闭？')
			.then(_ => {
			done()
			})
			.catch(_ => {})
			// this.$confirm('确认关闭？').then(_ => { done() }).catch(_ => {})
			},
			btnFeatures (val, val1, index, index1) {
			this.classification.forEach((item) => {
			item.activeNum = -1
			})
			this.classification[index].activeNum = index1
			this.$forceUpdate()
			window.layerFactory.flyByFeature(val1, val.code)
			},
			handleDataType () {
			this.list = []
			},
			async handleSearch () {
			var wfsHelper = new WfsHelper()
			// todo 现在管网还没区分开类型，后面改
			wfsHelper.addTypeName(this.dataType.typeName)
			if (this.form.keyword) {
			wfsHelper.addLike('name', this.form.keyword)
			}
			// const _this = this

			const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
			// console.log(res)

			if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
			this.list = res.features

			// this.$forceUpdate()
			}
			},
			handleLocation (val, index) {
			this.activeNum = index
			locate(val, this.dataType)
			}
			}
			}
			</script>

			<style lang="less">
			.affiliatedFacilities-dialog{
			width: calc(30% - 15px) !important; // calc(30% - 15px);
			left: 50%;
			.el-dialog__body{
			padding: 0.04rem;
			h3{color:#fff;}
			ul {display: flex;flex-wrap: wrap;
			li{margin-left:0.04rem;margin-bottom: 0.04rem;cursor: pointer;color:#00fff6}
			<style lang="less">
			.affiliatedFacilities-dialog {
			width: calc(20% - 60px) !important; // calc(30% - 15px);
			left: 60%;

			.el-dialog__body {
			padding: 0.04rem;

			.search-panel {
			background-color: transparent;
			padding: 10px;
			border-bottom: 1px solid @background-color-split;
			// .el-input{width:calc(100% - 40px);position: relative}
			/deep/ input {
			border-radius: 0;
			background-color: @background-color-split;
			border: solid 1px @color;
			color: @color-gray;
			font-size: 0.01rem;
			padding: 0 15px;

			.el-select .el-input.is-focus .el-input__inner {
			border-color: @color;
			}
			}

			.el-form-item__label {
			color: #00fff6
			}

			.el-input__inner {
			background: none;
			color: #fff;
			font-size: 14px;
			border-radius: 0;
			border-color: @color;
			background: rgba(0, 16, 30, .5);
			}
			}

			/input 点击搜索样式/

			.rightButtonSearch {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.el-input {
			margin-right: 10px
			}

			.el-icon-search {
			width: 40px;
			border: 1px solid @color;
			height: 28px;
			line-height: 28px;
			text-align: center;
			color: #fff;
			border-radius: 2px;
			cursor: pointer;
			background: rgba(0, 16, 30, .5);
			padding: 0;
			}
			}

			.environmental-risk-list {
			position: relative;
			padding-left: 50px;
			padding-top: 5px;
			padding-bottom: 5px;
			color: @color-shadow;
			border-bottom: 1px solid @background-color-split;

			h3 {
			cursor: pointer;
			}

			.state {
			width: 30px;
			height: 30px;
			position: absolute;
			top: 50%;
			left: 10px;
			margin-top: -15px;
			border-radius: 50%;
			box-shadow: 0 0 3px #000;
			background: #0B3B6D;
			}
			}

			.environmental-risk-list.hover,
			.environmental-risk-list:hover {
			color: @color-highlight;
			background: @background-color;
			}
			}
			}
			}
			</style >
			</style>