* Copyright (C) 2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF unknown KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export const SpAiAnalysisPageHtml = `
<div class="chatBox">
<h3 class="chatTitle" style="color:#35a1db">
HiSmartPerf AI助手
</h3>
<div class="contentWindow">
<div class="ask_question">
<div class="q_a_window">
<div class="aiMessage message">
<div class="aiHeader headerDiv">
<img src="img/logo.png" class="headerImg"/>
</div>
<div class="systemSay">
有什么可以帮助您吗？
</div>
<div class="clear"></div>
</div>
</div>
<div class="chatInputBox">
<div class="chatConfig">
<div class="right-box">
<div class="history">
<img src="img/history.png" style="margin-right: 10px;"/>
<div class="config-tip hisTip">
历史记录
</div>
</div>
<div class="newChat">
<img src="img/new_chat.png"/>
<div class="config-tip">
新建聊天
</div>
</div>
</div>
</div>
<div class="chatInput">
<textarea class="inputText" placeholder="请输入消息"></textarea>
<img src="img/send.png" class="sendImg">
</div>
</div>
</div>
<div class="report_details">
<div class="selectionBox">
<div class="startBox">
<div class="timeTip"></div>
startTime:
<span class="startTime"></span>
</div>
<div class="endBox">
<div class="timeTip"></div>
endTime:
<span class="endTime"></span>
</div>
</div>
<div class="analysisList">
<div class="analysis-header">
<h4
style="text-align: center;background-color: white;padding: 10px 0px;color: #35a1db;border-radius:2px;margin:0">
诊断报告
</h4>
</div>
<lit-table id="tb-contents">
<lit-table-column class="cpu-fre-column" width="40px" title="序号" data-index="id" key="id" align="flex-start">
</lit-table-column>
<lit-table-column class="cpu-fre-column" width="1fr" title="问题类型" data-index="type" key="type" align="flex-start">
</lit-table-column>
<lit-table-column class="cpu-fre-column" width="1fr" title="问题原因" data-index="description" key="description" align="flex-start">
</lit-table-column>
</lit-table>
<div class="data-record"></div>
<div class="tips-content">
<div class="no-data">
<img src="img/nodata.png" />
<div style="text-align: center;">
暂无数据
</div>
</div>
</div>
</div>
<div class="report-button">
<div class="analysisBtn button">
一键诊断
</div>
<div class="downloadBtn button" style="display: none;">报告下载</div>
</div>
</div>
</div>
</div>
<div class="rightTabBar">
<lit-icon name='close' size = '18' style='position: absolute; top: 12px; right: 17px; cursor: pointer;'></lit-icon>
<div class="chatBar active">
<img src="img/talk_active.png" class="chatInon"/>
<div class="chatBarTitle">聊天</div>
</div>
<div class="report">
<img src="img/report.png" class="chatInon"/>
<div class="chatBarTitle">诊断</div>
</div>
</div>
<div class="tipsContainer" style="display:none;"></div>
<style>
.q_a_window{
height: 75%;
overflow-y: auto;
padding-right: 10px;
}
.mixedText{
text-align: center;
}
.textTips{
font-size: 14px;
height: 45px;
line-height: 45px;
background-color: #dff4fd;
padding: 0 10px;
border: 1px solid #35a1db;
border-radius: 10px;
}
.tipsContainer{
display: flex;
justify-content: center;
align-items: center;
width: 90%;
height: 50%;
position: absolute;
top: 23%;
left: 45%;
transform: translateX(-50%);
background-color: sky-blue;
}
.report_details {
width: 100%;
height: 100%;
display: none;
position: relative;
}
.report-button {
position: absolute;
bottom: 0;
right: 0;
}
.usersay {
max-width: 70%;
background: rgb(229,246,255);
border-radius: 4px;
float: right;
line-height: 20px;
text-overflow: ellipsis;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
font-size: 12px;
padding: 5px 10px;
margin-top: 10px;
margin-right: 10px;
position: relative;
text-align: justify;
color: #000;
border: 1px solid #c4ebf5;
border-radius: 9px;
border-top-right-radius: 0px;
}
.tips-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 90%;
}
#tb-contents {
box-shadow: 0px 2px 5px #bfbfbf;
margin-bottom: 5px;
margin-top: 1px;
border-radius: 7px;
font-size: 14px
}
.systemSay {
max-width: 70%;
border-radius: 4px;
background-color: rgb(249,250,252);
float: left;
line-height: 20px;
text-overflow: ellipsis;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
font-size: 12px;
padding: 5px 10px;
margin-top: 10px;
position: relative;
text-align: justify;
color: #000;
border: 0.5px solid #eaeaea;
border-radius: 0 10px 10px 10px;
}
.chatBox {
height: 100%;
padding-left: 5px;
padding-bottom: 10px;
padding-right: 40px;
}
.chatTitle {
margin: 0;
height: 50px;
line-height: 50px;
}
.contentWindow {
height: 92%;
padding: 0 10px 20px 10px;
border-radius: 10px;
position: relative;
background: rgba(235, 235, 235, 0)
}
.ask_question {
overflow-y: auto;
position: relative;
overflow-x:hidden;
height: 100%;
}
.ask_question pre code {
white-space: pre-wrap;
overflow-wrap: break-word;
max-width: 100%;
font-family: auto;
}
.msgdiv pre code {
white-space: pre-wrap;
overflow-wrap: break-word;
max-width: 100%;
font-family: auto;
}
.chatConfig {
width: 100%;
height: 30px;
position: relative;
margin-top: 10px;
padding-bottom: 5px;
border-top: 1px solid rgba(255, 255, 255, .3);
}
.chatConfig img {
width: 20px;
}
.chatConfig img:hover+.config-tip {
display: block;
}
.chatInput {
position: relative;
width: 100%;
height: 125px;
border-radius: 10px;
text-align: justify;
}
.right-box {
position: absolute;
display: flex;
right: 25px;
top: 10px;
}
.history,
.newChat {
position: relative;
}
.config-tip {
background-color: rgba(0, 0, 0, .8);
padding: 5px 10px;
color: #fff;
position: absolute;
top: -30px;
left: -24px;
border-radius: 5px;
width: 52px;
text-align: center;
font-size: 12px;
z-index: 9999;
display: none;
}
.message {
width: 100%;
}
.inputText {
height: 100%;
width: 100%;
resize: none;
padding: 10px;
padding-right: 5px;
background-color: #fcfcfc;
border-radius: 10px;
text-align: justify;
box-sizing: border-box;
border: 0.5px solid rgb(177, 205, 241);
font-weight: 400;
line-height: 20px;
box-shadow: -5px 5px 10px rgb(246, 246, 246);
}
.chatInputBox {
padding-right: 10px;
position: absolute;
width: 100%;
bottom: 5px;
}
.sendImg {
position: absolute;
bottom: 10px;
right: 30px;
cursor: pointer;
width: 20px;
height: 20px;
}
img {
cursor: pointer;
}
.rightTabBar {
text-align: center;
position: absolute;
width: 50px;
top: 0;
right: 0;
height: 100%;
padding-top: 50px;
font-size: 12px;
background-color: rgb(246, 246, 246);
color: #000;
box-sizing:border-box;
}
.chatBar{
padding-top: 10px;
}
.chatBarTitle {
font-size: 12px;
height: 30px;
line-height: 20px;
}
.rightTabBar img {
width: 20px;
}
.logo {
position: absolute;
top: 150px;
left: 120px;
width: 100px;
height: 100px;
}
.logo img {
width: 100%;
}
.report {
padding-top: 10px;
}
.headerDiv {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid galy;
margin-top: 10px;
}
.userHeader {
float: right;
background-image: url('img/header.png');
background-size:40px;
background-position:-5px -5px;
}
.clear {
clear: both;
}
.aiHeader {
float: left;
margin-right: 10px;
}
.headerImg {
width: 30px;
height: 30px;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: rgba(0,0,0,0.3);
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: #635d5d;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #4b4848;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:active {
background: #4b4848;
border-radius: 3px;
}
.history::title {
background-color: #dcdfe6;
}
textarea:focus {
outline: none;
}
textarea::placeholder {
color: #000;
}
.active {
color: #35a1db;
}
.analysisList {
overflow: hidden;
overflow-y: auto;
height: 84%;
padding-right: 10px;
padding-left: 10px;
box-shadow: 1px 2px 5px #bfbfbf;
border-radius: 8px;
position: relative;
}
.analysis-header {
position: sticky;
top: 0;
background-color: white;
z-index: 2;
}
.analysisItem {
width: 100%;
letter-spacing: 1.5px;
border-radius: 3px;
line-height: 20px;
position: relative;
}
.title {
font-size: 14px;
font-weight: 700;
background-color: #8bbcdff7;
padding: 10px 5px;
color: #fff;
}
.top-up-image {
width: 17px;
height: 17px;
background-image: url('img/top_up.png');
background-size: contain;
background-repeat: no-repeat;
border: 0;
}
.item-name {
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10px;
}
.item-name img {
width: 17px
}
.item {
margin-top: 3px;
background-color: rgba(212, 227, 227, 0.5);
padding: 10px 5px;
font-size: 12px;
word-break: break-all;
font-size: 12px;
}
.two {
background-color: rgba(209, 179, 179, 0.5);
}
.button {
padding: 3px 35px;
height: 26px;
background-color: #35a1db;
border-radius: 10px;
text-align: center;
line-height: 26px;
color: #fff;
font-size: 14px;
display: inline-block;
cursor: pointer;
}
.loginTip {
display: none;
font-size: 14px;
height: 45px;
line-height: 45px;
background-color: #dff4fd;
padding: 0 10px;
border: 1px solid #35a1db;
border-radius: 10px;
}
.importTraceTips{
width:203px;
visibility: hidden;
position: absolute;
top: 28%;
padding: 5px 15px;
background-color: rgb(236, 239, 247);
border-radius: 2px;
color: #000;
display: flex;
align-items: center;
font-size: 14px;
height: 50px;
line-height: 50px;
left: 50%;
transform: translateX(-50%);
}
.loadingItem {
height: 100px;
position: relative;
width: 100%;
margin-top: 20px;
}
@keyframes opcityliner {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.selectionBox div {
font-size: 15px;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.timeTip {
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #61da61;
margin: 0 10px 0 0 !important;
}
.timeText {
color:blue;
cursor: pointer;
}
.timeText[active]{
color:purple;
}
.timeText:not([active]) {
color:blue;
}
p {
margin:0;
}
.likeDiv {
width:100%;
height:25px;
margin-top:10px;
}
.getSgtBtn {
display: inline-block;
border: 1px #999 solid;
padding: 2px 20px;
border-radius: 15px;
font-size: 12px;
color:#999;
cursor:pointer;
}
.getSgtBtn:hover {
color:#000;
border-color:@000;
}
</style>
`;
