data() {
return {
pickerOptions: {
shortcuts: [
{
text: “最近4小时”,
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 4);
picker.$emit(“pick”, [start, end]);
},
},
{
text: “最近12小时”,
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 12);
picker.$emit(“pick”, [start, end]);
},
},
{
text: “最近1天”,
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24);
picker.$emit(“pick”, [start, end]);
},
},
{
text: “最近7天”,
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit(“pick”, [start, end]);
},
},
],
},
queryParams: {
dateRange: “”,
}, // 查询表单
showAll: false,
// 日期范围
dateRange: [],
detailData: [
// {
// deviceTime: “2022-90-89”,
// doserate: “12.9”,
// },
// {
// deviceTime: “2022-90-89”,
// doserate: “12.9”,
// },
// {
// deviceTime: “2022-90-89”,
// doserate: “12.9”,
// },
// {
// deviceTime: “2022-90-89”,
// doserate: “12.9”,
// },
// {
// deviceTime: “2022-90-89”,
// doserate: “12.9”,
// },
// {
// deviceTime: “2022-90-89”,
// doserate: “12.9”,
// },
// {
// deviceTime: “2022-90-89”,
// doserate: “12.9”,
// },
// {
// deviceTime: “2022-90-89”,
// doserate: “12.9”,
// },
// {
// deviceTime: “2022-90-89”,
// doserate: “12.9”,
// },
// {
// deviceTime: “2022-90-89”,
// doserate: “12.9”,
// },
// {
// deviceTime: “2022-90-89”,
// doserate: “12.9”,
// },
// {
// deviceTime: “2022-90-89”,
// doserate: “12.9”,
// },
],
detailData2: [],
tableData: [
{
stationName: “yueyqie”,
sysName: “89”,
},
{
stationName: “yueyqie”,
sysName: “89”,
},
{
stationName: “yueyqie”,
sysName: “89”,
},
{
stationName: “yueyqie”,
sysName: “89”,
},
{
stationName: “yueyqie”,
sysName: “89”,
},
{
stationName: “yueyqie”,
sysName: “89”,
},
{
stationName: “yueyqie”,
sysName: “89”,
},
{
stationName: “yueyqie”,
sysName: “89”,
},
{
stationName: “yueyqie”,
sysName: “89”,
},
],
chartData: [],
chartData2: [],
// 其他信息
dataAvg: “”,
dateMax: “”, // 分之十克
dataMax: “”, // 平均值
dataMin: “”, // 最小值
dataNumber: “”, //
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
},
status: “”,
name: “”,
levelOne: “”,
levelTwo: “”,
myChart: null,
temprow: null,
};
},
mounted() {
// this.getChartsDataFlag();
// 获取详情页的列表数据
this.init();
this.getAllList();
// 获取某一GM管设备历史数据的其他信息
// this.getOtherInfo();
// 绘制图形
// this.drawChart();
},
methods: {
init() {
this.status = this.$route.query.status;
this.name = this. r o u t e . q u e r y . n a m e + t h i s . route.query.name + this. route.query.name+this.route.query.sys;
// 一级阈值and二级阈值
this.levelOne = this.$route.query.level1;
this.levelTwo = this.$route.query.level2;
console.log(“level1:”, this.levelOne, “level2:”, this.levelTwo);
const end1 = new Date();
const start1 = new Date();
start1.setTime(start1.getTime() - 3600 * 1000 * 4);
this.dateRange = [start1, end1];
},
getAllList() {
// 时间范围大于一天,显示表格形式
var begin = new Date(this.dateRange[0]).getTime();
var end = new Date(this.dateRange[1]).getTime();
var diff = Math.floor((end - begin) / 86400 / 1000);
if (diff > 7) {
this.showAll = true;
// 获取分页的数据
this.getDataList();
} else {
this.showAll = false;
// 获取不分页数据
this.getNoDataList();
}
this.getOtherInfo();
// this.drawChart();
// if (!this.showAll) {
// this.$nextTick(() => {
// console.log(“herer”);
// this.drawChart();
// });
// }
// this.changeChart();
},
// 获取不分页的数据
getNoDataList() {
const params = {
sysId: this.$route.query.id,
beginTime: this.parseTime(this.dateRange[0]),
endTime: this.parseTime(this.dateRange[1]),
};
// debugger;
gmHistoryDataList(params).then((res) => {
console.log(res, “获取不分页数据”);
if (res.code == 200 && res.data != null) {
this.detailData = res.data;
// 拼接图标数组-先置空再push
this.chartData = [];
this.chartData2 = [];
res.data.forEach((item, index, array) => {
this.chartData.push(item.deviceTime);
this.chartData2.push(item.doserate);
});
console.log(this.chartData, this.chartData2, “chartdata==”);
this.drawChart();
} else {
this.detailData = [];
this.chartData = [];
this.chartData2 = [];
console.log(this.chartData, this.chartData2, “chartdata==”);
this.drawChart();
}
});
},
getDataList() {
const params = {
sysId: this.$route.query.id,
beginTime: this.parseTime(this.dateRange[0]),
endTime: this.parseTime(this.dateRange[1]),
…this.queryParams,
};
gmHistoryDataListPage(params).then((res) => {
if (res.code == 200) {
this.detailData2 = res.rows;
this.total = res.total;
}
});
},
getOtherInfo() {
const params = {
sysId: this.$route.query.id,
beginTime: this.parseTime(this.dateRange[0]),
endTime: this.parseTime(this.dateRange[1]),
};
gmHistoryDataInfo(params).then((res) => {
if (res.code == 200) {
console.log(res, “获取其他数据”);
this.dataAvg = res.dataAvg;
this.dateMax = this.parseTime(
new Date(res.dateMax),
“{y}-{m}-{d} {h}:{i}:{s}”
); //
this.dataMax = res.dataMax;
this.dataMin = res.dataMin;
this.dataNumber = res.dataNumber;
}
});
},
drawChart() {
console.log(“drawchart”, this.chartData, this.chartData2);
var that = this;
var chartDom = document.getElementById(“chart”);
var myChart = this.$echarts.init(chartDom);
this.myChart = myChart;
const levelOne = parseInt(this.levelOne);
const levelTwo = parseInt(this.levelTwo);
// var data = [
// [“2000-06-05 00:00:00”, 116],
// [“2000-06-06 00:00:00”, 129],
// [“2000-06-07 00:00:00”, 135],
// [“2000-06-08 00:00:00”, 86],
// ];
// var ooo = data.map(function (item) {
// return item[0];
// });
// console.log(ooo, “++++++”);
var option = {
title: {
text: “”,
left: “1%”,
},
tooltip: {
trigger: “axis”,
},
// lineStyle: {
// color: “#1890ff”,
// },
grid: {
left: “5%”,
right: “15%”,
bottom: “10%”,
},
xAxis: {
// data: data.map(function (item) {
// return item[0];
// }),
data: that.chartData.reverse(),
},
yAxis: {},
// toolbox: {
// right: 10,
// feature: {
// dataZoom: {
// yAxisIndex: “none”,
// },
// restore: {},
// saveAsImage: {},
// },
// },
dataZoom: [
{
// startValue: “2014-06-01 00:00:00”,
},
{
type: “inside”,
},
],
visualMap: {
top: 50,
right: 10,
pieces: [
{
gt: 0,
lte: levelOne,
color: “#096dd9”,
},
{
gt: levelOne,
lte: levelTwo,
color: “#e19b16”,
},
{
gt: levelTwo,
// lte: parseInt(levelTwo) + 30,
color: “#e84b3f”,
},
],
outOfRange: {
color: “#e84b3f”,
},
},
series: {
name: “环境剂量率”,
type: “line”,
// data: data.map(function (item) {
// return item[1];
// }),
data: that.chartData2,
// markLine: {
// silent: true,
// lineStyle: {
// color: “#333”,
// },
// data: [
// {
// yAxis: 50,
// },
// {
// yAxis: 100,
// },
// {
// yAxis: 150,
// },
// {
// yAxis: 200,
// },
// {
// yAxis: 300,
// },
// ],
// },
markLine: {
symbol: [“none”, “none”], //去掉箭头
itemStyle: {
normal: {
lineStyle: {
type: “solid”,
color: {
// 设置渐变
type: “linear”,
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "red ", // 0% 处的颜色
},
{
offset: 1,
color: “#fff”, // 100% 处的颜色
},
],
// color: “#e84b3f”,
global: false, // 缺省为 false
},
},
label: {
show: true,
position: “middle”,
},
},
},
data: [
{
yAxis: this.levelOne, //这里设置false是隐藏不了的,可以设置为-1
},
{
yAxis: this.levelTwo, //这里设置false是隐藏不了的,可以设置为-1
},
],
},
},
};
option && myChart.setOption(option);
// 图形和表格联动
// 移入该区域时,高亮
var self = this;
this.myChart.on(“click”, function (params) {
console.log(params, params.dataIndex); //此处写点击事件内容
var tableDom = document.getElementById(“tableBox”);
self.temprow = params.dataIndex;
console.log(self.temprow, " self.temprow");
// console.log(tableDom, “tableDom”);
// for (var i = 0; i < self.detailData.length; i++) {
// if (i == params.dataIndex) {
// self.detailData[i].active = true;
// } else {
// self.detailData[i].active = false;
// }
// }
// for (var i = 0; i < addressList.length; i++) {
// if (params.name == addressList[i].name) {
// console.log(params.name);
// //addressList[i].value=“1”;
// //选中高亮
// this.myChart.dispatchAction({
// type: “highlight”,
// name: params.name,
// });
// $(“.map-table tbody tr”).eq(i).addClass(“highTr”);
// }
// }
});
},
// 更新chart
changeChart() {
if (!this.showAll) {
this.$nextTick(() => {
this.drawChart();
});
}
},
handleExport() {
const queryParams = this.queryParams;
this.$confirm(“是否确认导出所有数据项?”, “警告”, {
confirmButtonText: “确定”,
cancelButtonText: “取消”,
type: “warning”,
})
.then(() => {
this.exportLoading = true;
return gmExport({
sysId: this.$route.query.id,
beginTime: this.parseTime(this.dateRange[0]),
endTime: this.parseTime(this.dateRange[1]),
});
})
.then((response) => {
this.download(response.msg);
this.exportLoading = false;
})
.catch(() => {});
},
// 查询
search() {
this.getAllList();
},
reset() {
const end1 = new Date();
const start1 = new Date();
start1.setTime(start1.getTime() - 3600 * 1000 * 4);
this.dateRange = [start1, end1];
this.getAllList();
// chart重画
this.chartData = [];
this.chartData2 = [];
this.drawChart();
},
handleClickChange(row, event, column) {
console.log(row.index, this.myChart, row, column, row.active);
this.temprow = row.index;
this.myChart.dispatchAction({
type: “showTip”,
seriesIndex: 0,
dataIndex: row.index,
});
},
tableRowClassName({ row, rowIndex }) {
console.log(“tableRowClassName”);
//把每一行的索引放进row
row.index = rowIndex;
// if (row.active == true) {
if (rowIndex == this.temprow) {
return “light-row”;
}
},
goback() {
this.$router.go(-1);
},
},
};