修改大屏
parent
a7a046a71b
commit
f7dd0fd331
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -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 resDate = {
|
||||
items: result,
|
||||
total: meta?.total ?? null,
|
||||
}
|
||||
const { code, data: result, message } = data
|
||||
|
||||
// 这里逻辑可以根据项目进行修改
|
||||
const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS
|
||||
if (hasSuccess) {
|
||||
return resDate
|
||||
return result
|
||||
}
|
||||
|
||||
// 在此处根据自己项目的实际情况对不同的code执行不同的操作
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<div class="main" :style="`transform: rotateY(-${(count * 360) / 3}deg) translateZ(-200px)`">
|
||||
<!-- <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,
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
min: 0,
|
||||
// max,
|
||||
// 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 {
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
if (index % 2)
|
||||
str +=
|
||||
e.seriesName +
|
||||
' : ' +
|
||||
(params[index - 1]?.value ?? 0) +
|
||||
'-' +
|
||||
(Number(e?.value ?? 0) + Number(params[index - 1]?.value ?? 0)) +
|
||||
'<br>'
|
||||
params.forEach((e) => {
|
||||
if (e.seriesName != 'Placeholder') {
|
||||
const item: any = Data.series.find((el: any) => el.name == e.seriesName)
|
||||
if (item) {
|
||||
const min = item.data[e.dataIndex] ?? 0
|
||||
const diff = item.diffs[e.dataIndex] ?? 0
|
||||
const sum = min + diff
|
||||
str += `${e.marker}<span style="width:50px;display: inline-block;">${e.seriesName}</span> ${min}-${sum}<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 {
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
c += Number(p.value)
|
||||
return c
|
||||
}, 0) / 10000,
|
||||
}, 0),
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -284,6 +286,10 @@
|
|||
getCitydata()
|
||||
getCropYieldCategory()
|
||||
})
|
||||
|
||||
rootEmitter.on('interval:auto', () => {
|
||||
getCropYieldCategory()
|
||||
})
|
||||
})
|
||||
|
||||
watch(
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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),
|
||||
|
|
|
|||
Loading…
Reference in New Issue