BUG修改 应用资源新增 能力集市图标 和详情页切换

back/src/components/ren-process-detail/src/ren-process-detail.vue

@@ -1,15 +1,15 @@
 <!--
  * @Author: hisense.wuhongjian
  * @Date: 2022-04-11 16:30:04
- * @LastEditors: hisense.wuhongjian
+ * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-06 13:14:02
+ * @LastEditTime: 2022-07-16 15:07:44
  * @Description: 告诉大家这是什么
 -->
 <template>
   <el-card shadow="never" class="aui-card--fill">
     <!-- 流程图 -->
-    <h4>{{ $t('process.flowImage') }}</h4>
+    <!-- <h4>{{ $t('process.flowImage') }}</h4>
-    <img :src="getResourceURL()" class="image">
+    <img :src="getResourceURL()" class="image"> -->
     <!-- 流转详情 -->
     <h4>{{ $t('process.circulation') }}</h4>
     <div class="mod-sys__dict">

front/public/index.html

@@ -49,7 +49,7 @@
     window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
     window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796/';
     window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
-    window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
+    window.SITE_CONFIG['apiURL'] = 'http://15.2.21.239:8888/renren-admin';
     window.SITE_CONFIG['POI_URL'] = 'http://15.2.21.238:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
     // 穿透版本
     // window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';

front/src/views/detailsAll/components/Application/ApplicationPresentation.vue

@@ -2,16 +2,37 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 15:25:33
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-14 11:30:52
+ * @LastEditTime: 2022-07-16 15:59:09
  * @Description: 应用展示  视频播放
 -->
 <template>
   <div class="application-presentation" v-if="flag">
     <detals-title title="应用展示" type="IMAGE&VIDEO"></detals-title>
-    <div class="main" :style="`${img}background-position:center;background-size:cover;`">
+    <div class="box">
-      <div class="play" @click="showModal"></div>
+      <div class="left" @click="chagneShow()"></div>
+      <div
+        class="main"
+        :style="`${img}background-position:center;background-size:cover;`"
+        v-if="
+          showArr.length > 0 && showArr[showFlag].attrType == '应用展示视频'
+        "
+      >
+        <div class="play" @click="showModal"></div>
+      </div>
+      <div
+        class="main2"
+        v-if="showArr.length > 0 && showArr[showFlag].attrType == '应用图片'"
+      >
+        <a-image :width="700" :src="showArr[showFlag].attrValue" />
+      </div>
+      <div class="right" @click="chagneShow()"></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%">
@@ -22,106 +43,134 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, defineProps, watch } from 'vue'
+  import { ref, reactive, defineProps, watch } from 'vue'
-import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
-const visible = ref(false)
+  const visible = ref(false)
-const options = reactive({
+  const options = reactive({
-  width: '7.00rem', //播放器宽度
+    width: '7.00rem', //播放器宽度
-  height: '4.00rem', //播放器高度
+    height: '4.00rem', //播放器高度
-  color: '#409eff', //主题色
+    color: '#409eff', //主题色
-  title: '', //视频名称
+    title: '', //视频名称
-  src: '', //视频源
+    src: '', //视频源
-  muted: false, //静音
+    muted: false, //静音
-  webFullScreen: false,
+    webFullScreen: false,
-  speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
+    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
-  autoPlay: true, //自动播放
+    autoPlay: true, //自动播放
-  loop: false, //循环播放
+    loop: false, //循环播放
-  mirror: false, //镜像画面
+    mirror: false, //镜像画面
-  ligthOff: false, //关灯模式
+    ligthOff: false, //关灯模式
-  volume: 0.3, //默认音量大小
+    volume: 0.3, //默认音量大小
-  control: true, //是否显示控制
+    control: true, //是否显示控制
-  controlBtns: [
+    controlBtns: [
-    'audioTrack',
+      'audioTrack',
-    'quality',
+      'quality',
-    'speedRate',
+      'speedRate',
-    'volume',
+      'volume',
-    'setting',
+      'setting',
-    'pip',
+      'pip',
-    'pageFullScreen',
+      'pageFullScreen',
-    'fullScreen',
+      'fullScreen',
-  ], //显示所有按钮,
+    ], //显示所有按钮,
-})
+  })
-const showModal = () => {
+  const showFlag = ref(0)
-  visible.value = true
+  const showArr = ref([])
-}
+  const chagneShow = () => {
-const props = defineProps({
+    if (showArr.value.length > 1) {
-  dataList: { type: Object, default: null },
+      showFlag.value = showFlag.value == 0 ? 1 : 0
-})
-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]
-    options.src = obj.attrValue
-    if (imgindex) {
-      img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
     }
   }
