Skip to content

P
pingshan-ranqi
Commit 3d72ab05 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

Merge branch 'develop_jzl'

parents 92ed692f 2bceaa79
Hide whitespace changes
Inline Side-by-side
Showing with 324 additions and 117 deletions
gassafety-web/src/api/device/detector.js
View file @ 3d72ab05
......@@ -13,8 +13,12 @@ export function detectorUserList(query) {
// 查询报警器用户下的报警器
export function getdetectorInfoList(query) {
return request({
url: '/detector/detectorInfo/detectorInfoList',
url: '/detector/detectorInfo/list',
method: 'get',
params: query
params: {
pageNum:1,
pageSize:20,
...query
}
})
}
gassafety-web/src/api/enterprise/info.js
View file @ 3d72ab05
......@@ -60,3 +60,13 @@ export function detectorUserList(query) {
params: query
})
}
// 右上角的综合列表
export function alarmData(query) {
return request({
url: '/detector/detectorInfo/getAlarmData',
method: 'get',
params: query
})
}
gassafety-web/src/assets/styles/gassafety.scss
View file @ 3d72ab05
......@@ -211,6 +211,84 @@
}
}
}
// gis地图右上角的滚动条隐藏
.rightPic {
.el-table {
.el-table__body-wrapper {
overflow-y: hidden;
overflow-x: hidden;
}
}
}
// center下的分页
.center {
.el-pagination {
button:disabled {
background-color: rgba(0, 0, 0, 0);
}
.el-pager li {
background-color: rgba(0, 0, 0, 0);
color: #fff;
cursor: pointer;
&.active {
color: #1890ff;
}
&:hover {
color: #7bf8f4;
}
}
.btn-prev,
.el-pagination .btn-next {
background-color: rgba(0, 0, 0, 0);
}
}
.el-pagination .btn-prev,
.el-pagination .btn-next {
background-color: rgba(0, 0, 0, 0);
}
// 禁用状态的左箭头
button[disabled] {
&:hover {
.el-icon-arrow-left,
.el-icon-arrow-right {
&::before {
color: #909399 !important;
}
}
}
.el-icon-arrow-left,
.el-icon-arrow-right {
&::before {
color: #909399;
}
}
}
button {
&:hover {
.el-icon-arrow-left,
.el-icon-arrow-right {
&::before {
color: #7bf8f4 !important;
}
}
}
}
// 平常状态下的
.el-icon-arrow-left,
.el-icon-arrow-right {
&::before {
color: #ffffff;
}
}
.el-pagination__jump{
color:#fff;
}
.el-input__inner{
background-color:rgba(0,0,0,0);
border-color:#1890ff;
color: #fff;
}
}
// gis地图里抽屉的搜索样式
.search-input {
.el-input__inner {
......@@ -416,7 +494,7 @@
// gis地图内的bottom列表，如果隐藏在出现会有一个bug，这样可以解决
.b {
&>.el-bottom {
& > .el-bottom {
.el-table__body-wrapper {
height: 140px !important;
}
......@@ -425,14 +503,14 @@
// center
.center {
.el-bottom {
.el-bottom {
.el-table__body-wrapper {
max-height: 600px !important;
}
}
}
.rightPic{
.rightPic {
.el-bottom {
.el-table__body-wrapper {
max-height: 250px !important;
......
gassafety-web/src/components/PopWindowGis/detectorInfoWindow.vue
View file @ 3d72ab05
......@@ -11,7 +11,7 @@
</div>
<div class="table-top">
<div>
联系人: <span v-un-content>{{ data.username }}</span>
联系人: <span v-un-content>{{ data.linkMan }}</span>
</div>
<div>
联系电话：<span v-un-content>{{ data.phone }}</span>
......@@ -26,7 +26,7 @@
</div>
<div class="table-list">
<div class="thead">
<div class="theadtop">设备类型</div>
<div class="theadtop">用户类型</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
......@@ -35,7 +35,7 @@
<div class="last">报警中</div>
</div>
<div class="tbody">
<div class="theadtop">{{ userTypeName[data.userType] }}</div>
<div class="theadtop">{{ this.userTypeName[data.userType] }}</div>
<div>{{ data.detectorCount }}</div>
<div>{{ data.onLineNum }}</div>
<div>{{ data.offLineNum }}</div>
......@@ -65,7 +65,7 @@ export default {
},
data() {
return {
userTypeName: ["家用报警器", "商用报警器", "工业报警器"],
userTypeName: ['',"家用报警器", "商用报警器", "工业报警器"],
};
},
mounted() {
......
gassafety-web/src/directive/permission/index.js
View file @ 3d72ab05
import hasRole from './hasRole'
import hasPermi from './hasPermi'
import unContent from './unContent'
import loadMore from './loadMore'
const install = function(Vue) {
Vue.directive('hasRole', hasRole)
Vue.directive('hasPermi', hasPermi)
Vue.directive('un-content', unContent)
Vue.directive('loadmore', loadMore)
}
if (window.Vue) {
......
gassafety-web/src/directive/permission/loadMore.js 0 → 100644
View file @ 3d72ab05
export default {
bind(el, binding) {
const selectWrap = el.querySelector(".el-table__body-wrapper");
selectWrap.addEventListener("scroll", function() {
let sign = 10;
const scrollDistance =
this.scrollHeight - this.scrollTop - this.clientHeight;
console.log("binding.value", binding.value);
if (scrollDistance <= sign) {
binding.value();
}
});
}
};
gassafety-web/src/utils/gaodeMapView.js
View file @ 3d72ab05
......@@ -387,6 +387,15 @@ class gaodeMap {
// 报警器用户下的独立报警器
if (DEVICE_TYPE.DETECTOR_ONLY == markerType) {
// 如果报警器用户下的单一报警器
let oldLng = [];
// 先记录当前的this.detcetorMarker
if (this.detcetorMarker) {
oldLng = [
this.detcetorMarker.data.longitude,
this.detcetorMarker.data.latitude
];
}
// 如果this.detcetorMarker有值就删了
this.clearDetectorOnlyOpen();
......@@ -402,10 +411,16 @@ class gaodeMap {
this.detectorOpenInfoWindow && this.detectorOpenInfoWindow.close();
this.detectorOnlyOpenInfowindow &&
this.detectorOnlyOpenInfowindow.close();
// 回调，先移动，后展示infowindow
this.handleInfoWindowOpenFunc = () => {
// 因为报警器会出现同一位置的情况，如果是同一个位置，直接显示infoWindow，
// 如果不是同一位置，移动完了在显示
if (oldLng[0] == data.longitude && oldLng[1] == data.latitude) {
this.detectorOnlyOpen(e);
};
} else {
// 回调，先移动，后展示infowindow
this.handleInfoWindowOpenFunc = () => {
this.detectorOnlyOpen(e);
};
}
this.panTo([data.longitude, data.latitude - this.view.lntPosition]);
marker.on("mousedown", this.detectorOnlyOpen);
......@@ -1497,16 +1512,19 @@ class gaodeMap {
});
}
// 报警器的显示隐藏
detctorMakeShow(userId, bool) {
detctorMakeShow(userType, bool) {
this.detectors
.filter(item => {
return item.getExtData().userId == userId;
return item.getExtData().userType == userType;
})
.forEach(item => {
?.forEach(item => {
bool ? item.show() : item.hide();
// 如果独立报警器存在，且属于自身
if (this.detcetorMarker &&this.detcetorMarker.data.detectorId==item.data.userId) {
bool?this.detcetorMarker.show():this.detcetorMarker.hide();
// 如果有报警器，就让报警器一起隐藏
if (
this.detcetorMarker &&
this.detcetorMarker.data.userId == item.data.userId
) {
bool ? this.detcetorMarker.show() : this.detcetorMarker.hide();
}
});
}
......
gassafety-web/src/views/enterprise/mapView/components/Center.vue
View file @ 3d72ab05
......@@ -25,6 +25,9 @@
<!-- :height="tableHeight" -->
<el-table-column prop="detectorName" label="设备名称" width="100">
<template slot-scope="scope">
<div v-un-content>{{ scope.row.detectorName }}</div>
</template>
</el-table-column>
<el-table-column prop="detectorCode" label="设备编号" width="200">
</el-table-column>
......@@ -54,6 +57,16 @@
</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"
>
</el-pagination>
</div>
</div>
</div>
</div>
......@@ -72,6 +85,15 @@ export default {
show: {
type: Boolean,
},
userId: {
type: [Number,String],
},
total:{
type:Number,
},
pageSize:{
type:Number,
}
},
data() {
return {
......@@ -98,16 +120,22 @@ export default {
},
watch: {
// 当组件显示的时候
show(bol) {
console.log(bol);
if (bol) {
console.log(this.detcetorList);
this.tableData = [...this.detcetorList];
}
detcetorList(newData) {
// console.log(bol);
// if (bol) {
console.log(newData);
this.tableData = [...newData];
// }
},
},
methods: {
handleSizeChange(val) {
console.log(val);
},
handleCurrentChangvale(val) {
this.$parent.getDetectorInfoList({userId:this.userId,pageNum:val,pageSize:this.pageSize})
},
close() {
this.fade = "fade";
this.$parent.centerShow = false;
......@@ -243,6 +271,7 @@ export default {
font-weight: 400;
.title-wrapper {
width: 100%;
height: 30px;
display: flex;
justify-content: space-between;
background: #1890ff;
......
gassafety-web/src/views/enterprise/mapView/components/RightPic.vue
View file @ 3d72ab05
<template>
<div class="wrapper rightPic">
<div class="math">
<div><span>2012</span>报警设备</div>
<div><span>2022</span>在线设备</div>
<div><span>2052</span>离线设备</div>
<div>
<span>{{ rightPicData.alarmNum }}</span
>报警总数
</div>
<div>
<span>{{ rightPicData.onlineNum }}</span
>在线设备
</div>
<div>
<span>{{ rightPicData.offlineNum }}</span
>离线设备
</div>
</div>
<div class="left">
<div class="bottom right-bottom-data-left">
<div class="bottom right-bottom-data-left" @mouseover="tableEnter" @mouseout="timerAni">
<el-table
size="mini"
:data="tableData"
style="width: 100%"
:height="tableHeight"
class="el-bottom"
ref="table"
>
<el-table-column prop="deviceCode" label="编号" width="80">
<el-table-column prop="unitName" label="所在单位" width="">
<template slot-scope="scope">
<div class="ddd" :title="scope.row.unitName">
{{ scope.row.unitName }}
</div>
</template>
</el-table-column>
<el-table-column prop="deviceName" label="名称" width="">
<el-table-column prop="detectorType" label="设备类型" width="">
<template slot-scope="scope">
<div class="ddd" :title="scope.row.detectorType">
{{ scope.row.detectorType }}
</div>
</template>
</el-table-column>
<el-table-column prop="province" label="报警类型" width="">
<el-table-column prop="statusName" label="预警信息" width="">
<template slot-scope="scope">
<div class="ddd" :title="scope.row.statusName">
{{ scope.row.statusName }}
</div>
</template>
</el-table-column>
<el-table-column prop="city" label="报警开始时间" width="180">
<el-table-column prop="alarmTime" label="预警时间啊" width="180">
</el-table-column>
<el-table-column prop="address" label="报警内容" width="">
<el-table-column prop="handledStatus" label="状态" width="">
<template slot-scope="scope">
<div class="ddd" :title="scope.row.handledStatus">
{{ scope.row.handledStatus }}
</div>
</template>
</el-table-column>
</el-table>
</div>
......@@ -35,7 +65,11 @@
import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
export default {
props: {},
props: {
rightPicData: {
type: Object,
},
},
data() {
return {
timer: null,
......@@ -43,74 +77,66 @@ export default {
tableHeight: 202,
tableData: [
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
unitName: "ZhC-11",
detectorType: "流量计",
statusName: "压力异常",
alarmTime: "2021-02-02 16-00-00",
handledStatus: "上海市普陀区金沙江路",
},
],
scrollHeight: 0,
timer: null,
};
},
created() {},
watch: {
rightPicData(newData) {
console.log("newData", newData);
// if (newData.pageData.length > 0) {
this.tableData = [...newData.pageData];
// }
// this.tableData = [...newData.pageData];
// 列表容器
this.$nextTick(() => {
this.getScrollHeight();
});
},
},
methods: {},
mounted() {},
methods: {
getScrollHeight() {
const selectWrap = this.$refs.table.$el.querySelector(
".el-table__body-wrapper"
);
// 列表
const select = this.$refs.table.$el
.querySelector(".el-table__body-wrapper")
.querySelector(".el-table__body");
// 列表容器高度
const { height: heightWrapper } = selectWrap.getBoundingClientRect();
// 列表高度
const { height: heightSelect } = select.getBoundingClientRect();
// 滚动条的高度 = 列表高度-列表容器高度
this.scrollHeight = heightSelect - heightWrapper;
this.timerAni();
},
timerAni() {
const selectWrap = this.$refs.table.$el.querySelector(
".el-table__body-wrapper"
);
this.timer = setInterval(() => {
if (selectWrap.scrollTop == this.scrollHeight) {
selectWrap.scrollTop = 1;
}
selectWrap.scrollTop += 1;
}, 100);
},
tableEnter() {
console.log(123);
clearInterval(this.timer);
},
},
};
</script>
......@@ -133,20 +159,20 @@ export default {
.math {
width: 520px;
position: absolute;
top:-40px;
left:0px;
top: -40px;
left: 0px;
display: flex;
justify-content: space-between;
&>div{
>span{
color:aqua;
& > div {
> span {
color: aqua;
}
font-size: 14px;
color:#fff;
color: #fff;
text-align: center;
line-height: 30px;
width: 108px;
height:30px;
height: 30px;
background-image: url(../../../../assets/images/bg/bg.png);
}
}
......@@ -271,5 +297,9 @@ export default {
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.el-table__body-wrappe {
overflow-x: hidden !important;
overflow-y: hidden !important;
}
}
</style>
\ No newline at end of file
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 3d72ab05
......@@ -81,7 +81,7 @@
:list="rightBototmData"
/>
<!-- 右边 -->
<RightPic v-show="RightPicShow" ref="RightPic" />
<RightPic :rightPicData="rightPicData" v-show="RightPicShow" ref="RightPic"/>
<!-- 报警工单 -->
<CreateWork
ref="CreateWork"
......@@ -95,7 +95,7 @@
@callback="CreateWorkTroubleCallBack"
/>
<!-- 报警用户的报警器列表 -->
<Center :show="centerShow" ref="center" :detcetorList="detcetorList" />
<Center :show="centerShow" ref="center" :detcetorList="detcetorList" :userId="centerUserId" :total="centerTotal" :pageSize="20"/>
<!-- 当报警列表隐藏时，这个显示,点击就让Center回来 -->
<div
@click="
......@@ -347,8 +347,8 @@
<div class="list-wrapper">
<div class="thead">
<div class="no"></div>
<div class="code">设备名称</div>
<div class="name">设备地址</div>
<div class="code">用户名称</div>
<div class="name">用户地址</div>
</div>
<div
class="deviceList"
......@@ -359,7 +359,7 @@
>
<div class="no">{{ iten.no + 1 }}</div>
<div :title="iten.deviceName" class="code">
{{ iten.deviceName + `999` }}
{{ iten.deviceName }}
</div>
<div :title="iten.deviceAddress" class="name">
{{ iten.deviceAddress ? iten.deviceAddress : "-" }}
......@@ -426,7 +426,7 @@ import Center from "./components/Center.vue";
import CreateWork from "./components/CreateWork.vue";
import CreateWorkTrouble from "./components/CreateWorkTrouble.vue";
import { getInspectorLocations } from "@/api/inspectorLocation/location";
import { listInfo } from "@/api/enterprise/info";
import { listInfo, alarmData } from "@/api/enterprise/info";
import { lineColor } from "@/utils/mapCommon.js";
export default {
......@@ -543,7 +543,7 @@ export default {
type: "8",
value: 11,
icon: "icon-jiayong",
label: "家用报警器",
label: "家用报警器用户",
nowPage: 1,
maxPage: 99,
list: [],
......@@ -552,7 +552,7 @@ export default {
type: "9",
value: 12,
icon: "icon-shangye",
label: "商用报警器",
label: "商用报警器用户",
nowPage: 1,
maxPage: 99,
list: [],
......@@ -561,7 +561,7 @@ export default {
type: "10",
value: 13,
icon: "icon-gongye",
label: "工业报警器",
label: "工业报警器用户",
nowPage: 1,
maxPage: 99,
list: [],
......@@ -598,8 +598,15 @@ export default {
// 右下角的圆
circleShow: false,
circleNum: 0,
// 报警列表的数据
detcetorList: [],
// 报警列表的总数据，分页用的
centerTotal:0,
// 这是center列表翻页时候用的userId
centerUserId:99,
lntPosition: 0,
//右上角数据
rightPicData:{},
};
},
created() {
......@@ -616,6 +623,8 @@ export default {
// 公司列表
this.getCompList();
this.initMap();
// 右上角数据展示
this.getAlarmData();
// });
},
watch: {
......@@ -841,14 +850,27 @@ export default {
return getdetectorInfoList(queryParams).then((res) => {
console.log("queryParams", res);
if (res.code == 200) {
this.detcetorList = res.data;
this.$refs.center.fade="fade";
this.detcetorList = res.rows;
this.centerUserId = queryParams.userId;
// 总数据
this.centerTotal = res.total;
this.$refs.center.fade = "fade";
this.centerShow = true;
// 传递回去
return res.code;
}
});
},
// 右上角列表数据展示
getAlarmData(queryParams) {
return alarmData(queryParams).then((res) => {
if (res.code == 200) {
console.log('右上角数据',res)
this.rightPicData = res.data;
return res.code;
}
});
},
// 获取报警资源，并且改变图上的状态
getSelectAlarmDevice() {
return selectAlarmDevice().then((res) => {
......@@ -2618,7 +2640,7 @@ input[type="radio"] {
.diviceNum {
color: #fff;
position: absolute;
left: 180px;
left: 210px;
top: 12px;
}
}
......
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