2024-11-15 汽车吊-履带吊

src/api/modules/cathangCrane.ts

@@ -0,0 +1,65 @@
+import http from "@/api";
+const BASEURL = import.meta.env.VITE_API_URL;
+
+// 汽车吊
+
+// 列表查询
+export const gettrucklist = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/truckCrane/list`, params);
+};
+
+// 列表查询单条
+export const gettruckqueryById = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/truckCrane/queryById`, params);
+};
+
+// 查询最新状态
+export const gettruckdata = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/truckCraneCurrentData/getNewData`, params);
+};
+
+// 设备情况汇总
+export const gettruckstat = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/truckCrane/onlineStat`, params);
+};
+
+// 设备报警分析
+export const gettruckAlam = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/truckCraneAlarm/alarmStat`, params);
+};
+
+// 图表分析
+export const gettruckend = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/truckCraneCurrentData/windSpeedTrend`, params);
+};
+
+// 履带吊
+// 列表查询
+export const getcrawlist = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/crawlerCrane/list`, params);
+};
+
+// 列表查询单条
+export const getcrawqueryById = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/crawlerCrane/queryById`, params);
+};
+
+// 查询最新状态
+export const getcrawdata = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/crawlerCraneCurrentData/getNewData`, params);
+};
+
+// 设备情况汇总
+export const getcrawstat = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/crawlerCrane/onlineStat`, params);
+};
+
+// 设备报警分析
+export const getcrawAlam = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/crawlerCraneAlarm/alarmStat`, params);
+};
+
+// 图表分析
+export const getcrawend = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/crawlerCraneCurrentData/windSpeedTrend`, params);
+};

src/views/sevenLargeScreen/cathangCrane/StattrackLine.vue

@@ -5,16 +5,96 @@
 <script setup lang="ts">
 import * as echarts from "echarts";
 import { onMounted, ref } from "vue";
-import { getExceedSpeedTrend } from "@/api/modules/vehicle";
+import { gettruckend } from "@/api/modules/cathangCrane";
 
 import { GlobalStore } from "@/stores";
 const store = GlobalStore();
 
 let y = ref([150, 230, 224, 218, 135, 147, 260]);
