disaster/src/view/result.vue

<template>
    <!--结果对比 -->
    <div  class="resultyem" v-show="resultyem">
        <div class="publicleft">
          <div class="resultime">
            <div class="text">指定时间</div>
            <div class="time">{{timeline}}</div>
          </div>
          <!-- 动画 -->
          <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"></el-image>
                    <p>后退</p>
                  </li>
                  <li>
                    <el-image :src="t2" fit="contain" ></el-image>
                    <p>播放</p>
                  </li>
                  <li>
                    <el-image :src="t3" fit="contain"></el-image>
                    <p>暂停</p>
                  </li>
                  <li>
                    <el-image :src="t4" fit="contain"></el-image>
                    <p>快进</p>
                  </li>
                </ul>
              </div>
            </div>
            <!-- 物理量 -->
            <div class="heigjie">
            <div class="he_pading1 color1">
              <el-form-item label="物理量:">
                <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="woter" v-else>
                <span>物理量：</span>
                <span>水位</span>
              </div> -->
            </div>
        </div>
      </div>
        <div class="result_left results">
                <resultLeft :formInline="formInline"/>
    
    </div>
    <div class="result_right results">
          <resultRight :formInline="formInline"/>
 
    </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 { timestampToTime } from "@/js/lindex.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";
let resultyem=ref(false);
let timing = ref(null);
let starttime = ref(1);
let endtime = ref(60);
let timenum = ref(2);
let aid=ref(Number);
let timeline=ref("2024-03-03 14:00");
const formInline = ref({
  region: "shanghai",
  count:0
});
const strResultFormatlist = ref([]);
const accident6 = (key,id) => {
  aid.value=id;

  if (key == "5") {
    resultyem.value=true;
  } else {
    resultyem.value= false;
  }
};
const newtime=()=>{
  timing.value = setInterval(() => {
      const timestamp = new Date().getTime();
    timeline.value = timestampToTime(timestamp);

    }, 1000);
}
//滑块
function sliderchange(val) {
  fcon.step = count.value;
  console.log( count.value );
}
// 物理量的选择
function regionchange(val) {
  console.log(val)
  let newMap = new Map([['Temperature', '(℃)'], ['Pressure', '(kg/s)'],['Pressure', '(kg/s)'],['CO2', '(%)'],['CO2', '(%)'],['H2S', '(%)'],['Flow', '(Pa)'],['Height', 'm']])
  newMap.forEach((value, key) => {
    console.log(key, value);
    if(key==val){
    danwei.value=key+value;
    }
})
 
}

onMounted(() => {
  newtime()
});
  // 卸载时的操作
  onUnmounted(() => {
      // 清除定时器
      if ( timing.value ) {
        clearInterval( timing.value);
      }
    });
defineExpose({accident6});
</script>
<style scoped  lang="scss">
.heigjie{
  width: 100%;
    height: 50px;
    line-height: 50px;
    background-image: url(/src/assets/img/Group10.png) !important;
    background-repeat: no-repeat;
    background-position: center;
    .he_pading1 {
      padding: 10px 9px 0 7px;
    }

} 
.animation_s {
  padding: 25px;
}

.tanniu ul {
  margin-top: 20px;
  display: flex;
  li {
    flex: 1;
    text-align: center;

    p {
      text-align: center;
      font-weight: 400;
      font-size: 12px;
      color: #ffffff;
      line-height: 14px;
      font-style: normal;
      text-transform: none;
    }
   }
  }
.resultyem{
width: 100%;
position: absolute;
z-index: 12;
top:70px;
color:#fff;
    display: flex;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    border-radius: 0px 0px 0px 0px;
}
.results{
   flex: 1;
}
.result_left,.result_right{
    border-left: 2px solid;
    /* border-right: 2px solid; */
    /* border-image: linear-gradient(180deg, rgba(31, 107, 255, 0), rgba(255, 255, 255, 0.8)) 1 1; */
    border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)) 1 1;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
}
.publicleft{
    width: 270px;
    height: calc(100vh - 70px);
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    /* border:1px solid #fff */
}
.resultime{
  height: 70px;
  border-bottom: 1px solid; 
  border-image:  linear-gradient(347deg, rgb(16, 92, 240), rgb(18, 48, 102)) 1 1;

}
.resultime .text{
font-size: 14px;
width: 88px;
font-weight: bold;
line-height: 70px;
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: 70px;
font-family: Microsoft YaHei UI, Microsoft YaHei UI;
font-weight: bold;
font-size: 14px;
color: #FF0F0F;
line-height: 70px;
text-align: left;
text-align: center;
font-style: normal;
text-transform: none;
}
</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;
}
</style>