3.19 0.3

src/view/appmian.vue

@@ -149,7 +149,7 @@ const handleSelect = (key) => {
             boundary.value.accident4(key);
             lliudialog.value.accident2(key);
             tanimation.value.monitor = false;
-            resultbidui.value.accident6(key)
+            resultbidui.value.accident6(key,aid.value)
             tanimation.value.accident5(aid.value,key);
             activeIndex.value='1';
             break;
@@ -159,7 +159,7 @@ const handleSelect = (key) => {
             sourcedis.value.accident3(key);
             lliudialog.value.accident2(key);
             tanimation.value.monitor = false;
-            resultbidui.value.accident6(key)
+            resultbidui.value.accident6(key,aid.value)
             tanimation.value.accident5(aid.value,key);
             activeIndex.value='2'
             break;
@@ -171,7 +171,7 @@ const handleSelect = (key) => {
             tanimation.value.monitor = false;
             activeIndex.value='3';
             tanimation.value.accident5(aid.value,key);
-            resultbidui.value.accident6(key)
+            resultbidui.value.accident6(key,aid.value)
        
             break;
         case '4':
@@ -179,7 +179,7 @@ const handleSelect = (key) => {
             tanimation.value.accident5(aid.value,key);
              sourcedis.value.accident3(key);
             lliudialog.value.accident2(key);
-            resultbidui.value.accident6(key)
+            resultbidui.value.accident6(key,aid.value)
             activeIndex.value='4'
             break;
             case '5':
@@ -187,7 +187,7 @@ const handleSelect = (key) => {
             sourcedis.value.accident3(key);
             boundary.value.accident4(key);
             lliudialog.value.accident2(key);
-            resultbidui.value.accident6(key)
+            resultbidui.value.accident6(key,aid.value)
             tanimation.value.accident5(aid.value,key);
             tanimation.value.monitor = false;
             activeIndex.value='5';

src/view/result.vue

@@ -6,33 +6,97 @@
             <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">
-            <router-view name="goods">
-                <resultLeft/>
-            </router-view>
+                <resultLeft :formInline="formInline"/>
     
     </div>
     <div class="result_right results">
-      <router-view name="orderinfo">
-          <resultRight/>
-	 </router-view> 
+          <resultRight :formInline="formInline"/>
  
     </div>
     </div>
   </template>
   <script setup>
     import { ref, onMounted,onUnmounted, reactive, } from "vue";
-    import {RouterView,RouterLink } from "vue-router"
+    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 timeline=ref("2024-03-03 14:00");
 let timing = ref(null);
-const accident6 = (key) => {
+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 {
@@ -42,10 +106,28 @@ const accident6 = (key) => {
 const newtime=()=>{
   timing.value = setInterval(() => {
       const timestamp = new Date().getTime();
-      timeline.value = timestampToTime(timestamp);
+    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()
 });
@@ -58,7 +140,41 @@ onMounted(() => {
     });
 defineExpose({accident6});
 </script>
-<style scoped>
+<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;
@@ -114,4 +230,17 @@ 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>

src/view/result/resultLeft.vue

@@ -1,19 +1,33 @@
 <template>
     <!--结果对比 -->
-    <div  class="result_left">
+    <div  class="result_left1">
     <h1>我是Left组件</h1>
+    <h1>{{props.formInline}}</h1>
     </div>
   </template>
   
   <script setup>
 
 import { onMounted, ref } from 'vue';
+const props = defineProps({
+  formInline: {
+    type: Object,
+    // default: '',
+  },
+});
 
-
-  
+watch(
+  props,
+  (newVal, oldVal) => {
+    console.log("值改变了", newVal, oldVal);
+  },
+  { deep: true }
+); //深度监视
 onMounted(() => {
+  console.log()
 
 });
+watch
 </script>
 <style scoped>
 

src/view/result/resultRight.vue

@@ -5,6 +5,14 @@
     </div>
   </template>
   <script setup>
+  import { onMounted, ref } from 'vue';
+const props = defineProps({
+  formInline: {
+    type: Object,
+    // default: '',
+  },
+});
+
 </script>
 <style scoped>
 </style>