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

市况汇率

main
wenlong 2024-08-18 11:48:30 +08:00
parent 9384b096b2
commit ccdf3b458f
10 changed files with 437 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components.d.ts vendored
View File

@ -33,8 +33,10 @@ declare module 'vue' {
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']

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

@ -1459,9 +1459,14 @@ export async function fetchExchangeInfo(params?: any) {
// 获取分时数据 --沪铜主连
export async function fetchTimeFuturecenterCu(params?: any) {
return http.get(`/marketPre/getTimeFuturecenter/cu0000`, { params })
return http.get(`/marketPre/getTimeFuturecenter/${params.type}`)
}
// 获取分时数据 --沪铜主连
export async function fetchTimeFuturecenterAl(params?: any) {
return http.get(`/marketPre/getTimeFuturecenter/al0000`, { params })
return http.get(`/marketPre/getTimeFuturecenter/${params.type}`)
}
// 获取SMM/LEM 更新时间
export async function fetchMarketUpdateTime(params?: any) {
return http.get(`/marketPre/getLastTime`, { params })
}

1
src/router/index.ts
View File

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

1
src/types/auto-import.d.ts vendored
View File

@ -5,7 +5,6 @@
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
const computed: typeof import('vue')['computed']

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

@ -12,7 +12,8 @@ import {
getHomeList,
amountList,
fetchHomeSmmExInfo,
fetchExchangeInfo
fetchExchangeInfo,
fetchMarketUpdateTime
} from '@/api/daikin/base'
import { useUserStore } from '@/stores/modules/user'
import { groupBy } from 'lodash-es'
@ -262,7 +263,7 @@ function formatNumber(num = 0) {
return `${wholePart}.${formattedDecimalPart}`
}
const homeSmmExInfo = ref<any>({})
const homeSmmExInfo = ref<any>({铜:[],铝:[]})
async function getHomeSmmExInfo() {
const { data } = await fetchHomeSmmExInfo()
console.log("🚀 ~ file: Home.vue:268 ~ data:", groupBy(data,'instrumentName'))
@ -275,6 +276,14 @@ async function getHomeExInfo() {
homeExchangeInfo.value = data
console.log('🚀 ~ file: Home.vue:252 ~ }):', data)
}
getLastTime()
const updateTime = ref<any>({})
async function getLastTime() {
const { data } = await fetchMarketUpdateTime()
// homeExchangeInfo.value = data
updateTime.value = data
}
</script>
<template>
@ -437,8 +446,8 @@ async function getHomeExInfo() {
<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 class="text- flex justify-end">更新时间：<p class="min-w-100px text-start">{{ updateTime.SMM }}</p > (SMM)</div>
<div class="text- my4px flex justify-end"><p class="min-w-100px text-start">{{ updateTime.LME }}</p> (LME)</div>
</div>
</div>
<table
@ -484,15 +493,15 @@ async function getHomeExInfo() {
<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>
<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>
<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>

0
src/views/home/Home.vue.bak → src/views/home/Home.vue-b
View File

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

@ -117,7 +117,7 @@ const getPartStatisRate = async (date?: Date) => {
return { name: item.part, value: item.amount }
})
option.value.graphic.style.text = '总计' + '\n' + formatNum(total) + '\n' + '千元'
option.value.graphic.style.text = '总计' + '\n' + formatNum(total) + '\n' + '百万元'
option.value.graphic.style.text = '总计' + '\n' + formatNum(total) + '\n' + '千元'
}
// 生产随机数
const randomData = () => {
@ -150,7 +150,7 @@ const getPartHisList = async () => {
data: data
.filter((ite: any) => ite.part === item)
.sort((a, b) => +a.year - +b.year)
.map((item: any) => item.amount || 0)
.map((item: any) => (item.amount ? item.amount.toFixed(0) : 0))
}
})
option2.value.series = seriesList
@ -186,7 +186,7 @@ const getPartmaxBusSeedsRate = async () => {
data: data
.filter((ite: any) => ite.maxBusSeeds === item)
.sort((a, b) => +a.year - +b.year)
.map((item: any) => item.amount || 0)
.map((item: any) => (item.amount ? item.amount.toFixed(0) : 0))
}
})
}
@ -203,7 +203,7 @@ const getPartminBusSeedsRate = async (date?: Date) => {
})
optionMin.value.series[0].data = data.map((item: any) => {
total += item.amount
return { name: item.minBusSeeds, value: item.amount }
return { name: item.minBusSeeds, value: item.amount ? item.amount.toFixed(0) : 0 }
})
optionMin.value.graphic.style.text = '总计' + '\n' + formatNum(total) + '\n' + '千元'
}
@ -235,7 +235,7 @@ const getPartmaxBusSeedsRate2 = async (max = '') => {
data: data
.filter((ite: any) => ite[showSupplier.value ? 'supplier' : 'minBusSeeds'] === item)
.sort((a, b) => +a.year - +b.year)
.map((item: any) => item.amount || 0)
.map((item: any) => (item.amount ? item.amount.toFixed(0) : 0))
}
})
maxBusSeedsOption.value[max].series = serieList

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

