资源查询修改

Surpriseplus

2023-08-30 cb67139282e3b18af03928e98ff3bdbd8f0f3128

 src/views/resourceQuery/resourceQuery.vue

@@ -1,7 +1,28 @@
<template>
  <div class="resourceQuery">
    <moon-map></moon-map>
    <div class="left_box">
    <div class="bottom_btn_TWO">
      <div
        v-show="mapFlag == '2D'"
        class="ChangeMap twoImg"
        @click="setMapImg('2D')"
      ></div>
      <div
        v-show="mapFlag != '2D'"
        class="ChangeMap threeImg"
        @click="setMapImg('3D')"
      ></div>
    </div>
    <div
      class="left_menu"
      @click="leftDialog =true"
      v-show="!leftDialog"
    >
    </div>
    <div
      class="left_box"
      v-show="leftDialog"
    >
      <div class="top_box">
        <div class="input_box">
          <el-form
@@ -20,12 +41,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"
                />
@@ -34,12 +55,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"
                />
@@ -48,7 +69,7 @@
            <el-form-item label="时间范围">
              <el-date-picker
                style="width: 100%"
                v-model="form.time"
                v-model="acqTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
@@ -57,54 +78,93 @@
              >
              </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>
            <div class="KJCX_btn_list">
              <div class="KJCX_btn">
              <div
                class="KJCX_btn"
                @click="setDrawMenu(1)"
              >
                <span>点</span>
                <div class="btn_bg d"></div>
              </div>
              <div
                class="KJCX_btn"
                @click="setDrawMenu(2)"
              >
                <span>线</span>
                <div class="btn_bg x"></div>
              </div>
              <div class="KJCX_btn">
              <div
                class="KJCX_btn"
                @click="setDrawMenu(3)"
              >
                <span>矩形</span>
                <div class="btn_bg jx"></div>
              </div>
              <div class="KJCX_btn">
              <div
                class="KJCX_btn"
                @click="setDrawMenu(4)"
              >
                <span>多边形</span>
                <div class="btn_bg db"></div>
              </div>
              <div
                class="KJCX_btn"
                @click="setDrawMenu(5)"
              >
                <span>清除</span>
                <div class="btn_bg qc"></div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="btn_close"
          @click="leftDialog = false"
        >

        </div>
        <div class="btn_box">
          <div class="btn">
            <el-button type="primary" class="btnbox">检索</el-button>
            <el-button
              type="primary"
              class="btnbox"
              @click="setQueryRetrieval"
            >检索</el-button>
          </div>
          <div>
            <el-button type="primary" class="btnbox delbtn">重置</el-button>
            <el-button
              type="primary"
              class="btnbox delbtn"
              @click="setQueryRestRetrieval"
            >重置</el-button>
          </div>
        </div>
      </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
        class="list_box"
        v-show="listDialog"
      >
        <div
          class="list"
          v-for="(e, i) in list"
@@ -118,57 +178,122 @@
              <span class="attribute_content">{{ e.name }}</span>
            </div>
            <div class="attribute">
              <span class="attribute_title">存情位量：</span>
              <span class="attribute_content">{{ e.time }}</span>
              <span class="attribute_title">存储位置：</span>
              <span class="attribute_content">{{ e.path }}</span>
            </div>
            <div class="attribute">
              <span class="attribute_title">生产时间：</span>
              <span class="attribute_content">{{ e.data }}</span>
              <span class="attribute_content">{{ e.createTime }}</span>
            </div>
            <div class="attribute" style="margin: 0">
            <div
              class="attribute"
              style="margin: 0"
            >
              <span class="attribute_title">数据大小：</span>
              <span class="attribute_content">dsadas</span>
              <span class="attribute_content">{{ e.sizes }}M</span>
            </div>
          </div>
          <div class="all_btn" v-on:click.stop="details(e)">
          <div
            class="all_btn"
            v-on:click.stop="details(e)"
          >
            <i class="el-icon-more"></i>
          </div>
        </div>
      </div>
      <div class="bottom_box">
        <span class="msg_box"
          >显示第{{ paginationData.pageNo }}到{{
            paginationData.pageSize
      <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
        >
          }}条</span>
        <div class="bottom_btn">
          <el-button type="primary" class="btnbox">全选</el-button>
          <el-button type="primary" class="btnbox delbtn">取消</el-button>
          <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 class="details_box" v-show="detailsBox">
    <div
      class="details_box"
      v-show="detailsBox"
      v-drag="true"
    >
      <div class="details_t">
        <i class="el-icon-close" @click="detailsBox = false"></i>
        <i
          class="el-icon-close"
          @click="detailsBox = false"
        ></i>
      </div>
      <div class="details_table">
        <div class="table_header">
          <div class="table_td">属性</div>
          <div class="table_td">属性值</div>
        <div style="height: 430px;overflow: auto;">
          <div class="table_header">
            <div class="table_td">属性</div>
            <div class="table_td">属性值</div>
          </div>

          <div
            class="table_tr"
            v-for="(e, i) in tableList"
            :key="i"
          >
            <div class="table_td">{{ e.alias}}</div>
            <div class="table_td">{{ e.value }}</div>
          </div>
        </div>
        <div class="table_tr" v-for="(e, i) in tableList" :key="i">
          <div class="table_td">{{ e.name }}</div>
          <div class="table_td">{{ e.value }}</div>
        </div>

      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="20%"
      :before-close="handleClose"
    >
      <div class="dialogContent">
        <el-form ref="form">
          <el-form-item label="缓冲距离（M）">
            <el-input-number
              v-model="bufferNumber"
              :step="10"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="dialogVisible = false"
        >取 消</el-button>
        <el-button
          type="primary"
          size="small"
          @click="setCloseDialog"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<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, selectByPageAndCount } from '../../api/api'
