军事标绘，通信方案

surprise

2024-04-19 ea7ecb570dff4f055e73f7b36a79e21cf6e6da42

 src/components/props/situationComparison7-9.vue

@@ -10,7 +10,50 @@
            @click="close">x</span>
    </div>
    <div class="content">
      <div class="plotTitle"> 二维标绘</div>
      <div class="layerTreeContainer">
        <el-tree class="tree-nr"
                 ref="tree-menu"
                 :data="treeMenuData"
                 node-key="path"
                 accordion
                 :expand-on-click-node="false"
                 :auto-expand-parent="false"
                 @node-click="handleNodeClick">
          <span class="custom-tree-node"
                :class="data.children ? 'has-child' : ''"
                slot-scope="{ data }">
            <span>
              <span>{{ data.label
                  }}{{
                    data.children && data.children.length > 0
                      ? `(${data.children.length})`
                      : ""
                  }}</span>
            </span>
          </span>
        </el-tree>
      </div>

      <div class="gradeContainer"
           v-if="currentGradeList.length > 0">
        <div class="grade-item"
             v-for="el in currentGradeList"
             :key="el.label"
             @click="CreateImageBillboard(el)">
          <div class="g-img">
            <img :src="el.image"
                 alt="" />
          </div>
          <div class="g-title">
            <el-tooltip effect="dark"
                        :content="el.label"
                        placement="bottom">
              <span>{{ showGradeCode ? el.code || el.label : el.label }}</span>
            </el-tooltip>
          </div>
        </div>
      </div>
      <!-- <div class="plotTitle"> 二维标绘</div>
      <div class="menuContent">
        <div class="menuItem"
             @click="setMenuClick(item)"
@@ -18,9 +61,9 @@
             :key="index">
          {{ item.name}}
        </div>
      </div>
      </div> -->

      <div class="plotTitle"> 三维标绘</div>
      <!-- <div class="plotTitle"> 三维标绘</div>
      <div class="menuContent">
        <div class="menuItem"
             @click="setMenuClick(item)"
@@ -28,14 +71,14 @@
             :key="index">
          {{ item.name}}
        </div>
      </div>
      <div class="plotTitle"> </div>
      </div> -->
      <!-- <div class="plotTitle"> </div>
      <div class="menuContent">
        <div class="menuItem"
             @click="setMenuClick1()">
          清除绘制
        </div>
      </div>
      </div> -->
    </div>
  </div>
