页面添加

surprise

2024-04-18 99018c2dc6b79e284e85bedec64adce143d74424

页面添加

 index.html

@@ -11,9 +11,9 @@
      background-color: transparent !important;
    }

    .te-right {
    /* .te-right {
      height: auto !important;
    }
    } */

  </style>
</head>

 src/components/props/densityAnalysis.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,499 @@
<template>
  <div class="bot"
       v-if="showsituation">
    <div class="top1">
      <span class="botcon">
        <span class="icon"></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>
    </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%`,
      },
      showdata1: true,
      showdata2: true,
      showDianci: false,
    };
  },
  mounted () {
    bus.$on("clearEve",(e) => {
      this.reset();
    });
    bus.$on("radioData",(e) => {
      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==9;
      this.showdata1=true;
      this.showdata2=true;
    });
  },
  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,
          },
        });
      } 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,
          },
        });
      }
    },
    change () {
      this.showdata1=false;
    },
    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;
    },
    // ç‚¹å‡»èŽ·å¾—态势
    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,
              }
            );
          }
        });
        //把你拾取的东西打印出来看看什么值可以用作判断
      },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();
        });
    },
    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;
      }
    },
  },
  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>

<style scoped>
.bot {
  width: 1000px;
  height: 1150px;
  background: url(~@/assets/image/test/22.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 3920px;
  top: 680px;
}
.top1 {
  width: 95%;
  height: 11%;
  font-size: 40px;
  font-weight: bold;
  margin: 0px auto;
  border-bottom: 2px solid #fff;
  color: #fff;
  letter-spacing: 3px;
}
.icon {
  position: absolute;
  left: 50px;
  width: 50px;
  height: 50px;
  top: 39px;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background: url(~@/assets/image/subject/题标.png);
}
.text {
  display: inline-block;
  margin-left: 90px;
}
.close {
  position: absolute;
  font-size: 60px;
  font-weight: 400;
  right: 60px;
  top: 20px;
}
.close:hover {
  color: red;
  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;
}
.btns {
  margin-top: 100px;
  width: 100%;
  height: 70px;
  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);
}
.btns > span:nth-child(-n + 2) {
  color: #000;
  background: #cadaea;
}
.showpic {
  width: 260px;
  height: 400px;
  background: url(~@/assets/image/botbtn/bac.png);
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  top: 1200px;
  right: 0px;
}
</style>

 src/components/props/militaryPlot.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,285 @@
<template>
  <div class="container"
       v-if="ishowtuli"
       id="moved2"
       @mousedown="moved">
    <div class="top">
      <span style="font-weight: bold">态势标绘</span>
      <span class="close"
            @click="showtuli">X</span>
    </div>
    <div class="boxMenu">
      <div class="menu">

        <div class="menuContent">
          <div class="menuItem"
               @click="setMenuClick(item)"
               v-for="(item,index) in Option"
               :key="index">
            <button>{{ item.name}}</button>
          </div>
        </div>

      </div>
      <!-- <div class="menu">
        <p>三维标绘</p>
        <div>
          <div v-for="(item,index) in Option1"
               :key="index">
          </div>
        </div>
      </div> -->

    </div>
  </div>
</template>
<script>
import bus from "../../utils/bus";
import { juhe } from "../../utils/work";
export default {
  data () {
    return {
      value: false,
      value1: true,
      value2: false,
      ishowtuli: false,
      scale: 2.13,
      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: 'Clear',
        }
      ],

    };

  },
  methods: {
    moved (event) {
      var drag=document.getElementById("moved2");
      // //点击某物体时，用drag对象即可，move和up是全局区域，
      // ä¹Ÿå°±æ˜¯æ•´ä¸ªæ–‡æ¡£é€šç”¨ï¼Œåº”该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
      var event=event||window.event; //兼容IE浏览器
      //    é¼ æ ‡ç‚¹å‡»ç‰©ä½“那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
      var diffX=event.clientX*this.scale-drag.offsetLeft;
      var diffY=event.clientY*this.scale-drag.offsetTop;
      document.onmousemove=(event) => {
        var event=event||window.event;
        var moveX=event.clientX*this.scale-diffX;
        var moveY=event.clientY*this.scale-diffY;
        if(moveX<0) {
          moveX=0;
        } else if(moveX>2304*this.scale-drag.offsetWidth) {
          moveX=2304*this.scale-drag.offsetWidth;
        }
        if(moveY<0) {
          moveY=0;
        } else if(moveY>4096*this.scale-drag.offsetHeight) {
          moveY=4096*this.scale-drag.offsetHeight;
        }
        drag.style.left=moveX+"px";
        drag.style.top=moveY+"px";
      };
      document.onmouseup=function(event) {
        document.onmousemove=null;
        document.onmouseup=null;
      };
    },
    //边框的显示隐藏
    showtuli () {
      this.ishowtuli=false;
      //清除系统台站，监测站，gb
    },
    setMenuClick (res) {
      if(res.type=='Clear') {
        sgworld.Creator.ClearMilitaryStandard();
        return
      }

      sgworld.Creator.militaryPlotting(res.type,res.value,(entity) => {
      });
    }
  },
  mounted () {
    bus.$on("clearMilitaryPlot",(e) => {
      this.ishowtuli=false
      this.showtuli()
    });
    bus.$on("ishowMilitaryPlot",(e) => {
      if(this.ishowtuli) {
        this.ishowtuli=false
        this.showtuli()
      } else {
        this.ishowtuli=true
      }
    });
  },
  watch: {
    value (e) {
      if(e) {
        if(document.getElementsByClassName("tableContain")[0]) {
          document.getElementsByClassName("tableContain")[0].style.display=
            "none";
        }
      }
    },
    value1 (e) {
      if(e) {
        this.showbuild()
        if(document.getElementsByClassName("tableContain")[0]) {
          document.getElementsByClassName("tableContain")[0].style.display=
            "none";
        }
      } else {
        mode1.deleteObject()
        mode1=null
      }
    },
  },
};
</script>
<style  scoped>
.top {
  width: 94%;
  height: 20%;
  margin: 0 auto;
  border-bottom: 2px solid #fff;
  color: #fff;
}
.top > span {
  display: inline-block;
  margin: 10px 20px;
  font-size: 40px;
  letter-spacing: 5px;
  font-weight: 300;
  line-height: 80px;
  margin-left: 40px;
}
.container {
  width: 800px;
  height: 500px;
  position: absolute;
  right: 340px;
  top: 180px;
  z-index: 50;
  background: url(~@/assets/image/test/圆角矩形.png) no-repeat;
  background-position: center;
  background-size: 100% 100%;
  cursor: move;
}
.boxMenu {
  width: 100%;
  height: 70%;

  /* font-weight: bold;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  -ms-flex-pack: distribute;
  align-items: center; */
}
.menuTitle {
  font-size: 36px;
  color: white;
  margin: 10px 40px;
}
.menuItem {
  margin: 20px 10px;
  /* background: #409eff !important; */
}
.menuItem button {
  width: 200px;
}
.menuItem :hover {
  /* color: #409eff !important; */
  /* background: #409eff !important; */
}
.menuContent {
  /* display: flex; */
  cursor: pointer;
  display: grid;
  grid-template-columns: auto auto auto;
  text-align: center;
  font-size: 32px;
  color: white;
  margin: 10px 40px;
}
.box .menu {
  width: 100%;
  height: auto;
}
.box >>> .el-switch__core {
  width: 140px !important;
  height: 50px;
  margin-left: 30px;
  border-radius: 28px;
}
.box >>> .el-switch__core:after {
  width: 48px;
  height: 48px;
  margin-left: 0px;
  top: 0px;
}
.box >>> .el-switch.is-checked .el-switch__core::after {
  margin-left: -50px !important;
}
.box > div {
  width: 70%;
  height: 70px;
  font-size: 40px;
  line-height: 70px;
  margin-top: 20px;
  color: #fff;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}
.close {
  position: absolute;
  right: 20px;
  top: 0px;
  cursor: pointer;
}
/* .container>div{
width: 100%;
height: 20%;
border: 1px solid #000;
} */
</style>

 src/components/props/occupancyAnalysis copy.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,499 @@
<template>
  <div class="bot"
       v-if="showsituation">
    <div class="top1">
      <span class="botcon">
        <span class="icon"></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>
    </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%`,
      },
      showdata1: true,
      showdata2: true,
      showDianci: false,
    };
  },
  mounted () {
    bus.$on("clearEve",(e) => {
      this.reset();
    });
    bus.$on("radioData",(e) => {
      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==10;
      this.showdata1=true;
      this.showdata2=true;
    });
  },
  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,
          },
        });
      } 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,
          },
        });
      }
    },
    change () {
      this.showdata1=false;
    },
    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;
    },
    // ç‚¹å‡»èŽ·å¾—态势
    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,
              }
            );
          }
        });
        //把你拾取的东西打印出来看看什么值可以用作判断
      },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();
        });
    },
    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;
      }
    },
  },
  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>

