Skip to content

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

气瓶

parent c5d81b4e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 569 additions and 13 deletions
gassafetyprogress-web/src/components/bigWindow/rightBar.vue
View file @ c855c2c3
...@@ -48,31 +48,31 @@ ...@@ -48,31 +48,31 @@
></div> ></div>
</div> </div>
</div> </div>
<div class="" style="padding: 0px 10px;"> <div class="yj">
<div class="yujingleft yujing" style="width: 33%;height: 90px;float: left;"> <div class="yujingleft yujing">
<div class="yujingtop" style="width: 70px;height: 90px;float: left;margin-top: 15px;text-align: right;"> <div class="yujingtop">
<img src="@/assets/mapinages/group786.png" alt="" style="width: 50px;height: 50px;" /> <img src="@/assets/mapinages/group786.png" alt="" style="width: 50px;height: 50px;" />
</div> </div>
<div class="yujingbottom" style="float: left;color: #cddbe4;margin-left: 10px;"> <div class="yujingbottom">
<p>设备预警</p> <div>设备预警</div>
<span>2</span> <span>2</span>
</div> </div>
</div> </div>
<div class="yujingcenter yujing" style="width: 33%;height: 90px;float: left;"> <div class="yujingcenter yujing">
<div class="yujingtop" style="width: 70px;height: 90px;float: left;margin-top: 15px;text-align: right;"> <div class="yujingtop">
<img src="@/assets/mapinages/group787.png" alt="" style="width: 50px;height: 50px;" /> <img src="@/assets/mapinages/group787.png" alt="" style="width: 50px;height: 50px;" />
</div> </div>
<div class="yujingbottom" style="float: left;color: #cddbe4;margin-left: 10px;"> <div class="yujingbottom">
<p>事件情况</p> <div>事件情况</div>
<span>2</span> <span>2</span>
</div> </div>
</div> </div>
<div class="yujingright yujing" style="width: 33%;height: 90px;float: left;"> <div class="yujingright yujing">
<div class="yujingtop" style="width: 70px;height: 90px;float: left;margin-top: 15px;text-align: right;"> <div class="yujingtop">
<img src="@/assets/mapinages/group788.png" alt="" style="width: 50px;height: 50px;" /> <img src="@/assets/mapinages/group788.png" alt="" style="width: 50px;height: 50px;" />
</div> </div>
<div class="yujingbottom" style="float: left;color: #cddbe4;margin-left: 10px;"> <div class="yujingbottom">
<p>隐患数量</p> <div>隐患数量</div>
<span>2</span> <span>2</span>
</div> </div>
</div> </div>
...@@ -963,4 +963,33 @@ export default { ...@@ -963,4 +963,33 @@ export default {
width: 440px; width: 440px;
margin-left: 20px; margin-left: 20px;
} }
.yj{
padding: 0px 10px;
}
.yujing{
width: 33%;
height: 90px;
float: left;
}
.yujingtop{
width: 70px;
height: 90px;
float: left;
margin-top: 15px;
text-align: right;
}
.yujingbottom{
float: left;
color: #cddbe4;
margin-left: 10px;
line-height: 35px;
padding: 10px 0 0 0;
}
.yujingbottom span{
font-family: 'arialbd';
font-size: 25px;
background-image:-webkit-linear-gradient(bottom,#f0c41b,#e4dbb7);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
</style> </style>
gassafetyprogress-web/src/views/operationMonitor/operationQi/components/opeartionYujin.vue 0 → 100644
View file @ c855c2c3
<template>
</template>
<script>
import { listDetectorReportData } from "@/api/detector/detectorReportData";
export default {
};
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/operationQi/components/operationNum.vue 0 → 100644
View file @ c855c2c3
<template>
<div>
<div class="leftbar">
<div class="leftnum">
<img src="../../../../assets/mapinages/Group1120.png" alt="" style="width: 80px;">
<span style="margin-left: 20px;margin-right: 20px;">充装数量分析</span>
<img src="../../../../assets/mapinages/Group1121.png" alt="" style="width: 80px;">
</div>
<div id="echartsone" style="width:100%;height:300px;"></div>
</div>
<div class="centerbar">
<div class="leftnum">
<img src="../../../../assets/mapinages/Group1120.png" alt="" style="width: 80px;">
<span style="margin-left: 20px;margin-right: 20px;">预警分析</span>
<img src="../../../../assets/mapinages/Group1121.png" alt="" style="width: 80px;">
</div>
<div id="echartstwo" style="width:100%;height:300px;"></div>
</div>
<div class="rightbar">
<div class="leftnum">
<img src="../../../../assets/mapinages/Group1120.png" alt="" style="width: 80px;">
<span style="margin-left: 20px;margin-right: 20px;">瓶装燃气用户汇总分析</span>
<img src="../../../../assets/mapinages/Group1121.png" alt="" style="width: 80px;">
</div>
<div id="echartsthree" style="width:100%;height:300px;"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name:"",
data () {
return {
}
},
mounted () {
this.drawLine()
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart1 = this.$echarts.init(document.getElementById("echartsone"));
let myChart2 = this.$echarts.init(document.getElementById("echartstwo"));
let myChart3 = this.$echarts.init(document.getElementById("echartsthree"));
// 绘制图表
myChart1.setOption({
color: ['#4CC4E0'],
grid: {
left: '0',
right: '0',
bottom: '1%',
containLabel: true
},
tooltip: {},
xAxis: {
type: 'category',
data: ['平山', '东回舍', '温塘', '南甸', '古月', '西柏坡', '小觉','下口','两河乡'],
axisLine: {
lineStyle: {
type: 'solid' ,
color: '#99E2FF' , //左边线的颜色
width: '2' //坐标线的宽度
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#000' , //坐标值得具体的颜色
}
}
},
yAxis: {
type: 'value'
},
series: [
{
data: [1200, 2000, 1500, 800, 700, 1100, 4300,1234,3456],
type: 'bar',
barWidth : 7,
}
]
});
myChart2.setOption({
color: ['#4CC4E0','#EEC25B','#8E83DE'],
grid: {
left: '0',
right: '0',
bottom: '1%',
containLabel: true
},
legend: {
orient:"horizontal",
icon: "circle",
x:'center',
y:' center',
width:'300',
padding:[25, 30,0, 0],
itemWidth:10,
textStyle:{
color:'#000',
},
},
tooltip: {},
dataset: {
source: [
['product', '入户安检', '超重', '超量'],
['平山', 143.3, 185.8, 93.7],
['东回舍', 83.1, 173.4, 55.1],
['温塘', 86.4, 65.2, 82.5],
['南甸', 43.3, 85.8, 393.7],
['古月', 183.1, 273.4, 55.1],
['西柏坡', 186.4, 265.2, 82.5],
['小觉', 43.3, 185.8, 493.7],
['下口', 483.1, 273.4, 55.1],
['两河乡', 286.4, 265.2, 382.5],
['孟家庄', 272.4, 453.9, 139.1]
]
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
type: 'solid' ,
color: '#99E2FF' , //左边线的颜色
width: '2' //坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#000' , //坐标值得具体的颜色
}
}
},
yAxis: {},
series: [{ type: 'bar',barWidth : 7, }, { type: 'bar',barWidth : 7, }, { type: 'bar',barWidth : 7, }]
});
myChart3.setOption({
color: ['#4CC4E0'],
grid: {
left: '0',
right: '0',
bottom: '1%',
containLabel: true
},
tooltip: {},
xAxis: {
type: 'category',
axisLabel:{
interval: 0,
textStyle: {
color: '#000' , //坐标值得具体的颜色
}
} ,
data: ['平山', '东回舍', '温塘', '南甸', '古月', '西柏坡', '小觉','下口','两河乡'],
axisLine: {
lineStyle: {
type: 'solid' ,
color: '#99E2FF' , //左边线的颜色
width: '2' //坐标线的宽度
}
},
},
yAxis: {
type: 'value',
},
series: [
{
data: [1240, 2040, 1540, 3380, 4370, 1140, 2130,1234,3456],
type: 'bar',
barWidth : 7,
}
]
});
}
}
}
</script>
<style scoped>
.leftbar{
width: 400px;
height: 340px;
float: left;
}
.centerbar{
width: 45%;
height: 340px;
float: left;
margin-left: 40px;
}
.rightbar{
width: 400px;
height: 340px;
float: left;
margin-left: 40px;
}
.leftnum{
width: 100%;
height: 40px;
text-align: center;
line-height: 70px;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/operationQi/components/operationUser.vue 0 → 100644
View file @ c855c2c3
<template>
</template>
<script>
import { listDetectorReportData } from "@/api/detector/detectorReportData";
export default {
};
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
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