~ganjingjun/jiaotongdaxue.git

			@@ -18,21 +18,21 @@
			<img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/shishirenshu.png" alt="" />
			<span class="satalabel ml-[8px]">实时人数</span>
			</div>
			<div class="value text-[#00FFFF] text-[28px] font-bold">62</div>
			<div class="value text-[#00FFFF] text-[28px] font-bold">{{ userData.RealtimeUserNumber }}</div>
			</div>
			<div class="stat-item mb-[10px]">
			<div class="stat-info">
			<img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/people.png" alt="" />
			<span class="satalabel ml-[8px]">今日累计/人次</span>
			</div>
			<div class="value text-[#FFD500] text-[28px] font-bold">62</div>
			<div class="value text-[#FFD500] text-[28px] font-bold">{{ userData.TodayUserNumber }}</div>
			</div>
			<div class="stat-item">
			<div class="stat-info">
			<img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/zaigang.png" alt="" />
			<span class="satalabel ml-[8px]">在岗总数</span>
			</div>
			<div class="value text-[#FFD500] text-[28px] font-bold">62</div>
			<div class="value text-[#FFD500] text-[28px] font-bold">{{ userData.DutyUserTotle }}</div>
			</div>
			</div>
			</div>
			@@ -49,7 +49,7 @@
			>
			</div>
			<div class="equipment-status" :style="sectionStyle">
			<el-select v-model="equipmentSelected" placeholder="请选择">
			<el-select v-model="deviceSelected" placeholder="请选择" @change="handleSelectChange">
			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
			<div
			@@ -114,7 +114,7 @@
			<div class="env-info">
			<span class="envlabel">大气温度</span>
			<div class="envvalue" :style="enviorStyle">
			<span class="envvalue-text">5°C</span>
			<span class="envvalue-text">{{ evnData.Tmp + "°C" }}</span>
			</div>
			</div>
			</div>
			@@ -123,7 +123,7 @@
			<div class="env-info">
			<span class="envlabel">大气湿度</span>
			<div class="envvalue" :style="enviorStyle">
			<span class="envvalue-text">22.9%</span>
			<span class="envvalue-text">{{ evnData.Rh + "%" }}</span>
			</div>
			</div>
			</div>
			@@ -132,7 +132,7 @@
			<div class="env-info">
			<span class="envlabel">PM2.5</span>
			<div class="envvalue" :style="enviorStyle">
			<span class="envvalue-text">10 μg/m³</span>
			<span class="envvalue-text">{{ evnData.Pm25 + "μg/m³" }}</span>
			</div>
			</div>
			</div>
			@@ -141,7 +141,7 @@
			<div class="env-info">
			<span class="envlabel">PM10</span>
			<div class="envvalue" :style="enviorStyle">
			<span class="envvalue-text">13 μg/m³</span>
			<span class="envvalue-text">{{ evnData.Pm10 + "μg/m³" }}</span>
			</div>
			</div>
			</div>
			@@ -150,7 +150,7 @@
			<div class="env-info">
			<span class="envlabel">风力</span>
			<div class="envvalue" :style="enviorStyle">
			<span class="envvalue-text">3级</span>
			<span class="envvalue-text">{{ evnData.Ws }}</span>
			</div>
			</div>
			</div>
			@@ -159,7 +159,7 @@
			<div class="env-info">
			<span class="envlabel">风向</span>
			<div class="envvalue" :style="enviorStyle">
			<span class="envvalue-text">北风</span>
			<span class="envvalue-text">{{ evnData.Wd }}</span>
			</div>
			</div>
			</div>
			@@ -171,51 +171,50 @@

			<script>
			import V2Echarts from "@/components/V2Echarts.vue";
			import { HomeAPI } from "@/api/home";
			export default {
			name: "EquipmentView",
			components: {
			V2Echarts,
			},
			props: {
			selectedId: {
			type: String,
			default: "",
			},
			},
			data() {
			return {
			equipmentSelected: "",
			options: [
			{
			value: "选项1",
			label: "黄金糕",
			},
			{
			value: "选项2",
			label: "双皮奶",
			},
			{
			value: "选项3",
			label: "蚵仔煎",
			},
			{
			value: "选项4",
			label: "龙须面",
			},
			{
			value: "选项5",
			label: "北京烤鸭",
			},
			],
			evnData: {
			Tmp: "0",
			Rh: "0",
			Pm25: "0",
			Pm10: "0",
			Ws: "0",
			Wd: "无",
			},
			userData: {
			RealtimeUserNumber: 0,
			TodayUserNumber: 0,
			DutyUserTotle: 0,
			},
			deviceSelected: "",
			options: [],
			backgroundImage: new URL("@/assets/images/backgrounds/cover_bg.png", import.meta.url).href,
			titleImage: new URL("@/assets/images/titles/renyuan.png", import.meta.url).href,
			middleImage: new URL("@/assets/images/titles/shebei.png", import.meta.url).href,
			bottomImage: new URL("@/assets/images/titles/huanjing.png", import.meta.url).href,
			bgImage: new URL("@/assets/images/titles/title_second.png", import.meta.url).href,
			enviorImage: new URL("@/assets/images/titles/wendu_bg.png", import.meta.url).href,
			deviceOnline: 1,
			deviceTotal: 27,
			deviceOnline: 0,
			deviceTotal: 0,
			currentTab: "塔吊监控",
			circleItems: [
			{
			id: "zaixianChartBox",
			name: "总在线",
			value: 22,
			percentage: 81.5,
			value: 0,
			percentage: 0,
			options: {
			tooltip: {
			trigger: "item",
			@@ -281,14 +280,14 @@
			},
			data: [
			{
			value: 81.5,
			value: 0,
			name: "",
			itemStyle: {
			color: "#00FFFF",
			},
			},
			{
			value: 18.5,
			value: 100,
			name: "",
			itemStyle: {
			color: "transparent",
			@@ -302,8 +301,8 @@
			{
			id: "lixianChartBox",
			name: "总离线",
			value: 5,
			percentage: 33,
			value: 0,
			percentage: 0,
			options: {
			tooltip: {
			trigger: "item",
			@@ -369,14 +368,14 @@
			},
			data: [
			{
			value: 33,
			value: 0,
			name: "",
			itemStyle: {
			color: "#00FFFF",
			},
			},
			{
			value: 77,
			value: 100,
			name: "",
			itemStyle: {
			color: "transparent",
			@@ -391,7 +390,7 @@
			id: "baojingChartBox",
			name: "总报警",
			value: 0,
			percentage: 20,
			percentage: 0,
			options: {
			tooltip: {
			trigger: "item",
			@@ -457,14 +456,14 @@
			},
			data: [
			{
			value: 20,
			value: 0,
			name: "",
			itemStyle: {
			color: "#00FFFF",
			},
			},
			{
			value: 80,
			value: 100,
			name: "",
			itemStyle: {
			color: "transparent",
			@@ -496,7 +495,387 @@
			};
			},
			},
			watch: {
			selectedId: {
			handler(newVal) {
			console.log("设备界面接收到的数据:", newVal);
			// 处理数据变化的逻辑
			this.getDeviceTypes(newVal);
			this.getEnvData(newVal);
			this.getUserData(newVal);
			},
			deep: true, // 深度监听对象内部变化
			immediate: true, // 立即执行一次
			},
			},
			mounted() {},
			methods: {
			/**
			* 处理设备选择变化
			* @param val
			*/
			handleSelectChange(val) {
			this.getDeviceState(val);
			// this.getEnvData(val);
			// this.getUserData(val);
			},
			/**
			* 获取人员数据
			* @param bindId
			*/
			getUserData(bindId) {
			const params = {
			bindId,
			};
			HomeAPI.GetJSCUserManage(params).then((res) => {
			if (res.Ret === 1) {
			const result = res.Data;
			if (result) {
			this.userData = result;
			} else {
			this.userData = {
			RealtimeUserNumber: 0,
			TodayUserNumber: 0,
			DutyUserTotle: 0,
			};
			}
			}
			});
			},
			/**
			* 获取环境数据
			*/
			getEnvData(bindId) {
			const params = {
			bindId,
			};
			HomeAPI.GetJSCEnvMonitor(params).then((res) => {
			if (res.Ret === 1) {
			const result = res.Data;
			if (result) {
			this.evnData = result;
			} else {
			this.evnData = {
			Tmp: "0",
			Rh: "0",
			Pm25: "0",
			Pm10: "0",
			Ws: "0",
			Wd: "无",
			};
			}
			}
			});
			},
			/**
			* 获取设备类型
			* @param bindId
			*/
			getDeviceTypes(bindId) {
			const params = {
			bindId,
			};
			HomeAPI.GetDeviceType(params).then((res) => {
			if (res.Ret === 1) {
			const result = res.Data;
			if (result.length > 0) {
			this.options = result.map((item) => ({
			value: item.Id,
			label: item.Name,
			}));
			this.deviceSelected = this.options[0].value; // 默认选中第一个项目
			this.getDeviceState(this.deviceSelected);
			} else {
			this.options = [];
			}
			}
			});
			},
			/**
			* 获取设备状态
			* @param deviceTypeId
			*/
			getDeviceState(deviceTypeId) {
			const params = {
			bindId: this.selectedId \|\| "",
			deviceTypeId,
			};
			HomeAPI.GetJSCDeviceState(params).then((res) => {
			if (res.Ret === 1) {
			const result = res.Data;
			if (result) {
			this.deviceOnline = result.TotalOnlineNumber;
			this.deviceTotal = result.TotalOnlineNumber + result.TotalOfflineNumber;
			this.circleItems = [
			{
			id: "zaixianChartBox",
			name: "总在线",
			value: result.TotalOnlineNumber,
			percentage: result.TotalOnlineRate,
			options: {
			tooltip: {
			trigger: "item",
			show: false,
			},
			legend: {
			itemWidth: 8,
			itemHeight: 8,
			top: "5%",
			left: "center",
			show: false,
			},
			series: [
			{
			type: "pie",
			radius: ["70%", "80%"],
			center: ["50%", "50%"],
			avoidLabelOverlap: false,
			hoverAnimation: false,
			startAngle: 90,
			itemStyle: {
			normal: {
			label: {
			show: false,
			},
			labelLine: {
			show: false,
			},
			shadowBlur: 40,
			borderWidth: 5,
			shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
			},
			},
			data: [
			{
			value: 100,
			name: "",
			itemStyle: {
			color: "#234E84",
			},
			},
			],
			},
			{
			type: "pie",
			radius: ["70%", "100%"],
			center: ["50%", "50%"],
			avoidLabelOverlap: false,
			hoverAnimation: false,
			startAngle: 90,
			itemStyle: {
			normal: {
			label: {
			show: false,
			},
			labelLine: {
			show: false,
			},
			shadowBlur: 40,
			borderWidth: 10,
			shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
			},
			},
			data: [
			{
			value: result.TotalOnlineRate,
			name: "",
			itemStyle: {
			color: "#00FFFF",
			},
			},
			{
			value: 100 - result.TotalOnlineRate,
			name: "",
			itemStyle: {
			color: "transparent",
			},
			},
			],
			},
			],
			},
			},
			{
			id: "lixianChartBox",
			name: "总离线",
			value: result.TotalOfflineNumber,
			percentage: result.TotalOfflineRate,
			options: {
			tooltip: {
			trigger: "item",
			show: false,
			},
			legend: {
			itemWidth: 8,
			itemHeight: 8,
			top: "5%",
			left: "center",
			show: false,
			},
			series: [
			{
			type: "pie",
			radius: ["70%", "80%"],
			center: ["50%", "50%"],
			avoidLabelOverlap: false,
			hoverAnimation: false,
			startAngle: 90,
			itemStyle: {
			normal: {
			label: {
			show: false,
			},
			labelLine: {
			show: false,
			},
			shadowBlur: 40,
			borderWidth: 5,
			shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
			},
			},
			data: [
			{
			value: 100,
			name: "",
			itemStyle: {
			color: "#234E84",
			},
			},
			],
			},
			{
			type: "pie",
			radius: ["70%", "100%"],
			center: ["50%", "50%"],
			avoidLabelOverlap: false,
			hoverAnimation: false,
			startAngle: 90,
			itemStyle: {
			normal: {
			label: {
			show: false,
			},
			labelLine: {
			show: false,
			},
			shadowBlur: 40,
			borderWidth: 10,
			shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
			},
			},
			data: [
			{
			value: result.TotalOfflineRate,
			name: "",
			itemStyle: {
			color: "#00FFFF",
			},
			},
			{
			value: 100 - result.TotalOfflineRate,
			name: "",
			itemStyle: {
			color: "transparent",
			},
			},
			],
			},
			],
			},
			},
			{
			id: "baojingChartBox",
			name: "总报警",
			value: result.TotalAlarmsNumber,
			percentage: result.TotalAlarmsRate,
			options: {
			tooltip: {
			trigger: "item",
			show: false,
			},
			legend: {
			itemWidth: 8,
			itemHeight: 8,
			top: "5%",
			left: "center",
			show: false,
			},
			series: [
			{
			type: "pie",
			radius: ["70%", "80%"],
			center: ["50%", "50%"],
			avoidLabelOverlap: false,
			hoverAnimation: false,
			startAngle: 90,
			itemStyle: {
			normal: {
			label: {
			show: false,
			},
			labelLine: {
			show: false,
			},
			shadowBlur: 40,
			borderWidth: 5,
			shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
			},
			},
			data: [
			{
			value: 100,
			name: "",
			itemStyle: {
			color: "#234E84",
			},
			},
			],
			},
			{
			type: "pie",
			radius: ["70%", "100%"],
			center: ["50%", "50%"],
			avoidLabelOverlap: false,
			hoverAnimation: false,
			startAngle: 90,
			itemStyle: {
			normal: {
			label: {
			show: false,
			},
			labelLine: {
			show: false,
			},
			shadowBlur: 40,
			borderWidth: 10,
			shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
			},
			},
			data: [
			{
			value: result.TotalAlarmsRate,
			name: "",
			itemStyle: {
			color: "#00FFFF",
			},
			},
			{
			value: 100 - result.TotalAlarmsRate,
			name: "",
			itemStyle: {
			color: "transparent",
			},
			},
			],
			},
			],
			},
			},
			];
			}
			}
			});
			},
			handleControlBtnClick(tab) {
			this.currentTab = tab;
			},
			@@ -749,5 +1128,4 @@
			.progress-inner {
			display: none;
			}

			</style>