<style scoped>
.bot {
  width: 1000px;
  height: 1150px;
  background: url(~@/assets/image/test/22.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 3920px;
  top: 680px;
}
.top1 {
  width: 95%;
  height: 11%;
  font-size: 40px;
  font-weight: bold;
  margin: 0px auto;
  border-bottom: 2px solid #fff;
  color: #fff;
  letter-spacing: 3px;
}
.icon {
  position: absolute;
  left: 50px;
  width: 50px;
  height: 50px;
  top: 39px;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background: url(~@/assets/image/subject/题标.png);
}
.text {
  display: inline-block;
  margin-left: 90px;
}
.close {
  position: absolute;
  font-size: 60px;
  font-weight: 400;
  right: 60px;
  top: 20px;
}
.close:hover {
  color: red;
  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;
}
.btns {
  margin-top: 100px;
  width: 100%;
  height: 70px;
  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);
}
.btns > span:nth-child(-n + 2) {
  color: #000;
  background: #cadaea;
}
.showpic {
  width: 260px;
  height: 400px;
  background: url(~@/assets/image/botbtn/bac.png);
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  top: 1200px;
  right: 0px;
}
</style>

 src/components/props/occupancyAnalysis.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,499 @@
<template>
  <div class="bot"
       v-if="showsituation">
    <div class="top1">
      <span class="botcon">
        <span class="icon"></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>
    </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%`,
      },
      showdata1: true,
      showdata2: true,
      showDianci: false,
    };
  },
  mounted () {
    bus.$on("clearEve",(e) => {
      this.reset();
    });
    bus.$on("radioData",(e) => {
      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==8;
      this.showdata1=true;
      this.showdata2=true;
    });
  },
  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,
          },
        });
      } 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,
          },
        });
      }
    },
    change () {
      this.showdata1=false;
    },
    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;
    },
    // ç‚¹å‡»èŽ·å¾—态势
    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,
              }
            );
          }
        });
        //把你拾取的东西打印出来看看什么值可以用作判断
      },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();
        });
    },
    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;
      }
    },
  },
  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>

<style scoped>
.bot {
  width: 1000px;
  height: 1150px;
  background: url(~@/assets/image/test/22.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 3920px;
  top: 680px;
}
.top1 {
  width: 95%;
  height: 11%;
  font-size: 40px;
  font-weight: bold;
  margin: 0px auto;
  border-bottom: 2px solid #fff;
  color: #fff;
  letter-spacing: 3px;
}
.icon {
  position: absolute;
  left: 50px;
  width: 50px;
  height: 50px;
  top: 39px;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background: url(~@/assets/image/subject/题标.png);
}
.text {
  display: inline-block;
  margin-left: 90px;
}
.close {
  position: absolute;
  font-size: 60px;
  font-weight: 400;
  right: 60px;
  top: 20px;
}
.close:hover {
  color: red;
  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;
}
.btns {
  margin-top: 100px;
  width: 100%;
  height: 70px;
  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);
}
.btns > span:nth-child(-n + 2) {
  color: #000;
  background: #cadaea;
}
.showpic {
  width: 260px;
  height: 400px;
  background: url(~@/assets/image/botbtn/bac.png);
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  top: 1200px;
  right: 0px;
}
</style>

 src/components/props/situationComparison.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,499 @@
<template>
  <div class="bot"
       v-if="showsituation">
    <div class="top1">
      <span class="botcon">
        <span class="icon"></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>
    </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%`,
      },
      showdata1: true,
      showdata2: true,
      showDianci: false,
    };
  },
  mounted () {
    bus.$on("clearEve",(e) => {
      this.reset();
    });
    bus.$on("radioData",(e) => {
      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;
      this.showdata1=true;
      this.showdata2=true;
    });
  },
  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,
          },
        });
      } 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,
          },
        });
      }
    },
    change () {
      this.showdata1=false;
    },
    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;
    },
    // ç‚¹å‡»èŽ·å¾—态势
    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,
              }
            );
          }
        });
        //把你拾取的东西打印出来看看什么值可以用作判断
      },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();
        });
    },
    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;
      }
    },
  },
  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>

