547 lines
21 KiB
Vue
547 lines
21 KiB
Vue
<!-- 市况 -->
|
||
<script setup lang="ts">
|
||
import { Chart1, Chart2, Chart3, Chart4, Chart5, Chart6 } from './MarketData'
|
||
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/lib/locale/lang/zh-cn";
|
||
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'].includes(store.user.roleCode)
|
||
const userCodes = ['admin','huilv_dandang','tech_service'].includes(store.user.roleCode)
|
||
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
|
||
from.value.label.radio = dat[0].value
|
||
state4.number = dat[0].value
|
||
}
|
||
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" 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>
|