解决分屏切换2D显示不全

TreeWish

2023-02-28 d805339695bf1d25a333977445e1821508654d13

解决分屏切换2D显示不全

 src/components/MapDiv.vue

@@ -10,10 +10,7 @@
    >
      <mapsdk></mapsdk>
    </div>
    <div
      id="ds"
      v-show="isShowDs"
    ></div>
    <div id="ds" v-show="isShowDs"></div>
    <!--openLayers显示界面-->
    <div
      v-show="isOlMapFlag"
@@ -27,13 +24,13 @@
</template>

<script>
import mapsdk from './mapsdk';
import mapol from './mapol';
import { transform } from 'ol/proj';
import ol from 'ol';
import $ from 'jquery';
import mapsdk from "./mapsdk"
import mapol from "./mapol"
import { transform } from "ol/proj"
import ol from "ol"
import $ from "jquery"
export default {
  name: '',
  name: "",
  components: {
    mapsdk,
    mapol,
@@ -51,156 +48,154 @@
        250000, 200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200,
        100, 50, 25, 10, 0,
      ],
    };
    }
  },
  methods: {
    changeMap(res) {
      this.isSplitFlag = res;
      this.isSplitFlag = res
      switch (res) {
        case 1:
          this.isShowCeMap = true;
          this.isShowDs = true;
          this.isOlMapFlag = true;
          this.isShowOlMap = true;
          this.isSdkMapFlag = true;
          var that = this;
          this.isShowCeMap = true
          this.isShowDs = true
          this.isOlMapFlag = true
          this.isShowOlMap = true
          this.isSdkMapFlag = true
          var that = this

          setTimeout(function () {
            window.map.updateSize();
            that.showSplitMap();
          }, 500);
            window.map.updateSize()
            that.showSplitMap()
          }, 500)

          break;
          break
        case 2:
          this.isSdkMapFlag = false;
          this.isShowDs = false;
          this.isShowOlMap = false;
          this.isOlMapFlag = true;
          this.isSdkMapFlag = false
          this.isShowDs = false
          this.isShowOlMap = false
          this.isOlMapFlag = true
          setTimeout(function () {
            window.map.updateSize();
          }, 300);
          break;
            window.map.updateSize()
          }, 300)
          break
        case 3:
          this.isSdkMapFlag = true;
          this.isShowDs = false;
          this.isShowOlMap = false;
          this.isOlMapFlag = false;
          this.isShowCeMap = false;
          break;
          this.isSdkMapFlag = true
          this.isShowDs = false
          this.isShowOlMap = false
          this.isOlMapFlag = false
          this.isShowCeMap = false
          break
      }
    },
    showSplitMap() {
      var that = this;
      $('#mapView')
      var that = this
      $("#mapView")
        .off()
        .on('mousemove', function () {
        .on("mousemove", function () {
          if (that.isSplitFlag == 1) {
            window.Viewer.camera.changed.addEventListener(that.sdktool());
            window.Viewer.camera.changed.addEventListener(that.sdktool())
          }
        })
        .on('mouseout', function () {
        .on("mouseout", function () {
          if (that.isSplitFlag == 1) {
            window.Viewer.camera.changed.removeEventListener(that.sdktool());
            window.Viewer.camera.changed.removeEventListener(that.sdktool())
          }
        });
        })
      let mapZoomAndMove = function (event) {
        var position = window.map.getView().getCenter();
        var position = window.map.getView().getCenter()

        // var pos = transform(position, 'EPSG:3857', 'EPSG:4326');
        var pos = position;
        var level = that.getHeight(parseInt(window.map.getView().getZoom()));
        var pos = position
        var level = that.getHeight(parseInt(window.map.getView().getZoom()))
        window.Viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(pos[0], pos[1], level),
        });
      };
      $('#map')
        })
      }
      $("#map")
        .off()
        .on('mousemove', function () {
        .on("mousemove", function () {
          if (that.isSplitFlag == 1) {
            that.olzoomAndMove(mapZoomAndMove);
            that.olzoomAndMove(mapZoomAndMove)
          }
        })
        .on('mouseout', function () {
        .on("mouseout", function () {
          if (that.isSplitFlag == 1) {
            that.clearolzoomAndMove();
            that.clearolzoomAndMove()
          }
        });
        })
    },
    clearolzoomAndMove() {
      let registerOnZoomArr = window.map.get('registerOnZoom');
      let registerOnZoomArr = window.map.get("registerOnZoom")
      if (registerOnZoomArr && registerOnZoomArr.length > 0) {
        for (let i = 0; i < registerOnZoomArr.length; i++) {
          window.map.un('moveend', registerOnZoomArr[i]);
          window.map.un("moveend", registerOnZoomArr[i])
        }
      }
    },
    olzoomAndMove(eventListen, notListenMove) {
      // 记录地图缩放，用于判断拖动
      window.map.lastZoom =
        window.map.lastZoom || window.map.getView().getZoom();
        window.map.lastZoom || window.map.getView().getZoom()
      // 地图缩放事件
      let registerOnZoom = function (e) {
        // 不监听地图拖动事件
        if (notListenMove) {
          if (window.map.lastZoom != window.map.getView().getZoom()) {
            eventListen && eventListen(e);
            eventListen && eventListen(e)
          }
        } else {
          eventListen && eventListen(e);
          eventListen && eventListen(e)
        }
        window.map.lastZoom = window.map.getView().getZoom();
      };
        window.map.lastZoom = window.map.getView().getZoom()
      }
      // 保存缩放和拖动事件对象，用于后期移除
      let registerOnZoomArr = map.get('registerOnZoom') || [];
      let registerOnZoomArr = map.get("registerOnZoom") || []

      registerOnZoomArr.push(registerOnZoom);
      registerOnZoomArr.push(registerOnZoom)

      // 使用地图 set 方法保存事件对象
      window.map.set('registerOnZoom', registerOnZoomArr);
      window.map.set("registerOnZoom", registerOnZoomArr)

      // 监听地图移动结束事件
      window.map.on('moveend', registerOnZoom);
      window.map.on("moveend", registerOnZoom)

      return eventListen;
      return eventListen
    },
    sdktool() {
      if (this.isSplitFlag != 1) return;
      var position = window.Viewer.camera.position;
      var ellipsoid = window.Viewer.scene.globe.ellipsoid;
      var cartographic = ellipsoid.cartesianToCartographic(position);
      var lat = Cesium.Math.toDegrees(cartographic.latitude);
      var lng = Cesium.Math.toDegrees(cartographic.longitude);
      var level = this.getLevel(cartographic.height);
      if (this.isSplitFlag != 1) return
      var position = window.Viewer.camera.position
      var ellipsoid = window.Viewer.scene.globe.ellipsoid
      var cartographic = ellipsoid.cartesianToCartographic(position)
      var lat = Cesium.Math.toDegrees(cartographic.latitude)
      var lng = Cesium.Math.toDegrees(cartographic.longitude)
      var level = this.getLevel(cartographic.height)
      var value
      // window.map
      //   .getView()
      //   .setCenter(transform([lng, lat], 'EPSG:4326', 'EPSG:3857'));
      window.map
        .getView()
        .setCenter([lng, lat]);
      window.map.getView().setZoom(level);
      window.map.getView().setCenter([lng, lat])
      window.map.getView().setZoom(level)
    },
    getLevel(height) {
      for (var i = 1, len = this.levelArray.length; i < len - 1; i++) {
        if (height >= (this.levelArray[i] + this.levelArray[i + 1]) / 2) {
          return i;
          return i
        }
      }
      return this.levelArray.length - 1;
      return this.levelArray.length - 1
    },
    getHeight(level) {
      if (level > 0 && level < 23) {
        return this.levelArray[level];
        return this.levelArray[level]
      }
      return this.levelArray[this.levelArray.length - 1];
      return this.levelArray[this.levelArray.length - 1]
    },
  },
  mounted() {
    this.$bus.$on('changemap', (e) => {
      this.changeMap(e);
    });
    this.$bus.$on("changemap", e => {
      this.changeMap(e)
    })
  },
};
}
</script>

