Skip to content

G
gassafety-progress
Commit 7dbf6501 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

右边滚动要跟报警稍微同步一下

parent ae3be04e
Hide whitespace changes
Inline Side-by-side
Showing with 752 additions and 590 deletions
gassafetyprogress-web/src/components/bigWindow/rightBar.vue
View file @ 7dbf6501
<template> <template>
<div style="height: 100%">
<div style="height: 100%"> <div>
<div> <div class="item1">
<div class="item1"> <span class="dot">
<span class="dot"> <span class="dot-inner"></span>
<span class="dot-inner"></span> </span>
</span> <span style="letter-spacing: 3px; color: #cddbe4">报警信息</span>
<span style="letter-spacing :3px;color:#cddbe4">报警信息</span> <div
<div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> class="fong-div"
<div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> style="
<div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> width: 8px;
</div> height: 12px;
</div> background-color: #2c888899;
<div class="left"> float: right;
<div margin-top: 10px;
class="bottom right-bottom-data-left" transform: skewX(-25deg);
@mouseover="tableEnter" "
@mouseout="timerAni" ></div>
> <div
<el-table class="fong-div"
size="mini" style="
:data="tableData" width: 8px;
:height="tableHeight" height: 12px;
class="el-bottom" background-color: #24b1b1b3;
ref="table" float: right;
> margin-top: 10px;
<el-table-column prop="unitName" label="所在单位" width="80"> margin-right: 10px;
<template slot-scope="scope"> transform: skewX(-25deg);
<div class="zzz" :title="scope.row.unitName"> "
{{ scope.row.unitName }} ></div>
</div> <div
</template> class="fong-div"
</el-table-column> style="
<el-table-column prop="detectorType" label="设备类型" width="80"> width: 8px;
<template slot-scope="scope"> height: 12px;
<div class="zzz" :title="scope.row.detectorType"> background-color: #11e9e9b3;
{{ scope.row.detectorType }} float: right;
</div> margin-top: 10px;
</template> margin-right: 10px;
</el-table-column> transform: skewX(-25deg);
<el-table-column prop="statusName" label="预警信息" width="80"> "
<template slot-scope="scope"> ></div>
<div class="zzz" :title="scope.row.statusName"> </div>
{{ scope.row.statusName }} </div>
</div> <div class="left">
</template> <div
</el-table-column> class="bottom right-bottom-data-left"
<el-table-column prop="alarmTime" label="预警时间" width="140"> @mouseover="mouseover"
</el-table-column> @mouseout="mouseout"
<el-table-column prop="handledStatus" label="状态"> >
<template slot-scope="scope"> <el-table
<div class="zzz" :title="scope.row.handledStatus"> size="mini"
{{ scope.row.handledStatus }} :data="tableData"
</div> :height="tableHeight"
</template> class="el-bottom"
</el-table-column> ref="table"
</el-table> >
</div> <el-table-column prop="unitName" label="所在单位" width="80">
<template slot-scope="scope">
<div class="zzz" :title="scope.row.unitName">
{{ scope.row.unitName }}
</div>
</template>
</el-table-column>
<el-table-column prop="detectorType" label="设备类型" width="80">
<template slot-scope="scope">
<div class="zzz" :title="scope.row.detectorType">
{{ scope.row.detectorType }}
</div>
</template>
</el-table-column>
<el-table-column prop="statusName" label="预警信息" width="80">
<template slot-scope="scope">
<div class="zzz" :title="scope.row.statusName">
{{ scope.row.statusName }}
</div>
</template>
</el-table-column>
<el-table-column prop="alarmTime" label="预警时间" width="140">
</el-table-column>
<el-table-column prop="handledStatus" label="状态">
<template slot-scope="scope">
<div class="zzz" :title="scope.row.handledStatus">
{{ scope.row.handledStatus }}
</div> </div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- <div style="width: 100%;height: 200px;background-color: #44d7dc;"> <!-- <div style="width: 100%;height: 200px;background-color: #44d7dc;">
<el-table <el-table
size="mini" size="mini"
:data="tableData" :data="tableData"
...@@ -84,567 +115,694 @@ ...@@ -84,567 +115,694 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> --> </div> -->
<div> <div>
<div class="item1" style="margin-top: 10px;"> <div class="item1" style="margin-top: 10px">
<span class="dot"> <span class="dot">
<span class="dot-inner"></span> <span class="dot-inner"></span>
</span> </span>
<span style="letter-spacing :3px;color:#cddbe4">资源统计</span> <span style="letter-spacing: 3px; color: #cddbe4">资源统计</span>
<div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> <div
<div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> class="fong-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> style="
</div> width: 8px;
</div> height: 12px;
<div class="echarts-one" style="margin-top: 10px;width: 430px;margin-left: 10px;"> background-color: #2c888899;
<div id="myChartone" :style="{width: '420px', height: '240px'}"></div> float: right;
</div> margin-top: 10px;
transform: skewX(-25deg);
"
></div>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #24b1b1b3;
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
class="echarts-one"
style="margin-top: 10px; width: 430px; margin-left: 10px"
>
<div id="myChartone" :style="{ width: '420px', height: '240px' }"></div>
</div>
<div> <div>
<div class="item1"> <div class="item1">
<span class="dot"> <span class="dot">
<span class="dot-inner"></span> <span class="dot-inner"></span>
</span> </span>
<span style="letter-spacing :3px;color:#cddbe4">用户安全监控设备</span> <span style="letter-spacing: 3px; color: #cddbe4"
<div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> >用户安全监控设备</span
<div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;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> class="fong-div"
</div> style="
<div class="outuser"> width: 8px;
<div class="outuserone"> height: 12px;
<p>燃气用户数量</p> background-color: #2c888899;
<span class="outuserspan">{{diviceNum.userNum}}</span> float: right;
</div> margin-top: 10px;
<div class="outusertwo"> transform: skewX(-25deg);
<p>安全设备数量</p> "
<span class="outuserspan">{{diviceNum.baoNum+diviceNum.changNum+diviceNum.liNum}}</span> ></div>
</div> <div
</div> class="fong-div"
<div id="huan" style="width: 450px;height: 170px;"></div> style="
<div class="inyuan"> width: 8px;
<div style="letter-spacing:2px;">设备总数</div> height: 12px;
<span style="font-family: 'arialbd';letter-spacing:2px;color: #00FFFF;font-size: 20px;">{{diviceNum.baoNum+diviceNum.changNum+diviceNum.liNum}}</span> background-color: #24b1b1b3;
</div> float: right;
<div class="usernum"> margin-top: 10px;
<div class="usernumin in1"> margin-right: 10px;
<span> ● </span> transform: skewX(-25deg);
<span style="color: #fff;">在线数量 </span> "
<span style="font-family: 'arialbd';letter-spacing:2px;"> : {{diviceNum.changNum}}</span> ></div>
</div> <div
<div class="usernumin in2"> class="fong-div"
<span> ● </span> style="
<span style="color: #fff;">离线数量 </span> width: 8px;
<span style="font-family: 'arialbd';letter-spacing:2px;"> : {{diviceNum.liNum}}</span> height: 12px;
</div> background-color: #11e9e9b3;
<div class="usernumin in3"> float: right;
<span> ● </span> margin-top: 10px;
<span style="color: #fff;">报警数量 </span> margin-right: 10px;
<span style="font-family: 'arialbd';letter-spacing:2px;"> : {{diviceNum.baoNum}}</span> transform: skewX(-25deg);
</div> "
</div> ></div>
</div>
</div> </div>
<div class="outuser">
<div class="outuserone">
<p>燃气用户数量</p>
<span class="outuserspan">{{ diviceNum.userNum }}</span>
</div>
<div class="outusertwo">
<p>安全设备数量</p>
<span class="outuserspan">{{
diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum
}}</span>
</div>
</div>
<div id="huan" style="width: 450px; height: 170px"></div>
<div class="inyuan">
<div style="letter-spacing: 2px">设备总数</div>
<span
style="
font-family: 'arialbd';
letter-spacing: 2px;
color: #00ffff;
font-size: 20px;
"
>{{ diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum }}</span
>
</div>
<div class="usernum">
<div class="usernumin in1">
<span> ● </span>
<span style="color: #fff">在线数量 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.changNum }}</span
>
</div>
<div class="usernumin in2">
<span> ● </span>
<span style="color: #fff">离线数量 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.liNum }}</span
>
</div>
<div class="usernumin in3">
<span> ● </span>
<span style="color: #fff">报警数量 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.baoNum }}</span
>
</div>
</div>
</div>
</template> </template>
<script> <script>
// 引入基本模板 // 引入基本模板
import * as echarts from 'echarts'; import * as echarts from "echarts";
import { alarmData,selectDeviceNum } from "@/api/detector/detectorInfo"; import { alarmData, selectDeviceNum } from "@/api/detector/detectorInfo";
export default { // 当不轮播时候的刷新时间
// components: { import { alarmtime } from "@/utils/mapClass/config";
// RightPic, export default {
// }, // components: {
data () { // RightPic,
return { // },
allNum:{}, data() {
diviceNum:{ return {
baoNum: 0, allNum: {},
changNum: 0, diviceNum: {
liNum: 0, baoNum: 0,
userNum: 0 changNum: 0,
}, liNum: 0,
zeroNum:{ userNum: 0,
fajing: 0, },
stationNum: 0, zeroNum: {
tiaoya: 0, fajing: 0,
videoNum: 0 stationNum: 0,
}, tiaoya: 0,
enterpriseIds:{ videoNum: 0,
enterpriseId:"" },
}, enterpriseIds: {
timer: null, enterpriseId: "",
repeatFinshed: false, },
tableHeight: 230, timer: null,
tableData: [], // 与bigwindow的报警同步的定时器
scrollHeight: 0 alarmTimer: null,
}; // 滚动功能的容器大还是列表大
}, changeTimer: false,
mounted(){
// this.$nextTick(()=>{
// this.getScrollHeight();
// })
this.getAlarm();
selectDeviceNum (this.enterpriseIds).then(response => { repeatFinshed: false,
this.diviceNum = response.data; tableHeight: 230,
this.drawLine3(); tableData: [],
}); scrollHeight: 0,
};
},
mounted() {
// this.$nextTick(()=>{
// this.getScrollHeight();
// })
this.getAlarm();
selectDeviceNum(this.enterpriseIds).then((response) => {
this.diviceNum = response.data;
this.drawLine3();
});
},
methods: {
getAlarm() {
return 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");
setTimeout(() => {
// 列表容器高度
const { height: heightWrapper } = selectWrap.getBoundingClientRect();
// 列表高度
const { height: heightSelect } = select.getBoundingClientRect();
// 滚动条的高度 = 列表高度-列表容器高度
this.scrollHeight = heightSelect - heightWrapper;
// 如果列表高度大于列表容器高度，就让轮播到底重新调接口，否则就跟bigwindow同步调取接口
if (heightSelect > heightWrapper) {
this.timerAni();
console.log("滚动");
} else {
this.alarmTimerAni();
console.log("不滚动");
}
// 列表大的时候鼠标移入移出就会触发暂停，否则就return
this.changeTimer = heightSelect > heightWrapper;
}, 1);
},
timerAni() {
const selectWrap = this.$refs.table.$el.querySelector(
".el-table__body-wrapper"
);
clearInterval(this.timer);
this.timer = setInterval(async () => {
if (selectWrap.scrollTop == this.scrollHeight) {
clearInterval(this.timer);
await this.getAlarm();
selectWrap.scrollTop = 0;
} else {
selectWrap.scrollTop += 1;
}
}, 100);
},
// 与外界报警同步
alarmTimerAni() {
this.alarmTimer = setTimeout(() => {
this.getAlarm();
}, alarmtime);
},
tableEnter() {
clearInterval(this.timer);
},
// 列表大的时候鼠标移入移出就会触发暂停，否则就啥也不干
mouseover() {
this.changeTimer && this.tableEnter();
},
mouseout() {
this.changeTimer && this.timerAni();
},
choice(val) {
this.getNum(val);
},
getNum(val) {
if (val != null && val != "") {
this.enterpriseIds.enterpriseId = val.toString();
selectDeviceNum(this.enterpriseIds).then((response) => {
console.log(response);
this.allNum = response.data;
this.drawLine();
});
} else {
this.allNum = this.zeroNum;
this.drawLine();
}
},
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart1 = this.$echarts.init(document.getElementById("myChartone"));
// 绘制图表
myChart1.setOption({
tooltip: {
trigger: "item",
}, },
methods: { grid: {
getAlarm() { top: "8%",
alarmData().then(response => { left: "8%",
this.tableData=response.data.pageData; right: "8%",
// console.log(response.data) bottom: "13%",
// this.user = response.data; containLabel: true,
this.$nextTick(()=>{ },
this.getScrollHeight(); xAxis: {
}) data: ["阀井", "调压箱", "场站", "监控"],
}); type: "category",
// data: category,
splitLine: { show: false },
axisLine: {
show: false,
lineStyle: {
color: "#bbb6b6",
}, },
getScrollHeight() { },
const selectWrap = this.$refs.table.$el.querySelector( axisTick: {
".el-table__body-wrapper" show: false,
); },
// 列表 offset: 10,
const select = this.$refs.table.$el nameTextStyle: {
.querySelector(".el-table__body-wrapper") fontSize: 15,
.querySelector(".el-table__body"); },
},
yAxis: {
type: "value",
setTimeout(()=>{ axisLine: {
// 列表容器高度 show: false,
const { height: heightWrapper } = selectWrap.getBoundingClientRect(); lineStyle: {
// 列表高度 color: "#688AB6",
const { height: heightSelect } = select.getBoundingClientRect(); },
// 滚动条的高度 = 列表高度-列表容器高度 },
this.scrollHeight = heightSelect - heightWrapper; axisTick: {
show: false,
},1) },
splitLine: {
show: true,
this.timerAni(); lineStyle: {
type: "dashed",
color: "#464646",
}, },
timerAni() { },
},
series: [
{
name: "资源数量统计",
type: "bar",
showSymbol: false,
hoverAnimation: false,
data: [
this.allNum.fajing,
this.allNum.tiaoya,
this.allNum.stationNum,
this.allNum.videoNum,
],
barWidth: 18, //柱图宽度
// barCategoryGap:'60%',
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
textStyle: {
//数值样式
color: "#688AB6",
fontSize: 12,
},
},
barBorderRadius: [5, 5, 0, 0], //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
//我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
var colorList = [
["#00ffff", "#00fbfb80", "#112238"],
["#198EF0", "#198ef099", "#112238"],
];
var index = params.dataIndex;
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
const selectWrap = this.$refs.table.$el.querySelector( return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
".el-table__body-wrapper" { offset: 0, color: colorList[index][0] },
); { offset: 0.5, color: colorList[index][1] },
this.timer = setInterval(() => { { offset: 1, color: colorList[index][2] },
// console.log(selectWrap.scrollTop) ]);
if (selectWrap.scrollTop == this.scrollHeight) { },
selectWrap.scrollTop = 1; },
}
selectWrap.scrollTop += 1;
}, 100);
}, },
tableEnter() { },
console.log(123); {
clearInterval(this.timer); name: "资源数量统计",
tooltip: {
show: true,
}, },
choice(val){ type: "bar",
this.getNum(val) barWidth: 10,
},
{
name: "b",
tooltip: {
show: false,
},
},
{
name: "d",
tooltip: {
show: false,
}, },
getNum( val){
if(val!=null && val!=''){
this.enterpriseIds.enterpriseId = val.toString();
selectDeviceNum (this.enterpriseIds).then(response => {
console.log(response);
this.allNum=response.data;
this.drawLine();
});
}else {
this.allNum = this.zeroNum;
this.drawLine();
}
}, },
drawLine(){ ],
// 基于准备好的dom，初始化echarts实例 });
let myChart1 = this.$echarts.init(document.getElementById('myChartone')) },
// 绘制图表
myChart1.setOption({ drawLine3() {
tooltip: { // 基于准备好的dom，初始化echarts实例
trigger: "item" let myChart31 = echarts.init(document.getElementById("huan"));
// let myChart32 = echarts.init(document.getElementById('main32'))
// 绘制图表
myChart31.setOption({
color: ["#FF4040", "#F0C41B", "#188DF0"],
grid: {
left: 0,
// right: 0,
bottom: 0,
top: 0,
containLabel: true,
},
// grid: {
// bottom: 150,
// left: 100,
// right: '10%'
// },
series: [
// 主要展示层的
{
radius: ["75%", "65%"],
center: ["50%", "50%"],
type: "pie",
itemStyle: {
borderRadius: 20,
},
label: {
normal: {
show: false,
textStyle: {
fontSize: 13,
},
position: "outside",
}, },
grid: { emphasis: {
top: "8%", show: false,
left: "8%",
right: "8%",
bottom: "13%",
containLabel: true
}, },
xAxis: { },
data: ["阀井","调压箱","场站","监控"], labelLine: {
type: 'category', normal: {
// data: category, show: false,
splitLine: {show: false}, length: 20,
axisLine: { length2: 35,
show: false,
lineStyle:{
color: '#bbb6b6'
}
},
axisTick: {
show: false
},
offset: 10,
nameTextStyle: {
fontSize: 15
}
}, },
yAxis: { emphasis: {
type: 'value', show: true,
axisLine: { },
show: false, },
lineStyle:{ name: "民警训练总量",
color: '#688AB6' data: [
} { name: "报警数量", value: this.diviceNum.baoNum },
}, { name: "离线数量", value: this.diviceNum.liNum },
axisTick: { { name: "在线数量", value: this.diviceNum.changNum },
show: false ],
},
// 边框的设置
{
name: "外边框",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["80%", "80%"],
label: {
normal: {
show: false,
},
},
data: [
{
value: 9,
name: "",
itemStyle: {
normal: {
borderWidth: 2,
borderColor: "#61bad3",
}, },
splitLine: { },
show: true,
lineStyle:{
type:'dashed',
color: '#464646'
}
}
}, },
series: [ ],
{ },
name: "资源数量统计", ],
type: "bar", });
showSymbol: false, // myChart32.setOption({
hoverAnimation: false, // title: {
data: [this.allNum.fajing,this.allNum.tiaoya,this.allNum.stationNum,this.allNum.videoNum], // text: '设备数量:'+data.deviceNum,
barWidth: 18, //柱图宽度 // left: 'center',
// barCategoryGap:'60%', // textStyle: {
itemStyle:{ // color: "#0ff"
　　　　　　　　normal:{ // }
label:{ // },
show: true, //开启显示 // tooltip: {
position: 'top', //在上方显示 // trigger: 'item'
textStyle: { //数值样式 // },
color: '#688AB6', // series: [
fontSize: 12 // {
} // name: '设备概况',
}, // type: 'pie',
barBorderRadius: [5,5,0,0], // radius: ['50%', '70%'],
　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组 // center: ['50%', '60%'],
　　　　　　　　　　color: function (params){ // avoidLabelOverlap: false,
　　　　　　　　　　　　//我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值 // label: {
　　　　　　　　　　　　 var colorList = [['#00ffff','#00fbfb80','#112238'],['#198EF0','#198ef099','#112238']]; // show: false,
var index=params.dataIndex; // position: 'center'
if(params.dataIndex >= colorList.length){ // },
index=params.dataIndex-colorList.length; // emphasis: {
} // label: {
// show: true,
　　　　　　　　　　　 return new echarts.graphic.LinearGradient(0, 0, 0, 1,[ // fontSize: '40',
　　　　　　　　　　　　　　 {offset: 0, color: colorList[index][0]}, // fontWeight: 'bold'
　　　　　　　　　　　　　　 {offset: 0.5, color: colorList[index][1]}, // }
　　　　　　　　　　　　　　 {offset: 1, color: colorList[index][2]} // },
　　　　　　　　　　　　　 ]); // labelLine: {
　　　　　　　　　　} // show: false
} // },
} // data:data.divice,
},{ // color:["#188df0","#ffff00","#FF4040"]
name:'资源数量统计', // }
tooltip:{ // ]
show:true // });
}, },
type: 'bar', },
barWidth:10, };
},{
name:'b',
tooltip:{
show:false
},
},{
name:'d',
tooltip:{
show:false
},
}
]
});
},
drawLine3(){
// 基于准备好的dom，初始化echarts实例
let myChart31 = echarts.init(document.getElementById('huan'))
// let myChart32 = echarts.init(document.getElementById('main32'))
// 绘制图表
myChart31.setOption({
color: ['#FF4040', '#F0C41B', '#188DF0'],
grid: {
left: 0,
// right: 0,
bottom: 0,
top:0,
containLabel: true
},
// grid: {
// bottom: 150,
// left: 100,
// right: '10%'
// },
series: [
// 主要展示层的
{
radius: ['75%', '65%'],
center: ['50%', '50%'],
type: 'pie',
itemStyle: {
borderRadius: 20,
},
label: {
normal: {
show: false,
textStyle: {
fontSize: 13,
},
position: 'outside'
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false,
length: 20,
length2: 35
},
emphasis: {
show: true
}
},
name: "民警训练总量",
data: [{"name": "报警数量","value": this.diviceNum.baoNum},
{"name": "离线数量","value": this.diviceNum.liNum},
{ "name": "在线数量","value": this.diviceNum.changNum}, ],
},
// 边框的设置
{
name: '外边框',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['50%', '50%'],
radius: ['80%', '80%'],
label: {
normal: {
show: false
}
},
data: [{
value: 9,
name: '',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#61bad3'
}
}
}]
},
]
});
// myChart32.setOption({
// title: {
// text: '设备数量:'+data.deviceNum,
// left: 'center',
// textStyle: {
// color: "#0ff"
// }
// },
// tooltip: {
// trigger: 'item'
// },
// series: [
// {
// name: '设备概况',
// type: 'pie',
// radius: ['50%', '70%'],
// center: ['50%', '60%'],
// avoidLabelOverlap: false,
// label: {
// show: false,
// position: 'center'
// },
// emphasis: {
// label: {
// show: true,
// fontSize: '40',
// fontWeight: 'bold'
// }
// },
// labelLine: {
// show: false
// },
// data:data.divice,
// color:["#188df0","#ffff00","#FF4040"]
// }
// ]
// });
}
}
}
</script> </script>
<style scoped> <style scoped>
.titleTex{ .titleTex {
height: 30px; height: 30px;
width: 100%; width: 100%;
color: aqua; color: aqua;
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
margin-top: 10px; margin-top: 10px;
} }
.divall{ .divall {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.divfen{ .divfen {
display:flex; display: flex;
justify-content:center; justify-content: center;
align-items:center; align-items: center;
} }
.numdiv{ .numdiv {
background: #47aed5; background: #47aed5;
color: white; color: white;
width: 27px; width: 27px;
font-size: 30px; font-size: 30px;
} }
.item1{ .item1 {
width: 93%; width: 93%;
height: 30px; height: 30px;
font-size: 18px; font-size: 18px;
line-height: 30px; line-height: 30px;
color: #ffffff; color: #ffffff;
padding-left: 10px; padding-left: 10px;
font-weight: 700; font-weight: 700;
font-style: italic; font-style: italic;
margin-left: 10px; margin-left: 10px;
background-image: linear-gradient(to left, #112238, rgb(49 151 195 / 70%) 50%, #112238); background-image: linear-gradient(
to left,
#112238,
rgb(49 151 195 / 70%) 50%,
#112238
);
} }
.dot { .dot {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 10px; width: 10px;
height: 10px; height: 10px;
background: rgb(30, 185, 190); background: rgb(30, 185, 190);
border-radius: 50%; border-radius: 50%;
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
margin-bottom: 2px; margin-bottom: 2px;
} }
.dot-inner { .dot-inner {
background: #44d7dc; background: #44d7dc;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
-webkit-animation: vabDot 1.2s ease-in-out infinite; -webkit-animation: vabDot 1.2s ease-in-out infinite;
animation: vabDot 1.2s ease-in-out infinite; animation: vabDot 1.2s ease-in-out infinite;
} }
@-webkit-keyframes vabDot { @-webkit-keyframes vabDot {
0% { 0% {
opacity: .6; opacity: 0.6;
transform: scale(.8) transform: scale(0.8);
} }
to { to {
opacity: 0; opacity: 0;
transform: scale(2.4) transform: scale(2.4);
} }
} }
@keyframes vabDot { @keyframes vabDot {
0% { 0% {
opacity: .6; opacity: 0.6;
transform: scale(.8) transform: scale(0.8);
} }
to { to {
opacity: 0; opacity: 0;
transform: scale(2.4) transform: scale(2.4);
}
}
.outuser{
width: 450px;
height: 60px;
}
.outuserone{
width: 50%;
height: 100%;
text-align: center;
float: left;
color: #E8F2FF;
}
.outusertwo{
width: 50%;
height: 100%;
text-align: center;
float: right;
color: #E8F2FF;
}
.outuserspan{
font-family: 'arialbd';
font-size: 28px;
color: #00FFFF;
letter-spacing:8px;
}
.usernum{
width: 100%;
height: 20px;
display: flex;
justify-content: space-around;
}
.usernumin{
font-size: 15px;
}
.in1{
color: #188DF0;
}
.in2{
color: #F0C41B;
}
.in3{
color: #FF4040;
}
.inyuan{
width: 106px;
height: 106px;
border-radius: 50%;
border: 2px solid #125c9b;
position: fixed;
margin-bottom: 10px;
margin-top: -138px;
margin-left: 172px;
font-size: 15px;
color: #fff;
text-align: center;
line-height: 25px;
padding: 28px 0px 0px 0px;
background-image: linear-gradient(to left, #112238, #003E8D, #112238);
}
.b_list{
height: 100%;
overflow: hidden;
}
.left{
margin-top: 10px;
width: 440px;
margin-left: 20px;
} }
}
.outuser {
width: 450px;
height: 60px;
}
.outuserone {
width: 50%;
height: 100%;
text-align: center;
float: left;
color: #e8f2ff;
}
.outusertwo {
width: 50%;
height: 100%;
text-align: center;
float: right;
color: #e8f2ff;
}
.outuserspan {
font-family: "arialbd";
font-size: 28px;
color: #00ffff;
letter-spacing: 8px;
}
.usernum {
width: 100%;
height: 20px;
display: flex;
justify-content: space-around;
}
.usernumin {
font-size: 15px;
}
.in1 {
color: #188df0;
}
.in2 {
color: #f0c41b;
}
.in3 {
color: #ff4040;
}
.inyuan {
width: 106px;
height: 106px;
border-radius: 50%;
border: 2px solid #125c9b;
position: fixed;
margin-bottom: 10px;
margin-top: -138px;
margin-left: 172px;
font-size: 15px;
color: #fff;
text-align: center;
line-height: 25px;
padding: 28px 0px 0px 0px;
background-image: linear-gradient(to left, #112238, #003e8d, #112238);
}
.b_list {
height: 100%;
overflow: hidden;
}
.left {
margin-top: 10px;
width: 440px;
margin-left: 20px;
}
</style> </style>
gassafetyprogress-web/src/utils/mapClass/config.js
View file @ 7dbf6501
/* /*
* @Author: your name * @Author: your name
* @Date: 2022-01-26 10:47:44 * @Date: 2022-01-26 10:47:44
* @LastEditTime: 2022-03-01 16:07:06 * @LastEditTime: 2022-03-02 11:28:29
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/config.js * @FilePath: /test/hello-world/src/utils/config.js
...@@ -20,6 +20,9 @@ export const pipePressure = { ...@@ -20,6 +20,9 @@ export const pipePressure = {
3: "次高压", 3: "次高压",
4: "高压", 4: "高压",
}; };
// 这是报警轮询的时间
export const alarmtime = 10000;
export const svgUrl = { export const svgUrl = {
2: require("@/assets/image/tiaoyaxiang1.svg"), 2: require("@/assets/image/tiaoyaxiang1.svg"),
3: require("@/assets/image/famen1.svg"), 3: require("@/assets/image/famen1.svg"),
......
gassafetyprogress-web/src/views/bigWindow/index.vue
View file @ 7dbf6501
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-01-11 13:44:17 * @Date: 2022-01-11 13:44:17
* @LastEditTime: 2022-03-01 16:08:52 * @LastEditTime: 2022-03-02 11:47:13
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/Home.vue * @FilePath: /test/hello-world/src/views/Home.vue
...@@ -144,6 +144,7 @@ import { ...@@ -144,6 +144,7 @@ import {
changzhan, changzhan,
jiankong, jiankong,
user, user,
alarmtime
} from "@/utils/mapClass/config.js"; } from "@/utils/mapClass/config.js";
import { import {
getPipe, getPipe,
...@@ -321,7 +322,7 @@ export default { ...@@ -321,7 +322,7 @@ export default {
this.alarmTimer = setInterval(() => { this.alarmTimer = setInterval(() => {
this.userAlarm(); this.userAlarm();
// console.log("查询报警"); // console.log("查询报警");
}, 6000); }, alarmtime);
}); });
} }
this.currentTime(); this.currentTime();
......
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