diff --git a/package.json b/package.json index e85dfb5b..667eb329 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "go-view", - "version": "2.2.7", + "version": "2.2.8", "engines": { "node": ">=12.0" }, diff --git a/src/assets/images/chart/decorates/flow-circle.png b/src/assets/images/chart/decorates/flow-circle.png new file mode 100644 index 00000000..81e010d7 Binary files /dev/null and b/src/assets/images/chart/decorates/flow-circle.png differ diff --git a/src/assets/images/chart/decorates/flow-zhexian.png b/src/assets/images/chart/decorates/flow-zhexian.png new file mode 100644 index 00000000..6b72e9c2 Binary files /dev/null and b/src/assets/images/chart/decorates/flow-zhexian.png differ diff --git a/src/assets/images/chart/informations/inputs_input.png b/src/assets/images/chart/informations/inputs_input.png new file mode 100644 index 00000000..f3778af3 Binary files /dev/null and b/src/assets/images/chart/informations/inputs_input.png differ diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index 8eb47d90..3756999d 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -7,6 +7,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore import { RequestDataTypeEnum } from '@/enums/httpEnum' import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils' import { setOption } from '@/packages/public/chart' +import { isNil } from 'lodash' // 获取类型 type ChartEditStoreType = typeof useChartEditStore @@ -35,7 +36,7 @@ export const useChartDataFetch = ( const echartsUpdateHandle = (dataset: any) => { if (chartFrame === ChartFrameEnum.ECHARTS) { if (vChartRef.value) { - setOption(vChartRef.value, { dataset: dataset }) + setOption(vChartRef.value, { dataset: dataset }, false) } } } @@ -101,14 +102,12 @@ export const useChartDataFetch = ( ) // 定时时间 - const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value + const time = targetInterval && !isNil(targetInterval.value) ? targetInterval.value : globalRequestInterval.value // 单位 - const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value + const unit = targetInterval && !isNil(targetInterval.value) ? targetUnit.value : globalUnit.value // 开启轮询 if (time) { fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) - } else { - fetchFn() } } // eslint-disable-next-line no-empty diff --git a/src/packages/chartConfiguration/echarts/label.ts b/src/packages/chartConfiguration/echarts/label.ts index c907687a..a71a3804 100644 --- a/src/packages/chartConfiguration/echarts/label.ts +++ b/src/packages/chartConfiguration/echarts/label.ts @@ -3,5 +3,11 @@ export const labelConfig = { { label: '外侧', value: 'outside' }, { label: '内部', value: 'inside' }, { label: '中心', value: 'center' } + ], + fontWeight: [ + { label: '正常', value: 'normal' }, + { label: '普通加粗', value: 'bold' }, + { label: '加粗', value: 'bolder' }, + { label: '细体', value: 'lighter' } ] } diff --git a/src/packages/components/Charts/Bars/BarCrossrange/index.vue b/src/packages/components/Charts/Bars/BarCrossrange/index.vue index b4f8b4b2..61620437 100644 --- a/src/packages/components/Charts/Bars/BarCrossrange/index.vue +++ b/src/packages/components/Charts/Bars/BarCrossrange/index.vue @@ -4,7 +4,6 @@ :init-options="initOptions" :theme="themeColor" :option="option" - :manual-update="isPreview()" :update-options="{ replaceMerge: replaceMergeArr }" diff --git a/src/packages/components/Charts/Bars/BarLine/config.ts b/src/packages/components/Charts/Bars/BarLine/config.ts index 7ad0f30f..fd3130b0 100644 --- a/src/packages/components/Charts/Bars/BarLine/config.ts +++ b/src/packages/components/Charts/Bars/BarLine/config.ts @@ -33,7 +33,6 @@ export const lineSeriesItem = { }, symbolSize: 5, //设定实心点的大小 itemStyle: { - color: '#FFE47A', borderWidth: 1 }, lineStyle: { diff --git a/src/packages/components/Charts/Bars/BarLine/config.vue b/src/packages/components/Charts/Bars/BarLine/config.vue index c380cda6..9a24dc02 100644 --- a/src/packages/components/Charts/Bars/BarLine/config.vue +++ b/src/packages/components/Charts/Bars/BarLine/config.vue @@ -62,6 +62,12 @@ + + + + 曲线 + + @@ -91,10 +97,10 @@ diff --git a/src/packages/components/Charts/Bars/BarLine/index.vue b/src/packages/components/Charts/Bars/BarLine/index.vue index 7c666463..d11c0b50 100644 --- a/src/packages/components/Charts/Bars/BarLine/index.vue +++ b/src/packages/components/Charts/Bars/BarLine/index.vue @@ -4,7 +4,9 @@ :init-options="initOptions" :theme="themeColor" :option="option" - :manual-update="isPreview()" + :update-options="{ + replaceMerge: replaceMergeArr + }" autoresize > @@ -12,6 +14,7 @@ diff --git a/src/packages/components/Charts/Lines/LineLinearSingle/index.vue b/src/packages/components/Charts/Lines/LineLinearSingle/index.vue index 9998635d..b4f8f093 100644 --- a/src/packages/components/Charts/Lines/LineLinearSingle/index.vue +++ b/src/packages/components/Charts/Lines/LineLinearSingle/index.vue @@ -1,5 +1,5 @@ diff --git a/src/packages/components/Charts/Maps/MapAmap/config.ts b/src/packages/components/Charts/Maps/MapAmap/config.ts index a7ba4ac9..c730fb28 100644 --- a/src/packages/components/Charts/Maps/MapAmap/config.ts +++ b/src/packages/components/Charts/Maps/MapAmap/config.ts @@ -16,8 +16,7 @@ export enum ThemeEnum { MACARON = 'macaron', BLUE = 'blue', DARKBLUE = 'darkblue', - WINE = 'wine', - WEIXIN = 'tileLayer' + WINE = 'wine' } export enum LangEnum { @@ -31,6 +30,11 @@ export enum ViewModeEnum { STEREOSCOPIC = '3D' } +export const ShowHideEnum = { + SHOW: true, + HIDE: false +} + export enum FeaturesEnum { BG = 'bg', POINT = 'point', @@ -71,6 +75,25 @@ export const option = { }, mapMarkerType: MarkerEnum.CIRCLE_MARKER, viewMode: ViewModeEnum.PLANE, + showLabel: ShowHideEnum.SHOW, + satelliteTileLayer: { + show: ShowHideEnum.HIDE, + zIndex: 1, + opacity: 1, + zooms: [3, 18] + }, + roadNetTileLayer: { + show: ShowHideEnum.HIDE, + zIndex: 2, + opacity: 1, + zooms: [3, 18] + }, + trafficTileLayer: { + show: ShowHideEnum.HIDE, + zIndex: 3, + opacity: 1, + zooms: [3, 18] + }, lang: LangEnum.ZH_CN, features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING] } diff --git a/src/packages/components/Charts/Maps/MapAmap/config.vue b/src/packages/components/Charts/Maps/MapAmap/config.vue index 8d8936b5..48d7edc5 100644 --- a/src/packages/components/Charts/Maps/MapAmap/config.vue +++ b/src/packages/components/Charts/Maps/MapAmap/config.vue @@ -22,13 +22,21 @@ - + + + + + + 是否显示 + + + @@ -76,11 +84,94 @@ + + + + + + 是否显示 + + + + + + + + + + + + + + + + + 是否显示 + + + + + + + + + + + + + + + + + 是否显示 + + + + + + + + + + + + + diff --git a/src/packages/components/Decorates/FlowChart/FlowChartLine/index.ts b/src/packages/components/Decorates/FlowChart/FlowChartLine/index.ts new file mode 100644 index 00000000..1fcd9923 --- /dev/null +++ b/src/packages/components/Decorates/FlowChart/FlowChartLine/index.ts @@ -0,0 +1,14 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' + +export const FlowChartLineConfig: ConfigType = { + key: 'FlowChartLine', + chartKey: 'VFlowChartLine', + conKey: 'VCFlowChartLine', + title: '流程线', + category: ChatCategoryEnum.FlowChart, + categoryName: ChatCategoryEnumName.FlowChart, + package: PackagesCategoryEnum.DECORATES, + chartFrame: ChartFrameEnum.STATIC, + image: 'flow-zhexian.png' +} diff --git a/src/packages/components/Decorates/FlowChart/FlowChartLine/index.vue b/src/packages/components/Decorates/FlowChart/FlowChartLine/index.vue new file mode 100644 index 00000000..015523e6 --- /dev/null +++ b/src/packages/components/Decorates/FlowChart/FlowChartLine/index.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/src/packages/components/Decorates/FlowChart/index.ts b/src/packages/components/Decorates/FlowChart/index.ts new file mode 100644 index 00000000..f96b146a --- /dev/null +++ b/src/packages/components/Decorates/FlowChart/index.ts @@ -0,0 +1,3 @@ +import { FlowChartLineConfig } from './FlowChartLine/index' + +export default [FlowChartLineConfig] diff --git a/src/packages/components/Decorates/Mores/CirclePoint/config.ts b/src/packages/components/Decorates/Mores/CirclePoint/config.ts new file mode 100644 index 00000000..a319e802 --- /dev/null +++ b/src/packages/components/Decorates/Mores/CirclePoint/config.ts @@ -0,0 +1,20 @@ +import { PublicConfigClass } from '@/packages/public' +import { CreateComponentType } from '@/packages/index.d' +import { CirclePointConfig } from './index' +import cloneDeep from 'lodash/cloneDeep' +import { chartInitConfig } from '@/settings/designSetting' + +export const option = { + outCircle: 15, + inCircle: 5, + outCircleColor: '#3f5261', + inCircleColor: '#fff', + outCircleWidth: 2 +} + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = CirclePointConfig.key + public attr = { ...chartInitConfig, w: 97, h: 97, zIndex: 1 } + public chartConfig = cloneDeep(CirclePointConfig) + public option = cloneDeep(option) +} diff --git a/src/packages/components/Decorates/Mores/CirclePoint/config.vue b/src/packages/components/Decorates/Mores/CirclePoint/config.vue new file mode 100644 index 00000000..7b7c6b7a --- /dev/null +++ b/src/packages/components/Decorates/Mores/CirclePoint/config.vue @@ -0,0 +1,51 @@ + + + diff --git a/src/packages/components/Decorates/Mores/CirclePoint/index.ts b/src/packages/components/Decorates/Mores/CirclePoint/index.ts new file mode 100644 index 00000000..bcc83d8d --- /dev/null +++ b/src/packages/components/Decorates/Mores/CirclePoint/index.ts @@ -0,0 +1,14 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' + +export const CirclePointConfig: ConfigType = { + key: 'CirclePoint', + chartKey: 'VCirclePoint', + conKey: 'VCCirclePoint', + title: '圆点光环', + category: ChatCategoryEnum.MORE, + categoryName: ChatCategoryEnumName.MORE, + package: PackagesCategoryEnum.DECORATES, + chartFrame: ChartFrameEnum.STATIC, + image: 'flow-circle.png' +} diff --git a/src/packages/components/Decorates/Mores/CirclePoint/index.vue b/src/packages/components/Decorates/Mores/CirclePoint/index.vue new file mode 100644 index 00000000..45674650 --- /dev/null +++ b/src/packages/components/Decorates/Mores/CirclePoint/index.vue @@ -0,0 +1,28 @@ + + + + diff --git a/src/packages/components/Decorates/Mores/index.ts b/src/packages/components/Decorates/Mores/index.ts index 43e15a3f..59f5e532 100644 --- a/src/packages/components/Decorates/Mores/index.ts +++ b/src/packages/components/Decorates/Mores/index.ts @@ -8,6 +8,7 @@ import { CountDownConfig } from './CountDown/index' import { FlipperNumberConfig } from './FlipperNumber' import { PipelineHConfig } from './PipelineH/index' import { PipelineVConfig } from './PipelineV/index' +import { CirclePointConfig } from './CirclePoint/index' export default [ // NumberConfig, diff --git a/src/packages/components/Decorates/index.d.ts b/src/packages/components/Decorates/index.d.ts index 99358a52..02352f9b 100644 --- a/src/packages/components/Decorates/index.d.ts +++ b/src/packages/components/Decorates/index.d.ts @@ -1,6 +1,7 @@ export enum ChatCategoryEnum { BORDER = 'Borders', DECORATE = 'Decorates', + FlowChart = 'FlowChart', THREE = 'Three', MORE = 'Mores', TOPBARS = 'TopBars', @@ -10,8 +11,9 @@ export enum ChatCategoryEnum { export enum ChatCategoryEnumName { BORDER = '边框', DECORATE = '装饰', + FlowChart = '流程', THREE = '三维', MORE = '更多', TOPBARS = '顶栏', BASE = '底座' -} \ No newline at end of file +} diff --git a/src/packages/components/Informations/Inputs/InputsInput/index.ts b/src/packages/components/Informations/Inputs/InputsInput/index.ts index 0828ea35..ac3ab47e 100644 --- a/src/packages/components/Informations/Inputs/InputsInput/index.ts +++ b/src/packages/components/Informations/Inputs/InputsInput/index.ts @@ -10,5 +10,5 @@ export const InputsInputConfig: ConfigType = { categoryName: ChatCategoryEnumName.INPUTS, package: PackagesCategoryEnum.INFORMATIONS, chartFrame: ChartFrameEnum.STATIC, - image: 'inputs_select.png' + image: 'inputs_input.png' } \ No newline at end of file diff --git a/src/packages/components/Informations/Mores/Video/index.vue b/src/packages/components/Informations/Mores/Video/index.vue index 1dfe60ab..2bd1403c 100644 --- a/src/packages/components/Informations/Mores/Video/index.vue +++ b/src/packages/components/Informations/Mores/Video/index.vue @@ -36,7 +36,7 @@ let option = shallowReactive({ ...configOption }) // 预览更新 const vVideoRef = ref(null) useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { - option = newData + option.dataset = newData }) // 编辑更新 diff --git a/src/packages/public/chart.ts b/src/packages/public/chart.ts index 92126692..20eb06ee 100644 --- a/src/packages/public/chart.ts +++ b/src/packages/public/chart.ts @@ -41,10 +41,12 @@ export const setData = (option: any, data: EchartsDataType) => { * @param instance * @param data */ -export const setOption = (instance: T, data: D) => { +export const setOption = (instance: T, data: D, notMerge = true) => { if (!instance) return const option = instance.getOption() if(!option) return option.dataset = null - instance.setOption(data) + instance.setOption(data, { + notMerge: notMerge + }) } diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 829d68e0..5f94c061 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -193,6 +193,27 @@ export const useChartEditStore = defineStore({ [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: this.getRequestGlobalConfig } }, + // * 获取针对 componentList 顺序排过序的 selectId + getSelectIdSortList(ids?: string[]): string[] { + if (!this.getTargetChart.selectId.length && !ids) return [] + const sortArr: string[] = [] + this.getComponentList.forEach((item: CreateComponentType | CreateComponentGroupType) => { + if (ids) { + ids.forEach((id: string) => { + if (item.id === id) { + sortArr.push(id) + } + }) + } else { + this.getTargetChart.selectId.forEach((id: string) => { + if (item.id === id) { + sortArr.push(id) + } + }) + } + }) + return sortArr + }, // * 设置 editCanvas 数据项 setEditCanvas(key: T, value: K) { this.editCanvas[key] = value @@ -756,18 +777,12 @@ export const useChartEditStore = defineStore({ // * 创建分组 setGroup(id?: string | string[], isHistory = true) { try { - const selectIds = this.idPreFormat(id) || this.getTargetChart.selectId + let selectIds = this.idPreFormat(id) || this.getTargetChart.selectId + selectIds = this.getSelectIdSortList(selectIds) if (selectIds.length < 2) return loadingStart() const groupClass = new PublicGroupConfigClass() - // 记录整体坐标 - const groupAttr = { - l: this.getEditCanvasConfig.width, - t: this.getEditCanvasConfig.height, - r: 0, - b: 0 - } const targetList: CreateComponentType[] = [] const historyList: CreateComponentType[] = [] @@ -790,21 +805,35 @@ export const useChartEditStore = defineStore({ newSelectIds.push(id) } }) - newSelectIds.forEach((id: string) => { + // 记录整体坐标 + const groupAttr = { + l: 0, + t: 0, + r: 0, + b: 0 + } + newSelectIds.forEach((id: string, index: number) => { // 获取目标数据并从 list 中移除 (成组后不可再次成组, 断言处理) const item = this.componentList.splice(this.fetchTargetIndex(id), 1)[0] as CreateComponentType const { x, y, w, h } = item.attr - const { l, t, r, b } = groupAttr - // 左 - groupAttr.l = l > x ? x : l - // 上 - groupAttr.t = t > y ? y : t - // 宽 - groupAttr.r = r < x + w ? x + w : r - // 高 - groupAttr.b = b < y + h ? y + h : b + if (index === 0) { + groupAttr.l = x + groupAttr.t = y + groupAttr.r = x + w + groupAttr.b = y + h + } else { + const { l, t, r, b } = groupAttr + // 左 + groupAttr.l = l > x ? x : l + // 上 + groupAttr.t = t > y ? y : t + // 宽 + groupAttr.r = r < x + w ? x + w : r + // 高 + groupAttr.b = b < y + h ? y + h : b + } - targetList.unshift(item) + targetList.push(item) historyList.push(toRaw(item)) }) @@ -830,7 +859,7 @@ export const useChartEditStore = defineStore({ loadingFinish() } catch (error) { console.log(error) - window['$message'].error('创建分组失败，请联系管理员！') + window['$message'].error('创建分组失败，请联系管理员') loadingFinish() } }, @@ -850,7 +879,7 @@ export const useChartEditStore = defineStore({ if (isHistory) chartHistoryStore.createUnGroupHistory(cloneDeep([targetGroup])) // 分离组件并还原位置属性 - targetGroup.groupList.reverse().forEach(item => { + targetGroup.groupList.forEach(item => { item.attr.x = item.attr.x + targetGroup.attr.x item.attr.y = item.attr.y + targetGroup.attr.y if (!callBack) { @@ -875,7 +904,7 @@ export const useChartEditStore = defineStore({ loadingFinish() } catch (error) { console.log(error) - window['$message'].error('解除分组失败，请联系管理员！') + window['$message'].error('解除分组失败，请联系管理员') loadingFinish() } }, diff --git a/src/utils/type.ts b/src/utils/type.ts index 7b86c022..f01506e9 100644 --- a/src/utils/type.ts +++ b/src/utils/type.ts @@ -24,8 +24,8 @@ export function isArray(p: any): p is [] { return Array.isArray(p) } -export const toNumber = (number: number | string, toFixedNumber = 2) => { - return isString(number) ? parseFloat(parseFloat(number).toFixed(2)) : number +export const toNumber = (number: number | string, toFixedNumber: number = 2) => { + return isString(number) ? parseFloat(parseFloat(number).toFixed(toFixedNumber)) : number } export const toString = (str: any) => { diff --git a/src/utils/utils.ts b/src/utils/utils.ts index bffc7630..4f7a52e5 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -26,7 +26,7 @@ export const isDev = () => { * @param { Number } randomLength */ export const getUUID = (randomLength = 10) => { - return Number(Math.random().toString().substring(2, randomLength) + Date.now()).toString(36) + return 'id_' + Number(Math.random().toString().substring(2, randomLength) + Date.now()).toString(36) } /** diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue index 4af1689e..ac6cd596 100644 --- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue +++ b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue @@ -12,7 +12,7 @@ :key="item.title" draggable @dragstart="!item.disabled && dragStartHandle($event, item)" - @dragend="!item.disabled && dragendHandle" + @dragend="!item.disabled && dragendHandle()" @dblclick="dblclickHandle(item)" @click="clickHandle(item)" > diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue index 3ff3c6c2..65041b6e 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue @@ -1,5 +1,11 @@ - 保存 & 发送请求 +
+ 取消 + 保存 & 发送请求 +
@@ -82,9 +91,12 @@ const pondData = computed(() => { return data[0] }) -watch(() => props.modelShow, (newValue) => { - modelShowRef.value = newValue -}) +watch( + () => props.modelShow, + newValue => { + modelShowRef.value = newValue + } +) watch( () => pondData.value, @@ -189,7 +201,7 @@ const deletePond = (targetData: RequestDataPondItemType) => { } // 关闭 -const closeHandle = () => { +const closeAndSendHandle = () => { // 将所选内容赋值给对象 if (pondData.value) { targetData.value.request = { @@ -200,6 +212,14 @@ const closeHandle = () => { emit('update:modelShow', false) emit('sendHandle') } + +const closeHandle = () => { + emit('update:modelShow', false) +} + +const onEsc = () => { + closeHandle() +} diff --git a/types/shims-vue.d.ts b/types/shims-vue.d.ts index fbfc8922..6c92d48b 100644 --- a/types/shims-vue.d.ts +++ b/types/shims-vue.d.ts @@ -5,4 +5,5 @@ declare module '*.vue' { } declare module 'lodash/*' -declare module 'dom-helpers' \ No newline at end of file +declare module 'dom-helpers' +declare module 'vue3-sketch-ruler'; \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 159aabd9..2aee1d6b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -92,7 +92,7 @@ export default ({ mode } : { mode:any }) => defineConfig({ // minify: 'terser', // 如果需要用terser混淆，可打开这两行 // terserOptions: terserOptions, rollupOptions: rollupOptions, - brotliSize: brotliSize, + reportCompressedSize: brotliSize, chunkSizeWarningLimit: chunkSizeWarningLimit } })