3.12

src/view/components/InfoAnimation.vue

@@ -2,8 +2,8 @@
   <!-- 所有弹出框 -->
   <div class="l_Dialog">
     <!-- 推演结果 -->
-    <el-aside width="278px" class="L_aside asideg asidegbg leftbgimg" v-show="monitor">
-      <div class="result">
+    <el-aside width="278px" class="L_aside asideg asidegbg leftbgimg " v-show="monitor">
+      <div class="result result1">
         <el-tabs v-model="resultactiveName" type="card" class="demo-tabs" @tab-click="handleClick">
           <el-tab-pane label="当前时间" name="first">
             <div class="newtime">{{ newtime }}</div>
@@ -46,34 +46,42 @@
     </el-aside>
     <!-- 监测点 -->
     <!-- 监测点 -->
-    <div class="demo-collapse jiancedian asideg1 collapseeion" v-show="monitor">
+    <div class="demo-collapse jiancedian asideg1 jc_header  collapseeion jianstyle" v-show="monitor">
       <el-collapse accordion v-model="activeNames">
         <el-collapse-item name="1">
           <template #title>
-            <div class="jc_header he_pading color1">
-              <el-form-item label="污染物选择:">
+            <div class="he_pading color1">
+              <el-form-item label="物理量:" v-if="props.classradio=='Fire'">
                 <el-select v-model="formInline.region" @change="regionchange" placeholder="请选择">
                   <el-option v-for="item in strResultFormatlist" :key="item.id" :label="item.name"
                     :value="item.value"></el-option>
                 </el-select>
               </el-form-item>
+              <div class="woter" v-else>
+                <span>物理量：</span>
+                <span>水位：100ml</span>
+              </div>
             </div>
           </template>
           <div class="jc_content tablecolor">
             <div class="jc_padding">
-              <div class="xian">
+              <div class="xian"  v-if="props.classradio=='Fire'">
                 <el-table :data="tableData2" style="width: 100%" @current-change="handleCurrentChange"
                   :row-class-name="tableRowClassName" :header-cell-style="{ background: 'rgba(13, 22, 57, 0.96) ' }">
                   <el-table-column prop="name" label="监测点名称" width="120" />
-                  <el-table-column prop="value" label="值" />
+                  <el-table-column prop="value" :label="formInline.region" />
+                </el-table>
+              </div>
+              <div class="xian"  v-else>
+                <el-table :data="tableData2" style="width: 100%" @current-change="handleCurrentChange"
+                  :row-class-name="tableRowClassName" :header-cell-style="{ background: 'rgba(13, 22, 57, 0.96) ' }">
+                  <el-table-column prop="name" label="水位" width="120" />
+                  <el-table-column prop="value" label="流量" />
                 </el-table>
               </div>
             </div>
-            <div class="jc_header color1">
-              <span class="jc_tile">锋面定义</span>
-            </div>
-            <div style="height: 200px"></div>
           </div>
+     
         </el-collapse-item>
       </el-collapse>
     </div>
@@ -97,7 +105,7 @@ import t4 from "@/assets/img/t4.png";
 import { vtkmodel } from "@/control/vtkModel.js"
 import { createFireControl } from "@/control/fireControl.js"
 import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray.js";
