4.24 给头部加高亮

src/components/header.vue

@@ -2,14 +2,14 @@
        <div class="bgk1">
         <div class="d-flex jc-center title_wrap">
             <div class="timers">
-            <span>{{props.name }}</span>
+            <span>{{headername }}</span>
             <div class="headertime">
               <p class="datayear">{{  headertime.dateYear }}</p>
               <p class="dateday" >{{  headertime.dateDay }}</p>
             </div>
           </div>
-          <div class="titlebtn titleanniu imgtupian" @click="handleSelect('1')">突水推演</div>
-            <div class="titlebtn titleanniu imgtupian" style="margin-right: 20px;" @click="handleSelect('2')">火灾推演</div>
+          <div class="titlebtn titleanniu imgtupian" :class="{headeractive: headeractive === '1'}"   @click="handleSelect('1')">突水推演</div>
+            <div class="titlebtn titleanniu imgtupian"  style="margin-right: 20px;" :class="{headeractive: headeractive === '2'}" @click="handleSelect('2')">火灾推演</div>
           <div class="d-flex jc-center s-content">
             <div class="title tiletimg">
             <div class="ve_logo_img">
@@ -20,8 +20,8 @@
             </div>
           </div>
           
-          <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('3')" >瓦斯爆炸推演</div>
-            <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('4')"  >模型库</div>
+          <div class="titlebtn titleanniu imgtupian2" :class="{headeractive: headeractive === '3'}"  @click="handleSelect('3')" >瓦斯爆炸推演</div>
+            <div class="titlebtn titleanniu imgtupian2" :class="{headeractive: headeractive === '4'}"   @click="handleSelect('4')"  >模型库</div>
         </div>
       </div>
      </template>
@@ -33,6 +33,7 @@ import logo from "@/assets/logo.png";
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
 import { timestampToTime,formatTime } from "@/js/lindex.js";
 let emit = defineEmits(['handleSelect'])
