fyf
/
MaxScreen
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

页面修改

master
747575620@qq.com 1 year ago
parent
0af798d9a4
commit
c8fa37221c
22 changed files with 294 additions and 541 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4
    -0
      config/config.ts
  2. +2
    -0
      package.json
  3. +23
    -0
      src/api/test.ts
  4. +2
    -1
      src/components/fxcx/index.tsx
  5. +0
    -175
      src/components/index/Index.vue
  6. +0
    -40
      src/components/test/HelloWorld.vue
  7. +0
    -86
      src/components/test/TheWelcome.vue
  8. +0
    -86
      src/components/test/WelcomeItem.vue
  9. +0
    -7
      src/components/test/icons/IconCommunity.vue
  10. +0
    -7
      src/components/test/icons/IconDocumentation.vue
  11. +0
    -7
      src/components/test/icons/IconEcosystem.vue
  12. +0
    -7
      src/components/test/icons/IconSupport.vue
  13. +0
    -19
      src/components/test/icons/IconTooling.vue
  14. +2
    -0
      src/main.ts
  15. +3
    -5
      src/router/index.ts
  16. +29
    -0
      src/utils/request.ts
  17. +13
    -0
      src/views/HomeView.tsx
  18. +0
    -16
      src/views/HomeView.vue
  19. +27
    -1
      src/views/index/index.scss
  20. +126
    -83
      src/views/index/index.tsx
  21. +1
    -1
      tsconfig.json
  22. +62
    -0
      yarn.lock

+ 4
- 0
config/config.ts View File

@@ -0,0 +1,4 @@
export const networkConfig = {
serverUrl: 'https://api.uomg.com',
requestTimeout: 20000
}

+ 2
- 0
package.json View File

