Merge branch 'dev-jack' into shenzhen-dev
This commit is contained in:
Jack
commit
ea8b72c8c6
@ -50,6 +50,7 @@ export default {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.h-device-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.counts {
|
||||
|
||||
@ -1,42 +1,42 @@
|
||||
<template>
|
||||
<!-- 人员概览 -->
|
||||
<div class="container">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
|
||||
</div>
|
||||
<Card :title="title">
|
||||
<JProblemChart
|
||||
:title="{ text: 654, subTitle: '本周总任务', y: '35%' }"
|
||||
:color="['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0']"
|
||||
:data="data"
|
||||
:centerPie="centerPie"
|
||||
/>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
import JProblemChart from '../jChart/pie/JProblemChart.vue'
|
||||
export default {
|
||||
|
||||
components: { Card, JProblemChart },
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "default title"
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
data: [
|
||||
{ value: 45, name: '未开始' },
|
||||
{ value: 5, name: '未开始延期' },
|
||||
{ value: 15, name: '进行中' },
|
||||
{ value: 10, name: '执行中延期' },
|
||||
{ value: 45, name: '完成' }
|
||||
],
|
||||
centerPie: {
|
||||
color: ['#0B1B35', '#244D8F'],
|
||||
radius: ['10%', '12%'],
|
||||
data: [30, 40, 30, 40]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #0081c3;
|
||||
|
||||
.titleTxt {
|
||||
font-size: 18px;
|
||||
color: #6ee4f0;
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<Card :title="title">
|
||||
<DeviceCard :leftCount="{ value: 22, label: '塔吊设备数' }" :rightCount="{ value: 65, label: '今日报警数' }">
|
||||
<div class="legend">
|
||||
<div class="item">报警数</div>
|
||||
<div class="item">离线</div>
|
||||
</div>
|
||||
<JBarChart :tooltip="{}" :xData="xData" :yData="yData" />
|
||||
</DeviceCard>
|
||||
</Card>
|
||||
@ -42,4 +46,30 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 76px;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
.item {
|
||||
margin-right: 36px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
margin-right: 8px;
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 6px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
&:first-child:before {
|
||||
background-color: #3cabfd;
|
||||
}
|
||||
&:last-child:before {
|
||||
background-color: #ff6c7f;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<Card :title="title">
|
||||
<DeviceCard :leftCount="{ value: 22, label: '塔吊设备数' }" :rightCount="{ value: 65, label: '今日报警数' }">
|
||||
<div class="legend">
|
||||
<div class="item">报警数</div>
|
||||
<div class="item">离线</div>
|
||||
</div>
|
||||
<JBarChart :tooltip="{}" :xData="xData" :yData="yData" />
|
||||
</DeviceCard>
|
||||
</Card>
|
||||
@ -42,4 +46,30 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 76px;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
.item {
|
||||
margin-right: 36px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
margin-right: 8px;
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 6px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
&:first-child:before {
|
||||
background-color: #3cabfd;
|
||||
}
|
||||
&:last-child:before {
|
||||
background-color: #ff6c7f;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<!-- 质量问题 -->
|
||||
<div class="myChart" ref="myChart" />
|
||||
<!-- 质量问题 -->
|
||||
<div class="myChart" ref="myChart" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts4";
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
@ -22,24 +22,22 @@ export default {
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ['#3cabfd','#57ec72','#f294c6','#f43a8d','#6ee4f0']
|
||||
},
|
||||
default: () => ['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0']
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
return {}
|
||||
},
|
||||
mounted(){
|
||||
this.initMyChart();
|
||||
mounted() {
|
||||
this.initMyChart()
|
||||
},
|
||||
methods:{
|
||||
initMyChart() {
|
||||
const myChart = echarts.init(this.$refs.myChart);
|
||||
methods: {
|
||||
initMyChart() {
|
||||
const myChart = echarts.init(this.$refs.myChart)
|
||||
const option = {
|
||||
title: {
|
||||
x: this.title.x || '29%' ,
|
||||
y: this.title.y || '43%' ,
|
||||
x: this.title.x || '29%',
|
||||
y: this.title.y || '43%',
|
||||
show: true,
|
||||
text: this.title.text,
|
||||
subtext: this.title.subTitle,
|
||||
@ -47,16 +45,16 @@ export default {
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'normal',
|
||||
color: '#fff',
|
||||
color: '#fff'
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
color: '#fff'
|
||||
},
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
@ -69,48 +67,46 @@ export default {
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
color: this.color,
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["50%", "65%"],
|
||||
type: 'pie',
|
||||
radius: ['50%', '65%'],
|
||||
center: ['30%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: "20",
|
||||
fontSize: '20',
|
||||
color: '#fff',
|
||||
fontWeight: "bold",
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
scaleSize: 12,
|
||||
scaleSize: 12
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
show: false
|
||||
},
|
||||
data: this.data,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
data: this.data
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.myChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.myChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user