转孔柱状图添加图例，官网一张图修改

Surpriseplus

2023-03-24 c42e12bcc0877678cf09438b7a6bfb9ccd7342fa

 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 = {