管道基础大数据平台系统开发-【前端】-新系統界面
TreeWish
2023-03-03 b6c8e7c61f0270598ba7fdbc44f79512e010d0fe
src/components/MapView/mapSpacePop.vue
@@ -45,12 +45,14 @@
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small"
          <el-button
            size="small"
            plain
            @click="setSpaceTableLayer"
          >查询</el-button>
          <el-button
            plain size="small"
            plain
            size="small"
            @click="restSpacePopLayer"
          >重置</el-button>
        </el-form-item>
@@ -58,7 +60,8 @@
      <div class="centTable">
        <el-table
          :data="tableData"
          height="260px"
          border
          height="100%"
          ref="filterTable"
          style="width: 100%"
        >
@@ -88,6 +91,7 @@
            :prop="item.field"
            show-overflow-tooltip
            align="center"
            :fit="true"
          ></el-table-column>
        </el-table>
      </div>
@@ -140,6 +144,11 @@
      attributeData: [],
      optionx: [],
      options: [],
      conditions: [
        ['=', '<>', 'like'],
        ['>=', '>', ' =', '<=', '<', '<>'],
        ['>=', '>', ' =', '<=', '<', '<>'],
      ],
      options1: [
        {
          value: '=',
@@ -185,6 +194,7 @@
      spaceLayer: '',
      imagePoint: null,
      domainsLayer: null,
      querytype: null,
    };
  },
  watch: {
@@ -220,15 +230,35 @@
      this.showSpacePopLayer();
    },
    changeValue(value) {
      var obj = {};
      obj = this.optionx.find(function (item) {
        return item.value === value;
        return item.field === value;
      });
      if (obj.type == 'serial' || obj.type == 'int') {
        this.options = this.options2;
      // if (obj.type == 'serial' || obj.type == 'int') {
      //   this.options = this.options2;
      // } else {
      //   this.options = this.options1;
      // }
      this.options = [];
      var std = [];
      this.querytype = obj.type
      if (obj.type == "text" || obj.type == "blob") {
        std = this.conditions[0];
      } else if (obj.type == "date" || obj.type == "datetime") {
        std = this.conditions[2];
      } else {
        this.options = this.options1;
        std = this.conditions[1];
      }
      for (var i in std) {
        this.options.push({
          label: std[i],
          value: std[i],
        });
      }
      this.formInline.region = this.options[0].value;
    },
    setListDataStart() {
@@ -240,11 +270,23 @@
    showSpacePopLayer() {
      let val_date = this.optionx[0];
      this.formInline.name = val_date.field;
      if (val_date.type == 'serial' || val_date.type == 'int') {
        this.options = this.options2;
      this.options = [];
      var std = [];
      this.querytype = val_date.type
      if (val_date.type == "text" || val_date.type == "blob") {
        std = this.conditions[0];
      } else if (val_date.type == "date" || val_date.type == "datetime") {
        std = this.conditions[2];
      } else {
        this.options = this.options1;
        std = this.conditions[1];
      }
      for (var i in std) {
        this.options.push({
          label: std[i],
          value: std[i],
        });
      }
      this.formInline.region = this.options[0].value;
      this.getSpaceTableLayer();
    },
@@ -254,6 +296,7 @@
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }
      this.optionx = [];
      var valadata = data.result;
      for (var i in valadata) {
@@ -286,6 +329,7 @@
        this.$message.error('列表调用失败');
      }
      this.domainsLayer = data.result;
      this.setListDataStart();
      this.getTableselectFields();
    },
@@ -295,13 +339,41 @@
      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 (querytype == "date" || 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 +
          ' ' +
          this.formInline.input;
          this.formInline.name + " " + this.formInline.region + " " + val
      }
      const data = await dataQuerySelectByPage(this.listdata);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
@@ -336,11 +408,13 @@
      var val1 = decr(data.result);
      if (val1) {
        if (this.$store.state.primitLayer != null) {
          sgworld.Viewer.entities.remove(this.$store.state.primitLayer);
          sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
          this.$store.state.primitLayer = null;
        }
        var wkt = this.$wkt.parse(val1);
        this.setMapLoaction(wkt);
        this.setMapLoaction(wkt, row);
      }
    },
    handleSizeChange(val) {
@@ -351,38 +425,95 @@
      this.listdata.pageIndex = val;
      this.getSpaceTableLayer();
    },
    setMapLoaction(res) {
          if (this.$store.state.primitLayer != null) {
          sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
          this.$store.state.primitLayer = null;
        }
    setMapLoaction(res, properties) {
      if (this.$store.state.primitLayer != null) {
        sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
        // this.$store.state.primitLayer = null;
        sgworld.Viewer.entities.remove(this.$store.state.primitLayer);
        this.$store.state.primitLayer = null;
      }
      var coord = res.coordinates;
      if (res.type == 'Point') {
        this.$store.state.primitLayer = sgworld.Creator.CreateLabel(
          { X: coord[0], Y: coord[1], Altitude: 2000 },
          '',
          SmartEarthRootUrl + 'Workers/image/mark.png',
          {
            disableDepthTestDistance: Infinity,
            scale: 0.8,
          },
          0,
          '巡检点'
        var val = Cesium.Cartesian3.fromDegrees(
          res.coordinates[0],
          res.coordinates[1],
        );
        sgworld.Navigate.flyToObj(this.$store.state.primitLayer.item);
      } else if (res.type == 'MultiPolygon') {
        this.$store.state.primitLayer = Viewer.entities.add({
          properties: properties,
          tag: "properties_point",
          position: val,
          billboard: {
            // 图像地址,URI或Canvas的属性
            image: SmartEarthRootUrl + "Workers/image/mark.png",
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            // 大小是否以米为单位
            sizeInMeters: false,
            // 相对于坐标的垂直位置
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
            // 相对于坐标的水平位置
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            // 应用于图像的统一比例。比例大于会1.0放大标签,而比例小于会1.0缩小标签。
            scale: 1.0,
            // 是否显示
            show: true
          }
        });
        this.$store.state.primitLayer.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY;
        sgworld.Navigate.flyToObj(this.$store.state.primitLayer)
        window.propertieshandler = new Cesium.ScreenSpaceEventHandler(
          sgworld.Viewer.scene.canvas
        );
        window.propertieshandler.setInputAction(event => {
          let pick = sgworld.Viewer.scene.pick(event.position);
          // ;
          if (pick && pick.id && pick.id.tag == "properties_point") {
            this.$store.state.propertiesFlag = '1';
            let properties = pick.id.properties;
            let propertyNames = pick.id.properties.propertyNames;
            let obj = {};
            obj["eventid"] = properties['_eventid']._value;
            //
            this.attributeData.forEach(item => {
              propertyNames.forEach(itemElement => {
                if (itemElement == item.field) {
                  obj[item.alias] = properties[itemElement]._value
                }
              })
            })
            this.$store.state.propertiesInfo = obj;
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      } else if (res.type == 'MultiPolygon' || res.type == 'LineString') {
        var val = res.coordinates[0][0];
        var std = [];
        for (var i in val) {
          std.push({ x: val[i][0], y: val[i][1], z: 1000 })
          std.push(val[i][0])
          std.push(val[i][1])
        }
        this.$store.state.primitLayer = sgworld.Creator.createPolygon(std, {
          fillColor: '#ffff00',
          outlineColor: '#fff',
          outlineWidth: 2
        }, 1, 0, "面");
        sgworld.Navigate.flyToObj(this.$store.state.primitLayer.item);
        this.$store.state.primitLayer = Viewer.entities.add({
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray(std),
            width: 5,
            material: new Cesium.Color(1.0, 0.0, 0.0, 0.3),
            clampToGround: true,
          }
        })
        // this.$store.state.primitLayer = sgworld.Creator.createPolygon(std, {
        //   fillColor: '#ffff00',
        //   outlineColor: '#fff',
        //   outlineWidth: 2
        // }, 1, 0, "面");
        sgworld.Navigate.flyToObj(this.$store.state.primitLayer);
      } else if (res.type == 'MultiLineString') {
        var line = res.coordinates[0];
        var std = [];
@@ -390,11 +521,14 @@
          std.push({ x: line[i][0], y: line[i][1], z: 1000 })
        }
       this.$store.state.primitLayer = sgworld.Creator.createPolyline(std, "#ffff00", 1, 0, "线");
        this.$store.state.primitLayer = sgworld.Creator.createPolyline(std, "#ffff00", 1, 0, "线");
        sgworld.Navigate.flyToObj(this.$store.state.primitLayer.item);
      }
    },
  },
  destroyed() {
    this.$store.state.propertiesFlag = null;
  }
};
</script>
@@ -408,23 +542,25 @@
  border: 1px solid gray;
  float: left;
  .centTable {
    height: 230px;
    position: absolute;
    height: 66%;
    width: 98%;
  }
  .rightTitle {
    padding: 5px;
    width: 100%;
    .boxClose {
      float: right;
      margin-right: 20px;
    }
  }
  .bottomPage {
    position: absolute;
    bottom: 1%;
    bottom: 3%;
  }
  /deep/.el-form-item {
    margin-bottom: 0px;
  }
}
</style>