From ccdf3b458ff37294bbcbc2e380113f34548132f2 Mon Sep 17 00:00:00 2001
From: wenlong <web_2021@163.com>
Date: Sun, 18 Aug 2024 11:48:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B8=82=E5=86=B5=E6=B1=87=E7=8E=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                             |   2 +
 src/api/daikin/base.ts                      |   9 +-
 src/router/index.ts                         |   1 +
 src/types/auto-import.d.ts                  |   1 -
 src/views/home/Home.vue                     |  25 +-
 src/views/home/{Home.vue.bak => Home.vue-b} |   0
 src/views/home/cd/CD.vue                    |  10 +-
 src/views/home/cd/chartData.ts              |  32 ++-
 src/views/home/market/MarketData-new.ts     | 288 ++++++++++++++++++--
 src/views/home/market/Market_new.vue        | 151 +++++++---
 10 files changed, 437 insertions(+), 82 deletions(-)
 rename src/views/home/{Home.vue.bak => Home.vue-b} (100%)

diff --git a/components.d.ts b/components.d.ts
index 0ffb117..f5452d0 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -33,8 +33,10 @@ declare module 'vue' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
diff --git a/src/api/daikin/base.ts b/src/api/daikin/base.ts
index 8b84f05..7898e98 100755
--- a/src/api/daikin/base.ts
+++ b/src/api/daikin/base.ts
@@ -1459,9 +1459,14 @@ export async function fetchExchangeInfo(params?: any) {
 
 // 获取分时数据 --沪铜主连
 export async function fetchTimeFuturecenterCu(params?: any) {
-  return http.get(`/marketPre/getTimeFuturecenter/cu0000`, { params })
+  return http.get(`/marketPre/getTimeFuturecenter/${params.type}`)
 }
 // 获取分时数据 --沪铜主连
 export async function fetchTimeFuturecenterAl(params?: any) {
-  return http.get(`/marketPre/getTimeFuturecenter/al0000`, { params })
+  return http.get(`/marketPre/getTimeFuturecenter/${params.type}`)
+}
+
+// 获取SMM/LEM 更新时间
+export async function fetchMarketUpdateTime(params?: any) {
+  return http.get(`/marketPre/getLastTime`, { params })
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 52301fc..a612c34 100755
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -261,6 +261,7 @@ const router = createRouter({
               path: '',
               name: 'Market',
               component: () => import('@/views/home/market/Market_new.vue')
+              // component: () => import('@/views/home/market/Market.vue')
             },
             {
               path: 'MarketDataModify',
diff --git a/src/types/auto-import.d.ts b/src/types/auto-import.d.ts
index 64ff13c..c313e4d 100755
--- a/src/types/auto-import.d.ts
+++ b/src/types/auto-import.d.ts
@@ -5,7 +5,6 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
-  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
diff --git a/src/views/home/Home.vue b/src/views/home/Home.vue
index 44dc417..4e894c0 100755
--- a/src/views/home/Home.vue
+++ b/src/views/home/Home.vue
@@ -12,7 +12,8 @@ import {
   getHomeList,
   amountList,
   fetchHomeSmmExInfo,
-  fetchExchangeInfo
+  fetchExchangeInfo,
+  fetchMarketUpdateTime
 } from '@/api/daikin/base'
 import { useUserStore } from '@/stores/modules/user'
 import { groupBy } from 'lodash-es'
@@ -262,7 +263,7 @@ function formatNumber(num = 0) {
   return `${wholePart}.${formattedDecimalPart}`
 }
 
-const homeSmmExInfo = ref<any>({})
+const homeSmmExInfo = ref<any>({铜:[],铝:[]})
 async function getHomeSmmExInfo() {
   const { data } = await fetchHomeSmmExInfo()
   console.log("🚀 ~ file: Home.vue:268 ~ data:", groupBy(data,'instrumentName'))
@@ -275,6 +276,14 @@ async function getHomeExInfo() {
   homeExchangeInfo.value = data
   console.log('🚀 ~ file: Home.vue:252 ~ }):', data)
 }
+
+getLastTime()
+const updateTime = ref<any>({})
+async function getLastTime() {
+  const { data } = await fetchMarketUpdateTime()
+  // homeExchangeInfo.value = data
+  updateTime.value = data
+}
 </script>
 
 <template>
@@ -437,8 +446,8 @@ async function getHomeExInfo() {
           <div class="flex justify-between items-center">
             <div class="text-#fff bg-#002FA7 rounded-5px px18px py6px">市况</div>
             <div class="flex flex-col text-#ACACAC flex-1 justify-end text-end text-13px">
-              <div class="text- flex justify-end">更新时间：<p class="">{{ timeA }} (SMM)</p class="min-w-200px"></div>
-              <div class="text- my4px flex justify-end">{{ timeA }} (LEM)</div>
+              <div class="text- flex justify-end">更新时间：<p class="min-w-100px text-start">{{ updateTime.SMM }}</p > (SMM)</div>
+              <div class="text- my4px flex justify-end"><p class="min-w-100px text-start">{{ updateTime.LME }}</p> (LME)</div>
             </div>
           </div>
           <table
@@ -484,15 +493,15 @@ async function getHomeExInfo() {
                 <td rowspan="2" class="text-14px text-#000 bg-#EDF8FF">{{ item }}</td>
                 <td class="text-14px text-#000">{{ homeSmmExInfo[item]?.[0]?.channel }}</td>
                 <td class="text-14px text-#000">{{ homeSmmExInfo[item]?.[0]?.negAmount }}</td>
-                <td class="text-14px text-#000" :class="homeSmmExInfo[item]?.[0]?.diffPrice < 0 ? 'text-#63BF8D' : 'text-red'">{{ displayDiffValue(homeSmmExInfo[item]?.[0]?.diffPrice) }}</td>
-                <td class="text-14px text-#000" :class="homeSmmExInfo[item]?.[0]?.diffValue < 0 ? 'text-#63BF8D' : 'text-red'">{{ displayDiffValue(homeSmmExInfo[item]?.[0]?.diffValue) }}%</td>
+                <td class="text-14px text-#000" :class="homeSmmExInfo[item]?.[0]?.diffPrice < 0 ? 'text-#63BF8D' : 'text-red'">{{ displayDiffValue(homeSmmExInfo[item]?.[0]?.diffPrice || '') }}</td>
+                <td class="text-14px text-#000" :class="homeSmmExInfo[item]?.[0]?.diffValue < 0 ? 'text-#63BF8D' : 'text-red'">{{ displayDiffValue(homeSmmExInfo[item]?.[0]?.diffValue || '') }}%</td>
               </tr>
               <tr class="h30px bg-#fff">
                 <!-- <td rowspan="2" class="text-14px text-#000 bg-#EDF8FF">{{ item }}</td> -->
                 <td class="text-14px text-#000">{{ homeSmmExInfo[item]?.[1]?.channel }}</td>
                 <td class="text-14px text-#000">{{ homeSmmExInfo[item]?.[1]?.negAmount }}</td>
-                <td class="text-14px text-#000" :class="homeSmmExInfo[item]?.[1]?.diffPrice < 0 ? 'text-#63BF8D' : 'text-red'">{{ displayDiffValue(homeSmmExInfo[item]?.[0]?.diffPrice) }}</td>
-                <td class="text-14px text-#000" :class="homeSmmExInfo[item]?.[1]?.diffValue < 0 ? 'text-#63BF8D' : 'text-red'">{{ displayDiffValue(homeSmmExInfo[item]?.[0]?.diffValue) }}%</td>
+                <td class="text-14px text-#000" :class="homeSmmExInfo[item]?.[1]?.diffPrice < 0 ? 'text-#63BF8D' : 'text-red'">{{ displayDiffValue(homeSmmExInfo[item]?.[0]?.diffPrice || '') }}</td>
+                <td class="text-14px text-#000" :class="homeSmmExInfo[item]?.[1]?.diffValue < 0 ? 'text-#63BF8D' : 'text-red'">{{ displayDiffValue(homeSmmExInfo[item]?.[0]?.diffValue || '') }}%</td>
               </tr>
             </tbody>
           </table>
diff --git a/src/views/home/Home.vue.bak b/src/views/home/Home.vue-b
similarity index 100%
rename from src/views/home/Home.vue.bak
rename to src/views/home/Home.vue-b
diff --git a/src/views/home/cd/CD.vue b/src/views/home/cd/CD.vue
index cfc6510..0dce5fe 100755
--- a/src/views/home/cd/CD.vue
+++ b/src/views/home/cd/CD.vue
@@ -117,7 +117,7 @@ const getPartStatisRate = async (date?: Date) => {
     return { name: item.part, value: item.amount }
   })
   option.value.graphic.style.text = '总计' + '\n' + formatNum(total) + '\n' + '千元'
-  option.value.graphic.style.text = '总计' + '\n' + formatNum(total) + '\n' + '百万元'
+  option.value.graphic.style.text = '总计' + '\n' + formatNum(total) + '\n' + '千元'
 }
 // 生产随机数
 const randomData = () => {
@@ -150,7 +150,7 @@ const getPartHisList = async () => {
       data: data
         .filter((ite: any) => ite.part === item)
         .sort((a, b) => +a.year - +b.year)
-        .map((item: any) => item.amount || 0)
+        .map((item: any) => (item.amount ? item.amount.toFixed(0) : 0))
     }
   })
   option2.value.series = seriesList
@@ -186,7 +186,7 @@ const getPartmaxBusSeedsRate = async () => {
       data: data
         .filter((ite: any) => ite.maxBusSeeds === item)
         .sort((a, b) => +a.year - +b.year)
-        .map((item: any) => item.amount || 0)
+        .map((item: any) => (item.amount ? item.amount.toFixed(0) : 0))
     }
   })
 }
@@ -203,7 +203,7 @@ const getPartminBusSeedsRate = async (date?: Date) => {
   })
   optionMin.value.series[0].data = data.map((item: any) => {
     total += item.amount
-    return { name: item.minBusSeeds, value: item.amount }
+    return { name: item.minBusSeeds, value: item.amount ? item.amount.toFixed(0) : 0 }
   })
   optionMin.value.graphic.style.text = '总计' + '\n' + formatNum(total) + '\n' + '千元'
 }
