|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<!--结果对比 -->
|
|
|
<div class="resultyem" v-show="resultyem">
|
|
|
- <div class="publicleft">
|
|
|
+ <div class="publicleft" v-show="clickflat">
|
|
|
<div class="resultime">
|
|
|
<div class="text">指定时间</div>
|
|
|
<div class="time">{{ timeline }}</div>
|
|
@@ -18,19 +18,19 @@
|
|
|
<div class="tanniu">
|
|
|
<ul>
|
|
|
<li>
|
|
|
- <el-image :src="t1" fit="contain"></el-image>
|
|
|
+ <el-image :src="t1" fit="contain" @click="Prev()"></el-image>
|
|
|
<p>后退</p>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <el-image :src="t2" fit="contain"></el-image>
|
|
|
+ <el-image :src="t2" fit="contain" @click="play(500)"></el-image>
|
|
|
<p>播放</p>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <el-image :src="t3" fit="contain"></el-image>
|
|
|
+ <el-image :src="t3" fit="contain" @click="suspend()"></el-image>
|
|
|
<p>暂停</p>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <el-image :src="t4" fit="contain"></el-image>
|
|
|
+ <el-image :src="t4" fit="contain" @click="increment()"></el-image>
|
|
|
<p>快进</p>
|
|
|
</li>
|
|
|
</ul>
|
|
@@ -39,7 +39,7 @@
|
|
|
<!-- 物理量 -->
|
|
|
<div class="heigjie">
|
|
|
<div class="he_pading1 color1">
|
|
|
- <el-form-item label="物理量:">
|
|
|
+ <el-form-item label="物理量:" v-if="props.classradio == 'Fire'">
|
|
|
<el-select
|
|
|
v-model="formInline.region"
|
|
|
@change="regionchange($event)"
|
|
@@ -53,16 +53,20 @@
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <!-- <div class="woter" v-else>
|
|
|
+ <div class="wotermn" v-else>
|
|
|
<span>物理量:</span>
|
|
|
<span>水位</span>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="result_left results">
|
|
|
- <div class="elimgmn" @click="hazardtype('1')">
|
|
|
- <el-image :src="mn" fit="contain"></el-image>
|
|
|
+ <div class="elimgmn" >
|
|
|
+ <div class="bceligmn" @click="hazardtype('1')">
|
|
|
+ <el-image :src="t5" fit="contain"></el-image>
|
|
|
+ <div class="mntext" :title="mntext1" >{{ mntext1 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="mnclose"><el-image :src="t6" fit="contain"></el-image></div>
|
|
|
</div>
|
|
|
<resultLeft
|
|
|
ref="setleftAid"
|
|
@@ -71,8 +75,12 @@
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="result_right results">
|
|
|
- <div class="elimgmn" @click="hazardtype('2')">
|
|
|
- <el-image :src="mn" fit="contain"></el-image>
|
|
|
+ <div class="elimgmn" >
|
|
|
+ <div class="bceligmn" @click="hazardtype('2')">
|
|
|
+ <el-image :src="t5" fit="contain"></el-image>
|
|
|
+ <div class="mntext" :title="mntext2" >{{ mntext2 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="mnclose"><el-image :src="t6" fit="contain"></el-image></div>
|
|
|
</div>
|
|
|
<resultRight ref="setrightAid" :region="formInline.region" :count="formInline.count" />
|
|
|
</div>
|
|
@@ -91,16 +99,28 @@ 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 resultyem = ref(false);
|
|
|
let timing = ref(null);
|
|
|
let starttime = ref(1);
|
|
|
let endtime = ref(60);
|
|
|
let timenum = ref(2);
|
|
|
+const isstop = ref(false);
|
|
|
let aid = ref(Number);
|
|
|
let timeline = ref("2024-03-03 14:00");
|
|
|
let setleftAid = ref();
|
|
|
let setrightAid = ref();
|
|
|
+let clickflat=ref(false);
|
|
|
+let mntext1=ref('灾情模拟1');
|
|
|
+let mntext2=ref('灾情模拟2');
|
|
|
const formInline = ref({
|
|
|
region: "shanghai",
|
|
|
count: 0,
|
|
@@ -124,7 +144,47 @@ const newtime = () => {
|
|
|
//滑块
|
|
|
function sliderchange(val) {
|
|
|
// fcon.step = count.value;
|
|
|
- // console.log(count.value);
|
|
|
+console.log(val);
|
|
|
+}
|
|
|
+//回到上一页
|
|
|
+function Prev() {
|
|
|
+ isstop.value = false;
|
|
|
+ formInline.value.count--;
|
|
|
+}
|
|
|
+//播放
|
|
|
+function play(time) {
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ timer(time);
|
|
|
+}
|
|
|
+//暂停
|
|
|
+function suspend() {
|
|
|
+ isstop.value = false;
|
|
|
+}
|
|
|
+// 快进
|
|
|
+function increment() {
|
|
|
+ isstop.value = false;
|
|
|
+ if ( formInline.value.count == endtime.value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ formInline.value.count ++;
|
|
|
+ console.log( formInline.value.count );
|
|
|
+ // vtkScalarRead();
|
|
|
+ // getMonitor();
|
|
|
}
|
|
|
// 物理量的选择
|
|
|
function regionchange(val) {
|
|
@@ -178,12 +238,12 @@ async function getMonitor(leftAid,rightAid) {
|
|
|
console.log(strResultFormatlist.value);
|
|
|
setleftAid.value.leftChangAid(
|
|
|
leftAid,
|
|
|
- formInline.value.count.value + 1,
|
|
|
+ formInline.value.count + 1,
|
|
|
formInline.value.region
|
|
|
);
|
|
|
setrightAid.value.rightChangAid(
|
|
|
rightAid,
|
|
|
- formInline.value.count.value + 1,
|
|
|
+ formInline.value.count+ 1,
|
|
|
formInline.value.region
|
|
|
);
|
|
|
//TODO right AID 没加
|
|
@@ -206,7 +266,7 @@ onUnmounted(() => {
|
|
|
clearInterval(timing.value);
|
|
|
}
|
|
|
});
|
|
|
-defineExpose({ accident6, initAid });
|
|
|
+defineExpose({ accident6, initAid,mntext1,mntext2,clickflat });
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.heigjie {
|
|
@@ -258,7 +318,8 @@ defineExpose({ accident6, initAid });
|
|
|
}
|
|
|
.result_left,
|
|
|
.result_right {
|
|
|
- border-left: 2px solid;
|
|
|
+ height: calc(100vh - 70px);
|
|
|
+ border-right: 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(
|
|
@@ -273,7 +334,16 @@ defineExpose({ accident6, initAid });
|
|
|
width: 270px;
|
|
|
height: calc(100vh - 70px);
|
|
|
box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
|
|
|
- /* border:1px solid #fff */
|
|
|
+ border-right: 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);
|
|
|
}
|
|
|
.resultime {
|
|
|
height: 70px;
|
|
@@ -321,5 +391,34 @@ defineExpose({ accident6, initAid });
|
|
|
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: 34px;
|
|
|
}
|
|
|
</style>
|