市况汇率

src/api/daikin/base.ts

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

src/router/index.ts

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

src/views/company/index.vue

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

src/views/home/Home.vue

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

src/views/home/Home.vue.bak

@@ -0,0 +1,984 @@
+<script setup lang="ts">
+import VChart from 'vue-echarts'
+import { useChart1, useChart22, useChart21, useChart3, useChart23 } from './HomeData'
+import AppHeadUserInfo from '@/components/AppHeadUserInfo.vue'
+import { NSelect } from 'naive-ui'
+import News from './components/New.vue'
+import { homePageMarket, homePageRate, report, getHomeList, amountList } from '@/api/daikin/base'
+import { useUserStore } from '@/stores/modules/user'
+import { useMessage } from 'naive-ui'
+
+const store = useUserStore()
+const message = useMessage()
+
+const isUpPwds = ref(false)
+const userCode = ref(false)
+const useCdView = ref(false)
+watchEffect(() => {
+  userCode.value = ['admin', 'cd_dandang', 'tech_service'].some((item) =>
+    store.user.roleCode?.includes(item)
+  )
+  useCdView.value = ['admin', 'cd_view', 'cd_dandang', 'tech_service'].some((item) =>
+    store.user.roleCode?.includes(item)
+  )
+  isUpPwds.value = store.user.isUpPwd === 2 ? true : false
+})
+const activeCard5NavKey = ref('DIS')
+const Card5Navs = [
+  { key: 'DIS', name: 'DIS' },
+  { key: 'DSZ', name: 'DSZ' },
+  { key: 'DISH', name: 'DISH' }
+]
+const ailists = ref()
+const culists = ref()
+const itemLists = ref()
+const timeA = ref()
+const timeB = ref()
+
+const disList = ref<any>([{}, {}, {}, {}])
+const dszList = ref<any>([{}, {}, {}, {}])
+const dishList = ref<any>([{}, {}, {}, {}])
+const month_1 = ref()
+const month_2 = ref()
+const month_3 = ref()
+let now = new Date().getMonth() + 13
+month_2.value = (now - 2) % 12
+month_1.value = (now - 1) % 12
+const dataDIS = ref()
+const dataDSZ = ref()
+const dataDISH = ref()
+const addDSZ1 = ref()
+const addDIS1 = ref()
+const addDISH1 = ref()
+const addDSZ2 = ref()
+const addDIS2 = ref()
+const addDISH2 = ref()
+const addDSZ3 = ref()
+const addDIS3 = ref()
+const addDISH3 = ref()
+const timeObj = ref<any>({})
+onMounted(async () => {
+  try {
+    const {
+      data: { ailist, culist, lastUTime },
+      data
+    } = await homePageMarket() //市况
+    const {
+      data: { itemList, lastUTime: _lastUTime }
+    } = await homePageRate() //汇率
+    const { data: _disList } = await getHomeList({ number: 'DIS' }) //汇率
+    const { data: _dszList } = await getHomeList({ number: 'DSZ' }) //汇率
+    const { data: _dishList } = await getHomeList({ number: 'DISH' }) //汇率
+    const { data: fazhu } = await amountList()
+    fazhu.forEach((i: { number: string; amount: any }) => {
+      // timeObj.value[i.number] = i.modifyTime?.substring(0, 10) || ''
+      timeObj.value[i.number] = i.updateDate || ''
+      if (i.number == 'DIS') {
+        dataDIS.value = i.amount
+      }
+      if (i.number == 'DSZ') {
+        dataDSZ.value = i.amount
+      }
+      if (i.number == 'DISH') {
+        dataDISH.value = i.amount
+      }
+    })
+    ailists.value = ailist
+    culists.value = culist
+    itemLists.value = itemList
+    timeA.value = lastUTime
+    timeB.value = _lastUTime
+    disList.value = _disList
+    dszList.value = _dszList
+    dishList.value = _dishList
+    month_1.value = _disList[0].monthDate?.split('-')[1]
+    month_2.value = _dszList[0].monthDate?.split('-')[1]
+    month_3.value = _dishList[0].monthDate?.split('-')[1]
+
+    addDIS1.value = _disList.reduce((previousValue: any, currentValue: { budget: any }) => {
+      const sum = parseFloat(currentValue.budget) + parseFloat(previousValue)
+      // return sum > 0 ? sum.toFixed(2) : 0
+      return sum
+    }, 0)
+    if (_disList[0].budget == _disList[1].budget && addDIS1.value > 0) {
+      addDIS1.value -= _disList[0].budget
+      addDIS1.value > 0 ? (addDIS1.value = addDIS1.value.toFixed(2)) : 0
+    }
+    addDSZ1.value = _dszList.reduce((previousValue: any, currentValue: { budget: any }) => {
+      const sum = parseFloat(currentValue.budget) + parseFloat(previousValue)
+      // return sum > 0 ? sum.toFixed(2) : 0
+      return sum
+    }, 0)
+    if (_dszList[0].budget == _dszList[1].budget && addDSZ1.value > 0) {
+      addDSZ1.value -= _dszList[0].budget
+      addDSZ1.value > 0 ? (addDSZ1.value = addDSZ1.value.toFixed(2)) : 0
+    }
+    addDISH1.value = _dishList.reduce((previousValue: any, currentValue: { budget: any }) => {
+      const sum = parseFloat(currentValue.budget) + parseFloat(previousValue)
+      // return sum > 0 ? sum.toFixed(2) : 0
+      return sum
+    }, 0)
+    if (_dishList[0].budget == _dishList[1].budget && addDISH1.value > 0) {
+      addDISH1.value -= _dishList[0].budget
+      addDISH1.value > 0 ? (addDISH1.value = addDISH1.value.toFixed(2)) : 0
+    }
+    addDIS2.value = _disList.reduce((previousValue: any, currentValue: { monthOne: any }) => {
+      const sum = parseFloat(currentValue.monthOne) + parseFloat(previousValue)
+      // return sum > 0 ? sum.toFixed(2) : 0
+      return sum
+    }, 0)
+    if (_disList[0].monthOne == _disList[1].monthOne && addDIS2.value > 0) {
+      addDIS2.value -= _disList[0].monthOne
+      addDIS2.value > 0 ? (addDIS2.value = addDIS2.value.toFixed(2)) : 0
+    }
+    addDSZ2.value = _dszList.reduce((previousValue: any, currentValue: { monthOne: any }) => {
+      const sum = parseFloat(currentValue.monthOne) + parseFloat(previousValue)
+      // return sum > 0 ? sum.toFixed(2) : 0
+      return sum
+    }, 0)
+    if (_dszList[0].monthOne == _dszList[1].monthOne && addDSZ2.value > 0) {
+      addDSZ2.value -= _dszList[0].monthOne
+      addDSZ2.value > 0 ? (addDSZ2.value = addDSZ2.value.toFixed(2)) : 0
+    }
+    addDISH2.value = _dishList.reduce((previousValue: any, currentValue: { monthOne: any }) => {
+      const sum = parseFloat(currentValue.monthOne) + parseFloat(previousValue)
+      // return sum > 0 ? sum.toFixed(2) : 0
+      return sum
+    }, 0)
+    if (_dishList[0].monthOne == _dishList[1].monthOne && addDISH2.value > 0) {
+      addDISH2.value -= _dishList[0].monthOne
+      addDISH2.value > 0 ? (addDISH2.value = addDISH2.value.toFixed(2)) : 0
+    }
+    addDIS3.value = _disList.reduce((previousValue: any, currentValue: { monthTwo: any }) => {
+      const sum = parseFloat(currentValue.monthTwo) + parseFloat(previousValue)
+      // return sum > 0 ? sum.toFixed(2) : 0
+      return sum
+    }, 0)
+    if (_disList[0].monthTwo == _disList[1].monthTwo && addDIS3.value > 0) {
+      addDIS3.value -= _disList[0].monthTwo
+      addDIS3.value > 0 ? (addDIS3.value = addDIS3.value.toFixed(2)) : 0
+    }
+    addDSZ3.value = _dszList.reduce((previousValue: any, currentValue: { monthTwo: any }) => {
+      const sum = parseFloat(currentValue.monthTwo) + parseFloat(previousValue)
+      // return sum > 0 ? sum.toFixed(2) : 0
+      return sum
+    }, 0)
+    if (_dszList[0].monthTwo == _dszList[1].monthTwo && addDSZ3.value > 0) {
+      addDSZ3.value -= _dszList[0].monthTwo
+      addDSZ3.value > 0 ? (addDSZ3.value = addDSZ3.value.toFixed(2)) : 0
+    }
+    addDISH3.value = _dishList.reduce((previousValue: any, currentValue: { monthTwo: any }) => {
+      const sum = parseFloat(currentValue.monthTwo) + parseFloat(previousValue)
+      // return sum > 0 ? sum.toFixed(2) : 0
+      return sum
+    }, 0)
+    if (_dishList[0].monthTwo == _dishList[1].monthTwo && addDISH3.value > 0) {
+      addDISH3.value -= _dishList[0].monthTwo
+      addDISH3.value > 0 ? (addDISH3.value = addDISH3.value.toFixed(2)) : 0
+    }
+    if (isUpPwds.value) {
+      ElMessageBox.alert('为了您的帐号安全,此次登录必须更改密码', '重要提醒', {
+        confirmButtonText: 'OK',
+        showClose: false,
+        showCancelButton: false
+      }).then(() => {
+        push({ name: 'modifys' })
+      })
+    }
+    report({ moduleCode: 'App_Home' })
+  } catch (error) {}
+})
+const { push } = useRouter()
+const route = useRoute()
+const timeNow = useDateFormat(useNow(), 'YYYY-MM-DD')
+
+const { chartRef: chartRef1, option: chartOption1 } = useChart1()
+const { chartRef: chartRef2, option: chartOption2, state } = useChart21()
+const { chartRef: chartRef22, option: chartOption22 } = useChart22()
+const { chartRef: chartRef23, option: chartOption23 } = useChart23()
+const { chartRef: chartRef3, option: chartOption3 } = useChart3()
+
+const displayDiffValue = (diffValue: number) => {
+  // return diffValue + '%'
+  if (diffValue > 0) {
+    return `+${diffValue}%`
+  } else if (diffValue < 0) {
+    return `-${Math.abs(diffValue)}%`
+  } else {
+    // return `${formatNumber(diffValue)} %`
+    return `${diffValue}%`
+  }
+}
+
+async function setModule(codes: any, names: any) {
+  const moduleCode = codes
+  console.log(codes, names)
+  if (names == 'CD' && !useCdView.value) {
+    return message.info('没有访问权限!')
+  }
+  push({ name: names })
+  const { code } = await report({ moduleCode })
+}
+const selectData = ref('原材料')
+const option = [
+  {
+    label: '全部数据',
+    value: 'quanbu'
+  },
+  {
+    label: '原材料',
+    value: 'yuancailiao'
+  },
+  {
+    label: '加工品',
+    value: 'jiagongping'
+  },
+  {
+    label: '机能部品',
+    value: 'jineng'
+  }
+]
+
+const thisSelect = (e) => {
+  console.log(e)
+  state.title = e
+}
+
+function formatNumber(num = 0) {
+  num = +num
+  const roundedNum: string = num.toFixed(2)
+  const [wholePart, decimalPart] = roundedNum.split('.')
+  const formattedDecimalPart = decimalPart.padEnd(2, '0')
+  return `${wholePart}.${formattedDecimalPart}`
+}
+</script>
+
+<template>
+  <div class="top flex items-center text-20px">
+    <div class="flex-1 font-800 text-30px"></div>
+    <AppHeadUserInfo />
+  </div>
+  <div class="page-wrapper h-full flex-1 flex flex-col flex-wrap">
+    <div class="font-800 text-30px mt39px">
+      <!-- FY23年度调达本部方针：创新实干，勇毅前行，以综合实力挑战变革，提升存在感 -->
+      FY24年度公司方针：提升全员价值，直击一切困难
+    </div>
+    <div class="mt30px flex-1 flex flex-wrap justify-between">
+      <News></News>
+
+      <div class="card">
+        <div
+          class="card_title cursor-pointer hover:underline"
+          @click="setModule('App_Market', 'Market')"
+        >
+          市况汇率 每日更新
+        </div>
+        <div class="card_nav card_nav2 !top--3px !right--1px">
+          <div class="!text-14px w260px top--4px text-right leading-18px">
+            出处：市况-SMM/LME<br />
+            汇率-外汇管理局
+          </div>
+        </div>
+        <!-- <div class="card_sub-title">责任者：调达中心 Device变革T/原材料变革T</div> -->
+
+        <div class="card_content">
+          <!-- <VChart :option="chartOption1" autoresize /> -->
+          <div class="flex pl15px pr10px pt15px text-#898F9F-1 text-#152242">
+            <div class="">
+              <span class="icoT">市况</span>
+              <span class="ml10px text-14px">更新时间：{{ timeA }}</span>
+
+              <div class="h150px overflow-auto">
+                <table class="history w-full text-center mt18px text-16px border-spacing-0 w219px">
+                  <thead
+                    style="
+                      background-color: #417bef;
+                      color: #fff;
+                      height: 42px;
+                      width: 220px;
+                      border: 1px solid #417bef;
+                    "
+                  >
+                    <tr class="h41px">
+                      <th>铜</th>
+                      <th>最新</th>
+                      <th>前日差</th>
+                    </tr>
+                  </thead>
+                  <tbody v-if="culists">
+                    <tr
+                      class="h45px"
+                      v-for="(it, index) in culists"
+                      :key="index"
+                      :class="index % 2 !== 0 ? 'bg-#f9f9f9' : ''"
+                    >
+                      <td class="text-14px">{{ it.channel }}</td>
+                      <td class="text-14px">{{ it.negAmount }}</td>
+                      <td class="text-14px" :class="it.diffValue < 0 ? 'text-#63BF8D' : 'text-red'">
+                        {{ displayDiffValue(it.diffValue) }}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <div class="h150px overflow-auto">
+                <table
+                  class="history w-full text-center mt15px text-16px border-spacing-0 overflow-auto w219px"
+                >
+                  <thead
+                    style="
+                      background-color: #417bef;
+                      color: #fff;
+                      height: 42px;
+                      width: 220px;
+                      border: 1px solid #417bef;
+                    "
+                  >
+                    <tr class="h41px">
+                      <th>铝</th>
+                      <th>最新</th>
+                      <th>前日差</th>
+                    </tr>
+                  </thead>
+                  <tbody v-if="ailists">
+                    <tr
+                      class="h45px"
+                      v-for="(it, index) in ailists"
+                      :key="index"
+                      :class="index % 2 !== 0 ? 'bg-#f9f9f9' : ''"
+                    >
+                      <td class="text-14px">{{ it.channel }}</td>
+                      <td class="text-14px">{{ it.negAmount }}</td>
+                      <td class="text-14px" :class="it.diffValue < 0 ? 'text-#63BF8D' : 'text-red'">
+                        {{ displayDiffValue(it.diffValue) }}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <div class="ml10px">
+              <span class="icoT">汇率</span>
+              <span class="ml10px text-14px">更新时间：{{ timeB }}</span>
+              <div class="h282px pt18px">
+                <table class="history w-full text-center text-16px border-spacing-0 w219px">
+                  <thead
+                    style="
+                      background-color: #417bef;
+                      color: #fff;
+                      height: 42px;
+                      width: 220px;
+                      border: 1px solid #417bef;
+                    "
+                  >
+                    <tr class="h41px">
+                      <th class="w75px">币种</th>
+                      <th>最新</th>
+                      <th class="w65px">前日差</th>
+                    </tr>
+                  </thead>
+                  <tbody v-if="itemLists" class="h238px overflow-auto absolute">
+                    <tr
+                      class="h60px !text-14px"
+                      v-for="(it, index) in itemLists"
+                      :key="index"
+                      :class="index % 2 !== 0 ? 'bg-#f9f9f9' : ''"
+                    >
+                      <td class="w75px text-center">
+                        {{ it.currencyNameFrom }}-{{ it.currencyNameTo }}
+                      </td>
+                      <td class="w85px text-center">{{ it.negAmount }}</td>
+                      <td
+                        class="w65px text-center"
+                        :class="it.diffValue < 0 ? 'text-#63BF8D' : 'text-red'"
+                      >
+                        {{ displayDiffValue(it.diffValue) }}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card">
+        <div
+          class="card_title cursor-pointer hover:underline"
+          @click="setModule('App_data_platform', 'CD')"
+        >
+          数据平台
+        </div>
+        <!-- <div class="card_sub-title">责任者：调达中心 企画变革T</div> -->
+        <div class="card_nav card_nav1">
+          <div
+            class="card_nav_item cursor-pointer hover:underline"
+            :class="activeCard5NavKey === i.key && 'active'"
+            v-for="i in Card5Navs"
+            :key="i.name"
+            @click="() => (activeCard5NavKey = i.key)"
+          >
+            {{ i.name }}
+          </div>
+        </div>
+        <div class="table-container">
+          <el-button
+            v-if="userCode"
+            type="primary"
+            class="button abs-top"
+            @click="push({ name: 'dataPlatform' })"
+            >数据管理</el-button
+          >
+          <div
+            class="block p-[10px] pr-0 absolute top-[4px] right-[36px] font-normal h-[20px] !text-[16px] text-[#000]"
+          >
+            更新日：{{ timeObj[activeCard5NavKey] }}
+          </div>
+          <table class="data-table" border v-if="activeCard5NavKey === 'DIS'">
+            <colgroup>
+              <col width="20%" />
+              <col width="20%" />
+              <col width="20%" />
+              <col width="20%" />
+              <col width="20%" />
+            </colgroup>
+            <tr class="header">
+              <th rowspan="2" colspan="2">拠点</th>
+              <td colspan="3">
+                <div class="tab-header">
+                  <div class="tb-title">DIS</div>
+                  <div class="tb-subtitle">发注金额：{{ dataDIS }}百万元</div>
+                </div>
+              </td>
+            </tr>
+            <tr class="header">
+              <td>年初予算</td>
+              <!-- <td>{{month_2}}月</td> -->
+              <td>改订</td>
+              <td>{{ +month_1 }}月</td>
+            </tr>
+            <tr>
+              <th colspan="2">合计</th>
+              <td>{{ formatNumber(addDIS1) }}%</td>
+              <td>{{ formatNumber(addDIS2) }}%</td>
+              <td>{{ formatNumber(addDIS3) }}%</td>
+            </tr>
+            <tr>
+              <th rowspan="2">C/D</th>
+              <th>交涉</th>
+              <td :rowspan="disList[0].budget == disList[1].budget ? '2' : ''">
+                {{ formatNumber(disList[0].budget) }}%
+              </td>
+              <td :rowspan="disList[0].monthOne == disList[1].monthOne ? '2' : ''">
+                {{ formatNumber(disList[0].monthOne) }}%
+              </td>
+              <td :rowspan="disList[0].monthTwo == disList[1].monthTwo ? '2' : ''">
+                {{ formatNumber(disList[0].monthTwo) }}%
+              </td>
+            </tr>
+            <tr>
+              <th>THEME</th>
+              <td v-if="disList[1].budget != disList[0].budget">
+                {{ formatNumber(disList[1].budget) }}%
+              </td>
+              <td v-if="disList[1].monthOne != disList[0].monthOne">
+                {{ formatNumber(disList[1].monthOne) }}%
+              </td>
+              <td v-if="disList[1].monthTwo != disList[0].monthTwo">
+                {{ formatNumber(disList[1].monthTwo) }}%
+              </td>
+            </tr>
+            <tr>
+              <th colspan="2">市况</th>
+              <td>{{ formatNumber(disList[2].budget) }}%</td>
+              <td>{{ formatNumber(disList[2].monthOne) }}%</td>
+              <td>{{ formatNumber(disList[2].monthTwo) }}%</td>
+            </tr>
+            <tr>
+              <th colspan="2">為替レート</th>
+              <td>{{ formatNumber(disList[3].budget) }}%</td>
+              <td>{{ formatNumber(disList[3].monthOne) }}%</td>
+              <td>{{ formatNumber(disList[3].monthTwo) }}%</td>
+            </tr>
+          </table>
+          <table class="data-table" border v-if="activeCard5NavKey === 'DSZ'">
+            <colgroup>
+              <col width="20%" />
+              <col width="20%" />
+              <col width="20%" />
+              <col width="20%" />
+              <col width="20%" />
+            </colgroup>
+            <tr class="header">
+              <th rowspan="2" colspan="2">抛点</th>
+              <td colspan="3">
+                <div class="tab-header">
+                  <div class="tb-title">DSZ</div>
+                  <div class="tb-subtitle">发注金额：{{ dataDSZ }}百万元</div>
+                </div>
+              </td>
+            </tr>
+            <tr class="header">
+              <td>年初予算</td>
+              <!-- <td>{{month_2}}月</td> -->
+              <td>改订</td>
+              <td>{{ +month_2 }}月</td>
+            </tr>
+            <tr>
+              <th colspan="2">合计</th>
+              <td>{{ formatNumber(addDSZ1) }}%</td>
+              <td>{{ formatNumber(addDSZ2) }}%</td>
+              <td>{{ formatNumber(addDSZ3) }}%</td>
+            </tr>
+            <tr>
+              <th rowspan="2">C/D</th>
+              <th>交涉</th>
+              <td :rowspan="dszList[0].budget == dszList[1].budget ? '2' : ''">
+                {{ formatNumber(dszList[0].budget) }}%
+              </td>
+              <td :rowspan="dszList[0].monthOne == dszList[1].monthOne ? '2' : ''">
+                {{ formatNumber(dszList[0].monthOne) }}%
+              </td>
+              <td :rowspan="dszList[0].monthTwo == dszList[1].monthTwo ? '2' : ''">
+                {{ formatNumber(dszList[0].monthTwo) }}%
+              </td>
+            </tr>
+            <tr>
+              <th>THEME</th>
+              <td v-if="dszList[1].budget != dszList[0].budget">
+                {{ formatNumber(dszList[1].budget) }}%
+              </td>
+              <td v-if="dszList[1].monthOne != dszList[0].monthOne">
+                {{ formatNumber(dszList[1].monthOne) }}%
+              </td>
+              <td v-if="dszList[1].monthTwo != dszList[0].monthTwo">
+                {{ formatNumber(dszList[1].monthTwo) }}%
+              </td>
+            </tr>
+            <tr>
+              <th colspan="2">市况</th>
+              <td>{{ formatNumber(dszList[2].budget) }}%</td>
+              <td>{{ formatNumber(dszList[2].monthOne) }}%</td>
+              <td>{{ formatNumber(dszList[2].monthTwo) }}%</td>
+            </tr>
+            <tr>
+              <th colspan="2">為替レート</th>
+              <td>{{ formatNumber(dszList[3].budget) }}%</td>
+              <td>{{ formatNumber(dszList[3].monthOne) }}%</td>
+              <td>{{ formatNumber(dszList[3].monthTwo) }}%</td>
+            </tr>
+          </table>
+          <table class="data-table" border v-if="activeCard5NavKey === 'DISH'">
+            <colgroup>
+              <col width="20%" />
+              <col width="20%" />
+              <col width="20%" />
+              <col width="20%" />
+              <col width="20%" />
+            </colgroup>
+            <tr class="header">
+              <th rowspan="2" colspan="2">抛点</th>
+              <td colspan="3">
+                <div class="tab-header">
+                  <div class="tb-title">DISH</div>
+                  <div class="tb-subtitle">发注金额：{{ dataDISH }}百万元</div>
+                </div>
+              </td>
+            </tr>
+            <tr class="header">
+              <td>年初予算</td>
+              <!-- <td>{{month_2}}月</td> -->
+              <td>改订</td>
+              <td>{{ +month_3 }}月</td>
+            </tr>
+            <tr>
+              <th colspan="2">合计</th>
+              <td>{{ formatNumber(addDISH1) }}%</td>
+              <td>{{ formatNumber(addDISH2) }}%</td>
+              <td>{{ formatNumber(addDISH3) }}%</td>
+            </tr>
+            <tr>
+              <th rowspan="2">C/D</th>
+              <th>交涉</th>
+              <td :rowspan="dishList[0].budget == dishList[1].budget ? '2' : ''">
+                {{ formatNumber(dishList[0].budget) }}%
+              </td>
+              <td :rowspan="dishList[0].monthOne == dishList[1].monthOne ? '2' : ''">
+                {{ formatNumber(dishList[0].monthOne) }}%
+              </td>
+              <td :rowspan="dishList[0].monthTwo == dishList[1].monthTwo ? '2' : ''">
+                {{ formatNumber(dishList[0].monthTwo) }}%
+              </td>
+            </tr>
+            <tr>
+              <th>THEME</th>
+              <td v-if="dishList[1].budget != dishList[0].budget">
+                {{ formatNumber(dishList[1].budget) }}%
+              </td>
+              <td v-if="dishList[1].monthOne != dishList[0].monthOne">
+                {{ formatNumber(dishList[1].monthOne) }}%
+              </td>
+              <td v-if="dishList[1].monthTwo != dishList[0].monthTwo">
+                {{ formatNumber(dishList[1].monthTwo) }}%
+              </td>
+            </tr>
+            <tr>
+              <th colspan="2">市况</th>
+              <td>{{ formatNumber(dishList[2].budget) }}%</td>
+              <td>{{ formatNumber(dishList[2].monthOne) }}%</td>
+              <td>{{ formatNumber(dishList[2].monthTwo) }}%</td>
+            </tr>
+            <tr>
+              <th colspan="2">為替レート</th>
+              <td>{{ formatNumber(dishList[3].budget) }}%</td>
+              <td>{{ formatNumber(dishList[3].monthOne) }}%</td>
+              <td>{{ formatNumber(dishList[3].monthTwo) }}%</td>
+            </tr>
+          </table>
+          <!-- <img  src="@/assets/images/xiaogouzi1.jpg"  class="w-full h-full cover" v-if="activeCard5NavKey === 'DSZ'"/>
+        <img  src="@/assets/images/xiaogouzi2.jpg"  class="w-full h-full cover" v-if="activeCard5NavKey === 'DISH'"/> -->
+          <!-- <img  src="@/assets/images/xiaogouzi3.jpg"  class="w-full h-full cover" v-if="activeCard5NavKey === 'DIS'"/> -->
+        </div>
+        <!-- <div class="card_content">
+          <VChart ref="chartRef3" :option="chartOption3" autoresize />
+        </div> -->
+      </div>
+      <div class="card" @click="setModule('App_BCP', 'BCP')">
+        <div class="card_title cursor-pointer hover:underline">调达BCP管理</div>
+        <div class="card_sub-title">责任者：调达部 加工品变革T</div>
+        <div class="card_content">
+          <img src="@/assets/images/img-11.png" class="w-full h-full object-cover" />
+        </div>
+      </div>
+      <div class="card relative">
+        <!-- <img src="@/assets/images/img-42.png" class="absolute top-10px right-0" /> -->
+        <div class="card_title cursor-pointer hover:underline" @click="setModule('App_CSR', 'CSR')">
+          SCM碳中和活动
+        </div>
+        <div class="card_sub-title" @click="setModule('App_CSR', 'CSR')">
+          责任者：开发调达部 调达机能研究T
+        </div>
+        <div class="card_content px20px" @click="setModule('App_CSR', 'CSR')">
+          <img src="../../assets/images/scmtzh@2x.png" class="w-full h-96% cover" />
+          <!-- <div class="flex text-center">
+            <div class="bg-#F4F8FF text-#000 h30px w-full pt5px font-bold">F25碳减排目标 <el-icon class="!text-#004DE1">
+                <CaretTop />
+              </el-icon>30%</div>
+            <div class="bg-#F4F8FF text-#000 h30px w-full  pt5px font-bold">F23碳减排目标 <el-icon class="!text-#004DE1">
+                <CaretTop />
+              </el-icon>15%</div>
+          </div>
+          <div class="flex  text-center">
+            <div class=" text-#677BB2 h30px w-full pt5px font-500">供方碳排放推移表</div>
+            <div class=" text-#677BB2 h30px w-full  pt5px font-500 flex"><span>重点供方碳排放情况</span> 
+              <n-select v-model:value="selectData" :options="option" class="w80px !text-12px h20px mt--4px" :show-checkmark="false"  size="tiny"
+                @update:value="thisSelect" />
+            </div>
+          </div>
+          <div class="flex w-full h-full">
+            <div class="w150px h-full">
+              <VChart :option="chartOption1" />
+            </div>
+            <div class="w280px h275px overflow-y-auto">
+              <VChart :option="chartOption2" />
+       
+            </div>
+          </div> -->
+
+          <!-- <div class="mt25px text-#142142"> -->
+          <!-- <img src="@/assets/images/tiad@2x.png" class="w100% h96%" /> -->
+          <!-- <div class="text-#002fa7 text-18px">大金中国调达本部紧扣大金集团2050愿景中CO2“零”排放目标展开调达碳中和活动</div>
+            <AppNewsBox class="mt10px" text="脱碳素供应链管理（原材料排放，部品加工·部品运输过程中的排放）
+空调解决方案（部品碳足迹管理，贩促活动，案例情报共享）" date="2023-05-22" /> -->
+          <!-- </div> -->
+          <!-- <div class="mt25px text-#142142">
+            <div class="text-#002fa7 text-18px">人材育成</div>
+            <AppNewsBox class="mt10px" text="FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来" date="2023-05-22" />
+          </div>
+          <div class="mt25px text-#142142">
+            <div class="text-#002fa7 text-18px">工作模式变革</div>
+            <AppNewsBox class="mt10px" text="FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来" date="2023-05-22" />
+          </div> -->
+        </div>
+      </div>
+
+      <div class="card topics">
+        <div class="card_title cursor-pointer hover:underline">重点Theme取组</div>
+        <div class="card_content p20px pt10px">
+          <div
+            class="w-full h-full flex flex-wrap content-between justify-between text-18px font-bold"
+          >
+            <div class="item !h-188px cursor-pointer" @click="setModule('App_Quality', 'Quality')">
+              <div class="item_title hover:underline">品质</div>
+              <div class="item_sub-title">责任者：调达部 企画管理T</div>
+              <!-- <img src="@/assets/images/img-45.svg" class="item_img pb13px pr20px" /> -->
+              <img src="@/assets/images/img-41.png" class="item_img b !bottom--20px" />
+            </div>
+            <div class="item !h-188px cursor-pointer" @click="setModule('App_Lab', 'Diffspace')">
+              <div class="item_title hover:underline">AI差别化LAB</div>
+              <div class="item_sub-title">责任者：开发调达部</div>
+              <div class="item_sub-title">差别化研究T</div>
+              <!-- <img src="@/assets/images/img-43.png" class="item_img" /> -->
+              <img src="./images/LAB.pic.png" class="item_img w-200px right--10px" />
+            </div>
+            <div
+              class="item !w-full flex flex-col cursor-pointer"
+              @click="push({ name: 'StrategicPlanning' })"
+            >
+              <div class="item_title hover:underline">战略企划</div>
+              <div class="item_sub-title">责任者：调达本部 管理G</div>
+              <!-- <img src="./images/home-1.svg" /> -->
+              <div class="flex mt20px items-center justify-center">
+                <div class="bg-#0038BE w210px px15px py7px rounded-30px">
+                  <img src="@/assets/images/biaoq2@2x.png" class="w25px h21px" />
+                  重点Theme管理
+                </div>
+                <span class="text-#000 font-thin underline-text mx23px hover:underline-solid"
+                  >开发调达部</span
+                >
+                <span class="text-#000 font-thin underline-text hover:underline-solid">调达部</span>
+                <!-- <VChart :option="chartOption2" autoresize /> -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.tab-header {
+  display: flex;
+  .tb-title {
+    margin: 0 auto;
+  }
+  .tb-subtitle {
+    margin-right: 8px;
+    font-size: 0.75em;
+  }
+}
+.table-container {
+  padding: 0 36px;
+  padding-top: 40px;
+  position: relative;
+}
+.data-table {
+  width: 100%;
+  color: #808696;
+  border-collapse: collapse;
+  line-height: 2.3rem;
+  text-align: center;
+  border-color: #e0e0e0;
+  background: white;
+}
+.table-container .abs-top {
+  position: absolute;
+  left: 36px;
+  top: 4px;
+}
+.data-table tr:nth-child(2n + 1) {
+  background: #f9f9f9;
+}
+.data-table th {
+  background: #f4f5ff;
+  color: #142142;
+}
+.data-table tr.header,
+.data-table tr.header th {
+  background: #417bef;
+  color: white;
+}
+::-webkit-scrollbar {
+  width: 1px;
+}
+::v-deep .n-base-select .n-base-select-option {
+  font-size: 12px; /* 设置字体大小 */
+}
+.naive-select .n-select-dropdown {
+  font-size: 12px; /* 设置字体大小 */
+}
+.underline-text {
+  border-bottom: 1px solid black;
+  padding-bottom: 2px;
+}
+
+.icoT {
+  padding: 5px;
+  color: #fff;
+  background-color: #002aae;
+  border-radius: 5px;
+}
+
+.top {
+  position: absolute;
+  right: 30px;
+  top: -70px;
+}
+
+.page-wrapper {
+  .card {
+    // width: 480px;
+    // height: 428px;
+    width: 480px;
+    height: 395px;
+    border-radius: 18px;
+    overflow: hidden;
+
+    background-color: #fff;
+    // border: 1px solid #e7ebf5;
+    box-shadow: 1px 2px 12px rgba(14, 86, 221, 0.32);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    &::after {
+      content: ' ';
+      background-image: url('@/assets/images/bg-card.svg');
+      pointer-events: none;
+      display: block;
+      width: 100%;
+      height: 127px;
+      background-size: cover;
+      position: absolute;
+      left: 0;
+      top: -1px;
+    }
+
+    .card_title {
+      flex-shrink: 0;
+      font-size: 28px;
+      color: #142142;
+      padding: 20px;
+      padding-bottom: 0;
+    }
+
+    .card_sub-title {
+      color: rgba(128, 134, 150, 0.8);
+      font-size: 16px;
+      padding: 0 20px;
+      padding-bottom: 0;
+      margin-top: 10px;
+    }
+
+    .card_nav1 {
+      background-image: url('@/assets/images/bg-card-nav.svg');
+    }
+
+    .card_nav2 {
+      background-image: url('@/assets/images/youj@2x.png');
+    }
+
+    .card_nav {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 276px;
+      height: 66px;
+
+      background-position: top right;
+      background-repeat: no-repeat;
+      background-size: contain;
+
+      font-size: 20px;
+      color: #fff;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      padding-left: 38px;
+      padding-right: 22px;
+      padding-bottom: 20px;
+
+      .card_nav_item {
+        width: 80px;
+        height: 36px;
+        text-align: center;
+        padding-top: 8px;
+        cursor: pointer;
+
+        &.active {
+          color: #032fa0;
+          background-image: url('@/assets/images/bg-card-nav-item.svg');
+          background-position: bottom;
+          background-repeat: no-repeat;
+          background-size: contain;
+        }
+      }
+    }
+
+    .card_content {
+      flex: 1;
+      margin-top: 10px;
+    }
+  }
+
+  .topics {
+    .item {
+      border-radius: 8px;
+      width: 210px;
+      height: 155px;
+      box-shadow: inset 1.4px 1.4px 0px 0px rgba(255, 255, 255, 0.004);
+      overflow: hidden;
+
+      background-image: url('@/assets/images/bg-card4.svg');
+      background-position: -2px -2px;
+      background-repeat: no-repeat;
+      background-size: 215px 165px;
+      position: relative;
+
+      .item_title {
+        padding-left: 16px;
+        padding-top: 22px;
+        color: #002fa7;
+        position: relative;
+        // z-index: 9;
+      }
+
+      .item_sub-title {
+        color: rgba(128, 134, 150, 0.8);
+        font-size: 12px;
+        font-weight: normal;
+        padding: 0 16px;
+        padding-bottom: 0;
+        margin-top: 10px;
+        z-index: 9;
+      }
+
+      .item_img {
+        position: absolute;
+        bottom: -10px;
+        right: 0;
+        // z-index: 5;
+        transition: transform 0.3s;
+
+        &:hover {
+          transform: scale(1.2);
+        }
+      }
+    }
+  }
+
+  .news {
+    .card_content {
+      padding: 20px;
+      padding-top: 0;
+    }
+
+    .news_card {
+      // width: 442px;
+      height: 180px;
+      padding: 16px;
+      font-size: 14px;
+
+      background-repeat: no-repeat;
+
+      background-size: 100% 100%;
+
+      position: relative;
+    }
+  }
+}
+</style>

src/views/home/cd/CD.vue

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

src/views/home/cd/chartData.ts

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

src/views/home/market/Market-bak.vue

@@ -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>

src/views/home/market/Market.vue

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

src/views/home/market/MarketData-bak.ts

@@ -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 }
+}

src/views/home/market/MarketData-new.ts

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

src/views/home/market/MarketData.ts

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

src/views/home/market/Market_new.vue

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