From 9c6795fd3c44e46cf3955fbfd8f8eeca23acb7a9 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期六, 08 十月 2022 00:31:51 +0800
Subject: [PATCH] 2022-10-08
---
src/tabviews/home/index.jsx | 401 +++++++++++++--------------------------------------------
1 files changed, 92 insertions(+), 309 deletions(-)
diff --git a/src/tabviews/home/index.jsx b/src/tabviews/home/index.jsx
index cb704df..f79eb7e 100644
--- a/src/tabviews/home/index.jsx
+++ b/src/tabviews/home/index.jsx
@@ -1,331 +1,114 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import {connect} from 'react-redux'
-import echarts from 'echarts/lib/echarts'
-import 'echarts/lib/chart/bar'
-import 'echarts/lib/chart/line'
-import 'echarts/lib/component/tooltip'
-import 'echarts/lib/component/title'
-import 'echarts/lib/component/legend'
-import 'echarts/lib/component/toolbox'
-import 'echarts/lib/component/markPoint'
-import 'echarts/lib/component/markLine'
-import { Icon, Tabs, Slider } from 'antd'
-// import {refreshTabView, modifyTabview} from '@/store/action'
-// import Api from '@/api'
+import { notification, Spin } from 'antd'
+
+import Api from '@/api'
+import asyncComponent from '@/utils/asyncComponent'
+import MKEmitter from '@/utils/events.js'
import './index.scss'
-const { TabPane } = Tabs
+const DefaultHome = asyncComponent(() => import('./defaulthome'))
+const CustomPage = asyncComponent(() => import('@/tabviews/custom'))
class Home extends Component {
static propTpyes = {
- MenuNo: PropTypes.string, // 鑿滃崟鍙傛暟
MenuID: PropTypes.string, // 鑿滃崟Id
- param: PropTypes.object // 鑿滃崟鍙傛暟
}
state = {
-
+ loading: true,
+ background: sessionStorage.getItem('home_background'),
+ waitMenu: true,
+ waitAction: true,
+ view: ''
}
componentDidMount () {
- let myChart = echarts.init(document.getElementById('home'))
- // 缁樺埗鍥捐〃
- myChart.setOption({
- color: ['#1890ff'],
- tooltip : {
- trigger: 'axis',
- axisPointer : { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
- type : '' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ this.loadHomeConfig()
+ if (window.GLOB.mkThdMenus.length > 0) {
+ this.setState({
+ waitMenu: false
+ })
+ } else {
+ MKEmitter.addListener('mkMenuLoaded', this.mkMenuLoaded)
+ }
+ if (window.GLOB.mkActions.loaded) {
+ this.setState({
+ waitAction: false
+ })
+ } else {
+ MKEmitter.addListener('mkActionLoaded', this.mkActionLoaded)
+ }
+ }
+
+ /**
+ * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊
+ */
+ componentWillUnmount () {
+ this.setState = () => {
+ return
+ }
+ MKEmitter.removeListener('mkMenuLoaded', this.mkMenuLoaded)
+ MKEmitter.removeListener('mkActionLoaded', this.mkActionLoaded)
+ }
+
+ mkMenuLoaded = () => {
+ this.setState({
+ waitMenu: false
+ })
+ }
+
+ mkActionLoaded = () => {
+ this.setState({
+ waitAction: false
+ })
+ }
+
+ loadHomeConfig = () => {
+ let _param = {
+ func: 'sPC_Get_LongParam',
+ MenuID: this.props.MenuID
+ }
+ Api.getCacheConfig(_param).then(result => {
+ if (result.status) {
+ if (result.LongParam) {
+ this.setState({
+ loading: false,
+ view: 'custom'
+ })
+ } else {
+ this.setState({
+ loading: false,
+ waitMenu: false,
+ waitAction: false,
+ view: 'default'
+ })
}
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis : [
- {
- type : 'category',
- data : ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
- axisTick: {
- alignWithLabel: true
- }
- }
- ],
- yAxis : [
- {
- type : 'value',
- splitLine: {
- show: true,
- lineStyle: {
- color: '#d9d9d9',
- type: 'dashed'
- }
- }
- }
- ],
- series : [
- {
- name:'鏈堢淮淇暟',
- type:'bar',
- barWidth: '30',
- data:[30, 52, 200, 334, 390, 330, 220, 170, 220, 290, 350, 410, 440, 530]
- }
- ]
+ } else {
+ this.setState({
+ loading: false,
+ view: 'default'
+ })
+ notification.warning({
+ top: 92,
+ message: result.message,
+ duration: 5
+ })
+ }
})
}
render() {
- return (
- <div className="home-view">
- <div className="ant-row-flex">
- <div className="ant-col ant-col-sm-6">
- <div className="ant-card">
- <div className="ant-card-body">
- <div className="antd-chart-card">
- <div className="antd-chart-top">
- <div className="antd-meta-wrap">
- <div className="antd-meta">
- <span>
- <span>缁翠慨鎬绘暟</span>
- </span>
- <span className="antd-action">
- <Icon type="info-circle-o" />
- </span>
- </div>
- <div className="antd-total">
- <span>100</span>
- </div>
- </div>
- </div>
- <div className="antd-chart-content">
- <div className="antd-content-fixed">
- <div className="antd-trend-item" style={{marginRight: '16px'}}>
- <span>
- <span>鍛ㄥ悓姣�</span>
- <span className="antd-trend-text">10%</span>
- </span>
- <span className="antd-trend-up">
- <Icon type="caret-up" />
- </span>
- </div>
- <div className="antd-trend-item">
- <span>
- <span>鏃ュ悓姣�</span>
- <span className="antd-trend-text">10%</span>
- </span>
- <span className="antd-trend-down">
- <Icon type="caret-down" />
- </span>
- </div>
- </div>
- </div>
- <div className="antd-chart-footer">
- <div className="antd-field">
- <span className="antd-label">
- <span>缁翠慨鎬绘暟</span>
- </span>
- <span className="antd-number">100</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div className="ant-col ant-col-sm-6">
- <div className="ant-card">
- <div className="ant-card-body">
- <div className="antd-chart-card">
- <div className="antd-chart-top">
- <div className="antd-meta-wrap">
- <div className="antd-meta">
- <span>
- <span>瓒呮椂宸ュ崟</span>
- </span>
- <span className="antd-action">
- <Icon type="info-circle-o" />
- </span>
- </div>
- <div className="antd-total">
- <span>100</span>
- </div>
- </div>
- </div>
- <div className="antd-chart-content">
- <div className="antd-content-fixed orange">
- <Slider defaultValue={67} tipFormatter={null} />
- <div className="mask"></div>
- </div>
- </div>
- <div className="antd-chart-footer">
- <div className="antd-field">
- <span className="antd-label">
- <span>瓒呮椂宸ュ崟</span>
- </span>
- <span className="antd-number">100</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div className="ant-col ant-col-sm-6">
- <div className="ant-card">
- <div className="ant-card-body">
- <div className="antd-chart-card">
- <div className="antd-chart-top">
- <div className="antd-meta-wrap">
- <div className="antd-meta">
- <span>
- <span>鍏冲崟</span>
- </span>
- <span className="antd-action">
- <Icon type="info-circle-o" />
- </span>
- </div>
- <div className="antd-total">
- <span>100</span>
- </div>
- </div>
- </div>
- <div className="antd-chart-content">
- <div className="antd-content-fixed primary">
- <Slider defaultValue={77} tipFormatter={null} />
- <div className="mask"></div>
- </div>
- </div>
- <div className="antd-chart-footer">
- <div className="antd-field">
- <span className="antd-label">
- <span>鍏冲崟</span>
- </span>
- <span className="antd-number">100</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div className="ant-col ant-col-sm-6">
- <div className="ant-card">
- <div className="ant-card-body">
- <div className="antd-chart-card">
- <div className="antd-chart-top">
- <div className="antd-meta-wrap">
- <div className="antd-meta">
- <span>
- <span>鍘熶欢閭瘎</span>
- </span>
- <span className="antd-action">
- <Icon type="info-circle-o" />
- </span>
- </div>
- <div className="antd-total">
- <span>100</span>
- </div>
- </div>
- </div>
- <div className="antd-chart-content">
- <div className="antd-content-fixed">
- <Slider defaultValue={87} tipFormatter={null} />
- <div className="mask"></div>
- </div>
- </div>
- <div className="antd-chart-footer">
- <div className="antd-trend-item" style={{marginRight: '16px'}}>
- <span>
- <span>鍛ㄥ悓姣�</span>
- <span className="antd-trend-text">10%</span>
- </span>
- <span className="antd-trend-up">
- <Icon type="caret-up" />
- </span>
- </div>
- <div className="antd-trend-item">
- <span>
- <span>鏃ュ悓姣�</span>
- <span className="antd-trend-text">10%</span>
- </span>
- <span className="antd-trend-down">
- <Icon type="caret-down" />
- </span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <Tabs defaultActiveKey="1">
- <TabPane tab="缁翠慨鎬绘暟" key="1">
- <div id="home" className="sale-trend ant-col ant-col-xs-16"></div>
- <div className="ant-col ant-col-xs-8">
- <div className="antd-sales-rank">
- <h4 className="antd-ranking-title">浜у搧鎺掑悕</h4>
- <ul className="antd-ranking-list">
- <li>
- <span className="antd-ranking-active">1</span>
- <span className="antd-ranking-title">KU699</span>
- <span>723,234</span>
- </li>
- <li>
- <span className="antd-ranking-active">2</span>
- <span className="antd-ranking-title">KU110</span>
- <span>683,434</span>
- </li>
- <li>
- <span className="antd-ranking-active">3</span>
- <span className="antd-ranking-title">KU110K</span>
- <span>527,264</span>
- </li>
- <li>
- <span className="antd-ranking-number">4</span>
- <span className="antd-ranking-title">KU066.9</span>
- <span>493,233</span>
- </li>
- <li>
- <span className="antd-ranking-number">5</span>
- <span className="antd-ranking-title">KU079</span>
- <span>323,734</span>
- </li>
- <li>
- <span className="antd-ranking-number">6</span>
- <span className="antd-ranking-title">KU153</span>
- <span>303,934</span>
- </li>
- <li>
- <span className="antd-ranking-number">7</span>
- <span className="antd-ranking-title">KU151</span>
- <span>227,244</span>
- </li>
- <li>
- <span className="antd-ranking-number">8</span>
- <span className="antd-ranking-title">KU720</span>
- <span>223,734</span>
- </li>
- </ul>
- </div>
- </div>
- </TabPane>
- </Tabs>
- </div>
- )
+ const { loading, waitAction, waitMenu, view, background } = this.state
+
+ if (loading || waitAction || waitMenu) {
+ return (<div className="home-loading-view" style={{background: background}}><Spin className="home-box-spin" size="large" /></div>)
+ } else if (view === 'custom') {
+ return (<CustomPage MenuID={this.props.MenuID} MenuName="棣栭〉"/>)
+ } else {
+ return (<DefaultHome />)
+ }
}
}
-const mapStateToProps = (state) => {
- return {
- // tabviews: state.tabviews
- }
-}
-
-const mapDispatchToProps = (dispatch) => {
- return {
- // refreshTabView: (refreshTab) => dispatch(refreshTabView(refreshTab)),
- // modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
- }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Home)
\ No newline at end of file
+export default Home
\ No newline at end of file
--
Gitblit v1.8.0