mirror of https://gitee.com/cf-fz/WebCAD.git
!2636 开发:公告发布改进-WebCAD部分
parent
96c97794f9
commit
15f6934200
@ -0,0 +1,8 @@
|
|||||||
|
import { Position, Toaster } from "@blueprintjs/core";
|
||||||
|
export const NoticeToaster = Toaster.create({
|
||||||
|
className: "noticeToaster",
|
||||||
|
canEscapeKeyClear: true,
|
||||||
|
usePortal: true,
|
||||||
|
autoFocus: false,
|
||||||
|
position: Position.TOP,
|
||||||
|
});
|
@ -0,0 +1,123 @@
|
|||||||
|
import { Tab, TabId, Tabs } from "@blueprintjs/core";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import React, { FC } from "react";
|
||||||
|
import ReactMarkdown from 'react-markdown';
|
||||||
|
import Zmage from 'react-zmage';
|
||||||
|
import gfm from 'remark-gfm';
|
||||||
|
import SwiperCore, { Autoplay, Navigation, Pagination } from 'swiper/core';
|
||||||
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||||
|
import 'swiper/swiper-bundle.min.css';
|
||||||
|
import 'swiper/swiper.min.css';
|
||||||
|
import { CURRENT_HOST } from "../Common/HostUrl";
|
||||||
|
import { NoticeGroup, TabsExampleState } from "./NoticeGroup";
|
||||||
|
SwiperCore.use([Autoplay, Pagination, Navigation]);
|
||||||
|
export class NoticeBody extends React.Component<NoticeGroup, TabsExampleState, {}>
|
||||||
|
{
|
||||||
|
public state: TabsExampleState = {
|
||||||
|
activePanelOnly: false,
|
||||||
|
animate: true,
|
||||||
|
navbarTabId: 1,
|
||||||
|
};
|
||||||
|
|
||||||
|
render()
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{
|
||||||
|
<div id="Notice">
|
||||||
|
<div><h3 style={{ margin: "0 0 5px 0", textAlign: "center" }}>通知公告</h3></div>
|
||||||
|
<div style={{ width: "650px", height: "400px" }}>
|
||||||
|
<Tabs id="TabsExample" selectedTabId={this.state.navbarTabId} animate
|
||||||
|
key="vertical"
|
||||||
|
renderActiveTabPanelOnly
|
||||||
|
vertical
|
||||||
|
onChange={this.handleNavbarTabChange}>
|
||||||
|
{
|
||||||
|
this.props.data.map((data, i) =>
|
||||||
|
{
|
||||||
|
return <Tab id={i + 1} title={`公告${i + 1}`} panel={<Message data={[data]} />} />;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
private handleNavbarTabChange = (navbarTabId: TabId) => this.setState({ navbarTabId });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通知
|
||||||
|
const Notice: FC<NoticeGroup> = observer(({ data }) =>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
const Message: FC<NoticeGroup> = observer(({ data }) =>
|
||||||
|
<div style={{ height: "100%" }}>
|
||||||
|
<div >
|
||||||
|
{
|
||||||
|
data.map((data) =>
|
||||||
|
{
|
||||||
|
// 纯文字
|
||||||
|
if (Number(data.notice_type) == 1)
|
||||||
|
{
|
||||||
|
return Number(data.notice_type) == 1 && <div style={{ marginTop: "10px", whiteSpace: "pre-wrap" }}>{data.notice_content}</div>;
|
||||||
|
}
|
||||||
|
// 纯图片
|
||||||
|
if (Number(data.notice_type) == 2)
|
||||||
|
{
|
||||||
|
let Img = JSON.parse(data.notice_content);
|
||||||
|
let imgstr = [];
|
||||||
|
for (let Imginfo of Object.keys(Img))
|
||||||
|
{
|
||||||
|
imgstr.push(<Zmage src={`${CURRENT_HOST}/${Img[Imginfo]}`} alt="" />);
|
||||||
|
}
|
||||||
|
return imgstr;
|
||||||
|
}
|
||||||
|
// 图文模式
|
||||||
|
if (Number(data.notice_type) == 3)
|
||||||
|
{
|
||||||
|
return <div className="Markdown"><ReactMarkdown remarkPlugins={[gfm]}>{data.notice_content}</ReactMarkdown></div>;
|
||||||
|
}
|
||||||
|
// 轮播图
|
||||||
|
if (Number(data.notice_type) == 4)
|
||||||
|
{
|
||||||
|
let Swipers = JSON.parse(data.notice_content);
|
||||||
|
let swiper = [];
|
||||||
|
for (let Swiperinfo of Object.keys(Swipers))
|
||||||
|
{
|
||||||
|
swiper.push(<SwiperSlide className="NoticeImg">
|
||||||
|
<Zmage zoomOptions={{ maxZoom: 5, minZoom: 1 }} style={{ maxWidth: '100%', minWidth: '0' }} src={`${CURRENT_HOST}/${Swipers[Swiperinfo]}`} alt="" />
|
||||||
|
</SwiperSlide>);
|
||||||
|
}
|
||||||
|
return <Swiper
|
||||||
|
spaceBetween={50}
|
||||||
|
slidesPerView={1}
|
||||||
|
pagination={{
|
||||||
|
"clickable": true
|
||||||
|
}}
|
||||||
|
loop autoplay={{ delay: 3000, disableOnInteraction: false }}
|
||||||
|
scrollbar={{ draggable: true }}
|
||||||
|
>
|
||||||
|
{swiper}
|
||||||
|
</Swiper>;
|
||||||
|
|
||||||
|
}
|
||||||
|
//视频
|
||||||
|
if (Number(data.notice_type) == 5)
|
||||||
|
{
|
||||||
|
let Video = JSON.parse(data.notice_content);
|
||||||
|
let video = [];
|
||||||
|
for (let VideoInfo of Object.keys(Video))
|
||||||
|
{
|
||||||
|
video.push(<video style={{ width: "100%" }} controls src={`${Video[VideoInfo]}`}></video>);
|
||||||
|
}
|
||||||
|
return video;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
@ -0,0 +1,25 @@
|
|||||||
|
import { TabId } from "@blueprintjs/core";
|
||||||
|
|
||||||
|
export interface NoticeGroup
|
||||||
|
{
|
||||||
|
data: NoticeProp[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface NoticeProp
|
||||||
|
{
|
||||||
|
data: string[]; //列表节点
|
||||||
|
notice_id: string; //通知标识
|
||||||
|
product_type: string; //产品类型
|
||||||
|
notice_type: string; //通知类型
|
||||||
|
component_type: string; //组件类型
|
||||||
|
notice_group_type: string; //通知群组类型
|
||||||
|
notice_group: string; //通知群组
|
||||||
|
notice_content: string; //通知内容
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TabsExampleState
|
||||||
|
{
|
||||||
|
activePanelOnly: boolean;
|
||||||
|
animate: boolean;
|
||||||
|
navbarTabId: TabId;
|
||||||
|
}
|
Loading…
Reference in new issue