中建四局(安全管理):完成安全巡检 echarts 图布局

This commit is contained in:
Jack 2022-08-29 09:24:29 +08:00
parent 4826f79bd7
commit ce0476225f
4 changed files with 161 additions and 41 deletions

View File

@ -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/';

View File

@ -20,7 +20,8 @@ export default {
text: '', text: '',
subTitle: '', subTitle: '',
x: '48%', x: '48%',
y: '36%' y: '36%',
fontSize: 20
}) })
}, },
radius: { radius: {
@ -35,20 +36,20 @@ export default {
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: {

View File

@ -35,20 +35,20 @@ export default {
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: {

View File

@ -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>