From 89a73222e66bc85964342b845105fba4b94cc5e7 Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Wed, 6 Jul 2022 13:35:02 +0800
Subject: [PATCH] =?UTF-8?q?bug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Application/ApplicationNavigation.vue     | 329 +++++++++---------
 .../Application/ApplicationPresentation.vue   | 173 ++++-----
 2 files changed, 255 insertions(+), 247 deletions(-)

diff --git a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
index 189835f5..4ddf5f70 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
@@ -8,12 +8,7 @@
 <template>
   <div class="application-navigation" v-if="navList.length > 0">
     <template v-for="nav in navList" :key="nav.key">
-      <div
-        class="nav"
-        :class="{ select: nav.key == select }"
-        v-if="nav.show"
-        @click="selectNav(nav.key)"
-      >
+      <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
         {{ nav.name }}
         <span class="line"></span>
       </div>
@@ -21,177 +16,179 @@
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch } from 'vue'
-  import mybus from '@/myplugins/mybus'
-  import { useRouter } from 'vue-router'
-  import { queryPartAppByKeyId } from '@/api/home'
-  // 获取当前路由地址
-  const router = useRouter()
-  const keyId = router.currentRoute.value.query.id
-  const navList = ref([
-    {
-      name: '应用展示',
-      key: 'application-presentation',
-    },
-    {
-      name: '功能介绍',
-      key: 'function-introduction',
-    },
-    {
-      name: '使用能力',
-      key: 'ability-to-use',
-    },
-    {
-      name: '部署与安全',
-      key: 'deployment-and-security',
-    },
-    {
-      name: '归属部门与服务商',
-      key: 'department-and-service-provider',
-    },
-    {
-      name: '常见问题',
-      key: 'common-problem',
-    },
-  ])
-  const props = defineProps({
-    selectNow: { type: String, default: '' },
-    dataList: { type: Object, default: null },
-    associatedComponents: { type: Array, default: null },
+import { ref, defineProps, watch } from 'vue'
+import mybus from '@/myplugins/mybus'
+import { useRouter } from 'vue-router'
+import { queryPartAppByKeyId } from '@/api/home'
+// 获取当前路由地址
+const router = useRouter()
+const keyId = router.currentRoute.value.query.id
+const navList = ref([
+  {
+    name: '应用展示',
+    key: 'application-presentation',
+  },
+  {
+    name: '功能介绍',
+    key: 'function-introduction',
+  },
+  {
+    name: '使用能力',
+    key: 'ability-to-use',
+  },
+  {
+    name: '部署与安全',
+    key: 'deployment-and-security',
+  },
+  {
+    name: '归属部门与服务商',
+    key: 'department-and-service-provider',
+  },
+  {
+    name: '常见问题',
+    key: 'common-problem',
+  },
+])
+const props = defineProps({
+  selectNow: { type: String, default: '' },
+  dataList: { type: Object, default: null },
+  associatedComponents: { type: Array, default: null },
+})
+const select = ref('application-associated-ability')
+const list = ref([])
+// 根据能力id查询是否存在关联应用
+if (keyId) {
+  let params = {
+    keyId: keyId,
+    type: '组件服务',
+  }
+  queryPartAppByKeyId(params).then((res) => {
+    console.log('ressssssss', res)
+    if (res.data.data.length != 0) {
+      // 存在关联应用时在导航栏加入关联应用
+      navList.value.unshift({
+        name: '关联组件',
+        key: 'application-associated-ability',
+        show: true,
+      })
+      list.value.unshift('关联组件')
+    }
   })
-  const select = ref('application-associated-ability')
-  const list = ref([])
-  // 根据能力id查询是否存在关联应用
-  if (keyId) {
-    let params = {
-      keyId: keyId,
-      type: '组件服务',
+}
+const selectNav = (key) => {
+  select.value = key
+  mybus.emit('flyToView', select.value)
+}
+if (props.dataList.infoList) {
+  list.value = []
+  props.dataList.infoList.map((item) => {
+    if (
+      item.attrType === '功能介绍' ||
+      item.attrType === '常见问题' ||
+      item.attrType === '使用能力' ||
+      item.attrType === '关联组件'
+    ) {
+      list.value.push(item.attrType)
+    } else if (item.attrType === '应用展示视频') {
+      list.value.push('应用展示')
     }
-    queryPartAppByKeyId(params).then((res) => {
-      console.log('ressssssss', res)
-      if (res.data.data.length != 0) {
-        // 存在关联应用时在导航栏加入关联应用
-        navList.value.unshift({
-          name: '关联组件',
-          key: 'application-associated-ability',
-          show: true,
-        })
-        list.value.unshift('关联组件')
-      }
-    })
-  }
-  const selectNav = (key) => {
-    select.value = key
-    mybus.emit('flyToView', select.value)
-  }
-  if (props.dataList.infoList) {
-    list.value = []
-    props.dataList.infoList.map((item) => {
-      if (
-        item.attrType === '算法优势' ||
-        item.attrType === '常见问题' ||
-        item.attrType === '使用能力' ||
-        item.attrType === '关联组件'
-      ) {
-        list.value.push(item.attrType)
-      } else if (item.attrType === '应用展示视频') {
-        list.value.push('应用展示')
-      }
-    })
-    list.value.unshift('关联组件')
-    navList.value.forEach((item) => {
-      console.log(item)
-      if (list.value.indexOf(item.name) > -1) {
-        item.show = true
-      }
-    })
-    if (list.value.length > 0) {
-      if (navList.value.filter((item) => item.name === list.value[0])[0]) {
-        select.value = navList.value.filter(
-          (item) => (item.name === '关联组件') | (item.name === list.value[0])
-        )[0].key
-      }
+  })
+  list.value.unshift('关联组件')
+  list.value.push('部署与安全')
+  list.value.push('归属部门与服务商')
+  navList.value.forEach((item) => {
+    console.log(item)
+    if (list.value.indexOf(item.name) > -1) {
+      item.show = true
     }
-    console.log('11111111111111111111111111', list.value, navList.value)
-  }
-  watch(
-    () => props.selectNow,
-    (newValue) => {
-      select.value = newValue
+  })
+  if (list.value.length > 0) {
+    if (navList.value.filter((item) => item.name === list.value[0])[0]) {
+      select.value = navList.value.filter(
+        (item) => (item.name === '关联组件') | (item.name === list.value[0])
+      )[0].key
     }
-  )
-  watch(
-    () => props.dataList,
-    (val) => {
-      if (val) {
-        list.value = []
-        val.infoList.map((item) => {
-          if (
-            item.attrType === '功能介绍' ||
-            item.attrType === '常见问题' ||
-            item.attrType === '使用能力' ||
-            item.attrType === '关联组件'
-          ) {
-            list.value.push(item.attrType)
-          } else if (item.attrType === '应用展示视频') {
-            list.value.push('应用展示')
-          }
-        })
-        list.value.unshift('关联组件')
-        list.value.push('部署与安全')
-        list.value.push('归属部门与服务商')
-        navList.value.forEach((item) => {
-          console.log(item)
-          if (list.value.indexOf(item.name) > -1) {
-            item.show = true
-          }
-        })
-        if (list.value.length > 0) {
-          if (navList.value.filter((item) => item.name === list.value[0])[0]) {
-            select.value = navList.value.filter(
-              (item) =>
-                (item.name === '关联组件') | (item.name === list.value[0])
-            )[0].key
-          }
+  }
+  console.log('11111111111111111111111111', list.value, navList.value)
+}
+watch(
+  () => props.selectNow,
+  (newValue) => {
+    select.value = newValue
+  }
+)
+watch(
+  () => props.dataList,
+  (val) => {
+    if (val) {
+      list.value = []
+      val.infoList.map((item) => {
+        if (
+          item.attrType === '功能介绍' ||
+          item.attrType === '常见问题' ||
+          item.attrType === '使用能力' ||
+          item.attrType === '关联组件'
+        ) {
+          list.value.push(item.attrType)
+        } else if (item.attrType === '应用展示视频') {
+          list.value.push('应用展示')
+        }
+      })
+      list.value.unshift('关联组件')
+      list.value.push('部署与安全')
+      list.value.push('归属部门与服务商')
+      navList.value.forEach((item) => {
+        console.log(item)
+        if (list.value.indexOf(item.name) > -1) {
+          item.show = true
+        }
+      })
+      if (list.value.length > 0) {
+        if (navList.value.filter((item) => item.name === list.value[0])[0]) {
+          select.value = navList.value.filter(
+            (item) =>
+              (item.name === '关联组件') | (item.name === list.value[0])
+          )[0].key
         }
-        console.log('11111111111111111111111111', list.value, navList.value)
       }
+      console.log('11111111111111111111111111', list.value, navList.value)
     }
-  )
+  }
+)
 </script>
 <style lang="less" scoped>
-  .application-navigation {
-    width: 19.12rem;
-    height: 0.84rem;
-    line-height: 0.8rem;
+.application-navigation {
+  width: 19.12rem;
+  height: 0.84rem;
+  line-height: 0.8rem;
+  display: flex;
+  justify-content: space-around;
+  font-size: 0.24rem;
+  color: #666;
+  background: #fff;
+  padding: 0 3rem;
+  box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
+  position: relative;
+
+  .nav {
+    cursor: pointer;
     display: flex;
-    justify-content: space-around;
-    font-size: 0.24rem;
-    color: #666;
-    background: #fff;
-    padding: 0 3rem;
-    box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
-    position: relative;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
 
-    .nav {
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-
-      .line {
-        width: 0.4rem;
-        height: 0.04rem;
-      }
-    }
-
-    .select {
-      color: #526aff;
-
-      .line {
-        background: #526aff;
-      }
+    .line {
+      width: 0.4rem;
+      height: 0.04rem;
     }
   }
+
+  .select {
+    color: #526aff;
+
+    .line {
+      background: #526aff;
+    }
+  }
+}
 </style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue b/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
index 9b26d182..52aaac54 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
@@ -8,15 +8,10 @@
 <template>
   <div class="application-presentation" v-if="flag">
     <detals-title title="应用展示" type="IMAGE&VIDEO"></detals-title>
-    <div class="main">
+    <div class="main" :style="`${img}background-position:center;background-size:cover;`">
       <div class="play" @click="showModal"></div>
     </div>
-    <a-modal
-      v-model:visible="visible"
-      title="视频预览"
-      :width="750"
-      destroyOnClose
-    >
+    <a-modal v-model:visible="visible" title="视频预览" :width="750" destroyOnClose>
       <template #footer></template>
       <div style="width: 100%; display: flex; justify-content: center">
         <div style="width: 100%; height: 100%">
@@ -27,90 +22,106 @@
   </div>
 </template>
 <script setup>
-  import { ref, reactive, defineProps, watch } from 'vue'
-  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
-  const visible = ref(false)
-  const options = reactive({
-    width: '7.00rem', //播放器宽度
-    height: '4.00rem', //播放器高度
-    color: '#409eff', //主题色
-    title: '', //视频名称
-    src: '', //视频源
-    muted: false, //静音
-    webFullScreen: false,
-    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
-    autoPlay: true, //自动播放
-    loop: false, //循环播放
-    mirror: false, //镜像画面
-    ligthOff: false, //关灯模式
-    volume: 0.3, //默认音量大小
-    control: true, //是否显示控制
-    controlBtns: [
-      'audioTrack',
-      'quality',
-      'speedRate',
-      'volume',
-      'setting',
-      'pip',
-      'pageFullScreen',
-      'fullScreen',
-    ], //显示所有按钮,
-  })
-  const showModal = () => {
-    visible.value = true
-  }
-  const props = defineProps({
-    dataList: { type: Object, default: null },
-  })
-  const flag = ref(true)
-  console.log('111111111111111111111,', props.dataList)
-  if (props.dataList.infoList) {
-    let obj = props.dataList.infoList.filter(
-      (item) => item.attrType === '应用展示视频'
+import { ref, reactive, defineProps, watch } from 'vue'
+import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+const visible = ref(false)
+const options = reactive({
+  width: '7.00rem', //播放器宽度
+  height: '4.00rem', //播放器高度
+  color: '#409eff', //主题色
+  title: '', //视频名称
+  src: '', //视频源
+  muted: false, //静音
+  webFullScreen: false,
+  speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
+  autoPlay: true, //自动播放
+  loop: false, //循环播放
+  mirror: false, //镜像画面
+  ligthOff: false, //关灯模式
+  volume: 0.3, //默认音量大小
+  control: true, //是否显示控制
+  controlBtns: [
+    'audioTrack',
+    'quality',
+    'speedRate',
+    'volume',
+    'setting',
+    'pip',
+    'pageFullScreen',
+    'fullScreen',
+  ], //显示所有按钮,
+})
+const showModal = () => {
+  visible.value = true
+}
+const props = defineProps({
+  dataList: { type: Object, default: null },
+})
+const flag = ref(true)
+const img = ref({})
+console.log('111111111111111111111,', props.dataList)
+if (props.dataList.infoList) {
+  let obj = props.dataList.infoList.filter(
+    (item) => item.attrType === '应用展示视频'
+  )[0]
+  console.log('视频==============>', obj)
+  if (!obj) {
+    flag.value = false
+  } else {
+    let imgindex = props.dataList.infoList.filter(
+      (item) => item.attrType === '应用图片'
     )[0]
-    console.log('视频==============>', obj)
-    if (!obj) {
-      flag.value = false
-    } else {
-      options.src = obj.attrValue
+    options.src = obj.attrValue
+    if (imgindex) {
+      img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
     }
   }
-  watch(
-    () => props.dataList,
-    (val) => {
-      if (val) {
-        let obj = val.infoList.filter(
-          (item) => item.attrType === '应用展示视频'
+}
+watch(
+  () => props.dataList,
+  (val) => {
+    if (val) {
+      let obj = val.infoList.filter(
+        (item) => item.attrType === '应用展示视频'
+      )[0]
+      console.log('视频==============>', obj)
+      if (!obj) {
+        flag.value = false
+      } else {
+        let imgindex = props.dataList.infoList.filter(
+          (item) => item.attrType === '应用图片'
         )[0]
-        console.log('视频==============>', obj)
-        if (!obj) {
-          flag.value = false
-        } else {
-          options.src = obj.attrValue
+        options.src = obj.attrValue
+        if (imgindex) {
+          img.value =
+            'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
         }
       }
     }
-  )
+  }
+)
 </script>
 <style lang="less" scoped>
-  .application-presentation {
-    padding: 0.8rem 3rem 0;
-    .main {
-      height: 3.4rem;
-      border-radius: 0.1rem;
-      background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
+.application-presentation {
+  padding: 0.8rem 3rem 0;
+
+  .main {
+    height: 3.4rem;
+    border-radius: 0.1rem;
+    background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
+    background-size: 100%;
+    margin-top: 0.4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .play {
+      width: 0.96rem;
+      height: 0.96rem;
+      background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
       background-size: 100%;
-      margin-top: 0.4rem;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      .play {
-        width: 0.96rem;
-        height: 0.96rem;
-        background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
-        background-size: 100%;
-        cursor: pointer;
-      }
+      cursor: pointer;
     }
   }
+}
 </style>