代码更新

Surpriseplus

2023-10-10 77f9937b32f67f5b7d5476b0a1db19956702c0c8

 src/views/plotting/plottingInquire.vue

@@ -1,8 +1,28 @@
<template>
  <div class="plottingInquire" v-if="isShow">
    <div class="InquireHeader">标绘查询</div>
  <div
    class="plottingInquire"
    v-if="isShow"
    v-drag="true"
  >
    <div class="InquireHeader">
      <div>标绘查询</div>

      <div>
        <el-icon
          @click="isShow = false"
          :size="20"
          style="cursor: pointer"
        >
          <Close />
        </el-icon>

      </div>
    </div>
    <div class="inquireContent">
      <div class="inquireContent_title">用户新建要素</div>
      <div class="inquireContent_title">
        <div>用户新建要素</div>

      </div>
      <div class="inquireContent_name">
        <div class="plotting_list_tr_name">
          <img
@@ -11,9 +31,19 @@
            alt=""
          /><span>{{ inquireData.name }}</span>
        </div>
        <div
          class="plotting_list_tr_wkt"
          v-show="geoWktFlag"
        >{{ geoWkt }}</div>
        <div class="plotting_list_tr_btn">
          <div class="tr_btn dw" @click="setLayerLocation()"></div>
          <div class="tr_btn sc" @click="setLayerRemove()"></div>
          <div
            class="tr_btn dw"
            @click="setLayerLocation()"
          ></div>
          <div
            class="tr_btn sc"
            @click="setLayerRemove()"
          ></div>
        </div>
      </div>
      <div class="tab_box">
@@ -23,8 +53,14 @@
          @tab-click="handleClick"
        >
          <!-- <el-tab-pane label="图层属性" name="first">User</el-tab-pane> -->
          <el-tab-pane label="查询结果" name="second">
            <div class="inquireContent_input" v-show="pixelIsShow">
          <el-tab-pane
            label="查询结果"
            name="second"
          >
            <div
              class="inquireContent_input"
              v-show="pixelIsShow"
            >
              <!-- <div class="inquireContent_input_left">
                <div class="label">范围框</div>
                <el-input
@@ -35,7 +71,10 @@
                  <template #append>km</template>
                </el-input>
              </div> -->
              <div class="inquireContent_input_right">
              <div
                class="inquireContent_input_right"
                v-show="!chartIsshow"
              >
                <div class="label">范围框内最大像素值</div>
                <el-select
                  v-model="ScopeBox.pixel"
@@ -45,7 +84,27 @@
                  @change="pixelChange"
                >
                  <el-option
                    v-for="item in options"
                    v-for="item in pixeloptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div
                class="inquireContent_input_right"
                v-show="chartIsshow"
              >
                <div class="label">节点数</div>
                <el-select
                  v-model="ScopeBox.nodes"
                  class="m-2"
                  placeholder="像素值"
                  size="small"
                  @change="nodesChange"
                >
                  <el-option
                    v-for="item in nodesoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
