You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1652 lines
64 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<title>湘江环境监控</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet" />
<link href="data/styles.css" type="text/css" rel="stylesheet" />
<link href="files/数据可视化大屏模板24/styles.css" type="text/css" rel="stylesheet" />
<link href="https://demo.axureux.com/fontawesome/5.7.2/pro/css/all.min.css" type="text/css" rel="stylesheet" />
<link href="https://demo.axureux.com/numericfont/stylesheet.css" type="text/css" rel="stylesheet" />
<script src="resources/scripts/jquery-3.2.1.min.js"></script>
<script src="resources/scripts/axure/axQuery.js"></script>
<script src="resources/scripts/axure/globals.js"></script>
<script src="resources/scripts/axutils.js"></script>
<script src="resources/scripts/axure/annotation.js"></script>
<script src="resources/scripts/axure/axQuery.std.js"></script>
<script src="resources/scripts/axure/doc.js"></script>
<script src="resources/scripts/messagecenter.js"></script>
<script src="resources/scripts/axure/events.js"></script>
<script src="resources/scripts/axure/recording.js"></script>
<!-- <script src="resources/scripts/axure/action.js"></script> -->
<script src="resources/scripts/axure/expr.js"></script>
<script src="resources/scripts/axure/geometry.js"></script>
<script src="resources/scripts/axure/flyout.js"></script>
<script src="resources/scripts/axure/model.js"></script>
<script src="resources/scripts/axure/repeater.js"></script>
<script src="resources/scripts/axure/sto.js"></script>
<script src="resources/scripts/axure/utils.temp.js"></script>
<script src="resources/scripts/axure/variables.js"></script>
<script src="resources/scripts/axure/drag.js"></script>
<script src="resources/scripts/axure/move.js"></script>
<script src="resources/scripts/axure/visibility.js"></script>
<script src="resources/scripts/axure/style.js"></script>
<script src="resources/scripts/axure/adaptive.js"></script>
<script src="resources/scripts/axure/tree.js"></script>
<script src="resources/scripts/axure/init.temp.js"></script>
<script src="resources/scripts/axure/legacy.js"></script>
<script src="resources/scripts/axure/viewer.js"></script>
<!-- <script src="resources/scripts/axure/math.js"></script> -->
<script src="resources/scripts/axure/jquery.nicescroll.min.js"></script>
<script src="data/document.js"></script>
<script src="files/数据可视化大屏模板24/data.js"></script>
<link rel="stylesheet" href="/common/plugin/map/ol/v6.12.0/css/ol.css" type="text/css" />
<script src="/common/plugin/map/ol/v6.12.0/build/ol.js"></script>
<link rel="stylesheet" href="/common/plugin/map/ol/ol-ext-master/ol-ext.css" />
<script type="text/javascript" src="/common/plugin/map/ol/ol-ext-master/ol-ext.js"></script>
<script src="chart.js"></script>
<style>
body {
width: 100%;
height: 100%;
}
/* 添加地图容器样式 */
#map-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
/* 确保其他内容显示在地图之上 */
#base {
position: fixed;
z-index: 1;
}
</style>
<script type="text/javascript">
$axure.utils.getTransparentGifPath = function () { return 'resources/images/transparent.gif'; };
$axure.utils.getOtherPath = function () { return 'resources/Other.html'; };
$axure.utils.getReloadPath = function () { return 'resources/reload.html'; };
var TDT_API_KEY = "a4f4b6000cb9d1bf148bb77452000f30";
var drawSource = null;
// 地图初始化函数
var MapShow = [0, 1];
// 修改initializeMap函数如下
function initializeMap() {
drawSource = new ol.source.Vector();
var osm = [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + TDT_API_KEY
})
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + TDT_API_KEY
}),
visible: false
}),
]
map = new ol.PerspectiveMap({
layers: osm,
target: 'map-container',
view: new ol.View({
projection: 'EPSG:4326',
renderer: 'webgl',
center: [112.955874, 28.19348],
zoom: 15,
maxZoom: 17
}),
interactions: ol.interaction.defaults(),
});
// 确保地图加载完成后再添加热力图
map.once('postrender', function () {
// 长沙湘江区域热力图数据
var xiangjiangPoints = [
{ lon: 112.953928, lat: 28.210764, value: 0.8 }, // 污染严重区域
{ lon: 112.953928, lat: 28.20548, value: 0.6 },
{ lon: 112.953928, lat: 28.191919, value: 0.7 },
{ lon: 112.962574, lat: 28.191919, value: 0.5 },
{ lon: 112.962143, lat: 28.182494, value: 0.9 }, // 污染最严重区域
{ lon: 112.953928, lat: 28.182494, value: 0.4 },
// { lon: 113.00, lat: 28.18, value: 0.3 },
// { lon: 113.02, lat: 28.20, value: 0.6 },
// { lon: 113.05, lat: 28.22, value: 0.5 },
{ lon: 112.953928, lat: 28.172494, value: 0.7 },
// { lon: 112.91, lat: 28.26, value: 0.4 },
// { lon: 112.89, lat: 28.28, value: 0.3 }
];
// 摄像头图标点位(靠近热力图点位)
var cameraPoints = [
{ lon: 112.953928, lat: 28.210764 },
{ lon: 112.953928, lat: 28.20548 },
{ lon: 112.962574, lat: 28.191919 },
{ lon: 112.962143, lat: 28.182494 },
{ lon: 112.953928, lat: 28.172494 }
];
var cameraFeatures = cameraPoints.map(function (point) {
var feature = new ol.Feature({
geometry: new ol.geom.Point([point.lon, point.lat])
});
feature.setStyle(new ol.style.Style({
image: new ol.style.Icon({
src: '/images/摄像头3-01.svg',
scale: 0.2,
anchor: [0.5, 1]
})
}));
return feature;
});
// 添加指定摄像头图标
var rightCamFeature = new ol.Feature({
geometry: new ol.geom.Point([112.949046, 28.180494])
});
rightCamFeature.setStyle(new ol.style.Style({
image: new ol.style.Icon({
src: '/images/摄像头4-01.svg',
scale: 0.2,
anchor: [0.5, 1]
})
}));
cameraFeatures.push(rightCamFeature);
var cameraLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: cameraFeatures
}),
zIndex: 20
});
map.addLayer(cameraLayer);
// 创建热力图图层
var heatmapFeatures = [];
xiangjiangPoints.forEach(function (point) {
var feature = new ol.Feature({
geometry: new ol.geom.Point([point.lon, point.lat]),
weight: point.value
});
heatmapFeatures.push(feature);
});
var vectorSource = new ol.source.Vector({
features: heatmapFeatures
});
// 调整热力图参数
heatmapLayer = new ol.layer.Heatmap({
source: vectorSource,
blur: 35, // 增加模糊半径
radius: 40, // 增加点半径
weight: function (feature) {
return feature.get('weight');
},
gradient: ['#00ff00', '#ffff00', '#ff9900', '#ff6600', '#ff0000'], // 绿-黄-橙-红
zIndex: 10 // 确保热力图在其他图层之上
});
map.addLayer(heatmapLayer);
// 添加热力图控制按钮
//addHeatmapControl();
});
// 原有地图设置代码...
var dep = { "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[113.30987241, 29.74361031], [113.44912701, 29.66969569], [113.17573883, 29.36636181], [113.02569151, 29.4517874], [113.30987241, 29.74361031]]]] } };
var enhance = new ol.filter.Colorize({ operation: 'enhance' });
osm[1].addFilter(enhance);
var filter = new ol.filter.Colorize();
osm[1].addFilter(filter);
enhance.setActive(false);
filter.setActive(true);
filter.setFilter({
operation: 'color',
red: Number('0'),
green: Number('192'), blue: Number('50'),
value: Number('0.2'),
});
var coords = dep.geometry.coordinates;
var f = new ol.Feature(new ol.geom.MultiPolygon(coords));
var mask = new ol.filter.Mask({ feature: f, inner: false, fill: new ol.style.Fill({ color: [50, 70, 80, 0.8] }) });
//map.setPerspective(40);//3d倾斜
map.getLayers().item(MapShow[0]).setVisible(false);
map.getLayers().item(MapShow[1]).setVisible(true);
}
// 添加热力图控制按钮
function addHeatmapControl() {
var heatmapControl = document.createElement('div');
heatmapControl.className = 'ol-control heatmap-control';
heatmapControl.innerHTML = '<button title="切换热力图">热力图</button>';
heatmapControl.addEventListener('click', function () {
if (heatmapLayer) {
var visible = heatmapLayer.getVisible();
heatmapLayer.setVisible(!visible);
}
});
map.addControl(new ol.control.Control({
element: heatmapControl
}));
}
// 页面加载完成后初始化地图
$(document).ready(function () {
initializeMap();
intcharts();
renderWaterQualityChart();
});
// 水质达标柱状图数据(基于湘江实际监测数据模拟)
const waterQualityData = {
labels: ['pH值', '溶解氧(DO)', '浊度(NTU)', 'COD(mg/L)', '氨氮(mg/L)', '总磷(mg/L)'],
datasets: [{
label: '监测值',
data: [7.8, 6.2, 15, 18, 0.9, 0.15], // 实际监测数据
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}, {
label: '标准限值',
data: [6.5, 5, 20, 15, 1.0, 0.2], // 地表水Ⅲ类标准限值
backgroundColor: 'rgba(255, 99, 132, 0.6)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
type: 'line', // 用红线标注标准限值
fill: false
}]
};
let waterQualityChart;
// 渲染水质达标柱状图
function renderWaterQualityChart() {
const ctx = document.getElementById('waterQualityChart').getContext('2d');
waterQualityChart = new Chart(ctx, {
type: 'bar',
data: waterQualityData,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: '#fff',
font: { size: 12 }
}
},
tooltip: {
callbacks: {
label: function (context) {
return `${context.dataset.label}: ${context.raw}${getUnit(context.label)}`;
}
}
}
},
scales: {
x: {
grid: { color: 'rgba(255, 255, 255, 0.1)' },
ticks: { color: '#fff' }
},
y: {
grid: { color: 'rgba(255, 255, 255, 0.1)' },
ticks: { color: '#fff' }
}
},
// 在options中补充
annotation: {
annotations: {
COD超标: {
type: 'line',
yMin: 15,
yMax: 15,
borderColor: 'red',
borderWidth: 2,
label: {
content: '超标!',
enabled: true
}
}
}
}
}
});
}
// 辅助函数:获取单位
function getUnit(label) {
const units = {
'pH值': '',
'溶解氧(DO)': ' mg/L',
'浊度(NTU)': ' NTU',
'COD(mg/L)': ' mg/L',
'氨氮(mg/L)': ' mg/L',
'总磷(mg/L)': ' mg/L'
};
return units[label] || '';
}
function intcharts() {
// 垃圾告警统计雷达图(本年度与同期)
const ctx = document.getElementById('alarmChart').getContext('2d');
new Chart(ctx, {
type: 'radar',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
datasets: [
{
label: '本年度',
data: [8, 12, 6, 15, 10, 18, 14],
backgroundColor: 'rgba(153, 102, 255, 0.8)',
borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(153, 102, 255, 1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(153, 102, 255, 1)'
},
{
label: '历史同期',
data: [12, 16, 10, 20, 15, 22, 18],
backgroundColor: 'rgba(54, 162, 235, 0.8)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(54, 162, 235, 1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(54, 162, 235, 1)'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
r: {
angleLines: {
color: 'rgba(255, 255, 255, 0.5)'
},
grid: {
color: 'rgba(255, 255, 255, 0.5)'
},
pointLabels: {
font: {
size: 12
},
color: '#ffffff'
},
ticks: {
backdropColor: 'transparent',
color: '#ffffff',
beginAtZero: true,
max: 20,
min: 0,
stepSize: 5
}
}
},
plugins: {
legend: {
position: 'right',
align: 'center',
labels: {
font: {
size: 12
},
color: '#ffffff',
padding: 20,
boxWidth: 12,
usePointStyle: true
}
}
},
layout: {
padding: {
right: 40
}
}
}
});
// 水质净化台账 - 紫色曲线图
const purificationCtx = document.getElementById('purificationChart').getContext('2d');
new Chart(purificationCtx, {
type: 'line',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
datasets: [{
label: '垃圾清理量(吨)',
data: [40, 55, 38, 60, 72, 80, 65],
borderColor: '#9c27b0',
backgroundColor: 'rgba(156, 39, 176, 0.1)',
borderWidth: 3,
tension: 0.4,
pointBackgroundColor: '#9c27b0',
pointBorderColor: '#fff',
pointRadius: 5,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
x: {
ticks: { color: '#fff' },
grid: { color: 'rgba(255, 255, 255, 0.1)' }
},
y: {
ticks: { color: '#fff' },
grid: { color: 'rgba(255, 255, 255, 0.1)' }
}
}
}
});
// // 水质达标情况 - 蓝色柱状图
// const waterQualityCtx = document.getElementById('waterQualityChart').getContext('2d');
// new Chart(waterQualityCtx, {
// type: 'bar',
// data: {
// labels: ['PH', '溶解氧', '浊度', 'COD'],
// datasets: [{
// data: [7.2, 8.5, 12, 45],
// backgroundColor: 'rgba(33, 150, 243, 0.6)', // 修改这里添加0.6的透明度
// borderRadius: 10,
// borderWidth: 0
// }]
// },
// options: {
// responsive: true,
// maintainAspectRatio: false,
// plugins: {
// legend: {
// display: false
// }
// },
// scales: {
// x: {
// ticks: { color: '#fff' },
// grid: { display: false }
// },
// y: {
// ticks: { color: '#fff' },
// grid: { color: 'rgba(255, 255, 255, 0.1)' }
// }
// }
// }
// });
}
// 模拟实时数据更新
setInterval(() => {
waterQualityChart.data.datasets[0].data = [
7.5 + Math.random() * 0.5,
5.8 + Math.random(),
10 + Math.random() * 10,
12 + Math.random() * 8,
0.7 + Math.random() * 0.4,
0.1 + Math.random() * 0.1
];
waterQualityChart.update();
}, 5000);
</script>
</head>
<body>
<!-- 添加地图容器 -->
<div id="map-container"></div>
<div id="base" class="">
<!-- Unnamed (图片 ) -->
<!-- <div id="u6437" class="ax_default _默认样式">
<img id="u6437_img" class="img " src="images/数据可视化大屏模板24/u6437.png"/>
<div id="u6437_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div> -->
<!-- Unnamed (图片 ) -->
<!-- <div id="u6438" class="ax_default _默认样式">
<img id="u6438_img" class="img " src="images/数据可视化大屏模板24/u6438.png"/>
<div id="u6438_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div> -->
<!-- Unnamed (图片 ) -->
<div id="u6439" class="ax_default image">
<img id="u6439_img" class="img " src="images/数据可视化大屏模板24/u6439.png" />
<div id="u6439_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (图片 ) -->
<!-- <div id="u6440" class="ax_default _默认样式">
<img id="u6440_img" class="img " src="images/数据可视化大屏模板24/u6440.png"/>
<div id="u6440_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div> -->
<!-- 标题文字 (组合) -->
<div id="u6441" class="ax_default" data-label="标题文字" data-left="41" data-top="7" data-width="402" data-height="60">
<!-- Unnamed (矩形) -->
<div id="u6442" class="ax_default _默认样式">
<div id="u6442_div" class=""></div>
<div id="u6442_text" class="text ">
<p><span style="text-decoration:none;">湘江环境监控</span></p>
</div>
</div>
<!-- Unnamed (SVG) -->
<div id="u6443" class="ax_default _默认样式">
<img id="u6443_img" class="img " src="images/数据可视化大屏模板01/u5.svg" />
<div id="u6443_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
<!-- 时间组件 (组合) -->
<div id="u6444" class="ax_default" data-label="时间组件" data-left="1436" data-top="11" data-width="225"
data-height="25">
<!-- 日期组件 (组合) -->
<div id="u6445" class="ax_default" data-label="日期组件" data-left="1461" data-top="11" data-width="107"
data-height="25">
<!-- 年 (矩形) -->
<div id="u6446" class="ax_default _默认样式" data-label="年">
<div id="u6446_div" class=""></div>
<div id="u6446_text" class="text ">
<p><span style="text-decoration:none;">2023</span></p>
</div>
</div>
<!-- 日 (矩形) -->
<div id="u6447" class="ax_default _默认样式" data-label="日">
<div id="u6447_div" class=""></div>
<div id="u6447_text" class="text ">
<p><span style="text-decoration:none;">01</span></p>
</div>
</div>
<!-- 月 (矩形) -->
<div id="u6448" class="ax_default _默认样式" data-label="月">
<div id="u6448_div" class=""></div>
<div id="u6448_text" class="text ">
<p><span style="text-decoration:none;">01</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6449" class="ax_default _默认样式">
<div id="u6449_div" class=""></div>
<div id="u6449_text" class="text ">
<p><span style="text-decoration:none;">-</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6450" class="ax_default _默认样式">
<div id="u6450_div" class=""></div>
<div id="u6450_text" class="text ">
<p><span style="text-decoration:none;">-</span></p>
</div>
</div>
</div>
<!-- 时间组件 (组合) -->
<div id="u6451" class="ax_default" data-label="时间组件" data-left="1568" data-top="11" data-width="93"
data-height="25">
<!-- 时 (矩形) -->
<div id="u6452" class="ax_default _默认样式" data-label="时">
<div id="u6452_div" class=""></div>
<div id="u6452_text" class="text ">
<p><span style="text-decoration:none;">12</span></p>
</div>
</div>
<!-- 秒 (矩形) -->
<div id="u6453" class="ax_default _默认样式" data-label="秒">
<div id="u6453_div" class=""></div>
<div id="u6453_text" class="text ">
<p><span style="text-decoration:none;">00</span></p>
</div>
</div>
<!-- 分 (矩形) -->
<div id="u6454" class="ax_default _默认样式" data-label="分">
<div id="u6454_div" class=""></div>
<div id="u6454_text" class="text ">
<p><span style="text-decoration:none;">00</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6455" class="ax_default _默认样式">
<div id="u6455_div" class=""></div>
<div id="u6455_text" class="text ">
<p><span style="text-decoration:none;">:</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6456" class="ax_default _默认样式">
<div id="u6456_div" class=""></div>
<div id="u6456_text" class="text ">
<p><span style="text-decoration:none;">:</span></p>
</div>
</div>
</div>
<!-- Unnamed (图片 ) -->
<div id="u6457" class="ax_default _默认样式">
<img id="u6457_img" class="img " src="images/数据可视化大屏模板01/u19.png" />
<div id="u6457_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
<!-- 天气组件 (组合) -->
<div id="u6458" class="ax_default" data-label="天气组件" data-left="1683" data-top="11" data-width="212"
data-height="25">
<!-- Unnamed (矩形) -->
<div id="u6459" class="ax_default _默认样式">
<div id="u6459_div" class=""></div>
<div id="u6459_text" class="text ">
<p><span style="text-decoration:none;">晴转多云&nbsp;</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6460" class="ax_default _默认样式">
<div id="u6460_div" class=""></div>
<div id="u6460_text" class="text ">
<p><span style="text-decoration:none;">20~28℃</span></p>
</div>
</div>
<!-- Unnamed (图片 ) -->
<div id="u6461" class="ax_default _默认样式">
<img id="u6461_img" class="img " src="images/数据可视化大屏模板01/u23.png" />
<div id="u6461_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6462" class="ax_default _默认样式">
<div id="u6462_div" class=""></div>
<div id="u6462_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6463" class="ax_default" data-left="58" data-top="136" data-width="403" data-height="24">
<!-- 垃圾相关标题 -->
<div id="u6464" class="ax_default _默认样式">
<div id="u6464_div" class=""></div>
<div id="u6464_text" class="text ">
<p style="font-size:14px;"><span
style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;font-size:18px;text-decoration:none;color:#FFFFFF;">垃圾转运管理&nbsp;
</span><span
style="font-family:'Arial Normal', 'Arial';font-weight:400;font-style:normal;text-decoration:none;color:rgba(255, 255, 255, 0.298039215686275);">Garbage
Transfer Management</span></p>
</div>
</div>
<!-- 垃圾统计内容 -->
<div id="u6465" class="ax_default _默认样式">
<div id="u6465_div" class=""></div>
<div id="u6465_text" class="text ">
<p><span style="color:#FFFFFF;font-size:16px;">今日垃圾转运量:<b>12.5吨</b></span></p>
<p><span style="color:#FFFFFF;font-size:16px;">本月累计转运:<b>320吨</b></span></p>
<p><span style="color:#FFFFFF;font-size:16px;">待处理垃圾点:<b>3处</b></span></p>
</div>
</div>
<!-- 垃圾图片示例 -->
<div id="u6466" class="ax_default _默认样式">
<div id="u6466_div" class=""></div>
<div id="u6466_text" class="text ">
<img src="images/laji1.png" alt="垃圾堆积现场" style="width:100px;height:100px;border-radius:8px;">
<span style="color:#CCCCCC;font-size:12px;display:block;">垃圾堆积现场</span>
</div>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6467" class="ax_default" data-left="58" data-top="373" data-width="403" data-height="24">
<!-- Unnamed (矩形) -->
<div id="u6468" class="ax_default _默认样式">
<div id="u6468_div" class=""></div>
<div id="u6468_text" class="text ">
<p style="font-size:14px;"><span
style="font-family:'微软雅黑 Bold', '微软雅黑';font-weight:700;font-size:18px;color:#FFFFFF;">垃圾告警统计</span>
<span style="font-family:'Arial';font-weight:400;color:rgba(255,255,255,0.3);">Garbage Alarm
Statistics</span>
</p>
</div>
</div>
<!-- 垃圾告警统计图表 -->
<div id="u6469" class="ax_default _默认样式">
<div id="u6469_div" class=""></div>
<div id="u6469_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- 垃圾告警说明 -->
<div id="u6470" class="ax_default _默认样式">
<div id="u6470_div" class=""></div>
<div id="u6470_text" class="text ">
<p style="color:#FFFFFF;font-size:13px;">本月垃圾堆积告警18次已处理16次待处理2次</p>
</div>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6471" class="ax_default" data-left="63" data-top="690" data-width="403" data-height="24">
<!-- 垃圾净化台账标题 -->
<div id="u6472" class="ax_default _默认样式">
<div id="u6472_div" class=""></div>
<div id="u6472_text" class="text ">
<p style="font-size:14px;"><span
style="font-family:'微软雅黑 Bold', '微软雅黑';font-weight:700;font-size:18px;color:#FFFFFF;">垃圾清理台账</span>
<span style="font-family:'Arial';font-weight:400;color:rgba(255,255,255,0.3);">Garbage Cleaning
Ledger</span>
</p>
</div>
</div>
<!-- 垃圾清理统计图表 -->
<div id="u6473" class="ax_default _默认样式">
<div id="u6473_div" class=""></div>
<div id="u6473_text" class="text ">
<canvas id="garbageCleanChart" width="380" height="120"></canvas>
<script>
if (window.Chart) {
var ctx2 = document.getElementById('garbageCleanChart').getContext('2d');
new Chart(ctx2, {
type: 'line',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
datasets: [{
label: '垃圾清理量(吨)',
data: [40, 55, 38, 60, 72, 80, 65],
borderColor: '#FF9800',
backgroundColor: 'rgba(255,152,0,0.2)',
fill: true
}]
},
options: {
plugins: { legend: { display: false } },
scales: { y: { beginAtZero: true } }
}
});
}
</script>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6474" class="ax_default _默认样式">
<div id="u6474_div" class=""></div>
<div id="u6474_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6475" class="ax_default _默认样式">
<div id="u6475_div" class=""></div>
<div id="u6475_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6476" class="ax_default" data-left="1447" data-top="136" data-width="403" data-height="24">
<!-- Unnamed (矩形) -->
<div id="u6477" class="ax_default _默认样式">
<div id="u6477_div" class=""></div>
<div id="u6477_text" class="text ">
<p style="font-size:14px;"><span
style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;font-size:18px;text-decoration:none;color:#FFFFFF;">水质监测情况&nbsp;
&nbsp; </span><span
style="font-family:'Arial Normal', 'Arial';font-weight:400;font-style:normal;text-decoration:none;color:rgba(255, 255, 255, 0.298039215686275);">Water
quality monitoring situation</span><span
style="font-family:'Arial Negreta', 'Arial Normal', 'Arial';font-weight:700;font-size:18px;text-decoration:none;color:rgba(255, 255, 255, 0.298039215686275);">
</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6478" class="ax_default _默认样式">
<div id="u6478_div" class=""></div>
<div id="u6478_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6479" class="ax_default _默认样式">
<div id="u6479_div" class=""></div>
<div id="u6479_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6480" class="ax_default" data-left="1447" data-top="434" data-width="403" data-height="24">
<!-- Unnamed (矩形) -->
<div id="u6481" class="ax_default _默认样式">
<div id="u6481_div" class=""></div>
<div id="u6481_text" class="text ">
<p style="font-size:14px;"><span
style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;font-size:18px;text-decoration:none;color:#FFFFFF;">水位及流量监测&nbsp;
&nbsp; </span><span
style="font-family:'Arial Normal', 'Arial';font-weight:400;font-style:normal;text-decoration:none;color:rgba(255, 255, 255, 0.298039215686275);">Water
level and flow monitoring</span><span
style="font-family:'Arial Negreta', 'Arial Normal', 'Arial';font-weight:700;font-size:18px;text-decoration:none;color:rgba(255, 255, 255, 0.298039215686275);">
</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6482" class="ax_default _默认样式">
<div id="u6482_div" class=""></div>
<div id="u6482_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6483" class="ax_default _默认样式">
<div id="u6483_div" class=""></div>
<div id="u6483_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6484" class="ax_default" data-left="1447" data-top="720" data-width="403" data-height="24">
<!-- Unnamed (矩形) -->
<div id="u6485" class="ax_default _默认样式">
<div id="u6485_div" class=""></div>
<div id="u6485_text" class="text ">
<p style="font-size:14px;"><span
style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;font-size:18px;text-decoration:none;color:#FFFFFF;">水质达标情况&nbsp;
&nbsp; </span><span
style="font-family:'Arial Normal', 'Arial';font-weight:400;font-style:normal;text-decoration:none;color:rgba(255, 255, 255, 0.298039215686275);">Water
quality compliance</span><span
style="font-family:'Arial Negreta', 'Arial Normal', 'Arial';font-weight:700;font-size:18px;text-decoration:none;color:rgba(255, 255, 255, 0.298039215686275);">
</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6486" class="ax_default _默认样式">
<div id="u6486_div" class=""></div>
<div id="u6486_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6487" class="ax_default _默认样式">
<div id="u6487_div" class=""></div>
<div id="u6487_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
<!-- 图表 (组合) -->
<div id="u6488" class="ax_default" data-label="图表" data-left="1498" data-top="485" data-width="317"
data-height="197">
<!-- Unnamed (圆形) -->
<div id="u6489" class="ax_default _默认样式">
<img id="u6489_img" class="img " src="images/数据可视化大屏模板24/u6489.svg" />
<div id="u6489_text" class="text ">
<p style="font-size:28px;"><span
style="font-family:'DIN Condensed Bold', 'DIN';font-weight:700;text-decoration:none;">200</span></p>
<p style="font-size:14px;"><span
style="font-family:'Microsoft YaHei Regular', 'Microsoft YaHei';font-weight:400;text-decoration:none;">月平均流量</span>
</p>
</div>
</div>
<!-- Unnamed (圆形) -->
<div id="u6490" class="ax_default _默认样式">
<img id="u6490_img" class="img " src="images/数据可视化大屏模板24/u6490.svg" />
<div id="u6490_text" class="text ">
<p style="font-size:28px;"><span
style="font-family:'DIN Condensed Bold', 'DIN';font-weight:700;text-decoration:none;">17.8℃</span></p>
<p style="font-size:14px;"><span
style="font-family:'Microsoft YaHei Regular', 'Microsoft YaHei';font-weight:400;text-decoration:none;">平均温度</span>
</p>
</div>
</div>
<!-- Unnamed (圆形) -->
<div id="u6491" class="ax_default _默认样式">
<img id="u6491_img" class="img " src="images/数据可视化大屏模板24/u6491.svg" />
<div id="u6491_text" class="text ">
<p style="font-size:28px;"><span
style="font-family:'DIN Condensed Bold', 'DIN';font-weight:700;text-decoration:none;">178.34</span></p>
<p style="font-size:14px;"><span
style="font-family:'Microsoft YaHei Regular', 'Microsoft YaHei';font-weight:400;text-decoration:none;">日平均流量</span>
</p>
</div>
</div>
<!-- Unnamed (圆形) -->
<div id="u6492" class="ax_default _默认样式">
<img id="u6492_img" class="img " src="images/数据可视化大屏模板24/u6492.svg" />
<div id="u6492_text" class="text ">
<p style="font-size:24px;"><span
style="font-family:'DIN Condensed Bold', 'DIN';font-weight:700;text-decoration:none;">正常</span></p>
<p style="font-size:12px;"><span
style="font-family:'Microsoft YaHei Regular', 'Microsoft YaHei';font-weight:400;text-decoration:none;">设备状态</span>
</p>
</div>
</div>
<!-- Unnamed (圆形) -->
<div id="u6493" class="ax_default _默认样式">
<img id="u6493_img" class="img " src="images/数据可视化大屏模板24/u6493.svg" />
<div id="u6493_text" class="text ">
<p style="font-size:28px;"><span
style="font-family:'DIN Condensed Bold', 'DIN';font-weight:700;text-decoration:none;">122</span></p>
<p style="font-size:14px;"><span
style="font-family:'Microsoft YaHei Regular', 'Microsoft YaHei';font-weight:400;text-decoration:none;">周平均流量</span>
</p>
</div>
</div>
<!-- Unnamed (圆形) -->
<div id="u6494" class="ax_default _默认样式">
<img id="u6494_img" class="img " src="images/数据可视化大屏模板24/u6494.svg" />
<div id="u6494_text" class="text ">
<p style="font-size:24px;"><span
style="font-family:'DIN Condensed Bold', 'DIN';font-weight:700;text-decoration:none;">152</span></p>
<p style="font-size:12px;"><span
style="font-family:'Microsoft YaHei Regular', 'Microsoft YaHei';font-weight:400;text-decoration:none;">水位高度</span>
</p>
</div>
</div>
<!-- Unnamed (圆形) -->
<div id="u6495" class="ax_default _默认样式">
<img id="u6495_img" class="img " src="images/数据可视化大屏模板24/u6495.svg" />
<div id="u6495_text" class="text ">
<p style="font-size:28px;"><span
style="font-family:'DIN Condensed Bold', 'DIN';font-weight:700;text-decoration:none;">185</span></p>
<p style="font-size:14px;"><span
style="font-family:'Microsoft YaHei Regular', 'Microsoft YaHei';font-weight:400;text-decoration:none;">年平均流量</span>
</p>
</div>
</div>
<!-- Unnamed (圆形) -->
<div id="u6496" class="ax_default _默认样式">
<img id="u6496_img" class="img " src="images/数据可视化大屏模板24/u6496.svg" />
<div id="u6496_text" class="text ">
<p style="font-size:24px;"><span
style="font-family:'DIN Condensed Bold', 'DIN';font-weight:700;text-decoration:none;">656</span></p>
<p style="font-size:12px;"><span
style="font-family:'Microsoft YaHei Regular', 'Microsoft YaHei';font-weight:400;text-decoration:none;">数据七</span>
</p>
</div>
</div>
</div>
<!-- 图表 (组合) -->
<div id="u6497" class="ax_default" data-label="图表" data-left="65" data-top="202" data-width="405" data-height="147">
<!-- Unnamed (形状) -->
<div id="u6498" class="ax_default _默认样式">
<img id="u6498_img" class="img " src="images/数据可视化大屏模板24/u6498.svg" />
<div id="u6498_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (形状) -->
<div id="u6499" class="ax_default _默认样式">
<img id="u6499_img" class="img " src="images/数据可视化大屏模板24/u6499.svg" />
<div id="u6499_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (形状) -->
<div id="u6500" class="ax_default _默认样式">
<img id="u6500_img" class="img " src="images/数据可视化大屏模板24/u6500.svg" />
<div id="u6500_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (形状) -->
<div id="u6501" class="ax_default _默认样式">
<img id="u6501_img" class="img " src="images/数据可视化大屏模板24/u6501.svg" />
<div id="u6501_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (形状) -->
<div id="u6502" class="ax_default _默认样式">
<img id="u6502_img" class="img " src="images/数据可视化大屏模板24/u6502.svg" />
<div id="u6502_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (形状) -->
<div id="u6503" class="ax_default _默认样式">
<img id="u6503_img" class="img " src="images/数据可视化大屏模板24/u6503.svg" />
<div id="u6503_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6504" class="ax_default _默认样式">
<div id="u6504_div" class=""></div>
<div id="u6504_text" class="text ">
<p style="font-size:28px;"><span
style="font-family:'DIN Alternate';font-weight:400;text-decoration:none;color:#FFFFFF;">12.5</span></p>
<p style="font-size:12px;"><span
style="font-family:'微软雅黑';font-weight:400;text-decoration:none;color:rgba(197, 204, 255, 0.498039215686275);"></span>
</p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6505" class="ax_default _默认样式">
<div id="u6505_div" class=""></div>
<div id="u6505_text" class="text ">
<p style="font-size:28px;"><span
style="font-family:'DIN Alternate';font-weight:400;text-decoration:none;color:#FFFFFF;">320</span></p>
<p style="font-size:12px;"><span
style="font-family:'微软雅黑';font-weight:400;text-decoration:none;color:rgba(197, 204, 255, 0.498039215686275);"></span>
</p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6506" class="ax_default _默认样式">
<div id="u6506_div" class=""></div>
<div id="u6506_text" class="text ">
<p><span style="text-decoration:none;">今日转运量</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6507" class="ax_default _默认样式">
<div id="u6507_div" class=""></div>
<div id="u6507_text" class="text ">
<p style="font-size:28px;"><span
style="font-family:'DIN Alternate';font-weight:400;text-decoration:none;color:#FFFFFF;">3</span></p>
<p style="font-size:12px;"><span
style="font-family:'微软雅黑';font-weight:400;text-decoration:none;color:rgba(197, 204, 255, 0.498039215686275);"></span>
</p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6508" class="ax_default _默认样式">
<div id="u6508_div" class=""></div>
<div id="u6508_text" class="text ">
<p><span style="text-decoration:none;">本月累计转运</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6509" class="ax_default _默认样式">
<div id="u6509_div" class=""></div>
<div id="u6509_text" class="text ">
<p><span style="text-decoration:none;">待处理垃圾点</span></p>
</div>
</div>
</div>
<!-- 图表 (组合) -->
<div id="u6510" class="ax_default" data-label="图表" data-left="58" data-top="742" data-width="406" data-height="235">
<div id="u6702_div">
<canvas id="purificationChart" style="width: 100%; height: 100%;"></canvas>
</div>
</div>
<!-- 图表 (组合) -->
<div id="u6542" class="ax_default" data-label="图表" data-left="1458" data-top="185" data-width="420"
data-height="220">
<!-- Unnamed (组合) -->
<div id="u6543" class="ax_default" data-left="1458" data-top="185" data-width="420" data-height="40">
<!-- Unnamed (矩形) -->
<div id="u6544" class="ax_default _默认样式">
<div id="u6544_div" class=""></div>
<div id="u6544_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6545" class="ax_default _默认样式">
<div id="u6545_div" class=""></div>
<div id="u6545_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6546" class="ax_default _默认样式">
<div id="u6546_div" class=""></div>
<div id="u6546_text" class="text ">
<p><span style="text-decoration:none;">优良水质</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6547" class="ax_default _默认样式">
<div id="u6547_div" class=""></div>
<div id="u6547_text" class="text ">
<p style="font-size:24px;"><span
style="font-family:'DIN Alternate';font-weight:400;text-decoration:none;">80</span><span
style="font-family:'Arial Negreta', 'Arial Normal', 'Arial';font-weight:700;font-size:20px;text-decoration:none;">
</span><span style="font-family:'微软雅黑';font-weight:400;font-size:12px;text-decoration:none;"></span></p>
</div>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6548" class="ax_default" data-left="1458" data-top="230" data-width="420" data-height="40">
<!-- Unnamed (矩形) -->
<div id="u6549" class="ax_default _默认样式">
<div id="u6549_div" class=""></div>
<div id="u6549_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6550" class="ax_default _默认样式">
<div id="u6550_div" class=""></div>
<div id="u6550_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6551" class="ax_default _默认样式">
<div id="u6551_div" class=""></div>
<div id="u6551_text" class="text ">
<p><span style="text-decoration:none;">轻度污染</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6552" class="ax_default _默认样式">
<div id="u6552_div" class=""></div>
<div id="u6552_text" class="text ">
<p style="font-size:24px;"><span
style="font-family:'DIN Alternate';font-weight:400;text-decoration:none;">70</span><span
style="font-family:'Arial Negreta', 'Arial Normal', 'Arial';font-weight:700;font-size:20px;text-decoration:none;">
</span><span style="font-family:'微软雅黑';font-weight:400;font-size:12px;text-decoration:none;"></span></p>
</div>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6553" class="ax_default" data-left="1458" data-top="275" data-width="420" data-height="40">
<!-- Unnamed (矩形) -->
<div id="u6554" class="ax_default _默认样式">
<div id="u6554_div" class=""></div>
<div id="u6554_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6555" class="ax_default _默认样式">
<div id="u6555_div" class=""></div>
<div id="u6555_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6556" class="ax_default _默认样式">
<div id="u6556_div" class=""></div>
<div id="u6556_text" class="text ">
<p><span style="text-decoration:none;">重度污染</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6557" class="ax_default _默认样式">
<div id="u6557_div" class=""></div>
<div id="u6557_text" class="text ">
<p style="font-size:24px;"><span
style="font-family:'DIN Alternate';font-weight:400;text-decoration:none;">60</span><span
style="font-family:'Arial Negreta', 'Arial Normal', 'Arial';font-weight:700;font-size:20px;text-decoration:none;">
</span><span style="font-family:'微软雅黑';font-weight:400;font-size:12px;text-decoration:none;"></span></p>
</div>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6558" class="ax_default" data-left="1458" data-top="320" data-width="420" data-height="40">
<!-- Unnamed (矩形) -->
<div id="u6559" class="ax_default _默认样式">
<div id="u6559_div" class=""></div>
<div id="u6559_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6560" class="ax_default _默认样式">
<div id="u6560_div" class=""></div>
<div id="u6560_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6561" class="ax_default _默认样式">
<div id="u6561_div" class=""></div>
<div id="u6561_text" class="text ">
<p><span style="text-decoration:none;">严重污染</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6562" class="ax_default _默认样式">
<div id="u6562_div" class=""></div>
<div id="u6562_text" class="text ">
<p style="font-size:24px;"><span
style="font-family:'DIN Alternate';font-weight:400;text-decoration:none;">50</span><span
style="font-family:'Arial Negreta', 'Arial Normal', 'Arial';font-weight:700;font-size:20px;text-decoration:none;">
</span><span style="font-family:'微软雅黑';font-weight:400;font-size:12px;text-decoration:none;"></span></p>
</div>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6563" class="ax_default" data-left="1458" data-top="365" data-width="420" data-height="40">
<!-- Unnamed (矩形) -->
<div id="u6564" class="ax_default _默认样式">
<div id="u6564_div" class=""></div>
<div id="u6564_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6565" class="ax_default _默认样式">
<div id="u6565_div" class=""></div>
<div id="u6565_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6566" class="ax_default _默认样式">
<div id="u6566_div" class=""></div>
<div id="u6566_text" class="text ">
<p><span style="text-decoration:none;">白色污染</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6567" class="ax_default _默认样式">
<div id="u6567_div" class=""></div>
<div id="u6567_text" class="text ">
<p style="font-size:24px;"><span
style="font-family:'DIN Alternate';font-weight:400;text-decoration:none;">40</span><span
style="font-family:'Arial Negreta', 'Arial Normal', 'Arial';font-weight:700;font-size:20px;text-decoration:none;">
</span><span style="font-family:'微软雅黑';font-weight:400;font-size:12px;text-decoration:none;"></span></p>
</div>
</div>
</div>
</div>
<!-- 图表 (组合) -->
<div id="u6568" class="ax_default" data-label="图表" data-left="1455" data-top="766" data-width="406"
data-height="235">
<div id="u6703_div">
<canvas id="waterQualityChart" style="width: 100%; height: 100%;"></canvas>
</div>
</div>
<!-- 图表 (组合) -->
<div id="u6600" class="ax_default" data-label="图表" data-left="85" data-top="434" data-width="354" data-height="230">
<div id="u6701_div">
<canvas id="alarmChart" style="width: 100%; height: 100%;"></canvas>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6620" class="ax_default" data-left="642" data-top="145" data-width="637" data-height="97">
<!-- Unnamed (矩形) -->
<div id="u6621" class="ax_default _默认样式">
<img id="u6621_img" class="img " src="images/数据可视化大屏模板24/u6621.svg" />
<div id="u6621_text" class="text ">
<p style="font-size:20px;"><span
style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';text-decoration:none;color:#FFFFFF;">活跃预警</span>
</p>
<p style="font-size:36px;"><span
style="font-family:'DIN Alternate Bold', 'DIN Alternate Regular', 'DIN Alternate';text-decoration:none;color:#A0CFFF;">12</span>
</p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6622" class="ax_default _默认样式">
<img id="u6622_img" class="img " src="images/数据可视化大屏模板24/u6621.svg" />
<div id="u6622_text" class="text ">
<p style="font-size:20px;"><span
style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';text-decoration:none;color:#FFFFFF;">待处理工单</span>
</p>
<p style="font-size:36px;"><span
style="font-family:'DIN Alternate Bold', 'DIN Alternate Regular', 'DIN Alternate';text-decoration:none;color:#A0CFFF;">5</span>
</p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6623" class="ax_default _默认样式">
<img id="u6623_img" class="img " src="images/数据可视化大屏模板24/u6621.svg" />
<div id="u6623_text" class="text ">
<p style="font-size:20px;"><span
style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';text-decoration:none;color:#FFFFFF;">在线设备</span>
</p>
<p style="font-size:36px;"><span
style="font-family:'DIN Alternate Bold', 'DIN Alternate Regular', 'DIN Alternate';text-decoration:none;color:#A0CFFF;">14</span>
</p>
</div>
</div>
<div id="u6700" class="ax_default _默认样式">
<img id="u6700_img" class="img " src="images/数据可视化大屏模板24/u6621.svg" />
<div id="u6700_text" class="text ">
<p style="font-size:20px;"><span
style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';text-decoration:none;color:#FFFFFF;">在岗人员</span>
</p>
<p style="font-size:36px;"><span
style="font-family:'DIN Alternate Bold', 'DIN Alternate Regular', 'DIN Alternate';text-decoration:none;color:#A0CFFF;">21</span>
</p>
</div>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6624" class="ax_default" data-left="611" data-bottom="0" data-width="693" data-height="91">
<!-- Unnamed (组合) -->
<div id="u6625" class="ax_default" data-left="611" data-bottom="0" data-width="99" data-height="91"
onclick="location.href='workorder.html'">
<!-- Unnamed (矩形) -->
<div id="u6626" class="ax_default _默认样式">
<div id="u6626_div" class=""></div>
<div id="u6626_text" class="text ">
<p><span style="text-decoration:none;">工单管理</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6627" class="ax_default _默认样式">
<img id="u6627_img" class="img " src="images/数据可视化大屏模板24/u6627.svg" />
<div id="u6627_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (图片 ) -->
<div id="u6628" class="ax_default _默认样式">
<!-- <img id="u6628_img" class="img " src="images/数据可视化大屏模板20/u5338.png" /> -->
<img id="u6628_img" class="img " src="images/工单管理.png" />
<div id="u6628_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6629" class="ax_default" data-left="710" data-bottom="0" data-width="99" data-height="91"
onclick="location.href='device.html'">
<!-- Unnamed (矩形) -->
<div id="u6630" class="ax_default _默认样式">
<div id="u6630_div" class=""></div>
<div id="u6630_text" class="text ">
<p><span style="text-decoration:none;">设备管理</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6631" class="ax_default _默认样式">
<img id="u6631_img" class="img " src="images/数据可视化大屏模板24/u6627.svg" />
<div id="u6631_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (图片 ) -->
<div id="u6632" class="ax_default _默认样式">
<img id="u6632_img" class="img " src="images/数据可视化大屏模板20/u5347.png" />
<div id="u6632_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6633" class="ax_default" data-left="809" data-bottom="0" data-width="99" data-height="91"
onclick="location.href='patrol.html'">
<!-- Unnamed (矩形) -->
<div id="u6634" class="ax_default _默认样式">
<div id="u6634_div" class=""></div>
<div id="u6634_text" class="text ">
<p><span style="text-decoration:none;">巡检管理</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6635" class="ax_default _默认样式">
<img id="u6635_img" class="img " src="images/数据可视化大屏模板24/u6627.svg" />
<div id="u6635_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (图片 ) -->
<div id="u6636" class="ax_default _默认样式">
<img id="u6636_img" class="img " src="images/数据可视化大屏模板20/u5344.png" />
<div id="u6636_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6637" class="ax_default" data-left="908" data-bottom="0" data-width="99" data-height="91"
onclick="location.href='warning.html'">
<!-- Unnamed (矩形) -->
<div id="u6638" class="ax_default _默认样式">
<div id="u6638_div" class=""></div>
<div id="u6638_text" class="text ">
<p><span style="text-decoration:none;">预警管理</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6639" class="ax_default _默认样式">
<img id="u6639_img" class="img " src="images/数据可视化大屏模板24/u6627.svg" />
<div id="u6639_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (图片 ) -->
<div id="u6640" class="ax_default image">
<img id="u6640_img" class="img " src="images/数据可视化大屏模板24/u6640.png" />
<div id="u6640_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6641" class="ax_default" data-left="1007" data-bottom="0" data-width="99" data-height="91"
onclick="location.href='personnel.html'">
<!-- Unnamed (矩形) -->
<div id="u6642" class="ax_default _默认样式">
<div id="u6642_div" class=""></div>
<div id="u6642_text" class="text ">
<p><span style="text-decoration:none;">人员管理</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6643" class="ax_default _默认样式">
<img id="u6643_img" class="img " src="images/数据可视化大屏模板24/u6627.svg" />
<div id="u6643_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (图片 ) -->
<div id="u6644" class="ax_default _默认样式">
<img id="u6644_img" class="img " src="images/数据可视化大屏模板20/u5341.png" />
<div id="u6644_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6645" class="ax_default" data-left="1106" data-bottom="0" data-width="99" data-height="91"
onclick="location.href='transfer.html'">
<!-- Unnamed (矩形) -->
<div id="u6646" class="ax_default _默认样式">
<div id="u6646_div" class=""></div>
<div id="u6646_text" class="text ">
<p><span style="text-decoration:none;">垃圾转运管理</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6647" class="ax_default _默认样式">
<img id="u6647_img" class="img " src="images/数据可视化大屏模板24/u6627.svg" />
<div id="u6647_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (图片 ) -->
<div id="u6648" class="ax_default _默认样式">
<img id="u6648_img" class="img " src="images/数据可视化大屏模板24/u6644.png" />
<div id="u6648_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
<!-- Unnamed (组合) -->
<div id="u6649" class="ax_default" data-left="1205" data-bottom="0" data-width="99" data-height="91"
onclick="location.href='statistics.html'">
<!-- Unnamed (矩形) -->
<div id="u6650" class="ax_default _默认样式">
<div id="u6650_div" class=""></div>
<div id="u6650_text" class="text ">
<p><span style="text-decoration:none;">统计分析</span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u6651" class="ax_default _默认样式">
<img id="u6651_img" class="img " src="images/数据可视化大屏模板24/u6627.svg" />
<div id="u6651_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (图片 ) -->
<div id="u6652" class="ax_default image">
<img id="u6652_img" class="img " src="images/数据可视化大屏模板24/u6652.png" />
<div id="u6652_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
</div>
</div>
<script src="resources/scripts/axure/ios.js"></script>
</body>
</html>