add custom echarts demo
This commit is contained in:
parent
fe0b5538a8
commit
5c796cd44f
81
src/views/equipment/timing-diagram/status/demo.html
Normal file
81
src/views/equipment/timing-diagram/status/demo.html
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div
|
||||||
|
id="app"
|
||||||
|
style="width: 100vw; height: 80vh; background: #ccc3; margin: 24px"></div>
|
||||||
|
|
||||||
|
<script src="./echarts.js"></script>
|
||||||
|
<script>
|
||||||
|
const option = {
|
||||||
|
grid: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
top: 0,
|
||||||
|
height: 40,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
top: 80,
|
||||||
|
height: 40,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
gridIndex: 0,
|
||||||
|
type: 'category',
|
||||||
|
// axisTick: { show: false },
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
id: 1,
|
||||||
|
gridIndex: 1,
|
||||||
|
// axisTick: { show: false },
|
||||||
|
data: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
gridIndex: 0,
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {},
|
||||||
|
splitLine: { show: false }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gridIndex: 1,
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {},
|
||||||
|
splitLine: { show: false }
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
xAxisIndex: 0,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
data: [150, 230, 224, 218, 135, 147, 260],
|
||||||
|
type: 'line',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xAxisIndex: 1,
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: [1, 2, 3, 4, 5],
|
||||||
|
type: 'line',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const el = document.getElementById('app');
|
||||||
|
const myChart = echarts.init(el);
|
||||||
|
|
||||||
|
console.log('mychart', myChart);
|
||||||
|
myChart.setOption(option);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
0
src/views/equipment/timing-diagram/status/demo.js
Normal file
0
src/views/equipment/timing-diagram/status/demo.js
Normal file
95464
src/views/equipment/timing-diagram/status/echarts.js
Normal file
95464
src/views/equipment/timing-diagram/status/echarts.js
Normal file
File diff suppressed because it is too large
Load Diff
235
src/views/equipment/timing-diagram/status/gantt.js
Normal file
235
src/views/equipment/timing-diagram/status/gantt.js
Normal file
@ -0,0 +1,235 @@
|
|||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
|
||||||
|
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] * 1;
|
||||||
|
// 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(),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/** 颜色配置 */
|
||||||
|
const types = [
|
||||||
|
{ name: '运行', color: '#5ad8a6' },
|
||||||
|
{ name: '故障', color: '#fc9c91' },
|
||||||
|
{ name: '计划停机', color: '#000' },
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
/** 从时间戳获取 startTime */
|
||||||
|
function getStartTime(timestamp) {
|
||||||
|
return new Date(new Date(timestamp).toLocaleDateString()).getTime();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default class GanttGraph {
|
||||||
|
constructor(el) {
|
||||||
|
this.chart = null;
|
||||||
|
this.el = el;
|
||||||
|
/** 默认配置 */
|
||||||
|
this.grid = {
|
||||||
|
top: 32,
|
||||||
|
left: 128,
|
||||||
|
right: 128,
|
||||||
|
bottom: 64,
|
||||||
|
}
|
||||||
|
this.tooltip = {
|
||||||
|
formatter: function (params) {
|
||||||
|
return (
|
||||||
|
params.marker +
|
||||||
|
params.name +
|
||||||
|
': ' +
|
||||||
|
new Date(params.value[1]).toLocaleTimeString() +
|
||||||
|
' - ' +
|
||||||
|
new Date(params.value[2]).toLocaleTimeString()
|
||||||
|
);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
this.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,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
this.yAxis = [
|
||||||
|
{
|
||||||
|
interval: 40,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
// data: [], // <====
|
||||||
|
data: ['设备1', '设备2', '设备3', '设备4'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
this.series = [
|
||||||
|
{
|
||||||
|
type: 'custom',
|
||||||
|
renderItem: renderItem,
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
},
|
||||||
|
encode: {
|
||||||
|
x: [1, 2],
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
// data: [], // <===
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '运行',
|
||||||
|
value: [
|
||||||
|
0,
|
||||||
|
1691568181000,
|
||||||
|
1691568181000 + 60 * 60 * 1000,
|
||||||
|
60 * 10 * 1000,
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[0].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '计划停机',
|
||||||
|
value: [
|
||||||
|
0,
|
||||||
|
1691578581000,
|
||||||
|
1691578581000 + 10 * 60 * 1000,
|
||||||
|
60 * 10 * 1000,
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[2].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '运行',
|
||||||
|
value: [
|
||||||
|
1,
|
||||||
|
1691568181000,
|
||||||
|
1691568181000 + 60 * 60 * 1000,
|
||||||
|
60 * 10 * 1000,
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[0].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '故障',
|
||||||
|
value: [
|
||||||
|
2,
|
||||||
|
1691538181000,
|
||||||
|
1691538181000 + 60 * 60 * 1000,
|
||||||
|
60 * 10 * 1000,
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[1].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '运行',
|
||||||
|
value: [
|
||||||
|
2,
|
||||||
|
1691578181000,
|
||||||
|
1691578181000 + 90 * 60 * 1000,
|
||||||
|
90 * 10 * 1000,
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[0].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '计划停机',
|
||||||
|
value: [
|
||||||
|
3,
|
||||||
|
1691528181000,
|
||||||
|
1691528181000 + 240 * 60 * 1000,
|
||||||
|
240 * 10 * 1000,
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[2].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.chart = echarts.init(this.el);
|
||||||
|
this.chart.setOption(this.getOption())
|
||||||
|
}
|
||||||
|
|
||||||
|
getOption() {
|
||||||
|
const { grid, xAxis, yAxis, series, tooltip } = this;
|
||||||
|
return {
|
||||||
|
grid, xAxis, yAxis, series, tooltip
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -78,41 +78,7 @@
|
|||||||
class="graphs"
|
class="graphs"
|
||||||
v-show="graphList.length"
|
v-show="graphList.length"
|
||||||
id="status-chart"
|
id="status-chart"
|
||||||
style="height: 1px; flex: 1">
|
style="height: 1px; flex: 1"></div>
|
||||||
<!-- <div class="graph" v-for="eq in graphList" :key="eq.key">
|
|
||||||
<h2 class="graph-title">{{ eq.key }}</h2>
|
|
||||||
|
|
||||||
<div class="graph-content">
|
|
||||||
<el-popover
|
|
||||||
trigger="hover"
|
|
||||||
v-for="blc in eq"
|
|
||||||
:key="blc.startTime"
|
|
||||||
:title="
|
|
||||||
blc.status == 0
|
|
||||||
? '运行'
|
|
||||||
: blc.status == 2
|
|
||||||
? '故障'
|
|
||||||
: '计划停机'
|
|
||||||
"
|
|
||||||
placement="top"
|
|
||||||
:content="new Date(blc.startTime).toLocaleTimeString()">
|
|
||||||
<div
|
|
||||||
slot="reference"
|
|
||||||
:key="blc.startTime + '__div'"
|
|
||||||
class="graph-item-fixed tick"
|
|
||||||
:class="{
|
|
||||||
running: blc.status == 0,
|
|
||||||
fault: blc.status == 2,
|
|
||||||
stop: blc.status == 1,
|
|
||||||
}"
|
|
||||||
:style="{ height: '32px', width: blc.duration * 2 + 'px' }"
|
|
||||||
:data-time="
|
|
||||||
new Date(blc.startTime).toLocaleTimeString()
|
|
||||||
"></div>
|
|
||||||
</el-popover>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
<h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
|
<h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
|
||||||
</div>
|
</div>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -141,46 +107,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
// import * as echarts from 'echarts';
|
||||||
|
import Gantt from './gantt';
|
||||||
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] * 1;
|
|
||||||
// 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(),
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SGStatus',
|
name: 'SGStatus',
|
||||||
@ -209,18 +137,13 @@ export default {
|
|||||||
{
|
{
|
||||||
type: 'datePicker',
|
type: 'datePicker',
|
||||||
label: '时间段',
|
label: '时间段',
|
||||||
// dateType: 'daterange', // datetimerange
|
|
||||||
dateType: 'date',
|
dateType: 'date',
|
||||||
// format: 'yyyy-MM-dd HH:mm:ss',
|
|
||||||
format: 'yyyy-MM-dd',
|
format: 'yyyy-MM-dd',
|
||||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
// valueFormat: 'timestamp',
|
|
||||||
rangeSeparator: '-',
|
rangeSeparator: '-',
|
||||||
// startPlaceholder: '开始日期',
|
|
||||||
// endPlaceholder: '结束日期',
|
|
||||||
placeholder: '选择日期',
|
placeholder: '选择日期',
|
||||||
// defaultTime: ['00:00:00', '23:59:59'],
|
|
||||||
param: 'recordTime',
|
param: 'recordTime',
|
||||||
|
required: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: 'button',
|
||||||
@ -248,6 +171,8 @@ export default {
|
|||||||
graphList: [],
|
graphList: [],
|
||||||
open: false,
|
open: false,
|
||||||
eqList: [],
|
eqList: [],
|
||||||
|
startTime: null,
|
||||||
|
gantt: null
|
||||||
// demo: [
|
// demo: [
|
||||||
// [
|
// [
|
||||||
// {
|
// {
|
||||||
@ -268,176 +193,6 @@ 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: [], // <====
|
|
||||||
data: ['设备1', '设备2', '设备3', '设备4'],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
axisLine: {
|
|
||||||
// show: false,
|
|
||||||
lineStyle: {
|
|
||||||
color: '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: [],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'custom',
|
|
||||||
renderItem: renderItem,
|
|
||||||
itemStyle: {
|
|
||||||
opacity: 0.8,
|
|
||||||
},
|
|
||||||
encode: {
|
|
||||||
x: [1, 2],
|
|
||||||
y: 0,
|
|
||||||
},
|
|
||||||
// data: [], // <===
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '运行',
|
|
||||||
value: [
|
|
||||||
0,
|
|
||||||
1691568181000,
|
|
||||||
1691568181000 + 60 * 60 * 1000,
|
|
||||||
60 * 10 * 1000,
|
|
||||||
],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[0].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '计划停机',
|
|
||||||
value: [
|
|
||||||
0,
|
|
||||||
1691578581000,
|
|
||||||
1691578581000 + 10 * 60 * 1000,
|
|
||||||
60 * 10 * 1000,
|
|
||||||
],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[2].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '运行',
|
|
||||||
value: [
|
|
||||||
1,
|
|
||||||
1691568181000,
|
|
||||||
1691568181000 + 60 * 60 * 1000,
|
|
||||||
60 * 10 * 1000,
|
|
||||||
],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[0].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '故障',
|
|
||||||
value: [
|
|
||||||
2,
|
|
||||||
1691538181000,
|
|
||||||
1691538181000 + 60 * 60 * 1000,
|
|
||||||
60 * 10 * 1000,
|
|
||||||
],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[1].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '运行',
|
|
||||||
value: [
|
|
||||||
2,
|
|
||||||
1691578181000,
|
|
||||||
1691578181000 + 90 * 60 * 1000,
|
|
||||||
90 * 10 * 1000,
|
|
||||||
],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[0].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '计划停机',
|
|
||||||
value: [
|
|
||||||
3,
|
|
||||||
1691528181000,
|
|
||||||
1691528181000 + 240 * 60 * 1000,
|
|
||||||
240 * 10 * 1000,
|
|
||||||
],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[2].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
@ -445,7 +200,7 @@ export default {
|
|||||||
this.initProductline();
|
this.initProductline();
|
||||||
this.initWorksection();
|
this.initWorksection();
|
||||||
this.initEquipment();
|
this.initEquipment();
|
||||||
this.getList();
|
// this.getList();
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
watch: {
|
watch: {
|
||||||
@ -514,7 +269,8 @@ export default {
|
|||||||
|
|
||||||
initChart() {
|
initChart() {
|
||||||
const el = document.getElementById('status-chart');
|
const el = document.getElementById('status-chart');
|
||||||
this.chart = echarts.init(el);
|
this.gantt = new Gantt(el);
|
||||||
|
this.gantt.init();
|
||||||
},
|
},
|
||||||
|
|
||||||
/** 重置查询条件 */
|
/** 重置查询条件 */
|
||||||
@ -595,6 +351,10 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
handleSearchBarSelectChange({ param, value }) {
|
handleSearchBarSelectChange({ param, value }) {
|
||||||
|
if (!value) {
|
||||||
|
this.searchBarFormConfig[1].selectOptions = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
switch (param) {
|
switch (param) {
|
||||||
case 'lineId':
|
case 'lineId':
|
||||||
this.$axios({
|
this.$axios({
|
||||||
@ -619,6 +379,13 @@ export default {
|
|||||||
handleSearchBarBtnClick({ btnName, ...payload }) {
|
handleSearchBarBtnClick({ btnName, ...payload }) {
|
||||||
switch (btnName) {
|
switch (btnName) {
|
||||||
case 'search':
|
case 'search':
|
||||||
|
if (!payload.recordTime || payload.recordTime.length <= 0) {
|
||||||
|
this.$message.error('请选择时间段');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.startTime = new Date(payload.recordTime).getTime();
|
||||||
|
|
||||||
this.queryParams.lineId = payload.lineId || null;
|
this.queryParams.lineId = payload.lineId || null;
|
||||||
this.queryParams.sectionId = payload.sectionId || null;
|
this.queryParams.sectionId = payload.sectionId || null;
|
||||||
this.queryParams.equipmentId = payload.equipmentId || null;
|
this.queryParams.equipmentId = payload.equipmentId || null;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user