Skip to content

N
Nei_Meng_An_Jian_4
Commit f8c51df7 authored by liuyuping's avatar liuyuping
Browse files
Options

'2021-12-20'

parent 1f655da3
Hide whitespace changes
Inline Side-by-side
Showing with 1000 additions and 1101 deletions
src/api/operatePortrait.js
View file @ f8c51df7
......@@ -42,8 +42,15 @@ export function analyzeHDNum(deptId) {
}
export function sensorAlarmNum(deptId) {
// return request5({
// url: '/api/sensor/analyzeAlarmNum',
// method: 'get',
// params: {
// deptId
// }
// })
return request5({
url: '/api/sensor/analyzeAlarmNum',
url: '/api/sensor/monitor',
method: 'get',
params: {
deptId
......
src/components/bigdata/bigdataLeft.vue
View file @ f8c51df7
<template>
<div class="big-data-left-wrapper">
<div class="big-data1 big-data">
<div class="big-data-title-wrapper">
在线监测设备
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart1">
<div class="alarm-sum-wrapper">
<div>设备总数量</div>
<div>{{sensorSum}}</div>
</div>
<div class="big-data-chart1-alarm1"></div>
</div>
</div>
<div class="big-data3 big-data">
<div class="big-data-title-wrapper">
矿企产量趋势图
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart3"></div>
</div>
<div class="big-data5 big-data">
<div class="big-data-title-wrapper">
重大安全隐患整改数量情况统计
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart5"></div>
</div>
<div class="big-data7 big-data" style="position: relative;">
<div class="big-data-title-wrapper">
行业生产风险统计
<div class="big-data-title-dec"></div>
</div>
<div class="to-right-top-select">
<el-select
v-model="curChosenIndus"
size="mini"
>
<el-option
v-for="item in curIndus"
:key="item.label"
:value="item.label"
:label="item.label"
></el-option>
</el-select>
</div>
<div class="big-data-chart7"></div>
</div>
</div>
<div class="big-data-left-wrapper">
<div class="big-data1 big-data">
<div class="big-data-title-wrapper">
在线监测设备
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart1">
<div class="alarm-sum-wrapper">
<div>设备总数量</div>
<div>{{ sensorSum }}</div>
</div>
<div class="big-data-chart1-alarm1"></div>
</div>
</div>
<div class="big-data3 big-data">
<div class="big-data-title-wrapper">
矿企产量趋势图
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart3"></div>
</div>
<div class="big-data5 big-data">
<div class="big-data-title-wrapper">
重大安全隐患整改数量情况统计
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart5"></div>
</div>
<div class="big-data7 big-data" style="position: relative;">
<div class="big-data-title-wrapper">
行业生产风险统计
<div class="big-data-title-dec"></div>
</div>
<div class="to-right-top-select">
<el-select v-model="curChosenIndus" size="mini">
<el-option v-for="item in curIndus" :key="item.label" :value="item.label" :label="item.label"></el-option>
</el-select>
</div>
<div class="big-data-chart7"></div>
</div>
</div>
</template>
<script>
import { dictDetail } from '@/api/index.js'
import { sensorAlarmNum, analyzeOutputTrend, analyzeHDNum, analyzeIndusRiskNum } from '@/api/operatePortrait.js'
export default {
data() {
return {
curIndus: [],
curChosenIndus: '煤矿',
sensorSum: 0
}
},
async mounted() {
await dictDetail({
page: 0,
size: 999,
sort: 'id,desc',
dictName: '所属行业'
}).then(res => {
this.curIndus = res.content.filter(item => item.createBy==='admin')
console.log(this.curIndus, 'this.curIndus _________ this.curIndus')
})
this.init1()
this.init3()
this.init5()
this.init7()
},
methods: {
async init1() {
let alarmNum = 0
let normalNum = 0
await sensorAlarmNum(this.$store.state.compony_info.id).then(res => {
alarmNum = res.alarmNum
normalNum = res.normalNum
this.sensorSum = res.totalNum
})
const targetDom = document.querySelector('.big-data-chart1-alarm1')
const mychart = echarts.init(targetDom)
const option = {
series: [
{
color: ['#1DB3FE', '#00D6E8'],
name: 'alarm1',
type: 'pie',
radius: ['20%', '70%'],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
label: {
align: "left",
normal: {
formatter(v) {
return `${v.name}\n${v.value}`;
},
textStyle: {
fontSize: 16
}
}
},
labelLine: {
length: 3,
length2: 10
},
data: [
{
value: normalNum,
name: '在线设备'
},
{
value: alarmNum,
name: '离线设备'
}
]
}
]
}
mychart.setOption(option)
},
async init3() {
await analyzeOutputTrend().then(res => {
let myRenderTime = []
let curMaxSize = 0;
let curIndex = 0;
res.forEach((item, index) => {
if (item.monthOutputDtos.length > curMaxSize) {
curMaxSize = item.monthOutputDtos.length
curIndex = index
}
})
myRenderTime = res[curIndex].monthOutputDtos.map(item => item.ym)
const targetDom = document.querySelector('.big-data-chart3');
const mychart = echarts.init(targetDom)
const option = {
color: ["#E74C3C", "#F39C12", "#ECF0F1", "#9B59B6", "#2ECC71"],
tooltip: {
trigger: "axis"
},
grid: {
left: '10%',
top: '15%',
bottom: '10%',
right: '10%'
},
xAxis: {
type: "category",
name: '时间',
nameTextStyle: {
color: '#ffffff'
},
axisLabel: {
color: "#FFF"
},
data: myRenderTime
},
yAxis: {
type: "value",
name: '产量',
axisLine: {
show: false
},
nameTextStyle: {
color: '#ffffff'
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
axisLabel: {
color: "#fff"
}
},
series: res.map(item => {
return {
type: 'line',
name: item.industry,
smooth: true,
symbol: 'none',
data: item.monthOutputDtos.map(item => item.output)
}
})
}
mychart.setOption(option)
})
},
async init5() {
await analyzeHDNum().then(res => {
console.log(res, 'analyzeHDNum analyzeHDNum analyzeHDNum')
const targetDom = document.querySelector('.big-data-chart5')
const mychart = echarts.init(targetDom)
const option = {
title: {
text: "总数量",
subtext: "" + res.totalNum,
left: "center",
top: "40%",
textStyle: {
color: "#F88F12",
fontSize: "20"
},
subtextStyle: {
color: "#F88F12",
fontSize: "20"
}
},
tooltip: {
trigger: "item"
},
legend: {
show: false
},
series: [
{
type: "pie",
radius: ["40%", "78%"],
avoidLabelOverLap: true,
data: [
{
value: res.seriousNotRectifiedNum,
name: "重大隐患未闭环",
itemStyle: {
color: "#E74C3C"
}
},
{
value: res.seriousRectifiedNum,
name: "重大隐患已闭环",
itemStyle: {
color: "#FDFA02"
}
},
],
label: {
align: "left",
normal: {
formatter(v) {
return `${v.name}\n${v.value}`;
},
textStyle: {
fontSize: 16
}
}
},
labelLine: {
length: 3,
length2: 10
}
}
]
}
mychart.setOption(option)
})
},
async init7() {
await analyzeIndusRiskNum(this.curIndus.filter(item => item.label === this.curChosenIndus)[0].id).then(res => {
let lowNum = res.riskBlueNum
let generalNum = res.riskYellowNum
let greaterNum = res.riskOrangeNum
let majorNum = res.riskRedNum
let totalNum = res.totalNum
const targetDom = document.querySelector('.big-data-chart7')
const mychart = echarts.init(targetDom)
mychart.clear()
const option = {
title: {
text: "总数量",
subtext: "" + totalNum,
left: "center",
top: "40%",
textStyle: {
color: "#F88F12",
fontSize: "20"
},
subtextStyle: {
color: "#F88F12",
fontSize: "20"
}
},
tooltip: {
trigger: "item"
},
legend: {
show: false
},
series: [
{
type: "pie",
radius: ["40%", "78%"],
avoidLabelOverLap: true,
data: [
{
value: lowNum,
name: "低风险",
itemStyle: {
color: "#057AFD"
}
},
{
value: generalNum,
name: "一般风险",
itemStyle: {
color: "#FEFA03"
}
},
{
value: greaterNum,
name: "较大风险",
itemStyle: {
color: "#F88F12"
}
},
{
value: majorNum,
name: "重大风险",
itemStyle: {
color: "#FF414B"
}
},
],
label: {
align: "left",
normal: {
formatter(v) {
return `${v.name}\n${v.value}`;
},
textStyle: {
fontSize: 16
}
}
},
labelLine: {
length: 3,
length2: 10
}
}
]
}
mychart.setOption(option)
})
}
},
watch: {
curChosenIndus(newVal, oldVal) {
if (newVal !== oldVal) {
this.init7()
}
}
}
data() {
return {
curIndus: [],
curChosenIndus: '煤矿',
sensorSum: 0,
}
},
async mounted() {
await dictDetail({
page: 0,
size: 999,
sort: 'id,desc',
dictName: '所属行业',
}).then(res => {
this.curIndus = res.content.filter(item => item.createBy === 'admin')
console.log(this.curIndus, 'this.curIndus _________ this.curIndus')
})
this.init1()
this.init3()
this.init5()
this.init7()
},
methods: {
async init1() {
let alarmNum = 0
let normalNum = 0
await sensorAlarmNum(this.$store.state.compony_info.id).then(res => {
console.log(res, 'sensorAlarmNum sensorAlarmNUm')
alarmNum = res.offlineNum
normalNum = res.onlineNum
this.sensorSum = res.totalNum
})
const targetDom = document.querySelector('.big-data-chart1-alarm1')
const mychart = echarts.init(targetDom)
const option = {
series: [
{
color: ['#1DB3FE', '#00D6E8'],
name: 'alarm1',
type: 'pie',
radius: ['20%', '70%'],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8,
},
label: {
align: 'left',
normal: {
formatter(v) {
return `${v.name}\n${v.value}`
},
textStyle: {
fontSize: 16,
},
},
},
labelLine: {
length: 3,
length2: 10,
},
data: [
{
value: normalNum,
name: '在线设备',
},
{
value: alarmNum,
name: '离线设备',
},
],
},
],
}
mychart.setOption(option)
},
async init3() {
await analyzeOutputTrend().then(res => {
let myRenderTime = []
let curMaxSize = 0
let curIndex = 0
res.forEach((item, index) => {
if (item.monthOutputDtos.length > curMaxSize) {
curMaxSize = item.monthOutputDtos.length
curIndex = index
}
})
myRenderTime = res[curIndex].monthOutputDtos.map(item => item.ym)
const targetDom = document.querySelector('.big-data-chart3')
const mychart = echarts.init(targetDom)
const option = {
color: ['#E74C3C', '#F39C12', '#ECF0F1', '#9B59B6', '#2ECC71'],
tooltip: {
trigger: 'axis',
},
grid: {
left: '10%',
top: '15%',
bottom: '10%',
right: '10%',
},
xAxis: {
type: 'category',
name: '时间',
nameTextStyle: {
color: '#ffffff',
},
axisLabel: {
color: '#FFF',
},
data: myRenderTime,
},
yAxis: {
type: 'value',
name: '产量',
axisLine: {
show: false,
},
nameTextStyle: {
color: '#ffffff',
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,.1)',
},
},
axisLabel: {
color: '#fff',
},
},
series: res.map(item => {
return {
type: 'line',
name: item.industry,
smooth: true,
symbol: 'none',
data: item.monthOutputDtos.map(item => item.output),
}
}),
}
mychart.setOption(option)
})
},
async init5() {
await analyzeHDNum().then(res => {
console.log(res, 'analyzeHDNum analyzeHDNum analyzeHDNum')
const targetDom = document.querySelector('.big-data-chart5')
const mychart = echarts.init(targetDom)
const option = {
title: {
text: '总数量',
subtext: '' + res.totalNum,
left: 'center',
top: '40%',
textStyle: {
color: '#F88F12',
fontSize: '20',
},
subtextStyle: {
color: '#F88F12',
fontSize: '20',
},
},
tooltip: {
trigger: 'item',
},
legend: {
show: false,
},
series: [
{
type: 'pie',
radius: ['40%', '78%'],
avoidLabelOverLap: true,
data: [
{
value: res.seriousNotRectifiedNum,
name: '重大隐患未闭环',
itemStyle: {
color: '#E74C3C',
},
},
{
value: res.seriousRectifiedNum,
name: '重大隐患已闭环',
itemStyle: {
color: '#FDFA02',
},
},
],
label: {
align: 'left',
normal: {
formatter(v) {
return `${v.name}\n${v.value}`
},
textStyle: {
fontSize: 16,
},
},
},
labelLine: {
length: 3,
length2: 10,
},
},
],
}
mychart.setOption(option)
})
},
async init7() {
await analyzeIndusRiskNum(this.curIndus.filter(item => item.label === this.curChosenIndus)[0].id).then(res => {
let lowNum = res.riskBlueNum
let generalNum = res.riskYellowNum
let greaterNum = res.riskOrangeNum
let majorNum = res.riskRedNum
let totalNum = res.totalNum
const targetDom = document.querySelector('.big-data-chart7')
const mychart = echarts.init(targetDom)
mychart.clear()
const option = {
title: {
text: '总数量',
subtext: '' + totalNum,
left: 'center',
top: '40%',
textStyle: {
color: '#F88F12',
fontSize: '20',
},
subtextStyle: {
color: '#F88F12',
fontSize: '20',
},
},
tooltip: {
trigger: 'item',
},
legend: {
show: false,
},
series: [
{
type: 'pie',
radius: ['40%', '78%'],
avoidLabelOverLap: true,
data: [
{
value: lowNum,
name: '低风险',
itemStyle: {
color: '#057AFD',
},
},
{
value: generalNum,
name: '一般风险',
itemStyle: {
color: '#FEFA03',
},
},
{
value: greaterNum,
name: '较大风险',
itemStyle: {
color: '#F88F12',
},
},
{
value: majorNum,
name: '重大风险',
itemStyle: {
color: '#FF414B',
},
},
],
label: {
align: 'left',
normal: {
formatter(v) {
return `${v.name}\n${v.value}`
},
textStyle: {
fontSize: 16,
},
},
},
labelLine: {
length: 3,
length2: 10,
},
},
],
}
mychart.setOption(option)
})
},
},
watch: {
curChosenIndus(newVal, oldVal) {
if (newVal !== oldVal) {
this.init7()
}
},
},
}
</script>
<style lang="scss">
.to-right-top-select {
position: absolute;
right: 0;
top: 0;
width:118px;
height: 56px;
}
.big-data-left-wrapper {
position: absolute;
left: 0;
top: 0;
width: 21vw;
height: 90vh;
display: flex;
flex-direction: column;
color: #05D6EC;
z-index: 1000;
background: #040624;
> div {
flex-basis: 25%;
}
}
.big-data-title-wrapper {
position: relative;
font-family: "SourceHanSansCN-Medium";
color: aqua;
font-size: 16px;
font-weight: bold;
/* background: -webkit-gradient(linear, left bottom, left top, color-stop(23.583984375%, #3fffea), to(#007eff)); */
background: linear-gradient(0deg, #3fffea 23.583984375%, #007eff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-left: 80px;
padding-top: 5px;
.big-data-title-dec {
position: absolute;
left: 5px;
top: 5px;
width: 53px;
height: 21px;
background-repeat: no-repeat;
background-image: url('../../assets/images/dec4.png');
transform: scale(0.75);
}
}
.big-data {
display: flex;
flex-direction: column;
.big-data-chart1 {
flex-grow: 1;
display: flex;
flex-direction: column;
.alarm-sum-wrapper {
display: flex;
justify-content: space-around;
border: 1px solid #3FFFEA;
box-shadow: inset 0 8px 19px -7px #3fffea;
padding: 5px;
margin: 3px 10px;
font-size: 18px;
}
.big-data-chart1-alarm1 {
flex-grow: 1;
}
}
.big-data-chart2 {
.big-data-chart2-alarm-sum2 {
display: flex;
flex-direction: row;
justify-content: space-around;
border: 1px solid #3FFFEA;
box-shadow: inset 0 8px 19px -7px #3fffea;
padding: 5px;
margin: 3px 10px;
.big-data-chart2-sum {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
span {
&:first-child {
color: #7BB8C2;
font-size: 14px;
}
&:last-child {
color: #00FCFF;
font-size: 18px;
margin-left: 20px;
}
}
}
}
.big-data-chart2-table-wrapper {
display: flex;
flex-direction: column;
font-size: 14px;
text-align: center;
.big-data-chart2-table-title {
display: flex;
color: #019AEF;
.big-data-chart2-table-title1 {
flex-basis: 42%;
}
.big-data-chart2-table-title2 {
flex-basis: 26%;
}
.big-data-chart2-table-title3 {
flex-basis: 32%;
}
}
.big-data-chart2-table-content-wrapper {
flex-grow: 1;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
.big-data-chart2-table-content-item {
display: flex;
color: white;
background-color: rgba(32, 47, 88, .8);
padding: 2px;
margin: 2px 10px;
span {
&:nth-child(1) {
flex-basis: 42%;
}
&:nth-child(2) {
flex-basis: 26%;
}
&:nth-child(3) {
flex-basis: 32%;
}
}
}
}
}
}
.big-data-chart3 {
flex-grow: 1;
}
.big-data-chart4 {
flex-grow: 1;
}
.big-data-chart5 {
flex-grow: 1;
}
.big-data-chart6 {
flex-grow: 1;
}
.big-data-chart7 {
flex-grow: 1;
}
.big-data-chart8 {
flex-grow: 1;
}
.to-right-top-select {
position: absolute;
right: 0;
top: 0;
width: 118px;
height: 56px;
}
.big-data-left-wrapper {
position: absolute;
left: 0;
top: 0;
width: 21vw;
height: 90vh;
display: flex;
flex-direction: column;
color: #05d6ec;
z-index: 1000;
background: #040624;
> div {
flex-basis: 25%;
}
}
.big-data-title-wrapper {
position: relative;
font-family: 'SourceHanSansCN-Medium';
color: aqua;
font-size: 16px;
font-weight: bold;
/* background: -webkit-gradient(linear, left bottom, left top, color-stop(23.583984375%, #3fffea), to(#007eff)); */
background: linear-gradient(0deg, #3fffea 23.583984375%, #007eff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-left: 80px;
padding-top: 5px;
.big-data-title-dec {
position: absolute;
left: 5px;
top: 5px;
width: 53px;
height: 21px;
background-repeat: no-repeat;
background-image: url('../../assets/images/dec4.png');
transform: scale(0.75);
}
}
.big-data {
display: flex;
flex-direction: column;
.big-data-chart1 {
flex-grow: 1;
display: flex;
flex-direction: column;
.alarm-sum-wrapper {
display: flex;
justify-content: space-around;
border: 1px solid #3fffea;
box-shadow: inset 0 8px 19px -7px #3fffea;
padding: 5px;
margin: 3px 10px;
font-size: 18px;
}
.big-data-chart1-alarm1 {
flex-grow: 1;
}
}
.big-data-chart2 {
.big-data-chart2-alarm-sum2 {
display: flex;
flex-direction: row;
justify-content: space-around;
border: 1px solid #3fffea;
box-shadow: inset 0 8px 19px -7px #3fffea;
padding: 5px;
margin: 3px 10px;
.big-data-chart2-sum {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
span {
&:first-child {
color: #7bb8c2;
font-size: 14px;
}
&:last-child {
color: #00fcff;
font-size: 18px;
margin-left: 20px;
}
}
}
}
.big-data-chart2-table-wrapper {
display: flex;
flex-direction: column;
font-size: 14px;
text-align: center;
.big-data-chart2-table-title {
display: flex;
color: #019aef;
.big-data-chart2-table-title1 {
flex-basis: 42%;
}
.big-data-chart2-table-title2 {
flex-basis: 26%;
}
.big-data-chart2-table-title3 {
flex-basis: 32%;
}
}
.big-data-chart2-table-content-wrapper {
flex-grow: 1;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
.big-data-chart2-table-content-item {
display: flex;
color: white;
background-color: rgba(32, 47, 88, 0.8);
padding: 2px;
margin: 2px 10px;
span {
&:nth-child(1) {
flex-basis: 42%;
}
&:nth-child(2) {
flex-basis: 26%;
}
&:nth-child(3) {
flex-basis: 32%;
}
}
}
}
}
}
.big-data-chart3 {
flex-grow: 1;
}
.big-data-chart4 {
flex-grow: 1;
}
.big-data-chart5 {
flex-grow: 1;
}
.big-data-chart6 {
flex-grow: 1;
}
.big-data-chart7 {
flex-grow: 1;
}
.big-data-chart8 {
flex-grow: 1;
}
}
</style>
\ No newline at end of file
</style>
src/components/potrait/potrait.vue
View file @ f8c51df7
<template>
<div class="potrait-wrapper">
<div class="close-wrapper" @click="closeMySelf">
<svg t="1637978362846" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2517" width="32" height="32"><path d="M550.848 502.496l308.64-308.896a31.968 31.968 0 1 0-45.248-45.248l-308.608 308.896-308.64-308.928a31.968 31.968 0 1 0-45.248 45.248l308.64 308.896-308.64 308.896a31.968 31.968 0 1 0 45.248 45.248l308.64-308.896 308.608 308.896a31.968 31.968 0 1 0 45.248-45.248l-308.64-308.864z" p-id="2518" fill="#02fcfe"></path></svg>
</div>
<div class="basic-info">
<div class="basic-info-title">企业基础信息</div>
<div class="basic-info-item">
<div>采矿方法</div>
<div>{{ mineMethod }}</div>
</div>
<div class="basic-info-item">
<div>面积</div>
<div>{{ area }}</div>
</div>
<div class="basic-info-item">
<div>产能</div>
<div>{{ yields }}</div>
</div>
<div class="basic-info-item">
<div>矿种</div>
<div>{{ minerals }}</div>
</div>
</div>
<div class="basic-info1">
<div class="basic-info-title">企业监测设备</div>
<div class="chart" ref="mychart1"></div>
</div>
<div class="basic-info1">
<div class="basic-info-title">监测数据信息</div>
<div class="chart monitor-data-wrapper">
<div class="monitor-data">
<div class="monitor-data-title">监测点数量</div>
<div class="monitor-data-degree">{{monitorSum}}个</div>
</div>
<div class="monitor-data">
<div class="monitor-data-title">监测点数据</div>
<div class="monitor-data-degree">{{monitorData}}条</div>
</div>
<div class="monitor-data">
<div class="monitor-data-title">报警数据</div>
<div class="monitor-data-degree">{{alarmSum}}条</div>
</div>
<div class="monitor-data">
<div class="monitor-data-title">监测时长</div>
<div class="monitor-data-degree">{{timeSum}}天</div>
</div>
</div>
</div>
<div class="basic-info1">
<div class="basic-info-title">不同等级风险数量统计</div>
<div class="chart" ref="mychart3"></div>
</div>
<div class="basic-info1">
<div class="basic-info-title">重大安全事故隐患排查</div>
<div class="chart" ref="mychart4"></div>
</div>
</div>
<div class="potrait-wrapper">
<div class="close-wrapper" @click="closeMySelf">
<svg t="1637978362846" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2517" width="32" height="32"><path d="M550.848 502.496l308.64-308.896a31.968 31.968 0 1 0-45.248-45.248l-308.608 308.896-308.64-308.928a31.968 31.968 0 1 0-45.248 45.248l308.64 308.896-308.64 308.896a31.968 31.968 0 1 0 45.248 45.248l308.64-308.896 308.608 308.896a31.968 31.968 0 1 0 45.248-45.248l-308.64-308.864z" p-id="2518" fill="#02fcfe"></path></svg>
</div>
<div class="basic-info">
<div class="basic-info-title">企业基础信息</div>
<div class="basic-info-item">
<div>采矿方法</div>
<div>{{ mineMethod }}</div>
</div>
<div class="basic-info-item">
<div>面积</div>
<div>{{ area }}</div>
</div>
<div class="basic-info-item">
<div>产能</div>
<div>{{ yields }}</div>
</div>
<div class="basic-info-item">
<div>矿种</div>
<div>{{ minerals }}</div>
</div>
</div>
<div class="basic-info1">
<div class="basic-info-title">企业监测设备</div>
<div class="chart" ref="mychart1"></div>
</div>
<div class="basic-info1">
<div class="basic-info-title">监测数据信息</div>
<div class="chart monitor-data-wrapper">
<div class="monitor-data">
<div class="monitor-data-title">监测点数量</div>
<div class="monitor-data-degree">{{ monitorSum }}个</div>
</div>
<div class="monitor-data">
<div class="monitor-data-title">监测点数据</div>
<div class="monitor-data-degree">{{ monitorData }}条</div>
</div>
<div class="monitor-data">
<div class="monitor-data-title">报警数据</div>
<div class="monitor-data-degree">{{ alarmSum }}条</div>
</div>
<div class="monitor-data">
<div class="monitor-data-title">监测时长</div>
<div class="monitor-data-degree">{{ timeSum }}天</div>
</div>
</div>
</div>
<div class="basic-info1">
<div class="basic-info-title">不同等级风险数量统计</div>
<div class="chart" ref="mychart3"></div>
</div>
<div class="basic-info1">
<div class="basic-info-title">重大安全事故隐患排查</div>
<div class="chart" ref="mychart4"></div>
</div>
</div>
</template>
<script>
import { monitorDevice, monitorData, analyzeAlarmNum, analyzeHDNum } from '@/api/operatePortrait.js'
export default {
data() {
return {
// 采矿方法
mineMethod: '11',
// 面积
area: '22',
// 产能
yields: '33',
// 矿种
minerals: '44',
//
deviceSum: '',
// 在线设备
online: '',
// 离线设备
offline: '',
// 监测点数量
monitorSum: '77',
// 监测点数据
monitorData: '90',
// 报警数据
alarmSum: '76',
// 监测时长
timeSum: '56',
// 风险等级1
lowRisk: '',
// 风险等级2
generalRisk: '',
// 风险等级3
greaterRisk: '',
// 重大风险未闭环
noCloseLoop: '',
// 重大风险已闭环
closeLoop: ''
}
},
async mounted() {
console.log(this.$store.state.compony_info.companycode, 'this.$store.state.compony_info.companycode')
await monitorDevice(this.$store.state.compony_info.id).then(res => {
this.offline = res.offlineNum + ''
this.online = res.onlineNum + ''
this.deviceSum = res.totalNum + ''
})
await monitorData(this.$store.state.compony_info.companycode).then(res => {
this.monitorSum = (res.monitorStationNum? res.monitorStationNum: '0') + ''
this.monitorData = (res.monitorDataNum? res.monitorDataNum : '0') + ''
this.alarmSum = (res.alarmNum? res.alarmNum : '0') + ''
this.timeSum = (res.monitorDays? res.monitorDays : '0') + ''
})
await analyzeAlarmNum(this.$store.state.compony_info.companycode).then(res => {
this.lowRisk = (res.yellowNum? res.yellowNum : '0') + ''
this.generalRisk = (res.orangeNum? res.orangeNum : '0') + ''
this.greaterRisk = (res.redNum? res.redNum : '0') + ''
})
await analyzeHDNum(this.$store.state.compony_info.id).then(res => {
console.log(res, 'analyzeHDNum analyzeHDNum')
this.noCloseLoop = res.seriousNotRectifiedNum
this.closeLoop = res.seriousRectifiedNum
})
this.mineMethod = this.$store.state.compony_info.mine
this.area = this.$store.state.compony_info.area
this.yields = this.$store.state.compony_info.capacity
this.minerals = this.$store.state.compony_info.mineral
switch(this.$store.state.compony_info.name) {
case '宝力格':
this.mineMethod = this.mineMethod? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals? this.minerals : '暂未填写'
data() {
return {
// 采矿方法
mineMethod: '11',
// 面积
area: '22',
// 产能
yields: '33',
// 矿种
minerals: '44',
//
deviceSum: '',
// 在线设备
online: '',
// 离线设备
offline: '',
// 监测点数量
monitorSum: '77',
// 监测点数据
monitorData: '90',
// 报警数据
alarmSum: '76',
// 监测时长
timeSum: '56',
// 风险等级1
lowRisk: '',
// 风险等级2
generalRisk: '',
// 风险等级3
greaterRisk: '',
// 重大风险未闭环
noCloseLoop: '',
// 重大风险已闭环
closeLoop: '',
}
},
async mounted() {
console.log(this.$store.state.compony_info.companycode, 'this.$store.state.compony_info.companycode')
await monitorDevice(this.$store.state.compony_info.id).then(res => {
this.offline = res.offlineNum + ''
this.online = res.onlineNum + ''
this.deviceSum = res.totalNum + ''
})
await monitorData(this.$store.state.compony_info.companycode).then(res => {
this.monitorSum = (res.monitorStationNum ? res.monitorStationNum : '0') + ''
this.monitorData = (res.monitorDataNum ? res.monitorDataNum : '0') + ''
this.alarmSum = (res.alarmNum ? res.alarmNum : '0') + ''
this.timeSum = (res.monitorDays ? res.monitorDays : '0') + ''
})
await analyzeAlarmNum(this.$store.state.compony_info.companycode).then(res => {
this.lowRisk = (res.yellowNum ? res.yellowNum : '0') + ''
this.generalRisk = (res.orangeNum ? res.orangeNum : '0') + ''
this.greaterRisk = (res.redNum ? res.redNum : '0') + ''
})
await analyzeHDNum(this.$store.state.compony_info.id).then(res => {
console.log(res, 'analyzeHDNum analyzeHDNum')
this.noCloseLoop = res.seriousNotRectifiedNum
this.closeLoop = res.seriousRectifiedNum
})
this.mineMethod = this.$store.state.compony_info.mine
this.area = this.$store.state.compony_info.area
this.yields = this.$store.state.compony_info.capacity
this.minerals = this.$store.state.compony_info.mineral
switch (this.$store.state.compony_info.name) {
case '雅斯作业区':
this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area ? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals ? this.minerals : '暂未填写'
this.online = this.online ? this.online : 26
this.offline = this.offline ? this.offline : 10
this.monitorSum = this.monitorSum ? this.monitorSum : 27
this.monitorData = this.monitorData ? this.monitorData : 9
this.alarmSum = this.alarmSum ? this.alarmSum : 46
this.timeSum = this.timeSum ? this.timeSum : 230
this.lowRisk = this.lowRisk ? this.lowRisk : 6
this.generalRisk = this.generalRisk ? this.generalRisk : 2
this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
this.closeLoop = this.closeLoop ? this.closeLoop : 0
break
case '阿尔作业区':
this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area ? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals ? this.minerals : '暂未填写'
this.online = this.online ? this.online : 31
this.offline = this.offline ? this.offline : 8
this.monitorSum = this.monitorSum ? this.monitorSum : 36
this.monitorData = this.monitorData ? this.monitorData : 8
this.alarmSum = this.alarmSum ? this.alarmSum : 48
this.timeSum = this.timeSum ? this.timeSum : 246
this.lowRisk = this.lowRisk ? this.lowRisk : 5
this.generalRisk = this.generalRisk ? this.generalRisk : 1
this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
this.closeLoop = this.closeLoop ? this.closeLoop : 0
break
case '山金白音呼布':
this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area ? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals ? this.minerals : '暂未填写'
this.online = this.online ? this.online : 36
this.offline = this.offline ? this.offline : 4
this.monitorSum = this.monitorSum ? this.monitorSum : 42
this.monitorData = this.monitorData ? this.monitorData : 3
this.alarmSum = this.alarmSum ? this.alarmSum : 52
this.timeSum = this.timeSum ? this.timeSum : 341
this.lowRisk = this.lowRisk ? this.lowRisk : 9
this.generalRisk = this.generalRisk ? this.generalRisk : 2
this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
this.closeLoop = this.closeLoop ? this.closeLoop : 0
break
case '融冠矿业':
this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area ? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals ? this.minerals : '暂未填写'
this.online = this.online ? this.online : 21
this.offline = this.offline ? this.offline : 1
this.monitorSum = this.monitorSum ? this.monitorSum : 45
this.monitorData = this.monitorData ? this.monitorData : 76
this.alarmSum = this.alarmSum ? this.alarmSum : 11
this.timeSum = this.timeSum ? this.timeSum : 148
this.lowRisk = this.lowRisk ? this.lowRisk : 6
this.generalRisk = this.generalRisk ? this.generalRisk : 1
this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
this.closeLoop = this.closeLoop ? this.closeLoop : 0
break
case '山金阿尔哈达':
this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area ? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals ? this.minerals : '暂未填写'
this.online = this.online ? this.online : 17
this.offline = this.offline ? this.offline : 5
this.monitorSum = this.monitorSum ? this.monitorSum : 67
this.monitorData = this.monitorData ? this.monitorData : 45
this.alarmSum = this.alarmSum ? this.alarmSum : 15
this.timeSum = this.timeSum ? this.timeSum : 153
this.lowRisk = this.lowRisk ? this.lowRisk : 5
this.generalRisk = this.generalRisk ? this.generalRisk : 1
this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
this.closeLoop = this.closeLoop ? this.closeLoop : 0
break
case '锡林矿业':
this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area ? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals ? this.minerals : '暂未填写'
this.online = this.online ? this.online : 21
this.offline = this.offline ? this.offline : 4
this.monitorSum = this.monitorSum ? this.monitorSum : 26
this.monitorData = this.monitorData ? this.monitorData : 11
this.alarmSum = this.alarmSum ? this.alarmSum : 8
this.timeSum = this.timeSum ? this.timeSum : 278
this.lowRisk = this.lowRisk ? this.lowRisk : 3
this.generalRisk = this.generalRisk ? this.generalRisk : 1
this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
this.closeLoop = this.closeLoop ? this.closeLoop : 0
break
case '钨矿':
this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area ? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals ? this.minerals : '暂未填写'
this.online = this.online ? this.online : 24
this.offline = this.offline ? this.offline : 3
this.monitorSum = this.monitorSum ? this.monitorSum : 31
this.monitorData = this.monitorData ? this.monitorData : 8
this.alarmSum = this.alarmSum ? this.alarmSum : 2
this.timeSum = this.timeSum ? this.timeSum : 238
this.lowRisk = this.lowRisk ? this.lowRisk : 2
this.generalRisk = this.generalRisk ? this.generalRisk : 1
this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
this.closeLoop = this.closeLoop ? this.closeLoop : 0
break
case '延长宏博':
this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area ? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals ? this.minerals : '暂未填写'
this.online = this.online? this.online : 14
this.offline = this.offline? this.offline : 12
this.monitorSum = this.monitorSum? this.monitorSum : 23
this.monitorData = this.monitorData? this.monitorData : 11
this.alarmSum = this.alarmSum? this.alarmSum : 37
this.timeSum = this.timeSum? this.timeSum : 131
this.lowRisk = this.lowRisk? this.lowRisk : 8
this.generalRisk = this.generalRisk? this.generalRisk : 1
this.greaterRisk = this.greaterRisk? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop? this.noCloseLoop : 0
this.closeLoop = this.closeLoop? this.closeLoop : 0
break;
case '雅斯作业区':
this.mineMethod = this.mineMethod? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals? this.minerals : '暂未填写'
this.online = this.online? this.online : 26
this.offline = this.offline? this.offline : 10
this.monitorSum = this.monitorSum? this.monitorSum : 27
this.monitorData = this.monitorData? this.monitorData : 9
this.alarmSum = this.alarmSum? this.alarmSum : 46
this.timeSum = this.timeSum? this.timeSum : 230
this.lowRisk = this.lowRisk? this.lowRisk : 6
this.generalRisk = this.generalRisk? this.generalRisk : 2
this.greaterRisk = this.greaterRisk? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop? this.noCloseLoop : 0
this.closeLoop = this.closeLoop? this.closeLoop : 0
break;
case '阿尔作业区':
this.mineMethod = this.mineMethod? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals? this.minerals : '暂未填写'
this.online = this.online? this.online : 31
this.offline = this.offline? this.offline : 8
this.monitorSum = this.monitorSum? this.monitorSum : 36
this.monitorData = this.monitorData? this.monitorData : 8
this.alarmSum = this.alarmSum? this.alarmSum : 48
this.timeSum = this.timeSum? this.timeSum : 246
this.lowRisk = this.lowRisk? this.lowRisk : 5
this.generalRisk = this.generalRisk? this.generalRisk : 1
this.greaterRisk = this.greaterRisk? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop? this.noCloseLoop : 0
this.closeLoop = this.closeLoop? this.closeLoop : 0
break;
case '山金白音呼布':
this.mineMethod = this.mineMethod? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals? this.minerals : '暂未填写'
this.online = this.online? this.online : 36
this.offline = this.offline? this.offline : 4
this.monitorSum = this.monitorSum? this.monitorSum : 42
this.monitorData = this.monitorData? this.monitorData : 3
this.alarmSum = this.alarmSum? this.alarmSum : 52
this.timeSum = this.timeSum? this.timeSum : 341
this.lowRisk = this.lowRisk? this.lowRisk : 9
this.generalRisk = this.generalRisk? this.generalRisk : 2
this.greaterRisk = this.greaterRisk? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop? this.noCloseLoop : 0
this.closeLoop = this.closeLoop? this.closeLoop : 0
break;
case '融冠矿业':
this.mineMethod = this.mineMethod? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals? this.minerals : '暂未填写'
this.online = this.online? this.online : 21
this.offline = this.offline? this.offline : 1
this.monitorSum = this.monitorSum? this.monitorSum : 45
this.monitorData = this.monitorData? this.monitorData : 76
this.alarmSum = this.alarmSum? this.alarmSum : 11
this.timeSum = this.timeSum? this.timeSum : 148
this.lowRisk = this.lowRisk? this.lowRisk : 6
this.generalRisk = this.generalRisk? this.generalRisk : 1
this.greaterRisk = this.greaterRisk? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop? this.noCloseLoop : 0
this.closeLoop = this.closeLoop? this.closeLoop : 0
break;
case '山金阿尔哈达':
this.mineMethod = this.mineMethod? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals? this.minerals : '暂未填写'
this.online = this.online? this.online : 17
this.offline = this.offline? this.offline : 5
this.monitorSum = this.monitorSum? this.monitorSum : 67
this.monitorData = this.monitorData? this.monitorData : 45
this.alarmSum = this.alarmSum? this.alarmSum : 15
this.timeSum = this.timeSum? this.timeSum : 153
this.lowRisk = this.lowRisk? this.lowRisk : 5
this.generalRisk = this.generalRisk? this.generalRisk : 1
this.greaterRisk = this.greaterRisk? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop? this.noCloseLoop : 0
this.closeLoop = this.closeLoop? this.closeLoop : 0
break;
case '锡林矿业':
this.mineMethod = this.mineMethod? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals? this.minerals : '暂未填写'
this.online = this.online? this.online : 21
this.offline = this.offline? this.offline : 4
this.monitorSum = this.monitorSum? this.monitorSum : 26
this.monitorData = this.monitorData? this.monitorData : 11
this.alarmSum = this.alarmSum? this.alarmSum : 8
this.timeSum = this.timeSum? this.timeSum : 278
this.lowRisk = this.lowRisk? this.lowRisk : 3
this.generalRisk = this.generalRisk? this.generalRisk : 1
this.greaterRisk = this.greaterRisk? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop? this.noCloseLoop : 0
this.closeLoop = this.closeLoop? this.closeLoop : 0
break;
case '钨矿':
this.mineMethod = this.mineMethod? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals? this.minerals : '暂未填写'
this.online = this.online? this.online : 24
this.offline = this.offline? this.offline : 3
this.monitorSum = this.monitorSum? this.monitorSum : 31
this.monitorData = this.monitorData? this.monitorData : 8
this.alarmSum = this.alarmSum? this.alarmSum : 2
this.timeSum = this.timeSum? this.timeSum : 238
this.lowRisk = this.lowRisk? this.lowRisk : 2
this.generalRisk = this.generalRisk? this.generalRisk : 1
this.greaterRisk = this.greaterRisk? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop? this.noCloseLoop : 0
this.closeLoop = this.closeLoop? this.closeLoop : 0
break;
case '沈铁物流':
this.mineMethod = this.mineMethod? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals? this.minerals : '暂未填写'
this.online = this.online? this.online : 27
this.offline = this.offline? this.offline : 4
this.monitorSum = this.monitorSum? this.monitorSum : 56
this.monitorData = this.monitorData? this.monitorData : 32
this.alarmSum = this.alarmSum? this.alarmSum : 4
this.timeSum = this.timeSum? this.timeSum : 286
this.lowRisk = this.lowRisk? this.lowRisk : 1
this.generalRisk = this.generalRisk? this.generalRisk : 1
this.greaterRisk = this.greaterRisk? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop? this.noCloseLoop : 0
this.closeLoop = this.closeLoop? this.closeLoop : 0
break;
case '延长宏博':
this.mineMethod = this.mineMethod? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals? this.minerals : '暂未填写'
this.online = this.online? this.online : 17
this.offline = this.offline? this.offline : 6
this.monitorSum = this.monitorSum? this.monitorSum : 25
this.monitorData = this.monitorData? this.monitorData : 75
this.alarmSum = this.alarmSum? this.alarmSum : 8
this.timeSum = this.timeSum? this.timeSum : 131
this.lowRisk = this.lowRisk? this.lowRisk : 3
this.generalRisk = this.generalRisk? this.generalRisk : 1
this.greaterRisk = this.greaterRisk? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop? this.noCloseLoop : 0
this.closeLoop = this.closeLoop? this.closeLoop : 0
break;
case '中康石油':
this.mineMethod = this.mineMethod? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals? this.minerals : '暂未填写'
this.online = this.online? this.online : 21
this.offline = this.offline? this.offline : 7
this.monitorSum = this.monitorSum? this.monitorSum : 66
this.monitorData = this.monitorData? this.monitorData : 11
this.alarmSum = this.alarmSum? this.alarmSum : 9
this.timeSum = this.timeSum? this.timeSum : 198
this.lowRisk = this.lowRisk? this.lowRisk : 6
this.generalRisk = this.generalRisk? this.generalRisk : 1
this.greaterRisk = this.greaterRisk? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop? this.noCloseLoop : 0
this.closeLoop = this.closeLoop? this.closeLoop : 0
break;
case '天地煤矿':
this.mineMethod = this.mineMethod? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals? this.minerals : '暂未填写'
this.online = this.online? this.online : 24
this.offline = this.offline? this.offline : 9
this.monitorSum = this.monitorSum? this.monitorSum : 32
this.monitorData = this.monitorData? this.monitorData : 23
this.alarmSum = this.alarmSum? this.alarmSum : 6
this.timeSum = this.timeSum? this.timeSum : 237
this.lowRisk = this.lowRisk? this.lowRisk : 8
this.generalRisk = this.generalRisk? this.generalRisk : 1
this.greaterRisk = this.greaterRisk? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop? this.noCloseLoop : 0
this.closeLoop = this.closeLoop? this.closeLoop : 0
break;
case '乌尼特煤矿':
this.mineMethod = this.mineMethod? this.mineMethod : '地下开采, 竖井开拓'
this.area = this.area? this.area : '14.332'
this.yields = this.yields ? this.yields : '25万吨/年'
this.minerals = this.minerals? this.minerals : '暂未填写'
this.online = this.online? this.online : 24
this.offline = this.offline? this.offline : 2
this.monitorSum = this.monitorSum? this.monitorSum : 54
this.monitorData = this.monitorData? this.monitorData : 45
this.alarmSum = this.alarmSum? this.alarmSum : 7
this.timeSum = this.timeSum? this.timeSum : 467
this.lowRisk = this.lowRisk? this.lowRisk : 4
this.generalRisk = this.generalRisk? this.generalRisk : 1
this.greaterRisk = this.greaterRisk? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop? this.noCloseLoop : 0
this.closeLoop = this.closeLoop? this.closeLoop : 0
break;
}
this.init1()
this.init3()
this.init4()
},
methods: {
closeMySelf() {
this.$store.commit('SET_EnterPotrait', false)
},
init1() {
const mychart = echarts.init(this.$refs.mychart1)
const option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
series: [
{
name: '企业监测设备',
type: 'pie',
radius: [20,80],
center: ['50%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
data: [
{
value: this.online,
name: '设备在线'
},
{
value: this.offline,
name: '设备离线'
}
]
}
]
}
mychart.setOption(option)
},
init3() {
const mychart = echarts.init(this.$refs.mychart3)
const option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
data: [
{
value: this.lowRisk,
name: "风险等级一",
itemStyle: {
color: "#057AFD"
}
},
{
value: this.generalRisk,
name: "风险等级二",
itemStyle: {
color: "#F88F12"
}
},
{
value: this.greaterRisk,
name: "风险等级三",
itemStyle: {
color: "#FF414B"
}
}
],
label: {
align: "left",
normal: {
formatter(v) {
return `${v.name}\n${v.value}`;
},
textStyle: {
fontSize: 16
}
}
},
labelLine: {
length: 3,
length2: 10
}
}
]
}
mychart.setOption(option)
},
init4() {
const mychart = echarts.init(this.$refs.mychart4)
const option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
data: [
{
value: this.noCloseLoop,
name: "重大安全隐患未闭环",
itemStyle: {
color: "#FEFA03"
}
},
{
value: this.closeLoop,
name: "重大安全隐患已闭环",
itemStyle: {
color: "#FF9D13"
}
}
],
label: {
align: "left",
normal: {
formatter(v) {
return `${v.name}\n${v.value}`;
},
textStyle: {
fontSize: 12
}
}
},
labelLine: {
length: 3,
length2: 10
}
}
]
}
mychart.setOption(option)
}
}
this.online = this.online ? this.online : 17
this.offline = this.offline ? this.offline : 6
this.monitorSum = this.monitorSum ? this.monitorSum : 25
this.monitorData = this.monitorData ? this.monitorData : 75
this.alarmSum = this.alarmSum ? this.alarmSum : 8
this.timeSum = this.timeSum ? this.timeSum : 131
this.lowRisk = this.lowRisk ? this.lowRisk : 3
this.generalRisk = this.generalRisk ? this.generalRisk : 1
this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
this.closeLoop = this.closeLoop ? this.closeLoop : 0
break
}
this.init1()
this.init3()
this.init4()
},
methods: {
closeMySelf() {
this.$store.commit('SET_EnterPotrait', false)
},
init1() {
const mychart = echarts.init(this.$refs.mychart1)
const option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)',
},
series: [
{
name: '企业监测设备',
type: 'pie',
radius: [20, 80],
center: ['50%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5,
},
data: [
{
value: this.online,
name: '设备在线',
},
{
value: this.offline,
name: '设备离线',
},
],
},
],
}
mychart.setOption(option)
},
init3() {
const mychart = echarts.init(this.$refs.mychart3)
const option = {
tooltip: {
trigger: 'item',
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
data: [
{
value: this.lowRisk,
name: '风险等级一',
itemStyle: {
color: '#057AFD',
},
},
{
value: this.generalRisk,
name: '风险等级二',
itemStyle: {
color: '#F88F12',
},
},
{
value: this.greaterRisk,
name: '风险等级三',
itemStyle: {
color: '#FF414B',
},
},
],
label: {
align: 'left',
normal: {
formatter(v) {
return `${v.name}\n${v.value}`
},
textStyle: {
fontSize: 16,
},
},
},
labelLine: {
length: 3,
length2: 10,
},
},
],
}
mychart.setOption(option)
},
init4() {
const mychart = echarts.init(this.$refs.mychart4)
const option = {
tooltip: {
trigger: 'item',
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
data: [
{
value: this.noCloseLoop,
name: '重大安全隐患未闭环',
itemStyle: {
color: '#FEFA03',
},
},
{
value: this.closeLoop,
name: '重大安全隐患已闭环',
itemStyle: {
color: '#FF9D13',
},
},
],
label: {
align: 'left',
normal: {
formatter(v) {
return `${v.name}\n${v.value}`
},
textStyle: {
fontSize: 12,
},
},
},
labelLine: {
length: 3,
length2: 10,
},
},
],
}
mychart.setOption(option)
},
},
}
</script>
<style lang="scss" scoped>
.potrait-wrapper {
position: absolute;
left: 50%;
top: 50%;
width: 22vw;
background: #020C39;
border-radius: 5px;
padding: 10px;
transform: translate(-50%, -50%);
.close-wrapper {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 25px;
height: 25px;
border: 2px solid #02fcfe;
}
.basic-info {
.basic-info-title {
font-size: 16px;
color: #02fcfe;
font-weight: 550;
margin-top: 12px;
}
.basic-info-item {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 14px;
line-height: 14px;
padding: 1px;
div {
&:first-child {
margin-left: 10px;
color: #00c9fd;
}
&:last-child {
margin-right: 10px;
color: white;
}
}
}
}
.basic-info1 {
height: 20vh;
display: flex;
flex-direction: column;
.basic-info-title {
font-size: 16px;
color: #02fcfe;
font-weight: 550;
margin-top: 12px;
}
.chart {
flex-grow: 1;
}
}
.monitor-data-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.monitor-data {
padding: 5px;
border: 1px solid #02fcfe;
box-shadow: 0 9px 25px -9px inset #02fcfe;
text-align: center;
flex-basis: 40%;
display: flex;
flex-direction: column;
justify-content: space-around;
margin: 8px;
.monitor-data-title {
color: white;
font-size: 14px;
}
.monitor-data-degree {
color: #02fcfe;
font-size: 18px;
}
}
}
}
</style>
\ No newline at end of file
.potrait-wrapper {
position: absolute;
left: 50%;
top: 50%;
width: 22vw;
background: #020c39;
border-radius: 5px;
padding: 10px;
transform: translate(-50%, -50%);
.close-wrapper {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 25px;
height: 25px;
border: 2px solid #02fcfe;
}
.basic-info {
.basic-info-title {
font-size: 16px;
color: #02fcfe;
font-weight: 550;
margin-top: 12px;
}
.basic-info-item {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 14px;
line-height: 14px;
padding: 1px;
div {
&:first-child {
margin-left: 10px;
color: #00c9fd;
}
&:last-child {
margin-right: 10px;
color: white;
}
}
}
}
.basic-info1 {
height: 20vh;
display: flex;
flex-direction: column;
.basic-info-title {
font-size: 16px;
color: #02fcfe;
font-weight: 550;
margin-top: 12px;
}
.chart {
flex-grow: 1;
}
}
.monitor-data-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.monitor-data {
padding: 5px;
border: 1px solid #02fcfe;
box-shadow: 0 9px 25px -9px inset #02fcfe;
text-align: center;
flex-basis: 40%;
display: flex;
flex-direction: column;
justify-content: space-around;
margin: 8px;
.monitor-data-title {
color: white;
font-size: 14px;
}
.monitor-data-degree {
color: #02fcfe;
font-size: 18px;
}
}
}
}
</style>
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