Merge branch 'dev-xiaole' into shenzhen-dev
This commit is contained in:
骆乐
commit
7fa34403db
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<!-- 质量问题 -->
|
||||
<div class="myChart" ref="myChart" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts4";
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
text: '',
|
||||
subTitle: '',
|
||||
x: '48%',
|
||||
y: '36%'
|
||||
})
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [{ value: 1, name: '' }]
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ['#3cabfd','#57ec72','#f294c6','#f43a8d','#6ee4f0']
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.initMyChart();
|
||||
},
|
||||
methods:{
|
||||
initMyChart() {
|
||||
const myChart = echarts.init(this.$refs.myChart);
|
||||
const option = {
|
||||
title: {
|
||||
x: this.title.x || '29%' ,
|
||||
y: this.title.y || '43%' ,
|
||||
show: true,
|
||||
text: this.title.text,
|
||||
subtext: this.title.subTitle,
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'normal',
|
||||
color: '#fff',
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 50,
|
||||
top: 'center',
|
||||
itemWidth: 10, // 设置宽度
|
||||
itemHeight: 10, // 设置高度
|
||||
selectedMode: true,
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
}
|
||||
},
|
||||
color: this.color,
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["50%", "65%"],
|
||||
center: ['30%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: "20",
|
||||
color: '#fff',
|
||||
fontWeight: "bold",
|
||||
},
|
||||
scaleSize: 12,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: this.data,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.myChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -74,7 +74,7 @@ export default {
|
||||
align-items: center;
|
||||
.box{
|
||||
text-align: center;
|
||||
margin-right: 5.5%;
|
||||
margin-right: 4.9%;
|
||||
}
|
||||
.title{
|
||||
font-size: 14px;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<leftCenter title="状态统计" />
|
||||
</div>
|
||||
<div class="leftBottom">
|
||||
<leftCenter title="质量问题" />
|
||||
<leftBottom title="质量问题" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="centerBox">
|
||||
|
||||
@ -1,14 +1,26 @@
|
||||
<template>
|
||||
<!-- 质量问题 -->
|
||||
<div class="container">
|
||||
<div class="containerBox">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
|
||||
<div class="myChart">
|
||||
<problemChart
|
||||
:title="{ text: 654, subTitle: '本周总任务' }"
|
||||
:color="['#3cabfd','#57ec72','#f294c6','#f43a8d','#6ee4f0']"
|
||||
:data="[
|
||||
{ value: 45, name: '未开始' },
|
||||
{ value: 5, name: '未开始延期' },
|
||||
{ value: 15, name: '进行中' },
|
||||
{ value: 10, name: '执行中延期' },
|
||||
{ value: 45, name: '完成' }
|
||||
]" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import problemChart from '../jChart/pie/problemChart.vue'
|
||||
export default {
|
||||
|
||||
components:{problemChart},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
@ -26,7 +38,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
.containerBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #0081c3;
|
||||
@ -37,6 +49,10 @@ export default {
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.myChart{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -18,21 +18,21 @@
|
||||
</div>
|
||||
<div class="charts">
|
||||
<div class="chart">
|
||||
<JRingChart title="89%" subTitle="总进度" :color="['#547ced','#162a51']"
|
||||
<JRingChart :title="{ text: '89%', subTitle: '总进度' }" :color="['#547ced','#162a51']"
|
||||
:data="[
|
||||
{ value: 7, name: '' },
|
||||
{ value: 3, name: '' }
|
||||
]"/>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<JRingChart title="89%" subTitle="总进度" :color="['#5be1f5','#193f54']"
|
||||
<JRingChart :title="{ text: '89%', subTitle: '总进度' }" :color="['#5be1f5','#193f54']"
|
||||
:data="[
|
||||
{ value: 3, name: '' },
|
||||
{ value: 5, name: '' }
|
||||
]"/>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<JRingChart title="89%" subTitle="总进度" :color="['#fe6b7e','#39273d']"
|
||||
<JRingChart :title="{ text: '89%', subTitle: '总进度' }" :color="['#fe6b7e','#39273d']"
|
||||
:data="[
|
||||
{ value: 4, name: '' },
|
||||
{ value: 6, name: '' }
|
||||
|
||||
@ -89,8 +89,8 @@ export default {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.myChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 95%;
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,113 +1,37 @@
|
||||
<template>
|
||||
<!-- 质量问题 -->
|
||||
<div class="qualityProblem">
|
||||
<div class="containerBox">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
<div class="myChart" ref="myChart" />
|
||||
<div class="myChart">
|
||||
<problemChart
|
||||
:title="{ subTitle: '隐患类别', y: '30%'}"
|
||||
:color="['#3cabfd', '#58ec72', '#f294c6', '#f43a8d', '#6ee4f0']"
|
||||
:data="[
|
||||
{ value: 15, name: '文明施工' },
|
||||
{ value: 2, name: '未分类' },
|
||||
{ value: 5, name: '安全管理' },
|
||||
{ value: 6, name: '施工安全' },
|
||||
{ value: 20, name: '基础工程' },
|
||||
]" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts4";
|
||||
import problemChart from '../jChart/pie/problemChart.vue'
|
||||
export default {
|
||||
components:{problemChart},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "default title"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.initMyChart();
|
||||
},
|
||||
methods:{
|
||||
initMyChart() {
|
||||
const myChart = echarts.init(this.$refs.myChart);
|
||||
const option = {
|
||||
title: {
|
||||
subtext: "质量问题",
|
||||
textAlign: 'center',
|
||||
x: '29%',
|
||||
y: '43%',
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'normal',
|
||||
color: '#fff',
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 50,
|
||||
top: 'center',
|
||||
itemWidth: 10, // 设置宽度
|
||||
itemHeight: 10, // 设置高度
|
||||
selectedMode: true,
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
}
|
||||
},
|
||||
color: ['#3cabfd', '#58ec72', '#f294c6', '#f43a8d', '#6ee4f0',],
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["50%", "65%"],
|
||||
center: ['30%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
// itemStyle: {
|
||||
// borderRadius: 8,
|
||||
// borderColor: '#11316c',
|
||||
// borderWidth: 6,
|
||||
// },
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: "20",
|
||||
color: '#fff',
|
||||
fontWeight: "bold",
|
||||
},
|
||||
scaleSize: 12,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 15, name: "文明施工" },
|
||||
{ value: 2, name: "未分类" },
|
||||
{ value: 5, name: "安全管理" },
|
||||
{ value: 6, name: "施工安全" },
|
||||
{ value: 20, name: "基础工程" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.qualityProblem {
|
||||
.containerBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #0081c3;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<!-- 视频宣传 -->
|
||||
<div class="videoPhoto">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
<img src="@/assets/images/projectImg/videoPic.png" alt="" />
|
||||
<img style="height:85%;width:90%; margin-left:5%; margin-top:2%;" src="@/assets/images/projectImg/videoPic.png" alt="" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user