统计
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.66:48080'
|
||||||
# VITE_BASE_URL='http://192.168.0.189: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服务
|
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
|
||||||
VITE_UPLOAD_TYPE=server
|
VITE_UPLOAD_TYPE=server
|
||||||
|
|||||||
@ -17,37 +17,419 @@
|
|||||||
<div class="">
|
<div class="">
|
||||||
<el-row :gutter="16">
|
<el-row :gutter="16">
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-card style="width: 100%;">
|
<el-card style="width: 100%">
|
||||||
<div class="charts-title">
|
<div class="charts-title"> 任务总览 </div>
|
||||||
任务总览
|
<div ref="chartDom" style="width: 100%; height: 400px"></div>
|
||||||
</div>
|
</el-card>
|
||||||
</el-card>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-card style="width: 100%">
|
<el-card style="width: 100%">
|
||||||
<div class="charts-title">
|
<div class="charts-title"> 任务完成率 </div>
|
||||||
任务总览
|
<div ref="chartDomFinish" style="width: 100%; height: 400px"></div>
|
||||||
</div>
|
</el-card>
|
||||||
</el-card>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="16" style="margin-top: 12px">
|
<el-row :gutter="16" style="margin-top: 12px">
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-card style="width: 100%;">
|
<el-card style="width: 100%">
|
||||||
111
|
<div class="charts-title"> AGV工作利用率统计 </div>
|
||||||
</el-card>
|
<div ref="chartDomAgv" style="width: 100%; height: 400px"></div>
|
||||||
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-card style="width: 100%;">
|
<el-card style="width: 100%">
|
||||||
111
|
<div class="charts-title"> 任务异常数 </div>
|
||||||
</el-card>
|
<div ref="chartDomError" style="width: 100%; height: 400px"></div>
|
||||||
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<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)
|
const type = ref(1)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user