From 0b7865733542931c7c3fcf74febd30fe145af957 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期三, 12 六月 2024 09:38:18 +0800
Subject: [PATCH] 页面修改
---
src/api/api.js | 3
src/components/Chat/chatList.vue | 65 ++++++++++++++++
src/views/compontent/conHeader.vue | 4
src/assets/js/map/mapServer.js | 21 +++-
src/assets/js/msg/msgData.js | 23 ++---
public/config/config.js | 6 +
src/assets/js/map/mapInfo.js | 18 ++++
src/views/chartView/index.vue | 42 ++++++----
src/views/mapView/mapView.vue | 5 -
src/views/homePage/index.vue | 23 +++++
10 files changed, 164 insertions(+), 46 deletions(-)
diff --git a/public/config/config.js b/public/config/config.js
index 28a6220..b2abe2e 100644
--- a/public/config/config.js
+++ b/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/"
};
diff --git a/src/api/api.js b/src/api/api.js
index 8f26a8e..b5f3596 100644
--- a/src/api/api.js
+++ b/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);
}
diff --git a/src/assets/js/map/mapInfo.js b/src/assets/js/map/mapInfo.js
new file mode 100644
index 0000000..66a6453
--- /dev/null
+++ b/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;
diff --git a/src/assets/js/map/mapServer.js b/src/assets/js/map/mapServer.js
index fd954da..ab6694a 100644
--- a/src/assets/js/map/mapServer.js
+++ b/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",
+ sourceType: "tms",
+ // 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", {
diff --git a/src/assets/js/msg/msgData.js b/src/assets/js/msg/msgData.js
index a90515f..4503e46 100644
--- a/src/assets/js/msg/msgData.js
+++ b/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
};
},
diff --git a/src/components/Chat/chatList.vue b/src/components/Chat/chatList.vue
index 1675f08..b1e8e3d 100644
--- a/src/components/Chat/chatList.vue
+++ b/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>
diff --git a/src/views/chartView/index.vue b/src/views/chartView/index.vue
index ddf0cee..49426a3 100644
--- a/src/views/chartView/index.vue
+++ b/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);
- this.list.push(roleMsg.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;
diff --git a/src/views/compontent/conHeader.vue b/src/views/compontent/conHeader.vue
index a52bdd3..5257425 100644
--- a/src/views/compontent/conHeader.vue
+++ b/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;
}
}
}
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index 2189204..ddd7f6c 100644
--- a/src/views/homePage/index.vue
+++ b/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>
@@ -26,10 +32,23 @@
width: 100%;
height: 100%;
display: flex;
- overflow:hidden;
+ overflow: hidden;
}
.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%;
diff --git a/src/views/mapView/mapView.vue b/src/views/mapView/mapView.vue
index 01ba591..1b5f8c8 100644
--- a/src/views/mapView/mapView.vue
+++ b/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;
--
Gitblit v1.9.3