From c8fa37221cb20700acd9c97b3faf95a5be6be327 Mon Sep 17 00:00:00 2001 From: "747575620@qq.com" <747575620@qq.com> Date: Thu, 23 Mar 2023 09:33:57 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/config.ts | 4 + package.json | 2 + src/api/test.ts | 23 ++ src/components/fxcx/index.tsx | 3 +- src/components/index/Index.vue | 175 --------------- src/components/test/HelloWorld.vue | 40 ---- src/components/test/TheWelcome.vue | 86 ------- src/components/test/WelcomeItem.vue | 86 ------- src/components/test/icons/IconCommunity.vue | 7 - .../test/icons/IconDocumentation.vue | 7 - src/components/test/icons/IconEcosystem.vue | 7 - src/components/test/icons/IconSupport.vue | 7 - src/components/test/icons/IconTooling.vue | 19 -- src/main.ts | 2 + src/router/index.ts | 8 +- src/utils/request.ts | 29 +++ src/views/HomeView.tsx | 13 ++ src/views/HomeView.vue | 16 -- src/{components => views}/index/index.scss | 28 ++- .../index/indeb.tsx => views/index/index.tsx} | 209 +++++++++++------- tsconfig.json | 2 +- yarn.lock | 62 ++++++ 22 files changed, 294 insertions(+), 541 deletions(-) create mode 100644 config/config.ts create mode 100644 src/api/test.ts delete mode 100644 src/components/index/Index.vue delete mode 100644 src/components/test/HelloWorld.vue delete mode 100644 src/components/test/TheWelcome.vue delete mode 100644 src/components/test/WelcomeItem.vue delete mode 100644 src/components/test/icons/IconCommunity.vue delete mode 100644 src/components/test/icons/IconDocumentation.vue delete mode 100644 src/components/test/icons/IconEcosystem.vue delete mode 100644 src/components/test/icons/IconSupport.vue delete mode 100644 src/components/test/icons/IconTooling.vue create mode 100644 src/utils/request.ts create mode 100644 src/views/HomeView.tsx delete mode 100644 src/views/HomeView.vue rename src/{components => views}/index/index.scss (85%) rename src/{components/index/indeb.tsx => views/index/index.tsx} (52%) diff --git a/config/config.ts b/config/config.ts new file mode 100644 index 0000000..d517014 --- /dev/null +++ b/config/config.ts @@ -0,0 +1,4 @@ +export const networkConfig = { + serverUrl: 'https://api.uomg.com', + requestTimeout: 20000 +} \ No newline at end of file diff --git a/package.json b/package.json index 91b0139..4bfcc2e 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/api/test.ts b/src/api/test.ts new file mode 100644 index 0000000..c0c8f69 --- /dev/null +++ b/src/api/test.ts @@ -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', + }) + } +} \ No newline at end of file diff --git a/src/components/fxcx/index.tsx b/src/components/fxcx/index.tsx index 5d1bf0a..7be2837 100644 --- a/src/components/fxcx/index.tsx +++ b/src/components/fxcx/index.tsx @@ -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?.()} - + ) } }, diff --git a/src/components/index/Index.vue b/src/components/index/Index.vue deleted file mode 100644 index 20394ad..0000000 --- a/src/components/index/Index.vue +++ /dev/null @@ -1,175 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/test/HelloWorld.vue b/src/components/test/HelloWorld.vue deleted file mode 100644 index 23afedd..0000000 --- a/src/components/test/HelloWorld.vue +++ /dev/null @@ -1,40 +0,0 @@ - - - - - diff --git a/src/components/test/TheWelcome.vue b/src/components/test/TheWelcome.vue deleted file mode 100644 index a70765c..0000000 --- a/src/components/test/TheWelcome.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/src/components/test/WelcomeItem.vue b/src/components/test/WelcomeItem.vue deleted file mode 100644 index ba0def3..0000000 --- a/src/components/test/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/src/components/test/icons/IconCommunity.vue b/src/components/test/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b05..0000000 --- a/src/components/test/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/test/icons/IconDocumentation.vue b/src/components/test/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791c..0000000 --- a/src/components/test/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/test/icons/IconEcosystem.vue b/src/components/test/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f07..0000000 --- a/src/components/test/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/test/icons/IconSupport.vue b/src/components/test/icons/IconSupport.vue deleted file mode 100644 index 7452834..0000000 --- a/src/components/test/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/test/icons/IconTooling.vue b/src/components/test/icons/IconTooling.vue deleted file mode 100644 index 660598d..0000000 --- a/src/components/test/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/src/main.ts b/src/main.ts index abfa65b..8a1e9ac 100644 --- a/src/main.ts +++ b/src/main.ts @@ -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') diff --git a/src/router/index.ts b/src/router/index.ts index a49ae50..7ed30ea 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -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 } ] }) diff --git a/src/utils/request.ts b/src/utils/request.ts new file mode 100644 index 0000000..7aa7e8c --- /dev/null +++ b/src/utils/request.ts @@ -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) +} \ No newline at end of file diff --git a/src/views/HomeView.tsx b/src/views/HomeView.tsx new file mode 100644 index 0000000..14e1a8d --- /dev/null +++ b/src/views/HomeView.tsx @@ -0,0 +1,13 @@ + +import { defineComponent } from 'vue'; +import Index from './index/index' +export default defineComponent({ + setup(this, props, ctx) { + return () => { + return (<> + + + ) + } + }, +}); diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue deleted file mode 100644 index 56eff77..0000000 --- a/src/views/HomeView.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - - \ No newline at end of file diff --git a/src/components/index/index.scss b/src/views/index/index.scss similarity index 85% rename from src/components/index/index.scss rename to src/views/index/index.scss index dacdda2..515235d 100644 --- a/src/components/index/index.scss +++ b/src/views/index/index.scss @@ -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; } \ No newline at end of file diff --git a/src/components/index/indeb.tsx b/src/views/index/index.tsx similarity index 52% rename from src/components/index/indeb.tsx rename to src/views/index/index.tsx index 49834e6..7b03bca 100644 --- a/src/components/index/indeb.tsx +++ b/src/views/index/index.tsx @@ -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(''); // 生命周期 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 (
{/* */} +
黑菠萝大屏 -
+
{timeInfo.dateDay}
+
+
@@ -133,7 +153,7 @@ export default defineComponent({
{/* */}
-
我是父组件
+
点击我,我执行的子组件的方法
{{ @@ -147,103 +167,126 @@ export default defineComponent({ children: () => { return (
- 123123 +
) } }} -
-
你就说老子帅不帅吧
+ +
+ +
+
+
{`接口获取数据展示:${apires.value}`}
+
{/* */}
- - -
- -
-
- + +
+ +
+
+ +
+ +
+ {/* */} +
+ +
+ + +
+ -
+ ], + unit: '单位' + }} style="width:300px;height:200px" /> + {/* 表格 两行两列*/} +
+
+
1
+
2
+
+
+
1
+
2
+
+
+
1
+
2
+
+
- {/* */} -
- - - - -
); diff --git a/tsconfig.json b/tsconfig.json index cb2043b..dd7f788 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -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": { diff --git a/yarn.lock b/yarn.lock index 51ffa07..4404933 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"