Merge branch 'master' of http://192.168.11.205:9000/r/wxdDemo

surprise

2024-04-18 19725c3f47412a6003bc98f4c7168a737a55319b

Merge branch 'master' of http://192.168.11.205:9000/r/wxdDemo

# Conflicts:
#	src/components/wggl/left/czll.vue

 src/components/props/situationComparison10-1.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-1"
      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/situationComparison10-2.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-2"
      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/situationComparison10-3.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-3"
      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/situationComparison10-4.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-4"
      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/situationComparison6-1.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=="6-1"
      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/situationComparison6-2.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=="6-2"
      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/situationComparison6-3.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=="6-3"
      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/situationComparison6-4.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=="6-4"
      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/situationComparison6-5.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=="6-5"
      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/situationComparison6-6.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=="6-6"
      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/situationComparison6-7.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=="6-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/props/situationComparison7-1.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">zcTS\筹划步骤</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-1"
      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/situationComparison7-2-1.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">ZC环境显示-东南沿海、TD</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-2-1"
      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/situationComparison7-3-1.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-3-1"
      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/situationComparison7-4.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-4"
      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/situationComparison7-5.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-5"
      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/situationComparison7-6.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-6"
      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/situationComparison7-7.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-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/props/situationComparison7-8.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-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/situationComparison7-9.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-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/situationComparison8-1.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-1"
      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/situationComparison8-2.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-2"
      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/situationComparison8-3.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-3"
      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/situationComparison8-4.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-4"
      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/situationComparison9-1.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-1"
      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/situationComparison9-2.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-2"
      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/situationComparison9-3.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-3"
      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,7 +70,7 @@
          // blackMarble.alpha = 0.0;
          // blackMarble.brightness = 2.0;
          // åœ°çƒé¢œè‰²
          Viewer.scene.globe.baseColor=
          Viewer.scene.globe.baseColor =
            Cesium.Color.fromCssColorString("#272d39");
          // //飞向广州
          // window.Viewer.camera.flyTo({
@@ -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"),
        },
@@ -239,16 +239,46 @@
          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"), //频谱占用度分析
          showMilitaryPlot: () => import("@/components/props/militaryPlot"), //军事标绘
          situationComparison: () =>
            import("@/components/props/situationComparison"), //态势对比
          occupancyAnalysis: () =>
            import("@/components/props/occupancyAnalysis"), //频谱占用度分析

          densityAnalysis: () => import("@/components/props/densityAnalysis"), //用频密度分析

          SC1: () => import("@/components/props/situationComparison6-1"),
          SC2: () => import("@/components/props/situationComparison6-2"),
          SC3: () => import("@/components/props/situationComparison6-3"),
          SC4: () => import("@/components/props/situationComparison6-4"),
          SC5: () => import("@/components/props/situationComparison6-5"),
          SC6: () => import("@/components/props/situationComparison6-6"),
          SC7: () => import("@/components/props/situationComparison6-7"),
          SC8: () => import("@/components/props/situationComparison7-1"),
          SC9: () => import("@/components/props/situationComparison7-2-1"),
          SC10: () => import("@/components/props/situationComparison7-3-1"),
          SC11: () => import("@/components/props/situationComparison7-4"),
          SC12: () => import("@/components/props/situationComparison7-5"),
          SC13: () => import("@/components/props/situationComparison7-6"),
          SC14: () => import("@/components/props/situationComparison7-7"),
          SC15: () => import("@/components/props/situationComparison7-8"),
          SC16: () => import("@/components/props/situationComparison7-9"),
          SC17: () => import("@/components/props/situationComparison8-1"),
          SC18: () => import("@/components/props/situationComparison8-2"),
          SC19: () => import("@/components/props/situationComparison8-3"),
          SC20: () => import("@/components/props/situationComparison8-4"),
          SC21: () => import("@/components/props/situationComparison9-1"),
          SC22: () => import("@/components/props/situationComparison9-2"),
          SC23: () => import("@/components/props/situationComparison9-3"),
          SC24: () => import("@/components/props/situationComparison10-1"),
          SC25: () => import("@/components/props/situationComparison10-2"),
          SC26: () => import("@/components/props/situationComparison10-3"),
          SC27: () => import("@/components/props/situationComparison10-4"),
        },
      });
    },
  },
  mounted () {
  mounted() {
    this.init();
  },
};