修改

.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
     'plugin:prettier/recommended',
   ],
   rules: {
+    'vue/no-v-html': 'off',
     'vue/script-setup-uses-vars': 'error',
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <meta name="renderer" content="webkit" />
+    <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
     <meta
       name="viewport"
       content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"

src/api/sys/other.ts

@@ -306,3 +306,17 @@ export function getCropYieldQuarterStatics(params?, mode: ErrorMessageMode = 'mo
     },
   )
 }
+/**
+ * @description:友情链接列表
+ */
+export function getFriendLinks(params?, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: '/api/friend-links',
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}

src/design/index.less

@@ -47,13 +47,13 @@ span {
   .ant-dropdown-menu {
     border: 1px solid rgba(57, 102, 132, 1);
     color: #fff;
-    background: rgba(28, 44, 52, .9);
+    background: rgba(28, 44, 52, 0.9);
     max-height: 200px;
     overflow-y: auto;
-    .ant-dropdown-menu-item{
+    .ant-dropdown-menu-item {
       color: white;
-      &:hover{
+      &:hover {
-        background:rgba(62, 97, 114, 0.6);
+        background: rgba(62, 97, 114, 0.6);
       }
     }
   }
@@ -67,3 +67,30 @@ span {
     }
   }
 }
+
+.cu-date-picker {
+  .ant-picker-dropdown,
+  .ant-picker-header,
+  .ant-picker-cell-in-view {
+    color: #fff;
+  }
+  .ant-picker-cell-in-view.ant-picker-cell-selected {
+    .ant-picker-cell-inner {
+      background: #68ced4;
+    }
+  }
+  .ant-picker-cell-inner {
+    &:hover {
+      background: #68ced43b;
+    }
+  }
+  .ant-picker-cell {
+    .ant-picker-cell {
+      color: rgb(255 252 252 / 25%);
+    }
+  }
+  .ant-picker-panel-container {
+    background-color: rgba(28, 44, 52, 0.8) !important;
+    border: 1px solid rgba(57, 102, 132, 1);
+  }
+}

src/views/visualization/LinkModal.vue

@@ -0,0 +1,50 @@
+<template>
+  <a-modal
+    v-bind="$attrs"
+    :bodyStyle="{ background: '#233741', color: '#fff' }"
+    :width="800"
+    destroyOnClose
+  >
+    <template #closeIcon>
+      <img
+        class="w-22px h-22px inline text-0"
+        src="../../assets/images/model-close-icon.png"
+        alt=""
+        srcset=""
+      />
+    </template>
+    <div>
+      <div class="relative -mt-6px h-30px flex items-center">
+        <div
+          class="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
+        >
+          {{ title1 }}
+        </div>
+      </div>
+      <div class="bg-[#1D2D35] mt-14px p-10px">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import { Modal } from 'ant-design-vue'
+
+  export default defineComponent({
+    components: {
+      [Modal.name]: Modal,
+    },
+    props: {
+      title1: {
+        type: String,
+      },
+    },
+    setup() {
+      return {}
+    },
+  })
+</script>
+
+<style scoped></style>

src/views/visualization/MapModal.vue

@@ -25,14 +25,14 @@
         <div
           class="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
         >
-          隆昌基地情况
+          {{ baseData.name }}
         </div>
       </div>
-      <div
+      <!-- <div
         class="text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] mt-6px text-15px font-bold"
-        ><span>总面积：1000亩</span> <span class="mx-20px">就业人数：5人</span>
+        ><span>总面积：??亩</span> <span class="mx-20px">就业人数：??人</span>
-        <span>总产值：￥54000000</span></div
+        <span>总产值：￥??</span></div
-      >
+      > -->
       <div class="bg-[#1D2D35] mt-14px p-10px">
         <div class="grid grid-cols-4 gap-10px">
           <NZW
@@ -44,7 +44,12 @@
             :title="item.name"
             :id="item.id"
             :chart="item.chart"
+            v-bind="$attrs"
           />
+          <SBYXZT headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
+          <QXSZ headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
+          <SZJCSJ headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
+          <TRJCSJ headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
         </div>
       </div>
     </div>
@@ -55,10 +60,14 @@
   import { Modal } from 'ant-design-vue'
   import { defineComponent, computed, onBeforeMount, reactive, toRefs, ref } from 'vue'
   import NZW from './components/NZW.vue'
+  import SBYXZT from './components/SBYXZT.vue'
+  import QXSZ from './components/QXSZ.vue'
+  import SZJCSJ from './components/SZJCSJ.vue'
+  import TRJCSJ from './components/TRJCSJ.vue'
   import { useVisualizationStore } from '/@/store/modules/visualization'
   import { getKeywordsCropsCate } from '/@/api/sys/other'
   import { chartLineColors } from './components/colors'
-  const boxWidth = 300
+  const boxWidth = 400
   // const defaultTab = ['渔业', '畜牧业', '农业', '林业']
   const defaultTab = [
     {
@@ -111,8 +120,18 @@
     components: {
       [Modal.name]: Modal,
       NZW,
+      SBYXZT,
+      QXSZ,
+      SZJCSJ,
+      TRJCSJ,
     },
-    setup() {
+    props: {
+      baseData: {
+        type: Object,
+        default: () => {},
+      },
+    },
+    setup(props) {
       const modelWidth = computed(() => boxWidth * 4 + 78)
       const visualizationStore = useVisualizationStore()
 
@@ -121,6 +140,7 @@
       })
 
       const year = computed(() => visualizationStore.getYear)
+      const baseData = computed(() => props.baseData)
 
       async function getCrops() {
         const resData = await getKeywordsCropsCate()
@@ -143,6 +163,7 @@
         boxWidth,
         modelWidth,
         year,
+        baseData,
       }
     },
   })

