登录页添加文字提示，物料PU占比修改校验规则，拓扑图添加物料修改文字颜色
This commit is contained in:
parent
f11e40b3e8
commit
e900e43825
@ -13,7 +13,7 @@ import {
|
||||
Stencil,
|
||||
Transform
|
||||
} from '@antv/x6'
|
||||
|
||||
import { searchMaterialsPage } from "@/api/business/database/material";
|
||||
// @ts-ignore
|
||||
import insertCss from 'insert-css'
|
||||
import { updateProjects} from "@/api/business/project";
|
||||
@ -43,6 +43,19 @@ const props = defineProps({
|
||||
default: {}
|
||||
},
|
||||
})
|
||||
|
||||
const materialList:any = ref([]) // 物料列表
|
||||
|
||||
function gettableData() { // 获取物料列表
|
||||
let params = {
|
||||
pageNum: 1,
|
||||
pageSize: 99,
|
||||
};
|
||||
searchMaterialsPage(params).then((result:any) => {
|
||||
materialList.value = result.records;
|
||||
}).catch((err) => {
|
||||
});
|
||||
}
|
||||
//获取所有项目列表
|
||||
const sizeSchemaInfo:any = ref({});
|
||||
|
||||
@ -62,12 +75,13 @@ const projectInfo:any = ref(props.projectInfo) // 项目信息
|
||||
const isScenario = ref(false) //是否展示历史模拟场景
|
||||
const isDisplay = ref(true) // 是否显示
|
||||
const isExpansionandcontraction = ref(false) // 是否显示展开收起按钮
|
||||
const isExplanation = ref(false) // 是否显示物料说明
|
||||
// 为了协助代码演示
|
||||
let graph: Graph
|
||||
onMounted(() => {
|
||||
preWork()
|
||||
getSizeSchemaList()
|
||||
|
||||
gettableData()
|
||||
// #region 初始化画布
|
||||
graph = new Graph({
|
||||
container: document.getElementById('graph-container') as HTMLElement,
|
||||
@ -1272,8 +1286,16 @@ function closeEditdevice(e:any){ // 关闭编辑设备弹窗
|
||||
selectedDevice.value = e
|
||||
let retrievedNode:any = graph.getCellById(nodeId.value)
|
||||
retrievedNode.store.data.deviceInfo = e
|
||||
if(retrievedNode.store.data.materialInfo != null && retrievedNode.store.data.materialInfo.name != null){
|
||||
retrievedNode.attr('text/text',e.name +'('+ retrievedNode.store.data.materialInfo.name + ')')
|
||||
retrievedNode.attr('label/text', e.name +'('+ retrievedNode.store.data.materialInfo.name + ')')
|
||||
}else{
|
||||
retrievedNode.attr('text/text', e.name)
|
||||
retrievedNode.attr('label/text', e.name)
|
||||
}
|
||||
|
||||
|
||||
|
||||
isEditdevice.value = false;
|
||||
let json = graph.toJSON()
|
||||
tabDeviceNum.value = 0
|
||||
@ -1317,7 +1339,23 @@ function closeMaterialModel(e:any){ // 关闭物料信息弹窗
|
||||
|
||||
selectedMaterial.value = e
|
||||
let retrievedNode:any = graph.getCellById(nodeId.value)
|
||||
// copyNodeInfo.value.store.data.attrs.label = copyDeviceInfo.value.name
|
||||
retrievedNode.store.data.materialInfo = e
|
||||
retrievedNode.attr('text/text',retrievedNode.store.data.deviceInfo.name +'('+ e.name + ')')
|
||||
retrievedNode.attr('label/text', retrievedNode.store.data.deviceInfo.name +'('+ e.name + ')')
|
||||
|
||||
retrievedNode.attr('text/fill', e.iconBase64); // 文字颜色
|
||||
retrievedNode.attr('text/stroke', e.iconBase64); // 文字描边
|
||||
|
||||
// 如果是 label
|
||||
// retrievedNode.attr('label/text/fill', '#d25b5b');
|
||||
// retrievedNode.attr('label/text', retrievedNode.store.data.attrs.label.text);
|
||||
// retrievedNode.setAttrs({
|
||||
// 'label/text/fill': '#d25b5b',
|
||||
// 'label/text/stroke': '#d25b5b',
|
||||
// 'rect/fill': e.iconBase64 // 背景色
|
||||
// });
|
||||
|
||||
saveDesign(false)
|
||||
let json = graph.toJSON()
|
||||
tabDeviceNum.value = 0
|
||||
@ -1945,7 +1983,32 @@ function getName(code:any) {
|
||||
<img src="@/assets/x6/del.png" alt="图标" title="删除" style="cursor: pointer;"
|
||||
@click="deleteNode">
|
||||
</div>
|
||||
<div class="line-style-left-box">
|
||||
<div class="explanation-box" v-if="isExplanation == false" @click="isExplanation = true">
|
||||
<img src="@/assets/x6/expansionandcontraction-right.png">
|
||||
</div>
|
||||
<div v-if="isExplanation == true" style="display: flex;align-items: center;">
|
||||
<div class="style-content-explanation-box">
|
||||
<div class="style-content-box-title">物料信息</div>
|
||||
<div style="display: flex;text-align: center;margin-bottom: 10px;margin-top: 10px;">
|
||||
<div style="width: 50%;">物料</div>
|
||||
<div style="width: 50%;">颜色</div>
|
||||
</div>
|
||||
|
||||
<div v-for="(item, index) in materialList" :key="index" style="display: flex;text-align: center;margin-bottom: 20px;">
|
||||
<div style="width: 50%;">{{ item.name }}</div>
|
||||
<div style="width: 50%;display: flex;justify-content: center;">
|
||||
<div style="width: 70px;height: 20px;" :style="{backgroundColor: item.iconBase64}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="explanation-box" @click="isExplanation = false">
|
||||
<img src="@/assets/x6/expansionandcontraction-right.png">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="line-style-box">
|
||||
<!-- <div class="DisplaySettingsButton">显示设置</div> -->
|
||||
<div class="expansionandcontraction-box" v-if="isExpansionandcontraction == false" @click="isExpansionandcontraction = true">
|
||||
@ -2317,6 +2380,17 @@ function getName(code:any) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.line-style-left-box{
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
height: 100%;
|
||||
/* width: 100px; */
|
||||
/* background-color: #d9d9d9; */
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.expansionandcontraction-box{
|
||||
width:15px;
|
||||
height: 64px;
|
||||
@ -2329,6 +2403,25 @@ function getName(code:any) {
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.explanation-box{
|
||||
width: 15px;
|
||||
height: 64px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #cfcfcf;
|
||||
border-radius:0 10px 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.style-content-explanation-box{
|
||||
width: 200px;
|
||||
height: calc(100vh - 60px);
|
||||
border: 1px solid #cfcfcf;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
background: #fff;
|
||||
}
|
||||
.style-content-box{
|
||||
width: 300px;
|
||||
height: calc(100vh - 60px);
|
||||
|
||||
@ -66,13 +66,9 @@ function confirmClick(formEl: any) {
|
||||
organicRatio: info.value.organicRatio,
|
||||
moistureContent: info.value.moistureContent,
|
||||
customAttrs: JSON.stringify(customAttrsData.value),
|
||||
|
||||
iconBase64: info.value.iconBase64,
|
||||
}
|
||||
let data = {
|
||||
...params,
|
||||
iconBase64: iconBase64.value,
|
||||
}
|
||||
saveOrUpdate(data).then((res:any) => {
|
||||
saveOrUpdate(params).then((res:any) => {
|
||||
if(res == true){
|
||||
emit('closeMaterialModel', params)
|
||||
}
|
||||
@ -140,12 +136,48 @@ const validator2 = (rule: any, value: any, callback: any) => {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
if (!/^\d+(\.\d+)?$/.test(value)) {
|
||||
callback(new Error('请输入有效的数字或小数'));
|
||||
} else if (parseFloat(value) <= 0) {
|
||||
callback(new Error('必须大于 0'));
|
||||
}else if (parseFloat(value) > 1) {
|
||||
callback(new Error('必须小于等于 1'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
const validator3 = (rule: any, value: any, callback: any) => {
|
||||
if (!value || value === '') {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
let ePu238 = 0;
|
||||
let ePu239 = 0;
|
||||
let ePu240 = 0;
|
||||
let ePu241 = 0;
|
||||
let ePu242 = 0;
|
||||
if(info.value.ePu238 != null && info.value.ePu238 != ""){
|
||||
ePu238 = parseFloat(info.value.ePu238);
|
||||
}
|
||||
if(info.value.ePu239 != null && info.value.ePu239 != ""){
|
||||
ePu239 = parseFloat(info.value.ePu239);
|
||||
}
|
||||
if(info.value.ePu240 != null && info.value.ePu240 != ""){
|
||||
ePu240 = parseFloat(info.value.ePu240);
|
||||
}
|
||||
if(info.value.ePu241 != null && info.value.ePu241 != ""){
|
||||
ePu241 = parseFloat(info.value.ePu241);
|
||||
}
|
||||
if(info.value.ePu242 != null && info.value.ePu242 != ""){
|
||||
ePu242 = parseFloat(info.value.ePu242);
|
||||
}
|
||||
|
||||
if (!/^\d+(\.\d+)?$/.test(value)) {
|
||||
callback(new Error('请输入有效的数字或小数'));
|
||||
} else if (parseFloat(value) <= 0) {
|
||||
callback(new Error('请输入小数'));
|
||||
}else if (parseFloat(value) >= 1) {
|
||||
callback(new Error('请输入小数'));
|
||||
}else if (ePu238 + ePu239 + ePu240 + ePu241 + ePu242 > 1.005 || ePu238 + ePu239 + ePu240 + ePu241 + ePu242 <0.995) {
|
||||
callback(new Error(' PU占比相加必须等于1'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -183,31 +215,31 @@ const rules = ref({
|
||||
],
|
||||
ePu238: [
|
||||
{
|
||||
validator: validator2,
|
||||
validator: validator3,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
ePu239: [
|
||||
{
|
||||
validator: validator2,
|
||||
validator: validator3,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
ePu240: [
|
||||
{
|
||||
validator: validator2,
|
||||
validator: validator3,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
ePu241: [
|
||||
{
|
||||
validator: validator2,
|
||||
validator: validator3,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
ePu242: [
|
||||
{
|
||||
validator: validator2,
|
||||
validator: validator3,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
@ -312,7 +344,7 @@ function gettableData() { // 获取物料列表
|
||||
}).catch((err) => {
|
||||
});
|
||||
}
|
||||
const iconBase64:any = ref("") // 物料图片
|
||||
const iconBase64:any = ref("") // 物料颜色
|
||||
function handleClick(item:any, index:any){
|
||||
iconBase64.value = item.iconBase64
|
||||
ingredientData.value = []
|
||||
@ -509,30 +541,9 @@ function delIconBase(){
|
||||
<el-input v-model="info.moistureContent" style="width: 100%" placeholder="" @input="handleNumberInput('moistureContent')"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="物料图片">
|
||||
<el-upload
|
||||
style="margin-left: 10px;"
|
||||
class="avatar-uploader"
|
||||
accept=".png, .jpg, .jpeg"
|
||||
action=""
|
||||
:headers="{ token: getToken() }"
|
||||
:show-file-list="false"
|
||||
:auto-upload="false"
|
||||
@change="uploadIconBaseChange"
|
||||
>
|
||||
<div style="width: 100px;height: 100px;position: relative;" v-if="info.iconBase64 != ''
|
||||
&& info.iconBase64 != null && info.iconBase64 != ' '">
|
||||
<img :src="info.iconBase64" class="avatar" />
|
||||
<div style="position: absolute;top: 0px;left: 0px;z-index: 1;width: 100px;height: 100px;background: rgba(0,0,0,0.3);color: cornflowerblue;">
|
||||
<el-icon style="position: absolute;top: 40px;left: 40px;z-index: 1;font-size: 20px;"
|
||||
@click.stop="delIconBase"><Delete /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-icon class="newavatar-uploader-icon"><Plus /></el-icon>
|
||||
<div class="newavatar-uploader-text">物料图片</div>
|
||||
</div>
|
||||
</el-upload>
|
||||
<el-form-item label="物料颜色">
|
||||
<el-color-picker-panel v-model="info.iconBase64" />
|
||||
<div style="width: 240px;height: 100px;margin-left: 20px;" :style="{backgroundColor: info.iconBase64}"></div>
|
||||
</el-form-item>
|
||||
|
||||
<div class="custom_attrs_box">
|
||||
@ -604,24 +615,9 @@ function delIconBase(){
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom_attrs_header" style="height: 90px;" v-if="ingredientData.length>0">
|
||||
<div class="custom_attrs_content1" style="width: 60%;height: 90px;display: flex;align-items: center;justify-content: center;">图片</div>
|
||||
<div class="custom_attrs_content1" style="width: 60%;height: 90px;display: flex;align-items: center;justify-content: center;">颜色</div>
|
||||
<div class="custom_attrs_content2" style="width: 40%;height: 90px;display: flex;align-items: center;justify-content: center;" >
|
||||
<el-image
|
||||
v-if="iconBase64 != '' && iconBase64 != null && iconBase64 != ' '"
|
||||
style="
|
||||
max-width: 200px;
|
||||
max-height: 80px;"
|
||||
class="materialmodel-iconBase64"
|
||||
:src="iconBase64"
|
||||
:zoom-rate="1.2"
|
||||
:max-scale="7"
|
||||
:min-scale="0.2"
|
||||
:preview-src-list="[iconBase64]"
|
||||
show-progress
|
||||
:initial-index="4"
|
||||
fit="contain"
|
||||
/>
|
||||
|
||||
<div style="width: 240px;height: 40px;" :style="{backgroundColor: iconBase64}"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -124,21 +124,56 @@ const validator1 = (rule: any, value: any, callback: any) => { // 校验数字
|
||||
}
|
||||
}
|
||||
const validator2 = (rule: any, value: any, callback: any) => {
|
||||
if (value == null || value === '') {
|
||||
if (!value || value === '') {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
if (!/^\d+(\.\d+)?$/.test(value)) {
|
||||
callback(new Error('请输入有效的数字或小数'));
|
||||
} else if (parseFloat(value) <= 0) {
|
||||
callback(new Error('请输入小数'));
|
||||
}else if (parseFloat(value) >= 1) {
|
||||
callback(new Error('请输入小数'));
|
||||
callback(new Error('必须大于 0'));
|
||||
}else if (parseFloat(value) > 1) {
|
||||
callback(new Error('必须小于等于 1'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
const validator3 = (rule: any, value: any, callback: any) => {
|
||||
if (!value || value === '') {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
let ePu238 = 0;
|
||||
let ePu239 = 0;
|
||||
let ePu240 = 0;
|
||||
let ePu241 = 0;
|
||||
let ePu242 = 0;
|
||||
if(info.value.ePu238 != null && info.value.ePu238 != ""){
|
||||
ePu238 = parseFloat(info.value.ePu238);
|
||||
}
|
||||
if(info.value.ePu239 != null && info.value.ePu239 != ""){
|
||||
ePu239 = parseFloat(info.value.ePu239);
|
||||
}
|
||||
if(info.value.ePu240 != null && info.value.ePu240 != ""){
|
||||
ePu240 = parseFloat(info.value.ePu240);
|
||||
}
|
||||
if(info.value.ePu241 != null && info.value.ePu241 != ""){
|
||||
ePu241 = parseFloat(info.value.ePu241);
|
||||
}
|
||||
if(info.value.ePu242 != null && info.value.ePu242 != ""){
|
||||
ePu242 = parseFloat(info.value.ePu242);
|
||||
}
|
||||
|
||||
if (!/^\d+(\.\d+)?$/.test(value)) {
|
||||
callback(new Error('请输入有效的数字或小数'));
|
||||
} else if (parseFloat(value) <= 0) {
|
||||
callback(new Error('请输入小数'));
|
||||
}else if (ePu238 + ePu239 + ePu240 + ePu241 + ePu242 > 1.005 || ePu238 + ePu239 + ePu240 + ePu241 + ePu242 <0.995) {
|
||||
callback(new Error(' PU占比相加必须等于1'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
const rulesSize = ref({
|
||||
uConcentration: [
|
||||
{
|
||||
@ -160,31 +195,31 @@ const rulesSize = ref({
|
||||
],
|
||||
ePu238: [
|
||||
{
|
||||
validator: validator2,
|
||||
validator: validator3,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
ePu239: [
|
||||
{
|
||||
validator: validator2,
|
||||
validator: validator3,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
ePu240: [
|
||||
{
|
||||
validator: validator2,
|
||||
validator: validator3,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
ePu241: [
|
||||
{
|
||||
validator: validator2,
|
||||
validator: validator3,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
ePu242: [
|
||||
{
|
||||
validator: validator2,
|
||||
validator: validator3,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
|
||||
@ -94,7 +94,7 @@ const info: any = ref({
|
||||
h2c2o4Concentration: "",
|
||||
organicRatio: "",
|
||||
moistureContent: "",
|
||||
iconBase64: ""
|
||||
iconBase64: "#409EFF"
|
||||
});
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
@ -117,7 +117,7 @@ function addClick() {
|
||||
h2c2o4Concentration: "",
|
||||
organicRatio: "",
|
||||
moistureContent: "",
|
||||
iconBase64: ""
|
||||
iconBase64: "#409EFF"
|
||||
};
|
||||
customAttrsData.value = []
|
||||
dialogVisible.value = true;
|
||||
@ -178,12 +178,48 @@ const validator2 = (rule: any, value: any, callback: any) => {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
if (!/^\d+(\.\d+)?$/.test(value)) {
|
||||
callback(new Error('请输入有效的数字或小数'));
|
||||
} else if (parseFloat(value) <= 0) {
|
||||
callback(new Error('必须大于 0'));
|
||||
}else if (parseFloat(value) > 1) {
|
||||
callback(new Error('必须小于等于 1'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
const validator3 = (rule: any, value: any, callback: any) => {
|
||||
if (!value || value === '') {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
let ePu238 = 0;
|
||||
let ePu239 = 0;
|
||||
let ePu240 = 0;
|
||||
let ePu241 = 0;
|
||||
let ePu242 = 0;
|
||||
if(info.value.ePu238 != null && info.value.ePu238 != ""){
|
||||
ePu238 = parseFloat(info.value.ePu238);
|
||||
}
|
||||
if(info.value.ePu239 != null && info.value.ePu239 != ""){
|
||||
ePu239 = parseFloat(info.value.ePu239);
|
||||
}
|
||||
if(info.value.ePu240 != null && info.value.ePu240 != ""){
|
||||
ePu240 = parseFloat(info.value.ePu240);
|
||||
}
|
||||
if(info.value.ePu241 != null && info.value.ePu241 != ""){
|
||||
ePu241 = parseFloat(info.value.ePu241);
|
||||
}
|
||||
if(info.value.ePu242 != null && info.value.ePu242 != ""){
|
||||
ePu242 = parseFloat(info.value.ePu242);
|
||||
}
|
||||
|
||||
if (!/^\d+(\.\d+)?$/.test(value)) {
|
||||
callback(new Error('请输入有效的数字或小数'));
|
||||
} else if (parseFloat(value) <= 0) {
|
||||
callback(new Error('请输入小数'));
|
||||
}else if (parseFloat(value) >= 1) {
|
||||
callback(new Error('请输入小数'));
|
||||
}else if (ePu238 + ePu239 + ePu240 + ePu241 + ePu242 > 1.005 || ePu238 + ePu239 + ePu240 + ePu241 + ePu242 <0.995) {
|
||||
callback(new Error(' PU占比相加必须等于1'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -221,31 +257,31 @@ const rules = ref({
|
||||
],
|
||||
ePu238: [
|
||||
{
|
||||
validator: validator2,
|
||||
validator: validator3,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
ePu239: [
|
||||
{
|
||||
validator: validator2,
|
||||
validator: validator3,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
ePu240: [
|
||||
{
|
||||
validator: validator2,
|
||||
validator: validator3,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
ePu241: [
|
||||
{
|
||||
validator: validator2,
|
||||
validator: validator3,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
ePu242: [
|
||||
{
|
||||
validator: validator2,
|
||||
validator: validator3,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
@ -412,21 +448,6 @@ function downloadFile(obj :any, name :any, suffix :any) {
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
|
||||
|
||||
function uploadIconBaseChange(file:any){
|
||||
var reader = new FileReader();
|
||||
reader.readAsDataURL(file.raw);
|
||||
reader.onload = () => {
|
||||
info.value.iconBase64 =reader.result
|
||||
};
|
||||
reader.onerror = function(error) {
|
||||
console.log("Error: ", error);
|
||||
};
|
||||
}
|
||||
function delIconBase(){
|
||||
info.value.iconBase64 = " "
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -579,29 +600,8 @@ function delIconBase(){
|
||||
<el-input v-model="info.moistureContent" style="width: 100%" placeholder="" @input="handleNumberInput('moistureContent')"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="物料图片">
|
||||
<el-upload
|
||||
style="margin-left: 10px;"
|
||||
class="avatar-uploader"
|
||||
accept=".png, .jpg, .jpeg"
|
||||
action=""
|
||||
:show-file-list="false"
|
||||
:auto-upload="false"
|
||||
@change="uploadIconBaseChange"
|
||||
>
|
||||
<div style="width: 100px;height: 100px;position: relative;" v-if="info.iconBase64 != ''
|
||||
&& info.iconBase64 != null && info.iconBase64 != ' '">
|
||||
<img :src="info.iconBase64" class="avatar" />
|
||||
<div style="position: absolute;top: 0px;left: 0px;z-index: 1;width: 100px;height: 100px;background: rgba(0,0,0,0.3);color: cornflowerblue;">
|
||||
<el-icon style="position: absolute;top: 40px;left: 40px;z-index: 1;font-size: 20px;"
|
||||
@click.stop="delIconBase"><Delete /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-icon class="newavatar-uploader-icon"><Plus /></el-icon>
|
||||
<div class="newavatar-uploader-text">物料图片</div>
|
||||
</div>
|
||||
</el-upload>
|
||||
<el-form-item label="物料颜色">
|
||||
<el-color-picker-panel v-model="info.iconBase64" />
|
||||
</el-form-item>
|
||||
|
||||
|
||||
|
||||
@ -115,6 +115,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: absolute;bottom: 0;left: 0;width: 100%;height: 70px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 30px;
|
||||
color: #363636;
|
||||
text-align: center;">
|
||||
禁止处理涉密信息
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user