修改大屏

src/utils/http/axios/index.ts

@@ -49,15 +49,12 @@ const transform: AxiosTransform = {
       throw new Error(t('sys.api.apiRequestFailed'))
     }
     //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
-    const { code, data: result, message, meta } = data
+    const { code, data: result, message } = data
-    const resDate = {
+
-      items: result,
-      total: meta?.total ?? null,
-    }
     // 这里逻辑可以根据项目进行修改
     const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS
     if (hasSuccess) {
-      return resDate
+      return result
     }
 
     // 在此处根据自己项目的实际情况对不同的code执行不同的操作

src/views/visualization/components/Circle.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="relative w-full h-full" style="zoom: 0.55">
     <div class="container-box">
-      <div class="main" :style="`transform: rotateY(-${count * 90}deg) translateZ(-200px)`">
+      <div class="main" :style="`transform: rotateY(-${(count * 360) / 3}deg) translateZ(-200px)`">
-        <div
+        <!-- <div
           class="figure frame"
           :style="`transform: rotateY(${index * 90}deg) translateZ(400px)`"
           v-for="(item, index) in pAxis"
@@ -15,6 +15,17 @@
               <span>{{ ob.data[index] }}</span>
             </div>
           </div>
+        </div> -->
+        <div
+          class="figure frame"
+          :style="`transform: rotateY(${(index * 360) / 3}deg) translateZ(400px)`"
+          v-for="(item, index) in list"
+          :key="index"
+        >
+          <div class="text-white px-10px h-full flex flex-col items-center justify-center">
+            <div class="text-18px">{{ item.name }}</div>
+            <div class="text-40px mt-10px">{{ item.value }}</div>
+          </div>
         </div>
       </div>
       <div class="circle-container" style="transform: translateZ(-200px)">
