Compare commits

...

83 Commits

Author SHA1 Message Date
奔跑的面条
5f15d2432b Merge branch 'master-fetch-dev' into master-fetch 2023-08-17 10:02:10 +08:00
奔跑的面条
dc10b761d8 build: 初始化依赖 2023-08-17 10:01:50 +08:00
奔跑的面条
800a2f0732 Merge branch 'dev' into master-fetch-dev 2023-08-17 09:57:56 +08:00
奔跑的面条
95b50c7d76 fix: 解决TS打包报错 2023-08-15 09:29:06 +08:00
奔跑的面条
d76ddf1126 !197 新增输入框联动组件
Merge pull request !197 from 阿飞/dev1
2023-08-15 01:11:45 +00:00
luoyp
c5788f79b3 新增输入框组件 2023-08-14 11:01:04 +08:00
奔跑的面条
704a7bd8f8 feat: 新增基础分页表格 2023-08-11 23:56:30 +08:00
奔跑的面条
db73346c71 feat: 处理基础表格图片和文案提示 2023-08-11 23:47:05 +08:00
奔跑的面条
ab5ade9be1 perf: 格式化表格组件代码 2023-08-11 22:35:44 +08:00
奔跑的面条
0d3418259c !192 新增分页表格组件
Merge pull request !192 from 阿飞/dev2
2023-08-11 14:22:14 +00:00
奔跑的面条
541ce8a083 feat: 修改柱状图 & 折线图文件位置和名称,格式化内容 2023-08-11 22:20:32 +08:00
奔跑的面条
6b9e993599 !193 新增组合图
Merge pull request !193 from 阿飞/dev3
2023-08-11 14:08:47 +00:00
奔跑的面条
1ad0658a5f !194 新增分页联动组件
Merge pull request !194 from 阿飞/dev4
2023-08-11 14:03:20 +00:00
奔跑的面条
b89e5d702b !190 feat: 增加全屏按钮组件
Merge pull request !190 from QuietlyChan/feat-fullScreen
2023-08-11 13:55:15 +00:00
奔跑的面条
fed515f844 !191 修复单折线渐变图鼠标移入报错
Merge pull request !191 from 阿飞/dev1
2023-08-11 13:50:54 +00:00
奔跑的面条
9f9df3566f !196 修复naive-ui进度图预览显示bug
Merge pull request !196 from 阿飞/dev6
2023-08-11 13:49:47 +00:00
奔跑的面条
39e735b29c fix: 解决了三维地球不能被截图的bug 2023-08-11 21:43:43 +08:00
奔跑的面条
d2ad32e08e fix: 解决地图point的值展示错误的问题 2023-08-09 09:28:48 +08:00
retire
b75cbea6cc feat: 基础事件增加components参数 2023-08-03 21:05:06 +08:00
luoyp
3c1ea60f21 修复Naive-UI进度图预览显示bug 2023-08-03 15:38:47 +08:00
luoyp
32c5b216f2 修复组合图不显示 2023-08-01 16:44:30 +08:00
luoyp
a08e27da2d 新增分页联动组件 2023-08-01 09:32:55 +08:00
luoyp
4c13dc3184 新增组合图 2023-08-01 09:16:54 +08:00
luoyp
d91c86f01c 新增分页表格组件 2023-08-01 08:48:59 +08:00
luoyp
5479a26832 修复单折线渐变图鼠标移入报错 2023-08-01 08:44:27 +08:00
奔跑的面条
1250829da6 fix: 处理一开始不会请求的问题 2023-07-31 17:09:20 +08:00
奔跑的面条
ac2fd67688 fix: 修复创建分组排序会错误的bug 2023-07-31 15:45:43 +08:00
QuietlyChan
dbc44bf419 fix: 修复初始化不能拖拽 2023-07-28 14:34:40 +08:00
QuietlyChan
1401a091eb feat: 增加全屏按钮组件 2023-07-28 10:11:34 +08:00
奔跑的面条
f528eb29bc fix: 处理加上链接内容就会消失的bug 2023-07-21 16:43:05 +08:00
奔跑的面条
06921ea3f5 !180 修复旋转组件预览错位问题
Merge pull request !180 from 张江胜/dev_fix
2023-07-21 08:29:05 +00:00
奔跑的面条
f2d9f14ea5 !179 修复右下角白点 通过修改样式修改 不需要元素
Merge pull request !179 from cherubic_c/dev
2023-07-21 08:06:37 +00:00
奔跑的面条
97e5d985bd !184 fix: 左侧刻度尺错位问题
Merge pull request !184 from daidai/dev
2023-07-21 06:59:15 +00:00
刘嘉威
bb1828b478 fix: 左侧刻度尺错位问题 2023-07-20 14:28:31 +08:00
Ming
91c4cca62e fix: 粘贴坐标 2023-07-17 18:53:33 +08:00
奔跑的面条
c3140d3746 build: 升级 axios lock错误 2023-07-15 14:13:40 +08:00
张江胜
307cdd9e9a fix: 修复单个组件旋转后,进行分组再次旋转预览错位的问题 2023-07-10 11:06:19 +08:00
IMyself
7bc8c16581 修复右下角白点 2023-07-10 08:21:10 +08:00
奔跑的面条
df01be729d Merge branch 'master-fetch-dev' into master-fetch 2023-07-09 17:09:06 +08:00
奔跑的面条
ec051618e6 Merge branch 'dev' into master-fetch-dev 2023-07-09 17:08:50 +08:00
奔跑的面条
8caa588d3f perf: 优化预览拖拽交互 2023-07-09 17:06:35 +08:00
奔跑的面条
0816f3fcbf Merge branch 'master-fetch-dev' into master-fetch 2023-07-09 15:55:11 +08:00
奔跑的面条
6843f24263 Merge branch 'dev' into master-fetch-dev 2023-07-09 15:54:55 +08:00
奔跑的面条
7076c4deb7 feat: 新增预览拖拽 2023-07-09 15:54:01 +08:00
奔跑的面条
59bfc78f0a Merge branch 'master-fetch-dev' into master-fetch 2023-07-08 22:03:58 +08:00
奔跑的面条
4064339848 build: 升级到版本 2.2.4 2023-07-08 22:03:27 +08:00
奔跑的面条
d2af67d6ad Merge branch 'dev' into master-fetch-dev 2023-07-08 22:01:54 +08:00
奔跑的面条
e979149cfb feat: 不符合接口格式时添加拦截 2023-07-08 21:59:41 +08:00
奔跑的面条
d0d031d1bb feat: 还原修改成组旋转的问题,优化预览放大的交互 2023-07-08 21:33:50 +08:00
奔跑的面条
9127e6f44c feat: 新增预览放大功能 2023-07-08 21:18:37 +08:00
xlys999
bb610ff7ae update src/views/chart/ContentEdit/components/EditRule/index.vue.
坐标尺刻度错位问题

Signed-off-by: xlys999 <xlys998@163.com>
2023-07-08 18:45:03 +08:00
奔跑的面条
c575cff727 perf: 优化滤镜预设展示 2023-07-08 18:36:36 +08:00
奔跑的面条
5443c9647b !176 新增预设滤镜功能
Merge pull request !176 from 张江胜/dev_feat
2023-07-08 10:35:31 +00:00
张江胜
271a02ff12 feat: 增加预设滤镜功能
1.滤镜变换:新增了快捷预设滤镜
2023-06-29 18:45:59 +08:00
张江胜
f747fd3506 fix: 解决单个组件旋转后,再组合分组渲染预览会错位的问题
1.解决单个组件旋转后,和其他组件组合分组后再次旋转,进行预览后该分组会错位的问题
2.解决TS类型报错
2023-06-29 17:39:17 +08:00
奔跑的面条
b59c28b8ae fix: 解决 TS 类型错误问题 2023-06-27 18:11:37 +08:00
奔跑的面条
b1a0e7b5e2 fix: 修改 axios 类型错误 2023-06-27 17:54:17 +08:00
奔跑的面条
0d762f7d30 style: 优化 pr_173 的问题 2023-06-27 17:48:08 +08:00
奔跑的面条
cc156a0a6b !173 1.时间选择器增加默认值类型选项
Merge pull request !173 from dingxs/dingxs
2023-06-27 09:47:39 +00:00
奔跑的面条
a77f4d6bf4 !174 feat: 为 naive-ui 组件配置感知、属性提示、自动完成功能
Merge pull request !174 from dodu/dev-commet
2023-06-25 01:32:43 +00:00
tnt group
9e5676e5ed feat: 为 naive-ui 组件提供感知能力 2023-06-23 11:54:52 +08:00
dingxs
bc79e2f01f fix:用in判断对象是否具有某个特定的key,而不是value,解决当value为null时永远得不到修改 2023-06-19 14:39:00 +08:00
dingxs
80f06afa02 feat:时间选择器增加默认值类型选项 2023-06-19 14:35:17 +08:00
奔跑的面条
3da84b2fa2 Merge branch 'dev' into master-fetch-dev 2023-06-15 19:56:44 +08:00
奔跑的面条
58ab3dee6d !172 环形饼图增加轨道宽度设置,并优化数字显示(如无小数位,则不强制显示小数位)
Merge pull request !172 from dodu/dev-commet
2023-06-15 11:52:47 +00:00
奔跑的面条
d7a3bb7ba0 !169 feat:标签选择器增加默认值选项
Merge pull request !169 from h5coder/dev-h5coder
2023-06-15 19:50:27 +08:00
奔跑的面条
2ad2af97e6 !169 feat:标签选择器增加默认值选项
Merge pull request !169 from h5coder/dev-h5coder
2023-06-15 11:49:54 +00:00
奔跑的面条
5387a7ad90 !171 fix: 修复旧版本没有legend配置导致报settting color错误
Merge pull request !171 from h5coder/h5coder-fix
2023-06-15 19:46:13 +08:00
奔跑的面条
291a7bbc61 !171 fix: 修复旧版本没有legend配置导致报settting color错误
Merge pull request !171 from h5coder/h5coder-fix
2023-06-15 11:45:41 +00:00
tnt group
fe37435f79 chore: 设置选择框size 2023-06-14 07:54:36 +08:00
tnt group
1ef6d9797a feat: 环形饼图增加轨道宽度设置,并优化数字显示 2023-06-13 10:27:08 +08:00
lyx
27e2e2c68d fix: 修复旧版本没有legend配置导致报settting color错误 2023-06-09 10:56:36 +08:00
奔跑的面条
c70d54c622 style: 删除冗余代码 2023-06-08 16:39:18 +08:00
Ming
d74645d7b0 feat: 组件交互对公共api支持配置页 2023-06-07 15:13:48 +08:00
Ming
86910de3b2 fix: 数据初始化 2023-06-07 15:08:52 +08:00
Ming
47636ee680 feat: 支持对公共api进行交互 2023-06-07 15:06:51 +08:00
Ming
9485931f5d feat: 更新公共api对组件动态绑定交互 2023-06-07 15:03:59 +08:00
Ming
20fa9e4afe fix: declare module '@iconify/vue' 2023-06-07 15:00:28 +08:00
Ming
cbd629d7f8 feat: 更新交互组件更新方式 2023-06-07 15:00:06 +08:00
lyx
18e0729e54 fix:标签选择器去除多余的代码 2023-06-05 18:06:57 +08:00
lyx
d6afc50ac5 feat:标签选择器增加默认值选项 2023-06-02 17:29:18 +08:00
奔跑的面条
37676176e7 fix: 去除定时存储数据的逻辑 2023-05-30 09:34:54 +08:00
Ming
1551aa9ded fix: 语言转换为英文后,创建按钮的英文拼写错误 2023-05-29 10:29:44 +08:00
76 changed files with 3130 additions and 1367 deletions

View File

