From c42e12bcc0877678cf09438b7a6bfb9ccd7342fa Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期五, 24 三月 2023 19:06:08 +0800
Subject: [PATCH] 转孔柱状图添加图例，官网一张图修改
---
src/components/MapView/mapSpacePop.vue | 405 ++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 244 insertions(+), 161 deletions(-)
diff --git a/src/components/MapView/mapSpacePop.vue b/src/components/MapView/mapSpacePop.vue
index b7e6ecc..309d420 100644
--- a/src/components/MapView/mapSpacePop.vue
+++ b/src/components/MapView/mapSpacePop.vue
@@ -3,6 +3,43 @@
<div style="padding: 5px">
<el-form
:inline="true"
+ :model="ruleForm"
+ class="demo-form-inline"
+ >
+ <el-form-item>
+ <el-input
+ size="small"
+ style="width:47vh"
+ v-model="ruleForm.fileName"
+ disabled
+ placeholder="璇疯緭鍏�..."
+ ></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ @click="conditionVisible = true"
+ size="small"
+ type="success"
+ >鏂板</el-button>
+ <el-button
+ size="small"
+ @click="resetForm"
+ >閲嶇疆</el-button>
+ </el-form-item>
+ <el-form-item v-if="spaceLayer == 'sexplorationpoint'">
+ <el-button
+ size="small"
+ @click="spaceHistogram( )"
+ plain
+ >鏌辩姸鍥�</el-button>
+ <!-- <el-button
+ plain
+ size="small"
+ >鍓栧垏鍥�</el-button> -->
+ </el-form-item>
+ </el-form>
+ <!-- <el-form
+ :inline="true"
:model="formInline"
class="demo-form-inline"
>
@@ -66,9 +103,9 @@
<!-- <el-button
plain
size="small"
- >鍓栧垏鍥�</el-button> -->
- </el-form-item>
- </el-form>
+ >鍓栧垏鍥�</el-button>
+ </el-form-item>
+ </el-form> -->
<div class="centTable">
<el-table
:data="tableData"
@@ -135,6 +172,81 @@
</el-pagination>
</div>
</div>
+ <el-dialog
+ :visible.sync="conditionVisible"
+ title="楂樼骇鏌ヨ"
+ width="44%"
+ :close-on-click-modal="false"
+ :modal="false"
+ >
+
+ <el-form
+ :inline=" true"
+ :model="formSql"
+ class="demo-form-inline"
+ label-position="top"
+ >
+
+ <el-form-item>
+ <el-select
+ @change="fieldChange($event)"
+ v-model="formSql.field"
+ :popper-append-to-body="false"
+ >
+ <el-option
+ v-for="item in filedsOption"
+ :key="item.field"
+ :label="item.alias"
+ :value="item.field"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-select
+ :popper-append-to-body="false"
+ v-model="formSql.condition"
+ >
+ <el-option
+ v-for="item in condOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item v-show="!fromSqlflag">
+ <el-input v-model="formSql.value"></el-input>
+ </el-form-item>
+ <el-form-item v-show="fromSqlflag">
+ <el-date-picker
+ v-model="formSql.date"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ value-format="yyyy-MM-dd"
+ >
+ </el-date-picker>
+ </el-form-item>
+
+ </el-form>
+
+ <span
+ slot="footer"
+ class="dialog-footer"
+ >
+ <el-button
+ size="small"
+ @click="startFiledAndcondition"
+ >鍙� 娑�</el-button>
+ <el-button
+ class="primaries"
+ size="small"
+ @click="appendQueryFilter"
+ >纭� 瀹�</el-button>
+ </span>
+ </el-dialog>
+
</div>
</template>
@@ -148,6 +260,7 @@
encr,
} from "../../api/api.js"
import * as turf from "@turf/turf"
+import { conditions } from "../../views/Archive/Archive.js";
export default {
computed: {
storeTime() {
@@ -156,6 +269,13 @@
},
data() {
return {
+ conditionVisible: false,
+ filedsOption: [],
+ condOption: [],
+ ruleForm: {
+ fileName: "",
+ },
+ fromSqlflag: false,
count: 0,
listdata: {
pageIndex: 1,
@@ -223,12 +343,21 @@
imagePoint: null,
domainsLayer: null,
querytype: null,
+
+ formSql: {
+ field: "",
+ condition: "",
+ value: "",
+ type: "",
+ date: "",
+ },
}
},
watch: {
async storeTime(index) {
this.spaceLayer = index
- this.getDomainsLayer()
+ this.resetForm();
+ // this.getDomainsLayer()
// this.getTableselectFields();
// this.restSpacePopLayer();
},
@@ -237,12 +366,43 @@
this.spaceLayer = this.$store.state.mapSpaceQueryLayer
// this.showSpacePopLayer();
// this.getTableselectFields();
-
-
- this.getDomainsLayer()
+ this.resetForm();
+ // this.getDomainsLayer()
},
methods: {
+ fieldChange(value) {
+ var obj = {};
+ obj = this.filedsOption.find(function (item) {
+ return item.field === value;
+ });
+ this.conditionChange(obj);
+ },
+ conditionChange(res) {
+ this.formSql.field = res.field;
+ this.formSql.type = res.type;
+ if (res.type == "date" || res.type == "datetime") {
+ this.fromSqlflag = true;
+ } else {
+ this.fromSqlflag = false;
+ }
+ var std = [];
+ this.condOption = [];
+ if (res.type == "text" || res.type == "blob") {
+ std = conditions[0];
+ } else if (res.type == "date" || res.type == "datetime") {
+ std = conditions[2];
+ } else {
+ std = conditions[1];
+ }
+ for (var i in std) {
+ this.condOption.push({
+ label: std[i],
+ value: std[i],
+ });
+ }
+ this.formSql.condition = this.condOption[0].value;
+ },
closeSpaceBox() {
if (this.imagePoint != null) {
sgworld.Creator.DeleteObject(this.imagePoint)
@@ -328,7 +488,7 @@
if (data.code != 200) {
this.$message.error("鍒楄〃璋冪敤澶辫触")
}
-
+ this.filedsOption = [];
this.optionx = []
var valadata = data.result
for (var i in valadata) {
@@ -340,10 +500,63 @@
valadata[i].domainNa = this.getMatchDomainNa(valadata[i].domainNa)
}
this.optionx.push(valadata[i])
+ this.filedsOption.push(valadata[i])
this.attributeData.push(valadata[i])
}
}
+ this.startFiledAndcondition();
this.showSpacePopLayer()
+ },
+ appendQueryFilter() {
+ if (this.formSql.type == "date" || this.formSql.type == "datetime") {
+ if (this.formSql.date == null) {
+ this.$message.error("璇疯緭鍏ヨ鏌ヨ鐨勪俊鎭�!");
+ return;
+ }
+ } else {
+ if (this.formSql.value == "") {
+ this.$message.error("璇疯緭鍏ヨ鏌ヨ鐨勪俊鎭�!");
+ return;
+ }
+ }
+
+ if (this.ruleForm.fileName != "") {
+ this.ruleForm.fileName += " and ";
+ }
+ var val;
+
+ if (this.formSql.type == "long" || this.formSql.type == "integer") {
+ val = parseInt(this.formSql.value);
+ } else if (this.formSql.type == "double") {
+ if (this.formSql.value.indexOf(".") != -1) {
+ val = this.formSql.value;
+ } else {
+ val = parseFloat(this.formSql.value).toFixed(1);
+ }
+ } else if (
+ this.formSql.type == "date" ||
+ this.formSql.type == "datetime"
+ ) {
+ var time = new Date(this.formSql.date);
+ var m = time.getMonth() + 1;
+ var d = time.getDate();
+ var y = time.getFullYear();
+ val = "'" + y + "-" + this.add0(m) + "-" + this.add0(d) + "'";
+ } else {
+ val = "'" + this.formSql.value + "'";
+ }
+ this.ruleForm.fileName +=
+ this.formSql.field + " " + this.formSql.condition + " " + val;
+
+ this.startFiledAndcondition();
+ this.getSpaceTableLayer();
+ },
+
+ startFiledAndcondition() {
+ this.conditionVisible = false;
+ this.conditionChange(this.filedsOption[0]);
+ this.formSql.value = "";
+ this.formSql.date = new Date();
},
getMatchDomainNa(res) {
var std = null
@@ -365,35 +578,27 @@
this.setListDataStart()
this.getTableselectFields()
},
+
+
+
+ resetForm() {
+ this.ruleForm.fileName = "";
+ this.listdata.pageIndex = 1;
+ this.listdata.pageSize = 10;
+ //鑾峰彇table淇℃伅
+ this.getDomainsLayer()
+ },
+
//鍒濆鍖栨煡璇㈣〃鏍间俊鎭�
async getSpaceTableLayer() {
- this.listdata.name = this.spaceLayer
- if (this.formInline.input == undefined || this.formInline.input == null) {
- this.listdata.filter = null
- } else {
- var val
- var value = this.formInline.input
- if (this.querytype == "long" || this.querytype == "integer") {
- val = parseInt(value)
- } else if (this.querytype == "double") {
- if (this.formSql.value.indexOf(".") != -1) {
- val = value
- } else {
- val = parseFloat(value).toFixed(1)
- }
- } else if (this.querytype == "date" || this.querytype == "datetime") {
- var time = new Date(value)
- var m = time.getMonth() + 1
- var d = time.getDate()
- var y = time.getFullYear()
- val = "'" + y + "-" + this.add0(m) + "-" + this.add0(d) + "'"
- } else {
- val = "'" + value + "'"
- }
- this.listdata.filter =
- this.formInline.name + " " + this.formInline.region + " " + val
+ this.listdata.name = this.spaceLayer
+ if (this.ruleForm.fileName != "") {
+ this.listdata.filter = this.ruleForm.fileName;
+ } else {
+ this.listdata.filter = null;
}
+
const data = await dataQuerySelectByPage(this.listdata)
if (data.code != 200) {
@@ -480,6 +685,8 @@
if (data.code != 200) {
return this.$message.error("鍒楄〃璋冪敤澶辫触")
}
+
+ this.count = data.count;
if (data.result.length == 0) {
return this.$message({
message: '鏈煡璇㈠埌杞瓟鐐规暟鎹�',
@@ -520,7 +727,7 @@
})
- this.listdata.count = data.count;
+
this.tableData = val;
this.showHistogramLayer(data.count)
@@ -613,15 +820,7 @@
}
}
}
- // var outlineList = [
- // 'rgba(141,135,114,1)',
- // 'rgba(248,235,179,1)',
- // 'rgba(185,183,151,1)',
- // 'rgba(224,222,94,1)',
- // 'rgba(250,190,153,1)',
- // 'rgba(197,222,130,1)',
- // 'rgba(208,228,177,1)',
- // ]
+
var outlineList = [
{ 'name': '绮夎川榛忓湡', 'color': 'rgba(139,106,77,1)' },
{ 'name': '娣ゆ偿璐ㄧ矇鍦�', 'color': 'rgba(141,85,69,1)' },
@@ -666,14 +865,14 @@
this.$store.state.histogramLayer.push(layer)
}
}
-
+ this.$store.state.histLenged = true;
},
spaceHistogram() {
- this.restSpacePopLayer();
+ this.resetForm();
if (this.$store.state.histogramLayer.length != 0) {
for (var i in this.$store.state.histogramLayer) {
Viewer.entities.remove(this.$store.state.histogramLayer[i])
@@ -691,122 +890,6 @@
that.setCartesianToEightFour(entity)
});
-
-
-
- // var param = {
- // gid: row.gid,
- // name: this.spaceLayer,
- // }
- // const data1 = await dataQuerySelectWktById(param)
- // if (data1.code != 200) {
- // this.$message.error("鍒楄〃璋冪敤澶辫触")
- // }
-
- // var val1 = decr(data1.result)
- // var wkt = this.$wkt.parse(val1)
- // var coord = wkt.coordinates
- // var obj = {
- // pageIndex: 1,
- // pageSize: 10,
- // name: 'sexplorationpointstratum',
- // filter: "exppointid = '" + row.exppointid + "'"
- // }
- // var data = await dataQuerySelectByPage(obj)
- // if (data.code != 200) {
-
- // }
-
- // if (data.result.length != 0) {
- // var val = data.result;
- // //鍐掓场鎺掑簭
- // for (var i = 0; i < val.length; i++) {
- // for (var u = i + 1; u < val.length; u++) {
-
- // if (val[i].botdepth > val[u].botdepth) {
- // var num = val[i];
- // val[i] = val[u];
- // val[u] = num;
- // }
- // }
- // }
- // var outlineList = [
- // 'rgba(141,135,114,1)',
- // 'rgba(248,235,179,1)',
- // 'rgba(185,183,151,1)',
- // 'rgba(224,222,94,1)',
- // 'rgba(250,190,153,1)',
- // 'rgba(197,222,130,1)',
- // 'rgba(208,228,177,1)',
- // ]
- // var num = row.elev;
- // var height = 0;
- // for (var i = 0; i < val.length; i++) {
- // var fill, line;
- // if (i > outlineList.length) {
- // var len = outlineList.length - 1;
- // fill = outlineList[len];
- // line = outlineList[len];
- // } else {
- // fill = outlineList[i];
- // line = outlineList[i];
- // }
- // var height = num - val[i].botdepth
- // var layer = Viewer.entities.add({
- // position: Cesium.Cartesian3.fromDegrees(coord[0], coord[1]),
- // tag: 'Histogram',
- // properties: val[i],
- // ellipse: {
- // semiMinorAxis: 1.0, //鐭酱
- // semiMajorAxis: 1.0, //闀胯酱
- // height: height, //鎷変几楂樺害 elev gwaterdep
- // extrudedHeight: num, //绂诲湴楂樺害
- // rotation: Cesium.Math.toRadians(0), //鏃嬭浆
- // fill: true, //鏄惁鏄剧ず鍦嗙殑濉厖
- // material: Cesium.Color.fromCssColorString(line), //鍦嗙殑棰滆壊,
- // outline: false, //鏄惁鏄剧ず鍦嗚疆寤�
-
- // },
- // });
- // num -= val[i].botdepth;
- // this.$store.state.histogramLayer.push(layer)
- // sgworld.Navigate.flyToObj(layer)
- // }
- // window.histogramHandler = new Cesium.ScreenSpaceEventHandler(
- // sgworld.Viewer.scene.canvas
- // )
- // var that = this;
- // window.histogramHandler.setInputAction((event) => {
- // // var ellipsoid = sgworld.Viewer.scene.globe.ellipsoid;
- // // var cartesian = sgworld.Viewer.scene.camera.pickEllipsoid(event.endPosition, ellipsoid);
- // var pick = sgworld.Viewer.scene.pick(event.endPosition);
- // var selectedEntity = null;
-
- // if (Cesium.defined(pick)) {
- // if (pick && pick.id && pick.id.tag && pick.id.tag == "Histogram") {
-
- // that.$store.state.propertiesInfo = {
- // title: pick.id.properties._exppointid._value,
- // name: pick.id.properties._geoname._value,
- // type: pick.id.properties.geotype._value,
- // botdepth: pick.id.properties._botdepth._value,
- // describe: pick.id.properties._describe._value,
- // }
- // that.$store.state.propertiesFlag = "2"
- // } else {
- // that.$store.state.propertiesFlag = null
- // }
- // } else {
- // that.$store.state.propertiesFlag = null
- // }
-
- // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
-
-
- // } else {
- // var msg = row.exppointid + " 娌″嫎鎺㈢偣鍦板眰琛ㄦ暟鎹紝鏃犳硶鐢熸垚鏌辩姸鍥�"
- // this.$message.error(msg);
- // }
},
async spaceLocation(index, row) {
var param = {
--
Gitblit v1.9.3