forked from Gitlink/forgeplus-react
fixed: 重要行添加样式处理
This commit is contained in:
parent
470de8e973
commit
940a1b33e6
|
|
@ -18,6 +18,7 @@ function Quality(props){
|
|||
const [questionList,setQuestionList] = useState([]) //对应问题列表
|
||||
const [isDetail,setDetail] = useState(false) //对应问题列表
|
||||
const [codeDetailValue,setCodeDetailValue] = useState("") //对应问题列表
|
||||
const [indexValue,setIndexValue] = useState(null)
|
||||
const severityList = {
|
||||
'BLOCKER': "致命缺陷",
|
||||
"MINOR":"严重缺陷",
|
||||
|
|
@ -29,6 +30,12 @@ function Quality(props){
|
|||
getTask()
|
||||
},[])
|
||||
|
||||
useEffect(()=>{
|
||||
if(indexValue){
|
||||
const domBox = document.getElementsByClassName('CodeMirror-code')[0].childNodes[indexValue]
|
||||
domBox.style.cssText='border:1px solid red; padding: 5px;border-radius: 10px;color: black;background: lemonchiffon;'
|
||||
}
|
||||
},[indexValue])
|
||||
const getTask = () => {
|
||||
axios.get(`/${owner}/${projectsId}/sonar_tasks.json`)
|
||||
.then(({data:{data,message,status}}) => {
|
||||
|
|
@ -74,18 +81,21 @@ function Quality(props){
|
|||
const getCodeDetailData = (item) => {
|
||||
axios.get(`/${owner}/${projectsId}/sonar_tasks/code_source.json?component=${item.component}&task_id=${sonarList.task_id}`)
|
||||
.then(({data:{data,message,status}})=>{
|
||||
data.splice(item.line,0,{code:document.getElementById('htmlDOM').innerHTML,line:item.line})
|
||||
const text = data.map(item => item.code).join("\n")
|
||||
const dom = document.createElement("div");
|
||||
dom.innerHTML = text;
|
||||
setDetail(true)
|
||||
setCodeDetailValue(dom.innerText)
|
||||
setIndexValue(item.line?item.line:'')
|
||||
})
|
||||
}
|
||||
const handleCodeDetail = (item) => {
|
||||
setDetail(true)
|
||||
getCodeDetailData(item)
|
||||
}
|
||||
const handleBack = () => {
|
||||
setDetail(false)
|
||||
setIndexValue(null)
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -99,9 +109,8 @@ function Quality(props){
|
|||
<div className="quality-fill mr35"><img alt='' src={codesmell}/>Codesmell<span className="ml3">{sonarList.codeSmell}</span></div>
|
||||
<div>
|
||||
<div className="quality-total mr20">代码量统计：{sonarList.codeLines}</div>
|
||||
{/* <div className="quality-total mr20">代码量统计：{sonarList.codeLines}</div> */}
|
||||
<div className="quality-total mr20">检测语言：{sonarList.language}</div>
|
||||
<div className="quality-total mr20">最后检测时间：{moment(sonarList.updated_at).format("YYYY-MM-DD HH:mm")}</div>
|
||||
{statuts !== -1 && <div className="quality-total mr20">最后检测时间：{moment(sonarList.updated_at).format("YYYY-MM-DD HH:mm")}</div>}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`wrap-header-btn ${statuts===-1?'blue':statuts===0?'green':'orange'}`} onClick={handlecheck}>{(statuts===-1)?"开始检测":(statuts===0)?"重新检测":"正在检测"}</div>
|
||||
|
|
@ -110,8 +119,8 @@ function Quality(props){
|
|||
{questionList.map((item,index)=>{
|
||||
return <div key={index} className='message-item' onClick={()=>handleCodeDetail(item)}>
|
||||
{item.component}
|
||||
<div className="message-item-content mb30 mt10">
|
||||
<img alt="" src={bugRed}/>{item.message}
|
||||
<div className="message-item-content mb30 mt10" >
|
||||
<img alt="" src={bugRed}/><span id="htmlDOM">{item.message} </span>
|
||||
<div className="message-item-content-serverity">缺陷类型：{severityList[item.severity]}<span className="ml15">line：{item.line}行</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -121,31 +130,14 @@ function Quality(props){
|
|||
</div>:
|
||||
<div className="wrap-code">
|
||||
<Button type="primary" onClick={handleBack} >返回</Button>
|
||||
<div className='span'></div>
|
||||
{/* {codeDetailValue.length >0 && <div dangerouslySetInnerHTML={{__html:codeDetailValue.map(item => item.code).join("<br/>")}}/>} */}
|
||||
<Meditor
|
||||
content={
|
||||
codeDetailValue || "" //.map(item => item.code).join("\n")
|
||||
}
|
||||
content={codeDetailValue || "" }
|
||||
readOnly={true}
|
||||
editorType="update"
|
||||
// currentBranch={currentBranch}
|
||||
/>
|
||||
{/* <MonacoEditor
|
||||
height="100vh"
|
||||
width="100%"
|
||||
value={codeDetailValue.map(item => item.code).join("\n")}
|
||||
theme="vs-dark"
|
||||
options={{
|
||||
"readOnly": true,
|
||||
"minimap": { "enabled": false },
|
||||
"lineNumbers":false
|
||||
}}
|
||||
/> */}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,35 +9,29 @@
|
|||
font-weight: 600;
|
||||
color: #434D6C;
|
||||
cursor: pointer;
|
||||
.message-item-content{
|
||||
width: 1104px;
|
||||
height: 63px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #DDDDDD;
|
||||
padding: 8px 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
img{
|
||||
margin-right: 10px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.message-item-content-serverity{
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #434D6C;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
.message-item-content:before{
|
||||
content: '';
|
||||
background-color: red;
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
.message-item-content{
|
||||
width: 1104px;
|
||||
height: 63px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #DDDDDD;
|
||||
padding: 8px 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
img{
|
||||
margin-right: 10px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
.message-item-content-serverity{
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #434D6C;
|
||||
line-height: 17px;
|
||||
}
|
||||
.wrap-header{
|
||||
display: flex;
|
||||
margin: 30px auto;
|
||||
|
|
|
|||
Loading…
Reference in New Issue