From d91053e5cbe7fac6deee994c22c0529fd1b08755 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期五, 15 九月 2023 15:47:08 +0800
Subject: [PATCH] 标绘查询
---
src/components/BarGraph.vue | 150 ++++++++++---
src/views/plotting/plottingInquire.vue | 176 ++++++++++++---
src/utils/downloadCSV.js | 161 ++++++++++++++
src/components/BarGraphAxisLine.vue | 126 ++++++++---
4 files changed, 505 insertions(+), 108 deletions(-)
diff --git a/src/components/BarGraph.vue b/src/components/BarGraph.vue
index 65fb06a..10dfe43 100644
--- a/src/components/BarGraph.vue
+++ b/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();
diff --git a/src/components/BarGraphAxisLine.vue b/src/components/BarGraphAxisLine.vue
index f980895..7e582b2 100644
--- a/src/components/BarGraphAxisLine.vue
+++ b/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, //浣縳杞存枃瀛楁樉绀哄叏
+ // 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();
diff --git a/src/utils/downloadCSV.js b/src/utils/downloadCSV.js
index 7326ce6..1fb4a19 100644
--- a/src/utils/downloadCSV.js
+++ b/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 = [
+ // 杩欎釜鏄缃甧xcel琛ㄦ牸鐨勬爣棰橈紝鍗冲湪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; // 灏哻ols娣诲姞鍒皊heet涓�
+ // const rows = [{ hpx: 20 }, { hpx: 16 }, { hpx: 18 }];
+ // sheet["!rows"] = rows; // 灏唕ows娣诲姞鍒皊heet涓紝璁剧疆琛岄珮
+ 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
+}
diff --git a/src/views/plotting/plottingInquire.vue b/src/views/plotting/plottingInquire.vue
index 2f7a134..52e9012 100644
--- a/src/views/plotting/plottingInquire.vue
+++ b/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>
--
Gitblit v1.9.3