|
@@ -1,20 +1,28 @@
|
|
|
<template>
|
|
|
<div class='add-form'>
|
|
|
- <div class='form1'>
|
|
|
- <span class='span1'>图例编码</span>
|
|
|
- <span class='span2'>图例名称</span>
|
|
|
- <span class='span3' v-if='ruleForm.Type=="Zone" || ruleForm.Type=="Image"'>展示预览</span>
|
|
|
- </div>
|
|
|
<div class='form2'>
|
|
|
<div class='input-left'>
|
|
|
- <el-input v-model='ruleForm.Code' disabled style='width:200px;height:32px;margin-right:48px;'></el-input>
|
|
|
- <el-input v-model='ruleForm.Name' style='width:200px;height:32px;'></el-input>
|
|
|
- <div class='title'>单位</div>
|
|
|
- <div class='type'>图例类型</div>
|
|
|
- <el-input v-model='ruleForm.Unit' style='width:200px;height:32px;'></el-input>
|
|
|
- <el-select v-model='ruleForm.Type' placeholder='请选择' style='width:200px;height:32px;margin-left:46px' @change='initGraph'>
|
|
|
- <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
|
- </el-select>
|
|
|
+ <el-row :gutter='20'>
|
|
|
+ <el-col :span='12'>
|
|
|
+ <div>图例编码</div>
|
|
|
+ <el-input v-model='ruleForm.Id' style='width:200px;height:32px;' disabled></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span='12'>
|
|
|
+ <div class='start'>图例名称</div>
|
|
|
+ <el-input v-model='ruleForm.Name' style='width:200px;height:32px;'></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span='12' style='margin-top:20px'>
|
|
|
+ <div class>单位</div>
|
|
|
+ <el-input v-model='ruleForm.Unit' style='width:200px;height:32px;'></el-input>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span='12' style='margin-top:20px'>
|
|
|
+ <div class='start'>图例类型</div>
|
|
|
+ <el-select v-model='ruleForm.Type' placeholder='请选择' style='width:200px;height:32px' @change='initGraph'>
|
|
|
+ <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
<div class='input-right' ref='graph' v-show='ruleForm.Type=="Zone" || ruleForm.Type=="Image" || ruleForm.Type =="Line"'>
|
|
|
<div v-show=' ruleForm.Type=="Image" && ruleForm.Url' class='input-right'>
|
|
@@ -26,8 +34,8 @@
|
|
|
</div>
|
|
|
<div v-if='ruleForm.Type=="Zone" || ruleForm.Type=="Line"' class='form3'>
|
|
|
<div class='form3-top'>
|
|
|
- <span class='form3-span1' v-if='ruleForm.Type=="Zone"'>填充色以及透明度</span>
|
|
|
- <span class='form3-span3'>边框颜色</span>
|
|
|
+ <span class='form3-span1 start' v-if='ruleForm.Type=="Zone"'>填充色以及透明度</span>
|
|
|
+ <span class='form3-span3 start'>边框颜色</span>
|
|
|
<span class='form3-span4'>边框线型</span>
|
|
|
<span class='form3-span5'>边框粗细</span>
|
|
|
</div>
|
|
@@ -89,19 +97,21 @@
|
|
|
<el-select v-model='value' placeholder='请选择' size='small' style='width:200px;margin-right:48px'>
|
|
|
<el-option v-for='item in options2' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
|
</el-select>-->
|
|
|
-
|
|
|
- <TreeSelect
|
|
|
- tipPlace='top'
|
|
|
- width='200'
|
|
|
- style=' margin-right:48px;'
|
|
|
- :notNull='true'
|
|
|
- :returnParentNode='false'
|
|
|
- :isShowAllChoice='true'
|
|
|
- :choseArea='true'
|
|
|
- :data='deviceList'
|
|
|
- @change='treeConfirmDevice'
|
|
|
- :hideClear='true'
|
|
|
- />
|
|
|
+ <span class='device-list'>
|
|
|
+ <TreeSelect
|
|
|
+ tipPlace='top'
|
|
|
+ width='200'
|
|
|
+ class='aaaaa'
|
|
|
+ style=' margin-right:48px;'
|
|
|
+ :notNull='true'
|
|
|
+ :returnParentNode='false'
|
|
|
+ :isShowAllChoice='true'
|
|
|
+ :choseArea='true'
|
|
|
+ :data='deviceList'
|
|
|
+ @change='treeConfirmDevice'
|
|
|
+ :hideClear='true'
|
|
|
+ />
|
|
|
+ </span>
|
|
|
|
|
|
<!-- <TreeSelect
|
|
|
tipPlace='top'
|
|
@@ -444,18 +454,15 @@ export default {
|
|
|
color: #646c73;
|
|
|
margin: 16px 0 0 72px;
|
|
|
font-size: 14px;
|
|
|
+ .start::after {
|
|
|
+ content: '*';
|
|
|
+ color: #f56c6c;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
.ant-input-number {
|
|
|
border-radius: 4px 0 0 4px;
|
|
|
}
|
|
|
- .form1 {
|
|
|
- margin-bottom: 8px;
|
|
|
- .span1 {
|
|
|
- margin-right: 192px;
|
|
|
- }
|
|
|
- .span2 {
|
|
|
- margin-right: 220px;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
.form2 {
|
|
|
display: flex;
|
|
|
.input-left {
|
|
@@ -526,7 +533,7 @@ export default {
|
|
|
margin-right: 102px;
|
|
|
}
|
|
|
.form4-span3 {
|
|
|
- margin-left: 37px;
|
|
|
+ margin-left: 75px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -542,14 +549,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .span2::after,
|
|
|
- .type::after,
|
|
|
- .form3-span1::after,
|
|
|
- .form3-span3::after {
|
|
|
- content: '*';
|
|
|
- color: #f56c6c;
|
|
|
- margin-left: 4px;
|
|
|
- }
|
|
|
.upload-demo {
|
|
|
display: flex;
|
|
|
}
|
|
@@ -565,5 +564,13 @@ export default {
|
|
|
position: absolute;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+ /deep/ .p-transfer-left {
|
|
|
+ background: yellow;
|
|
|
+ width: 325px !important;
|
|
|
+ word-break: break-all;
|
|
|
+ white-space: normal;
|
|
|
+ word-break: break-all;
|
|
|
+ word-wrap: break-word;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|