@@ -53,23 +112,86 @@
                </el-select>
              </div>
            </div>
            <div class="chart_box" v-if="chartIsshow">
              <Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
            <div
              class="chart"
              v-if="chartIsshow"
            >
              <div class="chart_box">
                <div class="chart_btn">
                  <el-button
                    :icon="Search"
                    link
                    class="linkBtn"
                    @click="openDialog(e)"
                  ></el-button>

                  <el-button
                    :icon="Download"
                    link
                    class="linkBtn"
                    @click="downloadChart(layerData)"
                  ></el-button>
                  <!-- 暂时不用删除 -->
                  <!-- <el-button
                    :icon="Delete"
                    link
                    class="del linkBtn"
                    @click="deleteChart(e)"
                  ></el-button> -->
                </div>
                <Bar-graph
                  :width="'100%'"
                  :height="'260px'"
                  :layerData="layerData"
                ></Bar-graph>
                <div class="select">
                  <el-select
                    v-model="layerValue"
                    class="m-2"
                    placeholder="选择图层"
                    size="small"
                    @change="layerChange"
                  >
                    <el-option
                      v-for="(item, i) in layeroptions"
                      :key="i"
                      :label="item.layerName"
                      :value="item.layerName"
                    />
                  </el-select>
                </div>
              </div>
              <div class="select_box">
                <!-- 暂时不用 -->
                <!-- <div class="add_btn btnstyle">
                  <el-button size="small" @click="addCharts"
                    >添加图表</el-button
                  >
                </div> -->
              </div>
            </div>
            <div class="inquireContent_msg" v-if="!chartIsshow">

            <!-- <div
              class="inquireContent_msg"
              v-if="!chartIsshow"
              v-show="pixelIsShow"
            >
              <div class="inquireContent_msg_k">
                <span>提取的边界框</span>
                <span>{{ ScopeBox.pixel }}×{{ ScopeBox.pixel }}</span>
              </div>
              <!-- <div class="inquireContent_msg_k">
              <div class="inquireContent_msg_k">
                <span>使用</span>
                <span
                  >{{ ScopeBox.Scop * 1000 }}.00,{{ ScopeBox.Scop * 1000 }}.00
                  m/px</span
                >
              </div> -->
            </div>
            <div class="inquireContent_table" v-if="!chartIsshow">
              </div>
            </div> -->
            <div
              class="inquireContent_table"
              v-if="!chartIsshow"
            >
              <div class="table">
                <div class="table_head">
                  <div class="table_head_td">序号</div>
@@ -79,7 +201,11 @@
                  </div>
                </div>
                <div class="table_content">
                  <div class="table_tr" v-for="(e, i) in resultList" :key="i">
                  <div
                    class="table_tr"
                    v-for="(e, i) in resultList"
                    :key="i"
                  >
                    <div class="table_td">{{ i + 1 }}</div>
                    <div class="table_td">
                      <span> {{ e.layerName }}</span>
@@ -89,12 +215,34 @@
                </div>
              </div>
            </div>
            <div class="download" v-if="!chartIsshow">
              <el-button link @click="download">下载分析结果</el-button>
            <div
              class="download"
              v-if="!chartIsshow"
            >
              <el-button
                link
                @click="download"
              >下载分析结果</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
  <div
    class="dialog"
    v-if="dialogShow"
    @click.self="dialogShow = false"
  >
    <div class="chart">
      <i @click.capture="closeDialog"><el-icon>
          <Close />
        </el-icon></i>
      <BarGraphAxisLine
        :width="'856px'"
        :height="'636px'"
        :layerData="layerData"
      ></BarGraphAxisLine>
    </div>
  </div>
