热点类型

index.html

@@ -16,6 +16,7 @@
   <title><{VITE_PROJECT_TITLE}></title>
 <!--  <link rel="stylesheet" href="/Cesium/Widgets/widgets.css">-->
 <!--  <script src="/Cesium/Cesium.js"></script>-->
+  <script src="/tagcanvas.min.js"></script>
   <script src="/config.js"></script>
 </head>
 

src/views/gis/business/situation/index.vue

@@ -46,7 +46,12 @@
           </div>
         </FocusContentCom>
         <div class="__gis-business-main_title">热点类型</div>
-        <FocusContentCom class="two">2</FocusContentCom>
+        <FocusContentCom class="two">
+          <div class="two-main">
+            <canvas id="id_rdlx"/>
+            <div class="two-main-tags" id="id_rdlxTags"/>
+          </div>
+        </FocusContentCom>
         <div class="__gis-business-main_title">类型占比</div>
         <FocusContentCom class="three">
           <LxzbChartCom :data="lxzbData"/>
@@ -160,6 +165,16 @@ export default defineComponent({
         {value: '70', name: '苹果手机'},
         {value: '230', name: '其他'},
         {value: '171', name: '手表'},
+      ],
+      rdlx: [
+        {value: '171', name: '反走私'},
+        {value: '101', name: '各种酒类啊撒旦阿斯顿阿萨打赏打赏'},
+        {value: '70', name: '苹果手机'},
+        {value: '230', name: '其他fsas发生法发安抚'},
+        {value: '171', name: '手表'},
+        {value: '171', name: '手表1'},
+        {value: '171', name: '手表2'},
+        {value: '171', name: '手表3'},
       ]
     })
     const onSearch = () => {
@@ -205,6 +220,56 @@ export default defineComponent({
         ]
       }
     })
+    const rdlxAnimate = (updateFlag = false) => {
+      const fragment = new DocumentFragment();
+      state.rdlx.forEach((v, i) => {
+        const a = document.createElement('a')
+        v.tagName = v.name
+        if (v.name.length > 7) {
+          v.tagName = v.name.substring(0, 7) + '...';
+        }
+        a.innerHTML = v.tagName
+        a.href = 'javascript:void(0)'
+        a.setAttribute('data-weight', String(state.rdlx.length - i))
+        fragment.append(a)
+      })
+      const tagsDom: any = document.getElementById('id_rdlxTags')
+      tagsDom.innerHTML = ''
+      tagsDom.append(fragment)
+      let options = {
+        minSpeed: 0.01,
+        // textFont: 'YouSheBiaoTiHei',
+        textFont: null,
+        textColour: '#ffffff',
+        textHeight: 14,
+        initial: [0.1, -0.1],
+        reverse: true,
+        stretchX: 2,
+        shadowBlur: 0,
+        dragControl: true,
+        noSelect: true,
+        padding: 10,
+        weight: true,
+        weightFrom: 'data-weight',
+        weightMode: "both", // 样式调整的方式
+        weightSizeMin: 10,
+        weightSizeMax: 20,
+        weightGradient: {
+          0:   '#FD658C',            // red
+          0.25: '#4FACFE',         // orange
+          0.5: '#01B1A7',         // orange
+          1:   'rgba(115,197,255,1)' // black, but 90% transparent
+        }
+      };
+      try {
+        // 如果不是更新，说明是第一次渲染，就启动 tagcanvas, 否则就代表更新
+        if (!updateFlag) {
+          TagCanvas.Start('id_rdlx', 'id_rdlxTags', options);
+        } else {
+          TagCanvas.Update('id_rdlx');
+        }
+      } catch (e) {}
+    }
     const handlePage = ({page, pageSize}: any) => {
       state.fzssj.table.pageNum = page
       state.fzssj.table.pageSize = pageSize
@@ -234,6 +299,9 @@ export default defineComponent({
       state.datetimeType = '1'
       state.situation.form = JSON.parse(JSON.stringify(state.situation.tempForm))
       state.fzssj.form = JSON.parse(JSON.stringify(state.fzssj.tempForm))
+      setTimeout(() => {
+        rdlxAnimate()
+      }, 1000)
     })
     return {
       ...toRefs(state),
@@ -398,6 +466,22 @@ export default defineComponent({
     }
     .two {
       height: 220px;
+      .two-main {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background-image: url("@/assets/images/gis-business/situation_rdlx-bg.png");
+        background-repeat: no-repeat;
+        background-position-y: calc(100% - 10px);
+        background-position-x: 10px;
+        >canvas {
+          width: 100%;
+          height: 100%;
+        }
+        .two-main-tags {
+          display: none;
+        }
+      }
     }
     .three {
       height: 190px;