统计
This commit is contained in:
xhf
parent
b9e189bbc9
commit
cf567206c6
2
.env.dev
2
.env.dev
@ -6,7 +6,7 @@ VITE_DEV=true
|
||||
# 请求路径
|
||||
# VITE_BASE_URL='http://192.168.0.66:48080'
|
||||
# VITE_BASE_URL='http://192.168.0.189:48080'
|
||||
VITE_BASE_URL='http://192.168.0.74:48080'
|
||||
VITE_BASE_URL='http://192.168.0.66:48080'
|
||||
|
||||
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
|
||||
VITE_UPLOAD_TYPE=server
|
||||
|
||||
@ -17,37 +17,419 @@
|
||||
<div class="">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-card style="width: 100%;">
|
||||
<div class="charts-title">
|
||||
任务总览
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card style="width: 100%">
|
||||
<div class="charts-title"> 任务总览 </div>
|
||||
<div ref="chartDom" style="width: 100%; height: 400px"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card style="width: 100%">
|
||||
<div class="charts-title">
|
||||
任务总览
|
||||
</div>
|
||||
</el-card>
|
||||
<div class="charts-title"> 任务完成率 </div>
|
||||
<div ref="chartDomFinish" style="width: 100%; height: 400px"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16" style="margin-top: 12px">
|
||||
<el-col :span="12">
|
||||
<el-card style="width: 100%;">
|
||||
111
|
||||
</el-card>
|
||||
<el-card style="width: 100%">
|
||||
<div class="charts-title"> AGV工作利用率统计 </div>
|
||||
<div ref="chartDomAgv" style="width: 100%; height: 400px"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card style="width: 100%;">
|
||||
111
|
||||
</el-card>
|
||||
<el-card style="width: 100%">
|
||||
<div class="charts-title"> 任务异常数 </div>
|
||||
<div ref="chartDomError" style="width: 100%; height: 400px"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { ref, onMounted, onUnmounted, nextTick, reactive } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { lte } from 'lodash-es'
|
||||
|
||||
// 创建一个响应式引用来保存DOM元素
|
||||
const chartDom = ref(null)
|
||||
const chartDomFinish = ref(null)
|
||||
const chartDomError = ref(null)
|
||||
const chartDomAgv = ref(null)
|
||||
|
||||
// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
|
||||
onMounted(async () => {
|
||||
await nextTick() // 确保DOM已经渲染完成
|
||||
initEcharts()
|
||||
})
|
||||
|
||||
const initEcharts = () => {
|
||||
initOne()
|
||||
initTwo()
|
||||
initFour()
|
||||
}
|
||||
|
||||
const chartInstance = ref(null)
|
||||
const initOne = () => {
|
||||
chartInstance.value = echarts.init(chartDom.value)
|
||||
let ydata = [
|
||||
{
|
||||
name: '执行中',
|
||||
value: 18
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
value: 16
|
||||
},
|
||||
{
|
||||
name: '已取消',
|
||||
value: 15
|
||||
},
|
||||
{
|
||||
name: '未开始',
|
||||
value: 14
|
||||
},
|
||||
{
|
||||
name: '异常',
|
||||
value: 10
|
||||
}
|
||||
]
|
||||
let color = ['#0147EB', '#01BCEB', '#C800FF', '#F1CD0B', '#EB0000']
|
||||
let xdata = ['执行中', '已完成', '已取消', '未开始', '异常']
|
||||
const option = {
|
||||
backgroundColor: 'rgba(255,255,255,1)',
|
||||
color: color,
|
||||
// tooltip: {
|
||||
// trigger: 'item',
|
||||
// // formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
// },
|
||||
legend: {
|
||||
orient: 'vartical',
|
||||
x: 'left',
|
||||
top: 'center',
|
||||
left: '60%',
|
||||
bottom: '0%',
|
||||
data: xdata,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 16,
|
||||
formatter: function (name) {
|
||||
let str = ''
|
||||
ydata.forEach((item) => {
|
||||
if (item.name == name) {
|
||||
str = `{c|${item.name}} {a|${item.value}}`
|
||||
}
|
||||
})
|
||||
return str
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
color: '#0D162A',
|
||||
fontSize: 18
|
||||
},
|
||||
c: {
|
||||
color: '#536387',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布
|
||||
minAngle: 2, //最小的扇区角度（0 ~ 360）
|
||||
radius: ['50%', '65%'],
|
||||
center: ['30%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
//图形样式
|
||||
normal: {
|
||||
borderColor: '#ffffff',
|
||||
borderWidth: 6
|
||||
}
|
||||
},
|
||||
label: {
|
||||
// '{text|{b}}\n{c} ({d}%)'
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: '{c|234,12} \n {a|任务总数}',
|
||||
rich: {
|
||||
c: {
|
||||
color: '#0D162A',
|
||||
fontSize: 15,
|
||||
fontWeight: 'bold',
|
||||
height: 30
|
||||
},
|
||||
|
||||
a: {
|
||||
align: 'center',
|
||||
color: '#727272',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
length: 15,
|
||||
length2: 0,
|
||||
maxSurfaceAngle: 80
|
||||
},
|
||||
data: ydata
|
||||
}
|
||||
]
|
||||
}
|
||||
chartInstance.value.setOption(option)
|
||||
}
|
||||
|
||||
const chartInstanceTwo = ref(null)
|
||||
const initTwo = () => {
|
||||
chartInstanceTwo.value = echarts.init(chartDomFinish.value)
|
||||
let option = {
|
||||
backgroundColor: '#fff',
|
||||
grid: {
|
||||
top: '9%',
|
||||
bottom: '19%',
|
||||
left: '6%',
|
||||
right: '4%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
boundaryGap: true, //默认，坐标轴留白策略
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
alignWithLabel: true
|
||||
},
|
||||
data: [
|
||||
'武汉',
|
||||
'襄阳',
|
||||
'黄冈',
|
||||
'荆门',
|
||||
'十堰',
|
||||
'随州',
|
||||
'鄂州',
|
||||
'恩施',
|
||||
'宜昌',
|
||||
'孝感',
|
||||
'咸宁',
|
||||
'仙桃',
|
||||
'潜江',
|
||||
'天门',
|
||||
'黄石',
|
||||
'荆州',
|
||||
'神农架'
|
||||
]
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#E2E7F5'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: 'rgb(245,250,254)'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 1,
|
||||
lineStyle: {
|
||||
color: '#0147EB'
|
||||
},
|
||||
|
||||
label: {
|
||||
show: false,
|
||||
distance: 1,
|
||||
emphasis: {
|
||||
show: true,
|
||||
offset: [25, -2],
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
color: '#FFF',
|
||||
padding: [8, 20, 8, 6],
|
||||
//width:60,
|
||||
height: 36,
|
||||
formatter: function (params) {
|
||||
var name = params.name
|
||||
var value = params.data
|
||||
var str = name + '\n数据量：' + value
|
||||
return str
|
||||
},
|
||||
rich: {
|
||||
bg: {
|
||||
width: 78,
|
||||
//height:42,
|
||||
color: '#FFF',
|
||||
padding: [20, 0, 20, 10]
|
||||
},
|
||||
br: {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
2000, 1800, 2800, 900, 1600, 2000, 3000, 2030, 1356, 1900, 4000, 3000, 2000, 3000, 4200,
|
||||
3200, 3800
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
chartInstanceTwo.value.setOption(option)
|
||||
}
|
||||
|
||||
const chartInstanceFour = ref(null)
|
||||
const initFour = () => {
|
||||
chartInstanceFour.value = echarts.init(chartDomError.value)
|
||||
let option = {
|
||||
backgroundColor: '#fff',
|
||||
grid: {
|
||||
top: '9%',
|
||||
bottom: '19%',
|
||||
left: '6%',
|
||||
right: '4%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
boundaryGap: true, //默认，坐标轴留白策略
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
alignWithLabel: true
|
||||
},
|
||||
data: [
|
||||
'武汉',
|
||||
'襄阳',
|
||||
'黄冈',
|
||||
'荆门',
|
||||
'十堰',
|
||||
'随州',
|
||||
'鄂州',
|
||||
'恩施',
|
||||
'宜昌',
|
||||
'孝感',
|
||||
'咸宁',
|
||||
'仙桃',
|
||||
'潜江',
|
||||
'天门',
|
||||
'黄石',
|
||||
'荆州',
|
||||
'神农架'
|
||||
]
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#E2E7F5'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: 'rgb(245,250,254)'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 1,
|
||||
lineStyle: {
|
||||
color: '#0147EB'
|
||||
},
|
||||
|
||||
label: {
|
||||
show: false,
|
||||
distance: 1,
|
||||
emphasis: {
|
||||
show: true,
|
||||
offset: [25, -2],
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
color: '#FFF',
|
||||
padding: [8, 20, 8, 6],
|
||||
//width:60,
|
||||
height: 36,
|
||||
formatter: function (params) {
|
||||
var name = params.name
|
||||
var value = params.data
|
||||
var str = name + '\n数据量：' + value
|
||||
return str
|
||||
},
|
||||
rich: {
|
||||
bg: {
|
||||
width: 78,
|
||||
//height:42,
|
||||
color: '#FFF',
|
||||
padding: [20, 0, 20, 10]
|
||||
},
|
||||
br: {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
2000, 1800, 2800, 900, 1600, 2000, 3000, 2030, 1356, 1900, 4000, 3000, 2000, 3000, 4200,
|
||||
3200, 3800
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
chartInstanceFour.value.setOption(option)
|
||||
}
|
||||
// 销毁ECharts实例
|
||||
onUnmounted(() => {
|
||||
if (chartInstance.value != null && chartInstance.value.dispose) {
|
||||
chartInstance.value.dispose()
|
||||
}
|
||||
})
|
||||
|
||||
const type = ref(1)
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user