echarts

2024-10-08 17:31:11 +08:00
parent be39a1d60e
commit c3bb7ee6f9
30 changed files with 1727 additions and 141 deletions
--- a/src/api/echarts/index.js
+++ b/src/api/echarts/index.js
@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+/**
+* 获取质量Echarts图表
+* @param data
+*/
+export function GetFQCQualityOptions(data) {
+  return request({
+    url: 'mes/echarts/fqc/getEchartsData',
+    method: 'post',
+    data: data,
+  })
+}
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-
+import VueCompositionAPI from '@vue/composition-api'
 import Cookies from 'js-cookie'

 import Element from 'element-ui'
@@ -42,7 +42,7 @@ import DictData from '@/components/DictData';
 import VueQr from 'vue-qr'
 import printJS from 'print-js'
 // echarts相关插件引入
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
 import ECharts from 'vue-echarts'
 // VXE-Table相关组件
 import VXETable from 'vxe-table';
@@ -74,6 +74,7 @@ Vue.prototype.handleTree = handleTree
 Vue.prototype.handleDict = handleDict
 Vue.prototype.downFile = downFile
 Vue.prototype.$dayjs = dayjs
+Vue.prototype.$echarts = echarts

 Vue.prototype.msgSuccess = function (msg) {
 	this.$message({ showClose: true, message: msg, type: "success" });
@@ -99,6 +100,7 @@ Vue.component('UploadFile', UploadFile)
 Vue.component('VueQr', VueQr)
 Vue.component('v-charts', ECharts)
 // Vue.use(printJS);
+Vue.use(VueCompositionAPI)
 Vue.use(permission)
 Vue.use(plugins)
 Vue.use(Element, {
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,106 +17,111 @@ import Layout from '@/layout'
 * redirect: noRedirect           // 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
 * name:'router-name'             // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
 * meta : {
-    noCache: true                // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
-    title: 'title'               // 设置该路由在侧边栏和面包屑中展示的名字
-    icon: 'svg-name'             // 设置该路由的图标，对应路径src/assets/icons/svg
-    breadcrumb: false            // 如果设置为false，则不会在breadcrumb面包屑中显示
+	noCache: true                // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
+	title: 'title'               // 设置该路由在侧边栏和面包屑中展示的名字
+	icon: 'svg-name'             // 设置该路由的图标，对应路径src/assets/icons/svg
+	breadcrumb: false            // 如果设置为false，则不会在breadcrumb面包屑中显示
  }
 */

 // 公共路由
 export const constantRoutes = [{
-		path: '/redirect',
-		component: Layout,
-		hidden: true,
-		children: [{
-			path: '/redirect/:path(.*)',
-			component: (resolve) => require(['@/views/redirect'], resolve)
-		}]
-	},
-	{
-		path: '/login',
-		component: (resolve) => require(['@/views/login'], resolve),
-		hidden: true
-	},
-	{
-		path: '/register',
-		component: (resolve) => require(['@/views/register'], resolve),
-		hidden: true
-	},
-	{
-		path: '/404',
-		component: (resolve) => require(['@/views/error/404'], resolve),
-		hidden: true
-	},
-	{
-		path: '/401',
-		component: (resolve) => require(['@/views/error/401'], resolve),
-		hidden: true
-	},
-	{
-		path: '',
-		component: Layout,
-		redirect: 'index',
-		children: [{
-			path: 'index',
-			component: (resolve) => require(['@/views/index'], resolve),
-			name: 'Index',
-			meta: { title: '首页', icon: 'dashboard', affix: true }
-		}],
-	},
-	{
-		path: '/user',
-		component: Layout,
-		hidden: true,
-		redirect: 'noredirect',
-		children: [{
-			path: 'profile',
-			component: (resolve) => require(['@/views/system/user/profile/index'], resolve),
-			name: 'Profile',
-			meta: { title: '个人中心', icon: 'user' }
-		}]
-	},
-	{
-		path: '/echarts',
-		component: (resolve) => require(['@/views/components/Echarts'], resolve),
-		hidden: true
-	}, {
-		path: '/icons',
-		component: (resolve) => require(['@/views/components/icons/index'], resolve),
-		hidden: true
-	},
-	// 质量检验中的初次检验
-	{
-		path: '/firstFQC',
-		component: (resolve) => require(['@/views/qualityManagement/FQC/firstFQC.vue'], resolve),
-		hidden: true
-	},
-	{
-		path: '/againFQC',
-		component: (resolve) => require(['@/views/qualityManagement/FQC/againFQC.vue'], resolve),
-		hidden: true
-	},
-	{
-		path: '/thirtyFQC',
-		component: (resolve) => require(['@/views/qualityManagement/FQC/thirtyFQC.vue'], resolve),
-		hidden: true
-	},
-	{
-		path: '/polishManagement/WmPolishWorkOrder',
-		component: (resolve) => require(['@/views/wmsManagement/WmPolishInventory/WmPolishWorkOrder.vue'], resolve),
-		hidden: true
-	},
-	{
-		path: '/polishManagement/PolishReport',
-		component: (resolve) => require(['@/views/wmsManagement/WmPolishInventory/PolishReport.vue'], resolve),
-		hidden: true
-	},
-	{
-		path: '/polishManagement/PolishFQC',
-		component: (resolve) => require(['@/views/wmsManagement/WmPolishInventory/PolishFQC.vue'], resolve),
-		hidden: true
-	},
+	path: '/redirect',
+	component: Layout,
+	hidden: true,
+	children: [{
+		path: '/redirect/:path(.*)',
+		component: (resolve) => require(['@/views/redirect'], resolve)
+	}]
+},
+{
+	path: '/login',
+	component: (resolve) => require(['@/views/login'], resolve),
+	hidden: true
+},
+{
+	path: '/register',
+	component: (resolve) => require(['@/views/register'], resolve),
+	hidden: true
+},
+{
+	path: '/404',
+	component: (resolve) => require(['@/views/error/404'], resolve),
+	hidden: true
+},
+{
+	path: '/401',
+	component: (resolve) => require(['@/views/error/401'], resolve),
+	hidden: true
+},
+{
+	path: '',
+	component: Layout,
+	redirect: 'index',
+	children: [{
+		path: 'index',
+		component: (resolve) => require(['@/views/index'], resolve),
+		name: 'Index',
+		meta: { title: '首页', icon: 'dashboard', affix: true }
+	}],
+},
+{
+	path: '/user',
+	component: Layout,
+	hidden: true,
+	redirect: 'noredirect',
+	children: [{
+		path: 'profile',
+		component: (resolve) => require(['@/views/system/user/profile/index'], resolve),
+		name: 'Profile',
+		meta: { title: '个人中心', icon: 'user' }
+	}]
+},
+{
+	path: '/echarts',
+	component: (resolve) => require(['@/views/components/Echarts'], resolve),
+	hidden: true
+}, {
+	path: '/icons',
+	component: (resolve) => require(['@/views/components/icons/index'], resolve),
+	hidden: true
+},
+// 质量检验中的初次检验
+{
+	path: '/firstFQC',
+	component: (resolve) => require(['@/views/qualityManagement/FQC/firstFQC.vue'], resolve),
+	hidden: true
+},
+{
+	path: '/againFQC',
+	component: (resolve) => require(['@/views/qualityManagement/FQC/againFQC.vue'], resolve),
+	hidden: true
+},
+{
+	path: '/thirtyFQC',
+	component: (resolve) => require(['@/views/qualityManagement/FQC/thirtyFQC.vue'], resolve),
+	hidden: true
+},
+{
+	path: '/polishManagement/WmPolishWorkOrder',
+	component: (resolve) => require(['@/views/wmsManagement/WmPolishInventory/WmPolishWorkOrder.vue'], resolve),
+	hidden: true
+},
+{
+	path: '/polishManagement/PolishReport',
+	component: (resolve) => require(['@/views/wmsManagement/WmPolishInventory/PolishReport.vue'], resolve),
+	hidden: true
+},
+{
+	path: '/polishManagement/PolishFQC',
+	component: (resolve) => require(['@/views/wmsManagement/WmPolishInventory/PolishFQC.vue'], resolve),
+	hidden: true
+},
+{
+	path: '/kanbanManagement/FqcQualityDataBoard',
+	component: (resolve) => require(['@/views/kanbanManagement/FqcQualityDataBoard/index.vue'], resolve),
+	hidden: true
+},
 	// {
 	// 	path: '/qualityManagement/FQC/qualityStatistics',
 	// 	component: (resolve) => require(['@/views/qualityManagement/FQC/qualityStatistics.vue'], resolve),
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/LineChart.vue
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/LineChart.vue
@@ -0,0 +1,106 @@
+<template>
+	<div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue';
+import * as echarts from 'echarts';
+import { CanvasRenderer } from 'echarts/renderers';
+echarts.use([CanvasRenderer]);
+import theme from './theme/dark.json';
+echarts.registerTheme('theme', theme);
+const { proxy } = getCurrentInstance();
+const chartRef = ref(null);
+const props = defineProps({
+	className: {
+		type: String,
+		default: 'chart'
+	},
+	width: {
+		type: String,
+		default: '100%'
+	},
+	height: {
+		type: String,
+		default: '350px'
+	},
+	autoResize: {
+		type: Boolean,
+		default: true
+	},
+	chartData: {
+		type: Object,
+		required: true
+	}
+});
+let chart = null;
+watch(
+	() => props.chartData,
+	(val) => {
+		setOptions(val);
+	},
+	{ deep: true }
+);
+
+function setOptions({ expectedData, actualData } = {}) {
+	chart.setOption({
+		xAxis: {
+			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+			boundaryGap: false,
+			axisTick: {
+				show: false
+			}
+		},
+		grid: {
+			left: 10,
+			right: 10,
+			bottom: 20,
+			top: 60,
+			containLabel: true
+		},
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: {
+				type: 'cross'
+			},
+			padding: [5, 10]
+		},
+		yAxis: {
+			axisTick: {
+				show: false
+			}
+		},
+		legend: {
+			data: ['expected', 'actual']
+		},
+		series: [
+			{
+				name: 'expected',
+				smooth: true,
+				type: 'line',
+				data: expectedData,
+				animationDuration: 2800,
+				animationEasing: 'cubicInOut'
+			},
+			{
+				name: 'actual',
+				smooth: true,
+				type: 'line',
+				data: actualData,
+				animationDuration: 2800,
+				animationEasing: 'quadraticOut'
+			}
+		]
+	});
+}
+function initChart() {
+	chart = echarts.init(proxy.$refs.chartRef, 'theme');
+	setOptions(props.chartData);
+}
+onMounted(() => {
+	initChart();
+});
+window.onresize = function () {
+	chart.resize();
+};
+</script>
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/business/Top3缺陷零件.vue
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/business/Top3缺陷零件.vue
@@ -0,0 +1,64 @@
+<template>
+	<div @click="getData" v-loading="loading" style="width: 100%;height: 100%;" ref="chartRef"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { CanvasRenderer } from 'echarts/renderers';
+echarts.use([CanvasRenderer]);
+import theme from '../theme/dark.json';
+echarts.registerTheme('theme', theme);
+
+import { GetFQCQualityOptions } from '@/api/echarts/index.js'
+export default {
+	name: 'Top3缺陷零件',
+	data() {
+		return {
+			chartRef: null,
+			loading: false,
+			chart: null,
+			query: {
+				// 1-首检报表 2-抛光报表 3-包装报表 4-总报表
+				reportType: 1,
+				// 报表类别 0-工单统计 1-工单统计 2-Top3缺陷数 3-Top10零件合格数
+				chartType: 2,
+				// 时间类型 0-自定义 1-本月 2-本日 3-本周 4-本季度 5-本年
+				timeType: 1,
+				startTime: '',
+				endTime: '',
+				Partnumber: '',
+				Description: ''
+			}
+		};
+	},
+	methods: {
+		setOptions(options) {
+			this.chart && this.chart.setOption(options);
+		},
+		initChart() {
+			this.chart = echarts.init(this.$refs.chartRef, 'theme');
+			this.getData();
+		},
+		resizeChart() {
+			this.chart && this.chart.resize();
+		},
+		getData() {
+			this.loading = true;
+			GetFQCQualityOptions(this.query).then(res => {
+				if (res.code === 200) {
+					this.setOptions(res.data);
+					this.loading = false;
+				}
+			})
+		}
+	},
+	mounted() {
+		this.initChart();
+		window.addEventListener('resize', this.resizeChart);
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.resizeChart);
+	},
+
+};
+</script>
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/echarts/BarChart.vue
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/echarts/BarChart.vue
@@ -0,0 +1,89 @@
+<template>
+	<div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue';
+import * as echarts from 'echarts';
+import { CanvasRenderer } from 'echarts/renderers';
+echarts.use([CanvasRenderer]);
+import theme from '../theme/dark.json';
+echarts.registerTheme('theme', theme);
+const { proxy } = getCurrentInstance();
+const chartRef = ref(null);
+const props = defineProps({
+	chartData: {
+		type: Array,
+		required: true
+	},
+	className: {
+		type: String,
+		default: 'chart'
+	},
+	width: {
+		type: String,
+		default: '100%'
+	},
+	height: {
+		type: String,
+		default: '350px'
+	}
+});
+let chart = null;
+watch(
+	() => props.chartData,
+	(val) => {
+		if (chart != null) {
+			setOptions(val);
+		}
+	},
+	{ deep: true }
+);
+const options = {
+	xAxis: {
+		data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+		boundaryGap: true,
+		axisTick: {
+			show: false
+		}
+	},
+	yAxis: {
+		type: 'value',
+		axisTick: {
+			show: false
+		}
+	},
+	// 图例
+	// legend: {
+	// 	data: ['expected', 'actual']
+	// },
+	series: [
+		{
+			name: '完成量',
+			type: 'bar',
+			data: [1, 2, 3, 4, 5, 6, 7],
+			// 动画时长与模式
+			animationDuration: 3000,
+			animationEasing: 'cubicInOut'
+		}
+	]
+};
+function updateData(data = []) {
+	const series = [
+		{
+			data: data
+		}
+	];
+	chart.setOption({ series });
+}
+function initChart() {
+	chart = echarts.init(proxy.$refs.chartRef, 'theme');
+	chart.setOption(options);
+}
+onMounted(() => {
+	initChart();
+});
+window.onresize = function () {
+	chart.resize();
+};
+</script>
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/echarts/LineChart.vue
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/echarts/LineChart.vue
@@ -0,0 +1,97 @@
+<template>
+	<div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue';
+import * as echarts from 'echarts';
+import { CanvasRenderer } from 'echarts/renderers';
+echarts.use([CanvasRenderer]);
+import theme from '../theme/dark.json';
+echarts.registerTheme('theme', theme);
+const { proxy } = getCurrentInstance();
+const chartRef = ref(null);
+const props = defineProps({
+	chartData: {
+		type: Array,
+		required: true
+	},
+	className: {
+		type: String,
+		default: 'chart'
+	},
+	width: {
+		type: String,
+		default: '100%'
+	},
+	height: {
+		type: String,
+		default: '350px'
+	}
+});
+let chart = null;
+watch(
+	() => props.chartData,
+	(val) => {
+		if (chart != null) {
+			setOptions(val);
+		}
+	},
+	{ deep: true }
+);
+const options = {
+	xAxis: {
+		data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+		boundaryGap: true,
+		axisTick: {
+			show: false
+		}
+	},
+	grid: {
+		left: 10,
+		right: 10,
+		bottom: 20,
+		top: 60,
+		containLabel: true
+	},
+	yAxis: {
+		axisTick: {
+			show: false
+		}
+	},
+	// 图例
+	// legend: {
+	// 	data: ['expected', 'actual']
+	// },
+	series: [
+		{
+			name: '完成量',
+			// 平滑曲线
+			smooth: true,
+			type: 'line',
+			data: [1, 2, 3, 4, 5, 6, 7],
+			// 动画时长与模式
+			animationDuration: 3000,
+			animationEasing: 'cubicInOut'
+		}
+	]
+};
+function updateData(data = []) {
+	const series = [
+		{
+			data: data
+		}
+	];
+	chart.setOption({ series });
+}
+function initChart() {
+	chart = echarts.init(proxy.$refs.chartRef, 'theme');
+	chart.setOption(options);
+}
+onMounted(() => {
+	initChart();
+});
+window.onresize = function () {
+	chart.resize();
+};
+</script>
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/echarts/PieChart.vue
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/echarts/PieChart.vue
@@ -0,0 +1,81 @@
+<template>
+	<div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue';
+import * as echarts from 'echarts';
+import { CanvasRenderer } from 'echarts/renderers';
+echarts.use([CanvasRenderer]);
+import theme from '../theme/dark.json';
+echarts.registerTheme('theme', theme);
+const { proxy } = getCurrentInstance();
+const chartRef = ref(null);
+const props = defineProps({
+	chartData: {
+		type: Array,
+		required: true
+	},
+	className: {
+		type: String,
+		default: 'chart'
+	},
+	width: {
+		type: String,
+		default: '100%'
+	},
+	height: {
+		type: String,
+		default: '350px'
+	}
+});
+let chart = null;
+watch(
+	() => props.chartData,
+	(val) => {
+		if (chart != null) {
+			setOptions(val);
+		}
+	},
+	{ deep: true }
+);
+const options = {
+	labelLine: {
+		show: false
+	},
+	series: [
+		{
+			name: '完成量',
+			type: 'pie',
+			data: [
+				{ value: 1048, name: 'Search Engine' },
+				{ value: 735, name: 'Direct' },
+				{ value: 580, name: 'Email' },
+				{ value: 484, name: 'Union Ads' },
+				{ value: 300, name: 'Video Ads' }
+			],
+			// 动画时长与模式
+			animationDuration: 3000,
+			animationEasing: 'cubicInOut'
+		}
+	]
+};
+function updateData(data = []) {
+	const series = [
+		{
+			data: data
+		}
+	];
+	chart.setOption({ series });
+}
+function initChart() {
+	chart = echarts.init(proxy.$refs.chartRef, 'theme');
+	chart.setOption(options);
+}
+onMounted(() => {
+	initChart();
+});
+window.onresize = function () {
+	chart.resize();
+};
+</script>
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/table/vxeTable.vue
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/table/vxeTable.vue
@@ -0,0 +1,30 @@
+<template>
+	<div>
+		<vxe-table border show-overflow height="400" :row-config="{ isHover: true }" :data="tableData" :scroll-y="{ enabled: true }">
+			<vxe-column type="seq" width="100"></vxe-column>
+			<vxe-column field="name" title="Name" sortable></vxe-column>
+			<vxe-column field="role" title="Role"></vxe-column>
+			<vxe-column field="sex" title="Sex"></vxe-column>
+		</vxe-table>
+	</div>
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue';
+const tableData = ref([]);
+setTimeout(() => {
+	// 模拟数据
+	const mockList = [];
+	for (let index = 0; index < 500; index++) {
+		mockList.push({
+			id: index,
+			name: 'Test' + index,
+			role: 'Developer',
+			sex: '男'
+		});
+	}
+	tableData.value = mockList;
+}, 100);
+</script>
+
+<style></style>
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/theme/dark.json
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/theme/dark.json
@@ -0,0 +1,404 @@
+{
+    "color": [
+        "#dd6b66",
+        "#759aa0",
+        "#e69d87",
+        "#8dc1a9",
+        "#ea7e53",
+        "#eedd78",
+        "#73a373",
+        "#73b9bc",
+        "#7289ab",
+        "#91ca8c",
+        "#f49f42"
+    ],
+    "backgroundColor": "transparent",
+    "textStyle": {},
+    "title": {
+        "textStyle": {
+            "color": "#ffffff"
+        },
+        "subtextStyle": {
+            "color": "#9e9e9e"
+        }
+    },
+    "line": {
+        "itemStyle": {
+            "borderWidth": 1
+        },
+        "lineStyle": {
+            "width": 2
+        },
+        "symbolSize": 4,
+        "symbol": "circle",
+        "smooth": false
+    },
+    "radar": {
+        "itemStyle": {
+            "borderWidth": 1
+        },
+        "lineStyle": {
+            "width": 2
+        },
+        "symbolSize": 4,
+        "symbol": "circle",
+        "smooth": false
+    },
+    "bar": {
+        "itemStyle": {
+            "barBorderWidth": 0,
+            "barBorderColor": "#ccc"
+        }
+    },
+    "pie": {
+        "label": {
+            "show": true,
+            "color": "#ffffff",
+            "fontSize": "16",
+            "overflow": "break"
+        },
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "color": "#fd1050",
+            "color0": "#0cf49b",
+            "borderColor": "#fd1050",
+            "borderColor0": "#0cf49b",
+            "borderWidth": 1
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        },
+        "lineStyle": {
+            "width": 1,
+            "color": "#aaaaaa"
+        },
+        "symbolSize": 4,
+        "symbol": "circle",
+        "smooth": false,
+        "color": [
+            "#dd6b66",
+            "#759aa0",
+            "#e69d87",
+            "#8dc1a9",
+            "#ea7e53",
+            "#eedd78",
+            "#73a373",
+            "#73b9bc",
+            "#7289ab",
+            "#91ca8c",
+            "#f49f42"
+        ],
+        "label": {
+            "color": "#eeeeee"
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "areaColor": "#eee",
+            "borderColor": "#444",
+            "borderWidth": 0.5
+        },
+        "label": {
+            "color": "#000"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "areaColor": "rgba(255,215,0,0.8)",
+                "borderColor": "#444",
+                "borderWidth": 1
+            },
+            "label": {
+                "color": "rgb(100,0,0)"
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "areaColor": "#eee",
+            "borderColor": "#444",
+            "borderWidth": 0.5
+        },
+        "label": {
+            "color": "#000"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "areaColor": "rgba(255,215,0,0.8)",
+                "borderColor": "#444",
+                "borderWidth": 1
+            },
+            "label": {
+                "color": "rgb(100,0,0)"
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#eeeeee"
+            }
+        },
+        "axisTick": {
+            "show": true,
+            "lineStyle": {
+                "color": "#eeeeee"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#eeeeee"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#aaaaaa"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#eeeeee"
+            }
+        },
+        "axisTick": {
+            "show": true,
+            "lineStyle": {
+                "color": "#eeeeee"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#eeeeee"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#aaaaaa"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#eeeeee"
+            }
+        },
+        "axisTick": {
+            "show": true,
+            "lineStyle": {
+                "color": "#eeeeee"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#eeeeee"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#aaaaaa"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#eeeeee"
+            }
+        },
+        "axisTick": {
+            "show": true,
+            "lineStyle": {
+                "color": "#eeeeee"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#eeeeee"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#aaaaaa"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "borderColor": "#999999"
+        },
+        "emphasis": {
+            "iconStyle": {
+                "borderColor": "#666666"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "#eeeeee"
+        }
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "#eeeeee",
+                "width": "1"
+            },
+            "crossStyle": {
+                "color": "#eeeeee",
+                "width": "1"
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#eeeeee",
+            "width": 1
+        },
+        "itemStyle": {
+            "color": "#dd6b66",
+            "borderWidth": 1
+        },
+        "controlStyle": {
+            "color": "#eeeeee",
+            "borderColor": "#eeeeee",
+            "borderWidth": 0.5
+        },
+        "checkpointStyle": {
+            "color": "#e43c59",
+            "borderColor": "#c23531"
+        },
+        "label": {
+            "color": "#eeeeee"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "color": "#a9334c"
+            },
+            "controlStyle": {
+                "color": "#eeeeee",
+                "borderColor": "#eeeeee",
+                "borderWidth": 0.5
+            },
+            "label": {
+                "color": "#eeeeee"
+            }
+        }
+    },
+    "visualMap": {
+        "color": [
+            "#bf444c",
+            "#d88273",
+            "#f6efa6"
+        ]
+    },
+    "dataZoom": {
+        "backgroundColor": "rgba(47,69,84,0)",
+        "dataBackgroundColor": "rgba(255,255,255,0.3)",
+        "fillerColor": "rgba(167,183,204,0.4)",
+        "handleColor": "#a7b7cc",
+        "handleSize": "100%",
+        "textStyle": {
+            "color": "#eeeeee"
+        }
+    },
+    "markPoint": {
+        "label": {
+            "color": "#eeeeee"
+        },
+        "emphasis": {
+            "label": {
+                "color": "#eeeeee"
+            }
+        }
+    }
+}
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/components/kbHeader.vue
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/components/kbHeader.vue
@@ -0,0 +1,29 @@
+<template>
+	<div class="header">
+		<span class="title"><slot></slot></span>
+	</div>
+</template>
+
+<script></script>
+
+<style scoped>
+.header {
+	background-image: url('../images/header.png');
+	background-size: cover;
+	background-position: center center;
+	background-repeat: no-repeat;
+	height: 100px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.title {
+	font-size: 36px;
+	font-weight: 600;
+	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+	-webkit-background-clip: text; /* 仅将背景应用于文本 */
+	-webkit-text-fill-color: transparent; /* 设置文本颜色为透明 */
+	color: transparent; /* 兼容非WebKit浏览器 */
+	background-image: linear-gradient(92deg, #0072ff 0%, #00eaff 50%, #01aaff 100%);
+}
+</style>
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/components/kbNumBox01.vue
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/components/kbNumBox01.vue
@@ -0,0 +1,73 @@
+<template>
+	<div class="num-box">
+		<div class="main">
+			<span class="span">
+				<slot></slot>
+			</span>
+		</div>
+		<div class="foot">{{ foot }}</div>
+	</div>
+</template>
+
+<script setup>
+import { defineProps } from '@vue/composition-api';
+const props = defineProps({
+	foot: {
+		type: String,
+		default: '统计'
+	}
+});
+</script>
+
+<style scoped>
+.num-box {
+	width: 200px;
+	height: 100px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	/* border: 2px solid #ffffff; */
+	border-radius: 20px;
+	margin: 10px;
+}
+
+.main {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 60%;
+	color: white;
+	/* border-radius: 20px; */
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
+	background-color: rgba(0, 118, 0, 0.8);
+}
+
+.span {
+	font-size: 30px;
+	font-weight: 600;
+	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+	-webkit-background-clip: text;
+	/* 仅将背景应用于文本 */
+	-webkit-text-fill-color: transparent;
+	/* 设置文本颜色为透明 */
+	color: transparent;
+	/* 兼容非WebKit浏览器 */
+	background-image: linear-gradient(0deg, #00aa00 0%, #55ff7f 50%, #ffffff 100%);
+}
+
+.foot {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 40%;
+	color: #00aa00;
+	font-weight: 600;
+	border-bottom-left-radius: 10px;
+	border-bottom-right-radius: 10px;
+	background-color: rgba(0, 97, 0, 0.6);
+}
+</style>
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/components/kbNumBox02.vue
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/components/kbNumBox02.vue
@@ -0,0 +1,73 @@
+<template>
+	<div class="num-box">
+		<div class="main">
+			<span class="span">
+				<slot></slot>
+			</span>
+		</div>
+		<div class="foot">{{ foot }}</div>
+	</div>
+</template>
+
+<script setup>
+import { defineProps } from '@vue/composition-api';
+const props = defineProps({
+	foot: {
+		type: String,
+		default: '统计'
+	}
+});
+</script>
+
+<style scoped>
+.num-box {
+	width: 200px;
+	height: 100px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	/* border: 2px solid #ffffff; */
+	border-radius: 20px;
+	margin: 10px;
+}
+
+.main {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 60%;
+	color: white;
+	/* border-radius: 20px; */
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
+	background-color: rgba(0, 133, 255, 0.8);
+}
+
+.span {
+	font-size: 30px;
+	font-weight: 600;
+	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+	-webkit-background-clip: text;
+	/* 仅将背景应用于文本 */
+	-webkit-text-fill-color: transparent;
+	/* 设置文本颜色为透明 */
+	color: transparent;
+	/* 兼容非WebKit浏览器 */
+	background-image: linear-gradient(0deg, #006fff 0%, #e1ffff 50%, #ffffff 100%);
+}
+
+.foot {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 40%;
+	color: #69b4ff;
+	font-weight: 600;
+	border-bottom-left-radius: 10px;
+	border-bottom-right-radius: 10px;
+	background-color: rgba(0, 111, 255, 0.6);
+}
+</style>
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/components/kbTime.vue
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/components/kbTime.vue
@@ -0,0 +1,44 @@
+<template>
+	<div class="title">
+		<span class="span">{{ datetime }}</span>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			timer: null,
+			datetime: this.$dayjs().format('YYYY-MM-DD HH:mm:ss')
+		};
+	},
+	created() {
+		this.timer = setInterval(() => {
+			this.datetime = this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
+		}, 1000);
+	},
+	beforeDestroy() {
+		clearInterval(this.timer);
+	}
+};
+</script>
+
+<style scoped>
+.title {
+	width: 300px;
+	/* background-image: url('../images/title3.png'); */
+	background-size: cover;
+	background-position: center center;
+	background-repeat: no-repeat;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	padding-left: 40px;
+}
+
+.span {
+	font-size: 24px;
+	font-weight: 600;
+	color: white;
+}
+</style>
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/components/kbTitle01.vue
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/components/kbTitle01.vue
@@ -0,0 +1,37 @@
+<template>
+	<div class="title">
+		<span class="span">
+			<slot></slot>
+		</span>
+	</div>
+</template>
+
+<script setup>
+import { defineProps } from '@vue/composition-api';
+const props = defineProps({
+	title: {
+		type: String,
+		default: '标题'
+	}
+});
+</script>
+
+<style scoped>
+.title {
+	width: 300px;
+	background-image: url('../images/title1.png');
+	background-size: cover;
+	background-position: center center;
+	background-repeat: no-repeat;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	padding-left: 40px;
+}
+
+.span {
+	font-size: 24px;
+	font-weight: 600;
+	color: white;
+}
+</style>
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/components/kbTitle02.vue
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/components/kbTitle02.vue
@@ -0,0 +1,38 @@
+<template>
+	<div class="title">
+		<span class="span">
+			<slot></slot>
+		</span>
+	</div>
+</template>
+
+<script setup>
+import { defineProps } from '@vue/composition-api';
+const props = defineProps({
+	title: {
+		type: String,
+		default: '标题'
+	}
+});
+</script>
+
+<style scoped>
+.title {
+	width: 300px;
+	background-image: url('../images/title2.png');
+	background-size: cover;
+	background-position: center center;
+	background-repeat: no-repeat;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	padding-left: 40px;
+	margin-bottom: 20px;
+}
+
+.span {
+	font-size: 20px;
+	font-weight: 600;
+	color: white;
+}
+</style>
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/components/kbTitle03.vue
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/components/kbTitle03.vue
@@ -0,0 +1,35 @@
+<template>
+	<div class="title">
+		<span class="span"><slot></slot></span>
+	</div>
+</template>
+
+<script setup>
+import { defineProps } from '@vue/composition-api';
+const props = defineProps({
+	title: {
+		type: String,
+		default: '标题'
+	}
+});
+</script>
+
+<style scoped>
+.title {
+	width: 300px;
+	background-image: url('../images/title3.png');
+	background-size: cover;
+	background-position: center center;
+	background-repeat: no-repeat;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	padding-left: 40px;
+	margin-bottom: 10px;
+}
+.span {
+	font-size: 18px;
+	font-weight: 500;
+	color: white;
+}
+</style>
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/images/header.png
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/images/header.png
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/images/title1.png
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/images/title1.png
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/images/title2.png
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/images/title2.png
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/images/title3.png
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/images/title3.png
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/index.css
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/index.css
@@ -0,0 +1,69 @@
+/* 主色板记录,复制粘贴使用 */
+.theme-color {
+	--primary-100: #0085ff;
+	--primary-200: #69b4ff;
+	--primary-300: #e0ffff;
+	--accent-100: #006fff;
+	--accent-200: #e1ffff;
+	--text-100: #FFFFFF;
+	--text-200: #9e9e9e;
+	--bg-100: #1E1E1E;
+	--bg-200: #2d2d2d;
+	--bg-300: #454545;
+}
+
+/* =============== */
+.row {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+.column {
+	display: flex;
+	flex-direction: column;
+}
+
+.KANBAN-background {
+	width: 1920px;
+	height: 1080px;
+	margin: 0;
+	padding: 0;
+	background-color: #1E1E1E;
+}
+
+.KANBAN-header {
+	width: 100%;
+	/* background-color: #0055ff; */
+}
+
+.KANBAN-main {
+	width: 100%;
+	/* background-color: #aaaaff; */
+	display: flex;
+	flex-direction: column;
+}
+
+.Kanban-description {
+	width: 100%;
+	margin-bottom: 20px;
+	height: 60px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.card-1 {
+	padding-top: 50px;
+	padding-left: 10px;
+	padding-right: 10px;
+	padding-bottom: 20px;
+	width: 33%;
+	height: 400px;
+}
+
+.card-2 {
+	width: 66%;
+	height: 400px;
+}
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/index.js
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/index.js
@@ -0,0 +1,179 @@
+/// ===================== 大屏宽高自定义（百度搜索结果） ============================
+import {
+	getCurrentInstance,
+	onMounted,
+	onUnmounted,
+	ref,
+	watch
+} from 'vue';
+const {
+	proxy
+} = getCurrentInstance()
+const screenWidth = ref(null)
+const screenHeight = ref(null)
+onMounted(() => {
+	proxy.$nextTick(() => {
+		// 监控屏幕尺寸变化
+		var bodyStyle = document.createElement('style')
+		// 这里根据具体的设计稿尺寸来定
+		bodyStyle.innerHTML = `body{width:1920px; height:1080px!important;}`
+		document.documentElement.firstElementChild.appendChild(bodyStyle)
+		screenWidth.value = document.body.clientWidth
+		screenHeight.value = document.body.clientHeight
+		window.onresize = () => {
+			return (() => {
+				screenWidth.value = document.documentElement.clientWidth
+				screenHeight.value = document.documentElement.clientHeight
+			})()
+		}
+		document.addEventListener('keydown', (e) => {
+			if (e.code == 'F11') {
+				screenWidth.value = document.documentElement.clientWidth
+				screenHeight.value = document.documentElement.clientHeight
+			}
+		})
+	})
+})
+watch(
+	screenWidth,
+	(newValue, oldValue) => {
+		// console.log("val", val);
+		let docWidth = document.documentElement.clientWidth
+		let docHeight = document.documentElement.clientHeight
+		var designWidth = 1920, // 这里根据具体的设计稿尺寸来定
+			designHeight = 1080, // 这里根据具体的设计稿尺寸来定
+			widthRatio = docWidth / designWidth,
+			heightRatio = docHeight / designHeight
+		document.body.style =
+			`transform:scale(${widthRatio},${heightRatio});transform-origin:left top;overflow: hidden;`
+		// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
+		setTimeout(function() {
+			var lateWidth = document.documentElement.clientWidth,
+				lateHeight = document.documentElement.clientHeight
+			if (lateWidth === docWidth) return
+
+			widthRatio = lateWidth / designWidth
+			heightRatio = lateHeight / designHeight
+			document.body.style = 'transform:scale(' + widthRatio + ',' + heightRatio +
+				');transform-origin:left top;overflow: hidden;'
+		}, 0)
+	}, {
+		immediate: true,
+		deep: true
+	}
+)
+watch(
+	screenHeight,
+	(newValue, oldValue) => {
+		// console.log("val", val);
+		let docWidth = document.documentElement.clientWidth
+		let docHeight = document.documentElement.clientHeight
+		var designWidth = 1920, // 这里根据具体的设计稿尺寸来定
+			designHeight = 1080, // 这里根据具体的设计稿尺寸来定
+			widthRatio = docWidth / designWidth,
+			heightRatio = docHeight / designHeight
+		document.body.style =
+			`transform:scale(${widthRatio},${heightRatio});transform-origin:left top;overflow: hidden;`
+		// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
+		setTimeout(function() {
+			var lateWidth = document.documentElement.clientWidth,
+				lateHeight = document.documentElement.clientHeight
+			if (lateWidth === docWidth) return
+
+			widthRatio = lateWidth / designWidth
+			heightRatio = lateHeight / designHeight
+			document.body.style = 'transform:scale(' + widthRatio + ',' + heightRatio +
+				');transform-origin:left top;overflow: hidden;'
+		}, 0)
+	}, {
+		immediate: true,
+		deep: true
+	}
+)
+window.addEventListener('resize', () => {
+	window.location.reload()
+})
+/// ================================================================
+
+
+
+
+
+
+/// ===================== AI智能优化自适应结果（1.0） ===========================
+import {
+	getCurrentInstance,
+	onMounted,
+	onUnmounted,
+	ref
+} from 'vue';
+const {
+	proxy
+} = getCurrentInstance();
+const screenWidth = ref(null);
+const screenHeight = ref(null);
+const resizeObserver = new ResizeObserver((entries) => {
+	if (entries.length > 0) {
+		const {
+			width,
+			height
+		} = entries[0].contentRect;
+		// 更新屏幕尺寸
+		screenWidth.value = width;
+		screenHeight.value = height;
+
+		// 调用debounce函数
+		updateStyleDebounced();
+	}
+});
+// debounce函数
+const resizeTimeout = ref(null);
+
+function debounce(func, wait) {
+	return function() {
+		clearTimeout(resizeTimeout.value);
+		resizeTimeout.value = setTimeout(func, wait);
+	};
+}
+// 用于更新页面的transform样式
+function updateStyle() {
+	const docWidth = document.documentElement.clientWidth;
+	const docHeight = document.documentElement.clientHeight;
+	const designWidth = 1920; // 设计稿宽度
+	const designHeight = 1080; // 设计稿高度
+	const widthRatio = docWidth / designWidth;
+	const heightRatio = docHeight / designHeight;
+	document.body.style.transform = `scale(${widthRatio},${heightRatio})`;
+	document.body.style.transformOrigin = 'left top';
+	document.body.style.overflow = 'hidden';
+	// 处理浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
+	setTimeout(function() {
+		const lateWidth = document.documentElement.clientWidth;
+		const lateHeight = document.documentElement.clientHeight;
+		if (lateWidth !== docWidth) {
+			const lateWidthRatio = lateWidth / designWidth;
+			const lateHeightRatio = lateHeight / designHeight;
+			document.body.style.transform = `scale(${lateWidthRatio},${lateHeightRatio})`;
+		}
+	}, 10);
+}
+const updateStyleDebounced = debounce(updateStyle, 150);
+onMounted(() => {
+	proxy.$nextTick(() => {
+		// 监控屏幕尺寸变化
+		resizeObserver.observe(document.documentElement);
+
+		// 初始化屏幕尺寸
+		screenWidth.value = document.documentElement.clientWidth;
+		screenHeight.value = document.documentElement.clientHeight;
+	});
+});
+onUnmounted(() => {
+	// 清除监听
+	resizeObserver.disconnect();
+	// 清除debounce函数中设置的timeout
+	clearTimeout(resizeTimeout.value);
+	// resizeObserver.unobserve(document.documentElement);
+});
+
+/// ===============================================================
--- a/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/index.vue
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/index.vue
@@ -0,0 +1,116 @@
+<template>
+	<div class="KANBAN-background">
+		<!-- header -->
+		<div class="KANBAN-header">
+			<kbHeader>涂装车间生产看板</kbHeader>
+		</div>
+		<!-- main -->
+		<div class="KANBAN-main">
+			<div class="Kanban-description">
+				<div></div>
+				<kbTime></kbTime>
+			</div>
+		</div>
+		<div class="row">
+			<dv-border-box-11 class="card-1" title="昨日工单统计">
+
+			</dv-border-box-11>
+			<dv-border-box-11 class="card-1" title="本周工单统计">
+
+			</dv-border-box-11>
+			<dv-border-box-11 class="card-1" title="Top3缺陷零件">
+				<Top3缺陷零件></Top3缺陷零件>
+			</dv-border-box-11>
+		</div>
+		<div class="row">
+			<div class="card-2">
+				<dv-border-box-11 title="本月工单统计">
+
+				</dv-border-box-11>
+			</div>
+			<dv-border-box-11 class="card-1" title="Top10零件合格数">
+			</dv-border-box-11>
+		</div>
+	</div>
+</template>
+
+<script>
+import kbHeader from './components/kbHeader.vue';
+import kbTime from './components/kbTime.vue';
+import Top3缺陷零件 from './charts/business/Top3缺陷零件.vue';
+export default {
+	components: { kbHeader, kbTime, Top3缺陷零件 },
+	data() {
+		return {
+			screenWidth: null,
+			screenHeight: null,
+			resizeTimeout: null
+		};
+	},
+	mounted() {
+		const updateStyle = () => {
+			const docWidth = document.documentElement.clientWidth;
+			const docHeight = document.documentElement.clientHeight;
+			const designWidth = 1920; // 设计稿宽度
+			const designHeight = 1080; // 设计稿高度
+			const widthRatio = docWidth / designWidth;
+			const heightRatio = docHeight / designHeight;
+			document.body.style.transform = `scale(${widthRatio},${heightRatio})`;
+			document.body.style.transformOrigin = 'left top';
+			document.body.style.overflow = 'hidden';
+			// 处理浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
+			setTimeout(function () {
+				const lateWidth = document.documentElement.clientWidth;
+				const lateHeight = document.documentElement.clientHeight;
+				if (lateWidth !== docWidth) {
+					const lateWidthRatio = lateWidth / designWidth;
+					const lateHeightRatio = lateHeight / designHeight;
+					document.body.style.transform = `scale(${lateWidthRatio},${lateHeightRatio})`;
+				}
+			}, 10);
+		};
+
+		const debounce = (func, wait) => {
+			return function () {
+				clearTimeout(this.resizeTimeout);
+				this.resizeTimeout = setTimeout(func, wait);
+			};
+		};
+
+		const updateStyleDebounced = debounce(updateStyle, 150);
+
+		window.addEventListener('resize', updateStyleDebounced);
+
+		// 初始化屏幕尺寸
+		this.screenWidth = document.documentElement.clientWidth;
+		this.screenHeight = document.documentElement.clientHeight;
+		updateStyle();
+	},
+	beforeDestroy() {
+		window.removeEventListener('resize', this.updateStyleDebounced);
+		clearTimeout(this.resizeTimeout);
+	}
+};
+</script>
+
+<style scoped>
+@import './index.css';
+
+.title {
+	width: 300px;
+	/* background-image: url('../images/title3.png'); */
+	background-size: cover;
+	background-position: center center;
+	background-repeat: no-repeat;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	padding-left: 40px;
+}
+
+.span {
+	font-size: 24px;
+	font-weight: 600;
+	color: white;
+}
+</style>
--- a/src/views/kanbanManagement/FqcQualityDataBoard/index.vue
+++ b/src/views/kanbanManagement/FqcQualityDataBoard/index.vue
@@ -0,0 +1,32 @@
+<template>
+    <KANBAN class="box"></KANBAN>
+</template>
+
+<script>
+import KANBAN from './KANBAN/index.vue'
+export default {
+    name: 'FqcQualityDataBoard',
+    components: {
+        KANBAN
+    },
+    data() {
+        return {
+
+        }
+    },
+    mounted() {
+    },
+    methods: {
+
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+    margin: 0;
+    padding: 0;
+    width: 1920px;
+    height: 1080px;
+}
+</style>
--- a/src/views/qualityManagement/FQC/againFQC.vue
+++ b/src/views/qualityManagement/FQC/againFQC.vue
@@ -363,7 +363,7 @@
 				<div class="grid_2" v-if="team.length>0">
 					<template>
 						<div class="button_" @click="Accumulator(team[0], 'team', 0)" @mousedown="startimer(team[0].counter, 'team', 0)" @mouseup="clearTimer" style="visibility: hidden">
-							<div class="context">脱落擦伤</div>
+							<div class="context">下件擦伤</div>
 							<div class="number">{{ team[0].counter }}</div>
 						</div>
 						<div class="button_" @click="Accumulator(team[1], 'team', 1)" @mousedown="startimer(team[1].counter, 'team', 1)" @mouseup="clearTimer" style="visibility: hidden">
@@ -389,7 +389,7 @@
 					</template>
 					<template>
 						<div class="button_" @click="Accumulator(team[6], 'team', 6)" @mousedown="startimer(team[6].counter, 'team', 6)" @mouseup="clearTimer">
-							<div class="context">脱落擦伤</div>
+							<div class="context">下件擦伤</div>
 							<div class="number">{{ team[6].counter }}</div>
 						</div>
 						<div class="button_" @click="Accumulator(team[7], 'team', 7)" @mousedown="startimer(team[7].counter, 'team', 7)" @mouseup="clearTimer">
@@ -415,7 +415,7 @@
 					</template>
 					<template>
 						<div class="button_" @click="Accumulator(team[12], 'team', 12)" @mousedown="startimer(team[12].counter, 'team', 12)" @mouseup="clearTimer">
-							<div class="context">脱落擦伤</div>
+							<div class="context">下件擦伤</div>
 							<div class="number">{{ team[12].counter }}</div>
 						</div>
 						<div class="button_" @click="Accumulator(team[13], 'team', 13)" @mousedown="startimer(team[13].counter, 'team', 13)" @mouseup="clearTimer">
--- a/src/views/qualityManagement/FQC/firstFQC.vue
+++ b/src/views/qualityManagement/FQC/firstFQC.vue
@@ -363,7 +363,7 @@
 				<div class="grid_2" v-if="team.length>0">
 					<template>
 						<div class="button_" @click="Accumulator(team[0], 'team', 0)" @mousedown="startimer(team[0].counter, 'team', 0)" @mouseup="clearTimer">
-							<div class="context">脱落擦伤</div>
+							<div class="context">下件擦伤</div>
 							<div class="number">{{ team[0].counter }}</div>
 						</div>
 						<div class="button_" @click="Accumulator(team[1], 'team', 1)" @mousedown="startimer(team[1].counter, 'team', 1)" @mouseup="clearTimer">
@@ -389,7 +389,7 @@
 					</template>
 					<template>
 						<div class="button_" @click="Accumulator(team[6], 'team', 6)" @mousedown="startimer(team[6].counter, 'team', 6)" @mouseup="clearTimer">
-							<div class="context">脱落擦伤</div>
+							<div class="context">下件擦伤</div>
 							<div class="number">{{ team[6].counter }}</div>
 						</div>
 						<div class="button_" @click="Accumulator(team[7], 'team', 7)" @mousedown="startimer(team[7].counter, 'team', 7)" @mouseup="clearTimer">
@@ -415,7 +415,7 @@
 					</template>
 					<template>
 						<div class="button_" @click="Accumulator(team[12], 'team', 12)" @mousedown="startimer(team[12].counter, 'team', 12)" @mouseup="clearTimer">
-							<div class="context">脱落擦伤</div>
+							<div class="context">下件擦伤</div>
 							<div class="number">{{ team[12].counter }}</div>
 						</div>
 						<div class="button_" @click="Accumulator(team[13], 'team', 13)" @mousedown="startimer(team[13].counter, 'team', 13)" @mouseup="clearTimer">
--- a/src/views/qualityManagement/FQC/qualityStatistics.vue
+++ b/src/views/qualityManagement/FQC/qualityStatistics.vue
@@ -214,7 +214,7 @@
 			</vxe-colgroup>

 			<vxe-colgroup title="班组操作" align="center">
-				<vxe-column field="teamTuoluocanshuang" title="脱  落  擦  伤" min-width="60px">
+				<vxe-column field="teamTuoluocanshuang" title="下  件  擦  伤" min-width="60px">
 					<template #default="{ row }"> {{ offsetValue(row.teamTuoluocanshuang) }}</template>
 				</vxe-column>
 				<vxe-column field="teamQingqiqikuai" title="清  漆  漆  块" min-width="60px">
--- a/src/views/qualityManagement/FQC/thirtyFQC.vue
+++ b/src/views/qualityManagement/FQC/thirtyFQC.vue
@@ -5,7 +5,7 @@
 		<div class="grid">
 			<!-- 第一行 -->
 			<div class="grid_1">
-				<div class="title_Line" >抛光</div>
+				<div class="title_Line">抛光</div>
 				<div class="title_Line">打磨</div>
 				<div class="title_Line">报废</div>
 			</div>
@@ -19,7 +19,6 @@
 							@click="Accumulator(paint[0], 'paint', 0)"
 							@mousedown="startimer(paint[0].counter, 'paint', 0)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">缩孔</div>
 							<div class="number">{{ paint[0].counter }}</div>
@@ -29,7 +28,6 @@
 							@click="Accumulator(paint[1], 'paint', 1)"
 							@mousedown="startimer(paint[1].counter, 'paint', 1)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">针孔</div>
 							<div class="number">{{ paint[1].counter }}</div>
@@ -39,7 +37,6 @@
 							@click="Accumulator(paint[2], 'paint', 2)"
 							@mousedown="startimer(paint[2].counter, 'paint', 2)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">失光</div>
 							<div class="number">{{ paint[2].counter }}</div>
@@ -49,7 +46,6 @@
 							@click="Accumulator(paint[3], 'paint', 3)"
 							@mousedown="startimer(paint[3].counter, 'paint', 3)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">色差</div>
 							<div class="number">{{ paint[3].counter }}</div>
@@ -59,7 +55,6 @@
 							@click="Accumulator(paint[4], 'paint', 4)"
 							@mousedown="startimer(paint[4].counter, 'paint', 4)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">点子</div>
 							<div class="number">{{ paint[4].counter }}</div>
@@ -69,7 +64,6 @@
 							@click="Accumulator(paint[5], 'paint', 5)"
 							@mousedown="startimer(paint[5].counter, 'paint', 5)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">其他</div>
 							<div class="number">{{ paint[5].counter }}</div>
@@ -199,7 +193,6 @@
 							@click="Accumulator(device[0], 'device', 0)"
 							@mousedown="startimer(device[0].counter, 'device', 0)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">水斑</div>
 							<div class="number">{{ device[0].counter }}</div>
@@ -209,7 +202,6 @@
 							@click="Accumulator(device[1], 'device', 1)"
 							@mousedown="startimer(device[1].counter, 'device', 1)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">脏点</div>
 							<div class="number">{{ device[1].counter }}</div>
@@ -219,7 +211,6 @@
 							@click="Accumulator(device[2], 'device', 2)"
 							@mousedown="startimer(device[2].counter, 'device', 2)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">变形</div>
 							<div class="number">{{ device[2].counter }}</div>
@@ -229,7 +220,6 @@
 							@click="Accumulator(device[3], 'device', 3)"
 							@mousedown="startimer(device[3].counter, 'device', 3)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">油珠</div>
 							<div class="number">{{ device[3].counter }}</div>
@@ -239,7 +229,6 @@
 							@click="Accumulator(device[4], 'device', 4)"
 							@mousedown="startimer(device[4].counter, 'device', 4)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">脱落</div>
 							<div class="number">{{ device[4].counter }}</div>
@@ -249,7 +238,6 @@
 							@click="Accumulator(device[5], 'device', 5)"
 							@mousedown="startimer(device[5].counter, 'device', 5)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">撞伤</div>
 							<div class="number">{{ device[5].counter }}</div>
@@ -259,7 +247,6 @@
 							@click="Accumulator(device[6], 'device', 6)"
 							@mousedown="startimer(device[6].counter, 'device', 6)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">其他</div>
 							<div class="number">{{ device[6].counter }}</div>
@@ -399,7 +386,7 @@
 			</div>
 			<!-- 第二行 -->
 			<div class="grid_1">
-				<div class="title_Line" >抛光</div>
+				<div class="title_Line">抛光</div>
 				<div class="title_Line">打磨</div>
 				<div class="title_Line">报废</div>
 			</div>
@@ -413,7 +400,6 @@
 							@click="Accumulator(blank[0], 'blank', 0)"
 							@mousedown="startimer(blank[0].counter, 'blank', 0)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">毛刺</div>
 							<div class="number">{{ blank[0].counter }}</div>
@@ -423,7 +409,6 @@
 							@click="Accumulator(blank[1], 'blank', 1)"
 							@mousedown="startimer(blank[1].counter, 'blank', 1)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">缩印</div>
 							<div class="number">{{ blank[1].counter }}</div>
@@ -433,7 +418,6 @@
 							@click="Accumulator(blank[2], 'blank', 2)"
 							@mousedown="startimer(blank[2].counter, 'blank', 2)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">擦伤</div>
 							<div class="number">{{ blank[2].counter }}</div>
@@ -443,7 +427,6 @@
 							@click="Accumulator(blank[3], 'blank', 3)"
 							@mousedown="startimer(blank[3].counter, 'blank', 3)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">砂印</div>
 							<div class="number">{{ blank[3].counter }}</div>
@@ -453,7 +436,6 @@
 							@click="Accumulator(blank[4], 'blank', 4)"
 							@mousedown="startimer(blank[4].counter, 'blank', 4)"
 							@mouseup="clearTimer"
-							
 						>
 							<!-- <div class="context">脏点</div> 20240920修改 -->
 							<div class="context">流痕</div>
@@ -464,7 +446,6 @@
 							@click="Accumulator(blank[5], 'blank', 5)"
 							@mousedown="startimer(blank[5].counter, 'blank', 5)"
 							@mouseup="clearTimer"
-							
 						>
 							<!-- <div class="context">打磨</div> 20240920修改 -->
 							<div class="context">开裂</div>
@@ -600,7 +581,6 @@
 							@click="Accumulator(program[0], 'program', 0)"
 							@mousedown="startimer(program[0].counter, 'program', 0)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">流挂</div>
 							<div class="number">{{ program[0].counter }}</div>
@@ -610,7 +590,6 @@
 							@click="Accumulator(program[1], 'program', 1)"
 							@mousedown="startimer(program[1].counter, 'program', 1)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">色漆缺漆</div>
 							<div class="number">{{ program[1].counter }}</div>
@@ -620,7 +599,6 @@
 							@click="Accumulator(program[2], 'program', 2)"
 							@mousedown="startimer(program[2].counter, 'program', 2)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">清漆缺漆</div>
 							<div class="number">{{ program[2].counter }}</div>
@@ -630,7 +608,6 @@
 							@click="Accumulator(program[3], 'program', 3)"
 							@mousedown="startimer(program[3].counter, 'program', 3)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">桔皮</div>
 							<div class="number">{{ program[3].counter }}</div>
@@ -640,7 +617,6 @@
 							@click="Accumulator(program[4], 'program', 4)"
 							@mousedown="startimer(program[4].counter, 'program', 4)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">其他</div>
 							<div class="number">{{ program[4].counter }}</div>
@@ -744,7 +720,7 @@
 			</div>
 			<!-- 第三行 -->
 			<div class="grid_5">
-				<div class="title_Line" >抛光</div>
+				<div class="title_Line">抛光</div>
 				<div class="title_Line">打磨</div>
 				<div class="title_Line">报废</div>
 			</div>
@@ -758,9 +734,8 @@
 							@click="Accumulator(team[0], 'team', 0)"
 							@mousedown="startimer(team[0].counter, 'team', 0)"
 							@mouseup="clearTimer"
-							
 						>
-							<div class="context">脱落擦伤</div>
+							<div class="context">下件擦伤</div>
 							<div class="number">{{ team[0].counter }}</div>
 						</div>
 						<div
@@ -768,7 +743,6 @@
 							@click="Accumulator(team[1], 'team', 1)"
 							@mousedown="startimer(team[1].counter, 'team', 1)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">清漆漆块</div>
 							<div class="number">{{ team[1].counter }}</div>
@@ -778,7 +752,6 @@
 							@click="Accumulator(team[2], 'team', 2)"
 							@mousedown="startimer(team[2].counter, 'team', 2)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">色漆漆块</div>
 							<div class="number">{{ team[2].counter }}</div>
@@ -788,7 +761,6 @@
 							@click="Accumulator(team[3], 'team', 3)"
 							@mousedown="startimer(team[3].counter, 'team', 3)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">发花</div>
 							<div class="number">{{ team[3].counter }}</div>
@@ -798,7 +770,6 @@
 							@click="Accumulator(team[4], 'team', 4)"
 							@mousedown="startimer(team[4].counter, 'team', 4)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">亮斑</div>
 							<div class="number">{{ team[4].counter }}</div>
@@ -808,7 +779,6 @@
 							@click="Accumulator(team[5], 'team', 5)"
 							@mousedown="startimer(team[5].counter, 'team', 5)"
 							@mouseup="clearTimer"
-							
 						>
 							<div class="context">喷漏</div>
 							<div class="number">{{ team[5].counter }}</div>
@@ -821,7 +791,7 @@
 							@mousedown="startimer(team[6].counter, 'team', 6)"
 							@mouseup="clearTimer"
 						>
-							<div class="context">脱落擦伤</div>
+							<div class="context">下件擦伤</div>
 							<div class="number">{{ team[6].counter }}</div>
 						</div>
 						<div
@@ -877,7 +847,7 @@
 							@mousedown="startimer(team[12].counter, 'team', 12)"
 							@mouseup="clearTimer"
 						>
-							<div class="context">脱落擦伤</div>
+							<div class="context">下件擦伤</div>
 							<div class="number">{{ team[12].counter }}</div>
 						</div>
 						<div