|
|
@@ -240,11 +240,21 @@ const getChart = useDebounceFn(async () => {
|
|
|
}
|
|
|
}, 1000)
|
|
|
|
|
|
+const resizer = () => {
|
|
|
+ chart?.resize()
|
|
|
+}
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ window.removeEventListener('resize', resizer)
|
|
|
+})
|
|
|
+
|
|
|
const render = () => {
|
|
|
if (!chartRef.value) return
|
|
|
|
|
|
chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
|
|
|
|
|
|
+ window.addEventListener('resize', resizer)
|
|
|
+
|
|
|
const values: number[] = []
|
|
|
|
|
|
for (const [_name, key] of legend.value) {
|
|
|
@@ -524,70 +534,64 @@ const tolist = (id: number) => {
|
|
|
<h3 class="text-xl font-medium">{{ `${deptName}-${tab}` }}</h3>
|
|
|
<el-button size="default" type="primary" @click="exportAll">导出</el-button>
|
|
|
</div>
|
|
|
- <el-auto-resizer>
|
|
|
- <template #default="{ height, width }">
|
|
|
+ <!-- <el-auto-resizer>
|
|
|
+ <template #default="{ height, width }"> -->
|
|
|
+ <Motion
|
|
|
+ as="div"
|
|
|
+ :style="{ position: 'relative', overflow: 'hidden' }"
|
|
|
+ :animate="{ height: `${500}px`, width: `100%` }"
|
|
|
+ :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
|
|
|
+ >
|
|
|
+ <AnimatePresence :initial="false" mode="sync">
|
|
|
<Motion
|
|
|
+ :key="currentTab"
|
|
|
as="div"
|
|
|
- :style="{ position: 'relative', overflow: 'hidden' }"
|
|
|
- :animate="{ height: `${height}px`, width: `${width}px` }"
|
|
|
- :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
|
|
|
+ :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
|
|
|
+ :animate="{ x: '0%', opacity: 1 }"
|
|
|
+ :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
|
|
|
+ :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
|
|
|
+ :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
|
|
|
>
|
|
|
- <AnimatePresence :initial="false" mode="sync">
|
|
|
- <Motion
|
|
|
- :key="currentTab"
|
|
|
- as="div"
|
|
|
- :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
|
|
|
- :animate="{ x: '0%', opacity: 1 }"
|
|
|
- :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
|
|
|
- :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
|
|
|
- :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
|
|
|
+ <div :style="{ width: `100%`, height: `${500}px` }">
|
|
|
+ <el-table
|
|
|
+ v-if="currentTab === '表格'"
|
|
|
+ v-loading="listLoading"
|
|
|
+ :data="list"
|
|
|
+ :stripe="true"
|
|
|
+ :max-height="500"
|
|
|
+ show-overflow-tooltip
|
|
|
>
|
|
|
- <div :style="{ width: `${width}px`, height: `${height}px` }">
|
|
|
- <el-table
|
|
|
- v-if="currentTab === '表格'"
|
|
|
- v-loading="listLoading"
|
|
|
- :data="list"
|
|
|
- :stripe="true"
|
|
|
- :width="width"
|
|
|
- :max-height="height"
|
|
|
- show-overflow-tooltip
|
|
|
- >
|
|
|
- <template v-for="item in columns(type)" :key="item.prop">
|
|
|
- <el-table-column
|
|
|
- v-if="item.prop !== 'name'"
|
|
|
- :label="item.label"
|
|
|
- :prop="item.prop"
|
|
|
- align="center"
|
|
|
- :formatter="formatter"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- v-else
|
|
|
- :label="item.label"
|
|
|
- :prop="item.prop"
|
|
|
- align="center"
|
|
|
- >
|
|
|
- <template #default="{ row }">
|
|
|
- <el-button text type="primary" @click.prevent="tolist(row.id)">{{
|
|
|
- row.name
|
|
|
- }}</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <template v-for="item in columns(type)" :key="item.prop">
|
|
|
+ <el-table-column
|
|
|
+ v-if="item.prop !== 'name'"
|
|
|
+ :label="item.label"
|
|
|
+ :prop="item.prop"
|
|
|
+ align="center"
|
|
|
+ :formatter="formatter"
|
|
|
+ />
|
|
|
+ <el-table-column v-else :label="item.label" :prop="item.prop" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button text type="primary" @click.prevent="tolist(row.id)">{{
|
|
|
+ row.name
|
|
|
+ }}</el-button>
|
|
|
</template>
|
|
|
- </el-table>
|
|
|
- <div
|
|
|
- ref="chartRef"
|
|
|
- v-loading="chartLoading"
|
|
|
- :key="dayjs().valueOf()"
|
|
|
- v-else
|
|
|
- :style="{ width: `${width}px`, height: `${height}px` }"
|
|
|
- >
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </Motion>
|
|
|
- </AnimatePresence>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <div
|
|
|
+ ref="chartRef"
|
|
|
+ v-loading="chartLoading"
|
|
|
+ :key="dayjs().valueOf()"
|
|
|
+ v-else
|
|
|
+ :style="{ width: `100%`, height: `${500}px` }"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</Motion>
|
|
|
- </template>
|
|
|
- </el-auto-resizer>
|
|
|
+ </AnimatePresence>
|
|
|
+ </Motion>
|
|
|
+ <!-- </template>
|
|
|
+ </el-auto-resizer> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
Zimo