new-map
parent
282a5f38e8
commit
ed897d063c
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
|
|
@ -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{
|
||||
background:rgba(62, 97, 114, 0.6);
|
||||
&:hover {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>总产值：￥54000000</span></div
|
||||
>
|
||||
><span>总面积：??亩</span> <span class="mx-20px">就业人数：??人</span>
|
||||
<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,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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]"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
color: color.itemColor1,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
show: false,
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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="grid h-27px w-full grid-cols-5 text-white text-12px font-bold px-18px">
|
||||
<div
|
||||
class="h-full flex items-center cursor-pointer justify-center"
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
>
|
||||
xxx系统
|
||||
<div class="bg min-w-392px h-30px absolute bottom-0 left-1/2 z-999 footer flex items-end">
|
||||
<div class="h-27px w-full flex text-white text-12px font-bold px-18px">
|
||||
<div class="flex-1 flex">
|
||||
<div
|
||||
class="h-full flex items-center cursor-pointer justify-center px-10px flex-none"
|
||||
v-for="item in rFriendlinks"
|
||||
:key="item.id"
|
||||
@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 {
|
||||
|
|
|
|||
|
|
@ -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 }}年
|
||||
<div class="flex flex-col justify-center -mt-2px ml-4px">
|
||||
<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>
|
||||
<DatePicker
|
||||
v-model:value="value1"
|
||||
picker="year"
|
||||
format="YYYY"
|
||||
valueFormat="YYYY"
|
||||
class="cu-date-input w-70px !p-0"
|
||||
dropdownClassName="cu-date-picker"
|
||||
:bordered="false"
|
||||
@change="onChange"
|
||||
:allowClear="false"
|
||||
>
|
||||
<template #suffixIcon>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
value: [address_lng, address_lat],
|
||||
datas: areas,
|
||||
id: id,
|
||||
...e,
|
||||
value: [e.address_lng, e.address_lat],
|
||||
datas: e.areas,
|
||||
img: 'image://https://www.makeapie.cn/asset/get/s/data-1619059442567-s5l7-f8Eu9.png',
|
||||
})
|
||||
})
|
||||
|
|
@ -114,13 +138,13 @@
|
|||
color: '#fff',
|
||||
},
|
||||
itemStyle: {
|
||||
// areaColor: {
|
||||
// image: domImg,
|
||||
// repeat: 'repeat',
|
||||
// },
|
||||
areaColor: {
|
||||
image: domImg,
|
||||
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 text = `{fline|${value}}\n{tline|${name}}`
|
||||
// var value = mapData[params.dataIndex].datas
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
const visualizationStore = useVisualizationStore()
|
||||
props: ['baseId'],
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
|
|
@ -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 = () => {
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
// )
|
||||
}
|
||||
}
|
||||
|
|
@ -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',
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 />
|
||||
<div class="flex-1 flex justify-between px-20px">
|
||||
<div class="flex">
|
||||
<div class="grid grid-cols-2 gap-x-10px gap-y-10px">
|
||||
<DXJG width="440px" height="353px" />
|
||||
<DXCY width="440px" height="353px" />
|
||||
<DXLX width="440px" height="353px" />
|
||||
<DZWZ width="440px" height="353px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex ml-15px justify-between bg-[#162126] bg-opacity-60">
|
||||
<div class="bg-[#10272f] bg-opacity-00">
|
||||
<NYQK />
|
||||
<NCZQS class="mt-20px" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<Map />
|
||||
</div>
|
||||
<div class="bg-[#10272f] bg-opacity-00">
|
||||
<CZNYCY />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="mx-16px">
|
||||
<JK width="440px" height="387px" />
|
||||
<SBYXZT class="mt-16px" width="440px" height="310px" />
|
||||
</div>
|
||||
<div class="">
|
||||
<QXSZ width="440px" height="230px" />
|
||||
<SZJCSJ class="mt-11px" width="440px" height="230px" />
|
||||
<TRJCSJ class="mt-11px" width="440px" height="230px" />
|
||||
<canvas class="absolute left-0 top-0 w-full h-full" ref="cavsRef" id="canv"></canvas>
|
||||
<div class="flex flex-col h-full w-full z-100">
|
||||
<Head />
|
||||
<div class="flex-1 flex justify-between px-20px">
|
||||
<div class="flex">
|
||||
<div class="grid grid-cols-2 gap-x-10px gap-y-10px">
|
||||
<DXJG width="440px" height="353px" />
|
||||
<DXCY width="440px" height="353px" />
|
||||
<DXLX width="440px" height="353px" />
|
||||
<DZWZ width="440px" height="353px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex ml-15px justify-between bg-[#162126] bg-opacity-60">
|
||||
<div class="bg-[#10272f] bg-opacity-00">
|
||||
<NYQK />
|
||||
<NCZQS class="mt-20px" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<Map />
|
||||
</div>
|
||||
<div class="bg-[#10272f] bg-opacity-00">
|
||||
<CZNYCY />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="mx-16px">
|
||||
<JK width="440px" height="387px" />
|
||||
<SBYXZT class="mt-16px" width="440px" height="310px" />
|
||||
</div>
|
||||
<div class="">
|
||||
<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,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue