4.15

src/style/style.css

@@ -9,6 +9,7 @@ body,html{
   }
   .mainpdding{
     padding-left: .1094rem;
+    margin-top: 71px;
   }
   .line {
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
@@ -1342,7 +1343,7 @@ font-size: .0833rem;
   position: absolute;
     z-index: 100; 
     width: 100%;
-    height: 100vh;
+    height: calc(100vh - 58px);;
 
   
 
@@ -1586,4 +1587,26 @@ font-size: .0677rem;
   position: fixed;
   right: 15px;
   top: 70px;
+  z-index: 207;
+}
+.el-table__body tr.current-row>td.el-table__cell{
+background-color: #F9A466  !important;
+}
+.jcshijian{
+  margin-top: .1094rem;
+}
+.zongji .img4{
+  line-height: 1.5;
+  font-size: 10px;
+}
+.zongji .jcshijian{
+  line-height: 1.5;
+  font-size:8px;
+  text-align: center;
+  white-space:nowrap;
+}
+.el-header {
+  position: fixed;
+  width: 100%;
+  z-index: 10000;
 }

src/view/appmian.vue

@@ -70,7 +70,7 @@
       <result ref="resultbidui" @titleclick="titleclick"  :classradio="classradio"></result></div>
        <!-- 底部按钮三个页面 -->
   <div class="footer">
-    <Index ref="indexref" @indexchange="indexchange" @hiadden="hiadden"/>
+    <Index ref="indexref" @indexchange="indexchange" @hiadden="hiadden"  :classradio="classradio" :aid="aid"/>
   </div>
     </el-container>
   <!-- </v-scale-screen> -->

src/view/index/animation.vue

@@ -19,6 +19,7 @@
               <!-- <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="t4" 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>
                 

src/view/index/first-left.vue

@@ -12,8 +12,8 @@
             <div class="rg_content">
               <div class="rg-padding">
               <div class="zongji">
-                <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 class="asides_content">
                 <div class="jc_content tablecolor">
@@ -26,11 +26,20 @@
                         :row-class-name="tableRowClassName"
                         :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
                         @row-click="handleDelete($event)"
+                        :highlight-current-row="currentrow1" 
                         :max-height="tableHeight"
                       >
-                        <el-table-column prop="date" label="监测点"  />
+                      <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="date" label="监测点"  />
                         <el-table-column prop="name" label="水位（m）"   />
-                        <el-table-column prop="name"  label="流量（m³/s）" />
+                        <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>
@@ -47,13 +56,13 @@
               <!-- 监测点 -->
               <div>
                 <div class="hedse">
-              <el-icon class="iconimg1 Frame3" fit="contain"></el-icon>监测点
+              <el-icon class="iconimg1 Frame3" fit="contain"></el-icon>{{ jcname }}
             </div>
             <div class="echart">
             <div id="line" style="width: 1.526rem;height:1.03rem;"></div></div>
             <div class="zongji">
-                <div class="zongjili img3">50<span>m</span></div>
-                <div class="zongjili img4">2024-03-20<span>14:23:00</span></div>
+                <div class="zongjili img3">{{ heightnum }}<span>m</span></div>
+                <div class="zongjili img4"><p class="jcshijian">2024-03-20</p><p>14:23:00</p></div>
               </div>
             </div>
             </div>
@@ -72,7 +81,7 @@
             
               <div class="animation_s">
               <el-slider
-                :max="100"
+                :max="60"
                 :min="0"
                 v-model="count"
                 @change="sliderchange"
@@ -80,9 +89,10 @@
               </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><el-image :src="t1" fit="contain" @click="Prev" ></el-image></div>
+                <div><el-image :src="t2" fit="contain" v-show="suspendshow" @click="play(500)" ></el-image></div>
+                <div><el-image :src="t4" fit="contain" v-show="playshow" @click="play(500)" ></el-image></div>
+                <div><el-image :src="t3" fit="contain" @click="increment"></el-image></div>
                 
               </div>
             </div>
@@ -109,56 +119,313 @@ import { RouterView, RouterLink } from "vue-router"
 import { request, uploadFile } from "@/utils/request";
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
 import * as echarts from 'echarts'
