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

update

main
wwl 2023-12-20 18:48:34 +08:00
parent 37675c31ad
commit a10d0e32d1
4 changed files with 551 additions and 413 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/views/home/footprint/index.vue
View File

@ -36,6 +36,26 @@ const pageInfo = reactive({
pageSize: 10, pageSize: 10,
total: 10 total: 10
}) })
const colorList: any = [
'#2592F3',
'#EF8C43',
'#5FCBC5',
'#E5B625',
'#E74848',
'#8E97F8',
'#73ECA5',
'#E7CD3B',
'#E04E89',
'#4EA4E0',
'#C34EE0',
'#8BCF54',
'#56B1FD',
'#24BFBA',
'#44CF8C',
'#6266F8',
'#FA6B39',
'#F05F96'
]
const moduleCode = ref() const moduleCode = ref()
const imoduleCode = ref() const imoduleCode = ref()
const visitDay = ref() const visitDay = ref()
@ -112,7 +132,16 @@ const getDat = async () => {
xAxisData.push(item.moduleName) xAxisData.push(item.moduleName)
siomesData.push(item.visitCount) siomesData.push(item.visitCount)
}) })
chartOption1.value = Chart1(xAxisData, siomesData) chartOption1.value = Chart1(xAxisData)
chartOption1.value.series[0] = {
data: siomesData,
itemStyle: {
color: function (params: any) {
return colorList[params.dataIndex] || '#8F97F8'
}
},
type: 'bar'
}
} }
const externalList = ref<any>([]) const externalList = ref<any>([])
@ -123,17 +152,26 @@ const getExternalTimeStat = async () => {
let xAxisData: any[] = [] let xAxisData: any[] = []
let siomesData: any[] = [] let siomesData: any[] = []
data.forEach( data.forEach(
(item: { moduleName: any; visitCount: any; moduleCode: any }) => { (
item: { moduleName: any; visitCount: any; moduleCode: any },
i: number
) => {
externalObj.value[item.moduleCode] = item.moduleName externalObj.value[item.moduleCode] = item.moduleName
externalObj.value[item.moduleCode + 'color'] = colorList[9 + i]
xAxisData.push(item.moduleName) xAxisData.push(item.moduleName)
siomesData.push(item.visitCount) siomesData.push(item.visitCount)
} }
) )
chartOption2.value = Chart1(xAxisData, siomesData) chartOption2.value = Chart1(xAxisData)
console.log( chartOption2.value.series[0] = {
'🚀 ~ file: index.vue:131 ~ Chart1(xAxisData, siomesData):', data: siomesData,
Chart1(xAxisData, siomesData) itemStyle: {
) color: function (params: any) {
return colorList[9 + params.dataIndex] || '#8F97F8'
}
},
type: 'bar'
}
// chartOption2.value.height=3000 // chartOption2.value.height=3000
// chartOption2.value.width=1000 // chartOption2.value.width=1000
} }
@ -270,10 +308,21 @@ const barOption = {
containLabel: true containLabel: true
}, },
yAxis: { yAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','hour','month','year'], data: [
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'hour',
'month',
'year'
],
axisLabel: { axisLabel: {
show: false, // 隐藏原始的 x 轴标签 show: false, // 隐藏原始的 x 轴标签
interval: 0, interval: 0
} }
}, },
xAxis: { xAxis: {
@ -311,7 +360,7 @@ const barOption = {
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
color: function (params: any) { color: function (params: any) {
return echartsItemColor[params.dataIndex] return colorList[params.dataIndex]
} }
} }
} }
@ -327,7 +376,6 @@ const handleChild = async (data: any) => {
multipleSelection.value.forEach((i: { userId: any }) => { multipleSelection.value.forEach((i: { userId: any }) => {
userIdList.push(i.userId) userIdList.push(i.userId)
}) })
console.log("🚀 ~ file: index.vue:328 ~ userIdList:", userIdList)
} }
const CloseThiss = (data?: boolean) => { const CloseThiss = (data?: boolean) => {
showModal.value = data || false showModal.value = data || false
@ -449,9 +497,10 @@ const isDev = false
<div class="overflow-auto h-720px"> <div class="overflow-auto h-720px">
<div class="mt20px w-full"> <div class="mt20px w-full">
<span <span
class="cardfoot text-#000 p30px mx10px my10px text-center text-18px font-bold" v-for="(i, e) in dataList"
class="cardfoot text-#fff bg-box p30px mx10px my10px text-center text-20px font-bold"
:style="{ 'background-color': colorList[e % colorList.length] }"
v-if="dataList" v-if="dataList"
v-for="i in dataList"
> >
<span>{{ i.moduleName }}</span <span>{{ i.moduleName }}</span
><br /> ><br />
@ -479,11 +528,7 @@ const isDev = false
<div class="mt-30px"> <div class="mt-30px">
<div class="flex items-center" v-if="isDev"> <div class="flex items-center" v-if="isDev">
<span class="text-#000 mr-10px">模块: </span> <span class="text-#000 mr-10px">模块: </span>
<el-select <el-select v-model="moduleCode" placeholder="选择模块" clearable>
v-model="moduleCode"
placeholder="选择模块"
clearable
>
<el-option <el-option
v-for="item in externalList" v-for="item in externalList"
:key="item.id" :key="item.id"
@ -522,7 +567,11 @@ const isDev = false
<p class="text-center mt-10">测试 {{ i }}</p> <p class="text-center mt-10">测试 {{ i }}</p>
</div> </div>
</div> </div>
<VChart class="h-300px w-65% pb-10px ml-auto" key="yyy1" :option="barOption" /> <VChart
class="h-300px w-65% pb-10px ml-auto"
key="yyy1"
:option="barOption"
/>
</div> </div>
</div> </div>
<div class="absolute bottom-2px right-30px z-20 bg-#fff"> <div class="absolute bottom-2px right-30px z-20 bg-#fff">
@ -659,9 +708,10 @@ const isDev = false
<div> <div>
<div class="mt20px w-full"> <div class="mt20px w-full">
<span <span
class="cardfoot text-#000 p30px mx10px my10px text-center text-18px font-bold" class="cardfoot text-#fff p30px mx10px my10px text-center text-18px font-bold"
:style="{ 'background-color': colorList[9 + e] }"
v-if="externalList" v-if="externalList"
v-for="i in externalList" v-for="(i, e) in externalList"
> >
<span>{{ i.moduleName }}</span <span>{{ i.moduleName }}</span
><br /> ><br />
@ -687,12 +737,21 @@ const isDev = false
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
// .bg-box{
// background-image: url('@/views/home/images/bei.png');
// background-repeat: no-repeat;
// background-size: 100% 100%;
// background-position: center right;
// }
.cardfoot { .cardfoot {
display: inline-block; display: inline-block;
height: 120px; height: 120px;
width: 220px; width: 220px;
background-image: url('@/assets/images/bg-card.svg'); // background-image: url('@/assets/images/bg-card.svg');
background-size: cover; background-image: url('@/views/home/images/bei.png');
background-size: 60% 100%;
background-position: center right;
background-repeat: no-repeat;
border-radius: 18px; border-radius: 18px;
box-shadow: 0px 6px 10px -2px rgba(43, 42, 42, 0.25); box-shadow: 0px 6px 10px -2px rgba(43, 42, 42, 0.25);
} }
@ -700,7 +759,9 @@ const isDev = false
.cardfoot:hover { .cardfoot:hover {
background-color: #fff; background-color: #fff;
box-shadow: 0px 9px 20px 7px rgba(92, 78, 218, 0.25); box-shadow: 0px 9px 20px 7px rgba(92, 78, 218, 0.25);
color: #2042b4; // color: #2042b4;
color: currentColor;
cursor: pointer;
} }
.top { .top {

21
src/views/home/footprint/indexData.ts
View File

@ -86,11 +86,17 @@ const states = reactive<any>({
// return { chartRef, option: optionRef, states } // return { chartRef, option: optionRef, states }
// } // }
export function Chart1(xAxisData:any =[],siomesData:any=[],options={}) { export function Chart1(xAxisData: any = [], color = []) {
const option = { const option = {
width: '100%', width: '100%',
// height: '450px', // 设置图表高度为 400 像素 // height: '450px', // 设置图表高度为 400 像素
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true }, grid: {
left: '10',
top: 90,
right: '10',
bottom: '10',
containLabel: true
},
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
@ -105,13 +111,14 @@ export function Chart1(xAxisData:any =[],siomesData:any=[],options={}) {
], ],
series: [ series: [
{ {
data: siomesData, data: [],
color: '#8F97F8', color: function (params: any) {
type: 'bar', return color[params.dataIndex] || '#8F97F8'
},
type: 'bar'
} }
] ]
} }
return {...option,...options} return { ...option }
} }

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

@ -52,9 +52,14 @@ onMounted(async ()=>{
const {data} =await getCurrencyList() const {data} =await getCurrencyList()
const {data:dat} =await getMetalList() const {data:dat} =await getMetalList()
if(dat&&dat!='null'&&dat.length>0){ if(dat&&dat!='null'&&dat.length>0){
metal.value = dat metal.value = dat.filter((item:any) => {
if(["Fe","lengmei"].includes(item.value)){
return false
}else return item
})
from.value.label.radio = dat[0].value from.value.label.radio = dat[0].value
state4.number = dat[0].value 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 currency.value = data

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

@ -59,25 +59,30 @@ function reverseArray(inputArray: string | any[],star: number,enc: number) {
return reversedArray; return reversedArray;
} }
export function Chart1() { export function Chart1() {
const chartRef = ref() const chartRef = ref()
const optionRef = ref() const optionRef = ref()
async function getDat() { async function getDat() {
const { data } = await historyMarketSevenDay({ number: state.type }) const { data } = await historyMarketSevenDay({ number: state.type })
if (!data) return if (!data) return
let { LME, SMM } = data[state.type] 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 = { const option = {
height: '150px', // 设置图表高度为 400 像素 height: '150px', // 设置图表高度为 400 像素
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true }, grid: {
left: '10',
top: 90,
right: '10',
bottom: '10',
containLabel: true
},
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ["SMM", "LME"], data: ['SMM', 'LME'],
right: 20, right: 20,
top: 10, top: 10
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@ -85,13 +90,13 @@ async function getDat() {
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value'
// name:'1', // name:'1',
}, },
{ {
// name:'2', // name:'2',
type: 'value', type: 'value'
}, }
], ],
series: [ series: [
{ {
@ -100,64 +105,76 @@ async function getDat() {
color: '#8F97F8', color: '#8F97F8',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
showDataShadow: true,
connectNulls: true,
label: { label: {
show: true, show: true,
position: 'top' position: 'top'
}, }
}, },
{ {
name: 'LME', name: 'LME',
data: LME, data: LME,
type: 'line', type: 'line',
color: '#FF603A', color: '#FF603A',
showDataShadow: true,
connectNulls: true,
label: { label: {
show: true, show: true,
position: 'top' position: 'top'
}, }
} }
] ]
} }
optionRef.value = option optionRef.value = option
} }
const ss = computed(() => [state.type]) const ss = computed(() => [state.type])
watch(() => unref(ss), watch(
() => unref(ss),
async (v) => { async (v) => {
console.log(state.type) console.log(state.type)
getDat() getDat()
}, },
{ immediate: true, deep: true }, { immediate: true, deep: true }
) )
watchEffect(() => { watchEffect(() => {
const option = chartRef.value; const option = chartRef.value
chartRef.value = option; chartRef.value = option
}); })
return { chartRef, option: optionRef, state } return { chartRef, option: optionRef, state }
} }
export function Chart3() { export function Chart3() {
const chartRef = ref() const chartRef = ref()
const optionRef = ref<any>({}); const optionRef = ref<any>({})
async function getDat() { async function getDat() {
const {data} = await historyStatSevenDay({currencyCodeFrom:state2.currencyCodeFrom,currencyCodeTo:state2.currencyCodeTo}) const { data } = await historyStatSevenDay({
currencyCodeFrom: state2.currencyCodeFrom,
currencyCodeTo: state2.currencyCodeTo
})
if (!data) return if (!data) return
const dat = data[state2.currencyCodeFrom+'-'+state2.currencyCodeTo] const dat = (
data[state2.currencyCodeFrom + '-' + state2.currencyCodeTo] || []
).map((item: any) => (item == 0 ? null : item))
const option = { const option = {
height: '150px', // 设置图表高度为 400 像素 height: '150px', // 设置图表高度为 400 像素
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true }, grid: {
left: '10',
top: 90,
right: '10',
bottom: '10',
containLabel: true
},
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: state2.currencyCodeFrom + '-' + state2.currencyCodeTo, data: state2.currencyCodeFrom + '-' + state2.currencyCodeTo,
right: 20, right: 20,
top: 10, top: 10
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@ -172,46 +189,56 @@ export function Chart3() {
data: dat, data: dat,
color: '#8F97F8', color: '#8F97F8',
type: 'line', type: 'line',
showDataShadow: true,
connectNulls: true,
label: { label: {
show: true, show: true,
position: 'top' position: 'top'
}, }
}, }
] ]
} }
optionRef.value = option
optionRef.value = option;
} }
const ss = computed(() => [state2.currencyCodeFrom, state2.currencyCodeTo]) const ss = computed(() => [state2.currencyCodeFrom, state2.currencyCodeTo])
watch(() => unref(ss), watch(
() => unref(ss),
async (v) => { async (v) => {
console.log(state2.type) console.log(state2.type)
getDat() getDat()
}, },
{ immediate: true, deep: true }, { immediate: true, deep: true }
) )
watchEffect(() => { watchEffect(() => {
const option = chartRef.value; const option = chartRef.value
chartRef.value = option; chartRef.value = option
}); })
return { chartRef, option: optionRef, state2 } return { chartRef, option: optionRef, state2 }
} }
export function Chart4() { export function Chart4() {
const chartRef = ref() const chartRef = ref()
const optionRef = ref<any>({}); const optionRef = ref<any>({})
async function getDat() { async function getDat() {
const {data} = await historyStatSevenDay({currencyCodeFrom:state3.currencyCodeFrom,currencyCodeTo:state3.currencyCodeTo}) const { data } = await historyStatSevenDay({
currencyCodeFrom: state3.currencyCodeFrom,
currencyCodeTo: state3.currencyCodeTo
})
if (!data) return if (!data) return
const dat = data[state3.currencyCodeFrom+'-'+state3.currencyCodeTo] const dat = (
data[state3.currencyCodeFrom + '-' + state3.currencyCodeTo] || []
).map((item: any) => (item == 0 ? null : item))
const option = { const option = {
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true }, grid: {
left: '10',
top: 90,
right: '10',
bottom: '10',
containLabel: true
},
height: '150px', // 设置图表高度为 400 像素 height: '150px', // 设置图表高度为 400 像素
@ -221,7 +248,7 @@ export function Chart4() {
legend: { legend: {
data: state3.currencyCodeFrom + '-' + state3.currencyCodeTo, data: state3.currencyCodeFrom + '-' + state3.currencyCodeTo,
right: 20, right: 20,
top: 10, top: 10
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@ -236,60 +263,70 @@ export function Chart4() {
data: dat, data: dat,
color: '#8F97F8', color: '#8F97F8',
type: 'line', type: 'line',
showDataShadow: true,
connectNulls: true,
label: { label: {
show: true, show: true,
position: 'top' 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), watch(
() => unref(ss),
async (v) => { async (v) => {
console.log(state3.type) console.log(state3.type)
getDat() getDat()
}, },
{ immediate: true, deep: true }, { immediate: true, deep: true }
) )
watchEffect(() => { watchEffect(() => {
const option = chartRef.value; const option = chartRef.value
chartRef.value = option; chartRef.value = option
}); })
return { chartRef, option: optionRef, state3 } return { chartRef, option: optionRef, state3 }
} }
export function Chart5() { export function Chart5() {
const chartRef = ref() const chartRef = ref()
const optionRef = ref<any>({}); const optionRef = ref<any>({})
let nameX: string[] let nameX: string[]
async function dataList() { async function dataList() {
let SMM, LME let SMM, LME
const {data} = await historyStat({number:state4.number,type:state4.type,dateList:state4.dateList}) const { data } = await historyStat({
number: state4.number,
type: state4.type,
dateList: state4.dateList
})
if (data && data[state4.number]) { if (data && data[state4.number]) {
SMM=data[state4.number].SMM SMM = data[state4.number].SMM || []
LME = data[state4.number].LME 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 = { const option = {
// width: '250px', // 设置图表宽度为 800 像素 // width: '250px', // 设置图表宽度为 800 像素
// height: '150px', // 设置图表高度为 400 像素 // height: '150px', // 设置图表高度为 400 像素
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true }, grid: {
left: '10',
top: 90,
right: '10',
bottom: '10',
containLabel: true
},
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ["SMM", "LME"], data: ['SMM', 'LME'],
right: 20, right: 20,
top: 10, top: 10
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@ -297,13 +334,13 @@ async function dataList() {
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value'
// name:'1', // name:'1',
}, },
{ {
// name:'2', // name:'2',
type: 'value', type: 'value'
}, }
], ],
series: [ series: [
{ {
@ -311,7 +348,9 @@ async function dataList() {
data: SMM, data: SMM,
color: '#FF9307', color: '#FF9307',
type: 'line', type: 'line',
smooth: true smooth: true,
showDataShadow: true,
connectNulls: true
}, },
{ {
name: 'LME', name: 'LME',
@ -320,46 +359,62 @@ async function dataList() {
color: '#0063ED', color: '#0063ED',
smooth: true, smooth: true,
yAxisIndex: 1, yAxisIndex: 1,
showDataShadow: true,
connectNulls: true
} }
] ]
} }
optionRef.value = option; optionRef.value = option
} }
const ss = computed(() => [state4.number, state4.startTime, state4.endTime]) const ss = computed(() => [state4.number, state4.startTime, state4.endTime])
watch(() => unref(ss), watch(
() => unref(ss),
async (v) => { async (v) => {
// console.log(calculateDateIntervals(state4.startTime,state4.endTime),88888) // console.log(calculateDateIntervals(state4.startTime,state4.endTime),88888)
const {type,list} = calculateDateIntervals(state4.startTime,state4.endTime) const { type, list } = calculateDateIntervals(
state4.startTime,
state4.endTime
)
nameX = list nameX = list
state4.dateList = list state4.dateList = list
state4.type = type state4.type = type
console.log(state4.number) console.log(state4.number)
dataList() dataList()
}, },
{ immediate: true, deep: true }, { immediate: true, deep: true }
) )
watchEffect(() => { watchEffect(() => {
const option = chartRef.value; const option = chartRef.value
chartRef.value = option; chartRef.value = option
}); })
return { chartRef, option: optionRef, state4 } return { chartRef, option: optionRef, state4 }
} }
export function Chart6() { export function Chart6() {
const chartRef = ref() const chartRef = ref()
const optionRef = ref<any>({}); const optionRef = ref<any>({})
let nameX: string[] let nameX: string[]
async function getDat() { async function getDat() {
const {data} = await rateHistoryStat({currencyCodeFrom:state5.currencyCodeFrom,currencyCodeTo:state5.currencyCodeTo,type:state5.type,dateList:state5.dateList}) const { data } = await rateHistoryStat({
const dat = data[state5.currencyCodeFrom+'-'+state5.currencyCodeTo] 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 = { const option = {
// width: '250px', // 设置图表宽度为 800 像素 // width: '250px', // 设置图表宽度为 800 像素
// height: '150px', // 设置图表高度为 400 像素 // height: '150px', // 设置图表高度为 400 像素
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true }, grid: {
left: '10',
top: 90,
right: '10',
bottom: '10',
containLabel: true
},
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
@ -381,28 +436,38 @@ async function getDat() {
data: dat, data: dat,
color: '#89DF75', color: '#89DF75',
type: 'line', type: 'line',
smooth: true smooth: true,
}, showDataShadow: true,
connectNulls: true
}
] ]
} }
optionRef.value = option; optionRef.value = option
} }
const ss = computed(() => [state5.currencyCodeFrom,state5.currencyCodeTo,state5.startTime,state5.endTime]) const ss = computed(() => [
watch(() => unref(ss), state5.currencyCodeFrom,
state5.currencyCodeTo,
state5.startTime,
state5.endTime
])
watch(
() => unref(ss),
async (v) => { 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.dateList = list
state5.type = type state5.type = type
getDat() getDat()
}, },
{ immediate: true, deep: true }, { immediate: true, deep: true }
) )
watchEffect(() => { watchEffect(() => {
const option = chartRef.value; const option = chartRef.value
chartRef.value = option; chartRef.value = option
}); })
return { chartRef, option: optionRef, state5 } return { chartRef, option: optionRef, state5 }
} }