资源查询页面修改，接口对接调试，图层管理页面修改，数据上传页面修改

Surpriseplus

2023-08-29 968394a4f9885e7df2a4af4b5b35af070975f4b6

资源查询页面修改，接口对接调试，图层管理页面修改，数据上传页面修改

 public/config/config.js

@@ -1,5 +1,7 @@
var isWeb = location.hostname.indexOf("103.85.165.") > -1;
// var isWeb = false;

const webUrl = location.href.indexOf("/web") > -1 ? "/web" : "";

var is_production = false;//判断是否为生产环境

var webHost = isWeb ? "103.85.165.99" + ":28888" : '192.168.20.83' + ":8888";
@@ -8,7 +10,6 @@

var iisHost = isWeb ? "103.85.165.99" + ":8050" : '192.168.20.83' + ":80";

const webUrl = true ? "/middle" : "";
//SDK许可
var StaticFileBaseUrl = webUrl + "/CIMSDK/";


 src/assets/lang/en.js

@@ -196,7 +196,8 @@
      code: 'Code',
      sensorType: 'Sensor Type',
      collectionTime: 'Collection Time',
      metadataType: 'Metadata Type'
      metadataType: 'Metadata Type',
      label1: 'Please select the collection time',
    },
    metadataManage: 'information management',
    uploadManage: 'Release management',

 src/assets/lang/zh.js

@@ -188,7 +188,8 @@
      code: '编码',
      sensorType: '传感器类型',
      collectionTime: '采集时间',
      metadataType: '元数据类型'
      metadataType: '元数据类型',
      label1: '请选择采集时间',
    },
    metadataManage: '信息管理',


 src/components/MapView/moonMap.vue

@@ -133,7 +133,7 @@
      );
      //页面初始化
      this.earthCtrl = new SmartEarth.EarthCtrl("cesiumContainer", {
        //  StaticFileBaseUrl: StaticFileBaseUrl,
        StaticFileBaseUrl: StaticFileBaseUrl,
        ellipsoidCoordinates: "MOON",
      });
      this.earthCtrl.environment.disableAllEffect();

 src/utils/treeData.js

@@ -74,10 +74,12 @@
            std.push(dir);
        }
    }

    var str = [];

    for (var i in std) {
        let dir = std[i].split('/');
        if (dir.length > 1) {
        for (var j = 1; j < dir.length; j++) {
            if (j == 1) {
                var clabel = dir[0] + "/" + dir[j]
@@ -133,6 +135,19 @@
                }
            }
        }
        } else {
            num++;
            var val = {
                id: num,
                pid: -1,
                label: dir[0],
                bak: dir[0]
            }
            str.push(val)


        }

    }

    return str
@@ -146,7 +161,9 @@
    var str = [];
    for (var i in result) {
        var dir = result[i].bak.split('/');
        if (dir.length > 1) {
        var f_filter = dataFilter(std, dir[0]);

        if (f_filter.length == 0) {
            std.push(dir[0])
            num++
@@ -157,14 +174,19 @@
            })
        }
    }

    }

    return str;
}
//遍历匹配获取数据
function dataFilter(result, bak) {
    let val = result.filter(res => {

        if (res == bak) {
            return res;
        }
    })

    return val;
}

 src/views/datamanage/dataUpdata.vue

@@ -83,50 +83,62 @@
            </el-form-item>
            <!-- 传感器类型 -->
            <el-form-item
              :label="$t('dataManage.dataUpObj.dataVersion')"
              :label="$t('dataManage.dataUpObj.sensorType')"
              style="margin-right: 2%"
              size="small"
            >
              <el-select
                :popper-append-to-body="false"
                :disabled="tableData.length == 0 ? false : true"
                v-model="formInline.verid"
                v-model="formInline.sensorType"
                :placeholder="$t('common.choose')"
                size="small"
              >
                <el-option
                  v-for="item in verOption"
                  :key="item.id"
                  v-for="item in sensorOption"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 元数据类型 -->
            <el-form-item
              :label="$t('dataManage.dataUpObj.dataVersion')"
              :label="$t('dataManage.dataUpObj.metadataType')"
              style="margin-right: 2%"
              size="small"
            >
              <el-select
                :popper-append-to-body="false"
                :disabled="tableData.length == 0 ? false : true"
                v-model="formInline.verid"
                v-model="formInline.mataType"
                :placeholder="$t('common.choose')"
                size="small"
              >
                <el-option
                  v-for="item in verOption"
                  :key="item.id"
                  v-for="item in metaOption"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <div class="flex_box">
              <div style="margin-right: auto">

                <!-- 采集时间 -->
                <el-form-item
                  :label="$t('dataManage.dataUpObj.collectionTime')"
                  size="small"
                >
                  <el-date-picker
                    v-model="formInline.acqTime"
                    type="datetime"
                    placeholder="请选择采集时间"
                  >
                  </el-date-picker>
                </el-form-item>

                <!-- 选择数据 -->
                <el-form-item size="small">
                  <el-link
