disaster_web3/src/view/result.vue

<template>
  <!--结果对比 -->
  <div class="resultyem" v-show="resultyem">
    <div class="publicleft" v-show="clickflat">
      <div class="resultime">
        <div class="text">指定时间</div>
        <!-- <div class="newtime">
              <el-date-picker
                v-model="zdtime"
                type="datetime"
                placeholder="Select date and time"
                @change="zdtimechange"
              />
            </div> -->
        <div class="time">{{ timeline }}</div>
      </div>
      <!-- 动画 -->

      <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>
              <el-icon class="iconimg Frame3" fit="contain"></el-icon>
              动画展示
            </template>
            <div class="rg_content">
              <div class="rg-padding">
                <div class="animation_s">
              <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="suspendshow">
                    <el-image :src="t2"  fit="contain" @click="play(500)"></el-image>
                   
                  </li>
                  <li v-show="playshow">
                    <el-image :src="t3" fit="contain" @click="play(500)"></el-image>
                 
                  </li>
                
                  <li>
                    <el-image :src="t4" fit="contain" @click="increment()"></el-image>
                 
                  </li>
                </ul>
              </div>
            </div>

              </div>
            </div>

          </el-collapse-item>
        </el-collapse>

      </div>
  <!-- 物理量 -->
  <div class="heigjie">
        <div class="he_pading1 color1">
          <el-form-item label="物理量:" v-if="props.classradio == 'Fire'||props.classradio == 'Gass'">
            <el-select v-model="formInline.region" @change="regionchange($event)" 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="wotermn" v-else>
            <span>物理量：</span>
            <span>水位</span>
          </div>
        </div>
      </div>
    </div>
    <div class="result_left results re_pading">
      <div class="resu_title reimg" @click="hazardtype('1')">
        {{ mntext1 }}
      </div>
      <div class="resultleftxian">
        <div class="modle">
          <resultLeft ref="setleftAid" :region="formInline.region" :count="newcount" />
        </div>
        <!--检测点信息 -->
        <wdisaster ref="wdisasterref"  :count="newcount"/>
      </div>
      <!-- 检测点 -->
    </div>
    <!-- 第二个 -->
    <div class="result_right r results re_pading">
      <div class="resu_title reimg" @click="hazardtype('2')">
        {{ mntext2 }}
      </div>
      <div class="resultleftxian">
        <div class="modle">
          <!--  :count="formInline.count" -->
          <resultRight ref="setrightAid" :region="formInline.region" :count="newcount" />
        </div>
        <!--检测点信息 -->
        <wdisaster2 ref="wdisasterref2" :count="newcount"/>
      </div>
      <!-- 检测点 -->
    </div>

  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, reactive } from "vue";
import { RouterView, RouterLink } from "vue-router";
import { request, uploadFile } from "@/utils/request";
import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus";
import resultLeft from "./result/resultLeft.vue";
import resultRight from "./result/resultRight.vue";
import wdisaster from "./result/Wdisaster.vue";
import wdisaster2 from "./result/Wdisaster2.vue";
import { timestampToTime, timescount } from "@/js/lindex.js";
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 mn from "@/assets/img/Group204.png";
import t5 from "@/assets/img/Group207.png";
import t6 from "@/assets/img/Frame.png";
import bg from "@/assets/img/303.png";

let emit = defineEmits(["titleclick"]);
const props = defineProps({
  classradio: {
    type: String,
  },
});
let newcount = ref(60);
let activeNames=ref(['1'])
let wdisasterref = ref();
let wdisasterref2 = ref();
let resultyem = ref(false);
let timing = ref(null);
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();
let  danwei=ref();
const isstop = ref(false);
let aid = ref(Number);
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');
const formInline = ref({
  region: "",
  count: 60,
});
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);
  

  } else {
    changeModel();
    resultyem.value = false;
  }
};

// 时间选择

