页面修改

suerprisePlus

2024-06-12 0b7865733542931c7c3fcf74febd30fe145af957

页面修改

 public/config/config.js

@@ -1,4 +1,4 @@
const webUrl = location.href.indexOf("/chat") > -1 ? "/chat/" : "";

const webUrl = location.href.indexOf("/GeoAgent") > -1 ? "/GeoAgent/" : "";

const webHost = location.origin + webUrl;

const config = {

  StaticFileBaseUrl: webUrl + "/CimSDK/",

@@ -6,5 +6,7 @@
  loadTime: 2000,

  //间隔多久回消息

  retTime: 2000,

  apiUrl: "http://192.168.11.169:8080/"

  // apiUrl: "http://192.168.11.41:7777/",

  apiUrl: "http://106.120.22.26:5367/",

  imgUrl: webHost + "/image/"

};


 src/api/api.js

@@ -1,5 +1,6 @@
import service from "../utils/service.js";
export function getAIMessage(params) {
  //请求地址
  return service.get("/api/v1/chat?message=" + params);
  // return service.get("/api/v1/chat?message=" + params);
  return service.get("/intention?message=" + params);
}

 src/assets/js/map/mapInfo.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,18 @@
import mapServer from "./mapServer";

const mapInfo = {
  init(res) {
    switch (res) {
      case "flyToImageryLayer":
        this.setFlyToImageryLayer();
        break;
    }
  },
  setFlyToImageryLayer() {
    mapServer.addServer({
      sourceType: "tms",
      url: "http://test.smartearth.cn:9037/gisserver/tmsserver/SubicBayArea"
    });
  }
};
export default mapInfo;

 src/assets/js/map/mapServer.js

