Merge branch 'dev-jack' into shenzhen-dev
This commit is contained in:
Jack
commit
ce0eb6dc2c
162
src/views/projectAdmin/common/jChart/bar/JBarChart.vue
Normal file
162
src/views/projectAdmin/common/jChart/bar/JBarChart.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div class="j-bar-chart" ref="jBarChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
text: ''
|
||||
})
|
||||
},
|
||||
tooltip: {
|
||||
type: Object,
|
||||
default: () => ({ show: false })
|
||||
},
|
||||
grid: {
|
||||
type: Array,
|
||||
default: () => ['15%', '2%', '2%', '2%']
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ['#5EC2D0', '#61D2B9', '#F67F51', '#7851F6']
|
||||
},
|
||||
xData: {
|
||||
required: true,
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
yData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
series: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.jBarChart = echarts.init(this.$refs.jBarChart)
|
||||
this.createChart()
|
||||
},
|
||||
data() {
|
||||
return { jBarChart: null }
|
||||
},
|
||||
watch: {
|
||||
xData: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal != oldVal) {
|
||||
this.createChart()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
yData: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal != oldVal) {
|
||||
this.createChart()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createChart() {
|
||||
const { title, tooltip, grid, color, xData, yData, series } = this
|
||||
const configSeries = (series => {
|
||||
if (series.length) {
|
||||
return series.map(item => ({ name: item.name, type: 'bar', data: item.data, barWidth: 20, itemStyle: item.itemStyle }))
|
||||
} else {
|
||||
return [{ data: yData, type: 'bar', barWidth: 15 }]
|
||||
}
|
||||
})(series)
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: title.text,
|
||||
right: 20,
|
||||
textStyle: {
|
||||
fontSize: '14px',
|
||||
color: '#5EC2D0',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
icon: 'circle',
|
||||
top: 15,
|
||||
left: 20,
|
||||
itemWidth: 8,
|
||||
textStyle: { color: '#fff' },
|
||||
data: [{ name: '计划用料' }, { name: '实际用料' }]
|
||||
},
|
||||
tooltip,
|
||||
grid: {
|
||||
top: grid[0],
|
||||
right: grid[1],
|
||||
bottom: grid[2],
|
||||
left: grid[3],
|
||||
containLabel: true
|
||||
},
|
||||
color,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [5, 10]
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [5, 10],
|
||||
color: '#323D50'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [5, 10]
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: configSeries
|
||||
}
|
||||
this.jBarChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.j-bar-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
139
src/views/projectAdmin/common/jChart/bar/JProgressChart.vue
Normal file
139
src/views/projectAdmin/common/jChart/bar/JProgressChart.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="j-progress-chart" ref="JProgressChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
props: {
|
||||
grid: {
|
||||
type: Array,
|
||||
default: () => ['10', '8%', '10', '10']
|
||||
},
|
||||
seriesData: {
|
||||
required: true,
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
yData: {
|
||||
required: true,
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.JProgressChart = echarts.init(this.$refs.JProgressChart)
|
||||
this.createChart()
|
||||
},
|
||||
data() {
|
||||
return { JProgressChart: null }
|
||||
},
|
||||
watch:{
|
||||
seriesData:{
|
||||
handler(newVal,oldVal){
|
||||
if(newVal != oldVal){
|
||||
this.createChart();
|
||||
}
|
||||
},
|
||||
deep:true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createChart() {
|
||||
const { grid, seriesData, yData } = this
|
||||
const max = Math.max(...seriesData)
|
||||
const maxData = seriesData.map(item => max)
|
||||
const option = {
|
||||
grid: {
|
||||
top: grid[0],
|
||||
right: grid[1],
|
||||
bottom: grid[2],
|
||||
left: grid[3],
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: () => ''
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: yData,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: '#4A90E2' },
|
||||
{ offset: 1, color: '#4ADEE2' }
|
||||
]),
|
||||
barBorderRadius: 3
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
color: 'white',
|
||||
textStyle: {
|
||||
fontSize: 15
|
||||
}
|
||||
},
|
||||
data: seriesData,
|
||||
barWidth: 13
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
barBorderRadius: 3
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'right',
|
||||
// color: 'white',
|
||||
// textStyle: {
|
||||
// fontSize: 15
|
||||
// }
|
||||
// },
|
||||
barGap: '-100%',
|
||||
barCategoryGap: '40%',
|
||||
data: maxData,
|
||||
barWidth: 13,
|
||||
animation: false
|
||||
}
|
||||
]
|
||||
}
|
||||
this.JProgressChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.j-progress-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
165
src/views/projectAdmin/common/jChart/line/JLineChart.vue
Normal file
165
src/views/projectAdmin/common/jChart/line/JLineChart.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="j-line-chart" ref="JLineChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: Object,
|
||||
default: () => ({ text: '' })
|
||||
},
|
||||
grid: {
|
||||
type: Array,
|
||||
default: () => ['12%', '2%', '6%', '1%']
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ['#FAC915', '#ff6c7f', '#6ee4f0', '#F67F51', '#7851F6']
|
||||
},
|
||||
xData: {
|
||||
required: true,
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
series: {
|
||||
required: true,
|
||||
type: Array,
|
||||
default: () => [{}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.JLineChart = echarts.init(this.$refs.JLineChart)
|
||||
this.createChart()
|
||||
},
|
||||
data() {
|
||||
return { JLineChart: null }
|
||||
},
|
||||
watch: {
|
||||
xData: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal != oldVal) {
|
||||
this.createChart()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
series: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal != oldVal) {
|
||||
this.createChart()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createChart() {
|
||||
const { title, grid, color, xData, series } = this
|
||||
|
||||
const fmtSeries = (series => {
|
||||
return series.map(item => ({
|
||||
name: item.name,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: item.data,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.areaColor[0] },
|
||||
{ offset: 1, color: item.areaColor[1] }
|
||||
])
|
||||
},
|
||||
showSymbol: item.showSymbol,
|
||||
itemStyle: {
|
||||
emphasis: item.emphasis
|
||||
}
|
||||
}))
|
||||
})(series)
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: title.text,
|
||||
right: 20,
|
||||
textStyle: {
|
||||
fontSize: '14px',
|
||||
color: '#5EC2D0',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
left: 20,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: grid[0],
|
||||
right: grid[1],
|
||||
bottom: grid[2],
|
||||
left: grid[3],
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
color,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: xData,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, .8)'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: [5, 10],
|
||||
color: '#364252'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, .8)'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [5, 10],
|
||||
color: '#787E8A'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: [5, 10],
|
||||
color: '#364252'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: fmtSeries
|
||||
}
|
||||
this.JLineChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.j-line-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
108
src/views/projectAdmin/common/jChart/pie/JNestedRingChart.vue
Normal file
108
src/views/projectAdmin/common/jChart/pie/JNestedRingChart.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="j-nested-ring-chart" ref="jNestedRingChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
text: '',
|
||||
subTitle: '',
|
||||
x: '48%',
|
||||
y: '36%'
|
||||
})
|
||||
},
|
||||
legend: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
series: {
|
||||
required: true,
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
|
||||
this.createChart()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
jNestedRingChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createChart() {
|
||||
const { title, legend, series } = this
|
||||
const setSeries = (series => {
|
||||
return series.map(item => ({
|
||||
type: 'pie',
|
||||
label: false,
|
||||
center: ['50%', '50%'],
|
||||
radius: item.radius || ['65%', '80%'],
|
||||
roseType: item.roseType,
|
||||
color: item.color,
|
||||
data: item.data
|
||||
}))
|
||||
})(series)
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: title.text,
|
||||
subtext: title.subTitle,
|
||||
x: title.x || '49%',
|
||||
y: title.y || '40%',
|
||||
show: true,
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'normal',
|
||||
color: '#fff'
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
show: legend.show === false ? false : true,
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 50,
|
||||
top: 'center',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
selectedMode: false,
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 14
|
||||
},
|
||||
formatter: legend.formatter
|
||||
},
|
||||
series: setSeries
|
||||
}
|
||||
this.jNestedRingChart.setOption(option)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
series() {
|
||||
this.createChart()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.j-nested-ring-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
123
src/views/projectAdmin/common/jChart/pie/JProblemChart.vue
Normal file
123
src/views/projectAdmin/common/jChart/pie/JProblemChart.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<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: ["30%", "25%"],
|
||||
center: ["30%", "50%"],
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
// x:'-20%',
|
||||
color: ["#07162b", "#244e92", "#07162b", "#244e92"],
|
||||
data: [{ value: 25 }, { value: 25 }, { value: 25 }, { value: 25 }]
|
||||
},
|
||||
{
|
||||
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>
|
||||
114
src/views/projectAdmin/common/jChart/pie/JRingChart.vue
Normal file
114
src/views/projectAdmin/common/jChart/pie/JRingChart.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="j-ring-chart" ref="jRingChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [{ value: 1, name: '' }]
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ['#5181F6', '#61D2B9', '#F67F51', '#7851F6']
|
||||
},
|
||||
title: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
text: '',
|
||||
subTitle: '',
|
||||
x: '48%',
|
||||
y: '36%'
|
||||
})
|
||||
},
|
||||
radius: {
|
||||
type: Array,
|
||||
default: () => ['65%', '80%']
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.createRingChart()
|
||||
},
|
||||
watch:{
|
||||
data:{
|
||||
handler(newVal,oldVal){
|
||||
if(newVal != oldVal){
|
||||
this.createRingChart();
|
||||
}
|
||||
},
|
||||
deep:true,
|
||||
immediate:true,
|
||||
},
|
||||
title:{
|
||||
handler(newVal,oldVal){
|
||||
if(newVal != oldVal){
|
||||
this.createRingChart();
|
||||
}
|
||||
},
|
||||
deep:true,
|
||||
immediate:true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createRingChart() {
|
||||
const jRingChart = echarts.init(this.$refs.jRingChart)
|
||||
const { title } = this
|
||||
const option = {
|
||||
color: this.color,
|
||||
title: {
|
||||
show: true,
|
||||
text: title.text,
|
||||
x: title.x || '48%',
|
||||
y: title.y || '36%',
|
||||
z: 5,
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 1)',
|
||||
fontSize: 20
|
||||
},
|
||||
subtext: title.subTitle,
|
||||
subtextStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
right: 0
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: this.radius,
|
||||
avoidLabelOverlap: false,
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.data
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
console.log(option, '草')
|
||||
jRingChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.j-ring-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="cim">
|
||||
<!-- <div class="between">
|
||||
<div class="between">
|
||||
<div class="top">
|
||||
<LeftTop />
|
||||
</div>
|
||||
@ -16,7 +16,7 @@
|
||||
<div class="bottom">
|
||||
<RightBottom />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -37,8 +37,8 @@ export default {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: url(../assets/temp/2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// background: url(../assets/temp/2.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
.between {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
@ -52,7 +52,7 @@ export default {
|
||||
.center {
|
||||
width: calc(60% - 40px);
|
||||
height: 100%;
|
||||
background: skyblue;
|
||||
border: 1px solid skyblue;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<Card title="倾斜摄影">
|
||||
倾斜摄影
|
||||
<div class="videos">
|
||||
<div class="video" v-for="i in 6" :key="i"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
@ -11,4 +13,19 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style lang="less" scoped>
|
||||
.videos {
|
||||
box-sizing: border-box;
|
||||
padding-top: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.video {
|
||||
width: 48%;
|
||||
height: 30%;
|
||||
border: 1px solid skyblue;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,63 @@
|
||||
<template>
|
||||
<Card title="BIM协同">
|
||||
BIM协同
|
||||
<div class="table">
|
||||
<div class="row">
|
||||
<div class="td">规划报批</div>
|
||||
<div class="td">施工图审查</div>
|
||||
<div class="td">竣工验收</div>
|
||||
</div>
|
||||
<div class="row" :class="{ warning: !row[0] }" v-for="(row, i) in list" :key="i">
|
||||
<div class="td">{{ row[0] ? '符合' : '不符合' }}</div>
|
||||
<div class="td">{{ row[1] ? '符合' : '不符合' }}</div>
|
||||
<div class="td">{{ row[2] ? '已验收' : '未验收' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
export default {
|
||||
components: { Card }
|
||||
components: { Card },
|
||||
data() {
|
||||
const list = new Array(9).fill(0).map((item, index) => new Array(3).fill(0).map(() => (index === 3 ? 0 : 1)))
|
||||
return {
|
||||
list
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style lang="less" scoped>
|
||||
.table {
|
||||
box-sizing: border-box;
|
||||
padding: 20px 10px 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.row {
|
||||
margin-bottom: 12px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
.td {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
&:nth-child(1) {
|
||||
font-size: 14px;
|
||||
color: #67d4d9;
|
||||
}
|
||||
&.warning {
|
||||
background: linear-gradient(90deg, #a45133, #a4513338);
|
||||
&::before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: #e7622a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,82 @@
|
||||
<template>
|
||||
<Card title="模型外审">
|
||||
模型外审
|
||||
<div class="chart">
|
||||
<JNestedRingChart :title="{ text: '73', subTitle: '问题总数' }" :series="series" :legend="{ show: false }" />
|
||||
</div>
|
||||
<div class="legend">
|
||||
<div class="legend-item">未查看</div>
|
||||
<div class="legend-item">已查看</div>
|
||||
<div class="legend-item">已解决</div>
|
||||
<div class="legend-item">已回复</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
import JNestedRingChart from '../../common/jChart/pie/JNestedRingChart.vue'
|
||||
export default {
|
||||
components: { Card }
|
||||
components: { Card, JNestedRingChart },
|
||||
data() {
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
roseType: 'area',
|
||||
radius: ['58%', '52%'],
|
||||
color: ['#0B1B35', '#4A8C9C'],
|
||||
data: [30, 40, 30, 40]
|
||||
},
|
||||
{
|
||||
radius: ['65%', '82%'],
|
||||
color: ['#FFFFFF', '#E86129', '#FFC303', '#6EE4F0'],
|
||||
data: [
|
||||
{ value: 11, name: '未查看' },
|
||||
{ value: 11, name: '已查看' },
|
||||
{ value: 11, name: '已解决' },
|
||||
{ value: 11, name: '已回复' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
box-sizing: border-box;
|
||||
padding-top: 20px;
|
||||
height: 70%;
|
||||
}
|
||||
.legend {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
.legend-item {
|
||||
width: 45%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: '';
|
||||
margin-right: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:nth-child(1)::before {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
&:nth-child(2)::before {
|
||||
background-color: #e86129;
|
||||
}
|
||||
&:nth-child(3)::before {
|
||||
background-color: #ffc303;
|
||||
}
|
||||
&:nth-child(4)::before {
|
||||
background-color: #6ee4f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,74 @@
|
||||
<template>
|
||||
<Card title="模型内审">
|
||||
模型内审
|
||||
<div class="chart">
|
||||
<JNestedRingChart :title="{ text: '33', subTitle: '问题总数' }" :series="series" :legend="{ show: false }" />
|
||||
</div>
|
||||
<div class="legend">
|
||||
<div class="legend-item">未查看</div>
|
||||
<div class="legend-item">未解决</div>
|
||||
<div class="legend-item">已解决</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
import JNestedRingChart from '../../common/jChart/pie/JNestedRingChart.vue'
|
||||
export default {
|
||||
components: { Card }
|
||||
components: { Card, JNestedRingChart },
|
||||
data() {
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
roseType: 'area',
|
||||
radius: ['58%', '52%'],
|
||||
color: ['#0B1B35', '#4A8C9C'],
|
||||
data: [30, 40, 30, 40]
|
||||
},
|
||||
{
|
||||
radius: ['65%', '82%'],
|
||||
color: ['#E86129', '#FFC303', '#6EE4F0'],
|
||||
data: [
|
||||
{ value: 11, name: '未查看' },
|
||||
{ value: 11, name: '未解决' },
|
||||
{ value: 11, name: '已解决' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
box-sizing: border-box;
|
||||
padding-top: 20px;
|
||||
height: 70%;
|
||||
}
|
||||
.legend {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: '';
|
||||
margin-right: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:nth-child(1)::before {
|
||||
background-color: #e86129;
|
||||
}
|
||||
&:nth-child(2)::before {
|
||||
background-color: #ffc303;
|
||||
}
|
||||
&:nth-child(3)::before {
|
||||
background-color: #6ee4f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,14 +6,34 @@
|
||||
<TopRight />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom"></div>
|
||||
<div class="bottom">
|
||||
<div class="progress-item" :class="{ success: i < 6 }" v-for="(v, i) in progress" :key="i">
|
||||
<div class="date">{{ v.date }}</div>
|
||||
<div class="name">{{ v.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopRight from './topRight.vue'
|
||||
export default {
|
||||
components: { TopRight }
|
||||
components: { TopRight },
|
||||
data() {
|
||||
return {
|
||||
progress: [
|
||||
{ name: '基础工程', date: '2022-02-02' },
|
||||
{ name: '主体结构施工', date: '2022-02-02' },
|
||||
{ name: '屋面工程', date: '2022-02-02' },
|
||||
{ name: '机械设备安拆工程', date: '2022-02-02' },
|
||||
{ name: '室内装饰装修工程', date: '2022-02-02' },
|
||||
{ name: '室内装饰装修工程', date: '2022-02-02' },
|
||||
{ name: '室内装饰装修工程', date: '2022-02-02' },
|
||||
{ name: '室内装饰装修工程', date: '2022-02-02' },
|
||||
{ name: '室内装饰装修工程', date: '2022-02-02' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -39,7 +59,41 @@ export default {
|
||||
}
|
||||
.bottom {
|
||||
height: 26%;
|
||||
border: 1px solid skyblue;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.progress-item {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #2de1fa;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: calc(100% - 5px);
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
&.success::after {
|
||||
background-color: #2de1fa;
|
||||
}
|
||||
.date {
|
||||
margin: 4px 0;
|
||||
font-size: 12px;
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,83 @@
|
||||
<template>
|
||||
<Card title="进度任务">
|
||||
进度任务
|
||||
<div class="tabs">
|
||||
<div class="tab checked">待办事项</div>
|
||||
<div class="tab">未来提醒</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<vue-scroll>
|
||||
<div class="list-item" v-for="(v, i) in todos" :key="i">
|
||||
<div class="todo">{{ v.todo }}</div>
|
||||
<div class="startTime">
|
||||
<span class="grey">计划开始时间：</span><span class="blue">{{ v.startTime }}</span>
|
||||
</div>
|
||||
<div class="endTime">
|
||||
<span class="grey">计划结束时间：</span><span class="blue">{{ v.endTime }}</span>
|
||||
</div>
|
||||
<div class="delay orange">已延期{{ v.delay }}天</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
export default {
|
||||
components: { Card }
|
||||
components: { Card },
|
||||
data() {
|
||||
return {
|
||||
todos: [
|
||||
{ todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
|
||||
{ todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
|
||||
{ todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
|
||||
{ todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
|
||||
{ todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style lang="less" scoped>
|
||||
.tabs {
|
||||
display: flex;
|
||||
color: #fff;
|
||||
.tab {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
&.checked {
|
||||
color: #2de1fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
padding-left: 20px;
|
||||
height: calc(100% - 40px);
|
||||
color: #fff;
|
||||
.list-item {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
div {
|
||||
&:not(:first-child) {
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grey {
|
||||
color: #ccc;
|
||||
}
|
||||
.blue {
|
||||
color: #2de1fa;
|
||||
}
|
||||
.orange {
|
||||
color: #f56c36;
|
||||
}
|
||||
</style>
|
||||
|
||||
59
src/views/projectAdmin/zjsj/sourse/components/CarTable.vue
Normal file
59
src/views/projectAdmin/zjsj/sourse/components/CarTable.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="table">
|
||||
<div class="thead">
|
||||
<div class="row">
|
||||
<div>抓拍照片</div>
|
||||
<div>车辆信息</div>
|
||||
<div>抓拍时间</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tbody">
|
||||
<vue-scroll>
|
||||
<div class="row" v-for="i in 9" :key="i">
|
||||
<div><img src="" /></div>
|
||||
<div class="carNum">粤A455632</div>
|
||||
<div class="datetime">2011-02-03 15:30</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.thead {
|
||||
padding-bottom: 12px;
|
||||
color: #59b2c0;
|
||||
}
|
||||
.tbody {
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
div {
|
||||
text-align: center;
|
||||
&:last-child {
|
||||
width: 160px;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
flex: 1;
|
||||
}
|
||||
img {
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
background: skyblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="material-table">
|
||||
<div class="title">物料进场</div>
|
||||
<div class="table">
|
||||
<div class="thead">
|
||||
<div class="row">
|
||||
<div>物料类型</div>
|
||||
<div>重量(KG)</div>
|
||||
<div>时间</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tbody">
|
||||
<vue-scroll>
|
||||
<div class="row" v-for="i in 9" :key="i">
|
||||
<div>水泥</div>
|
||||
<div>35</div>
|
||||
<div>2011-02-03 15:30</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.material-table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
height: 50px;
|
||||
line-height: 40px;
|
||||
font-size: 20px;
|
||||
color: #6de3ef;
|
||||
text-align: center;
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
.thead {
|
||||
padding-bottom: 12px;
|
||||
color: #59b2c0;
|
||||
}
|
||||
.tbody {
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
div {
|
||||
text-align: center;
|
||||
&:last-child {
|
||||
width: 160px;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
flex: 1;
|
||||
}
|
||||
img {
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
background: skyblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="sourse">
|
||||
<!-- <div class="left">
|
||||
<div class="left">
|
||||
<div class="top">
|
||||
<LeftTop />
|
||||
</div>
|
||||
@ -15,7 +15,7 @@
|
||||
<div class="bottom">
|
||||
<RightBottom />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -36,8 +36,8 @@ export default {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: url(../assets/temp/3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// background: url(../assets/temp/3.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
.left {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
|
||||
@ -1,14 +1,23 @@
|
||||
<template>
|
||||
<Card title="车辆冲洗抓拍">
|
||||
车辆冲洗抓拍
|
||||
<div class="list">
|
||||
<CarTable />
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
import CarTable from './components/CarTable.vue'
|
||||
export default {
|
||||
components: { Card }
|
||||
components: { Card, CarTable }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style lang="less" scoped>
|
||||
.list {
|
||||
box-sizing: border-box;
|
||||
padding-top: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,50 @@
|
||||
<template>
|
||||
<Card title="车辆管理">
|
||||
车辆管理
|
||||
<div class="car-count">
|
||||
今日入场<span>234</span>辆
|
||||
</div>
|
||||
<div class="car-count">
|
||||
今日出场<span>126</span>辆
|
||||
</div>
|
||||
<div class="list">
|
||||
<CarTable />
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
import CarTable from './components/CarTable.vue'
|
||||
export default {
|
||||
components: { Card }
|
||||
components: { Card, CarTable }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style lang="less" scoped>
|
||||
.car-count {
|
||||
padding-top: 10px;
|
||||
padding-left: 30px;
|
||||
font-size: 18px;
|
||||
color: #59b2c0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
margin-left: 40px;
|
||||
margin-right: 20px;
|
||||
width: 140px;
|
||||
height: 50px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background: url(../assets/images/sourse/bg-car-count.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
box-sizing: border-box;
|
||||
padding-top: 20px;
|
||||
height: calc(100% - 120px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,28 @@
|
||||
<template>
|
||||
<Card title="检查统计">
|
||||
检查统计
|
||||
<div class="list-group">
|
||||
<div class="list"><MaterialTable title="物料进场" /></div>
|
||||
<div class="list"><MaterialTable title="物料出场" /></div>
|
||||
<div class="list"><MaterialTable title="材料检验" /></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
import MaterialTable from './components/MaterialTable.vue'
|
||||
export default {
|
||||
components: { Card }
|
||||
components: { Card, MaterialTable }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style lang="less" scoped>
|
||||
.list-group {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.list {
|
||||
width: 28%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,42 @@
|
||||
<template>
|
||||
<Card title="隐患趋势">
|
||||
隐患趋势
|
||||
<JBarChart :tooltip="{}" :xData="xData" :series="series" />
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
import JBarChart from '../../common/jChart/bar/JBarChart.vue'
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
components: { Card }
|
||||
components: { Card, JBarChart },
|
||||
data() {
|
||||
return {
|
||||
xData: new Array(12).fill('破产倒闭').map((v, i) => i + 1 + '月'),
|
||||
series: [
|
||||
{
|
||||
name: '计划用料',
|
||||
data: [23, 44, 63, 12, 45, 78, 34, 67, 32, 44, 13, 75],
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#6de1ee' },
|
||||
{ offset: 1, color: '#6de1ee24' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '实际用料',
|
||||
data: [44, 13, 86, 24, 43, 78, 12, 32, 45, 82, 21, 76],
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#DE5F2A' },
|
||||
{ offset: 1, color: '#DE5F2A24' }
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user