93 lines
3.6 KiB
HTML
93 lines
3.6 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>驿来特AI数据查询功能示例</title>
|
|||
|
|
<link rel="stylesheet" href="css/element-plus.index.css">
|
|||
|
|
<link rel="stylesheet" href="css/style.css">
|
|||
|
|
<link rel="stylesheet" href="css/degree.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="app">
|
|||
|
|
<!-- 悬浮二维码 -->
|
|||
|
|
<div class="qr-sidebar">
|
|||
|
|
<div id="qrcode" class="qr-code"></div>
|
|||
|
|
<p class="qr-text">手机扫码访问</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="degree-container" style="margin-top: 100px;">
|
|||
|
|
|
|||
|
|
<div class="query-section">
|
|||
|
|
<h1 class="page-title">驿来特AI智能数据查询</h1>
|
|||
|
|
<p class="page-subtitle">基于大语言模型，为您提供实时、精准的业务数据分析</p>
|
|||
|
|
|
|||
|
|
<div class="input-wrapper">
|
|||
|
|
<el-input
|
|||
|
|
v-model="query"
|
|||
|
|
placeholder="请输入您的问题，例如：帮我查询12月份充电量TOP 10场站的充电情况"
|
|||
|
|
class="search-input"
|
|||
|
|
size="large"
|
|||
|
|
@keyup.enter="handleSearch"
|
|||
|
|
:disabled="loading"
|
|||
|
|
>
|
|||
|
|
<template #append>
|
|||
|
|
<el-button @click="handleSearch" :loading="loading" type="primary">
|
|||
|
|
{{ loading ? '分析中...' : '开始查询' }}
|
|||
|
|
</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-input>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="example-tags">
|
|||
|
|
<el-tag
|
|||
|
|
v-for="(text, index) in examples"
|
|||
|
|
:key="index"
|
|||
|
|
class="example-tag"
|
|||
|
|
effect="plain"
|
|||
|
|
round
|
|||
|
|
size="large"
|
|||
|
|
@click="setExample(text)"
|
|||
|
|
>
|
|||
|
|
{{ text }}
|
|||
|
|
</el-tag>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="result-section" v-if="result || loading">
|
|||
|
|
<div class="result-header">
|
|||
|
|
<div class="result-title">
|
|||
|
|
<span>分析结果</span>
|
|||
|
|
<el-tag size="small" type="success" effect="dark" v-if="!loading">完成</el-tag>
|
|||
|
|
<el-tag size="small" type="warning" effect="dark" v-if="loading">生成中</el-tag>
|
|||
|
|
</div>
|
|||
|
|
<el-button
|
|||
|
|
v-if="loading"
|
|||
|
|
type="danger"
|
|||
|
|
link
|
|||
|
|
@click="stopGeneration"
|
|||
|
|
>
|
|||
|
|
停止生成
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="markdown-body" v-html="renderedResult"></div>
|
|||
|
|
<div v-if="loading && !result" class="loading-container">
|
|||
|
|
<p>正在分析数据，请稍候...</p>
|
|||
|
|
</div>
|
|||
|
|
<span v-if="loading" class="cursor-blink">|</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Scripts -->
|
|||
|
|
<script src="js/vue.global.js"></script>
|
|||
|
|
<script src="js/element-plus.index.full.js"></script>
|
|||
|
|
<script src="js/element-plus.zh-cn.min.js"></script>
|
|||
|
|
<script src="js/marked.min.js"></script>
|
|||
|
|
<script src="js/qrcode.min.js"></script>
|
|||
|
|
<script src="js/echarts.min.js"></script>
|
|||
|
|
<script src="js/degree.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|