月球大数据地理空间分析展示平台-【前端】-月球2期前端
WX
2023-09-13 03012dbaf8d1dcc43f31feb488f9cbcb7d30f011
优化
已修改3个文件
295 ■■■■■ 文件已修改
src/views/layer/layerSet.vue 235 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/plotting/plotting.vue 16 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/plotting/plottingInquire.vue 44 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/layer/layerSet.vue
@@ -3,10 +3,7 @@
    <div class="layerBox">
      <div class="layerTitle">
        <div class="tileLeft">
          <div
            class="titleImg"
            @click="editState"
          >
          <div class="titleImg" @click="editState">
            <ArrowLeft />
          </div>
          <div class="titleLable">图层编辑</div>
@@ -22,78 +19,58 @@
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
          ref="treeRef"
          style="font-size: 16px;"
          style="font-size: 16px"
        />
      </div>
    </div>
    <div class="edit_box">
      <div class="edit_box_btn btnstyle">
        <el-button
          type="primary"
          :icon="Plus"
          @click="insertLayerData(1)"
        >新增同级</el-button>
        <el-button
          type="primary"
          :icon="Plus"
          @click="insertLayerData(2)"
        >新增子级</el-button>
        <el-button type="primary" :icon="Plus" @click="insertLayerData(1)"
          >新增同级</el-button
        >
        <el-button type="primary" :icon="Plus" @click="insertLayerData(2)"
          >新增子级</el-button
        >
        <el-button
          type="primary"
          :icon="Delete"
          class="delbtn"
          @click="delLayer"
        >删除</el-button>
        <el-button
          type="primary"
          :icon="Top"
          @click="move(1)"
        >向上移动</el-button>
        <el-button
          type="primary"
          :icon="Bottom"
          @click="move(2)"
        >向下移动</el-button>
          >删除</el-button
        >
        <el-button type="primary" :icon="Top" @click="move(1)"
          >向上移动</el-button
        >
        <el-button type="primary" :icon="Bottom" @click="move(2)"
          >向下移动</el-button
        >
      </div>
      <div class="edit_box_form">
        <el-form
          :model="formInline"
          label-width="120px"
        >
        <el-form :model="formInline" label-width="120px">
          <el-form-item label="图层类型">
            <el-select
              style="width: 100%"
              v-model="formInline.isLayer"
            >
              <el-option
                label="图层组"
                value="0"
              ></el-option>
              <el-option
                label="图层"
                value="1"
              ></el-option>
            <el-select style="width: 100%" v-model="formInline.isLayer">
              <el-option label="图层组" value="0"></el-option>
              <el-option label="图层" value="1"></el-option>
            </el-select>
          </el-form-item>
          <!-- 服务资源-->
          <el-form-item
            v-show="formInline.isLayer == 1"
            label="服务资源"
          >
          <el-form-item v-show="formInline.isLayer == 1" label="服务资源">
            <el-button
              size="small"
              class="serviceButton"
              @click="setServiceChange('0')"
              key="0"
              :class="{ serviceActive: !serviceActive }"
            >否</el-button>
              >否</el-button
            >
            <el-button
              size="small"
              class="serviceButton"
              @click="setServiceChange('1')"
              key="1"
              :class="{ serviceActive: serviceActive }"
            >是</el-button>
              >是</el-button
            >
          </el-form-item>
          <el-form-item label="图层名称">
@@ -103,10 +80,7 @@
            />
          </el-form-item>
          <!-- 服务类别 -->
          <el-form-item
            v-show="formInline.isLayer == 1"
            label="服务类别"
          >
          <el-form-item v-show="formInline.isLayer == 1" label="服务类别">
            <el-select
              style="width: 100%"
              v-model="formInline.category"
@@ -121,10 +95,7 @@
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="表名称"
            v-show="formInline.category == 2"
          >
          <el-form-item label="表名称" v-show="formInline.category == 2">
            <el-input
              v-model="formInline.tab"
              placeholder="请输入表名称"
@@ -132,10 +103,7 @@
            />
          </el-form-item>
          <!-- 数据类型 -->
          <el-form-item
            v-show="formInline.isLayer == 1"
            label="数据类型"
          >
          <el-form-item v-show="formInline.isLayer == 1" label="数据类型">
            <el-select
              style="width: 100%"
              v-model="formInline.data"