<style scoped>

 src/components/chart/projectState.vue

@@ -1,169 +1,164 @@
<template>
    <div class="projectState" ref="chart"></div>
  <div class="projectState" ref="chart"></div>
</template>
  

<script>
import * as echarts from "echarts"
import { GetServicesVisitsCount } from "@/api/screen.js"
export default {
    data() {
        return {
            option: {},
  data() {
    return {
      option: {},
    }
  },
  mounted() {
    // const option = this.initData()
    this.initChart()
  },
  methods: {
    initChart() {
      // const res = await GetServicesVisitsCount()

      // console.log(res.result);

      // if (res.code == 200) {
      // }
      // let xAxis = []
      // let yAxis = []

      // res.result.forEach(item => {
      //     xAxis.push(item.type)
      //     yAxis.push(item.count)
      // })

      // let data = [220, 182, 191, 234, 290, 330, 310]
      // const sideData = data.map(item => {
      //   return {
      //     name: item.name,
      //     value: item.number,
      //   }
      // })

      var XName = ["立项", "启动", "建设", "完成"]
      var data1 = [
        [100, 100, 100, 100],
        [
          100,
          100,
          {
            value: 100,
            symbol:
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==",
            symbolSize: [50, 50],
          },
        ],
      ]
      var Line = ["线1", "线2"]
      var color = ["#256589", "#3F88E9"]

      //数据处理
      var datas = []
      Line.map((item, index) => {
        if (index == 0) {
          datas.push({
            symbolSize: 10,
            symbol: "circle",
            hoverAnimation: false,
            name: item,
            type: "line",
            data: data1[index],
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: color[index],
              },
            },
          })
        } else {
          datas.push({
            symbolSize: 10,
            symbol: "circle",
            hoverAnimation: false,
            name: item,
            type: "line",
            data: data1[index],
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: color[index],
              },
            },
          })
        }
    },
    mounted() {
        // const option = this.initData()
        this.initChart()
    },
    methods: {
         initChart() {
            // const res = await GetServicesVisitsCount()
      })

            // console.log(res.result);

            // if (res.code == 200) {
            // }
            // let xAxis = []
            // let yAxis = []

            // res.result.forEach(item => {
            //     xAxis.push(item.type)
            //     yAxis.push(item.count)
            // })

            // let data = [220, 182, 191, 234, 290, 330, 310]
            // const sideData = data.map(item => {
            //   return {
            //     name: item.name,
            //     value: item.number,
            //   }
            // })

            var XName = ["立项", "启动", "建设", "完成"]
            var data1 = [
                [100, 100, 100, 100],
                [100, 100, {
                    value: 100, symbol:
                        'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                    symbolSize: [50, 50],
                }]
            ]
            var Line = ["线1", "线2"];
            var color = ['#256589', '#3F88E9'];

            //数据处理
            var datas = [];
            Line.map((item, index) => {
                if (index == 0) {
                    datas.push(
                        {
                            symbolSize: 10,
                            symbol: 'circle',
                            hoverAnimation: false,
                            name: item,
                            type: "line",
                            data: data1[index],
                            itemStyle: {
                                normal: {
                                    borderWidth: 5,
                                    color: color[index],
                                }
                            }
                        }
                    )

                } else {
                    datas.push(
                        {
                            symbolSize: 10,
                            symbol: 'circle',
                            hoverAnimation: false,
                            name: item,
                            type: "line",
                            data: data1[index],
                            itemStyle: {
                                normal: {
                                    borderWidth: 5,
                                    color: color[index],
                                }
                            }
                        }
                    )

                }

            })

        let     option = {
                grid: {
                    left: '5%',
                    top: '30%',
                    bottom: '30%',
                    right: '5%',
                },
                yAxis: [
                    {
                        type: 'value',
                        position: 'right',
                        max: 100,
                        splitLine: {
                            show: false
                        }
                        ,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    }
                ],
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#6A989E',
                            }
                        },
                        axisLabel: {
                            inside: true,
                            show: true,
                            textStyle: {
                                color: '#90deff',// x轴颜色
                                fontWeight: 'normal',
                                fontSize: '12',
                                lineHeight: 20
                            }

                        },
                        data: XName,
                    }
                ],
                series: datas,
            };
            const chart = echarts.init(this.$refs.chart)

            chart.setOption(option)
            window.addEventListener("resize", function () {
                chart.resize()
            })
      let option = {
        grid: {
          left: "5%",
          top: "30%",
          bottom: "30%",
          right: "5%",
        },
        yAxis: [
          {
            type: "value",
            position: "right",
            max: 100,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#6A989E",
              },
            },
            axisLabel: {
              inside: true,
              show: true,
              textStyle: {
                color: "#90deff", // x轴颜色
                fontWeight: "normal",
                fontSize: "12",
                lineHeight: 20,
              },
            },
            data: XName,
          },
        ],
        series: datas,
      }
      const chart = echarts.init(this.$refs.chart)

      chart.setOption(option)
      window.addEventListener("resize", function () {
        chart.resize()
      })
    },
  },
}
</script>
  

