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