src/views/visualization/components/Box.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="bg-[#0A404E] bg-opacity-40 flex flex-col w-full" :style="{ width, height }">
-    <div class="flex items-center justify-between px-14px relative" :style="{ height: headHeight }">
+    <div
+      class="flex items-center justify-between px-14px relative flex-none"
+      :style="{ height: headHeight }"
+    >
       <div
         class="flex items-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
       >

src/views/visualization/components/CModal.vue

@@ -0,0 +1,244 @@
+<template>
+  <a-modal
+    v-bind="$attrs"
+    :bodyStyle="{ background: '#233741', color: '#fff' }"
+    :width="800"
+    destroyOnClose
+  >
+    <template #closeIcon>
+      <img
+        class="w-22px h-22px inline text-0"
+        src="../../../assets/images/model-close-icon.png"
+        alt=""
+        srcset=""
+      />
+    </template>
+    <div>
+      <div class="relative -mt-6px h-30px flex items-center">
+        <div
+          class="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
+        >
+          222
+        </div>
+      </div>
+      <div class="bg-[#1D2D35] mt-14px p-10px">
+        <div class="h-full flex flex-col w-full">
+          <div class="px-10px">
+            <tabs
+              size="small"
+              class="mytabs"
+              v-model:activeKey="activeKey"
+              :tab-position="mode"
+              :tabBarGutter="10"
+              :tabBarStyle="{ color: '#fff', margin: 0 }"
+              @change="tabChange"
+            >
+              <tab-pane v-for="(item, index) in tabs" :key="index" :tab="item.name" />
+            </tabs>
+          </div>
+          <div class="flex-1" ref="chartRef"> </div>
+        </div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  import { Modal } from 'ant-design-vue'
+  import { defineComponent, ref, onBeforeMount, reactive, toRefs, Ref, computed } from 'vue'
+  import { Tabs, TabPane } from 'ant-design-vue'
+  import type { TabsProps } from 'ant-design-vue'
+  import { getCates, getCropYieldQuarterStatics } from '/@/api/sys/other'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import { useVisualizationStore } from '/@/store/modules/visualization'
+
+  export default defineComponent({
+    components: {
+      [Modal.name]: Modal,
+      Tabs,
+      TabPane,
+    },
+    props: {
+      parent: {
+        type: Object,
+      },
+      chart: {
+        type: Object,
+      },
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+      const mode = ref<TabsProps['tabPosition']>('top')
+      const activeKey = ref(0)
+
+      const visualizationStore = useVisualizationStore()
+
+      const Data = reactive({
+        tabs: [] as any,
+        list: [] as any,
+      })
+
+      const currentTab: any = computed(() => Data.tabs[activeKey.value])
+
+      const tabChange = () => {
+        getData()
+      }
+
+      async function getData() {
+        // const resData = await getCropYieldQuarterStatics({
+        //   year: visualizationStore.getYear,
+        //   base_id: props.baseId,
+        //   category_id: props.id,
+        //   crop_id: currentTab.value?.id ?? null,
+        // })
+        // const list: any[] = []
+        // for (const key in resData) {
+        //   if (Object.prototype.hasOwnProperty.call(resData, key)) {
+        //     const obj = resData[key]
+        //     list.push({
+        //       name: obj.name,
+        //       list: Object.keys(obj.list).map((e) => obj.list[e]),
+        //       axis: Object.keys(obj.list).map((e) => e),
+        //     })
+        //   }
+        // }
+        // Data.list = list
+        // chartsInit()
+      }
+
+      function chartsInit() {
+        const obj = {
+          legendData: [] as any,
+          series: [] as any,
+        }
+
+        return
+
+        Data.list.forEach(({ name, list }, index) => {
+          const { colors, serie }: any = props.chart
+          const color = colors[index % colors.length]
+
+          obj.legendData.push(name)
+
+          obj.series.push({
+            name: name,
+            data: list,
+            ...serie,
+            itemStyle: {
+              color: color.itemColor,
+            },
+          })
+        })
+
+        setOptions({
+          grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
+          legend: {
+            show: false,
+            data: obj.legendData,
+            top: '0%',
+            right: '0',
+            textStyle: {
+              color: '#ffffff',
+            },
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: Data.list[0]?.axis,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: '#fff',
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'solid',
+                  color: '#8EEEFF',
+                  opacity: 0.3,
+                },
+              },
+              axisLabel: {
+                color: '#fff',
+              },
+            },
+          ],
+          series: obj.series,
+        })
+      }
+
+      async function getTabs() {
+        const resData = await getCates({
+          category_id: props.id,
+          crop_type: 1,
+          type: 'top',
+        })
+        Data.tabs = [
+          {
+            name: '全部',
+            id: null,
+          },
+        ].concat(resData)
+      }
+
+      onBeforeMount(() => {
+        getTabs()
+        getData()
+      })
+      return {
+        ...toRefs(Data),
+        chartRef,
+        mode,
+        tabChange,
+        activeKey,
+      }
+    },
+  })
+</script>
+
+<style lang="less" scoped>
+  ::v-deep(.mytabs) {
+    .ant-tabs-ink-bar {
+      display: none;
+    }
+
+    .ant-tabs-tab {
+      &:hover {
+        color: #76e9f0;
+      }
+    }
+
+    .ant-tabs-tab-active {
+      .ant-tabs-tab-btn {
+        color: #76e9f0;
+      }
+    }
+
+    .ant-tabs-nav {
+      &::before {
+        display: none;
+      }
+    }
+  }
+</style>

