WxxyDeveloper/Jsl-OA-Web-Re
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix mixin data 问题

Browse Source
This commit is contained in:
liangzhiyuan001 2022-09-15 17:26:38 +08:00
parent d0a1e812e6
commit 5dd23fec48
7 changed files with 41 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/layout/mixin/ResizeHandler.js
View File

@ -13,28 +13,28 @@ export default defineComponent({
} }
}, },
beforeMount() { beforeMount() {
window.addEventListener('resize', this.$_resizeHandler); window.addEventListener('resize', this.resizeHandler);
}, },
beforeUnmount() { beforeUnmount() {
window.removeEventListener('resize', this.$_resizeHandler); window.removeEventListener('resize', this.resizeHandler);
}, },
mounted() { mounted() {
const isMobile = this.$_isMobile(); const isMobile = this.isMobile();
if (isMobile) { if (isMobile) {
store.app().toggleDevice('mobile'); store.app().toggleDevice('mobile');
store.app().closeSidebar({ withoutAnimation: true }); store.app().closeSidebar({ withoutAnimation: true });
} }
}, },
methods: { methods: {
// use $_ for mixins properties // do not use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_isMobile() { isMobile() {
const rect = body.getBoundingClientRect(); const rect = body.getBoundingClientRect();
return rect.width - 1 < WIDTH; return rect.width - 1 < WIDTH;
}, },
$_resizeHandler() { resizeHandler() {
if (!document.hidden) { if (!document.hidden) {
const isMobile = this.$_isMobile(); const isMobile = this.isMobile();
store.app().toggleDevice(isMobile ? 'mobile' : 'desktop'); store.app().toggleDevice(isMobile ? 'mobile' : 'desktop');
if (isMobile) { if (isMobile) {

4
src/views/dashboard/admin/components/BarChart.vue
View File

@ -4,7 +4,7 @@
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { defineComponent } from 'vue'; import { defineComponent, shallowRef } from 'vue';
import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme
import resize from './mixins/resize'; import resize from './mixins/resize';
@ -45,7 +45,7 @@ export default defineComponent({
}, },
methods: { methods: {
initChart() { initChart() {
this.chart = echarts.init(this.$el, macaronsTheme); this.chart = shallowRef(echarts.init(this.$el, macaronsTheme));
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {

4
src/views/dashboard/admin/components/LineChart.vue
View File

@ -4,7 +4,7 @@
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { defineComponent } from 'vue'; import { defineComponent, shallowRef } from 'vue';
import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme
import resize from './mixins/resize'; import resize from './mixins/resize';
@ -59,7 +59,7 @@ export default defineComponent({
}, },
methods: { methods: {
initChart() { initChart() {
this.chart = echarts.init(this.$el, macaronsTheme); this.chart = shallowRef(echarts.init(this.$el, macaronsTheme));
this.setOptions(this.chartData); this.setOptions(this.chartData);
}, },
setOptions({ expectedData, actualData } = {}) { setOptions({ expectedData, actualData } = {}) {

5
src/views/dashboard/admin/components/PanelGroup.vue
View File

@ -80,6 +80,7 @@ export default defineComponent({
} }
.card-panel { .card-panel {
display: flex;
height: 108px; height: 108px;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
@ -130,7 +131,7 @@ export default defineComponent({
.card-panel-icon-wrapper { .card-panel-icon-wrapper {
float: left; float: left;
margin: 14px 0 0 14px; margin: 14px;
padding: 16px; padding: 16px;
transition: all 0.38s ease-out; transition: all 0.38s ease-out;
border-radius: 6px; border-radius: 6px;
@ -144,7 +145,7 @@ export default defineComponent({
.card-panel-description { .card-panel-description {
float: right; float: right;
font-weight: bold; font-weight: bold;
margin: 26px; margin: 26px 0;
margin-left: 0px; margin-left: 0px;
.card-panel-text { .card-panel-text {

4
src/views/dashboard/admin/components/PieChart.vue
View File

@ -4,7 +4,7 @@
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { defineComponent } from 'vue'; import { defineComponent, shallowRef } from 'vue';
import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme
import resize from './mixins/resize'; import resize from './mixins/resize';
@ -43,7 +43,7 @@ export default defineComponent({
}, },
methods: { methods: {
initChart() { initChart() {
this.chart = echarts.init(this.$el, macaronsTheme); this.chart = shallowRef(echarts.init(this.$el, macaronsTheme));
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {

4
src/views/dashboard/admin/components/RaddarChart.vue
View File

@ -4,7 +4,7 @@
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { defineComponent } from 'vue'; import { defineComponent, shallowRef } from 'vue';
import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme
import resize from './mixins/resize'; import resize from './mixins/resize';
@ -45,7 +45,7 @@ export default defineComponent({
}, },
methods: { methods: {
initChart() { initChart() {
this.chart = echarts.init(this.$el, macaronsTheme); this.chart = shallowRef(echarts.init(this.$el, macaronsTheme));
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {

46
src/views/dashboard/admin/components/mixins/resize.js
View File

@ -4,53 +4,53 @@ import { debounce } from '@/utils';
export default defineComponent({ export default defineComponent({
data() { data() {
return { return {
$_sidebarElm: null, sidebarElm: null,
$_resizeHandler: null resizeHandler: null
}; };
}, },
mounted() { mounted() {
this.$_resizeHandler = debounce(() => { this.resizeHandler = debounce(() => {
if (this.chart) { if (this.chart) {
this.chart.resize(); this.chart.resize();
} }
}, 100); }, 100);
this.$_initResizeEvent(); this.initResizeEvent();
this.$_initSidebarResizeEvent(); this.initSidebarResizeEvent();
}, },
beforeUnmount() { beforeUnmount() {
this.$_destroyResizeEvent(); this.destroyResizeEvent();
this.$_destroySidebarResizeEvent(); this.destroySidebarResizeEvent();
}, },
// to fixed bug when cached by keep-alive // to fixed bug when cached by keep-alive
// https://github.com/PanJiaChen/vue-element-admin/issues/2116 // https://github.com/PanJiaChen/vue-element-admin/issues/2116
activated() { activated() {
this.$_initResizeEvent(); this.initResizeEvent();
this.$_initSidebarResizeEvent(); this.initSidebarResizeEvent();
}, },
deactivated() { deactivated() {
this.$_destroyResizeEvent(); this.destroyResizeEvent();
this.$_destroySidebarResizeEvent(); this.destroySidebarResizeEvent();
}, },
methods: { methods: {
// use $_ for mixins properties // do not use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_initResizeEvent() { initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler); window.addEventListener('resize', this.resizeHandler);
}, },
$_destroyResizeEvent() { destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler); window.removeEventListener('resize', this.resizeHandler);
}, },
$_sidebarResizeHandler(e) { sidebarResizeHandler(e) {
if (e.propertyName === 'width') { if (e.propertyName === 'width') {
this.$_resizeHandler(); this.resizeHandler();
} }
}, },
$_initSidebarResizeEvent() { initSidebarResizeEvent() {
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]; this.sidebarElm = document.getElementsByClassName('sidebar-container')[0];
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler); this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler);
}, },
$_destroySidebarResizeEvent() { destroySidebarResizeEvent() {
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler); this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler);
} }
} }
}); });