4.16

src/style/style.css

@@ -201,7 +201,7 @@ body,html{
     line-height: 14px;
   }
   .dialog_class .el-dialog__footer {
-    position: absolute;
+    /* position: absolute; */
     bottom: 17px;
     display: flex;
   }
@@ -355,7 +355,7 @@ body,html{
     box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
 }
 
-.dialog_class {
+.shigutable {
     background-color: rgba(0, 102, 201, 0.1) !important;
     width: 500px;
 
@@ -1301,6 +1301,22 @@ font-size: .0833rem;
   text-align: center;
   position: absolute;
 }
+.bgk2 ul li  .el-image{
+  /* width: 100%;
+  height: 100%; */
+  transition: all 0.6s; 
+  cursor: pointer;
+}
+
+.bgk2 ul li:hover .el-image{
+  transform: scale(1.2);   
+
+}
+.activeimg{
+  transition: all 0.6s; 
+  transform: scale(1.2);   
+
+}
 .bgk2 ul .s1{
   top: 34%;
   left: 8%;

src/view/InfoDialoges.vue

@@ -3,7 +3,7 @@
     <div class="l_Dialog tuiy">
         <!-- 灾害类型 -->
         <el-dialog v-model="dialogVisible" width="482" align-center :modal="false" :close-on-click-modal="false"
-            draggable class="dialog_class bgcolor">
+            draggable class="dialog_class bgcolor zaihaisel">
             <template #header="{ titleId, titleClass }">
                 <div class="my-header">
                     <el-image :src="icon" fit="contain"></el-image>
@@ -25,7 +25,7 @@
                         <div class="borderimg"><el-button @click="dialogVisible = false">取消</el-button></div>
                     </div>
                     <div class="footerbtn">
-                        <div class="borderimg"><el-button @click="classclick(); dialogVisible= false;">
+                        <div class="borderimg"><el-button @click="classclick(classradio1); dialogVisible= false;">
                                 确定
                             </el-button></div>
                     </div>
@@ -33,7 +33,7 @@
             </template>
         </el-dialog>
         <!--火灾 事故列表 -->
-        <el-dialog v-model="dialog.dialogVisible_fire" width="600" :modal="false" :close-on-click-modal="false"
+        <el-dialog v-model="dialog.dialogVisible_fire" width="600"  @close="handleClose" :modal="false" :close-on-click-modal="false"
             draggable class="dialog_class bgcolor tablefocus shigutable">
 
             <template #header="{ titleId, titleClass }">
@@ -400,7 +400,7 @@ const changeModel= ()=>  {
 }
 let currentrow=ref(false);
 let placeholder=ref('某次某事件火灾事故');
-let emit = defineEmits(['headerclick', 'childfun', 'moxingclick','handleSelect','leftsimulation'])
+let emit = defineEmits(['headerclick', 'childfun', 'imgonclock','moxingclick','handleSelect','leftsimulation'])
 const props = defineProps({
     addselect: {
         type: Function,
@@ -420,6 +420,9 @@ const props = defineProps({
   activeIndex: {
     type: String,
     // default: '',activeIndex
+  }, activeIndeximg: {
+    type: String,
+    // default: '',activeIndex
   },
 
 });
@@ -574,15 +577,16 @@ const handleCurrentChange = ({ row, rowIndex }) => {
 // 类型选择
 const classclick = (val) => {
     classradio.value= val;
-    console.log(classradio.value);
-    console.log(22222)
     scoperadio.value="";
     dialog.value.dialogVisible_fire = true;
     props.addselect();
     getdata();
-
- 
 }
+// 
+const handleClose = () => {
+    emit('imgonclock');
+}
+
 // 事故确定列表
 const accident = () => {
     if (idobj.value.name == '') {
@@ -634,10 +638,11 @@ const accident = () => {
         //  emit('handleSelect', '1');
         fetchFileContent();
         accident2(props.activeIndex)
-        console.log(11112222333)
     // },100)
     }
     dialog.value.dialogVisible_fire = false;
+    
+    emit('imgonclock');
     }
   
 
@@ -670,6 +675,8 @@ const accident2 = (key) => {
     }
 
 }
+//
+
 //事故添加列表
 const sgadd = () => {
     const params = {

src/view/appmian.vue

@@ -20,6 +20,7 @@
           :valzaiqing="valzaiqing"
           :headerobj="headerobj"
           :activeIndex="activeIndex"
+          @imgonclock="imgonclock"
           @leftsimulation="leftsimulation"
           @headerclick="headerclick"
           @handleSelect="handleSelect"
@@ -38,7 +39,7 @@
    
     </div>
     </div>
-    <div class="vtkmodel1" id="infomodel"><InfoVtkmodel ref="vtkmodel" /></div>
+    <div class="vtkmodel1" id="infomodel" v-show="modelshow"><InfoVtkmodel ref="vtkmodel" /></div>
      
       </el-main>
    
@@ -46,19 +47,19 @@
       <div class="bgk2 bgk3">
           <div>
             <ul>
-              <li class="s1" @click="handleSelect('2')" >
+              <li class="s1"  :class="activeIndeximg=='2'?'activeimg':''"  @click="handleSelect('2')" >
                 <el-image :src="s1" fit="contain"></el-image>
                 <span class="stext">火灾推演</span>
               </li>
-              <li class="s2" @click="handleSelect('1')">
+              <li class="s2"  :class="activeIndeximg=='1'?'activeimg':''" @click="handleSelect('1')">
                 <el-image :src="s2" fit="contain"></el-image>
                 <span class="stext">突水推演</span>
               </li>
-              <li class="s3" @click="handleSelect('3')">
+              <li class="s3" :class="activeIndeximg=='3'?'activeimg':''" @click="handleSelect('3')">
                 <el-image :src="s3" fit="contain"></el-image>
                 <span class="stext">瓦斯爆炸推演</span>
               </li>
-              <li  class="s4" @click="handleSelect('4')">   <el-image :src="s4" fit="contain"></el-image>
+              <li  class="s4"  :class="activeIndeximg=='4'?'activeimg':''" @click="handleSelect('4')">   <el-image :src="s4" fit="contain"></el-image>
                 <span class="stext">模型库</span>
 
               </li>
@@ -67,10 +68,10 @@
         </div>
       </div>
       <div class="bkxolo" v-show="bkmodel">
-      <result ref="resultbidui" @titleclick="titleclick"  :classradio="classradio"></result></div>
+      <result ref="resultbidui" @titleclick="titleclick"  :classradio="classradio" ></result></div>
        <!-- 底部按钮三个页面 -->
   <div class="footer">
-    <Index ref="indexref" @indexchange="indexchange" @hiadden="hiadden"  :classradio="classradio" :aid="aid"/>
+    <Index ref="indexref" @indexchange="indexchange" @vtkshowfuc="vtkshowfuc" @hiadden="hiadden" :classradio="classradio" :aid="aid"/>
   </div>
     </el-container>
   <!-- </v-scale-screen> -->
@@ -107,7 +108,7 @@ import mitts from "@/utils/Bus";
 import { contains } from "@kitware/vtk.js/Common/DataModel/BoundingBox";
 
 // import { vtkmodel } from "@/control/vtkModel.js";
-
+let activeIndeximg=ref( null);
 let lliudialog = ref();
 let sourcedis = ref();
 let classradio = ref();
@@ -118,6 +119,7 @@ let menusen=ref();
 let indexref=ref();
 let configuratorref=ref();
 let bkmodel=ref(false);
+let modelshow=ref(true);
 const title = "灾情推演软件";
 const activeIndex = ref("1");
 const activeIndex2 = ref("1");
@@ -157,6 +159,7 @@ const  handleSelectzt=(val)=>{
   router.push({ path: "/" ,query:{classradio:val}});
 
 }
+
 // 当前时间
 const timeFn=()=> {
   headertime.value.timing = setInterval(() => {
@@ -170,6 +173,7 @@ const addselect = () => {
 };
 // 获取模拟数据对比
 const leftsimulation = (res,data) => {
+  console.log(mnindex.value)
   if (mnindex.value == "1") {
     resultleft.value.coids = res.coids;
     resultleft.value.totaltime = res.totaltime;
@@ -177,22 +181,24 @@ const leftsimulation = (res,data) => {
     resultleft.value.pickertime = res.acctime;
     resultleft.value.aid = res.aid;
     resultbidui.value.mntext1=data.name;
-    
-   
+    resultbidui.value.wdiclick(resultleft.value.aid,'1');
   } else {
+    console.log(22222)
+    console.log(resultbidui.value.mntext2)
     resultright.value.coids = res.coids;
     resultright.value.totaltime = res.totaltime;
     resultright.value.reportstep = res.reportstep;
     resultright.value.pickertime = res.acctime;
     resultright.value.aid = res.aid;
     resultbidui.value.mntext2=data.name;
+    resultbidui.value.wdiclick( resultright.value.aid,'2');
   }
 
     //TODO 
     if(resultleft.value.aid==''||resultright.value.aid==''||resultleft.value.aid==undefined||resultright.value.aid==undefined){
- 
 
     }else{
+  
       if (resultleft.value.coids != resultright.value.coids) {
     ElMessage.error('污染物不一样，无法进行比较')
     return;
@@ -218,6 +224,8 @@ resultbidui.value.timeline=res.acctime;
 resultbidui.value.oldtime=res.acctime;
 // resultbidui.value.zdtime=res.acctime;
 resultbidui.value.endtime= Number(res.totaltime)/Number(res.reportstep);
+console.log("我是第一个",resultleft.value.aid)
+console.log("我是第二个",resultright.value.aid)
 resultbidui.value.initAid(resultleft.value.aid,resultright.value.aid);
 resultbidui.value.clickflat=true;
     }
@@ -242,7 +250,7 @@ const titleclick = (val, index) => {
   if (val == "模拟数据") {
     lliudialog.value.dialogVisible = true;
   } else {
-    lliudialog.value.dialogVisible = true;
+   // lliudialog.value.dialogVisible = true;
     clearInterval();
   }
 };
@@ -254,7 +262,7 @@ const aidlist = () => {
 // index组件的方法
 const indexchange=(key)=>{
   bkmodel.value=true;
-resultbidui.value.accident6(key, aid.value);
+resultbidui.value.accident6(key,aid.value);
 }
 
 // 获取子组件的方法
@@ -281,6 +289,14 @@ const headerclick = (data) => {
 //首页组件调用的方法
 const handindodialoges=()=>{
 
+}
+// 隐藏图形
+const vtkshowfuc= (key)=>{
+ if(key==2){
+  modelshow.value=false;
+ }else{
+  modelshow.value=true;
+ }
 }
 //清空灾情推演隐藏
  const hiadden= (key)=>{
@@ -288,9 +304,15 @@ const handindodialoges=()=>{
       sourcedis.value.accident3(key);
       lliudialog.value.accident2(key);
  }
+const imgonclock=()=>{
 
+  activeIndeximg.value=null;
+}
 const handleSelect = (key) => {
   // router.push({ path: "/" ,query:{classradio:key}});
+ titleclick();
+
+  activeIndeximg.value=key;
   bgk2false.value=true;
   indexref.value.btnlistshow=false;
   if( bgk2false.value==true){
@@ -303,12 +325,14 @@ const handleSelect = (key) => {
   configuratorref.value.menumfalse();
   }
   indexref.value.btnlistshow=false;
-  resultbidui.value.accident6('5');
+ resultbidui.value.accident6('5');
   activeIndex.value =key;
+  indexref.value.changeColor(null)
   switch (key) {
     case "1":
     classradio.value="Water";
     lliudialog.value.classclick( classradio.value);
+  
       break;
     case "2":
     classradio.value="Fire";

src/view/index/index.vue

@@ -34,20 +34,23 @@ const props = defineProps({
     // default: '',activeIndex
   },
 
+
 });
 let firstleftref=ref();
 let towrightref=ref();
 let btnindex=ref(0);
-let emit = defineEmits(['indexchange','hiadden' ])
+let emit = defineEmits(['indexchange','hiadden','vtkshowfuc' ])
 let listArray = ref([
      { id: 0, name: "灾情推演",img:bt1 },
      { id: 1, name: "路径判断" ,img:bt2},
      { id: 2, name: "灾害对比" ,img:bt2},
    ]);
-let currentIndex=ref(0);
+let currentIndex=ref(null);
 let btnlistshow=ref(false);
 const changeColor=(index)=>{
     btnindex.value=index;
+    console.log(index);
+    emit("vtkshowfuc", index);
     currentIndex.value = btnindex.value;
     indexchange(btnindex.value);
    emit("indexchange", btnindex.value);
@@ -68,6 +71,7 @@ const indexchange=(key)=>{
     towrightref.value.towshow=true;
   }
   else{
+
     firstleftref.value.firstshow=false;
     towrightref.value.towshow=false;
     // threerightref.value.threeshow=false;
@@ -80,7 +84,7 @@ const hiddfalse=()=>{
 const showhadend=()=>{
     btnlistshow.value=true;
 }
-     defineExpose({showhadend,changeColor,btnindex,btnlistshow,hiddfalse});
+     defineExpose({showhadend,changeColor,btnindex,btnlistshow,hiddfalse,currentIndex});
    </script>
    <style  lang="scss" scoped>
 

src/view/result.vue

@@ -16,7 +16,7 @@
       </div>
       <!-- 动画 -->
 
-      <div class="L_aside L_aside1 asideg asidegbg leftbgimg1">
+      <div class="L_aside L_aside1 asideg asidegbg leftbgimg1 " :class="{'donghua':isdonghua}">
         <el-collapse accordion v-model="activeNames" class="bganimation">
           <el-collapse-item name="1" class="imgneon">
             <template #title>
@@ -25,19 +25,30 @@
             </template>
             <div class="rg_content">
               <div class="rg-padding">
-
                 <div class="animation_s">
-                  <el-slider :max="100" :min="0" v-model="count" @change="sliderchange">
-                  </el-slider>
-                  <!-- <el-progress type="line" :percentage="percentage" :color="customColor" :stroke-width="4"/> -->
-                  <div class="tanniu">
-                    <div><el-image :src="t1" fit="contain"></el-image></div>
-                    <div><el-image :src="t2" fit="contain"></el-image></div>
-                    <div><el-image :src="t3" fit="contain"></el-image></div>
-
-                  </div>
-                </div>
-
+              <el-slider :max="endtime" :min="starttime" v-model="formInline.count" @change="sliderchange">
+              </el-slider>
+              <div class="tanniu">
+                <ul>
+                  <li>
+                    <el-image :src="t1" fit="contain" @click="Prev()"></el-image>
+               
+                  </li>
+                  <li v-show="playshow">
+                    <el-image :src="t4" fit="contain" @click="play(500)"></el-image>
+                 
+                  </li>
+                  <li v-show="suspendshow">
+                    <el-image :src="t2"  fit="contain" @click="play(500)"></el-image>
+                   
+                  </li>
+                  <li>
+                    <el-image :src="t3" fit="contain" @click="increment()"></el-image>
+                 
+                  </li>
+                </ul>
+              </div>
+            </div>
 
               </div>
             </div>
@@ -54,24 +65,25 @@
       </div>
       <div class="resultleftxian">
         <div class="modle">
-          <resultLeft ref="setleftAid" :region="formInline.region" :count="formInline.count" />
+          <resultLeft ref="setleftAid" :region="formInline.region" :count="newcount" />
         </div>
         <!--检测点信息 -->
-        <wdisaster ref="wdisasterref" />
+        <wdisaster ref="wdisasterref"  :count="newcount"/>
       </div>
       <!-- 检测点 -->
     </div>
     <!-- 第二个 -->
     <div class="result_right r results re_pading">
-      <div class="resu_title reimg" @click="hazardtype('1')">
+      <div class="resu_title reimg" @click="hazardtype('2')">
         {{ mntext2 }}
       </div>
       <div class="resultleftxian">
         <div class="modle">
-          <resultRight ref="setrightAid" :region="formInline.region" :count="formInline.count" />
+          <!--  :count="formInline.count" -->
+          <resultRight ref="setrightAid" :region="formInline.region" :count="newcount" />
         </div>
         <!--检测点信息 -->
-        <wdisaster2 ref="wdisasterref2" />
+        <wdisaster2 ref="wdisasterref2" :count="newcount"/>
       </div>
       <!-- 检测点 -->
     </div>
@@ -92,7 +104,7 @@ import { vtkmodel } from "@/control/vtkModel.js";
 import t1 from "@/assets/img/t1.png";
 import t2 from "@/assets/img/t2.png";
 import t3 from "@/assets/img/t3.png";
-import t4 from "@/assets/img/t4.png";
+import t4 from "@/assets/img/bt.png";
 import mn from "@/assets/img/Group204.png";
 import t5 from "@/assets/img/Group207.png";
 import t6 from "@/assets/img/Frame.png";
@@ -104,6 +116,8 @@ const props = defineProps({
     type: String,
   },
 });
+let newcount = ref(1);
+let activeNames=ref(['1'])
 let wdisasterref = ref();
 let wdisasterref2 = ref();
 let resultyem = ref(false);
@@ -112,6 +126,10 @@ let leftcontentref = ref();
 let starttime = ref(1);
 let endtime = ref(60);
 let timenum = ref(2);
+let playshow=ref(true);
+let suspendshow=ref(false);
+let showfalse=ref(false);
+let isdonghua=ref(true);
 let time = ref();
 const isstop = ref(false);
 let aid = ref(Number);
@@ -119,6 +137,8 @@ let oldtime = ref();
 let timeline = ref("2024-03-22 09:42:06");
 let setleftAid = ref();
 let setrightAid = ref();
+let leftid=ref();
+let rightid=ref();
 let clickflat = ref(true);
 let mntext1 = ref('灾情模拟1');
 let mntext2 = ref('灾情模拟2');
@@ -128,18 +148,22 @@ const formInline = ref({
 });
 const zdtime = ref("");
 const strResultFormatlist = ref([]);
+const changeModel= ()=>  {
+  vtkmodel.clearJgAddMode();
+  vtkmodel.renderWindow.render();
+}
 const accident6 = (key, id) => {
 
   aid.value = id;
+
   if (key == 2) {
+    vtkmodel.clearAll();
     resultyem.value = true;
     console.log(resultyem.value);
-    nextTick(() => {
-      wdisasterref.value.lineChart();
-      wdisasterref2.value.lineChart2();
-    });
+  
 
   } else {
+    changeModel();
     resultyem.value = false;
   }
 };
@@ -158,6 +182,7 @@ function zdtimechange() {
 function sliderchange(val) {
   //fcon.step = count.value;
   //  console.log(val);
+  newcount.value =val;
   newtime();
 }
 // 时间计算
@@ -179,16 +204,22 @@ const newtime = () => {
 function Prev() {
   isstop.value = false;
   formInline.value.count--;
+  newcount.value = formInline.value.count;
   newtime();
 }
 //播放
-function play(time) {
-  isstop.value = true;
+const play =(time)=>{
+  showfalse.value=!showfalse.value;
+ // currentrow1.value=false;
+  if(showfalse.value){
+    suspendshow.value=true;
+    playshow.value=false;
+    isstop.value = true;//播放
   const sleep = (timeout = time) =>
     new Promise((resolve, reject) => {
       setTimeout(resolve, timeout);
     });
-  let timer = async (timeout) => {
+    let timer = async (timeout) => {
     while (formInline.value.count < endtime.value && isstop.value) {
       if (isstop.value == true) {
         await sleep(time);
@@ -196,12 +227,19 @@ function play(time) {
         // fcon.step = formInline.value.count ;
         // vtkScalarRead();
         // getMonitor();
+        newcount.value = formInline.value.count;
         newtime();
       }
     }
   };
-  timer(time);
+  timer(time); 
+  }else{
+    playshow.value=true;
+    suspendshow.value=false;
+    isstop.value = false;//暂停
 }
+}
+
 //暂停
 function suspend() {
   isstop.value = false;
@@ -213,6 +251,7 @@ function increment() {
     return;
   }
   formInline.value.count++;
+  newcount.value = formInline.value.count;
   newtime();
   console.log(formInline.value.count);
   // vtkScalarRead();
@@ -243,10 +282,22 @@ const hazardtype = (val) => {
 };
 
 const initAid = (leftAid, rightAid) => {
-  console.log("result.vue", leftAid, rightAid);
+  isdonghua.value=false;
   getMonitor(leftAid, rightAid);
+  //  wdisasterref.value.getinit(leftAid);
+  // wdisasterref2.value.getinit(rightAid);
+
+
 };
+const wdiclick=(id,selid)=>{
+  if(selid=='1'){//判断选择的那一个
+    wdisasterref.value.getinit(id);
+  }else if(selid=='2'){
+    wdisasterref2.value.getinit(id);
+}else{
 
+}
+}
 //监测点数据获取
 async function getMonitor(leftAid, rightAid) {
   const params = {
@@ -278,7 +329,6 @@ async function getMonitor(leftAid, rightAid) {
           formInline.value.count + 1,
           formInline.value.region
         );
-        //TODO right AID 没加
       } else {
         ElMessage({
           message: res.returnMsg,
@@ -291,6 +341,7 @@ async function getMonitor(leftAid, rightAid) {
 onMounted(() => {
   // leftcontentref.value.accident2('1','Water')
 });
+
 // 卸载时的操作
 onUnmounted(() => {
   // 清除定时器
@@ -298,7 +349,7 @@ onUnmounted(() => {
     clearInterval(timing.value);
   }
 });
-defineExpose({ accident6, initAid, mntext1, mntext2, clickflat, endtime, zdtime, timeline, oldtime });
+defineExpose({ accident6, initAid, mntext1, mntext2, clickflat, endtime, zdtime, timeline, oldtime,wdiclick });
 </script>
 <style scoped lang="scss">
 .heigjie {
@@ -319,11 +370,14 @@ defineExpose({ accident6, initAid, mntext1, mntext2, clickflat, endtime, zdtime,
 }
 
 .tanniu {
+
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-
+.tanniu ul{
+  width: 100%;
+}
 .resultyem {
   width: 100%;
   position: absolute;
@@ -484,4 +538,8 @@ defineExpose({ accident6, initAid, mntext1, mntext2, clickflat, endtime, zdtime,
 .newtime .el-input {
   width: 180px !important;
 }
+
+.donghua{
+    pointer-events: none; 
+}
 </style>

src/view/result/Wdisaster.vue

@@ -12,39 +12,42 @@
                   <div class="xian2 btncolor tablefocus  tablebk">
                     <!--  -->
                     <el-table
-                      :data="tableData"
-                      style="width: 100%"
-                      :row-class-name="tableRowClassName"
-                      :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
-                      :height="tableHeight"
-                      class="custom-table"
-                      @row-click="handleDelete($event)"
-                    >
-                      <el-table-column prop="date" label="监测点"  />
-                      <el-table-column prop="name" label="水位（m）"   />
-                      <el-table-column prop="name"  label="流量（m³/s）" />
-                      <el-table-column   prop="state"  label="预警" >
-                        <template #default="scope">
-                          <el-image v-if="scope.row.state=='0'" style="height: 100%" :src="bt1" fit="contain"></el-image>
-                          <el-image v-if="scope.row.state=='1'" style="height: 100%" :src="bt2" fit="contain"></el-image>
-                          <el-image v-if="scope.row.state=='2'"  style="height: 100%" :src="bt3" fit="contain"></el-image>
-                          <el-image v-if="scope.row.state=='3'" style="height: 100%" :src="bt4" fit="contain"></el-image>
-                        </template>
-                      </el-table-column>
-                    </el-table>
+                        :data="tableData2"
+                        style="width: 100%"
+                        :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
+                        @row-click="handleDelete($event)"
+                        :highlight-current-row="currentrow1" 
+                        :max-height="tableHeight"
+                      >
+                      <el-table-column prop="chname" label="监测点"  />
+                      <el-table-column
+                          v-for="(header, index) in dynamicHeaders"
+                          :key="index"
+                          :prop="header.prop"
+                          :label="header.label">
+                        </el-table-column>
+                        <el-table-column   prop="state"  label="预警" >
+                          <template #default="scope">
+                            <el-image v-if="scope.row.state=='0'" style="height: 100%" :src="bt1" fit="contain"></el-image>
+                            <el-image v-if="scope.row.state=='1'" style="height: 100%" :src="bt2" fit="contain"></el-image>
+                            <el-image v-if="scope.row.state=='2'"  style="height: 100%" :src="bt3" fit="contain"></el-image>
+                            <el-image v-if="scope.row.state=='3'" style="height: 100%" :src="bt4" fit="contain"></el-image>
+                          </template>
+                        </el-table-column>
+                      </el-table>
                   </div>
                 </div>
                   <div class="je_right duijc">
                     <div class="">
-                    <div class="zongjili img1">1<span>个</span></div>
-                    <div class="zongjili img2">12<span>个</span></div>
+                    <div class="zongjili img1">{{warnin}}<span>个</span></div>
+                    <div class="zongjili img2">{{warnin2}}<span>个</span></div>
                   </div>
                   </div>
                 </div>
                   <!-- 监测点 -->
                   <div class="L_aside ">
                     <div class="hedse jccolor">
-                      <el-icon class="iconimg1 Frame3" fit="contain"></el-icon>监测点
+                      <el-icon class="iconimg1 Frame3" fit="contain"></el-icon>{{ jcname }}
                 </div>
                 <div class="echart echartxian">
                 <div id="line2" style="width: 100%; height: 1.25rem;"></div></div>
@@ -60,161 +63,268 @@ import { ref, onMounted, reactive, } from "vue";
 import {RouterView,RouterLink } from "vue-router"
 import { request, uploadFile } from "@/utils/request";
 import * as echarts from 'echarts'
+import { createFireControl } from "@/control/fireControl.js";
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
-import bt1 from "@/assets/img/Group1376.png"
-import bt2 from "@/assets/img/Group1377.png"
+import bt4 from "@/assets/img/Group1376.png"
+import bt1 from "@/assets/img/Group1377.png"
 import bt3 from "@/assets/img/Group1395.png"
-import bt4 from "@/assets/img/Group1396.png"
-let tableHeight=ref(114)
-const tableData = ref([
-{
-  date: '检测点',
-  name: '1',
-  state: '1',
-  city: 'Los Angeles',
-  address: 'No. 189, Grove St, Los Angeles',
-  zip: 'CA 90036',
-  tag: 'Home',
-},
-{
-  date: '检测点',
-  name: '1',
-  state: '2',
-  city: 'Los Angeles',
-  address: 'No. 189, Grove St, Los Angeles',
-  zip: 'CA 90036',
-  tag: 'Office',
+import bt2 from "@/assets/img/Group1396.png"
+const props = defineProps({
+  count: {
+  type: Number,
+
 },
+});
+let tableHeight=ref(114)
+let aid=ref();
+let currentrow1=ref(false);
+let classradio=ref();
+let warnin=ref(0);
+let warnin2=ref(0);
+let steptimes = ref([]);
+let series = ref([]);
+let jcname=ref("监测点");
+const dynamicHeaders = ref([
 
 ]);
-const handleDelete=()=>{
+const tableData2 = ref([
+]);
+// 批量数据
+const handleDelete=(event)=>{
+ jcname.value=event.chname;
+
+ series.value=[];
+ steptimes.value=[];
+  currentrow1.value=true;
+//let arr=[];
+  const params = {
+    transCode: "D10019",
+    aid: aid.value,
+    chname: event.chname,
+  };
+  request(params)
+    .then((res) => {
+      if (res.returnCode == "000000000") {
+        for (let j = 0; j < res.steptimes.length; j++) {
+          steptimes.value.push(Object.values(res.steptimes[j]));
+        }     
+        for (let i = 0; i < res.rows.length; i++) {
+          let arr=[];
+          for (let k = 0; k < res.rows[i].data.length; k++) {
+            if(res.rows[i].data[k].val<0){
+              
+            }
+            arr.push(res.rows[i].data[k].val);
+          }
+          // var arr = Array.from(Object.values(res.rows[i].data),x=>x);
+        series.value.push({
+         name:res.rows[i].code,
+         type: 'line',
+      showSymbol: false,
+      smooth: true,
+      data:arr,//res.rows[i].data
+         itemStyle:{
+           normal:{
+             color: {
+               type: 'linear',
+               x: 0,
+               y: 0,
+               x2: 0,
+               y2: 1,
+               colorStops: [
+               {
+                 offset:1, color: '#ACD6FF ' // 0% 处的颜色
+               },
+               {
+                 offset:0.7, color: '#105CF0 '// 100% 处的颜色
+               },
+               {
+                 offset:0.66, color: '#FF7A00 '// 100% 处的颜色
+               },
+               {
+                 offset:0.2, color: '#FF0000 '// 100% 处的颜色
+               },
+               {
+                 offset:0, color: '#CE0000' // 0% 处的颜色FF7A00
+               }, 
+              
+              ],
+            
+               global: false // 缺省为 false
+             }
+           }
+         },
+         lineStyle: {
+                    width: 3, // 设置线条宽度
+                },
+          })
+        }
+      }
+      lineChart();
+    }) .catch((err) => {
+      ElMessage.error(err.returnMsg);
+    });
 
 }
 onMounted(() => {
 })
-const lineChart=()=>{
-let myChart = echarts.init(document.getElementById('line2'));
-let option = {
-   tooltip: {
-     trigger: 'axis',
-   },
-   grid: {
-     left: '0',
-     right: '0',
-     bottom: '10',
-     top:'20',
-     containLabel: true
-   },
-   xAxis: [
-     {
-       type: 'category',
-       // boundaryGap: false,
-       data: [0,10,20,30,40],
-       splitLine: {
-         show: false,
-       },
-       axisLine: {
-         lineStyle: {
-           type: 'solid',
-           color: '#E6E7EC',//左边线的颜色
-           width:'1'//坐标线的宽度
-         }
-       },
-       axisLabel: {
-         textStyle: {
-           color: '#B8CED6',//坐标值得具体的颜色
-         }
-       }
-     }
-   ],
-   yAxis: [
-     {
-       type: 'value',
-       minInterval:1,
-       max: 700,
-       splitLine: {
-         show: true,
-         lineStyle:{
-           type:'dashed'
-         }
-       },
-       axisLine: {
-         lineStyle: {
-           type: 'solid',
-            color: '#E6E7EC',//左边线的颜色
-           width:1 //坐标线的宽度
-         }
-       },
-       axisLabel: {
-        type: 'value',
-        // color: '#ACD6FF',
-         textStyle: {
-        //  color: 'red',//坐标值得具体的颜色
-        color: function (value, index) {
-          if(value >=300){
-            return '#CE0000 '
-          } else{
-            return  '#ACD6FF'
+ //父组件调用的init方法
+ function getinit(id,radio) {
+  aid.value=id;
+  console.log(id)
+  console.log(1111551)
+  classradio.value=radio;
+  getdata(props.count);
+  lineChart();
+
+ }
+ const fcon = createFireControl();
+//监测点数据获取
+ function getdata(step) {
+   
+const params = {
+  transCode: "D10018",
+  aid: aid.value,
+  step:step,
+};
+console.log( aid.value)
+request(params)
+  .then((res) => {
+    console.log(res)
+    if (res.returnCode == "000000000") {
+      let headertable=[];
+      for (let i = 0; i < res.codes.length; i++) {
+        let num=i+1
+        let newMap = new Map([
+          ["Temperature", "(℃)"],
+          ["Pressure", "(kg/s)"],
+          ["Pressure", "(kg/s)"],
+          ["CO2", "(%)"],
+          ["CO2", "(%)"],
+          ["H2S", "(%)"],
+          ["Flow", "(Pa)"],
+          ["Height", "(m)"],
+        ]);
+        newMap.forEach((value, key) => {
+          if ( key  == res.codes[i].code ) {
+            res.codes[i].code = key + value;
           }
-            // return value >= 120 ? '#CE0000  ': '#ACD6FF';
+        });
+        headertable.push(
+          { prop:'v'+num, label: res.codes[i].code },
+        )
+      }
+    
+       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;
+
+        }
         }
-         
+      }
+ 
+     warnin2.value=warning2.length;
+     warnin.value=warning.length;
+   
+      tableData2.value=res.vals;
+    }
+  }) .catch((err) => {
+    ElMessage.error(err.returnMsg);
+  });
+}
+
+const lineChart=()=>{
+  // console.log(series.value);
+  let myChart;
+ myChart = echarts.init(document.getElementById('line2'));
+  let option = {
+     tooltip: {
+       trigger: 'axis',
+     },
+     grid: {
+       left: '0',
+       right: '0',
+       bottom: '10',
+       top:'20',
+       containLabel: true
+     },
+     xAxis: [
+       {
+         type: 'category',
+         data:steptimes.value,
+         splitLine: {
+           show: false,
+         },
+         axisLine: {
+           lineStyle: {
+             type: 'solid',
+             color: '#E6E7EC',//左边线的颜色
+             width:'1'//坐标线的宽度
+           }
+         },
+         axisLabel: {
+           textStyle: {
+             color: '#B8CED6',//坐标值得具体的颜色
+           }
          }
        }
-     }
-   ],
-   color: 'rgba(37, 190, 171, 1)',
-   series: [
-     {
-       name: '',
-       type: 'line',
-    showSymbol: false,
-    smooth: true,
-    data: [0,60,120,240,360],
-       itemStyle:{
-         normal:{
-           color: {
-             type: 'linear',
-             x: 0,
-             y: 0,
-             x2: 0,
-             y2: 1,
-             colorStops: [
-             {
-               offset:1, color: '#ACD6FF ' // 0% 处的颜色
-             },
-             {
-               offset:0.7, color: '#105CF0 '// 100% 处的颜色
-             },
-             {
-               offset:0.66, color: '#FF7A00 '// 100% 处的颜色
-             },
-             {
-               offset:0.2, color: '#FF0000 '// 100% 处的颜色
-             },
-             {
-               offset:0, color: '#CE0000' // 0% 处的颜色FF7A00
-             }, 
-            
-            ],
-          
-             global: false // 缺省为 false
+     ],
+     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';
+          }
+           
            }
          }
-       },
-       lineStyle: {
-                  width: 3, // 设置线条宽度
-              },
-
-     }
-   ]
- }
- myChart.setOption(option);
- window.onresize = function() {
-  // 让图表自适应大小
-  myChart.resize();
+       }
+     ],
+     color: 'rgba(37, 190, 171, 1)',
+     series:series.value
+   }
+   myChart.setOption(option);
+   window.onresize = function() {
+    // 让图表自适应大小
+    myChart.resize();
 };
-
+ 
+ 
 
 // // 监听窗口大小变化
 // myChart.dispatchAction({ //设置激活第一个选项
@@ -223,5 +333,13 @@ let option = {
 //      dataIndex: 0
 //    });
 }
-   defineExpose({lineChart});
+watch(
+  () => [props.count],
+  (newVal, oldVal) => {
+    console.log("监听到了",newVal)
+    getdata(newVal[0]);
+  },
+  { deep: true }
+); //深度监视
+   defineExpose({getinit});
  </script>

src/view/result/Wdisaster2.vue

@@ -1,28 +1,31 @@
 <template>
-    <!-- 水灾灾害信息 -->
-    <div class="waterdisaster"> 
-      <div class="asides_content">
-                <div class="jc_content tablecolor">
-                  <div class="jc_padding">
-                    <div class="re_tele">灾害信息展示
-                      <div class="btn">生成报告</div>
-                    </div >
-                    <div class="jiancd">
-                    <div class="je_left duijc">
-                    <div class="xian2 btncolor tablefocus  tablebk">
-                      <!--  -->
-                      <el-table
+  <!-- 水灾灾害信息 -->
+  <div class="waterdisaster"> 
+    <div class="asides_content">
+              <div class="jc_content tablecolor">
+                <div class="jc_padding">
+                  <div class="re_tele">灾害信息展示
+                    <div class="btn">生成报告</div>
+                  </div >
+                  <div class="jiancd">
+                  <div class="je_left duijc">
+                  <div class="xian2 btncolor tablefocus  tablebk">
+                    <!--  -->
+                    <el-table
                         :data="tableData"
                         style="width: 100%"
-                        :row-class-name="tableRowClassName"
                         :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
-                        :height="tableHeight"
-                        class="custom-table"
                         @row-click="handleDelete($event)"
+                        :highlight-current-row="currentrow1" 
+                        :max-height="tableHeight"
                       >
-                        <el-table-column prop="date" label="监测点"  />
-                        <el-table-column prop="name" label="水位（m）"   />
-                        <el-table-column prop="name"  label="流量（m³/s）" />
+                      <el-table-column prop="chname" label="监测点"  />
+                      <el-table-column
+                          v-for="(header, index) in dynamicHeaders"
+                          :key="index"
+                          :prop="header.prop"
+                          :label="header.label">
+                        </el-table-column>
                         <el-table-column   prop="state"  label="预警" >
                           <template #default="scope">
                             <el-image v-if="scope.row.state=='0'" style="height: 100%" :src="bt1" fit="contain"></el-image>
@@ -32,68 +35,215 @@
                           </template>
                         </el-table-column>
                       </el-table>
-                    </div>
-                  </div>
-                    <div class="je_right duijc">
-                      <div class="">
-                      <div class="zongjili img1">1<span>个</span></div>
-                      <div class="zongjili img2">12<span>个</span></div>
-                    </div>
-                    </div>
                   </div>
-                    <!-- 监测点 -->
-                    <div class="L_aside ">
-                      <div class="hedse jccolor">
-                        <el-icon class="iconimg1 Frame3" fit="contain"></el-icon>监测点
-                  </div>
-                  <div class="echart echartxian">
-                  <div id="line3" style="width: 100%; height: 1.25rem;"></div></div>
+                </div>
+                  <div class="je_right duijc">
+                    <div class="">
+                    <div class="zongjili img1">{{warnin}}<span>个</span></div>
+                    <div class="zongjili img2">{{warnin2}}<span>个</span></div>
                   </div>
                   </div>
                 </div>
-               </div>
-    </div>
+                  <!-- 监测点 -->
+                  <div class="L_aside ">
+                    <div class="hedse jccolor">
+                      <el-icon class="iconimg1 Frame3" fit="contain"></el-icon>{{ jcname }}
+                </div>
+                <div class="echart echartxian">
+                <div id="line3" style="width: 100%; height: 1.25rem;"></div></div>
+                </div>
+                </div>
+              </div>
+             </div>
+  </div>
 
-     </template>
-   <script setup>
+   </template>
+ <script setup>
 import { ref, onMounted, reactive, } from "vue";
 import {RouterView,RouterLink } from "vue-router"
 import { request, uploadFile } from "@/utils/request";
 import * as echarts from 'echarts'
+import { createFireControl } from "@/control/fireControl.js";
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
-import bt1 from "@/assets/img/Group1376.png"
-import bt2 from "@/assets/img/Group1377.png"
+import bt4 from "@/assets/img/Group1376.png"
+import bt1 from "@/assets/img/Group1377.png"
 import bt3 from "@/assets/img/Group1395.png"
-import bt4 from "@/assets/img/Group1396.png"
+import bt2 from "@/assets/img/Group1396.png"
+const props = defineProps({
+  count: {
+  type: Number,
+
+},
+});
 let tableHeight=ref(114)
-const tableData = ref([
-  {
-    date: '检测点',
-    name: '1',
-    state: '1',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-    tag: 'Home',
-  },
-  {
-    date: '检测点',
-    name: '1',
-    state: '2',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-    tag: 'Office',
-  },
+let aid=ref();
+let currentrow1=ref(false);
+let classradio=ref();
+let warnin=ref(0);
+let warnin2=ref(0);
+let steptimes = ref([]);
+let series = ref([]);
+let jcname=ref("监测点");
+const dynamicHeaders = ref([
 
 ]);
-const handleDelete=()=>{
+const tableData = ref([
+]);
+// 批量数据
+const handleDelete=(event)=>{
+ jcname.value=event.chname;
+
+ series.value=[];
+ steptimes.value=[];
+  currentrow1.value=true;
+//let arr=[];
+  const params = {
+    transCode: "D10019",
+    aid: aid.value,
+    chname: event.chname,
+  };
+  request(params)
+    .then((res) => {
+      if (res.returnCode == "000000000") {
+        for (let j = 0; j < res.steptimes.length; j++) {
+          steptimes.value.push(Object.values(res.steptimes[j]));
+        }     
+        for (let i = 0; i < res.rows.length; i++) {
+          let arr=[];
+          for (let k = 0; k < res.rows[i].data.length; k++) {
+            if(res.rows[i].data[k].val<0){
+              
+            }
+            arr.push(res.rows[i].data[k].val);
+          }
+          // var arr = Array.from(Object.values(res.rows[i].data),x=>x);
+        series.value.push({
+         name:res.rows[i].code,
+         type: 'line',
+      showSymbol: false,
+      smooth: true,
+      data:arr,//res.rows[i].data
+         itemStyle:{
+           normal:{
+             color: {
+               type: 'linear',
+               x: 0,
+               y: 0,
+               x2: 0,
+               y2: 1,
+               colorStops: [
+               {
+                 offset:1, color: '#ACD6FF ' // 0% 处的颜色
+               },
+               {
+                 offset:0.7, color: '#105CF0 '// 100% 处的颜色
+               },
+               {
+                 offset:0.66, color: '#FF7A00 '// 100% 处的颜色
+               },
+               {
+                 offset:0.2, color: '#FF0000 '// 100% 处的颜色
+               },
+               {
+                 offset:0, color: '#CE0000' // 0% 处的颜色FF7A00
+               }, 
+              
+              ],
+            
+               global: false // 缺省为 false
+             }
+           }
+         },
+         lineStyle: {
+                    width: 3, // 设置线条宽度
+                },
+          })
+        }
+      }
+      lineChart();
+    }) .catch((err) => {
+      ElMessage.error(err.returnMsg);
+    });
 
 }
 onMounted(() => {
 })
-const lineChart2=()=>{
- let myChart = echarts.init(document.getElementById('line3'));
+ //父组件调用的init方法
+ function getinit(id,radio) {
+  aid.value=id;
+  classradio.value=radio;
+  getdata(props.count);
+  lineChart();
+
+ }
+ const fcon = createFireControl();
+//监测点数据获取
+async  function getdata(val) {
+const params = {
+  transCode: "D10018",
+  aid: aid.value,
+  step: val,
+};
+request(params)
+  .then((res) => {
+    console.log()
+    if (res.returnCode == "000000000") {
+      let headertable=[];
+      for (let i = 0; i < res.codes.length; i++) {
+        let num=i+1
+        let newMap = new Map([
+          ["Temperature", "(℃)"],
+          ["Pressure", "(kg/s)"],
+          ["Pressure", "(kg/s)"],
+          ["CO2", "(%)"],
+          ["CO2", "(%)"],
+          ["H2S", "(%)"],
+          ["Flow", "(Pa)"],
+          ["Height", "(m)"],
+        ]);
+        newMap.forEach((value, key) => {
+          if ( key  == res.codes[i].code ) {
+            res.codes[i].code = key + value;
+          }
+        });
+        headertable.push(
+          { prop:'v'+num, label: res.codes[i].code },
+        )
+      }
+    
+       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;
+
+        }
+        }
+      }
+     warnin2.value=warning2.length;
+     warnin.value=warning.length;
+   
+      tableData.value=res.vals;
+    }
+  }) .catch((err) => {
+    ElMessage.error(err.returnMsg);
+  });
+}
+
+const lineChart=()=>{
+  // console.log(series.value);
+  let myChart;
+ myChart = echarts.init(document.getElementById('line3'));
   let option = {
      tooltip: {
        trigger: 'axis',
@@ -108,8 +258,7 @@ const lineChart2=()=>{
      xAxis: [
        {
          type: 'category',
-         // boundaryGap: false,
-         data: [0,10,20,30,40],
+         data:steptimes.value,
          splitLine: {
            show: false,
          },
@@ -147,9 +296,7 @@ const lineChart2=()=>{
          },
          axisLabel: {
           type: 'value',
-          // color: '#ACD6FF',
            textStyle: {
-          //  color: 'red',//坐标值得具体的颜色
           color: function (value, index) {
             if(value >=300){
               return '#CE0000 '
@@ -164,50 +311,7 @@ const lineChart2=()=>{
        }
      ],
      color: 'rgba(37, 190, 171, 1)',
-     series: [
-       {
-         name: '',
-         type: 'line',
-      showSymbol: false,
-      smooth: true,
-      data: [0,60,120,240,360],
-         itemStyle:{
-           normal:{
-             color: {
-               type: 'linear',
-               x: 0,
-               y: 0,
-               x2: 0,
-               y2: 1,
-               colorStops: [
-               {
-                 offset:1, color: '#ACD6FF ' // 0% 处的颜色
-               },
-               {
-                 offset:0.7, color: '#105CF0 '// 100% 处的颜色
-               },
-               {
-                 offset:0.66, color: '#FF7A00 '// 100% 处的颜色
-               },
-               {
-                 offset:0.2, color: '#FF0000 '// 100% 处的颜色
-               },
-               {
-                 offset:0, color: '#CE0000' // 0% 处的颜色FF7A00
-               }, 
-              
-              ],
-            
-               global: false // 缺省为 false
-             }
-           }
-         },
-         lineStyle: {
-                    width: 3, // 设置线条宽度
-                },
-
-       }
-     ]
+     series:series.value
    }
    myChart.setOption(option);
    window.onresize = function() {
@@ -216,6 +320,7 @@ const lineChart2=()=>{
 };
  
  
+
 // // 监听窗口大小变化
 // myChart.dispatchAction({ //设置激活第一个选项
 //      type: 'showTip',
@@ -223,5 +328,12 @@ const lineChart2=()=>{
 //      dataIndex: 0
 //    });
 }
-     defineExpose({lineChart2});
-   </script>
+watch(
+  () => [props.count],
+  (newVal, oldVal) => {
+    getdata(newVal[0]);
+  },
+  { deep: true }
+); //深度监视
+   defineExpose({getinit});
+ </script>