lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: lijianfu:meizhou
Branches Tags
lijianfu:dev
lijianfu:meizhou
..
compare: lijianfu:dev
Branches Tags
lijianfu:dev
lijianfu:meizhou

1 Commits
meizhou ... dev

Author SHA1 Message Date
selia-zx 788ec7f38d 1.中央空调-系统控制添加if条件给子组件
7 days ago
7 changed files with 489 additions and 980 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats
  1. BIN
      src/assets/images/meizhou.png
  2. 9
      src/assets/styles/element-ui.scss
  3. 40
      src/components/Crontab/index.vue
  4. 4
      src/views/aircAndWindc/awSysMonitor/index.vue
  5. 933
      src/views/centerairC/sysMonitor/index.vue
  6. 4
      src/views/monitor/job/index.vue
  7. 481
      src/views/tool/build/index.vue

BIN
src/assets/images/meizhou.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 MiB

9
src/assets/styles/element-ui.scss
Unescape View File

@ -1137,7 +1137,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding:10px !important; padding: 10px !important;
} }
/* 修改消息文本颜色 */ /* 修改消息文本颜色 */
@ -1362,13 +1362,14 @@
border: 1px solid #ff4949; border: 1px solid #ff4949;
background: #ff4949; background: #ff4949;
} }
.el-table__body tr.current-row > td.el-table__cell, .el-table__body tr.selection-row > td.el-table__cell{ .el-table__body tr.current-row > td.el-table__cell,
.el-table__body tr.selection-row > td.el-table__cell {
background-color: rgba(0, 71, 125, 0.4) !important; background-color: rgba(0, 71, 125, 0.4) !important;
} }
.el-loading-mask{ .el-loading-mask {
min-height: 800px; min-height: 800px;
} }
.el-loading-spinner{ .el-loading-spinner {
min-height: 800px; min-height: 800px;
display: flex; display: flex;
top: 0 !important; top: 0 !important;

40
src/components/Crontab/index.vue
Unescape View File

@ -70,33 +70,33 @@
<p class="title">时间表达式</p> <p class="title">时间表达式</p>
<table> <table>
<thead> <thead>
<th v-for="item of tabTitles" width="40" :key="item">{{ item }}</th> <th v-for="item of tabTitles" width="40" :key="item">{{item}}</th>
<th>Cron 表达式</th> <th>Cron 表达式</th>
</thead> </thead>
<tbody> <tbody>
<td> <td>
<span>{{ crontabValueObj.second }}</span> <span>{{crontabValueObj.second}}</span>
</td> </td>
<td> <td>
<span>{{ crontabValueObj.min }}</span> <span>{{crontabValueObj.min}}</span>
</td> </td>
<td> <td>
<span>{{ crontabValueObj.hour }}</span> <span>{{crontabValueObj.hour}}</span>
</td> </td>
<td> <td>
<span>{{ crontabValueObj.day }}</span> <span>{{crontabValueObj.day}}</span>
</td> </td>
<td> <td>
<span>{{ crontabValueObj.month }}</span> <span>{{crontabValueObj.month}}</span>
</td> </td>
<td> <td>
<span>{{ crontabValueObj.week }}</span> <span>{{crontabValueObj.week}}</span>
</td> </td>
<td> <td>
<span>{{ crontabValueObj.year }}</span> <span>{{crontabValueObj.year}}</span>
</td> </td>
<td> <td>
<span>{{ crontabValueString }}</span> <span>{{crontabValueString}}</span>
</td> </td>
</tbody> </tbody>
</table> </table>
@ -104,21 +104,9 @@
<CrontabResult :ex="crontabValueString"></CrontabResult> <CrontabResult :ex="crontabValueString"></CrontabResult>
<div class="pop_btn"> <div class="pop_btn">
<div class="primary-btn"> <div class="primary-btn"><el-button size="small" type="primary" @click="submitFill">确定</el-button></div>
<el-button size="small" type="primary" @click="submitFill" <div class="warning-btn"><el-button size="small" type="warning" @click="clearCron">重置</el-button></div>
>确定</el-button <div class="cancel-btn"><el-button size="small" type="cancel" @click="hidePopup">取消</el-button></div>
>
</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>
@ -341,7 +329,7 @@ export default {
}, },
}, },
computed: { computed: {
crontabValueString: function () { crontabValueString: function() {
let obj = this.crontabValueObj; let obj = this.crontabValueObj;
let str = let str =
obj.second + obj.second +
@ -375,7 +363,7 @@ export default {
// 隐藏部分组件 // 隐藏部分组件
}, },
}, },
mounted: function () { mounted: function() {
this.resolveExp(); this.resolveExp();
}, },
}; };