@@ -235,7 +235,7 @@ const getPartmaxBusSeedsRate2 = async (max = '') => {
       data: data
         .filter((ite: any) => ite[showSupplier.value ? 'supplier' : 'minBusSeeds'] === item)
         .sort((a, b) => +a.year - +b.year)
-        .map((item: any) => item.amount || 0)
+        .map((item: any) => (item.amount ? item.amount.toFixed(0) : 0))
     }
   })
   maxBusSeedsOption.value[max].series = serieList
diff --git a/src/views/home/cd/chartData.ts b/src/views/home/cd/chartData.ts
index a6db1b4..d0c58f6 100644
--- a/src/views/home/cd/chartData.ts
+++ b/src/views/home/cd/chartData.ts
@@ -27,7 +27,7 @@ export function totalPieCharData(arr: any = [], colorList: any = {}) {
           formatNum(params.data.value) +
           '\n' +
           '(' +
-          params.percent +
+          params.percent.toFixed(0) +
           '%' +
           ')'
         )
@@ -72,7 +72,10 @@ export function totalPieCharData(arr: any = [], colorList: any = {}) {
           show: true,
           color: '#fff',
           fontSize: 12,
-          formatter: '{b} ({d}%)'
+          // formatter: '{b} ({d}%)'
+          formatter: function (params: any) {
+            return params.data.name + ': ' + params.percent.toFixed(0) + '%'
+          }
           // position: 'center'
         },
         // emphasis: {