@@ -12,6 +12,8 @@
"dependencies": {
"@kjgl77/datav-vue3": "^1.4.2",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"axios": "^1.3.4",
"dayjs": "^1.11.7",
"echarts": "^5.4.1",
"pinia": "^2.0.32",
"vue": "^3.2.47",


+ 23
- 0
src/api/test.ts View File

@@ -0,0 +1,23 @@
import {request} from '../utils/request'

// 登录方法
export default {
login(username:any, password:any, grant_type:any){
const data = {
username,
password,
grant_type
}
return request({
url: 'api/rand.qinghua?format=json',
method: 'get',
data: data,
})
},
test(){
return request({
url: 'api/rand.qinghua?format=json',
method: 'get',
})
}
}

+ 2
- 1
src/components/fxcx/index.tsx View File

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
import './index.scss';

export default defineComponent({
//暴露子组件属性
props:['title','nihao','titelClick'],
setup(this, props, ctx) {
const { slots:{titel,children}}=ctx
@@ -39,7 +40,7 @@ export default defineComponent({
{children?.()}
</div>
</div>
<button onClick={props.titelClick}>触发父级方法</button>
<button onClick={props.titelClick}>触发父级方法调用API</button>
</div>
) }
},

+ 0
- 175
src/components/index/Index.vue View File

@@ -1,175 +0,0 @@
<template>
<div class="box">
<!-- 标题 -->
<div class="titel">
<div class="dh"></div>
<div class="titel-right-bg"></div>
<div class="titel-left-bg"></div>
<div class="titel-tow-bg"></div>
<div class="titel-first-bg"></div>
<div class="titel-line"></div>
<div>
{{ title }}
</div>
</div>
<!-- 下面部分 -->
<div class="main-box">
<!-- 左边 -->
<div class="main-left">
<fxcx>
<template v-slot:titel>
<div @click="chufa">标题</div>
</template>
<template v-slot:head>
<div id="bzt" style="width: 400px;height:400px;">
</div>
</template>
</fxcx>
</div>
<!-- 中间 -->
<div class="main-center">
</div>
<!-- 右边 -->
<div class="main-right">
</div>
</div>
</div>
</template>

<script lang="ts">
import {
defineComponent,
ref,
reactive,
onMounted,
onBeforeUnmount,
} from 'vue';
import { formatTime } from '@/utils'
import { WEEK } from '@/constant'
import useIndex from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant'
import fxcx from '../fxcx/index.tsx'
import * as echarts from 'echarts';

export default {
//组件
components: {
fxcx
},
//启动时候
setup() {
const chufa=()=>{
console.log('123123123');
}
// * 加载标识
const loading = ref<boolean>(true)
// * 时间内容
const timeInfo = reactive({
setInterval: 0,
dateDay: '',
dateYear: '',
dateWeek: ''
})
// * 适配处理
const { appRef, calcRate, windowDraw } = useIndex()
// 生命周期
onMounted(() => {
InitMap()
cancelLoading()
handleTime()
// todo 屏幕适应
windowDraw()
calcRate()

})
onBeforeUnmount(() => {
clearInterval(timeInfo.setInterval)
})

// methods
// todo 处理 loading 展示
const cancelLoading = () => {
setTimeout(() => {
loading.value = false
}, 500)
}
// todo 处理时间监听
const handleTime = () => {
timeInfo.setInterval = setInterval(() => {
const date = new Date()
timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
timeInfo.dateWeek = WEEK[date.getDay()]
}, 1000)
}
type EChartsOption = echarts.EChartsOption;
//例子，初始化饼状图
const InitMap = () => {
var chartDom = document.getElementById('bzt')!;
console.log('chartDom', chartDom);
var myChart = echarts.init(chartDom);
var option: EChartsOption;
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
option && myChart.setOption(option);
}
// return
return {
loading,
timeInfo,
appRef,
title,
subtitle,
moduleInfo,
chufa,
}
}
};
</script>

<style lang="scss" scoped>
@import 'index';
</style>

+ 0
- 40
src/components/test/HelloWorld.vue View File

@@ -1,40 +0,0 @@
<script setup lang="ts">
defineProps<{
msg: string
}>()
</script>

<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h3>
You’ve successfully created a project with
<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
</h3>
</div>
</template>

<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
top: -10px;
}

h3 {
font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
text-align: center;
}

@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>

+ 0
- 86
src/components/test/TheWelcome.vue View File

@@ -1,86 +0,0 @@
<script setup lang="ts">
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
</script>

<template>
<WelcomeItem>
<template #icon>
<DocumentationIcon />
</template>
<template #heading>Documentation</template>

Vue’s
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
provides you with all information you need to get started.
</WelcomeItem>

<WelcomeItem>
<template #icon>
<ToolingIcon />
</template>
<template #heading>Tooling</template>

This project is served and bundled with
<a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
recommended IDE setup is
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
you need to test your components and web pages, check out
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
<a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.

<br />

More instructions are available in <code>README.md</code>.
</WelcomeItem>

<WelcomeItem>
<template #icon>
<EcosystemIcon />
</template>
<template #heading>Ecosystem</template>

Get official tools and libraries for your project:
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
you need more resources, we suggest paying
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
a visit.
</WelcomeItem>

<WelcomeItem>
<template #icon>
<CommunityIcon />
</template>
<template #heading>Community</template>

Got stuck? Ask your question on
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
Discord server, or
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
>StackOverflow</a
>. You should also subscribe to
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
the official
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
twitter account for latest news in the Vue world.
</WelcomeItem>

<WelcomeItem>
<template #icon>
<SupportIcon />
</template>
<template #heading>Support Vue</template>

As an independent project, Vue relies on community backing for its sustainability. You can help
us by
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
</WelcomeItem>
</template>

+ 0
- 86
src/components/test/WelcomeItem.vue View File

@@ -1,86 +0,0 @@
<template>
<div class="item">
<i>
<slot name="icon"></slot>
</i>
<div class="details">
<h3>
<slot name="heading"></slot>
</h3>
<slot></slot>
</div>
</div>
</template>

<style scoped>
.item {
margin-top: 2rem;
display: flex;
}

.details {
flex: 1;
margin-left: 1rem;
}

i {
display: flex;
place-items: center;
place-content: center;
width: 32px;
height: 32px;

color: var(--color-text);
}

h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.4rem;
color: var(--color-heading);
}

@media (min-width: 1024px) {
.item {
margin-top: 0;
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
}

i {
top: calc(50% - 25px);
left: -26px;
position: absolute;
border: 1px solid var(--color-border);
background: var(--color-background);
border-radius: 8px;
width: 50px;
height: 50px;
}

.item:before {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
bottom: calc(50% + 25px);
height: calc(50% - 25px);
}

.item:after {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
top: calc(50% + 25px);
height: calc(50% - 25px);
}

.item:first-of-type:before {
display: none;
}

.item:last-of-type:after {
display: none;
}
}
</style>

+ 0
- 7
src/components/test/icons/IconCommunity.vue View File

@@ -1,7 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
/>
</svg>
</template>

+ 0
- 7
src/components/test/icons/IconDocumentation.vue View File

@@ -1,7 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
<path
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
/>
</svg>
</template>

+ 0
- 7
src/components/test/icons/IconEcosystem.vue View File

@@ -1,7 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
<path
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
/>
</svg>
</template>

+ 0
- 7
src/components/test/icons/IconSupport.vue View File

@@ -1,7 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
/>
</svg>
</template>

+ 0
- 19
src/components/test/icons/IconTooling.vue View File

@@ -1,19 +0,0 @@
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--mdi"
width="24"
height="24"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
fill="currentColor"
></path>
</svg>
</template>

+ 2
- 0
src/main.ts View File

@@ -3,6 +3,7 @@ import { createPinia } from 'pinia'
import DataVVue3 from '@kjgl77/datav-vue3'
import App from './App.vue'
import router from './router'
import dayjs from 'dayjs'
// 引入全局css
import './assets/main.css'
// 引入全局css
@@ -12,4 +13,5 @@ const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(DataVVue3)

app.mount('#app')

+ 3
- 5
src/router/index.ts View File

@@ -1,5 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import HomeView from '../views/HomeView'
import AboutView from '../views/AboutView.vue'

const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -12,10 +13,7 @@ const router = createRouter({
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue')
component:AboutView
}
]
})


