465 lines
18 KiB
Plaintext
465 lines
18 KiB
Plaintext
<!-- C/D数据 -->
|
|
<script setup lang="ts">
|
|
import {hisYearData,curYearData , useChart3,defineCompont} from "./CdData";
|
|
import { treeList } from '@/api/daikin/base'
|
|
import HomeHead from '@/views/home/components/HomeHead.vue'
|
|
// import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
|
|
import CDSide from './CDSide.vue'
|
|
import { NForm, NFormItem, useMessage, NSelect, NButton } from 'naive-ui'
|
|
import develop from '../develop.vue'
|
|
import type { FormInst } from 'naive-ui'
|
|
|
|
const { push } = useRouter()
|
|
const message = useMessage()
|
|
const radioss = ref(2020)
|
|
|
|
const { chartRef: chartRef1, option: chartOption1 } = curYearData()
|
|
const { chartRef: chartRef2, option: chartOption2 ,state} = hisYearData()
|
|
const { chartRef: chart1, option: chartOp1 } = useChart3()
|
|
const {clickData, toYearData,hisData} = defineCompont()
|
|
|
|
|
|
const treeData = ref<any>()
|
|
async function getData() {
|
|
const { data} = await treeList()
|
|
const dataList = transformData(data);
|
|
console.log(dataList)
|
|
treeData.value = dataList
|
|
|
|
}
|
|
|
|
|
|
function transformData(data, parentKey = "") {
|
|
let keyIndex = 1;
|
|
|
|
return data.map(item => {
|
|
const key = parentKey ? `${parentKey}-${keyIndex}` : `${item.id}`;
|
|
keyIndex++;
|
|
|
|
const transformedItem = {
|
|
label: item.name,
|
|
key: key,
|
|
level: parentKey ? parentKey.split('-').length + 1 : 1,
|
|
id: item.id,
|
|
};
|
|
|
|
const treeList = transformTreeList(item.treeList, key);
|
|
if (treeList.length > 0) {
|
|
transformedItem.treeList = treeList;
|
|
}
|
|
|
|
return transformedItem;
|
|
});
|
|
}
|
|
|
|
function transformTreeList(treeList, parentKey) {
|
|
if (!treeList || treeList.length === 0) {
|
|
return [];
|
|
}
|
|
|
|
let keyIndex = 1;
|
|
|
|
return treeList.map(item => {
|
|
const key = `${parentKey.split('-').length + 1}-${keyIndex}`;
|
|
keyIndex++;
|
|
|
|
const transformedItem = {
|
|
label: item.name,
|
|
key: key,
|
|
level: parentKey.split('-').length + 1,
|
|
id: item.id,
|
|
};
|
|
|
|
const childTreeList = transformTreeList(item.treeList, key);
|
|
if (childTreeList.length > 0) {
|
|
transformedItem.treeList = childTreeList;
|
|
}
|
|
|
|
return transformedItem;
|
|
});
|
|
}
|
|
|
|
|
|
let formValue = ref({
|
|
name: '',
|
|
age: '',
|
|
phone: '',
|
|
phone1: ''
|
|
})
|
|
const formRef = ref<FormInst | null>(null);
|
|
const handleValidateClick = (e: MouseEvent) => {
|
|
e.preventDefault()
|
|
formRef.value?.validate((errors) => {
|
|
if (!errors) {
|
|
// message.success('Valid')
|
|
} else {
|
|
console.log(errors)
|
|
// message.error('Invalid')
|
|
}
|
|
})
|
|
}
|
|
let options = [
|
|
{
|
|
label: "据点总体",
|
|
value: 'song0'
|
|
},
|
|
{
|
|
label: 'DIS',
|
|
value: 'song1'
|
|
},
|
|
]
|
|
|
|
const checkedValueRef = ref<string | null>(null)
|
|
const handleChange = (e: Event) => {
|
|
state.cateId= 1
|
|
state.yearTime=e
|
|
console.log(e)
|
|
}
|
|
|
|
|
|
// 获取子组件传过来的值
|
|
const handleChild = (id: any) => {
|
|
// console.log(data)
|
|
clickData.id = id
|
|
|
|
}
|
|
getData()
|
|
</script>
|
|
|
|
<template>
|
|
<!-- <develop/> -->
|
|
<HomeHead class="top">
|
|
|
|
</HomeHead>
|
|
<div class="h-full relative flex flex-col">
|
|
|
|
<div class="font-600 text-36px mt29px ">C/D数据</div>
|
|
<div class="q-wrapper flex-1 h957.9px mt30px text-#142142 flex flex-col gap-22px bg-#fff">
|
|
<div class="data1 flex gap-26px">
|
|
<div class="cd_plan flex-1 pl32px pr33px pt25px pb10px">
|
|
<div class="title ml19px font-bold text-24px">FY23 中国域各据点 C/D进度</div>
|
|
<div class="text-20px mt21px mb17px font-600">发注金额：</div>
|
|
<div class="">
|
|
<table style="border: 1px solid #EDEDED;"
|
|
class="w-full text-center h295px border-spacing-0 text-16px fazhu">
|
|
<thead style="background-color: #417BEF;color: #fff;">
|
|
<tr class="h41px">
|
|
<th rowspan="2" colspan="2">据点</th>
|
|
<th colspan="2">据点</th>
|
|
<th colspan="2">苏州</th>
|
|
<th colspan="2">惠州</th>
|
|
</tr>
|
|
<tr class="h41px">
|
|
<th>FY23</th>
|
|
<th>FY22</th>
|
|
<th>FY23</th>
|
|
<th>FY22</th>
|
|
<th>FY23</th>
|
|
<th>FY22</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="2" class="text-#142142">合计</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
</tr>
|
|
<tr>
|
|
<td rowspan="2" class="text-#142142">C/D</td>
|
|
<td class="text-#142142">交涉</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-#142142">THEME</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" class="text-#142142">市况</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" class="text-#142142">汇率</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
<td>55.40%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="flex h55px ">
|
|
<n-form ref="formRef" inline :label-width="55" :model="formValue" class="!items-center">
|
|
<n-form-item path="name">
|
|
<n-select style="width: 148px;" v-model:value="formValue.name" placeholder="请选择"
|
|
:options="options" />
|
|
</n-form-item>
|
|
<n-form-item path="age">
|
|
<n-select style="width: 148px;" v-model:value="formValue.age" placeholder="请选择"
|
|
:options="options" />
|
|
</n-form-item>
|
|
<n-form-item path="phone">
|
|
<n-select style="width: 148px;" v-model:value="formValue.phone" placeholder="请选择"
|
|
:options="options" />
|
|
</n-form-item>
|
|
<n-form-item path="phone">
|
|
<n-select style="width: 148px;" v-model:value="formValue.phone1" placeholder="请选择"
|
|
:options="options" />
|
|
</n-form-item>
|
|
<n-form-item>
|
|
<n-button style="background-color: #417BEF;color: #fff;" attr-type="button"
|
|
@click="handleValidateClick">
|
|
检索
|
|
</n-button>
|
|
</n-form-item>
|
|
</n-form>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="amount flex-1 pl32px pr33px pt27px pb0px">
|
|
<div class="flex gap-49px">
|
|
<div class="flex-1">
|
|
<div class="title ml19px font-bold text-24px">发注金额推移</div>
|
|
<div class="w330px h199px mt22px">
|
|
<img src="./images/fazhuje.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="title ml19px font-bold text-24px">CD堆积</div>
|
|
<div class="w330px h199px mt22px">
|
|
<img src="./images/cddj.png" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1">
|
|
<div class="title ml19px font-bold text-24px">发注金额推移</div>
|
|
<div class="w100% h199px mt22px">
|
|
<VChart ref="chart1" :option="chartOp1" autoresize />
|
|
</div>
|
|
<div class="title ml19px font-bold text-24px !absolute top-0 left-50%">CD堆积</div>
|
|
</div>
|
|
</div>
|
|
<div class="h152px mt20px" style="border: 1px solid #D3D3D3;">
|
|
<div class="mt13px ml17px text-16px font-bold">年度重点</div>
|
|
<div class="h112px ml17px mt10px mr15px text-14px lh-22px overflow-y-auto">
|
|
年度重点Theme年度重点Theme年度重点Theme年度重点Theme年度重点Theme年度重点The
|
|
年度重点Theme年度重点Theme年度重点Theme年度重点Theme年度重点Theme年度重点The
|
|
年度重点Theme年度重点Theme年度重点Theme年度重点Theme年度重点Theme年度重点The
|
|
年度重点Theme年度重点Theme年度重点Theme年度重点Theme年度重点Theme年度重点The
|
|
年度重点Theme年度重点Theme年度重点Theme年度重点Theme年度重点Theme年度重</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="data2 flex flex-col">
|
|
<div class="flex min-h280px">
|
|
<div class="w148px">
|
|
<div class="title ml19px font-bold text-24px">按业绩</div>
|
|
<div class="max-h-236px overflow-y-auto mt100px">
|
|
<CDSide :treeData="treeData" @clickChliden="handleChild"></CDSide>
|
|
</div>
|
|
</div>
|
|
<div class="ml24px w485px">
|
|
<div class="ml19px font-bold text-24px">当年度</div>
|
|
<table class="dangnian w485px text-center mt23px text-18px border-spacing-0 overflow-auto min-h-100px">
|
|
<thead style="background-color: #417BEF;color: #fff;height: 42px;">
|
|
<tr class="h41px">
|
|
<th colspan="4">FY2023</th>
|
|
</tr>
|
|
<tr class="h35px">
|
|
<th>供方</th>
|
|
<th>发注金额</th>
|
|
<th>交涉</th>
|
|
<th>Theme</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="i in toYearData" key="i" class="!h35px text-16px">
|
|
<td>{{ i.supplierName }}</td>
|
|
<td>{{ i.publishAmount }}</td>
|
|
<td>{{ i.negAmount }}</td>
|
|
<td>{{ i.themeRate }}%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="ml89px flex-1">
|
|
<div class="title ml19px font-bold text-24px">历史数据</div>
|
|
|
|
|
|
<div class="flex">
|
|
|
|
|
|
<table class="history w-full text-center mt23px text-18px border-spacing-0 overflow-auto">
|
|
<thead style="background-color: #417BEF;color: #fff;height: 42px;">
|
|
<tr class="h41px">
|
|
<th colspan="3">FY2023</th>
|
|
</tr>
|
|
<tr class="h41px">
|
|
<th>发注</th>
|
|
<th>交涉</th>
|
|
<th>Theme</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="i in hisData['2023']" key="i" class="!h35px text-16px">
|
|
<td>{{ i.publishAmount }}</td>
|
|
<td>{{ i.negAmount }}</td>
|
|
<td>{{ i.themeRate }}%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="history w-full text-center mt23px text-18px border-spacing-0 overflow-auto">
|
|
<thead style="background-color: #417BEF;color: #fff;height: 42px;">
|
|
<tr class="h41px">
|
|
<th colspan="3">FY2022</th>
|
|
</tr>
|
|
<tr class="h41px">
|
|
<th>发注</th>
|
|
<th>交涉</th>
|
|
<th>Theme</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="i in hisData['2022']" key="i" class="!h35px text-16px">
|
|
<td>{{ i.publishAmount }}</td>
|
|
<td>{{ i.negAmount }}</td>
|
|
<td>{{ i.themeRate }}%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-101px mt29px">
|
|
<div class="w634px h243px">
|
|
<VChart ref="chartRef1" :option="chartOption1" autoresize />
|
|
</div>
|
|
<div class="w634px h243px ">
|
|
|
|
<VChart ref="chartRef2" :option="chartOption2" autoresize/>
|
|
<div class=" w634px pl30px h30px">
|
|
<el-radio-group v-model="radioss" @change="handleChange">
|
|
<el-radio :label="2020">FY2020</el-radio>
|
|
<el-radio :label="2021"> FY2021</el-radio>
|
|
<el-radio :label="2022">FY2022</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute flex flex-col w-full h-full z-200 top-0 left-0 text-center bg-red justify-center items-center" style="background-color: rgba(255,255,255,0.8);">
|
|
<img src="@/assets/images/chah.png"/>
|
|
<br>
|
|
<div class="text-#5683DB text-36px">【做成中,敬请期待】</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.top {
|
|
position: absolute;
|
|
right: 30px;
|
|
top: -92px;
|
|
}
|
|
|
|
.fazhu {
|
|
td {
|
|
border: 1px solid #E0E0E0;
|
|
color: #808696;
|
|
}
|
|
}
|
|
|
|
.dangnian {
|
|
td {
|
|
border: 1px solid #E0E0E0;
|
|
color: #808696;
|
|
}
|
|
}
|
|
|
|
.history {
|
|
td {
|
|
border: 1px solid #E0E0E0;
|
|
color: #808696;
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
position: absolute;
|
|
background: #fff;
|
|
border: 1px solid #333;
|
|
}
|
|
|
|
.menu li {
|
|
list-style: none;
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.5s;
|
|
}
|
|
|
|
.fade-enter,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 1px;
|
|
}
|
|
|
|
.q-wrapper {
|
|
overflow-y: scroll;
|
|
border-radius: 20px;
|
|
|
|
.cd_plan,
|
|
.amount,
|
|
.data2 {
|
|
border: 1px solid #E7EBF5;
|
|
border-radius: 18px;
|
|
box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
|
|
}
|
|
|
|
.data2 {
|
|
// height: 600.9px;
|
|
padding: 28px;
|
|
}
|
|
|
|
.title {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
width: 8px;
|
|
height: 30px;
|
|
background-color: #003AB5;
|
|
position: absolute;
|
|
left: -15px;
|
|
top: -3px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|