|
|
@@ -1,19 +1,22 @@
|
|
|
<template>
|
|
|
<!--结果对比 -->
|
|
|
<div class="resultyem" v-show="resultyem">
|
|
|
- <div class="publicleft" v-show="clickflat">
|
|
|
+ <div class="publicleft" v-show="clickflat">
|
|
|
<div class="resultime">
|
|
|
<div class="text">指定时间</div>
|
|
|
- <div class="time">{{ timeline }}</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="animation_s">
|
|
|
- <el-slider
|
|
|
- :max="endtime"
|
|
|
- :min="starttime"
|
|
|
- v-model="formInline.count"
|
|
|
- @change="sliderchange"
|
|
|
- >
|
|
|
+ <el-slider :max="endtime" :min="starttime" v-model="formInline.count" @change="sliderchange">
|
|
|
</el-slider>
|
|
|
<div class="tanniu">
|
|
|
<ul>
|
|
|
@@ -26,7 +29,7 @@
|
|
|
<p>播放</p>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <el-image :src="t3" fit="contain" @click="suspend()"></el-image>
|
|
|
+ <el-image :src="t3" fit="contain" @click="suspend()"></el-image>
|
|
|
<p>暂停</p>
|
|
|
</li>
|
|
|
<li>
|
|
|
@@ -40,49 +43,37 @@
|
|
|
<div class="heigjie">
|
|
|
<div class="he_pading1 color1">
|
|
|
<el-form-item label="物理量:" v-if="props.classradio == 'Fire'">
|
|
|
- <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 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>
|
|
|
+ <span>物理量：</span>
|
|
|
+ <span>水位</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="result_left results">
|
|
|
- <div class="elimgmn" >
|
|
|
+ <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> -->
|
|
|
+ <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"
|
|
|
- :region="formInline.region"
|
|
|
- :count="formInline.count"
|
|
|
- />
|
|
|
+ <resultLeft ref="setleftAid" :region="formInline.region" :count="formInline.count" />
|
|
|
</div>
|
|
|
<div class="result_right results">
|
|
|
- <div class="elimgmn" >
|
|
|
+ <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> -->
|
|
|
+ <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" />
|
|
|
+ <resultRight ref="setrightAid" :region="formInline.region" :count="formInline.count" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -119,19 +110,20 @@ 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');
|
|
|
+let clickflat = ref(false);
|
|
|
+let mntext1 = ref('灾情模拟1');
|
|
|
+let mntext2 = ref('灾情模拟2');
|
|
|
const formInline = ref({
|
|
|
region: "shanghai",
|
|
|
count: 0,
|
|
|
});
|
|
|
+const zdtime = ref("");
|
|
|
const strResultFormatlist = ref([]);
|
|
|
const accident6 = (key, id) => {
|
|
|
aid.value = id;
|
|
|
|
|
|
if (key == "5") {
|
|
|
- vtkmodel.clearAll();
|
|
|
+ vtkmodel.clearAll();
|
|
|
resultyem.value = true;
|
|
|
} else {
|
|
|
resultyem.value = false;
|
|
|
@@ -143,10 +135,20 @@ const newtime = () => {
|
|
|
timeline.value = timestampToTime(timestamp);
|
|
|
}, 1000);
|
|
|
};
|
|
|
+// 时间选择
|
|
|
+
|
|
|
+function zdtimechange() {
|
|
|
+ const zdtimestamp = Date.parse(zdtime.value);
|
|
|
+ const zdtimeDate = new Date(zdtimestamp);
|
|
|
+ //console.log(zdtimeDate);
|
|
|
+ // reddate(zdtimeDate);
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
//滑块
|
|
|
function sliderchange(val) {
|
|
|
// fcon.step = count.value;
|
|
|
-console.log(val);
|
|
|
+ console.log(val);
|
|
|
}
|
|
|
//回到上一页
|
|
|
function Prev() {
|
|
|
@@ -161,10 +163,10 @@ function play(time) {
|
|
|
setTimeout(resolve, timeout);
|
|
|
});
|
|
|
let timer = async (timeout) => {
|
|
|
- while (formInline.value.count < endtime.value && isstop.value) {
|
|
|
+ while (formInline.value.count < endtime.value && isstop.value) {
|
|
|
if (isstop.value == true) {
|
|
|
await sleep(time);
|
|
|
- formInline.value.count ++;
|
|
|
+ formInline.value.count++;
|
|
|
// fcon.step = formInline.value.count ;
|
|
|
// vtkScalarRead();
|
|
|
// getMonitor();
|
|
|
@@ -180,11 +182,11 @@ function suspend() {
|
|
|
// 快进
|
|
|
function increment() {
|
|
|
isstop.value = false;
|
|
|
- if ( formInline.value.count == endtime.value) {
|
|
|
+ if (formInline.value.count == endtime.value) {
|
|
|
return;
|
|
|
}
|
|
|
- formInline.value.count ++;
|
|
|
- console.log( formInline.value.count );
|
|
|
+ formInline.value.count++;
|
|
|
+ console.log(formInline.value.count);
|
|
|
// vtkScalarRead();
|
|
|
// getMonitor();
|
|
|
}
|
|
|
@@ -214,11 +216,11 @@ const hazardtype = (val) => {
|
|
|
|
|
|
const initAid = (leftAid, rightAid) => {
|
|
|
console.log("result.vue", leftAid, rightAid);
|
|
|
- getMonitor(leftAid,rightAid);
|
|
|
+ getMonitor(leftAid, rightAid);
|
|
|
};
|
|
|
|
|
|
//监测点数据获取
|
|
|
-async function getMonitor(leftAid,rightAid) {
|
|
|
+async function getMonitor(leftAid, rightAid) {
|
|
|
const params = {
|
|
|
transCode: "D10016",
|
|
|
aid: leftAid,
|
|
|
@@ -245,7 +247,7 @@ async function getMonitor(leftAid,rightAid) {
|
|
|
);
|
|
|
setrightAid.value.rightChangAid(
|
|
|
rightAid,
|
|
|
- formInline.value.count+ 1,
|
|
|
+ formInline.value.count + 1,
|
|
|
formInline.value.region
|
|
|
);
|
|
|
//TODO right AID 没加
|
|
|
@@ -256,7 +258,7 @@ async function getMonitor(leftAid,rightAid) {
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
- .catch((err) => {});
|
|
|
+ .catch((err) => { });
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
newtime();
|
|
|
@@ -268,7 +270,7 @@ onUnmounted(() => {
|
|
|
clearInterval(timing.value);
|
|
|
}
|
|
|
});
|
|
|
-defineExpose({ accident6, initAid,mntext1,mntext2,clickflat,endtime });
|
|
|
+defineExpose({ accident6, initAid, mntext1, mntext2, clickflat, endtime,zdtime });
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.heigjie {
|
|
|
@@ -278,10 +280,12 @@ defineExpose({ accident6, initAid,mntext1,mntext2,clickflat,endtime });
|
|
|
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;
|
|
|
}
|
|
|
@@ -289,6 +293,7 @@ defineExpose({ accident6, initAid,mntext1,mntext2,clickflat,endtime });
|
|
|
.tanniu ul {
|
|
|
margin-top: 20px;
|
|
|
display: flex;
|
|
|
+
|
|
|
li {
|
|
|
flex: 1;
|
|
|
text-align: center;
|
|
|
@@ -304,6 +309,7 @@ defineExpose({ accident6, initAid,mntext1,mntext2,clickflat,endtime });
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.resultyem {
|
|
|
width: 100%;
|
|
|
position: absolute;
|
|
|
@@ -314,24 +320,24 @@ defineExpose({ accident6, initAid,mntext1,mntext2,clickflat,endtime });
|
|
|
box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
|
|
|
border-radius: 0px 0px 0px 0px;
|
|
|
}
|
|
|
+
|
|
|
.results {
|
|
|
flex: 1;
|
|
|
position: relative;
|
|
|
}
|
|
|
+
|
|
|
.result_left,
|
|
|
.result_right {
|
|
|
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(
|
|
|
- 180deg,
|
|
|
+ border-image: linear-gradient(180deg,
|
|
|
rgba(255, 255, 255, 0.5),
|
|
|
- rgba(255, 255, 255, 0.5)
|
|
|
- )
|
|
|
- 1 1;
|
|
|
+ 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);
|
|
|
@@ -339,19 +345,19 @@ defineExpose({ accident6, initAid,mntext1,mntext2,clickflat,endtime });
|
|
|
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,
|
|
|
+ border-image: linear-gradient(180deg,
|
|
|
rgba(255, 255, 255, 0.5),
|
|
|
- rgba(255, 255, 255, 0.5)
|
|
|
- )
|
|
|
- 1 1;
|
|
|
+ rgba(255, 255, 255, 0.5)) 1 1;
|
|
|
box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
|
|
|
}
|
|
|
+
|
|
|
.resultime {
|
|
|
+display: flex;
|
|
|
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;
|
|
|
@@ -363,7 +369,8 @@ defineExpose({ accident6, initAid,mntext1,mntext2,clickflat,endtime });
|
|
|
border-image: linear-gradient(347deg, rgb(16, 92, 240), rgb(18, 48, 102)) 1 1;
|
|
|
float: left;
|
|
|
}
|
|
|
-.resultime .time {
|
|
|
+
|
|
|
+.resultime .time{
|
|
|
line-height: 70px;
|
|
|
font-family: Microsoft YaHei UI, Microsoft YaHei UI;
|
|
|
font-weight: bold;
|
|
|
@@ -385,9 +392,11 @@ defineExpose({ accident6, initAid,mntext1,mntext2,clickflat,endtime });
|
|
|
font-style: normal;
|
|
|
text-transform: none;
|
|
|
}
|
|
|
+
|
|
|
.heigjie .el-select .el-input__inner {
|
|
|
color: #fff;
|
|
|
}
|
|
|
+
|
|
|
.results .elimgmn {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
@@ -395,7 +404,8 @@ defineExpose({ accident6, initAid,mntext1,mntext2,clickflat,endtime });
|
|
|
z-index: 111;
|
|
|
width: 100%;
|
|
|
}
|
|
|
-.bceligmn{
|
|
|
+
|
|
|
+.bceligmn {
|
|
|
width: 212px;
|
|
|
height: 52px;
|
|
|
padding: 0px 20px;
|
|
|
@@ -403,11 +413,17 @@ defineExpose({ accident6, initAid,mntext1,mntext2,clickflat,endtime });
|
|
|
background-image: url(../assets/img/303.png);
|
|
|
margin: 20px;
|
|
|
}
|
|
|
-.bceligmn .el-image{
|
|
|
+
|
|
|
+.bceligmn .el-image {
|
|
|
float: left;
|
|
|
- margin-top:13px;
|
|
|
+ margin-top: 13px;
|
|
|
}
|
|
|
-.mntext {overflow: hidden;white-space: nowrap;text-overflow:ellipsis; font-weight: 400;
|
|
|
+
|
|
|
+.mntext {
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ font-weight: 400;
|
|
|
font-size: 13px;
|
|
|
color: #ffffff;
|
|
|
text-align: left;
|
|
|
@@ -415,12 +431,41 @@ defineExpose({ accident6, initAid,mntext1,mntext2,clickflat,endtime });
|
|
|
text-transform: none;
|
|
|
padding-left: 10px;
|
|
|
}
|
|
|
-.mnclose{
|
|
|
+
|
|
|
+.mnclose {
|
|
|
position: absolute;
|
|
|
- right: 10px;
|
|
|
- top: 20px;
|
|
|
+ right: 10px;
|
|
|
+ top: 20px;
|
|
|
}
|
|
|
-.wotermn{
|
|
|
+
|
|
|
+.wotermn {
|
|
|
line-height: 34px;
|
|
|
}
|
|
|
+.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;
|
|
|
+}
|
|
|
</style>
|
