|
@@ -617,15 +617,12 @@ const { toggle, isFullscreen } = useFullscreen(targetArea)
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
|
<div
|
|
<div
|
|
|
- class="grid grid-rows-[80px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ class="grid grid-rows-[80px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
|
|
|
<div
|
|
<div
|
|
|
- class="rounded-xl shadow-sm border border-gray-100 border-solid px-6 flex items-center justify-between shrink-0 bg-gradient-to-r from-blue-100 to-white"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ class="rounded-xl shadow-sm border border-gray-100 border-solid px-6 flex items-center justify-between shrink-0 bg-gradient-to-r from-blue-100 to-white">
|
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-4">
|
|
|
<div
|
|
<div
|
|
|
- class="size-12 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center shadow-inner"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ class="size-12 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center shadow-inner">
|
|
|
<el-icon :size="24"><Odometer /></el-icon>
|
|
<el-icon :size="24"><Odometer /></el-icon>
|
|
|
</div>
|
|
</div>
|
|
|
<div>
|
|
<div>
|
|
@@ -637,8 +634,7 @@ const { toggle, isFullscreen } = useFullscreen(targetArea)
|
|
|
<template v-for="item in headerCenterContent" :key="item.key">
|
|
<template v-for="item in headerCenterContent" :key="item.key">
|
|
|
<div
|
|
<div
|
|
|
class="px-8 flex flex-col items-center"
|
|
class="px-8 flex flex-col items-center"
|
|
|
- v-if="item.judgment ? Boolean(query[item.key]) : true"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ v-if="item.judgment ? Boolean(query[item.key]) : true">
|
|
|
<span class="text-xs text-gray-400 mb-1">{{ item.label }}</span>
|
|
<span class="text-xs text-gray-400 mb-1">{{ item.label }}</span>
|
|
|
<span class="font-semibold text-gray-700">{{ data[item.key] }}</span>
|
|
<span class="font-semibold text-gray-700">{{ data[item.key] }}</span>
|
|
|
</div>
|
|
</div>
|
|
@@ -664,8 +660,7 @@ const { toggle, isFullscreen } = useFullscreen(targetArea)
|
|
|
<template v-if="citem.judgment ? Boolean(citem.value.length) : true">
|
|
<template v-if="citem.judgment ? Boolean(citem.value.length) : true">
|
|
|
<div
|
|
<div
|
|
|
class="rounded-xl shadow-sm border border-gray-100 border-solid overflow-hidden bg-gradient-to-b from-blue-100 to-white p-4 flex flex-col gap-2"
|
|
class="rounded-xl shadow-sm border border-gray-100 border-solid overflow-hidden bg-gradient-to-b from-blue-100 to-white p-4 flex flex-col gap-2"
|
|
|
- v-loading="dimensionLoading"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ v-loading="dimensionLoading">
|
|
|
<div class="flex justify-center items-center gap-2 border-0 border-solid">
|
|
<div class="flex justify-center items-center gap-2 border-0 border-solid">
|
|
|
<span class="font-bold text-gray-700! flex items-center gap-2">
|
|
<span class="font-bold text-gray-700! flex items-center gap-2">
|
|
|
<el-icon><component :is="citem.icon" /></el-icon>
|
|
<el-icon><component :is="citem.icon" /></el-icon>
|
|
@@ -673,8 +668,7 @@ const { toggle, isFullscreen } = useFullscreen(targetArea)
|
|
|
</span>
|
|
</span>
|
|
|
<span
|
|
<span
|
|
|
class="text-xs px-2 py-0.5 rounded-full font-mono bg-gray-200"
|
|
class="text-xs px-2 py-0.5 rounded-full font-mono bg-gray-200"
|
|
|
- :class="[citem.countBg, citem.countColor]"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ :class="[citem.countBg, citem.countColor]">
|
|
|
{{ citem.value.length }}
|
|
{{ citem.value.length }}
|
|
|
</span>
|
|
</span>
|
|
|
</div>
|
|
</div>
|
|
@@ -691,20 +685,20 @@ const { toggle, isFullscreen } = useFullscreen(targetArea)
|
|
|
'--theme-color': item.color,
|
|
'--theme-color': item.color,
|
|
|
'--theme-bg-hover': item.bgHover,
|
|
'--theme-bg-hover': item.bgHover,
|
|
|
'--theme-bg-active': item.bgActive
|
|
'--theme-bg-active': item.bgActive
|
|
|
- }"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ }">
|
|
|
<div class="flex justify-between items-center mb-1">
|
|
<div class="flex justify-between items-center mb-1">
|
|
|
<span
|
|
<span
|
|
|
class="text-xs font-medium text-gray-500 transition-colors truncate pr-2 group-hover:text-[var(--theme-color)]"
|
|
class="text-xs font-medium text-gray-500 transition-colors truncate pr-2 group-hover:text-[var(--theme-color)]"
|
|
|
- :class="{ 'text-[var(--theme-color)]!': selectedDimension[item.name] }"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ :class="{ 'text-[var(--theme-color)]!': selectedDimension[item.name] }">
|
|
|
{{ item.name }}
|
|
{{ item.name }}
|
|
|
</span>
|
|
</span>
|
|
|
<div
|
|
<div
|
|
|
class="size-2 rounded-full transition-all duration-300 shadow-sm"
|
|
class="size-2 rounded-full transition-all duration-300 shadow-sm"
|
|
|
:class="selectedDimension[item.name] ? 'scale-100' : 'scale-0'"
|
|
:class="selectedDimension[item.name] ? 'scale-100' : 'scale-0'"
|
|
|
- :style="{ backgroundColor: item.color, boxShadow: `0 0 6px ${item.color}` }"
|
|
|
|
|
- ></div>
|
|
|
|
|
|
|
+ :style="{
|
|
|
|
|
+ backgroundColor: item.color,
|
|
|
|
|
+ boxShadow: `0 0 6px ${item.color}`
|
|
|
|
|
+ }"></div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="flex items-baseline justify-between relative z-19">
|
|
<div class="flex items-baseline justify-between relative z-19">
|
|
@@ -713,8 +707,7 @@ const { toggle, isFullscreen } = useFullscreen(targetArea)
|
|
|
:value="Number(item.value)"
|
|
:value="Number(item.value)"
|
|
|
:duration="500"
|
|
:duration="500"
|
|
|
:suffix="item.suffix"
|
|
:suffix="item.suffix"
|
|
|
- class="text-lg font-bold font-mono tracking-tight text-slate-800"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ class="text-lg font-bold font-mono tracking-tight text-slate-800" />
|
|
|
<span v-else class="text-lg font-bold font-mono tracking-tight text-slate-800">
|
|
<span v-else class="text-lg font-bold font-mono tracking-tight text-slate-800">
|
|
|
{{ item.value }}
|
|
{{ item.value }}
|
|
|
</span>
|
|
</span>
|
|
@@ -726,8 +719,7 @@ const { toggle, isFullscreen } = useFullscreen(targetArea)
|
|
|
? 'opacity-100 shadow-[0_0_8px_currentColor]'
|
|
? 'opacity-100 shadow-[0_0_8px_currentColor]'
|
|
|
: 'opacity-0'
|
|
: 'opacity-0'
|
|
|
"
|
|
"
|
|
|
- :style="{ backgroundColor: item.color, color: item.color }"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ :style="{ backgroundColor: item.color, color: item.color }">
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -736,14 +728,12 @@ const { toggle, isFullscreen } = useFullscreen(targetArea)
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<div
|
|
<div
|
|
|
- class="flex-1 min-h-200 rounded-xl shadow-sm border border-gray-100 border-solid p-4 flex flex-col bg-gradient-to-b from-blue-100 to-white"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ class="flex-1 min-h-200 rounded-xl shadow-sm border border-gray-100 border-solid p-4 flex flex-col bg-gradient-to-b from-blue-100 to-white">
|
|
|
<header class="flex items-center justify-between mb-4">
|
|
<header class="flex items-center justify-between mb-4">
|
|
|
<h3 class="flex items-center gap-2">
|
|
<h3 class="flex items-center gap-2">
|
|
|
<div
|
|
<div
|
|
|
class="i-material-symbols:area-chart-outline-rounded text-sky size-6"
|
|
class="i-material-symbols:area-chart-outline-rounded text-sky size-6"
|
|
|
- text-sky
|
|
|
|
|
- ></div>
|
|
|
|
|
|
|
+ text-sky></div>
|
|
|
数据趋势
|
|
数据趋势
|
|
|
</h3>
|
|
</h3>
|
|
|
<div class="flex gap-4">
|
|
<div class="flex gap-4">
|
|
@@ -760,14 +750,12 @@ const { toggle, isFullscreen } = useFullscreen(targetArea)
|
|
|
size="default"
|
|
size="default"
|
|
|
class="w-100!"
|
|
class="w-100!"
|
|
|
placement="bottom-end"
|
|
placement="bottom-end"
|
|
|
- @change="handleDateChange"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ @change="handleDateChange" />
|
|
|
<el-button
|
|
<el-button
|
|
|
size="default"
|
|
size="default"
|
|
|
:type="isFullscreen ? 'info' : 'primary'"
|
|
:type="isFullscreen ? 'info' : 'primary'"
|
|
|
:icon="isFullscreen ? Crop : FullScreen"
|
|
:icon="isFullscreen ? Crop : FullScreen"
|
|
|
- @click="toggle"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ @click="toggle">
|
|
|
{{ isFullscreen ? '退出全屏' : '全屏' }}
|
|
{{ isFullscreen ? '退出全屏' : '全屏' }}
|
|
|
</el-button>
|
|
</el-button>
|
|
|
</div>
|
|
</div>
|
|
@@ -782,35 +770,29 @@ const { toggle, isFullscreen } = useFullscreen(targetArea)
|
|
|
'--theme-bg-hover': item.bgHover
|
|
'--theme-bg-hover': item.bgHover
|
|
|
}"
|
|
}"
|
|
|
class="w-8 h-full flex flex-col items-center justify-between py-2 gap-1 rounded-full group relative bg-transparent border border-solid border-transparent transition-all duration-300 hover:bg-[var(--theme-bg-hover)] hover-border-gray-200 hover:shadow-md cursor-pointer active:scale-95"
|
|
class="w-8 h-full flex flex-col items-center justify-between py-2 gap-1 rounded-full group relative bg-transparent border border-solid border-transparent transition-all duration-300 hover:bg-[var(--theme-bg-hover)] hover-border-gray-200 hover:shadow-md cursor-pointer active:scale-95"
|
|
|
- @click="handleClickSpec(item.name)"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ @click="handleClickSpec(item.name)">
|
|
|
<span class="[writing-mode:sideways-lr] text-xs text-gray-400">{{ item.max }}</span>
|
|
<span class="[writing-mode:sideways-lr] text-xs text-gray-400">{{ item.max }}</span>
|
|
|
<div
|
|
<div
|
|
|
class="flex-1 w-0.5 rounded-full opacity-40 group-hover:opacity-100 transition-opacity duration-300"
|
|
class="flex-1 w-0.5 rounded-full opacity-40 group-hover:opacity-100 transition-opacity duration-300"
|
|
|
- :style="{ backgroundColor: item.color }"
|
|
|
|
|
- ></div>
|
|
|
|
|
|
|
+ :style="{ backgroundColor: item.color }"></div>
|
|
|
<span
|
|
<span
|
|
|
class="[writing-mode:sideways-lr] text-sm font-bold tracking-widest"
|
|
class="[writing-mode:sideways-lr] text-sm font-bold tracking-widest"
|
|
|
- :style="{ color: item.color }"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ :style="{ color: item.color }">
|
|
|
{{ item.name }}
|
|
{{ item.name }}
|
|
|
</span>
|
|
</span>
|
|
|
<div
|
|
<div
|
|
|
class="flex-1 w-0.5 rounded-full opacity-40 group-hover:opacity-100 transition-opacity duration-300"
|
|
class="flex-1 w-0.5 rounded-full opacity-40 group-hover:opacity-100 transition-opacity duration-300"
|
|
|
- :style="{ backgroundColor: item.color }"
|
|
|
|
|
- ></div>
|
|
|
|
|
|
|
+ :style="{ backgroundColor: item.color }"></div>
|
|
|
<span class="[writing-mode:sideways-lr] text-xs text-gray-400">{{ item.min }}</span>
|
|
<span class="[writing-mode:sideways-lr] text-xs text-gray-400">{{ item.min }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div
|
|
<div
|
|
|
- class="flex flex-1 min-w-0 bg-gray-50/30 rounded-lg border border-dashed border-gray-200 ml-2 relative overflow-hidden bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:20px_20px]"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ class="flex flex-1 min-w-0 bg-gray-50/30 rounded-lg border border-dashed border-gray-200 ml-2 relative overflow-hidden bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:20px_20px]">
|
|
|
<div
|
|
<div
|
|
|
v-loading="chartLoading"
|
|
v-loading="chartLoading"
|
|
|
element-loading-background="transparent"
|
|
element-loading-background="transparent"
|
|
|
ref="chartRef"
|
|
ref="chartRef"
|
|
|
- class="w-full h-full"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ class="w-full h-full">
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|