<style lang="scss" scoped>
.projectState {
    width: 100%;
    height: calc(100% - 30px);
  width: 100%;
  height: calc(100% - 30px);
}
</style>
  

 src/views/Synthesis/index.vue

@@ -11,15 +11,8 @@
        class="MenuIcon"
        :class="{ lefMenuActive: showMenuFlag == item.id }"
      >
        <div
          class="menuDiv"
          :title="item.name"
          @click="setMenuChange(item)"
        >
          <div
            class="menuImage"
            :class="item.class"
          ></div>
        <div class="menuDiv" :title="item.name" @click="setMenuChange(item)">
          <div class="menuImage" :class="item.class"></div>
        </div>
      </div>
      <div
@@ -31,18 +24,12 @@
          :title="menuItem.name"
          @click="setMenuChange(menuItem)"
        >
          <div
            class="menuImage"
            :class="menuItem.class"
          ></div>
          <div class="menuImage" :class="menuItem.class"></div>
        </div>
      </div>
    </div>
    <div class="rightContent">
      <div
        class="left_main"
        :class="{ left_main_show: !openStatus }"
      >
      <div class="left_main" :class="{ left_main_show: !openStatus }">
        <div class="right_Map">
          <left-menu></left-menu>
        </div>
@@ -58,10 +45,10 @@
</template>

