123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- <template>
- <!-- 历史数据 -->
- <div id="historyChart">
- <!-- 精度选择 -->
- <div class="query-area">
- <span>当下分精度下采集数量:{{ chartData.length }}</span>
- <el-select v-model="selectValue" style="float:right;margin-right:10px;" @change='loadTable()'>
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
- </el-select>
- </div>
- <!-- 图表 -->
- <div class="chart-area" ref="chart">
- </div>
- </div>
- </template>
- <script>
- import { mapGetters } from 'vuex'
- import {
- getHistoryData
- } from '@/api/scan/request'
- import echarts from 'echarts'
- export default {
- data() {
- return {
- lineChart: null,//折线表
- selectValue: '5min',//下拉框默认值
- options: [//精度
- { value: '1min', label: '1分钟' },
- { value: '5min', label: '5分钟' },
- { value: '15min', label: '15分钟' },
- { value: '30min', label: '30分钟' },
- { value: '1hour', label: '1小时' },
- { value: '1day', label: '1天' },
- ],
- //数据表
- chartData: []
- }
- },
- props: {
- tabFunNum: String//表号功能号
- },
- methods: {
- //加载表格
- loadTable() {
- let query = {
- secret: this.secret,
- projectId: this.projectId,
- userInfo: this.userInfo
- };
- //时间处理
- let nowDate = new Date().getTime();
- let gteDate = 0;
- if (this.selectValue == '1min' || this.selectValue == '5min') {
- gteDate = nowDate - 3600 * 1000;
- }
- else if (this.selectValue == '15min' || this.selectValue == '30min') {
- gteDate = nowDate - 24 * 3600 * 1000;
- }
- else {
- gteDate = nowDate - 30 * 24 * 3600 * 1000;
- }
- let pa = {
- criterias: [
- {
- "met_fun": this.tabFunNum, //表号功能号
- "period": this.selectValue,
- "receivetime": {
- "$gte": this.date2String(gteDate),
- "$lt": this.date2String(nowDate)
- }
- }
- ]
- };
- //获取历史数据
- getHistoryData(query, pa, res => {
- this.chartData = res[`${this.tabFunNum}`].Content;
- //折线图参数
- let lineChartOption = {
- tooltip: {
- trigger: 'axis',
- position: function (pt) {
- return [pt[0], '10%'];
- }
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: this.chartData.map(item => item.data_time)
- },
- 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.data_value)
- }
- ]
- };
- this.lineChart.setOption(lineChartOption);
- });
- },
- //时间戳转string 例:标准时间 => 20190929120000
- date2String(d) {
- let localeString = new Date(d).toLocaleString();
- let timeString = new Date(d).toTimeString();
- let localArr = localeString.match(/(\d\d|\/\d+)/g).slice(0, 4);
- let timeArr = timeString.match(/(\d\d)/g).slice(0, 3);
- localArr[2] = localArr[2].length == 2 ? `0${localArr[2].substring(1, 2)}` : localArr[2].substring(1, 3);
- localArr[3] = localArr[3].length == 2 ? `0${localArr[3].substring(1, 2)}` : localArr[3].substring(1, 3);
- return localArr.concat(timeArr).join('');
- },
- init() {
- this.lineChart = echarts.init(this.$refs.chart);
- this.loadTable();
- },
- },
- computed: {
- ...mapGetters('layout', ['projectId', 'secret', 'userInfo'])
- },
- mounted() {
- //实例化
- this.init();
- let that = this;
- //图表大小随窗口变化
- window.onresize = () => {
- that.lineChart.resize();
- }
- },
- watch: {
- //切换时更新数据
- tabFunNum() {
- this.loadTable();
- }
- }
- }
- </script>
- <style lang="less" scoped>
- #historyChart {
- height: 100%;
- width: 100%;
- padding: 10px 5px;
- }
- .query-area {
- height: 40px;
- line-height: 40px;
- }
- .chart-area {
- height: 450px;
- }
- </style>
|