export default {
  components: {
    moonMap,
@@ -179,105 +304,428 @@
        pageNo: 1,
        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",
        },
      ],
      tableList: [],
      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,
        },
      ],
      list: [],
      currentPage4: 4,
      form: {
        name: "",
        region: "",
        selectName: "",
        layerUrl: "",
        children: [],
        value1: "",
        sensorType: 0,
        mataType: 0,
        wkt: null,
        pageIndex: 1,
        pageSize: 100,
        count: 0,
        startDate: null,
        endDate: null
      },
      stretchOptions: [
        {
          value: "目录",
          label: "目录",
        },
      ],
      acqTime: '',
      sensorOption: [],
      metaOption: [],
      detailsBox: false,
      listDialog: false,
      leftDialog: true,
      drawType: null,
      dialogVisible: false,
      bufferNumber: 100,
      geoWkt: null,
      wktEntity: null,
      mapFlag: '2D'
    };
  },
  methods: {
    details(val) {
      this.detailsBox = true;
    setMapImg(res) {
      if (res == "2D") {
        this.mapFlag = "3D";
        window.earthCtrl.coreMap.scene.mode = SmartEarth.Cesium.SceneMode.SCENE2D;
      } else if (res == "3D") {
        this.mapFlag = "2D";
        window.earthCtrl.coreMap.scene.mode = SmartEarth.Cesium.SceneMode.SCENE3D;
      }
    },
    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]);
          this.setAddCheckLayer(this.list[i]);
        }
      }
    },
    setListRemoveCheckAll() {
      for (var i in this.list) {
        if (this.list[i].checked) {
          this.list[i].checked = false;
          this.setRemoveCheckLayer(this.list[i]);
        }



      }
      this.listChecked = [];
    },
    async details(e) {

      const data = await selectByPageAndCount({
        ns: 'lf',
        pageIndex: 1,
        pageSize: 100000,
        tab: 'sys_meta'
      })
      if (data.code != 200) return
      var std = [];
      var result = data.result;
      for (var i in result) {
        for (var key in e) {
          if (result[i].field == key) {
            result[i].value = e[key]
          }
          if (result[i].field == 'gid' && key == 'id') {
            result[i].value = e[key]
          }

        }
      }


      this.detailsBox = true;
      this.tableList = result;
    },
    setQueryRestRetrieval() {
      this.listDialog = false;
      this.setFromStart();
      this.setDrawMenu(5);
      this.listChecked = [];
      Viewer.entities.removeAll()
    },
    async setQueryRetrieval() {
      if (this.geoWkt) {
        this.form.wkt = encr(this.geoWkt)
      } else {
        this.form.wkt = null;
      }
      if (this.acqTime) {
        this.form.endDate = this.setFromDate(this.acqTime[0])
        this.form.startDate = this.setFromDate(this.acqTime[1])
      } else {
        this.form.endDate = null
        this.form.startDate = null
      }
      const data = await select_meta_ByPageAndCount(this.form);
      if (data.code != 200) return
      this.form.count = data.count;
      var result = data.result;

      for (var i in result) {
        if (result[i].createTime) {
          result[i].createTime = this.setFromDate(result[i].createTime)
        }
        if (result[i].updateTime) {
          result[i].updateTime = this.setFromDate(result[i].updateTime)
        }
        if (result[i].acqTime) {
          result[i].acqTime = this.setFromDate(result[i].acqTime)
        }

      }

      if (result) {
        this.list = result;
      } else {
        this.list = [];
      }
      this.listDialog = true;
    },
    setFromDate(res) {
      var time = new Date(res);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        '-' +
        this.add0(m) +
        '-' +
        this.add0(d) +
        ' ' +
        this.add0(h) +
        ':' +
        this.add0(mm) +
        ':' +
        this.add0(s)
      );
    },
    //格式化时间
    add0(m) {

      return m < 10 ? "0" + m : m;
    },
    //大小值改变
    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) {
      val.checked = !val.checked;
      if (val.checked) {
        this.listChecked.push(val);
        this.setAddCheckLayer(val);
      }

      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);
              this.setRemoveCheckLayer(val);
            }
          });
        }
      }
    },
    setAddCheckLayer(res) {
      if (!res.geom) return
      var wkt = this.$wkt.parse(res.geom).coordinates[0]
      var geom = [];
      for (var i in wkt) {
        geom.push(Cesium.Cartesian3.fromDegrees(wkt[i][0], wkt[i][1]))
      }
      Viewer.entities.add({
        name: res.name + "&&" + res.id,
        polygon: {
          hierarchy: geom,
          material: Cesium.Color.WHITE.withAlpha(0.1),
          // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          outline: true,
          outlineColor: Cesium.Color.fromCssColorString("rgba(130,167,33, 1)"),
          outlineWidth: 10,
          classificationType: Cesium.ClassificationType.BOTH,//贴地形和3dtile
          clampToGround: true,//开启贴地
          height: 0,
        },

      });
    },
    setRemoveCheckLayer(res) {
      var name = res.name + "&&" + res.id;
      var entity = Viewer.entities._entities._array
      for (var i = 0; i < entity.length; i++) {
        if (entity[i].name == name) {
          Viewer.entities.remove(entity[i])
          i--;
        }
      }


    },
    setDrawMenu(res) {
      this.bufferNumber = 100;
      switch (res) {
        case 1:
          this.drawType = 'point';
          this.dialogVisible = true;
          break;
        case 2:
          this.drawType = 'polyline';
          this.dialogVisible = true;
          break;
        case 3:
          this.drawType = 'rectangle';
          this.setDrawEntity();
          break;
        case 4:
          this.drawType = 'polygon';
          this.setDrawEntity();
          break
        case 5:
          this.setClearWktGeom();
          break
      }
    },
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.dialogVisible = false;
        })
        .catch(_ => { });
    },
    setCloseDialog() {
      this.dialogVisible = false;
      this.setDrawEntity();
    },
    setDrawEntity() {
      var config = {}
      if (this.drawType != 'point') {
        config = { showSize: false }
      }
      if (this.wktEntity) {
        this.setClearWktGeom();
      }
      var that = this;
      sgworld.Creator.createSimpleGraphic(this.drawType, config, (entity) => {

        that.querySatialQuery(entity);
      });
    },
    querySatialQuery(res) {
      var res_val;
      switch (this.drawType) {
        case 'point':
          res_val = res.position.getValue();
          break;
        case 'polyline':
          res_val = res.polyline.positions.getValue();
          break;
        case 'rectangle':
          res_val = res.rectangle.coordinates.getValue();
          break;
        case 'polygon':
          res_val = res.polygon.hierarchy.getValue().positions;
          break;
      }
      sgworld.Creator.SimpleGraphic.clear()
      this.geoWkt = this.getEntityGeometry(res_val, this.drawType)
      if (this.geoWkt) {
        this.$nextTick(() => {
          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.WHITE.withAlpha(0.2),
          //heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          outline: true,
          outlineColor: Cesium.Color.RED,
          outlineWidth: 10,
          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;
      var std = [];
      if (type == 'point') {
        var geom = this.setCartesianToEightFour(res);
        var point = turf.point([geom.lng, geom.lat]);
        res_val = this.setTurfBuffer(point, this.bufferNumber, 'circle')
      } else if (type == 'polyline') {
        for (var i in res) {
          var geom = this.setCartesianToEightFour(res[i]);
          std.push([geom.lng, geom.lat])
        }

        var line = turf.lineString(std, { name: "polyline" })
        res_val = this.setTurfBuffer(line, this.bufferNumber, 'buffer')
      } else if (type == 'rectangle') {
        var geom = new Cesium.Rectangle.subsample(
          res,
          Cesium.Ellipsoid.WGS84,
          res.height
        )
        for (var i in geom) {
          var rectangle = this.setCartesianToEightFour(geom[i]);
          std.push([rectangle.lng, rectangle.lat])
        }
        std.push(std[0])
        res_val = turf.polygon([std], { name: "polygon" })
      } else if (type == 'polygon') {
        for (var i in res) {
          var polygon = this.setCartesianToEightFour(res[i]);
          std.push([polygon.lng, polygon.lat])
        }
        std.push(std[0])
        res_val = turf.polygon([std], { name: "polygon" })
      }
      return this.setJonToWKT(res_val)
    },
    setJonToWKT(res) {
      let fixedVal = this.fixToPositon(res)
      var jsonToWkt = this.$wkt.convert(fixedVal.geometry)
      return jsonToWkt;
    },
    setTurfBuffer(geom, distance, type) {

      return turf.buffer(geom, distance, { units: 'miles' });
    },
    fixToPositon(restVal, digits = 6) {
      restVal.geometry.coordinates.forEach(coord => {
        if (Array.isArray(coord)) {
          coord.forEach(item => {
            if (item.length >= 2) {
              item[0] = Number(item[0].toFixed(digits))
              item[1] = Number(item[1].toFixed(digits))
            }
          })
        }
      })
      return restVal
    },
    setCartesianToEightFour(res) {
      var std = {}
      let ellipsoid = Viewer.scene.globe.ellipsoid
      let cartographic = ellipsoid.cartesianToCartographic(res)
      std.lat = Cesium.Math.toDegrees(cartographic.latitude)
      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,
        wkt: null,
        pageIndex: 1,
        pageSize: 100,
        count: 0,
        startDate: null,
        endDate: null
      }
      this.acqTime = ''
    }
  },
  created() {},
  created() { },
  mounted() {
    this.getSensorMeta();
    this.setFromStart();
  }
};
</script>

