军事标绘，通信方案

surprise

2024-04-19 ea7ecb570dff4f055e73f7b36a79e21cf6e6da42

 src/components/props/situationComparison7-9.vue

@@ -4,124 +4,187 @@
    <div class="top1">
      <span class="botcon">
        <span class="icon"></span>
        <span class="text">态势标绘</span>
        <span class="text">军标标绘</span>
      </span>
      <span class="close"
            @click="close">x</span>
    </div>
    <div class="next">
      <el-form ref="form"
               :model="form"
               label-width="240px">
        <el-form-item label="区域:">
          <el-select v-model="form.points"
                     @change="changeplase">
            <el-option v-for="(item, index) in regions"
                       :key="index"
                       :label="item.vname"
                       :value="{ value: item.vlatlngs, label: item.vname }">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始时间:">
          <el-date-picker v-model="form.startTime"
                          value-format="yyyyMMdd"
                          :picker-options="pickerOptions"
                          format="yyyy-MM-dd"
                          type="date"
                          placeholder="选择日期"
                          @change="change">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间:">
          <el-date-picker v-model="form.endTime"
                          value-format="yyyyMMdd"
                          :picker-options="pickerOptions"
                          format="yyyy-MM-dd"
                          type="date"
                          placeholder="选择日期"
                          @change="change1">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="分析类型:">
          <el-select v-model="form.analysisType">
            <el-option label="频点"
                       value="1"></el-option>
            <el-option label="频段"
                       value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="无线电业务:">
          <el-select v-model="form.radio"
                     @change="choose">
            <el-option v-for="item in radios"
                       :key="item.value"
                       :label="item.bussName"
                       :value="item.startFreq + '-' + item.endFreq">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="btns">
        <span @click="reset">重置</span>
        <span @click="analysis">分析</span>
    <div class="content">
      <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)"
             v-for="(item,index) in Option"
             :key="index">
          {{ item.name}}
        </div>
      </div> -->

      <!-- <div class="plotTitle"> 三维标绘</div>
      <div class="menuContent">
        <div class="menuItem"
             @click="setMenuClick(item)"
             v-for="(item,index) in Option1"
             :key="index">
          {{ item.name}}
        </div>
      </div> -->
      <!-- <div class="plotTitle"> </div>
      <div class="menuContent">
        <div class="menuItem"
             @click="setMenuClick1()">
          清除绘制
        </div>
      </div> -->
    </div>
    <div class="showpic"
         v-if="showpic">
      <div :style="innerbac"
           @click="openDia"></div>
    </div>
    <changePic @colordata="getdata" />
  </div>
</template>

<script>
import { createPic,freqBandAnalysis,showCQ } from "../../api/http";
import changePic from "../common/color.vue";

import bus from "../../utils/bus";
import axios from "axios";

let hander,divPoint3;
let Base64=require("js-base64").Base64;


