Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
D
DC-TOM
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
刘照晖
DC-TOM
Commits
8bfae5f3
Commit
8bfae5f3
authored
May 23, 2025
by
liuyangyang
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'dev' of
https://app.bmetech.com/liuzhaohui/dctomproject
into dev
parents
496e7dd0
d48ee858
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
457 additions
and
251 deletions
+457
-251
index.js
src/request/index.js
+3
-1
dialog.vue
src/views/closeManage/components/dialog.vue
+2
-2
myAgency.vue
src/views/closeManage/myAgency.vue
+97
-97
myDone.vue
src/views/closeManage/myDone.vue
+26
-57
warn.vue
src/views/dustMonitoring/components/warn.vue
+49
-0
index.vue
src/views/dustMonitoring/index.vue
+280
-94
No files found.
src/request/index.js
View file @
8bfae5f3
...
...
@@ -7,11 +7,13 @@ const ENV = import.meta.env
const
requestObj
=
{};
const
source
=
axios
.
CancelToken
.
source
()
const
service
=
axios
.
create
({
headers
:
{
"Content-Type"
:
"application/json"
,
"X-Requested-With"
:
"XMLHttpRequest"
}
},
cancelToken
:
source
.
token
});
service
.
interceptors
.
request
.
use
(
...
...
src/views/closeManage/components/dialog.vue
View file @
8bfae5f3
...
...
@@ -91,14 +91,14 @@ const handleSave = ()=> {
width
:
100%
;
.real-btn
{
width
:
auto
;
height
:
28
px
;
height
:
32
px
;
background
:
rgb
(
64
,
158
,
255
);
border
:
1px
solid
rgb
(
64
,
158
,
255
);
border-radius
:
4px
;
box-shadow
:
0
1px
9px
0
rgba
(
12
,
123
,
255
,
0
.3
)
inset
;
text-align
:
center
;
padding
:
0
16px
;
line-height
:
28
px
;
line-height
:
32
px
;
color
:
rgba
(
255
,
255
,
255
,
0
.85
);
margin-right
:
16px
;
cursor
:
pointer
;
...
...
src/views/closeManage/myAgency.vue
View file @
8bfae5f3
...
...
@@ -4,6 +4,7 @@
<el-form-item
label=
"事件名称:"
>
<el-select
v-model=
"formInline.eventNameId"
placeholder=
"请选择"
style=
"width: 280px"
>
<el-option
v-for=
"(item, index) in basicConfiguration.ticketEventName"
...
...
@@ -20,16 +21,20 @@
<el-form-item
label=
"所属区域:"
>
<el-select
v-model=
"formInline.branchFactoryIds"
placeholder=
"请选择"
style=
"width: 180px"
>
<el-option
v-for=
"(item, index) in basicConfiguration.branchFactoryList"
:key=
"item.
i
d"
:label=
"item.
name
"
:value=
"item.
i
d"
:key=
"item.
branchFactoryI
d"
:label=
"item.
branchFactory
"
:value=
"item.
branchFactoryI
d"
/>
</el-select>
</el-form-item>
<el-form-item
label=
"设备类型"
>
<el-select
v-model=
"formInline.deviceType"
>
<el-select
v-model=
"formInline.deviceType"
style=
"width: 180px"
placeholder=
"请选择"
>
<el-option
label=
"全部"
value=
""
/>
<el-option
v-for=
"(item, index) in basicConfiguration.deviceList"
...
...
@@ -41,14 +46,13 @@
</el-select>
</el-form-item>
<el-form-item
label=
"发生时间"
>
<el-date-picker
type=
"daterange"
<el-date-picker
type=
"date
time
range"
v-model=
"formInline.createTime"
range-separator=
"至"
start-placeholder=
"开始日期"
end-placeholder=
"结束日期"
format=
"YYYY-MM-DD HH:mm:ss"
date-format=
"YYYY/MM/DD ddd"
time-format=
"A hh:mm:ss"
value-format=
"YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item>
...
...
@@ -97,6 +101,7 @@
:show-dialog=
"doneDialog.show"
:title=
"doneDialog.title"
:width=
"doneDialog.width"
:btn-group=
"doneDialog.btnGroup"
@
handleBtn=
"saveDeal"
@
close:showDialog=
"doneDialog.show = false"
>
...
...
@@ -121,15 +126,15 @@
<div
class=
"alarm-content"
>
<div
class=
"content-item"
>
<span
class=
"name"
>
编号:
</span>
<span
class=
"value"
>
{{ workSheetDetail.workTicketNo }}
</span>
<span
class=
"value"
>
{{ workSheetDetail
?
.workTicketNo }}
</span>
</div>
<div
class=
"content-item"
>
<span
class=
"name"
>
创建时间:
</span>
<span
class=
"value"
>
{{ workSheetDetail.createTime }}
</span>
<span
class=
"value"
>
{{ workSheetDetail
?
.createTime }}
</span>
</div>
<div
class=
"content-item"
>
<span
class=
"name"
>
闭环控制状态:
</span>
<span
class=
"value work-status"
>
{{ workSheetDetail.desc }}
</span>
<span
class=
"value work-status"
>
{{ workSheetDetail
?
.desc }}
</span>
</div>
</div>
</el-col>
...
...
@@ -141,12 +146,12 @@
<div
class=
"content-item"
>
<span
class=
"name"
>
所属区域:
</span>
<span
class=
"value"
>
{{
workSheetDetail.branchFactory || "--"
workSheetDetail
?
.branchFactory || "--"
}}
</span>
</div>
<div
class=
"content-item"
>
<span
class=
"name"
>
发生位置:
</span>
<span
class=
"value"
>
{{ workSheetDetail.deviceName }}
</span>
<span
class=
"value"
>
{{ workSheetDetail
?
.deviceName }}
</span>
</div>
<div
class=
"content-item"
...
...
@@ -179,19 +184,16 @@
workSheetDetail.warnType != 4 &&
workSheetDetail.warnType != 18
"
>
{{ workSheetDetail
.value }}{{ workSheetDetail
.unit }}
</span
>
{{ workSheetDetail
?.value }}{{ workSheetDetail?
.unit }}
</span
>
<span
class=
"value alarm-value"
v-else-if=
"workSheetDetail?.warnType == 4"
>
{{ warnValueFilter(workSheetDetail?.offlineTime) }}
</span>
</div>
<div
class=
"content-item"
v-if=
"workSheetDetail.convertValue"
>
<div
class=
"content-item"
v-if=
"workSheetDetail
?
.convertValue"
>
<span
class=
"name"
>
折算值:
</span>
<span
class=
"value alarm-value"
>
{{ workSheetDetail.convertValue
}}{{ workSheetDetail.unit }}
</span
>
<span
class=
"value alarm-value"
>
{{ workSheetDetail?.convertValue }}{{ workSheetDetail?.unit }}
</span>
</div>
<div
class=
"content-item"
>
<span
class=
"name"
>
告警时间:
</span>
...
...
@@ -537,7 +539,7 @@
<div
class=
"label-title"
>
原因分析
</div>
<el-input
class=
"input-style"
v-model=
"
form.r
eason"
v-model=
"
dialogR
eason"
type=
"textarea"
:rows=
"3"
placeholder=
"请输入内容"
...
...
@@ -551,7 +553,7 @@
<div>
<el-input
class=
"input-style"
v-model=
"
form.m
easure"
v-model=
"
dialogM
easure"
type=
"textarea"
:rows=
"3"
placeholder=
"请输入内容"
...
...
@@ -565,22 +567,24 @@
<common-dialog
:showDialog=
"assignDialog.show"
:title=
"assignDialog.title"
:btn-group=
"assignDialog.btnGroup"
:width=
"assignDialog.width"
@
handleBtn=
"saveAssign"
@
close:showDialog=
"assignDialog.show = false"
>
<el-form
:inline=
"true"
>
<el-form>
<el-form-item
label=
"分派人:"
>
<
el-select
v-model=
"handlerPeopleId"
filterable
placeholder=
"请选择分派人
"
>
<el-
option
v-for=
"(item, i) in handlerPeople"
:key=
"i
"
:label=
"item.name
"
:value=
"item.id
"
></el-option>
</el-select
>
</el-form-item
>
<el-form-item
>
<
el-button
type=
"primary"
@
click=
"addPerson"
>
新增
</el-button
>
<
div
class=
"inline-box
"
>
<el-
select
v-model=
"handlerPeopleId"
filterable
placeholder=
"请选择分派人"
>
<el-option
v-for=
"(item, i) in handlerPeople
"
:key=
"i
"
:label=
"item.name
"
:value=
"item.id"
></el-option
>
</el-select
>
<el-button
type=
"primary"
class=
"addBtn"
@
click=
"addPerson"
>
新增
</el-button
>
<
/div
>
</el-form-item>
<el-form-item
label=
"已分派人:"
>
<el-tag
...
...
@@ -601,7 +605,7 @@
import
{
ref
,
reactive
,
onMounted
,
onBeforeUnmount
,
computed
}
from
'vue'
import
CommonTable
from
"@/components/commonTable/index.vue"
;
import
commonDialog
from
"./components/dialog.vue"
;
import
{
getDataFun
,
postDataJson
,
postDataJSON
}
from
'@/request/method.js'
;
import
{
getData
,
getData
Fun
,
postDataJson
,
postDataJSON
}
from
'@/request/method.js'
;
import
moment
from
'moment'
;
import
{
getToken
}
from
'@/utils/auth.js'
;
import
{
ElMessage
}
from
'element-plus'
...
...
@@ -625,9 +629,27 @@ const workTicketNo = ref('');
const
handlerPeopleId
=
ref
(
''
);
const
handlerPeople
=
ref
([]);
const
getHandlerPeople
=
async
()
=>
{
const
url
=
'/transfer-work-ticket-pc/getTicketHandler?pageSize=999&pageNo=1'
;
try
{
let
result
=
await
getData
(
url
);
if
(
result
&&
result
.
code
===
1
)
{
const
{
records
}
=
result
.
data
;
handlerPeople
.
value
=
records
;
}
}
catch
(
e
)
{
ElMessage
({
message
:
'接口报错'
,
type
:
'error'
})
}
}
const
assignDialog
=
ref
({
title
:
'闭环控制分派'
,
show
:
false
,
width
:
'30%'
,
btnGroup
:
[
{
attrKey
:
'save'
,
...
...
@@ -671,7 +693,7 @@ const saveAssign = ()=> {
})
});
const
params
=
{
workTicketNo
,
workTicketNo
:
workTicketNo
.
value
,
receiveUser
:
''
,
receiveUserName
:
''
,
handleUsers
:
tempArr
...
...
@@ -771,7 +793,7 @@ const onReset =()=> {
const
doneDialog
=
ref
({
title
:
'闭环控制分派'
,
show
:
false
,
width
:
'
50
%'
,
width
:
'
45
%'
,
btnGroup
:
[
{
attrKey
:
'save'
,
...
...
@@ -788,8 +810,9 @@ const viewData = {
const
handleDone
=
async
(
data
)
=>
{
doneDialog
.
value
.
title
=
data
.
eventName
;
workTicketNo
.
value
=
data
.
workTicketNo
;
let
res
=
await
getDetail
(
data
.
workTicketNo
);
doneDialog
.
value
.
show
=
true
;
/*let res = await getDetail(data.workTicketNo);
personTag
.
value
=
[];
if
(
res
.
handleUsers
&&
res
.
handleUsers
.
length
>
0
)
{
res
.
handleUsers
.
forEach
(
item
=>
{
...
...
@@ -801,12 +824,13 @@ const handleDone = async (data)=> {
});
});
}
disposeWorkSheetDetail(res);
*/
disposeWorkSheetDetail
(
res
);
}
const
saveDeal
=
()
=>
{
const
{
workTicketNo
,
handleValue
,
imgUrl
}
=
workSheetDetail
.
value
;
const
{
resson
,
measure
}
=
this
.
form
;
const
reason
=
dialogReason
.
value
;
const
measure
=
dialogMeasure
.
value
;
const
param
=
{
workTicketNo
,
handleValue
,
reason
,
measure
,
imgUrl
};
const
url
=
'/transaction/doc/finishTransaction'
;
disposeHandle
(
url
,
param
);
...
...
@@ -833,8 +857,10 @@ const disposeHandle = async (url, param) => {
// 分派
const
handleDispatch
=
async
(
data
)
=>
{
assignDialog
.
value
.
show
=
true
;
/*let res = await getDetail(data.workTicketNo);
getHandlerPeople
();
workTicketNo
.
value
=
data
.
workTicketNo
;
let
res
=
await
getDetail
(
data
.
workTicketNo
);
assignDialog
.
value
.
show
=
true
;
personTag
.
value
=
[];
if
(
res
.
handleUsers
&&
res
.
handleUsers
.
length
>
0
)
{
res
.
handleUsers
.
forEach
(
item
=>
{
...
...
@@ -845,7 +871,7 @@ const handleDispatch = async (data)=> {
userName
:
item
.
userName
});
});
}
*/
}
}
const
getDetail
=
(
workTicketNo
)
=>
{
...
...
@@ -867,42 +893,7 @@ const changeBag = (data)=>{
}
const
tableData
=
ref
([
{
id
:
1
,
name
:
'张三'
,
phone
:
'13888888888'
,
email
:
'<EMAIL>'
,
branchFactory
:
'上海分公司'
,
deviceType
:
'烟感'
,
eventTime
:
'2021-09-09 12:00:00'
,
eventStatus
:
'已处理'
,
eventDetail
:
'设备报警'
,
level
:
1
},
{
id
:
2
,
name
:
'张三'
,
phone
:
'13888888888'
,
email
:
'<EMAIL>'
,
branchFactory
:
'上海分公司'
,
deviceType
:
'烟感'
,
eventTime
:
'2021-09-09 12:00:00'
,
eventStatus
:
'已处理'
,
eventDetail
:
'设备报警'
,
level
:
2
},
{
id
:
3
,
name
:
'张三'
,
phone
:
'13888888888'
,
email
:
'<EMAIL>'
,
branchFactory
:
'上海分公司'
,
deviceType
:
'烟感'
,
eventTime
:
'20'
,
level
:
3
}
]);
const
tableData
=
ref
([]);
const
tableColumns
=
ref
([
{
...
...
@@ -983,8 +974,9 @@ const getWarnAndTicketConfigMap = ()=> {
}
getDataFun
(
url
,
params
).
then
(
res
=>
{
if
(
res
&&
res
.
code
===
1
)
{
const
{
ticketEventName
,
eventType
}
=
res
.
data
;
const
{
ticketEventName
,
deviceType
}
=
res
.
data
;
basicConfiguration
.
ticketEventName
=
basicConfiguration
.
ticketEventName
.
concat
(
ticketEventName
);
basicConfiguration
.
deviceList
=
deviceType
;
}
});
};
...
...
@@ -1076,10 +1068,8 @@ const disposeType = (list)=> {
const
srcList
=
ref
([]);
const
form
=
ref
({
reason
:
""
,
measure
:
""
,
});
const
dialogReason
=
ref
(
''
);
const
dialogMeasure
=
ref
(
''
);
const
imgUrlList
=
ref
([]);
const
alarmImags
=
ref
([]);
const
disposeWorkSheetDetail
=
(
obj
)
=>
{
...
...
@@ -1115,9 +1105,9 @@ const disposeWorkSheetDetail = (obj)=> {
}
onMounted
(()
=>
{
//
getBranchTypeList();
//
getWarnAndTicketConfigMap();
//
searchData();
getBranchTypeList
();
getWarnAndTicketConfigMap
();
searchData
();
});
const
formModel
=
ref
({
...
...
@@ -1153,48 +1143,48 @@ const handlePaginationChange = (pagination) => {
color
:
#fff
;
text-align
:
center
;
}
.table-box
{
height
:
calc
(
100vh
-
200px
);
}
.yellow
{
// color: #faa508;
position
:
relative
;
&
:
:
before
{
content
:
' '
;
content
:
" "
;
width
:
8px
;
height
:
8px
;
border-radius
:
50%
;
background
:
#ffb224
;
position
:
absolute
;
left
:
50%
;
top
:
50%
;
transform
:
translate
(
-50%
);
left
:
0
;
top
:
6px
;
}
}
.red
{
position
:
relative
;
&
:
:
before
{
content
:
' '
;
content
:
" "
;
width
:
8px
;
height
:
8px
;
border-radius
:
50%
;
background
:
#db001d
;
position
:
absolute
;
left
:
50%
;
top
:
50%
;
transform
:
translate
(
-50%
);
left
:
0
;
top
:
6px
;
}
}
.purple
{
position
:
relative
;
&
:
:
before
{
content
:
' '
;
content
:
" "
;
width
:
8px
;
height
:
8px
;
border-radius
:
50%
;
background
:
#aa05fa
;
position
:
absolute
;
left
:
50%
;
top
:
50%
;
transform
:
translate
(
-50%
);
left
:
0
;
top
:
6px
;
}
}
.view-btn
{
...
...
@@ -1204,6 +1194,7 @@ const handlePaginationChange = (pagination) => {
.form-box
{
height
:
60vh
;
overflow-y
:
auto
;
overflow-x
:
hidden
;
.label-title
{
position
:
relative
;
padding-left
:
14px
;
...
...
@@ -1283,5 +1274,14 @@ const handlePaginationChange = (pagination) => {
background
:
#2182a0
;
border
:
1px
solid
#2182a0
;
}
:deep
(
.el-tag
)
{
margin-right
:
10px
;
}
.inline-box
{
display
:
flex
;
.addBtn
{
margin-left
:
10px
;
}
}
}
</
style
>
\ No newline at end of file
src/views/closeManage/myDone.vue
View file @
8bfae5f3
...
...
@@ -4,6 +4,7 @@
<el-form-item
label=
"事件名称:"
>
<el-select
v-model=
"formInline.eventNameId"
placeholder=
"请选择"
style=
"width: 280px"
>
<el-option
v-for=
"(item, index) in basicConfiguration.ticketEventName"
...
...
@@ -20,17 +21,20 @@
<el-form-item
label=
"所属区域:"
>
<el-select
v-model=
"formInline.branchFactoryIds"
placeholder=
"请选择"
style=
"width: 180px"
>
<el-option
label=
"全部"
value=
""
/>
<el-option
v-for=
"(item, index) in basicConfiguration.branchFactoryList"
:key=
"item.
i
d"
:label=
"item.
name
"
:value=
"item.
i
d"
:key=
"item.
branchFactoryI
d"
:label=
"item.
branchFactory
"
:value=
"item.
branchFactoryI
d"
/>
</el-select>
</el-form-item>
<el-form-item
label=
"设备类型"
>
<el-select
v-model=
"formInline.deviceType"
>
<el-select
v-model=
"formInline.deviceType"
style=
"width: 180px"
placeholder=
"请选择"
>
<el-option
label=
"全部"
value=
""
/>
<el-option
v-for=
"(item, index) in basicConfiguration.deviceList"
...
...
@@ -42,14 +46,13 @@
</el-select>
</el-form-item>
<el-form-item
label=
"发生时间"
>
<el-date-picker
type=
"daterange"
<el-date-picker
type=
"date
time
range"
v-model=
"formInline.createTime"
range-separator=
"至"
start-placeholder=
"开始日期"
end-placeholder=
"结束日期"
format=
"YYYY-MM-DD HH:mm:ss"
date-format=
"YYYY/MM/DD ddd"
time-format=
"A hh:mm:ss"
value-format=
"YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item>
...
...
@@ -935,42 +938,7 @@ const changeBag = (data)=>{
}
const
tableData
=
[
{
id
:
1
,
name
:
'张三'
,
phone
:
'13888888888'
,
email
:
'<EMAIL>'
,
branchFactory
:
'上海分公司'
,
deviceType
:
'烟感'
,
eventTime
:
'2021-09-09 12:00:00'
,
eventStatus
:
'已处理'
,
eventDetail
:
'设备报警'
,
level
:
1
},
{
id
:
2
,
name
:
'张三'
,
phone
:
'13888888888'
,
email
:
'<EMAIL>'
,
branchFactory
:
'上海分公司'
,
deviceType
:
'烟感'
,
eventTime
:
'2021-09-09 12:00:00'
,
eventStatus
:
'已处理'
,
eventDetail
:
'设备报警'
,
level
:
2
},
{
id
:
3
,
name
:
'张三'
,
phone
:
'13888888888'
,
email
:
'<EMAIL>'
,
branchFactory
:
'上海分公司'
,
deviceType
:
'烟感'
,
eventTime
:
'20'
,
level
:
3
}
];
const
tableData
=
ref
([]);
const
tableColumns
=
ref
([
{
...
...
@@ -1051,8 +1019,9 @@ const getWarnAndTicketConfigMap = ()=> {
}
getDataFun
(
url
,
params
).
then
(
res
=>
{
if
(
res
&&
res
.
code
===
1
)
{
const
{
ticketEventName
,
event
Type
}
=
res
.
data
;
const
{
ticketEventName
,
device
Type
}
=
res
.
data
;
basicConfiguration
.
ticketEventName
=
basicConfiguration
.
ticketEventName
.
concat
(
ticketEventName
);
basicConfiguration
.
deviceList
=
deviceType
;
}
});
};
...
...
@@ -1143,9 +1112,9 @@ const disposeType = (list)=> {
}
onMounted
(()
=>
{
//
getBranchTypeList();
//
getWarnAndTicketConfigMap();
//
searchData();
getBranchTypeList
();
getWarnAndTicketConfigMap
();
searchData
();
});
const
currentPage
=
ref
(
1
);
...
...
@@ -1176,6 +1145,9 @@ const handlePaginationChange = (pagination) => {
color
:
#fff
;
text-align
:
center
;
}
.table-box
{
height
:
calc
(
100vh
-
200px
);
}
.yellow
{
// color: #faa508;
position
:
relative
;
...
...
@@ -1186,9 +1158,8 @@ const handlePaginationChange = (pagination) => {
border-radius
:
50%
;
background
:
#ffb224
;
position
:
absolute
;
left
:
50%
;
top
:
50%
;
transform
:
translate
(
-50%
);
left
:
0
;
top
:
6px
;
}
}
.red
{
...
...
@@ -1200,9 +1171,8 @@ const handlePaginationChange = (pagination) => {
border-radius
:
50%
;
background
:
#db001d
;
position
:
absolute
;
left
:
50%
;
top
:
50%
;
transform
:
translate
(
-50%
);
left
:
0
;
top
:
6px
;
}
}
...
...
@@ -1215,9 +1185,8 @@ const handlePaginationChange = (pagination) => {
border-radius
:
50%
;
background
:
#aa05fa
;
position
:
absolute
;
left
:
50%
;
top
:
50%
;
transform
:
translate
(
-50%
);
left
:
0
;
top
:
6px
;
}
}
.view-btn
{
...
...
src/views/dustMonitoring/components/warn.vue
0 → 100644
View file @
8bfae5f3
<
template
>
<div
class=
"title layout1"
>
<span>
告警:
</span>
<span
class=
"jump-icon"
>
>>
</span>
</div>
<div
class=
"content"
>
<div
class=
"item"
v-for=
"item in listInfo"
:key=
"item.id"
>
{{
item
.
info
}}
</div>
</div>
</
template
>
<
script
setup
>
const
props
=
defineProps
({
listInfo
:
{
type
:
Array
,
default
:
()
=>
[],
},
});
</
script
>
<
style
scoped
lang=
"scss"
>
.title
{
height
:
20px
;
.jump-icon
{
font-weight
:
bold
;
color
:
#018796
;
}
}
.content
{
width
:
100%
;
height
:
calc
(
15vh
-
30px
);
padding
:
10px
0px
10px
30px
;
box-sizing
:
border-box
;
overflow-y
:
auto
;
.item
{
width
:
100%
;
}
}
.
content
:
:-
webkit-scrollbar
{
width
:
2px
;
background-color
:
rgba
(
13
,
15
,
18
,
0
.1
);
}
.layout1
{
display
:
flex
;
align-items
:
center
;
justify-content
:
space-between
;
}
</
style
>
\ No newline at end of file
src/views/dustMonitoring/index.vue
View file @
8bfae5f3
<
template
>
<div
class=
"top-box"
>
<el-form
:model=
"form"
label-width=
"auto"
:inline=
"true"
class=
"demo-form-inline"
>
<el-form-item
label=
"除尘器名称"
>
<el-select
v-model=
"form.dustName"
placeholder=
"请选择除尘器"
style=
"width: 240px"
>
</el-select>
</el-form-item>
<el-form-item
label=
"分析时间"
>
<el-date-picker
v-model=
"form.dateValue"
type=
"datetimerange"
start-placeholder=
"开始日期"
end-placeholder=
"结束日期"
format=
"YYYY-MM-DD HH:mm:ss"
date-format=
"YYYY/MM/DD ddd"
time-format=
"A hh:mm:ss"
/>
</el-form-item>
</el-form>
</div>
<div
class=
"layout1"
>
<div
class=
"left-box"
>
<div
class=
"part1"
>
<div
class=
"chart-box"
v-for=
"(item, index) in chartData"
:key=
"item"
>
<div
:id=
"'chart' + index"
class=
"chart-item"
></div>
</div>
</div>
<div
class=
"warn-info"
></div>
<div
class=
"dust-box"
>
<div
class=
"top-box"
>
<el-form
:model=
"form"
label-width=
"auto"
:inline=
"true"
class=
"demo-form-inline"
>
<el-form-item
label=
"除尘器名称"
>
<el-select
v-model=
"form.dusterNo"
placeholder=
"请选择除尘器"
style=
"width: 240px"
>
<el-option
v-for=
"item in dusterList"
:key=
"item.dusterNo"
:label=
"item.dusterName"
:value=
"item.dusterNo"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label=
"分析时间"
>
<el-date-picker
v-model=
"form.dateValue"
type=
"datetimerange"
start-placeholder=
"开始日期"
end-placeholder=
"结束日期"
format=
"YYYY-MM-DD HH:mm:ss"
date-format=
"YYYY/MM/DD ddd"
time-format=
"A hh:mm:ss"
/>
</el-form-item>
</el-form>
</div>
<div
class=
"right-box"
>
<div
class=
"part1"
></div>
<div
class=
"part2"
>
<div
class=
"dust-title"
>
2号窑尾除尘器
</div>
<div
class=
"dust-info"
>
<div
class=
"info-item"
v-for=
"item in dustInfo"
:key=
"item.label"
>
<span
class=
"lable"
>
{{
item
.
label
}}
</span>
<span
class=
"value"
>
{{
item
.
value
}}
</span>
<span
class=
"unit"
>
{{
item
.
unit
}}
</span>
<div
class=
"layout1"
>
<div
class=
"left-box"
>
<div
class=
"part1"
>
<div
class=
"chart-box"
v-for=
"(item, index) in chartData"
:key=
"item"
>
<div
:id=
"'chart' + index"
class=
"chart-item"
></div>
</div>
</div>
<div
class=
"indicator-box"
>
<div
class=
"indicator-item"
id=
"indicatorOne"
></div>
<div
class=
"indicator-item"
id=
"indicatorTwo"
></div>
<div
class=
"warn-info"
>
<warnCom
:listInfo=
"testList"
></warnCom>
</div>
<div
class=
"position-info"
>
<div
class=
"left"
>
<div
class=
"part"
>
<div
class=
"point warn"
v-for=
"item in 6"
:key=
"item"
></div>
</div>
<div
class=
"right-box"
>
<div
class=
"part1"
></div>
<div
class=
"part2"
>
<div
class=
"dust-title"
>
2号窑尾除尘器
</div>
<div
class=
"dust-info"
>
<div
class=
"info-item"
v-for=
"item in dustInfo"
:key=
"item.label"
>
<span
class=
"lable"
>
{{
item
.
label
}}
</span>
<span
class=
"value"
>
{{
item
.
value
}}
</span>
<span
class=
"unit"
>
{{
item
.
unit
}}
</span>
</div>
<div
class=
"part"
>
<div
class=
"point warn"
v-for=
"item in 6"
:key=
"item"
></div>
</div>
<div
class=
"indicator-box"
>
<div
class=
"indicator-item"
id=
"indicatorOne"
></div>
<div
class=
"indicator-item"
id=
"indicatorTwo"
></div>
</div>
<div
class=
"position-info"
>
<div
class=
"left"
>
<div
class=
"part"
>
<div
class=
"point warn"
v-for=
"item in 6"
:key=
"item"
></div>
</div>
<div
class=
"part"
>
<div
class=
"point warn"
v-for=
"item in 6"
:key=
"item"
></div>
</div>
</div>
<div
class=
"right"
>
<div
class=
"part"
>
<div
class=
"point warn"
v-for=
"item in 6"
:key=
"item"
></div>
</div>
<div
class=
"part"
>
<div
class=
"point warn"
v-for=
"item in 6"
:key=
"item"
></div>
</div>
</div>
</div>
<div
class=
"right"
>
<div
class=
"part"
>
<div
class=
"point warn"
v-for=
"item in 6"
:key=
"item"
></div>
<div
class=
"other-info"
>
<div>
<span>
反吹仓室:
</span>
<span>
3#仓-1排
</span>
</div>
<div
class=
"part"
>
<div
class=
"point warn"
v-for=
"item in 6"
:key=
"item"
></div>
<div>
<span>
泄露仓室:
</span>
<span>
5#仓、10#仓、13#仓
</span>
</div>
<div>
<span>
故障仓室:
</span>
<span>
5#仓、10#仓、13#仓
</span>
</div>
</div>
</div>
<div
class=
"other-info"
>
<div>
<span>
反吹仓室:
</span>
<span>
3#仓-1排
</span>
</div>
<div>
<span>
泄露仓室:
</span>
<span>
5#仓、10#仓、13#仓
</span>
</div>
<div>
<span>
故障仓室:
</span>
<span>
5#仓、10#仓、13#仓
</span>
</div>
<div
class=
"warn-info"
>
<warnCom
:listInfo=
"testList"
></warnCom>
</div>
</div>
<div
class=
"warn-info"
></div>
</div>
</div>
</
template
>
<
script
setup
>
import
{
ref
,
reactive
,
onMounted
}
from
"vue"
;
import
{
ref
,
reactive
,
onMounted
,
watch
}
from
"vue"
;
import
*
as
echarts
from
"echarts"
;
import
{
getDataFun
}
from
"@/request/method.js"
;
import
{
useUsersStore
}
from
"@/pinia/user.js"
;
import
moment
from
"moment"
;
import
warnCom
from
"./components/warn.vue"
;
const
userStore
=
useUsersStore
();
const
form
=
reactive
({
dustName
:
""
,
dateValue
:
[],
dusterNo
:
""
,
dateValue
:
[
new
Date
(
new
Date
().
getTime
()
-
24
*
60
*
60
*
1000
*
7
),
new
Date
(),
],
});
const
option
=
{
xAxis
:
{
...
...
@@ -125,12 +145,29 @@ const initChart = () => {
});
};
const
dustInfo
=
reactive
([
{
label
:
"压差"
,
value
:
"0.0"
,
unit
:
"KPa"
},
{
label
:
"粉尘浓度"
,
value
:
"0.0"
,
unit
:
"mg/m3"
},
{
label
:
"电磁阀数量"
,
value
:
"0.0"
,
unit
:
"KPa"
},
{
label
:
"仓室数量"
,
value
:
"0.0"
,
unit
:
"KPa"
},
{
label
:
"布袋检测仪数量"
,
value
:
"0.0"
,
unit
:
"KPa"
},
{
label
:
"脉冲检测仪数量"
,
value
:
"0.0"
,
unit
:
"KPa"
},
{
label
:
"压差"
,
value
:
"0.0"
,
unit
:
""
,
key
:
"pressureDiff"
,
unitKey
:
"pressureDiffUnit"
,
},
{
label
:
"粉尘浓度"
,
value
:
"0.0"
,
unit
:
""
,
key
:
"dustConcentration"
,
unitKey
:
"dustConcentrationUnit"
,
},
{
label
:
"电磁阀数量"
,
value
:
"0.0"
,
unit
:
""
,
key
:
"valveNum"
},
{
label
:
"仓室数量"
,
value
:
"0.0"
,
unit
:
""
,
key
:
"compartNum"
},
{
label
:
"布袋检测仪数量"
,
value
:
"0.0"
,
unit
:
""
,
key
:
"bagDetectorNum"
},
{
label
:
"脉冲检测仪数量"
,
value
:
"0.0"
,
unit
:
""
,
key
:
"pulseDetectorNum"
,
},
]);
const
option2
=
{
series
:
[
...
...
@@ -214,25 +251,165 @@ const indicatorFun = (target, domId, option) => {
target
.
value
=
echarts
.
init
(
document
.
getElementById
(
domId
));
target
.
value
.
setOption
(
option
);
};
const
dusterList
=
ref
([]);
// 获取除尘器名称
const
getDusterNameEnum
=
()
=>
{
const
url
=
"/bag/cycle/getDusterList"
;
getDataFun
(
url
,
{})
.
then
((
res
)
=>
{
// dusterList.value = (res && res.data) || [];
dusterList
.
value
=
[
{
dusterNo
:
"wp001"
,
dusterName
:
"雾炮001"
,
},
];
// 判断除尘器名称是否有值
form
.
dusterNo
=
dusterList
.
value
[
0
].
dusterNo
;
})
.
catch
(()
=>
{
dusterList
.
value
=
[];
});
};
// 获取健康度指数
const
getHealthIndex
=
()
=>
{
if
(
!
form
.
dusterNo
)
{
return
;
}
const
url
=
"/dusterStatusMonitor/healthIndexCurve"
;
const
params
=
{
customerId
:
userStore
.
customerId
,
deviceNo
:
form
.
dusterNo
,
startTime
:
moment
(
form
.
dateValue
[
0
]).
format
(
"YYYY-MM-DD HH:mm:ss"
),
endTime
:
moment
(
form
.
dateValue
[
1
]).
format
(
"YYYY-MM-DD HH:mm:ss"
),
};
getDataFun
(
url
,
params
).
then
((
res
)
=>
{
if
(
res
&&
res
.
data
)
{
}
});
};
// 获取压力差
// 获取能耗
// 获取除尘器详情
const
getDustDetail
=
()
=>
{
if
(
!
form
.
dusterNo
)
{
return
;
}
const
url
=
"/dusterStatusMonitor/dusterDetail"
;
const
params
=
{
customerId
:
userStore
.
customerId
,
deviceNo
:
form
.
dusterNo
,
startTime
:
moment
(
form
.
dateValue
[
0
]).
format
(
"YYYY-MM-DD HH:mm:ss"
),
endTime
:
moment
(
form
.
dateValue
[
1
]).
format
(
"YYYY-MM-DD HH:mm:ss"
),
};
getDataFun
(
url
,
params
)
.
then
((
res
)
=>
{
if
(
res
&&
res
.
data
)
{
for
(
let
i
=
0
;
i
<
dustInfo
.
length
;
i
++
)
{
dustInfo
[
i
].
value
=
res
.
data
[
dustInfo
[
i
].
key
]
||
0
;
dustInfo
[
i
].
unit
=
"个"
;
(
dustInfo
[
i
].
unitKey
&&
(
dustInfo
[
i
].
unit
=
res
.
data
[
dustInfo
[
i
].
unitKey
]))
||
"个"
;
}
}
else
{
dustInfo
.
forEach
((
item
)
=>
{
item
.
value
=
0
;
});
}
})
.
catch
(()
=>
{
dustInfo
.
forEach
((
item
)
=>
{
item
.
value
=
0
;
});
});
};
const
testList
=
reactive
([
{
id
:
1
,
info
:
"测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1"
,
},
{
id
:
2
,
info
:
"测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1"
,
},
{
id
:
3
,
info
:
"测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1"
,
},
{
id
:
4
,
info
:
"测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1"
,
},
{
id
:
5
,
info
:
"测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1"
,
},
]);
const
closedLoopInfoList
=
reactive
([]);
const
warnInfoList
=
reactive
([]);
// 获取告警信息
const
getAlarmInfo
=
()
=>
{
if
(
!
form
.
dusterNo
)
{
return
;
}
const
url
=
"/dusterStatusMonitor/warnAndClosedLoopInfo"
;
const
params
=
{
customerId
:
userStore
.
customerId
,
deviceNo
:
form
.
dusterNo
,
startTime
:
moment
(
form
.
dateValue
[
0
]).
format
(
"YYYY-MM-DD HH:mm:ss"
),
endTime
:
moment
(
form
.
dateValue
[
1
]).
format
(
"YYYY-MM-DD HH:mm:ss"
),
};
getDataFun
(
url
,
params
)
.
then
((
res
)
=>
{
closedLoopInfoList
=
(
res
&&
res
.
data
&&
res
.
data
.
closedLoopInfoList
)
||
[];
warnInfoList
=
(
res
&&
res
.
data
&&
res
.
data
.
warnInfoList
)
||
[];
})
.
catch
(()
=>
{
closedLoopInfoList
=
[];
warnInfoList
=
[];
});
};
onMounted
(()
=>
{
getDusterNameEnum
();
initChart
();
indicatorFun
(
indicatorOneInstance
,
"indicatorOne"
,
option2
);
indicatorFun
(
indicatorTwoInstance
,
"indicatorTwo"
,
option2
);
});
watch
(
()
=>
form
.
dusterNo
,
()
=>
{
getHealthIndex
();
getDustDetail
();
getAlarmInfo
();
}
);
</
script
>
<
style
lang=
"scss"
scoped
>
$borderColor
:
#bbbdc3
;
.dust-box
{
width
:
100%
;
height
:
calc
(
100%
-
14px
);
background
:
#fff
;
box-sizing
:
border-box
;
background
:
#ffffff
;
border-radius
:
6px
;
box-shadow
:
0px
3px
6px
0px
rgba
(
13
,
15
,
18
,
0
.1
);
padding
:
1rem
;
overflow
:
hidden
;
}
.top-box
{
}
.left-box
{
width
:
45%
;
.part1
{
border-radius
:
15px
;
background-color
:
#fff
;
border-radius
:
6px
;
border
:
1px
solid
rgba
(
13
,
15
,
18
,
0
.1
);
box-shadow
:
0px
3px
6px
0px
rgba
(
13
,
15
,
18
,
0
.1
);
width
:
100%
;
height
:
100%
;
height
:
70
vh
;
height
:
67
vh
;
.chart-box
{
width
:
100%
;
height
:
31%
;
...
...
@@ -248,15 +425,17 @@ $borderColor: #bbbdc3;
.part1
{
width
:
100%
;
height
:
10vh
;
border-radius
:
15px
;
background-color
:
#fff
;
border-radius
:
6px
;
border
:
1px
solid
rgba
(
13
,
15
,
18
,
0
.1
);
box-shadow
:
0px
3px
6px
0px
rgba
(
13
,
15
,
18
,
0
.1
);
}
.part2
{
margin-top
:
20px
;
width
:
100%
;
height
:
calc
(
60vh
-
20px
);
border-radius
:
15px
;
background-color
:
#fff
;
height
:
calc
(
57vh
-
20px
);
border-radius
:
6px
;
border
:
1px
solid
rgba
(
13
,
15
,
18
,
0
.1
);
box-shadow
:
0px
3px
6px
0px
rgba
(
13
,
15
,
18
,
0
.1
);
overflow
:
hidden
;
overflow-y
:
auto
;
padding
:
20px
0
;
...
...
@@ -307,7 +486,8 @@ $borderColor: #bbbdc3;
width
:
48%
;
flex-wrap
:
wrap
;
// box-shadow: 0 9px 20px 0 rgba(164, 162, 171, 0.842);
box-shadow
:
color
(
srgb
0
.360784
0
.788235
0
.654902
/
0
.5
)
0px
0px
20px
0px
;
box-shadow
:
color
(
srgb
0
.360784
0
.788235
0
.654902
/
0
.5
)
0px
0px
20px
0px
;
// box-shadow: 0px 0px 10px 0px rgba(164, 162, 171, 0.842);
}
.part
{
...
...
@@ -339,12 +519,18 @@ $borderColor: #bbbdc3;
border-top
:
1px
solid
$borderColor
;
}
}
.
part2
:
:-
webkit-scrollbar
{
width
:
2px
;
background-color
:
rgba
(
13
,
15
,
18
,
0
.1
);
}
}
.warn-info
{
margin-top
:
10px
;
height
:
15vh
;
border-radius
:
15px
;
background-color
:
#fff
;
border-radius
:
6px
;
border
:
1px
solid
rgba
(
13
,
15
,
18
,
0
.1
);
box-shadow
:
0px
3px
6px
0px
rgba
(
13
,
15
,
18
,
0
.1
);
padding
:
10px
30px
;
}
.layout1
{
display
:
flex
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment