业务组件功能完善

2022-06-21 11:42:06 +08:00 · 2022-06-21 11:42:06 +08:00 · 8bc5bff98d
parent 7bc3912bb7
commit 8bc5bff98d
6 changed files with 72 additions and 66 deletions
--- a/front/src/views/detailsAll/components/Business/BusinessApplicationCase.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessApplicationCase.vue
@ -215,6 +215,7 @@
          flex-direction: column;
          align-items: center;
          margin-right: 1rem;
+          text-align: center;
          .tab-top {
            min-width: 1.2rem;
            font-size: 0.24rem;
--- a/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue
@ -145,6 +145,7 @@
          display: flex;
          flex-direction: column;
          align-items: center;
+          text-align: center;
          margin-right: 1rem;
          .tab-top {
            min-width: 1.2rem;
--- a/front/src/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue
@ -146,6 +146,7 @@
          flex-direction: column;
          align-items: center;
          margin-right: 1rem;
+          text-align: center;
          .tab-top {
            min-width: 1.2rem;
            font-size: 0.24rem;
--- a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
@ -121,7 +121,7 @@
        // 排序
        // eslint-disable-next-line vue/no-mutating-props
        props.dataList.infoList.sort((a, b) => {
-          console.log('排序==============>', a, b)
+          // console.log('排序==============>', a, b)
          return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
        })
        val.infoList.map((item) => {
--- a/front/src/views/detailsAll/components/Business/BusinessPresentation.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessPresentation.vue
@ -3,15 +3,17 @@
 * @Date: 2022-06-08 15:25:33
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-14 11:30:52
- * @Description: 组件展示  视频播放
+ * @Description: 应用展示  视频播放
 -->
 <template>
-  <div class="business-presentation" v-if="flag">
+  <div class="application-presentation" v-if="flag">
    <detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
-    <div class="main">
-      <img :src="leftImg" />
+    <div
+      class="main"
+      :style="`${img}background-position:center;background-size:cover;`"
+    >
+      <!-- <a-image :src="img"></a-image> -->
      <div class="play" @click="showModal"></div>
-      <img :src="rightImg" />
    </div>
    <a-modal
      v-model:visible="visible"
@ -31,8 +33,6 @@
 <script setup>
  import { ref, reactive, defineProps, watch } from 'vue'
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
-  const leftImg = require('@/assets/detailsAll/business/business_previous.png')
-  const rightImg = require('@/assets/detailsAll/business/business_next.png')
  const visible = ref(false)
  const options = reactive({
    width: '7.00rem', //播放器宽度
@ -67,6 +67,7 @@
    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(
@ -76,7 +77,13 @@
    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;'
+      }
    }
  }
  watch(
@ -90,29 +97,31 @@
        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;'
+          }
        }
      }
    }
  )
 </script>
 <style lang="less" scoped>
-  .business-presentation {
-    padding: 0.8rem 3rem 0.8rem;
-    background: url('~@/assets/detailsAll/business/business_module_bg.png')
-      no-repeat;
-    background-size: 100% 100%;
+  .application-presentation {
+    padding: 0.8rem 3rem 0;
    .main {
      height: 3.4rem;
      border-radius: 0.1rem;
-      background: url('~@/assets/detailsAll/business/business_element_content.png')
-        no-repeat center;
-      background-size: 50% 100%;
+      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;
-      position: relative;
      .play {
        width: 0.96rem;
        height: 0.96rem;
@ -120,18 +129,6 @@
        background-size: 100%;
        cursor: pointer;
      }
-      img {
-        position: absolute;
-        top: 1.3rem;
-        left: 0.4rem;
-        cursor: pointer;
-      }
-      img:last-of-type {
-        position: absolute;
-        top: 1.3rem;
-        left: unset;
-        right: 0.4rem;
-      }
    }
  }
 </style>
--- a/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
@ -12,22 +12,17 @@
        <div class="left">
          <div class="content-left-title">
            <span>{{ item.title }}</span>
-            <span>{{ item.titleSon }}</span>
          </div>
          <div class="content-left-content">
            <p>
              <span>{{ item.link.name }}</span>
-              <span>{{ item.link.value }}</span>
-            </p>
-            <p>
-              <span>{{ item.postMethod.name }}</span>
-              <span>{{ item.postMethod.value }}</span>
+              <span>{{ item.linkValue }}</span>
            </p>
          </div>
        </div>
        <div class="right">
          <div @click="technical()">技术文档</div>
-          <div>新手指引</div>
+          <div @click="technicalNew()">新手指引</div>
        </div>
      </div>
      <div class="content-right">
@ -51,20 +46,20 @@
          </div>
        </div>
        <div class="content-right-right">
-          <div class="content-right-title">{{ item.contact }}</div>
+          <div class="content-right-title">{{ item.contact2 }}</div>
          <div class="content-right-content">
            <p>
-              <span>{{ item.people.name }}</span>
+              <span>{{ item.people2.name }}</span>
              <a-tooltip>
-                <template #title>{{ item.people.value }}</template>
-                <span>{{ item.people.value }}</span>
+                <template #title>{{ item.people2.value }}</template>
+                <span>{{ item.people2.value }}</span>
              </a-tooltip>
            </p>
            <p>
-              <span>{{ item.phone.name }}</span>
+              <span>{{ item.phone2.name }}</span>
              <a-tooltip>
-                <template #title>{{ item.phone.value }}</template>
-                <span>{{ item.phone.value }}</span>
+                <template #title>{{ item.phone2.value }}</template>
+                <span>{{ item.phone2.value }}</span>
              </a-tooltip>
            </p>
          </div>
@ -83,26 +78,27 @@
    englishTitle: 'USAGE',
    content: [
      {
-        title: '技术对接',
-        titleSon: '调用接口',
+        title: '组件地址',
        link: {
          name: '接口地址：',
-          value: 'http://localhost:9999/#/details?id=1532278256619307010',
        },
-        postMethod: {
-          name: '请求方式：',
-          value: 'POST',
-        },
-        contact: '联系厂商：',
-        facilitator: { name: '服务商：', value: '科大讯飞' },
-        people: { name: '联系人：', value: '李四' },
+        linkValue: '',
+        contact: '归属部门',
+        facilitator: { name: '归属部门：', value: '讯飞科大' },
+        people: { name: '部门联系人：', value: '李四' },
        phone: {
-          name: '联系电话：',
+          name: '联系人电话：',
          value: '12345678901',
        },
+        contact2: '服务商',
+        facilitator2: { name: '服务商：', value: '科大讯飞' },
+        people2: { name: '服务商联系人：', value: '李四' },
+        phone2: {
+          name: '联系人电话：',
+          value: '1234567890',
+        },
      },
    ],
-    link: '',
  })
  //数据初始化
  const props = defineProps({
@ -118,20 +114,17 @@
    } else {
      // eslint-disable-next-line vue/no-setup-props-destructure
      dataFrom.value.content[0].link.value = props.dataList.apiUrl
-      // eslint-disable-next-line vue/no-setup-props-destructure
-      dataFrom.value.content[0].postMethod.value = props.dataList.apiMethodType
+      dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
      console.log('dataList', props.dataList)
      props.dataList.infoList.map((item) => {
-        if (item.attrType === '使用方式') {
-          dataFrom.value.content[0].titleSon = item.attrValue
+        if (item.attrType === '组件地址') {
+          dataFrom.value.content[0].linkValue = item.attrValue || '--'
        } else if (item.attrType === '服务商') {
          dataFrom.value.content[0].facilitator.value = item.attrValue || '--'
        } else if (item.attrType === '服务商联系人') {
          dataFrom.value.content[0].people.value = item.attrValue || '--'
        } else if (item.attrType === '服务商联系电话') {
          dataFrom.value.content[0].phone.value = item.attrValue || '--'
-        } else if (item.attrType === '技术文档') {
-          dataFrom.value.link = item.attrValue || '--'
        }
      })
    }
@ -145,11 +138,11 @@
          flag.value = false
        } else {
          dataFrom.value.content[0].link.value = val.apiUrl
-          dataFrom.value.content[0].postMethod.value = val.apiMethodType
+          dataFrom.value.content[0].facilitator.value = val.deptContacts
          console.log('dataList', val)
          val.infoList.map((item) => {
-            if (item.attrType === '使用方式') {
-              dataFrom.value.content[0].titleSon = item.attrValue
+            if (item.attrType === '组件地址') {
+              dataFrom.value.content[0].linkValue = item.attrValue || '--'
            } else if (item.attrType === '服务商') {
              dataFrom.value.content[0].facilitator.value =
                item.attrValue || '--'
@ -157,8 +150,6 @@
              dataFrom.value.content[0].people.value = item.attrValue || '--'
            } else if (item.attrType === '服务商联系电话') {
              dataFrom.value.content[0].phone.value = item.attrValue || '--'
-            } else if (item.attrType === '技术文档') {
-              dataFrom.value.link = item.attrValue || '--'
            }
          })
        }
@ -180,6 +171,21 @@
    //     btoa(encodeURI(dataFrom.value.link))
    // )
  }
+  function technicalNew() {
+    // 拼接路径
+    // const type = pinyin(props.dataList.type, {
+    //   pattern: 'initial',
+    // }).replace(/\s*/g, '')
+    // // 打开文档
+    // const id = props.dataList.id
+    // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
+    console.log('dataFrom.value.link', dataFrom.value.link)
+    window.open(
+      window.SITE_CONFIG.previewUrl +
+        'hisense_office/onlinePreview?url=' +
+        btoa(encodeURI(dataFrom.value.link))
+    )
+  }
 </script>

 <style lang="less" scoped>