src/views/visualization/components/DZWZ.vue

@@ -97,7 +97,7 @@
               color: color.itemColor1,
             },
             label: {
-              show: true,
+              show: false,
               position: 'inside',
               color: '#fff',
             },

src/views/visualization/components/Footer.vue

@@ -1,12 +1,15 @@
 <template>
-  <div class="bg w-392px h-30px absolute bottom-0 left-1/2 z-999 footer flex items-end">
+  <div class="bg min-w-392px h-30px absolute bottom-0 left-1/2 z-999 footer flex items-end">
-    <div class="grid h-27px w-full grid-cols-5 text-white text-12px font-bold px-18px">
+    <div class="h-27px w-full flex text-white text-12px font-bold px-18px">
-      <div
+      <div class="flex-1 flex">
-        class="h-full flex items-center cursor-pointer justify-center"
+        <div
-        v-for="item in 4"
+          class="h-full flex items-center cursor-pointer justify-center px-10px flex-none"
-        :key="item"
+          v-for="item in rFriendlinks"
-      >
+          :key="item.id"
-        xxx系统
+          @click="onClick(item)"
+        >
+          {{ item.name }}
+        </div>
       </div>
       <div class="h-full flex items-center cursor-pointer justify-center">
         <Popover
@@ -18,28 +21,112 @@
           :align="{ offset: [38, 0] }"
         >
           <template #content>
-            <div class="text-white"> 1 </div>
+            <div class="text-white">
+              <div v-for="(item, key, index) in friendlinks" :key="index" class="mb-10px">
+                <div
+                  class="bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
+                  >{{ key }}</div
+                >
+                <div class="flex -mr-10px flex-wrap">
+                  <div
+                    @click="onClick(a)"
+                    class="text-12px mr-10px py-4px cursor-pointer"
+                    v-for="a in item"
+                    :key="a.id"
+                  >
+                    {{ a.name }}
+                  </div>
+                </div>
+              </div>
+            </div>
           </template>
           <SvgIcon name="more-icon" />
         </Popover>
       </div>
     </div>
+    <LinkModal v-model:visible="visibleModal" :footer="null" :title1="current.name">
+      <template #content>
+        <div v-if="current.type == 3" v-html="current.content"> </div>
+        <div v-if="current.type == 2">
+          <video muted autoplay controls :src="current.content" class="w-full h-full"></video>
+        </div>
+      </template>
+    </LinkModal>
   </div>
 </template>
 
 <script setup>
   import { SvgIcon } from '/@/components/Icon'
   import { Popover } from 'ant-design-vue'
+  import { getFriendLinks } from '/@/api/sys/other'
+  import { onBeforeMount, ref } from 'vue'
+  import LinkModal from '../LinkModal.vue'
 
   const getPopupContainer = (trigger) => {
     return trigger.parentElement
   }
