单体电池
This commit is contained in:
@ -20,8 +20,9 @@
|
||||
start-placeholder="开始时间"
|
||||
value-format="yyyy-MM-dd"
|
||||
:picker-options="pickerOptions"
|
||||
:default-value="defaultDateRange"
|
||||
end-placeholder="结束时间">
|
||||
end-placeholder="结束时间"
|
||||
:clearable="false"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
@ -29,24 +30,25 @@
|
||||
<el-button @click="onReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div id="lineChart" style="height: 360px;width: 100%;"></div>
|
||||
<div id="lineChart" style="height: 360px; width: 100%"></div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from '@/mixins/ems/resize'
|
||||
import {getSingleBatteryData} from '@/api/ems/dzjk'
|
||||
import * as echarts from "echarts";
|
||||
import resize from "@/mixins/ems/resize";
|
||||
import { getSingleBatteryData } from "@/api/ems/dzjk";
|
||||
import { formatDate } from "@/filters/ems";
|
||||
export default {
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
siteId:'',
|
||||
deviceId:'',
|
||||
clusterDeviceId:'',
|
||||
dataType:'',//展示的数据类型 空值展示所有数据
|
||||
siteId: "",
|
||||
deviceId: "",
|
||||
clusterDeviceId: "",
|
||||
dataType: "", //展示的数据类型 空值展示所有数据
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
@ -54,124 +56,155 @@ export default {
|
||||
},
|
||||
dialogTableVisible: false,
|
||||
dateRange: [],
|
||||
defaultDateRange:[]
|
||||
}
|
||||
defaultDateRange: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
resetDefaultDateRange() {
|
||||
const now = new Date(),
|
||||
formatNow = formatDate(now);
|
||||
const weekAgo = formatDate(
|
||||
new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
|
||||
);
|
||||
this.dateRange = [weekAgo, formatNow];
|
||||
this.defaultDateRange = [weekAgo, formatNow];
|
||||
},
|
||||
handleColsed(done) {
|
||||
if (!this.chart) {
|
||||
return done()
|
||||
return done();
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
done()
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
done();
|
||||
},
|
||||
getData() {
|
||||
if(this.loading) return
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
this.chart.showLoading()
|
||||
const {siteId, deviceId,clusterDeviceId,dateRange:[startDate='',endDate='']}=this;
|
||||
getSingleBatteryData({siteId, deviceId,clusterDeviceId,startDate,endDate}).then(response => {
|
||||
this.setOption(response?.data || [])
|
||||
}).finally(()=>{
|
||||
this.loading = false;
|
||||
this.chart.hideLoading()
|
||||
this.chart.showLoading();
|
||||
const {
|
||||
siteId,
|
||||
deviceId,
|
||||
clusterDeviceId,
|
||||
dateRange: [startDate = "", endDate = ""],
|
||||
} = this;
|
||||
getSingleBatteryData({
|
||||
siteId,
|
||||
deviceId,
|
||||
clusterDeviceId,
|
||||
startDate,
|
||||
endDate,
|
||||
})
|
||||
.then((response) => {
|
||||
this.setOption(response?.data || []);
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
this.chart.hideLoading();
|
||||
});
|
||||
},
|
||||
// 重置
|
||||
onReset() {
|
||||
this.dateRange=[]
|
||||
this.getData()
|
||||
this.dateRange = this.defaultDateRange;
|
||||
this.getData();
|
||||
},
|
||||
initChart({ siteId, clusterDeviceId, deviceId }, dataType) {
|
||||
this.siteId=siteId
|
||||
this.clusterDeviceId=clusterDeviceId
|
||||
this.deviceId=deviceId
|
||||
this.dataType=dataType
|
||||
this.dateRange=[]
|
||||
this.dialogTableVisible = true
|
||||
this.siteId = siteId;
|
||||
this.clusterDeviceId = clusterDeviceId;
|
||||
this.deviceId = deviceId;
|
||||
this.dataType = dataType;
|
||||
this.resetDefaultDateRange();
|
||||
this.dialogTableVisible = true;
|
||||
this.$nextTick(() => {
|
||||
!this.chart && (this.chart = echarts.init(document.querySelector('#lineChart')))
|
||||
this.getData()
|
||||
})
|
||||
!this.chart &&
|
||||
(this.chart = echarts.init(document.querySelector("#lineChart")));
|
||||
this.getData();
|
||||
});
|
||||
},
|
||||
setOption(data) {
|
||||
const obj = {
|
||||
voltage:'电压',
|
||||
temperature:'温度',
|
||||
soc:'SOC',
|
||||
soh:'SOH',
|
||||
}
|
||||
let source,series,{dataType} = this
|
||||
voltage: "电压",
|
||||
temperature: "温度",
|
||||
soc: "SOC",
|
||||
soh: "SOH",
|
||||
};
|
||||
let source,
|
||||
series,
|
||||
{ dataType } = this;
|
||||
if (dataType) {
|
||||
source = [['日期',obj[dataType]]]
|
||||
data.forEach(item => {
|
||||
source.push([item.dataTimestamp,item[dataType]])
|
||||
})
|
||||
series=[{
|
||||
name:obj[dataType],
|
||||
type: 'line',
|
||||
}]
|
||||
}else{
|
||||
source = [['日期','电压','温度','SOC','SOH']]
|
||||
data.forEach(item => {
|
||||
source.push([item.dataTimestamp,item.voltage,item.temperature,item.soc,item.soh])
|
||||
})
|
||||
source = [["日期", obj[dataType]]];
|
||||
data.forEach((item) => {
|
||||
source.push([item.dataTimestamp, item[dataType]]);
|
||||
});
|
||||
series = [
|
||||
{
|
||||
name:'电压',
|
||||
type: 'line',
|
||||
|
||||
},{
|
||||
name:'温度',
|
||||
type: 'line',
|
||||
name: obj[dataType],
|
||||
type: "line",
|
||||
},
|
||||
];
|
||||
} else {
|
||||
source = [["日期", "电压", "温度", "SOC", "SOH"]];
|
||||
data.forEach((item) => {
|
||||
source.push([
|
||||
item.dataTimestamp,
|
||||
item.voltage,
|
||||
item.temperature,
|
||||
item.soc,
|
||||
item.soh,
|
||||
]);
|
||||
});
|
||||
series = [
|
||||
{
|
||||
name: "电压",
|
||||
type: "line",
|
||||
},
|
||||
{
|
||||
name:'SOC',
|
||||
type: 'line',
|
||||
|
||||
},{
|
||||
name:'SOH',
|
||||
type: 'line',
|
||||
}]
|
||||
name: "温度",
|
||||
type: "line",
|
||||
},
|
||||
{
|
||||
name: "SOC",
|
||||
type: "line",
|
||||
},
|
||||
{
|
||||
name: "SOH",
|
||||
type: "line",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
this.chart && this.chart.setOption({
|
||||
color:['#FFBD00','#3C81FF','#05AEA3','#F86F70'],
|
||||
this.chart &&
|
||||
this.chart.setOption({
|
||||
color: ["#FFBD00", "#3C81FF", "#05AEA3", "#F86F70"],
|
||||
grid: {
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '15',
|
||||
left: "center",
|
||||
bottom: "15",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#333333",
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
type: "category",
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
type: "value",
|
||||
},
|
||||
dataset: {
|
||||
source
|
||||
source,
|
||||
},
|
||||
series
|
||||
})
|
||||
}
|
||||
series,
|
||||
});
|
||||
},
|
||||
mounted(){
|
||||
const now = new Date();
|
||||
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
||||
this.defaultDateRange = [lastMonth, now];
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -12,7 +12,9 @@
|
||||
:class="handleListClass(item)"
|
||||
@click="chartDetail(item)"
|
||||
>
|
||||
<div style="font-size: 10px;font-weight: 500">{{ item.clusterDeviceId }}</div>
|
||||
<div style="font-size: 10px; font-weight: 600">
|
||||
{{ item.clusterDeviceId }}
|
||||
</div>
|
||||
<div>#{{ item.deviceId }}</div>
|
||||
<div class="dy">{{ item.voltage }}V</div>
|
||||
<div class="wd">{{ item.temperature }}℃</div>
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
</el-form>
|
||||
<!-- 切换 -->
|
||||
<div class="tip-container">
|
||||
<div class="color-tip">
|
||||
<div class="color-tip" v-show="activeBtn === 'list'">
|
||||
单体信息
|
||||
<span class="tip minwd">最低单体温度</span>
|
||||
<span class="tip maxwd">最高单体温度</span>
|
||||
|
||||
Reference in New Issue
Block a user