askbot-dragon 0.6.24 → 0.6.25

package/src/components/formTemplate.vue

@@ -4,17 +4,17 @@
       <div class="titleName" >
         {{formShow.form.name}}
       </div>
-      <div class="pcFormClass" v-if="isCompany===true">
+      <div class="pcFormClass" v-if="isCompany">
         <div v-for="(item) in formShow.form.formFieldRelation"
            :key="item.formField.id"
            :class="{notClick:disableds === true}"
       >
         <div v-if="item.formField.type!=='CHAT_RECORD'&&item.formField.type!=='CHANNEL'&&item.display&&item.fieldId!=='workorder_name'" class="field-item">
           <div v-if="item.display&&item.fieldId!=='workorder_name'&&item.formField.type!=='EXPLANATION'&&item.formField.type!=='EXPLAIN'" class="field-item-name">
-            <span style="color: red" v-if="item.required===true">*</span>
             <span v-if="item.fieldId!=='workorder_description'&&item.fieldId!=='workorder_clientId'">{{item.formField.name}}</span>
             <span v-if="item.fieldId==='workorder_description'">问题描述</span>
             <span v-if="item.fieldId==='workorder_clientId'">报单人</span>
+            <span style="color: red;padding-left: 5px" v-if="item.required===true">*</span>
           </div>
           <el-input v-model=item.value
                     :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
@@ -22,16 +22,16 @@
                     v-if="item.formField.type==='INPUT'&&item.fieldId!=='workorder_name'"
           ></el-input>
           <div v-if="item.formField.type==='EXPLANATION'">
-            <div style="display: flex;padding: 4px 0">
-              <p style="color: #4C61E1;font-size: 14px;margin: 10px 4px">
+            <div class="explanation">
+              <p class="explanation-p">
                 <span class="el-icon-info"></span>
                 {{item.formField.extInfo.descriptionText}}
               </p>
             </div>
           </div>
           <div v-if="item.formField.type==='EXPLAIN'">
-            <div style="display: flex;padding: 4px 0">
-              <p style="color: #4C61E1;font-size: 14px;margin: 10px 4px">
+            <div  class="explanation">
+              <p class="explanation-p">
                 <span class="el-icon-info"></span>
                 <span v-if="item.formField.extInfo.url" class="explain-url"><a :href="item.formField.extInfo.url" target="_blank">{{item.value}}</a></span>
                 <span v-else>{{item.value}}</span>
@@ -180,12 +180,13 @@
           </div>
         </div>
       </div>
-        <div style="padding: 10px 0;text-align: center">
-          <el-button style="border-color: #4C61E1;color: white;background-color: #4C61E1"  round class="submitClass" size="small" @click="submitClick" :disabled="disableds">{{submitValue}}</el-button>
+        <div class="form-link"></div>
+        <div class="form-submit-btn">
+          <el-button style="border-color: #366aff;color: white;background-color: #366aff"  round class="submitClass" size="small" @click="submitClick" :disabled="disableds">{{submitValue}}</el-button>
         </div>
-    </div>
+      </div>
       <div class="mobileFormClass" v-else style="padding: 10px 0;" :class="{notClick:disableds === true}">
-      <div v-for="(item,index) in formFieldRelation"
+        <div v-for="(item,index) in formFieldRelation"
            :key="item.formField.id"
            class="form-field-item"
       >
@@ -199,12 +200,12 @@
           />
         </div>
         <div v-else-if="item.formField.type==='EXPLANATION'||item.formField.type==='EXPLAIN'" class="explan-ation">
-          <div  class="explan-ation-div">
-            <p  class="explan-ation-p" v-if="item.formField.type==='EXPLANATION'">
+          <div  class="explanation">
+            <p  class="explanation-p" v-if="item.formField.type==='EXPLANATION'">
               <span class="el-icon-info"></span>
               {{item.formField.extInfo.descriptionText}}
             </p>
-            <p v-else class="explan-ation-p">
+            <p v-else class="explanation-p">
               <span class="el-icon-info"></span>
               <span v-if="item.formField.extInfo.url" class="explain-url"><a :href="item.formField.extInfo.url" target="_blank">{{item.value}}</a></span>
               <span v-else>{{item.value}}</span>
@@ -244,6 +245,7 @@
               :required="item.required===true"
               @click="dateClick(item.fieldId)"
               :disabled="disableds"
+              right-icon="van-icon van-icon-arrow van-cell__right-icon"
           />
           <van-calendar
               v-model="showCalendar"
@@ -261,6 +263,7 @@
               :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
               @click="timeClick(item.fieldId,item)"
               :disabled="disableds"
+              right-icon="van-icon van-icon-arrow van-cell__right-icon"
 
           />
           <van-popup v-model="showTimePicker" position="bottom">
