添加物料图片，修改拓扑图设备类型

business-css/frontend/src/api/business/database/material/index.ts

@@ -70,3 +70,12 @@ export function exportAllExports(){
     responseType: 'arraybuffer'
   });
 }
+
+//查看物料
+export function materialsById (id:any){
+  return request({
+    url:'/materials/'+id ,
+    method: 'get'
+    // params: queryParams
+  });
+}

business-css/frontend/src/components/antvx6/index.vue

@@ -385,20 +385,22 @@ onMounted(() => {
         node.attr('label/refY', 140)
         node.attr('label/refX', width/2)
         node.attr('label/textAnchor', 'middle')
-      }else if(node.store.data.attrs.text.text == '萃取柱'){
+      }
-        deviceTypetype.value = 'ExtractionColumn'
+      // else if(node.store.data.attrs.text.text == '萃取柱'){
+      //   deviceTypetype.value = 'ExtractionColumn'
 
-        node.size(30, 140)
+      //   node.size(30, 140)
-        const width = node.size().width
+      //   const width = node.size().width
-        node.attr('image/xlink:href', '/assets/55.png')    
+      //   node.attr('image/xlink:href', '/assets/55.png')    
-        node.attr('image/width', 30)     
+      //   node.attr('image/width', 30)     
-        node.attr('image/height', 135)   
+      //   node.attr('image/height', 135)   
-        node.attr('label/refY', 140)
+      //   node.attr('label/refY', 140)
-        node.attr('label/refX', width/2)
+      //   node.attr('label/refX', width/2)
-        node.attr('label/textAnchor', 'middle')
+      //   node.attr('label/textAnchor', 'middle')
 
 
-      }else if(node.store.data.attrs.text.text == '流化床'){
+      // }
+      else if(node.store.data.attrs.text.text == '流化床'){
         deviceTypetype.value = 'FluidizedBed'
         node.size(60, 140)
         const width = node.size().width
@@ -418,6 +420,26 @@ onMounted(() => {
         node.attr('label/refY', 140)
         node.attr('label/refX', width/2)
         node.attr('label/textAnchor', 'middle')
+      }else if(node.store.data.attrs.text.text == '圆柱脉冲柱'){
+        deviceTypetype.value = 'PulsedCylindricalColumn'
+        node.size(30, 140)
+        const width = node.size().width
+        node.attr('image/xlink:href', '/assets/88.png')    
+        node.attr('image/width', 30)     
+        node.attr('image/height', 135)   
+        node.attr('label/refY', 140)
+        node.attr('label/refX', width/2)
+        node.attr('label/textAnchor', 'middle')
+      }else if(node.store.data.attrs.text.text == '环形脉冲柱'){
+        deviceTypetype.value = 'PulsedAnnularColumn'
+        node.size(40, 140)
+        const width = node.size().width
+        node.attr('image/xlink:href', '/assets/99.png')    
+        node.attr('image/width', 40)     
+        node.attr('image/height', 135)   
+        node.attr('label/refY', 140)
+        node.attr('label/refX', width/2)
+        node.attr('label/textAnchor', 'middle')
       }
       // 设置固定大小
     
@@ -803,16 +825,22 @@ graph.on('blank:mouseup', (e) => {
       label: '管束槽',
       image: '/assets/4.png',
     },
-    {
+    // {
-      label: '萃取柱',
+    //   label: '萃取柱',
-      image: '/assets/5.png',
+    //   image: '/assets/5.png',
-    },
+    // },
     {
       label: '流化床',
       image: '/assets/6.png',
     },{
       label: '锥底环形槽',
       image: '/assets/7.png',
+    },{
+      label: '圆柱脉冲柱',
+      image: '/assets/8.png',
+    },{
+      label: '环形脉冲柱',
+      image: '/assets/9.png',
     },
   ]
   const imageNodes = imageShapes.map((item) =>
@@ -1289,7 +1317,7 @@ function closeMaterialModel(e:any){ // 关闭物料信息弹窗
     isMaterialModel.value = false;
     return
   }
-
+  
   selectedMaterial.value = e
   let retrievedNode:any = graph.getCellById(nodeId.value)
   retrievedNode.store.data.materialInfo = e

business-css/frontend/src/components/antvx6/materialmodel.vue

@@ -7,7 +7,7 @@ export default {
 <script setup lang="ts">
 import { onMounted, ref, nextTick } from "vue";
 import { ElForm, ElMessage, ElMessageBox } from "element-plus";
-import { searchMaterialsPage, saveOrUpdate} from "@/api/business/database/material";
+import { searchMaterialsPage, saveOrUpdate, materialsById} from "@/api/business/database/material";
 
 const emit = defineEmits([ 'closeMaterialModel']);
 
@@ -65,9 +65,14 @@ function confirmClick(formEl: any) {
         h2c2o4Concentration: info.value.h2c2o4Concentration,
         organicRatio: info.value.organicRatio,
         moistureContent: info.value.moistureContent,
-        customAttrs: JSON.stringify(customAttrsData.value)
+        customAttrs: JSON.stringify(customAttrsData.value),
+      
       }
-      saveOrUpdate(params).then((res:any) => {
+      let data = {
+        ...params,
+        iconBase64: iconBase64.value,
+      }
+      saveOrUpdate(data).then((res:any) => {
         if(res == true){
           emit('closeMaterialModel', params) 
         }
@@ -77,7 +82,16 @@ function confirmClick(formEl: any) {
 }
 onMounted(() => {
   deviceName.value = props.deviceInfo.name
-  editClick(props.materialInfo)
+  if(props.materialId != null){
+    materialsById(props.materialId).then((res:any) => {
+        editClick(res)
+        info.value.iconBase64 = res.iconBase64;
+    });
+  }else{
+     editClick(props.materialInfo)
+  }
+  
+
 
 });
 const infoForm = ref();
@@ -167,10 +181,10 @@ function gettableData() { // 获取物料列表
   }).catch((err) => {
   });
 }
-
+const iconBase64:any = ref("") // 物料图片
 function handleClick(item:any, index:any){
+  iconBase64.value = item.iconBase64
   ingredientData.value = []
-
   ingredientData.value.push({
     key: "铀浓度（g/L）",
     value:  item.uConcentration,
@@ -264,6 +278,7 @@ function confirmMaterial(){
     organicRatio: selectedMaterial.value.organicRatio,
     moistureContent: selectedMaterial.value.moistureContent,
     customAttrs: selectedMaterial.value.customAttrs,
+    iconBase64: iconBase64.value,
   }
   customAttrsData.value = []
   if(selectedMaterial.value.customAttrs !=null && selectedMaterial.value.customAttrs != ""){
@@ -271,6 +286,21 @@ function confirmMaterial(){
   }
   isDialogMaterial.value = false
 }
+
+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>
@@ -282,7 +312,7 @@ function confirmMaterial(){
           <el-input v-model="deviceName" style="width: 300px" placeholder="" :disabled="true"></el-input>
         </el-form-item>
         <el-form-item label="所属物料" prop="name" label-width="80px">
-          <el-input v-model="info.name" style="width: 300px"  placeholder=""></el-input>
+          <el-input v-model="info.name" style="width: 280px"  placeholder=""></el-input>
           <el-button type="primary" style="margin-left: 10px" @click="dialogMaterialOpen">选择物料</el-button>
         </el-form-item>
       </div>
@@ -348,6 +378,31 @@ function confirmMaterial(){
           <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>
+
       <div class="custom_attrs_box">
         <div class="custom_attrs_header">
           <div class="custom_attrs_header1">成分名称</div>
@@ -397,11 +452,11 @@ function confirmMaterial(){
             </div>
           </div>
         </div>
-        <div style="width: 100%;">
+        <div style="width: 100%;  height: calc(100vh - 100px); overflow: auto;">
           <div style="display: flex;justify-content: flex-end;padding-top: 20px;padding-right: 40px;padding-bottom: 20px;">
             <el-button type="primary" @click="confirmMaterial">确 定</el-button>
           </div>
-          <div class="custom_attrs_box" style="width: 650px;margin-left: 20px;">
+          <div class="custom_attrs_box" style="width: 650px;margin-left: 20px;margin-bottom: 10px;">
             <div class="custom_attrs_header">
               <div class="custom_attrs_header1" style="width: 60%;">成分名称</div>
               <div class="custom_attrs_header2" style="width: 40%;" >成分参数</div>
@@ -416,8 +471,30 @@ function confirmMaterial(){
                 {{ item.value }}
               </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_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>
 
+           </div>
           </div>
+          
         </div>
         
       </div>
@@ -635,7 +712,37 @@ function confirmMaterial(){
 .materialmodel-dialog-box.el-dialog .el-dialog__body{
   padding: 0 !important;
 }
+.materialmodel-iconBase64 img{
+  max-width: 200px;
+  max-height: 80px;
+}
+
+</style>
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+  width: 100px;
+  height: 100px;
+}
+.newavatar-uploader-icon{
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px;
+  text-align: center;
+}
+.newavatar-uploader-text{
+  width: 100%;text-align: center;line-height: 20px;
+  font-family: 'Arial Normal', 'Arial';
+    font-weight: 400;
+    font-style: normal;
+    font-size: 12px;
+    color: #949494;
+}
 </style>
 
 
-

business-css/frontend/src/views/business/database/material/index.vue

@@ -90,6 +90,7 @@ const info: any = ref({
   h2c2o4Concentration: "",
   organicRatio: "",
   moistureContent: "",
+  iconBase64: ""
 });
 
 const dialogVisible = ref(false);
@@ -108,6 +109,7 @@ function addClick() {
     h2c2o4Concentration: "",
     organicRatio: "",
     moistureContent: "",
+    iconBase64: ""
   };
   customAttrsData.value = []
   dialogVisible.value = true;
@@ -318,6 +320,21 @@ 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>
@@ -451,6 +468,32 @@ function downloadFile(obj :any, name :any, suffix :any) {
             <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>
+
+
         <div class="Materials_dialog_titledisplay">
           <div class="Materials_dialog_titleline"></div>
           <div>物料成分</div>
@@ -485,12 +528,13 @@ function downloadFile(obj :any, name :any, suffix :any) {
           <svg t="1766543724217" style="margin-right: 5px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6518" width="16" height="16"><path d="M105 480a8 8 0 0 1 8-8h799a8 8 0 0 1 8 8v64a8 8 0 0 1-8 8H113a8 8 0 0 1-8-8v-64z" fill="#266FFF" p-id="6519"></path><path d="M480 920a8 8 0 0 1-8-8V112a8 8 0 0 1 8-8h64a8 8 0 0 1 8 8v800a8 8 0 0 1-8 8h-64z" fill="#266FFF" p-id="6520"></path></svg>
           添加一行
         </div>
-        <span class="dialog-footer"
+        
+      </el-form>
+      <span class="dialog-footer"
           style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;">
           <el-button @click="handleClose">取 消</el-button>
           <el-button type="primary" @click="confirmClick(infoForm)">确 定</el-button>
         </span>
-      </el-form>
     </el-dialog>
   </div>
 </template>
@@ -761,5 +805,30 @@ function downloadFile(obj :any, name :any, suffix :any) {
   cursor: pointer;
 }
 
-
+.newavatar-uploader-icon{
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px;
+  text-align: center;
+}
+.newavatar-uploader-text{
+  width: 100%;text-align: center;line-height: 20px;
+  font-family: 'Arial Normal', 'Arial';
+    font-weight: 400;
+    font-style: normal;
+    font-size: 12px;
+    color: #949494;
+}
+</style>
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+  width: 100px;
+  height: 100px;
+}
 </style>

business-css/src/main/java/com/yfd/business/css/controller/MaterialController.java

@@ -198,7 +198,7 @@ public class MaterialController {
                 "pu_concentration", "puo2_density", "pu_isotope",
                 "e_pu240", "e_pu242", "e_pu241", "e_pu239", "e_pu238",
                 "hno3_acidity", "h2c2o4_concentration", "organic_ratio", "moisture_content",
-                "custom_attrs", "created_at", "updated_at", "modifier"
+                "custom_attrs", "created_at", "updated_at", "modifier", "icon_base64"
         );
         qw.eq("project_id", "-1");
         if (name != null && !name.isEmpty()) {