|
|
|
@ -2,6 +2,9 @@ import React, { useEffect, useState, useRef } from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import { push } from 'react-router-redux'; |
|
|
|
import '../style.less' |
|
|
|
import { Notification, Popconfirm } from "@douyinfe/semi-ui"; |
|
|
|
import copy from "copy-to-clipboard"; |
|
|
|
import moment from "moment"; |
|
|
|
|
|
|
|
const Mirroring = (props) => { |
|
|
|
const { history, dispatch, actions, user, loading, StatusPushList } = props; |
|
|
|
@ -9,24 +12,24 @@ const Mirroring = (props) => { |
|
|
|
const detailList = useRef([ |
|
|
|
{ |
|
|
|
title: '科技蓝', |
|
|
|
img: '/assets/images/imageImg/text.png', |
|
|
|
img: '/assets/images/imageImg/textblue.png', |
|
|
|
color: 'blue' |
|
|
|
}, { |
|
|
|
title: '白', |
|
|
|
img: '/assets/images/imageImg/text.png', |
|
|
|
color: 'blue' |
|
|
|
img: '/assets/images/imageImg/textwhite.png', |
|
|
|
color: 'white' |
|
|
|
}, { |
|
|
|
title: '黑色（深灰）', |
|
|
|
img: '/assets/images/imageImg/text.png', |
|
|
|
color: 'blue' |
|
|
|
img: '/assets/images/imageImg/textblack.png', |
|
|
|
color: 'black' |
|
|
|
}, |
|
|
|
]); |
|
|
|
|
|
|
|
const [myCustomList,setMyCustomList] = useState([])//我的自定义镜像服务 |
|
|
|
|
|
|
|
const [myCustomList, setMyCustomList] = useState([])//我的自定义镜像服务 |
|
|
|
useEffect(() => { |
|
|
|
getMirror() |
|
|
|
}, []); |
|
|
|
function getMirror(){ |
|
|
|
function getMirror () { |
|
|
|
dispatch(openness.getMirrorList()).then((res) => { |
|
|
|
setMyCustomList(res.payload.data) |
|
|
|
}) |
|
|
|
@ -38,16 +41,42 @@ const Mirroring = (props) => { |
|
|
|
function mouseOut () {//鼠标移开 |
|
|
|
setMaskNum(1000) |
|
|
|
} |
|
|
|
function todetail(){//去模板内部 |
|
|
|
dispatch(push('/mirroring_detail')); |
|
|
|
function todetail (color) {//去模板内部 |
|
|
|
dispatch(push('/mirroring_detail'+'?template='+color)); |
|
|
|
} |
|
|
|
function tomirrordetail(mid){ |
|
|
|
dispatch(openness.getMirrorDetail(mid)).then((res) => { |
|
|
|
// dispatch(push('/mirroring_detail'+'?id='+item.id+'&template='+item.template)) |
|
|
|
}) |
|
|
|
} |
|
|
|
function todelete(id){//删除我的自定义镜像服务 |
|
|
|
function todelete (id) {//删除我的自定义镜像服务 |
|
|
|
dispatch(openness.delMirror(id)).then((res) => { |
|
|
|
getMirror() |
|
|
|
}) |
|
|
|
} |
|
|
|
function tocopy(id){ |
|
|
|
|
|
|
|
function tocopy (id) { |
|
|
|
dispatch(openness.putMirrorCopy(id)).then((res) => { |
|
|
|
getMirror() |
|
|
|
}) |
|
|
|
} |
|
|
|
function topublish(id){ |
|
|
|
dispatch(openness.putMirrorPublish(id)).then((res) => { |
|
|
|
getMirror() |
|
|
|
}) |
|
|
|
} |
|
|
|
function getTime(date){ |
|
|
|
if(date){ |
|
|
|
let year = moment(date).year() + '-' |
|
|
|
let month = (moment(date).month() + 1) > 10 ? (moment(date).month() + 1) + '-' : '0' + (moment(date).month() + 1) + '-' |
|
|
|
let day = moment(date).date() > 10 ? moment(date).date() : '0' + moment(date).date(); |
|
|
|
let hour = moment(date).hour() > 10 ? moment(date).hour() : '0' + moment(date).hour(); |
|
|
|
let minute = moment(date).minute() > 10 ? moment(date).minute() : '0' + moment(date).minute(); |
|
|
|
let second = moment(date).second() > 10 ? moment(date).second() : '0' + moment(date).second(); |
|
|
|
return year + month+day + ' ' + hour + ':' + minute + ':' + second |
|
|
|
} |
|
|
|
else{ |
|
|
|
return '' |
|
|
|
} |
|
|
|
} |
|
|
|
return ( |
|
|
|
<> |
|
|
|
@ -133,14 +162,14 @@ const Mirroring = (props) => { |
|
|
|
<div style={{ display: 'flex', padding: '34px 64px 18px 64px', flexWrap: 'wrap', }}> |
|
|
|
{detailList.current.map((item, index) => { |
|
|
|
return ( |
|
|
|
<div key={index} style={{marginRight:100}}> |
|
|
|
<div key={index} style={{ marginRight: 100 }}> |
|
|
|
<div style={{ position: 'relative', width: '306px', height: 142, boxShadow: '0px 2px 4px 0px rgba(231,231,231,0.5)', }} onMouseOver={() => mouseOver(index)}> |
|
|
|
<img |
|
|
|
src={item.img} |
|
|
|
alt="设置" |
|
|
|
style={{ width: '306px', height: 142 }} |
|
|
|
/> |
|
|
|
{maskNum == index ? (<div onMouseOut={() => mouseOut()} onClick={()=>todetail()} style={{ position: 'absolute', width: '100%', height: '100%', background: 'rgba(0,0,0,0.3)', top: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }}> |
|
|
|
{maskNum == index ? (<div onMouseOut={() => mouseOut()} onClick={() => todetail(item.color)} style={{ position: 'absolute', width: '100%', height: '100%', background: 'rgba(0,0,0,0.3)', top: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }}> |
|
|
|
<div style={{ width: 127, height: 33, border: '1px solid #FFFFFF', borderRadius: 4, color: '#ffffff', fontSize: 14, display: 'flex', justifyContent: 'center', alignItems: 'center' }}> |
|
|
|
使用该模版 |
|
|
|
</div> |
|
|
|
@ -170,20 +199,21 @@ const Mirroring = (props) => { |
|
|
|
共{myCustomList.length}份 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', padding: '19px 6px 39px 64px', flexWrap: 'wrap'}}> |
|
|
|
<div style={{ display: 'flex', padding: '19px 6px 39px 64px', flexWrap: 'wrap' }}> |
|
|
|
{myCustomList.map((item, index) => { |
|
|
|
return ( |
|
|
|
<div style={{ height: 334, width: 362, boxShadow: '1px 2px 12px 1px rgba(217,217,217,0.7)', padding: 16,marginRight:40,marginBottom:40 }} key={index}> |
|
|
|
<div style={{ height: 334, width: 362, boxShadow: '1px 2px 12px 1px rgba(217,217,217,0.7)', padding: 16, marginRight: 26, marginBottom: 40 }} key={index}> |
|
|
|
<img |
|
|
|
src={item.img} |
|
|
|
src={item.template == 'blue' ? '/assets/images/imageImg/textblue.png' : item.template == 'black' ? '/assets/images/imageImg/textblack.png' : '/assets/images/imageImg/textwhite.png'} |
|
|
|
alt="设置" |
|
|
|
style={{ width: 330, height: 153 }} |
|
|
|
style={{ width: 330, height: 153, cursor: 'pointer' }} |
|
|
|
onClick={() => {tomirrordetail(item.mid)}} |
|
|
|
/> |
|
|
|
<div style={{ color: '#2F2F2F', fontSize: 16, width: 300, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}> |
|
|
|
{item.title} |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 10 }}> |
|
|
|
<div style={{ display: 'flex', cursor: 'pointer' }}> |
|
|
|
<div style={{ display: 'flex', cursor: 'pointer' }} onClick={()=>topublish(item.id)}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/release.png" |
|
|
|
@ -195,7 +225,7 @@ const Mirroring = (props) => { |
|
|
|
发布 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', cursor: 'pointer' }}> |
|
|
|
<div style={{ display: 'flex', cursor: 'pointer' }} onClick={() => tocopy(item.id)}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/copy.png" |
|
|
|
@ -207,27 +237,40 @@ const Mirroring = (props) => { |
|
|
|
复制 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', cursor: 'pointer' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/del.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: 16, height: 16 }} |
|
|
|
/> |
|
|
|
<Popconfirm |
|
|
|
title="删除会导致正在使用该镜像应用的服务丢失，请谨慎操作！" |
|
|
|
arrowPointAtCenter={false} |
|
|
|
showArrow={true} |
|
|
|
position="topRight" |
|
|
|
onConfirm={() => todelete(item.id)}> |
|
|
|
<div style={{ display: 'flex', cursor: 'pointer' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/del.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: 16, height: 16 }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ color: '#1859C1', fontSize: 14, marginLeft: 10 }}> |
|
|
|
删除 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ color: '#1859C1', fontSize: 14, marginLeft: 10 }} onClick={()=>todelete(item.id)}> |
|
|
|
删除 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Popconfirm> |
|
|
|
</div> |
|
|
|
<div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 10, fontSize: 12 }}> |
|
|
|
最后编辑于：{item.updateTime} |
|
|
|
最后编辑于：{getTime(item.updateTime)} |
|
|
|
</div> |
|
|
|
<div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 8, fontSize: 12 }}> |
|
|
|
最后发布于：{item.publishTime} |
|
|
|
最后发布于：{getTime(item.publishTime)} |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 12 }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={() => { |
|
|
|
copy(item.mid ? item.mid : "暂无id"); |
|
|
|
Notification.success({ |
|
|
|
content: "复制成功", |
|
|
|
duration: 2, |
|
|
|
}) |
|
|
|
}}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/idCopy.png" |
|
|
|
alt="设置" |
|
|
|
@ -248,7 +291,7 @@ const Mirroring = (props) => { |
|
|
|
} |
|
|
|
|
|
|
|
function mapStateToProps (state) { |
|
|
|
const { auth,global } = state; |
|
|
|
const { auth, global } = state; |
|
|
|
return { |
|
|
|
user: auth.user, |
|
|
|
actions: global.actions, |
|
|
|
|
deartibers
2 years ago