export default {
  components: {
    changePic,

  },
  data () {
    return {
      form: {
        points: "",
        startTime: new Date("2016-06-01"),
        endTime: new Date("2016-06-30"),
        radio: "调频广播",
        freqStart: "87",
        freqEnd: "108",
        analysisType: "频点",
      },
      nowfile: "",
      showsituation: false,
      imageid: null,
      showpic: false,
      pickerOptions: {},
      chooseplase: "",
      options: [],
      regions: [],
      radios: [],
      colorContainer: {},
      innerbac: {
        width: "30%",
        height: "70%",
        border: "1px solid #000",
        transform: "translate(40px,90px)",
        backgroundImage:
          "url("+require("@/assets/image/botbtn/color.png")+")",
        backgroundPosition: "center",
        backgroundSize: ` 100% 100%`,
      },
      Option: [
        {
          name: '粗直箭头',
          type: 'StraightArrow',
          value: 'polygon',
        },
        {
          name: '燕尾直箭头',
          type: 'SwallowtailArrow',
          value: 'polygon',
        },{
          name: '钳击箭头',
          type: 'PincerArrow',
          value: 'polygon',
        },{
          name: '集结地',
          type: 'GatheringPlace',
          value: 'polygon',
        },{
          name: '圆角矩形',
          type: 'RoundedRectangle',
          value: 'polygon',
        },
        {
          name: '扇形',
          type: 'Sector',
          value: 'polygon',
        },{
          name: '弓形',
          type: 'Bow',
          value: 'polygon',
        },{
          name: '攻击箭头',
          type: 'AttackArrow',
          value: 'polygon',
        },{
          name: '贝塞尔曲线',
          type: 'Bezierline',

        },{
          name: '贝塞尔箭头',
          type: 'BezierArrow',

        }

      ],
      Option1: [
        {
          name: '粗直箭头',
          type: 'StraightArrow',
          value: 'box',
        },
        {
          name: '燕尾直箭头',
          type: 'SwallowtailArrow',
          value: 'box',
        },{
          name: '钳击箭头',
          type: 'PincerArrow',
          value: 'box',
        },{
          name: '集结地',
          type: 'GatheringPlace',
          value: 'box',
        },{
          name: '圆角矩形',
          type: 'RoundedRectangle',
          value: 'box',
        },
        {
          name: '扇形',
          type: 'Sector',
          value: 'box',
        },{
          name: '弓形',
          type: 'Bow',
          value: 'box',
        },{
          name: '攻击箭头',
          type: 'AttackArrow',
          value: 'box',
        }
      ],
      showdata1: true,
      showdata2: true,
      showDianci: false,
      showsituation: false,
      treeMenuData: [],
      currentGradeList: [],
      showGradeCode: false,
    };
  },
  mounted () {
@@ -132,53 +195,55 @@
      this.radios=e;
    });
    bus.$on("guanzhou",(e) => {
      this.form.startTime=e.fromdate;
      this.form.endTime=e.todate;

    });
    bus.$on("areaData",(e) => {
      this.regions=e;
    });
    bus.$on("showdio",(e) => {
      this.showsituation=e=="7-9"
      this.showsituation=e=="7-9-1"
      this.showdata1=true;
      this.showdata2=true;
    });
    axios("static/json/jb.json").then((res) => {

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

    });
  },
  methods: {
    changeplase (value) {
      if(value.label.indexOf("广州")>-1) {
        this.chooseplase="广州";
        this.form.startTime=new Date("2019-10-08");
        this.form.endTime=new Date("2019-10-16");
        window.Viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(
            113.29503528791071,
            23.104708355136264,
            4109.8492337442767
          ),
          orientation: {
            heading: 0.8349372341578318,
            pitch: -0.85222154573481174,
            roll: 0,
          },
    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,
            });
          }
        });
      } else {
        this.chooseplase="上海";
        this.form.startTime=new Date("2016-06-01");
        this.form.endTime=new Date("2016-06-30");
        window.Viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(
            121.23142475566037,
            30.314431916707203,
            101204.78027978493
          ),
          orientation: {
            heading: 0.149372341578318,
            pitch: -0.8022154573481174,
            roll: 0,
          },
        });
        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;
