import miment from 'miment'
import {getData} from '@/api/bigscreen'
export default {
data() {
return {
// form select-input key
selectInput: {
keyname: '',
keyword: ''
},
//日期时间快捷选项
datetimeRangePickerOptions: {
shortcuts: [{
text: '今天',
onClick(picker) {
const end = new Date();
const start = new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0));
picker.$emit('pick', [start, end]);
}
}, {
text: '昨天',
onClick(picker) {
const start = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(0, 0, 0, 0));
const end = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(23, 59, 59, 999));
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(miment().add(-1, 'ww').stamp());
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(miment().add(-1, 'MM').stamp());
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(miment().add(-3, 'MM').stamp());
picker.$emit('pick', [start, end]);
}
}],
// disabledDate(time){
// return time.getTime() > Date.now()
// }
},
}
},
computed: {},
created() {
},
mounted() {
},
destroyed() {
},
methods: {
// 搜索重置搜索页码
search() {
this.params.currentPage = 1;
this.queryByPage();
},
// 把selectInput中的值赋到params查询对象中
parseParamsBySelectInput(keyname, keyword) {
if (this.params === undefined || this.params === null) {
console.warn('query form must bind to params object in vue data')
return
}
// if (!this.params.hasOwnProperty(keyname)) {
// console.warn('params has no field:' + keyname)
// return
// }
if (keyword !== undefined) {
this.params[keyname] = keyword.trim()
}
},
resetForm(data) {
let formKeys = Object.keys(data)
for (let k of formKeys) {
data[k] = null
}
},
handlerInputchange(val) {
this.parseParamsBySelectInput(this.selectInput.keyname, val)
},
// 查询echarts 数据
queryEchartsData(params) {
return new Promise(async (resolve) => {
const {code, data} = await getData(params);
if (code != 200) return
const analysisData = this.analysisChartsData(params, data);
resolve(analysisData)
})
},
// 解析不同图标的数据
analysisChartsData(params, data) {
// widget-barchart 柱线图、widget-linechart 折线图、 widget-barlinechart 柱线图
// widget-piechart 饼图、widget-funnel 漏斗图
// widget-text 文本框
// widge-table 表格(数据不要转)
// widget-stackchart 堆叠图
const chartType = params.chartType
if (
chartType == "widget-barchart" ||
chartType == "widget-linechart" ||
chartType == "widget-barlinechart"
) {
return this.barOrLineChartFn(params.chartProperties, data);
} else if (
chartType == "widget-piechart" ||
chartType == "widget-funnel"
) {
return this.piechartFn(params.chartProperties, data);
} else if (chartType == "widget-text") {
return this.widgettext(params.chartProperties, data)
} else if (chartType == "widget-stackchart") {
return this.stackChartFn(params.chartProperties, data)
}else if(chartType == "custom-linechart" || chartType == "custom-barlinechart"){
return this.barOrLineChartFnCustom(params.chartProperties, data);
}else if(chartType == 'monitor-linechart-trend'){
return this.LineChartFnCustomTrend(params.chartProperties, data);
} else if(chartType == "monitor-stackchart"){
return this.stackChartFnCustom(params.chartProperties, data)
}else {
return data
}
},
//折线趋势图-自定义 lsq 2022-03-01
LineChartFnCustomTrend(chartProperties, data) {
const ananysicData = {};
let series = [];
if(data && data[0] && (data[0].code==200 || data[0].code==0) && data[0].data){
series = data[0].data;
}
ananysicData["series"] = series;
return ananysicData;
},
// 柱状图、折线图、柱线图-自定义 // Start LSQ 2022/2/21
barOrLineChartFnCustom(chartProperties, data) {
const ananysicData = {};
let xAxisList = [];
let series = [];
let kpiUnit='';
if(data && data[0]){
if(data[0].data && data[0].series){
if(data[0].data.names && data[0].data.names.length>0){
xAxisList=data[0].data.names;
}else{
// xAxisList=['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00']
xAxisList=[]
}
if(data[0].data.kpiUnit){
kpiUnit=data[0].data.kpiUnit;
}
if(data[0].data.series && data[0].data.series.length>0){
series = data[0].data.series;
}else{
series = [{
name: "",
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}];
}
}else{
let dataData='';
if(data[0].data && data[0].data.length>=0){
dataData=data[0].data;
}else{
dataData=data;
}
if(dataData.length>0){
//容量分析柱线图数据结构
let seriesCapacityData=[];//容量
let seriesUsageRateData=[];//使用率
let seriesUsageValueData=[];//使用量
dataData.map(item=>{
xAxisList.push(item.periodVal);
seriesCapacityData.push(item.capacityValue)
seriesUsageRateData.push(item.usageRate)
seriesUsageValueData.push(item.usageValue)
})
if(seriesUsageValueData.length>0){
series.push({
type:'bar',
name:'使用量',
data:seriesUsageValueData
})
}
if(seriesCapacityData.length>0){
series.push({
type:'line',
name:'容量',
data:seriesCapacityData
})
}
if(seriesUsageRateData.length>0){
series.push({
type:'line',
name:'使用率',
data:seriesUsageRateData
})
}
}else{
xAxisList=[]
series = [{
name: "使用量",
type:'bar',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},{
name: "容量",
type:'line',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},{
name: "使用率",
type:'line',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}];
}
}
}else{
// xAxisList=['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00']
xAxisList=[]
series = [{
name: "使用量",
type:'bar',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},{
name: "容量",
type:'line',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},{
name: "使用率",
type:'line',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}];
}
ananysicData["xAxis"] = xAxisList;
ananysicData["series"] = series;
ananysicData["kpiUnit"] = kpiUnit;
return ananysicData;
},
// 柱状图、折线图、柱线图
barOrLineChartFn(chartProperties, data) {
const ananysicData = {};
const xAxisList = [];
const series = [];
for (const key in chartProperties) {
const obj = {};
const seriesData = [];
const value = chartProperties[key];
obj["type"] = value;
for (let i = 0; i < data.length; i++) {
if (value.startsWith("xAxis")) {
// 代表为x轴
xAxisList[i] = data[i][key];
} else {
// 其他的均为series展示数据
seriesData[i] = data[i][key];
}
}
obj["data"] = seriesData;
if (!obj["type"].startsWith("xAxis")) {
series.push(obj);
}
}
ananysicData["xAxis"] = xAxisList;
ananysicData["series"] = series;
return ananysicData;
},
//堆叠图自定义
stackChartFnCustom(chartProperties, data){
const ananysicData = {};
const series = [];
//全部字段字典值
const types = Object.values(chartProperties)
let newData=data[0];
//x轴字段、y轴字段名
const xAxisField = Object.keys(chartProperties)[types.indexOf('xAxis')]
const yAxisField = Object.keys(chartProperties)[types.indexOf('yAxis')]
const dataField = Object.keys(chartProperties)[types.indexOf('bar')]
//x轴数值去重，y轴去重
const xAxisList = this.setUnique(data.map(item => item[xAxisField]))
const yAxisList = this.setUnique(data.map(item => item[yAxisField]))
const dataGroup = this.setGroupBy(data, yAxisField)
let yAxisListNew=yAxisList[0].series;
if(yAxisListNew && yAxisListNew.length>0){
yAxisListNew.map(item=>{
if(item.type=='bar'){
series.push({
name: item.name,
type: item.type,
data: item.data,
})
}else{
series.push({
name: item.flag,
type: 'line',
data: item.datas,
})
}
})
}
if(xAxisList[0]){
ananysicData["xAxis"] = xAxisList[0];
}else{
ananysicData["xAxis"] = newData.data.names;
}
ananysicData["series"] = series;
if(newData.kpiMap){
ananysicData["kpiMap"] = newData.kpiMap;
}
if(newData.kpiUnit){
ananysicData["kpiUnit"] = newData.kpiUnit;
}else if(newData.data){
ananysicData["kpiUnit"] = newData.data.kpiUnit;
}else{
ananysicData["kpiUnit"] = '';
}
return ananysicData;
},
//堆叠图
stackChartFn(chartProperties, data) {
const ananysicData = {};
const series = [];
//全部字段字典值
const types = Object.values(chartProperties)
//x轴字段、y轴字段名
const xAxisField = Object.keys(chartProperties)[types.indexOf('xAxis')]
const yAxisField = Object.keys(chartProperties)[types.indexOf('yAxis')]
const dataField = Object.keys(chartProperties)[types.indexOf('bar')]
//x轴数值去重，y轴去重
const xAxisList = this.setUnique(data.map(item => item[xAxisField]))
const yAxisList = this.setUnique(data.map(item => item[yAxisField]))
const dataGroup = this.setGroupBy(data, yAxisField)
for (const key in chartProperties) {
if (chartProperties[key] !== 'yAxis' && !chartProperties[key].startsWith('xAxis')) {
Object.keys(dataGroup).forEach(item => {
const data = new Array(yAxisList.length).fill(0)
dataGroup[item].forEach(res => {
data[xAxisList.indexOf(res[xAxisField])]= res[key]
})
series.push({
name: yAxisList[item],
type: chartProperties[key],
data: data,
})
})
}
}
ananysicData["xAxis"] = xAxisList;
ananysicData["series"] = series;
return ananysicData;
},
// 饼图、漏斗图
piechartFn(chartProperties, data) {
const ananysicData = [];
for (let i = 0; i < data.length; i++) {
const obj = {};
for (const key in chartProperties) {
const value = chartProperties[key];
if (value === "name") {
obj["name"] = data[i][key];
} else {
obj["value"] = data[i][key];
}
}
ananysicData.push(obj);
}
return ananysicData;
},
widgettext(chartProperties, data) {
const ananysicData = [];
for (let i = 0; i < data.length; i++) {
const obj = {};
for (const key in chartProperties) {
const value = chartProperties[key];
if (value === "name") {
} else {
obj["value"] = data[i][key];
}
}
ananysicData.push(obj);
}
return ananysicData;
},
setUnique(arr) {
let newArr = [];
arr.forEach(item => {
return newArr.includes(item) ? '' : newArr.push(item);
});
return newArr;
},
setGroupBy(array, name) {
const groups = {}
array.forEach(function (o) {
const group = JSON.stringify(o[name])
groups[group] = groups[group] || []
groups[group].push(o)
})
return Object.keys(groups).map(function (group) {
return groups[group]
})
},
},
watch: {
'selectInput.keyname'(newVal, oldVal) {
this.resetForm(this.params)
this.params.currentPage = 1
this.params.pageSize = 10
this.parseParamsBySelectInput(newVal, this.selectInput.keyword)
},
'selectInput.keyword'(newVal, oldVal) {
if (!this.selectInput.keyname) return
this.parseParamsBySelectInput(this.selectInput.keyname, newVal)
}
// 'selectInput.keyword'(newVal, oldVal) {
// this.parseParamsBySelectInput(this.selectInput.keyname, newVal)
// }
}
}