资源查询前端页面修改

Surpriseplus

2023-08-25 fe774d1b86848f213e766fa40f96e753802a642d

 src/views/resourceQuery/resourceQuery.vue

@@ -1,7 +1,16 @@
<template>
  <div class="resourceQuery">
    <moon-map></moon-map>
    <div class="left_box">
    <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
@@ -67,31 +76,62 @@
          <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>
          </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"
            >检索</el-button>
          </div>
          <div>
            <el-button type="primary" class="btnbox delbtn">重置</el-button>
            <el-button
              type="primary"
              class="btnbox delbtn"
            >重置</el-button>
          </div>
        </div>
      </div>
      <div class="pagination">
      <div v-show="listDialog">

      </div>
      <!-- <div class="pagination">
        <el-pagination
          small
          @size-change="handleSizeChange"
@@ -103,8 +143,8 @@
          :total="400"
        >
        </el-pagination>
      </div>
      <div class="list_box">
      </div> -->
      <!-- <div class="list_box">
        <div
          class="list"
          v-for="(e, i) in list"
@@ -125,44 +165,102 @@
              <span class="attribute_title">生产时间：</span>
              <span class="attribute_content">{{ e.data }}</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>
            </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}}条，共{{list.length}}条记录，已选择{{listChecked.length}}条</span>
      </div> -->
      <!-- <div class="bottom_box">
        <span class="msg_box">显示第{{ paginationData.pageNo }}到{{
            paginationData.pageSize
          }}条，共{{ list.length }}条记录，已选择{{
            listChecked.length
          }}条</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"
          >全选</el-button>
          <el-button
            type="primary"
            class="btnbox delbtn"
          >取消</el-button>
        </div>
      </div>
      </div> -->
    </div>
    <div class="details_box" v-show="detailsBox">
    <div
      class="details_box"
      v-show="detailsBox"
    >
      <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>
        <div class="table_tr" v-for="(e,i) in tableList" :key="i">
        <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"; //地图
export default {
  components: {
@@ -170,10 +268,10 @@
  },
  data() {
    return {
        paginationData:{
            pageNo: 1,
        pageSize: 10
        },
      paginationData: {
        pageNo: 1,
        pageSize: 10,
      },
      tableList: [
        {
          name: "dataid",
@@ -243,7 +341,11 @@
        },
      ],
      detailsBox: false,

      listDialog: false,
      leftDialog: true,
      drawType: null,
      dialogVisible: false,
      bufferNumber: 100,
    };
  },
  methods: {
@@ -261,33 +363,170 @@
      if (val.checked) {
        this.listChecked.push(val);
      }
   
      if( this.listChecked.length > 0 ) {
        if(!val.checked){
            this.listChecked.forEach((e,i)=>{

if(e.name==val.name){
    this.listChecked.splice(i,1)
}
})
      if (this.listChecked.length > 0) {
        if (!val.checked) {
          this.listChecked.forEach((e, i) => {
            if (e.name == val.name) {
              this.listChecked.splice(i, 1);
            }
          });
        }
      
      }
    },
    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
      }
    },
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.dialogVisible = false;
        })
        .catch(_ => { });
    },
    setCloseDialog() {
      this.dialogVisible = false;
      this.setDrawEntity();
    },
    setDrawEntity() {
      var config = {}
      if (this.drawType != 'point') {
        config = { showSize: false }
      }
      var that = this;
      sgworld.Creator.createSimpleGraphic(this.drawType, config, (entity) => {
        sgworld.Creator.SimpleGraphic.clear()
        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;
      }
      var val = this.getEntityGeometry(res_val, this.drawType)
      debugger
    },
    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
    }
  },
  created() {},
  created() { },
};
</script>

<style lang="less" scoped>
.resourceQuery {
  width: 100%;
  height: 98%;
  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;
    height: auto;
    left: 10px;
    top: 10px;
    background: rgba(7, 8, 14, 0.8);
    border: 1px solid #d6e4ff;
@@ -300,6 +539,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;
@@ -346,6 +594,10 @@
            height: 26px;
            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;
@@ -530,4 +782,7 @@
    }
  }
}
.dialogContent /deep/.el-icon-plus {
  color: #606266 !important;
}
</style>