lb #43
@ -10,6 +10,8 @@
|
|||||||
ref="form"
|
ref="form"
|
||||||
:model="form"
|
:model="form"
|
||||||
:label-width="`${labelWidth}px`"
|
:label-width="`${labelWidth}px`"
|
||||||
|
:size="size"
|
||||||
|
:label-position="labelPosition"
|
||||||
v-loading="formLoading">
|
v-loading="formLoading">
|
||||||
<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
|
<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
|
||||||
<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
|
<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
|
||||||
@ -119,7 +121,15 @@ export default {
|
|||||||
disabled: {
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
}
|
},
|
||||||
|
labelPosition: {
|
||||||
|
type: String,
|
||||||
|
default: 'right',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@ -151,7 +151,7 @@ export default {
|
|||||||
name: '',
|
name: '',
|
||||||
plcParamName: '',
|
plcParamName: '',
|
||||||
unit: '',
|
unit: '',
|
||||||
collection: '',
|
collection: 1,
|
||||||
minValue: '',
|
minValue: '',
|
||||||
maxValue: '',
|
maxValue: '',
|
||||||
defaultValue: '',
|
defaultValue: '',
|
||||||
@ -370,7 +370,7 @@ export default {
|
|||||||
name: '',
|
name: '',
|
||||||
plcParamName: '',
|
plcParamName: '',
|
||||||
unit: '',
|
unit: '',
|
||||||
collection: '',
|
collection: 1,
|
||||||
minValue: '',
|
minValue: '',
|
||||||
maxValue: '',
|
maxValue: '',
|
||||||
defaultValue: '',
|
defaultValue: '',
|
||||||
|
|||||||
@ -35,6 +35,7 @@
|
|||||||
key="drawer-dialog-form"
|
key="drawer-dialog-form"
|
||||||
v-if="showForm"
|
v-if="showForm"
|
||||||
ref="form"
|
ref="form"
|
||||||
|
label-position="top"
|
||||||
:dataForm="form"
|
:dataForm="form"
|
||||||
:rows="formRows" />
|
:rows="formRows" />
|
||||||
</div>
|
</div>
|
||||||
@ -46,6 +47,8 @@
|
|||||||
:page="section.pageNo || 1"
|
:page="section.pageNo || 1"
|
||||||
:limit="section.pageSize || 10"
|
:limit="section.pageSize || 10"
|
||||||
:table-data="list"
|
:table-data="list"
|
||||||
|
:add-button-show="mode.includes('detail') ? null : '添加属性'"
|
||||||
|
@emitButtonClick="handleAddAttr"
|
||||||
@emitFun="handleEmitFun">
|
@emitFun="handleEmitFun">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="section.tableBtn"
|
v-if="section.tableBtn"
|
||||||
@ -59,22 +62,18 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="drawer-body__footer">
|
<div class="drawer-body__footer">
|
||||||
<el-button style="margin-right: 10px" @click="handleCancel">
|
<el-button style="" @click="handleCancel">取消</el-button>
|
||||||
返回
|
|
||||||
</el-button>
|
|
||||||
<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
|
<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
|
||||||
编辑
|
编辑
|
||||||
</el-button>
|
</el-button>
|
||||||
<span v-else>
|
<el-button v-else type="primary" @click="handleCancel">确定</el-button>
|
||||||
<el-button type="primary" @click="handleSave">保存</el-button>
|
|
||||||
<!-- sections的第二项必须是 属性列表 -->
|
<!-- sections的第二项必须是 属性列表 -->
|
||||||
<el-button
|
<!-- <el-button
|
||||||
v-if="sections[1].allowAdd"
|
v-if="sections[1].allowAdd"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="handleAddAttr">
|
@click="handleAddAttr">
|
||||||
添加属性
|
添加属性
|
||||||
</el-button>
|
</el-button> -->
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -177,13 +176,14 @@ export default {
|
|||||||
...col,
|
...col,
|
||||||
style: {
|
style: {
|
||||||
left: 0,
|
left: 0,
|
||||||
right: 'unset'
|
right: 'unset',
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
...col,
|
...col,
|
||||||
bind: {
|
bind: {
|
||||||
|
...col.bind,
|
||||||
// 详情 模式下，禁用各种输入
|
// 详情 模式下，禁用各种输入
|
||||||
disabled: this.mode == 'detail',
|
disabled: this.mode == 'detail',
|
||||||
},
|
},
|
||||||
@ -210,7 +210,6 @@ export default {
|
|||||||
this.form = data;
|
this.form = data;
|
||||||
this.showForm = true;
|
this.showForm = true;
|
||||||
this.infoQuery = query;
|
this.infoQuery = query;
|
||||||
console.log('setting form: ', this.form, data);
|
|
||||||
} else if (section.key == 'attrs') {
|
} else if (section.key == 'attrs') {
|
||||||
this.attrQuery = query;
|
this.attrQuery = query;
|
||||||
this.list = data.list;
|
this.list = data.list;
|
||||||
@ -331,17 +330,19 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
// 提交属性表
|
// 提交属性表
|
||||||
async submitAttrForm() {
|
submitAttrForm() {
|
||||||
this.$refs['attrForm'].validate((valid) => {
|
this.$refs['attrForm'].validate(async (valid) => {
|
||||||
if (!valid) {
|
if (!valid) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
});
|
|
||||||
console.log('this.attrform', this.attrForm);
|
try {
|
||||||
const isEdit = this.attrForm.id != null;
|
const isEdit = this.attrForm.id != null;
|
||||||
this.attrFormSubmitting = true;
|
this.attrFormSubmitting = true;
|
||||||
const res = await this.$axios({
|
const res = await this.$axios({
|
||||||
url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate,
|
url: isEdit
|
||||||
|
? this.sections[1].urlUpdate
|
||||||
|
: this.sections[1].urlCreate,
|
||||||
method: isEdit ? 'put' : 'post',
|
method: isEdit ? 'put' : 'post',
|
||||||
data: this.attrForm,
|
data: this.attrForm,
|
||||||
});
|
});
|
||||||
@ -358,6 +359,15 @@ export default {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
this.attrFormSubmitting = false;
|
this.attrFormSubmitting = false;
|
||||||
|
} catch (err) {
|
||||||
|
this.$message({
|
||||||
|
message: err,
|
||||||
|
type: 'error',
|
||||||
|
duration: 1500,
|
||||||
|
});
|
||||||
|
this.attrFormSubmitting = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
closeAttrForm() {
|
closeAttrForm() {
|
||||||
|
|||||||
@ -36,11 +36,14 @@
|
|||||||
:dialogVisible="open"
|
:dialogVisible="open"
|
||||||
@close="cancel"
|
@close="cancel"
|
||||||
@cancel="cancel"
|
@cancel="cancel"
|
||||||
|
width="60%"
|
||||||
@confirm="submitForm">
|
@confirm="submitForm">
|
||||||
<DialogForm
|
<DialogForm
|
||||||
v-if="open"
|
v-if="open"
|
||||||
key="index-dialog-form"
|
key="index-dialog-form"
|
||||||
ref="form"
|
ref="form"
|
||||||
|
label-position="top"
|
||||||
|
size="small"
|
||||||
:dataForm="form"
|
:dataForm="form"
|
||||||
:rows="rows" />
|
:rows="rows" />
|
||||||
</base-dialog>
|
</base-dialog>
|
||||||
@ -155,7 +158,7 @@ export default {
|
|||||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
},
|
},
|
||||||
{ prop: 'name', label: '设备名称' },
|
{ prop: 'name', label: '设备名称' },
|
||||||
{ width: 256, prop: 'code', label: '检测编码' },
|
{ width: 256, prop: 'code', label: '设备编码' },
|
||||||
{ prop: 'equipmentType', label: '设备类型' },
|
{ prop: 'equipmentType', label: '设备类型' },
|
||||||
{ prop: 'enName', label: '英文名称' },
|
{ prop: 'enName', label: '英文名称' },
|
||||||
{ prop: 'abbr', label: '缩写' },
|
{ prop: 'abbr', label: '缩写' },
|
||||||
@ -239,8 +242,6 @@ export default {
|
|||||||
prop: 'code',
|
prop: 'code',
|
||||||
url: '/base/equipment/getCode',
|
url: '/base/equipment/getCode',
|
||||||
},
|
},
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
{
|
||||||
input: true,
|
input: true,
|
||||||
label: '英文名称',
|
label: '英文名称',
|
||||||
@ -250,6 +251,8 @@ export default {
|
|||||||
// disabled: true, // some condition, like detail mode...
|
// disabled: true, // some condition, like detail mode...
|
||||||
// }
|
// }
|
||||||
},
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
{
|
{
|
||||||
input: true,
|
input: true,
|
||||||
label: '缩写',
|
label: '缩写',
|
||||||
@ -259,13 +262,15 @@ export default {
|
|||||||
// disabled: true, // some condition, like detail mode...
|
// disabled: true, // some condition, like detail mode...
|
||||||
// }
|
// }
|
||||||
},
|
},
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
{
|
||||||
select: true,
|
select: true,
|
||||||
label: '设备类型',
|
label: '设备类型',
|
||||||
prop: 'equipmentTypeId',
|
prop: 'equipmentTypeId',
|
||||||
url: '/base/equipment-type/page?pageNo=1&pageSize=100',
|
url: '/base/equipment-type/page?pageNo=1&pageSize=100',
|
||||||
|
bind: {
|
||||||
|
filterable: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
// select: true,
|
// select: true,
|
||||||
@ -286,8 +291,6 @@ export default {
|
|||||||
label: '进厂日期',
|
label: '进厂日期',
|
||||||
prop: 'enterTime',
|
prop: 'enterTime',
|
||||||
},
|
},
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
{
|
||||||
input: true,
|
input: true,
|
||||||
prop: 'tvalue',
|
prop: 'tvalue',
|
||||||
@ -302,11 +305,14 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
{
|
{
|
||||||
input: true,
|
input: true,
|
||||||
label: '产品加工时间',
|
label: '产品加工时间（s）',
|
||||||
prop: 'processingTime',
|
prop: 'processingTime',
|
||||||
rules: [
|
rules: [
|
||||||
|
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||||
{
|
{
|
||||||
type: 'number',
|
type: 'number',
|
||||||
message: '请输入正确的数字值',
|
message: '请输入正确的数字值',
|
||||||
@ -315,8 +321,7 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
{
|
||||||
input: true,
|
input: true,
|
||||||
label: '制造商',
|
label: '制造商',
|
||||||
@ -524,7 +529,6 @@ export default {
|
|||||||
},
|
},
|
||||||
// overwrite basicPageMixin 里的 处理表格按钮 方法
|
// overwrite basicPageMixin 里的 处理表格按钮 方法
|
||||||
handleTableBtnClick({ data, type }) {
|
handleTableBtnClick({ data, type }) {
|
||||||
console.log('[handleTableBtnClick]', data, type);
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'edit':
|
case 'edit':
|
||||||
this.reset();
|
this.reset();
|
||||||
|
|||||||
@ -267,7 +267,7 @@ export default {
|
|||||||
handleDelete(row) {
|
handleDelete(row) {
|
||||||
const id = row.id;
|
const id = row.id;
|
||||||
this.$modal
|
this.$modal
|
||||||
.confirm('是否确认删除设备类型编号为"' + id + '"的数据项?')
|
.confirm('是否确认删除设备类型"' + row.name + '"?')
|
||||||
.then(function () {
|
.then(function () {
|
||||||
return deleteEquipmentType(id);
|
return deleteEquipmentType(id);
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,191 +0,0 @@
|
|||||||
|
|
||||||
// filename: gantt.vue
|
|
||||||
// author: liubin
|
|
||||||
// date: 2023 -09 - 25 14: 28: 12
|
|
||||||
// description: 甘特图
|
|
||||||
|
|
||||||
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @param {*} params
|
|
||||||
* @param {*} api
|
|
||||||
*
|
|
||||||
* https://echarts.apache.org/zh/option.html#series-custom.renderItem.arguments.params
|
|
||||||
*/
|
|
||||||
function renderItem(params, api) { }
|
|
||||||
|
|
||||||
export default class Gantt {
|
|
||||||
constructor(el) {
|
|
||||||
this.chart = echarts.init(el);
|
|
||||||
let options = {
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'custom',
|
|
||||||
coordinateSystem: 'cartesian2d',
|
|
||||||
renderItem: renderItem,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
this.chart.setOption(options);
|
|
||||||
}
|
|
||||||
|
|
||||||
update(options) {
|
|
||||||
this.chart.setOption(options);
|
|
||||||
}
|
|
||||||
|
|
||||||
resize() {
|
|
||||||
// todo
|
|
||||||
}
|
|
||||||
|
|
||||||
destroy() {
|
|
||||||
this.chart.dispose();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var data = [];
|
|
||||||
var categories = ['设备1', '设备2', '设备3'];
|
|
||||||
var types = [
|
|
||||||
{ name: '运行', color: '#7b9ce1' },
|
|
||||||
{ name: '故障', color: '#bd6d6c' },
|
|
||||||
{ name: '停机', color: '#75d874' },
|
|
||||||
];
|
|
||||||
// return new Date(new Date(timestamp).toLocaleDateString()).getTime()
|
|
||||||
// })(1691568181000))
|
|
||||||
function getStartTime(timestamp) {
|
|
||||||
return new Date(new Date(timestamp).toLocaleDateString()).getTime()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
data.push({
|
|
||||||
name: 'running',
|
|
||||||
value: [0, 1691568181000, 1691568181000 + 60 * 60 * 1000, 60],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[0].color
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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 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()
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
tooltip: {
|
|
||||||
// show: false,
|
|
||||||
formatter: function (params) {
|
|
||||||
return params.marker + params.name + ': ' + new Date(params.value[1]).toLocaleTimeString() + ' - ' + new Date(params.value[2]).toLocaleTimeString();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// title: {
|
|
||||||
// text: 'Profile',
|
|
||||||
// left: 'center'
|
|
||||||
// },
|
|
||||||
// dataZoom: [
|
|
||||||
// {
|
|
||||||
// type: 'slider',
|
|
||||||
// filterMode: 'weakFilter',
|
|
||||||
// showDataShadow: false,
|
|
||||||
// top: 400,
|
|
||||||
// labelFormatter: ''
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// type: 'inside',
|
|
||||||
// filterMode: 'weakFilter'
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
grid: {
|
|
||||||
height: 300
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'time',
|
|
||||||
min: getStartTime(1691568181000),
|
|
||||||
max: getStartTime(1691568181000 + 3600 * 24 * 1000),
|
|
||||||
splitNumber: 10,
|
|
||||||
// interval: 60*3600*1000,
|
|
||||||
// scale: true,
|
|
||||||
axisLabel: {
|
|
||||||
// rotate: -15,
|
|
||||||
formatter: function (val) {
|
|
||||||
return new Date(val).toLocaleTimeString()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: [{
|
|
||||||
axisLine: {
|
|
||||||
// show: false,
|
|
||||||
lineStyle: {
|
|
||||||
color: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
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
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
@ -74,7 +74,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LineChart from './components/lineChart.vue';
|
import LineChart from './components/lineChart.vue';
|
||||||
import response from './response.json';
|
// import response from './response.json';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SGProduction',
|
name: 'SGProduction',
|
||||||
|
|||||||
@ -1,497 +0,0 @@
|
|||||||
<!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: #fff; margin: 24px"></div>
|
|
||||||
|
|
||||||
<script src="./echarts.js"></script>
|
|
||||||
<script>
|
|
||||||
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]);
|
|
||||||
console.log(`
|
|
||||||
categoryIndex: ${categoryIndex},
|
|
||||||
start: ${start},
|
|
||||||
end: ${end},
|
|
||||||
api.value0: ${api.value(0)}
|
|
||||||
api.value1: ${api.value(1)}
|
|
||||||
api.value2: ${api.value(2)}
|
|
||||||
params.coordSys: ${JSON.stringify(params.coordSys)}
|
|
||||||
api.size: ${api.size([0, 1])}
|
|
||||||
api.style(): ${JSON.stringify(api.style())}
|
|
||||||
`);
|
|
||||||
|
|
||||||
var height = api.size([0, 1])[1] * 2;
|
|
||||||
// 用一个矩形去截取另一个矩形
|
|
||||||
var rectShape = echarts.graphic.clipRectByRect(
|
|
||||||
// 被截取矩形
|
|
||||||
{
|
|
||||||
x: start[0],
|
|
||||||
y: start[1] - height / 2,
|
|
||||||
width: end[0] - start[0],
|
|
||||||
height: height,
|
|
||||||
},
|
|
||||||
// {x: 0, y: 0, width: 2000, height: 60 } // <== 也行...
|
|
||||||
// 截取矩形
|
|
||||||
{
|
|
||||||
// 截取掉grid以外的部分，实质是计算方块的偏移量
|
|
||||||
x: params.coordSys.x, // {number} grid rect 的 x
|
|
||||||
// y: params.coordSys.y, // {number} grid rect 的 y
|
|
||||||
y: params.coordSys.y - 16, // {number} grid rect 的 y，并多减掉 16 个单位
|
|
||||||
// width: end[0] - start[0],
|
|
||||||
width: params.coordSys.width, // {number} grid rect 的 width
|
|
||||||
height: params.coordSys.height, // {number} grid rect 的 height
|
|
||||||
}
|
|
||||||
);
|
|
||||||
console.log(`------------- ${JSON.stringify(rectShape)} -------------- `)
|
|
||||||
return (
|
|
||||||
rectShape && {
|
|
||||||
type: 'rect',
|
|
||||||
transition: ['shape'],
|
|
||||||
shape: rectShape,
|
|
||||||
style: api.style(),
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getXaxisRange(startTime) {
|
|
||||||
return Array(24)
|
|
||||||
.fill(startTime)
|
|
||||||
.map((item, index) => {
|
|
||||||
return new Date(item + index * 3600 * 1000)
|
|
||||||
.toLocaleTimeString()
|
|
||||||
.split(':')
|
|
||||||
.slice(0, 2)
|
|
||||||
.join(':');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTodayStart(today) {
|
|
||||||
const [y, m, d] = [
|
|
||||||
today.getFullYear(),
|
|
||||||
today.getMonth(),
|
|
||||||
today.getDate(),
|
|
||||||
];
|
|
||||||
return new Date(y, m, d).getTime();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 颜色配置 */
|
|
||||||
const types = [
|
|
||||||
{ name: '运行', color: '#288AFF' },
|
|
||||||
{ name: '故障', color: '#FC9C91' },
|
|
||||||
{ name: '计划停机', color: '#FFDC94' },
|
|
||||||
{ name: '空白', color: '#F2F4F9' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'none',
|
|
||||||
// label: {
|
|
||||||
// backgroundColor: '#6a7985',
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
formatter: (params) => {
|
|
||||||
// console.log('formatter', params)
|
|
||||||
// return `
|
|
||||||
// <div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div>
|
|
||||||
// <div style="display: flex; justify-content: space-between; min-width: 128px; align-items: center;">
|
|
||||||
// <span>${params[0].seriesName}</span>
|
|
||||||
// <span>${params[0].name}</span>
|
|
||||||
// </div>
|
|
||||||
// `
|
|
||||||
return `
|
|
||||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
|
||||||
<h1 style="font-size: 18px; font-weight: 600;">${params.seriesName}</h1>
|
|
||||||
<h2 style="font-size: 18px; font-weight: 400; letter-spacing: 1px;">${params.name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params.color} "></span></h2>
|
|
||||||
</div>
|
|
||||||
<div>${new Date(params.value[1]).toLocaleString()} ~ ${new Date(params.value[2]).toLocaleString()}</div>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: [
|
|
||||||
{
|
|
||||||
id: 0,
|
|
||||||
top: 10,
|
|
||||||
left: 128,
|
|
||||||
right: 64,
|
|
||||||
height: 56,
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// id: 1,
|
|
||||||
// top: 80,
|
|
||||||
// height: 56,
|
|
||||||
// },
|
|
||||||
// ***************** 添加第二个grid *****************
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
top: 180,
|
|
||||||
left: 128,
|
|
||||||
right: 64,
|
|
||||||
height: 56
|
|
||||||
}
|
|
||||||
],
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
id: 'asdf',
|
|
||||||
gridIndex: 0,
|
|
||||||
axisTick: {
|
|
||||||
alignWithLabel: true,
|
|
||||||
inside: true,
|
|
||||||
},
|
|
||||||
type: 'time',
|
|
||||||
min: getTodayStart(new Date()), // <===
|
|
||||||
max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
|
|
||||||
splitNumber: 10,
|
|
||||||
axisLabel: {
|
|
||||||
margin: 12,
|
|
||||||
// rotate: -15,
|
|
||||||
formatter: function (val) {
|
|
||||||
return new Date(val)
|
|
||||||
.toLocaleTimeString()
|
|
||||||
.split(':')
|
|
||||||
.slice(0, 2)
|
|
||||||
.join(':');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
boundaryGap: false,
|
|
||||||
// data: getXaxisRange(getTodayStart(new Date())),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'asdff',
|
|
||||||
gridIndex: 0,
|
|
||||||
axisLabel: { show: false },
|
|
||||||
axisLine: { show: false },
|
|
||||||
},
|
|
||||||
// ***************** 添加第二个 xAxis *****************
|
|
||||||
{
|
|
||||||
id: 'asdfjk',
|
|
||||||
gridIndex: 1,
|
|
||||||
axisTick: {
|
|
||||||
alignWithLabel: true,
|
|
||||||
inside: true,
|
|
||||||
},
|
|
||||||
type: 'time',
|
|
||||||
min: getTodayStart(new Date()), // <===
|
|
||||||
max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
|
|
||||||
splitNumber: 10,
|
|
||||||
axisLabel: {
|
|
||||||
margin: 12,
|
|
||||||
// rotate: -15,
|
|
||||||
formatter: function (val) {
|
|
||||||
return new Date(val)
|
|
||||||
.toLocaleTimeString()
|
|
||||||
.split(':')
|
|
||||||
.slice(0, 2)
|
|
||||||
.join(':');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
boundaryGap: false,
|
|
||||||
// data: getXaxisRange(getTodayStart(new Date())),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'fjkd',
|
|
||||||
gridIndex: 1,
|
|
||||||
axisLabel: { show: false },
|
|
||||||
axisLine: { show: false },
|
|
||||||
},
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
// 主y轴
|
|
||||||
{
|
|
||||||
id: 0,
|
|
||||||
gridIndex: 0,
|
|
||||||
type: 'value',
|
|
||||||
splitLine: { show: false },
|
|
||||||
name: '设备1',
|
|
||||||
nameLocation: 'center',
|
|
||||||
nameGap: 56,
|
|
||||||
nameRotate: 0,
|
|
||||||
nameTextStyle: {
|
|
||||||
fontSize: 18,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {},
|
|
||||||
},
|
|
||||||
axisLabel: { show: false },
|
|
||||||
axisTick: { show: false },
|
|
||||||
},
|
|
||||||
// 辅y轴
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
gridIndex: 0,
|
|
||||||
type: 'value',
|
|
||||||
splitLine: { show: false },
|
|
||||||
axisLabel: { show: false },
|
|
||||||
axisTick: { show: false },
|
|
||||||
},
|
|
||||||
// ***************** 添加第二个 yAxis *****************
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
gridIndex: 1,
|
|
||||||
type: 'value',
|
|
||||||
splitLine: { show: false },
|
|
||||||
name: '设备1',
|
|
||||||
nameLocation: 'center',
|
|
||||||
nameGap: 56,
|
|
||||||
nameRotate: 0,
|
|
||||||
nameTextStyle: {
|
|
||||||
fontSize: 18,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {},
|
|
||||||
},
|
|
||||||
axisLabel: { show: false },
|
|
||||||
axisTick: { show: false },
|
|
||||||
},
|
|
||||||
// 辅y轴
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
gridIndex: 1,
|
|
||||||
type: 'value',
|
|
||||||
splitLine: { show: false },
|
|
||||||
axisLabel: { show: false },
|
|
||||||
axisTick: { show: false },
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
// 沉默的背景
|
|
||||||
xAxisIndex: 0,
|
|
||||||
yAxisIndex: 0,
|
|
||||||
type: 'custom',
|
|
||||||
renderItem: renderItem,
|
|
||||||
silent: true,
|
|
||||||
itemStyle: {
|
|
||||||
opacity: 0.8,
|
|
||||||
},
|
|
||||||
encode: {
|
|
||||||
x: [1, 2],
|
|
||||||
y: 0,
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '无数据',
|
|
||||||
value: [0, 1696694400000, 1696780800000, 0],
|
|
||||||
tooltip: { show: false },
|
|
||||||
// silent: true,
|
|
||||||
// animation: false,
|
|
||||||
// universalTransition: { enable: false },
|
|
||||||
// hoverAnimation: false,
|
|
||||||
// selectMode: true,
|
|
||||||
// select: { disabled: true },
|
|
||||||
// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } },
|
|
||||||
// z: 0,
|
|
||||||
// zlevel: 0,
|
|
||||||
// emphasis: { disabled: true },
|
|
||||||
itemStyle: {
|
|
||||||
color: '#ccc',
|
|
||||||
opacity: 0.3,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '设备1',
|
|
||||||
xAxisIndex: 0,
|
|
||||||
yAxisIndex: 0,
|
|
||||||
type: 'custom',
|
|
||||||
renderItem: renderItem,
|
|
||||||
itemStyle: {
|
|
||||||
opacity: 0.8,
|
|
||||||
},
|
|
||||||
encode: {
|
|
||||||
x: [1, 2],
|
|
||||||
y: 0,
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '运行',
|
|
||||||
value: [0, 1696694400000, 1696699400000, 0],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[0].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '运行',
|
|
||||||
value: [0, 1696730000000, 1696734040450, 0],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[0].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '故障',
|
|
||||||
value: [0, 1696737040000, 1696754040450, 0],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[1].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '计划停机',
|
|
||||||
value: [0, 1696755000000, 1696759000000, 0],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[2].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '运行',
|
|
||||||
value: [0, 1696759000000, 1696769000000, 0],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[0].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '计划停机',
|
|
||||||
value: [0, 1696769400000, 1696779000000, 0],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[2].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
// ***************** 添加第二个设备 *****************
|
|
||||||
{
|
|
||||||
// 沉默的背景
|
|
||||||
xAxisIndex: 2,
|
|
||||||
yAxisIndex: 2,
|
|
||||||
type: 'custom',
|
|
||||||
renderItem: renderItem,
|
|
||||||
silent: true,
|
|
||||||
itemStyle: {
|
|
||||||
opacity: 0.8,
|
|
||||||
},
|
|
||||||
encode: {
|
|
||||||
x: [1, 2],
|
|
||||||
y: 0,
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '无数据',
|
|
||||||
value: [0, 1696694400000, 1696780800000, 0],
|
|
||||||
tooltip: { show: false },
|
|
||||||
// silent: true,
|
|
||||||
// animation: false,
|
|
||||||
// universalTransition: { enable: false },
|
|
||||||
// hoverAnimation: false,
|
|
||||||
// selectMode: true,
|
|
||||||
// select: { disabled: true },
|
|
||||||
// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } },
|
|
||||||
// z: 0,
|
|
||||||
// zlevel: 0,
|
|
||||||
// emphasis: { disabled: true },
|
|
||||||
itemStyle: {
|
|
||||||
color: '#ccc',
|
|
||||||
opacity: 0.3,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '设备2',
|
|
||||||
xAxisIndex: 2,
|
|
||||||
yAxisIndex: 2,
|
|
||||||
type: 'custom',
|
|
||||||
renderItem: renderItem,
|
|
||||||
itemStyle: {
|
|
||||||
opacity: 0.8,
|
|
||||||
},
|
|
||||||
encode: {
|
|
||||||
x: [1, 2],
|
|
||||||
y: 0,
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '运行',
|
|
||||||
value: [0, 1696694400000, 1696699400000, 0],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[0].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// showBackground: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '运行',
|
|
||||||
value: [0, 1696730000000, 1696734040450, 0],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[0].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '故障',
|
|
||||||
value: [0, 1696737040000, 1696754040450, 0],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[1].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '计划停机',
|
|
||||||
value: [0, 1696755000000, 1696759000000, 0],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[2].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '运行',
|
|
||||||
value: [0, 1696759000000, 1696769000000, 0],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[0].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '计划停机',
|
|
||||||
value: [0, 1696769400000, 1696779000000, 0],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: types[2].color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
const el = document.getElementById('app');
|
|
||||||
const myChart = echarts.init(el);
|
|
||||||
|
|
||||||
console.log('mychart', myChart);
|
|
||||||
myChart.setOption(option);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue
Block a user