@@ -286,6 +289,7 @@
               :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
               @click="timeClick(item.fieldId,item)"
               :disabled="disableds"
+              right-icon="van-icon van-icon-arrow van-cell__right-icon"
 
           />
           <van-calendar v-model="showTimePickerd" :show-confirm="false" @confirm="onConfirm($event,timeId,item)"  @cancel="showTimePickerd = false"/>
@@ -417,14 +421,15 @@
           </div>
         </div>
       </div>
-      <div class="form-submit-btn">
-        <van-button  round  type="info" class="submitClass" @click="submitClick"  :disabled="disableds">{{submitValue}}</van-button>
-      </div>
-      <van-popup v-model="fileUpload" :close-on-click-overlay="false">
-        <div style="background-color: black;height: 100px;width: 100px;display: flex;justify-content: center;align-items: center" >
-          <van-loading type="spinner"/>
+        <div class="form-link"></div>
+        <div class="form-submit-btn">
+         <van-button  round  type="info" class="submitClass" @click="submitClick"  :disabled="disableds">{{submitValue}}</van-button>
         </div>
-      </van-popup>
+        <van-popup v-model="fileUpload" :close-on-click-overlay="false">
+          <div style="background-color: black;height: 100px;width: 100px;display: flex;justify-content: center;align-items: center" >
+           <van-loading type="spinner"/>
+          </div>
+        </van-popup>
     </div>
     </div>
     <el-dialog :visible.sync="dialogVisible">
