|
@@ -3,7 +3,16 @@
|
|
|
:visible.sync="dialogVisible"
|
|
|
title="曲线"
|
|
|
class="curve"
|
|
|
+ @close="value = 0"
|
|
|
>
|
|
|
+ <el-select v-model="value" @change="handleTime">
|
|
|
+ <el-option
|
|
|
+ v-for="(item,index) in options"
|
|
|
+ :key="index"
|
|
|
+ :label="item"
|
|
|
+ :value="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
<!-- 图表 -->
|
|
|
<div class="chart-area" ref="chart"></div>
|
|
|
</el-dialog>
|
|
@@ -11,150 +20,95 @@
|
|
|
|
|
|
<script>
|
|
|
import echarts from 'echarts'
|
|
|
+import moment from 'moment'
|
|
|
+import {originalHistory} from '@/api/scan/request'
|
|
|
|
|
|
export default {
|
|
|
name: "curve",
|
|
|
data() {
|
|
|
return {
|
|
|
lineChart: null,//折线表
|
|
|
- chartData: ['2020-01-01', '2020-01-02', '2020-01-03', '2020-01-04', '2020-01-05'],//数据表
|
|
|
- dialogVisible: false
|
|
|
+ chartData: [],//数据表
|
|
|
+ dialogVisible: false,
|
|
|
+ options: ['当日', '最近七天'],
|
|
|
+ value: 0,
|
|
|
+ row: {}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- open() {
|
|
|
+ handleTime() {
|
|
|
+ this.open(this.row, this.value)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ *@param row 当前行
|
|
|
+ *@param val 当前日期
|
|
|
+ */
|
|
|
+ open(row, val) {
|
|
|
+ this.row = row
|
|
|
+ let toDay = moment().format('YYYY-MM-DD 00:00:00'),
|
|
|
+ toCurrentDay = moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ history7 = moment().subtract('days', 6).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ Filters = '';
|
|
|
+ if (val == 1) {
|
|
|
+ Filters = `Time > '${history7}' and Time < '${toCurrentDay}'`
|
|
|
+ } else {
|
|
|
+ Filters = `Time > '${toDay}' and Time < '${toCurrentDay}'`
|
|
|
+ }
|
|
|
+ let param = {
|
|
|
+ PointId: row.Id,
|
|
|
+ ...row,
|
|
|
+ Filters,
|
|
|
+ }
|
|
|
+ originalHistory(param, res => {
|
|
|
+ let arr = res.Content ? res.Content : []
|
|
|
+ this.chartData = []
|
|
|
+ arr.forEach(i => this.chartData.push([moment(i.Time).format('YYYY-MM-DD'), i.Data]))
|
|
|
+ })
|
|
|
+ console.log(this.chartData)
|
|
|
this.timeoutSetVal()
|
|
|
this.dialogVisible = true
|
|
|
},
|
|
|
timeoutSetVal() {
|
|
|
setTimeout(() => {
|
|
|
if (this.$refs.chart) {
|
|
|
- //折线图参数
|
|
|
- // let lineChartOption = {
|
|
|
- // tooltip: {
|
|
|
- // trigger: 'axis',
|
|
|
- // position: function (pt) {
|
|
|
- // return [pt[0], '10%'];
|
|
|
- // }
|
|
|
- // },
|
|
|
- // xAxis: {
|
|
|
- // type: 'category',
|
|
|
- // boundaryGap: false,
|
|
|
- // data: this.chartData.map(item => item)
|
|
|
- // },
|
|
|
- // yAxis: {
|
|
|
- // type: 'value',
|
|
|
- // boundaryGap: [0, '100%']
|
|
|
- // },
|
|
|
- // dataZoom: [{
|
|
|
- // type: 'inside',
|
|
|
- // start: 80,
|
|
|
- // end: 100
|
|
|
- // }, {
|
|
|
- // start: 0,
|
|
|
- // end: 10,
|
|
|
- // handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
|
|
- // handleSize: '80%',
|
|
|
- // handleStyle: {
|
|
|
- // color: '#fff',
|
|
|
- // shadowBlur: 3,
|
|
|
- // shadowColor: 'rgb(144, 147, 153)',
|
|
|
- // shadowOffsetX: 2,
|
|
|
- // shadowOffsetY: 2
|
|
|
- // }
|
|
|
- // }],
|
|
|
- // series: [
|
|
|
- // {
|
|
|
- // name: '数值',
|
|
|
- // type: 'line',
|
|
|
- // smooth: true,
|
|
|
- // symbol: 'none',
|
|
|
- // sampling: 'average',
|
|
|
- // itemStyle: {
|
|
|
- // color: 'rgb(103, 194, 58)'
|
|
|
- // },
|
|
|
- // areaStyle: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgb(225, 243, 216)'
|
|
|
- // }, {
|
|
|
- // offset: 1,
|
|
|
- // color: 'rgb(225, 243, 216)'
|
|
|
- // }])
|
|
|
- // },
|
|
|
- // data: this.chartData.map(item => item)
|
|
|
- // }
|
|
|
- // ]
|
|
|
- // };
|
|
|
this.lineChart = echarts.init(this.$refs.chart);
|
|
|
- var data = [
|
|
|
- ["2000-06-05", 116],
|
|
|
- ["2000-06-05", 73],
|
|
|
- ["2000-06-10", 85],
|
|
|
- ["2000-06-11", 73],
|
|
|
- ["2000-06-12", 68],
|
|
|
- ["2000-06-13", 92],
|
|
|
- ["2000-06-14", 130],
|
|
|
- ["2000-06-15", 245],
|
|
|
- ["2000-06-16", 139],
|
|
|
- ["2000-06-17", 115],
|
|
|
- ["2000-06-18", 111],
|
|
|
-
|
|
|
- ]
|
|
|
- var dateList = data.map(function (item) {
|
|
|
- return item[0];
|
|
|
- });
|
|
|
- var valueList = data.map(function (item) {
|
|
|
- return item[1];
|
|
|
- });
|
|
|
- let lineChartOption = {
|
|
|
- visualMap: [{
|
|
|
- show: false,
|
|
|
- type: 'continuous',
|
|
|
- seriesIndex: 0,
|
|
|
- min: 0,
|
|
|
- max: 400
|
|
|
- }, {
|
|
|
- show: false,
|
|
|
- type: 'continuous',
|
|
|
- seriesIndex: 1,
|
|
|
- dimension: 0,
|
|
|
- min: 0,
|
|
|
- max: dateList.length - 1
|
|
|
- }],
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- xAxis: [{
|
|
|
- // data: dateList
|
|
|
- data: ['2000-07-17', '2000-07-18', '2000-07-19', '2000-07-20']
|
|
|
- }, {
|
|
|
- data: dateList,
|
|
|
- gridIndex: 1
|
|
|
- }],
|
|
|
- yAxis: [{
|
|
|
- splitLine: {show: false}
|
|
|
- }, {
|
|
|
- splitLine: {show: false},
|
|
|
- gridIndex: 1
|
|
|
- }],
|
|
|
- grid: [{
|
|
|
- bottom: '60%'
|
|
|
- }, {
|
|
|
- top: '60%'
|
|
|
- }],
|
|
|
- series: [{
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
- data: valueList
|
|
|
- }, {
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
- data: valueList,
|
|
|
- xAxisIndex: 1,
|
|
|
- yAxisIndex: 1
|
|
|
- }]
|
|
|
- }
|
|
|
+ let dateList = this.chartData.map(item => item[0]),
|
|
|
+ valueList = this.chartData.map(item => item[1]),
|
|
|
+ lineChartOption = {
|
|
|
+ visualMap: [
|
|
|
+ {
|
|
|
+ show: false,
|
|
|
+ type: 'continuous',
|
|
|
+ seriesIndex: 1,
|
|
|
+ dimension: 0,
|
|
|
+ min: 0,
|
|
|
+ max: dateList.length
|
|
|
+ }],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ xAxis: [{}, {
|
|
|
+ data: dateList,
|
|
|
+ gridIndex: 1
|
|
|
+ }],
|
|
|
+ yAxis: [{}, {
|
|
|
+ splitLine: {show: false},
|
|
|
+ gridIndex: 1
|
|
|
+ }],
|
|
|
+ grid: [{
|
|
|
+ bottom: '13%'
|
|
|
+ }, {
|
|
|
+ top: '45%'
|
|
|
+ }],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ data: valueList,
|
|
|
+ xAxisIndex: 1,
|
|
|
+ yAxisIndex: 1
|
|
|
+ }]
|
|
|
+ }
|
|
|
this.lineChart.setOption(lineChartOption);
|
|
|
} else {
|
|
|
this.timeoutSetVal()
|