<script>
import { getPerms } from "../../api/api";
import mapdiv from "../../components/MapDiv.vue";
import leftMenu from "./LeftMenu.vue";
import maplayer from "../Tools/maplayer.vue";
import { getPerms } from "../../api/api"
import mapdiv from "../../components/MapDiv.vue"
import leftMenu from "./LeftMenu.vue"
import maplayer from "../Tools/maplayer.vue"
export default {
  components: {
    mapdiv,
@@ -143,7 +130,7 @@
        class: "menu_img1",
        show: true,
      },
    };
    }
  },
  watch: {},

@@ -151,28 +138,32 @@
    //左侧菜单滑动显隐
    setMenuChange(res) {
      if (res.id == this.showMenuFlag) {
        return;
        return
      }
      //清除查询弹窗
      this.$store.state.mapMenuBoolean = false;
      this.$store.state.mapMenuBoxFlag = "";
      this.$store.state.mapMenuBoolean = false
      this.$store.state.mapMenuBoxFlag = ""
      //清除分析模块的全局变量
      ClearAlayse();
      ClearAlayse()
      switch (res.id) {
        case 1:
          if (this.showMenuFlag == null) return;
          this.openStatus = !this.openStatus;
          break;
          if (this.showMenuFlag == null) return
          this.openStatus = !this.openStatus
          // 点击左侧菜单是调整
          setTimeout(() => {
            window.map.updateSize()
          }, 1000)
          break
        case 10:
          if (this.showMenuFlag == null) {
            this.openStatus = false;
            this.openStatus = false
          }
          this.$bus.$emit("setChangeTwoMenu", res.id - 2);
          break;
          this.$bus.$emit("setChangeTwoMenu", res.id - 2)
          break
        default: {
          this.openStatus = true;
          this.$bus.$emit("setChangeTwoMenu", res.id - 2);
          this.showMenuFlag = res.id;
          this.openStatus = true
          this.$bus.$emit("setChangeTwoMenu", res.id - 2)
          this.showMenuFlag = res.id
        }
      }
    },
