askbot-dragon 1.1.28 → 1.2.0

package/src/components/loadingProcess.vue

@@ -1,165 +1,165 @@
-<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)
-    },
-    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;
-  .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;
-}
-
+<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)
+    },
+    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;
+  .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>

package/src/components/message/ActionAlertIframe.vue

@@ -1,113 +1,113 @@
-<template>
-    <div id="action_alert_iframe">
-        <iframe
-            class="grzh-iframe"
-            :id="tampId"
-            :data-name="tampId"
-            :src="actionAlertIframe.template"
-            width="100%"
-            :height="actionAlertIframe.height"
-            :scrolling="actionAlertIframe.scrolling"
-            frameborder="no"
-            border="0"
-        ></iframe>
-    </div>
-</template>
-<script>
-export default {
-    name: "action_alert_iframe",
-    props: ["actionAlertIframe"],
-    data() {
-        return {
-            name: "action_alert_iframe",
-            dataName: "",
-            tampId:'',
-            // 组件接收数据
-            actionAlertIframeObj: {
-                template: "url地址(可插入变量)",
-                description: "描述",
-                height: "frame高度",
-                width: "iframe 的宽度",
-                scrolling: "yes/no/auto(是否在 iframe 中显示滚动条)",
-                sandbox: [
-                    "预留",
-                    "启用一系列对 <iframe> 中内容的额外限制",
-                    "参考 https://www.w3school.com.cn/tags/att_iframe_sandbox.asp",
-                ],
-                frameborder: "0/1(是否显示框架周围的边框)",
-                displayStyle:
-                    "iframe 样式(点击弹出/嵌入iframe 字符串类型后端未做限制)",
-            },
-        };
-    },
-    methods: {},
-    mounted() {
-        this.tampId = 'iframeId++' + new Date().getTime();
-        let tampUrl = this.actionAlertIframe.template;
-        function GetRequest() {
-            var url = tampUrl.split("?")[1]; //获取url中"?"符后的字串
-            var theRequest = new Object();
-            if (url) {
-                // var str = url.substr(1);
-                let strs = url.split("&");
-                for (var i = 0; i < strs.length; i++) {
-                    theRequest[strs[i].split("=")[0]] = unescape(
-                        strs[i].split("=")[1]
-                    );
-                }
-            }
-            return theRequest;
-        }
-        if (JSON.stringify(GetRequest()) == "{}") {
-          this.actionAlertIframe.template = this.actionAlertIframe.template  + "?iframeId=" + this.tampId
-        } else {
-          this.actionAlertIframe.template = this.actionAlertIframe.template  + "&iframeId=" + this.tampId
-        }
-    },
-};
-</script>
-<style lang="less" scoped>
-// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-#action_alert_iframe {
-    width: 100%;
-    margin: 0 auto;
-    overflow-x: auto;
-    .grzh-iframe {
-        scrollbar-face-color: #9aa1c4;
-        /* 滚动条滑块按钮的颜色 */
-        scrollbar-highlight-color: #f60;
-        /* 滚动条整体颜色 */
-        scrollbar-3dlight-color: #f00;
-        scrollbar-darkshadow-color: #000;
-        /* 滚动条阴影 */
-        scrollbar-shadow-color: #000;
-        /* 三角箭头颜色 */
-        scrollbar-arrow-color: #394264;
-        /* 滚动条轨道颜色 */
-        scrollbar-track-color: #394264;
-
-        ::-webkit-scrollbar {
-            width: 5px;
-            height: 5px;
-        }
-        ::-webkit-scrollbar-thumb {
-            background-color: #999;
-            -webkit-border-radius: 5px;
-            border-radius: 5px;
-        }
-        ::-webkit-scrollbar-thumb:vertical:hover {
-            background-color: #666;
-        }
-        ::-webkit-scrollbar-thumb:vertical:active {
-            background-color: #333;
-        }
-        ::-webkit-scrollbar-button {
-            display: none;
-        }
-        ::-webkit-scrollbar-track {
-            background-color: #f1f1f1;
-        }
-    }
-}
+<template>
+    <div id="action_alert_iframe">
+        <iframe
+            class="grzh-iframe"
+            :id="tampId"
+            :data-name="tampId"
+            :src="actionAlertIframe.template"
+            width="100%"
+            :height="actionAlertIframe.height"
+            :scrolling="actionAlertIframe.scrolling"
+            frameborder="no"
+            border="0"
+        ></iframe>
+    </div>
+</template>
+<script>
+export default {
+    name: "action_alert_iframe",
+    props: ["actionAlertIframe"],
+    data() {
+        return {
+            name: "action_alert_iframe",
+            dataName: "",
+            tampId:'',
+            // 组件接收数据
+            actionAlertIframeObj: {
+                template: "url地址(可插入变量)",
+                description: "描述",
+                height: "frame高度",
+                width: "iframe 的宽度",
+                scrolling: "yes/no/auto(是否在 iframe 中显示滚动条)",
+                sandbox: [
+                    "预留",
+                    "启用一系列对 <iframe> 中内容的额外限制",
+                    "参考 https://www.w3school.com.cn/tags/att_iframe_sandbox.asp",
+                ],
+                frameborder: "0/1(是否显示框架周围的边框)",
+                displayStyle:
+                    "iframe 样式(点击弹出/嵌入iframe 字符串类型后端未做限制)",
+            },
+        };
+    },
+    methods: {},
+    mounted() {
+        this.tampId = 'iframeId++' + new Date().getTime();
+        let tampUrl = this.actionAlertIframe.template;
+        function GetRequest() {
+            var url = tampUrl.split("?")[1]; //获取url中"?"符后的字串
+            var theRequest = new Object();
+            if (url) {
+                // var str = url.substr(1);
+                let strs = url.split("&");
+                for (var i = 0; i < strs.length; i++) {
+                    theRequest[strs[i].split("=")[0]] = unescape(
+                        strs[i].split("=")[1]
+                    );
+                }
+            }
+            return theRequest;
+        }
+        if (JSON.stringify(GetRequest()) == "{}") {
+          this.actionAlertIframe.template = this.actionAlertIframe.template  + "?iframeId=" + this.tampId
+        } else {
+          this.actionAlertIframe.template = this.actionAlertIframe.template  + "&iframeId=" + this.tampId
+        }
+    },
+};
+</script>
+<style lang="less" scoped>
+// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+#action_alert_iframe {
+    width: 100%;
+    margin: 0 auto;
+    overflow-x: auto;
+    .grzh-iframe {
+        scrollbar-face-color: #9aa1c4;
+        /* 滚动条滑块按钮的颜色 */
+        scrollbar-highlight-color: #f60;
+        /* 滚动条整体颜色 */
+        scrollbar-3dlight-color: #f00;
+        scrollbar-darkshadow-color: #000;
+        /* 滚动条阴影 */
+        scrollbar-shadow-color: #000;
+        /* 三角箭头颜色 */
+        scrollbar-arrow-color: #394264;
+        /* 滚动条轨道颜色 */
+        scrollbar-track-color: #394264;
+
+        ::-webkit-scrollbar {
+            width: 5px;
+            height: 5px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background-color: #999;
+            -webkit-border-radius: 5px;
+            border-radius: 5px;
+        }
+        ::-webkit-scrollbar-thumb:vertical:hover {
+            background-color: #666;
+        }
+        ::-webkit-scrollbar-thumb:vertical:active {
+            background-color: #333;
+        }
+        ::-webkit-scrollbar-button {
+            display: none;
+        }
+        ::-webkit-scrollbar-track {
+            background-color: #f1f1f1;
+        }
+    }
+}
 </style>