Skip to content

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

Merge branch 'develop_jzl'

parents d207f351 10e79459
Hide whitespace changes
Inline Side-by-side
Showing with 1805 additions and 196 deletions
gassafetyprogress-web/src/assets/iconfont/monitorData/iconfont.css 0 → 100644
View file @ a9c08737
@font-face {
font-family: "iconfont"; /* Project id 3276749 */
src: url('iconfont.woff2?t=1648286292510') format('woff2'),
url('iconfont.woff?t=1648286292510') format('woff'),
url('iconfont.ttf?t=1648286292510') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-jt:before {
content: "\e8f1";
}
.icon-tcq:before {
content: "\e622";
}
.icon-ylb:before {
content: "\e623";
}
.icon-llj:before {
content: "\e624";
}
.icon-a:before {
content: "\e61e";
}
.icon-b:before {
content: "\e61f";
}
gassafetyprogress-web/src/assets/styles/all.scss
View file @ a9c08737
......@@ -675,3 +675,9 @@
.amap-copyright {
opacity:0;
}
.zzz {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Cg.vue 0 → 100644
View file @ a9c08737
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 17:14:12
* @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
-->
<template>
<div class="czcard">
<my-collapse title="储罐" ref="myCollapse">
<template v-slot:chackbox>
<div
class="filter"
:class="`one-${item.state}`"
v-for="item in filterList"
:key="item.value"
>
<span
class="text"
:class="{ active: deviceTypeArr.indexOf(item.state) >= 0 }"
@click="fliterTypeChange(item)"
>{{ item.value }}</span
>
<span class="number">({{ item.count }})</span>
</div>
</template>
<template #container>
<div class="container flex">
<div
class="com"
v-for="item in czList"
: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>
</div>
</template>
</my-collapse>
</div>
</template>
<script>
import MyCollapse from "./MyCollapse";
import CzItem from "./CzItem";
export default {
components: {
MyCollapse,
CzItem,
},
data() {
return {
carHide: true,
addStartNum: 3,
filterList: [
{ value: "正常", count: 100, state: 1 },
{ value: "报警", count: 100, state: 2 },
{ value: "离线", count: 100, state: 3 },
],
typeState: ["正常", "报警", "离线"],
deviceTypeArr: [1, 2, 3],
czList: [
{ companyName: "河北泽宏股份储罐", state: 1, show: true },
{ companyName: "河北泽宏股份储罐", state: 2, show: true },
{ companyName: "河北泽宏股份储罐", state: 3, show: true },
{ companyName: "河北泽宏股份储罐", state: 1, show: true },
{ companyName: "河北泽宏股份储罐", state: 2, show: true },
{ companyName: "河北泽宏股份储罐", state: 3, show: true },
{ companyName: "河北泽宏股份储罐", state: 1, show: true },
{ companyName: "河北泽宏股份储罐", state: 2, show: true },
{ companyName: "河北泽宏股份储罐", state: 3, show: true },
{ companyName: "河北泽宏股份储罐", state: 1, show: true },
{ companyName: "河北泽宏股份储罐", state: 2, show: true },
{ companyName: "河北泽宏股份储罐", state: 3, show: true },
{ companyName: "河北泽宏股份储罐", state: 1, show: true },
{ companyName: "河北泽宏股份储罐", state: 2, show: true },
{ companyName: "河北泽宏股份储罐", state: 3, show: true },
{ companyName: "河北泽宏股份储罐", state: 1, show: true },
{ companyName: "河北泽宏股份储罐", state: 2, show: true },
{ companyName: "河北泽宏股份储罐", state: 3, show: true },
],
};
},
computed: {
// 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
getShowNum() {
return this.czList.filter((item) => item.show).length < this.addStartNum;
},
},
mounted() {
// this.changeAddStartNum();
},
methods: {
hide() {
this.carHide = !this.carHide;
},
// 根据父子元素自动计算是否需要添加值start
changeAddStartNum() {
const czItem = this.$refs.czItem;
let czItemWidth;
// 组件有可能是一个数组，所以要这样判断
if (Array.isArray(czItem)) {
const { width } = czItem[0].$el.getBoundingClientRect();
czItemWidth = width;
} else {
const { width } = czItem.$el.getBoundingClientRect();
czItemWidth = width;
}
// 取出collap的宽
const { width: CollapseWidth } =
this.$refs.myCollapse.$el.getBoundingClientRect();
// 得到最小的承载数量
this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
},
//过滤选择
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);
// 改变大小
this.$nextTick(() => {
this.$refs.myCollapse.getHeight();
});
},
// 过滤对象
filter(arr) {
this.czList.forEach((item) => {
const { state } = item;
if (arr.includes(state)) {
item.show = true;
} else {
item.show = false;
}
});
},
},
};
</script>
<style lang="scss" scoped>
$one: #666666;
$two: #ff6c68;
$three: #bbbbbb;
$active: #06d7b1 !important;
.filter {
margin-right: 22px;
margin-top: 5px;
font-size: 14px;
.text {
position: relative;
cursor: pointer;
&::before {
content: "";
position: absolute;
border-radius: 50%;
width: 6px;
height: 6px;
left: -10px;
top: 50%;
margin-top: -3px;
}
&.active {
color: $active;
}
&:hover {
color: #06d7b189 !important;
}
}
.number {
font-weight: 500;
}
&.one-1 {
.number,
.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 {
width: 100%;
flex-wrap: wrap;
margin-left: 35px;
&.start {
justify-content: flex-start;
& > div {
// margin-right: 50px;
}
}
& > div {
margin-bottom: 20px;
display: flex;
justify-content: flex-start;
// margin-right: 45px;
width: 15%;
min-width: 190px;
margin-right: 1%;
.left {
margin-right: 4px;
font-size: 14px;
max-width: 112px;
}
.state {
font-size: 8px;
padding: 0px 4px;
box-sizing: border-box;
&.one-1 {
color: #fff;
border: 1px solid #6fffe5;
border-radius: 2px;
background-color: #06d7b1;
}
&.one-2 {
color: #fff;
border: 1px solid #ff9c99;
border-radius: 2px;
background-color: #ff6c68;
}
&.one-3{
color: #fff;
border: 1px solid #AAAAAA;
border-radius: 2px;
background-color: #bbbbbb;
}
}
}
}
.flex {
display: flex;
justify-content: flex-start;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue 0 → 100644
View file @ a9c08737
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 17:12: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
-->
<template>
<div class="czcard">
<my-collapse title="场站" ref="myCollapse">
<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>
</template>
<template #container>
<div class="container" :class="{ start: getShowNum }">
<div v-for="item in czList" :key="item.deviceName" v-show="item.show">
<CzItem ref="czItem" :list="item" v-if="item.show" />
</div>
</div>
</template>
</my-collapse>
</div>
</template>
<script>
import MyCollapse from "./MyCollapse";
import CzItem from "./CzItem";
export default {
components: {
MyCollapse,
CzItem,
},
data() {
return {
carHide: true,
addStartNum: 3,
filterList: [
{ value: "加气站", count: 100, type: 1 },
{ value: "加气站1", count: 100, type: 2 },
{ value: "加气站2", count: 100, type: 3 },
{ value: "加气站3", count: 100, type: 4 },
{ value: "加气站4", count: 100, type: 5 },
{ value: "加气站5", count: 100, type: 6 },
{ value: "加气站7", count: 100, type: 7 },
],
deviceTypeArr: [1, 2, 3, 4, 5, 6, 7],
czList: [
{
deviceName: "加气站a",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
type: 1,
},
{
deviceName: "加气站b",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
type: 2,
},
{
deviceName: "加气站c",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
type: 3,
},
{
deviceName: "加气站d",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
type: 4,
},
{
deviceName: "加气站e",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
type: 4,
},
{
deviceName: "加气站f",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
type: 4,
},
{
deviceName: "加气站g",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
type: 4,
},
],
};
},
computed: {
// 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
getShowNum() {
return this.czList.filter((item) => item.show).length < this.addStartNum;
},
},
mounted() {
this.changeAddStartNum();
},
methods: {
hide() {
this.carHide = !this.carHide;
},
// 根据父子元素自动计算是否需要添加值start
changeAddStartNum() {
const czItem = this.$refs.czItem;
let czItemWidth;
// 组件有可能是一个数组，所以要这样判断
if (Array.isArray(czItem)) {
const { width } = czItem[0].$el.getBoundingClientRect();
czItemWidth = width;
} else {
const { width } = czItem.$el.getBoundingClientRect();
czItemWidth = width;
}
// 取出collap的宽
const { width: CollapseWidth } =
this.$refs.myCollapse.$el.getBoundingClientRect();
// 得到最小的承载数量
this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
},
//过滤选择
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.$nextTick(() => {
this.$refs.myCollapse.getHeight();
});
},
// 过滤对象
filter(arr) {
this.czList.forEach((item) => {
const { type } = item;
if (arr.includes(type)) {
item.show = true;
} else {
item.show = false;
}
});
},
},
};
</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;
display: flex;
&.start {
justify-content: flex-start;
& > div {
// margin-right: 50px;
}
}
& > div {
margin-bottom: 20px;
margin-left:1%;
width: 24%;
min-width: 295px;
}
}
.flex {
display: flex;
justify-content: space-between;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzItem.vue 0 → 100644
View file @ a9c08737
<!--
* @Author: your name
* @Date: 2022-03-26 10:27:00
* @LastEditTime: 2022-03-26 16:38:29
* @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/CzItem.vue
-->
<template>
<div class="czitem flex">
<div class="left">
<div class="img">
<div class="state">
{{ list.state == "0" ? "正常" : "报警" }}
</div>
<img v-if="list.src" src="" alt="" />
暂无图片
</div>
<div v-unValue class="device-name zzz">{{ list.deviceName }}</div>
</div>
<div class="right">
<div>温度：<span :class="{active:list.a>50}">{{list.a}}°C</span></div>
<div>水温：<span :class="{active:list.b>50}">{{list.b}}°C</span></div>
<div>压力：<span :class="{active:list.c>50}">{{list.c}}Pa</span></div>
<div>湿度：<span :class="{active:list.d>50}">{{list.d}}°C</span></div>
<div>水温：<span :class="{active:list.e>50}">{{list.e}}°C</span></div>
</div>
</div>
</template>
<script>
export default {
props: {
list: {
type: Object,
},
},
};
</script>
<style lang="scss" scoped>
.czitem {
// min-width: 324px;
width: 100%;
min-height: 191px;
padding: 14px 12px 18px 25px;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid #e6ebf5;
// display: flex;
.left {
// margin-right: 48px;
.img {
width: 162px;
height: 120px;
border-radius: 4px;
line-height: 120px;
text-align: center;
position: relative;
box-sizing: border-box;
border: 1px solid #e6ebf5;
margin-bottom: 11px;
.state {
position: absolute;
top: 0;
left: 0;
width: 162px;
height: 28px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 4px 4px 0px 0px;
text-align: center;
line-height: 28px;
color: #06d7b1;
font-size: 14px;
}
img {
width: 100%;
height: 100%;
}
}
.device-name {
font-size: 14px;
color: #666666;
font-weight: 500;
}
}
.right {
font-size: 14px;
min-width: 80px;
& > div {
margin-bottom: 10px;
span.active{
color: red;
}
}
}
}
.flex {
display: flex;
justify-content: space-between;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Fmj.vue 0 → 100644
View file @ a9c08737
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 17:16:36
* @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
-->
<template>
<div class="czcard">
<my-collapse title="阀门井" ref="myCollapse">
<template v-slot:chackbox>
<div
class="filter"
:class="`one-${item.state}`"
v-for="item in filterList"
:key="item.value"
>
<span
class="text"
:class="{ active: deviceTypeArr.indexOf(item.state) >= 0 }"
@click="fliterTypeChange(item)"
>{{ item.value }}</span
>
<span class="number">({{ item.count }})</span>
</div>
</template>
<template #container>
<div class="container flex">
<div
class="com"
v-for="item in czList"
: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>
</div>
</template>
</my-collapse>
</div>
</template>
<script>
import MyCollapse from "./MyCollapse";
import CzItem from "./CzItem";
export default {
components: {
MyCollapse,
CzItem,
},
data() {
return {
carHide: true,
addStartNum: 3,
filterList: [
{ value: "正常", count: 100, state: 1 },
{ value: "报警", count: 100, state: 2 },
{ value: "离线", count: 100, state: 3 },
],
typeState: ["正常", "报警", "离线"],
deviceTypeArr: [1, 2, 3],
czList: [
{ companyName: "河北泽宏股份阀门井", state: 1, show: true },
{ companyName: "河北泽宏股份阀门井", state: 2, show: true },
{ companyName: "河北泽宏股份阀门井", state: 3, show: true },
{ companyName: "河北泽宏股份阀门井", state: 1, show: true },
{ companyName: "河北泽宏股份阀门井", state: 2, show: true },
{ companyName: "河北泽宏股份阀门井", state: 3, show: true },
{ companyName: "河北泽宏股份阀门井", state: 1, show: true },
{ companyName: "河北泽宏股份阀门井", state: 2, show: true },
{ companyName: "河北泽宏股份阀门井", state: 3, show: true },
{ companyName: "河北泽宏股份阀门井", state: 1, show: true },
{ companyName: "河北泽宏股份阀门井", state: 2, show: true },
{ companyName: "河北泽宏股份阀门井", state: 3, show: true },
{ companyName: "河北泽宏股份阀门井", state: 1, show: true },
{ companyName: "河北泽宏股份阀门井", state: 2, show: true },
{ companyName: "河北泽宏股份阀门井", state: 3, show: true },
{ companyName: "河北泽宏股份阀门井", state: 1, show: true },
{ companyName: "河北泽宏股份阀门井", state: 2, show: true },
{ companyName: "河北泽宏股份阀门井", state: 3, show: true },
],
};
},
computed: {
// 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
getShowNum() {
return this.czList.filter((item) => item.show).length < this.addStartNum;
},
},
mounted() {
// this.changeAddStartNum();
},
methods: {
hide() {
this.carHide = !this.carHide;
},
// 根据父子元素自动计算是否需要添加值start
changeAddStartNum() {
const czItem = this.$refs.czItem;
let czItemWidth;
// 组件有可能是一个数组，所以要这样判断
if (Array.isArray(czItem)) {
const { width } = czItem[0].$el.getBoundingClientRect();
czItemWidth = width;
} else {
const { width } = czItem.$el.getBoundingClientRect();
czItemWidth = width;
}
// 取出collap的宽
const { width: CollapseWidth } =
this.$refs.myCollapse.$el.getBoundingClientRect();
// 得到最小的承载数量
this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
},
//过滤选择
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);
// 改变大小
this.$nextTick(() => {
this.$refs.myCollapse.getHeight();
});
},
// 过滤对象
filter(arr) {
this.czList.forEach((item) => {
const { state } = item;
if (arr.includes(state)) {
item.show = true;
} else {
item.show = false;
}
});
},
},
};
</script>
<style lang="scss" scoped>
$one: #666666;
$two: #ff6c68;
$three: #bbbbbb;
$active: #06d7b1 !important;
.filter {
margin-right: 22px;
margin-top: 5px;
font-size: 14px;
.text {
position: relative;
cursor: pointer;
&::before {
content: "";
position: absolute;
border-radius: 50%;
width: 6px;
height: 6px;
left: -10px;
top: 50%;
margin-top: -3px;
}
&.active {
color: $active;
}
&:hover {
color: #06d7b189 !important;
}
}
.number {
font-weight: 500;
}
&.one-1 {
.number,
.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 {
width: 100%;
flex-wrap: wrap;
margin-left: 35px;
&.start {
justify-content: flex-start;
& > div {
// margin-right: 50px;
}
}
& > div {
margin-bottom: 20px;
display: flex;
justify-content: flex-start;
// margin-right: 45px;
width: 15%;
min-width: 190px;
margin-right: 1%;
.left {
margin-right: 4px;
font-size: 14px;
max-width: 112px;
}
.state {
font-size: 8px;
padding: 0px 4px;
box-sizing: border-box;
&.one-1 {
color: #fff;
border: 1px solid #6fffe5;
border-radius: 2px;
background-color: #06d7b1;
}
&.one-2 {
color: #fff;
border: 1px solid #ff9c99;
border-radius: 2px;
background-color: #ff6c68;
}
&.one-3{
color: #fff;
border: 1px solid #AAAAAA;
border-radius: 2px;
background-color: #bbbbbb;
}
}
}
}
.flex {
display: flex;
justify-content: flex-start;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/MyCollapse.vue 0 → 100644
View file @ a9c08737
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 15:33: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/CzCard.vue
-->
<template>
<div class="czcard">
<div
class="card"
:style="{ height: transitionHeight }"
:class="{ hide: carHide }"
>
<div class="title flex">
<div class="left">
<div class="device">{{title}}</div>
<slot name="chackbox" />
</div>
<div class="right">
<i
class="iconfont icon-jt"
@click="hide"
:class="{ active: !carHide }"
></i>
</div>
</div>
<div ref="container">
<slot name="container" />
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
props:{
title:String,
},
data() {
return {
carHide: true,
transitionHeight: "60px",
};
},
computed: {
...mapGetters(["sidebar"]),
},
watch: {
["sidebar.opened"](val) {
setTimeout(this.getHeight, 200);
// this.getHeight();
},
},
mounted() {
this.getHeight();
},
methods: {
hide() {
this.carHide = !this.carHide;
},
getHeight() {
const { height } = this.$refs?.container?.getBoundingClientRect();
if(!height){
return;
}
// 高度必须是一个指定的值才能过渡变化，这样就计算出了整个元素的指定高度，然后赋值
if (height > 0) {
this.transitionHeight = height + 60 + 18 + "px";
}else{
this.transitionHeight="60px";
}
},
},
};
</script>
<style lang="scss" scoped>
.card {
transition: all 0.5s;
// height: 212px;
background: #ffffff;
box-shadow: 2px 0px 12px 1px rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 4px 4px;
border: 1px solid #e6ebf5;
box-sizing: border-box;
padding: 15px 22px 18px 22px;
overflow: hidden;
margin-bottom:20px;
&.hide {
height: 60px !important;
}
.title {
margin-bottom: 12px;
margin-left: 40px;
.left {
display: flex;
.device {
font-size: 18px;
color: #666666;
font-weight: 500;
margin-right: 62px;
}
}
.right {
i {
transition: all 0.5s;
display: inline-block;
font-size: 30px;
color: #c4c4c4;
cursor: pointer;
&.active {
transform: rotate(90deg);
}
}
}
}
}
.flex {
display: flex;
justify-content: space-between;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/TopCard.vue 0 → 100644
View file @ a9c08737
<!--
* @Author: your name
* @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-03-25 17:18:05
* @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
-->
<template>
<div class="">
<div class="top-card flex">
<div
class="box-card"
v-for="(item, index) in cardList"
:key="item.deviceName"
>
<div class="top flex">
<div class="top-left">
<span
class="iconfont"
:class="`icon-` + deviceIconList[index]"
></span>
<span class="text">{{ item.deviceName }}</span>
</div>
<div class="top-right flex">
<span class="text">总数</span>
<span class="count">{{ item.count }}</span>
</div>
</div>
<div class="middle flex">
<div class="first">正常</div>
<div>高爆</div>
<div>低爆</div>
<div class="last">离线数</div>
</div>
<div class="bottom flex">
<div class="first">1234</div>
<div>1234</div>
<div>1231</div>
<div class="last">534534</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "charsData",
props:{
cardList:{
type:Array,
}
},
data() {
return {
deviceIconList: ["ylb", "llj", "tcq"],
};
},
};
</script>
<style lang="scss" scoped>
.top-card {
margin-bottom:22px;
& > div {
flex: 1;
margin-right: 20px;
height: 212px;
background: #ffffff;
box-shadow: 2px 0px 12px 1px rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 4px 4px;
border: 1px solid #e6ebf5;
box-sizing: border-box;
padding: 34px 40px 38px;
.top {
font-size: 20px;
margin-bottom: 46px;
.top-left {
color: #1890ff;
.iconfont {
font-size: 20px;
margin-right: 4px;
}
.text {
font-weight: 500;
}
}
.top-right {
padding-top: 5px;
font-size: 16px;
.text {
font-size: 16px;
font-weight: 500;
margin-right: 2px;
padding-top: 3px;
}
.count {
color: #1890ff;
font-size: 22px;
letter-spacing: 1px;
}
}
}
&:last-child {
margin-right: 0;
}
}
.middle,
.bottom {
// justify-content: space-around;
& > div {
// flex: 1;
text-align: center;
font-size: 16px;
&.first {
text-align: left;
}
&.last {
text-align: right;
}
}
}
.middle {
margin-bottom: 20px;
& > div {
font-weight: 500;
}
}
}
.flex {
display: flex;
justify-content: space-between;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Tyx.vue 0 → 100644
View file @ a9c08737
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 17:16: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
-->
<template>
<div class="czcard">
<my-collapse title="调压箱" ref="myCollapse">
<template v-slot:chackbox>
<div
class="filter"
:class="`one-${item.state}`"
v-for="item in filterList"
:key="item.value"
>
<span
class="text"
:class="{ active: deviceTypeArr.indexOf(item.state) >= 0 }"
@click="fliterTypeChange(item)"
>{{ item.value }}</span
>
<span class="number">({{ item.count }})</span>
</div>
</template>
<template #container>
<div class="container flex">
<div
class="com"
v-for="item in czList"
: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>
</div>
</template>
</my-collapse>
</div>
</template>
<script>
import MyCollapse from "./MyCollapse";
import CzItem from "./CzItem";
export default {
components: {
MyCollapse,
CzItem,
},
data() {
return {
carHide: true,
addStartNum: 3,
filterList: [
{ value: "正常", count: 100, state: 1 },
{ value: "报警", count: 100, state: 2 },
{ value: "离线", count: 100, state: 3 },
],
typeState: ["正常", "报警", "离线"],
deviceTypeArr: [1, 2, 3],
czList: [
{ companyName: "河北泽宏股份调压箱", state: 1, show: true },
{ companyName: "河北泽宏股份调压箱", state: 2, show: true },
{ companyName: "河北泽宏股份调压箱", state: 3, show: true },
{ companyName: "河北泽宏股份调压箱", state: 1, show: true },
{ companyName: "河北泽宏股份调压箱", state: 2, show: true },
{ companyName: "河北泽宏股份调压箱", state: 3, show: true },
{ companyName: "河北泽宏股份调压箱", state: 1, show: true },
{ companyName: "河北泽宏股份调压箱", state: 2, show: true },
{ companyName: "河北泽宏股份调压箱", state: 3, show: true },
{ companyName: "河北泽宏股份调压箱", state: 1, show: true },
{ companyName: "河北泽宏股份调压箱", state: 2, show: true },
{ companyName: "河北泽宏股份调压箱", state: 3, show: true },
{ companyName: "河北泽宏股份调压箱", state: 1, show: true },
{ companyName: "河北泽宏股份调压箱", state: 2, show: true },
{ companyName: "河北泽宏股份调压箱", state: 3, show: true },
{ companyName: "河北泽宏股份调压箱", state: 1, show: true },
{ companyName: "河北泽宏股份调压箱", state: 2, show: true },
{ companyName: "河北泽宏股份调压箱", state: 3, show: true },
],
};
},
computed: {
// 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
getShowNum() {
return this.czList.filter((item) => item.show).length < this.addStartNum;
},
},
mounted() {
// this.changeAddStartNum();
},
methods: {
hide() {
this.carHide = !this.carHide;
},
// 根据父子元素自动计算是否需要添加值start
changeAddStartNum() {
const czItem = this.$refs.czItem;
let czItemWidth;
// 组件有可能是一个数组，所以要这样判断
if (Array.isArray(czItem)) {
const { width } = czItem[0].$el.getBoundingClientRect();
czItemWidth = width;
} else {
const { width } = czItem.$el.getBoundingClientRect();
czItemWidth = width;
}
// 取出collap的宽
const { width: CollapseWidth } =
this.$refs.myCollapse.$el.getBoundingClientRect();
// 得到最小的承载数量
this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
},
//过滤选择
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);
// 改变大小
this.$nextTick(() => {
this.$refs.myCollapse.getHeight();
});
},
// 过滤对象
filter(arr) {
this.czList.forEach((item) => {
const { state } = item;
if (arr.includes(state)) {
item.show = true;
} else {
item.show = false;
}
});
},
},
};
</script>
<style lang="scss" scoped>
$one: #666666;
$two: #ff6c68;
$three: #bbbbbb;
$active: #06d7b1 !important;
.filter {
margin-right: 22px;
margin-top: 5px;
font-size: 14px;
.text {
position: relative;
cursor: pointer;
&::before {
content: "";
position: absolute;
border-radius: 50%;
width: 6px;
height: 6px;
left: -10px;
top: 50%;
margin-top: -3px;
}
&.active {
color: $active;
}
&:hover {
color: #06d7b189 !important;
}
}
.number {
font-weight: 500;
}
&.one-1 {
.number,
.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 {
width: 100%;
flex-wrap: wrap;
margin-left: 35px;
&.start {
justify-content: flex-start;
& > div {
// margin-right: 50px;
}
}
& > div {
margin-bottom: 20px;
display: flex;
justify-content: flex-start;
// margin-right: 45px;
width: 15%;
min-width: 190px;
margin-right: 1%;
.left {
margin-right: 4px;
font-size: 14px;
max-width: 112px;
}
.state {
font-size: 8px;
padding: 0px 4px;
box-sizing: border-box;
&.one-1 {
color: #fff;
border: 1px solid #6fffe5;
border-radius: 2px;
background-color: #06d7b1;
}
&.one-2 {
color: #fff;
border: 1px solid #ff9c99;
border-radius: 2px;
background-color: #ff6c68;
}
&.one-3{
color: #fff;
border: 1px solid #AAAAAA;
border-radius: 2px;
background-color: #bbbbbb;
}
}
}
}
.flex {
display: flex;
justify-content: flex-start;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/index.vue 0 → 100644
View file @ a9c08737
<!--
* @Author: your name
* @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-03-26 17:15:43
* @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
-->
<template>
<div class="chars-data">
<TopCard :cardList="cardList"/>
<CzCard/>
<Cg/>
<Fmj/>
<Tyx/>
</div>
</template>
<script>
import TopCard from "./TopCard";
import CzCard from "./CzCard";
import Cg from "./Cg";
import Fmj from "./Fmj";
import Tyx from "./Tyx";
export default {
name: "charsData",
components: {
TopCard,
CzCard,
Cg,
Fmj,
Tyx
},
data() {
return {
cardList: [
{ deviceName: "压力表", count: 123123 },
{ deviceName: "流量计", count: 123123 },
{ deviceName: "探测器", count: 123123 },
],
deviceIconList: ["ylb", "llj", "tcq"],
};
},
};
</script>
<style lang="scss" scoped>
.chars-data {
padding: 26px 108px 0 88px;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/tableData/index.vue 0 → 100644
View file @ a9c08737
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="设备名称" prop="deviceName">
<el-input
v-model="queryParams.deviceName"
placeholder="请输入设备名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="设备编号" prop="deviceNum">
<el-input
v-model="queryParams.deviceNum"
placeholder="请输入设备编号"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="所属企业" prop="beyondEnterpriseId">
<el-select v-model="queryParams.beyondEnterpriseId" placeholder="请选择所属企业">
<el-option
v-for="item in enterprises"
:key="item.enterpriseId"
:label="item.enterpriseName"
:value="item.enterpriseId"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="压力表" name="first" key="first">
<pressureTab
:activeName="activeName"
:childrenQueryParams="queryParams"
v-if="activeName === 'first'"
ref="pressure"></pressureTab>
</el-tab-pane>
<el-tab-pane label="流量计" name="second" key="second">
<flowmeterTab
:activeName="activeName"
:childrenQueryParams="queryParams"
v-if="activeName === 'second'"
ref="flowmeter"></flowmeterTab>
</el-tab-pane>
<el-tab-pane label="探测器" name="third" key="third">
<detector-tab
:activeName="activeName"
:childrenQueryParams="queryParams"
v-if="activeName === 'third'"
ref="detector">
</detector-tab>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { listData, getData, delData, addData, updateData, exportData } from "@/api/operationMonitor/data";
import { enterpriseLists } from "@/api/regulation/info";
import detectorTab from "./detectorTab";
import flowmeterTab from "./flowmeterTab";
import pressureTab from "./pressureTab"
export default {
name: "Data",
components: {
detectorTab,
flowmeterTab,
pressureTab
},
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 设备监控表格数据
dataList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
deviceNum: null,
standardConditionAccumulation: null,
workingConditionAccumulation: null,
backingStandardConditionAccumulation: null,
residualQuantity: null,
standardConditionFlow: null,
workingConditionFlow: null,
temperature: null,
pressure: null,
reportTime: null,
communicationStatus: null,
deviceStatus: null,
isDel: null,
remarks: null,
deviceType: "1"
},
// 表单参数
form: {},
// 表单校验
rules: {
deviceNum: [
{ required: true, message: "设备id不能为空", trigger: "blur" }
],
},
enterprises:[],
activeName: "first"
};
},
created() {
//this.getList();
this.getEnterpriseLists();
},
methods: {
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
deviceReportDataId: null,
deviceNum: null,
standardConditionAccumulation: null,
workingConditionAccumulation: null,
backingStandardConditionAccumulation: null,
residualQuantity: null,
standardConditionFlow: null,
workingConditionFlow: null,
temperature: null,
pressure: null,
reportTime: null,
communicationStatus: "0",
deviceStatus: "0",
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
isDel: null,
remarks: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
if("first" == this.activeName){
this.$refs.pressure.pressureHandleQuery();
}else if("second" == this.activeName){
this.$refs.flowmeter.flowmeterHandleQuery();
}else{
this.$refs.detector.detectorHandleQuery();
}
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//所属单位
getEnterpriseLists(){
enterpriseLists().then(response => {
this.enterprises = response.rows;
});
},
//切换tag
handleClick(tab, event){
if("0" == tab.index){
this.activeName = "first"
}else if("1" == tab.index){
this.activeName = "second"
}else{
this.activeName = "third"
}
}
}
};
</script>
<style>
.el-tag {
margin-left: 10px;
text-align: center;
width: 200px;
}
</style>
gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
View file @ a9c08737
<!--
* @Author: your name
* @Date: 2022-03-08 17:28:57
* @LastEditTime: 2022-03-25 15:27:44
* @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
-->
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="设备名称" prop="deviceName">
<el-input
v-model="queryParams.deviceName"
placeholder="请输入设备名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="设备编号" prop="deviceNum">
<el-input
v-model="queryParams.deviceNum"
placeholder="请输入设备编号"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="所属企业" prop="beyondEnterpriseId">
<el-select v-model="queryParams.beyondEnterpriseId" placeholder="请选择所属企业">
<el-option
v-for="item in enterprises"
:key="item.enterpriseId"
:label="item.enterpriseName"
:value="item.enterpriseId"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="压力表" name="first" key="first">
<pressureTab
:activeName="activeName"
:childrenQueryParams="queryParams"
v-if="activeName === 'first'"
ref="pressure"></pressureTab>
</el-tab-pane>
<el-tab-pane label="流量计" name="second" key="second">
<flowmeterTab
:activeName="activeName"
:childrenQueryParams="queryParams"
v-if="activeName === 'second'"
ref="flowmeter"></flowmeterTab>
</el-tab-pane>
<el-tab-pane label="探测器" name="third" key="third">
<detector-tab
:activeName="activeName"
:childrenQueryParams="queryParams"
v-if="activeName === 'third'"
ref="detector">
</detector-tab>
</el-tab-pane>
</el-tabs>
<div class="monitorData">
<div class="iconfont">
<div
v-for="(item, index) in changeIcon"
:key="item.class"
:class="[item.class, { active: isCom == index }]"
@click="isComChange(index)"
></div>
</div>
<component :is="currentTabComponent"></component>
</div>
</template>
<script>
import { listData, getData, delData, addData, updateData, exportData } from "@/api/operationMonitor/data";
import { enterpriseLists } from "@/api/regulation/info";
import detectorTab from "./component/detectorTab";
import flowmeterTab from "./component/flowmeterTab";
import pressureTab from "./component/pressureTab"
import charsData from "./component/charsData";
import tabledata from "./component/tableData";
export default {
name: "Data",
components: {
detectorTab,
flowmeterTab,
pressureTab
},
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 设备监控表格数据
dataList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
deviceNum: null,
standardConditionAccumulation: null,
workingConditionAccumulation: null,
backingStandardConditionAccumulation: null,
residualQuantity: null,
standardConditionFlow: null,
workingConditionFlow: null,
temperature: null,
pressure: null,
reportTime: null,
communicationStatus: null,
deviceStatus: null,
isDel: null,
remarks: null,
deviceType: "1"
},
// 表单参数
form: {},
// 表单校验
rules: {
deviceNum: [
{ required: true, message: "设备id不能为空", trigger: "blur" }
],
},
enterprises:[],
activeName: "first"
// currentTabComponent: tabledata,
changeIcon: [{ class: "icon-b" }, { class: "icon-a" }],
isCom: 1,
};
},
created() {
//this.getList();
this.getEnterpriseLists();
computed: {
currentTabComponent() {
return this.isCom == 0 ? tabledata : charsData;
},
},
methods: {
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
deviceReportDataId: null,
deviceNum: null,
standardConditionAccumulation: null,
workingConditionAccumulation: null,
backingStandardConditionAccumulation: null,
residualQuantity: null,
standardConditionFlow: null,
workingConditionFlow: null,
temperature: null,
pressure: null,
reportTime: null,
communicationStatus: "0",
deviceStatus: "0",
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
isDel: null,
remarks: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
if("first" == this.activeName){
this.$refs.pressure.pressureHandleQuery();
}else if("second" == this.activeName){
this.$refs.flowmeter.flowmeterHandleQuery();
}else{
this.$refs.detector.detectorHandleQuery();
}
isComChange(index) {
this.isCom = index;
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//所属单位
getEnterpriseLists(){
enterpriseLists().then(response => {
this.enterprises = response.rows;
});
},
//切换tag
handleClick(tab, event){
if("0" == tab.index){
this.activeName = "first"
}else if("1" == tab.index){
this.activeName = "second"
}else{
this.activeName = "third"
}
}
}
},
};
</script>
<style>
.el-tag {
margin-left: 10px;
text-align: center;
width: 200px;
<style lang="scss" scoped>
@import url("~@/assets/iconfont/monitorData/iconfont.css");
.iconfont {
display: flex;
justify-content: right;
margin-right: 37px;
padding-top: 38px;
div {
cursor: pointer;
padding: 4px;
&.active,
&:hover {
background-color: #666666;
color: #fff;
}
}
</style>
.icon-b {
margin-right: 23px;
}
}
</style>>
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