Compare commits
159 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b5738f5cf4 | ||
|
|
dbd33cd676 | ||
|
|
032956e03b | ||
|
|
b94b44090b | ||
|
|
19a382afe5 | ||
|
|
02fe552d1b | ||
|
|
22924eb36f | ||
|
|
a626f64e57 | ||
|
|
00a4c752ed | ||
|
|
134b44944e | ||
|
|
1eb0485a86 | ||
|
|
35e5374628 | ||
|
|
432cceed2a | ||
|
|
5b828d4982 | ||
|
|
605fd14b3d | ||
|
|
1b2b319467 | ||
|
|
dc458ea88e | ||
|
|
6f4e967b49 | ||
|
|
97899f275a | ||
|
|
8b6c616a15 | ||
|
|
87386e69a3 | ||
|
|
196df94aee | ||
|
|
a407d118fa | ||
|
|
0fc7bde348 | ||
|
|
9a8899ae40 | ||
|
|
8cb711b892 | ||
|
|
49d8c35747 | ||
|
|
125856677a | ||
|
|
bcf0417624 | ||
|
|
4b81a09293 | ||
|
|
bcaffd1579 | ||
|
|
7309d603f5 | ||
|
|
ada4ce9885 | ||
|
|
7758fb30d0 | ||
|
|
6ddea30289 | ||
|
|
ac42782f12 | ||
|
|
4348688e34 | ||
|
|
d447c85830 | ||
|
|
0a3c1b3438 | ||
|
|
b3bff2ee45 | ||
|
|
d90e0953b9 | ||
|
|
ba04005b09 | ||
|
|
fc58df2148 | ||
|
|
4f2609a121 | ||
|
|
f21c9f1246 | ||
|
|
16d7ae8176 | ||
|
|
0e77b196b6 | ||
|
|
0ea81aeaee | ||
|
|
d7aa41094b | ||
|
|
4ec1bbd912 | ||
|
|
a7b98fe3d6 | ||
|
|
bc02950a6f | ||
|
|
4e5c921bf2 | ||
|
|
14c5d935c4 | ||
|
|
b73893a6af | ||
|
|
cf85574c67 | ||
|
|
923b7759f8 | ||
|
|
c7988f2d83 | ||
|
|
0111f42803 | ||
|
|
cec39d693a | ||
|
|
c250f9d4d8 | ||
|
|
97ca3e8664 | ||
|
|
ad72070af1 | ||
|
|
8824d636f4 | ||
|
|
8e28c524b3 | ||
|
|
01d971b902 | ||
|
|
855d810d0d | ||
|
|
5dd39926f8 | ||
|
|
cbf541282a | ||
|
|
279f414db0 | ||
|
|
bc10d06c78 | ||
|
|
fa2530634d | ||
|
|
9aff88c678 | ||
|
|
f82cde2faf | ||
|
|
462a613bd3 | ||
|
|
5e0baa4923 | ||
|
|
fb93d35c91 | ||
|
|
fc2b1fc42e | ||
|
|
d46a0b5134 | ||
|
|
45cadcecc3 | ||
|
|
7b262c9db2 | ||
|
|
4e091c7f49 | ||
|
|
1310234803 | ||
|
|
8fd121a335 | ||
|
|
d183c5815b | ||
|
|
661f56e773 | ||
|
|
3c1b741c37 | ||
|
|
36fdc22634 | ||
|
|
5261a09381 | ||
|
|
25864dc3b6 | ||
|
|
09c2ec06d4 | ||
|
|
2378be571d | ||
|
|
59fd7ebceb | ||
|
|
e0d99a6b28 | ||
|
|
e4514505c3 | ||
|
|
f2c49b171e | ||
|
|
de9e304dd4 | ||
|
|
1fb57ad1ff | ||
|
|
65127ced7f | ||
|
|
5b1458b22f | ||
|
|
6f74be7092 | ||
|
|
1f9790e5f5 | ||
|
|
0b8ab9adfa | ||
|
|
a17d7a4182 | ||
|
|
4ef77fcf25 | ||
|
|
d204b459d9 | ||
|
|
6ae6645d3c | ||
|
|
a925ced533 | ||
|
|
8dcccef54d | ||
|
|
dff639e901 | ||
|
|
0376703fd2 | ||
|
|
7341ff11f3 | ||
|
|
57193beeab | ||
|
|
405e884e70 | ||
|
|
0d4e83c940 | ||
|
|
b8ed389f60 | ||
|
|
b308275d99 | ||
|
|
f9c715c72c | ||
|
|
e2b3118d9d | ||
|
|
f4c3a2b04f | ||
|
|
31a8957de9 | ||
|
|
46f20f61b5 | ||
|
|
dba5ab3ef3 | ||
|
|
2251bebee6 | ||
|
|
3ac9ffc73c | ||
|
|
c420ae467f | ||
|
|
8334fe5bcc | ||
|
|
f99edce6f4 | ||
|
|
f47acca703 | ||
|
|
73a6c6b920 | ||
|
|
672f7a0a7c | ||
|
|
de78fb2149 | ||
|
|
4a59e69bbe | ||
|
|
a442e13a7b | ||
|
|
4d093a4a80 | ||
|
|
7e59d8d36c | ||
|
|
8241077495 | ||
|
|
82b29a2f8b | ||
|
|
b789d80f98 | ||
|
|
a8c80e2366 | ||
|
|
bdbdd37789 | ||
|
|
c8fb5b9152 | ||
|
|
aef155e039 | ||
|
|
443573455b | ||
|
|
d811ab7dfa | ||
|
|
5f79ab6e6d | ||
|
|
502edbca5d | ||
|
|
1a04267cb7 | ||
|
|
9c2c1bdfa1 | ||
|
|
72e93f3768 | ||
|
|
e6f2066d42 | ||
|
|
2812c39524 | ||
|
|
491485856e | ||
|
|
abde7e176d | ||
|
|
bab8faadee | ||
|
|
427d72fb8b | ||
|
|
dc5b20a329 | ||
|
|
4cb934eef3 | ||
|
|
35e8cea0b5 |
51
.workflow/branch-pipeline.yml
Normal file
@@ -0,0 +1,51 @@
|
||||
version: '1.0'
|
||||
name: branch-pipeline
|
||||
displayName: BranchPipeline
|
||||
stages:
|
||||
- stage:
|
||||
name: compile
|
||||
displayName: 编译
|
||||
steps:
|
||||
- step: build@nodejs
|
||||
name: build_nodejs
|
||||
displayName: Nodejs 构建
|
||||
# 支持8.16.2、10.17.0、12.16.1、14.16.0、15.12.0五个版本
|
||||
nodeVersion: 14.16.0
|
||||
# 构建命令:安装依赖 -> 清除上次打包产物残留 -> 执行构建 【请根据项目实际产出进行填写】
|
||||
commands:
|
||||
- npm install && rm -rf ./dist && npm run build
|
||||
# 非必填字段,开启后表示将构建产物暂存,但不会上传到制品库中,7天后自动清除
|
||||
artifacts:
|
||||
# 构建产物名字,作为产物的唯一标识可向下传递,支持自定义,默认为BUILD_ARTIFACT。在下游可以通过${BUILD_ARTIFACT}方式引用来获取构建物地址
|
||||
- name: BUILD_ARTIFACT
|
||||
# 构建产物获取路径,是指代码编译完毕之后构建物的所在路径
|
||||
path:
|
||||
- ./dist
|
||||
- step: publish@general_artifacts
|
||||
name: publish_general_artifacts
|
||||
displayName: 上传制品
|
||||
# 上游构建任务定义的产物名,默认BUILD_ARTIFACT
|
||||
dependArtifact: BUILD_ARTIFACT
|
||||
# 上传到制品库时的制品命名,默认output
|
||||
artifactName: output
|
||||
dependsOn: build_nodejs
|
||||
- stage:
|
||||
name: release
|
||||
displayName: 发布
|
||||
steps:
|
||||
- step: publish@release_artifacts
|
||||
name: publish_release_artifacts
|
||||
displayName: '发布'
|
||||
# 上游上传制品任务的产出
|
||||
dependArtifact: output
|
||||
# 发布制品版本号
|
||||
version: '1.0.0.0'
|
||||
# 是否开启版本号自增,默认开启
|
||||
autoIncrement: true
|
||||
triggers:
|
||||
push:
|
||||
branches:
|
||||
exclude:
|
||||
- master
|
||||
include:
|
||||
- .*
|
||||
49
.workflow/master-pipeline.yml
Normal file
@@ -0,0 +1,49 @@
|
||||
version: '1.0'
|
||||
name: master-pipeline
|
||||
displayName: MasterPipeline
|
||||
stages:
|
||||
- stage:
|
||||
name: compile
|
||||
displayName: 编译
|
||||
steps:
|
||||
- step: build@nodejs
|
||||
name: build_nodejs
|
||||
displayName: Nodejs 构建
|
||||
# 支持8.16.2、10.17.0、12.16.1、14.16.0、15.12.0五个版本
|
||||
nodeVersion: 14.16.0
|
||||
# 构建命令:安装依赖 -> 清除上次打包产物残留 -> 执行构建 【请根据项目实际产出进行填写】
|
||||
commands:
|
||||
- npm install && rm -rf ./dist && npm run build
|
||||
# 非必填字段,开启后表示将构建产物暂存,但不会上传到制品库中,7天后自动清除
|
||||
artifacts:
|
||||
# 构建产物名字,作为产物的唯一标识可向下传递,支持自定义,默认为BUILD_ARTIFACT。在下游可以通过${BUILD_ARTIFACT}方式引用来获取构建物地址
|
||||
- name: BUILD_ARTIFACT
|
||||
# 构建产物获取路径,是指代码编译完毕之后构建物的所在路径
|
||||
path:
|
||||
- ./dist
|
||||
- step: publish@general_artifacts
|
||||
name: publish_general_artifacts
|
||||
displayName: 上传制品
|
||||
# 上游构建任务定义的产物名,默认BUILD_ARTIFACT
|
||||
dependArtifact: BUILD_ARTIFACT
|
||||
# 上传到制品库时的制品命名,默认output
|
||||
artifactName: output
|
||||
dependsOn: build_nodejs
|
||||
- stage:
|
||||
name: release
|
||||
displayName: 发布
|
||||
steps:
|
||||
- step: publish@release_artifacts
|
||||
name: publish_release_artifacts
|
||||
displayName: '发布'
|
||||
# 上游上传制品任务的产出
|
||||
dependArtifact: output
|
||||
# 发布制品版本号
|
||||
version: '1.0.0.0'
|
||||
# 是否开启版本号自增,默认开启
|
||||
autoIncrement: true
|
||||
triggers:
|
||||
push:
|
||||
branches:
|
||||
include:
|
||||
- master
|
||||
36
.workflow/pr-pipeline.yml
Normal file
@@ -0,0 +1,36 @@
|
||||
version: '1.0'
|
||||
name: pr-pipeline
|
||||
displayName: PRPipeline
|
||||
stages:
|
||||
- stage:
|
||||
name: compile
|
||||
displayName: 编译
|
||||
steps:
|
||||
- step: build@nodejs
|
||||
name: build_nodejs
|
||||
displayName: Nodejs 构建
|
||||
# 支持8.16.2、10.17.0、12.16.1、14.16.0、15.12.0五个版本
|
||||
nodeVersion: 14.16.0
|
||||
# 构建命令:安装依赖 -> 清除上次打包产物残留 -> 执行构建 【请根据项目实际产出进行填写】
|
||||
commands:
|
||||
- npm install && rm -rf ./dist && npm run build
|
||||
# 非必填字段,开启后表示将构建产物暂存,但不会上传到制品库中,7天后自动清除
|
||||
artifacts:
|
||||
# 构建产物名字,作为产物的唯一标识可向下传递,支持自定义,默认为BUILD_ARTIFACT。在下游可以通过${BUILD_ARTIFACT}方式引用来获取构建物地址
|
||||
- name: BUILD_ARTIFACT
|
||||
# 构建产物获取路径,是指代码编译完毕之后构建物的所在路径
|
||||
path:
|
||||
- ./dist
|
||||
- step: publish@general_artifacts
|
||||
name: publish_general_artifacts
|
||||
displayName: 上传制品
|
||||
# 上游构建任务定义的产物名,默认BUILD_ARTIFACT
|
||||
dependArtifact: BUILD_ARTIFACT
|
||||
# 上传到制品库时的制品命名,默认output
|
||||
artifactName: output
|
||||
dependsOn: build_nodejs
|
||||
triggers:
|
||||
pr:
|
||||
branches:
|
||||
include:
|
||||
- master
|
||||
158
README.md
@@ -1,30 +1,62 @@
|
||||
## 总览
|
||||
#### 总览
|
||||
<p align="center">
|
||||
<img src="readme/logo-t-y.png" alt="go-view" />
|
||||
</p>
|
||||
|
||||