@@ -201,7 +213,7 @@
                  >{{ $t('common.Warehousin') }}
                  </el-button>
                  <!-- 质检 -->
                  <el-button
                  <!-- <el-button
                    style="margin-right:-9px"
                    v-if="menuStatus.insert"
                    :disabled="multipleSelection.length == 0 ? true : false"
@@ -210,7 +222,7 @@
                    icon="el-icon-folder-checked"
                    @click="handleQuayTestClick()"
                  >{{ $t('common.quayTest') }}
                  </el-button>
                  </el-button> -->

                </el-form-item>
              </div>
@@ -318,7 +330,7 @@
              </div>
              <div>
                <el-form-item>
                  <el-button
                  <!-- <el-button
                    v-if="menuStatus.upload"
                    :disabled="multipleDelete.length == 0 ? true : false"
                    @click="setEnclosure"
@@ -326,7 +338,7 @@
                    type="success"
                    size="small"
                  >{{ $t('common.enclosure') }}
                  </el-button>
                  </el-button> -->
                  <el-button
                    v-if="menuStatus.delete"
                    @click="setWarehouseDel"
@@ -1308,6 +1320,7 @@
  dataUpload_selectMetaById,
  selectdirTab,
} from "../../api/api";
import { meta_type, sensor_type } from "./js/layerManage";

export default {
  name: "dataUpdata",
@@ -1318,34 +1331,7 @@
    return {
      coordinateOption: [],
      disOptions: [
        {
          name: "崩塌治理",
          value: "崩塌治理",
        },
        {
          name: "不稳定斜坡治理",
          value: "不稳定斜坡治理",
        },
        {
          name: "地面塌陷治理",
          value: "地面塌陷治理",
        },
        {
          name: "高陡边坡治理",
          value: "高陡边坡治理",
        },
        {
          name: "泥石流治理",
          value: "泥石流治理",
        },
        {
          name: "水毁治理",
          value: "水毁治理",
        },
        {
          name: "滑坡治理",
          value: "滑坡治理",
        },

      ],
      testQuayVisible: false,
      formCheckAll: {
@@ -1423,6 +1409,9 @@
        coordinateId: null,
        path: null,
        verid: null,
        sensorType: 0,
        mataType: 0,
        acqTime: null
      },
      cascader: {
        label: "name",
@@ -1431,22 +1420,7 @@
        emitPath: false,
      },
      specialtyOption: [
        {
          value: "测量专业",
          label: "测量专业",
        },
        {
          value: "勘察专业",
          label: "勘察专业",
        },
        {
          value: "地灾专业",
          label: "地灾专业",
        },
        {
          value: "洞库专业",
          label: "洞库专业",
        },

      ],
      fileType: [],
      pathBak: null,
@@ -1519,15 +1493,18 @@
      },
      warehouseDialog: false,
      wareData: [],
      metaOption: [],
      sensorOption: []
    };
  },

  mounted() {

    //获取传感器元数据类型
    this.getSensorMeta()
    //获取坐标系
    this.setCoordinateSystem();
    //  this.setCoordinateSystem();
    //获取项目名称
    this.setProjectName();
    // this.setProjectName();
    //获取文件上传路径
    this.getFilePath();
    //权限获取
@@ -1543,6 +1520,10 @@
  },
  watch: {},
  methods: {
    getSensorMeta() {
      this.metaOption = meta_type;
      this.sensorOption = sensor_type;
    },
    stateFormat(row, column) {
      var val = ['shp', 'gdb', 'xls', 'xlsx']
      if (val.indexOf(row.type) > -1 && row.rows > 0) {
@@ -1859,11 +1840,11 @@
        '-' +
        this.add0(d) +
        ' ' +
        h +
        this.add0(h) +
        ':' +
        mm +
        this.add0(mm) +
        ':' +
        s
        this.add0(s)
      );
    },
    //自动匹配取消
@@ -1899,6 +1880,15 @@
            res.isMeta = true;
          }
        });
      }
      var time = null;
      if (this.formInline.acqTime) {
        time = this.changetimeLayer(this.formInline.acqTime)
      }
      for (var i in this.insertWareList) {
        this.insertWareList[i].mataType = this.formInline.mataType;
        this.insertWareList[i].sensortype = this.formInline.sensorType;
        this.insertWareList[i].acqTime = time.toString();
      }


