zzw

src/assets/json/authMenuList.json

@@ -43,7 +43,7 @@
                 {
                     "path": "/alarm/allDevice",
                     "name": "allDevice",
-                    "component": "/proTable/useProTable/index",
+                    "component": "/alarm/allDevice/index",
                     "meta": {
                         "title": "全网设备状态监测报警",
                         "isLink": "",
@@ -124,7 +124,7 @@
             "children": [{
                     "path": "/analysis/dataSynthesis",
                     "name": "dataSynthesis",
-                    "component": "/proTable/useProTable/index",
+                    "component": "/analysis/dataSynthesis/index",
                     "meta": {
                         "title": "数据综合分析",
                         "isLink": "",
@@ -137,7 +137,7 @@
                 {
                     "path": "/analysis/featureCurves",
                     "name": "featureCurves",
-                    "component": "/proTable/useProTable/index",
+                    "component": "/analysis/featureCurves/index",
                     "meta": {
                         "title": "要素曲线分析",
                         "isLink": "",

src/views/alarm/allDevice/index.vue

@@ -0,0 +1,554 @@
+<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 plain>查询</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">
+						<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">
+						<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">
+						<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">
+						<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">
+						<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 } from "vue";
+import { useRouter } from "vue-router";
+import { User } from "@/api/interface";
+
+import { useAuthButtons } from "@/hooks/useAuthButtons";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
+
+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 showDevice = () => {
+	let mychart = echarts.init(device.value);
+	let option = {
+		tooltip: {
+			trigger: 'item',
+			formatter: "{a} <br/>{b}: {c}台"
+		},
+		legend: {
+			bottom: '1%',
+			left: 'center'
+		},
+		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'
+		},
+		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'
+		},
+		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: {},
+		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();
+	});
+}
+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>

src/views/alarm/singleStationData/index.vue

@@ -23,7 +23,7 @@
 		</div>
 		<div class="main_list">
 			<el-row :gutter="15">
-				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4" >
+				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
 					<div class="chart_item">
 						<div style="font-weight: bold;">天气现象</div>
 						<div class="mt15">
@@ -108,7 +108,9 @@
 												<el-icon style="color: #007aff;">
 													<CaretLeft />
 												</el-icon><span style="font-size: 26px;">{{
-													mincurrentValue }}</span></span>
+													mincurrentValue }}</span>
+													
+											</span>
 											<span style="position: absolute;top: 0;left: -15px;">4</span>
 											<span style="position: absolute;bottom: 0;left: -15px;">0</span>
 										</div>
@@ -295,22 +297,10 @@
 	</div>
 </template>
 
-<script setup lang="tsx" name="singleStationData">
-// import ECharts from "@/components/ECharts/index.vue";
-// import { ECOption } from "@/components/ECharts/config";
+<script setup lang="tsx" name="singleData">
+
 import * as echarts from 'echarts';
-import { ref, reactive, computed, onMounted } from "vue";
-import { useRouter } from "vue-router";
-import { User } from "@/api/interface";
-import { useHandleData } from "@/hooks/useHandleData";
-import { useDownload } from "@/hooks/useDownload";
-import { useAuthButtons } from "@/hooks/useAuthButtons";
-import { ElMessage, ElMessageBox } from "element-plus";
-import ProTable from "@/components/ProTable/index.vue";
-import ImportExcel from "@/components/ImportExcel/index.vue";
-import UserDrawer from "@/views/proTable/components/UserDrawer.vue";
-import { ProTableInstance, ColumnProps, HeaderRenderScope } from "@/components/ProTable/interface";
-import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
+import { ref, computed, onMounted } from "vue";
 
 const queryInfo = ref(0)
 
@@ -1259,8 +1249,8 @@ onMounted(() => {
 
 .main_list {
 	background: transparent !important;
-    box-shadow: none !important;
-    padding: 0 !important;
+	box-shadow: none !important;
+	padding: 0 !important;
 	height: calc(100vh - 150px);
 	margin-bottom: 10px;
 	overflow-y: scroll;

src/views/analysis/dataSynthesis/index.vue

@@ -0,0 +1,271 @@
+<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 label="自动站：" prop="base" >
+					<el-date-picker v-model="searchParam.date" type="daterange" range-separator="至"
+						start-placeholder="开始时间" end-placeholder="结束时间"  style="width: 300px" />
+				</el-form-item>
+				<el-form-item>
+					<div>
+						<el-button plain>查询</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 :span="24">
+					<div class="chart_item">
+						<div style="font-weight: bold;" class="item_title">
+							<span>气温(℃)/相对湿度(%)/本站气压(hPa)</span>
+						</div>
+						<div class="mt5">
+							<div ref="data" class="data_box"></div>
+						</div>
+					</div>
+				</el-col>
+			</el-row>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="dataSynthesis">
+import * as echarts from 'echarts';
+
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { User } from "@/api/interface";
+
+import { useAuthButtons } from "@/hooks/useAuthButtons";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
+
+const formRef = ref()
+const data = ref()
+
+
+const router = useRouter();
+const searchParam = reactive({
+	base: undefined,
+	date: ''
+
+})
+const baseOptions = ref([{
+	value: 0,
+	label: 'M1986',
+},
+{
+	value: 1,
+	label: 'M1987',
+}])
+
+// resetForm
+const resetForm = (formEl) => {
+	if (!formEl) return;
+	formEl.resetFields();
+};
+
+const showData = () => {
+	const colors = ['#5470C6', '#59A073', '#FFB652'];
+	let mychart = echarts.init(data.value);
+	let option = {
+		color: colors,
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: {
+				type: 'cross'
+			}
+		},
+		grid: {
+			left: '80',
+			right: '130',
+			bottom: '40',
+		},
+
+		legend: {
+			data: ['气温', '相对湿度', '本站气压']
+		},
+		xAxis: [
+			{
+				type: 'category',
+				axisTick: {
+					alignWithLabel: true
+				},
+				// prettier-ignore
+				data: ['06/11 16:00', '06/11 20:00', '06/12 00:00', '06/12 04:00', '06/12 08:00', '06/12 12:00', '06/12 16:00', '06/12 20:00', '06/13 00:00', '06/13 04:00', '06/13 08:00', '06/13 12:00']
+			}
+		],
+		yAxis: [
+			{
+				type: 'value',
+				name: '气温',
+				position: 'right',
+				alignTicks: true,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: colors[0]
+					}
+				},
+				axisLabel: {
+					formatter: '{value} °C'
+				}
+			},
+			{
+				type: 'value',
+				name: '相对湿度',
+				position: 'right',
+
+				offset: 80,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: colors[1]
+					}
+				},
+				axisLabel: {
+					formatter: '{value} %'
+				}
+			},
+			{
+				type: 'value',
+				name: '本站气压',
+
+				min: 400,
+				max: 1080,
+				position: 'left',
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: colors[2
+						]
+					}
+				},
+				axisLabel: {
+					formatter: '{value} hPa'
+				}
+			}
+		],
+		series: [
+			{
+				name: '气温',
+				smooth: true, // 添加此行
+				type: 'line',
+
+				data: [
+					28, 29, 29, 29, 30, 31, 32, 33, 34, 33, 32, 30
+				]
+			},
+			{
+				name: '相对湿度',
+				type: 'line',
+				smooth: true, // 添加此行
+				yAxisIndex: 1,
+				data: [
+					99, 79, 67, 69, 73, 75, 78, 79, 67, 69, 73, 75,
+				]
+			},
+			{
+				name: '本站气压',
+				type: 'line',
+				smooth: true, // 添加此行
+				yAxisIndex: 2,
+				data: [1001, 1003, 1002, 1001, 1004, 1005, 1001, 1003, 1002, 1001, 1004, 1005,]
+			}
+		]
+	};
+	mychart.setOption(option)
+	window.addEventListener("resize", function () {
+		mychart.resize();
+	});
+}
+onMounted(() => {
+	showData()
+
+
+})
+
+</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;
+		}
+	}
+
+}
+
+.data_box {
+	height: calc(100vh - 215px);
+	// height: 100%;
+}
+</style>