-let x = ref(["09.24", "09.25", "09.26", "09.27", "09.28", "09.29", "09.30"]);
+let x = ref();
+
+const servedata = ref([
+	{
+		name: "暂无数据",
+		type: "line",
+		data: [0, 0, 0, 0],
+		// 折线变得圆滑
+		smooth: true,
+		// 把点去掉
+		showSymbol: true,
+		lineStyle: {
+			width: 3,
+			color: "#42b2f1"
+		},
+		itemStyle: {
+			color: "#0368FF"
+		},
+		areaStyle: {
+			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+				{
+					offset: 0,
+					color: "rgba(32, 102, 179, 0.4)"
+				},
+				{
+					offset: 1,
+					color: "rgba(55, 167, 232, 0.4)"
+				}
+			])
+		}
+	}
+]);
 
 onMounted(async () => {
-	await ongetExceedSpeedTrend();
+	await ongetExceedSpeedTrend(1);
+});
+
+const ongetExceedSpeedTrend = async item => {
+	const res: any = await gettruckend({
+		projectSn: store.sn,
+		selectType: item
+	});
+
+	console.log("一周内统计", res);
+
+	if (res.result.length > 0) {
+		x.value = res.result[0].windSpeed.map(v => v.dayTitle);
+		console.log("======x.value======", x.value);
+
+		servedata.value = res.result.map(item => {
+			return {
+				name: item.deviceName,
+				type: "line",
+				data: item.windSpeed.map(v => v.windSpeed),
+				// 折线变得圆滑
+				smooth: true,
+				// 把点去掉
+				showSymbol: true,
+				lineStyle: {
+					width: 3,
+					color: "#42b2f1"
+				},
+				itemStyle: {
+					color: "#0368FF"
+				},
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{
+							offset: 0,
+							color: "rgba(32, 102, 179, 0.4)"
+						},
+						{
+							offset: 1,
+							color: "rgba(55, 167, 232, 0.4)"
+						}
+					])
+				}
+			};
+		});
+	} else {
+		x.value = ["00", "00", "00", "00"];
+		// servedata.value = [];
+	}
+
 	const chartContainer = echarts.init(document.getElementById("charttrackContainer"));
 	const option = {
 		// 提示框
@@ -22,23 +102,11 @@ onMounted(async () => {
 			//触发类型
 			trigger: "axis",
 			// 提示框的背景颜色
-			backgroundColor: "#2561d7",
+			backgroundColor: "rgba(173, 198, 255, 0.50)",
 			// 提示框边框厚度
 			borderWidth: 0,
 			// 提示款边框颜色
 			borderColor: "#ccc",
-			formatter: function (params) {
-				console.log("params", params);
-
-				// params 是一个数组，包含了当前悬浮点的所有数据信息
-				let result = "";
-				params.forEach(function (item) {
-					console.log("item", item);
-
-					result += "日期" + item.axisValue + "<br/>" + item.seriesName + ": " + item.value;
-				});
-				return result;
-			},
 			// 提示框字体颜色
 			textStyle: {
 				color: "#fff"
@@ -76,11 +144,12 @@ onMounted(async () => {
 			itemWidth: 13,
 			itemHeight: 3,
 			right: "10%",
-			top: 0
+			top: 0,
+			type: servedata.value.length > 5 ? "scroll" : ""
 		},
 		xAxis: {
 			type: "category",
-			data: x,
+			data: x.value,
 			boundaryGap: false,
 			axisTick: {
 				show: false
@@ -105,6 +174,26 @@ onMounted(async () => {
 				}
 			}
 		},
+		dataZoom: {
+			type: "slider", // 滑动条类型
+			show: true, // 是否显示滑动条,在这里可以根据自己的需求做判断，超过时显示进度条
+			startValue: 0, // 展示区域内容的起始数值
+			endValue: 6, // 展示区域内容的结束数值
+			height: 6, // 滑动条组件高度
+			bottom: 0, // 距离图表区域下边的距离
+			showDetail: false, // 拖拽时是否显示详情
+			showDataShadow: false, // 是否在组件中显示数据阴影
+			fillerColor: "#6fd7f6", // 平移条的填充颜色
+			borderColor: "transparent", // 边框颜色
+			zoomLock: true, // 锁定视图
+			brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
+			// 通过该属性可以只滑动，不显示缩放功能
+			handleStyle: {
+				// 手柄样式
+				opacity: 0
+				// borderRadius: 20
+			}
+		},
 		yAxis: {
 			type: "value",
 			splitNumber: 5,
@@ -132,87 +221,43 @@ onMounted(async () => {
 				}
 			}
 		},
-		series: [
-			{
-				name: "履带吊",
-				type: "line",
-				stack: "Total",
-				areaStyle: {},
-				emphasis: {
-					// focus: 'series'
-				},
-				data: y,
-				// 折线变得圆滑
-				smooth: true,
-				// 把点去掉
-				showSymbol: true,
-				lineStyle: {
-					width: 3,
-					color: "#42b2f1"
-				},
-				itemStyle: {
-					color: "#0368FF"
-				},
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{
-							offset: 0,
-							color: "rgba(32, 102, 179, 0.4)"
-						},
-						{
-							offset: 1,
-							color: "rgba(55, 167, 232, 0.4)"
-						}
-					])
-				}
-			},
-			{
-				name: "履带吊测试",
-				type: "line",
-				stack: "Total",
-				areaStyle: {},
-				emphasis: {
-					// focus: 'series'
-				},
-				data: y,
-				// 折线变得圆滑
-				smooth: true,
-				// 把点去掉
-				showSymbol: true,
-				lineStyle: {
-					width: 3,
-					color: "#42b2f1"
-				},
-				itemStyle: {
-					color: "#0368FF"
-				},
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{
-							offset: 0,
-							color: "rgba(32, 102, 179, 0.4)"
-						},
-						{
-							offset: 1,
-							color: "rgba(55, 167, 232, 0.4)"
-						}
-					])
-				}
-			}
-		]
+		series: servedata.value
+		// {
+		// 		name: "履带吊",
+		// 		type: "line",
+		// 		data: y,
+		// 		// 折线变得圆滑
+		// 		smooth: true,
+		// 		// 把点去掉
+		// 		showSymbol: true,
+		// 		lineStyle: {
+		// 			width: 3,
+		// 			color: "#42b2f1"
+		// 		},
+		// 		itemStyle: {
+		// 			color: "#0368FF"
+		// 		},
+		// 		areaStyle: {
+		// 			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+		// 				{
+		// 					offset: 0,
+		// 					color: "rgba(32, 102, 179, 0.4)"
+		// 				},
+		// 				{
+		// 					offset: 1,
+		// 					color: "rgba(55, 167, 232, 0.4)"
+		// 				}
+		// 			])
+		// 		}
+		// 	}
 	};
 	chartContainer.setOption(option);
