bugfix
This commit is contained in:
@@ -6,7 +6,9 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="status-timegraph-container" style="background: #f2f4f9; flex: 1">
|
||||
<div
|
||||
class="status-timegraph-container"
|
||||
style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column">
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
@@ -28,10 +30,14 @@
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 16px 16px 32px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
@@ -64,9 +70,15 @@
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="main-area">
|
||||
<div class="graphs" v-if="graphList.length">
|
||||
<div class="graph" v-for="eq in graphList" :key="eq.key">
|
||||
<div
|
||||
class="main-area"
|
||||
style="flex: 1; display: flex; flex-direction: column">
|
||||
<div
|
||||
class="graphs"
|
||||
v-show="graphList.length"
|
||||
id="status-chart"
|
||||
style="height: 1px; flex: 1">
|
||||
<!-- <div class="graph" v-for="eq in graphList" :key="eq.key">
|
||||
<h2 class="graph-title">{{ eq.key }}</h2>
|
||||
|
||||
<div class="graph-content">
|
||||
@@ -98,9 +110,9 @@
|
||||
"></div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<h2 v-else>请添加设备</h2>
|
||||
<h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
@@ -128,12 +140,65 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
var data = [];
|
||||
var categories = [];
|
||||
var types = [
|
||||
{ name: '运行', color: '#5ad8a6' },
|
||||
{ name: '故障', color: '#fc9c91' },
|
||||
{ name: '停机', color: '#000' },
|
||||
];
|
||||
function getStartTime(timestamp) {
|
||||
return new Date(new Date(timestamp).toLocaleDateString()).getTime();
|
||||
}
|
||||
function renderItem(params, api) {
|
||||
var categoryIndex = api.value(0);
|
||||
var start = api.coord([api.value(1), categoryIndex]);
|
||||
var end = api.coord([api.value(2), categoryIndex]);
|
||||
// var height = api.size([0, 1])[1] * 0.8;
|
||||
var height = 56
|
||||
var rectShape = echarts.graphic.clipRectByRect(
|
||||
{
|
||||
x: start[0],
|
||||
y: start[1] - height / 2,
|
||||
width: end[0] - start[0],
|
||||
height: height,
|
||||
},
|
||||
{
|
||||
x: params.coordSys.x,
|
||||
y: params.coordSys.y,
|
||||
width: params.coordSys.width,
|
||||
height: params.coordSys.height,
|
||||
}
|
||||
);
|
||||
return (
|
||||
rectShape && {
|
||||
type: 'rect',
|
||||
transition: ['shape'],
|
||||
shape: rectShape,
|
||||
style: api.style(),
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
data.push({
|
||||
name: 'running',
|
||||
value: [0, 1691568181000, 1691568181000 + 60 * 60 * 1000, 60],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default {
|
||||
name: 'SGStatus',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
@@ -153,15 +218,17 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间段',
|
||||
dateType: 'daterange', // datetimerange
|
||||
// dateType: 'daterange', // datetimerange
|
||||
dateType: 'date',
|
||||
// format: 'yyyy-MM-dd HH:mm:ss',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
// valueFormat: 'timestamp',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始日期',
|
||||
endPlaceholder: '结束日期',
|
||||
defaultTime: ['00:00:00', '23:59:59'],
|
||||
// startPlaceholder: '开始日期',
|
||||
// endPlaceholder: '结束日期',
|
||||
placeholder: '选择日期',
|
||||
// defaultTime: ['00:00:00', '23:59:59'],
|
||||
param: 'recordTime',
|
||||
},
|
||||
{
|
||||
@@ -210,6 +277,90 @@ export default {
|
||||
// },
|
||||
// ],
|
||||
// ],
|
||||
chartOption: {
|
||||
grid: {
|
||||
top: 32,
|
||||
left: 128,
|
||||
right: 128,
|
||||
bottom: 64,
|
||||
},
|
||||
tooltip: {
|
||||
// show: false,
|
||||
formatter: function (params) {
|
||||
return (
|
||||
params.marker +
|
||||
params.name +
|
||||
': ' +
|
||||
new Date(params.value[1]).toLocaleTimeString() +
|
||||
' - ' +
|
||||
new Date(params.value[2]).toLocaleTimeString()
|
||||
);
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
min: getStartTime(1691568181000),
|
||||
max: getStartTime(1691568181000 + 3600 * 24 * 1000),
|
||||
splitNumber: 10,
|
||||
axisLabel: {
|
||||
// rotate: -15,
|
||||
formatter: function (val) {
|
||||
return new Date(val).toLocaleTimeString();
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
interval: 40,
|
||||
axisLine: {
|
||||
// show: false,
|
||||
lineStyle: {
|
||||
color: '',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 18,
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
},
|
||||
data: categories,
|
||||
},
|
||||
{
|
||||
axisLine: {
|
||||
// show: false,
|
||||
lineStyle: {
|
||||
color: '',
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'custom',
|
||||
renderItem: renderItem,
|
||||
itemStyle: {
|
||||
opacity: 0.8,
|
||||
},
|
||||
encode: {
|
||||
x: [1, 2],
|
||||
y: 0,
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
@@ -219,7 +370,38 @@ export default {
|
||||
this.initEquipment();
|
||||
this.getList();
|
||||
},
|
||||
mounted() {},
|
||||
watch: {
|
||||
graphList: {
|
||||
handler(val) {
|
||||
if (val && val.length) {
|
||||
this.$nextTick(() => {
|
||||
if (!this.chart) this.initChart();
|
||||
this.setInitialConfig();
|
||||
this.handleGraphList();
|
||||
});
|
||||
}
|
||||
return;
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setInitialConfig() {
|
||||
console.log('in setInitialConfig', this.chartOption);
|
||||
this.chart.setOption(this.chartOption);
|
||||
},
|
||||
|
||||
handleGraphList() {
|
||||
console.log('in handleGraphList:', this.graphList);
|
||||
},
|
||||
|
||||
initChart() {
|
||||
const el = document.getElementById('status-chart');
|
||||
this.chart = echarts.init(el);
|
||||
},
|
||||
|
||||
/** 重置查询条件 */
|
||||
initQuery() {
|
||||
this.queryParams.lineId = null;
|
||||
@@ -303,7 +485,23 @@ export default {
|
||||
this.queryParams.lineId = payload.lineId || null;
|
||||
this.queryParams.sectionId = payload.sectionId || null;
|
||||
this.queryParams.equipmentId = payload.equipmentId || null;
|
||||
this.queryParams.recordTime = payload.recordTime || null;
|
||||
this.queryParams.recordTime = payload.recordTime
|
||||
? [
|
||||
payload.recordTime,
|
||||
new Date(
|
||||
new Date(payload.recordTime).getTime() + 24 * 3600 * 1000
|
||||
)
|
||||
.toLocaleDateString()
|
||||
.split('/')
|
||||
.map((value, index) => {
|
||||
if (index == 1 || index == 2) {
|
||||
return value.padStart(2, '0');
|
||||
}
|
||||
return value;
|
||||
})
|
||||
.join('-') + ' 00:00:00',
|
||||
]
|
||||
: null;
|
||||
this.getList();
|
||||
break;
|
||||
case 'compare':
|
||||
@@ -493,4 +691,13 @@ export default {
|
||||
background: #0b58ff;
|
||||
}
|
||||
}
|
||||
|
||||
.echarts__status-chart {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.echarts__status-chart > div {
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user