+let headername=ref();
 const props = defineProps({
     name:{
         type:String
@@ -40,7 +41,7 @@ const props = defineProps({
  
 
 });
- defineExpose({});
+let headeractive=ref(0);
  let headerobj = ref({
   time: "",
   name: "",
@@ -67,11 +68,18 @@ const timeFn=()=> {
     }
  const handleSelect = (key) => {
     headerid.value=key;
+    headeractive.value= headerid.value;
     emit('handleSelect', key);
-    props.name='';
+    headername.value="";
 };
+const hname=(val)=>{
+  headername.value=val// 获取项目名称
+}
+defineExpose({headeractive,hname});
    </script>
    <style  lang="scss" scoped>
-
+.headeractive{
+  background-image: url('/src/assets/img/Rectangle4562.png') !important;
+}
 
    </style>

src/view/appmian.vue

@@ -4,7 +4,7 @@
 
     <el-container>
       <el-header>
-      <reheader @handleSelect="handleSelect" :name="headerobj.name"/>
+      <reheader ref="reheaderref" @handleSelect="handleSelect" :name="headerobj.name"/>
     </el-header>
       <el-main>
    <div  class="maincontent">
@@ -111,6 +111,7 @@ import { contains } from "@kitware/vtk.js/Common/DataModel/BoundingBox";
 
 // import { vtkmodel } from "@/control/vtkModel.js";
 let activeIndeximg=ref( null);
+let reheaderref=ref();
 let lliudialog = ref();
 let sourcedis = ref();
 let classradio = ref();
@@ -303,6 +304,7 @@ const headerclick = (data) => {
   headerobj.value.name = data.name;
   headerobj.value.time = data.time;
   aid.value = data.aid;
+  reheaderref.value.hname(data.name);
  // state.value=lliudialog.value.state;
 };
 //首页组件调用的方法
@@ -333,7 +335,6 @@ const imgonclock=()=>{
 const handleSelect = (key) => {
   // window.location.reload();
  titleclick();
-
   activeIndeximg.value=key;
   bgk2false.value=true;
   indexref.value.btnlistshow=false;
@@ -349,6 +350,7 @@ const handleSelect = (key) => {
  resultbidui.value.accident6('5');
   activeIndex.value =key;
   //indexref.value.changeColor(null)
+  reheaderref.value.headeractive=key;
   switch (key) {
     case "1":
     classradio.value="Water";

src/view/result/Wdisaster.vue

@@ -219,22 +219,40 @@ request(params)
        dynamicHeaders.value=headertable;
       let warning=[];//一级警告
       let warning2=[];//二级警告
+      let warning3=[];//突水发生
+      let warning4=[];//安全区域
       for (let j = 0; j < res.vals.length; j++) {
-        if(res.vals[j].v1<=1&&res.vals[j].v1<2){
-          res.vals[j].state=0;
-        }else{
-          if(res.vals[j].v1 >= 2&&res.vals[j].v1< 10){
-          res.vals[j].state=1;
-        }else if(res.vals[j].v1>=10&&res.vals[j].v1<120){
-          res.vals[j].state=2;
-          warning2.push(res.vals[j].v1)
-        }else if(res.vals[j].v1>160){
-          warning.push(res.vals[j].v1)
-          res.vals[j].state=3;
+           if(Number(res.vals[j].v1)==0&&Number(res.vals[j].v1)<=0.1){
+            res.vals[j].state=0;
+            warning4.push(res.vals[j].v1);
+          }else if(Number(res.vals[j].v1)>0.1&&Number(res.vals[j].v1)<=0.5){
+            res.vals[j].state=1;
+            warning3.push(res.vals[j].v1);
+          }else if(Number(res.vals[j].v1)>0.5&&Number(res.vals[j].v1)<=1){
+            res.vals[j].state=2;
+            warning2.push(res.vals[j].v1);
+          }else if(Number(res.vals[j].v1)>1){
+            res.vals[j].state=3;
+            warning.push(res.vals[j].v1);
+          }
 
         }
-        }
-      }
+      // for (let j = 0; j < res.vals.length; j++) {
+      //   if(res.vals[j].v1<=1&&res.vals[j].v1<2){
+      //     res.vals[j].state=0;
+      //   }else{
+      //     if(res.vals[j].v1 >= 2&&res.vals[j].v1< 10){
+      //     res.vals[j].state=1;
+      //   }else if(res.vals[j].v1>=10&&res.vals[j].v1<120){
+      //     res.vals[j].state=2;
+      //     warning2.push(res.vals[j].v1)
+      //   }else if(res.vals[j].v1>160){
+      //     warning.push(res.vals[j].v1)
+      //     res.vals[j].state=3;
+
+      //   }
+      //   }
+      // }
  
      warnin2.value=warning2.length;
      warnin.value=warning.length;
@@ -284,36 +302,7 @@ const lineChart=()=>{
      ],
      yAxis: [
        {
-         type: 'value',
-         minInterval:1,
-         max: 700,
-         splitLine: {
-           show: true,
-           lineStyle:{
-             type:'dashed'
-           }
-         },
-         axisLine: {
-           lineStyle: {
-             type: 'solid',
-              color: '#E6E7EC',//左边线的颜色
-             width:1 //坐标线的宽度
-           }
-         },
-         axisLabel: {
-          type: 'value',
-           textStyle: {
-          color: function (value, index) {
-            if(value >=300){
-              return '#CE0000 '
-            } else{
-              return  '#ACD6FF'
-            }
-              // return value >= 120 ? '#CE0000  ': '#ACD6FF';
-          }
-           
-           }
-         }
+         type: 'value',  
        }
      ],
      color: 'rgba(37, 190, 171, 1)',

src/view/result/Wdisaster2.vue

@@ -212,24 +212,26 @@ request(params)
       }
     
        dynamicHeaders.value=headertable;
-      let warning=[];//一级警告
-      let warning2=[];//二级警告
-      for (let j = 0; j < res.vals.length; j++) {
-        if(res.vals[j].v1<=1&&res.vals[j].v1<2){
-          res.vals[j].state=0;
-        }else{
-          if(res.vals[j].v1 >= 2&&res.vals[j].v1< 10){
-          res.vals[j].state=1;
-        }else if(res.vals[j].v1>=10&&res.vals[j].v1<120){
-          res.vals[j].state=2;
-          warning2.push(res.vals[j].v1)
-        }else if(res.vals[j].v1>160){
-          warning.push(res.vals[j].v1)
-          res.vals[j].state=3;
+       let warning=[];//一级警告
+        let warning2=[];//二级警告
+        let warning3=[];//突水发生
+        let warning4=[];//安全区域
+        for (let j = 0; j < res.vals.length; j++) {
+           if(Number(res.vals[j].v1)==0&&Number(res.vals[j].v1)<=0.1){
+            res.vals[j].state=0;
+            warning4.push(res.vals[j].v1);
+          }else if(Number(res.vals[j].v1)>0.1&&Number(res.vals[j].v1)<=0.5){
+            res.vals[j].state=1;
+            warning3.push(res.vals[j].v1);
+          }else if(Number(res.vals[j].v1)>0.5&&Number(res.vals[j].v1)<=1){
+            res.vals[j].state=2;
+            warning2.push(res.vals[j].v1);
+          }else if(Number(res.vals[j].v1)>1){
+            res.vals[j].state=3;
+            warning.push(res.vals[j].v1);
+          }
 
         }
-        }
-      }
      warnin2.value=warning2.length;
      warnin.value=warning.length;
    
@@ -279,35 +281,7 @@ const lineChart=()=>{
      yAxis: [
        {
          type: 'value',
-         minInterval:1,
-         max: 700,
-         splitLine: {
-           show: true,
-           lineStyle:{
-             type:'dashed'
-           }
-         },
-         axisLine: {
-           lineStyle: {
-             type: 'solid',
-              color: '#E6E7EC',//左边线的颜色
-             width:1 //坐标线的宽度
-           }
-         },
-         axisLabel: {
-          type: 'value',
-           textStyle: {
-          color: function (value, index) {
-            if(value >=300){
-              return '#CE0000 '
-            } else{
-              return  '#ACD6FF'
-            }
-              // return value >= 120 ? '#CE0000  ': '#ACD6FF';
-          }
-           
-           }
-         }
+       
        }
      ],
      color: 'rgba(37, 190, 171, 1)',