function zdtimechange() {
  const zdtimestamp = Date.parse(zdtime.value);
  const zdtimeDate = new Date(zdtimestamp);
  //console.log(zdtimeDate);
  // reddate(zdtimeDate);

}
// 播放按钮的显示隐藏
//    playshow.value=true;
//suspendshow.value=false;
//滑块
function sliderchange(val) {
  //fcon.step = count.value;
  //  console.log(val);
  suspendshow.value=false;
    playshow.value=true;
    isstop.value = false;
  newcount.value =val;

  newtime();
}
// 时间计算
const newtime = () => {
  time.value = null;
  console.log(formInline.value.count);
  time.value = (new Date(oldtime.value).getTime()) / 1000;
  if (formInline.value.count == 2) {
    let time2 = (formInline.value.count - 1) * 60 + time.value;
    timeline.value = timescount(time2);
  } else {
    let time2 = (formInline.value.count) * 60 + time.value;
    timeline.value = timescount(time2);
  }


};
//回到上一页
function Prev() {
  isstop.value = false;
  formInline.value.count--;
  newcount.value = formInline.value.count;
  newtime();
}
//播放
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 (formInline.value.count < endtime.value && isstop.value) {
      if (isstop.value == true) {
        await sleep(time);
        formInline.value.count++;
        // fcon.step = formInline.value.count ;
        // vtkScalarRead();
        // getMonitor();
        newcount.value = formInline.value.count;
        newtime();
      }
    }
  };
  timer(time); 
  }else{
    playshow.value=true;
    suspendshow.value=false;
    isstop.value = false;//暂停
}
}

//暂停
function suspend() {
  isstop.value = false;
}
// 快进
function increment() {
  isstop.value = false;
  if (formInline.value.count == endtime.value) {
    return;
  }
  formInline.value.count++;
  newcount.value = formInline.value.count;
  newtime();
  console.log(formInline.value.count);
  // vtkScalarRead();
  // getMonitor();
}
// 物理量的选择
function regionchange(val) {
  // let newMap = new Map([
  //   ["Temperature", "(℃)"],
  //   ["Pressure", "(kg/s)"],
  //   ["Pressure", "(kg/s)"],
  //   ["CO2", "(%)"],
  //   ["CO2", "(%)"],
  //   ["H2S", "(%)"],
  //   ["Flow", "(Pa)"],
  //   ["Height", "m"],
  // ]);
  // newMap.forEach((value, key) => {
  //   if (key == val) {
  //     danwei.value = key + value;
  //   }
  // });

}
const hazardtype = (val) => {
  emit("titleclick", "模拟数据", val);
};

const initAid = (leftAid, rightAid) => {
  console.log(1112344555)
  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) {
  let name;
  const params = {
    transCode: "D10018",
    aid: leftAid,
    step: 1,
  };
  await request(params)
    .then((res) => {
      if (res.returnCode == "000000000") {
        strResultFormatlist.value = [];
        console.log(res);
        for (let i = 0; i < res.codes.length; i++) {
          let cocode = res.codes[i];
          let newMap = new Map([
            ["Temperature", "(℃)"],
            ["Pressure", "(Pa)"],
            ["CO", "(ppm)"],
            ["CO2", "(%)"],
            ["H2S", "(%)"],
            ["HCL", "(ppm)"],
            ["NO2", "(ppm)"],
            ["SO2", "(ppm)"],
            ["Flow", "(Pa)"],
            ["Height", "(m)"],
          ]);
          newMap.forEach((value, key) => {
            if ( key  == res.codes[i].code ) {
              if(key=='Temperature'){
                  key='温度'
              }else if(key=='Pressure'){
                key='压强'
              }else if(key=='CO'){
                key= '一氧化碳'
              }else if(key=='CO2'){
                key= '二氧化碳'
              }else if(key=='HCL'){
                key= '氯化氢'
              }else if(key=='NO2'){
                key= '二氧化氮'
              }else if(key=='SO2'){
                key= '二氧化硫'
              }else if(key=='H2S'){
                key= '硫化氢'
              }else if(key=='Height'){
                key= '水位'
              }else if(key=='Flow'){
                key= '流量'
              }else{

              }
             // res.codes[i].code = key+value;
             name =  key+value
            }
          });
          strResultFormatlist.value.push({
            id: i,
            name: name,
            value: cocode.code,
          });
        }
        console.log( strResultFormatlist.value);
        formInline.value.region = strResultFormatlist.value[0].value;
        console.log(strResultFormatlist.value);
        setleftAid.value.leftChangAid(
          leftAid,
          formInline.value.count + 1,
          formInline.value.region
        );
        setrightAid.value.rightChangAid(
          rightAid,
          formInline.value.count + 1,
          formInline.value.region
        );
      } else {
        ElMessage({
          message: res.returnMsg,
          type: "error",
        });
      }
    })
    .catch((err) => { });
}
onMounted(() => {
  // leftcontentref.value.accident2('1','Water')
});
watch(
  newcount,
  (newVal, oldVal) => {
if( newVal>=endtime.value){
  playshow.value=true;
  suspendshow.value=false;
   isstop.value = false;
}
  },
  { deep: true }
); //深度监视
// 卸载时的操作
onUnmounted(() => {
  // 清除定时器
  if (timing.value) {
    clearInterval(timing.value);
  }
});
defineExpose({ accident6, initAid, mntext1, mntext2, clickflat, endtime, zdtime, timeline, oldtime,wdiclick });
</script>
<style scoped lang="scss">
.heigjie {
  width: 100%;
  height: 40px;
  line-height:40px;
  background-image: url(/src/assets/img/Group10.png) !important;
  background-repeat: no-repeat;
  background-position: center;
   background-size: 100% 100%;
  .he_pading1 {
    margin-left: 0.137rem;
    .asterisk-left{
      padding-top: 4px;
    }
  }
}