</template>
@@ -113,9 +261,16 @@
import { useStore } from "vuex"; // 引入useStore 方法
//echarts
import BarGraph from "@/components/BarGraph.vue";
import { saveFSDZJsonToExcel } from "@/utils/downloadCSV.js";
import BarGraphAxisLine from "@/components/BarGraphAxisLine.vue";
import {
  saveFSDZJsonToExcel,
  saveFSDZJsonToExcelLine,
} from "@/utils/downloadCSV.js";
import { selectByPoint, selectByPolygon, selectByPolyline } from "@/api/api";
import { ElMessage } from "element-plus";
import { Search, Delete, Download, Close } from "@element-plus/icons-vue";
import WKT from "terraformer-wkt-parser";
import * as turf from "@turf/turf";
const store = useStore(); // 该方法用于返回store 实例
const emits = defineEmits(["setCloseplotting"]);
let isShow = ref(false);
@@ -128,8 +283,11 @@
const ScopeBox = ref({
  Scop: "",
  pixel: "1",
  nodes: "16",
});
const options = [
let layerValue = ref("");
const layeroptions = ref([]);
const pixeloptions = [
  {
    value: "1",
    label: "1×1",
@@ -167,22 +325,137 @@
    label: "256×256",
  },
];
const nodesoptions = [
  {
    value: "16",
    label: "16",
  },
  {
    value: "32",
    label: "32",
  },
  {
    value: "64",
    label: "64",
  },
  {
    value: "96",
    label: "96",
  },
  {
    value: "128",
    label: "128",
  },
  {
    value: "192",
    label: "192",
  },
  {
    value: "256",
    label: "256",
  },
  {
    value: "384",
    label: "384",
  },
  {
    value: "512",
    label: "512",
  },
  {
    value: "768",
    label: "768",
  },
  {
    value: "1024",
    label: "1024",
  },
];
let resultList = ref([]);
let layerData = ref({});
let layerArr = ref([]);
let dialogShow = ref(false);
let layerNameNum = 0;
let geoWkt = ref(null);
let geoWktFlag = ref(false);
//新增图表
const addCharts = () => {
  layerArr.value.push({ layerName: `null${layerNameNum}`, points: [] });
  layerNameNum++;
};
//删除图表
const deleteChart = (val) => {
  layerArr.value.forEach((e, i) => {
    if (e.layerName == val.layerName) {
      layerArr.value.splice(i, 1);
    }
  });
};
//关闭
const closeDialog = () => {
  dialogShow.value = false;
  // alert(1);
};
//打开
const openDialog = (res) => {
  // layerData.value = res;
  dialogShow.value = true;
};
//像素选择
const pixelChange = (val) => {
  if (store.state.plottingInquireData.entitiesData.icon == "d.png") {
    selectPoint({
      pixel: val,
      wkt: store.state.plottingInquireData.entitiesData.wkt,
    });
  }
  // if (store.state.plottingInquireData.entitiesData.icon == "d.png") {

  // }
  selectPoint({
    pixel: val,
    wkt: store.state.plottingInquireData.entitiesData.wkt,
  });
};
//节点选择
const nodesChange = (val) => {
  selectPolyline({
    nodes: val,
    wkt: store.state.plottingInquireData.entitiesData.wkt,
  });
};

//图层选择
const layerChange = (val, name) => {
  layeroptions.value.forEach((e) => {
    if (e.layerName == val) {
      layerData.value = e;
    }
  });

  // layerArr.value.forEach((e) => {
  //   if (e.layerName == name) {
  //     e = layerData.value;
  //   }
  //   console.log(222222222222222, layerArr.value);
  // });

  // layerArr.value.push(layerData.value);
};
//节点选择
//下载csv
const download = () => {
  saveFSDZJsonToExcel(resultList.value, "123", "");
};
const downloadChart = (val) => {
  let arr = [];
  val.points.forEach((e) => {
    arr.push({
      layerName: val.layerName,
      values: e.vals.toString(),
      lon: e.x,
      lat: e.y,
    });
  });
  saveFSDZJsonToExcelLine(arr);
};
//点查询接口
const selectPoint = async (res) => {
  resultList.value = [];
  const dt = await selectByPoint(res);

  if (dt.code !== 200) {
@@ -195,6 +468,9 @@
      e.max = "-";
      e.min = "-";
    }
    e.avg = e.avgList.toString();
    e.max = e.maxList.toString();
    e.min = e.minList.toString();
    e.lng = store.state.plottingInquireData.entitiesData.lng;
    e.lat = store.state.plottingInquireData.entitiesData.lat;
    resultList.value.push(e);
@@ -202,6 +478,7 @@
};
//面查询接口
const selectPolygon = async (res) => {
  resultList.value = [];
  const dt = await selectByPolygon(res);

  dt.result.forEach((e) => {
@@ -210,16 +487,47 @@
      e.max = "-";
      e.min = "-";
    }

    e.avg = e.avgList.toString();
    e.max = e.maxList.toString();
    e.min = e.minList.toString();
    e.lng = store.state.plottingInquireData.entitiesData.lng;
    e.lat = store.state.plottingInquireData.entitiesData.lat;
    resultList.value.push(e);
  });
};
//保留三位小数
const keepThreeNum = (value) => {
  let resValue = 0;
  //小数点的位置
  let index = value && value.toString().indexOf(".") + 1;
  //小数的位数
  let num = value && Math.abs(Number(value)).toString().length - index;
  if (index && num > 3) {
    resValue = value && Number(value).toFixed(3);
  } else {
    resValue = value;
  }
  return resValue;
};

