版本更新

surprise

2023-10-26 f4a54f5d378fb194d4132de2668e5d85a255b8ff

 src/views/plotting/plottingInquire.vue

@@ -4,21 +4,22 @@
      <div>标绘查询</div>

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

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

      </div>
      <div class="inquireContent_name">
        <div class="plotting_list_tr_name">
          <img :src="require(`../../assets/img/${inquireData.icon}`)" class="ico" alt="" /><span>{{ inquireData.name
          }}</span>
          <img :src="require(`../../assets/img/${inquireData.icon}`)" class="ico" alt />
          <span>
            {{ inquireData.name
            }}
          </span>
        </div>
        <div class="plotting_list_tr_wkt" v-show="geoWktFlag">{{ geoWkt }}</div>
        <div class="plotting_list_tr_btn">
@@ -40,17 +41,39 @@
                >
                  <template #append>km</template>
                </el-input>
              </div> -->
              </div>-->
              <div class="inquireContent_input_right" v-show="!chartIsshow">
                <div class="label">范围框内最大像素值</div>
                <el-select v-model="ScopeBox.pixel" class="m-2" placeholder="像素值" size="small" @change="pixelChange">
                  <el-option v-for="item in pixeloptions" :key="item.value" :label="item.label" :value="item.value" />
                <el-select
                  v-model="ScopeBox.pixel"
                  class="m-2"
                  placeholder="像素值"
                  size="small"
                  @change="pixelChange"
                >
                  <el-option
                    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" />
                <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"
                  />
                </el-select>
              </div>
            </div>
@@ -59,20 +82,35 @@
                <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="Download"
                    link
                    class="linkBtn"
                    @click="downloadChart(layerData)"
                  ></el-button>
                  <!-- 暂时不用删除 -->
                  <!-- <el-button
                    :icon="Delete"
                    link
                    class="del linkBtn"
                    @click="deleteChart(e)"
                  ></el-button> -->
                  ></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
                    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>
@@ -82,7 +120,7 @@
                  <el-button size="small" @click="addCharts"
                    >添加图表</el-button
                  >
                </div> -->
                </div>-->
              </div>
            </div>

@@ -102,22 +140,22 @@
                  m/px</span
                >
              </div>
            </div> -->
            </div>-->
            <div class="inquireContent_table" v-if="!chartIsshow">
              <div class="table">
                <div class="table_head">
                  <div class="table_head_td">序号</div>
                  <div class="table_head_td">
                    <span> 图层名 </span>
                    <span> 分析结果 </span>
                    <span>图层名</span>
                    <span>分析结果</span>
                  </div>
                </div>
                <div class="table_content">
                  <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>
                      <span> {{ e.avg }}</span>
                      <span>{{ e.layerName }}</span>
                      <span>{{ e.avg }}</span>
                    </div>
                  </div>
                </div>
@@ -133,9 +171,11 @@
  </div>
  <div class="dialog" v-if="dialogShow" @click.self="dialogShow = false">
    <div class="chart">
      <i @click.capture="closeDialog"><el-icon>
      <i @click.capture="closeDialog">
        <el-icon>
          <Close />
        </el-icon></i>
        </el-icon>
      </i>
      <BarGraphAxisLine :width="'856px'" :height="'636px'" :layerData="layerData"></BarGraphAxisLine>
    </div>
  </div>
@@ -160,11 +200,17 @@
  saveFSDZJsonToExcel,
  saveFSDZJsonToExcelLine,
} from "@/utils/downloadCSV.js";
import { selectByPoint, selectByPolygon, selectByPolyline } from "@/api/api";
import {
  selectByPoint,
  selectByPolygon,
  selectByPolyline,
  rasterAnalysis_selectByWktForPost,
} 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";
import { getToken } from "../../utils/auth";
const store = useStore(); // 该方法用于返回store 实例
const emits = defineEmits(["setCloseplotting"]);
let isShow = ref(false);
@@ -272,6 +318,7 @@
let layerNameNum = 0;
let geoWkt = ref(null);
let geoWktFlag = ref(false);
let ws = ref(null);
//新增图表
const addCharts = () => {
  layerArr.value.push({ layerName: `null${layerNameNum}`, points: [] });
@@ -463,14 +510,59 @@
    }
  }
};
const handleClick = (tab: TabsPaneContext, event: Event) => { };
const handleClick = (tab: TabsPaneContext, event: Event) => {};
//   const setCloseplotting = () => {
//     emits("setCloseplotting", false);
//   };
let chartIsshow = ref(false);
const setMenuClose = ()=>{
  setCloseWebSocket();
  isShow.value=false;
}
const setCloseWebSocket = () => {
  if( Window.ws){
    Window.ws.close();
  Window.ws.onclose = () => {
    console.log("服务器关闭");
  };
  Window.ws = null;
  }

};
const setWebScoKet = async (type, wkt, node) => {
  const data = await rasterAnalysis_selectByWktForPost({
    wkt: wkt,
    size: node,
  });
  console.log(data)
  if (data) {
    return;
  } else {
   
    Window.ws.option = () => {};
    Window.ws.onmessage = (msg) => {
      // console.log('来自服务器端的数据：' + msg.data); //监听接受来自服务端的信息
      if (msg.data != "连接成功") {
        var val = JSON.parse(msg.data);
        console.log(val);
  
        if (val.analysisForPost) {
          console.log(val);
        }
      } else {
        console.log(msg.data);
      }
    };
  }
};
watch(
  () => store.state.plottingInquireData,
  (nVal, oVal) => {
    if (Window.ws) {
      setCloseWebSocket();
    }
    var url = socketUrl+"?token=" + getToken();
    Window.ws = new WebSocket(url);
    isShow.value = nVal.isshow;
    inquireData.value = nVal.entitiesData;
    geoWktFlag.value = false;
@@ -495,10 +587,11 @@

    if (nVal.entitiesData.icon == "x.png") {
      pixelIsShow.value = true;
      selectPolyline({
        nodes: ScopeBox.value.nodes,
        wkt: nVal.entitiesData.wkt,
      });
      setWebScoKet("pline", nVal.entitiesData.wkt, ScopeBox.value.nodes);
      // selectPolyline({
      //   nodes: ScopeBox.value.nodes,
      //   wkt: nVal.entitiesData.wkt,
      // });
    }
    if (nVal.entitiesData.icon == "m.png") {
      chartIsshow.value = false;
@@ -506,15 +599,17 @@
        return;
      }
      pixelIsShow.value = false;
      selectPolygon({ wkt: nVal.entitiesData.wkt });
      // selectPolygon({ wkt: nVal.entitiesData.wkt });
      setWebScoKet("polygon", nVal.entitiesData.wkt, 0);
    }
    if (nVal && nVal.entitiesData.icon == "d.png") {
      chartIsshow.value = false;
      pixelIsShow.value = true;
      selectPoint({
        pixel: ScopeBox.value.pixel,
        wkt: nVal.entitiesData.wkt,
      });
      // selectPoint({
      //   pixel: ScopeBox.value.pixel,
      //   wkt: nVal.entitiesData.wkt,
      // });
      setWebScoKet("polygon", nVal.entitiesData.wkt, ScopeBox.value.pixel);
    }
  },
  { deep: true }
@@ -691,7 +786,6 @@
            align-items: center;
            border-right: 1px solid rgba(214, 228, 255, 0.4);
            box-sizing: border-box;
        
          }

          .table_head_td:nth-child(2) {
@@ -701,7 +795,6 @@
            align-items: center;
            padding: 0 10px;
            border-right: 0;

          }
        }