daikins/.svn/pristine/27/27f4d9e77608ba7b80e2d9441dc760ea3425e1e8.svn-base

<!-- 情报列表 -->
<script setup lang="ts">
import AppBlock from '@/components/AppBlock.vue'
import Layout from './components/Layout.vue'
import { getImg } from './images'
import AppAlert from '@/components/AppAlert.vue'
import AppNewsBox from '@/components/AppNewsBox.vue'
import AppPagination from '@/components/AppPagination.vue'
import { Navs, useData } from './ListPageData'
import { NEmpty } from 'naive-ui'
import { message } from '@/utils/message'

const { push } = useRouter()
const route = useRoute()
const { state, list } = useData()

// cate 分类 1-外部环境 2-竞争对手 3-供方动向 4-大金集团 5-中国据点 6-调达本部
const Type1 = [
  { key: '1', name: '外部环境', route: 'IntelligenceOutside', icon: getImg('icon-1.svg') },
  { key: '2', name: '竞争对手', route: 'IntelligenceOutside', icon: getImg('icon-2.svg') },
  { key: '3', name: '供方动向', route: 'IntelligenceOutside', icon: getImg('icon-3.svg') },
]
const Type2 = [
  { key: '4', name: '大金集团', route: 'IntelligenceWithin', icon: getImg('icon-4.svg') },
  { key: '5', name: '中国据点', route: 'IntelligenceWithin', icon: getImg('icon-5.svg') },
  { key: '6', name: '调达本部', route: 'IntelligenceWithin', icon: getImg('icon-6.svg') },
]

const firstNew = ref<any>({})
const restNews = ref<any[]>([])

watchEffect(() => {
  // const [first, ...rest] = unref(list)
  // firstNew.value = first
  restNews.value = unref(list)
})
// const toDetail =()=>{
//   console.log(route.name,firstNew.id)
//   push(`${route.path.replace('/Home','')}/${firstNew.id}`)
//   // push({name:route.name,params:{id:firstNew.id}})
// }
const toDetail2 =(item: { id: any })=>{
  console.log(route,route.path,item.id)
  // push(`${route.path}/${item.id}`)
  if(item.isSelect===1){
    push(`${route.path.replace('/Home','')}/${item.id}`)
  }
  else{
    message.error("没有访问权限")
  }
 
  
}

</script>

<template>
  <Layout>
    <AppBlock class="flex w-full h-full">
      <section class="px44px flex navs">
        <div class="flex-1" v-for="item in Navs" :key="item.key">
          <div :class="`navs-item max-w-4em active`">
            {{ item.name }}
          </div>
        </div>
      </section>
      <section class="px44px flex mt24px">
        <div class="flex-1 flex">
          <div
            class="cursor-pointer mr36px w100px h100px rd-20px flex-shrink flex flex-col justify-center items-center text-#fff"
            v-for="item in Type1"
            :key="item.name"
            :style="{ backgroundColor: item.key == state.cate ? '#63bfb2' : '#c2c2c2' }"
            @click="state.cate = item.key"
          >
            <img :src="item.icon" />
            <span class="mt14px">{{ item.name }}</span>
          </div>
        </div>
        <div class="flex-1 flex">
          <div
            class="cursor-pointer mr36px w100px h100px rd-20px flex-shrink flex flex-col justify-center items-center text-#fff"
            v-for="item in Type2"
            :key="item.name"
            :style="{ backgroundColor: item.key == state.cate ? '#63bfb2' : '#c2c2c2' }"
            @click="state.cate = item.key"
          >
            <img :src="item.icon" />
            <span class="mt14px">{{ item.name }}</span>
          </div>
        </div>
      </section>
      <section class="px44px mt44px">
        <!-- <AppAlert v-if="firstNew?.title" @click="push(`${route.path.replace('/Home','')}/${firstNew.id}`)">{{ firstNew.title }}</AppAlert> -->
        <div class="mt12px news-wrap max-h-467px mb32px overflow-y-auto">
          <div class="news-item"  v-for="item in restNews" :key="item.id" @click="toDetail2(item)">
            <AppNewsBox class="!lh-2em"  :isRead="item.isRead" :top="item.isTop" :labelText="item.tag" labelColor="#2cba06" :size="item.tag==='New'?'h20px':'h30px'" :text="item.title" :date="item.publishTime" />
          </div>
        </div>
        <div class="text-center mt32px" v-if="state.total">
          <AppPagination v-model:current="state.pageNum" v-model:total="state.total" />
        </div>
        <NEmpty v-else description="暂无数据">
          <template #icon></template>
        </NEmpty>
      </section>
    </AppBlock>
  </Layout>
</template>

<style scoped lang="less">
.navs {
  font-size: 28px;
  color: #999;
  font-weight: 600;
  margin-top: 10px;
  border-bottom: 1px solid #eef3fb;
  .navs-item {
    cursor: pointer;
    padding: 14px 18px;
    margin-right: 22px;
    transition: all 0.1s;

    border-bottom: 4px solid transparent;

    &.active {
      color: #003ab5;
      border-color: #003ab5;
    }
  }
}

.items-content {
  margin-top: 12px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.7;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 68px;

  .news-item {
    cursor: pointer;
    padding: 16px 0;
    border-bottom: 1px solid #eef3fb;
  }
}
</style>