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 @@ ...@@ -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 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> </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="left">
<div <div
class="bottom right-bottom-data-left" class="bottom right-bottom-data-left"
...@@ -28,76 +28,43 @@ ...@@ -28,76 +28,43 @@
ref="table" ref="table"
> >
<el-table-column prop="unitName" label="所在单位" width="80"> <el-table-column prop="unitName" label="所在单位" width="80">
<!-- <template slot-scope="scope"> <template slot-scope="scope">
<div class="ddd" :title="scope.row.unitName"> <div class="ddd" :title="scope.row.unitName">
{{ scope.row.unitName }} {{ scope.row.unitName }}
</div> </div>
</template> --> </template>
</el-table-column> </el-table-column>
<el-table-column prop="detectorType" label="设备类型" width="80"> <el-table-column prop="detectorType" label="设备类型" width="80">
<!-- <template slot-scope="scope"> <template slot-scope="scope">
<div class="ddd" :title="scope.row.detectorType"> <div class="ddd" :title="scope.row.detectorType">
{{ scope.row.detectorType }} {{ scope.row.detectorType }}
</div> </div>
</template> --> </template>
</el-table-column> </el-table-column>
<el-table-column prop="statusName" label="预警信息" width="80"> <el-table-column prop="statusName" label="预警信息" width="80">
<!-- <template slot-scope="scope"> <template slot-scope="scope">
<div class="ddd" :title="scope.row.statusName"> <div class="ddd" :title="scope.row.statusName">
{{ scope.row.statusName }} {{ scope.row.statusName }}
</div> </div>
</template> --> </template>
</el-table-column> </el-table-column>
<el-table-column prop="alarmTime" label="预警时间" width="120"> <el-table-column prop="alarmTime" label="预警时间" width="120">
</el-table-column> </el-table-column>
<el-table-column prop="handledStatus" label="状态" width=""> <el-table-column prop="handledStatus" label="状态" width="">
<!-- <template slot-scope="scope"> <template slot-scope="scope">
<div class="ddd" :title="scope.row.handledStatus"> <div class="ddd" :title="scope.row.handledStatus">
{{ scope.row.handledStatus }} {{ scope.row.handledStatus }}
</div> </div>
</template> --> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
<!-- <RightPic></RightPic> -->
<!-- <div class ="divall" style="width: 50%"> <!-- <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 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>
<div class="divall" style="width: 50%" > <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 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> -->
</div> </div>
...@@ -224,7 +191,7 @@ ...@@ -224,7 +191,7 @@
<script> <script>
// 引入基本模板 // 引入基本模板
import * as echarts from 'echarts'; import * as echarts from 'echarts';
// import RightPic from "Rightpic.vue"; import { alarmData } from "@/api/detector/detectorInfo";
export default { export default {
// components: { // components: {
// RightPic, // RightPic,
...@@ -232,29 +199,10 @@ ...@@ -232,29 +199,10 @@
data () { data () {
return { return {
timer: null, timer: null,
repeatFinshed: false, repeatFinshed: false,
tableHeight: 202, tableHeight: 230,
tableData: [], tableData: [],
scrollHeight: 0, 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: '王小虎',
}],
dataall:{ dataall:{
xunchaAllOne1: 1, xunchaAllOne1: 1,
xunchaAllOne2: 3, xunchaAllOne2: 3,
...@@ -455,66 +403,91 @@ ...@@ -455,66 +403,91 @@
}; };
}, },
mounted(){ mounted(){
this.datanow = this.dataall; // this.$nextTick(()=>{
this.drawLine(this.datanow); // this.getScrollHeight();
this.drawLine2(this.datanow); // })
this.drawLine3(this.datanow); this.getAlarm();
this.getScrollHeight(); // this.datanow = this.dataall;
// this.drawLine(this.datanow);
// this.drawLine2(this.datanow);
this.drawLine3();
}, },
methods: { methods: {
getAlarm() {
alarmData().then(response => {
this.tableData=response.data.pageData;
// console.log(response.data)
// this.user = response.data;
this.$nextTick(()=>{
this.getScrollHeight();
})
});
},
getScrollHeight() { getScrollHeight() {
const selectWrap = this.$refs.table.$el.querySelector( const selectWrap = this.$refs.table.$el.querySelector(
".el-table__body-wrapper" ".el-table__body-wrapper"
); );
// 列表 // 列表
const select = this.$refs.table.$el const select = this.$refs.table.$el
.querySelector(".el-table__body-wrapper") .querySelector(".el-table__body-wrapper")
.querySelector(".el-table__body"); .querySelector(".el-table__body");
// 列表容器高度
const { height: heightWrapper } = selectWrap.getBoundingClientRect();
// 列表高度
const { height: heightSelect } = select.getBoundingClientRect(); setTimeout(()=>{
// 滚动条的高度 = 列表高度-列表容器高度 // 列表容器高度
this.scrollHeight = heightSelect - heightWrapper; const { height: heightWrapper } = selectWrap.getBoundingClientRect();
this.timerAni(); // 列表高度
}, const { height: heightSelect } = select.getBoundingClientRect();
timerAni() { // 滚动条的高度 = 列表高度-列表容器高度
const selectWrap = this.$refs.table.$el.querySelector( this.scrollHeight = heightSelect - heightWrapper;
".el-table__body-wrapper"
); },1)
this.timer = setInterval(() => {
if (selectWrap.scrollTop == this.scrollHeight) {
selectWrap.scrollTop = 1; this.timerAni();
} },
selectWrap.scrollTop += 1; timerAni() {
}, 100); console.log("zhix")
}, const selectWrap = this.$refs.table.$el.querySelector(
tableEnter() { ".el-table__body-wrapper"
console.log(123); );
clearInterval(this.timer); 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){ choice(index){
console.log("===="+index) console.log("===="+index)
if(index==0){ if(index==0){
this.datanow = this.dataall; this.datanow = this.dataall;
this.drawLine(this.datanow); this.drawLine(this.datanow);
this.drawLine2(this.datanow); // this.drawLine2(this.datanow);
this.drawLine3(this.datanow); this.drawLine3(this.datanow);
}else }else
if(index==1){ if(index==1){
this.datanow = this.dataone; this.datanow = this.dataone;
this.drawLine(this.datanow); this.drawLine(this.datanow);
this.drawLine2(this.datanow); // this.drawLine2(this.datanow);
this.drawLine3(this.datanow); this.drawLine3(this.datanow);
}else if(index==2){ }else if(index==2){
this.datanow = this.datatwo; this.datanow = this.datatwo;
this.drawLine(this.datanow); this.drawLine(this.datanow);
this.drawLine2(this.datanow); // this.drawLine2(this.datanow);
this.drawLine3(this.datanow); this.drawLine3(this.datanow);
}else if(index==3){ }else if(index==3){
this.datanow = this.datathree; this.datanow = this.datathree;
this.drawLine(this.datanow); this.drawLine(this.datanow);
this.drawLine2(this.datanow); // this.drawLine2(this.datanow);
this.drawLine3(this.datanow); this.drawLine3(this.datanow);
} }
}, },
...@@ -629,82 +602,7 @@ ...@@ -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){ drawLine3(data){
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
let myChart31 = echarts.init(document.getElementById('huan')) let myChart31 = echarts.init(document.getElementById('huan'))
...@@ -979,4 +877,7 @@ ...@@ -979,4 +877,7 @@
overflow-x: hidden !important; overflow-x: hidden !important;
overflow-y: hidden !important; overflow-y: hidden !important;
} }
.left{
margin-left: 10px;
}
</style> </style>
gassafetyprogress-web/src/utils/mapClass/config.js
View file @ b73df032
...@@ -33,8 +33,6 @@ export const deviceType = { ...@@ -33,8 +33,6 @@ export const deviceType = {
4:"厂站", 4:"厂站",
5:"监控", 5:"监控",
6:"用户", 6:"用户",
}; };
......
gassafetyprogress-web/src/views/bigWindow/index.vue
View file @ b73df032
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
<div id="map"></div> <div id="map"></div>
<Center :show="show" :centerData="centerData" /> <Center :show="show" :centerData="centerData" />
<PipeColor /> <PipeColor />
<!-- 底部按钮 -->
<div class="home-div"> <div class="home-div">
<img <img
src="@/assets/mapinages/bottombanner.png" src="@/assets/mapinages/bottombanner.png"
...@@ -37,6 +38,15 @@ ...@@ -37,6 +38,15 @@
</div> </div>
</div> </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 <div
id="" id=""
...@@ -164,8 +174,36 @@ export default { ...@@ -164,8 +174,36 @@ export default {
name: "中燃韵科", 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: { watch: {
selarr(newValue) { selarr(newValue) {
if (newValue.length == 3) { if (newValue.length == 3) {
...@@ -252,6 +290,25 @@ export default { ...@@ -252,6 +290,25 @@ export default {
} }
this.map.companyFilter(this.selarr); 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() { currentTime() {
setInterval(() => { setInterval(() => {
this.formatDate(); this.formatDate();
...@@ -418,4 +475,30 @@ export default { ...@@ -418,4 +475,30 @@ export default {
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -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> </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