+ 29
- 0
src/utils/request.ts View File

@@ -0,0 +1,29 @@
import axios from 'axios'
import {networkConfig} from '../../config/config'

// 创建axios实例
export const request:any = (config:any) => {
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: networkConfig.serverUrl,
// 超时
timeout: networkConfig.requestTimeout
})
// request拦截器
service.interceptors.request.use(config => {
return config
}, error => {
console.log(error)
Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use((res) => {
return res.data
},
error => {
return Promise.reject(error)
}
)
return service(config)
}

+ 13
- 0
src/views/HomeView.tsx View File

@@ -0,0 +1,13 @@

import { defineComponent } from 'vue';
import Index from './index/index'
export default defineComponent({
setup(this, props, ctx) {
return () => {
return (<>
<Index></Index>
</>
)
}
},
});

+ 0
- 16
src/views/HomeView.vue View File

@@ -1,16 +0,0 @@
<script setup lang="ts">
import Index from '../components/index/Index.vue'
import Index2 from '../components/index/indeb'
</script>

<template>
<div>
<Index2></Index2>
</div>
</template>
<style>
.box{
width: 100%;
height: 100%;
}
</style>

src/components/index/index.scss → src/views/index/index.scss View File

@@ -67,7 +67,7 @@
bottom: 0px;
left:51%;
}
.dh{
.top_h{
background-image: url('../../assets/top-image/top_h.png');
position: absolute;
height: 200px;
@@ -92,4 +92,30 @@
.main-right{
flex: 1;
//border: 1px solid blue;
}
.titel-time{
position:fixed;
top: 10px;
right: 30px;
}

.row{
display: flex;
flex-direction: row;
}
.col{
display: flex;
flex-direction: column;
}


.dvborder-item{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 20px;
}

src/components/index/indeb.tsx → src/views/index/index.tsx View File

@@ -7,9 +7,21 @@ import {
onBeforeUnmount,
renderSlot,
} from 'vue';
import Fxcx from '../fxcx/index'
import Fxcx from '../../components/fxcx/index'
import * as echarts from 'echarts';
import dayjs from 'dayjs'
import Api from '../../api/test'
import './index.scss'

//定义类型/接口

interface resData {
code: number,
content: string
}



export default defineComponent({
//启动时候
setup() {
@@ -28,12 +40,16 @@ export default defineComponent({
dateYear: '',
dateWeek: ''
})
const apires = ref<string>('');

// 生命周期
onMounted(() => {
InitMap()
cancelLoading()
handleTime()
console.log(dayjs().format('YYYY-MM-DD HH:mm:ss'));



})

@@ -50,7 +66,9 @@ export default defineComponent({
}
//给子组件传递方法
const setChildFunc = () => {
alert('我是父级方法');
Api.test().then((res: resData) => {
apires.value = res.content;
})
}
//获取子组件方法
const getChildFunc = () => {
@@ -63,16 +81,15 @@ export default defineComponent({
const handleTime = () => {
timeInfo.setInterval = setInterval(() => {
const date = new Date()
timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
timeInfo.dateWeek = WEEK[date.getDay()]
// timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
timeInfo.dateDay = dayjs().format('YYYY-MM-DD HH:mm:ss')
// timeInfo.dateWeek = WEEK[date.getDay()]
}, 1000)
}
type EChartsOption = echarts.EChartsOption;
//例子，初始化饼状图
const InitMap = () => {
var chartDom = document.getElementById('bzt')!;
console.log('chartDom', chartDom);
var myChart = echarts.init(chartDom);
var option: EChartsOption;
option = {
@@ -117,14 +134,17 @@ export default defineComponent({
return (
<div class="box">
{/* <!-- 标题 --> */}
<div class="titel">
黑菠萝大屏
<div class="dh"></div>
<div class='titel-time'>{timeInfo.dateDay}</div>
<div class="top_h"></div>
<div class="titel-right-bg"></div>
<div class="titel-left-bg"></div>
<div class="titel-tow-bg"></div>
<div class="titel-first-bg"></div>
<div class="titel-line"></div>
<div>

</div>
@@ -133,7 +153,7 @@ export default defineComponent({
<div class="main-box">
{/* <!-- 左边 --> */}
<div class="main-left">
<div onClick={getChildFunc}>我是父组件</div>
<div onClick={getChildFunc}>点击我,我执行的子组件的方法</div>
<Fxcx ref={FxcxRef} title="我是爸爸" nihao="你好" titelClick={setChildFunc} >
{{

@@ -147,103 +167,126 @@ export default defineComponent({
children: () => {
return (<div>
<div id='bzt' style="width: 100%;height:400px;">
123123
</div>
</div>)
}
}}
</Fxcx>
<div><dv-decoration-1 style="width:200px;height:50px;" /></div>
<div><dv-border-box-4 style="width:100%;height:200px;">你就说老子帅不帅吧</dv-border-box-4></div>

<div><dv-decoration-1 style="width:200px;height:50px;" />

</div>
<div><dv-border-box-4 style="width:100%;height:200px;text-align:center">
<div class='dvborder-item'>{`接口获取数据展示:${apires.value}`}</div>
</dv-border-box-4></div>
</div>
{/* <!-- 中间 --> */}
<div class="main-center">
<dv-border-box-8 reverse="true">
<dv-percent-pond config={{ value: 66 }} style="width:200px;height:100px;" />
<div>
<dv-scroll-board config={{
header: ['列1', '列2', '列3'],
data: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
]
}} style="width:500px;height:220px" />
</div>
<div>
<dv-scroll-ranking-board config={{
<dv-border-box-8 reverse>

<div>
<dv-scroll-board config={{
header: ['列1', '列2', '列3'],
data: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
]
}} style="width:500px;height:220px" />
</div>
<div>
<dv-scroll-ranking-board config={{
data: [
{
name: '周口',
value: 55
},
{
name: '南阳',
value: 120
},
{
name: '西峡',
value: 78
},
{
name: '驻马店',
value: 66
},
{
name: '新乡',
value: 80
},
{
name: '信阳',
value: 45
},
{
name: '漯河',
value: 29
}
]
}} style="width:500px;height:300px" />
</div>
</dv-border-box-8>
</div>
{/* <!-- 右边 --> */}
<div class="main-right">
<dv-border-box-8 reverse>
<div class='row'>
<dv-water-level-pond config={{ data: [66] }} style="width:150px;height:200px" />
<dv-percent-pond config={{ value: 66 }} style="width:200px;height:100px;" />
</div>
<dv-capsule-chart config={{
data: [
{
name: '周口',
value: 55
},
{
name: '南阳',
value: 120
value: 167
},
{
name: '西峡',
value: 78
name: '周口',
value: 67
},
{
name: '驻马店',
value: 66
name: '漯河',
value: 123
},
{
name: '新乡',
value: 80
name: '郑州',
value: 55
},
{
name: '信阳',
value: 45
name: '西峡',
value: 98
},
{
name: '漯河',
value: 29
}
]
}} style="width:500px;height:300px" />
</div>
],
unit: '单位'
}} style="width:300px;height:200px" />
{/* 表格 两行两列*/}
<div class='row'>
<div class='col'>
<div>1</div>
<div>2</div>
</div>
<div class='col'>
<div>1</div>
<div>2</div>
</div>
<div class='col'>
<div>1</div>
<div>2</div>
</div>
</div>
</dv-border-box-8>
</div>
{/* <!-- 右边 --> */}
<div class="main-right">
<dv-border-box-8 reverse="true">
<dv-water-level-pond config={{ data: [66] }} style="width:150px;height:200px" />
<dv-capsule-chart config={{
data: [
{
name: '南阳',
value: 167
},
{
name: '周口',
value: 67
},
{
name: '漯河',
value: 123
},
{
name: '郑州',
value: 55
},
{
name: '西峡',
value: 98
},
],
unit: '单位'
}} style="width:300px;height:200px" />
</dv-border-box-8>
</div>
</div>
</div>
);

+ 1
- 1
tsconfig.json View File

@@ -1,6 +1,6 @@
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.tsx"],
"compilerOptions": {
"baseUrl": ".",
"paths": {


+ 62
- 0
yarn.lock View File

@@ -712,11 +712,25 @@ array-buffer-byte-length@^1.0.0:
call-bind "^1.0.2"
is-array-buffer "^3.0.1"

asynckit@^0.4.0:
version "0.4.0"
resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==

available-typed-arrays@^1.0.5:
version "1.0.5"
resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz"
integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==

axios@^1.3.4:
version "1.3.4"
resolved "https://registry.npmmirror.com/axios/-/axios-1.3.4.tgz#f5760cefd9cfb51fd2481acf88c05f67c4523024"
integrity sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==
dependencies:
follow-redirects "^1.15.0"
form-data "^4.0.0"
proxy-from-env "^1.1.0"

balanced-match@^1.0.0:
version "1.0.2"
resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
@@ -813,6 +827,13 @@ color-name@1.1.3:
resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==

combined-stream@^1.0.8:
version "1.0.8"
resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
dependencies:
delayed-stream "~1.0.0"

concat-map@0.0.1:
version "0.0.1"
resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -839,6 +860,11 @@ csstype@^2.6.8:
resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz"
integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==

dayjs@^1.11.7:
version "1.11.7"
resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==

de-indent@^1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz"
@@ -859,6 +885,11 @@ define-properties@^1.1.3, define-properties@^1.1.4:
has-property-descriptors "^1.0.0"
object-keys "^1.1.1"

delayed-stream@~1.0.0:
version "1.0.0"
resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==

echarts@^5.4.1:
version "5.4.1"
resolved "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz#d7f65a584d78beff62568d878b16151b3381811c"
@@ -987,6 +1018,11 @@ fill-range@^7.0.1:
dependencies:
to-regex-range "^5.0.1"

follow-redirects@^1.15.0:
version "1.15.2"
resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==

for-each@^0.3.3:
version "0.3.3"
resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz"
@@ -994,6 +1030,15 @@ for-each@^0.3.3:
dependencies:
is-callable "^1.1.3"

form-data@^4.0.0:
version "4.0.0"
resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
dependencies:
asynckit "^0.4.0"
combined-stream "^1.0.8"
mime-types "^2.1.12"

fsevents@~2.3.2:
version "2.3.2"
resolved "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
@@ -1332,6 +1377,18 @@ memorystream@^0.3.1:
resolved "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz"
integrity sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==

mime-db@1.52.0:
version "1.52.0"
resolved "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==

mime-types@^2.1.12:
version "2.1.35"
resolved "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
dependencies:
mime-db "1.52.0"

minimatch@^3.0.4:
version "3.1.2"
resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
@@ -1483,6 +1540,11 @@ postcss@^8.1.10, postcss@^8.4.21:
picocolors "^1.0.0"
source-map-js "^1.0.2"

proxy-from-env@^1.1.0:
version "1.1.0"
resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==

read-pkg@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz"


Write Preview
Loading…
Cancel
Save