Skip to content

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

右上角功能制作完成

parent c0fb9df5
Hide whitespace changes
Inline Side-by-side
Showing with 193 additions and 72 deletions
gassafety-web/src/api/enterprise/info.js
View file @ 0ac233fa
......@@ -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 @ 0ac233fa
......@@ -211,6 +211,15 @@
}
}
}
// gis地图右上角的滚动条隐藏
.rightPic {
.el-table {
.el-table__body-wrapper {
overflow-y: hidden;
overflow-x: hidden;
}
}
}
// gis地图里抽屉的搜索样式
.search-input {
.el-input__inner {
......@@ -416,7 +425,7 @@
// gis地图内的bottom列表，如果隐藏在出现会有一个bug，这样可以解决
.b {
&>.el-bottom {
& > .el-bottom {
.el-table__body-wrapper {
height: 140px !important;
}
......@@ -425,14 +434,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/directive/permission/index.js
View file @ 0ac233fa
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 @ 0ac233fa
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/views/enterprise/mapView/components/Center.vue
View file @ 0ac233fa
......@@ -243,6 +243,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 @ 0ac233fa
<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.totalNum }}</span
>报警总数
</div>
<div>
<span>{{ rightPicData.handledNum }}</span
>已处理
</div>
<div>
<span>{{ rightPicData.noHandeldNum }}</span
>未处理
</div>
</div>
<div class="left">
<div class="bottom right-bottom-data-left">
<el-table
......@@ -14,16 +23,37 @@
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,107 @@ 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: "上海市普陀区金沙江路",
unitName: "ZhC-11",
detectorType: "流量计",
statusName: "压力异常",
alarmTime: "2021-02-02 16-00-00",
handledStatus: "上海市普陀区金沙江路",
},
{
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: "上海市普陀区金沙江路",
},
{
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: "上海市普陀区金沙江路",
},
{
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: "上海市普陀区金沙江路",
},
{
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: "上海市普陀区金沙江路",
},
{
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: "上海市普陀区金沙江路",
},
{
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: "上海市普陀区金沙江路",
},
{
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() {
// this.tableData = this.rightPicData.pageData;
// 列表容器
this.getScrollHeight();
},
},
mounted() {},
methods: {},
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;
console.log(this.scrollHeight / this.tableData.length);
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);
},
},
};
</script>
......@@ -133,20 +200,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 +338,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 @ 0ac233fa
......@@ -81,7 +81,7 @@
:list="rightBototmData"
/>
<!-- 右边 -->
<RightPic v-show="RightPicShow" ref="RightPic" />
<RightPic :rightPicData="rightPicData" v-show="RightPicShow" ref="RightPic" l />
<!-- 报警工单 -->
<CreateWork
ref="CreateWork"
......@@ -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 {
......@@ -600,6 +600,8 @@ export default {
circleNum: 0,
detcetorList: [],
lntPosition: 0,
//右上角数据
rightPicData:{},
};
},
created() {
......@@ -616,6 +618,8 @@ export default {
// 公司列表
this.getCompList();
this.initMap();
// 右上角数据展示
this.getAlarmData();
// });
},
watch: {
......@@ -842,13 +846,23 @@ export default {
console.log("queryParams", res);
if (res.code == 200) {
this.detcetorList = res.data;
this.$refs.center.fade="fade";
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) => {
......
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