Skip to content

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

增加点击出现小弹框功能

parent 41913163
Show whitespace changes
Inline Side-by-side
Showing with 310 additions and 65 deletions
gassafetyprogress-web/src/assets/iconfont/monitorData/iconfont.css
View file @ 75d92c01
@font-face { @font-face {
font-family: "iconfont"; /* Project id 3276749 */ font-family: "iconfont"; /* Project id 3276749 */
src: url('iconfont.woff2?t=1648286292510') format('woff2'), src: url('//at.alicdn.com/t/font_3276749_mh99rhny3b.woff2?t=1648459448822') format('woff2'),
url('iconfont.woff?t=1648286292510') format('woff'), url('//at.alicdn.com/t/font_3276749_mh99rhny3b.woff?t=1648459448822') format('woff'),
url('iconfont.ttf?t=1648286292510') format('truetype'); url('//at.alicdn.com/t/font_3276749_mh99rhny3b.ttf?t=1648459448822') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,10 @@ ...@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-guanbi:before {
content: "\e661";
}
.icon-jt:before { .icon-jt:before {
content: "\e8f1"; content: "\e8f1";
} }
...@@ -36,4 +40,3 @@ ...@@ -36,4 +40,3 @@
.icon-b:before { .icon-b:before {
content: "\e61f"; content: "\e61f";
} }
gassafetyprogress-web/src/assets/styles/all.scss
View file @ 75d92c01
...@@ -56,8 +56,8 @@ ...@@ -56,8 +56,8 @@
.el-dialog:not(.is-fullscreen) { .el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important; margin-top: 6vh !important;
} }
.el-dialog__header{ .el-dialog__header {
border-bottom:1px solid #cccccc; border-bottom: 1px solid #cccccc;
} }
.bigwindow { .bigwindow {
// 全局表格样式 // 全局表格样式
...@@ -613,19 +613,17 @@ ...@@ -613,19 +613,17 @@
// overflow-y: none !important; // overflow-y: none !important;
} }
} }
// map里的label // map里的label
.amap-info { .amap-info {
position: fixed !important; position: fixed !important;
z-index: 999 !important; z-index: 999 !important;
} }
.amap-marker-label{ .amap-marker-label {
background-color: rgba(9, 18, 32, 0.6) !important; background-color: rgba(9, 18, 32, 0.6) !important;
color: #fff !important; color: #fff !important;
border:none !important; border: none !important;
padding:10px; padding: 10px;
} }
.left { .left {
.el-table__body-wrapper { .el-table__body-wrapper {
...@@ -668,12 +666,16 @@ ...@@ -668,12 +666,16 @@
padding: 0 2px !important; padding: 0 2px !important;
} }
//去除高德logo //去除高德logo
.amap-logo{ .amap-logo {
display: none; display: none;
opacity:0 !important; opacity: 0 !important;
} }
.amap-copyright { .amap-copyright {
opacity:0; opacity: 0;
}
.paddingnone {
padding: 0 !important;
} }
.zzz { .zzz {
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Cg.vue
View file @ 75d92c01
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-03-25 17:15:31 * @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-28 13:59:37 * @LastEditTime: 2022-03-28 18:05:38
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @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 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
--> -->
<template> <template>
<div class="czcard"> <div class="chars-card">
<my-collapse <my-collapse
title="储罐" title="储罐"
ref="myCollapse" ref="myCollapse"
...@@ -34,17 +34,57 @@ ...@@ -34,17 +34,57 @@
<div class="container flex"> <div class="container flex">
<div <div
class="com" class="com"
v-for="item in czList" v-for="(item, index) in czList"
:key="item.deviceName" :key="item.deviceName"
v-show="item.show" v-show="item.show"
> >
<el-popover
:ref="'popo' + index"
placement="right-end"
width="330"
trigger="click"
popper-class="paddingnone"
>
<div class="cz-item">
<div class="title">
<div class="text">
{{ item.companyName }}
</div>
<div @click="change(index)" class="x">
<i class="iconfont icon-x"></i>
</div>
</div>
<CzItem
ref="czItem"
:list="item"
:changeStyle="true"
:stateType="stateType"
/>
</div>
<template slot="reference">
<div class="flex">
<div :title="item.companyName" class="left zzz"> <div :title="item.companyName" class="left zzz">
{{ item.companyName }} {{ item.companyName }}
</div> </div>
<div :class="`one-${item.state}`" class="state"> <div
:class="`one-${item.state}`"
class="state"
@click="change"
>
{{ typeState[item.state - 1] }} {{ typeState[item.state - 1] }}
</div> </div>
</div> </div>
</template>
<!-- <el-button slot="reference">click 激活</el-button> -->
</el-popover>
<!-- <div :title="item.companyName" class="left zzz">
{{ item.companyName }}
</div>
<div :class="`one-${item.state}`" class="state">
{{ typeState[item.state - 1] }}
</div> -->
</div>
</div> </div>
</template> </template>
</my-collapse> </my-collapse>
...@@ -63,6 +103,7 @@ export default { ...@@ -63,6 +103,7 @@ export default {
data() { data() {
return { return {
carHide: true, carHide: true,
visible: true,
addStartNum: 3, addStartNum: 3,
filterList: [ filterList: [
{ value: "正常", count: 100, state: 1 }, { value: "正常", count: 100, state: 1 },
...@@ -72,25 +113,148 @@ export default { ...@@ -72,25 +113,148 @@ export default {
typeState: ["正常", "报警", "离线"], typeState: ["正常", "报警", "离线"],
deviceTypeArr: [1, 2, 3], deviceTypeArr: [1, 2, 3],
czList: [ czList: [
{ companyName: "河北泽宏股份储罐", state: 1, show: true }, {
{ companyName: "河北泽宏股份储罐", state: 2, show: true }, companyName: "河北泽宏股份储罐",
{ companyName: "河北泽宏股份储罐", state: 3, show: true }, state: 1,
{ companyName: "河北泽宏股份储罐", state: 1, show: true }, a: 25,
{ companyName: "河北泽宏股份储罐", state: 2, show: true }, b: 56,
{ companyName: "河北泽宏股份储罐", state: 3, show: true }, c: 54,
{ companyName: "河北泽宏股份储罐", state: 1, show: true }, d: 15,
{ companyName: "河北泽宏股份储罐", state: 2, show: true }, e: 56,
{ companyName: "河北泽宏股份储罐", state: 3, show: true }, image: "",
{ companyName: "河北泽宏股份储罐", state: 1, show: true }, show: true,
{ companyName: "河北泽宏股份储罐", state: 2, show: true }, popoVidible: true,
{ companyName: "河北泽宏股份储罐", state: 3, show: true }, },
{ companyName: "河北泽宏股份储罐", state: 1, show: true }, {
{ companyName: "河北泽宏股份储罐", state: 2, show: true }, companyName: "河北泽宏股份储罐",
{ companyName: "河北泽宏股份储罐", state: 3, show: true }, state: 2,
{ companyName: "河北泽宏股份储罐", state: 1, show: true }, a: 25,
{ companyName: "河北泽宏股份储罐", state: 2, show: true }, b: 56,
{ companyName: "河北泽宏股份储罐", state: 3, show: true }, c: 54,
d: 15,
e: 56,
image: "",
show: true,
popoVidible: false,
},
{
companyName: "河北泽宏股份储罐",
state: 3,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
popoVidible: false,
},
{
companyName: "河北泽宏股份储罐",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
popoVidible: false,
},
{
companyName: "河北泽宏股份储罐",
state: 2,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
},
{
companyName: "河北泽宏股份储罐",
state: 3,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
},
{
companyName: "河北泽宏股份储罐",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
},
{
companyName: "河北泽宏股份储罐",
state: 2,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
},
{
companyName: "河北泽宏股份储罐",
state: 3,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
},
{
companyName: "河北泽宏股份储罐",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
},
{
companyName: "河北泽宏股份储罐",
state: 2,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
},
{
companyName: "河北泽宏股份储罐",
state: 3,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
},
], ],
stateType: {
1: "正常",
2: "报警",
3: "离线",
},
}; };
}, },
computed: { computed: {
...@@ -106,6 +270,9 @@ export default { ...@@ -106,6 +270,9 @@ export default {
hide() { hide() {
this.carHide = !this.carHide; this.carHide = !this.carHide;
}, },
change(index) {
this.$refs["popo" + index][0].showPopper = false;
},
// 根据父子元素自动计算是否需要添加值start // 根据父子元素自动计算是否需要添加值start
changeAddStartNum() { changeAddStartNum() {
const czItem = this.$refs.czItem; const czItem = this.$refs.czItem;
...@@ -227,12 +394,12 @@ $active: #06d7b1 !important; ...@@ -227,12 +394,12 @@ $active: #06d7b1 !important;
margin-left: 35px; margin-left: 35px;
&.start { &.start {
justify-content: flex-start; // justify-content: flex-start;
& > div { & > div {
// margin-right: 50px; // margin-right: 50px;
} }
} }
& > div { .com {
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
...@@ -240,10 +407,12 @@ $active: #06d7b1 !important; ...@@ -240,10 +407,12 @@ $active: #06d7b1 !important;
width: 15%; width: 15%;
min-width: 190px; min-width: 190px;
margin-right: 1.5%; margin-right: 1.5%;
.left { .left {
margin-right: 4px; margin-right: 4px;
font-size: 14px; font-size: 14px;
max-width: 112px; max-width: 112px;
cursor: pointer;
} }
.state { .state {
font-size: 8px; font-size: 8px;
...@@ -270,8 +439,38 @@ $active: #06d7b1 !important; ...@@ -270,8 +439,38 @@ $active: #06d7b1 !important;
} }
} }
} }
.flex { .flex {
display: flex; display: flex;
justify-content: flex-start; // justify-content: flex-start;
}
.cz-item {
.title {
display: flex;
justify-content: space-between;
// height: 20px;
border-bottom: 1px solid #e6ebf5;
box-sizing: border-box;
padding: 13px 0px 6px 10px;
.text {
font-size: 13px;
color: #666666;
padding-left: 10px;
}
.x {
color: #666666;
padding-right: 10px;
cursor: pointer;
.iconfont {
font-size: 12px;
&::hover {
color: #000000;
}
}
}
}
}
.paddingnone {
padding: 0;
} }
</style> </style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
View file @ 75d92c01
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-03-25 17:15:31 * @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-28 14:33:23 * @LastEditTime: 2022-03-28 18:04:53
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @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 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
...@@ -27,7 +27,11 @@ ...@@ -27,7 +27,11 @@
</template> </template>
<template #container> <template #container>
<div class="container" :class="{ start: getShowNum }"> <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" /> <CzItem ref="czItem" :list="item" v-if="item.show" />
</div> </div>
</div> </div>
...@@ -73,7 +77,7 @@ export default { ...@@ -73,7 +77,7 @@ export default {
}, },
{ {
deviceName: "门站", deviceName: "门站",
state: 1, state: 2,
a: 25, a: 25,
b: 56, b: 56,
c: 54, c: 54,
...@@ -144,6 +148,7 @@ export default { ...@@ -144,6 +148,7 @@ export default {
type: 4, type: 4,
}, },
], ],
}; };
}, },
computed: { computed: {
...@@ -247,6 +252,10 @@ export default { ...@@ -247,6 +252,10 @@ export default {
margin-left: 1%; margin-left: 1%;
width: 24%; width: 24%;
min-width: 295px; min-width: 295px;
border: 1px solid #e6ebf5;
border-radius: 4px;
box-sizing: border-box;
} }
} }
.flex { .flex {
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzItem.vue
View file @ 75d92c01
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-03-26 10:27:00 * @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 * @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @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 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzItem.vue
--> -->
<template> <template>
<div class="czitem flex"> <div class="czitem flex" :class="{nopadding:changeStyle}">
<div class="left"> <div class="left">
<div class="img"> <div class="img">
<div class="state"> <div class="state" :class="{active1:list.state=='1',active2:list.state=='2',active3:list.state=='3'}">
{{ list.state == "0" ? "正常" : "报警" }} {{ stateType[list.state] }}
</div> </div>
<img v-if="list.src" src="" alt="" /> <img v-if="list.src" src="" alt="" />
暂无图片 暂无图片
</div> </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>
<div class="right"> <div class="right">
<div>温度：<span :class="{active:list.a>50}">{{list.a}}°C</span></div> <div>
<div>水温：<span :class="{active:list.b>50}">{{list.b}}°C</span></div> 温度：<span :class="{ active: list.a > 50 }">{{ list.a }}°C</span>
<div>压力：<span :class="{active:list.c>50}">{{list.c}}Pa</span></div> </div>
<div>湿度：<span :class="{active:list.d>50}">{{list.d}}°C</span></div> <div>
<div>水温：<span :class="{active:list.e>50}">{{list.e}}°C</span></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>
</div> </div>
</template> </template>
...@@ -37,6 +47,16 @@ export default { ...@@ -37,6 +47,16 @@ export default {
list: { list: {
type: Object, type: Object,
}, },
// 从外部传一个值，来改变一些样式
changeStyle:{
type:Boolean,
default:false,
},
stateType:{
type:Object,
default:()=>({"1":"正常",2:"报警"})
}
}, },
}; };
</script> </script>
...@@ -48,8 +68,6 @@ export default { ...@@ -48,8 +68,6 @@ export default {
min-height: 191px; min-height: 191px;
padding: 14px 12px 18px 25px; padding: 14px 12px 18px 25px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px;
border: 1px solid #e6ebf5;
// display: flex; // display: flex;
.left { .left {
// margin-right: 48px; // margin-right: 48px;
...@@ -75,6 +93,15 @@ export default { ...@@ -75,6 +93,15 @@ export default {
line-height: 28px; line-height: 28px;
color: #06d7b1; color: #06d7b1;
font-size: 14px; font-size: 14px;
&.active1 {
color: #06d7b1;
}
&.active2 {
color: #FF6C68;
}
&.active3 {
color: #bbbbbb;
}
} }
img { img {
width: 100%; width: 100%;
...@@ -92,7 +119,7 @@ export default { ...@@ -92,7 +119,7 @@ export default {
min-width: 80px; min-width: 80px;
& > div { & > div {
margin-bottom: 10px; margin-bottom: 10px;
span.active{ span.active {
color: red; color: red;
} }
} }
...@@ -102,4 +129,8 @@ export default { ...@@ -102,4 +129,8 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.nopadding{
padding-bottom:0 !important;
min-height:170px;
}
</style> </style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/MyCollapse.vue
View file @ 75d92c01
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-03-25 17:15:31 * @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-28 13:46:49 * @LastEditTime: 2022-03-28 15:03:20
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @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 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
...@@ -119,7 +119,7 @@ export default { ...@@ -119,7 +119,7 @@ export default {
height: 60px !important; height: 60px !important;
} }
.title { .title {
margin-bottom: 12px; margin-bottom: 16px;
margin-left: 40px; margin-left: 40px;
.left { .left {
display: flex; display: flex;
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/index.vue
View file @ 75d92c01
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-03-25 13:46:23 * @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 * @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @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 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue
...@@ -48,5 +48,6 @@ export default { ...@@ -48,5 +48,6 @@ export default {
.chars-data { .chars-data {
// padding: 26px 108px 0 88px; // padding: 26px 108px 0 88px;
padding: 20px; padding: 20px;
padding-right: 50px;
} }
</style> </style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
View file @ 75d92c01
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-03-08 17:28:57 * @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 * @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @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 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
...@@ -32,7 +32,7 @@ export default { ...@@ -32,7 +32,7 @@ export default {
return { return {
// currentTabComponent: tabledata, // currentTabComponent: tabledata,
changeIcon: [{ class: "icon-b" }, { class: "icon-a" }], changeIcon: [{ class: "icon-b" }, { class: "icon-a" }],
isCom: 0, isCom: 1,
}; };
}, },
computed: { computed: {
...@@ -54,7 +54,7 @@ export default { ...@@ -54,7 +54,7 @@ export default {
display: flex; display: flex;
justify-content: right; justify-content: right;
margin-right: 37px; margin-right: 37px;
padding-top: 38px; padding-top: 15px;
div { div {
cursor: pointer; cursor: pointer;
padding: 4px; 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