//线查询接口
const selectPolyline = async (res) => {
  layerArr.value = [];
  const dt = await selectByPolyline(res);
  console.log(dt);

  dt.result.forEach((e) => {
    e.points.forEach((element) => {
      element.vals.forEach((v) => {
        v = keepThreeNum(v);
      });
    });
  });

  layeroptions.value = dt.result;
  layerArr.value.push(dt.result[0]);
  chartIsshow.value = true;
  layerData.value = dt.result[0];

  // dt.result.forEach((e) => {
  //   if (e.code != 200) {
  //     e.avg = "-";
@@ -271,14 +579,32 @@
  (nVal, oVal) => {
    isShow.value = nVal.isshow;
    inquireData.value = nVal.entitiesData;
    geoWktFlag.value = false;
    if (inquireData.value.wkt) {
      var wkt = WKT.parse(inquireData.value.wkt);

      if (wkt.type == "Point") {
        geoWkt.value = wkt.coordinates[0] + " " + wkt.coordinates[1];
        geoWktFlag.value = true;
      }
      if (wkt.type == "Polygon") {
        var Polygon = turf.multiPolygon([wkt.coordinates]);
        var center = turf.center(Polygon);
        geoWkt.value =
          center.geometry.coordinates[0] + " " + center.geometry.coordinates[1];
        geoWktFlag.value = true;
      }
    }

    if (nVal.entitiesData.icon == "x.png") {
      chartIsshow.value = true;
      pixelIsShow.value = true;
      selectPolyline({
        pixel: ScopeBox.value.pixel,
        nodes: ScopeBox.value.nodes,
        wkt: nVal.entitiesData.wkt,
      });
    }
    if (nVal.entitiesData.icon == "m.png") {
      chartIsshow.value = false;
      if (nVal.entitiesData.name == oVal.entitiesData.name) {
        return;
      }
@@ -286,6 +612,8 @@
      selectPolygon({ wkt: nVal.entitiesData.wkt });
    }
    if (nVal && nVal.entitiesData.icon == "d.png") {
      chartIsshow.value = false;
      pixelIsShow.value = true;
      selectPoint({
        pixel: ScopeBox.value.pixel,
        wkt: nVal.entitiesData.wkt,
@@ -315,6 +643,8 @@
    color: #d6e4ff;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }
  .inquireContent {
    .inquireContent_title {
@@ -345,6 +675,13 @@
          color: #ffffff;
          margin-left: 10px;
        }
      }
      .plotting_list_tr_wkt {
        font-size: 12px;
        font-weight: 300;
        color: #ffffff;
        margin-left: 10px;
        flex: 1;
      }
      .plotting_list_tr_btn {
        display: flex;
@@ -516,6 +853,93 @@
        color: #d6e4ff;
      }
    }
    .chart {
      width: 100%;
      height: 540px;
      overflow: auto;
    }
    .chart::-webkit-scrollbar {
      width: 8px;
    }
    .chart::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.2);
    }
    .chart::-webkit-scrollbar-track {
      border-radius: 0;
      background: rgba(0, 0, 0, 0);
    }
    .chart_box {
      width: 100%;
      .chart_btn {
        display: flex;
        justify-content: flex-end;
        margin: 0 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        // border-bottom: 1px solid rgba(214, 228, 255, 0.4);
        .linkBtn {
          color: #d6e4ff;
        }
        .del {
          color: red;
        }
      }
    }
    .select_box {
      padding-bottom: 20px;
      .add_btn {
        display: flex;
        justify-content: center;
      }
    }
    .select {
      display: flex;
      justify-content: center;
      padding-bottom: 10px;
    }
  }
}
.dialog {
  position: absolute;
  top: 0;
  height: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.4);
  z-index: 110;
  .chart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(33, 37, 44);
    padding: 20px;
    i {
      position: absolute;
      right: 2px;
      top: 2px;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
    }
  }
}
.btnstyle {
  .el-button {
    background: rgba(104, 156, 255, 0.2);
    border: 1px solid #234066;
    border-radius: 2px;

    font-weight: 400;
    color: #ffffff;
  }
  .el-button:hover {
    border: 1px solid #689cff;
  }
  .delbtn {
    background: rgba(245, 108, 108, 0.2);
    border: 1px solid #5a0914;
  }
}
</style>