test #47

Merged
gtz217 merged 273 commits from test into master 2023-10-17 08:53:54 +08:00
8 changed files with 76 additions and 740 deletions
Showing only changes of commit 8f634d012c - Show all commits

View File

@ -10,6 +10,8 @@
ref="form"
:model="form"
:label-width="`${labelWidth}px`"
:size="size"
:label-position="labelPosition"
v-loading="formLoading">
<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">
@ -119,7 +121,15 @@ export default {
disabled: {
type: Boolean,
default: false,
}
},
labelPosition: {
type: String,
default: 'right',
},
size: {
type: String,
default: '',
},
},
data() {
return {

View File

@ -151,7 +151,7 @@ export default {
name: '',
plcParamName: '',
unit: '',
collection: '',
collection: 1,
minValue: '',
maxValue: '',
defaultValue: '',
@ -370,7 +370,7 @@ export default {
name: '',
plcParamName: '',
unit: '',
collection: '',
collection: 1,
minValue: '',
maxValue: '',
defaultValue: '',

View File

@ -35,6 +35,7 @@
key="drawer-dialog-form"
v-if="showForm"
ref="form"
label-position="top"
:dataForm="form"
:rows="formRows" />
</div>
@ -46,6 +47,8 @@
:page="section.pageNo || 1"
:limit="section.pageSize || 10"
:table-data="list"
:add-button-show="mode.includes('detail') ? null : '添加属性'"
@emitButtonClick="handleAddAttr"
@emitFun="handleEmitFun">
<method-btn
v-if="section.tableBtn"
@ -59,22 +62,18 @@
</div>
<div class="drawer-body__footer">
<el-button style="margin-right: 10px" @click="handleCancel">
返回
</el-button>
<el-button style="" @click="handleCancel">取消</el-button>
<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
编辑
</el-button>
<span v-else>
<el-button type="primary" @click="handleSave">保存</el-button>
<!-- sections的第二项必须是 属性列表 -->
<el-button
<el-button v-else type="primary" @click="handleCancel">确定</el-button>
<!-- sections的第二项必须是 属性列表 -->
<!-- <el-button
v-if="sections[1].allowAdd"
type="primary"
@click="handleAddAttr">
添加属性
</el-button>
</span>
</el-button> -->
</div>
</div>
@ -177,13 +176,14 @@ export default {
...col,
style: {
left: 0,
right: 'unset'
}
}
right: 'unset',
},
};
}
return {
...col,
bind: {
...col.bind,
//
disabled: this.mode == 'detail',
},
@ -210,7 +210,6 @@ export default {
this.form = data;
this.showForm = true;
this.infoQuery = query;
console.log('setting form: ', this.form, data);
} else if (section.key == 'attrs') {
this.attrQuery = query;
this.list = data.list;
@ -331,33 +330,44 @@ export default {
},
//
async submitAttrForm() {
this.$refs['attrForm'].validate((valid) => {
submitAttrForm() {
this.$refs['attrForm'].validate(async (valid) => {
if (!valid) {
return;
}
});
console.log('this.attrform', this.attrForm);
const isEdit = this.attrForm.id != null;
this.attrFormSubmitting = true;
const res = await this.$axios({
url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate,
method: isEdit ? 'put' : 'post',
data: this.attrForm,
});
if (res.code == 0) {
this.closeAttrForm();
this.$message({
message: `${isEdit ? '更新' : '创建'}成功`,
type: 'success',
duration: 1500,
onClose: () => {
this.getAttrList();
},
});
}
this.attrFormSubmitting = false;
try {
const isEdit = this.attrForm.id != null;
this.attrFormSubmitting = true;
const res = await this.$axios({
url: isEdit
? this.sections[1].urlUpdate
: this.sections[1].urlCreate,
method: isEdit ? 'put' : 'post',
data: this.attrForm,
});
if (res.code == 0) {
this.closeAttrForm();
this.$message({
message: `${isEdit ? '更新' : '创建'}成功`,
type: 'success',
duration: 1500,
onClose: () => {
this.getAttrList();
},
});
}
this.attrFormSubmitting = false;
} catch (err) {
this.$message({
message: err,
type: 'error',
duration: 1500,
});
this.attrFormSubmitting = false;
}
});
},
closeAttrForm() {

View File

@ -36,11 +36,14 @@
:dialogVisible="open"
@close="cancel"
@cancel="cancel"
width="60%"
@confirm="submitForm">
<DialogForm
v-if="open"
key="index-dialog-form"
ref="form"
label-position="top"
size="small"
:dataForm="form"
:rows="rows" />
</base-dialog>
@ -155,7 +158,7 @@ export default {
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
},
{ prop: 'name', label: '设备名称' },
{ width: 256, prop: 'code', label: '检测编码' },
{ width: 256, prop: 'code', label: '设备编码' },
{ prop: 'equipmentType', label: '设备类型' },
{ prop: 'enName', label: '英文名称' },
{ prop: 'abbr', label: '缩写' },
@ -239,8 +242,6 @@ export default {
prop: 'code',
url: '/base/equipment/getCode',
},
],
[
{
input: true,
label: '英文名称',
@ -250,6 +251,8 @@ export default {
// disabled: true, // some condition, like detail mode...
// }
},
],
[
{
input: true,
label: '缩写',
@ -259,13 +262,15 @@ export default {
// disabled: true, // some condition, like detail mode...
// }
},
],
[
{
select: true,
label: '设备类型',
prop: 'equipmentTypeId',
url: '/base/equipment-type/page?pageNo=1&pageSize=100',
bind: {
filterable: true,
},
},
// {
// select: true,
@ -286,8 +291,6 @@ export default {
label: '进厂日期',
prop: 'enterTime',
},
],
[
{
input: true,
prop: 'tvalue',
@ -302,11 +305,14 @@ export default {
},
],
},
],
[
{
input: true,
label: '产品加工时间',
label: '产品加工时间s',
prop: 'processingTime',
rules: [
{ required: true, message: '不能为空', trigger: 'blur' },
{
type: 'number',
message: '请输入正确的数字值',
@ -315,8 +321,7 @@ export default {
},
],
},
],
[
{
input: true,
label: '制造商',
@ -524,7 +529,6 @@ export default {
},
// overwrite basicPageMixin
handleTableBtnClick({ data, type }) {
console.log('[handleTableBtnClick]', data, type);
switch (type) {
case 'edit':
this.reset();

View File

@ -267,7 +267,7 @@ export default {
handleDelete(row) {
const id = row.id;
this.$modal
.confirm('是否确认删除设备类型编号为"' + id + '"的数据项?')
.confirm('是否确认删除设备类型"' + row.name + '"?')
.then(function () {
return deleteEquipmentType(id);
})

View File

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

View File

@ -74,7 +74,7 @@
<script>
import LineChart from './components/lineChart.vue';
import response from './response.json';
// import response from './response.json';
export default {
name: 'SGProduction',

View File

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