From 28271e1804695c5081727c629c3644876f1dd6e5 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期一, 04 九月 2023 17:49:01 +0800
Subject: [PATCH] 选择色块
---
src/views/layer/layerDetail.vue | 111 +++++++++++++++++++++++++++----------------------------
1 files changed, 54 insertions(+), 57 deletions(-)
diff --git a/src/views/layer/layerDetail.vue b/src/views/layer/layerDetail.vue
index 14fe6fa..cc5b43c 100644
--- a/src/views/layer/layerDetail.vue
+++ b/src/views/layer/layerDetail.vue
@@ -1,15 +1,8 @@
<template>
- <div
- class="content"
- v-drag="true"
- >
+ <div class="content" v-drag="true">
<div class="title">
<label>璇︾粏缂栬緫</label>
- <el-icon
- @click="setSpatialClose"
- :size="20"
- style="cursor: pointer"
- >
+ <el-icon @click="setSpatialClose" :size="20" style="cursor: pointer">
<Close />
</el-icon>
</div>
@@ -19,15 +12,9 @@
layerName
}}</el-checkbox> -->
{{ layerData.cnName }}
- <img
- src="../../assets/img/layer.png"
- alt=""
- />
+ <img src="../../assets/img/layer.png" alt="" />
</div>
- <div
- class="slider-demo-block"
- v-show="diaphaneityShow"
- >
+ <div class="slider-demo-block" v-show="diaphaneityShow">
<div class="demonstration">閫忔槑搴�</div>
<el-slider
v-model="transparence"
@@ -36,10 +23,7 @@
/>
<div class="demonstration">{{ transparence }}%</div>
</div>
- <div
- class="slider-demo-block"
- v-show="contrastShow"
- >
+ <div class="slider-demo-block" v-show="contrastShow">
<div class="demonstration">瀵规瘮搴�</div>
<el-slider
v-model="contrast"
@@ -49,10 +33,7 @@
/>
<div class="demonstration">{{ contrast }}</div>
</div>
- <div
- class="selectBox"
- v-show="drawingModeShow"
- >
+ <div class="selectBox" v-show="drawingModeShow">
<div class="selectTile demonstration">鎷変几鏂瑰紡</div>
<el-select
v-model="stretchValue"
@@ -70,10 +51,7 @@
</el-option>
</el-select>
</div>
- <div
- class="selectBox"
- v-show="colorShow"
- >
+ <div class="selectBox">
<div class="selectTile demonstration">娓叉煋绫诲瀷</div>
<el-select
v-model="renderType"
@@ -85,18 +63,26 @@
clearable
>
<el-option
- v-for="item in renderTypeOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ v-for="(item, i) in renderTypeOptions"
+ :key="i"
+ :label="item.data_id"
+ :value="item.name"
>
- <!-- <img :src="item.url" style="height: 30px; margin-right: 10px" />
- <span>{{ item.label }}</span> -->
+ <div
+ style="
+ height: 30px;
+ width: 100%;
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ "
+ :style="{
+ 'background-image': `linear-gradient(to right, ${item.domCss})`,
+ }"
+ ></div>
- <img
- :src="item.url"
- style="height: 30px; width: 100%"
- />
+ <!-- <img :src="item.url" style="height: 30px; width: 100%" /> -->
</el-option>
</el-select>
</div>
@@ -114,6 +100,10 @@
defineEmits,
} from "vue";
import server from "@/assets/js/Map/server";
+import axios from "axios";
+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);
@@ -121,19 +111,8 @@
let layerState = ref(false);
let select = ref();
let renderType = ref("");
-const renderTypeOptions = [
- {
- value: "Option1",
- label: "Option1",
- url: "https://img2.baidu.com/it/u=3727554264,855092936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
- },
- {
- value: "Option2",
- label: "Option2",
- url: "https://img1.baidu.com/it/u=3226786080,888437008&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
- },
-];
-const stretchOptions = [
+let renderTypeOptions = [];
+let stretchOptions = [
{
value: "Option1",
label: "Option1",
@@ -158,7 +137,17 @@
const setSpatialClose = () => {
emits("detailClose", false);
};
-const handlCheckAllChange = (res) => {};
+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);
+ });
+ console.log(renderTypeOptions);
+};
const changeSelection = (scope) => {
if (scope == "") {
select.value.$el.children[0].children[0].removeAttribute("style");
@@ -172,14 +161,21 @@
}
for (let index in renderTypeOptions) {
let obj = renderTypeOptions[index];
- if (obj.value == scope) {
+ if (obj.name == scope) {
+ // select.value.$el.children[0].children[0].setAttribute(
+ // "style",
+ // `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].setAttribute(
"style",
- `background: url(${obj.url}) no-repeat;
+ `background-image: linear-gradient(to right,${obj.domCss});
width: 100%; height: 100%;
border: none;
- height: 33px;
- background-size:100% 100%`
+ height: 33px;`
);
select.value.$el.children[0].children[0].children[0].setAttribute(
"style",
@@ -256,6 +252,7 @@
}
});
});
+getColorJson();
</script>
<style lang="less" scoped>
--
Gitblit v1.9.3