wwl
/
daikins
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

市况汇率

main
wenlong 2024-08-06 00:28:06 +08:00
parent a3d6077599
commit b4f9d35de0
13 changed files with 4168 additions and 689 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/daikin/base.ts
View File

@ -1457,7 +1457,11 @@ export async function fetchExchangeInfo(params?: any) {
return http.get(`/marketPre/getExchangeInfo`, { params })
}
// 获取分时数据
export async function fetchTimeFuturecenter(params?: any) {
return http.get(`/marketPre/getTimeFuturecenter/cu0013`, { params })
// 获取分时数据 --沪铜主连
export async function fetchTimeFuturecenterCu(params?: any) {
return http.get(`/marketPre/getTimeFuturecenter/cu0000`, { params })
}
// 获取分时数据 --沪铜主连
export async function fetchTimeFuturecenterAl(params?: any) {
return http.get(`/marketPre/getTimeFuturecenter/al0000`, { params })
}

2
src/router/index.ts
View File

@ -260,7 +260,7 @@ const router = createRouter({
{
path: '',
name: 'Market',
component: () => import('@/views/home/market/Market.vue')
component: () => import('@/views/home/market/Market_new.vue')
},
{
path: 'MarketDataModify',

4
src/views/company/index.vue
View File

@ -3,7 +3,7 @@
import HomeHead from '@/views/home/components/HomeHead.vue'
// import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
import { useDate } from '@/views/home/hooks/useDate'
import { useMessage }from 'naive-ui'
import { useMessage } from 'naive-ui'
import { cateFileList } from '@/api/daikin/base'
@ -67,7 +67,7 @@ const goFile = (row: any) => {
if (!isSelect || isSelect === 2) {
message.info('没有访问权限!')
return
}·
}
if (!filePath) {
message.info('暂无文件')
}

158
src/views/home/Home.vue
View File

@ -4,10 +4,18 @@ import { useChart1, useChart22, useChart21, useChart3, useChart23 } from './Home
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'
import { useMessage } from 'naive-ui'
import {
homePageMarket,
homePageRate,
report,
getHomeList,
amountList,
fetchHomeSmmExInfo,
fetchExchangeInfo
} from '@/api/daikin/base'
import { useUserStore } from '@/stores/modules/user'
import { groupBy } from 'lodash-es'
const store = useUserStore()
const message = useMessage()
@ -59,6 +67,8 @@ const addDISH3 = ref()
const timeObj = ref<any>({})
onMounted(async () => {
try {
getHomeSmmExInfo()
// getHomeExInfo()
const {
data: { ailist, culist, lastUTime },
data
@ -201,12 +211,12 @@ const { chartRef: chartRef3, option: chartOption3 } = useChart3()
const displayDiffValue = (diffValue: number) => {
// return diffValue + '%'
if (diffValue > 0) {
return `+${diffValue}%`
return `+${diffValue}`
} else if (diffValue < 0) {
return `-${Math.abs(diffValue)}%`
return `-${Math.abs(diffValue)}`
} else {
// return `${formatNumber(diffValue)} %`
return `${diffValue}%`
return `${diffValue}`
}
}
@ -251,6 +261,20 @@ function formatNumber(num = 0) {
const formattedDecimalPart = decimalPart.padEnd(2, '0')
return `${wholePart}.${formattedDecimalPart}`
}
const homeSmmExInfo = ref<any>({})
async function getHomeSmmExInfo() {
const { data } = await fetchHomeSmmExInfo()
console.log("🚀 ~ file: Home.vue:268 ~ data:", groupBy(data,'instrumentName'))
homeSmmExInfo.value = groupBy(data,'instrumentName')
}
const homeExchangeInfo = ref<any>([])
async function getHomeExInfo() {
const { data } = await fetchExchangeInfo()
homeExchangeInfo.value = data
console.log('🚀 ~ file: Home.vue:252 ~ }):', data)
}
</script>
<template>
@ -281,9 +305,9 @@ function formatNumber(num = 0) {
</div>
<!-- <div class="card_sub-title">责任者：调达中心 Device变革T/原材料变革T</div> -->
<div class="card_content">
<div class="card_content px-30px overflow-y-scroll">
<!-- <VChart :option="chartOption1" autoresize /> -->
<div class="flex pl15px pr10px pt15px text-#898F9F-1 text-#152242">
<!-- <div class="flex pl15px pr10px pt15px text-#898F9F-1 text-#152242">
<div class="">
<span class="icoT">市况</span>
<span class="ml10px text-14px">更新时间：{{ timeA }}</span>
@ -399,7 +423,122 @@ function formatNumber(num = 0) {
</table>
</div>
</div>
</div> -->
<!-- <div class="flex flex-col">
<div class="flex justify-end items-center text-#ACACAC mb6px">
<div class="text-#fff bg-#002FA7 rounded-5px px18px py6px">市况</div>
<div class="min-w-180px text-end">更新时间：{{ timeA }}</div>
</div>
<div class="flex justify-end items-center text-#ACACAC mb6px">
<div class="text-#fff bg-#99aff6 rounded-5px px18px py6px">汇率</div>
<div class="min-w-180px text-end">更新时间：{{ timeB }}</div>
</div>
</div> -->
<div class="flex justify-between items-center">
<div class="text-#fff bg-#002FA7 rounded-5px px18px py6px">市况</div>
<div class="flex flex-col text-#ACACAC flex-1 justify-end text-end text-13px">
<div class="text- flex justify-end">更新时间：<p class="">{{ timeA }} (SMM)</p class="min-w-200px"></div>
<div class="text- my4px flex justify-end">{{ timeA }} (LEM)</div>
</div>
</div>
<table
v-if="Object.keys(homeSmmExInfo)?.length"
class="history w-full text-center text-16px border-spacing-0"
>
<thead
style="
background-color: #417bef;
color: #fff;
height: 30px;
width: 220px;
border: 1px solid #417bef;
"
>
<tr class="h30px">
<th colspan="2" class="w-22%">原材料</th>
<th class="w-32%">最新</th>
<th>前日差</th>
<th>前日比</th>
</tr>
</thead>
<!-- <tbody>
<tr v-for="it in homeSmmExInfo" :key="it.instrumentId" class="h32px bg-#fff">
<td class="text-14px text-#000">{{ it.instrumentName }}</td>
<td class="text-14px text-#000">{{ it.negAmount }}</td>
<td
class="text-14px text-#000"
:class="it.diffValue < 0 ? 'text-#63BF8D' : 'text-red'"
>
{{ it.diffValue }}%
</td>
<td
class="text-14px text-#000"
:class="it.diffRate < 0 ? 'text-#63BF8D' : 'text-red'"
>
{{ it.diffRate }}%
</td>
</tr>
</tbody> -->
<tbody v-for="(item, index) in Object.keys(homeSmmExInfo)" :key="item" >
<tr class="h30px bg-#fff">
<td rowspan="2" class="text-14px text-#000 bg-#EDF8FF">{{ item }}</td>
<td class="text-14px text-#000">{{ homeSmmExInfo[item]?.[0]?.channel }}</td>
<td class="text-14px text-#000">{{ homeSmmExInfo[item]?.[0]?.negAmount }}</td>
<td class="text-14px text-#000" :class="homeSmmExInfo[item]?.[0]?.diffPrice < 0 ? 'text-#63BF8D' : 'text-red'">{{ displayDiffValue(homeSmmExInfo[item]?.[0]?.diffPrice) }}</td>
<td class="text-14px text-#000" :class="homeSmmExInfo[item]?.[0]?.diffValue < 0 ? 'text-#63BF8D' : 'text-red'">{{ displayDiffValue(homeSmmExInfo[item]?.[0]?.diffValue) }}%</td>
</tr>
<tr class="h30px bg-#fff">
<!-- <td rowspan="2" class="text-14px text-#000 bg-#EDF8FF">{{ item }}</td> -->
<td class="text-14px text-#000">{{ homeSmmExInfo[item]?.[1]?.channel }}</td>
<td class="text-14px text-#000">{{ homeSmmExInfo[item]?.[1]?.negAmount }}</td>
<td class="text-14px text-#000" :class="homeSmmExInfo[item]?.[1]?.diffPrice < 0 ? 'text-#63BF8D' : 'text-red'">{{ displayDiffValue(homeSmmExInfo[item]?.[0]?.diffPrice) }}</td>
<td class="text-14px text-#000" :class="homeSmmExInfo[item]?.[1]?.diffValue < 0 ? 'text-#63BF8D' : 'text-red'">{{ displayDiffValue(homeSmmExInfo[item]?.[0]?.diffValue) }}%</td>
</tr>
</tbody>
</table>
<div class="flex justify-between items-center my4px">
<div class="text-#fff bg-#002FA7 rounded-5px px18px py6px">汇率</div>
<div class="flex flex-col text-#ACACAC flex-1 justify-end text-end text-13px">
<div class="text- flex justify-end">更新时间：<p class="">{{ timeB }}</p class="min-w-200px"></div>
</div>
</div>
<table class="mb10px history w-full text-center text-16px border-spacing-0">
<thead
style="
background-color: #417bef;
color: #fff;
height: 30px;
width: 220px;
border: 1px solid #417bef;
"
>
<tr class="h30px">
<th colspan="0" class="w-22%">币种</th>
<th class="w-32%">最新</th>
<th>前日差</th>
<th>前日比</th>
</tr>
</thead>
<tbody v-if="itemLists" class="">
<tr
class="h30px !text-14px text-center"
v-for="(it, index) in itemLists"
:key="index"
:class="index % 2 !== 0 ? 'bg-#f9f9f9' : ''"
>
<td class="text-center text-#000">
{{ it.currencyNameFrom }}-{{ it.currencyNameTo }}
</td>
<td class="text-center text-#000">{{ it.negAmount }}</td>
<td class="text-center" :class="it.diffPrice < 0 ? 'text-#63BF8D' : 'text-red'">
{{ it.diffPrice > 0 ? "+" + it.diffPrice : it.diffPrice }}
</td>
<td class="text-center" :class="it.diffValue < 0 ? 'text-#63BF8D' : 'text-red'">
{{ displayDiffValue(it.diffValue)+'%' }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
@ -719,7 +858,8 @@ function formatNumber(num = 0) {
<div class="item_title hover:underline">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" />
<!-- <img src="@/assets/images/img-43.png" class="item_img" /> -->
<img src="./images/LAB.pic.png" class="item_img w-200px right--10px" />
</div>
<div
class="item !w-full flex flex-col cursor-pointer"

984
src/views/home/Home.vue.bak Executable file
View File

@ -0,0 +1,984 @@
<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'
import { useMessage } from 'naive-ui'
const store = useUserStore()
const message = useMessage()
const isUpPwds = ref(false)
const userCode = ref(false)
const useCdView = ref(false)
watchEffect(() => {
userCode.value = ['admin', 'cd_dandang', 'tech_service'].some((item) =>
store.user.roleCode?.includes(item)
)
useCdView.value = ['admin', 'cd_view', 'cd_dandang', 'tech_service'].some((item) =>
store.user.roleCode?.includes(item)
)
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<any>([{}, {}, {}, {}])
const dszList = ref<any>([{}, {}, {}, {}])
const dishList = ref<any>([{}, {}, {}, {}])
const month_1 = ref()
const month_2 = ref()
const month_3 = 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()
const timeObj = ref<any>({})
onMounted(async () => {
try {
const {
data: { ailist, culist, lastUTime },
data
} = 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 }) => {
// timeObj.value[i.number] = i.modifyTime?.substring(0, 10) || ''
timeObj.value[i.number] = i.updateDate || ''
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
month_1.value = _disList[0].monthDate?.split('-')[1]
month_2.value = _dszList[0].monthDate?.split('-')[1]
month_3.value = _dishList[0].monthDate?.split('-')[1]
addDIS1.value = _disList.reduce((previousValue: any, currentValue: { budget: any }) => {
const sum = parseFloat(currentValue.budget) + parseFloat(previousValue)
// return sum > 0 ? sum.toFixed(2) : 0
return sum
}, 0)
if (_disList[0].budget == _disList[1].budget && addDIS1.value > 0) {
addDIS1.value -= _disList[0].budget
addDIS1.value > 0 ? (addDIS1.value = addDIS1.value.toFixed(2)) : 0
}
addDSZ1.value = _dszList.reduce((previousValue: any, currentValue: { budget: any }) => {
const sum = parseFloat(currentValue.budget) + parseFloat(previousValue)
// return sum > 0 ? sum.toFixed(2) : 0
return sum
}, 0)
if (_dszList[0].budget == _dszList[1].budget && addDSZ1.value > 0) {
addDSZ1.value -= _dszList[0].budget
addDSZ1.value > 0 ? (addDSZ1.value = addDSZ1.value.toFixed(2)) : 0
}
addDISH1.value = _dishList.reduce((previousValue: any, currentValue: { budget: any }) => {
const sum = parseFloat(currentValue.budget) + parseFloat(previousValue)
// return sum > 0 ? sum.toFixed(2) : 0
return sum
}, 0)
if (_dishList[0].budget == _dishList[1].budget && addDISH1.value > 0) {
addDISH1.value -= _dishList[0].budget
addDISH1.value > 0 ? (addDISH1.value = addDISH1.value.toFixed(2)) : 0
}
addDIS2.value = _disList.reduce((previousValue: any, currentValue: { monthOne: any }) => {
const sum = parseFloat(currentValue.monthOne) + parseFloat(previousValue)
// return sum > 0 ? sum.toFixed(2) : 0
return sum
}, 0)
if (_disList[0].monthOne == _disList[1].monthOne && addDIS2.value > 0) {
addDIS2.value -= _disList[0].monthOne
addDIS2.value > 0 ? (addDIS2.value = addDIS2.value.toFixed(2)) : 0
}
addDSZ2.value = _dszList.reduce((previousValue: any, currentValue: { monthOne: any }) => {
const sum = parseFloat(currentValue.monthOne) + parseFloat(previousValue)
// return sum > 0 ? sum.toFixed(2) : 0
return sum
}, 0)
if (_dszList[0].monthOne == _dszList[1].monthOne && addDSZ2.value > 0) {
addDSZ2.value -= _dszList[0].monthOne
addDSZ2.value > 0 ? (addDSZ2.value = addDSZ2.value.toFixed(2)) : 0
}
addDISH2.value = _dishList.reduce((previousValue: any, currentValue: { monthOne: any }) => {
const sum = parseFloat(currentValue.monthOne) + parseFloat(previousValue)
// return sum > 0 ? sum.toFixed(2) : 0
return sum
}, 0)
if (_dishList[0].monthOne == _dishList[1].monthOne && addDISH2.value > 0) {
addDISH2.value -= _dishList[0].monthOne
addDISH2.value > 0 ? (addDISH2.value = addDISH2.value.toFixed(2)) : 0
}
addDIS3.value = _disList.reduce((previousValue: any, currentValue: { monthTwo: any }) => {
const sum = parseFloat(currentValue.monthTwo) + parseFloat(previousValue)
// return sum > 0 ? sum.toFixed(2) : 0
return sum
}, 0)
if (_disList[0].monthTwo == _disList[1].monthTwo && addDIS3.value > 0) {
addDIS3.value -= _disList[0].monthTwo
addDIS3.value > 0 ? (addDIS3.value = addDIS3.value.toFixed(2)) : 0
}
addDSZ3.value = _dszList.reduce((previousValue: any, currentValue: { monthTwo: any }) => {
const sum = parseFloat(currentValue.monthTwo) + parseFloat(previousValue)
// return sum > 0 ? sum.toFixed(2) : 0
return sum
}, 0)
if (_dszList[0].monthTwo == _dszList[1].monthTwo && addDSZ3.value > 0) {
addDSZ3.value -= _dszList[0].monthTwo
addDSZ3.value > 0 ? (addDSZ3.value = addDSZ3.value.toFixed(2)) : 0
}
addDISH3.value = _dishList.reduce((previousValue: any, currentValue: { monthTwo: any }) => {
const sum = parseFloat(currentValue.monthTwo) + parseFloat(previousValue)
// return sum > 0 ? sum.toFixed(2) : 0
return sum
}, 0)
if (_dishList[0].monthTwo == _dishList[1].monthTwo && addDISH3.value > 0) {
addDISH3.value -= _dishList[0].monthTwo
addDISH3.value > 0 ? (addDISH3.value = addDISH3.value.toFixed(2)) : 0
}
if (isUpPwds.value) {
ElMessageBox.alert('为了您的帐号安全,此次登录必须更改密码', '重要提醒', {
confirmButtonText: 'OK',
showClose: false,
showCancelButton: false
}).then(() => {
push({ name: 'modifys' })
})
}
report({ moduleCode: 'App_Home' })
} catch (error) {}
})
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) => {
// return diffValue + '%'
if (diffValue > 0) {
return `+${diffValue}%`
} else if (diffValue < 0) {
return `-${Math.abs(diffValue)}%`
} else {
// return `${formatNumber(diffValue)} %`
return `${diffValue}%`
}
}
async function setModule(codes: any, names: any) {
const moduleCode = codes
console.log(codes, names)
if (names == 'CD' && !useCdView.value) {
return message.info('没有访问权限!')
}
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
}
function formatNumber(num = 0) {
num = +num
const roundedNum: string = num.toFixed(2)
const [wholePart, decimalPart] = roundedNum.split('.')
const formattedDecimalPart = decimalPart.padEnd(2, '0')
return `${wholePart}.${formattedDecimalPart}`
}
</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年度调达本部方针：创新实干，勇毅前行，以综合实力挑战变革，提升存在感 -->
FY24年度公司方针：提升全员价值，直击一切困难
</div>
<div class="mt30px flex-1 flex flex-wrap justify-between">
<News></News>
<div class="card">
<div
class="card_title cursor-pointer hover:underline"
@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-1 text-#152242">
<div class="">
<span class="icoT">市况</span>
<span class="ml10px text-14px">更新时间：{{ 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-14px">{{ it.channel }}</td>
<td class="text-14px">{{ it.negAmount }}</td>
<td class="text-14px" :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-14px">{{ it.channel }}</td>
<td class="text-14px">{{ it.negAmount }}</td>
<td class="text-14px" :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="ml10px text-14px">更新时间：{{ 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-14px"
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 hover:underline"
@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 cursor-pointer hover:underline"
: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
>
<div
class="block p-[10px] pr-0 absolute top-[4px] right-[36px] font-normal h-[20px] !text-[16px] text-[#000]"
>
更新日：{{ timeObj[activeCard5NavKey] }}
</div>
<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>{{ formatNumber(addDIS1) }}%</td>
<td>{{ formatNumber(addDIS2) }}%</td>
<td>{{ formatNumber(addDIS3) }}%</td>
</tr>
<tr>
<th rowspan="2">C/D</th>
<th>交涉</th>
<td :rowspan="disList[0].budget == disList[1].budget ? '2' : ''">
{{ formatNumber(disList[0].budget) }}%
</td>
<td :rowspan="disList[0].monthOne == disList[1].monthOne ? '2' : ''">
{{ formatNumber(disList[0].monthOne) }}%
</td>
<td :rowspan="disList[0].monthTwo == disList[1].monthTwo ? '2' : ''">
{{ formatNumber(disList[0].monthTwo) }}%
</td>
</tr>
<tr>
<th>THEME</th>
<td v-if="disList[1].budget != disList[0].budget">
{{ formatNumber(disList[1].budget) }}%
</td>
<td v-if="disList[1].monthOne != disList[0].monthOne">
{{ formatNumber(disList[1].monthOne) }}%
</td>
<td v-if="disList[1].monthTwo != disList[0].monthTwo">
{{ formatNumber(disList[1].monthTwo) }}%
</td>
</tr>
<tr>
<th colspan="2">市况</th>
<td>{{ formatNumber(disList[2].budget) }}%</td>
<td>{{ formatNumber(disList[2].monthOne) }}%</td>
<td>{{ formatNumber(disList[2].monthTwo) }}%</td>
</tr>
<tr>
<th colspan="2">為替レート</th>
<td>{{ formatNumber(disList[3].budget) }}%</td>
<td>{{ formatNumber(disList[3].monthOne) }}%</td>
<td>{{ formatNumber(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_2 }}月</td>
</tr>
<tr>
<th colspan="2">合计</th>
<td>{{ formatNumber(addDSZ1) }}%</td>
<td>{{ formatNumber(addDSZ2) }}%</td>
<td>{{ formatNumber(addDSZ3) }}%</td>
</tr>
<tr>
<th rowspan="2">C/D</th>
<th>交涉</th>
<td :rowspan="dszList[0].budget == dszList[1].budget ? '2' : ''">
{{ formatNumber(dszList[0].budget) }}%
</td>
<td :rowspan="dszList[0].monthOne == dszList[1].monthOne ? '2' : ''">
{{ formatNumber(dszList[0].monthOne) }}%
</td>
<td :rowspan="dszList[0].monthTwo == dszList[1].monthTwo ? '2' : ''">
{{ formatNumber(dszList[0].monthTwo) }}%
</td>
</tr>
<tr>
<th>THEME</th>
<td v-if="dszList[1].budget != dszList[0].budget">
{{ formatNumber(dszList[1].budget) }}%
</td>
<td v-if="dszList[1].monthOne != dszList[0].monthOne">
{{ formatNumber(dszList[1].monthOne) }}%
</td>
<td v-if="dszList[1].monthTwo != dszList[0].monthTwo">
{{ formatNumber(dszList[1].monthTwo) }}%
</td>
</tr>
<tr>
<th colspan="2">市况</th>
<td>{{ formatNumber(dszList[2].budget) }}%</td>
<td>{{ formatNumber(dszList[2].monthOne) }}%</td>
<td>{{ formatNumber(dszList[2].monthTwo) }}%</td>
</tr>
<tr>
<th colspan="2">為替レート</th>
<td>{{ formatNumber(dszList[3].budget) }}%</td>
<td>{{ formatNumber(dszList[3].monthOne) }}%</td>
<td>{{ formatNumber(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_3 }}月</td>
</tr>
<tr>
<th colspan="2">合计</th>
<td>{{ formatNumber(addDISH1) }}%</td>
<td>{{ formatNumber(addDISH2) }}%</td>
<td>{{ formatNumber(addDISH3) }}%</td>
</tr>
<tr>
<th rowspan="2">C/D</th>
<th>交涉</th>
<td :rowspan="dishList[0].budget == dishList[1].budget ? '2' : ''">
{{ formatNumber(dishList[0].budget) }}%
</td>
<td :rowspan="dishList[0].monthOne == dishList[1].monthOne ? '2' : ''">
{{ formatNumber(dishList[0].monthOne) }}%
</td>
<td :rowspan="dishList[0].monthTwo == dishList[1].monthTwo ? '2' : ''">
{{ formatNumber(dishList[0].monthTwo) }}%
</td>
</tr>
<tr>
<th>THEME</th>
<td v-if="dishList[1].budget != dishList[0].budget">
{{ formatNumber(dishList[1].budget) }}%
</td>
<td v-if="dishList[1].monthOne != dishList[0].monthOne">
{{ formatNumber(dishList[1].monthOne) }}%
</td>
<td v-if="dishList[1].monthTwo != dishList[0].monthTwo">
{{ formatNumber(dishList[1].monthTwo) }}%
</td>
</tr>
<tr>
<th colspan="2">市况</th>
<td>{{ formatNumber(dishList[2].budget) }}%</td>
<td>{{ formatNumber(dishList[2].monthOne) }}%</td>
<td>{{ formatNumber(dishList[2].monthTwo) }}%</td>
</tr>
<tr>
<th colspan="2">為替レート</th>
<td>{{ formatNumber(dishList[3].budget) }}%</td>
<td>{{ formatNumber(dishList[3].monthOne) }}%</td>
<td>{{ formatNumber(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" @click="setModule('App_BCP', 'BCP')">
<div class="card_title cursor-pointer hover:underline">调达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 relative">
<!-- <img src="@/assets/images/img-42.png" class="absolute top-10px right-0" /> -->
<div class="card_title cursor-pointer hover:underline" @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 cursor-pointer hover:underline">重点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 hover:underline">品质</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 hover:underline">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" /> -->
<img src="./images/LAB.pic.png" class="item_img w-200px right--10px" />
</div>
<div
class="item !w-full flex flex-col cursor-pointer"
@click="push({ name: 'StrategicPlanning' })"
>
<div class="item_title hover:underline">战略企划</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 hover:underline-solid"
>开发调达部</span
>
<span class="text-#000 font-thin underline-text hover:underline-solid">调达部</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>

34
src/views/home/cd/CD.vue
View File

@ -52,8 +52,8 @@ const header = { token: token.value }
const { push } = useRouter()
const message = useMessage()
const selYear = ref(new Date().getFullYear() + '')
const year = ref(new Date().getFullYear() + '')
const yearTwo = ref(new Date().getFullYear() + '')
const year = ref(new Date().getFullYear() - 1 + '')
const yearTwo = ref(new Date().getFullYear() - 1 + '')
const option = ref<any>({})
const option2 = ref<any>({})
const optionMax = ref<any>({})
@ -77,8 +77,6 @@ watchEffect(() => {
})
const chartClick = (it: any) => {
console.log('🚀 ~ file: CD.vue:39 ~ it:', it)
return
option.value.series?.forEach((item: any) => {
item.data.forEach((i: any) => {
i.itemStyle = {}
@ -100,7 +98,7 @@ option2.value = totalBar
const disBar = disBarCharData()
optionMax.value = cloneDeep(disBar)
const maxBusSeeds = ref<any>(['加工品', 'Device', '原材料', '进口品'])
const maxBusSeeds = ref<any>(['加工品', '电器机能', '原材料', '输出入'])
const maxBusSeedsOption = ref<Record<any, any>>({})
const maxBusSeedsOptionList = ref<Record<any, any>>({})
// const minBusSeeds = ref(['', '', '', ''])
@ -110,13 +108,14 @@ const showSupplier = ref(false)
// CD-三个据点总发注金额饼状图
const getPartStatisRate = async (date?: Date) => {
const y = date && new Date(date).getFullYear()
console.log('🚀 ~ file: CD.vue:111 ~ y :', y, year.value)
let total = 0
const { data = [] } = await fetchPartStatisRate({ year: y || year.value })
option.value.series[0].data = data.map((item: any) => {
total += item.amount
return { name: item.part, value: item.amount }
})
option.value.graphic.style.text = '总计' + '\n' + formatNum(total)
option.value.graphic.style.text = '总计' + '\n' + formatNum(total) + '\n' + '千元'
}
// 生产随机数
const randomData = () => {
@ -204,7 +203,7 @@ const getPartminBusSeedsRate = async (date?: Date) => {
total += item.amount
return { name: item.minBusSeeds, value: item.amount }
})
optionMin.value.graphic.style.text = '总计' + '\n' + formatNum(total)
optionMin.value.graphic.style.text = '总计' + '\n' + formatNum(total) + '\n' + '千元'
}
// 大业种发注金额 -- 图表2
@ -389,7 +388,7 @@ const beforeUpload = (file: any) => {
<img src="./img/you.png" class="w-30px h-30px" alt="" />
</div>
<div
style="--el-fill-color-blank: transparent; --el-bg-color: #37abff40"
style="--el-fill-color-blank: transparent; --el-bg-color: #37abff"
class="absolute right-10px top-8px h-46px items-center ipt_year"
>
<el-select
@ -437,6 +436,7 @@ const beforeUpload = (file: any) => {
v-model="year"
type="year"
placeholder=""
value-format="YYYY"
@change="getPartStatisRate"
:editable="false"
:clearable="false"
@ -472,6 +472,7 @@ const beforeUpload = (file: any) => {
v-model="yearTwo"
type="year"
placeholder=""
value-format="YYYY"
@change="getPartminBusSeedsRate"
:editable="false"
:clearable="false"
@ -514,7 +515,7 @@ const beforeUpload = (file: any) => {
<img src="./img/you.png" class="w-30px h-30px" alt="" />
</div>
<div
style="--el-fill-color-blank: transparent; --el-bg-color: #37abff40"
style="--el-fill-color-blank: transparent; --el-bg-color: #37abff"
class="absolute right-10px top-8px h-46px items-center ipt_year"
>
<el-select
@ -576,20 +577,21 @@ const beforeUpload = (file: any) => {
--el-date-editor-width: 80px;
}
.btnn {
background-color: #00459660;
box-shadow: 0 0 12px 0 #37abff40 inset;
background-color: #004596;
box-shadow: 0 0 12px 0 #37abff inset;
color: #fff;
padding: 8px 20px;
font-weight: bold;
&::active {
box-shadow: 0 0 12px 0 #37abff80 inset;
box-shadow: 0 0 12px 0 #37abff inset;
}
}
:deep(.el-date-editor.el-input) {
width: 80px;
.el-input__wrapper {
// background: #ffffff90;
background-color: #00459660;
box-shadow: 0 0 12px 0 #37abff40 inset;
background-color: #004596;
box-shadow: 0 0 12px 0 #37abff inset;
cursor: pointer;
}
.el-input__prefix {
@ -601,8 +603,8 @@ const beforeUpload = (file: any) => {
}
}
:deep(.el-select__wrapper) {
background-color: #00459660;
box-shadow: 0 0 12px 0 #37abff40 inset;
background-color: #004596;
box-shadow: 0 0 12px 0 #37abff inset;
&:hover {
box-shadow: none;
}

30
src/views/home/cd/chartData.ts
View File

@ -2,7 +2,7 @@ import { color, type EChartsOption } from 'echarts'
//数字转千分位
export function formatNum(num: any) {
const n = String(num).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
const n = String(num.toFixed(0)).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
return n
}
@ -50,10 +50,10 @@ export function totalPieCharData(arr: any = [], colorList: any = {}) {
style: {
text:
'总计' + //圆饼中心显示数据，这里是显示得总数
'\n' +
formatNum(222299939.23),
'\n',
fill: '#fff',
fontSize: 14,
lineHeight: 20,
width: 30,
height: 30,
textAlign: 'center'
@ -137,7 +137,7 @@ export function totalBarCharData(params: any = {}) {
// top: 'center',
// rotation: 90,
// style: {
// text: '百万元',
// text: '千元',
// fill: '#fff',
// fontSize: 14,
// textAlign: 'center'
@ -146,7 +146,7 @@ export function totalBarCharData(params: any = {}) {
yAxis: [
{
type: 'value',
name: '百万元',
name: '千元',
// min: 0,
// max: 250,
// interval: 50,
@ -207,6 +207,24 @@ export function disBarCharData(params: any = {}) {
type: 'scroll',
pageIconInactiveColor: '#aaa',
pageIconColor: '#fff',
selector: [
// {
// // 全选
// type: 'all',
// // 可以是任意你喜欢的标题
// title: '全选'
// }
// {
// // 反选
// type: 'inverse',
// // 可以是任意你喜欢的标题
// title: '反选'
// }
],
selectorLabel: {
backgroundColor: '#fff',
color: '#000'
},
pageTextStyle: {
color: '#fff'
},
@ -224,7 +242,7 @@ export function disBarCharData(params: any = {}) {
},
yAxis: {
type: 'value',
name: '百万元',
name: '千元',
axisLabel: {
color: '#fff'
},

556
src/views/home/market/Market-bak.vue Executable file
View File

@ -0,0 +1,556 @@
<!-- 市况 -->
<script setup lang="ts">
import { Chart1, Chart3, Chart4, Chart5, Chart6 } from './MarketData-bak'
import HomeHead from '@/views/home/components/HomeHead.vue'
import AppBlock from '@/components/AppBlock.vue'
import AppNewsBox from '@/components/AppNewsBox.vue'
// import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
import { useDate } from '@/views/home/hooks/useDate'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { getList ,marketPreADD,getMarketUser,saveMarketUser,MarketDownload,MarketPreview,getCurrencyList,getMetalList} from '@/api/daikin/base'
import { NModal,NCard } from 'naive-ui'
import {formatDate} from '@/utils/format'
import { message } from '@/utils/message'
import { useUserStore } from '@/stores/modules/user'
import UserList from '@/views/home/intelligence/process/UserPages.vue'
import Amtion from '@/components/amtion.vue'
import {noticeld} from '@/stores/modules/noticeId'
const store = useUserStore()
const stores = noticeld()
const userCode = ['admin','shikuang_dandang','tech_service'].some((item) =>
store.user.roleCode?.includes(item)
)
const userCodes = ['admin','huilv_dandang','tech_service'].some((item) =>
store.user.roleCode?.includes(item)
)
const { day, week } = useDate()
const { push } = useRouter()
const currentDate = new Date();
const currentDates = new Date();
const value1 = ref<[Date, Date]>([
currentDate.setMonth(currentDate.getMonth() - 11),
new Date()
])
const value2 = ref<[Date, Date]>([
currentDates.setMonth(currentDates.getMonth() - 11),
new Date()
])
const { chartRef: chartRef1, option: chartOption1,state } = Chart1()
const { chartRef: chartRef3, option: chartOption3 ,state2} = Chart3()
const { chartRef: chartRef4, option: chartOption4 ,state3} = Chart4()
const { chartRef: chartRef5, option: chartOption5,state4 } = Chart5()
const { chartRef: chartRef6, option: chartOption6 ,state5} = Chart6()
const listData = ref()
const listDatas = ref()
async function getData() {
const {data} = await getList({type:2})
const {data:ds} = await getList({type:1})
listData.value = data
listDatas.value = ds
}
const metal = ref()
const currency = ref()
onMounted(async ()=>{
getData()
const {data} =await getCurrencyList()
const {data:dat} =await getMetalList()
if(dat&&dat!='null'&&dat.length>0){
metal.value = dat
// .filter((item:any) => {
// if(["Fe","lengmei"].includes(item.value)){
// return false
// }else return item
// })
from.value.label.radio = dat[0].value
state4.number = dat[0].value
console.log("🚀 ~ file: Market.vue:56 ~ metal:", metal)
}
if(data&&data!='null'&&data.length>0){
currency.value = data
from.value.labe2.radio = data[0].value
const dat = data[0].value.split(',')
state5.currencyCodeFrom =dat[0]
state5.currencyCodeTo =dat[1]
state2.currencyCodeFrom =dat[0]
state2.currencyCodeTo =dat[1]
state3.currencyCodeFrom =dat[0]
state3.currencyCodeTo =dat[1]
}
})
const src = ref('');
const srcType = ref()
const showModalRef2 =ref(false)
const lokeFuck = async (n)=>{
const {id} =n
if(!id) return
let {data:{url}} = await MarketPreview({id})
if(!url) {
message.info("没有可预览文件！")
return
}
srcType.value = getLastSubstring(url)
if(['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'].includes(srcType.value)){
// src.value = filePath
// pdfShow.value = true
url='https://view.xdocin.com/view?src='+url
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
window.open(url, '', 'width=' + screenWidth + ',height=' + screenHeight + ',top=' + 0 + ',left=' + 0)
}
else{
message.error("文件格式不是 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'！")
}
}
function getLastSubstring(str: string): string {
const lastIndex = str.lastIndexOf('.');
if (lastIndex !== -1) {
return str.substring(lastIndex + 1);
} else {
return '';
}
}
async function downloadFile(data: { id: any; title: string }) {
console.log(data)
if(!data.id) return
try {
const response = await MarketDownload({ id: data.id })
console.log(response)
var blob = new Blob([response.data]);
const downloadUrl = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = downloadUrl;
link.download = response.fileName; // 替换为你要保存的文件名
link.click();
URL.revokeObjectURL(downloadUrl);
} catch (error) {
message.error(error);
}
}
const tab = ref(false)
const tab1 = ref(false)
const tab2 = ref(false)
const names =ref('Cu')
const names1 =ref('100USD-CNY')
const names2 =ref('100USD-CNY')
const tabClick1 = (e)=>{
console.log(e.target.getAttribute('data-id'))
tab1.value=false
const dat =e.target.getAttribute('data-id').split(',')
names1.value =e.target.innerText
state2.currencyCodeFrom =dat[0]
state2.currencyCodeTo =dat[1]
}
const tabClick2 = (e)=>{
console.log(e.target.getAttribute('data-id'))
tab2.value=false
const dat =e.target.getAttribute('data-id').split(',')
names2.value =e.target.innerText
state3.currencyCodeFrom =dat[0]
state3.currencyCodeTo =dat[1]
}
const tabClick= (e)=>{
console.log(e.target)
tab.value=false
state.type =e.target.getAttribute('data-id')
names.value =e.target.innerText
}
const tabShow = (num)=>{
// console.log(num)
switch (num) {
case 0:
tab.value = tab.value === false?true:false
break;
case 1:
tab1.value = tab1.value === false?true:false
break;
case 2:
tab2.value = tab2.value === false?true:false
break;
}
}
const from = ref({
label:{
radio:''
},
labe2:{
radio:''
}
})
const shomk = ref(false)
const sdubList = ref({
title:'',
fileList:[],
})
const shomks=(it)=>{
sdubList.value.type = it
// console.log(sdubList.value)
shomk.value =true
}
async function onSubmit(){
const {type,title ,fileList} = sdubList.value
let filePath
if(fileList.length>0){
// console.log(fileList)
filePath = fileList[0].response.url
}
const {msg,code} = await marketPreADD({type,title,filePath})
if (code === 200) { message.success("修改成功") }
else message.warning(msg)
window.location.reload();
// console.log(sdubList.value)
}
const handleExceed: UploadProps['onExceed'] = (uploadFile: any, uploadFiles: any) => {
message.warning("当前只支持上传一个文件")
}
const thisCka = (e)=>{
if(value1.value){
state4.startTime = formatDate(value1.value[0]).substring(0,10)
state4.endTime = formatDate(value1.value[1]).substring(0,10)
}
state4.number =e
console.log(e)
}
const thisCka2 = (e)=>{
const dat = e.split(',')
if(value2.value){
state5.startTime = formatDate(value2.value[0]).substring(0,10)
state5.endTime = formatDate(value2.value[1]).substring(0,10)
}
state5.currencyCodeFrom =dat[0]
state5.currencyCodeTo =dat[1]
}
const timenFirst=(e)=>{
// console.log(e)
state4.startTime = formatDate(value1.value[0]).substring(0,10)
state4.endTime = formatDate(value1.value[1]).substring(0,10)
}
const timenFirsts=(e)=>{
// console.log(e)
state5.startTime = formatDate(value2.value[0]).substring(0,10)
state5.endTime = formatDate(value2.value[1]).substring(0,10)
}
const header = { 'token': store.user.token }
const showModal = ref(false)
const flg = ref()
const setUserList =ref()
async function getUser(moduleId: any) {
showModal.value = !showModal.value
flg.value = moduleId
const {data: userArr} = await getMarketUser({moduleId})
stores.article.reviewSource = '2'
setUserList.value = userArr
}
// 获取子组件传过来的值
const handleChild = (data: any) => {
console.log(data, 444);
const { showModal: show, multipleSelection } = data
showModal.value = unref(show)
// userList.value = multipleSelection
let userIdList: any[] =[]
multipleSelection.value.forEach((i: { userId: any })=>{
// console.log(dataList.value)
userIdList.push(i.userId)
})
saveMarketUser({
moduleId: flg.value,
userIdList: userIdList
})
}
const CloseThiss = (data: boolean)=>{
showModal.value = data
}
</script>
<template>
<HomeHead class="top">
<template #content>
<!-- <HomeHeadSearch /> -->
</template>
</HomeHead>
<div class="h-full relative flex flex-col overflow-y-auto scrollbar-width-1px">
<div class="pl12px mt30px flex w-full h-full gap-30px">
<!-- <img src="./images/shukuang.png" alt="" class="w-full h-full"> -->
<AppBlock class="flex-1 box">
<div class="box-title">市况</div>
<el-button type="primary" v-if="userCode" class="button !mr-30px !mt-[-30px] z-100" @click="push({name:'MarketDataModify'})">数据管理</el-button>
<div class="bgStyle mt30px">
<div class="mr25px relative w100%">
<span @click="tabShow(0)" class="title bg-#FF603A p5px pl10px pr20px">{{names}}<el-icon><CaretBottom /></el-icon></span>
<div v-if="tab" class="tab absolute bg-#fff w100px top-50px z-50 text-#112144 text-center leading-28px text-18px ">
<div v-if="metal" v-for="im in metal.filter((item:any) => !['Fe','lengmei'].includes(item.value))" class="py5px !rounded-none" :data-id="im.value" @click="tabClick" >{{im.title}}</div>
<!-- <div class="py5px !rounded-none" data-id="Fe" @click="tabClick">Fe</div>
<div class="py5px !rounded-none" data-id="Cu" @click="tabClick">Cu</div>
<div class="py5px !rounded-none" data-id="Re" @click="tabClick">稀土</div> -->
</div>
<VChart class=" absolute z-22" ref="chartRef1" :option="chartOption1" autoresize />
</div>
<!-- <div>
<span class="title bg-#70BFCD p5px pl10px !pr25px">AI</span>
<VChart class="absolute z-22" ref="chartRef2" :option="chartOption2" autoresize />
</div> -->
</div>
<div class="bgStyle !h250px mt20px">
<div >
<span class="title bg-#003BB7 !text-16px pl13px pr20px ">历年数据</span>
<VChart class=" absolute z-22" ref="chartRef5" :option="chartOption5" autoresize />
</div>
</div>
<div class="mt20px ml10px">
<div>
<span class="text-#000">日期:</span>
<el-config-provider :locale="zhCn">
<el-date-picker v-model="value1" type="daterange" range-separator="到"
start-placeholder="开始时间" end-placeholder="结束时间" size="small" @change="timenFirst"/></el-config-provider>
</div>
<div class="mt10px">
<el-radio-group v-model="from.label.radio" class="ml-4" @change="thisCka">
<el-radio v-if="metal" v-for="im in metal" :label="im.value" size="large" >{{im.title}}</el-radio>
<!-- <el-radio label="Al" size="large" >Al</el-radio>
<el-radio label="Fe" size="large" >Fe</el-radio>
<el-radio label="Re" size="large" >稀土</el-radio> -->
</el-radio-group>
</div>
</div>
<div class="bgStyle !h165px mt15px mb10px">
<div>
<span class="title bg-#003BB7 !text-16px pl13px pr20px b">市况预测</span>
<!-- <el-button type="primary" v-if="userCode" class="button" @click="getUser(1)">查看范围</el-button> -->
<el-button type="primary" v-if="userCode" class="button" @click="push({name:'MarketModifys'})">管理</el-button>
<p class="mt40px p15px !border-none max-h120px overflow-auto">
<p class="!border-none w615px !flex items-center pb10px news-item " v-for="n in listDatas" :key="n">
<AppNewsBox class="flex-1 !border-none" :text="n.title" :date="n.createTime" />
<p class="flex-shrink flex !border-none w35px ml20px">
<el-button type="primary" @click="lokeFuck(n)">预览</el-button>
<!-- <el-button type="primary" @click="downloadFile(n)">下载</el-button> -->
</p>
</p>
</p>
</div>
</div>
</AppBlock>
<AppBlock class="flex-1 box">
<div class="box-title ">汇率</div>
<div class="bgStyle mt30px">
<div class="mr25px">
<span @click="tabShow(1)" class="title bg-#FF603A !text-16px pl13px pr20px ">{{names1}}<el-icon><CaretBottom /></el-icon></span>
<div v-if="tab1" class="tab absolute bg-#fff w100px top-40px z-50 text-#112144 text-center leading-28px text-16px ">
<div v-if="currency" v-for="it in currency" class="py5px !rounded-none" :data-id="it.value" @click="tabClick1">{{it.title}}</div>
<!-- <div class="py5px !rounded-none" data-id="CNA,USD" @click="tabClick1">人民币-美元</div>
<div class="py5px !rounded-none" data-id="JPY,USD" @click="tabClick1">日元-美元</div> -->
</div>
<VChart class=" absolute z-22" ref="chartRef3" :option="chartOption3" autoresize />
</div>
<div>
<span @click="tabShow(2)" class="title bg-#70BFCD !text-16px pl13px pr20px ">{{names2}}<el-icon><CaretBottom /></el-icon></span>
<div v-if="tab2" class="tab absolute bg-#fff w100px top-40px z-50 text-#112144 text-center leading-28px text-16px ">
<div v-if="currency" v-for="it in currency" class="py5px !rounded-none" :data-id="it.value" @click="tabClick2">{{it.title}}</div>
<!-- <div class="py5px !rounded-none" data-id="CNA,USD" @click="tabClick2">人民币-美元</div>
<div class="py5px !rounded-none" data-id="JPY,USD" @click="tabClick2">日元-美元</div> -->
</div>
<VChart class="absolute z-22" ref="chartRef4" :option="chartOption4" autoresize />
</div>
</div>
<div class="bgStyle !h250px mt20px">
<div>
<span class="title bg-#003BB7 !text-16px pl13px pr20px ">历年数据</span>
<VChart class=" absolute z-22" ref="chartRef6" :option="chartOption6" autoresize />
</div>
</div>
<div class="mt20px ml10px">
<div>
<span class="text-#000">日期:</span>
<el-config-provider :locale="zhCn">
<el-date-picker v-model="value2" type="daterange" range-separator="到"
start-placeholder="开始时间" end-placeholder="结束时间" size="small" @change="timenFirsts"/></el-config-provider>
</div>
<div class="mt10px">
<el-radio-group v-model="from.labe2.radio" class="ml-4" @change="thisCka2">
<el-radio v-if="currency" v-for="it in currency" :label="it.value" size="large" >{{it.title}}</el-radio>
<!-- <el-radio label="JPY,USD" size="large" >日元-美元</el-radio>
<el-radio label="CNA,USD" size="large" >人民币-美元</el-radio> -->
</el-radio-group>
</div>
</div>
<div class="bgStyle !h165px mt15px mb10px">
<div>
<span class="title bg-#003BB7 !text-16px pl13px pr20px ">汇率预测</span>
<!-- <el-button type="primary" v-if="userCode" class="button" @click="getUser(2)">查看范围</el-button> -->
<el-button type="primary" v-if="userCodes" class="button" @click="push({name:'MarketModify'})">管理</el-button>
<p class="mt40px p15px !border-none max-h120px overflow-auto">
<p class="!border-none w615px !flex items-center pb10px news-item " v-for="n in listData" :key="n">
<AppNewsBox class="flex-1 !border-none" :text="n.title" :date="n.createTime" />
<p class="flex-shrink flex !border-none w35px ml20px">
<el-button type="primary" @click="lokeFuck(n)">预览</el-button>
<!-- <el-button type="primary" @click="downloadFile(n)">下载</el-button> -->
</p>
</p>
</p>
</div>
</div>
</AppBlock>
</div>
</div>
<!-- <div style="width: 1200px; height:800px ; position: fixed; z-index: 100; top:50px;;">
</div> -->
<n-modal :mask-closable="true" v-model:show="showModalRef2">
<div class="w90% h90% ">
<Amtion :data="src" :datas="srcType"/>
</div>
</n-modal>
<n-modal v-model:show="shomk">
<div class="py40px px30px bg-#fff">
<el-form :model="sdubList" label-width="120px" :inline="true">
<el-form-item label="标题" >
<el-input v-model="sdubList.title"/>
</el-form-item>
<br>
<el-form-item label="文件">
<el-upload v-model:file-list="sdubList.fileList" class="upload-demo" :headers="header"
action="/test-api/common/upload" :on-change="handleChange">
<el-button type="primary">选择文件</el-button>
</el-upload>
</el-form-item>
<br>
<br>
<el-form-item class="ml80px">
<el-button type="primary" @click="onSubmit">提交</el-button>
</el-form-item>
</el-form>
</div>
</n-modal>
<n-modal v-model:show="showModal">
<UserList :userDataList="setUserList" @clickChild="handleChild" @CloseThis="CloseThiss"/>
</n-modal>
</template>
<style scoped lang="less">
.button{
display: block;
float: right;
margin-right:20px ;
}
::-webkit-scrollbar{
width: 1px;
}
.top {
position: absolute;
right: 30px;
top: -92px;
}
.date-wrapper[data-v-c5c4f420] {
line-height: 1.5;
position: relative;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
color: #142142;
border: none;
}
.tab{
div:hover{
color: #0036BC;
}
}
.box {
padding: 23px 20px 0 20px;
.box-title {
font-size: 28px;
font-weight: 600;
position: relative;
padding-left: 24px;
color: black;
&::before {
content: " ";
display: block;
width: 8px;
height: 30px;
background-color: #003ab5;
position: absolute;
left: 0;
}
}
}
.bgStyle {
display: flex;
width: 100%;
height: 270px;
position: relative;
padding: 0 5px;
div {
flex: 1;
border: 1px solid rgb(236, 236, 236);
border-radius: 18px;
.title {
// width: 60px;
// height: 60px;
border-radius: 18px 0 50px 0;
color: aliceblue;
line-height: 40px;
font-size: 24px;
font-weight: 500;
z-index: 50;
position: absolute;
}
}
}
</style>

378
src/views/home/market/Market.vue
View File

@ -7,20 +7,20 @@ import AppNewsBox from '@/components/AppNewsBox.vue'
// import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
import { useDate } from '@/views/home/hooks/useDate'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { getList ,marketPreADD,getMarketUser,saveMarketUser,MarketDownload,MarketPreview,getCurrencyList,getMetalList} from '@/api/daikin/base'
import { NModal,NCard } from 'naive-ui'
import {formatDate} from '@/utils/format'
import { getList, marketPreADD, getMarketUser, saveMarketUser, MarketDownload, MarketPreview, getCurrencyList, getMetalList, fetchExchangeInfo,fetchTimeFuturecenterCu,fetchTimeFuturecenterAl } from '@/api/daikin/base'
import { NModal, NCard } from 'naive-ui'
import { formatDate } from '@/utils/format'
import { message } from '@/utils/message'
import { useUserStore } from '@/stores/modules/user'
import UserList from '@/views/home/intelligence/process/UserPages.vue'
import Amtion from '@/components/amtion.vue'
import {noticeld} from '@/stores/modules/noticeId'
import { noticeld } from '@/stores/modules/noticeId'
const store = useUserStore()
const stores = noticeld()
const userCode = ['admin','shikuang_dandang','tech_service'].some((item) =>
const userCode = ['admin', 'shikuang_dandang', 'tech_service'].some((item) =>
store.user.roleCode?.includes(item)
)
const userCodes = ['admin','huilv_dandang','tech_service'].some((item) =>
const userCodes = ['admin', 'huilv_dandang', 'tech_service'].some((item) =>
store.user.roleCode?.includes(item)
)
const { day, week } = useDate()
@ -35,27 +35,28 @@ const value2 = ref<[Date, Date]>([
currentDates.setMonth(currentDates.getMonth() - 11),
new Date()
])
const { chartRef: chartRef1, option: chartOption1,state } = Chart1()
const { chartRef: chartRef3, option: chartOption3 ,state2} = Chart3()
const { chartRef: chartRef4, option: chartOption4 ,state3} = Chart4()
const { chartRef: chartRef5, option: chartOption5,state4 } = Chart5()
const { chartRef: chartRef6, option: chartOption6 ,state5} = Chart6()
const { chartRef: chartRef1, option: chartOption1, state } = Chart1()
const { option: chartOption11 } = Chart1()
const { chartRef: chartRef3, option: chartOption3, state2 } = Chart3()
const { chartRef: chartRef4, option: chartOption4, state3 } = Chart4()
const { chartRef: chartRef5, option: chartOption5, state4 } = Chart5()
const { chartRef: chartRef6, option: chartOption6, state5 } = Chart6()
const listData = ref()
const listDatas = ref()
async function getData() {
const {data} = await getList({type:2})
const {data:ds} = await getList({type:1})
const { data } = await getList({ type: 2 })
const { data: ds } = await getList({ type: 1 })
listData.value = data
listDatas.value = ds
}
const metal = ref()
const currency = ref()
onMounted(async ()=>{
onMounted(async () => {
getData()
const {data} =await getCurrencyList()
const {data:dat} =await getMetalList()
if(dat&&dat!='null'&&dat.length>0){
const { data } = await getCurrencyList()
const { data: dat } = await getMetalList()
if (dat && dat != 'null' && dat.length > 0) {
metal.value = dat
// .filter((item:any) => {
// if(["Fe","lengmei"].includes(item.value)){
@ -66,40 +67,40 @@ onMounted(async ()=>{
state4.number = dat[0].value
console.log("🚀 ~ file: Market.vue:56 ~ metal:", metal)
}
if(data&&data!='null'&&data.length>0){
if (data && data != 'null' && data.length > 0) {
currency.value = data
from.value.labe2.radio = data[0].value
const dat = data[0].value.split(',')
state5.currencyCodeFrom =dat[0]
state5.currencyCodeTo =dat[1]
state2.currencyCodeFrom =dat[0]
state2.currencyCodeTo =dat[1]
state3.currencyCodeFrom =dat[0]
state3.currencyCodeTo =dat[1]
state5.currencyCodeFrom = dat[0]
state5.currencyCodeTo = dat[1]
state2.currencyCodeFrom = dat[0]
state2.currencyCodeTo = dat[1]
state3.currencyCodeFrom = dat[0]
state3.currencyCodeTo = dat[1]
}
})
const src = ref('');
const srcType = ref()
const showModalRef2 =ref(false)
const lokeFuck = async (n)=>{
const {id} =n
if(!id) return
let {data:{url}} = await MarketPreview({id})
if(!url) {
const showModalRef2 = ref(false)
const lokeFuck = async (n) => {
const { id } = n
if (!id) return
let { data: { url } } = await MarketPreview({ id })
if (!url) {
message.info("没有可预览文件！")
return
}
srcType.value = getLastSubstring(url)
if(['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'].includes(srcType.value)){
if (['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'pdf'].includes(srcType.value)) {
// src.value = filePath
// pdfShow.value = true
url='https://view.xdocin.com/view?src='+url
url = 'https://view.xdocin.com/view?src=' + url
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
window.open(url, '', 'width=' + screenWidth + ',height=' + screenHeight + ',top=' + 0 + ',left=' + 0)
}
else{
else {
message.error("文件格式不是 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'！")
}
@ -118,7 +119,7 @@ function getLastSubstring(str: string): string {
async function downloadFile(data: { id: any; title: string }) {
console.log(data)
if(!data.id) return
if (!data.id) return
try {
const response = await MarketDownload({ id: data.id })
console.log(response)
@ -133,83 +134,83 @@ async function downloadFile(data: { id: any; title: string }) {
} catch (error) {
message.error(error);
}
}
}
const tab = ref(false)
const tab1 = ref(false)
const tab2 = ref(false)
const names =ref('Cu')
const names1 =ref('100USD-CNY')
const names2 =ref('100USD-CNY')
const tabClick1 = (e)=>{
const names = ref('Cu')
const names1 = ref('100USD-CNY')
const names2 = ref('100USD-CNY')
const tabClick1 = (e) => {
console.log(e.target.getAttribute('data-id'))
tab1.value=false
const dat =e.target.getAttribute('data-id').split(',')
names1.value =e.target.innerText
state2.currencyCodeFrom =dat[0]
state2.currencyCodeTo =dat[1]
tab1.value = false
const dat = e.target.getAttribute('data-id').split(',')
names1.value = e.target.innerText
state2.currencyCodeFrom = dat[0]
state2.currencyCodeTo = dat[1]
}
const tabClick2 = (e)=>{
const tabClick2 = (e) => {
console.log(e.target.getAttribute('data-id'))
tab2.value=false
const dat =e.target.getAttribute('data-id').split(',')
names2.value =e.target.innerText
state3.currencyCodeFrom =dat[0]
state3.currencyCodeTo =dat[1]
tab2.value = false
const dat = e.target.getAttribute('data-id').split(',')
names2.value = e.target.innerText
state3.currencyCodeFrom = dat[0]
state3.currencyCodeTo = dat[1]
}
const tabClick= (e)=>{
const tabClick = (e) => {
console.log(e.target)
tab.value=false
state.type =e.target.getAttribute('data-id')
names.value =e.target.innerText
tab.value = false
state.type = e.target.getAttribute('data-id')
// names.value =e.target.innerText
}
const tabShow = (num)=>{
const tabShow = (num) => {
// console.log(num)
switch (num) {
case 0:
tab.value = tab.value === false?true:false
tab.value = tab.value === false ? true : false
break;
case 1:
tab1.value = tab1.value === false?true:false
tab1.value = tab1.value === false ? true : false
break;
case 2:
tab2.value = tab2.value === false?true:false
tab2.value = tab2.value === false ? true : false
break;
}
}
const from = ref({
label:{
radio:''
label: {
radio: ''
},
labe2:{
radio:''
labe2: {
radio: ''
}
})
const shomk = ref(false)
const sdubList = ref({
title:'',
fileList:[],
title: '',
fileList: [],
})
const shomks=(it)=>{
const shomks = (it) => {
sdubList.value.type = it
// console.log(sdubList.value)
shomk.value =true
shomk.value = true
}
async function onSubmit(){
const {type,title ,fileList} = sdubList.value
async function onSubmit() {
const { type, title, fileList } = sdubList.value
let filePath
if(fileList.length>0){
if (fileList.length > 0) {
// console.log(fileList)
filePath = fileList[0].response.url
}
const {msg,code} = await marketPreADD({type,title,filePath})
const { msg, code } = await marketPreADD({ type, title, filePath })
if (code === 200) { message.success("修改成功") }
else message.warning(msg)
window.location.reload();
@ -218,54 +219,54 @@ async function onSubmit(){
const handleExceed: UploadProps['onExceed'] = (uploadFile: any, uploadFiles: any) => {
message.warning("当前只支持上传一个文件")
}
const thisCka = (e)=>{
if(value1.value){
state4.startTime = formatDate(value1.value[0]).substring(0,10)
state4.endTime = formatDate(value1.value[1]).substring(0,10)
const thisCka = (e) => {
if (value1.value) {
state4.startTime = formatDate(value1.value[0]).substring(0, 10)
state4.endTime = formatDate(value1.value[1]).substring(0, 10)
}
state4.number =e
state4.number = e
console.log(e)
}
const thisCka2 = (e)=>{
const thisCka2 = (e) => {
const dat = e.split(',')
if(value2.value){
state5.startTime = formatDate(value2.value[0]).substring(0,10)
state5.endTime = formatDate(value2.value[1]).substring(0,10)
if (value2.value) {
state5.startTime = formatDate(value2.value[0]).substring(0, 10)
state5.endTime = formatDate(value2.value[1]).substring(0, 10)
}
state5.currencyCodeFrom =dat[0]
state5.currencyCodeTo =dat[1]
state5.currencyCodeFrom = dat[0]
state5.currencyCodeTo = dat[1]
}
const timenFirst=(e)=>{
const timenFirst = (e) => {
// console.log(e)
state4.startTime = formatDate(value1.value[0]).substring(0,10)
state4.endTime = formatDate(value1.value[1]).substring(0,10)
state4.startTime = formatDate(value1.value[0]).substring(0, 10)
state4.endTime = formatDate(value1.value[1]).substring(0, 10)
}
const timenFirsts=(e)=>{
const timenFirsts = (e) => {
// console.log(e)
state5.startTime = formatDate(value2.value[0]).substring(0,10)
state5.endTime = formatDate(value2.value[1]).substring(0,10)
state5.startTime = formatDate(value2.value[0]).substring(0, 10)
state5.endTime = formatDate(value2.value[1]).substring(0, 10)
}
const header = { 'token': store.user.token }
const showModal = ref(false)
const flg = ref()
const setUserList =ref()
const setUserList = ref()
async function getUser(moduleId: any) {
showModal.value = !showModal.value
flg.value = moduleId
const {data: userArr} = await getMarketUser({moduleId})
const { data: userArr } = await getMarketUser({ moduleId })
stores.article.reviewSource = '2'
setUserList.value = userArr
}
// 获取子组件传过来的值
const handleChild = (data: any) => {
// 获取子组件传过来的值
const handleChild = (data: any) => {
console.log(data, 444);
const { showModal: show, multipleSelection } = data
showModal.value = unref(show)
// userList.value = multipleSelection
let userIdList: any[] =[]
multipleSelection.value.forEach((i: { userId: any })=>{
let userIdList: any[] = []
multipleSelection.value.forEach((i: { userId: any }) => {
// console.log(dataList.value)
userIdList.push(i.userId)
})
@ -274,10 +275,25 @@ async function getUser(moduleId: any) {
moduleId: flg.value,
userIdList: userIdList
})
}
const CloseThiss = (data: boolean)=>{
}
const CloseThiss = (data: boolean) => {
showModal.value = data
}
}
getHomeExInfo()
getTimeFuturecenter()
const homeExchangeInfo = ref<any>([])
async function getHomeExInfo() {
const { data } = await fetchExchangeInfo()
homeExchangeInfo.value = data
console.log('🚀 ~ file: Home.vue:252 ~ }):', data)
}
async function getTimeFuturecenter() {
const { data } = await fetchTimeFuturecenterCu()
console.log("🚀 ~ file: Market.vue:293 ~ data:", data)
}
</script>
<template>
@ -292,62 +308,100 @@ async function getUser(moduleId: any) {
<AppBlock class="flex-1 box">
<div class="box-title">市况</div>
<el-button type="primary" v-if="userCode" class="button !mr-30px !mt-[-30px] z-100" @click="push({name:'MarketDataModify'})">数据管理</el-button>
<div class="bgStyle mt30px">
<div class="mr25px relative w100%">
<el-button type="primary" v-if="userCode" class="button !mr-30px !mt-[-30px] z-100"
@click="push({ name: 'MarketDataModify' })">数据管理</el-button>
<div class="bgStyle !h250px mt20px">
<div class=" relative w100%">
<span @click="tabShow(0)" class="title bg-#FF603A p5px pl10px pr20px">{{names}}<el-icon><CaretBottom /></el-icon></span>
<span @click="tabShow(0)" class="title bg-#70BFCD pl18px pr24px">{{ names }}
<!-- <el-icon><CaretBottom /></el-icon> -->
</span>
<span class="absolute right-160px top-14px z-30 text-#000">最近7天数据</span>
<div v-if="tab" class="tab absolute bg-#fff w100px top-50px z-50 text-#112144 text-center leading-28px text-18px ">
<div v-if="metal" v-for="im in metal.filter((item:any) => !['Fe','lengmei'].includes(item.value))" class="py5px !rounded-none" :data-id="im.value" @click="tabClick" >{{im.title}}</div>
<div v-if="false && tab"
class="tab absolute bg-#fff w100px top-50px z-50 text-#112144 text-center leading-28px text-18px ">
<div v-if="metal"
v-for="im in metal.filter((item: any) => !['Fe', 'lengmei'].includes(item.value))"
class="py5px !rounded-none" :data-id="im.value" @click="tabClick">{{ im.title }}</div>
<!-- <div class="py5px !rounded-none" data-id="Fe" @click="tabClick">Fe</div>
<div class="py5px !rounded-none" data-id="Cu" @click="tabClick">Cu</div>
<div class="py5px !rounded-none" data-id="Re" @click="tabClick">稀土</div> -->
</div>
<VChart class=" absolute z-22" ref="chartRef1" :option="chartOption1" autoresize />
<VChart class="absolute z-22 left-0 right-0 !w-full" ref="chartRef1" :option="chartOption1"
autoresize />
</div>
<!-- <div>
<span class="title bg-#70BFCD p5px pl10px !pr25px">AI</span>
<VChart class="absolute z-22" ref="chartRef2" :option="chartOption2" autoresize />
</div> -->
</div>
<div class="bgStyle !h250px mt20px">
<div >
<div class="bgStyle !h250px mt10px">
<div class=" relative w100%">
<span class="title bg-#FF960F pl18px pr28px">{{ 'AI' }}
<!-- <el-icon><CaretBottom /></el-icon> -->
</span>
<span class="absolute right-160px top-14px z-30 text-#000">最近7天数据</span>
<VChart class="absolute z-22 left-0 right-0 !w-full" ref="chartRef1" :option="chartOption11"
autoresize />
</div>
<!-- <div>
<span class="title bg-#70BFCD p5px pl10px !pr25px">AI</span>
<VChart class="absolute z-22" ref="chartRef2" :option="chartOption2" autoresize />
</div> -->
</div>
<div class="bgStyle !h240px mt10px">
<div>
<span class="title bg-#003BB7 !text-16px pl13px pr20px ">历年数据</span>
<VChart class=" absolute z-22" ref="chartRef5" :option="chartOption5" autoresize />
</div>
</div>
<div class="mt20px ml10px">
<div>
<div class="mt8px ml10px">
<div class="flex items-center w-45%">
<span class="text-#000">日期:</span>
<span class="text-#000 whitespace-nowrap">日期:</span>
<el-config-provider :locale="zhCn">
<el-date-picker v-model="value1" type="daterange" range-separator="到"
start-placeholder="开始时间" end-placeholder="结束时间" size="small" @change="timenFirst"/></el-config-provider>
start-placeholder="开始时间" end-placeholder="结束时间" size="small"
@change="timenFirst" /></el-config-provider>
</div>
<div class="mt10px">
<div class="flex justify-between items-center">
<el-radio-group v-model="from.label.radio" class="ml-4" @change="thisCka">
<el-radio v-if="metal" v-for="im in metal" :label="im.value" size="large" >{{im.title}}</el-radio>
<el-radio v-if="metal" v-for="im in metal" :label="im.value"
size="large">{{ im.title }}</el-radio>
<!-- <el-radio label="Al" size="large" >Al</el-radio>
<el-radio label="Fe" size="large" >Fe</el-radio>
<el-radio label="Re" size="large" >稀土</el-radio> -->
</el-radio-group>
</div>
</div>
<div class="bgStyle !h165px mt15px mb10px">
<div>
<el-popover placement="top-end" trigger="click" :popper-style="{ width: '590px',borderRadius:'10px' }"
:teleported="true">
<template #reference>
<div
class="bg-gr h-42px w115px flex justify-center items-center text-#fff rounded-10px text-18px cursor-pointer font-bold">
市况预测 <el-icon class="rotate-270deg">
<CaretBottom />
</el-icon></div>
</template>
<!-- <Teleport to="v-screen-box"> -->
<!-- <VScaleScreen
ref="fitscreenRef"
:width="1920"
:height="1080"
mode="fit"
> -->
<div class="bgStyle h-250px w-690px mt15px mb10px">
<div class="w-full">
<span class="title bg-#003BB7 !text-16px pl13px pr20px b">市况预测</span>
<!-- <el-button type="primary" v-if="userCode" class="button" @click="getUser(1)">查看范围</el-button> -->
<el-button type="primary" v-if="userCode" class="button" @click="push({name:'MarketModifys'})">管理</el-button>
<p class="mt40px p15px !border-none max-h120px overflow-auto">
<p class="!border-none w615px !flex items-center pb10px news-item " v-for="n in listDatas" :key="n">
<el-button type="primary" size="small" v-if="userCode" class="button !mr-2%"
@click="push({ name: 'MarketModifys' })">管理</el-button>
<p class="mt40px p15px !border-none max-h250px overflow-auto">
<p class="!border-none w-98% !flex items-center pb10px news-item !pr30rpx"
v-for="n in listDatas" :key="n">
<AppNewsBox class="flex-1 !border-none" :text="n.title" :date="n.createTime" />
<p class="flex-shrink flex !border-none w35px ml20px">
<el-button type="primary" @click="lokeFuck(n)">预览</el-button>
<el-button size="small" type="primary" @click="lokeFuck(n)">预览</el-button>
<!-- <el-button type="primary" @click="downloadFile(n)">下载</el-button> -->
</p>
</p>
@ -355,14 +409,25 @@ async function getUser(moduleId: any) {
</div>
</div>
<!-- </VScaleScreen> -->
<!-- </Teleport> -->
</el-popover>
</div>
</div>
</AppBlock>
<AppBlock class="flex-1 box">
<div class="box-title ">汇率</div>
<div class="bgStyle mt30px">
<div class="bgStyle !h250px mt20px">
<div class="mr25px">
<span @click="tabShow(1)" class="title bg-#FF603A !text-16px pl13px pr20px ">{{names1}}<el-icon><CaretBottom /></el-icon></span>
<div v-if="tab1" class="tab absolute bg-#fff w100px top-40px z-50 text-#112144 text-center leading-28px text-16px ">
<div v-if="currency" v-for="it in currency" class="py5px !rounded-none" :data-id="it.value" @click="tabClick1">{{it.title}}</div>
<span @click="tabShow(1)"
class="title bg-#FF603A !text-16px pl13px pr20px ">{{ names1 }}<el-icon>
<CaretBottom />
</el-icon></span>
<div v-if="tab1"
class="tab absolute bg-#fff w100px top-40px z-50 text-#112144 text-center leading-28px text-16px ">
<div v-if="currency" v-for="it in currency" class="py5px !rounded-none" :data-id="it.value"
@click="tabClick1">{{ it.title }}</div>
<!-- <div class="py5px !rounded-none" data-id="CNA,USD" @click="tabClick1">人民币-美元</div>
<div class="py5px !rounded-none" data-id="JPY,USD" @click="tabClick1">日元-美元</div> -->
</div>
@ -371,10 +436,15 @@ async function getUser(moduleId: any) {
<VChart class=" absolute z-22" ref="chartRef3" :option="chartOption3" autoresize />
</div>
<div>
<span @click="tabShow(2)" class="title bg-#70BFCD !text-16px pl13px pr20px ">{{names2}}<el-icon><CaretBottom /></el-icon></span>
<span @click="tabShow(2)"
class="title bg-#70BFCD !text-16px pl13px pr20px ">{{ names2 }}<el-icon>
<CaretBottom />
</el-icon></span>
<div v-if="tab2" class="tab absolute bg-#fff w100px top-40px z-50 text-#112144 text-center leading-28px text-16px ">
<div v-if="currency" v-for="it in currency" class="py5px !rounded-none" :data-id="it.value" @click="tabClick2">{{it.title}}</div>
<div v-if="tab2"
class="tab absolute bg-#fff w100px top-40px z-50 text-#112144 text-center leading-28px text-16px ">
<div v-if="currency" v-for="it in currency" class="py5px !rounded-none" :data-id="it.value"
@click="tabClick2">{{ it.title }}</div>
<!-- <div class="py5px !rounded-none" data-id="CNA,USD" @click="tabClick2">人民币-美元</div>
<div class="py5px !rounded-none" data-id="JPY,USD" @click="tabClick2">日元-美元</div> -->
</div>
@ -383,36 +453,40 @@ async function getUser(moduleId: any) {
</div>
</div>
<div class="bgStyle !h250px mt20px">
<div class="bgStyle !h250px mt10px">
<div>
<span class="title bg-#003BB7 !text-16px pl13px pr20px ">历年数据</span>
<VChart class=" absolute z-22" ref="chartRef6" :option="chartOption6" autoresize />
</div>
</div>
<div class="mt20px ml10px">
<div>
<div class="mt10px ml10px">
<div class="flex items-center w-45%">
<span class="text-#000">日期:</span>
<span class="text-#000 whitespace-nowrap">日期:</span>
<el-config-provider :locale="zhCn">
<el-date-picker v-model="value2" type="daterange" range-separator="到"
start-placeholder="开始时间" end-placeholder="结束时间" size="small" @change="timenFirsts"/></el-config-provider>
start-placeholder="开始时间" end-placeholder="结束时间" size="small"
@change="timenFirsts" /></el-config-provider>
</div>
<div class="mt10px">
<div class="h-30px">
<el-radio-group v-model="from.labe2.radio" class="ml-4" @change="thisCka2">
<el-radio v-if="currency" v-for="it in currency" :label="it.value" size="large" >{{it.title}}</el-radio>
<el-radio v-if="currency" v-for="it in currency" :label="it.value"
size="large">{{ it.title }}</el-radio>
<!-- <el-radio label="JPY,USD" size="large" >日元-美元</el-radio>
<el-radio label="CNA,USD" size="large" >人民币-美元</el-radio> -->
</el-radio-group>
</div>
</div>
<div class="bgStyle !h165px mt15px mb10px">
<div class="bgStyle !h230px mt15px mb10px">
<div>
<span class="title bg-#003BB7 !text-16px pl13px pr20px ">汇率预测</span>
<!-- <el-button type="primary" v-if="userCode" class="button" @click="getUser(2)">查看范围</el-button> -->
<el-button type="primary" v-if="userCodes" class="button" @click="push({name:'MarketModify'})">管理</el-button>
<p class="mt40px p15px !border-none max-h120px overflow-auto">
<p class="!border-none w615px !flex items-center pb10px news-item " v-for="n in listData" :key="n">
<el-button type="primary" v-if="userCodes" class="button"
@click="push({ name: 'MarketModify' })">管理</el-button>
<p class="mt40px p15px !border-none max-h-full overflow-auto">
<p class="!border-none w615px !flex items-center pb10px news-item " v-for="n in listData"
:key="n">
<AppNewsBox class="flex-1 !border-none" :text="n.title" :date="n.createTime" />
<p class="flex-shrink flex !border-none w35px ml20px">
<el-button type="primary" @click="lokeFuck(n)">预览</el-button>
@ -431,7 +505,7 @@ async function getUser(moduleId: any) {
</div> -->
<n-modal :mask-closable="true" v-model:show="showModalRef2">
<div class="w90% h90% ">
<Amtion :data="src" :datas="srcType"/>
<Amtion :data="src" :datas="srcType" />
</div>
</n-modal>
@ -442,8 +516,8 @@ async function getUser(moduleId: any) {
<el-form :model="sdubList" label-width="120px" :inline="true">
<el-form-item label="标题" >
<el-input v-model="sdubList.title"/>
<el-form-item label="标题">
<el-input v-model="sdubList.title" />
</el-form-item>
<br>
<el-form-item label="文件">
@ -464,29 +538,34 @@ async function getUser(moduleId: any) {
</div>
</n-modal>
<n-modal v-model:show="showModal">
<UserList :userDataList="setUserList" @clickChild="handleChild" @CloseThis="CloseThiss"/>
<UserList :userDataList="setUserList" @clickChild="handleChild" @CloseThis="CloseThiss" />
</n-modal>
</template>
<style scoped lang="less">
.bg-gr {
background: linear-gradient(to left, #34A6D9 0%, #23D1C6 100%);
}
.button{
.button {
display: block;
float: right;
margin-right:20px ;
margin-right: 20px;
}
::-webkit-scrollbar{
::-webkit-scrollbar {
width: 1px;
}
.top {
position: absolute;
right: 30px;
top: -92px;
}
.date-wrapper[data-v-c5c4f420] {
line-height: 1.5;
position: relative;
@ -499,8 +578,9 @@ async function getUser(moduleId: any) {
color: #142142;
border: none;
}
.tab{
div:hover{
.tab {
div:hover {
color: #0036BC;
}
}

473
src/views/home/market/MarketData-bak.ts Executable file
View File

@ -0,0 +1,473 @@
import { historyStat,rateHistoryStat,historyMarketSevenDay,historyStatSevenDay} from '@/api/daikin/base'
import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import {calculateDateIntervals} from '@/utils/format'
const state = reactive<any>({
type: 'Cu',
})
const state1 = reactive<any>({
currencyCodeFrom:'CNA',
currencyCodeTo:'USD',
})
const state2 = reactive<any>({
currencyCodeFrom:'CNA',
currencyCodeTo:'USD',
})
const state3 = reactive<any>({
currencyCodeFrom:'USD',
currencyCodeTo:'CNA',
})
const state4 = reactive<any>({
number:'Cu',
type: '2',
dateList:calculateDateIntervals('','').list,
startTime:'',
endTime:'',
})
const state5 = reactive<any>({
currencyCodeFrom:'CNA',
currencyCodeTo:'JPY',
type: '2',
dateList:calculateDateIntervals('','').list,
startTime:'',
endTime:'',
})
function getDay(){
const today = new Date();
const pastSevenDays = [];
for (let i = 6; i >= 0; i--) {
const date = new Date(today);
date.setDate(today.getDate() - i);
pastSevenDays.push(date.toISOString().split('T')[0]);
}
return pastSevenDays;
}
function reverseArray(inputArray: string | any[],star: number,enc: number) {
const reversedArray = [];
for (let i = 0; i <= inputArray.length - 1; i++) {
reversedArray.push(inputArray[i].substring(star,enc));
}
return reversedArray;
}
export function Chart1() {
const chartRef = ref()
const optionRef = ref()
async function getDat() {
const { data } = await historyMarketSevenDay({ number: state.type })
if (!data) return
let { LME, SMM } = data[state.type]
SMM = SMM.map((item: any) => (item == 0 ? null : item))
LME = LME.map((item: any) => (item == 0 ? null : item))
const option = {
height: '150px', // 设置图表高度为 400 像素
grid: {
left: '10',
top: 90,
right: '10',
bottom: '10',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['SMM', 'LME'],
right: 20,
top: 10
},
xAxis: {
type: 'category',
data: reverseArray(getDay(), 5, 10)
},
yAxis: [
{
type: 'value'
// name:'1',
},
{
// name:'2',
type: 'value'
}
],
series: [
{
name: 'SMM',
data: SMM,
color: '#8F97F8',
type: 'line',
yAxisIndex: 1,
showDataShadow: true,
connectNulls: true,
label: {
show: true,
position: 'top'
}
},
{
name: 'LME',
data: LME,
type: 'line',
color: '#FF603A',
showDataShadow: true,
connectNulls: true,
label: {
show: true,
position: 'top'
}
}
]
}
optionRef.value = option
}
const ss = computed(() => [state.type])
watch(
() => unref(ss),
async (v) => {
console.log(state.type)
getDat()
},
{ immediate: true, deep: true }
)
watchEffect(() => {
const option = chartRef.value
chartRef.value = option
})
return { chartRef, option: optionRef, state }
}
export function Chart3() {
const chartRef = ref()
const optionRef = ref<any>({})
async function getDat() {
const { data } = await historyStatSevenDay({
currencyCodeFrom: state2.currencyCodeFrom,
currencyCodeTo: state2.currencyCodeTo
})
if (!data) return
const dat = (
data[state2.currencyCodeFrom + '-' + state2.currencyCodeTo] || []
).map((item: any) => (item == 0 ? null : item))
const option = {
height: '150px', // 设置图表高度为 400 像素
grid: {
left: '10',
top: 90,
right: '10',
bottom: '10',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
legend: {
data: state2.currencyCodeFrom + '-' + state2.currencyCodeTo,
right: 20,
top: 10
},
xAxis: {
type: 'category',
data: reverseArray(getDay(), 8, 10)
},
yAxis: {
type: 'value'
},
series: [
{
name: state2.currencyCodeFrom + '-' + state2.currencyCodeTo,
data: dat,
color: '#8F97F8',
type: 'line',
showDataShadow: true,
connectNulls: true,
label: {
show: true,
position: 'top'
}
}
]
}
optionRef.value = option
}
const ss = computed(() => [state2.currencyCodeFrom, state2.currencyCodeTo])
watch(
() => unref(ss),
async (v) => {
console.log(state2.type)
getDat()
},
{ immediate: true, deep: true }
)
watchEffect(() => {
const option = chartRef.value
chartRef.value = option
})
return { chartRef, option: optionRef, state2 }
}
export function Chart4() {
const chartRef = ref()
const optionRef = ref<any>({})
async function getDat() {
const { data } = await historyStatSevenDay({
currencyCodeFrom: state3.currencyCodeFrom,
currencyCodeTo: state3.currencyCodeTo
})
if (!data) return
const dat = (
data[state3.currencyCodeFrom + '-' + state3.currencyCodeTo] || []
).map((item: any) => (item == 0 ? null : item))
const option = {
grid: {
left: '10',
top: 90,
right: '10',
bottom: '10',
containLabel: true
},
height: '150px', // 设置图表高度为 400 像素
tooltip: {
trigger: 'axis'
},
legend: {
data: state3.currencyCodeFrom + '-' + state3.currencyCodeTo,
right: 20,
top: 10
},
xAxis: {
type: 'category',
data: reverseArray(getDay(), 8, 10)
},
yAxis: {
type: 'value'
},
series: [
{
name: state3.currencyCodeFrom + '-' + state3.currencyCodeTo,
data: dat,
color: '#8F97F8',
type: 'line',
showDataShadow: true,
connectNulls: true,
label: {
show: true,
position: 'top'
}
}
]
}
optionRef.value = option
}
const ss = computed(() => [state3.currencyCodeFrom, state3.currencyCodeTo])
watch(
() => unref(ss),
async (v) => {
console.log(state3.type)
getDat()
},
{ immediate: true, deep: true }
)
watchEffect(() => {
const option = chartRef.value
chartRef.value = option
})
return { chartRef, option: optionRef, state3 }
}
export function Chart5() {
const chartRef = ref()
const optionRef = ref<any>({})
let nameX: string[]
async function dataList() {
let SMM, LME
const { data } = await historyStat({
number: state4.number,
type: state4.type,
dateList: state4.dateList
})
if (data && data[state4.number]) {
SMM = data[state4.number].SMM || []
LME = data[state4.number].LME || []
SMM = SMM.map((item: any) => (item == 0 ? null : item))
LME = LME.map((item: any) => (item == 0 ? null : item))
}
const option = {
// width: '250px', // 设置图表宽度为 800 像素
// height: '150px', // 设置图表高度为 400 像素
grid: {
left: '10',
top: 90,
right: '10',
bottom: '10',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['SMM', 'LME'],
right: 20,
top: 10
},
xAxis: {
type: 'category',
data: nameX
},
yAxis: [
{
type: 'value'
// name:'1',
},
{
// name:'2',
type: 'value'
}
],
series: [
{
name: 'SMM',
data: SMM,
color: '#FF9307',
type: 'line',
smooth: true,
showDataShadow: true,
connectNulls: true
},
{
name: 'LME',
data: LME,
type: 'line',
color: '#0063ED',
smooth: true,
yAxisIndex: 1,
showDataShadow: true,
connectNulls: true
}
]
}
optionRef.value = option
}
const ss = computed(() => [state4.number, state4.startTime, state4.endTime])
watch(
() => unref(ss),
async (v) => {
// console.log(calculateDateIntervals(state4.startTime,state4.endTime),88888)
const { type, list } = calculateDateIntervals(
state4.startTime,
state4.endTime
)
nameX = list
state4.dateList = list
state4.type = type
console.log(state4.number)
dataList()
},
{ immediate: true, deep: true }
)
watchEffect(() => {
const option = chartRef.value
chartRef.value = option
})
return { chartRef, option: optionRef, state4 }
}
export function Chart6() {
const chartRef = ref()
const optionRef = ref<any>({})
let nameX: string[]
async function getDat() {
const { data } = await rateHistoryStat({
currencyCodeFrom: state5.currencyCodeFrom,
currencyCodeTo: state5.currencyCodeTo,
type: state5.type,
dateList: state5.dateList
})
const dat = (
data[state5.currencyCodeFrom + '-' + state5.currencyCodeTo] || []
).map((item: any) => (item == 0 ? null : item))
const option = {
// width: '250px', // 设置图表宽度为 800 像素
// height: '150px', // 设置图表高度为 400 像素
grid: {
left: '10',
top: 90,
right: '10',
bottom: '10',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
// legend: {
// data:state5.currencyCodeFrom-state5.currencyCodeTo,
// right: 20,
// top: 10,
// },
xAxis: {
type: 'category',
data: nameX
},
yAxis: {
type: 'value'
},
series: [
{
name: state5.currencyCodeFrom + '-' + state5.currencyCodeTo,
data: dat,
color: '#89DF75',
type: 'line',
smooth: true,
showDataShadow: true,
connectNulls: true
}
]
}
optionRef.value = option
}
const ss = computed(() => [
state5.currencyCodeFrom,
state5.currencyCodeTo,
state5.startTime,
state5.endTime
])
watch(
() => unref(ss),
async (v) => {
const { type, list } = calculateDateIntervals(
state5.startTime,
state5.endTime
)
nameX = list
state5.dateList = list
state5.type = type
getDat()
},
{ immediate: true, deep: true }
)
watchEffect(() => {
const option = chartRef.value
chartRef.value = option
})
return { chartRef, option: optionRef, state5 }
}

583
src/views/home/market/MarketData-new.ts Executable file
View File

@ -0,0 +1,583 @@
import {
historyStat,
rateHistoryStat,
historyMarketSevenDay,
historyStatSevenDay,
fetchTimeFuturecenterCu,
fetchTimeFuturecenterAl
} from '@/api/daikin/base'
import { use } from 'echarts/core'
import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import { calculateDateIntervals } from '@/utils/format'
// import { CandlestickChart } from 'echarts/charts'
// use([CandlestickChart])
const state = reactive<any>({
type: 'Cu'
})
const state1 = reactive<any>({
currencyCodeFrom: 'CNA',
currencyCodeTo: 'USD'
})
const state2 = reactive<any>({
currencyCodeFrom: 'CNA',
currencyCodeTo: 'USD'
})
const state3 = reactive<any>({
currencyCodeFrom: 'USD',
currencyCodeTo: 'CNA'
})
const state4 = reactive<any>({
number: 'Cu',
type: '2',
dateList: calculateDateIntervals('', '').list,
startTime: '',
endTime: ''
})
const state5 = reactive<any>({
currencyCodeFrom: 'CNA',
currencyCodeTo: 'JPY',
type: '2',
dateList: calculateDateIntervals('', '').list,
startTime: '',
endTime: ''
})
function getDay() {
const today = new Date()
const pastSevenDays = []
for (let i = 6; i >= 0; i--) {
const date = new Date(today)
date.setDate(today.getDate() - i)
pastSevenDays.push(date.toISOString().split('T')[0])
}
return pastSevenDays
}
function reverseArray(inputArray: string | any[], star: number, enc: number) {
const reversedArray = []
for (let i = 0; i <= inputArray.length - 1; i++) {
reversedArray.push(inputArray[i].substring(star, enc))
}
return reversedArray
}
export function Chart1(type = 'Cu') {
const chartRef = ref()
const optionRef = ref()
async function getDat() {
const { data = {} } =
type == 'Cu' ? await fetchTimeFuturecenterCu() : await fetchTimeFuturecenterAl()
const { list = [] } = data
let xData: any = []
let lastPrice: any = []
let diff: any = []
list.forEach((item: any) => {
xData.push(item.updateTime.substr(11, 5))
lastPrice.push(item.lastPrice)
diff.push(parseFloat(item.diffValue).toFixed(2))
})
const option = {
height: '270px', // 设置图表高度为 400 像素
grid: {
left: '10',
right: '10',
// top: 90,
// bottom: '10',
containLabel: true
},
tooltip: {
trigger: 'axis',
// position: function (pt) {
// return [pt[0], '10%']
// },
// backgroundColor: '#4c4c4c90',
formatter: function (params: any) {
const { dataIndex } = params[0]
const val = list[dataIndex]
const style = 'display: flex;justify-content: space-between;align-items: center;'
const isUp = val.diffPrice > 0
const priceStyle = isUp ? 'color: #ec0000;' : 'color: #00da3c;'
return `
<div style="width:120px">
<div style="${style}borderBottom: 1px solid #ccc">
<span>时间:</span>
<span>${val.updateTime?.substr(11, 5)}</span>
</div>
<div style="${style}">
<span>最新价:</span>
<span style="${priceStyle}">${val.lastPrice}</span>
</div>
<div style="${style}">
<span>涨跌额:</span>
<span style="${priceStyle}">${val.diffPrice}</span>
</div>
<div style="${style}">
<span>涨跌幅:</span>
<span style="${priceStyle}">${val.diffValue}%</span>
</div>
<div style="${style}">
<span>成交额:</span>
<span>${val.donePrice ? (val.donePrice / 100000000).toFixed(2) : 0}亿</span>
</div>
<div style="${style}">
<span>成交量:</span>
<span>${val.doneNumber}</span>
</div>
<div style="${style}">
<span>均价:</span>
<span>${val.avgPrice}</span>
</div>
</div>
`
},
position: function (pos, params, el, elRect, size) {
const obj: any = {
top: 10
}
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 60
return obj
},
axisPointer: {
type: 'cross',
animation: true,
link: [
{
xAxisIndex: 'all'
}
],
label: {
backgroundColor: '#505765'
}
}
},
xAxis: [
{
type: 'category',
data: xData,
boundaryGap: false,
splitLine: { show: false },
axisLine: { onZero: false }
}
],
yAxis: [
// {
// name: 'Dow-Jones index',
// type: 'candlestick',
// data: list,
// itemStyle: {
// color: '#00da3c',
// color0: '#ec0000',
// borderColor: undefined,
// borderColor0: undefined
// }
// },
{
type: 'value',
name: '',
min: 'dataMin',
max: 'dataMax',
scale: true,
// splitArea: {
// show: true
// },
boundaryGap: [0, '100%']
},
{
type: 'value',
name: '',
min: 'dataMin',
// formatter: '{value} %',
alignTicks: true,
// boundaryGap: [0, '100%'],
scale: true,
minInterval: 0.01,
axisLabel: {
// formatter: '{value}%'
formatter: function (value, index) {
return value.toFixed(1) + '%'
}
}
}
],
dataZoom: [
{
type: 'inside',
start: 80,
end: 100
},
{
start: 80,
end: 100
}
],
series: [
{
name: '',
type: 'line',
smooth: true,
symbol: 'none',
emphasis: {
focus: 'series'
},
// areaStyle: {},
data: lastPrice
},
{
name: '',
type: 'line',
emphasis: {
focus: 'series'
},
smooth: true,
symbol: 'none',
yAxisIndex: 1,
// areaStyle: {},
data: diff
}
]
}
optionRef.value = option
}
// const ss = computed(() => [state.type])
// watch(
// () => unref(ss),
// async (v) => {
// console.log(state.type)
// getDat()
// },
// { immediate: true, deep: true }
// )
getDat()
watchEffect(() => {
const option = chartRef.value
chartRef.value = option
})
return { chartRef, option: optionRef, state }
}
export function Chart3() {
const chartRef = ref()
const optionRef = ref<any>({})
async function getDat() {
const { data } = await historyStatSevenDay({
currencyCodeFrom: state2.currencyCodeFrom,
currencyCodeTo: state2.currencyCodeTo
})
if (!data) return
const dat = (data[state2.currencyCodeFrom + '-' + state2.currencyCodeTo] || []).map(
(item: any) => (item == 0 ? null : item)
)
const option = {
height: '150px', // 设置图表高度为 400 像素
grid: {
left: '10',
top: 90,
right: '10',
bottom: '10',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
legend: {
data: state2.currencyCodeFrom + '-' + state2.currencyCodeTo,
right: 20,
top: 10
},
xAxis: {
type: 'category',
data: reverseArray(getDay(), 8, 10)
},
yAxis: {
type: 'value'
},
series: [
{
name: state2.currencyCodeFrom + '-' + state2.currencyCodeTo,
data: dat,
color: '#8F97F8',
type: 'line',
showDataShadow: true,
connectNulls: true,
label: {
show: true,
position: 'top'
}
}
]
}
optionRef.value = option
}
const ss = computed(() => [state2.currencyCodeFrom, state2.currencyCodeTo])
watch(
() => unref(ss),
async (v) => {
console.log(state2.type)
// getDat()
},
{ immediate: true, deep: true }
)
watchEffect(() => {
const option = chartRef.value
chartRef.value = option
})
return { chartRef, option: optionRef, state2 }
}
export function Chart4() {
const chartRef = ref()
const optionRef = ref<any>({})
async function getDat() {
const { data } = await historyStatSevenDay({
currencyCodeFrom: state3.currencyCodeFrom,
currencyCodeTo: state3.currencyCodeTo
})
if (!data) return
const dat = (data[state3.currencyCodeFrom + '-' + state3.currencyCodeTo] || []).map(
(item: any) => (item == 0 ? null : item)
)
const option = {
grid: {
left: '10',
top: 90,
right: '10',
bottom: '10',
containLabel: true
},
height: '150px', // 设置图表高度为 400 像素
tooltip: {
trigger: 'axis'
},
legend: {
data: state3.currencyCodeFrom + '-' + state3.currencyCodeTo,
right: 20,
top: 10
},
xAxis: {
type: 'category',
data: reverseArray(getDay(), 8, 10)
},
yAxis: {
type: 'value'
},
series: [
{
name: state3.currencyCodeFrom + '-' + state3.currencyCodeTo,
data: dat,
color: '#8F97F8',
type: 'line',
showDataShadow: true,
connectNulls: true,
label: {
show: true,
position: 'top'
}
}
]
}
optionRef.value = option
}
const ss = computed(() => [state3.currencyCodeFrom, state3.currencyCodeTo])
watch(
() => unref(ss),
async (v) => {
console.log(state3.type)
// getDat()
},
{ immediate: true, deep: true }
)
watchEffect(() => {
const option = chartRef.value
chartRef.value = option
})
return { chartRef, option: optionRef, state3 }
}
export function Chart5() {
const chartRef = ref()
const optionRef = ref<any>({})
let nameX: string[]
async function dataList() {
let SMM, LME
const { data } = await historyStat({
number: state4.number,
type: state4.type,
dateList: state4.dateList
})
if (data && data[state4.number]) {
SMM = data[state4.number].SMM || []
LME = data[state4.number].LME || []
SMM = SMM.map((item: any) => (item == 0 ? null : item))
LME = LME.map((item: any) => (item == 0 ? null : item))
}
const option = {
// width: '250px', // 设置图表宽度为 800 像素
// height: '150px', // 设置图表高度为 400 像素
grid: {
left: '10',
top: 90,
right: '10',
bottom: '10',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['SMM', 'LME'],
right: 20,
top: 10
},
xAxis: {
type: 'category',
data: nameX
},
yAxis: [
{
type: 'value'
// name:'1',
},
{
// name:'2',
type: 'value'
}
],
series: [
{
name: 'SMM',
data: SMM,
color: '#FF9307',
type: 'line',
smooth: true,
showDataShadow: true,
connectNulls: true
},
{
name: 'LME',
data: LME,
type: 'line',
color: '#0063ED',
smooth: true,
yAxisIndex: 1,
showDataShadow: true,
connectNulls: true
}
]
}
optionRef.value = option
}
const ss = computed(() => [state4.number, state4.startTime, state4.endTime])
watch(
() => unref(ss),
async (v) => {
// console.log(calculateDateIntervals(state4.startTime,state4.endTime),88888)
const { type, list } = calculateDateIntervals(state4.startTime, state4.endTime)
nameX = list
state4.dateList = list
state4.type = type
console.log(state4.number)
dataList()
},
{ immediate: true, deep: true }
)
watchEffect(() => {
const option = chartRef.value
chartRef.value = option
})
return { chartRef, option: optionRef, state4 }
}
export function Chart6() {
const chartRef = ref()
const optionRef = ref<any>({})
let nameX: string[]
async function getDat() {
const { data } = await rateHistoryStat({
currencyCodeFrom: state5.currencyCodeFrom,
currencyCodeTo: state5.currencyCodeTo,
type: state5.type,
dateList: state5.dateList
})
const dat = (data[state5.currencyCodeFrom + '-' + state5.currencyCodeTo] || []).map(
(item: any) => (item == 0 ? null : item)
)
const option = {
// width: '250px', // 设置图表宽度为 800 像素
// height: '150px', // 设置图表高度为 400 像素
grid: {
left: '10',
top: 90,
right: '10',
bottom: '10',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
// legend: {
// data:state5.currencyCodeFrom-state5.currencyCodeTo,
// right: 20,
// top: 10,
// },
xAxis: {
type: 'category',
data: nameX
},
yAxis: {
type: 'value'
},
series: [
{
name: state5.currencyCodeFrom + '-' + state5.currencyCodeTo,
data: dat,
color: '#89DF75',
type: 'line',
smooth: true,
showDataShadow: true,
connectNulls: true
}
]
}
optionRef.value = option
}
const ss = computed(() => [
state5.currencyCodeFrom,
state5.currencyCodeTo,
state5.startTime,
state5.endTime
])
watch(
() => unref(ss),
async (v) => {
const { type, list } = calculateDateIntervals(state5.startTime, state5.endTime)
nameX = list
state5.dateList = list
state5.type = type
// getDat()
},
{ immediate: true, deep: true }
)
watchEffect(() => {
const option = chartRef.value
chartRef.value = option
})
return { chartRef, option: optionRef, state5 }
}

123
src/views/home/market/MarketData.ts
View File

@ -1,77 +1,82 @@
import { historyStat,rateHistoryStat,historyMarketSevenDay,historyStatSevenDay} from '@/api/daikin/base'
import {
historyStat,
rateHistoryStat,
historyMarketSevenDay,
historyStatSevenDay
} from '@/api/daikin/base'
import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import {calculateDateIntervals} from '@/utils/format'
import { calculateDateIntervals } from '@/utils/format'
const state = reactive<any>({
type: 'Cu',
type: 'Cu'
})
const state1 = reactive<any>({
currencyCodeFrom:'CNA',
currencyCodeTo:'USD',
currencyCodeFrom: 'CNA',
currencyCodeTo: 'USD'
})
const state2 = reactive<any>({
currencyCodeFrom:'CNA',
currencyCodeTo:'USD',
currencyCodeFrom: 'CNA',
currencyCodeTo: 'USD'
})
const state3 = reactive<any>({
currencyCodeFrom:'USD',
currencyCodeTo:'CNA',
currencyCodeFrom: 'USD',
currencyCodeTo: 'CNA'
})
const state4 = reactive<any>({
number:'Cu',
number: 'Cu',
type: '2',
dateList:calculateDateIntervals('','').list,
startTime:'',
endTime:'',
dateList: calculateDateIntervals('', '').list,
startTime: '',
endTime: ''
})
const state5 = reactive<any>({
currencyCodeFrom:'CNA',
currencyCodeTo:'JPY',
currencyCodeFrom: 'CNA',
currencyCodeTo: 'JPY',
type: '2',
dateList:calculateDateIntervals('','').list,
startTime:'',
endTime:'',
dateList: calculateDateIntervals('', '').list,
startTime: '',
endTime: ''
})
function getDay(){
const today = new Date();
const pastSevenDays = [];
function getDay() {
const today = new Date()
const pastSevenDays = []
for (let i = 6; i >= 0; i--) {
const date = new Date(today);
date.setDate(today.getDate() - i);
pastSevenDays.push(date.toISOString().split('T')[0]);
const date = new Date(today)
date.setDate(today.getDate() - i)
pastSevenDays.push(date.toISOString().split('T')[0])
}
return pastSevenDays;
return pastSevenDays
}
function reverseArray(inputArray: string | any[],star: number,enc: number) {
const reversedArray = [];
function reverseArray(inputArray: string | any[], star: number, enc: number) {
const reversedArray = []
for (let i = 0; i <= inputArray.length - 1; i++) {
reversedArray.push(inputArray[i].substring(star,enc));
reversedArray.push(inputArray[i].substring(star, enc))
}
return reversedArray;
return reversedArray
}
export function Chart1() {
export function Chart1(type = state.type) {
const chartRef = ref()
const optionRef = ref()
getDat()
async function getDat() {
const { data } = await historyMarketSevenDay({ number: state.type })
const { data } = await historyMarketSevenDay({ number: type })
if (!data) return
let { LME, SMM } = data[state.type]
let { LME, SMM } = data[type]
SMM = SMM.map((item: any) => (item == 0 ? null : item))
LME = LME.map((item: any) => (item == 0 ? null : item))
const option = {
height: '150px', // 设置图表高度为 400 像素
// width: '100%', // 设置图表宽度为 800 像素
// height: '150px', // 设置图表高度为 400 像素
grid: {
left: '10',
top: 90,
top: 60,
right: '10',
bottom: '10',
containLabel: true
@ -128,15 +133,15 @@ export function Chart1() {
}
optionRef.value = option
}
const ss = computed(() => [state.type])
watch(
() => unref(ss),
async (v) => {
console.log(state.type)
getDat()
},
{ immediate: true, deep: true }
)
// const ss = computed(() => [state.type])
// watch(
// () => unref(ss),
// async (v) => {
// console.log(state.type)
// getDat()
// },
// { immediate: true, deep: true }
// )
watchEffect(() => {
const option = chartRef.value
chartRef.value = option
@ -155,9 +160,9 @@ export function Chart3() {
currencyCodeTo: state2.currencyCodeTo
})
if (!data) return
const dat = (
data[state2.currencyCodeFrom + '-' + state2.currencyCodeTo] || []
).map((item: any) => (item == 0 ? null : item))
const dat = (data[state2.currencyCodeFrom + '-' + state2.currencyCodeTo] || []).map(
(item: any) => (item == 0 ? null : item)
)
const option = {
height: '150px', // 设置图表高度为 400 像素
@ -227,9 +232,9 @@ export function Chart4() {
currencyCodeTo: state3.currencyCodeTo
})
if (!data) return
const dat = (
data[state3.currencyCodeFrom + '-' + state3.currencyCodeTo] || []
).map((item: any) => (item == 0 ? null : item))
const dat = (data[state3.currencyCodeFrom + '-' + state3.currencyCodeTo] || []).map(
(item: any) => (item == 0 ? null : item)
)
const option = {
grid: {
@ -371,10 +376,7 @@ export function Chart5() {
() => unref(ss),
async (v) => {
// console.log(calculateDateIntervals(state4.startTime,state4.endTime),88888)
const { type, list } = calculateDateIntervals(
state4.startTime,
state4.endTime
)
const { type, list } = calculateDateIntervals(state4.startTime, state4.endTime)
nameX = list
state4.dateList = list
state4.type = type
@ -402,9 +404,9 @@ export function Chart6() {
type: state5.type,
dateList: state5.dateList
})
const dat = (
data[state5.currencyCodeFrom + '-' + state5.currencyCodeTo] || []
).map((item: any) => (item == 0 ? null : item))
const dat = (data[state5.currencyCodeFrom + '-' + state5.currencyCodeTo] || []).map(
(item: any) => (item == 0 ? null : item)
)
const option = {
// width: '250px', // 设置图表宽度为 800 像素
// height: '150px', // 设置图表高度为 400 像素
@ -453,10 +455,7 @@ export function Chart6() {
watch(
() => unref(ss),
async (v) => {
const { type, list } = calculateDateIntervals(
state5.startTime,
state5.endTime
)
const { type, list } = calculateDateIntervals(state5.startTime, state5.endTime)
nameX = list
state5.dateList = list

640
src/views/home/market/Market_new.vue Executable file
View File

@ -0,0 +1,640 @@
<!-- 市况 -->
<script setup lang="ts">
import { Chart1, Chart3, Chart4, Chart5, Chart6 } from './MarketData-new'
import HomeHead from '@/views/home/components/HomeHead.vue'
import AppBlock from '@/components/AppBlock.vue'
import AppNewsBox from '@/components/AppNewsBox.vue'
// import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
import { useDate } from '@/views/home/hooks/useDate'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { getList, marketPreADD, getMarketUser, saveMarketUser, MarketDownload, MarketPreview, getCurrencyList, getMetalList, fetchExchangeInfo,fetchTimeFuturecenterCu,fetchTimeFuturecenterAl } from '@/api/daikin/base'
import { NModal, NCard } from 'naive-ui'
import { formatDate } from '@/utils/format'
import { message } from '@/utils/message'
import { useUserStore } from '@/stores/modules/user'
import UserList from '@/views/home/intelligence/process/UserPages.vue'
import Amtion from '@/components/amtion.vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
LegendComponent,
TooltipComponent,
GridComponent,
TitleComponent,
} from 'echarts/components'
import { PieChart, BarChart, LineChart, CandlestickChart } from 'echarts/charts'
import { noticeld } from '@/stores/modules/noticeId'
const store = useUserStore()
const stores = noticeld()
const userCode = ['admin', 'shikuang_dandang', 'tech_service'].some((item) =>
store.user.roleCode?.includes(item)
)
const userCodes = ['admin', 'huilv_dandang', 'tech_service'].some((item) =>
store.user.roleCode?.includes(item)
)
use([
CanvasRenderer,
LegendComponent,
TooltipComponent,
GridComponent,
TitleComponent,
PieChart,
BarChart,
LineChart,
CandlestickChart
])
const { day, week } = useDate()
const { push } = useRouter()
const currentDate = new Date();
const currentDates = new Date();
const value1 = ref<[Date, Date]>([
currentDate.setMonth(currentDate.getMonth() - 11),
new Date()
])
const value2 = ref<[Date, Date]>([
currentDates.setMonth(currentDates.getMonth() - 11),
new Date()
])
const { chartRef: chartRef1, option: chartOption1, state } = Chart1()
const { option: chartOption11 } = Chart1('Al')
const { chartRef: chartRef3, option: chartOption3, state2 } = Chart3()
const { chartRef: chartRef4, option: chartOption4, state3 } = Chart4()
// const { chartRef: chartRef5, option: chartOption5, state4 } = Chart5()
const { state4 } = Chart5()
const { chartRef: chartRef6, option: chartOption6, state5 } = Chart6()
const listData = ref()
const listDatas = ref()
async function getData() {
const { data } = await getList({ type: 2 })
const { data: ds } = await getList({ type: 1 })
listData.value = data
listDatas.value = ds
}
const metal = ref()
const currency = ref()
onMounted(async () => {
getData()
const { data } = await getCurrencyList()
const { data: dat } = await getMetalList()
if (dat && dat != 'null' && dat.length > 0) {
metal.value = dat
// .filter((item:any) => {
// if(["Fe","lengmei"].includes(item.value)){
// return false
// }else return item
// })
from.value.label.radio = dat[0].value
state4.number = dat[0].value
console.log("🚀 ~ file: Market.vue:56 ~ metal:", metal)
}
if (data && data != 'null' && data.length > 0) {
currency.value = data
from.value.labe2.radio = data[0].value
const dat = data[0].value.split(',')
state5.currencyCodeFrom = dat[0]
state5.currencyCodeTo = dat[1]
state2.currencyCodeFrom = dat[0]
state2.currencyCodeTo = dat[1]
state3.currencyCodeFrom = dat[0]
state3.currencyCodeTo = dat[1]
}
})
const src = ref('');
const srcType = ref()
const showModalRef2 = ref(false)
const lokeFuck = async (n) => {
const { id } = n
if (!id) return
let { data: { url } } = await MarketPreview({ id })
if (!url) {
message.info("没有可预览文件！")
return
}
srcType.value = getLastSubstring(url)
if (['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'pdf'].includes(srcType.value)) {
// src.value = filePath
// pdfShow.value = true
url = 'https://view.xdocin.com/view?src=' + url
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
window.open(url, '', 'width=' + screenWidth + ',height=' + screenHeight + ',top=' + 0 + ',left=' + 0)
}
else {
message.error("文件格式不是 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'！")
}
}
function getLastSubstring(str: string): string {
const lastIndex = str.lastIndexOf('.');
if (lastIndex !== -1) {
return str.substring(lastIndex + 1);
} else {
return '';
}
}
async function downloadFile(data: { id: any; title: string }) {
console.log(data)
if (!data.id) return
try {
const response = await MarketDownload({ id: data.id })
console.log(response)
var blob = new Blob([response.data]);
const downloadUrl = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = downloadUrl;
link.download = response.fileName; // 替换为你要保存的文件名
link.click();
URL.revokeObjectURL(downloadUrl);
} catch (error) {
message.error(error);
}
}
const tab = ref(false)
const tab1 = ref(false)
const tab2 = ref(false)
const names = ref('Cu')
const names1 = ref('100USD-CNY')
const names2 = ref('100USD-CNY')
const tabClick1 = (e) => {
console.log(e.target.getAttribute('data-id'))
tab1.value = false
const dat = e.target.getAttribute('data-id').split(',')
names1.value = e.target.innerText
state2.currencyCodeFrom = dat[0]
state2.currencyCodeTo = dat[1]
}
const tabClick2 = (e) => {
console.log(e.target.getAttribute('data-id'))
tab2.value = false
const dat = e.target.getAttribute('data-id').split(',')
names2.value = e.target.innerText
state3.currencyCodeFrom = dat[0]
state3.currencyCodeTo = dat[1]
}
const tabClick = (e) => {
console.log(e.target)
tab.value = false
state.type = e.target.getAttribute('data-id')
// names.value =e.target.innerText
}
const tabShow = (num) => {
// console.log(num)
switch (num) {
case 0:
tab.value = tab.value === false ? true : false
break;
case 1:
tab1.value = tab1.value === false ? true : false
break;
case 2:
tab2.value = tab2.value === false ? true : false
break;
}
}
const from = ref({
label: {
radio: ''
},
labe2: {
radio: ''
}
})
const shomk = ref(false)
const sdubList = ref({
title: '',
fileList: [],
})
const shomks = (it) => {
sdubList.value.type = it
// console.log(sdubList.value)
shomk.value = true
}
async function onSubmit() {
const { type, title, fileList } = sdubList.value
let filePath
if (fileList.length > 0) {
// console.log(fileList)
filePath = fileList[0].response.url
}
const { msg, code } = await marketPreADD({ type, title, filePath })
if (code === 200) { message.success("修改成功") }
else message.warning(msg)
window.location.reload();
// console.log(sdubList.value)
}
const handleExceed: UploadProps['onExceed'] = (uploadFile: any, uploadFiles: any) => {
message.warning("当前只支持上传一个文件")
}
const thisCka = (e) => {
if (value1.value) {
state4.startTime = formatDate(value1.value[0]).substring(0, 10)
state4.endTime = formatDate(value1.value[1]).substring(0, 10)
}
state4.number = e
console.log(e)
}
const thisCka2 = (e) => {
const dat = e.split(',')
if (value2.value) {
state5.startTime = formatDate(value2.value[0]).substring(0, 10)
state5.endTime = formatDate(value2.value[1]).substring(0, 10)
}
state5.currencyCodeFrom = dat[0]
state5.currencyCodeTo = dat[1]
}
const timenFirst = (e) => {
// console.log(e)
state4.startTime = formatDate(value1.value[0]).substring(0, 10)
state4.endTime = formatDate(value1.value[1]).substring(0, 10)
}
const timenFirsts = (e) => {
// console.log(e)
state5.startTime = formatDate(value2.value[0]).substring(0, 10)
state5.endTime = formatDate(value2.value[1]).substring(0, 10)
}
const header = { 'token': store.user.token }
const showModal = ref(false)
const flg = ref()
const setUserList = ref()
async function getUser(moduleId: any) {
showModal.value = !showModal.value
flg.value = moduleId
const { data: userArr } = await getMarketUser({ moduleId })
stores.article.reviewSource = '2'
setUserList.value = userArr
}
// 获取子组件传过来的值
const handleChild = (data: any) => {
console.log(data, 444);
const { showModal: show, multipleSelection } = data
showModal.value = unref(show)
// userList.value = multipleSelection
let userIdList: any[] = []
multipleSelection.value.forEach((i: { userId: any }) => {
// console.log(dataList.value)
userIdList.push(i.userId)
})
saveMarketUser({
moduleId: flg.value,
userIdList: userIdList
})
}
const CloseThiss = (data: boolean) => {
showModal.value = data
}
getHomeExInfo()
// getTimeFuturecenter()
const homeExchangeInfo = ref<any>([])
async function getHomeExInfo() {
const { data } = await fetchExchangeInfo()
homeExchangeInfo.value = data
console.log('🚀 ~ file: Home.vue:252 ~ }):', data)
}
async function getTimeFuturecenter() {
const { data } = await fetchTimeFuturecenterCu()
console.log("🚀 ~ file: Market.vue:293 ~ data:", data)
}
</script>
<template>
<HomeHead class="top">
<template #content>
<!-- <HomeHeadSearch /> -->
</template>
</HomeHead>
<div class="h-full relative flex flex-col overflow-y-auto scrollbar-width-1px">
<div class="pl12px mt30px flex w-full h-full gap-30px">
<!-- <img src="./images/shukuang.png" alt="" class="w-full h-full"> -->
<AppBlock class="flex-1 box">
<div class="box-title">市况</div>
<el-button type="primary" v-if="userCode" class="button !mr-30px !mt-[-30px] z-100"
@click="push({ name: 'MarketDataModify' })">数据管理</el-button>
<div class="bgStyle !h380px mt20px">
<div class=" relative w100%">
<span @click="tabShow(0)" class="title bg-#70BFCD pl18px pr24px">{{ names }}
<!-- <el-icon><CaretBottom /></el-icon> -->
</span>
<!-- <span class="absolute right-160px top-14px z-30 text-#000">最近7天数据</span> -->
<div v-if="false && tab"
class="tab absolute bg-#fff w100px top-50px z-50 text-#112144 text-center leading-28px text-18px ">
<div v-if="metal"
v-for="im in metal.filter((item: any) => !['Fe', 'lengmei'].includes(item.value))"
class="py5px !rounded-none" :data-id="im.value" @click="tabClick">{{ im.title }}</div>
<!-- <div class="py5px !rounded-none" data-id="Fe" @click="tabClick">Fe</div>
<div class="py5px !rounded-none" data-id="Cu" @click="tabClick">Cu</div>
<div class="py5px !rounded-none" data-id="Re" @click="tabClick">稀土</div> -->
</div>
<VChart class="absolute z-22 left-0 right-0 !w-full" ref="chartRef1" :option="chartOption1"
autoresize />
</div>
<!-- <div>
<span class="title bg-#70BFCD p5px pl10px !pr25px">AI</span>
<VChart class="absolute z-22" ref="chartRef2" :option="chartOption2" autoresize />
</div> -->
</div>
<div class="bgStyle !h380px mt10px">
<div class=" relative w100%">
<span class="title bg-#FF960F pl18px pr28px">{{ 'AI' }}
<!-- <el-icon><CaretBottom /></el-icon> -->
</span>
<!-- <span class="absolute right-160px top-14px z-30 text-#000">最近7天数据</span> -->
<VChart class="absolute z-22 left-0 right-0 !w-full" ref="chartRef11" :option="chartOption11"
autoresize />
</div>
<!-- <div>
<span class="title bg-#70BFCD p5px pl10px !pr25px">AI</span>
<VChart class="absolute z-22" ref="chartRef2" :option="chartOption1" autoresize />
</div> -->
</div>
<div class="mt8px ml10px">
<div class="flex justify-between items-center">
<el-popover placement="top-end" trigger="click" :popper-style="{ width: '590px',borderRadius:'10px' }"
:teleported="true">
<template #reference>
<div
class="bg-gr h-42px w115px ml-auto flex justify-center items-center text-#fff rounded-10px text-18px cursor-pointer font-bold">
市况预测 <el-icon class="rotate-270deg">
<CaretBottom />
</el-icon></div>
</template>
<!-- <Teleport to="v-screen-box"> -->
<!-- <VScaleScreen
ref="fitscreenRef"
:width="1920"
:height="1080"
mode="fit"
> -->
<div class="bgStyle !h-284px w-690px mt15px mb10px">
<div class="w-full">
<span class="title bg-#003BB7 !text-16px pl13px pr20px b">市况预测</span>
<!-- <el-button type="primary" v-if="userCode" class="button" @click="getUser(1)">查看范围</el-button> -->
<el-button type="primary" size="small" v-if="userCode" class="button !mr-2%"
@click="push({ name: 'MarketModifys' })">管理</el-button>
<p class="mt40px p15px !border-none max-h250px overflow-auto">
<p class="!border-none w-98% !flex items-center pb10px news-item !pr30rpx"
v-for="n in listDatas" :key="n">
<AppNewsBox class="flex-1 !border-none" :text="n.title" :date="n.createTime" />
<p class="flex-shrink flex !border-none w35px ml20px">
<el-button size="small" type="primary" @click="lokeFuck(n)">预览</el-button>
<!-- <el-button type="primary" @click="downloadFile(n)">下载</el-button> -->
</p>
</p>
</p>
</div>
</div>
<!-- </VScaleScreen> -->
<!-- </Teleport> -->
</el-popover>
</div>
</div>
</AppBlock>
<AppBlock class="flex-1 box">
<div class="box-title ">汇率</div>
<div class="bgStyle !h250px mt20px">
<div class="mr25px">
<span @click="tabShow(1)"
class="title bg-#FF603A !text-16px pl13px pr20px ">{{ names1 }}<el-icon>
<CaretBottom />
</el-icon></span>
<div v-if="tab1"
class="tab absolute bg-#fff w100px top-40px z-50 text-#112144 text-center leading-28px text-16px ">
<div v-if="currency" v-for="it in currency" class="py5px !rounded-none" :data-id="it.value"
@click="tabClick1">{{ it.title }}</div>
<!-- <div class="py5px !rounded-none" data-id="CNA,USD" @click="tabClick1">人民币-美元</div>
<div class="py5px !rounded-none" data-id="JPY,USD" @click="tabClick1">日元-美元</div> -->
</div>
<VChart class=" absolute z-22" ref="chartRef3" :option="chartOption3" autoresize />
</div>
<div>
<span @click="tabShow(2)"
class="title bg-#70BFCD !text-16px pl13px pr20px ">{{ names2 }}<el-icon>
<CaretBottom />
</el-icon></span>
<div v-if="tab2"
class="tab absolute bg-#fff w100px top-40px z-50 text-#112144 text-center leading-28px text-16px ">
<div v-if="currency" v-for="it in currency" class="py5px !rounded-none" :data-id="it.value"
@click="tabClick2">{{ it.title }}</div>
<!-- <div class="py5px !rounded-none" data-id="CNA,USD" @click="tabClick2">人民币-美元</div>
<div class="py5px !rounded-none" data-id="JPY,USD" @click="tabClick2">日元-美元</div> -->
</div>
<VChart class="absolute z-22" ref="chartRef4" :option="chartOption4" autoresize />
</div>
</div>
<div class="bgStyle !h250px mt10px">
<div>
<span class="title bg-#003BB7 !text-16px pl13px pr20px ">历年数据</span>
<VChart class=" absolute z-22" ref="chartRef6" :option="chartOption6" autoresize />
</div>
</div>
<div class="mt10px ml10px">
<div class="flex items-center w-45%">
<span class="text-#000 whitespace-nowrap">日期:</span>
<el-config-provider :locale="zhCn">
<el-date-picker v-model="value2" type="daterange" range-separator="到"
start-placeholder="开始时间" end-placeholder="结束时间" size="small"
@change="timenFirsts" /></el-config-provider>
</div>
<div class="h-30px">
<el-radio-group v-model="from.labe2.radio" class="ml-4" @change="thisCka2">
<el-radio v-if="currency" v-for="it in currency" :label="it.value"
size="large">{{ it.title }}</el-radio>
<!-- <el-radio label="JPY,USD" size="large" >日元-美元</el-radio>
<el-radio label="CNA,USD" size="large" >人民币-美元</el-radio> -->
</el-radio-group>
</div>
</div>
<div class="bgStyle !h230px mt15px mb10px">
<div>
<span class="title bg-#003BB7 !text-16px pl13px pr20px ">汇率预测</span>
<!-- <el-button type="primary" v-if="userCode" class="button" @click="getUser(2)">查看范围</el-button> -->
<el-button type="primary" v-if="userCodes" class="button"
@click="push({ name: 'MarketModify' })">管理</el-button>
<p class="mt40px p15px !border-none max-h-full overflow-auto">
<p class="!border-none w615px !flex items-center pb10px news-item " v-for="n in listData"
:key="n">
<AppNewsBox class="flex-1 !border-none" :text="n.title" :date="n.createTime" />
<p class="flex-shrink flex !border-none w35px ml20px">
<el-button type="primary" @click="lokeFuck(n)">预览</el-button>
<!-- <el-button type="primary" @click="downloadFile(n)">下载</el-button> -->
</p>
</p>
</p>
</div>
</div>
</AppBlock>
</div>
</div>
<!-- <div style="width: 1200px; height:800px ; position: fixed; z-index: 100; top:50px;;">
</div> -->
<n-modal :mask-closable="true" v-model:show="showModalRef2">
<div class="w90% h90% ">
<Amtion :data="src" :datas="srcType" />
</div>
</n-modal>
<n-modal v-model:show="shomk">
<div class="py40px px30px bg-#fff">
<el-form :model="sdubList" label-width="120px" :inline="true">
<el-form-item label="标题">
<el-input v-model="sdubList.title" />
</el-form-item>
<br>
<el-form-item label="文件">
<el-upload v-model:file-list="sdubList.fileList" class="upload-demo" :headers="header"
action="/test-api/common/upload" :on-change="handleChange">
<el-button type="primary">选择文件</el-button>
</el-upload>
</el-form-item>
<br>
<br>
<el-form-item class="ml80px">
<el-button type="primary" @click="onSubmit">提交</el-button>
</el-form-item>
</el-form>
</div>
</n-modal>
<n-modal v-model:show="showModal">
<UserList :userDataList="setUserList" @clickChild="handleChild" @CloseThis="CloseThiss" />
</n-modal>
</template>
<style scoped lang="less">
.bg-gr {
background: linear-gradient(to left, #34A6D9 0%, #23D1C6 100%);
}
.button {
display: block;
float: right;
margin-right: 20px;
}
::-webkit-scrollbar {
width: 1px;
}
.top {
position: absolute;
right: 30px;
top: -92px;
}
.date-wrapper[data-v-c5c4f420] {
line-height: 1.5;
position: relative;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
color: #142142;
border: none;
}
.tab {
div:hover {
color: #0036BC;
}
}
.box {
padding: 23px 20px 0 20px;
.box-title {
font-size: 28px;
font-weight: 600;
position: relative;
padding-left: 24px;
color: black;
&::before {
content: " ";
display: block;
width: 8px;
height: 30px;
background-color: #003ab5;
position: absolute;
left: 0;
}
}
}
.bgStyle {
display: flex;
width: 100%;
height: 270px;
position: relative;
padding: 0 5px;
div {
flex: 1;
border: 1px solid rgb(236, 236, 236);
border-radius: 18px;
.title {
// width: 60px;
// height: 60px;
border-radius: 18px 0 50px 0;
color: aliceblue;
line-height: 40px;
font-size: 24px;
font-weight: 500;
z-index: 1;
position: absolute;
}
}
}
</style>