From 42ffb741f9945eed69900f7f834e922247920288 Mon Sep 17 00:00:00 2001
From: dy <dingyang@lnfxkj.tech>
Date: 星期三, 16 四月 2025 17:24:47 +0800
Subject: [PATCH] 焊缝统计图页面提交
---
src/views/mainPlan/weldSeamEcharts/index.vue | 162 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
package.json | 2
src/api/mainPlan/weldSeamEcharts/weldSeamEcharts.js | 10 +++
3 files changed, 173 insertions(+), 1 deletions(-)
diff --git a/package.json b/package.json
index 0450bb1..870dd54 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
"@vueuse/core": "10.11.0",
"axios": "0.28.1",
"clipboard": "2.0.11",
- "echarts": "5.5.1",
+ "echarts": "^5.5.1",
"element-plus": "2.7.6",
"file-saver": "2.0.5",
"fuse.js": "6.6.2",
diff --git a/src/api/mainPlan/weldSeamEcharts/weldSeamEcharts.js b/src/api/mainPlan/weldSeamEcharts/weldSeamEcharts.js
new file mode 100644
index 0000000..3e3f025
--- /dev/null
+++ b/src/api/mainPlan/weldSeamEcharts/weldSeamEcharts.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 鏌ヨ鐒婄紳鍒楄〃
+export function weldSeamEchartsList(query) {
+ return request({
+ url: '/aps/weldSeam/weldSeamEchartsList',
+ method: 'get',
+ params: query
+ })
+}
\ No newline at end of file
diff --git a/src/views/mainPlan/weldSeamEcharts/index.vue b/src/views/mainPlan/weldSeamEcharts/index.vue
new file mode 100644
index 0000000..5cf0930
--- /dev/null
+++ b/src/views/mainPlan/weldSeamEcharts/index.vue
@@ -0,0 +1,162 @@
+<template>
+ <div class="app-container">
+ <el-row>
+ <!-- <el-col>
+ <div style="width: 100%; height: 60px; text-align: center; border-bottom: 2px solid #ccc">
+ <h1>鐒婄紳闇�姹傜粺璁″浘琛�</h1>
+ </div>
+ </el-col> -->
+ <el-col>
+ <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="90px">
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="缁熻鏃ユ湡" style="width: 50%;">
+ <el-date-picker
+ v-model="totalDay"
+ value-format="YYYY-MM"
+ type="monthrange"
+ range-separator="-"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ ></el-date-picker>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12" style="text-align: right;">
+ <el-form-item>
+ <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
+ <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ </el-col>
+ <el-col>
+ <div ref="chartRef" v-show="showSearch" :style="{ width:width,height:height }"></div>
+ </el-col>
+ </el-row>
+ </div>
+</template>
+<script setup>
+ import * as echarts from 'echarts';
+ import { weldSeamEchartsList} from "@/api/mainPlan/weldSeamEcharts/weldSeamEcharts";
+ const totalDay = ref([]);
+ const data = reactive({
+ form: {},
+ queryParams: {
+ produceYear: null,
+ produceMonth: null,
+ },
+ rules: {
+ }
+ });
+ const { queryParams } = toRefs(data);
+ const chartRef = ref(null);
+ const height = ref(document.documentElement.clientHeight - 180 + "px");
+ const width = ref(document.documentElement.clientWidth - 240 + "px");
+
+ const showSearch = ref(false);
+
+ /* const dataList = [
+ ['product', '鍗楅��-璁㈠崟-绠¤矾', '鍗楅��-璁㈠崟-姘旀煖', '鍗楅��-棰勬祴-绠¤矾', '鍗楅��-棰勬祴-姘旀煖', '鍗楅��-棰勬祴-绠¤矾1', '鍗楅��-棰勬祴-姘旀煖1', '鍗楅��-棰勬祴-绠¤矾2', '鍗楅��-棰勬祴-姘旀煖2', '鍗楅��-棰勬祴-绠¤矾3', '鍗楅��-棰勬祴-姘旀煖3', '鍗楅��-棰勬祴-绠¤矾4', '鍗楅��-棰勬祴-姘旀煖4'],
+ ['4鏈�', '43.3', '85.8', '93.7', '93.7', '43.3', '85.8', '43.3', '85.8', '93.7', '93.7', '43.3', '85.8'],
+ ['5鏈�', '43.3', '85.8', '93.7', '93.7', '43.3', '85.8', '43.3', '85.8', '93.7', '93.7', '43.3', '85.8'],
+ ['6鏈�', 86.4, 65.2, 82.5, 93.7],
+ ['7鏈�', 72.4, 53.9, 39.1, 93.7],
+ ['8鏈�', 72.4, 53.9, 39.1, 93.7],
+
+ ] */
+
+ // const series = [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
+
+
+ let myChart = null;
+
+ const renderChart = (data,series) => {
+ // 鍒濆鍖� ECharts 瀹炰緥
+ myChart = echarts.init(chartRef.value);
+ const option = {
+ legend: {
+ width: 1000,
+ top: 30,
+ left: 'center',
+ type: "scroll",
+ itemGap: 30,//鍥句緥鐨勪笂涓嬮棿璺�
+ // itemWidth: 10,//鍥句緥宸︿晶鍥惧潡鐨勯暱搴�
+ // padding: 5,
+ },
+ tooltip: {},
+ dataset: {
+ source: data
+ },
+ xAxis: { type: 'category' },
+ yAxis: { name: '鏁伴噺'},
+ grid: { top:'15%',bottom:'5%'},
+ series: series,
+ title: {
+ text: '鍚勭敓浜у熀鍦扮璺笌姘旀煖闇�姹傚姣斿浘',
+ left: 'center',
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ saveAsImage: {},
+ magicType: {
+ show: true,
+ type: ['line','bar','stack','tiled'],
+ },
+ restore: {//杩樺師鍘熷鍥捐〃
+ show: true
+ },
+ }
+ }
+ };
+
+ // 浣跨敤閰嶇疆椤规樉绀哄浘琛�
+ myChart.setOption(option);
+ };
+
+ /** 鎼滅储鎸夐挳鎿嶄綔 */
+ function handleQuery() {
+ showSearch.value = true;
+ getList();
+ }
+
+ /** 閲嶇疆鎸夐挳鎿嶄綔 */
+ function resetQuery() {
+ totalDay.value = [];
+ // handleQuery();
+ clearChart();
+ showSearch.value = false;
+ }
+
+ function getList() {
+ clearChart();
+ queryParams.value.params = {};
+ if (null != totalDay && '' != totalDay) {
+ queryParams.value.params["startDay"] = totalDay.value[0];
+ queryParams.value.params["endDay"] = totalDay.value[1];
+ }
+ weldSeamEchartsList(queryParams.value).then(response => {
+ let dataList = [];
+ let series = [];
+ dataList = response.data;
+ if(response.data.length === 1){
+ showSearch.value = false;
+ }else{
+ for(let i=0;i<response.data[0].length-1;i++){
+ series.push({ type: 'bar' });
+ }
+ renderChart(dataList,series);
+ }
+ });
+
+ }
+
+ /**娓呴櫎chart */
+ function clearChart() {
+ if (myChart) {
+ myChart.dispose();
+ myChart = null;
+ }
+ }
+</script>
\ No newline at end of file
--
Gitblit v1.9.3