-import bt1 from "@/assets/img/Group1376.png"
-import bt2 from "@/assets/img/Group1377.png"
+import { createFireControl } from "@/control/fireControl.js";
+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"
 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";
 let firstshow = ref(false);
 let activeNames = ref(["1"]);
-let tableHeight = ref(150);
-;
-let count=ref(60)
-const tableData = [
-  {
-    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 tableHeight = ref(130);
+let playshow=ref(true);
+let showfalse=ref(false);
+let suspendshow=ref(false);
+const isstop = ref(false);
+let count=ref(1);
+let starttime = ref(1);
+let endtime = ref(60);
+let timenum = ref(2);
+let aid = ref();
+let newcount = ref(0);
+let timing = ref(null);
+let timing3 = ref(null);
+let timing2 = ref(null);
+let currentrow1 = ref(false);
+let steptimes = ref([]);
+let series = ref([]);
+let heightnum=ref("0");
+let jcname=ref("监测点");
+let state=ref();
+let warnin=ref(0);
+let warnin2=ref(0);
+const dynamicHeaders = ref([
 
+]);
+const tableData =ref( [
+  // {
+  //   date: '检测点',
+  //   name: '1',
+  //   state: '1',
+  //   city: 'Los Angeles',
+  //   address: 'No. 189, Grove St, Los Angeles',
+  //   v1: 'CA 90036',
+  //   v2: 'Home',
+  // },
+  // {
+  //   date: '检测点',
+  //   name: '1',
+  //   state: '2',
+  //   city: 'Los Angeles',
+  //   address: 'No. 189, Grove St, Los Angeles',
+  //   v1: 'CA 90036',
+  //   v2: 'Office',
+  // },
 
-]
+
+])
 let myChart;
 onMounted(() => {
-  window.onresize = function() {
-    // 让图表自适应大小
-    myChart.resize();
-};
-  lineChart();
+//   window.onresize = function() {
+//     // 让图表自适应大小
+//     myChart.resize();
+
+// };
+
 });
+const fcon = createFireControl();
+// 检测点的结果获取
+// 父组件获取的方法初始化 
+const indexinit= (id)=>{
+  aid.value=id;
+  fcon.step=count.value;
+  getMonitor();
+  lineChart();
+}
+//监测点数据获取
+async  function getMonitor() {
+
+  const params = {
+    transCode: "D10018",
+    aid: aid.value,
+    step: fcon.step,
+  };
+  request(params)
+    .then((res) => {
+      console.log()
+      if (res.returnCode == "000000000") {
+        let headertable=[];
+        //let s=0;
+        // dynamicHeaders.value=res.codes;
+        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 ) {
+              console.log(key);
+              res.codes[i].code = key + value;
+            }
+          });
+          headertable.push(
+            { prop:'v'+num, label: res.codes[i].code },
+          )
+
+        // { prop: 'state', label: '操作' },
+        // ...更多表头数据
+        }
+         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;
+
+          }
+     
+          }
+          // else{
+          //   console.log(22222)
+
+          // }
+
+        }
+       warnin2.value=warning2.length;
+       warnin.value=warning.length;
+        tableData.value=res.vals;
+      }
+    }) .catch((err) => {
+      ElMessage.error(err.returnMsg);
+    });
+  }
+//回到上一页
+function Prev() {
+  currentrow1.value=false;
+  isstop.value = false;
+  count.value--;
+  fcon.step = count.value;
+  newcount.value = count.value;
+  // vtkScalarRead();
+ // getMonitor();
+}
+//  下一页
+function increment() {
+  currentrow1.value=false;
+  isstop.value = false;
+  if (count.value == endtime.value) {
+    return;
+  }
+  count.value++;
+  newcount.value = count.value;
+  fcon.step = count.value;
+  console.log( newcount.value );
+  // vtkScalarRead();
+   //getMonitor();
+}
+// 播放暂停
+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) => {
+    while (count.value < endtime.value && isstop.value) {
+      if (isstop.value == true) {
+        await sleep(time);
+        count.value++;
+        fcon.step = count.value;
+        newcount.value = count.value;
+        // vtkScalarRead();
+        // getMonitor();
+       // getMonitor();
+      }
+    }
+  };
+  console.log(count.value)
+  timer(time); 
+  }else{
+    playshow.value=true;
+    suspendshow.value=false;
+    isstop.value = false;//暂停
+}
+}
+function sliderchange(val) {
+  suspendshow.value=false;
+    playshow.value=true;
+  isstop.value = false;
+  newcount.value = count.value;
+  fcon.step = count.value;
+  console.log(count.value);
+  // console.log(count.value);
+  // vtkScalarRead();
+  // getMonitor();
+}
 const tableRowClassName=()=>{
 
 }