+
+  const _type = [
+    {
+      type: 1,
+      value: '链接',
+    },
+    {
+      type: 2,
+      value: '视频',
+    },
+    {
+      type: 3,
+      value: '文章',
+    },
+  ]
+
+  const friendlinks = ref([])
+  const rFriendlinks = ref([])
+
+  const visibleModal = ref(false)
+
+  const current = ref({})
+
+  async function getDataF() {
+    const resData = await getFriendLinks({
+      recommend: 1,
+      show: 1,
+    })
+    rFriendlinks.value = resData
+  }
+  async function getData() {
+    const resData = await getFriendLinks()
+    friendlinks.value = resData.reduce((acc, item) => {
+      const find = _type.find((e) => e.type == item.type)
+      return {
+        ...acc,
+        [find?.value ?? '其他']: [...(acc[item.type] ?? []), item],
+      }
+    }, {})
+    console.log(friendlinks.value)
+  }
+
+  function onClick(e) {
+    current.value = e
+    if (e.type == 1) {
+      window.open(e.content)
+    } else {
+      visibleModal.value = true
+    }
+    console.log(e)
+  }
+
+  onBeforeMount(() => {
+    getDataF()
+    getData()
+  })
 </script>
 
 <style lang="less" scoped>
   .bg {
     background: url('../../../assets/images/footer.png') no-repeat;
-    background-size: 100%;
+    background-size: 100% 100%;
   }
 
   .footer {

src/views/visualization/components/Head.vue

@@ -3,19 +3,37 @@
     <div
       class="absolute left-36px text-15px font-bold bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] flex items-center"
     >
-      {{ year }}年
+      <DatePicker
-      <div class="flex flex-col justify-center -mt-2px ml-4px">
+        v-model:value="value1"
-        <caret-up-outlined
+        picker="year"
-          :style="{ fontSize: '10px', color: '#76E9F0' }"
+        format="YYYY"
-          class="h-6px cursor-pointer"
+        valueFormat="YYYY"
-          @click="onYearPlus"
+        class="cu-date-input w-70px !p-0"
-        />
+        dropdownClassName="cu-date-picker"
-        <caret-down-outlined
+        :bordered="false"
-          :style="{ fontSize: '10px', color: '#76E9F0' }"
+        @change="onChange"
-          class="h-6px cursor-pointer"
+        :allowClear="false"
-          @click="onYearMinus"
+      >
-        />
+        <template #suffixIcon>
-      </div>
+          <div
+            class="flex text-15px font-bold bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
+          >
+            <span>年</span>
+            <div class="flex flex-col justify-center -mt-2px ml-4px cursor-pointer">
+              <caret-up-outlined
+                :style="{ fontSize: '10px', color: '#76E9F0' }"
+                class="h-6px cursor-pointer"
+                @click="onYearPlus"
+              />
+              <caret-down-outlined
+                :style="{ fontSize: '10px', color: '#76E9F0' }"
+                class="h-6px cursor-pointer"
+                @click="onYearMinus"
+              />
+            </div>
+          </div>
+        </template>
+      </DatePicker>
     </div>
     <div class="w-1099px h-43px relative">
       <div class="absolute left-0 bottom-0 w-340px text-10px h-28px flex items-center justify-end">
@@ -37,9 +55,11 @@
 </template>
 
 <script setup lang="ts">
-  import { reactive, computed } from 'vue'
+  import { DatePicker } from 'ant-design-vue'
+  import { reactive, computed, ref, onBeforeMount } from 'vue'
   import headTitleImg from '/@/assets/images/head-title.png'
   import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
+  import dayjs, { Dayjs } from 'dayjs'
 
   import { useVisualizationStore } from '/@/store/modules/visualization'
 
@@ -47,6 +67,16 @@
 
   const year = computed(() => visualizationStore.getYear)
 
+  const value1 = ref<Dayjs>(dayjs('2015', 'YYYY'))
+
+  onBeforeMount(() => {
+    value1.value = dayjs(visualizationStore.getYear + '', 'YYYY')
+  })
+
+  function onChange(e) {
+    visualizationStore.setYear(e)
+  }
+
   const onYearPlus = () => {
     visualizationStore.plus()
   }
@@ -89,4 +119,16 @@
   }, 1000 * 60 * 60 * 24)
 </script>
 
-<style scoped></style>
+<style scoped lang="less">
+  ::v-deep(.cu-date-input) {
+    .ant-picker-input {
+      & > input {
+        @apply font-bold bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] flex items-center;
+      }
+    }
+
+    .ant-picker-suffix {
+      // display: none;
+    }
+  }
+</style>

src/views/visualization/components/Map.vue

@@ -6,7 +6,23 @@
       class="absolute left-25px top-25px z-999 text-white border rounded-2px px-30px py-6px text-12px cursor-pointer"
       >返回</div
     >
-    <div ref="chartRef" class="w-full h-full"> </div>
+    <div class="absolute left-0 w-full top-0 h-full flex items-center justify-center">
+      <img
+        class="opacity-30 w-600px h-600px map1"
+        src="../../../assets/images/lbx.png"
+        alt=""
+        srcset=""
+      />
+    </div>
+    <div class="absolute left-0 w-full top-0 h-full flex items-center justify-center">
+      <img
+        class="opacity-30 w-600px h-600px map"
+        src="../../../assets/images/jt.png"
+        alt=""
+        srcset=""
+      />
+    </div>
+    <div ref="chartRef" class="w-full h-full z-99 absolute"> </div>
   </div>
 </template>
 <script lang="ts">
@@ -17,6 +33,7 @@
   import { useVContext } from '../useVContext'
   import { getAgriculturalBasic } from '/@/api/sys/other'
   import { useVisualizationStore } from '/@/store/modules/visualization'
+
   const domImg = document.createElement('img')
   domImg.style.height = '8px'
   domImg.src =
