管道基础大数据平台系统开发-【前端】-新系統界面
TreeWish
2023-03-06 7551d97ab4cf37cf7f21450c41de46b7cb4a9258
属性查询线和面附件
已修改1个文件
407 ■■■■ 文件已修改
src/components/MapView/mapSpacePop.vue 407 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/MapView/mapSpacePop.vue
@@ -1,11 +1,7 @@
<template>
  <div class="menuPop">
    <div style="padding: 5px">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-select
            v-model="formInline.name"
@@ -45,16 +41,12 @@
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            plain
            @click="setSpaceTableLayer"
          >查询</el-button>
          <el-button
            plain
            size="small"
            @click="restSpacePopLayer"
          >重置</el-button>
          <el-button size="small" plain @click="setSpaceTableLayer"
            >查询</el-button
          >
          <el-button plain size="small" @click="restSpacePopLayer"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div class="centTable">
@@ -71,11 +63,7 @@
            label="序号"
            width="50"
          />
          <el-table-column
            label="定位"
            width="100"
            align="center"
          >
          <el-table-column label="定位" width="100" align="center">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-map-location"
@@ -119,11 +107,11 @@
  inquiry_selectFields,
  inquiry_selectDomains,
  decr,
} from '../../api/api.js';
} from "../../api/api.js"
export default {
  computed: {
    storeTime() {
      return this.$store.state.mapSpaceQueryLayer;
      return this.$store.state.mapSpaceQueryLayer
    },
  },
  data() {
@@ -138,308 +126,296 @@
        filter: null,
      },
      formInline: {
        name: '',
        region: '',
        name: "",
        region: "",
      },
      attributeData: [],
      optionx: [],
      options: [],
      conditions: [
        ['=', '<>', 'like'],
        ['>=', '>', ' =', '<=', '<', '<>'],
        ['>=', '>', ' =', '<=', '<', '<>'],
        ["=", "<>", "like"],
        [">=", ">", " =", "<=", "<", "<>"],
        [">=", ">", " =", "<=", "<", "<>"],
      ],
      options1: [
        {
          value: '=',
          label: '=',
          value: "=",
          label: "=",
        },
        {
          value: 'like',
          label: 'like',
          value: "like",
          label: "like",
        },
        {
          value: '<>',
          label: '<>',
          value: "<>",
          label: "<>",
        },
      ],
      options2: [
        {
          value: '=',
          label: '=',
          value: "=",
          label: "=",
        },
        {
          value: '<>',
          label: '<>',
          value: "<>",
          label: "<>",
        },
        {
          value: '<=',
          label: '<=',
          value: "<=",
          label: "<=",
        },
        {
          value: '<',
          label: '<',
          value: "<",
          label: "<",
        },
        {
          value: '>=',
          label: '>=',
          value: ">=",
          label: ">=",
        },
        {
          value: '>',
          label: '>',
          value: ">",
          label: ">",
        },
      ],
      value: '',
      value: "",
      tableData: [],
      spaceLayer: '',
      spaceLayer: "",
      imagePoint: null,
      domainsLayer: null,
      querytype: null,
    };
    }
  },
  watch: {
    async storeTime(index) {
      this.spaceLayer = index;
      this.getDomainsLayer();
      this.spaceLayer = index
      this.getDomainsLayer()
      // this.getTableselectFields();
      // this.restSpacePopLayer();
    },
  },
  created() {
    this.spaceLayer = this.$store.state.mapSpaceQueryLayer;
    this.spaceLayer = this.$store.state.mapSpaceQueryLayer
    // this.showSpacePopLayer();
    //   this.getTableselectFields();
    this.getDomainsLayer();
    this.getDomainsLayer()
  },
  methods: {
    closeSpaceBox() {
      if (this.imagePoint != null) {
        sgworld.Creator.DeleteObject(this.imagePoint);
        this.imagePoint = null;
        sgworld.Creator.DeleteObject(this.imagePoint)
        this.imagePoint = null
      }
      this.$store.state.mapPopBoolean = false;
      this.$store.state.mapPopBoxFlag = null;
      this.$store.state.mapPopBoolean = false
      this.$store.state.mapPopBoxFlag = null
    },
    setSpaceTableLayer() {
      this.setListDataStart();
      this.getSpaceTableLayer();
      this.setListDataStart()
      this.getSpaceTableLayer()
    },
    restSpacePopLayer() {
      this.formInline.input = null;
      this.showSpacePopLayer();
      this.formInline.input = null
      this.showSpacePopLayer()
    },
    changeValue(value) {
      var obj = {};
      var obj = {}
      obj = this.optionx.find(function (item) {
        return item.field === value;
      });
        return item.field === value
      })
      // if (obj.type == 'serial' || obj.type == 'int') {
      //   this.options = this.options2;
      // } else {
      //   this.options = this.options1;
      // }
      this.options = [];
      this.options = []
      var std = [];
      var std = []
      this.querytype = obj.type
      if (obj.type == "text" || obj.type == "blob") {
        std = this.conditions[0];
        std = this.conditions[0]
      } else if (obj.type == "date" || obj.type == "datetime") {
        std = this.conditions[2];
        std = this.conditions[2]
      } else {
        std = this.conditions[1];
        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.formInline.region = this.options[0].value
    },
    setListDataStart() {
      this.listdata.pageSize = 10;
      this.listdata.pageIndex = 1;
      this.tableData = [];
      this.listdata.pageSize = 10
      this.listdata.pageIndex = 1
      this.tableData = []
    },
    //初始化查询条件
    showSpacePopLayer() {
      let val_date = this.optionx[0];
      this.formInline.name = val_date.field;
      this.options = [];
      var std = [];
      let val_date = this.optionx[0]
      this.formInline.name = val_date.field
      this.options = []
      var std = []
      this.querytype = val_date.type
      if (val_date.type == "text" || val_date.type == "blob") {
        std = this.conditions[0];
        std = this.conditions[0]
      } else if (val_date.type == "date" || val_date.type == "datetime") {
        std = this.conditions[2];
        std = this.conditions[2]
      } else {
        std = this.conditions[1];
        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();
      this.formInline.region = this.options[0].value
      this.getSpaceTableLayer()
    },
    //初始化查询表的字段
    async getTableselectFields() {
      const data = await inquiry_selectFields({ name: this.spaceLayer });
      const data = await inquiry_selectFields({ name: this.spaceLayer })
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败")
      }
      this.optionx = [];
      var valadata = data.result;
      this.optionx = []
      var valadata = data.result
      for (var i in valadata) {
        if (valadata[i].showtype == 1) {
          if (
            valadata[i].domainNa != null &&
            valadata[i].domainNa != undefined
          ) {
            valadata[i].domainNa = this.getMatchDomainNa(valadata[i].domainNa);
            valadata[i].domainNa = this.getMatchDomainNa(valadata[i].domainNa)
          }
          this.optionx.push(valadata[i]);
          this.attributeData.push(valadata[i]);
          this.optionx.push(valadata[i])
          this.attributeData.push(valadata[i])
        }
      }
      this.showSpacePopLayer();
      this.showSpacePopLayer()
    },
    getMatchDomainNa(res) {
      var std = null;
      var std = null
      for (var i in this.domainsLayer) {
        if (this.domainsLayer[i].domName == res) {
          return (std = this.domainsLayer[i].codeDesc);
          return (std = this.domainsLayer[i].codeDesc)
        }
      }
      return std;
      return std
    },
    //初始化查询阈值表
    async getDomainsLayer() {
      const data = await inquiry_selectDomains({ name: this.spaceLayer });
      const data = await inquiry_selectDomains({ name: this.spaceLayer })
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败")
      }
      this.domainsLayer = data.result;
      this.domainsLayer = data.result
      this.setListDataStart();
      this.getTableselectFields();
      this.setListDataStart()
      this.getTableselectFields()
    },
    //初始化查询表格信息
    async getSpaceTableLayer() {
      this.listdata.name = this.spaceLayer;
      this.listdata.name = this.spaceLayer
      if (this.formInline.input == undefined || this.formInline.input == null) {
        this.listdata.filter = null;
        this.listdata.filter = null
      } else {
        var val;
        var val
        var value = this.formInline.input
        if (this.querytype == "long" || this.querytype == "integer") {
          val = parseInt(value);
        } else if (this.querytype == 'double') {
          val = parseInt(value)
        } else if (this.querytype == "double") {
          if (this.formSql.value.indexOf(".") != -1) {
            val = value;
            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) + "'";
          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 + "'";
          val = "'" + value + "'"
        }
        this.listdata.filter =
          this.formInline.name + " " + this.formInline.region + " " + val
      }
      const data = await dataQuerySelectByPage(this.listdata);
      const data = await dataQuerySelectByPage(this.listdata)
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败")
      }
      var val_Data = data.result;
      this.count = data.count;
      var val_Data = data.result
      this.count = data.count
      for (var i in val_Data) {
        var valste = val_Data[i];
        var valste = val_Data[i]
        for (var j in this.optionx) {
          if (
            this.optionx[j].domainNa != null &&
            this.optionx[j].domainNa != undefined
          ) {
            valste[this.optionx[j].field] = this.optionx[j].domainNa;
            valste[this.optionx[j].field] = this.optionx[j].domainNa
          }
        }
      }
      this.tableData = data.result;
      this.$refs.filterTable.doLayout();
      this.tableData = data.result
      this.$refs.filterTable.doLayout()
    },
    async spaceLocation(index, row) {
      var param = {
        gid: row.gid,
        name: this.spaceLayer,
      };
      const data = await dataQuerySelectWktById(param);
      }
      const data = await dataQuerySelectWktById(param)
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败")
      }
      var val1 = decr(data.result);
      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;
          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);
        var wkt = this.$wkt.parse(val1)
        this.setMapLoaction(wkt, row);
        this.setMapLoaction(wkt, row)
      }
    },
    handleSizeChange(val) {
      this.listdata.pageSize = val;
      this.getSpaceTableLayer();
      this.listdata.pageSize = val
      this.getSpaceTableLayer()
    },
    handleCurrentChange(val) {
      this.listdata.pageIndex = val;
      this.getSpaceTableLayer();
      this.listdata.pageIndex = val
      this.getSpaceTableLayer()
    },
    setMapLoaction(res, properties) {
      if (this.$store.state.primitLayer != null) {
        sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
        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;
        sgworld.Viewer.entities.remove(this.$store.state.primitLayer)
        this.$store.state.primitLayer = null
      }
      var coord = res.coordinates;
      var coord = res.coordinates
      if (res.type == 'Point') {
      if (res.type == "Point") {
        var val = Cesium.Cartesian3.fromDegrees(
          res.coordinates[0],
          res.coordinates[1],
        );
          res.coordinates[1]
        )
        this.$store.state.primitLayer = Viewer.entities.add({
          properties: properties,
          tag: "properties_point",
@@ -457,55 +433,32 @@
            // 应用于图像的统一比例。比例大于会1.0放大标签,而比例小于会1.0缩小标签。
            scale: 1.0,
            // 是否显示
            show: true
          }
        });
        this.$store.state.primitLayer.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY;
            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 = [];
      } else if (res.type == "MultiPolygon" || res.type == "LineString") {
        var val = res.coordinates[0][0]
        var std = []
        for (var i in val) {
          std.push(val[i][0])
          std.push(val[i][1])
        }
        this.$store.state.primitLayer = Viewer.entities.add({
          properties: properties,
          tag: "properties_line",
          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, {
@@ -513,23 +466,83 @@
        //   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 = [];
        sgworld.Navigate.flyToObj(this.$store.state.primitLayer)
      } else if (res.type == "MultiLineString") {
        var line = res.coordinates[0]
        var std = []
        for (var i in line) {
          std.push({ x: line[i][0], y: line[i][1], z: 1000 })
        }
        this.$store.state.primitLayer = sgworld.Creator.createPolyline(std, "#ffff00", 1, 0, "线");
        sgworld.Navigate.flyToObj(this.$store.state.primitLayer.item);
        const polyline = sgworld.Creator.createPolyline(
          std,
          "#ffff00",
          1,
          0,
          "线"
        )
        const entity =  polyline.item
        entity.properties = properties
        entity.tag =   "properties_line"
        this.$store.state.primitLayer = polyline
        sgworld.Navigate.flyToObj(entity)
      }
      this.setMapHandler()
    },
    setMapHandler() {
      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
        } else if (pick && pick.id && pick.id._polyline && pick.id.tag == "properties_line") {
          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)
    },
  },
  destroyed() {
    this.$store.state.propertiesFlag = null;
  }
};
    this.$store.state.propertiesFlag = null
    if (propertieshandler != null && Cesium.defined(propertieshandler)) {
      window.propertieshandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_CLICK
      )
      window.propertieshandler = null
    }
  },
}
</script>
<style lang="less" scoped>