Commit 3aa05ede authored by 纪泽龙's avatar 纪泽龙

增加阀门,调压箱,场站的感知设备功能

parent 5a70583d
/*
* @Author: your name
* @Date: 2022-02-23 15:28:07
* @LastEditTime: 2022-03-04 17:16:53
* @LastEditTime: 2022-03-08 14:52:13
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /newDev/gassafety-progress/gassafetyprogress-web/src/api/bigWindow/getdevice.js
......@@ -70,6 +70,21 @@ export function getCzDevice(query) {
params: query
})
}
// 设备id :devId 类型 relationDeviceType 1调压箱/阀门井 2场站
export function getTcqDevice(query) {
return request({
url: '/pipe/pipe/selectSensingDevice',
method: 'get',
params: {
pageNum: 1,
pageSize: 20,
...query,
},
})
}
// 监控
export function getVideo(query) {
return request({
......
<!--
* @Author: your name
* @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-03-07 18:09:02
* @LastEditTime: 2022-03-08 15:23:40
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
......@@ -167,7 +167,14 @@ export default {
this.mapClass.infowindowClose();
},
btnClick() {
this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
const title = this.deviceData.deviceName
? this.deviceData.deviceName
: this.deviceData.stationName;
this.vueRoot.getTcqDevice(
{ devId: this.deviceData.siteStationId, relationDeviceType: 2 },
title
);
},
myHttp() {
getCzDevice({ deviceId: this.deviceData.siteStationId }).then((res) => {
......
<!--
* @Author: your name
* @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-03-07 18:06:31
* @LastEditTime: 2022-03-08 15:22:20
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
......@@ -90,8 +90,8 @@
</template>
</div>
<div class="btn">
<!-- <div @click="btnClick">感知设备</div> -->
<div class="btn" v-if="list.length>0">
<div @click="btnClick">感知设备</div>
</div>
</div>
</template>
......@@ -167,7 +167,15 @@ export default {
this.mapClass.infowindowClose();
},
btnClick() {
this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
// this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
const title = this.deviceData.deviceName
? this.deviceData.deviceName
: this.deviceData.stationName;
this.vueRoot.getTcqDevice(
{ devId: this.deviceData.deviceId, relationDeviceType: 1 },
title
);
},
myHttp() {
console.log(this.deviceData.iconType);
......
<template>
<transition>
<div v-show="show" class="wrapper myCenter">
<div class="left">
<div class="title-wrapper">
<div class="title">{{ title }}报警器列表</div>
<div class="close" @click="close">
<img src="@/assets/mapImages/closeBtn.png" alt="" />
</div>
</div>
<div class="bottom right-bottom-data-left">
<el-table
size="mini"
:data="tableData"
style="width: 100%"
class="el-bottom"
:key="Math.random()"
>
<!-- :height="tableHeight" -->
<el-table-column prop="deviceCode" label="设备编号" width="180">
<template slot-scope="scope">
<div :title="scope.row.deviceCode" class="ddd" v-unValue>
{{ scope.row.deviceCode }}
</div>
</template>
</el-table-column>
<el-table-column prop="deviceName" label="设备名称" width="150">
<template slot-scope="scope">
<div :title="scope.row.deviceName" class="ddd" v-unValue>
{{ scope.row.deviceName }}
</div>
</template>
</el-table-column>
<el-table-column prop="detectionMedium" label="监测介质" width="">
<template slot-scope="scope">
<div v-unValue>{{ scope.row.detectionMedium }}</div>
</template>
</el-table-column>
<el-table-column prop="linkman" label="联系人" width="100">
<template slot-scope="scope">
<div v-unValue>{{ scope.row.linkman }}</div>
</template>
</el-table-column>
<el-table-column prop="phone" label="联系电话" width="">
</el-table-column>
<el-table-column prop="detectorStatus" label="设备状态" width="100">
<template slot-scope="scope">
<div v-unValue>{{ detectorStatusList[scope.row.detectorStatus] }}</div>
</template>
</el-table-column>
<el-table-column prop="createTime" label="预警时间" width="180">
<template slot-scope="scope">
<div v-unValue>{{ scope.row.createTime }}</div>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination
@current-change="handleCurrentChangvale"
:page-size="pageSize"
layout="prev, pager, next, jumper"
:total="total"
:hide-on-single-page="total <= pageSize"
:key="total + '' + pageSize"
>
</el-pagination>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
// import Velocity from "velocity-animate";
// import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
import { listDetectorInfo } from "@/api/detector/detectorInfo";
export default {
props: {
detcetorList: {
type: Array,
default: () => [],
},
show: {
type: Boolean,
},
title: {
type: String,
},
userId: {
type: [Number, String],
},
total: {
type: Number,
},
pageSize: {
type: Number,
},
},
data() {
return {
// 动画效果的切换
// tableHeight: 600,
tableData: [
// {
// deviceCode: "2016-05-05",
// name: "王小虎",
// province: "上海",
// city: "普陀区",
// address: "上海市普陀区金沙江路",
// },
],
detectorStatusList:{
"0":"在线",
"1":"离线",
}
};
},
created() {
console.log("list", this.detcetorList);
// this.getList();
},
watch: {
// 当组件显示的时候
detcetorList(newData) {
// console.log(bol);
// if (bol) {
console.log(newData);
this.tableData = [...newData];
// }
},
},
methods: {
handleSizeChange(val) {
console.log(val);
},
handleCurrentChangvale(val) {
this.$parent.getTcqDevice(
{
devId: this.userId,
pageNum: val,
pageSize: this.pageSize,
},
this.title
);
},
close() {
// this.fade = "fade";
this.$parent.otherCenterShow = false;
},
},
};
</script>
<style lang="scss" scoped>
.wrapper {
// width: 978px;
max-height: 600px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -500px;
// background-color: #fff;
display: flex;
justify-content: space-between;
z-index: 9999;
& > div {
}
.left {
// width: 100px;
max-height: 598px;
margin-right: 12px;
// box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
// background-color: #fff;
// color: #fff;
font-size: 14px;
font-weight: 400;
.title-wrapper {
width: 100%;
height: 30px;
display: flex;
justify-content: space-between;
background: #1890ff;
padding: 5px;
.title {
width: 100%;
color: #fff;
text-align: center;
}
.close {
box-sizing: border-box;
padding-top: 2px;
padding-right: 5px;
cursor: pointer;
}
}
.el-table__body-wrappe {
height: 140px !important;
}
.top {
height: 19px;
// background-color: #053b6a;
color: #fff;
// line-height: 32px;
// padding-left: 12px;
position: relative;
.title {
position: absolute;
left: 50%;
margin-left: -92px;
top: -5px;
}
.repeat {
position: absolute;
top: -5px;
right: 160px;
color: #fff;
cursor: pointer;
&:hover {
color: #2788ea;
}
}
.repeat2 {
position: absolute;
right: 206px;
color: #67c23a;
}
.more {
position: absolute;
right: 38px;
top: -5px;
color: #fff;
float: right;
margin-right: 20px;
cursor: pointer;
&:hover {
color: #2788ea;
}
}
}
.bottom {
width: 1000px;
margin: 0 auto;
position: relative;
}
}
.right {
width: 740px;
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
align-content: flex-start;
// margin-top: 7px;
& > .right-content {
background-color: #fff;
width: 238px;
height: 82px;
margin-bottom: 29px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
margin-right: 10px;
display: flex;
&.three {
margin-right: 0px;
}
// align-items: center;
.text-icon {
line-height: 82px;
padding-left: 22px;
margin-right: 22px;
i {
color: #053b6a;
font-size: 60px;
}
}
.text {
font-size: 14px;
padding-top: 16px;
.top {
color: #000;
margin-bottom: 10px;
font-weight: 600;
}
.bottom {
color: #2788ea;
}
}
}
}
.iconfont {
cursor: pointer;
}
// 单独调整下最后一个icon的大小
.iconFontSize {
font-size: 50px !important;
}
}
</style>
\ No newline at end of file
......@@ -143,7 +143,7 @@ export default {
},
close() {
// this.fade = "fade";
this.$parent.centerShow = false;
this.$parent.userCenterShow = false;
},
},
};
......
<!--
* @Author: your name
* @Date: 2022-01-11 13:44:17
* @LastEditTime: 2022-03-07 15:40:59
* @LastEditTime: 2022-03-08 15:19:41
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/Home.vue
......@@ -15,13 +15,22 @@
<Center :show="show" :centerData="centerData" />
<UserCenter
:title="centerTitle"
:show="centerShow"
:show="userCenterShow"
ref="userCenter"
:detcetorList="detcetorList"
:userId="centerUserId"
:total="centerTotal"
:pageSize="20"
/>
<OtherCenter
:title="centerTitle"
:show="otherCenterShow"
ref="otherCenter"
:detcetorList="detcetorList"
:userId="centerUserId"
:total="centerTotal"
:pageSize="20"
/>
<PipeColor />
<!-- 底部按钮 -->
<div class="home-div">
......@@ -157,6 +166,7 @@ import {
getUser,
getEnterprise,
userAlarm,
getTcqDevice
} from "@/api/bigWindow/getDevice";
import Line from "@/components/bigWindow/Line.vue";
import VideoView from "@/components/bigWindow/VideoView.vue";
......@@ -165,6 +175,7 @@ import Cz from "@/components/bigWindow/Cz.vue";
import User from "@/components/bigWindow/User.vue";
import Center from "@/components/bigWindow/Center.vue";
import UserCenter from "@/components/bigWindow/UserCenter.vue";
import OtherCenter from "@/components/bigWindow/OtherCenter.vue";
import Company from "@/components/bigWindow/Company.vue";
import PipeColor from "@/components/bigWindow/PipeColor.vue";
......@@ -178,6 +189,7 @@ export default {
rightBar,
Center,
UserCenter,
OtherCenter,
PipeColor,
},
data() {
......@@ -250,9 +262,13 @@ export default {
detcetorList: [],
centerUserId: null,
centerTotal: null,
centerShow: false,
userCenterShow: false,
centerTitle: "",
// 其他设备的center数据
// 除了这个值,用来显示隐藏,其他值与user共用
otherCenterShow:false,
// 报警轮询timer
alarmTimer: null,
};
......@@ -327,6 +343,7 @@ export default {
// console.log("查询报警");
}, alarmtime);
});
}
this.currentTime();
this.$refs.mychild.choice(this.selarr);
......@@ -460,13 +477,32 @@ export default {
// 总数据
this.centerTotal = res.total;
// this.$refs.userCenter.fade = "fade";
this.centerShow = true;
this.userCenterShow = true;
this.centerTitle = title;
// 传递回去
return res.code;
}
});
},
// 调压箱,阀门,场站睇下的设备
getTcqDevice(queryParams, title) {
console.log(queryParams);
return getTcqDevice(queryParams).then((res) => {
// console.log("queryParams", res);
console.log("resresresresreszzzzzzzzzzzzzzz",res)
this.detcetorList = res;
this.centerUserId = queryParams.devId;
// 总数据
this.centerTotal = res.length;
// this.$refs.userCenter.fade = "fade";
this.otherCenterShow = true;
this.centerTitle = title;
// 传递回去
return res.code;
});
},
currentTime() {
setInterval(() => {
this.formatDate();
......
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