@@ -49,15 +66,22 @@
       }
 
       function mapInit() {
-        const mapData = [] as any
+        const mapData: any = []
         console.log(baseData.value)
 
-        baseData.value.map(({ name, address_lng, address_lat, areas, id }) => {
+        // baseData.value.map(({ name, address_lng, address_lat, areas, id }) => {
+        baseData.value.map((e: any) => {
+          // mapData.push({
+          //   name: name,
+          //   value: [address_lng, address_lat],
+          //   datas: areas,
+          //   id: id,
+          //   img: 'image://https://www.makeapie.cn/asset/get/s/data-1619059442567-s5l7-f8Eu9.png',
+          // })
           mapData.push({
-            name: name,
+            ...e,
-            value: [address_lng, address_lat],
+            value: [e.address_lng, e.address_lat],
-            datas: areas,
+            datas: e.areas,
-            id: id,
             img: 'image://https://www.makeapie.cn/asset/get/s/data-1619059442567-s5l7-f8Eu9.png',
           })
         })
@@ -114,13 +138,13 @@
                 color: '#fff',
               },
               itemStyle: {
-                // areaColor: {
+                areaColor: {
-                //   image: domImg,
+                  image: domImg,
-                //   repeat: 'repeat',
+                  repeat: 'repeat',
-                // },
+                },
                 borderColor: 'rgba(147, 235, 248, 1)',
                 borderWidth: 1,
-                areaColor: 'rgba(0, 0, 0, 0.2)',
+                // areaColor: 'rgba(0, 0, 0, 0.2)',
 
                 // shadowColor: 'rgba(128, 217, 248, 1)',
                 // shadowOffsetX: -2,
@@ -129,7 +153,7 @@
               },
               emphasis: {
                 label: {
-                  show: false,
+                  show: true,
                   color: '#fff',
                 },
                 itemStyle: {
@@ -231,8 +255,8 @@
                 align: 'center',
                 formatter: function (params) {
                   var name = params.name
-                  var value = mapData[params.dataIndex].datas
+                  // var value = mapData[params.dataIndex].datas
-                  var text = `{fline|${value}}\n{tline|${name}}`
+                  var text = `{tline|${name}}`
                   return text
                 },
                 color: '#fff',
@@ -326,3 +350,32 @@
     },
   })
 </script>
+<style>
+  .map1 {
+    z-index: 2;
+    animation: myfirst2 15s infinite linear;
+  }
+  @keyframes myfirst2 {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(359deg);
+    }
+  }
+
+  .map {
+    z-index: 2;
+    animation: myfirst 15s infinite linear;
+  }
+  @keyframes myfirst {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(-359deg);
+    }
+  }
+</style>

src/views/visualization/components/NYQK.vue

@@ -143,6 +143,7 @@
           year: visualizationStore.getYear,
           base_id: visualizationStore.getAddresId,
         })
+
         const arr = [] as { value: string | number; name: string }[]
         for (const key in list) {
           if (Object.prototype.hasOwnProperty.call(list, key)) {
@@ -194,7 +195,7 @@
 
       const countNumber = computed(() =>
         Data.lyqkData.reduce((c, p) => {
-          c += p.value
+          c += Number(p.value)
           return c
         }, 0),
       )

src/views/visualization/components/NZW.vue

@@ -16,6 +16,7 @@
       </div>
       <div class="flex-1" ref="chartRef"> </div>
     </div>
+    <CModal v-model:visible="visibleCModal" :footer="null" :parent="parent" />
   </Box>
 </template>
 
@@ -27,25 +28,28 @@
   import { getCates, getCropYieldQuarterStatics } from '/@/api/sys/other'
   import { useECharts } from '/@/hooks/web/useECharts'
   import { useVisualizationStore } from '/@/store/modules/visualization'
+  import CModal from './CModal.vue'
 
   export default defineComponent({
     components: {
       Box,
       Tabs,
       TabPane,
+      CModal,
     },
     props: {
       id: {
         type: Number,
       },
       baseId: {
-        type: Number,
+        type: [Number, String],
       },
       chart: {
         type: Object,
       },
     },
     setup(props) {
+      const visibleCModal = ref(false)
       const chartRef = ref<HTMLDivElement | null>(null)
 
       const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -60,9 +64,13 @@
         list: [] as any,
       })
 
+      const parent = ref({})
+
       const currentTab: any = computed(() => Data.tabs[activeKey.value])
 
-      const tabChange = () => {
+      const tabChange = (e) => {
+        // visibleCModal.value = true
+        parent.value = e
         getData()
       }
 
@@ -176,6 +184,10 @@
             name: '全部',
             id: null,
           },
+          {
+            name: '全部1',
+            id: 1,
+          },
         ].concat(resData)
       }
 
@@ -184,11 +196,13 @@
         getData()
       })
       return {
+        visibleCModal,
         ...toRefs(Data),
         chartRef,
         mode,
         tabChange,
         activeKey,
+        parent,
       }
     },
   })

src/views/visualization/components/QXSZ.vue

@@ -53,7 +53,6 @@
   import { DownOutlined } from '@ant-design/icons-vue'
   import { Dropdown, Menu } from 'ant-design-vue'
   import { getAgriculturalDeviceBasic, getDevices, getDeviceDataStatics } from '/@/api/sys/other'
-  import { useVisualizationStore } from '/@/store/modules/visualization'
   import { CountTo } from '/@/components/CountTo'
   import Box from './Box.vue'
   import { cloneDeep } from 'lodash'
@@ -104,8 +103,10 @@
       MenuItem: Menu.Item,
       CountTo,
     },