@@ -182,63 +173,63 @@
        this.$store.state.currentPerms == "" ||
        this.$store.state.currentPerms != "/comprehensive"
      ) {
        this.$store.state.currentPerms = "/comprehensive";
        this.$store.state.currentPerms = "/comprehensive"
      }
      if (this.$store.state.permsEntity.length == 0) {
        const data = await getPerms();
        this.$store.state.permsEntity = data.result;
        const data = await getPerms()
        this.$store.state.permsEntity = data.result
      }
      var val = this.$store.state.currentPerms;
      var permsEntity = this.$store.state.permsEntity;
      var val = this.$store.state.currentPerms
      var permsEntity = this.$store.state.permsEntity

      for (var i = 0; i < permsEntity.length; i++) {
        if (permsEntity[i].perms == val) {
          this.showMenuChange(permsEntity[i], permsEntity);
          this.showMenuChange(permsEntity[i], permsEntity)
        }
      }
      for (var i in this.menuOption) {
        if (this.menuOption[i].show != false) {
          this.showMenuList.push(this.menuOption[i]);
          this.showMenuList.push(this.menuOption[i])
        }
      }
      //初始化二级菜单
      if (this.showMenuList.length > 1) {
        var index = this.showMenuList[1].id;
        this.$bus.$emit("setChangeTwoMenu", index - 2);
        var index = this.showMenuList[1].id
        this.$bus.$emit("setChangeTwoMenu", index - 2)
      }
    },
    showMenuChange(res, result) {
      var permsId = res.id;
      this.$store.state.syntiesis.menu = res.id;
      var permsId = res.id
      this.$store.state.syntiesis.menu = res.id
      for (var i = 0; i < result.length; i++) {
        if (result[i].pid == permsId) {
          this.showMenuStatus(result[i]);
          this.showMenuStatus(result[i])
        }
      }
    },
    showMenuStatus(res) {
      var std = [];
      std.push(this.menuOption[0]);
      var std = []
      std.push(this.menuOption[0])
      for (var i = 1; i < this.menuOption.length; i++) {
        if (this.menuOption[i].name == res.cnName) {
          this.menuOption[i].show = true;
          this.menuOption[i].show = true
        }
      }
    },
  },
  mounted() {
    // this.$bus.$emit('showLeftMenu', true);
    window.sgworld.navControl("nav", true);
    this.$store.state.mapMenuBoolean = false;
    this.$store.state.mapMenuBoxFlag = null;
    this.$store.state.mapPopBoolean = false;
    this.$store.state.mapPopBoxFlag = null;
    window.sgworld.navControl("nav", true)
    this.$store.state.mapMenuBoolean = false
    this.$store.state.mapMenuBoxFlag = null
    this.$store.state.mapPopBoolean = false
    this.$store.state.mapPopBoxFlag = null
  },
  //初始化菜单授权
  created() {
    this.getPermsMenu();
    this.getPermsMenu()
  },
};
}
</script>

<style lang="less" scoped>