mirror of https://gitee.com/cf-fz/WebCAD.git
!2636 开发:公告发布改进-WebCAD部分
彭泽
5 months ago
committed by
ChenX
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