<style scoped>
.bot {
  width: 1000px;
  height: 1150px;
  background: url(~@/assets/image/test/22.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 3920px;
  top: 680px;
}
.top1 {
  width: 95%;
  height: 11%;
  font-size: 40px;
  font-weight: bold;
  margin: 0px auto;
  border-bottom: 2px solid #fff;
  color: #fff;
  letter-spacing: 3px;
}
.icon {
  position: absolute;
  left: 50px;
  width: 50px;
  height: 50px;
  top: 39px;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background: url(~@/assets/image/subject/题标.png);
}
.text {
  display: inline-block;
  margin-left: 90px;
}
.close {
  position: absolute;
  font-size: 60px;
  font-weight: 400;
  right: 60px;
  top: 20px;
}
.close:hover {
  color: red;
  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;
}
.btns {
  margin-top: 100px;
  width: 100%;
  height: 70px;
  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);
}
.btns > span:nth-child(-n + 2) {
  color: #000;
  background: #cadaea;
}
.showpic {
  width: 260px;
  height: 400px;
  background: url(~@/assets/image/botbtn/bac.png);
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  top: 1200px;
  right: 0px;
}
</style>

 src/components/viewer.vue

@@ -18,21 +18,21 @@
  light,
} from "@/utils/work";
import bus from "@/utils/bus";
import { getVectorList, getRadio } from "@/api/http";
import { getVectorList,getRadio } from "@/api/http";
export default {
  name: "App",
  data() {
  data () {
    return {};
  },
  methods: {
    init() {
      const that = this;
      window.currentsubindex = 1;
      let _core = new SmartEarth.Core();
      window.tedp = new this.$trame({
    init () {
      const that=this;
      window.currentsubindex=1;
      let _core=new SmartEarth.Core();
      window.tedp=new this.$trame({
        elem: "app1",
        width: 4992,
        prop: [0, 0],
        prop: [0,0],
        height: 2560,
        navtop: 300,
        gisType: "hf",
@@ -56,13 +56,13 @@
        },
        gisInit: (webgis) => {
          //返回地图对象
          window.Sgworld = webgis;
          window.sgworld = webgis;
          window.Viewer = webgis.Viewer;
          window.viewer = webgis.Viewer;
          window.Cesium = Cesium;
          window.Sgworld=webgis;
          window.sgworld=webgis;
          window.Viewer=webgis.Viewer;
          window.viewer=webgis.Viewer;
          window.Cesium=Cesium;

          window.layers = window.sgworld.Viewer.scene.imageryLayers;
          window.layers=window.sgworld.Viewer.scene.imageryLayers;
          // const blackMarble = layers.addImageryProvider(
          //   new Cesium.IonImageryProvider({ assetId: 3812 })
          // );
@@ -70,9 +70,9 @@
          // blackMarble.alpha = 0.0;
          // blackMarble.brightness = 2.0;
          // åœ°çƒé¢œè‰²
          Viewer.scene.globe.baseColor =
          Viewer.scene.globe.baseColor=
            Cesium.Color.fromCssColorString("#272d39");
            // //飞向广州
          // //飞向广州
          // window.Viewer.camera.flyTo({
          //   destination: Cesium.Cartesian3.fromDegrees(
          //     113.29503528791071,
@@ -97,44 +97,44 @@
              roll: 0,
            },
          });
          let urldian1 =
          let urldian1=
            "http://183.162.245.49:8099/geoserver/SHwuxiandian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=SHwuxiandian:1GZ_POI&maxFeatures=50&outputFormat=application%2Fjson";
          let urldian =
          let urldian=
            "http://183.162.245.49:8099/geoserver/SHP/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=SHP:SH_POI1&maxFeatures=50&outputFormat=application%2Fjson";
          try {
            loaddian(urldian1, "[TE_DESC]", "[height]");
            loaddian(urldian, "[name]", "[Height]");
            loaddian(urldian1,"[TE_DESC]","[height]");
            loaddian(urldian,"[name]","[Height]");
            loadBaimo(1);
            loadLW();
            addRightMouseEvent();
            SPPM();
            loadYH();
            juhe(true, "监测站");
            juhe(true,"监测站");
            addMpt(true);
          } catch (error) {}
          } catch(error) { }
          //开启日照
          viewer.scene.globe.enableLighting = false;
          viewer.shadows = false;
          viewer.scene.globe.enableLighting=false;
          viewer.shadows=false;
          addMouseEvent();
          light();
          getVectorList().then((res) => {
            if (res.message === "Success") {
              let region = res.rows;
            if(res.message==="Success") {
              let region=res.rows;
              region.forEach((item) => {
                let arr = [];
                let arr=[];
                JSON.parse(item.vlatlngs).forEach((item2) => {
                  arr.push([item2[1], item2[0]]);
                  arr.push([item2[1],item2[0]]);
                });
                item.vlatlngs = JSON.stringify(arr);
                item.vlatlngs=JSON.stringify(arr);
              });
              bus.$emit("areaData", region);
              bus.$emit("areaData",region);
            }
          });
          //获取无线电数据
          getRadio().then((res) => {
            if (res.message === "Success") {
              let radio = res.rows;
              bus.$emit("radioData", radio);
            if(res.message==="Success") {
              let radio=res.rows;
              bus.$emit("radioData",radio);
              console.log(radio);
            }
          });
@@ -147,30 +147,30 @@
          // window.Viewer.scene.primitives.add(baimo);
          //县域边界,网格
        },
        subClick(index) {
        subClick (index) {
          let showindex;
          switch (index) {
          switch(index) {
            case 0:
              showindex = 1;
              showindex=1;
              break;
            case 1:
              showindex = 2;
              showindex=2;
              break;
            case 2:
              showindex = 3;
              showindex=3;
              break;
            case 3:
              showindex = 4;
              showindex=4;
              break;
            case 4:
              showindex = 5;
              showindex=5;
              break;
            default:
              break;
          }
          bus.$emit("showindex", showindex);
          bus.$emit("showindex",showindex);
        },
        prop: [970, 970],
        prop: [970,970],
        nav: {
          navTop: () => import("@/components/top/navTop"),
        },
@@ -238,11 +238,17 @@
          DynamicMap: () => import("@/components/props/bottom"), //态势图动态播放
          freeAnalyse: () => import("@/components/props/freeAnalyse"), //空闲资源展示
          moreTZ: () => import("@/components/props/moreTZ"), //空闲资源展示
          // SurprisePlus
          showMilitaryPlot: () => import("@/components/props/militaryPlot"),//军事标绘
          situationComparison: () => import("@/components/props/situationComparison"),//态势对比
          occupancyAnalysis: () => import("@/components/props/occupancyAnalysis"), //频谱占用度分析

          densityAnalysis: () => import("@/components/props/densityAnalysis"), //用频密度分析
        },
      });
    },
  },
  mounted() {
  mounted () {
    this.init();
  },
};

 src/components/wggl/left/czll.vue

@@ -120,18 +120,35 @@
          this.nowchoose=2;
          bus.$emit("showdio",this.nowchoose);
          break;
        case "1-2"://null
          this.nowchoose=7;
          bus.$emit("showdio",this.nowchoose);
          break;
        case "1-1":
          this.nowchoose=1;
          bus.$emit("showdio",this.nowchoose);
          break;
        case "2-6"://null
          this.nowchoose=8;
          bus.$emit("showdio",this.nowchoose);
          break;
        case "2-5":
          this.nowchoose=3;
          bus.$emit("showdio",this.nowchoose);
          break;
        case "2-4"://null
          this.nowchoose=9;
          bus.$emit("showdio",this.nowchoose);
          break;
        case "2-3"://null
          this.nowchoose=10;
          bus.$emit("showdio",this.nowchoose);
          break;
        case "2-2":
          this.nowchoose='1-4';
          bus.$emit("showdio",this.nowchoose);
          break;

        case "3-4":
          this.nowchoose=5;
          bus.$emit("showdio",this.nowchoose);

 src/components/wggl/right/fwxq.vue

@@ -170,6 +170,13 @@
    remove (index) {

      if(index==0) {
        var tlobj={
          value: false,
          value1: true,
          value2: false,
          show: true,
        };
        bus.$emit("ishowMilitaryPlot",tlobj);
        // bus.$emit("clearEve",true);
        // window.FieldIntensity&&window.FieldIntensity.deleteObject();
        // window.imageidXT&&window.Viewer.entities.removeById(window.imageidXT);