Skip to content

Commit a5b4555

Browse files
calebmancalebman
committed
Add WebSocket
1 parent 8975f0f commit a5b4555

File tree

11 files changed

+119
-36
lines changed

11 files changed

+119
-36
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -191,11 +191,11 @@ NodeClick | 节点点击事件 | (当前节点数据)
191191

192192
* 源数据描述
193193

194-
属性 | 说明
194+
属性 | 说明
195195
------------ | -------------
196196
value | 树节点的唯一标识
197197
label | 树节点的显示名称
198-
status | (1：编辑状态)(0：显示状态)(-1不可编辑状态)
198+
status | (1：编辑状态)(0：显示状态)(-1：不可编辑状态)
199199
children | 子节点数据
200200

201201
* 调用示例

‎SELF_CHECK.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
## 20170920
2+
> 修复当表格为空的布局错乱bug
3+
4+
> 修复后台对表格权限的添加错误bug
5+
6+
> 添加websocket来回调导入数据的进度
7+
8+
* 实现大文件的数据分批导入并回调进度
9+
* 用户管理的用户增、改界面
10+
* 主页的数据接口完善
11+
112
## 20170920
213
> 添加表格的增、删、改后台接口
314

‎src/common/js/log.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default {
44
info:function (msg,type) {
55
if(this.openLog){
66
if(type&&type.indexOf(this.filter)>-1){
7-
console.info(msg)
7+
console.log("["+type+"]"+msg)
88
}else if(!type){
99
console.info(msg)
1010
}
@@ -13,7 +13,7 @@ export default {
1313
error:function (msg,type) {
1414
if(this.openLog){
1515
if(type&&type.indexOf(this.filter)>-1){
16-
console.error(msg)
16+
console.log("["+type+"]"+msg)
1717
}else if(!type){
1818
console.error(msg)
1919
}
@@ -22,7 +22,7 @@ export default {
2222
log:function (msg,type) {
2323
if(this.openLog){
2424
if(type&&type.indexOf(this.filter)>-1){
25-
console.log(msg)
25+
console.log("["+type+"]"+msg)
2626
}else if(!type){
2727
console.log(msg)
2828
}

‎src/components/table/MTable.vue‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,16 @@
4242
@on-selection-change="handleSelectionChange"
4343
v-if="!isLoading"
4444
@on-row-dblclick="handleEdit"
45-
height="600"
4645
size="small"
46+
no-data-text="数据为空"
4747
highlight-row
4848
border></Table>
49-
<Spin size="large" fix v-if="isLoading">
50-
<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
51-
<div>加载中</div>
52-
</Spin>
49+
<div class="Spin" v-if="isLoading">
50+
<Spin size="large" fix>
51+
<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
52+
<div>加载中</div>
53+
</Spin>
54+
</div>
5355
</div>
5456
<div style="margin-top:15px;margin-right:30px;" align="right">
5557
<Page
@@ -367,6 +369,14 @@
367369
<style>
368370
.demo-table{
369371
display: inline-block;
372+
overflow: auto;
373+
width: 100%;
374+
max-height: 600px;
375+
position: relative;
376+
}
377+
.Spin{
378+
display: inline-block;
379+
overflow: auto;
370380
width: 100%;
371381
height: 600px;
372382
position: relative;

‎src/components/table/components/ColumnHeader.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<div>
3-
<Icon type="pound" size="18" v-if="columnType == 'text'"></Icon>
3+
<Icon type="compose" size="18" v-if="columnType == 'text'"></Icon>
44
<Icon type="ios-clock-outline" size="18" v-if="columnType == 'date'"></Icon>
55
<Icon type="images" size="20" v-if="columnType == 'img'"></Icon>
6-
<Icon type="calculator" size="17" v-if="columnType == 'number'"></Icon>
7-
<Icon type="ios-flag-outline" size="20" v-if="columnType == 'select'"></Icon>
6+
<Icon type="ios-infinite-outline" size="18" v-if="columnType == 'number'"></Icon>
7+
<Icon type="ios-settings" size="20" v-if="columnType == 'select'"></Icon>
88
<span style="margin-left: 5px;font-size: 17px;color: #828282">{{column.title}}</span>
99
</div>
1010
</template>

‎src/main.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import util from './common/js/util'
1212
import log from './common/js/log'
1313
import 'iview/dist/styles/iview.css'
1414
import 'element-ui/lib/theme-default/index.css'
15+
import VueSocketio from 'vue-socket.io';
1516

1617
//单独引用element-ui相关组件
1718
Vue.use(Input)
@@ -29,8 +30,12 @@ Vue.config.productionTip = false
2930
Vue.prototype.$logHelper = log
3031
//引入工具，配置代理
3132
Vue.prototype.$utilHelper = util
32-
Vue.prototype.HOST = 'static'
33-
//Vue.prototype.HOST = process.env.NODE_ENV === 'development'? '/api':''
33+
//引入全局webSocket
34+
Vue.use(VueSocketio, 'http://localhost:3983');
35+
//使用静态文件
36+
//Vue.prototype.HOST = 'static'
37+
//使用代理连接后台
38+
Vue.prototype.HOST = process.env.NODE_ENV === 'development'? '/api':''
3439

3540
let vm = new Vue({
3641
el: '#app',

‎src/pages/Container.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
if(response.status == 200){
100100
var data = response.body.data
101101
var tableParam = {
102-
name:nodeData.value+"",
102+
name:nodeData.label,
103103
label:nodeData.label,
104104
type:'data',
105105
info:data,

‎src/pages/HomePage.vue‎

Lines changed: 44 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,11 @@
4040
</Col>
4141
</Row>
4242
</div>
43+
<i-circle :percent="percent" :stroke-color="color">
44+
<Icon v-if="percent == 100" type="ios-checkmark-empty" size="60" style="color:#5cb85c"></Icon>
45+
<span v-else style="font-size:24px">{{ percent }}%</span>
46+
</i-circle>
47+
<Button @click="send">123</Button>
4348
<div class="summary">
4449
<Tabs style="margin-top: 10px" v-model="selectTab" :animated="false">
4550
<TabPane label="访问量" name="accessChars">
@@ -60,14 +65,38 @@
6065
return {
6166
selectTab:"",
6267
accessChars:{},
63-
dataChars:{}
68+
dataChars:{},
69+
percent: 0
6470
}
6571
},
72+
methods:{
73+
send(){
74+
this.$socket.emit('message',"123")
75+
}
76+
},
6677
mounted(){
6778
// 基于准备好的dom，初始化echarts实例
6879
this.accessChars = echarts.init(document.getElementById('accessChar'));
6980
this.dataChars = echarts.init(document.getElementById('dataChar'));
7081
},
82+
computed: {
83+
color () {
84+
let color = '#2db7f5';
85+
if (this.percent == 100) {
86+
color = '#5cb85c';
87+
}
88+
return color;
89+
}
90+
},
91+
mounted(){
92+
this.$socket.emit('bind', window.sessionStorage.getItem("username"))
93+
},
94+
sockets:{
95+
message: function(val){
96+
console.log("[websocket] "+val)
97+
this.percent = val
98+
}
99+
},
71100
created(){
72101
let option = {
73102
// Make gradient line here
@@ -104,20 +133,20 @@
104133
if(this.HOST=="static"){
105134
url+=".json"
106135
}
107-
this.$http.get(url).then((response) => {
108-
if(response.status == 200){
109-
let accessList = response.body.data.accessList
110-
option.xAxis.data = accessList.map(function (item) {return item[0]})
111-
option.series.data = accessList.map(function (item) {return item[1]})
112-
option.title.text = "系统访问量统计"
113-
this.accessChars.setOption(option)
114-
let dataList = response.body.data.dataList
115-
option.xAxis.data = dataList.map(function (item) {return item[0]})
116-
option.series.data = dataList.map(function (item) {return item[1]})
117-
option.title.text = "系统总数据量统计"
118-
this.dataChars.setOption(option)
119-
}
120-
})
136+
// this.$http.get(url).then((response) => {
137+
// if(response.status == 200){
138+
// let accessList = response.body.data.accessList
139+
// option.xAxis.data = accessList.map(function (item) {return item[0]})
140+
// option.series.data = accessList.map(function (item) {return item[1]})
141+
// option.title.text = "系统访问量统计"
142+
// this.accessChars.setOption(option)
143+
// let dataList = response.body.data.dataList
144+
// option.xAxis.data = dataList.map(function (item) {return item[0]})
145+
// option.series.data = dataList.map(function (item) {return item[1]})
146+
// option.title.text = "系统总数据量统计"
147+
// this.dataChars.setOption(option)
148+
// }
149+
// })
121150
}
122151
}
123152
</script>

‎src/pages/system/data/components/CreateSteps.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,7 @@
302302
this.setp2Param.showErrorInfo = []
303303
},
304304
getEditLog(oldTable,newTable){
305+
newTable.tableName = newTable.tableName.toLowerCase()
305306
var getEdit = {
306307
logs:[],
307308
updateOpts:[],
@@ -312,6 +313,7 @@
312313
this.canCommit = true
313314
//检测表名与表位置变化变化
314315
if(oldTable){
316+
oldTable.tableName = oldTable.tableName.toLowerCase()
315317
if(newTable.tableName != oldTable.tableName){
316318
getEdit.logs.push({
317319
type:"warning",

‎src/pages/system/data/components/TableCard.vue‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<style>
22
.span_type{
33
font-size: 18px;
4-
color: #0082e6;
4+
color: #9F79EE;
55
}
66
.span_label{
77
font-size: 18px;
@@ -28,6 +28,10 @@
2828
&nbsp;
2929
<span class="span_detail"> {{columnsData.length}}列 &nbsp;{{tableDataCount}}行</span>
3030
</p>
31+
<a href="#" slot="extra" @click.prevent="searchTable" style="margin-right: 8px;">
32+
<Icon type="search"></Icon>
33+
查看
34+
</a>
3135
<a href="#" slot="extra" @click.prevent="editTable" style="margin-right: 8px;">
3236
<Icon type="edit"></Icon>
3337
编辑
@@ -43,11 +47,11 @@
4347
<span class="span_label">{{item.label}}</span>
4448
</Col>
4549
<Col :span="12">
46-
<Icon type="pound" size="18" :color="columnColor" v-if="item.type == 'text'"></Icon>
50+
<Icon type="compose" size="18" :color="columnColor" v-if="item.type == 'text'"></Icon>
4751
<Icon type="android-time" size="18" :color="columnColor" v-if="item.type == 'date'"></Icon>
4852
<Icon type="images" size="18" :color="columnColor" v-if="item.type == 'img'"></Icon>
49-
<Icon type="calculator" size="18" :color="columnColor" v-if="item.type == 'number'"></Icon>
50-
<Icon type="ios-flag-outline" size="20" :color="columnColor" v-if="item.type == 'select'"></Icon>
53+
<Icon type="ios-infinite-outline" size="18" :color="columnColor" v-if="item.type == 'number'"></Icon>
54+
<Icon type="ios-settings" size="20" :color="columnColor" v-if="item.type == 'select'"></Icon>
5155
&nbsp;
5256
<span class="span_type" v-if="item.type == 'text'">文本类型</span>
5357
<span class="span_type" v-if="item.type == 'date'">时间类型</span>
@@ -90,7 +94,7 @@
9094
export default {
9195
data () {
9296
return {
93-
columnColor:"blue",
97+
columnColor:"#9F79EE",
9498
delVisible:false
9599
}
96100
},
@@ -113,6 +117,21 @@
113117
},
114118
showDel(){
115119
this.delVisible = true
120+
},
121+
searchTable(){
122+
this.$http.get(this.HOST+'/admin/data/table/'+this.tableName+'/create').then((response) => {
123+
if(response.status == 200){
124+
var data = response.body.data
125+
var tabParam = {
126+
name:this.tableName,
127+
label:this.tableName,
128+
type:'data',
129+
info:data,
130+
active:true
131+
}
132+
this.$store.commit('addTabItem', tabParam)
133+
}
134+
})
116135
}
117136
},
118137
props:{

0 commit comments

Comments
 (0)