优化调整

src/components/card/Card01.vue

@@ -10,8 +10,11 @@ import header from "@/assets/images/card/header01.png";
   <div class="card-one">
     <div class="card-one-header">
       <img :src="header" alt=""/>
-      <span class="title" v-html="title"></span>
-      <slot name="headerTool"></slot>
+      <div class="card-one-header-main">
+        <slot name="header">
+          <span class="title" v-html="title"></span>
+        </slot>
+      </div>
     </div>
     <div class="card-one-body">
       <slot></slot>
@@ -28,6 +31,7 @@ import header from "@/assets/images/card/header01.png";
     line-height: 2.85rem;
     font-size: 1.2rem;
     font-weight: 600;
+    padding-left: 6%;
 
     img {
       position: absolute;
@@ -37,9 +41,8 @@ import header from "@/assets/images/card/header01.png";
       left: 0;
     }
 
-    .title {
+    .card-one-header-main {
       position: relative;
-      padding-left: 6%;
     }
   }
 

src/layout/components/Navbar.vue

@@ -17,9 +17,11 @@ const navbarBackgroundStyle = computed(() => {
 const showMenu = computed(() => route.path !== '/index')
 let leftMenu = [
   {name: '总  览', path: '/index', type: 'left', style: {}},
+  {name: '预报预警', path: '/index', type: 'left', style: {}},
 ]
 let rightMenu = [
-  {name: '智慧运维', path: '/application', type: 'right', style: {}},
+  {name: '智慧运维', path: '/index', type: 'right', style: {}},
+  {name: '业务管理', path: '/index', type: 'right', style: {}},
 ]
 const date = ref('')
 const time = ref('')
@@ -113,15 +115,15 @@ onMounted(() => {
 
     .left-menu-list,
     .right-menu-list {
-
+      display: flex;
     }
 
     .left-menu-list {
-      margin-right: 14%;
+      margin-right: 16%;
     }
 
     .right-menu-list {
-      margin-left: 14%;
+      margin-left: 16%;
     }
 
     .menu-item {

src/views/Home.vue

@@ -49,6 +49,7 @@ const right1Ref = ref(null)
 
 function reloadRight1() {
   const option = {
+    color: ['#fac858', '#ee6666'],
     tooltip: {
       trigger: 'axis',
       axisPointer: {
@@ -59,10 +60,10 @@ function reloadRight1() {
         let info = params[0].axisValueLabel
         for (let i = 0; i < params.length; i++) {
           let param = params[i];
-          if (param.value > 0) {
-            info += `<br/>${circle}${param.color}"></span> ${param.seriesName}: ${param.value}个`;
-            break
-          }
+          // if (param.value > 0) {
+          info += `<br/>${circle}${param.color}"></span> ${param.seriesName}: ${param.value}个`;
+          // break
+          // }
         }
         return info;
       }
@@ -85,25 +86,26 @@ function reloadRight1() {
     yAxis: {
       type: 'value',
       name: '个',
+      max: value => value.max + 1,
       nameTextStyle: {
-        color: '#fff',
+        color: '#02cacf',
       },
       axisLabel: {
-        color: '#fff',
+        color: '#02cacf',
       },
     },
     xAxis: {
       type: 'category',
       axisLabel: {
         // interval: 0,
-        rotate: -45, //旋转的角度从 -90 度到 90 度。
-        color: '#fff',
+        // rotate: -45, //旋转的角度从 -90 度到 90 度。
+        color: '#02cacf',
       },
-      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
+      data: ['河道', '闸坝', '潮位']
     },
     series: [
       {
-        name: 'aaa',
+        name: '超警戒（汛限）',
         type: 'bar',
         // stack: 'total',
         // barWidth: '20%',
@@ -113,20 +115,18 @@ function reloadRight1() {
           color: '#fff',
           formatter: params => params.value > 0 ? params.value + '个' : ''
         },
-        data: [1, 2, 4, 1, 2, 5, 2, 4]
+        data: [1, 2, 4]
       },
       {
-        name: 'bbb',
+        name: '超保证（设计）',
         type: 'bar',
-        // stack: 'total',
-        // barWidth: '20%',
         label: {
           show: true,
           position: 'top',
           color: '#fff',
           formatter: params => params.value > 0 ? params.value + '个' : ''
         },
-        data: [2, 1, 5, 2, 3, 4, 2, 4]
+        data: [0, 1, 2]
       }
     ]
   };
@@ -173,7 +173,7 @@ const right3Ref = ref(null)
 
 function reloadRight3() {
   const option = {
-    backgroundColor: "#0B2D55",
+    // backgroundColor: "#0B2D55",
     tooltip: {
       axisPointer: {
         type: "cross"
@@ -195,21 +195,22 @@ function reloadRight3() {
           color: '#233e64'
         },
       },
-      axisLabel: { //坐标轴刻度标签的相关设置
-        color: '#fff',
+      axisLabel: { // 坐标轴刻度标签的相关设置
+        color: '#02cacf',
       },
       axisTick: {show: false,},
-      data: [1, 2, 3, 4, 5, 6, 7, 889, 9, 90],
+      data: ['太师桥', '文桥', '双林桥', '思源', '太平桥'],
     }],
     yAxis: [{
-      name: 'm',
+      name: '℃',
       nameTextStyle: {
-        color: '#fff',
+        color: '#02cacf',
       },
-      min: value => value.min.toFixed(2),
+      min: value => (value.min - 1).toFixed(0),
+      max: value => (value.max + 1).toFixed(0),
       axisLabel: {
         margin: 20,
-        color: '#fff',
+        color: '#02cacf',
       },
       splitLine: {
         show: true,
@@ -223,9 +224,9 @@ function reloadRight3() {
       type: 'line',
       smooth: true, //是否平滑曲线显示
       lineStyle: {
-        color: "#3deaff"   // 线条颜色
+        color: "#3deaff"
       },
-      data: [1, 2, 3, 4, 5, 6, 7, 889, 9, 90],
+      data: [23.1, 22.7, 22.9, 23, 22.6],
     },
     ]
   };
@@ -336,7 +337,11 @@ bus.on('point_click', (data: any) => {
       <card01 style="height: 33%" title="站点清单">
         <stripe-table :columns="tableColumns" :data="tableData"></stripe-table>
       </card01>
-      <card01 style="height: 33%" title="水质分析">
+      <card01 style="height: 33%">
+        <template v-slot:header>
+          <span class="title">水质分析</span>
+          <span style="font-size: 0.8rem;">&nbsp;&nbsp;江南大运河沿线</span>
+        </template>
         <chart ref="right3Ref"></chart>
       </card01>
     </template>