Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gassafety-progress
Project
Project
Details
Activity
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
耿迪迪
gassafety-progress
Commits
e51726dc
Commit
e51726dc
authored
2 years ago
by
纪泽龙
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
过滤功能样式修改完毕
parent
75d92c01
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
829 additions
and
185 deletions
+829
-185
iconfont.css
...progress-web/src/assets/iconfont/monitorData/iconfont.css
+9
-5
Cg.vue
...s/operationMonitor/monitorData/component/charsData/Cg.vue
+18
-27
CzCard.vue
...erationMonitor/monitorData/component/charsData/CzCard.vue
+10
-37
FilterVue.vue
...tionMonitor/monitorData/component/charsData/FilterVue.vue
+132
-0
FilterVue2.vue
...ionMonitor/monitorData/component/charsData/FilterVue2.vue
+165
-0
Fmj.vue
.../operationMonitor/monitorData/component/charsData/Fmj.vue
+243
-54
MyCollapse.vue
...ionMonitor/monitorData/component/charsData/MyCollapse.vue
+9
-7
Tyx.vue
.../operationMonitor/monitorData/component/charsData/Tyx.vue
+243
-55
No files found.
gassafetyprogress-web/src/assets/iconfont/monitorData/iconfont.css
View file @
e51726dc
@font-face
{
font-family
:
"iconfont"
;
/* Project id 3276749 */
src
:
url('//at.alicdn.com/t/font_3276749_
mh99rhny3b.woff2?t=1648459448822
')
format
(
'woff2'
),
url('//at.alicdn.com/t/font_3276749_
mh99rhny3b.woff?t=1648459448822
')
format
(
'woff'
),
url('//at.alicdn.com/t/font_3276749_
mh99rhny3b.ttf?t=1648459448822
')
format
(
'truetype'
);
src
:
url('//at.alicdn.com/t/font_3276749_
riyy29xphqo.woff2?t=1648520277704
')
format
(
'woff2'
),
url('//at.alicdn.com/t/font_3276749_
riyy29xphqo.woff?t=1648520277704
')
format
(
'woff'
),
url('//at.alicdn.com/t/font_3276749_
riyy29xphqo.ttf?t=1648520277704
')
format
(
'truetype'
);
}
.iconfont
{
...
...
@@ -13,8 +13,12 @@
-moz-osx-font-smoothing
:
grayscale
;
}
.icon-guanbi
:before
{
content
:
"\e661"
;
.icon-bingo
:before
{
content
:
"\e625"
;
}
.icon-x
:before
{
content
:
"\e600"
;
}
.icon-jt
:before
{
...
...
This diff is collapsed.
Click to expand it.
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Cg.vue
View file @
e51726dc
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-2
8 18:05:38
* @LastEditTime: 2022-03-2
9 11:11:54
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
...
...
@@ -15,7 +15,11 @@
:listNum=
"czList.filter((item) => item.show).length"
>
<template
v-slot:chackbox
>
<div
<FilterVue2
:filterList=
"filterList"
@
fliterTypeChange=
"fliterTypeChange"
/>
<!--
<div
class=
"filter"
:class=
"`one-$
{item.state}`"
v-for="item in filterList"
...
...
@@ -28,7 +32,7 @@
>
{{
item
.
value
}}
</span
>
<span
class=
"number"
>
(
{{
item
.
count
}}
)
</span>
</div>
</div>
-->
</
template
>
<
template
#
container
>
<div
class=
"container flex"
>
...
...
@@ -94,11 +98,13 @@
<
script
>
import
MyCollapse
from
"./MyCollapse"
;
import
CzItem
from
"./CzItem"
;
import
FilterVue2
from
"./FilterVue2"
;
// 场罐
export
default
{
components
:
{
MyCollapse
,
CzItem
,
FilterVue2
,
},
data
()
{
return
{
...
...
@@ -106,6 +112,7 @@ export default {
visible
:
true
,
addStartNum
:
3
,
filterList
:
[
{
value
:
"全部"
,
count
:
100
,
state
:
"all"
},
{
value
:
"正常"
,
count
:
100
,
state
:
1
},
{
value
:
"报警"
,
count
:
100
,
state
:
2
},
{
value
:
"离线"
,
count
:
100
,
state
:
3
},
...
...
@@ -293,14 +300,14 @@ export default {
},
//过滤选择
fliterTypeChange
(
data
)
{
const
{
state
}
=
data
;
const
index
=
this
.
deviceTypeArr
.
indexOf
(
state
);
if
(
index
>=
0
)
{
this
.
deviceTypeArr
.
splice
(
index
,
1
);
}
else
{
this
.
deviceTypeArr
.
push
(
state
);
}
this
.
filter
(
this
.
deviceTypeArr
);
//
const { state } = data;
//
const index = this.deviceTypeArr.indexOf(state);
//
if (index >= 0) {
//
this.deviceTypeArr.splice(index, 1);
//
} else {
//
this.deviceTypeArr.push(state);
//
}
this
.
filter
(
[...
data
]
);
},
// 过滤对象
filter
(
arr
)
{
...
...
@@ -341,7 +348,6 @@ $active: #06d7b1 !important;
top
:
50%
;
margin-top
:
-3px
;
}
&
.active
{
color
:
$active
;
}
...
...
@@ -359,33 +365,18 @@ $active: #06d7b1 !important;
.text
{
color
:
$one
;
}
.text
{
&
:before
{
background-color
:
$one
;
}
}
}
&
.one-2
{
.number
,
.text
{
color
:
$two
;
}
.text
{
&
:before
{
background-color
:
$two
;
}
}
}
&
.one-3
{
.number
,
.text
{
color
:
$three
;
}
.text
{
&
:before
{
background-color
:
$three
;
}
}
}
}
.container
{
...
...
This diff is collapsed.
Click to expand it.
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
View file @
e51726dc
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-2
8 18:04:53
* @LastEditTime: 2022-03-2
9 10:09:52
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
...
...
@@ -15,15 +15,10 @@
:listNum=
"czList.filter((item) => item.show).length"
>
<template
v-slot:chackbox
>
<div
class=
"filter"
v-for=
"item in filterList"
:key=
"item.value"
>
<span
class=
"text"
:class=
"
{ active: deviceTypeArr.indexOf(item.type) >= 0 }"
@click="fliterTypeChange(item)"
>
{{
item
.
value
}}
</span
>
<span
class=
"number"
>
(
{{
item
.
count
}}
)
</span>
</div>
<FilterVue
:filterList=
"filterList"
@
fliterTypeChange=
"fliterTypeChange"
/>
</
template
>
<
template
#
container
>
<div
class=
"container"
:class=
"
{ start: getShowNum }">
...
...
@@ -43,18 +38,21 @@
<
script
>
import
MyCollapse
from
"./MyCollapse"
;
import
CzItem
from
"./CzItem"
;
import
FilterVue
from
"./FilterVue"
;
export
default
{
// 场站
components
:
{
MyCollapse
,
CzItem
,
FilterVue
,
},
data
()
{
return
{
carHide
:
true
,
addStartNum
:
3
,
filterList
:
[
{
value
:
"全部"
,
count
:
100
,
type
:
"all"
},
{
value
:
"加气站"
,
count
:
100
,
type
:
1
},
{
value
:
"门站"
,
count
:
100
,
type
:
2
},
{
value
:
"调压站"
,
count
:
100
,
type
:
3
},
...
...
@@ -148,7 +146,6 @@ export default {
type
:
4
,
},
],
};
},
computed
:
{
...
...
@@ -185,14 +182,7 @@ export default {
},
//过滤选择
fliterTypeChange
(
data
)
{
const
{
type
}
=
data
;
const
index
=
this
.
deviceTypeArr
.
indexOf
(
type
);
if
(
index
>=
0
)
{
this
.
deviceTypeArr
.
splice
(
index
,
1
);
}
else
{
this
.
deviceTypeArr
.
push
(
type
);
}
this
.
filter
(
this
.
deviceTypeArr
);
this
.
filter
([...
data
]);
// 改变大小,因为动画原因加个延迟
// this.$nextTick(() => {
// setTimeout(()=>{
...
...
@@ -219,24 +209,7 @@ export default {
</
script
>
<
style
lang=
"scss"
scoped
>
.filter
{
margin-right
:
12px
;
margin-top
:
5px
;
font-size
:
14px
;
.text
{
cursor
:
pointer
;
&
:hover
{
color
:
#06d7b1
89
!
important
;
}
&
.active
{
color
:
#06d7b1
;
}
}
.number
{
font-weight
:
500
;
color
:
#1890ff
;
}
}
.container
{
width
:
100%
;
flex-wrap
:
wrap
;
...
...
This diff is collapsed.
Click to expand it.
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/FilterVue.vue
0 → 100644
View file @
e51726dc
<!--
* @Author: your name
* @Date: 2022-03-29 09:41:23
* @LastEditTime: 2022-03-29 11:08:25
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Filter.vue
-->
<
template
>
<div
class=
"fliter-vue"
>
<div
class=
"filter"
v-for=
"(item, index) in filterList"
:key=
"item.value"
>
<!-- 全部 -->
<template
v-if=
"index == 0"
>
<span
class=
"text"
:class=
"
{
active: deviceTypeArr.length == filterList.length - 1
}"
@click="fliterTypeChange(item)"
>
{{
item
.
value
}}
<i
class=
"iconfont icon-bingo"
></i>
</span>
<span
class=
"number"
>
(
{{
item
.
count
}}
)
</span>
</
template
>
<
template
v-else
>
<span
class=
"text"
:class=
"
{ active: deviceTypeArr.indexOf(item.type) >= 0 }"
@click="fliterTypeChange(item)"
>
{{
item
.
value
}}
<i
class=
"iconfont icon-bingo"
></i>
</span>
<span
class=
"number"
>
(
{{
item
.
count
}}
)
</span>
</
template
>
</div>
</div>
</template>
<
script
>
export
default
{
data
()
{
return
{
deviceTypeArr
:
[],
allArray
:
[],
};
},
props
:
{
// 传进来的参数
filterList
:
Array
,
},
created
()
{
this
.
deviceTypeArr
=
this
.
filterList
.
filter
((
item
)
=>
item
.
type
>
0
)
.
map
((
item
)
=>
item
.
type
);
// 全选时的数组内容
this
.
allArray
=
[...
this
.
deviceTypeArr
];
},
methods
:
{
fliterTypeChange
(
data
)
{
const
{
type
}
=
data
;
// 如果点的是全选
if
(
type
==
"all"
)
{
if
(
this
.
deviceTypeArr
.
length
==
this
.
filterList
.
length
-
1
)
{
this
.
deviceTypeArr
=
[];
}
else
{
this
.
deviceTypeArr
=
[...
this
.
allArray
];
}
}
else
{
const
index
=
this
.
deviceTypeArr
.
indexOf
(
type
);
if
(
index
>=
0
)
{
this
.
deviceTypeArr
.
splice
(
index
,
1
);
}
else
{
this
.
deviceTypeArr
.
push
(
type
);
}
}
this
.
$emit
(
"fliterTypeChange"
,
[...
this
.
deviceTypeArr
]);
},
},
};
</
script
>
<
style
lang=
"scss"
scoped
>
.fliter-vue
{
display
:
flex
;
}
.filter
{
margin-right
:
30px
;
margin-top
:
5px
;
font-size
:
14px
;
.text
{
cursor
:
pointer
;
position
:
relative
;
.iconfont
{
font-size
:
10px
;
position
:
absolute
;
left
:
-12px
;
top
:
0px
;
color
:
rgba
(
0
,
0
,
0
,
0
);
}
&
:before
{
content
:
""
;
position
:
absolute
;
width
:
10px
;
height
:
10px
;
border
:
1px
solid
#000000
;
left
:
-12px
;
top
:
50%
;
margin-top
:
-5px
;
}
&
:hover
{
.iconfont
{
font-size
:
10px
;
position
:
absolute
;
left
:
-12px
;
color
:
rgba
(
0
,
0
,
0
,
.5
);
}
}
&
.active
{
.iconfont
{
font-size
:
10px
;
position
:
absolute
;
left
:
-12px
;
color
:
rgba
(
0
,
0
,
0
,
1
);
}
}
}
.number
{
font-weight
:
500
;
color
:
#1890ff
;
}
}
</
style
>
\ No newline at end of file
This diff is collapsed.
Click to expand it.
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/FilterVue2.vue
0 → 100644
View file @
e51726dc
<!--
* @Author: your name
* @Date: 2022-03-29 09:41:23
* @LastEditTime: 2022-03-29 11:14:11
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Filter.vue
-->
<
template
>
<div
class=
"fliter-vue"
>
<div
class=
"filter"
v-for=
"(item, index) in filterList"
:key=
"item.value"
:class=
"`one-$
{item.state}`"
>
<!-- 全部 -->
<template
v-if=
"index == 0"
>
<span
class=
"text"
@
click=
"fliterTypeChange(item)"
:class=
"
{ active: deviceTypeArr.length == filterList.length - 1}"
>
{{
item
.
value
}}
<i
class=
"iconfont icon-bingo"
></i>
</span>
<span
class=
"number"
>
(
{{
item
.
count
}}
)
</span>
</
template
>
<
template
v-else
>
<span
class=
"text"
:class=
"
{ active: deviceTypeArr.indexOf(item.state) >= 0 }"
@click="fliterTypeChange(item)"
>
{{
item
.
value
}}
<i
class=
"iconfont icon-bingo"
></i>
</span>
<span
class=
"number"
>
(
{{
item
.
count
}}
)
</span>
</
template
>
</div>
</div>
</template>
<
script
>
export
default
{
data
()
{
return
{
deviceTypeArr
:
[],
allArray
:
[],
};
},
props
:
{
// 传进来的参数
filterList
:
Array
,
},
created
()
{
this
.
deviceTypeArr
=
this
.
filterList
.
filter
((
item
)
=>
item
.
state
>
0
)
.
map
((
item
)
=>
item
.
state
);
// 全选时的数组内容
this
.
allArray
=
[...
this
.
deviceTypeArr
];
},
methods
:
{
fliterTypeChange
(
data
)
{
const
{
state
}
=
data
;
// 如果点的是全选
if
(
state
==
"all"
)
{
if
(
this
.
deviceTypeArr
.
length
==
this
.
filterList
.
length
-
1
)
{
this
.
deviceTypeArr
=
[];
}
else
{
this
.
deviceTypeArr
=
[...
this
.
allArray
];
}
}
else
{
const
index
=
this
.
deviceTypeArr
.
indexOf
(
state
);
if
(
index
>=
0
)
{
this
.
deviceTypeArr
.
splice
(
index
,
1
);
}
else
{
this
.
deviceTypeArr
.
push
(
state
);
}
}
this
.
$emit
(
"fliterTypeChange"
,
[...
this
.
deviceTypeArr
]);
},
},
};
</
script
>
<
style
lang=
"scss"
scoped
>
$one
:
#06d7b1
!
important
;
$two
:
#ff6c68
!
important
;
$three
:
#bbbbbb
!
important
;
$all
:
#000000
;
.fliter-vue
{
display
:
flex
;
}
.filter
{
margin-right
:
30px
;
margin-top
:
5px
;
font-size
:
14px
;
.text
{
cursor
:
pointer
;
position
:
relative
;
.iconfont
{
font-size
:
10px
;
position
:
absolute
;
left
:
-12px
;
top
:
0px
;
color
:
rgba
(
0
,
0
,
0
,
0
);
}
&
:before
{
content
:
""
;
position
:
absolute
;
width
:
10px
;
height
:
10px
;
border
:
1px
solid
#000000
;
left
:
-12px
;
top
:
50%
;
margin-top
:
-5px
;
}
&
:hover
{
.iconfont
{
font-size
:
10px
;
position
:
absolute
;
left
:
-12px
;
color
:
rgba
(
0
,
0
,
0
,
.5
);
}
}
&
.active
{
.iconfont
{
font-size
:
10px
;
position
:
absolute
;
left
:
-12px
;
color
:
rgba
(
0
,
0
,
0
,
1
);
}
}
}
.number
{
font-weight
:
500
;
color
:
#1890ff
!
important
;
}
&
.one-all
{
.number
,
.text
{
color
:
$all
;
}
}
&
.one-1
{
.number
,
.text
{
color
:
$one
;
}
}
&
.one-2
{
.number
,
.text
{
color
:
$two
;
}
}
&
.one-3
{
.number
,
.text
{
color
:
$three
;
}
}
}
</
style
>
\ No newline at end of file
This diff is collapsed.
Click to expand it.
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Fmj.vue
View file @
e51726dc
This diff is collapsed.
Click to expand it.
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/MyCollapse.vue
View file @
e51726dc
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-2
8 15:03:20
* @LastEditTime: 2022-03-2
9 10:12:49
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
...
...
@@ -47,7 +47,7 @@ export default {
// 动画需求
listNum
:
{
type
:
Number
,
default
:
"1"
default
:
"1"
,
},
},
...
...
@@ -66,7 +66,8 @@ export default {
setTimeout
(
this
.
getHeight
,
200
);
// this.getHeight();
},
listNum
()
{
listNum
(
val
)
{
console
.
log
(
val
);
setTimeout
(()
=>
{
this
.
getHeight
();
},
300
);
...
...
@@ -75,16 +76,17 @@ export default {
mounted
()
{
this
.
getHeight
();
},
methods
:
{
hide
()
{
this
.
carHide
=
!
this
.
carHide
;
this
.
getHeight
();
},
getHeight
()
{
const
{
height
}
=
this
.
$refs
?.
container
?.
getBoundingClientRect
();
if
(
!
height
)
{
return
;
}
// if (!height) {
// return;
// }
// 高度必须是一个指定的值才能过渡变化,这样就计算出了整个元素的指定高度,然后赋值
if
(
height
>
0
)
{
this
.
transitionHeight
=
height
+
60
+
18
+
"px"
;
...
...
This diff is collapsed.
Click to expand it.
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Tyx.vue
View file @
e51726dc
This diff is collapsed.
Click to expand it.
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