Merge branch 'dev' of http://git.sinoecare.com/sinoecare/digital_village_v2/dvcp_v2_webapp into dev

package.json

@@ -26,6 +26,7 @@
     "print-js": "^1.0.63",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.12.0",
+    "spritejs": "^3.8.0",
     "vue-draggable-resizable": "^2.3.0",
     "vue-json-editor": "^1.4.3",
     "vue-okr-tree": "^1.0.10",

project/dvui/components/AiDataPanel.vue

@@ -1,88 +0,0 @@
-<template>
-  <section class="AiDataPanel">
-    <b class="item-title" v-text="label"/>
-    <div class="num-bg">
-      <span ref="num" class="num" v-text="num"/>
-    </div>
-  </section>
-</template>
-
-<script>
-import {gsap} from 'gsap'
-
-export default {
-  name: "AiDataPanel",
-  props: {
-    label: {default: "标题"},
-    value: {default: 0}
-  },
-  data() {
-    return {
-      num: 0
-    }
-  },
-  methods: {
-    animation() {
-      let demo = {num: Math.max(this.value - 30, 0)}
-      gsap.to(demo, 1, {
-        num: this.value, onUpdate: () => {
-          this.num = demo.num?.toFixed(0)
-        }
-      })
-    }
-  },
-  mounted() {
-    this.animation()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.AiDataPanel {
-  flex: 1;
-  width: 172px;
-  height: 160px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: #000;
-
-  & + .AiDataPanel {
-    margin-left: 16px;
-  }
-
-  .item-title {
-    font-size: 24px;
-    line-height: 32px;
-    background-image: -webkit-linear-gradient(bottom, #35BEFF, #EBF9FF, #FFFFFF);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin-top: 30px;
-  }
-
-  .num-bg {
-    width: 100%;
-    height: 160px;
-    background-image: url(https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/number-bg.png);
-    background-size: 100% 100%;
-    position: relative;
-    margin-top: -76px;
-
-    .num {
-      position: absolute;
-      left: 0;
-      bottom: 30px;
-      width: 100%;
-      text-align: center;
-      height: 50px;
-      font-size: 40px;
-      font-family: D-DIN-Bold, D-DIN;
-      font-weight: bold;
-      line-height: 54px;
-      background-image: -webkit-linear-gradient(bottom, #35BEFF, #EBF9FF, #FFFFFF);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-  }
-}
-</style>

project/dvui/components/AiStaData.vue

@@ -1,30 +0,0 @@
-<template>
-  <section class="AiStaData">
-    <ai-data-panel v-for="op in data" :key="op[key]"
-                   :label="op[label]" :value="op[key]"/>
-  </section>
-</template>
-
-<script>
-import AiDataPanel from "./AiDataPanel";
-
-export default {
-  name: "AiStaData",
-  components: {AiDataPanel},
-  props: {
-    data: {default: () => []},
-    key: {default: "id"},
-    label: {default: "label"},
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.AiStaData {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-</style>

project/dvui/layout/AiDvWrapper/AiDvWrapper.vue

@@ -23,7 +23,7 @@
           </div>
           <div class="headerCenter">
             <div class="headerZone">
-              <div ref="fly" class="fly"/>
+              <div id="fly" class="fly"/>
               <span>{{ title }}</span>
             </div>
           </div>
@@ -55,10 +55,9 @@
 
 <script>
 import {fullScreenContainer} from '@jiaminghi/data-view'
-import {gsap} from 'gsap'
-import {MotionPathPlugin} from "gsap/MotionPathPlugin.js"
 import Vue from "vue";
 import RightTopBorder from "./rightTopBorder";
+import {Arc, Scene} from 'spritejs'
 
 Vue.use(fullScreenContainer)
 
@@ -126,43 +125,44 @@ export default {
       }
     },
     initFly() {
-      gsap.registerPlugin(MotionPathPlugin);
-      const rand = (min, max) => min + (max - min) * Math.random(),
-          startFly = (p) => {
-            gsap.timeline()
-            .fromTo(p, {
-              x: rand(0, 600),
-              y: 90 - rand(8, 50),
-              scale: rand(1, 3),
-            }, {
-              y: 0,
-              ease: 'elastic.easeInOut',
-              duration: rand(2, 6),
-              onComplete: () => {
-                startFly(p, true);
-              }
-            }, 0)
-            .fromTo(p, {
-              opacity: 1
-            }, {
+      const rand = (min, max) => min + (max - min) * Math.random()
+      const initScene = (count = 0) => {
+        const container = document.querySelector('#fly')
+        if (container) {
+          const scene = new Scene({container, width: 600, height: 90}),
+              layer = scene.layer()
+          const startFly = (p) => {
+            let scaleNum = rand(1, 3)
+            const pos = [rand(0, 600), 90 - rand(8, 50)]
+            p.attr({
+              pos,
+              scale: [scaleNum, scaleNum],
+              radius: 1,
+              fillColor: '#0aa5ff',
+              filter: 'drop-shadow( 0, 2px, 2px, #0aa5ff)'
+            })
+            p.animate([
+              pos,
+              {y: 0}
+            ], {
               opacity: 0,
-              duration: rand(1, 1.5),
-              yoyo: true,
-              repeat: -1,
-              ease: 'power4.in'
-            }, 0)
+              duration: rand(1, 1.5) * 1000,
+              iterations: Infinity,
+              easing: 'ease-out'
+            })
+            setTimeout(() => layer.append(p), rand(1, 5) * 1000)
           }
+          //初始化标题萤火效果
+          let numP = 70;
+          for (let i = 0; i <= numP; i++) {
+            const p = new Arc()
+            startFly(p)
+          }
+        } else if (count == 20) {
 
-      setTimeout(() => {
-        //初始化标题萤火效果
-        let numP = 70;
-        for (let i = 0; i <= numP; i++) {
-          let p = document.createElement('div');
-          p.id = "p" + i;
-          this.$refs.fly?.appendChild(p)
-          setTimeout(() => startFly(p), 1000)
-        }
-      }, 1000)
+        } else setTimeout(() => initScene(++count), 500)
+      }
+      initScene()
     },
     handleSetting() {
       if (this.setting.timer) clearInterval(this.setting.timer)
@@ -533,6 +533,7 @@ export default {
         display: none;
       }
     }
+
     .headerPane {
       align-items: initial;
       z-index: 11;
@@ -542,8 +543,9 @@ export default {
       // background-size: 100% 88px;
       background-position-x: -8px;
     }
+
     .breatheLights {
-      display: none!important;
+      display: none !important;
     }
 
     .headerPane .headerCenter {
@@ -561,10 +563,8 @@ export default {
 
         span {
           top: 45%;
-          line-height: 1;
           font-size: 32px;
           font-family: FZZZHONGJW--GB1-0, FZZZHONGJW--GB1;
-          font-weight: normal;
           color: #CEE1FF;
           font-weight: 600;
           line-height: 38px;
@@ -580,13 +580,13 @@ export default {
         display: none;
       }
     }
-    
+
     .rightTopBorder {
       background: none;
       box-shadow: none;
 
       ::v-deep .corner {
-        display: none!important;
+        display: none !important;
       }
     }
 
@@ -603,14 +603,14 @@ export default {
 
     .setting {
       cursor: pointer;
-      background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/img/setting.svg")!important;
+      background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/img/setting.svg") !important;
       background-repeat: no-repeat;
       background-position: center center;
     }
 
     .fullscreen {
       cursor: pointer;
-      background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/img/fullscreen.svg")!important;
+      background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/img/fullscreen.svg") !important;
       background-repeat: no-repeat;
       background-position: center center;
     }

project/dvui/package.json

@@ -11,7 +11,6 @@
     "dvcp-ui": "^1.42.2",
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@jiaminghi/data-view": "^2.10.0",
-    "gsap": "^3.7.1",
     "video.js": "^6.13.0",
     "videojs-contrib-hls": "^5.15.0"
   }