1/*
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF unknown KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16export const SpAiAnalysisPageHtml = `
17<div class="chatBox">
18        <h3 class="chatTitle" style="color:#35a1db">
19            HiSmartPerf AI助手
20        </h3>
21        <div class="chatWindow">
22            <div class="ask_question">
23                <div class="aiMessage message">
24                    <div class="aiHeader headerDiv">
25                        <img src="img/logo.png" class="headerImg"/>
26                    </div>
27                    <div class="systemSay">
28                        有什么可以帮助您吗？
29                        <div class="aiTriangle"></div>
30                    </div>
31                    <div class="clear"></div>
32                </div>
33            </div>
34            <div class="report_details">
35                <div class="selectionBox">
36                    <div class="startBox">
37                        <div class="timeTip"></div>
38                        开始时间：
39                        <span class="startTime"></span>
40                    </div>
41                    <div class="endBox">
42                        <div class="timeTip"></div>
43                        结束时间：
44                        <span class="endTime"></span>
45                    </div>
46                </div>
47                <div class="analysisList" style="height: 84%;padding-right: 10px;">
48                    <div class="analysis-header">
49                        <h3
50                            style="text-align: center;background-color: #4894f3;padding: 10px 0px;color: #fff;border-radius:2px;margin:0">
51                            分析报告
52                        </h3>
53                    </div>
54                    <div class="no-data">
55                        <img src="../application/img/nodata.png" />
56                        <div>
57                            暂无数据
58                        </div>
59                    </div>
60                    <div class="loginTip">
61                        <img src="img/sigh.png" style="margin-right: 8px;width: 18px;"/>未连接
62                    </div>
63                    <div class="data-record"></div>
64                </div>
65                <div class="report-button">
66                    <div class="analysisBtn button">
67                        一键诊断
68                    </div>
69                    <div class="downloadBtn button" style="display: none;">报告下载</div>
70                </div>
71            </div>
72            <div class="chatInputBox">
73                <div class="chatConfig">
74                    <div class="right-box">
75                        <div class="history">
76                            <img src="img/history.png" style="margin-right: 10px;"/>
77                            <div class="config-tip hisTip">
78                                历史记录
79                            </div>
80                        </div>
81                        <div class="newChat">
82                            <img src="img/new_chat.png"/>
83                            <div class="config-tip">
84                                新建聊天
85                            </div>
86                        </div>
87                    </div>
88                </div>
89                <div class="chatInput">
90                    <textarea class="inputText" placeholder="请输入消息"></textarea>
91                    <img src="img/send.png" class="sendImg">
92                </div>
93            </div>
94        </div>
95    </div>
96    <div class="rightTabBar">
97        <div class="chatBar active">
98            <img src="img/talk_active.png" class="chatInon"/>
99            <div class="chatBarTitle">聊天</div>
100        </div>
101        <div class="report">
102            <img src="img/report.png" class="chatInon"/>
103            <div class="chatBarTitle">诊断</div>
104        </div>
105    </div>
106    <style>
107    .report_details {
108        width: 98%;
109        height: 100%;
110        display: none;
111        position: relative;
112    }
113
114    .report-button {
115        position: absolute;
116        bottom: 0;
117        right: 0;
118    }
119
120    .usersay {
121        max-width: 70%;
122        background: #4baf50;
123        border-radius: 4px;
124        float: right;
125        line-height: 20px;
126        text-overflow: ellipsis;
127        word-break: break-all;
128        display: -webkit-box;
129        -webkit-box-orient: vertical;
130        font-size: 12px;
131        padding: 5px 10px;
132        margin-top: 10px;
133        margin-right: 10px;
134        position: relative;
135        text-align: justify;
136        color: #fff;
137    }
138
139    .userTriangle {
140        width: 0px;
141        height: 0px;
142        border-left: solid 8px #4baf50;
143        border-top: solid 5px rgba(255, 255, 255, 0);
144        border-bottom: solid 5px rgba(255, 255, 255, 0);
145        position: absolute;
146        right: -8px;
147        top: 8px;
148    }
149
150    .systemSay {
151        max-width: 70%;
152        border-radius: 4px;
153        background-color: #fe7300;
154        float: left;
155        line-height: 20px;
156        text-overflow: ellipsis;
157        word-break: break-all;
158        display: -webkit-box;
159        -webkit-box-orient: vertical;
160        font-size: 12px;
161        padding: 5px 10px;
162        margin-top: 10px;
163        position: relative;
164        text-align: justify;
165        color: #fff;
166    }
167
168    .aiTriangle {
169        width: 0px;
170        height: 0px;
171        border-right: solid 8px #fe7300;
172        border-top: solid 5px rgba(255, 255, 255, 0);
173        border-bottom: solid 5px rgba(255, 255, 255, 0);
174        position: absolute;
175        left: -7px;
176        top: 8px;
177    }
178
179    .chatBox {
180        height: 100%;
181        padding-left: 5px;
182        padding-bottom: 10px;
183        padding-right: 40px;
184    }
185
186    .chatTitle {
187        margin: 0;
188        height: 50px;
189        line-height: 50px;
190    }
191
192    .chatWindow {
193        height: 92%;
194        padding: 0 10px 20px;
195        border-radius: 10px;
196        position: relative;
197        background: rgba(235, 235, 235, 0)
198    }
199
200    .ask_question {
201        overflow-y: auto;
202        overflow-x:hidden;
203        height: 77%;
204        padding-right: 10px;
205    }
206
207    .chatConfig {
208        width: 100%;
209        height: 24%;
210        position: relative;
211        margin-top: 10px;
212        border-top: 1px solid rgba(255, 255, 255, .3);
213    }
214
215    .chatConfig img {
216        width: 20px;
217    }
218
219    .chatConfig img:hover+.config-tip {
220        display: block;
221    }
222
223    .chatInput {
224        position: relative;
225        width: 100%;
226        height: 127px;
227        border-radius: 10px;
228        text-align: justify;
229    }
230
231    .right-box {
232        position: absolute;
233        display: flex;
234        right: 0;
235        top: 10px;
236    }
237
238    .history,
239    .newChat {
240        position: relative;
241    }
242
243    .config-tip {
244        background-color: rgba(0, 0, 0, .8);
245        padding: 5px 10px;
246        color: #fff;
247        position: absolute;
248        top: -30px;
249        left: -24px;
250        border-radius: 5px;
251        width: 52px;
252        text-align: center;
253        font-size: 12px;
254        z-index: 9999;
255        display: none;
256    }
257
258    .message {
259        width: 100%;
260    }
261
262    .inputText {
263        height: 100%;
264        width: 100%;
265        resize: none;
266        padding: 10px;
267        padding-right: 5px;
268        background-color: #fcfcfc;
269        border-radius: 10px;
270        text-align: justify;
271        box-sizing: border-box;
272        border: none;
273        font-weight: 400;
274        line-height: 20px;
275    }
276
277    .chatInputBox {
278        padding-right: 10px;
279        height: 20%;
280    }
281
282    .sendImg {
283        position: absolute;
284        bottom: 10px;
285        right: 30px;
286        cursor: pointer;
287        width: 20px;
288        height: 20px;
289    }
290
291    img {
292        cursor: pointer;
293    }
294
295    .rightTabBar {
296        text-align: center;
297        position: absolute;
298        width: 50px;
299        top: 0;
300        right: 0;
301        height: 100%;
302        padding-top: 50px;
303        font-size: 12px;
304        background-color: #fcfcfc;
305        color: #000;
306        box-sizing:border-box;
307    }
308
309    .chatBarTitle {
310        font-size: 12px;
311        height: 30px;
312        line-height: 20px;
313        cursor: pointer;
314    }
315
316    .rightTabBar img {
317        width: 20px;
318    }
319
320    .logo {
321        position: absolute;
322        top: 150px;
323        left: 120px;
324        width: 100px;
325        height: 100px;
326
327    }
328
329    .logo img {
330        width: 100%;
331    }
332
333    .report {
334        padding-top: 10px;
335    }
336
337    .headerDiv {
338        width: 30px;
339        height: 30px;
340        border-radius: 50%;
341        border: 1px solid galy;
342        margin-top: 10px;
343    }
344
345    .userHeader {
346        float: right;
347        background-image: url('img/header.png');
348        background-size:40px;
349        background-position:-5px -5px;
350    }
351
352    .clear {
353        clear: both;
354    }
355
356    .aiHeader {
357        float: left;
358        margin-right: 10px;
359        background-image: url('img/logo1.png');
360        background-size: cover;
361    }
362
363    .headerImg {
364        width: 30px;
365        height: 30px;
366    }
367
368    ::-webkit-scrollbar {
369        width: 2px;
370    }
371
372    ::-webkit-scrollbar-track {
373        background: rgba(0,0,0,0.3);
374        border-radius: 3px;
375    }
376
377    ::-webkit-scrollbar-thumb {
378        background: #272624;
379        border-radius: 3px;
380    }
381
382    ::-webkit-scrollbar-thumb:hover {
383        background: #272624;
384        border-radius: 3px;
385    }
386
387    ::-webkit-scrollbar-thumb:active {
388        background: #272624;
389        border-radius: 3px;
390    }
391
392    .history::title {
393        background-color: #dcdfe6;
394    }
395
396    textarea:focus {
397        outline: none;
398    }
399
400    textarea::placeholder {
401        color: #000;
402    }
403
404    .active {
405        color: #35a1db;
406    }
407
408    .analysisList {
409        overflow: hidden;
410        overflow-y: auto;
411    }
412
413    .analysisItem {
414        width: 100%;
415        letter-spacing: 1.5px;
416        border-radius: 3px;
417        margin-top: 20px;
418        line-height: 20px;
419        position: relative;
420    }
421
422    .title {
423        font-size: 14px;
424        font-weight: 700;
425        background-color: rgba(133, 111, 216, 0.8);
426        padding: 10px 5px;
427        color: #fff;
428    }
429
430    .item-name {
431        font-size: 14px;
432        font-weight: 700;
433    }
434
435    .item {
436        margin-top: 3px;
437        background-color: rgba(212, 227, 227, 0.5);
438        padding: 10px 5px;
439        font-size: 12px;
440        word-break: break-all;
441        font-size: 12px;
442    }
443
444    .two {
445        background-color: rgba(209, 179, 179, 0.5);
446    }
447
448    .button {
449        padding: 3px 35px;
450        height: 26px;
451        background-color: #4290f2;
452        border-radius: 10px;
453        text-align: center;
454        line-height: 26px;
455        color: #fff;
456        font-size: 14px;
457        display: inline-block;
458        cursor: pointer;
459    }
460
461    .no-data {
462        text-align: center;
463        margin-top: 20%;
464    }
465
466    .loginTip {
467        visibility: hidden;
468        position: absolute;
469        top: 45%;
470        left: 38%;
471        padding: 5px 15px;
472        background-color: rgba(0, 0, 0, .8);
473        border-radius: 2px;
474        color: #fff;
475        display: flex;
476        align-items: center;
477        font-size: 12px;
478    }
479
480    .loadingItem {
481        height: 100px;
482        position: relative;
483        width: 100%;
484        margin-top: 20px;
485    }
486
487    @keyframes opcityliner {
488        from {
489            opacity: 0;
490        }
491
492        to {
493            opacity: 1;
494        }
495    }
496
497    .selectionBox div {
498        display: flex;
499        align-items: center;
500        margin-bottom: 10px;
501    }
502
503    .timeTip {
504        width: 10px;
505        height: 10px;
506        border-radius: 5px;
507        background-color: #61da61;
508        margin: 0 10px 0 0 !important;
509    }
510
511    p {
512      margin:0;
513    }
514</style>
515`