@@ -2067,7 +2057,7 @@
      this.loading = true;
      var obj = {
        dirid: this.formInline.dirid,
        epsgCode: this.formInline.coordinateId,
        epsgCode: 'EPSG:4490',
        path: this.formInline.path,
        verid: this.formInline.verid,
      };
@@ -2391,9 +2381,9 @@
      this.formInline.specialtyData = "请选择数据";
      document.getElementById("selectDataFile").value = "";
      this.formInline.metaData = "请选择元数据";
      document.getElementById("metaDataFile").value = "";
      // document.getElementById("metaDataFile").value = "";
      this.formInline.wbsData = "请选择WBS数据";
      document.getElementById("wbsDataFile").value = "";
      // document.getElementById("wbsDataFile").value = "";
    },
    //获取上传文件数量
    async getFileLength() {
@@ -2577,8 +2567,8 @@
    },
    //重置WPS选择
    restWBSFile() {
      this.formInline.wbsData = "请选择WBS数据";
      document.getElementById("wbsDataFile").value = "";
      // this.formInline.wbsData = "请选择WBS数据";
      // document.getElementById("wbsDataFile").value = "";
    },
    //WBS数据Change事件
    handleWBSFileChange(event) {
@@ -2731,6 +2721,7 @@
    },
    //格式化时间
    add0(m) {

      return m < 10 ? "0" + m : m;
    },
    //大小值改变
@@ -2799,8 +2790,8 @@
    },
    //重置元数据
    restMetaFile() {
      this.formInline.metaData = "请选择元数据";
      document.getElementById("metaDataFile").value = "";
      // this.formInline.metaData = "请选择元数据";
      // document.getElementById("metaDataFile").value = "";
    },
    //选择元数据文件切换
    handleMetaFileChange(event) {

 src/views/datamanage/dictionaryManage.vue

@@ -679,6 +679,7 @@
      this.insertform.tabDesc = val.tabDesc;
      this.insertform.ns = val.ns;
      this.activeName = val.tab;
      this.listData.pageIndex = 1;
      this.listData.tab = val.tab;
      this.listData.ns = val.ns;
      this.startQueryNameData();
@@ -815,6 +816,7 @@
        this.$message.error("列表调用失败");
      }
      var val = JSON.parse(JSON.stringify(data.result));

      var tree = getTreeData(data.result);
      this.domainData = tree
      this.getQueryNameData(tree[0]);

 src/views/datamanage/js/layerManage.js

@@ -89,3 +89,60 @@

    }
]
export const meta_type = [
    {
        name: '请选择元数据类型',
        value: 0
    }, {
        name: '数字正射影像图',
        value: 1,
    }, {
        name: '数字高程模型',
        value: 2,
    }, {
        name: '单波段栅格数据',
        value: 3,
    }, {
        name: '多光谱栅格数据',
        value: 4,
    }, {
        name: '高光谱栅格数据',
        value: 5,
    }, {
        name: '矢量数据',
        value: 6,
    }, {
        name: '三维模型',
        value: 7,
    }
]
export const sensor_type = [
    {
        name: '请选择传感器类型',
        value: 0
    }, {
        name: '嫦娥一号',
        value: 1,
    }, {
        name: '嫦娥二号',
        value: 2,
    }, {
        name: '科普教育',
        value: 3,
    }, {
        name: '克莱门汀',
        value: 4,
    }, {
        name: '月球探勘者',
        value: 5,
    }, {
        name: '月亮女神',
        value: 6,
    }, {
        name: '月球勘测轨道器',
        value: 7,
    }, {
        name: '圣杯号',
        value: 8,
    }
]

 src/views/datamanage/layerManagement.vue

