SMO/src/views/alarm/allDevice/index.vue

<template>
	<div class="table-box">
		<div class="card table-search" style="overflow: hidden;">
			<el-form ref="formRef" :model="searchParam" :inline="true" label-width="auto">
				<el-form-item label="所属基地：" prop="base">
					<el-select v-model="searchParam.base" placeholder="请选择" style="width: 200px">
						<el-option v-for="item in baseOptions" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<div>
						<el-button type="primary">查询</el-button>
						<el-button plain @click="resetForm(formRef)">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="main_list ">
			<el-row :gutter="15">
				<el-col :xs="24" :sm="12" :md="8" :lg="8">
					<div class="chart_item zhuti">
						<div style="font-weight: bold;" class="item_title">
							<span>设备工况(单位:台)</span>
						</div>
						<div class="mt5">
							<div ref="device" class="ve-ring" style="height: 200px"></div>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="8">
					<div class="chart_item zhuti">
						<div style="font-weight: bold;" class="item_title">
							<span>检定周期(单位:台)</span>
						</div>
						<div class="mt5">
							<div ref="period" class="ve-ring" style="height: 200px"></div>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="8">
					<div class="chart_item zhuti">
						<div style="font-weight: bold;" class="item_title">
							<span>FTP链路</span>
						</div>
						<div class="mt5">
							<div class="FTP_box" style="height: 200px">
								<div class="FTP_item">
									<img src="@/assets/images/centerStation.png" alt="">
									<div>中心站FTP</div>
								</div>
								<div class="FTP_item">
									<img src="@/assets/images/areaStation.png" alt="">
									<div>中心站FTP</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :span="24">
					<div class="chart_item zhuti">
						<div style="font-weight: bold;" class="item_title">
							<span>危险天气</span>
						</div>
						<el-row :gutter="15">
							<el-col :span="8">
								<div class="mt5">
									<div ref="weather" class="ve-ring" style="height: 300px"></div>
								</div>
							</el-col>
							<el-col :span="16" style="margin-bottom: 0;">
								<div>
									<div ref="element" class="ve-ring" style="height: 300px"></div>
								</div>
							</el-col>
						</el-row>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :span="24">
					<div class="chart_item zhuti">
						<div style="font-weight: bold;" class="item_title">
							<span>到报监控</span>
						</div>
						<div class="mt5">
							<div ref="control" class="ve-ring" style="height: 300px"></div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="ts" name="allDevice">
import * as echarts from 'echarts';

import { ref, reactive, onMounted, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { useGlobalStore } from "@/stores/modules/global";


const formRef = ref()
const device = ref()
const period = ref()
const weather = ref()
const element = ref()
const control = ref()

const router = useRouter();
const searchParam = reactive({
	base: undefined,

})
const baseOptions = ref([{
	value: 0,
	label: '基地1',
},
{
	value: 1,
	label: '基地2',
}])


// resetForm
const resetForm = (formEl) => {
	if (!formEl) return;
	formEl.resetFields();
};
const globalStore = useGlobalStore();
const isDark = computed(() => globalStore.isDark);

const showDevice = () => {
	// console.log(isDark.value,'颜色');

	let mychart = echarts.init(device.value);
	let option = {
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}: {c}台"
		},
		legend: {
			bottom: '1%',
			left: 'center',
			textStyle: {//图例文字的样式
				color: isDark.value ? '#fff' : "#000",
			}
		},
		series: [
			{
				name: '设备工况',
				type: 'pie',
				radius: ['50%', '70%'],
				center: ['50%', '45%'],
				hoverAnimation: false,
				itemStyle: {
					borderRadius: 3,
					borderColor: '#fff',
					borderWidth: 1
				},
				label: {
					normal: {
						show: true,
						position: 'outer',
						formatter: '{b}：{c}',
						overflow: 'none',
						fontSize: 15,
					},
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 20,
						fontWeight: 'bold'
					}
				},
				//设置提示线
				labelLine: {
					normal: {
						show: true,//开启提示线展示
						length: 15,//设置第一条提示线长度
						length2: 30,//设置第二条提示线长度

					}
				},

				data: [
					{
						value: 4,
						name: '正常',
						itemStyle: { color: '#00C4B3' },
						label: { color: '#00C4B3' }
					},
					{
						value: 1,
						name: '告警',
						itemStyle: { color: '#EF6666' },
						label: { color: '#EF6666' }
					}
				]
			}
		]
	};
	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}
