修复首页图表resize逻辑并添加组件卸载时的资源清理
This commit is contained in:
WUSIJIAN
@@ -1,88 +1,90 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="assets-asset-container">
|
<div class="assets-asset-page">
|
||||||
<el-card shadow="hover">
|
<div class="assets-asset-container">
|
||||||
<div class="assets-asset-search mb15">
|
<el-card shadow="hover">
|
||||||
<el-form :inline="true" :model="tableData.param">
|
<div class="assets-asset-search mb15">
|
||||||
<el-form-item label="资产名称">
|
<el-form :inline="true" :model="tableData.param">
|
||||||
<el-input size="default" v-model="tableData.param.keyword" placeholder="请输入资产名称" clearable style="width: 200px" />
|
<el-form-item label="资产名称">
|
||||||
</el-form-item>
|
<el-input size="default" v-model="tableData.param.keyword" placeholder="请输入资产名称" clearable style="width: 200px" />
|
||||||
<el-form-item label="资产类型">
|
</el-form-item>
|
||||||
<el-select size="default" v-model="tableData.param.type" placeholder="请选择资产类型" clearable style="width: 150px">
|
<el-form-item label="资产类型">
|
||||||
<el-option label="实物" value="physical" />
|
<el-select size="default" v-model="tableData.param.type" placeholder="请选择资产类型" clearable style="width: 150px">
|
||||||
<el-option label="虚拟" value="virtual" />
|
<el-option label="实物" value="physical" />
|
||||||
<el-option label="服务" value="service" />
|
<el-option label="虚拟" value="virtual" />
|
||||||
</el-select>
|
<el-option label="服务" value="service" />
|
||||||
</el-form-item>
|
</el-select>
|
||||||
<el-form-item label="状态">
|
</el-form-item>
|
||||||
<el-select size="default" v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 120px">
|
<el-form-item label="状态">
|
||||||
<el-option label="启用" :value="1" />
|
<el-select size="default" v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 120px">
|
||||||
<el-option label="禁用" :value="0" />
|
<el-option label="启用" :value="1" />
|
||||||
</el-select>
|
<el-option label="禁用" :value="0" />
|
||||||
</el-form-item>
|
</el-select>
|
||||||
<el-form-item>
|
</el-form-item>
|
||||||
<el-button size="default" type="primary" @click="getAssetList">
|
<el-form-item>
|
||||||
<el-icon><ele-Search /></el-icon>
|
<el-button size="default" type="primary" @click="getAssetList">
|
||||||
查询
|
<el-icon><ele-Search /></el-icon>
|
||||||
</el-button>
|
查询
|
||||||
<el-button size="default" @click="onResetQuery">
|
</el-button>
|
||||||
<el-icon><ele-Refresh /></el-icon>
|
<el-button size="default" @click="onResetQuery">
|
||||||
重置
|
<el-icon><ele-Refresh /></el-icon>
|
||||||
</el-button>
|
重置
|
||||||
<el-button size="default" type="success" @click="onOpenAdd">
|
</el-button>
|
||||||
<el-icon><ele-Plus /></el-icon>
|
<el-button size="default" type="success" @click="onOpenAdd">
|
||||||
新增
|
<el-icon><ele-Plus /></el-icon>
|
||||||
</el-button>
|
新增
|
||||||
</el-form-item>
|
</el-button>
|
||||||
</el-form>
|
</el-form-item>
|
||||||
</div>
|
</el-form>
|
||||||
<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading" border>
|
</div>
|
||||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading" border>
|
||||||
<el-table-column prop="name" label="资产名称" min-width="150" show-overflow-tooltip />
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||||
<el-table-column prop="type" label="资产类型" width="100" align="center">
|
<el-table-column prop="name" label="资产名称" min-width="150" show-overflow-tooltip />
|
||||||
<template #default="scope">
|
<el-table-column prop="type" label="资产类型" width="100" align="center">
|
||||||
<el-tag :type="getTypeTagType(scope.row.type)">{{ getTypeLabel(scope.row.type) }}</el-tag>
|
<template #default="scope">
|
||||||
</template>
|
<el-tag :type="getTypeTagType(scope.row.type)">{{ getTypeLabel(scope.row.type) }}</el-tag>
|
||||||
</el-table-column>
|
</template>
|
||||||
<el-table-column prop="status" label="状态" width="100" align="center">
|
</el-table-column>
|
||||||
<template #default="scope">
|
<el-table-column prop="status" label="状态" width="100" align="center">
|
||||||
<el-switch
|
<template #default="scope">
|
||||||
v-model="scope.row.status"
|
<el-switch
|
||||||
:active-value="1"
|
v-model="scope.row.status"
|
||||||
:inactive-value="0"
|
:active-value="1"
|
||||||
inline-prompt
|
:inactive-value="0"
|
||||||
active-text="启用"
|
inline-prompt
|
||||||
inactive-text="禁用"
|
active-text="启用"
|
||||||
@change="onStatusChange(scope.row)"
|
inactive-text="禁用"
|
||||||
/>
|
@change="onStatusChange(scope.row)"
|
||||||
</template>
|
/>
|
||||||
</el-table-column>
|
</template>
|
||||||
<el-table-column prop="onlineTime" label="上线时间" width="170" show-overflow-tooltip />
|
</el-table-column>
|
||||||
<el-table-column prop="offlineTime" label="下线时间" width="170" show-overflow-tooltip />
|
<el-table-column prop="onlineTime" label="上线时间" width="170" show-overflow-tooltip />
|
||||||
<el-table-column prop="createdAt" label="创建时间" width="170" show-overflow-tooltip />
|
<el-table-column prop="offlineTime" label="下线时间" width="170" show-overflow-tooltip />
|
||||||
<el-table-column prop="updatedAt" label="修改时间" width="170" show-overflow-tooltip />
|
<el-table-column prop="createdAt" label="创建时间" width="170" show-overflow-tooltip />
|
||||||
<el-table-column label="操作" width="200" fixed="right" align="center">
|
<el-table-column prop="updatedAt" label="修改时间" width="170" show-overflow-tooltip />
|
||||||
<template #default="scope">
|
<el-table-column label="操作" width="200" fixed="right" align="center">
|
||||||
<el-button size="small" text type="primary" @click="onEdit(scope.row)">修改</el-button>
|
<template #default="scope">
|
||||||
<el-button size="small" text type="success" @click="onAddSku(scope.row)">添加SKU</el-button>
|
<el-button size="small" text type="primary" @click="onEdit(scope.row)">修改</el-button>
|
||||||
<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
|
<el-button size="small" text type="success" @click="onAddSku(scope.row)">添加SKU</el-button>
|
||||||
</template>
|
<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
|
||||||
</el-table-column>
|
</template>
|
||||||
</el-table>
|
</el-table-column>
|
||||||
<!-- 分页 -->
|
</el-table>
|
||||||
<div class="mt15" style="text-align: right">
|
<!-- 分页 -->
|
||||||
<el-pagination
|
<div class="mt15" style="text-align: right">
|
||||||
v-model:current-page="tableData.param.page"
|
<el-pagination
|
||||||
v-model:page-size="tableData.param.pageSize"
|
v-model:current-page="tableData.param.page"
|
||||||
:page-sizes="[10, 20, 50, 100]"
|
v-model:page-size="tableData.param.pageSize"
|
||||||
:total="tableData.total"
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
:total="tableData.total"
|
||||||
@size-change="onSizeChange"
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
@current-change="onCurrentChange"
|
@size-change="onSizeChange"
|
||||||
/>
|
@current-change="onCurrentChange"
|
||||||
</div>
|
/>
|
||||||
</el-card>
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
<EditAsset ref="editAssetRef" @getAssetList="getAssetList" />
|
||||||
</div>
|
</div>
|
||||||
<EditAsset ref="editAssetRef" @getAssetList="getAssetList" />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|||||||
@@ -66,7 +66,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue';
|
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated, onUnmounted } from 'vue';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
@@ -492,10 +492,17 @@ export default defineComponent({
|
|||||||
// 批量设置 echarts resize
|
// 批量设置 echarts resize
|
||||||
const initEchartsResizeFun = () => {
|
const initEchartsResizeFun = () => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
for (let i = 0; i < state.myCharts.length; i++) {
|
for (let i = state.myCharts.length - 1; i >= 0; i--) {
|
||||||
|
const chart = state.myCharts[i] as any;
|
||||||
|
if (!chart || (typeof chart.isDisposed === 'function' && chart.isDisposed())) {
|
||||||
|
state.myCharts.splice(i, 1);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
(<any>state.myCharts[i]).resize();
|
if (chart && typeof chart.resize === 'function' && !(chart.isDisposed && chart.isDisposed())) {
|
||||||
}, i * 1000);
|
chart.resize();
|
||||||
|
}
|
||||||
|
}, (state.myCharts.length - 1 - i) * 200);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@@ -507,6 +514,10 @@ export default defineComponent({
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initEchartsResize();
|
initEchartsResize();
|
||||||
});
|
});
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', initEchartsResizeFun);
|
||||||
|
state.myCharts.length = 0;
|
||||||
|
});
|
||||||
// 由于页面缓存原因，keep-alive
|
// 由于页面缓存原因，keep-alive
|
||||||
onActivated(() => {
|
onActivated(() => {
|
||||||
initEchartsResizeFun();
|
initEchartsResizeFun();
|
||||||
|
|||||||
Reference in New Issue
Block a user