内容修改

src/components/HomeStatics/countPage.vue

@@ -50,16 +50,17 @@ onMounted(() => {
 </script>
 <style scoped lang="scss">
 .countPageClass {
-    width: 24vw;
     height: 28vh;
-    background: rgba(12, 22, 38, 0.85);
+    width: 100%;
+    background: rgba(255, 255, 255, 0.85);
     border-radius: 8px 8px 8px 8px;
+    box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.1);
 
     .title {
         font-family: Source Han Sans CN, Source Han Sans CN;
         font-weight: bold;
         font-size: 20px;
-        color: #FFFFFF;
+        color: #000000;
         line-height: 24px;
         text-align: left;
         font-style: normal;
@@ -75,7 +76,7 @@ onMounted(() => {
 .bgClass1 {
     background: url("@/assets/images/home/Bg.png") no-repeat;
     background-size: 100% 100%;
-    width: 20vw;
+    width: 90%;
     height: 10vh;
     margin-top: 1vh;
     display: flex;
@@ -87,7 +88,7 @@ onMounted(() => {
 .bgClass {
     background: url("@/assets/images/home/Bg(1).png") no-repeat;
     background-size: 100% 100%;
-    width: 20vw;
+    width: 90%;
     height: 10vh;
     margin-top: 1vh;
     display: flex;

src/components/HomeStatics/lineEcharts.vue

@@ -17,7 +17,7 @@ const drawEchart = () => {
       top: '2%',
       left: 'center',
       textStyle: {
-        color: '#C1D2E4'
+        color: '#000000'
         // ...
       }
     },
@@ -26,7 +26,7 @@ const drawEchart = () => {
       top: "15%",
       left: "3%",
       right: "8%",
-      bottom: "1%",
+      bottom: "11%",
       containLabel: true,
     },
     xAxis: {
@@ -45,15 +45,15 @@ const drawEchart = () => {
       axisLabel: {
         // rotate: 60,
         textStyle: {
-          color: "#C1D2E4"
+          color: "#000000"
         },
       },
     },
     yAxis: {
-      show:false,
+      show: false,
       type: "value",
       nameTextStyle: {
-        color: "#fff",
+        color: "#000000",
         padding: [0, 0, 0, -35],
       },
       name: "数量",
@@ -176,16 +176,16 @@ onMounted(() => {
 </script>
 <style>
 .lineEchartsClass {
-  width: 24vw;
   height: 28vh;
-  background: rgba(12, 22, 38, 0.85);
+  background: rgba(255, 255, 255, 0.85);
   border-radius: 8px 8px 8px 8px;
+  box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.3);
 
   .title {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: bold;
     font-size: 20px;
-    color: #FFFFFF;
+    color: #000000;
     line-height: 24px;
     text-align: left;
     font-style: normal;

src/components/HomeStatics/messageTable.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="countPageClass" style="padding-left: 1vw;padding-top: 1.5vh;padding-right: 2vw;">
-        <div>
+        <div> 
             <div class="title" style="padding-left: 0.5vw;">到站提醒</div>
-            <div style="margin-left: 1vw">
+            <div style="margin-left: 1vw;max-height: 20vh;overflow-y: scroll;" class="tableClass">
                 <div v-for="(item, index) in messageList">
                     <div style="display: flex;flex-direction: row;justify-content: space-around;margin-top: 20px;">
                         <div :class="item.type == 1 ? 'carClass' : 'goodClass'">{{ item.carNum }}</div>
@@ -31,16 +31,16 @@ onMounted(() => {
 </script>
 <style scoped lang="scss">
 .countPageClass {
-    width: 24vw;
     height: 28vh;
-    background: rgba(12, 22, 38, 0.85);
+    background: rgba(255, 255, 255, 0.85);
     border-radius: 8px 8px 8px 8px;
+    box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.3);
 
     .title {
         font-family: Source Han Sans CN, Source Han Sans CN;
         font-weight: bold;
         font-size: 20px;
-        color: #FFFFFF;
+        color: #000000;
         line-height: 24px;
         text-align: left;
         font-style: normal;
@@ -48,11 +48,15 @@ onMounted(() => {
     }
 }
 
+.tableClass::-webkit-scrollbar {
+      display: none;
+    }
+
 .contentClass {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
     font-size: 13px;
-    color: #C1D2E4;
+    color: #000000;
     line-height: 24px;
     text-align: left;
     font-style: normal;
@@ -63,7 +67,7 @@ onMounted(() => {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: bold;
     font-size: 13px;
-    color: #C1D2E4;
+    color: #000000;
     line-height: 24px;
     text-align: left;
     font-style: normal;
@@ -74,7 +78,7 @@ onMounted(() => {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
     font-size: 13px;
-    color: #C1D2E4;
+    color: #000000;
     line-height: 24px;
     text-align: left;
     font-style: normal;

src/components/HomeStatics/pieEcharts.vue

@@ -28,12 +28,12 @@ const initData = async () => {
             rich: {
                 b: {
                     fontSize: 14,
-                    color: '#C1D2E4',
+                    color: '#000000',
                     align: 'center',
                 },
                 c: {
                     fontSize: 18,
-                    color: '#ffffff',
+                    color: '#000000',
                     align: 'center',
                     fontWeight: 'bolder'
                 },
@@ -144,10 +144,10 @@ onMounted(() => {
 </script>
 <style>
 .lineEchartsClass {
-    width: 24vw;
     height: 28vh;
-    background: rgba(12, 22, 38, 0.85);
+    background: rgba(255, 255, 255, 0.85);
     border-radius: 8px 8px 8px 8px;
+    box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.3);
 
     .title {
         font-family: Source Han Sans CN, Source Han Sans CN;

src/components/HomeStatics/stationPie.vue

@@ -49,14 +49,14 @@ const drawEchart = () => {
             text: '75%',
             subtext: "在线率",
             left: "center",//对齐方式居中
-            top: "40%",//距离顶部
+            top: "35%",//距离顶部
             textStyle: {//文字配置
-                color: "rgb(50,197,233)",//文字颜色
-                fontSize: 15,//字号
+                color: "#000000",//文字颜色
+                fontSize: 30,//字号
                 align: "center"//对齐方式
             },
             subtextStyle:{
-                color:"#ffffff"
+                color:"#000000"
             }
         },
         series: [
@@ -103,16 +103,16 @@ onMounted(() => {
 </script>
 <style lang="scss">
 .lineEchartsClass {
-    width: 24vw;
     height: 28vh;
-    background: rgba(12, 22, 38, 0.85);
+    background: rgba(255, 255, 255, 0.85);
     border-radius: 8px 8px 8px 8px;
+    box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.3);
 
     .title {
         font-family: Source Han Sans CN, Source Han Sans CN;
         font-weight: bold;
         font-size: 20px;
-        color: #FFFFFF;
+        color: #000000;
         line-height: 24px;
         text-align: left;
         font-style: normal;
@@ -125,7 +125,7 @@ onMounted(() => {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
     font-size: 14px;
-    color: #C1D2E4;
+    color: #000000;
     line-height: 15px;
     text-align: left;
     font-style: normal;
@@ -136,7 +136,7 @@ onMounted(() => {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: bold;
     font-size: 24px;
-    color: #FFFFFF;
+    color: #000000;
     line-height: 11px;
     text-align: right;
     font-style: normal;
@@ -147,7 +147,7 @@ onMounted(() => {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
     font-size: 12px;
-    color: #C1D2E4;
+    color: #000000;
     line-height: 11px;
     text-align: left;
     font-style: normal;

src/components/HomeStatics/warnTable.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="countPageClass" style="padding-left: 1vw;padding-top: 1.5vh;padding-right: 2vw;">
         <div class="title">告警信息</div>
-        <div style="padding-left: 1vw;">
-            <div v-for="(item, index) in messageList" style="margin-top:20px">
+        <div style="padding-left: 1vw;max-height: 20vh;overflow-y: scroll;" class="tableClass">
+            <div v-for="(item, index) in messageList" style="margin-top:20px;" >
                 <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;">
                     <div>
                         <img v-if="item.type == 1" src="@/assets/images/home/Rectangle8.png" />
@@ -31,16 +31,16 @@ onMounted(() => {
 </script>
 <style scoped lang="scss">
 .countPageClass {
-    width: 24vw;
     height: 28vh;
-    background: rgba(12, 22, 38, 0.85);
+    background: rgba(255, 255, 255, 0.85);
     border-radius: 8px 8px 8px 8px;
+    box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.3);
 
     .title {
         font-family: Source Han Sans CN, Source Han Sans CN;
         font-weight: bold;
         font-size: 20px;
-        color: #FFFFFF;
+        color: #000000;
         line-height: 24px;
         text-align: left;
         font-style: normal;
@@ -48,11 +48,16 @@ onMounted(() => {
     }
 }
 
+.tableClass::-webkit-scrollbar {
+      display: none;
+    }
+
+
 .contentClass {
     font-family: Roboto, Roboto;
     font-weight: 400;
     font-size: 12px;
-    color: #FFFFFF;
+    color: #000000;
     line-height: 17px;
     text-align: left;
     font-style: normal;
@@ -63,7 +68,7 @@ onMounted(() => {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: bold;
     font-size: 13px;
-    color: #C1D2E4;
+    color: #000000;
     line-height: 24px;
     text-align: left;
     font-style: normal;
@@ -74,7 +79,7 @@ onMounted(() => {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
     font-size: 13px;
-    color: #C1D2E4;
+    color: #000000;
     line-height: 24px;
     text-align: left;
     font-style: normal;

src/components/Map/map.vue

@@ -102,11 +102,6 @@ const initMap = () => {
             center: [119.807462, 26.958413], //初始化地图中心点位置
         });
         console.log(11111111111);
-        console.log(props.darkType)
-        if (props.darkType) {
-            var styleName = "amap://styles/darkblue";
-            map.setMapStyle(styleName);
-        }
         console.log(map)
         mapObj.value = map;
         console.log(map)

src/views/index.vue

@@ -1,12 +1,21 @@
 <template>
   <div class="home">
-    <mapDiv :showMarket="showMarket" :darkType="darkType" style="width:100%;height:89vh;padding: 0 0 0 0" ref="mapElm"></mapDiv>
-    <countPage style="position: absolute;left: 1vw;z-index: 1000;top: 1vh;"></countPage>
-    <lineEcharts style="position: absolute;left: 1vw;z-index: 1000;top: 30vh;"></lineEcharts>
-    <messageTable style="position: absolute;left: 1vw;z-index: 1000;top: 59vh;"></messageTable>
-    <pieEcharts style="position: absolute;right: 1vw;z-index: 1000;top: 1vh;"></pieEcharts>
-    <stationPie style="position: absolute;right: 1vw;z-index: 1000;top: 30vh;"></stationPie>
-    <warnTable style="position: absolute;right: 1vw;z-index: 1000;top: 59vh;"></warnTable>
+    <div style="display: flex;flex-direction: row;width: 100%;">
+      <div style="display: flex;flex-direction: column;width: 24%;">
+        <countPage style="width: 100%;"></countPage>
+        <lineEcharts style="width: 100%;margin-top: 1vh;"></lineEcharts>
+        <messageTable style="width: 100%;margin-top: 1vh;"></messageTable>
+      </div>
+      <div style="width: 50%;margin-left: 1%;">
+        <mapDiv :showMarket="showMarket" :darkType="darkType" style="width:100%;height:86vh;padding: 0 0 0 0"
+          ref="mapElm"></mapDiv>
+      </div>
+      <div style="width:24%;margin-left: 1%;">
+        <pieEcharts></pieEcharts>
+        <stationPie style="width: 100%;margin-top: 1vh;"></stationPie>
+        <warnTable style="width: 100%;margin-top: 1vh;"></warnTable>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -21,8 +30,8 @@ import stationPie from '@/components/HomeStatics/stationPie.vue';
 import warnTable from '@/components/HomeStatics/warnTable.vue';
 
 
-const showMarket =ref(true);
-const darkType =ref(true);
+const showMarket = ref(true);
+const darkType = ref(true);
 
 onMounted(() => {
   let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
@@ -34,12 +43,13 @@ const goTarget = (url: string) => {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .home {
 
   height: 100%;
   width: 100%;
-  padding: 0 0 0 0 !important;
+  padding: 1% 1% 1% 1% !important;
+  background-color: #eff1f3;
 
   blockquote {
     padding: 10px 20px;
@@ -108,4 +118,7 @@ const goTarget = (url: string) => {
   }
 }
 
+.app-main {
+  background-color: #eff1f3 !important
+}
 </style>