-    setup() {
+    props: ['baseId'],
-      const visualizationStore = useVisualizationStore()
+    setup(props) {
+      console.log('===QXSZ')
+      console.log(props.baseId)
       const Data = reactive({
         tabList: ref<any>([]),
         currentTab: ref<number | string>(''),
@@ -125,7 +126,11 @@
       }
 
       async function getData() {
-        const devices = await getDevices({ base: Data.currentTab, type: 4, status: 1 })
+        const devices = await getDevices({
+          base: props.baseId ?? Data.currentTab,
+          type: 4,
+          status: 1,
+        })
         if (devices.length) {
           const { list } = await getDeviceDataStatics({ device_id: devices[0].id })
           Data.list.forEach((e) => (e.value = Number(list[e.key])))
@@ -142,8 +147,14 @@
         if (resData.length) onMenuClick({ key: resData[0].id })
       }
 
+      const isBase = computed(() => !!props.baseId)
+
       onBeforeMount(() => {
-        getTabs()
+        if (isBase.value) {
+          getData()
+        } else {
+          getTabs()
+        }
       })
 
       return {

src/views/visualization/components/SBYXZT.vue

@@ -1,5 +1,5 @@
 <template>
-  <Box title="设备运行状态">
+  <Box title="设备运行状态" v-bind="$attrs">
     <div class="h-full flex flex-col">
       <div class="py-10px relative">
         <div
@@ -104,7 +104,15 @@
       MenuItem: Menu.Item,
       DownOutlined,
     },
-    setup() {
+    props: {
+      baseId: {
+        type: Number,
+      },
+    },
+    setup(props) {
+      console.log('===SBYZT')
+      console.log(props.baseId)
+
       const Data = reactive({
         tabList: ref<any>([]),
         currentTab: ref<number | string>(''),
@@ -138,7 +146,7 @@
 
       async function getData() {
         const resData = await getDevicesNum({
-          base_id: Data.currentTab,
+          base_id: props.baseId ?? Data.currentTab,
         })
         Object.keys(resData).map((e, index) => {
           Data.list[index].value = resData[e].slice(1)
@@ -146,8 +154,13 @@
       }
 
       onBeforeMount(() => {
-        getTabs()
+        if (isBase.value) {
+          getData()
+        } else {
+          getTabs()
+        }
       })
+      const isBase = computed(() => !!props.baseId)
 
       watch(
         () => visualizationStore.getAddresId,
@@ -160,6 +173,7 @@
         ...toRefs(Data),
         currentTabValue,
         chartRef,
+        isBase,
         onMenuClick,
       }
     },

src/views/visualization/components/SZJCSJ.vue

@@ -99,7 +99,11 @@
       Menu,
       MenuItem: Menu.Item,
     },
-    setup() {
+    props: ['baseId'],
+    setup(props) {
+      console.log('===SZJCSJ')
+      console.log(props.baseId)
+
       const Data = reactive({
         tabList: ref<any>([]),
         menu: cloneDeep(desList),
@@ -132,7 +136,7 @@
 
       async function getData() {
         const resData = await getDeviceBaseDataStatics({
-          base_id: Data.currentTab,
+          base_id: props.baseId ?? Data.currentTab,
           device_type: 3,
           device_column: Data.currentMenu,
         })
@@ -161,8 +165,14 @@
         getData()
       }
 
+      const isBase = computed(() => !!props.baseId)
+
       onBeforeMount(() => {
-        getTabs()
+        if (isBase.value) {
+          getData()
+        } else {
+          getTabs()
+        }
       })
 
       const chartsInit = () => {

src/views/visualization/components/Star.js

@@ -0,0 +1,152 @@
+// import { unref } from 'vue'
+
+// function random(min, max) {
+//   if (arguments.length < 2) {
+//     max = min
+//     min = 0
+//   }
+
+//   if (min > max) {
+//     var hold = max
+//     max = min
+//     min = hold
+//   }
+
+//   return Math.floor(Math.random() * (max - min + 1)) + min
+// }
+
+// function maxOrbit(x, y) {
+//   var max = Math.max(x, y),
+//     diameter = Math.round(Math.sqrt(max * max + max * max))
+//   return diameter / 2
+// }
+
+// class Star {
+//   constructor() {
+//     this.orbitRadius = random(maxOrbit(w, h))
+//     this.radius = random(60, this.orbitRadius) / 12
+//     this.orbitX = w / 2
+//     this.orbitY = h / 2
+//     this.timePassed = random(0, maxStars)
+//     this.speed = random(this.orbitRadius) / 50000
+//     this.alpha = random(2, 10) / 10
+
+//     count++
+//     stars[count] = this
+//   }
+
+//   draw = function () {
+//     var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
+//       y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
+//       twinkle = random(10)
+
+//     if (twinkle === 1 && this.alpha > 0) {
+//       this.alpha -= 0.05
+//     } else if (twinkle === 2 && this.alpha < 1) {
+//       this.alpha += 0.05
+//     }
+
+//     ctx.globalAlpha = this.alpha
+//     ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius)
+//     this.timePassed += this.speed
+//   }
+
+// }
+
+export default function am(dom) {
+  var canvas = dom,
+    ctx = canvas.getContext('2d'),
+    w = (canvas.width = 3120),
+    h = (canvas.height = 760),
+    hue = 217,
+    stars = [],
+    count = 0,
+    maxStars = 1400
+  // Cache gradient
+  var canvas2 = document.createElement('canvas'),
+    ctx2 = canvas2.getContext('2d')
+  canvas2.width = 100
+  canvas2.height = 100
+  var half = canvas2.width / 2,
+    gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half)
+  gradient2.addColorStop(0.025, '#fff')
+  gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)')
+  gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)')
+  gradient2.addColorStop(1, 'transparent')
+
+  ctx2.fillStyle = gradient2
+  ctx2.beginPath()
+  ctx2.arc(half, half, half, 0, Math.PI * 2)
+  ctx2.fill()
+
+  function random(min, max) {
+    if (arguments.length < 2) {
+      max = min
+      min = 0
+    }
+
+    if (min > max) {
+      var hold = max
+      max = min
+      min = hold
+    }
+
+    return Math.floor(Math.random() * (max - min + 1)) + min
+  }
+
+  function maxOrbit(x, y) {
+    var max = Math.max(x, y),
+      diameter = Math.round(Math.sqrt(max * max + max * max))
+    return diameter / 2
+  }
+
+  var Star = function () {
+    this.orbitRadius = random(maxOrbit(w, h))
+    this.radius = random(60, this.orbitRadius) / 12
+    this.orbitX = w / 2
+    this.orbitY = h / 2
+    this.timePassed = random(0, maxStars)
+    this.speed = random(this.orbitRadius) / 500000
+    this.alpha = random(2, 10) / 10
+
+    count++
+    stars[count] = this
+  }
+
+  Star.prototype.draw = function () {
+    var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
+      y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
+      twinkle = random(10)
+
+    if (twinkle === 1 && this.alpha > 0) {
+      this.alpha -= 0.05
+    } else if (twinkle === 2 && this.alpha < 1) {
+      this.alpha += 0.05
+    }
+
+    ctx.globalAlpha = this.alpha
+    ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius)
+    this.timePassed += this.speed
+    // console.log(this.timePassed)
+  }
+
+  for (var i = 0; i < maxStars; i++) {
+    new Star()
+  }
+
+  function animation() {
+    ctx.globalCompositeOperation = 'source-over'
+    ctx.globalAlpha = 0.8
+    ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)'
+    ctx.fillRect(0, 0, w, h)
+
+    ctx.globalCompositeOperation = 'lighter'
+    for (var i = 1, l = stars.length; i < l; i++) {
+      stars[i].draw()
+    }
+
+    window.requestAnimationFrame(animation)
+  }
+
+  animation()
+}

src/views/visualization/components/TRJCSJ.vue

@@ -99,7 +99,10 @@
       Menu,
       MenuItem: Menu.Item,
     },
-    setup() {
+    props: ['baseId'],
+    setup(props) {
+      console.log('===TRJCSJ')
+      console.log(props.baseId)
       const Data = reactive({
         tabList: ref<any>([]),
         menu: cloneDeep(desList),
@@ -162,8 +165,14 @@
         getData()
       }
 
+      const isBase = computed(() => !!props.baseId)
+
       onBeforeMount(() => {
-        getTabs()
+        if (isBase.value) {
+          getData()
+        } else {
+          getTabs()
+        }
       })
 
       const chartsInit = () => {

src/views/visualization/components/cavas.js

@@ -0,0 +1,361 @@
+import { unref } from 'vue'
+
+var num = 300
+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
+  },
+}
+
+class threeD {
+  constructor(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
+  }
+  vupd = function () {
+    this.transOut = trans.steps(
+      this.transIn.vtx,
+      this.transIn.sz,
+      this.transIn.rot,
+      this.transIn.pos,
+      cam.disp,
+    )
+  }
+}
+
+export default class Build {
+  constructor(e) {
+    this.canvas = unref(e)
+    this.vel = 0.04
+    this.lim = 360
+    this.diff = 200
+    this.initPos = 100
+    this.toX = _x
+    this.toY = _y
+    this.go()
+  }
+  go() {
+    this.canvas.width = w
+    this.canvas.height = h
+    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,
+    }
+  }
+
+  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(),
+    })
+  }
+
+  upd = function () {
+    cam.obj.x += (this.toX - cam.obj.x) * 0.05
+    cam.obj.y += (this.toY - cam.obj.y) * 0.05
+  }
+
+  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()
+    }
+  }
+
+  anim = function () {
+    window.requestAnimationFrame = (function () {
+      return (
+        window.requestAnimationFrame ||
+        function (callback, _) {
+          window.setTimeout(callback, 1000 / 60)
+        }
+      )
+    })()
+    var anim = function () {
+      this.upd()
+      this.draw()
+      window.requestAnimationFrame(anim)
+    }.bind(this)
+    window.requestAnimationFrame(anim)
+  }
+
+  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),
+    // )
+  }
+}

src/views/visualization/components/colors.ts

@@ -15,4 +15,19 @@ export const chartBarColors = [
     itemColor1: '#76E9F0',
     itemColor2: '#1A3537',
   },
+  {
+    itemColor: '#28F2E6',
+    itemColor1: '#28F2E6',
+    itemColor2: '#28F2E6',
+  },
+  {
+    itemColor: '#73ddff',
+    itemColor1: '#73ddff',
+    itemColor2: '#73ddff',
+  },
+  {
+    itemColor: '#73acff',
+    itemColor1: '#73acff',
+    itemColor2: '#73acff',
+  },
 ]

