hi-ucs/front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue

<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-09 09:29:29
 * @LastEditors: hisense.wuhongjian
 * @LastEditTime: 2022-07-05 20:25:49
 * @Description: 算法详情 算法试用
-->
<template>
  <div class="algorithm-on-trial" v-if="flag">
    <detals-title title="算法试用" type="PROBATION"></detals-title>
    <div class="main">
      <div class="iframe-box">
        <iframe :src="onTrial" width="100%" height="440"></iframe>
      </div>
    </div>
  </div>
</template>
<script setup>
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
  import { ref, defineProps, watch } from 'vue'
  const props = defineProps({
    dataList: { type: Object, default: null },
  })
  const flag = ref(true)
  const onTrial = ref('')
  if (props.dataList.infoList) {
    let obj = props.dataList.infoList.filter(
      (item) => item.attrType === '试用地址' && item.attrValue
    )[0]
    if (!obj) {
      flag.value = false
    } else {
      onTrial.value = obj.attrValue
    }
  }
  watch(
    () => props.dataList,
    (val) => {
      if (val) {
        let obj = val.infoList.filter((item) => item.attrType === '试用地址' && item.attrValue)[0]
        if (!obj) {
          flag.value = false
        } else {
          onTrial.value = obj.attrValue
        }
      }
    }
  )
</script>
<style lang="less" scoped>
  .algorithm-on-trial {
    padding: 80px 300px 60px;
    .main {
      margin-top: 40px;
      iframe {
        border: none;
      }
      .iframe-box {
        width: 100%;
        height: 440px;
        margin-top: 10px;
        display: flex;
        justify-content: center;
      }
    }
  }
</style>