src/views/analysis/featureCurves/index.vue

@@ -0,0 +1,603 @@
+<template>
+	<div class="table-box">
+		<div class="card table-search" style="overflow: hidden;display: flex;justify-content: space-between;">
+			<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 label="自动站：" prop="base">
+					<div><el-switch v-model="searchParam.switch" class="ml-2" inline-prompt active-text="正点"
+							inactive-text="非正点" style="margin-right: 10px;" />
+						<el-date-picker v-model="searchParam.date" type="daterange" range-separator="至"
+							start-placeholder="开始时间" end-placeholder="结束时间" style="width: 300px" />
+					</div>
+				</el-form-item>
+				<el-form-item>
+					<div>
+						<el-button plain>查询</el-button>
+						<el-button plain @click="resetForm(formRef)">重置</el-button>
+					</div>
+				</el-form-item>
+			</el-form>
+			<el-button link>
+				<el-icon :size="16">
+					<Operation />
+				</el-icon>
+			</el-button>
+		</div>
+		<div class="main_list">
+			<el-row :gutter="15">
+				<el-col :xs="24" :sm="12" :md="8" :lg="8">
+					<div class="chart_item">
+						<div style="font-weight: bold;" class="item_title">
+							<span>2分钟平均风向(°)/2分钟平均风速(m/s)</span>
+						</div>
+						<div class="mt5">
+							<div ref="wind" class="ve-ring" style="height: 330px"></div>
+						</div>
+					</div>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="8">
+					<div class="chart_item">
+						<div style="font-weight: bold;" class="item_title">
+							<span>总辐射曝辐量(MJ/㎡)</span>
+						</div>
+						<div class="mt5">
+							<div ref="radio" class="ve-ring" style="height: 330px"></div>
+						</div>
+					</div>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="8">
+					<div class="chart_item">
+						<div style="font-weight: bold;" class="item_title">
+							<span>本站气压(hPa)</span>
+						</div>
+						<div class="mt5">
+							<div ref="pressureLine" class="ve-ring" style="height: 330px"></div>
+						</div>
+					</div>
+				</el-col>
+			</el-row>
+			<el-row :gutter="15">
+				<el-col :span="24">
+					<div class="chart_item">
+						<div style="font-weight: bold;" class="item_title">
+							<span>总辐射辐照度(W/㎡)</span>
+						</div>
+						<div class="mt5">
+							<div ref="radio2" class="ve-ring" style="height: 340px"></div>
+						</div>
+					</div>
+				</el-col>
+			</el-row>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="dataSynthesis">
+import * as echarts from 'echarts';
+
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
+
+const formRef = ref()
+const wind = ref()
+const pressureLine = ref()
+const radio=ref()
+const radio2=ref()
+
+
+const router = useRouter();
+const searchParam = reactive({
+	base: undefined,
+	date: '',
+	switch: true
+
+})
+const baseOptions = ref([{
+	value: 0,
+	label: 'M1986',
+},
+{
+	value: 1,
+	label: 'M1987',
+}])
+
+// resetForm
+const resetForm = (formEl) => {
+	if (!formEl) return;
+	formEl.resetFields();
+};
+
+const showWind = () => {
+	// 数据格式
+	let winArr = [{
+		value: 4.1, //风速--数值大小--变量名不可变
+		symbolRotate: -45, //风向---旋转角度--变量名不可变
+		symbolRotateStr: '西南风' //风向中文--变量名可变（tooltip 提示随之修改）
+
+	}, {
+		value: 4.5,
+		symbolRotate: 45,
+		symbolRotateStr: '东南风'
+	}, {
+		value: 4.5,
+		symbolRotate: 90,
+		symbolRotateStr: '东风'
+	}, {
+		value: 5.0,
+		symbolRotate: -180,
+		symbolRotateStr: '南风'
+	}, {
+		value: 4.3,
+		symbolRotate: -45,
+		symbolRotateStr: '西南风'
+	}, {
+		value: 4.5,
+		symbolRotate: -90,
+		symbolRotateStr: '西风'
+	}, {
+		value: 4.5,
+		symbolRotate: -45,
+		symbolRotateStr: '西南风'
+	}, {
+		value: 4.5,
+		symbolRotate: -90,
+		symbolRotateStr: '西风'
+	}, {
+		value: 4.1, //风速--数值大小--变量名不可变
+		symbolRotate: -45, //风向---旋转角度--变量名不可变
+		symbolRotateStr: '西南风' //风向中文--变量名可变（tooltip 提示随之修改）
+
+	}, {
+		value: 4.5,
+		symbolRotate: 45,
+		symbolRotateStr: '东南风'
+	}, {
+		value: 4.5,
+		symbolRotate: 90,
+		symbolRotateStr: '东风'
+	}, {
+		value: 5.0,
+		symbolRotate: -180,
+		symbolRotateStr: '南风'
+	}, {
+		value: 4.3,
+		symbolRotate: -45,
+		symbolRotateStr: '西南风'
+	}, {
+		value: 4.5,
+		symbolRotate: -90,
+		symbolRotateStr: '西风'
+	}, {
+		value: 4.5,
+		symbolRotate: -45,
+		symbolRotateStr: '西南风'
+	}, {
+		value: 4.5,
+		symbolRotate: -90,
+		symbolRotateStr: '西风'
+	}, {
+		value: 4.1, //风速--数值大小--变量名不可变
+		symbolRotate: -45, //风向---旋转角度--变量名不可变
+		symbolRotateStr: '西南风' //风向中文--变量名可变（tooltip 提示随之修改）
+
+	}, {
+		value: 4.5,
+		symbolRotate: 45,
+		symbolRotateStr: '东南风'
+	}, {
+		value: 4.5,
+		symbolRotate: 90,
+		symbolRotateStr: '东风'
+	}, {
+		value: 5.0,
+		symbolRotate: -180,
+		symbolRotateStr: '南风'
+	}, {
+		value: 4.3,
+		symbolRotate: -45,
+		symbolRotateStr: '西南风'
+	}, {
+		value: 4.5,
+		symbolRotate: -90,
+		symbolRotateStr: '西风'
+	}, {
+		value: 4.5,
+		symbolRotate: -45,
+		symbolRotateStr: '西南风'
+	}, {
+		value: 4.5,
+		symbolRotate: -90,
+		symbolRotateStr: '西风'
+	},]
+	let mychart = echarts.init(wind.value);
+	let option = {
+
+		grid: {
+			left: '10',
+			right: '10',
+			bottom: '3%',
+			top: '20',
+			containLabel: true
+		},
+		// X轴
+		xAxis: {
+			type: 'category',
+			splitLine: {
+				show: false
+			},
+			boundaryGap: true,
+			axisTick: {
+				alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
+			},
+			data: ['06/12 08:00', '06/12 09:00', '06/12 10:00', '06/12 11:00', '06/12 12:00', '06/12 13:00', '06/12 14:00', '06/12 15:00', '06/12 16:00', '06/12 17:00', '06/12 18:00', '06/12 19:00', '06/12 20:00', '06/12 21:00', '06/12 22:00', '06/12 23:00', '06/13 00:00', '06/13 01:00', '06/13 02:00', '06/13 03:00', '06/13 04:00', '06/13 05:00', '06/13 06:00', '06/13 07:00',],
+			axisLabel: {
+				interval: 4,
+				formatter: function (value) {
+					// if (value.index % 4 === 0) {
+					// 	return value.replace(/ /g, '\n');
+					// } else {
+					// 	return '';
+					// }
+					return value.replace(/ /g, '\n');
+				},
+
+			},
+		},
+		// Y轴
+		// yAxis: {
+		// 	type: 'value',
+		// 	// name: "风速(m/s)",
+		// },
+		yAxis: {
+			min: 0,
+			max: 10,
+			type: 'value'
+		},
+		// 鼠标悬浮提示
+		tooltip: {
+			trigger: "axis",
+			formatter(params) {
+				let tip =
+					"时间:" +
+					params[0].axisValue +
+					"<br/>风速:" +
+					(params[0].value ? params[0].value : "--") +
+					"m/s<br/>风向:" +
+					(params[0].data ? params[0].data.symbolRotateStr : "--")
+				return tip;
+			},
+		},
+		// 数据
+		series: [{
+			data: winArr,
+			type: 'line',
+			smooth: true, //这句就是让曲线变平滑的
+			// symbol: "image://" + require("../../../assets/img/weather/wind.png"),
+			symbol: 'path://M4.866,0,0,15.193l4.866-4.449L9.738,15.2Z',
+			symbolSize: 12,
+			//折线样式
+			lineStyle: {
+				color: '#a5cfff',
+				width: 1,
+			},
+			// label: {
+			// 	normal: {
+			// 		formatter: '{c}',
+			// 		show: false,
+			// 		position: 'top',
+			// 		distance: 15
+			// 	}
+			// },
+
+			itemStyle: {
+				normal: {
+
+				},
+
+			}
+			// symbol样式
+			// itemStyle: {
+			//     borderWidth: 18,
+
+			// }
+		}]
+	};
+
+	mychart.setOption(option)
+	window.addEventListener("resize", function () {
+		mychart.resize();
+	});
+}
+
+const data3 = ref([1004, 1004, 1004, 1004, 1004, 1005, 1005, 1005, 1005, 1004.5, 1004.6, 1004.8]);
+const showPressureLine = () => {
+	// 获取最大值方法
+	function calMax(arr) {
+		let max = Math.max.apply(null, arr); // 获取最大值方法
+		let maxint = Math.ceil(max / 5); // 向上以5的倍数取整
+		let maxval = maxint * 5 + 5; // 最终设置的最大值
+		return maxval; // 输出最大值
+	}
+	// 获取最小值方法
+	function calMin(arr) {
+		let min = Math.min.apply(null, arr); // 获取最小值方法
+		let minint = Math.floor(min / 1); // 向下以1的倍数取整
+		let minval = minint * 1 - 5; // 最终设置的最小值
+		return minval; // 输出最小值
+	}
+	// 调用方法，获取数据的最大值&最小值
+	let maxData1 = calMax(data3.value);
+	let minData1 = calMin(data3.value);
+
+
+	let mychart = echarts.init(pressureLine.value);
+	let option = {
+
+		grid: {
+			left: '10',
+			right: '10',
+			bottom: '3%',
+			top: 20,
+			containLabel: true
+		},
+
+		// X轴
+		xAxis: {
+			type: 'category',
+			splitLine: {
+				show: false
+			},
+			// boundaryGap: false,
+			axisTick: {
+				alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
+			},
+			data: ['06/12 08:00', '06/12 09:00', '06/12 10:00', '06/12 11:00', '06/12 12:00', '06/12 13:00', '06/12 14:00', '06/12 15:00', '06/12 16:00', '06/12 17:00', '06/12 18:00', '06/12 19:00'],
+			axisLabel: {
+				interval: 1,
+				formatter: function (value) {
+					return value.replace(/ /g, '\n');
+				},
+			},
+		},
+		yAxis: {
+			min: minData1,
+			max: maxData1,
+			type: 'value'
+		},
+
+		// 鼠标悬浮提示
+		tooltip: {
+			trigger: "axis",
+		},
+		// 数据
+		series: [
+			{
+				name: "气压",
+				type: "line",
+				smooth: true,
+				data: data3.value,
+				lineStyle: {
+					color: '#157aea',
+					width: 1,
+				},
+				itemStyle: {
+				normal: {
+					color:'#157aea'
+
+				},
+
+			}
+			},
+
+		]
+	};
+
+	mychart.setOption(option)
+	window.addEventListener("resize", function () {
+		mychart.resize();
+	});
+}
+const data4 = ref([0.4, 0.5, 0.45, 0.5, 0.4, 0.5, 0.6, 0.55, 0.5, 0.5, 0.6, 0.55]);
+const showRadio = () => {
+	let mychart = echarts.init(radio.value);
+	let option = {
+		grid: {
+			left: '10',
+			right: '10',
+			bottom: '3%',
+			top: 20,
+			containLabel: true
+		},
+
+		// X轴
+		xAxis: {
+			type: 'category',
+			splitLine: {
+				show: false
+			},
+			// boundaryGap: false,
+			axisTick: {
+				alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
+			},
+			data: ['06/12 08:00', '06/12 09:00', '06/12 10:00', '06/12 11:00', '06/12 12:00', '06/12 13:00', '06/12 14:00', '06/12 15:00', '06/12 16:00', '06/12 17:00', '06/12 18:00', '06/12 19:00'],
+			axisLabel: {
+				interval: 1,
+				formatter: function (value) {
+					return value.replace(/ /g, '\n');
+				},
+			},
+		},
+		yAxis: {
+			min: 0,
+			max: 1,
+			interval: 0.2,
+			type: 'value'
+		},
+
+		// 鼠标悬浮提示
+		tooltip: {
+			trigger: "axis",
+		},
+		// 数据
+		series: [
+			{
+				name: "曝辐量",
+				type: "line",
+				smooth: true,
+				data: data4.value,
+				lineStyle: {
+					color: '#157aea',
+					width: 1,
+				},
+				itemStyle: {
+				normal: {
+					color:'#157aea'
+
+				},
+
+			}
+			},
+
+		]
+	};
+
+	mychart.setOption(option)
+	window.addEventListener("resize", function () {
+		mychart.resize();
+	});
+}
+const data5 = ref([800, 810, 800, 820, 800, 850, 800, 830, 800, 850, 800, 820]);
+const showRadio2 = () => {
+	let mychart = echarts.init(radio2.value);
+	let option = {
+		grid: {
+			left: '10',
+			right: '10',
+			bottom: '3%',
+			top: 20,
+			containLabel: true
+		},
+
+		// X轴
+		xAxis: {
+			type: 'category',
+			splitLine: {
+				show: false
+			},
+			// boundaryGap: false,
+			axisTick: {
+				alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
+			},
+			data: ['06/12 08:00', '06/12 09:00', '06/12 10:00', '06/12 11:00', '06/12 12:00', '06/12 13:00', '06/12 14:00', '06/12 15:00', '06/12 16:00', '06/12 17:00', '06/12 18:00', '06/12 19:00'],
+			axisLabel: {
+				interval: 0,
+				formatter: function (value) {
+					return value.replace(/ /g, '\n');
+				},
+			},
+		},
+		yAxis: {
+			min: 0,
+			max: 1200,
+			interval: 200,
+			type: 'value'
+		},
+
+		// 鼠标悬浮提示
+		tooltip: {
+			trigger: "axis",
+		},
+		// 数据
+		series: [
+			{
+				name: "辐照度",
+				type: "line",
+				smooth: true,
+				data: data5.value,
+				lineStyle: {
+					color: '#157aea',
+					width: 1,
+				},
+				itemStyle: {
+				normal: {
+					color:'#157aea'
+
+				},
+
+			}
+			},
+
+		]
+	};
+
+	mychart.setOption(option)
+	window.addEventListener("resize", function () {
+		mychart.resize();
+	});
+}
+
+onMounted(() => {
+	showWind()
+	showPressureLine()
+	showRadio()
+	showRadio2()
+
+})
+
+</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;
+		}
+	}
+
+	.info_box {
+		.info_title {
+			color: #999999;
+			font-size: 16px;
+		}
+
+		.info_content {
+			height: 40px;
+			font-weight: bold;
+			color: #000;
+			font-size: 26px;
+		}
+	}
+
+}
+
+.el-button.is-link {
+	height: 32px;
+}
+</style>