src/views/visualization/index.html

@@ -0,0 +1,394 @@
+<!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

@@ -2,49 +2,57 @@
   <!-- <ScaleScreen :boxStyle="{ background: '#020603' }" :width="3120" :height="760" :autoScale="false"> -->
   <div class="overflow-y-scroll">
     <div class="flex flex-col h-full w-3120px h-760px bg-img relative">
-      <Head />
+      <canvas class="absolute left-0 top-0 w-full h-full" ref="cavsRef" id="canv"></canvas>
-      <div class="flex-1 flex justify-between px-20px">
+      <div class="flex flex-col h-full w-full z-100">
-        <div class="flex">
+        <Head />
-          <div class="grid grid-cols-2 gap-x-10px gap-y-10px">
+        <div class="flex-1 flex justify-between px-20px">
-            <DXJG width="440px" height="353px" />
+          <div class="flex">
-            <DXCY width="440px" height="353px" />
+            <div class="grid grid-cols-2 gap-x-10px gap-y-10px">
-            <DXLX width="440px" height="353px" />
+              <DXJG width="440px" height="353px" />
-            <DZWZ width="440px" height="353px" />
+              <DXCY width="440px" height="353px" />
-          </div>
+              <DXLX width="440px" height="353px" />
-        </div>
+              <DZWZ width="440px" height="353px" />
-        <div class="flex-1 flex ml-15px justify-between bg-[#162126] bg-opacity-60">
+            </div>
-          <div class="bg-[#10272f] bg-opacity-00">
+          </div>
-            <NYQK />
+          <div class="flex-1 flex ml-15px justify-between bg-[#162126] bg-opacity-60">
-            <NCZQS class="mt-20px" />
+            <div class="bg-[#10272f] bg-opacity-00">
-          </div>
+              <NYQK />
-          <div class="flex-1">
+              <NCZQS class="mt-20px" />
-            <Map />
+            </div>
-          </div>
+            <div class="flex-1">
-          <div class="bg-[#10272f] bg-opacity-00">
+              <Map />
-            <CZNYCY />
+            </div>
-          </div>
+            <div class="bg-[#10272f] bg-opacity-00">
-        </div>
+              <CZNYCY />
-        <div class="flex">
+            </div>
-          <div class="mx-16px">
+          </div>
-            <JK width="440px" height="387px" />
+          <div class="flex">
-            <SBYXZT class="mt-16px" width="440px" height="310px" />
+            <div class="mx-16px">
-          </div>
+              <JK width="440px" height="387px" />
-          <div class="">
+              <SBYXZT class="mt-16px" width="440px" height="310px" />
-            <QXSZ width="440px" height="230px" />
+            </div>
-            <SZJCSJ class="mt-11px" width="440px" height="230px" />
+            <div class="">
-            <TRJCSJ class="mt-11px" width="440px" height="230px" />
+              <QXSZ width="440px" height="230px" />
+              <SZJCSJ class="mt-11px" width="440px" height="230px" />
+              <TRJCSJ class="mt-11px" width="440px" height="230px" />
+            </div>
           </div>
         </div>