@@ -1,6 +1,6 @@
{
"name": "go-view",
"version": "2.2.3",
"version": "2.2.4",
"engines": {
"node": ">=12.0"
},

1331
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -163,7 +163,6 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
params = translateStr(params)
// form 类型处理
let formData: FormData = new FormData()
formData.set('default', 'defaultData')
// 类型处理
switch (requestParamsBodyType) {

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

View File

@@ -391,8 +391,12 @@ const visualMap = computed(() => {
// 监听legend color颜色改变type = scroll的颜色
watch(() => legend.value && legend.value.textStyle.color, (newVal) => {
if (legend.value && newVal) {
legend.value.pageTextStyle.color = newVal
}
if (!legend.value.pageTextStyle) {
legend.value.pageTextStyle = { color: newVal }
} else {
legend.value.pageTextStyle.color = newVal
}
}
}, {
immediate: true,
deep: true,

View File

@@ -69,6 +69,22 @@
</setting-item>
</setting-item-box>
<!-- 预设滤镜 -->
<div v-if="presetImageList.length" class="preset-filter">
<n-image
class="preset-img"
width="46"
preview-disabled
object-fit="scale-down"
v-for="(item, index) in presetImageList"
:key="index"
:class="{ 'active-preset': item.hueRotate === chartStyles.hueRotate }"
:style="{ filter: `hue-rotate(${item.hueRotate}deg)` }"
:src="item.src"
@click="() => (chartStyles.hueRotate = item.hueRotate)"
></n-image>
</div>
<!-- 混合模式 -->
<setting-item-box v-if="!isCanvas" :alone="true">
<template #name>
@@ -149,10 +165,12 @@
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { ref, PropType } from 'vue'
import { PickCreateComponentType, BlendModeEnumList } from '@/packages/index.d'
import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
import { icon } from '@/plugins'
import logoImg from '@/assets/logo.png'
import { useDesignStore } from '@/store/modules/designStore/designStore'
const props = defineProps({
isGroup: {
@@ -175,10 +193,48 @@ const { HelpOutlineIcon } = icon.ionicons5
const sliderFormatTooltip = (v: string) => {
return `${(parseFloat(v) * 100).toFixed(0)}%`
}
// 角度格式化
const degFormatTooltip = (v: string) => {
return `${v}deg`
}
// 预设滤镜
interface presetImageData {
index: number
src: string
hueRotate: number
}
const presetImageList = ref([] as presetImageData[])
for (let i = 1; i <= 12; i++) {
presetImageList.value.push({
index: i,
src: logoImg,
hueRotate: i * 30
})
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
// 预设滤镜
.preset-filter {
margin: 20px 0 10px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.preset-img {
margin-bottom: 10px;
padding: 2px;
border-radius: 6px;
transition: 0.2s all;
cursor: pointer;
&:hover {
box-shadow: 0 0 0 2px #66a9c9;
}
}
.active-preset {
box-shadow: 0 0 0 2px #66a9c9;
}
}
</style>

View File

@@ -90,7 +90,7 @@ export const useChartDataFetch = (
// 普通初始化与组件交互处理监听
watch(
() => targetComponent.request,
() => targetComponent.request.requestParams,
() => {
fetchFn()
},
@@ -105,7 +105,11 @@ export const useChartDataFetch = (
// 单位
const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
// 开启轮询
if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
if (time) {
fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
} else {
fetchFn()
}
}
// eslint-disable-next-line no-empty
} catch (error) {
@@ -114,10 +118,11 @@ export const useChartDataFetch = (
}
if (isPreview()) {
// 判断是否是数据池类型
targetComponent.request.requestDataType === RequestDataTypeEnum.Pond
? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
: requestIntervalFn()
} else {
requestIntervalFn()
}
return { vChartRef }
}

View File

@@ -1,4 +1,4 @@
import { toRaw } from 'vue'
import { toRaw, watch, computed, ComputedRef } from 'vue'
import { customizeHttp } from '@/api/http'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -20,7 +20,7 @@ const mittDataPondMap = new Map<string, DataPondMapType[]>()
// 创建单个数据项轮询接口
const newPondItemInterval = (
requestGlobalConfig: RequestGlobalConfigType,
requestDataPondItem: RequestDataPondItemType,
requestDataPondItem: ComputedRef<RequestDataPondItemType>,
dataPondMapItem?: DataPondMapType[]
) => {
if (!dataPondMapItem) return
@@ -31,8 +31,7 @@ const newPondItemInterval = (
// 请求
const fetchFn = async () => {
try {
const res = await customizeHttp(toRaw(requestDataPondItem.dataPondRequestConfig), toRaw(requestGlobalConfig))
const res = await customizeHttp(toRaw(requestDataPondItem.value.dataPondRequestConfig), toRaw(requestGlobalConfig))
if (res) {
try {
// 遍历更新回调函数
@@ -49,19 +48,32 @@ const newPondItemInterval = (
}
}
watch(
() => requestDataPondItem.value.dataPondRequestConfig.requestParams.Params,
() => {
fetchFn()
},
{
immediate: false,
deep: true
}
)
// 立即调用
fetchFn()
const targetInterval = requestDataPondItem.dataPondRequestConfig.requestInterval
const targetUnit = requestDataPondItem.dataPondRequestConfig.requestIntervalUnit
const targetInterval = requestDataPondItem.value.dataPondRequestConfig.requestInterval
const targetUnit = requestDataPondItem.value.dataPondRequestConfig.requestIntervalUnit
const globalRequestInterval = requestGlobalConfig.requestInterval
const globalUnit = requestGlobalConfig.requestIntervalUnit
// 定时时间
const time = targetInterval ? targetInterval : globalRequestInterval
const time = targetInterval ? targetInterval : globalRequestInterval
// 单位
const unit = targetInterval ? targetUnit : globalUnit
const unit = targetInterval ? targetUnit : globalUnit
// 开启轮询
if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
}
@@ -96,13 +108,16 @@ export const useChartDataPondFetch = () => {
}
// 初始化数据池
const initDataPond = (requestGlobalConfig: RequestGlobalConfigType) => {
const { requestDataPond } = requestGlobalConfig
const initDataPond = (useChartEditStore: ChartEditStoreType) => {
const { requestGlobalConfig } = useChartEditStore()
const chartEditStore = useChartEditStore()
// 根据 mapId 查找对应的数据池配置
for (let pondKey of mittDataPondMap.keys()) {
const requestDataPondItem = requestDataPond.find(item => item.dataPondId === pondKey)
const requestDataPondItem = computed(() => {
return requestGlobalConfig.requestDataPond.find(item => item.dataPondId === pondKey)
}) as ComputedRef<RequestDataPondItemType>
if (requestDataPondItem) {
newPondItemInterval(requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey))
newPondItemInterval(chartEditStore.requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey))
}
}
}

View File

@@ -1,4 +1,5 @@
import { toRefs } from 'vue'
import { isPreview } from '@/utils'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -12,6 +13,7 @@ export const useChartInteract = (
param: { [T: string]: any },
interactEventOn: string
) => {
if (!isPreview()) return
const chartEditStore = useChartEditStore()
const { interactEvents } = chartConfig.events
const fnOnEvent = interactEvents.filter(item => {
@@ -20,20 +22,37 @@ export const useChartInteract = (
if (fnOnEvent.length === 0) return
fnOnEvent.forEach(item => {
const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
if (index === -1) return
const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
Object.keys(item.interactFn).forEach(key => {
if (Params.value[key]) {
Params.value[key] = param[item.interactFn[key]]
}
if (Header.value[key]) {
Header.value[key] = param[item.interactFn[key]]
}
})
const globalConfigPindAprndex = chartEditStore.requestGlobalConfig.requestDataPond.findIndex(cItem =>
cItem.dataPondId === item.interactComponentId
)
if (globalConfigPindAprndex !== -1) {
const { Params, Header } = toRefs(chartEditStore.requestGlobalConfig.requestDataPond[globalConfigPindAprndex].dataPondRequestConfig.requestParams)
Object.keys(item.interactFn).forEach(key => {
if (key in Params.value) {
Params.value[key] = param[item.interactFn[key]]
}
if (key in Header.value) {
Header.value[key] = param[item.interactFn[key]]
}
})
} else {
const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
if (index === -1) return
const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
Object.keys(item.interactFn).forEach(key => {
if (key in Params.value) {
Params.value[key] = param[item.interactFn[key]]
}
if (key in Header.value) {
Header.value[key] = param[item.interactFn[key]]
}
})
}
})
}
// 联动事件触发的 type 变更时,清除当前绑定内容
export const clearInteractEvent = (chartConfig: CreateComponentType) => {

View File

@@ -48,10 +48,10 @@ export const useLifeHandler = (chartConfig: CreateComponentType | CreateComponen
try {
return new Function(`
return (
async function(mouseEvent){
async function(components,mouseEvent){
${fnStr}
}
)`)()
)`)().bind(undefined,components)
} catch (error) {
console.error(error)
}

View File

@@ -1,218 +1,218 @@
import throttle from 'lodash/throttle'
// 拆出来是为了更好的分离单独复用
// * 屏幕缩放适配(两边留白)
export const usePreviewFitScale = (
width: number,
height: number,
scaleDom: HTMLElement | null,
callback?: (scale: {
width: number;
height: number;
}) => void
) => {
// * 画布尺寸px
const baseWidth = width
const baseHeight = height
// * 默认缩放值
const scale = {
width: 1,
height: 1,
}
// * 需保持的比例
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
const calcRate = () => {
// 当前屏幕宽高比
const currentRate = parseFloat(
(window.innerWidth / window.innerHeight).toFixed(5)
)
if (scaleDom) {
if (currentRate > baseProportion) {
// 表示更宽
scale.width = parseFloat(((window.innerHeight * baseProportion) / baseWidth).toFixed(5))
scale.height = parseFloat((window.innerHeight / baseHeight).toFixed(5))
scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
} else {
// 表示更高
scale.height = parseFloat(((window.innerWidth / baseProportion) / baseHeight).toFixed(5))
scale.width = parseFloat((window.innerWidth / baseWidth).toFixed(5))
scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
}
if (callback) callback(scale)
}
}
const resize = throttle(() => {
calcRate()
}, 200)
// * 改变窗口大小重新绘制
const windowResize = () => {
window.addEventListener('resize', resize)
}
// * 改变窗口大小重新绘制
const unWindowResize = () => {
window.removeEventListener('resize', resize)
}
return {
calcRate,
windowResize,
unWindowResize,
}
}
// * X轴撑满Y轴滚动条
export const usePreviewScrollYScale = (
width: number,
height: number,
scaleDom: HTMLElement | null,
callback?: (scale: {
width: number;
height: number;
}) => void
) => {
// * 画布尺寸px
const baseWidth = width
const baseHeight = height
// * 默认缩放值
const scale = {
width: 1,
height: 1,
}
// * 需保持的比例
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
const calcRate = () => {
if (scaleDom) {
scale.height = parseFloat(((window.innerWidth / baseProportion) / baseHeight).toFixed(5))
scale.width = parseFloat((window.innerWidth / baseWidth).toFixed(5))
scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
if (callback) callback(scale)
}
}
const resize = throttle(() => {
calcRate()
}, 200)
// * 改变窗口大小重新绘制
const windowResize = () => {
window.addEventListener('resize', resize)
}
// * 改变窗口大小重新绘制
const unWindowResize = () => {
window.removeEventListener('resize', resize)
}
return {
calcRate,
windowResize,
unWindowResize,
}
}
// * Y轴撑满X轴滚动条
export const usePreviewScrollXScale = (
width: number,
height: number,
scaleDom: HTMLElement | null,
callback?: (scale: {
width: number;
height: number;
}) => void
) => {
// * 画布尺寸px
const baseWidth = width
const baseHeight = height
// * 默认缩放值
const scale = {
height: 1,
width: 1,
}
// * 需保持的比例
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
const calcRate = () => {
if (scaleDom) {
scale.width = parseFloat(((window.innerHeight * baseProportion) / baseWidth).toFixed(5))
scale.height = parseFloat((window.innerHeight / baseHeight).toFixed(5))
scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
if (callback) callback(scale)
}
}
const resize = throttle(() => {
calcRate()
}, 200)
// * 改变窗口大小重新绘制
const windowResize = () => {
window.addEventListener('resize', resize)
}
// * 改变窗口大小重新绘制
const unWindowResize = () => {
window.removeEventListener('resize', resize)
}
return {
calcRate,
windowResize,
unWindowResize,
}
}
// * 变形内容,宽高铺满
export const usePreviewFullScale = (
width: number,
height: number,
scaleDom: HTMLElement | null,
callback?: (scale: {
width: number;
height: number;
}) => void
) => {
// * 默认缩放值
const scale = {
width: 1,
height: 1,
}
const calcRate = () => {
if (scaleDom) {
scale.width = parseFloat((window.innerWidth / width).toFixed(5))
scale.height = parseFloat((window.innerHeight / height).toFixed(5))
scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
if (callback) callback(scale)
}
}
const resize = throttle(() => {
calcRate()
}, 200)
// * 改变窗口大小重新绘制
const windowResize = () => {
window.addEventListener('resize', resize)
}
// * 改变窗口大小重新绘制
const unWindowResize = () => {
window.removeEventListener('resize', resize)
}
return {
calcRate,
windowResize,
unWindowResize,
}
import throttle from 'lodash/throttle'
// 拆出来是为了更好的分离单独复用
// * 屏幕缩放适配(两边留白)
export const usePreviewFitScale = (
width: number,
height: number,
scaleDom: HTMLElement | null,
callback?: (scale: {
width: number;
height: number;
}) => void
) => {
// * 画布尺寸px
const baseWidth = width
const baseHeight = height
// * 默认缩放值
const scale = {
width: 1,
height: 1,
}
// * 需保持的比例
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
const calcRate = () => {
// 当前屏幕宽高比
const currentRate = parseFloat(
(window.innerWidth / window.innerHeight).toFixed(5)
)
if (scaleDom) {
if (currentRate > baseProportion) {
// 表示更宽
scale.width = parseFloat(((window.innerHeight * baseProportion) / baseWidth).toFixed(5))
scale.height = parseFloat((window.innerHeight / baseHeight).toFixed(5))
scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
} else {
// 表示更高
scale.height = parseFloat(((window.innerWidth / baseProportion) / baseHeight).toFixed(5))
scale.width = parseFloat((window.innerWidth / baseWidth).toFixed(5))
scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
}
if (callback) callback(scale)
}
}
const resize = throttle(() => {
calcRate()
}, 200)
// * 改变窗口大小重新绘制
const windowResize = () => {
window.addEventListener('resize', resize)
}
// * 卸载监听
const unWindowResize = () => {
window.removeEventListener('resize', resize)
}
return {
calcRate,
windowResize,
unWindowResize,
}
}
// * X轴撑满Y轴滚动条
export const usePreviewScrollYScale = (
width: number,
height: number,
scaleDom: HTMLElement | null,
callback?: (scale: {
width: number;
height: number;
}) => void
) => {
// * 画布尺寸px
const baseWidth = width
const baseHeight = height
// * 默认缩放值
const scale = {
width: 1,
height: 1,
}
// * 需保持的比例
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
const calcRate = () => {
if (scaleDom) {
scale.height = parseFloat(((window.innerWidth / baseProportion) / baseHeight).toFixed(5))
scale.width = parseFloat((window.innerWidth / baseWidth).toFixed(5))
scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
if (callback) callback(scale)
}
}
const resize = throttle(() => {
calcRate()
}, 200)
// * 改变窗口大小重新绘制
const windowResize = () => {
window.addEventListener('resize', resize)
}
// * 卸载监听
const unWindowResize = () => {
window.removeEventListener('resize', resize)
}
return {
calcRate,
windowResize,
unWindowResize,
}
}
// * Y轴撑满X轴滚动条
export const usePreviewScrollXScale = (
width: number,
height: number,
scaleDom: HTMLElement | null,
callback?: (scale: {
width: number;
height: number;
}) => void
) => {
// * 画布尺寸px
const baseWidth = width
const baseHeight = height
// * 默认缩放值
const scale = {
height: 1,
width: 1,
}
// * 需保持的比例
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
const calcRate = () => {
if (scaleDom) {
scale.width = parseFloat(((window.innerHeight * baseProportion) / baseWidth).toFixed(5))
scale.height = parseFloat((window.innerHeight / baseHeight).toFixed(5))
scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
if (callback) callback(scale)
}
}
const resize = throttle(() => {
calcRate()
}, 200)
// * 改变窗口大小重新绘制
const windowResize = () => {
window.addEventListener('resize', resize)
}
// * 卸载监听
const unWindowResize = () => {
window.removeEventListener('resize', resize)
}
return {
calcRate,
windowResize,
unWindowResize,
}
}
// * 变形内容,宽高铺满
export const usePreviewFullScale = (
width: number,
height: number,
scaleDom: HTMLElement | null,
callback?: (scale: {
width: number;
height: number;
}) => void
) => {
// * 默认缩放值
const scale = {
width: 1,
height: 1,
}
const calcRate = () => {
if (scaleDom) {
scale.width = parseFloat((window.innerWidth / width).toFixed(5))
scale.height = parseFloat((window.innerHeight / height).toFixed(5))
scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
if (callback) callback(scale)
}
}
const resize = throttle(() => {
calcRate()
}, 200)
// * 改变窗口大小重新绘制
const windowResize = () => {
window.addEventListener('resize', resize)
}
// * 卸载监听
const unWindowResize = () => {
window.removeEventListener('resize', resize)
}
return {
calcRate,
windowResize,
unWindowResize,
}
}

View File

@@ -0,0 +1,75 @@
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { BarLineConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
// 柱状折线组合图 分别定义series
// 写死name可以定义legend显示的名称
export const barSeriesItem = {
type: 'bar',
barWidth: 15,
label: {
show: true,
position: 'top',
color: '#fff',
fontSize: 12
},
itemStyle: {
color: null,
borderRadius: 2
}
}
export const lineSeriesItem = {
type: 'line',
symbol: 'circle',
label: {
show: true,
position: 'top',
color: '#fff',
fontSize: 12
},
symbolSize: 5, //设定实心点的大小
itemStyle: {
color: '#FFE47A',
borderWidth: 1
},
lineStyle: {
type: 'solid',
width: 3,
color: null
}
}
export const option = {
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
show: true,
type: 'shadow'
}
},
legend: {
data: null
},
xAxis: {
show: true,
type: 'category'
},
yAxis: {
show: true,
type: 'value'
},
dataset: { ...dataJson },
series: [barSeriesItem, lineSeriesItem]
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = BarLineConfig.key
public chartConfig = cloneDeep(BarLineConfig)
// 图表配置项
public option = echartOptionProfixHandle(option, includes)
}

View File

@@ -0,0 +1,93 @@
<template>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData"></global-setting>
<CollapseItem
v-for="(item, index) in seriesList"
:key="index"
:name="`${item.type == 'bar' ? '柱状图' : '折线图'}`"
:expanded="true"
>
<SettingItemBox name="图形" v-if="item.type == 'bar'">
<SettingItem name="宽度">
<n-input-number
v-model:value="item.barWidth"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>
</SettingItem>
<SettingItem name="圆角">
<n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="线条" v-if="item.type == 'line'">
<SettingItem name="宽度">
<n-input-number
v-model:value="item.lineStyle.width"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>
</SettingItem>
<SettingItem name="类型">
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="实心点" v-if="item.type == 'line'">
<SettingItem name="大小">
<n-input-number
v-model:value="item.symbolSize"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>
</SettingItem>
</SettingItemBox>
<setting-item-box name="标签">
<setting-item>
<n-space>
<n-switch v-model:value="item.label.show" size="small" />
<n-text>展示标签</n-text>
</n-space>
</setting-item>
<setting-item name="大小">
<n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
</setting-item>
<setting-item name="tip颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
</setting-item>
<setting-item name="位置">
<n-select
v-model:value="item.label.position"
:options="[
{ label: 'top', value: 'top' },
{ label: 'left', value: 'left' },
{ label: 'right', value: 'right' },
{ label: 'bottom', value: 'bottom' }
]"
/>
</setting-item>
</setting-item-box>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { lineConf } from '@/packages/chartConfiguration/echarts'
import { GlobalThemeJsonType } from '@/settings/chartThemes'
const props = defineProps({
optionData: {
type: Object as PropType<GlobalThemeJsonType>,
required: true
}
})
const seriesList = computed(() => {
return props.optionData.series
})
</script>

View File

@@ -0,0 +1,40 @@
{
"dimensions": ["product", "data1", "data2"],
"source": [
{
"product": "1月",
"data1": 104,
"data2": 30
},
{
"product": "2月",
"data1": 56,
"data2": 56
},
{
"product": "3月",
"data1": 136,
"data2": 36
},
{
"product": "4月",
"data1": 86,
"data2": 6
},
{
"product": "5月",
"data1": 98,
"data2": 10
},
{
"product": "6月",
"data1": 86,
"data2": 70
},
{
"product": "7月",
"data1": 77,
"data2": 57
}
]
}

View File

@@ -0,0 +1,16 @@
// 公共类型声明
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
// 当前[信息模块]分类声明
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
export const BarLineConfig: ConfigType = {
key: 'BarLine',
chartKey: 'VBarLine',
conKey: 'VCBarLine',
title: '柱状图 & 折线图',
category: ChatCategoryEnum.BAR,
categoryName: ChatCategoryEnumName.BAR,
package: PackagesCategoryEnum.CHARTS,
chartFrame: ChartFrameEnum.ECHARTS,
image: 'bar_line.png'
}

View File

@@ -0,0 +1,73 @@
<template>
<v-chart
ref="vChartRef"
:init-options="initOptions"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
autoresize
></v-chart>
</template>
<script setup lang="ts">
import { ref, computed, watch, PropType, nextTick } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
//引入柱状图 折线图
import { BarChart, LineChart } from 'echarts/charts'
import config, { includes, barSeriesItem, lineSeriesItem } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
const props = defineProps({
themeSetting: {
type: Object,
required: true
},
themeColor: {
type: Object,
required: true
},
chartConfig: {
type: Object as PropType<config>,
required: true
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent])
const replaceMergeArr = ref<string[]>()
const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
watch(
() => props.chartConfig.option.dataset,
(newData, oldData) => {
if (newData.dimensions.length !== oldData.dimensions.length) {
const seriesArr = []
for (let i = 0; i < newData.dimensions.length - 1; i++) {
seriesArr.push(barSeriesItem, lineSeriesItem)
}
replaceMergeArr.value = ['series']
props.chartConfig.option.series = seriesArr
nextTick(() => {
replaceMergeArr.value = []
})
}
},
{
deep: false
}
)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>

View File

@@ -1,5 +1,6 @@
import { BarCommonConfig } from './BarCommon/index'
import { BarCrossrangeConfig } from './BarCrossrange/index'
import { CapsuleChartConfig } from './CapsuleChart/index'
export default [BarCommonConfig, BarCrossrangeConfig, CapsuleChartConfig]
import { BarCommonConfig } from './BarCommon/index'
import { BarCrossrangeConfig } from './BarCrossrange/index'
import { CapsuleChartConfig } from './CapsuleChart/index'
import { BarLineConfig } from './BarLine/index'
export default [BarCommonConfig, BarCrossrangeConfig, BarLineConfig, CapsuleChartConfig]

View File

@@ -33,6 +33,10 @@ export const option = {
width: 3,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,

View File

@@ -84,7 +84,10 @@ export const option = {
shadowColor: '#E1FFFF',
shadowBlur: 10
},
data: []
data: [],
encode: {
value: 2
}
},
{
name: '区域',

View File

@@ -3,7 +3,7 @@
:type="type"
:height="h"
:processing="processing"
:percentage="option.dataset"
:percentage="dataset"
:indicator-placement="indicatorPlacement"
:color="color"
:rail-color="railColor"
@@ -15,7 +15,7 @@
fontSize: `${indicatorTextSize}px`
}"
>
{{ option.dataset }} {{ unit }}
{{ dataset }} {{ unit }}
</n-text>
</n-progress>
</template>

View File

@@ -7,6 +7,22 @@
</n-input-number>
</SettingItem>
</SettingItemBox>
<!-- 中心标题 -->
<SettingItemBox v-if="config.title" name="标题">
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="config.title.textStyle.color"></n-color-picker>
</SettingItem>
<SettingItem name="字体大小">
<n-input-number
v-model:value="config.title.textStyle.fontSize"
:min="0"
:step="1"
size="small"
placeholder="字体大小"
>
</n-input-number>
</SettingItem>
</SettingItemBox>
<!-- Echarts 全局设置 -->
<SettingItemBox name="进度条">
<SettingItem name="颜色">
@@ -31,24 +47,8 @@
></n-color-picker>
</SettingItem>
</SettingItemBox>
<!-- 中心标题 -->
<SettingItemBox v-if="config.title" name="标题">
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="config.title.textStyle.color"></n-color-picker>
</SettingItem>
<SettingItem name="字体大小">
<n-input-number
v-model:value="config.title.textStyle.fontSize"
:min="0"
:step="1"
size="small"
placeholder="字体大小"
>
</n-input-number>
</SettingItem>
</SettingItemBox>
<!-- 其他样式 -->
<SettingItemBox name="轨道样式">
<SettingItemBox name="轨道">
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="item.data[1].itemStyle.color"></n-color-picker>
</SettingItem>
@@ -69,6 +69,18 @@
v-model:value="item.data[1].itemStyle.shadowColor"
></n-color-picker>
</SettingItem>
<SettingItem name="轨道宽度">
<n-select
v-model:value="item.radius[0]"
size="small"
:options="[
{ label: '窄', value: '75%' },
{ label: '中', value: '60%' },
{ label: '宽', value: '45%' },
{ label: '更宽', value: '30%' }
]"
/>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>

View File

@@ -41,7 +41,7 @@ const option = reactive({
const dataHandle = (newData: any) => {
const d = parseFloat(`${newData}`) * 100
let config = props.chartConfig.option
config.title.text = d.toFixed(2) + '%'
config.title.text = `${+d.toFixed(2)}%`
config.series[0].data[0].value[0] = d
config.series[0].data[1].value[0] = 100 - d
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
@@ -68,7 +68,7 @@ watch(
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
let d = parseFloat(`${resData}`) * 100
// @ts-ignore
option.value.title.text = d.toFixed(2) + '%'
option.value.title.text = `${+d.toFixed(2)}%`
// @ts-ignore
option.value.series[0].data[0].value[0] = d
// @ts-ignore

View File

@@ -14,5 +14,6 @@ export enum ChatCategoryEnumName {
LINE = '折线图',
SCATTER = '散点图',
MAP = '地图',
COMBINATION = '组合图',
MORE = '更多'
}

View File

@@ -63,7 +63,7 @@ watch(
() => props.chartConfig.option,
newVal => {
try {
updateDatasetHandler((newVal as OptionType).dataset)
updateDatasetHandler((newVal as any as OptionType).dataset)
} catch (error) {
console.log(error)
}

View File

@@ -0,0 +1,18 @@
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { FullScreenConfig } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
border: 6,
bgColor: '#84a5e9',
borderColor: '#84a5e9'
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = FullScreenConfig.key
public attr = { ...chartInitConfig, w: 150, h: 150, zIndex: -1 }
public chartConfig = cloneDeep(FullScreenConfig)
public option = cloneDeep(option)
}

View File

@@ -0,0 +1,28 @@
<template>
<CollapseItem name="全屏按钮" expanded>
<SettingItemBox name="按钮">
<SettingItem name="背景色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.bgColor"></n-color-picker>
</SettingItem>
<SettingItem name="边框色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
</SettingItem>
<SettingItem name="边框大小">
<n-input-number v-model:value="optionData.border" size="small" :step="0.5" :min="0"></n-input-number>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { option } from './config'
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
</script>

View File

@@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const FullScreenConfig: ConfigType = {
key: 'FullScreen',
chartKey: 'VFullScreen',
conKey: 'VCFullScreen',
title: '全屏按钮',
category: ChatCategoryEnum.MORE,
categoryName: ChatCategoryEnumName.MORE,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'fullScreen.png'
}

View File

@@ -0,0 +1,111 @@
<template>
<svg @click="toggleFullscreen" v-if="!isFullscreen" viewBox="0 0 1024 1024">
<path
d="M665.6 1017.6c-19.2 0-38.4-19.2-38.4-38.4s19.2-38.4 38.4-38.4h268.8l6.4-268.8c0-19.2 19.2-38.4 38.4-38.4s38.4 19.2 38.4 38.4v294.4c0 32-25.6 51.2-51.2 51.2h-300.8zM51.2 396.8c-19.2 0-38.4-19.2-38.4-38.4V64C12.8 32 38.4 12.8 64 12.8h294.4c19.2 0 38.4 19.2 38.4 38.4s-19.2 38.4-38.4 38.4H89.6v268.8c0 19.2-19.2 38.4-38.4 38.4zM64 1017.6c-32 0-51.2-25.6-51.2-51.2v-294.4c0-19.2 19.2-38.4 38.4-38.4s38.4 19.2 38.4 38.4v217.6l198.4-198.4c6.4-6.4 19.2-12.8 25.6-12.8s19.2 6.4 25.6 12.8c6.4 6.4 12.8 19.2 12.8 25.6 0 12.8-6.4 19.2-12.8 25.6l-198.4 198.4h217.6c19.2 0 38.4 19.2 38.4 38.4s-19.2 38.4-38.4 38.4H64z m915.2-620.8c-19.2 0-38.4-19.2-38.4-38.4V140.8l-198.4 198.4c-6.4 6.4-19.2 12.8-25.6 12.8-12.8 0-19.2-6.4-25.6-12.8-12.8-12.8-12.8-38.4 0-51.2l198.4-198.4h-217.6c-19.2 0-38.4-19.2-38.4-38.4s19.2-38.4 38.4-38.4h294.4c32 0 51.2 25.6 51.2 51.2v294.4c0 19.2-19.2 38.4-38.4 38.4z"
class="fullScreen-border"
></path>
</svg>
<svg @click="toggleFullscreen" v-else viewBox="0 0 1024 1024">
<path
d="M379.336 697.237L153.362 921.55c-14.11 14.007-36.905 13.922-50.912-0.188-14.007-14.11-13.922-36.905 0.188-50.912l227.6-225.927H138.645c-18.99 0-34.385-15.446-34.385-34.5 0-19.053 15.395-34.5 34.385-34.5H413.72c18.99 0 34.384 15.447 34.384 34.5v276c0 9.15-3.622 17.926-10.07 24.396a34.326 34.326 0 0 1-24.314 10.104 34.326 34.326 0 0 1-24.314-10.104 34.559 34.559 0 0 1-10.071-24.396V697.237z m263.395-366.88l227.813-227.813c14.059-14.059 36.853-14.059 50.912 0 14.059 14.059 14.059 36.853 0 50.912l-225.18 225.18h187.147c18.99 0 34.385 15.445 34.385 34.5 0 19.053-15.395 34.5-34.385 34.5H608.346c-18.99 0-34.384-15.447-34.384-34.5v-276c0-9.15 3.622-17.926 10.07-24.396a34.326 34.326 0 0 1 24.314-10.105c9.12 0 17.865 3.635 24.314 10.105a34.559 34.559 0 0 1 10.07 24.395v193.223zM99.385 410a34.326 34.326 0 0 1-24.314-10.105A34.559 34.559 0 0 1 65 375.5v-276C65 80.446 80.395 65 99.385 65h275.077c18.99 0 34.384 15.446 34.384 34.5 0 19.054-15.394 34.5-34.384 34.5H133.769v241.5c0 9.15-3.622 17.925-10.07 24.395A34.326 34.326 0 0 1 99.384 410z m825.23 552H649.538c-18.99 0-34.384-15.446-34.384-34.5 0-19.054 15.394-34.5 34.384-34.5h240.693V651.5c0-19.054 15.394-34.5 34.384-34.5 18.99 0 34.385 15.446 34.385 34.5v276c0 19.054-15.395 34.5-34.385 34.5z"
class="fullScreen-border"
></path>
</svg>
</template>
<script setup lang="ts">
import { PropType, toRefs, ref, onMounted, onUnmounted } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { option } from './config'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType & typeof option>,
required: true
}
})
let { border, bgColor, borderColor } = toRefs(props.chartConfig.option)
const isFullscreen = ref(false)
const checkFullscreen = () => {
isFullscreen.value = !!(
document.fullscreenElement ||
(document as any).webkitFullscreenElement ||
(document as any).mozFullScreenElement ||
(document as any).msFullscreenElement
)
}
checkFullscreen()
const requestFullscreen = (element: Element) => {
if (element.requestFullscreen) {
element.requestFullscreen()
} else if ((document as any).mozRequestFullScreen) {
/* Firefox */
(document as any).mozRequestFullScreen()
} else if ((document as any).webkitRequestFullscreen) {
/* Chrome, Safari and Opera */
(document as any).webkitRequestFullscreen()
} else if ((document as any).msRequestFullscreen) {
/* IE/Edge */
(document as any).msRequestFullscreen()
}
}
const exitFullscreen = () => {
if (document.fullscreenElement && document.exitFullscreen) {
document.exitFullscreen()
} else if ((document as any).mozFullScreenElement && (document as any).mozCancelFullScreen) {
/* Firefox */
(document as any).mozCancelFullScreen()
} else if ((document as any).webkitFullscreenElement && (document as any).webkitExitFullscreen) {
/* Chrome, Safari and Opera */
(document as any).webkitExitFullscreen()
} else if ((document as any).msFullscreenElement && (document as any).msExitFullscreen) {
/* IE/Edge */
(document as any).msExitFullscreen()
}
}
const toggleFullscreen = () => {
if (!isFullscreen.value) {
requestFullscreen(document.documentElement)
} else {
exitFullscreen()
}
isFullscreen.value = !isFullscreen.value
// 由于全屏状态的改变不会立即生效,所以需要延迟一段时间再去获取全屏状态
setTimeout(() => {
checkFullscreen()
}, 1000)
}
// 监听全屏状态的改变,保证多个全屏组件的状态一致
onMounted(() => {
document.addEventListener('fullscreenchange', checkFullscreen)
document.addEventListener('webkitfullscreenchange', checkFullscreen)
document.addEventListener('mozfullscreenchange', checkFullscreen)
document.addEventListener('MSFullscreenChange', checkFullscreen)
})
onUnmounted(() => {
document.removeEventListener('fullscreenchange', checkFullscreen)
document.removeEventListener('webkitfullscreenchange', checkFullscreen)
document.removeEventListener('mozfullscreenchange', checkFullscreen)
document.removeEventListener('MSFullscreenChange', checkFullscreen)
})
</script>
<style lang="scss" scoped>
svg {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
.fullScreen-border {
stroke: v-bind('borderColor');
stroke-width: v-bind('border+"px"');
fill: v-bind('bgColor');
}
</style>

View File

@@ -1,9 +1,19 @@
import { NumberConfig } from './Number/index'
import { TimeCommonConfig } from './TimeCommon/index'
import { ClockConfig } from './Clock/index'
import { FullScreenConfig } from './FullScreen/index'
import { CountDownConfig } from './CountDown/index'
import { FlipperNumberConfig } from './FlipperNumber'
import { PipelineHConfig } from './PipelineH/index'
import { PipelineVConfig } from './PipelineV/index'
export default [NumberConfig, FlipperNumberConfig, TimeCommonConfig, CountDownConfig, ClockConfig, PipelineHConfig, PipelineVConfig]
export default [
NumberConfig,
FlipperNumberConfig,
TimeCommonConfig,
CountDownConfig,
ClockConfig,
FullScreenConfig,
PipelineHConfig,
PipelineVConfig
]

View File

@@ -1,62 +1,63 @@
/**
* 创建 threejs 四大天王
* 场景、相机、渲染器、控制器
*/
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export class Basic {
public scene!: THREE.Scene
public camera!: THREE.PerspectiveCamera
public renderer!: THREE.WebGLRenderer
public controls!: OrbitControls
public dom: HTMLElement
constructor(dom: HTMLElement) {
this.dom = dom
this.initScenes()
this.setControls()
}
/**
* 初始化场景
*/
initScenes() {
this.scene = new THREE.Scene()
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000)
this.camera.position.set(0, 30, -250)
this.renderer = new THREE.WebGLRenderer({
// canvas: this.dom,
alpha: true, // 透明
antialias: true // 抗锯齿
})
this.renderer.setPixelRatio(window.devicePixelRatio) // 设置屏幕像素比
this.renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染器宽高
this.dom.appendChild(this.renderer.domElement) // 添加到dom中
}
/**
* 设置控制器
*/
setControls() {
// 鼠标控制 相机渲染dom
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
this.controls.autoRotateSpeed = 3
// 使动画循环使用时阻尼或自转 意思是否有惯性
this.controls.enableDamping = true
// 动态阻尼系数 就是鼠标拖拽旋转灵敏度
this.controls.dampingFactor = 0.05
// 是否可以缩放
this.controls.enableZoom = true
// 设置相机距离原点的最远距离
this.controls.minDistance = 100
// 设置相机距离原点的最远距离
this.controls.maxDistance = 300
// 是否开启右键拖拽
this.controls.enablePan = false
}
}
/**
* 创建 threejs 四大天王
* 场景、相机、渲染器、控制器
*/
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export class Basic {
public scene!: THREE.Scene
public camera!: THREE.PerspectiveCamera
public renderer!: THREE.WebGLRenderer
public controls!: OrbitControls
public dom: HTMLElement
constructor(dom: HTMLElement) {
this.dom = dom
this.initScenes()
this.setControls()
}
/**
* 初始化场景
*/
initScenes() {
this.scene = new THREE.Scene()
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000)
this.camera.position.set(0, 30, -250)
this.renderer = new THREE.WebGLRenderer({
// canvas: this.dom,
alpha: true, // 透明
antialias: true, // 抗锯齿
preserveDrawingBuffer: true
})
this.renderer.setPixelRatio(window.devicePixelRatio) // 设置屏幕像素比
this.renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染器宽高
this.dom.appendChild(this.renderer.domElement) // 添加到dom中
}
/**
* 设置控制器
*/
setControls() {
// 鼠标控制 相机渲染dom
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
this.controls.autoRotateSpeed = 3
// 使动画循环使用时阻尼或自转 意思是否有惯性
this.controls.enableDamping = true
// 动态阻尼系数 就是鼠标拖拽旋转灵敏度
this.controls.dampingFactor = 0.05
// 是否可以缩放
this.controls.enableZoom = true
// 设置相机距离原点的最远距离
this.controls.minDistance = 100
// 设置相机距离原点的最远距离
this.controls.maxDistance = 300
// 是否开启右键拖拽
this.controls.enablePan = false
}
}

View File

@@ -4,7 +4,7 @@ import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
import { interactActions, ComponentInteractEventEnum } from './interact'
import { interactActions, ComponentInteractEventEnum, DefaultTypeEnum, DifferUnitEnum } from './interact'
import { InputsDateConfig } from './index'
export const option = {
@@ -12,9 +12,14 @@ export const option = {
[COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATE,
// 下拉展示
isPanel: 0,
dataset: dayjs().valueOf(),
differValue: 0
// 默认值
dataset: dayjs().valueOf() as number | number[] | null,
// 默认值类型
defaultType: DefaultTypeEnum.STATIC,
// 动态默认值偏移单位
differUnit: [DifferUnitEnum.DAY, DifferUnitEnum.DAY],
// 动态默认值偏移值
differValue: [0, 0]
}
export default class Config extends PublicConfigClass implements CreateComponentType {

View File

@@ -8,39 +8,67 @@
<collapse-item name="时间配置" :expanded="true">
<setting-item-box name="基础">
<setting-item name="类型">
<n-select v-model:value="optionData.componentInteractEventKey" size="small" :options="datePickerTypeOptions" />
<n-select v-model:value="optionData.componentInteractEventKey" size="small" :options="datePickerTypeOptions"
@update:value="datePickerTypeUpdate"/>
</setting-item>
</setting-item-box>
<setting-item-box name="默认值" :alone="true">
<n-date-picker size="small" v-model:value="optionData.dataset" :type="optionData.componentInteractEventKey" />
</setting-item-box>
<setting-item-box name="默认值">
<setting-item name="类型">
<n-select v-model:value="optionData.defaultType" size="small" :options="defaultTypeOptions"
@update:value="defaultTypeUpdate" />
</setting-item>
<setting-item-box :alone="true">
</setting-item-box>
<setting-item-box v-if="optionData.defaultType === DefaultTypeEnum.STATIC" :alone="true">
<setting-item name="静态默认值">
<n-date-picker size="small" clearable v-model:value="optionData.dataset" :type="optionData.componentInteractEventKey" />
</setting-item>
</setting-item-box>
<setting-item-box v-if="optionData.defaultType === DefaultTypeEnum.DYNAMIC" >
<template #name>
<n-text>动态</n-text>
<n-text></n-text>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon size="21" :depth="3">
<help-outline-icon></help-outline-icon>
</n-icon>
</template>
<n-text>动态值不为0时默认值:取当天时间相加当前值</n-text>
<span>打开页面时浏览器操作系统的系统时间+偏移量(单位)</span>
</n-tooltip>
</template>
<n-input-number v-model:value="optionData.differValue" class="input-num-width" size="small" :min="-40" :max="40">
<template #suffix> </template>
</n-input-number>
<setting-item :name="differValueName">
<n-input-number v-model:value="optionData.differValue[0]" class="input-num-width" size="small">
<template #suffix>
{{DifferUnitObject[optionData.differUnit[0]]}}
</template>
</n-input-number>
</setting-item>
<setting-item :name="differUnitName">
<n-select v-model:value="optionData.differUnit[0]" size="small" :options="differUnitOptions" />
</setting-item>
<setting-item v-if="isRange" name="结束值动态偏移量">
<n-input-number v-model:value="optionData.differValue[1]" class="input-num-width" size="small">
<template #suffix>
{{DifferUnitObject[optionData.differUnit[1]]}}
</template>
</n-input-number>
</setting-item>
<setting-item v-if="isRange" name="结束值偏移单位">
<n-select v-model:value="optionData.differUnit[1]" size="small" :options="differUnitOptions" />
</setting-item>
</setting-item-box>
</collapse-item>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { PropType, computed } from 'vue'
import { icon } from '@/plugins'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { option } from './config'
import { ComponentInteractEventEnum } from './interact'
import { ComponentInteractEventEnum, DefaultTypeEnum, DifferUnitEnum, DifferUnitObject } from './interact'
import dayjs from "dayjs";
const { HelpOutlineIcon } = icon.ionicons5
@@ -100,4 +128,87 @@ const datePickerTypeOptions = [
value: ComponentInteractEventEnum.QUARTER_RANGE
}
]
const defaultTypeOptions = [
{
label: '静态',
value: DefaultTypeEnum.STATIC
},
{
label: '动态',
value: DefaultTypeEnum.DYNAMIC
},
{
label: '无',
value: DefaultTypeEnum.NONE
}
]
const differUnitOptions = [
// ManipulateType
{
value: DifferUnitEnum.DAY,
label: DifferUnitObject[DifferUnitEnum.DAY]
},
{
value: DifferUnitEnum.WEEK,
label: DifferUnitObject[DifferUnitEnum.WEEK]
},
{
value: DifferUnitEnum.MONTH,
label: DifferUnitObject[DifferUnitEnum.MONTH]
},
{
value: DifferUnitEnum.QUARTER,
label: DifferUnitObject[DifferUnitEnum.QUARTER]
},
{
value: DifferUnitEnum.YEAR,
label: DifferUnitObject[DifferUnitEnum.YEAR]
},
{
value: DifferUnitEnum.HOUR,
label: DifferUnitObject[DifferUnitEnum.HOUR]
},
{
value: DifferUnitEnum.MINUTE,
label: DifferUnitObject[DifferUnitEnum.MINUTE]
},
{
value: DifferUnitEnum.SECOND,
label: DifferUnitObject[DifferUnitEnum.SECOND]
},
{
value: DifferUnitEnum.MILLISECOND,
label: DifferUnitObject[DifferUnitEnum.MILLISECOND]
}
]
const isRange = computed(() => {
return props.optionData.componentInteractEventKey.endsWith('range')
})
const differValueName = computed(() => {
return isRange.value ? '开始值动态偏移量' : '动态偏移量'
})
const differUnitName = computed(() => {
return isRange.value ? '开始值偏移单位' : '偏移单位'
})
const datePickerTypeUpdate = () => {
props.optionData.dataset = isRange.value ? [dayjs().valueOf(), dayjs().valueOf()] : dayjs().valueOf()
}
const defaultTypeUpdate = (v: string) => {
if (v === DefaultTypeEnum.STATIC) {
datePickerTypeUpdate()
} else {
// DefaultTypeEnum.
props.optionData.dataset = null
}
}
</script>

View File

@@ -1,6 +1,7 @@
<template>
<n-date-picker
v-model:value="option.dataset"
clearable
:panel="!!chartConfig.option.isPanel"
:type="chartConfig.option.componentInteractEventKey"
:style="`width:${w}px;`"
@@ -9,13 +10,15 @@
</template>
<script setup lang="ts">
import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
import dayjs from 'dayjs'
import { computed, PropType, ref, shallowReactive, toRefs, watch } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartInteract } from '@/hooks'
import { InteractEventOn } from '@/enums/eventEnum'
import { ComponentInteractParamsEnum } from './interact'
import {ComponentInteractEventEnum, ComponentInteractParamsEnum, DefaultTypeEnum} from './interact'
import dayjs, {ManipulateType} from 'dayjs'
import quarterOfYear from 'dayjs/plugin/quarterOfYear';
const props = defineProps({
chartConfig: {
@@ -31,61 +34,107 @@ const option = shallowReactive({
dataset: props.chartConfig.option.dataset
})
const isRange = computed(() => {
return props.chartConfig.option.componentInteractEventKey.endsWith('range')
})
// 监听事件改变
const onChange = (v: number | number[]) => {
if (v instanceof Array) {
const onChange = (v: number | number[] | null) => {
if (isRange.value) {
let dateStart = null
let dateEnd = null
let daterange = null
if(v instanceof Array){
dateStart = v[0]
dateEnd = v[1]
daterange = `${v[0]}-${v[1]}`
}
// 存储到联动数据
useChartInteract(
props.chartConfig,
useChartEditStore,
{
[ComponentInteractParamsEnum.DATE_START]: v[0] || dayjs().valueOf(),
[ComponentInteractParamsEnum.DATE_END]: v[1] || dayjs().valueOf(),
[ComponentInteractParamsEnum.DATE_RANGE]: `${v[0] || dayjs().valueOf()}-${v[1] || dayjs().valueOf()}`
},
InteractEventOn.CHANGE
props.chartConfig,
useChartEditStore,
{
[ComponentInteractParamsEnum.DATE_START]: dateStart,
[ComponentInteractParamsEnum.DATE_END]: dateEnd,
[ComponentInteractParamsEnum.DATE_RANGE]: daterange
},
InteractEventOn.CHANGE
)
} else {
// 存储到联动数据
useChartInteract(
props.chartConfig,
useChartEditStore,
{ [ComponentInteractParamsEnum.DATE]: v || dayjs().valueOf() },
InteractEventOn.CHANGE
props.chartConfig,
useChartEditStore,
{ [ComponentInteractParamsEnum.DATE]: v },
InteractEventOn.CHANGE
)
}
}
watch(
() => props.chartConfig.option.dataset,
(newData: number | number[]) => {
option.dataset = newData
// 关联目标组件首次请求带上默认内容
onChange(newData)
},
{
immediate: true
const getDiffDate = (type: ComponentInteractEventEnum, date: dayjs.Dayjs) => {
// 注册 quarterOfYear 插件
dayjs.extend(quarterOfYear)
switch (type) {
case ComponentInteractEventEnum.DATE:
case ComponentInteractEventEnum.DATE_RANGE:
date = date.startOf('day')
break
case ComponentInteractEventEnum.MONTH:
case ComponentInteractEventEnum.MONTH_RANGE:
date = date.startOf('month')
break
case ComponentInteractEventEnum.YEAR:
case ComponentInteractEventEnum.YEAR_RANGE:
date = date.startOf('year')
break
case ComponentInteractEventEnum.QUARTER:
case ComponentInteractEventEnum.QUARTER_RANGE:
date = date.startOf('quarter')
break
default:
break
}
)
return date
}
// 手动更新
watch(
() => props.chartConfig.option.differValue,
(newData: number) => {
if (props.chartConfig.option.differValue === 0) return
if (typeof option.dataset === 'object') {
option.dataset[0] = dayjs().add(newData, 'day').valueOf()
option.dataset[1] = dayjs().add(newData, 'day').valueOf()
} else {
option.dataset = dayjs().add(newData, 'day').valueOf()
() => {
return {
type: props.chartConfig.option.componentInteractEventKey as ComponentInteractEventEnum,
defaultType: props.chartConfig.option.defaultType as string,
differValue: props.chartConfig.option.differValue as number[],
differUnit: props.chartConfig.option.differUnit as ManipulateType[],
dataset: props.chartConfig.option.dataset as number | number[] | null,
};
},
(newData, oldData) => {
const hasTypeChanged = newData.type !== oldData?.type;
const hasDefaultTypeChanged = newData.defaultType !== oldData?.defaultType;
const hasDifferValueChanged = newData.differValue !== oldData?.differValue;
const hasDifferUnitChanged = newData.differUnit !== oldData?.differUnit;
if (hasTypeChanged || hasDefaultTypeChanged || hasDifferValueChanged || hasDifferUnitChanged) {
if (newData.defaultType === DefaultTypeEnum.NONE) {
props.chartConfig.option.dataset = null;
} else if (newData.defaultType === DefaultTypeEnum.DYNAMIC) {
let date = dayjs();
if (isRange.value) {
props.chartConfig.option.dataset = [
getDiffDate(newData.type,date.add(newData.differValue[0], newData.differUnit[0])).valueOf(),
getDiffDate(newData.type,date.add(newData.differValue[1], newData.differUnit[1])).valueOf(),
];
} else {
props.chartConfig.option.dataset = getDiffDate(newData.type,date.add(newData.differValue[0], newData.differUnit[0])).valueOf()
}
}
}
option.dataset = props.chartConfig.option.dataset;
onChange(option.dataset);
},
{
immediate: true,
}
// 关联目标组件首次请求带上默认内容
onChange(newData)
},
{
immediate: true
}
)
);
</script>
<style lang="scss" scoped>

View File

@@ -22,6 +22,37 @@ export enum ComponentInteractParamsEnum {
DATE_RANGE = 'daterange'
}
export enum DefaultTypeEnum {
NONE = "none",
STATIC = "static",
DYNAMIC = "dynamic"
}
export enum DifferUnitEnum {
DAY = 'd',
WEEK = 'w',
MONTH = 'M',
QUARTER = 'Q',
YEAR = 'y',
HOUR = 'h',
MINUTE = 'm',
SECOND = 's',
MILLISECOND = 'ms',
}
export const DifferUnitObject = {
// https://day.js.org/docs/en/manipulate/add
[DifferUnitEnum.DAY]: '天',
[DifferUnitEnum.WEEK]: '周',
[DifferUnitEnum.MONTH]: '月',
[DifferUnitEnum.QUARTER]: '季度',
[DifferUnitEnum.YEAR]: '年',
[DifferUnitEnum.HOUR]: '小时',
[DifferUnitEnum.MINUTE]: '分钟',
[DifferUnitEnum.SECOND]: '秒',
[DifferUnitEnum.MILLISECOND]: '毫秒',
}
const time = [
{
value: ComponentInteractParamsEnum.DATE,

View File

@@ -0,0 +1,24 @@
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
import { interactActions, ComponentInteractEventEnum } from './interact'
import {InputsInputConfig} from "./index";
export const option = {
// 时间组件展示类型,必须和 interactActions 中定义的数据一致
[COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
// 默认值
inputValue: "0",
// 暴露配置内容给用户
dataset: ""
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = InputsInputConfig.key
public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
public chartConfig = cloneDeep(InputsInputConfig)
public interactActions = interactActions
public option = cloneDeep(option)
}

View File

@@ -0,0 +1,18 @@
<template>
<collapse-item name="输入框配置" :expanded="true">
<setting-item-box name="默认值" :alone="true">
<n-input v-model:value="optionData.dataset" placeholder="若未输入则默认值为0"/>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { option } from './config'
defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
</script>

View File

@@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const InputsInputConfig: ConfigType = {
key: 'InputsInput',
chartKey: 'VInputsInput',
conKey: 'VCInputsInput',
title: '输入框',
category: ChatCategoryEnum.INPUTS,
categoryName: ChatCategoryEnumName.INPUTS,
package: PackagesCategoryEnum.INFORMATIONS,
chartFrame: ChartFrameEnum.STATIC,
image: 'inputs_select.png'
}

View File

@@ -0,0 +1,64 @@
<template>
<div>
<n-input :style="`width:${w}px;`" type="text"
v-model:value="option.value.dataset"
placeholder="请输入"
@change="onChange">
</n-input>
</div>
</template>
<script lang="ts" setup>
import { PropType, toRefs, shallowReactive, watch } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartInteract } from '@/hooks'
import { InteractEventOn } from '@/enums/eventEnum'
import { ComponentInteractParamsEnum } from './interact'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const { w, h } = toRefs(props.chartConfig.attr)
const option = shallowReactive({
value: {
inputValue: props.chartConfig.option.inputValue,
dataset: props.chartConfig.option.dataset
}
})
const onChange = (v: string) => {
if(v == undefined) return;
// 存储到联动数据
useChartInteract(
props.chartConfig,
useChartEditStore,
{ [ComponentInteractParamsEnum.DATA]: v },
InteractEventOn.CHANGE
)
}
// 手动更新
watch(
() => props.chartConfig.option,
(newData: any) => {
option.value = newData
onChange(newData.inputValue)
},
{
immediate: true,
deep: true
}
)
</script>

View File

@@ -0,0 +1,27 @@
import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
// 时间组件类型
export enum ComponentInteractEventEnum {
DATA = 'data'
}
// 联动参数
export enum ComponentInteractParamsEnum {
DATA = 'data'
}
// 定义组件触发回调事件
export const interactActions: InteractActionsType[] = [
{
interactType: InteractEventOn.CHANGE,
interactName: '选择完成',
componentEmitEvents: {
[ComponentInteractEventEnum.DATA]: [
{
value: ComponentInteractParamsEnum.DATA,
label: '选择项'
}
]
}
}
]

View File

@@ -0,0 +1,26 @@
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
import { interactActions, ComponentInteractEventEnum } from './interact'
import {InputsPaginationConfig} from "./index";
export const option = {
// 时间组件展示类型,必须和 interactActions 中定义的数据一致
[COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
// 默认值
pageValue:1,
sizeValue:[2,4,8,10,20],
pageSize:4,
// 暴露配置内容给用户
dataset: 10
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = InputsPaginationConfig.key
public attr = { ...chartInitConfig, w: 395, h: 32, zIndex: -1 }
public chartConfig = cloneDeep(InputsPaginationConfig)
public interactActions = interactActions
public option = cloneDeep(option)
}

View File

@@ -0,0 +1,35 @@
<template>
<collapse-item name="分页配置" :expanded="true">
<setting-item-box :alone="false" name="分页设置">
<setting-item name="默认页码" :alone="true">
<n-input-number v-model:value="optionData.pageValue" size="small" placeholder="字体大小"></n-input-number>
</setting-item>
<setting-item name="分页" :alone="true">
<n-select v-model:value="optionData.pageSize" size="small"
:options="page" />
</setting-item>
<setting-item name="页数" :alone="true">
<n-input-number v-model:value="optionData.dataset" size="small" placeholder="字体大小"></n-input-number>
</setting-item>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import {CollapseItem, SettingItem, SettingItemBox} from '@/components/Pages/ChartItemSetting'
import { option } from './config'
const page = [
{label:'2',value:2},
{label:'4',value:4},
{label:'8',value:8},
{label:'10',value:10},
{label:'20',value:20}
]
defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
</script>

View File

@@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const InputsPaginationConfig: ConfigType = {
key: 'InputsPagination',
chartKey: 'VInputsPagination',
conKey: 'VCInputsPagination',
title: '分页',
category: ChatCategoryEnum.INPUTS,
categoryName: ChatCategoryEnumName.INPUTS,
package: PackagesCategoryEnum.INFORMATIONS,
chartFrame: ChartFrameEnum.STATIC,
image: 'inputs_pagination.png'
}

View File

@@ -0,0 +1,66 @@
<template>
<div>
<n-pagination
@on-update:page="onChange" :style="`width:${w}px;`"
v-model:page="option.value.pageValue"
:page-count="option.value.dataset"
:page-slot="7"
show-size-picker
:page-sizes="option.value.sizeValue"
v-model:page-size="option.value.pageSize"
/>
</div>
</template>
<script lang="ts" setup>
import { PropType, toRefs, shallowReactive, watch } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartInteract } from '@/hooks'
import { InteractEventOn } from '@/enums/eventEnum'
import { ComponentInteractParamsEnum } from './interact'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const { w, h } = toRefs(props.chartConfig.attr)
const option = shallowReactive({
value: {
pageValue: props.chartConfig.option.pageValue,
dataset:props.chartConfig.option.dataset,
sizeValue:props.chartConfig.option.sizeValue,
pageSize:props.chartConfig.option.pageSize
}
})
const onChange = (v: number,v2:number) => {
if(v == undefined) return;
// 存储到联动数据
useChartInteract(
props.chartConfig,
useChartEditStore,
{
[ComponentInteractParamsEnum.DATA]: v ,
[ComponentInteractParamsEnum.DATA2]:v2
},
InteractEventOn.CHANGE
)
}
// 手动更新
watch(
() => props.chartConfig.option,
(newData: any) => {
option.value = newData
onChange(newData.pageValue,newData.pageSize)
},
{
immediate: true,
deep: true
}
)
</script>

View File

@@ -0,0 +1,32 @@
import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
// 时间组件类型
export enum ComponentInteractEventEnum {
DATA = 'data'
}
// 联动参数
export enum ComponentInteractParamsEnum {
DATA = 'data',
DATA2 = 'data2'
}
// 定义组件触发回调事件
export const interactActions: InteractActionsType[] = [
{
interactType: InteractEventOn.CHANGE,
interactName: '选择完成',
componentEmitEvents: {
[ComponentInteractEventEnum.DATA]: [
{
value: ComponentInteractParamsEnum.DATA,
label: '页数'
},
{
value: ComponentInteractParamsEnum.DATA2,
label: '每页条数'
}
]
}
}
]

View File

@@ -1,8 +1,11 @@
<template>
<collapse-item name="标签页配置" :expanded="true">
<setting-item-box name="默认值" :alone="true">
<setting-item-box name="标签类型" :alone="true">
<n-select size="small" v-model:value="optionData.tabType" :options="tabTypeOptions" />
</setting-item-box>
<setting-item-box name="默认值" :alone="true">
<n-select size="small" v-model:value="optionData.tabLabel" value-field="label" :options="optionData.dataset" />
</setting-item-box>
</collapse-item>
</template>

View File

@@ -1,5 +1,5 @@
<template>
<n-tabs :type="option.value.tabType" @update:value="onChange">
<n-tabs :type="option.value.tabType" @update:value="onChange" :default-value="option.value.tabLabel">
<n-tab v-for="(item, index) in option.value.dataset" :name="item.label" :key="index"> {{ item.label }} </n-tab>
</n-tabs>
</template>

View File

@@ -1,5 +1,7 @@
import { InputsDateConfig } from './InputsDate/index'
import { InputsSelectConfig } from './InputsSelect/index'
import { InputsTabConfig } from './InputsTab/index'
import { InputsPaginationConfig } from "./InputsPagination/index";
import { InputsInputConfig} from "./InputsInput/index";
export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig]
export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig,InputsPaginationConfig,InputsInputConfig]

View File

@@ -1,89 +1,89 @@
<template>
<collapse-item name="信息" :expanded="true">
<setting-item-box name="文字" :alone="true">
<setting-item>
<n-input v-model:value="optionData.dataset" size="small"></n-input>
</setting-item>
</setting-item-box>
</collapse-item>
<collapse-item name="样式" :expanded="true">
<setting-item-box name="文字">
<setting-item name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
</setting-item>
<setting-item name="字体大小">
<n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
</setting-item>
<setting-item name="字体粗细">
<n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
</setting-item>
<setting-item name="字间距">
<n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
</setting-item>
</setting-item-box>
<setting-item-box name="阴影">
<setting-item>
<n-space>
<n-switch v-model:value="optionData.showShadow" size="small" />
<n-text>展示阴影</n-text>
</n-space>
</setting-item>
<setting-item name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorShadow"></n-color-picker
></setting-item>
<setting-item name="x">
<n-input-number v-model:value="optionData.hShadow" size="small"></n-input-number
></setting-item>
<setting-item name="y">
<n-input-number v-model:value="optionData.vShadow" size="small"></n-input-number
></setting-item>
<setting-item name="模糊">
<n-input-number v-model:value="optionData.blurShadow" size="small"></n-input-number
></setting-item>
</setting-item-box>
<setting-item-box name="动画">
<setting-item name="动画速度">
<n-input-number
v-model:value="optionData.animationSpeed"
size="small"
placeholder="动画速度"
:min="0"
></n-input-number>
</setting-item>
<setting-item name="动画间隔">
<n-input-number
v-model:value="optionData.animationTime"
size="small"
placeholder="动画间隔"
:min="0"
></n-input-number>
</setting-item>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { option, FontWeightEnum, FontWeightObject } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
const fontWeightOptions = [
{
label: FontWeightEnum.NORMAL,
value: FontWeightObject[FontWeightEnum.NORMAL]
},
{
label: FontWeightEnum.BOLD,
value: FontWeightObject[FontWeightEnum.BOLD]
}
]
</script>
<template>
<collapse-item name="信息" :expanded="true">
<setting-item-box name="文字" :alone="true">
<setting-item>
<n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
</setting-item>
</setting-item-box>
</collapse-item>
<collapse-item name="样式" :expanded="true">
<setting-item-box name="文字">
<setting-item name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
</setting-item>
<setting-item name="字体大小">
<n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
</setting-item>
<setting-item name="字体粗细">
<n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
</setting-item>
<setting-item name="字间距">
<n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
</setting-item>
</setting-item-box>
<setting-item-box name="阴影">
<setting-item>
<n-space>
<n-switch v-model:value="optionData.showShadow" size="small" />
<n-text>展示阴影</n-text>
</n-space>
</setting-item>
<setting-item name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorShadow"></n-color-picker
></setting-item>
<setting-item name="x">
<n-input-number v-model:value="optionData.hShadow" size="small"></n-input-number
></setting-item>
<setting-item name="y">
<n-input-number v-model:value="optionData.vShadow" size="small"></n-input-number
></setting-item>
<setting-item name="模糊">
<n-input-number v-model:value="optionData.blurShadow" size="small"></n-input-number
></setting-item>
</setting-item-box>
<setting-item-box name="动画">
<setting-item name="动画速度">
<n-input-number
v-model:value="optionData.animationSpeed"
size="small"
placeholder="动画速度"
:min="0"
></n-input-number>
</setting-item>
<setting-item name="动画间隔">
<n-input-number
v-model:value="optionData.animationTime"
size="small"
placeholder="动画间隔"
:min="0"
></n-input-number>
</setting-item>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { option, FontWeightEnum, FontWeightObject } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
const fontWeightOptions = [
{
label: FontWeightEnum.NORMAL,
value: FontWeightObject[FontWeightEnum.NORMAL]
},
{
label: FontWeightEnum.BOLD,
value: FontWeightObject[FontWeightEnum.BOLD]
}
]
</script>

View File

@@ -1,7 +1,7 @@
<template>
<div class="go-text-box">
<div class="content">
<span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click"></span>
<span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click">{{ option.dataset }}</span>
<span style="white-space: pre-wrap" v-else>{{ option.dataset }}</span>
</div>
</div>

View File

@@ -1,45 +1,45 @@
<template>
<collapse-item name="信息" :expanded="true">
<setting-item-box name="文字" :alone="true">
<setting-item>
<n-input v-model:value="optionData.dataset" size="small"></n-input>
</setting-item>
</setting-item-box>
</collapse-item>
<collapse-item name="样式" :expanded="true">
<setting-item-box name="文字">
<setting-item name="字体大小">
<n-input-number v-model:value="optionData.size" size="small" placeholder="字体大小"></n-input-number>
</setting-item>
</setting-item-box>
<setting-item-box name="渐变色参数">
<setting-item name="起始值">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.gradient.from"></n-color-picker>
</setting-item>
<setting-item name="结束值">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.gradient.to"></n-color-picker>
</setting-item>
<setting-item name="偏移角度">
<n-input-number v-model:value="optionData.gradient.deg" size="small" placeholder="颜色旋转"></n-input-number>
</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
}
})
</script>
<template>
<collapse-item name="信息" :expanded="true">
<setting-item-box name="文字" :alone="true">
<setting-item>
<n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
</setting-item>
</setting-item-box>
</collapse-item>
<collapse-item name="样式" :expanded="true">
<setting-item-box name="文字">
<setting-item name="字体大小">
<n-input-number v-model:value="optionData.size" size="small" placeholder="字体大小"></n-input-number>
</setting-item>
</setting-item-box>
<setting-item-box name="渐变色参数">
<setting-item name="起始值">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.gradient.from"></n-color-picker>
</setting-item>
<setting-item name="结束值">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.gradient.to"></n-color-picker>
</setting-item>
<setting-item name="偏移角度">
<n-input-number v-model:value="optionData.gradient.deg" size="small" placeholder="颜色旋转"></n-input-number>
</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
}
})
</script>

View File

@@ -0,0 +1,35 @@
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { TablesBasicConfig } from './index'
import dataJson from './data.json'
const { dimensions, source } = dataJson
export const option = {
dataset: { dimensions, source },
pagination: {
page: 1,
pageSize: 5
},
align: 'center',
style: {
border: 'on',
singleColumn: 'off',
singleLine: 'off',
bottomBordered: 'on',
striped: 'on',
fontSize: 16,
borderWidth: 0,
borderColor: 'black',
borderStyle: 'solid'
},
inputShow: 'none'
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = TablesBasicConfig.key
public attr = { ...chartInitConfig, w: 600, h: 300, zIndex: -1 }
public chartConfig = cloneDeep(TablesBasicConfig)
public option = cloneDeep(option)
}

View File

@@ -0,0 +1,162 @@
<template>
<collapse-item name="表格设置" :expanded="true">
<n-tag type="primary">若配置无响应请在预览页面查看效果</n-tag>
<setting-item-box :alone="true" name="对齐方式">
<setting-item :alone="true">
<n-select
v-model:value="optionData.align"
size="small"
:options="[
{ label: '靠左', value: 'left' },
{ label: '居中', value: 'center' },
{ label: '靠右', value: 'right' }
]"
/>
</setting-item>
</setting-item-box>
<setting-item-box :alone="false" name="分页设置">
<setting-item name="默认页码" :alone="true">
<n-input-number v-model:value="optionData.pagination.page" size="small" placeholder="字体大小"></n-input-number>
</setting-item>
<setting-item name="分页" :alone="true">
<n-select v-model:value="optionData.pagination.pageSize" size="small" :options="page" />
</setting-item>
</setting-item-box>
<setting-item-box :alone="false" name="表格数据">
<SettingItem name="表头名称" class="form_name">
<div style="width: 260px">
<n-input v-model:value="header" size="small" placeholder="表头数据(英文','分割)"></n-input>
</div>
</SettingItem>
</setting-item-box>
<setting-item-box :alone="false" name="表格样式">
<SettingItem name="显示边框" :alone="true">
<n-select v-model:value="(optionData as any).style.border" size="small" :options="borderFlag" />
</SettingItem>
<SettingItem name="底部边框" :alone="true">
<n-select
v-model:value="(optionData as any).style.bottomBordered"
size="small"
:options="bottom_borderedFlag"
/>
</SettingItem>
<SettingItem name="列分割线" :alone="true">
<n-select v-model:value="(optionData as any).style.singleLine" size="small" :options="columnFlag" />
</SettingItem>
<SettingItem name="行分割线" :alone="true">
<n-select v-model:value="(optionData as any).style.singleColumn" size="small" :options="lineFlag" />
</SettingItem>
<SettingItem name="斑马条纹" :alone="true">
<n-select v-model:value="(optionData as any).style.striped" size="small" :options="stripedFlag" />
</SettingItem>
<setting-item name="字体大小" :alone="true">
<n-input-number
v-model:value="optionData.style.fontSize"
:min="12"
size="small"
placeholder="字体大小"
></n-input-number>
</setting-item>
<setting-item name="边框宽度" :alone="true">
<n-input-number
v-model:value="optionData.style.borderWidth"
:min="0"
size="small"
placeholder="字体大小"
></n-input-number>
</setting-item>
<setting-item name="边框颜色" :alone="true">
<n-color-picker size="small" :modes="['rgb']" v-model:value="optionData.style.borderColor"></n-color-picker>
</setting-item>
<setting-item name="边框样式" :alone="true">
<n-select v-model:value="optionData.style.borderStyle" size="small" :options="borderStyleFlag" />
</setting-item>
<SettingItem name="表格搜索(前端静态搜索)" :alone="true">
<n-select v-model:value="optionData.inputShow" size="small" :options="inputSelect" />
</SettingItem>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType, watch, ref } from 'vue'
import { option } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
const page = [
{ label: '2', value: 2 },
{ label: '5', value: 5 },
{ label: '10', value: 10 },
{ label: '15', value: 15 },
{ label: '30', value: 30 }
]
const borderFlag = [
{ label: '显示', value: 'on' },
{ label: '不显示', value: 'off' }
]
const columnFlag = [
{ label: '显示', value: 'off' },
{ label: '不显示', value: 'on' }
]
const lineFlag = [
{ label: '显示', value: 'off' },
{ label: '不显示', value: 'on' }
]
const bottom_borderedFlag = [
{ label: '显示', value: 'on' },
{ label: '不显示', value: 'off' }
]
const stripedFlag = [
{ label: '显示', value: 'on' },
{ label: '不显示', value: 'off' }
]
const borderStyleFlag = [
{ label: '实线边框', value: 'solid' },
{ label: '虚线边框', value: 'dashed' },
{ label: '点状边框', value: 'dotted' },
{ label: '双线边框', value: 'double' }
]
const inputSelect = [
{ label: '停用', value: 'none' },
{ label: '启用', value: 'flex' }
]
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
const header = ref()
const median = ref<string[]>([])
props.optionData.dataset.dimensions.forEach(item => {
median.value.push(item.title)
})
//转string
watch(
() => props.optionData,
() => {
median.value = []
props.optionData.dataset.dimensions.forEach(item => {
median.value.push(item.title)
})
header.value = median.value.toString()
},
{
deep: false,
immediate: true
}
)
//更新columns
watch([header], ([headerNew], [headerOld]) => {
if (headerNew !== headerOld) {
headerNew.split(',').forEach((item: string, index: number) => {
if (index + 1 <= props.optionData.dataset.dimensions.length) {
props.optionData.dataset.dimensions[index].title = headerNew.split(',')[index]
}
})
}
})
</script>

View File

@@ -0,0 +1,60 @@
{
"dimensions": [
{
"title": "产品名称",
"key": "productName"
},
{
"title": "产品销量(万)",
"key": "totalSum"
},
{
"title": "销售额(万)",
"key": "totalAmount"
}
],
"source": [
{
"key": 0,
"productName": "产品A1",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 1,
"productName": "产品B1",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 2,
"productName": "产品C1",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 3,
"productName": "产品D1",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 4,
"productName": "产品A2",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 5,
"productName": "产品D2",
"totalSum": 10,
"totalAmount": 10
},
{
"key": 6,
"productName": "产品A3",
"totalSum": 10,
"totalAmount": 10
}
]
}

View File

@@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const TablesBasicConfig: ConfigType = {
key: 'TablesBasic',
chartKey: 'VTablesBasic',
conKey: 'VCTablesBasic',
title: '基础分页表格',
category: ChatCategoryEnum.TABLE,
categoryName: ChatCategoryEnumName.TABLE,
package: PackagesCategoryEnum.TABLES,
chartFrame: ChartFrameEnum.COMMON,
image: 'tables_basic.png'
}

View File

@@ -0,0 +1,95 @@
<template>
<div class="go-tables-basic">
<n-input
v-model:value="inputData"
placeholder="请输入信息"
:style="`display: ${inputShow}`"
style="margin-bottom: 5px; float: right; width: 240px"
>
<template #prefix>
<n-icon :component="SearchIcon" />
</template>
</n-input>
<n-data-table
:style="`
width: ${w}px;
height: ${h}px;
font-size: ${option.style.fontSize}px;
border-width: ${option.style.border === 'on' ? option.style.borderWidth : 0}px;
border-color: ${option.style.borderColor};
border-style: ${option.style.borderStyle}`"
:bordered="option.style.border === 'on'"
:single-column="option.style.singleColumn === 'on'"
:single-line="option.style.singleLine === 'on'"
:bottom-bordered="option.style.bottomBordered === 'on'"
:striped="option.style.striped === 'on'"
:max-height="h"
size="small"
:columns="option.dataset.dimensions"
:data="filterData"
:pagination="pagination"
/>
</div>
</template>
<script setup lang="ts">
import { computed, PropType, toRefs, watch, reactive, ref } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { icon } from '@/plugins'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const { SearchIcon } = icon.ionicons5
//查询字段
const inputData = ref('')
//前台过滤
const filterData = computed(() => {
return option?.dataset?.source?.filter((item: any) => {
return Object.values(item).some(val => {
return String(val).toLowerCase().includes(inputData.value.toLowerCase())
})
})
})
const { align, pagination, inputShow } = toRefs(props.chartConfig.option)
pagination.value.onChange = (page: number) => {
pagination.value.page = page
}
const { w, h } = toRefs(props.chartConfig.attr)
const option = reactive({
dataset: props.chartConfig.option.dataset,
style: props.chartConfig.option.style
})
watch(
() => props.chartConfig.option.dataset,
(newData: any) => {
option.dataset = newData
option?.dataset?.dimensions?.forEach((header: any) => {
header.align = align.value
})
},
{
immediate: true,
deep: true
}
)
</script>
<style lang="scss" scoped>
@include go('tables-basic') {
display: flex;
flex-direction: column;
gap: 15px;
align-items: flex-end;
}
</style>

View File

@@ -1,4 +1,5 @@
import { TableListConfig } from './TableList'
import { TableScrollBoardConfig } from './TableScrollBoard'
import { TablesBasicConfig } from "./TablesBasic/index";
export default [TableListConfig, TableScrollBoardConfig]
export default [TableListConfig, TableScrollBoardConfig,TablesBasicConfig]

View File

@@ -525,8 +525,8 @@ export const useChartEditStore = defineStore({
}
const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => {
e = cloneDeep(e)
e.attr.x = this.getMousePosition.x + 30
e.attr.y = this.getMousePosition.y + 30
e.attr.x = this.getMousePosition.startX
e.attr.y = this.getMousePosition.startY
// 外层生成新 id
e.id = getUUID()
// 分组列表生成新 id
@@ -535,11 +535,11 @@ export const useChartEditStore = defineStore({
item.id = getUUID()
})
}
return e
}
const isCut = recordCharts.type === HistoryActionTypeEnum.CUT
const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [ recordCharts.charts ]
const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [recordCharts.charts]
// 多项
targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => {
this.addComponentList(parseHandle(e), undefined, true)
@@ -639,7 +639,7 @@ export const useChartEditStore = defineStore({
} else {
const group = historyData[0] as CreateComponentGroupType
group.groupList.forEach(item => {
ids.push(item.id)
ids.unshift(item.id)
})
}
this.setGroup(ids, false)
@@ -788,7 +788,7 @@ export const useChartEditStore = defineStore({
// 高
groupAttr.b = b < y + h ? y + h : b
targetList.push(item)
targetList.unshift(item)
historyList.push(toRaw(item))
})
@@ -834,7 +834,7 @@ export const useChartEditStore = defineStore({
if (isHistory) chartHistoryStore.createUnGroupHistory(cloneDeep([targetGroup]))
// 分离组件并还原位置属性
targetGroup.groupList.forEach(item => {
targetGroup.groupList.reverse().forEach(item => {
item.attr.x = item.attr.x + targetGroup.attr.x
item.attr.y = item.attr.y + targetGroup.attr.y
if (!callBack) {

View File

@@ -1,78 +1,84 @@
@import './config.scss';
@import './function.scss';
@import '../theme.scss';
@mixin go($block) {
$B: $namespace + '-' + $block;
.#{$B} {
@content;
}
}
@mixin goId($block) {
$B: $namespace + '-' + $block;
##{$B} {
@content;
}
}
@mixin deep() {
:deep() {
@content;
}
}
@mixin when($state) {
@at-root {
&.#{$state-prefix + $state} {
@content;
}
}
}
@mixin themeify {
@each $theme-name, $theme-map in $themes {
$theme-map: $theme-map !global;
[data-theme='#{$theme-name}'] & {
@content;
}
}
}
@mixin fetch-theme($param) {
@include themeify {
#{$param}: themed($param);
}
}
@mixin fetch-theme-custom ($key, $value) {
@include themeify {
#{$key}: themed($value);
}
}
//获取背景颜色
@mixin fetch-bg-color($target) {
@include themeify {
background-color: themed($target);
}
}
//获取背景渐变颜色
@mixin background-image($target) {
@include themeify {
background-image: themed($target);
}
}
//设置边框颜色
@mixin fetch-border-color($target) {
@include themeify {
border-color: themed($target);
}
}
@mixin hover-border-color($target) {
@include themeify {
border: 1px solid themed($target);
}
}
@import './config.scss';
@import './function.scss';
@import '../theme.scss';
@mixin go($block) {
$B: $namespace + '-' + $block;
.#{$B} {
@content;
}
}
@mixin dark {
[data-theme='dark'] {
@content;
}
}
@mixin goId($block) {
$B: $namespace + '-' + $block;
##{$B} {
@content;
}
}
@mixin deep() {
:deep() {
@content;
}
}
@mixin when($state) {
@at-root {
&.#{$state-prefix + $state} {
@content;
}
}
}
@mixin themeify {
@each $theme-name, $theme-map in $themes {
$theme-map: $theme-map !global;
[data-theme='#{$theme-name}'] & {
@content;
}
}
}
@mixin fetch-theme($param) {
@include themeify {
#{$param}: themed($param);
}
}
@mixin fetch-theme-custom ($key, $value) {
@include themeify {
#{$key}: themed($value);
}
}
//获取背景颜色
@mixin fetch-bg-color($target) {
@include themeify {
background-color: themed($target);
}
}
//获取背景渐变颜色
@mixin background-image($target) {
@include themeify {
background-image: themed($target);
}
}
//设置边框颜色
@mixin fetch-border-color($target) {
@include themeify {
border-color: themed($target);
}
}
@mixin hover-border-color($target) {
@include themeify {
border: 1px solid themed($target);
}
}

View File

@@ -1,9 +1,15 @@
// 页面全局样式
// 去除高德地图 logo
.amap-logo {
display: none !important;
opacity: 0 !important;
}
.amap-copyright {
opacity: 0 !important;
}
// 页面全局样式
// 去除高德地图 logo
.amap-logo {
display: none !important;
opacity: 0 !important;
}
.amap-copyright {
opacity: 0 !important;
}
[data-theme='dark'] {
body {
background-color: #18181c;
}
}

View File

@@ -330,3 +330,23 @@ export const JSONParse = (data: string) => {
export const setTitle = (title?: string) => {
title && (document.title = title)
}
/**
* 处理网页关闭事件
*/
export const addWindowUnload = () => {
// 关闭网页出现离开提示
window.onbeforeunload = function (e) {
e = e || window.event
// 兼容IE8和Firefox 4之前的版本
if (e) {
e.returnValue = '您确定要离开当前页面吗?请确认是否保存数据!'
}
// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
return '您确定要离开当前页面吗?请确认是否保存数据!'
}
// 返回销毁事件函数
return () => {
window.onbeforeunload = null
}
}

View File

@@ -131,7 +131,11 @@ const sendHandle = async () => {
loading.value = false
if (res) {
const { data } = res
if (!data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式,请配置过滤器!')
if (!data && !targetData.value.filter) {
window['$message'].warning('您的数据不符合默认格式,请配置过滤器!')
showMatching.value = true
return
}
targetData.value.option.dataset = newFunctionHandle(data, res, targetData.value.filter)
showMatching.value = true
return

View File

@@ -117,7 +117,11 @@ const sendHandle = async () => {
const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
loading.value = false
if (res) {
if (!res?.data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式,请配置过滤器!')
if (!res?.data && !targetData.value.filter) {
window['$message'].warning('您的数据不符合默认格式,请配置过滤器!')
showMatching.value = true
return
}
targetData.value.option.dataset = newFunctionHandle(res?.data, res, targetData.value.filter)
showMatching.value = true
return

View File

@@ -16,7 +16,7 @@
<p>
<span class="func-annotate">// {{ EventTypeName[eventName] }}</span>
<br />
<span class="func-keyword">async {{ eventName }}</span> (mouseEvent) {
<span class="func-keyword">async {{ eventName }}</span> (mouseEvent,components) {
</p>
<p class="go-ml-4">
<n-code :code="(targetData.events.baseEvent || {})[eventName] || ''" language="typescript"></n-code>
@@ -52,7 +52,7 @@
<!-- 函数名称 -->
<p class="go-pl-3">
<span class="func-keyword">async function &nbsp;&nbsp;</span>
<span class="func-keyNameWord">{{ eventName }}(mouseEvent)&nbsp;&nbsp;{</span>
<span class="func-keyNameWord">{{ eventName }}(mouseEvent,components)&nbsp;&nbsp;{</span>
</p>
<!-- 编辑主体 -->
<monaco-editor v-model:modelValue="baseEvent[eventName]" height="480px" language="javascript" />

View File

@@ -58,7 +58,7 @@
<help-outline-icon></help-outline-icon>
</n-icon>
</template>
<n-text>不支持静态组件</n-text>
<n-text>不支持静态组件支持组件公共APi</n-text>
</n-tooltip>
</template>
<n-select
@@ -89,7 +89,7 @@
</n-table>
</setting-item-box>
<n-tag :bordered="false" type="primary"> 关联目标组件请求参数 </n-tag>
<n-tag :bordered="false" type="primary"> 关联目标请求参数 </n-tag>
<setting-item-box
:name="requestParamsItem"
@@ -125,7 +125,7 @@ import { VNodeChild, computed } from 'vue'
import { SelectOption, SelectGroupOption } from 'naive-ui'
import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
import { CreateComponentType, CreateComponentGroupType, ChartFrameEnum } from '@/packages/index.d'
import { RequestParamsTypeEnum } from '@/enums/httpEnum'
import { RequestParamsTypeEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
import { InteractEventOn, COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
import { icon } from '@/plugins'
import noData from '@/assets/images/canvas/noData.png'
@@ -154,6 +154,11 @@ const option = computed(() => {
// 绑定组件数据 request
const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => {
if (!id) return {}
const globalConfigPindApr = chartEditStore.requestGlobalConfig.requestDataPond.find(item => {
return item.dataPondId === id
})?.dataPondRequestConfig.requestParams
if (globalConfigPindApr) return globalConfigPindApr[key]
return chartEditStore.componentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key]
}
@@ -178,12 +183,10 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
iter: Array<CreateComponentType | CreateComponentGroupType>,
val: CreateComponentType | CreateComponentGroupType
) => {
if (val.groupList && val.groupList.length > 0) {
iter.push(val)
} else {
if (!val.groupList && val.request.requestDataType === RequestDataTypeEnum.AJAX && val.request.requestUrl) {
iter.push(val)
}
return val.groupList ? [...iter, ...fnFlattern(val.groupList)] : iter
return val.groupList && val.groupList.length > 0 ? [...iter, ...fnFlattern(val.groupList)] : iter
},
[]
)
@@ -203,18 +206,26 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
const mapOptionList = filterOptionList.map(item => ({
id: item.id,
title: item.chartConfig.title,
disabled: false
disabled: false,
type: 'componentList'
}))
const requestDataPond = chartEditStore.requestGlobalConfig.requestDataPond.map(item => ({
id: item.dataPondId,
title: item.dataPondName,
disabled: false,
type: 'requestDataPond'
}))
const tarArr = requestDataPond.concat(mapOptionList)
targetData.value.events.interactEvents?.forEach(iaItem => {
mapOptionList.forEach(optionItem => {
tarArr.forEach(optionItem => {
if (optionItem.id === iaItem.interactComponentId) {
optionItem.disabled = true
}
})
})
return mapOptionList
return tarArr
}
// 新增模块

View File

@@ -27,7 +27,7 @@
</div>
</div>
<!-- 修复右下角白点用的 -->
<div v-if="designStore.getDarkTheme" class="fix-edit-screens-block"></div>
<!-- <div v-if="designStore.getDarkTheme" class="fix-edit-screens-block"></div> -->
</div>
</template>
<script setup lang="ts">
@@ -159,9 +159,11 @@ const dragCanvas = (e: any) => {
const canvasBox = () => {
const layoutDom = document.getElementById('go-chart-edit-layout')
if (layoutDom) {
// 此处减去滚动条的宽度和高度
const scrollW = 20
return {
height: layoutDom.clientHeight - 25,
width: layoutDom.clientWidth
height: layoutDom.clientHeight - scrollW,
width: layoutDom.clientWidth - scrollW
}
}
return {
@@ -288,7 +290,6 @@ window.onKeySpacePressHold = (isHold: boolean) => {
<style lang="scss" scoped>
@include go('sketch-rule') {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
@@ -319,6 +320,10 @@ window.onKeySpacePressHold = (isHold: boolean) => {
border-radius: 5px;
background-color: rgba(144, 146, 152, 0.3);
}
// 修复右下角白点用的
&::-webkit-scrollbar-corner {
background-color: transparent;
}
}
.fix-edit-screens-block {
@@ -339,7 +344,7 @@ window.onKeySpacePressHold = (isHold: boolean) => {
.canvas {
position: absolute;
top: 50%;
top:50%;
left: 50%;
transform-origin: 50% 0;
transform: translateY(-50%);

View File

@@ -87,7 +87,14 @@ import { onMounted, computed, provide } from 'vue'
import { chartColors } from '@/settings/chartThemes/index'
import { MenuEnum } from '@/enums/editPageEnum'
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
import {
animationsClass,
getFilterStyle,
getTransformStyle,
getBlendModeStyle,
colorCustomMerge,
addWindowUnload
} from '@/utils'
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -110,6 +117,9 @@ const chartEditStore = useChartEditStore()
const { handleContextMenu } = useContextMenu()
const { dataSyncFetch, intervalDataSyncUpdate } = useSync()
// 加入网页关闭提示
addWindowUnload()
// 编辑时注入scale变量消除警告
provide(SCALE_KEY, null)
@@ -186,7 +196,7 @@ onMounted(() => {
// 获取数据
dataSyncFetch()
// 定时更新数据
intervalDataSyncUpdate()
// intervalDataSyncUpdate()
})
</script>

View File

@@ -10,7 +10,8 @@
...getTransformStyle(item.styles),
...getStatusStyle(item.status),
...getPreviewConfigStyle(item.preview),
...getBlendModeStyle(item.styles) as any
...getBlendModeStyle(item.styles) as any,
...getSizeStyle(item.attr)
}"
>
<!-- 分组 -->
@@ -74,7 +75,7 @@ const themeColor = computed(() => {
// 组件渲染结束初始化数据池
clearMittDataPondMap()
onMounted(() => {
initDataPond(chartEditStore.requestGlobalConfig)
initDataPond(useChartEditStore)
})
</script>

View File

@@ -13,7 +13,42 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
const height = ref(localStorageInfo.editCanvasConfig.height)
const scaleRef = ref({ width: 1, height: 1 })
provide(SCALE_KEY, scaleRef);
provide(SCALE_KEY, scaleRef)
// 监听鼠标滚轮 +ctrl 键
const useAddWheelHandle = (removeEvent: Function) => {
addEventListener(
'wheel',
(e: any) => {
if (window?.$KeyboardActive?.ctrl) {
e.preventDefault()
e.stopPropagation()
removeEvent()
const transform = previewRef.value?.style.transform
const regRes = transform.match(/scale\((\d+\.?\d*)*/) as RegExpMatchArray
const width = regRes[1]
const previewBoxDom = document.querySelector('.go-preview') as HTMLElement
const entityDom = document.querySelector('.go-preview-entity') as HTMLElement
if (previewBoxDom) {
previewBoxDom.style.overflow = 'unset'
previewBoxDom.style.position = 'absolute'
}
if (entityDom) {
entityDom.style.overflow = 'unset'
}
if (e.wheelDelta > 0) {
const resNum = parseFloat(Number(width).toFixed(2))
previewRef.value.style.transform = `scale(${resNum > 5 ? 5 : resNum + 0.1})`
} else {
const resNum = parseFloat(Number(width).toFixed(2))
previewRef.value.style.transform = `scale(${resNum < 0.2 ? 0.2 : resNum - 0.1})`
}
}
},
{ passive: false }
)
}
const updateScaleRef = (scale: { width: number; height: number }) => {
// 这里需要解构保证赋值给scaleRef的为一个新对象
@@ -24,74 +59,82 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
// 屏幕适配
onMounted(() => {
switch (localStorageInfo.editCanvasConfig.previewScaleType) {
case PreviewScaleEnum.FIT: (() => {
const { calcRate, windowResize, unWindowResize } = usePreviewFitScale(
width.value as number,
height.value as number,
previewRef.value,
updateScaleRef
)
calcRate()
windowResize()
onUnmounted(() => {
unWindowResize()
})
})()
break;
case PreviewScaleEnum.SCROLL_Y: (() => {
const { calcRate, windowResize, unWindowResize } = usePreviewScrollYScale(
width.value as number,
height.value as number,
previewRef.value,
(scale) => {
const dom = entityRef.value
dom.style.width = `${width.value * scale.width}px`
dom.style.height = `${height.value * scale.height}px`
updateScaleRef(scale)
}
)
calcRate()
windowResize()
onUnmounted(() => {
unWindowResize()
})
})()
case PreviewScaleEnum.FIT:
;(() => {
const { calcRate, windowResize, unWindowResize } = usePreviewFitScale(
width.value as number,
height.value as number,
previewRef.value,
updateScaleRef
)
calcRate()
windowResize()
useAddWheelHandle(unWindowResize)
onUnmounted(() => {
unWindowResize()
})
})()
break
case PreviewScaleEnum.SCROLL_Y:
;(() => {
const { calcRate, windowResize, unWindowResize } = usePreviewScrollYScale(
width.value as number,
height.value as number,
previewRef.value,
scale => {
const dom = entityRef.value
dom.style.width = `${width.value * scale.width}px`
dom.style.height = `${height.value * scale.height}px`
updateScaleRef(scale)
}
)
calcRate()
windowResize()
useAddWheelHandle(unWindowResize)
onUnmounted(() => {
unWindowResize()
})
})()
break;
case PreviewScaleEnum.SCROLL_X: (() => {
const { calcRate, windowResize, unWindowResize } = usePreviewScrollXScale(
width.value as number,
height.value as number,
previewRef.value,
(scale) => {
const dom = entityRef.value
dom.style.width = `${width.value * scale.width}px`
dom.style.height = `${height.value * scale.height}px`
updateScaleRef(scale)
}
)
calcRate()
windowResize()
onUnmounted(() => {
unWindowResize()
})
})()
break
case PreviewScaleEnum.SCROLL_X:
;(() => {
const { calcRate, windowResize, unWindowResize } = usePreviewScrollXScale(
width.value as number,
height.value as number,
previewRef.value,
scale => {
const dom = entityRef.value
dom.style.width = `${width.value * scale.width}px`
dom.style.height = `${height.value * scale.height}px`
updateScaleRef(scale)
}
)
calcRate()
windowResize()
useAddWheelHandle(unWindowResize)
onUnmounted(() => {
unWindowResize()
})
})()
break;
case PreviewScaleEnum.FULL: (() => {
const { calcRate, windowResize, unWindowResize } = usePreviewFullScale(
width.value as number,
height.value as number,
previewRef.value,
updateScaleRef
)
calcRate()
windowResize()
onUnmounted(() => {
unWindowResize()
})
})()
break;
break
case PreviewScaleEnum.FULL:
;(() => {
const { calcRate, windowResize, unWindowResize } = usePreviewFullScale(
width.value as number,
height.value as number,
previewRef.value,
updateScaleRef
)
calcRate()
windowResize()
useAddWheelHandle(unWindowResize)
onUnmounted(() => {
unWindowResize()
})
})()
break
}
})

View File

@@ -1,5 +1,5 @@
<template>
<div :class="`go-preview ${chartEditStore.editCanvasConfig.previewScaleType}`">
<div :class="`go-preview ${chartEditStore.editCanvasConfig.previewScaleType}`" @mousedown="dragCanvas">
<template v-if="showEntity">
<!-- 实体区域 -->
<div ref="entityRef" class="go-preview-entity">
@@ -30,7 +30,7 @@
import { computed } from 'vue'
import { PreviewRenderList } from './components/PreviewRenderList'
import { getFilterStyle, setTitle } from '@/utils'
import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
import { getEditCanvasConfigStyle, getSessionStorageInfo, keyRecordHandle, dragCanvas } from './utils'
import { useComInstall } from './hooks/useComInstall.hook'
import { useScale } from './hooks/useScale.hook'
import { useStore } from './hooks/useStore.hook'
@@ -60,6 +60,9 @@ const showEntity = computed(() => {
useStore(chartEditStore)
const { entityRef, previewRef } = useScale(chartEditStore)
const { show } = useComInstall(chartEditStore)
// 开启键盘监听
keyRecordHandle()
</script>
<style lang="scss" scoped>

View File

@@ -0,0 +1,55 @@
import { listen } from 'dom-helpers'
import throttle from 'lodash/throttle'
let prevMoveXValue = [0, 0]
let prevMoveYValue = [0, 0]
// 拖拽处理
export const dragCanvas = (e: MouseEvent) => {
const previewBoxDom = document.querySelector('.go-preview') as HTMLElement
if (!previewBoxDom || previewBoxDom.style.position !== 'absolute') return
if (!window.$KeyboardActive?.space) return
e.preventDefault()
e.stopPropagation()
// @ts-ignore
document.activeElement?.blur()
const startX = e.screenX
const startY = e.screenY
const listenMousemove = listen(
window,
'mousemove',
throttle((moveEvent: MouseEvent) => {
const nx = moveEvent.screenX - startX
const ny = moveEvent.screenY - startY
const [prevMoveX1, prevMoveX2] = prevMoveXValue
const [prevMoveY1, prevMoveY2] = prevMoveYValue
prevMoveXValue = [prevMoveX2, nx]
prevMoveYValue = [prevMoveY2, ny]
// 去除小数部分
if (previewBoxDom) {
const oldLeft = previewBoxDom.style.left ? Number(previewBoxDom.style.left.split('px')[0]) : 0
const oldTop = previewBoxDom.style.top ? Number(previewBoxDom.style.top.split('px')[0]) : 0
previewBoxDom.style.left =
oldLeft +
(prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)) +
'px'
previewBoxDom.style.top =
oldTop +
(prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1)) +
'px'
}
}, 20)
)
const listenMouseup = listen(window, 'mouseup', () => {
prevMoveXValue = [0, 0]
prevMoveYValue = [0, 0]
listenMousemove()
listenMouseup()
})
}

View File

@@ -1,2 +1,4 @@
export * from './style'
export * from './storage'
export * from './style'
export * from './storage'
export * from './keyboard'
export * from './drag'

View File

@@ -0,0 +1,49 @@
// 处理键盘记录
export const keyRecordHandle = () => {
// 默认赋值
window.$KeyboardActive = {
ctrl: false,
space: false
}
document.onkeydown = (e: KeyboardEvent) => {
const { keyCode } = e
if (keyCode == 32 && e.target == document.body) e.preventDefault()
if ([17, 32].includes(keyCode) && window.$KeyboardActive) {
switch (keyCode) {
case 17:
window.$KeyboardActive.ctrl = true
break
case 32:
window.$KeyboardActive.space = true
const previewBoxDom = document.querySelector('.go-preview') as HTMLElement
if (previewBoxDom && previewBoxDom.style.position === 'absolute') {
previewBoxDom.style.cursor = 'move'
}
break
}
}
}
document.onkeyup = (e: KeyboardEvent) => {
const { keyCode } = e
if (keyCode == 32 && e.target == document.body) e.preventDefault()
if ([17, 32].includes(keyCode) && window.$KeyboardActive) {
switch (keyCode) {
case 17:
window.$KeyboardActive.ctrl = false
break
case 32:
window.$KeyboardActive.space = false
break
}
}
const previewBoxDom = document.querySelector('.go-preview') as HTMLElement
if (previewBoxDom) {
previewBoxDom.style.cursor = 'default'
}
}
}

View File

@@ -5,4 +5,5 @@ declare module '*.vue' {
}
declare module 'lodash/*'
declare module 'dom-helpers'
declare module 'dom-helpers'
declare module '@iconify/vue'