787 lines
26 KiB
Vue
787 lines
26 KiB
Vue
<template>
|
|
<!-- 预警分析 -->
|
|
<vue-scroll style="height: 100%">
|
|
<div class="earlyWarning">
|
|
<div class="earlyWarning_top">
|
|
<div class="equipment_info">
|
|
<div class="earlyWarning_title">
|
|
今日施工情况
|
|
</div>
|
|
<div class="equipment_info_item item_top"><span>5/<i>2</i></span>设备数量</div>
|
|
<div class="equipment_info_item item_bootomleft"><span>56</span>运行次数</div>
|
|
<div class="equipment_info_item item_bootomright"><span>56</span>违章次数</div>
|
|
</div>
|
|
<div class="equipment_workernum">
|
|
<div class="earlyWarning_title">
|
|
工作循环次数
|
|
<div class="search_box">
|
|
<el-select size="medium" v-model="value" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
<div class="echart_nav">
|
|
<li :class="{'active': num == 15}" @click="changeNum(15)">近15次</li>
|
|
<li :class="{'active': num == 50}" @click="changeNum(50)">近50次</li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ref="echart1" class="echart1"></div>
|
|
</div>
|
|
</div>
|
|
<div class="earlyWarning_center">
|
|
<div class="earlyWarning_statistics">
|
|
<div class="earlyWarning_title">
|
|
报警统计
|
|
<div class="echart_nav">
|
|
<li :class="{'active': num == 15}" @click="changeNum(15)">近7日</li>
|
|
<li :class="{'active': num == 50}" @click="changeNum(50)">近30日</li>
|
|
</div>
|
|
</div>
|
|
<div class="earlyWarning_pie_box">
|
|
<div class="echart2_box">
|
|
<div ref="echart2" class="echart2"></div>
|
|
<div class="echart2_title">
|
|
<span>3214</span>
|
|
报警
|
|
</div>
|
|
</div>
|
|
<div class="ehcart2_emphasis_box">
|
|
<div class="ehcart2_emphasis_item" v-for="(item, index) in echart2Data" :key="index">
|
|
<span :style="{'background': colorList[index]}"></span>
|
|
{{item.name}}<b>{{item.value}}</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="earlyWarning_weight">
|
|
<div class="earlyWarning_title">
|
|
运行重量/载重百分百
|
|
<div class="search_box">
|
|
<el-select size="medium" v-model="value" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
<div class="echart_nav">
|
|
<li :class="{'active': num == 15}" @click="changeNum(15)">近15次</li>
|
|
<li :class="{'active': num == 50}" @click="changeNum(50)">近50次</li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ref="echart4" class="echart4"></div>
|
|
</div>
|
|
</div>
|
|
<div class="earlyWarning_bottom">
|
|
<div class="earlyWarning_ranking">
|
|
<div class="earlyWarning_title">
|
|
工作循环次数
|
|
</div>
|
|
<div class="ranking_list">
|
|
<ul>
|
|
<li>
|
|
<b><div class="num">808</div>次</b>
|
|
<img src="./../../../assets/images/operationInfo/silver_medal.png"/>
|
|
<span>李雅</span>
|
|
</li>
|
|
<li>
|
|
<b><div class="num">808</div>次</b>
|
|
<img src="./../../../assets/images/operationInfo/gold_medal.png"/>
|
|
<span>王胜</span>
|
|
</li>
|
|
<li>
|
|
<b><div class="num">808</div>次</b>
|
|
<img src="./../../../assets/images/operationInfo/copper_medal.png"/>
|
|
<span>李雅</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="earlyWarning_trend">
|
|
<div class="earlyWarning_title">
|
|
预警报警趋势统计
|
|
<div class="search_box">
|
|
<el-select size="medium" v-model="value2" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
<el-date-picker
|
|
class="serarch_picker"
|
|
size="medium"
|
|
v-model="value1"
|
|
type="daterange"
|
|
range-separator="-"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期">
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
<div ref="echart3" class="echart3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts4';;
|
|
export default {
|
|
data(){
|
|
return{
|
|
options:[{
|
|
label: '123',
|
|
value: 1
|
|
}],
|
|
value: "",
|
|
value2: "",
|
|
num: 15,
|
|
value1: "",
|
|
chart1: Object,
|
|
option1:{},
|
|
chart2: Object,
|
|
option2:{},
|
|
chart3: Object,
|
|
option3:{},
|
|
chart4: Object,
|
|
option4:{},
|
|
echart2Data:[],
|
|
colorList:['#786FF0','#FF6E5F']
|
|
}
|
|
},
|
|
created(){
|
|
|
|
},
|
|
mounted(){
|
|
this.createdEchart1();
|
|
this.createdEchart2();
|
|
this.createdEchart3();
|
|
this.createdEchart4();
|
|
},
|
|
methods:{
|
|
changeNum(val){
|
|
this.num = val;
|
|
},
|
|
createdEchart1() {
|
|
let chart1 = echarts.init(this.$refs['echart1']);
|
|
console.log(this.$refs['echart1'])
|
|
this.chart1 = chart1;
|
|
chart1.clear();
|
|
this.option1 = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid:{
|
|
top:"30px",
|
|
left:"40px",
|
|
right:"15px",
|
|
bottom:"30px"
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['7-01', '7-02', '7-03', '7-04', '7-05', '7-06', '7-07', '7-08', '7-09','7-10','7-11','7-12', '7-13','7-14','7-15'],
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "dashed"
|
|
}
|
|
},
|
|
axisTick:{
|
|
show: false
|
|
},
|
|
axisLabel:{
|
|
color: '#7F8694'
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "dashed"
|
|
}
|
|
},
|
|
axisTick:{
|
|
show: false
|
|
},
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "solid"
|
|
}
|
|
},
|
|
axisLabel:{
|
|
color: '#7F8694'
|
|
}
|
|
},
|
|
series: [{
|
|
data: [120, 200, 150, 80, 70, 110, 130,200,100,300,400,500,230,356,526,333, 130,200,100],
|
|
type: 'bar',
|
|
color: '#295DB3'
|
|
}]
|
|
}
|
|
chart1.setOption(this.option1);
|
|
},
|
|
createdEchart2(){
|
|
console.log(this.$refs['echart2'])
|
|
let chart2 = echarts.init(this.$refs['echart2']);
|
|
this.echart2Data= [
|
|
{value: 2314, name: '超重'},
|
|
{value: 987, name: '超员'}
|
|
]
|
|
this.chart2 = chart2;
|
|
chart2.clear();
|
|
this.option2 = {
|
|
grid:{
|
|
top:"0px",
|
|
left:"0px",
|
|
right:"0px",
|
|
bottom:"0px"
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
top: '5%',
|
|
left: 'center',
|
|
show: false
|
|
},
|
|
color:this.colorList,
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['55%', '80%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
fontSize: '16',
|
|
color: "#fff"
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: this.echart2Data
|
|
}
|
|
]
|
|
}
|
|
chart2.setOption(this.option2);
|
|
console.log(chart2.dispatchAction)
|
|
// chart2.dispatchAction({
|
|
// type: 'highlight',
|
|
// seriesIndex: 0,
|
|
// dataIndex: 1
|
|
// });
|
|
// chart2.on('mouseover', function(e) {
|
|
// //当检测到鼠标悬停事件，取消默认选中高亮
|
|
// chart2.dispatchAction({
|
|
// type: 'downplay',
|
|
// seriesIndex: 0,
|
|
// dataIndex: 1
|
|
// });
|
|
// //高亮显示悬停的那块
|
|
// chart2.dispatchAction({
|
|
// type: 'highlight',
|
|
// seriesIndex: e.dataIndex,
|
|
// dataIndex: e.dataIndex
|
|
// });
|
|
// });
|
|
// //检测鼠标移出后显示之前默认高亮的那块
|
|
// chart2.on('mouseout', function(e) {
|
|
// chart2.dispatchAction({
|
|
// type: 'highlight',
|
|
// seriesIndex: 0,
|
|
// dataIndex: 1
|
|
// });
|
|
// });
|
|
},
|
|
createdEchart3(){
|
|
let chart3 = echarts.init(this.$refs['echart3']);
|
|
this.chart3 = chart3;
|
|
chart3.clear();
|
|
this.option3={
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['报警数', '预警数'],
|
|
x: "center",
|
|
top: 0,
|
|
textStyle:{
|
|
color: "#B1B5BE",
|
|
fontSize: 14
|
|
}
|
|
},
|
|
grid:{
|
|
top:"40px",
|
|
left:"60px",
|
|
right:"35px",
|
|
bottom:"40px"
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['7-01', '7-02', '7-03', '7-04', '7-05', '7-06', '7-07', '7-08', '7-09','7-10','7-11','7-12','7-13','7-14','7-15'],
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "dashed"
|
|
}
|
|
},
|
|
axisTick:{
|
|
show: false
|
|
},
|
|
axisLabel:{
|
|
color: '#7F8694'
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "dashed"
|
|
}
|
|
},
|
|
axisTick:{
|
|
show: false
|
|
},
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "dashed"
|
|
}
|
|
},
|
|
axisLabel:{
|
|
color: '#7F8694'
|
|
}
|
|
},
|
|
axisPointer:{
|
|
lineStyle:{
|
|
color: "#82DEE8",
|
|
type: "dashed"
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '报警数',
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol:'circle',
|
|
showSymbol: false,
|
|
data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230, 90, 230, 210,],
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(254, 108, 127, 1)'
|
|
}, {
|
|
offset: 1,
|
|
color: 'rgba(254, 108, 127, 0)'
|
|
}])
|
|
},
|
|
lineStyle:{
|
|
color: "#FE6C7F"
|
|
},
|
|
itemStyle:{
|
|
color: "#FE6C7F"
|
|
}
|
|
},
|
|
{
|
|
name: '预警数',
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol:'circle',
|
|
showSymbol: false,
|
|
data: [220, 182, 191, 234, 290, 330, 310, 134, 121, 154, 632, 210, 290, 330, 310],
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(85, 125, 237, 1)'
|
|
}, {
|
|
offset: 1,
|
|
color: 'rgba(85, 125, 237, 0)'
|
|
}])
|
|
},
|
|
lineStyle:{
|
|
color: "#557DED"
|
|
},
|
|
itemStyle:{
|
|
color: "#557DED"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
chart3.setOption(this.option3);
|
|
},
|
|
createdEchart4(){
|
|
let chart4 = echarts.init(this.$refs['echart4']);
|
|
console.log(this.$refs['echart4'])
|
|
this.chart4 = chart4;
|
|
chart4.clear();
|
|
this.option4 = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line',
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: "#82DEE8"
|
|
}
|
|
},
|
|
backgroundColor: "rgba(24, 30, 71, 0.8)"
|
|
},
|
|
grid:{
|
|
top:"30px",
|
|
left:"40px",
|
|
right:"15px",
|
|
bottom:"30px"
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['7-01', '7-02', '7-03', '7-04', '7-05', '7-06', '7-07', '7-08', '7-09','7-10','7-11','7-12', '7-13','7-14','7-15'],
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "dashed"
|
|
}
|
|
},
|
|
axisTick:{
|
|
show: false
|
|
},
|
|
axisLabel:{
|
|
color: '#7F8694'
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "dashed"
|
|
}
|
|
},
|
|
axisTick:{
|
|
show: false
|
|
},
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "solid"
|
|
}
|
|
},
|
|
axisLabel:{
|
|
color: '#7F8694'
|
|
}
|
|
},
|
|
series: [{
|
|
name: "报警总数",
|
|
data: [220, 300, 250, 180, 170, 210, 230,300,200,400,500,600,330,456,626],
|
|
type: 'line',
|
|
color: '#E23132'
|
|
},
|
|
{
|
|
name: "预警总数",
|
|
data: [120, 200, 150, 80, 70, 110, 130,200,100,300,400,500,230,356,526],
|
|
type: 'bar',
|
|
color: '#786FF0'
|
|
}]
|
|
}
|
|
chart4.setOption(this.option4);
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.earlyWarning{
|
|
padding: 25px;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
background: #091225;
|
|
.earlyWarning_top{
|
|
width: 100%;
|
|
display: flex;
|
|
margin-bottom: 12px;
|
|
.equipment_info{
|
|
padding-top: 9px;
|
|
width: 30%;
|
|
height: 290px;
|
|
margin-right: 20px;
|
|
background: #0D1A34;
|
|
position: relative;
|
|
border: 1px solid #12294F;
|
|
}
|
|
.equipment_info_item{
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
// justify-content: center;
|
|
width: 96px;
|
|
height: 100px;
|
|
background: url('./../../projectLevel/assets/images/menuBG_active.gif') no-repeat center;
|
|
background-size: 100%;
|
|
span{
|
|
font-size: 30px;
|
|
i{
|
|
color: #88E7F0;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
.item_top{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 57px;
|
|
transform: translateX(-50%);
|
|
width: 120px;
|
|
height: 138px;
|
|
padding-top: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
.item_bootomleft{
|
|
position: absolute;
|
|
left: 35px;
|
|
bottom: 43px;
|
|
}
|
|
.item_bootomright{
|
|
position: absolute;
|
|
right: 33px;
|
|
bottom: 43px;
|
|
}
|
|
.equipment_workernum{
|
|
flex: 1;
|
|
height: 290px;
|
|
background: #0D1A34;
|
|
padding-top: 9px;
|
|
border: 1px solid #12294F;
|
|
}
|
|
}
|
|
.echart_nav{
|
|
display: flex;
|
|
margin-left: 9px;
|
|
li{
|
|
width: 55px;
|
|
height: 23px;
|
|
background: #12305F;
|
|
color: #7E899B;
|
|
line-height: 23px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
.active{
|
|
background: #153E7D;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.earlyWarning_title{
|
|
color: #7CD3DE;
|
|
position: relative;
|
|
padding-left: 20px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
margin-bottom: 14px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.search_box{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 16px;
|
|
/deep/ .el-input{
|
|
width: 120px;
|
|
}
|
|
.serarch_picker{
|
|
margin-left: 9px;
|
|
width: 240px;
|
|
}
|
|
}
|
|
|
|
}
|
|
.earlyWarning_title::before{
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 2px;
|
|
height: 31px;
|
|
background: linear-gradient(to bottom, #88E7F0, #15315F);
|
|
}
|
|
.earlyWarning_center{
|
|
width: 100%;
|
|
height: 220px;
|
|
// background: #0D1A34;
|
|
// padding-top: 9px;
|
|
// border: 1px solid #12294F;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
}
|
|
.earlyWarning_statistics{
|
|
width: 30%;
|
|
height: 220px;
|
|
background: #0D1A34;
|
|
padding-top: 9px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #12294F;
|
|
margin-right: 20px;
|
|
.echart_nav{
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
.earlyWarning_weight{
|
|
flex: 1;
|
|
height: 220px;
|
|
background: #0D1A34;
|
|
padding-top: 9px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #12294F;
|
|
}
|
|
.earlyWarning_bottom{
|
|
width: 100%;
|
|
height: 200px;
|
|
display: flex;
|
|
}
|
|
.earlyWarning_ranking{
|
|
width: 30%;
|
|
height: 200px;
|
|
background: #0D1A34;
|
|
padding-top: 9px;
|
|
border: 1px solid #12294F;
|
|
margin-right: 20px;
|
|
.ranking_list{
|
|
ul{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-around;
|
|
li{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
color: #B9BEC4;
|
|
b{
|
|
margin-bottom: 10px;
|
|
font-weight: normal;
|
|
display: flex;
|
|
align-items: center;
|
|
.num{
|
|
font-size: 20px;
|
|
display: inline-block;
|
|
margin-right: 4px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
img{
|
|
margin-bottom: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.earlyWarning_trend{
|
|
flex: 1;
|
|
height: 200px;
|
|
background: #0D1A34;
|
|
padding-top: 9px;
|
|
border: 1px solid #12294F;
|
|
}
|
|
.echart1{
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
height: 230px;
|
|
}
|
|
.earlyWarning_pie_box{
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.echart2_box{
|
|
width: 148px;
|
|
height: 148px;
|
|
// margin-left: 50px;
|
|
position: relative;
|
|
.echart2{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.echart2_title{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
text-align: center;
|
|
span{
|
|
display: block;
|
|
font-size: 21px;
|
|
}
|
|
}
|
|
}
|
|
.ehcart2_emphasis_box{
|
|
// flex: 1;
|
|
display: flex;
|
|
margin-left: 30px;
|
|
// flex-wrap: wrap;
|
|
flex-direction: column;
|
|
align-content: flex-start;
|
|
padding-top: 26px;
|
|
.ehcart2_emphasis_item{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-items: center;
|
|
// margin-right: 75px;
|
|
height: 20px;
|
|
color: #C7CAD0;
|
|
margin-bottom: 18px;
|
|
font-size: 13px;
|
|
span{
|
|
display: block;
|
|
border-radius: 50%;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
b{
|
|
font-size: 22px;
|
|
color: #fff;
|
|
font-weight: normal;
|
|
margin-left: 16px;
|
|
}
|
|
}
|
|
}
|
|
.ehcart3_title{
|
|
color: #D6D8DC;
|
|
font-size: 13px;
|
|
padding-left: 34px;
|
|
}
|
|
.echart3{
|
|
width: 100%;
|
|
height: 174px;
|
|
margin-top: -10px;
|
|
}
|
|
.echart4{
|
|
width: 100%;
|
|
height: 180px;
|
|
margin-top: -16px;
|
|
}
|
|
}
|
|
</style> |