-
+let labelval=ref('SOS');
 const activeNames = ref(['1'])
 let emit = defineEmits([]);
 const props = defineProps({
@@ -107,9 +115,9 @@ const props = defineProps({
   },
 });
 
+let newcount =ref(0);
 const count = ref(0);
 const isstop = ref(false);
-
 const monitor = ref(false);
 const strResultFormatlist = ref([]);
 let url = ref("http://localhost:8080/?aid=0");
@@ -174,6 +182,7 @@ const cocodeIsInit = ref("false");
 //滑块
 function sliderchange(val) {
   fcon.step = count.value;
+  console.log(count.value);
   vtkScalarRead();
 }
 //播放
@@ -227,6 +236,7 @@ function zdtimechange() {
   getMonitor();
 }
 function regionchange() {
+  console.log(22222)
   for (let index = 0; index < cocodes.value.length; index++) {
     if (formInline.value.region == cocodes.value[index].cocode) {
       cocodeIndex.value = index + 1;
@@ -279,7 +289,6 @@ function regionchange() {
 const accident5 = (val) => {
   aid.value = val;
   console.log(aid.value);
-  console.log(11111);
   console.log("props.classradio", props.classradio);
   if (props.classradio == "Fire") {
     monitor.value = true;
@@ -323,6 +332,7 @@ async function getMonitor() {
         }
         //监测点类型初始化
         if (!cocodeIsInit.value) {
+          console.log(2222)
           cocodeIsInit.value = true;
           cocodes.value = res.cocodes;
           formInline.value.region = cocodes.value[0].cocode;
@@ -389,6 +399,9 @@ function reddate(date) {
     fcon.step = fcon.stepsum;
   }
   count.value = fcon.step;
+ newcount.value = count.value;
+  console.log(newcount.value);
+
 }
 
 function vtkGridRead() {
@@ -413,7 +426,7 @@ function vtkScalarRead() {
     });
 }
 function vtkShow() {
-  
+  console.log("执行了")
   const scalarBarActor= vtkmodel.scalarBarActor;
   const mapper =vtkmodel.jgMapper;
   const actor =vtkmodel.jgActor;
@@ -458,18 +471,46 @@ function getMinMax(scalars) {
   // console.log("max，min:", max.value, min.value);
 }
 
-const handleClick = () => {
-
+const handleClick = (Tab,val) => {
+  console.log(Tab.props.name);
+if(Tab.props.name=='first'){
+  timing.value = setInterval(() => {
+    const timestamp = new Date().getTime();
+    newtime.value = timestampToTime(timestamp);
+    reddate(new Date());
+  }, 1000);
+}else if(Tab.props.name=='second'){
+  clearInterval(timing.value);
+}else if(Tab.props.name=='third'){
+  clearInterval(timing.value);
+}
 }
 onBeforeUnmount(() => {
   clearInterval(timing.value);
 });
 onMounted(() => {
+ if(resultactiveName.value=="first"){
   timing.value = setInterval(() => {
     const timestamp = new Date().getTime();
     newtime.value = timestampToTime(timestamp);
+    reddate(new Date());
   }, 1000);
+ }else{
+  timing.value = setInterval(() => {
+    const timestamp = new Date().getTime();
+    newtime.value = timestampToTime(timestamp);
+  }, 1000);
+ }
+
+
 });
+
+watch(newcount,(newVal,oldVal) => {
+  console.log('值改变了',newVal,oldVal)
+      fcon.step = newVal;
+      vtkScalarRead();
+      getMonitor();
+},{deep:true})//深度监视
 defineExpose({ monitor, accident5 });
 </script>
 
@@ -1028,21 +1069,14 @@ defineExpose({ monitor, accident5 });
   background-image: url(../../assets/img/Group10.png) !important;
 }
 
-.asideg1 .jc_header {
-  width: 100%;
-  height: 52px;
-  line-height: 52px;
-  background-image: url(../../assets/img/Group24.png) !important;
-  background-repeat: no-repeat;
-  background-position: center;
-}
+
 
 .jc_tile {
   padding-left: 20px;
 }
 
 .he_pading {
-  padding: 11px 0 0 31px;
+  padding: 20px 0 0 21px;
 }
 
 .asideg1 .el-form-item__label {
@@ -1319,12 +1353,35 @@ defineExpose({ monitor, accident5 });
   font-weight: bold;
   color: #fff;
 }
-
-.collapseeion .el-collapse-item__arrow {
-  display: none;
-}
-
 .collapseeion .el-select .el-input__inner {
   color: #fff;
 }
+.el-collapse-item__wrap{
+  border-bottom: 1px solid;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+}
+.el-collapse{
+  --el-collapse-border-color:rgba(31, 107, 255, 0.48);
+}
+ .jc_header .el-collapse-item__header{
+  width: 100%;
+  height: 52px;
+  line-height: 52px;
+  background-image: url(../../assets/img/Group24.png) !important;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.jianstyle .el-collapse-item__arrow {
+    margin: 0 8px 0 auto;
+    font-weight: 800;
+    color: #fff !important;
+    font-weight: bold !important;
+    font-size: 20px !important;
+}
+.woter{
+  margin-top: -15px;
+}
+.result1 .el-collapse-item__content{
+  padding:0 !important;
+}
 </style>