Skip to content

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

Merge branch 'develop_jzl'

parents 0cba0013 f4da6662
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 885 additions and 56 deletions
gassafetyprogress-web/src/utils/mapClass/mapbigwindow.js 0 → 100644
View file @ e69d6246
This diff is collapsed.
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Cg.vue
View file @ e69d6246
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 17:14:12
* @LastEditTime: 2022-03-28 13:52:40
* @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
......@@ -9,7 +9,11 @@
<template>
<div class="czcard">
<my-collapse title="储罐" ref="myCollapse">
<my-collapse
title="储罐"
ref="myCollapse"
:listNum="czList.filter((item) => item.show).length"
>
<template v-slot:chackbox>
<div
class="filter"
......@@ -34,8 +38,12 @@
:key="item.deviceName"
v-show="item.show"
>
<div :title="item.companyName" class="left zzz">{{ item.companyName }}</div>
<div :class="`one-${item.state}`" class="state">{{ typeState[item.state - 1] }}</div>
<div :title="item.companyName" class="left zzz">
{{ item.companyName }}
</div>
<div :class="`one-${item.state}`" class="state">
{{ typeState[item.state - 1] }}
</div>
</div>
</div>
</template>
......@@ -126,10 +134,6 @@ export default {
this.deviceTypeArr.push(state);
}
this.filter(this.deviceTypeArr);
// 改变大小
this.$nextTick(() => {
this.$refs.myCollapse.getHeight();
});
},
// 过滤对象
filter(arr) {
......@@ -235,7 +239,7 @@ $active: #06d7b1 !important;
// margin-right: 45px;
width: 15%;
min-width: 190px;
margin-right: 1%;
margin-right: 1.5%;
.left {
margin-right: 4px;
font-size: 14px;
......@@ -257,9 +261,9 @@ $active: #06d7b1 !important;
border-radius: 2px;
background-color: #ff6c68;
}
&.one-3{
&.one-3 {
color: #fff;
border: 1px solid #AAAAAA;
border: 1px solid #aaaaaa;
border-radius: 2px;
background-color: #bbbbbb;
}
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
View file @ e69d6246
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 17:12:04
* @LastEditTime: 2022-03-28 13:43:09
* @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
......@@ -9,7 +9,11 @@
<template>
<div class="czcard">
<my-collapse title="场站" ref="myCollapse">
<my-collapse
title="场站"
ref="myCollapse"
:listNum="czList.filter((item) => item.show).length"
>
<template v-slot:chackbox>
<div class="filter" v-for="item in filterList" :key="item.value">
<span
......@@ -140,7 +144,6 @@ export default {
show: true,
type: 4,
},
],
};
},
......@@ -156,6 +159,7 @@ export default {
methods: {
hide() {
this.carHide = !this.carHide;
// this.myCollapse();
},
// 根据父子元素自动计算是否需要添加值start
changeAddStartNum() {
......@@ -185,10 +189,15 @@ export default {
this.deviceTypeArr.push(type);
}
this.filter(this.deviceTypeArr);
// 改变大小
this.$nextTick(() => {
this.$refs.myCollapse.getHeight();
});
// 改变大小,因为动画原因加个延迟
// this.$nextTick(() => {
// setTimeout(()=>{
// this.myCollapse()
// }, 300);
// });
},
myCollapse() {
// this.$refs.myCollapse.getHeight();
},
// 过滤对象
filter(arr) {
......@@ -236,7 +245,7 @@ export default {
}
& > div {
margin-bottom: 20px;
margin-left:1%;
margin-left: 1%;
width: 24%;
min-width: 295px;
}
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Fmj.vue
View file @ e69d6246
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 17:16:36
* @LastEditTime: 2022-03-28 13:52:32
* @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
......@@ -9,7 +9,11 @@
<template>
<div class="czcard">
<my-collapse title="阀门井" ref="myCollapse">
<my-collapse
title="阀门井"
ref="myCollapse"
:listNum="czList.filter((item) => item.show).length"
>
<template v-slot:chackbox>
<div
class="filter"
......@@ -34,8 +38,12 @@
:key="item.deviceName"
v-show="item.show"
>
<div :title="item.companyName" class="left zzz">{{ item.companyName }}</div>
<div :class="`one-${item.state}`" class="state">{{ typeState[item.state - 1] }}</div>
<div :title="item.companyName" class="left zzz">
{{ item.companyName }}
</div>
<div :class="`one-${item.state}`" class="state">
{{ typeState[item.state - 1] }}
</div>
</div>
</div>
</template>
......@@ -126,10 +134,6 @@ export default {
this.deviceTypeArr.push(state);
}
this.filter(this.deviceTypeArr);
// 改变大小
this.$nextTick(() => {
this.$refs.myCollapse.getHeight();
});
},
// 过滤对象
filter(arr) {
......@@ -235,7 +239,7 @@ $active: #06d7b1 !important;
// margin-right: 45px;
width: 15%;
min-width: 190px;
margin-right: 1%;
margin-right: 1.5%;
.left {
margin-right: 4px;
font-size: 14px;
......@@ -257,9 +261,9 @@ $active: #06d7b1 !important;
border-radius: 2px;
background-color: #ff6c68;
}
&.one-3{
&.one-3 {
color: #fff;
border: 1px solid #AAAAAA;
border: 1px solid #aaaaaa;
border-radius: 2px;
background-color: #bbbbbb;
}
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/MyCollapse.vue
View file @ e69d6246
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 15:33:25
* @LastEditTime: 2022-03-28 13:46: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
......@@ -16,7 +16,7 @@
>
<div class="title flex">
<div class="left">
<div class="device">{{title}}</div>
<div class="device">{{ title }}</div>
<slot name="chackbox" />
</div>
<div class="right">
......@@ -28,7 +28,11 @@
</div>
</div>
<div ref="container">
<slot name="container" />
<transition name="fade" mode="out-in">
<div :key="listNum">
<slot name="container" />
</div>
</transition>
</div>
</div>
</div>
......@@ -38,16 +42,22 @@
import { mapGetters } from "vuex";
export default {
props:{
title:String,
props: {
title: String,
// 动画需求
listNum: {
type: Number,
default:"1"
},
},
data() {
return {
carHide: true,
transitionHeight: "60px",
};
},
computed: {
...mapGetters(["sidebar"]),
},
......@@ -56,6 +66,11 @@ export default {
setTimeout(this.getHeight, 200);
// this.getHeight();
},
listNum() {
setTimeout(() => {
this.getHeight();
}, 300);
},
},
mounted() {
this.getHeight();
......@@ -67,14 +82,14 @@ export default {
},
getHeight() {
const { height } = this.$refs?.container?.getBoundingClientRect();
if(!height){
if (!height) {
return;
}
// 高度必须是一个指定的值才能过渡变化，这样就计算出了整个元素的指定高度，然后赋值
if (height > 0) {
this.transitionHeight = height + 60 + 18 + "px";
}else{
this.transitionHeight="60px";
} else {
this.transitionHeight = "60px";
}
},
},
......@@ -82,6 +97,13 @@ export default {
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
transition: all 0.25s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.card {
transition: all 0.5s;
// height: 212px;
......@@ -92,7 +114,7 @@ export default {
box-sizing: border-box;
padding: 15px 22px 18px 22px;
overflow: hidden;
margin-bottom:20px;
margin-bottom: 20px;
&.hide {
height: 60px !important;
}
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Tyx.vue
View file @ e69d6246
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 17:16:52
* @LastEditTime: 2022-03-28 13:53:04
* @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
......@@ -9,7 +9,11 @@
<template>
<div class="czcard">
<my-collapse title="调压箱" ref="myCollapse">
<my-collapse
title="调压箱"
ref="myCollapse"
:listNum="czList.filter((item) => item.show).length"
>
<template v-slot:chackbox>
<div
class="filter"
......@@ -34,8 +38,12 @@
:key="item.deviceName"
v-show="item.show"
>
<div :title="item.companyName" class="left zzz">{{ item.companyName }}</div>
<div :class="`one-${item.state}`" class="state">{{ typeState[item.state - 1] }}</div>
<div :title="item.companyName" class="left zzz">
{{ item.companyName }}
</div>
<div :class="`one-${item.state}`" class="state">
{{ typeState[item.state - 1] }}
</div>
</div>
</div>
</template>
......@@ -126,10 +134,6 @@ export default {
this.deviceTypeArr.push(state);
}
this.filter(this.deviceTypeArr);
// 改变大小
this.$nextTick(() => {
this.$refs.myCollapse.getHeight();
});
},
// 过滤对象
filter(arr) {
......@@ -235,7 +239,7 @@ $active: #06d7b1 !important;
// margin-right: 45px;
width: 15%;
min-width: 190px;
margin-right: 1%;
margin-right: 1.5%;
.left {
margin-right: 4px;
font-size: 14px;
......@@ -257,9 +261,9 @@ $active: #06d7b1 !important;
border-radius: 2px;
background-color: #ff6c68;
}
&.one-3{
&.one-3 {
color: #fff;
border: 1px solid #AAAAAA;
border: 1px solid #aaaaaa;
border-radius: 2px;
background-color: #bbbbbb;
}
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/index.vue
View file @ e69d6246
<!--
* @Author: your name
* @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-03-26 17:15:43
* @LastEditTime: 2022-03-28 13:50:56
* @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.vue
......@@ -46,6 +46,7 @@ export default {
<style lang="scss" scoped>
.chars-data {
padding: 26px 108px 0 88px;
// padding: 26px 108px 0 88px;
padding: 20px;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
View file @ e69d6246
<!--
* @Author: your name
* @Date: 2022-03-08 17:28:57
* @LastEditTime: 2022-03-25 15:27:44
* @LastEditTime: 2022-03-28 13:54:22
* @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/index.vue
......@@ -16,7 +16,11 @@
@click="isComChange(index)"
></div>
</div>
<component :is="currentTabComponent"></component>
<transition name="fade-transform" mode="out-in">
<keep-alive>
<component :is="currentTabComponent"></component>
</keep-alive>
</transition>
</div>
</template>
......@@ -28,7 +32,7 @@ export default {
return {
// currentTabComponent: tabledata,
changeIcon: [{ class: "icon-b" }, { class: "icon-a" }],
isCom: 1,
isCom: 0,
};
},
computed: {
......
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