</template>
@@ -139,6 +182,9 @@
      showdata1: true,
      showdata2: true,
      showsituation: false,
      treeMenuData: [],
      currentGradeList: [],
      showGradeCode: false,
    };
  },
  mounted () {
@@ -159,9 +205,46 @@
      this.showdata1=true;
      this.showdata2=true;
    });
    axios("static/json/jb.json").then((res) => {

      this.treeMenuData=this.handleJBData(res.data.children);

    });
  },
  methods: {
    handleNodeClick (item) {
      if(item.children2&&item.children2.length>0) {
        let currentGradeList=[];
        item.children2.forEach((d) => {
          if(d.type=="file") {
            let codeName=d.data.codeName? d.data.codeName.substring(0,d.data.codeName.lastIndexOf("-")):"";
            currentGradeList.push({
              ...d,
              image: SmartEarthRootUrl+`Workers/image/${d.path.replace(/\\/g,"/")}`,
              name: d.label,
              code: codeName,
            });
          }
        });
        this.currentGradeList=currentGradeList;
        console.log("*****this.currentGradeList",this.currentGradeList);
      }
    },
    handleJBData (data) {
      data.forEach(el => {
        if(el.children&&el.children.length>0) {
          if(el.children[0].type==='file') {

            el.children2=el.children

            delete el.children
          } else {
            el.children=this.handleJBData(el.children)
          }
        }
      });
      return data
    },
    change () {
      this.showdata1=false;
    },
@@ -184,7 +267,94 @@
        });
      }

    },
    CreateImageBillboard (item) {
      const svgstring=
        "PHN2ZyB3aWR0aD0iNDYwIiBoZWlnaHQ9IjQwOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRlc2M9IkNyZWF0ZWQgd2l0aCBpbWFnZXRyYWNlci5qcyB2ZXJzaW9uIDEuMi41IiA+PHBhdGggZmlsbD0icmdiKDAsMCwwKSIgc3Ryb2tlPSJyZ2IoMCwwLDApIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9IjEiIGQ9Ik0gMTAyIDM2IEwgMTI2IDU2IEwgMTM4IDQ4IEwgMjMwIDEzNiBMIDMzNCAzNiBRIDM0NiA2MCAzNTggMzYgTCA0MDggODYgTCAzODYgMTEyIEwgMzQyIDY4IEwgMjUyIDE1OCBMIDQzMiAzNDYgTCA0MTAgMzY0IEwgMjI2IDE4NCBMIDQ2IDM2MCBMIDI4IDMzOCBMIDIwNCAxNTggTCAxMTQgNjggTCA3NCAxMDggTCA1MiA5MCBMIDEwMiAzNiBaICIgLz48L3N2Zz4=";

      // const svgstring =
      //    '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';

      const decodedString=atob(svgstring);
      const svgBinaryString=decodedString;

      const dataURI=`data:image/svg+xml;base64,${btoa(svgBinaryString)}`;
      //const dataURI = `data:image/png;base64,${btoa(svgBinaryString)}`;
      const svgImage=dataURI;
      if(item.func) {
        // if (item.func == 'Bezierline' || item.func == 'BezierArrow') {
        //    sgworld.Creator.militaryPlotting(item.func, entity => {});
        // } else
        if(item.func==="Polyline") {
          sgworld.Creator.createSimpleGraphic(
            "polyline",
            { name: item.code+"_"+item.name,showSize: true },
            (entity) => {
              if(!entity) return;
              entity.name=item.code+"_"+item.name;
              this.addSimpleGraphicTotree(entity);
    }
          );
        } else if(item.func==="Polyline2") {
          sgworld.Creator.createSimpleGraphic(
            "polyline",
            { showSize: true },
            (entity) => {
              if(!entity) return;
              entity.name=item.code+"_"+item.name;
              this.addSimpleGraphicTotree(entity);
            }
          );
        } else if(
          item.func==="Point"||
          item.func==="Polygon"||
          item.func==="Rectangle"||
          item.func==="Circle"||
          item.func==="Label"||
          item.func==="Billboard"
        ) {
          sgworld.Creator.createSimpleGraphic(item.func.toLowerCase(),{},(entity) => {
            if(!entity) return;
            entity.name=item.code+"_"+item.name;
            this.addSimpleGraphicTotree(entity);
          });
        } else if(item.func==="Model") {
          sgworld.Creator.createSimpleGraphic(
            "model",
            {
              url: SmartEarthRootUrl+`Workers/images/${item.model.replace(/\\/g,"/")}`,
              name: item.label,
              removeEdit: false,
            },
            (entity) => {
              this.addSimpleGraphicTotree(entity);
            }
          );
        } else {
          sgworld.Creator.militaryPlotting(item.func,"polygon",(entity) => {
            if(!entity) return;
            entity.name=item.code+"_"+item.name;
            this.addArmyLabelTotree(entity);
          });
        }
      } else {
        sgworld.Creator.createSimpleGraphic(
          "billboard",
          { name: item.code+"_"+item.name },
          (entity) => {
            if(!entity) return;
            entity.name=item.code+"_"+item.name;
            entity.billboard.width._value=44;
            entity.billboard.height._value=44;
            // entity.billboard.image._value = SmartEarthRootUrl + `Workers/newPic/${item.name}.png`;
            entity.billboard.image._value=item.image;
            // entity.billboard.image._value = svgImage;

            this.addSimpleGraphicTotree(entity);
          }
        );
      }
    },
  },
  watch: {

@@ -195,13 +365,13 @@
<style scoped>
.bot {
  width: 1000px;
  height: 1150px;
  height: 1750px;
  background: url(~@/assets/image/test/22.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 3920px;
  top: 680px;
  top: 400px;
}
.top1 {
  width: 95%;
@@ -293,4 +463,117 @@
  transform: scale(1.1);
  color: #494949;
}
.layerTreeContainer .el-tree {
  background: transparent;
  font-size: 30px;
  color: white;
  height: 500px;
  overflow: auto;
}

.layerTreeContainer .el-tree /deep/ .el-tree-node__content {
  background-color: transparent !important;
  height: auto !important;
}

.layerTreeContainer .el-tree /deep/ .el-tree-node__content:hover {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

.layerTreeContainer .el-tree /deep/ .is-current > .el-tree-node__content {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

.layerTreeContainer
  .el-tree
  /deep/
  .is-indeterminate
  .el-checkbox__inner:before {
  top: 10px;
  height: 19px;
  width: 40px;
}
.layerTreeContainer .el-tree /deep/ .el-tree-node__expand-icon {
  font-size: 40px;
}
.layerTreeContainer .el-tree /deep/ .el-checkbox .el-checkbox__inner {
  width: 40px;
  height: 40px;
}
.layerTreeContainer
  .el-tree
  /deep/
  .el-checkbox__input.is-checked
  .el-checkbox__inner:after {
  border: 7px solid #fff;
  border-left: 0;
  border-top: 0;
  height: 23px;
  left: 11px;
  position: absolute;
  top: 5px;
  width: 10px;
}

.layerTreeContainer
  .el-tree
  /deep/
  .el-checkbox__input
  .is-checked
  .el-checkbox__inner {
  background-color: #409eff;
}

.layerTreeContainer
  .el-tree
  /deep/
  .el-checkbox__input.is-checked
  .el-checkbox__inner {
  border-color: #409eff;
}
.gradeContainer {
  margin-top: 20px;
  width: 100%;
  height: 66%;
  overflow: auto;

  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  color: #fff;
  text-align: center;
  font-size: 11px;
}
.grade-item {
  display: flex;
  flex-direction: column;
  width: 25%;
  margin-bottom: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.g-title {
  width: 100%;
  line-height: 40px;
  font-size: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #a9eeff;
}

.g-img {
  width: 100px;
  height: 100px;
  background-image: url(~@/assets/image/subject/itemBg.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.g-img img {
  width: 90%;
  height: 90%;
}
</style>