WI/Web.V1.0.git

			@@ -1,6 +1,5 @@
			<!DOCTYPE html>
			<html lang="en">

			<head>
			<meta charset="UTF-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			@@ -13,12 +12,13 @@
			<script src="/ai_html/views/demo/js/echarts.min.js"></script>
			<link href="/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" />
			<link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
			<script src="/ai_html/views/demo/js/customInstruction.js"></script>
			<link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
			<style>
			.el-dialog__header {
			margin-right: 0;
			padding: 8px 10px;
			background: #528abe
			background: #528abe;
			}

			.el-dialog__title {
			@@ -38,9 +38,9 @@
			<div class="top-center-data">
			<div class="data-item" v-for="(item, index) in state.dataList">
			<p class="data-item-title">{{item.title}}</p>
			<p class="data-item-desc cursor-pointer" @click="handleDataItemClick(item)">{{item.value}}<span
			class="text-[13px] ">
			{{' '+item.unit}}</span></p>
			<p class="data-item-desc cursor-pointer" @click="handleDataItemClick(item)">
			{{item.value}}<span class="text-[13px]"> {{' '+item.unit}}</span>
			</p>
			</div>
			</div>
			<div class="top-center-chart">
			@@ -55,8 +55,7 @@
			</div>
			</div>

			<div id="inspectionChart" class="w-full h-[280px]"></div>

			<div id="inspectionChart" class="w-full h-[280px]" v-resize="chartContainerResize"></div>
			</div>
			<div class="chart-item">
			<div class="screen-top-header flex-l">
			@@ -68,14 +67,19 @@
			<Decoration3 class="dv-dec-3" />
			</div>
			</div>
			<div class="pond-section">
			<div class="pond-section" v-resize="chartContainerResize">
			<div id="salesRankChart" class="w-full h-[280px]"></div>
			</div>
			</div>
			</div>
			</div>
			<el-dialog v-model="state.isShowChartVisible" :title="state.inspectionInfo.title" width="50%"
			class="px-[unset] py-[unset]" :before-close="handleCloseChartVisible">
			<el-dialog
			v-model="state.isShowChartVisible"
			:title="state.inspectionInfo.title"
			width="50%"
			class="px-[unset] py-[unset]"
			:before-close="handleCloseChartVisible"
			>
			<div id="inspectionTrends" class="w-full h-[500px]"></div>
			</el-dialog>
			</div>
			@@ -181,7 +185,7 @@
			id: null,
			title: null,
			value: null,
			}
			},
			});
			const getOverViewList = () => {
			const iconList = [
			@@ -207,12 +211,7 @@
			.padEnd(6, '0')}`;
			};
			onMounted(() => {
			// getOverViewList();
			window.parent.addEventListener('resize', () => {
			inspectionChart.value.resize();
			salesRankRef.value.resize();
			});
			initInspectionChart()
			initInspectionChart();
			drawSalesRanking();
			});
			//初始化巡检图表
			@@ -244,16 +243,16 @@
			['10月', 75.3, 71.7],
			['11月', 70.9, 74.2],
			['12月', 66.8, 75.2],
			]
			],
			},
			xAxis: { type: 'category', name: '月份', nameGap: 10, },
			xAxis: { type: 'category', name: '月份', nameGap: 10 },
			yAxis: {
			name: '单位: %'
			name: '单位: %',
			},
			series: [{ type: 'bar' }, { type: 'bar' }]
			series: [{ type: 'bar' }, { type: 'bar' }],
			};
			option && myInspectChart.setOption(option);
			}
			};
			//初始化弹窗echart
			const initInspectionTrendsEchart = () => {
			var chartDom = document.getElementById('inspectionTrends');
			@@ -274,8 +273,7 @@
			name: '时间',
			type: 'category',
			minInterval: 3600 * 4 * 1000, //12
			data: ['00:00', '05:00', '10:00', '15:00', '20:00', '23:45']

			data: ['00:00', '05:00', '10:00', '15:00', '20:00', '23:45'],
			},
			yAxis: {
			type: 'value',
			@@ -313,12 +311,12 @@
			],
			};
			option && businessTrendsChart.setOption(option);
			}
			};
			// 绘制横向柱状图排行榜
			const drawSalesRanking = () => {
			var chartDom = document.getElementById('salesRankChart');
			var salesRankingElement = echarts.init(chartDom);
			salesRankRef.value = salesRankingElement
			salesRankRef.value = salesRankingElement;
			const option = {
			tooltip: {
			trigger: 'axis',
			@@ -405,27 +403,28 @@
			};
			//点击数据项弹窗
			const handleDataItemClick = (item) => {
			state.inspectionInfo = item
			state.inspectionInfo = item;
			nextTick(() => {
			initInspectionTrendsEchart();
			});
			window.parent.addEventListener('resize', () => {
			inspectionTrendsChart.value.resize();
			});

			state.isShowChartVisible = true;
			};

			const chartContainerResize = ({ width, height }) => {
			inspectionChart.value.resize();
			salesRankRef.value.resize();
			};
			//关闭弹窗
			const handleCloseChartVisible = () => {
			state.isShowChartVisible = false;
			}
			return { state, handleDataItemClick, handleCloseChartVisible };
			};
			return { state, handleDataItemClick, handleCloseChartVisible, chartContainerResize };
			},
			});

			App.component('Decoration3', Decoration3);
			elementResizeDirective(App);
			App.use(ElementPlus);
			App.mount('#workOrder');
			</script>

			</html>