Skip to content

G
gassafety-progress
Commit e51726dc authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

过滤功能样式修改完毕

parent 75d92c01
Expand all Show whitespace changes
Inline Side-by-side
Showing with 829 additions and 185 deletions
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 {
......
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-28 18:05:38
* @LastEditTime: 2022-03-29 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 {
......
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-28 18:04:53
* @LastEditTime: 2022-03-29 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: #06d7b189 !important;
}
&.active {
color: #06d7b1;
}
}
.number {
font-weight: 500;
color: #1890ff;
}
}
.container {
width: 100%;
flex-wrap: wrap;
......
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
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
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-28 15:03:20
* @LastEditTime: 2022-03-29 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";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment