北京经济技术开发区经开区虚拟城市项目-【前端】-Web
lixuliang
2024-09-14 c7187e038c284acc051a439c5eda16582bdb9b7a
src/components/map/viewer1.vue
@@ -7,15 +7,10 @@
          v-for="(item, index) in arr"
          :key="index"
          @click="changeLeftMap($event, item, index)"
        >
          {{ item }}
        </li>
        >{{ item }}</li>
      </ul>
    </div>
    <layerTreeTwoScreenRight
      v-if="layerTreeTwoScreen"
      id="layerTreeTwoScreen111"
    />
    <layerTreeTwoScreenRight v-if="layerTreeTwoScreen" id="layerTreeTwoScreen111" />
    <div class="tdInfo" v-if="showTDinfo">
      <div class="tdInfo_close" @click="tdInfoClose">×</div>
      <p v-if="dikuanxinxi" class="noInfo">暂无该地块信息</p>
@@ -52,15 +47,9 @@
        <div v-else class="title">
          <li>
            企业
            <el-tooltip
              class="item"
              effect="dark"
              content="点击查看企业信息"
              placement="bottom"
            >
              <a @click="showYZCQY"> {{ qysl }}</a>
            </el-tooltip>
            家
            <el-tooltip class="item" effect="dark" content="点击查看企业信息" placement="bottom">
              <a @click="showYZCQY">{{ qysl }}</a>
            </el-tooltip>家
          </li>
        </div>
      </ul>
@@ -88,76 +77,36 @@
      >
        <div class="el-dialog-div">
          <div class="inquire">
            <el-form
              size="mini"
              ref="queryForm"
              :model="queryForm"
              :inline="true"
            >
            <el-form size="mini" ref="queryForm" :model="queryForm" :inline="true">
              <el-form-item label="查询条件" prop="name">
                <el-input
                  v-model="queryForm.content"
                  placeholder="请输入要查询的企业名称"
                />
                <el-input v-model="queryForm.content" placeholder="请输入要查询的企业名称" />
              </el-form-item>
              <el-form-item>
                <el-button
                  @click="queryInfo('queryForm')"
                  icon="el-icon-search"
                  class="primary"
                  >查询</el-button
                >
                <el-button @click="queryInfo('queryForm')" icon="el-icon-search" class="primary">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table
            fit
            style="width: 100%"
            :data="tableData"
            highlight-current-row
            height="50"
          >
          <el-table fit style="width: 100%" :data="tableData" highlight-current-row height="50">
            <el-table-column type="index" width="40"></el-table-column>
            <el-table-column
              property="企业名称"
              label="企业名称"
              min-width="220"
            ></el-table-column>
            <el-table-column
              property="企业类型"
              label="企业类型"
              min-width="220"
            ></el-table-column>
            <el-table-column
              property="成立时间"
              label="成立时间"
              min-width="90"
            ></el-table-column>
            <el-table-column property="qymc" label="企业名称" min-width="220"></el-table-column>
            <el-table-column property="qylx" label="企业类型" min-width="220"></el-table-column>
            <el-table-column property="clsj" label="成立时间" min-width="90"></el-table-column>
            <!-- <el-table-column
              property="所属行业"
              label="所属行业"
            ></el-table-column> -->
            <el-table-column property="法人" label="法人"></el-table-column>
            ></el-table-column>-->
            <el-table-column property="fr" label="法人"></el-table-column>
            <!-- <el-table-column
              property="注册地址"
              label="注册地址"
            ></el-table-column> -->
            ></el-table-column>-->
            <el-table-column label="操作" width="60">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >详情</el-button
                >
                <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div
            slot="footer"
            class="dialog-footer"
            style="text-align: center; margin-top: 2px"
          >
          <div slot="footer" class="dialog-footer" style="text-align: center; margin-top: 2px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
@@ -166,8 +115,7 @@
              :pager-count="11"
              layout="total, pager"
              :total="searchNum"
            >
            </el-pagination>
            ></el-pagination>
          </div>
        </div>
      </el-dialog>