const showPeriod = () => {
	let mychart = echarts.init(period.value);
	let option = {
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}: {c}台"

		},
		legend: {
			bottom: 0,
			left: 'center',
			textStyle: {//图例文字的样式
				color: isDark.value ? '#fff' : "#000",
			}
		},
		series: [
			{
				name: '检定周期',
				type: 'pie',
				radius: '70%',
				center: ['50%', '45%'],

				data: [
					{ value: 3, name: '剩余31-60天', itemStyle: { color: '#5470C6' } },
					{ value: 1, name: '剩余1-30天', itemStyle: { color: '#FAC858' } },
					{ value: 1, name: '已过检', itemStyle: { color: '#EF6666' } }
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	};

	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}

const allSataion = ref(5)
const showWeather = () => {
	let mychart = echarts.init(weather.value);
	let option = {
		title: {
			text: `${allSataion.value} \n 总站数 `,
			left: "center",
			top: "38%",
			textStyle: {
				fontSize: 20,
				color: '#000',
			},
		},
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}: {c}"
		},
		legend: {
			bottom: '1%',
			left: 'center',
			textStyle: {//图例文字的样式
				color: isDark.value ? '#fff' : "#000",
			}
		},
		series: [
			{
				name: '设备工况',
				type: 'pie',
				radius: ['50%', '70%'],
				center: ['50%', '45%'],
				hoverAnimation: false,
				itemStyle: {
					borderRadius: 3,
					borderColor: '#fff',
					borderWidth: 1
				},
				label: {
					normal: {
						show: true,
						position: 'outer',
						formatter: '{b}：{c}',
						overflow: 'none',
						fontSize: 15,
					},
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 20,
						fontWeight: 'bold'
					}
				},
				//设置提示线
				labelLine: {
					normal: {
						show: true,//开启提示线展示
						length: 15,//设置第一条提示线长度
						length2: 30,//设置第二条提示线长度

					}
				},

				data: [
					{
						value: 4,
						name: '正常',
						itemStyle: { color: '#5470C6' },
						label: { color: '#5470C6' }
					},
					{
						value: 1,
						name: '告警',
						itemStyle: { color: '#EF6666' },
						label: { color: '#EF6666' }
					}
				]
			}
		]
	};
	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}

const showElement = () => {
	let mychart = echarts.init(element.value);
	let option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		grid: {
			top: '3%',
			left: '3%',
			right: '4%',
			bottom: '0%',
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				data: [
					'能见度',
					'风速',
					'大气电场',
					'云量',
					'云高',
					'温度',
					'湿度',
					'小时雨量'
				]
			}
		],
		yAxis: [
			{
				type: 'value'
			}
		],
		series: [
			{
				name: '正常',
				barWidth: '50%',
				type: 'bar',
				stack: 'Ad',
				emphasis: {
					focus: 'series'
				},
				itemStyle: {
					color: '#5470C6'
				},
				data: [5, 5, 5, 5, 4, 5, 5, 5]
			},
			{
				name: '告警',
				barWidth: '50%',
				type: 'bar',
				stack: 'Ad',
				emphasis: {
					focus: 'series'
				},
				itemStyle: {
					color: '#EF6666'
				},
				data: [0, 0, 0, 0, 1, 0, 0, 0]
			}
		]
	};

	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}

const showControl = () => {
	let mychart = echarts.init(control.value);
	let option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			textStyle: {//图例文字的样式
				color: isDark.value ? '#fff' : "#000",
			}
		},
		grid: {
			left: '15',
			right: '15',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
			}
		],
		yAxis: [
			{
				type: 'value'
			}
		],
		series: [

			{
				name: '应报情况',
				type: 'bar',
				stack: 'Ad',
				emphasis: {
					focus: 'series'
				},
				itemStyle: {
					color: '#3BA272' // 蓝色
				},
				data: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6]
			},
			{
				name: '实报情况',
				type: 'bar',
				stack: 'Ad',
				emphasis: {
					focus: 'series'
				},
				itemStyle: {
					color: '#5470C6' // 绿色
				},
				data: [5, 4, 1, 2, 5, 5, 5, 5, 5, 5, 4, 5, 5, 5, 5, 5, 5, 4, 5, 5, 5, 5, 5, 5]
			},
			{
				name: '未报情况',
				type: 'bar',
				stack: 'Ad',
				emphasis: {
					focus: 'series'
				},
				itemStyle: {
					color: '#EF6666' // 红色
				},
				data: [1, 2, 5, 4, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1]
			},

		]
	};

	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}
watch(isDark, () => { showDevice(), showPeriod(), showWeather(), showElement(), showControl() });

onMounted(() => {
	showDevice()
	showPeriod()
	showWeather()
	showElement()
	showControl()

})

</script>
<style scoped lang="scss">
.el-row .el-col {
	margin-bottom: 15px;
}

.main_list {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	height: calc(100vh - 150px);
	margin-bottom: 10px;
	overflow-y: scroll;
	overflow-x: hidden;


	.chart_item {
		border-radius: 10px;
		padding: 10px;
		background-color: #fff;
		// height: 100%;
		// margin-bottom: 15px;


		.item_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.FTP_box {
			padding: 0 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.FTP_item {
				flex: 1;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				img {
					width: 56px;
					margin-bottom: 20px;
				}
			}

		}
	}

	.info_box {
		.info_title {
			color: #999999;
			font-size: 16px;
		}

		.info_content {
			height: 40px;
			font-weight: bold;
			color: #000;
			font-size: 26px;
		}
	}

}
</style>