From ed22606d55fc6c242cd7475d4d178551195ea1f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=AE=81?= <1337898980@qq.com>
Date: Wed, 22 May 2024 08:44:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.env.development | 0
.env.production | 0
.gitignore | 29 +
.vscode/extensions.json | 3 +
LICENSE | 21 +
README.md | 322 +
auto-imports.d.ts | 9 +
dist.zip | Bin 0 -> 2552328 bytes
env.d.ts | 1 +
index.html | 13 +
package-lock.json | 4032 +
package.json | 45 +
postcss.config.js | 6 +
public/favicon.ico | Bin 0 -> 165662 bytes
public/map-geojson/110000.json | 1 +
public/map-geojson/120000.json | 1 +
public/map-geojson/130000.json | 1 +
public/map-geojson/140000.json | 1 +
public/map-geojson/150000.json | 1 +
public/map-geojson/210000.json | 1 +
public/map-geojson/220000.json | 1 +
public/map-geojson/230000.json | 1 +
public/map-geojson/310000.json | 1 +
public/map-geojson/320000.json | 1 +
public/map-geojson/330000.json | 1 +
public/map-geojson/340000.json | 1 +
public/map-geojson/350000.json | 1 +
public/map-geojson/360000.json | 1 +
public/map-geojson/370000.json | 1 +
public/map-geojson/410000.json | 1 +
public/map-geojson/420000.json | 1 +
public/map-geojson/430000.json | 1 +
public/map-geojson/440000.json | 1 +
public/map-geojson/450000.json | 1 +
public/map-geojson/460000.json | 1 +
public/map-geojson/500000.json | 1 +
public/map-geojson/510000.json | 1 +
public/map-geojson/520000.json | 1 +
public/map-geojson/530000.json | 1 +
public/map-geojson/540000.json | 1 +
public/map-geojson/610000.json | 1 +
public/map-geojson/620000.json | 1 +
public/map-geojson/630000.json | 1 +
public/map-geojson/640000.json | 1 +
public/map-geojson/650000.json | 1 +
public/map-geojson/710000.json | 1 +
public/map-geojson/810000.json | 1 +
public/map-geojson/820000.json | 1 +
public/map-geojson/china.json | 98604 ++++++++++++++++
public/map-geojson/chinaNanhai.json | 1 +
src/App.vue | 12 +
src/api/api.ts | 255 +
src/api/index.ts | 12 +
src/api/modules/index.ts | 54 +
src/api/modules/test.ts | 4 +
src/assets/css/main.scss | 98 +
src/assets/css/tailwind.css | 7 +
src/assets/css/variable.scss | 1 +
.../img/big-data/center-details-data1.png | Bin 0 -> 34624 bytes
.../img/big-data/center-details-data2.png | Bin 0 -> 45176 bytes
.../img/big-data/center-details-data3.png | Bin 0 -> 38417 bytes
.../img/big-data/center-details-data4.png | Bin 0 -> 44937 bytes
.../img/big-data/center-details-data5.png | Bin 0 -> 26772 bytes
.../img/big-data/center-details-data6.png | Bin 0 -> 25785 bytes
src/assets/img/guang.png | Bin 0 -> 63109 bytes
src/assets/img/headers/juxing1.png | Bin 0 -> 1679 bytes
src/assets/img/headers/juxing2.png | Bin 0 -> 1657 bytes
src/assets/img/headers/setting.png | Bin 0 -> 323 bytes
src/assets/img/left_top_hong.png | Bin 0 -> 8934 bytes
src/assets/img/left_top_huang.png | Bin 0 -> 8827 bytes
src/assets/img/left_top_lan.png | Bin 0 -> 7781 bytes
src/assets/img/left_top_lv.png | Bin 0 -> 8711 bytes
src/assets/img/pageBg.png | Bin 0 -> 295493 bytes
src/assets/img/titles/you.png | Bin 0 -> 1548 bytes
src/assets/img/titles/zuo.png | Bin 0 -> 1547 bytes
src/assets/img/top.png | Bin 0 -> 9050 bytes
src/assets/img/xieyou.png | Bin 0 -> 1623 bytes
src/assets/img/xiezuo.png | Bin 0 -> 1590 bytes
src/assets/img/zuo_xuxian.png | Bin 0 -> 2117 bytes
.../Plugins/MessageContent/index.ts | 3 +
.../Plugins/MessageContent/index.vue | 8 +
src/components/count-up/count-up.vue | 146 +
src/components/count-up/index.ts | 3 +
.../datav/border-box-13/border-box-13.vue | 90 +
src/components/datav/border-box-13/index.ts | 3 +
.../datav/capsule-chart/capsule-chart.vue | 186 +
src/components/datav/capsule-chart/index.d.ts | 6 +
src/components/datav/capsule-chart/index.ts | 3 +
src/components/empty-com/empty-com.vue | 9 +
src/components/empty-com/index.ts | 2 +
src/components/item-wrap/index.ts | 2 +
src/components/item-wrap/item-wrap.vue | 81 +
src/components/scale-screen/index.ts | 3 +
src/components/scale-screen/scale-screen.vue | 246 +
src/components/seamless-scroll/index.ts | 2 +
.../seamless-scroll/seamless-scroll.vue | 407 +
src/config/UtilVar.ts | 32 +
src/enums/index.ts | 2 +
src/enums/request-enums.ts | 12 +
src/enums/storage-enum.ts | 9 +
src/main.ts | 20 +
src/mock/index.d.ts | 10 +
src/mock/index.ts | 13 +
src/mock/mock-index.ts | 223 +
src/plugins/echarts.ts | 36 +
src/router/index.ts | 30 +
src/stores/index.ts | 1 +
src/stores/setting/setting.ts | 51 +
src/utils/index.ts | 2 +
src/utils/query-param.ts | 36 +
src/utils/storage.ts | 88 +
src/views/HomeView.vue | 47 +
src/views/header.vue | 140 +
src/views/index.d.ts | 27 +
src/views/index/center-bottom.vue | 155 +
src/views/index/center-map.vue | 175 +
src/views/index/center.map.ts | 399 +
src/views/index/index.vue | 90 +
src/views/index/left-bottom.vue | 228 +
src/views/index/left-center.vue | 157 +
src/views/index/left-top.vue | 129 +
src/views/index/right-bottom.vue | 193 +
src/views/index/right-center.vue | 43 +
src/views/index/right-top.vue | 232 +
src/views/setting.vue | 138 +
tailwind.config.js | 13 +
tsconfig.config.json | 13 +
tsconfig.json | 46 +
types/env.d.ts | 6 +
types/global.d.ts | 5 +
vite.config.ts | 57 +
yarn.lock | 2172 +
132 files changed, 109793 insertions(+)
create mode 100644 .env.development
create mode 100644 .env.production
create mode 100644 .gitignore
create mode 100644 .vscode/extensions.json
create mode 100644 LICENSE
create mode 100644 auto-imports.d.ts
create mode 100644 dist.zip
create mode 100644 env.d.ts
create mode 100644 index.html
create mode 100644 package-lock.json
create mode 100644 package.json
create mode 100644 postcss.config.js
create mode 100644 public/favicon.ico
create mode 100644 public/map-geojson/110000.json
create mode 100644 public/map-geojson/120000.json
create mode 100644 public/map-geojson/130000.json
create mode 100644 public/map-geojson/140000.json
create mode 100644 public/map-geojson/150000.json
create mode 100644 public/map-geojson/210000.json
create mode 100644 public/map-geojson/220000.json
create mode 100644 public/map-geojson/230000.json
create mode 100644 public/map-geojson/310000.json
create mode 100644 public/map-geojson/320000.json
create mode 100644 public/map-geojson/330000.json
create mode 100644 public/map-geojson/340000.json
create mode 100644 public/map-geojson/350000.json
create mode 100644 public/map-geojson/360000.json
create mode 100644 public/map-geojson/370000.json
create mode 100644 public/map-geojson/410000.json
create mode 100644 public/map-geojson/420000.json
create mode 100644 public/map-geojson/430000.json
create mode 100644 public/map-geojson/440000.json
create mode 100644 public/map-geojson/450000.json
create mode 100644 public/map-geojson/460000.json
create mode 100644 public/map-geojson/500000.json
create mode 100644 public/map-geojson/510000.json
create mode 100644 public/map-geojson/520000.json
create mode 100644 public/map-geojson/530000.json
create mode 100644 public/map-geojson/540000.json
create mode 100644 public/map-geojson/610000.json
create mode 100644 public/map-geojson/620000.json
create mode 100644 public/map-geojson/630000.json
create mode 100644 public/map-geojson/640000.json
create mode 100644 public/map-geojson/650000.json
create mode 100644 public/map-geojson/710000.json
create mode 100644 public/map-geojson/810000.json
create mode 100644 public/map-geojson/820000.json
create mode 100644 public/map-geojson/china.json
create mode 100644 public/map-geojson/chinaNanhai.json
create mode 100644 src/App.vue
create mode 100644 src/api/api.ts
create mode 100644 src/api/index.ts
create mode 100644 src/api/modules/index.ts
create mode 100644 src/api/modules/test.ts
create mode 100644 src/assets/css/main.scss
create mode 100644 src/assets/css/tailwind.css
create mode 100644 src/assets/css/variable.scss
create mode 100644 src/assets/img/big-data/center-details-data1.png
create mode 100644 src/assets/img/big-data/center-details-data2.png
create mode 100644 src/assets/img/big-data/center-details-data3.png
create mode 100644 src/assets/img/big-data/center-details-data4.png
create mode 100644 src/assets/img/big-data/center-details-data5.png
create mode 100644 src/assets/img/big-data/center-details-data6.png
create mode 100644 src/assets/img/guang.png
create mode 100644 src/assets/img/headers/juxing1.png
create mode 100644 src/assets/img/headers/juxing2.png
create mode 100644 src/assets/img/headers/setting.png
create mode 100644 src/assets/img/left_top_hong.png
create mode 100644 src/assets/img/left_top_huang.png
create mode 100644 src/assets/img/left_top_lan.png
create mode 100644 src/assets/img/left_top_lv.png
create mode 100644 src/assets/img/pageBg.png
create mode 100644 src/assets/img/titles/you.png
create mode 100644 src/assets/img/titles/zuo.png
create mode 100644 src/assets/img/top.png
create mode 100644 src/assets/img/xieyou.png
create mode 100644 src/assets/img/xiezuo.png
create mode 100644 src/assets/img/zuo_xuxian.png
create mode 100644 src/components/Plugins/MessageContent/index.ts
create mode 100644 src/components/Plugins/MessageContent/index.vue
create mode 100644 src/components/count-up/count-up.vue
create mode 100644 src/components/count-up/index.ts
create mode 100644 src/components/datav/border-box-13/border-box-13.vue
create mode 100644 src/components/datav/border-box-13/index.ts
create mode 100644 src/components/datav/capsule-chart/capsule-chart.vue
create mode 100644 src/components/datav/capsule-chart/index.d.ts
create mode 100644 src/components/datav/capsule-chart/index.ts
create mode 100644 src/components/empty-com/empty-com.vue
create mode 100644 src/components/empty-com/index.ts
create mode 100644 src/components/item-wrap/index.ts
create mode 100644 src/components/item-wrap/item-wrap.vue
create mode 100644 src/components/scale-screen/index.ts
create mode 100644 src/components/scale-screen/scale-screen.vue
create mode 100644 src/components/seamless-scroll/index.ts
create mode 100644 src/components/seamless-scroll/seamless-scroll.vue
create mode 100644 src/config/UtilVar.ts
create mode 100644 src/enums/index.ts
create mode 100644 src/enums/request-enums.ts
create mode 100644 src/enums/storage-enum.ts
create mode 100644 src/main.ts
create mode 100644 src/mock/index.d.ts
create mode 100644 src/mock/index.ts
create mode 100644 src/mock/mock-index.ts
create mode 100644 src/plugins/echarts.ts
create mode 100644 src/router/index.ts
create mode 100644 src/stores/index.ts
create mode 100644 src/stores/setting/setting.ts
create mode 100644 src/utils/index.ts
create mode 100644 src/utils/query-param.ts
create mode 100644 src/utils/storage.ts
create mode 100644 src/views/HomeView.vue
create mode 100644 src/views/header.vue
create mode 100644 src/views/index.d.ts
create mode 100644 src/views/index/center-bottom.vue
create mode 100644 src/views/index/center-map.vue
create mode 100644 src/views/index/center.map.ts
create mode 100644 src/views/index/index.vue
create mode 100644 src/views/index/left-bottom.vue
create mode 100644 src/views/index/left-center.vue
create mode 100644 src/views/index/left-top.vue
create mode 100644 src/views/index/right-bottom.vue
create mode 100644 src/views/index/right-center.vue
create mode 100644 src/views/index/right-top.vue
create mode 100644 src/views/setting.vue
create mode 100644 tailwind.config.js
create mode 100644 tsconfig.config.json
create mode 100644 tsconfig.json
create mode 100644 types/env.d.ts
create mode 100644 types/global.d.ts
create mode 100644 vite.config.ts
create mode 100644 yarn.lock
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..e69de29
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..e69de29
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..2b8841d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+components.d.ts
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..c0a6e5a
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+ "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..a782c28
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 daidai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index e69de29..2f3b29d 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1,322 @@
+
+## 项目描述
+
+[IofTV-Screen](https://gitee.com/daidaibg/IofTV-Screen/tree/main) 的 Vue3+vite版本，
+
+### 与vue2版本对比
+
+#### 功能
+
+功能采用与vue2版本相同功能
+
+因为要与vue2版本相同功能，有些组件不兼容vue3版本，例如：胶囊柱图，数字滚动皆重新封装为组件，整体来说，功能属实相同。根据自己需求选择[vue2](#vue2版本地址)版本与[vue3](#本项目地址 vue3+vite)版本
+
+#### 样式
+
+进行微调，整体看着更加美观
+
+
+
+- 项目需要全屏展示（按 F11）。
+
+- 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用 **按需引入**。
+
+- 项目环境：Vite、Echarts、Npm、Node，axios,mock,vue3。
+
+- 请拉取 master 分支的代码，其余分支是开发分支。
+
+- 在项目public目录下存放地图数据合集，根据地市编存放。
+
+
+友情链接：
+
+1. [Vue 官方文档](https://cn.vuejs.org/)
+3. [echarts 实例](https://gitee.com/link?target=https%3A%2F%2Fecharts.apache.org%2Fexamples%2Fzh%2Findex.html)，[echarts API 文档](https://gitee.com/link?target=https%3A%2F%2Fecharts.apache.org%2Fzh%2Fapi.html%23echarts)
+4. [mock.js官网](http://mockjs.com/examples.html)
+5. [axios官网](https://axios-http.com/)
+
+**项目展示**
+
+
+
+### 项目预览地址
+
+[https://www.daidaibg.com/bigscreen-vue3](https://www.daidaibg.com/bigscreen-vue3)
+
+### 项目仓库地址
+
+#### 本项目地址 vue3+vite
+
+**github地址**
+
+[https://github.com/daidaibg/IofTV-Screen-Vue3](https://github.com/daidaibg/IofTV-Screen-Vue3)
+
+**Gitee地址**
+
+[https://gitee.com/daidaibg/IofTV-Screen-Vue3](https://gitee.com/daidaibg/IofTV-Screen-Vue3)
+
+#### vue2版本地址
+
+**github地址**
+
+[https://github.com/daidaibg/IofTV-Screen](https://github.com/daidaibg/IofTV-Screen)
+
+**Gitee地址**
+
+[https://gitee.com/daidaibg/IofTV-Screen](https://gitee.com/daidaibg/IofTV-Screen)
+
+
+
+### 采用自适应组件方式，
+
+### 滚动设置，自适应设置
+
+项目中可以进行滚动配置，内容是否滚动
+
+点击右上角设置按钮
+
+
+
+
+可以进行以下配置，可以自行代码中进行修改或增加配置
+
+
+
+
+
+
+
+## 2、主要文件介绍
+
+| 文件 | 作用/功能 |
+| ----------------- | ------------------------------------------------------------ |
+| main.js | 主目录文件，引入 Echart/DataV 等文件 |
+| utils | 工具函数与 mixins 函数等 |
+| views/ home.vue | 项目主结构 |
+| views/其余文件 | 界面各个区域组件（按照位置来命名） |
+| assets | 静态资源目录，放置 logo 与背景图片 |
+| assets / css/ | 通用 CSS 文件，全局项目快捷样式调节 |
+| components/echart | 所有 echart 图表（按照位置来命名） |
+| common/... | 全局封装的 ECharts 和 flexible 插件代码（适配屏幕尺寸，可定制化修改） |
+| api/api.js | 接口封装文件 |
+| mock | 模拟数据接口地址 |
+
+###
+
+## 使用介绍
+
+### 安装
+
+```npm
+npm install
+```
+### 启动
+
+```npm
+npm run dev
+```
+
+### 取消mock模拟数据
+
+```javascript
+// src\main.ts文件
+把下面两行代码注释掉就可以了。
+import { mockXHR } from "@/mock/index";
+mockXHR()
+```
+
+##
+
+## 公用组件
+
+封装了除面条外个别用到的组件
+
+### 自适应缩放组件
+
+#### 注意
+
+采用Scale方式，会自动给组件父元素添加overflow:hidden
+
+#### 使用
+
+```vue
+
+
+
+ content
+
+
+
+
+
+```
+
+#### API
+
+| 属性 | 说明 | 类型 | 默认值 |
+| ------------ | ------------------------------------------------------------ | -------------------------------- | ------ |
+| selfAdaption | 是否进行自适应 | Boolean | true |
+| width | 大屏宽度 | `Number` or `String` | 1920 |
+| height | 大屏高度 | `Number` or `String` | 1080 |
+| autoScale | 自适应配置，配置为boolean类型时，为启动或者关闭自适应，配置为对象时，若x为true，x轴产生边距，y为true时，y轴产生边距，启用fullScreen时此配置失效 | Boolean or {x:boolean,y:boolean} | true |
+| delay | 窗口变化防抖延迟时间 | Number | 500 |
+| fullScreen | 全屏自适应，启用此配置项时会存在拉伸效果，同时autoScale失效，非必要情况下不建议开启 | Boolean | false |
+| boxStyle | 修改容器样式，如居中展示时侧边背景色，符合Vue双向绑定style标准格式 | Object | null |
+| wrapperStyle | 修改自适应区域样式，符合Vue双向绑定style标准格式 | Object | null |
+
+
+### 外边框
+
+因为我的项目外边框几乎一样，还有title,所以封装了此组件。
+
+根据自己需求更改，更换外边框（src\components\item-wrap\item-wrap.vue）下更换。
+
+```vue
+
+ 我是谁？
+
+```
+
+| 参数 | 描述 | 默认值 | 类型 | 可选值 |
+| :---: | :--: | :----: | :----: | :----: |
+| title | 标头 | - | string | - |
+
+### CountUp 数字滚动
+
+以下属性同 coutup.js 配置项（same as countup.js properties）
+
+#### Props
+
+| Name | Type | Default | Description |
+| -------- | ---------------- | ------- | ------------------------------------------------------------ |
+| endVal | Number \| String | - | 结束值 |
+| startVal | Number \| String | 0 | 起始值 |
+| duration | Number | 2.5 | 动画时长，单位：秒 |
+| options | Object | - | [countUp.js](https://github.com/inorganik/countUp.js) options 配置项 |
+
+以下为组件特有属性（extension properties）
+
+| Name | Type | Default | Description |
+| -------- | ----------------- | ------- | ----------------------------- |
+| autoplay | Boolean | true | 是否自动计数 |
+| loop | Boolean \| Number | false | 循环次数，有限次数 / 无限循环 |
+| delay | Number | 0 | loop 循环的间隔时间，单位：秒 |
+
+#### 插槽（slots）
+
+| Name | Description |
+| ------ | ----------- |
+| prefix | 前缀 |
+| suffix | 后缀 |
+
+#### 事件（Events）
+
+| Name | Description | return |
+| --------- | -------------------------- | ------------ |
+| @init | CountUp 实例初始化完成触发 | CountUp 实例 |
+| @finished | 计数结束时触发 | - |
+
+#### countup.js 配置项说明
+```ts
+interface CountUpOptions {
+ startVal?: number // number to start at (0) 开始数值，默认 0
+ decimalPlaces?: number // number of decimal places (0) 小数点 位数
+ duration?: number // animation duration in seconds (2) 动画时长
+ useGrouping?: boolean // example: 1,000 vs 1000 (true) 是否使用千分位
+ useEasing?: boolean // ease animation (true) 是否开启动画过渡，默认动画函数为easeOutExpo
+ smartEasingThreshold?: number // smooth easing for large numbers above this if useEasing (999)
+ smartEasingAmount?: number // amount to be eased for numbers above threshold (333)
+ separator?: string // grouping separator (',') 千分位分隔符
+ decimal?: string // decimal ('.') 小数点分隔符
+ // easingFn: easing function for animation (easeOutExpo) 动画函数
+ easingFn?: (t: number, b: number, c: number, d: number) => number
+ formattingFn?: (n: number) => string // this function formats result 格式化结果
+ prefix?: string // text prepended to result 数值前缀
+ suffix?: string // text appended to result 数值后缀
+ numerals?: string[] // numeral glyph substitution 数字符号替换 0 - 9，例如替换为 [a,b,c,d,e,f,g,h,i,j]
+ enableScrollSpy?: boolean // start animation when target is in view 在可视范围内才开始动画
+ scrollSpyDelay?: number // delay (ms) after target comes into view 目标进入可视范围内后的延迟时间(毫秒)
+}
+```
+
+### 胶囊柱图
+
+#### Props
+
+| 属性 | 说明 | 类型 | 可选值 | 默认值 |
+| :----: | :------: | :-------------: | :-----------------------: | :-----: |
+| data | 柱数据 | `Array