@@ -226,23 +174,42 @@
      pageSize: 10,
      searchNum: 0,
      arr: [
        2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012,
        2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
        2001,
        2002,
        2003,
        2004,
        2005,
        2006,
        2007,
        2008,
        2009,
        2010,
        2011,
        2012,
        2013,
        2014,
        2015,
        2016,
        2017,
        2018,
        2019,
        2020,
        2021
      ],
      tableData: [],
      queryForm: {
        type: "企业名称",
        content: "",
        content: ""
      },
      size: "100%",
      scale: "1",
      offset: "0%",
      offset: "0%"
    };
  },
  created() {},
  computed: {
    ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen"]),
    ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen"])
  },
  watch: {
    viewer1Show: {
@@ -261,7 +228,7 @@
            );
          }
        }, 2000);
      },
      }
    },
    isLand(newvalue, oldvalue) {
      if (!newvalue) {
@@ -282,7 +249,7 @@
          this.loadTDGLLayer();
        }
      }
    },
    }
  },
  mounted() {
    let pathName = window.location.pathname.split("/");
@@ -296,7 +263,7 @@
    this.scale = (100 / size).toFixed(2);
    this.offset = "-" + ((size - 100) / 2).toFixed(2) + "%";
    this.size = size + "%";
    this.$nextTick(function () {
    this.$nextTick(function() {
      let that = this;
      let option = {
        fullscreenButton: true,
@@ -306,16 +273,16 @@
          failIfMajorPerformanceCaveat: false,
          webgl: {
            alpha: true,
            preserveDrawingBuffer: true,
          },
        },
            preserveDrawingBuffer: true
          }
        }
      };
      // 北京
      window.sgworld1 = new SmartEarth.EarthCtrl(
        "sdkContainer1",
        {
          StaticFileBaseUrl: StaticFileBaseUrl,
          StaticFileBaseUrl: StaticFileBaseUrl
        },
        {},
        null,
@@ -323,8 +290,9 @@
          sgworld1.Creator.createArcGisImageryLayer(
            "ARCGIS",
            {
              url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
              enablePickFeatures: false,
              url:
                "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
              enablePickFeatures: false
            },
            "0",
            1,
@@ -341,8 +309,8 @@
            orientation: {
              heading: sgworld.Viewer.camera.heading,
              pitch: sgworld.Viewer.camera.pitch,
              roll: sgworld.Viewer.camera.roll,
            },
              roll: sgworld.Viewer.camera.roll
            }
          };
          sgworld1.Viewer.camera.setView(p);
          setTimeout(() => {
@@ -368,7 +336,7 @@
      this.addEvent();
    });
    //关闭弹窗
    Bus.$on("closeLandInfoPop", (data) => {
    Bus.$on("closeLandInfoPop", data => {
      if (data) {
        this.showTDinfo = false;
      }
@@ -437,33 +405,31 @@
      let tilingScheme = new Cesium.GeographicTilingScheme({
        rectangle: rectangle,
        numberOfLevelZeroTilesX: 2,
        numberOfLevelZeroTilesY: 1,
        numberOfLevelZeroTilesY: 1
      });
      var dx = {
        url: paramUrl,
        tilingScheme: tilingScheme,
        customTags: {
          nx: function (imageryProvider, x, y, level) {
          nx: function(imageryProvider, x, y, level) {
            return (2 << (level - 1)) + x;
          },
          ny: function (imageryProvider, x, y, level) {
          ny: function(imageryProvider, x, y, level) {
            return (2 << (level - 1)) + y;
          },
        },
          }
        }
      };
      var imageryProvider = new Cesium.UrlTemplateImageryProvider(dx);
      let imageLayer = new Cesium.ImageryLayer(imageryProvider, {
        alpha: 1,
        brightness: 1.0,
        brightness: 1.0
      });
      Viewer1.imageryLayers.add(imageLayer, 3);
      return imageLayer;
    },
    loadBJ54ImageLayer(year) {
      let url = "http://172.26.64.84/service/ImageEngine/picdis/abc";
      //let url = option.url;
      //let year = option.year;
      let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Sate_${year}&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
      let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Sate_${year}&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
      let minx = (113.168199 * Math.PI) / 180.0;
      let miny = (39.230551 * Math.PI) / 180.0;
      let maxx = (118.562362 * Math.PI) / 180.0;
@@ -472,27 +438,26 @@
      let tilingScheme = new Cesium.GeographicTilingScheme({
        rectangle: rectangle,
        numberOfLevelZeroTilesX: 2,
        numberOfLevelZeroTilesY: 1,
        numberOfLevelZeroTilesY: 1
      });
      var dx = {
        url: paramUrl,
        tilingScheme: tilingScheme,
        customTags: {
          nx: function (imageryProvider, x, y, level) {
          nx: function(imageryProvider, x, y, level) {
            return (2 << (level - 1)) + x;
          },
          ny: function (imageryProvider, x, y, level) {
          ny: function(imageryProvider, x, y, level) {
            return (2 << (level - 1)) + y;
          },
        },
          }
        }
      };
      var imageryProvider = new Cesium.UrlTemplateImageryProvider(dx);
      let imageLayer = new Cesium.ImageryLayer(imageryProvider, {
        alpha: 1,
        brightness: 1.0,
        brightness: 1.0
      });
      Viewer1.imageryLayers.add(imageLayer, 2);
      return imageLayer;
    },
    loadTDGLLayer() {
@@ -512,7 +477,7 @@
            treeNode.tileType === "Geo"
              ? new Cesium.GeographicTilingScheme()
              : new Cesium.WebMercatorTilingScheme(),
          alpha: treeNode.alpha,
          alpha: treeNode.alpha
        },
        "0",
        treeNode.zIndex,
@@ -524,7 +489,7 @@
      let type = 0;
      //点击左侧显示范围、详情
      handler1 = new Cesium.ScreenSpaceEventHandler(Viewer1.scene.canvas);
      handler1.setInputAction((event) => {
      handler1.setInputAction(event => {
        if (this.isLand) {
          let that = this;
          this.clearInfoPanel();
@@ -553,14 +518,14 @@
            }
            axios
              .get(
                `http://10.10.4.116:8089/cs/geowinmap_xncs/ds?lng=${p.lon}&lat=${p.lat}`
                `http://10.10.4.116:8086/cs/geowinmap_xncs/ds?lng=${p.lon}&lat=${p.lat}`
                // "http://10.10.4.115:8022/geowinmap_xncs/ds?r=0.9158559377752831&serviceproviderid=map.vectorserviceprovider&serviceid=queryfeature&featcls=225%25E8%258C%2583%25E5%259B%25B4%25E5%2588%2586%25E5%258C%25BA%25E8%25A7%2584%25E5%2588%2592.geojson&lng=" +
                // p.lon +
                // "&lat=" +
                // p.lat +
                // "&geom=true&requesttype=json"
              )
              .then((response) => {
              .then(response => {
                let center = { lon: 0, lat: 0 };
                let polygon = that.read(response.data.geometry);
                if (polygon.length > 0) {
@@ -573,7 +538,7 @@
                    geometry.push({
                      x: parseFloat(point[0]),
                      y: parseFloat(point[1]),
                      z: 0,
                      z: 0
                    });
                  }
                  if (line) {
@@ -602,12 +567,12 @@
                if (center.lon != 0 && center.lat != 0) {
                  axios
                    .get(
                      "http://10.10.4.116:8089/cs/poisearch/guihuacon/getInfo?ydbm=" +
                      "http://10.10.4.116:8086/cs/poisearch/guihuacon/getInfo?ydbm=" +
                        // "http://10.10.4.115:8022//poisearch/guihuacon/getInfo?ydbm=" +
                        response.data.NO
                    )
                    .then(
                      (info) => {
                      info => {
                        try {
                          if (divPoint) {
                            sgworld.Creator.DeleteObject(divPoint);
@@ -677,10 +642,10 @@
                          } catch (e) {}
                        } catch (e) {}
                      },
                      (info) => {
                      info => {
                        this.$notify.error({
                          title: "提示",
                          message: "未查询到数据!",
                          message: "未查询到数据!"
                        });
                        // alert("未查询到数据!");
                        console.log("查询失败!");
@@ -742,14 +707,22 @@
    tableRes(searchData, table, array) {
      const search = searchData;
      if (search) {
        return table.filter((data) => {
          return Object.keys(data).some((key) => {
        return table.filter(data => {
          return Object.keys(data).some(key => {
            if (array) {
              if (array.indexOf(key) == -1) {
                return String(data[key]).toLowerCase().indexOf(search) > -1;
                return (
                  String(data[key])
                    .toLowerCase()
                    .indexOf(search) > -1
                );
              }
            } else {
              return String(data[key]).toLowerCase().indexOf(search) > -1;
              return (
                String(data[key])
                  .toLowerCase()
                  .indexOf(search) > -1
              );
            }
          });
        });
@@ -759,7 +732,7 @@
    handleClick(row) {
      window.open(
        "https://qylweb.bda.gov.cn/alldetails/#/newEnterprisedetails?uscc=" +
          row["统一社会信用代码"] +
          row["tyshxxdm"] +
          "&systemName=中小微"
      );
    },
@@ -796,7 +769,7 @@
        spaces: /\s+/,
        parenComma: /\)\s*,\s*\(/,
        doubleParenComma: /\)\s*\)\s*,\s*\(\s*\(/, // can't use {2} here
        trimParens: /^\s*\(?(.*?)\)?\s*$/,
        trimParens: /^\s*\(?(.*?)\)?\s*$/
      };
      /**
       * Object with properties corresponding to the geometry types. Property values
@@ -863,7 +836,7 @@
            coords = points[i].trim().split(regExes.spaces);
            components.push([
              Number.parseFloat(coords[0]),
              Number.parseFloat(coords[1]),
              Number.parseFloat(coords[1])
            ]);
          }
          return components;
@@ -888,7 +861,7 @@
            coords = points[i].trim().split(regExes.spaces);
            components.push([
              Number.parseFloat(coords[0]),
              Number.parseFloat(coords[1]),
              Number.parseFloat(coords[1])
            ]);
          }
          return components;
@@ -965,7 +938,7 @@
            components.push(parse$1.polygon(polygon));
          }
          return components;
        },
        }
      };
      var geometry, type, str;
@@ -995,8 +968,8 @@
        orientation: {
          heading: sgworld1.Viewer.camera.heading,
          pitch: sgworld1.Viewer.camera.pitch,
          roll: sgworld1.Viewer.camera.roll,
        },
          roll: sgworld1.Viewer.camera.roll
        }
      };
      sgworld.Viewer.camera.setView(p);
    },
@@ -1020,7 +993,7 @@
    },
    //初始化弹窗事件
    initLayerOpen() {
      window.layerOpen = function (name, options) {
      window.layerOpen = function(name, options) {
        layuiLayer.close(SmartEarthPopupData.layerProp);
        let width = options.width;
@@ -1047,27 +1020,27 @@
          offset: options.offset || undefined,
          area: [
            typeof width === "number" ? width + "px" : width,
            typeof height === "number" ? height + "px" : height,
            typeof height === "number" ? height + "px" : height
          ],
          content: options.url,
          success: function (layero, index) {
          success: function(layero, index) {
            layero.css({
              "border-radius": "8px",
              "border-radius": "8px"
            });
            if (successFn && typeof successFn === "function") {
              successFn(layero, index);
            }
          },
          cancel: function () {
          cancel: function() {
            if (cancelFn && typeof cancelFn === "function") {
              cancelFn();
            }
          },
          end: function () {
          end: function() {
            if (endFn && typeof endFn === "function") {
              endFn();
            }
          },
          }
        });
      };
    },
@@ -1077,7 +1050,7 @@
        "<div style='color: #FFFFFF;float: left;height: 28px;line-height: 28px;'></div>";
      let handler3D = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
      handler3D.setInputAction((wheelment) => {
      handler3D.setInputAction(wheelment => {
        // 滚动滚轴,得到当前的视点高度
        // 单位换算,当大于1000米的时候显示“千米”,小于1000米的时候显示单位为“米”
        var cHeightM = Viewer.camera.positionCartographic.height;
@@ -1106,7 +1079,7 @@
          "</span>" +
          "</span>";
      }, Cesium.ScreenSpaceEventType.WHEEL);
      handler3D.setInputAction((movement) => {
      handler3D.setInputAction(movement => {
        if (window.sdHeight == "") {
          this.cHeight = "862.1千米";
        }
@@ -1138,7 +1111,7 @@
            "</span>";
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },
    }
  },
  beforeDestroy() {
    Bus.$off("closeLandInfoPop");
@@ -1165,7 +1138,7 @@
    if (handler1) {
      handler1.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }
  },
  }
};
</script>
<style scoped>