公式配置优化页面，表格渲染，元素定位

src/views/formula/editnew.vue

@@ -215,10 +215,9 @@
                     <el-descriptions class="margin-top"  :column="1" size="large" border > 
                       <el-descriptions-item>
                         <template slot="label">
-                      
                           元素表名称
                         </template>
-                          <span style="color: rgba(64,149,229,1);font-weight:bold;cursor: pointer;">  {{checkFormula[0]['initTableName']}}</span>
+                          <span style="color: rgba(64,149,229,1);font-weight:bold;cursor: pointer;" @click="eleTbaleName">  {{checkFormula[0]['initTableName']}}</span>
                       </el-descriptions-item>
                       <el-descriptions-item>
                         <template slot="label">
@@ -269,7 +268,7 @@
                                                   
                                                       元素表名称
                                                     </template>
-                                                      <span style="color: rgba(64,149,229,1);font-weight:bold;cursor: pointer;">  {{checkFormula[0]['initTableName']}}</span>
+                                                      <span style="color: rgba(64,149,229,1);font-weight:bold;cursor: pointer;"  @click="eleTbaleName">  {{checkFormula[0]['initTableName']}}</span>
                                                   </el-descriptions-item>
                                                   <el-descriptions-item>
                                                     <template slot="label">
@@ -304,9 +303,21 @@
                     
                       
                 </div>
-                <div class="right_box">
+               
+                  <div class="right_box"  >
+                    <div class="parent"  id='parent'   ></div>
+                      <div v-if="!ishowExcel" style="margin-top:40px">
+                        <el-result title="请选择左侧对应的元素表名称，回显表单坐标定位信息" >
+                              <template slot="icon">
+                                <img src="/img/welIndex/empty.png" alt="loading">
+                                    
+                              </template>
+                            
+                          </el-result>
+                      </div>
+                  </div>
                   
-                </div>
+                
             </div>
          </div>
       </div>
@@ -558,6 +569,7 @@ import {rangeToString} from "./component/deviationRange/rangeToString"
 import { getDictionary } from "@/api/system/dict";
 import {formulaArrayToString} from "./formulaArrayToString"
 import {formulaStringToArray} from "./formulaStringToArray"
+import {getExcelHtml} from "@/api/exctab/excelmodel"
 
 import draggable from 'vuedraggable'
 import { log } from '@antv/g2plot/lib/utils';
@@ -706,7 +718,9 @@ export default {
        {title:'公式配置',selected:false},
      ],
      isShowDetail:false,
-     nowtitleIndex:''
+     nowtitleIndex:'',
+     nowEleitem:{},
+     ishowExcel:false
     };
   },
   computed: {
@@ -1207,18 +1221,28 @@ export default {
       }
        
     },
-    
+
   //点选公式溯源公式
