Skip to content

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

左边任务完成率统计图

parent 84b45ab5
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 87 deletions
gassafetyprogress-web/src/components/bigWindow/leftBar.vue
View file @ a33bc6ce
<template> <template>
<div> <div>
<!-- 基本信息 -->
<div> <div>
<div class="item1"> <div class="item1">
<span class="dot"> <span class="dot">
...@@ -10,7 +12,7 @@ ...@@ -10,7 +12,7 @@
<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: #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 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="left-top" style="margin-top: 40px;width: 430px;margin-left: 10px;display: flex;justify-content: space-around;"> <div class="left-top" style="margin-top: 40px;width: 430px;margin-left: 10px;display: flex;justify-content: space-around;">
<div style="width: 40%;text-align: center;color: #339CC9;"> <div style="width: 40%;text-align: center;color: #339CC9;">
<div class="div-p">从业人员数</div> <div class="div-p">从业人员数</div>
...@@ -22,6 +24,9 @@ ...@@ -22,6 +24,9 @@
</div> </div>
</div> </div>
<!-- 安全监管 -->
<div> <div>
<div class="item1" style="margin-top: 30px;"> <div class="item1" style="margin-top: 30px;">
<span class="dot"> <span class="dot">
...@@ -34,20 +39,32 @@ ...@@ -34,20 +39,32 @@
</div> </div>
</div> </div>
<div id="main1" style="width: 100%;height: 280px;"></div> <div id="main1" style="width: 100%;height: 280px;"></div>
<!-- <div class="echarts-two" style="margin-top: 30px;width: 430px;margin-left: 10px;"> -->
<div>
<div class="item1" style="margin-top: 30px;"> <!-- 任务完成率 -->
<span class="dot"> <div>
<span class="dot-inner"></span> <div class="item1" style="margin-top: 30px;">
</span> <span class="dot">
<span style="letter-spacing :3px;color:#cddbe4">任务完成率</span> <span class="dot-inner"></span>
<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> <span style="letter-spacing :3px;color:#cddbe4">任务完成率</span>
<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: #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>
<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 id="myCharttwo" :style="{width: '450px', height: '300px'}"></div>
<div class="titleTex titleTex1">
● 已完成数量:{{allNum.typeOne}}
</div>
<div class="titleTex titleTex2">
● 未成数量:{{allNum.typeTwo}}
</div>
<!-- <div class="echarts-two" style="margin-top: 30px;width: 430px;margin-left: 10px;"> -->
<div class="div-el">
<!-- <div class="div-el">
<div class="el-left">入户安检</div> <div class="el-left">入户安检</div>
<el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="allNum.typeOne*100"></el-progress> <el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="allNum.typeOne*100"></el-progress>
</div> </div>
...@@ -62,7 +79,7 @@ ...@@ -62,7 +79,7 @@
<div class="div-el"> <div class="div-el">
<div class="el-left">其他</div> <div class="el-left">其他</div>
<el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="allNum.typeFor*100" status="exception"></el-progress> <el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="allNum.typeFor*100" status="exception"></el-progress>
</div> </div> -->
<!-- </div> --> <!-- </div> -->
</div> </div>
</template> </template>
...@@ -164,12 +181,92 @@ ...@@ -164,12 +181,92 @@
selectWorkOrderNum (this.enterpriseIds).then(response => { selectWorkOrderNum (this.enterpriseIds).then(response => {
console.log(response); console.log(response);
this.allNum=response.data; this.allNum=response.data;
this.initdata();
}); });
}else { }else {
this.allNum = this.zeroNum; this.allNum = this.zeroNum;
this.initdata();
} }
}, },
initdata(){
// 基于准备好的dom，初始化echarts实例
//console.log(data.renwu[0]+"=-=-=-"+data.renwu[1])
let myChart2 = this.$echarts.init(document.getElementById('myCharttwo'))
// 绘制图表
myChart2.setOption({
title: {
text: '任务总数量:'+(this.allNum.typeOne+this.allNum.typeTwo),
left: 'center',
top :20,
textStyle:{
color: "#00ffff"
}
},
tooltip: {
trigger: 'item',
},
series: [
{
name: '任务概况',
type: 'pie',
radius: '60%',
center: ['50%','58%'],
data: [
{
value: this.allNum.typeTwo,
name: '未完成',
itemStyle: { color: '#09f' }
},
{
value: this.allNum.typeOne,
name: '已完成' ,
itemStyle: { color: '#00ffff' }
},
],
labelLine:{
length:20,
length2:50,
},
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}}\n{b_set|{d}%}\n\n\n",
// formatter: "{a_set|{b}}\n{c_set|{d}%}\n{b|}\n\n",
borderWidth: 20,
borderRadius: 4,
padding: [0, -55],
rich: {
a_set: {
color: "#fff",
lineHeight: 20,
align: "center",
padding: [55, -40, -15, -40],
},
b_set:{
color: "auto",
},
}
}
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
},
//折线图 //折线图
drawLine(data){ drawLine(data){
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
...@@ -402,4 +499,10 @@ ...@@ -402,4 +499,10 @@
::v-deep .el-progress-bar__innerText { ::v-deep .el-progress-bar__innerText {
color: #1e516f; color: #1e516f;
} }
.titleTex{
height: 20px;margin-top: 0px;font-size: 15px;color: #00ffff;width: 100%;text-align: center;
}
.titleTex2{
color: #0099ff;
}
</style> </style>
gassafetyprogress-web/src/components/bigWindow/rightBar.vue
View file @ a33bc6ce
<template> <template>
<div style="height: 100%"> <div style="height: 100%">
<!-- 报警信息 -->
<div> <div>
<div class="item1"> <div class="item1">
<span class="dot"> <span class="dot">
...@@ -90,81 +92,9 @@ ...@@ -90,81 +92,9 @@
</div> </div>
</div> </div>
<!-- <div style="width: 100%;height: 200px;background-color: #44d7dc;">
<el-table
size="mini"
:data="tableData"
style="width: 100%"
:height="tableHeight"
class="el-bottom"
ref="table"
>
<el-table-column prop="unitName" label="所在单位" width="100">
</el-table-column>
<el-table-column prop="detectorType" label="设备类型" width="">
</el-table-column>
<el-table-column prop="statusName" label="预警信息" width="">
</el-table-column>
<el-table-column prop="alarmTime" label="预警时间" width="160">
</el-table-column>
<el-table-column prop="handledStatus" label="状态" width="">
</el-table-column>
</el-table>
</div> -->
<div>
<div class="item1" style="margin-top: 10px">
<span class="dot">
<span class="dot-inner"></span>
</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
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">
...@@ -258,6 +188,61 @@ ...@@ -258,6 +188,61 @@
> >
</div> </div>
</div> </div>
<!-- 资源统计 -->
<div>
<div class="item1" style="margin-top: 10px">
<span class="dot">
<span class="dot-inner"></span>
</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
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>
</template> </template>
......
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