From 51d0bb0161c42b8d36074de574abcf056a3a9318 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期四, 07 九月 2023 09:34:33 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.20.92:8888/r/PM20230220027_Web
---
src/api/api.js | 4 +
src/assets/js/colorValue.js | 25 ++++++
src/views/layer/layerDetail.vue | 179 ++++++++++++++++++++++++++++++++++++--------
3 files changed, 173 insertions(+), 35 deletions(-)
diff --git a/src/api/api.js b/src/api/api.js
index 5c99ade..735ae9e 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -74,3 +74,7 @@
export function perms_selectProjectLayers(params) {
return request.get("/perms/selectProjectLayers", { params: params });
}
+//鏁版嵁绠＄悊=>鍒嗛〉鏌ヨ鏁扮畝鐨勯鑹茶〃
+export function publish_selectSjColorTables(params) {
+ return request.get("/publish/selectSjColorTables", { params: params });
+}
diff --git a/src/assets/js/colorValue.js b/src/assets/js/colorValue.js
index e6cb8e0..d8537c5 100644
--- a/src/assets/js/colorValue.js
+++ b/src/assets/js/colorValue.js
@@ -4,6 +4,31 @@
total_count: 29,
item_list: [
{
+ data_status: 1,
+ data_update_user: 1,
+ data_id: 2,
+ name: "榛樿鑹叉澘",
+ data_update_time: "2017-09-04 15:57:57",
+ data_version: 0,
+ content: {
+ levels: [
+ {
+ b: 100,
+ low: 0,
+ high: 0.7,
+ g: 255,
+ r: 100,
+ },
+ ],
+ default: {
+ g: -1,
+ b: -1,
+ r: -1,
+ },
+ type: 0,
+ },
+ },
+ {
data_id: 10002901,
data_version: 1,
data_update_user: 1,
diff --git a/src/views/layer/layerDetail.vue b/src/views/layer/layerDetail.vue
index 21f4da0..637eb80 100644
--- a/src/views/layer/layerDetail.vue
+++ b/src/views/layer/layerDetail.vue
@@ -35,27 +35,44 @@
</div>
<div class="selectBox" v-show="drawingModeShow">
<div class="selectTile demonstration">鎷変几鏂瑰紡</div>
- <el-select
- v-model="stretchValue"
- class="imgSelect"
- placeholder="閫夋嫨鎷変几鏂瑰紡"
- size="small"
- clearable
- >
- <el-option
- v-for="item in stretchOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ <div class="stretchSelect">
+ <el-select
+ :teleported="false"
+ v-model="stretchValue"
+ class="stretchSelect"
+ :class="{ imgSelect: stretchNumShow }"
+ placeholder="閫夋嫨鎷変几鏂瑰紡"
+ size="small"
+ clearable
+ @change="stretchChange"
>
- </el-option>
- </el-select>
+ <el-option
+ v-for="item in stretchOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ <span v-show="stretchNumShow">-</span>
+ <el-input-number
+ class="stretchNum"
+ v-show="stretchNumShow"
+ :precision="2"
+ :step="0.01"
+ v-model="stretchNum"
+ :min="stretchMin"
+ :max="stretchMax"
+ controls-position="right"
+ size="small"
+ @change="stretchNumChange"
+ />
+ </div>
</div>
- <div class="selectBox">
+ <div class="selectBox" v-show="colorShow">
<div class="selectTile demonstration">娓叉煋绫诲瀷</div>
<el-select
v-model="renderType"
- class="imgSelect"
placeholder="閫夋嫨娓叉煋绫诲瀷"
size="small"
@change="changeSelection(renderType)"
@@ -77,9 +94,7 @@
left: 50%;
transform: translate(-50%, -50%);
"
- :style="{
- 'background-image': `linear-gradient(to right, ${item.domCss})`,
- }"
+ :style="item.domCss"
></div>
<!-- <img :src="item.url" style="height: 30px; width: 100%" /> -->
@@ -100,10 +115,9 @@
defineEmits,
} from "vue";
import server from "@/assets/js/Map/server";
-import axios from "axios";
+import { publish_selectSjColorTables } from "@/api/api";
import json from "@/assets/js/colorValue";
-// const colorValue = "@/assets/js/colorValue.json";
-// console.log(colorValue);
+
const stretchValue = ref("");
const transparence = ref(0);
const contrast = ref(1);
@@ -111,17 +125,33 @@
let layerState = ref(false);
let select = ref();
let renderType = ref("");
-let renderTypeOptions = [];
+let renderTypeOptions = ref([]);
let stretchOptions = [
{
- value: "Option1",
- label: "Option1",
+ value: 0,
+ label: "涓嶆媺浼�",
},
{
- value: "Option2",
- label: "Option2",
+ value: 1,
+ label: "绾挎�ф媺浼�",
+ },
+ {
+ value: 2,
+ label: "鐩存柟鍥惧潎琛�",
+ },
+ {
+ value: 3,
+ label: "鏍囧噯宸媺浼�",
+ },
+ {
+ value: 4,
+ label: "浼介┈鎷変几",
},
];
+let stretchNum = ref(0);
+let stretchMin = ref(0);
+let stretchMax = ref(0);
+let stretchNumShow = ref(false);
const formatTooltip = (val: number) => {
return val / 100;
};
@@ -137,17 +167,42 @@
const setSpatialClose = () => {
emits("detailClose", false);
};
+
const getColorJson = async () => {
- renderTypeOptions = json.result.item_list;
- renderTypeOptions.forEach((e) => {
- let css = "";
- e.content.levels.forEach((v) => {
- css += `rgb(${v.r_start}, ${v.g_start}, ${v.b_start}),`;
- });
- e.domCss = css.slice(0, -1);
+ const dt = await publish_selectSjColorTables({
+ pageIndex: 1,
+ pageSize: 1000,
});
- console.log(renderTypeOptions);
+ renderTypeOptions.value = dt.result.item_list;
+
+ renderTypeOptions.value.forEach((e) => {
+ let css = "";
+ let css1 = "";
+ e.content.levels.forEach((v) => {
+ if ("r_start" in v) {
+ console.log(v.r_start);
+ css += `rgb(${v.r_start}, ${v.g_start}, ${v.b_start}),rgb(${v.r_end}, ${v.g_end}, ${v.b_end}),`;
+ } else if ("r" in v) {
+ css1 += `rgb(${v.r}, ${v.g}, ${v.b}),`;
+ }
+ });
+
+ let cssColor = `${css1}${css}`;
+ let cssStr = "";
+
+ if (cssColor.length == 19) {
+ cssStr = `background: ${cssColor.slice(0, -1)}`;
+ } else {
+ cssStr = `background-image:linear-gradient(to right, ${cssColor.slice(
+ 0,
+ -1
+ )})`;
+ }
+ e.domCss = cssStr;
+ });
+ // console.log(renderTypeOptions.value);
};
+
const changeSelection = (scope) => {
if (scope == "") {
select.value.$el.children[0].children[0].removeAttribute("style");
@@ -243,6 +298,41 @@
colorShow.value = true;
}
};
+//鎷変几閫夋嫨
+const stretchChange = (val) => {
+ console.log(val);
+ if (val == 0) {
+ stretchNumShow.value = false;
+ stretchNum.value = 0;
+ stretchMin.value = 0;
+ stretchMax.value = 0;
+ } else if (val == 1) {
+ stretchNumShow.value = true;
+ //1 绾挎�ф媺浼�
+ stretchNum.value = 0.02;
+ stretchMin.value = 0;
+ stretchMax.value = 0.05;
+ } else if (val == 2) {
+ stretchNumShow.value = false;
+ //1 鐩存柟鍥惧潎琛�
+ stretchNum.value = 0;
+ stretchMin.value = 0;
+ stretchMax.value = 0;
+ } else if (val == 3) {
+ stretchNumShow.value = true;
+ //1 鏍囧噯宸媺浼�
+ stretchNum.value = 0.02;
+ stretchMin.value = 0;
+ stretchMax.value = 0.05;
+ } else if (val == 4) {
+ stretchNumShow.value = true;
+ //1 浼介┈鎷変几
+ stretchNum.value = 0.6;
+ stretchMin.value = 0.1;
+ stretchMax.value = 1.6;
+ }
+};
+const stretchNumChange = (val) => {};
onMounted(() => {
typeDisplay(props.layerData);
server.layerList.forEach((e, i) => {
@@ -340,4 +430,23 @@
/deep/.el-select-dropdown__item {
font-size: 12px !important;
}
+.stretchSelect {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .stretchSelect {
+ width: 100%;
+ }
+ .imgSelect {
+ width: 60%;
+ }
+ span {
+ color: #fff;
+ margin: 0 10px;
+ }
+ .stretchNum {
+ width: 30%;
+ }
+}
</style>
--
Gitblit v1.9.3