@@ -96,13 +99,13 @@ export function totalPieCharData(arr: any = [], colorList: any = {}) {
 export function totalBarCharData(params: any = {}) {
   const option = {
     tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        crossStyle: {
-          color: '#999'
-        }
-      }
+      trigger: 'axis'
+      // axisPointer: {
+      //   type: 'cross',
+      //   crossStyle: {
+      //     color: '#999'
+      //   }
+      // }
     },
     legend: {
       // type: 'scroll',
@@ -167,10 +170,12 @@ export function totalBarCharData(params: any = {}) {
         // nameLocation: 'left',
         // nameGap: 50,
         axisLine: {
+          show: false,
           lineStyle: {
             color: '#1f78af',
             width: 2 //y轴宽度，这里是为了突出显示加上的
-          }
+          },
+          onZero: false
         }
       },
       {
@@ -200,6 +205,13 @@ export function disBarCharData(params: any = {}) {
         // Use axis to trigger tooltip
         type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
       }
+      // position: function (pos, params, el, elRect, size) {
+      //   const obj: any = {
+      //     top: -10
+      //   }
+      //   obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30
+      //   return obj
+      // }
     },
     legend: {
       left: 'center',
diff --git a/src/views/home/market/MarketData-new.ts b/src/views/home/market/MarketData-new.ts
index 069ce8f..0e5e52e 100755
--- a/src/views/home/market/MarketData-new.ts
+++ b/src/views/home/market/MarketData-new.ts
@@ -66,23 +66,35 @@ function reverseArray(inputArray: string | any[], star: number, enc: number) {
 
   return reversedArray
 }
+
+const cuType = reactive<any>({
+  type: 'cu0000'
+})
 export function Chart1(type = 'Cu') {
   const chartRef = ref()
   const optionRef = ref()
+  // const state = ref({
+  //   type
+  // })
   async function getDat() {
     const { data = {} } =
-      type == 'Cu' ? await fetchTimeFuturecenterCu() : await fetchTimeFuturecenterAl()
+      type == 'Cu'
+        ? await fetchTimeFuturecenterCu({ type: cuType.type })
+        : await fetchTimeFuturecenterAl({ type: cuType.type })
     const { list = [] } = data
     let xData: any = []
     let lastPrice: any = []
     let diff: any = []
+    let diffV: any = []
     list.forEach((item: any) => {
       xData.push(item.updateTime.substr(11, 5))
       lastPrice.push(item.lastPrice)
-      diff.push(parseFloat(item.diffValue).toFixed(2))
+      diff.push(item.avgPrice)
+      diffV.push(parseFloat(item.diff).toFixed(2))
     })
     const option = {
-      height: '270px', // 设置图表高度为 400 像素
+      // height: '270px', // 设置图表高度为 400 像素
+      height: '140px', // 设置图表高度为 400 像素
       grid: {
         left: '10',
         right: '10',
@@ -90,12 +102,19 @@ export function Chart1(type = 'Cu') {
         // bottom: '10',
         containLabel: true
       },
+      legend: {
+        data: ['SMM', 'LME'],
+        right: 20,
+        top: 10
+      },
       tooltip: {
         trigger: 'axis',
         // position: function (pt) {
         //   return [pt[0], '10%']
         // },
         // backgroundColor: '#4c4c4c90',
+        zIndex: 50,
+        appendTo: 'body',
         formatter: function (params: any) {
           const { dataIndex } = params[0]
           const val = list[dataIndex]
@@ -103,7 +122,7 @@ export function Chart1(type = 'Cu') {
           const isUp = val.diffPrice > 0
           const priceStyle = isUp ? 'color: #ec0000;' : 'color: #00da3c;'
           return `
-					<div style="width:120px">
+					<div style="width:120px;font-size:12px;line-height:18px;">
 						<div style="${style}borderBottom: 1px solid #ccc">
 							<span>时间:</span>
 							<span>${val.updateTime?.substr(11, 5)}</span>
@@ -190,17 +209,18 @@ export function Chart1(type = 'Cu') {
         {
           type: 'value',
           name: '',
-          min: 'dataMin',
+          // min: 'dataMin',
           // formatter: '{value} %',
-          alignTicks: true,
+          // alignTicks: true,
           // boundaryGap: [0, '100%'],
           scale: true,
-          minInterval: 0.01,
+          onZero: false,
+          minInterval: 0.1,
           axisLabel: {
             // formatter: '{value}%'
-            formatter: function (value, index) {
-              return value.toFixed(1) + '%'
-            }
+            // formatter: function (value, index) {
+            //   return value.toFixed(1) + '%'
+            // }
           }
         }
       ],
@@ -237,28 +257,254 @@ export function Chart1(type = 'Cu') {
           symbol: 'none',
           yAxisIndex: 1,
           // areaStyle: {},
-          data: diff
+          data: diff,
+          itemStyle: {
+            normal: {
+              // color: '#E08F2D',
+              lineStyle: {
+                color: '#E08F2D'
+              }
+            }
+          }
         }
       ]
     }
     optionRef.value = option
   }
   // const ss = computed(() => [state.type])
-  // watch(
-  //   () => unref(ss),
-  //   async (v) => {
-  //     console.log(state.type)
-  //     getDat()
-  //   },
-  //   { immediate: true, deep: true }
-  // )
-  getDat()
+  watch(
+    () => cuType,
+    async (v) => {
+      getDat()
+    },
+    { immediate: true, deep: true }
+  )
+  // getDat()
   watchEffect(() => {
     const option = chartRef.value
     chartRef.value = option
   })
 
-  return { chartRef, option: optionRef, state }
+  return { chartRef, option: optionRef, cuType }
+}
+const alType = reactive<any>({
+  type: 'al0000'
+})
+export function Chart11(type = 'Al') {
+  const chartRef = ref()
+  const optionRef = ref()
+  // const state = ref({
+  //   type
+  // })
+  async function getDat() {
+    const { data = {} } =
+      type == 'Cu'
+        ? await fetchTimeFuturecenterCu({ type: alType.type })
+        : await fetchTimeFuturecenterAl({ type: alType.type })
+    const { list = [] } = data
+    let xData: any = []
+    let lastPrice: any = []
+    let diff: any = []
+    let diffV: any = []
+    list.forEach((item: any) => {
+      xData.push(item.updateTime.substr(11, 5))
+      lastPrice.push(item.lastPrice)
+      diff.push(item.avgPrice)
+      diffV.push(parseFloat(item.diff).toFixed(2))
+    })
+    const option = {
+      // height: '270px', // 设置图表高度为 400 像素
+      height: '140px', // 设置图表高度为 400 像素
+      grid: {
+        left: '10',
+        right: '10',
+        // top: 90,
+        // bottom: '10',
+        containLabel: true
+      },
+      legend: {
+        data: ['SMM', 'LME'],
+        right: 20,
+        top: 10
+      },
+      tooltip: {
+        trigger: 'axis',
+        // position: function (pt) {
+        //   return [pt[0], '10%']
+        // },
+        // backgroundColor: '#4c4c4c90',
+        appendTo: 'body',
+        formatter: function (params: any) {
+          const { dataIndex } = params[0]
+          const val = list[dataIndex]
+          const style = 'display: flex;justify-content: space-between;align-items: center;'
+          const isUp = val.diffPrice > 0
+          const priceStyle = isUp ? 'color: #ec0000;' : 'color: #00da3c;'
+          return `
+					<div style="width:120px;font-size:12px;line-height:18px;">
+						<div style="${style}borderBottom: 1px solid #ccc">
+							<span>时间:</span>
+							<span>${val.updateTime?.substr(11, 5)}</span>
+						</div>
+						<div style="${style}">
+							<span>最新价:</span>
+							<span style="${priceStyle}">${val.lastPrice}</span>
+						</div>
+						<div style="${style}">
+							<span>涨跌额:</span>
+							<span style="${priceStyle}">${val.diffPrice}</span>
+						</div>
+						<div style="${style}">
+						<span>涨跌幅:</span>
+						<span style="${priceStyle}">${val.diffValue}%</span>
+						</div>
+						<div style="${style}">
+							<span>成交额:</span>
+							<span>${val.donePrice ? (val.donePrice / 100000000).toFixed(2) : 0}亿</span>
+						</div>
+						<div style="${style}">
+							<span>成交量:</span>
+							<span>${val.doneNumber}</span>
+						</div>
+						<div style="${style}">
+							<span>均价:</span>
+							<span>${val.avgPrice}</span>
+						</div>
+						</div>
+						`
+        },
+        position: function (pos, params, el, elRect, size) {
+          const obj: any = {
+            top: 10
+          }
+          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 100
+          return obj
+        },
+        axisPointer: {
+          type: 'cross',
+          animation: true,
+          link: [
+            {
+              xAxisIndex: 'all'
+            }
+          ],
+          label: {
+            backgroundColor: '#505765'
+          }
+        }
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: xData,
+          boundaryGap: false,
+          splitLine: { show: false },
+          axisLine: { onZero: false }
+        }
+      ],
+      yAxis: [
+        // {
+        //   name: 'Dow-Jones index',
+        //   type: 'candlestick',
+        //   data: list,
+        //   itemStyle: {
+        //     color: '#00da3c',
+        //     color0: '#ec0000',
+        //     borderColor: undefined,
+        //     borderColor0: undefined
+        //   }
+        // },
+        {
+          type: 'value',
+          name: '',
+          min: 'dataMin',
+          max: 'dataMax',
+          scale: true,
+          // splitArea: {
+          //   show: true
+          // },
+          boundaryGap: [0, '100%']
+        },
+        {
+          type: 'value',
+          name: '',
+          // min: 'dataMin',
+          // formatter: '{value} %',
+          // alignTicks: true,
+          // boundaryGap: [0, '100%'],
+          scale: true,
+          onZero: false,
+          minInterval: 0.1,
+          axisLabel: {
+            // formatter: '{value}%'
+            // formatter: function (value, index) {
+            //   return value.toFixed(1) + '%'
+            // }
+          }
+        }
+      ],
+      dataZoom: [
+        {
+          type: 'inside',
+          start: 80,
+          end: 100
+        },
+        {
+          start: 80,
+          end: 100
+        }
+      ],
+      series: [
+        {
+          name: '',
+          type: 'line',
+          smooth: true,
+          symbol: 'none',
+          emphasis: {
+            focus: 'series'
+          },
+          // areaStyle: {},
+          data: lastPrice
+        },
+        {
+          name: '',
+          type: 'line',
+          emphasis: {
+            focus: 'series'
+          },
+          smooth: true,
+          symbol: 'none',
+          yAxisIndex: 1,
+          // areaStyle: {},
+          data: diff,
+          itemStyle: {
+            normal: {
+              // color: '#E08F2D',
+              lineStyle: {
+                color: '#E08F2D'
+              }
+            }
+          }
+        }
+      ]
+    }
+    optionRef.value = option
+  }
+  // const ss = computed(() => [state.type])
+  watch(
+    () => alType,
+    async (v) => {
+      getDat()
+    },
+    { immediate: true, deep: true }
+  )
+  // getDat()
+  watchEffect(() => {
+    const option = chartRef.value
+    chartRef.value = option
+  })
+
+  return { chartRef, option: optionRef, alType }
 }
 
 export function Chart3() {
diff --git a/src/views/home/market/Market_new.vue b/src/views/home/market/Market_new.vue
index f10c4d5..8139205 100755
--- a/src/views/home/market/Market_new.vue
+++ b/src/views/home/market/Market_new.vue
@@ -1,13 +1,13 @@
 <!-- 市况 -->
 <script setup lang="ts">
-import { Chart1, Chart3, Chart4, Chart5, Chart6 } from './MarketData-new'
+import { Chart1,Chart11, Chart3, Chart4, Chart5, Chart6 } from './MarketData-new'
 import HomeHead from '@/views/home/components/HomeHead.vue'
 import AppBlock from '@/components/AppBlock.vue'
 import AppNewsBox from '@/components/AppNewsBox.vue'
 // import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
 import { useDate } from '@/views/home/hooks/useDate'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-import { getList, marketPreADD, getMarketUser, saveMarketUser, MarketDownload, MarketPreview, getCurrencyList, getMetalList, fetchExchangeInfo,fetchTimeFuturecenterCu,fetchTimeFuturecenterAl } from '@/api/daikin/base'
+import { getList, marketPreADD, getMarketUser, saveMarketUser, MarketDownload, MarketPreview, getCurrencyList, getMetalList, fetchExchangeInfo, fetchTimeFuturecenterCu, fetchTimeFuturecenterAl } from '@/api/daikin/base'
 import { NModal, NCard } from 'naive-ui'
 import { formatDate } from '@/utils/format'
 import { message } from '@/utils/message'
@@ -16,11 +16,12 @@ import UserList from '@/views/home/intelligence/process/UserPages.vue'
 import Amtion from '@/components/amtion.vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
+import { groupBy } from 'lodash-es'
 import {
-  LegendComponent,
-  TooltipComponent,
-  GridComponent,
-  TitleComponent,
+    LegendComponent,
+    TooltipComponent,
+    GridComponent,
+    TitleComponent,
 } from 'echarts/components'
 import { PieChart, BarChart, LineChart, CandlestickChart } from 'echarts/charts'
 import { noticeld } from '@/stores/modules/noticeId'
@@ -34,15 +35,15 @@ const userCodes = ['admin', 'huilv_dandang', 'tech_service'].some((item) =>
 )
 
 use([
-  CanvasRenderer,
-  LegendComponent,
-  TooltipComponent,
-  GridComponent,
-  TitleComponent,
-  PieChart,
-  BarChart,
-  LineChart,
-  CandlestickChart
+    CanvasRenderer,
+    LegendComponent,
+    TooltipComponent,
+    GridComponent,
+    TitleComponent,
+    PieChart,
+    BarChart,
+    LineChart,
+    CandlestickChart
 ])
 
 const { day, week } = useDate()
@@ -57,12 +58,12 @@ const value2 = ref<[Date, Date]>([
     currentDates.setMonth(currentDates.getMonth() - 11),
     new Date()
 ])
-const { chartRef: chartRef1, option: chartOption1, state } = Chart1()
-const { option: chartOption11 } = Chart1('Al')
+const { chartRef: chartRef1, option: chartOption1, cuType } = Chart1()
+const { option: chartOption11,alType } = Chart11()
 const { chartRef: chartRef3, option: chartOption3, state2 } = Chart3()
 const { chartRef: chartRef4, option: chartOption4, state3 } = Chart4()
-// const { chartRef: chartRef5, option: chartOption5, state4 } = Chart5()
-const {  state4 } = Chart5()
+const { chartRef: chartRef5, option: chartOption5, state4 } = Chart5()
+// const {  state4 } = Chart5()
 const { chartRef: chartRef6, option: chartOption6, state5 } = Chart6()
 
 const listData = ref()
@@ -304,19 +305,23 @@ const CloseThiss = (data: boolean) => {
 }
 
 getHomeExInfo()
+const exchangeInfo = ref({})
 // getTimeFuturecenter()
 const homeExchangeInfo = ref<any>([])
 async function getHomeExInfo() {
-  const { data } = await fetchExchangeInfo()
-  homeExchangeInfo.value = data
-  console.log('🚀 ~ file: Home.vue:252 ~ }):', data)
+    const { data } = await fetchExchangeInfo()
+    exchangeInfo.value = groupBy(data,'channel')
+    console.log('🚀 ~ file: Home.vue:252 ~ }):', exchangeInfo.value)
 }
 
 async function getTimeFuturecenter() {
-  const { data } = await fetchTimeFuturecenterCu()
-  console.log("🚀 ~ file: Market.vue:293 ~ data:", data)
+    const { data } = await fetchTimeFuturecenterCu()
+    console.log("🚀 ~ file: Market.vue:293 ~ data:", data)
 }
 
+const cuTypeChange = (e) => {
+
+}
 </script>
 
 <template>
@@ -333,13 +338,18 @@ async function getTimeFuturecenter() {
                 <div class="box-title">市况</div>
                 <el-button type="primary" v-if="userCode" class="button !mr-30px !mt-[-30px] z-100"
                     @click="push({ name: 'MarketDataModify' })">数据管理</el-button>
-                <div class="bgStyle !h380px mt20px">
+                <div class="bgStyle !h250px mt20px">
                     <div class=" relative w100%">
 
                         <span @click="tabShow(0)" class="title bg-#70BFCD pl18px pr24px">{{ names }}
                             <!-- <el-icon><CaretBottom /></el-icon> -->
                         </span>
                         <!-- <span class="absolute right-160px top-14px z-30 text-#000">最近7天数据</span> -->
+                        <span class="absolute right-10px top-6px z-30 text-#000">
+                            <el-radio-group v-model="cuType.type">
+                                <el-radio-button label="SMM" value="cu0000" />
+                                <el-radio-button label="LME" value="LME_CA_3M" />
+                            </el-radio-group></span>
 
                         <div v-if="false && tab"
                             class="tab absolute bg-#fff w100px top-50px z-50 text-#112144 text-center leading-28px text-18px ">
@@ -359,13 +369,18 @@ async function getTimeFuturecenter() {
                         <VChart class="absolute z-22" ref="chartRef2" :option="chartOption2" autoresize />
                     </div> -->
                 </div>
-                <div class="bgStyle !h380px mt10px">
+                <div class="bgStyle !h250px mt10px">
                     <div class=" relative w100%">
 
                         <span class="title bg-#FF960F pl18px pr28px">{{ 'AI' }}
                             <!-- <el-icon><CaretBottom /></el-icon> -->
                         </span>
                         <!-- <span class="absolute right-160px top-14px z-30 text-#000">最近7天数据</span> -->
+                        <span class="absolute right-10px top-6px z-30 text-#000">
+                            <el-radio-group v-model="alType.type">
+                                <el-radio-button label="SMM" value="al0000" />
+                                <el-radio-button label="LME" value="LME_AH_3M" />
+                            </el-radio-group></span>
                         <VChart class="absolute z-22 left-0 right-0 !w-full" ref="chartRef11" :option="chartOption11"
                             autoresize />
                     </div>
@@ -375,11 +390,77 @@ async function getTimeFuturecenter() {
                     </div> -->
                 </div>
 
+                <div class="bgStyle  !h240px mt10px">
+                    <div>
+                        <span class="title  bg-#003BB7 !text-16px  pl13px pr20px  ">历年数据</span>
+                        <VChart class=" absolute z-22" ref="chartRef5" :option="chartOption5" autoresize />
+                    </div>
+                </div>
                 <div class="mt8px ml10px">
-                
+                    <div class="flex items-center w-45%">
+
+                        <span class="text-#000 whitespace-nowrap">日期:</span>
+                        <el-config-provider :locale="zhCn">
+                            <el-date-picker v-model="value1" type="daterange" range-separator="到"
+                                start-placeholder="开始时间" end-placeholder="结束时间" size="small"
+                                @change="timenFirst" /></el-config-provider>
+                    </div>
                     <div class="flex justify-between items-center">
-                        <el-popover placement="top-end" trigger="click" :popper-style="{ width: '590px',borderRadius:'10px' }"
-                            :teleported="true">
+                        <el-radio-group v-model="from.label.radio" class="ml-4" @change="thisCka">
+                            <el-radio v-if="metal" v-for="im in metal" :label="im.value" size="large">{{ im.title
+                                }}</el-radio>
+                            <!-- <el-radio label="Al" size="large" >Al</el-radio>
+                            <el-radio label="Fe" size="large" >Fe</el-radio>
+                            <el-radio label="Re" size="large" >稀土</el-radio> -->
+                        </el-radio-group>
+                        <el-popover placement="top-end" trigger="click"
+                            :popper-style="{ width: '590px', borderRadius: '10px' }" :teleported="true">
+                            <template #reference>
+                                <div
+                                    class="bg-gr h-42px w115px flex justify-center items-center text-#fff rounded-10px text-18px cursor-pointer font-bold">
+                                    市况预测 <el-icon class="rotate-270deg">
+                                        <CaretBottom />
+                                    </el-icon></div>
+                            </template>
+                            <!-- <Teleport to="v-screen-box"> -->
+                            <!-- <VScaleScreen
+                        ref="fitscreenRef"
+                        :width="1920"
+                        :height="1080"
+                        mode="fit"
+                        > -->
+                            <div class="bgStyle h-250px w-690px mt15px mb10px">
+                                <div class="w-full">
+                                    <span class="title  bg-#003BB7 !text-16px pl13px pr20px b">市况预测</span>
+                                    <!-- <el-button type="primary" v-if="userCode" class="button" @click="getUser(1)">查看范围</el-button> -->
+                                    <el-button type="primary" size="small" v-if="userCode" class="button !mr-2%"
+                                        @click="push({ name: 'MarketModifys' })">管理</el-button>
+                                    <p class="mt40px p15px !border-none max-h250px  overflow-auto">
+                                    <p class="!border-none  w-98% !flex items-center pb10px news-item !pr30rpx"
+                                        v-for="n in listDatas" :key="n">
+                                        <AppNewsBox class="flex-1 !border-none" :text="n.title" :date="n.createTime" />
+                                    <p class="flex-shrink flex !border-none w35px ml20px">
+                                        <el-button size="small" type="primary" @click="lokeFuck(n)">预览</el-button>
+                                        <!-- <el-button type="primary" @click="downloadFile(n)">下载</el-button> -->
+                                    </p>
+                                    </p>
+                                    </p>
+
+                                </div>
+                            </div>
+                            <!-- </VScaleScreen> -->
+                            <!-- </Teleport>  -->
+                        </el-popover>
+                    </div>
+
+                </div>
+
+
+                <div v-if="false" class="mt8px ml10px">
+
+                    <div class="flex justify-between items-center">
+                        <el-popover placement="top-end" trigger="click"
+                            :popper-style="{ width: '590px', borderRadius: '10px' }" :teleported="true">
                             <template #reference>
                                 <div
                                     class="bg-gr h-42px w115px ml-auto flex justify-center items-center text-#fff rounded-10px text-18px cursor-pointer font-bold">
@@ -424,8 +505,8 @@ async function getTimeFuturecenter() {
                 <div class="box-title ">汇率</div>
                 <div class="bgStyle !h250px mt20px">
                     <div class="mr25px">
-                        <span @click="tabShow(1)"
-                            class="title  bg-#FF603A !text-16px pl13px pr20px ">{{ names1 }}<el-icon>
+                        <span @click="tabShow(1)" class="title  bg-#FF603A !text-16px pl13px pr20px ">{{ names1
+                            }}<el-icon>
                                 <CaretBottom />
                             </el-icon></span>
                         <div v-if="tab1"
@@ -440,8 +521,8 @@ async function getTimeFuturecenter() {
                         <VChart class=" absolute z-22" ref="chartRef3" :option="chartOption3" autoresize />
                     </div>
                     <div>
-                        <span @click="tabShow(2)"
-                            class="title  bg-#70BFCD  !text-16px pl13px pr20px ">{{ names2 }}<el-icon>
+                        <span @click="tabShow(2)" class="title  bg-#70BFCD  !text-16px pl13px pr20px ">{{ names2
+                            }}<el-icon>
                                 <CaretBottom />
                             </el-icon></span>
 
@@ -474,8 +555,8 @@ async function getTimeFuturecenter() {
                     </div>
                     <div class="h-30px">
                         <el-radio-group v-model="from.labe2.radio" class="ml-4" @change="thisCka2">
-                            <el-radio v-if="currency" v-for="it in currency" :label="it.value"
-                                size="large">{{ it.title }}</el-radio>
+                            <el-radio v-if="currency" v-for="it in currency" :label="it.value" size="large">{{ it.title
+                                }}</el-radio>
                             <!-- <el-radio label="JPY,USD" size="large" >日元-美元</el-radio>
                             <el-radio label="CNA,USD" size="large" >人民币-美元</el-radio> -->
                         </el-radio-group>