@ -27,7 +27,7 @@ export function totalPieCharData(arr: any = [], colorList: any = {}) {
formatNum(params.data.value) +
'\n' +
'(' +
params.percent +
params.percent.toFixed(0) +
'%' +
')'
)
@ -72,7 +72,10 @@ export function totalPieCharData(arr: any = [], colorList: any = {}) {
show: true,
color: '#fff',
fontSize: 12,
formatter: '{b} ({d}%)'
// formatter: '{b} ({d}%)'
formatter: function (params: any) {
return params.data.name + ': ' + params.percent.toFixed(0) + '%'
}
// position: 'center'
},
// emphasis: {
@ -96,13 +99,13 @@ export function totalPieCharData(arr: any = [], colorList: any = {}) {
export function totalBarCharData(params: any = {}) {
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
trigger: 'axis'
// axisPointer: {
// type: 'cross',
// crossStyle: {
// color: '#999'
// }
// }
},
legend: {
// type: 'scroll',
@ -167,10 +170,12 @@ export function totalBarCharData(params: any = {}) {
// nameLocation: 'left',
// nameGap: 50,
axisLine: {
show: false,
lineStyle: {
color: '#1f78af',
width: 2 //y轴宽度，这里是为了突出显示加上的
}
},
onZero: false
}
},
{
@ -200,6 +205,13 @@ export function disBarCharData(params: any = {}) {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
// position: function (pos, params, el, elRect, size) {
// const obj: any = {
// top: -10
// }
// obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30
// return obj
// }
},
legend: {
left: 'center',

286
src/views/home/market/MarketData-new.ts
View File

@ -66,23 +66,35 @@ function reverseArray(inputArray: string | any[], star: number, enc: number) {
return reversedArray
}
const cuType = reactive<any>({
type: 'cu0000'
})
export function Chart1(type = 'Cu') {
const chartRef = ref()
const optionRef = ref()
// const state = ref({
// type
// })
async function getDat() {
const { data = {} } =
type == 'Cu' ? await fetchTimeFuturecenterCu() : await fetchTimeFuturecenterAl()
type == 'Cu'
? await fetchTimeFuturecenterCu({ type: cuType.type })
: await fetchTimeFuturecenterAl({ type: cuType.type })
const { list = [] } = data
let xData: any = []
let lastPrice: any = []
let diff: any = []
let diffV: any = []
list.forEach((item: any) => {
xData.push(item.updateTime.substr(11, 5))
lastPrice.push(item.lastPrice)
diff.push(parseFloat(item.diffValue).toFixed(2))
diff.push(item.avgPrice)
diffV.push(parseFloat(item.diff).toFixed(2))
})
const option = {
height: '270px', // 设置图表高度为 400 像素
// height: '270px', // 设置图表高度为 400 像素
height: '140px', // 设置图表高度为 400 像素
grid: {
left: '10',
right: '10',
@ -90,12 +102,19 @@ export function Chart1(type = 'Cu') {
// bottom: '10',
containLabel: true
},
legend: {
data: ['SMM', 'LME'],
right: 20,
top: 10
},
tooltip: {
trigger: 'axis',
// position: function (pt) {
// return [pt[0], '10%']
// },
// backgroundColor: '#4c4c4c90',
zIndex: 50,
appendTo: 'body',
formatter: function (params: any) {
const { dataIndex } = params[0]
const val = list[dataIndex]
@ -103,7 +122,7 @@ export function Chart1(type = 'Cu') {
const isUp = val.diffPrice > 0
const priceStyle = isUp ? 'color: #ec0000;' : 'color: #00da3c;'
return `
<div style="width:120px">
<div style="width:120px;font-size:12px;line-height:18px;">
<div style="${style}borderBottom: 1px solid #ccc">
<span>时间:</span>
<span>${val.updateTime?.substr(11, 5)}</span>
@ -190,17 +209,18 @@ export function Chart1(type = 'Cu') {
{
type: 'value',
name: '',
min: 'dataMin',
// min: 'dataMin',
// formatter: '{value} %',
alignTicks: true,
// alignTicks: true,
// boundaryGap: [0, '100%'],
scale: true,
minInterval: 0.01,
onZero: false,
minInterval: 0.1,
axisLabel: {
// formatter: '{value}%'
formatter: function (value, index) {
return value.toFixed(1) + '%'
}
// formatter: function (value, index) {
// return value.toFixed(1) + '%'
// }
}
}
],
@ -237,28 +257,254 @@ export function Chart1(type = 'Cu') {
symbol: 'none',
yAxisIndex: 1,
// areaStyle: {},
data: diff
data: diff,
itemStyle: {
normal: {
// color: '#E08F2D',
lineStyle: {
color: '#E08F2D'
}
}
}
}
]
}
optionRef.value = option
}
// const ss = computed(() => [state.type])
// watch(
// () => unref(ss),
// async (v) => {
// console.log(state.type)
// getDat()
// },
// { immediate: true, deep: true }
// )
watch(
() => cuType,
async (v) => {
getDat()
},
{ immediate: true, deep: true }
)
// getDat()
watchEffect(() => {
const option = chartRef.value
chartRef.value = option
})
return { chartRef, option: optionRef, state }
return { chartRef, option: optionRef, cuType }
}
const alType = reactive<any>({
type: 'al0000'
})
export function Chart11(type = 'Al') {
const chartRef = ref()
const optionRef = ref()
// const state = ref({
// type
// })
async function getDat() {
const { data = {} } =
type == 'Cu'
? await fetchTimeFuturecenterCu({ type: alType.type })
: await fetchTimeFuturecenterAl({ type: alType.type })
const { list = [] } = data
let xData: any = []
let lastPrice: any = []
let diff: any = []
let diffV: any = []
list.forEach((item: any) => {
xData.push(item.updateTime.substr(11, 5))
lastPrice.push(item.lastPrice)
diff.push(item.avgPrice)
diffV.push(parseFloat(item.diff).toFixed(2))
})
const option = {
// height: '270px', // 设置图表高度为 400 像素
height: '140px', // 设置图表高度为 400 像素
grid: {
left: '10',
right: '10',
// top: 90,
// bottom: '10',
containLabel: true
},
legend: {
data: ['SMM', 'LME'],
right: 20,
top: 10
},
tooltip: {
trigger: 'axis',
// position: function (pt) {
// return [pt[0], '10%']
// },
// backgroundColor: '#4c4c4c90',
appendTo: 'body',
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;font-size:12px;line-height:18px;">
<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)]] = 100
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,
onZero: false,
minInterval: 0.1,
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,
itemStyle: {
normal: {
// color: '#E08F2D',
lineStyle: {
color: '#E08F2D'
}
}
}
}
]
}
optionRef.value = option
}
// const ss = computed(() => [state.type])
watch(
() => alType,
async (v) => {
getDat()
},
{ immediate: true, deep: true }
)
// getDat()
watchEffect(() => {
const option = chartRef.value
chartRef.value = option
})
return { chartRef, option: optionRef, alType }
}
export function Chart3() {

117
src/views/home/market/Market_new.vue
View File

@ -1,13 +1,13 @@
<!-- 市况 -->
<script setup lang="ts">
import { Chart1, Chart3, Chart4, Chart5, Chart6 } from './MarketData-new'
import { Chart1,Chart11, 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 { 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'
@ -16,6 +16,7 @@ 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 { groupBy } from 'lodash-es'
import {
LegendComponent,
TooltipComponent,
@ -57,12 +58,12 @@ 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: chartRef1, option: chartOption1, cuType } = Chart1()
const { option: chartOption11,alType } = Chart11()
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: chartRef5, option: chartOption5, state4 } = Chart5()
// const { state4 } = Chart5()
const { chartRef: chartRef6, option: chartOption6, state5 } = Chart6()
const listData = ref()
@ -304,12 +305,13 @@ const CloseThiss = (data: boolean) => {
}
getHomeExInfo()
const exchangeInfo = ref({})
// getTimeFuturecenter()
const homeExchangeInfo = ref<any>([])
async function getHomeExInfo() {
const { data } = await fetchExchangeInfo()
homeExchangeInfo.value = data
console.log('🚀 ~ file: Home.vue:252 ~ }):', data)
exchangeInfo.value = groupBy(data,'channel')
console.log('🚀 ~ file: Home.vue:252 ~ }):', exchangeInfo.value)
}
async function getTimeFuturecenter() {
@ -317,6 +319,9 @@ async function getTimeFuturecenter() {
console.log("🚀 ~ file: Market.vue:293 ~ data:", data)
}
const cuTypeChange = (e) => {
}
</script>
<template>
@ -333,13 +338,18 @@ async function getTimeFuturecenter() {
<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="bgStyle !h250px 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> -->
<span class="absolute right-10px top-6px z-30 text-#000">
<el-radio-group v-model="cuType.type">
<el-radio-button label="SMM" value="cu0000" />
<el-radio-button label="LME" value="LME_CA_3M" />
</el-radio-group></span>
<div v-if="false && tab"
class="tab absolute bg-#fff w100px top-50px z-50 text-#112144 text-center leading-28px text-18px ">
@ -359,13 +369,18 @@ async function getTimeFuturecenter() {
<VChart class="absolute z-22" ref="chartRef2" :option="chartOption2" autoresize />
</div> -->
</div>
<div class="bgStyle !h380px mt10px">
<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> -->
<span class="absolute right-10px top-6px z-30 text-#000">
<el-radio-group v-model="alType.type">
<el-radio-button label="SMM" value="al0000" />
<el-radio-button label="LME" value="LME_AH_3M" />
</el-radio-group></span>
<VChart class="absolute z-22 left-0 right-0 !w-full" ref="chartRef11" :option="chartOption11"
autoresize />
</div>
@ -375,11 +390,77 @@ async function getTimeFuturecenter() {
</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="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>
</div>
<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 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>
<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 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>
<div v-if="false" 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">
<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">
@ -424,8 +505,8 @@ async function getTimeFuturecenter() {
<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>
<span @click="tabShow(1)" class="title bg-#FF603A !text-16px pl13px pr20px ">{{ names1
}}<el-icon>
<CaretBottom />
</el-icon></span>
<div v-if="tab1"
@ -440,8 +521,8 @@ async function getTimeFuturecenter() {
<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>
<span @click="tabShow(2)" class="title bg-#70BFCD !text-16px pl13px pr20px ">{{ names2
}}<el-icon>
<CaretBottom />
</el-icon></span>
@ -474,8 +555,8 @@ async function getTimeFuturecenter() {
</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 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>