800 lines
28 KiB
Plaintext
800 lines
28 KiB
Plaintext
<script setup lang="ts">
|
||
import VChart from 'vue-echarts'
|
||
import { useChart1, useChart22, useChart21, useChart3, useChart23 } from './HomeData'
|
||
import AppHeadUserInfo from '@/components/AppHeadUserInfo.vue'
|
||
import { NSelect } from 'naive-ui'
|
||
import News from './components/New.vue'
|
||
import { homePageMarket, homePageRate, report, getHomeList ,amountList} from '@/api/daikin/base'
|
||
import { useUserStore } from "@/stores/modules/user";
|
||
const store = useUserStore();
|
||
|
||
const isUpPwds =ref(false)
|
||
const userCode =ref(false)
|
||
watchEffect(()=>{
|
||
userCode.value = ['admin', 'cd_dandang', 'tech_service'].includes(store.user.roleCode)
|
||
isUpPwds.value = store.user.isUpPwd ===2?true:false
|
||
})
|
||
const activeCard5NavKey = ref('DIS')
|
||
const Card5Navs = [
|
||
{ key: 'DIS', name: 'DIS' },
|
||
{ key: 'DSZ', name: 'DSZ' },
|
||
{ key: 'DISH', name: 'DISH' },
|
||
]
|
||
const ailists = ref()
|
||
const culists = ref()
|
||
const itemLists = ref()
|
||
const timeA = ref()
|
||
const timeB = ref()
|
||
|
||
const disList = ref([{}, {}, {}, {}]);
|
||
const dszList = ref([{}, {}, {}, {}]);
|
||
const dishList = ref([{}, {}, {}, {}]);
|
||
const month_1 = ref();
|
||
const month_2 = ref();
|
||
let now = (new Date()).getMonth() + 13;
|
||
month_2.value = (now - 2) % 12;
|
||
month_1.value = (now - 1) % 12;
|
||
const dataDIS = ref()
|
||
const dataDSZ = ref()
|
||
const dataDISH = ref()
|
||
const addDSZ1 = ref()
|
||
const addDIS1 = ref()
|
||
const addDISH1 = ref()
|
||
const addDSZ2 = ref()
|
||
const addDIS2 = ref()
|
||
const addDISH2 = ref()
|
||
const addDSZ3 = ref()
|
||
const addDIS3 = ref()
|
||
const addDISH3 = ref()
|
||
onMounted(async () => {
|
||
const { data: { ailist, culist, lastUTime } } = await homePageMarket() //市况
|
||
const { data: { itemList, lastUTime: _lastUTime } } = await homePageRate() //汇率
|
||
const { data: _disList } = await getHomeList({number: "DIS"}) //汇率
|
||
const { data: _dszList } = await getHomeList({number: "DSZ"}) //汇率
|
||
const { data: _dishList } = await getHomeList({number: "DISH"}) //汇率
|
||
const { data:fazhu} = await amountList()
|
||
fazhu.forEach((i: { number: string; amount: any }) => {
|
||
if(i.number=='DIS'){
|
||
dataDIS.value = i.amount
|
||
}
|
||
if(i.number=='DSZ'){
|
||
dataDSZ.value = i.amount
|
||
}
|
||
if(i.number=='DISH'){
|
||
dataDISH.value = i.amount
|
||
}
|
||
});
|
||
ailists.value = ailist
|
||
culists.value = culist
|
||
itemLists.value = itemList
|
||
timeA.value = lastUTime
|
||
timeB.value = _lastUTime
|
||
|
||
disList.value = _disList
|
||
dszList.value = _dszList
|
||
dishList.value = _dishList
|
||
|
||
addDIS1.value = _disList.reduce((previousValue: any, currentValue: { budget: any }) => {
|
||
const sum =parseFloat (currentValue.budget) +parseFloat(previousValue)
|
||
return sum>0 ? sum.toFixed(2):0
|
||
}, 0)
|
||
addDSZ1.value = _dszList.reduce((previousValue: any, currentValue: { budget: any }) => {
|
||
const sum = parseFloat(currentValue.budget) +parseFloat(previousValue)
|
||
return sum>0 ? sum.toFixed(2):0
|
||
}, 0)
|
||
addDISH1.value = _dishList.reduce((previousValue: any, currentValue: { budget: any }) => {
|
||
const sum = parseFloat(currentValue.budget) +parseFloat(previousValue)
|
||
return sum>0 ? sum.toFixed(2):0
|
||
}, 0)
|
||
addDIS2.value = _disList.reduce((previousValue: any, currentValue: { monthOne: any }) => {
|
||
const sum = parseFloat(currentValue.monthOne) +parseFloat(previousValue)
|
||
return sum>0 ? sum.toFixed(2):0
|
||
}, 0)
|
||
addDSZ2.value = _dszList.reduce((previousValue: any, currentValue: { monthOne: any }) => {
|
||
const sum = parseFloat(currentValue.monthOne) +parseFloat(previousValue)
|
||
return sum>0 ? sum.toFixed(2):0
|
||
}, 0)
|
||
addDISH2.value = _dishList.reduce((previousValue: any, currentValue: { monthOne: any }) => {
|
||
const sum = parseFloat(currentValue.monthOne) +parseFloat(previousValue)
|
||
return sum>0 ? sum.toFixed(2):0
|
||
}, 0)
|
||
addDIS3.value = _disList.reduce((previousValue: any, currentValue: { monthTwo: any }) => {
|
||
const sum = parseFloat(currentValue.monthTwo) +parseFloat(previousValue)
|
||
return sum>0 ? sum.toFixed(2):0
|
||
}, 0)
|
||
addDSZ3.value = _dszList.reduce((previousValue: any, currentValue: { monthTwo: any }) => {
|
||
const sum = parseFloat(currentValue.monthTwo) +parseFloat(previousValue)
|
||
return sum>0 ? sum.toFixed(2):0
|
||
}, 0)
|
||
addDISH3.value = _dishList.reduce((previousValue: any, currentValue: { monthTwo: any }) => {
|
||
const sum = parseFloat(currentValue.monthTwo) +parseFloat(previousValue)
|
||
return sum>0 ? sum.toFixed(2):0
|
||
}, 0)
|
||
if(isUpPwds.value){
|
||
ElMessageBox.alert('为了您的帐号安全,首次登录必须更改初始密码', '重要提醒',
|
||
{
|
||
confirmButtonText: 'OK',
|
||
showClose:false,
|
||
showCancelButton:false,
|
||
}).then(()=>{
|
||
push({ name: 'modifys' })
|
||
})
|
||
}
|
||
})
|
||
const { push } = useRouter()
|
||
const route = useRoute()
|
||
const timeNow = useDateFormat(useNow(), 'YYYY-MM-DD')
|
||
|
||
const { chartRef: chartRef1, option: chartOption1 } = useChart1()
|
||
const { chartRef: chartRef2, option: chartOption2,state } = useChart21()
|
||
const { chartRef: chartRef22, option: chartOption22 } = useChart22()
|
||
const { chartRef: chartRef23, option: chartOption23 } = useChart23()
|
||
const { chartRef: chartRef3, option: chartOption3 } = useChart3()
|
||
const displayDiffValue = (diffValue: number) => {
|
||
if (diffValue > 0) {
|
||
return `+${diffValue} %`;
|
||
} else if (diffValue < 0) {
|
||
return `-${Math.abs(diffValue)} %`;
|
||
} else {
|
||
return `${diffValue} %`;
|
||
}
|
||
}
|
||
|
||
async function setModule(codes: any, names: any) {
|
||
const moduleCode = codes
|
||
console.log(codes, names)
|
||
push({ name: names })
|
||
const { code } = await report({ moduleCode })
|
||
|
||
}
|
||
const selectData = ref("原材料")
|
||
const option = [{
|
||
label: '全部数据',
|
||
value: 'quanbu'
|
||
},{
|
||
label: '原材料',
|
||
value: 'yuancailiao'
|
||
},
|
||
{
|
||
label: '加工品',
|
||
value: 'jiagongping'
|
||
},
|
||
{
|
||
label: '机能部品',
|
||
value: 'jineng'
|
||
},]
|
||
|
||
|
||
const thisSelect = (e) => {
|
||
console.log(e)
|
||
state.title = e
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div class="top flex items-center text-20px">
|
||
<div class="flex-1 font-800 text-30px"></div>
|
||
<AppHeadUserInfo />
|
||
</div>
|
||
<div class="page-wrapper h-full flex-1 flex flex-col flex-wrap">
|
||
<div class="font-800 text-30px mt39px">FY23年度调达本部方针：创新实干，勇毅前行，以综合实力挑战变革，提升存在感</div>
|
||
<div class="mt30px flex-1 flex flex-wrap justify-between">
|
||
<News></News>
|
||
|
||
|
||
<div class="card cursor-pointer">
|
||
<div class="card_title" @click="setModule('App_Market', 'Market')">市况汇率 每日更新</div>
|
||
<div class="card_nav card_nav2 !top--3px !right--1px">
|
||
<div class=" !text-14px w260px top--4px text-right leading-18px">
|
||
出处：市况-SMM/LME<br />
|
||
汇率-外汇管理局
|
||
</div>
|
||
|
||
</div>
|
||
<!-- <div class="card_sub-title">责任者：调达中心 Device变革T/原材料变革T</div> -->
|
||
|
||
<div class="card_content">
|
||
<!-- <VChart :option="chartOption1" autoresize /> -->
|
||
<div class="flex pl15px pr10px pt15px text-#898F9F">
|
||
<div class="">
|
||
<span class="icoT ">市况</span>
|
||
<span class="ml15px text-12px">更新时间：{{ timeA }}</span>
|
||
|
||
<div class="h150px overflow-auto">
|
||
|
||
<table class="history w-full text-center mt18px text-16px border-spacing-0 w219px">
|
||
<thead
|
||
style="background-color: #417BEF;color: #fff;height: 42px;width: 220px; border: 1px solid #417BEF;">
|
||
<tr class="h41px">
|
||
<th>铜</th>
|
||
<th>最新</th>
|
||
<th>前日差</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody v-if="culists">
|
||
<tr class="h45px" v-for="(it, index) in culists" :key="index"
|
||
:class="index % 2 !== 0 ? 'bg-#f9f9f9' : ''">
|
||
<td class=" text-12px">{{ it.channel }}</td>
|
||
<td class="text-12px">{{ it.negAmount }}</td>
|
||
<td class=" text-12px" :class="it.diffValue < 0 ? 'text-#63BF8D' : 'text-red'">
|
||
{{ displayDiffValue(it.diffValue) }}</td>
|
||
</tr>
|
||
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="h150px overflow-auto">
|
||
<table class="history w-full text-center mt15px text-16px border-spacing-0 overflow-auto w219px">
|
||
<thead
|
||
style="background-color: #417BEF;color: #fff;height: 42px;width: 220px; border: 1px solid #417BEF;">
|
||
<tr class="h41px">
|
||
<th>铝</th>
|
||
<th>最新</th>
|
||
<th>前日差</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody v-if="ailists">
|
||
<tr class="h45px" v-for="(it, index) in ailists" :key="index"
|
||
:class="index % 2 !== 0 ? 'bg-#f9f9f9' : ''">
|
||
<td class=" text-12px">{{ it.channel }}</td>
|
||
<td class="text-12px">{{ it.negAmount }}</td>
|
||
<td class=" text-12px" :class="it.diffValue < 0 ? 'text-#63BF8D' : 'text-red'">
|
||
{{ displayDiffValue(it.diffValue) }}</td>
|
||
</tr>
|
||
|
||
</tbody>
|
||
</table>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<div class="ml10px">
|
||
<span class="icoT">汇率</span>
|
||
<span class="ml15px text-12px">更新时间：{{ timeB }}</span>
|
||
<div class="h282px pt18px">
|
||
<table class="history w-full text-center text-16px border-spacing-0 w219px ">
|
||
<thead
|
||
style="background-color: #417BEF;color: #fff;height: 42px;width: 220px; border: 1px solid #417BEF;">
|
||
<tr class="h41px">
|
||
<th class="w75px ">币种</th>
|
||
<th>最新</th>
|
||
<th class="w65px">前日差</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody v-if="itemLists" class="h238px overflow-auto absolute">
|
||
<tr class="h60px !text-12px" v-for="(it, index) in itemLists" :key="index"
|
||
:class="index % 2 !== 0 ? 'bg-#f9f9f9' : ''">
|
||
<td class=" w75px text-center">{{ it.currencyNameFrom }}-{{ it.currencyNameTo }}</td>
|
||
<td class=" w85px text-center">{{ it.negAmount }}</td>
|
||
<td class=" w65px text-center" :class="it.diffValue < 0 ? 'text-#63BF8D' : 'text-red'">
|
||
{{ displayDiffValue(it.diffValue) }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card_title cursor-pointer" @click="setModule('App_data_platform', 'CD')">数据平台</div>
|
||
<!-- <div class="card_sub-title">责任者：调达中心 企画变革T</div> -->
|
||
<div class="card_nav card_nav1">
|
||
<div class="card_nav_item" :class="activeCard5NavKey === i.key && 'active'" v-for="i in Card5Navs" :key="i.name"
|
||
@click="() => (activeCard5NavKey = i.key)">
|
||
{{ i.name }}
|
||
</div>
|
||
</div>
|
||
<div class="table-container">
|
||
<el-button v-if="userCode" type="primary" class="button abs-top" @click="push({ name: 'dataPlatform' })">数据管理</el-button>
|
||
<table class="data-table" border v-if="activeCard5NavKey === 'DIS'">
|
||
<colgroup>
|
||
<col width="20%"/>
|
||
<col width="20%"/>
|
||
<col width="20%"/>
|
||
<col width="20%"/>
|
||
<col width="20%"/>
|
||
</colgroup>
|
||
<tr class="header">
|
||
<th rowspan="2" colspan="2">拠点</th>
|
||
<td colspan="3">
|
||
<div class="tab-header">
|
||
<div class="tb-title">DIS</div>
|
||
<div class="tb-subtitle">发注金额：{{dataDIS}}百万元</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="header">
|
||
<td>年初予算</td>
|
||
<!-- <td>{{month_2}}月</td> -->
|
||
<td>改订</td>
|
||
<td>{{month_1}}月</td>
|
||
</tr>
|
||
<tr>
|
||
<th colspan="2">合计</th>
|
||
<td>{{addDIS1}}%</td>
|
||
<td>{{addDIS2}}%</td>
|
||
<td>{{addDIS3}}%</td>
|
||
</tr>
|
||
<tr>
|
||
<th rowspan="2">C/D</th>
|
||
<th>交涉</th>
|
||
<td :rowspan="disList[0].budget ==disList[1].budget?'2':''">{{disList[0].budget}}%</td>
|
||
<td :rowspan="disList[0].monthOne ==disList[1].monthOne?'2':''">{{disList[0].monthOne}}%</td>
|
||
<td :rowspan="disList[0].budget ==disList[1].budget?'2':''">{{disList[0].monthTwo}}%</td>
|
||
</tr>
|
||
<tr>
|
||
<th>THEME</th>
|
||
<td v-if="disList[1].budget !=disList[0].budget">{{disList[1].budget}}%</td>
|
||
<td v-if="disList[1].monthOne !=disList[0].monthOne">{{disList[1].monthOne}}%</td>
|
||
<td v-if="disList[1].monthTwo !=disList[0].monthTwo">{{disList[1].monthTwo}}%</td>
|
||
</tr>
|
||
<tr>
|
||
<th colspan="2">市况</th>
|
||
<td>{{disList[2].budget}}%</td>
|
||
<td>{{disList[2].monthOne}}%</td>
|
||
<td>{{disList[2].monthTwo}}%</td>
|
||
</tr>
|
||
<tr>
|
||
<th colspan="2">為替レート</th>
|
||
<td>{{disList[3].budget}}%</td>
|
||
<td>{{disList[3].monthOne}}%</td>
|
||
<td>{{disList[3].monthTwo}}%</td>
|
||
</tr>
|
||
</table>
|
||
<table class="data-table" border v-if="activeCard5NavKey === 'DSZ'">
|
||
<colgroup>
|
||
<col width="20%"/>
|
||
<col width="20%"/>
|
||
<col width="20%"/>
|
||
<col width="20%"/>
|
||
<col width="20%"/>
|
||
</colgroup>
|
||
<tr class="header">
|
||
<th rowspan="2" colspan="2">抛点</th>
|
||
<td colspan="3">
|
||
<div class="tab-header">
|
||
<div class="tb-title">DSZ</div>
|
||
<div class="tb-subtitle">发注金额：{{dataDSZ}}百万元</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="header">
|
||
<td>年初予算</td>
|
||
<!-- <td>{{month_2}}月</td> -->
|
||
<td>改订</td>
|
||
<td>{{month_1}}月</td>
|
||
</tr>
|
||
<tr>
|
||
<th colspan="2">合计</th>
|
||
<td>{{addDSZ1}}%</td>
|
||
<td>{{addDSZ2}}%</td>
|
||
<td>{{addDSZ3}}%</td>
|
||
</tr>
|
||
<tr>
|
||
<th rowspan="2">C/D</th>
|
||
<th>交涉</th>
|
||
<td :rowspan="dszList[0].budget ==dszList[1].budget?'2':''">{{dszList[0].budget}}%</td>
|
||
<td :rowspan="dszList[0].monthOne ==dszList[1].monthOne?'2':''">{{dszList[0].monthOne}}%</td>
|
||
<td :rowspan="dszList[0].monthTwo ==dszList[1].monthTwo?'2':''">{{dszList[0].monthTwo}}%</td>
|
||
</tr>
|
||
<tr>
|
||
<th>THEME</th>
|
||
<td v-if="dszList[1].budget !=dszList[0].budget">{{dszList[1].budget}}%</td>
|
||
<td v-if="dszList[1].monthOne !=dszList[0].monthOne">{{dszList[1].monthOne}}%</td>
|
||
<td v-if="dszList[1].monthTwo !=dszList[0].monthTwo">{{dszList[1].monthTwo}}%</td>
|
||
</tr>
|
||
<tr>
|
||
<th colspan="2">市况</th>
|
||
<td>{{dszList[2].budget}}%</td>
|
||
<td>{{dszList[2].monthOne}}%</td>
|
||
<td>{{dszList[2].monthTwo}}%</td>
|
||
</tr>
|
||
<tr>
|
||
<th colspan="2">為替レート</th>
|
||
<td>{{dszList[3].budget}}%</td>
|
||
<td>{{dszList[3].monthOne}}%</td>
|
||
<td>{{dszList[3].monthTwo}}%</td>
|
||
</tr>
|
||
</table>
|
||
<table class="data-table" border v-if="activeCard5NavKey === 'DISH'">
|
||
<colgroup>
|
||
<col width="20%"/>
|
||
<col width="20%"/>
|
||
<col width="20%"/>
|
||
<col width="20%"/>
|
||
<col width="20%"/>
|
||
</colgroup>
|
||
<tr class="header">
|
||
<th rowspan="2" colspan="2">抛点</th>
|
||
<td colspan="3">
|
||
<div class="tab-header">
|
||
<div class="tb-title">DISH</div>
|
||
<div class="tb-subtitle">发注金额：{{dataDISH}}百万元</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="header">
|
||
<td>年初予算</td>
|
||
<!-- <td>{{month_2}}月</td> -->
|
||
<td>改订</td>
|
||
<td>{{month_1}}月</td>
|
||
</tr>
|
||
<tr>
|
||
<th colspan="2">合计</th>
|
||
<td>{{addDISH1}}%</td>
|
||
<td>{{addDISH2}}%</td>
|
||
<td>{{addDISH3}}%</td>
|
||
</tr>
|
||
<tr>
|
||
<th rowspan="2">C/D</th>
|
||
<th>交涉</th>
|
||
<td :rowspan="dishList[0].budget ==dishList[1].budget?'2':''">{{dishList[0].budget}}%</td>
|
||
<td :rowspan="dishList[0].monthOne ==dishList[1].monthOne?'2':''">{{dishList[0].monthOne}}%</td>
|
||
<td :rowspan="dishList[0].monthTwo ==dishList[1].monthTwo?'2':''">{{dishList[0].monthTwo}}%</td>
|
||
</tr>
|
||
<tr>
|
||
<th>THEME</th>
|
||
<td v-if="dishList[1].budget !=dishList[0].budget">{{dishList[1].budget}}%</td>
|
||
<td v-if="dishList[1].monthOne !=dishList[0].monthOne">{{dishList[1].monthOne}}%</td>
|
||
<td v-if="dishList[1].monthTwo !=dishList[0].monthTwo">{{dishList[1].monthTwo}}%</td>
|
||
</tr>
|
||
<tr>
|
||
<th colspan="2">市况</th>
|
||
<td>{{dishList[2].budget}}%</td>
|
||
<td>{{dishList[2].monthOne}}%</td>
|
||
<td>{{dishList[2].monthTwo}}%</td>
|
||
</tr>
|
||
<tr>
|
||
<th colspan="2">為替レート</th>
|
||
<td>{{dishList[3].budget}}%</td>
|
||
<td>{{dishList[3].monthOne}}%</td>
|
||
<td>{{dishList[3].monthTwo}}%</td>
|
||
</tr>
|
||
</table>
|
||
<!-- <img src="@/assets/images/xiaogouzi1.jpg" class="w-full h-full cover" v-if="activeCard5NavKey === 'DSZ'"/>
|
||
<img src="@/assets/images/xiaogouzi2.jpg" class="w-full h-full cover" v-if="activeCard5NavKey === 'DISH'"/> -->
|
||
<!-- <img src="@/assets/images/xiaogouzi3.jpg" class="w-full h-full cover" v-if="activeCard5NavKey === 'DIS'"/> -->
|
||
</div>
|
||
<!-- <div class="card_content">
|
||
<VChart ref="chartRef3" :option="chartOption3" autoresize />
|
||
</div> -->
|
||
</div>
|
||
<div class="card cursor-pointer" @click="setModule('App_BCP', 'BCP')">
|
||
<div class="card_title">调达BCP管理</div>
|
||
<div class="card_sub-title">责任者：调达中心 加工品变革T</div>
|
||
<div class="card_content">
|
||
<img src="@/assets/images/img-11.png" class="w-full h-full object-cover" />
|
||
</div>
|
||
</div>
|
||
<div class="card cursor-pointer relative">
|
||
<!-- <img src="@/assets/images/img-42.png" class="absolute top-10px right-0" /> -->
|
||
<div class="card_title" @click="setModule('App_CSR', 'CSR')">SCM碳中和活动</div>
|
||
<div class="card_sub-title" @click="setModule('App_CSR', 'CSR')">责任者：调达研究院 调达机能研究T</div>
|
||
<div class="card_content px20px" @click="setModule('App_CSR', 'CSR')">
|
||
<img src="../../assets/images/scmtzh@2x.png" class="w-full h-96% cover"/>
|
||
<!-- <div class="flex text-center">
|
||
<div class="bg-#F4F8FF text-#000 h30px w-full pt5px font-bold">F25碳减排目标 <el-icon class="!text-#004DE1">
|
||
<CaretTop />
|
||
</el-icon>30%</div>
|
||
<div class="bg-#F4F8FF text-#000 h30px w-full pt5px font-bold">F23碳减排目标 <el-icon class="!text-#004DE1">
|
||
<CaretTop />
|
||
</el-icon>15%</div>
|
||
</div>
|
||
<div class="flex text-center">
|
||
<div class=" text-#677BB2 h30px w-full pt5px font-500">供方碳排放推移表</div>
|
||
<div class=" text-#677BB2 h30px w-full pt5px font-500 flex"><span>重点供方碳排放情况</span>
|
||
<n-select v-model:value="selectData" :options="option" class="w80px !text-12px h20px mt--4px" :show-checkmark="false" size="tiny"
|
||
@update:value="thisSelect" />
|
||
</div>
|
||
</div>
|
||
<div class="flex w-full h-full">
|
||
<div class="w150px h-full">
|
||
<VChart :option="chartOption1" />
|
||
</div>
|
||
<div class="w280px h275px overflow-y-auto">
|
||
<VChart :option="chartOption2" />
|
||
|
||
</div>
|
||
</div> -->
|
||
|
||
<!-- <div class="mt25px text-#142142"> -->
|
||
<!-- <img src="@/assets/images/tiad@2x.png" class="w100% h96%" /> -->
|
||
<!-- <div class="text-#002fa7 text-18px">大金中国调达本部紧扣大金集团2050愿景中CO2“零”排放目标展开调达碳中和活动</div>
|
||
<AppNewsBox class="mt10px" text="脱碳素供应链管理（原材料排放，部品加工·部品运输过程中的排放）
|
||
空调解决方案（部品碳足迹管理，贩促活动，案例情报共享）" date="2023-05-22" /> -->
|
||
<!-- </div> -->
|
||
<!-- <div class="mt25px text-#142142">
|
||
<div class="text-#002fa7 text-18px">人材育成</div>
|
||
<AppNewsBox class="mt10px" text="FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来" date="2023-05-22" />
|
||
</div>
|
||
<div class="mt25px text-#142142">
|
||
<div class="text-#002fa7 text-18px">工作模式变革</div>
|
||
<AppNewsBox class="mt10px" text="FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来" date="2023-05-22" />
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="card topics">
|
||
<div class="card_title">重点Theme取组</div>
|
||
<div class="card_content p20px pt10px">
|
||
<div class="w-full h-full flex flex-wrap content-between justify-between text-18px font-bold">
|
||
<div class="item !h-188px cursor-pointer" @click="setModule('App_Quality', 'Quality')">
|
||
<div class="item_title">品质</div>
|
||
<div class="item_sub-title">责任者：调达中心 加工品变革T</div>
|
||
<!-- <img src="@/assets/images/img-45.svg" class="item_img pb13px pr20px" /> -->
|
||
<img src="@/assets/images/img-41.png" class="item_img b !bottom--20px" />
|
||
</div>
|
||
<div class="item !h-188px cursor-pointer" @click="setModule('App_Lab', 'Diffspace')">
|
||
<div class="item_title">AI差别化LAB</div>
|
||
<div class="item_sub-title">责任者：调达研究院</div>
|
||
<div class="item_sub-title">差别化研究T</div>
|
||
<img src="@/assets/images/img-43.png" class="item_img" />
|
||
</div>
|
||
<div class="item !w-full flex flex-col cursor-pointer" @click="push({ name: 'StrategicPlanning' })">
|
||
<div class="item_title">战略企划</div>
|
||
<div class="item_sub-title">责任者：调达本部 管理G</div>
|
||
<!-- <img src="./images/home-1.svg" /> -->
|
||
<div class="flex mt20px items-center justify-center">
|
||
<div class="bg-#0038BE w210px px15px py7px rounded-30px">
|
||
<img src="@/assets/images/biaoq2@2x.png" class="w25px h21px">
|
||
重点Theme管理
|
||
</div>
|
||
<span class="text-#000 font-thin underline-text mx23px">调达研究院</span>
|
||
<span class="text-#000 font-thin underline-text">调达中心</span>
|
||
<!-- <VChart :option="chartOption2" autoresize /> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="less">
|
||
.tab-header {
|
||
display: flex;
|
||
.tb-title {
|
||
margin: 0 auto;
|
||
}
|
||
.tb-subtitle {
|
||
margin-right: 8px;
|
||
font-size: 0.75em;
|
||
}
|
||
}
|
||
.table-container {
|
||
padding: 0 36px;
|
||
padding-top: 40px;
|
||
position: relative;
|
||
}
|
||
.data-table {
|
||
width: 100%;
|
||
color: #808696;
|
||
border-collapse: collapse;
|
||
line-height: 2.3rem;
|
||
text-align: center;
|
||
border-color: #e0e0e0;
|
||
background: white;
|
||
}
|
||
.table-container .abs-top {
|
||
position: absolute;
|
||
left: 36px;
|
||
top: 4px;
|
||
}
|
||
.data-table tr:nth-child(2n + 1) {
|
||
background: #f9f9f9;
|
||
}
|
||
.data-table th {
|
||
background: #f4f5ff;
|
||
color: #142142;
|
||
}
|
||
.data-table tr.header, .data-table tr.header th{
|
||
background: #417BEF;
|
||
color: white;
|
||
}
|
||
::-webkit-scrollbar {
|
||
width: 1px;
|
||
}
|
||
::v-deep .n-base-select .n-base-select-option {
|
||
font-size: 12px; /* 设置字体大小 */
|
||
}
|
||
.naive-select .n-select-dropdown {
|
||
font-size: 12px; /* 设置字体大小 */
|
||
}
|
||
.underline-text {
|
||
border-bottom: 1px solid black;
|
||
padding-bottom: 2px;
|
||
}
|
||
|
||
.icoT {
|
||
padding: 5px;
|
||
color: #fff;
|
||
background-color: #002AAE;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.top {
|
||
position: absolute;
|
||
right: 30px;
|
||
top: -70px;
|
||
}
|
||
|
||
.page-wrapper {
|
||
.card {
|
||
// width: 480px;
|
||
// height: 428px;
|
||
width: 480px;
|
||
height: 395px;
|
||
border-radius: 18px;
|
||
overflow: hidden;
|
||
|
||
background-color: #fff;
|
||
// border: 1px solid #e7ebf5;
|
||
box-shadow: 1px 2px 12px rgba(14, 86, 221, 0.32);
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: ' ';
|
||
background-image: url('@/assets/images/bg-card.svg');
|
||
pointer-events: none;
|
||
display: block;
|
||
width: 100%;
|
||
height: 127px;
|
||
background-size: cover;
|
||
position: absolute;
|
||
left: 0;
|
||
top: -1px;
|
||
}
|
||
|
||
.card_title {
|
||
flex-shrink: 0;
|
||
font-size: 28px;
|
||
color: #142142;
|
||
padding: 20px;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.card_sub-title {
|
||
color: rgba(128, 134, 150, 0.8);
|
||
font-size: 16px;
|
||
padding: 0 20px;
|
||
padding-bottom: 0;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.card_nav1 {
|
||
background-image: url('@/assets/images/bg-card-nav.svg');
|
||
}
|
||
|
||
.card_nav2 {
|
||
background-image: url('@/assets/images/youj@2x.png');
|
||
}
|
||
|
||
.card_nav {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 276px;
|
||
height: 66px;
|
||
|
||
background-position: top right;
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
|
||
font-size: 20px;
|
||
color: #fff;
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
padding-left: 38px;
|
||
padding-right: 22px;
|
||
padding-bottom: 20px;
|
||
|
||
.card_nav_item {
|
||
width: 80px;
|
||
height: 36px;
|
||
text-align: center;
|
||
padding-top: 8px;
|
||
cursor: pointer;
|
||
|
||
&.active {
|
||
color: #032fa0;
|
||
background-image: url('@/assets/images/bg-card-nav-item.svg');
|
||
background-position: bottom;
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card_content {
|
||
flex: 1;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
.topics {
|
||
.item {
|
||
border-radius: 8px;
|
||
width: 210px;
|
||
height: 155px;
|
||
box-shadow: inset 1.4px 1.4px 0px 0px rgba(255, 255, 255, 0.004);
|
||
overflow: hidden;
|
||
|
||
background-image: url('@/assets/images/bg-card4.svg');
|
||
background-position: -2px -2px;
|
||
background-repeat: no-repeat;
|
||
background-size: 215px 165px;
|
||
position: relative;
|
||
|
||
.item_title {
|
||
padding-left: 16px;
|
||
padding-top: 22px;
|
||
color: #002fa7;
|
||
position: relative;
|
||
// z-index: 9;
|
||
}
|
||
|
||
.item_sub-title {
|
||
color: rgba(128, 134, 150, 0.8);
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
padding: 0 16px;
|
||
padding-bottom: 0;
|
||
margin-top: 10px;
|
||
z-index: 9;
|
||
}
|
||
|
||
.item_img {
|
||
position: absolute;
|
||
bottom: -10px;
|
||
right: 0;
|
||
// z-index: 5;
|
||
transition: transform 0.3s;
|
||
|
||
&:hover {
|
||
transform: scale(1.2);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.news {
|
||
.card_content {
|
||
padding: 20px;
|
||
padding-top: 0;
|
||
}
|
||
|
||
.news_card {
|
||
// width: 442px;
|
||
height: 180px;
|
||
padding: 16px;
|
||
font-size: 14px;
|
||
|
||
|
||
background-repeat: no-repeat;
|
||
|
||
background-size: 100% 100%;
|
||
|
||
|
||
|
||
position: relative;
|
||
}
|
||
}
|
||
}</style>
|