综合展示，系统管理，授权管理，专题图，资料馆添加权限配置

Surpriseplus

2022-10-26 62ae55ae397b7997b147a7b946f7ad5f1c78a45d

 src/views/Synthesis/measurement.vue

@@ -2,55 +2,263 @@
  <div class="box">
    <ul>
      <li
        style="width: 86px"
        style="margin-left: 20px"
        @click="changeMeasure(item)"
        v-for="item in itemsOne"
      >
        <div class="divli">
          <div :class="item.class" class="backimge1"></div>
          <div :class="item.class" class="backimge7"></div>
        </div>
        <div class="div_li">{{ item.name }}</div>
        <div class="div_li">{{ $t(item.name) }}</div>
      </li>
    </ul>
    <mapinfo ref="mapinfo" />
  </div>
</template>

<script>
// 测量-信息弹窗
import mapinfo from '../Tools/mapinfo.vue';
export default {
  components: { mapinfo },
  data() {
    return {
      colorAll: {},
      measureData: null,
      itemsOne: [
        {
          id: "1",
          name: "距离测量",
          class: "g1",
          id: '1',
          name: 'synthesis.synthobj.m1',
          class: 'g1',
        },
        {
          id: "2",
          name: "高程测量",
          class: "g2",
          id: '2',
          name: 'synthesis.synthobj.m2',
          class: 'g2',
        },
        {
          id: "3",
          name: "面积测量",
          class: "g3",
          id: '3',
          name: 'synthesis.synthobj.m3',
          class: 'g3',
        },
        {
          id: "4",
          name: "体积测量",
          class: "g4",
          id: '4',
          name: 'synthesis.synthobj.m4',
          class: 'g4',
        },
        {
          id: '5',
          name: 'synthesis.synthobj.m5',
          class: 'g1',
        },
        {
          id: '6',
          name: 'synthesis.synthobj.m6',
          class: 'g2',
        },
        {
          id: '7',
          name: 'synthesis.synthobj.m7',
          class: 'g3',
        },
        {
          id: '8',
          name: 'synthesis.synthobj.m8',
          class: 'g4',
        },
      ],
    };
  },
  created() {
    var cover_Id = this.$store.state.syntiesis.menu;
    var cover_perms = this.$store.state.permsEntity;

    for (var i = 0; i < cover_perms.length; i++) {
      if (cover_perms[i].pid == cover_Id) {
        this.showViewMenu(cover_perms[i]);
      }
    }
  },
  methods: {
    changeMeasure(res) {
      var res_val = {
        url: "",
        name: res.name,
      };
      this.$bus.$emit("changetool", res_val);
    showViewMenu(res) {
      if (res.cnName != '测量') return;
      console.log('测量', res.tag);
    },
    clearMeasure(id) {
      if (id) {
        let data = this.measureData.get(id);
        data && data.deleteObject && data.deleteObject();
        // 体积方量
        data && data.cleanUp && data.cleanUp();
        this.measureData.delete(id);
      } else {
        this.measureData.forEach((data) => {
          data.deleteObject && data.deleteObject();
          // 体积方量
          data.cleanUp && data.cleanUp();
        });
        this.measureData.clear();
      }
    },
    changeMeasure(res) {
      switch (res.id) {
        case '1':
          var measure = window.sgworld.Command.execute(
            0,
            2,
            this.colorAll,
            (data) => {
              data.id = window.sgworld.Core.getuid();
              this.measureData.set(data.id, measure);
              this.openMeasureResultInfo('水平距离', data);
            }
          );
          break;
        case '2':
          var measure = window.sgworld.Command.execute(
            0,
            10,
            this.colorAll,
            (data) => {
              data.id = window.sgworld.Core.getuid();
              this.measureData.set(data.id, measure);
              this.openMeasureResultInfo('空间距离', data);
            }
          );
          break;
        case '3':
          var measure = window.sgworld.Command.execute(
            1,
            11,
            this.colorAll,
            (data) => {
              data.id = window.sgworld.Core.getuid();
              this.measureData.set(data.id, measure);
              this.openMeasureResultInfo('海拔高度', data);
            }
          );
          break;
        case '4':
          var measure = window.sgworld.Command.execute(
            0,
            5,
            this.colorAll,
            (data) => {
              data.id = window.sgworld.Core.getuid();
              this.measureData.set(data.id, measure);
              this.openMeasureResultInfo('垂直高度', data);
            }
          );
          break;
        case '5':
          var measure = window.sgworld.Command.execute(
            0,
            8,
            {
              ...this.colorAll,
              tin: true, // 是否显示tin三角网
              onlyTerrain: false, // 是否只测量精细地形
            },
            (data) => {
              data.id = window.sgworld.Core.getuid();
              this.measureData.set(data.id, measure);
              this.openMeasureResultInfo('表面面积', data);
            }
          );
          break;
        case '6':
          var measure = window.sgworld.Command.execute(
            0,
            3,
            this.colorAll,
            (data) => {
              data.id = window.sgworld.Core.getuid();
              this.measureData.set(data.id, measure);
              this.openMeasureResultInfo('平面面积', data);
            }
          );
          break;
        case '7':
          var volumetricMeasurementTool =
            window.sgworld.Creator.createVolumetricMeasureTool();
          volumetricMeasurementTool.startDrawing(
            { ...this.colorAll, onlyTerrain: false },
            'auto',
            (data) => {
              if (volumetricMeasurementTool.popupData) {
                volumetricMeasurementTool.popupData.value = `填方：${
                  data.volume.fill.toFixed(4) + data.unit.fill
                }<br>挖方：${data.volume.dig.toFixed(4) + data.unit.dig}`;
              } else {
                data.id = window.sgworld.Core.getuid();
                this.measureData.set(data.id, volumetricMeasurementTool);
                let popupData = this.openMeasureResultInfo('体积方量', data);
                volumetricMeasurementTool.popupData = popupData;
              }
            }
          );
          break;
        case '8':
          var measure = window.sgworld.Command.execute(
            0,
            12,
            this.colorAll,
            (data) => {
              data.id = window.sgworld.Core.getuid();
              this.measureData.set(data.id, measure);
              this.openMeasureResultInfo('角度', data);
            }
          );
          break;
      }
    },
    openMeasureResultInfo(name, data) {
      let info = '';
      switch (name) {
        case '水平距离':
        case '空间距离':
          info = '总长度：' + data.distance[data.distance.length - 1];
          break;
        case '海拔高度':
          info = '海拔：' + data.height;
          break;
        case '垂直高度':
          info = `${data.gddistance}<br>${data.kjdistance}<br>${data.spdistance}`;
          break;
        case '表面面积':
        case '平面面积':
          info = data.mj;
          break;
        case '角度':
          data.labels.forEach((label) => {
            info += label.label.text.getValue() + '<br>';
          });
          break;
        case '体积方量':
          info = `填方：${
            data.volume.fill.toFixed(4) + data.unit.fill
          }<br>挖方：${data.volume.dig.toFixed(4) + data.unit.dig}`;
          break;
      }
      return (
        this.$refs &&
        this.$refs.mapinfo &&
        this.$refs.mapinfo.open(name, info, {
          close: () => {
            // 清除测量
            this.clearMeasure(data.id);
          },
        })
      );
    },
  },
  mounted() {
    this.measureData = new Map();
    this.colorAll = {
      point: Cesium.Color.fromCssColorString('#ff0000'),
      polyline: Cesium.Color.fromCssColorString('#ffff00').withAlpha(0.6),
      polygon: Cesium.Color.fromCssColorString('#ffff00').withAlpha(0.6),
    };
  },
};
</script>
@@ -75,26 +283,26 @@
  margin: 0px;
}
.g1 {
  background: url("../../assets/img/synthesis/图层 31.png") no-repeat center;
  background: url('../../assets/img/synthesis/图层 31.png') no-repeat center;
}
.g2 {
  background: url("../../assets/img/synthesis/图层 31 拷贝.png") no-repeat
  background: url('../../assets/img/synthesis/图层 31 拷贝.png') no-repeat
    center;
}
.g3 {
  background: url("../../assets/img/synthesis/矩形 13 拷贝.png") no-repeat
  background: url('../../assets/img/synthesis/矩形 13 拷贝.png') no-repeat
    center;
}
.g4 {
  background: url("../../assets/img/synthesis/图层 18 拷贝.png") no-repeat
  background: url('../../assets/img/synthesis/图层 18 拷贝.png') no-repeat
    center;
}
.backimge1 {
.backimge7 {
  width: 30px;
  height: 30px;
  margin-left: 25px;
  position: absolute;
  background-size: 100% 100%;
  margin: 0% 30%;
}
.divli {
  width: 100%;