|
|
@@ -0,0 +1,213 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-row
|
|
|
+ style="height: 20vh"
|
|
|
+ >
|
|
|
+ <v-chart
|
|
|
+ class="chart1"
|
|
|
+ autoresize
|
|
|
+ :option="option1"
|
|
|
+ />
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row
|
|
|
+ style="height: 20vh"
|
|
|
+ >
|
|
|
+ <v-chart
|
|
|
+ class="chart2"
|
|
|
+ autoresize
|
|
|
+ :option="option2"
|
|
|
+ />
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row
|
|
|
+ style="height: 20vh"
|
|
|
+ >
|
|
|
+ <v-chart
|
|
|
+ class="chart3"
|
|
|
+ autoresize
|
|
|
+ :option="option3"
|
|
|
+ />
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="4">
|
|
|
+ <div>设备状态：</div>
|
|
|
+ <el-button>待单</el-button><br>
|
|
|
+ <el-button>维修</el-button><br>
|
|
|
+ <el-button>保养</el-button><br>
|
|
|
+ <el-button>测试</el-button><br>
|
|
|
+ <el-button>打样</el-button><br>
|
|
|
+ <el-button>待料</el-button><br>
|
|
|
+ <el-button>装版</el-button><br>
|
|
|
+ <el-button>生产</el-button><br>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { use } from 'echarts/core'
|
|
|
+import { CanvasRenderer } from 'echarts/renderers'
|
|
|
+import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts'
|
|
|
+import { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from 'echarts/components'
|
|
|
+import VChart, { THEME_KEY } from 'vue-echarts'
|
|
|
+import { provide, ref } from 'vue'
|
|
|
+
|
|
|
+use([
|
|
|
+ CanvasRenderer,
|
|
|
+ PieChart,
|
|
|
+ BarChart,
|
|
|
+ LineChart,
|
|
|
+ ScatterChart,
|
|
|
+ GridComponent,
|
|
|
+ TitleComponent,
|
|
|
+ TooltipComponent,
|
|
|
+ LegendComponent,
|
|
|
+])
|
|
|
+// provide(THEME_KEY, 'dark')
|
|
|
+
|
|
|
+const option1 = ref({
|
|
|
+ xAxis: {
|
|
|
+ data: ['待单', '维修', '保养', '测试', '打样', '待料', '装版', '生产'],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ name: '状态时长（小时）',
|
|
|
+ nameLocation: 'end',
|
|
|
+ nameGap: 5,
|
|
|
+ nameTextStyle: {
|
|
|
+ align: 'left',
|
|
|
+ verticalAlign: 'bottom',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '8%',
|
|
|
+ right: '2%',
|
|
|
+ top: '22%',
|
|
|
+ bottom: '12%',
|
|
|
+ },
|
|
|
+ series: {
|
|
|
+ type: 'bar',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ 0, 0, 0, 0, 0, 0, 2.39, 19.36,
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: 'bolder',
|
|
|
+ fontSize: 16,
|
|
|
+
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+// 生成横坐标（每分钟一个点，显示时间格式为 "HH:mm"）
|
|
|
+const data = []
|
|
|
+for (let i = 510; i <= 1230; i++) { // 08:30 到 20:30 的分钟数范围
|
|
|
+ const hours = Math.floor(i / 60)
|
|
|
+ const minutes = i % 60
|
|
|
+ const time = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes)
|
|
|
+ data.push([time, Math.random() * 1000])
|
|
|
+}
|
|
|
+const xAxisData = data.map(item => item?.[0])
|
|
|
+
|
|
|
+const option2 = ref({
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisLabel: {
|
|
|
+ interval: 59, // 控制显示的刻度标签间隔，每小时一个
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ name: '实时产量',
|
|
|
+ nameLocation: 'end',
|
|
|
+ nameGap: 5,
|
|
|
+ nameTextStyle: {
|
|
|
+ align: 'left',
|
|
|
+ verticalAlign: 'bottom',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '8%',
|
|
|
+ right: '2%',
|
|
|
+ top: '22%',
|
|
|
+ bottom: '12%',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ series: {
|
|
|
+ name: '速度',
|
|
|
+ type: 'line',
|
|
|
+ data: data,
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: 'bolder',
|
|
|
+ fontSize: 16,
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+const option3 = ref({
|
|
|
+ xAxis: {
|
|
|
+ // type: 'value',
|
|
|
+ data: xAxisData,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 59, // 控制显示的刻度标签间隔，每小时一个
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ name: '检验时间',
|
|
|
+ nameLocation: 'end',
|
|
|
+ nameGap: 5,
|
|
|
+ nameTextStyle: {
|
|
|
+ align: 'left',
|
|
|
+ verticalAlign: 'bottom',
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ data: ['IPQC检验', '机台检验', '首件与过程'],
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '8%',
|
|
|
+ right: '2%',
|
|
|
+ top: '22%',
|
|
|
+ bottom: '12%',
|
|
|
+ },
|
|
|
+ series: {
|
|
|
+ type: 'scatter',
|
|
|
+ symbol: 'arrow',
|
|
|
+ symbolSize: 20,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'right',
|
|
|
+ formatter: '{@value}' // 点旁边显示label，这里使用name: '横坐标'这样写也可以，鼠标移入出现提示。
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ ['08:30', 'IPQC检验'],
|
|
|
+ ['10:30', 'IPQC检验'],
|
|
|
+ ['11:30', '机台检验'],
|
|
|
+ ['17:30', '机台检验'],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: 'bolder',
|
|
|
+ fontSize: 16,
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|
