|
|
|
|
|
<!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/marker-icon-sxt.png',
|
|
|
|
|
|
scale: 0.5,
|
|
|
|
|
|
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/marker-icon-sxt-right.png',
|
|
|
|
|
|
scale: 0.5,
|
|
|
|
|
|
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);
|
|
|
|
|
|
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;">晴转多云 优</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;">垃圾转运管理
|
|
|
|
|
|
</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;">水质监测情况
|
|
|
|
|
|
</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;">水位及流量监测
|
|
|
|
|
|
</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;">水质达标情况
|
|
|
|
|
|
</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>
|
