1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
import React, {
useRef,
useState,
} from 'react';
import {
message,
Popover,
} from 'antd';
import _ from 'lodash';
import { connect } from 'react-redux';
import Icon from '@ant-design/icons';
import {
AvatarDropdown as Avatar,
useIntl,
} from '@wisdom-utils/components';
import HeaderSearch from '@wisdom-utils/components/lib/layout/components/HeaderSearch';
import { useHistory } from '@wisdom-utils/runtime';
import order from '../../assets/basic/message.png';
import notice from '../../assets/basic/notice.png';
import search from '../../assets/basic/search.png';
import { actionCreators } from '../../containers/App/store';
import styles from './index.less';
import NoticeIconView from './NoticeIconView';
/* eslint-disable */
const favitorSvg = () => (<svg t="1631171489722" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16457" width="24" height="24"><path d="M512 87.806c-234.721 0-424.194 189.474-424.194 424.194s189.474 424.194 424.194 424.194 424.194-189.474 424.194-424.194-189.474-424.194-424.194-424.194zM783.484 442.715l-137.155 100.393c-7.069 5.655-9.899 14.141-7.069 22.624l52.317 161.194c5.655 18.382-15.553 33.935-31.108 22.624l-137.155-100.393c-7.069-5.655-16.967-5.655-24.037 0l-137.155 100.393c-15.553 11.312-36.763-4.242-31.108-22.624l53.731-162.608c2.829-8.484 0-16.967-7.069-22.624l-137.155-100.393c-15.553-11.312-7.069-35.349 11.312-35.349h169.678c8.484 0 16.967-5.655 18.382-14.141l52.317-161.194c5.655-18.382 32.522-18.382 38.177 0l52.317 161.194c2.829 8.484 9.899 14.141 18.382 14.141h169.678c21.21 0 28.278 25.452 12.725 36.763z" p-id="16458" fill="hsla(221, 100%, 95%, 0.7)"></path></svg>);
const themeSvg = () => (<svg t="1631362986014" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path d="M552.75 563.239c44.4 26.348 99.1 26.348 143.5 0C740.65 536.89 768 488.197 768 435.5c0-81.462-64.247-147.5-143.5-147.5S481 354.038 481 435.5c0 52.697 27.35 101.39 71.75 127.739z" fill="hsla(221, 100%, 95%, 0.7)" p-id="2351"></path>
<path d="M471.264 952c-18.842 0-38.581-1.796-60.115-4.49l-5.384-0.899c-152.533-23.352-256.614-171.55-261.1-177.837-147.149-224.541-73.574-451.777 65.5-577.52C348.34 65.511 578.934 11.621 780.814 174.19c130.102 105.085 169.58 250.588 171.375 256.875v1.797c18.843 102.39 3.59 177.836-45.76 226.337-75.368 72.752-200.086 49.4-217.134 45.807-23.328-2.695-40.376 4.49-52.938 19.76-13.458 17.064-16.15 39.518-11.664 52.991 12.562 37.723 14.356 66.464 5.384 88.02C604.058 922.361 551.12 952 471.264 952z m-51.973-80.488l5.083 0.849c82.179 12.72 132.164-3.393 152.497-49.188 0-0.849 4.236-11.873-6.778-45.796-11.013-30.53-2.541-70.39 19.486-97.528 22.875-28.834 56.763-41.556 96.581-37.315l2.542 0.848c0.847 0 105.9 22.898 160.122-29.683 33.04-32.226 43.207-88.199 28.805-166.221-3.39-11.025-39.819-130.603-144.872-214.562-166.053-135.69-356.674-90.743-471.894 13.57-105.9 96.68-183.843 280.71-53.374 480.007 0.848 0 89.804 127.21 211.802 145.02z" fill="hsla(221, 100%, 95%, 0.7)" p-id="2352"></path>
<path d="M203 529c0-29.823 24.177-54 54-54s54 24.177 54 54-24.177 54-54 54-54-24.177-54-54z m90-115.235A54 54 0 0 1 266 367c0-29.823 24.177-54 54-54s54 24.177 54 54a54 54 0 0 1-81 46.765zM427 278c0-29.823 24.177-54 54-54s54 24.177 54 54-24.177 54-54 54-54-24.177-54-54z m180 44c0-29.823 24.177-54 54-54s54 24.177 54 54-24.177 54-54 54-54-24.177-54-54z m90 144c0-29.823 24.177-54 54-54s54 24.177 54 54-24.177 54-54 54-54-24.177-54-54z" fill="hsla(221, 100%, 95%, 0.7)"></path></svg>)
const FavitorIcon = props => <Icon component={favitorSvg} {...props}/>
const MESSAGE_BOX_URL =
'product/maintenance/CaseManage/CaseDoingBox/StardCaseDoingBoxView|isDelay=1';
export const getConfig = (widgets, url, key) => {
let widgetconfig = {};
if (widgets) {
// eslint-disable-next-line no-plusplus
for (let i = 0; i < widgets.length; i++) {
const widget = widgets[i];
if (widget && widget[key])
widget[key] = widget[key].replace(/\\/g, '/').trim();
// eslint-disable-next-line eqeqeq
if (widget[key] && url.toLowerCase() === widget[key].toLowerCase()) {
widgetconfig = widget;
break;
} else {
const children = widget.widgets ? widget.widgets : widget.routes;
if (children) {
widgetconfig = getConfig(children, url, key);
if (widgetconfig) {
break;
}
}
}
}
}
return widgetconfig;
};
const GlobalHeaderRight = props => {
const [options, setOptions] = useState([]);
const homeRef = useRef(null);
const favitorRef = useRef(null);
const history = useHistory();
const { theme, layout } = props;
let className = styles.right;
if (theme === 'dark' && layout === 'top') {
className = `${styles.right} ${styles.dark}`;
}
const intl = useIntl();
const goHome = event => {
event.stopPropagation();
let url = _.isString(props.global.get('homepage'))
? props.global.get('homepage')
: props.global.get('homepage.url');
if(!props.global.get('home')) {
url = `civweb4/${url.replace(/^\//, '').replace(/^civweb4\//, '')}`
}
window.share.event.emit('goHome', `/${url}`);
// url ? (
// window.share.event.emit('listenerMointer', {
// label: '首页',
// url: url.replace(/^civweb4\//, ''),
// })
// ) : null;
};
const handleOrder = event => {
event.stopPropagation();
const widgetConfig = getConfig(
props.global.get('widgets').concat(props.global.get('uiwidgets')),
MESSAGE_BOX_URL,
'url',
);
if (Object.keys(widgetConfig).length > 0) {
props.history.push(`/civweb4/${MESSAGE_BOX_URL}`);
setCurrentIndex(2);
} else {
message.warning('对不起，您没有菜单权限！');
}
};
const handleFeedback = event => {
event.stopPropagation();
window.open(`https://mis.panda-water.cn/feedback/?site_code="${props.global.get('userInfo.site')}`);
}
const handlerFavitor = event => {
// setCurrentIndex(1);
history.push('/commonmenu');
window.share && window.share.event && window.share.event.emit('event:favitor', {
name: "常用",
path: '/commonmenu',
icon: <FavitorIcon/>
});
}
const handlerTheme = () => {
window.share.event.emit('event:theme');
}
const handleSelect = (value, data) => {
window.share.event.emit('addTips', options, data);
};
const handleSearch = value => {
// eslint-disable-next-line no-undef
const search = new AMap.Autocomplete();
const areaName =
// eslint-disable-next-line no-undef
createStoreage.get('globalConfig').mapsettings.areasettings &&
// eslint-disable-next-line no-undef
createStoreage.get('globalConfig').mapsettings.areasettings.areaName;
const area = (areaName || '') + value;
setOptions([]);
// eslint-disable-next-line no-unused-expressions
value
? search.search(area, (status, res) => {
if (res && res.tips) {
const result = res.tips.map(item => {
item.value = item.name;
item.label = (
<>
<span>{item.name}</span>
<span style={{ color: '#c1c1c1' }}>
{item.district + item.address}
</span>
</>
);
return item;
});
setOptions(result);
}
})
: setOptions([]);
};
const renderHeaderSearch = () => {
return (
<HeaderSearch
className={`${styles.action} ${styles.search} ${styles.extendsearch}`}
placeholder={intl.formatMessage({id:'component.search.menu.placeholder'})}
offset="46px"
defaultValue=""
mode="tiled"
options={options}
{...props}
onSelect={handleSelect}
onChange={handleSearch}
onSearch={handleSearch}
/>
)
}
const renderTopMenu = () => {
if(!props.global || !props.global.topMenu) return null;
const topMenus = props.global.topMenu.split(',') || [];
return topMenus.map(name => {
switch (name) {
// 搜索,首页,常用,反馈,消息
case '搜索':
return (
<div className={styles.opteration}>
<Popover
placement="bottomRight"
content={renderHeaderSearch()}
trigger="click"
overlayClassName={styles.searchPopupWrapper}
>
<Icon component={() => <img src={search} alt="icon" className={styles.active} />} />
</Popover>
</div>
);
case '反馈':
return (
<div className={styles.opteration}>
<Icon component={() => <img src={order} alt="icon" />} onClick={handleFeedback} />
</div>
);
case '消息':
return <NoticeIconView bell={<Icon component={() => <img src={notice} alt="icon" />} />} />;
default:
return null;
}
})
}
return (
<div className={className}>
{renderTopMenu()}
<Avatar menu config={props.global} updateCurrentIndex={props.updateCurrentIndex} updateConfig={props.updateConfig} logout={props.logout} />
</div>
);
};
const mapStateToProps = state => ({
global: state.getIn(['global', 'globalConfig']),
flatMenu: state.getIn(['global', 'flatMenu']),
menu: state.getIn(['global', 'menu']),
recentKeywords: state.getIn(['global', 'recentKeywords']),
recentVisited: state.getIn(['global', 'recentVisited']),
recentProducts: state.getIn(['global', 'recentProducts']),
});
const mapDispatchToProps = dispatch => ({
updateRecentKeywords(keyword) {
dispatch(actionCreators.updateRecentKeywords(keyword));
},
updateRecentVisited(history) {
dispatch(actionCreators.updateRecentVisited(history));
},
updateRecentProduct(history) {
dispatch(actionCreators.updateRecentProduct(history));
},
clearRecentProduct() {
dispatch(actionCreators.clearRecentProduct());
},
updateCurrentIndex(index) {
dispatch(actionCreators.updateCurrentIndex(index));
},
updateConfig(config) {
dispatch(actionCreators.getConfig(config));
},
updateComplexConfig(config) {
dispatch(actionCreators.updateComplexConfig(config));
},
logout() {
dispatch(actionCreators.logout());
},
});
export default connect(
mapStateToProps,
mapDispatchToProps,
)(GlobalHeaderRight);