-}
+  const showModal = () => {
-watch(
+    visible.value = true
-  () => props.dataList,
+  }
-  (val) => {
+  const props = defineProps({
-    if (val) {
+    dataList: { type: Object, default: null },
-      let obj = val.infoList.filter(
+  })
-        (item) => item.attrType === '应用展示视频'
+  const flag = ref(true)
-      )[0]
+  const img = ref({})
-      console.log('视频==============>', obj)
+  console.log('111111111111111111111,', props.dataList)
-      if (!obj) {
+  if (props.dataList.infoList) {
-        flag.value = false
+    showArr.value = props.dataList.infoList.filter(
-      } else {
+      (item) => item.attrType === '应用展示视频' || item.attrType === '应用图片'
-        let imgindex = props.dataList.infoList.filter(
+    )
-          (item) => item.attrType === '应用图片'
+    console.log('视频==============>', showArr.value)
-        )[0]
+    if (showArr.value.length == 0) {
-        options.src = obj.attrValue
+      flag.value = false
-        if (imgindex) {
+    }
-          img.value =
+  }
-            'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        showArr.value = props.dataList.infoList.filter(
+          (item) =>
+            item.attrType === '应用展示视频' || item.attrType === '应用图片'
+        )
+        console.log('视频==============>', showArr.value)
+        if (showArr.value.length == 0) {
+          flag.value = false
         }
       }
     }
-  }
+  )
-)
 </script>
 <style lang="less" scoped>
-.application-presentation {
+  .application-presentation {
-  padding: 0.8rem 3rem 0;
+    padding: 0.8rem 3rem 0;
 
-  .main {
+    .main {
-    height: 3.4rem;
+      width: 13.14rem;
-    border-radius: 0.1rem;
+      height: 3.4rem;
-    background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
+      border-radius: 0.1rem;
-    background-size: 100%;
+      background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
-    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;
+      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;
+      }
+    }
+    .main2 {
+      width: 13.14rem;
+      height: 3.4rem;
+      border-radius: 0.1rem;
+      background-size: 100%;
+      margin-top: 0.4rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .box {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin-bottom: 0.8rem;
+    .left {
+      width: 0.37rem;
+      height: 0.6rem;
+      cursor: pointer;
+      margin-right: 0.2rem;
+      background: url('~@/assets/detailsAll/business/business_previous.png')
+        no-repeat;
+      background-size: 100%;
+      background-position: center;
+    }
+    .right {
+      width: 0.37rem;
+      height: 0.6rem;
+      cursor: pointer;
+      margin-left: 0.2rem;
+      background: url('~@/assets/detailsAll/business/business_next.png')
+        no-repeat;
+      background-size: 100%;
+      background-position: center;
     }
   }
-}
 </style>

front/src/views/home/components/searchResultList.vue

@@ -50,6 +50,24 @@
       :key="item.index"
     >
       <div class="item" :key="showKey">
+        <div
+          class="left"
+          style="display: flex; align-items: center"
+          v-if="
+            item.type === '应用资源' &&
+            item.infoList &&
+            item.infoList.filter((val) => val.attrType == '应用图片')[0]
+          "
+        >
+          <a-image
+            :width="106"
+            :preview="false"
+            :src="
+              item.infoList.filter((val) => val.attrType == '应用图片')[0]
+                .attrValue
+            "
+          />
+        </div>
         <div
           class="left"
           :class="
@@ -78,7 +96,7 @@
               ? 'ywzj'
               : ''
           "
-          v-if="
+          v-else-if="
             selectCardsname !== '基础设施' && selectCardsname !== '融合服务'
           "
         ></div>