Skip to content

G
gassafety-progress
Commit ad05fa16 authored by 王晓倩's avatar 王晓倩
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 2a6c7f92 a450c54b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1130 additions and 240 deletions
gassafetyprogress-web/src/assets/iconfont/monitorData/iconfont.css
View file @ ad05fa16
@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');
src: url('iconfont.woff2?t=1648524577887') format('woff2'),
url('iconfont.woff?t=1648524577887') format('woff'),
url('iconfont.ttf?t=1648524577887') format('truetype');
}
.iconfont {
......@@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-bingo:before {
content: "\e625";
}
.icon-x:before {
content: "\e600";
}
.icon-jt:before {
content: "\e8f1";
}
......
gassafetyprogress-web/src/assets/styles/all.scss
View file @ ad05fa16
......@@ -56,8 +56,8 @@
.el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important;
}
.el-dialog__header{
border-bottom:1px solid #cccccc;
.el-dialog__header {
border-bottom: 1px solid #cccccc;
}
.bigwindow {
// 全局表格样式
......@@ -613,19 +613,17 @@
// overflow-y: none !important;
}
}
// map里的label
.amap-info {
position: fixed !important;
z-index: 999 !important;
}
.amap-marker-label{
background-color: rgba(9, 18, 32, 0.6) !important;
color: #fff !important;
border:none !important;
padding:10px;
.amap-marker-label {
background-color: rgba(9, 18, 32, 0.6) !important;
color: #fff !important;
border: none !important;
padding: 10px;
}
.left {
.el-table__body-wrapper {
......@@ -668,16 +666,20 @@
padding: 0 2px !important;
}
//去除高德logo
.amap-logo{
.amap-logo {
display: none;
opacity:0 !important;
opacity: 0 !important;
}
.amap-copyright {
opacity:0;
opacity: 0;
}
.paddingnone {
padding: 0 !important;
}
.zzz {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
\ No newline at end of file
}
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
View file @ ad05fa16
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-28 14:33:23
* @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,19 +15,18 @@
: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 }">
<div v-for="(item,index) in czList" :key="item.deviceName+index" v-show="item.show">
<div
v-for="(item, index) in czList"
:key="item.deviceName + index"
v-show="item.show"
>
<CzItem ref="czItem" :list="item" v-if="item.show" />
</div>
</div>
......@@ -39,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 },
......@@ -73,7 +75,7 @@ export default {
},
{
deviceName: "门站",
state: 1,
state: 2,
a: 25,
b: 56,
c: 54,
......@@ -180,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(()=>{
......@@ -214,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;
......@@ -247,6 +225,10 @@ export default {
margin-left: 1%;
width: 24%;
min-width: 295px;
border: 1px solid #e6ebf5;
border-radius: 4px;
box-sizing: border-box;
}
}
.flex {
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzItem.vue
View file @ ad05fa16
<!--
* @Author: your name
* @Date: 2022-03-26 10:27:00
* @LastEditTime: 2022-03-28 13:59:11
* @LastEditTime: 2022-03-28 18:03: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/CzItem.vue
-->
<template>
<div class="czitem flex">
<div class="czitem flex" :class="{nopadding:changeStyle}">
<div class="left">
<div class="img">
<div class="state">
{{ list.state == "0" ? "正常" : "报警" }}
<div class="state" :class="{active1:list.state=='1',active2:list.state=='2',active3:list.state=='3'}">
{{ stateType[list.state] }}
</div>
<img v-if="list.src" src="" alt="" />
暂无图片
</div>
<div v-unValue class="device-name zzz">{{ list.deviceName }}</div>
<div v-if="!changeStyle" 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>
温度：<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>
......@@ -37,6 +47,16 @@ export default {
list: {
type: Object,
},
// 从外部传一个值，来改变一些样式
changeStyle:{
type:Boolean,
default:false,
},
stateType:{
type:Object,
default:()=>({"1":"正常",2:"报警"})
}
},
};
</script>
......@@ -48,8 +68,6 @@ export default {
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;
......@@ -75,6 +93,15 @@ export default {
line-height: 28px;
color: #06d7b1;
font-size: 14px;
&.active1 {
color: #06d7b1;
}
&.active2 {
color: #FF6C68;
}
&.active3 {
color: #bbbbbb;
}
}
img {
width: 100%;
......@@ -92,7 +119,7 @@ export default {
min-width: 80px;
& > div {
margin-bottom: 10px;
span.active{
span.active {
color: red;
}
}
......@@ -102,4 +129,8 @@ export default {
display: flex;
justify-content: space-between;
}
.nopadding{
padding-bottom:0 !important;
min-height:170px;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/FilterVue.vue 0 → 100644
View file @ ad05fa16
<!--
* @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 @ ad05fa16
<!--
* @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 @ ad05fa16
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-28 13:46:49
* @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";
......@@ -119,7 +121,7 @@ export default {
height: 60px !important;
}
.title {
margin-bottom: 12px;
margin-bottom: 16px;
margin-left: 40px;
.left {
display: flex;
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/index.vue
View file @ ad05fa16
<!--
* @Author: your name
* @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-03-28 13:50:56
* @LastEditTime: 2022-03-28 15:05: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.vue
......@@ -48,5 +48,6 @@ export default {
.chars-data {
// padding: 26px 108px 0 88px;
padding: 20px;
padding-right: 50px;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
View file @ ad05fa16
<!--
* @Author: your name
* @Date: 2022-03-08 17:28:57
* @LastEditTime: 2022-03-28 13:54:22
* @LastEditTime: 2022-03-28 17:20:55
* @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
......@@ -32,7 +32,7 @@ export default {
return {
// currentTabComponent: tabledata,
changeIcon: [{ class: "icon-b" }, { class: "icon-a" }],
isCom: 0,
isCom: 1,
};
},
computed: {
......@@ -54,7 +54,7 @@ export default {
display: flex;
justify-content: right;
margin-right: 37px;
padding-top: 38px;
padding-top: 15px;
div {
cursor: pointer;
padding: 4px;
......
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