<!--
|
* @Date: 2024-04-18 21:52:18
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-12-06 17:54:28
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/TimeAlarm.vue
|
-->
|
<template>
|
<div ref="processCharts" style="width: 100%;height:80px;" id="record"></div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
import T from '@/components/scEcharts/echarts-theme-T.js';
|
import moment from 'moment'
|
export default {
|
data() {
|
return {
|
option: {
|
tooltip: {
|
trigger: 'axis',
|
position: 'bottom',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
grid: {
|
left: 0,
|
right: 0,
|
width: "100%"
|
},
|
xAxis: {
|
type: 'value',
|
interval: 0.05,
|
axisLabel: {
|
show: false,
|
margin: 0
|
},
|
splitLine: {
|
show: false
|
},
|
minorSplitLine: {
|
show: false
|
},
|
splitArea: {
|
show: false
|
},
|
axisTick: {
|
show: false
|
}
|
// "type": "value",
|
// "interval": 0.05,
|
// "axisLabel": {
|
|
// }
|
},
|
yAxis: {
|
type: 'category',
|
data: [''],
|
show: false
|
},
|
series: []
|
}
|
}
|
},
|
props: ['index','tableData'],
|
methods: {
|
getTableData(id) {
|
this.$HTTP.get(`/api/workinghour/working-process`, {id}).then(res => {
|
if (res.code === 200) {
|
if(res.data.length == 0) return;
|
var timeRange = {};
|
console.log(res.data,1111111)
|
timeRange.startTime = res.data[0].startTime;
|
timeRange.endTime = res.data[res.data.length - 1].endTime;
|
var total = Math.abs(moment(timeRange.startTime).diff(moment(timeRange.endTime)));
|
var start = timeRange.startTime;
|
var arr = [];
|
res.data.map((item, i) => {
|
var current = Math.abs(moment(start).diff(moment(item.endTime)))
|
start = item.endTime;
|
//console.log(current / total,'百分比')
|
if(item.deviceStatus == "2") {
|
item.deviceStatusName = "运行";
|
item.color = "#307f45";
|
}else {
|
item.deviceStatusName = "待机";
|
item.color = "#fdff85";
|
}
|
var obj = {name: item.deviceStatusName,type: 'bar',stack: 'total',barWidth: "20px",data: [current / total],itemStyle: {color: item.color},"tooltip": {
|
"trigger": "item",
|
formatter: (value, ticket) => {
|
return `${item.deviceStatusName}: ${item.startTime} - ${item.endTime}<br />程序名称: ${item.progName}`;
|
}
|
}};
|
arr.push(obj);
|
})
|
this.option.series = arr;
|
var recordDom = this.$refs.processCharts;
|
var myChart = echarts.init(recordDom);
|
myChart.setOption(this.option);
|
}
|
})
|
}
|
},
|
mounted() {
|
var id = this.tableData[this.index - 1].id;
|
this.getTableData(id);
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