|
||||
<h4 align="center">开源、精美、便捷的「数据可视化」低代码开发平台</h4>
|
||||
|
||||
GoView 是一个高效的拖拽式低代码数据可视化开发平台,将图表或页面元素封装为基础组件,无需编写代码即可制作数据大屏,减少心智负担。
|
||||
#### 长期赞助商
|
||||
<div>
|
||||
<div align="center" style="column-gap: 20px;">
|
||||
<a
|
||||
href="http://www.ccflow.org/?from=goviewGitee"
|
||||
target="_blank"
|
||||
style="
|
||||
padding: 10px 20px;
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
background: #f9f9f9;
|
||||
">
|
||||
<img src="readme/sponsors/ccflow-banner.png" alt="go-view" style="width: 250px;" width="250px" />
|
||||
</a>
|
||||
<span> </span>
|
||||
<a
|
||||
href="https://www.qeasy.cloud/"
|
||||
target="_blank"
|
||||
style="
|
||||
padding: 10px 20px;
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
background: #f9f9f9;
|
||||
">
|
||||
<img src="readme/sponsors/qyy-banner.png" alt="go-view" style="width: 250px;" width="250px"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### 😶 纯 **前端** 分支: **`master`**
|
||||
#### 😶 **纯前端** 分支: **`master`**
|
||||
|
||||
### 👻 携带 **后端** 请求分支: **`master-fetch`**
|
||||
#### 👻 携带 **后端** 请求分支: **`master-fetch`**
|
||||
|
||||
### 📚 GoView **文档** 地址:[http://www.mtruning.club:81/](http://www.mtruning.club:81/)
|
||||
#### 📚 GoView **文档** 地址:[https://www.mtruning.club/](https://www.mtruning.club/)
|
||||
|
||||
项目纯前端-Demo 地址:[https://www.mtruning.club](https://www.mtruning.club)
|
||||
项目纯前端-Demo 地址:[https://vue.mtruning.club/](https://vue.mtruning.club/)
|
||||
|
||||
项目带后端-Demo 地址:[后端 Demo 地址](http://1.117.240.165:8080/goview/#/login)
|
||||
项目带后端-Demo 地址:[https://demo.mtruning.club/](https://demo.mtruning.club/)
|
||||
|
||||
文档-在线地址:[http://www.mtruning.club:81/](http://www.mtruning.club:81/)
|
||||
Cloud IDE 代码在线预览地址:[https://idegitee.com/dromara/go-view](https://idegitee.com/dromara/go-view)
|
||||
|
||||
文档-源码地址:[https://gitee.com/MTrun/go-view-doc](https://gitee.com/MTrun/go-view-doc)
|
||||
#### 🤯 后端项目看这里!
|
||||
|
||||
### 🤯 后端项目
|
||||
后端项目 gitee 地址:[https://gitee.com/MTrun/go-view-serve](https://gitee.com/MTrun/go-view-serve)
|
||||
|
||||
后端项目gitee地址:[https://gitee.com/MTrun/go-view-serve](https://gitee.com/MTrun/go-view-serve)
|
||||
接口说明地址:[https://docs.apipost.cn/...](https://docs.apipost.cn/preview/5aa85d10a59d66ce/ddb813732007ad2b?target_id=84dbc5b0-158f-4bcb-8f74-793ac604ada3#3e053622-1e76-43f9-a039-756aee822dbb)
|
||||
|
||||
接口说明地址:[https://docs.apipost.cn/preview/5aa85d10a59d66ce/ddb813732007ad2b?target_id=84dbc5b0-158f-4bcb-8f74-793ac604ada3#3e053622-1e76-43f9-a039-756aee822dbb](https://docs.apipost.cn/preview/5aa85d10a59d66ce/ddb813732007ad2b?target_id=84dbc5b0-158f-4bcb-8f74-793ac604ada3#3e053622-1e76-43f9-a039-756aee822dbb)
|
||||
其它后端方案地址:
|
||||
|
||||
技术点:
|
||||
- 【.NET】[https://gitee.com/sun_xiang_yu/go-view-dotnet](https://gitee.com/sun_xiang_yu/go-view-dotnet)
|
||||
|
||||
#### 整体介绍
|
||||
|
||||
- 框架:基于 `Vue3` 框架编写,使用 `hooks` 写法抽离部分逻辑,使代码结构更加清晰;
|
||||
|
||||
@@ -36,17 +68,34 @@ GoView 是一个高效的拖拽式低代码数据可视化开发平台,将图
|
||||
|
||||
- 封装:项目进行了详细的工具类封装如:路由、存储、加/解密、文件处理、主题、NaiveUI 全局方法、组件等
|
||||
|
||||
- 入选 NaiveUI 社区精选资源推荐:[查看 NaiveUI 推荐列表](https://www.naiveui.com/zh-CN/light/docs/community)
|
||||
|
||||
说明文档:
|
||||

|
||||
|
||||
工作台:
|
||||

|
||||

|
||||
|
||||
请求配置:
|
||||

|
||||

|
||||
|
||||
数据过滤:
|
||||

|
||||

|
||||
|
||||
高级事件编辑:
|
||||

|
||||
|
||||
自定义组件颜色:
|
||||

|
||||
|
||||
快捷主页:
|
||||

|
||||
|
||||
主题色:
|
||||

|
||||

|
||||
|
||||
亮白主题:
|
||||

|
||||
|
||||
主要技术栈为:
|
||||
|
||||
@@ -66,14 +115,17 @@ GoView 是一个高效的拖拽式低代码数据可视化开发平台,将图
|
||||
|
||||
已完成图表:
|
||||
|
||||
| 分类 | 名称 | 名称 | 名称 |
|
||||
| ------ | ---------------- | ---------------- | -------- |
|
||||
| 图表 | 柱状图 | 横向柱状图 | 折线图 |
|
||||
| \* | 单/多 折线面积图 | 饼图 | 水球图 |
|
||||
| \* | 环形图 | NaiveUI 多种进度 | 🤠 |
|
||||
| 信息 | 文字 | 图片 | 😶 |
|
||||
| 列表 | 滚动排名列表 | 滚动表格 | 🤓 |
|
||||
| 小组件 | 边框-01~13 | 装饰-01~05 | 数字翻牌 |
|
||||
| 分类 | 名称 | 名称 | 名称 | 名称 |
|
||||
| ------ | ---------------- | ---------- | -------------- | ------------------------ |
|
||||
| 图表 | 柱状图 | 横向柱状图 | 折线图 | 单/多 折线面积图(渐变色) |
|
||||
| \* | 饼图 | 环形图 | 水球图 | 雷达图 |
|
||||
| \* | NaiveUI 多种进度 | 散点图 | 对数回归散点图 | 热力图 |
|
||||
| \* | 漏斗图 | 中国地图 | 高德地图 | 🦊 |
|
||||
| 信息 | 文字 | 渐变文字 | 词云 | 嵌套网页 |
|
||||
| \* | 图片 | 视频 | 😺 | 🐯 |
|
||||
| 列表 | 滚动排名列表 | 滚动表格 | 🐮 | 🐐 |
|
||||
| 小组件 | 边框-01~13 | 装饰-01~05 | 数字翻牌 | 通用时间 |
|
||||
| \* | 数字计数 | 倒计时 | 时钟 | 🦁 |
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
@@ -81,52 +133,7 @@ GoView 是一个高效的拖拽式低代码数据可视化开发平台,将图
|
||||
|
||||
## 安装
|
||||
|
||||
本项目采用` pnpm` 进行包管理
|
||||
|
||||
```shell
|
||||
#建议使用 nrm 切换到淘宝源 https://registry.npmmirror.com/
|
||||
#pnpm
|
||||
pnpm install
|
||||
|
||||
#yarn
|
||||
yarn install
|
||||
|
||||
#npm
|
||||
npm install
|
||||
```
|
||||
|
||||
## 启动
|
||||
|
||||
```shell
|
||||
#pnpm
|
||||
pnpm dev
|
||||
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
#yarn
|
||||
yarn dev
|
||||
|
||||
#Makefile
|
||||
make dev
|
||||
```
|
||||
|
||||
## 编译
|
||||
|
||||
```shell
|
||||
#pnpm
|
||||
pnpm run build
|
||||
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
#yarn
|
||||
yarn run build
|
||||
|
||||
#Makefile
|
||||
make dist
|
||||
|
||||
```
|
||||
请查看文档:[https://www.mtruning.club/](https://www.mtruning.club/)
|
||||
|
||||
## 代码提交
|
||||
|
||||
@@ -142,10 +149,9 @@ make dist
|
||||
- style: 不影响程序逻辑的代码修改
|
||||
- chore: 不属于以上类型的其他类型(日常事务)
|
||||
|
||||
## 交流
|
||||
## 交流群
|
||||
|
||||
QQ 群:1030129384
|
||||
|
||||

|
||||
QQ 群:663629294
|
||||
<img width="260px" src="readme/go-view-qq.png" alt="QQ群" style="border-radius: 20px" />
|
||||
|
||||

|
||||
|
||||
12
package.json
@@ -1,6 +1,9 @@
|
||||
{
|
||||
"name": "go-view",
|
||||
"version": "1.1.11",
|
||||
"version": "1.2.2",
|
||||
"engines": {
|
||||
"node": ">=12.0"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
@@ -21,6 +24,7 @@
|
||||
"axios": "^0.27.2",
|
||||
"color": "^4.2.3",
|
||||
"crypto-js": "^4.1.1",
|
||||
"dom-helpers": "^5.2.1",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"echarts-stat": "^1.2.0",
|
||||
"echarts-wordcloud": "^2.0.0",
|
||||
@@ -29,13 +33,13 @@
|
||||
"html2canvas": "^1.4.1",
|
||||
"keymaster": "^1.6.2",
|
||||
"monaco-editor": "^0.33.0",
|
||||
"naive-ui": "2.33.4",
|
||||
"naive-ui": "2.34.3",
|
||||
"pinia": "^2.0.13",
|
||||
"screenfull": "^6.0.1",
|
||||
"three": "^0.145.0",
|
||||
"vue": "^3.2.31",
|
||||
"vue-demi": "^0.13.1",
|
||||
"vue-i18n": "9.1.9",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-router": "4.0.12",
|
||||
"vue3-lazyload": "^0.2.5-beta",
|
||||
"vue3-sketch-ruler": "^1.3.3",
|
||||
@@ -78,4 +82,4 @@
|
||||
"vue-echarts": "^6.0.2",
|
||||
"vue-tsc": "^0.28.10"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
121
pnpm-lock.yaml
generated
@@ -25,6 +25,7 @@ specifiers:
|
||||
commitlint: ^17.0.2
|
||||
crypto-js: ^4.1.1
|
||||
default-passive-events: ^2.0.0
|
||||
dom-helpers: ^5.2.1
|
||||
echarts: ^5.3.2
|
||||
echarts-liquidfill: ^3.1.0
|
||||
echarts-stat: ^1.2.0
|
||||
@@ -42,7 +43,7 @@ specifiers:
|
||||
lodash: ~4.17.21
|
||||
mockjs: ^1.1.0
|
||||
monaco-editor: ^0.33.0
|
||||
naive-ui: 2.33.4
|
||||
naive-ui: 2.34.3
|
||||
pinia: ^2.0.13
|
||||
plop: ^3.0.5
|
||||
prettier: ^2.6.2
|
||||
@@ -59,7 +60,7 @@ specifiers:
|
||||
vue: ^3.2.31
|
||||
vue-demi: ^0.13.1
|
||||
vue-echarts: ^6.0.2
|
||||
vue-i18n: 9.1.9
|
||||
vue-i18n: ^9.2.2
|
||||
vue-router: 4.0.12
|
||||
vue-tsc: ^0.28.10
|
||||
vue3-lazyload: ^0.2.5-beta
|
||||
@@ -77,6 +78,7 @@ dependencies:
|
||||
axios: 0.27.2
|
||||
color: 4.2.3
|
||||
crypto-js: 4.1.1
|
||||
dom-helpers: 5.2.1
|
||||
echarts-liquidfill: 3.1.0_echarts@5.3.3
|
||||
echarts-stat: 1.2.0
|
||||
echarts-wordcloud: 2.0.0_echarts@5.3.3
|
||||
@@ -85,13 +87,13 @@ dependencies:
|
||||
html2canvas: 1.4.1
|
||||
keymaster: 1.6.2
|
||||
monaco-editor: 0.33.0
|
||||
naive-ui: 2.33.4_vue@3.2.37
|
||||
naive-ui: 2.34.3_vue@3.2.37
|
||||
pinia: 2.0.14_ub5l46u3nefphax5x2tezui4oq
|
||||
screenfull: 6.0.1
|
||||
three: 0.145.0
|
||||
vue: 3.2.37
|
||||
vue-demi: 0.13.1_vue@3.2.37
|
||||
vue-i18n: 9.1.9_vue@3.2.37
|
||||
vue-i18n: 9.2.2_vue@3.2.37
|
||||
vue-router: 4.0.12_vue@3.2.37
|
||||
vue3-lazyload: 0.2.5-beta_2yymnzrok6eda47acnj2yjm3ae
|
||||
vue3-sketch-ruler: 1.3.4_vue@3.2.37
|
||||
@@ -402,6 +404,13 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@babel/runtime/7.20.6:
|
||||
resolution: {integrity: sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
regenerator-runtime: 0.13.11
|
||||
dev: false
|
||||
|
||||
/@babel/template/7.16.7:
|
||||
resolution: {integrity: sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
@@ -671,60 +680,42 @@ packages:
|
||||
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
|
||||
dev: true
|
||||
|
||||
/@intlify/core-base/9.1.9:
|
||||
resolution: {integrity: sha512-x5T0p/Ja0S8hs5xs+ImKyYckVkL4CzcEXykVYYV6rcbXxJTe2o58IquSqX9bdncVKbRZP7GlBU1EcRaQEEJ+vw==}
|
||||
engines: {node: '>= 10'}
|
||||
/@intlify/core-base/9.2.2:
|
||||
resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
|
||||
engines: {node: '>= 14'}
|
||||
dependencies:
|
||||
'@intlify/devtools-if': 9.1.9
|
||||
'@intlify/message-compiler': 9.1.9
|
||||
'@intlify/message-resolver': 9.1.9
|
||||
'@intlify/runtime': 9.1.9
|
||||
'@intlify/shared': 9.1.9
|
||||
'@intlify/vue-devtools': 9.1.9
|
||||
'@intlify/devtools-if': 9.2.2
|
||||
'@intlify/message-compiler': 9.2.2
|
||||
'@intlify/shared': 9.2.2
|
||||
'@intlify/vue-devtools': 9.2.2
|
||||
dev: false
|
||||
|
||||
/@intlify/devtools-if/9.1.9:
|
||||
resolution: {integrity: sha512-oKSMKjttG3Ut/1UGEZjSdghuP3fwA15zpDPcjkf/1FjlOIm6uIBGMNS5jXzsZy593u+P/YcnrZD6cD3IVFz9vQ==}
|
||||
engines: {node: '>= 10'}
|
||||
/@intlify/devtools-if/9.2.2:
|
||||
resolution: {integrity: sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==}
|
||||
engines: {node: '>= 14'}
|
||||
dependencies:
|
||||
'@intlify/shared': 9.1.9
|
||||
'@intlify/shared': 9.2.2
|
||||
dev: false
|
||||
|
||||
/@intlify/message-compiler/9.1.9:
|
||||
resolution: {integrity: sha512-6YgCMF46Xd0IH2hMRLCssZI3gFG4aywidoWQ3QP4RGYQXQYYfFC54DxhSgfIPpVoPLQ+4AD29eoYmhiHZ+qLFQ==}
|
||||
engines: {node: '>= 10'}
|
||||
/@intlify/message-compiler/9.2.2:
|
||||
resolution: {integrity: sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==}
|
||||
engines: {node: '>= 14'}
|
||||
dependencies:
|
||||
'@intlify/message-resolver': 9.1.9
|
||||
'@intlify/shared': 9.1.9
|
||||
'@intlify/shared': 9.2.2
|
||||
source-map: 0.6.1
|
||||
dev: false
|
||||
|
||||
/@intlify/message-resolver/9.1.9:
|
||||
resolution: {integrity: sha512-Lx/DBpigeK0sz2BBbzv5mu9/dAlt98HxwbG7xLawC3O2xMF9MNWU5FtOziwYG6TDIjNq0O/3ZbOJAxwITIWXEA==}
|
||||
engines: {node: '>= 10'}
|
||||
/@intlify/shared/9.2.2:
|
||||
resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
|
||||
engines: {node: '>= 14'}
|
||||
dev: false
|
||||
|
||||
/@intlify/runtime/9.1.9:
|
||||
resolution: {integrity: sha512-XgPw8+UlHCiie3fI41HPVa/VDJb3/aSH7bLhY1hJvlvNV713PFtb4p4Jo+rlE0gAoMsMCGcsiT982fImolSltg==}
|
||||
engines: {node: '>= 10'}
|
||||
/@intlify/vue-devtools/9.2.2:
|
||||
resolution: {integrity: sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==}
|
||||
engines: {node: '>= 14'}
|
||||
dependencies:
|
||||
'@intlify/message-compiler': 9.1.9
|
||||
'@intlify/message-resolver': 9.1.9
|
||||
'@intlify/shared': 9.1.9
|
||||
dev: false
|
||||
|
||||
/@intlify/shared/9.1.9:
|
||||
resolution: {integrity: sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw==}
|
||||
engines: {node: '>= 10'}
|
||||
dev: false
|
||||
|
||||
/@intlify/vue-devtools/9.1.9:
|
||||
resolution: {integrity: sha512-YPehH9uL4vZcGXky4Ev5qQIITnHKIvsD2GKGXgqf+05osMUI6WSEQHaN9USRa318Rs8RyyPCiDfmA0hRu3k7og==}
|
||||
engines: {node: '>= 10'}
|
||||
dependencies:
|
||||
'@intlify/message-resolver': 9.1.9
|
||||
'@intlify/runtime': 9.1.9
|
||||
'@intlify/shared': 9.1.9
|
||||
'@intlify/core-base': 9.2.2
|
||||
'@intlify/shared': 9.2.2
|
||||
dev: false
|
||||
|
||||
/@jridgewell/gen-mapping/0.1.1:
|
||||
@@ -889,6 +880,10 @@ packages:
|
||||
resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
|
||||
dev: true
|
||||
|
||||
/@types/katex/0.14.0:
|
||||
resolution: {integrity: sha512-+2FW2CcT0K3P+JMR8YG846bmDwplKUTsWgT2ENwdQ1UdVfRk3GQrh6Mi4sTopy30gI8Uau5CEqHTDZ6YvWIUPA==}
|
||||
dev: false
|
||||
|
||||
/@types/keymaster/1.6.30:
|
||||
resolution: {integrity: sha512-mtL/NuDBX72zmyIa3cYHA1bQj1WAYlSC4eZcIQj+DHJkcRyTRF2XJXo7DBmkkY8TEq7XaAf7B8TGxs5PHhjRtw==}
|
||||
dev: false
|
||||
@@ -1219,6 +1214,10 @@ packages:
|
||||
resolution: {integrity: sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==}
|
||||
dev: false
|
||||
|
||||
/@vue/devtools-api/6.4.5:
|
||||
resolution: {integrity: sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==}
|
||||
dev: false
|
||||
|
||||
/@vue/reactivity-transform/3.2.37:
|
||||
resolution: {integrity: sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==}
|
||||
dependencies:
|
||||
@@ -1912,7 +1911,7 @@ packages:
|
||||
dev: true
|
||||
|
||||
/csstype/2.6.20:
|
||||
resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/csstype/-/csstype-2.6.20.tgz}
|
||||
resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
|
||||
dev: false
|
||||
|
||||
/csstype/3.0.11:
|
||||
@@ -2065,6 +2064,13 @@ packages:
|
||||
resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==}
|
||||
dev: true
|
||||
|
||||
/dom-helpers/5.2.1:
|
||||
resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.20.6
|
||||
csstype: 3.0.11
|
||||
dev: false
|
||||
|
||||
/dom-serializer/1.4.1:
|
||||
resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
|
||||
dependencies:
|
||||
@@ -3830,13 +3836,14 @@ packages:
|
||||
resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
|
||||
dev: true
|
||||
|
||||
/naive-ui/2.33.4_vue@3.2.37:
|
||||
resolution: {integrity: sha512-4tK2lWx3v8sbEeTLG/tL5Ur9VvZyUxSnC0VcTO6NO1rM/D15JXg8jVwQCRFYnEp7mp3gfD5B3i8kN4JisTeiFA==}
|
||||
/naive-ui/2.34.3_vue@3.2.37:
|
||||
resolution: {integrity: sha512-fUMr0dzb/iGsOTWgoblPVobY5X5dihQ1eam5dA+H74oyLYAvgX4pL96xQFPBLIYqvyRFBAsN85kHN5pLqdtpxA==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.0
|
||||
dependencies:
|
||||
'@css-render/plugin-bem': 0.15.10_css-render@0.15.10
|
||||
'@css-render/vue3-ssr': 0.15.10_vue@3.2.37
|
||||
'@types/katex': 0.14.0
|
||||
'@types/lodash': 4.14.185
|
||||
'@types/lodash-es': 4.17.6
|
||||
async-validator: 4.1.1
|
||||
@@ -4462,6 +4469,10 @@ packages:
|
||||
strip-indent: 3.0.0
|
||||
dev: true
|
||||
|
||||
/regenerator-runtime/0.13.11:
|
||||
resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
|
||||
dev: false
|
||||
|
||||
/regexp.prototype.flags/1.4.3:
|
||||
resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
|
||||
engines: {node: '>= 0.4'}
|
||||
@@ -5385,16 +5396,16 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/vue-i18n/9.1.9_vue@3.2.37:
|
||||
resolution: {integrity: sha512-JeRdNVxS2OGp1E+pye5XB6+M6BBkHwAv9C80Q7+kzoMdUDGRna06tjC0vCB/jDX9aWrl5swxOMFcyAr7or8XTA==}
|
||||
engines: {node: '>= 10'}
|
||||
/vue-i18n/9.2.2_vue@3.2.37:
|
||||
resolution: {integrity: sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==}
|
||||
engines: {node: '>= 14'}
|
||||
peerDependencies:
|
||||
vue: ^3.0.0
|
||||
dependencies:
|
||||
'@intlify/core-base': 9.1.9
|
||||
'@intlify/shared': 9.1.9
|
||||
'@intlify/vue-devtools': 9.1.9
|
||||
'@vue/devtools-api': 6.1.4
|
||||
'@intlify/core-base': 9.2.2
|
||||
'@intlify/shared': 9.2.2
|
||||
'@intlify/vue-devtools': 9.2.2
|
||||
'@vue/devtools-api': 6.4.5
|
||||
vue: 3.2.37
|
||||
dev: false
|
||||
|
||||
|
||||
10
preview.yml
Normal file
@@ -0,0 +1,10 @@
|
||||
# preview.yml
|
||||
autoOpen: true # 打开工作空间时是否自动开启所有应用的预览
|
||||
apps:
|
||||
- port: 3000 # 应用的端口
|
||||
run: npm i --registry=https://registry.npmmirror.com && npm run dev # 应用的启动命令
|
||||
command: # 使用此命令启动服务,且不执行run
|
||||
root: ./ # 应用的启动目录
|
||||
name: GoView # 应用名称
|
||||
description: 开源、精美、便捷的「数据可视化」低代码开发平台 # 应用描述
|
||||
autoOpen: true # 打开工作空间时是否自动开启预览(优先级高于根级 autoOpen)
|
||||
BIN
readme/go-view-doc.png
Normal file
|
After Width: | Height: | Size: 159 KiB |
BIN
readme/go-view-echarts-color.png
Normal file
|
After Width: | Height: | Size: 292 KiB |
BIN
readme/go-view-indexpage.png
Normal file
|
After Width: | Height: | Size: 167 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 70 KiB |
BIN
readme/go-view-theme.png
Normal file
|
After Width: | Height: | Size: 404 KiB |
BIN
readme/sponsors/ccflow-banner.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
readme/sponsors/qyy-banner.png
Normal file
|
After Width: | Height: | Size: 38 KiB |
@@ -21,6 +21,7 @@ axiosInstance.interceptors.request.use(
|
||||
axiosInstance.interceptors.response.use(
|
||||
(res: AxiosResponse) => {
|
||||
const { code } = res.data as { code: number }
|
||||
if (code === undefined || code === null) return Promise.resolve(res)
|
||||
if (code === ResultEnum.DATA_SUCCESS) return Promise.resolve(res.data)
|
||||
// 重定向
|
||||
if (ErrorPageNameMap.get(code)) redirectErrorPage(code)
|
||||
|
||||
@@ -172,7 +172,9 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
|
||||
|
||||
case RequestBodyEnum.JSON:
|
||||
headers['Content-Type'] = ContentTypeEnum.JSON
|
||||
data = translateStr(JSON.parse(targetRequestParams.Body['json']))
|
||||
//json对象也能使用'javasctipt:'来动态拼接参数
|
||||
data = translateStr(targetRequestParams.Body['json'])
|
||||
if(typeof data === 'string') data = JSON.parse(data)
|
||||
// json 赋值给 data
|
||||
break
|
||||
|
||||
|
||||
@@ -10,8 +10,8 @@ export default {
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: {
|
||||
dimensions: ['product', 'dataOne'],
|
||||
'source|50': [
|
||||
dimensions: ['product', 'dataOne'],
|
||||
'source|20': [
|
||||
{
|
||||
product: '@name',
|
||||
'dataOne|0-900': 3
|
||||
@@ -26,12 +26,8 @@ export default {
|
||||
msg: '请求成功',
|
||||
data: {
|
||||
dimensions: ['name', 'value'],
|
||||
source: [
|
||||
{ name: '厦门', 'value|0-40': 20 },
|
||||
{ name: '南阳', 'value|20-60': 40 },
|
||||
{ name: '北京', 'value|40-80': 60 },
|
||||
{ name: '上海', 'value|60-100': 80 },
|
||||
{ name: '新疆', value: 100 }
|
||||
"source|2-5": [
|
||||
{ 'name|+1': ["厦门","福州","北京","上海","新疆","郑州","湖南","内蒙古"], 'value|0-40': 20 },
|
||||
]
|
||||
}
|
||||
},
|
||||
@@ -41,12 +37,13 @@ export default {
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: {
|
||||
dimensions: ['product', 'dataOne', 'dataTwo'],
|
||||
'source|50': [
|
||||
dimensions: ['product', 'dataOne', 'dataTwo', 'dataThree'],
|
||||
'source|20': [
|
||||
{
|
||||
product: '@name',
|
||||
'dataOne|100-900': 3,
|
||||
'dataTwo|100-900': 3
|
||||
'dataTwo|100-900': 3,
|
||||
'dataThree|100-900': 3
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
BIN
src/assets/images/chart/informations/photo_carousel.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
@@ -14,16 +14,19 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useLangStore } from '@/store/modules/langStore/langStore'
|
||||
import { langList } from '@/i18n/index'
|
||||
import { LangEnum } from '@/enums/styleEnum'
|
||||
import { icon } from '@/plugins'
|
||||
|
||||
const { LanguageIcon } = icon.ionicons5
|
||||
const { locale } = useI18n();
|
||||
const langStore = useLangStore()
|
||||
const options = langList
|
||||
|
||||
const handleSelect = (key: LangEnum) => {
|
||||
locale.value = key;
|
||||
langStore.changeLang(key)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-modal v-model:show="modelShow" @afterLeave="closeHandle">
|
||||
<n-modal v-model:show="modelShowRef" @afterLeave="closeHandle">
|
||||
<n-list bordered class="go-system-info">
|
||||
<template #header>
|
||||
<n-space justify="space-between">
|
||||
@@ -51,10 +51,10 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(['update:modelShow'])
|
||||
const { HelpOutlineIcon, CloseIcon } = icon.ionicons5
|
||||
const modelShow = ref(false)
|
||||
const modelShowRef = ref(false)
|
||||
|
||||
watch(() => props.modelShow, (newValue) => {
|
||||
modelShow.value = newValue
|
||||
modelShowRef.value = newValue
|
||||
})
|
||||
|
||||
const closeHandle = () => {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-modal v-model:show="modelShow" @afterLeave="closeHandle">
|
||||
<n-modal v-model:show="modelShowRef" @afterLeave="closeHandle">
|
||||
<n-list bordered class="go-system-setting">
|
||||
<template #header>
|
||||
<n-space justify="space-between">
|
||||
@@ -82,7 +82,7 @@ const props = defineProps({
|
||||
const emit = defineEmits(['update:modelShow'])
|
||||
const { HelpOutlineIcon, CloseIcon } = icon.ionicons5
|
||||
const settingStore = useSettingStore()
|
||||
const modelShow = ref(false)
|
||||
const modelShowRef = ref(false)
|
||||
|
||||
const list = reactive<ListType[]>([
|
||||
{
|
||||
@@ -168,7 +168,7 @@ const list = reactive<ListType[]>([
|
||||
])
|
||||
|
||||
watch(() => props.modelShow, (newValue) => {
|
||||
modelShow.value = newValue
|
||||
modelShowRef.value = newValue
|
||||
})
|
||||
|
||||
const closeHandle = () => {
|
||||
|
||||
3
src/components/Pages/ChartGlobImage/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import ChartGlobImage from './index.vue'
|
||||
|
||||
export { ChartGlobImage }
|
||||
31
src/components/Pages/ChartGlobImage/index.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<img class="list-img" v-lazy="imageInfo" alt="图表图片" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, PropType, watch } from 'vue'
|
||||
import { fetchImages } from '@/packages'
|
||||
import { ConfigType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<ConfigType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const imageInfo = ref('')
|
||||
|
||||
// 获取图片
|
||||
const fetchImageUrl = async () => {
|
||||
imageInfo.value = await fetchImages(props.chartConfig)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.key,
|
||||
() => fetchImageUrl(),
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
@@ -12,7 +12,8 @@ export enum DragKeyEnum {
|
||||
// 不同页面保存操作
|
||||
export enum SavePageEnum {
|
||||
CHART = 'SaveChart',
|
||||
JSON = 'SaveJSON'
|
||||
JSON = 'SaveJSON',
|
||||
CLOSE = 'close'
|
||||
}
|
||||
|
||||
// 操作枚举
|
||||
@@ -67,7 +68,8 @@ export enum WinKeyboard {
|
||||
ALT = ' alt',
|
||||
CTRL_SOURCE_KEY = 'control',
|
||||
SHIFT_SOURCE_KEY = 'shift',
|
||||
ALT_SOURCE_KEY = 'alt'
|
||||
ALT_SOURCE_KEY = 'alt',
|
||||
SPACE = 'Space'
|
||||
}
|
||||
|
||||
// Mac 键盘枚举
|
||||
@@ -78,5 +80,6 @@ export enum MacKeyboard {
|
||||
ALT = '⌥',
|
||||
CTRL_SOURCE_KEY = '⌘',
|
||||
SHIFT_SOURCE_KEY = '⇧',
|
||||
ALT_SOURCE_KEY = '⌥'
|
||||
ALT_SOURCE_KEY = '⌥',
|
||||
SPACE = 'Space'
|
||||
}
|
||||
|
||||
36
src/enums/eventEnum.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
// 基础事件类型(vue不加 on)
|
||||
export enum BaseEvent {
|
||||
// 点击
|
||||
ON_CLICK = 'click',
|
||||
// 双击
|
||||
ON_DBL_CLICK = 'dblclick',
|
||||
// 移入
|
||||
ON_MOUSE_ENTER = 'mouseenter',
|
||||
// 移出
|
||||
ON_MOUSE_LEAVE = 'mouseleave'
|
||||
}
|
||||
|
||||
// vue3 生命周期事件
|
||||
export enum EventLife {
|
||||
// 渲染之后
|
||||
VNODE_MOUNTED = 'vnodeMounted',
|
||||
// 渲染之前
|
||||
VNODE_BEFORE_MOUNT = 'vnodeBeforeMount'
|
||||
}
|
||||
|
||||
// 内置字符串函数对象列表
|
||||
export const excludeParseEventKeyList = [
|
||||
EventLife.VNODE_BEFORE_MOUNT,
|
||||
EventLife.VNODE_MOUNTED,
|
||||
BaseEvent.ON_CLICK,
|
||||
BaseEvent.ON_DBL_CLICK,
|
||||
BaseEvent.ON_MOUSE_ENTER,
|
||||
BaseEvent.ON_MOUSE_LEAVE,
|
||||
//过滤器
|
||||
'filter'
|
||||
]
|
||||
// 内置字符串函数键值列表
|
||||
export const excludeParseEventValueList = [
|
||||
// 请求里的函数语句
|
||||
'javascript:'
|
||||
]
|
||||
@@ -6,6 +6,7 @@ import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { RequestDataTypeEnum } from '@/enums/httpEnum'
|
||||
import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils'
|
||||
import { setOption } from '@/packages/public/chart'
|
||||
|
||||
// 获取类型
|
||||
type ChartEditStoreType = typeof useChartEditStore
|
||||
@@ -34,7 +35,7 @@ export const useChartDataFetch = (
|
||||
const echartsUpdateHandle = (dataset: any) => {
|
||||
if (chartFrame === ChartFrameEnum.ECHARTS) {
|
||||
if (vChartRef.value) {
|
||||
vChartRef.value.setOption({ dataset: dataset })
|
||||
setOption(vChartRef.value, { dataset: dataset })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { CreateComponentType, CreateComponentGroupType, EventLife, BaseEvent } from '@/packages/index.d'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { EventLife } from '@/enums/eventEnum'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
// 所有图表组件集合对象
|
||||
|
||||
@@ -23,6 +23,8 @@ export const langList = [
|
||||
]
|
||||
|
||||
const i18n = createI18n({
|
||||
legacy: false,
|
||||
globalInjection:true,
|
||||
locale: langStorage?.lang || lang,
|
||||
fallbackLocale: langStorage?.lang || lang,
|
||||
messages: {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<n-layout-header bordered class="go-header">
|
||||
<header class="go-header-box">
|
||||
<header class="go-header-box" :class="{ 'is-project': isProject }">
|
||||
<div class="header-item left">
|
||||
<n-space>
|
||||
<slot name="left"></slot>
|
||||
@@ -23,17 +23,29 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { GoThemeSelect } from '@/components/GoThemeSelect'
|
||||
import { GoLangSelect } from '@/components/GoLangSelect'
|
||||
import { ThemeColorSelect } from '@/components/Pages/ThemeColorSelect'
|
||||
import { PageEnum } from '@/enums/pageEnum'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const isProject = computed(() => {
|
||||
return route.fullPath === PageEnum.BASE_HOME_ITEMS
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$min-width: 400px;
|
||||
$min-width: 520px;
|
||||
@include go(header) {
|
||||
&-box {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 33.33%);
|
||||
grid-template-columns: repeat(3, 33%);
|
||||
&.is-project {
|
||||
grid-template-columns: none;
|
||||
}
|
||||
.header-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -49,7 +61,7 @@ $min-width: 400px;
|
||||
}
|
||||
}
|
||||
height: $--header-height;
|
||||
padding: 0 60px;
|
||||
padding: 0 20px 0 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,7 +3,7 @@ import App from './App.vue'
|
||||
import router, { setupRouter } from '@/router'
|
||||
import i18n from '@/i18n/index'
|
||||
import { setupStore } from '@/store'
|
||||
import { setupNaive, setupDirectives, setupCustomComponents } from '@/plugins'
|
||||
import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins'
|
||||
import { GoAppProvider } from '@/components/GoAppProvider/index'
|
||||
import { setHtmlTheme } from '@/utils'
|
||||
|
||||
@@ -53,4 +53,7 @@ async function appInit() {
|
||||
window['$vue'] = app
|
||||
}
|
||||
|
||||
void appInit()
|
||||
appInit().then(() => {
|
||||
initFunction()
|
||||
})
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/charts/bar_x.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const BarCommonConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.BAR,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image
|
||||
image: 'bar_x.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/charts/bar_y.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const BarCrossrangeConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.BAR,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image
|
||||
image: 'bar_y.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/charts/capsule.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const CapsuleChartConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.BAR,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
image: 'capsule.png'
|
||||
}
|
||||
|
||||
@@ -111,34 +111,39 @@ watch(
|
||||
}
|
||||
)
|
||||
|
||||
const calcData = (data: any) => {
|
||||
mergeConfig(props.chartConfig.option)
|
||||
calcCapsuleLengthAndLabelData()
|
||||
}
|
||||
|
||||
const mergeConfig = (data: any) => {
|
||||
state.mergedConfig = cloneDeep(data || {})
|
||||
const calcData = (data: any, type?: string) => {
|
||||
let cloneConfig = cloneDeep(props.chartConfig.option || {})
|
||||
state.mergedConfig = cloneConfig
|
||||
if (type == 'preview') {
|
||||
cloneConfig.dataset = data
|
||||
}
|
||||
calcCapsuleLengthAndLabelData(state.mergedConfig.dataset)
|
||||
}
|
||||
|
||||
// 数据解析
|
||||
const calcCapsuleLengthAndLabelData = () => {
|
||||
const { source } = state.mergedConfig.dataset
|
||||
if (!source.length) return
|
||||
const calcCapsuleLengthAndLabelData = (dataset: any) => {
|
||||
try {
|
||||
const { source } = dataset
|
||||
if (!source || !source.length) return
|
||||
|
||||
state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
|
||||
const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]])
|
||||
state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
|
||||
const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]])
|
||||
|
||||
const maxValue = Math.max(...capsuleValue)
|
||||
const maxValue = Math.max(...capsuleValue)
|
||||
|
||||
state.capsuleValue = capsuleValue
|
||||
state.capsuleValue = capsuleValue
|
||||
|
||||
state.capsuleLength = capsuleValue.map((v: any) => (maxValue ? v / maxValue : 0))
|
||||
state.capsuleLength = capsuleValue.map((v: any) => (maxValue ? v / maxValue : 0))
|
||||
|
||||
const oneFifth = maxValue / 5
|
||||
const oneFifth = maxValue / 5
|
||||
|
||||
const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
|
||||
const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
|
||||
|
||||
state.labelData = labelData
|
||||
state.labelData = labelData
|
||||
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
}
|
||||
}
|
||||
|
||||
const numberSizeHandle = (val: string | number) => {
|
||||
@@ -151,7 +156,7 @@ onMounted(() => {
|
||||
|
||||
// 预览
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
calcData(newData)
|
||||
calcData(newData, 'preview')
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LineCommonConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/charts/line.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const LineCommonConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.LINE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image
|
||||
image: 'line.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/charts/line_gradient_single.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const LineGradientSingleConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.LINE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image
|
||||
image: 'line_gradient_single.png'
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { isPreview } from '@/utils'
|
||||
import { isPreview, colorGradientCustomMerge} from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@@ -45,7 +45,9 @@ watch(
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/charts/line_gradient.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const LineGradientsConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.LINE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image
|
||||
image: 'line_gradient.png'
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { isPreview } from '@/utils'
|
||||
import { isPreview, colorGradientCustomMerge} from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@@ -44,7 +44,9 @@ watch(
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/charts/line_linear_single.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const LineLinearSingleConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.LINE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image
|
||||
image: 'line_linear_single.png'
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { isPreview } from '@/utils'
|
||||
import { isPreview, colorGradientCustomMerge } from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@@ -45,7 +45,9 @@ watch(
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any) => {
|
||||
value.lineStyle.shadowColor = themeColor[2]
|
||||
value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => {
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import image from '@/assets/images/chart/charts/map_amap.png'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const MapAmapConfig: ConfigType = {
|
||||
@@ -11,5 +10,5 @@ export const MapAmapConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.MAP,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
image: 'map_amap.png'
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import image from '@/assets/images/chart/charts/map.png'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const MapBaseConfig: ConfigType = {
|
||||
@@ -11,5 +10,5 @@ export const MapBaseConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.MAP,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
}
|
||||
image: 'map.png'
|
||||
}
|
||||
@@ -11,7 +11,7 @@ import { use, registerMap } from 'echarts/core'
|
||||
import { EffectScatterChart, MapChart } from 'echarts/charts'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { mergeTheme, setOption } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
|
||||
@@ -59,13 +59,14 @@ const getGeojson = (regionId: string) => {
|
||||
}
|
||||
|
||||
//异步时先注册空的 保证初始化不报错
|
||||
registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
|
||||
registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
|
||||
|
||||
// 进行更换初始化地图 如果为china 单独处理
|
||||
const registerMapInitAsync = async () => {
|
||||
await nextTick()
|
||||
if (props.chartConfig.option.mapRegion.adcode != 'china') {
|
||||
await getGeojson(props.chartConfig.option.mapRegion.adcode)
|
||||
const adCode = `${props.chartConfig.option.mapRegion.adcode}`;
|
||||
if (adCode !== 'china') {
|
||||
await getGeojson(adCode)
|
||||
} else {
|
||||
await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
|
||||
}
|
||||
@@ -76,7 +77,7 @@ registerMapInitAsync()
|
||||
// 手动触发渲染
|
||||
const vEchartsSetOption = () => {
|
||||
option.value = props.chartConfig.option
|
||||
vChartRef.value?.setOption(props.chartConfig.option)
|
||||
setOption(vChartRef.value, props.chartConfig.option)
|
||||
}
|
||||
|
||||
// 更新数据处理
|
||||
@@ -127,7 +128,7 @@ watch(
|
||||
|
||||
//监听地图展示区域发生变化
|
||||
watch(
|
||||
() => props.chartConfig.option.mapRegion.adcode,
|
||||
() => `${props.chartConfig.option.mapRegion.adcode}`,
|
||||
async newData => {
|
||||
try {
|
||||
await getGeojson(newData)
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/charts/funnel.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const FunnelConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image
|
||||
image: 'funnel.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/charts/heatmap.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const HeatmapConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
image: 'heatmap.png'
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { HeatmapChart } from 'echarts/charts'
|
||||
import { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { mergeTheme, setOption } from '@/packages/public/chart'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
@@ -68,7 +68,7 @@ const dataSetHandle = (dataset: typeof dataJson) => {
|
||||
props.chartConfig.option.series[0].data = seriesData
|
||||
}
|
||||
if (vChartRef.value && isPreview()) {
|
||||
vChartRef.value.setOption(props.chartConfig.option)
|
||||
setOption(vChartRef.value, props.chartConfig.option)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
// 展示图片
|
||||
import image from '@/assets/images/chart/charts/process.png'
|
||||
// 公共类型声明
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
// 当前[信息模块]分类声明
|
||||
@@ -21,5 +19,5 @@ export const ProcessConfig: ConfigType = {
|
||||
// 包分类
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
// 图片
|
||||
image: image
|
||||
image: 'process.png'
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/charts/radar.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const RadarConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
image: 'radar.png'
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { RadarChart } from 'echarts/charts'
|
||||
import { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { mergeTheme, setOption } from '@/packages/public/chart'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
@@ -50,7 +50,7 @@ const dataSetHandle = (dataset: typeof dataJson) => {
|
||||
props.chartConfig.option.radar.indicator = dataset.radarIndicator
|
||||
}
|
||||
if (vChartRef.value && isPreview()) {
|
||||
vChartRef.value.setOption(props.chartConfig.option)
|
||||
setOption(vChartRef.value, props.chartConfig.option)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/charts/tree_map.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const TreeMapConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
image: 'tree_map.png'
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { TreemapChart } from 'echarts/charts'
|
||||
import { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { mergeTheme, setOption } from '@/packages/public/chart'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
@@ -42,7 +42,7 @@ const option = computed(() => {
|
||||
const dataSetHandle = (dataset: typeof dataJson) => {
|
||||
if (dataset) {
|
||||
props.chartConfig.option.series[0].data = dataset
|
||||
vChartRef.value?.setOption(props.chartConfig.option)
|
||||
setOption(vChartRef.value, props.chartConfig.option)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/charts/water_WaterPolo.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const WaterPoloConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
image: 'water_WaterPolo.png'
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ import 'echarts-liquidfill/src/liquidFill.js'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { GridComponent } from 'echarts/components'
|
||||
import config from './config'
|
||||
import { isPreview, isString, isNumber } from '@/utils'
|
||||
import { isPreview, isString, isNumber, colorGradientCustomMerge } from '@/utils'
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
@@ -44,7 +44,9 @@ watch(
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
// 背景颜色
|
||||
props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
|
||||
// 水球颜色
|
||||
|
||||
@@ -11,5 +11,5 @@ export const PieCircleConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.PIE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image
|
||||
image: 'pie-circle.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/charts/pie.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const PieCommonConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.PIE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image
|
||||
image: 'pie.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/charts/scatter-multi.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const ScatterCommonConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.SCATTER,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image
|
||||
image: 'scatter-multi.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/charts/scatter-logarithmic-regression.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const ScatterLogarithmicRegressionConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.SCATTER,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image
|
||||
image: 'scatter-logarithmic-regression.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/border01.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Border01Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'border01.png'
|
||||
}
|
||||
|
||||
@@ -10,5 +10,5 @@ export const Border02Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'border02.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/border03.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Border03Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'border03.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/border04.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Border04Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'border04.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/border05.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Border05Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'border05.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/border06.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Border06Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'border06.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/border07.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Border07Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'border07.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/border08.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Border08Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'border08.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/border09.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Border09Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'border09.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/border10.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Border10Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'border10.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/border11.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Border11Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'border11.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/border12.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Border12Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'border12.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/border13.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Border13Config: ConfigType = {
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'border13.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/decorates01.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Decorates01Config: ConfigType = {
|
||||
category: ChatCategoryEnum.DECORATE,
|
||||
categoryName: ChatCategoryEnumName.DECORATE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'decorates01.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/decorates02.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Decorates02Config: ConfigType = {
|
||||
category: ChatCategoryEnum.DECORATE,
|
||||
categoryName: ChatCategoryEnumName.DECORATE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'decorates02.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/decorates03.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Decorates03Config: ConfigType = {
|
||||
category: ChatCategoryEnum.DECORATE,
|
||||
categoryName: ChatCategoryEnumName.DECORATE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'decorates01.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/decorates04.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const Decorates04Config: ConfigType = {
|
||||
category: ChatCategoryEnum.DECORATE,
|
||||
categoryName: ChatCategoryEnumName.DECORATE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'decorates04.png'
|
||||
}
|
||||
|
||||
@@ -10,5 +10,5 @@ export const Decorates05Config: ConfigType = {
|
||||
category: ChatCategoryEnum.DECORATE,
|
||||
categoryName: ChatCategoryEnumName.DECORATE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'decorates05.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/decorates06.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const Decorates06Config: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.DECORATE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
image: 'decorates06.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/clock.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const ClockConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image
|
||||
image: 'clock.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/countdown.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const CountDownConfig: ConfigType = {
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'countdown.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/flipper-number.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const FlipperNumberConfig: ConfigType = {
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'flipper-number.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/number.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const NumberConfig: ConfigType = {
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'number.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/time.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -10,5 +9,5 @@ export const TimeCommonConfig: ConfigType = {
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
image: 'time.png'
|
||||
}
|
||||
|
||||
@@ -26,7 +26,7 @@ let yearMonthDay = ref('2021-2-3')
|
||||
let nowData = ref('08:00:00')
|
||||
let newData = ref('2021-2-3 08:00:00')
|
||||
let boxShadow = ref('none')
|
||||
|
||||
let timer: any = null
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
|
||||
let {
|
||||
@@ -60,7 +60,7 @@ watch(
|
||||
}
|
||||
)
|
||||
onMounted(() => {
|
||||
const timer = setInterval(() => {
|
||||
timer = setInterval(() => {
|
||||
var datetime = new Date()
|
||||
var year = datetime.getFullYear()
|
||||
var month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
|
||||
@@ -81,7 +81,7 @@ onMounted(() => {
|
||||
}, 500)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearInterval()
|
||||
clearInterval(timer)
|
||||
})
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore)
|
||||
</script>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/decorates/threeEarth01.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const ThreeEarth01Config: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.THREE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image
|
||||
image: 'threeEarth01.png'
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@ watch(
|
||||
// DOM 渲染之后进行初始化
|
||||
onMounted(() => {
|
||||
try {
|
||||
if (navigator.userAgent.indexOf('Chrome') < -1 || navigator.userAgent.indexOf('Edg') > -1) {
|
||||
if (navigator.userAgent.indexOf('Chrome') < -1 || navigator.userAgent.indexOf('Edg') < -1) {
|
||||
window['$message'].error('三维地图组件仅在【谷歌】浏览器上能正常展示!')
|
||||
chartEditStore.removeComponentList(undefined, false)
|
||||
return
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { CarouselConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import logo from '@/assets/logo.png'
|
||||
|
||||
// 示例图片资源
|
||||
const modules = import.meta.globEager("./images/*");
|
||||
const dataset = [logo]
|
||||
for (var item in modules) {
|
||||
dataset.push(modules[item].default)
|
||||
}
|
||||
|
||||
export const option = {
|
||||
// 图片资源列表
|
||||
dataset: dataset,
|
||||
// 自动播放
|
||||
autoplay: true,
|
||||
// 自动播放的间隔(ms)
|
||||
interval: 5000,
|
||||
// 每页显示的图片数量
|
||||
slidesPerview: 1,
|
||||
// 轮播方向
|
||||
direction: "horizontal",
|
||||
// 拖曳切换
|
||||
draggable: true,
|
||||
// 居中显示
|
||||
centeredSlides: false,
|
||||
// 过渡效果
|
||||
effect: "slide",
|
||||
// 是否显示指示点
|
||||
showDots: true,
|
||||
// 指示器样式
|
||||
dotType: "dot",
|
||||
// 指示器位置
|
||||
dotPlacement: "bottom",
|
||||
// 显示箭头
|
||||
showArrow: false,
|
||||
// 图片样式
|
||||
fit: "contain",
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = CarouselConfig.key
|
||||
public chartConfig = cloneDeep(CarouselConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
176
src/packages/components/Informations/Mores/Carousel/config.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<collapse-item name="属性" :expanded="true">
|
||||
<setting-item-box name="路径" :alone="true">
|
||||
<setting-item v-for="item, index in optionData.dataset" :key="index">
|
||||
<n-input-group>
|
||||
<n-input v-model:value="optionData.dataset[index]" size="small" placeholder="请输入图片地址"></n-input>
|
||||
<n-button ghost @click="optionData.dataset.splice(index, 1)">
|
||||
-
|
||||
</n-button>
|
||||
</n-input-group>
|
||||
</setting-item>
|
||||
<setting-item>
|
||||
<n-button size="small" @click="optionData.dataset.push('')">
|
||||
+
|
||||
</n-button>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="播放器">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.autoplay" size="small" />
|
||||
<n-text>自动播放</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<!-- 开启自动播放时,设置间隔时间 -->
|
||||
<setting-item name="间隔时间">
|
||||
<n-input-number v-model:value="optionData.interval" size="small" placeholder=""></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="轮播方向">
|
||||
<n-select v-model:value="optionData.direction" :options="directions" placeholder="选择方向" />
|
||||
</setting-item>
|
||||
<setting-item name="过渡效果">
|
||||
<n-select v-model:value="optionData.effect" :options="effects" placeholder="效果" />
|
||||
</setting-item>
|
||||
<setting-item name="每页数量">
|
||||
<n-input-number v-model:value="optionData.slidesPerview" size="small" placeholder=""></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.centeredSlides" size="small" />
|
||||
<n-text>居中显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="图片样式">
|
||||
<n-select v-model:value="optionData.fit" :options="fitList" placeholder="样式" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
|
||||
<setting-item-box name="指示器">
|
||||
<setting-item name="样式">
|
||||
<n-select v-model:value="optionData.dotType" :options="dotTypes" placeholder="选择样式" />
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select v-model:value="optionData.dotPlacement" :options="dotPlacements" placeholder="选择位置" />
|
||||
</setting-item>
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.showDots" size="small" />
|
||||
<n-text>显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.showArrow" size="small" />
|
||||
<n-text>箭头</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.draggable" size="small" />
|
||||
<n-text>拖曳切换</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { option } from './config'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
// 字典
|
||||
const dotTypes = [
|
||||
{
|
||||
label: "点",
|
||||
value: "dot"
|
||||
},
|
||||
{
|
||||
label: "线",
|
||||
value: "line"
|
||||
}
|
||||
]
|
||||
const directions = [
|
||||
{
|
||||
label: "水平方向",
|
||||
value: "horizontal"
|
||||
},
|
||||
{
|
||||
label: "垂直方向",
|
||||
value: "vertical"
|
||||
}
|
||||
]
|
||||
const effects = [
|
||||
{
|
||||
label: "slide",
|
||||
value: "slide"
|
||||
},
|
||||
{
|
||||
label: "fade",
|
||||
value: "fade"
|
||||
},
|
||||
{
|
||||
label: "card",
|
||||
value: "card"
|
||||
},
|
||||
{
|
||||
label: "custom",
|
||||
value: "custom"
|
||||
}
|
||||
]
|
||||
const dotPlacements = [
|
||||
{
|
||||
label: "上边",
|
||||
value: "top"
|
||||
},
|
||||
{
|
||||
label: "下边",
|
||||
value: "bottom"
|
||||
},
|
||||
{
|
||||
label: "左边",
|
||||
value: "left"
|
||||
},
|
||||
{
|
||||
label: "右边",
|
||||
value: "right"
|
||||
}
|
||||
]
|
||||
|
||||
// 适应类型
|
||||
const fitList = [
|
||||
{
|
||||
value: 'fill',
|
||||
label: 'fill'
|
||||
},
|
||||
{
|
||||
value: 'contain',
|
||||
label: 'contain'
|
||||
},
|
||||
{
|
||||
value: 'cover',
|
||||
label: 'cover'
|
||||
},
|
||||
{
|
||||
value: 'scale-down',
|
||||
label: 'scale-down'
|
||||
},
|
||||
{
|
||||
value: 'none',
|
||||
label: 'none'
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 12 KiB |
14
src/packages/components/Informations/Mores/Carousel/index.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const CarouselConfig: ConfigType = {
|
||||
key: 'Carousel',
|
||||
chartKey: 'VCarousel',
|
||||
conKey: 'VCCarousel',
|
||||
title: '轮播图',
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.INFORMATIONS,
|
||||
chartFrame: ChartFrameEnum.NAIVE_UI,
|
||||
image: 'photo.png'
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-carousel :autoplay="autoplay" :interval="interval" :centered-slides="centeredSlides" :direction="direction"
|
||||
:dot-placement="dotPlacement" :dot-type="dotType" :draggable="draggable" :effect="effect"
|
||||
:slides-per-view="slidesPerview" :show-arrow="showArrow" :show-dots="showDots">
|
||||
<n-image v-for="url in option.dataset" :object-fit="fit" preview-disabled :src="url"
|
||||
:fallback-src="requireErrorImg()" :width="w" :height="h"></n-image>
|
||||
</n-carousel>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, shallowReactive, watch } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { requireErrorImg } from '@/utils'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { option as configOption } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const option = shallowReactive({
|
||||
dataset: configOption.dataset
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const { autoplay, interval, slidesPerview, direction, draggable, centeredSlides, effect, dotType, dotPlacement, showArrow, showDots, fit } = toRefs(props.chartConfig.option)
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: any) => {
|
||||
option.dataset = newData
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
option.dataset = newData
|
||||
})
|
||||
</script>
|
||||
@@ -14,7 +14,7 @@ export const option = {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType
|
||||
{
|
||||
public key = IframeConfig.key
|
||||
public attr = { ...chartInitConfig, w: 800, h: 800, zIndex: -1 }
|
||||
public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(IframeConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/informations/iframe.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const IframeConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.INFORMATIONS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
image: 'iframe.png'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/informations/photo.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const ImageConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.INFORMATIONS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
image: 'photo.png'
|
||||
}
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ImageCarouselConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import logo from '@/assets/logo.png'
|
||||
|
||||
export const option = {
|
||||
// 图片资源列表
|
||||
dataset: [
|
||||
'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg',
|
||||
'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg',
|
||||
'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg',
|
||||
],
|
||||
// 自动播放
|
||||
autoplay: true,
|
||||
// 自动播放的间隔(豪秒)
|
||||
interval: 5000,
|
||||
// 每页显示的图片数量
|
||||
slidesPerview: 1,
|
||||
// 轮播方向
|
||||
direction: "horizontal",
|
||||
// 拖曳切换
|
||||
draggable: true,
|
||||
// 居中显示
|
||||
centeredSlides: false,
|
||||
// 过渡效果
|
||||
effect: "slide",
|
||||
// 是否显示指示点
|
||||
showDots: true,
|
||||
// 指示器样式
|
||||
dotType: "dot",
|
||||
// 指示器位置
|
||||
dotPlacement: "bottom",
|
||||
// 显示箭头
|
||||
showArrow: false,
|
||||
// 图片样式
|
||||
fit: "contain",
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ImageCarouselConfig.key
|
||||
public chartConfig = cloneDeep(ImageCarouselConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<collapse-item name="路径" :expanded="true">
|
||||
<setting-item v-for="(item, index) in optionData.dataset" :key="index">
|
||||
<n-input-group>
|
||||
<n-input v-model:value="optionData.dataset[index]" size="small" placeholder="请输入图片地址"></n-input>
|
||||
<n-button ghost @click="optionData.dataset.splice(index, 1)"> - </n-button>
|
||||
</n-input-group>
|
||||
</setting-item>
|
||||
<setting-item>
|
||||
<n-button size="small" @click="optionData.dataset.push('')"> + 新增</n-button>
|
||||
</setting-item>
|
||||
</collapse-item>
|
||||
<collapse-item name="轮播属性" :expanded="true">
|
||||
<setting-item-box name="播放器">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.autoplay" size="small" />
|
||||
<n-text>自动播放</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<!-- 开启自动播放时,设置间隔时间 -->
|
||||
<setting-item name="间隔时间">
|
||||
<n-input-number v-model:value="optionData.interval" size="small" placeholder="">
|
||||
<template #suffix> 毫秒 </template>
|
||||
</n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="轮播方向">
|
||||
<n-select v-model:value="optionData.direction" :options="directions" placeholder="选择方向" />
|
||||
</setting-item>
|
||||
<setting-item name="过渡效果">
|
||||
<n-select v-model:value="optionData.effect" :options="effects" placeholder="效果" />
|
||||
</setting-item>
|
||||
<setting-item name="每页数量">
|
||||
<n-input-number v-model:value="optionData.slidesPerview" size="small" placeholder=""></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.centeredSlides" size="small" />
|
||||
<n-text>居中显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="图片样式">
|
||||
<n-select v-model:value="optionData.fit" :options="fitList" placeholder="样式" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="指示器">
|
||||
<setting-item name="样式">
|
||||
<n-select v-model:value="optionData.dotType" :options="dotTypes" placeholder="选择样式" />
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select v-model:value="optionData.dotPlacement" :options="dotPlacements" placeholder="选择位置" />
|
||||
</setting-item>
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.showDots" size="small" />
|
||||
<n-text>显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.showArrow" size="small" />
|
||||
<n-text>箭头</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.draggable" size="small" />
|
||||
<n-text>拖曳切换</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { option } from './config'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
// 字典
|
||||
const dotTypes = [
|
||||
{
|
||||
label: '点',
|
||||
value: 'dot'
|
||||
},
|
||||
{
|
||||
label: '线',
|
||||
value: 'line'
|
||||
}
|
||||
]
|
||||
const directions = [
|
||||
{
|
||||
label: '水平方向',
|
||||
value: 'horizontal'
|
||||
},
|
||||
{
|
||||
label: '垂直方向',
|
||||
value: 'vertical'
|
||||
}
|
||||
]
|
||||
const effects = [
|
||||
{
|
||||
label: 'slide',
|
||||
value: 'slide'
|
||||
},
|
||||
{
|
||||
label: 'fade',
|
||||
value: 'fade'
|
||||
},
|
||||
{
|
||||
label: 'card',
|
||||
value: 'card'
|
||||
},
|
||||
{
|
||||
label: 'custom',
|
||||
value: 'custom'
|
||||
}
|
||||
]
|
||||
const dotPlacements = [
|
||||
{
|
||||
label: '上边',
|
||||
value: 'top'
|
||||
},
|
||||
{
|
||||
label: '下边',
|
||||
value: 'bottom'
|
||||
},
|
||||
{
|
||||
label: '左边',
|
||||
value: 'left'
|
||||
},
|
||||
{
|
||||
label: '右边',
|
||||
value: 'right'
|
||||
}
|
||||
]
|
||||
|
||||
// 适应类型
|
||||
const fitList = [
|
||||
{
|
||||
value: 'fill',
|
||||
label: 'fill'
|
||||
},
|
||||
{
|
||||
value: 'contain',
|
||||
label: 'contain'
|
||||
},
|
||||
{
|
||||
value: 'cover',
|
||||
label: 'cover'
|
||||
},
|
||||
{
|
||||
value: 'scale-down',
|
||||
label: 'scale-down'
|
||||
},
|
||||
{
|
||||
value: 'none',
|
||||
label: 'none'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
@@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const ImageCarouselConfig: ConfigType = {
|
||||
key: 'ImageCarousel',
|
||||
chartKey: 'VImageCarousel',
|
||||
conKey: 'VCImageCarousel',
|
||||
title: '轮播图',
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.INFORMATIONS,
|
||||
chartFrame: ChartFrameEnum.NAIVE_UI,
|
||||
image: 'photo_carousel.png'
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-carousel
|
||||
:autoplay="autoplay"
|
||||
:interval="interval"
|
||||
:centered-slides="centeredSlides"
|
||||
:direction="direction"
|
||||
:dot-placement="dotPlacement"
|
||||
:dot-type="dotType"
|
||||
:draggable="draggable"
|
||||
:effect="effect"
|
||||
:slides-per-view="slidesPerview"
|
||||
:show-arrow="showArrow"
|
||||
:show-dots="showDots"
|
||||
>
|
||||
<n-image
|
||||
v-for="(url, index) in option.dataset"
|
||||
preview-disabled
|
||||
:key="index"
|
||||
:object-fit="fit"
|
||||
:src="url"
|
||||
:fallback-src="requireErrorImg()"
|
||||
:width="w"
|
||||
:height="h"
|
||||
></n-image>
|
||||
</n-carousel>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, shallowReactive, watch } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { requireErrorImg } from '@/utils'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { option as configOption } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const option = shallowReactive({
|
||||
dataset: configOption.dataset
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
autoplay,
|
||||
interval,
|
||||
slidesPerview,
|
||||
direction,
|
||||
draggable,
|
||||
centeredSlides,
|
||||
effect,
|
||||
dotType,
|
||||
dotPlacement,
|
||||
showArrow,
|
||||
showDots,
|
||||
fit
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: any) => {
|
||||
option.dataset = newData
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
option.dataset = newData
|
||||
})
|
||||
</script>
|
||||
@@ -1,4 +1,3 @@
|
||||
import image from '@/assets/images/chart/informations/video.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
@@ -11,5 +10,5 @@ export const VideoConfig: ConfigType = {
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.INFORMATIONS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
image: 'video.png'
|
||||
}
|
||||
|
||||