From 807d0f5ee9b78824f18788ea8a50b8dfd9f9bb2e Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期四, 27 七月 2023 11:05:49 +0800
Subject: [PATCH] 输入框选择图片
---
src/assets/js/Map/index.js | 2
src/views/layer/layerDetail.vue | 123 +++++++++++++++++---
src/views/search/search.vue | 43 ++----
src/views/layer/layerManage.vue | 136 ++++------------------
src/main.ts | 2
5 files changed, 147 insertions(+), 159 deletions(-)
diff --git a/src/assets/js/Map/index.js b/src/assets/js/Map/index.js
index 6732107..c69d89c 100644
--- a/src/assets/js/Map/index.js
+++ b/src/assets/js/Map/index.js
@@ -44,7 +44,7 @@
//澶ф皵灞�
Viewer.scene.globe.showGroundAtmosphere = false;
- server.AddDemLayer("", 12316);
+ // server.AddDemLayer("", 12316);
// server.AddTmsLayer(
// "http://172.16.2.10:50001/sj_raster/v6/service/10003901/1"
diff --git a/src/main.ts b/src/main.ts
index 2305b40..411dca6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,7 +5,7 @@
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
-import "default-passive-events";
+// import "default-passive-events";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
//base css鏍峰紡
import "./assets/css/global.css";
diff --git a/src/views/layer/layerDetail.vue b/src/views/layer/layerDetail.vue
index 47d26cd..077e04f 100644
--- a/src/views/layer/layerDetail.vue
+++ b/src/views/layer/layerDetail.vue
@@ -11,23 +11,26 @@
<!-- <el-checkbox @change="handlCheckAllChange" v-model="layerState">{{
layerName
}}</el-checkbox> -->
- {{ layerData.name }}
+ {{ layerData.cnName }}
<img src="../../assets/img/layer.png" alt="" />
</div>
<div class="slider-demo-block">
<div class="demonstration">閫忔槑搴�</div>
- <el-slider v-model="transparence" />
+ <el-slider
+ v-model="transparence"
+ @change="sliderChange"
+ :format-tooltip="formatTooltip"
+ />
<div class="demonstration">{{ transparence }}%</div>
</div>
<div class="selectBox">
<div class="selectTile demonstration">鎷変几鏂瑰紡</div>
<el-select
v-model="stretchValue"
- class="m-2"
- placeholder="Select"
+ class="imgSelect"
+ placeholder="閫夋嫨鎷変几鏂瑰紡"
size="small"
- @change="changeSelection(stretchValue)"
- ref="select"
+ clearable
>
<el-option
v-for="item in stretchOptions"
@@ -35,8 +38,30 @@
:label="item.label"
:value="item.value"
>
- <img :src="item.url" style="height: 30px; margin-right: 10px" />
- <span>{{ item.label }}</span>
+ </el-option>
+ </el-select>
+ </div>
+ <div class="selectBox">
+ <div class="selectTile demonstration">娓叉煋绫诲瀷</div>
+ <el-select
+ v-model="renderType"
+ class="imgSelect"
+ placeholder="閫夋嫨娓叉煋绫诲瀷"
+ size="small"
+ @change="changeSelection(renderType)"
+ ref="select"
+ clearable
+ >
+ <el-option
+ v-for="item in renderTypeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ <!-- <img :src="item.url" style="height: 30px; margin-right: 10px" />
+ <span>{{ item.label }}</span> -->
+
+ <img :src="item.url" style="height: 30px; width: 100%" />
</el-option>
</el-select>
</div>
@@ -53,12 +78,14 @@
defineProps,
defineEmits,
} from "vue";
+import server from "@/assets/js/Map/server";
const stretchValue = ref("");
const transparence = ref(0);
let layerName = ref("鍥惧眰鍚嶇О");
let layerState = ref(false);
let select = ref();
-const stretchOptions = [
+let renderType = ref("");
+const renderTypeOptions = [
{
value: "Option1",
label: "Option1",
@@ -70,31 +97,91 @@
url: "https://img1.baidu.com/it/u=3226786080,888437008&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
},
];
+const stretchOptions = [
+ {
+ value: "Option1",
+ label: "Option1",
+ },
+ {
+ value: "Option2",
+ label: "Option2",
+ },
+];
+const formatTooltip = (val: number) => {
+ return val / 100;
+};
const emits = defineEmits(["detailClose"]);
//defineProps 鏉ユ帴鏀剁粍浠剁殑浼犲��
const props = defineProps({
layerData: Object,
});
+const layerLength = ref();
const setSpatialClose = () => {
emits("detailClose", false);
};
const handlCheckAllChange = (res) => {};
const changeSelection = (scope) => {
- let brand = scope;
- for (let index in stretchOptions) {
- let aa = stretchOptions[index];
- let value = aa.value;
- if (brand === value) {
- console.log(select.value.$el.children);
+ if (scope == "") {
+ select.value.$el.children[0].children[0].removeAttribute("style");
+ select.value.$el.children[0].children[0].children[0].removeAttribute(
+ "style"
+ );
+ select.value.$el.children[0].children[0].children[0].children[0].removeAttribute(
+ "style"
+ );
+ return;
+ }
+ for (let index in renderTypeOptions) {
+ let obj = renderTypeOptions[index];
+ if (obj.value == scope) {
select.value.$el.children[0].children[0].setAttribute(
"style",
- "background:url(" +
- aa.url +
- ") no-repeat 10px;background-size: 30px 30px;color:#333;padding-left: 50px;"
+ `background: url(${obj.url}) no-repeat;
+ width: 100%; height: 100%;
+ border: none;
+ height: 33px;
+ background-size:100% 100%`
+ );
+ select.value.$el.children[0].children[0].children[0].setAttribute(
+ "style",
+ `display: flex;
+ justify-content: flex-end;
+ background:transparent;`
+ );
+ select.value.$el.children[0].children[0].children[0].children[0].setAttribute(
+ "style",
+ `display: none;`
);
}
}
+
+ // let brand = scope;
+ // for (let index in stretchOptions) {
+ // let aa = stretchOptions[index];
+ // let value = aa.value;
+ // if (brand === value) {
+ // console.log(select.value.$el.children);
+ // select.value.$el.children[0].children[0].setAttribute(
+ // "style",
+ // "background:url(" +
+ // aa.url +
+ // ") no-repeat 10px;background-size: 30px 30px;color:#333;padding-left: 50px;"
+ // );
+ // }
+ // }
};
+//婊戝潡鍙樺姩
+const sliderChange = (val) => {
+ server.layerList[layerLength.value].layerData.alpha = val / 100;
+};
+onMounted(() => {
+ server.layerList.forEach((e, i) => {
+ if (props.layerData.id == e.id) {
+ layerLength.value = i;
+ transparence.value = e.layerData.alpha * 100;
+ }
+ });
+});
</script>
<style lang="less" scoped>
diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue
index c9ff752..2c14fc3 100644
--- a/src/views/layer/layerManage.vue
+++ b/src/views/layer/layerManage.vue
@@ -59,7 +59,7 @@
</div>
</div>
<layer-set
- v-show="layerSetIsshow"
+ v-if="layerSetIsshow"
@SETstate="SETstate"
:layerTree="treeData"
@addlayer="addlayer"
@@ -97,28 +97,7 @@
const stretchValue = ref("");
let estreeRef = ref();
-const stretchOptions = [
- {
- value: "Option1",
- label: "Option1",
- },
- {
- value: "Option2",
- label: "Option2",
- },
- {
- value: "Option3",
- label: "Option3",
- },
- {
- value: "Option4",
- label: "Option4",
- },
- {
- value: "Option5",
- label: "Option5",
- },
-];
+
const transparence = ref(0);
var treeData = ref([]);
var layerListData = ref([]);
@@ -192,6 +171,9 @@
};
//閫夋嫨鍥惧眰
const handleCheckChange = (data, checked) => {
+ layerAttributeIsshow.value = false;
+ layerDetailIsshow.value = false;
+
let isCheck = checked.checkedKeys.indexOf(data.id) > -1;
// this.setVisiable(data, isCheck);
@@ -199,12 +181,7 @@
store.commit("SET_CHECKLAYER", son);
setVisiable(data, isCheck);
- let layerArr = [];
- son.forEach((e) => {
- if (e.type == 2) {
- layerArr.push(e);
- }
- });
+
// server.addLayer(layerArr, isCheck);
};
const setVisiable = (treeNode, checked) => {
@@ -219,79 +196,30 @@
setVisiable(item, treeNode.checked);
});
return;
- } else if (treeNode._children) {
- if (treeNode.thisView === "ewzj") {
- treeNode._children[0].checked = treeNode.checked;
- if (treeNode._children[0].children) {
- treeNode._children[0].children.forEach((item) => {
- item.checked = treeNode.checked;
- server.addTreeData(item);
- });
- } else {
- server.addTreeData(treeNode._children[0]);
- }
- } else if (treeNode.thisView === "swzj") {
- for (let i = 1; i < treeNode._children.length; i++) {
- treeNode._children[i].checked = treeNode.checked;
- }
- treeNode._children.forEach((item, index) => {
- index !== 0 && server.addTreeData(item);
- });
- } else if (!treeNode.thisView) {
- treeNode._children.forEach((item, index) => {
- item.checked = treeNode.checked;
- if (item.children) {
- item.children.forEach((_item) => {
- _item.checked = item.checked;
- server.addTreeData(_item);
- });
- } else {
- server.addTreeData(item);
- }
- });
- }
- return;
}
if (!treeNode.isAdd) {
server.addTreeData(treeNode);
return;
}
-
- // let data = _getTreeData(treeNode.id);
- // if (data) {
- // data.item &&
- // data.item.setVisibility &&
- // data.item.setVisibility(treeNode.checked);
- // data.item && data.item.setVisible && data.item.setVisible(treeNode.checked);
- // data.item &&
- // data.item.show !== undefined &&
- // (data.item.show = treeNode.checked);
- // if (data.datatype === "particle") {
- // data.item.forEach((item) => {
- // item.show = treeNode.checked;
- // });
- // }
- // } else {
- // if (treeNode.id && treeNode.id.indexOf && treeNode.id.indexOf("---") > -1) {
- // var ids = id.split("---");
- // ids.forEach((item) => {
- // sgworld.ProjectTree.setVisibility(item, treeNode.checked);
- // });
- // } else {
- // sgworld.ProjectTree.setVisibility(treeNode.id, treeNode.checked);
-
- // var dd = Viewer.dataSources._dataSources.filter((item) => {
- // return item.name == treeNode.id;
- // });
- // if (dd && dd.length > 0) {
- // dd[0].show = treeNode.checked;
- // }
- // }
- // }
};
-
+const defaultLayer = (val) => {
+ val.forEach((e) => {
+ DefaultId.value.forEach((v) => {
+ if (e.id == v) {
+ setVisiable(e, true);
+ } else {
+ if (e.children) {
+ defaultLayer(e.children);
+ }
+ }
+ });
+ });
+};
const clickdropdown = (res, e) => {
+ if (!e.checked) {
+ return ElMessage.error("璇峰厛鍕鹃�夊浘灞�");
+ }
layerAttributeIsshow.value = false;
layerDetailIsshow.value = false;
layerObjData.value = e;
@@ -358,21 +286,12 @@
treeData.value = setTreeData(dt.result).sort(function (a, b) {
return a.sort - b.sort;
});
- layerListData.value = dt.result;
//娣诲姞榛樿閫変腑鍥惧眰
- dt.result.forEach((e) => {
- DefaultId.value.forEach((v) => {
- if (e.id == v) {
- setVisiable(e, true);
- }
- });
- });
+
+ layerListData.value = dt.result;
+ defaultLayer(treeData.value);
}
-
- // treeData.value = JSON.parse(JSON.stringify(treeData.value));
-
- // console.log(treeData.value);
};
//鏋勯�犳爲
@@ -394,10 +313,7 @@
});
}
getLayer();
-onMounted(() => {
- console.log(treeData.value);
- console.log(estreeRef.value);
-});
+onMounted(() => {});
</script>
<style lang="less" scoped>
diff --git a/src/views/search/search.vue b/src/views/search/search.vue
index 00ee1fa..28b2faf 100644
--- a/src/views/search/search.vue
+++ b/src/views/search/search.vue
@@ -7,40 +7,23 @@
placeholder="璇疯緭鍏ュ湴鍚�"
>
<template #suffix>
- <el-icon
- title="娓呴櫎"
- @click="setSearchClose"
- class="el-input__icon"
- >
+ <el-icon title="娓呴櫎" @click="setSearchClose" class="el-input__icon">
<Close />
</el-icon>
</template>
<template #prefix>
- <el-icon
- @click="setSearchClick"
- title="鏌ヨ"
- class="el-input__icon"
- >
+ <el-icon @click="setSearchClick" title="鏌ヨ" class="el-input__icon">
<search />
</el-icon>
</template>
</el-input>
</div>
- <div
- v-if="searchFLag"
- class="search_content"
- >
- <el-collapse
- v-model="activeNames"
- @change="handleChange"
- >
- <el-collapse-item
- title="鏌ヨ缁撴灉"
- name="1"
- >
+ <div v-if="searchFLag" class="search_content">
+ <el-collapse v-model="activeNames" @change="handleChange">
+ <el-collapse-item title="鏌ヨ缁撴灉" name="1">
<div class="search_content_text">鎬绘煡璇㈢粨鏋�:{{ listData.count }}</div>
<div class="search_content_text paging">
- 鎬婚〉鏁帮細{{listData.page }}
+ 鎬婚〉鏁帮細{{ listData.page }}
<el-button
size="small"
text
@@ -76,7 +59,6 @@
/>
</div>
<div class="table_box">
-
<div class="table_header">
<div class="table_th_x">搴忓彿</div>
<div class="table_th">鍦板悕</div>
@@ -84,13 +66,12 @@
<div class="table_childer">
<div
class="table_tr"
- v-for='(item,flag) in tableData'
+ v-for="(item, flag) in tableData"
@click="setPointLocal(item)"
>
- <div class="table_th_x">{{ flag +1}}</div>
+ <div class="table_th_x">{{ flag + 1 }}</div>
<div class="table_th">{{ item.enName }}</div>
</div>
-
</div>
</div>
</el-collapse-item>
@@ -198,7 +179,7 @@
setPoitCannel();
};
const setSearchClick = async () => {
- if (!searchValue) return;
+ if (!searchValue.value) return;
var obj = {
filter: "name like '" + searchValue.value + "'",
@@ -221,7 +202,11 @@
</script>
<style lang="less" scoped>
.searchBox {
- margin-left: 34px;
+ // margin-left: 34px;
+ // height: auto;
+ position: absolute;
+ top: 0;
+ right: -277px;
}
.searchInput {
width: 243px;
--
Gitblit v1.9.3