From b6313d085d21c27de8082514bca43de818fc569a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AD=A3=E6=98=93?= <zhaozhengyi1b@126.com>
Date: Thu, 16 May 2024 13:18:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20vue-echarts=20echarts=20?=
 =?UTF-8?q?=E7=AD=89=E7=9B=B8=E5=85=B3=E5=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +
 src/main.js                                   |  5 +-
 src/views/wmsManagement/WmpatchSearch.vue     |  2 +-
 .../TheWmBatchSearch/仓库数据总看板/index.css | 90 ++++++++++++++++++
 .../TheWmBatchSearch/仓库数据总看板/index.vue | 92 ++++++++++++++++++-
 5 files changed, 186 insertions(+), 5 deletions(-)
 create mode 100644 src/views/wmsManagement/components/TheWmBatchSearch/仓库数据总看板/index.css

diff --git a/package.json b/package.json
index c7f7963..8f06303 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@jiaminghi/data-view": "^2.10.0",
     "@microsoft/signalr": "^6.0.23",
     "@riophae/vue-treeselect": "0.4.0",
+    "@vue/composition-api": "^1.7.2",
     "af-table-column": "^1.0.3",
     "animate.css": "^4.1.1",
     "axios": "^0.21.4",
@@ -56,6 +57,7 @@
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.4.9",
     "vue-easytable": "^2.27.1",
+    "vue-echarts": "^6.7.2",
     "vue-qr": "^4.0.9",
     "vue-router": "3.4.9",
     "vue-seamless-scroll": "^1.1.23",
diff --git a/src/main.js b/src/main.js
index 18493be..172e122 100644
--- a/src/main.js
+++ b/src/main.js
@@ -41,9 +41,9 @@ import DictData from '@/components/DictData';
 // 二维码与打印组件相关 KrPrintDesigner+VueQr
 import VueQr from 'vue-qr'
 import printJS from 'print-js'
-// echarts
+// echarts相关插件引入
 import * as echarts from 'echarts';
-
+import ECharts from 'vue-echarts'
 // VXE-Table相关组件
 import VXETable from 'vxe-table';
 
@@ -90,6 +90,7 @@ Vue.component('Editor', Editor)
 Vue.component('UploadImage', UploadImage)
 Vue.component('UploadFile', UploadFile)
 Vue.component('VueQr', VueQr)
+Vue.component('v-charts', ECharts)
 // Vue.use(printJS);
 Vue.use(permission)
 Vue.use(plugins)
diff --git a/src/views/wmsManagement/WmpatchSearch.vue b/src/views/wmsManagement/WmpatchSearch.vue
index a52ad34..a934e69 100644
--- a/src/views/wmsManagement/WmpatchSearch.vue
+++ b/src/views/wmsManagement/WmpatchSearch.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="app-container">
 		<el-tabs v-model="activeName" @tab-click="handleClick">
-			<!-- <el-tab-pane label="仓库数据总看板" name="1"><TAB1 v-if="activeName === '1'"></TAB1></el-tab-pane> -->
+			<el-tab-pane label="仓库数据总看板" name="1"><TAB1 v-if="activeName === '1'"></TAB1></el-tab-pane>
 			<el-tab-pane label="入库记录根据批次号" name="2"><TAB2 v-if="activeName === '2'"></TAB2></el-tab-pane>
 			<el-tab-pane label="入库记录根据零件号" name="3"><TAB3 v-if="activeName === '3'"></TAB3></el-tab-pane>
 			<el-tab-pane label="出库记录根据批次号" name="4"><TAB4 v-if="activeName === '4'"></TAB4></el-tab-pane>
