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

西海岸-智能算法：容错处理
西海岸-支持组件服务-算法分类
2022-09-20 16:37:59 +08:00 · 2022-09-20 15:15:17 +08:00 · 2022-09-20 13:31:56 +08:00
4 changed files with 175 additions and 196 deletions
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@ -513,31 +513,35 @@ export default defineComponent({
    }

    const searchResultListDom = ref(null)
-    // 读取本地存储查询条件
-    const storageSearchInfo = localStorage.getItem('DetailsPageconetent') && JSON.parse(
-      localStorage.getItem('DetailsPageconetent')
-    )
-    const handleSetSearchData = () => {
-      console.log('storageSearchInfo------------>', storageSearchInfo)
-      // 读取本地存储：表单赋值
-      if (storageSearchInfo) {
-        paramsGetResources = Object.assign({}, paramsGetResources, storageSearchInfo)
-        // 搜索名称
-        searchValue.value = storageSearchInfo.name;
-        currentPage.value = storageSearchInfo.pageNum;
-        currentPageSize.value = storageSearchInfo.pageSize;
-        paramsGetResources.pageNum = storageSearchInfo.pageNum;
-        paramsGetResources.pageSize = storageSearchInfo.pageSize;
-        paramsGetResources.deptIds = storageSearchInfo.deptIds;
-        paramsGetResources.districtId = storageSearchInfo.districtId;

-        // 延迟使用，因为还没有返回跟挂载
-        nextTick(() => {
-          searchResultListDom.value.changeCondition({
-            value: storageSearchInfo.orderField,
-            orderType: storageSearchInfo.orderType,
-          }, true)
-        })
+    // 读取本地存储查询条件
+    let storageSearchInfo = null
+    const handleSetSearchData = () => {
+      if (whoShow1.value.itShowXiHaiAn) {
+        if (localStorage.getItem('DetailsPageconetent')) {
+          storageSearchInfo = JSON.parse(localStorage.getItem('DetailsPageconetent'));
+        }
+        console.log('storageSearchInfo------------>', storageSearchInfo)
+        // 读取本地存储：表单赋值
+        if (storageSearchInfo) {
+          paramsGetResources = Object.assign({}, paramsGetResources, storageSearchInfo)
+          // 搜索名称
+          searchValue.value = storageSearchInfo.name;
+          currentPage.value = storageSearchInfo.pageNum;
+          currentPageSize.value = storageSearchInfo.pageSize;
+          paramsGetResources.pageNum = storageSearchInfo.pageNum;
+          paramsGetResources.pageSize = storageSearchInfo.pageSize;
+          paramsGetResources.deptIds = storageSearchInfo.deptIds;
+          paramsGetResources.districtId = storageSearchInfo.districtId;
+
+          // 延迟使用，因为还没有返回跟挂载
+          nextTick(() => {
+            searchResultListDom.value.changeCondition({
+              value: storageSearchInfo.orderField,
+              orderType: storageSearchInfo.orderType,
+            }, true)
+          })
+        }
      }
    }

@ -631,20 +635,24 @@ export default defineComponent({
      paramsGetResources.pageNum = 1
      currentPage.value = 1
      console.log('点击筛选条件=================>', tag, checked, name)
-      // 智能算法 特殊处理
-      if (tag.dict_label == '智能算法' && checked) {
-        ListContent.records.splice(2, 1, ListContentCopy.value[2])
-      } else {
-        if (name == '组件类型') {
-          ListContent.records.splice(2, 1)
-          paramsGetResources.infoList = paramsGetResources.infoList.filter(
-            (item) => componentTypeArray.includes(item.attrType)
-          )
+
+      // 西海岸-智能算法 特殊处理
+      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)
+            paramsGetResources.infoList = paramsGetResources.infoList.filter(
+              (item) => componentTypeArray.includes(item.attrType)
+            )
+          }
        }
      }

      ListContent.records.forEach((val) => {
-        
        if (!val) {
          return;
        }
@ -661,10 +669,13 @@ export default defineComponent({
          } else {
            val.selectedTags && val.selectedTags.splice(val.selectedTags.indexOf(tag.dict_label), 1)
          }
-          // 
-          if ((val.selectedTags.length == 0 && tag.dict_label == '智能算法' && !checked) || (tag.dict_label !== '智能算法' && name == '组件类型')) {
-            if (ListContentCopy.value[2]) {
-              ListContentCopy.value[2].selectedTags = []
+
+          // 西海岸-智能算法 特殊处理
+          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 = []
+              }
            }
          }
        }
--- a/front/src/views/home/components/ComponentServiceTag.vue
+++ b/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>
+  
--- a/front/src/views/home/components/searchResultList.vue
+++ b/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
-                  v-if="
+                <div
+                  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: '组件服务',
-    },
-  },
-  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 ''
+      default: '应用资源',
    },
  },
  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() {
--- a/front/src/views/home/infrastructurePage.vue
+++ b/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: false, //自动播放
+    autoPlay: isXiHaiAn ? false : true, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
-    control: true, //是否显示控制
-    controlBtns: [
+    control: isXiHaiAn ? false : true, //是否显示控制
+    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) => {
-    //   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'
-
+    getStreamByChannelCode(param).then((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'
  }
  // 打开图片预览
  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 vue3VideoPlay = ref(null)
-  const onPlay = (ev) => {
-    console.log('播放')
-    // message.warning('视频播放')
-    // nextTick(() => {
-    //   // console.log('vue3VideoPlay.value.state------------>', vue3VideoPlay.value.state);
-    // })
+  const showMsg = () => {
+    message.warning('请申请后在我的申请中预览视频!')
  }
-  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>
Author	SHA1	Message	Date
guoyue	3e6f875728	西海岸-视频预览--禁止点击播放，给出提示	2022-09-20 16:37:59 +08:00
guoyue	856cf3e41f	西海岸-智能算法：容错处理	2022-09-20 15:15:17 +08:00
guoyue	7f884528e9	西海岸-支持组件服务-算法分类	2022-09-20 13:31:56 +08:00