标绘查询

WX

2023-09-15 d91053e5cbe7fac6deee994c22c0529fd1b08755

 src/views/plotting/plottingInquire.vue

@@ -77,32 +77,53 @@
                    :icon="Search"
                    link
                    class="linkBtn"
                    @click="openDialog"
                    @click="openDialog(e)"
                  ></el-button>

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

@@ -152,7 +173,11 @@
      <i @click.capture="closeDialog"
        ><el-icon><Close /></el-icon
      ></i>
      <BarGraphAxisLine :width="'856px'" :height="'636px'"></BarGraphAxisLine>
      <BarGraphAxisLine
        :width="'856px'"
        :height="'636px'"
        :layerData="layerData"
      ></BarGraphAxisLine>
    </div>
  </div>
</template>
@@ -172,7 +197,10 @@
//echarts
import BarGraph from "@/components/BarGraph.vue";
import BarGraphAxisLine from "@/components/BarGraphAxisLine.vue";
import { saveFSDZJsonToExcel } from "@/utils/downloadCSV.js";
import {
  saveFSDZJsonToExcel,
  saveFSDZJsonToExcelLine,
} from "@/utils/downloadCSV.js";
import { selectByPoint, selectByPolygon, selectByPolyline } from "@/api/api";
import { ElMessage } from "element-plus";
import { Search, Delete, Download } from "@element-plus/icons-vue";
@@ -191,20 +219,7 @@
  nodes: "16",
});
let layerValue = ref("");
const layeroptions = [
  {
    value: "图层名称",
    label: "图层名称",
  },
  {
    value: "图层名称",
    label: "图层名称",
  },
  {
    value: "图层名称",
    label: "图层名称",
  },
];
const layeroptions = ref([]);
const pixeloptions = [
  {
    value: "1",
@@ -290,14 +305,31 @@
  },
];
let resultList = ref([]);
let layerData = ref({});
let layerArr = ref([]);
let dialogShow = ref(false);
let layerNameNum = 0;
//新增图表
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 = () => {
const openDialog = (res) => {
  // layerData.value = res;
  dialogShow.value = true;
};
//像素选择
@@ -317,10 +349,40 @@
    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) => {
@@ -366,8 +428,14 @@
};
//线查询接口
const selectPolyline = async (res) => {
  layerArr.value = [];
  const dt = await selectByPolyline(res);
  console.log(dt);
  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 = "-";
@@ -420,7 +488,6 @@
    isShow.value = nVal.isshow;
    inquireData.value = nVal.entitiesData;
    if (nVal.entitiesData.icon == "x.png") {
      chartIsshow.value = true;
      selectPolyline({
        nodes: ScopeBox.value.nodes,
        wkt: nVal.entitiesData.wkt,
@@ -668,6 +735,19 @@
    }
    .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%;
@@ -687,9 +767,16 @@
      }
    }
    .select_box {
      padding-bottom: 20px;
      .add_btn {
        display: flex;
        justify-content: center;
      }
    }
    .select {
      display: flex;
      justify-content: center;
      padding-bottom: 20px;
      padding-bottom: 10px;
    }
  }
}
@@ -718,4 +805,21 @@
    }
  }
}
.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>