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

fix bugs

main
wwl 2024-08-02 10:16:24 +08:00
parent a3d6077599
commit b47fce05ca
11 changed files with 3002 additions and 683 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

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

2
src/router/index.ts
View File

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

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

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

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

File diff suppressed because it is too large Load Diff

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

@ -719,7 +719,8 @@ function formatNumber(num = 0) {
<div class="item_title hover:underline">AI差别化LAB</div> <div class="item_title hover:underline">AI差别化LAB</div>
<div class="item_sub-title">责任者：开发调达部</div> <div class="item_sub-title">责任者：开发调达部</div>
<div class="item_sub-title">差别化研究T</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>
<div <div
class="item !w-full flex flex-col cursor-pointer" class="item !w-full flex flex-col cursor-pointer"

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

@ -32,7 +32,7 @@ import {
fetchPartmaxBusSeedsRateBySupplier fetchPartmaxBusSeedsRateBySupplier
} from '@/api/daikin/base' } from '@/api/daikin/base'
import { groupBy, cloneDeep } from 'lodash-es' import { groupBy, cloneDeep } from 'lodash-es'
import type { EChartsOption } from 'echarts' // import type { EChartsOption } from 'echarts'
use([ use([
CanvasRenderer, CanvasRenderer,
@ -52,8 +52,8 @@ const header = { token: token.value }
const { push } = useRouter() const { push } = useRouter()
const message = useMessage() const message = useMessage()
const selYear = ref(new Date().getFullYear() + '') const selYear = ref(new Date().getFullYear() + '')
const year = ref(new Date().getFullYear() + '') const year = ref(new Date().getFullYear() - 1 + '')
const yearTwo = ref(new Date().getFullYear() + '') const yearTwo = ref(new Date().getFullYear() - 1 + '')
const option = ref<any>({}) const option = ref<any>({})
const option2 = ref<any>({}) const option2 = ref<any>({})
const optionMax = ref<any>({}) const optionMax = ref<any>({})
@ -61,6 +61,7 @@ const optionMin = ref<any>({})
const chartRef = ref<any>(null) const chartRef = ref<any>(null)
const chartRef2 = ref<any>(null) const chartRef2 = ref<any>(null)
const loading = ref(false) const loading = ref(false)
const echartRefs = ref<any>({})
const part = ref('DIS') const part = ref('DIS')
const partMin = ref('DIS') const partMin = ref('DIS')
@ -76,19 +77,92 @@ watchEffect(() => {
) )
}) })
const chartClick = (it: any) => { const clickLegend = (it = 'max', name = '加工品') => {
console.log('🚀 ~ file: CD.vue:39 ~ it:', it) // flag &&
return // echartRefs.value[it].dispatchAction({
option.value.series?.forEach((item: any) => { // type: 'legendInverseSelect'
item.data.forEach((i: any) => { // })
i.itemStyle = {} echartRefs.value[it].dispatchAction({
type: 'legendSelect',
name
}) })
}) }
option.value.series[it.seriesIndex].data[it.dataIndex].itemStyle = {
shadowColor: 'rgba(0, 0, 0, 0.7)', const triggerAction = (action, selected) => {
shadowOffsetY: 10, let legend = []
shadowBlur: 20 for (let name in selected) {
if (selected.hasOwnProperty(name)) {
legend.push({ name: name })
} }
}
this.chart.dispatchAction({
type: action,
batch: legend
})
}
const isFirstUnSelect = (selected, legend) => {
if (selected[legend] === true) return false
let unSelectedCount = 0
for (let name in selected) {
if (!selected.hasOwnProperty(name)) {
continue
}
if (selected[name] === false) {
unSelectedCount++
}
}
return unSelectedCount === 1
}
const isAllUnSelected = (selected) => {
let selectedCount = 0
for (let name in selected) {
if (!selected.hasOwnProperty(name)) {
continue
}
// selected对象内true代表选中，false代表未选中
if (selected[name] === true) {
selectedCount++
}
}
return selectedCount === 0
}
const chartClick = (it: any) => {
// it.selected &&
// Object.keys(it.selected).forEach(
// (key: any) =>
// it.selected[key] &&
// echartRefs.value['max'].dispatchAction({
// type: 'legendToggleSelect',
// name: key
// })
// )
// let selected = it.selected
// let legend = it.name
// // 使用legendToggleSelect动作将重新触发legendselectchanged事件，导致本函数重复运行从而丢失selected对象
// if (selected !== undefined) {
// if (isFirstUnSelect(selected, legend)) {
// console.log(selected)
// console.log(legend)
// triggerAction('legendToggleSelect', selected)
// } else if (this.isAllUnSelected(selected)) {
// triggerAction('legendSelect', selected)
// }
// }
// clickLegend('max', it.name)
console.log('🚀 ~ file: CD.vue:80 ~ it:', it)
// option.value.series?.forEach((item: any) => {
// item.data.forEach((i: any) => {
// i.itemStyle = {}
// })
// })
// option.value.series[it.seriesIndex].data[it.dataIndex].itemStyle = {
// shadowColor: 'rgba(0, 0, 0, 0.7)',
// shadowOffsetY: 10,
// shadowBlur: 20
// }
// pieYear.value = (+it.name).toString().substring(2) // pieYear.value = (+it.name).toString().substring(2)
} }
@ -100,7 +174,7 @@ option2.value = totalBar
const disBar = disBarCharData() const disBar = disBarCharData()
optionMax.value = cloneDeep(disBar) optionMax.value = cloneDeep(disBar)
const maxBusSeeds = ref<any>(['加工品', 'Device', '原材料', '进口品']) const maxBusSeeds = ref<any>(['加工品', '电器机能', '原材料', '输出入'])
const maxBusSeedsOption = ref<Record<any, any>>({}) const maxBusSeedsOption = ref<Record<any, any>>({})
const maxBusSeedsOptionList = ref<Record<any, any>>({}) const maxBusSeedsOptionList = ref<Record<any, any>>({})
// const minBusSeeds = ref(['', '', '', '']) // const minBusSeeds = ref(['', '', '', ''])
@ -110,13 +184,14 @@ const showSupplier = ref(false)
// CD-三个据点总发注金额饼状图 // CD-三个据点总发注金额饼状图
const getPartStatisRate = async (date?: Date) => { const getPartStatisRate = async (date?: Date) => {
const y = date && new Date(date).getFullYear() const y = date && new Date(date).getFullYear()
console.log('🚀 ~ file: CD.vue:111 ~ y :', y, year.value)
let total = 0 let total = 0
const { data = [] } = await fetchPartStatisRate({ year: y || year.value }) const { data = [] } = await fetchPartStatisRate({ year: y || year.value })
option.value.series[0].data = data.map((item: any) => { option.value.series[0].data = data.map((item: any) => {
total += item.amount total += item.amount
return { name: item.part, value: 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 = () => { const randomData = () => {
@ -437,6 +512,7 @@ const beforeUpload = (file: any) => {
v-model="year" v-model="year"
type="year" type="year"
placeholder="" placeholder=""
value-format="YYYY"
@change="getPartStatisRate" @change="getPartStatisRate"
:editable="false" :editable="false"
:clearable="false" :clearable="false"
@ -472,6 +548,7 @@ const beforeUpload = (file: any) => {
v-model="yearTwo" v-model="yearTwo"
type="year" type="year"
placeholder="" placeholder=""
value-format="YYYY"
@change="getPartminBusSeedsRate" @change="getPartminBusSeedsRate"
:editable="false" :editable="false"
:clearable="false" :clearable="false"
@ -532,7 +609,13 @@ const beforeUpload = (file: any) => {
</el-select> </el-select>
</div> </div>
<div class="mt-50px w-full h-300px relative"> <div class="mt-50px w-full h-300px relative">
<VChart key="yyyxx33" :option="optionMax" autoresize></VChart> <VChart
@legendselectchanged="chartClick"
key="yyyxx33"
:ref="(el) => (echartRefs['max'] = el)"
:option="optionMax"
autoresize
></VChart>
<!-- <img <!-- <img
@click="init(true)" @click="init(true)"
src="./img/z.png" src="./img/z.png"
@ -576,20 +659,21 @@ const beforeUpload = (file: any) => {
--el-date-editor-width: 80px; --el-date-editor-width: 80px;
} }
.btnn { .btnn {
background-color: #00459660; background-color: #004596;
box-shadow: 0 0 12px 0 #37abff40 inset; box-shadow: 0 0 12px 0 #37abff inset;
color: #fff; color: #fff;
padding: 8px 20px; padding: 8px 20px;
&::active { font-weight: bold;
box-shadow: 0 0 12px 0 #37abff80 inset; &:active {
box-shadow: none;
} }
} }
:deep(.el-date-editor.el-input) { :deep(.el-date-editor.el-input) {
width: 80px; width: 80px;
.el-input__wrapper { .el-input__wrapper {
// background: #ffffff90; // background: #ffffff90;
background-color: #00459660; background-color: #004596;
box-shadow: 0 0 12px 0 #37abff40 inset; box-shadow: 0 0 12px 0 #37abff inset;
cursor: pointer; cursor: pointer;
} }
.el-input__prefix { .el-input__prefix {
@ -601,8 +685,8 @@ const beforeUpload = (file: any) => {
} }
} }
:deep(.el-select__wrapper) { :deep(.el-select__wrapper) {
background-color: #00459660; background-color: #004596;
box-shadow: 0 0 12px 0 #37abff40 inset; box-shadow: 0 0 12px 0 #37abff inset;
&:hover { &:hover {
box-shadow: none; box-shadow: none;
} }

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

@ -2,7 +2,7 @@ import { color, type EChartsOption } from 'echarts'
//数字转千分位 //数字转千分位
export function formatNum(num: any) { export function formatNum(num: any) {
const n = String(num).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,') const n = String(num.toFixed(2)).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
return n return n
} }
@ -54,6 +54,7 @@ export function totalPieCharData(arr: any = [], colorList: any = {}) {
formatNum(222299939.23), formatNum(222299939.23),
fill: '#fff', fill: '#fff',
fontSize: 14, fontSize: 14,
lineHeight: 20,
width: 30, width: 30,
height: 30, height: 30,
textAlign: 'center' textAlign: 'center'
@ -207,6 +208,24 @@ export function disBarCharData(params: any = {}) {
type: 'scroll', type: 'scroll',
pageIconInactiveColor: '#aaa', pageIconInactiveColor: '#aaa',
pageIconColor: '#fff', pageIconColor: '#fff',
selector: [
// {
// // 全选
// type: 'all',
// // 可以是任意你喜欢的标题
// title: '全选'
// }
// {
// // 反选
// type: 'inverse',
// // 可以是任意你喜欢的标题
// title: '反选'
// }
],
selectorLabel: {
backgroundColor: '#fff',
color: '#000'
},
pageTextStyle: { pageTextStyle: {
color: '#fff' color: '#fff'
}, },

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

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

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

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

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

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

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

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