peterlu14
333 lines
12 KiB
Vue
333 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<va-button v-if="integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph')" color="danger" class="mb-2" @click="clickIntegral" small>
|
|
To Raw Mode
|
|
</va-button>
|
|
<va-button v-if="!integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph')" color="primary" class="mb-2" @click="clickIntegral" small>
|
|
To Integral Mode
|
|
</va-button>
|
|
<va-button v-if="xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickXLog" small>
|
|
To Raw Mode
|
|
</va-button>
|
|
<va-button :disabled="disableLog" v-if="!xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickXLog" small>
|
|
To log Mode (x-axis)
|
|
</va-button>
|
|
<va-button v-if="ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickYLog" small>
|
|
To Raw Mode
|
|
</va-button>
|
|
<va-button :disabled="disableLog" v-if="!ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickYLog" small>
|
|
To log Mode (y-axis)
|
|
</va-button>
|
|
<va-button v-if="diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickDiff" small>
|
|
To Raw Mode
|
|
</va-button>
|
|
<va-button :disabled="disableDiff" v-if="!diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickDiff" small>
|
|
To Differential Mode
|
|
</va-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapFields } from 'vuex-map-fields'
|
|
import { mapActions } from 'vuex'
|
|
import taskTypes from '@/store/modules/task/content/types'
|
|
import paramTable from '@/data/config-table/index'
|
|
import { getTimeFormatter } from '@/store/modules/task/content/actions/chartAct'
|
|
|
|
export default {
|
|
name: 'CanvasChartReplayCalculation',
|
|
components: {
|
|
},
|
|
props: {
|
|
chartID: {
|
|
type: [Number, String],
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
...mapFields('', [
|
|
'developerMode',
|
|
]),
|
|
...mapFields('taskContent', [
|
|
'chartData',
|
|
'taskContentChartKey',
|
|
'deviceListNew',
|
|
]),
|
|
},
|
|
data () {
|
|
return {
|
|
info: null,
|
|
paramTable: paramTable,
|
|
rawData: null,
|
|
mode_name: '',
|
|
xName: '',
|
|
yName: '',
|
|
obj: null,
|
|
integralClicked: false,
|
|
xlogClicked: false,
|
|
ylogClicked: false,
|
|
diffClicked: false,
|
|
disableDiff: false,
|
|
disableLog: false,
|
|
}
|
|
},
|
|
// watch rawData is use for detect whether the chartData is changed
|
|
watch: {
|
|
rawData: {
|
|
deep: true,
|
|
handler: function () {
|
|
// avoid getting null data
|
|
if (this.rawData.series.length > 0) {
|
|
this.watchHandler()
|
|
}
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
// Do arithmetic operations triggered by button(raw, integral, log)
|
|
watchHandler: function () {
|
|
// this.data need to be deep copy from rawData, since we don't want to modify the source(chartData[])
|
|
// this.data = Object.assign({}, this.rawData)
|
|
this.data = JSON.parse(JSON.stringify(this.rawData))
|
|
this.addSource()
|
|
var curXData = 0
|
|
var curYData = 0
|
|
var prevXData = 0
|
|
var prevYData = 0
|
|
var timeGap = 0
|
|
var curTime = 0
|
|
var integralResult = 0
|
|
var diffResult = 0
|
|
var index = 0
|
|
var timeIndex = this.getTimeIndex()
|
|
var _data = []
|
|
const dataLength = this.data.series[0].data.length
|
|
const seriesData = this.data.series[0].data
|
|
if (this.integralClicked) {
|
|
for (index = 0; index < dataLength; index++) {
|
|
if (index === 0) {
|
|
// TODO: need to change the series[deviceID]
|
|
// TODO: change the time index(dynamic changing)
|
|
curYData = parseFloat(seriesData[index][1])
|
|
timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
|
|
curTime = seriesData[index][timeIndex]
|
|
_data.push([curTime, 0])
|
|
} else {
|
|
prevYData = parseFloat(seriesData[index - 1][1])
|
|
curYData = parseFloat(seriesData[index][1])
|
|
integralResult += parseFloat((Math.abs(curYData) + Math.abs(prevYData)) * timeGap / 2)
|
|
curTime += timeGap
|
|
_data.push([curTime, integralResult])
|
|
}
|
|
}
|
|
} else if (this.xlogClicked || this.ylogClicked) {
|
|
if (this.xlogClicked && this.ylogClicked) {
|
|
for (index = 0; index < dataLength; index++) {
|
|
if (index === 0) {
|
|
curXData = parseFloat(seriesData[index][0])
|
|
curYData = parseFloat(seriesData[index][1])
|
|
timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
|
|
curTime = seriesData[index][timeIndex]
|
|
if (curXData !== 0 && curYData !== 0) {
|
|
_data.push([Math.log10(Math.abs(curXData)), Math.log10(Math.abs(curYData)), curTime])
|
|
}
|
|
} else {
|
|
curXData = parseFloat(seriesData[index][0])
|
|
curYData = parseFloat(seriesData[index][1])
|
|
curTime += timeGap
|
|
if (curXData !== 0 && curYData !== 0) {
|
|
_data.push([Math.log10(Math.abs(curXData)), Math.log10(Math.abs(curYData)), curTime])
|
|
}
|
|
}
|
|
}
|
|
} else if (this.xlogClicked && !(this.ylogClicked)) {
|
|
for (index = 0; index < dataLength; index++) {
|
|
if (index === 0) {
|
|
curXData = parseFloat(seriesData[index][0])
|
|
curYData = parseFloat(seriesData[index][1])
|
|
timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
|
|
curTime = seriesData[index][timeIndex]
|
|
if (curXData !== 0) {
|
|
_data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
|
|
}
|
|
} else {
|
|
curXData = parseFloat(seriesData[index][0])
|
|
curYData = parseFloat(seriesData[index][1])
|
|
curTime += timeGap
|
|
if (curXData !== 0) {
|
|
_data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
|
|
}
|
|
}
|
|
}
|
|
} else if (!(this.xlogClicked) && this.ylogClicked) {
|
|
for (index = 0; index < dataLength; index++) {
|
|
if (index === 0) {
|
|
curXData = parseFloat(seriesData[index][0])
|
|
curYData = parseFloat(seriesData[index][1])
|
|
timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
|
|
curTime = seriesData[index][timeIndex]
|
|
if (curYData !== 0) {
|
|
_data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
|
|
}
|
|
} else {
|
|
curXData = parseFloat(seriesData[index][0])
|
|
curYData = parseFloat(seriesData[index][1])
|
|
curTime += timeGap
|
|
if (curYData !== 0) {
|
|
_data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} else if (this.diffClicked) {
|
|
for (index = 0; index < dataLength; index++) {
|
|
if (index === 0) {
|
|
// TODO: need to change the series[deviceID]
|
|
// TODO: change the time index(dynamic changing)
|
|
curXData = parseFloat(seriesData[index][0])
|
|
curYData = parseFloat(seriesData[index][1])
|
|
timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
|
|
curTime = seriesData[index][timeIndex]
|
|
// _data.push([curTime, 0, curTime])
|
|
} else {
|
|
curXData = parseFloat(seriesData[index][0])
|
|
curYData = parseFloat(seriesData[index][1])
|
|
prevXData = parseFloat(seriesData[index - 1][0])
|
|
prevYData = parseFloat(seriesData[index - 1][1])
|
|
curTime += timeGap
|
|
diffResult = parseFloat((curYData - prevYData) / (curXData - prevXData))
|
|
_data.push([curXData, diffResult, curTime])
|
|
}
|
|
}
|
|
}
|
|
// decide feed in raw data / modified one
|
|
if (this.integralClicked || this.xlogClicked || this.ylogClicked || this.diffClicked) {
|
|
// console.log(_data)
|
|
this.data.series[0].data = _data
|
|
}
|
|
this.data.xAxis[0].type = 'value'
|
|
if (this.integralClicked) {
|
|
this.$emit('switchModeButton', 'Integral')
|
|
} else if (this.xlogClicked || this.ylogClicked) {
|
|
this.$emit('switchModeButton', 'log')
|
|
} else if (this.diffClicked) {
|
|
this.$emit('switchModeButton', 'Differential')
|
|
} else {
|
|
this.$emit('switchModeButton', '')
|
|
}
|
|
// TODO: modify the redundant code
|
|
if (this.xName === 'TIME') {
|
|
this.data.xAxis[0].axisLabel.formatter = function (val) {
|
|
return getTimeFormatter(val)
|
|
}
|
|
}
|
|
this.$emit('refreshData', this.data)
|
|
},
|
|
// resetClicked: function () {
|
|
// this.integralClicked = false
|
|
// this.xlogClicked = false
|
|
// this.ylogClicked = false
|
|
// this.diffClicked = false
|
|
// this.disableDiff = false
|
|
// this.disableLog = false
|
|
// },
|
|
clickIntegral: function () {
|
|
this.integralClicked = !(this.integralClicked)
|
|
const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
|
|
if (device !== undefined) {
|
|
if (device.status === 0) {
|
|
this.watchHandler()
|
|
}
|
|
}
|
|
},
|
|
clickXLog: function () {
|
|
if (this.xlogClicked) {
|
|
this.xlogClicked = false
|
|
if (this.ylogClicked) {
|
|
this.disableDiff = true
|
|
} else {
|
|
this.disableDiff = false
|
|
}
|
|
} else {
|
|
this.xlogClicked = true
|
|
this.disableDiff = true
|
|
}
|
|
const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
|
|
if (device !== undefined) {
|
|
if (device.status === 0) {
|
|
this.watchHandler()
|
|
}
|
|
}
|
|
},
|
|
clickYLog: function () {
|
|
if (this.ylogClicked) {
|
|
this.ylogClicked = false
|
|
if (this.xlogClicked) {
|
|
this.disableDiff = true
|
|
} else {
|
|
this.disableDiff = false
|
|
}
|
|
} else {
|
|
this.ylogClicked = true
|
|
this.disableDiff = true
|
|
}
|
|
const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
|
|
if (device !== undefined) {
|
|
if (device.status === 0) {
|
|
this.watchHandler()
|
|
}
|
|
}
|
|
},
|
|
clickDiff: function () {
|
|
this.diffClicked = !(this.diffClicked)
|
|
this.disableLog = !(this.disableLog)
|
|
const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
|
|
if (device !== undefined) {
|
|
if (device.status === 0) {
|
|
this.watchHandler()
|
|
}
|
|
}
|
|
},
|
|
addSource () {
|
|
if (this.data.gridSource.length > 0) {
|
|
const xAxisName = this.data.gridSource[0][0].xAxis
|
|
const yAxisName = this.data.gridSource[0][0].yAxis
|
|
this.xName = (xAxisName.split(' ')).pop()
|
|
this.yName = (yAxisName.split(' ')).pop()
|
|
if ((this.xName === 'VOLTAGE' && this.yName === 'CURRENT') || (this.xName === 'CURRENT' && this.yName === 'VOLTAGE')) {
|
|
this.mode_name = 'I-V Curve' // integration
|
|
} else if (this.xName === 'TIME' && this.yName === 'CURRENT') {
|
|
this.mode_name = 'I-T Graph' // differential and log
|
|
}
|
|
}
|
|
},
|
|
// index 0 is for the mode which x-axis is represent time, 2 is for the other mode(s)
|
|
getTimeIndex: function () {
|
|
let xAxisName = this.rawData.gridSource[0][0].xAxis
|
|
xAxisName = (xAxisName.split(' ')).pop()
|
|
return (xAxisName === 'TIME') ? 0 : 2
|
|
},
|
|
// these function below are using for print out the data (debug)
|
|
getAlldata: function () {
|
|
return this.data.series[0].data[(this.data.series[0].data).length - 1]
|
|
},
|
|
getXdata: function () {
|
|
var value = this.data.series[0].data[(this.data.series[0].data).length - 1][0]
|
|
return this.xName + ': ' + value + ' ' + this.xUnit
|
|
},
|
|
getYdata: function () {
|
|
var value = this.data.series[0].data[(this.data.series[0].data).length - 1][1]
|
|
return this.yName + ': ' + value + ' ' + this.yUnit
|
|
},
|
|
|
|
...mapActions('taskContent', [
|
|
taskTypes.chart.saveToCache,
|
|
]),
|
|
},
|
|
async mounted () {
|
|
this.rawData = this.chartData[this.chartID]
|
|
},
|
|
}
|
|
|
|
</script>
|