选择色块

WX

2023-09-04 28271e1804695c5081727c629c3644876f1dd6e5

选择色块

 src/api/api.js

@@ -26,7 +26,6 @@
  return request.post("/dataQuery/downloadDbData", params);
}


//获取RSA加密公钥
export function sign_getPublicKey(params) {
  //请求地址
@@ -56,26 +55,22 @@

//数据查询=>根据实体名查询表名
export function dataQuery_selectTabByEntity(params) {
  return request.get('/dataQuery/selectTabByEntity', { params: params });
  return request.get("/dataQuery/selectTabByEntity", { params: params });
}
//数据管理=>数据检索=>查询字段信息
export function inquiry_selectFields(params) {
  return request.get('/inquiry/selectFields', { params: params });
  return request.get("/inquiry/selectFields", { params: params });
}
//数据管理=>数据检索=>查询值域信息
export function inquiry_selectDomains(params) {
  return request.get('/inquiry/selectDomains', { params: params });
  return request.get("/inquiry/selectDomains", { params: params });
}
//数据查询=>根据GID查询
export function dataQuery_selectByGid(params) {
  return request.get('/dataQuery/selectByGid', { params: params });
  return request.get("/dataQuery/selectByGid", { params: params });
}

//授权管理=>查询当前用户的投影图层授权
export function perms_selectProjectLayers(params) {
  return request.get('/perms/selectProjectLayers', { params: params });
  return request.get("/perms/selectProjectLayers", { params: params });
}





 src/assets/js/colorValue.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1752 @@
const json = {
  result: {
    page_count: 40,
    total_count: 29,
    item_list: [
      {
        data_id: 10002901,
        data_version: 1,
        data_update_user: 1,
        name: "Di-31730668_10506015",
        content: {
          default: {
            r: -1,
            g: -1,
            b: -1,
          },
          gradation: "hotmap",
          type: 1,
          levels: [
            {
              high: -27506999.7,
              low: -31730668,
              r_end: 255,
              b_start: 6,
              g_end: 0,
              b_end: 0,
              r_start: 159,
              g_start: 6,
            },
            {
              high: -23283331.4,
              low: -27506999.7,
              r_end: 255,
              b_start: 0,
              g_end: 78,
              b_end: 0,
              r_start: 255,
              g_start: 0,
            },
            {
              high: -19059663.1,
              low: -23283331.4,
              r_end: 255,
              b_start: 0,
              g_end: 144,
              b_end: 0,
              r_start: 255,
              g_start: 78,
            },
            {
              high: -14835994.8,
              low: -19059663.1,
              r_end: 255,
              b_start: 0,
              g_end: 204,
              b_end: 0,
              r_start: 255,
              g_start: 144,
            },
            {
              high: -10612326.5,
              low: -14835994.8,
              r_end: 42,
              b_start: 0,
              g_end: 255,
              b_end: 0,
              r_start: 255,
              g_start: 204,
            },
            {
              high: -6388658.2,
              low: -10612326.5,
              r_end: 0,
              b_start: 0,
              g_end: 255,
              b_end: 210,
              r_start: 42,
              g_start: 255,
            },
            {
              high: -2164989.9,
              low: -6388658.2,
              r_end: 0,
              b_start: 210,
              g_end: 168,
              b_end: 255,
              r_start: 0,
              g_start: 255,
            },
            {
              high: 2058678.4,
              low: -2164989.9,
              r_end: 59,
              b_start: 255,
              g_end: 85,
              b_end: 217,
              r_start: 0,
              g_start: 168,
            },
            {
              high: 6282346.7,
              low: 2058678.4,
              r_end: 0,
              b_start: 217,
              g_end: 42,
              b_end: 255,
              r_start: 59,
              g_start: 85,
            },
            {
              high: 10506015,
              low: 6282346.7,
              r_end: 132,
              b_start: 255,
              g_end: 0,
              b_end: 255,
              r_start: 0,
              g_start: 42,
            },
          ],
        },
        data_update_time: "2023-05-17 10:25:57",
        data_status: 1,
      },
      {
        data_id: 10002801,
        data_version: 0,
        data_update_user: 1,
        name: "Diviner_-60_110",
        content: {
          default: {
            b: -1,
            g: -1,
            r: -1,
          },
          gradation: "hotmap",
          type: 1,
          levels: [
            {
              b_start: 6,
              r_end: 255,
              low: -60,
              high: -43,
              g_end: 0,
              b_end: 0,
              r_start: 159,
              g_start: 6,
            },
            {
              b_start: 0,
              r_end: 255,
              low: -43,
              high: -26,
              g_end: 78,
              b_end: 0,
              r_start: 255,
              g_start: 0,
            },
            {
              b_start: 0,
              r_end: 255,
              low: -26,
              high: -9,
              g_end: 144,
              b_end: 0,
              r_start: 255,
              g_start: 78,
            },
            {
              b_start: 0,
              r_end: 255,
              low: -9,
              high: 8,
              g_end: 204,
              b_end: 0,
              r_start: 255,
              g_start: 144,
            },
            {
              b_start: 0,
              r_end: 42,
              low: 8,
              high: 25,
              g_end: 255,
              b_end: 0,
              r_start: 255,
              g_start: 204,
            },
            {
              b_start: 0,
              r_end: 0,
              low: 25,
              high: 42,
              g_end: 255,
              b_end: 210,
              r_start: 42,
              g_start: 255,
            },
            {
              b_start: 210,
              r_end: 0,
              low: 42,
              high: 59,
              g_end: 168,
              b_end: 255,
              r_start: 0,
              g_start: 255,
            },
            {
              b_start: 255,
              r_end: 59,
              low: 59,
              high: 76,
              g_end: 85,
              b_end: 217,
              r_start: 0,
              g_start: 168,
            },
            {
              b_start: 217,
              r_end: 0,
              low: 76,
              high: 93,
              g_end: 42,
              b_end: 255,
              r_start: 59,
              g_start: 85,
            },
            {
              b_start: 255,
              r_end: 132,
              low: 93,
              high: 110,
              g_end: 0,
              b_end: 255,
              r_start: 0,
              g_start: 42,
            },
          ],
        },
        data_update_time: "2023-04-24 10:38:02",
        data_status: 1,
      },
      {
        data_id: 10002701,
        data_version: 0,
        data_update_user: 1,
        name: "Diviner_0_5",
        content: {
          default: {
            b: -1,
            g: -1,
            r: -1,
          },
          gradation: "hotmap",
          type: 1,
          levels: [
            {
              b_start: 6,
              low: 0,
              high: 0.5,
              r_end: 255,
              g_end: 0,
              b_end: 0,
              r_start: 159,
              g_start: 6,
            },
            {
              b_start: 0,
              low: 0.5,
              high: 1,
              r_end: 255,
              g_end: 78,
              b_end: 0,
              r_start: 255,
              g_start: 0,
            },
            {
              b_start: 0,
              low: 1,
              high: 1.5,
              r_end: 255,
              g_end: 144,
              b_end: 0,
              r_start: 255,
              g_start: 78,
            },
            {
              b_start: 0,
              low: 1.5,
              high: 2,
              r_end: 255,
              g_end: 204,
              b_end: 0,
              r_start: 255,
              g_start: 144,
            },
            {
              b_start: 0,
              low: 2,
              high: 2.5,
              r_end: 42,
              g_end: 255,
              b_end: 0,
              r_start: 255,
              g_start: 204,
            },
            {
              b_start: 0,
              low: 2.5,
              high: 3,
              r_end: 0,
              g_end: 255,
              b_end: 210,
              r_start: 42,
              g_start: 255,
            },
            {
              b_start: 210,
              low: 3,
              high: 3.5,
              r_end: 0,
              g_end: 168,
              b_end: 255,
              r_start: 0,
              g_start: 255,
            },
            {
              b_start: 255,
              low: 3.5,
              high: 4,
              r_end: 59,
              g_end: 85,
              b_end: 217,
              r_start: 0,
              g_start: 168,
            },
            {
              b_start: 217,
              low: 4,
              high: 4.5,
              r_end: 0,
              g_end: 42,
              b_end: 255,
              r_start: 59,
              g_start: 85,
            },
            {
              b_start: 255,
              low: 4.5,
              high: 5,
              r_end: 132,
              g_end: 0,
              b_end: 255,
              r_start: 0,
              g_start: 42,
            },
          ],
        },
        data_update_time: "2023-04-24 10:37:22",
        data_status: 1,
      },
      {
        data_id: 10002601,
        data_version: 0,
        data_update_user: 1,
        name: "Diviner_5_10",
        content: {
          default: {
            b: -1,
            g: -1,
            r: -1,
          },
          gradation: "hotmap",
          type: 1,
          levels: [
            {
              b_start: 6,
              r_end: 255,
              low: 5,
              high: 5.5,
              g_end: 0,
              b_end: 0,
              r_start: 159,
              g_start: 6,
            },
            {
              b_start: 0,
              r_end: 255,
              low: 5.5,
              high: 6,
              g_end: 78,
              b_end: 0,
              r_start: 255,
              g_start: 0,
            },
            {
              b_start: 0,
              r_end: 255,
              low: 6,
              high: 6.5,
              g_end: 144,
              b_end: 0,
              r_start: 255,
              g_start: 78,
            },
            {
              b_start: 0,
              r_end: 255,
              low: 6.5,
              high: 7,
              g_end: 204,
              b_end: 0,
              r_start: 255,
              g_start: 144,
            },
            {
              b_start: 0,
              r_end: 42,
              low: 7,
              high: 7.5,
              g_end: 255,
              b_end: 0,
              r_start: 255,
              g_start: 204,
            },
            {
              b_start: 0,
              r_end: 0,
              low: 7.5,
              high: 8,
              g_end: 255,
              b_end: 210,
              r_start: 42,
              g_start: 255,
            },
            {
              b_start: 210,
              r_end: 0,
              low: 8,
              high: 8.5,
              g_end: 168,
              b_end: 255,
              r_start: 0,
              g_start: 255,
            },
            {
              b_start: 255,
              r_end: 59,
              low: 8.5,
              high: 9,
              g_end: 85,
              b_end: 217,
              r_start: 0,
              g_start: 168,
            },
            {
              b_start: 217,
              r_end: 0,
              low: 9,
              high: 9.5,
              g_end: 42,
              b_end: 255,
              r_start: 59,
              g_start: 85,
            },
            {
              b_start: 255,
              r_end: 132,
              low: 9.5,
              high: 10,
              g_end: 0,
              b_end: 255,
              r_start: 0,
              g_start: 42,
            },
          ],
        },
        data_update_time: "2023-04-24 10:36:58",
        data_status: 1,
      },
      {
        data_id: 10002501,
        data_version: 0,
        data_update_user: 1,
        name: "Grail_-8300_7000",
        content: {
          default: {
            b: -1,
            g: -1,
            r: -1,
          },
          gradation: "hotmap",
          type: 1,
          levels: [
            {
              b_start: 6,
              r_end: 255,
              low: -8300,
              high: -6770,
              g_end: 0,
              b_end: 0,
              r_start: 159,
              g_start: 6,
            },
            {
              b_start: 0,
              r_end: 255,
              low: -6770,
              high: -5240,
              g_end: 78,
              b_end: 0,
              r_start: 255,
              g_start: 0,
            },
            {
              b_start: 0,
              r_end: 255,
              low: -5240,
              high: -3710,
              g_end: 144,
              b_end: 0,
              r_start: 255,
              g_start: 78,
            },
            {
              b_start: 0,
              r_end: 255,
              low: -3710,
              high: -2180,
              g_end: 204,
              b_end: 0,
              r_start: 255,
              g_start: 144,
            },
            {
              b_start: 0,
              r_end: 42,
              low: -2180,
              high: -650,
              g_end: 255,
              b_end: 0,
              r_start: 255,
              g_start: 204,
            },
            {
              b_start: 0,
              r_end: 0,
              low: -650,
              high: 880,
              g_end: 255,
              b_end: 210,
              r_start: 42,
              g_start: 255,
            },
            {
              b_start: 210,
              r_end: 0,
              low: 880,
              high: 2410,
              g_end: 168,
              b_end: 255,
              r_start: 0,
              g_start: 255,
            },
            {
              b_start: 255,
              r_end: 59,
              low: 2410,
              high: 3940,
              g_end: 85,
              b_end: 217,
              r_start: 0,
              g_start: 168,
            },
            {
              b_start: 217,
              r_end: 0,
              low: 3940,
              high: 5470,
              g_end: 42,
              b_end: 255,
              r_start: 59,
              g_start: 85,
            },
            {
              b_start: 255,
              r_end: 132,
              low: 5470,
              high: 7000,
              g_end: 0,
              b_end: 255,
              r_start: 0,
              g_start: 42,
            },
          ],
        },
        data_update_time: "2023-04-24 10:36:07",
        data_status: 1,
      },
      {
        data_id: 10002401,
        data_version: 0,
        data_update_user: 1,
        name: "Grail_-23000_31000",
        content: {
          default: {
            b: -1,
            g: -1,
            r: -1,
          },
          gradation: "hotmap",
          type: 1,
          levels: [
            {
              b_start: 6,
              r_end: 255,
              low: -23000,
              high: -17600,
              g_end: 0,
              b_end: 0,
              r_start: 159,
              g_start: 6,
            },
            {
              b_start: 0,
              r_end: 255,
              low: -17600,
              high: -12200,
              g_end: 78,
              b_end: 0,
              r_start: 255,
              g_start: 0,
            },
            {
              b_start: 0,
              r_end: 255,
              low: -12200,
              high: -6800,
              g_end: 144,
              b_end: 0,
              r_start: 255,
              g_start: 78,
            },
            {
              b_start: 0,
              r_end: 255,
              low: -6800,
              high: -1400,
              g_end: 204,
              b_end: 0,
              r_start: 255,
              g_start: 144,
            },
            {
              b_start: 0,
              r_end: 42,
              low: -1400,
              high: 4000,
              g_end: 255,
              b_end: 0,
              r_start: 255,
              g_start: 204,
            },
            {
              b_start: 0,
              r_end: 0,
              low: 4000,
              high: 9400,
              g_end: 255,
              b_end: 210,
              r_start: 42,
              g_start: 255,
            },
            {
              b_start: 210,
              r_end: 0,
              low: 9400,
              high: 14800,
              g_end: 168,
              b_end: 255,
              r_start: 0,
              g_start: 255,
            },
            {
              b_start: 255,
              r_end: 59,
              low: 14800,
              high: 20200,
              g_end: 85,
              b_end: 217,
              r_start: 0,
              g_start: 168,
            },
            {
              b_start: 217,
              r_end: 0,
              low: 20200,
              high: 25600,
              g_end: 42,
              b_end: 255,
              r_start: 59,
              g_start: 85,
            },
            {
              b_start: 255,
              r_end: 132,
              low: 25600,
              high: 31000,
              g_end: 0,
              b_end: 255,
              r_start: 0,
              g_start: 42,
            },
          ],
        },
        data_update_time: "2023-04-24 10:35:22",
        data_status: 1,
      },
      {
        data_id: 10001001,
        data_version: 1,
        data_update_user: 1,
        name: "FBT_0_255",
        content: {
          default: {
            b: -1,
            g: -1,
            r: -1,
          },
          gradation: "hotmap",
          type: 1,
          levels: [
            {
              b_start: 6,
              r_end: 255,
              low: 0,
              high: 25.5,
              g_end: 0,
              b_end: 0,
              r_start: 159,
              g_start: 6,
            },
            {
              b_start: 0,
              r_end: 255,
              low: 25.5,
              high: 51,
              g_end: 78,
              b_end: 0,
              r_start: 255,
              g_start: 0,
            },
            {
              b_start: 0,
              r_end: 255,
              low: 51,
              high: 76.5,
              g_end: 144,
              b_end: 0,
              r_start: 255,
              g_start: 78,
            },
            {
              b_start: 0,
              r_end: 255,
              low: 76.5,
              high: 102,
              g_end: 204,
              b_end: 0,
              r_start: 255,
              g_start: 144,
            },
            {
              b_start: 0,
              r_end: 42,
              low: 102,
              high: 127.5,
              g_end: 255,
              b_end: 0,
              r_start: 255,
              g_start: 204,
            },
            {
              b_start: 0,
              r_end: 0,
              low: 127.5,
              high: 153,
              g_end: 255,
              b_end: 210,
              r_start: 42,
              g_start: 255,
            },
            {
              b_start: 210,
              r_end: 0,
              low: 153,
              high: 178.5,
              g_end: 168,
              b_end: 255,
              r_start: 0,
              g_start: 255,
            },
            {
              b_start: 255,
              r_end: 59,
              low: 178.5,
              high: 204,
              g_end: 85,
              b_end: 217,
              r_start: 0,
              g_start: 168,
            },
            {
              b_start: 217,
              r_end: 0,
              low: 204,
              high: 229.5,
              g_end: 42,
              b_end: 255,
              r_start: 59,
              g_start: 85,
            },
            {
              b_start: 255,
              r_end: 132,
              low: 229.5,
              high: 255,
              g_end: 0,
              b_end: 255,
              r_start: 0,
              g_start: 42,
            },
          ],
        },
        data_update_time: "2023-04-21 11:27:10",
        data_status: 1,
      },
      {
        data_id: 10000901,
        data_version: 0,
        data_update_user: 1,
        name: "DOM_0_255",
        content: {
          default: {
            b: -1,
            g: -1,
            r: -1,
          },
          gradation: "hdt",
          type: 1,
          levels: [
            {
              high: 25.5,
              low: 0,
              r_end: 20,
              b_start: 0,
              g_end: 20,
              b_end: 20,
              r_start: 0,
              g_start: 0,
            },
            {
              high: 51,
              low: 25.5,
              r_end: 40,
              b_start: 20,
              g_end: 40,
              b_end: 40,
              r_start: 20,
              g_start: 20,
            },
            {
              high: 76.5,
              low: 51,
              r_end: 60,
              b_start: 40,
              g_end: 60,
              b_end: 60,
              r_start: 40,
              g_start: 40,
            },
            {
              high: 102,
              low: 76.5,
              r_end: 80,
              b_start: 60,
              g_end: 80,
              b_end: 80,
              r_start: 60,
              g_start: 60,
            },
            {
              high: 127.5,
              low: 102,
              r_end: 100,
              b_start: 80,
              g_end: 100,
              b_end: 100,
              r_start: 80,
              g_start: 80,
            },
            {
              high: 153,
              low: 127.5,
              r_end: 120,
              b_start: 100,
              g_end: 120,
              b_end: 120,
              r_start: 100,
              g_start: 100,
            },
            {
              high: 178.5,
              low: 153,
              r_end: 140,
              b_start: 120,
              g_end: 140,
              b_end: 140,
              r_start: 120,
              g_start: 120,
            },
            {
              high: 204,
              low: 178.5,
              r_end: 160,
              b_start: 140,
              g_end: 160,
              b_end: 160,
              r_start: 140,
              g_start: 140,
            },
            {
              high: 229.5,
              low: 204,
              r_end: 180,
              b_start: 160,
              g_end: 180,
              b_end: 180,
              r_start: 160,
              g_start: 160,
            },
            {
              high: 255,
              low: 229.5,
              r_end: 200,
              b_start: 180,
              g_end: 200,
              b_end: 200,
              r_start: 180,
              g_start: 180,
            },
          ],
        },
        data_update_time: "2023-04-21 11:23:37",
        data_status: 1,
      },
      {
        data_id: 10000801,
        data_version: 0,
        data_update_user: 1,
        name: "DOM_0_150",
        content: {
          default: {
            b: -1,
            g: -1,
            r: -1,
          },
          gradation: "hdt",
          type: 1,
          levels: [
            {
              b_start: 0,
              r_end: 20,
              low: 0,
              high: 15,
              g_end: 20,
              b_end: 20,
              r_start: 0,
              g_start: 0,
            },
            {
              b_start: 20,
              r_end: 40,
              low: 15,
              high: 30,
              g_end: 40,
              b_end: 40,
              r_start: 20,
              g_start: 20,
            },
            {
              b_start: 40,
              r_end: 60,
              low: 30,
              high: 45,
              g_end: 60,
              b_end: 60,
              r_start: 40,
              g_start: 40,
            },
            {
              b_start: 60,
              r_end: 80,
              low: 45,
              high: 60,
              g_end: 80,
              b_end: 80,
              r_start: 60,
              g_start: 60,
            },
            {
              b_start: 80,
              r_end: 100,
              low: 60,
              high: 75,
              g_end: 100,
              b_end: 100,
              r_start: 80,
              g_start: 80,
            },
            {
              b_start: 100,
              r_end: 120,
              low: 75,
              high: 90,
              g_end: 120,
              b_end: 120,
              r_start: 100,
              g_start: 100,
            },
            {
              b_start: 120,
              r_end: 140,
              low: 90,
              high: 105,
              g_end: 140,
              b_end: 140,
              r_start: 120,
              g_start: 120,
            },
            {
              b_start: 140,
              r_end: 160,
              low: 105,
              high: 120,
              g_end: 160,
              b_end: 160,
              r_start: 140,
              g_start: 140,
            },
            {
              b_start: 160,
              r_end: 180,
              low: 120,
              high: 135,
              g_end: 180,
              b_end: 180,
              r_start: 160,
              g_start: 160,
            },
            {
              b_start: 180,
              r_end: 200,
              low: 135,
              high: 150,
              g_end: 200,
              b_end: 200,
              r_start: 180,
              g_start: 180,
            },
          ],
        },
        data_update_time: "2023-04-21 11:23:11",
        data_status: 1,
      },
      {
        data_id: 10000701,
        data_version: 2,
        data_update_user: 1,
        name: "CE1_DEM",
        content: {
          default: {
            r: -1,
            g: -1,
            b: -1,
          },
          type: 1,
          gradation: "hotmap",
          levels: [
            {
              b_start: 6,
              low: -9500,
              r_end: 255,
              high: -7450,
              g_end: 0,
              b_end: 0,
              r_start: 159,
              g_start: 6,
            },
            {
              b_start: 0,
              low: -7450,
              r_end: 255,
              high: -5400,
              g_end: 78,
              b_end: 0,
              r_start: 255,
              g_start: 0,
            },
            {
              b_start: 0,
              low: -5400,
              r_end: 255,
              high: -3350,
              g_end: 144,
              b_end: 0,
              r_start: 255,
              g_start: 78,
            },
            {
              b_start: 0,
              low: -3350,
              r_end: 255,
              high: -1300,
              g_end: 204,
              b_end: 0,
              r_start: 255,
              g_start: 144,
            },
            {
              b_start: 0,
              low: -1300,
              r_end: 42,
              high: 0,
              g_end: 255,
              b_end: 0,
              r_start: 255,
              g_start: 204,
            },
            {
              b_start: 0,
              low: 0,
              r_end: 0,
              high: 2800,
              g_end: 255,
              b_end: 210,
              r_start: 42,
              g_start: 255,
            },
            {
              b_start: 210,
              low: 2800,
              r_end: 0,
              high: 4850,
              g_end: 168,
              b_end: 255,
              r_start: 0,
              g_start: 255,
            },
            {
              b_start: 255,
              low: 4850,
              r_end: 59,
              high: 6900,
              g_end: 85,
              b_end: 217,
              r_start: 0,
              g_start: 168,
            },
            {
              b_start: 217,
              low: 6900,
              r_end: 0,
              high: 8950,
              g_end: 42,
              b_end: 255,
              r_start: 59,
              g_start: 85,
            },
            {
              b_start: 255,
              low: 8950,
              r_end: 132,
              high: 11000,
              g_end: 0,
              b_end: 255,
              r_start: 0,
              g_start: 42,
            },
          ],
        },
        data_update_time: "2023-04-28 14:14:44",
        data_status: 1,
      },
      {
        data_id: 10000601,
        data_version: 1,
        data_update_user: 1,
        name: "CE1_二氧化钛含量",
        content: {
          default: {
            b: -1,
            g: -1,
            r: -1,
          },
          gradation: "hotmap",
          type: 1,
          levels: [
            {
              high: 1.5,
              low: 0,
              b_start: 6,
              r_end: 255,
              g_end: 0,
              b_end: 0,
              r_start: 159,
              g_start: 6,
            },
            {
              high: 3,
              low: 1.5,
              b_start: 0,
              r_end: 255,
              g_end: 78,
              b_end: 0,
              r_start: 255,
              g_start: 0,
            },
            {
              high: 4.5,
              low: 3,
              b_start: 0,
              r_end: 255,
              g_end: 144,
              b_end: 0,
              r_start: 255,
              g_start: 78,
            },
            {
              high: 6,
              low: 4.5,
              b_start: 0,
              r_end: 255,
              g_end: 204,
              b_end: 0,
              r_start: 255,
              g_start: 144,
            },
            {
              high: 7.5,
              low: 6,
              b_start: 0,
              r_end: 42,
              g_end: 255,
              b_end: 0,
              r_start: 255,
              g_start: 204,
            },
            {
              high: 9,
              low: 7.5,
              b_start: 0,
              r_end: 0,
              g_end: 255,
              b_end: 210,
              r_start: 42,
              g_start: 255,
            },
            {
              high: 10.5,
              low: 9,
              b_start: 210,
              r_end: 0,
              g_end: 168,
              b_end: 255,
              r_start: 0,
              g_start: 255,
            },
            {
              high: 12,
              low: 10.5,
              b_start: 255,
              r_end: 59,
              g_end: 85,
              b_end: 217,
              r_start: 0,
              g_start: 168,
            },
            {
              high: 13.5,
              low: 12,
              b_start: 217,
              r_end: 0,
              g_end: 42,
              b_end: 255,
              r_start: 59,
              g_start: 85,
            },
            {
              high: 15,
              low: 13.5,
              b_start: 255,
              r_end: 132,
              g_end: 0,
              b_end: 255,
              r_start: 0,
              g_start: 42,
            },
          ],
        },
        data_update_time: "2023-04-21 11:16:31",
        data_status: 1,
      },
      {
        data_id: 10000501,
        data_version: 2,
        data_update_user: 1,
        name: "CE1_氧化铁含量",
        content: {
          default: {
            b: -1,
            g: -1,
            r: -1,
          },
          gradation: "hotmap",
          type: 1,
          levels: [
            {
              high: 4.8,
              low: 2,
              b_start: 6,
              r_end: 255,
              g_end: 0,
              b_end: 0,
              r_start: 159,
              g_start: 6,
            },
            {
              high: 7.6,
              low: 4.8,
              b_start: 0,
              r_end: 255,
              g_end: 78,
              b_end: 0,
              r_start: 255,
              g_start: 0,
            },
            {
              high: 10.4,
              low: 7.6,
              b_start: 0,
              r_end: 255,
              g_end: 144,
              b_end: 0,
              r_start: 255,
              g_start: 78,
            },
            {
              high: 13.2,
              low: 10.4,
              b_start: 0,
              r_end: 255,
              g_end: 204,
              b_end: 0,
              r_start: 255,
              g_start: 144,
            },
            {
              high: 16,
              low: 13.2,
              b_start: 0,
              r_end: 42,
              g_end: 255,
              b_end: 0,
              r_start: 255,
              g_start: 204,
            },
            {
              high: 18.8,
              low: 16,
              b_start: 0,
              r_end: 0,
              g_end: 255,
              b_end: 210,
              r_start: 42,
              g_start: 255,
            },
            {
              high: 21.6,
              low: 18.8,
              b_start: 210,
              r_end: 0,
              g_end: 168,
              b_end: 255,
              r_start: 0,
              g_start: 255,
            },
            {
              high: 24.4,
              low: 21.6,
              b_start: 255,
              r_end: 59,
              g_end: 85,
              b_end: 217,
              r_start: 0,
              g_start: 168,
            },
            {
              high: 27.2,
              low: 24.4,
              b_start: 217,
              r_end: 0,
              g_end: 42,
              b_end: 255,
              r_start: 59,
              g_start: 85,
            },
            {
              high: 30,
              low: 27.2,
              b_start: 255,
              r_end: 132,
              g_end: 0,
              b_end: 255,
              r_start: 0,
              g_start: 42,
            },
          ],
        },
        data_update_time: "2023-04-21 10:24:25",
        data_status: 1,
      },
      {
        data_id: 10000201,
        data_version: 0,
        data_update_user: 1,
        name: "color_gray",
        content: {
          default: {
            r: -1,
            g: -1,
            b: -1,
          },
          type: 1,
          gradation: "hdt",
          levels: [
            {
              high: -8000,
              r_end: 20,
              low: -10000,
              b_start: 0,
              g_end: 20,
              b_end: 20,
              r_start: 0,
              g_start: 0,
            },
            {
              high: -6000,
              r_end: 40,
              low: -8000,
              b_start: 20,
              g_end: 40,
              b_end: 40,
              r_start: 20,
              g_start: 20,
            },
            {
              high: -4000,
              r_end: 60,
              low: -6000,
              b_start: 40,
              g_end: 60,
              b_end: 60,
              r_start: 40,
              g_start: 40,
            },
            {
              high: -2000,
              r_end: 80,
              low: -4000,
              b_start: 60,
              g_end: 80,
              b_end: 80,
              r_start: 60,
              g_start: 60,
            },
            {
              high: 0,
              r_end: 100,
              low: -2000,
              b_start: 80,
              g_end: 100,
              b_end: 100,
              r_start: 80,
              g_start: 80,
            },
            {
              high: 2000,
              r_end: 120,
              low: 0,
              b_start: 100,
              g_end: 120,
              b_end: 120,
              r_start: 100,
              g_start: 100,
            },
            {
              high: 4000,
              r_end: 140,
              low: 2000,
              b_start: 120,
              g_end: 140,
              b_end: 140,
              r_start: 120,
              g_start: 120,
            },
            {
              high: 6000,
              r_end: 160,
              low: 4000,
              b_start: 140,
              g_end: 160,
              b_end: 160,
              r_start: 140,
              g_start: 140,
            },
            {
              high: 8000,
              r_end: 180,
              low: 6000,
              b_start: 160,
              g_end: 180,
              b_end: 180,
              r_start: 160,
              g_start: 160,
            },
            {
              high: 10000,
              r_end: 200,
              low: 8000,
              b_start: 180,
              g_end: 200,
              b_end: 200,
              r_start: 180,
              g_start: 180,
            },
          ],
        },
        data_update_time: "2023-04-14 16:01:02",
        data_status: 1,
      },
      {
        data_id: 10000101,
        data_version: 0,
        data_update_user: 1,
        name: "moon_color",
        content: {
          default: {
            r: -1,
            g: -1,
            b: -1,
          },
          gradation: "traffic",
          type: 1,
          levels: [
            {
              high: -8333.333333,
              low: -10000,
              r_end: 51,
              b_start: 249,
              g_end: 152,
              b_end: 50,
              r_start: 102,
              g_start: 181,
            },
            {
              high: -6666.666667,
              low: -8333.333333,
              r_end: 72,
              b_start: 50,
              g_end: 193,
              b_end: 35,
              r_start: 51,
              g_start: 152,
            },
            {
              high: -5000,
              low: -6666.666667,
              r_end: 172,
              b_start: 35,
              g_end: 213,
              b_end: 50,
              r_start: 72,
              g_start: 193,
            },
            {
              high: -3333.333333,
              low: -5000,
              r_end: 240,
              b_start: 50,
              g_end: 248,
              b_end: 0,
              r_start: 172,
              g_start: 213,
            },
            {
              high: -1666.666667,
              low: -3333.333333,
              r_end: 254,
              b_start: 0,
              g_end: 223,
              b_end: 50,
              r_start: 240,
              g_start: 248,
            },
            {
              high: 0,
              low: -1666.666667,
              r_end: 254,
              b_start: 50,
              g_end: 183,
              b_end: 50,
              r_start: 254,
              g_start: 223,
            },
            {
              high: 1666.666667,
              low: 0,
              r_end: 254,
              b_start: 50,
              g_end: 141,
              b_end: 50,
              r_start: 254,
              g_start: 183,
            },
            {
              high: 3333.333333,
              low: 1666.666667,
              r_end: 254,
              b_start: 50,
              g_end: 93,
              b_end: 50,
              r_start: 254,
              g_start: 141,
            },
            {
              high: 5000,
              low: 3333.333333,
              r_end: 251,
              b_start: 50,
              g_end: 49,
              b_end: 46,
              r_start: 254,
              g_start: 93,
            },
            {
              high: 6666.666667,
              low: 5000,
              r_end: 161,
              b_start: 46,
              g_end: 16,
              b_end: 16,
              r_start: 251,
              g_start: 49,
            },
            {
              high: 8333.333333,
              low: 6666.666667,
              r_end: 45,
              b_start: 16,
              g_end: 140,
              b_end: 240,
              r_start: 161,
              g_start: 16,
            },
            {
              high: 10000,
              low: 8333.333333,
              r_end: 214,
              b_start: 240,
              g_end: 240,
              b_end: 45,
              r_start: 45,
              g_start: 140,
            },
          ],
        },
        data_update_time: "2023-04-12 18:10:23",
        data_status: 1,
      },
      {
        data_id: 2,
        data_version: 0,
        data_update_user: 1,
        name: "默认色板",
        content: {
          default: {
            b: -1,
            g: -1,
            r: -1,
          },
          type: 0,
          levels: [
            {
              high: 0.7,
              low: 0,
              r: 100,
              g: 255,
              b: 100,
            },
          ],
        },
        data_update_time: "2017-09-04 15:57:57",
        data_status: 1,
      },
      {
        data_id: 1,
        data_version: 1,
        data_update_user: 1,
        name: "渐变色板",
        content: {
          default: {
            b: -1,
            g: -1,
            r: -1,
          },
          type: 1,
          gradation: "visibility",
          levels: [
            {
              high: 0.7,
              r_end: 255,
              b_start: 0,
              low: 0,
              g_end: 255,
              b_end: 255,
              r_start: 0,
              g_start: 0,
            },
          ],
        },
        data_update_time: "2019-05-15 18:11:22",
        data_status: 1,
      },
    ],
    page_num: 1,
  },
  status: "$SUCCESS",
  command: "SELECT_COLOR_TABLE",
};
export default json;

 src/assets/js/colorValue.json

ÎļþÒÑɾ³ý

 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>