From 40b352620ee70ed335c7d74e1c654e612de152f8 Mon Sep 17 00:00:00 2001 From: zouyiqing <854938661@qq.com> Date: Wed, 18 Oct 2023 14:00:08 +0800 Subject: [PATCH] =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=9B=9E=E9=80=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AppHeadUserInfo.vue | 19 +- src/router/index.ts | 5 + src/views/company/CSRData.ts | 483 ++++++++++++++ src/views/company/CSRDatas.ts | 585 +++++++++++++++++ src/views/company/statistics.vue | 262 +++++++- .../home/intelligence/components/Layout.vue | 2 +- .../home/intelligence/process/Process.vue | 600 +++++++----------- .../intelligence/process/ProcessPublic.vue | 406 ++++++++++++ src/views/home/market/MarketData.ts | 143 ++--- 9 files changed, 2041 insertions(+), 464 deletions(-) create mode 100644 src/views/company/CSRData.ts create mode 100644 src/views/company/CSRDatas.ts create mode 100644 src/views/home/intelligence/process/ProcessPublic.vue diff --git a/src/components/AppHeadUserInfo.vue b/src/components/AppHeadUserInfo.vue index c616730..6ddfdfc 100644 --- a/src/components/AppHeadUserInfo.vue +++ b/src/components/AppHeadUserInfo.vue @@ -123,7 +123,7 @@ const goStatistics = () => { class="bg-#fff/20 b-1px b-solid b-#fff rd-12px flex items-center h-52px px12px cursor-pointer mr10px" >
- 足迹 + 访问足迹 @@ -155,13 +155,8 @@ const goStatistics = () => {
--> -
- 新着通知 - {{ - store.user.reviewCount ?? 0 - }} -
- - - + + diff --git a/src/router/index.ts b/src/router/index.ts index 97d9a01..85bd6a3 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -180,6 +180,11 @@ const router = createRouter({ name: "messageSelect", component: () => import('@/views/home/intelligence/components/messageSelect.vue') }, + { + path: 'processPublic', + name: "processPublic", + component: () => import('@/views/home/intelligence/process/ProcessPublic.vue') + }, { path: "outside", meta: { title: "社外" }, diff --git a/src/views/company/CSRData.ts b/src/views/company/CSRData.ts new file mode 100644 index 0000000..c654b00 --- /dev/null +++ b/src/views/company/CSRData.ts @@ -0,0 +1,483 @@ +import type { EChartsOption } from 'echarts' +import * as echarts from 'echarts' +import 'echarts-liquidfill'; +import { getCSRDetail } from '@/api/daikin/base' +import { create } from 'naive-ui'; +const forms = ref({ + lable1:{ + name: '大金集团碳减排目标', + year: 'F25', + date: '14%', + title1:'', + title2:'', +}, +lable2:{ + name: 'CN调达本部碳减排目标', + year: 'F25', + date: '14%', + title1:'', + title2:'', +}, +lable3:{ + name: 'CN调达本部碳减排目标', + year: 'F23', + date: '14%', + title1:'', + title2:'', +}, +lable4:{ + name: '2020实绩, 2021, 2022实绩, 2026, 2027, 2028', + year: '1, 2, 3, 4, 70, 110', + date: '0, 0, 0, 80, 70, 110', + title1:'你好', + title2:'足迹', +}, +lable5:{ + name: '30%碳减排课题收集整体情况:', + year: '60', + date: '14%', + title1:'原材料: 15.5%', + title2:'能源消耗: 1.7%', +}, +lable6:{ + name: 'FY23碳减排实施完成情况:', + year: '0.6', + data:'', + title1:'原材料', + title2:'整体目标10%', +}, +lable7:{ + name:'', + data:'', + year: '0.6', + title1:'能源消耗', + title2:'整体目标5%', +}, +lable8:{ + name:'【FY20原材料构成数据】', + data:{ + data1:{ + name:'Search Engine', + value:'1048' + }, + data2:{ + name:'Direct', + value:'735' + } + , + data3:{ + name:'Email', + value:'580' + } + , + data4:{ + name:'', + value:'' + }, + data5:{ + name:'', + value:'' + } + + } +}, +lable9:{ + name:'【FY20能源消耗构成数据】', + data:{ + data1:{ + name:'Search Engine', + value:'1048' + }, + data2:{ + name:'Direct', + value:'735' + } + , + data3:{ + name:'Email', + value:'580' + } + , + data4:{ + name:'Union Ads', + value:'484' + }, + data5:{ + name:'Video Ads', + value:'300' + } + + } +}, +}) +export const Content2 = [ + { + key: '0', + label: '活动计划', + children: [ + { label: '调达本部HP', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: 'CSR-碳中和', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '中国地区连携强化 ', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + ], + }, + { + key: '1', + label: '活动成果', + children: [ + { label: 'Database推进', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '市况', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '汇率', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: 'BCP', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + ], + }, +] +export const Content3 = [ + { + key: '0', + title: 'xx活动概要', + label: '活动计划', + children: [ + { label: '调达本部HP', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: 'CSR-碳中和', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '工作模式变更 ', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '差别化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + ], + }, + { + key: '1', + label: '活动成果', + children: [ + { label: 'Database推进', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '全球连携强化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '高品质高品位', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + ], + }, + { + key: '2', + title: 'xx活动概要', + label: '活动计划', + children: [ + { label: 'CSR-碳中和', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '工作模式变更 ', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '差别化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + ], + }, + { + key: '3', + label: '活动成果', + children: [ + { label: 'Database推进', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '市况', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '全球连携强化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '高品质高品位', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + ], + }, +] +const form = ref() + + +export function charData() { + + const chartRef = ref() + const params = '15%' + const option = ref({}); + const allData = ref([]); + + async function getCSR() { + const { data: { content: { dataList } } } = await getCSRDetail() + console.log("-----------------------------") + if(!dataList){ + console.log("-----------------------------") + allData.value = forms.value + + } + else{ + allData.value = dataList + } + // form.value = dataList + + const options = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + title: [{ text: '单位:k-t' }], + + + xAxis: { + type: 'category', + data: allData.value.lable4.name.split(",") + }, + yAxis: {}, + series: [ + { + name: '目标排放', + type: 'bar', + stack: 'Ad', + barWidth: '30%', + data: allData.value.lable4.year.split(","), + label: + { + show: false, + }, + }, + { + type: 'bar', + stack: 'Ad', + label: + { + show: true, + position: 'inside', + formatter: '{c}%' + }, + barWidth: '30%', + data: allData.value.lable4.date.split(","), + }, + ] + } + option.value = options; + } + + getCSR() + return { chartRef, option } +} + + +export function pieData1() { + const chartRef = ref() + const option = ref({}); + const allData = ref([]); + async function getCSR() { + const { data: { content: { dataList } } } = await getCSRDetail() + if(!dataList){ + console.log("-----------------------------") + allData.value = forms.value + + } + else{ + allData.value = dataList + } + + const options = { + title: { + text: allData.value.lable8.name, + left: 'center', + textStyle: { color: '#4075E1', } + }, + tooltip: { + trigger: 'item' + }, + grid: { left: '20', top: '30', right: '70', bottom: '10', containLabel: true }, + series: [ + { + name: 'Access From', + type: 'pie', + radius: '50%', + + data: Object.values(allData.value.lable8.data).filter(item => item.name !== '' || item.value !== ''), + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + } + option.value = options; + } + getCSR() + + return { chartRef, option } +} + + + +export function pieData2() { + const chartRef = ref() + const option = ref({}); + const allData = ref([]); + async function getCSR() { + const { data: { content: { dataList } } } = await getCSRDetail() + if(!dataList){ + console.log("-----------------------------") + allData.value = forms.value + + } + else{ + allData.value = dataList + } + + const options = { + title: { + text: allData.value.lable9.name, + left: 'center', + textStyle: { color: '#4075E1' } + }, + series: [ + { + name: 'Access From', + type: 'pie', + radius: ['40%', '70%'], + avoidLabelOverlap: false, + itemStyle: { + borderRadius: 10, + borderColor: '#fff', + borderWidth: 2 + }, + label: { + show: true, + formatter(param) { + // correct the percentage + return param.name + ' (' + param.percent * 2 + '%)'; + } + }, + emphasis: { + label: { + show: true, + fontSize: 20, + } + }, + labelLine: { + show: true + }, + data: Object.values(allData.value.lable9.data).filter(item => item.name !== '' || item.value !== '') + } + ] + + } + option.value = options; + } + getCSR() + return { chartRef, option } +} + + + +function generateSimilarValues(number) { + const offset = 0.05; + const similarValues = [number, number - offset, number + offset]; + return similarValues; +} + +export function liQuid() { + const chartRef = ref() + + const option = ref({}); + const allData = ref([]); + async function getCSR() { + const { data: { content: { dataList } } } = await getCSRDetail() + if(!dataList){ + console.log("-----------------------------") + allData.value = forms.value + + } + else{ + allData.value = dataList + } + + const options = { + title: { + text: allData.value.lable6.title2, + // subtext: 'Fake Data', + left: 'center', + bottom: '-5px', + textStyle: { fontSize: '14px', fontWeight: '100' } + }, + series: [{ + type: 'liquidFill', + silent: true, + data: generateSimilarValues(allData.value.lable6.year), + color: ['#41E5BA', '#B1D2FF', '#63E8C4'], + radius: '150px', + backgroundStyle: { + // borderWidth: 0, + // borderColor: 'red', + opacity: '0.4', + color: '#00D491' + // color:'#63E8C4' + }, + outline: { + show: false + }, + label: { + fontSize: 19, + fontColor: '#fff', + formatter: function (param) { + return allData.value.lable6.title1 + '\n' + '\n' + + (param.value * 100) + '%'; + }, + } + }] + + } + option.value = options; + } + getCSR() + return { chartRef, option } +} + +export function liQuids() { + const chartRef = ref() + + const option = ref({}); + const allData = ref([]); + async function getCSR() { + const { data: { content: { dataList } } } = await getCSRDetail() + if(!dataList){ + console.log("-----------------------------") + allData.value = forms.value + + } + else{ + allData.value = dataList + } + + const options = { + title: { + text: allData.value.lable7.title2, + // subtext: 'Fake Data', + left: 'center', + bottom: '-5px', + textStyle: { fontSize: '14px', fontWeight: '100' } + }, + series: [{ + type: 'liquidFill', + silent: true, + data: generateSimilarValues(allData.value.lable7.year), + color: ['#8CBEFF', '#B1D2FF', '#8CBEFF'], + radius: '150px', + backgroundStyle: { + // borderWidth: 0, + // borderColor: 'red', + opacity: '0.6', + color: '#1D88FF' + // color:'#63E8C4' + }, + outline: { + show: false + }, + label: { + fontSize: 19, + fontColor: '#fff', + formatter: function (param) { + return allData.value.lable7.title1 + '\n' + '\n' + + (param.value * 100) + '%'; + }, + } + }] + } + option.value = options; + } + getCSR() + return { chartRef, option } +} \ No newline at end of file diff --git a/src/views/company/CSRDatas.ts b/src/views/company/CSRDatas.ts new file mode 100644 index 0000000..a7588b9 --- /dev/null +++ b/src/views/company/CSRDatas.ts @@ -0,0 +1,585 @@ +import type { EChartsOption } from 'echarts' +import * as echarts from 'echarts' +import 'echarts-liquidfill'; +import {getCSRDetail} from '@/api/daikin/base' + +export const Content2 = [ + { + key: '0', + label: '活动计划', + children: [ + { label: '调达本部HP', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: 'CSR-碳中和', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '中国地区连携强化 ', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + ], + }, + { + key: '1', + label: '活动成果', + children: [ + { label: 'Database推进', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '市况', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '汇率', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: 'BCP', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + ], + }, +] +export const Content3 = [ + { + key: '0', + title: 'xx活动概要', + label: '活动计划', + children: [ + { label: '调达本部HP', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: 'CSR-碳中和', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '工作模式变更 ', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '差别化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + ], + }, + { + key: '1', + label: '活动成果', + children: [ + { label: 'Database推进', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '全球连携强化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '高品质高品位', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + ], + }, + { + key: '2', + title: 'xx活动概要', + label: '活动计划', + children: [ + { label: 'CSR-碳中和', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '工作模式变更 ', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '差别化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + ], + }, + { + key: '3', + label: '活动成果', + children: [ + { label: 'Database推进', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '市况', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '全球连携强化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + { label: '高品质高品位', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] }, + ], + }, +] +const form = ref({ + lable1:{ + name: '大金集团碳减排目标', + year: 'F25', + date: '14%', + title1:'', + title2:'', +}, +lable2:{ + name: 'CN调达本部碳减排目标', + year: 'F25', + date: '14%', + title1:'', + title2:'', +}, +lable3:{ + name: 'CN调达本部碳减排目标', + year: 'F23', + date: '14%', + title1:'', + title2:'', +}, +lable4:{ + name: '2020, 2021, 2022, 2023, 2024, 2025', + year: '120, 200, 150, 80, 70, 110', + date: '85, 45, 67, 80, 70, 110', + title1:'DIS', + title2:'DSZ', +}, +lable14:{ + name: '2020-1-25, 2021-12-12, 2022-11-14, 2023-14-5, 2024, 2025', + year: '120, 200, 150, 80, 70, 110', + date: '85, 45, 67, 80, 70, 110', + title1:'DIS', + title2:'DSZ', +}, +lable5:{ + name: '30%碳减排课题收集整体情况:', + year: '0.6', + date: '14%', + title1:'原材料: 15.5%', + title2:'能源消耗: 1.7%', +}, +lable6:{ + name: '30%碳减排课题收集整体情况:', + year: '0.6', + data:'', + title1:'原材料', + title2:'整体目标10%', +}, +lable7:{ + name:'', + data:'', + year: '0.6', + title1:'能源消耗', + title2:'整体目标5%', +}, +lable8:{ + name:'【FY20原材料构成数据】', + data:{ + data1:{ + name:'Search Engine', + value:'1048' + }, + data2:{ + name:'Direct', + value:'735' + } + , + data3:{ + name:'Email', + value:'580' + } + , + data4:{ + name:'', + value:'' + }, + data5:{ + name:'', + value:'' + } + + } +}, +lable9:{ + name:'【FY20能源消耗构成数据】', + data:{ + data1:{ + name:'Search Engine', + value:'1048' + }, + data2:{ + name:'Direct', + value:'735' + } + , + data3:{ + name:'Email', + value:'580' + } + , + data4:{ + name:'Union Ads', + value:'484' + }, + data5:{ + name:'Video Ads', + value:'300' + } + + } +}, +}) + +async function getCSR() { + const {data,data:{content:{form:ffff}}} = await getCSRDetail() + form.value = ffff +} + +export function charData() { + const chartRef = ref() + const params = '28%' + const option = ref({ + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + legend: { + // data: ['DIS', 'DSZ'], + // bottom:'0px', + // right:'50px' + }, + grid: { + left: '3%', + right: '4%', + bottom: '10%', + containLabel: true + }, + title: [{ text: '111' }], + // color:['#58D9FC','red','#fff'], + // dataset: { + // // 提供一份数据。 + // source: [ + // ['2020实绩', 220, 0, 220], + // ['2021实绩', 182, 0, 182], + // ['2022实绩', 191, 0, 191], + // ['2023', 234, 43, 234], + // ['2024', 290, 23, 290], + // ['2025', 330, 65, 330], + // ] + // }, + xAxis: { type: 'category', + data: form.value.lable4.name.split(",") + }, + yAxis: {}, + series: [ + { + name: 'DIS', + type: 'bar', + barWidth: '30%', + data: form.value.lable4.year.split(","), + label: + { + show: false, + }, + }, + { + name: 'DSZ', + type: 'bar', + label: + { + show: false, + position: 'inside', + formatter: '{c}%' + }, + barWidth: '30%', + data: form.value.lable4.date.split(","), + }, + // { name: '预测/实绩用量', type: 'line' } + ] + }) + return { chartRef, option } +} + +export function charData2() { + + const chartRef = ref() + const params = '15%' + + + const option = ref({ + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + legend: { + data: ['DIS', 'DSZ'], + top:'0px', + right:'50px' + }, + + grid: { + left: '3%', + right: '4%', + + containLabel: true + }, + title: [{ text: '单位:千吨' }], + // color:['#58D9FC','red','#fff'], + // dataset: { + // // 提供一份数据。 + // source: [ + // ['2020实绩', 220, 0, 220], + // ['2021实绩', 182, 0, 182], + // ['2022实绩', 191, 0, 191], + // ['2023', 234, 43, 234], + // ['2024', 290, 23, 290], + // ['2025', 330, 65, 330], + // ] + // }, + + + + xAxis: { type: 'category', + data:form.value.lable14.name.split(","), + axisLabel: { + interval: 0, //隔几项显示一个标签 + rotate: "-90" //标签倾斜的角度，旋转的角度是-90到90度 + } + }, + yAxis: {}, + series: [ + { + name: 'DIS', + type: 'line', + data: form.value.lable14.year.split(","), + + }, + { + name: 'DSZ', + type: 'line', + data: form.value.lable14.date.split(","), + }, + // { name: '预测/实绩用量', type: 'line' } + ] + }) + return { chartRef, option } +} + +export function pieData1() { + const chartRef = ref() + const option = ref({ + title: { + text: form.value.lable8.name, + // subtext: 'Fake Data', + left: 'center', + textStyle: { color: '#4075E1', } + }, + tooltip: { + trigger: 'item' + }, + grid: { left: '20', top: '30', right: '70', bottom: '10', containLabel: true }, + // legend: { + // orient: 'vertical', + // left: 'left' + // }, + series: [ + { + name: 'Access From', + type: 'pie', + selectedMode: 'single', + radius: [0, '30%'], + label: { + position: 'inner', + fontSize: 14 + }, + labelLine: { + show: false + }, + data: [ + { value: 1548, name: '铝',label:{color:'#fff',fontSize:'16px',fontWeight:'bold'} }, + { value: 775, name: '铁',label:{color:'#fff',fontSize:'16px',fontWeight:'bold'} }, + { value: 679, name: '铜', selected: true ,label:{color:'#fff',fontSize:'16px',fontWeight:'bold'}} + ], + // 自定义颜色 + itemStyle: { + emphasis: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)', + }, + normal: { + // 自定义每个扇形的颜色 + color: function (params) { + const colorList = ['#3EC22B', '#3EC22B', '#3EC22B',]; + return colorList[params.dataIndex]; + }, + }, + }, + }, + { + name: 'Access From', + type: 'pie', + radius: ['45%', '60%'], + avoidLabelOverlap: false, + itemStyle: { + // borderRadius: 10, + borderColor: '#fff', + borderWidth: 4 + }, + labelLine: { + length: 30 + }, + label: { + formatter: ' {b|{b}：}{c}吨 ', + backgroundColor: '#F6F8FC', + borderColor: '#8C8D8E', + borderWidth: 1, + borderRadius: 4, + + rich: { + a: { + color: '#6E7079', + lineHeight: 22, + align: 'center' + }, + hr: { + borderColor: '#8C8D8E', + width: '100%', + borderWidth: 1, + height: 0 + }, + b: { + color: '#4C5058', + fontSize: 14, + fontWeight: 'bold', + lineHeight: 33 + }, + per: { + color: '#fff', + backgroundColor: '#4C5058', + padding: [3, 4], + borderRadius: 4 + } + } + }, + data: [ + { value: 335, name: '铝' }, + { value: 310, name: '铁' }, + { value: 135, name: '铜' }, + ], + // 自定义颜色 + // itemStyle: { + // borderColor: '#fff', + // borderWidth: 2, + // emphasis: { + // shadowBlur: 10, + // shadowOffsetX: 0, + // shadowColor: 'rgba(0, 0, 0, 0.5)', + // }, + // normal: { + // // 自定义每个扇形的颜色 + // color: function (params) { + // const colorList = ['#337EE6', '#337EE6', '#337EE6',]; + // return colorList[params.dataIndex]; + // }, + // }, + // }, + } + ] + + }) + return { chartRef, option } +} + + + +export function pieData2() { + const chartRef = ref() + const option = ref({ + // legend: { + // top: 'bottom' + // }, + title: { + text: form.value.lable9.name, + // subtext: 'Fake Data', + left: 'center', + textStyle: { color: '#4075E1' } + }, + series: [ + { + name: 'Access From', + type: 'pie', + radius: ['40%', '70%'], + avoidLabelOverlap: false, + itemStyle: { + borderRadius: 10, + borderColor: '#fff', + borderWidth: 2 + }, + label: { + show: true, + formatter(param) { + // correct the percentage + return param.name + ' (' + param.percent * 2 + '%)'; + } + }, + emphasis: { + label: { + show: true, + fontSize: 20, + // fontWeight: 'bold' + } + }, + labelLine: { + show: true + }, + // data: [ + // { value: 1048, name: 'Search Engine' }, + // { value: 735, name: 'Direct' }, + // { value: 580, name: 'Email' }, + // { value: 484, name: 'Union Ads' }, + // { value: 300, name: 'Video Ads' } + // ] + data: Object.values(form.value.lable9.data).filter(item => item.name !== '' || item.value !== '') + } + ] + + }) + return { chartRef, option } +} + +const gl = '10%' +export function liQuid() { + const chartRef = ref() + const option = ref({ + title: { + text: '整体目标加' + gl, + // subtext: 'Fake Data', + left: 'center', + bottom: '-5px', + textStyle: { fontSize: '14px', fontWeight: '100' } + }, + series: [{ + type: 'liquidFill', + silent: true, + data: [0.76, 0.55, 0.62], + color: ['#41E5BA', '#B1D2FF', '#63E8C4'], + radius: '150px', + backgroundStyle: { + // borderWidth: 0, + // borderColor: 'red', + opacity: '0.4', + color: '#00D491' + // color:'#63E8C4' + }, + outline: { + show: false + }, + label: { + fontSize: 19, + fontColor: '#fff', + formatter: function (param) { + return '原材料' + '\n'+ '\n' + + (param.value * 100) + '%'; + }, + } + }] + + }) + return { chartRef, option } +} + +export function liQuids() { + const chartRef = ref() + const option = ref({ + title: { + text: '整体目标加' + gl, + // subtext: 'Fake Data', + left: 'center', + bottom: '-5px', + textStyle: { fontSize: '14px', fontWeight: '100' } + }, + series: [{ + type: 'liquidFill', + silent: true, + data: [0.8, 0.65, 0.72], + color: ['#8CBEFF', '#B1D2FF', '#8CBEFF'], + radius: '150px', + backgroundStyle: { + // borderWidth: 0, + // borderColor: 'red', + opacity: '0.6', + color: '#1D88FF' + // color:'#63E8C4' + }, + outline: { + show: false + }, + label: { + fontSize: 19, + fontColor: '#fff', + formatter: function (param) { + return '能源消耗' + '\n'+ '\n' + + (param.value * 100) + '%'; + }, + } + }] + + }) + return { chartRef, option } +} \ No newline at end of file diff --git a/src/views/company/statistics.vue b/src/views/company/statistics.vue index 0a03c6a..61e5ea6 100644 --- a/src/views/company/statistics.vue +++ b/src/views/company/statistics.vue @@ -2,16 +2,87 @@ + border-radius: 18px; + border: 1px solid #E7EBF5; + box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32); + overflow: auto; +} diff --git a/src/views/home/intelligence/process/ProcessPublic.vue b/src/views/home/intelligence/process/ProcessPublic.vue new file mode 100644 index 0000000..8c484c6 --- /dev/null +++ b/src/views/home/intelligence/process/ProcessPublic.vue @@ -0,0 +1,406 @@ + + + + + + diff --git a/src/views/home/market/MarketData.ts b/src/views/home/market/MarketData.ts index c488e66..ed8ba71 100644 --- a/src/views/home/market/MarketData.ts +++ b/src/views/home/market/MarketData.ts @@ -1,7 +1,7 @@ -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' @@ -9,34 +9,34 @@ const state = reactive({ type: 'Cu', }) const state1 = reactive({ - currencyCodeFrom:'CNA', - currencyCodeTo:'USD', + currencyCodeFrom: 'CNA', + currencyCodeTo: 'USD', }) const state2 = reactive({ - currencyCodeFrom:'CNA', - currencyCodeTo:'USD', + currencyCodeFrom: 'CNA', + currencyCodeTo: 'USD', }) const state3 = reactive({ - currencyCodeFrom:'USD', - currencyCodeTo:'CNA', + currencyCodeFrom: 'USD', + currencyCodeTo: 'CNA', }) const state4 = reactive({ - number:'Cu', + number: 'Cu', type: '2', - dateList:calculateDateIntervals('','').list, - startTime:'', - endTime:'', + dateList: calculateDateIntervals('', '').list, + startTime: '', + endTime: '', }) const state5 = reactive({ - currencyCodeFrom:'CNA', - currencyCodeTo:'JPY', + currencyCodeFrom: 'CNA', + currencyCodeTo: 'JPY', type: '2', - dateList:calculateDateIntervals('','').list, - startTime:'', - endTime:'', + dateList: calculateDateIntervals('', '').list, + startTime: '', + endTime: '', }) -function getDay(){ +function getDay() { const today = new Date(); const pastSevenDays = []; @@ -49,26 +49,24 @@ function getDay(){ return pastSevenDays; } -function reverseArray(inputArray: string | any[],star: number,enc: number) { +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)); + reversedArray.push(inputArray[i].substring(star, enc)); } - + return reversedArray; } -export function Chart1() { +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] - + async function getDat() { + const { data } = await historyMarketSevenDay({ number: state.type }) + if (!data) return + let { LME, SMM } = data[state.type] const option = { - height: '150px', // 设置图表高度为 400 像素 grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true }, tooltip: { @@ -81,7 +79,7 @@ async function getDat() { }, xAxis: { type: 'category', - data: reverseArray(getDay(),5,10) + data: reverseArray(getDay(), 5, 10) }, yAxis: [ { @@ -133,7 +131,6 @@ async function getDat() { const option = chartRef.value; chartRef.value = option; }); - return { chartRef, option: optionRef, state } } @@ -142,11 +139,11 @@ export function Chart3() { const chartRef = ref() const optionRef = ref({}); - async function getDat() { - const {data} = await historyStatSevenDay({currencyCodeFrom:state2.currencyCodeFrom,currencyCodeTo:state2.currencyCodeTo}) - if(!data) return - const dat = data[state2.currencyCodeFrom+'-'+state2.currencyCodeTo] - + async function getDat() { + const { data } = await historyStatSevenDay({ currencyCodeFrom: state2.currencyCodeFrom, currencyCodeTo: state2.currencyCodeTo }) + if (!data) return + const dat = data[state2.currencyCodeFrom + '-' + state2.currencyCodeTo] + const option = { height: '150px', // 设置图表高度为 400 像素 @@ -155,20 +152,20 @@ export function Chart3() { trigger: 'axis' }, legend: { - data:state2.currencyCodeFrom+'-'+state2.currencyCodeTo, + data: state2.currencyCodeFrom + '-' + state2.currencyCodeTo, right: 20, top: 10, }, xAxis: { type: 'category', - data: reverseArray(getDay(),8,10) + data: reverseArray(getDay(), 8, 10) }, yAxis: { type: 'value' }, series: [ { - name: state2.currencyCodeFrom+'-'+state2.currencyCodeTo, + name: state2.currencyCodeFrom + '-' + state2.currencyCodeTo, data: dat, color: '#8F97F8', type: 'line', @@ -183,7 +180,7 @@ export function Chart3() { optionRef.value = option; } - const ss = computed(() => [state2.currencyCodeFrom,state2.currencyCodeTo]) + const ss = computed(() => [state2.currencyCodeFrom, state2.currencyCodeTo]) watch(() => unref(ss), async (v) => { console.log(state2.type) @@ -205,11 +202,11 @@ export function Chart4() { const chartRef = ref() const optionRef = ref({}); - async function getDat() { - const {data} = await historyStatSevenDay({currencyCodeFrom:state3.currencyCodeFrom,currencyCodeTo:state3.currencyCodeTo}) - if(!data) return - const dat = data[state3.currencyCodeFrom+'-'+state3.currencyCodeTo] - + async function getDat() { + const { data } = await historyStatSevenDay({ currencyCodeFrom: state3.currencyCodeFrom, currencyCodeTo: state3.currencyCodeTo }) + if (!data) return + const dat = data[state3.currencyCodeFrom + '-' + state3.currencyCodeTo] + const option = { grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true }, @@ -219,20 +216,20 @@ export function Chart4() { trigger: 'axis' }, legend: { - data:state3.currencyCodeFrom+'-'+state3.currencyCodeTo, + data: state3.currencyCodeFrom + '-' + state3.currencyCodeTo, right: 20, top: 10, }, xAxis: { type: 'category', - data: reverseArray(getDay(),8,10) + data: reverseArray(getDay(), 8, 10) }, yAxis: { type: 'value' }, series: [ { - name: state3.currencyCodeFrom+'-'+state3.currencyCodeTo, + name: state3.currencyCodeFrom + '-' + state3.currencyCodeTo, data: dat, color: '#8F97F8', type: 'line', @@ -240,16 +237,16 @@ export function Chart4() { show: true, position: 'top' }, - + }, - + ] } - optionRef.value = option; + optionRef.value = option; } - const ss = computed(() => [state3.currencyCodeFrom,state3.currencyCodeTo]) + const ss = computed(() => [state3.currencyCodeFrom, state3.currencyCodeTo]) watch(() => unref(ss), async (v) => { console.log(state3.type) @@ -269,15 +266,15 @@ export function Chart4() { export function Chart5() { const chartRef = ref() const optionRef = ref({}); - 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 + 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 } - + const option = { // width: '250px', // 设置图表宽度为 800 像素 @@ -293,7 +290,7 @@ async function dataList() { }, xAxis: { type: 'category', - data:nameX + data: nameX }, yAxis: [ { @@ -327,13 +324,13 @@ async function dataList() { } optionRef.value = option; } - const ss = computed(() => [state4.number,state4.startTime,state4.endTime]) + 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 + const { type, list } = calculateDateIntervals(state4.startTime, state4.endTime) + nameX = list state4.dateList = list state4.type = type console.log(state4.number) @@ -352,10 +349,10 @@ export function Chart6() { const chartRef = ref() const optionRef = ref({}); - 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] + 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] const option = { // width: '250px', // 设置图表宽度为 800 像素 // height: '150px', // 设置图表高度为 400 像素 @@ -370,14 +367,14 @@ async function getDat() { // }, xAxis: { type: 'category', - data:nameX + data: nameX }, yAxis: { type: 'value' }, series: [ { - name: state5.currencyCodeFrom+'-'+state5.currencyCodeTo, + name: state5.currencyCodeFrom + '-' + state5.currencyCodeTo, data: dat, color: '#89DF75', type: 'line', @@ -387,12 +384,12 @@ async function getDat() { } optionRef.value = option; } - const ss = computed(() => [state5.currencyCodeFrom,state5.currencyCodeTo,state5.startTime,state5.endTime]) + const ss = computed(() => [state5.currencyCodeFrom, state5.currencyCodeTo, state5.startTime, state5.endTime]) watch(() => unref(ss), async (v) => { - const {type,list} = calculateDateIntervals(state5.startTime,state5.endTime) + const { type, list } = calculateDateIntervals(state5.startTime, state5.endTime) - nameX =list + nameX = list state5.dateList = list state5.type = type getDat()