From d91053e5cbe7fac6deee994c22c0529fd1b08755 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期五, 15 九月 2023 15:47:08 +0800
Subject: [PATCH] 标绘查询
---
src/views/plotting/plottingInquire.vue | 176 ++++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 140 insertions(+), 36 deletions(-)
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