ruxia
155 lines
5.0 KiB
HTML
155 lines
5.0 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>页面切换示例</title>
|
|
<script>
|
|
window.difyChatbotConfig = {
|
|
token: 'lijvRv14EYBUUllM',
|
|
baseUrl: 'https://172.20.0.145'
|
|
}
|
|
</script>
|
|
<script
|
|
src="https://172.20.0.145/embed.min.js"
|
|
id="lijvRv14EYBUUllM"
|
|
defer>
|
|
</script>
|
|
<style>
|
|
#dify-chatbot-bubble-button {
|
|
background-color: #1C64F2 !important;
|
|
}
|
|
#dify-chatbot-bubble-window {
|
|
width: 580px !important;
|
|
height: 40rem !important;
|
|
}
|
|
/* 隐藏按钮的样式 */
|
|
.hidden-buttons {
|
|
padding-left: 4px;
|
|
position: absolute;
|
|
z-index: 999999;
|
|
}
|
|
/* 显示按钮的样式 */
|
|
.show-buttons {
|
|
display: block;
|
|
}
|
|
/* 页面内容的样式 */
|
|
.page {
|
|
display: none;
|
|
}
|
|
.active {
|
|
display: block;
|
|
}
|
|
|
|
.hidden-buttons button {
|
|
cursor: pointer;
|
|
width: 52px;
|
|
height: 29px;
|
|
opacity: 0.01;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 隐藏的按钮组 -->
|
|
<div id="buttonGroup" class="hidden-buttons">
|
|
<button onclick="showPage(0)">页面0</button>
|
|
<button onclick="showPage(1)">页面1</button>
|
|
<button onclick="showPage(2)" style=" width: 72px;">页面2</button>
|
|
<button onclick="showPage(3)" style=" width: 72px;">页面3</button>
|
|
<button onclick="showPage(4)" style=" width: 66px;">页面4</button>
|
|
<button onclick="showPage(5)" style=" width: 62px;">页面5</button>
|
|
<button onclick="showPage(6)" style=" width: 70px;">页面6</button>
|
|
<button onclick="showPage(7)" style=" width: 76px;">页面7</button>
|
|
<button onclick="showPage(8)" style=" width: 77px;">页面8</button>
|
|
</div>
|
|
|
|
<!-- 页面内容 -->
|
|
<div id="page1" class="page active">
|
|
<img src="/static/主页.png" alt="页面1">
|
|
</div>
|
|
<div id="page2" class="page">
|
|
<img src="/static/工程信息.png" alt="页面2">
|
|
</div>
|
|
<div id="page3" class="page">
|
|
<img src="/static/取费设置.png" alt="页面3">
|
|
</div>
|
|
<div id="page4" class="page">
|
|
<img src="/static/组合件.png" alt="页面4">
|
|
</div>
|
|
<div id="page5" class="page">
|
|
<img src="/static/工程量.png" alt="页面5">
|
|
</div>
|
|
<div id="page6" class="page">
|
|
<img src="/static/材机分析.png" alt="页面6">
|
|
</div>
|
|
<div id="page7" class="page">
|
|
<img src="/static/工程费用.png" alt="页面7">
|
|
</div>
|
|
<div id="page8" class="page">
|
|
<img src="/static/报表输出.png" alt="页面8">
|
|
</div>
|
|
|
|
<script>
|
|
// 显示页面的函数
|
|
function showPage(pageNumber) {
|
|
// 处理清空JSON的特殊情况
|
|
if (pageNumber === 0) {
|
|
// 清空JSON但不改变当前页面显示
|
|
fetch('/clear_json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log('JSON已清空');
|
|
})
|
|
.catch(error => {
|
|
console.error('清空JSON失败:', error);
|
|
});
|
|
return; // 直接返回，不执行后续代码
|
|
}
|
|
|
|
// 隐藏所有页面
|
|
var pages = document.querySelectorAll('.page');
|
|
pages.forEach(function(page) {
|
|
page.classList.remove('active');
|
|
});
|
|
|
|
// 显示指定页面
|
|
var pageToShow = document.getElementById('page' + pageNumber);
|
|
pageToShow.classList.add('active');
|
|
|
|
// 获取页面标题并更新当前界面
|
|
var pageTitle = '';
|
|
switch(pageNumber) {
|
|
case 1: pageTitle = '主页'; break;
|
|
case 2: pageTitle = '工程信息'; break;
|
|
case 3: pageTitle = '取费设置'; break;
|
|
case 4: pageTitle = '组合件'; break;
|
|
case 5: pageTitle = '工程量'; break;
|
|
case 6: pageTitle = '材机分析'; break;
|
|
case 7: pageTitle = '工程费用'; break;
|
|
case 8: pageTitle = '报表输出'; break;
|
|
}
|
|
|
|
// 调用接口更新当前界面
|
|
if(pageTitle) {
|
|
fetch('/get_current_page?title=' + encodeURIComponent(pageTitle))
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log('软件信息:', JSON.stringify(data, null, 2));
|
|
console.log('当前界面:', data['当前界面']);
|
|
})
|
|
.catch(error => {
|
|
console.error('获取界面名称失败:', error);
|
|
});
|
|
}
|
|
}
|
|
|
|
// 页面加载时显示第一个页面
|
|
window.onload = function() {
|
|
showPage(1);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|