中建四局(安全管理):完成安全巡检 echarts 图布局
This commit is contained in:
parent
4826f79bd7
commit
ce0476225f
@ -40,8 +40,8 @@ if (process.env.NODE_ENV == 'development') {
|
|||||||
// axios.defaults.baseURL = 'http://124.71.178.44:100/' // 河南
|
// axios.defaults.baseURL = 'http://124.71.178.44:100/' // 河南
|
||||||
// tag: 本地
|
// tag: 本地
|
||||||
// axios.defaults.baseURL = 'http://192.168.34.174:6023/' // 老大本地
|
// axios.defaults.baseURL = 'http://192.168.34.174:6023/' // 老大本地
|
||||||
// axios.defaults.baseURL = 'http://192.168.34.125:6023/' //杨意本地 http/1.1
|
axios.defaults.baseURL = 'http://192.168.34.125:6023/' //杨意本地 http/1.1
|
||||||
axios.defaults.baseURL = 'http://192.168.34.216:6023/' // 邱平毅本地
|
// axios.defaults.baseURL = 'http://192.168.34.216:6023/' // 邱平毅本地
|
||||||
// axios.defaults.baseURL = 'http://192.168.34.231:6023/'; //杨思瑞本地
|
// axios.defaults.baseURL = 'http://192.168.34.231:6023/'; //杨思瑞本地
|
||||||
// axios.defaults.baseURL = 'http://47.97.202.104:6023/';
|
// axios.defaults.baseURL = 'http://47.97.202.104:6023/';
|
||||||
// axios.defaults.baseURL = 'http://139.9.66.234:8/';
|
// axios.defaults.baseURL = 'http://139.9.66.234:8/';
|
||||||
|
|||||||
@ -20,7 +20,8 @@ export default {
|
|||||||
text: '',
|
text: '',
|
||||||
subTitle: '',
|
subTitle: '',
|
||||||
x: '48%',
|
x: '48%',
|
||||||
y: '36%'
|
y: '36%',
|
||||||
|
fontSize: 20
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
radius: {
|
radius: {
|
||||||
@ -31,24 +32,24 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.createRingChart()
|
this.createRingChart()
|
||||||
},
|
},
|
||||||
watch:{
|
watch: {
|
||||||
data:{
|
data: {
|
||||||
handler(newVal,oldVal){
|
handler(newVal, oldVal) {
|
||||||
if(newVal != oldVal){
|
if (newVal != oldVal) {
|
||||||
this.createRingChart();
|
this.createRingChart()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
deep:true,
|
deep: true,
|
||||||
immediate:true,
|
immediate: true
|
||||||
},
|
},
|
||||||
title:{
|
title: {
|
||||||
handler(newVal,oldVal){
|
handler(newVal, oldVal) {
|
||||||
if(newVal != oldVal){
|
if (newVal != oldVal) {
|
||||||
this.createRingChart();
|
this.createRingChart()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
deep:true,
|
deep: true,
|
||||||
immediate:true,
|
immediate: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -66,7 +67,7 @@ export default {
|
|||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: 'rgba(255, 255, 255, 1)',
|
color: 'rgba(255, 255, 255, 1)',
|
||||||
fontSize: 20
|
fontSize: title.fontSize || 20
|
||||||
},
|
},
|
||||||
subtext: title.subTitle,
|
subtext: title.subTitle,
|
||||||
subtextStyle: {
|
subtextStyle: {
|
||||||
|
|||||||
@ -31,24 +31,24 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.createRingChart()
|
this.createRingChart()
|
||||||
},
|
},
|
||||||
watch:{
|
watch: {
|
||||||
data:{
|
data: {
|
||||||
handler(newVal,oldVal){
|
handler(newVal, oldVal) {
|
||||||
if(newVal != oldVal){
|
if (newVal != oldVal) {
|
||||||
this.createRingChart();
|
this.createRingChart()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
deep:true,
|
deep: true,
|
||||||
immediate:true,
|
immediate: true
|
||||||
},
|
},
|
||||||
title:{
|
title: {
|
||||||
handler(newVal,oldVal){
|
handler(newVal, oldVal) {
|
||||||
if(newVal != oldVal){
|
if (newVal != oldVal) {
|
||||||
this.createRingChart();
|
this.createRingChart()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
deep:true,
|
deep: true,
|
||||||
immediate:true,
|
immediate: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
@ -1,14 +1,133 @@
|
|||||||
<template>
|
<template>
|
||||||
<Card title="安全巡检">
|
<Card title="安全巡检">
|
||||||
安全巡检
|
<div class="charts">
|
||||||
|
<div class="dllm">
|
||||||
|
<div class="woria">
|
||||||
|
<JRingChart
|
||||||
|
:title="{ text: '安全隐患', subTitle: '987条件', fontSize: 16 }"
|
||||||
|
:color="['#6EE4F0', '#E7622A']"
|
||||||
|
:data="[{ value: 2314 }, { value: 987 }]"
|
||||||
|
:radius="['60%', '85%']"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="legend">
|
||||||
|
<div class="row">
|
||||||
|
<span>已处理</span>
|
||||||
|
<span>占比</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span>123456</span>
|
||||||
|
<span>20%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="legend">
|
||||||
|
<div class="row">
|
||||||
|
<span>未处理</span>
|
||||||
|
<span>占比</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span>123456</span>
|
||||||
|
<span>20%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dllm">
|
||||||
|
<div class="woria">
|
||||||
|
<JRingChart
|
||||||
|
:title="{ text: '质量整改', subTitle: '987条件', fontSize: 16 }"
|
||||||
|
:color="['#6EE4F0', '#E7622A']"
|
||||||
|
:data="[{ value: 2314 }, { value: 987 }]"
|
||||||
|
:radius="['55%', '80%']"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="legend">
|
||||||
|
<div class="row">
|
||||||
|
<span>已巡检</span>
|
||||||
|
<span>占比</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span>123456</span>
|
||||||
|
<span>20%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="legend">
|
||||||
|
<div class="row">
|
||||||
|
<span>未巡检</span>
|
||||||
|
<span>占比</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span>123456</span>
|
||||||
|
<span>20%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Card from '../components/Card.vue'
|
import Card from '../components/Card.vue'
|
||||||
|
import JRingChart from '../../common/jChart/pie/JRingChart.vue'
|
||||||
export default {
|
export default {
|
||||||
components: { Card }
|
components: { Card, JRingChart }
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style></style>
|
<style lang="less" scoped>
|
||||||
|
.charts {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
color: #fff;
|
||||||
|
.dllm {
|
||||||
|
flex: 1;
|
||||||
|
height: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.woria {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 92px);
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
position: relative;
|
||||||
|
width: 100px;
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
left: -4px;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
&:nth-child(2)::before {
|
||||||
|
background-color: #6ee4ef;
|
||||||
|
}
|
||||||
|
&:nth-child(3)::before {
|
||||||
|
background-color: #e7622a;
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
span {
|
||||||
|
text-align: center;
|
||||||
|
&:first-child {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:first-child {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #6ae3eb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user