+        <Footer />
       </div>
-      <Footer />
     </div>
-    <MapModal v-model:visible="visibleMapModal" :footer="null" :baseId="baseId" />
+    <MapModal
+      v-model:visible="visibleMapModal"
+      :footer="null"
+      :baseId="baseId"
+      :baseData="baseData"
+    />
   </div>
   <!-- </ScaleScreen> -->
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref, onBeforeMount, reactive } from 'vue'
+  import { defineComponent, ref, onBeforeMount, reactive, toRefs, onMounted, unref } from 'vue'
   import Map from './components/Map.vue'
   import ScaleScreen from '/@/components/ScaleScreen'
   import DXJG from './components/DXJG.vue'
@@ -65,7 +73,9 @@
   import MapModal from './MapModal.vue'
   import { createVContext } from './useVContext'
   import mitt from '/@/utils/mitt'
-  import { useVisualizationStore } from '/@/store/modules/visualization'
+  import Build from './components/cavas'
+  // import Am from './components/Star'
+
   export default defineComponent({
     components: {
       [Modal.name]: Modal,
@@ -88,29 +98,39 @@
       MapModal,
     },
     setup() {
-      const baseId = ref('')
+      const cavsRef = ref<HTMLDivElement | null>(null)
 
       const vEmitter = mitt()
 
+      const obj = reactive({
+        baseId: ref(''),
+        baseData: reactive({}),
+      })
+
       createVContext({
         rootEmitter: vEmitter,
       })
 
-      const visibleMapModal = ref<boolean>(true)
+      const visibleMapModal = ref<boolean>(false)
-
+      onMounted(() => {
+        new Build(cavsRef).run()
+        // Am(unref(cavsRef))
+      })
       onBeforeMount(() => {
         vEmitter.on('map:click', () => {
           // visibleMapModal.value = true
         })
         vEmitter.on('base:click', (e) => {
-          baseId.value = e.id
+          obj.baseId = e.id
+          obj.baseData = e
           visibleMapModal.value = true
         })
       })
 
       return {
+        cavsRef,
+        ...toRefs(obj),
         visibleMapModal,
-        baseId,
       }
     },
   })