8.14

src/main.js

@@ -15,6 +15,9 @@ import VueWorker from 'vue-worker'
 import $ from 'jquery'
 import 'bootstrap'
 import '@/assets/iconfont/iconfont.js'
+import directive from '@/utils/directive'
+
+
 // import '@/assets/custom-theme/index.css'
 // import '../theme/index.css'
 //import '../element-variables.scss'
@@ -31,6 +34,7 @@ Vue.prototype.$echarts = echarts
 Vue.use(ElementUI)
 Vue.use(VueI18n)
 Vue.use(VueWorker)
+Vue.use(directive)
 const i18n=new VueI18n({
     locale:localStorage.getItem('languageSet')||'zh',   //从localStorage里获取用户中英文选择，没有则默认中文
     messages:{

src/utils/directive.js

@@ -0,0 +1,30 @@
+// 引入拖拽js
+import { startDrag } from './drag'
+import { startclick } from './dleft'  
+/**
+ * 为el-dialog弹框增加拖拽功能
+ * @param {*} el 指定dom
+ * @param {*} binding 绑定对象
+ * desc   只要用到了el-dialog的组件，都可以通过增加v-draggable属性变为可拖拽的弹框
+ */
+const draggable = (el, binding) => {
+    // 绑定拖拽事件 [绑定拖拽触发元素为弹框头部、拖拽移动元素为整个弹框]
+    startDrag(el.querySelector('.el-dialog__header'), el.querySelector('.el-dialog'), binding.value);
+};
+
+  const draggleft = (el, binding) => {
+    // 绑定拖拽事件 [绑定拖拽触发元素为弹框头部、拖拽移动元素为整个弹框]
+   el.querySelector('.el-dialog').style.left =binding.value;
+   console.log(binding.value);
+};
+const directives = {
+    draggable,draggleft
+};
+// 这种写法可以批量注册指令
+export default {
+  install(Vue) {
+      Object.keys(directives).forEach((key) => {
+      Vue.directive(key, directives[key]);
+    });
+  },
+};

src/utils/dleft.js

@@ -0,0 +1,24 @@
+/**
+ * 拖拽移动
+ * @param  {elementObjct} bar 鼠标点击控制拖拽的元素
+ * @param {elementObjct}  target 移动的元素
+ * @param {function}  callback 移动后的回调
+ */
+ export function  startclick(bar, target, callback) {
+    // console.log(bar)
+//     bar.getleft=function(){
+
+//     params = {
+//         top: target.offsetTop,
+//         left: target.offsetLeft,
+//         currentX: e.clientX,
+//         currentY: e.clientY,
+//         flag: true,
+//         cWidth: document.body.clientWidth,
+//         cHeight: document.body.clientHeight,
+//         tWidth: target.offsetWidth,
+//         tHeight: target.offsetHeight
+//       };
+//     bar.style.left= params.currentX+'px';
+// }
+  }

src/utils/drag.js

@@ -0,0 +1,105 @@
+/**
+ * 拖拽移动
+ * @param  {elementObjct} bar 鼠标点击控制拖拽的元素
+ * @param {elementObjct}  target 移动的元素
+ * @param {function}  callback 移动后的回调
+ */
+ export function startDrag(bar, target, callback) {
+    var params = {
+      top: 0,
+      left: 0,
+      currentX: 0,
+      currentY: 0,
+      flag: false,
+      cWidth: 0,
+      cHeight: 0,
+      tWidth: 0,
+      tHeight: 0
+    };
+    
+    // 给拖动块添加样式
+    bar.style.cursor = 'move';
+    
+    // 获取相关CSS属性
+    // o是移动对象
+    // var getCss = function (o, key) {
+    //   return o.currentStyle ? o.currentStyle[key] :             document.defaultView.getComputedStyle(o, false)[key];
+    // };
+    
+    bar.onmousedown = function (event) {
+      // 按下时初始化params
+      var e = event ? event : window.event;
+      params = {
+        top: target.offsetTop,
+        left: target.offsetLeft,
+        currentX: e.clientX,
+        currentY: e.clientY,
+        flag: true,
+        cWidth: document.body.clientWidth,
+        cHeight: document.body.clientHeight,
+        tWidth: target.offsetWidth,
+        tHeight: target.offsetHeight
+      };
+    
+      // 给被拖动块初始化样式
+      target.style.margin = 0;
+      target.style.top = params.top + 'px';
+      target.style.left = params.left + 'px';
+   
+      if (!event) {
+        // 防止IE文字选中
+        bar.onselectstart = function () {
+          return false;
+        }
+      }
+    
+      document.onmousemove = function (event) {
+        // 防止文字选中
+        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
+    
+        var e = event ? event : window.event;
+        if (params.flag) {
+          var nowX = e.clientX;
+          var nowY = e.clientY;
+          // 差异距离
+          var disX = nowX - params.currentX;
+          var disY = nowY - params.currentY;
+          // 最终移动位置
+          var zLeft = 0;
+          var zTop = 0;
+    
+          zLeft = parseInt(params.left) + disX;
+          // 限制X轴范围
+          if (zLeft <= -parseInt(params.tWidth / 2)) {
+            zLeft = -parseInt(params.tWidth / 2);
+          }
+          if (zLeft >= params.cWidth - parseInt(params.tWidth * 0.5)) {
+            zLeft = params.cWidth - parseInt(params.tWidth * 0.5);
+          }
+    
+          zTop = parseInt(params.top) + disY;
+          // 限制Y轴范围
+          if (zTop <= 0) {
+            zTop = 0;
+          }
+          if (zTop >= params.cHeight - parseInt(params.tHeight * 0.5)) {
+            zTop = params.cHeight - parseInt(params.tHeight * 0.5);
+          }
+    
+          // 执行移动
+          target.style.left = zLeft + 'px';
+          target.style.top = zTop + 'px';
+        }
+    
+        if (typeof callback == "function") {
+          callback(zLeft, zTop);
+        }
+      }
+    
+      document.onmouseup = function () {
+        params.flag = false;
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    };
+  }

src/views/index/FEMLab/fem.vue

@@ -193,7 +193,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+    v-draggleft=[styX.left]
     >
       <div slot="title" class=dialog_header>
      <el-image class="imge" :src="q4" fit="cover" />
@@ -946,7 +947,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+    v-draggleft=[styX.left]
     >
       <div slot="title" class=dialog_header>
      <el-image class="imge" :src="shx2" fit="cover" />
@@ -984,7 +986,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+       v-draggable
+    v-draggleft=[styX.left]
     >
       <div slot="title" class=dialog_header>
      <el-image class="imge" :src="shx10" fit="cover" />
@@ -1022,7 +1025,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+    v-draggleft=[styX.left]
     >
       <div slot="title" class=dialog_header>
      <el-image class="imge" :src="shx24" fit="cover" />
@@ -1074,7 +1078,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+       v-draggable
+    v-draggleft=[styX.left]
     >
       <div slot="title" class=dialog_header>
      <el-image class="imge" :src="shx25" fit="cover" />
@@ -1145,7 +1150,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+    v-draggleft=[styX.left]
     >
       <div slot="title" class=dialog_header>
      <el-image class="imge" :src="shx26" fit="cover" />
@@ -1175,7 +1181,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+    v-draggleft=[styX.left]
     >
       <div slot="title" class=dialog_header>
      <el-image class="imge" :src="shx27" fit="cover" />
@@ -1257,7 +1264,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+    v-draggleft=[styX.left]
     >
       <div slot="title" class=dialog_header>
      <el-image class="imge" :src="shx28" fit="cover" />
@@ -1350,15 +1358,16 @@
       </div>
     </el-dialog>
     <!-- 结果显示 -->
-     <!--轮廓显示  Contour Displsy-->
+     <!--轮廓显示  Contour Displsy   :style="styX"     :left="styX"-->
        <el-dialog  :visible.sync="dialog.contour_visiable" 
-     v-if="active=='six2-0'"
-    :modal='false'
-    :close-on-click-modal="false"
-    @close='activecleer()'
-    custom-class='dialoglocation dialog_color'
-     width="385px"
-     :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
+      v-if="active=='six2-0'"
+      :modal='false'
+      :close-on-click-modal="false"
+      @close='activecleer()'
+      custom-class='dialoglocation dialog_color '
+      width="385px"
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p3" fit="cover" />
@@ -1435,7 +1444,8 @@
     @close='activecleer()'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p9" fit="cover" />
@@ -1502,7 +1512,8 @@
     @close='activecleer()'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+    v-draggable
+    v-draggleft=[styX.left]
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p4" fit="cover" />
@@ -1587,7 +1598,8 @@
     @close='activecleer()'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+    v-draggable
+      v-draggleft=[styX.left]
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p14" fit="cover" />
@@ -1651,7 +1663,8 @@
     @close='activecleer()'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+     v-draggable
+      v-draggleft=[styX.left]
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p15" fit="cover" />
@@ -1699,7 +1712,8 @@
     @close='activecleer()'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+     v-draggable
+      v-draggleft=[styX.left]
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p16" fit="cover" />
@@ -1854,7 +1868,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+     v-draggable
+      v-draggleft=[styX.left]
     >
         <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p20" fit="cover" />
@@ -1892,12 +1907,12 @@
 <!-- an_Animation -->
 <!-- an_Animation -->
  <el-dialog  :visible.sync="dialog.an_Animation" 
-  
+    v-draggable
     :modal='false'
     :close-on-click-modal="false"
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggleft=[styX.left]
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p17" fit="cover" />
@@ -2051,8 +2066,12 @@ import p18 from '@/assets/icon/result_curve.png'
 import p19 from '@/assets/hcfd_images/run.png'
 import p20 from '@/assets/icon/u3739.png'
 import { number } from 'echarts/lib/export';
+//  const draggleft = (el, binding) => {
+//     let dialogleft=el.querySelector('.el-dialog');
+// };
 
 export default {
+ 
     components:{geometry,meshindex,result,toolindex,filesload,vueUploader,Addtabs},
     props:{
     femnum:String,
@@ -2987,7 +3006,7 @@ let b=(Number(this.colorobj.B)/255).toFixed(4);
 var e=e||window.Event
 this.styX.left=e.clientX+'px';
     this.active=key;
-    console.log(key)
+    console.log(this.styX.left)
   switch(key){
  case 'one-0':
        this.dialog.fem_upload=true;
@@ -3075,6 +3094,13 @@ this.styX.left=e.clientX+'px';
       case 'six4-0':
         this.value1= Number(this.animationobj.currentstep);
         this.dialog.an_Animation=true;
+        let that=this;
+        setTimeout(function(){
+            that.active='six2-0';
+       that.dialog.contour_visiable=true; 
+        },100)
+     
+       
         
       break;
        case 'five6-0':

src/views/index/HCFDLab/index.vue

@@ -263,7 +263,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
     >
       <div slot="title" class=dialog_header>
      <el-image class="imge" :src="q4" fit="cover" />
@@ -302,7 +303,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
     >
       <div slot="title" class=dialog_header>
      <el-image class="imge" :src="t1" fit="cover" />
@@ -338,7 +340,8 @@
        :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+    v-draggable
+      v-draggleft=[styX.left]
     >
        <div slot="title" class=dialog_header>
      <el-image class="imge" :src="t2" fit="cover" />
@@ -393,7 +396,8 @@
     custom-class='dialoglocation dialog_color'
       :visible.sync="dialog.rotation_visiable"
        width="385px"
-      :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
     >
      <div slot="title" class=dialog_header>
      <el-image class="imge" :src="t3" fit="cover" />
@@ -495,7 +499,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+     v-draggable
+      v-draggleft=[styX.left]
     >
      <div slot="title" class=dialog_header>
      <el-image class="imge" :src="t5" fit="cover" />
@@ -530,7 +535,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+     v-draggable
+      v-draggleft=[styX.left]
     >
       <div slot="title" class=dialog_header>
      <el-image class="imge" :src="w1" fit="cover" />
@@ -575,7 +581,8 @@
     custom-class='dialoglocation dialog_color'
      width="385px"
      heigth="385px"
-     :style="styX"
+     v-draggable
+      v-draggleft=[styX.left]
     >
        <div slot="title" class=dialog_header>
      <el-image class="imge" :src="w2" fit="cover" />
@@ -643,7 +650,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+     v-draggable
+      v-draggleft=[styX.left]
     >
          <div slot="title" class=dialog_header>
      <el-image class="imge" :src="w4" fit="cover" />
@@ -834,7 +842,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
     >
       <div slot="title" class=dialog_header>
      <el-image class="imge" :src="w6" fit="cover" />
@@ -903,7 +912,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+     v-draggable
+      v-draggleft=[styX.left]
     >
    <div slot="title" class=dialog_header>
      <el-image class="imge" :src="q1" fit="cover" />
@@ -976,7 +986,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-    :style="styX"
+    v-draggable
+      v-draggleft=[styX.left]
     >
     <div slot="title" class=dialog_header>
      <el-image class="imge" :src="q2" fit="cover" />
@@ -1056,7 +1067,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="384px"
-    :style="styX"
+    v-draggable
+      v-draggleft=[styX.left]
     >
         <div slot="title" class=dialog_header>
      <el-image class="imge" :src="w2" fit="cover" />
@@ -1159,7 +1171,8 @@
     custom-class='dialoglocation dialog_color heightclass'
      width="385px"
     height="400px"
-    :style="styX"
+    v-draggable
+      v-draggleft=[styX.left]
     >
        <div slot="title" class=dialog_header>
      <el-image class="imge" :src="w5" fit="cover" />
@@ -1253,7 +1266,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-    :style="styX"
+     v-draggable
+      v-draggleft=[styX.left]
     >
      <div slot="title" class=dialog_header>
      <el-image class="imge" :src="q3" fit="cover" />
@@ -1306,7 +1320,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
     >
         <div slot="title" class=dialog_header>
      <el-image class="imge" :src="q4" fit="cover" />
@@ -1425,7 +1440,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
     >
         <div slot="title" class=dialog_header>
      <el-image class="imge" :src="q5" fit="cover" />
@@ -1469,7 +1485,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+     v-draggable
+      v-draggleft=[styX.left]
     >
        <div slot="title" class=dialog_header>
      <el-image class="imge" :src="q6" fit="cover" />
@@ -1609,7 +1626,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-    :style="styX"
+     v-draggable
+      v-draggleft=[styX.left]
     >
       <el-form>
         <el-radio-group v-model="parameterObj.nmlParam.large_angle_fix">
@@ -1637,7 +1655,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-    :style="styX"
+     v-draggable
+      v-draggleft=[styX.left]
     >
       <el-form>
         <el-radio-group v-model="parameterObj.nmlParam.swap_yz_axes">
@@ -1707,7 +1726,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
     >
         <div slot="title" class=dialog_header>
      <el-image class="imge" :src="j1" fit="cover" />
@@ -1750,7 +1770,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-      :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
     >
    <div slot="title" class=dialog_header>
      <el-image class="imge" :src="j2" fit="cover" />
@@ -1830,7 +1851,8 @@
     @close='activecleer()'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+     v-draggable
+      v-draggleft=[styX.left]
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p3" fit="cover" />
@@ -1910,7 +1932,8 @@
     @close='activecleer()'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p9" fit="cover" />
@@ -1977,7 +2000,8 @@
     @close='activecleer()'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p4" fit="cover" />
@@ -2062,7 +2086,8 @@
     @close='activecleer()'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p14" fit="cover" />
@@ -2126,7 +2151,8 @@
     @close='activecleer()'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p15" fit="cover" />
@@ -2174,7 +2200,8 @@
     @close='activecleer()'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p16" fit="cover" />
@@ -2324,7 +2351,8 @@
     :close-on-click-modal="false"
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+     v-draggable
+      v-draggleft=[styX.left]
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p17" fit="cover" />
@@ -2435,7 +2463,8 @@
     @close='activecleer()'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="p9" fit="cover" />
@@ -2515,7 +2544,8 @@
     :close-on-click-modal="false"
     :modal-append-to-body='false'
       @close='activecleer()'
-        :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
   
     custom-class='dialoglocation dialog_color'
      width="385px"
@@ -2588,7 +2618,8 @@
     @close='activecleer()'
     custom-class='dialoglocation dialog_color'
      width="385px"
-     :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
        >
             <div slot="title" class=dialog_header>
      <el-image class="imge" :src="d1" fit="cover" />
@@ -2619,7 +2650,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-       :style="styX"
+      v-draggable
+      v-draggleft=[styX.left]
     >
               <div slot="title" class=dialog_header>
      <el-image class="imge" :src="d2" fit="cover" />
@@ -2675,7 +2707,8 @@
     :modal='false'
     custom-class='dialoglocation dialog_color'
      width="385px"
-       :style="styX"
+       v-draggable
+      v-draggleft=[styX.left]
     >
            <div slot="title" class=dialog_header>
      <el-image class="imge" :src="d3" fit="cover" />
@@ -4290,6 +4323,11 @@ this.styX.left=e.clientX+'px';
            this.stepfun();
             this.value1=Number(this.animationobj.currentstep);  
         this.dialog.an_Animation = true;
+            let that=this;
+        setTimeout(function(){
+            that.active='five7-0';
+       that.dialog.contour_visiable=true; 
+        },100)
        break;
         case 'five10-0':
         this.dialog.Curve_Select = true;