|
@@ -13,11 +13,16 @@
|
|
|
|
|
|
|
|
<body>
|
|
<body>
|
|
|
<div class="positon">
|
|
<div class="positon">
|
|
|
|
|
+ <button class="back-btn" onclick="goBack()">← 返回</button>
|
|
|
底图:<select id="mapName">
|
|
底图:<select id="mapName">
|
|
|
</select>
|
|
</select>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="title-name">设备运行状态一览图</div>
|
|
<div class="title-name">设备运行状态一览图</div>
|
|
|
- <div class="title-icon"><span>正常设备</span><span>计划性维修设备</span><span>非计划性维修设备</span></div>
|
|
|
|
|
|
|
+ <div class="title-icon">
|
|
|
|
|
+ <label class="legend-item legend-normal"><input type="checkbox" id="filterNormal" checked> 正常设备</label>
|
|
|
|
|
+ <label class="legend-item legend-yellow"><input type="checkbox" id="filterPlanned" checked> 计划性维修设备</label>
|
|
|
|
|
+<!-- <label class="legend-item legend-red"><input type="checkbox" id="filterUnplanned" checked> 非计划性维修设备</label>-->
|
|
|
|
|
+ </div>
|
|
|
<div id="echart" class="echart"></div>
|
|
<div id="echart" class="echart"></div>
|
|
|
<div class="data">
|
|
<div class="data">
|
|
|
<div>
|
|
<div>
|
|
@@ -62,6 +67,24 @@
|
|
|
z-index: 1000;
|
|
z-index: 1000;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ .back-btn {
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ margin-right: 15px;
|
|
|
|
|
+ padding: 4px 14px;
|
|
|
|
|
+ background-color: #174FBF;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ vertical-align: middle;
|
|
|
|
|
+ transition: background-color 0.2s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .back-btn:hover {
|
|
|
|
|
+ background-color: #0f3d99;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
#mapName {
|
|
#mapName {
|
|
|
width: 120px;
|
|
width: 120px;
|
|
|
}
|
|
}
|
|
@@ -100,6 +123,53 @@
|
|
|
color: black;
|
|
color: black;
|
|
|
z-index: 10000;
|
|
z-index: 10000;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .title-icon {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 130px;
|
|
|
|
|
+ left: 30%;
|
|
|
|
|
+ z-index: 10000;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .title-icon label.legend-item {
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-right: 24px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ user-select: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .title-icon label.legend-item::before {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ width: 12px;
|
|
|
|
|
+ height: 12px;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ margin-right: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .title-icon label.legend-normal::before {
|
|
|
|
|
+ background-color: #174FBF;
|
|
|
|
|
+ box-shadow: 0 0 6px #174FBF;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .title-icon label.legend-yellow::before {
|
|
|
|
|
+ background-color: yellow;
|
|
|
|
|
+ box-shadow: 0 0 6px yellow;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .title-icon label.legend-red::before {
|
|
|
|
|
+ background-color: red;
|
|
|
|
|
+ box-shadow: 0 0 6px red;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .title-icon input[type="checkbox"] {
|
|
|
|
|
+ margin-right: 5px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ transform: scale(1.2);
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|
|
|
<script>
|
|
<script>
|
|
|
function getBase64(image) {
|
|
function getBase64(image) {
|
|
@@ -476,14 +546,40 @@
|
|
|
data.repairSbInfoListYellow[i].no])
|
|
data.repairSbInfoListYellow[i].no])
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ // 保存原始数据副本
|
|
|
|
|
+ option._originalData = {
|
|
|
|
|
+ normal: normalSbInfoList.slice(),
|
|
|
|
|
+ red: repairSbInfoListRed.slice(),
|
|
|
|
|
+ yellow: repairSbInfoListYellow.slice()
|
|
|
|
|
+ };
|
|
|
option.series[0].data = normalSbInfoList;// 正常数据:
|
|
option.series[0].data = normalSbInfoList;// 正常数据:
|
|
|
option.series[1].data = normalSbInfoList;// 正常数据的编号
|
|
option.series[1].data = normalSbInfoList;// 正常数据的编号
|
|
|
option.series[2].data = repairSbInfoListRed;// 非计划性报修 红色编号
|
|
option.series[2].data = repairSbInfoListRed;// 非计划性报修 红色编号
|
|
|
option.series[3].data = repairSbInfoListRed;// 非计划性报修 红色
|
|
option.series[3].data = repairSbInfoListRed;// 非计划性报修 红色
|
|
|
option.series[4].data = repairSbInfoListYellow;// 计划性报修 黃色编号
|
|
option.series[4].data = repairSbInfoListYellow;// 计划性报修 黃色编号
|
|
|
option.series[5].data = repairSbInfoListYellow;// 计划性报修 黃色
|
|
option.series[5].data = repairSbInfoListYellow;// 计划性报修 黃色
|
|
|
- myChart.setOption(option, true)
|
|
|
|
|
|
|
+ applyFilter();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function applyFilter() {
|
|
|
|
|
+ const showNormal = $('#filterNormal').is(':checked');
|
|
|
|
|
+ const showPlanned = $('#filterPlanned').is(':checked');
|
|
|
|
|
+ const showUnplanned = $('#filterUnplanned').is(':checked');
|
|
|
|
|
+ const orig = option._originalData || { normal: [], red: [], yellow: [] };
|
|
|
|
|
+
|
|
|
|
|
+ option.series[0].data = showNormal ? orig.normal : [];
|
|
|
|
|
+ option.series[1].data = showNormal ? orig.normal : [];
|
|
|
|
|
+ option.series[2].data = showUnplanned ? orig.red : [];
|
|
|
|
|
+ option.series[3].data = showUnplanned ? orig.red : [];
|
|
|
|
|
+ option.series[4].data = showPlanned ? orig.yellow : [];
|
|
|
|
|
+ option.series[5].data = showPlanned ? orig.yellow : [];
|
|
|
|
|
+
|
|
|
|
|
+ myChart.setOption(option, true);
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ $('#filterNormal, #filterPlanned, #filterUnplanned').on('change', function () {
|
|
|
|
|
+ applyFilter();
|
|
|
|
|
+ });
|
|
|
function getHeader() {
|
|
function getHeader() {
|
|
|
return {
|
|
return {
|
|
|
Authorization: getToken(),
|
|
Authorization: getToken(),
|
|
@@ -501,6 +597,30 @@
|
|
|
return 'Bearer ' + storeTokenJson.value
|
|
return 'Bearer ' + storeTokenJson.value
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ function goBack() {
|
|
|
|
|
+ // 优先尝试让父级 Vue 路由跳转到首页
|
|
|
|
|
+ try {
|
|
|
|
|
+ if (window.parent && window.parent !== window) {
|
|
|
|
|
+ // 通知父级 Vue 跳转首页
|
|
|
|
|
+ window.parent.postMessage({ action: 'navigateHome' }, '*')
|
|
|
|
|
+ // 作为兜底:让父级回退
|
|
|
|
|
+ setTimeout(function () {
|
|
|
|
|
+ if (window.parent.history.length > 1) {
|
|
|
|
|
+ window.parent.history.back()
|
|
|
|
|
+ }
|
|
|
|
|
+ }, 100)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ if (window.history.length > 1) {
|
|
|
|
|
+ window.history.back()
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ if (window.history.length > 1) {
|
|
|
|
|
+ window.history.back()
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
(function () {
|
|
(function () {
|
|
|
console.log("滚动")
|
|
console.log("滚动")
|
|
|
$('.scrollDiv').liMarquee({
|
|
$('.scrollDiv').liMarquee({
|