@@ -186,196 +251,113 @@
    change1 () {
      this.showdata2=false;
    },
    openDia () {
      bus.$emit("changeColor",true);
    },
    choose (value) {
      let arr=value.split("-");
      this.form.freqStart=arr[0];
      this.form.freqEnd=arr[1];
    },

    close () {
      this.showsituation=false;
    },
    getdata (data) {
      this.colorContainer=data;
    setMenuClick1 () {
      sgworld.Creator.ClearMilitaryStandard();
    },
    // 点击获得态势
    getTaishi () {
      if(hander) {
        return;
      }
      hander=new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
      let pickFeature;
      // 鼠标点击事件
      hander.setInputAction((event) => {
        // 拾取对象
        divPoint3&&divPoint3.deleteObject();
        let clickPosition=viewer.scene.camera.pickEllipsoid(event.position);
        // 转经纬度（弧度）坐标
        let radiansPos=Cesium.Cartographic.fromCartesian(clickPosition);
        let lon=Cesium.Math.toDegrees(radiansPos.longitude);
        let lat=Cesium.Math.toDegrees(radiansPos.latitude);
        let filename=this.nowfile;
        let obj={
          lat: lat,
          lng: lon,
          analysisAction: "-1",
          analysisType: "1",
          filename: filename,
        };
        showCQ(obj).then((res) => {
          let data=res.data;
          if(data!="无数据") {
            divPoint3=sgworld.Creator.createDivPoint(
              "合肥",
              { lon: obj.lng,lat: obj.lat },
              {
                type: "custom",
                offset: ["c",60],
                description: `
              <div class="divPoint-custom">
                <p>${data}</p>
              </div>
              `,
                near: 0,
                far: 100000,
              }
            );
          }
    setMenuClick (res) {
      if(res.value) {
        sgworld.Creator.militaryPlotting(res.type,res.value,(entity) => {
        });
        //把你拾取的东西打印出来看看什么值可以用作判断
      },Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    analysis () {
      this.reset();
      let that=this;
      if(that.imageid) {
        window.Viewer.entities.removeById(that.imageid);
        that.imageid=null;
      }
      let data={
        colorName: "-100,0000FF;120,FF0000",
        startTime: "20160601000000",
        endTime: 20160630000000,
        freqStart: 87000000,
        freqEnd: 108000000,
        freqPoint: 87000000,
        points:
          "[[30.5504351,120.5667114],[32.0499889,120.5667114],[32.0499889,122.4453735],[30.5504351,122.4453735]]",
        radius: 0,
        analysisAction: "3",
        analysisType: 1,
      };
      data={ ...data,...this.form };
      data.freqStart=data.freqStart*1000000;
      data.freqEnd=data.freqEnd*1000000;
      data.startTime=data.startTime+"000000";
      data.endTime=data.endTime*1000000;
      data.analysisType=="频点"? (data.analysisType=1):"";
      delete data.radio;
      if(this.showdata1) {
        data.startTime=20160601000000;
        this.chooseplase&&this.chooseplase=="上海"
          ? (data.startTime=20160601000000)
          :(data.startTime=20191008000000);
      }
      if(this.showdata2) {
        data.endTime=20160630000000;
        this.chooseplase&&this.chooseplase=="上海"
          ? (data.endTime=20160630000000)
          :(data.endTime=20191016000000);
      }
      const loading=that.$loading({
        lock: true,
        text: "计算中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      data.points=data.points.value;
      freqBandAnalysis(data)
        .then((res) => {
          if(res.message==="Success") {
            let points=res.data.imgBounds;
            that.nowfile=Base64.encode(res.data.url)
            var data1={
              colorSchemes: 1,
              file: Base64.encode(res.data.url),
              maxColor: "FF0000",
              maxValue: 100,
              minColor: "0000FF",
              minValue: 0,
              showBounds: this.form.points.value,
            };
            data1={ ...data1,...this.colorContainer };
            createPic(data1)
              .then((res2) => {
                let rectangle=sgworld.Creator.addSimpleGraphic("rectangle",{
                  removeEdit: true,
                  coordinates: Cesium.Rectangle.fromDegrees(
                    points.xmin,
                    points.ymin,
                    points.xmax,
                    points.ymax
                  ),
                  color: "rgba(255,255,255,0.5)",
                  image:
                    "http://221.224.53.36:9081/calc/picurl?file="+
                    Base64.encode(res2.data),
                });
                that.showDianci=true;
                // 图片获取成功  开启拾取
                that.getTaishi();
                if(that.imageid) {
                  window.Viewer.entities.removeById(that.imageid);
                  that.imageid=null;
                }
                that.imageid=rectangle.id;

                loading.close();
                that.$message({
                  message: "计算成功",
                  type: "success",
                });
                that.showpic=true;
              })
              .catch((error) => {
                loading.close();
              });
          }
        })
        .catch((error) => {
          loading.close();
      } else {
        sgworld.Creator.militaryPlotting(res.type,(entity) => {
        });
    },
    reset () {
      //重置
      if(this.imageid) {
        window.Viewer.entities.removeById(this.imageid);
        hander&&
          hander.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
        hander=null;
        divPoint3&&divPoint3.deleteObject();
      }

        this.imageid=null;
        this.showDianci=false;
    },
    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: {
    colorContainer: {
      deep: true,
      handler (data) {
        let colornow={
          width: "30%",
          height: "70%",
          border: "1px solid #000",
          transform: "translate(40px,90px)",
          backgroundImage: `linear-gradient(${data.maxColor},${data.minColor})`,
        };
        this.innerbac=colornow;
      },
    },

  },
};
</script>
@@ -383,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%;
@@ -428,34 +410,7 @@
  transition: color 1s;
  cursor: pointer;
}
.next {
  width: 89%;
  height: 79%;
  margin: 100px auto;
}
.next >>> .el-select {
  width: 95% !important;
}
.next >>> .el-form-item {
  margin-top: 60px;
}
.next >>> .el-input {
  width: 84%;
}
.next >>> .el-date-editor {
  width: 515px;
}
.next >>> .el-form-item__label {
  color: #fff;
  font-size: 40px;
}
.next >>> .el-input__inner {
  font-size: 30px;
}
.next >>> .el-form-item__error {
  font-size: 30px;
  font-weight: 700;
}

.botcon {
  display: inline-block;
  margin-top: 34px;
@@ -467,17 +422,7 @@
  display: flex;
  justify-content: center;
}
.btns > span {
  display: block;
  width: 200px;
  height: 70px;
  border: 1px solid #000;
  text-align: center;
  font-size: 35px;
  margin: 0 50px;
  line-height: 70px;
  cursor: pointer;
}

.btns > span:nth-child(3) {
  color: #fff;
  background-image: linear-gradient(#76c2f6, #6a9cf1);
@@ -486,14 +431,149 @@
  color: #000;
  background: #cadaea;
}
.showpic {
  width: 260px;
  height: 400px;
  background: url(~@/assets/image/botbtn/bac.png);
.content {
  width: 92%;
  height: 80%;
  position: relative;
  margin: 3% 4%;
}
.plotTitle {
  width: 100%;
  color: #fff;
  font-size: 40px;
}
.menuContent {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
  font-size: 32px;
  margin: 10px 0px;
  cursor: pointer;
}
.menuItem {
  margin: 10px 40px;
  min-width: 150px;
  background: rgb(135, 206, 235, 0.6);
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
}
.menuItem:hover {
  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%;
  position: absolute;
  top: 1200px;
  right: 0px;
  background-repeat: no-repeat;
}
.g-img img {
  width: 90%;
  height: 90%;
}
</style>