Skip to content

G
gassafety-progress
Commit b73df032 authored by yaqizhang's avatar yaqizhang
Browse files
Options

右上角列表

parent 0494ff84
Hide whitespace changes
Inline Side-by-side
Showing with 167 additions and 185 deletions
gassafetyprogress-web/src/components/bigWindow/rightBar.vue
View file @ b73df032
......@@ -12,7 +12,7 @@
<div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div>
</div>
</div>
<div class="divfen" style="width: 95%;height: 30%;margin-left: 35px;">
<div class="divfen" style="width: 95%;height: 30%;margin-left: 25px;">
<div class="left">
<div
class="bottom right-bottom-data-left"
......@@ -28,76 +28,43 @@
ref="table"
>
<el-table-column prop="unitName" label="所在单位" width="80">
<!-- <template slot-scope="scope">
<template slot-scope="scope">
<div class="ddd" :title="scope.row.unitName">
{{ scope.row.unitName }}
</div>
</template> -->
</template>
</el-table-column>
<el-table-column prop="detectorType" label="设备类型" width="80">
<!-- <template slot-scope="scope">
<template slot-scope="scope">
<div class="ddd" :title="scope.row.detectorType">
{{ scope.row.detectorType }}
</div>
</template> -->
</template>
</el-table-column>
<el-table-column prop="statusName" label="预警信息" width="80">
<!-- <template slot-scope="scope">
<template slot-scope="scope">
<div class="ddd" :title="scope.row.statusName">
{{ scope.row.statusName }}
</div>
</template> -->
</template>
</el-table-column>
<el-table-column prop="alarmTime" label="预警时间" width="120">
</el-table-column>
<el-table-column prop="handledStatus" label="状态" width="">
<!-- <template slot-scope="scope">
<template slot-scope="scope">
<div class="ddd" :title="scope.row.handledStatus">
{{ scope.row.handledStatus }}
</div>
</template> -->
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- <RightPic></RightPic> -->
<!-- <div class ="divall" style="width: 50%">
<div class="titleTex">属地巡查</div>
<div class="titleTex divfen" style="height: 50px;margin-top: 0px">
<div class="numdiv">{{datanow.xunchaAllOne1}}</div>
<div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllOne2}}</div>
<div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllOne3}}</div>
<div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllOne4}}</div>
</div>
<div id="main21" style="height: 50%;width: 100%"></div>
<div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;">
● 巡查次数:{{datanow.xunoneevery1}}
</div>
<div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #f0c41b">
● 发现问题数:{{datanow.xunoneevery2}}
</div>
</div>
<div style="width:14px;height: 100%;color: white;font-size: 13px;margin-top: 150px;">
<div style="width: 100%;height: 10px;background: #188df0"></div>
已整改
<div style="width: 100%;height: 10px;background: #f0c41b;margin-top: 15px;"></div>
未整改
</div>
<div class="divall" style="width: 50%" >
<div class="titleTex">行业检查</div>
<div class="titleTex divfen" style="height: 50px;margin-top: 0px">
<div class="numdiv">{{datanow.xunchaAllTwo1}}</div>
<div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllTwo2}}</div>
<div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllTwo3}}</div>
<div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllTwo4}}</div>
</div>
<div id="main22" style="height: 50%;width: 100%"></div>
<div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;">
● 巡查次数：{{datanow.xuntwoevery1}}
</div>
<div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #f0c41b">
● 发现问题数：{{datanow.xuntwoevery2}}
</div>
</div> -->
</div>
......@@ -224,7 +191,7 @@
<script>
// 引入基本模板
import * as echarts from 'echarts';
// import RightPic from "Rightpic.vue";
import { alarmData } from "@/api/detector/detectorInfo";
export default {
// components: {
// RightPic,
......@@ -232,29 +199,10 @@
data () {
return {
timer: null,
repeatFinshed: false,
tableHeight: 202,
tableData: [],
scrollHeight: 0,
tableData: [{
unitName: '2016-05-02',
detectorType: '王小虎',
statusName: '上海市普陀区金沙江路 1518 弄',
alarmTime: '王小虎',
handledStatus: '王小虎',
}, {
unitName: '2016-05-02',
detectorType: '王小虎',
statusName: '上海市普陀区金沙江路 1518 弄',
alarmTime: '王小虎',
handledStatus: '王小虎',
},{
unitName: '2016-05-02',
detectorType: '王小虎',
statusName: '上海市普陀区金沙江路 1518 弄',
alarmTime: '王小虎',
handledStatus: '王小虎',
}],
repeatFinshed: false,
tableHeight: 230,
tableData: [],
scrollHeight: 0,
dataall:{
xunchaAllOne1: 1,
xunchaAllOne2: 3,
......@@ -455,66 +403,91 @@
};
},
mounted(){
this.datanow = this.dataall;
this.drawLine(this.datanow);
this.drawLine2(this.datanow);
this.drawLine3(this.datanow);
this.getScrollHeight();
// this.$nextTick(()=>{
// this.getScrollHeight();
// })
this.getAlarm();
// this.datanow = this.dataall;
// this.drawLine(this.datanow);
// this.drawLine2(this.datanow);
this.drawLine3();
},
methods: {
getAlarm() {
alarmData().then(response => {
this.tableData=response.data.pageData;
// console.log(response.data)
// this.user = response.data;
this.$nextTick(()=>{
this.getScrollHeight();
})
});
},
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);
},
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");
setTimeout(()=>{
// 列表容器高度
const { height: heightWrapper } = selectWrap.getBoundingClientRect();
// 列表高度
const { height: heightSelect } = select.getBoundingClientRect();
// 滚动条的高度 = 列表高度-列表容器高度
this.scrollHeight = heightSelect - heightWrapper;
},1)
this.timerAni();
},
timerAni() {
console.log("zhix")
const selectWrap = this.$refs.table.$el.querySelector(
".el-table__body-wrapper"
);
this.timer = setInterval(() => {
// console.log(selectWrap.scrollTop)
if (selectWrap.scrollTop == this.scrollHeight) {
selectWrap.scrollTop = 1;
}
selectWrap.scrollTop += 1;
}, 100);
},
tableEnter() {
console.log(123);
clearInterval(this.timer);
},
choice(index){
console.log("===="+index)
if(index==0){
this.datanow = this.dataall;
this.drawLine(this.datanow);
this.drawLine2(this.datanow);
// this.drawLine2(this.datanow);
this.drawLine3(this.datanow);
}else
if(index==1){
this.datanow = this.dataone;
this.drawLine(this.datanow);
this.drawLine2(this.datanow);
// this.drawLine2(this.datanow);
this.drawLine3(this.datanow);
}else if(index==2){
this.datanow = this.datatwo;
this.drawLine(this.datanow);
this.drawLine2(this.datanow);
// this.drawLine2(this.datanow);
this.drawLine3(this.datanow);
}else if(index==3){
this.datanow = this.datathree;
this.drawLine(this.datanow);
this.drawLine2(this.datanow);
// this.drawLine2(this.datanow);
this.drawLine3(this.datanow);
}
},
......@@ -629,82 +602,7 @@
]
});
},
drawLine2(data){
// 基于准备好的dom，初始化echarts实例
let myChart2 = echarts.init(document.getElementById('main21'));
let myChart22 = echarts.init(document.getElementById('main22'));
// 绘制图表
myChart2.setOption({
// tooltip: {
// trigger: 'item',
// formatter: '{a} <br/>{b}: {c} ({d}%)'
// },
series: [
{
name: 'Access From',
type: 'pie',
selectedMode: 'single',
radius: [0, '55%'],
label: {
position: 'inner',
fontSize: 14
},
labelLine: {
show: false
},
data:data.xunList1,
color:['#f0c41b','#188df0']
},
{
name: 'Access From',
type: 'pie',
radius: ['70%', '80%'],
label: {
position: 'inner',
fontSize: 14
},
center: ['50%', '50%'],
data:data.xunList11,
color:['#00ffff','#f0c41b']
}
]
});
myChart22.setOption({
// tooltip: {
// trigger: 'item',
// formatter: '{a} <br/>{b}: {c} ({d}%)'
// },
series: [
{
name: 'Access From',
type: 'pie',
selectedMode: 'single',
radius: [0, '55%'],
label: {
position: 'inner',
fontSize: 14
},
labelLine: {
show: false
},
data: data.xunList2,
color:['#f0c41b','#188df0']
},
{
name: 'Access From',
type: 'pie',
radius: ['70%', '80%'],
label: {
position: 'inner',
fontSize: 14
},
center: ['50%', '50%'],
data:data.xunList22,
color:['#00ffff','#f0c41b']
}
]
});
},
drawLine3(data){
// 基于准备好的dom，初始化echarts实例
let myChart31 = echarts.init(document.getElementById('huan'))
......@@ -979,4 +877,7 @@
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.left{
margin-left: 10px;
}
</style>
gassafetyprogress-web/src/utils/mapClass/config.js
View file @ b73df032
......@@ -33,8 +33,6 @@ export const deviceType = {
4:"厂站",
5:"监控",
6:"用户",
};
......
gassafetyprogress-web/src/views/bigWindow/index.vue
View file @ b73df032
......@@ -12,6 +12,7 @@
<div id="map"></div>
<Center :show="show" :centerData="centerData" />
<PipeColor />
<!-- 底部按钮 -->
<div class="home-div">
<img
src="@/assets/mapinages/bottombanner.png"
......@@ -37,6 +38,15 @@
</div>
</div>
</div>
<!-- 设备按钮 -->
<div class="typelist-div">
<div class="list" v-for="(item,index) in arr" :key="index" :class="item.ischeck==true?'active':''" @click="sel1(index,item)">
{{item.name}}
</div>
</div>
<!-- 弹框 -->
<div
id=""
......@@ -164,8 +174,36 @@ export default {
name: "中燃韵科",
},
],
};
},
arr:[
{
val:1,
ischeck:false,
name: "调压箱"
},
{
val:2,
ischeck:false,
name: "阀门井"
},
{
val:3,
ischeck:false,
name: "场站"
},
{
val:4,
ischeck:false,
name: "用户"
},
{
val:5,
ischeck:false,
name: "监控"
}
],
selarr1:[],
};
},
watch: {
selarr(newValue) {
if (newValue.length == 3) {
......@@ -252,6 +290,25 @@ export default {
}
this.map.companyFilter(this.selarr);
},
sel1(index,item){
let arr=[...this.arr];
let selarr1=[...this.selarr1];
if(arr[index].ischeck==false){
arr[index].ischeck=true;
selarr1.push(item)
}else{
arr[index].ischeck=false;
var index11=selarr1.indexOf(index)
selarr1.splice(index11,1)
}
this.arr=arr;
this.selarr1=selarr1;
},
currentTime() {
setInterval(() => {
this.formatDate();
......@@ -418,4 +475,30 @@ export default {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.typelist-div{
width: 450px;
height: 50px;
z-index: 9999;
position: fixed;
bottom: 20%;
left: 40%;
}
.list{
z-index: 9999;
float: left;
margin-left: 10px;
color: #fff;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125C9B;
}
.list.active{
background: linear-gradient(86deg, #112238 0%, #32A3D3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125C9B;
color: #2ee7e7;
}
</style>
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