4
src/views/aircAndWindc/awSysMonitor/index.vue
Unescape View File

@ -125,7 +125,6 @@
@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"
> >
@ -138,7 +137,6 @@
@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"
> >
@ -201,7 +199,6 @@
@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"
> >
@ -218,7 +215,6 @@
@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"
> >

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

File diff suppressed because it is too large Load Diff

4
src/views/monitor/job/index.vue
Unescape View File

@ -285,7 +285,7 @@
<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%" style="width: 76%;"
v-model="form.cronExpression" v-model="form.cronExpression"
placeholder="请输入cron执行表达式" placeholder="请输入cron执行表达式"
> >
@ -428,7 +428,7 @@ import Crontab from "@/components/Crontab";
export default { export default {
components: { Crontab }, components: { Crontab },
name: "Job", // name: "Job",
dicts: ["sys_job_group", "sys_job_status"], dicts: ["sys_job_group", "sys_job_status"],
data() { data() {
return { return {

481
src/views/tool/build/index.vue
Unescape View File

@ -2,7 +2,9 @@
<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"><img :src="logo" alt="logo" /> Form Generator</div> <div class="logo">
<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">
@ -19,9 +21,7 @@
@end="onEnd" @end="onEnd"
> >
<div <div
v-for="(element, index) in inputComponents" v-for="(element, index) in inputComponents" :key="index" class="components-item"
:key="index"
class="components-item"
@click="addComponent(element)" @click="addComponent(element)"
> >
<div class="components-body"> <div class="components-body">
@ -58,18 +58,12 @@
<svg-icon icon-class="component" /> 布局型组件 <svg-icon icon-class="component" /> 布局型组件
</div> </div>
<draggable <draggable
class="components-draggable" class="components-draggable" :list="layoutComponents"
:list="layoutComponents" :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }" draggable=".components-item" :sort="false" @end="onEnd"
:clone="cloneComponent"
draggable=".components-item"
:sort="false"
@end="onEnd"
> >
<div <div
v-for="(element, index) in layoutComponents" v-for="(element, index) in layoutComponents" :key="index" class="components-item"
:key="index"
class="components-item"
@click="addComponent(element)" @click="addComponent(element)"
> >
<div class="components-body"> <div class="components-body">
@ -87,20 +81,10 @@
<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 <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">
class="copy-btn-main"
icon="el-icon-document-copy"
type="text"
@click="copy"
>
复制代码 复制代码
</el-button> </el-button>
<el-button <el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
class="delete-btn"
icon="el-icon-delete"
type="text"
@click="empty"
>
清空 清空
</el-button> </el-button>
</div> </div>
@ -112,12 +96,7 @@
:disabled="formConf.disabled" :disabled="formConf.disabled"
:label-width="formConf.labelWidth + 'px'" :label-width="formConf.labelWidth + 'px'"
> >
<draggable <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
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"
@ -152,38 +131,28 @@
: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 { import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config'
inputComponents, import { beautifierConf, titleCase } from '@/utils/index'
selectComponents, import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
layoutComponents, import { makeUpJs } from '@/utils/generator/js'
formConf, import { makeUpCss } from '@/utils/generator/css'
} from "@/utils/generator/config"; import drawingDefault from '@/utils/generator/drawingDefault'
import { beautifierConf, titleCase } from "@/utils/index"; import logo from '@/assets/logo/logo.png'
import { import CodeTypeDialog from './CodeTypeDialog'
makeUpHtml, import DraggableItem from './DraggableItem'
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: {
@ -191,7 +160,7 @@ export default {
render, render,
RightPanel, RightPanel,
CodeTypeDialog, CodeTypeDialog,
DraggableItem, DraggableItem
}, },
data() { data() {
return { return {
@ -210,214 +179,208 @@ 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 = this.activeData.placeholder.replace(oldVal, '') + val
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) => item.children = item.children.map(childItem => this.createIdAndKey(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 ( if (this.activeData[key] !== undefined
this.activeData[key] !== undefined && && typeof this.activeData[key] === typeof newTag[key]) {
typeof this.activeData[key] === typeof newTag[key] newTag[key] = this.activeData[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)) if (Array.isArray(item.children)) this.updateDrawingList(newTag, 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{
margin: 0; margin: 0;
border-bottom-color: #121315; border-bottom-color: #121315;
.el-tabs__nav { .el-tabs__nav{
border-color: #121315; border-color: #121315;
} }
} }
.el-tabs__item { .el-tabs__item{
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
color: #888a8e; color: #888a8e;
@ -426,15 +389,15 @@ export default {
margin-right: 5px; margin-right: 5px;
user-select: none; user-select: none;
} }
.el-tabs__item.is-active { .el-tabs__item.is-active{
background: #1e1e1e; background: #1e1e1e;
border-bottom-color: #1e1e1e !important; border-bottom-color: #1e1e1e!important;
color: #fff; color: #fff;
} }
.el-icon-edit { .el-icon-edit{
color: #f1fa8c; color: #f1fa8c;
} }
.el-icon-document { .el-icon-document{
color: #a95812; color: #a95812;
} }
} }
@ -450,24 +413,24 @@ export default {
overflow-x: hidden !important; overflow-x: hidden !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.center-tabs { .center-tabs{
.el-tabs__header { .el-tabs__header{
margin-bottom: 0 !important; margin-bottom: 0!important;
} }
.el-tabs__item { .el-tabs__item{
width: 50%; width: 50%;
text-align: center; text-align: center;
} }
.el-tabs__nav { .el-tabs__nav{
width: 100%; width: 100%;
} }
} }
.reg-item { .reg-item{
padding: 12px 6px; padding: 12px 6px;
background: #f8f8f8; background: #f8f8f8;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
.close-btn { .close-btn{
position: absolute; position: absolute;
right: -6px; right: -6px;
top: -6px; top: -6px;
@ -482,16 +445,16 @@ export default {
z-index: 1; z-index: 1;
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{
margin-top: 18px; margin-top: 18px;
} }
} }
.action-bar { .action-bar{
& .el-button + .el-button { & .el-button+.el-button {
margin-left: 15px; margin-left: 15px;
} }
& i { & i {
@ -502,37 +465,37 @@ export default {
} }
} }
.custom-tree-node { .custom-tree-node{
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
.node-operation { .node-operation{
float: right; float: right;
} }
i[class*="el-icon"] + i[class*="el-icon"] { i[class*="el-icon"] + i[class*="el-icon"]{
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;
} }
} }
.left-scrollbar .el-scrollbar__view { .left-scrollbar .el-scrollbar__view{
overflow-x: hidden; overflow-x: hidden;
} }
.el-rate { .el-rate{
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
} }
.el-upload__tip { .el-upload__tip{
line-height: 1.2; line-height: 1.2;
} }
$selectedColor: #f6f7ff; $selectedColor: #f6f7ff;
$lighterBlue: #409eff; $lighterBlue: #409EFF;
.container { .container {
position: relative; position: relative;
@ -551,14 +514,14 @@ $lighterBlue: #409eff;
transition: transform 0ms !important; transition: transform 0ms !important;
} }
} }
.components-draggable { .components-draggable{
padding-bottom: 20px; padding-bottom: 20px;
} }
.components-title { .components-title{
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
margin: 6px 2px; margin: 6px 2px;
.svg-icon { .svg-icon{
color: #666; color: #666;
font-size: 18px; font-size: 18px;
} }
@ -571,7 +534,7 @@ $lighterBlue: #409eff;
cursor: move; cursor: move;
border: 1px dashed #436efc; border: 1px dashed #436efc;
border-radius: 3px; border-radius: 3px;
.svg-icon { .svg-icon{
color: #777; color: #777;
font-size: 15px; font-size: 15px;
} }
@ -591,7 +554,7 @@ $lighterBlue: #409eff;
top: 0; top: 0;
height: 100vh; height: 100vh;
} }
.left-scrollbar { .left-scrollbar{
height: calc(100vh - 42px); height: calc(100vh - 42px);
overflow: hidden; overflow: hidden;
} }
@ -599,7 +562,7 @@ $lighterBlue: #409eff;
height: calc(100vh - 42px); height: calc(100vh - 42px);
overflow: hidden; overflow: hidden;
border-left: 1px solid #0e5191; border-left: 1px solid #0e5191;
border-left: 1px solid #0e5191; border-right: 1px solid #0e5191 ;
box-sizing: border-box; box-sizing: border-box;
} }
.center-board { .center-board {
@ -608,7 +571,7 @@ $lighterBlue: #409eff;
margin: 0 350px 0 260px; margin: 0 350px 0 260px;
box-sizing: border-box; box-sizing: border-box;
} }
.empty-info { .empty-info{
position: absolute; position: absolute;
top: 46%; top: 46%;
left: 0; left: 0;
@ -618,27 +581,27 @@ $lighterBlue: #409eff;
color: #ccb1ea; color: #ccb1ea;
letter-spacing: 4px; letter-spacing: 4px;
} }
.action-bar { .action-bar{
position: relative; position: relative;
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 #0e5191; 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 #0e5191; border-bottom: 1px solid #0e5191;
box-sizing: border-box; box-sizing: border-box;
} }
.logo { .logo{
position: absolute; position: absolute;
left: 12px; left: 12px;
top: 6px; top: 6px;
@ -647,16 +610,16 @@ $lighterBlue: #409eff;
font-weight: 600; font-weight: 600;
font-size: 17px; font-size: 17px;
white-space: nowrap; white-space: nowrap;
> img { > img{
width: 30px; width: 30px;
height: 30px; height: 30px;
vertical-align: top; vertical-align: top;
} }
.github { .github{
display: inline-block; display: inline-block;
vertical-align: sub; vertical-align: sub;
margin-left: 15px; margin-left: 15px;
> img { > img{
height: 22px; height: 22px;
} }
} }
@ -699,33 +662,32 @@ $lighterBlue: #409eff;
background-color: $selectedColor; background-color: $selectedColor;
} }
.active-from-item { .active-from-item {
& > .el-form-item { & > .el-form-item{
background: #4b6e91; background: #4b6e91;
border-radius: 6px; border-radius: 6px;
} }
& > .drawing-item-copy, & > .drawing-item-copy, & > .drawing-item-delete{
& > .drawing-item-delete {
display: initial; display: initial;
} }
& > .component-name { & > .component-name{
color: $lighterBlue; color: $lighterBlue;
} }
} }
.el-form-item { .el-form-item{
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
.drawing-item { .drawing-item{
position: relative; position: relative;
cursor: move; cursor: move;
&.unfocus-bordered:not(.activeFromItem) > div:first-child { &.unfocus-bordered:not(.activeFromItem) > div:first-child {
border: 1px dashed #ccc; border: 1px dashed #ccc;
} }
.el-form-item { .el-form-item{
padding: 12px 10px; padding: 12px 10px;
} }
} }
.drawing-row-item { .drawing-row-item{
position: relative; position: relative;
cursor: move; cursor: move;
box-sizing: border-box; box-sizing: border-box;
@ -736,19 +698,19 @@ $lighterBlue: #409eff;
.drawing-row-item { .drawing-row-item {
margin-bottom: 2px; margin-bottom: 2px;
} }
.el-col { .el-col{
margin-top: 22px; margin-top: 22px;
} }
.el-form-item { .el-form-item{
margin-bottom: 0; margin-bottom: 0;
} }
.drag-wrapper { .drag-wrapper{
min-height: 80px; min-height: 80px;
} }
&.active-from-item { &.active-from-item{
border: 1px dashed $lighterBlue; border: 1px dashed $lighterBlue;
} }
.component-name { .component-name{
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -758,20 +720,17 @@ $lighterBlue: #409eff;
padding: 0 6px; padding: 0 6px;
} }
} }
.drawing-item, .drawing-item, .drawing-row-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-copy, & > .drawing-item-delete{
& > .drawing-item-delete {
display: initial; display: initial;
} }
} }
& > .drawing-item-copy, & > .drawing-item-copy, & > .drawing-item-delete{
& > .drawing-item-delete {
display: none; display: none;
position: absolute; position: absolute;
top: -10px; top: -10px;
@ -785,29 +744,29 @@ $lighterBlue: #409eff;
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
} }
& > .drawing-item-copy { & > .drawing-item-copy{
right: 56px; right: 56px;
border-color: $lighterBlue; border-color: $lighterBlue;
color: $lighterBlue; color: $lighterBlue;
background: #fff; background: #fff;
&:hover { &:hover{
background: $lighterBlue; background: $lighterBlue;
color: #fff; color: #fff;
} }
} }
& > .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;
} }
} }
} }
.delete-btn::before, .delete-btn::before,
.delete-btn::after { .delete-btn::after{
display: none !important; display: none !important;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save