标绘查询

WX

2023-09-15 d91053e5cbe7fac6deee994c22c0529fd1b08755

标绘查询

 src/components/BarGraph.vue

@@ -1,5 +1,8 @@
<template>
  <div id="myEcharts" :style="{ width: width, height: height }"></div>
  <div
    :id="`myEcharts${chartsId}`"
    :style="{ width: width, height: height }"
  ></div>
</template>
<script lang="ts" setup>
import {
@@ -11,52 +14,134 @@
  defineEmits,
  watch,
  onUnmounted,
  nextTick,
} from "vue";
import * as echarts from "echarts";
import { fa } from "element-plus/es/locale";

//defineProps 来接收组件的传值
const props = defineProps({
  width: String,
  height: String,
  layerData: Object,
  chartsId: String,
});
let myEcharts = echarts;
let seriesData = ref([]);
let xAxisData = ref([]);
let dataLength;
let data = [];
let isshow = ref(true);
watch(
  () => props.layerData,
  (nVal, oVal) => {
    xAxisData.value = [];
    props.layerData.points.forEach((e, i) => {
      xAxisData.value.push(e.len);
    });
    data = trans(props.layerData.points);
    console.log(data);
    seriesData.value = [];
    data.forEach((e) => {
      seriesData.value.push({
        data: e,
        type: "line",
        smooth: true,
        symbol: "none", //取消折点圆圈
        itemStyle: {
          normal: {
            label: {
              show: false,
              position: "top",
              formatter: "{c}",
            },
          },
        },
      });
    });
    console.log(seriesData.value);

    nextTick(() => {
      initChart();
    });
  },
  { deep: true }
);
onMounted(() => {
  initChart();
  // console.log(props.layerData);
  xAxisData.value = [];
  props.layerData.points.forEach((e, i) => {
    xAxisData.value.push(e.len);
  });
  data = trans(props.layerData.points);
  seriesData.value = [];
  data.forEach((e) => {
    seriesData.value.push({
      data: e,
      type: "line",
      smooth: true,
      symbol: "none", //取消折点圆圈
      itemStyle: {
        normal: {
          label: {
            show: false,
            position: "top",
            formatter: "{c}",
          },
        },
      },
    });
  });
  nextTick(() => {
    initChart();
  });
});

