|
|
@@ -1,6 +1,5 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html xmlns:th="http://www.thymeleaf.org"
|
|
|
- xmlns:mo="https://gitee.com/aun/Timo">
|
|
|
+<html xmlns:th="http://www.thymeleaf.org">
|
|
|
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
|
|
|
<style>
|
|
|
a{
|
|
|
@@ -73,38 +72,52 @@
|
|
|
|
|
|
<body class="timo-layout-page">
|
|
|
<div class="layui-row layui-col-space15">
|
|
|
- <div class="layui-card">
|
|
|
- <div class="layui-card-header layui-form-pane">
|
|
|
- <div class="pull-left">
|
|
|
- <label for="getPageByEnv" class="layui-form-label">环境</label>
|
|
|
- </div>
|
|
|
- <div class="pull-right">
|
|
|
- <div class="layui-form-label">
|
|
|
- <select id="getPageByEnv" class="timo-search-select" name="env" onchange="getPageByCriteria()"
|
|
|
- mo:dict="ENVIRONMENT" mo-selected="${env}"></select>
|
|
|
- </div>
|
|
|
+ <div class="layui-col-md4">
|
|
|
+ <div class="layui-card">
|
|
|
+ <div class="layui-card-body">
|
|
|
+ <form id="form2">
|
|
|
+ <div class="layui-form-item layui-form-text">
|
|
|
+ <textarea id="myTextarea" placeholder="实时同步" class="layui-textarea" name="text"></textarea>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item timo-finally">
|
|
|
+ <button class="layui-btn button-submit2"><i class="fa fa-times-circle"></i> 清空</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="layui-col-md8">
|
|
|
- <div class="layui-card">
|
|
|
- <div class="layui-card-header">部署次数</div>
|
|
|
- <div id="chart1" class="layui-card-body" style="width: 800px;height:400px;"></div>
|
|
|
- </div>
|
|
|
- <div class="layui-card">
|
|
|
- <div class="layui-card-header">应用状态</div>
|
|
|
- <div id="chart2" class="layui-card-body" style="width: 800px;height:400px;"></div>
|
|
|
- </div>
|
|
|
+ <div class="layui-col-md4">
|
|
|
<div class="layui-card">
|
|
|
- <div class="layui-card-header">部署历史</div>
|
|
|
- <div id="chart3" class="layui-card-body" style="width: 800px;height:400px;"></div>
|
|
|
+ <div class="layui-card-body">
|
|
|
+ <form id="form1">
|
|
|
+ <div class="layui-form-item layui-form-text">
|
|
|
+ <textarea id="myTextarea1" placeholder="请输入内容(enter 键发布, ctrl+enter 键换行)" class="layui-textarea" name="text"></textarea>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item timo-finally">
|
|
|
+ <button class="layui-btn button-submit"><i class="fa fa-check-circle"></i> 发布</button>
|
|
|
+ <button class="layui-btn button-submit1"><i class="fa fa-times-circle"></i> 清空</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-col-md4">
|
|
|
<div class="layui-card">
|
|
|
- <div class="layui-card-header">应用类型</div>
|
|
|
+ <div class="layui-card-header">
|
|
|
+ <span><i class="fa fa-table"></i> 状态时间线</span>
|
|
|
+ </div>
|
|
|
<div class="layui-card-body">
|
|
|
- <div id="chart4" class="layui-card-body" style="width: 400px;height:400px;"></div>
|
|
|
+ <ul class="flow-default layui-timeline" id="LAY_demo1" style="height: 500px;overflow: auto">
|
|
|
+ <!--<li id="li2" class="layui-timeline-item">
|
|
|
+ <i class="layui-icon layui-timeline-axis"></i>
|
|
|
+ <div class="layui-timeline-content layui-text">
|
|
|
+ <h3 class="layui-timeline-title">v2.0.1</h3>
|
|
|
+ <p>
|
|
|
+ 1.更新：重命名菜单类型为：目录、菜单、按钮. 重写Shiro“记住我”系列化数据，减少cookie体积<br>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </li>-->
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -113,145 +126,118 @@
|
|
|
<script th:src="@{/js/plugins/jquery-3.4.1.min.js}" charset="utf-8"></script>
|
|
|
<script th:src="@{/lib/echarts-4.7.0/echarts.js}" charset="utf-8"></script>
|
|
|
<script type="text/javascript" th:inline="javascript">
|
|
|
- function getPageByCriteria() {
|
|
|
- var envSelectedOption = $("#getPageByEnv option:selected")
|
|
|
- var envParam = envSelectedOption.text()
|
|
|
+ $(document).on("click", ".button-submit", function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ var form = $(this).parents("form");
|
|
|
+ var url = form.attr("action");
|
|
|
+ var serializeArray = form.serializeArray();
|
|
|
+ var payload = serializeArray[0].value
|
|
|
+ if (payload === '') {
|
|
|
+ layer.msg('请输入内容', {offset: '15px', time: 5000, icon: 2});
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- params = '?env=' + envParam
|
|
|
- window.location.href = window.location.pathname + params;
|
|
|
- }
|
|
|
+ document.getElementById("form1").reset();
|
|
|
+ var jsonData = {}
|
|
|
+ jsonData.event = 'event_content'
|
|
|
+ jsonData.payload = payload
|
|
|
+ ws.send(JSON.stringify(jsonData))
|
|
|
+ });
|
|
|
+ $(document).on("click", ".button-submit1", function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ document.getElementById("form1").reset();
|
|
|
+ });
|
|
|
+ $(document).keypress(function(e) {
|
|
|
+ if((e.which === 13 && e.ctrlKey) || (e.which === 10 && e.ctrlKey)){
|
|
|
+ // 这里实现换行
|
|
|
+ var content = $("#myTextarea1").val();
|
|
|
+ $("#myTextarea1").val(content+"\n");
|
|
|
+ }else if(e.which === 13){
|
|
|
+ // 避免回车键换行
|
|
|
+ e.preventDefault();
|
|
|
|
|
|
- function chart1() {
|
|
|
- var chartZhu = echarts.init(document.getElementById('chart1'));
|
|
|
- //指定图表配置项和数据
|
|
|
- var option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ['npm', 'dotnetCore']
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'npm',
|
|
|
- type: 'line',
|
|
|
- data: [120, 220, 214, 238, 125, 117, 210],
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'dotnetCore',
|
|
|
- type: 'line',
|
|
|
- data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- chartZhu.setOption(option, true);
|
|
|
- }
|
|
|
+ var content = $("#myTextarea1").val();
|
|
|
+ submitData(content)
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- function chart2() {
|
|
|
- var chartZhu = echarts.init(document.getElementById('chart2'));
|
|
|
- //指定图表配置项和数据
|
|
|
- var option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
- type: 'line'
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- chartZhu.setOption(option, true);
|
|
|
- }
|
|
|
+ function submitData(content) {
|
|
|
+ if (content === '') {
|
|
|
+ layer.msg('请输入内容', {offset: '15px', time: 5000, icon: 2});
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- function chart3() {
|
|
|
- var chartZhu = echarts.init(document.getElementById('chart3'));
|
|
|
- //指定图表配置项和数据
|
|
|
- var option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
- type: 'line'
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- chartZhu.setOption(option, true);
|
|
|
- }
|
|
|
+ document.getElementById("form1").reset();
|
|
|
+ var jsonData = {}
|
|
|
+ jsonData.event = 'event_content'
|
|
|
+ jsonData.payload = content
|
|
|
+ ws.send(JSON.stringify(jsonData))
|
|
|
+ };
|
|
|
|
|
|
- function chart4() {
|
|
|
- var option1 = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: '5%',
|
|
|
- left: 'center'
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'App Type',
|
|
|
- type: 'pie',
|
|
|
- radius: ['40%', '70%'],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- itemStyle: {
|
|
|
- borderRadius: 10,
|
|
|
- borderColor: '#fff',
|
|
|
- borderWidth: 2
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: 'center'
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- fontSize: 40,
|
|
|
- fontWeight: 'bold'
|
|
|
- }
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- /*data: [
|
|
|
- { value: 7, name: 'DotNotCore' },
|
|
|
- { value: 3, name: 'NPM' }
|
|
|
- ]*/
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
+ document.getElementById("myTextarea").addEventListener("input", function() {
|
|
|
+ const event = {}
|
|
|
+ event.event = 'sync'
|
|
|
+ event.payload = this.value
|
|
|
+ ws.send(JSON.stringify(event))
|
|
|
+ });
|
|
|
+ $(document).on("click", ".button-submit2", function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ document.getElementById("form2").reset();
|
|
|
+ });
|
|
|
|
|
|
- var envSelectedOption = $("#getPageByEnv option:selected")
|
|
|
- var envParam = envSelectedOption.text()
|
|
|
- $.get('/api/home/app?env=' + envParam,function(result){
|
|
|
- if (result.code === 0) {
|
|
|
- console.log(result.data)
|
|
|
- option1.series[0].data = result.data
|
|
|
+ function add1(title, content) {
|
|
|
+ var h3 = document.createElement("h3");
|
|
|
+ h3.className = 'layui-timeline-title'
|
|
|
+ h3.innerHTML = title
|
|
|
|
|
|
- var chart1 = echarts.init(document.getElementById('chart4'));
|
|
|
- chart1.setOption(option1, true);
|
|
|
- }
|
|
|
- });
|
|
|
+ var p = document.createElement("p");
|
|
|
+ p.innerHTML = content
|
|
|
+
|
|
|
+ var i = document.createElement("i");
|
|
|
+ i.className = 'layui-icon layui-timeline-axis'
|
|
|
+ i.innerHTML = ''
|
|
|
+
|
|
|
+ var div = document.createElement("div");
|
|
|
+ div.className = 'layui-timeline-content layui-text'
|
|
|
+ div.appendChild(h3)
|
|
|
+ div.appendChild(p)
|
|
|
+
|
|
|
+ var li = document.createElement("li");
|
|
|
+ li.className = 'layui-timeline-item'
|
|
|
+ li.appendChild(i)
|
|
|
+ li.appendChild(div)
|
|
|
+
|
|
|
+ var ul = document.getElementById("LAY_demo1");
|
|
|
+ ul.prepend(li);
|
|
|
}
|
|
|
|
|
|
- chart1()
|
|
|
- chart2()
|
|
|
- chart3()
|
|
|
- chart4()
|
|
|
+ var ws;
|
|
|
+ function initWebSocket() {
|
|
|
+ if ("WebSocket" in window) {
|
|
|
+ ws = new WebSocket("wss://devops.reghao.cn/ws/message");
|
|
|
+ ws.onopen = function() {
|
|
|
+ // Web Socket 已连接上，使用 send() 方法发送数据
|
|
|
+ console.log("连接已建立...");
|
|
|
+ };
|
|
|
+ ws.onclose = function() {
|
|
|
+ console.log("连接已关闭...");
|
|
|
+ };
|
|
|
+ ws.onerror = function () {
|
|
|
+ console.log("连接错误...");
|
|
|
+ };
|
|
|
+ ws.onmessage = function (evt) {
|
|
|
+ var event = JSON.parse(evt.data)
|
|
|
+ var eventType = event.event
|
|
|
+ var title = new Date().getTime()
|
|
|
+ add1(title, event.payload)
|
|
|
+ //document.getElementById("myTextarea").value = evt.data
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 浏览器不支持 WebSocket
|
|
|
+ alert("您的浏览器不支持 WebSocket!");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ initWebSocket()
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
