湖里大屏：项目概览智能设备管理质量管理更改
This commit is contained in:
骆乐
parent
25a99dc10e
commit
b873b0e0d7
BIN
src/assets/images/projectImg/intell.png
Normal file
BIN
src/assets/images/projectImg/intell.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
@ -96,19 +96,6 @@ export default {
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
<<<<<<< HEAD
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.charts {
|
||||
width: 23%;
|
||||
height: calc(100% - 8px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.chart {
|
||||
height: 32%;
|
||||
}
|
||||
=======
|
||||
background-color: #07162b;
|
||||
background-image: url('~@/assets/images/projectImg/Bimbgc.png');
|
||||
}
|
||||
@ -127,7 +114,6 @@ export default {
|
||||
.leftCenter {
|
||||
height: 33%;
|
||||
margin-bottom: 15px;
|
||||
>>>>>>> dev-xiaole
|
||||
}
|
||||
.bim {
|
||||
padding: 8px;
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 10px 0px 25px 0px">
|
||||
<span style="color: #fff; margin-left: 130px; font-size: 14px"
|
||||
<span style="color: #fff; margin-left: 150px; font-size: 14px"
|
||||
><i class="el-icon-cloudy-and-sunny"></i> 多云 32℃</span
|
||||
>
|
||||
<span style="color: #229d65; font-size: 14px; display: inline"
|
||||
@ -118,7 +118,7 @@ export default {
|
||||
font-size: 12px;
|
||||
|
||||
.tip {
|
||||
color: #fff;
|
||||
color: #6fe6f2;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
<!-- 智能设备管理 -->
|
||||
<div class="intelligentManage">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
<div class="myChart" ref="myChart" />
|
||||
|
||||
<div class="img">
|
||||
<img src="../../../../assets/images/projectImg/intell.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts4";
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
@ -21,58 +21,6 @@ export default {
|
||||
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.initMyChart();
|
||||
},
|
||||
methods:{
|
||||
initMyChart(){
|
||||
const myChart = echarts.init(this.$refs.myChart);
|
||||
const option = {
|
||||
tooltip: { trigger: 'item' },
|
||||
grid: {
|
||||
left: '42px',
|
||||
right: '0',
|
||||
bottom: '40px',
|
||||
top: '45px'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||||
axisLabel: {
|
||||
//y轴文字的配置
|
||||
textStyle: {
|
||||
color: '#92a1bc',
|
||||
margin: 15
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
fontSize: 14,
|
||||
axisLabel: {
|
||||
// y轴文字的配置
|
||||
textStyle: {
|
||||
color: '#92a1bc',
|
||||
margin: 10
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#48618f'
|
||||
}
|
||||
}
|
||||
},
|
||||
color: ['#33b9f2', '#ed9745'],
|
||||
series: [
|
||||
{ type: 'bar', barWidth: '18px', data: [80, 182, 201, 125, 150, 180, 130]},
|
||||
{ type: 'bar', barWidth: '18px', data: [120, 132, 151, 163, 180, 120, 140]}
|
||||
]
|
||||
}
|
||||
myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -88,9 +36,11 @@ export default {
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.myChart {
|
||||
width: 95%;
|
||||
height: 90%;
|
||||
img{
|
||||
margin-left: 30px;
|
||||
margin-top: 10px;
|
||||
width: 370px;
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -145,6 +145,7 @@ components:{Card},
|
||||
z-index: 2;
|
||||
.listItem {
|
||||
margin-bottom:2px ;
|
||||
height: 8%;
|
||||
.value {
|
||||
color: #bec2c6;
|
||||
}
|
||||
|
||||
@ -1,15 +1,34 @@
|
||||
<template>
|
||||
<!-- 质量问题 -->
|
||||
<Card :title="title">
|
||||
<JNestedRingChart :title="{ y:'30%' , subTitle: '隐患类别' }" :series="series" />
|
||||
<div class="content">
|
||||
<div class="chart">
|
||||
<JRingChart
|
||||
:title="{ text: total.totalNum, subTitle: '质量问题数' }"
|
||||
:color="['#3cabfd', '#ff6c7f']"
|
||||
:data="[{ value: total.jyUrgentLevelNum }, { value: total.ybUrgentLevelNum }]"
|
||||
:radius="['55%', '80%']"
|
||||
/>
|
||||
</div>
|
||||
<div class="count">
|
||||
<div class="count-item">
|
||||
<div class="label">已整改质量问题</div>
|
||||
<div class="num">{{25}}</div>
|
||||
</div>
|
||||
<div class="count-item">
|
||||
<div class="label">未整改质量问题</div>
|
||||
<div class="num">{{10}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
|
||||
import JRingChart from '../jChart/pie/JRingChart.vue'
|
||||
export default {
|
||||
components: { Card, JNestedRingChart },
|
||||
components: { Card, JRingChart },
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
@ -18,27 +37,59 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
color: ['#3cabfd', '#58ec72', '#f43a8d', '#f294c6', '#6ee4f0',],
|
||||
data: [
|
||||
{ value: 45, name: '文明施工' },
|
||||
{ value: 5, name: '未分类' },
|
||||
{ value: 15, name: '安全管理' },
|
||||
{ value: 10, name: '施工安全' },
|
||||
{ value: 45, name: '基础工程' },
|
||||
]
|
||||
},
|
||||
{
|
||||
roseType: 'area',
|
||||
radius: ['58%', '54%'],
|
||||
color: ['#0B1B35', '#244D8F'],
|
||||
data: [30, 40, 30, 40]
|
||||
}
|
||||
]
|
||||
total:{
|
||||
totalNum:43,
|
||||
jyUrgentLevelNum:25,
|
||||
ybUrgentLevelNum:10,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.content {
|
||||
height: calc(100% - 30px);
|
||||
display: flex;
|
||||
.chart {
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
}
|
||||
.count {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.count-item {
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 10px;
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:first-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&:first-child::before {
|
||||
background-color: #3cabfd;
|
||||
}
|
||||
&:last-child::before {
|
||||
background-color: #ff768b;
|
||||
}
|
||||
.label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.num {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user