From 308ef3c9012ef23e9ec28d510efaa668c2d969dd Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期四, 19 十月 2023 08:42:13 +0800
Subject: [PATCH] 修改
---
.env.development | 2
/dev/null | 0
src/assets/loginPage/panel-bg.png | 0
src/views/loginPage/loginPage.vue | 11 --
src/assets/warningScreen/map-bg.png | 0
index.html | 2
package.json | 1
.env.production | 2
src/views/bigScreen/components/screen.vue | 186 ++++++++++++++++++++--------------------------
src/views/loginPage/component/accountLogin.vue | 2
10 files changed, 86 insertions(+), 120 deletions(-)
diff --git a/.env.development b/.env.development
index 5fe3cb4..825a49f 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
# 本地环境
ENV = 'development'
-VITE_API_URL = 'http://121.239.169.41:9091'
+VITE_API_URL = 'http://192.168.0.47:17080'
#线上正式环境接口地址
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 8629240..ec4bb8e 100644
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,5 @@
# 线上环境
ENV = 'production'
-# 科学实验线上环境接口地址
+# 线上环境打包接口地址
VITE_API_URL = 'http://121.239.169.27:7000'
diff --git a/index.html b/index.html
index a550d07..37baf26 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,6 @@
})();
</script>
<script type="module" src="/src/main.ts"></script>
- <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=wsijQt8sLXrCW71YesmispvYHitfG9gv&s=1"></script>
+ <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t"></script>
</body>
</html>
diff --git a/package.json b/package.json
index aa83b8d..5326c6d 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
"sortablejs": "^1.15.0",
"splitpanes": "^3.1.1",
"vue": "^3.2.36",
+ "vue-baidu-map-3x": "^1.0.35",
"vue-clipboard3": "^2.0.0",
"vue-grid-layout": "^3.0.0-beta1",
"vue-i18n": "^9.1.10",
diff --git a/src/assets/loginPage/device-pic.png b/src/assets/loginPage/device-pic.png
deleted file mode 100644
index c52a119..0000000
--- a/src/assets/loginPage/device-pic.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/loginPage/equipment.JPG b/src/assets/loginPage/equipment.JPG
deleted file mode 100644
index 301d435..0000000
--- a/src/assets/loginPage/equipment.JPG
+++ /dev/null
Binary files differ
diff --git a/src/assets/loginPage/map-bg.jpg b/src/assets/loginPage/map-bg.jpg
deleted file mode 100644
index d8d3715..0000000
--- a/src/assets/loginPage/map-bg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/loginPage/map-bg.png b/src/assets/loginPage/map-bg.png
deleted file mode 100644
index e642a41..0000000
--- a/src/assets/loginPage/map-bg.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/loginPage/panel-bg.png b/src/assets/loginPage/panel-bg.png
index 423b2c4..b338c73 100644
--- a/src/assets/loginPage/panel-bg.png
+++ b/src/assets/loginPage/panel-bg.png
Binary files differ
diff --git a/src/assets/loginPage/panel-bg2.png b/src/assets/loginPage/panel-bg2.png
deleted file mode 100644
index 354548a..0000000
--- a/src/assets/loginPage/panel-bg2.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/loginPage/rollingBall.gif b/src/assets/loginPage/rollingBall.gif
deleted file mode 100644
index 855711d..0000000
--- a/src/assets/loginPage/rollingBall.gif
+++ /dev/null
Binary files differ
diff --git a/src/assets/loginPage/watersys.JPG b/src/assets/loginPage/watersys.JPG
deleted file mode 100644
index dc1c159..0000000
--- a/src/assets/loginPage/watersys.JPG
+++ /dev/null
Binary files differ
diff --git a/src/assets/warningScreen/map-bg.png b/src/assets/warningScreen/map-bg.png
new file mode 100644
index 0000000..27b08ff
--- /dev/null
+++ b/src/assets/warningScreen/map-bg.png
Binary files differ
diff --git a/src/views/bigScreen/components/screen.vue b/src/views/bigScreen/components/screen.vue
index dde3c1a..b20993d 100644
--- a/src/views/bigScreen/components/screen.vue
+++ b/src/views/bigScreen/components/screen.vue
@@ -26,7 +26,7 @@
</div>
</div>
<div class="main-content">
- <div id="bigMap"></div>
+<!-- <div id="bigMap"></div>-->
<div class="main-left">
<div class="left-top withFilter">
<div class="chart-head">
@@ -96,6 +96,15 @@
</div>
</div>
<div class="main-middle">
+<!-- <div class="bigMap">-->
+<!-- <div id="bigMap"></div>-->
+<!-- </div>-->
+ <baidu-map class="bigMap" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 85.057805, lat: 45.62550}" :zoom="16" @ready="initMap">
+ <bm-map-type :map-types="['BMAP_SATELLITE_MAP','BMAP_NORMAL_MAP' ]" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
+ <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
+ <bm-polygon :path="polygonPath" stroke-color="blue" fillColor="blue" :fillOpacity="0.4" :stroke-weight="1"/>
+ </baidu-map>
+<!-- </div>-->
<div class="mid-bottom">
<div class="chart-head">
<div class="chart-tit">气象信息</div>
@@ -230,6 +239,8 @@
import AMapLoader from '@amap/amap-jsapi-loader'
import { shallowRef } from '@vue/reactivity'
import { storeToRefs } from 'pinia';
+
+import {BaiduMap, BmMapType, BmNavigation, BmPolygon} from 'vue-baidu-map-3x'
import { useUserInfo } from '/@/stores/userInfo';
import {bigScreenApi} from "/@/api/bigScreen";
// 定义接口来定义对象的类型
@@ -263,8 +274,12 @@
yellowNum: null | number
redNum: null | number
weatherData: Array<any>
+ polygonPath: Array<location>
}
-
+interface location{
+ lng: number | null
+ lat: number | null
+}
interface gasType {
name: string
id: number | null
@@ -272,7 +287,7 @@
export default defineComponent({
name: 'bigScreen',
- components: { },
+ components: {BaiduMap, BmMapType, BmNavigation, BmPolygon },
props:{
isFull: Boolean
},
@@ -311,7 +326,8 @@
warningGas: {},
dialogWarning: false,
countTime: 1,
- weatherData: []
+ weatherData: [],
+ polygonPath: []
});
const router = useRouter();
const gasN = ref("eChartgasN" + Date.now() + Math.random())
@@ -326,6 +342,9 @@
second: '2-digit',
};
+ const updatePolygonPath = (e) => {
+ state.polygonPath = e.target.getPath()
+ };
// 页面加载时
onMounted(() => {
getGasData()
@@ -349,12 +368,21 @@
setInterval(() => {
getDateTime();
}, 1000);
- initMap()
+ // initMap()
})
onUnmounted(()=>{
destroyedWs()
})
+
+ const initMap=()=>{
+ state.polygonPath = [
+ { lng: 85.047805, lat: 45.62550 },
+ { lng: 85.047505, lat: 45.62350 },
+ { lng: 85.057205, lat: 45.62350 },
+ { lng: 85.057005, lat: 45.62750 }
+ ]
+ }
const toNdPage = () =>{
router.push('/gasData')
}
@@ -896,84 +924,6 @@
});
}
- const map = shallowRef(null)
- const initMap=()=> {
- let m = map.value
- window._AMapSecurityConfig = {
- securityJsCode: "456045075984862a9806587f0d7fee3c",
- };
- AMapLoader.load({
- key: '5dbeedfa28e0d7fffb59684446569773', // 申请好的Web端开发者Key，首次调用 load 时必填
- version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
- plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
- })
- .then(AMap => {
- if (AMap && typeof AMap.Map === 'function') {
- m = new AMap.Map('bigMap', {
- viewMode: '3D',
- mapStyle: 'amap://styles/normal',
- zoom: 18,
- center: [85.057805, 45.62550],
- layers:[
- // new AMap.TileLayer.RoadNet({}),
- // new AMap.TileLayer.Satellite()
- ],
- zooms:[2,20],
- })
-
- AMap.plugin(["AMap.DistrictSearch","AMap.ToolBar","AMap.ControlBar"],()=> {
- var district = new AMap.DistrictSearch({
- extensions: "all",
- subdistrict: 0,
- level: "district",
- });
- district.search("克拉玛依市", function (status, result) {
- // // 外多边形坐标数组和内多边形坐标数组
- var outer = [
- new AMap.LngLat(-360, 90, true),
- new AMap.LngLat(-360, -90, true),
- new AMap.LngLat(360, -90, true),
- new AMap.LngLat(360, 90, true),
- ]; // 使得遮盖填充反向
- var holes = result.districtList[0].boundaries; // 得到该区域的边界坐标集合
-
- var pathArray = [outer];
- pathArray.push.apply(pathArray, holes);
- var polygon = new AMap.Polygon({
- pathL: pathArray,
- //线条颜色，使用16进制颜色代码赋值。默认值为#006600
- strokeColor: "#11feee",
- strokeWeight: 3,
- fillColor: "#051342",
- fillOpacity: 1,
- strokeStyle: "solid",
- strokeDasharray: [2, 2],
- });
- polygon.setPath(pathArray)
- m.add(polygon);
- })
- m.addControl(new AMap.ToolBar({
- position: {
- top: '20px',
- left: 'calc(25% + 5px)'
- }
- }))
- m.addControl(new AMap.ControlBar({
- position: {
- top: '20px',
- right: 'calc(25% + 5px)'
- }
- }))
- })
-
- } else {
- console.error('AMap 或 AMap.Map 不可用');
- }
- })
- .catch(e => {
- console.log('加载高德地图时出错：', e)
- })
- }
// 当前时间
const getDateTime = () => {
const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
@@ -1019,7 +969,8 @@
config,
gasN,
gasT,
- map,
+ initMap,
+ updatePolygonPath,
toNdPage,
toTlPage,
timeChange,
@@ -1150,7 +1101,7 @@
display: flex;
align-items: flex-end;
justify-content: space-between;
- position: relative;
+ //position: relative;
&>div{
height: 100%;
@@ -1529,24 +1480,6 @@
}
}
- #bigMap{
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
-
- :deep(.amap-logo){
- display: none!important;
- visibility: hidden!important;
- }
-
- :deep(.amap-copyright) {
- display: none!important;
- visibility: hidden!important;
- }
- }
-
.main-left{
z-index: 9;
width: calc(25% - 5px);
@@ -1563,14 +1496,55 @@
background-size: 100% 100%;
}
}
+ //#bigMap{
+ //position: absolute;
+ //width: 100%;
+ //height: 100%;
+ //left: 0;
+ //top: 0;
+
+ // :deep(.amap-logo){
+ // display: none!important;
+ // visibility: hidden!important;
+ // }
+ //
+ // :deep(.amap-copyright) {
+ // display: none!important;
+ // visibility: hidden!important;
+ // }
+ //}
+ //.main-middle{
+ // width: calc(50% - 10px);
+ // height: calc((100%/3) - (20px/3));
+ // z-index: 9;
+ // .mid-bottom{
+ // width: 100%;
+ // height: 100%;
+ // background: url("../../../assets/warningScreen/chart-bg4.png") no-repeat center;
+ // background-size: 100% 100%;
+ // }
+ //}
.main-middle{
width: calc(50% - 10px);
- height: calc((100%/3) - (20px/3));
- z-index: 9;
+ .bigMap{
+ width: 100%;
+ height: calc((200% - 40px)/3 + 10px);
+ padding: 15px;
+ background: url('../../../assets/warningScreen/map-bg.png') no-repeat center;
+ background-size: 100% 100%;
+ :deep(.BMap_cpyCtrl){
+ display: none!important;
+ visibility: hidden!important;
+ }
+ :deep(.anchorBL) {
+ display: none!important;
+ visibility: hidden!important;
+ }
+ }
.mid-bottom{
width: 100%;
- height: 100%;
+ height: calc((100%/3) - (20px/3));
background: url("../../../assets/warningScreen/chart-bg4.png") no-repeat center;
background-size: 100% 100%;
}
diff --git a/src/views/loginPage/component/accountLogin.vue b/src/views/loginPage/component/accountLogin.vue
index 1e074ad..ce41c68 100644
--- a/src/views/loginPage/component/accountLogin.vue
+++ b/src/views/loginPage/component/accountLogin.vue
@@ -334,7 +334,7 @@
<style scoped lang="scss">
.login-content-form {
- margin-top: 4vh;
+ margin-top: 30px;
width: 100%;
.el-input ::v-deep(.el-input__wrapper) {
diff --git a/src/views/loginPage/loginPage.vue b/src/views/loginPage/loginPage.vue
index a41bf07..17755ba 100644
--- a/src/views/loginPage/loginPage.vue
+++ b/src/views/loginPage/loginPage.vue
@@ -8,7 +8,7 @@
<div class="loginPanel">
<div class="loginGroup">
<div style="width: 100%">
- <div style="width:100%;text-align: center;font-size: 22px;color: #11FEEE">欢迎登录</div>
+ <div style="width:100%;text-align: center;font-size: 28px;color: #11FEEE">欢迎登录</div>
<AccountLogin />
</div>
</div>
@@ -71,15 +71,6 @@
</script>
<style scoped lang="scss">
- @media screen and (min-width: 1366px){
-
- }
- @media screen and (min-width: 1024px) and (max-width: 1366px){
-
- }
- @media screen and (min-width: 960px) and (max-width: 1024px){
-
- }
.login-container {
width: 100%;
height: 100%;
--
Gitblit v1.9.2