Compare commits

...

3 Commits
dev ... meizhou

Author SHA1 Message Date
selia-zx a74c3ad306 修改定时任务、表单构建样式 7 days ago
selia-zx 11d131c3ec 1.修改系统监测页面 7 days ago
selia-zx e068a1a14b 梅州分支 1 week ago
  1. BIN
      src/assets/images/meizhou.png
  2. 31
      src/assets/styles/element-ui.scss
  3. 18
      src/components/Crontab/index.vue
  4. 4
      src/views/aircAndWindc/awSysMonitor/index.vue
  5. 5
      src/views/centerairC/sysControl/index.vue
  6. 933
      src/views/centerairC/sysMonitor/index.vue
  7. 7
      src/views/monitor/job/index.vue
  8. 371
      src/views/tool/build/index.vue

BIN
src/assets/images/meizhou.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 MiB

31
src/assets/styles/element-ui.scss

@ -1382,3 +1382,34 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.el-tabs--border-card {
background: transparent;
border: 1px solid #0e5191 !important;
}
.el-tabs--border-card > .el-tabs__header {
background-color: transparent;
border-bottom: 1px solid #00386d;
}
.popup-main {
background: transparent !important;
}
.popup-result {
border: 1px solid #0e5191 !important;
}
.popup-result table span{
border: 1px solid #0e5191 !important;
}
.popup-result .title{
background: #405e7e !important;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
color: #fff !important;
border-right-color: transparent;
border-left-color: transparent;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item{
color: #c3cbd4;
}
.drawing-item:hover > .el-form-item, .drawing-row-item:hover > .el-form-item {
background: #b6b6b6 !important;
}

18
src/components/Crontab/index.vue

@ -104,9 +104,21 @@
<CrontabResult :ex="crontabValueString"></CrontabResult> <CrontabResult :ex="crontabValueString"></CrontabResult>
<div class="pop_btn"> <div class="pop_btn">
<el-button size="small" type="primary" @click="submitFill">确定</el-button> <div class="primary-btn">
<el-button size="small" type="warning" @click="clearCron">重置</el-button> <el-button size="small" type="primary" @click="submitFill"
<el-button size="small" @click="hidePopup">取消</el-button> >确定</el-button
>
</div>
<div class="warning-btn">
<el-button size="small" type="warning" @click="clearCron"
>重置</el-button
>
</div>
<div class="cancel-btn">
<el-button size="small" type="cancel" @click="hidePopup"
>取消</el-button
>
</div>
</div> </div>
</div> </div>
</div> </div>

4
src/views/aircAndWindc/awSysMonitor/index.vue

@ -125,6 +125,7 @@
@keyup.enter.native="handleEnter(backAirObj, $event, '℃')" @keyup.enter.native="handleEnter(backAirObj, $event, '℃')"
@input="handleInput(backAirObj)" @input="handleInput(backAirObj)"
@blur="handleBlur()" @blur="handleBlur()"
disabled
v-model="backAirObj.collectValue" v-model="backAirObj.collectValue"
size="mini" size="mini"
> >
@ -137,6 +138,7 @@
@keyup.enter.native="handleEnter(airSupplyObj, $event, '℃')" @keyup.enter.native="handleEnter(airSupplyObj, $event, '℃')"
@input="handleInput(airSupplyObj)" @input="handleInput(airSupplyObj)"
@blur="handleBlur()" @blur="handleBlur()"
disabled
v-model="airSupplyObj.collectValue" v-model="airSupplyObj.collectValue"
size="mini" size="mini"
> >
@ -199,6 +201,7 @@
@keyup.enter.native="handleEnter(waterSupplyObj, $event, '℃')" @keyup.enter.native="handleEnter(waterSupplyObj, $event, '℃')"
@input="handleInput(waterSupplyObj)" @input="handleInput(waterSupplyObj)"
@blur="handleBlur()" @blur="handleBlur()"
disabled
v-model="waterSupplyObj.collectValue" v-model="waterSupplyObj.collectValue"
size="mini" size="mini"
> >
@ -215,6 +218,7 @@
@keyup.enter.native="handleEnter(backwaterObj, $event, '℃')" @keyup.enter.native="handleEnter(backwaterObj, $event, '℃')"
@input="handleInput(backwaterObj)" @input="handleInput(backwaterObj)"
@blur="handleBlur()" @blur="handleBlur()"
disabled
v-model="backwaterObj.collectValue" v-model="backwaterObj.collectValue"
size="mini" size="mini"
> >

5
src/views/centerairC/sysControl/index.vue

@ -43,7 +43,10 @@
@operationControl="hadleOperationConrol" @operationControl="hadleOperationConrol"
></vavleheader> ></vavleheader>
</div> </div>
<div class="device-container"> <div
class="device-container"
v-if="coolingAndHeatingOutValve.length > 0"
>
<vavleheader <vavleheader
:valveList="coolingAndHeatingOutValve" :valveList="coolingAndHeatingOutValve"
@operationControl="hadleOperationConrol" @operationControl="hadleOperationConrol"

933
src/views/centerairC/sysMonitor/index.vue

File diff suppressed because it is too large Load Diff

7
src/views/monitor/job/index.vue

@ -285,16 +285,17 @@
<el-col :span="24"> <el-col :span="24">
<el-form-item label="cron表达式" prop="cronExpression"> <el-form-item label="cron表达式" prop="cronExpression">
<el-input <el-input
style="width: 76%"
v-model="form.cronExpression" v-model="form.cronExpression"
placeholder="请输入cron执行表达式" placeholder="请输入cron执行表达式"
> >
<template slot="append"> </el-input>
<div class="primary-btn">
<el-button type="primary" @click="handleShowCron"> <el-button type="primary" @click="handleShowCron">
生成表达式 生成表达式
<i class="el-icon-time el-icon--right"></i> <i class="el-icon-time el-icon--right"></i>
</el-button> </el-button>
</template> </div>
</el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" v-if="form.jobId !== undefined"> <el-col :span="24" v-if="form.jobId !== undefined">

371
src/views/tool/build/index.vue

@ -2,9 +2,7 @@
<div class="container"> <div class="container">
<div class="left-board"> <div class="left-board">
<div class="logo-wrapper"> <div class="logo-wrapper">
<div class="logo"> <div class="logo"><img :src="logo" alt="logo" /> Form Generator</div>
<img :src="logo" alt="logo"> Form Generator
</div>
</div> </div>
<el-scrollbar class="left-scrollbar"> <el-scrollbar class="left-scrollbar">
<div class="components-list"> <div class="components-list">
@ -21,7 +19,9 @@
@end="onEnd" @end="onEnd"
> >
<div <div
v-for="(element, index) in inputComponents" :key="index" class="components-item" v-for="(element, index) in inputComponents"
:key="index"
class="components-item"
@click="addComponent(element)" @click="addComponent(element)"
> >
<div class="components-body"> <div class="components-body">
@ -58,12 +58,18 @@
<svg-icon icon-class="component" /> 布局型组件 <svg-icon icon-class="component" /> 布局型组件
</div> </div>
<draggable <draggable
class="components-draggable" :list="layoutComponents" class="components-draggable"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent" :list="layoutComponents"
draggable=".components-item" :sort="false" @end="onEnd" :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
:clone="cloneComponent"
draggable=".components-item"
:sort="false"
@end="onEnd"
> >
<div <div
v-for="(element, index) in layoutComponents" :key="index" class="components-item" v-for="(element, index) in layoutComponents"
:key="index"
class="components-item"
@click="addComponent(element)" @click="addComponent(element)"
> >
<div class="components-body"> <div class="components-body">
@ -81,10 +87,20 @@
<el-button icon="el-icon-download" type="text" @click="download"> <el-button icon="el-icon-download" type="text" @click="download">
导出vue文件 导出vue文件
</el-button> </el-button>
<el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy"> <el-button
class="copy-btn-main"
icon="el-icon-document-copy"
type="text"
@click="copy"
>
复制代码 复制代码
</el-button> </el-button>
<el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty"> <el-button
class="delete-btn"
icon="el-icon-delete"
type="text"
@click="empty"
>
清空 清空
</el-button> </el-button>
</div> </div>
@ -96,7 +112,12 @@
:disabled="formConf.disabled" :disabled="formConf.disabled"
:label-width="formConf.labelWidth + 'px'" :label-width="formConf.labelWidth + 'px'"
> >
<draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup"> <draggable
class="drawing-board"
:list="drawingList"
:animation="340"
group="componentsGroup"
>
<draggable-item <draggable-item
v-for="(element, index) in drawingList" v-for="(element, index) in drawingList"
:key="element.renderKey" :key="element.renderKey"
@ -131,28 +152,38 @@
:show-file-name="showFileName" :show-file-name="showFileName"
@confirm="generate" @confirm="generate"
/> />
<input id="copyNode" type="hidden"> <input id="copyNode" type="hidden" />
</div> </div>
</template> </template>
<script> <script>
import draggable from 'vuedraggable' import draggable from "vuedraggable";
import beautifier from 'js-beautify' import beautifier from "js-beautify";
import ClipboardJS from 'clipboard' import ClipboardJS from "clipboard";
import render from '@/utils/generator/render' import render from "@/utils/generator/render";
import RightPanel from './RightPanel' import RightPanel from "./RightPanel";
import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config' import {
import { beautifierConf, titleCase } from '@/utils/index' inputComponents,
import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html' selectComponents,
import { makeUpJs } from '@/utils/generator/js' layoutComponents,
import { makeUpCss } from '@/utils/generator/css' formConf,
import drawingDefault from '@/utils/generator/drawingDefault' } from "@/utils/generator/config";
import logo from '@/assets/logo/logo.png' import { beautifierConf, titleCase } from "@/utils/index";
import CodeTypeDialog from './CodeTypeDialog' import {
import DraggableItem from './DraggableItem' makeUpHtml,
vueTemplate,
vueScript,
cssStyle,
} from "@/utils/generator/html";
import { makeUpJs } from "@/utils/generator/js";
import { makeUpCss } from "@/utils/generator/css";
import drawingDefault from "@/utils/generator/drawingDefault";
import logo from "@/assets/logo/logo.png";
import CodeTypeDialog from "./CodeTypeDialog";
import DraggableItem from "./DraggableItem";
let oldActiveId let oldActiveId;
let tempActiveData let tempActiveData;
export default { export default {
components: { components: {
@ -160,7 +191,7 @@ export default {
render, render,
RightPanel, RightPanel,
CodeTypeDialog, CodeTypeDialog,
DraggableItem DraggableItem,
}, },
data() { data() {
return { return {
@ -179,198 +210,204 @@ export default {
dialogVisible: false, dialogVisible: false,
generateConf: null, generateConf: null,
showFileName: false, showFileName: false,
activeData: drawingDefault[0] activeData: drawingDefault[0],
} };
}, },
created() { created() {
// firefox // firefox
document.body.ondrop = event => { document.body.ondrop = (event) => {
event.preventDefault() event.preventDefault();
event.stopPropagation() event.stopPropagation();
} };
}, },
watch: { watch: {
// eslint-disable-next-line func-names // eslint-disable-next-line func-names
'activeData.label': function (val, oldVal) { "activeData.label": function (val, oldVal) {
if ( if (
this.activeData.placeholder === undefined this.activeData.placeholder === undefined ||
|| !this.activeData.tag !this.activeData.tag ||
|| oldActiveId !== this.activeId oldActiveId !== this.activeId
) { ) {
return return;
} }
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val this.activeData.placeholder =
this.activeData.placeholder.replace(oldVal, "") + val;
}, },
activeId: { activeId: {
handler(val) { handler(val) {
oldActiveId = val oldActiveId = val;
},
immediate: true,
}, },
immediate: true
}
}, },
mounted() { mounted() {
const clipboard = new ClipboardJS('#copyNode', { const clipboard = new ClipboardJS("#copyNode", {
text: trigger => { text: (trigger) => {
const codeStr = this.generateCode() const codeStr = this.generateCode();
this.$notify({ this.$notify({
title: '成功', title: "成功",
message: '代码已复制到剪切板,可粘贴。', message: "代码已复制到剪切板,可粘贴。",
type: 'success' type: "success",
}) });
return codeStr return codeStr;
} },
}) });
clipboard.on('error', e => { clipboard.on("error", (e) => {
this.$message.error('代码复制失败') this.$message.error("代码复制失败");
}) });
}, },
methods: { methods: {
activeFormItem(element) { activeFormItem(element) {
this.activeData = element this.activeData = element;
this.activeId = element.formId this.activeId = element.formId;
}, },
onEnd(obj, a) { onEnd(obj, a) {
if (obj.from !== obj.to) { if (obj.from !== obj.to) {
this.activeData = tempActiveData this.activeData = tempActiveData;
this.activeId = this.idGlobal this.activeId = this.idGlobal;
} }
}, },
addComponent(item) { addComponent(item) {
const clone = this.cloneComponent(item) const clone = this.cloneComponent(item);
this.drawingList.push(clone) this.drawingList.push(clone);
this.activeFormItem(clone) this.activeFormItem(clone);
}, },
cloneComponent(origin) { cloneComponent(origin) {
const clone = JSON.parse(JSON.stringify(origin)) const clone = JSON.parse(JSON.stringify(origin));
clone.formId = ++this.idGlobal clone.formId = ++this.idGlobal;
clone.span = formConf.span clone.span = formConf.span;
clone.renderKey = +new Date() // renderKey clone.renderKey = +new Date(); // renderKey
if (!clone.layout) clone.layout = 'colFormItem' if (!clone.layout) clone.layout = "colFormItem";
if (clone.layout === 'colFormItem') { if (clone.layout === "colFormItem") {
clone.vModel = `field${this.idGlobal}` clone.vModel = `field${this.idGlobal}`;
clone.placeholder !== undefined && (clone.placeholder += clone.label) clone.placeholder !== undefined && (clone.placeholder += clone.label);
tempActiveData = clone tempActiveData = clone;
} else if (clone.layout === 'rowFormItem') { } else if (clone.layout === "rowFormItem") {
delete clone.label delete clone.label;
clone.componentName = `row${this.idGlobal}` clone.componentName = `row${this.idGlobal}`;
clone.gutter = this.formConf.gutter clone.gutter = this.formConf.gutter;
tempActiveData = clone tempActiveData = clone;
} }
return tempActiveData return tempActiveData;
}, },
AssembleFormData() { AssembleFormData() {
this.formData = { this.formData = {
fields: JSON.parse(JSON.stringify(this.drawingList)), fields: JSON.parse(JSON.stringify(this.drawingList)),
...this.formConf ...this.formConf,
} };
}, },
generate(data) { generate(data) {
const func = this[`exec${titleCase(this.operationType)}`] const func = this[`exec${titleCase(this.operationType)}`];
this.generateConf = data this.generateConf = data;
func && func(data) func && func(data);
}, },
execRun(data) { execRun(data) {
this.AssembleFormData() this.AssembleFormData();
this.drawerVisible = true this.drawerVisible = true;
}, },
execDownload(data) { execDownload(data) {
const codeStr = this.generateCode() const codeStr = this.generateCode();
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' }) const blob = new Blob([codeStr], { type: "text/plain;charset=utf-8" });
this.$download.saveAs(blob, data.fileName) this.$download.saveAs(blob, data.fileName);
}, },
execCopy(data) { execCopy(data) {
document.getElementById('copyNode').click() document.getElementById("copyNode").click();
}, },
empty() { empty() {
this.$confirm('确定要清空所有组件吗?', '提示', { type: 'warning' }).then( this.$confirm("确定要清空所有组件吗?", "提示", { type: "warning" }).then(
() => { () => {
this.drawingList = [] this.drawingList = [];
} }
) );
}, },
drawingItemCopy(item, parent) { drawingItemCopy(item, parent) {
let clone = JSON.parse(JSON.stringify(item)) let clone = JSON.parse(JSON.stringify(item));
clone = this.createIdAndKey(clone) clone = this.createIdAndKey(clone);
parent.push(clone) parent.push(clone);
this.activeFormItem(clone) this.activeFormItem(clone);
}, },
createIdAndKey(item) { createIdAndKey(item) {
item.formId = ++this.idGlobal item.formId = ++this.idGlobal;
item.renderKey = +new Date() item.renderKey = +new Date();
if (item.layout === 'colFormItem') { if (item.layout === "colFormItem") {
item.vModel = `field${this.idGlobal}` item.vModel = `field${this.idGlobal}`;
} else if (item.layout === 'rowFormItem') { } else if (item.layout === "rowFormItem") {
item.componentName = `row${this.idGlobal}` item.componentName = `row${this.idGlobal}`;
} }
if (Array.isArray(item.children)) { if (Array.isArray(item.children)) {
item.children = item.children.map(childItem => this.createIdAndKey(childItem)) item.children = item.children.map((childItem) =>
this.createIdAndKey(childItem)
);
} }
return item return item;
}, },
drawingItemDelete(index, parent) { drawingItemDelete(index, parent) {
parent.splice(index, 1) parent.splice(index, 1);
this.$nextTick(() => { this.$nextTick(() => {
const len = this.drawingList.length const len = this.drawingList.length;
if (len) { if (len) {
this.activeFormItem(this.drawingList[len - 1]) this.activeFormItem(this.drawingList[len - 1]);
} }
}) });
}, },
generateCode() { generateCode() {
const { type } = this.generateConf const { type } = this.generateConf;
this.AssembleFormData() this.AssembleFormData();
const script = vueScript(makeUpJs(this.formData, type)) const script = vueScript(makeUpJs(this.formData, type));
const html = vueTemplate(makeUpHtml(this.formData, type)) const html = vueTemplate(makeUpHtml(this.formData, type));
const css = cssStyle(makeUpCss(this.formData)) const css = cssStyle(makeUpCss(this.formData));
return beautifier.html(html + script + css, beautifierConf.html) return beautifier.html(html + script + css, beautifierConf.html);
}, },
download() { download() {
this.dialogVisible = true this.dialogVisible = true;
this.showFileName = true this.showFileName = true;
this.operationType = 'download' this.operationType = "download";
}, },
run() { run() {
this.dialogVisible = true this.dialogVisible = true;
this.showFileName = false this.showFileName = false;
this.operationType = 'run' this.operationType = "run";
}, },
copy() { copy() {
this.dialogVisible = true this.dialogVisible = true;
this.showFileName = false this.showFileName = false;
this.operationType = 'copy' this.operationType = "copy";
}, },
tagChange(newTag) { tagChange(newTag) {
newTag = this.cloneComponent(newTag) newTag = this.cloneComponent(newTag);
newTag.vModel = this.activeData.vModel newTag.vModel = this.activeData.vModel;
newTag.formId = this.activeId newTag.formId = this.activeId;
newTag.span = this.activeData.span newTag.span = this.activeData.span;
delete this.activeData.tag delete this.activeData.tag;
delete this.activeData.tagIcon delete this.activeData.tagIcon;
delete this.activeData.document delete this.activeData.document;
Object.keys(newTag).forEach(key => { Object.keys(newTag).forEach((key) => {
if (this.activeData[key] !== undefined if (
&& typeof this.activeData[key] === typeof newTag[key]) { this.activeData[key] !== undefined &&
newTag[key] = this.activeData[key] typeof this.activeData[key] === typeof newTag[key]
} ) {
}) newTag[key] = this.activeData[key];
this.activeData = newTag }
this.updateDrawingList(newTag, this.drawingList) });
this.activeData = newTag;
this.updateDrawingList(newTag, this.drawingList);
}, },
updateDrawingList(newTag, list) { updateDrawingList(newTag, list) {
const index = list.findIndex(item => item.formId === this.activeId) const index = list.findIndex((item) => item.formId === this.activeId);
if (index > -1) { if (index > -1) {
list.splice(index, 1, newTag) list.splice(index, 1, newTag);
} else { } else {
list.forEach(item => { list.forEach((item) => {
if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children) if (Array.isArray(item.children))
}) this.updateDrawingList(newTag, item.children);
} });
}
}
} }
},
},
};
</script> </script>
<style lang='scss'> <style lang="scss">
.editor-tabs { .editor-tabs {
background: #121315; background: #121315;
.el-tabs__header { .el-tabs__header {
@ -446,7 +483,7 @@ export default {
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
&:hover { &:hover {
background: rgba(210, 23, 23, 0.5) background: rgba(210, 23, 23, 0.5);
} }
} }
& + .reg-item { & + .reg-item {
@ -475,7 +512,7 @@ export default {
margin-left: 6px; margin-left: 6px;
} }
.el-icon-plus { .el-icon-plus {
color: #409EFF; color: #409eff;
} }
.el-icon-delete { .el-icon-delete {
color: #157a0c; color: #157a0c;
@ -495,7 +532,7 @@ export default {
} }
$selectedColor: #f6f7ff; $selectedColor: #f6f7ff;
$lighterBlue: #409EFF; $lighterBlue: #409eff;
.container { .container {
position: relative; position: relative;
@ -561,8 +598,8 @@ $lighterBlue: #409EFF;
.center-scrollbar { .center-scrollbar {
height: calc(100vh - 42px); height: calc(100vh - 42px);
overflow: hidden; overflow: hidden;
border-left: 1px solid #f1e8e8; border-left: 1px solid #0e5191;
border-right: 1px solid #f1e8e8; border-left: 1px solid #0e5191;
box-sizing: border-box; box-sizing: border-box;
} }
.center-board { .center-board {
@ -586,19 +623,19 @@ $lighterBlue: #409EFF;
height: 42px; height: 42px;
text-align: right; text-align: right;
padding: 0 15px; padding: 0 15px;
box-sizing: border-box;; box-sizing: border-box;
border: 1px solid #f1e8e8; border: 1px solid #0e5191;
border-top: none; border-top: none;
border-left: none; border-left: none;
.delete-btn { .delete-btn {
color: #F56C6C; color: #f56c6c;
} }
} }
.logo-wrapper { .logo-wrapper {
position: relative; position: relative;
height: 42px; height: 42px;
background: #4b6e91; background: #4b6e91;
border-bottom: 1px solid #f1e8e8; border-bottom: 1px solid #0e5191;
box-sizing: border-box; box-sizing: border-box;
} }
.logo { .logo {
@ -666,7 +703,8 @@ $lighterBlue: #409EFF;
background: #4b6e91; background: #4b6e91;
border-radius: 6px; border-radius: 6px;
} }
& > .drawing-item-copy, & > .drawing-item-delete{ & > .drawing-item-copy,
& > .drawing-item-delete {
display: initial; display: initial;
} }
& > .component-name { & > .component-name {
@ -720,17 +758,20 @@ $lighterBlue: #409EFF;
padding: 0 6px; padding: 0 6px;
} }
} }
.drawing-item, .drawing-row-item{ .drawing-item,
.drawing-row-item {
&:hover { &:hover {
& > .el-form-item { & > .el-form-item {
background: $selectedColor; background: $selectedColor;
border-radius: 6px; border-radius: 6px;
} }
& > .drawing-item-copy, & > .drawing-item-delete{ & > .drawing-item-copy,
& > .drawing-item-delete {
display: initial; display: initial;
} }
} }
& > .drawing-item-copy, & > .drawing-item-delete{ & > .drawing-item-copy,
& > .drawing-item-delete {
display: none; display: none;
position: absolute; position: absolute;
top: -10px; top: -10px;
@ -756,11 +797,11 @@ $lighterBlue: #409EFF;
} }
& > .drawing-item-delete { & > .drawing-item-delete {
right: 24px; right: 24px;
border-color: #F56C6C; border-color: #f56c6c;
color: #F56C6C; color: #f56c6c;
background: #fff; background: #fff;
&:hover { &:hover {
background: #F56C6C; background: #f56c6c;
color: #fff; color: #fff;
} }
} }

Loading…
Cancel
Save