Skip to content

G
gassafety-progress
Commit 0cba0013 authored by wuqinghua's avatar wuqinghua
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 6354c624 28a7b973
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2959 additions and 257 deletions
gassafetyprogress-web/src/assets/iconfont/monitorData/iconfont.css 0 → 100644
View file @ 0cba0013
@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 @ 0cba0013
......@@ -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/components/emergency/PipeColor.vue
View file @ 0cba0013
......@@ -128,8 +128,8 @@ export default {
&.active,
&:hover
{
background-color: #053B6A ;
color: #2CD5DB;
background-color: #1890ff ;
color: #ffffff;
}
}
}
......
gassafetyprogress-web/src/components/emergency/Timeline.vue
View file @ 0cba0013
......@@ -85,7 +85,7 @@
.long-line {
width: 1px;
height: 98px;
background: #ffffff;
background: #000000;
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
opacity: 0.5;
margin-left: 8px;
......@@ -96,7 +96,7 @@
box-sizing: border-box;
margin-left: 20px;
height: 86px;
padding: 0 0 0 20px;
padding: 6px 0 0 20px;
text-align: left;
margin-bottom: 30px;
......@@ -104,20 +104,20 @@
font-size: 15px;
word-break: break-all;
margin-bottom: 16px;
color: #d9d9d9;
color: #000000;
font-weight: 500;
/*display: inline;*/
}
.timeline-date {
font-size: 13px;
color: #dfe4ed;
color: #000000;
font-weight: 500;
margin-bottom: 16px;
}
.timeline-desc {
font-size: 14px;
color: #30b46b;
color: #000000;
}
}
......
gassafetyprogress-web/src/components/emergency/rightBar.vue
View file @ 0cba0013
......@@ -7,7 +7,7 @@
<span class="dot-inner"></span>
</span>
<span
style="letter-spacing: 3px; color: #cddbe4; cursor: pointer"
style="letter-spacing: 3px; color: #000000; cursor: pointer"
>事件接报列表</span
>
</div>
......@@ -36,11 +36,11 @@
</div>
<div id = "detail" class="show-detail" style="display: none;margin-top: 15px;margin-bottom: 20px;position:fixed;right: 470px;width: 300px;
background: rgba(0, 0, 0, 0.7);top: 110px">
background: #ffffff;top: 110px">
<div class="el-form-div" style="height: 30px;">
<div class="detail-title">{{detailTitle}}</div>
<div style="cursor: pointer;" @click="closeDetail()">
<img style="width: 20px;height: 20px;margin-top: 5px;" src="@/assets/mapImages/closeBtn.png" alt="" />
<img style="width: 20px;height: 20px;margin-top: 5px;" src="@/assets/mapImages/close.png" alt="" />
</div>
</div>
<timeline :timeline-list="handleList"></timeline>
......@@ -569,9 +569,9 @@ export default {
margin-left: 10px;
background-image: linear-gradient(
to left,
#112238,
#fff,
rgb(49 151 195 / 70%) 50%,
#112238
#fff
);
}
.dot {
......@@ -600,7 +600,7 @@ export default {
animation: vabDot 1.2s ease-in-out infinite;
}
.content-div{
color: white;
color: #000000;
font-size: 30;
height: 40px;
line-height: 50px;
......@@ -614,7 +614,7 @@ export default {
}
.button-div{
cursor:pointer;
color: #339CC9;
color: #ffffff;
margin-bottom: 5px;
border-radius: 2px;
width: 100px;
......@@ -625,6 +625,7 @@ export default {
font-size: 15;
margin-left: 10%;
margin-top: 10px;
background: #1c84c6;
}
.title-div{
width: 100%;
......@@ -633,7 +634,7 @@ export default {
border-bottom: 2px solid #1c84c6;
border-top: 1px solid #1c84c6;
height: 30px;
color: white;
color: #000;
line-height: 30px;
}
.test-5::-webkit-scrollbar {
......@@ -670,8 +671,9 @@ export default {
.detail-title{
height: 100%;
width: 270px;
color: white;
color: #000000;
margin-left: 20px;
margin-top: 5px;
}
.massage{
color: #00ffff;
......
gassafetyprogress-web/src/utils/mapClass/yjmap.js 0 → 100644
View file @ 0cba0013
This diff is collapsed.
gassafetyprogress-web/src/views/emergency/index.vue
View file @ 0cba0013
......@@ -31,30 +31,62 @@
/>
<PipeColor />
<!-- 底部按钮 -->
<div class="home-div">
<img src="@/assets/mapinages/bottombanner.png" alt="" style="" />
<div class="listingsSty fangy">
<div
@click="allCompany"
:class="selarr.length == companyLength ? 'active' : ''"
class="firsty"
>
全部
</div>
<div
class="firsty"
:class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"
v-for="(item, index) in typeList"
:key="item.val"
@click="sel(index, item)"
>
{{ item.name }}
</div>
</div>
</div>
<!--<div class="home-div">-->
<!--<img src="@/assets/mapinages/bottombanner.png" alt="" style="" />-->
<!--<div class="listingsSty fangy">-->
<!--<div-->
<!--@click="allCompany"-->
<!--:class="selarr.length == companyLength ? 'active' : ''"-->
<!--class="firsty"-->
<!--&gt;-->
<!--全部-->
<!--</div>-->
<!--<div-->
<!--class="firsty"-->
<!--:class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"-->
<!--v-for="(item, index) in typeList"-->
<!--:key="item.val"-->
<!--@click="sel(index, item)"-->
<!--&gt;-->
<!--{{ item.name }}-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class="event_div" @click="handleAdd">
事件接报
</div>
<!--<div class="mouseToolBtn">-->
<!--<button class="serBtn" @click="openDraw()" id="mouseToolBtn">画图</button>-->
<!--</div>-->
<!--<div class="delTu" id="delTu">-->
<!--&lt;!&ndash;<input name="in" type="radio" @click="delRadioLays()"/>&ndash;&gt;-->
<!--</div>-->
<!--<div class="toolBtn" :style="display">-->
<!--<div class="el-form-div" style="height: 30px;background: black">-->
<!--<div class="detail-title">标绘工具</div>-->
<!--<div style="cursor: pointer;" >-->
<!--<img style="width: 20px;height: 20px;margin-top: 5px;" @click="closeDraw" src="@/assets/mapImages/closeBtn.png" alt="" />-->
<!--</div>-->
<!--</div>-->
<!--<div class="el-form-div">-->
<!--<div style="width: 50%">-->
<!--<div class="tool-div" @click="drawMark()">标记</div>-->
<!--<div class="tool-div" @click="drawCircle()">圆形 </div>-->
<!--<div class="tool-div" @click="drawRule()">测距</div>-->
<!--<div class="tool-div" @click="editDraw()">编辑图形</div>-->
<!--<div class="tool-div" @click="map.delOverlays()">删除图形</div>-->
<!--<div class="tool-div" @click="mouseToolDrawClear">清除所有</div>-->
<!--</div>-->
<!--<div style="width: 50%">-->
<!--<div class="tool-div" @click="drawPolyline()">线段</div>-->
<!--<div class="tool-div" @click="drawPolygon()">多边形</div>-->
<!--<div class="tool-div" @click="drawMeasureArea()">面积</div>-->
<!--<div class="tool-div" @click="endEditDraw()">关闭编辑</div>-->
<!--<div class="tool-div" @click="map.endOverlays()">结束绘制</div>-->
<!--<div class="tool-div">保存图片</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!-- 设备按钮 -->
<div class="typelist-div">
<div
......@@ -74,7 +106,7 @@
<div class="typelist-div2">
<div
class="list"
style="width: 146px;height: 40px;line-height: 30px;margin-top: 1px;"
style="width: 146px;height: 35px;line-height: 35px;"
v-for="(item, index) in arr2"
:key="index"
:class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
......@@ -82,7 +114,7 @@
>
<img
:src="item.imgurl"
style="margin-top: 3px; float: left; margin-right: 3px;width: 26px"
style="margin-top: 6px;float: left; margin-right: 3px;width: 18px;height: 18px;margin-left: 10px;"
/>
{{ item.name }}
</div>
......@@ -200,7 +232,7 @@
<script>
// @ is an alias to /src
import { EditorMap } from "@/utils/mapClass/map";
import { EditorMap } from "@/utils/mapClass/yjmap";
import { mapGetters, mapActions } from "vuex";
import { listDetectorInfo } from "@/api/detector/detectorInfo";
import { detectorUserList } from "@/api/detector/detectorUser";
......@@ -292,6 +324,7 @@ export default {
name: "中燃韵科",
},
],
display:"display:none",
// 2:"调压箱",
// 3:"阀门",
// 4:"厂站",
......@@ -381,6 +414,8 @@ export default {
// 报警轮询timer
alarmTimer: null,
//绘制工具
markNum:0,
// 表单参数
form: {},
// 表单校验
......@@ -444,7 +479,7 @@ export default {
"map",
{
center: path,
mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
//mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
zoom: 14.5,
},
this
......@@ -782,17 +817,45 @@ export default {
this.nowweek = `${weekArr[week]}`;
this.nowDate = `${year}年${month}月${day}`;
},
// 地图绘制
// drawMark() {
// this.map.mouseAddMarker();
// },
// drawPolyline() {
// this.map.mouseAddPipeline("Polyline");
// },
// drawCircle() {
// this.map.mouseAddCircle("Circle");
// },
// drawPolygon() {
// this.map.mouseAddPolygon("Polygon");
// },
// drawRule() {
// this.map.mouseAddRule();
// },
// drawMeasureArea() {
// this.map.mouseAddMeasureArea();
// },
// mouseToolDrawClear(){
// this.map.mousetoolClose(true);
// },
// editDraw(){
// this.map.editOverlays();
// },
// endEditDraw(){
// this.map.endEditOverlays();
// },
// delRadioLays(num){
// console.log("---"+num)
// },
// openDraw(){
// this.display="";
// },
// closeDraw(){
// this.display="display:none";
// }
},
// 销毁定时器
beforeDestroy() {
if (this.formatDate) {
clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
}
// 报警
if (this.alarmTimer) {
clearInterval(this.alarmTimer);
}
},
};
</script>
<style lang="scss" scoped>
......@@ -844,11 +907,11 @@ export default {
}
.rightbar {
width: 470px;
height: 90%;
height: 92%;
position: fixed;
top: 50px;
right: 0;
background: #112238;
background: #ffffff;
}
.home-div {
width: 50%;
......@@ -964,22 +1027,55 @@ export default {
z-index: 9999;
float: left;
margin-left: 15px;
color: #fff;
color: #000000;
line-height: auto;
text-align: center;
background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
background: #ffffff;
box-shadow: inset 0px 1px 2px 1px #ffffff;
font-size: 14px;
padding: 5px 7px;
cursor: pointer;
}
.list.active {
background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
color: #2ee7e7;
background: #ffffff;
box-shadow: inset 0px 1px 2px 1px #ffffff;
color: #1890ff;
font-size: 14px;
}
.mouseToolBtn {
position: fixed;
margin-left: 100px;
z-index: 999;
bottom: 50px;
}
.delTu{
position: fixed;
margin-left: 30%;
margin-top: 300px;
z-index: 999;
height: 150px;
width: 450px;
background: #1c84c6;
}
.serBtn {
background: #fff;
width: 50px;
height: 50px;
text-align: center;
outline: none;
border-radius: 5px;
border: none;
cursor: pointer;
}
.toolBtn{
background: white;
width: 160px;
position: fixed;
margin-left: 100px;
z-index: 999;
bottom: 100px;
height: 200px;
}
.el-form-div{
display:flex;
flex-direction:row;
......@@ -987,6 +1083,25 @@ export default {
justify-content:flex-start;
width: 100%;
}
.detail-title{
height: 30px;
color: white;
line-height: 30px;
width: 130px;
font-size: 15px;
margin-left: 5px;
}
.tool-div{
border: 1px solid #cccccc;
width: 80%;
margin-left: 10%;
text-align: center;
margin-top: 4px;
font-size: 14px;
height: 24px;
line-height: 24px;
cursor:pointer;
}
::v-deep .el-dialog:not(.is-fullscreen) {
margin-top: 13vh !important;
}
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Cg.vue 0 → 100644
View file @ 0cba0013
<!--
* @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 @ 0cba0013
<!--
* @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 @ 0cba0013
<!--
* @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 @ 0cba0013
<!--
* @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 @ 0cba0013
<!--
* @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 @ 0cba0013
<!--
* @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 @ 0cba0013
<!--
* @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 @ 0cba0013
<!--
* @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 @ 0cba0013
<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 @ 0cba0013
<!--
* @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>>
gassafetyprogress-web/src/views/regulation/station/index.vue
View file @ 0cba0013
......@@ -84,7 +84,7 @@
<el-table v-loading="loading" :data="stationList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="照片" align="center" >
<template scope="List">
<template slot-scope="List">
<img :src="List.row.pictureAddress" width="100px">
</template>
</el-table-column>
......
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