@@ -286,10 +734,19 @@
  width: 100%;
  height: 100%;
  position: relative;
  .left_menu {
    top: 10px;
    left: 10px;
    position: absolute;
    width: 20px;
    height: 20px;
    background: url("../../assets/img/展开菜单.png") no-repeat;
    background-size: 100% 100%;
  }
  .left_box {
    width: 427px;
    height: 780px;
    left: 20px;
    min-width: 427px;
    height: auto;
    left: 10px;
    top: 10px;
    background: rgba(7, 8, 14, 0.8);
    border: 1px solid #d6e4ff;
@@ -302,6 +759,15 @@
      display: flex;
      justify-content: space-between;
      align-items: center;
      .btn_close {
        top: 20px;
        right: 20px;
        position: absolute;
        width: 20px;
        height: 20px;
        background: url("../../assets/img/收起菜单.png") no-repeat;
        background-size: 100% 100%;
      }
      .btn_box {
        .btn {
          margin-bottom: 37px;
@@ -349,6 +815,10 @@
            cursor: pointer;
            margin-left: 7px;
          }
          .d {
            background: url("../../assets/img/d.png") no-repeat center;
            background-size: 100% 100%;
          }
          .x {
            background: url("../../assets/img/x.png") no-repeat center;
            background-size: 100% 100%;
@@ -359,6 +829,10 @@
          }
          .db {
            background: url("../../assets/img/db.png") no-repeat center;
            background-size: 100% 100%;
          }
          .qc {
            background: url("../../assets/img/清除.png") no-repeat center;
            background-size: 100% 100%;
          }
        }
@@ -395,8 +869,9 @@
    }
    .list_box {
      overflow: auto;
      //   height: 350px;
      height: 42%;
      height: 350px;
      //height: 42%;

      .list {
        padding: 10px;
        background: #0d131d;
@@ -480,6 +955,7 @@
  .details_box {
    width: 533px;
    // height: 430px;
    overflow: auto;
    background: rgba(7, 8, 14, 0.8);
    padding: 10px;
    position: absolute;
@@ -532,4 +1008,30 @@
    }
  }
}
.dialogContent /deep/.el-icon-plus {
  color: #606266 !important;
}
.bottom_btn_TWO {
  position: absolute;
  z-index: 39;
  /*  prettier-ignore */
  bottom: 68PX;
  /*  prettier-ignore */
  right: 70PX;

  .ChangeMap {
    /*  prettier-ignore */
    width: 30PX;
    /*  prettier-ignore */
    height: 30PX;
    /*  prettier-ignore */
    border: 1PX solid rgba(255, 255, 255, 0.1);
  }
  .twoImg {
    background: url("../../assets/img/2D.png") no-repeat;
  }
  .threeImg {
    background: url("../../assets/img/3D.png") no-repeat;
  }
}
</style>