@@ -1629,9 +1634,21 @@ export default {
   /* border: 1px solid #ebebeb;*/
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   border-radius: 15px;
+  .explanation{
+    display: flex;
+    padding: 4px;
+    .explanation-p{
+      color: #366aff;
+      font-size: 14px;
+      margin: 10px 4px;
+      .el-icon-info{
+        margin-right: 8px;
+      }
+    }
+  }
   .explain-url{
     a{
-      color:#4C61E1 ;
+      color:#366aff ;
     }
   }
   .titleName{
@@ -1643,10 +1660,15 @@ export default {
     justify-content: center;
     border-bottom: 1px solid #EEEEEE;
   }
+  .form-link{
+    margin-top: 14px;
+    height: 1px;
+    width: 100%;
+    background-color: #EEEEEE;
+  }
   .form-submit-btn{
     padding: 14px 16px 0 16px;
     text-align: center;
-    border-top: 1px solid #EEEEEE;
   }
   /deep/.ck.ck-editor{
    padding: 0 8px;
@@ -1664,36 +1686,45 @@ export default {
   }
 }
 .pcFormClass{
-  width: 300px;
+ /* width: 300px;*/
   margin: 0 auto;
   .field-item{
     padding: 8px 0;
     .field-item-name{
       padding-bottom: 8px;
-      /*color: #A9B3C6;*/
-      color: #000000;
+      color: #A9B3C6;
+     /* color: #000000;*/
     }
   }
+  /deep/.el-input__inner{
+    border-color: #E0E6F7!important;
+    background-color: transparent!important;
+    border-radius: 9px!important;
+  }
   /deep/.el-upload--picture-card{
-    background-color: #fbfdff;
-    border: 1px dashed #c0ccda;
-    border-radius: 6px;
+    background-color: #FFFFFF;
+    border: 1px solid #E0E6F7;
+    border-radius: 10px;
     width: 74px;
     height: 74px;
     vertical-align: top;
     cursor: pointer;
     text-align: center;
     font-size:28px;
-    color:#8c939d;
+    color:#366AFF;
     display: flex;
     align-items: center;
     justify-content: center;
+    i{
+      color: #366AFF;
+    }
   }
 
   /deep/.el-upload-list--picture-card{
     .el-upload-list__item{
       width: 74px;
       height: 74px;
+      border-radius: 10px;
     }
   }
   /deep/.el-upload-list__item-name{
@@ -1704,16 +1735,16 @@ export default {
   }
 }
 /deep/.van-radio__icon--checked .van-icon{
-  background-color: #4C61E1!important;
-  border-color: #4C61E1!important;
+  background-color: #366aff!important;
+  border-color: #366aff!important;
 }
 /deep/.van-checkbox__icon--checked .van-icon{
-  background-color: #4C61E1!important;
-  border-color: #4C61E1!important;
+  background-color: #366aff!important;
+  border-color: #366aff!important;
 }
 /deep/.vant-upload--picture-card{
-  background-color: #fbfdff;
-  border: 1px dashed #c0ccda;
+  background-color: #ffffff;
+  border: 1px solid #E0E6F7;
   border-radius: 10px;
   width: 74px;
   height: 74px;
@@ -1725,13 +1756,16 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
+  i{
+    color: #366aff;
+  }
 }
 /deep/.van-popup{
   border-radius: 5px;
 }
 .remPhoneClassForm{
   .mobileFormClass{
-     width: 80vw;
+    /* width: 80vw;*/
     .form-field-item{
      /* border-bottom: 1px solid #ebebeb;*/
       .form-field-item-value{
@@ -1752,8 +1786,8 @@ export default {
           padding: 8px;
           .fileName{
             padding-bottom: 8px;
-           /* color: #A9B3C6;*/
-            color: #000000;
+            color: #A9B3C6;
+           /* color: #000000;*/
           }
         }
         .workorder_description{
@@ -1763,8 +1797,8 @@ export default {
           .field-name{
             width: 100%;
             text-align: left;
-           /* color: #A9B3C6;*/
-            color: #000000;
+            color: #A9B3C6;
+           /* color: #000000;*/
             line-height: 1;
             padding-bottom: 8px;
           }
@@ -1792,7 +1826,7 @@ export default {
           padding: 4px;
         }
         .explan-ation-p{
-          color: #4C61E1;font-size: 14px;margin: 16px 4px;
+          color: #366aff;font-size: 14px;margin: 16px 4px;
         }
       }
     }
@@ -1823,18 +1857,40 @@ export default {
   }
   .submitClass{
     width: 120px;
-    background-color: #4C61E1;
+    background-color: #366aff;
     color: white!important;
     height: 36px;
   }
+  /deep/.van-radio-group--horizontal{
+   .van-radio{
+      min-width: 130px;
+      max-width: 260px;
+      flex: none;
+    }
+    .van-radio--horizontal{
+      padding: 0.3rem 0;
+      margin-right: 0;
+    }
+  }
+  /deep/.van-checkbox-group--horizontal{
+    .van-checkbox{
+      min-width: 130px;
+      max-width: 260px;
+      flex: none;
+    }
+    .van-checkbox--horizontal{
+      padding: 0.3rem 0;
+      margin-right: 0;
+    }
+  }
   /deep/.van-button--info{
-    border:1px solid #4C61E1;
+    border:1px solid #366aff;
   }
   /deep/.van-field__label{
     width: 100%;
     text-align: left;
-    /*color: #A9B3C6!important;*/
-    color: #000000!important;
+    color: #A9B3C6!important;
+ /*   color: #000000!important;*/
     display: flex;
     align-items: center;
     line-height: 1;
@@ -1845,26 +1901,12 @@ export default {
   /deep/.van-field__control{
     min-height: 40px;
   }
-  /deep/.van-checkbox--horizontal{
-    padding: 0.2rem 0;
-  }
-  /deep/.van-radio--horizontal{
-    padding: 0.2rem 0;
-  }
   /deep/.van-dropdown-menu__bar{
     box-shadow: none!important;
   }
-
   /deep/.van-overlay{
     background-color: rgba(0,0,0,.4);
   }
-
-
-  /deep/.el-input__inner{
-    background-color: transparent!important;
-  }
-
-
 }
 
 .remCompanyClassForm{
@@ -1873,29 +1915,65 @@ export default {
   .submitClass{
     width: 120px;
     color: white!important;
-    background-color:#4C61E1;
-    border-color: #4C61E1;
+    background-color:#366aff;
+    border-color: #366aff;
   }
-  .el-checkbox{
-    line-height: 2;
+  /deep/.el-checkbox-group{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    .el-checkbox{
+      padding: 8px 0;
+      min-width:150px;
+      max-width: 280px;
+      flex: none;
+      display: flex;
+      overflow: hidden;
+      margin-right: 0;
+    }
+    .el-checkbox__label{
+      font-size: 1em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
-  .el-radio{
-    padding: 4px 0;
+
+  /deep/.el-radio-group{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    .el-radio{
+      padding: 8px 0;
+      min-width:150px;
+      max-width: 280px;
+      flex: none;
+      display: flex;
+      overflow: hidden;
+      margin-right: 0;
+    }
+    .el-radio__label{
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 1em;
+    }
   }
+
   /deep/.el-radio__input.is-checked+.el-radio__label{
-    color: #4C61E1!important;
+    color: #366aff!important;
   }
   /deep/.el-radio__input.is-checked .el-radio__inner{
-    color: #4C61E1!important;
-    border-color:  #4C61E1!important;
-    background: #4C61E1!important;
+    color: #366aff!important;
+    border-color:  #366aff!important;
+    background: #366aff!important;
   }
   /deep/.el-checkbox__input.is-checked+.el-checkbox__label{
-    color: #4C61E1!important;
+    color: #366aff!important;
   }
   /deep/.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
-    background-color: #4C61E1!important;
-    border-color: #4C61E1!important;
+    background-color: #366aff!important;
+    border-color: #366aff!important;
   }
 }
 

package/src/components/loadingProcess.vue

@@ -0,0 +1,176 @@
+<template>
+  <div id="loading-process">
+    <div class="bg-color"></div>
+    <ul class="display-container" >
+      <li class="note-display" :data-note="dataNodes">
+        <div class="circle">
+          <svg width="30" height="30" class="circle__svg" viewBox="0 0 90 90">
+            <circle cx="41" cy="41" r="38" class="circle__progress circle__progress--path"></circle>
+            <circle cx="41" cy="41" r="38" class="circle__progress circle__progress--fill"></circle>
+          </svg>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  const  transitionDuration = 1000
+  export default {
+    name: "loadingProcess",
+    data(){
+      return{
+        timer:null,
+        dataNodes:0
+      }
+    },
+    props:['dataNote','finished'],
+    methods:{
+      strokeTransition(display, note) {
+        let progress = display.querySelector('.circle__progress--fill');
+        let radius = progress.r.baseVal.value;
+        let circumference = 2 * Math.PI * radius;
+        let offset = circumference * (10 - note) / 10;
+        progress.style.setProperty('--initialStroke', circumference);
+        progress.style.setProperty('--transitionDuration', `${transitionDuration}ms`);
+
+        setTimeout(() => progress.style.strokeDashoffset = offset, 100);
+      },
+      increaseNumber(display, number, className) {
+        let element = display.querySelector(`.percent__${className}`),
+            decPoint = className === 'int' ? '' : '',
+            interval = transitionDuration / number,
+            counter = 0;
+        console.debug('element',element,counter,decPoint)
+        let increaseInterval = setInterval(() => {
+          if (counter === number) { window.clearInterval(increaseInterval); }
+/*
+          element.textContent = counter + decPoint;*/
+          counter++;
+        }, interval);
+      }
+    },
+    mounted() {
+      this.timer = setInterval(()=>{
+        const displays = document.querySelectorAll('.note-display');
+        displays.forEach(display => {
+          let note = parseFloat(display.dataset.note);
+          let [int, dec] = display.dataset.note.split('.');
+          [int, dec] = [Number(int), Number(dec)];
+          this.strokeTransition(display, note);
+          this.increaseNumber(display, this.dataNote, 'int');
+          /* this.increaseNumber(display, dec, 'dec');*/
+        })
+      },1000)
+     /* const displays = document.querySelectorAll('.note-display');
+      displays.forEach(display => {
+        let note = parseFloat(display.dataset.note);
+        let [int, dec] = display.dataset.note.split('.');
+        [int, dec] = [Number(int), Number(dec)];
+        this.strokeTransition(display, note);
+        this.increaseNumber(display, this.dataNote, 'int');
+        /!* this.increaseNumber(display, dec, 'dec');*!/
+      })*/
+
+    },
+    watch:{
+      dataNote:{
+        handler(val){
+          this.dataNodes = val
+          console.debug('this.dataNodes',val,this.dataNodes)
+        },
+        immediate:true,
+        deep:true
+      },
+      finished:{
+        handler(val){
+          if (val){
+            setTimeout(()=>{
+              clearInterval(this.timer)
+            },1000)
+          }
+        },
+        immediate:true
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+/*@import url('https://fonts.googleapis.com/css?family=Nixie+One|Raleway:200');*/
+#loading-process{
+  height: 100px;
+  width: 100px;
+  position: relative;
+  .bg-color{
+    background-color:#000000 ;
+    opacity: 0.4;
+    width: 100%;
+    height: 100%;
+  }
+  .display-container{
+    position: absolute;
+    top: calc(50% - 15px);
+    left: 10px;
+  }
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+/*
+body {
+  height: 100vh;
+  color: #fff;
+  display: flex;
+  background: #3E423A;
+  font-family: 'Nixie One', cursive;
+}
+*/
+
+.display-container {
+  margin: auto;
+  display: flex;
+  .note-display {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 25px;
+  }
+}
+.circle__progress {
+  fill: none;
+  stroke-width: 5;
+  stroke-opacity: 0.3;
+  stroke-linecap: round;
+}
+.note-display:nth-child(1) .circle__progress--fill{
+  stroke: #FFFFFF!important;
+  stroke-opacity: 1;
+}
+.circle__progress--path{
+    stroke: #EFEFEF!important;
+  stroke-opacity: 0.5;
+}
+.note-display:nth-child(1) .circle__progress { stroke: #AAFF00; }
+.note-display:nth-child(2) .circle__progress { stroke: #FF00AA; }
+.note-display:nth-child(3) .circle__progress { stroke: #AA00FF; }
+.note-display:nth-child(4) .circle__progress { stroke: #00AAFF; }
+.circle {
+  position: relative;
+}
+
+.percent {
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  position: absolute;
+  font-weight: bold;
+  text-align: center;
+  /* line-height: 28px;*/
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+}
+
+</style>