市况汇率
parent
a3d6077599
commit
b4f9d35de0
|
|
@ -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 })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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('暂无文件')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -7,21 +7,21 @@ 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) =>
|
||||
store.user.roleCode?.includes(item)
|
||||
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 userCodes = ['admin', 'huilv_dandang', 'tech_service'].some((item) =>
|
||||
store.user.roleCode?.includes(item)
|
||||
)
|
||||
const { day, week } = useDate()
|
||||
const { push } = useRouter()
|
||||
|
|
@ -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,218 +67,233 @@ 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]
|
||||
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) {
|
||||
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
|
||||
const screenWidth = window.screen.width;
|
||||
const screenHeight = window.screen.height;
|
||||
window.open(url, '', 'width=' + screenWidth + ',height=' + screenHeight + ',top=' + 0 + ',left=' + 0)
|
||||
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'！")
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
function getLastSubstring(str: string): string {
|
||||
const lastIndex = str.lastIndexOf('.');
|
||||
if (lastIndex !== -1) {
|
||||
return str.substring(lastIndex + 1);
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
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 {
|
||||
if (!data.id) return
|
||||
try {
|
||||
const response = await MarketDownload({ id: data.id })
|
||||
console.log(response)
|
||||
var blob = new Blob([response.data]);
|
||||
|
||||
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) {
|
||||
} 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 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 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 tabClick = (e) => {
|
||||
|
||||
console.log(e.target)
|
||||
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
|
||||
case 1:
|
||||
tab1.value = tab1.value === false ? true : false
|
||||
break;
|
||||
case 2:
|
||||
tab2.value = tab2.value === false?true:false
|
||||
case 2:
|
||||
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();
|
||||
// console.log(sdubList.value)
|
||||
}
|
||||
const handleExceed: UploadProps['onExceed'] = (uploadFile: any, uploadFiles: any) => {
|
||||
message.warning("当前只支持上传一个文件")
|
||||
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})
|
||||
stores.article.reviewSource = '2'
|
||||
setUserList.value = userArr
|
||||
|
||||
showModal.value = !showModal.value
|
||||
flg.value = 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 })=>{
|
||||
// console.log(dataList.value)
|
||||
userIdList.push(i.userId)
|
||||
})
|
||||
|
||||
saveMarketUser({
|
||||
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
|
||||
}
|
||||
})
|
||||
}
|
||||
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,77 +308,126 @@ 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%">
|
||||
|
||||
<span @click="tabShow(0)" class="title bg-#FF603A p5px pl10px pr20px">{{names}}<el-icon><CaretBottom /></el-icon></span>
|
||||
<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%">
|
||||
|
||||
<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>
|
||||
<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" 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>
|
||||
|
||||
<span class="text-#000">日期:</span>
|
||||
<div class="mt8px 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="value1" type="daterange" range-separator="到"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" size="small" @change="timenFirst"/></el-config-provider>
|
||||
<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">
|
||||
<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>
|
||||
<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" />
|
||||
<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" 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>
|
||||
</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 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,44 +453,48 @@ 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>
|
||||
|
||||
<span class="text-#000">日期:</span>
|
||||
<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>
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -429,9 +503,9 @@ async function getUser(moduleId: any) {
|
|||
<!-- <div style="width: 1200px; height:800px ; position: fixed; z-index: 100; top:50px;;">
|
||||
|
||||
</div> -->
|
||||
<n-modal :mask-closable="true" v-model:show="showModalRef2">
|
||||
<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>
|
||||
|
|
@ -439,54 +513,59 @@ async function getUser(moduleId: any) {
|
|||
|
||||
<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-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>
|
||||
|
||||
</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>
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
}
|
||||
|
|
@ -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 }
|
||||
}
|
||||
|
|
@ -1,473 +1,472 @@
|
|||
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;
|
||||
}
|
||||
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 }
|
||||
return reversedArray
|
||||
}
|
||||
export function Chart1(type = state.type) {
|
||||
const chartRef = ref()
|
||||
const optionRef = ref()
|
||||
getDat()
|
||||
async function getDat() {
|
||||
const { data } = await historyMarketSevenDay({ number: type })
|
||||
if (!data) return
|
||||
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 = {
|
||||
// width: '100%', // 设置图表宽度为 800 像素
|
||||
// height: '150px', // 设置图表高度为 400 像素
|
||||
grid: {
|
||||
left: '10',
|
||||
top: 60,
|
||||
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>({})
|
||||
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))
|
||||
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'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
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 }
|
||||
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>({})
|
||||
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))
|
||||
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
|
||||
},
|
||||
const option = {
|
||||
grid: {
|
||||
left: '10',
|
||||
top: 90,
|
||||
right: '10',
|
||||
bottom: '10',
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
height: '150px', // 设置图表高度为 400 像素
|
||||
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'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
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)
|
||||
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 }
|
||||
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 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 }
|
||||
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>({})
|
||||
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
|
||||
)
|
||||
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 }
|
||||
}
|
||||
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 }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue