mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

lb #36

Merged
g7hoo merged 13 commits from lb into test 2023-09-27 17:00:53 +08:00
Conversation 0 Commits 13 Files Changed 14 +95800 -253
5 changed files with 95800 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5c796cd44f - Show all commits

81
src/views/equipment/timing-diagram/status/demo.html Normal file
View 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
View File

95464
src/views/equipment/timing-diagram/status/echarts.js Normal file
View File

File diff suppressed because it is too large Load Diff

235
src/views/equipment/timing-diagram/status/gantt.js Normal file
View 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
}
}
}

273
src/views/equipment/timing-diagram/status/index.vue
View File

@ -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;