@@ -46,17 +57,29 @@
       },
     },
     setup(props) {
+      console.log(props)
+
       const count = ref(0)
 
       const pAxis = computed(() => unref(props.axis))
 
       const pDxis = computed(() => unref(props.data))
 
+      const list = computed((): any =>
+        unref(props.data).reduce((p, c) => {
+          p.push({
+            name: c.name,
+            value: c.data.reduce((p, c) => (p += parseFloat(c ?? 0)), 0),
+          })
+          return p
+        }, []),
+      )
+
       let timer: any = null
 
       function Interval() {
         count.value = 0
-        timer?.clearInterval()
+        timer && clearInterval(timer)
         timer = setInterval(() => {
           count.value += 1
         }, 3000)
@@ -65,6 +88,7 @@
       Interval()
 
       return {
+        list,
         count,
         pAxis,
         pDxis,

src/views/visualization/components/DXCY.vue

@@ -18,12 +18,16 @@
   import { useVisualizationStore } from '/@/store/modules/visualization'
   import { chartLineColors } from './colors'
   import Circle from './Circle.vue'
+
+  import { useVContext } from '../useVContext'
+
   export default defineComponent({
     components: {
       Box,
       Circle,
     },
     setup() {
+      const { rootEmitter } = useVContext()
       const Data = reactive({
         x_axis: [],
         series: [],
@@ -136,7 +140,7 @@
       let timer: any = null
       function chartAmi() {
         let index = 0
-        timer?.clearInterval()
+        timer && clearInterval(timer)
         timer = setInterval(() => {
           const currentIndex = index % legendData.length
           // getInstance()?.dispatchAction({
@@ -161,6 +165,9 @@
 
       onBeforeMount(() => {
         getData()
+        rootEmitter.on('interval:auto', () => {
+          getData()
+        })
       })
 
       watch(

src/views/visualization/components/DXJG.vue

@@ -1,5 +1,5 @@
 <template>
-  <Box title="稻虾价格">
+  <Box title="稻虾价格（元/斤）">
     <div class="h-full flex flex-col">
       <div class="flex-1" ref="chartRef"> </div>
     </div>
@@ -12,11 +12,15 @@
   import { useECharts } from '/@/hooks/web/useECharts'
   import { getRiceShrimpPrice } from '/@/api/sys/other'
   import { chartLineColors } from './colors'
+
+  import { useVContext } from '../useVContext'
+
   export default defineComponent({
     components: {
       Box,
     },
     setup() {
+      const { rootEmitter } = useVContext()
       const tabList = reactive([
         {
           key: '0',
@@ -47,6 +51,11 @@
         chartsInit()
       }
 
+      const reducer = (acc, cur) => (cur > acc ? cur : acc)
+      function largestOfFour(arr) {
+        return arr.map(({ data }) => data.reduce(reducer))
+      }
+
       const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
       let legendData = [] as any
       const chartsInit = () => {
@@ -73,6 +82,8 @@
           })
         })
 
+        const max = Math.max(...largestOfFour(Data.series)) ?? 100
+
         legendData = obj.legendData
 
         setOptions({
@@ -114,8 +125,11 @@
               axisTick: {
                 show: false,
               },
-              max: 60,
+              // max,
-              min: 0,
+              // min: 0,
+              nameTextStyle: {
+                color: '#fff',
+              },
               splitLine: {
                 lineStyle: {
                   type: 'solid',
@@ -125,6 +139,9 @@
               },
               axisLabel: {
                 color: '#fff',
+                formatter: (e) => {
+                  return e
+                },
               },
             },
           ],
@@ -136,7 +153,8 @@
       let timer: any = null
       function chartAmi() {
         let index = 0
-        timer?.clearInterval()
+
+        timer && clearInterval(timer)
         timer = setInterval(() => {
           const currentIndex = index % 4
 
@@ -169,6 +187,10 @@
 
       onBeforeMount(() => {
         getData()
+
+        rootEmitter.on('interval:auto', () => {
+          getData()
+        })
       })
 
       return {

src/views/visualization/components/DXLX.vue

@@ -1,5 +1,5 @@
 <template>
-  <Box title="稻虾流向">
+  <Box title="稻虾流向（吨）">
     <div class="h-full flex flex-col">
       <div class="flex-1" ref="chartRef"> </div>
     </div>
@@ -13,11 +13,13 @@
   import { getRiceShrimpFlow } from '/@/api/sys/other'
   import { useVisualizationStore } from '/@/store/modules/visualization'
   import { chartLineColors } from './colors'
+  import { useVContext } from '../useVContext'
   export default defineComponent({
     components: {
       Box,
     },
     setup() {
+      const { rootEmitter } = useVContext()
       const Data = reactive({
         x_axis: [],
         series: [],
@@ -49,10 +51,11 @@
 
         Data.series.forEach(({ name, data }, index) => {
           const color = chartLineColors[index % chartLineColors.length]
+
           obj.legendData.push(name)
           obj.series.push({
             name: name,
-            data: data,
+            data: data.map((e) => (e ? Number((e / 2000).toFixed(2)) : e)),
             smooth: false,
             type: 'line',
             // symbol: 'none',
@@ -128,7 +131,7 @@
       let timer: any = null
       function chartAmi() {
         let index = 0
-        timer?.clearInterval()
+        timer && clearInterval(timer)
         timer = setInterval(() => {
           const currentIndex = index % 4
 
@@ -154,6 +157,10 @@
 
       onBeforeMount(() => {
         getData()
+
+        rootEmitter.on('interval:auto', () => {
+          getData()
+        })
       })
 
       watch(

src/views/visualization/components/DZWZ.vue

@@ -1,5 +1,5 @@
 <template>
-  <Box title="大宗物资">
+  <Box title="大宗物资（元/吨）">
     <div class="h-full flex flex-col">
       <div class="py-10px">
         <ul class="flex items-center justify-center m-0">
@@ -25,11 +25,13 @@
   import { getMateriel } from '/@/api/sys/other'
   import { useVisualizationStore } from '/@/store/modules/visualization'
   import { chartBarColors } from './colors'
+  import { useVContext } from '../useVContext'
   export default defineComponent({
     components: {
       Box,
     },
     setup() {
+      const { rootEmitter } = useVContext()
       const tabList = reactive([
         {
           key: '1',
@@ -75,6 +77,7 @@
           legendData: [] as any,
           series: [] as any,
         }
+
         Data.series.forEach(({ name, data, diffs }, index) => {
           const color = chartBarColors[index % chartBarColors.length]
           obj.legendData.push(name)
@@ -125,15 +128,16 @@
             },
             formatter: function (params) {
               let str = params[0]?.name + '<br/>'
-              params.forEach((e, index) => {
+              params.forEach((e) => {
-                if (index % 2)
+                if (e.seriesName != 'Placeholder') {
-                  str +=
+                  const item: any = Data.series.find((el: any) => el.name == e.seriesName)
-                    e.seriesName +
+                  if (item) {
-                    ' : ' +
+                    const min = item.data[e.dataIndex] ?? 0
-                    (params[index - 1]?.value ?? 0) +
+                    const diff = item.diffs[e.dataIndex] ?? 0
-                    '-' +
+                    const sum = min + diff
-                    (Number(e?.value ?? 0) + Number(params[index - 1]?.value ?? 0)) +
+                    str += `${e.marker}<span style="width:50px;display: inline-block;">${e.seriesName}</span> ${min}-${sum}<br>`
-                    '<br>'
+                  }
+                }
               })
               return str
             },
@@ -153,6 +157,11 @@
           },
           yAxis: [
             {
+              position: 'left',
+              alignTicks: true,
+              nameTextStyle: {
+                color: '#fff',
+              },
               type: 'value',
               axisTick: {
                 show: false,
@@ -182,6 +191,9 @@
 
       onBeforeMount(() => {
         getData()
+        rootEmitter.on('interval:auto', () => {
+          getData()
+        })
       })
 
       return {

src/views/visualization/components/Head.vue

@@ -52,6 +52,18 @@
       </div>
       <img class="w-full h-full" :src="headTitleImg" alt="" srcset="" />
     </div>
+    <div
+      @click="goHome"
+      class="absolute right-36px text-15px font-bold bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] flex items-center cursor-pointer"
+    >
+      <img
+        class="w-16px h-14px mr-4px"
+        src="../../../assets/images/home-icon.png"
+        alt=""
+        srcset=""
+      />
+      后台管理
+    </div>
   </div>
 </template>
 
@@ -61,6 +73,7 @@
   import headTitleImg from '/@/assets/images/head-title.png'
   import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
   import dayjs, { Dayjs } from 'dayjs'
+  import { useRouter } from 'vue-router'
 
   import { useVisualizationStore } from '/@/store/modules/visualization'
 
@@ -68,6 +81,8 @@
 
   const year = computed(() => visualizationStore.getYear)
 
+  const router = useRouter()
+
   const currentYear = new Date().getFullYear()
   const value1 = ref<Dayjs>(dayjs(currentYear, 'YYYY'))
 
@@ -75,6 +90,10 @@
     value1.value = dayjs(visualizationStore.getYear + '', 'YYYY')
   })
 
+  function goHome() {
+    router.push('/')
+  }
+
   function DisabledDate(e: Dayjs) {
     return currentYear <= e.year()
   }

src/views/visualization/components/NCZQS.vue

@@ -3,7 +3,7 @@
     <div
       class="font-bold text-18px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-center mt-10px font-pmzd"
     >
-      历年产值趋势
+      历年产值趋势（万元）
     </div>
     <div class="h-220px mt-10px" ref="chartRef"> </div>
   </div>
@@ -15,6 +15,7 @@
   import { getCropYieldTotalChart } from '/@/api/sys/other'
   import echarts from '/@/utils/lib/echarts'
   import { useVisualizationStore } from '/@/store/modules/visualization'
+  import { useVContext } from '../useVContext'
 
   const chartRef = ref<HTMLDivElement | null>(null)
 
@@ -22,6 +23,8 @@
     list: [] as any,
   })
 
+  const { rootEmitter } = useVContext()
+
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
 
   const visualizationStore = useVisualizationStore()
@@ -75,7 +78,7 @@
           type: 'bar',
           barMaxWidth: 30,
           label: {
-            show: true,
+            show: false,
             position: 'top',
             color: '#fff',
           },
@@ -120,6 +123,9 @@
 
   onMounted(() => {
     getData()
+    rootEmitter.on('interval:auto', () => {
+      getData()
+    })
   })
 </script>
 

src/views/visualization/components/NYQK.vue

@@ -2,7 +2,7 @@
   <div class="w-314px">
     <div
       class="font-pmzd text-18px mt-19px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
-      >隆昌农业产业情况</div
+      >隆昌农业产业情况（万元）</div
     >
     <div class="w-full h-250px mx-auto mt-10px" ref="chartRef"> </div>
     <div
@@ -133,6 +133,9 @@
           },
           tooltip: {
             trigger: 'item',
+            // formatter: function (params) {
+            //   return params.marker + params.name + '  ' + params.value + ' 万元'
+            // },
           },
           series: [
             {
@@ -167,7 +170,7 @@
       let timer: any = null
       function chartAmi() {
         let index = 0
-        timer?.clearInterval()
+        timer && clearInterval(timer)
         timer = setInterval(() => {
           const currentIndex = index % Data.lyqkData.length
           // getInstance()?.dispatchAction({
@@ -211,7 +214,7 @@
         for (const key in list) {
           if (Object.prototype.hasOwnProperty.call(list, key)) {
             arr.push({
-              value: list[key],
+              value: (list[key] / 10000).toFixed(2),
               name: key,
             })
           }
@@ -256,12 +259,11 @@
         Data.cityData = temp
       }
 
-      const countNumber = computed(
+      const countNumber = computed(() =>
-        () =>
+        Data.lyqkData.reduce((c, p) => {
-          Data.lyqkData.reduce((c, p) => {
+          c += Number(p.value)
-            c += Number(p.value)
+          return c
-            return c
+        }, 0),
-          }, 0) / 10000,
       )
 
       onMounted(() => {
@@ -284,6 +286,10 @@
           getCitydata()
           getCropYieldCategory()
         })
+
+        rootEmitter.on('interval:auto', () => {
+          getCropYieldCategory()
+        })
       })
 
       watch(

src/views/visualization/components/QXSZ.vue

@@ -56,6 +56,9 @@
   import { CountTo } from '/@/components/CountTo'
   import Box from './Box.vue'
   import { cloneDeep } from 'lodash'
+
+  import { useVContext } from '../useVContext'
+
   const defaultList = [
     {
       label: '空气温度',
@@ -107,6 +110,7 @@
     setup(props) {
       console.log('===QXSZ')
       console.log(props.baseId)
+      const { rootEmitter } = useVContext()
       const Data = reactive({
         tabList: ref<any>([]),
         currentTab: ref<number | string>(''),
@@ -155,6 +159,10 @@
         } else {
           getTabs()
         }
+
+        rootEmitter.on('interval:auto', () => {
+          getData()
+        })
       })
 
       return {

src/views/visualization/components/SBYXZT.vue

@@ -72,6 +72,7 @@
   import d02 from '/@/assets/images/d02.png'
   import d03 from '/@/assets/images/d03.png'
   import d04 from '/@/assets/images/d04.png'
+  import { useVContext } from '../useVContext'
 
   const defaultDevice = [
     {
@@ -106,6 +107,7 @@
     },
     props: ['baseId'],
     setup(props) {
+      const { rootEmitter } = useVContext()
       console.log('===SBYZT')
       console.log(props.baseId)
 
@@ -155,6 +157,10 @@
         } else {
           getTabs()
         }
+
+        rootEmitter.on('interval:auto', () => {
+          getData()
+        })
       })
       const isBase = computed(() => !!props.baseId)
 

src/views/visualization/components/SZJCSJ.vue

@@ -58,6 +58,7 @@
   import { cloneDeep } from 'lodash'
   import { chartLineColors } from './colors'
   import { dateUtil } from '/@/utils/dateUtil'
+  import { useVContext } from '../useVContext'
   const desList = [
     {
       key: 'turbidity',
@@ -102,7 +103,7 @@
     setup(props) {
       console.log('===SZJCSJ')
       console.log(props.baseId)
-
+      const { rootEmitter } = useVContext()
       const Data = reactive({
         tabList: ref<any>([]),
         menu: cloneDeep(desList),
@@ -172,6 +173,10 @@
         } else {
           getTabs()
         }
+
+        rootEmitter.on('interval:auto', () => {
+          getData()
+        })
       })
 
       const chartsInit = () => {

src/views/visualization/components/TRJCSJ.vue

@@ -58,6 +58,7 @@
   import { cloneDeep } from 'lodash'
   import { dateUtil } from '/@/utils/dateUtil'
   import { chartLineColors } from './colors'
+  import { useVContext } from '../useVContext'
 
   const desList = [
     {
@@ -103,6 +104,7 @@
     setup(props) {
       console.log('===TRJCSJ')
       console.log(props.baseId)
+      const { rootEmitter } = useVContext()
       const Data = reactive({
         tabList: ref<any>([]),
         menu: cloneDeep(desList),
@@ -173,6 +175,10 @@
         } else {
           getTabs()
         }
+
+        rootEmitter.on('interval:auto', () => {
+          getData()
+        })
       })
 
       const chartsInit = () => {

src/views/visualization/index.html

@@ -1,394 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-    <style type="text/css">
-      body{
-        background: #000;
-      }
-    </style>
-  </head>
-  <body>
-    <canvas id="canv" width="2560" height="1297"></canvas>
-  </body>
-  <script>
-    var num = 2000
-    var w = 3120
-    var h = 760
-    var max = 100
-    var _x = 0
-    var _y = 0
-    var _z = 150
-    var dtr = function (d) {
-      return (d * Math.PI) / 180
-    }
-
-    var rnd = function () {
-      return Math.sin((Math.floor(Math.random() * 360) * Math.PI) / 180)
-    }
-    var dist = function (p1, p2, p3) {
-      return Math.sqrt(
-        Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2),
-      )
-    }
-
-    var cam = {
-      obj: {
-        x: _x,
-        y: _y,
-        z: _z,
-      },
-      dest: {
-        x: 0,
-        y: 0,
-        z: 1,
-      },
-      dist: {
-        x: 0,
-        y: 0,
-        z: 200,
-      },
-      ang: {
-        cplane: 0,
-        splane: 0,
-        ctheta: 0,
-        stheta: 0,
-      },
-      zoom: 1,
-      disp: {
-        x: w / 2,
-        y: h / 2,
-        z: 0,
-      },
-      upd: function () {
-        cam.dist.x = cam.dest.x - cam.obj.x
-        cam.dist.y = cam.dest.y - cam.obj.y
-        cam.dist.z = cam.dest.z - cam.obj.z
-        cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z)
-        cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z)
-        cam.ang.ctheta =
-          Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) /
-          Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z)
-        cam.ang.stheta =
-          -cam.dist.y /
-          Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z)
-      },
-    }
-
-    var trans = {
-      parts: {
-        sz: function (p, sz) {
-          return {
-            x: p.x * sz.x,
-            y: p.y * sz.y,
-            z: p.z * sz.z,
-          }
-        },
-        rot: {
-          x: function (p, rot) {
-            return {
-              x: p.x,
-              y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
-              z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x)),
-            }
-          },
-          y: function (p, rot) {
-            return {
-              x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
-              y: p.y,
-              z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y)),
-            }
-          },
-          z: function (p, rot) {
-            return {
-              x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
-              y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
-              z: p.z,
-            }
-          },
-        },
-        pos: function (p, pos) {
-          return {
-            x: p.x + pos.x,
-            y: p.y + pos.y,
-            z: p.z + pos.z,
-          }
-        },
-      },
-      pov: {
-        plane: function (p) {
-          return {
-            x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
-            y: p.y,
-            z: p.x * -cam.ang.splane + p.z * cam.ang.cplane,
-          }
-        },
-        theta: function (p) {
-          return {
-            x: p.x,
-            y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
-            z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta,
-          }
-        },
-        set: function (p) {
-          return {
-            x: p.x - cam.obj.x,
-            y: p.y - cam.obj.y,
-            z: p.z - cam.obj.z,
-          }
-        },
-      },
-      persp: function (p) {
-        return {
-          x: ((p.x * cam.dist.z) / p.z) * cam.zoom,
-          y: ((p.y * cam.dist.z) / p.z) * cam.zoom,
-          z: p.z * cam.zoom,
-          p: cam.dist.z / p.z,
-        }
-      },
-      disp: function (p, disp) {
-        return {
-          x: p.x + disp.x,
-          y: -p.y + disp.y,
-          z: p.z + disp.z,
-          p: p.p,
-        }
-      },
-      steps: function (_obj_, sz, rot, pos, disp) {
-        var _args = trans.parts.sz(_obj_, sz)
-        _args = trans.parts.rot.x(_args, rot)
-        _args = trans.parts.rot.y(_args, rot)
-        _args = trans.parts.rot.z(_args, rot)
-        _args = trans.parts.pos(_args, pos)
-        _args = trans.pov.plane(_args)
-        _args = trans.pov.theta(_args)
-        _args = trans.pov.set(_args)
-        _args = trans.persp(_args)
-        _args = trans.disp(_args, disp)
-        return _args
-      },
-    }
-
-    ;(function () {
-      'use strict'
-      var threeD = function (param) {
-        this.transIn = {}
-        this.transOut = {}
-        this.transIn.vtx = param.vtx
-        this.transIn.sz = param.sz
-        this.transIn.rot = param.rot
-        this.transIn.pos = param.pos
-      }
-
-      threeD.prototype.vupd = function () {
-        this.transOut = trans.steps(
-          this.transIn.vtx,
-          this.transIn.sz,
-          this.transIn.rot,
-          this.transIn.pos,
-          cam.disp,
-        )
-      }
-
-      var Build = function () {
-        this.vel = 0.04
-        this.lim = 360
-        this.diff = 200
-        this.initPos = 100
-        this.toX = _x
-        this.toY = _y
-        this.go()
-      }
-
-      Build.prototype.go = function () {
-        this.canvas = document.getElementById('canv')
-        this.canvas.width =3120
-        this.canvas.height = 760
-        this.$ = canv.getContext('2d')
-       
-        this.$.globalCompositeOperation = 'source-over'
-        this.varr = []
-        this.dist = []
-        this.calc = []
-
-        for (var i = 0, len = num; i < len; i++) {
-          this.add()
-        }
-
-        this.rotObj = {
-          x: 0,
-          y: 0,
-          z: 0,
-        }
-        this.objSz = {
-          x: w / 5,
-          y: h / 5,
-          z: w / 5,
-        }
-      }
-
-      Build.prototype.add = function () {
-        this.varr.push(
-          new threeD({
-            vtx: {
-              x: rnd(),
-              y: rnd(),
-              z: rnd(),
-            },
-            sz: {
-              x: 0,
-              y: 0,
-              z: 0,
-            },
-            rot: {
-              x: 20,
-              y: -20,
-              z: 0,
-            },
-            pos: {
-              x: this.diff * Math.sin((360 * Math.random() * Math.PI) / 180),
-              y: this.diff * Math.sin((360 * Math.random() * Math.PI) / 180),
-              z: this.diff * Math.sin((360 * Math.random() * Math.PI) / 180),
-            },
-          }),
-        )
-        this.calc.push({
-          x: 360 * Math.random(),
-          y: 360 * Math.random(),
-          z: 360 * Math.random(),
-        })
-      }
-
-      Build.prototype.upd = function () {
-        cam.obj.x += (this.toX - cam.obj.x) * 0.05
-        cam.obj.y += (this.toY - cam.obj.y) * 0.05
-      }
-
-      Build.prototype.draw = function () {
-        this.$.clearRect(0, 0, this.canvas.width, this.canvas.height)
-        cam.upd()
-        this.rotObj.x += 0.1
-        this.rotObj.y += 0.1
-        this.rotObj.z += 0.1
-
-        for (var i = 0; i < this.varr.length; i++) {
-          for (var val in this.calc[i]) {
-            if (this.calc[i].hasOwnProperty(val)) {
-              this.calc[i][val] += this.vel
-              if (this.calc[i][val] > this.lim) this.calc[i][val] = 0
-            }
-          }
-
-          this.varr[i].transIn.pos = {
-            x: this.diff * Math.cos((this.calc[i].x * Math.PI) / 180),
-            y: this.diff * Math.sin((this.calc[i].y * Math.PI) / 180),
-            z: this.diff * Math.sin((this.calc[i].z * Math.PI) / 180),
-          }
-          this.varr[i].transIn.rot = this.rotObj
-          this.varr[i].transIn.sz = this.objSz
-          this.varr[i].vupd()
-          if (this.varr[i].transOut.p < 0) continue
-          var g = this.$.createRadialGradient(
-            this.varr[i].transOut.x,
-            this.varr[i].transOut.y,
-            this.varr[i].transOut.p,
-            this.varr[i].transOut.x,
-            this.varr[i].transOut.y,
-            this.varr[i].transOut.p * 2,
-          )
-          this.$.globalCompositeOperation = 'lighter'
-          g.addColorStop(0, 'hsla(255, 255%, 255%, 1)')
-          g.addColorStop(0.5, 'hsla(' + (i + 2) + ',85%, 40%,1)')
-          g.addColorStop(1, 'hsla(' + i + ',85%, 40%,.5)')
-          this.$.fillStyle = g
-          this.$.beginPath()
-          this.$.arc(
-            this.varr[i].transOut.x,
-            this.varr[i].transOut.y,
-            this.varr[i].transOut.p * 2,
-            0,
-            Math.PI * 2,
-            false,
-          )
-          this.$.fill()
-          this.$.closePath()
-        }
-      }
-      
-      Build.prototype.anim = function () {
-        window.requestAnimationFrame = (function () {
-          return (
-            window.requestAnimationFrame ||
-            function (callback, element) {
-              window.setTimeout(callback, 1000 / 60)
-            }
-          )
-        })()
-        var anim = function () {
-          this.upd()
-          this.draw()
-          window.requestAnimationFrame(anim)
-        }.bind(this)
-        window.requestAnimationFrame(anim)
-      }
-
-      Build.prototype.run = function () {
-        this.anim()
-
-        this.toX = -69.6
-        this.toY = 23.6
-
-        // window.addEventListener(
-        //   'mousemove',
-        //   function (e) {
-        //     this.toX = (e.clientX - this.canvas.width / 2) * -0.8
-        //     this.toY = (e.clientY - this.canvas.height / 2) * 0.8
-        //     console.log(this.toX);
-        //     console.log(this.toY);
-        //   }.bind(this),
-        // )
-        // window.addEventListener(
-        //   'touchmove',
-        //   function (e) {
-        //     e.preventDefault()
-        //     this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8
-        //     this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8
-        //   }.bind(this),
-        // )
-        // window.addEventListener(
-        //   'mousedown',
-        //   function (e) {
-        //     for (var i = 0; i < 100; i++) {
-        //       this.add()
-        //     }
-        //   }.bind(this),
-        // )
-        // window.addEventListener(
-        //   'touchstart',
-        //   function (e) {
-        //     e.preventDefault()
-        //     for (var i = 0; i < 100; i++) {
-        //       this.add()
-        //     }
-        //   }.bind(this),
-        // )
-     
-      }
-      
-      
-      var app = new Build()
-      app.run()
-    })()
-    window.addEventListener(
-      'resize',
-      function () {
-        canvas.width = w = window.innerWidth
-        canvas.height = h = window.innerHeight
-      },
-      false,
-    )
-  </script>
-</html>

src/views/visualization/index.vue

@@ -56,7 +56,15 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref, onBeforeMount, reactive, toRefs, onMounted } from 'vue'
+  import {
+    defineComponent,
+    ref,
+    onBeforeMount,
+    reactive,
+    toRefs,
+    onMounted,
+    onBeforeUnmount,
+  } from 'vue'
   import Map from './components/Map.vue'
   import ScaleScreen from '/@/components/ScaleScreen'
   import DXJG from './components/DXJG.vue'
@@ -115,8 +123,11 @@
         rootEmitter: vEmitter,
       })
 
+      let timer: any = null
+
       const visibleMapModal = ref<boolean>(false)
       onMounted(() => {
+        setInterval(() => vEmitter.emit('interval:auto'), 1000 * 10)
         new Build(cavsRef).run()
         // Am(unref(cavsRef))
       })
@@ -131,6 +142,10 @@
         })
       })
 
+      onBeforeUnmount(() => {
+        timer && clearInterval(timer)
+      })
+
       return {
         cavsRef,
         ...toRefs(obj),