@@ -1000,9 +1000,10 @@
          orderNum = this.getMaxOrderNum(pchildNodes);
          lever = this.formInline.level;
        } else {
          id = 0;
          orderNum = 1;
          lever = 1;
          let pchildNodes = this.$refs.tree.getNode(this.newNode.id).parent.childNodes
          orderNum = this.getMaxOrderNum(pchildNodes);
          lever = this.formInline.level;
          id = this.formInline.pid;
        }
      } else if (res == 2) {
        //新增子级
@@ -1014,7 +1015,7 @@
      this.insertData.pid = id;
      this.insertData.level = lever;
      this.insertData.orderNum = orderNum;

      debugger
      this.dialogVisible = true;
    },
    getMaxOrderNum(res) {

 src/views/datamanage/projectionLayerManagement.vue

@@ -1002,9 +1002,10 @@
          orderNum = this.getMaxOrderNum(pchildNodes);
          lever = this.formInline.level;
        } else {
          id = 0;
          orderNum = 1;
          lever = 1;
          let pchildNodes = this.$refs.tree.getNode(this.newNode.id).parent.childNodes
          orderNum = this.getMaxOrderNum(pchildNodes);
          lever = this.formInline.level;
          id = this.formInline.pid;
        }

      } else if (res == 2) {

 src/views/resourceQuery/resourceQuery.vue

@@ -29,12 +29,12 @@
            <el-form-item label="传感器类型">
              <el-select
                style="width: 100%"
                v-model="form.region"
                v-model="form.sensorType"
                placeholder=""
              >
                <el-option
                  v-for="(e, i) in stretchOptions"
                  :label="e.label"
                  v-for="(e, i) in sensorOption"
                  :label="e.name"
                  :value="e.value"
                  :key="i"
                />
@@ -43,12 +43,12 @@
            <el-form-item label="数据类型">
              <el-select
                style="width: 100%"
                v-model="form.region"
                v-model="form.mataType"
                placeholder=""
              >
                <el-option
                  v-for="(e, i) in stretchOptions"
                  :label="e.label"
                  v-for="(e, i) in metaOption"
                  :label="e.name"
                  :value="e.value"
                  :key="i"
                />
@@ -57,7 +57,7 @@
            <el-form-item label="时间范围">
              <el-date-picker
                style="width: 100%"
                v-model="form.time"
                v-model="form.acqTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
@@ -66,12 +66,7 @@
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <!-- <div class="btnstyle editBtn">
              <el-button type="primary" @click="onSubmit">确定</el-button>
              <el-button class="delbtn">取消</el-button>
            </div> -->
            </el-form-item>

          </el-form>
          <div class="KJCX">
            <div class="KJCX_title">空间查询</div>
@@ -104,6 +99,13 @@
                <span>多边形</span>
                <div class="btn_bg db"></div>
              </div>
              <div
                class="KJCX_btn"
                @click="setDrawMenu(5)"
              >
                <span>清除</span>
                <div class="btn_bg db"></div>
              </div>
            </div>
          </div>
        </div>
@@ -118,33 +120,39 @@
            <el-button
              type="primary"
              class="btnbox"
              @click="setQueryRetrieval"
            >检索</el-button>
          </div>
          <div>
            <el-button
              type="primary"
              class="btnbox delbtn"
              @click="setQueryRestRetrieval"
            >重置</el-button>
          </div>
        </div>
      </div>
      <div v-show="listDialog">

      </div>
      <!-- <div class="pagination">
      <div
        class="pagination"
        v-show="listDialog"
      >
        <el-pagination
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :current-page="form.pageIndex"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          :page-size="form.pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="400"
          :total="form.count"
        >
        </el-pagination>
      </div> -->
      <!-- <div class="list_box">
      </div>
      <div
        class="list_box"
        v-show="listDialog"
      >
        <div
          class="list"
          v-for="(e, i) in list"
@@ -180,10 +188,13 @@
            <i class="el-icon-more"></i>
          </div>
        </div>
      </div> -->
      <!-- <div class="bottom_box">
        <span class="msg_box">显示第{{ paginationData.pageNo }}到{{
            paginationData.pageSize
      </div>
      <div
        class="bottom_box"
        v-show="listDialog"
      >
        <span class="msg_box">显示第{{ (( (form.pageIndex - 1)*form.pageSize)+1 )}}到{{(form.pageIndex*form.pageSize)
            
          }}条，共{{ list.length }}条记录，已选择{{
            listChecked.length
          }}条</span>
@@ -191,17 +202,20 @@
          <el-button
            type="primary"
            class="btnbox"
            @click="setListCheckAll"
          >全选</el-button>
          <el-button
            type="primary"
            class="btnbox delbtn"
            @click="setListRemoveCheckAll"
          >取消</el-button>
        </div>
      </div> -->
      </div>
    </div>
    <div
      class="details_box"
      v-show="detailsBox"
      v-drag="true"
    >
      <div class="details_t">
        <i
@@ -214,14 +228,17 @@
          <div class="table_td">属性</div>
          <div class="table_td">属性值</div>
        </div>
        <div style="height: 430px;overflow: auto;">
        <div
          class="table_tr"
          v-for="(e, i) in tableList"
            v-for="(e,key, i) in tableList"
          :key="i"
        >
          <div class="table_td">{{ e.name }}</div>
          <div class="table_td">{{ e.value }}</div>
            <div class="table_td">{{ key}}</div>
            <div class="table_td">{{ e }}</div>
        </div>
        </div>

      </div>
    </div>
    <el-dialog
@@ -262,6 +279,8 @@
<script>
import * as turf from "@turf/turf"
import moonMap from "../../components/MapView/moonMap.vue"; //地图
import { meta_type, sensor_type } from "../datamanage/js/layerManage";
import { select_meta_ByPageAndCount, encr } from '../../api/api'
export default {
  components: {
    moonMap,
@@ -273,89 +292,84 @@
        pageSize: 10,
      },
      tableList: [
        {
          name: "dataid",
          value: "LC81350352022001LGN00",
        },
        {
          name: "satellite",
          value: "LANDSAT8",
        },
        {
          name: "datatype",
          value: "OLLTIRS",
        },
        {
          name: "ines samples",
          value: "7931.0",
        },
        {
          name: "sensor",
          value: "7811.0",
        },

      ],
      listChecked: [],
      list: [
        {
          name: "名称",
          CQWZ: "位置",
          time: "时间",
          data: "大小",
          checked: false,
        },
        {
          name: "名称",
          CQWZ: "位置",
          time: "时间",
          data: "大小",
          checked: false,
        },
        {
          name: "名称",
          CQWZ: "位置",
          time: "时间",
          data: "大小",
          checked: false,
        },
        {
          name: "名称",
          CQWZ: "位置",
          time: "时间",
          data: "大小",
          checked: false,
        },

      ],
      currentPage4: 4,
      form: {
        name: "",
        region: "",
        selectName: "",
        layerUrl: "",
        children: [],
        value1: "",
        sensorType: 0,
        mataType: 0,
        acqTime: null,
        wkt: null,
        pageIndex: 1,
        pageSize: 100,
        count: 0,
      },
      stretchOptions: [
        {
          value: "目录",
          label: "目录",
        },
      ],
      sensorOption: [],
      metaOption: [],
      detailsBox: false,
      listDialog: false,
      leftDialog: true,
      drawType: null,
      dialogVisible: false,
      bufferNumber: 100,
      geoWkt: null,
      wktEntity: null
    };
  },
  methods: {
    details(val) {
      this.detailsBox = true;
    setListCheckAll() {
      for (var i in this.list) {
        var checked = this.list[i].checked
        if (!checked) {
          this.list[i].checked = true;
          this.listChecked.push(this.list[i]);
        }
      }
    },
    setListRemoveCheckAll() {
      for (var i in this.list) {
        this.list[i].checked = false;
      }
      this.listChecked = [];
    },
    details(e) {
      this.detailsBox = true;
      this.tableList = e;
    },
    setQueryRestRetrieval() {
      this.listDialog = false;
      this.setFromStart();
      this.setDrawMenu(5);
      this.listChecked = [];
    },
    async setQueryRetrieval() {
      if (this.geoWkt) {
        this.form.wkt = encr(this.geoWkt)
      } else {
        this.form.wkt = null;
      }
      const data = await select_meta_ByPageAndCount(this.form);
      if (data.code != 200) return;
      this.form.count = data.count;
      this.list = data.result;
      this.listDialog = true;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.form.pageIndex = 1;
      this.form.pageSize = val;
      this.setQueryRetrieval();

    },
    handleCurrentChange(val) {
      this.form.pageIndex = val;
      this.setQueryRetrieval();

      console.log(`当前页: ${val}`);
    },
    checkedList(val) {
@@ -367,7 +381,7 @@
      if (this.listChecked.length > 0) {
        if (!val.checked) {
          this.listChecked.forEach((e, i) => {
            if (e.name == val.name) {
            if (e.id == val.id) {
              this.listChecked.splice(i, 1);
            }
          });
@@ -393,6 +407,9 @@
          this.drawType = 'polygon';
          this.setDrawEntity();
          break
        case 5:
          this.setClearWktGeom();
          break
      }
    },
    handleClose() {
@@ -410,6 +427,9 @@
      var config = {}
      if (this.drawType != 'point') {
        config = { showSize: false }
      }
      if (this.wktEntity) {
        this.setClearWktGeom();
      }
      var that = this;
      sgworld.Creator.createSimpleGraphic(this.drawType, config, (entity) => {
@@ -433,8 +453,43 @@
          res_val = res.polygon.hierarchy.getValue().positions;
          break;
      }
      var val = this.getEntityGeometry(res_val, this.drawType)
      debugger
      this.geoWkt = this.getEntityGeometry(res_val, this.drawType)
      if (this.geoWkt) {

        this.setAddWktEntity(this.geoWkt)
      }

    },
    setAddWktEntity(res) {
      var wkt = this.$wkt.parse(res).coordinates[0];
      var geom = [];
      for (var i in wkt) {

        geom.push(Cesium.Cartesian3.fromDegrees(wkt[i][0], wkt[i][1], wkt[i][2] ?? 0))
      }
      this.wktEntity = Viewer.entities.add({
        name: '资源查询',
        polygon: {
          hierarchy: geom,
          material: Cesium.Color.BLUE.withAlpha(0),
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          outline: true,
          outlineColor: Cesium.Color.GREEN,
          outlineWidth: 5,
          classificationType: Cesium.ClassificationType.BOTH,//贴地形和3dtile
          clampToGround: true,//开启贴地
          height: 0,
        },

      });
    },
    setClearWktGeom() {
      if (this.wktEntity) {
        Viewer.entities.remove(this.wktEntity)
        this.wktEntity = null;
        this.geoWkt = null;
      }

    },
    getEntityGeometry(res, type) {
      var res_val;
@@ -503,9 +558,29 @@
      std.lng = Cesium.Math.toDegrees(cartographic.longitude)
      std.alt = cartographic.height
      return std
    },
    getSensorMeta() {
      this.metaOption = meta_type;
      this.sensorOption = sensor_type;
    },
    setFromStart() {
      this.form = {
        name: "",
        sensorType: 0,
        mataType: 0,
        acqTime: null,
        wkt: null,
        pageIndex: 1,
        pageSize: 100,
        count: 0,
      }
    }
  },
  created() { },
  mounted() {
    this.getSensorMeta();
    this.setFromStart();
  }
};
</script>

@@ -524,7 +599,7 @@
    background-size: 100% 100%;
  }
  .left_box {
    width: 427px;
    min-width: 427px;
    height: auto;
    left: 10px;
    top: 10px;
@@ -645,8 +720,9 @@
    }
    .list_box {
      overflow: auto;
      //   height: 350px;
      height: 42%;
      height: 350px;
      //height: 42%;

      .list {
        padding: 10px;
        background: #0d131d;
@@ -730,6 +806,7 @@
  .details_box {
    width: 533px;
    // height: 430px;
    overflow: auto;
    background: rgba(7, 8, 14, 0.8);
    padding: 10px;
    position: absolute;