daikins/src/views/home/intelligence/Overview.vue

149 lines
3.8 KiB
Vue
Executable File

<!-- 外部情报 -->
<script setup lang="tsx">
import AppBlock from '@/components/AppBlock.vue'
import Layout from './components/Layout.vue'
import OverviewBlock from './OverviewBlock.vue'
import { getImg } from './images'
import { useData } from './OverviewData'
import { getBannerList, report } from '@/api/daikin/base'
const { data1, data2, data3, data4, data5, data6, data7 } = useData()
// console.log(data.value)
const swipeActiveIndex = ref(0)
function handleIndex(x: any) {
swipeActiveIndex.value = x.realIndex
}
async function getBanner() {
// 类型 1-社外 2-社内
const { data } = await getBannerList({ type: 1 })
const { data: da } = await getBannerList({ type: 2 })
if (data && data != 'null' && data.length > 0) {
imageList1.value = data
}
if (da && da != 'null' && da.length > 0) {
imageList2.value = da
}
}
getBanner()
report({ moduleCode: 'App_Article' })
const imageList1 = ref([
{ title: '三菱电机FY22年度方针说明会', bannerImg: getImg('swipe-1.svg'), id: 0 },
{ title: '23年度供应商大会热烈筹备中', bannerImg: getImg('swipe-2.svg'), id: 0 }
])
const imageList2 = ref([
{ title: '三菱电机FY22年度方针说明会', bannerImg: getImg('swipe-1.svg'), id: 0 },
{ title: '23年度供应商大会热烈筹备中', bannerImg: getImg('swipe-2.svg'), id: 0 }
])
const swipeImages = [
{ title: '三菱电机FY22年度方针说明会', bannerImg: getImg('swipe-1.svg') },
{ title: '23年度供应商大会热烈筹备中', bannerImg: getImg('swipe-2.svg') }
]
const items1 = computed(() => [
{
key: '1',
name: '外部环境',
color: '#63BFB2',
title: '全年原材料供应状况紧张',
icon: getImg('icon-1.svg'),
news: unref(data1), //.splice(0, 3),
list: unref(data7)[1] ?? []
},
{
key: '2',
name: '竞争对手',
color: '#F57E6E',
title: '三菱召开年度方针说明会',
icon: getImg('icon-2.svg'),
news: unref(data2), //.splice(0, 3),
list: unref(data7)[2] ?? []
},
{
key: '3',
name: '供方动向',
color: '#537DEB',
title: '全年原材料供应状况紧张',
icon: getImg('icon-3.svg'),
news: unref(data3), //.splice(0, 3),
list: unref(data7)[3] ?? []
}
])
const items2 = computed(() => [
{
key: '4',
name: '大金集团',
color: '#5DCCFA',
title: '23年度集团方针正式发行',
icon: getImg('icon-4.svg'),
news: unref(data4), //.splice(0, 3),
list: unref(data7)[4] ?? []
},
{
key: '5',
name: '中国据点',
color: '#E8A743',
title: '惠州工厂稼动正式开始',
icon: getImg('icon-6.svg'),
news: unref(data5), //.splice(0, 3),
list: unref(data7)[5] ?? []
},
{
key: '6',
name: '调达本部',
color: '#926CE1',
title: '23年度供应商大会热烈筹备中',
icon: getImg('icon-5.svg'),
news: unref(data6), //.splice(0, 3),
list: unref(data7)[6] ?? []
}
])
</script>
<template>
<Layout>
<div class="flex w-full h-full gap-30px">
<AppBlock class="flex-1 box">
<div class="box-title">社外</div>
<OverviewBlock
route="IntelligenceOutside"
:swipImgs="imageList1"
:items="items1"
routets="outside"
/>
</AppBlock>
<AppBlock class="flex-1 box">
<div class="box-title">社内</div>
<OverviewBlock
route="IntelligenceWithin"
routets="within"
:swipImgs="imageList2"
:items="items2"
/>
</AppBlock>
</div>
</Layout>
</template>
<style scoped lang="less">
.box {
padding: 23px 45px 0 45px;
.box-title {
font-size: 28px;
font-weight: 600;
position: relative;
padding-left: 24px;
&::before {
content: ' ';
display: block;
width: 8px;
height: 30px;
background-color: #003ab5;
position: absolute;
left: 0;
}
}
}
</style>