-});
-
-const ongetExceedSpeedTrend = async () => {
-	const res: any = await getExceedSpeedTrend({
-		projectSn: store.sn
-	});
-
-	console.log("一周内统计", res);
-	y = res.result.map(item => item.y);
-	x = res.result.map(item => item.x);
 };
+
+// 导出方法，以便父组件可以访问
+defineExpose({
+	ongetExceedSpeedTrend
+});
 </script>
  
 <style>

src/views/sevenLargeScreen/indexL.vue

@@ -271,17 +271,8 @@ let adminName = ref("" as any);
 let menuList = ref([
 	{
 		moduleName: "综合管理",
-		// modulePath: "/projectOverview",
-		modulePath: "/trackCrane",
+		modulePath: "/projectOverview",
 		menuList: [
-			{
-				menuName: "汽车吊监测",
-				companyPath: "/cathangCrane"
-			},
-			{
-				menuName: "履带吊监测",
-				companyPath: "/trackCrane"
-			},
 			{
 				menuName: "工程概况",
 				companyPath: "/projectOverview"
@@ -293,7 +284,7 @@ let menuList = ref([
 			{
 				menuName: "双碳管理",
 				companyPath: "/projectioter"
-			},
+			}
 			// {
 			// 	menuName: "工程概况-1",
 			// 	companyPath: "/projectOverviewer"
@@ -462,6 +453,14 @@ let menuList = ref([
 				menuName: "塔吊监测",
 				companyPath: "/towerCraneMonitoring"
 			},
+			{
+				menuName: "汽车吊监测",
+				companyPath: "/cathangCrane"
+			},
+			{
+				menuName: "履带吊监测",
+				companyPath: "/trackCrane"
+			},
 			{
 				menuName: "升降机监测",
 				companyPath: "/elevatorMonitoring"
@@ -663,10 +662,10 @@ onMounted(async () => {
 	if (COMPANY === "ztsyj") {
 		menuList.value = ZTSYJMenu;
 	}
-	if(COMPANY === "xnyzhjj") {
+	if (COMPANY === "xnyzhjj") {
 		menuList.value = XNYZHJJMenu;
 	}
-	if(COMPANY === "allxm") {
+	if (COMPANY === "allxm") {
 		menuList.value = ALLXMMenu;
 	}
 	console.log("配置菜单", menuList.value);
@@ -760,7 +759,7 @@ function jumpBgd() {
 		window.location.replace("http://182.90.224.237:15551/#/login?token=" + store.token);
 	} else if (COMPANY === "scwc") {
 		window.location.replace("http://192.168.9.249:9809/#/login?token=" + store.token);
-	}  else if (COMPANY === "xnyzhjj") {
+	} else if (COMPANY === "xnyzhjj") {
 		window.location.replace("http://121.37.106.37:9809/#/login?token=" + store.token);
 	} else if (envList.includes(COMPANY)) {
 		window.location.replace(BASEURL + "/#/login?token=" + store.token);

src/views/sevenLargeScreen/trackCrane/StattrackLine.vue

@@ -5,16 +5,96 @@
 <script setup lang="ts">
 import * as echarts from "echarts";
 import { onMounted, ref } from "vue";
-import { getExceedSpeedTrend } from "@/api/modules/vehicle";
+import { getcrawend } from "@/api/modules/cathangCrane";
 
 import { GlobalStore } from "@/stores";
 const store = GlobalStore();
 
 let y = ref([150, 230, 224, 218, 135, 147, 260]);
-let x = ref(["09.24", "09.25", "09.26", "09.27", "09.28", "09.29", "09.30"]);
+let x = ref();
+
+const servedata = ref([
+	{
+		name: "暂无数据",
+		type: "line",
+		data: [0, 0, 0, 0],
+		// 折线变得圆滑
+		smooth: true,
+		// 把点去掉
+		showSymbol: true,
+		lineStyle: {
+			width: 3,
+			color: "#42b2f1"
+		},
+		itemStyle: {
+			color: "#0368FF"
+		},
+		areaStyle: {
+			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+				{
+					offset: 0,
+					color: "rgba(32, 102, 179, 0.4)"
+				},
+				{
+					offset: 1,
+					color: "rgba(55, 167, 232, 0.4)"
+				}
+			])
+		}
+	}
+]);
 
 onMounted(async () => {
-	await ongetExceedSpeedTrend();
+	await ongetExceedSpeedTrend(1);
+});
+
+const ongetExceedSpeedTrend = async item => {
+	const res: any = await getcrawend({
+		projectSn: store.sn,
+		selectType: item
+	});
+
+	console.log("一周内统计", res);
+
+	if (res.result.length > 0) {
+		x.value = res.result[0].windSpeed.map(v => v.dayTitle);
+		console.log("======x.value======", x.value);
+
+		servedata.value = res.result.map(item => {
+			return {
+				name: item.deviceName,
+				type: "line",
+				data: item.windSpeed.map(v => v.windSpeed),
+				// 折线变得圆滑
+				smooth: true,
+				// 把点去掉
+				showSymbol: true,
+				lineStyle: {
+					width: 3,
+					color: "#42b2f1"
+				},
+				itemStyle: {
+					color: "#0368FF"
+				},
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{
+							offset: 0,
+							color: "rgba(32, 102, 179, 0.4)"
+						},
+						{
+							offset: 1,
+							color: "rgba(55, 167, 232, 0.4)"
+						}
+					])
+				}
+			};
+		});
+	} else {
+		x.value = ["00", "00", "00", "00"];
+		// servedata.value = [];
+	}
+
 	const chartContainer = echarts.init(document.getElementById("charttrackContainer"));
 	const option = {
 		// 提示框
@@ -22,23 +102,11 @@ onMounted(async () => {
 			//触发类型
 			trigger: "axis",
 			// 提示框的背景颜色
-			backgroundColor: "#2561d7",
+			backgroundColor: "rgba(173, 198, 255, 0.50)",
 			// 提示框边框厚度
 			borderWidth: 0,
 			// 提示款边框颜色
 			borderColor: "#ccc",
-			formatter: function (params) {
-				console.log("params", params);
-
-				// params 是一个数组，包含了当前悬浮点的所有数据信息
-				let result = "";
-				params.forEach(function (item) {
-					console.log("item", item);
-
-					result += "日期" + item.axisValue + "<br/>" + item.seriesName + ": " + item.value;
-				});
-				return result;
-			},
 			// 提示框字体颜色
 			textStyle: {
 				color: "#fff"
@@ -76,11 +144,12 @@ onMounted(async () => {
 			itemWidth: 13,
 			itemHeight: 3,
 			right: "10%",
-			top: 0
+			top: 0,
+			type: servedata.value.length > 5 ? "scroll" : ""
 		},
 		xAxis: {
 			type: "category",
-			data: x,
+			data: x.value,
 			boundaryGap: false,
 			axisTick: {
 				show: false
@@ -105,6 +174,26 @@ onMounted(async () => {
 				}
 			}
 		},
+		dataZoom: {
+			type: "slider", // 滑动条类型
+			show: true, // 是否显示滑动条,在这里可以根据自己的需求做判断，超过时显示进度条
+			startValue: 0, // 展示区域内容的起始数值
+			endValue: 6, // 展示区域内容的结束数值
+			height: 6, // 滑动条组件高度
+			bottom: 0, // 距离图表区域下边的距离
+			showDetail: false, // 拖拽时是否显示详情
+			showDataShadow: false, // 是否在组件中显示数据阴影
+			fillerColor: "#6fd7f6", // 平移条的填充颜色
+			borderColor: "transparent", // 边框颜色
+			zoomLock: true, // 锁定视图
+			brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
+			// 通过该属性可以只滑动，不显示缩放功能
+			handleStyle: {
+				// 手柄样式
+				opacity: 0
+				// borderRadius: 20
+			}
+		},
 		yAxis: {
 			type: "value",
 			splitNumber: 5,
@@ -132,87 +221,42 @@ onMounted(async () => {
 				}
 			}
 		},
-		series: [
-			{
-				name: "履带吊",
-				type: "line",
-				stack: "Total",
-				areaStyle: {},
-				emphasis: {
-					// focus: 'series'
-				},
-				data: y,
-				// 折线变得圆滑
-				smooth: true,
-				// 把点去掉
-				showSymbol: true,
-				lineStyle: {
-					width: 3,
-					color: "#42b2f1"
-				},
-				itemStyle: {
-					color: "#0368FF"
-				},
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{
-							offset: 0,
-							color: "rgba(32, 102, 179, 0.4)"
-						},
-						{
-							offset: 1,
-							color: "rgba(55, 167, 232, 0.4)"
-						}
-					])
-				}
-			},
-			{
-				name: "履带吊测试",
-				type: "line",
-				stack: "Total",
-				areaStyle: {},
-				emphasis: {
-					// focus: 'series'
-				},
-				data: y,
-				// 折线变得圆滑
-				smooth: true,
-				// 把点去掉
-				showSymbol: true,
-				lineStyle: {
-					width: 3,
-					color: "#42b2f1"
-				},
-				itemStyle: {
-					color: "#0368FF"
-				},
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{
-							offset: 0,
-							color: "rgba(32, 102, 179, 0.4)"
-						},
-						{
-							offset: 1,
-							color: "rgba(55, 167, 232, 0.4)"
-						}
-					])
-				}
-			}
-		]
+		series: servedata.value
+		// {
+		// 		name: "履带吊",
+		// 		type: "line",
+		// 		data: y,
+		// 		// 折线变得圆滑
+		// 		smooth: true,
+		// 		// 把点去掉
+		// 		showSymbol: true,
+		// 		lineStyle: {
+		// 			width: 3,
+		// 			color: "#42b2f1"
+		// 		},
+		// 		itemStyle: {
+		// 			color: "#0368FF"
+		// 		},
+		// 		areaStyle: {
+		// 			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+		// 				{
+		// 					offset: 0,
+		// 					color: "rgba(32, 102, 179, 0.4)"
+		// 				},
+		// 				{
+		// 					offset: 1,
+		// 					color: "rgba(55, 167, 232, 0.4)"
+		// 				}
+		// 			])
+		// 		}
+		// 	}
 	};
 	chartContainer.setOption(option);
-});
-
-const ongetExceedSpeedTrend = async () => {
-	const res: any = await getExceedSpeedTrend({
-		projectSn: store.sn
-	});
-
-	console.log("一周内统计", res);
-	y = res.result.map(item => item.y);
-	x = res.result.map(item => item.x);
 };
+
+defineExpose({
+	ongetExceedSpeedTrend
+});
 </script>
  
 <style>