西海岸-视频预览--禁止点击播放，给出提示

front/src/views/home/DetailsPageconetent.vue

@@ -513,11 +513,14 @@ export default defineComponent({
     }
 
     const searchResultListDom = ref(null)
+
     // 读取本地存储查询条件
-    const storageSearchInfo = localStorage.getItem('DetailsPageconetent') && JSON.parse(
+    let storageSearchInfo = null
-      localStorage.getItem('DetailsPageconetent')
-    )
     const handleSetSearchData = () => {
+      if (whoShow1.value.itShowXiHaiAn) {
+        if (localStorage.getItem('DetailsPageconetent')) {
+          storageSearchInfo = JSON.parse(localStorage.getItem('DetailsPageconetent'));
+        }
         console.log('storageSearchInfo------------>', storageSearchInfo)
         // 读取本地存储：表单赋值
         if (storageSearchInfo) {
@@ -540,6 +543,7 @@ export default defineComponent({
           })
         }
       }
+    }
 
     //西海岸查询参数
     let paramsGetResources2 = ref({
@@ -631,9 +635,13 @@ export default defineComponent({
       paramsGetResources.pageNum = 1
       currentPage.value = 1
       console.log('点击筛选条件=================>', tag, checked, name)
-      // 智能算法 特殊处理
+
+      // 西海岸-智能算法 特殊处理
+      if (whoShow1.value.itShowXiHaiAn) {
         if (tag.dict_label == '智能算法' && checked) {
+          if(ListContentCopy.value[2]) {
             ListContent.records.splice(2, 1, ListContentCopy.value[2])
+          }
         } else {
           if (name == '组件类型') {
             ListContent.records.splice(2, 1)
@@ -642,9 +650,9 @@ export default defineComponent({
             )
           }
         }
+      }
 
       ListContent.records.forEach((val) => {
-        
         if (!val) {
           return;
         }
@@ -661,13 +669,16 @@ export default defineComponent({
           } else {
             val.selectedTags && val.selectedTags.splice(val.selectedTags.indexOf(tag.dict_label), 1)
           }
-          // 
+
+          // 西海岸-智能算法 特殊处理
+          if (whoShow1.value.itShowXiHaiAn) {
             if ((val.selectedTags.length == 0 && tag.dict_label == '智能算法' && !checked) || (tag.dict_label !== '智能算法' && name == '组件类型')) {
               if (ListContentCopy.value[2]) {
                 ListContentCopy.value[2].selectedTags = []
               }
             }
           }
+        }
       })
       listKey.value++
       console.log('paramsGetResources---handleChange--------->', paramsGetResources);

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

@@ -0,0 +1,46 @@
+<template>
+    <div class="tag-box">
+        <div class="tag-item" v-for="(item, index) in tagList" :key="index">
+            {{item}}
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref, onMounted, onBeforeUnmount, watch, defineProps, defineEmits } from 'vue'
+
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const props = defineProps({
+    componentServiceTagList: {
+        type: Object,
+        default: () => { },
+    },
+})
+
+const tagList = ref([])
+onMounted(() => {
+    tagList.value = props.componentServiceTagList
+})
+
+watch(
+    () => props.componentServiceTagList,
+    (val) => {
+        if (val) {
+            tagList.value = val
+        }
+    }
+)
+</script>
+<style lang="less" scoped>
+.tag-item {
+    font-family: 'Alibaba PuHuiTi';
+    font-weight: 400;
+    border-radius: 0.12rem;
+    margin: 0 10px;
+    padding: 2px 8px;
+    font-size: 12px;
+    color: #0087ff;
+    background: rgba(0, 88, 225, 0.1);
+}
+</style>
+  

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

@@ -19,10 +19,6 @@
             selectCardsname !== '数据资源'
           ">
             {{ item.name }}
-            <!-- {{orderObj.orderType}}{{orderObj.orderField}} -->
-            <!-- <span class="arrow" :class="item.value == selData ? 'down' : ''"></span> -->
-            <!-- {{orderObj.orderType == 'ASC' ? '11' : '22'}} -->
-            <!-- {{orderObj.orderField == item.value ? '11' : '22'}} -->
             <span class="arrow" :class="
               orderObj.orderType == 'ASC' &&
               orderObj.orderField == item.value
@@ -31,7 +27,6 @@
             "></span>
           </li>
         </ul>
-        <!-- {{JSON.stringify(orderObj)}} -->
       </div>
     </div>
     <div class="result-list" v-for="(item, index) in resourceList.data" :key="item.index">
@@ -95,6 +90,8 @@
           <div class="header">
             <span style="display: flex; align-items: center; width: 680px">
               {{ item.name }}
+              <!-- 西海岸-智能算法-算法类型-标签显示 -->
+              <ComponentServiceTag v-if="selectCardsname === '组件服务' && whoShow1.itShowXiHaiAn" :componentServiceTagList="getTagList(item)"></ComponentServiceTag>
               <!-- 已申请--通过 -->
               <svg t="1652322568870" class="icon" viewBox="0 0 3072 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="3062" width="40" height="40" v-if="
@@ -159,15 +156,15 @@
           <div class="btn">
             <div class="bottom" v-if="selectCardsname !== '基础设施'">
               <div>
-                <!-- <div
+                <div
-                  v-if="
+                  v-if="!whoShow1.itShowXiHaiAn &&
                     selectCardsname !== '数据资源' &&
                     selectCardsname !== '融合服务' &&
                     selectCardsname !== '赋能场景'
                   "
                 >
                   浏览量：{{ item.visits || 0 }}次
-                </div> -->
+                </div>
                 <div v-if="
                   selectCardsname !== '数据资源' &&
                   selectCardsname !== '赋能场景' &&
@@ -254,7 +251,8 @@ import { getUser, sgcInsert } from '@/api/home'
 import { scInsert, scDel } from '@/api/personalCenter'
 import mybus from '@/myplugins/mybus'
 import { getHls } from '@/api/home.js'
-import IntegrationServiceOrder from './integrationServiceOrder.vue'
+import IntegrationServiceOrder from './integrationServiceOrder.vue';
+import ComponentServiceTag from './ComponentServiceTag.vue';
 export default {
   name: '',
   props: {
@@ -268,98 +266,19 @@ export default {
     },
     selectCardsname: {
       type: String,
-      default: '组件服务',
+      default: '应用资源',
-    },
-  },
-  computed: {
-    dataList() {
-      const newArr = []
-      for (let i = 0; i < this.resourceList.data.length; i++) {
-        let arr = [
-          {
-            name: '应用名称',
-            value: '',
-          },
-          {
-            name: '应用ID',
-            value: '',
-            dataResourceId: '',
-          },
-          {
-            name: '应用领域',
-            value: '',
-          },
-          {
-            name: '组件类型',
-            value: '',
-          },
-          {
-            name: '技术领域',
-            value: '',
-          },
-          {
-            name: '共享类型',
-            value: '',
-          },
-          {
-            name: '共享条件',
-            value: '',
-          },
-        ]
-        arr.map((item) => {
-          if (item.name === '应用名称') {
-            item.value = this.resourceList.data[i].name
-          }
-          if (item.name === '应用ID') {
-            item.value = this.resourceList.data[i].id
-            item.dataResourceId =
-              this.resourceList.data[i].infoList[0].dataResourceId
-          }
-          if (item.name === '应用领域') {
-            this.resourceList.data[i].infoList.map((aa) => {
-              aa.attrType === '应用领域' ? (item.value = aa.attrValue) : ''
-            })
-          }
-          if (item.name === '组件类型') {
-            this.resourceList.data[i].infoList.map((aa) => {
-              aa.attrType === '组件类型' ? (item.value = aa.attrValue) : ''
-            })
-          }
-          if (item.name === '技术领域') {
-            this.resourceList.data[i].infoList.map((aa) => {
-              aa.attrType === '技术领域' ? (item.value = aa.attrValue) : ''
-            })
-          }
-          if (item.name === '共享类型') {
-            this.resourceList.data[i].infoList.map((aa) => {
-              aa.attrType === '共享类型' ? (item.value = aa.attrValue) : ''
-            })
-          }
-          if (item.name === '共享条件') {
-            this.resourceList.data[i].infoList.map((aa) => {
-              aa.attrType === '共享条件' ? (item.value = aa.attrValue) : ''
-            })
-          }
-        })
-        newArr.push(arr)
-      }
-      console.log('dataList======================>', newArr, this.resourceList)
-      return newArr
-    },
-    isShoppingCartOrNot() {
-      return ''
     },
   },
   components: {
     IntegrationServiceOrder,
+    ComponentServiceTag,
   },
   setup(props, context) {
     const whoShow1 = whoShow
+    console.log('whoShow1------------>', whoShow1);
     const showKey = ref(0)
     let shoppingKey = ref(1)
     let orderObj = reactive({
-      // orderField: 'tdr.create_date',
-      // orderType: 'ASC',
       orderField: '',
       orderType: '',
     })
@@ -367,11 +286,15 @@ export default {
     // 购物车id列表
     const selList = ref([
       { name: '发布时间', value: 'tdr.create_date', show: true, orderType: 'DESC' },
-      // { name: '浏览量', value: 'visits', show: true, orderType: 'DESC' },
+      { name: '浏览量', value: 'visits', show: true, orderType: 'DESC' },
       { name: '申请量', value: 'applyCount', show: true, orderType: 'DESC' },
       { name: '收藏量', value: 'collectCount', show: true, orderType: 'DESC' },
       { name: '评分', value: 'score', show: true, orderType: 'DESC' },
     ])
+    // 西海岸-去掉浏览量
+    if(whoShow1.itShowXiHaiAn) {
+      selList.value = selList.value.filter(v=>v.name !== '浏览量')
+    }
     if (props.selectCardsname === '基础设施') {
       selList.value.map((val) => (val.show = false))
     } else if (props.selectCardsname === '数据资源') {
@@ -389,6 +312,14 @@ export default {
         })
       }
     }
+
+    // 智能算法--列表增加标签显示
+    const showTagArray = ['已落地', '需要计算支持']
+    const getTagList = (item) => {
+      let _arr = item.infoList.filter((x) => showTagArray.includes(x.attrValue)) || []
+      let tagArray = _arr.map(v=>v.attrValue)
+      return tagArray
+    }
     console.log('this.resourceList', props.resourceList.data)
     props.resourceList.data.map((val) => {
       if (val.infoList) {
@@ -576,7 +507,6 @@ export default {
      * isFromFather: 是否来自父组件传值
      */
     const changeCondition = (item, isFromFather = false) => {
-      console.log('item, isFromFather------------>', item, isFromFather);
       let newType = item.orderType == 'DESC' ? 'ASC' : 'DESC';
       if (isFromFather) {
         newType = item.orderType;
@@ -588,10 +518,6 @@ export default {
         selList.value[_index].orderType = newType
       }
       selList.value = selList.value.splice(0);
-      nextTick(() => {
-        console.log('orderObj------------>', orderObj);
-        console.log('selList------------>', selList.value);
-      })
       mybus.emit('changeCondition', orderObj)
     }
 
@@ -737,6 +663,7 @@ export default {
       handleAKeyApplication,
       integrationServiceOrderDom,
       orderObj,
+      getTagList,
     }
   },
   beforeUnmount() {

front/src/views/home/infrastructurePage.vue

@@ -494,7 +494,7 @@
           <template #bodyCell="{ column, record }">
             <template v-if="column.dataIndex === 'operation'">
               <a
-                v-if="isXiHaiAn"
+                v-if="isXiHaiAn || true"
                 @click="
                   openVideo(
                     record.channelCode ||
@@ -569,6 +569,21 @@
           </div>
         </div>
       </a-modal>
+      <!-- 西海岸--单个预览弹窗--遮挡，不让点击视频播放 -->
+      <a-modal
+        wrapClassName="single-preview-modal-cover"
+        v-if="whoShow1.itShowXiHaiAn"
+        v-model:visible="visible"
+        :width="960"
+      >
+      <template #footer></template>
+        <div style="width: 100%; display: flex; justify-content: center">
+          <div style="width: 100%; height: 100%">
+            <div style="width: 912px; height: 518px;margin-top: 50px" @click="showMsg"></div>
+          </div>
+        </div>
+      </a-modal>
+
       <!-- 图片预览 -->
       <a-modal
         wrapClassName="single-preview-modal"
@@ -706,8 +721,6 @@
 </template>
 <script setup>
   import VideoSurveillance from '@/views/home/videoSurveillance'
-  // import { getCategoryTreePage } from '@/api/personalCenter'
-  // import { dataType } from 'element-plus/es/components/table-v2/src/common'
   import { useRouter } from 'vue-router'
   import { message, Upload } from 'ant-design-vue'
   import {
@@ -719,6 +732,8 @@
     defineComponent,
     nextTick,
     defineExpose,
+    computed,
+
   } from 'vue'
   import {
     getCameraByParentId,
@@ -746,7 +761,7 @@
   const videoTotal = ref(0)
   const router = useRouter()
   const whoShow1 = ref(whoShow)
-  const isXiHaiAn = whoShow1.value.itShowXiHaiAn
+  const isXiHaiAn = whoShow1.value.itShowXiHaiAn;
   const options = reactive({
     width: '912px', //播放器宽度
     height: '513px', //播放器高度
@@ -757,14 +772,13 @@
     muted: false, //静音
     webFullScreen: false,
     speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
-    // autoPlay: isXiHaiAn, //自动播放
+    autoPlay: isXiHaiAn ? false : true, //自动播放
-    autoPlay: false, //自动播放
     loop: false, //循环播放
     mirror: false, //镜像画面
     ligthOff: false, //关灯模式
     volume: 0.3, //默认音量大小
-    control: true, //是否显示控制
+    control: isXiHaiAn ? false : true, //是否显示控制
-    controlBtns: [
+    controlBtns: isXiHaiAn ? [] : [
       'audioTrack',
       'quality',
       'speedRate',
@@ -797,14 +811,6 @@
     pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
   })
   const formState = reactive({
-    // name: '',
-    // iphone: '18264084961',
-    // group: '',
-    // create: '',
-    // cerateTime: '',
-    // endTime: '',
-    // introduction: '',
-    // uploadRoom: '',
     roomId: '',
     bookDate: '', //日期
     startTime: '', //开始时间
@@ -928,8 +934,7 @@
   const tabList = ref([
     {
       title: '设施类型',
-      content: ['视频资源', '感知资源', '城市云脑会客厅']
+      content: isXiHaiAn ? ['视频资源', '感知资源', '城市云脑会客厅'] :  ['视频资源', '云资源', '感知资源', '城市云脑会客厅'],
-      // content: isXiHaiAn ? ['视频资源', '感知资源', '城市云脑会客厅'] :  ['视频资源', '云资源', '感知资源', '城市云脑会客厅'],
     },
     {
       title: '视频标签',
@@ -979,14 +984,14 @@
     const param = {
       key: id,
     }
-    // getStreamByChannelCode(param).then((res) => {
+    getStreamByChannelCode(param).then((res) => {
-    //   console.log(res)
+      console.log(res)
-    //   visible.value = true
-    //   options.src = res.data.data
-    // })
       visible.value = true
-    options.src = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
+      options.src = res.data.data
-
+    })
+    // 视频测试--勿删
+    // visible.value = true
+    // options.src = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
   }
   // 打开图片预览
   const openPicture = (id) => {
@@ -1004,15 +1009,7 @@
       }
     })
   }
-  // const dataTypeList = () => {
-  //   if (tabList.value[0].content.indexOf('视频资源') != -1) {
-  //     tabList.value[1].content = ['123344', '213124']
-  //   }else if(tabList.value[0].content.indexOf('云资源') != -1){
-  //     tabList.value[1].content = ['5555', '666']
  
-  //   }
-  // }
-  // dataTypeList()
   //初始化数据
   const init = () => {
     tabList.value.map((item) => {
@@ -1721,7 +1718,6 @@
       })
     } else {
       console.log('mapSearchParam------------>', mapSearchParam);
-      
       let params = {
         regionId:
           mapSearchParam.value.parentId || '70be8c5b664f4bcf869d82f2e8335051',
@@ -1887,39 +1883,16 @@
     // this.getTableList()
   }
 
-  // 视频播放 todo
+  const showMsg = () => {
-  // const vue3VideoPlay = ref(null)
+    message.warning('请申请后在我的申请中预览视频!')
-  const onPlay = (ev) => {
-    console.log('播放')
-    // message.warning('视频播放')
-    // nextTick(() => {
-    //   // console.log('vue3VideoPlay.value.state------------>', vue3VideoPlay.value.state);
-    // })
   }
-  const onPause = (ev) => {
-    console.log(ev, '暂停')
-  }
-
-  const onTimeupdate = (ev) => {
-    console.log(ev, '时间更新')
-    onPause(ev)
-  }
-  const onCanplay = (ev) => {
-    console.log(ev, '可以播放')
-  }
- 
 </script>
 <style lang="less" scoped>
   .infrastructrueBox {
     padding: 0.2rem;
-    // background: #f3f5f9;
     background: #ffffff;
-    /* padding: 0.16rem; */
     border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
     .infrastructrue-tab {
-      // background: #ffffff;
-      // padding: 0.2rem;
-      // border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
       span {
         display: inline-block;
         height: 0.24rem;
@@ -2240,6 +2213,23 @@
       color: #ffffff;
     }
   }
+  .ant-modal-mask {
+    background: rgba(0, 0, 0, 0.2);
+  }
+  .ant-modal-footer {
+    display: none;
+  }
+  .single-preview-modal-cover {
+    background: transparent;
+    z-index: 999999;
+
+    .ant-modal {
+      background: transparent !important;
+    }
+    .ant-modal-content {
+      background: transparent !important;
+    }
+  }
   .batch-preview-modal {
     .batch-video {
       width: 100%;
@@ -2266,4 +2256,9 @@
       color: #ffffff;
     }
   }
+
+  /*禁用video的controls（要慎重！不要轻易隐藏掉，会导致点击视频不能播放）*/
+  video::-webkit-media-controls {
+    display:none !important;
+  }
 </style>