diff --git a/src/app/pages/home-page/home-page.component.scss b/src/app/pages/home-page/home-page.component.scss
index 5b85e5f..0a93e86 100644
--- a/src/app/pages/home-page/home-page.component.scss
+++ b/src/app/pages/home-page/home-page.component.scss
@@ -572,8 +572,8 @@
.oilNum {
position: absolute;
- left: 6%;
- bottom: 15px;
+ left: 4%;
+ bottom: 22px;
display: flex;
flex-direction: column;
@@ -582,15 +582,17 @@
align-items: center;
justify-content: space-between;
color: white;
- font-size: 12px;
+ font-size: 13px;
span {
margin: 0 4px;
}
- .pointbox{
+
+ .pointbox {
display: flex;
align-items: center;
}
+
.point {
width: 6px;
height: 6px;
diff --git a/src/app/pages/home-page/home-page.component.ts b/src/app/pages/home-page/home-page.component.ts
index 2494f58..4f5a998 100644
--- a/src/app/pages/home-page/home-page.component.ts
+++ b/src/app/pages/home-page/home-page.component.ts
@@ -132,7 +132,7 @@ export class HomePageComponent implements OnInit {
},
series: [
{
- data: [],
+ data: [4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000,],
type: 'bar',
itemStyle: {
color: {
@@ -152,12 +152,26 @@ export class HomePageComponent implements OnInit {
barWidth: '35%'
},
{
- data: [],
+ data: [4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000,],
type: 'line',
symbol: 'circle',
symbolSize: 5,
label: {
- show: true
+ normal: {
+ show: true,
+ // formatter: function (dataObj) {
+ // const { dataIndex, value } = dataObj;
+ // let labelText = value;
+
+ // labelText = '';
+ // if (dataIndex % 2 === 0) { // 每隔三个x坐标显示一个
+ // labelText = value;
+ // }
+
+ // return `${labelText}`
+ // }
+ }
+
},
itemStyle: {
color: '#fff',
@@ -171,7 +185,7 @@ export class HomePageComponent implements OnInit {
}
],
grid: {
- left: '18px',
+ left: '40px',
right: '30px',
bottom: '38px',
top: '30px'
@@ -341,7 +355,7 @@ export class HomePageComponent implements OnInit {
// itemHeight: 8,
// },
grid: {
- left: '36px',
+ left: '40px',
right: '30px',
bottom: '38px',
top: '66px'
From a0c62d77cf71cc388f034ab6c3d9ca6660508f63 Mon Sep 17 00:00:00 2001
From: cpf <1105965053@qq.com>
Date: Fri, 17 Dec 2021 09:10:40 +0800
Subject: [PATCH 05/12] =?UTF-8?q?=E5=AD=97=E6=AE=B5=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app/pages/init3D.guard.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/app/pages/init3D.guard.ts b/src/app/pages/init3D.guard.ts
index 7aaf270..e325730 100644
--- a/src/app/pages/init3D.guard.ts
+++ b/src/app/pages/init3D.guard.ts
@@ -25,7 +25,7 @@ export class init3DGuard implements CanActivate {
if (userdata.userName == 'superadmin' || res.hasBuildingInfo) {
return true
} else {
- this.message.info("当前站点没有数字油站!");
+ this.message.info("当前油站未开通!");
return false
}
});
From 39365f964983538d0cde579c16f3824460a3ab2d Mon Sep 17 00:00:00 2001
From: SHAOJIAHAO <55341701@qq.com>
Date: Fri, 17 Dec 2021 09:22:14 +0800
Subject: [PATCH 06/12] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E6=A0=B9=E6=8D=AE?=
=?UTF-8?q?=E8=A6=81=E6=B1=82=E4=BF=AE=E6=94=B9ui=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app/pages/home-page/home-page.component.ts | 4 ++--
src/app/system-management/user/user.component.html | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/app/pages/home-page/home-page.component.ts b/src/app/pages/home-page/home-page.component.ts
index 4f5a998..eae4f74 100644
--- a/src/app/pages/home-page/home-page.component.ts
+++ b/src/app/pages/home-page/home-page.component.ts
@@ -23,7 +23,7 @@ export class HomePageComponent implements OnInit {
},
legend: {
top: '5%',
- left: '20%',
+ left: '25.5%',
itemGap: 8,
itemWidth: 6,
itemHeight: 6,
@@ -199,7 +199,7 @@ export class HomePageComponent implements OnInit {
},
legend: {
top: '5%',
- left: '20%',
+ left: '25%',
itemGap: 8,
itemWidth: 6,
itemHeight: 6,
diff --git a/src/app/system-management/user/user.component.html b/src/app/system-management/user/user.component.html
index ff7193e..15d33b8 100644
--- a/src/app/system-management/user/user.component.html
+++ b/src/app/system-management/user/user.component.html
@@ -37,7 +37,7 @@
{{ data.userName }} |
{{ data.name }} |
- {{item}}
+ {{item}}
|
- 事件排名
+ 近30天事件排名
- 油站排名
+ 近30天油站排名
@@ -168,7 +168,7 @@
@@ -204,11 +204,11 @@
- 预警事件统计
+ 近30天预警事件统计
diff --git a/src/app/pages/home-page/home-page.component.scss b/src/app/pages/home-page/home-page.component.scss
index 0a93e86..3908710 100644
--- a/src/app/pages/home-page/home-page.component.scss
+++ b/src/app/pages/home-page/home-page.component.scss
@@ -582,7 +582,7 @@
align-items: center;
justify-content: space-between;
color: white;
- font-size: 13px;
+ font-size: 14px;
span {
margin: 0 4px;
diff --git a/src/app/pages/home-page/home-page.component.ts b/src/app/pages/home-page/home-page.component.ts
index 902e79a..09251e4 100644
--- a/src/app/pages/home-page/home-page.component.ts
+++ b/src/app/pages/home-page/home-page.component.ts
@@ -6,6 +6,8 @@ import * as moment from 'moment';
import { NzModalService } from 'ng-zorro-antd/modal';
import { GetOutOfLineDetailsComponent } from '../today-warning/get-out-of-line-details/get-out-of-line-details.component';
import { NzMessageService } from 'ng-zorro-antd/message';
+
+declare var tools
@Component({
selector: 'app-home-page',
templateUrl: './home-page.component.html',
@@ -238,7 +240,7 @@ export class HomePageComponent implements OnInit {
active: {
fontSize: document.documentElement.clientHeight < 750 ? 12 : 14,
color: '#fff',
- fontFamily: 'Microsoft YaHei',
+ // fontFamily: 'Microsoft YaHei',
},
}
},
@@ -414,6 +416,10 @@ export class HomePageComponent implements OnInit {
// this.getAggregations()
+ setTimeout(() => {
+ this.getHomeAggregation()
+ }, 10 * 6000);
+
}
//获得所有未读消息
@@ -489,6 +495,8 @@ export class HomePageComponent implements OnInit {
}
//预警图表
equipmentechartdata
+ tools1
+ tools2
eventEcharts(data) {
data.violationType.violationTypeAgg.forEach(element => {
// num += element.count
@@ -496,9 +504,16 @@ export class HomePageComponent implements OnInit {
element.value = element.count
});
this.warningechartpieOption.series[0].data = data.violationType.violationTypeAgg;
- this.warningechartpieOption.series[0].label.normal.formatter = '{total|' + data.recordCount + '}' + '\n\r' + '{active|总数}'
+ this.warningechartpieOption.series[0].label.normal.formatter = '{total|' + data.recordCount + '}' + '\n\r' + '{active|预警事件}'
this.warningechartpie.setOption(this.warningechartpieOption);
+ // 可调用clearLoop方法,清除定时器
+ this.tools1 && this.tools1.clearLoop();
+ this.tools1 = null;
+ this.tools1 = tools.loopShowTooltip(this.warningechartpie, this.warningechartpieOption, {
+ interval: 5000,
+ loopSeries: true
+ });
let monthArr = []
let valuedata = []
@@ -542,10 +557,17 @@ export class HomePageComponent implements OnInit {
element.value = element.count
});
this.oilchartpieOptionPieData1 = data.ouViolationType.ouViolationTypeAgg
- this.oilchartpieOption.series[0].label.normal.formatter = '{total|' + data.ouRecordCount + '}' + '\n\r' + '{active|总数}'
+ this.oilchartpieOption.series[0].label.normal.formatter = '{total|' + data.ouRecordCount + '}' + '\n\r' + '{active|卸油预警}'
this.oilchartpieOption.series[0].data = this.oilchartpieOptionPieData1
this.oilchartpie.setOption(this.oilchartpieOption);
+ // 可调用clearLoop方法,清除定时器
+ this.tools2 && this.tools2.clearLoop();
+ this.tools2 = null;
+ this.tools2 = tools.loopShowTooltip(this.oilchartpie, this.oilchartpieOption, {
+ interval: 5000,
+ loopSeries: true
+ });
//柱状图
let monthArr = []
let valuedata = []
diff --git a/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.html b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.html
index 76e4882..b44e4dd 100644
--- a/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.html
+++ b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.html
@@ -83,7 +83,7 @@
-->
-
+
@@ -115,10 +115,13 @@
公司名称
-
+
+ 区域
+
+
卸油开始时间
-
+
卸油结束时间
@@ -147,10 +150,13 @@
{{item.gasStation.companyName}}
-
+
+ {{item.gasStation.locationName}}
+
+
{{item.startTime ? (item.startTime | date:"yyyy-MM-dd HH:mm:ss") : '/'}}
-
+
{{item.endTime ? (item.endTime | date:"yyyy-MM-dd HH:mm:ss") : '/'}}
diff --git a/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss
index 6ee4fb0..83fc3a7 100644
--- a/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss
+++ b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss
@@ -16,7 +16,7 @@
width: 100%;
height: 32px;
display: flex;
- justify-content: space-around;
+ justify-content: flex-start;
.searchParams,
.btn {
@@ -24,11 +24,15 @@
}
.searchParams {
- flex: 10;
+ // flex: 10;
+ width: 150px;
+
+ }
+ .searchParams2{
+ width: 220px;
}
-
.btn {
- flex: 1;
+ // flex: 1;
}
nz-select {
diff --git a/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts
index cab2ed9..cb20acd 100644
--- a/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts
+++ b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts
@@ -593,7 +593,7 @@ export class OilUnloadingProcessListComponent implements OnInit {
this.list = [...this.list]
// console.log('xxx',this.list)
this.totalCount = data.result.totalCount
- // console.log('获取卸油流程列表', data.result.items)
+ console.log('获取卸油流程列表', data.result.items)
// this.getAggregations()
})
}
diff --git a/src/app/pages/plan-admin/plan-admin.component.ts b/src/app/pages/plan-admin/plan-admin.component.ts
index d421079..6c4445c 100644
--- a/src/app/pages/plan-admin/plan-admin.component.ts
+++ b/src/app/pages/plan-admin/plan-admin.component.ts
@@ -38,7 +38,8 @@ export class PlanAdminComponent implements OnInit {
OrganizationUnitId: String(this.OrganizationUnitId),
IsContainsChildren: 'true',
SkipCount: this.SkipCount,
- MaxResultCount: this.MaxResultCount
+ MaxResultCount: this.MaxResultCount,
+ Sorting:' BuildingBasicInfo.Id asc'
}
await new Promise((resolve, reject) => {
this.http.get('/api/services/app/GasStation/GetAll', {
@@ -65,7 +66,9 @@ export class PlanAdminComponent implements OnInit {
OrganizationUnitId: String(this.OrganizationUnitId),
IsContainsChildren: 'true',
SkipCount: '0',
- MaxResultCount: this.MaxResultCount
+ MaxResultCount: this.MaxResultCount,
+ Sorting:' BuildingBasicInfo.Id asc'
+
}
this.http.get('/api/services/app/GasStation/GetAll', {
params: params
@@ -85,7 +88,8 @@ export class PlanAdminComponent implements OnInit {
OrganizationUnitId: String(this.OrganizationUnitId),
IsContainsChildren: 'true',
SkipCount: '0',
- MaxResultCount: this.MaxResultCount
+ MaxResultCount: this.MaxResultCount,
+ Sorting:' BuildingBasicInfo.Id asc'
}
this.http.get('/api/services/app/GasStation/GetAll', {
params: params
@@ -118,12 +122,16 @@ export class PlanAdminComponent implements OnInit {
const element = data.result.items[index];
element.key = element.id
element.title = element.displayName
+ // if(element.parentId == OrganizationUnitId){
+ // element.isLeaf = true
+ // }
}
-
+ console.log('组织机构', data.result.items)
this.nodes = [...this.toTree.toTree(data.result.items)]
+ this.nzExpandedKeys = [OrganizationUnitId]
this.nzSelectedKeys = [OrganizationUnitId]
this.OrganizationUnitId = OrganizationUnitId
- this.nzExpandAll = true
+ // this.nzExpandAll = true
this.getGasStation()
})
}
@@ -172,7 +180,7 @@ export class PlanAdminComponent implements OnInit {
IsContainsChildren: 'true',
SkipCount: this.SkipCount,
MaxResultCount: this.MaxResultCount,
- // Sorting:'hasBuildingInfo'
+ Sorting:' BuildingBasicInfo.Id asc'
}
await new Promise((resolve, reject) => {
this.http.get('/api/services/app/GasStation/GetAll', {
diff --git a/src/app/pages/today-warning-admin/today-warning-admin.component.scss b/src/app/pages/today-warning-admin/today-warning-admin.component.scss
index 473dd55..c508376 100644
--- a/src/app/pages/today-warning-admin/today-warning-admin.component.scss
+++ b/src/app/pages/today-warning-admin/today-warning-admin.component.scss
@@ -54,7 +54,7 @@
width: 100%;
height: 32px;
display: flex;
- justify-content: space-around;
+ justify-content: flex-start;
.searchParams,
.btn {
@@ -62,12 +62,12 @@
}
.searchParams {
- flex: 3;
- // max-width: 100px;
+ // flex: 3;
+ width: 150px;
}
.btn {
- flex: 1;
+ // flex: 1;
}
nz-select {
diff --git a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
index 7c68539..fe01efd 100644
--- a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
+++ b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
@@ -5,42 +5,41 @@
预警截图
-
+
+ 预警详情:{{details}}
+
-
- {{details}}
-
-
- ![]()
-
+
-
+
+
+ 处置内容
+ 提交
+ 已处置
-
-
- 处置内容
- 已处置
-
-
- {{content}}
-
+
+
+ {{content}}
+
+
+
+ 处置人:{{data.handleUsername}}
+
+
+ 处置时间:{{data.handleTime|date:"yyyy-MM-dd HH:mm:ss"}}
+
-
\ No newline at end of file
diff --git a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
index c89cc5d..9aa63d7 100644
--- a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
+++ b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
@@ -1,7 +1,7 @@
.box {
width: 100%;
height: 715px;
- overflow-y: auto;
+ // overflow-y: auto;
color: #fff;
display: flex;
flex-direction: column;
@@ -54,111 +54,87 @@
}
}
-.ant-modal-close {
- color: #fff;
+.details {
+ width: 100%;
+ height: 45px;
+ line-height: 45px;
+ box-sizing: border-box;
+ padding: 0 12px;
}
.content {
flex: 1;
- box-sizing: border-box;
- padding: 12px;
overflow: hidden;
- display: flex;
- flex-direction: column;
- overflow-y: auto;
- .details {
- margin-bottom: 12px;
- }
- .disposebox {
+ .imgbox {
+ width: 100%;
+ height: 100%;
display: flex;
- flex-direction: column;
- height: 72px;
- margin-bottom: 25px;
- .title {
- display: flex;
- justify-content: space-between;
- margin-bottom: 12px;
-
- }
-
- .textarea {
- height: 60px;
-
- textarea {
- color: #C4E2FC;
- border: 1px solid #91CCFF;
- background-color: #172c45;
- }
+ align-items: center;
+ justify-content: center;
+ img {
+ max-width: 100%;
+ max-height: 100%;
}
}
- .disposebox2{
- height: 40px;
- }
- .imgbox {
- flex: 1;
+
+ .vediobox {
+ width: 100%;
+ height: 100%;
display: flex;
align-items: center;
- width: 100%;
-
- .imglist {
- display: flex;
- flex-direction: column;
- width: 196px;
- height: 100%;
- overflow-y: auto;
- box-sizing: border-box;
- padding-right: 12px;
- border-right: 1px solid rgba(145, 204, 255, 0.3);
-
- .imglisttitle {
- font-size: 16px;
- font-family: sybold;
- margin-bottom: 16px;
- }
-
- .img {
- width: 178px;
- height: 108px;
- margin-bottom: 8px;
+ justify-content: center;
- img {
- width: 100%;
- height: 100%;
- cursor: pointer;
- }
- }
+ video {
+ max-width: 100%;
+ max-height: 100%;
}
+ }
+}
- .bigimg {
- // min-width: 1149px;
- flex: 1;
- box-sizing: border-box;
- padding-left: 13px;
- display: flex;
- justify-content: center;
- max-height: 500px;
-
- img {
- max-width: 100%;
- max-height: 100%;
- }
- }
+.disposebox {
+ width: 100%;
+ height: 95px;
+ box-sizing: border-box;
+ padding: 5px 12px;
+ display: flex;
+ flex-direction: column;
+
+ .title {
+ display: flex;
+ justify-content: space-between;
}
- .vediobox {
- flex: 1;
- width: 100%;
+ .disposeContent {
display: flex;
align-items: center;
- video{
- max-height: 500px;
+ textarea {
+ width: 100%;
+ height: 40px;
+ color: #C4E2FC;
+ border: 1px solid #91CCFF;
+ background-color: #172c45;
+ }
+ span{
+ display: inline-block;
+ width: 100%;
+ height: 40px;
+ line-height: 40px;
}
}
+
+ .disposeTime {}
+
+}
+
+.ant-modal-close {
+ color: #fff;
}
+
+
// 适配125%
@media screen and (max-height: 750px) {
.box {
@@ -239,4 +215,4 @@
::-webkit-scrollbar-track {
background-color: #061d3c;
-}
\ No newline at end of file
+}
diff --git a/src/app/pages/today-warning/today-warning.component.html b/src/app/pages/today-warning/today-warning.component.html
index 0a26e89..244f83e 100644
--- a/src/app/pages/today-warning/today-warning.component.html
+++ b/src/app/pages/today-warning/today-warning.component.html
@@ -75,7 +75,6 @@
-
diff --git a/src/app/pages/today-warning/today-warning.component.scss b/src/app/pages/today-warning/today-warning.component.scss
index fb6333f..0977630 100644
--- a/src/app/pages/today-warning/today-warning.component.scss
+++ b/src/app/pages/today-warning/today-warning.component.scss
@@ -54,7 +54,7 @@
width: 100%;
height: 32px;
display: flex;
- justify-content: space-around;
+ justify-content: flex-start;
.searchParams,
.btn {
@@ -62,11 +62,12 @@
}
.searchParams {
- flex: 2.9;
+ // flex: 2.9;
+ width: 150px;
}
.btn {
- flex: 1;
+ // flex: 1;
}
nz-select {
diff --git a/src/assets/js/echarts-tooltip-carousel.js b/src/assets/js/echarts-tooltip-carousel.js
new file mode 100644
index 0000000..17dd997
--- /dev/null
+++ b/src/assets/js/echarts-tooltip-carousel.js
@@ -0,0 +1,229 @@
+/**
+ * Created by chengwb on 2016/9/3.
+ */
+(function (global) {
+ global.tools = global.tools || {};
+
+ /**
+ * echarts tooltip轮播
+ * @param chart ECharts实例
+ * @param chartOption echarts的配置信息
+ * @param options object 选项
+ * {
+ * interval 轮播时间间隔,单位毫秒,默认为2000
+ * loopSeries boolean类型,默认为false。
+ * true表示循环所有series的tooltip,false则显示指定seriesIndex的tooltip
+ * seriesIndex 默认为0,指定某个系列(option中的series索引)循环显示tooltip,
+ * 当loopSeries为true时,从seriesIndex系列开始执行。
+ * updateData 自定义更新数据的函数,默认为null;
+ * 用于类似于分页的效果,比如总数据有20条,chart一次只显示5条,全部数据可以分4次显示。
+ * }
+ * @returns {{clearLoop: clearLoop}}
+ */
+ tools.loopShowTooltip = function (chart, chartOption, options) {
+ let defaultOptions = {
+ interval: 2000,
+ loopSeries: false,
+ seriesIndex: 0,
+ updateData: null
+ };
+
+ if (!chart || !chartOption) {
+ return;
+ }
+
+ let dataIndex = 0; // 数据索引,初始化为-1,是为了判断是否是第一次执行
+ let seriesIndex = 0; // 系列索引
+ let timeTicket = 0;
+ let seriesLen = chartOption.series.length; // 系列个数
+ let dataLen = 0; // 某个系列数据个数
+ let chartType; // 系列类型
+ let first = true;
+ let lastShowSeriesIndex = 0;
+ let lastShowDataIndex = 0;
+ if (seriesLen === 0) {
+ return;
+ }
+
+ //待处理列表
+ //不循环series时seriesIndex指定显示tooltip的系列,不指定默认为0,指定多个则默认为第一个
+ //循环series时seriesIndex指定循环的series,不指定则从0开始循环所有series,指定单个则相当于不循环,指定多个
+ //要不要添加开始series索引和开始的data索引?
+
+ if (options) {
+ options.interval = options.interval || defaultOptions.interval;
+ options.loopSeries = options.loopSeries || defaultOptions.loopSeries;
+ options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;
+ options.updateData = options.updateData || defaultOptions.updateData;
+ } else {
+ options = defaultOptions;
+ }
+
+ //如果设置的seriesIndex无效,则默认为0
+ if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {
+ seriesIndex = 0;
+ } else {
+ seriesIndex = options.seriesIndex;
+ }
+
+ /**
+ * 清除定时器
+ */
+ function clearLoop() {
+ if (timeTicket) {
+ clearInterval(timeTicket);
+ timeTicket = 0;
+ }
+ chart.off('mousemove', stopAutoShow);
+ zRender.off('mousemove', zRenderMouseMove);
+ zRender.off('globalout', zRenderGlobalOut);
+ }
+
+ /**
+ * 取消高亮
+ */
+ function cancelHighlight() {
+ /**
+ * 如果dataIndex为0表示上次系列完成显示,如果是循环系列,且系列索引为0则上次是seriesLen-1,否则为seriesIndex-1;
+ * 如果不是循环系列,则就是当前系列;
+ * 如果dataIndex>0则就是当前系列。
+ */
+ let tempSeriesIndex = dataIndex === 0 ?
+ (options.loopSeries ?
+ (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) :
+ seriesIndex) :
+ seriesIndex;
+ let tempType = chartOption.series[tempSeriesIndex].type;
+
+ if (tempType === 'pie' || tempType === 'radar') {
+ chart.dispatchAction({
+ type: 'downplay',
+ seriesIndex: lastShowSeriesIndex,
+ dataIndex: lastShowDataIndex
+ }); //wait 系列序号为0且循环系列,则要判断上次的系列类型是否是pie、radar
+ }
+ }
+
+ /**
+ * 自动轮播tooltip
+ */
+ function autoShowTip() {
+ let invalidSeries = 0;
+ let invalidData = 0;
+
+ function showTip() {
+ //判断是否更新数据
+ if (dataIndex === 0 && !first && typeof options.updateData === "function") {
+ options.updateData();
+ chart.setOption(chartOption);
+ }
+
+ let series = chartOption.series;
+ let currSeries = series[seriesIndex];
+ if (!series || series.length === 0 ||
+ !currSeries || !currSeries.type || !currSeries.data ||
+ !currSeries.data.length) {
+ return;
+ }
+ chartType = currSeries.type; // 系列类型
+ dataLen = currSeries.data.length; // 某个系列的数据个数
+
+ let tipParams = {
+ seriesIndex: seriesIndex
+ };
+ switch (chartType) {
+ case 'pie':
+ case 'map':
+ case 'chord':
+ tipParams.name = currSeries.data[dataIndex].name;
+ break;
+ case 'radar': // 雷达图
+ tipParams.seriesIndex = seriesIndex;
+ tipParams.dataIndex = dataIndex;
+ break;
+ default:
+ tipParams.dataIndex = dataIndex;
+ break;
+ }
+
+ if (chartType === 'pie' || chartType === 'radar') {
+ if (!first) {
+ cancelHighlight();
+ }
+
+ // 高亮当前图形
+ chart.dispatchAction({
+ type: 'highlight',
+ seriesIndex: seriesIndex,
+ dataIndex: dataIndex
+ });
+ }
+
+ // 显示 tooltip
+ tipParams.type = 'showTip';
+
+ // 防止updateData时先处理tooltip后刷新数据导出tooltip显示不正确
+ setTimeout(() => {
+ chart.dispatchAction(tipParams);
+ }, 0);
+
+ lastShowSeriesIndex = seriesIndex;
+ lastShowDataIndex = dataIndex;
+ dataIndex = (dataIndex + 1) % dataLen;
+ if (options.loopSeries && dataIndex === 0) { // 数据索引归0表示当前系列数据已经循环完
+ invalidData = 0;
+ seriesIndex = (seriesIndex + 1) % seriesLen;
+ if (seriesIndex === options.seriesIndex) {
+ invalidSeries = 0;
+ }
+ }
+
+ first = false;
+ }
+
+ showTip();
+ timeTicket = setInterval(showTip, options.interval);
+ }
+
+ // 关闭轮播
+ function stopAutoShow() {
+ if (timeTicket) {
+ clearInterval(timeTicket);
+ timeTicket = 0;
+
+ if (chartType === 'pie' || chartType === 'radar') {
+ cancelHighlight();
+ }
+ }
+ }
+
+ let zRender = chart.getZr();
+
+ function zRenderMouseMove(param) {
+ if (param.event) {
+ //阻止canvas上的鼠标移动事件冒泡
+ param.event.cancelBubble = true;
+ }
+
+ stopAutoShow();
+ }
+
+ // 离开echarts图时恢复自动轮播
+ function zRenderGlobalOut() {
+ if (!timeTicket) {
+ autoShowTip();
+ }
+ }
+
+ // 鼠标在echarts图上时停止轮播
+ chart.on('mousemove', stopAutoShow);
+ zRender.on('mousemove', zRenderMouseMove);
+ zRender.on('globalout', zRenderGlobalOut);
+
+ autoShowTip();
+
+ return {
+ clearLoop: clearLoop
+ };
+ };
+})(window);
diff --git a/src/index.html b/src/index.html
index 15e4416..cda1af7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,4 +11,5 @@
|