123

src/components/Header.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="header">
-    <div class="left" @click="back" style="cursor: pointer">
+    <div class="div30 left" @click="back" style="cursor: pointer">
       <i v-if="hasBack" class="el-icon-back" ></i>
-      <span style="font-size: 20px">{{ modelName }}</span>
+      <span style="font-size: 20px">{{ name  }}</span>
     </div>
-    <div style="font-size: 24px">{{name}}</div>
+    <div class="div30" style="font-size: 24px;text-align: center;">{{modelName}}</div>
-    <div class="right">
+    <div class="right div30">
       <el-popover
         placement="bottom"
         :width="320"
@@ -63,6 +63,7 @@ export default {
     }
     const back = () => {
       router.push('/home')
+      store.commit("setModelName", '');
     }
     router.afterEach((to) => {
       console.log('to', to)
@@ -80,7 +81,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .header {
     height: 50px;
     border-bottom: 1px solid #e9e9e9;
@@ -88,6 +89,9 @@ export default {
     justify-content: space-between;
     align-items: center;
     padding: 0 20px;
+    .div30 {
+      width: 33%;
+    }
   }
   .el-icon-back {
     border: 1px solid #e9e9e9;

src/components/Report.vue

@@ -145,6 +145,13 @@ export default {
         title: {
           text: '未来一周天气图'
         },
+        grid: {
+          left: "3%", //画布左移位置
+          right: '3%',
+          top: "20%",
+          width: "90%", //画布宽度
+          height: "65%", //画布高度
+        },
         tooltip: {
           trigger: 'axis'
         },

src/components/Zhibiao.vue

@@ -26,10 +26,10 @@ export default {
     });
     onMounted(async () => { 
       getChartsZfl("echartDiv1", '蒸腾量');
-      getChartsZfl("echartDiv2", 'COD')
+      getChartsZfl("echartDiv2", 'COD');
       getChartsZfl("echartDiv3", '氨氮');
-      getChartsZfl("echartDiv4", 'SS')
+      getChartsZfl("echartDiv4", 'SS');
-      getChartsZfl("echartDiv5", '屋面温度')
+      getChartsZfl("echartDiv5", '屋面温度');
      });
     const getChartsZfl = (id, text) => {
       var dom = document.getElementById(id);
@@ -267,7 +267,7 @@ export default {
     width: 100%;
     height: 20%;
     margin: 0 auto;
-    // border: 1px solid red;
+    border: 1px solid red;
   }
 }
 </style>