@@ -5,8 +5,9 @@
  sourceType: null,
  init() {},
  addServer(res) {
    this.remoServer(res);
    this.sourceType = res.sourceType;
    console.log(this.sourceType);

    switch (this.sourceType) {
      case "arcgis":
        this.addArcgisServer(res);
@@ -19,17 +20,26 @@
        break;
    }
  },
  remoServer(res) {
    for (var i in this.listData) {
      const obj = this.listData[i];
      if (obj.type == res.sourceType) {
        obj.layer.removeFromMap();
        this.listData.splice(i, 1);
      }
    }
  },
  addTmsLayer(res) {
    console.log(res.url);
    var layer = earthCtrl.factory.createImageryLayer({
        sourceType: "tms",
        url: "http://test.smartearth.cn:9037/gisserver/tmsserver/SubicBayArea",
      // url: "http://test.smartearth.cn:9037/gisserver/tmsserver/SubicBayArea"
      url: res.url
    });
    this.listData.push({
      layer: layer,
      type: this.sourceType
    });
    mapConfig.flyToImageryLayer(layer)
    mapConfig.flyToImageryLayer(layer);
  },
  addArcgisServer(res) {
    const layer = earthCtrl.factory.createImageryLayer({
@@ -40,7 +50,6 @@
      layer: layer,
      type: this.sourceType
    });
    
  },
  addGeoServer(res) {
    const layer = earthCtrl.factory.createWfsLayer("polygon", {

 src/assets/js/msg/msgData.js

@@ -3,13 +3,11 @@
const msgData = {

  mine: null,

  getRole(type, msg) {

 
    const imgurl = this.getImgUrl(type);

    var roleMsg = this.getTest(msg);

    this.mine = this.getMine(type);

    return {

      msg: this.getMsg(imgurl, roleMsg[0]),

 
      msg: this.getMsg(imgurl, roleMsg[0])

    };

  },

  getTest(res) {

@@ -39,7 +37,7 @@
    if (img) {

      var val_img = "";

      for (var i in img) {

        var img_url = webHost + "/image/" + img[i];

        var img_url = config.imgUrl + img[i];

        if (val_img) {

          val_img += ",";

        }

@@ -74,7 +72,7 @@
    return val;

  },

  getImgUrl(type) {

    var url = webHost + "/image/";

    var url = config.imgUrl;

    if (type == "ai") {

      url = url + aiData.aiRole_img;

    } else if (type == "role") {

@@ -91,7 +89,7 @@
    }

  },

  setmsgtab(tab) {

    var url = webHost + "/image/" + aiData.aiRole_img;

    var url = config.imgUrl + aiData.aiRole_img;

    var thead = tab[0];

    var tbody = tab[1];

    var header = "<thead class ='tabHeader'><tr>";

@@ -123,14 +121,14 @@
  setmsgImg(img) {

    var val_img = "";

    for (var i in img) {

      var img_url = webHost + "/image/" + img[i];

      var img_url = config.imgUrl + img[i];

      // if (val_img) {

      //     val_img += ","

      // }

      val_img += "<img data-src= " + img_url + "></img>";

    }



    var url = webHost + "/image/" + aiData.aiRole_img;

    var url = config.imgUrl + aiData.aiRole_img;

    var obj = {

      date: this.getDate(),

      text: { text: val_img },

@@ -169,10 +167,11 @@
    }, 150);

  },

  getLoader() {

    this.mine = false;

    var url = webHost + "/image/" + aiData.aiRole_img;

    this.mine = true;

    var url = config.imgUrl + aiData.aiRole_img;

    var msg = {

      text: "<div class='loading'></div>"

      // text: "<div class='loading'></div>"

      text: " <div class='parentBox'>  <div class='loadBox'> <div class='loaderContantBox'></div> </div>  </div>"

    };

    return this.getMsg(url, msg);

  },

@@ -182,7 +181,7 @@
      date: this.getDate(),

      text: msg,

      mine: false,

      name:this.mine?'[GeoAgent]':'[您]',

      name: this.mine ? "[GeoAgent]" : "[您]",

      img: imgurl

    };

  },


 src/components/Chat/chatList.vue

@@ -422,3 +422,68 @@
  max-width: 200px;

}

</style>

<style>

.parentBox {

  height: 100%;

  /* background: rgb(31, 31, 31); */

  padding: 20px;

}

.loadBox .loaderContantBox {

  color: white;

  font-size: 40px;

  overflow: hidden;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  transform: translateZ(0);

  /* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */

  animation: loadBox 1.7s infinite ease, round 1.7s infinite ease;

}



@keyframes loadBox {

  0% {

    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,

      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;

  }



  5%,

  95% {

    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,

      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;

  }



  10%,

  59% {

    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,

      -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,

      -0.297em -0.775em 0 -0.477em;

  }



  20% {

    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,

      -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,

      -0.749em -0.34em 0 -0.477em;

  }



  38% {

    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,

      -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,

      -0.82em -0.09em 0 -0.477em;

  }



  100% {

    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,

      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;

  }

}



@keyframes round {

  0% {

    transform: rotate(0deg); /* å¼€å§‹æ—‹è½¬ div å…ƒç´  */

  }



  100% {

    transform: rotate(360deg); /* ç»“束旋转 div å…ƒç´  */

  }

}

</style>


 src/views/chartView/index.vue

@@ -18,6 +18,7 @@
import store from "../../store";

import bus from "./../../assets/js/bus.js";

import { getAIMessage } from "../../api/api.js";

import mapInfo from "../../assets/js/map/mapInfo.js";

export default {

  name: "jwChat",



@@ -67,8 +68,9 @@
      clearInterval(window.timer);

      window.timer = null;

    }

    // this.setLoading();

    setTimeout(() => {

      this.setMsgStart("您好");

      // this.setMsgStart("您好");

    }, config.loadTime);

    bus.$on("mapInfo", (res) => {

      if (res) {

@@ -81,28 +83,22 @@
      const msg = this.inputMsg;

      if (!msg) return;

      this.getMsg("role", msg);

      this.setLoading();

      setTimeout(() => {

        // this.loading = true;

        this.setMsgStart(msg);

        // const loader = msgData.getLoader();

        // this.list.push(loader);

      }, 200);

    },

    async setMsgStart(res) {

      const data = await getAIMessage(res);



      // var msg = aiData.aiMsg[0]

      this.getMsg("ai", data);

      if (res == "hi") {

        this.$nextTick(() => {

          setTimeout(() => {

            this.$store.state.erroInfoMessage = {

              title: "警告：菲律宾苏比克湾区域检测出异常军事目标！",

              val: "异常代号：4r5as5s001"

            };

          }, 5000);

        });

      const message = data.order;

      if (data.order.args && data.order.args.place) {

        message = data.order.args.place;

      }

      this.getMsg("ai", message);

      if (data.order.name) {

        mapInfo.init(data.order.name);

      }

      
    },

    setMapInfo(res) {

      var msg = "";

@@ -110,10 +106,17 @@
        msg = "<div>异常查询</div>" + res.value;

      }

      this.getMsg("role", msg);

      this.setMsgStart(res.value);

    },

    getMsg(type, msg) {

      var roleMsg = msgData.getRole(type, msg);

      if (this.loading) {

        this.loading = false;

        const length = this.list.length - 1;

        this.list[length].text = roleMsg.msg.text;

      } else {

      this.list.push(roleMsg.msg);

      }

    },

    setShowMsg() {

      if (this.msgData.text) {

@@ -141,6 +144,11 @@
        this.list.push(val);

      }

    },

    setLoading() {

      const loader = msgData.getLoader();

      this.list.push(loader);

      this.loading = true;

    },

    getLoadingFlag() {

      if (this.list.length == 0) {

        return;


 src/views/compontent/conHeader.vue

@@ -34,7 +34,7 @@
  },
  methods: {
    setMenuChange(res) {
      this.menuCheckFlg = res.id;
      // this.menuCheckFlg = res.id;
      if (res.id == "c2") {
        this.$store.state.setScreenFlag = !this.$store.state.setScreenFlag;
      }
@@ -44,7 +44,7 @@
    dataTypes(newValue, oldValue) {
      if (newValue) {
        this.menuOption = newValue;
        this.menuCheckFlg = this.menuOption[0].id;
       // this.menuCheckFlg = this.menuOption[0].id;
      }
    }
  }

 src/views/homePage/index.vue

@@ -1,7 +1,13 @@
<template>
  <div class="mapChart">
    <div class="leftChart">
      <map-chart></map-chart>
      <div
        :class="
          $store.state.setScreenFlag ? 'leftContentActive' : 'leftContent'
        "
      >
      <map-chart></map-chart></div>
      <!--  -->
    </div>
    <div :class="$store.state.setScreenFlag ? 'rightMapActive' : 'rightMap'">
      <map-view></map-view>
@@ -30,6 +36,19 @@
}
.leftChart {
  flex: 1;
  display: flex;
  justify-content: center;
}
.leftContent {
  width: 50%;
  height: 100%;
  transition: 1s ease-out;
}
.leftContentActive {
  width: 100%;
  height: 100%;
  transition: 1s ease-out;
 
}
.rightMapActive {
  width: 50%;

 src/views/mapView/mapView.vue

@@ -53,10 +53,7 @@
          type: "erroInfo",
          value: obj.val
        });
        mapServer.addServer({
          sourceType: "tms",
          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
        });
     
      }
      this.$nextTick(() => {
        this.errInfoFlag = false;