From 2ed4e5dc7a5340fef6cb6d6ce319fdbaa39b2e18 Mon Sep 17 00:00:00 2001
From: zty <zty18395607196@163.com>
Date: Tue, 29 Oct 2024 16:28:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:fac=5Fcal=20=E5=A2=9E=E5=8A=A0=20=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97=E4=B8=AD=E5=BF=83=E6=8A=98=E7=BA=BF=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bigScreen/index_enm.vue |  1 -
 src/views/fac_cal/mpointstat.vue  | 79 ++++++++++++++++++++++++++++---
 2 files changed, 73 insertions(+), 7 deletions(-)

diff --git a/src/views/bigScreen/index_enm.vue b/src/views/bigScreen/index_enm.vue
index 089d8e2f..fda451ec 100644
--- a/src/views/bigScreen/index_enm.vue
+++ b/src/views/bigScreen/index_enm.vue
@@ -501,7 +501,6 @@ export default {
 					axisLabel: {
 						color: "#ffffff",
 					},
-
 					splitLine: {
 						show: true,
 						lineStyle: {
diff --git a/src/views/fac_cal/mpointstat.vue b/src/views/fac_cal/mpointstat.vue
index f06c0529..d2c499dd 100644
--- a/src/views/fac_cal/mpointstat.vue
+++ b/src/views/fac_cal/mpointstat.vue
@@ -30,9 +30,10 @@
 						:value="item.value"
 					></el-option>
 				</el-select>
-                <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至"
-                                    start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQuery"
-                                    style="width: 100%" />
+                <el-date-picker v-model="timeRange" type="datetimerange" 
+					value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+					start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQuery"
+					style="width: 100%" />
 				<el-button
 					type="primary"
 					icon="el-icon-search"
@@ -41,7 +42,8 @@
 				></el-button>
 			</div>
 		</el-header>
-		<el-main class="nopadding">
+		<el-container>
+			<el-main class="nopadding">
 			<scTable
 				ref="table"
 				:apiObj="apiObj"
@@ -51,6 +53,7 @@
                 :query="query"
 				highlightCurrentRow
 				@row-click="rowClick"
+				@dataChange="dataChange"
 			>
 				<el-table-column type="index" width="50" />
 				<el-table-column label="测点" prop="mpoint_name">
@@ -93,6 +96,12 @@
 				</el-table-column>
 			</scTable>
 		</el-main>
+		<el-aside style="width: 50%; float: right;">
+        <!-- 折线图组件 -->
+        <scEcharts :option="chartOption" height="400px" />
+      </el-aside>
+		</el-container>
+	</el-container>
 		<el-dialog title="校正" v-model="visible">
 			<el-main style="padding: 0 20px 20px 20px">
 				<el-form
@@ -142,9 +151,9 @@
 				<el-button @click="visible = false">取消</el-button>
 			</el-footer>
 		</el-dialog>
-	</el-container>
-</template>
+	</template>
 <script>
+
 export default {
 	name: "sflog",
 	data() {
@@ -157,6 +166,42 @@ export default {
                 start_time: null,
                 end_time: null
             },
+			chartOption: {
+				color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
+				tooltip: {
+					trigger: "axis",
+					axisPointer: {
+						type: "cross",
+						label: {
+							backgroundColor: "#6a7985",
+						},
+					},
+				},
+				legend: {
+					icon: "stack",
+					top: 5,
+					right: 5,
+					data: [],
+				},
+				grid: {
+					left: "2%",
+					right: "4%",
+					bottom: "5%",
+					containLabel: true,
+				},
+				xAxis: {
+					name: "",
+					type: "category",
+					data: [],
+					
+				},
+				yAxis: {
+					name: "当前值",
+					type: "value",
+					
+				},
+				series: [],
+			},
 			options: [
                 { label: "小时", value: "hour"},
                 { label: "天", value: "day" },
@@ -177,6 +222,28 @@ export default {
 		this.getMpoints();
 	},
 	methods: {
+	dataChange(req, tableData) {
+		let that = this;
+		let option = { ...that.chartOption };
+		// 获取 x 轴的数据
+		option.xAxis.data = tableData.map((item, index) => (index+1).toString());
+
+		// 获取 y 轴的数据
+
+		option.series = [
+			{
+				name: '总生产',
+				type: 'line', // 折线图类型
+				data: tableData.map((item) => parseFloat(item.val)), // 将字符串转为数字
+				smooth: true, // 平滑曲线
+			}
+		];
+		option.legend.data = ['总生产'];
+
+		// 更新图表选项
+		that.chartOption = option;
+	},
+
 		getMpoints() {
 			let that = this;
 			this.$API.enm.mpoint.list