diff --git a/src/views/wmsManagement/components/TheWmBatchSearch/仓库数据总看板/index.css b/src/views/wmsManagement/components/TheWmBatchSearch/仓库数据总看板/index.css
new file mode 100644
index 0000000..61ef451
--- /dev/null
+++ b/src/views/wmsManagement/components/TheWmBatchSearch/仓库数据总看板/index.css
@@ -0,0 +1,90 @@
+.border {
+	border: 1px solid #0055ff;
+}
+/* 主背景框 */
+.container{
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 800px;
+	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+}
+/* 排序 */
+.flex-row{
+	display: flex;
+	flex-direction: row;
+}
+.flex-column{
+	display: flex;
+	flex-direction: column;
+}
+/* 区域组件样式 */
+/* 边框适配 */
+.box-padding-10{
+	padding: 10px;
+}
+.box-padding-20{
+	padding: 20px;
+}
+/* 大屏背景色 */
+.main-background-color{
+	background-color: #1D282F;
+}
+/* 组件背景色 */
+.template-background-color{
+	background-color: #121F2A;
+}
+/* 文字颜色 */
+.text-t1{
+	color: #ffffff;
+}
+.text-t2{
+	color: #f4f6f9;
+}
+.text-t3{
+	color: #8CA386;
+}
+/* 主要颜色 */
+.main-color{
+	/* #44A9EB */
+	/* #2D9BF8 */
+	/* #44EBEA */
+	/* #EFBB65 */
+	/* #8FB2C9 */
+}
+/* 状态颜色 */
+.type-color{
+	/* #E27878 */
+	/* #44EBEA */
+	/* #EFBB65 */
+	/* #7E8B90 */
+}
+/* 头部 */
+.header-out-box {
+	width: 100%;
+	height: 60px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.main-out-box{
+	padding: 20px;
+	width: 100%;
+	height: 100%;
+}
+
+/* 图表常用样式 */
+.chart-out-box {
+	width: 100%;
+	height: 340px;
+	padding: 10px;
+}
+
+.chart-box1 {
+	width: 480px;
+	height: 380px;
+}
+.number-box{
+	width: 100%;
+	height: 33%;
+}
\ No newline at end of file
diff --git a/src/views/wmsManagement/components/TheWmBatchSearch/仓库数据总看板/index.vue b/src/views/wmsManagement/components/TheWmBatchSearch/仓库数据总看板/index.vue
index ac1be6b..22a3fe3 100644
--- a/src/views/wmsManagement/components/TheWmBatchSearch/仓库数据总看板/index.vue
+++ b/src/views/wmsManagement/components/TheWmBatchSearch/仓库数据总看板/index.vue
@@ -1,9 +1,97 @@
 <template>
-	<div>仓库数据总看板</div>
+	<div class="container main-background-color">
+		<dv-border-box-11 title="仓库数据总看板">
+			<div class="header-out-box">
+				<!-- <dv-decoration-1 style="width:200px;height:50px;" /> -->
+			</div>
+			<div class="main-out-box">
+				<!-- 第一层 -->
+				<el-row type="flex" justify="space-around">
+					<el-col :span="8">
+
+						<dv-border-box-13 class="chart-out-box">
+						</dv-border-box-13>
+					</el-col>
+					<el-col :span="8">
+						<dv-border-box-8 class="chart-out-box">
+							<dv-border-box-7>
+								<dv-border-box-10 class="number-box">dv-border-box-9</dv-border-box-10>
+								<dv-border-box-10 class="number-box">dv-border-box-9</dv-border-box-10>
+								<dv-border-box-10 class="number-box">dv-border-box-9</dv-border-box-10>
+							</dv-border-box-7>
+						</dv-border-box-8>
+					</el-col>
+					<el-col :span="8">
+						<dv-border-box-13 class="chart-out-box">
+						</dv-border-box-13>
+					</el-col>
+				</el-row>
+				<!-- 第二层 -->
+				<el-row type="flex" justify="space-around">
+					<el-col :span="8">
+						<dv-border-box-13 class="chart-out-box">
+
+						</dv-border-box-13>
+					</el-col>
+					<el-col :span="8">
+						<dv-border-box-13 class="chart-out-box">
+
+						</dv-border-box-13>
+					</el-col>
+					<el-col :span="8">
+						<dv-border-box-13 class="chart-out-box">
+
+						</dv-border-box-13>
+					</el-col>
+				</el-row>
+
+			</div>
+
+		</dv-border-box-11>
+
+		<!-- 		<dv-border-box-1 >
+			<v-charts class="chart-box1 border" :loading="loading1" :option="options1" />
+		</dv-border-box-1>
+		<dv-loading>Loading...</dv-loading> -->
+	</div>
 </template>
 
 <script>
+	export default {
+		name: 'PatchSearch1',
+		data() {
+			return {
+				loading1: false,
+				title: '看板标题',
+				options1: {
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow'
+						}
+					},
+					xAxis: {
+						type: 'category',
+						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+					},
+					yAxis: {
+						type: 'value'
+					},
+					series: [{
+						data: [120, 200, 150, 80, 70, 110, 130],
+						type: 'bar'
+					}]
+
+				}
+			}
+		},
+		created() {},
+		methods: {
+
+		}
+	}
 </script>
 
-<style>
+<style scoped>
+	@import url("index.css");
 </style>
\ No newline at end of file