feat: 类型一数据联调

src/views/dataView/components/Type1ObjectDetect.vue

@@ -8,16 +8,23 @@
 -->
 <template>
     <div class="type-first">
-        <!-- <div class="type-first-top">
-            <span>←</span> <span>递烟</span>
-        </div> -->
-        <div class="type-first-mid">
-            <div class="type-first-mid-box" v-for="(item, index) in info">
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 type-first-mid">
+            <div class="type-first-mid-box" v-for="(item, index) in info" :key="index">
                 <div class="type-first-mid-box-video">
-                    <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" class="w-[100%] h-[100%]"/>
+                    <video
+                        class="w-[100%] h-[100%]"
+                        :src="item.video_url"
+                        controls
+                    ></video>
                 </div>
-                <div class="type-first-mid-box-text">
-                    123123
+                <div class="type-first-mid-box-text" v-if="title === '酒精度数'">
+                    <span>酒精度数:</span> <span style="font-weight: normal;">{{ item['酒精度数'] }}</span>
+                </div>
+                <div class="type-first-mid-box-text" v-else-if="title === '语音角色'">
+                    <span>语音角色:</span> <span style="font-weight: normal;">{{ item['语音角色'] }}</span>
+                </div>
+                <div class="type-first-mid-box-text" v-else>
+                    <span>关键帧:</span> <span v-for="item1 in item[`${title}时间`]" style="font-weight: normal;">{{ item1 }}</span>
                 </div>
             </div>
         </div>
@@ -52,13 +59,14 @@ const props = withDefaults(defineProps < Props > (), {
         color: #1D2129;
     }
     .type-first-mid {
-        display: flex;
-        justify-self: start;
-        justify-content: space-between;
-        align-content: space-between;
-        flex-direction: row;
-        flex-wrap: wrap;
+        // display: flex;
+        // justify-self: start;
+        // justify-content: space-between;
+        // align-content: space-between;
+        // flex-direction: row;
+        // flex-wrap: wrap;
         height: 744px;
+        overflow-y: auto;
         .type-first-mid-box {
             box-sizing: border-box;
             width: 348px;

src/views/dataView/components/Type3CigaretteOffer.vue

@@ -8,12 +8,16 @@
 -->
 <template>
     <div class="type-fourth">
-        <div class="type-fourth-top">
+        <!-- <div class="type-fourth-top">
             <span>←</span> <span>车牌识别</span>
-        </div>
+        </div> -->
         <div class="type-fourth-mid">
             <div class="type-fourth-mid-video">
-                <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" class="w-[100%] h-[100%]"/>
+                <video
+                    class="w-[720px] h-[100%]"
+                    :src="info[0].video_url"
+                    controls
+                    ></video>
             </div>
             <div class="type-fourth-mid-tab">
                 <el-button  class="w-[76px] h-[32px!important]">全部</el-button>
@@ -21,7 +25,7 @@
                 <el-button  class="w-[76px] h-[32px!important]">车辆</el-button>
                 <el-button  class="w-[76px] h-[32px!important]">路灯</el-button>
             </div>
-            <div class="type-fourth-mid-box">
+            <!-- <div class="type-fourth-mid-box">
                 <div class="type-fourth-mid-crad" v-for="(item, index) in 8">
                     <div class="type-fourth-mid-crad-image">
                         <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" class="w-[100%] h-[100%]"/>
@@ -30,15 +34,26 @@
                         123123
                     </div>
                 </div>
-            </div>
+            </div> -->
         </div>
         <div class="type-fourth-bottom"></div>
     </div>
 </template>
-<script setup>
+<script lang="ts" setup>
 defineOptions({
   name: "Type3CigaretteOfferWarp"
 });
+interface Props {
+  typeKey: String;
+  info: Record<string, any>;
+  title: String;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  typeKey: "3",
+  info: {},
+  title: String,
+});
 </script>
 <style lang="scss" scoped>
 .type-fourth {