-const handleDelete=()=>{
+// 批量数据
+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, // 设置线条宽度
+                },
+          })
+        }
+        const max = Math.max(...series.value[0].data);
+        heightnum.value=max;
+      }
+      lineChart();
+    }) .catch((err) => {
+      ElMessage.error(err.returnMsg);
+    });
+
+}
+const linedata=()=>{
 
 }
 const lineChart=()=>{
+  // console.log(series.value);
+
  myChart = echarts.init(document.getElementById('line'));
   let option = {
      tooltip: {
@@ -174,8 +441,7 @@ const lineChart=()=>{
      xAxis: [
        {
          type: 'category',
-         // boundaryGap: false,
-         data: [0,10,20,30,40],
+         data:steptimes.value,
          splitLine: {
            show: false,
          },
@@ -213,9 +479,7 @@ const lineChart=()=>{
          },
          axisLabel: {
           type: 'value',
-          // color: '#ACD6FF',
            textStyle: {
-          //  color: 'red',//坐标值得具体的颜色
           color: function (value, index) {
             if(value >=300){
               return '#CE0000 '
@@ -230,92 +494,7 @@ const lineChart=()=>{
        }
      ],
      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, // 设置线条宽度
-                },
-
-       },
-       {
-         name: '',
-         type: 'line',
-      showSymbol: false,
-      smooth: true,
-      data: [1,10,120,10,20],
-         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() {
@@ -331,7 +510,30 @@ const lineChart=()=>{
 //      dataIndex: 0
 //    });
 }
-defineExpose({firstshow});
+function vtkScalarRead() {
+  fcon
+    .getScalrsByStep(fcon.step)
+    .then((result) => {
+      // console.log(fcon.scalar);
+      velocityRead() ;
+      vtkShow();
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+watch(
+  newcount,
+  (newVal, oldVal) => {
+console.log("值改变了", newVal, oldVal);
+    fcon.step = newVal;
+    getMonitor();
+     vtkScalarRead();
+
+  },
+  { deep: true }
+); //深度监视
+defineExpose({firstshow,indexinit});
 </script>
 <style lang="scss" scoped>
 .el-slider {

src/view/index/index.vue

@@ -10,8 +10,8 @@
             <li class="fontcolor"> <el-image  :src="bt3" fit="contain"></el-image>灾害对比</li> -->
         </ul>
     </div>
-    <firstLeft ref="firstleftref" :classradio="classradio" :aid="aid" />
-    <towright ref="towrightref" :classradio="classradio" :aid="aid" />
+    <firstLeft ref="firstleftref" />
+    <towright ref="towrightref"  />
      </template>
    <script setup>
 import { ref, onMounted, reactive, } from "vue";
@@ -23,6 +23,18 @@ import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
 import bt1 from "@/assets/img/bt1.png"
 import bt2 from "@/assets/img/bt2.png"
 import bt3 from "@/assets/img/bt2.png"
+const props = defineProps({
+  
+    classradio: {
+    type: String,
+    // default: '',activeIndex
+  },
+  aid: {
+    type: String,
+    // default: '',activeIndex
+  },
+
+});
 let firstleftref=ref();
 let towrightref=ref();
 let btnindex=ref(0);
@@ -49,6 +61,8 @@ const indexchange=(key)=>{
   if(key==0){
     firstleftref.value.firstshow=true;
     towrightref.value.towshow=false;
+    firstleftref.value.indexinit(props.aid);
+
   }else if(key==1){
     firstleftref.value.firstshow=false;
     towrightref.value.towshow=true;

src/view/result.vue

@@ -132,9 +132,7 @@ const accident6 = (key, id) => {
 
   aid.value = id;
   if (key == 2) {
-    vtkmodel.clearAll();
     resultyem.value = true;
-    console.log(222222);
     console.log(resultyem.value);
     nextTick(() => {
       wdisasterref.value.lineChart();