Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
mqttsnet
thinglinks
提交
d77031f0
thinglinks
项目概览
mqttsnet
/
thinglinks
通知
1
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
thinglinks
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
d77031f0
编写于
5月 05, 2022
作者:
很久是多久
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
增加时序采集数据页
上级
8612e6a7
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
1098 addition
and
0 deletion
+1098
-0
thinglinks-ui/src/views/link/terminal/detail.vue
thinglinks-ui/src/views/link/terminal/detail.vue
+208
-0
thinglinks-ui/src/views/link/terminal/guanfu.vue
thinglinks-ui/src/views/link/terminal/guanfu.vue
+364
-0
thinglinks-ui/src/views/link/terminal/index.vue
thinglinks-ui/src/views/link/terminal/index.vue
+175
-0
thinglinks-ui/src/views/link/terminal/lemp.vue
thinglinks-ui/src/views/link/terminal/lemp.vue
+351
-0
未找到文件。
thinglinks-ui/src/views/link/terminal/detail.vue
0 → 100644
浏览文件 @
d77031f0
<
template
>
<div
:class=
"$style['app-content']"
>
<div>
<el-button
type=
"text"
>
<i
class=
"el-icon-d-arrow-left"
style=
"font-size: 20px"
@
click=
"goBack"
></i>
</el-button>
<span
style=
"font-size: 20px; font-weight: bold"
>
{{
topicName
}}
</span>
<!--
<el-tag
v-if=
"baseInfo.onlineStatus == 0"
type=
"success"
:hit=
"false"
size=
"small"
>
在线
</el-tag>
<el-tag
v-if=
"baseInfo.onlineStatus == 1"
type=
"danger"
:hit=
"false"
size=
"small"
>
离线
</el-tag>
<el-tag
v-if=
"baseInfo.onlineStatus == 2"
type=
"warning"
size=
"small"
:hit=
"false"
>
未连接
</el-tag>
-->
</div>
<!--
<el-table
border
highlight-current-row
:data=
"tableData"
>
<el-table-column
align=
"center"
prop=
"dataKey"
label=
"指标"
show-overflow-tooltip
></el-table-column>
<el-table-column
align=
"center"
prop=
"dataValue"
label=
"指标值"
show-overflow-tooltip
></el-table-column>
</el-table>
-->
<table
:class=
"$style['device-table']"
border=
"1"
>
<tr>
<th>
指标
</th>
<th>
指标值
</th>
<th>
指标
</th>
<th>
指标值
</th>
</tr>
<tr
v-for=
"(item,index) in tableNewData"
:key=
"index"
>
<template
v-for=
"items in item"
>
<td>
{{
items
.
dataKey
}}
</td>
<td>
{{
items
.
dataValue
}}
</td>
</
template
>
</tr>
</table>
</div>
</template>
<
script
>
import
{
dataList
}
from
"
@/api/statistical/target
"
;
export
default
{
data
()
{
return
{
tableData
:
[],
tableNewData
:
[],
topicName
:
""
};
},
mounted
()
{
this
.
getList
();
this
.
topicName
=
this
.
$route
.
query
.
row
.
topicName
;
},
beforeDestroy
()
{
//清理工作 避免内存泄漏
//销毁监听事件
},
methods
:
{
getList
()
{
let
params
=
{
clientId
:
this
.
$route
.
query
.
clientId
,
eventTime
:
this
.
$route
.
query
.
row
.
eventTime
};
dataList
(
params
).
then
(
res
=>
{
if
(
res
.
code
==
200
)
{
this
.
tableData
=
res
.
data
;
this
.
getData
();
}
});
},
getData
()
{
const
arr
=
[];
let
minarr
=
[];
this
.
tableData
.
forEach
(
cate
=>
{
if
(
minarr
.
length
===
2
)
{
minarr
=
[];
}
if
(
minarr
.
length
==
0
)
{
arr
.
push
(
minarr
);
}
minarr
.
push
(
cate
);
});
this
.
tableNewData
=
arr
;
},
goBack
()
{
this
.
$router
.
push
({
path
:
"
/StatisticalMonitor/Terminal
"
,
query
:
{
activeNameBack
:
this
.
$route
.
query
.
activeName
,
clientIdBack
:
this
.
$route
.
query
.
clientId
,
startTime
:
this
.
$route
.
query
.
startTime
,
endTime
:
this
.
$route
.
query
.
endTime
}
});
}
}
};
</
script
>
<
style
lang=
"scss"
module
>
.app-content
{
padding
:
20px
;
}
.device-table
{
table-layout
:
fixed
;
width
:
100%
;
margin-top
:
15px
;
margin-bottom
:
15px
;
border-collapse
:
collapse
;
border
:
1px
solid
#cfdbe6
;
// border: none;
font-size
:
14px
;
td
:nth-child
(
odd
)
{
width
:
30%
;
overflow
:
hidden
;
padding
:
10px
15px
;
// background: #f8f8f9;
}
td
:nth-child
(
even
)
{
width
:
10%
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
word-break
:
keep-all
;
overflow
:
hidden
;
padding
:
10px
15px
;
}
th
{
height
:
40px
;
background
:
rgb
(
230
,
245
,
243
);
}
th
:nth-child
(
odd
)
{
width
:
20%
;
}
th
:nth-child
(
even
)
{
width
:
10%
;
}
}
.device-table1
{
table-layout
:
fixed
;
width
:
100%
;
margin-top
:
15px
;
margin-bottom
:
15px
;
border-collapse
:
collapse
;
border
:
1px
solid
#dfe6ec
;
// border: none;
font-size
:
14px
;
// min-height: 300px;
th
{
height
:
40px
!
important
;
background
:
rgb
(
230
,
245
,
243
);
}
.tdClass
{
width
:
10%
;
overflow
:
hidden
;
padding
:
10px
15px
;
text-align
:
center
;
// background: #f8f8f9;
}
.tdStatus
{
width
:
19%
;
overflow
:
hidden
;
padding
:
10px
15px
;
// background: #f8f8f9;
}
.tdZB
{
width
:
40%
;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
overflow
:
hidden
;
padding
:
10px
15px
;
}
.tdZB1
{
width
:
40%
;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
// background: #f8f8f9;
overflow
:
hidden
;
padding
:
10px
15px
;
}
}
.greencircle
{
display
:
inline-block
;
vertical-align
:
middle
;
width
:
24px
;
height
:
24px
;
background
:
url("../../.././assets/images/Common/green_point.png")
no-repeat
50%
50%
;
background-size
:
100%
;
margin-left
:
8px
;
}
.redcircle
{
display
:
inline-block
;
vertical-align
:
middle
;
width
:
24px
;
height
:
24px
;
background
:
url("../../.././assets/images/Common/red_point.png")
no-repeat
50%
50%
;
background-size
:
100%
;
margin-left
:
8px
;
}
.tdZB1
:hover
{
color
:
#56b4b0
;
}
</
style
>
<
style
scoped
>
.el-form-item
{
margin-bottom
:
0px
!important
;
}
</
style
>
\ No newline at end of file
thinglinks-ui/src/views/link/terminal/guanfu.vue
0 → 100644
浏览文件 @
d77031f0
<
template
>
<div>
<el-form
:model=
"qryData"
ref=
"queryForm"
:inline=
"true"
>
<el-form-item
label=
"设备"
required
>
<el-select
v-model=
"qryData.clientId"
size=
"small"
placeholder=
"请选择设备"
clearable
filterable
style=
"width: 220px"
>
<el-option
v-for=
"item in prosstionoptions"
:key=
"item.clientId"
:label=
"item.deviceName"
:value=
"item.clientId"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label=
"开始时间:"
required
>
<el-date-picker
v-model=
"qryData.startTime"
size=
"small"
type=
"datetime"
value-format=
"yyyy-MM-dd HH:mm:ss"
placeholder=
"开始日期"
></el-date-picker>
</el-form-item>
<el-form-item
label=
"结束时间:"
required
>
<el-date-picker
v-model=
"qryData.endTime"
size=
"small"
type=
"datetime"
value-format=
"yyyy-MM-dd HH:mm:ss"
placeholder=
"结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button
type=
"primary"
icon=
"el-icon-search"
size=
"mini"
@
click=
"handleSearch"
>
查询
</el-button>
<el-button
icon=
"el-icon-refresh"
size=
"mini"
@
click=
"resetQuery"
>
重置
</el-button>
</el-form-item>
</el-form>
<el-table
border
highlight-current-row
:data=
"tableData"
>
<el-table-column
align=
"center"
type=
"index"
label=
"序号"
width=
"60"
show-overflow-tooltip
></el-table-column>
<el-table-column
align=
"center"
prop=
"topicName"
label=
"topic名称"
show-overflow-tooltip
></el-table-column>
<el-table-column
align=
"center"
prop=
"msgSize"
label=
"数据大小"
show-overflow-tooltip
></el-table-column>
<el-table-column
align=
"center"
prop=
"eventTime"
label=
"数据上报时间"
show-overflow-tooltip
></el-table-column>
<el-table-column
align=
"center"
label=
"操作"
width=
"200"
class-name=
"small-padding fixed-width"
>
<template
slot-scope=
"scope"
>
<el-button
size=
"mini"
type=
"text"
icon=
"el-icon-search"
@
click=
"gotoDetailGuan(scope.row)"
>
查看
</el-button>
</
template
>
</el-table-column>
</el-table>
<div
style=
"width:100%; height: 480px; left:2%;margin-top:20px"
ref=
"ycechart"
></div>
</div>
</template>
<
script
>
import
{
proOptions
,
dataList
,
dataCharts
}
from
"
@/api/statistical/target
"
;
import
echarts
from
"
echarts
"
;
export
default
{
props
:
{
clientId
:
{
type
:
String
},
startTime
:
{
type
:
String
},
endTime
:
{
type
:
String
}
},
data
()
{
return
{
qryData
:
{
clientId
:
"
D2253IpgJo
"
,
startTime
:
this
.
$moment
()
.
subtract
(
1
,
"
days
"
)
.
format
(
"
YYYY-MM-DD HH:mm:ss
"
),
endTime
:
this
.
$moment
().
format
(
"
YYYY-MM-DD HH:mm:ss
"
)
},
prosstionoptions
:
[],
ycmyChart
:
null
,
tableData
:
[]
};
},
created
()
{
console
.
log
(
this
.
clientId
,
"
namenamename
"
);
console
.
log
(
this
.
startTime
,
"
namenamename
"
);
console
.
log
(
this
.
endTime
,
"
namenamename
"
);
if
(
this
.
clientId
)
{
this
.
qryData
.
clientId
=
this
.
clientId
;
this
.
qryData
.
startTime
=
this
.
startTime
;
this
.
qryData
.
endTime
=
this
.
endTime
;
}
console
.
log
(
this
.
qryData
.
clientId
,
"
namenamename
"
);
console
.
log
(
this
.
qryData
.
startTime
,
"
namenamename
"
);
console
.
log
(
this
.
qryData
.
endTime
,
"
namenamename
"
);
this
.
deviceOptions
();
},
methods
:
{
resizeChart
()
{
this
.
ycmyChart
?
this
.
ycmyChart
.
resize
()
:
""
;
this
.
pdmyChart
?
this
.
pdmyChart
.
resize
()
:
""
;
},
deviceOptions
()
{
proOptions
({
type
:
11
}).
then
(
res
=>
{
if
(
res
.
code
==
200
)
{
this
.
prosstionoptions
=
res
.
data
;
this
.
qryData
.
clientId
=
"
D2253IpgJo
"
;
}
});
this
.
getList
();
this
.
drawLine
();
},
getList
()
{
let
params
=
{
clientId
:
this
.
qryData
.
clientId
,
startTime
:
this
.
qryData
.
startTime
,
endTime
:
this
.
qryData
.
endTime
};
dataList
(
params
).
then
(
res
=>
{
if
(
res
.
code
==
200
)
{
this
.
tableData
=
res
.
data
;
}
});
},
drawLine
()
{
let
params
=
{
clientId
:
this
.
qryData
.
clientId
||
""
};
dataCharts
(
params
).
then
(
res
=>
{
if
(
res
.
code
==
200
)
{
this
.
ycmyChart
=
this
.
$echarts
.
init
(
this
.
$refs
.
ycechart
);
this
.
ycmyChart
.
setOption
({
xAxis
:
{
type
:
"
category
"
,
data
:
res
.
data
.
dateList
,
axisLabel
:
{
interval
:
0
,
rotate
:
0
// formatter: function(value) {
// return value.length > 6 ? value.slice(0, 3) + "..." : value;
// }
},
triggerEvent
:
true
},
yAxis
:
[
{
type
:
"
value
"
}
],
series
:
[
{
data
:
res
.
data
.
countList
,
type
:
"
line
"
,
smooth
:
true
,
areaStyle
:
{
normal
:
{
color
:
{
x
:
0
,
y
:
0
,
x2
:
0
,
y2
:
1
,
colorStops
:
[
{
offset
:
0
,
color
:
"
rgb(230, 245, 243)
"
},
{
offset
:
0.9
,
color
:
"
rgb(176, 238, 235)
"
}
],
globalCoord
:
false
}
}
},
itemStyle
:
{
normal
:
{
lineStyle
:
{
color
:
"
#4AB7BD
"
},
color
:
"
#56B4B0
"
}
}
// markArea: {
// itemStyle: {
// color: "rgb(230, 245, 243)"
// },
// data: [
// [
// {
// xAxis: res.data.pdEcharts.xData[0]
// },
// {
// xAxis:
// res.data.pdEcharts.xData[
// res.data.pdEcharts.xData.length - 1
// ]
// }
// ]
// ]
// }
}
],
legend
:
{
data
:
[],
orient
:
"
vertical
"
,
right
:
"
0%
"
,
top
:
"
35%
"
,
itemGap
:
20
,
padding
:
[
0
,
0
,
0
,
100
]
},
title
:
{
text
:
"
单位:条
"
},
tooltip
:
{
trigger
:
"
axis
"
},
grid
:
{
left
:
"
1%
"
,
right
:
"
7%
"
,
bottom
:
"
3%
"
,
containLabel
:
true
}
});
}
});
},
handleSearch
()
{
let
start
=
this
.
qryData
.
startTime
;
let
end
=
this
.
qryData
.
endTime
;
if
(
this
.
qryData
.
clientId
&&
this
.
qryData
.
startTime
&&
this
.
qryData
.
endTime
)
{
if
(
start
<
end
)
{
this
.
getList
();
this
.
drawLine
();
}
else
{
this
.
$message
.
error
(
"
开始时间要小于结束时间!
"
);
}
}
else
{
this
.
$message
.
error
(
"
有参数未选择!
"
);
}
},
//查询
resetQuery
()
{
this
.
qryData
.
clientId
=
""
;
this
.
qryData
.
startTime
=
""
;
this
.
qryData
.
endTime
=
""
;
},
gotoDetailGuan
(
row
)
{
this
.
$router
.
push
({
path
:
"
/StatisticalMonitor/Terminal/terminaldetail
"
,
query
:
{
activeName
:
"
1
"
,
row
:
row
,
clientId
:
this
.
qryData
.
clientId
,
startTime
:
this
.
qryData
.
startTime
,
endTime
:
this
.
qryData
.
endTime
}
});
}
}
};
</
script
>
<
style
lang=
"scss"
module
>
.app-content
{
padding
:
20px
;
}
.device-table
{
table-layout
:
fixed
;
width
:
100%
;
margin-top
:
15px
;
margin-bottom
:
15px
;
border-collapse
:
collapse
;
border
:
1px
solid
#cfdbe6
;
// border: none;
font-size
:
14px
;
td
:nth-child
(
odd
)
{
width
:
30%
;
overflow
:
hidden
;
padding
:
10px
15px
;
// background: #f8f8f9;
}
td
:nth-child
(
even
)
{
width
:
10%
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
word-break
:
keep-all
;
overflow
:
hidden
;
padding
:
10px
15px
;
}
th
{
height
:
40px
;
background
:
rgb
(
230
,
245
,
243
);
}
th
:nth-child
(
odd
)
{
width
:
20%
;
}
th
:nth-child
(
even
)
{
width
:
10%
;
}
}
.device-table1
{
table-layout
:
fixed
;
width
:
100%
;
margin-top
:
15px
;
margin-bottom
:
15px
;
border-collapse
:
collapse
;
border
:
1px
solid
#dfe6ec
;
// border: none;
font-size
:
14px
;
// min-height: 300px;
th
{
height
:
40px
!
important
;
background
:
rgb
(
230
,
245
,
243
);
}
.tdClass
{
width
:
10%
;
overflow
:
hidden
;
padding
:
10px
15px
;
text-align
:
center
;
// background: #f8f8f9;
}
.tdStatus
{
width
:
19%
;
overflow
:
hidden
;
padding
:
10px
15px
;
// background: #f8f8f9;
}
.tdZB
{
width
:
40%
;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
overflow
:
hidden
;
padding
:
10px
15px
;
}
.tdZB1
{
width
:
40%
;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
// background: #f8f8f9;
overflow
:
hidden
;
padding
:
10px
15px
;
}
}
.tdZB1
:hover
{
color
:
#56b4b0
;
}
</
style
>
<
style
scoped
>
\ No newline at end of file
thinglinks-ui/src/views/link/terminal/index.vue
0 → 100644
浏览文件 @
d77031f0
<
template
>
<div
:class=
"$style['app-content']"
>
<div>
<span
style=
" font-weight: bold"
>
业务数据采集项
</span>
<el-tabs
v-model=
"activeName"
@
tab-click=
"handleClick"
type=
"border-card"
style=
"margin:20px 0"
>
<el-tab-pane
label=
"网关"
name=
"1"
>
<Sun
:clientId=
"clientId"
:startTime=
"startTime"
:endTime=
"endTime"
></Sun>
</el-tab-pane>
<el-tab-pane
label=
"普通"
name=
"2"
>
<Lemp
:clientId=
"clientIdl"
:startTime=
"startTimel"
:endTime=
"endTimel"
></Lemp>
</el-tab-pane>
</el-tabs>
</div>
</div>
</
template
>
<
script
>
import
Lemp
from
"
./lemp
"
;
import
Sun
from
"
./guanfu
"
;
export
default
{
components
:
{
Lemp
,
Sun
},
data
()
{
return
{
activeName
:
"
1
"
,
tabName
:
{},
clientId
:
null
,
endTime
:
null
,
startTime
:
null
,
clientIdl
:
null
,
endTimel
:
null
,
startTimel
:
null
,
};
},
created
()
{
if
(
this
.
$route
.
query
.
activeNameBack
&&
this
.
$route
.
query
.
activeNameBack
==
"
1
"
)
{
this
.
activeName
=
this
.
$route
.
query
.
activeNameBack
||
"
1
"
;
this
.
clientId
=
this
.
$route
.
query
.
clientIdBack
;
this
.
startTime
=
this
.
$route
.
query
.
startTime
;
this
.
endTime
=
this
.
$route
.
query
.
endTime
;
}
else
{
this
.
activeName
=
this
.
$route
.
query
.
activeNameBack
||
"
1
"
;
this
.
clientIdl
=
this
.
$route
.
query
.
clientIdBack
;
this
.
startTimel
=
this
.
$route
.
query
.
startTime
;
this
.
endTimel
=
this
.
$route
.
query
.
endTime
;
}
console
.
log
(
this
.
clientId
,
"
namenamename
"
);
console
.
log
(
this
.
startTime
,
"
namenamename
"
);
console
.
log
(
this
.
endTime
,
"
namenamename
"
);
},
methods
:
{
//设备接口
deviceOptions
()
{
proOptions
({
type
:
11
}).
then
(
res
=>
{
if
(
res
.
code
==
200
)
{
this
.
prosstionoptions
=
res
.
data
;
this
.
qryData
.
clientId
=
"
D2253IpgJo
"
;
}
});
proOptions
({
type
:
12
}).
then
(
res
=>
{
if
(
res
.
code
==
200
)
{
this
.
prosstionoptionsLamp
=
res
.
data
;
}
});
this
.
getList
();
this
.
drawLine
();
},
handleClick
(
tab
)
{
this
.
tabName
=
tab
;
}
//tab切换
}
};
</
script
>
<
style
lang=
"scss"
module
>
.app-content
{
padding
:
20px
;
}
.device-table
{
table-layout
:
fixed
;
width
:
100%
;
margin-top
:
15px
;
margin-bottom
:
15px
;
border-collapse
:
collapse
;
border
:
1px
solid
#cfdbe6
;
// border: none;
font-size
:
14px
;
td
:nth-child
(
odd
)
{
width
:
30%
;
overflow
:
hidden
;
padding
:
10px
15px
;
// background: #f8f8f9;
}
td
:nth-child
(
even
)
{
width
:
10%
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
word-break
:
keep-all
;
overflow
:
hidden
;
padding
:
10px
15px
;
}
th
{
height
:
40px
;
background
:
rgb
(
230
,
245
,
243
);
}
th
:nth-child
(
odd
)
{
width
:
20%
;
}
th
:nth-child
(
even
)
{
width
:
10%
;
}
}
.device-table1
{
table-layout
:
fixed
;
width
:
100%
;
margin-top
:
15px
;
margin-bottom
:
15px
;
border-collapse
:
collapse
;
border
:
1px
solid
#dfe6ec
;
// border: none;
font-size
:
14px
;
// min-height: 300px;
th
{
height
:
40px
!
important
;
background
:
rgb
(
230
,
245
,
243
);
}
.tdClass
{
width
:
10%
;
overflow
:
hidden
;
padding
:
10px
15px
;
text-align
:
center
;
// background: #f8f8f9;
}
.tdStatus
{
width
:
19%
;
overflow
:
hidden
;
padding
:
10px
15px
;
// background: #f8f8f9;
}
.tdZB
{
width
:
40%
;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
overflow
:
hidden
;
padding
:
10px
15px
;
}
.tdZB1
{
width
:
40%
;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
// background: #f8f8f9;
overflow
:
hidden
;
padding
:
10px
15px
;
}
}
.tdZB1
:hover
{
color
:
#56b4b0
;
}
</
style
>
<
style
scoped
>
.el-form-item
{
margin-bottom
:
0px
!important
;
}
</
style
>
thinglinks-ui/src/views/link/terminal/lemp.vue
0 → 100644
浏览文件 @
d77031f0
<
template
>
<div>
<el-form
:model=
"qryData1"
ref=
"queryForm"
:inline=
"true"
>
<el-form-item
label=
"设备"
required
>
<el-select
v-model=
"qryData1.clientId"
size=
"small"
placeholder=
"请选择设备"
clearable
filterable
style=
"width: 220px"
>
<el-option
v-for=
"item in prosstionoptionsLamp"
:key=
"item.clientId"
:label=
"item.deviceName"
:value=
"item.clientId"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label=
"开始时间:"
required
>
<el-date-picker
v-model=
"qryData1.startTime"
size=
"small"
type=
"datetime"
value-format=
"yyyy-MM-dd HH:mm:ss"
placeholder=
"开始日期"
></el-date-picker>
</el-form-item>
<el-form-item
label=
"结束时间:"
required
>
<el-date-picker
v-model=
"qryData1.endTime"
size=
"small"
type=
"datetime"
value-format=
"yyyy-MM-dd HH:mm:ss"
placeholder=
"结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button
type=
"primary"
icon=
"el-icon-search"
size=
"mini"
@
click=
"handleSearch1"
>
查询
</el-button>
<el-button
icon=
"el-icon-refresh"
size=
"mini"
@
click=
"resetQuery1"
>
重置
</el-button>
</el-form-item>
</el-form>
<el-table
border
highlight-current-row
:data=
"tableDataTwo"
>
<el-table-column
align=
"center"
type=
"index"
label=
"序号"
width=
"60"
show-overflow-tooltip
></el-table-column>
<el-table-column
align=
"center"
prop=
"topicName"
label=
"topic名称"
show-overflow-tooltip
></el-table-column>
<el-table-column
align=
"center"
prop=
"msgSize"
label=
"数据大小"
show-overflow-tooltip
></el-table-column>
<el-table-column
align=
"center"
prop=
"eventTime"
label=
"数据上报时间"
show-overflow-tooltip
></el-table-column>
<el-table-column
align=
"center"
label=
"操作"
width=
"200"
class-name=
"small-padding fixed-width"
>
<template
slot-scope=
"scope"
>
<el-button
size=
"mini"
type=
"text"
icon=
"el-icon-search"
@
click=
"gotoDetail(scope.row)"
>
查看
</el-button>
</
template
>
</el-table-column>
</el-table>
<div
style=
"width:100%; height: 480px; left:2%;margin-top:20px"
ref=
"pdechart"
></div>
</div>
</template>
<
script
>
import
{
proOptions
,
dataList
,
dataCharts
}
from
"
@/api/statistical/target
"
;
import
echarts
from
"
echarts
"
;
export
default
{
props
:
{
clientId
:
{
type
:
String
},
startTime
:
{
type
:
String
},
endTime
:
{
type
:
String
}
},
data
()
{
return
{
qryData1
:
{
clientId
:
"
D2253IpgJo
"
,
startTime
:
this
.
$moment
()
.
subtract
(
1
,
"
days
"
)
.
format
(
"
YYYY-MM-DD HH:mm:ss
"
),
endTime
:
this
.
$moment
().
format
(
"
YYYY-MM-DD HH:mm:ss
"
)
},
prosstionoptionsLamp
:
[],
pdmyChart
:
null
,
tableDataTwo
:
[]
};
},
created
()
{
if
(
this
.
clientId
)
{
this
.
qryData1
.
clientId
=
this
.
clientId
;
this
.
qryData1
.
startTime
=
this
.
startTime
;
this
.
qryData1
.
endTime
=
this
.
endTime
;
}
console
.
log
(
this
.
clientId
,
"
111111
"
);
this
.
deviceOptions
();
},
methods
:
{
deviceOptions
()
{
proOptions
({
type
:
12
}).
then
(
res
=>
{
if
(
res
.
code
==
200
)
{
this
.
prosstionoptionsLamp
=
res
.
data
;
this
.
qryData1
.
clientId
=
"
D2253IpgJo
"
;
}
});
this
.
getList
();
this
.
drawLine
();
},
getList
()
{
let
params
=
{
clientId
:
this
.
qryData1
.
clientId
,
startTime
:
this
.
qryData1
.
startTime
,
endTime
:
this
.
qryData1
.
endTime
};
dataList
(
params
).
then
(
res
=>
{
if
(
res
.
code
==
200
)
{
this
.
tableDataTwo
=
res
.
data
;
}
});
},
drawLine
()
{
let
params
=
{
clientId
:
this
.
qryData1
.
clientId
||
""
};
dataCharts
(
params
).
then
(
res
=>
{
if
(
res
.
code
==
200
)
{
this
.
pdmyChart
=
this
.
$echarts
.
init
(
this
.
$refs
.
pdechart
);
this
.
pdmyChart
.
setOption
({
xAxis
:
{
type
:
"
category
"
,
data
:
res
.
data
.
dateList
,
axisLabel
:
{
interval
:
0
,
rotate
:
0
// formatter: function(value) {
// return value.length > 6 ? value.slice(0, 3) + "..." : value;
// }
},
triggerEvent
:
true
},
yAxis
:
[
{
type
:
"
value
"
}
],
series
:
[
{
data
:
res
.
data
.
countList
,
type
:
"
line
"
,
smooth
:
true
,
areaStyle
:
{
normal
:
{
color
:
{
x
:
0
,
y
:
0
,
x2
:
0
,
y2
:
1
,
colorStops
:
[
{
offset
:
0
,
color
:
"
rgb(230, 245, 243)
"
},
{
offset
:
0.9
,
color
:
"
rgb(176, 238, 235)
"
}
],
globalCoord
:
false
}
}
},
itemStyle
:
{
normal
:
{
lineStyle
:
{
color
:
"
#4AB7BD
"
},
color
:
"
#56B4B0
"
}
}
// markArea: {
// itemStyle: {
// color: "rgb(230, 245, 243)"
// },
// data: [
// [
// {
// xAxis: res.data.pdEcharts.xData[0]
// },
// {
// xAxis:
// res.data.pdEcharts.xData[
// res.data.pdEcharts.xData.length - 1
// ]
// }
// ]
// ]
// }
}
],
legend
:
{
data
:
[],
orient
:
"
vertical
"
,
right
:
"
0%
"
,
top
:
"
35%
"
,
itemGap
:
20
,
padding
:
[
0
,
0
,
0
,
100
]
},
title
:
{
text
:
"
单位:条
"
},
tooltip
:
{
trigger
:
"
axis
"
},
grid
:
{
left
:
"
1%
"
,
right
:
"
7%
"
,
bottom
:
"
3%
"
,
containLabel
:
true
}
});
}
});
},
handleSearch1
()
{
let
start
=
this
.
qryData1
.
startTime
;
let
end
=
this
.
qryData1
.
endTime
;
if
(
this
.
qryData1
.
clientId
&&
this
.
qryData1
.
startTime
&&
this
.
qryData1
.
endTime
)
{
if
(
start
<
end
)
{
this
.
getList
();
this
.
drawLine
();
}
else
{
this
.
$message
.
error
(
"
开始时间要小于结束时间!
"
);
}
}
else
{
this
.
$message
.
error
(
"
有参数未选择!
"
);
}
},
//查询
resetQuery1
()
{
this
.
qryData1
.
clientId
=
""
;
this
.
qryData1
.
startTime
=
""
;
this
.
qryData1
.
endTime
=
""
;
},
gotoDetail
(
row
)
{
this
.
$router
.
push
({
path
:
"
/StatisticalMonitor/Terminal/terminaldetail
"
,
query
:
{
activeName
:
"
2
"
,
row
:
row
,
clientId
:
this
.
qryData1
.
clientId
,
startTime
:
this
.
qryData1
.
startTime
,
endTime
:
this
.
qryData1
.
endTime
}
});
}
}
};
</
script
>
<
style
lang=
"scss"
module
>
.app-content
{
padding
:
20px
;
}
.device-table
{
table-layout
:
fixed
;
width
:
100%
;
margin-top
:
15px
;
margin-bottom
:
15px
;
border-collapse
:
collapse
;
border
:
1px
solid
#cfdbe6
;
// border: none;
font-size
:
14px
;
td
:nth-child
(
odd
)
{
width
:
30%
;
overflow
:
hidden
;
padding
:
10px
15px
;
// background: #f8f8f9;
}
td
:nth-child
(
even
)
{
width
:
10%
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
word-break
:
keep-all
;
overflow
:
hidden
;
padding
:
10px
15px
;
}
th
{
height
:
40px
;
background
:
rgb
(
230
,
245
,
243
);
}
th
:nth-child
(
odd
)
{
width
:
20%
;
}
th
:nth-child
(
even
)
{
width
:
10%
;
}
}
.device-table1
{
table-layout
:
fixed
;
width
:
100%
;
margin-top
:
15px
;
margin-bottom
:
15px
;
border-collapse
:
collapse
;
border
:
1px
solid
#dfe6ec
;
// border: none;
font-size
:
14px
;
// min-height: 300px;
th
{
height
:
40px
!
important
;
background
:
rgb
(
230
,
245
,
243
);
}
.tdClass
{
width
:
10%
;
overflow
:
hidden
;
padding
:
10px
15px
;
text-align
:
center
;
// background: #f8f8f9;
}
.tdStatus
{
width
:
19%
;
overflow
:
hidden
;
padding
:
10px
15px
;
// background: #f8f8f9;
}
.tdZB
{
width
:
40%
;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
overflow
:
hidden
;
padding
:
10px
15px
;
}
.tdZB1
{
width
:
40%
;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
// background: #f8f8f9;
overflow
:
hidden
;
padding
:
10px
15px
;
}
}
.tdZB1
:hover
{
color
:
#56b4b0
;
}
</
style
>
<
style
scoped
>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录