.animation_s .el-slider {
  padding: 0px 10px;
}

.tanniu {

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tanniu ul{
  margin-top: 24px;
  width: 100%;
}
.resultyem {
  width: 100%;
  position: absolute;
  z-index: 12;
  top: 70px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 154px);
}

.results {
  flex: 1;
  position: relative;
  overflow:hidden;

}

.result_left {
  margin: 0 .0781rem 0 .1563rem;
}

.result_right {
  margin: 0 .1563rem 0 .0781rem;
}

.result_left,
.result_right {
  height: calc(100vh - 154px);
  background: rgba(26, 38, 69, 0.4);
  overflow: auto;
}

.publicleft {
  width: 2.125rem;
  background: rgba(26, 38, 69, 0.4);
  margin-left: 0.1563rem;
}

.resultime {
  display: flex;
  height: 50px;
  border: 1px solid;
  border-image: linear-gradient(347deg, rgb(16, 92, 240), rgb(18, 48, 102)) 1 1;
}

.resultime .text {
  font-size: 0.0792rem;
  width: 88px;
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  border-right: 1px solid;
  border-image: linear-gradient(347deg, rgb(16, 92, 240), rgb(18, 48, 102)) 1 1;
  float: left;
}

.resultime .time {
  line-height: 50px;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI;
  font-weight: bold;
  font-size: .0729rem;
  color: #ff0f0f;
  line-height: 50px;
  text-align: left;
  text-align: center;
  font-style: normal;
  text-transform: none;
  width: 189px;
}
</style>
<style>
.heigjie .el-form-item__label {
  font-weight: 400;
  font-size: 13px;
  color: #ffffff;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.heigjie .el-select .el-input__inner {
  color: #fff;
}

.results .elimgmn {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 111;
  width: 100%;
}

.bceligmn {
  width: 212px;
  height: 52px;
  padding: 0px 20px;
  line-height: 52px;
  background-image: url(../assets/img/303.png);
  margin: 20px;
}

.bceligmn .el-image {
  float: left;
  margin-top: 13px;
}

.mntext {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 400;
  font-size: 13px;
  color: #ffffff;
  text-align: left;
  font-style: normal;
  text-transform: none;
  padding-left: 10px;
}

.mnclose {
  position: absolute;
  right: 10px;
  top: 20px;
}

.wotermn {
  line-height: .2083rem;
}

.resultime .newtime {
  width: 190px;
}

.resultime .newtime .el-input__inner {
  line-height: 70px;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI;
  font-weight: bold;
  font-size: 13px;
  color: #ff0f0f !important;
  line-height: 70px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.resultime .el-input__wrapper {
  height: 70px;
  background: none !important;
  border: none;
  box-shadow: none;
}

.resultime .el-input__prefix {
  display: none;
}

.newtime .el-input {
  width: 180px !important;
}

.donghua{
    pointer-events: none; 
}
</style>