-  equationClicksouce(item,index){
+   equationClicksouce(item,index){
     console.log(item,'item');
+    this.nowEleitem=item
     this.nowtitleIndex=index;
     this.istabinfo=true;
     this.checkid=item.id
-  
     console.log(this.processFormula,'this.processFormula');
     this.getEleDeatilList()
-   
-    
+
+  },
+    //点击元素表名称回显表单
+  eleTbaleName(){
+    this.ishowExcel=true
+    this.getExcelHtml(this.eleTableList[0].pkeyId).then(()=>{
+       let dom = document.getElementById('key_21__3_1')//定位元素位置
+       if(dom){
+          dom.classList.add("oldlace-bg");
+       }
+       
+    })
   },
     //在等式模式下点选计算式
     equationSelect(index,indexPath){
@@ -1851,12 +1875,155 @@ export default {
         //   item.selected=false
         // })
        
+      },
+
+
+      //获取表单html
+    async getExcelHtml (pkeyId) {
+      const { data: res } = await getExcelHtml({ pkeyId })
+      if (res.code === 200) {
+        localStorage.setItem('excelHtml', res.data)
+        this.copss()
+       
+       
+      }
+    },
+    getInformation (name, tr, td) {//鼠标点击事件
+      //console.log(event)
+      let tdEle = null;
+      //获取TD元素
+      if(event.target.nodeName == "TD"){
+        tdEle = event.target
+      }else{
+        tdEle = this.getParentTD(event.target);
+      }
+      let moreObj = {};
+      if(tdEle){
+        moreObj = this.getWidget(tdEle);
+      }
+
+      this.htmlData = Object.assign({
+        name,
+        tr,
+        td
+      },moreObj)
+    },
+
+  
+
+
+    getParentTD(ele){
+      let targetParent = ele.parentNode;
+      while (targetParent.nodeName !== "TD") {
+          if(targetParent.id == 'parent'){
+            return null;
+          }
+          targetParent = targetParent.parentNode;
+      }
+      return targetParent;
+    },
+
+
+    //获取控件信息
+    getWidget(tdEle){
+      let checkLabels = tdEle.querySelectorAll('.el-checkbox-group span.el-checkbox__label');
+      //console.log(checkLabels)
+      if(checkLabels.length > 0){
+        let checkLabelDatas = [];
+        for (let i = 0; i < checkLabels.length; i++) {
+          //console.dir(checkLabels[i])
+          checkLabelDatas.push({
+            dictValue:checkLabels[i].innerText
+          });
+        }
+        return {
+          type:'checkbox',
+          checkLabelDatas
+        }
       }
+
+      let radioLabels = tdEle.querySelectorAll('.el-radio .el-radio__label');
+      if(radioLabels.length > 0){
+        let radioDatas = [];
+        for (let i = 0; i < radioLabels.length; i++) {
+          radioDatas.push({
+            dictValue:radioLabels[i].innerText
+          });
+        }
+        return {
+          type:'radio',
+          radioDatas
+        }
+      }
+
+      let elSelect = tdEle.querySelectorAll('.el-select');
+      //console.dir(elSelect[0])
+      if(elSelect.length){
+        let options = elSelect[0].__vue__.options;
+        let selectDatas = [];
+        for (let i = 0; i < options.length; i++) {
+          selectDatas.push({
+            dictValue:options[i].label
+          });
+        }
+        return {
+          type:'select',
+          selectDatas
+        }
+      }
+
+      return {};
+    },
+    async copss () {
+      let _that = this
+      var MyComponent = await Vue.extend({
+        template: localStorage.getItem('excelHtml'),
+        data () {
+          return {
+            formData: {},
+            getTokenHeader: {},
+            dap_site_data:{}
+          }
+        },
+        methods: {
+          contextmenuClick(tr, td, x1, x2, y1, y2, event) {},
+          getInformation (name, tr, td) {//鼠标右键事件
+            _that.getInformation(name, tr, td)
+          },
+          formUploadSuccess(){},
+          formUploadExceed(){},
+          formUploadLoading(){},
+          delTableFormFile(){},
+          formUploadError(){},
+          uploadprogress(){},
+          getRegularExpression(){},
+          formRemoteMethod(){},
+          checkboxGroupChange(){},
+          formRemoteChange(){},
+          dateKeydown(){},
+          keyupShiftUp() {},
+          keyupShiftDown() {},
+          keyupShiftLeft() {},
+          keyupShiftRight() {},
+          inputLeftClick() {},
+        }
+      })
+      var component = new MyComponent().$mount()
+      let na = document.getElementById('parent')
+      na.innerHTML = `<div
+        class='parent'
+        id='parent'
+      ></div>`
+      document.getElementById('parent').appendChild(component.$el);
+    },
   }
 };
 </script>
 
 <style scoped lang="scss">
+#parent /deep/ .oldlace-bg {
+  background-color: oldlace;
+}
 .span-select{
   color: rgba(64,149,229,1);
 }
@@ -1893,7 +2060,7 @@ export default {
     height:100%;
     padding: 10px;
     margin-left: 20px;
-
+    overflow: auto;
     border-radius: 1%;
     background-color: rgb(218, 218, 218);
   }