@@ -152,10 +120,7 @@
            </el-select>
          </el-form-item>
          <!-- 数据类型 -->
          <el-form-item
            v-show="formInline.isLayer == 1"
            label="服务类型"
          >
          <el-form-item v-show="formInline.isLayer == 1" label="服务类型">
            <el-select
              style="width: 100%"
              v-model="formInline.type"
@@ -171,10 +136,7 @@
            </el-select>
          </el-form-item>
          <el-form-item
            label="服务地址"
            v-show="formInline.isLayer == 1"
          >
          <el-form-item label="服务地址" v-show="formInline.isLayer == 1">
            <el-input
              v-model="formInline.serviceUrl"
              placeholder="请输入服务地址"
@@ -183,63 +145,40 @@
          </el-form-item>
          <el-form-item>
            <div class="btnstyle editBtn">
              <el-button
                type="primary"
                @click="onSubmit"
              >确定</el-button>
              <el-button
                class="delbtn"
                @click="updateRest"
              >取消</el-button>
              <el-button type="primary" @click="onSubmit">确定</el-button>
              <el-button class="delbtn" @click="updateRest">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog
      title="新增"
      v-model="dialogVisible"
      width="50%"
    >
    <el-dialog title="新增" v-model="dialogVisible" width="50%">
      <div style="width: 100%; max-height: 63vh; overflow-y: auto">
        <el-form
          :model="insertData"
          label-width="120px"
        >
        <el-form :model="insertData" label-width="120px">
          <el-form-item label="图层类型">
            <el-select
              style="width: 100%"
              v-model="insertData.isLayer"
            >
              <el-option
                label="图层组"
                value="0"
              ></el-option>
              <el-option
                label="图层"
                value="1"
              ></el-option>
            <el-select style="width: 100%" v-model="insertData.isLayer">
              <el-option label="图层组" value="0"></el-option>
              <el-option label="图层" value="1"></el-option>
            </el-select>
          </el-form-item>
          <!-- 服务资源-->
          <el-form-item
            v-show="insertData.isLayer == 1"
            label="服务资源"
          >
          <el-form-item v-show="insertData.isLayer == 1" label="服务资源">
            <el-button
              size="small"
              class="serviceButton"
              @click="setInsertServiceChange('0')"
              key="0"
              :class="{ serviceActive: !insertServiceActive }"
            >否</el-button>
              >否</el-button
            >
            <el-button
              size="small"
              class="serviceButton"
              @click="setInsertServiceChange('1')"
              key="1"
              :class="{ serviceActive: insertServiceActive }"
            >是</el-button>
              >是</el-button
            >
          </el-form-item>
          <el-form-item label="图层名称">
@@ -249,10 +188,7 @@
            />
          </el-form-item>
          <!-- 服务类别 -->
          <el-form-item
            v-show="insertData.isLayer == 1"
            label="服务类别"
          >
          <el-form-item v-show="insertData.isLayer == 1" label="服务类别">
            <el-select
              style="width: 100%"
              v-model="insertData.category"
@@ -267,10 +203,7 @@
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="表名称"
            v-show="insertData.category == 2"
          >
          <el-form-item label="表名称" v-show="insertData.category == 2">
            <el-input
              v-model="insertData.tab"
              placeholder="请输入表名称"
@@ -278,10 +211,7 @@
            />
          </el-form-item>
          <!-- 数据类型 -->
          <el-form-item
            v-show="insertData.isLayer == 1"
            label="数据类型"
          >
          <el-form-item v-show="insertData.isLayer == 1" label="数据类型">
            <el-select
              style="width: 100%"
              v-model="insertData.data"
@@ -298,10 +228,7 @@
            </el-select>
          </el-form-item>
          <!-- 数据类型 -->
          <el-form-item
            v-show="insertData.isLayer == 1"
            label="服务类型"
          >
          <el-form-item v-show="insertData.isLayer == 1" label="服务类型">
            <el-select
              style="width: 100%"
              v-model="insertData.type"
