hi-ucs/front/src/views/home/details.vue

<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-14 09:43:49
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-20 18:44:52
 * @Description: 告诉大家这是什么
-->
<template>
  <div>
    <div id="apply-container">
      <home-header :showView="showView"></home-header>
      <detail-back></detail-back>
      <details-view v-if="showView === 'details-view'"></details-view>
      <algorithm-details
        v-else-if="showView === 'algorithm-details'"
      ></algorithm-details>
      <application-details
        v-else-if="showView === 'application-details'"
      ></application-details>
      <developer-components
        v-else-if="showView === 'development-of-component'"
      ></developer-components>
      <business-details
        v-else-if="showView === 'business-details'"
      ></business-details>
      <layer-service v-else-if="showView === 'layer-service'"></layer-service>
      <home-footer></home-footer>
    </div>
  </div>
</template>

<script>
  import HomeHeader from '@/views/home/components/header'
  import { defineComponent, reactive, ref } from 'vue'
  import DetailsView from './components/DetailsView.vue'
  import HomeFooter from '@/views/newHome/components/Footer'
  import AlgorithmDetails from '@/views/detailsAll/AlgorithmDetails'
  import ApplicationDetails from '@/views/detailsAll/ApplicationDetails'
  import DeveloperComponents from '@/views/detailsAll/DeveloperComponents'
  import BusinessDetails from '@/views/detailsAll/BusinessDetails'
  import LayerService from '@/views/detailsAll/LayerService'
  import detailBack from '@/views/home/detailBack.vue'
  import { selectOne } from '@/api/home'
  import { useRouter } from 'vue-router'
  export default defineComponent({
    name: '',
    props: {},
    components: {
      HomeHeader,
      DetailsView,
      HomeFooter,
      AlgorithmDetails,
      ApplicationDetails,
      DeveloperComponents,
      BusinessDetails,
      LayerService,
      detailBack
    },
    setup() {
      const formState = reactive({
        applyRequire: '',
        applyDept: '',
        applyName: '',
        applyPurpose: '',
        applySystem: '',
      })

      const options = ref([
        {
          value: '政法委',
          label: '政法委',
        },
        {
          value: '公安局',
          label: '公安局',
        },
        {
          value: '卫健委',
          label: '卫健委',
        },
        {
          value: '城市管理局',
          label: '城市管理局',
        },
        {
          value: '生态环境局',
          label: '生态环境局',
        },
        {
          value: '交通运输局',
          label: '交通运输局',
        },
      ])
      const router = useRouter()
      const id = router.currentRoute.value.query.id
      const obj = JSON.parse(window.sessionStorage.getItem('preview'))
      let showView = ref('')
      const init = () => {
        if (id) {
          selectOne(id).then((res) => {
            if (res.data.data.type == '组件服务') {
              let detection = res.data.data.infoList.filter(
                (item) => item.attrType === '组件类型'
              )[0]
              if (detection) {
                res.data.data.infoList.map((item) => {
                  if (item.attrType == '组件类型') {
                    switch (item.attrValue) {
                      case '智能算法':
                        showView.value = 'algorithm-details'
                        break
                      case '开发组件':
                        showView.value = 'development-of-component'
                        break
                      case '业务组件':
                        showView.value = 'business-details'
                        break
                      case '图层服务':
                        showView.value = 'layer-service'
                        break
                      default:
                        break
                    }
                  }
                })
              } else {
                showView.value = 'algorithm-details'
              }
            } else {
              showView.value = 'application-details'
            }
          })
        } else if (obj) {
          console.log('obj============>', obj)
          if (obj.type == '组件服务') {
            let detection = obj.infoList.filter(
              (item) => item.attrType === '组件类型'
            )[0]
            if (detection) {
              obj.infoList.map((item) => {
                if (item.attrType == '组件类型') {
                  switch (item.attrValue) {
                    case '智能算法':
                      showView.value = 'algorithm-details'
                      break
                    case '开发组件':
                      showView.value = 'development-of-component'
                      break
                    case '业务组件':
                      showView.value = 'business-details'
                      break
                    case '图层服务':
                      showView.value = 'layer-service'
                      break
                    default:
                      break
                  }
                }
              })
            } else {
              showView.value = 'algorithm-details'
            }
          } else {
            showView.value = 'application-details'
          }
        }
      }
      init()
      
      return {
        formState,
        options,
        showView,
        init,
        router,
        id,
      }
    },
  })
</script>

<style scoped lang="less"></style>
<style>
  html,
  body {
    height: unset;
  }
  #apply-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
</style>