|
@@ -3,9 +3,10 @@
|
|
|
<el-row>
|
|
|
<el-col>
|
|
|
<!-- 搜索信息 -->
|
|
|
- <el-form ref="chartForm" :model="chartForm" :rules="chartFormRules" size="small" :inline="true">
|
|
|
+ <el-form ref="chartForm" :model="chartForm" :rules="chartFormRules" size="small" :inline="true"
|
|
|
+ label-width="78px">
|
|
|
<el-row>
|
|
|
- <el-col :span="4" :xs="8" :sm="6" :md="4" :lg="3" :xl="4">
|
|
|
+ <el-col :xl="4">
|
|
|
<el-form-item prop="trendType">
|
|
|
<el-radio-group v-model="chartForm.trendType">
|
|
|
<el-radio :label="0">实时趋势</el-radio>
|
|
@@ -13,42 +14,43 @@
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col v-if="chartForm.trendType == 0" :span="4">
|
|
|
+ <el-col v-if="chartForm.trendType == 0" :xl="3">
|
|
|
<el-form-item label="更新频率" prop="frequencyValue">
|
|
|
- <el-input v-model="chartForm.frequencyValue"></el-input>
|
|
|
+ <el-input style="width: 115px;" v-model="chartForm.frequencyValue"
|
|
|
+ @change="changeFrequency"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col v-if="chartForm.trendType == 0" :span="1" :xl="2">
|
|
|
- <el-form-item prop="frequencyType">
|
|
|
- <el-select v-model="chartForm.frequencyType">
|
|
|
+ <el-col v-if="chartForm.trendType == 0" :xl="2">
|
|
|
+ <el-form-item prop="frequencyType" style="width: 70px;">
|
|
|
+ <el-select v-model="chartForm.frequencyType" @change="changeFrequencyType">
|
|
|
<el-option v-for="timeType in timeTypeList" :key="timeType.value"
|
|
|
:label="timeType.label" :value="timeType.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col v-if="chartForm.trendType == 0" :span="4">
|
|
|
+ <el-col v-if="chartForm.trendType == 0" :xl="3">
|
|
|
<el-form-item label="时间长度" prop="timeValue">
|
|
|
- <el-input v-model="chartForm.timeValue"></el-input>
|
|
|
+ <el-input style="width: 115px;" v-model="chartForm.timeValue"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col v-if="chartForm.trendType == 0" :span="2">
|
|
|
<el-form-item prop="timeType">
|
|
|
- <el-select v-model="chartForm.timeType">
|
|
|
+ <el-select v-model="chartForm.timeType" style="width: 70px;">
|
|
|
<el-option v-for="timeType in timeTypeList" :key="timeType.value"
|
|
|
:label="timeType.label" :value="timeType.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col v-if="chartForm.trendType == 1" :span="6">
|
|
|
+ <el-col v-if="chartForm.trendType == 1" :span="5">
|
|
|
<el-form-item label="开始时间" prop="startTime">
|
|
|
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="chartForm.startTime"
|
|
|
type="datetime" placeholder="选择日期">
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col v-if="chartForm.trendType == 1" :span="6">
|
|
|
+ <el-col v-if="chartForm.trendType == 1" :span="5">
|
|
|
<el-form-item label="结束时间" prop="endTime">
|
|
|
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="chartForm.endTime"
|
|
|
type="datetime" placeholder="选择日期">
|
|
@@ -57,24 +59,31 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
- <el-form-item label="数据项" prop="itemListTitile">
|
|
|
- <el-input :title="chartForm.itemListTitile" v-model="chartForm.itemListTitile" disabled
|
|
|
- placeholder="请选择数据项" maxlength="10">
|
|
|
- <el-button type="primary" slot="append" icon="el-icon-search"
|
|
|
- @click="chooseItemEvent">选择</el-button>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="小数位" prop="decimalPlaces">
|
|
|
- <el-input v-model="chartForm.decimalPlaces"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="量程" prop="range">
|
|
|
- <el-input v-model="chartForm.range"></el-input>
|
|
|
- </el-form-item>
|
|
|
+ <el-col :xl="6">
|
|
|
+ <el-form-item label="数据项" prop="itemListTitile">
|
|
|
+ <el-input :title="chartForm.itemListTitile" v-model="chartForm.itemListTitile" disabled
|
|
|
+ placeholder="请选择数据项" maxlength="10">
|
|
|
+ <el-button size="mini" type="primary" slot="append" icon="el-icon-search"
|
|
|
+ @click="chooseItemEvent">选择</el-button>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xl="4">
|
|
|
+ <el-form-item label="小数位" prop="decimalPlaces">
|
|
|
+ <el-input style="width: 115px;" v-model="chartForm.decimalPlaces"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xl="4">
|
|
|
+ <el-form-item label="量程" prop="range">
|
|
|
+ <el-input style="width: 115px;" v-model="chartForm.range"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" plain icon="el-icon-search" size="mini"
|
|
|
@click="queryData">查询</el-button>
|
|
|
+ <el-button ref="btn" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
<el-button type="primary" plain icon="el-icon-folder-opened" size="mini"
|
|
|
- @click="exportData">导出</el-button>
|
|
|
+ @click="exportItemListData">导出</el-button>
|
|
|
</el-form-item>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
@@ -94,9 +103,15 @@
|
|
|
import { showLoading } from '@/utils/cqcy'
|
|
|
import { parseTime } from "@/utils/index";
|
|
|
import ChooseItem from './chooseItem.vue'
|
|
|
-import { getItemListValue } from '@/api/source/itemGroup'
|
|
|
+import { getItemListValue, exportItemListData } from '@/api/source/itemGroup'
|
|
|
import qs from 'qs'
|
|
|
import echarts from 'echarts'
|
|
|
+import axios from 'axios'
|
|
|
+import { getToken } from '@/utils/auth'
|
|
|
+axios.defaults.headers['Authorization'] = 'Bearer ' + getToken()
|
|
|
+axios.defaults.headers['token'] = getToken()
|
|
|
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
|
|
|
+axios.defaults.baseURL = process.env.VUE_APP_BASE_API
|
|
|
|
|
|
export default {
|
|
|
created() {
|
|
@@ -221,15 +236,37 @@ export default {
|
|
|
containLabel: true
|
|
|
},
|
|
|
//缩放组件
|
|
|
- dataZoom: [{
|
|
|
- type: 'inside', // 放大和缩小
|
|
|
- orient: 'vertical',
|
|
|
- }, {
|
|
|
- type: 'inside',
|
|
|
- }],
|
|
|
+ // dataZoom: [{
|
|
|
+ // type: 'inside', // 放大和缩小
|
|
|
+ // orient: 'vertical',
|
|
|
+ // }, {
|
|
|
+ // type: 'inside',
|
|
|
+ // }],
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ show: true,
|
|
|
+ //拖动时,实时刷新数据
|
|
|
+ realtime: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#99ffff'
|
|
|
+ },
|
|
|
+ start: 0,
|
|
|
+ end: 100,
|
|
|
+ //缩小最小值1%比例
|
|
|
+ // minSpan: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ realtime: true
|
|
|
+ }
|
|
|
+ ],
|
|
|
//x轴
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
+ // type: 'time',
|
|
|
+ // splitLine: {
|
|
|
+ // show: false
|
|
|
+ // },
|
|
|
boundaryGap: false,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
@@ -241,25 +278,25 @@ export default {
|
|
|
yAxis: [{
|
|
|
type: 'value',
|
|
|
//是否显示坐标轴刻度。
|
|
|
- axisTick: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#FFFFFF'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- margin: 10,
|
|
|
- textStyle: {
|
|
|
- fontSize: 14
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#57617B'
|
|
|
- }
|
|
|
- }
|
|
|
+ // axisTick: {
|
|
|
+ // show: true
|
|
|
+ // },
|
|
|
+ // axisLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#FFFFFF'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // axisLabel: {
|
|
|
+ // margin: 10,
|
|
|
+ // textStyle: {
|
|
|
+ // fontSize: 14
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // splitLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#57617B'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}],
|
|
|
//数据列
|
|
|
series: []
|
|
@@ -283,6 +320,20 @@ export default {
|
|
|
this.chartForm.idList = arr
|
|
|
this.chartForm.itemListTitile = b
|
|
|
},
|
|
|
+ /** 频率更改事件 */
|
|
|
+ changeFrequency() {
|
|
|
+ if (this.chart && this.state) {
|
|
|
+ this.stopTimer()
|
|
|
+ this.startTimer()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 频率类型改变事件 */
|
|
|
+ changeFrequencyType() {
|
|
|
+ if (this.chart && this.state) {
|
|
|
+ this.stopTimer()
|
|
|
+ this.startTimer()
|
|
|
+ }
|
|
|
+ },
|
|
|
/** 选择数据项事件 */
|
|
|
chooseItemEvent() {
|
|
|
this.$refs.chooseItem.selectedItemList = this.itemList
|
|
@@ -348,6 +399,12 @@ export default {
|
|
|
this.initChart()
|
|
|
}
|
|
|
},
|
|
|
+ /** 重置统计图,这里只重置统计图的缩放组件 */
|
|
|
+ resetQuery() {
|
|
|
+ if (this.chart) {
|
|
|
+ this.chart.setOption({ dataZoom: this.dataZoom })
|
|
|
+ }
|
|
|
+ },
|
|
|
/** 通过数据项id,开始结束时间获取相应的数据 */
|
|
|
getItemListValue(callback) {
|
|
|
if (this.chooseStartTime == this.chooseEndTime) {
|
|
@@ -371,19 +428,22 @@ export default {
|
|
|
let data = res.data
|
|
|
this.chart = echarts.init(this.$refs.chart)
|
|
|
let legendData = []
|
|
|
+ let xAxisData = []
|
|
|
let seriesData = []
|
|
|
- for (let a of data) {
|
|
|
+ for (let n in data) {
|
|
|
+ let a = data[n]
|
|
|
legendData.push(a.describe ? a.describe : a.itemReadName)
|
|
|
let b = {
|
|
|
- name: a.unit ? ((a.describe ? a.describe : a.itemReadName) + '(' + a.unit + ')') :
|
|
|
- (a.describe ? a.describe : a.itemReadName),
|
|
|
+ name: a.describe ? a.describe : a.itemReadName,
|
|
|
type: 'line',
|
|
|
+ //是否平滑曲线
|
|
|
smooth: true,
|
|
|
symbol: 'circle',
|
|
|
symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
+ //是否显示线上点
|
|
|
+ showSymbol: true,
|
|
|
itemStyle: {
|
|
|
- color: this.getColor()
|
|
|
+ color: this.getColor(n)
|
|
|
},
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
@@ -394,6 +454,7 @@ export default {
|
|
|
}
|
|
|
let c = []
|
|
|
if (a.dataTimeList) {
|
|
|
+ xAxisData = xAxisData.concat(a.dataTimeList)
|
|
|
for (let i in a.dataTimeList) {
|
|
|
const d = []
|
|
|
d.push(a.dataTimeList[i])
|
|
@@ -405,7 +466,7 @@ export default {
|
|
|
seriesData.push(b)
|
|
|
}
|
|
|
let decimalPlaces = parseInt(this.chartForm.decimalPlaces)
|
|
|
- this.tooltip.formatter = function (params, ticket, callback) {
|
|
|
+ this.tooltip.formatter = function (params) {
|
|
|
let b = '<div style="display:inline;">'
|
|
|
for (let a of params) {
|
|
|
b += '<div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + a.color + ';"></span><span style="color:' + a.color + '">'
|
|
@@ -415,6 +476,7 @@ export default {
|
|
|
return b
|
|
|
}
|
|
|
this.legend.data = legendData
|
|
|
+ this.xAxis.data = xAxisData.filter((item, index) => xAxisData.indexOf(item) === index).sort()
|
|
|
this.yAxis[0].max = null
|
|
|
if (this.chartForm.range) {
|
|
|
this.yAxis[0].max = parseInt(this.chartForm.range)
|
|
@@ -439,7 +501,12 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
/** 生成颜色方法 */
|
|
|
- getColor() {
|
|
|
+ getColor(i) {
|
|
|
+ const arr = ['#ff33cc', '#ff3333', '#99ffff', '#66ff33', '#FFFF00',
|
|
|
+ '#00FFFF', '#A0522D', '#F0FFFF', '#FF6EB4', '#33ccff']
|
|
|
+ if (i <= 10) {
|
|
|
+ return arr[i]
|
|
|
+ }
|
|
|
const r = this.colorRandom(128, 255)
|
|
|
const g = this.colorRandom(0, 63)
|
|
|
const b = this.colorRandom(128, 255)
|
|
@@ -498,10 +565,12 @@ export default {
|
|
|
updateChartData() {
|
|
|
this.getItemListValue((res) => {
|
|
|
let data = res.data
|
|
|
+ let xArr = this.xAxis.data
|
|
|
for (let i in data) {
|
|
|
let a = data[i]
|
|
|
let arr = this.series[i].data
|
|
|
if (a.dataTimeList) {
|
|
|
+ xArr = xArr.concat(a.dataTimeList)
|
|
|
for (let j in a.dataTimeList) {
|
|
|
const b = []
|
|
|
b.push(a.dataTimeList[j])
|
|
@@ -509,8 +578,9 @@ export default {
|
|
|
arr.push(b)
|
|
|
}
|
|
|
}
|
|
|
- //删除多余数据
|
|
|
+ //排序,并删除多余数据
|
|
|
if (arr) {
|
|
|
+ // arr.sort((c, d) => c[0] - d[0])
|
|
|
let count = new Date(arr[arr.length - 1][0]).getTime() - this.count
|
|
|
let num = 0
|
|
|
for (let j in arr) {
|
|
@@ -522,6 +592,10 @@ export default {
|
|
|
this.series[i].data = arr.splice(num)
|
|
|
}
|
|
|
}
|
|
|
+ //更新x轴全部数据
|
|
|
+ xArr = xArr.filter((item, index) => xArr.indexOf(item) === index).sort()
|
|
|
+ this.xAxis.data = xArr.filter((i) =>
|
|
|
+ new Date(i).getTime() >= (new Date(xArr[xArr.length - 1]).getTime() - this.count))
|
|
|
//更新统计图
|
|
|
if (this.chart) {
|
|
|
this.chart.setOption({ xAxis: this.xAxis, series: this.series })
|
|
@@ -529,8 +603,85 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
/** 导出统计图数据 */
|
|
|
- exportData() {
|
|
|
- console.log("---导出统计图-----")
|
|
|
+ exportItemListData() {
|
|
|
+ if (this.chartForm.idList.length == 0) {
|
|
|
+ this.$message({
|
|
|
+ message: '请选择数据项',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let startTime;
|
|
|
+ let endTime;
|
|
|
+ if (this.chartForm.trendType == 0) {
|
|
|
+ if (!this.chartForm.frequencyValue) {
|
|
|
+ this.$message({
|
|
|
+ message: '频率不能为空',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.chartForm.timeValue) {
|
|
|
+ this.$message({
|
|
|
+ message: '时间长度不能为空',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ let currentTime = new Date().getTime()
|
|
|
+ let count = this.timeCalculation(this.chartForm.timeValue, this.chartForm.timeType)
|
|
|
+ startTime = parseTime(new Date(currentTime - count))
|
|
|
+ endTime = parseTime(currentTime)
|
|
|
+ //如果为历史趋势
|
|
|
+ } else if (this.chartForm.trendType == 1) {
|
|
|
+ if (!this.chartForm.startTime) {
|
|
|
+ this.$message({
|
|
|
+ message: '请选择开始时间',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.chartForm.endTime) {
|
|
|
+ this.$message({
|
|
|
+ message: '请选择结束时间',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ startTime = this.chartForm.startTime
|
|
|
+ endTime = this.chartForm.endTime
|
|
|
+ }
|
|
|
+ let param = {
|
|
|
+ itemGroupId: this.chartForm.itemGroupId,
|
|
|
+ idList: this.chartForm.idList,
|
|
|
+ startTime: startTime,
|
|
|
+ endTime: endTime
|
|
|
+ }
|
|
|
+ let params = qs.stringify(param, { arrayFormat: 'repeat' })
|
|
|
+ axios({
|
|
|
+ method: 'get',
|
|
|
+ url: '/itemGroup/exportItemListData?' + params,
|
|
|
+ responseType: 'blob'
|
|
|
+ }).then((res) => {
|
|
|
+ // 文件流
|
|
|
+ const blob = new Blob([res.data])
|
|
|
+ let url = window.URL.createObjectURL(blob)
|
|
|
+ let link = document.createElement("a")
|
|
|
+ link.style.display = "none"
|
|
|
+ link.href = url
|
|
|
+
|
|
|
+ // 取后端给前端返的请求头中的文件名称
|
|
|
+ const fileName = res.headers["content-disposition"].split(";")[1].split("filename=")[1];
|
|
|
+
|
|
|
+ link.download = fileName
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ document.body.removeChild(link); //下载完成移除元素
|
|
|
+ window.URL.revokeObjectURL(url); //释放掉blob对象
|
|
|
+ }, (error) => {
|
|
|
+ return Promise.reject(error)
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
destroyed: function () {
|