@@ -317,10 +244,7 @@
            </el-select>
          </el-form-item>
          <el-form-item
            label="服务地址"
            v-show="insertData.isLayer == 1"
          >
          <el-form-item label="服务地址" v-show="insertData.isLayer == 1">
            <el-input
              v-model="insertData.serviceUrl"
              placeholder="请输入服务地址"
@@ -329,37 +253,29 @@
          </el-form-item>
          <el-form-item>
            <div class="btnstyle editBtn">
              <el-button
                type="primary"
                size="small"
                @click="added()"
              >确定</el-button>
              <el-button type="primary" size="small" @click="added()"
                >确定</el-button
              >
              <el-button
                class="delbtn"
                type="info"
                size="small"
                @click="submitCancel()"
              >取消</el-button>
                >取消</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog
      v-model="dialogService"
      width="50%"
      :show-close="false"
    >
    <el-dialog v-model="dialogService" width="50%" :show-close="false">
      <div style="width: 100%; max-height: 63vh; overflow-y: auto">
        <div
          style="display: flex; justify-content: space-between"
          class="tableForm"
        >
          <div>
            <el-input
              size="small"
              v-model="listData.name"
            >
            <el-input size="small" v-model="listData.name">
              <template #suffix>
                <el-icon
                  class="el-input__icon el-icon-search"
@@ -371,19 +287,11 @@
            </el-input>
          </div>
          <div class="btnstyle">
            <el-button
              type="info"
              size="small"
              @click="setServiceRest"
            >
            <el-button type="info" size="small" @click="setServiceRest">
              重置
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="setServiceConfirm"
            >
            <el-button type="primary" size="small" @click="setServiceConfirm">
              确认
            </el-button>
            <el-button
@@ -396,26 +304,15 @@
            </el-button>
          </div>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          @select="selectChange"
        >
          <el-table-column
            type="selection"
            width="55"
          > </el-table-column>
        <el-table ref="multipleTable" :data="tableData" @select="selectChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="70px"
          />
          <el-table-column
            align="center"
            prop="cnName"
            label="资源名称"
          />
          <el-table-column align="center" prop="cnName" label="资源名称" />
          <el-table-column
            align="center"
@@ -430,10 +327,7 @@
            :formatter="setResType"
          />
        </el-table>
        <div
          class="pagination_box"
          style="margin-top: 15px"
        >
        <div class="pagination_box" style="margin-top: 15px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
@@ -653,7 +547,8 @@
      multipleSelection.value.proxy.indexOf("{token}") > -1
    ) {
      serviceUrl =
        BASE_URL + multipleSelection.value.proxy.replaceAll("{token}", token);
        config.BASE_URL +
        multipleSelection.value.proxy.replaceAll("{token}", token);
    } else {
      serviceUrl = multipleSelection.value.url;
    }
@@ -723,7 +618,9 @@
    formInline.value = res;
    formInline.value.isLayer = res.isLayer.toString();
    formInline.value.status = res.status.toString();
    if (formInline.value.status) {
      formInline.value.status = res.status.toString();
    }
  }
  dialogVisible.value = false;
  // this.formInline.isProject = res.isProject.toString();
