Skip to content

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

气瓶

parent c5d81b4e
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 @@
></div>
</div>
</div>
<div class="" style="padding: 0px 10px;">
<div class="yujingleft yujing" style="width: 33%;height: 90px;float: left;">
<div class="yujingtop" style="width: 70px;height: 90px;float: left;margin-top: 15px;text-align: right;">
<div class="yj">
<div class="yujingleft yujing">
<div class="yujingtop">
<img src="@/assets/mapinages/group786.png" alt="" style="width: 50px;height: 50px;" />
</div>
<div class="yujingbottom" style="float: left;color: #cddbe4;margin-left: 10px;">
<p>设备预警</p>
<div class="yujingbottom">
<div>设备预警</div>
<span>2</span>
</div>
</div>
<div class="yujingcenter yujing" style="width: 33%;height: 90px;float: left;">
<div class="yujingtop" style="width: 70px;height: 90px;float: left;margin-top: 15px;text-align: right;">
<div class="yujingcenter yujing">
<div class="yujingtop">
<img src="@/assets/mapinages/group787.png" alt="" style="width: 50px;height: 50px;" />
</div>
<div class="yujingbottom" style="float: left;color: #cddbe4;margin-left: 10px;">
<p>事件情况</p>
<div class="yujingbottom">
<div>事件情况</div>
<span>2</span>
</div>
</div>
<div class="yujingright yujing" style="width: 33%;height: 90px;float: left;">
<div class="yujingtop" style="width: 70px;height: 90px;float: left;margin-top: 15px;text-align: right;">
<div class="yujingright yujing">
<div class="yujingtop">
<img src="@/assets/mapinages/group788.png" alt="" style="width: 50px;height: 50px;" />
</div>
<div class="yujingbottom" style="float: left;color: #cddbe4;margin-left: 10px;">
<p>隐患数量</p>
<div class="yujingbottom">
<div>隐患数量</div>
<span>2</span>
</div>
</div>
......@@ -963,4 +963,33 @@ export default {
width: 440px;
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>
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
gassafetyprogress-web/src/views/operationMonitor/operationQi/index.vue 0 → 100644
View file @ c855c2c3
<template>
<div style="padding: 40px 40px 20px 40px;">
<div class="bottletop">
<div class="bottletopleft">
<div class="bottop">
<div class="botbanner">
<div style="margin-left: 20px;position: absolute;">气瓶统计</div>
<img src="../../../assets/mapinages/Group1129.png" alt="" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;">
</div>
<div class="botnumber">
<div class="botimage">
<img src="../../../assets/mapinages/Group1130.png" alt="" style="width: 100px;height: 100px;margin-top: 30px;">
<div class="ima">
<div style="color: #4CC4E0;font-weight: bolder;">358275</div><span style="color: #fff;">总计</span>
</div>
</div>
<div class="botnum">
<div class="numdiv">
<p style="color: #4CC4E0;">本月新增</p>
<span style="color: #EEC25B;font-size: 30px;">683</span><span style="color: #4CC4E0;">个</span>
</div>
<div class="numdiv">
<p style="color: #4CC4E0;">本年新增</p>
<span style="color: #EEC25B;font-size: 30px;">683</span><span style="color: #4CC4E0;">个</span>
</div>
</div>
</div>
</div>
<div class="bottop">
<div class="botbanner">
<div style="margin-left: 20px;position: absolute;">气瓶配送统计</div>
<img src="../../../assets/mapinages/Group1129.png" alt="" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;">
</div>
<div class="botnumber">
<div class="botimage">
<img src="../../../assets/mapinages/Group1130.png" alt="" style="width: 100px;height: 100px;margin-top: 30px;">
<div class="ima">
<div style="color: #4CC4E0;font-weight: bolder;">35358275</div><span style="color: #fff;">总计</span>
</div>
</div>
<div class="botnum">
<div class="numdiv">
<p style="color: #4CC4E0;">本月新增</p>
<span style="color: #EEC25B;font-size: 30px;">6833</span><span style="color: #4CC4E0;">个</span>
</div>
<div class="numdiv">
<p style="color: #4CC4E0;">本年新增</p>
<span style="color: #EEC25B;font-size: 30px;">623483</span><span style="color: #4CC4E0;">个</span>
</div>
</div>
</div>
</div>
</div>
<div class="bottletopcenter">
<div id="map"></div>
</div>
<div class="bottletopright">
<div class="bottop">
<div class="botbanner">
<div style="margin-left: 20px;position: absolute;">气瓶充装统计</div>
<img src="../../../assets/mapinages/Group1129.png" alt="" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;">
</div>
<div class="botnumber">
<div class="botimage">
<img src="../../../assets/mapinages/Group1130.png" alt="" style="width: 100px;height: 100px;margin-top: 30px;">
<div class="ima">
<div style="color: #4CC4E0;font-weight: bolder;">358275</div><span style="color: #fff;">总计</span>
</div>
</div>
<div class="botnum">
<div class="numdiv">
<p style="color: #4CC4E0;">本月新增</p>
<span style="color: #EEC25B;font-size: 30px;">6843</span><span style="color: #4CC4E0;">个</span>
</div>
<div class="numdiv">
<p style="color: #4CC4E0;">本年新增</p>
<span style="color: #EEC25B;font-size: 30px;">6483</span><span style="color: #4CC4E0;">个</span>
</div>
</div>
</div>
</div>
<div class="bottop">
<div class="botbanner">
<div style="margin-left: 20px;position: absolute;">瓶装燃气用户分析</div>
<img src="../../../assets/mapinages/Group1129.png" alt="" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;">
</div>
<div class="botnumber">
<div id="myChartpieone" :style="{width: '400px', height: '200px'}"></div>
</div>
</div>
</div>
</div>
<div class="bottlebottom">
<operationNum></operationNum>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import operationNum from "./components/operationNum";
import { EditorMap } from "@/utils/mapClass/map";
import { mapGetters } from "vuex";
// import { EditorMap } from "@/utils/mapClass/getPath.js";
export default {
components: {
operationNum,
},
data() {
return {
//地图
// map: null,
}
},
computed: {
...mapGetters([ "systemSetting"])
},
mounted () {
this.drawLine();
const path = eval(this.systemSetting.map_center);
this.map = new EditorMap(
"map",
{
center: path,
zoom: 14.5,
},
this
);
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart1 = this.$echarts.init(document.getElementById("myChartpieone"));
// 绘制图表
myChart1.setOption({
grid: {
bottom: "7%",
containLabel: true,
},
legend: {
orient:"horizontal",
icon: "circle",
x:'right',
y:' center',
width:'300',
padding:[25, 30,0, 0],
itemWidth:10,
textStyle:{
color:'#000',
},
},
tooltip: {
trigger: 'item',
},
series: [
{
name: '任务概况',
type: 'pie',
radius: ['50%', '70%'],
center: ['50%','60%'],
data: [
{
value: 40,
name: '居民',
itemStyle: { color: '#4CC4E0' }
},
{
value: 59,
name: '非居民' ,
itemStyle: { color: '#EEC25B' }
},
],
labelLine:{
length:20,
length2:20,
},
label:{
color:'#fff',
fontSize: 14,
// formatter:"{b}\n\n",
// padding:[0,-55],
normal: {
show: true,
position: 'outer',
// formatter: '{d}%, {c} \n\n',
//模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
formatter: "{a_set|{b}}{b_set|{d}%}",
// formatter: "{a_set|{b}}\n{c_set|{d}%}\n{b|}\n\n",
borderWidth: 10,
borderRadius: 4,
rich: {
a_set: {
color: "auto",
// lineHeight: 20,
align: "left",
// padding: [55, -40, -15, -40],
},
b_set:{
color: "auto",
},
}
}
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
}
}
};
</script>
<style lang="scss" scoped>
.bottletop{
width: 100%;
height: 450px;
}
.bottletopleft{
width: 400px;
height: 100%;
float: left;
}
.bottop{
width: 100%;
height: 50%;
}
.botbanner{
width: 100%;
height: 30px;
position: relative;
font-weight: bolder;
}
.botnumber{
width: 100%;
height: 100%;
}
.botimage{
float: left;
width: 100px;
height: 200px;
position: relative;
margin-left: 20px;
}
.ima{
width: 100%;
position: absolute;
text-align: center;
top: 0;
margin-top: 60px;
}
.botnum{
float: left;
width: 70%;
height: 200px;
padding: 30px 0 25px 25px;
}
.numdiv{
width: 50%;
text-align: center;
float: left;
}
.bottletopcenter{
width: 45%;
height: 100%;
float: left;
margin-left: 40px;
}
#map{
width: 100%;
height: 100%;
}
.bottletopright{
width: 400px;
height: 100%;
float: left;
margin-left: 40px;
}
.bottlebottom{
width: 100%;
height: 340px;
margin-top: 30px;
}
</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