onUnmounted(() => {
  myEcharts.dispose;
});
function trans(arr) {
  let result = [];

  arr.forEach((item) => {
    item.vals.forEach((d, i) => {
      let a = (result[i] = result[i] || []);

      a.push(d);
    });
  });

  return result;
}
function initChart() {
  let chart = myEcharts.init(
    document.getElementById("myEcharts"),
    document.getElementById(`myEcharts${props.chartsId}`),
    "purple-passion"
  );
  chart.setOption({
    title: {
      text: "",
      text: props.layerData.layerName,
      left: "center",
      textStyle: {
        //文字颜色
        color: "#fff",
        // //字体风格,'normal','italic','oblique'
        // fontStyle: "normal",
        // //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        // fontWeight: "bold",
        // //字体系列
        // fontFamily: "sans-serif",
        // //字体大小
        // fontSize: 18,
      },
    },
    legend: {
      data: [],
      // data: xAxisData.value,
    },
    xAxis: {
      name: "米（m）",
      type: "category",
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      data: xAxisData.value,
      show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
      axisTick: {
        show: false, // 不显示坐标轴刻度线
@@ -66,6 +151,8 @@
      },
      axisLabel: {
        show: false, // 不显示坐标轴上的文字
        showMinLabel: true, // 强制显示最小值标签
        showMaxLabel: true, // 强制显示最大值标签
      },
      splitLine: {
        show: false, // 不显示网格线
@@ -73,6 +160,13 @@
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
      formatter: "距离：{b}m <br> 数值：{c}", //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
    },
    yAxis: {
      type: "value",
@@ -90,23 +184,7 @@
        show: false, // 不显示网格线
      },
    },
    series: [
      {
        data: [606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737],
        type: "line",
        smooth: true,
        symbol: "none", //取消折点圆圈
        itemStyle: {
          normal: {
            label: {
              show: false,
              position: "top",
              formatter: "{c}",
            },
          },
        },
      },
    ],
    series: seriesData.value,
  });
  window.onresize = function () {
    chart.resize();

 src/components/BarGraphAxisLine.vue

@@ -1,6 +1,6 @@
<template>
  <div class="Echarts_box" :style="{ width: width, height: height }">
    <div id="myEcharts1" style="width: 100%; height: 100%"></div>
    <div id="myEchartsBIG" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script lang="ts" setup>
@@ -13,6 +13,7 @@
  defineEmits,
  watch,
  onUnmounted,
  nextTick,
} from "vue";
import * as echarts from "echarts";

@@ -20,19 +21,71 @@
const props = defineProps({
  width: String,
  height: String,
  layerData: Object,
});
let myEcharts = echarts;
let seriesData = ref([]);
let xAxisData = ref([]);
let dataLength;
let data = [];
onMounted(() => {
  initChart();
  console.log(props.layerData);
  props.layerData.points.forEach((e, i) => {
    xAxisData.value.push(returnFloat1(e.len));
  });
  data = trans(props.layerData.points);

  data.forEach((e) => {
    seriesData.value.push({
      data: e,
      type: "line",
      smooth: true,
      symbol: "none", //取消折点圆圈
      itemStyle: {
        normal: {
          label: {
            show: false,
            position: "top",
            formatter: "{c}",
          },
        },
      },
    });
  });
  nextTick(() => {
    initChart();
  });
});

onUnmounted(() => {
  myEcharts.dispose;
});
function returnFloat1(value) {
  if (value == 0) {
    return value;
  }
  value = Math.round(parseFloat(value) * 10) / 10;
  if (value.toString().indexOf(".") < 0) {
    value = value.toString() + ".0";
  }
  return value;
}
function trans(arr) {
  let result = [];

  arr.forEach((item) => {
    item.vals.forEach((d, i) => {
      let a = (result[i] = result[i] || []);

      a.push(d);
    });
  });

  return result;
}
function initChart() {
  let chart = myEcharts.init(
    document.getElementById("myEcharts1"),
    document.getElementById("myEchartsBIG"),
    "purple-passion"
  );
  chart.setOption({
@@ -99,24 +152,43 @@
    },

    legend: {
      data: [],
      // data: xAxisData.value,
    },
    xAxis: {
      type: "category",
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      data: xAxisData.value,
      name: "米（m）",
      axisLabel: {
        //x轴文字的配置
        showMinLabel: true, // 强制显示最小值标签
        showMaxLabel: true, // 强制显示最大值标签
        //interval: 0, //使x轴文字显示全
        // textStyle: {
        //   color: "rgba(219, 225, 255, 1)",
        // },
        // formatter: function (params) {
        //   var newParamsName = "";
        //   var paramsNameNumber = params.length;
        //   var provideNumber = 3; //一行显示几个字
        //   var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
        //   if (paramsNameNumber > provideNumber) {
        //     for (var p = 0; p < rowNumber; p++) {
        //       var tempStr = "";
        //       var start = p * provideNumber;
        //       var end = start + provideNumber;
        //       if (p == rowNumber - 1) {
        //         tempStr = params.substring(start, paramsNameNumber);
        //       } else {
        //         tempStr = params.substring(start, end) + "\n";
        //       }
        //       newParamsName += tempStr;
        //     }
        //   } else {
        //     newParamsName = params;
        //   }
        //   return newParamsName;
        // },
      },
    },
    tooltip: {
      trigger: "axis",
@@ -124,23 +196,7 @@
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737],
        type: "line",
        smooth: true,
        symbol: "none", //取消折点圆圈
        itemStyle: {
          normal: {
            label: {
              show: false,
              position: "top",
              formatter: "{c}",
            },
          },
        },
      },
    ],
    series: seriesData.value,
  });
  window.onresize = function () {
    chart.resize();

 src/utils/downloadCSV.js

@@ -21,7 +21,6 @@
  //   XLSXS.utils.book_append_sheet(wb, ws, "Sheet1");
  //   XLSXS.writeFile(wb, "data-region.xlsx");
  //============================================================================
  console.log(data, name, merges);
  // data是点击导出按钮传递过来要导出的数据，name是导出的文件名，merges是合并的单元格
  // 将数据源转成我们需要的二维数组，序号、姓名这些是表格的表头
  const body = data.map((x) => [
@@ -221,3 +220,163 @@
  XLSXS.utils.book_append_sheet(workbook, sheet); // 向 workbook 中添加 sheet
  XLSXS.writeFile(workbook, "data-region" + ".xlsx"); // 导出 workbook
}
export function saveFSDZJsonToExcelLine(data) {
  //   const data = [
  //     { 姓名: "张三", 年龄: 18, 性别: "男" },
  //     { 姓名: "李四", 年龄: 20, 性别: "女" },
  //     { 姓名: "王五", 年龄: 22, 性别: "男" },
  //   ];
  //   const wb = XLSX.utils.book_new();
  //   const ws = XLSX.utils.json_to_sheet(data);
  //   ws["!cols"] = [
  //     {
  //       wpx: 150,
  //     },
  //     {
  //       wpx: 500,
  //     },
  //     {
  //       wpx: 100,
  //     },
  //   ];
  //   XLSXS.utils.book_append_sheet(wb, ws, "Sheet1");
  //   XLSXS.writeFile(wb, "data-region.xlsx");
  //============================================================================
  // data是点击导出按钮传递过来要导出的数据，name是导出的文件名，merges是合并的单元格
  // 将数据源转成我们需要的二维数组，序号、姓名这些是表格的表头
  const body = data.map((x) => [
    x["layerName"],
    x["values"],
    x["lon"],
    x["lat"],
  ]);
  const header = [
    // 这个是设置excel表格的标题，即在A1单元格的标题
    [
      {
        v: ``,
        t: "s", // 指定标题的样式
      },
    ],
    // 这是对应body常量的表头
    ["layerName", "values", "lon", "lat"],
  ];
  body.unshift(...header); // 将定义好的表头添加到 body 中
  const sheet = XLSXS.utils.aoa_to_sheet(body); // aoa_to_sheet 将二维数组转成 sheet
  // 此处开始合并列，即相同名字的表格合并单元格
  let includeB = [];
  let includesBnumber = [];

  // 设置列宽
  const cols = [{ wch: 100 }, { wch: 15 }, { wch: 12 }, { wch: 12 }];
  sheet["!cols"] = cols; // 将cols添加到sheet中
  //   const rows = [{ hpx: 20 }, { hpx: 16 }, { hpx: 18 }];
  //   sheet["!rows"] = rows; // 将rows添加到sheet中，设置行高
  Object.keys(sheet).forEach((key, i) => {
    // 设置单元格样式
    if (key.indexOf("!") < 0) {
      if (key == "A1") {
        // 设置标题
        sheet[key].s = {
          alignment: {
            horizontal: "center", //水平居中
            vertical: "center", //竖直居中
          },
          font: {
            bold: true,
            // sz: 14,
            // name: "宋体",
          },
        };
      } else if (
        key == "A2" ||
        key == "B2" ||
        key == "C2" ||
        key == "D2" ||
        key == "E2" ||
        key == "F2" ||
        key == "G2" ||
        key == "H2" ||
        key == "I2"
      ) {
        // 设置表头
        sheet[key].s = {
          fill: {
            fgColor: { rgb: "A6A6A6" },
          },
          border: {
            top: { style: "thin" },
            left: { style: "thin" },
            bottom: { style: "thin" },
            right: { style: "thin" },
          },
          font: {
            bold: true,
            // sz: 12,
            // name: "宋体",
          },
        };
      } else {
        if (key.includes("A")) {
          // 序列所在列
          if (typeof sheet[key].v == "number") {
            // 列表列要求序号要居中，合计和总合计居左(应该是系统默认的，如果要设置居左或居右，也可以自己设置下alignment属性)
            sheet[key].s = {
              alignment: {
                horizontal: "center",
                vertical: "center",
              },
              border: {
                top: { style: "thin" },
                left: { style: "thin" },
                bottom: { style: "thin" },
                right: { style: "thin" },
              },
            };
          } else {
            sheet[key].s = {
              border: {
                top: { style: "thin" },
                left: { style: "thin" },
                bottom: { style: "thin" },
                right: { style: "thin" },
              },
            };
          }
        } else {
          sheet[key].s = {
            border: {
              top: { style: "thin" },
              left: { style: "thin" },
              bottom: { style: "thin" },
              right: { style: "thin" },
            },
            alignment: {
              horizontal: "left",
              vertical: "center",
            },
          };
        }
      }
    }
  });
  // 设置结尾的表格
  //   let sheetBorder = sheet["!ref"].substring(4); // 因为导出的单元格行数不确定，所以拿到最后一行的数字
  //   let endSheetBorder = ["C", "D", "E", "F", "G", "H"]; //因为最后一行的合并的列是一样的，所以这里可以直接将列的单元格序号写个定值
  //   endSheetBorder.forEach((e) => {
  //     let addBorder = e + sheetBorder;
  //     sheet[addBorder] = {
  //       v: "",
  //       t: "s",
  //       s: {
  //         border: {
  //           top: { style: "thin" },
  //           bottom: { style: "thin" },
  //         },
  //       },
  //     };
  //   });
  const workbook = XLSXS.utils.book_new(); // 创建虚拟的 workbook
  XLSXS.utils.book_append_sheet(workbook, sheet); // 向 workbook 中添加 sheet
  XLSXS.writeFile(workbook, "data-region" + ".xlsx"); // 导出 workbook
}

 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>