@@ -862,7 +759,7 @@
    } else if (serviceActive.value) {
      var token = getToken();
      if (data.url.indexOf("{token}") > -1) {
        url = BASE_URL + data.url.replaceAll("{token}", token);
        url = config.BASE_URL + data.url.replaceAll("{token}", token);
      } else {
        url = data.url;
      }
src/views/plotting/plotting.vue
@@ -159,10 +159,11 @@
const setAddEntityPolyline = (res) => {
  var std = [];
  var res_val = res.polyline.positions.getValue();
  var coord = [];
  for (var i in res_val) {
    var geom = setCartesianToEightFour(res_val[i]);
    std.push(geom.lng, geom.lat);
    coord.push([geom.lng, geom.lat]);
  }
  var name = "Plyline#" + plotNum.value.line;
  var layer = Viewer.entities.add({
@@ -174,13 +175,8 @@
      clampToGround: true,
    },
  });
  var linestring = turf.lineString([
    [-24, 63],
    [-23, 60],
    [-25, 65],
    [-20, 69],
  ]);
  var linestring = turf.lineString(coord);
  console.log(linestring);
  var wkt = WKT.convert(linestring.geometry);
  list.value.push({
    wkt: wkt,
@@ -219,7 +215,7 @@
  var polygon = turf.polygon([coord]);
  var wkt = WKT.convert(polygon.geometry);
  console.log(polygon.geometry);
  let turfPoint = [];
  polygon.geometry.coordinates[0].forEach((e) => {
    turfPoint.push(turf.point(e));
@@ -227,7 +223,7 @@
  var features = turf.featureCollection(turfPoint);
  var center = turf.center(features);
  console.log(center);
  list.value.push({
    wkt: wkt,
    name: name,
src/views/plotting/plottingInquire.vue
@@ -24,10 +24,7 @@
        >
          <!-- <el-tab-pane label="图层属性" name="first">User</el-tab-pane> -->
          <el-tab-pane label="查询结果" name="second">
            <div class="chart_box" v-if="chartIsshow">
              <Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
            </div>
            <div class="inquireContent_input" v-if="!chartIsshow">
            <div class="inquireContent_input" v-show="pixelIsShow">
              <!-- <div class="inquireContent_input_left">
                <div class="label">范围框</div>
                <el-input
@@ -38,7 +35,7 @@
                  <template #append>km</template>
                </el-input>
              </div> -->
              <div class="inquireContent_input_right" v-show="pixelIsShow">
              <div class="inquireContent_input_right">
                <div class="label">范围框内最大像素值</div>
                <el-select
                  v-model="ScopeBox.pixel"
@@ -55,6 +52,9 @@
                  />
                </el-select>
              </div>
            </div>
            <div class="chart_box" v-if="chartIsshow">
              <Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
            </div>
            <div class="inquireContent_msg" v-if="!chartIsshow">
              <div class="inquireContent_msg_k">
@@ -89,7 +89,7 @@
                </div>
              </div>
            </div>
            <div class="download">
            <div class="download" v-if="!chartIsshow">
              <el-button link @click="download">下载分析结果</el-button>
            </div>
          </el-tab-pane>
@@ -170,10 +170,12 @@
let resultList = ref([]);
//像素选择
const pixelChange = (val) => {
  selectPoint({
    pixel: val,
    wkt: `POINT (${store.state.plottingInquireData.entitiesData.lng} ${store.state.plottingInquireData.entitiesData.lat})`,
  });
  if (store.state.plottingInquireData.entitiesData.icon == "d.png") {
    selectPoint({
      pixel: val,
      wkt: store.state.plottingInquireData.entitiesData.wkt,
    });
  }
};
//下载csv
const download = () => {
@@ -208,8 +210,7 @@
      e.max = "-";
      e.min = "-";
    }
    console.log(store.state.plottingInquireData.entitiesData.lng);
    console.log(store.state.plottingInquireData.entitiesData.lat);
    e.lng = store.state.plottingInquireData.entitiesData.lng;
    e.lat = store.state.plottingInquireData.entitiesData.lat;
    resultList.value.push(e);
@@ -219,6 +220,17 @@
const selectPolyline = async (res) => {
  const dt = await selectByPolyline(res);
  console.log(dt);
  // dt.result.forEach((e) => {
  //   if (e.code != 200) {
  //     e.avg = "-";
  //     e.max = "-";
  //     e.min = "-";
  //   }
  //   // e.lng = store.state.plottingInquireData.entitiesData.lng;
  //   // e.lat = store.state.plottingInquireData.entitiesData.lat;
  //   // resultList.value.push(e);
  // });
};
const setLayerLocation = () => {
  var entities = Viewer.entities._entities._array;
@@ -261,10 +273,10 @@
    inquireData.value = nVal.entitiesData;
    if (nVal.entitiesData.icon == "x.png") {
      chartIsshow.value = true;
      // selectPolyline({
      //   pixel: ScopeBox.value.pixel,
      //   wkt: `POINT (${nVal.entitiesData.lng})`,
      // })
      selectPolyline({
        pixel: ScopeBox.value.pixel,
        wkt: nVal.entitiesData.wkt,
      });
    }
    if (nVal.entitiesData.icon == "m.png") {
      if (nVal.entitiesData.name == oVal.entitiesData.name) {